\n \n\n \n
\n \n
\n {subcommittees && subcommittees.length > 0 && (\n \n
\n {name}
\n\n {isPending &&
\n \n \n
\n Subcommitees: {subcommittees.map((s) => s.name).join(', ')}
\n )}\n \n
\n \n \n \n \n
\n \n \n
\n {renderContacts()}
\n \n \n
\n )}\n \n \n \n );\n};\n\nCompanyItem.propTypes = {\n company: PropTypes.object,\n onRemoveClick: PropTypes.func,\n onSetAsPrimaryClick: PropTypes.func,\n};\n\nexport default CompanyItem;\n","export { default } from './CompanyItem';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage } from 'react-intl';\nimport { FiUsers } from 'react-icons/fi';\n\nimport Avatar from 'components/v2/shared/Avatar';\n\nconst CompanyItemContacts = ({ approvedContacts, requestedContacts }) => {\n const renderAvatars = (items) => (\n \n {renderManageButton()}\n {renderSetPrimaryButton()}\n {renderPayButton()}\n {renderRemoveButton()}\n {renderCloseButton()}\n
\n {isPrimary && (\n \n {items.slice(0, 5).map((item) => (\n
\n );\n\n return (\n \n {!!approvedContacts && approvedContacts.length > 0 && (\n
\n );\n};\n\nCompanyItemContacts.propTypes = {\n approvedContacts: PropTypes.array,\n requestedContacts: PropTypes.array,\n};\n\nexport default CompanyItemContacts;\n","export { default } from './CompanyItemContacts';\n","import React, { useState, useEffect } from 'react';\nimport { InView } from 'react-intersection-observer';\nimport { useDebounce } from 'use-debounce';\nimport { FormattedMessage } from 'react-intl';\n\nimport Spinner from 'components/v2/shared/Spinner/Spinner';\nimport useCurrentUserCompanies from '../../../hooks/useCurrentUserCompanies';\nimport { withApollo } from 'utils/v2/apollo';\nimport { withDateFormatContext } from 'contexts/v2/DateFormatContext';\nimport { withIntl } from 'utils/v2/intl';\nimport { Search } from 'components/shared/Search';\nimport CompanyItem from '../CompanyItem/CompanyItem';\n\nconst CompanyList = () => {\n const [searchTerm, setSearchTerm] = useState('');\n const [debouncedTerm] = useDebounce(searchTerm, 500);\n\n const { data, loading, archiveCompanyContact, closeCompany, setCompanyAsPrimary, fetchMoreCompanies } =\n useCurrentUserCompanies({ skipFetch: false, name: debouncedTerm, context: 'CompanyList' });\n\n const handleSearch = (e) => setSearchTerm(e.target.value);\n\n if (!data && loading) {\n return (\n \n
\n )}\n {!!requestedContacts && requestedContacts.length > 0 && (\n \n
\n )}\n \n
\n );\n }\n\n const {\n currentUser: {\n companies: { pageInfo, edges: companies },\n },\n } = data;\n\n const handleArchiveCompany = async (companyId) => {\n await archiveCompanyContact(companyId);\n };\n\n const handleCloseCompany = async (companyId) => {\n await closeCompany(companyId);\n window.location.assign(`/companies/new`);\n };\n\n const handleSetAsPrimary = async (companyId) => {\n await setCompanyAsPrimary(companyId);\n window.location.reload();\n };\n\n const handleInViewChange = (inView) => {\n if (inView && pageInfo.hasNextPage && !loading) {\n fetchMoreCompanies(pageInfo.endCursor);\n }\n };\n\n const renderCompanies = () => {\n if (!companies.length) {\n return (\n \n
\n );\n }\n\n return companies.map((company) => (\n \n \n \n )}\n
\n );\n};\n\nexport default withIntl(withApollo(withDateFormatContext(CompanyList)));\n","export { default } from './CompanyList';\n","import React, { memo, useRef, useState, useEffect } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Modal from 'react-bootstrap/Modal';\nimport Avatar from '../shared/Avatar';\n\nimport closeIcon from 'images/icons/close-icon-black.svg';\n\nexport default memo(({ contacts, onHide, show, header }) => {\n const searchInputRef = useRef(null);\n\n const intl = useIntl();\n\n let [filteredContacts, setFilteredContacts] = useState(contacts);\n\n useEffect(() => {\n setFilteredContacts(contacts);\n }, [contacts]);\n\n const closeBtn = (\n \n );\n\n const onModalEnter = () => {\n searchInputRef.current.focus();\n setFilteredContacts(contacts);\n };\n\n const onSearchInputChange = (event) => {\n const searchTerm = event.target.value.toLowerCase();\n\n if (searchTerm.length === 0) {\n setFilteredContacts(contacts);\n } else {\n setFilteredContacts(contacts.filter(({ name }) => name.toLowerCase().includes(searchTerm)));\n }\n };\n\n const contactsList = filteredContacts.map((contact) => {\n return (\n \n
\n\n {renderCompanies()}\n\n {pageInfo.hasNextPage && (\n \n
\n );\n });\n\n return (\n \n
\n {contact.name}
\n \n
\n {contactsList}
\n \n
\n \n
\n \n\n \n
\n \n \n
\n \n
\n );\n });\n\n const diff = pickedContacts.length - maxContacts;\n\n const contactsLeft = (\n \n
\n );\n\n return (\n \n {header && (\n
\n\n {pickedContactIds}\n\n \n
\n )}\n\n \n {addedContacts}\n {diff > 0 && contactsLeft}\n {allowAdd &&
\n \n
\n {searchResults}
\n \n
\n \n
\n \n
\n\n {isAdded && (\n {contact.name}
\n \n \n
\n )}\n \n
\n );\n }\n\n const { pageInfo, edges: messages } = data.currentCompany.conversation.messages;\n\n const handleScrollTop = () => {\n if (!pageInfo.hasPreviousPage) return;\n if (networkStatus == NetworkStatus.fetchMore) return;\n\n fetchMore({\n variables: {\n last: MESSAGES_PER_PAGE,\n before: pageInfo.startCursor,\n },\n });\n };\n\n const handleScrollStop = () => {\n if (isUnread) {\n markMessagesAsRead();\n }\n };\n\n return (\n \n
\n \n
\n );\n};\n\nexport default withIntl(Chat);\n","import { css } from '@emotion/core';\nimport { colors, media } from 'styles';\n\nexport const wrapper = {\n base: css`\n position: fixed;\n z-index: 9999;\n width: 440px;\n bottom: 25px;\n right: 25px;\n box-shadow: -20px 4px 50px rgb(54 71 98 / 25%);\n border: 2px solid transparent;\n transition: border-color 0.2s ease-in;\n display: none;\n background: ${colors.white};\n ${media.tablet} {\n width: 100%;\n height: calc(100% - var(--nav-height));\n top: var(--nav-height);\n bottom: 0;\n right: 0;\n flex-direction: column;\n border: none;\n box-shadow: none;\n }\n `,\n\n visible: css`\n display: block;\n ${media.tablet} {\n display: flex;\n }\n `,\n\n highlighted: css`\n border-color: ${colors.cyan};\n `,\n};\n\nexport const spinner = css`\n height: 477px;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n","export { default } from './Chat';\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport Group from 'components/contacts/picker/Group';\n\nimport * as styles from './ChatHeader.styles';\n\nconst ChatHeader = memo(({ title, participants, onClose }) => {\n const chatParticipants = participants && \n
\n );\n});\n\nexport { ChatHeader };\n","import { css } from '@emotion/core';\nimport { panels, colors, fonts } from 'styles';\n\nexport const wrapper = css`\n ${panels.base}\n min-width: 0;\n padding: 15px 15px 15px 32px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2px;\n`;\n\nexport const title = css`\n ${fonts.extraBold}\n color: ${colors.black};\n font-size: 16px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const flex = css`\n display: flex;\n align-items: center;\n`;\n\nexport const close = css`\n cursor: pointer;\n font-size: 16px;\n flex-shrink: 0;\n font-weight: 300;\n color: ${colors.black};\n margin-left: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n width: 25px;\n height: 25px;\n\n &:hover {\n opacity: 0.8;\n background: ${colors.placeholderGrey};\n }\n`;\n","export { ChatHeader } from './ChatHeader';\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport * as styles from './DateLabel.styles';\n\nconst DateLabel = ({ label }) => {\n return (\n {title}
\n\n \n {chatParticipants}\n\n \n
\n \n
\n );\n};\n\nexport { DateLabel };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const wrapper = css`\n margin: 17px auto;\n display: flex;\n justify-content: center;\n`;\n\nexport const label = css`\n background: ${colors.placeholderGrey};\n border-radius: 50px;\n font-size: 12px;\n color: ${colors.mediumGrey};\n padding: 5px 24px;\n`;\n","export { DateLabel } from './DateLabel';\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { ReactComponent as ChatIcon } from 'images/icons/chat.svg';\nimport Chat from './../Chat';\n\nimport * as styles from './Icon.styles';\nimport { createPortal } from 'react-dom';\n\nconst HIGHLIGHT_DURATION = 1000;\n\nconst Icon = ({ showBadge, showChat, title }) => {\n const [isComponentVisible, setIsComponentVisible] = useState(showChat);\n const handleClick = () => setIsComponentVisible(!isComponentVisible);\n\n const [isBadgeVisible, setIsBadgeVisible] = useState(showBadge);\n const [iconStyles, setIconStyles] = useState(styles.icon.base);\n const [hasNewMessages, setHasNewMessages] = useState(false);\n\n const handleAnimationEnd = () => setIconStyles(styles.icon.base);\n const toggleBadge = (show) => setIsBadgeVisible(show);\n\n const handleSubscription = (show) => {\n toggleBadge(show);\n\n if (!show) return;\n\n setHasNewMessages(true);\n setIconStyles([styles.icon.base, styles.icon.animated]);\n\n setTimeout(() => setHasNewMessages(false), HIGHLIGHT_DURATION);\n };\n\n const badge = isBadgeVisible && ;\n\n return (\n <>\n {label}
\n \n {title ? {title} : null}\n
\n\n {createPortal(\n {avatar}
;\n};\n\nconst Message = memo(({ author, text, createdAt, withAvatar }) => {\n const { isCurrentContact } = author;\n\n const wrapperStyles = [styles.wrapper.base, withAvatar && styles.wrapper.withAvatar];\n\n const blockStyles = [\n styles.block.base,\n isCurrentContact && styles.block.withMarginRight,\n !isCurrentContact && styles.block.withMarginLeft,\n ];\n\n const triangleStyles = withAvatar && [\n isCurrentContact && styles.triangle.right,\n !isCurrentContact && styles.triangle.left,\n ];\n\n const timeCreated = moment(createdAt).format(TIME_FORMAT);\n\n return (\n \n
\n );\n});\n\nexport { Message };\n","import { css } from '@emotion/core';\nimport { colors, panels, fonts } from 'styles';\n\nexport const wrapper = {\n base: css`\n display: flex;\n align-items: flex-end;\n margin-bottom: 10px;\n `,\n\n withAvatar: css`\n margin-bottom: 20px;\n `,\n};\n\nexport const image = css`\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n`;\n\nexport const block = {\n base: css`\n ${panels.base}\n position: relative;\n width: 340px;\n padding: 12px 12px 10px 12px;\n background: ${colors.white};\n `,\n\n withMarginRight: css`\n margin-right: 15px;\n `,\n\n withMarginLeft: css`\n margin-left: 15px;\n `,\n};\n\nexport const author = css`\n ${fonts.extraBold}\n font-size: 12px;\n padding: 0 10px;\n color: ${colors.black};\n`;\n\nexport const text = css`\n margin: 8px 0 5px 0;\n padding: 0 10px;\n font-size: 12px;\n color: ${colors.black};\n white-space: pre-line;\n word-break: break-word;\n line-height: 16px;\n`;\n\nexport const date = css`\n color: ${colors.lightGrey};\n font-size: 12px;\n display: flex;\n justify-content: flex-end;\n`;\n\nexport const triangleBase = css`\n width: 0;\n height: 0;\n position: absolute;\n z-index: 1;\n box-shadow: 0 4px 4px rgb(223 223 223 / 25%);\n bottom: 0;\n border-top: 10px solid transparent;\n`;\n\nexport const triangle = {\n left: css`\n ${triangleBase}\n left: -5px;\n border-right: 10px solid ${colors.white};\n `,\n\n right: css`\n ${triangleBase}\n right: -5px;\n border-left: 10px solid ${colors.white};\n `,\n};\n","export { Message } from './Message';\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport TextareaAutosize from 'react-autosize-textarea';\n\nimport { ReactComponent as PlaneIcon } from 'images/icons/plane.svg';\n\nimport * as styles from './MessageForm.styles';\n\nconst MessageForm = memo(({ value, onChange, onSubmit }) => {\n const intl = useIntl();\n\n const handleSubmit = (e) => {\n e.preventDefault();\n onSubmit();\n };\n\n const handleKeyDown = (e) => {\n if (e.keyCode == 13 && !e.shiftKey) {\n handleSubmit(e);\n }\n };\n\n return (\n \n );\n});\n\nexport { MessageForm };\n","import { css } from '@emotion/core';\nimport { colors, media } from 'styles';\n\nexport const wrapper = css`\n background: ${colors.white};\n box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04);\n border-radius: 4px;\n display: flex;\n margin-top: 2px;\n align-items: center;\n height: 55px;\n padding: 11px 28px 11px 32px;\n ${media.tablet} {\n padding: 11px 20px;\n margin-top: 0;\n height: 85px;\n box-shadow: none;\n border-radius: 0;\n border-top: 1px solid ${colors.borderGrey};\n }\n`;\n\nexport const textArea = css`\n resize: none;\n color: ${colors.black};\n font-size: 12px;\n line-height: 14px;\n border: none;\n padding: 0 10px 0 0;\n flex: 1;\n\n &:placeholder {\n color: ${colors.mediumGrey};\n }\n`;\n\nexport const icon = css`\n cursor: pointer;\n margin-left: 10px;\n fill: ${colors.purple};\n\n &:hover {\n opacity: 0.8;\n }\n`;\n","export { MessageForm } from './MessageForm';\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { memo, useState, useMemo, useRef, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { Message } from './../Message';\nimport { DateLabel } from './../DateLabel';\nimport { Scrollable } from 'components/shared/Scrollable';\n\nimport { userDateFormat } from '../../../contexts/v2/DateFormatContext';\n\nimport moment from 'moment';\n\nimport * as styles from './MessageList.styles';\n\nconst TIME_THRESHOLD = 5;\nconst THRESHOLD_PERCENTAGE = 0.2;\n\nconst MessageList = memo(({ messages, onScrollTop, onScrollStop }) => {\n const [trackedMessage, setTrackedMessage] = useState(null);\n const [isScrollBottom, setIsScrollBottom] = useState(true);\n\n const ref = useRef();\n\n useEffect(() => {\n ref.current.scrollToBottom();\n }, []);\n\n useEffect(() => {\n if (isScrollBottom) {\n ref.current.scrollToBottom();\n }\n\n const lastMessage = messages[messages.length - 1];\n\n if (\n trackedMessage &&\n lastMessage &&\n lastMessage.node.id !== trackedMessage.node.id &&\n lastMessage.node.owner.isCurrentContact\n ) {\n ref.current.scrollToBottom();\n }\n\n setTrackedMessage(lastMessage);\n }, [messages]);\n\n const groupedMessages = useMemo(() => {\n return messages.reduce((accumulator, message) => {\n const date = moment(message.node.createdAt).format(userDateFormat);\n\n if (!accumulator[date]) {\n accumulator[date] = [];\n }\n\n accumulator[date].push(message);\n\n return accumulator;\n }, {});\n }, [messages]);\n\n const withAvatar = (prevMessage, nextMessage) => {\n if (!nextMessage) return true;\n if (prevMessage.owner.id !== nextMessage.owner.id) return true;\n\n const diff = moment(nextMessage.createdAt).diff(moment(prevMessage.createdAt), 'minutes');\n\n return diff > TIME_THRESHOLD;\n };\n\n const renderMessages = (items) => {\n return items.map((item, index) => {\n const showAvatar = withAvatar(items[index].node, items[index + 1]?.node);\n\n return (\n \n
\n\n {author.name}
\n\n \n
\n\n {timeCreated}
\n\n \n \n {messageList}\n {messageListPlaceholder}\n
\n \n );\n});\n\nexport { MessageList };\n","import { css } from '@emotion/core';\nimport { colors, media } from 'styles';\n\nexport const spinner = css`\n display: flex;\n align-items: center;\n height: 100%;\n justify-content: center;\n`;\n\nexport const scrollable = css`\n min-height: 420px;\n max-height: 420px;\n background: ${colors.lightestGrey};\n ${media.tablet} {\n max-height: none;\n min-height: auto;\n flex-grow: 1;\n }\n`;\n\nexport const messages = css`\n padding: 0 32px;\n`;\n","export { MessageList } from './MessageList';\n","import React from 'react';\n\nimport { client } from 'utils/apollo';\nimport { ApolloProvider } from '@apollo/client';\n\nimport { Icon } from 'components/conversations/Icon';\n\nexport default ({ showBadge, showChat, title = '' }) => (\n \n \n {smartDocumentBadge}\n \n\n
\n );\n});\n\nexport { Document };\n","import { css } from '@emotion/core';\nimport { fonts, panels, colors } from 'styles';\n\nexport const wrapper = css`\n text-align: center;\n color: ${colors.black};\n cursor: pointer;\n font-size: 12px;\n`;\n\nexport const icon = css`\n font-size: 22px;\n text-align: center;\n background: rgba(0, 186, 198, 0.12);\n border-radius: 3px;\n height: 35px;\n width: 35px;\n line-height: 35px;\n color: ${colors.cyan};\n`;\n\nexport const name = css`\n ${fonts.regular}\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const createdAt = css`\n ${fonts.styledLight}\n font-weight: 300;\n`;\n","export { Document } from './Document';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport Placeholder from 'images/group.png';\nimport * as styles from './FallbackCard.styles';\n\nconst FallbackCard = memo(({ message, link }) => {\n return (\n \n {name}
\n {dateCreated}
\n {message}
\n \n );\n});\n\nexport { FallbackCard };\n","import { css } from '@emotion/core';\nimport { fonts, panels, colors } from 'styles';\n\nexport const wrapper = css`\n ${panels.base}\n box-shadow: none;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n word-wrap: break-word;\n padding: 25px 25px 20px 25px;\n\n &:hover {\n background: ${colors.lightestGrey};\n }\n`;\n\nexport const image = css`\n margin: 0;\n width: 70px;\n margin-bottom: 15px;\n flex-shrink: 0;\n`;\n\nexport const message = css`\n ${fonts.bold}\n font-size: 16px;\n color: ${colors.black};\n`;\n","export { FallbackCard } from './FallbackCard';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport ClipLoader from 'react-spinners/ClipLoader';\n\nimport * as styles from './Panel.styles';\nimport { colors } from 'styles';\n\nconst Panel = memo(({ heading, children, viewMoreLink, loading }) => {\n const viewMore = viewMoreLink && (\n \n \n
\n );\n});\n\nexport { Panel };\n","import { css } from '@emotion/core';\nimport { fonts, panels, colors } from 'styles';\n\nexport const wrapper = css`\n ${panels.base}\n padding: 25px 30px 25px 30px;\n height: 100%;\n`;\n\nexport const viewMore = css`\n ${fonts.bold}\n color: ${colors.cyan};\n font-size: 14px;\n\n &:hover {\n color: ${colors.cyan};\n opacity: 0.8;\n }\n`;\n\nexport const heading = css`\n ${fonts.semiBold}\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: ${colors.black};\n margin: 0 0 20px 0;\n`;\n\nexport const spinner = css`\n min-height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:empty {\n min-height: 0;\n }\n`;\n","export { Panel } from './Panel';\n","import React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Row, Col } from 'react-bootstrap';\nimport { Document } from './../Document';\nimport { Panel } from './../Panel';\nimport { FallbackCard } from './../FallbackCard';\nimport FileViewer from 'components/v2/shared/FileViewer';\nimport { withIntl } from '../../../utils/v2/intl';\nimport { useFileViewer } from 'components/documents/hooks/useFileViewer';\nimport { useRecentDocumentsQuery } from './../data/queries/RecentDocumentsQuery';\n\nimport { DateFormatContextProvider } from '../../../contexts/v2/DateFormatContext';\n\nconst RecentDocuments = () => {\n const { data, loading } = useRecentDocumentsQuery();\n const { fileViewerContext, openFileViewer, closeFileViewer } = useFileViewer();\n\n const intl = useIntl();\n\n if (loading || !data) {\n return \n {heading}\n {viewMore}\n
\n\n {children}\n\n \n
\n \n
\n );\n\n return (\n options.length > 0 && (\n \n
\n )\n );\n});\n\nexport { ActionsDropdown };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const trigger = css`\n cursor: pointer;\n`;\n\nexport const dropdown = css`\n background: ${colors.white};\n box-shadow: 0px 3px 20px rgba(16, 8, 63, 0.11);\n position: absolute;\n right: 25px;\n z-index: 2;\n ${media.tablet} {\n width: 100%;\n right: 0;\n top: unset !important; /* bottom: 66px; */\n z-index: 1000;\n bottom: 0;\n position: fixed;\n border-radius: 0;\n }\n`;\n\nexport const container = css`\n display: inline-block;\n width: 20px;\n height: 100%;\n display: flex;\n justify-content: center;\n ${media.tablet} {\n margin-left: 7px;\n }\n`;\n\nexport const option = css`\n ${fonts.regular}\n color: ${colors.black};\n white-space: nowrap;\n cursor: pointer;\n font-size: 12px;\n line-height: 1;\n padding: 12px 15px;\n\n ${media.tablet} {\n padding: 15px;\n }\n\n &:hover {\n background: ${colors.lightestGrey};\n }\n`;\n\nexport const icon = css`\n flex-shrink: 0;\n`;\n","export { ActionsDropdown } from './ActionsDropdown';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport * as styles from './ActionsDropdownItem.styles';\n\nconst ActionsDropdownItem = memo(({ option, disabled, onClick }) => {\n const handleClick = (event) => {\n event.stopPropagation();\n\n return disabled ? null : onClick(option);\n };\n\n return (\n \n
\n\n {dropdown}
\n \n {option}\n
\n );\n});\n\nexport { ActionsDropdownItem };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const container = css`\n ${fonts.regular}\n color: ${colors.black};\n white-space: nowrap;\n cursor: pointer;\n font-size: 12px;\n line-height: 1;\n padding: 12px 15px;\n border-radius: 0;\n\n ${media.tablet} {\n font-weight: 500;\n padding: 15px;\n }\n\n &:hover {\n background: ${colors.lightestGrey};\n }\n\n &.disabled {\n cursor: default;\n color: ${colors.headingGrey};\n }\n`;\n","export { ActionsDropdownItem } from './ActionsDropdownItem';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport * as styles from './AreaButton.styles';\n\nconst AreaButton = memo(({ isDisabled, text, icon, onClick, alignLeft, alignRight }) => {\n const containerStyles = [\n styles.container.base,\n isDisabled && styles.container.disabled,\n alignLeft && styles.container.marginRightAuto,\n alignRight && styles.container.marginLeftAuto,\n ];\n\n const handleClick = isDisabled ? null : onClick;\n\n return (\n \n
\n );\n});\n\nexport { AreaButton };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const container = {\n base: css`\n --hover-opacity: 0.7;\n\n display: flex;\n align-items: flex-end;\n cursor: pointer;\n\n .areaButton__icon {\n margin-right: 5px;\n transition: all 0.2s ease-in;\n line-height: 1;\n }\n\n .areaButton__text {\n line-height: 1;\n transition: all 0.2s ease-in;\n color: ${colors.black};\n font-size: 14px;\n }\n\n &:hover {\n .areaButton__icon {\n svg path {\n opacity: var(--hover-opacity);\n }\n }\n\n .areaButton__text {\n opacity: var(--hover-opacity);\n }\n }\n `,\n\n disabled: css`\n cursor: default;\n\n .areaButton__icon {\n svg path {\n opacity: var(--hover-opacity);\n }\n }\n\n .areaButton__text {\n opacity: var(--hover-opacity);\n color: ${colors.mediumGrey};\n }\n `,\n\n marginRightAuto: css`\n margin-right: auto;\n `,\n\n marginLeftAuto: css`\n margin-left: auto;\n `,\n};\n","export { AreaButton } from './AreaButton';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { Placeholder } from 'components/shared/Placeholder';\n\nimport * as styles from './AreaPlaceholder.styles';\n\nconst AreaPlaceholder = memo(({ show, image, message }) => {\n return (\n show && (\n {icon}
\n {text}
\n \n
\n )\n );\n});\n\nexport { AreaPlaceholder };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const placeholder = css`\n border-radius: 21px;\n background: ${colors.lightestGrey};\n padding: 60px 0;\n`;\n","export { AreaPlaceholder } from './AreaPlaceholder';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { ReactComponent as ArrowIcon } from 'images/icons/documents/breadcrumb-arrow-right.svg';\n\nimport * as styles from './Breadcrumb.styles';\n\nconst Breadcrumb = memo(({ name, onClick }) => {\n const breadcrumbStyles = [styles.breadcrumb.base, onClick && styles.breadcrumb.active];\n\n return (\n \n
\n );\n});\n\nexport { Breadcrumb };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const breadcrumb = {\n base: css`\n ${fonts.regular}\n display: flex;\n align-items: center;\n font-size: 14px;\n line-height: 1;\n color: ${colors.mediumGrey};\n max-width: 100%;\n white-space: nowrap;\n\n .breadcrumb__name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n line-height: 16px;\n max-width: 150px;\n\n ${media.tablet} {\n max-width: 100px;\n max-width: 100%;\n }\n }\n\n .breadcrumb__arrow {\n margin: 0 8px;\n flex-shrink: 0;\n\n path {\n stroke: ${colors.black};\n }\n }\n\n &:last-child {\n margin: 0;\n\n .breadcrumb__arrow {\n display: none;\n }\n }\n `,\n\n active: css`\n ${fonts.regular}\n display: flex;\n align-items: center;\n font-size: 14px;\n line-height: 1;\n color: ${colors.black};\n cursor: pointer;\n\n .breadcrumb__arrow {\n margin: 0 8px;\n }\n\n &:last-child {\n ${fonts.semiBold}\n cursor: default;\n margin: 0;\n color: ${colors.black};\n\n .breadcrumb__arrow {\n display: none;\n }\n }\n `,\n};\n","export { Breadcrumb } from './Breadcrumb';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { BreadcrumbsDropdown } from './../BreadcrumbsDropdown';\nimport { Breadcrumb } from './../Breadcrumb';\n\nimport * as styles from './Breadcrumbs.styles';\n\nconst MAX_ITEMS = 3;\n\nconst Breadcrumbs = memo(({ isLoading, items, onClick }) => {\n if (!items) return null;\n\n const renderBreadcrumb = (breadcrumb) => {\n const handleClick = onClick && onClick.bind(this, breadcrumb.id);\n const key = `breadcrumb-${breadcrumb.id}`;\n\n return \n {name}\n
\n\n {breadcrumbs}
;\n }\n\n const baseBreadcrumbs = items.slice(0, MAX_ITEMS - 1).map(renderBreadcrumb);\n const lastBreadcrumb = renderBreadcrumb(items[items.length - 1]);\n const dropdownOptions = items.slice(MAX_ITEMS - 1, items.length - 1).reverse();\n\n return (\n \n {baseBreadcrumbs}\n\n
\n );\n});\n\nexport { Breadcrumbs };\n","import { css } from '@emotion/core';\n\nexport const container = {\n base: css`\n display: flex;\n align-items: center;\n transition: none;\n opacity: 0;\n flex-shrink: 0;\n `,\n\n visible: css`\n opacity: 1;\n transition: opacity 0.4s ease-in;\n `,\n};\n","export { Breadcrumbs } from './Breadcrumbs';\n","/** @jsx jsx */\n\nimport React, { memo, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { Scrollable } from 'components/shared/Scrollable';\nimport { BreadcrumbsDropdownItem } from './../BreadcrumbsDropdownItem';\nimport { useClickOutside } from 'hooks/useClickOutside';\n\nimport { ReactComponent as ArrowIcon } from 'images/icons/documents/breadcrumb-arrow-right.svg';\nimport { ReactComponent as DropdownIcon } from 'images/icons/documents/breadcrumbs.svg';\n\nimport * as styles from './BreadcrumbsDropdown.styles';\n\nconst BreadcrumbsDropdown = memo(({ options, onClick }) => {\n if (!options.length) {\n return null;\n }\n\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside(false);\n\n const toggleVisibility = () => {\n if (!onClick) return;\n\n setIsComponentVisible(!isComponentVisible);\n };\n\n useEffect(() => setIsComponentVisible(false), [options]);\n\n const dropdownOptions = options.map((breadcrumb) => {\n const key = `breadcrumb-${breadcrumb.id}`;\n const handleClick = onClick && onClick.bind(this, breadcrumb.id);\n\n return \n \n {dropdownOptions}\n \n
\n );\n\n const iconStyles = [styles.icon.base, onClick && styles.icon.hoverable];\n\n return (\n \n
\n );\n});\n\nexport { BreadcrumbsDropdown };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const icon = {\n base: css`\n cursor: pointer;\n margin-right: 12px;\n `,\n\n hoverable: css`\n &:hover {\n rect {\n fill: ${colors.cyan};\n }\n\n circle {\n fill: ${colors.white};\n }\n }\n `,\n};\n\nexport const arrow = css`\n margin: 0 8px 0 0;\n`;\n\nexport const container = css`\n position: relative;\n line-height: 1;\n white-space: nowrap;\n`;\n\nexport const dropdown = css`\n z-index: 2;\n position: absolute;\n top: 20px;\n right: 25px;\n border-radius: 4px;\n padding: 8px;\n background: ${colors.white};\n box-shadow: 0px 3px 20px rgba(16, 8, 63, 0.11);\n`;\n\nexport const scrollable = css`\n max-height: 400px;\n\n &.trackYVisible {\n width: 215px !important;\n }\n`;\n","export { BreadcrumbsDropdown } from './BreadcrumbsDropdown';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { ReactComponent as DirectoryIcon } from 'images/icons/documents/directory-icon.svg';\n\nimport * as styles from './BreadcrumbsDropdownItem.styles';\n\nconst BreadcrumbsDropdownItem = memo(({ name, onClick }) => {\n return (\n \n
\n );\n});\n\nexport { BreadcrumbsDropdownItem };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const container = css`\n padding: 8px;\n display: flex;\n border-radius: 4px;\n align-items: center;\n cursor: pointer;\n max-width: 200px;\n\n &:hover {\n background: ${colors.lightestPurple};\n }\n`;\n\nexport const icon = css`\n flex-shrink: 0;\n margin-right: 7px;\n`;\n\nexport const name = css`\n ${fonts.regular}\n font-size: 14px;\n line-height: 16px;\n color: ${colors.black};\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n","export { BreadcrumbsDropdownItem } from './BreadcrumbsDropdownItem';\n","/** @jsx jsx */\nimport React, { memo, useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { useDirectoriesBrowser } from './../hooks/useDirectoriesBrowser';\nimport { useDirectoriesBrowserSearch } from './../hooks/useDirectoriesBrowserSearch';\nimport { useModal } from './../hooks/useModal';\nimport { useHistoryDrawer } from './../hooks/useHistoryDrawer';\nimport { useFileViewer } from './../hooks/useFileViewer';\nimport { useFlashActions, useFlashStore } from 'store/flashStoreContext';\nimport { AlertPopup } from 'components/shared/AlertPopup';\nimport FileViewer from 'components/v2/shared/FileViewer';\nimport { ShareModal } from './../ShareModal';\nimport { MoveModal } from './../MoveModal';\nimport { DownloadModal } from './../DownloadModal';\nimport { Search } from './../Search';\nimport { Breadcrumbs } from './../Breadcrumbs';\nimport { HistoryDrawer } from './../HistoryDrawer';\nimport { Spinner } from 'components/shared/Spinner';\nimport { Sidebar } from './../Sidebar';\nimport { ContentArea } from './../ContentArea';\nimport { UploadWindow } from 'components/shared/UploadWindow/UploadWindow';\n\nimport * as styles from './Container.styles';\n\nconst Container = memo(({ directoryId, documentId }) => {\n const [previewDocumentId, setPreviewDocumentId] = useState(documentId);\n\n const intl = useIntl();\n\n const { flash } = useFlashStore();\n const { setFlash, discardFlash } = useFlashActions();\n\n const previewDocument = () => {\n if (!previewDocumentId) return;\n\n const document = currentDirectory.documents.find((item) => item.id === previewDocumentId);\n\n if (document) {\n openFileViewer(document);\n } else {\n setFlash(intl.formatMessage({ id: 'Container.noPermission' }));\n }\n\n setPreviewDocumentId(null);\n };\n\n const { fileViewerContext, openFileViewer, closeFileViewer } = useFileViewer();\n\n const { drawerContext, openHistoryDrawer, closeHistoryDrawer, resetDrawerContext } = useHistoryDrawer();\n\n const { modalContext: moveModalContext, openModal: openMoveModal, closeModal: closeMoveModal } = useModal();\n\n const {\n modalContext: downloadModalContext,\n openModal: openDownloadModal,\n closeModal: closeDownloadModal,\n } = useModal();\n\n const { modalContext: shareModalContext, openModal: openShareModal, closeModal: closeShareModal } = useModal();\n\n const { isSearching, searchTerm, debouncedSearchTerm, handleTermChange, startSearching, stopSearching } =\n useDirectoriesBrowserSearch();\n\n const { isLoading, sidebarItemId, currentDirectory, rootDirectories, browseSidebarItem, browseDirectory } =\n useDirectoriesBrowser({ onBrowse: stopSearching, currentDirectoryId: directoryId });\n\n useEffect(() => browseDirectory(directoryId), []);\n useEffect(() => setCurrentDirectoryURL(), [currentDirectory]);\n\n const setCurrentDirectoryURL = () => {\n if (!currentDirectory) return;\n\n const companyId = getCompanySlug();\n const path = `/${companyId}/documents/${currentDirectory.slug}`;\n\n window.history.replaceState({}, null, path);\n\n previewDocument();\n };\n\n if (!rootDirectories || !currentDirectory) {\n return {name}
\n \n \n
\n );\n});\n\nexport { Container };\n","import { css } from '@emotion/core';\nimport { colors, panels, media } from 'styles';\n\nexport const container = css`\n ${panels.base}\n position: relative;\n margin: 0 auto;\n height: 666px;\n display: flex;\n ${media.tablet} {\n max-width: 100%;\n flex-direction: column;\n height: auto;\n }\n`;\n\nexport const content = css`\n flex: 1 1 100%;\n max-width: calc(100% - 245px);\n ${media.tablet} {\n max-width: none;\n }\n`;\n\nexport const title = css`\n padding: 0 20px;\n max-width: 100%;\n ${media.tablet} {\n padding: 10px 20px;\n }\n`;\n\nexport const wrapper = css`\n position: relative;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n ${media.tablet} {\n height: auto;\n flex-direction: column;\n width: 100%;\n }\n`;\n","export { Container } from './Container';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport ClipLoader from 'react-spinners/ClipLoader';\nimport Dropzone from 'react-dropzone';\n\nimport { SearchResults } from './../SearchResults';\nimport { DirectoriesArea } from './../DirectoriesArea';\nimport { DocumentsArea } from './../DocumentsArea';\n\nimport { useUploadQueueActions } from 'store/uploadQueueStoreContext';\nimport { ReactComponent as UploadIcon } from 'images/icons/documents/dropzone-icon.svg';\n\nimport { DateFormatContextProvider } from '../../../contexts/v2/DateFormatContext';\n\nimport { colors } from 'styles';\nimport * as styles from './ContentArea.styles';\n\nconst ContentArea = memo(\n ({\n isLoading,\n isSearching,\n searchTerm,\n currentDirectory,\n onShareClick,\n onMoveClick,\n onViewDocumentHistoryClick,\n onDocumentClick,\n onDirectoryClick,\n onDirectoryDownload,\n }) => {\n const { addFilesToQueue } = useUploadQueueActions();\n\n const isActionless = currentDirectory.virtual || !currentDirectory.capabilities.canCreate || isSearching;\n\n const handleDrop = (files) => {\n if (!isActionless) {\n addFilesToQueue({ files, directory: currentDirectory });\n }\n };\n\n const dropWrapper = ({ getRootProps, getInputProps, isDragActive }) => {\n const rootProps = getRootProps();\n const showDropppable = !isActionless && isDragActive;\n\n const droppable = showDropppable && (\n \n
\n\n \n
\n\n \n
\n\n {flash}
\n \n \n
\n );\n\n const containerStyles = [styles.container.base, styles.container.visible];\n\n const sectionStyles = [\n styles.section.base,\n isSearching && styles.section.hidden,\n !isLoading && styles.section.loaded,\n ];\n\n return (\n \n
\n \n
\n \n
\n \n {droppable}\n\n
\n \n
\n\n \n
\n\n \n
\n
\n \n
\n
\n )\n );\n});\n\nexport { CreateDirectoryInput };\n","export { CreateDirectoryInput } from './CreateDirectoryInput';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useCreateDirectory } from './../hooks/useCreateDirectory';\nimport { useSort } from './../hooks/useSort';\nimport { useDownloadDirectory } from './../hooks/useDownloadDirectory';\nimport { Directory } from './../Directory';\nimport { AreaPlaceholder } from './../AreaPlaceholder';\nimport { CreateDirectoryInput } from './../CreateDirectoryInput';\nimport { AreaButton } from './../AreaButton';\nimport { SortButton } from './../SortButton';\n\nimport { ReactComponent as PlaceholderIcon } from 'images/icons/no-folders.svg';\nimport { ReactComponent as DownloadIcon } from 'images/icons/documents/archive-download-icon.svg';\nimport { ReactComponent as CreateIcon } from 'images/icons/documents/create-directory-icon.svg';\nimport { ReactComponent as BackIcon } from 'images/icons/documents/back-icon.svg';\n\nimport * as areaStyles from './../shared/Area.styles';\n\nconst DirectoriesArea = memo(({ currentDirectory, isActionless, onClick, onShareClick, onMoveClick, onDownload }) => {\n const { directories, capabilities, breadcrumbs } = currentDirectory;\n const { sortedItems: sortedDirectories, isDescending, toggleSort } = useSort(directories);\n const { isEditing, startEditing, stopEditing } = useEditable();\n const { isCreating, error, resetError, createDirectory } = useCreateDirectory({ onCompleted: stopEditing });\n const { isDownloading, downloadDirectory } = useDownloadDirectory({\n onDownload,\n });\n\n const intl = useIntl();\n\n const handleCreate = (name) => {\n createDirectory(name, currentDirectory.id);\n };\n\n const handleCancel = () => {\n resetError();\n stopEditing();\n };\n\n const handleDownload = (event) => {\n event.stopPropagation();\n downloadDirectory(currentDirectory.id);\n };\n\n const renderDirectory = (directory) => {\n const handleClick = onClick.bind(this, directory.id);\n const handleMoveClick = onMoveClick.bind(this, directory);\n const handleShareClick = onShareClick.bind(this, directory);\n\n return (\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n \n {children}\n\n
\n \n );\n});\n\nexport { DirectoriesArea };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const sort = css`\n padding: 0 10px;\n ${media.tablet} {\n padding: 0 15px;\n }\n`;\n\nexport const actions = css`\n display: flex;\n justify-content: space-between;\n padding: 0 10px 10px 10px;\n ${media.tablet} {\n padding: 0 15px 10px 15px;\n }\n`;\n\nexport const icon = css`\n margin-right: 5px;\n`;\n\nexport const placeholder = css`\n border-radius: 21px;\n background: ${colors.lightestGrey};\n padding: 60px 0;\n`;\n\nexport const children = css`\n height: calc(100% - 50px);\n overflow: auto;\n`;\n","export { DirectoriesArea } from './DirectoriesArea';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useUpdateDirectory } from './../hooks/useUpdateDirectory';\nimport { useDeleteDirectory } from './../hooks/useDeleteDirectory';\nimport { useDownloadDirectory } from './../hooks/useDownloadDirectory';\nimport { useToggleFavouriteDirectory } from './../hooks/useToggleFavouriteDirectory';\nimport { AlertPopup } from 'components/shared/AlertPopup';\n\nimport { LoadingIndicator } from 'components/shared/LoadingIndicator';\nimport { ActionsDropdown } from './../ActionsDropdown';\nimport { EditableName } from './../EditableName';\nimport { AreaButton } from './../AreaButton';\n\nimport { ReactComponent as SharedIcon } from 'images/icons/documents/shared-badge.svg';\nimport { ReactComponent as DownloadIcon } from 'images/icons/documents/archive-download-icon.svg';\nimport { ReactComponent as StarIcon } from 'images/icons/documents/star-icon.svg';\nimport { ReactComponent as DirectoryIcon } from 'images/icons/documents/directory-icon.svg';\n\nimport * as styles from './Directory.styles';\nimport moment from 'moment';\n\nimport { useDateFormatContext } from '../../../contexts/v2/DateFormatContext';\n\nconst Directory = memo(\n ({\n id,\n name,\n createdAt,\n highlight,\n capabilities,\n shared,\n withSmartDocuments,\n favourite,\n empty,\n onClick,\n onShareClick,\n onMoveClick,\n onDownload,\n }) => {\n const { userDateFormat } = useDateFormatContext();\n const { isEditing, startEditing, stopEditing } = useEditable();\n const { isDeleting, deleteDirectory } = useDeleteDirectory({ id });\n const { isDownloading, downloadDirectory } = useDownloadDirectory({\n onDownload,\n });\n const { isToggling, toggleFavouriteDirectory } = useToggleFavouriteDirectory({ id });\n const { error, resetError, isUpdating, updateDirectory } = useUpdateDirectory({ id, onCompleted: stopEditing });\n const { isEditing: isAlertVisible, startEditing: showAlert, stopEditing: hideAlert } = useEditable();\n\n const intl = useIntl();\n\n const handleToggleFavouriteClick = (event) => {\n event.stopPropagation();\n toggleFavouriteDirectory();\n };\n\n const handleAlertCancel = (e) => {\n e.stopPropagation();\n hideAlert();\n };\n\n const handleAlertConfirm = (e) => {\n handleAlertCancel(e);\n deleteDirectory();\n };\n\n const handleCancel = () => {\n resetError();\n stopEditing();\n };\n\n const handleDownload = (event) => {\n event.stopPropagation();\n downloadDirectory(id);\n };\n\n const quickActions = [\n [capabilities?.canUpdate, intl.formatMessage({ id: 'Directory.rename' })],\n [capabilities?.canMove, intl.formatMessage({ id: 'Directory.move' })],\n [!withSmartDocuments && capabilities?.canDelete, intl.formatMessage({ id: 'Directory.delete' })],\n [capabilities?.canShare, intl.formatMessage({ id: 'Directory.share' })],\n ];\n\n const actionable = quickActions.filter((option) => option[0]).length > 0;\n\n const handleQuickActionClick = (option) => {\n switch (option) {\n case intl.formatMessage({ id: 'Directory.rename' }):\n return startEditing();\n case intl.formatMessage({ id: 'Directory.delete' }):\n return showAlert();\n case intl.formatMessage({ id: 'Directory.move' }):\n return onMoveClick();\n case intl.formatMessage({ id: 'Directory.share' }):\n return onShareClick();\n }\n };\n\n const starStyles = [styles.star.base, favourite && styles.star.favourite];\n\n const dateCreatedFull = moment(createdAt)\n .parseZone()\n .format(userDateFormat + ' hh:mm A');\n const [dateCreated, timeCreated] = dateCreatedFull.split(',');\n const sharedDirectoryIcon = shared && \n
\n );\n }\n);\n\nexport { Directory };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const highlight = css`\n ${fonts.semiBold}\n background: ${colors.lightestPurple};\n`;\n\nexport const container = css`\n width: 100%;\n display: flex;\n align-items: center;\n line-height: 1;\n padding: 8px 11px;\n ${media.tablet} {\n padding: 8px 15px;\n height: 48px;\n border-top: 1px solid ${colors.borderSecondGrey};\n }\n\n .directory__createdAt {\n ${fonts.regular}\n color: ${colors.mediumGrey};\n font-size: 12px;\n margin-right: 0;\n margin-left: auto;\n white-space: nowrap;\n line-height: 16px;\n ${media.tablet} {\n display: flex;\n flex-direction: column;\n }\n }\n\n .directory__actions {\n margin-right: 0;\n display: flex;\n align-items: center;\n }\n\n .directory__icon {\n flex-shrink: 0;\n }\n\n .directory__name {\n font-size: 14px;\n line-height: 15px;\n margin-left: 7px;\n margin-right: 7px;\n color: ${colors.black};\n }\n\n &:hover {\n cursor: pointer;\n background: ${colors.lightestPurple};\n color: ${colors.purple};\n border-radius: 5px;\n\n .directory__name {\n color: ${colors.purple};\n }\n\n .directory__icon {\n path {\n fill: ${colors.purple};\n }\n }\n }\n`;\n\nexport const wrapper = css`\n min-width: 0;\n display: flex;\n align-items: center;\n`;\n\nexport const star = {\n base: css`\n flex-shrink: 0;\n ${media.tablet} {\n margin-left: 8px;\n }\n `,\n\n favourite: css`\n path {\n fill: ${colors.yellow};\n }\n `,\n};\n\nexport const download = css`\n ${star.base}\n margin-right: 10px;\n\n &:hover {\n opacity: 0.8;\n }\n`;\n\nexport const sharedBadge = css`\n position: absolute;\n top: -2px;\n right: -4px;\n`;\n","export { Directory } from './Directory';\n","import React, { memo } from 'react';\nimport axios from 'axios';\nimport { useIntl } from 'react-intl';\n\nimport MoveForm from './MoveForm';\n\nexport default memo(({ directoryId, formUrl, currentDirectoryPath, rootDirectory }) => {\n const closeModal = () => {\n $('#modal-window').modal('hide');\n };\n\n const intl = useIntl();\n\n const handleSuccess = () => {\n clearFlashMessages();\n $.get(currentDirectoryPath);\n closeModal();\n };\n\n const handleFail = ({ response: { data } }) => {\n closeModal();\n const error = data.message || intl.formatMessage({ id: 'DirectoryMoveForm.error' });\n displayFlashMessage(error, 'error');\n };\n\n const onFormSubmit = (formData, destinationDirectoryId) => {\n const payload = { destination_directory_id: destinationDirectoryId };\n\n axios\n .post(formUrl, payload, { headers: { Accept: 'application/json' } })\n .then(handleSuccess)\n .catch(handleFail);\n };\n\n const directorySuitable = (directory) => {\n const { id, attributes } = directory.data;\n\n return attributes.moveTargetable && directoryId !== id;\n };\n\n return \n
\n\n \n
\n\n \n
\n \n {!isEditing ? (\n <>\n {dateCreated}\n {timeCreated}\n \n ) : null}\n
\n\n \n \n \n
\n \n
\n\n \n \n\n \n
\n \n {directories.map((directory) => {\n const selectedClass = currentDirectoryId === directory.id ? 'selected-directory' : '';\n const onClickHandler = () => onDirectoryClick(directory.id);\n\n return (\n \n \n {directory.name}\n \n \n );\n })}\n
\n );\n});\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useUpdateDocument } from './../hooks/useUpdateDocument';\nimport { useDeleteDocument } from './../hooks/useDeleteDocument';\nimport { useToggleFavouriteDocument } from './../hooks/useToggleFavouriteDocument';\nimport { AlertPopup } from 'components/shared/AlertPopup';\n\nimport { LoadingIndicator } from 'components/shared/LoadingIndicator';\nimport { EditableName } from './../EditableName';\nimport { ActionsDropdown } from './../ActionsDropdown';\n\nimport { ReactComponent as SharedIcon } from 'images/icons/documents/shared-badge.svg';\nimport { ReactComponent as SmartDocumentIcon } from 'images/icons/documents/smart-sign-icon.svg';\nimport { ReactComponent as StarIcon } from 'images/icons/documents/star-icon.svg';\nimport { ReactComponent as DocumentIcon } from 'images/icons/documents/document-icon.svg';\n\nimport * as styles from './Document.styles';\nimport moment from 'moment';\n\nimport { useDateFormatContext } from '../../../contexts/v2/DateFormatContext';\n\nconst Document = memo(\n ({\n id,\n name,\n extension,\n shared,\n highlight,\n capabilities,\n favourite,\n contentType,\n url,\n createdAt,\n smartDocument,\n withSmartDocuments,\n onViewHistoryClick,\n onClick,\n onShareClick,\n onMoveClick,\n }) => {\n const { userDateFormat } = useDateFormatContext();\n const { isEditing, startEditing, stopEditing } = useEditable();\n const { isDeleting, deleteDocument } = useDeleteDocument({ id });\n const { isToggling, toggleFavouriteDocument } = useToggleFavouriteDocument({\n id,\n });\n const { isUpdating, error, resetError, updateDocument } = useUpdateDocument({ id, onCompleted: stopEditing });\n const { isEditing: isAlertVisible, startEditing: showAlert, stopEditing: hideAlert } = useEditable();\n\n const intl = useIntl();\n\n const handleToggleFavouriteClick = (event) => {\n event.stopPropagation();\n toggleFavouriteDocument();\n };\n\n const handleAlertCancel = (e) => {\n e.stopPropagation();\n hideAlert();\n };\n\n const handleAlertConfirm = (e) => {\n handleAlertCancel(e);\n deleteDocument();\n };\n\n const quickActions = [\n [!smartDocument && capabilities?.canUpdate, intl.formatMessage({ id: 'Document.rename' })],\n [capabilities?.canMove, intl.formatMessage({ id: 'Document.move' })],\n [!smartDocument && !withSmartDocuments && capabilities?.canDelete, intl.formatMessage({ id: 'Document.delete' })],\n [!smartDocument && capabilities?.canShare, intl.formatMessage({ id: 'Document.share' })],\n [!smartDocument && capabilities?.canUpdate, intl.formatMessage({ id: 'Document.viewHistory' })],\n ];\n\n const actionable = quickActions.filter((option) => option[0]).length > 0;\n\n const handleQuickActionClick = (option) => {\n switch (option) {\n case intl.formatMessage({ id: 'Document.rename' }):\n return startEditing();\n case intl.formatMessage({ id: 'Document.delete' }):\n return showAlert();\n case intl.formatMessage({ id: 'Document.viewHistory' }):\n return onViewHistoryClick();\n case intl.formatMessage({ id: 'Document.move' }):\n return onMoveClick();\n case intl.formatMessage({ id: 'Document.share' }):\n return onShareClick();\n }\n };\n\n const smartDocumentIcon = smartDocument && (\n \n
\n );\n }\n);\n\nexport { Document };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const container = css`\n width: 100%;\n display: flex;\n align-items: center;\n padding: 8px 11px;\n line-height: 1;\n ${media.tablet} {\n padding: 8px 15px;\n height: 48px;\n border-top: 1px solid ${colors.borderSecondGrey};\n }\n\n .document__actions {\n margin-right: 0;\n display: flex;\n align-items: center;\n }\n\n .document__icon {\n flex-shrink: 0;\n }\n\n .document__createdAt {\n ${fonts.regular}\n color: ${colors.mediumGrey};\n font-size: 12px;\n margin-right: 0;\n margin-left: auto;\n white-space: nowrap;\n line-height: 16px;\n ${media.tablet} {\n display: flex;\n flex-direction: column;\n }\n }\n\n .document__name {\n ${fonts.regular}\n font-size: 14px;\n line-height: 15px;\n margin-right: 7px;\n margin-left: 7px;\n color: ${colors.black};\n }\n\n &:hover {\n cursor: pointer;\n background: ${colors.lightCyan};\n border-radius: 5px;\n\n .document__name {\n color: ${colors.cyan};\n }\n }\n`;\n\nexport const wrapper = css`\n display: flex;\n align-items: center;\n min-width: 0;\n`;\n\nexport const star = {\n base: css`\n flex-shrink: 0;\n ${media.tablet} {\n margin-left: 8px;\n }\n `,\n\n favourite: css`\n path {\n fill: ${colors.yellow};\n }\n `,\n};\n\nexport const smartDocumentBadge = css`\n position: absolute;\n bottom: -5px;\n left: 3px;\n`;\n\nexport const sharedBadge = css`\n position: absolute;\n top: -2px;\n right: -4px;\n`;\n","export { Document } from './Document';\n","import React, { memo } from 'react';\nimport axios from 'axios';\nimport { useIntl } from 'react-intl';\n\nimport MoveForm from './MoveForm';\n\nexport default memo(({ documentId, formUrl, currentDirectoryPath, rootDirectory }) => {\n const closeModal = () => {\n $('#modal-window').modal('hide');\n };\n\n const intl = useIntl();\n\n const handleSuccess = () => {\n clearFlashMessages();\n $.get(currentDirectoryPath);\n closeModal();\n };\n\n const handleFail = ({ response: { data } }) => {\n closeModal();\n const error = data.message || intl.formatMessage({ id: 'DocumentMoveForm.error' });\n displayFlashMessage(error, 'error');\n };\n\n const onFormSubmit = (formData, destinationDirectoryId) => {\n const payload = { destination_directory_id: destinationDirectoryId };\n axios\n .post(formUrl, payload, { headers: { Accept: 'application/json' } })\n .then(handleSuccess)\n .catch(handleFail);\n };\n\n const directorySuitable = (directory) => {\n return directory.data.attributes.moveTargetable;\n };\n\n return \n
\n\n \n
\n\n \n
\n \n {!isEditing ? (\n <>\n {dateCreated}\n {timeCreated}\n \n ) : null}\n
\n\n \n \n \n
\n \n
\n\n \n \n\n \n
\n \n
\n\n \n
\n\n \n {children}\n\n
\n \n );\n }\n);\n\nexport { DocumentsArea };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const sort = css`\n padding: 0 10px;\n ${media.tablet} {\n padding: 0 15px;\n }\n`;\n\nexport const actions = css`\n display: flex;\n justify-content: space-between;\n padding: 0 10px 10px 10px;\n ${media.tablet} {\n padding: 0 15px 10px 15px;\n }\n`;\n\nexport const placeholder = css`\n border-radius: 21px;\n background: ${colors.lightestGrey};\n padding: 60px 0;\n`;\n\nexport const container = css`\n border-right: 1px solid ${colors.grey};\n background: ${colors.white};\n position: relative;\n padding: 14px 10px;\n width: 50%;\n height: 620px;\n\n &:last-of-type {\n border-right: none;\n }\n`;\n\nexport const children = css`\n height: calc(100% - 50px);\n overflow: auto;\n`;\n","export { DocumentsArea } from './DocumentsArea';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Modal } from 'components/shared/Modal';\nimport { ReactComponent as DownloadIcon } from 'images/icons/documents/archive-download-icon-lg.svg';\n\nimport * as styles from './DownloadModal.styles';\n\nconst DownloadModal = memo(({ show, resource, onClose }) => {\n return (\n \n
\n\n \n {resource?.name} }}\n />\n
\n \n \n
\n \n
\n );\n});\n\nexport { EditableName };\n","export { EditableName } from './EditableName';\n","const GeneratePath = (currentPath, rootDirectory, currentDirectory) => {\n if (currentDirectory.data.id === rootDirectory.data.id) return [rootDirectory];\n\n const currentDirectoryIndex = currentPath.findIndex(({ data: { id } }) => currentDirectory.data.id === id);\n\n if (currentDirectoryIndex > 0) {\n return currentPath.slice(0, currentDirectoryIndex + 1);\n } else {\n return [...currentPath, currentDirectory];\n }\n};\n\nexport { GeneratePath };\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { AnimatedDrawer } from 'components/shared/AnimatedDrawer';\nimport { HistoryDrawerItem } from './../HistoryDrawerItem';\n\nimport * as styles from './HistoryDrawer.styles';\n\nconst HistoryDrawer = memo(({ file, show, onClose, onCloseAnimationEnd }) => {\n const timeline = file && file.activityFeeds.map((feed) => \n
\n \n
\n\n \n
\n\n {timeline}
\n \n
\n );\n});\n\nexport { HistoryDrawerItem };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nexport const date = css`\n ${fonts.semiBold}\n font-size: 14px;\n color: ${colors.black};\n line-height: 1;\n margin-bottom: 5px;\n`;\n\nexport const description = css`\n ${fonts.regular}\n font-size: 14px;\n color: ${colors.mediumGrey};\n word-break: break-word;\n line-height: 1;\n`;\n\nexport const author = css`\n ${description}\n margin-top: 5px;\n`;\n\nexport const icon = css`\n flex-shrink: 0;\n margin-right: 17px;\n`;\n\nexport const container = css`\n display: flex;\n align-items: center;\n padding-top: 6px;\n position: relative;\n\n &:not(:last-child):after {\n content: '';\n width: 1px;\n height: 100%;\n background: ${colors.lighterGrey};\n z-index: -1;\n position: absolute;\n left: 9px;\n top: 50%;\n }\n`;\n\nexport const wrapper = css`\n display: flex;\n align-items: center;\n`;\n\nconst background = HexToRgba(colors.grey, 50);\n\nexport const timeline = css`\n position: relative;\n`;\n\nexport const line = css`\n position: absolute;\n top: 0;\n width: 1px;\n height: 100%;\n left: 10px;\n background: ${colors.lighterGrey};\n`;\n\nexport const block = css`\n padding: 13px 26px;\n background: ${background};\n border-radius: 2px;\n width: 250px;\n`;\n\nexport const arrow = css`\n width: 0;\n height: 0;\n border-top: 10px solid transparent;\n border-bottom: 10px solid transparent;\n border-right: 10px solid ${background};\n`;\n","export { HistoryDrawerItem } from './HistoryDrawerItem';\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Row, Col } from 'react-bootstrap';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport FolderRow from 'components/shared/FileBrowser/FolderRow';\nimport DirectoryPath from './DirectoryPath';\nimport { GeneratePath } from './GeneratePath';\n\nconst directoryAttributesShape = {\n name: PropTypes.string,\n};\n\nconst directoryShape = {\n data: PropTypes.shape({\n id: PropTypes.string,\n attributes: PropTypes.shape(directoryAttributesShape),\n }),\n};\n\ndirectoryAttributesShape.childDirectories = PropTypes.arrayOf(PropTypes.shape(directoryShape));\n\nconst directoryPropType = PropTypes.shape(directoryShape);\n\nconst MoveForm = ({ rootDirectory, onFormSubmit, directorySuitable }) => {\n const [currentDirectory, setCurrentDirectory] = useState(rootDirectory);\n const [currentPath, setCurrentPath] = useState([rootDirectory]);\n\n const intl = useIntl();\n\n onDirectorySelect = (directory) => {\n if (!directorySuitable(directory)) return;\n if (directory.data.id === currentDirectory.data.id) return;\n\n setCurrentDirectory(directory);\n setCurrentPath(GeneratePath(currentPath, rootDirectory, directory));\n };\n\n handleSubmit = (event) => {\n event.preventDefault();\n const formData = new FormData(event.target);\n\n onFormSubmit(formData, currentDirectory.data.id);\n };\n\n const { data: directoryData } = currentDirectory;\n const { childDirectories: subdirectories } = directoryData.attributes;\n const submitEnabled = directoryData.id && directoryData.attributes.moveTargetable;\n\n return (\n \n \n\n
\n \n
\n {date}
\n\n {description}
\n\n {author}
\n \n \n
\n );\n};\n\nMoveForm.propTypes = {\n rootDirectory: directoryPropType,\n onFormSubmit: PropTypes.func.isRequired,\n directorySuitable: PropTypes.func.isRequired,\n};\n\nexport default MoveForm;\n","/** @jsx jsx */\n\nimport React, { memo, useMemo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { useDirectoriesBrowser } from './../hooks/useDirectoriesBrowser';\nimport { useMoveDirectory } from './../hooks/useMoveDirectory';\nimport { useMoveDocument } from './../hooks/useMoveDocument';\nimport { useIncrementDirectoryName } from './../hooks/useIncrementDirectoryName';\nimport { useIncrementDocumentName } from './../hooks/useIncrementDocumentName';\n\nimport { Scrollable } from 'components/shared/Scrollable';\nimport { LoadingIndicator } from 'components/shared/LoadingIndicator';\nimport { AlertPopup } from 'components/shared/AlertPopup';\nimport { MoveModalDirectory } from './../MoveModalDirectory';\nimport { Breadcrumbs } from './../Breadcrumbs';\nimport { Modal } from 'components/shared/Modal';\n\nimport ClipLoader from 'react-spinners/ClipLoader';\n\nimport { colors } from 'styles';\nimport * as styles from './MoveModal.styles';\n\nconst ROOT_BREADCRUMB = { id: null, name: 'Root' };\n\nconst MoveModal = memo(({ show, resource, onClose }) => {\n const [moveError, setMoveError] = useState(null);\n const [selectedDirectoryId, setSelectedDirectoryId] = useState(null);\n const [showRenameAlert, setShowRenameAlert] = useState(false);\n\n const intl = useIntl();\n\n const toggleSelectedDirectoryId = (id) => {\n if (selectedDirectoryId === id) {\n setSelectedDirectoryId(null);\n } else {\n setSelectedDirectoryId(id);\n }\n };\n\n const handleMoveError = (error) => {\n if (error.includes('already exists')) {\n setShowRenameAlert(true);\n } else {\n setMoveError(error);\n }\n };\n\n const { moveDirectory, isMoving: isMovingDirectory } = useMoveDirectory({\n onCompleted: onClose,\n onError: handleMoveError,\n parent: resource?.parent,\n });\n\n const { moveDocument, isMoving: isMovingDocument } = useMoveDocument({\n onCompleted: onClose,\n onError: handleMoveError,\n parent: resource?.parent,\n });\n\n const { isLoading, requestedDirectoryId, currentDirectory, rootDirectories, browseDirectory } = useDirectoriesBrowser(\n {}\n );\n\n const resetError = () => setMoveError(null);\n\n const resetModal = () => {\n setMoveError(null);\n setSelectedDirectoryId(null);\n browseDirectory(null);\n };\n\n const handleMove = () => {\n switch (resource.__typename) {\n case 'Directory':\n return moveDirectory(resource.id, selectedDirectoryId);\n case 'Document':\n return moveDocument(resource.id, selectedDirectoryId);\n }\n };\n\n const handleMoveAndCloseAlert = () => {\n handleMove();\n setShowRenameAlert(false);\n };\n\n const { incrementDirectoryName, isIncremeting: isIncrementingDirectoryName } = useIncrementDirectoryName({\n onCompleted: handleMoveAndCloseAlert,\n onError: handleMoveError,\n parent: resource?.parent,\n });\n\n const { incrementDocumentName, isIncremeting: isIncrementingDocumentName } = useIncrementDocumentName({\n onCompleted: handleMoveAndCloseAlert,\n onError: handleMoveError,\n parent: resource?.parent,\n });\n\n const hideRenameAlert = () => setShowRenameAlert(false);\n\n const incrementResourceName = () => {\n switch (resource?.__typename) {\n case 'Directory':\n return incrementDirectoryName(resource.id, selectedDirectoryId);\n case 'Document':\n return incrementDocumentName(resource.id, selectedDirectoryId);\n }\n };\n\n const renderDirectory = (directory) => {\n const isSelected = selectedDirectoryId === directory.id;\n\n return (\n \n
\n );\n\n const resourceName = () => {\n switch (resource?.__typename) {\n case 'Directory':\n return resource?.name;\n case 'Document':\n return `${resource?.name}.${resource?.extension}`;\n }\n };\n\n const allowMove = selectedDirectoryId && resource?.parent?.id !== selectedDirectoryId;\n\n return (\n <>\n \n
\n \n '{resourceName()}' }} />\n
\n\n \n\n \n \n\n \n
\n\n \n {!isLoading && renderedDirectories} \n
\n\n {moveError}
\n\n \n \n
\n \n
\n );\n\n return (\n \n
\n );\n});\n\nexport { MoveModalDirectory };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const container = {\n base: css`\n --hover-color: #f4f3f8;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n padding: 10px 16px;\n border-bottom: 1px solid ${colors.modalBorder};\n\n .directory__name {\n ${fonts.regular}\n margin-left: 7px;\n max-width: 300px;\n font-size: 14px;\n line-height: 15px;\n color: ${colors.black};\n }\n\n &:hover {\n background: var(--hover-color);\n }\n `,\n\n selected: css`\n background: var(--hover-color);\n\n .directory__name {\n ${fonts.semiBold}\n color: ${colors.purple};\n }\n\n .directory__icon {\n path {\n fill: ${colors.purple};\n }\n }\n `,\n};\n\nexport const arrowContainer = css`\n width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:hover {\n svg {\n opacity: 0.7;\n }\n }\n`;\n","export { MoveModalDirectory } from './MoveModalDirectory';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { Input } from 'components/shared/Input';\n\nimport { ReactComponent as SearchIcon } from 'images/icons/documents/search-icon.svg';\nimport { ReactComponent as ClearIcon } from 'images/icons/purple-cross.svg';\n\nimport * as styles from './Search.styles';\n\nconst Search = memo(({ value, isFocused, onFocus, onBlur, onChange }) => {\n const wrapperStyles = [styles.wrapper.base, isFocused && styles.wrapper.focused];\n\n const intl = useIntl();\n\n return (\n \n
\n\n {arrowIcon}\n {name}
\n \n
\n );\n});\n\nexport { Search };\n","import { css } from '@emotion/core';\nimport { colors, media } from 'styles';\n\nexport const wrapper = {\n base: css`\n position: absolute;\n top: 0;\n right: 0;\n border-left: 1px solid ${colors.borderLightGrey};\n transition: none;\n width: 182px;\n ${media.tablet} {\n position: relative;\n width: 100%;\n border-left: none;\n border-top: 1px solid ${colors.borderLightGrey};\n }\n `,\n\n focused: css`\n border-left: none;\n transition: width 0.2s ease-in-out;\n will-change: width;\n width: 100%;\n `,\n};\n\nexport const input = css`\n padding: 9px 12px 9px 40px;\n border: none;\n font-size: 12px;\n line-height: 1;\n border-radius: 2px;\n`;\n\nexport const clear = css`\n position: absolute;\n top: 50%;\n right: 10px;\n transform: translateY(-50%);\n cursor: pointer;\n`;\n","export { Search } from './Search';\n","/** @jsx jsx */\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { Placeholder } from 'components/shared/Placeholder';\n\nimport { ReactComponent as PlaceholderIcon } from 'images/icons/documents/search-placeholder.svg';\n\nimport * as styles from './SearchPlaceholder.styles';\n\nconst SearchPlaceholder = memo(({ show, heading, subHeading }) => {\n const message = (\n <>\n {heading}
\n\n {subHeading}
\n \n );\n\n return (\n show && (\n \n
\n )\n );\n});\n\nexport { SearchPlaceholder };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const container = css`\n position: absolute;\n top: 50%;\n transition: none;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n\nexport const heading = css`\n ${fonts.semiBold}\n color: ${colors.black};\n font-size: 20px;\n margin-bottom: 9px;\n`;\n\nexport const subHeading = css`\n ${fonts.regular}\n color: ${colors.mediumGrey};\n text-align: center;\n margin: 0 auto;\n max-width: 200px;\n font-size: 14px;\n`;\n","export { SearchPlaceholder } from './SearchPlaceholder';\n","/** @jsx jsx */\n\nimport React, { memo, useMemo, useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\nimport { useSearchQuery } from './../data/queries/SearchQuery';\n\nimport ClipLoader from 'react-spinners/ClipLoader';\nimport Highlighter from 'react-highlight-words';\n\nimport Multiselect from '../../shared/Select/Multiselect';\nimport { SearchPlaceholder } from './../SearchPlaceholder';\nimport { Directory } from './../Directory';\nimport { Document } from './../Document';\n\nimport { colors } from 'styles';\nimport * as styles from './SearchResults.styles';\n\nconst SearchResults = memo(\n ({ show, query, onViewDocumentHistory, onDocumentClick, onDirectoryClick, onDirectoryDownload }) => {\n const { evictSearchDirectoriesCache, evictSearchDocumentsCache } = useApolloCacheHelpers();\n\n const intl = useIntl();\n\n const [context, setContext] = useState({\n documents: [],\n directories: [],\n term: query,\n loading: false,\n });\n\n const updateContext = (updates) => setContext((state) => ({ ...state, ...updates }));\n\n const filterOptions = [\n { value: 'pdf', label: intl.formatMessage({ id: 'SearchResults.pdf' }) },\n { value: 'image', label: intl.formatMessage({ id: 'SearchResults.image' }) },\n { value: 'document', label: intl.formatMessage({ id: 'SearchResults.document' }) },\n ];\n\n const [selectedFilters, setSelectedFilters] = useState(filterOptions);\n const selectedFilterValues = selectedFilters.map((item) => item.value);\n\n const { loading: dataLoading, data } = useSearchQuery({\n variables: { name: query },\n skip: !show || !query.length,\n });\n\n useEffect(() => setLoading(), [dataLoading]);\n useEffect(() => arrangeContext(), [data]);\n useEffect(() => resetContext(), [show]);\n\n const resetContext = () => {\n if (show) return;\n\n evictSearchDirectoriesCache();\n evictSearchDocumentsCache();\n\n updateContext({ documents: [], directories: [] });\n };\n\n const setLoading = () => {\n if (!dataLoading) return;\n\n updateContext({ loading: true });\n };\n\n const arrangeContext = () => {\n if (!data) return;\n\n updateContext({\n loading: false,\n term: query,\n ...data.currentCompany,\n });\n };\n\n const getHighlight = (name, css) => {\n const highlightTag = ({ children }) => {children};\n\n return \n 0 && !directories.length && !filteredDocuments.length}\n heading={intl.formatMessage({ id: 'SearchResults.noResults' })}\n subHeading={intl.formatMessage({ id: 'SearchResults.diffKeyword' })}\n />\n\n
\n )\n );\n }\n);\n\nexport { SearchResults };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const results = {\n base: css`\n opacity: 0;\n transition: none;\n height: inherit;\n `,\n\n visible: css`\n opacity: 1;\n transition: opacity 0.4s ease-in;\n `,\n};\n\nexport const highlight = {\n document: css`\n ${fonts.semiBold}\n background: ${colors.lightCyan};\n `,\n\n directory: css`\n ${fonts.semiBold}\n background: ${colors.lightestPurple};\n `,\n};\n\nexport const loading = css`\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 2;\n transform: translate(-50%, -50%);\n`;\n\nexport const container = css`\n width: 100%;\n position: relative;\n height: calc(100% - 50px);\n min-height: 260px;\n padding: 10px 15px 10px 0;\n flex-direction: column;\n display: flex;\n`;\n\nexport const children = css`\n padding: 0 20px;\n overflow: auto;\n height: 100%;\n`;\n\nexport const spinner = css`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n\nexport const padded = css`\n padding: 0 30px 20px 30px;\n`;\n\nexport const heading = css`\n ${fonts.semiBold}\n padding: 0 30px;\n color: ${colors.black};\n font-size: 20px;\n margin-bottom: 15px;\n`;\n\nexport const multiselect = (baseStyles) => {\n return {\n ...baseStyles,\n\n container: (styles) => ({\n ...baseStyles.container(styles),\n width: 100,\n }),\n\n valueContainer: (styles) => ({\n ...baseStyles.valueContainer(styles),\n padding: '4px 9px',\n height: 27,\n }),\n\n indicatorsContainer: (styles) => ({\n ...baseStyles.indicatorsContainer(styles),\n\n div: {\n padding: '0 5px 0 0',\n },\n\n i: {\n color: `${colors.black} !important`,\n fontSize: 12,\n },\n }),\n\n control: (styles) => ({\n ...baseStyles.control(styles),\n border: 'none',\n minHeight: 27,\n background: '#F0F0F0',\n borderRadius: 4,\n }),\n };\n};\n","export { SearchResults } from './SearchResults';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport { useShareable } from './../hooks/useShareable';\nimport { useShareDirectory } from './../hooks/useShareDirectory';\nimport { useShareDocument } from './../hooks/useShareDocument';\n\nimport ClipLoader from 'react-spinners/ClipLoader';\n\nimport { LoadingIndicator } from 'components/shared/LoadingIndicator';\nimport { ShareModalContactList } from './../ShareModalContactList';\nimport { ContactPicker } from 'components/shared/ContactPicker';\nimport { Modal } from 'components/shared/Modal';\n\nimport { ReactComponent as DirectoryIcon } from 'images/icons/documents/directory-icon-large.svg';\nimport { ReactComponent as DocumentIcon } from 'images/icons/documents/document-icon-large.svg';\nimport { ReactComponent as CopyIcon } from 'images/share-button.svg';\nimport { ReactComponent as ShareIcon } from 'images/icons/documents/share-icon.svg';\n\nimport { colors } from 'styles';\nimport * as styles from './ShareModal.styles';\n\nconst ShareModal = memo(({ show, resource, onClose }) => {\n const [linkCopied, setLinkCopied] = useState(false);\n\n const intl = useIntl();\n\n const highlightLinkCopied = () => {\n setLinkCopied(true);\n setTimeout(() => setLinkCopied(false), 2000);\n };\n\n const { isLoading, isDirectory, isDocument, item, shareableWith, sharedWithByDefault, isSharedWith, toggleContact } =\n useShareable({ resource });\n\n const resourceIcon = () => {\n if (isDirectory) {\n return \n
\n\n \n
\n \n
\n\n \n
\n\n \n {renderedDirectories}\n {renderedDocuments}\n
\n \n {resourceIcon()}\n\n
\n );\n\n const copyShareableUrl = () => {\n navigator.clipboard.writeText(item.shareableUrl);\n highlightLinkCopied();\n };\n\n const urlStyles = [styles.url.base, linkCopied && styles.url.copied];\n\n const checkmark = (\n \n
\n\n \n {resource?.name}\n
\n \n \n
\n );\n\n const copyLink = () => {\n if (linkCopied) {\n return checkmark;\n } else {\n return \n
\n\n \n {item.shareableUrl}\n
\n\n {copyLink()}\n \n
\n\n \n \n
\n \n );\n\n return (\n \n
\n \n \n
\n \n
\n\n {modalBody}\n \n
\n );\n }\n\n const renderContactWithAccess = (contact, props) => (\n \n \n {renderedSharedWith}\n {renderedWithAccess}\n \n
\n );\n});\n\nexport { ShareModalContactList };\n","import { css } from '@emotion/core';\n\nexport const container = css`\n margin-top: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 250px;\n`;\n","export { ShareModalContactList } from './ShareModalContactList';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport Avatar from 'components/shared/Avatar';\n\nimport { ReactComponent as ViewableIcon } from 'images/icons/documents/viewable.svg';\nimport { ReactComponent as ShareIcon } from 'images/icons/documents/shareable-icon.svg';\n\nimport * as styles from './ShareModalContactListItem.styles';\n\nconst ShareModalContactListItem = memo(({ contact, onDelete, withIcon }) => {\n const deleteButton = onDelete && ;\n\n const canView = !onDelete && (\n \n
\n );\n\n const shareIcon = withIcon && (\n \n
\n \n
\n );\n\n const overlay = !onDelete && ;\n\n return (\n \n {overlay}\n\n
\n );\n});\n\nexport { ShareModalContactListItem };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const container = css`\n display: flex;\n align-items: center;\n position: relative;\n padding: 6px 12px 6px 6px;\n min-width: 0;\n`;\n\nexport const shareable = css`\n margin-left: 5px;\n width: 17px;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 17px;\n background: ${colors.lightCyan};\n\n .shareable__icon {\n flex-shrink: 0;\n\n path {\n fill: ${colors.cyan};\n }\n }\n`;\n\nexport const overlay = css`\n background: ${colors.white};\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 0.6;\n`;\n\nexport const name = css`\n ${fonts.regular}\n color: ${colors.black};\n font-size: 14px;\n padding-left: 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const icon = css`\n font-size: 14px;\n color: ${colors.lightGrey};\n\n &:hover {\n cursor: pointer;\n color: ${colors.cyan};\n }\n`;\n","export { ShareModalContactListItem } from './ShareModalContactListItem';\n","/** @jsx jsx */\n\nimport React, { memo, useCallback, useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport { getAttributes } from 'helpers/getAttributes';\nimport { Placeholder } from 'components/shared/Placeholder';\nimport { ReactComponent as ContactsIcon } from 'images/icons/no-contacts.svg';\nimport Avatar from 'components/shared/Avatar';\n\nimport { ReactComponent as ShareIcon } from 'images/icons/shared-grey.svg';\n\nimport * as styles from './ContactsTable.styles';\n\nconst ContactsTable = memo(\n ({ contacts, sharedContactIds, ancestorSharedContactIds, permittedContactIds, onDelete }) => {\n const placeholderIcon = \n
\n\n {contact.name}
\n\n {shareIcon}\n \n {canView}\n {deleteButton}\n
\n \n
\n );\n } else {\n return (\n \n
\n );\n }\n };\n\n const tableBody = companyContacts.map((contact, index) => {\n const contactAttributes = getAttributes(contact);\n const handleDelete = onDelete.bind(this, contactAttributes);\n\n return (\n \n
\n {contactAttributes.name}
\n \n \n {tableBody}\n
\n
\n \n );\n }\n);\n\nexport { ContactsTable };\n","import { css } from '@emotion/core';\nimport { tables, fonts, colors } from 'styles';\n\nexport const table = tables.table;\nexport const tableRow = tables.tableRow;\n\nexport const tableContainer = css`\n overflow: hidden;\n`;\n\nexport const tableCell = css`\n ${tables.tableCell}\n padding: 12px 5px;\n`;\n\nexport const deleteIcon = css`\n color: ${colors.lightGrey};\n\n &:hover {\n cursor: pointer;\n color: ${colors.cyan};\n }\n`;\n","/** @jsx jsx */\nimport React, { memo, useCallback, useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport axios from 'axios';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { getAttributes } from 'helpers/getAttributes';\nimport { trackPromise } from 'react-promise-tracker';\nimport Pluralize from 'pluralize';\nimport Modal from 'react-bootstrap/Modal';\nimport Popover from 'react-bootstrap/Popover';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\n\nimport * as styles from './ShareableModal.styles';\n\nimport { ContactPicker } from 'components/shared/ContactPicker';\nimport { ContactsTable } from './ContactsTable';\nimport { ReactComponent as FileIcon } from 'images/icons/file.svg';\nimport { ReactComponent as FolderIcon } from 'images/icons/folder.svg';\nimport { ReactComponent as CopyIcon } from 'images/share-button.svg';\nimport { ReactComponent as CloseIcon } from 'images/icons/close-icon-black.svg';\n\nexport default memo(({ shareable, contacts, context }) => {\n const companySlug = getCompanySlug();\n const [basicShareable, setBasicShareable] = useState(shareable);\n\n const intl = useIntl();\n\n const [currentShareable, setCurrentShareable] = useState(basicShareable);\n const [sharedContactIds, setSharedContactIds] = useState(getAttributes(currentShareable).shared_contact_ids);\n const [ancestorSharedContactIds, setAncestorSharedContactIds] = useState(\n getAttributes(currentShareable).ancestor_shared_contact_ids\n );\n const [ancestors, setAncestors] = useState(getAttributes(basicShareable).ancestors);\n\n useEffect(() => {\n setAncestors(getAttributes(basicShareable).ancestors);\n }, [basicShareable]);\n\n useEffect(() => {\n setAncestorSharedContactIds(getAttributes(currentShareable).ancestor_shared_contact_ids);\n }, [sharedContactIds, currentShareable]);\n\n useEffect(() => {\n setContactsForPicker(\n filterContactsForPicker(\n sharedContactIds,\n ancestorSharedContactIds,\n getAttributes(currentShareable).permitted_contact_ids\n )\n );\n }, [sharedContactIds]);\n\n useEffect(() => {\n setSharedContactIds(getAttributes(currentShareable).shared_contact_ids);\n }, [currentShareable]);\n\n const [isVisible, setIsVisible] = useState(true);\n\n const show = () => setIsVisible(true);\n const hide = () => setIsVisible(false);\n\n const initialContactsForPicker = () => {\n const attributes = getAttributes(currentShareable);\n\n return filterContactsForPicker(\n attributes.shared_contact_ids,\n attributes.ancestor_shared_contact_ids,\n attributes.permitted_contact_ids\n );\n };\n\n const filterContactsForPicker = (sharedContactIds, ancestorSharedContactIds, permittedIds) => {\n return contacts\n .filter(\n (contact) =>\n !sharedContactIds.concat(ancestorSharedContactIds, permittedIds).includes(contact.data.attributes.id)\n )\n .map((contact) => contact.data.attributes);\n };\n\n const [contactsForPicker, setContactsForPicker] = useState(initialContactsForPicker());\n\n const isSelected = (contact) => {\n return false;\n };\n\n const shareableIsSelected = (shareable) => {\n return shareable.data.type == currentShareable.data.type && shareable.data.id == currentShareable.data.id;\n };\n\n const contactExists = useCallback((contact) => {\n return sharedContactIds\n .concat(ancestorSharedContactIds, getAttributes(currentShareable).permitted_contact_ids)\n .find((item) => item == contact.id);\n });\n\n const toggleContact = useCallback((contact) => {\n const isAdded = contactExists(contact);\n\n if (isAdded !== undefined) {\n return removeContact(contact);\n } else {\n return addContact(contact);\n }\n });\n\n const addContact = useCallback((contact) => {\n const contactIds = [...sharedContactIds, contact.id];\n\n setSharedContactIds(contactIds);\n shareCurrentShareable(contactIds);\n });\n\n const removeContact = useCallback((contact) => {\n const contactIds = sharedContactIds.filter((id) => id !== contact.id);\n\n setSharedContactIds(contactIds);\n shareCurrentShareable(contactIds);\n });\n\n const shareCurrentShareable = (contactIds) => {\n const path = `/api/${companySlug}/v1/${Pluralize(currentShareable.data.type)}/${\n currentShareable.data.id\n }/share.json`;\n const payload = { contact_ids: contactIds };\n const promise = axios\n .put(path, payload)\n .then((response) => response.status)\n .then(handleResponse);\n\n return trackPromise(promise);\n };\n\n const reloadBasicShareable = () => {\n const path = `/api/${companySlug}/v1/${Pluralize(basicShareable.data.type)}/${basicShareable.data.id}`;\n const promise = axios\n .get(path)\n .then((response) => response.data)\n .then((response) => setBasicShareable(response));\n\n return trackPromise(promise);\n };\n\n const handleResponse = (responseStatus) => {\n if (responseStatus == 200) {\n reloadBasicShareable();\n\n const directory = context == 'action' ? ancestors[ancestors.length - 1] : currentShareable;\n const directoryId = directory.data.id;\n const path = `/${companySlug}/documents/${directoryId}/load_details`;\n const payload = { type: currentShareable.data.type, id: directoryId };\n\n $.ajax({\n url: path,\n method: 'get',\n data: payload,\n });\n }\n };\n\n const copyShareableUrl = () => {\n return navigator.clipboard.writeText(getAttributes(currentShareable).url);\n };\n\n const popover = (\n {ancestorAttributes.name}
\n \n \n );\n });\n\n return (\n <>\n \n \n \n\n \n
\n \n {currentShareable.data.type === 'directory' &&
\n \n
\n \n {breadcrumbs}\n {\n setCurrentShareable(basicShareable);\n }}\n >\n {ancestors.length > 0 &&
\n \n {getAttributes(basicShareable).name}
}\n \n
\n )}\n\n \n
\n \n
\n\n \n \n
\n \n {getAttributes(currentShareable).url}\n
\n \n \n \n
\n \n
\n );\n});\n\nexport { Sidebar };\n","import { css } from '@emotion/core';\nimport { fonts, colors, utils, media } from 'styles';\n\nexport const separator = css`\n ${utils.separator}\n margin: 10px 0;\n border-color: ${colors.borderCyan};\n`;\n\nexport const sidebar = css`\n min-width: 245px;\n background: ${colors.lightestCyan};\n padding: 20px 0;\n ${media.mobile} {\n margin-bottom: 24px;\n }\n`;\n","export { Sidebar } from './Sidebar';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport * as styles from './SidebarItem.styles';\n\nconst SidebarItem = memo(({ name, id, icon, onClick, isSelected }) => {\n const itemStyles = [styles.item.base, isSelected && styles.item.selected];\n\n return (\n \n
\n );\n});\n\nexport { SidebarItem };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const icon = css`\n padding-right: 10px;\n`;\n\nexport const item = {\n base: css`\n ${fonts.regular}\n display: flex;\n align-items: center;\n line-height: 1;\n font-size: 14px;\n padding: 12px 32px;\n color: ${colors.black};\n cursor: pointer;\n\n svg {\n width: 18px;\n }\n `,\n\n selected: css`\n ${fonts.semiBold}\n position: relative;\n color: ${colors.white};\n background: ${colors.cyan};\n\n svg {\n path {\n fill: ${colors.white};\n }\n\n path[stroke] {\n stroke: ${colors.white};\n }\n }\n `,\n};\n","export { SidebarItem } from './SidebarItem';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { ReactComponent as Icon } from 'images/icons/documents/arrow-down.svg';\n\nimport * as styles from './SortButton.styles';\n\nconst SortButton = memo(({ show, text, isRotated, onClick }) => {\n const iconStyles = [styles.icon.base, isRotated && styles.icon.rotated];\n\n return (\n show && (\n {icon}
\n\n {name}\n \n
\n )\n );\n});\n\nexport { SortButton };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const container = css`\n display: inline-flex;\n cursor: pointer;\n align-items: center;\n`;\n\nexport const text = css`\n ${fonts.bold}\n color: ${colors.black};\n font-size: 12px;\n`;\n\nexport const icon = {\n base: css`\n margin-left: 4px;\n transition: transform 0.2s ease-in-out;\n `,\n\n rotated: css`\n transform: rotate(-180deg);\n `,\n};\n","export { SortButton } from './SortButton';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { useClickOutside } from 'hooks/useClickOutside';\n\nimport { ReactComponent as UploadIcon } from 'images/icons/documents/upload-icon.svg';\nimport { ReactComponent as DocumentUploadIcon } from 'images/icons/documents/document-upload-icon.svg';\nimport { ReactComponent as DirectoryUploadIcon } from 'images/icons/documents/directory-upload-icon.svg';\nimport { useUploadQueueActions } from 'store/uploadQueueStoreContext';\nimport { fromEvent } from 'file-selector';\nimport MobileSharedDropdown from '../shared/MobileSharedDropdown';\n\nimport * as styles from './UploadButton.styles';\n\nconst UploadButton = memo(({ directory, isDisabled }) => {\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside();\n const { addFilesToQueue } = useUploadQueueActions();\n\n const documentsInputRef = React.useRef();\n const directoriesInputRef = React.useRef();\n\n const handleClick = () => !isDisabled && setIsComponentVisible(true);\n const handleDocumentsClick = () => documentsInputRef.current.click();\n const handleDirectoriesClick = () => directoriesInputRef.current.click();\n const handleClose = (event) => {\n event.stopPropagation();\n setIsComponentVisible(false);\n };\n\n const dropdown = isComponentVisible && (\n {text}
\n\n \n
\n );\n\n const containerStyles = [styles.container.base, isDisabled && styles.container.disabled];\n\n const arrowStyles = [styles.arrow.base, isComponentVisible && styles.arrow.rotated];\n\n const handleFilesChange = async (event) => {\n const files = await fromEvent(event);\n addFilesToQueue({ files, directory });\n };\n\n return (\n \n
\n\n \n
\n \n
\n \n
\n \n
\n );\n});\n\nexport { UploadButton };\n","import { css } from '@emotion/core';\nimport { colors, media } from 'styles';\n\nexport const wrapper = css`\n position: relative;\n margin-left: auto;\n cursor: pointer;\n`;\n\nexport const container = {\n base: css`\n --hover-opacity: 0.7;\n display: flex;\n align-items: center;\n height: 22px;\n\n .uploadButton__text {\n font-size: 14px;\n color: ${colors.black};\n line-height: 1;\n margin-right: 7px;\n transition: all 0.2s ease-in;\n }\n\n .uploadButton__icon {\n transition: all 0.2s ease-in;\n margin-right: 6px;\n line-height: 1;\n flex-shrink: 0;\n }\n\n &:hover {\n .uploadButton__icon {\n path {\n opacity: var(--hover-opacity);\n }\n }\n\n .uploadButton__text {\n opacity: var(--hover-opacity);\n }\n }\n `,\n\n disabled: css`\n cursor: default;\n\n .uploadButton__icon {\n path {\n opacity: var(--hover-opacity);\n }\n }\n\n .uploadButton__indicator,\n .uploadButton__text {\n opacity: var(--hover-opacity);\n color: ${colors.mediumGrey};\n }\n `,\n};\n\nexport const option = css`\n display: flex;\n align-items: center;\n padding: 8px 15px;\n\n &:hover {\n background: ${colors.lightestGrey};\n }\n\n .dropdownOption__icon {\n margin-right: 12px;\n flex-shrink: 0;\n }\n\n .dropdownOption__text {\n white-space: nowrap;\n font-size: 12px;\n line-height: 1;\n color: ${colors.black};\n ${media.tablet} {\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n }\n }\n`;\n\nexport const dropdown = css`\n position: absolute;\n top: 25px;\n left: -35px;\n background: ${colors.white};\n box-shadow: 0px 3px 20px rgba(16, 8, 63, 0.11);\n border-radius: 7px;\n z-index: 2;\n ${media.tablet} {\n width: 100%;\n right: 0;\n left: 0;\n top: unset !important;\n /* bottom: 66px; */\n z-index: 1000;\n bottom: 0;\n position: fixed;\n border-radius: 0;\n padding: 10px 0 20px;\n }\n`;\n\nexport const arrow = {\n base: css`\n flex-shrink: 0;\n font-size: 10px;\n font-weight: 400;\n transition: transform 0.2s ease-in;\n color: ${colors.black};\n `,\n\n rotated: css`\n transform: rotate(180deg);\n `,\n};\n","export { UploadButton } from './UploadButton';\n","import { gql } from '@apollo/client';\n\nconst ACTIVITY_FEED_FRAGMENT = gql`\n fragment ActivityFeedFields on ActivityFeed {\n id\n description\n createdAt\n author\n }\n`;\n\nexport { ACTIVITY_FEED_FRAGMENT };\n","import { gql } from '@apollo/client';\n\nconst BREADCRUMB_FRAGMENT = gql`\n fragment BreadcrumbFields on Breadcrumb {\n id\n name\n }\n`;\n\nexport { BREADCRUMB_FRAGMENT };\n","import { gql } from '@apollo/client';\n\nconst DIRECTORY_CAPABILITIES_FRAGMENT = gql`\n fragment DirectoryCapabilitiesFields on DirectoryCapabilities {\n canCreate\n canUpdate\n canDelete\n canShare\n canMove\n }\n`;\n\nexport { DIRECTORY_CAPABILITIES_FRAGMENT };\n","import { gql } from '@apollo/client';\nimport { BREADCRUMB_FRAGMENT } from './BreadcrumbFragment';\n\nconst DIRECTORY_FRAGMENT = gql`\n fragment DirectoryFields on Directory {\n id\n name\n slug\n favourite\n shared\n hasChildren\n withSmartDocuments\n inSmartSignDirectory\n empty\n createdAt\n directoriesCount\n documentsCount\n\n parent {\n id\n }\n\n breadcrumbs {\n ...BreadcrumbFields\n }\n }\n ${BREADCRUMB_FRAGMENT}\n`;\n\nexport { DIRECTORY_FRAGMENT };\n","import { gql } from '@apollo/client';\nimport { ACTIVITY_FEED_FRAGMENT } from './ActivityFeedFragment';\nimport { BREADCRUMB_FRAGMENT } from './BreadcrumbFragment';\n\nconst DOCUMENT_FRAGMENT = gql`\n fragment DocumentFields on Document {\n id\n name\n favourite\n shared\n contentType\n createdAt\n extension\n smartDocument\n withSmartDocuments\n inSmartSignDirectory\n url\n\n parent {\n id\n }\n\n activityFeeds {\n ...ActivityFeedFields\n }\n\n breadcrumbs {\n ...BreadcrumbFields\n }\n }\n ${ACTIVITY_FEED_FRAGMENT}\n ${BREADCRUMB_FRAGMENT}\n`;\n\nexport { DOCUMENT_FRAGMENT };\n","const NAME = 'NAME';\n\nexport { NAME };\n","const PDF = 'PDF';\nconst IMAGE = 'IMAGE';\nconst DOCUMENT = 'DOCUMENT';\n\nconst FILTERS = [PDF, IMAGE, DOCUMENT];\n\nexport { FILTERS, PDF, IMAGE, DOCUMENT };\n","const NAME = 'NAME';\n\nexport { NAME };\n","import { intl } from '../../../../contexts/v2/TranslationContext';\n\nconst SHARED = { id: 'shared', name: intl.formatMessage({ id: 'VirtualSidebarItems.sharedWithMe' }), slug: 'shared' };\nconst RECENTS = {\n id: 'recents',\n name: intl.formatMessage({ id: 'VirtualSidebarItems.recents' }),\n slug: 'recents',\n};\nconst FAVOURITES = {\n id: 'favourites',\n name: intl.formatMessage({ id: 'VirtualSidebarItems.favourites' }),\n slug: 'favourites',\n};\n\nconst VIRTUAL_SIDEBAR_ITEMS = [RECENTS, FAVOURITES, SHARED];\n\nexport { SHARED, RECENTS, FAVOURITES, VIRTUAL_SIDEBAR_ITEMS };\n","import { gql, useMutation } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\n\nconst CREATE_DIRECTORY = gql`\n mutation createDirectory($input: CreateDirectoryInput!) {\n createDirectory(input: $input) {\n directory {\n ...DirectoryFields\n\n parent {\n id\n hasChildren\n }\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n`;\n\nconst useCreateDirectoryMutation = (options) => useMutation(CREATE_DIRECTORY, options);\n\nexport { useCreateDirectoryMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\nimport { BREADCRUMB_FRAGMENT } from './../fragments/BreadcrumbFragment';\n\nconst CREATE_DOCUMENT_MUTATION = gql`\n mutation createDocument($input: CreateDocumentInput!) {\n createDocument(input: $input) {\n document {\n ...DocumentFields\n\n parent {\n id\n empty\n\n ancestors {\n id\n empty\n }\n }\n\n breadcrumbs {\n ...BreadcrumbFields\n }\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${DOCUMENT_FRAGMENT}\n ${BREADCRUMB_FRAGMENT}\n`;\n\nconst useCreateDocumentMutation = (options) => useMutation(CREATE_DOCUMENT_MUTATION, options);\n\nexport { CREATE_DOCUMENT_MUTATION, useCreateDocumentMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\n\nconst DELETE_DIRECTORY = gql`\n mutation deleteDirectory($input: DeleteDirectoryInput!) {\n deleteDirectory(input: $input) {\n directory {\n ...DirectoryFields\n\n parent {\n id\n empty\n hasChildren\n }\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n`;\n\nconst useDeleteDirectoryMutation = (options) => useMutation(DELETE_DIRECTORY, options);\n\nexport { useDeleteDirectoryMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\n\nconst DELETE_DOCUMENT = gql`\n mutation deleteDocument($input: DeleteDocumentInput!) {\n deleteDocument(input: $input) {\n document {\n ...DocumentFields\n\n parent {\n id\n empty\n\n ancestors {\n id\n empty\n }\n }\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${DOCUMENT_FRAGMENT}\n`;\n\nconst useDeleteDocumentMutation = (options) => useMutation(DELETE_DOCUMENT, options);\n\nexport { useDeleteDocumentMutation };\n","import { gql, useMutation } from '@apollo/client';\n\nconst DOWNLOAD_DIRECTORY = gql`\n mutation downloadDirectory($input: DownloadDirectoryInput!) {\n downloadDirectory(input: $input) {\n directory {\n id\n name\n }\n }\n }\n`;\n\nconst useDownloadDirectoryMutation = (options) => useMutation(DOWNLOAD_DIRECTORY, options);\n\nexport { useDownloadDirectoryMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\n\nconst INCREMENT_DIRECTORY_NAME = gql`\n mutation incrementDirectoryName($input: IncrementDirectoryNameInput!) {\n incrementDirectoryName(input: $input) {\n directory {\n ...DirectoryFields\n\n parent {\n id\n hasChildren\n }\n }\n\n errors {\n attribute\n fullMessage\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n`;\n\nconst useIncrementDirectoryNameMutation = (options) => useMutation(INCREMENT_DIRECTORY_NAME, options);\n\nexport { useIncrementDirectoryNameMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\n\nconst INCREMENT_DOCUMENT_NAME = gql`\n mutation incrementDocumentName($input: IncrementDocumentNameInput!) {\n incrementDocumentName(input: $input) {\n document {\n ...DocumentFields\n }\n\n errors {\n attribute\n fullMessage\n }\n }\n }\n ${DOCUMENT_FRAGMENT}\n`;\n\nconst useIncrementDocumentNameMutation = (options) => useMutation(INCREMENT_DOCUMENT_NAME, options);\n\nexport { useIncrementDocumentNameMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\n\nconst MOVE_DIRECTORY = gql`\n mutation moveDirectory($input: MoveDirectoryInput!) {\n moveDirectory(input: $input) {\n directory {\n ...DirectoryFields\n\n parent {\n id\n hasChildren\n }\n }\n\n errors {\n attribute\n fullMessage\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n`;\n\nconst useMoveDirectoryMutation = (options) => useMutation(MOVE_DIRECTORY, options);\n\nexport { useMoveDirectoryMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\n\nconst MOVE_DOCUMENT = gql`\n mutation moveDocument($input: MoveDocumentInput!) {\n moveDocument(input: $input) {\n document {\n ...DocumentFields\n }\n\n errors {\n attribute\n fullMessage\n }\n }\n }\n ${DOCUMENT_FRAGMENT}\n`;\n\nconst useMoveDocumentMutation = (options) => useMutation(MOVE_DOCUMENT, options);\n\nexport { useMoveDocumentMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\n\nconst SHARE_DIRECTORY = gql`\n mutation shareDirectory($input: ShareDirectoryInput!) {\n shareDirectory(input: $input) {\n directory {\n id\n shared\n\n descendants {\n id\n shared\n\n documents {\n id\n shared\n }\n }\n\n documents {\n id\n shared\n }\n }\n }\n }\n`;\n\nconst useShareDirectoryMutation = (options) => useMutation(SHARE_DIRECTORY, options);\n\nexport { useShareDirectoryMutation };\n","import { gql, useMutation } from '@apollo/client';\n\nconst SHARE_DOCUMENT = gql`\n mutation shareDocument($input: ShareDocumentInput!) {\n shareDocument(input: $input) {\n document {\n id\n shared\n }\n }\n }\n`;\n\nconst useShareDocumentMutation = (options) => useMutation(SHARE_DOCUMENT, options);\n\nexport { useShareDocumentMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\n\nconst TOGGLE_FAVOURITE_DIRECTORY = gql`\n mutation toggleFavouriteDirectory($input: ToggleFavouriteDirectoryInput!) {\n toggleFavouriteDirectory(input: $input) {\n directory {\n ...DirectoryFields\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n`;\n\nconst useToggleFavouriteDirectoryMutation = (options) => useMutation(TOGGLE_FAVOURITE_DIRECTORY, options);\n\nexport { useToggleFavouriteDirectoryMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\n\nconst TOGGLE_FAVOURITE_DOCUMENT = gql`\n mutation toggleFavouriteDocument($input: ToggleFavouriteDocumentInput!) {\n toggleFavouriteDocument(input: $input) {\n document {\n ...DocumentFields\n }\n }\n }\n ${DOCUMENT_FRAGMENT}\n`;\n\nconst useToggleFavouriteDocumentMutation = (options) => useMutation(TOGGLE_FAVOURITE_DOCUMENT, options);\n\nexport { useToggleFavouriteDocumentMutation };\n","import { gql, useMutation } from '@apollo/client';\n\nconst CREATE_ANNOTATION = gql`\n mutation UpdateAnnotation($input: UpdateAnnotationInput!) {\n UpdateAnnotation(input: $input) {\n errors {\n attribute\n message\n }\n }\n }\n`;\n\nconst useUpdateAnnotationMutation = (options) => useMutation(CREATE_ANNOTATION, options);\n\nexport default useUpdateAnnotationMutation;\n","import { gql, useMutation } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\n\nconst UPDATE_DIRECTORY = gql`\n mutation updateDirectory($input: UpdateDirectoryInput!) {\n updateDirectory(input: $input) {\n directory {\n ...DirectoryFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n`;\n\nconst useUpdateDirectoryMutation = (options) => useMutation(UPDATE_DIRECTORY, options);\n\nexport { useUpdateDirectoryMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\n\nconst UPDATE_DOCUMENT = gql`\n mutation updateDocument($input: UpdateDocumentInput!) {\n updateDocument(input: $input) {\n document {\n ...DocumentFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${DOCUMENT_FRAGMENT}\n`;\n\nconst useUpdateDocumentMutation = (options) => useMutation(UPDATE_DOCUMENT, options);\n\nexport { useUpdateDocumentMutation };\n","import { gql, useQuery } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\nimport { DIRECTORY_CAPABILITIES_FRAGMENT } from './../fragments/DirectoryCapabilitiesFragment';\n\nconst DIRECTORY_QUERY = gql`\n query directory($id: ID!) {\n currentCompany {\n id\n\n directory(id: $id) {\n ...DirectoryFields\n\n capabilities {\n ...DirectoryCapabilitiesFields\n }\n\n directories {\n ...DirectoryFields\n }\n\n documents {\n ...DocumentFields\n }\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n ${DOCUMENT_FRAGMENT}\n ${DIRECTORY_CAPABILITIES_FRAGMENT}\n`;\n\nconst useDirectoryQuery = (options) => useQuery(DIRECTORY_QUERY, options);\n\nexport { useDirectoryQuery };\n","import { gql, useQuery } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\n\nconst FAVOURITE_DIRECTORIES_QUERY = gql`\n query favouriteDirectories {\n currentContact {\n id\n\n directories: favouriteDirectories {\n ...DirectoryFields\n }\n\n documents: favouriteDocuments {\n ...DocumentFields\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n ${DOCUMENT_FRAGMENT}\n`;\n\nconst useFavouriteDirectoriesQuery = (options) => useQuery(FAVOURITE_DIRECTORIES_QUERY, options);\n\nexport { FAVOURITE_DIRECTORIES_QUERY, useFavouriteDirectoriesQuery };\n","import { gql, useQuery } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\n\nconst RECENT_DIRECTORIES_QUERY = gql`\n query recentDirectories {\n currentContact {\n id\n\n directories: recentDirectories {\n ...DirectoryFields\n }\n\n documents: recentDocuments {\n ...DocumentFields\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n ${DOCUMENT_FRAGMENT}\n`;\n\nconst useRecentDirectoriesQuery = (options) => useQuery(RECENT_DIRECTORIES_QUERY, options);\n\nexport { RECENT_DIRECTORIES_QUERY, useRecentDirectoriesQuery };\n","import { gql, useQuery } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\nimport { DIRECTORY_CAPABILITIES_FRAGMENT } from './../fragments/DirectoryCapabilitiesFragment';\n\nconst ROOT_DIRECTORIES_QUERY = gql`\n query rootDirectories {\n currentCompany {\n id\n\n rootDirectories {\n ...DirectoryFields\n\n capabilities {\n ...DirectoryCapabilitiesFields\n }\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n ${DIRECTORY_CAPABILITIES_FRAGMENT}\n`;\n\nconst useRootDirectoriesQuery = (options) => useQuery(ROOT_DIRECTORIES_QUERY, options);\n\nexport { useRootDirectoriesQuery };\n","import { gql, useQuery, useLazyQuery } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\n\nconst SEARCH_QUERY = gql`\n query searchQuery($name: String!) {\n currentCompany {\n id\n\n directories(name: $name) {\n ...DirectoryFields\n }\n\n documents(name: $name) {\n ...DocumentFields\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n ${DOCUMENT_FRAGMENT}\n`;\n\nconst useSearchQuery = (options) => useQuery(SEARCH_QUERY, options);\nconst useSearchLazyQuery = (options) => useLazyQuery(SEARCH_QUERY, options);\n\nexport { useSearchLazyQuery, useSearchQuery };\n","import { gql, useQuery } from '@apollo/client';\nimport { CONTACT_FRAGMENT } from 'data/fragments/ContactFragment';\n\nconst SHAREABLE_DIRECTORY_QUERY = gql`\n query shareableDirectory($id: ID!) {\n currentCompany {\n id\n\n contacts {\n ...ContactFields\n }\n\n directory(id: $id) {\n id\n shareableUrl\n shared\n\n sharedWith {\n ...ContactFields\n }\n\n contactsWithAccess {\n ...ContactFields\n }\n }\n }\n }\n ${CONTACT_FRAGMENT}\n`;\n\nconst useShareableDirectoryQuery = (options) => useQuery(SHAREABLE_DIRECTORY_QUERY, options);\n\nexport { useShareableDirectoryQuery };\n","import { gql, useQuery } from '@apollo/client';\nimport { CONTACT_FRAGMENT } from 'data/fragments/ContactFragment';\n\nconst SHAREABLE_DOCUMENT_QUERY = gql`\n query shareableDocument($id: ID!) {\n currentCompany {\n id\n\n contacts {\n ...ContactFields\n }\n\n document(id: $id) {\n id\n shared\n shareableUrl\n\n sharedWith {\n ...ContactFields\n }\n\n contactsWithAccess {\n ...ContactFields\n }\n }\n }\n }\n ${CONTACT_FRAGMENT}\n`;\n\nconst useShareableDocumentQuery = (options) => useQuery(SHAREABLE_DOCUMENT_QUERY, options);\n\nexport { useShareableDocumentQuery };\n","import { gql, useQuery } from '@apollo/client';\nimport { DIRECTORY_FRAGMENT } from './../fragments/DirectoryFragment';\nimport { DOCUMENT_FRAGMENT } from './../fragments/DocumentFragment';\n\nconst SHARED_DIRECTORIES_QUERY = gql`\n query sharedDirectories {\n currentContact {\n id\n\n directories: sharedDirectories {\n ...DirectoryFields\n }\n\n documents: sharedDocuments {\n ...DocumentFields\n }\n }\n }\n ${DIRECTORY_FRAGMENT}\n ${DOCUMENT_FRAGMENT}\n`;\n\nconst useSharedDirectoriesQuery = (options) => useQuery(SHARED_DIRECTORIES_QUERY, options);\n\nexport { useSharedDirectoriesQuery };\n","import { useContactStore } from 'store/contactStoreContext';\nimport { useApolloClient } from '@apollo/client';\n\nimport { DIRECTORY_FRAGMENT } from './../data/fragments/DirectoryFragment';\nimport { DOCUMENT_FRAGMENT } from './../data/fragments/DocumentFragment';\n\nconst useApolloCacheHelpers = () => {\n const { contactId, companyId } = useContactStore();\n const { cache } = useApolloClient();\n\n const getDocumentFragment = (document) => {\n return cache.writeFragment({\n data: document,\n fragment: DOCUMENT_FRAGMENT,\n fragmentName: 'DocumentFields',\n });\n };\n\n const getDirectoryFragment = (directory) => {\n return cache.writeFragment({\n data: directory,\n fragment: DIRECTORY_FRAGMENT,\n fragmentName: 'DirectoryFields',\n });\n };\n\n const removeDirectoryFromCache = (parent, directory) => {\n cache.modify({\n id: cache.identify({ __typename: 'Directory', id: parent.id }),\n fields: {\n directories(existing = [], { readField }) {\n return existing.filter((item) => readField('id', item) !== directory.id);\n },\n },\n });\n };\n\n const removeDocumentFromCache = (parent, document) => {\n cache.modify({\n id: cache.identify({ __typename: 'Directory', id: parent.id }),\n fields: {\n documents(existing = [], { readField }) {\n return existing.filter((item) => readField('id', item) !== document.id);\n },\n },\n });\n };\n\n const addDirectoryToFavouritesCache = (directory) => {\n cache.modify({\n id: cache.identify({ __typename: 'Contact', id: contactId }),\n fields: {\n favouriteDirectories(existing = [], { readField }) {\n const isPresent = existing.find((item) => readField('id', item) === directory.id);\n\n if (isPresent) {\n return existing.filter((item) => readField('id', item) !== directory.id);\n } else {\n return [...existing, getDirectoryFragment(directory)];\n }\n },\n },\n });\n };\n\n const addDocumentToFavouritesCache = (document) => {\n cache.modify({\n id: cache.identify({ __typename: 'Contact', id: contactId }),\n fields: {\n favouriteDocuments(existing = [], { readField }) {\n const isPresent = existing.find((item) => readField('id', item) === document.id);\n\n if (isPresent) {\n return existing.filter((item) => readField('id', item) !== document.id);\n } else {\n return [...existing, getDocumentFragment(document)];\n }\n },\n },\n });\n };\n\n const addDirectoryToCache = (parent, directory) => {\n cache.modify({\n id: cache.identify({ __typename: 'Directory', id: parent.id }),\n fields: {\n directories(existing = [], { readField }) {\n const isPresent = existing.find((item) => readField('id', item) === directory.id);\n\n if (isPresent) {\n return existing;\n }\n\n return [...existing, getDirectoryFragment(directory)];\n },\n },\n });\n };\n\n const addDocumentToCache = (parent, document) => {\n cache.modify({\n id: cache.identify({ __typename: 'Directory', id: parent.id }),\n fields: {\n documents(existing = [], { readField }) {\n const isPresent = existing.find((item) => readField('id', item) === document.id);\n\n if (isPresent) {\n return existing;\n }\n\n return [...existing, getDocumentFragment(document)];\n },\n },\n });\n };\n\n const evictSearchDirectoriesCache = (broadcast = false) => {\n cache.evict({\n id: cache.identify({ __typename: 'Company', id: companyId }),\n fieldName: 'directories',\n broadcast: broadcast,\n });\n\n cache.gc();\n };\n\n const evictSearchDocumentsCache = (broadcast = false) => {\n cache.evict({\n id: cache.identify({ __typename: 'Company', id: companyId }),\n fieldName: 'documents',\n broadcast: broadcast,\n });\n\n cache.gc();\n };\n\n const evictFavouriteDirectoriesCache = (broadcast = false) => {\n cache.evict({\n id: cache.identify({ __typename: 'Contact', id: contactId }),\n fieldName: 'favouriteDirectories',\n broadcast: broadcast,\n });\n\n cache.gc();\n };\n\n const evictFavouriteDocumentsCache = (broadcast = false) => {\n cache.evict({\n id: cache.identify({ __typename: 'Contact', id: contactId }),\n fieldName: 'favouriteDocuments',\n broadcast: broadcast,\n });\n\n cache.gc();\n };\n\n const evictRecentDirectoriesCache = (broadcast = false) => {\n cache.evict({\n id: cache.identify({ __typename: 'Contact', id: contactId }),\n fieldName: 'recentDirectories',\n broadcast: broadcast,\n });\n\n cache.gc();\n };\n\n const evictRecentDocumentsCache = (broadcast = false) => {\n cache.evict({\n id: cache.identify({ __typename: 'Contact', id: contactId }),\n fieldName: 'recentDocuments',\n broadcast: broadcast,\n });\n\n cache.gc();\n };\n\n return {\n addDirectoryToCache,\n addDocumentToCache,\n addDirectoryToFavouritesCache,\n addDocumentToFavouritesCache,\n removeDirectoryFromCache,\n removeDocumentFromCache,\n evictFavouriteDirectoriesCache,\n evictFavouriteDocumentsCache,\n evictRecentDirectoriesCache,\n evictRecentDocumentsCache,\n evictSearchDirectoriesCache,\n evictSearchDocumentsCache,\n };\n};\n\nexport { useApolloCacheHelpers };\n","import { useState } from 'react';\nimport { useCreateDirectoryMutation } from './../data/mutations/CreateDirectoryMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\n\nconst useCreateDirectory = ({ onCompleted }) => {\n const { evictRecentDocumentsCache, evictSearchDocumentsCache, addDirectoryToCache } = useApolloCacheHelpers();\n\n const update = (cache, { data: { createDirectory } }) => {\n const { directory, errors } = createDirectory;\n\n if (errors.length) {\n return setError(errors[0].message);\n }\n\n const { breadcrumbs } = directory;\n\n const parent = breadcrumbs[breadcrumbs.length - 2];\n\n addDirectoryToCache(parent, directory);\n evictRecentDocumentsCache();\n evictSearchDocumentsCache();\n onCompleted();\n };\n\n const [error, setError] = useState(null);\n const [mutate, { loading: isCreating }] = useCreateDirectoryMutation({ update });\n\n const resetError = () => setError(null);\n\n const createDirectory = (name, parentId) => {\n mutate({ variables: { input: { name, parentId } } });\n };\n\n return {\n error,\n resetError,\n createDirectory,\n isCreating,\n };\n};\n\nexport { useCreateDirectory };\n","import { CREATE_DOCUMENT_MUTATION, useCreateDocumentMutation } from './../data/mutations/CreateDocumentMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\nimport { formatBytes } from 'helpers/formatBytes';\nimport { DirectUpload } from '@rails/activestorage';\n\nconst MAX_SIZE = 104857600;\n\nconst useCreateDocument = ({ onUpload, onError }) => {\n const {\n addDirectoryToCache,\n addDocumentToCache,\n evictRecentDocumentsCache,\n evictRecentDirectoriesCache,\n evictSearchDocumentsCache,\n evictSearchDirectoriesCache,\n } = useApolloCacheHelpers();\n\n const update = (cache, { data: { createDocument } }) => {\n const { document, errors } = createDocument;\n\n if (errors.length) {\n return onError(errors[0].message);\n }\n\n const { breadcrumbs } = document;\n\n breadcrumbs.map((directory, index) => {\n if (breadcrumbs[index + 1]) {\n addDirectoryToCache(directory, { ...breadcrumbs[index + 1], __typename: 'Directory' });\n } else {\n addDocumentToCache(directory, { ...document, __typename: 'Document' });\n }\n });\n\n evictRecentDocumentsCache();\n evictRecentDirectoriesCache();\n evictSearchDirectoriesCache();\n evictSearchDocumentsCache();\n\n onUpload();\n };\n\n const [mutate] = useCreateDocumentMutation({ update });\n\n const validate = (attachment) => {\n if (attachment.size > MAX_SIZE) {\n onError(`File size should be less than ${formatBytes(MAX_SIZE, 0)}`);\n return false;\n }\n\n return true;\n };\n\n const createDocument = (params, updateCurrentUpload) => {\n const isValid = validate(params.attachment);\n\n if (!isValid) return;\n\n const uploadConfig = {\n directUploadWillStoreFileWithXHR: (xhr) => {\n updateCurrentUpload({ xhr });\n\n xhr.upload.addEventListener('progress', (event) => {\n const progress = Math.round((event.loaded * 100) / event.total);\n updateCurrentUpload({ progress });\n });\n },\n };\n\n const upload = new DirectUpload(params.attachment, '/rails/active_storage/direct_uploads', uploadConfig);\n\n upload.create((error, blob) => {\n if (error) {\n return onError(error);\n }\n\n const input = {\n directoryId: params.directoryId,\n path: params.path,\n signedId: blob.signed_id,\n };\n\n mutate({ variables: { input } });\n });\n };\n\n return { createDocument };\n};\n\nexport { useCreateDocument };\n","import { useDeleteDirectoryMutation } from './../data/mutations/DeleteDirectoryMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nconst useDeleteDirectory = ({ id }) => {\n const {\n removeDirectoryFromCache,\n evictRecentDirectoriesCache,\n evictFavouriteDirectoriesCache,\n evictSearchDirectoriesCache,\n } = useApolloCacheHelpers();\n\n const { setFlash } = useFlashActions();\n\n const onError = ({ message }) => setFlash(message);\n\n const update = (cache, { data: { deleteDirectory } }) => {\n const { directory } = deleteDirectory;\n const { breadcrumbs } = directory;\n\n const parent = breadcrumbs[breadcrumbs.length - 2];\n\n removeDirectoryFromCache(parent, directory);\n\n evictRecentDirectoriesCache();\n evictFavouriteDirectoriesCache();\n evictSearchDirectoriesCache();\n };\n\n const [mutate, { loading: isDeleting }] = useDeleteDirectoryMutation({ update, onError });\n\n const deleteDirectory = () => {\n mutate({ variables: { input: { directoryId: id } } });\n };\n\n return { isDeleting, deleteDirectory };\n};\n\nexport { useDeleteDirectory };\n","import { useDeleteDocumentMutation } from './../data/mutations/DeleteDocumentMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nconst useDeleteDocument = ({ id }) => {\n const {\n removeDocumentFromCache,\n evictRecentDocumentsCache,\n evictFavouriteDocumentsCache,\n evictSearchDocumentsCache,\n } = useApolloCacheHelpers();\n\n const { setFlash } = useFlashActions();\n\n const onError = ({ message }) => setFlash(message);\n\n const update = (cache, { data: { deleteDocument } }) => {\n const { document } = deleteDocument;\n const { breadcrumbs } = document;\n\n removeDocumentFromCache(document.parent, document);\n evictRecentDocumentsCache();\n evictFavouriteDocumentsCache();\n evictSearchDocumentsCache();\n };\n\n const [mutate, { loading: isDeleting }] = useDeleteDocumentMutation({ update, onError });\n\n const deleteDocument = () => {\n mutate({ variables: { input: { documentId: id } } });\n };\n\n return { isDeleting, deleteDocument };\n};\n\nexport { useDeleteDocument };\n","import { useState, useCallback, useEffect } from 'react';\n\nimport { useRootDirectoriesQuery } from './../data/queries/RootDirectoriesQuery';\nimport { useDirectoryQuery } from './../data/queries/DirectoryQuery';\nimport { useRecentDirectoriesQuery } from './../data/queries/RecentDirectoriesQuery';\nimport { useSharedDirectoriesQuery } from './../data/queries/SharedDirectoriesQuery';\nimport { useFavouriteDirectoriesQuery } from './../data/queries/FavouriteDirectoriesQuery';\nimport { SHARED, RECENTS, FAVOURITES, VIRTUAL_SIDEBAR_ITEMS } from './../data/globals/VirtualSidebarItems';\n\nconst useDirectoriesBrowser = ({ onBrowse, currentDirectoryId }) => {\n const [browserData, setBrowserData] = useState({\n sidebarItemId: null,\n requestedDirectoryId: currentDirectoryId,\n currentDirectory: null,\n rootDirectories: null,\n isLoading: false,\n });\n\n const { requestedDirectoryId, currentDirectory } = browserData;\n const requestedFulfilled = requestedDirectoryId === currentDirectory?.id;\n\n const isCurrentDirectory = ({ id }) => browserData.requestedDirectoryId === id;\n const updateBrowserData = (updates) => setBrowserData((state) => ({ ...state, ...updates }));\n\n const virtualDirectoryData = (data, virtualDirectory) => ({\n ...data.currentContact,\n ...virtualDirectory,\n virtual: true,\n breadcrumbs: [virtualDirectory],\n });\n\n const { data: rootsData } = useRootDirectoriesQuery();\n\n const { loading: directoryLoading, data: directoryData } = useDirectoryQuery({\n skip: !browserData.requestedDirectoryId || !!VIRTUAL_SIDEBAR_ITEMS.find(isCurrentDirectory),\n variables: { id: browserData.requestedDirectoryId },\n });\n\n const { loading: recentsLoading, data: recentsData } = useRecentDirectoriesQuery({\n skip: !isCurrentDirectory(RECENTS),\n });\n\n const { loading: sharedLoading, data: sharedData } = useSharedDirectoriesQuery({\n skip: !isCurrentDirectory(SHARED),\n });\n\n const { loading: favouritesLoading, data: favouritesData } = useFavouriteDirectoriesQuery({\n skip: !isCurrentDirectory(FAVOURITES),\n });\n\n const dataLoading = directoryLoading || recentsLoading || sharedLoading || favouritesLoading;\n\n useEffect(() => setIsLoading(), [dataLoading]);\n useEffect(() => setRootDirectoriesData(), [rootsData]);\n useEffect(() => setDirectoryData(), [directoryData]);\n useEffect(() => setFavouritesData(), [favouritesData]);\n useEffect(() => setRecentsData(), [recentsData]);\n useEffect(() => setSharedData(), [sharedData]);\n useEffect(() => finalize(), [requestedFulfilled]);\n\n const finalize = () => {\n if (!requestedFulfilled) return;\n\n onBrowse && onBrowse();\n };\n\n const setIsLoading = () => {\n if (!dataLoading) return;\n\n updateBrowserData({ isLoading: true });\n };\n\n const setRootDirectoriesData = () => {\n if (!rootsData) return;\n\n const { rootDirectories } = rootsData.currentCompany;\n\n updateBrowserData({ rootDirectories });\n };\n\n const setDirectoryData = () => {\n if (!directoryData) return;\n\n const currentDirectory = directoryData.currentCompany.directory;\n const sidebarItemId = currentDirectory.breadcrumbs[0].id;\n\n updateBrowserData({ sidebarItemId, currentDirectory, isLoading: false });\n };\n\n const setSharedData = () => {\n if (!sharedData) return;\n\n const currentDirectory = virtualDirectoryData(sharedData, SHARED);\n\n updateBrowserData({ sidebarItemId: SHARED.id, currentDirectory, isLoading: false });\n };\n\n const setFavouritesData = () => {\n if (!favouritesData) return;\n\n const currentDirectory = virtualDirectoryData(favouritesData, FAVOURITES);\n\n updateBrowserData({ sidebarItemId: FAVOURITES.id, currentDirectory, isLoading: false });\n };\n\n const setRecentsData = () => {\n if (!recentsData) return;\n\n const currentDirectory = virtualDirectoryData(recentsData, RECENTS);\n\n updateBrowserData({ sidebarItemId: RECENTS.id, currentDirectory, isLoading: false });\n };\n\n const browseSidebarItem = useCallback((id) => {\n updateBrowserData({ sidebarItemId: id, requestedDirectoryId: id });\n }, []);\n\n const resetBrowser = () => {\n updateBrowserData({ currentDirectory: null, requestedDirectoryId: null });\n };\n\n const browseDirectory = useCallback(\n (id) => {\n const isCurrent = isCurrentDirectory({ id });\n\n if (isCurrent) return onBrowse && onBrowse();\n\n updateBrowserData({ requestedDirectoryId: id });\n },\n [browserData.requestedDirectoryId]\n );\n\n return { resetBrowser, browseDirectory, browseSidebarItem, ...browserData };\n};\n\nexport { useDirectoriesBrowser };\n","import { useState, useCallback } from 'react';\nimport { useDebounce } from 'use-debounce';\n\nconst useDirectoriesBrowserSearch = () => {\n const [context, setContext] = useState({\n isSearching: false,\n searchTerm: '',\n });\n\n const [debouncedSearchTerm] = useDebounce(context.searchTerm, 500, { leading: !context.searchTerm.length });\n\n const updateContext = (updates) => setContext((state) => ({ ...state, ...updates }));\n\n const handleTermChange = useCallback((event) => {\n updateContext({ searchTerm: event.target.value || '' });\n }, []);\n\n const startSearching = useCallback(() => {\n updateContext({ isSearching: true });\n }, []);\n\n const stopSearching = useCallback(() => {\n updateContext({ isSearching: false, searchTerm: '' });\n }, []);\n\n return {\n handleTermChange,\n startSearching,\n stopSearching,\n debouncedSearchTerm,\n ...context,\n };\n};\n\nexport { useDirectoriesBrowserSearch };\n","import { useDownloadDirectoryMutation } from './../data/mutations/DownloadDirectoryMutation';\n\nconst useDownloadDirectory = ({ onDownload }) => {\n const update = (cache, { data: { downloadDirectory } }) => {\n const { directory } = downloadDirectory;\n\n onDownload(directory);\n };\n\n const [mutate, { loading: isDownloading }] = useDownloadDirectoryMutation({ update });\n\n const downloadDirectory = (directoryId) => {\n mutate({ variables: { input: { directoryId } } });\n };\n\n return { downloadDirectory, isDownloading };\n};\n\nexport { useDownloadDirectory };\n","import { useState, useCallback } from 'react';\n\nconst useFileViewer = () => {\n const [fileViewerContext, setDrawerContext] = useState({\n file: null,\n show: false,\n });\n\n const openFileViewer = useCallback((document) => {\n setDrawerContext({ file: document, show: true });\n }, []);\n\n const closeFileViewer = useCallback(() => {\n setDrawerContext({ file: null, show: false });\n }, []);\n\n return {\n fileViewerContext,\n openFileViewer,\n closeFileViewer,\n };\n};\n\nexport { useFileViewer };\n","import { useState, useCallback } from 'react';\n\nconst useHistoryDrawer = () => {\n const [drawerContext, setDrawerContext] = useState({\n file: null,\n show: false,\n });\n\n const openHistoryDrawer = useCallback((document) => {\n setDrawerContext({ file: document, show: true });\n }, []);\n\n const closeHistoryDrawer = useCallback(() => {\n setDrawerContext((context) => ({ ...context, show: false }));\n }, []);\n\n const resetDrawerContext = useCallback(() => {\n setDrawerContext({ file: null, show: false });\n }, []);\n\n return {\n drawerContext,\n openHistoryDrawer,\n closeHistoryDrawer,\n resetDrawerContext,\n };\n};\n\nexport { useHistoryDrawer };\n","import { useIncrementDirectoryNameMutation } from './../data/mutations/IncrementDirectoryNameMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\n\nconst useIncrementDirectoryName = ({ parent, onCompleted, onError }) => {\n const { addDirectoryToCache, removeDirectoryFromCache } = useApolloCacheHelpers();\n\n const update = (cache, { data: { incrementDirectoryName } }) => {\n const { directory, errors } = incrementDirectoryName;\n\n if (errors.length) {\n return onError(errors[0].fullMessage);\n }\n\n removeDirectoryFromCache(parent, directory);\n addDirectoryToCache(directory.parent, directory);\n onCompleted();\n };\n\n const [mutate, { loading: isIncrementing }] = useIncrementDirectoryNameMutation({ update });\n\n const incrementDirectoryName = (directoryId, destinationId) => {\n mutate({ variables: { input: { directoryId, destinationId } } });\n };\n\n return { incrementDirectoryName, isIncrementing };\n};\n\nexport { useIncrementDirectoryName };\n","import { useIncrementDocumentNameMutation } from './../data/mutations/IncrementDocumentNameMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\n\nconst useIncrementDocumentName = ({ parent, onCompleted, onError }) => {\n const { addDocumentToCache, removeDocumentFromCache } = useApolloCacheHelpers();\n\n const update = (cache, { data: { incrementDocumentName } }) => {\n const { document, errors } = incrementDocumentName;\n\n if (errors.length) {\n return onError(errors[0].fullMessage);\n }\n\n removeDocumentFromCache(parent, document);\n addDocumentToCache(document.parent, document);\n onCompleted();\n };\n\n const [mutate, { loading: isIncrementing }] = useIncrementDocumentNameMutation({ update });\n\n const incrementDocumentName = (documentId, destinationId) => {\n mutate({ variables: { input: { documentId, destinationId } } });\n };\n\n return { incrementDocumentName, isIncrementing };\n};\n\nexport { useIncrementDocumentName };\n","import { useState, useCallback } from 'react';\n\nconst useModal = () => {\n const [modalContext, setModalContext] = useState({\n show: false,\n resource: null,\n });\n\n const updateContext = (updates) => {\n setModalContext((state) => ({ ...state, ...updates }));\n };\n\n const openModal = useCallback((resource) => {\n updateContext({ resource, show: true });\n }, []);\n\n const closeModal = useCallback(() => {\n updateContext({ show: false });\n }, []);\n\n return {\n modalContext,\n openModal,\n closeModal,\n };\n};\n\nexport { useModal };\n","import { useMoveDirectoryMutation } from './../data/mutations/MoveDirectoryMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\n\nconst useMoveDirectory = ({ parent, onCompleted, onError }) => {\n const { addDirectoryToCache, removeDirectoryFromCache } = useApolloCacheHelpers();\n\n const update = (cache, { data: { moveDirectory } }) => {\n const { directory, errors } = moveDirectory;\n\n if (errors.length) {\n return onError(errors[0].fullMessage);\n }\n\n removeDirectoryFromCache(parent, directory);\n addDirectoryToCache(directory.parent, directory);\n onCompleted();\n };\n\n const [mutate, { loading: isMoving }] = useMoveDirectoryMutation({ update });\n\n const moveDirectory = (directoryId, destinationId) => {\n mutate({ variables: { input: { directoryId, destinationId } } });\n };\n\n return { moveDirectory, isMoving };\n};\n\nexport { useMoveDirectory };\n","import { useMoveDocumentMutation } from './../data/mutations/MoveDocumentMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\n\nconst useMoveDocument = ({ parent, onCompleted, onError }) => {\n const { addDocumentToCache, removeDocumentFromCache } = useApolloCacheHelpers();\n\n const update = (cache, { data: { moveDocument } }) => {\n const { document, errors } = moveDocument;\n\n if (errors.length) {\n return onError(errors[0].fullMessage);\n }\n\n removeDocumentFromCache(parent, document);\n addDocumentToCache(document.parent, document);\n onCompleted();\n };\n\n const [mutate, { loading: isMoving }] = useMoveDocumentMutation({ update });\n\n const moveDocument = (documentId, destinationId) => {\n mutate({ variables: { input: { documentId, destinationId } } });\n };\n\n return { moveDocument, isMoving };\n};\n\nexport { useMoveDocument };\n","import { useShareDirectoryMutation } from './../data/mutations/ShareDirectoryMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\n\nconst useShareDirectory = ({ onCompleted, onError }) => {\n const update = (cache, { data: { shareDirectory } }) => {\n onCompleted();\n };\n\n const [mutate, { loading: isSharing }] = useShareDirectoryMutation({ update });\n\n const shareDirectory = (directoryId, contactIds) => {\n mutate({ variables: { input: { directoryId, contactIds } } });\n };\n\n return { shareDirectory, isSharing };\n};\n\nexport { useShareDirectory };\n","import { useShareDocumentMutation } from './../data/mutations/ShareDocumentMutation';\n\nconst useShareDocument = ({ onCompleted, onError }) => {\n const update = (cache, { data: { shareDocument } }) => {\n onCompleted();\n };\n\n const [mutate, { loading: isSharing }] = useShareDocumentMutation({ update });\n\n const shareDocument = (documentId, contactIds) => {\n mutate({ variables: { input: { documentId, contactIds } } });\n };\n\n return { shareDocument, isSharing };\n};\n\nexport { useShareDocument };\n","import { useState, useEffect } from 'react';\nimport { useShareableDocumentQuery } from './../data/queries/ShareableDocumentQuery';\nimport { useShareableDirectoryQuery } from './../data/queries/ShareableDirectoryQuery';\n\nconst useShareable = ({ resource }) => {\n const [shareableData, setShareableData] = useState({\n isLoading: false,\n item: null,\n shareableWith: [],\n });\n\n const updateShareableData = (updates) => setShareableData((state) => ({ ...state, ...updates }));\n\n const isDirectory = resource?.__typename === 'Directory';\n const isDocument = resource?.__typename === 'Document';\n\n const { loading: isDocumentLoading, data: documentData } = useShareableDocumentQuery({\n variables: { id: resource?.id },\n fetchPolicy: 'network-only',\n skip: !resource?.id || isDirectory,\n });\n\n const { loading: isDirectoryLoading, data: directoryData } = useShareableDirectoryQuery({\n variables: { id: resource?.id },\n fetchPolicy: 'network-only',\n skip: !resource?.id || isDocument,\n });\n\n const dataLoading = isDocumentLoading || isDirectoryLoading;\n\n useEffect(() => setIsLoading(), [dataLoading]);\n useEffect(() => setShareableDirectoryData(), [directoryData]);\n useEffect(() => setShareableDocumentData(), [documentData]);\n\n const setIsLoading = () => {\n if (!dataLoading) return;\n\n updateShareableData({ isLoading: true });\n };\n\n const setShareableDirectoryData = () => {\n if (!directoryData) return;\n\n const { directory, contacts } = directoryData.currentCompany;\n\n updateShareableData({ isLoading: false, item: directory, shareableWith: getShareableWith(contacts, directory) });\n };\n\n const setShareableDocumentData = () => {\n if (!documentData) return;\n\n const { document, contacts } = documentData.currentCompany;\n\n updateShareableData({ isLoading: false, item: document, shareableWith: getShareableWith(contacts, document) });\n };\n\n const getSharedWithByDefault = (item) => {\n return item.sharedWithViaPermissions.concat(item.sharedWithViaAncestors);\n };\n\n const getShareableWith = (contacts, item) => {\n const sharedWithIds = item.sharedWith.concat(item.contactsWithAccess).map((item) => item.id);\n\n return contacts.filter(({ id }) => !sharedWithIds.includes(id));\n };\n\n const isSharedWith = (contact) => {\n return shareableData.item.sharedWith.find((item) => item.id === contact.id);\n };\n\n const removeContact = (contact) => {\n const { item } = shareableData;\n const sharedWith = item.sharedWith.filter((item) => item.id !== contact.id);\n\n updateShareableData({ item: { ...item, sharedWith } });\n };\n\n const addContact = (contact) => {\n const { item } = shareableData;\n const sharedWith = [...item.sharedWith, contact];\n\n updateShareableData({ item: { ...item, sharedWith } });\n };\n\n const toggleContact = (contact) => {\n const isAdded = isSharedWith(contact);\n\n if (isAdded) {\n removeContact(contact);\n } else {\n addContact(contact);\n }\n };\n\n return {\n ...shareableData,\n isDocument,\n isDirectory,\n isSharedWith,\n toggleContact,\n };\n};\n\nexport { useShareable };\n","import { useState } from 'react';\nimport { ASC, DESC } from 'data/globals/SortDirections';\nimport { sort, createNewSortInstance } from 'fast-sort';\n\nconst useSort = (items) => {\n const [direction, setDirection] = useState(ASC);\n\n const toggleSort = () => {\n const opposite = isDescending ? ASC : DESC;\n\n setDirection(opposite);\n };\n\n const isDescending = direction === DESC;\n const isAscending = direction === ASC;\n\n const naturalSort = createNewSortInstance({\n comparer: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare,\n });\n\n const sortedItems = isDescending\n ? naturalSort(items).desc((item) => item.name)\n : naturalSort(items).asc((item) => item.name);\n\n return { toggleSort, sortedItems, isDescending };\n};\n\nexport { useSort };\n","import { useToggleFavouriteDirectoryMutation } from './../data/mutations/ToggleFavouriteDirectoryMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\n\nconst useToggleFavouriteDirectory = ({ id }) => {\n const { addDirectoryToFavouritesCache } = useApolloCacheHelpers();\n\n const update = (\n cache,\n {\n data: {\n toggleFavouriteDirectory: { directory },\n },\n }\n ) => {\n addDirectoryToFavouritesCache(directory);\n };\n\n const [mutate, { loading: isToggling }] = useToggleFavouriteDirectoryMutation({ update });\n\n const toggleFavouriteDirectory = () => {\n mutate({ variables: { input: { directoryId: id } } });\n };\n\n return { toggleFavouriteDirectory, isToggling };\n};\n\nexport { useToggleFavouriteDirectory };\n","import { useToggleFavouriteDocumentMutation } from './../data/mutations/ToggleFavouriteDocumentMutation';\nimport { useApolloCacheHelpers } from './../hooks/useApolloCacheHelpers';\n\nconst useToggleFavouriteDocument = ({ id }) => {\n const { addDocumentToFavouritesCache } = useApolloCacheHelpers();\n\n const update = (\n cache,\n {\n data: {\n toggleFavouriteDocument: { document },\n },\n }\n ) => {\n addDocumentToFavouritesCache(document);\n };\n\n const [mutate, { loading: isToggling }] = useToggleFavouriteDocumentMutation({ update });\n\n const toggleFavouriteDocument = () => {\n mutate({ variables: { input: { documentId: id } } });\n };\n\n return { isToggling, toggleFavouriteDocument };\n};\n\nexport { useToggleFavouriteDocument };\n","import { useState } from 'react';\nimport { useUpdateDirectoryMutation } from './../data/mutations/UpdateDirectoryMutation';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nconst useUpdateDirectory = ({ id, onCompleted }) => {\n const update = (cache, { data: { updateDirectory } }) => {\n const { errors } = updateDirectory;\n\n if (errors.length) {\n return setError(errors[0].message);\n }\n\n onCompleted();\n };\n\n const { setFlash } = useFlashActions();\n\n const onError = ({ message }) => setFlash(message);\n\n const [error, setError] = useState(null);\n const [mutate, { loading: isUpdating }] = useUpdateDirectoryMutation({ update, onError });\n\n const resetError = () => setError(null);\n\n const updateDirectory = (name) => {\n mutate({ variables: { input: { name, directoryId: id } } });\n };\n\n return {\n error,\n resetError,\n updateDirectory,\n isUpdating,\n };\n};\n\nexport { useUpdateDirectory };\n","import { useState } from 'react';\nimport { useUpdateDocumentMutation } from './../data/mutations/UpdateDocumentMutation';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nconst useUpdateDocument = ({ id, onCompleted }) => {\n const update = (cache, { data: { updateDocument } }) => {\n const { errors } = updateDocument;\n\n if (errors.length) {\n return setError(errors[0].message);\n }\n\n onCompleted();\n };\n\n const { setFlash } = useFlashActions();\n\n const onError = ({ message }) => setFlash(message);\n\n const [error, setError] = useState(null);\n const [mutate, { loading: isUpdating }] = useUpdateDocumentMutation({ update, onError });\n\n const resetError = () => setError(null);\n\n const updateDocument = (name) => {\n mutate({ variables: { input: { name, documentId: id } } });\n };\n\n return {\n error,\n resetError,\n updateDocument,\n isUpdating,\n };\n};\n\nexport { useUpdateDocument };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const sort = css`\n padding: 0 10px;\n ${media.tablet} {\n padding: 0 15px;\n }\n`;\n\nexport const actions = css`\n display: flex;\n justify-content: space-between;\n padding: 0 10px 10px 10px;\n ${media.tablet} {\n padding: 0 15px 10px 15px;\n }\n\n &:empty {\n padding: 0;\n }\n`;\n\nexport const content = css`\n height: calc(100% - 50px);\n overflow: auto;\n ${media.tablet} {\n height: auto;\n max-height: calc(100% - 85px);\n }\n`;\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { withIntl } from '../../../utils/v2/intl';\nimport { ReactComponent as CloseIcon } from 'images/icons/purple-cross.svg';\n\nimport * as styles from './MobileSharedDropdown.styles';\n\nconst MobileSharedDropdown = ({ onClick }) => {\n return (\n \n
\n\n \n \n
\n \n \n
\n );\n};\n\nexport default withIntl(MobileSharedDropdown);\n","import { css } from '@emotion/core';\nimport { media, colors } from 'styles';\n\nexport const container = css`\n display: none;\n border-top-right-radius: 50%;\n border-top-left-radius: 50%;\n background: ${colors.white};\n top: -15px;\n line-height: 1;\n left: 50%;\n transform: translate(-50%, 0);\n position: absolute;\n padding: 10px 15px;\n border-top: 1px solid ${colors.lightPurple};\n\n ${media.tablet} {\n display: block;\n }\n`;\n","/** @jsx jsx */\n\nimport React, { useState, useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { GroupsTable } from './../GroupsTable';\nimport { GroupDrawer } from './../GroupDrawer';\n\nimport { useCreateContactGroup } from './../hooks/useCreateContactGroup';\nimport { useDeleteContactGroup } from './../hooks/useDeleteContactGroup';\nimport { useUpdateContactGroup } from './../hooks/useUpdateContactGroup';\n\nconst NEW_GROUP = {\n name: '',\n contacts: [],\n};\n\nconst Container = ({ companyId }) => {\n const [context, setContext] = useState({\n isDrawerOpen: false,\n errors: [],\n group: NEW_GROUP,\n });\n\n const closeDrawer = useCallback(() => {\n setContext((state) => ({ ...state, isDrawerOpen: false, errors: [] }));\n }, []);\n\n const openDrawer = useCallback((group) => {\n setContext((state) => ({ ...state, group: group, isDrawerOpen: true, errors: [] }));\n }, []);\n\n const handleGroupChange = useCallback((values) => {\n setContext((state) => ({ ...state, group: { ...state.group, ...values } }));\n }, []);\n\n const onError = useCallback((errors) => {\n setContext((state) => ({ ...state, errors: errors }));\n }, []);\n\n const handleAddGroupClick = openDrawer.bind(this, NEW_GROUP);\n\n const { deleteContactGroup } = useDeleteContactGroup({ onCompleted: closeDrawer });\n const { createContactGroup } = useCreateContactGroup({ onCompleted: closeDrawer, onError, companyId });\n const { updateContactGroup } = useUpdateContactGroup({ onCompleted: closeDrawer, onError });\n\n const handleDeleteGroup = () => {\n deleteContactGroup({ contactGroupId: context.group.id });\n };\n\n const handleCreateGroup = () => {\n createContactGroup({\n name: context.group.name,\n contactIds: context.group.contacts.map((item) => item.gid),\n });\n };\n\n const handleUpdateGroup = () => {\n updateContactGroup({\n contactGroupId: context.group.id,\n name: context.group.name,\n contactIds: context.group.contacts.map((item) => item.gid || item.id),\n });\n };\n\n return (\n \n
\n );\n};\n\nexport { Container };\n","export { Container } from './Container';\n","import React, { memo } from 'react';\n\nimport { TwoLinesCell } from 'components/shared/PlaceholderTable/TwoLinesCell';\nimport { StatusCell } from 'components/shared/PlaceholderTable/StatusCell';\nimport { ActionsCell } from 'components/shared/PlaceholderTable/ActionsCell';\n\nconst DrawerPlaceholderTable = memo(({ show }) => {\n return (\n show &&\n [...Array(5)].map((_, index) => (\n \n
\n\n \n
\n \n
\n \n
\n\n \n \n \n
\n );\n } else {\n return (\n \n \n \n
\n\n {drawerHeader()}
\n \n
\n {drawerHeader()}
\n\n \n
\n\n \n\n \n
\n\n \n
\n\n \n
\n\n {renderDrawerButtons()}\n \n \n \n
\n
\n );\n});\n\nexport { GroupDrawerTable };\n","export { GroupDrawerTable } from './GroupDrawerTable';\n","import React, { memo } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport Avatar from 'components/shared/Avatar';\n\nconst GroupDrawerTableRow = memo(({ contact, onDelete }) => {\n const handleDelete = onDelete.bind(this, contact);\n\n return (\n | \n | \n | \n |
|---|
\n
\n \n
\n {contact.name}
\n {contact.initials}
\n {contact.email}
\n \n \n \n
\n
\n );\n});\n\nexport { GroupsTable };\n","export { GroupsTable } from './GroupsTable';\n","import React, { memo } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nconst GroupsTableRow = memo(({ name, size, onEdit }) => {\n const intl = useIntl();\n\n const sizeLabel = () => {\n if (size === 0) {\n return intl.formatMessage({ id: 'GroupsTableRow.noUsers' });\n } else {\n return intl.formatMessage({ id: 'GroupsTableRow.users' }, { count: size });\n }\n };\n\n return (\n | \n | \n \n |
|---|
\n
\n {name}
\n {sizeLabel()}
\n \n {children}\n
\n );\n});\n\nexport { ActionBar };\n","import { css } from '@emotion/core';\nimport { panels, media } from 'styles';\n\nexport const bar = css`\n ${panels.base}\n padding: 20px 30px 10px;\n border-top: 1px solid rgb(223, 223, 223, 0.25);\n margin-top: 15px;\n z-index: 4;\n ${media.mobile} {\n padding-left: 15px;\n padding-right: 15px;\n }\n`;\n","export { ActionBar } from './ActionBar';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { useResizeDetector } from 'react-resize-detector';\nimport { Step } from './../MultistepForm/Step';\nimport { ActionBar } from './../ActionBar';\nimport { HelpText } from 'components/shared/HelpText';\nimport { AlertPopup } from 'components/shared/AlertPopup';\nimport { useEditable } from 'hooks/useEditable';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\nimport { useDocumentsStore } from '../../../store/documentsStoreContext';\nimport ButtonWithConfirmation from 'components/shared/ButtonWithConfirmation';\nimport { useMeetingActions, useMeetingStore } from 'store/meetingStoreContext';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nimport { ReactComponent as PDFIcon } from 'images/icons/meeting-pdf.svg';\n\nimport * as styles from './AgendaAndTasksStep.styles';\n\nconst AgendaAndTasksStep = memo(({ show, steps, onSave, saveDraftLabel, onInviteClick, onInvite, children }) => {\n const { meeting } = useMeetingStore();\n const { documents } = useDocumentsStore();\n const { isDraft, isScheduled, isUpcoming } = useMeetingStatus(meeting.status);\n const { setFlash } = useFlashActions();\n const { deleteMeeting, startMeeting, publishMeeting, generateSmartPack } = useMeetingActions();\n const { isEditing: isPopupVisible, startEditing: showPopup, stopEditing: hidePopup } = useEditable();\n\n const intl = useIntl();\n\n const isActionable = isScheduled || isUpcoming;\n const enableGenerateSmartPackButton = isActionable && documents.length > 0;\n\n const handleStartClick = () => startMeeting(meeting.id).catch(setFlash);\n\n const startMeetingButton = (\n \n \n \n
\n \n );\n\n const [enablePublish, setEnablePublish] = useState(true);\n const [showPublishPopup, setShowPublishPopup] = useState(false);\n const [showGenerateSmartPackSuccess, setShowGenerateSmartPackSuccess] = useState(false);\n\n const handlePublishPopupOpen = () => setShowPublishPopup(true);\n const handlePublishPopupClose = () => setShowPublishPopup(false);\n\n const handlePublishClick = () => {\n if (!enablePublish) return;\n\n setEnablePublish(false);\n handlePublishPopupClose();\n publishMeeting(meeting.id).then(showPopup).catch(setFlash);\n\n setTimeout(() => setEnablePublish(true), 3000);\n };\n\n const publishMeetingButton = (isScheduled || isUpcoming) && (\n \n \n \n
\n \n );\n\n const handleArchiveClick = () => deleteMeeting(meeting.id).catch(setFlash);\n const archiveMeetingButton = (\n \n \n \n
\n \n }\n />\n );\n\n const inviteButton = isDraft && (\n \n \n
\n \n );\n\n return (\n show && (\n <>\n \n
\n \n \n \n \n \n\n \n \n
\n \n )\n );\n});\n\nexport { AgendaAndTasksStep };\n","import { css } from '@emotion/core';\nimport { utils, icons, colors, fonts, media } from 'styles';\n\nexport const actionBar = (width) => css`\n position: fixed;\n bottom: 0;\n width: ${width}px;\n ${media.tablet} {\n position: relative;\n }\n`;\n","export { AgendaAndTasksStep } from './AgendaAndTasksStep';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { ContactPicker } from 'components/shared/ContactPicker';\n\nimport { useClickOutside } from 'hooks/useClickOutside';\nimport { useAgendasActions } from 'store/agendasStoreContext';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nimport { ReactComponent as AssigneeIcon } from 'images/icons/user-icon-sm.svg';\n\nimport * as styles from './AgendaAssigneeSelect.styles';\n\nconst AgendaAssigneeSelect = memo(({ meetingId, agendaId, options, assigneeId, isEditable }) => {\n const { setFlash } = useFlashActions();\n const { updateAgenda } = useAgendasActions();\n\n const intl = useIntl();\n\n const assignee = options.find((option) => option.id === assigneeId);\n\n const renderAssignee = () => {\n if (assignee) {\n return {assignee.name};\n } else {\n return (\n \n {children}
\n \n \n {saveDraftLabel}\n \n\n \n \n
\n \n {inviteButton}\n {generateSmartPackButton}\n {publishMeetingButton}\n {startMeetingButton}\n {archiveMeetingButton}\n
\n\n \n
\n );\n }\n\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside();\n\n const showDropdown = () => setIsComponentVisible(true);\n const hideDropdown = () => setIsComponentVisible(false);\n\n const isSelected = (contact) => {\n return contact.id === assignee?.id;\n };\n\n const changeAssignee = (contact) => {\n const contactId = isSelected(contact) ? null : contact.id;\n\n updateAgenda(meetingId, agendaId, {\n assignee_id: contactId,\n })\n .then(hideDropdown)\n .catch(setFlash);\n };\n\n const pickerStyles = [styles.picker.base, isComponentVisible && styles.picker.visible];\n\n const assigneePicker = (\n \n
\n {renderAssignee()}
\n \n
\n );\n\n const chevronStyles = [styles.chevron.base, isComponentVisible && styles.chevron.flipped];\n\n const assigneeStyles = [styles.assignee.base, styles.assignee.hoverable];\n\n return (\n \n
\n );\n});\n\nexport { AgendaAssigneeSelect };\n","import { css } from '@emotion/core';\nimport { panels, colors, fonts, media } from 'styles';\n\nexport const component = css`\n font-size: 12px;\n color: ${colors.lightGrey};\n display: flex;\n align-items: baseline;\n position: relative;\n`;\n\nexport const assigneeless = css`\n color: ${colors.red};\n display: inline-block;\n line-height: 1;\n`;\n\nexport const assignee = {\n base: css`\n color: ${colors.black};\n display: inline-block;\n line-height: 1;\n `,\n\n hoverable: css`\n cursor: pointer;\n `,\n};\n\nexport const assigneeIcon = css`\n margin-right: 5px;\n\n path {\n fill: ${colors.cyan};\n }\n`;\n\nexport const chevron = {\n base: css`\n margin-left: 5px;\n font-weight: 400;\n color: ${colors.black};\n font-size: 10px;\n transition: transform 0.2s ease-in-out;\n `,\n\n flipped: css`\n transform: rotate(180deg);\n `,\n};\n\nexport const picker = {\n base: css`\n ${panels.base}\n display: none;\n box-shadow: 0px 1.2px 3.6px rgba(0, 20, 90, 0.1), 0px 6.4px 14.4px rgba(0, 50, 97, 0.13);\n padding: 14px 12px 0 12px;\n width: 346px;\n background: ${colors.white};\n position: absolute;\n top: 15px;\n z-index: 5;\n ${media.mobile} {\n max-width: 100%;\n width: 100%;\n position: fixed;\n left: 0;\n top: unset;\n z-index: 1000;\n bottom: 0;\n }\n `,\n\n visible: css`\n display: block;\n `,\n};\n\nexport const dropdown = css`\n position: static;\n box-shadow: none;\n\n .react-picker-option {\n padding-left: 5px;\n padding-right: 5px;\n }\n\n .react-items-wrapper {\n padding-right: 0;\n }\n`;\n","export { AgendaAssigneeSelect } from './AgendaAssigneeSelect';\n","/** @jsx jsx */\n\nimport React, { memo, useEffect, useState } from 'react';\nimport { css, jsx } from '@emotion/core';\n\nimport { DragDropContext, Droppable } from 'react-beautiful-dnd';\nimport { AgendaDocumentListItem } from './../AgendaDocumentListItem';\nimport { reorder } from 'helpers/reorder';\nimport { useDocumentsActions } from 'store/documentsStoreContext';\n\nimport * as styles from './AgendaDocumentList.styles';\n\nconst AgendaDocumentList = ({ meetingId, agendaId, documents, isEditable, onPreview }) => {\n const [agendaDocuments, setAgendaDocuments] = useState(documents);\n const { updateDocument } = useDocumentsActions();\n\n useEffect(() => {\n setAgendaDocuments(documents);\n }, [documents]);\n\n const renderDocuments = (isDragging) => {\n return agendaDocuments.map((document, index) => {\n return (\n \n
\n\n {assigneePicker}\n \n {renderAssignee()}\n \n
\n \n {draggables}\n {placeholder}\n
\n );\n };\n\n return (\n \n \n {droppable} \n \n
\n );\n};\n\nexport { AgendaDocumentList };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const dropzone = css`\n padding: 10px 0;\n display: flex;\n align-items: center;\n font-size: 14px;\n justify-content: center;\n color: ${colors.mediumGrey};\n border: 1px dashed ${colors.lightGrey};\n background: ${colors.white};\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const upload = css`\n ${fonts.semiBold}\n color: ${colors.cyan};\n\n &:hover {\n color: ${colors.cyan};\n opacity: 0.8;\n }\n`;\n\nexport const icon = css`\n background: ${colors.placeholderGrey};\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex\n align-items: center;\n justify-content: center;\n margin-right: 8px;\n\n svg {\n margin: 0 0 8px 10px;\n }\n`;\n\nexport const documents = css`\n position: relative;\n`;\n","export { AgendaDocumentList } from './AgendaDocumentList';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Draggable } from 'react-beautiful-dnd';\nimport { ReactComponent as DocumentIcon } from 'images/icons/agenda-document.svg';\nimport { useDocumentsActions } from 'store/documentsStoreContext';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nimport * as styles from './AgendaDocumentListItem.styles';\nimport { icons } from 'styles';\n\nconst AgendaDocumentListItem = ({ document, meetingId, agendaId, index, showPlaceholder, isEditable, onPreview }) => {\n const draggableId = String(document.id);\n\n const { setFlash } = useFlashActions();\n const { deleteDocument } = useDocumentsActions();\n\n const name = `${document.name}.${document.extension}`;\n const number = `${index + 1}.`;\n\n const placeholderOffset = index > 0 ? 5 * index : 0;\n const placeholderTop = index * 44 + placeholderOffset;\n\n const placeholderStyles = styles.placeholder(placeholderTop, showPlaceholder);\n\n const openPreview = onPreview.bind(this, document);\n\n const handleDeleteDocument = () => {\n deleteDocument(meetingId, agendaId, document.id).catch(setFlash);\n };\n\n const renderDraggable = ({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => {\n const draggableStyles = [styles.document.base, isDragging && styles.document.state.dragged];\n\n return (\n \n
\n \n );\n };\n\n return (\n <>\n \n\n \n
\n {isEditable && !isDragging && (\n \n )}\n {number}
\n\n \n
\n\n \n {name}\n
\n \n \n\n
\n \n );\n\n return (\n show && (\n \n )\n );\n});\n\nexport { AgendaDocumentsUpload };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const dropzone = (isDragActive) => css`\n padding: 10px 0;\n display: flex;\n align-items: center;\n font-size: 14px;\n justify-content: center;\n color: ${colors.mediumGrey};\n border: 1px dashed ${colors.lightGrey};\n background: ${colors.white};\n cursor: pointer;\n\n ${isDragActive &&\n `\n box-shadow: 2px 4px 4px rgba(223, 223, 223, 1);\n `}\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const upload = css`\n ${fonts.semiBold}\n color: ${colors.cyan};\n font-size: 14px;\n cursor: pointer;\n\n &:hover {\n color: ${colors.cyan};\n opacity: 0.8;\n }\n`;\n\nexport const icon = css`\n background: ${colors.placeholderGrey};\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex\n align-items: center;\n justify-content: center;\n margin-right: 8px;\n\n svg {\n margin: 0 0 8px 10px;\n }\n`;\n\nexport const documents = css`\n margin-top: 20px;\n position: relative;\n`;\n","export { AgendaDocumentsUpload } from './AgendaDocumentsUpload';\n","/** @jsx jsx */\n\nimport React, { memo, useCallback, useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { AgendaItem as AgendaSubItem } from './';\nimport { AgendaItemWrapper } from './../AgendaItemWrapper';\nimport { AgendaTaskListItem } from './../AgendaTaskListItem';\nimport { AgendaDocumentList } from './../AgendaDocumentList';\nimport { AgendaDocumentsUpload } from './../AgendaDocumentsUpload';\nimport { AgendaQuickTaskAdd } from './../AgendaQuickTaskAdd';\nimport { EditableTextArea } from 'components/shared/EditableTextArea';\nimport { findAgendaChildren } from 'helpers/agendas';\n\nimport { useFlashActions } from 'store/flashStoreContext';\nimport { useAgendasActions } from 'store/agendasStoreContext';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\n\nimport { ReactComponent as TasksIcon } from 'images/icons/agenda-tasks.svg';\nimport { ReactComponent as DocumentsIcon } from 'images/icons/agenda-documents.svg';\n\nimport * as styles from './AgendaItem.styles';\nimport { utils } from 'styles';\n\nconst AgendaItem = memo(\n ({\n meetingId,\n agenda,\n tasks,\n contacts,\n meetingDuration,\n documents,\n agendas,\n theme,\n adminView,\n editView,\n meetingStatus,\n root,\n visibilityMap,\n onReorder,\n onPreview,\n }) => {\n const { setFlash } = useFlashActions();\n const { updateAgenda } = useAgendasActions();\n\n const intl = useIntl();\n\n const { isEditable, isInSession } = useMeetingStatus(meetingStatus);\n\n const [description, setDescription] = useState(agenda.description || '');\n\n useEffect(() => setDescription(agenda.description || ''), [agenda.description]);\n\n const updateDescription = useCallback((text) => {\n updateAgenda(meetingId, agenda.id, { description: text }).catch(setFlash);\n }, []);\n\n const children = findAgendaChildren(agendas, agenda);\n\n const relatedDocuments = documents\n .filter((document) => document.agenda_id === agenda.id)\n .sort((a, b) => a.position - b.position);\n\n const relatedTasks = tasks.filter((task) => task.agenda_id === agenda.id);\n\n const adminAccess = adminView && isEditable;\n const editAccess = editView && isEditable;\n const allowEdits = adminAccess || editAccess;\n\n const showTasks = allowEdits || relatedTasks.length > 0;\n const showDocuments = allowEdits || relatedDocuments.length > 0;\n const showToggle = adminView && isInSession;\n\n const isBlank = !adminAccess && !description.length && !relatedTasks.length && !relatedDocuments.length;\n\n const agendaTheme = theme || styles.themes[agenda.status];\n\n const childrenDuration = children.reduce((s, item) => s += item.duration_in_minutes, 0)\n\n const subItems = children.map((child, index) => {\n return (\n \n
\n\n \n \n
\n \n
\n\n {showTasks && (\n <>\n \n
\n
\n\n {relatedTasks.map((task) => (\n \n
\n
\n
\n\n \n
\n {agenda.root && showToggle && (\n
\n );\n }\n);\n\nexport { AgendaItemWrapper };\n","import { css } from '@emotion/core';\nimport { utils, icons, colors, fonts, media } from 'styles';\n\nexport const viewModeIcon = css`\n ${icons.base}\n\n svg {\n path {\n fill: ${colors.black};\n }\n }\n`;\n\nexport const content = css`\n border-radius: 4px;\n padding: 13px 22px;\n margin-top: 10px;\n`;\n\nexport const heading = css`\n ${fonts.regular}\n font-size: 20px;\n margin-bottom: 0;\n color: ${colors.black};\n`;\n\nexport const container = css`\n position: relative;\n margin-top: -1px;\n margin-bottom: -1px;\n`;\n\nexport const circle = css`\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n`;\n\nexport const checkmark = css`\n position: absolute;\n left: -20px;\n top: 15px;\n width: 38px;\n height: 38px;\n border-radius: 50%;\n display: flex;\n z-index: 3;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n`;\n\nexport const padded = {\n root: css`\n padding: 12px 38px;\n ${media.tablet} {\n padding-left: 15px;\n padding-right: 15px;\n }\n `,\n\n child: css`\n padding: 12px 34px 12px 28px;\n ${media.tablet} {\n padding-left: 0;\n padding-right: 0;\n }\n `,\n};\n\nexport const warning = {\n position: 'relative',\n color: colors.alertOrange,\n top: 0,\n marginBottom: 0,\n paddingTop: 0,\n paddingBottom: 0,\n p: {\n margin: 0,\n fontSize: '0.7rem'\n },\n 'button.close': {\n top: 0\n }\n}\n\nexport const themes = {\n pending: {\n content: {\n base: css`\n ${content}\n background: ${colors.agendaGrey};\n border: 1px solid;\n border-color: transparent;\n `,\n\n hovered: css`\n border-color: #dedde0;\n `,\n },\n\n container: {\n base: css`\n ${container}\n background: transparent;\n border: 1px solid;\n border-color: transparent;\n `,\n\n hovered: css`\n border-color: #dedde0;\n `,\n },\n\n circle: css`\n ${circle}\n border: 1px solid ${colors.lighterGrey};\n background: ${colors.white};\n\n &:hover {\n border-color: ${colors.cyan};\n }\n `,\n\n checkmark: css`\n ${checkmark}\n background: ${colors.white};\n `,\n },\n\n completed: {\n content: {\n base: css`\n ${content}\n background: #CFF2F4;\n border: 1px solid;\n border-color: transparent;\n `,\n\n hovered: css`\n border-color: ${colors.cyan};\n `,\n },\n\n container: {\n withBackground: css`\n background: ${colors.lightCyan};\n `,\n\n base: css`\n ${container}\n border: 1px solid;\n border-color: transparent;\n\n .ms-agenda-document-list-item {\n background: #e5f8f9;\n }\n\n .ms-agenda-task-list-item:hover {\n background: #e5f8f9;\n }\n\n .fa-pencil {\n color: ${colors.cyan};\n\n &:hover {\n opacity: 0.8;\n }\n }\n `,\n\n hovered: css`\n border-color: ${colors.cyan};\n `,\n },\n\n circle: css`\n ${circle}\n border: none;\n background: ${colors.cyan};\n\n &:hover {\n border-color: none;\n }\n `,\n\n checkmark: css`\n ${checkmark}\n background: #E6F8F9;\n `,\n },\n};\n\nexport const wrapper = (paddingLeft, compactMode) => {\n return {\n base: css`\n padding-left: ${paddingLeft}px;\n display: ${compactMode ? 'none' : 'block'};\n `,\n\n root: css`\n padding-right: 32px;\n ${media.mobile} {\n padding-right: 0;\n padding-left: 0;\n }\n `,\n\n child: css`\n padding-right: 0;\n ${media.tablet} {\n padding-left: 0;\n }\n `,\n };\n};\n","export { AgendaItemWrapper } from './AgendaItemWrapper';\n","/** @jsx jsx */\n\nimport React, { memo, useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { AgendaItem } from './../AgendaItem';\nimport { Placeholder } from 'components/shared/Placeholder';\nimport { AgendaReorderModal } from './../AgendaReorderModal';\nimport FileViewer from 'components/v2/shared/FileViewer';\nimport { useFileViewer } from '../../documents/hooks/useFileViewer';\nimport { getResourceGID } from 'helpers/graphql';\n\nimport { useFlashActions } from 'store/flashStoreContext';\nimport { useAgendasActions } from 'store/agendasStoreContext';\nimport { useDocumentsStore } from 'store/documentsStoreContext';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\nimport { useEditable } from 'hooks/useEditable';\nimport { findAgendaRoots } from 'helpers/agendas';\n\nimport { ReactComponent as AgendasIcon } from 'images/icons/no-contacts.svg';\nimport * as styles from './AgendaList.styles';\nimport { utils } from 'styles';\n\nconst AgendaList = memo(\n ({\n meetingId,\n contacts,\n meetingDuration,\n agendas,\n visibilityMap,\n tasks,\n adminView,\n editView,\n meetingStatus,\n root,\n }) => {\n const { createAgenda, reorderAgendas, toggleAgendasVisibility } = useAgendasActions();\n const { setFlash } = useFlashActions();\n const { isEditable } = useMeetingStatus(meetingStatus);\n const { fileViewerContext, openFileViewer, closeFileViewer } = useFileViewer();\n\n const intl = useIntl();\n\n const adminAccess = adminView && isEditable;\n\n const { documents } = useDocumentsStore();\n\n const allowExpand = documents.length > 0 || adminAccess;\n\n const handleAdd = useCallback(() => {\n createAgenda(meetingId, { parent_id: null }).catch(setFlash);\n }, [meetingId]);\n\n const roots = findAgendaRoots(agendas);\n\n const {\n isEditing: isReorderModalOpen,\n startEditing: openReorderModal,\n stopEditing: closeReorderModal,\n } = useEditable();\n\n const handleReorderAgendas = (payload) => {\n reorderAgendas(meetingId, payload).then(closeReorderModal).catch(setFlash);\n };\n\n const renderList = () => {\n if (roots.length) {\n return roots.map((agenda) => (\n \n
\n )}\n\n {agenda.completed &&
\n \n
\n\n {subItems.length > 0 && (\n \n
\n\n {agenda.depth < MAX_SUBITEM_DEPTH && !isDesktop ? (\n \n
\n\n {!isBlank && (\n \n {agenda.number}\n
\n\n \n setWarning()}>\n \n )}\n\n
\n \n
\n\n {warning && (\n { warning }
\n\n
\n \n
\n\n \n
\n \n {isVisible ?
\n )}\n \n
\n ) : null}\n\n {!isBlank && (\n \n \n
\n \n
\n \n
\n )}\n \n
\n {children}
\n \n
\n )}\n {subItems}
\n \n
\n );\n }\n };\n\n const allHidden = Object.values(visibilityMap).every((item) => !item);\n const handleToggle = toggleAgendasVisibility.bind(this, allHidden);\n\n return (\n \n
\n );\n }\n);\n\nexport { AgendaList };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const heading = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: 25px 38px;\n\n ${media.tablet} {\n padding-left: 15px;\n padding-right: 15px;\n }\n`;\n\nexport const header = css`\n ${fonts.bold}\n color: ${colors.black};\n font-size: 22px;\n`;\n\nexport const toggleVisibilityLink = css`\n ${fonts.semiBold}\n font-size: 14px;\n color: ${colors.cyan};\n\n &:hover {\n color: ${colors.cyan};\n opacity: 0.8;\n cursor: pointer;\n }\n`;\n","export { AgendaList } from './AgendaList';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ReactComponent as AddItemBelowIcon } from 'images/icons/agenda-add-item-below.svg';\nimport { ReactComponent as AddItemAboveIcon } from 'images/icons/agenda-add-item-above.svg';\nimport { ReactComponent as AddSubItemIcon } from 'images/icons/agenda-add-subitem.svg';\nimport { ReactComponent as ReorderIcon } from 'images/icons/agenda-reorder.svg';\n\nimport { useFlashActions } from 'store/flashStoreContext';\nimport { useAgendasActions } from 'store/agendasStoreContext';\nimport { MAX_SUBITEM_DEPTH } from '../constants';\nimport * as styles from './AgendaQuickActions.styles';\n\nconst AgendaQuickActions = memo(({ show, meetingId, agendaId, position, parentId, depth, onReorder }) => {\n const { createAgenda, deleteAgenda } = useAgendasActions();\n const { setFlash } = useFlashActions();\n\n const addItemAbove = () => {\n createAgenda(meetingId, {\n position: position,\n parent_id: parentId,\n }).catch(setFlash);\n };\n\n const addItemBelow = () => {\n createAgenda(meetingId, {\n position: position + 1,\n parent_id: parentId,\n }).catch(setFlash);\n };\n\n const addSubItem = () => {\n createAgenda(meetingId, {\n parent_id: agendaId,\n }).catch(setFlash);\n };\n\n const deleteItem = () => {\n deleteAgenda(meetingId, agendaId).catch(setFlash);\n };\n\n return (\n show && (\n \n
\n\n \n\n {renderList()}\n\n \n
\n {allowExpand && (\n \n {allHidden\n ? intl.formatMessage({ id: 'AgendaList.expandAll' })\n : intl.formatMessage({ id: 'AgendaList.collapseAll' })}\n \n )}\n \n \n
\n )}\n \n \n
\n \n \n
\n \n
\n )\n );\n});\n\nexport { AgendaQuickActions };\n","import { css } from '@emotion/core';\nimport { panels, icons, colors, fonts, media } from 'styles';\n\nexport const wrapper = css`\n ${panels.base}\n position: absolute;\n top: -25px;\n right: 60px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 3;\n padding: 9px 6px;\n border: 1px solid #dedde0;\n box-shadow: 2px 4px 4px rgba(223, 223, 223, 0.25);\n border-radius: 4px;\n ${media.tablet} {\n display: none;\n }\n`;\n\nexport const tooltip = css`\n ${fonts.semiBold}\n background: ${colors.black};\n border-radius: 8px;\n color: ${colors.white};\n box-sizing: content-box;\n font-size: 12px;\n position: absolute;\n width: fit-content;\n pointer-events: none;\n white-space: nowrap;\n top: -50px;\n padding: 7px 11px;\n left: 50%;\n right: 0;\n transform: translateX(-50%);\n`;\n\nexport const triangle = css`\n width: 0;\n height: 0;\n position: absolute;\n left: 50%;\n right: 0;\n transform: translateX(-50%);\n border-left: 15px solid transparent;\n border-right: 15px solid transparent;\n border-top: 15px solid ${colors.black};\n`;\n\nexport const icon = css`\n position: relative;\n cursor: pointer;\n padding: 0 6px;\n color: ${colors.lightGrey};\n\n div {\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n }\n\n &:hover {\n svg,\n i {\n opacity: 0.8;\n }\n\n div {\n opacity: 1;\n }\n }\n`;\n","export { AgendaQuickActions } from './AgendaQuickActions';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ReactComponent as PlusIcon } from 'images/icons/circle-plus-sm.svg';\nimport { EditableTaskTitle } from './../EditableTaskTitle';\n\nimport * as styles from './AgendaQuickTaskAdd.styles';\n\nconst AgendaQuickTaskAdd = memo(({ meetingId, agendaId, tasks, isEmpty, show }) => {\n const [isActive, setIsActive] = useState(false);\n\n const activate = () => setIsActive(true);\n const deactivate = () => setIsActive(false);\n\n return (\n show && (\n <>\n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n {depth < MAX_SUBITEM_DEPTH && (\n \n
\n \n
\n )}\n\n \n
\n \n \n\n
\n \n
\n \n
\n\n {isEmpty && (\n \n
\n )}\n\n \n
\n \n
\n \n )\n );\n});\n\nexport { AgendaQuickTaskAdd };\n","import { css } from '@emotion/core';\nimport { utils, colors } from 'styles';\n\nexport const empty = css`\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n`;\n\nexport const heading = css`\n ${utils.uppercasedText}\n width: 100%;\n text-align: center;\n`;\n\nexport const wrapper = css`\n color: ${colors.mediumGrey};\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n margin-left: 17px;\n flex-grow: 1;\n line-height: 1;\n`;\n\nexport const component = css`\n display: flex;\n justify-content: center;\n align-items: center;\n color: ${colors.cyan};\n font-size: 16px;\n margin-top: 10px;\n\n svg {\n flex-shrink: 0;\n margin-right: 7px;\n }\n`;\n\nexport const addTask = css`\n display: inline-flex;\n cursor: pointer;\n\n &:hover {\n svg {\n opacity: 0.8;\n }\n }\n`;\n","export { AgendaQuickTaskAdd } from './AgendaQuickTaskAdd';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { AgendaReorderItem as AgendaReorderSubItem } from './';\nimport { Draggable, Droppable } from 'react-beautiful-dnd';\n\nimport { ReactComponent as MoveIcon } from 'images/icons/agenda-move.svg';\n\nimport * as styles from './AgendaReorderItem.styles';\n\nconst AgendaReorderItem = memo(({ item, index, orderMap }) => {\n const childList = orderMap[item.id].map((child, index) => (\n \n
\n \n {childList}\n {placeholder}\n
\n );\n\n const renderDraggable = ({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => (\n \n \n {renderDroppable}\n \n
\n );\n\n return (\n \n
\n\n \n {agendaList}\n {placeholder}\n
\n );\n\n return (\n \n {task.completed && }\n\n
\n );\n});\n\nexport { AgendaTaskListItem };\n","import { css } from '@emotion/core';\nimport { icons, colors, fonts } from 'styles';\n\nexport const task = {\n base: css`\n color: ${colors.mediumGrey};\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n margin-left: 17px;\n padding: 5px;\n flex-grow: 1;\n line-height: 1;\n `,\n\n hovered: css`\n cursor: pointer;\n background: #e1e4e8;\n border-radius: 4px;\n `,\n\n completed: css`\n margin-left: 0;\n color: ${colors.cyan};\n `,\n};\n\nexport const more = css`\n ${fonts.regular}\n color: ${colors.cyan};\n font-size: 14px;\n letter-spacing: 0.1em;\n text-transform: lowercase;\n`;\n\nexport const checkmark = css`\n color: ${colors.cyan};\n font-weight: 400;\n font-size: 12px;\n`;\n\nexport const deleteIcon = css`\n ${icons.base}\n color: ${colors.red};\n\n &:hover {\n color: ${colors.red};\n opacity: 0.8;\n }\n`;\n","export { AgendaTaskListItem } from './AgendaTaskListItem';\n","/** @jsx jsx */\n\nimport React, { useState, useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { AgendaList } from './../AgendaList';\nimport { TasksTable } from './../TasksTable';\n\nimport { TaskDrawer } from 'components/shared/TaskDrawer';\n\nimport { useTasksStore, useTasksActions } from 'store/tasksStoreContext';\nimport { useFlashActions } from 'store/flashStoreContext';\nimport { useAgendasStore } from 'store/agendasStoreContext';\nimport { useTaskDrawerActions } from 'store/taskDrawerStoreContext';\n\nimport { ReactComponent as AgendaIcon } from 'images/icons/agenda-icon.svg';\nimport { ReactComponent as TasksIcon } from 'images/icons/tasks-icon.svg';\n\nimport * as styles from './AgendaTasksTabs.styles';\nimport { utils } from 'styles';\n\nconst AgendaTasksTabs = ({\n meetingId,\n contacts,\n meetingDuration,\n adminView,\n editView,\n assigneeView,\n meetingStatus,\n root,\n currentContactId,\n}) => {\n const [activeTab, setActiveTab] = useState(1);\n\n const showAgenda = activeTab === 1;\n const showTasks = activeTab === 2;\n\n const goToAgendas = () => setActiveTab(1);\n const goToTasks = () => setActiveTab(2);\n\n const tabStyles = {\n agenda: styles.tab({ isSelected: showAgenda }),\n tasks: styles.tab({ isSelected: showTasks }),\n };\n\n const { agendas, visibilityMap } = useAgendasStore();\n const { tasks } = useTasksStore();\n\n const { createTask, updateTask, deleteTask, toggleTask } = useTasksActions();\n\n const { openDrawer, hideDrawer, setErrors } = useTaskDrawerActions();\n\n const { setFlash } = useFlashActions();\n\n // TASKS\n const handleAddTask = useCallback(() => {\n openDrawer();\n }, []);\n\n const handleEditTask = useCallback((params) => {\n openDrawer({ ...params });\n }, []);\n\n const handleToggleTask = useCallback((taskId) => {\n toggleTask(meetingId, taskId).catch(setFlash);\n }, []);\n\n const handleDeleteTask = useCallback((taskId) => {\n deleteTask(meetingId, taskId).then(hideDrawer).catch(setFlash);\n }, []);\n\n const handleCreateTask = useCallback((params) => {\n createTask(meetingId, params).then(hideDrawer).catch(setErrors);\n }, []);\n\n const handleUpdateTask = useCallback((params) => {\n updateTask(meetingId, params.id, params).then(hideDrawer).catch(setErrors);\n }, []);\n\n const tabs = (\n <>\n \n
\n \n
\n {task.title}
\n {isEditable && }\n \n
\n\n \n \n );\n\n return (\n <>\n {tabs}\n\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n\n \n
\n\n \n
\n );\n }\n\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside();\n\n const [_startTime, setStartTime] = useState(startTime);\n const [_endTime, setEndTime] = useState(endTime);\n const [errors, setErrors] = useState({});\n\n const showDropdown = () => setIsComponentVisible(true);\n const hideDropdown = () => setIsComponentVisible(false);\n\n useEffect(() => setStartTime(startTime), [startTime]);\n useEffect(() => setEndTime(endTime), [endTime]);\n useEffect(() => hideDropdown(), [startTime, endTime]);\n\n useEffect(() => {\n if (!isComponentVisible) setErrors({});\n }, [isComponentVisible]);\n\n const handleError = useCallback((response) => {\n const messages = getErrors(response);\n setErrors(messages);\n }, []);\n\n const setTime = () => {\n updateAgenda(meetingId, agendaId, {\n start_time: formatTime(_startTime),\n end_time: formatTime(_endTime),\n }).catch(handleError);\n };\n\n const handleStartTimeChange = (value) => {\n setStartTime(value);\n setErrors({});\n };\n\n const handleEndTimeChange = (value) => {\n setEndTime(value);\n setErrors({});\n };\n\n const message = errors.start_time || errors.end_time;\n\n const dropdown = isComponentVisible && (\n \n );\n\n const componentStyles = [styles.component.base, styles.component.hoverable];\n\n return (\n {timeline}
\n \n
\n );\n});\n\nexport { AgendaTimePicker };\n","import { css } from '@emotion/core';\nimport { panels, colors, fonts } from 'styles';\n\nexport const component = {\n base: css`\n font-size: 12px;\n color: ${colors.lightGrey};\n display: flex;\n align-items: baseline;\n position: relative;\n `,\n\n hoverable: css`\n cursor: pointer;\n `,\n};\n\nexport const errorButton = css`\n ${fonts.bold}\n background: ${colors.red};\n color: ${colors.white};\n border-radius: 4px;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-transform: uppercase;\n letter-spacing: 0.09em;\n line-height: 16px;\n white-space: pre-wrap;\n padding: 0;\n\n &:hover {\n opacity: 1;\n color: ${colors.white};\n cursor: auto;\n }\n`;\n\nexport const dropdown = css`\n ${panels.base}\n padding: 12px 0;\n z-index: 3;\n box-shadow: 0px 1.2px 3.6px rgba(0, 20, 90, 0.1), 0px 6.4px 14.4px rgba(0, 50, 97, 0.13);\n width: 185px;\n position: absolute;\n top: 15px;\n`;\n\nexport const padded = css`\n padding: 0 20px;\n`;\n","export { AgendaTimePicker } from './AgendaTimePicker';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './AttendanceTable.styles';\n\nconst AttendanceTable = memo(({ contactMeetings }) => {\n const existingContactMeetings = contactMeetings.filter((contact) => !contact._destroy);\n\n const contactMeetingsWithStatus = (status) => existingContactMeetings.filter((contact) => contact.status == status);\n\n const confirmedContactsCount = contactMeetingsWithStatus('yes').length;\n const declinedContactsCount = contactMeetingsWithStatus('no').length;\n const waitingContactsCount = existingContactMeetings.filter((contact) => !contact.status).length;\n\n return (\n {timeline}
\n\n {dropdown}\n | \n | \n \n | \n \n | \n
|---|---|---|
| {confirmedContactsCount} | \n{waitingContactsCount} | \n{declinedContactsCount} | \n
\n
\n );\n\n return (\n \n
\n );\n});\n\nexport { AttendeesPicker };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const padded = css`\n padding: 35px 40px 0;\n ${media.tablet} {\n padding: 15px 15px 0;\n }\n`;\n\nexport const title = css`\n font-size: 16px;\n ${fonts.bold};\n font-weight: 600;\n color: ${colors.black};\n`;\n\nexport const attendeesWrapper = css`\n display: flex;\n flex-wrap: wrap;\n`;\n\nexport const attendee = css`\n margin-right: 10px;\n margin-bottom: 10px;\n`;\n","export { AttendeesPicker } from './AttendeesPicker';\n","import React, { memo } from 'react';\n\nimport { useFlashActions } from 'store/flashStoreContext';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\nimport { useMeetingStore, useMeetingActions } from 'store/meetingStoreContext';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Step } from './../MultistepForm/Step';\nimport { ActionBar } from './../ActionBar';\nimport { AttendeesPicker } from './../AttendeesPicker';\n\nconst AttendeesStep = memo(\n ({ show, steps, onSave, saveDraftLabel, onAdvance, onInviteClick, onInvite, isDisabled, isMinutesContext }) => {\n const { setFlash } = useFlashActions();\n const { edits: meeting } = useMeetingStore();\n const { setEdits } = useMeetingActions();\n const { isDraft, isUpcoming } = useMeetingStatus(meeting.status);\n\n const handleSaveDraftClick = () => {\n if (isDisabled) return onSave();\n\n onInvite().then(onSave).catch(setFlash);\n };\n\n const handleNextClick = () => {\n if (isDisabled) return onAdvance();\n\n onInvite().then(onAdvance).catch(setFlash);\n };\n\n const inviteButton = !isDisabled && isDraft && (\n \n \n {!isDisabled ? (\n <>\n \n
\n \n
\n \n ) : (\n
\n \n
\n {infoMessage}\n \n
\n \n\n {!isPseudo && (\n \n \n
\n \n )}\n \n
\n \n \n
\n )}\n \n
\n {contacts.map((contact) => {\n return (\n
\n \n
\n );\n })}\n \n \n {saveDraftLabel}\n \n\n {inviteButton}\n\n \n
\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n \n
\n \n
\n\n {showVotingCheckbox && (\n \n
\n )}\n \n
\n \n
\n {contactsTable}\n \n );\n }\n);\n\nexport { ContactsTable };\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { ButtonWithSuccess } from 'components/shared/ButtonWithSuccess';\nimport { Placeholder } from 'components/shared/Placeholder';\nimport ButtonWithConfirmation from 'components/shared/ButtonWithConfirmation';\nimport { ReactComponent as ContactsIcon } from 'images/icons/no-contacts.svg';\nimport { ReactComponent as CalendarIcon } from 'images/icons/calendar.svg';\nimport Avatar from 'components/shared/Avatar';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\n\nimport * as styles from './index.styles';\n\nconst ContactsTableDesktop = memo(({ contactTableAttrs }) => {\n const {\n contacts,\n contactMeetings,\n meetingStatus,\n setChairman,\n isCreator,\n chairmanId,\n meetingOrganizerId,\n onDelete,\n onResend,\n readOnly,\n } = contactTableAttrs;\n\n const { isDraft, isUpcoming, isScheduled, isPseudo } = useMeetingStatus(meetingStatus);\n\n const intl = useIntl();\n\n const getInvitationText = (contact, invitationStatus) => {\n const acceptedStatuses = ['yes', 'confirmed'];\n\n if (isCreator(contact)) {\n return intl.formatMessage({ id: 'ContactsTable.creator' });\n }\n\n if (!meetingStatus || isDraft) {\n return intl.formatMessage({ id: 'ContactsTable.invitePending' });\n }\n\n if (acceptedStatuses.includes(invitationStatus)) {\n return intl.formatMessage({ id: 'ContactsTable.accepted' });\n } else if (invitationStatus === 'no') {\n return intl.formatMessage({ id: 'ContactsTable.declined' });\n } else if (invitationStatus === 'waiting') {\n return intl.formatMessage({ id: 'ContactsTable.maybe' });\n } else {\n return intl.formatMessage({ id: 'ContactsTable.inviteSent' });\n }\n };\n\n const placeholderIcon = \n
\n {contact.name}
\n {isContactEventOrganizer(contact) && \n {invitationText}\n\n {!isCreator(contact) && onResend && (isUpcoming || isScheduled) && (\n \n
\n \n
\n \n
\n\n {!readOnly && !isCreator(contact) && (\n \n \n \n
\n
\n \n );\n});\n\nexport { ContactsTableDesktop };\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { ButtonWithSuccess } from 'components/shared/ButtonWithSuccess';\nimport { Placeholder } from 'components/shared/Placeholder';\nimport ButtonWithConfirmation from 'components/shared/ButtonWithConfirmation';\nimport { ReactComponent as ContactsIcon } from 'images/icons/no-contacts.svg';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\nimport * as styles from './index.styles';\n\nconst ContactsTableMobile = memo(({ contactTableAttrs }) => {\n const {\n contacts,\n contactMeetings,\n meetingStatus,\n setChairman,\n isCreator,\n chairmanId,\n meetingOrganizerId,\n onDelete,\n onResend,\n readOnly,\n } = contactTableAttrs;\n\n const { isDraft, isUpcoming, isScheduled, isPseudo } = useMeetingStatus(meetingStatus);\n\n const intl = useIntl();\n\n const getInvitationText = (contact, invitationStatus) => {\n const acceptedStatuses = ['yes', 'confirmed'];\n\n if (isCreator(contact)) {\n return intl.formatMessage({ id: 'ContactsTable.creator' });\n }\n\n if (!meetingStatus || isDraft) {\n return intl.formatMessage({ id: 'ContactsTable.invitePending' });\n }\n\n if (acceptedStatuses.includes(invitationStatus)) {\n return intl.formatMessage({ id: 'ContactsTable.accepted' });\n } else if (invitationStatus === 'no') {\n return intl.formatMessage({ id: 'ContactsTable.declined' });\n } else if (invitationStatus === 'waiting') {\n return intl.formatMessage({ id: 'ContactsTable.maybe' });\n } else {\n return intl.formatMessage({ id: 'ContactsTable.inviteSent' });\n }\n };\n\n const placeholderIcon = | \n | \n {!isPseudo && (\n \n | \n )}\n \n | \n
|---|
\n
\n );\n });\n\n return (\n <>\n \n
\n \n
\n {contact.name}
\n \n {!readOnly && !isCreator(contact) && (\n
\n \n {invitationText}\n\n {!isPseudo && !isCreator(contact) && onResend && (isUpcoming || isScheduled) && (\n \n
\n \n
\n \n
\n {tableBody}
\n \n );\n});\n\nexport { ContactsTableMobile };\n","export { ContactsTable } from './ContactsTable';\n","import { css } from '@emotion/core';\nimport { tables, fonts, colors } from 'styles';\n\nexport const table = tables.table;\nexport const tableRow = tables.tableRow;\n\nexport const tableContainer = css`\n overflow: auto;\n max-height: 300px;\n`;\n\nexport const tableHeader = (width) => css`\n ${tables.tableHeader(width)}\n padding: 3px 5px;\n`;\n\nexport const tableCell = css`\n ${tables.tableCell}\n padding: 12px 5px;\n`;\n\nexport const warning = css`\n font-size: 12px;\n color: ${colors.red};\n`;\n\nexport const uppercase = css`\n text-transform: uppercase;\n`;\n\nexport const status = css`\n min-width: 103px;\n`;\n\nexport const statuses = {\n confirmed: css`\n color: ${colors.cyan};\n `,\n yes: css`\n color: ${colors.cyan};\n `,\n no: css`\n color: ${colors.red};\n `,\n pending: css`\n color: ${colors.orange};\n `,\n waiting: css`\n color: ${colors.orange};\n `,\n no_show: css`\n color: ${colors.orange};\n `,\n};\n\nexport const deleteIcon = css`\n color: ${colors.lightGrey};\n\n &:hover {\n cursor: pointer;\n color: ${colors.cyan};\n }\n`;\nexport const flexBetween = css`\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nexport const deleteMobile = css`\n flex-basis: 0 !important;\n flex-grow: 0 !important;\n`;\n\nexport const mobileItem = css`\n border-top: 1px solid ${colors.headingGrey};\n padding: 15px 0;\n margin: 0 -15px;\n`;\n\nexport const mobileItemWrapper = css`\n padding: 0 15px;\n`;\n\nexport const mobileContainer = css`\n margin: 0 -15px;\n padding: 0 15px;\n border-bottom: 1px solid ${colors.headingGrey};\n`;\n","/** @jsx jsx */\n\nimport React, { useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { useClickOutside } from 'hooks/useClickOutside';\nimport { useAgendasActions } from 'store/agendasStoreContext';\nimport { useFlashActions } from 'store/flashStoreContext';\nimport { formatDuration } from 'helpers/formatDuration';\n\nimport Slider from 'react-rangeslider';\nimport moment from 'moment';\n\nimport { ReactComponent as ClockIcon } from 'images/icons/clock-icon.svg';\n\nimport * as styles from './DurationPicker.styles';\n\nconst DurationPicker = ({ meetingId, agendaId, isEditable, maxDuration=120, value }) => {\n const duration = moment.duration(value || 0, 'minutes');\n\n const intl = useIntl();\n\n const [hours, setHours] = useState(duration.hours());\n const [minutes, setMinutes] = useState(duration.minutes());\n\n const { updateAgenda } = useAgendasActions();\n const { setFlash } = useFlashActions();\n\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside(false);\n\n useEffect(() => {\n resetInitialValues();\n }, [value]);\n\n useEffect(() => {\n if (!isComponentVisible) {\n resetInitialValues();\n }\n }, [isComponentVisible]);\n\n const show = () => setIsComponentVisible(true);\n\n const hide = () => {\n resetInitialValues();\n setIsComponentVisible(false);\n };\n\n const resetInitialValues = () => {\n setHours(duration.hours());\n setMinutes(duration.minutes());\n };\n\n const handleChangeComplete = () => {\n ref.current.ignoreClickOutside = true;\n };\n\n const totalMinutes = Number(hours) * 60 + Number(minutes);\n\n const setDuration = () => {\n updateAgenda(meetingId, agendaId, {\n duration_in_minutes: totalMinutes,\n })\n .then(hide)\n .catch(setFlash);\n };\n\n const handleChange = (value) => {\n const duration = moment.duration(value, 'minutes');\n\n setHours(duration.hours());\n setMinutes(duration.minutes());\n };\n\n const renderValue = () => {\n if (value) {\n return formatDuration(value);\n } else {\n return intl.formatMessage({ id: 'DurationPicker.setDuration' });\n }\n };\n\n if (!isEditable) {\n return (\n \n
\n );\n }\n\n return (\n \n
\n );\n};\n\nexport { DurationPicker };\n","import { css } from '@emotion/core';\nimport { icons, panels, fonts, colors, media } from 'styles';\n\nexport const panel = css`\n box-shadow: 0px 1.2px 3.6px rgba(0, 20, 90, 0.1), 0px 6.4px 14.4px rgba(0, 50, 97, 0.13);\n background: ${colors.white};\n padding: 22px 27px;\n position: absolute;\n top: 15px;\n z-index: 2;\n left: -5px;\n ${media.mobile} {\n width: 100%;\n position: fixed;\n top: unset;\n left: 0;\n right: 0;\n z-index: 1000;\n padding: 15px;\n bottom: 0;\n max-width: 100%;\n }\n`;\n\nexport const slider = css`\n .rangeslider {\n width: 322px;\n border-radius: 25px;\n height: 5px;\n background: #f0f0f0;\n box-shadow: none;\n margin: 0;\n max-width: 100%;\n ${media.mobile} {\n width: 100%;\n }\n }\n\n .rangeslider__fill {\n background: ${colors.cyan};\n box-shadow: none;\n }\n\n .rangeslider__labels {\n display: none;\n }\n\n .rangeslider__handle {\n background: ${colors.cyan};\n border: none;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n box-shadow: none;\n outline: none;\n\n &::after {\n display: none;\n }\n }\n`;\n\nexport const pencil = css`\n ${icons.base}\n color: ${colors.lighterGrey};\n font-size: 12px;\n margin-left: 7px;\n`;\n","export { DurationPicker } from './DurationPicker';\n","/** @jsx jsx */\n\nimport React, { memo, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { useIntl } from 'react-intl';\n\nimport { Spinner } from 'components/shared/Spinner';\nimport { MeetingDetails } from './../MeetingDetails';\nimport { StatusBadge } from 'components/shared/StatusBadge';\nimport { AlertPopup } from 'components/shared/AlertPopup';\nimport { AgendaTasksTabs } from './../AgendaTasksTabs';\n\nimport { useMeetingActions, useMeetingStore } from 'store/meetingStoreContext';\nimport { useFlashActions, useFlashStore } from 'store/flashStoreContext';\n\nimport * as styles from './EditAgendaView.styles';\n\nconst EditAgendaView = memo(({ meetingId, contactId, contactTimezone, contactTimezoneOffset, root }) => {\n const { setFlash, discardFlash } = useFlashActions();\n const { loadMeeting } = useMeetingActions();\n const { flash } = useFlashStore();\n const { meeting, loaded } = useMeetingStore();\n\n const intl = useIntl();\n\n useEffect(() => {\n loadMeeting(meetingId).catch(setFlash);\n }, []);\n\n if (!loaded) {\n return \n
\n\n {isComponentVisible && (\n \n )}\n {flash}
\n \n\n \n
\n\n \n \n \n
\n \n
\n \n
\n );\n\n const taskActions = (\n <>\n {isActive && }\n {task.id && }\n \n );\n\n if (!isEditable) return task.title;\n\n if (!isActive) {\n return (\n task.title && (\n \n {task.title}\n\n {taskActions}\n
\n )\n );\n }\n\n const hasOptions = pickerOptions.length > 0;\n\n const dropdownContent = task.id && !hasOptions ? \n \n\n {taskActions}\n\n \n \n
\n );\n});\n\nexport { EditableTaskTitle };\n","import { css } from '@emotion/core';\nimport { icons, fonts, colors } from 'styles';\n\nexport const icon = {\n pencil: css`\n ${icons.base}\n font-size: 12px;\n margin: 0 10px;\n `,\n\n trash: css`\n ${icons.base}\n color: ${colors.red};\n\n &:hover {\n color: ${colors.red};\n opacity: 0.8;\n }\n `,\n};\n\nexport const input = css`\n border: 1px solid #dfdfdf;\n background: ${colors.white};\n border-radius: 3px;\n height: 28px;\n font-size: 14px;\n padding: 6px 5px;\n color: ${colors.mediumGrey};\n width: 255px;\n max-width: 100%;\n`;\n\nexport const wrapper = (hasOptions) => css`\n padding: ${hasOptions ? '14px 8px 14px 0' : 0};\n`;\n\nexport const items = css`\n overflow: auto;\n max-height: 241px;\n`;\n\nexport const addTaskOption = css`\n display: flex;\n align-items: center;\n background: ${colors.darkGrey};\n padding: 11px 21px;\n\n &:hover {\n cursor: pointer;\n }\n\n span {\n margin-left: 13px;\n color: ${colors.black};\n font-size: 12px;\n line-height: 20px;\n }\n`;\n","export { EditableTaskTitle } from './EditableTaskTitle';\n","import React, { memo, useState, useEffect } from 'react';\nimport { useIntl } from 'react-intl';\nimport { withIntl } from '../../../utils/v2/intl';\n\nimport { Row, Col } from 'react-bootstrap';\nimport { Select } from '../../shared/Select';\nimport Multiselect from '../../shared/Select/Multiselect';\nimport { Search } from '../../shared/Search';\n\nconst Filters = memo(({ companySlug }) => {\n const intl = useIntl();\n\n const statusOptions = [\n { value: 'draft', label: intl.formatMessage({ id: 'Filters.draft' }) },\n { value: 'scheduled', label: intl.formatMessage({ id: 'Filters.scheduled' }) },\n { value: 'upcoming', label: intl.formatMessage({ id: 'Filters.upcoming' }) },\n { value: 'in_session', label: intl.formatMessage({ id: 'Filters.inSession' }) },\n { value: 'completed', label: intl.formatMessage({ id: 'Filters.completed' }) },\n { value: 'cancelled', label: intl.formatMessage({ id: 'Filters.cancelled' }) },\n { value: 'archived', label: intl.formatMessage({ id: 'Filters.archived' }) },\n ];\n\n const timeframeOptions = [\n { value: 'all', label: intl.formatMessage({ id: 'Filters.all' }) },\n { value: 'next_30_days', label: intl.formatMessage({ id: 'Filters.next30' }) },\n { value: 'next_6_months', label: intl.formatMessage({ id: 'Filters.next6' }) },\n { value: 'past_year', label: intl.formatMessage({ id: 'Filters.pastYear' }) },\n ];\n\n const preselectedStatusOptions = statusOptions.filter(({ value }) => !['archived', 'cancelled'].includes(value));\n\n let [selectedStatuses, setSelectedStatuses] = useState(preselectedStatusOptions);\n let [selectedTimeframe, setSelectedTimeframe] = useState(timeframeOptions[0]);\n let [searchTerm, setSearchTerm] = useState('');\n let [isSearching, setIsSearching] = useState(false);\n\n const handleTermChange = (event) => {\n setSearchTerm(event.target.value || '');\n };\n\n const startSearching = () => {\n setIsSearching(true);\n };\n\n const stopSearching = () => {\n setIsSearching(false);\n setSearchTerm('');\n };\n\n useEffect(() => {\n const query = $.param({\n status: selectedStatuses.filter((option) => option.value).map((option) => option.value),\n timeframe: selectedTimeframe && selectedTimeframe.value,\n search_term: searchTerm,\n });\n\n $.get(`/${companySlug}/meetings.js?${query}`);\n }, [selectedStatuses, selectedTimeframe, searchTerm]);\n\n return (\n <>\n \n
\n\n {addTaskOption}\n {dropdownContent}
\n \n
\n \n );\n});\n\nexport default withIntl(Filters);\n","/** @jsx jsx */\n\nimport React, { memo, useCallback, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { formatTime, formatDate, formatTimezoneOffset } from 'helpers/formatDateTime';\nimport { TextAreaInput } from 'components/shared/TextAreaInput';\nimport { Modal } from 'components/shared/Modal';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useDateFormatContext } from '../../../contexts/v2/DateFormatContext';\n\nimport { OrganizerPicker } from './../OrganizerPicker';\nimport Group from 'components/contacts/picker/Group';\n\nimport { useMeetingActions } from 'store/meetingStoreContext';\n\nimport * as styles from './InvitationModal.styles';\n\nconst InvitationModal = memo(({ show, meeting, onClose, onInvite }) => {\n const { userDateFormat } = useDateFormatContext();\n const { contact_meetings } = meeting;\n const { setEdits } = useMeetingActions();\n const contacts = contact_meetings.filter((item) => !item._destroy).map((item) => item.contact);\n\n const intl = useIntl();\n\n const isOrganizerContact = useCallback(\n (contact) => {\n return contact.id == meeting.calendar_contact_id && contact.calendar_connected;\n },\n [meeting]\n );\n\n const organizerContact = () => contacts.find(isOrganizerContact);\n\n const setOrganizerContact = (contact) => {\n setEdits('calendar_contact_id', contact?.id);\n };\n\n const [message, setMessage] = useState('');\n\n const handleMessageChange = (e) => setMessage(e.target.value || '');\n const handleInvite = () => onInvite(message, organizerContact?.id);\n\n const startTime = formatTime(meeting.meeting_start_time);\n const startDate = formatDate(meeting.meeting_date, userDateFormat);\n\n return (\n \n
\n\n \n \n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n \n
\n \n {meetingStatus === MEETING_STATUS.SUCCEEDED ? (\n
\n \n
\n ) : null}\n \n \n {attendeeItems} \n \n
\n \n
\n \n \n
\n );\n\n return (\n \n
\n \n \n
\n \n \n
\n \n );\n\n const startMeetingButton = (\n \n \n \n \n
\n \n );\n\n const viewableMinutes = minutes?.status == 'approved' || minutes?.document;\n const [meetingAttendeesModalIsOpen, setMeetingAttendeesModalIsOpen] = useState(false);\n\n const showMeetingAttendeesModal = () => setMeetingAttendeesModalIsOpen(true);\n const hideMeetingAttendeesModal = () => setMeetingAttendeesModalIsOpen(false);\n\n const chairmanName = chairman?.name || intl.formatMessage({ id: 'MeetingDetails.noOne' });\n\n const disableAnnotations = !meeting.smart_pack_editable;\n\n const showSaveAsPdfButton = context == 'in-review-minutes' || (isMinuteContext && minutes?.status == 'archived');\n\n const previewAgendaButtonText = agendaDocument\n ? isScheduled\n ? intl.formatMessage({ id: 'MeetingDetails.previewAgenda' })\n : intl.formatMessage({ id: 'MeetingDetails.viewAgenda' })\n : intl.formatMessage({ id: 'MeetingDetails.agendaGenerating' });\n\n const previewSmartPackButtonText = meeting.smart_pack_url\n ? isScheduled\n ? intl.formatMessage({ id: 'MeetingDetails.previewSmartPack' })\n : intl.formatMessage({ id: 'MeetingDetails.viewSmartPack' })\n : intl.formatMessage({ id: 'MeetingDetails.smartPackGenerating' });\n\n const showAgendaButton =\n (!isDraft && !isScheduled && !isMinuteContext) || meeting.documents_generating || agendaDocument;\n const showSmartPackButton = meeting.agenda_documents.length > 0 || meeting.documents_generating;\n\n const renderContent = () => (\n \n \n
\n\n \n
\n\n \n
\n\n \n \n
\n\n \n \n
\n \n {meeting.title}\n
\n\n {(isUpcoming || isScheduled || isInSession) && !isMinuteContext && meeting.meeting_url && (\n \n \n
\n \n )}\n \n
\n {meeting.meeting_type_name}\n \n
\n \n\n \n
\n\n \n
\n \n {`${formattedContactTime} ${formatTimeWithOffset(\n meeting.meeting_start_time,\n contactTimezoneOffset,\n userDateFormat\n )} (${contactTimezone} ${formatTimezoneOffset(contactTimezoneOffset)})`}\n
\n\n {showCreatorTimezone && (\n \n {`${formattedTime} ${formatTimeWithOffset(\n meeting.meeting_start_time,\n meeting.timezone_offset,\n userDateFormat\n )} (${meeting.timezone} ${formatTimezoneOffset(meeting.timezone_offset)})`}\n
\n )}\n \n
\n \n
\n {meeting.location}
\n \n \n {isInSession && adminView ? (\n \n
\n \n \n \n
\n )}\n\n {isMinuteContext && (\n \n )}\n\n {meeting.votes.length > 0 && (\n \n {showSaveAsPdfButton && (\n \n \n
\n )}\n\n {!isPseudo && (\n <>\n {showAgendaButton && (\n \n
\n \n )}\n\n {viewableMinutes && (\n \n
\n \n \n
\n\n {showSmartPackButton && (\n \n
\n \n
\n \n )}\n \n
\n \n )}\n\n {adminView || currentContactId == meeting.contact_id ? (\n <>\n \n\n \n \n
\n \n {isUpcoming && adminView ? startMeetingButton : null}\n\n {isInSession && adminView ? (\n
\n\n \n
\n );\n }\n);\n\nexport { MeetingDetailsForm };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const padded = css`\n padding: 35px 40px 0;\n ${media.mobile} {\n padding: 15px 15px 0;\n }\n`;\n\nexport const overlay = css`\n background: rgba(255, 255, 255, 0.72);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n`;\n\nexport const container = css`\n background: ${colors.white};\n border-radius: 8px;\n display: flex;\n box-shadow: 0px 4px 50px rgba(54, 71, 98, 0.12);\n align-items: center;\n padding: 16px 17px;\n`;\n\nexport const conferenceWrapper = css`\n padding-left: 25px !important;\n ${media.mobile} {\n padding-left: 0 !important;\n }\n label {\n font-size: 14px;\n color: ${colors.black};\n }\n`;\n\nexport const radioButtons = css`\n font-size: 14px;\n color: ${colors.black};\n\n .radio {\n label {\n &::after {\n background-color: ${colors.cyan};\n }\n }\n }\n\n input[type='radio']:checked + label {\n &::after {\n background-color: ${colors.cyan};\n }\n }\n\n input[type='radio']:checked + label {\n &::before {\n border-color: ${colors.cyan};\n }\n }\n`;\n\nexport const copyIcon = css`\n margin-left: 10px;\n height: 44px;\n width: 44px;\n\n .fa-copy {\n font-size: 17px;\n }\n\n ${media.mobile} {\n margin-left: 0px;\n margin-top: 10px;\n }\n`;\n\nexport const colBigLeft = css`\n padding-right: 25px !important;\n padding-bottom: 0 !important;\n ${media.tablet} {\n padding-right: 10px !important;\n padding-bottom: 20px !important;\n }\n\n ${media.mobile} {\n padding-right: 0 !important;\n }\n`;\n\nexport const meetTypeInput = css`\n ${media.tablet} {\n flex-grow: 1;\n padding-right: 10px !important;\n padding-bottom: 20px !important;\n }\n\n ${media.mobile} {\n padding-right: 0 !important;\n }\n`;\n\nexport const meetDateInput = css`\n ${media.tablet} {\n flex-grow: 1;\n }\n`;\n\nexport const twoInputsWrapper = css`\n ${media.tablet} {\n flex-wrap: wrap;\n }\n`;\n","export { MeetingDetailsForm } from './MeetingDetailsForm';\n","/** @jsx jsx */\n\nimport React, { memo, useMemo, useState, useEffect, useRef } from 'react';\nimport { jsx } from '@emotion/core';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport * as ActionCable from '@rails/actioncable';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { StatusBadge } from 'components/shared/StatusBadge';\nimport { MeetingDetails } from './MeetingDetails';\nimport { AgendaTasksTabs } from './AgendaTasksTabs';\nimport { Spinner } from 'components/shared/Spinner';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\nimport { useMeetingActions, useMeetingStore } from 'store/meetingStoreContext';\nimport { useFlashActions, useFlashStore } from 'store/flashStoreContext';\nimport { getMeetingTypeOptions } from 'helpers/meetingTypes';\nimport * as styles from './MeetingSpace.styles';\n\nexport default memo(\n ({\n meetingId,\n meetingTypes,\n timezoneOptions,\n adminView,\n root,\n currentContactId,\n currentContactName,\n contactTimezone,\n contactTimezoneOffset,\n }) => {\n const intl = useIntl();\n\n const meetingTypeOptions = useMemo(() => {\n return getMeetingTypeOptions(meetingTypes);\n }, []);\n\n const { flash } = useFlashStore();\n const { setFlash } = useFlashActions();\n const { meeting, loaded, edits } = useMeetingStore();\n const { arrangeContext, loadMeeting, updateMeeting, setErrors, discardEdits } = useMeetingActions();\n const { isPseudo } = useMeetingStatus(meeting.status);\n\n const { current: channel } = useRef({\n channel: 'MeetingsChannel',\n meeting_id: meetingId,\n });\n\n useEffect(() => {\n loadMeeting(meetingId).catch(setFlash);\n }, []);\n\n const handleCableUpdate = (response) => {\n arrangeContext(meetingId, response);\n };\n\n useEffect(() => {\n let cable = ActionCable.createConsumer();\n let subscription = cable.subscriptions.create(channel, {\n received: handleCableUpdate,\n });\n\n return () => {\n cable.subscriptions.remove(subscription);\n };\n }, []);\n\n if (!loaded) {\n return \n {!isDisabled ? (\n <>\n
\n \n \n \n \n \n \n \n \n \n
\n )}\n\n {isZoomMeeting && (\n
\n
\n \n ) : (\n \n
\n \n \n
\n\n \n
\n\n {Object.keys(availableLanguages).length > 0 && (\n \n
\n )}\n\n \n
\n\n \n
\n \n\n \n
\n )}\n\n {showMeetingUrl && (\n \n
\n\n \n
\n \n
\n )}\n \n \n
\n \n
\n )}\n \n \n
\n )}\n\n {showNotPublishedMessage && (\n \n
\n )}\n \n \n
\n
\n );\n});\n\nexport { Actions };\n","import { css } from '@emotion/core';\nimport { panels } from 'styles';\n\nexport const actions = css`\n ${panels.base}\n padding: 20px 15px 10px;\n margin-top: 15px;\n`;\n","export { Actions } from './Actions';\n","/** @jsx jsx */\n\nimport React, { memo, useRef, useMemo, useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { AgendaAndTasksStep } from './../AgendaAndTasksStep';\nimport { Spinner } from 'components/shared/Spinner';\nimport { Steps } from 'components/shared/Steps';\nimport { AlertPopup } from 'components/shared/AlertPopup';\nimport { Step } from './Step';\nimport { StatusBadge } from 'components/shared/StatusBadge';\nimport { MeetingDetails } from './../MeetingDetails';\nimport { MeetingDetailsForm } from './../MeetingDetailsForm';\nimport { AgendaTasksTabs } from './../AgendaTasksTabs';\nimport { AttendeesStep } from './../AttendeesStep';\nimport { useVisibility } from 'hooks/useVisibility';\nimport { InvitationModal } from './../InvitationModal';\nimport MeetingSpace from './../MeetingSpace';\nimport { useSteps } from 'hooks/useSteps';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\nimport { useActionCable } from 'hooks/useActionCable';\nimport { useMeetingActions, useMeetingStore } from 'store/meetingStoreContext';\nimport { useFlashActions, useFlashStore } from 'store/flashStoreContext';\n\nimport { getMeetingTypeOptions } from 'helpers/meetingTypes';\n\nconst MultistepForm = memo(\n ({\n meetingId,\n meetingTypes,\n timezoneOptions,\n currentContactId,\n currentContactName,\n contactTimezone,\n contactTimezoneOffset,\n zoomEnabled,\n root,\n availableLanguages,\n contactLanguage,\n }) => {\n const intl = useIntl();\n\n const meetingTypeOptions = useMemo(() => {\n return getMeetingTypeOptions(meetingTypes);\n }, []);\n\n const { current: stepMap } = useRef({\n 1: intl.formatMessage({ id: 'MultistepForm.meetingDetails' }),\n 2: intl.formatMessage({ id: 'MultistepForm.attendees' }),\n 3: intl.formatMessage({ id: 'MultistepForm.agendaTasks' }),\n });\n\n const { steps, changeStep, advanceStep, jumpStep } = useSteps(stepMap);\n const { flash } = useFlashStore();\n const { setFlash, discardFlash } = useFlashActions();\n const { meeting, loaded, edits } = useMeetingStore();\n const { discardEdits, inviteAttendees, arrangeContext } = useMeetingActions();\n const { isDraft, isScheduled, isUpcoming, isArchived } = useMeetingStatus(meeting.status);\n const {\n showComponent: showModal,\n hideComponent: hideModal,\n isComponentVisible: isModalVisible,\n } = useVisibility(false);\n\n const { setErrors, setMeeting, loadMeeting, createMeeting, updateMeeting } = useMeetingActions();\n\n useActionCable('MeetingsChannel', { meeting_id: meetingId }, (response) => arrangeContext(meetingId, response));\n\n useEffect(() => {\n if (meetingId) {\n loadMeeting(meetingId).then(selectStep).catch(setFlash);\n } else {\n setMeeting({ contacts: [] });\n }\n }, []);\n\n useEffect(() => {\n if (!meeting.id) return;\n\n const URL = getAppropriateURL();\n\n window.history.replaceState({}, null, URL);\n }, [meeting]);\n\n useEffect(() => discardEdits(), [steps.current]);\n\n const companyId = getCompanySlug();\n\n const getAppropriateURL = () => {\n if (isDraft || isScheduled || isUpcoming) {\n return `/${companyId}/meetings/${meeting.slug}/edit`;\n } else {\n return `/${companyId}/meetings/${meeting.slug}`;\n }\n };\n\n const upsertMeeting = (handleUpsert) => {\n if (meeting.id) {\n updateMeeting(meeting.id, edits).then(handleUpsert).catch(setErrors);\n } else {\n createMeeting(edits).then(handleUpsert).catch(setErrors);\n }\n };\n\n const selectStep = (meeting) => {\n if (!meeting.valid) return;\n\n const nextStep = meeting.status == 'scheduled' ? 3 : 2;\n\n jumpStep(nextStep);\n };\n\n const [zoomPopupVisible, setZoomPopupVisible] = useState(false);\n const [saveAndAdvance, setSaveAndAdvance] = useState(false);\n\n const showZoomPopup = () => setZoomPopupVisible(true);\n const hideZoomPopup = () => setZoomPopupVisible(false);\n\n const showZoomConfirmation = meeting.id && meeting.config == 'zoom' && edits.config != 'zoom';\n\n const handleMeetingDetailsSave = () => {\n if (showZoomConfirmation) {\n setSaveAndAdvance(false);\n showZoomPopup();\n } else {\n handleSaveDraft();\n }\n };\n\n const handleMeetingDetailsSaveAndAdvance = () => {\n if (showZoomConfirmation) {\n setSaveAndAdvance(true);\n showZoomPopup();\n } else {\n handleSaveAndAdvance();\n }\n };\n\n const hideZoomPopupAndSave = () => {\n hideZoomPopup();\n\n saveAndAdvance ? handleSaveAndAdvance() : handleSaveDraft();\n };\n\n const handleSaveDraft = () => upsertMeeting(navigateToMeetings);\n const handleSaveAndAdvance = () => upsertMeeting(advanceStep);\n\n const handleInviteClick = () => {\n const hasContacts = edits.contact_meetings.filter((item) => !item._destroy).length > 0;\n\n if (hasContacts) {\n if (steps.current === 2) {\n inviteMeetingAttendees();\n }\n showModal();\n } else {\n setFlash(intl.formatMessage({ id: 'MultistepForm.addAttendeesFlash' }));\n }\n };\n\n const inviteMeetingAttendees = (params = {}) => inviteAttendees(edits.id, { ...edits, ...params });\n\n const handleInvite = (message, organizerId) => {\n inviteMeetingAttendees({\n ...edits,\n status: 'scheduled',\n email_message: message,\n })\n .then(hideModal)\n .then(advanceStep)\n .catch(setFlash);\n };\n\n // MISC\n const navigateToMeetings = () => {\n window.location.assign(`/${companyId}/meetings`);\n };\n\n const stepsIndicator = (\n \n \n {saveDraftLabel}\n \n\n \n
\n \n \n\n \n
\n {flash}
\n \n\n {meeting.id && (\n \n
\n )}\n\n {steps.current === 1 && (\n \n {prepend}\n {steps}\n {children}\n
\n\n {actions}\n \n );\n});\n\nexport { Step };\n","import { css } from '@emotion/core';\nimport { panels, media } from 'styles';\n\nexport const panel = css`\n ${panels.base}\n padding: 43px 0 45px 0;\n`;\n","export { Step } from './Step';\n","export { MultistepForm } from './MultistepForm';\n","/** @jsx jsx */\n\nimport React, { useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Avatar from 'components/shared/Avatar';\nimport { ContactPicker } from 'components/shared/ContactPicker';\n\nimport { useClickOutside } from 'hooks/useClickOutside';\n\nimport * as styles from './OrganizerPicker.styles';\n\nconst OrganizerPicker = ({ organizer, contacts, onOrganizerChange }) => {\n const isSelected = (contact) => {\n return contact.id === organizer?.id;\n };\n\n const intl = useIntl();\n\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside();\n\n const showDropdown = () => setIsComponentVisible(true);\n const hideDropdown = () => setIsComponentVisible(false);\n\n const onToggleOption = (contact) => {\n const newOrganizer = isSelected(contact) ? null : contact;\n\n onOrganizerChange(newOrganizer);\n hideDropdown();\n };\n\n const chevronStyles = [styles.chevron.base, isComponentVisible && styles.chevron.flipped];\n\n const organizerContacts = useCallback(() => {\n return contacts.filter((contact) => contact.calendar_connected);\n }, [contacts]);\n\n const renderOrganizer = () => {\n if (organizer) {\n return (\n <>\n \n
\n );\n }\n };\n\n return (\n \n
\n );\n};\n\nexport { OrganizerPicker };\n","import { css } from '@emotion/core';\nimport { panels, colors, fonts } from 'styles';\n\nexport const component = css`\n display: flex;\n align-items: baseline;\n position: relative;\n`;\n\nexport const organizer = css`\n color: ${colors.black};\n display: flex;\n align-items: center;\n line-height: 1;\n cursor: pointer;\n`;\n\nexport const chevron = {\n base: css`\n margin-left: 5px;\n font-weight: 400;\n color: ${colors.black};\n font-size: 10px;\n transition: transform 0.2s ease-in-out;\n `,\n\n flipped: css`\n transform: rotate(180deg);\n `,\n};\n\nexport const picker = css`\n ${panels.base}\n box-shadow: 0px 1.2px 3.6px rgba(0, 20, 90, 0.1), 0px 6.4px 14.4px rgba(0, 50, 97, 0.13);\n width: 346px;\n background: ${colors.white};\n position: absolute;\n top: 20px;\n z-index: 2;\n`;\n\nexport const dropdown = css`\n position: static;\n box-shadow: none;\n\n .react-picker-option {\n padding-left: 10px;\n padding-right: 5px;\n\n &.disabled {\n cursor: default;\n color: ${colors.lightGrey};\n }\n }\n\n .react-items-wrapper {\n padding-right: 0;\n }\n`;\n","export { OrganizerPicker } from './OrganizerPicker';\n","/** @jsx jsx */\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport Modal from 'react-bootstrap/Modal';\nimport { jsx } from '@emotion/core';\nimport WebViewer from '@pdftron/webviewer';\nimport PropTypes from 'prop-types';\nimport * as styles from './PdfViewer.styles';\nimport { useAnnotationContext } from '../../../store/annotationContext';\nimport { ACTION_ADD, ACTION_MODIFY, ACTION_DELETE, disabledElements } from './constants';\nimport PdfViewerSidebar from '../PdfViewerSidebar';\nimport SmartPackPdfModal from '../SmartPackPdfModal/SmartPackPdfModal';\nimport { Spinner } from 'components/shared/Spinner';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport PdfViewerTopbar from 'components/v2/shared/PdfViewerTopbar';\nimport BasePdfViewer from 'components/v2/shared/PdfViewer';\nimport { getResourceGID } from 'helpers/graphql';\nimport { useMeetingSmartPackAnalyticsQuery } from 'data/v2/queries/MeetingSmartPackAnalyticsQuery';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport moment from 'moment';\n\nconst PdfViewer = ({\n meeting,\n agendas,\n author,\n show,\n onHide,\n onToggleAgenda,\n disableAnnotations,\n showCompletedInfo,\n ahoyProperties,\n currentContactId,\n}) => {\n const intl = useIntl();\n const { isDesktop } = useWindowDimensions();\n\n const publicAnnotationsRef = useRef(false);\n const [publicAnnotations, setPublicAnnotations] = useState(false);\n const [currentPage, setCurrentPage] = useState(1);\n const [viewerInstance, setViewerInstance] = useState(null);\n const [viewerUI, setViewerUI] = useState(null);\n const [annotationManager, setAnnotationManager] = useState(null);\n const [agendaDlModalOpen, setAgendaDlModalOpen] = useState(false);\n const [showSpinner, setShowSpinner] = useState(true);\n\n const [timeOpened, setTimeOpened] = useState(null);\n const [isSidebarVisible, setIsSidebarVisible] = useState(isDesktop);\n const toggleSidebar = () => setIsSidebarVisible((prev) => !prev);\n\n const togglePublicAnnotations = () => {\n publicAnnotationsRef.current = !publicAnnotations;\n setPublicAnnotations(!publicAnnotations);\n };\n\n const trackTotalReadTime = () => {\n const timeViewedInSeconds = moment().diff(timeOpened, 'seconds');\n ahoy.track('smart_pack_viewed', { ...ahoyProperties, timeViewedInSeconds });\n };\n\n useEffect(() => {\n const timeTracker = (e) => {\n e.preventDefault();\n trackTotalReadTime();\n };\n\n window.addEventListener('beforeunload', timeTracker);\n\n return () => {\n window.removeEventListener('beforeunload', timeTracker);\n };\n }, [timeOpened]);\n\n useEffect(() => {\n if (show) {\n setTimeOpened(moment());\n } else if (timeOpened) {\n trackTotalReadTime();\n }\n }, [show]);\n\n const {\n data: analyticsData,\n loading: isLoadingAnalytics,\n refetch: refetchAnalytics,\n } = useMeetingSmartPackAnalyticsQuery({\n skip: !show,\n fetchPolicy: 'network-only',\n variables: { id: getResourceGID('Meeting', meeting.id) },\n });\n\n const {\n initialAnnotations,\n addedAnnotation,\n updatedAnnotation,\n removedAnnotation,\n addAnnotation,\n modifyAnnotation,\n removeAnnotation,\n refetchAnnotations,\n } = useAnnotationContext();\n\n const drawRemoteAnnotation = async (remoteAnnotation) => {\n const [annotation] = await annotationManager.importAnnotationCommand(remoteAnnotation.data);\n annotation.authorId = remoteAnnotation.contactId;\n annotationManager.redrawAnnotation(annotation);\n hideAnnotation(annotation);\n };\n\n const hideAnnotation = (annotation) => {\n if (publicAnnotations) return;\n\n annotationManager.hideAnnotation(annotation);\n };\n\n // Handle annotation add through the subscription\n useEffect(() => {\n if (addedAnnotation && viewerInstance) {\n drawRemoteAnnotation(addedAnnotation);\n }\n }, [addedAnnotation]);\n\n // Handle annotation update through the subscription\n useEffect(() => {\n if (updatedAnnotation && viewerInstance) {\n drawRemoteAnnotation(updatedAnnotation);\n }\n }, [updatedAnnotation]);\n\n // Handle annotation remove through the subscription\n useEffect(() => {\n if (removedAnnotation && viewerInstance) {\n const command = `\n {renderOrganizer()}\n \n
\n\n {renderPicker()}\n \n \n {showCompletedInfo && (\n
\n \n
\n )}\n \n \n \n {intl.formatMessage({ id: 'AgendaItem.assignee' })}: \n {assignee || intl.formatMessage({ id: 'OrganizerPicker.none' })}\n \n\n 0} className='tw-mt-3 empty:tw-hidden'>\n \n \n
\n \n
\n\n \n {number} {title}\n
\n\n \n \n \n\n 0} visibleClass='tw-flex'>\n \n\n \n \n
\n \n \n {duration} {intl.formatMessage({ id: 'AgendaItem.minutes' })}\n \n\n \n \n
\n\n {description}
\n {children}
\n \n );\n};\n\nAgendaItem.propTypes = {\n number: PropTypes.string,\n title: PropTypes.string,\n description: PropTypes.string,\n duration: PropTypes.number,\n assignee: PropTypes.string,\n documents: PropTypes.array,\n children: PropTypes.node,\n isRoot: PropTypes.bool,\n isCompleted: PropTypes.bool,\n isToggleable: PropTypes.bool,\n onToggle: PropTypes.func,\n onDocumentClick: PropTypes.func,\n};\n\nexport default AgendaItem;\n","export { default } from './AgendaItem';\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { intl } from 'contexts/v2/TranslationContext';\nimport { FiFile } from 'react-icons/fi';\n\nconst AgendaItemDocumentList = ({ documents, onClick }) => (\n \n \n
\n);\n\nAgendaItemDocumentList.propTypes = {\n documents: PropTypes.array,\n onClick: PropTypes.func,\n};\n\nexport default AgendaItemDocumentList;\n","export { default } from './AgendaItemDocumentList';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Box from 'components/v2/shared/Box';\nimport { formatDateTime } from 'helpers/formatDateTime';\nimport { intl } from 'contexts/v2/TranslationContext';\n\nconst DATE_TIME_FORMAT = 'DD MMM YY, hh:mm A';\n\nconst AnalyticsItem = ({ contact, rsvpStatus, annotationCount, firstOpenedAt, lastOpenedAt, totalReadTime }) => (\n {intl.formatMessage({ id: 'AgendaItem.assets' })}
\n\n {documents.map((document) => (\n \n
\n \n
\n\n {contact?.name}
\n {rsvpStatus}
\n \n
\n \n {intl.formatMessage({ id: 'AnalyticsItem.annotationCount' })}: {annotationCount}\n
\n\n \n {intl.formatMessage({ id: 'AnalyticsItem.firstOpenedAt' })}: {formatDateTime(firstOpenedAt, DATE_TIME_FORMAT)}\n
\n\n \n {intl.formatMessage({ id: 'AnalyticsItem.lastOpenedAt' })}: {formatDateTime(lastOpenedAt, DATE_TIME_FORMAT)}\n
\n\n \n {intl.formatMessage({ id: 'AnalyticsItem.totalReadTime' })}: {totalReadTime}\n
\n \n \n {agendaTree['root'].map(renderAgendaItem)}\n \n\n \n
\n\n {isAnnotatable && (\n \n
\n )}\n \n );\n};\n\nPdfViewerSidebar.propTypes = {\n isVisible: PropTypes.bool,\n isAnnotatable: PropTypes.bool,\n isLoadingAnalytics: PropTypes.bool,\n meeting: PropTypes.object.isRequired,\n agendas: PropTypes.array,\n analytics: PropTypes.array,\n scrollToPage: PropTypes.func,\n onToggleAgenda: PropTypes.func,\n};\n\nexport default PdfViewerSidebar;\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nexport const container = css`\n width: 320px;\n background-color: ${colors.white};\n\n @media (max-width: 810px) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n border-bottom: ${colors.silver} 1px solid;\n }\n`;\n\nexport const draftBanner = css`\n color: ${colors.orange};\n background-color: ${colors.lightOrange};\n font-size: 12px;\n padding: 15px;\n border: solid 1px ${colors.orange};\n border-radius: 5px;\n margin: 10px;\n\n @media (max-width: 810px) {\n display: none;\n }\n`;\n\nexport const topList = css`\n ${fonts.semiBold}\n color: ${colors.black};\n font-size: 12px;\n padding: 15px 35px;\n list-style: none;\n height: 100%;\n overflow-y: auto;\n\n @media (max-width: 810px) {\n display: none;\n }\n`;\n\nexport const mobileList = {\n base: css`\n width: 100vw;\n height: 100%;\n position: absolute;\n top: 53px;\n padding-top: 25px;\n padding-right: 25px;\n background-color: ${colors.white};\n z-index: 10;\n transform: translateY(100%);\n transition: transform 250ms ease;\n list-style: none;\n `,\n\n open: css`\n transform: translateY(0);\n `,\n};\n\nexport const backButton = css`\n ${fonts.bold}\n font-size: 14px;\n background-color: ${colors.darkGrey};\n width: 100%;\n height: 60px;\n color: ${colors.purple};\n border: none;\n text-align: left;\n padding: 0 20px;\n\n @media (max-width: 1224px) {\n height: 52px;\n }\n`;\n\nexport const docList = css`\n padding: 15px 0px 0px 20px;\n list-style: none;\n border-bottom: ${HexToRgba(colors.lightGrey, 40)} 1px solid;\n margin-bottom: 15px;\n margin-left: 15px;\n`;\n\nexport const docItem = css`\n display: flex;\n height: 40px;\n color: ${colors.purple};\n align-items: center;\n margin-bottom: 5px;\n border-radius: 4px;\n padding: 0 20px;\n transform: translateX(-20px);\n\n span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &:hover {\n background-color: ${colors.purple};\n color: ${colors.white};\n }\n`;\n\nexport const closeButton = css`\n border: none;\n background: transparent;\n position: absolute;\n top: 18px;\n right: 15px;\n width: 40px;\n height: 40px;\n padding: 0;\n`;\n\nexport const downloadButton = css`\n border: none;\n width: 50px;\n cursor: pointer;\n height: 52px;\n display: none;\n background-color: ${colors.white};\n\n @media (max-width: 810px) {\n display: block;\n }\n\n i {\n color: ${colors.cyan};\n }\n`;\n\nexport const tocButton = css`\n border: none;\n width: 50px;\n cursor: pointer;\n height: 52px;\n display: none;\n background-color: ${colors.purple};\n\n @media (max-width: 810px) {\n display: block;\n }\n\n i {\n color: ${colors.white};\n }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nconst Tabs = ({ currentTab, tabs = {}, onClick = () => {} }) => (\n \n
\n \n
\n \n {task.title}\n
\n\n \n | \n | \n | \n | \n | \n | \n |
|---|
\n
\n );\n });\n\n return \n
\n {task.title}
\n \n
{tableBody}
;\n};\n","/** @jsx jsx */\n\nimport React, { memo, useCallback } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Placeholder } from 'components/shared/Placeholder';\nimport { ReactComponent as TasksIcon } from 'images/icons/no-contacts.svg';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\n\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\n\nimport { TaskTableDesktop } from './TaskTableDesktop';\nimport { TaskTableMobile } from './TaskTableMobile';\n\nimport * as styles from './index.styles';\nimport { utils } from 'styles';\n\nconst TasksTable = memo(\n ({ tasks, agendas, onAdd, onEdit, onDelete, onToggle, adminView, editView, meetingStatus, currentContactId }) => {\n const { isEditable, isInSession } = useMeetingStatus(meetingStatus);\n const adminAccess = adminView && (isEditable || isInSession);\n const editAccess = editView && (isEditable || isInSession);\n const { isDesktop } = useWindowDimensions();\n\n const showTasks = isDesktop ? (\n \n \n
\n\n {isDesktop && adminAccess ? (\n \n
\n\n \n\n {tasks.length > 0 ? (\n showTasks\n ) : (\n \n
\n\n {isDesktop && adminAccess ? (\n \n \n
\n )}\n {!isDesktop && adminAccess ? (\n \n \n
\n ) : null}\n \n );\n }\n);\n\nexport { TasksTable };\n","export { TasksTable } from './TasksTable';\n","import { css } from '@emotion/core';\nimport { tables, fonts, colors, media } from 'styles';\n\nexport const tableRow = (isLast, isCompleted) => css`\n ${tables.tableRow(isLast)}\n background: ${isCompleted ? colors.lightCyan : colors.transparent};\n`;\n\nexport const tableHeader = (width) => css`\n ${tables.tableHeader(width)}\n padding: 0;\n`;\n\nexport const checkmark = (checked, isActive) => css`\n background: ${checked ? colors.cyan : colors.white};\n z-index: 2;\n border: 1px solid;\n border-color: ${checked ? 'transparent' : colors.lighterGrey};\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n ${isActive &&\n `\n &:hover {\n cursor: pointer;\n border-color: ${colors.cyan};\n }\n `}\n`;\n\nexport const table = css`\n ${tables.table}\n padding: 0 50px;\n width: 100%;\n`;\n\nexport const completed = css`\n color: ${colors.cyan};\n letter-spacing: 0.1em;\n`;\n\nexport const tableCell = css`\n ${tables.tableCell}\n padding: 12px 5px;\n border-bottom: 1px solid ${colors.separator};\n font-size: 16px;\n\n &:last-of-type {\n padding-right: 50px;\n }\n\n &:first-of-type {\n padding-left: 50px;\n }\n`;\n\nexport const deleteIcon = css`\n color: ${colors.lightGrey};\n\n &:hover {\n cursor: pointer;\n color: ${colors.cyan};\n }\n`;\n\nexport const tableHeading = css`\n ${fonts.bold}\n font-size: 22px;\n padding: 25px 19px 25px 52px;\n margin: 0;\n ${media.tablet} {\n padding-left: 15px;\n }\n`;\n\nexport const title = (isCompleted) => css`\n position: relative;\n color: ${isCompleted ? colors.cyan : colors.purple};\n\n &:after {\n position: absolute;\n content: '';\n left: 0;\n bottom: 2px;\n height: 1px;\n display: block;\n width: 100%;\n border-bottom: 1px solid ${isCompleted ? colors.cyan : colors.purple};\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const taskItem_mobile = css`\n padding: 20px 15px;\n background: ${colors.white};\n box-shadow: 2px 4px 4px rgba(223, 223, 223, 0.25);\n border-radius: 4px;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n`;\n\nexport const taskItem_body_mobile = css`\n flex-grow: 1;\n padding-right: 10px;\n`;\n\nexport const taskItem_title_mobile = css`\n color: ${colors.black};\n font-weight: 600;\n font-size: 16px;\n line-height: 22px;\n text-transform: capitalize;\n`;\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { ReactComponent as VoteCheckmarkIcon } from 'images/icons/vote-checkmark.svg';\n\nimport { Viewer } from 'components/votes/Viewer/Viewer';\n\nimport * as styles from './VotingDrawer.styles';\n\nconst VotingDrawer = memo(({ votes, show, hide, previewDocument }) => {\n const [activeVote, setActiveVote] = useState(votes[0]);\n\n const changeActiveVote = (vote) => setActiveVote(vote);\n const isVoteActive = (vote) => activeVote == vote;\n\n const renderVoteList = votes.map((vote) => {\n const handleVoteChange = changeActiveVote.bind(this, vote);\n\n return (\n \n
\n )}\n \n );\n});\n\nexport { VotingDrawer };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const votingDrawer = css`\n background-color: #fff;\n display: block;\n position: fixed;\n transition: transform .17s ease-in-out;\n z-index: 9999;\n will-change: transform;\n top: 0;\n bottom: 0;\n right: 0;\n width: 962px;\n transform: translate3d(0, 0, 0);\n box-shadow: -20px 4px 50px rgba(54, 71, 98, 0.25);\n\n .close-icon {\n padding: 15px;\n color: ${colors.black};\n cursor: pointer;\n }\n\n .heading {\n width: 100%;\n padding: 23px 36px 32px 36px;\n\n .name {\n ${fonts.bold}\n font-size: 20px;\n color: ${colors.grey};\n line-height: 28px;\n }\n }\n\n .wrapper {\n height: 100%;\n\n .row,\n .side-nav,\n .nav,\n .main-content {\n height: 100%;\n }\n }\n\n .wrapper {\n .side-nav .nav {\n border: 1px solid ${colors.grey};\n\n .nav-link {\n background: ${colors.white};\n padding: 12px 36px;\n border-bottom: 1px solid ${colors.grey};\n font-size: 14px;\n color: $headingColor;\n border-radius: 0;\n line-height: 20px;\n display: flex;\n align-items: center;\n\n img {\n display: none;\n width: 12px;\n height: auto;\n }\n\n &.active, &.completed {\n color: ${colors.cyan};\n }\n\n &.active {\n background: rgba(0, 186, 198, 0.1);\n }\n\n &.completed {\n padding-left: 12px;\n\n img {\n display: block;\n }\n }\n }\n }\n\n .tab-pane {\n height: 100vh;\n }\n\n .main-content {\n border: 1px solid ${colors.grey};\n border-left: none;\n\n .header {\n ${fonts.bold}\n font-size: 16px;\n line-height: 28px;\n color: ${colors.grey};\n }\n\n .stats {\n border-radius: 4px;\n height: 20px;\n line-height: 20px;\n background: ${colors.cyan};\n color: ${colors.white}\n padding: 0 12px;\n font-size: 12px;\n }\n\n .sync-btn:hover {\n i {\n color: ${colors.cyan};\n }\n }\n\n .reso-container {\n overflow: auto;\n padding-right: 60px;\n max-height: calc(100vh - 215px);\n\n .resolution {\n padding-right: 0;\n }\n\n .vote-results {\n .col-md-8 {\n max-width: 60%;\n flex: 0 0 60%;\n }\n\n .col-md-4 {\n max-width: 40%;\n flex: 0 0 40%;\n }\n }\n }\n }\n }\n}\n`;\n","export { VotingDrawer } from './VotingDrawer';\n","/** @jsx jsx */\n\nimport React, { memo, useState, useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport { Row, Col } from 'react-bootstrap';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { Input } from 'components/shared/Input';\nimport { TextAreaInput } from 'components/shared/TextAreaInput';\nimport { RadioButton } from 'components/shared/RadioButton';\nimport { CheckBox } from 'components/shared/CheckBox';\nimport { ZoomMeetingsDropdown } from '../ZoomMeetingsDropdown';\n\nimport { useMeetingStore, useMeetingActions } from 'store/meetingStoreContext';\n\nimport { getAttributes } from 'helpers/getAttributes';\n\nimport * as styles from './ZoomDetailsForm.styles';\n\nconst ZoomDetailsForm = memo(({}) => {\n const { edits: meeting } = useMeetingStore();\n const { setEdits, setZoomEdits } = useMeetingActions();\n\n const intl = useIntl();\n\n const zoomMeeting = meeting.zoom_meeting;\n\n const [showPasscodeInput, setShowPasscodeInput] = useState(zoomMeeting.password?.length > 0);\n const [showMeetingsDropdown, setShowMeetingsDropdown] = useState(false);\n\n const toggleShowPasscodeInput = () => {\n if (showPasscodeInput) {\n setShowPasscodeInput(false);\n\n setZoomEdits('password', null);\n } else {\n setShowPasscodeInput(true);\n }\n };\n\n const toggleShowMeetingsDropdown = () => {\n if (showMeetingsDropdown) {\n setEdits('zoom_meeting_id', null);\n }\n\n setShowMeetingsDropdown(!showMeetingsDropdown);\n };\n\n const handleChange = useCallback((event) => {\n let inputValue = event.target.value;\n\n if (inputValue === 'true') {\n inputValue = true;\n } else if (inputValue === 'false') {\n inputValue = false;\n }\n\n setZoomEdits(event.target.name, inputValue);\n }, []);\n\n const handleDescriptionChange = useCallback((event) => {\n if (event.target.value.length > 2000) return;\n\n setZoomEdits('agenda', event.target.value);\n }, []);\n\n const handlePasswordChange = useCallback((event) => {\n if (event.target.value.length > 10) return;\n\n setZoomEdits('password', event.target.value);\n }, []);\n\n const handleMeetingIdChange = useCallback(\n (event, onMeetingIdChange) => {\n if (event.value == meeting.zoom_meeting_id) {\n setEdits('zoom_meeting_id', '');\n } else {\n setEdits('zoom_meeting_id', event.value);\n }\n\n onMeetingIdChange();\n },\n [meeting.zoom_meeting_id]\n );\n\n const handleCheckBoxChange = useCallback((event) => {\n setZoomEdits(event.target.name, event.target.checked);\n }, []);\n\n const handleAutoRecordingChange = useCallback((event) => {\n let inputValue = event.target.checked;\n\n if (inputValue) {\n inputValue = 'local';\n } else {\n inputValue = 'none';\n }\n\n setZoomEdits('auto_recording', inputValue);\n }, []);\n\n return (\n \n \n
\n\n \n
\n \n
\n \n
\n\n {renderVoteList}
\n \n
\n \n \n\n \n
\n\n {showMeetingsDropdown && (\n
\n );\n});\n\nexport { ZoomDetailsForm };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const container = css`\n label {\n font-size: 12px;\n color: ${colors.black};\n }\n\n textarea {\n height: 100px;\n }\n\n .zoom-wrapper {\n margin-top: 30px;\n\n h4 {\n ${fonts.regular}\n font-size: 14px;\n letter-spacing: 0.1em;\n width: 100%;\n text-align: center;\n text-transform: uppercase;\n border-bottom: 1px solid ${colors.headingGrey};\n line-height: 0.1em;\n margin: 10px 0 20px;\n }\n\n h4 span {\n background: #fff;\n padding: 0 10px;\n }\n\n i {\n color: ${colors.black};\n font-size: 12px;\n margin-top: 5px;\n }\n }\n\n .zoom-check-box {\n margin: 0px 0px 10px 4px;\n }\n\n .radio {\n label {\n &::after {\n background-color: ${colors.cyan};\n }\n }\n\n input[type='radio']:checked + label {\n &::after {\n background-color: ${colors.cyan};\n }\n }\n\n input[type='radio']:checked + label {\n &::before {\n border-color: ${colors.cyan};\n }\n }\n }\n`;\n\nexport const radioButton = css`\n label {\n font-size: 14px !important;\n }\n`;\n","export { ZoomDetailsForm } from './ZoomDetailsForm';\n","/** @jsx jsx */\n\nimport React, { memo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { HighlightTag } from 'components/shared/HighlightTag';\nimport { Dropdown } from 'components/shared/Dropdown';\nimport { DropdownOption } from 'components/shared/DropdownOption';\n\nimport Highlighter from 'react-highlight-words';\n\nimport { trackPromise } from 'react-promise-tracker';\nimport axios from 'axios';\n\nimport * as styles from './ZoomMeetingsDropdown.styles';\n\nconst ZoomMeetingsDropdown = memo(({ selectedValue, onSelect }) => {\n const [zoomMeetings, setZoomMeetings] = useState(null);\n\n const intl = useIntl();\n\n const fetchZoomMeetings = () => {\n const apiURL = `/api/${getCompanySlug()}/v1/zoom_meetings.json`;\n\n const promise = axios\n .get(apiURL)\n .then((response) => response.data)\n .then(setZoomMeetings);\n\n return trackPromise(promise);\n };\n\n useEffect(() => {\n fetchZoomMeetings();\n }, []);\n\n const getZoomMeetingLabel = () => zoomMeetings?.find((meeting) => meeting?.value === selectedValue)?.label;\n\n let [isOpen, setIsOpen] = useState(false);\n let [searchTerm, setSearchTerm] = useState('');\n\n const handleInputChange = (event) => setSearchTerm(event.target.value || '');\n const handleFocus = () => setIsOpen(true);\n const handleBlur = () => setIsOpen(false);\n\n const regex = new RegExp(searchTerm, 'gi');\n const pickerOptions = zoomMeetings?.filter((option) => option.label.match(regex));\n const hasOptions = pickerOptions && pickerOptions.length > 0;\n\n const checkmark = (\n \n \n\n
\n )}\n \n
\n\n \n \n \n
\n\n \n
\n\n \n\n \n
\n\n
\n \n \n
\n\n \n \n \n
\n\n \n \n
\n
\n\n {showPasscodeInput && (\n \n \n
\n
\n\n \n \n \n
\n
\n\n \n\n \n \n
\n \n \n \n
\n
\n\n \n \n
\n \n
\n\n \n
\n\n \n
\n \n \n
\n );\n\n const renderOption = (meeting) => {\n const key = `meeting-picker-${meeting.value}`;\n const onClick = onSelect.bind(this, meeting, handleBlur);\n const isSelected = meeting.value === selectedValue;\n\n return (\n \n
\n \n
\n\n {isSelected && checkmark}\n \n
\n \n );\n});\n\nexport { ZoomMeetingsDropdown };\n","import { css } from '@emotion/core';\n\nexport const wrapper = (hasOptions) => css`\n padding: ${hasOptions ? '13px 8px 13px 0' : 0};\n`;\n\nexport const dropdownWrapper = css`\n input[type='search']::-webkit-search-decoration,\n input[type='search']::-webkit-search-cancel-button,\n input[type='search']::-webkit-search-results-button,\n input[type='search']::-webkit-search-results-decoration {\n display: none;\n }\n`;\n\nexport const items = css`\n overflow: auto;\n max-height: 241px;\n`;\n","export { ZoomMeetingsDropdown } from './ZoomMeetingsDropdown';\n","export const MAX_SUBITEM_DEPTH = 2;\n","import { useSubscription } from '@apollo/client';\n\nimport ANNOTATION_CREATED_SUBSCRIPTION from '../subscriptions/AnnotationCreatedSubscription';\nimport ANNOTATION_UPDATED_SUBSCRIPTION from '../subscriptions/AnnotationUpdatedSubscription';\nimport ANNOTATION_REMOVED_SUBSCRIPTION from '../subscriptions/AnnotationRemovedSubscription';\n\nconst useAnnotationSubscription = ({ onCreated, onUpdated, onRemoved }) => {\n useSubscription(ANNOTATION_CREATED_SUBSCRIPTION, {\n shouldResubscribe: true,\n onSubscriptionData: ({ subscriptionData }) => {\n const {\n data: { annotationCreated },\n } = subscriptionData;\n\n onCreated(annotationCreated);\n },\n });\n\n useSubscription(ANNOTATION_UPDATED_SUBSCRIPTION, {\n shouldResubscribe: true,\n onSubscriptionData: ({ subscriptionData }) => {\n const {\n data: { annotationUpdated },\n } = subscriptionData;\n\n onUpdated(annotationUpdated);\n },\n });\n\n useSubscription(ANNOTATION_REMOVED_SUBSCRIPTION, {\n shouldResubscribe: true,\n onSubscriptionData: ({ subscriptionData }) => {\n const {\n data: { annotationDeleted },\n } = subscriptionData;\n\n onRemoved(annotationDeleted);\n },\n });\n};\n\nexport default useAnnotationSubscription;\n","import { gql, useMutation } from '@apollo/client';\n\nconst CREATE_ANNOTATION = gql`\n mutation createAnnotation($input: CreateAnnotationInput!) {\n createAnnotation(input: $input) {\n annotation {\n id\n externalId\n shared\n }\n\n errors {\n attribute\n message\n }\n }\n }\n`;\n\nconst useCreateAnnotationMutation = (options) => useMutation(CREATE_ANNOTATION, options);\n\nexport default useCreateAnnotationMutation;\n","import { gql, useMutation } from '@apollo/client';\n\nconst DELETE_ANNOTATION = gql`\n mutation deleteAnnotation($input: DeleteAnnotationInput!) {\n deleteAnnotation(input: $input) {\n errors {\n attribute\n message\n }\n }\n }\n`;\n\nconst useDeleteAnnotationMutation = (options) => useMutation(DELETE_ANNOTATION, options);\n\nexport default useDeleteAnnotationMutation;\n","import { gql, useMutation } from '@apollo/client';\n\nconst UPDATE_ANNOTATION = gql`\n mutation updateAnnotation($input: UpdateAnnotationInput!) {\n updateAnnotation(input: $input) {\n errors {\n attribute\n message\n }\n }\n }\n`;\n\nconst useUpdateAnnotationMutation = (options) => useMutation(UPDATE_ANNOTATION, options);\n\nexport default useUpdateAnnotationMutation;\n","import { gql, useQuery } from '@apollo/client';\n\nconst ANNOTATIONS_QUERY = gql`\n query annotations($id: ID!) {\n currentCompany {\n id\n meeting(id: $id) {\n id\n smartPack {\n id\n annotations {\n id\n externalId\n contactId\n data\n }\n }\n }\n }\n }\n`;\n\nconst useAnnotationsQuery = (options) => useQuery(ANNOTATIONS_QUERY, options);\n\nexport default useAnnotationsQuery;\n","import { gql, useQuery } from '@apollo/client';\n\nconst SMART_PACK_PREVIEW_QUERY = gql`\n query SmartPackPreviewQuery($meetingId: ID!) {\n currentCompany {\n id\n\n meeting(id: $meetingId) {\n id\n\n agendas {\n id\n\n documents {\n id\n url\n extension\n }\n }\n }\n }\n }\n`;\n\nconst useSmartPackPreviewQuery = (options) => useQuery(SMART_PACK_PREVIEW_QUERY, options);\n\nexport default useSmartPackPreviewQuery;\n","import { gql } from '@apollo/client';\n\nconst ANNOTATION_CREATED_SUBSCRIPTION = gql`\n subscription AnnotationCreatedSubscription {\n annotationCreated {\n id\n data\n contactId\n }\n }\n`;\n\nexport default ANNOTATION_CREATED_SUBSCRIPTION;\n","import { gql } from '@apollo/client';\n\nconst ANNOTATION_REMOVED_SUBSCRIPTION = gql`\n subscription AnnotationDeletedSubscription {\n annotationDeleted {\n externalId\n data\n }\n }\n`;\n\nexport default ANNOTATION_REMOVED_SUBSCRIPTION;\n","import { gql } from '@apollo/client';\n\nconst ANNOTATION_UPDATED_SUBSCRIPTION = gql`\n subscription AnnotationUpdatedSubscription {\n annotationUpdated {\n id\n data\n contactId\n }\n }\n`;\n\nexport default ANNOTATION_UPDATED_SUBSCRIPTION;\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport ButtonWithConfirmation from 'components/shared/ButtonWithConfirmation';\n\nimport * as styles from './ActionBar.styles';\n\nconst ActionBar = memo(\n ({ status, canDistribute, hasReviewers, onSave, onReview, onDistribute, onApprove, showEditButton, onEdit }) => {\n const isDraft = status === 'draft';\n const isInReview = status === 'in_review';\n\n const intl = useIntl();\n\n const isDistributable = isDraft || isInReview;\n\n const approvalButton = (\n \n );\n\n const distributionButton = (\n \n
\n \n \n {dropdownBody}\n
\n \n \n\n {showEditButton && (\n \n )}\n\n {canDistribute && (\n
\n );\n }\n);\n\nexport { ActionBar };\n","import { css } from '@emotion/core';\nimport { panels, media } from 'styles';\n\nexport const bar = css`\n ${media.mobile} {\n padding-left: 15px;\n padding-right: 15px;\n margin-bottom: -10px;\n\n .btn {\n margin-bottom: 10px;\n }\n }\n`;\n","export { ActionBar } from './ActionBar';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\nimport { withIntl } from '../../../utils/v2/intl';\n\nimport { useClickOutside } from 'hooks/useClickOutside';\nimport CreatePopup from 'components/minutes/CreatePopup';\n\nimport * as styles from './index.styles';\n\nconst AddButton = memo(({ meetings }) => {\n const { isComponentVisible, setIsComponentVisible } = useClickOutside(false);\n\n const show = () => setIsComponentVisible(true);\n const hide = () => setIsComponentVisible(false);\n\n const meetingOptions = meetings.map((item) => ({ id: item[0], title: item[1] }));\n\n if (!isComponentVisible) {\n return (\n \n \n
\n );\n }\n\n return {flash}
\n \n\n \n \n
\n
\n \n \n
\n \n );\n\n const threadReplyCount = isHighlighted && replies.length > 0 && (\n Reply
\n \n
\n );\n\n const commentOverlay = resolved && ;\n\n const createdAt = moment(comment.created_at).parseZone();\n const recentThreshold = moment().parseZone().subtract(RECENT_THRESHOLD, 'minutes');\n const isCurrentContactComment = currentContactId === comment.author.data.id;\n const isCreatedRecently = createdAt.isAfter(recentThreshold);\n const recentReplyCount =\n replies && replies.filter((item) => moment(item.created_at).parseZone().isAfter(recentThreshold)).length;\n\n const [isRecent, setIsRecent] = useState(!isCurrentContactComment && isCreatedRecently);\n\n const listReplyCount = isRoot && replies.length > 0 && (\n \n {recentReplyCount > 0 && }\n
\n );\n\n useEffect(() => {\n if (!isRecent) return;\n\n const timeLeft = createdAt.add(RECENT_THRESHOLD, 'minutes').diff(moment().parseZone());\n\n if (timeLeft <= 0) return;\n\n const timer = setTimeout(() => setIsRecent(false), timeLeft);\n\n return () => clearTimeout(timer);\n }, []);\n\n const commentStyles = [\n styles.comment.base,\n isRecent && styles.comment.recent,\n isHighlighted && styles.comment.root,\n ];\n\n return (\n \n {commentOverlay}\n\n \n {!isReadOnly && (\n \n\n \n \n\n {threadReplyCount}\n\n
\n );\n }\n);\n\nexport { Comment };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nexport const overlay = css`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n right: 0;\n background: ${HexToRgba(colors.white, 70)};\n`;\n\nexport const comment = {\n base: css`\n position: relative;\n padding-bottom: 16px;\n background: ${colors.white};\n font-size: 12px;\n z-index: 1;\n outline: 1px solid ${colors.lighterGrey};\n `,\n\n recent: css`\n background: ${colors.lightYellow};\n `,\n\n root: css`\n background: ${colors.lighterCyan};\n z-index: 2;\n padding-bottom: 20px;\n `,\n};\n\nexport const replyCount = {\n thread: css`\n position: absolute;\n bottom: 0;\n color: ${colors.mediumGrey};\n background: white;\n border-radius: 70px;\n border: 1px solid ${colors.lighterGrey};\n transform: translateY(50%);\n left: 16px;\n z-index: 3;\n font-size: 10px;\n padding: 5px 10px;\n line-height: 1;\n background: ${colors.white};\n `,\n\n list: css`\n font-size: 10px;\n color: ${colors.mediumGrey};\n border-bottom: 1px dashed ${colors.mediumGrey};\n position: absolute;\n right: 20px;\n z-index: 3;\n line-height: 16px;\n\n &:hover {\n cursor: pointer;\n }\n `,\n};\n\nexport const footer = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 20px 0 20px;\n position: relative;\n\n &:empty {\n padding: 0;\n }\n`;\n\nexport const reply = {\n button: css`\n line-height: 1;\n display: flex;\n align-items: center;\n\n div:hover {\n cursor: pointer;\n svg {\n path {\n fill: ${colors.cyan};\n }\n }\n }\n `,\n\n disabledButton: css`\n line-height: 1;\n display: flex;\n align-items: center;\n\n div:hover {\n cursor: default;\n }\n `,\n\n text: css`\n ${fonts.bold}\n color: ${colors.cyan};\n padding-right: 5px;\n `,\n\n disabledText: css`\n ${fonts.bold}\n color: ${colors.lighterGrey};\n padding-right: 5px;\n `,\n};\n\nexport const badge = css`\n position: absolute;\n border-radius: 50%;\n cursor: pointer;\n background: ${colors.cyan};\n width: 10px;\n height: 10px;\n top: 3px;\n right: -12px;\n border: 2px solid ${colors.white};\n`;\n","export { Comment } from './Comment';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport ButtonWithConfirmation from 'components/shared/ButtonWithConfirmation';\n\nimport { useCommentsActions } from 'store/commentsStoreContext';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nimport { ReactComponent as CheckmarkIcon } from 'images/icons/checkmark.svg';\n\nimport * as styles from './CommentActions.styles';\n\nconst CommentActions = memo(({ minuteId, minuteOwnerId, currentContactId, comment, onEdit }) => {\n const handleEdit = onEdit && onEdit.bind(this, comment);\n\n const intl = useIntl();\n\n const { deleteComment, updateComment } = useCommentsActions();\n const { setFlash } = useFlashActions();\n\n const handleDelete = () => {\n deleteComment(minuteId, comment.id).catch(setFlash);\n };\n\n const handleResolve = () => {\n updateComment(minuteId, comment.id, {\n resolved: !comment.resolved,\n }).catch(setFlash);\n };\n\n const isOwner = currentContactId === comment.author.data.id;\n const canResolve = !isOwner && Number(currentContactId) === minuteOwnerId;\n\n const checkmarkStyles = styles.checkmark(comment.resolved);\n const resolveIcon = canResolve && (\n \n {replyButton}\n {listReplyCount}\n
\n \n {comment.resolved &&
\n );\n\n const editIcon = isOwner && ;\n\n const deleteIcon = isOwner && (\n \n {resolveIcon}\n {editIcon}\n {deleteIcon}\n
\n );\n});\n\nexport { CommentActions };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const checkmark = (checked = true) => css`\n background: ${checked ? colors.cyan : colors.white};\n z-index: 2;\n border: 1px solid;\n border-color: ${checked ? 'transparent' : colors.lighterGrey};\n width: 16px;\n height: 16px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: 8px;\n }\n\n &:hover {\n cursor: pointer;\n border-color: ${colors.cyan};\n }\n`;\n\nexport const icon = css`\n &:hover {\n color: ${colors.cyan};\n cursor: pointer;\n }\n`;\n","export { CommentActions } from './CommentActions';\n","/** @jsx jsx */\n\nimport React, { memo, useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { CommentHeader } from './../CommentHeader';\nimport { CommentTarget } from './../CommentTarget';\nimport { TextAreaInput } from 'components/shared/TextAreaInput';\nimport { Expandable } from 'components/shared/Expandable';\n\nimport { useCommentsActions } from 'store/commentsStoreContext';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nimport * as styles from './CommentForm.styles';\n\nconst CommentForm = memo(\n ({\n minuteId,\n commentId,\n parentId,\n author,\n value,\n selectedText,\n selectedImages,\n onShow,\n onSubmit,\n onCancel,\n textAreaRef,\n isFullHeight,\n }) => {\n const [text, setText] = useState(value || '');\n\n useEffect(() => setText(value || ''), [value]);\n\n useEffect(() => {\n onShow && onShow();\n }, []);\n\n const handleChange = (event) => {\n setText(event.target.value || '');\n };\n\n const resetText = () => {\n setText('');\n };\n\n const { attributes: contact } = author?.data || {};\n const { createComment, updateComment } = useCommentsActions();\n const { setFlash } = useFlashActions();\n\n const handleSubmit = () => {\n if (commentId) {\n const payload = { body: text };\n updateComment(minuteId, commentId, payload).then(onSubmit).catch(setFlash);\n } else {\n const payload = {\n parent_id: parentId,\n body: text,\n relatable: selectedText,\n data: { images: selectedImages },\n };\n createComment(minuteId, payload).then(resetText).then(onSubmit).catch(setFlash);\n }\n };\n\n const isSubmittable = text.length > 0;\n\n const textAreaInputStyles = [styles.textAreaInput.base, isFullHeight && styles.textAreaInput.fullHeight];\n\n const getButtonText = () => {\n if (value) {\n return 'Update';\n } else if (parentId) {\n return 'Reply';\n } else {\n return 'Add';\n }\n };\n\n const header = !parentId && (\n <>\n \n
\n );\n }\n);\n\nexport { CommentForm };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const form = css`\n outline: 1px solid ${colors.lighterGrey};\n z-index: 2;\n`;\n\nexport const header = css`\n padding-bottom: 10px;\n\n &:empty {\n padding: 0;\n }\n`;\n\nexport const replyWrapper = css`\n padding: 19px 7px 20px 20px;\n outline: 1px solid ${colors.lighterGrey};\n`;\n\nexport const textAreaWrapper = css`\n border: none;\n padding: 0;\n`;\n\nexport const textAreaInput = {\n base: css`\n font-size: 12px;\n padding-left: 0;\n line-height: 16px;\n height: 75px;\n `,\n\n fullHeight: css`\n height: 342px;\n `,\n};\n","export { CommentForm } from './CommentForm';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport Avatar from 'components/shared/Avatar';\nimport moment from 'moment';\n\nimport * as styles from './CommentHeader.styles';\n\nconst CommentHeader = memo(({ contact, comment, children }) => {\n if (!contact) {\n return null;\n }\n\n const momentObj = moment(comment?.created_at).parseZone();\n const formatted = momentObj.clone().format('hh:mm A');\n const createdAgo = momentObj.clone().fromNow();\n const createdAt = `${formatted}, ${createdAgo}`;\n\n return (\n {header}
\n\n \n
\n \n \n {getButtonText()}\n \n\n \n
\n \n
\n );\n});\n\nexport { CommentHeader };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const author = css`\n display: flex;\n align-items: center;\n font-size: 12px;\n padding: 20px 20px 10px 20px;\n`;\n\nexport const heading = css`\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n padding-left: 12px;\n line-height: 1;\n`;\n\nexport const name = css`\n ${fonts.semiBold}\n color: ${colors.black};\n`;\n\nexport const timestamps = css`\n ${fonts.regular}\n color: ${colors.mediumGrey};\n width: 100%;\n padding-top: 5px;\n`;\n","export { CommentHeader } from './CommentHeader';\n","/** @jsx jsx */\n\nimport React, { memo, useMemo, useCallback, useEffect, useState, useRef } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { Comment } from './../Comment';\nimport { CommentThread } from './../CommentThread';\nimport { EditCommentThread } from './../EditCommentThread';\nimport { Scrollable } from 'components/shared/Scrollable';\nimport { Placeholder } from 'components/shared/Placeholder';\nimport { CommentForm } from './../CommentForm';\n\nimport { useCommentsStore } from 'store/commentsStoreContext';\nimport { useMinutesActions } from 'store/minutesStoreContext';\nimport { useActionCable } from 'hooks/useActionCable';\n\nimport { ReactComponent as CommentIcon } from 'images/icons/comment-icon.svg';\n\nimport * as styles from './CommentList.styles';\n\nconst CommentList = memo(\n ({\n minuteId,\n minuteOwnerId,\n currentContact,\n reviewerId,\n showAddCommentForm,\n selectedText,\n selectedImages,\n onAddCommentFormCancel,\n isReadOnly,\n ...props\n }) => {\n const { comments } = useCommentsStore();\n const { setMinutesContext } = useMinutesActions();\n\n const intl = useIntl();\n\n useActionCable('MinutesChannel', { minute_id: minuteId }, (response) => setMinutesContext(minuteId, response));\n\n const [currentComment, setCurrentComment] = useState(null);\n const [editableComment, setEditableComment] = useState(null);\n\n useEffect(() => {\n if (currentComment) {\n const updatedComment = comments.find((item) => item.id === currentComment.id);\n setCurrentComment(updatedComment);\n }\n }, [comments]);\n\n useEffect(() => {\n if (showAddCommentForm) {\n closeCommentThread();\n }\n }, [showAddCommentForm]);\n\n const openCommentThread = useCallback((comment) => {\n setCurrentComment(comment);\n }, []);\n\n const closeCommentThread = useCallback(() => {\n setCurrentComment(null);\n }, []);\n\n const openEditThread = useCallback((comment) => {\n setEditableComment(comment);\n }, []);\n\n const closeEditThread = useCallback(() => {\n setEditableComment(null);\n }, []);\n\n const compareByDateDesc = (a, b) => {\n const dateA = a.replied_at || a.created_at;\n const dateB = b.replied_at || b.created_at;\n\n return new Date(dateB) - new Date(dateA);\n };\n\n const compareByDateAsc = (a, b) => {\n const dateA = a.replied_at || a.created_at;\n const dateB = b.replied_at || b.created_at;\n\n return new Date(dateA) - new Date(dateB);\n };\n\n const getReplies = (parentId) => {\n return comments.filter((item) => item.ancestry === parentId.toString()).sort(compareByDateAsc);\n };\n\n const roots = useMemo(() => {\n let scope = comments.filter((comment) => !comment.ancestry);\n\n if (reviewerId) {\n scope = scope.filter(({ author }) => author.data.attributes.id === reviewerId);\n }\n\n return scope.sort(compareByDateDesc);\n }, [comments, reviewerId]);\n\n const listBody = roots.map((comment) => (\n \n
\n\n {children}\n {contact.name}
\n\n {createdAt}
\n \n
\n );\n }\n }\n\n if (!showAddCommentForm) {\n if (!comments || !comments.length) {\n return (\n \n
\n );\n }\n }\n\n return (\n \n
\n );\n }\n);\n\nexport { CommentList };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const placeholder = css`\n height: 100%;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: center;\n /* outline: 1px solid ${colors.lighterGrey}; */\n background: ${colors.white};\n`;\n\nexport const panel = css`\n background: ${colors.white};\n position: relative;\n height: 485px;\n /* outline: 1px solid ${colors.lighterGrey}; */\n overflow-x: hidden;\n height: 100%;\n`;\n\nexport const list = css`\n height: 100%;\n`;\n\nexport const replyWrapper = css`\n padding: 20px 7px 20px 20px;\n /* outline: 1px solid ${colors.lighterGrey}; */\n`;\n\nexport const textAreaWrapper = css`\n border: none;\n padding: 0;\n`;\n\nexport const textAreaInput = css`\n font-size: 12px;\n padding-left: 0;\n line-height: 16px;\n height: 75px;\n`;\n","export { CommentList } from './CommentList';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './CommentTarget.styles';\n\nconst CommentTarget = memo(({ target, images }) => {\n if (!target && !images) {\n return null;\n }\n\n const selectedImages =\n images &&\n images.map((imageURL, index) => (\n \n \n {addCommentForm}\n {listBody}\n \n
\n\n {commentThread}\n {editableThread}\n \n 
\n
\n ));\n\n return (\n \n
\n );\n});\n\nexport { CommentTarget };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const image = css`\n height: 50px;\n width: auto;\n`;\n\nexport const target = css`\n font-size: 12px;\n`;\n\nexport const header = css`\n color: ${colors.black};\n letter-spacing: 0.14em;\n line-height: 1;\n text-transform: uppercase;\n`;\n\nexport const blockquote = css`\n font-style: italic;\n color: ${colors.black};\n line-height: 16px;\n border-left: 1px solid ${colors.cyan};\n padding-left: 5px;\n margin: 10px 0;\n`;\n","export { CommentTarget } from './CommentTarget';\n","/** @jsx jsx */\n\nimport React, { memo, useRef } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { CommentThreadWrapper } from './../CommentThreadWrapper';\nimport { Comment } from './../Comment';\nimport { CommentForm } from './../CommentForm';\nimport { Scrollable } from 'components/shared/Scrollable';\nimport { useVisibility } from 'hooks/useVisibility';\n\nconst CommentThread = memo(\n ({ minuteId, minuteOwnerId, currentContactId, root, replies, onCancel, onEdit, isReadOnly }) => {\n const { isComponentVisible, hideComponent } = useVisibility(true);\n\n const listBody =\n replies &&\n replies.map((reply) => (\n \n
\n\n \n {selectedImages}\n {target}\n
\n \n \n
\n )}\n\n \n {children}\n
\n );\n});\n\nexport { CommentThreadWrapper };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const thread = {\n base: css`\n display: flex;\n flex-direction: column;\n outline: 1px solid ${colors.lighterGrey};\n height: 100%;\n position: absolute;\n width: 100%;\n justify-content: space-between;\n background: ${colors.white};\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 5;\n left: 100%;\n top: 0;\n `,\n\n open: css`\n animation: slideIn 0.3s ease-in-out forwards;\n\n @keyframes slideIn {\n 0% {\n transform: translate3d(0, 0, 0);\n }\n\n 100% {\n transform: translate3d(-100%, 0, 0);\n }\n }\n `,\n\n closed: css`\n animation: slideOut 0.3s ease-in-out forwards;\n\n @keyframes slideOut {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n }\n `,\n};\n","export { CommentThreadWrapper } from './CommentThreadWrapper';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { ReactComponent as CommentIcon } from 'images/icons/comment-quick-add.svg';\n\nimport * as styles from './CommentToggle.styles';\n\nconst CommentToggle = memo(({ show, posY, onClick }) => {\n const toggleStyles = [styles.toggle.base(posY), show && styles.toggle.visible];\n\n return (\n \n
\n );\n});\n\nexport { CommentToggle };\n","import { css } from '@emotion/core';\nimport { colors, media } from 'styles';\n\nexport const toggle = {\n base: (top) => css`\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: translate3d(50%, ${top}px, 0);\n z-index: 6;\n background: ${colors.white};\n box-shadow: 0px 6.4px 14.4px rgb(183 183 183 / 13%), 0px 5px 10px rgb(153 183 200 / 10%);\n border-radius: 25px;\n margin-top: 10px;\n opacity: 0;\n top: 0;\n right: 0;\n transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;\n cursor: pointer;\n width: 49px;\n height: 49px;\n ${media.mobile} {\n transform: translate3d(0, ${top}px, 0);\n }\n\n &:hover {\n svg {\n path {\n fill: ${colors.cyan};\n }\n }\n }\n `,\n\n visible: css`\n opacity: 1;\n `,\n};\n","export { CommentToggle } from './CommentToggle';\n","import React, { memo, useEffect, useState } from 'react';\nimport { getErrors } from 'helpers/getErrors';\nimport { trackPromise } from 'react-promise-tracker';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { withIntl } from '../../../utils/v2/intl';\nimport axios from 'axios';\n\nimport { Modal } from 'components/shared/Modal';\nimport { MeetingPicker } from 'components/shared/MeetingPicker';\nimport { Input } from 'components/shared/Input';\n\nimport * as styles from './CreatePopup.styles';\n\nconst CreatePopup = memo(({ show, onClose, meeting, meetingOptions, disableMeetingPicker, openInNewTab }) => {\n const [minuteName, setMinuteName] = useState('');\n const [minuteErrors, setMinuteErrors] = useState({});\n const [minuteMeeting, setMinuteMeeting] = useState(meeting);\n\n const intl = useIntl();\n\n useEffect(() => {\n setMinuteMeeting(meeting);\n }, [meeting]);\n\n useEffect(() => {\n setMinuteErrors({});\n\n if (minuteMeeting) {\n setMinuteName(`${intl.formatMessage({ id: 'CreatePopup.minutes' })} ${minuteMeeting.title}`);\n }\n }, [minuteMeeting]);\n\n const handleClose = () => {\n setMinuteName('');\n setMinuteMeeting(meeting);\n setMinuteErrors({});\n onClose();\n };\n\n const companyId = getCompanySlug();\n const apiURL = `/api/${companyId}/v1/minutes.json`;\n\n const changeMinuteName = (event) => {\n setMinuteName(event.target.value || '');\n setMinuteErrors((state) => ({ ...state, name: null }));\n };\n\n const handleErrors = (response) => {\n setMinuteErrors(getErrors(response));\n };\n\n const navigateToMinute = ({ data: { attributes } }) => {\n if (openInNewTab) {\n handleClose();\n window.open(`/${companyId}/minutes/${attributes.slug}/edit`, '_blank');\n } else {\n window.location.assign(`/${companyId}/minutes/${attributes.slug}/edit`);\n }\n };\n\n const createMinute = () => {\n const payload = { minute: { name: minuteName, meeting_id: minuteMeeting?.id } };\n const promise = axios\n .post(apiURL, payload)\n .then((response) => response.data)\n .then(navigateToMinute)\n .catch(handleErrors);\n\n return trackPromise(promise);\n };\n\n const toggleMeeting = (meeting, onSelect) => {\n if (minuteMeeting?.id === meeting.id) {\n setMinuteMeeting(null);\n } else {\n setMinuteMeeting(meeting);\n onSelect();\n }\n };\n\n return (\n \n
\n \n
\n\n \n \n
\n \n
\n\n \n
\n );\n })\n);\n\nexport { Editor };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nexport const quill = {\n base: css`\n .ql-snow {\n line-height: 1;\n\n .ql-tooltip {\n left: unset !important;\n transform: translateY(-25px) !important;\n\n ${media.mobile} {\n .ql-preview {\n max-width: 100px;\n }\n\n &:before {\n display: none;\n }\n }\n }\n\n .ql-editor {\n ${fonts.regular}\n overflow-y: auto;\n overflow-x: hidden;\n height: 100%;\n padding: 15px 10px;\n\n a {\n color: ${colors.purple};\n }\n\n *::selection {\n background-color: ${colors.cyan};\n color: ${colors.white};\n }\n\n strong {\n ${fonts.semiBold}\n }\n }\n\n &.ql-toolbar,\n &.ql-container {\n ${fonts.regular}\n border: none;\n background: ${colors.white};\n padding: 0;\n\n svg {\n width: auto;\n }\n }\n\n &.ql-toolbar {\n padding: 5px !important;\n outline: 1px solid ${colors.lighterGrey};\n\n *:focus {\n outline: none;\n }\n\n button {\n width: 20px !important;\n height: 20px !important;\n }\n\n span.ql-size,\n span.ql-header {\n font-size: 12px !important;\n }\n\n span.ql-header {\n width: 127px !important;\n }\n\n .ql-picker-options {\n ${fonts.regular}\n }\n }\n\n &.ql-container {\n height: 448px;\n margin: 10px 15px;\n color: ${colors.black};\n }\n\n .ql-formats {\n ${media.mobile} {\n margin-right: 0px;\n }\n }\n }\n `,\n\n readOnly: css`\n .ql-snow {\n &.ql-toolbar {\n display: none;\n }\n\n &.ql-container {\n height: 482px;\n ${media.mobile} {\n max-height: 482px;\n height: auto;\n }\n }\n }\n `,\n};\n","import { Quill } from 'react-quill';\n\nconst Parchment = Quill.import('parchment');\nconst BaseImage = Quill.import('formats/image');\n\nconst ATTRIBUTES = ['alt', 'height', 'width', 'style'];\n\nconst WHITE_STYLE = ['margin', 'display', 'float'];\n\nclass Image extends BaseImage {\n static formats(domNode) {\n return ATTRIBUTES.reduce(function (formats, attribute) {\n if (domNode.hasAttribute(attribute)) {\n formats[attribute] = domNode.getAttribute(attribute);\n }\n return formats;\n }, {});\n }\n\n format(name, value) {\n if (ATTRIBUTES.indexOf(name) > -1) {\n if (value) {\n if (name === 'style') {\n value = this.sanitize_style(value);\n }\n this.domNode.setAttribute(name, value);\n } else {\n this.domNode.removeAttribute(name);\n }\n } else {\n super.format(name, value);\n }\n }\n\n sanitize_style(style) {\n let style_arr = style.split(';');\n let allow_style = '';\n style_arr.forEach((v, i) => {\n if (WHITE_STYLE.indexOf(v.trim().split(':')[0]) !== -1) {\n allow_style += v + ';';\n }\n });\n return allow_style;\n }\n}\n\nQuill.register(Image, true);\n\nexport default Image;\n","import { Quill } from 'react-quill';\n\nconst Clipboard = Quill.import('modules/clipboard');\nconst Delta = Quill.import('delta');\n\nclass PlainClipboard extends Clipboard {\n onPaste(e) {\n e.preventDefault();\n const range = this.quill.getSelection();\n const text = e.clipboardData.getData('text/plain');\n const delta = new Delta().retain(range.index).delete(range.length).insert(text);\n const index = text.length + range.index;\n const length = 0;\n this.quill.updateContents(delta, 'silent');\n this.quill.setSelection(index, length, 'silent');\n this.quill.scrollIntoView();\n }\n}\n\nexport default PlainClipboard;\n","export { Editor } from './Editor';\n","import React, { memo, useState, useEffect } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { useIntl } from 'react-intl';\nimport { withIntl } from '../../../utils/v2/intl';\n\nimport { Select } from '../../shared/Select';\nimport Multiselect from '../../shared/Select/Multiselect';\nimport { Search } from '../../shared/Search';\n\nconst Filters = memo(({ companySlug }) => {\n const intl = useIntl();\n\n const statusOptions = [\n { value: 'draft', label: intl.formatMessage({ id: 'Filters.draft' }) },\n { value: 'approved', label: intl.formatMessage({ id: 'Filters.approved' }) },\n { value: 'in_review', label: intl.formatMessage({ id: 'Filters.inReview' }) },\n { value: 'archived', label: intl.formatMessage({ id: 'Filters.archived' }) },\n ];\n\n const timeframeOptions = [\n { value: 'all', label: intl.formatMessage({ id: 'Filters.all' }) },\n { value: 'next_30_days', label: intl.formatMessage({ id: 'Filters.next30' }) },\n { value: 'next_6_months', label: intl.formatMessage({ id: 'Filters.next6' }) },\n { value: 'past_year', label: intl.formatMessage({ id: 'Filters.pastYear' }) },\n ];\n\n let [selectedStatuses, setSelectedStatuses] = useState(statusOptions.slice(0, 3));\n\n let [selectedTimeframe, setSelectedTimeframe] = useState(timeframeOptions[0]);\n let [searchTerm, setSearchTerm] = useState('');\n let [isSearching, setIsSearching] = useState(false);\n\n const handleTermChange = (event) => {\n setSearchTerm(event.target.value || '');\n };\n\n const startSearching = () => {\n setIsSearching(true);\n };\n\n const stopSearching = () => {\n setIsSearching(false);\n setSearchTerm('');\n };\n\n useEffect(() => {\n const query = $.param({\n status: selectedStatuses.filter((option) => option.value).map((option) => option.value),\n timeframe: selectedTimeframe && selectedTimeframe.value,\n search_term: searchTerm,\n });\n\n $.get(`/${companySlug}/minutes.js?${query}`);\n }, [selectedStatuses, selectedTimeframe, searchTerm]);\n\n return (\n <>\n \n
\n \n );\n});\n\nexport default withIntl(Filters);\n","export const STATUS_OPTIONS = [\n { value: 'draft', label: 'Draft' },\n { value: 'approved', label: 'Approved' },\n { value: 'in_review', label: 'In review' },\n { value: 'archived', label: 'Archived' },\n];\n","/** @jsx jsx */\n\nimport React, { memo, useCallback } from 'react';\nimport { css, jsx } from '@emotion/core';\n\nimport * as styles from './index.styles';\n\nconst Line = ({ header, children }) => {\n return (\n \n
\n );\n};\n\nconst DateLabel = ({ day, month, time }) => (\n {header}:
\n{children}
\n \n
\n);\n\nexport default memo(({ minutes, name, owner, approver, link, type, dasherize, status, index, day, month, time }) => {\n const isLast = minutes.length - 1 === index;\n\n const redirectToMinuteOverview = useCallback(() => {\n window.location.assign(link);\n }, [link]);\n\n return (\n \n {day} {month}\n
\n {time}
\n \n \n \n {name} \n {type} \n {owner} \n {approver} \n \n {status}\n \n {/* */}\n
\n );\n});\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const card = (isLast) => css`\n background-color: ${colors.white};\n border: 1px solid ${colors.borderSecondGrey};\n box-sizing: border-box;\n padding: 15px 20px;\n display: flex;\n flex-direction: column;\n margin-bottom: ${isLast ? '0px' : '10px'};\n color: ${colors.black};\n position: relative;\n`;\n\nexport const header = css`\n width: 110px;\n min-width: 110px;\n padding-right: 20px;\n text-transform: capitalize;\n font-weight: 600;\n font-size: 12px;\n line-height: 24px;\n color: ${colors.black};\n margin: 0;\n`;\nexport const statuses = css`\n font-size: 12px;\n line-height: 16px;\n`;\n\nexport const textOverflow = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const line = css`\n display: flex;\n align-items: center;\n`;\n\nexport const dotsBlock = css`\n position: absolute;\n top: 0;\n right: 0;\n width: 40px;\n height: 40px;\n background-color: ${colors.white};\n border-left: 1px solid ${colors.borderSecondGrey};\n border-bottom: 1px solid ${colors.borderSecondGrey};\n`;\n\nexport const dateLabel = css`\n display: flex;\n`;\n\nexport const dateLabelPart = css`\n ${fonts.styledBold}\n width: 50px;\n height: 21px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n font-size: 10px;\n text-transform: uppercase;\n`;\n\nexport const dateLabelDay = css`\n display: flex;\n background-color: #00bac6;\n color: ${colors.white};\n border-radius: 4px 0 0 4px;\n`;\n\nexport const dateLabelTime = css`\n color: #00bac6;\n background-color: rgba(#00bac6, 0.1);\n background-color: #e5f8f9;\n display: flex;\n border-radius: 0 4px 4px 0;\n`;\n\nexport const link = css`\n color: inherit;\n text-decoration: none;\n &:focus,\n &:active {\n color: inherit;\n }\n`;\n","/** @jsx jsx */\n\nimport React, { memo, useMemo, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { useIntl } from 'react-intl';\n\nimport { Spinner } from 'components/shared/Spinner';\nimport { Steps } from 'components/shared/Steps';\nimport { AlertPopup } from 'components/shared/AlertPopup';\nimport { Step as MeetingStep } from 'components/meetings/MultistepForm/Step';\nimport { Step } from './Step';\nimport { StatusBadge } from 'components/shared/StatusBadge';\nimport { MeetingDetailsForm } from 'components/meetings/MeetingDetailsForm';\nimport { AgendaTasksTabs } from 'components/meetings/AgendaTasksTabs';\nimport { OoEStep } from './../OoEStep';\nimport { ReviewStep } from './../ReviewStep';\nimport { ActionBar } from './../ActionBar';\nimport { OwnerSpace } from './../OwnerSpace';\nimport { AttendeesStep } from 'components/meetings/AttendeesStep';\n\nimport { useActionCable } from 'hooks/useActionCable';\nimport { useSteps } from 'hooks/useSteps';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\nimport { useMeetingActions, useMeetingStore } from 'store/meetingStoreContext';\nimport { useMinutesActions, useMinutesStore } from 'store/minutesStoreContext';\nimport { useReviewsStore } from 'store/reviewsStoreContext';\nimport { useFlashActions, useFlashStore } from 'store/flashStoreContext';\nimport { useOoEStore, useOoEActions } from 'store/ooeStoreContext';\n\nimport { getMeetingTypeOptions } from 'helpers/meetingTypes';\n\nconst MultistepForm = memo(\n ({\n root,\n meetingId,\n meetingTypes,\n currentContact,\n isStandalone,\n timezoneOptions,\n contactTimezone,\n contactTimezoneOffset,\n adminView,\n availableLanguages,\n contactLanguage,\n }) => {\n const intl = useIntl();\n\n const meetingTypeOptions = useMemo(() => {\n return getMeetingTypeOptions(meetingTypes);\n }, []);\n\n const { flash } = useFlashStore();\n const { setFlash, discardFlash } = useFlashActions();\n const { meeting, loaded, edits } = useMeetingStore();\n const { minutes } = useMinutesStore();\n const { discardEdits } = useMeetingActions();\n const { isDraft, isUpcoming, isArchived, isPseudo } = useMeetingStatus(meeting.status);\n const { ooe } = useOoEStore();\n const { updateOoE } = useOoEActions();\n\n const stepMap = useMemo(() => {\n if (isStandalone) {\n return {\n 1: intl.formatMessage({ id: 'MultistepForm.meetingDetails' }),\n 2: intl.formatMessage({ id: 'MultistepForm.attendees' }),\n 3: intl.formatMessage({ id: 'MultistepForm.orderOfEvents' }),\n 4: intl.formatMessage({ id: 'MultistepForm.review' }),\n };\n } else {\n return {\n 1: intl.formatMessage({ id: 'MultistepForm.meetingDetails' }),\n 2: intl.formatMessage({ id: 'MultistepForm.attendees' }),\n 3: intl.formatMessage({ id: 'MultistepForm.agendaTasks' }),\n 4: intl.formatMessage({ id: 'MultistepForm.orderOfEvents' }),\n 5: intl.formatMessage({ id: 'MultistepForm.review' }),\n };\n }\n }, []);\n\n const totalSteps = Object.keys(stepMap).length;\n\n const { steps, changeStep, advanceStep, jumpStep } = useSteps(stepMap, 1, !isPseudo || meeting.valid);\n const { setErrors, setMeeting, loadMeeting, createMeeting, arrangeContext, inviteAttendees, updateMeeting } =\n useMeetingActions();\n\n useEffect(() => {\n loadMeeting(meetingId).then(selectStep).catch(setFlash);\n }, []);\n\n useEffect(() => discardEdits(), [steps.current]);\n\n useActionCable('MeetingsChannel', { meeting_id: meetingId }, (response) => arrangeContext(meetingId, response));\n\n const companyId = getCompanySlug();\n\n const selectStep = (meeting) => {\n if (meeting.valid) {\n jumpStep(totalSteps - 1);\n }\n };\n\n const saveDraftLabel = isDraft\n ? intl.formatMessage({ id: 'MultistepForm.saveDraft' })\n : intl.formatMessage({ id: 'MultistepForm.save' });\n\n const handleSaveMeetingDraft = () => {\n updateMeeting(meeting.id, edits).then(handleSaveDraftClick).catch(setErrors);\n };\n\n const handleSaveAndAdvance = () => {\n updateMeeting(meeting.id, edits).then(advanceStep).catch(setErrors);\n };\n\n const stepsIndicator = (\n {flash}
\n \n\n {renderSpace()}
\n \n \n {steps}\n {children}\n
\n\n {actions}
\n \n );\n});\n\nexport { Step };\n","import { css } from '@emotion/core';\nimport { panels, media } from 'styles';\n\nexport const panel = css`\n ${panels.base}\n padding: 43px 0 45px 0;\n ${media.tablet} {\n border: none;\n box-shadow: none;\n }\n`;\n\nexport const actions = css`\n ${panels.base}\n padding: 20px 0;\n margin-top: 15px;\n`;\n","export { Step } from './Step';\n","export { MultistepForm } from './MultistepForm';\n","import React, { memo } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ButtonWithSuccess } from 'components/shared/ButtonWithSuccess';\nimport { ReactComponent as HistoryIcon } from 'images/icons/history-icon.svg';\n\nconst OoEActions = memo(({ onSave, showCopyFromAgenda, onCopyFromAgenda, onToggleHistory, onBack }) => {\n return (\n \n
\n );\n});\n\nexport { OoEActions };\n","export { OoEActions } from './OoEActions';\n","/** @jsx jsx */\n\nimport React, { memo, useRef, useCallback, useState } from 'react';\nimport { Quill } from 'react-quill';\nimport { Row, Col } from 'react-bootstrap';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { OoEActions } from './../OoEActions';\nimport { Editor } from './../Editor';\nimport { ReviewSection } from './../ReviewSection';\nimport { formatDuration } from 'helpers/formatDuration';\nimport { useOoEStore, useOoEActions } from 'store/ooeStoreContext';\nimport { useAgendasStore } from 'store/agendasStoreContext';\nimport { useFlashActions } from 'store/flashStoreContext';\n\nimport * as styles from './OoEStep.styles';\n\nconst OoEStep = memo(({ minutes, isPseudoMeeting, currentContact, context, onBack }) => {\n const Delta = Quill.import('delta');\n const delta = new Delta();\n\n const intl = useIntl();\n\n const [change, setChange] = useState(delta);\n\n const { agendas } = useAgendasStore();\n const { ooe } = useOoEStore();\n const { editOoE, updateOoE } = useOoEActions();\n const { setFlash } = useFlashActions();\n\n const handleSaveOoEClick = () => {\n return updateOoE(minutes.id, { description: ooe.description });\n };\n\n const handleOoEChange = useCallback(\n (content, delta) => {\n const contentChange = change.compose(delta);\n\n editOoE({ description: content });\n setChange(contentChange);\n },\n [change]\n );\n\n const getAgendaText = (agenda) => {\n const spaces = ' '.repeat(4 * agenda.depth);\n let text = `${agenda.number} ${agenda.heading}`;\n\n if (agenda.assignee_id) {\n text += intl.formatMessage({ id: 'OoEStep.assignedTo' }, { name: agenda.assignee_name });\n }\n\n if (agenda.duration_in_minutes > 0) {\n const duration = formatDuration(agenda.duration_in_minutes);\n text += ` (${duration})`;\n }\n\n return `${spaces}${text}\\n`;\n };\n\n const sortByPosition = (a, b) => {\n return a.position - b.position;\n };\n\n const insertAgendaHeading = (agenda, state, editor) => {\n const children = agendas.filter((item) => item.parent_id === agenda.id).sort(sortByPosition);\n const text = getAgendaText(agenda);\n\n editor.insertText(state.index, text, 'header', 2, true);\n state.index = state.index + text.length;\n\n children.map((item) => insertAgendaHeading(item, state, editor));\n };\n\n const copyFromAgenda = () => {\n const editor = quillRef.current.getEditor();\n const roots = agendas.filter((item) => item.root).sort(sortByPosition);\n const state = { index: 0 };\n\n roots.map((item) => insertAgendaHeading(item, state, editor));\n editor.insertText(state.index, '\\n\\n', 'header', 0, true);\n\n editor.blur();\n };\n\n const quillRef = useRef();\n\n const renderStepBody = () => {\n const isInReview = minutes.status === 'in_review';\n\n if (isInReview) {\n return (\n \n
\n\n \n
\n\n \n
\n \n {showCopyFromAgenda && (\n \n )}\n\n \n \n
\n\n {onBack && (\n \n )}\n \n \n
\n
\n );\n});\n\nexport { OoEStep };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const padded = css`\n padding: 35px 40px 0;\n ${media.mobile} {\n padding: 15px 15px 0;\n }\n`;\n\nexport const outline = css`\n outline: 1px solid ${colors.lighterGrey};\n background: ${colors.white};\n`;\n","export { OoEStep } from './OoEStep';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Row, Col } from 'react-bootstrap';\nimport { Editor } from './../Editor';\nimport { MeetingDetails } from 'components/meetings/MeetingDetails';\nimport { ReviewerList } from './../ReviewerList';\nimport { ActionBar } from './../ActionBar';\nimport { OoEStep } from './../OoEStep';\nimport { useActionCable } from 'hooks/useActionCable';\nimport { useOoEStore } from 'store/ooeStoreContext';\nimport { useMinutesStore, useMinutesActions } from 'store/minutesStoreContext';\nimport { useReviewsStore } from 'store/reviewsStoreContext';\nimport { useCommentsStore } from 'store/commentsStoreContext';\n\nimport * as styles from './OwnerSpace.styles';\n\nconst OwnerSpace = memo(\n ({\n isPseudoMeeting,\n onSaveDraft,\n onDistribute,\n onApprove,\n currentContact,\n contactTimezone,\n contactTimezoneOffset,\n }) => {\n const { minutes } = useMinutesStore();\n const { setMinutesContext } = useMinutesActions();\n const { ooe } = useOoEStore();\n const { comments } = useCommentsStore();\n const { reviews } = useReviewsStore();\n\n const [showOoeForm, setShowOoeForm] = useState(false);\n\n const toggleShowOoeForm = () => setShowOoeForm(!showOoeForm);\n\n useActionCable('MinutesChannel', { minute_id: minutes.id }, (response) => setMinutesContext(minutes.id, response));\n\n const editOoeForm = (\n \n \n
\n
\n )}\n\n \n
\n\n \n
\n\n \n
\n \n
\n \n );\n }\n);\n\nexport { OwnerSpace };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const row = css`\n box-shadow: 2px 4px 4px rgba(223, 223, 223, 0.25);\n display: flex;\n ${media.mobile} {\n flex-wrap: wrap;\n }\n`;\n\nexport const editor = css`\n background: ${colors.white};\n border-right: 1px solid ${colors.zircon};\n width: 75%;\n flex-grow: 1;\n /* overflow: hidden; */\n position: relative;\n ${media.mobile} {\n border-bottom: 1px solid ${colors.zircon};\n border-right: none;\n }\n`;\n\nexport const commentBlock = css`\n min-width: 280px;\n width: 25%;\n ${media.mobile} {\n min-height: 500px;\n flex-basis: 100%;\n }\n`;\n","export { OwnerSpace } from './OwnerSpace';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { Placeholder } from 'components/shared/Placeholder';\nimport { ReactComponent as ContactsIcon } from 'images/icons/no-contacts.svg';\nimport { ReviewListItem } from './../ReviewListItem';\n\nimport * as styles from './ReviewList.styles';\n\nconst ReviewList = memo(({ reviews, onResend, onDelete }) => {\n const intl = useIntl();\n\n if (!reviews || !reviews.length) {\n return (\n \n
\n );\n }\n\n const list = reviews.map((review) => (\n \n
\n );\n});\n\nexport { ReviewList };\n","import { css } from '@emotion/core';\n\nexport const wrapper = css`\n padding-right: 20px;\n overflow: auto;\n height: 214px;\n`;\n\nexport const placeholder = css`\n flex: 1 1 100%;\n display: flex;\n align-items: center;\n height: 214px;\n justify-content: center;\n`;\n","export { ReviewList } from './ReviewList';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Avatar from 'components/shared/Avatar';\nimport { ButtonWithSuccess } from 'components/shared/ButtonWithSuccess';\n\nimport * as styles from './ReviewListItem.styles';\n\nconst ReviewListItem = memo(({ reviewer, state, onResend, onDelete }) => {\n const { attributes: contact } = reviewer.data;\n\n const intl = useIntl();\n\n const isDraft = state === 'draft';\n const isPending = state === 'pending';\n\n const stateText =\n isPending || isDraft\n ? intl.formatMessage({ id: 'ReviewListItem.reviewWaiting' })\n : intl.formatMessage({ id: 'ReviewListItem.reviewReceived' });\n\n const stateStyles = [styles.state.base, isPending || isDraft ? styles.state.waiting : styles.state.received];\n\n const handleResend = onResend && onResend.bind(this, contact);\n const handleDelete = onDelete && onDelete.bind(this, { ...contact, deletable: reviewer.deletable });\n\n const resendButton = isPending && (\n {list}
\n \n
\n );\n});\n\nexport { ReviewListItem };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const name = css`\n margin-left: 10px;\n max-width: 150px;\n font-size: 14px;\n color: ${colors.black};\n`;\n\nexport const item = css`\n display: flex;\n align-items: center;\n margin-bottom: 15px;\n justify-content: space-between;\n width: 100%;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n`;\n\nexport const state = {\n base: css`\n font-size: 10px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n `,\n\n waiting: css`\n color: ${colors.orange};\n `,\n\n received: css`\n color: ${colors.cyan};\n `,\n};\n\nexport const avatarSide = css`\n display: flex;\n align-items: center;\n flex-grow: 1;\n`;\n\nexport const statusSide = css`\n white-space: nowrap;\n`;\n","export { ReviewListItem } from './ReviewListItem';\n","/** @jsx jsx */\n\nimport React, { memo, useCallback, useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { Col } from 'react-bootstrap';\nimport { Spinner } from 'components/shared/Spinner';\nimport { CommentToggle } from './../CommentToggle';\nimport { CommentList } from './../CommentList';\nimport { Editor } from './../Editor';\n\nimport { useActionCable } from 'hooks/useActionCable';\nimport { useFlashActions } from 'store/flashStoreContext';\nimport { useMeetingActions, useMeetingStore } from 'store/meetingStoreContext';\nimport { useMinutesActions } from 'store/minutesStoreContext';\nimport { useOoEActions, useOoEStore } from 'store/ooeStoreContext';\nimport { useReviewsStore } from 'store/reviewsStoreContext';\n\nimport * as styles from './ReviewSection.styles';\n\nconst ReviewSection = memo(\n ({ minuteId, minuteOwnerId, currentContact, onTextChange, quillRef, isEditorReadOnly, isCommentListReadOnly }) => {\n const { meeting, loaded } = useMeetingStore();\n const { setMinutesContext } = useMinutesActions();\n const { ooe } = useOoEStore();\n const { reviews } = useReviewsStore();\n\n const { setFlash } = useFlashActions();\n const { setOoE } = useOoEActions();\n const { loadMeeting } = useMeetingActions();\n\n useActionCable('MinutesChannel', { minute_id: minuteId }, (response) => setMinutesContext(minuteId, response));\n\n const [selection, setSelection] = useState({\n top: 0,\n show: false,\n active: false,\n text: null,\n images: [],\n });\n\n const handleSelectionChange = useCallback((range, source, editor) => {\n if (isCommentListReadOnly) return;\n\n if (!range || !range.length) {\n return setSelection((state) => ({ ...state, show: false }));\n }\n\n const text = editor.getText(range.index, range.length);\n const images = editor\n .getContents(range.index, range.length)\n .ops.filter((item) => item.insert.image)\n .map((item) => item.insert.image);\n\n setSelection({\n show: true,\n text: text,\n top: editor.getBounds(range).top,\n images: images,\n });\n }, []);\n\n const handleToggleClick = useCallback(() => {\n setSelection((state) => ({ ...state, active: true }));\n }, []);\n\n const handleCancelClick = useCallback(() => {\n setSelection((state) => ({ ...state, active: false }));\n }, []);\n\n if (!loaded) {\n return \n
\n\n \n {contact.name}\n
\n {stateText}
\n\n {resendButton}\n {deleteButton}\n \n {hasComments ? (\n sendBackButton\n ) : (\n
\n \n )}\n\n \n \n
\n
\n );\n});\n\nexport { ReviewStep };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const hideTable = css`\n ${media.tablet} {\n display: none;\n }\n`;\n\nexport const padded = css`\n padding: 35px 35px 0;\n ${media.tablet} {\n padding: 25px 25px 0;\n }\n ${media.mobile} {\n padding: 15px 15px 0;\n padding: 0;\n }\n`;\n\nexport const wrapper = css`\n border: 1px solid ${colors.lighterGrey};\n padding: 32px;\n display: flex;\n height: 100%;\n flex-direction: column;\n ${media.tablet} {\n padding: 15px;\n background-color: ${colors.white};\n border: none;\n box-shadow: 2px 4px 4px rgba(223, 223, 223, 0.25);\n }\n`;\nexport const sendReviewBlock = css`\n ${media.tablet} {\n margin-bottom: 15px;\n }\n`;\n\nexport const sendReviewWrapper = css`\n padding-bottom: 100px;\n ${media.tablet} {\n padding-bottom: 40px;\n }\n ${media.mobile} {\n padding-bottom: 15px;\n }\n`;\n","export { ReviewStep } from './ReviewStep';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ReviewerListTabs } from './../ReviewerListTabs';\nimport { CommentList } from './../CommentList';\nimport { ReviewerModal } from './../ReviewerModal';\n\nimport * as styles from './ReviewerList.styles';\n\nconst ReviewerList = memo(({ minutes, comments, reviews, currentContact }) => {\n const [activeReviewerId, setActiveReviewerId] = useState(null);\n const [isReviewerModalVisible, setIsReviewerModalVisible] = useState(false);\n\n const handleBackClick = () => setActiveReviewerId(null);\n const handleAddReviewerClick = () => setIsReviewerModalVisible(true);\n const handleCloseModalClick = () => setIsReviewerModalVisible(false);\n\n return (\n \n
\n\n \n
\n \n\n \n
\n\n \n
\n\n \n
\n \n
\n \n \n
\n\n \n
\n );\n});\n\nexport { ReviewerList };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const container = css`\n background: ${colors.white};\n position: relative;\n padding: 22px 20px 22px 21px;\n border-left: 1px solid ${colors.lightestGrey};\n height: 100%;\n\n @media (max-width: 480px) {\n min-height: 135px;\n }\n`;\n\nexport const commentList = css`\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n`;\n\nexport const back = css`\n background: ${colors.white};\n box-shadow: 0px 4px 50px rgba(54, 71, 98, 0.12);\n font-size: 16px;\n color: ${colors.cyan};\n position: absolute;\n left: -48px;\n top: 0;\n height: 54px;\n cursor: pointer;\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n transition: 0.4s;\n transform: translate(0%);\n width: 46px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @media (max-width: 480px) {\n left: 0px;\n }\n`;\n","export { ReviewerList } from './ReviewerList';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { ActionsDropdown } from 'components/shared/ActionsDropdown';\nimport { useReviewable } from './../hooks/useReviewable';\n\nimport * as styles from './ReviewerListItem.styles';\n\nconst SENT_STATUSES = ['draft', 'pending'];\n\nconst ReviewStatus = memo(({ show, status }) => {\n const intl = useIntl();\n\n const isSent = SENT_STATUSES.includes(status);\n const klassName = isSent ? 'text-orange' : 'c-secondary';\n const label = isSent\n ? intl.formatMessage({ id: 'ReviewerListItem.sent' })\n : intl.formatMessage({ id: 'ReviewerListItem.received' });\n\n return show && \n
\n\n \n
\n\n \n \n {!activeReviewerId && (\n
\n\n \n
\n )}\n {label}
;\n});\n\nconst CommentsCount = memo(({ show, count }) => {\n const intl = useIntl();\n\n const label = intl.formatMessage({ id: 'ReviewerListItem.commentCount' }, { count });\n\n return show && {label}
;\n});\n\nconst ReviewerListItem = memo(({ review, comments, showComments, onClick }) => {\n const reviewer = review.reviewer.data.attributes;\n const handleClick = onClick.bind(this, reviewer.id);\n\n const intl = useIntl();\n\n const { removeReviewer, handleResendReviewRequest } = useReviewable();\n\n const dropdownOptions = [\n review.status !== 'completed' && intl.formatMessage({ id: 'ReviewerListItem.resendReview' }),\n reviewer.deletable && intl.formatMessage({ id: 'ReviewerListItem.delete' }),\n ].filter(Boolean);\n\n const handleActionsDropdownClick = (option) => {\n switch (option) {\n case intl.formatMessage({ id: 'ReviewerListItem.resendReview' }):\n return handleResendReviewRequest(reviewer);\n case intl.formatMessage({ id: 'ReviewerListItem.delete' }):\n return removeReviewer(reviewer);\n }\n };\n\n return (\n \n
\n );\n});\n\nexport { ReviewerListItem };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const item = css`\n display: flex;\n flex-grow: 1;\n align-items: center;\n justify-content: space-between;\n min-width: 0;\n line-height: 16px;\n padding: 10px 13px;\n cursor: pointer;\n ${media.tablet} {\n flex-direction: column;\n align-items: flex-start;\n }\n\n &:hover {\n background: ${colors.grey};\n border-radius: 6px;\n }\n`;\n","export { ReviewerListItem } from './ReviewerListItem';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport * as styles from './ReviewerListTab.styles';\n\nconst ReviewerListTab = memo(({ isActive, onClick, label, value }) => {\n const tabStyles = [styles.tab.base, isActive && styles.tab.active];\n\n const handleClick = onClick.bind(this, value);\n\n return (\n \n
\n\n {reviewer.name}
\n\n \n
\n \n {review.status !== 'completed' && (\n
\n \n {label}\n
\n );\n});\n\nexport { ReviewerListTab };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const tab = {\n base: css`\n ${fonts.semiBold}\n font-size: 18px;\n color: #ccd0dc;\n margin-right: 18px;\n border-bottom: 2px solid;\n border-color: transparent;\n cursor: pointer;\n\n &:hover {\n color: ${colors.cyan};\n }\n `,\n\n active: css`\n color: ${colors.cyan};\n border-color: ${colors.cyan};\n `,\n};\n","export { ReviewerListTab } from './ReviewerListTab';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { ReviewerListTab } from './../ReviewerListTab';\nimport { ReviewerListItem } from './../ReviewerListItem';\n\nconst ReviewerListTabs = memo(({ reviews, comments, minutes, currentContact, onReviewerClick }) => {\n const tabMap = {\n invited: 1,\n comments: 2,\n };\n\n const intl = useIntl();\n\n const [activeTab, setActiveTab] = useState(tabMap.invited);\n\n const isPendingTabActive = activeTab === tabMap.invited;\n const isCommentsTabActive = activeTab === tabMap.comments;\n\n const getCommentsForReview = (review) => {\n return comments.filter((comment) => comment.author.data.attributes.id === review.reviewer.data.attributes.id);\n };\n\n const reviewers = reviews.map((review) => {\n const reviewComments = getCommentsForReview(review);\n\n return (\n \n
\n\n {reviewers}
\n \n );\n});\n\nexport { ReviewerListTabs };\n","export { ReviewerListTabs } from './ReviewerListTabs';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { Modal } from 'components/shared/Modal';\nimport { Row, Col } from 'react-bootstrap';\nimport { ContactPicker } from 'components/shared/ContactPicker';\nimport { ReviewList } from './../ReviewList';\n\nimport { useReviewable } from './../hooks/useReviewable';\n\nimport * as styles from './ReviewerModal.styles';\n\nconst ReviewerModal = memo(({ show, onClose }) => {\n const { minutes, reviews, reviewers, isReviewerSelected, toggleReviewer, removeReviewer, handleResendReviewRequest } =\n useReviewable();\n\n const intl = useIntl();\n\n return (\n \n
\n\n \n
\n\n \n
\n );\n }\n\n const {\n currentUser: {\n companies: { edges: companies },\n subcommittees,\n },\n } = data;\n\n const companyIds = companies.map((c) => c.node.id);\n const parentCompanies = subcommittees\n .map((subcommittee) => subcommittee.parentCompany)\n .filter((val, idx, array) => array.indexOf(val) === idx)\n .filter((parentCompany) => companyIds.indexOf(parentCompany.id) < 0)\n .map((parentCompany) => ({\n node: { ...parentCompany, companyPermissions: {}, isParentOnly: true },\n }));\n const allCompanies = companies.concat(parentCompanies);\n\n if (!allCompanies.length) {\n return (\n \n
\n );\n }\n\n return allCompanies.map((company) => {\n const {\n node: { id, name, isPending, isActive, isPrimary, isCurrentCompany, slug, companyPermissions },\n } = company;\n\n return (\n \n 
\n
\n )}\n {!isPending && (\n \n
\n {name}
\n \n
\n \n
\n )}\n \n );\n });\n };\n\n const renderSubcommittees = (subcommittees = []) => {\n return (\n \n \n
\n {renderSubcommittees(subcommittees.filter((subcommittee) => subcommittee.parentCompany.id === id))}\n \n \n
\n\n {name}
\n {companyPermissions.canBeManagedByCurrentUser && (\n \n {isPrimary && isActive && (\n
\n \n
\n )}\n\n {companyPermissions.canBeManagedByCurrentUser && !isActive && (\n \n
\n )}\n\n {isCurrentCompany && (\n \n {subcommittees.map((subcommittee) => (\n
\n );\n };\n\n return (\n \n \n {subcommittee.name}\n \n
\n ))}\n \n
\n {isComponentVisible && (\n onTogglePopout()}>\n 
\n \n )}\n
\n \n 
\n {gateway ? (\n \n {currentCompany.name}\n
\n \n
\n ) : (\n <>\n \n
\n )}\n \n );\n});\n\nexport default withIntl(withApollo(BoardSpaceSelect));\n","/** @jsx jsx */\nimport React from 'react';\nimport { css, jsx } from '@emotion/core';\nimport * as styles from './index.styles';\n\nexport default ({ title, link, isActive, navItemWidth, action, iconClassName, insideMore = false, children }) => {\n const Content = () => {\n return (\n <>\n \n \n
\n {!gateway && (\n \n
\n \n
\n {!gateway && (\n \n
\n \n {renderBoardSpaceList()}\n {renderLoadMore()}\n
\n \n {children ? children : }\n
\n {title}\n \n );\n };\n\n return (\n <>\n {action ? (\n \n
\n ) : (\n \n \n
\n\n \n {visibleLinks.map((theLink) => {\n const { title, link, iconClassName, isActive } = theLink;\n return (\n setMoreItemsVisible(true)}\n iconClassName='fas fa-ellipsis-h'\n />\n ) : null}\n
\n \n
\n \n );\n};\n\nexport default withIntl(MobileNavigation);\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nimport { NAV_ITEM_WIDTH } from './constants';\n\nexport const mobileNavWrapper = css`\n display: none;\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 66px;\n padding: 11px 0 7px;\n background-color: ${colors.white};\n box-shadow: 0px 3px 25px rgba(25, 35, 89, 0.12);\n z-index: 1000;\n align-items: center;\n ${media.tablet} {\n display: flex;\n }\n`;\n\nexport const navContainer = (padding) => css`\n display: flex;\n padding: 0 ${`${padding}px`};\n width: 100%;\n justify-content: space-between;\n align-items: center;\n ${media.mobile} {\n padding: 0;\n justify-content: center;\n }\n`;\n\nexport const navItem = (navItemWidth = NAV_ITEM_WIDTH, insideMore = false) => css`\n width: ${insideMore ? '100%' : `${navItemWidth}px`};\n min-width: ${insideMore ? '100%' : `${navItemWidth}px`};\n height: 48px;\n color: ${colors.lightGrey};\n display: flex;\n flex-direction: ${insideMore ? 'row' : 'column'};\n justify-content: ${insideMore ? 'flex-start' : 'flex-end'};\n align-items: center;\n font-size: 20px;\n &:focus,\n &:active {\n color: ${colors.lightGrey};\n }\n`;\n\nexport const navTitle = ({ insideMore = false, isActive }) => css`\n color: ${isActive ? colors.black : colors.lightGrey};\n ${fonts.styledMedium}\n font-weight: 500;\n font-size: ${insideMore ? '14px' : '12px'};\n line-height: ${insideMore ? '16px' : '14px'};\n margin-left: ${insideMore ? '12px' : '0'};\n white-space: nowrap;\n display: flex;\n height: 24px;\n align-items: center;\n`;\n\nexport const navIconWrapper = ({ insideMore = false, isActive }) => css`\n line-height: 1;\n ${insideMore && 'min-width: 25px;'}\n color: ${isActive ? colors.cyan : 'inherit'}\n`;\n\nexport const moreItems = (visible) => css`\n padding: 20px;\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n z-index: 1000;\n background: ${colors.white};\n transition: all 0.2s ease-out;\n transform: ${visible ? 'translate(0, 0%)' : 'translate(0, 100%)'};\n`;\n\nexport const moreItems_header = css`\n ${fonts.styledBold}\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 600;\n font-size: 18px;\n line-height: 21px;\n color: ${colors.black};\n margin-bottom: 20px;\n`;\n\nexport const moreItems_close = css`\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { ReactComponent as Icon } from 'images/icons/alarm-bell.svg';\nimport Dropdown from './../Dropdown';\nimport { useClickOutside } from 'hooks/useClickOutside';\n\nimport * as styles from './Bell.styles';\n\nconst Bell = ({ showBadge, title }) => {\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside(false);\n const handleClick = () => setIsComponentVisible(!isComponentVisible);\n\n const [isBadgeVisible, setIsBadgeVisible] = useState(showBadge);\n const [iconStyles, setIconStyles] = useState(styles.icon.base);\n\n const handleAnimationEnd = () => setIconStyles(styles.icon.base);\n const toggleBadge = (show) => setIsBadgeVisible(show);\n const handleCloseBadge = () => setIsBadgeVisible(false);\n\n const handleSubscription = (show) => {\n toggleBadge(show);\n\n if (!show) return;\n\n setIconStyles([styles.icon.base, styles.icon.animated]);\n };\n\n const badge = isBadgeVisible && ;\n\n return (\n \n \n
\n {hiddenLinks.map((theLink) => {\n const { title, link, iconClassName, isActive } = theLink;\n return (\n setMoreItemsVisible(false)}>\n
\n \n {title ? {title} : null}\n
\n );\n};\n\nexport { Bell };","import { css } from '@emotion/core';\nimport { colors, fonts, media, animations } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nconst hoverColor = HexToRgba(colors.lightGrey, 80);\n\nexport const wrapper = ({ withTitle }) => css`\n position: relative;\n display: flex;\n ${!!withTitle && 'justify-content: space-between;'}\n ${!!withTitle && 'align-items: flex-start;'}\n ${!!withTitle && 'padding: 15px 0;'}\n width: ${!!withTitle ? '100%' : 'auto'};\n\n &:hover {\n .bell__icon {\n path {\n fill: ${hoverColor};\n }\n }\n }\n`;\n\nexport const icon = {\n base: css`\n flex-shrink: 0;\n cursor: pointer;\n\n @media (max-width: 1280px) {\n path {\n fill: white;\n }\n }\n `,\n\n animated: css`\n ${animations.shake}\n `,\n};\n\nexport const badge = ({ withTitle }) => css`\n position: absolute;\n border-radius: 50%;\n cursor: pointer;\n background: ${colors.cyan};\n width: 12px;\n height: 12px;\n top: ${withTitle ? '9px' : '-6px'};\n right: -3px;\n border: 2px solid ${colors.white};\n`;\n\nexport const title = css`\n ${fonts.regular};\n font-weight: 500;\n font-size: 18px;\n line-height: 21px;\n ${media.mobile} {\n font-size: 14px;\n line-height: 16px;\n }\n`;","export { Bell } from './Bell';\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport ClipLoader from 'react-spinners/ClipLoader';\nimport { withIntl } from '../../../utils/v2/intl';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport PlaceholderIcon from 'images/man-with-laptop.jpg';\n\nimport { Notification } from './../Notification';\nimport { Scrollable } from 'components/shared/Scrollable';\nimport { MediaHeader } from 'components/shared/MediaHeader';\n\nimport { useMarkAllNotificationsAsRead } from './../hooks/useMarkAllNotificationsAsRead';\nimport { useNotificationsQuery } from './../data/queries/NotificationsQuery';\nimport { useNotificationsSubscription } from './../hooks/useNotificationsSubscription';\n\nimport * as styles from './Dropdown.styles';\nimport { colors } from 'styles';\n\nconst Dropdown = memo(({ show, close, onMarkAsRead, onSubscription }) => {\n const { data, loading } = useNotificationsQuery({\n skip: !show,\n });\n\n const intl = useIntl();\n\n useNotificationsSubscription({\n onUpdate: () => onSubscription(true),\n });\n\n const { markAllNotificationsAsRead } = useMarkAllNotificationsAsRead({\n onCompleted: onMarkAsRead,\n });\n\n const handleMarkAllAsReadClick = (event) => {\n event.stopPropagation();\n\n const ids = notifications.map((item) => item.id);\n\n markAllNotificationsAsRead(ids);\n };\n\n const renderNotification = (notification) => (\n \n {/* \n \n\n
\n );\n});\n\nexport default withIntl(Dropdown);\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const wrapper = {\n base: css`\n box-shadow: 0px 5px 10px rgba(153, 183, 200, 0.1), 0px 6.4px 14.4px rgba(183, 183, 183, 0.13);\n border-radius: 2px;\n background: ${colors.white};\n display: none;\n position: absolute;\n top: 35px;\n left: 50%;\n transform: translateX(-95%);\n width: 270px;\n z-index: var(--max-z-index);\n\n ${media.tablet} {\n z-index: 99999;\n transform: none;\n position: fixed;\n width: 100%;\n height: calc(100% - var(--nav-height));\n bottom: 0;\n top: var(--nav-height);\n left: 0;\n flex-direction: column;\n border: none;\n box-shadow: none;\n }\n `,\n\n visible: css`\n display: block;\n ${media.tablet} {\n display: flex;\n }\n `,\n};\n\nexport const container = css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n\n &:empty {\n height: 0;\n }\n`;\n\nexport const backIcon = css`\n transform: rotate(180deg);\n margin-right: 5px;\n`;\n\nexport const notifications = css`\n min-height: 200px;\n max-height: 200px;\n ${media.tablet} {\n max-height: none;\n }\n\n .ScrollbarsCustom-Content {\n height: 100%;\n }\n`;\n\nexport const footer = css`\n ${fonts.bold}\n font-size: 12px;\n color: ${colors.black};\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px 15px;\n border-top: 1px solid ${colors.notificationGrey};\n\n &:empty {\n padding: 0;\n }\n\n span {\n cursor: pointer;\n }\n`;\n\nexport const placeholder = {\n base: css`\n ${container}\n display: none;\n flex-direction: column;\n `,\n\n visible: css`\n display: flex;\n `,\n};\n\nexport const placeholderImage = css`\n width: 165px;\n`;\n\nexport const placeholderText = css`\n color: ${colors.cyan};\n font-size: 14px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n`;\n","export { default } from './Dropdown';\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useMarkNotificationAsRead } from './../hooks/useMarkNotificationAsRead';\n\nimport * as styles from './Notification.styles';\nimport Avatar from '../../v2/shared/Avatar/Avatar';\n\nconst Notification = memo(({ id, message, contact, read, createdAgo, onMarkAsRead }) => {\n const wrapperStyles = [styles.wrapper.base, !read && styles.wrapper.unread];\n\n const { markNotificationAsRead } = useMarkNotificationAsRead({\n onCompleted: onMarkAsRead,\n });\n\n const handleClick = (event) => {\n event.stopPropagation();\n\n if (read) return;\n\n markNotificationAsRead(id);\n };\n\n return (\n \n
\n\n \n 
\n
\n\n {notificationList}\n \n
\n {markAllAsReadButton}
\n \n
\n );\n});\n\nexport { Notification };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const wrapper = {\n base: css`\n border-radius: 2px;\n display: flex;\n background: ${colors.white};\n align-items: center;\n width: 100%;\n padding: 18px 15px;\n cursor: pointer;\n border-bottom: 1px solid ${colors.notificationGrey};\n\n &:last-of-type {\n border-bottom: none;\n }\n `,\n\n unread: css`\n background: ${colors.lightBlue};\n `,\n};\n\nexport const message = css`\n font-size: 14px;\n line-height: 16px;\n color: ${colors.black};\n`;\n\nexport const createdAgo = css`\n color: ${colors.muted};\n font-size: 12px;\n line-height: 14px;\n flex: 1 1 100%;\n white-space: nowrap;\n`;\n\nexport const body = css`\n margin-left: 15px;\n`;","export { Notification } from './Notification';\n","import React from 'react';\n\nimport { client } from 'utils/apollo';\nimport { ApolloProvider } from '@apollo/client';\n\nimport { Bell } from './Bell';\n\nexport default ({ showBadge, title = '' }) => (\n \n \n \n
\n \n
\n \n
\n ) : isGoogle ? (\n \n
\n \n 
\n
\n \n
\n \n 
\n
\n {appName}
\n {emailIdentifier}
\n \n \n
\n {name}
\n \n {isMobile\n ? contact_count\n : intl.formatMessage({ id: 'AccessRoleTableRow.contactCount' }, { count: contact_count })}\n
\n \n \n \n
\n
\n );\n});\n\nexport { AccessRolesTable };\n","export { AccessRolesTable } from './AccessRolesTable';\n","import React, { memo, useRef, useEffect, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { withIntl } from '../../../utils/v2/intl';\nimport Multiselect from '../../shared/Select/Multiselect';\n\nconst Filters = memo(({ onChange }) => {\n const intl = useIntl();\n\n const statusOptions = [\n { value: 'default', label: intl.formatMessage({ id: 'Filters.deafult' }) },\n { value: 'custom', label: intl.formatMessage({ id: 'Filters.custom' }) },\n ];\n\n const [selectedStatuses, setSelectedStatuses] = useState(statusOptions);\n\n const loadRoles = () => {\n onChange(selectedStatuses);\n };\n\n useEffect(() => loadRoles(), [selectedStatuses]);\n\n const ref = useRef();\n\n useEffect(() => {\n const node = ref.current;\n\n if (node) {\n node.addEventListener('roles:reload', loadRoles);\n\n return () => {\n node.removeEventListener('roles:reload', loadRoles);\n };\n }\n }, [selectedStatuses]);\n\n return (\n | \n | \n\n \n | \n\n \n | \n\n \n |
|---|
\n
\n );\n});\n\nexport default withIntl(Filters);\n","export { default } from './Filters';\n","/** @jsx jsx */\n\nimport React, { memo, useRef, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { AccessRolesTable } from './../AccessRolesTable';\nimport Filters from './../Filters';\nimport { Spinner } from 'components/shared/Spinner';\nimport { useRoleDrawerActions } from 'store/roleDrawerStoreContext';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport { withIntl } from '../../../utils/v2/intl';\n\nconst List = memo(({ accessRoles, onFiltersChange }) => {\n const { isMobile } = useWindowDimensions();\n const { openViewOnlyDrawer, openDrawer } = useRoleDrawerActions();\n\n const intl = useIntl();\n\n const openAccessRole = (event, accessRoleId) => {\n const accessRole = accessRoles.find((accessRole) => accessRole.id === event.detail);\n\n openViewOnlyDrawer(accessRole.attributes);\n };\n\n const ref = useRef();\n\n useEffect(() => {\n const node = ref.current;\n\n if (node) {\n node.addEventListener('drawer:open', openAccessRole);\n\n return () => {\n node.removeEventListener('drawer:open', openAccessRole);\n };\n }\n }, [accessRoles]);\n\n return (\n \n
\n );\n});\n\nexport default withIntl(List);\n","export { default } from './List';\n","/** @jsx jsx */\n\nimport React, { memo, useMemo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Tooltip } from './../Tooltip';\nimport { CheckBox } from 'components/shared/CheckBox';\n\nimport * as styles from './PermissionsTable.styles';\n\nconst PermissionsTable = memo(({ permissions, accessRolePermissions, onChange, isDisabled }) => {\n const groupedAccessRolePermissions = useMemo(() => {\n return accessRolePermissions.reduce((accumulator, value) => {\n accumulator[value.permission_id] = value.permitted;\n\n return accumulator;\n }, {});\n }, [accessRolePermissions]);\n\n const groupedPermissions = useMemo(() => {\n return permissions.reduce((accumulator, value) => {\n let key = value.attributes.resource_label;\n\n if (!accumulator[key]) {\n accumulator[key] = [];\n }\n\n accumulator[key].push(value);\n\n return accumulator;\n }, {});\n }, []);\n\n const renderTable = () => {\n return Object.keys(groupedPermissions).map((key, index) => renderTableRow(key, index));\n };\n\n const renderTableRow = (label, index) => {\n const items = groupedPermissions[label];\n const bgClass = index % 2 === 0 ? 'even' : 'odd';\n const rows = renderRows(items, bgClass);\n\n return (\n \n
\n\n \n
\n\n \n \n
\n\n \n
\n \n
\n {scope_label}
\n | \n | \n \n | \n
|---|
\n
\n );\n\n const renderButtons = () => {\n if (isDisabled) {\n return null;\n }\n\n const deleteButton = isMobile ? (\n \n ) : (\n \n );\n\n return (\n \n \n
\n\n {getDrawerHeader()}
\n \n
\n {getDrawerHeader()}
\n\n \n
\n\n \n
\n {renderButtons()}\n \n \n\n
\n );\n});\n\nexport { Tooltip };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const wrapper = (isHovered) => css`\n position: relative;\n cursor: pointer;\n margin-right: 10px;\n\n .tooltip-icon {\n color: ${isHovered ? colors.accentColor : 'rgba(0, 0, 0, 0.2)'};\n }\n`;\n\nexport const container = (isHovered) => css`\n ${fonts.regular};\n position: absolute;\n font-size: 12px;\n color: ${colors.black};\n border-radius: 3px;\n box-shadow: -10px 4px 50px rgba(54, 71, 98, 0.25);\n background: ${colors.white};\n width: 160px;\n pointer-events: none;\n text-align: center;\n bottom: auto;\n left: 50%;\n bottom: 30px;\n transform: translateX(-50%);\n opacity: ${isHovered ? 1 : 0};\n transition: opacity 0.2s ease-in-out;\n z-index: 2;\n line-height: 1;\n border: 1px solid ${colors.agendaGrey};\n`;\n\nexport const message = css`\n padding: 10px;\n`;\n\nexport const triangle = css`\n width: 0;\n height: 0;\n position: absolute;\n left: 50%;\n right: 0;\n transform: translateX(-50%);\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid ${colors.white};\n`;\n","export { Tooltip } from './Tooltip';\n","import { useState, useMemo } from 'react';\n\nconst useDropdownRoles = ({ accessRoles, defaultRoleId, currentRoleId }) => {\n const [dropdownRoleId, setDropdownRoleId] = useState(defaultRoleId);\n\n const changeDropdownRole = (option) => setDropdownRoleId(option.value);\n const resetCurrentDropdownRole = () => setDropdownRoleId(defaultRoleId);\n\n const currentDropdownRole = useMemo(() => {\n const defaultRole = accessRoles && accessRoles.find((item) => item.attributes.id === dropdownRoleId);\n\n if (!defaultRole) return;\n\n return {\n value: dropdownRoleId,\n label: defaultRole.attributes.name,\n };\n }, [dropdownRoleId, currentRoleId, accessRoles]);\n\n const dropdownRoleOptions = useMemo(() => {\n if (!accessRoles || !defaultRoleId) return [];\n\n const filtered = accessRoles.filter((item) => item.attributes.id !== currentRoleId);\n\n return filtered.map((item) => ({\n label: item.attributes.name,\n value: item.attributes.id,\n }));\n }, [currentRoleId, accessRoles]);\n\n return {\n dropdownRoleOptions,\n currentDropdownRole,\n changeDropdownRole,\n resetCurrentDropdownRole,\n };\n};\n\nexport { useDropdownRoles };\n","/** @jsx jsx */\n\nimport React, { memo, useRef, useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { useClickOutside } from 'hooks/useClickOutside';\n\nimport { ReactComponent as DotsIcon } from 'images/icons/documents/horizontal-dots-icon.svg';\n\nimport * as styles from './ActionsDropdown.styles';\n\nconst ActionsDropdown = memo(({ options, onClick }) => {\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside();\n\n const show = () => setIsComponentVisible(true);\n\n const handleClick = (option) => {\n onClick(option);\n setIsComponentVisible(false);\n };\n\n const dropdownContent = options.map((option, index) => {\n const handleOptionClick = (e) => {\n e.stopPropagation();\n handleClick(option);\n };\n\n return (\n \n
\n {message}
\n\n \n \n {option}\n
\n );\n });\n\n const dropdown = isComponentVisible && {dropdownContent}
;\n\n return (\n options.length > 0 && (\n \n
\n )\n );\n});\n\nexport { ActionsDropdown };\n","import { css } from '@emotion/core';\nimport { media, fonts, colors } from 'styles';\n\nexport const trigger = css`\n cursor: pointer;\n`;\n\nexport const dropdown = css`\n background: ${colors.white};\n box-shadow: 0px 3px 20px rgba(16, 8, 63, 0.11);\n position: absolute;\n top: 20px;\n right: 0;\n z-index: 2;\n`;\n\nexport const container = css`\n display: inline-block;\n position: relative;\n width: 20px;\n height: 100%;\n display: flex;\n justify-content: center;\n`;\n\nexport const option = css`\n ${fonts.regular}\n color: ${colors.black};\n white-space: nowrap;\n cursor: pointer;\n font-size: 12px;\n line-height: 1;\n padding: 12px 15px;\n border-radius: 0;\n\n ${media.tablet} {\n padding: 15px;\n }\n\n &:hover {\n background: ${colors.lightestGrey};\n }\n\n &.disabled {\n cursor: default;\n color: ${colors.headingGrey};\n }\n`;\n\nexport const icon = css`\n flex-shrink: 0;\n`;\n","export { ActionsDropdown } from './ActionsDropdown';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport Highlighter from 'react-highlight-words';\nimport { useIntl } from 'react-intl';\n\nimport { HighlightTag } from 'components/shared/HighlightTag';\nimport { Dropdown } from 'components/shared/Dropdown';\nimport { DropdownOption } from 'components/shared/DropdownOption';\nimport { formatDuration } from 'helpers/formatDuration';\n\nimport { useRegExpFormatter } from 'hooks/useRegExpFormatter';\n\nimport * as styles from './AgendaPicker.styles';\nimport { icons } from 'styles';\n\nconst AgendaPicker = memo(({ inputLabel, inputValue, dropdownWidth, options, value, onAdd, onRemove, isReadOnly }) => {\n let [isOpen, setIsOpen] = useState(false);\n let [searchTerm, setSearchTerm] = useState('');\n\n const intl = useIntl();\n\n const { formattedRegExp } = useRegExpFormatter(searchTerm);\n\n const handleInputChange = (e) => {\n setSearchTerm(e.target.value || '');\n };\n\n const regex = new RegExp(formattedRegExp, 'gi');\n\n const pickerOptions = options\n .filter((option) => option.id !== value?.id)\n .filter((option) => option.heading.match(regex));\n\n const isSearching = searchTerm.length > 0;\n const hasOptions = pickerOptions.length > 0;\n\n const handleFocus = () => setIsOpen(true);\n const handleBlur = () => setIsOpen(false);\n\n const renderOption = (agenda) => {\n const key = `agenda-picker-${agenda.id}`;\n const handleClick = onAdd.bind(this, agenda);\n const heading = `${agenda.number} ${agenda.heading}`;\n\n return (\n \n
\n\n {dropdown}
\n \n
\n \n
\n\n {formatDuration(agenda.duration_in_minutes)}
\n \n
\n \n\n {value && (\n {dropdownBody}
\n \n
\n )}\n \n );\n});\n\nexport { AgendaPicker };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const items = css`\n overflow: auto;\n max-height: 241px;\n`;\n\nexport const duration = css`\n ${fonts.regular}\n color: ${colors.lightGrey};\n line-height: 1;\n font-size: 12px;\n`;\n\nexport const value = css`\n padding: 7px 15px 8px 20px;\n background: ${colors.agendaGrey};\n border-radius: 2px;\n margin-top: 5px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n","export { AgendaPicker } from './AgendaPicker';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport * as styles from './AlertBox.styles';\n\nconst AlertBox = memo(({ primaryMessage, secondaryMessage }) => {\n return (\n \n
\n\n {!isReadOnly && }\n \n {value.number} {value.heading}\n
\n\n {formatDuration(value.duration_in_minutes)}
\n \n {primaryMessage}\n {secondaryMessage}\n
\n );\n});\n\nexport { AlertBox };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nexport const wrapper = css`\n background: ${colors.lightCyan};\n border-radius: 2px;\n display: flex;\n margin: 15px 0;\n align-items: flex-end;\n padding: 12px 20px;\n`;\n\nexport const message = {\n primary: css`\n ${fonts.bold}\n font-size: 12px;\n color: ${colors.cyan};\n `,\n\n secondary: css`\n ${fonts.regular}\n margin-left: 1ch;\n font-size: 12px;\n color: ${colors.mediumGrey};\n `,\n};\n","export { AlertBox } from './AlertBox';\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { memo, useEffect, useRef, useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport Modal from 'react-bootstrap/Modal';\n\nimport { ReactComponent as CloseIcon } from 'images/icons/alert-close.svg';\n\nimport { ReactComponent as GreenBG } from 'images/icons/BG-green.svg';\nimport { ReactComponent as YellowBG } from 'images/icons/BG-yellow.svg';\nimport { ReactComponent as RedBG } from 'images/icons/BG-red.svg';\n\nimport { ReactComponent as SuccessSign } from 'images/icons/success-sign.svg';\nimport { ReactComponent as FailureSign } from 'images/icons/failure-sign.svg';\nimport { ReactComponent as InfoSign } from 'images/icons/info-sign.svg';\n\nimport * as styles from './AlertPopup.styles';\n\nconst AlertPopup = memo(({ show, children, headerText, popupType, onClose, onTransitionEnd }) => {\n const { current: backgrounds } = useRef({\n success: \n
\n\n {backgrounds[popupType]}\n\n {signs[popupType]}
\n {headerText}
\n\n {children}
\n \n
\n );\n\n const avatar = avatarUrl || avatarURL ? image : circle;\n\n return <>{avatar};\n});\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\n\nimport * as styles from './Badge.styles';\n\nconst Badge = ({ status, badgeStyles }) => {\n if (!status) {\n return <>;\n }\n\n const dasherizedStatus = status.replace('_', '-');\n const humanizedStatus = status.replace('_', ' ');\n\n const klassName = `badge badge-large badge-${dasherizedStatus}`;\n const applicableStyles = [styles.base, badgeStyles];\n\n return (\n {initials}
\n \n {humanizedStatus}\n
\n );\n};\n\nexport { Badge };\n","import { css } from '@emotion/core';\n\nexport const base = css`\n text-transform: capitalize;\n`;\n","export { Badge } from './Badge';\n","import React, { useState, useMemo } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { withIntl } from '../../../utils/v2/intl';\nimport { AlertPopup } from 'components/shared/AlertPopup';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\n\nconst ButtonWithConfirmation = ({\n button,\n headerText,\n confirmButtonText,\n confirmButtonUrl,\n dataMethod,\n singleOption,\n alertChildren,\n confirmationText,\n onTransitionEnd,\n onConfirm,\n popupType,\n}) => {\n const [isVisible, setIsVisible] = useState(false);\n const { isMobile } = useWindowDimensions();\n\n const intl = useIntl();\n\n const show = () => setIsVisible(true);\n const hide = () => setIsVisible(false);\n\n const handleConfirm = () => {\n onConfirm && onConfirm();\n hide();\n };\n\n const confirmationButtonText = useMemo(() => {\n return confirmButtonText || intl.formatMessage({ id: 'ButtonWithConfirmation.yesConfirm' });\n }, []);\n\n return (\n <>\n \n {button}\n
\n\n {confirmationText}
\n\n {alertChildren}\n\n \n {confirmButtonUrl && (\n \n {confirmationButtonText}\n \n )}\n\n {!confirmButtonUrl && (\n \n )}\n\n {!singleOption && (\n \n )}\n
\n \n \n );\n};\n\nexport default withIntl(ButtonWithConfirmation);\n","export { default } from './ButtonWithConfirmation';\n","import React, { memo, useState } from 'react';\n\nimport FileViewer from 'components/v2/shared/FileViewer';\nimport { useFileViewer } from 'components/documents/hooks/useFileViewer';\n\nexport default memo(({ buttonText, documentName, documentUrl, className }) => {\n const previewDocument = () => openFileViewer();\n\n const { fileViewerContext, openFileViewer, closeFileViewer } = useFileViewer();\n\n return (\n <>\n \n {buttonText}\n
\n\n {buttonText}
;\n\n const buttonWithIcon = (\n \n \n {buttonText}\n
\n );\n\n return (\n {badgeText}
}\n \n );\n }\n);\n\nexport { CheckBox };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const checkbox = css`\n position: relative;\n margin-bottom: 10px;\n`;\n\nexport const input = css`\n width: 0;\n height: 0;\n`;\n\nexport const label = css`\n padding-left: 25px !important;\n &:before {\n left: 0 !important;\n margin: 0 !important;\n }\n &:after {\n left: 4px !important;\n margin: 0 !important;\n }\n`;\n","export { CheckBox } from './CheckBox';\n","import axios from 'axios';\n\nimport { intl } from '../../../contexts/v2/TranslationContext';\n\nexport default class API {\n static handleError({ response: { data } }) {\n let message = data.message || intl.formatMessage({ id: 'ContactPicker.error' });\n\n displayFlashMessage(message, 'error');\n }\n\n static loadContacts(query, withPendingParam, withCalendarParam = false, onLoad) {\n const companyId = getCompanySlug();\n\n return axios\n .get(\n `/api/${companyId}/contacts.json?with_pending=${withPendingParam}&with_calendar=${withCalendarParam}&query=${query}`\n )\n .then((response) => response.data)\n .then(onLoad)\n .catch(this.handleError);\n }\n}\n","/** @jsx jsx */\n\nimport React, { memo, useState, useEffect, createRef } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { SVG } from 'components/shared/SVG';\nimport api from './API';\nimport { Dropdown } from 'components/shared/Dropdown';\nimport { DropdownOption } from 'components/shared/DropdownOption';\nimport Avatar from 'components/shared/Avatar';\nimport InvitationForm from './InvitationForm';\nimport Highlighter from 'react-highlight-words';\nimport { HighlightTag } from 'components/shared/HighlightTag';\nimport { Label } from 'components/shared/Input/Label';\n\nimport { useRegExpFormatter } from 'hooks/useRegExpFormatter';\n\nimport { ReactComponent as SearchIcon } from 'images/icons/documents/search-icon.svg';\n\nimport Invite from 'images/icons/mail-invite.svg';\nimport { ReactComponent as Exclamation } from 'images/icons/circle-exclamation.svg';\n\nimport * as styles from './ContactPicker.styles';\nimport { icons } from 'styles';\n\nconst ContactPicker = memo(\n ({\n inputLabel,\n values,\n placeholder,\n persistContact,\n onToggleOption,\n dropdownOptions,\n contactOption,\n isSelected,\n excludeId,\n isOptionEnabled,\n addContact,\n withInviteOption,\n dropdownWidth,\n dropdownIsOpen,\n dropdownStyles,\n standalone,\n isReadOnly,\n isDisabled,\n isMeetingOrganizerPicker,\n withPending,\n withConnectedCalendar,\n }) => {\n const [isLoading, setIsLoading] = useState(false);\n const [options, setOptions] = useState(dropdownOptions || []);\n const [isOpen, setIsOpen] = useState(!!dropdownIsOpen);\n\n const [searchTerm, setSearchTerm] = useState('');\n const [isFormOpen, setIsFormOpen] = useState(false);\n\n const { formattedRegExp } = useRegExpFormatter(searchTerm);\n\n const intl = useIntl();\n\n const picker = createRef(null);\n\n useEffect(() => {\n setOptions(dropdownOptions || []);\n }, [dropdownOptions]);\n\n const refetchContacts = () => {\n let withPendingParam = withPending || false;\n let withConnectedCalendarParam = withConnectedCalendar || false;\n\n api.loadContacts(searchTerm, withPendingParam, withConnectedCalendarParam, (contacts) => {\n setOptions(contacts);\n });\n };\n\n useEffect(() => {\n const node = picker.current;\n\n if (node) {\n node.addEventListener('contactpicker:reload', refetchContacts);\n\n return () => {\n node.removeEventListener('contactpicker:reload', refetchContacts);\n };\n }\n }, []);\n\n useEffect(() => {\n if (dropdownOptions) return;\n\n let isMounted = true;\n\n setIsLoading(true);\n\n let withPendingParam = withPending || false;\n let withConnectedCalendarParam = withConnectedCalendar || false;\n\n api.loadContacts(searchTerm, withPendingParam, withConnectedCalendarParam, (contacts) => {\n if (isMounted) {\n setOptions(contacts);\n setIsLoading(false);\n }\n });\n\n return () => {\n isMounted = false;\n };\n }, []);\n\n useEffect(() => {\n setIsOpen(!!dropdownIsOpen);\n }, [dropdownIsOpen]);\n\n useEffect(() => {\n if (isOpen) handleFocus();\n }, [isOpen, handleFocus]);\n\n useEffect(() => autoCloseForm(), [searchTerm]);\n\n const autoCloseForm = () => {\n if (isFormOpen && !isSearching) {\n closeForm();\n }\n };\n\n const handleSubmit = (contact) => {\n addContact(contact);\n closeForm();\n };\n\n const handleInputChange = (e) => {\n setSearchTerm(e.target.value || '');\n };\n\n const handleFocus = () => setIsOpen(true);\n\n const handleBlur = () => {\n if (dropdownIsOpen) return;\n\n setIsOpen(false);\n };\n\n const onInvite = () => setIsFormOpen(true);\n\n const closeForm = () => {\n setIsFormOpen(false);\n picker.current && picker.current.focus();\n };\n\n const opts = options.filter((item) => item.id !== excludeId);\n\n const pickerOptions = standalone\n ? opts.filter((opt) => !values.find((value) => value.id === opt.id))\n : withInviteOption\n ? [...opts, ...values.filter((value) => !value.withContact)]\n : opts;\n\n const uniqueEmail = !pickerOptions.map((item) => item.email).includes(searchTerm);\n\n const regexp = new RegExp(formattedRegExp, 'gi');\n const filteredOptions = pickerOptions.filter((item) => item.email.match(regexp) || item.name.match(regexp));\n\n const isSearching = searchTerm.length > 0;\n const hasOptions = filteredOptions.length > 0;\n\n const checkmark = (\n \n \n
\n );\n\n const highlighter = (contact) => (\n \n {option(contact, highlighter)}\n\n {!standalone && asSelected && checkmark}\n
\n );\n };\n\n const isContactEnabled = (contact) => {\n if (isOptionEnabled) {\n return isOptionEnabled(contact);\n } else {\n return true;\n }\n };\n\n const handleToggle = (contact) => {\n const remainingOptions = filteredOptions.filter((item) => item.id !== contact.id);\n\n onToggleOption(contact);\n\n if (!remainingOptions.length) {\n setIsOpen(false);\n }\n };\n\n const optionsToDisplay = filteredOptions.map((contact, index) => {\n const optionKey = `picker-${contact.id}-${index}`;\n const handleClick = () => {\n if (isContactEnabled(contact)) {\n handleToggle(contact);\n }\n };\n const asSelected = isSelected(contact);\n\n return (\n \n \n \n
\n );\n\n const dropDown = isFormOpen ? (\n \n {isMeetingOrganizerPicker && (\n
\n );\n\n const inputPlaceholder = placeholder || intl.formatMessage({ id: 'ContactPicker.enterName' });\n\n if (isReadOnly) {\n return standalone && values.length > 0 ? (\n <>\n \n\n \n
\n )}\n \n
\n \n
\n\n {isSearching && uniqueEmail && withInviteOption && inviteOption}\n {dropdownContent()}
\n \n {values.map((contact) => (\n
\n \n ) : null;\n }\n\n return (\n <>\n \n
\n ))}\n \n
\n {contact.name}
\n \n {values.map((contact) => (\n
\n )}\n \n );\n }\n);\n\nexport { ContactPicker };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const inviteOption = css`\n display: flex;\n align-items: center;\n background: ${colors.darkGrey};\n padding: 11px 21px;\n\n &:hover {\n cursor: pointer;\n }\n\n span {\n margin-left: 13px;\n color: ${colors.black};\n font-size: 12px;\n line-height: 20px;\n }\n`;\n\nexport const items = css`\n overflow: auto;\n max-height: 241px;\n`;\n\nexport const organizerNote = css`\n display: flex;\n margin: 7px;\n background: ${colors.lightOrange};\n font-size: 14px;\n\n svg {\n width: 85px;\n margin-top: 27px;\n margin-left: 7px;\n }\n`;\n","/** @jsx jsx */\n\nimport React, { memo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { ReactComponent as UserIcon } from 'images/icons/user-icon.svg';\nimport { ReactComponent as EmailIcon } from 'images/icons/email-icon.svg';\n\nimport { Input } from 'components/shared/Input';\n\nimport * as styles from './InvitationForm.styles';\n\nexport default memo(({ searchTerm, onClose, onSubmit, persistContact }) => {\n let [invitation, setInvitation] = useState({ email: '', name: '' });\n let [invitationErrors, setInvitationErrors] = useState({});\n\n const intl = useIntl();\n\n useEffect(() => prefillInvitation(), [searchTerm]);\n\n const prefillInvitation = () => {\n if (!searchTerm.length) return;\n\n if (searchTerm.includes('@')) {\n setInvitation({ email: searchTerm, name: '' });\n } else {\n setInvitation({ email: '', name: searchTerm });\n }\n };\n\n const handleInputChange = (e) => {\n setInvitation({ ...invitation, [e.target.name]: e.target.value });\n };\n\n const handleSubmit = (signatory) => {\n persistContact(invitation, afterSubmit, displayErrors);\n };\n\n const displayErrors = (error) => {\n setInvitationErrors(error.response.data.errors);\n };\n\n const afterSubmit = (signatory) => {\n setInvitation({ email: '', name: '' });\n onSubmit(signatory);\n };\n\n const userIcon = \n
\n ))}\n \n
\n\n \n {contact.name}
\n \n
\n );\n});\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const form = css`\n padding: 22px 18px;\n`;\n\nexport const heading = css`\n ${fonts.bold}\n font-size: 12px;\n line-height: 16px;\n color: ${colors.black};\n margin-bottom: 17px;\n`;\n\nexport const icon = css`\n margin-bottom: 1px;\n`;\n","export { ContactPicker } from './ContactPicker';\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport Popover from 'react-bootstrap/Popover';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\n\nimport * as styles from './CopyPopover.styles';\n\nconst CopyPopover = memo(({ children }) => {\n const copyPopover = (\n \n
\n\n \n
\n\n \n
\n\n \n \n \n \n\n
\n );\n }\n);\n\nDateInput.propTypes = {\n name: PropTypes.string,\n icon: PropTypes.object,\n iconPosition: PropTypes.oneOf(['left', 'right']),\n label: PropTypes.string,\n placeholder: PropTypes.string,\n isRequired: PropTypes.bool,\n isDisabled: PropTypes.bool,\n errorMessage: PropTypes.string,\n value: PropTypes.object,\n onChange: PropTypes.func,\n};\n\nexport { DateInput };\n","export { DateInput } from './DateInput';\n","/** @jsx jsx */\n\nimport React, { memo, useRef, useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\n\nimport 'react-dates/initialize';\nimport { DayPickerSingleDateController } from 'react-dates';\n\nimport * as styles from './DatePicker.styles';\n\nconst DatePicker = memo(({ date, show, onDateChange, disablePastDates }) => {\n const { current: navPrevIcon } = useRef();\n const { current: navNextIcon } = useRef();\n\n const noop = () => {};\n\n const applicableStyles = [styles.datePicker.base, show && styles.datePicker.visible];\n\n const isOutsideRange = useCallback((day) => {\n if (!disablePastDates) return;\n\n const today = moment().parseZone();\n\n return day.isBefore(today, 'day');\n }, []);\n\n return (\n \n
\n \n
\n\n {!isReadOnly && !isDisabled && (\n \n
\n );\n});\n\nDatePicker.propTypes = {\n date: PropTypes.object,\n show: PropTypes.bool,\n onDateChange: PropTypes.func,\n};\n\nexport { DatePicker };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const datePicker = {\n base: css`\n .DayPicker {\n visibility: hidden;\n box-shadow: 0px 1.2px 3.6px rgba(0, 72, 90, 0.1), 0px 6.4px 14.4px rgba(0, 77, 97, 0.13);\n border-radius: 2px;\n padding: 17px 19px 13px 15px;\n width: 230px;\n position: absolute !important;\n z-index: 3;\n\n .DayPicker_weekHeader__vertical {\n padding: 0 !important;\n white-space: nowrap;\n top: 27px;\n left: -2px;\n margin-left: 0 !important;\n\n li {\n display: none;\n width: 28px !important;\n }\n }\n\n .CalendarMonthGrid {\n width: 194px !important;\n }\n\n .DayPickerNavigation_button {\n .prev,\n .next {\n font-weight: 300;\n font-size: 12px;\n position: absolute;\n top: 5px;\n }\n\n .prev {\n right: 31px;\n }\n\n .next {\n right: 6px;\n }\n }\n\n .CalendarMonth {\n padding: 0 !important;\n }\n\n .CalendarMonth_table {\n margin: 0 auto;\n }\n\n .CalendarMonth_caption {\n ${fonts.bold}\n font-size: 14px;\n text-align: left;\n padding-left: 7px;\n padding-top: 0;\n padding-bottom: 25px;\n color: ${colors.black};\n }\n\n .CalendarDay__default {\n ${fonts.regular}\n border: none;\n font-size: 12px;\n padding: 0;\n color: ${colors.black};\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background: ${colors.cyan};\n border-radius: 14px;\n border: none;\n color: white;\n }\n\n &.CalendarDay__blocked_out_of_range {\n color: ${colors.mediumGrey};\n\n &:hover {\n background: none;\n border-radius: 0;\n }\n }\n\n &.CalendarDay__selected {\n background: ${colors.cyan};\n border-radius: 50px;\n color: white;\n\n &.CalendarDay__blocked_out_of_range:hover {\n background: ${colors.cyan};\n border-radius: 50px;\n color: white;\n }\n }\n }\n\n .DayPicker_weekHeader_li {\n visibility: hidden;\n font-size: 0;\n }\n\n .DayPicker_weekHeader_li::first-letter {\n ${fonts.bold}\n visibility: visible;\n color: ${colors.black};\n font-size: 12px;\n }\n }\n `,\n\n visible: css`\n .DayPicker {\n visibility: visible;\n\n .DayPicker_weekHeader__vertical {\n li {\n display: inline-block;\n }\n }\n }\n `,\n};\n","export { DatePicker } from './DatePicker';\n","import React, { memo, useState, useEffect } from 'react';\nimport { Spinner } from './../Spinner';\n\nconst DelayedSpinner = memo(({ delay }) => {\n const [show, setShow] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setShow(true), delay);\n return () => clearTimeout(timer);\n });\n\n return show && \n \n
\n );\n});\n\nexport { DocumentViewer };\n","import { css } from '@emotion/core';\n\nexport const iframe = css`\n width: 100%;\n border: none;\n height: 90vh;\n`;\n\nexport const wrapper = css`\n width: 90%;\n margin: 0 auto;\n display: flex;\n justify-content: center;\n flex-direction: column;\n height: 100%;\n`;\n","export { DocumentViewer } from './DocumentViewer';\n","/** @jsx jsx */\n\nimport React, { memo, forwardRef } from 'react';\nimport { css, jsx } from '@emotion/core';\n\nimport * as styles from './Drawer.styles';\n\nconst Drawer = memo(\n forwardRef(({ drawerId, onClose, ...props }, ref) => {\n return (\n \n {onClose && }\n {props.children}\n
\n );\n })\n);\n\nexport { Drawer };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const drawer = css`\n background-color: ${colors.white};\n display: block;\n height: 100vh;\n overflow: auto;\n position: fixed;\n transition: transform 0.2s ease-in-out;\n width: 450px;\n z-index: var(--above-max-z-index);\n transform: translateX(460px);\n transform: translateX(100%);\n right: 0;\n will-change: transform;\n top: 0;\n bottom: 0;\n box-shadow: none;\n\n @media (max-width: 767px) {\n height: 100%;\n width: 100%;\n }\n`;\n\nexport const close = css`\n top: 26px;\n font-size: 14px;\n right: 35px;\n z-index: 3;\n position: absolute;\n color: ${colors.black};\n\n &:hover {\n cursor: pointer;\n opacity: 0.75;\n }\n`;\n","export { Drawer } from './Drawer';\n","/** @jsx jsx */\n\nimport React, { memo, useState, useEffect, forwardRef } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport { Input } from 'components/shared/Input';\nimport { Label } from 'components/shared/Input/Label';\n\nimport { ReactComponent as ClearIcon } from 'images/icons/purple-cross.svg';\n\nimport Skeleton from 'react-loading-skeleton';\nimport * as styles from './Dropdown.styles';\n\nconst Dropdown = memo(\n forwardRef(\n (\n {\n dropdownId,\n inputId,\n inputPlaceholder,\n inputValue,\n inputIcon,\n inputIconPosition,\n rotatableIcon,\n inputError,\n inputLabel,\n onInputChange,\n isOpen,\n onFocus,\n onBlur,\n isLoading,\n isDisabled,\n dropdownWidth,\n dropdownStyles,\n standalone,\n withClearIcon,\n ...props\n },\n dropdownRef\n ) => {\n const handleBlur = (event) => {\n const currentTarget = event.currentTarget;\n\n setTimeout(() => {\n const withinElement = currentTarget.contains(document.activeElement);\n\n if (!withinElement) {\n onBlur && onBlur();\n }\n }, 0);\n };\n\n const skeleton = (\n \n
\n );\n\n const handleClear = () => {\n onInputChange({ target: { value: '' } });\n onBlur();\n };\n\n const childrenStyles = [styles.dropdown(dropdownWidth || 346), dropdownStyles];\n\n const children = isOpen && {isLoading ? skeleton : props.children}
;\n\n return (\n <>\n \n {children}
\n \n \n );\n }\n )\n);\n\nexport { Dropdown };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const component = css`\n outline: none;\n position: relative;\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const clear = css`\n position: absolute;\n top: 50%;\n right: 15px;\n transform: translateY(-50%);\n cursor: pointer;\n`;\n\nexport const wrapper = css`\n width: 100%;\n position: relative;\n`;\n\nexport const dropdown = (width) => css`\n ${fonts.regular}\n width: 100%;\n position: absolute;\n box-shadow: 0px 1.2px 3.6px rgba(0, 72, 90, 0.1), 0px 6.4px 14.4px rgba(0, 77, 97, 0.13);\n border-radius: 2px;\n height: auto;\n z-index: 3;\n max-width: ${width}px;\n background: ${colors.white};\n font-size: 14px;\n line-height: 20px;\n color: ${colors.black};\n ${media.mobile} {\n max-width: 100%;\n }\n`;\n\nexport const skeleton = css`\n padding: 7px 21px;\n`;\n","export { Dropdown } from './Dropdown';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './DropdownOption.styles';\n\nconst DropdownOption = memo(({ noResults, onClick, disabled, ...props }) => {\n if (noResults) {\n return (\n \n
\n );\n }\n\n return (\n \n {props.children}\n
\n );\n});\n\nexport { DropdownOption };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const option = (isLast) => css`\n padding-top: 10px;\n padding-right: 12px;\n padding-left: 21px;\n padding-bottom: 10px;\n\n &:hover {\n cursor: pointer;\n background-color: ${colors.lightCyan};\n }\n`;\n\nexport const noResults = css`\n padding: 21px 12px 21px 21px;\n`;\n","export { DropdownOption } from './DropdownOption';\n","/** @jsx jsx */\n\nimport React, { memo, useRef, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { useKeyPress } from 'hooks/useKeyPress';\nimport { Error } from 'components/shared/Input/Error';\n\nimport * as styles from './EditableInput.styles';\n\nconst EditableInput = memo(\n ({\n value,\n onClick,\n error,\n onChange,\n onCancel,\n isEditable,\n minWidth,\n placeholderText,\n onUpdate,\n maxWidth,\n isReadOnly,\n withButton,\n }) => {\n const [editableText, setEditableText] = useState(value || '');\n const [editableWidth, setEditableWidth] = useState(minWidth || 0);\n\n const Enter = useKeyPress('Enter');\n const Escape = useKeyPress('Escape');\n\n const editableRef = useRef();\n const measureRef = useRef();\n\n useEffect(() => setEditableText(value || ''), [value]);\n useEffect(() => setEditableCursor(), [isEditable]);\n useEffect(() => trackEditableWidth(), [editableText, isEditable]);\n useEffect(() => handleKeyPress(), [Enter, Escape]);\n\n const changeText = (event) => {\n const text = event.target.value || '';\n setEditableText(text);\n onChange && onChange(text);\n };\n\n const setEditableCursor = () => {\n if (!isEditable) return;\n\n editableRef.current.focus();\n\n editableRef.current.selectionStart = editableText.length;\n editableRef.current.selectionEnd = editableText.length;\n };\n\n const trackEditableWidth = () => {\n if (!measureRef.current) return;\n\n const { width } = measureRef.current.getBoundingClientRect();\n const inputWidth = minWidth && width < minWidth ? minWidth : width;\n\n setEditableWidth(inputWidth + 2);\n };\n\n const handleKeyPress = () => {\n if (isEditable && Enter) return updateText();\n if (isEditable && Escape) return discardChanges();\n };\n\n const updateText = () => {\n if (error || !editableText.trim().length) {\n discardChanges();\n } else if (editableText === value) {\n onCancel();\n } else {\n onUpdate(editableText);\n }\n };\n\n const discardChanges = () => {\n setEditableText(value);\n onCancel();\n };\n\n const measure = (\n \n {editableText}\n
\n );\n\n const editableInputStyles = styles.input(editableWidth, !!error);\n\n const editableInput = isEditable && (\n \n {placeholder}\n \n
\n );\n\n if (isReadOnly) {\n return {placeholder};\n }\n\n return (\n \n {measure}\n {staticText}\n\n \n {editableInput}\n
\n \n );\n }\n);\n\nexport { EditableInput };\n","import { css } from '@emotion/core';\nimport { fonts, colors, icons } from 'styles';\n\nexport const icon = css`\n ${icons.base}\n color: ${colors.lighterGrey};\n font-size: 12px;\n margin-left: 7px;\n`;\n\nexport const input = (width, hasError) => css`\n ${fonts.regular}\n background: ${colors.white};\n border: 1px solid ${hasError ? colors.red : '#DFDFDF'};\n color: ${hasError ? colors.red : colors.black};\n border-radius: 3px;\n min-width: 1px;\n width: ${width}px;\n box-sizing: content-box;\n cursor: text;\n padding: 3px 5px;\n max-width: 100%;\n\n &:focus {\n border: 1px solid ${hasError ? colors.red : colors.cyan} !important;\n }\n`;\n\nexport const measure = css`\n white-space: pre;\n visibility: hidden;\n position: absolute;\n padding: 0;\n opacity: 0;\n left: 0;\n top: 0;\n`;\n\nexport const staticText = {\n base: css`\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n white-space: pre;\n `,\n\n placeholder: css`\n color: ${colors.lightGrey};\n `,\n};\n","export { EditableInput } from './EditableInput';\n","/** @jsx jsx */\n\nimport React, { memo, useRef, useState, useEffect } from 'react';\nimport TextareaAutosize from 'react-autosize-textarea';\nimport { jsx } from '@emotion/core';\n\nimport { useKeyPress } from 'hooks/useKeyPress';\n\nimport * as styles from './EditableTextArea.styles';\n\nconst EditableTextArea = memo(({ value, placeholder, onBlur, isDisabled }) => {\n const [editableText, setEditableText] = useState(value);\n const [isEditable, setIsEditable] = useState(false);\n\n const Escape = useKeyPress('Escape');\n\n const editableRef = useRef();\n\n useEffect(() => setEditableText(value), [value]);\n\n useEffect(() => setEditableCursor(), [isEditable]);\n\n useEffect(() => handleKeyPress(), [Escape]);\n\n const enableEditable = () => {\n setIsEditable(true);\n };\n\n const disableEditable = () => {\n setIsEditable(false);\n };\n\n const changeText = (event) => {\n setEditableText(event.target.value || '');\n };\n\n const setEditableCursor = () => {\n if (!isEditable) return;\n\n editableRef.current.focus();\n\n editableRef.current.selectionStart = editableText.length;\n editableRef.current.selectionEnd = editableText.length;\n };\n\n const handleKeyPress = () => {\n if (isEditable && Escape) return discardChanges();\n };\n\n const updateText = () => {\n if (!editableText.length) {\n discardChanges();\n } else if (editableText === value) {\n disableEditable();\n } else {\n onBlur(editableText);\n disableEditable();\n }\n };\n\n const discardChanges = () => {\n setEditableText(value);\n disableEditable();\n };\n\n const editableInput = isEditable && (\n \n
\n );\n\n const staticTextStyles = [styles.staticText.base, !editableText.length && styles.staticText.placeholder];\n\n const placeholderText = editableText.length > 0 ? editableText : placeholder;\n\n const staticText = !isEditable && (\n \n {placeholderText}\n \n
\n );\n\n if (isDisabled) {\n return (\n value && (\n \n {value}\n
\n )\n );\n }\n\n return (\n \n {staticText}\n {editableInput}\n \n );\n});\n\nexport { EditableTextArea };\n","import { css } from '@emotion/core';\nimport { colors, icons } from 'styles';\n\nexport const icon = css`\n ${icons.base}\n color: ${colors.lighterGrey};\n font-size: 12px;\n margin-left: 10px;\n`;\n\nexport const editableIcon = css`\n ${icon}\n margin-top: 5px;\n`;\n\nexport const staticText = {\n base: css`\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n white-space: pre-line;\n `,\n\n placeholder: css`\n color: ${colors.red};\n `,\n};\n\nexport const textArea = css`\n background: ${colors.white};\n resize: none;\n border: 1px solid #dfdfdf;\n border-radius: 3px;\n min-width: 1px;\n width: 100%;\n padding: 8px 12px;\n`;\n","export { EditableTextArea } from './EditableTextArea';\n","/** @jsx jsx */\nimport React, { memo, useState, useRef, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport * as styles from './EmailChips.styles';\n\nimport { useKeyPress } from 'hooks/useKeyPress';\n\nconst EmailChips = memo(({ onImport, importedEmails }) => {\n const addInputRef = useRef(null);\n\n const intl = useIntl();\n\n const emailRegExp = new RegExp(/[\\w\\d\\.-]+@[\\w\\d\\.-]+\\.[\\w\\d\\.-]+/g);\n\n const [emails, setEmails] = useState([]);\n const [inputValue, setInputValue] = useState('');\n const [validationError, setValidationError] = useState(null);\n\n const onWrapperClick = () => {\n return addInputRef.current.focus();\n };\n\n const Enter = useKeyPress('Enter');\n const Tab = useKeyPress('Tab');\n const Comma = useKeyPress(',');\n\n const handleKeyPress = () => {\n if (!inputValue) return;\n\n if (Enter || Tab || Comma) {\n event.preventDefault();\n\n var value = inputValue.trim();\n\n if (value && isValid(value)) {\n setEmails((currentEmails) => Array.from(new Set([...currentEmails, value])));\n setInputValue('');\n }\n }\n };\n\n useEffect(() => handleKeyPress(), [Enter, Tab, Comma]);\n\n const handleChange = () => {\n setInputValue(event.target.value);\n setValidationError(null);\n };\n\n const handleDelete = (emailToDelete) => {\n return setEmails(emails.filter((email) => email !== emailToDelete));\n };\n\n const handleImport = () => {\n onImport(emails);\n\n setEmails([]);\n };\n\n const handlePaste = () => {\n event.preventDefault();\n\n var paste = event.clipboardData.getData('text');\n var emails = paste.match(emailRegExp, 'g');\n\n if (emails) {\n var toBeAdded = emails.filter((email) => !isInList(email));\n\n setEmails((currentEmails) => Array.from(new Set([...currentEmails, ...toBeAdded])));\n }\n };\n\n const isValid = (email) => {\n let error = null;\n\n if (isInList(email)) {\n error = intl.formatMessage({ id: 'EmailChips.emailAdded' }, { email });\n }\n\n if (!isEmail(email)) {\n error = intl.formatMessage({ id: 'EmailChips.emailInvalid' }, { email });\n }\n\n if (error) {\n setValidationError(error);\n\n return false;\n }\n\n return true;\n };\n\n const isInList = (email) => {\n return emails.includes(email) || importedEmails.includes(email);\n };\n\n const isEmail = (email) => {\n return emailRegExp.test(email);\n };\n\n const addedEmails = emails.map((email, index) => {\n const onDelete = handleDelete.bind(this, email);\n\n return (\n \n {email}\n
\n );\n });\n\n return (\n <>\n \n x\n
\n \n \n
\n\n {addedEmails}
\n\n \n \n \n
\n\n {validationError && \n
\n \n
\n \n
\n {validationError}
}\n \n \n );\n});\n\nexport { EmailChips };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const wrapper = css`\n .wrapper {\n border: 1px solid transparent;\n border-color: rgba(197, 202, 218, 0.6);\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 450px;\n height: 190px;\n padding: 15px 15px 0px 15px;\n max-width: 100%;\n }\n\n .wrapper.has-error {\n border-color: ${colors.red};\n }\n\n .email-wrapper {\n overflow-y: auto;\n height: 150px;\n align-content: flex-start;\n }\n\n .input {\n width: 100%;\n height: 45px;\n border: none;\n margin-top: auto;\n\n &::placeholder {\n color: ${colors.mediumGrey} !important;\n opacity: 1;\n }\n }\n\n .email-error {\n top: 196px;\n left: 0px;\n }\n\n .error {\n margin: 0;\n font-size: 90%;\n color: ${colors.red};\n }\n\n .tag-item {\n padding: 7px 2px 7px 7px;\n height: 30px;\n background-color: ${colors.grey};\n background-image: none;\n color: ${colors.black};\n border: 0 solid transparent;\n border-radius: 5px;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n margin: 3px;\n }\n\n .tag-item-button {\n ${fonts.bold}\n background-color: ${colors.grey};\n width: 22px;\n height: 22px;\n cursor: pointer;\n padding: 0;\n height: 30px;\n font-size: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nexport const importButton = css`\n margin-right: 20px;\n max-width: 100%;\n ${media.tablet} {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n line-height: 30px;\n width: 310px;\n }\n ${media.mobile} {\n margin-right: 0;\n margin-top: 16px;\n }\n`;\n\nexport const importBlock = css`\n ${media.mobile} {\n display: flex;\n flex-direction: column-reverse;\n }\n`;\n","export { EmailChips } from './EmailChips';\n","/** @jsx jsx */\n\nimport React, { memo, useRef, useState, useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './Expandable.styles';\n\nconst Expandable = memo(({ isHighlighted, children }) => {\n const [isCollapsed, setIsCollapsed] = useState(true);\n const [textHeight, setTextHeight] = useState(null);\n\n const handleExpandClick = () => {\n setIsCollapsed(false);\n ref.current.scrollTo({ behavior: 'smooth', bottom: textHeight });\n };\n\n const handleCollapseClick = () => {\n setIsCollapsed(true);\n ref.current.scrollTo({ behavior: 'smooth', top: textHeight });\n };\n\n const measureHeight = useCallback((node) => {\n if (node) {\n ref.current = node;\n setTextHeight(node.getBoundingClientRect().height);\n }\n }, []);\n\n const ref = useRef();\n const maxHeight = 250;\n const isCollapsible = textHeight >= maxHeight;\n\n const expandButton = (\n \n \n
\n );\n\n const collapseButton = (\n \n \n
\n );\n\n const renderButton = () => {\n if (isCollapsible) {\n return isCollapsed ? expandButton : collapseButton;\n }\n };\n\n const contentStyles = [\n styles.content.base,\n isCollapsible && isCollapsed && styles.content.collapsed,\n isCollapsible && isCollapsed && isHighlighted && styles.content.highlighted,\n ];\n\n return (\n \n
\n );\n});\n\nexport { Expandable };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const wrapper = css`\n ${fonts.regular}\n padding: 0 20px 0 20px;\n position: relative;\n line-height: 16px;\n word-break: break-word;\n color: ${colors.black};\n`;\n\nexport const content = {\n base: css`\n overflow: hidden;\n max-height: none;\n `,\n\n collapsed: css`\n max-height: 150px;\n\n &:before {\n content: '';\n text-align: right;\n position: absolute;\n top: 50px;\n left: 0;\n right: 0;\n width: 100%;\n height: 100px;\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);\n }\n `,\n\n highlighted: css`\n &:before {\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(247, 254, 255, 1) 100%);\n }\n `,\n};\n\nexport const button = css`\n margin-top: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n color: ${colors.cyan};\n\n span {\n font-size: 12px;\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n","export { Expandable } from './Expandable';\n","import axios from 'axios';\n\nimport { intl } from '../../../contexts/v2/TranslationContext';\n\nexport default class API {\n static handleError({ response: { data } }) {\n let message = data.message || intl.formatMessage({ id: 'FileBrowser.error' });\n\n displayFlashMessage(message, 'error');\n }\n\n // Generic\n static searchFoldersAndDocuments(rootId, searchTerm, onLoad) {\n return axios\n .get(`/api/${getCompanySlug()}/v1/directories.json?directory_id=${rootId}&search_type=dir&query=${searchTerm}`)\n .then((response) => response.data)\n .then(onLoad)\n .catch(this.handleError);\n }\n\n // SmartSign specific\n static createSmartDocument(documentId, onSubmit, onError = this.handleError) {\n return axios\n .post(`/api/${getCompanySlug()}/smart_documents.json`, { smart_document: { document_id: documentId } })\n .then((response) => response.data)\n .then(onSubmit)\n .catch(onError);\n }\n}\n","import React from 'react';\nimport Document from 'images/icons/document.svg';\nimport { StyledDocumentExtension } from './styles';\n\nexport const CurrentDocument = ({\n multiple,\n handleMultiClick,\n handleClick,\n documentClassName,\n extension,\n name,\n path,\n searchMode,\n createdAt,\n}) => {\n const timestampFormat = 'DD.MM.YYYY hh:mm A';\n\n return (\n \n {children}\n
\n\n {renderButton()}\n \n
\n );\n};\n","/** @jsx jsx */\nimport React from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport Document from 'images/icons/document.svg';\nimport * as styles from './FileBrowser.styles';\nimport { jsx } from '@emotion/core';\n\nconst CurrentDocument = ({\n multiple,\n handleMultiClick,\n handleClick,\n documentClassName,\n extension,\n name,\n path,\n searchMode,\n createdAt,\n context,\n}) => {\n const timestampFormat = 'DD.MM.YYYY hh:mm A';\n\n const acceptedFileExtensions = ['ppt', 'pptx', 'pdf', 'doc', 'docx'];\n\n const isDisabled = () => {\n if (context !== 'smart_sign') return false;\n\n return !acceptedFileExtensions.includes(extension);\n };\n\n const handleDocumentClick = () => {\n if (isDisabled()) return;\n\n return multiple ? handleMultiClick() : handleClick();\n };\n\n return (\n \n
\n \n
\n\n {moment(createdAt).parseZone().format(timestampFormat)}\n \n 
\n {extension} \n
\n\n \n
\n {name}
\n {searchMode && {path}}\n\n \n
\n \n \n
\n \n
\n\n {moment(createdAt).parseZone().format(timestampFormat)}\n \n \n \n {extension}\n \n
\n\n \n
\n {`${name}.${extension}`}
\n {searchMode && {path}}\n\n \n
\n ) : (\n \n
\n \n {clickButtonComponent ? (\n clickButtonComponent()\n ) : (\n <>\n 
\n \n
\n )}\n\n \n {currentDirectory ? (\n
\n \n \n );\n};\n\nexport default withIntl(FileBrowser);\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nexport const modal = (withinFolder) => css`\n .modal-dialog.shaparency {\n width: ${withinFolder ? 614 : 800}px;\n\n .modal-content {\n padding: 12px 0;\n }\n\n .modal-header {\n ${fonts.bold}\n padding: 0 32px;\n ${media.tablet} {\n padding: 0 15px;\n }\n\n .modal-title {\n width: 100%;\n }\n }\n\n .modal-body {\n padding: 25px 0 0 0;\n }\n }\n`;\n\nexport const placeholderImage = css`\n position: absolute;\n top: 15px;\n left: 215px;\n left: 50%;\n`;\n\nexport const placeholderImageFiles = css`\n ${placeholderImage}\n left: 235px;\n left: 50%;\n transform: translateX(-10%);\n`;\n\nexport const placeholderCircle = css`\n width: 55px;\n margin: 0 auto;\n height: 55px;\n background: ${colors.placeholderGrey};\n border-radius: 50%;\n`;\n\nexport const searchButton = css`\n height: 44px;\n line-height: 44px;\n padding-left: 25px;\n padding-right: 25px;\n`;\n\nexport const backIcon = css`\n &:hover {\n opacity: 0.8;\n cursor: pointer;\n }\n`;\n\nexport const searchInput = css`\n height: 44px;\n border: 1px solid ${colors.inputBorder};\n color: ${colors.lightGrey};\n\n &::placeholder {\n color: ${colors.lightGrey};\n }\n`;\n\nexport const overlay = css`\n background: ${HexToRgba(colors.white, 70)};\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n`;\n\nexport const browseSection = css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n align-items: center;\n\n span.browse,\n img:hover {\n opacity: 0.8;\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const documentExtension = css`\n ${fonts.bold}\n position: absolute;\n top: 50%;\n left: 50%;\n color: ${colors.white};\n font-size: 4px;\n text-transform: uppercase;\n transform: translate(-45%, -40%);\n`;\n\nexport const heading = css`\n ${fonts.semiBold}\n font-size: 14px;\n line-height: 24px;\n color: ${colors.black};\n`;\n\nexport const padded = css`\n padding: 0 32px;\n ${media.tablet} {\n padding: 0 15px;\n }\n`;\n\nexport const error = css`\n ${padded}\n font-size: 14px;\n margin-bottom: 20px;\n color: ${colors.warning};\n`;\n\nexport const separator = css`\n border-top: 1px solid #f0f1f1;\n width: 100%;\n height: 1px;\n`;\n\nexport const header = css`\n ${fonts.semiBold}\n color: ${colors.lightGrey};\n font-size: 16px;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n`;\n\nexport const folders = css`\n margin: 20px 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n ${media.tablet} {\n flex-direction: column;\n }\n`;\n\nexport const folderIcon = (isPersonal) => css`\n path {\n stroke: ${isPersonal ? colors.purple : colors.cyan};\n }\n`;\n\nexport const folder = css`\n border: 1px solid ${colors.lighterGrey};\n border-radius: 15px;\n width: 170px;\n height: 170px;\n padding: 29px 17px 25px 19px;\n\n &:hover {\n padding: 27px 15px 23px 17px;\n border-color: ${colors.lightPurple};\n border-width: 3px;\n cursor: pointer;\n }\n\n ${media.tablet} {\n margin-bottom: 10px;\n width: 100%;\n padding: 15px;\n height: auto;\n}\n }\n`;\n\nexport const name = css`\n ${fonts.bold}\n font-size: 16px;\n color: ${colors.black};\n line-height: 28px;\n margin-top: 15px;\n`;\n\nexport const info = css`\n ${fonts.regular}\n font-size: 12px;\n line-height: 18px;\n color: ${colors.lightGrey};\n`;\n","/** @jsx jsx */\nimport React, { useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useSearchLazyQuery } from 'components/documents/data/queries/SearchQuery.js';\n\nimport * as styles from './FileBrowser.styles';\nimport api from './API';\n\nexport const FileBrowserSearch = ({\n searchTerm,\n setSearchTerm,\n setIsSearching,\n setSearchResults,\n setSearchMode,\n currentRoot,\n}) => {\n const [searchDocuments, { data }] = useSearchLazyQuery();\n\n useEffect(() => {\n if (data) {\n setIsSearching(false);\n setSearchResults(data.currentCompany);\n setSearchMode(true);\n }\n }, [data]);\n\n const handleSearch = (e) => {\n e.preventDefault();\n setIsSearching(true);\n searchDocuments({ variables: { name: searchTerm } });\n };\n\n const intl = useIntl();\n\n const handleSearchTermChange = (e) => {\n setSearchTerm(e.target.value || '');\n };\n\n return (\n \n
\n );\n};\n","/** @jsx jsx */\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport NoFolders from 'images/icons/no-folders.svg';\nimport NoDocuments from 'images/icons/no-documents.svg';\nimport DirectoryPath from 'components/documents/DirectoryPath';\nimport FolderRow from 'components/shared/FileBrowser/FolderRow';\nimport { CurrentDocuments } from './CurrentDocuments';\nimport { FileBrowserSearch } from './FileBrowserSearch';\nimport * as styles from './FileBrowser.styles';\n\nexport const FolderExplorer = ({\n currentFolderChildren,\n searchMode,\n currentPath,\n selectFolder,\n error,\n isSelectable,\n multiple,\n currentFolderDocuments,\n selectDocument,\n currentDocument,\n setCurrentDocument,\n selectedDocuments,\n navigateToRoot,\n setSelectedDocuments,\n searchTerm,\n setSearchTerm,\n setIsSearching,\n setSearchResults,\n setSearchMode,\n currentRoot,\n context,\n}) => {\n const timestampFormat = 'DD.MM.YYYY hh:mm A';\n\n return (\n \n
\n\n \n \n
\n\n \n \n \n
\n \n {!searchMode && (\n
\n );\n};\n","import React, { memo } from 'react';\nimport { Col, Row } from 'react-bootstrap';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ReactComponent as FolderImage } from 'images/icons/folder.svg';\n\nexport default memo(\n ({ directories, onDirectoryClick, isSelectable, showDocumentCount, showCreatedAt, showPath, createdAtFormat }) => {\n return (\n \n
\n )}\n\n {error}
}\n\n \n
\n\n \n\n \n
\n\n {currentFolderChildren.length > 0 ? (\n \n
\n )}\n \n \n\n
\n \n 
\n
\n \n
\n \n
\n\n \n
\n\n \n {currentFolderDocuments.length > 0 ? (\n
\n \n \n\n
\n )}\n \n 
\n
\n \n
\n \n
\n \n 0 ? 'btn-primary' : 'btn-disabled'}`}\n >\n
\n \n {directories.map((directory) => {\n const disabled = !isSelectable(directory);\n const onClickHandler = () => onDirectoryClick(directory.id);\n const path = showPath && directory.breadcrumbs.map((node) => node.name).join(' > ');\n\n return (\n \n
\n );\n })}\n
\n );\n }\n);\n","/** @jsx jsx */\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ReactComponent as Folder } from 'images/icons/folder-lg.svg';\nimport * as styles from './FileBrowser.styles';\n\nexport const Folders = ({ rootDirectories, onClick }) => {\n if (!rootDirectories) {\n return null;\n }\n\n return (\n \n \n
\n \n \n
\n \n
\n\n {showDocumentCount && (\n \n \n
\n {directory.name}
\n\n {showPath && {path}}\n\n
\n );\n};\n","import React, { useState, useEffect } from 'react';\nimport { withIntl } from 'utils/v2/intl';\nimport { withApollo } from 'utils/v2/apollo';\nimport { FolderExplorerInMobile } from './FolderExplorerInMobile';\nimport { FoldersInMobile } from './FoldersInMobile';\nimport { SmartUploadContainer } from '../styles';\nimport api from '../API';\nimport LoadingCircle from 'components/shared/LoadingCircle';\n\nimport { getResourceID } from 'helpers/graphql';\nimport { useDirectoriesBrowser } from 'components/documents/hooks/useDirectoriesBrowser';\n\nconst BrowserDocuments = ({ deviceType, context }) => {\n const [currentDocument, setCurrentDocument] = useState();\n const [selectedDocuments, setSelectedDocuments] = useState([]);\n const [searchTerm, setSearchTerm] = useState('');\n const [isSearching, setIsSearching] = useState(false);\n const [searchMode, setSearchMode] = useState(false);\n const [searchResults, setSearchResults] = useState();\n const [error, setError] = useState();\n\n const resetSearch = () => {\n if (searchMode) {\n setSearchMode(false);\n setSearchResults(null);\n setSearchTerm('');\n }\n };\n\n const { isLoading, browseDirectory, resetBrowser, currentDirectory, browseSidebarItem, rootDirectories } =\n useDirectoriesBrowser({ onBrowse: resetSearch });\n\n const isSelectable = () => true;\n\n const selectDocument = () => {\n setError(null);\n\n const companySlug = getCompanySlug();\n\n // check context\n if (context === 'smart_sign') {\n api.createSmartDocument(\n getResourceID(currentDocument.id),\n (smartDocument) => {\n window.location.assign(`/${companySlug}/smart_sign/${smartDocument.slug}/edit`);\n },\n (error) => {\n setError(error.response.data.message);\n }\n );\n }\n };\n\n const currentFolder = searchMode ? searchResults : currentDirectory;\n\n return (\n Folders
\n \n {rootDirectories.map((folder) => {\n const documentCount = folder.documentsCount;\n const subFolderCount = folder.directoriesCount;\n\n const isPersonal = folder.name === 'Personal Folders';\n const folderIconStyles = styles.folderIcon(isPersonal);\n const handleClick = onClick.bind(this, folder.id);\n\n return (\n
\n \n
\n );\n })}\n {folder.name}
\n\n \n
\n\n \n
\n \n
\n );\n};\n","/** @jsx jsx */\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport NoFolders from 'images/icons/no-folders.svg';\nimport NoDocuments from 'images/icons/no-documents.svg';\nimport { CurrentDocuments } from '../CurrentDocuments';\nimport { BrowserSearchInMobile } from './BrowserSearchInMobile';\nimport * as styles from '../FileBrowser.styles';\nimport LoadingCircle from '../../LoadingCircle';\nimport DirectoryPath from 'components/documents/DirectoryPath';\nimport { FolderRowInMobile } from 'components/shared/FileBrowser/MobileComponents/FolderRowInMobile';\nimport AppHeader from 'components/shared/AppHeader';\nimport { ToolbarButtonWrapper, IconButton, HeaderTitle } from 'components/shared/AppHeader/styles';\nimport { DirectoryPathWrapper, MobHeading, ActionBtn, NoFoldersSection } from '../styles';\n\nexport const FolderExplorerInMobile = ({\n currentFolderChildren,\n searchMode,\n currentPath,\n selectFolder,\n error,\n isSelectable,\n multiple,\n currentFolderDocuments,\n selectDocument,\n currentDocument,\n setCurrentDocument,\n selectedDocuments,\n navigateToRoot,\n setSelectedDocuments,\n searchTerm,\n setSearchTerm,\n setIsSearching,\n setSearchResults,\n setSearchMode,\n currentRoot,\n isSearching,\n}) => {\n const name = currentRoot.name;\n const timestampFormat = 'DD.MM.YYYY hh:mm A';\n const { isMobile } = useWindowDimensions();\n\n return (\n <>\n \n
\n\n \n \n \n
\n \n \n {name}\n \n
\n \n \n \n
\n \n {isSearching && \n \n )}\n \n \n\n {currentFolderChildren.length > 0 ? (\n \n \n\n \n 0 ? 'btn-primary' : 'btn-disabled'}`}\n >\n \n
\n \n );\n};\n","import React from 'react';\nimport { Col, Row } from 'react-bootstrap';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ReactComponent as FolderIcon } from 'images/icons/documents/openedFolder.svg';\n\nexport const FolderRowInMobile = ({\n directories,\n onDirectoryClick,\n isSelectable,\n showDocumentCount,\n showCreatedAt,\n showPath,\n createdAtFormat,\n}) => {\n return (\n {error}
}\n\n \n \n \n
\n )}\n\n \n \n
\n \n
\n \n {currentFolderDocuments.length > 0 ? (\n \n \n )}\n
\n\n \n \n
\n \n
\n \n {directories.map((directory) => {\n const disabled = !isSelectable(directory);\n const onClickHandler = () => onDirectoryClick(directory.id);\n const path = showPath && directory.breadcrumbs.map((node) => node.name).join(' > ');\n\n return (\n \n
\n );\n })}\n
\n );\n};\n","/** @jsx jsx */\nimport React, { useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport AppHeader from 'components/shared/AppHeader';\nimport { ToolbarButtonWrapper, IconButton, HeaderTitle } from 'components/shared/AppHeader/styles';\nimport { ReactComponent as Logo } from 'images/logo.svg';\nimport { ReactComponent as CompanyIcon } from 'images/icons/documents/company.svg';\nimport { ReactComponent as PersonIcon } from 'images/icons/documents/person.svg';\nimport { ReactComponent as PeopleIcon } from 'images/icons/documents/people.svg';\nimport { ReactComponent as SignatureIcon } from 'images/icons/documents/signature.svg';\nimport { ReactComponent as ArrowRight } from 'images/icons/documents/arrow-right.svg';\nimport { FolderCard, ArrowWrapper, IconWrapper, CardContent } from '../styles';\n\nexport const FoldersInMobile = ({ rootDirectories = [], onClick }) => {\n const { isMobile } = useWindowDimensions();\n const companySlug = getCompanySlug();\n const smartDocumentsURL = `/${companySlug}/smart_sign`;\n const back = useCallback(() => {\n window.location.href = smartDocumentsURL;\n }, []);\n\n if (!rootDirectories) {\n return null;\n }\n\n return (\n <>\n \n \n
\n \n \n
\n \n
\n\n {showDocumentCount && (\n \n \n
\n\n \n
\n {directory.name}
\n\n {showPath && {path}}\n\n {isMobile ? (\n \n \n )}\n
\n \n {\n window.location.href = smartDocumentsURL;\n }}\n >\n
\n \n \n \n
\n )}\n \n {rootDirectories.map((folder) => {\n const name = folder.name;\n const documentCount = folder.documentsCount;\n const subFolderCount = folder.directoriesCount;\n const isPersonal = name === 'Personal Folders';\n const isSmartSign = name === 'SmartSign';\n const isCompany = name === 'Company Folders';\n const isMeetings = name === 'Meeting Folders';\n const handleClick = onClick.bind(this, folder.id);\n\n return (\n \n \n {isCompany && (\n \n \n )}\n {isPersonal && (\n \n \n )}\n {isSmartSign && (\n \n \n )}\n {isMeetings && (\n \n \n )}\n {name}\n \n \n \n \n );\n })}\n
\n \n );\n};\n","import { FileBrowser } from './FileBrowser';\n\nexport default FileBrowser;\n","import styled from 'styled-components';\nimport { colors, fonts } from 'styles';\n\nexport const FolderCard = styled.div`\n margin-top: 5px;\n background: ${colors.white};\n box-shadow: 2px 4px 4px rgba(223, 223, 223, 0.25);\n border-radius: 4px;\n padding: 15px 20px;\n display: block;\n .count {\n padding-left: 28px;\n }\n position: relative;\n`;\n\nexport const IconWrapper = styled.div`\n padding-right: 12px;\n display: flex;\n svg {\n path {\n fill: ${colors.cyan};\n }\n }\n`;\n\nexport const CardContent = styled.div`\n display: flex;\n align-items: center;\n font-size: 16px;\n line-height: 28px;\n color: ${colors.black};\n ${fonts.styledSemiBold}\n`;\n\nexport const ArrowWrapper = styled.div`\n position: absolute;\n top: 20px;\n right: 20px;\n`;\n\nexport const DirectoryPathWrapper = styled.div`\n .directories-path {\n padding: 8px;\n .directory-path-part {\n ${fonts.styledSemiBold}\n font-size: 14px !important;\n line-height: 28px;\n color: ${colors.black} !important;\n &::after {\n color: ${colors.black} !important;\n }\n }\n }\n`;\n\nexport const MobHeading = styled.div`\n padding: 5px 15px;\n ${fonts.styledBold}\n font-size: 14px;\n line-height: 20px;\n color: ${colors.black};\n background: ${colors.mobileHeadingBackground};\n`;\n\nexport const ActionBtn = styled.div`\n position: absolute;\n bottom: 75px;\n padding: 11px 15px;\n width: 100%;\n left: 0;\n a {\n width: 100%;\n }\n`;\n\nexport const NoFoldersSection = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n`;\n\nexport const SearchInput = styled.input`\n height: 44px;\n border: 1px solid ${colors.inputBorder};\n color: ${colors.lightGrey};\n\n &::placeholder {\n color: ${colors.lightGrey};\n }\n`;\n\nexport const SmartUploadContainer = styled.div`\n padding-left: 16px;\n padding-right: 16px;\n`;\n\nexport const StyledDocumentExtension = styled.span`\n ${fonts.bold}\n position: absolute;\n top: 50%;\n left: 50%;\n color: ${colors.white};\n font-size: 4px;\n text-transform: uppercase;\n transform: translate(-45%, -40%);\n`;\n","import React from 'react';\nimport FileBrowser from './FileBrowser';\nimport { withApollo } from 'utils/v2/apollo';\n\nexport default withApollo(FileBrowser);\n","/** @jsx jsx */\n\nimport React, { memo, useCallback, useEffect, useState, useRef } from 'react';\nimport { jsx, css } from '@emotion/core';\n\nimport ClipLoader from 'react-spinners/ClipLoader';\n\nimport { FileViewerTopBar } from 'components/shared/FileViewerTopBar';\nimport { ImageViewer } from 'components/shared/ImageViewer';\nimport { PdfViewer } from 'components/shared/PdfViewer';\nimport { DocumentViewer } from './../DocumentViewer';\n\nimport * as styles from './FileViewer.styles';\nimport { colors } from 'styles';\n\nconst VIEWER_WIDTH = 800;\nconst DEFAULT_SCALE = 1;\nconst MAX_SCALE = 1.75;\nconst SCALE_STEP = 0.25;\n\nconst FileViewer = memo(({ show, onClose, id, url, title, contentType }) => {\n const [isLoading, setIsLoading] = useState(true);\n const [scale, setScale] = useState({ current: DEFAULT_SCALE, previous: DEFAULT_SCALE });\n\n const hideSpinner = useCallback(() => {\n setIsLoading(false);\n }, []);\n\n const resetComponent = () => {\n if (show) return;\n\n setScale({\n current: DEFAULT_SCALE,\n previous: DEFAULT_SCALE,\n });\n\n setIsLoading(true);\n };\n\n useEffect(() => resetComponent(), [show]);\n\n const isImage = contentType === 'image';\n const isDocument = contentType === 'document';\n const isPdf = contentType === 'pdf';\n\n const handleDownload = () => {\n var link = document.createElement('a');\n link.download = title;\n link.href = `/${getCompanySlug()}/blobs/download?document_id=${id}`;\n document.body.appendChild(link);\n link.click();\n link.remove();\n };\n\n const imageViewer = isImage && (\n \n
\n \n
\n \n
\n )\n );\n});\n\nexport { FileViewer };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nexport const viewer = {\n base: css`\n opacity: 1;\n width: 100%;\n height: 100%;\n\n *::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n `,\n\n hidden: css`\n opacity: 0;\n `,\n};\n\nexport const container = {\n base: css`\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n opacity: 0;\n right: 0;\n display: flex;\n z-index: 9999;\n flex-direction: column;\n\n &:after {\n background: rgba(0, 0, 0, 0.8);\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n z-index: -1;\n height: 100%;\n }\n `,\n\n visible: css`\n pointer-events: all;\n opacity: 1;\n `,\n};\n\nexport const bar = css`\n padding: 13px 25px;\n display: flex;\n align-items: center;\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 50%, transparent 100%);\n`;\n\nexport const spinner = css`\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 2;\n transform: translate(-50%, -50%);\n`;\n","export { FileViewer } from './FileViewer';\n","/** @jsx jsx */\n\nimport React, { memo, useEffect, useState, useRef } from 'react';\nimport { jsx, css } from '@emotion/core';\nimport { ReactComponent as DownloadIcon } from 'images/icons/documents/download-icon.svg';\n\nimport * as styles from './FileViewerTopBar.styles';\n\nconst FileViewerTopBar = memo(\n ({ title, onDownload, onClose, onScaleIn, onScaleOut, isMaxScale, isMinScale, isScaleable }) => {\n const scaleInStyles = [styles.control.base, isMaxScale && styles.control.disabled];\n\n const scaleOutStyles = [styles.control.base, isMinScale && styles.control.disabled];\n\n const scaleControls = isScaleable && (\n <>\n \n \n \n );\n\n return (\n \n
\n\n \n {imageViewer}\n {documentViewer}\n {pdfViewer}\n
\n \n
\n );\n }\n);\n\nexport { FileViewerTopBar };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const container = css`\n position: absolute;\n left: 0;\n right: 0;\n z-index: 2;\n height: 56px;\n pointer-events: none;\n padding: 13px 25px;\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 50%, transparent 100%);\n`;\n\nexport const downloadIcon = css`\n transform: scale(1.3);\n`;\n\nexport const inner = css`\n position: absolute;\n left: 13px;\n right: 13px;\n top: 25px;\n bottom: 25px;\n z-index: 2;\n padding: 13px 25px;\n pointer-events: auto;\n display: flex;\n align-items: center;\n`;\n\nexport const title = css`\n ${fonts.semiBold}\n font-size: 16px;\n max-width: 80%;\n color: ${colors.white};\n`;\n\nexport const control = {\n base: css`\n cursor: pointer;\n font-weight: 300;\n font-size: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 50%;\n color: ${colors.white};\n width: 40px;\n height: 40px;\n\n &:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n `,\n\n disabled: css`\n cursor: default;\n color: ${colors.mediumGrey};\n\n &:hover {\n background: none;\n }\n `,\n};\n","export { FileViewerTopBar } from './FileViewerTopBar';\n","import React from 'react';\nimport { withIntl } from '../../../utils/v2/intl';\nimport { TitleDesktop, TitleWrapperDesktop } from './styles';\n\nconst Header = ({ title, statusDasherize, statusHumanize, withBackButton = false }) => {\n return (\n <>\n {withBackButton ? null : (\n \n
\n \n {title}\n
\n\n \n {scaleControls}\n\n
\n \n
\n\n \n {statusHumanize}
\n ) : null}\n \n
\n )\n );\n});\n\nexport { HelpText };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const wrapper = css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin: 0 auto 30px auto;\n max-width: 800px;\n padding: 0 15px;\n ${media.mobile} {\n flex-direction: column;\n }\n`;\n\nexport const flex = css`\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n align-items: center;\n`;\n\nexport const icon = css`\n flex-shrink: 0;\n margin: 10px 15px 10px 0;\n`;\n\nexport const title = css`\n ${fonts.semiBold}\n color: ${colors.cyan};\n font-size: 16px;\n`;\n\nexport const instructions = css`\n color: ${colors.black};\n font-size: 14px;\n`;\n","export { HelpText } from './HelpText';\n","import React from 'react';\n\nconst HighlightTag = ({ children }) => {children};\n\nexport { HighlightTag };\n","export { HighlightTag } from './HighlightTag';\n","/** @jsx jsx */\n\nimport React, { memo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport * as styles from './ImageViewer.styles';\n\nconst ImageViewer = memo(({ source, scale, width, onLoad }) => {\n const [size, setSize] = useState({});\n\n useEffect(() => finalizeLoading(), [size]);\n\n const finalizeLoading = () => {\n if (!size.width || !size.height) return;\n\n onLoad();\n };\n\n const handleLoad = ({ target }) => {\n const imageWidth = Math.min(target.naturalWidth, width);\n const imageHeight = (imageWidth / target.naturalWidth) * target.naturalHeight;\n\n setSize({ width: imageWidth, height: imageHeight });\n };\n\n const innerStyles = styles.inner({ ...size, scale });\n\n return (\n \n
\n {title}
\n\n {instructions}
\n \n
\n );\n});\n\nexport { ImageViewer };\n","import { css } from '@emotion/core';\nimport { media } from 'styles';\n\nexport const inner = ({ height, width, scale }) => css`\n position: relative;\n margin: 0 auto;\n line-height: 100vh;\n width: ${width * scale}px;\n height: ${height * scale}px;\n ${media.tablet} {\n max-width: 100%;\n height: auto;\n }\n`;\n\nexport const image = css`\n width: 100%;\n height: 100%;\n`;\n\nexport const outer = css`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n overflow: auto;\n width: 100%;\n bottom: 0;\n`;\n","export { ImageViewer } from './ImageViewer';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport * as _styles from './Error.styles';\n\nconst Error = memo(({ message, styles }) => {\n if (!message) {\n return <>;\n }\n\n return \n 
\n
\n {message}
;\n});\n\nError.propTypes = {\n message: PropTypes.string,\n};\n\nexport { Error };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const component = css`\n ${fonts.bold}\n padding: 3px 5px;\n white-space: nowrap;\n display: inline-block;\n background: ${colors.red};\n border-radius: 2px;\n line-height: 1;\n color: ${colors.white};\n text-transform: uppercase;\n font-size: 10px;\n z-index: 2;\n position: absolute;\n top: -8px;\n right: 12px;\n letter-spacing: 0.09em;\n`;\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport * as styles from './Icon.styles';\n\nconst Icon = memo(({ icon, position, isRotatable, asFocused, asInvalid, ...props }) => {\n if (!icon) {\n return <>;\n }\n\n const appliedStyles = [\n styles.icon.base,\n styles.icon.alignment[position],\n isRotatable && asFocused && styles.icon.state.rotated,\n asFocused && styles.icon.state.focused,\n asInvalid && styles.icon.state.invalid,\n ];\n\n return (\n \n {icon}\n
\n );\n});\n\nIcon.propTypes = {\n icon: PropTypes.object,\n position: PropTypes.oneOf(['left', 'right']),\n asFocused: PropTypes.bool,\n asInvalid: PropTypes.bool,\n};\n\nexport { Icon };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const icon = {\n base: css`\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n transition: transform 0.1s ease-in-out;\n line-height: 1;\n display: flex;\n align-items: center;\n margin: 0 14px;\n color: ${colors.headingGrey};\n `,\n\n alignment: {\n left: css`\n right: auto;\n left: 0;\n `,\n\n right: css`\n right: 0;\n left: auto;\n `,\n },\n\n state: {\n rotated: css`\n transform: translateY(-50%) rotate(180deg);\n `,\n\n focused: css`\n color: ${colors.cyan};\n\n path {\n fill: ${colors.cyan};\n }\n `,\n\n invalid: css`\n color: ${colors.red};\n\n path {\n fill: ${colors.red};\n }\n `,\n },\n};\n","/** @jsx jsx */\n\nimport React, { useEffect, forwardRef, memo, useState } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { TextField } from './TextField';\nimport { Label } from './Label';\nimport { Icon } from './Icon';\nimport { Error } from './Error';\n\nimport { position } from 'styles';\n\nconst Input = memo(\n forwardRef(\n (\n {\n id,\n name,\n icon,\n iconPosition,\n rotatableIcon,\n label,\n placeholder,\n isRequired,\n isDisabled,\n isReadOnly,\n errorMessage,\n value,\n labelStyle,\n onChange,\n ...props\n },\n textFieldRef\n ) => {\n const [isFocused, setIsFocused] = useState(false);\n\n const handleFocus = (event) => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n };\n\n const inputRef = textFieldRef || React.useRef();\n\n return (\n \n \n\n
\n );\n }\n )\n);\n\nInput.propTypes = {\n id: PropTypes.string,\n name: PropTypes.string,\n icon: PropTypes.object,\n iconPosition: PropTypes.oneOf(['left', 'right']),\n label: PropTypes.string,\n labelStyle: PropTypes.any,\n placeholder: PropTypes.string,\n isRequired: PropTypes.bool,\n isDisabled: PropTypes.bool,\n isReadOnly: PropTypes.bool,\n errorMessage: PropTypes.string,\n value: PropTypes.any,\n onChange: PropTypes.func,\n};\n\nexport { Input };\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport * as styles from './Label.styles';\n\nconst Label = memo(({ text, htmlFor, style }) => {\n if (!text) {\n return <>;\n }\n\n return (\n \n );\n});\n\nLabel.propTypes = {\n text: PropTypes.string,\n htmlFor: PropTypes.string,\n};\n\nexport { Label };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const label = css`\n ${fonts.semiBold}\n font-size: 12px;\n line-height: 16px;\n color: ${colors.black};\n display: block;\n margin-bottom: 12px;\n`;\n","/** @jsx jsx */\n\nimport React, { memo, forwardRef } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport * as styles from './TextField.styles';\n\nconst TextField = memo(\n forwardRef(\n (\n {\n id,\n name,\n value,\n placeholder,\n onFocus,\n onBlur,\n onClick,\n onChange,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n iconPosition,\n ...props\n },\n inputRef\n ) => {\n const applicableStyles = [\n styles.textField.base,\n isInvalid && styles.textField.state.invalid,\n iconPosition && styles.textField.accommodation.icon[iconPosition],\n isDisabled && styles.textField.state.disabled,\n ];\n\n return (\n \n
\n \n \n
\n );\n\n const renderOption = (language) => {\n const key = `language-picker-${language.value}`;\n const onClick = onSelect.bind(this, language, handleBlur);\n const isSelected = language.value == selectedLanguage.value;\n\n return (\n \n
\n \n
\n\n {isSelected && checkmark}\n \n
\n \n );\n});\n\nexport { LanguageDropdown };\n","import { css } from '@emotion/core';\n\nexport const wrapper = (hasOptions) => css`\n padding: ${hasOptions ? '13px 8px 13px 0' : 0};\n`;\n\nexport const dropdownWrapper = css`\n input[type='search']::-webkit-search-decoration,\n input[type='search']::-webkit-search-cancel-button,\n input[type='search']::-webkit-search-results-button,\n input[type='search']::-webkit-search-results-decoration {\n display: none;\n }\n`;\n\nexport const items = css`\n overflow: auto;\n max-height: 241px;\n`;\n","export { LanguageDropdown } from './LanguageDropdown';\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { memo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { getRandomId } from 'helpers/getRandomId';\n\nimport axios from 'axios';\n\nimport * as styles from './LinkDecorator.styles';\n\nconst Link = memo(({ href, text }) => {\n const [metadata, setMetadata] = useState();\n\n useEffect(() => getPageMetadata(), []);\n\n const getPageMetadata = () => {\n axios\n .get(`/api/page_metadata.json`, { params: { href } })\n .then((response) => response.data)\n .then(setMetadata)\n .catch(() => {});\n };\n\n if (!metadata) {\n return (\n \n {text}\n \n );\n }\n\n return (\n \n \n
\n \n \n {dropdownBody}\n
\n \n
\n );\n});\n\nexport { LoadingIndicator };\n","import { css } from '@emotion/core';\n\nexport const indicator = css`\n margin: 0 10px;\n display: flex;\n width: 16px;\n align-items: center;\n`;\n","export { LoadingIndicator } from './LoadingIndicator';\n","import React, { memo, useEffect } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { withIntl } from '../../utils/v2/intl';\nimport { AlertPopup } from '../shared/AlertPopup';\nimport { useClickOutside } from 'hooks/useClickOutside';\n\nconst LockedContentPopup = memo(({ contentTitle, show, onClose }) => {\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside(show || false);\n\n const intl = useIntl();\n\n useEffect(() => setIsComponentVisible(show), [show]);\n\n const open = () => setIsComponentVisible(true);\n\n const hide = (e) => {\n e.stopPropagation();\n\n if (onClose) {\n onClose();\n } else {\n setIsComponentVisible(false);\n }\n };\n\n return (\n <>\n {!onClose && (\n \n {contentTitle}\n
\n )}\n\n \n
\n\n \n \n \n
\n );\n});\n\nexport { MediaHeader };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const wrapper = css`\n display: none;\n align-items: center;\n background: ${colors.white};\n border-bottom: 1px solid ${colors.mobileGrey};\n\n ${media.tablet} {\n height: 69px;\n display: flex;\n background ${colors.white};\n padding: 0 25px;\n }\n\n ${media.mobile} {\n height: 53px;\n padding: 0 15px;\n }\n`;\n\nexport const title = css`\n ${fonts.semiBold}\n color: ${colors.black};\n margin: auto;\n\n ${media.tablet} {\n font-size: 20px;\n }\n\n ${media.mobile} {\n font-size: 18px;\n }\n`;\n\nexport const close = css`\n color: ${colors.black};\n font-size: 18px;\n font-weight: 300;\n cursor: pointer;\n`;\n","export { MediaHeader } from './MediaHeader';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport Highlighter from 'react-highlight-words';\nimport { useIntl } from 'react-intl';\n\nimport { HighlightTag } from 'components/shared/HighlightTag';\nimport { Dropdown } from 'components/shared/Dropdown';\nimport { DropdownOption } from 'components/shared/DropdownOption';\n\nimport { useRegExpFormatter } from 'hooks/useRegExpFormatter';\n\nimport * as styles from './MeetingPicker.styles';\n\nconst MeetingPicker = memo(\n ({ inputLabel, inputValue, inputError, dropdownWidth, options, value, onSelect, isDisabled }) => {\n let [isOpen, setIsOpen] = useState(false);\n let [searchTerm, setSearchTerm] = useState('');\n\n const intl = useIntl();\n\n const { formattedRegExp } = useRegExpFormatter(searchTerm);\n\n const handleInputChange = (e) => {\n setSearchTerm(e.target.value || '');\n };\n\n const regex = new RegExp(formattedRegExp, 'gi');\n\n const pickerOptions = options.filter((option) => option.title.match(regex));\n\n const isSearching = searchTerm.length > 0;\n const hasOptions = pickerOptions.length > 0;\n\n const handleFocus = () => setIsOpen(true);\n const handleBlur = () => setIsOpen(false);\n\n const checkmark = (\n {title}
\n \n \n
\n );\n\n const renderOption = (meeting) => {\n const key = `meeting-picker-${meeting.id}`;\n const onClick = onSelect.bind(this, meeting, handleBlur);\n const isSelected = meeting.id === value?.id;\n\n return (\n \n
\n \n
\n\n {isSelected && checkmark}\n \n
\n \n \n );\n }\n);\n\nexport { MeetingPicker };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const items = css`\n overflow: auto;\n max-height: 241px;\n`;\n","export { MeetingPicker } from './MeetingPicker';\n","/** @jsx jsx */\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport BoardSpaceIcon from 'images/icons/board-space.svg';\nimport * as styles from './index.styles';\n\nexport default ({ title, slug, currentSlug, pending_contact, companyId, primaryCompanyId, manageable }) => {\n const onManageDashboardRedirect = () => {\n if (!pending_contact) {\n window.location.assign(`/${slug}/dashboard`);\n }\n };\n const manageLink = `/${slug}/settings`;\n const isPrimary = +companyId === primaryCompanyId;\n\n return (\n \n {dropdownBody}\n
\n \n
\n );\n};\n","/** @jsx jsx */\nimport React, { useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { InView } from 'react-intersection-observer';\n\nimport NotificationsToggle from '../../notifications/Toggle';\nimport Spinner from 'components/v2/shared/Spinner/Spinner';\nimport ChatToggle from '../../conversations/Toggle';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport Avatar from 'components/shared/Avatar';\nimport CompanyItem from './CompanyItem';\nimport TimeClock from 'components/toolbar/TimeClock/withApollo';\nimport useCurrentUserCompanies from '../../../hooks/useCurrentUserCompanies';\nimport { ReactComponent as ArrowRight } from 'images/icons/documents/arrow-right.svg';\nimport * as styles from './index.styles';\nimport { withApollo } from '../../../utils/v2/apollo';\n\nconst MobileMenu = ({\n unreadNotifications,\n unreadMessages,\n isVisible,\n close,\n userName,\n profileLink,\n currentUser,\n currentContact,\n signOutLink,\n currentCompany,\n primaryCompanyId,\n}) => {\n const intl = useIntl();\n\n const { fetchCompanies, fetchMoreCompanies, data, loading } = useCurrentUserCompanies({\n skipFetch: true,\n name: '',\n context: 'MobileMenu',\n });\n\n useEffect(() => {\n if (isVisible) {\n fetchCompanies();\n }\n }, [isVisible]);\n\n const { isDesktop } = useWindowDimensions();\n if (isDesktop || !isVisible) return null;\n\n const contact = { initials: currentUser.initials };\n\n const onViewAllRedirect = () => {\n window.location.assign(`/${currentCompany.slug}/companies`);\n };\n\n const handleRedirectProfilePage = () => {\n window.location.assign(`/${currentCompany.slug}/profile`);\n };\n\n const handleInViewChange = (inView) => {\n const {\n currentUser: {\n companies: { pageInfo },\n },\n } = data;\n\n if (inView && pageInfo.hasNextPage && !loading) {\n fetchMoreCompanies(pageInfo.endCursor);\n }\n };\n\n const renderCompanies = () => {\n if (!data) {\n return (\n \n
\n \n \n
\n \n
\n \n
\n {manageable ? (\n \n {title}
\n {pending_contact ? (\n\n
\n
\n
\n );\n }\n\n const {\n currentUser: {\n companies: { edges },\n },\n } = data;\n\n return edges.map((company) => {\n const { id, name, slug, isPending, canBeManagedByCurrentUser } = company.node;\n return (\n \n
\n );\n};\n\nexport default withApollo(MobileMenu);\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const wrapper = css`\n position: fixed;\n display: flex;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1000;\n z-index: 9999;\n background-color: rgba(0, 0, 0, 0.7);\n font-size: 18px;\n line-height: 24px;\n color: ${colors.black};\n ${media.mobile} {\n font-size: 14px;\n line-height: 18px;\n }\n`;\n\nexport const container = css`\n background: ${colors.white};\n width: calc(100% - 70px);\n height: 100%;\n display: flex;\n ${media.mobile} {\n width: calc(100% - 42px);\n }\n`;\n\nexport const board = css`\n height: 100%;\n width: 254px;\n padding: 28px 30px 24px;\n background-color: ${colors.lightestGrey};\n border-right: 1px solid ${colors.borderSecondGrey};\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n overflow: hidden;\n ${media.mobile} {\n width: 100px;\n padding: 15px 5px;\n }\n`;\n\nexport const toggleButton = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const boardTitle = css`\n ${fonts.bold};\n font-weight: bold;\n margin-bottom: 42px;\n font-size: 22px;\n line-height: 18px;\n color: ${colors.black};\n ${media.mobile} {\n margin-bottom: 16px;\n font-size: 14px;\n line-height: 18px;\n text-align: center;\n }\n`;\n\nexport const companies = css`\n flex-grow: 1;\n overflow: auto;\n margin-bottom: 10px;\n margin-right: -25px;\n max-width: 100%;\n ${media.mobile} {\n margin-right: -15px;\n }\n`;\n\nexport const profileBlock = css`\n ${fonts.regular};\n font-weight: 500;\n color: ${colors.lightGrey} !important;\n border-top: 1px solid ${colors.borderSecondGrey};\n border-bottom: 1px solid ${colors.borderSecondGrey};\n padding: 25px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n ${media.mobile} {\n padding-left: 15px;\n padding-right: 15px;\n }\n`;\n\nexport const profileActionsBlock = css`\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: ${colors.lightGrey};\n`;\n\nexport const userNameBlock = css`\n ${fonts.regular};\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ${colors.black};\n /* margin-left: 3px; */\n ${media.mobile} {\n font-size: 14px;\n line-height: 18px;\n }\n`;\n\nexport const userName = css`\n ${fonts.bold};\n font-weight: bold;\n margin: 0;\n`;\n\nexport const nameAndAvatar = css`\n padding: 22px;\n padding-left: 30px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n ${media.mobile} {\n padding-left: 15px;\n padding-right: 15px;\n }\n`;\n\nexport const viewAll = css`\n color: ${colors.cyan};\n text-align: center;\n`;\n\nexport const actionsBlock = css`\n flex-grow: 1;\n padding: 22px;\n padding-left: 30px;\n padding-bottom: 24px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n ${media.mobile} {\n padding-left: 15px;\n padding-right: 15px;\n padding-bottom: 15px;\n }\n`;\n\nexport const signOut = css`\n color: ${colors.lightGrey} !important;\n`;\n\nexport const close = css`\n position: absolute;\n right: 26px;\n top: 26px;\n width: 26px;\n height: 26px;\n\n ${media.mobile} {\n right: 10px;\n top: 10px;\n width: 22px;\n height: 22px;\n }\n &:before,\n &:after {\n position: absolute;\n left: 50%;\n content: ' ';\n height: 100%;\n width: 2px;\n opacity: 0.5;\n background-color: ${colors.white};\n transform-origin: center;\n }\n &:before {\n transform: rotate(45deg);\n }\n &:after {\n transform: rotate(-45deg);\n }\n`;\n\nexport const link = css`\n color: ${colors.lightGrey} !important;\n display: flex;\n align-items: center;\n`;\n\nexport const companyBlock = css`\n position: relative;\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n ${media.mobile} {\n flex-direction: column;\n }\n`;\n\nexport const companyIconWrapper = ({ isActive }) => css`\n width: 52px;\n min-width: 52px;\n height: 52px;\n padding: 3px;\n ${isActive && `border: 1px solid ${colors.cyan};`}\n box-sizing: border-box;\n border-radius: 4px;\n margin-right: 12px;\n ${media.mobile} {\n margin-right: 0;\n margin-bottom: 2px;\n }\n`;\n\nexport const companyIconCont = css`\n position: relative;\n width: 100%;\n height: 100%;\n background: rgba(0, 186, 198, 0.1);\n border-radius: 2px;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const textEllipsis = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const companyTextWrapper = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n ${media.mobile} {\n align-items: center !important;\n }\n ${media.tablet} {\n align-items: flex-start;\n }\n`;\n\nexport const companyTitle = css`\n ${fonts.regular};\n max-width: 100%;\n font-weight: 500;\n font-size: 14px;\n line-height: 16px;\n color: ${colors.black};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-grow: 1;\n margin: 0;\n ${media.mobile} {\n font-size: 10px;\n line-height: 12px;\n text-align: center;\n }\n`;\n\nexport const companyPendingLabel = css`\n ${fonts.regular}\n font-size: 12px;\n line-height: 12px;\n letter-spacing: 0.15em;\n color: ${colors.orange};\n margin: 0;\n font-weight: 400;\n ${media.mobile} {\n text-align: center;\n font-size: 10px;\n }\n`;\n\nexport const companyManageLabel = css`\n ${fonts.regular}\n font-size: 12px;\n line-height: 12px;\n letter-spacing: 0.15em;\n color: ${colors.cyan};\n margin: 0;\n font-weight: 400;\n &:focus,\n &:active {\n color: ${colors.cyan};\n }\n ${media.mobile} {\n text-align: center;\n font-size: 10px;\n }\n`;\n\nexport const companyPrimaryLabel = css`\n ${fonts.bold}\n text-transform: uppercase;\n font-size: 12px;\n line-height: 12px;\n letter-spacing: 0.15em;\n color: ${colors.headingGrey};\n margin: 0;\n font-weight: 600;\n ${media.mobile} {\n text-align: center;\n font-size: 10px;\n }\n`;\n\nexport const companyTextCont = css`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const closeCont = css`\n flex-grow: 1;\n`;\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport BSModal from 'react-bootstrap/Modal';\n\nimport { ReactComponent as Close } from 'images/icons/close-icon-black.svg';\n\nimport * as styles from './Modal.styles';\n\nconst Modal = memo(\n ({ show, onClose, title, overlay, header, withFooter, modalStyles, footer, hasCloseIcon = true, ...props }) => {\n return (\n \n
\n \n
\n \n
\n {renderCompanies()}\n {renderLoadMore()}\n
\n \n
\n \n
\n \n
\n \n
\n \n {userName} }}\n />\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n \n
\n \n
\n \n \n
\n \n {pdfPage}\n
\n );\n }\n);\n\nexport { PageRenderer };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nconst placeholderBackground = HexToRgba(colors.white, 20);\n\nexport const page = ({ width, height, translateY, margin }) => css`\n position: absolute;\n background: ${placeholderBackground};\n width: ${width}px;\n height: ${height}px;\n left: 50%;\n margin-bottom: ${margin}px;\n transform: translate(-50%, ${translateY}%);\n bottom: 0;\n top: 0;\n\n .react-pdf__Page__canvas {\n height: 100% !important;\n width: 100% !important;\n }\n`;\n","export { PageRenderer } from './PageRenderer';\n","/** @jsx jsx */\n\nimport React, { memo, useRef, useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { Document } from 'react-pdf/dist/esm/entry.webpack';\nimport { PageRenderer } from './../PageRenderer';\nimport * as styles from './PdfViewer.styles';\n\nconst PAGE_MARGIN = 20;\nconst VIEWER_MARGIN = 80;\n\nconst PdfViewer = memo(({ source, pageWidth, viewerScale, viewerWidth, onRender }) => {\n const [pdfData, setPdfData] = useState({\n totalHeight: null,\n pages: null,\n dimensions: null,\n });\n\n const scrollableRef = useRef();\n const viewerRef = useRef();\n\n const getPageOffsetTop = (dimensions, index) => {\n if (dimensions[index - 1]) {\n return dimensions[index - 1].top + dimensions[index - 1].height + PAGE_MARGIN;\n } else {\n return 0;\n }\n };\n\n const setPdfDimensions = (pdf) => {\n const indexes = Array.from({ length: pdf.numPages }, (_, i) => i + 1);\n const promises = indexes.map((index) => pdf.getPage(index));\n\n Promise.all(promises).then((pages) => {\n const dimensions = {};\n let totalHeight = 0;\n\n for (const page of pages) {\n const viewbox = page.getViewport({ scale: 1 });\n const index = page._pageIndex + 1;\n const offsetTop = getPageOffsetTop(dimensions, index);\n const height = (viewerWidth / viewbox.width) * viewbox.height;\n\n totalHeight += height + PAGE_MARGIN;\n\n dimensions[page._pageIndex + 1] = {\n width: viewbox.width,\n height: height,\n top: offsetTop,\n };\n }\n\n totalHeight += VIEWER_MARGIN;\n\n setPdfData({ totalHeight, dimensions, pages: pdf.numPages });\n });\n };\n\n const pageList =\n pdfData.dimensions &&\n Array.from({ length: pdfData.pages }).map((_, index) => {\n const { width, height, top } = pdfData.dimensions[index + 1];\n\n return (\n \n
\n );\n});\n\nexport { PdfViewer };\n","import { css } from '@emotion/core';\n\nexport const outer = css`\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n overflow: auto;\n`;\n\nexport const viewer = ({ height, margin }) => css`\n position: relative;\n transform-origin: center top;\n width: 800px;\n margin: ${margin}px auto 0 auto;\n height: ${height}px;\n`;\n","export { PdfViewer } from './PdfViewer';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { css, jsx } from '@emotion/core';\n\nimport * as styles from './Placeholder.styles';\n\nconst Placeholder = memo(({ image, message }) => {\n return (\n \n \n {pageList}\n \n
\n \n
\n );\n});\n\nexport { Placeholder };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const placeholder = css`\n text-align: center;\n padding: 20px;\n\n &:before {\n content: '';\n display: inline-block;\n width: 68px;\n margin: 0 auto;\n height: 68px;\n background: ${colors.placeholderGrey};\n border-radius: 50%;\n }\n`;\n\nexport const content = css`\n text-align: left;\n`;\n\nexport const wrapper = css`\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n margin-top: -70px;\n`;\n\nexport const image = css`\n /* margin: 0 0 0 -25px; */\n flex: 1 1 100%;\n`;\n\nexport const message = css`\n ${fonts.regular}\n font-size: 14px;\n margin-top: 10px;\n color: ${colors.mediumGrey};\n`;\n","export { Placeholder } from './Placeholder';\n","import React from 'react';\n\nconst ActionsCell = ({ alignRight }) => {\n return (\n \n
\n {image}
\n {message}
\n \n
\n );\n};\n\nexport { ActionsCell };\n","import React from 'react';\n\nconst DateCell = () => {\n return (\n \n
\n \n \n
\n \n
\n );\n};\n\nexport { DateCell };\n","import React, { memo } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ReactComponent as PlaceholderIcon } from 'images/icons/no-meetings.svg';\nimport { ReactComponent as LogoIcon } from 'images/logo.svg';\n\nconst FadingOverlay = memo(({ show, resource }) => {\n if (!show) {\n return null;\n }\n\n const heading = `No ${resource}`;\n\n return (\n \n \n
\n\n \n \n \n
\n \n
\n );\n});\n\nexport { FadingOverlay };\n","import React from 'react';\n\nconst MultilineCell = () => {\n return (\n \n
\n\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n \n \n \n \n
\n );\n};\n\nexport { MultilineCell };\n","import React from 'react';\n\nimport { DateCell } from './DateCell';\nimport { MultilineCell } from './MultilineCell';\nimport { TwoMediumLinesCell } from './TwoMediumLinesCell';\nimport { TwoLinesCell } from './TwoLinesCell';\nimport { StatusCell } from './StatusCell';\nimport { ActionsCell } from './ActionsCell';\n\nconst PlaceholderTable = ({ show }) => {\n return (\n show &&\n [...Array(8)].map((_, index) => (\n \n
\n );\n};\n\nexport { StatusCell };\n","import React from 'react';\n\nconst TwoLinesCell = () => {\n return (\n \n \n
\n \n \n \n
\n );\n};\n\nexport { TwoLinesCell };\n","import React from 'react';\n\nconst TwoMediumLinesCell = () => {\n return (\n \n \n \n
\n );\n};\n\nexport { TwoMediumLinesCell };\n","export { FadingOverlay } from './FadingOverlay';\nexport { TwoLinesCell } from './TwoLinesCell';\nexport { StatusCell } from './StatusCell';\nexport { PlaceholderTable } from './PlaceholderTable';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { css, jsx } from '@emotion/core';\n\nimport * as styles from './RadioButton.styles';\n\nconst RadioButton = memo(\n ({ id, name, value, onChange, isDisabled, isChecked, defaultChecked, label, badgeClass, badgeText }) => {\n return (\n \n
\n );\n }\n);\n\nexport { RadioButton };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const radio = css`\n position: relative;\n margin-bottom: 10px;\n`;\n\nexport const input = css`\n width: 0;\n height: 0;\n cursor: pointer;\n opacity: 0;\n z-index: 1;\n pointer-events: none;\n outline: none !important;\n`;\n\nexport const label = css`\n padding-left: 25px !important;\n &:before {\n left: 18px !important;\n }\n &:after {\n left: 24px !important;\n }\n`;\n","export { RadioButton } from './RadioButton';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport { ReactSVG } from 'react-svg';\n\nimport * as styles from './SVG.styles';\n\nconst SVG = memo(({ src, ...props }) => {\n return {badgeText}
}\n \n
\n );\n});\n\nexport { Search };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const wrapper = {\n base: css`\n transition: none;\n flex: left;\n position: relative;\n `,\n\n focused: css`\n border-left: none;\n transition: width 0.2s ease-in-out;\n will-change: width;\n width: 100%;\n `,\n};\n\nexport const input = css`\n padding: 8px 12px 8px 40px;\n font-size: 12px;\n line-height: 1;\n border-radius: 2px;\n`;\n\nexport const clear = css`\n position: absolute;\n top: 50%;\n right: 10px;\n transform: translateY(-50%);\n cursor: pointer;\n`;\n","export { Search } from './Search';\n","import React, { memo } from 'react';\nimport { components as Components } from 'react-select';\nimport RCreatableSelect from 'react-select/creatable';\n\nimport { If } from '../helpers/If';\n\nimport * as selectStyles from './Select.styles';\n\nconst CreatableSelect = memo(\n ({\n styles,\n isClearable,\n isSearchable = false,\n hideSelectedOptions,\n backspaceRemovesValue,\n onChange,\n components,\n options,\n isMulti = true,\n ...props\n }) => {\n const MultiValueContainer = ({ selectProps: { value } }) => value.label;\n const DropdownIndicator = (props) => (\n \n \n\n \n \n
\n \n \n
\n \n \n\n \n
\n \n
\n );\n }\n);\n\nexport default withIntl(Multiselect);\n","import React, { memo } from 'react';\nimport RSelect, { components as Components } from 'react-select';\n\nimport { If } from '../helpers/If';\n\nimport * as selectStyles from './Select.styles';\n\nconst Select = memo(\n ({\n styles,\n isClearable,\n isSearchable,\n hideSelectedOptions,\n backspaceRemovesValue,\n onChange,\n components,\n options,\n isMulti = false,\n ...props\n }) => {\n const MultiValueContainer = ({ selectProps: { value } }) => value.label;\n const DropdownIndicator = (props) => (\n \n \n\n \n \n
\n \n \n
\n \n \n\n
\n );\n});\n\nexport { SelectInput };\n","import { fonts, colors } from 'styles';\n\nexport const select = (isInvalid, isDisabled) => {\n return (baseStyles) => {\n return {\n ...baseStyles,\n\n container: (styles) => ({\n ...baseStyles.container(styles),\n\n width: '100%',\n }),\n\n placeholder: (styles) => ({\n ...baseStyles.placeholder(styles),\n\n fontSize: 14,\n color: isInvalid ? colors.red : colors.headingGrey,\n }),\n\n control: (styles, state) => ({\n ...baseStyles.control(styles),\n\n backgroundColor: isDisabled ? colors.grey : colors.white,\n minHeight: 44,\n borderRadius: isDisabled ? 2 : 0,\n border: `1px solid ${\n isDisabled\n ? 'rgba(152, 164, 175, 0.4)'\n : isInvalid\n ? colors.lightRed\n : state.isFocused\n ? colors.cyan\n : colors.border\n }`,\n\n '&:hover': {\n cursor: 'pointer',\n border: `1px solid ${isInvalid ? colors.lightRed : state.isFocused ? colors.cyan : colors.border}`,\n },\n }),\n\n valueContainer: (styles) => ({\n ...baseStyles.valueContainer(styles),\n\n padding: '10px 20px',\n fontSize: 14,\n color: isInvalid ? colors.red : colors.black,\n }),\n\n dropdownIndicator: (styles, state) => ({\n ...baseStyles.dropdownIndicator(styles, state),\n\n i: {\n fontWeight: 400,\n color: isInvalid ? colors.red : state.isFocused ? colors.cyan : colors.lightGrey,\n\n '&:hover': {\n color: isInvalid ? colors.red : state.isFocused ? colors.cyan : colors.lightGrey,\n },\n },\n }),\n\n option: (styles) => ({\n ...baseStyles.option(styles),\n\n padding: 0,\n\n '.single-option-wrapper': {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flexGrow: 1,\n padding: '9px 10px 10px 20px',\n fontSize: 14,\n marginLeft: 2,\n\n label: {\n margin: 0,\n padding: 0,\n },\n },\n }),\n };\n };\n};\n","export { SelectInput } from './SelectInput';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { createPortal } from 'react-dom';\n\nimport { usePromiseTracker } from 'react-promise-tracker';\nimport BounceLoader from 'react-spinners/BounceLoader';\n\nimport { colors } from 'styles';\nimport * as styles from './Spinner.styles';\n\nconst Spinner = memo(({ show }) => {\n const { promiseInProgress } = usePromiseTracker({ delay: 500 });\n\n if (!promiseInProgress && !show) {\n return null;\n }\n\n const spinner = (\n \n
\n \n
\n );\n\n return createPortal(spinner, document.querySelector('body'));\n});\n\nexport { Spinner };\n","import { css } from '@emotion/core';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\nimport { colors } from 'styles';\n\nexport const opaque = css`\n background: ${HexToRgba(colors.white, 70)};\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999999;\n`;\n","export { Spinner } from './Spinner';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { createPortal } from 'react-dom';\nimport { jsx } from '@emotion/core';\n\nimport { Badge } from 'components/shared/Badge';\n\nimport * as styles from './StatusBadge.styles';\n\nconst StatusBadge = ({ status, text }) => {\n const targetNode = document.querySelector('#status-badge');\n\n const component = (\n \n
\n );\n\n if (targetNode) {\n return createPortal(component, targetNode);\n } else {\n return null;\n }\n};\n\nexport { StatusBadge };\n","import { css } from '@emotion/core';\nimport { fonts } from 'styles';\n\nexport const badge = css`\n margin-left: 7px;\n min-width: 79px;\n width: auto;\n padding: 0 10px;\n line-height: 27px;\n font-size: 16px;\n`;\n","export { StatusBadge } from './StatusBadge';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport * as styles from './Steps.styles';\n\nconst Steps = memo(({ stepMap, currentStep, disabledSteps, completedSteps, changeStep }) => {\n const stepKeys = Object.keys(stepMap).map(Number);\n const totalSteps = stepKeys.length;\n\n // TODO - Refactor\n const renderedSteps = stepKeys.map((step, index) => {\n const isClickable = !disabledSteps.includes(step);\n const isCompleted = completedSteps && completedSteps.includes(step);\n const withLine = index < totalSteps - 1;\n const isActive = step == currentStep;\n const handleClick = isClickable && !isActive ? changeStep.bind(this, step) : null;\n\n return (\n {text}
\n\n
\n );\n });\n\n return \n
\n\n {withLine && }\n \n
\n\n {isCompleted ? : step}
\n {stepMap[step]}
\n {renderedSteps}
;\n});\n\nexport { Steps };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nexport const steps = css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 40px;\n\n ${media.tablet} {\n align-items: flex-start;\n }\n`;\n\nexport const step = (grow) => css`\n display: flex;\n align-items: center;\n position: relative;\n ${media.tablet} {\n align-items: flex-start;\n flex-grow: ${grow ? 1 : 0};\n }\n`;\n\nexport const wrapper = (isClickable) => css`\n display: flex;\n align-items: center;\n position: relative;\n z-index: 2;\n\n ${media.tablet} {\n flex-direction: column;\n }\n\n &:hover {\n cursor: ${isClickable ? 'pointer' : 'default'};\n }\n`;\n\nexport const line = css`\n margin: 0 12px;\n border-top: 1px solid ${colors.headingGrey};\n height: 1px;\n width: 30px;\n\n ${media.tablet} {\n width: 20px;\n flex-direction: column;\n margin: 0 5px;\n margin: 0 10px 0 0;\n transform: translateY(20px);\n z-index: 1;\n flex-grow: 1;\n }\n`;\n\nexport const outerCircle = (isActive) => css`\n width: 34px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n flex-shrink: 0;\n height: 34px;\n background: ${HexToRgba(isActive ? colors.cyan : colors.lightGrey, 20)};\n`;\n\nexport const innerCircle = (isActive) => css`\n ${fonts.bold}\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n flex-shrink: 0;\n height: 24px;\n background: ${isActive ? colors.cyan : colors.lightGrey};\n border-radius: 50%;\n color: ${colors.white};\n font-size: 12px;\n`;\n\nexport const name = (isActive) => css`\n ${isActive ? fonts.semiBold : fonts.regular}\n font-size: 16px;\n flex-shrink: 0;\n color: ${isActive ? colors.cyan : colors.mediumGrey};\n margin-left: 12px;\n font-weight: 500;\n\n ${media.tablet} {\n margin-top: 5px;\n text-align: center;\n margin-left: 0;\n font-size: 12px;\n line-height: 14px;\n }\n`;\n","export { Steps } from './Steps';\n","export const STATUS_OPTIONS = [\n { value: 'draft', label: 'Draft' },\n { value: 'approved', label: 'Approved' },\n { value: 'in_review', label: 'In review' },\n { value: 'archived', label: 'Archived' },\n];\n\nexport const TASK_STATUSES = [\n { value: 'Completed', className: 'badge badge-large badge-soft-low fs-i-12' },\n { value: 'Overdue', className: 'badge badge-large badge-danger fs-i-12 ' },\n { value: 'Archived', className: 'badge badge-large badge-archived fs-i-12' },\n { value: 'In Progress', className: 'badge badge-large badge-soft-draft fs-i-12' },\n { value: 'Incomplete', className: 'badge badge-large badge-soft-draft fs-i-12' },\n];\n","/** @jsx jsx */\n\nimport React, { memo, useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { withIntl } from '../../../utils/v2/intl';\nimport { TASK_STATUSES } from './constants';\n\nimport * as styles from './index.styles';\n\nconst Line = ({ header, children, isWrapped }) => {\n return (\n \n
\n );\n};\n\nconst CountItem = ({ title, count }) => {\n return (\n {header}:
\n{children}
\n \n {title}:\n {count}\n
\n );\n};\n\nconst DateLabel = ({ date, time }) => (\n\n
\n);\n\nconst TableMobileCard = memo(\n ({\n name,\n nameType = 'Minutes',\n owner,\n approver,\n assignee,\n link,\n linkTrigger,\n type,\n agenda,\n meeting,\n dasherize,\n status,\n isTask,\n date,\n time,\n confirmedCount,\n waitingCount,\n declinedCount,\n totalCount,\n receivedCount,\n pendingCount,\n isLast,\n dueDate,\n log,\n }) => {\n const redirectToEntity = useCallback(() => {\n return link ? window.location.assign(link) : undefined;\n }, [link]);\n\n const intl = useIntl();\n\n const taskStatusClassName = isTask ? TASK_STATUSES.find((option) => option.value === status) : '';\n\n const counts = [confirmedCount, waitingCount, declinedCount, totalCount, receivedCount, pendingCount];\n const showCountBlock = counts.some((count) => count !== undefined);\n\n const CountBlock = () => {\n return showCountBlock ? (\n {date}
\n {time}
\n \n {confirmedCount !== undefined ? (\n
\n ) : null;\n };\n\n const CardContent = () => {\n return (\n <>\n \n {date && time ? (\n \n \n ) : null}\n {nameType && name ? (\n {name} \n ) : null}\n {type ? {type} : null}\n {agenda ? {agenda} : null}\n {meeting ? {meeting} : null}\n {owner ? {owner} : null}\n {assignee ? {assignee} : null}\n {dueDate ? {dueDate} : null}\n {approver ? {approver} : null}\n {status || dasherize ? (\n \n {isTask && taskStatusClassName ? (\n {status}\n ) : (\n {status}\n )}\n \n ) : null}\n
\n \n {children}\n
\n );\n };\n\n return (\n \n
\n );\n });\n\n return (\n {tag.name}
\n\n {!isReadOnly && }\n \n \n\n
\n );\n }\n);\n\nexport { TagInput };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const tag = css`\n display: inline-block;\n background: ${colors.cyan};\n border-radius: 2px;\n padding: 7px 10px;\n margin-right: 12px;\n margin-top: 10px;\n display: flex;\n align-items: center;\n`;\n\nexport const name = css`\n ${fonts.regular}\n font-size: 14px;\n line-height: 16px;\n color: ${colors.white};\n`;\n\nexport const deleteIcon = css`\n font-size: 16px;\n color: ${colors.white};\n font-weight: 300;\n margin-left: 16px;\n\n &:hover {\n opacity: 0.8;\n cursor: pointer;\n color: ${colors.white};\n }\n`;\n","export { TagInput } from './TagInput';\n","/** @jsx jsx */\nimport React, { memo, useRef, useCallback, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { Drawer } from './../Drawer';\n\nimport { Input } from './../Input';\nimport { DateInput } from './../DateInput';\nimport { TextAreaInput } from './../TextAreaInput';\nimport { TagInput } from './../TagInput';\nimport { ContactPicker } from './../ContactPicker';\nimport { AgendaPicker } from './../AgendaPicker';\n\nimport { parseDateTime } from 'helpers/parseDateTime';\nimport { useMeetingStatus } from 'hooks/useMeetingStatus';\n\nimport * as styles from './TaskDrawer.styles';\n\nimport { useTaskDrawerActions, useTaskDrawerStore } from 'store/taskDrawerStoreContext';\n\nconst TaskDrawer = memo(\n ({\n agendas,\n adminView,\n editView,\n meetingStatus,\n contacts,\n onClose,\n onCreate,\n onUpdate,\n onDelete,\n currentContactId,\n }) => {\n const { task, isSubmit, errors, isOpen } = useTaskDrawerStore();\n const { setTask } = useTaskDrawerActions();\n\n const intl = useIntl();\n\n const drawerId = 'shaparency-task-drawer';\n\n const { isEditable, isInSession } = useMeetingStatus(meetingStatus);\n const adminAccess = adminView && (isEditable || isInSession);\n const editAccess = editView && (isEditable || isInSession);\n const isActionable = adminAccess || editAccess;\n const isTogglable = isActionable || task.contact_ids.includes(currentContactId);\n\n useEffect(() => {\n if (isOpen) {\n document.getElementById(drawerId).scrollTop = 0;\n document.querySelector('body').classList.add('opaque-bg');\n } else {\n document.querySelector('body').classList.remove('opaque-bg');\n }\n }, [isOpen]);\n\n const applicableStyles = [styles.drawer.base, isOpen && styles.drawer.state.open];\n\n const { current: calendarIcon } = useRef();\n const { current: tagsIcon } = useRef();\n\n const contactExists = useCallback(\n (contact) => {\n return task.contact_ids.find((id) => id === contact.id);\n },\n [task.contact_ids]\n );\n\n const toggleContact = useCallback(\n (contact) => {\n const isAdded = contactExists(contact);\n\n if (isAdded) {\n removeContact(contact);\n } else {\n addContact(contact);\n }\n },\n [task.contact_ids]\n );\n\n const addContact = useCallback(\n (contact) => {\n const contactIds = [...task.contact_ids, contact.id];\n\n setTask('contact_ids', contactIds);\n },\n [task.contact_ids]\n );\n\n const removeContact = useCallback(\n (contact) => {\n const contactIds = task.contact_ids.filter((id) => id !== contact.id);\n\n setTask('contact_ids', contactIds);\n },\n [task.contact_ids]\n );\n\n const markCompleted = useCallback((event) => {\n setTask('status', event.target.checked ? 'completed' : 'incomplete');\n }, []);\n\n const handleTags = useCallback((tags) => {\n setTask('tags', tags);\n }, []);\n\n const handleInputChange = useCallback((event) => {\n setTask(event.target.name, event.target.value);\n }, []);\n\n const handleDate = useCallback((date) => {\n setTask('due_date', date);\n }, []);\n\n const addAgenda = useCallback((agenda) => {\n setTask('agenda_id', agenda.id);\n }, []);\n\n const removeAgenda = useCallback(() => {\n setTask('agenda_id', null);\n }, []);\n\n const completed = task.status === 'completed';\n const agenda = agendas.find((agenda) => agenda.id === task.agenda_id);\n const taskContacts = contacts.filter((contact) => task.contact_ids.includes(contact.id));\n\n const handleCreate = () => onCreate(task);\n const handleUpdate = () => onUpdate(task);\n const handleDelete = () => onDelete(task.id);\n\n const drawerHeader = () => {\n if (!isActionable) {\n return intl.formatMessage({ id: 'TaskDrawer.viewTask' });\n } else if (task.id) {\n return intl.formatMessage({ id: 'TaskDrawer.editTask' });\n } else {\n return intl.formatMessage({ id: 'TaskDrawer.createTask' });\n }\n };\n\n useEffect(() => {\n const keys = Object.keys(errors);\n\n if (isSubmit && keys.length) {\n document.querySelector(`[name='${keys[0]}']`).scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n });\n }\n }, [errors]);\n\n const renderButtons = () => {\n if (!isActionable && !isTogglable) {\n return (\n \n {tags}
\n \n \n {buttonText}\n \n
\n\n {adminAccess && task.id && (\n \n
\n {drawerHeader()}
\n\n \n
\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n \n {renderButtons()}\n\n {isTogglable && (\n
\n \n
\n )}\n \n \n\n
\n );\n }\n )\n);\n\nTextAreaInput.propTypes = {\n id: PropTypes.string,\n name: PropTypes.string,\n label: PropTypes.string,\n placeholder: PropTypes.string,\n isRequired: PropTypes.bool,\n isDisabled: PropTypes.bool,\n isReadOnly: PropTypes.bool,\n errorMessage: PropTypes.string,\n value: PropTypes.any,\n onChange: PropTypes.func,\n};\n\nexport { TextAreaInput };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const wrapper = {\n base: css`\n border: 1px solid transparent;\n padding: 11px 9px;\n border-color: ${colors.border};\n background-color: ${colors.white};\n `,\n\n state: {\n focused: css`\n border-color: ${colors.cyan};\n `,\n\n invalid: css`\n border-color: ${colors.lightRed};\n `,\n\n disabled: css`\n background: ${colors.grey};\n border-radius: 2px;\n border: 1px solid rgba(152, 164, 175, 0.4);\n `,\n },\n};\n\nexport const textarea = {\n base: css`\n ${fonts.regular}\n line-height: 20px;\n border: none;\n font-size: 14px;\n width: 100%;\n height: 150px;\n overflow: auto;\n padding: 0 10px;\n resize: none;\n\n color: ${colors.black};\n\n &::placeholder {\n color: ${colors.headingGrey};\n }\n `,\n\n state: {\n disabled: css`\n ${wrapper.state.readOnly}\n background: ${colors.grey};\n border: none;\n `,\n\n invalid: css`\n color: ${colors.red};\n\n &::placeholder {\n color: ${colors.red};\n }\n `,\n },\n};\n","export { TextAreaInput } from './TextAreaInput';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport TimePicker from 'components/shared/TimePicker';\n\nimport { Label, Error } from 'components/shared/Input';\n\nimport * as styles from './TimeInput.styles';\n\nconst TimeInput = memo(({ name, label, errorMessage, hideErrors, onChange, isDisabled, value, pickerName }) => {\n return (\n \n
\n \n
\n\n \n \n\n
\n );\n});\n\nexport { TimeInput };\n","import { css } from '@emotion/core';\n\nexport const wrapper = css`\n align-self: flex-start;\n`;\n\nexport const errorMessage = css`\n position: static;\n white-space: pre-wrap;\n max-width: 100px;\n`;\n","export { TimeInput } from './TimeInput';\n","/** @jsx jsx */\n\nimport React, { memo, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { TextField } from 'components/shared/Input/TextField';\n\nimport * as styles from './TimePicker.styles';\n\nconst TimePicker = memo(({ onChange, time, inputName, isDisabled, pickerName, isInvalid }) => {\n const formatMoment = (time, format) => moment(time).parseZone().format(format);\n\n const formattedTimePeriod = formatMoment(time, 'A');\n const formattedHours = parseInt(formatMoment(time, 'hh'));\n const formattedMinutes = parseInt(formatMoment(time, 'mm'));\n\n let [timePeriod, setTimePeriod] = useState(formattedTimePeriod);\n let [hours, setHours] = useState(formattedHours);\n let [minutes, setMinutes] = useState(formattedMinutes);\n\n useEffect(() => {\n setTimePeriod(formattedTimePeriod);\n setHours(formattedHours);\n setMinutes(formattedMinutes);\n }, [time]);\n\n useEffect(() => {\n if (onChange) {\n var dateTime = moment(getTimeString(), 'hh:mm A');\n\n onChange(dateTime);\n }\n }, [hours, minutes, timePeriod]);\n\n let [isEditingHours, setIsEditingHours] = React.useState(false);\n let [isEditingMinutes, setIsEditingMinutes] = React.useState(false);\n\n const timePeriodClass = (selectedTimePeriod) => {\n if (timePeriod === selectedTimePeriod) return 'active';\n };\n\n const formatTime = (value) => {\n return value > 9 ? value : `0${value}`;\n };\n\n const getTimeString = () => {\n return `${formatTime(hours)}:${formatTime(minutes)} ${timePeriod}`;\n };\n\n const addMinutes = (value) => {\n if (isDisabled) {\n return;\n }\n\n if (isNaN(value)) setMinutes('');\n else setMinutes(value);\n };\n\n const addHours = (value) => {\n if (isDisabled) {\n return;\n }\n\n if (isNaN(value)) setHours('');\n else setHours(value);\n };\n\n const normalizeHours = (hoursValue) => {\n if (hoursValue === 0) {\n return 12;\n } else if (hoursValue === 13) {\n return 1;\n } else {\n return hoursValue;\n }\n };\n\n const normalizeMinutes = (minutesValue) => {\n if (minutesValue >= 60) {\n return minutesValue - 60;\n } else if (minutesValue < 0) {\n return minutesValue + 60;\n } else {\n return minutesValue;\n }\n };\n\n const onBlurHours = () => {\n setHours(normalizeHours(hours));\n\n setIsEditingHours(!isEditingHours);\n };\n\n const onBlurMinutes = () => {\n if (minutes == '') setMinutes(0);\n\n setIsEditingMinutes(!isEditingMinutes);\n };\n\n return (\n \n \n\n (isDisabled ? null : setTimePeriod('PM'))}\n className={`m-t-5 d-block text-center ${timePeriodClass('PM')}`}\n >\n
\n \n \n \n addHours(parseInt(e.target.value))}\n onBlur={() => onBlurHours()}\n />\n ) : (\n setIsEditingHours(!isEditingHours)}\n isReadOnly\n />\n )}\n\n
\n\n \n :\n \n\n \n (isDisabled ? null : addHours(normalizeHours(hours + 1)))} className='fa fa-chevron-up' />\n
\n\n {isEditingHours ? (\n \n (isDisabled ? null : addHours(normalizeHours(hours - 1)))}\n className='fa fa-chevron-down'\n />\n
\n \n addMinutes(parseInt(e.target.value))}\n onBlur={() => onBlurMinutes()}\n />\n ) : (\n setIsEditingMinutes(!isEditingMinutes)}\n isReadOnly\n />\n )}\n\n
\n\n \n (isDisabled ? null : addMinutes(normalizeMinutes(minutes + 15)))}\n className='fa fa-chevron-up'\n />\n
\n\n {isEditingMinutes ? (\n \n (isDisabled ? null : addMinutes(normalizeMinutes(minutes - 15)))}\n className='fa fa-chevron-down'\n />\n
\n \n (isDisabled ? null : setTimePeriod('AM'))}\n className={`d-block text-center ${timePeriodClass('AM')}`}\n >\n
\n \n \n
\n );\n\n const renderOption = (timezone) => {\n const key = `timezone-picker-${timezone.value}`;\n const onClick = onSelect.bind(this, timezone, handleBlur);\n const isSelected = timezone.value == selectedTimezone.value;\n\n return (\n \n
\n \n
\n\n {isSelected && checkmark}\n \n
\n \n );\n});\n\nexport { TimezoneDropdown };\n","import { css } from '@emotion/core';\n\nexport const wrapper = (hasOptions) => css`\n padding: ${hasOptions ? '13px 8px 13px 0' : 0};\n`;\n\nexport const dropdownWrapper = css`\n input[type='search']::-webkit-search-decoration,\n input[type='search']::-webkit-search-cancel-button,\n input[type='search']::-webkit-search-results-button,\n input[type='search']::-webkit-search-results-decoration {\n display: none;\n }\n`;\n\nexport const items = css`\n overflow: auto;\n max-height: 241px;\n`;\n","export { TimezoneDropdown } from './TimezoneDropdown';\n","/** @jsx jsx */\n\nimport React, { memo, useEffect, useCallback, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { UploadWindowStatusBar } from './../UploadWindowStatusBar';\nimport { UploadWindowItemList } from './../UploadWindowItemList';\nimport { useCreateDocument } from 'components/documents/hooks/useCreateDocument';\nimport { useCreateResolutionDocument } from 'components/votes/hooks/useCreateResolutionDocument';\nimport { useUploadQueueActions, useUploadQueueStore } from 'store/uploadQueueStoreContext';\n\nimport * as styles from './UploadWindow.styles';\n\nconst UploadWindow = memo(({ onResolutionDocumentUpload }) => {\n const [isMinimized, setIsMinimized] = useState(false);\n\n const intl = useIntl();\n\n const { uploadQueue, currentUpload, pendingCount, completeCount } = useUploadQueueStore();\n\n const {\n processQueue,\n discardQueue,\n cancelUpload,\n retryUpload,\n completeCurrentUpload: onUpload,\n rejectCurrentUpload: onError,\n setCurrentUpload,\n } = useUploadQueueActions();\n\n const { createDocument } = useCreateDocument({ onUpload, onError });\n const { createResolutionDocument } = useCreateResolutionDocument({ onUpload, onResolutionDocumentUpload, onError });\n\n useEffect(() => toggleBeforeUnloadListener(), [pendingCount]);\n useEffect(() => handleQueueProcessing(), [uploadQueue]);\n useEffect(() => handleCurrentUpload(), [currentUpload]);\n\n const toggleBeforeUnloadListener = () => {\n if (pendingCount > 0) {\n window.addEventListener('beforeunload', onBeforeUnload);\n } else {\n window.removeEventListener('beforeunload', onBeforeUnload);\n }\n };\n\n const onBeforeUnload = useCallback((e) => {\n e.returnValue = intl.formatMessage({ id: 'UploadWindow.cancelUploads' });\n }, []);\n\n const handleQueueProcessing = () => {\n if (uploadQueue.length && !currentUpload) {\n processQueue();\n }\n };\n\n const handleCurrentResolutionDocumentUpload = () => {\n const params = {\n resolutionId: currentUpload.resolutionId,\n attachment: currentUpload.file,\n };\n\n createResolutionDocument(params, setCurrentUpload);\n };\n\n const handleCurrentDocumentUpload = () => {\n const params = {\n attachment: currentUpload.file,\n directoryId: currentUpload.directory.id,\n path: currentUpload.file.path,\n };\n\n createDocument(params, setCurrentUpload);\n };\n\n const handleCurrentUpload = () => {\n if (!currentUpload) return;\n\n if (currentUpload.resolutionId) {\n handleCurrentResolutionDocumentUpload();\n } else {\n handleCurrentDocumentUpload();\n }\n };\n\n const handleToggleMinimizedWindow = useCallback(() => {\n setIsMinimized(!isMinimized);\n }, [isMinimized]);\n\n const handleCloseWindow = useCallback(() => {\n cancelUpload({ id: currentUpload?.id });\n discardQueue();\n }, [currentUpload]);\n\n const containerStyles = [styles.container.base, isMinimized && styles.container.minimized];\n\n return (\n uploadQueue.length > 0 && (\n \n
\n \n \n {dropdownBody}\n
\n \n
\n )\n );\n});\n\nexport { UploadWindow };\n","import { css } from '@emotion/core';\nimport { fonts, colors, media } from 'styles';\n\nexport const container = {\n base: css`\n z-index: 3;\n position: absolute;\n width: 400px;\n height: 245px;\n bottom: 24px;\n right: 24px;\n background: ${colors.white};\n box-shadow: 0px 3px 20px rgba(16, 8, 63, 0.11);\n border-radius: 7px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n ${media.mobile} {\n position: fixed;\n width: 100%;\n bottom: 0;\n right: 0;\n }\n `,\n\n minimized: css`\n height: auto;\n `,\n};\n","export { UploadWindow } from './UploadWindow';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport Tooltip from 'react-bootstrap/Tooltip';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport { FormattedMessage } from 'react-intl';\n\nimport { UploadWindowItemActions } from './../UploadWindowItemActions';\nimport { formatBytes } from 'helpers/formatBytes';\n\nimport { ReactComponent as DocumentIcon } from 'images/icons/documents/document-icon.svg';\nimport { ReactComponent as TooltipIcon } from 'images/icons/documents/upload-tooltip-icon.svg';\n\nimport * as styles from './UploadWindowItem.styles';\n\nconst UploadWindowItem = memo(({ id, name, path, state, size, error, progress, xhr }) => {\n const progressStyles = error ? styles.failed : styles.progress(progress);\n const pathDefined = path.split('/')[0] !== 'undefined';\n\n const itemSize = formatBytes(size, 2);\n const itemPath = path\n .split('/')\n .filter((item) => item.length)\n .join(' > ');\n\n const tooltip = (\n {error}
\n \n
\n );\n});\n\nexport { UploadWindowItem };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const container = css`\n display: flex;\n align-items: center;\n padding: 10px 21px;\n justify-content: space-between;\n position: relative;\n`;\n\nexport const flex = css`\n display: flex;\n align-items: center;\n`;\n\nexport const icon = css`\n flex-shrink: 0;\n margin-right: 7px;\n line-height: 1;\n`;\n\nexport const name = css`\n ${fonts.semiBold}\n color: ${colors.black};\n font-size: 12px;\n line-height: 14px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 180px;\n margin-right: 10px;\n`;\n\nexport const path = css`\n ${fonts.regular}\n line-height: 1;\n color: ${colors.lightGrey};\n font-size: 10px;\n line-height: 14px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n`;\n\nexport const size = css`\n ${path}\n`;\n\nexport const cancel = css`\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n`;\n\nexport const actions = css`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n`;\n\nexport const bar = css`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n width: 100%:\n background: ${colors.mediumGrey};\n`;\n\nexport const progress = (width) => css`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n width: ${width}%;\n background: ${colors.cyan};\n`;\n\nexport const failed = css`\n ${progress(100)}\n background: ${colors.red};\n`;\n\nexport const error = css`\n line-height: 1;\n color: ${colors.red};\n`;\n\nexport const tooltip = css`\n ${fonts.regular};\n font-size: 10px;\n`;\n","export { UploadWindowItem } from './UploadWindowItem';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { COMPLETE, CANCELLED, ERROR } from 'data/globals/UploadQueueItemStates';\n\nimport { useUploadQueueActions } from 'store/uploadQueueStoreContext';\n\nimport * as styles from './UploadWindowItemActions.styles';\n\nconst UploadWindowItemActions = memo(({ id, state, progress, xhr }) => {\n const isComplete = state === COMPLETE;\n const isRetriable = [CANCELLED, ERROR].includes(state);\n\n const { cancelUpload, retryUpload } = useUploadQueueActions();\n\n const handleCancel = () => cancelUpload({ id });\n const handleRetry = () => retryUpload({ id });\n\n const percentage = (\n \n
\n\n \n
\n \n
\n\n {itemError}\n {name}
\n\n {pathDefined && (\n \n {error ? (\n
\n )}\n\n {!pathDefined && error && (\n \n
\n ) : (\n itemPath\n )}\n \n
\n )}\n \n
\n {itemSize}
\n\n \n
\n\n \n \n
\n \n {progress}%\n
\n );\n\n if (isComplete) {\n return percentage;\n }\n\n if (isRetriable) {\n return ;\n }\n\n return (\n \n \n {percentage}\n
\n );\n});\n\nexport { UploadWindowItemActions };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const control = css`\n cursor: pointer;\n font-weight: 300;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n\n &:hover {\n background: ${colors.placeholderGrey};\n }\n`;\n\nexport const percentage = css`\n ${fonts.regular}\n color: ${colors.cyan};\n font-size: 12px;\n`;\n\nexport const container = css`\n display: flex;\n align-items: center;\n width: 100%;\n justify-content: center;\n cursor: pointer;\n\n .fa {\n display: none;\n cursor: pointer;\n }\n\n .percentage {\n cursor: pointer;\n display: block;\n }\n\n &:hover {\n .fa {\n display: flex;\n }\n\n .percentage {\n display: none;\n }\n }\n`;\n","export { UploadWindowItemActions } from './UploadWindowItemActions';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { UploadWindowItem } from './../UploadWindowItem';\n\nimport * as styles from './UploadWindowItemList.styles';\n\nconst UploadWindowItemList = memo(({ show, items }) => {\n const list = items.map((item) => {\n const { file, xhr, directory, progress, state, error } = item;\n\n const key = `upload${item.id}`;\n const path = `${directory?.name}/${file.path}`;\n\n return (\n {list}
;\n});\n\nexport { UploadWindowItemList };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const container = {\n base: css`\n border-top: 1px solid #d8dae3;\n overflow: auto;\n display: none;\n height: 100%;\n max-height: 200px;\n `,\n\n visible: css`\n display: block;\n `,\n};\n","export { UploadWindowItemList } from './UploadWindowItemList';\n","/** @jsx jsx */\n\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { AlertPopup } from 'components/shared/AlertPopup';\n\nimport * as styles from './UploadWindowStatusBar.styles';\n\nconst UploadWindowStatusBar = memo(\n ({ pendingUploadsCount, completeUploadsCount, isMinimized, onClose, onToggleMinimized }) => {\n const [showConfirmation, setShowConfirmation] = useState(false);\n const hideConfirmation = () => setShowConfirmation(false);\n\n const intl = useIntl();\n\n const boldHeaderText =\n pendingUploadsCount > 0\n ? intl.formatMessage({ id: 'UploadWindowStatusBar.itemCount' }, { count: pendingUploadsCount })\n : intl.formatMessage({ id: 'UploadWindowStatusBar.itemCount' }, { count: completeUploadsCount });\n\n const regularHeaderText =\n pendingUploadsCount > 0\n ? intl.formatMessage({ id: 'UploadWindowStatusBar.uploading' })\n : intl.formatMessage({ id: 'UploadWindowStatusBar.uploaded' });\n\n const handleClose = () => {\n if (pendingUploadsCount > 0) {\n setShowConfirmation(true);\n } else {\n onClose();\n }\n };\n\n return (\n \n \n
\n );\n }\n);\n\nexport { UploadWindowStatusBar };\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const hoverable = css`\n &:hover {\n opacity: 0.8;\n }\n`;\n\nexport const container = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 20px;\n`;\n\nexport const controls = css`\n display: flex;\n align-items: center;\n`;\n\nexport const header = css`\n ${fonts.bold}\n font-size: 14px;\n color: ${colors.black};\n`;\n\nexport const text = css`\n ${fonts.regular}\n font-size: 14px;\n color: ${colors.black};\n`;\n\nexport const toggle = css`\n ${hoverable}\n cursor: pointer;\n font-size: 12px;\n flex-shrink: 0;\n font-weight: 300;\n color: ${colors.mediumGrey};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n width: 25px;\n height: 25px;\n\n &:hover {\n background: ${colors.placeholderGrey};\n }\n`;\n\nexport const close = css`\n ${toggle}\n margin-right: 0;\n`;\n","export { UploadWindowStatusBar } from './UploadWindowStatusBar';\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ReactComponent as DocumentIcon } from 'images/icons/agenda-document.svg';\n\nimport * as styles from './Uploadable.styles';\n\nconst Uploadable = memo(({ name, percentage, error, uploaded, onCancel, context }) => {\n if (uploaded) return;\n\n const progressBarStyles = styles.uploadable.progress(percentage);\n\n const uploadableStyles = [styles.uploadable.base, error && styles.uploadable.invalid];\n\n return (\n \n {boldHeaderText} \n {regularHeaderText}\n
\n\n \n
\n\n \n
\n\n \n \n \n
\n \n \n \n\n
\n );\n});\n\nexport { Uploadable };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const uploadable = {\n base: css`\n background: ${colors.white};\n opacity: 1;\n padding: 10px 17px;\n display: flex;\n margin-bottom: 5px;\n font-size: 14px;\n color: ${colors.black};\n align-items: center;\n justify-content: space-between;\n border-radius: 4px;\n position: relative;\n `,\n\n progress: (width) => css`\n position: absolute;\n left: 0;\n height: 100%;\n width: ${width}%;\n background: #e1e4e8;\n `,\n\n invalid: css`\n background: #ffeaea;\n `,\n};\n\nexport const warn = css`\n color: ${colors.red};\n font-size: 14px;\n`;\n","export { Uploadable } from './Uploadable';\n","const HexToRgba = (hex, opacity) => {\n const tempHex = hex.replace('#', '');\n\n const r = parseInt(tempHex.substring(0, 2), 16);\n const g = parseInt(tempHex.substring(2, 4), 16);\n const b = parseInt(tempHex.substring(4, 6), 16);\n const a = opacity / 100;\n\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n};\n\nexport { HexToRgba };\n","const If = ({ query, children }) => {\n const result = typeof query === 'function' ? query() : query;\n\n if (!result) {\n return null;\n }\n\n return children;\n};\n\nexport { If };\n","export const matchedParts = (text, query) => {\n const regex = new RegExp(query.trim(), 'gi');\n const matches = [...text.matchAll(regex)];\n\n if (matches.length === 0) return [{ text: text, matched: false }];\n\n let parts = [];\n\n if (matches[0].index > 0) {\n parts.push({ text: text.slice(0, matches[0].index), matched: false });\n }\n\n matches.forEach((match, matchIndex) => {\n const startIndex = match.index;\n const endIndex = match.index + match[0].length;\n\n parts.push({ text: text.slice(startIndex, endIndex), matched: true });\n\n const isLastMatch = matchIndex === matches.length - 1;\n\n if (isLastMatch) {\n if (endIndex < text.length) {\n parts.push({ text: text.slice(endIndex, text.length), matched: false });\n }\n } else if (endIndex < matches[matchIndex + 1].index) {\n parts.push({ text: text.slice(endIndex, matches[matchIndex + 1].index), matched: false });\n }\n });\n\n return parts;\n};\n","import { useState, useEffect, useRef } from 'react';\n\nexport default function detectClickOutside(initialIsVisible) {\n const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);\n const ref = useRef(null);\n\n const handleHideDropdown = (event) => {\n if (event.key === 'Escape') {\n setIsComponentVisible(false);\n }\n };\n\n const handleClickOutside = (event) => {\n if (ref.current && !ref.current.contains(event.target)) {\n setIsComponentVisible(false);\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', handleHideDropdown, true);\n document.addEventListener('click', handleClickOutside, true);\n return () => {\n document.removeEventListener('keydown', handleHideDropdown, true);\n document.removeEventListener('click', handleClickOutside, true);\n };\n });\n\n return { ref, isComponentVisible, setIsComponentVisible };\n}\n","import axios from 'axios';\n\nexport default class API {\n static handleError({ response: { data } }) {\n let message = data.message || 'Something went wrong. Please try again in a few seconds.';\n\n displayFlashMessage(message, 'error');\n }\n\n static uploadSignature(documentId, fieldId, accessToken, blob, forAll, onUpload, onError = this.handleError) {\n const formData = new FormData();\n\n formData.append('access_token', accessToken);\n formData.append('document_field[attachment_attributes][file]', blob);\n formData.append('for_all_empty', forAll);\n\n const config = {\n headers: {\n 'content-type': 'multipart/form-data',\n },\n };\n\n return axios\n .put(`/api/${getCompanySlug()}/smart_documents/${documentId}/document_fields/${fieldId}.json`, formData, config)\n .then((response) => response.data)\n .then(onUpload)\n .catch(onError);\n }\n\n static updateSmartDocument(documentId, params, onUpdate, onError = this.handleError) {\n return axios\n .put(`/api/${getCompanySlug()}/smart_documents/${documentId}.json`, { smart_document: { ...params } })\n .then((response) => response.data)\n .then(onUpdate)\n .catch(onError);\n }\n\n static searchFoldersAndDocuments(rootId, searchTerm, onLoad) {\n return axios\n .get(`/api/${getCompanySlug()}/v1/directories.json?directory_id=${rootId}&search_type=dir&query=${searchTerm}`)\n .then((response) => response.data)\n .then(onLoad)\n .catch(this.handleError);\n }\n\n static createSmartDocument(documentId, onSubmit, onError = this.handleError) {\n return axios\n .post(`/api/${getCompanySlug()}/smart_documents.json`, { smart_document: { document_id: documentId } })\n .then((response) => response.data)\n .then(onSubmit)\n .catch(onError);\n }\n\n static submitSignature(documentId, accessToken, onSubmit) {\n return axios\n .post(`/${getCompanySlug()}/review_documents/${documentId}/signature_approve.json?access_token=${accessToken}`)\n .then((response) => response.data)\n .then(onSubmit)\n .catch(this.handleError);\n }\n\n static loadSignatureFields(documentId, accessToken, onLoad) {\n return axios\n .get(`/api/${getCompanySlug()}/smart_documents/${documentId}/document_fields.json?access_token=${accessToken}`)\n .then((response) => response.data)\n .then(onLoad)\n .catch(this.handleError);\n }\n\n static loadFields(documentId, onLoad) {\n const companySlug = getCompanySlug();\n return axios\n .get(`/${companySlug}/smart_sign/${documentId}/document_fields.json`)\n .then((response) => response.data.data)\n .then(onLoad)\n .catch(this.handleError);\n }\n\n static loadContacts(query, onLoad) {\n const companySlug = getCompanySlug();\n return axios\n .get(`/api/${companySlug}/contacts.json?query=${query}`)\n .then((response) => response.data)\n .then(onLoad)\n .catch(this.handleError);\n }\n\n static loadSignatories(documentId, onLoad) {\n return axios\n .get(`/api/${getCompanySlug()}/smart_documents/${documentId}/signatories.json`)\n .then((response) => response.data)\n .then(onLoad)\n .catch(this.handleError);\n }\n\n static deleteSignatory(documentId, signatoryId, onDelete) {\n return axios\n .delete(`/api/${getCompanySlug()}/smart_documents/${documentId}/signatories/${signatoryId}.json`)\n .then((response) => response.data)\n .then(onDelete)\n .catch(this.handleError);\n }\n\n static updateDocumentFields(documentId, documentFields, onUpdate, onError = this.handleError) {\n const companySlug = getCompanySlug();\n return axios\n .put(`/${companySlug}/smart_sign/${documentId}/configure.json`, this.getDocumentFieldsParams(documentFields))\n .then((response) => response.data.data)\n .then(onUpdate)\n .catch(onError);\n }\n\n static sendDocument(documentId, message, onSend, onError = this.handleError) {\n const companySlug = getCompanySlug();\n return axios\n .put(`/${companySlug}/smart_sign/${documentId}/send.json?next=true`, {\n smart_document: { email_message: message },\n })\n .then((response) => response.data)\n .then(onSend)\n .catch(onError);\n }\n\n static createSignatory(documentId, contact, onCreate, onError = this.handleError) {\n return axios\n .post(`/api/${getCompanySlug()}/smart_documents/${documentId}/signatories.json`, this.getSignatoryParams(contact))\n .then((response) => response.data)\n .then(onCreate)\n .catch(onError);\n }\n\n static getDocumentFieldsParams(documentFields) {\n return {\n configure: {\n fields: documentFields.map((field) => {\n return {\n id: isNaN(field.id) ? null : field.id,\n field_type: field.type,\n signatory_id: field.signatoryId,\n page: field.page,\n position_x: field.position.x,\n position_y: field.position.y,\n format: field.format,\n width: field.width,\n height: field.height,\n _destroy: field.deleted,\n };\n }),\n },\n };\n }\n\n static getSignatoryParams(contact) {\n return {\n signatory: {\n name: contact.name,\n email: contact.email,\n contact_id: contact.id,\n },\n };\n }\n}\n","/** @jsx jsx */\n\nimport React, { memo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { Viewer } from './../Viewer';\nimport { Toolbar } from './../Toolbar';\nimport { Field } from './../Field';\n\nimport * as styles from './Configure.styles';\n\nconst Configure = memo(\n ({\n documentFields,\n changeDocumentFields,\n signatories,\n documentIsConfigured,\n documentURL,\n saveConfiguration,\n onContinueToSigning,\n fieldTypes,\n dateTypes,\n isSignature,\n discardChanges,\n }) => {\n const activeDocumentFields = documentFields.filter((documentField) => !documentField.deleted);\n\n const defaultDateFormat = '%d/%m/%Y';\n\n const documentFieldSize = {\n width: 21,\n height: 6.835,\n };\n\n const dateTypeOptions = Object.keys(dateTypes).map((key) => {\n return {\n value: key,\n label: dateTypes[key],\n };\n });\n\n let [activeSignatory, setActiveSignatory] = useState();\n let [documentLoaded, setDocumentLoaded] = useState(false);\n let [activeFieldType, setActiveFieldType] = useState(fieldTypes.signature);\n let [activeField, setActiveField] = useState();\n let [tempField, setTempField] = useState({\n page: 1,\n active: false,\n position: {\n x: 1000,\n y: 0,\n },\n disabled: true,\n format: defaultDateFormat,\n value: dateTypes[defaultDateFormat],\n });\n\n useEffect(() => populateTempField(), [activeFieldType, activeSignatory]);\n\n const populateTempField = () => {\n if (!activeFieldType && !activeSignatory) return;\n\n setTempField({\n ...tempField,\n type: activeFieldType,\n signatoryId: activeSignatory?.id,\n signatoryName: activeSignatory?.name,\n });\n };\n\n const markDocumentAsLoaded = () => {\n setDocumentLoaded(true);\n };\n\n const isActiveSignatory = (signatory) => {\n return activeSignatory && activeSignatory.id === signatory.id;\n };\n\n const isActiveFieldType = (name) => {\n return activeFieldType && activeFieldType === name;\n };\n\n const toggleActiveField = (field) => {\n setActiveFieldType(isActiveFieldType(field) ? null : field);\n\n setActiveField(null);\n };\n\n const toggleActiveSignatory = (signatory) => {\n if (isActiveSignatory(signatory)) {\n setActiveSignatory(null);\n } else {\n setActiveSignatory(signatory);\n setActiveFieldType(fieldTypes.signature);\n }\n\n setActiveField(null);\n };\n\n const updateDocumentField = (documentField, params) => {\n if (documentField.disabled) {\n return setTempField({ ...tempField, ...params });\n }\n\n const index = documentFields.findIndex((field) => field.id === documentField.id);\n const currentFields = [...documentFields];\n\n currentFields[index] = { ...documentField, ...params };\n\n changeDocumentFields(currentFields);\n\n if (!params.deleted) {\n setActiveField(currentFields[index]);\n }\n };\n\n const unsetControls = () => {\n setActiveField(null);\n setActiveSignatory(null);\n setActiveFieldType(null);\n };\n\n const removeDocumentField = (documentField) => {\n updateDocumentField(documentField, { deleted: true });\n unsetControls();\n };\n\n const updateFieldCoordinates = (documentField, coordinates) => {\n updateDocumentField(documentField, { position: coordinates });\n };\n\n const getRelativeCoordinates = (x, y, parent) => {\n return {\n y: ((y - parent.offset().top) * 100) / parent.height(),\n x: ((x - parent.offset().left) * 100) / parent.width(),\n };\n };\n\n const documentPage = ({ page }) => {\n return document.querySelector(`.canvas-page-wrapper[data-page='${page}']`);\n };\n\n const addDocumentField = (f, e) => {\n const canvas = documentPage(f);\n const documentFieldId = Math.random().toString(36).substr(2, 9);\n const width = $(canvas).width();\n const height = $(canvas).height();\n // const position = tempField.position\n const position = getRelativeCoordinates(e.clientX - 50, e.clientY - 20, $(canvas));\n\n if (position.x >= 100 - documentFieldSize.width) {\n position.x = 100 - documentFieldSize.width;\n }\n\n if (position.x <= 3000 / width) {\n position.x = 3000 / width;\n }\n\n if (position.y <= 2500 / height) {\n position.y = 2500 / height;\n }\n\n if (position.y > 100 - documentFieldSize.height) {\n position.y = 100 - documentFieldSize.height;\n }\n\n const documentField = {\n id: documentFieldId,\n signatoryId: activeSignatory.id,\n signatoryName: activeSignatory.name,\n type: activeFieldType,\n position: position,\n page: canvas.dataset.page,\n format: tempField.format,\n width: documentFieldSize.width,\n height: documentFieldSize.height,\n value: tempField.value,\n };\n\n changeDocumentFields([...documentFields, documentField]);\n setActiveField(documentField);\n };\n\n const handleViewportClick = (e) => {\n if (displayTempField) {\n addDocumentField(tempField, e);\n } else {\n setActiveField(null);\n }\n };\n\n const displayTempField = activeSignatory && activeFieldType && tempField.active && !activeField;\n\n const showTempField = () => {\n setTempField({ ...tempField, active: true });\n };\n\n const hideTempField = () => {\n setTempField({ ...tempField, active: false });\n };\n\n const moveTempField = (e) => {\n const canvas = e.target.closest('.canvas-page-wrapper');\n const width = $(canvas).width();\n const height = $(canvas).height();\n\n if (!displayTempField || !canvas) return;\n\n const position = getRelativeCoordinates(e.clientX - 50, e.clientY - 20, $(canvas));\n\n if (position.x >= 100 - documentFieldSize.width) {\n position.x = 100 - documentFieldSize.width;\n }\n\n if (position.x <= 3000 / width) {\n position.x = 3000 / width;\n }\n\n if (position.y <= 2500 / height) {\n position.y = 2500 / height;\n }\n\n if (position.y > 100 - documentFieldSize.height) {\n position.y = 100 - documentFieldSize.height;\n }\n\n setTempField({\n ...tempField,\n page: canvas.dataset.page,\n position: position,\n });\n };\n\n const selectDocumentField = (documentField) => {\n const signatory = signatories.find((signatory) => signatory.id === documentField.signatoryId);\n\n setActiveField(documentField);\n setActiveSignatory(signatory);\n setActiveFieldType(documentField.type);\n };\n\n const unsetControlsAndSaveConfiguration = () => {\n unsetControls();\n saveConfiguration();\n };\n\n const unsetControlsAndContinueToSigning = () => {\n unsetControls();\n onContinueToSigning();\n };\n\n const unsetControlsAndDiscardChanges = () => {\n unsetControls();\n discardChanges();\n };\n\n const documentFieldComponents =\n documentLoaded &&\n activeDocumentFields.map((documentField) => {\n const removeField = removeDocumentField.bind(this, documentField);\n const isSelected = activeField?.id === documentField.id;\n const signatureField = isSignature(documentField);\n const page = documentPage(documentField);\n\n return (\n \n {context !== 'vote' &&
\n\n -
}\n\n {name}
\n \n {error}\n
\n\n {percentage}%
\n\n \n {error && (\n \n
\n \n
\n );\n }\n);\n\nexport { Configure };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const wrapper = css`\n display: flex;\n`;\n\nexport const viewer = css`\n background: ${colors.white};\n width: 777px;\n padding: 20px;\n`;\n\nexport const viewport = css`\n height: calc(100vh - 40px);\n`;\n\nexport const toolbar = css`\n box-shadow: 0px 0px 3px 1px rgba(51, 55, 70, 0.14);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 300px;\n background: ${colors.lightestGrey};\n padding: 14px 0;\n`;\n","export { Configure } from './Configure';\n","import React from 'react';\nimport { withIntl } from '../../../utils/v2/intl';\nimport { FormattedMessage } from 'react-intl';\n\nimport CalendarIcon from '../../shared/CalendarIcon';\nimport LockedContentPopup from '../../shared/LockedContentPopup';\nimport ButtonWithRedirect from '../../shared/ButtonWithRedirect';\nimport MobileSharedDropdown from '../../documents/shared/MobileSharedDropdown';\nimport { useEditable } from 'hooks/useEditable';\nimport { Row, ContentCard, DeleteBtnWrapper, TextOverflow } from './styles';\n\nconst Contents = ({\n editable,\n showable,\n editableLink,\n showableLink,\n time,\n day,\n month,\n fileName,\n numberOfSignatories,\n signatories,\n ownerName,\n status,\n statusText,\n bounced,\n bouncedText,\n destroy,\n delBtnText,\n confirmationText,\n redirectUrl,\n isLast,\n}) => {\n const { isEditing: isPopupVisible, startEditing: showPopup, stopEditing: hidePopup } = useEditable();\n\n const handleClick = () => {\n if (editable || showable) {\n window.location.assign(editable ? editableLink : showableLink);\n } else {\n showPopup();\n }\n };\n\n return (\n \n
\n\n {displayTempField && (\n \n
\n \n \n
\n \n \n \n {fileName}\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n \n {numberOfSignatories} / {signatories}
\n \n
\n {ownerName}
\n \n
\n \n \n {statusText}\n {bounced && }\n \n
\n \n \n \n \n\n
\n \n )}\n \n {delBtnText}}\n confirmationText={confirmationText}\n redirectUrl={redirectUrl}\n dataMethod='delete'\n buttonClassNames='dropdown-item'\n />\n
\n \n {contentTitle}\n
\n\n \n
\n\n \n \n
\n );\n});\n\nexport { EditableName };\n","export { EditableName } from './EditableName';\n","/** @jsx jsx */\n\nimport React, { useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { createPortal } from 'react-dom';\nimport Draggable from 'react-draggable';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport { ReactComponent as Cross } from 'images/icons/cross.svg';\nimport { ReactComponent as Signature } from 'images/icons/signature.svg';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\n\nimport * as styles from './Field.styles';\n\nexport const Field = ({\n selectField,\n updateField,\n removeField,\n field,\n page,\n position,\n isSignature,\n forSignature,\n signatureURL,\n isSelected,\n size,\n current,\n isDisabled,\n}) => {\n const pageWidth = $(page).width();\n const pageHeight = $(page).height();\n const [fieldPosition, setFieldPosition] = useState({\n x: (pageWidth / 100) * position.x,\n y: (pageHeight / 100) * position.y,\n });\n const { isMobile } = useWindowDimensions();\n\n const intl = useIntl();\n\n useEffect(() => {\n setFieldPosition({\n x: (pageWidth / 100) * position.x,\n y: (pageHeight / 100) * position.y,\n });\n }, [pageWidth, pageHeight, position, setFieldPosition]);\n\n const handleDragEnd = (e, data) => {\n updateField(field, {\n x: (data.x * 100) / pageWidth,\n y: (data.y * 100) / pageHeight,\n });\n };\n\n const handleDragStart = (e) => {\n e.stopPropagation();\n\n selectField(field);\n };\n\n const handleRemove = (e) => {\n e.stopPropagation();\n\n removeField(field);\n };\n\n const bounds = {\n left: 30,\n top: 25,\n right: pageWidth * (1 - size.width / 100),\n bottom: pageHeight * (1 - size.height / 100),\n };\n\n const arrowTooltip = (\n {value}
\n\n \n
\n \n
\n );\n\n const renderFieldContent = () => {\n if (signatureURL) {\n return (\n <>\n \n {isSignature ? intl.formatMessage({ id: 'Field.sign' }) : intl.formatMessage({ id: 'Field.date' })}\n
\n \n {field.value}
;\n }\n\n return (\n \n \n \n \n \n\n \n
\n );\n };\n\n const component = (\n <>\n {forSignature && arrowTooltip}\n\n \n
\n \n {isSignature ? (\n
\n\n \n {isMobile ? null : }\n {field.value}\n
\n )}\n \n {forSignature ? intl.formatMessage({ id: 'Field.clickToSign' }) : field.signatoryName}\n
\n {title}
;\n } else {\n if (type === TYPES.NORMAL) {\n return (\n <>\n \n \n {type === TYPES.SHOW\n ? intl.formatMessage({ id: 'Header.signedCount' }, { signed: signatorisSigned, total: signatoris })\n : intl.formatMessage({ id: 'Header.smartSign' })}\n \n
\n {type === TYPES.SHOW && (\n {confirmText}
\n \n {redirectUrl && (\n \n
\n \n \n
\n \n );\n});\n\nexport default withIntl(Filters);\n","import React, { memo } from 'react';\nimport BounceLoader from 'react-spinners/BounceLoader';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Modal } from 'components/shared/Modal';\nimport { SendToSignatories } from './SendToSignatories';\nimport { SentSuccess } from './SentSuccess';\nimport * as styles from './Send.styles';\nimport { colors } from 'styles';\nimport { CountTitle, Overlay } from './styles';\n\nconst Send = memo(\n ({ show, message, setMessage, showSpinner, documentSent, onSend, onClose, signatories, errors, filename }) => {\n const modalTitle = (\n \n \n \n \n
\n );\n\n const modalOverlay = (\n \n \n {documentSent ? (\n
\n );\n }\n);\n\nexport { Send };\n","import { css } from '@emotion/core';\n\nexport const tableBody = css`\n display: block;\n height: 100%;\n width: 100%;\n padding-right: 10px;\n max-height: 180px;\n overflow: auto;\n`;\nexport const tableCell = css`\n padding: 3px 10px 2px 0;\n font-size: 12px;\n\n &:nth-of-type(1) {\n width: 35%;\n }\n\n &:nth-of-type(2) {\n width: 40%;\n }\n\n &:nth-of-type(3) {\n width: 25%;\n @media (max-width: 767px) {\n text-align: right;\n }\n }\n`;\n\nexport const tableRow = css`\n display: flex;\n`;\n\nexport const tableHeader = css`\n padding: 0 0 2px 0;\n\n &:nth-of-type(1) {\n width: calc(35% - 3.5px);\n }\n\n &:nth-of-type(2) {\n width: calc(40% - 4px);\n }\n\n &:nth-of-type(3) {\n width: 25%;\n @media (max-width: 767px) {\n text-align: right;\n }\n }\n`;\n\nexport const modalStyles = css`\n .modal-dialog.shaparency {\n .modal-content {\n padding-bottom: 32px;\n }\n }\n`;\n","import React, { useContext } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport AppHeader from '../../shared/AppHeader';\nimport { ToolbarButtonWrapper, IconButton, HeaderTitle, AppBody } from '../../shared/AppHeader/styles';\nimport { SendingSignContext } from '../../../contexts/MobSignContext';\nimport { SendToSignatories } from './SendToSignatories';\nimport { SentSuccess } from './SentSuccess';\nimport { Wrapper, FinishBtnWrapper } from './styles';\n\nexport const SendForMob = ({ filename, message, setMessage, documentSent, onSend, signatories, errors, onClose }) => {\n const { setIsOpendSendingSign } = useContext(SendingSignContext);\n\n const intl = useIntl();\n\n return (\n \n {documentSent ? (\n \n ) : (\n \n )}\n
\n \n \n \n {documentSent\n ? intl.formatMessage({ id: 'SendForMob.sent' })\n : intl.formatMessage({ id: 'SendForMob.sendDocument' })}\n \n
\n \n
\n \n \n \n \n {' '}\n \n\n \n {errors.map((message, index) => (\n \n
\n )}\n\n {message}
\n ))}\n \n
\n {documentName}\n \n
\n \n \n \n \n
\n\n \n 
{' '}\n \n
\n );\n };\n\n return (\n \n
\n );\n};\n\nexport default withIntl(SignModal);\n","import SignModal from './SignModal';\n\nexport default SignModal;\n","import styled from 'styled-components';\nimport { fonts } from 'styles';\n\nexport const CloseWrapper = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex-grow: 1;\n color: #2c2e3f;\n`;\n\nexport const CloseIconWrapper = styled.div`\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background: #dde0ed;\n margin-left: 9px;\n`;\n\nexport const UploadWrapper = styled.div`\n display: flex;\n padding: 16px;\n img {\n margin: unset;\n width: ${(props) => (props.deviceType === 'mobile' ? 20 : 29)}px;\n }\n span {\n margin-left: 12px;\n }\n label {\n display: flex;\n align-items: center;\n }\n ${fonts.styledRegular}\n font-size: ${(props) => props.fontSize}px;\n color: #2c2e3f;\n`;\n","import axios from 'axios';\n\nexport default class API {\n // SmartSign specific\n static resendInvitation(resendPath, onSubmit, onError = this.handleError) {\n return axios\n .post(resendPath)\n .then((response) => response.data)\n .then(onSubmit)\n .catch(onError);\n }\n\n static updateEmail(resendPath, email, onSubmit, onError = this.handleError) {\n const formData = new FormData();\n formData.append('signatory[email]', email);\n return axios\n .put(resendPath, formData)\n .then((response) => response.data)\n .then(onSubmit)\n .catch(onError);\n }\n}\n","import React, { useState } from 'react';\nimport Form from 'react-bootstrap/Form';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { withIntl } from '../../../../utils/v2/intl';\n\nimport { ContentCard, ItemContent, ItemTitle, Item, ResendButtonWrapper } from './styles';\nimport api from './API';\n\nconst SignatoryCard = ({ id, name, status, email, signed, mayResentInvitation, isUpdating, resendPath }) => {\n const [emailValue, setEmail] = useState(email);\n const [isResponseSeuccess, setIsResponseSuccess] = useState(false);\n\n const intl = useIntl();\n\n return (\n \n \n \n 
\n \n \n
\n \n \n \n \n \n \n
\n \n - \n
\n \n {name} \n \n - \n
\n \n {status} \n \n
\n \n - \n
\n \n {\n \n {isUpdating ? (\n {\n setEmail(e.target.value);\n }}\n onBlur={() => {\n api.updateEmail(\n `/${getCompanySlug()}/signatories/${id}.json`,\n emailValue,\n (response) => {\n setIsResponseSuccess(true);\n setTimeout(() => {\n setIsResponseSuccess(false);\n }, 3000);\n },\n (error) => {\n console.error(error);\n }\n );\n }}\n />\n ) : (\n email\n )}\n \n }\n \n - \n
\n \n {signed} \n \n
\n \n
\n );\n }\n\n const tableBody = signatories.map((signatory, index) => (\n \n
\n\n \n
\n | \n | \n \n | \n \n | \n {onDelete && }\n |
|---|
\n \n {({ getRootProps, getInputProps }) => (\n \n
\n );\n\n return (\n <>\n {error && (\n \n \n\n
\n )}\n \n
\n \n {error}\n
\n )}\n \n \n {existingSignatureImageUrl && (\n \n \n \n \n \n \n
\n \n
\n \n
\n \n \n\n {!isActiveSignatureType(signatureTypes.drawing) && (\n
\n \n \n
\n )}\n\n {isActiveSignatureType(signatureTypes.upload) && !image && dropZone}\n \n {isActiveSignatureType(signatureTypes.drawing) && Clear }\n {!isActiveSignatureType(signatureTypes.saved) && onSave && (\n \n )}\n
\n {isActiveSignatureType(signatureTypes.script) && (\n \n
\n )}\n \n );\n};\n\nexport default forwardRef(SignatureInputInMobile);\n","/** @jsx jsx */\nimport React from 'react';\nimport { signatureFonts } from './types';\nimport { jsx } from '@emotion/core';\nimport { fonts } from 'styles';\nimport { SignatoryName, SignatoryWrapper } from './styles';\n\nexport const SignatureScript = ({ changeFontHandler, fontName, name, isActive }) => {\n const clickHandler = changeFontHandler(signatureFonts[fontName]);\n\n return (\n \n \n {({ getRootProps, getInputProps }) => (\n \n
\n );\n\n const renderFont = (fontName) => {\n const isScriptActive = isActiveSignatureType(signatureTypes.script);\n const clickHandler = changeFontHandler(signatureFonts[fontName]);\n const elementStyles = [styles.scriptFont(isScriptActive), fonts[fontName]];\n\n return (\n \n \n\n
\n )}\n \n
\n \n
\n );\n };\n\n return (\n \n {name}\n
\n\n {isActiveFont(signatureFonts[fontName]) && (\n \n
\n )}\n \n \n
\n\n \n \n {error}\n
\n )}\n \n \n\n {!isActiveSignatureType(signatureTypes.drawing) && (\n
\n \n \n
\n )}\n\n {isActiveSignatureType(signatureTypes.upload) && !image && dropZone}\n \n \n Clear\n \n\n {!isActiveSignatureType(signatureTypes.saved) && onSave && (\n \n )}\n
\n \n\n \n
\n )}\n\n \n
\n\n \n
\n\n \n {renderFont('bethEllen')}\n {renderFont('dancingScript')}\n {renderFont('dawning')}\n {renderFont('glory')}\n {renderFont('sheppards')}\n
\n\n \n
\n \n \n
\n {loggedIn && isDesktop && (\n \n \n {isLoaded && (\n \n \n \n )}\n {isLoaded && (\n
\n \n
\n );\n\n return (\n \n \n \n
\n \n
\n \n {documentFields\n .sort((a, b) => {\n return a.id - b.id;\n })\n .map((df, i) => (\n handleRowClick(df)}>\n \n ))}\n
\n \n {isCompleted(df) ? (\n
\n \n
\n {df.isSignature ?
\n \n \n \n {!isDesktop && !!activeSignature && (\n \n \n )}\n {}}\n selectField={selectFieldHandler}\n key={documentField.id}\n signatureURL={documentField.signatureURL}\n position={documentField.position}\n isSignature={documentField.isSignature}\n size={documentField.size}\n current={currentFieldInView}\n page={documentPage(documentField)}\n isDisabled={!isSigning && !readyToSubmit}\n />\n );\n })}\n
\n \n \n
\n );\n\n return (\n \n 
\n
\n \n );\n});\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const bar = css`\n background: ${colors.white};\n border-bottom: 1px solid ${colors.brandBorder};\n position: fixed;\n left: 0;\n z-index: 2;\n right: 0;\n`;\n\nexport const signatureIcon = css`\n height: 111px;\n width: auto;\n`;\n\nexport const modal = css`\n .modal-dialog.shaparency {\n .modal-body {\n position: static;\n }\n\n .modal-footer {\n margin-top: 0;\n\n & > * {\n margin: 0;\n }\n }\n`;\n\nexport const wrapper = css`\n width: 100%;\n max-width: 777px;\n margin: 0 auto;\n padding: 8px 0;\n text-align: right;\n`;\n\nexport const modalBody = css`\n padding: 67px 0 80px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { fonts, colors } from 'styles';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\n\nconst Button = styled.button`\n ${fonts.styledBold}\n font-size: 16px;\n line-height: 28px;\n display: flex;\n align-items: center;\n text-align: center;\n color: ${colors.cyan};\n background: ${colors.lightCyan};\n border: 1px solid ${colors.cyan};\n box-sizing: border-box;\n border-radius: 0;\n text-transform: capitalize;\n padding: 4px 28px;\n height: 35px;\n\n @media all and (max-width: 460px) {\n font-size: 12px;\n line-height: 14px;\n padding: 4px 16px;\n margin-left: 10px !important;\n }\n`;\n\nexport const SubmitButton = ({ readyToSubmit, isSigning, handleClick }) => {\n const { isDesktop } = useWindowDimensions();\n\n const intl = useIntl();\n\n if (readyToSubmit) {\n return !isDesktop ? (\n \n ) : (\n \n );\n }\n\n return !isDesktop ? (\n \n ) : (\n \n );\n};\n","import styled from 'styled-components';\nimport { colors, fonts } from 'styles';\n\nexport const Outer = styled.div`\n #loading {\n display: none !important;\n }\n`;\n\nexport const Bar = styled.div`\n background: ${colors.white};\n border-bottom: 1px solid ${colors.brandBorder};\n position: fixed;\n left: 0;\n z-index: 5;\n right: 0;\n`;\n\nexport const Overlay = styled.div`\n position: absolute;\n top: 61px;\n left: 0px;\n width: 100%;\n height: calc(100vh - 61px);\n background: rgba(0, 0, 0, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n`;\n\nexport const ViewerWrapper = styled.div`\n .viewport {\n padding: ${({ isdesktop }) => (!isdesktop ? '8px' : '0 30px 0 100px')};\n max-height: calc(100vh - 100px);\n margin-bottom: 24px;\n .canvas-page-wrapper {\n max-width: 777px;\n margin-bottom: 60px;\n border-bottom: none;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n canvas {\n box-shadow: 0px 0px 3px 1px rgba(51, 55, 70, 0.14);\n }\n }\n`;\n\nexport const OptionsWrapper = styled.div`\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background: white;\n z-index: 1000;\n`;\n\nexport const DropdownClose = styled.button`\n text-align: center;\n padding: 0;\n width: 100%;\n color: ${colors.red};\n text-align: center;\n`;\n\nexport const DocumentNavigation = styled.div`\n position: absolute;\n top: 60px;\n background: ${colors.white};\n width: 304px;\n box-shadow: 0px 4px 50px rgba(54, 71, 98, 0.12);\n right: 0;\n h3 {\n color: ${colors.black};\n padding: 15px;\n border-bottom: 1px solid #e8e8e8;\n text-align: center;\n margin-bottom: 0;\n font-size: 15px;\n @media all and (max-width: 767px) {\n font-size: 12px;\n }\n }\n .doc-description {\n display: flex;\n @media all and (max-width: 767px) {\n display: none;\n }\n }\n\n .scrollable {\n max-height: 580px;\n overflow: auto;\n }\n\n @media all and (max-width: 767px) {\n width: 142px;\n }\n transition: 0.2s;\n ${({ shownavigation }) => (shownavigation ? 'transform: translate(0%);' : 'transform: translate(100%);')}\n @media all and (max-height: 568px) {\n max-height: 490px;\n }\n`;\n\nexport const NavigationRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 15px;\n font-size: 12px;\n justify-content: space-between;\n color: ${colors.black};\n cursor: pointer;\n &:not(:last-child) {\n border-bottom: 1px solid #e8e8e8;\n }\n .row-label {\n margin-top: -2px;\n line-height: 10px;\n }\n .padding-indicator {\n color: ${colors.lightGrey};\n }\n`;\n\nexport const ShowNavigation = styled.div`\n background: ${colors.white};\n box-shadow: 0px 4px 50px rgba(54, 71, 98, 0.12);\n position: absolute;\n right: 0;\n background: white;\n top: 112px;\n height: 54px;\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n transition: 0.4s;\n width: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n ${({ shownavigation }) => (shownavigation ? 'transform: translate(100%);' : 'transform: translate(0%);')}\n`;\n","/** @jsx jsx */\n\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { Select } from 'components/shared/Select';\nimport closeIcon from 'images/icons/close-icon-black.svg';\nimport { ReactComponent as Signature } from 'images/icons/signature.svg';\nimport { ReactComponent as CurveArrow } from 'images/icons/curve-arrow.svg';\n\nimport * as styles from './Toolbar.styles';\n\nconst Toolbar = memo(\n ({\n signatories,\n currentSignatory,\n toggleSignatory,\n isSelectedSignatory,\n saveConfiguration,\n documentIsConfigured,\n onContinueToSigning,\n toggleActiveField,\n isActiveFieldType,\n fieldTypes,\n activeField,\n dateTypeOptions,\n onDateTypeChange,\n discardChanges,\n showActions = true,\n }) => {\n const signatoryList = signatories.map((signatory, index) => {\n const signatoryKey = `configure-${signatory.id}`;\n const isSelected = isSelectedSignatory(signatory);\n const onClick = toggleSignatory.bind(this, signatory);\n const activeClass = isSelected ? 'active' : null;\n\n return (\n \n
\n\n {isSelected && (\n {index + 1}
\n {signatory.name}
\n \n
\n )}\n \n );\n });\n\n const dateTypeChangeHandler = (option) => {\n onDateTypeChange(activeField, {\n format: option.value,\n value: option.label,\n });\n };\n\n return (\n <>\n \n {showActions && (\n
\n\n {activeField.type === fieldTypes.date && (\n \n
\n )}\n\n {documentIsConfigured ? null : (\n \n {`Signatories (${signatories.length})`}\n 
\n
\n \n
\n )}\n \n
\n \n {signatoryList}\n
\n\n {currentSignatory && (\n \n
\n \n
\n\n \n
\n \n
\n {currentSignatory.name}
\n \n \n \n \n
\n \n \n
\n\n \n
\n )}\n \n )}\n \n\n {showActions && (\n \n \n
\n\n \n
\n \n \n \n
\n \n
\n \n
\n )}\n \n );\n }\n);\n\nexport { Toolbar };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\n\nexport const line = css`\n border-bottom: 1px solid ${colors.purple};\n width: 100%;\n`;\n\nexport const closeIcon = css`\n cursor: pointer;\n opacity: 1;\n outline: none;\n width: auto;\n margin: 0;\n\n &:hover {\n opacity: 0.75;\n }\n`;\n\nexport const format = css`\n ${fonts.bold}\n font-size: 14px;\n color: ${colors.purple};\n padding: 0 4px;\n`;\n\nexport const details = css`\n color: ${colors.purple};\n font-size: 14px;\n margin: 0 6px;\n white-space: nowrap;\n`;\n\nexport const heading = css`\n ${fonts.bold}\n font-size: 14px;\n color: ${colors.black};\n line-height: 20px;\n`;\n\nexport const header = css`\n padding: 0 8px;\n`;\n\nexport const signatoryBlock = css`\n display: flex;\n align-items: center;\n max-width: calc(100% - 75px);\n`;\n\nexport const signatory = (isActive) => css`\n ${isActive ? fonts.bold : fonts.regular}\n color: ${isActive ? colors.cyan : colors.black};\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n line-height: 16px;\n border: 1px solid;\n padding: 8px 13px 8px 9px;\n margin-bottom: 8px;\n border-radius: 2px;\n border-color: ${isActive ? colors.cyan : 'transparent'};\n background: ${isActive ? HexToRgba(colors.cyan, 10) : 'transparent'};\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const addFields = css`\n ${fonts.regular}\n font-size: 10px;\n line-height: 20px;\n letter-spacing: 0.15em;\n flex-shrink: 0;\n color: ${colors.black};\n`;\n\nexport const signatoryName = css`\n line-height: 20px;\n font-size: 14px;\n color: ${colors.black};\n padding-left: 3px;\n`;\n\nexport const padded = css`\n padding-left: 12px;\n padding-right: 12px;\n`;\n\nexport const active = (isActive) => css`\n color: ${isActive ? colors.cyan : colors.lightGrey};\n\n path {\n fill: ${isActive ? colors.cyan : colors.lightGrey};\n }\n\n span {\n ${isActive ? fonts.bold : fonts.regular}\n font-size: 14px;\n color: ${colors.black};\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const helpBlock = css`\n ${fonts.regular};\n display: flex;\n justify-content: flex-end;\n padding: 20px 12px;\n`;\n\nexport const helpContent = css`\n ${fonts.regular};\n font-size: 12px;\n line-height: 16px;\n width: 142px;\n max-width: 100%;\n position: relative;\n padding-left: 15px;\n padding-right: 10px;\n color: ${colors.brandTextDark};\n color: #00031f;\n &::before {\n content: '*';\n font-size: 30px;\n line-height: 20px;\n color: ${colors.cyan};\n position: absolute;\n top: 3px;\n left: 0;\n }\n`;\n\nexport const helpArrow = css`\n position: absolute;\n right: 100%;\n top: 16px;\n`;\n","export { Toolbar } from './Toolbar';\n","/** @jsx jsx */\n\nimport React, { memo, useEffect, createRef } from 'react';\nimport { jsx } from '@emotion/core';\nimport ClipLoader from 'react-spinners/ClipLoader';\nimport { FormattedMessage } from 'react-intl';\n\nimport { colors } from 'styles';\nimport * as styles from './Viewer.styles';\n\nconst Viewer = memo(\n ({\n documentURL,\n onDocumentLoad,\n onViewportMouseMove,\n onViewportMouseEnter,\n onViewportMouseLeave,\n onViewportMouseClick,\n pointerMode,\n viewportStyles,\n progressiveLoading,\n }) => {\n const documentLoadedEventName = 'pdfViewer:document_loaded';\n const viewer = createRef();\n\n useEffect(() => loadDocument(), []);\n\n const isProgressive = () => {\n if (progressiveLoading === null) {\n return true;\n } else {\n return progressiveLoading;\n }\n };\n\n const loadDocument = () => {\n viewer.current.addEventListener(documentLoadedEventName, onDocumentLoad);\n\n pdfViewer.loadFile(documentURL, isProgressive());\n };\n\n return (\n \n \n\n \n
\n \n
\n );\n }\n);\n\nexport { Viewer };\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const loading = css`\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 9999;\n transform: translate(-50%, -50%);\n`;\n\nexport const viewport = (pointerMode) => css`\n overflow: auto;\n padding: 25px 30px;\n cursor: ${pointerMode ? 'pointer' : 'default'};\n`;\n","export { Viewer } from './Viewer';\n","import React, { useState, useEffect, useContext, useCallback } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Drawer } from 'components/shared/Drawer';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport AppHeader from '../../shared/AppHeader';\nimport { ToolbarButtonWrapper, IconButton, HeaderTitle } from '../../shared/AppHeader/styles';\nimport { Viewer } from '../Viewer';\nimport { Field } from '../Field';\nimport { Toolbar } from '../Toolbar';\nimport { SendingSignContext } from '../../../contexts/MobSignContext';\nimport { AddFieldBtn, SendForSigningMob } from './styles';\nimport { ShowNavigation } from '../Signatures/styles';\nimport * as styles from './Workspace.styles';\n\nexport const ConfigureForMobile = ({\n setMoveToMobConfigure,\n documentFields,\n changeDocumentFields,\n signatories,\n documentIsConfigured,\n documentURL,\n saveConfiguration,\n fieldTypes,\n dateTypes,\n isSignature,\n drawerIsOpen,\n setDrawerIsOpen,\n}) => {\n const { setIsOpendSendingSign, setIsOpendSignModal } = useContext(SendingSignContext);\n const { isMobile, isTablet } = useWindowDimensions();\n const activeDocumentFields = documentFields.filter((documentField) => !documentField.deleted);\n const defaultDateFormat = '%d/%m/%Y';\n const documentFieldSize = {\n width: 21,\n height: 6.835,\n };\n const dateTypeOptions = Object.keys(dateTypes).map((key) => {\n return {\n value: key,\n label: dateTypes[key],\n };\n });\n const [activeSignatory, setActiveSignatory] = useState();\n const [documentLoaded, setDocumentLoaded] = useState(false);\n const [activeFieldType, setActiveFieldType] = useState(fieldTypes.signature);\n const [activeField, setActiveField] = useState();\n const [hideDrawer, setHideDrawer] = useState(false);\n const [tempField, setTempField] = useState({\n page: 1,\n active: false,\n position: {\n x: 1000,\n y: 0,\n },\n disabled: true,\n format: defaultDateFormat,\n value: dateTypes[defaultDateFormat],\n });\n const populateTempField = () => {\n if (!activeFieldType && !activeSignatory) return;\n\n setTempField({\n ...tempField,\n type: activeFieldType,\n signatoryId: activeSignatory?.id,\n signatoryName: activeSignatory?.name,\n });\n };\n\n useEffect(() => populateTempField(), [activeFieldType, activeSignatory]);\n\n const markDocumentAsLoaded = () => {\n setDocumentLoaded(true);\n };\n\n const isActiveSignatory = (signatory) => {\n return activeSignatory && activeSignatory.id === signatory.id;\n };\n\n const isActiveFieldType = (name) => {\n return activeFieldType && activeFieldType === name;\n };\n\n const toggleActiveField = (field) => {\n setActiveFieldType(isActiveFieldType(field) ? null : field);\n\n setActiveField(null);\n };\n\n const toggleActiveSignatory = (signatory) => {\n if (isActiveSignatory(signatory)) {\n setActiveSignatory(null);\n } else {\n setActiveSignatory(signatory);\n setActiveFieldType(fieldTypes.signature);\n }\n\n setActiveField(null);\n };\n\n const updateDocumentField = (documentField, params) => {\n if (documentField.disabled) {\n return setTempField({ ...tempField, ...params });\n }\n\n const index = documentFields.findIndex((field) => field.id === documentField.id);\n const currentFields = [...documentFields];\n\n currentFields[index] = { ...documentField, ...params };\n\n changeDocumentFields(currentFields);\n\n if (!params.deleted) {\n setActiveField(currentFields[index]);\n }\n };\n\n const unsetControls = () => {\n setActiveField(null);\n setActiveSignatory(null);\n setActiveFieldType(null);\n };\n\n const removeDocumentField = (documentField) => {\n updateDocumentField(documentField, { deleted: true });\n unsetControls();\n };\n\n const updateFieldCoordinates = (documentField, coordinates) => {\n updateDocumentField(documentField, { position: coordinates });\n };\n\n const getRelativeCoordinates = (x, y, parent) => {\n return {\n y: ((y - parent.offset().top) * 100) / parent.height(),\n x: ((x - parent.offset().left) * 100) / parent.width(),\n };\n };\n\n const documentPage = ({ page }) => {\n return document.querySelector(`.canvas-page-wrapper[data-page='${page}']`);\n };\n\n const addDocumentField = (f, e) => {\n const canvas = documentPage(f);\n const documentFieldId = Math.random().toString(36).substr(2, 9);\n const position = getRelativeCoordinates(e.clientX - 50, e.clientY - 20, $(canvas));\n\n const documentField = {\n id: documentFieldId,\n signatoryId: activeSignatory.id,\n signatoryName: activeSignatory.name,\n type: activeFieldType,\n position: position,\n page: canvas.dataset.page,\n format: tempField.format,\n width: documentFieldSize.width,\n height: documentFieldSize.height,\n value: tempField.value,\n };\n\n changeDocumentFields([...documentFields, documentField]);\n setActiveField(documentField);\n };\n\n const handleViewportClick = (e) => {\n if (displayTempField) {\n addDocumentField(tempField, e);\n } else {\n setActiveField(null);\n }\n };\n\n const displayTempField = activeSignatory && activeFieldType && tempField.active && !activeField;\n\n const showTempField = () => {\n setTempField({ ...tempField, active: true });\n };\n\n const hideTempField = () => {\n setTempField({ ...tempField, active: false });\n };\n\n const moveTempField = (e) => {\n const canvas = e.target.closest('.canvas-page-wrapper');\n const width = $(canvas).width();\n const height = $(canvas).height();\n\n if (!displayTempField || !canvas) return;\n\n const position = getRelativeCoordinates(e.clientX - 50, e.clientY - 20, $(canvas));\n\n if (position.x >= 100 - documentFieldSize.width) {\n position.x = 100 - documentFieldSize.width;\n }\n\n if (position.x <= 3000 / width) {\n position.x = 3000 / width;\n }\n\n if (position.y <= 2500 / height) {\n position.y = 2500 / height;\n }\n\n if (position.y > 100 - documentFieldSize.height) {\n position.y = 100 - documentFieldSize.height;\n }\n\n setTempField({\n ...tempField,\n page: canvas.dataset.page,\n position: position,\n });\n };\n\n const selectDocumentField = (documentField) => {\n const signatory = signatories.find((signatory) => signatory.id === documentField.signatoryId);\n\n setActiveField(documentField);\n setActiveSignatory(signatory);\n setActiveFieldType(documentField.type);\n };\n\n const unsetControlsAndSaveConfiguration = () => {\n unsetControls();\n saveConfiguration();\n };\n\n const unsetControlsAndContinueToSigning = () => {\n unsetControls();\n openModal();\n };\n\n const openModal = () => {\n if (documentIsConfigured) {\n if (isMobile) {\n setIsOpendSendingSign(true);\n } else {\n setIsOpendSignModal(true);\n }\n }\n };\n\n const documentFieldComponents =\n documentLoaded &&\n activeDocumentFields.map((documentField) => {\n const removeField = removeDocumentField.bind(this, documentField);\n const isSelected = activeField?.id === documentField.id;\n const signatureField = isSignature(documentField);\n const page = documentPage(documentField);\n\n return (\n \n
\n \n
\n \n
\n\n \n \n \n
\n\n \n \n
\n \n
\n\n {displayTempField && (\n \n
\n {signatory.email}
\n \n
\n \n\n \n \n
\n\n \n
\n\n \n {signatories.length > 0 && (\n
\n \n
\n )}\n\n \n \n \n \n )}\n
\n \n\n \n \n
\n\n \n \n
\n {!isDesktop && documentIsConfigured && (\n \n {documentIsConfigured &&
\n \n
\n \n \n
\n );\n};\n","export { default } from './Workspace';\n","import styled from 'styled-components';\nimport { fonts, colors } from 'styles';\n\nexport const SendForSigningMob = styled.div`\n position: absolute;\n bottom: 20px;\n width: 100%;\n left: 0;\n background: white;\n z-index: 1003;\n bottom: 0px;\n display: flex;\n justify-content: center;\n padding: 17px;\n\n button {\n width: 235px;\n }\n`;\n\nexport const Row = styled.div`\n ${fonts.styledSemiBold}\n color: #00031f;\n font-size: 12px;\n line-height: 24px;\n .title {\n width: 96px;\n }\n .row-content {\n margin-left: 21px;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 16px;\n color: #2c2e3f;\n }\n padding: 2px 0px;\n`;\n\nexport const ContentCard = styled.div`\n background: #ffffff;\n ${({ hasTopBorder }) => hasTopBorder && 'border-top: solid 1px #dde0ed'};\n border-bottom: solid 1px #dde0ed;\n padding: 12px 22px;\n position: relative;\n`;\n\nexport const Item = styled.div`\n ${fonts.styledRegular}\n font-size: 12px;\n color: #2c2e3f;\n`;\n\nexport const ItemTitle = styled.div`\n font-weight: 600;\n line-height: 24px;\n width: 50%;\n`;\nexport const ItemContent = styled.div`\n font-weight: normal;\n line-height: 16px;\n padding-left: 8px;\n width: 50%;\n`;\n\nexport const Delete = styled.a`\n position: absolute;\n top: 11px;\n right: 13px;\n svg {\n &:hover {\n path {\n fill: ${colors.cyan};\n }\n }\n }\n`;\n\nexport const EmptyWrapper = styled.div`\n margin-top: 55px;\n @media (min-width: 768px) {\n margin-top: 78px;\n }\n`;\n\nexport const ContacsWrapper = styled.div`\n background: #f2f2f2;\n width: 77px;\n margin: auto;\n border-radius: 50%;\n height: 68px;\n`;\n\nexport const HeaderTitle = styled.span`\n ${({ lineHeight }) => lineHeight && `line-height: ${lineHeight}px`};\n ${fonts.styledSemiBold}\n color: #2c2e3f;\n`;\n\nexport const AddFieldBtn = styled.div`\n position: absolute;\n right: 0;\n height: 100%;\n border: none;\n background: #00bac6;\n ${fonts.styledSemiBold}\n font-size: 16px;\n text-align: right;\n color: #ffffff;\n padding: 24px;\n display: flex !important;\n align-items: center !important;\n box-sizing: border-box;\n`;\n","/** @jsx jsx */\n\nimport React, { useState, useCallback } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { SubcommitteeDrawer } from '../SubcommitteeDrawer/SubcommitteeDrawer';\nimport { SubcommitteesTable } from '../SubcommitteeTable/SubcommitteeTable';\nimport { useCreateSubcommittee } from '../hooks/useCreateSubcommittee';\nimport { useDeleteSubcommittee } from '../hooks/useDeleteSubcommittee';\nimport { useUpdateSubcommittee } from '../hooks/useUpdateSubcommittee';\nimport { useSubcommitteesQuery } from '../data/queries/SubcommitteesQuery';\n\nconst NEW_SUBCOMMITTEE = {\n name: '',\n slug: '',\n contacts: [],\n};\n\nconst SubcommitteesContainer = ({ companyId }) => {\n const { data, loading, refetch } = useSubcommitteesQuery();\n const [context, setContext] = useState({\n isDrawerOpen: false,\n errors: [],\n subcommittee: NEW_SUBCOMMITTEE,\n });\n\n const closeDrawer = useCallback(() => {\n setContext((state) => ({ ...state, isDrawerOpen: false, errors: [] }));\n }, []);\n\n const openDrawer = useCallback((subcommittee) => {\n setContext((state) => ({\n ...state,\n subcommittee: subcommittee,\n isDrawerOpen: true,\n errors: [],\n }));\n }, []);\n\n const handleSubcommitteeChange = useCallback((values) => {\n console.log('handleSubcommitteeChange: ', values);\n setContext((state) => ({ ...state, subcommittee: { ...state.subcommittee, ...values } }));\n }, []);\n\n const onError = useCallback((errors) => {\n setContext((state) => ({ ...state, errors: errors }));\n }, []);\n\n const handleAddSubcommitteeClick = openDrawer.bind(this, NEW_SUBCOMMITTEE);\n\n const { deleteSubcommittee } = useDeleteSubcommittee({ onCompleted: closeDrawer });\n const { createSubcommittee } = useCreateSubcommittee({ onCompleted: closeDrawer, onError, companyId });\n const { updateSubcommittee } = useUpdateSubcommittee({ onCompleted: closeDrawer, onError });\n\n const handleDeleteSubcommittee = () => {\n deleteSubcommittee({ subcommitteeId: context.subcommittee.id });\n };\n\n const handleCreateSubcommittee = () => {\n createSubcommittee({\n name: context.subcommittee.name,\n contacts: context.subcommittee.contacts.map((contact) =>\n contact.id\n ? { id: contact.id, email: contact.email, accessRoleId: contact.accessRoleId }\n : { email: contact.email, accessRoleId: contact.accessRoleId }\n ),\n });\n };\n\n const handleUpdateSubcommittee = () => {\n console.log(context.subcommittee.contacts);\n updateSubcommittee({\n subcommitteeId: context.subcommittee.id,\n name: context.subcommittee.name,\n contacts: context.subcommittee.contacts.map((contact) =>\n contact.id\n ? { id: contact.id, email: contact.email, accessRoleId: contact.accessRoleId }\n : { email: contact.email, accessRoleId: contact.accessRoleId }\n ),\n });\n };\n\n return (\n \n \n
\n )}\n \n
\n );\n};\n\nexport { SubcommitteesContainer };\n","export { SubcommitteesContainer } from './SubcommitteesContainer';\n","import React, { memo } from 'react';\n\nimport { TwoLinesCell } from 'components/shared/PlaceholderTable/TwoLinesCell';\nimport { StatusCell } from 'components/shared/PlaceholderTable/StatusCell';\nimport { ActionsCell } from 'components/shared/PlaceholderTable/ActionsCell';\n\nconst DrawerPlaceholderTable = memo(({ show }) => {\n return (\n show &&\n [...Array(5)].map((_, index) => (\n \n
\n\n \n
\n \n
\n \n
\n\n \n \n
\n );\n}\n\nconst SubcommitteeDrawer = ({\n subcommittee,\n accessRoles,\n parentCompanyContacts,\n errors,\n onSubcommitteeChange,\n isOpen,\n onClose,\n onCreate,\n onUpdate,\n onDelete,\n}) => {\n const applicableStyles = [styles.drawer.base, isOpen && styles.drawer.state.open];\n\n const intl = useIntl();\n\n const { isMobile } = useWindowDimensions();\n\n useEffect(() => {\n if (isMobile) return;\n\n if (isOpen) {\n document.querySelector('body').classList.add('opaque-bg');\n } else {\n document.querySelector('body').classList.remove('opaque-bg');\n }\n }, [isOpen]);\n\n const { name, contacts } = subcommittee;\n\n const drawerHeader = () => {\n if (subcommittee.id) {\n return intl.formatMessage({ id: 'SubcommitteeDrawer.editSubcommittee' });\n } else {\n return intl.formatMessage({ id: 'SubcommitteeDrawer.createSubcommittee' });\n }\n };\n\n const renderDrawerButtons = () => {\n if (subcommittee.id) {\n return (\n \n handleContactChange(e)}\n value={contact.email}\n />\n handleRoleChange(e)} value={contact.accessRoleId} />\n
\n \n \n \n \n
\n );\n } else {\n return (\n \n \n \n
\n\n {drawerHeader()}
\n \n
\n {drawerHeader()}
\n\n \n
\n\n \n\n \n
\n\n \n
\n\n \n
\n\n {renderDrawerButtons()}\n \n \n \n
\n
\n );\n});\n\nexport { SubcommitteeDrawerTable };\n","export { SubcommitteeDrawerTable } from './SubcommitteeDrawerTable';\n","import React, { memo } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport Avatar from 'components/shared/Avatar';\n\nconst SubcommitteeDrawerTableRow = memo(({ contact, accessRoles, onDelete }) => {\n const handleDelete = onDelete.bind(this, contact);\n\n const getAccessRoleName = (accessRoleId) => {\n const accessRole = accessRoles.find((role) => role.id === accessRoleId);\n if (accessRole) {\n return accessRole.name;\n }\n };\n\n return (\n | \n | \n | \n | \n |
|---|
\n
\n \n
\n {contact.name}
\n {contact.initials}
\n {contact.email}
\n {getAccessRoleName(contact.accessRoleId)}
\n \n \n \n
\n
\n );\n});\n\nexport { SubcommitteesTable };\n","export { SubcommitteeTable } from './SubcommitteeTable';\n","import React, { memo } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nconst SubcommitteesTableRow = memo(({ name, slug, size, onEdit }) => {\n const intl = useIntl();\n\n const sizeLabel = () => {\n if (size === 0) {\n return intl.formatMessage({ id: 'SubcommitteesTableRow.noUsers' });\n } else {\n return intl.formatMessage({ id: 'SubcommitteesTableRow.users' }, { count: size });\n }\n };\n\n return (\n | \n | \n \n |
|---|
\n
\n \n \n {name}\n \n
\n {sizeLabel()}
\n \n \n\n
\n\n \n
\n \n
\n \n \n \n\n
\n\n \n
\n \n
\n\n {iconsMap[brand] && 
}
\n \n
\n\n \n \n\n
\n\n \n
\n \n \n\n
\n \n
\n \n \n\n \n
\n\n \n \n\n \n\n \n
\n \n \n
\n
\n );\n};\n\nexport default CardForm;\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport axios from 'axios';\nimport InputMask from 'react-input-mask';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { Input } from 'components/shared/Input';\nimport { getAxiosHeaders } from 'utils/getHeaders';\nimport ButtonWithConfirmation from 'components/shared/ButtonWithConfirmation';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport { trackPromise } from 'react-promise-tracker';\n\nconst EditForm = ({ company, handleError, paymentMethod, onDelete, onUpdate }) => {\n const formattedMonth = paymentMethod.exp_month.toString().padStart(2, 0);\n const formattedYear = paymentMethod.exp_year.toString();\n\n let [expiryDate, setExpiryDate] = useState(`${formattedMonth} / ${formattedYear}`);\n let [isPrimary, setIsPrimary] = useState(paymentMethod.primary);\n\n const intl = useIntl();\n\n const deletePaymentMethod = () => {\n trackPromise(\n axios\n .delete(`/${company.slug}/payment_methods/${paymentMethod.id}`, getAxiosHeaders())\n .then(onDelete)\n .catch(handleError)\n );\n };\n\n const updatePaymentMethod = () => {\n const [expMonth, expYear] = expiryDate.split(' / ');\n\n let payload = {\n exp_year: Number(expYear),\n exp_month: Number(expMonth),\n is_primary: isPrimary,\n };\n\n trackPromise(\n axios\n .put(`/${company.slug}/payment_methods/${paymentMethod.id}`, payload, getAxiosHeaders())\n .then(onUpdate)\n .catch(handleError)\n );\n };\n const handleExpiryDateChange = (event) => {\n setExpiryDate(event.target.value);\n };\n\n const handlePrimaryChange = (event) => {\n setIsPrimary(event.target.checked);\n };\n\n const { isMobile } = useWindowDimensions();\n\n const deleteButton = isMobile ? (\n \n ) : (\n \n );\n\n return (\n \n
\n \n \n
\n
\n );\n};\n\nexport default EditForm;\n","/** @jsx jsx */\n\nimport React, { useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport moment from 'moment';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport * as styles from './Invoices.styles';\n\nconst Invoices = ({ company }) => {\n const [invoices, setInvoices] = useState(null);\n const [isExpanded, setIsExpanded] = useState(false);\n\n const toggleExpanded = () => setIsExpanded(!isExpanded);\n\n const { isMobile } = useWindowDimensions();\n\n const intl = useIntl();\n\n useEffect(() => {\n $.ajax({\n url: `/${company.slug}/invoices`,\n method: 'get',\n headers: {\n 'X-CSRF-Token': $(\"[name='csrf-token']\").attr('content'),\n },\n data: {\n id: company.id,\n },\n }).then(setInvoices);\n }, []);\n\n const handleClick = (invoice) => window.open(invoice.receipt_link);\n\n const chevronStyles = [styles.chevron.base, isExpanded && styles.chevron.rotated];\n\n if (!invoices || !invoices.length) {\n return null;\n }\n\n const dateFormat = getUserDateFormat() || 'DD/MM/YYYY';\n\n const mobileList = invoices.map((invoice) => (\n \n
\n \n
\n \n
\n\n \n \n \n \n
\n\n \n
\n \n
\n\n \n \n\n {!paymentMethod.primary && (\n
\n \n
\n ));\n\n return (\n \n
\n\n \n
\n {moment(invoice.paid_at).format(dateFormat)}
\n \n
\n\n \n
\n {invoice.number}
\n \n
\n\n \n
\n \n {invoice.total == 0\n ? intl.formatMessage({ id: 'Invoices.freeTrial' })\n : `${invoice.currency === 'usd' ? '$' : '£'}${Number(invoice.total).toFixed(2)}`}\n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n handleClick(invoice)}>\n
\n \n \n \n
\n )}\n
\n );\n};\n\nexport default Invoices;\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const chevron = {\n base: css`\n transition: transform 0.1s ease-in-out;\n font-weight: 300;\n margin-left: 7px;\n font-size: 12px;\n `,\n\n rotated: css`\n transform: rotate(180deg);\n `,\n};\n\nexport const header = css`\n ${fonts.semiBold}\n border-radius: 10px;\n background: ${colors.white};\n padding: 18px 28px;\n\n @media (max-width: 767px) {\n padding: 20px;\n }\n`;\n\nexport const expandable = css`\n box-shadow: 2px 4px 4px rgba(223, 223, 223, 0.25);\n border: 1px solid #e7e6e6;\n border-radius: 10px;\n background: ${colors.white};\n\n @media (max-width: 767px) {\n border: none;\n }\n`;\n\nexport const mobileCard = css`\n ${fonts.regular}\n padding: 20px 0;\n border-bottom: 1px solid #e5e8f3;\n color: ${colors.black};\n font-size: 14px;\n\n &:first-child {\n padding-top: 0;\n }\n`;\n\nexport const mobileRow = css`\n display: flex;\n align-items: center;\n padding: 0 20px;\n justify-content: space-between;\n`;\n\nexport const mobileTitle = css`\n ${fonts.bold}\n`;\n\nexport const mobileValue = css`\n min-width: 95px;\n`;\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Product from './Product';\nimport Invoices from './Invoices';\nimport PaymentMethods from './PaymentMethods';\nimport { AlertPopup } from '../shared/AlertPopup';\nimport { ReactComponent as CheckMarkIcon } from 'images/icons/checkmark-green.svg';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\n\nimport { userDateFormat } from '../../contexts/v2/DateFormatContext';\n\nimport * as styles from './Products.styles';\n\nconst ManageForm = ({\n subscription,\n currentProduct,\n company,\n setSubscriptionCancelled,\n setShowCancellationAlert,\n trial_ended,\n}) => {\n let [showCancelPopup, setShowCancelPopup] = useState(false);\n const { isMobile } = useWindowDimensions();\n\n const intl = useIntl();\n\n const getConfig = () => {\n return {\n 'X-CSRF-Token': $(\"[name='csrf-token']\").attr('content'),\n };\n };\n\n const cancelSubscription = () => {\n $.ajax({\n url: `/${company.slug}/subscriptions/${subscription.id}/cancel`,\n method: 'put',\n headers: getConfig(),\n })\n .then((response) => {\n return response;\n })\n .then((cancelSubscriptionResponse) => {\n setSubscriptionCancelled(true);\n setShowCancellationAlert(true);\n\n if (!trial_ended) {\n window.location.assign(`/${company.slug}/subscription_gateway`);\n }\n });\n };\n\n return (\n \n \n
\n
\n\n {isExpanded && isMobile && \n
\n \n \n {isExpanded ? intl.formatMessage({ id: 'Invoices.hide' }) : intl.formatMessage({ id: 'Invoices.show' })}\n \n \n
\n {mobileList}
}\n\n {isExpanded && !isMobile && (\n | \n | \n \n | \n \n | \n \n | \n \n | \n
|---|---|---|---|---|
| {moment(invoice.paid_at).format(dateFormat)} | \n{invoice.number} | \n\n {invoice.total == 0\n ? intl.formatMessage({ id: 'Invoices.freeTrial' })\n : `${invoice.currency === 'usd' ? '$' : '£'}${Number(invoice.total).toFixed(2)}`}\n | \n\n | \n \n \n | \n
\n setShowCancelPopup(false)}\n >\n
\n );\n};\n\nexport default ManageForm;\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport Switch from 'react-input-switch';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './Products.styles';\n\nconst Packages = ({ products, brochure }) => {\n const [period, setPeriod] = useState('monthly');\n const handleSwitch = (period) => setPeriod(period);\n const reversedProducts = [].concat(products).reverse();\n\n return (\n \n
\n \n
\n \n
\n \n
\n null}\n couponCode={subscription.promotion_code}\n isStandalone\n />\n
\n \n {company.verified && (\n \n \n {moment(subscription.deactivated_at).format(userDateFormat)}\n \n ),\n }}\n />\n
\n \n \n
\n \n
\n \n
\n
\n
\n \n \n
\n \n \n
\n \n );\n};\n\nexport default Packages;\n","/** @jsx jsx */\n\nimport React, { useMemo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport moment from 'moment';\nimport currency from 'currency.js';\nimport { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { colors } from 'styles';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport { LoadingIndicator } from 'components/shared/LoadingIndicator';\nimport { AlertPopup } from '../shared/AlertPopup';\nimport * as styles from './PaymentForm.styles';\nimport BounceLoader from 'react-spinners/BounceLoader';\n\nconst useOptions = () =>\n useMemo(\n () => ({\n hidePostalCode: true,\n style: {\n base: {\n fontSize: '14px',\n color: '#424770',\n fontFamily: 'Gilroy-Regular, sans-serif',\n '::placeholder': {\n color: '#aab7c4',\n },\n },\n invalid: {\n color: '#9e2146',\n },\n },\n }),\n []\n );\n\nconst PaymentForm = ({\n productSelected,\n setSubscription,\n setProduct,\n setAlert,\n setSubscriptionCancelled,\n company,\n context,\n period,\n trial_ended,\n}) => {\n const stripe = useStripe();\n const elements = useElements();\n const options = useOptions();\n\n const intl = useIntl();\n\n const [subscribing, setSubscribing] = useState(false);\n const [success, setSuccess] = useState(false);\n const [errorToDisplay, setErrorToDisplay] = useState('');\n const [isComplete, setComplete] = useState(false);\n const [isEmpty, setEmpty] = useState(false);\n\n const handleAlertClose = () => setErrorToDisplay('');\n\n const handlePaymentThatRequiresCustomerAction = ({ subscription, priceId, paymentMethodId }) => {\n if (subscription.status === 'active' || subscription.status === 'trialing') {\n // subscription is active, no customer actions required.\n return { subscription, priceId, paymentMethodId };\n }\n\n const paymentIntent = subscription.latest_invoice.payment_intent;\n\n if (paymentIntent.status === 'requires_action') {\n return stripe\n .confirmCardPayment(paymentIntent.client_secret, {\n payment_method: paymentMethodId,\n })\n .then((result) => {\n if (result.error) {\n // start code flow to handle updating the payment details\n // Display error message in your UI.\n // The card was declined (i.e. insufficient funds, card has expired, etc)\n throw result;\n } else {\n if (result.paymentIntent.status === 'succeeded') {\n // There's a risk of the customer closing the window before callback\n // execution. To handle this case, set up a webhook endpoint and\n // listen to invoice.payment_succeeded. This webhook endpoint\n // returns an Invoice.\n return {\n priceId: priceId,\n subscription: subscription,\n paymentMethodId: paymentMethodId,\n };\n }\n }\n });\n } else {\n // No customer action needed\n return { subscription, priceId, paymentMethodId };\n }\n };\n\n const handleRequiresPaymentMethod = ({ subscription, paymentMethodId, priceId }) => {\n if (subscription.status === 'active' || subscription.status === 'trialing') {\n // subscription is active, no customer actions required.\n return { subscription, priceId, paymentMethodId };\n } else if (subscription.latest_invoice.payment_intent.status === 'requires_payment_method') {\n throw new Error('Your card was declined.');\n } else {\n return { subscription, priceId, paymentMethodId };\n }\n };\n\n const updatePaymentMethod = ({ subscriptionId, paymentMethodId }) => {\n const payload = {\n payment_method: paymentMethodId,\n };\n return (\n $.ajax({\n url: `/${company.slug}/subscriptions/${subscriptionId}`,\n method: 'put',\n data: payload,\n headers: getConfig(),\n })\n .then((response) => {\n return response;\n })\n // If the card is declined, display an error to the user.\n .then((result) => {\n if (result.error) {\n // The card had an error when trying to attach it to a customer\n throw result.error;\n }\n return result;\n })\n // Normalize the result to contain the object returned\n // by Stripe. Add the addional details we need.\n .then((result) => {\n return {\n // Use the Stripe 'object' property on the\n // returned result to understand what object is returned.\n subscription: result,\n paymentMethodId: paymentMethodId,\n priceId: productSelected.stripe_id,\n };\n })\n // Some payment methods require a customer to do additional\n // authentication with their financial institution.\n // Eg: 2FA for cards.\n .then(handlePaymentThatRequiresCustomerAction)\n // If attaching this card to a Customer object succeeds,\n // but attempts to charge the customer fail. You will\n // get a requires_payment_method error.\n .then(handleRequiresPaymentMethod)\n // No more actions required. Provision your service for the user.\n .then(onSubscriptionComplete)\n .catch((error) => {\n // An error has happened. Display the failure to the user here.\n // We utilize the HTML element we created.\n setSubscribing(false);\n setErrorToDisplay(error.message);\n })\n );\n };\n\n const onSubscriptionComplete = (result) => {\n // Payment was successful. Provision access to your service.\n localStorage.clear();\n if (context === 'gateway') {\n window.location.assign(`/${company.slug}/dashboard?subscription_created=true`);\n } else {\n setSubscribing(false);\n setSuccess(true);\n setSubscriptionCancelled(false);\n setAlert(true);\n setSubscription();\n setProduct(productSelected);\n }\n };\n\n const getConfig = () => {\n return {\n 'X-CSRF-Token': $(\"[name='csrf-token']\").attr('content'),\n };\n };\n\n const createSubscription = ({ paymentMethod, slug }) => {\n const payload = {\n payment_method: paymentMethod.id,\n product_id: productSelected.id,\n context: context,\n company_id: company.id,\n promotion_code: (promotionCodeVerified && promotionCode) || '',\n };\n\n return (\n $.ajax({\n url: `/${slug}/subscriptions`,\n method: 'post',\n data: payload,\n headers: getConfig(),\n })\n .then((response) => {\n return response;\n })\n // If the card is declined, display an error to the user.\n .then((result) => {\n if (result.error) {\n // The card had an error when trying to attach it to a customer\n throw result.error;\n }\n return result;\n })\n // Normalize the result to contain the object returned\n // by Stripe. Add the addional details we need.\n .then((result) => {\n return {\n // Use the Stripe 'object' property on the\n // returned result to understand what object is returned.\n subscription: result,\n paymentMethodId: paymentMethod.id,\n priceId: productSelected.stripe_id,\n };\n })\n // Some payment methods require a customer to do additional\n // authentication with their financial institution.\n // Eg: 2FA for cards.\n .then(handlePaymentThatRequiresCustomerAction)\n // If attaching this card to a Customer object succeeds,\n // but attempts to charge the customer fail. You will\n // get a requires_payment_method error.\n .then(handleRequiresPaymentMethod)\n // No more actions required. Provision your service for the user.\n .then(onSubscriptionComplete)\n .catch((error) => {\n // An error has happened. Display the failure to the user here.\n // We utilize the HTML element we created.\n setSubscribing(false);\n setErrorToDisplay(error.message);\n })\n );\n };\n\n const [promotionCode, setPromotionCode] = useState('');\n const [promotionCodeVerified, setPromotionCodeVerified] = useState(false);\n const [isVerifying, setIsVerifying] = useState(false);\n const [promotionCodeError, setPromotionCodeError] = useState(false);\n const [promotionCodeSuccess, setPromotionCodeSuccess] = useState(false);\n\n const handlePromotionCodeChange = (event) => {\n return setPromotionCode(event.target.value);\n };\n\n const hidePromotionCodeError = () => {\n return setPromotionCodeError(false);\n };\n\n const handlePromotionCodeSuccess = () => {\n setPromotionCodeSuccess(true);\n\n setTimeout(() => {\n return setPromotionCodeSuccess(false);\n }, 3000);\n };\n\n const subscriptionWithTotals = () => {\n return trial_ended || (context === 'settings' && setSubscriptionCancelled);\n };\n\n const productTotal = () => {\n return subscriptionWithTotals() ? Number(productSelected.price * 1.2) : 0;\n };\n\n const formatTotal = (total) => {\n return currency(total, { symbol: '', separator: '' }).format();\n };\n\n const [discountAmount, setDiscountAmount] = useState(null);\n const [discountPercent, setDiscountPercent] = useState(null);\n const [discountTotal, setDiscountTotal] = useState(null);\n const [orderTotal, setOrderTotal] = useState(productTotal());\n\n const recalculateTotals = (result) => {\n if (!subscriptionWithTotals) {\n setDiscountTotal(0);\n return setOrderTotal(0);\n }\n\n if (result !== null) {\n setDiscountAmount(result.coupon.amount_off / 100);\n setDiscountPercent(result.coupon.percent_off);\n } else {\n setDiscountTotal(null);\n setOrderTotal(productTotal());\n }\n };\n\n useEffect(() => {\n if (promotionCodeSuccess) {\n setPromotionCodeError(false);\n setPromotionCodeVerified(true);\n }\n }, [promotionCodeSuccess]);\n\n useEffect(() => {\n if (promotionCodeError) {\n setPromotionCodeSuccess(false);\n setPromotionCodeVerified(false);\n }\n }, [promotionCodeError]);\n\n useEffect(() => {\n const discount = discountPercent\n ? Number(productSelected.price * (discountPercent / 100)).toFixed(2)\n : discountAmount;\n\n setDiscountTotal(discount);\n\n if (subscriptionWithTotals()) {\n return setOrderTotal(productTotal() - discount);\n } else {\n return setOrderTotal(0);\n }\n }, [discountPercent, discountAmount, productSelected]);\n\n const verifyPromotionCode = () => {\n setIsVerifying(true);\n\n return $.ajax({\n url: `/${company.slug}/subscriptions/verify_promotion_code`,\n method: 'get',\n data: { promotion_code: promotionCode },\n })\n .then((response) => {\n return response;\n })\n .then((result) => {\n if (result !== null) {\n handlePromotionCodeSuccess();\n } else {\n setPromotionCodeError(true);\n }\n\n recalculateTotals(result);\n return setIsVerifying(false);\n });\n };\n\n const handleSubmit = async (event) => {\n if (!isComplete) {\n setEmpty(true);\n return;\n }\n setEmpty(false);\n // Block native form submission.\n event.preventDefault();\n\n setSubscribing(true);\n setErrorToDisplay('');\n\n if (!stripe || !elements) {\n // Stripe.js has not loaded yet. Make sure to disable\n // form submission until Stripe.js has loaded.\n return;\n }\n\n // Get a reference to a mounted CardElement. Elements knows how\n // to find your CardElement because there can only ever be one of\n // each type of element.\n const cardElement = elements.getElement(CardElement);\n\n // Use your card Element with other Stripe.js APIs\n const { error, paymentMethod } = await stripe.createPaymentMethod({\n type: 'card',\n card: cardElement,\n });\n\n if (error && error != ' ') {\n setSubscribing(false);\n setErrorToDisplay(error && error.message);\n }\n\n // Create the subscription\n createSubscription({\n paymentMethod: paymentMethod,\n slug: company.slug,\n });\n };\n\n const onChangeCardElement = (event) => {\n setComplete(event.complete);\n };\n\n const { isMobile } = useWindowDimensions();\n\n return (\n \n \n \n
\n \n {reversedProducts\n .filter((f) => period.includes(f.interval))\n .map((product, index) => {\n return (\n
\n );\n })}\n \n \n
\n {product.name.toLowerCase().includes('charity') ? (\n \n \n {product.name\n .replace('yearly', '')\n .replace('Yearly', '')\n .replace('monthly', '')\n .replace('Monthly', '')}\n
\n \n {product.currency === 'usd' ? '$' : '£'}\n {Number(product.price).toFixed(2)}\n
\n \n\n {product.name.toLowerCase().includes('yearly') ? (\n
\n {product.name.toLowerCase().includes('charity') &&
\n \n
\n \n
\n \n );\n};\n\nexport default PaymentForm;\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const cardBox = css`\n background: #fff;\n box-shadow: 0px 4px 50px rgba(54, 71, 98, 0.12);\n border-radius: 16px;\n padding: 20px;\n margin: 30px 0;\n position: relative;\n`;\n\nexport const errorCardBox = css`\n background: #fff;\n box-shadow: 0px 4px 50px rgba(54, 71, 98, 0.12);\n border-radius: 16px;\n padding: 19px;\n position: relative;\n border: 1px solid #ff7a7a;\n`;\n\nexport const couponBox = css`\n margin-top: 30px;\n background: #fff;\n box-shadow: 0px 4px 50px rgba(54, 71, 98, 0.12);\n border-radius: 16px;\n padding: 20px 20px 0px 20px;\n position: relative;\n height: 130px;\n\n input {\n border: 1px solid #f0eee9;\n padding: 10px;\n height: 35px;\n }\n\n .btn {\n height: 35px !important;\n line-height: 35px;\n }\n\n .success-text {\n color: ${colors.cyan};\n }\n`;\n\nexport const errorCouponBox = css`\n margin-top: 20px;\n background: #fff;\n box-shadow: 0px 4px 50px rgba(54, 71, 98, 0.12);\n border-radius: 16px;\n padding: 19px 19px 0px 19px;\n position: relative;\n border: 1px solid ${colors.red};\n height: 130px;\n\n input {\n border: 1px solid ${colors.red};\n padding: 10px;\n height: 35px;\n color: ${colors.red};\n\n &:focus,\n &:active {\n color: ${colors.black};\n }\n }\n\n .btn {\n height: 35px !important;\n line-height: 35px;\n }\n\n .error-text {\n color: ${colors.red};\n }\n`;\n\nexport const summaryBox = css`\n background: transparent;\n border: 1px solid #f0eee9;\n border-radius: 16px;\n font-size: 14px;\n position: relative;\n margin: 30px 0;\n h2 {\n border-bottom: 1px solid #f0eee9;\n padding: 20px;\n }\n`;\n\nexport const summaryDetails = css`\n padding: 10px 20px;\n border-bottom: 1px solid #f0eee9;\n display: flex;\n flex-direction: column;\n p {\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n align-items: center;\n }\n`;\n\nexport const total = css`\n padding: 20px 20px 0 20px;\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n align-items: center;\n`;\n\nexport const billingInfo = css`\n border-left: 2px solid #2c2e3f;\n padding-left: 10px;\n`;\n","/** @jsx jsx */\n\nimport React, { useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { Elements } from '@stripe/react-stripe-js';\nimport { loadStripe } from '@stripe/stripe-js';\n\nimport { Spinner } from 'components/shared/Spinner';\nimport { AlertPopup } from '../shared/AlertPopup';\n\nimport { getAxiosHeaders } from 'utils/getHeaders';\n\nimport axios from 'axios';\nimport { trackPromise } from 'react-promise-tracker';\n\nimport { getStripeFontOptions } from 'utils/getStripeFontOptions';\n\nimport { deleteById } from 'utils/deleteById';\n\nimport EditForm from './EditForm';\nimport AddForm from './AddForm';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\n\nimport * as styles from './PaymentMethods.styles';\n\nimport Mastercard from 'images/icons/payment-icons/mastercard.svg';\nimport Discover from 'images/icons/payment-icons/discover.svg';\nimport Unionpay from 'images/icons/payment-icons/unionpay.svg';\nimport Diners from 'images/icons/payment-icons/diners.svg';\nimport Visa from 'images/icons/payment-icons/visa.svg';\nimport Amex from 'images/icons/payment-icons/amex.svg';\nimport JCB from 'images/icons/payment-icons/jcb.svg';\n\nconst PaymentMethods = ({ company }) => {\n const [paymentMethods, setPaymentMethods] = useState(null);\n const [selectedCard, setSelectedCard] = useState(null);\n const [primaryMethod, setPrimaryMethod] = useState(null);\n const [showAdd, setShowAdd] = useState(false);\n const [showEdit, setShowEdit] = useState(false);\n const [flash, setFlash] = useState(null);\n\n const { isMobile } = useWindowDimensions();\n\n const intl = useIntl();\n\n const dismissFlash = () => setFlash(null);\n\n const iconsMap = {\n mastercard: Mastercard,\n discover: Discover,\n unionpay: Unionpay,\n diners: Diners,\n visa: Visa,\n amex: Amex,\n jcb: JCB,\n };\n\n const loadPaymentMethods = () => {\n trackPromise(\n axios\n .get(`/${company.slug}/payment_methods`, getAxiosHeaders())\n .then((response) => response.data)\n .then(setPaymentMethods)\n );\n };\n\n useEffect(() => {\n if (paymentMethods) {\n setPrimaryMethod(paymentMethods.find((method) => method.primary));\n }\n }, [paymentMethods]);\n\n useEffect(() => {\n loadPaymentMethods();\n }, []);\n\n const stripePromise = loadStripe(ENV['STRIPE_KEY']);\n\n const hideEditPaymentMethod = () => {\n setSelectedCard(null);\n setShowEdit(false);\n };\n\n const hideAddPaymentMethod = () => {\n setSelectedCard(null);\n setShowAdd(false);\n };\n\n const handleAddClick = () => {\n setShowEdit(false);\n\n if (showAdd) {\n hideAddPaymentMethod();\n } else {\n setSelectedCard(null);\n setShowAdd(!showAdd);\n }\n };\n\n const handleEditClick = (paymentMethod) => {\n setShowAdd(false);\n\n if (showEdit && selectedCard === paymentMethod) {\n hideEditPaymentMethod();\n } else {\n setSelectedCard(paymentMethod);\n setShowEdit(true);\n }\n };\n\n const handleAddPaymentMethod = ({ data }) => {\n hideAddPaymentMethod();\n loadPaymentMethods();\n };\n\n const handleError = ({ response }) => {\n setFlash(response.data.error?.message || response.data.message);\n };\n\n const handleDeletePaymentMethod = ({ data }) => {\n setPaymentMethods(deleteById(paymentMethods, data));\n };\n\n return (\n \n
\n \n
\n \n \n
\n
\n \n
\n \n \n
\n
\n {promotionCodeSuccess && (\n \n
\n \n \n
\n \n
\n )}\n {promotionCodeError && (\n \n
\n )}\n \n \n
\n
\n {subscribing && (\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n {intl.formatMessage({\n id: 'PaymentForm.immediately',\n })}\n \n ),\n period,\n day: moment().format('Do'),\n year: period === 'yearly' ? ` of ${moment().format('MMMM')}` : '',\n }}\n />\n
\n \n \n
\n
\n )}\n \n \n {subscribing\n ? intl.formatMessage({ id: 'PaymentForm.processing' })\n : intl.formatMessage({ id: 'PaymentForm.completePayment' })}\n \n \n
\n \n
\n );\n};\n\nexport default PaymentMethods;\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const card = css`\n margin-right: 30px;\n width: 56px;\n height: auto;\n`;\n\nexport const cardsTable = css`\n border: 1px solid #f2f2f2;\n border-radius: 16px;\n margin-top: 20px;\n position: relative;\n\n @media (max-width: 767px) {\n border: none;\n }\n`;\n\nexport const cardsTableRow = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 32px 35px;\n border-bottom: 1px solid #f2f2f2;\n flex-wrap: wrap;\n\n @media (max-width: 767px) {\n background: ${colors.white};\n border: 1px solid #ced2e0;\n border-radius: 16px;\n padding: 16px 21px 10px 21px;\n margin-bottom: 10px;\n }\n`;\n\nexport const modalStyles = css`\n .modal-dialog.shaparency {\n .modal-content {\n padding-bottom: 32px;\n }\n }\n`;\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './Products.styles';\nimport { ReactComponent as CheckMarkCircleIcon } from 'images/icons/circle-checkmark-large.svg';\n\nconst Product = ({ product, company, handleClick, selected, couponCode, isStandalone }) => {\n return (\n \n \n
\n\n \n \n
\n {flash}
\n \n\n \n \n \n
\n )}\n\n {paymentMethods ? (\n paymentMethods.map((paymentMethod) => (\n \n handleEditClick(paymentMethod)}\n >\n
\n ))\n ) : (\n \n \n
\n\n \n 
\n
\n\n {paymentMethod.primary && (\n \n \n {`•••• •••• •••• ${paymentMethod.last_digits || paymentMethod.last4}`}\n\n
\n\n
\n\n \n {paymentMethod.primary && (\n \n \n\n
\n \n
\n \n \n handleClick(product)}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n }}\n />\n {selected && (\n
\n {product.name.includes('Charity') && !company.verified ? (\n \n {product.name}
\n \n {product.currency === 'usd' ? '$' : '£'}\n {Number(product.price).toFixed(2)}\n {couponCode && '*'}\n
\n\n {product.interval.includes('year') ? (\n
\n
\n )}\n \n {newProduct !== selectedProduct ? (\n
\n );\n};\n\nexport default ProductChangeForm;\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { loadStripe } from '@stripe/stripe-js';\nimport { Elements } from '@stripe/react-stripe-js';\nimport Switch from 'react-input-switch';\nimport moment from 'moment';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { ReactComponent as PlanSelectIcon } from 'images/icons/plan-select.svg';\nimport { ReactComponent as FreeTrialBadge } from 'images/icons/free-trial-14.svg';\nimport { withIntl } from '../../utils/v2/intl';\nimport { getStripeFontOptions } from 'utils/getStripeFontOptions';\n\nimport * as styles from './Products.styles';\nimport PaymentForm from './PaymentForm';\nimport Product from './Product';\nimport Invoices from './Invoices';\n\nimport { AlertPopup } from '../shared/AlertPopup';\nimport ManageForm from './ManageForm';\n\nconst stripePromise = loadStripe(ENV['STRIPE_KEY']);\n\nconst Products = ({ products, currentProduct, subscription, company, context, trial_ended }) => {\n const [period, setPeriod] = useState('monthly');\n let [showSuccessAlert, setShowSuccessAlert] = useState(false);\n let [subscribedProduct, setSubscribedProduct] = useState(currentProduct);\n let [currentSubscription, setCurrentSubscription] = useState(subscription);\n let [subscriptionCancelled, setSubscriptionCancelled] = useState(subscription && subscription.status === 'cancelled');\n let [showCancellationAlert, setShowCancellationAlert] = useState(false);\n\n const handleSuccessAlertClose = () => setShowSuccessAlert(false);\n const handleCancellationAlertClose = () => setShowCancellationAlert(false);\n\n const intl = useIntl();\n\n const isMonthlyProduct = (product) => {\n return product.interval === 'month';\n };\n\n const isYearlyProduct = (product) => {\n return product.interval === 'year';\n };\n\n const defaultProduct = products.find((p) => p.name.includes('Charity') && isMonthlyProduct(p));\n const [productSelected, setProduct] = useState(defaultProduct);\n\n const handleSetSub = () => {\n $.ajax({\n url: `/${company.slug}/profile/reload_subscription`,\n method: 'get',\n headers: {\n 'X-CSRF-Token': $(\"[name='csrf-token']\").attr('content'),\n },\n }).then((result) => {\n setCurrentSubscription(result);\n });\n };\n\n const handleClick = (product) => {\n setProduct(product);\n };\n\n const handleSwitch = (period, product) => {\n if (period === 'monthly') {\n setProduct(products.find((p) => p.name === product.name && isMonthlyProduct(p)));\n } else {\n setProduct(products.find((p) => p.name === product.name && isYearlyProduct(p)));\n }\n setPeriod(period);\n };\n\n // Sets the order of the products to match design\n // Using concat so that this is no destructive, else we get weird positions\n let prods = [];\n if (period === 'monthly') {\n prods = products.filter((p) => isMonthlyProduct(p));\n } else {\n prods = products.filter((p) => isYearlyProduct(p));\n }\n\n const reversedProducts = [].concat(prods).reverse();\n\n return (\n \n
\n ) : null}\n \n
\n\n Current price
\n {selectedProduct.name}
\n \n
\n\n New price
\n {newProduct.name}
\n \n \n \n
\n \n {context === 'settings' && (\n \n
\n\n \n \n )}\n
\n );\n};\n\nexport default withIntl(Products);\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const noProductBox = css`\n background-color: #fff9f2;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-size: 14px;\n padding: 15px;\n margin-bottom: 30px;\n`;\n\nexport const noProductText = css`\n max-width: 400px;\n line-height: 20px;\n color: ${colors.black};\n margin: 10px 10%;\n`;\n\nexport const activeProductBox = css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-size: 14px;\n padding: 15px;\n margin-bottom: 60px;\n\n productBox {\n margin-bottom: -80px;\n }\n`;\n\nexport const productBox = css`\n background: #fff;\n max-width: 400px;\n margin: 0 auto;\n box-shadow: 0px 4px 50px rgba(54, 71, 98, 0.12);\n border-radius: 4px;\n padding: 15px 15px 25px 15px;\n border-top: 7px solid white;\n position: relative;\n`;\n\nexport const cardsTable = css`\n border: 1px solid #f2f2f2;\n border-radius: 16px;\n margin-top: 20px;\n`;\n\nexport const cardsTableRow = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid #f2f2f2;\n`;\n","import React, { memo, useState, useEffect } from 'react';\nimport { useIntl } from 'react-intl';\nimport { Row, Col } from 'react-bootstrap';\n\nimport { Select } from '../../shared/Select';\nimport Multiselect from '../../shared/Select/Multiselect';\nimport { Search } from '../../shared/Search';\nimport { withIntl } from '../../../utils/v2/intl';\n\nconst Filters = memo(({}) => {\n const intl = useIntl();\n\n const statusOptions = [\n { value: 'incomplete', label: intl.formatMessage({ id: 'Filters.inProgress' }) },\n { value: 'completed', label: intl.formatMessage({ id: 'Filters.completed' }) },\n { value: 'archived', label: intl.formatMessage({ id: 'Filters.archived' }) },\n { value: 'isoverdue', label: intl.formatMessage({ id: 'Filters.overdue' }) },\n ];\n\n const timeframeOptions = [\n { value: 'all', label: intl.formatMessage({ id: 'Filters.all' }) },\n { value: 'next_30_days', label: intl.formatMessage({ id: 'Filters.next30' }) },\n { value: 'next_6_months', label: intl.formatMessage({ id: 'Filters.next6' }) },\n { value: 'past_year', label: intl.formatMessage({ id: 'Filters.pastYear' }) },\n ];\n\n const defaultStatusOptions = statusOptions.filter(({ value }) => value !== 'archived');\n\n let [selectedStatuses, setSelectedStatuses] = useState(defaultStatusOptions);\n let [selectedTimeframe, setSelectedTimeframe] = useState(timeframeOptions[0]);\n let [searchTerm, setSearchTerm] = useState('');\n let [isSearching, setIsSearching] = useState(false);\n\n const handleTermChange = (event) => {\n setSearchTerm(event.target.value || '');\n };\n\n const startSearching = () => {\n setIsSearching(true);\n };\n\n const stopSearching = () => {\n setIsSearching(false);\n setSearchTerm('');\n };\n\n useEffect(() => {\n const companySlug = getCompanySlug();\n const query = $.param({\n category: $('[data-action=\"filter_category\"] a.active').data('value'),\n search: searchTerm,\n status: selectedStatuses.filter((option) => option.value).map((option) => option.value),\n timeframe: selectedTimeframe && selectedTimeframe.value,\n });\n\n $.get(`/${companySlug}/action_items.js?${query}`);\n }, [selectedStatuses, selectedTimeframe, searchTerm]);\n\n return (\n <>\n \n \n
\n
\n )}\n {currentSubscription && !subscriptionCancelled && context === 'settings' ? (\n [\n \n
\n \n
\n
\n
\n )}\n {!(currentSubscription && subscriptionCancelled) && (\n \n
\n
\n )}\n \n {!trial_ended && (\n
\n \n
\n )}\n \n
\n \n {trial_ended ? (\n \n
\n
\n\n {subscription ? (\n \n \n handleSwitch(period, productSelected)}\n />{' '}\n \n
\n \n {reversedProducts.map((product, index) => {\n return (\n
\n \n
\n ) : null}\n\n {productSelected ? (\n \n
\n \n );\n});\n\nexport default withIntl(Filters);\n","/** @jsxRuntime classic */\n/** @jsx jsx */\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport moment from 'moment';\nimport { useIntl } from 'react-intl';\n\nimport { useTimezoneSubscription } from './../hooks/useTimezoneSubscription';\nimport { useTimezoneQuery } from './../data/queries/TimezoneQuery';\nimport { formatTimezoneOffset } from 'helpers/formatDateTime';\nimport { withIntl } from '../../../utils/v2/intl';\n\nconst HOUR_IN_SECONDS = 3600;\nconst SECOND_IN_MILLISECONDS = 1000;\nconst TIME_FORMAT = 'DD MMM YYYY, hh:mm a';\n\nconst TimeClock = ({ tzName, tzOffset, contactId, className }) => {\n const { data } = useTimezoneQuery();\n\n const intl = useIntl();\n\n useTimezoneSubscription({ contactId: contactId });\n\n const name = data?.currentContact?.timezone?.name || tzName;\n const gmtOffset = data?.currentContact?.timezone?.gmtOffset || tzOffset;\n const gmtTimeDiff = gmtOffset / HOUR_IN_SECONDS;\n\n const getCurrentTime = () => {\n if (gmtOffset != null) {\n return moment().utc().add(gmtTimeDiff, 'hours').format(TIME_FORMAT);\n } else {\n return moment().format(TIME_FORMAT);\n }\n };\n\n const [time, setTime] = useState(getCurrentTime());\n const updateTime = () => setTime(getCurrentTime());\n\n const timerRef = useRef();\n\n useEffect(() => {\n if (!data) return;\n\n updateTime();\n\n if (timerRef.current) {\n clearInterval(timerRef.current);\n }\n\n timerRef.current = setInterval(updateTime, SECOND_IN_MILLISECONDS);\n\n return () => clearInterval(timerRef.current);\n }, [data]);\n\n const timezoneDescription = () => {\n if (gmtOffset == null) {\n return intl.formatMessage({ id: 'TimeClock.local' });\n } else {\n return `(${name} ${formatTimezoneOffset(gmtOffset)})`;\n }\n };\n\n return (\n \n
\n );\n};\n\nexport default withIntl(TimeClock);\n","export { default } from './TimeClock';\n","import TimeClock from './TimeClock';\nimport { withApollo } from 'utils/v2/apollo';\n\nexport default withApollo(TimeClock);\n","import { gql } from '@apollo/client';\n\nconst TIMEZONE_FRAGMENT = gql`\n fragment TimezoneFields on Timezone {\n name\n gmtOffset\n }\n`;\n\nexport { TIMEZONE_FRAGMENT };\n","import { gql, useQuery } from '@apollo/client';\nimport { TIMEZONE_FRAGMENT } from './../fragments/TimezoneFragment';\n\nconst TIMEZONE_QUERY = gql`\n query timezone {\n currentContact {\n id\n\n timezone {\n ...TimezoneFields\n }\n }\n }\n ${TIMEZONE_FRAGMENT}\n`;\n\nconst useTimezoneQuery = (options) => useQuery(TIMEZONE_QUERY, options);\n\nexport { TIMEZONE_QUERY, useTimezoneQuery };\n","import { gql, useQuery } from '@apollo/client';\nimport { TIMEZONE_FRAGMENT } from './../fragments/TimezoneFragment';\n\nconst TIMEZONE_SUBSCRIPTION = gql`\n subscription TimezoneSubscription {\n timezoneChanged {\n ...TimezoneFields\n }\n }\n ${TIMEZONE_FRAGMENT}\n`;\n\nexport { TIMEZONE_SUBSCRIPTION };\n","import { useSubscription } from '@apollo/client';\nimport { TIMEZONE_QUERY } from './../data/queries/TimezoneQuery';\nimport { TIMEZONE_SUBSCRIPTION } from './../data/subscriptions/TimezoneSubscription';\n\nconst useTimezoneSubscription = ({ contactId }) => {\n useSubscription(TIMEZONE_SUBSCRIPTION, {\n shouldResubscribe: true,\n onSubscriptionData: ({ client, subscriptionData }) => {\n const fallback = { currentContact: { id: contactId } };\n const cache = client.readQuery({ query: TIMEZONE_QUERY }) || fallback;\n\n if (!subscriptionData.data) return;\n\n const { timezoneChanged } = subscriptionData.data;\n\n if (!timezoneChanged) return;\n if (!cache) return;\n\n client.writeQuery({\n query: TIMEZONE_QUERY,\n data: { ...cache, currentContact: { ...cache.currentContact, timezone: timezoneChanged } },\n });\n },\n });\n};\n\nexport { useTimezoneSubscription };\n","import React, { useContext } from 'react';\nimport Button from 'components/v2/shared/Button';\nimport { wrapMutation } from 'utils/v2/gql';\nimport { useApproveContactMutation } from '../../../data/v2/mutations/ApproveContactMutation';\nimport { useRejectContactMutation } from '../../../data/v2/mutations/RejectContactMutation';\nimport Toast, { Severity } from '../shared/Toast/Toast';\nimport { ToastContext } from 'contexts/v2/ToastContext';\nimport { useCurrentUserQuery } from '../../../data/v2/queries/CurrentUserQuery';\nimport { formatDate } from 'helpers/formatDateTime';\nimport { CURRENT_COMPANY_QUERY } from '../../../data/v2/queries/CurrentCompanyQuery';\n\nconst Approval = ({ id, email, createdAt, onDecide }) => {\n const [approveContact] = useApproveContactMutation({\n refetchQueries: [\n {\n query: CURRENT_COMPANY_QUERY,\n },\n ],\n });\n const [rejectContact] = useRejectContactMutation({\n refetchQueries: [\n {\n query: CURRENT_COMPANY_QUERY,\n },\n ],\n });\n const { toastInfo, setToastInfo } = useContext(ToastContext);\n const { data, loading } = useCurrentUserQuery();\n\n const handleApproveContact = () => {\n wrapMutation(\n approveContact,\n {\n variables: {\n input: { contactId: id },\n },\n },\n 'approveContact'\n )\n .then(() => {\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: 'Contact approved',\n });\n onDecide(id);\n })\n .catch((err) => {\n setToastInfo({\n severity: Severity.Success,\n status: 'Error',\n message: 'Error approving contact.',\n });\n });\n };\n\n const handleRejectContact = () => {\n wrapMutation(\n rejectContact,\n {\n variables: {\n input: { contactId: id },\n },\n },\n 'rejectContact'\n )\n .then(() => {\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: 'Contact rejected.',\n });\n onDecide(id);\n })\n .catch((err) => {\n setToastInfo({\n severity: Severity.Success,\n status: 'Error',\n message: 'Error rejecting contact.',\n });\n });\n };\n\n return (\n <>\n {time}
\n {timezoneDescription()}
\n \n
\n \n );\n};\n\nexport default Approval;\n","import React, { useState } from 'react';\nimport Heading from 'components/v2/shared/Heading';\nimport IndividualContacts from 'components/v2/contacts/IndividualContacts';\nimport PermissionIndividual from 'components/v2/contacts/PermissionIndividual';\nimport Modal from 'components/v2/shared/Modal';\n\nconst ContactIndividual = ({ openIndividual, selectedContact }) => {\n const [openModal, setOpenModal] = useState(false);\n const { name, email, contactRole, phoneNumber, linkedinUrl, address } = selectedContact;\n const handleModal = () => {\n setOpenModal(prevValue => prevValue = !prevValue);\n };\n const notEmail = (email) => {\n return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email) === false;\n };\n\n return (\n <>\n \n
\n {email}
\n {!loading ? (\n \n {formatDate(createdAt, data.currentUser.dateFormat.label)}\n
\n ) : null}\n \n \n Approve\n \n \n Reject\n \n
\n \n
\n \n \n );\n};\n\nexport default ContactIndividual;\n","import React, { useState, useContext } from 'react';\nimport StateBadge from 'components/v2/shared/StateBadge';\nimport Avatar from '../shared/Avatar/Avatar';\nimport Switch from 'components/v2/shared/Switch';\nimport Button, { Sizes, Variants } from 'components/v2/shared/Button';\nimport Modal from 'components/v2/shared/Modal';\nimport clsx from 'clsx';\nimport Toast, { Severity } from '../shared/Toast/Toast';\nimport { ToastContext } from 'contexts/v2/ToastContext';\nimport { wrapMutation } from 'utils/v2/gql';\nimport { useArchiveContactMutation } from '../../../data/v2/mutations/ArchiveContactMutation';\nimport { useReinviteContactMutation } from '../../../data/v2/mutations/ReinviteContactMutation';\nimport { capitalize } from '../../../utils/capitalize';\n\nconst ContactListItem = ({ data, openIndividual }) => {\n const [contact, setContact] = useState({\n id: data.id,\n isOwner: data.isOwner,\n name: data.name,\n companyPosition: capitalize(data.contactRole),\n initials: data.initials,\n avatarUrl: data.avatarUrl,\n status: data.status,\n tasks: data.actionItems,\n taskCount: data.actionItems.length,\n });\n const [active, setActive] = useState(\n contact.status !== 'archived' && contact.status !== 'invited' && contact.status !== 'reinvited'\n );\n const [modalState, setModalState] = useState(false);\n const [archiveContact] = useArchiveContactMutation();\n const [reinviteContact] = useReinviteContactMutation();\n const { toastInfo, setToastInfo } = useContext(ToastContext);\n\n const handleSwitchClick = () => {\n if (active) setModalState(true);\n };\n\n const handleArchive = () => {\n wrapMutation(\n archiveContact,\n {\n variables: {\n input: { contactId: contact.id },\n },\n },\n 'archiveContact'\n )\n .then(() => {\n setActive(false);\n setModalState(false);\n setContact({ ...contact, status: 'archived' });\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: `Contact archived.`,\n });\n })\n .catch((error) => {\n setToastInfo({\n severity: Severity.Success,\n status: 'Error',\n message: `Error archiving contact.`,\n });\n });\n };\n\n const onReinvite = () => {\n wrapMutation(\n reinviteContact,\n {\n variables: {\n input: { contactId: contact.id },\n },\n },\n 'reinviteContact'\n )\n .then(() => {\n setContact({ ...contact, status: contact.status === 'invited' ? 'invited' : 'reinvited' });\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: `Contact has been reinvited.`,\n });\n })\n .catch((error) => {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: `Error reinviting contact.`,\n });\n });\n };\n\n const ConfirmArchiveModal = () => {\n return (\n \n
\n \n openIndividual(false, selectedContact)}\n >\n Close window\n
\n \n handleModal()}\n centered\n size='sm'\n >\n
\n \n \n Permission\n \n
\n {(name && notEmail(name)) ? name.split(\" \")[0] : \"\"}
\n{name ? name.split(\" \")[1] : \"\"}
\n \n{email}
\n{phoneNumber}
\n{linkedinUrl}
\n\n {address}\n
\n\n
\n \n {contactRole ? contactRole.replace(/^\\w/, (c) => c.toUpperCase()) : 'role'}\n
\n{ handleModal() }} className='!tw-mb-0 tw-font-sans tw-text-xs tw-font-medium tw-text-teal-500 tw-cursor-pointer'>\n View permissions\n
\n\n {contact.taskCount == 0 ? (\n <>\n
\n );\n };\n\n return (\n \n Are you sure you want to archive this contact?\n
\n \n The contact will be archived and can not longer access their\n
\n account. You can reactivate the account by sending a verification\n
\n email again.\n
\n\n \n account. You can reactivate the account by sending a verification\n
\n email again.\n
\n
\n \n ) : (\n <>\n \n
\n \n \n Yes, archive contact\n \n
\n \n setModalState(false)}\n size='large'\n variant='transparent'\n >\n No, keep contact\n \n
\n Archive Contact
\n \n The contact you are about to archive has{' '}\n {`${contact.taskCount} active action item${contact.taskCount > 1 ? 's' : ''}`}:\n {contact.taskCount >= 1 && (\n
\n Would you like to reassign the action {`item${contact.taskCount > 1 ? 's' : ''}`} to the owner?\n
\n\n - \n {contact.tasks.map((task) => {\n return (\n
- \n {task.title}\n \n );\n })}\n
\n Would you like to reassign the action {`item${contact.taskCount > 1 ? 's' : ''}`} to the owner?\n
\n
\n \n )}\n \n
\n \n \n Yes, reassign & archive contact\n \n
\n \n setModalState(false)}\n size='large'\n variant='transparent'\n >\n No, keep contact\n \n
\n \n
\n \n
\n {contact.name}
\n {capitalize(data.contactRole)}
\n \n {(contact.status === 'archived' || contact.status === 'invited' || contact.status === 'reinvited') && (\n \n Re-send invite\n \n )}\n {contact.isOwner ? (\n \n Owner\n \n ) : (\n <>\n {contact.status !== 'registered' ? (\n
\n \n );\n};\n\nexport default ContactListItem;\n","import React, { Fragment, useState } from 'react';\nimport { Combobox, Transition } from '@headlessui/react';\nimport { GoCode } from 'react-icons/go';\nimport clsx from 'clsx';\n\nconst Variants = {\n Category: 'category',\n Group: 'group',\n};\n\nconst people = [\n { id: 1, name: 'View by A-Z' },\n { id: 2, name: 'View by Z - A' },\n { id: 3, name: 'View by status' },\n { id: 4, name: 'View by role' },\n];\n\nconst Filter = ({ variant }) => {\n const [selected, setSelected] = useState(people[0]);\n const [query, setQuery] = useState('');\n\n const filteredPeople =\n query === ''\n ? people\n : people.filter((person) =>\n person.name.toLowerCase().replace(/\\s+/g, '').includes(query.toLowerCase().replace(/\\s+/g, ''))\n );\n return (\n \n \n {contact.status === 'archived'\n ? 'Archived'\n : contact.status === 'registered'\n ? 'Active'\n : contact.status === 'confirmed'\n ? 'Confirmed'\n : contact.status === 'invited'\n ? 'Invited'\n : contact.status === 'reinvited'\n ? 'Reinvited'\n : ''}\n \n
\n ) : (\n <>\n )}\n \n \n {contact.status === 'archived' ? 'Archived' : 'Active'}\n \n
\n \n )}\n \n \n setQuery('')}\n >\n \n {filteredPeople.length === 0 && query !== '' ? (\n \n `tw-relative tw-cursor-default tw-select-none tw-text-sm ${\n active ? 'tw-bg-teal-600 tw-text-white' : 'tw-text-gray-900'\n }`\n }\n value={person}\n >\n {({ selected, active }) => (\n <>\n \n {person.name}\n \n \n )}\n \n ))\n )}\n \n \n
\n \n \n );\n};\n\nexport default Filter;\n","import React from 'react';\nimport StateBadge from 'components/v2/shared/StateBadge';\nimport Avatar from '../shared/Avatar/Avatar';\nimport { formatDate } from 'helpers/formatDateTime';\n\nconst IndividualContacts = ({ selectedContact }) => {\n const {\n name,\n companyPosition,\n initials,\n status,\n createdAt,\n daysSinceCreation,\n lastActiveDate,\n daysSinceActive,\n avatarUrl,\n } = selectedContact;\n return (\n \n \n person.name}\n onChange={(event) => setQuery(event.target.value)}\n />\n \n
\n \n Nothing found.\n
\n ) : (\n filteredPeople.map((person) => (\n \n
\n \n
\n {name}
\n {companyPosition}
\n \n {status === 'Owner' ? (\n \n Owner\n \n ) : (\n \n {status === 'archived'\n ? 'Archived'\n : status === 'registered'\n ? 'Active'\n : status === 'confirmed'\n ? 'Confirmed'\n : status === 'pending'\n ? 'Pending'\n : status === 'invited' || status === 'reinvited'\n ? 'Invited'\n : ''}\n \n )}\n
\n \n
\n Last active
\nCreated
\n\n
\n \n {lastActiveDate ? formatDate(lastActiveDate, 'h:mm A, d.M.YYYY') : 'User has not yet been active.'}\n
\n\n {formatDate(createdAt, 'h:mm A, d.M.YYYY')}\n
\n\n
\n \n );\n};\n\nexport default IndividualContacts;\n","import React, { useState } from 'react';\nimport StateBadge from 'components/v2/shared/StateBadge';\nimport Heading from 'components/v2/shared/Heading';\nimport Switch from 'components/v2/shared/Switch';\nimport clsx from 'clsx';\nimport { isEqual } from 'lodash';\n\nconst MemberContact = ({ openIndividual, onActiveSwitch, isArchive, currentIndex }) => {\n const [selectedItem, setSelectedItem] = useState(null)\n\n const members = [\n {\n firstName: 'Aaron',\n lastName: 'Smith',\n role: 'Non-Executive Director',\n status: 'Owner',\n },\n {\n firstName: 'Benjamin',\n lastName: 'K',\n role: 'Non-Executive Director',\n status: 'Pending',\n },\n {\n firstName: 'Daniela',\n lastName: 'B',\n role: 'Non-Executive Director',\n status: 'Active',\n },\n {\n firstName: 'Gabriel',\n lastName: 'D',\n role: 'Non-Executive Director',\n status: 'Archived',\n },\n {\n firstName: 'Ivan',\n lastName: 'M',\n role: 'Non-Executive Director',\n status: 'Active',\n },\n {\n firstName: 'Peter',\n lastName: 'M',\n role: 'Non-Executive Director',\n status: 'Confirmed',\n },\n {\n firstName: 'Noah',\n lastName: 'H',\n role: 'Non-Executive Director',\n status: 'Pending',\n },\n ];\n\n const onSelectItem = (e, i) => {\n setSelectedItem(e)\n openIndividual(true, e, i)\n }\n\n const MemberPerStatus = ({ title }) => {\n const baseOnStatus = members.filter((item) => {\n if (item.status === 'Owner' && title === 'Active') {\n return item\n } else if (item.status === title) {\n return item\n }\n })\n\n return (\n <>\n {daysSinceActive}
\n{daysSinceCreation}
\n\n onSelectItem(e, i)}\n >\n
\n\n \n );\n })}\n \n );\n };\n\n return (\n <>\n \n
\n\n\n \n
\n \n
\n \n SS\n
\n \n
\n \n {e.firstName + ' ' + e.lastName}\n
\n {e.role}
\n \n {e.status === 'Archived' &&
\n Re-Invite
}\n \n \n {e.status === 'Archived'\n ? 'Archived'\n : e.status === 'Owner'\n ? 'Owner'\n : e.status === 'Active'\n ? 'Active'\n : e.status === 'Confirmed'\n ? 'Confirmed'\n : e.status === 'Pending'\n ? 'Pending'\n : ''}\n \n {e.status !== 'Owner' &&
\n \n
}\n \n
\n );\n};\n\nconst PermissionIndividual = ({ openModal }) => {\n const [selectedContact, setSelectedContact] = useContext(SelectedContactContext);\n const { id: selectedContactId, contactRole, accessRoleId, roles } = selectedContact;\n const { toastInfo, setToastInfo } = useContext(ToastContext);\n const getPermissionsByRoleId = (roleId) => {\n let selectedRole = roles.filter((role) => role.id === roleId)[0];\n\n return {\n 'Company settings': selectedRole.rolePermissions.filter((p) =>\n ['company', 'subscription', 'chat'].includes(p.permission.resource)\n ),\n 'Contact & Roles': selectedRole?.rolePermissions.filter((p) =>\n ['access_role', 'contact_group', 'contact'].includes(p.permission.resource)\n ),\n Meetings: selectedRole?.rolePermissions.filter((p) => ['meeting'].includes(p.permission.resource)),\n Documents: selectedRole?.rolePermissions.filter((p) => ['document'].includes(p.permission.resource)),\n Tasks: selectedRole.rolePermissions.filter((p) => ['task'].includes(p.permission.resource)),\n Minutes: selectedRole?.rolePermissions.filter((p) => ['minute'].includes(p.permission.resource)),\n Voting: selectedRole?.rolePermissions.filter((p) => ['vote'].includes(p.permission.resource)),\n SmartSign: selectedRole?.rolePermissions.filter((p) => ['smart_sign'].includes(p.permission.resource)),\n };\n };\n let initPermissions = getPermissionsByRoleId(accessRoleId);\n const [modalPermissions, setModalPermissions] = useState(initPermissions);\n\n const CreatePermissions = ({ permission }) => {\n return permission.map((p) => {\n return (\n \n
\n {description}
\n\n
\n \n
\n );\n });\n };\n\n const filterItems = roles.reduce((arr, role) => {\n return arr.concat({\n id: role.id,\n name: role.name,\n });\n }, []);\n\n const [updateContactRole] = useUpdateContactRoleMutation({\n refetchQueries: [{ query: CONTACTS_QUERY }],\n });\n const onSelect = (role) => {\n let newPermissions = getPermissionsByRoleId(role.id);\n wrapMutation(\n updateContactRole,\n {\n variables: {\n input: {\n contactId: selectedContactId,\n id: role.id,\n },\n },\n },\n 'updateContactRole'\n )\n .then(() => {\n if (initPermissions !== modalPermissions) {\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: `Contact role update successful.`,\n });\n }\n setSelectedContact({ ...selectedContact, contactRole: role.name });\n setModalPermissions(newPermissions);\n })\n .catch((error) => {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: error.message,\n });\n });\n };\n\n return (\n \n
\n );\n};\n\nexport default withIntl(PermissionIndividual);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Link from 'components/v2/layout/Link';\nimport { FiChevronRight } from 'react-icons/fi';\n\nconst CompanyItem = ({ href, children, isSelected = false }) => (\n \n
\n Role
\n \n
\n\n \n
\n Company Settings
\n \n Contacts & Roles\n
\n Meetings
\n Documents
\n Tasks
\n Minute
\n Voting
\n Smartsign
\n \n {intl.formatMessage({ id: 'CompanyList.noFound' })}\n
\n );\n }\n\n const renderSubcommittees = (subcommittees = []) => {\n return (\n \n {subcommittees.map((subcommittee) => (\n
\n );\n };\n\n const renderCompanies = companies.map((company) => (\n <>\n \n \n {subcommittee.name}\n \n
\n ))}\n \n
\n \n {company.name}\n {company.isPrimary && (\n \n \n )}\n {company.isPending && (\n \n \n )}\n
\n {renderSubcommittees(subcommittees.filter((subcommittee) => subcommittee.parentCompany.id === company.id))}\n \n {renderCompanies}\n \n
\n );\n};\n\nCompanyList.propTypes = {\n companies: PropTypes.array,\n currentCompany: PropTypes.object,\n isLoading: PropTypes.bool,\n onFetchMore: PropTypes.func,\n};\n\nexport default CompanyList;\n","export { default } from './CompanyList';\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Toggle from './Toggle';\nimport Input from './Input';\nimport CompanyList from './CompanyList';\nimport VisibilityWrapper from 'components/v2/shared/VisibilityWrapper';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport { useClickOutside } from 'hooks/useClickOutside';\nimport { useDebounce } from 'use-debounce';\nimport { getObjectDataByPath } from 'utils/v2/data';\nimport { useCurrentUserCompaniesQuery } from 'data/v2/queries/CurrentUserCompaniesQuery';\n\nconst COMPANIES_PER_PAGE = 10;\n\nconst CompanyPicker = ({\n currentCompany = {},\n isViewingCompanies = false,\n toggleIsViewingCompanies = () => {},\n setIsViewingCompanies = () => {},\n}) => {\n const { isLargeDesktop } = useWindowDimensions();\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside();\n\n const [searchTerm, setSearchTerm] = useState('');\n const [debouncedSearchTerm] = useDebounce(searchTerm, 500);\n\n const {\n data,\n loading: isLoading,\n networkStatus,\n fetchMore,\n } = useCurrentUserCompaniesQuery({\n skip: !isViewingCompanies,\n variables: {\n name: debouncedSearchTerm,\n first: COMPANIES_PER_PAGE,\n context: 'Navbar',\n },\n });\n\n const companiesData = getObjectDataByPath(data, 'currentUser.companies', { pageInfo: {}, edges: [] });\n const subcommittees = getObjectDataByPath(data, 'currentUser.subcommittees');\n const companies = companiesData.edges.map((edge) => edge.node);\n\n const fetchMoreCompanies = () => {\n if (!companiesData.pageInfo.hasNextPage) return;\n if (networkStatus === NetworkStatus.fetchMore) return;\n\n fetchMore({\n variables: {\n after: companiesData.pageInfo.endCursor,\n },\n });\n };\n\n useEffect(() => {\n if (isLargeDesktop && !isComponentVisible) {\n setIsViewingCompanies(false);\n }\n }, [isComponentVisible]);\n\n useEffect(() => {\n setSearchTerm('');\n\n if (isViewingCompanies) {\n setIsComponentVisible(true);\n }\n }, [isViewingCompanies]);\n\n const handleInputChange = (e) => setSearchTerm(e.target.value);\n\n return (\n \n
\n\n \n {companyName}\n
\n {children}
\n \n );\n};\n\nHeader.propTypes = {\n children: PropTypes.node,\n isBodyLockEnabled: PropTypes.bool,\n};\n\nexport default Header;\n","export { default } from './Header';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport MenuItem from 'components/v2/layout/MenuItem';\nimport Dropdown from 'components/v2/shared/Dropdown';\nimport { Disclosure } from '@headlessui/react';\nimport { intl } from 'contexts/v2/TranslationContext';\nimport { FiTool, FiChevronDown } from 'react-icons/fi';\n\nconst Variants = {\n Mobile: 'mobile',\n Desktop: 'desktop',\n};\n\nconst LanguagePicker = ({ value, options, onChange, variant }) => {\n const keys = Object.keys(options);\n const label = keys.find((key) => options[key] === value);\n\n if (!keys.length) {\n return null;\n }\n\n const handleDropdownItemClick = (language) => () => onChange(language);\n\n if (variant === Variants.Desktop) {\n return (\n \n \n \n \n\n \n {keys.map((key, index) => (\n \n {key}\n \n ))}\n \n
\n )}\n \n
\n);\n\nLogOutItem.propTypes = {};\n\nexport default LogOutItem;\n","export { default } from './LogOutItem';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport VisibilityWrapper from 'components/v2/shared/VisibilityWrapper';\nimport MenuItem from 'components/v2/layout/MenuItem';\nimport ProfileItem from 'components/v2/layout/ProfileItem';\nimport LogOutItem from 'components/v2/layout/LogOutItem';\nimport { FiChevronRight } from 'react-icons/fi';\nimport { intl } from 'contexts/v2/TranslationContext';\n\nconst Menu = ({ isViewingMenu, currentCompany, currentContact }) => {\n const menuItemProps = (path) => ({\n isSelected: window.location.href.indexOf(path) > -1,\n href: `/${currentCompany.slug}/${path}`,\n });\n\n return (\n No companies found.
;\n }\n\n return (\n Select a company:
\n ) : null}\n {companies.map((company) => {\n const {\n node: { id, name, subcommittees, isPrimary, trialEnded },\n } = company;\n const { currentUser } = data;\n const subcommitteesList = subcommittees.filter((subcom) =>\n subcom.contacts.some((contact) => contact.email === currentUser.email)\n );\n\n return (\n \n
\n {isPrimary && !trialEnded ? (\n \n
\n {name}\n \n \n Primary\n \n
\n ) : null}\n {trialEnded ? (\n \n ) : null}\n \n \n {subcommitteesList.map((sc, index) => (\n handleCompanyClick(sc)}\n >\n
\n \n \n {renderCompanyList()}\n
\n \n ) : null}\n \n );\n };\n\n const NameDisplay = () => {\n if (!data && loading) {\n return {currentCompany.name};\n }\n\n const {\n currentUser: {\n companies: { edges: companies },\n },\n } = data;\n\n const { currentUser } = data;\n\n const subcommitteesList = companies.flatMap((company) =>\n company.node.subcommittees.filter((subcom) =>\n subcom.contacts.some((contact) => contact.email === currentUser.email)\n )\n );\n\n const otherCompanies = companies.filter((company) => !company.node.isCurrentCompany);\n\n return (\n \n {currentCompany.name}\n {otherCompanies.length > 0 || subcommitteesList.length > 0 ? (\n
\n );\n };\n\n return (\n \n
\n );\n};\n\nconst ProfileMenu = ({ userData, links }) => {\n return (\n \n );\n};\n\nconst MobileNavMenu = ({ onClick, links, isConsoleEnabled }) => {\n return (\n \n );\n};\n\nconst Navbar = ({\n currentUser,\n currentCompany,\n showNotificationBadge,\n showChatBadge,\n showChat,\n contactId,\n tzName,\n tzOffset,\n isConsoleEnabled,\n ...linksState\n}) => {\n const dimensions = useWindowDimensions();\n const [breakpoint, setBreakpoint] = useState(getCurrentBreakpoint(dimensions.width));\n\n useEffect(() => {\n setBreakpoint(getCurrentBreakpoint(dimensions.width));\n }, [dimensions.width]);\n\n return (\n \n {!['xl', '2xl'].includes(breakpoint) ?
\n \n
\n \n
\n \n
\n );\n};\n\nexport default Navbar;\n","export { default } from './withApollo';\n","import Navbar from './Navbar'\nimport { withApollo } from 'utils/v2/apollo'\n\nexport default withApollo(Navbar)","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Link from 'components/v2/layout/Link';\nimport Avatar from 'components/v2/shared/Avatar';\nimport Dropdown from 'components/v2/shared/Dropdown';\nimport ProfileItem from 'components/v2/layout/ProfileItem';\nimport LogOutItem from 'components/v2/layout/LogOutItem';\n\nconst ProfileDropdown = ({ onToggle, currentContact = {}, currentCompany = {} }) => (\n \n
\n - \n \n \n \n \n \n \n \n {!currentCompany?.ancestry ? (\n \n ) : null}\n {isConsoleEnabled && }\n
\n
\n \n \n
\n \n
\n \n
\n);\n\nProfileItem.propTypes = {};\n\nexport default ProfileItem;\n","export { default } from './ProfileItem';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nconst ToggleButton = ({ Element = 'button', children, isActive, className, onClick }) => (\n \n {currentContact.id && (\n <>\n \n {isViewingMenu ? \n\n
\n);\n\nToolbar.propTypes = {\n isViewingMenu: PropTypes.bool,\n currentCompany: PropTypes.object,\n toggleIsViewingMenu: PropTypes.func,\n toggleIsViewingProfile: PropTypes.func,\n};\n\nexport default Toolbar;\n","export { default } from './Toolbar';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { Row, Col } from 'react-bootstrap';\n\nimport CollapsedAgendaItem from './../CollapsedAgendaItem';\nimport RadioButton from 'components/v2/shared/RadioButton';\nimport TextInput from 'components/v2/shared/TextInput';\nimport Text from 'components/v2/shared/Text';\nimport TextButton from 'components/v2/shared/TextButton';\nimport LabeledRow from 'components/v2/shared/LabeledRow';\nimport Button, { Variants } from 'components/v2/shared/Button';\n\nimport * as styles from './AgendaItem.styles';\n\nconst AgendaItem = ({ title, isExpanded = false }) => {\n if (!isExpanded) return \n
\n \n \n
\n\n \n
\n\n \n
\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n
\n );\n};\n\nAgendaItem.propTypes = {\n title: PropTypes.string,\n isExpanded: PropTypes.bool,\n};\n\nexport default AgendaItem;\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const container = css`\n box-shadow: 0px 15px 30px rgba(18, 5, 34, 0.1), 0px 6.4px 14.4px rgba(32, 0, 56, 0.13);\n border-radius: 3px;\n border: 1px solid ${colors.cyan};\n padding: 20px 25px;\n position: relative;\n`;\n","export { default } from './AgendaItem';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport Text from 'components/v2/shared/Text';\nimport ActionsMenu from 'components/v2/shared/ActionsMenu';\nimport MenuItem from 'components/v2/shared/MenuItem';\n\nimport * as styles from './AgendaItemActionsMenu.styles';\n\nconst AgendaItemActionsMenu = ({ className }) => {\n return (\n \n \n\n \n
\n\n
\n );\n};\n\nAgendaStep.propTypes = {};\n\nexport default AgendaStep;\n","import { css } from '@emotion/core';\n\nexport const container = css`\n position: relative;\n`;\n","export { default } from './AgendaStep';\n","/** @jsx jsx */\n\nimport React, { useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { Row, Col } from 'react-bootstrap';\n\nimport Spinner from 'components/v2/shared/Spinner';\nimport Button, { Variants } from 'components/v2/shared/Button';\nimport Box from 'components/v2/shared/Box';\nimport RadioButton from 'components/v2/shared/RadioButton';\nimport Text from 'components/v2/shared/Text';\nimport { useContactGroupsContext } from 'contexts/v2/ContactGroupsContext';\nimport { useContactsContext } from 'contexts/v2/ContactsContext';\nimport { useAttendeesContext } from 'contexts/v2/AttendeesContext';\nimport ContactMultiSelectInput from 'components/v2/shared/ContactMultiSelectInput';\nimport ContactGroupSelectInput from '../../shared/ContactGroupSelectInput/ContactGroupSelectInput';\nimport Divider from 'components/v2/shared/Divider';\nimport ContactCard from 'components/v2/shared/ContactCard';\nimport useNavigation from 'hooks/v2/useNavigation';\nimport ContactGroup from '../../shared/ContactGroup/ContactGroup';\nimport TextButton from '../../shared/TextButton/TextButton';\nimport AssignChairModalWindow from '../../shared/AssignChairModalWindow/AssignChairModalWindow';\nimport { useMeetingFormStepContext } from 'contexts/v2/MeetingFormStepContext';\nimport { INDIVIDUALS, GROUP } from './constants';\n\nimport * as styles from './AttendeesStep.styles';\n\nconst AttendeesStep = () => {\n const [selectType, setSelectType] = useState(INDIVIDUALS);\n const [isAssignModalVisible, setIsAssignModalVisible] = useState(false);\n const { fetchContactGroups, contactGroups, getGroupsContacts, loading } = useContactGroupsContext();\n const {\n edits: { individualAttendees, groups },\n setIndividualAttendees,\n setGroups,\n removeIndividualAttendee,\n updateMeetingAttendees,\n fetchMeetingAttendees,\n removeGroup,\n discardEdits,\n hasNoMeetingAttendees,\n hasNoEditsAttendees,\n } = useAttendeesContext();\n const { contacts } = useContactsContext();\n\n const navigate = useNavigation();\n const { nextStep } = useMeetingFormStepContext();\n\n useEffect(() => {\n discardEdits();\n fetchContactGroups();\n fetchMeetingAttendees();\n }, []);\n\n const handleIndividualChange = (data) => setIndividualAttendees(data || []);\n\n const handleGroupChange = (data) => setGroups(data || []);\n\n const handleRadioChange = (e) => setSelectType(e.target.value);\n\n const handleRemoveAttendeeClick = (id) => () => removeIndividualAttendee(id);\n\n const handleSkipStep = () => nextStep();\n\n const handleMeetingSave = (redirectToIndex) => async () => {\n try {\n await updateMeetingAttendees();\n if (redirectToIndex) {\n navigate('meetingsIndex');\n } else {\n nextStep();\n }\n } catch {}\n };\n\n const handleRemoveGroup = (groupId) => () => removeGroup(groupId);\n\n const handleAssignClick = () => setIsAssignModalVisible(true);\n\n const onModalHide = () => setIsAssignModalVisible(false);\n\n const noAttendees = !groups.length && !individualAttendees.length;\n\n const renderSelectInput = () =>\n selectType === INDIVIDUALS ? (\n \n \n \n \n
\n \n
\n \n
\n \n\n \n
\n {hasNoEditsAttendees ? (\n \n \n ) : (\n \n
\n )}\n\n {renderButtons()}\n
\n );\n};\n\nAttendeesStep.propTypes = {};\n\nexport default AttendeesStep;\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const assignChairButton = css`\n position: absolute;\n background: ${colors.white};\n right: 15px;\n bottom: 14px;\n padding: 0 20px;\n`;\n","export const INDIVIDUALS = 'individuals';\nexport const GROUP = 'group';\n","export { default } from './AttendeesStep';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport Box from 'components/v2/shared/Box';\nimport Text from 'components/v2/shared/Text';\nimport Icon from 'components/v2/shared/Icon';\nimport AgendaItemActionsMenu from './../AgendaItemActionsMenu';\n\nimport * as styles from './CollapsedAgendaItem.styles';\n\nconst CollapsedAgendaItem = ({ title, className }) => (\n \n
\n\n \n \n \n
\n \n\n {edits.config !== IN_PERSON && (\n \n \n \n )}\n
\n\n {configTypeFormMap[edits.config]}\n {hasLocation && \n
\n
\n );\n};\n\nHowToAttendStep.propTypes = {};\n\nexport default HowToAttendStep;\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const container = css`\n position: relative;\n`;\n","export const ZOOM = 'zoom';\nexport const CONFERENCE = 'conference';\nexport const IN_PERSON = 'in_person';\n","export { default } from './HowToAttendStep';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { Row, Col } from 'react-bootstrap';\nimport Divider from 'components/v2/shared/Divider';\nimport ContentToggle from 'components/v2/shared/ContentToggle';\nimport PlacesInput from 'components/v2/shared/PlacesInput';\nimport TextAreaInput from 'components/v2/shared/TextAreaInput';\n\nimport { useMeetingConfigContext } from 'contexts/v2/MeetingConfigContext';\nimport { getFieldData } from 'utils/v2/data';\n\nimport * as styles from './InPersonLocationForm.styles';\n\nconst InPersonLocationForm = ({ className }) => {\n const { edits, updateEdits } = useMeetingConfigContext();\n\n const handleLocationChange = (value) => {\n const targetData = getFieldData(value);\n\n updateEdits('location', targetData);\n };\n\n const handleLocationNotesChange = (value) => {\n const targetData = value.target;\n\n updateEdits('locationNotes', targetData.value);\n };\n\n const resetLocationNotes = () => {\n updateEdits('locationNotes', '');\n };\n\n const isLocationNotesVisible = edits.locationNotes?.length > 0;\n\n return (\n {configTypeFormMap[IN_PERSON]}
}\n\n \n \n\n \n \n\n \n \n
\n );\n};\n\nInviteAndNoticeSchedule.propTypes = {\n scheduledAt: PropTypes.instanceOf(moment),\n timezone: PropTypes.string,\n};\n\nexport default InviteAndNoticeSchedule;\n","import { css } from '@emotion/core';\n\nexport const container = css`\n position: relative;\n`;\n","export { default } from './InviteAndNoticeSchedule';\n","/** @jsx jsx */\n\nimport React, { useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { Row, Col } from 'react-bootstrap';\n\nimport Spinner from 'components/v2/shared/Spinner';\nimport Divider from 'components/v2/shared/Divider';\nimport ContentToggle from 'components/v2/shared/ContentToggle';\nimport Button, { Variants } from 'components/v2/shared/Button';\nimport Checkbox from 'components/v2/shared/Checkbox';\nimport NoticeTimeSelectInput from 'components/v2/shared/NoticeTimeSelectInput';\nimport ContactSelectInput from 'components/v2/shared/ContactSelectInput';\nimport Text from 'components/v2/shared/Text';\nimport TextAreaInput from 'components/v2/shared/TextAreaInput';\nimport InviteAndNoticeSchedule from './../InviteAndNoticeSchedule';\n\nimport useNavigation from 'hooks/v2/useNavigation';\n\nimport { getFieldData } from 'utils/v2/data';\nimport { useMeetingFormStepContext } from 'contexts/v2/MeetingFormStepContext';\nimport { useTimezonesContext } from 'contexts/v2/TimezonesContext';\nimport { formatDate, formatTime } from 'helpers/formatDateTime';\nimport { useMeetingContext } from 'contexts/v2/MeetingContext';\nimport { useCurrentContactContext } from 'contexts/v2/CurrentContactContext';\nimport { useContactsContext } from 'contexts/v2/ContactsContext';\nimport { useNoticeScheduleContext } from 'contexts/v2/NoticeScheduleContext';\nimport { LONG_DATE_FORMAT } from './../constants';\n\nimport moment from 'moment';\n\nimport * as styles from './InviteAndNoticeStep.styles';\n\nconst InviteAndNoticeStep = () => {\n const [errors, setErrors] = useState({});\n\n const {\n edits,\n updateEdits,\n discardEdits,\n loading,\n getNoticeScheduleOptionByValue,\n noticeScheduleOptions,\n noticeSchedule,\n fetchNoticeSchedule,\n saveNoticeSchedule,\n } = useNoticeScheduleContext();\n\n const { getTimezoneByValue } = useTimezonesContext();\n const { currentContact } = useCurrentContactContext();\n const { contacts, getContactByValue } = useContactsContext();\n const { meeting } = useMeetingContext();\n const { nextStep } = useMeetingFormStepContext();\n\n useEffect(() => fetchNoticeSchedule(), []);\n useEffect(() => discardEdits(), []);\n\n const navigate = useNavigation();\n const isFromCurrentContact = edits.contactId === currentContact.id;\n\n const handleFieldChange = (fieldName) => (value) => {\n if (errors[fieldName]) {\n setErrors((state) => ({ ...state, [fieldName]: null }));\n }\n\n updateEdits(fieldName, getFieldData(value));\n };\n\n const handleOptionChange = ({ value, scheduledAt, momentValue }) => {\n updateEdits('config', value);\n\n // Do not set `scheduledAt` if `config` is set to `send_once_scheduled`\n // Taking advantage of the fact that `momentValue` will be 0\n if (momentValue) {\n updateEdits('scheduledAt', scheduledAt);\n } else {\n updateEdits('scheduledAt', null);\n }\n };\n\n const handleNoticeDateTimeChange = (value) => {\n updateEdits('config', null);\n updateEdits('scheduledAt', getFieldData(value));\n };\n\n const handleCheckboxChange = (value) => {\n if (isFromCurrentContact) {\n updateEdits('contactId', null);\n } else {\n updateEdits('contactId', getFieldData(value));\n }\n };\n\n const onMessageHide = () => updateEdits('message', '');\n\n const handleSave = (redirectToIndex) => async () => {\n setErrors({});\n\n try {\n await saveNoticeSchedule();\n\n if (redirectToIndex) {\n navigate('meetingsIndex');\n } else {\n nextStep();\n }\n } catch (e) {\n setErrors(e);\n }\n };\n\n if (loading) {\n return \n \n\n \n
\n\n {!isMeetingForMyself && (\n \n
\n )}\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n\n \n
\n );\n};\n\nMeetingDetailsStep.propTypes = {};\n\nexport default MeetingDetailsStep;\n","import { css } from '@emotion/core';\n\nexport const container = css`\n position: relative;\n`;\n","export { default } from './MeetingDetailsStep';\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport FormSidebar from 'components/v2/shared/FormSidebar';\nimport MeetingFormContent from './../MeetingFormContent';\n\nimport { Row, Col } from 'react-bootstrap';\nimport { STEPS } from './../constants';\n\nimport { useMeetingFormStepContext } from 'contexts/v2/MeetingFormStepContext';\nimport * as styles from './MeetingForm.styles';\n\nconst MeetingForm = () => {\n const { currentStep, prevStep } = useMeetingFormStepContext();\n\n return (\n \n \n
\n\n \n
\n
\n );\n};\n\nMeetingFormContent.propTypes = {\n title: PropTypes.string,\n activeStep: PropTypes.number,\n};\n\nexport default MeetingFormContent;\n","import { css } from '@emotion/core';\n\nexport const container = css`\n position: relative;\n height: 100%;\n`;\n\nexport const header = css`\n display: flex;\n flex-grow: 1;\n align-items: center;\n margin-bottom: 20px;\n`;\n\nexport const activeStep = css`\n padding-right: 68px;\n`;\n","export { default } from './MeetingFormContent';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport AvatarWithBadge from 'components/v2/shared/AvatarWithBadge';\nimport Text from 'components/v2/shared/Text';\nimport TextButton from 'components/v2/shared/TextButton';\nimport LabeledRow from 'components/v2/shared/LabeledRow';\nimport Link from 'components/v2/shared/Link';\n\nimport * as styles from './OverviewMeetingBreakdown.styles';\n\nconst OverviewMeetingBreakdown = () => (\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n
\n);\n\nOverviewMeetingBreakdown.propTypes = {};\n\nexport default OverviewMeetingBreakdown;\n","import { css } from '@emotion/core';\n\nexport const container = css`\n position: relative;\n`;\n","export { default } from './OverviewMeetingBreakdown';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { Row } from 'react-bootstrap';\nimport Chip from 'components/v2/shared/Chip';\nimport Text from 'components/v2/shared/Text';\n\nimport * as styles from './OverviewMeetingHeader.styles';\n\nconst OverviewMeetingHeader = () => (\n \n
\n\n \n
\n \n
\n );\n};\n\nOverviewStep.propTypes = {};\n\nexport default OverviewStep;\n","import { css } from '@emotion/core';\n\nexport const container = css`\n position: relative;\n`;\n","export { default } from './OverviewStep';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport Box from 'components/v2/shared/Box';\nimport Text from 'components/v2/shared/Text';\nimport Avatar from 'components/v2/shared/Avatar';\nimport CircleIcon from 'components/v2/shared/CircleIcon';\nimport TextBadge from 'components/v2/shared/TextBadge';\nimport TaskItemActionsMenu from './../TaskItemActionsMenu';\n\nimport { humanize } from 'utils/v2/strings';\n\nimport * as styles from './TaskItem.styles';\n\nconst TaskItem = ({ title, status, owner, className }) => {\n const renderAvatar = () => {\n if (owner) {\n return \n
\n \n {renderAvatar()}\n
\n \n
\n \n onClick('list')}\n >\n \n \n Make primary company\n
\n \n
\n \n {companyData.isPrimary && (\n <>\n
\n \n
\n Logo
\n \n
\n Registered details
\n \n
\n \n
\n \n
\n \n
\n \n Registered Company Address\n
\n \n
\n \n
\n Website
\n \n
\n \n \n
\n \n onSwitchChangeHandle('use_company_name')}\n isChecked={isActive.use_company_name}\n isGray={isActive.use_company_name}\n />\n
\n \n Use company name\n
\n \n
\n \n handleSubmit('invite-users')}\n >\n Continue\n \n
\n \n \n )}\n\n {/* ------------------------Invite Contact-------------------------- */}\n {isUser && (\n \n
\n );\n } else {\n return handleCompanyClick(`/${slug}/settings`)} className='tw-relative '>\n {primaryForCurrentUser && (\n \n
\n \n );\n }\n return (\n \n \n Primary\n \n
\n )}\n \n
\n \n {logo(logoUrl, name)}\n {name}\n {payment_status === 'pending' && (\n
\n \n \n Pending payment \n \n Pay now\n \n \n }\n severity='warning'\n isDismissable={false}\n className='!tw-p-1'\n />\n
\n )}\n \n {memberContactCount}\n
\n \n {pendingContactCount}\n
\n \n {currentUserRole == 'Owner' ? (\n \n {currentUserRole}\n \n ) : (\n \n {currentUserRole}\n \n )}\n
\n handleCompanyClick(`/${slug}/settings`)} className='tw-relative !tw-text-xs'>\n {primaryForCurrentUser && (\n \n
\n \n );\n};\n\nconst CompanyList = ({ companies }) => {\n return (\n <>\n \n \n Primary\n \n
\n )}\n \n
\n \n
\n {logo(logoUrl, name)}
\n {name}
\n \n
\n \n \n
\n \n {currentUserRole == 'Owner' ? (\n \n {currentUserRole}\n \n ) : (\n \n {currentUserRole}\n \n )}\n
\n \n Members \n {memberContactCount}\n
\n \n Invited \n {pendingContactCount}\n
\n \n {moment(createdAt).format('MMM YYYY')}\n
\n \n
\n \n \n
\n \n
\n {companies.map((company) => {\n return Name
\n Members
\n Pending
\n Your role
\n \n {companies.map((company) => {\n return
\n \n );\n};\n\nconst Companies = ({ companies, pageInfo, onClick, onFetchMore, refetch }) => {\n let searchTimeout;\n const [search, setSearch] = useState('');\n\n const handleSearchChange = async (e) => {\n clearTimeout(searchTimeout);\n const val = e.target.value.toLowerCase();\n\n searchTimeout = setTimeout(() => {\n try {\n setSearch(val);\n refetch({ name: val });\n } catch (error) {\n console.log(error);\n }\n }, 2000);\n };\n\n return (\n \n
\n );\n};\nexport default Companies;\n","import React, { useState, useContext } from 'react';\nimport { FiChevronLeft } from 'react-icons/fi';\nimport TextInput from 'components/v2/shared/TextInput';\nimport Button from 'components/v2/shared/Button';\nimport Label from 'components/v2/shared/Label';\nimport Toast, { Severity } from '../../shared/Toast/Toast';\nimport { ToastContext } from '../../../../contexts/v2/ToastContext';\nimport { wrapMutation } from 'utils/v2/gql';\nimport { useCreateCompanyContactMutation } from 'data/v2/mutations/CreateCompanyContactMutation';\n\nconst ExistingCompany = ({ onClick }) => {\n const { toastInfo, setToastInfo } = useContext(ToastContext);\n const [companyData, setCompanyData] = useState('shaparency.com/');\n\n const onChangeCompanyInput = (e) => {\n const { value } = e.target;\n setCompanyData(value);\n };\n\n const [createCompanyContact] = useCreateCompanyContactMutation();\n\n const onSendRequest = () => {\n wrapMutation(\n createCompanyContact,\n {\n variables: {\n input: {\n slug: companyData.split('/').pop(),\n },\n },\n },\n 'createCompanyContact'\n )\n .then(() => {\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: 'Successfully invited. Please wait for the confirmation.',\n });\n })\n .catch(() => {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: 'An error has occured.',\n });\n });\n };\n\n return (\n <>\n \n
\n \n
\n \n
\n \n
\n \n onClick('add')}\n variant='teal'\n size='small'\n className='tw-h-[38px] tw-w-[90vw] sm:tw-w-full'\n >\n Create new board\n \n
\n \n onClick('existing')}\n variant='purple'\n size='small'\n className='tw-h-[38px] tw-w-[90vw] sm:tw-w-full'\n >\n Join another board\n \n
\n \n
\n \n
\n \n
\n \n );\n};\n\nexport default ExistingCompany;\n","import React, { useState } from 'react';\nimport AddCompany from './AddCompany';\nimport Companies from './Companies';\nimport ExistingCompany from './ExistingCompany';\nimport Spinner from 'components/v2/shared/Spinner';\nimport { withApollo } from 'utils/v2/apollo';\nimport { useCurrentUserCompanyListQuery } from 'data/v2/queries/CurrentUserCompanyListQuery';\nimport { ToastContextProvider } from '../../../../contexts/v2/ToastContext';\n\nconst COMPANIES_PER_PAGE = 10;\n\nconst Index = () => {\n const [activePage, setActivePage] = useState('list');\n const handlePageChange = (page) => {\n setActivePage(page);\n };\n\n const { data, fetchMore, loading, refetch } = useCurrentUserCompanyListQuery({\n variables: {\n first: COMPANIES_PER_PAGE,\n context: 'v2.companies.Index',\n },\n });\n\n if (loading) {\n return \n onClick('list')}\n >\n
\n \n Add existing company\n
\n\n Ask the administrator to provide you with their unique company link.\n
\n \n
\n \n \n
\n \n
\n \n {activePage === 'list' && (\n
\n \n
\n );\n};\n\nconst InviteUsers = ({ roles, onClickPage, onClick, company }) => {\n const [users, setUsers] = useState([]);\n const [isUser, setIsUser] = useState(false);\n const [createContacts] = useCreateContactsMutation();\n\n const onPreviousPage = () => {\n onClickPage(false);\n };\n const addUserOnclick = () => {\n setIsUser(true);\n };\n const onClickInvite = (value) => {\n setIsUser(value);\n };\n const addUsers = (email) => setUsers([...users, { email }]);\n const addInviteUserContinue = async () => {\n await wrapMutation(\n createContacts,\n {\n variables: {\n input: {\n contacts: users,\n companyId: company.id,\n },\n },\n },\n 'createContacts'\n );\n onClick('list');\n };\n const removeInvitedUsers = (index) => {\n const invitedUser = [...users];\n invitedUser.splice(index, 1);\n setUsers(invitedUser);\n };\n\n const updateUserRole = (index, accessRoleId) => {\n const usersArray = [...users];\n usersArray[index] = { ...usersArray[index], accessRoleId };\n setUsers(usersArray);\n };\n\n return (\n <>\n \n \n
\n \n
\n \n );\n};\nexport default InviteUsers;\n","import React from 'react';\n\nimport { Container, Row, Col } from 'react-bootstrap';\n\nimport MeetingForm from 'components/v2/meetings/MeetingForm';\nimport { CreateMeetingContextProvider } from 'contexts/v2/CreateMeetingContext';\n\nexport default () => (\n \n \n
\n \n {users.map((row, i) => {\n return (\n <>\n
\n\n {isUser ? (\n \n
\n \n );\n })}\n \n
\n \n
\n \n {row.email}\n
\n \n updateUserRole(i, item.id)}\n />\n
\n \n {\n removeInvitedUsers(i);\n }}\n />\n
\n \n \n
\n \n )}\n \n
\n );\n};\n\nexport default DateFormat;\n","import React, { useState } from 'react';\nimport Heading from 'components/v2/shared/Heading/';\nimport Checkbox from 'components/v2/shared/Checkbox';\nimport Button from 'components/v2/shared/Button';\nimport { intl } from 'contexts/v2/TranslationContext';\nimport { FormattedMessage } from 'react-intl';\nimport toast, { Toaster } from 'react-hot-toast';\nimport Alert from 'components/v2/shared/Alert';\nimport { wrapMutation } from 'utils/v2/gql';\nimport { useUpdateProfileEmailPreferencesMutation } from 'data/v2/mutations/UpdateProfileEmailPreferencesMutation';\n\nconst EmailPreferences = ({ mailConfig }) => {\n const [updateProfileEmailPreferences] = useUpdateProfileEmailPreferencesMutation();\n const [formData, setFormData] = useState(mailConfig);\n\n const handleChange = ({ target: { name } }) => {\n setFormData((prev) => ({ ...prev, [name]: !formData[name] }));\n };\n\n const handleSubmit = () => {\n const { __typename, ...input } = formData;\n\n wrapMutation(\n updateProfileEmailPreferences,\n {\n variables: {\n input,\n },\n },\n 'updateProfileEmailPreferences'\n )\n .then(() => {\n successToast();\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n const successToast = () => {\n toast.custom(\n \n
\n\n \n
\n \n \n\n setData((prev) => ({ ...prev, dateFormat: value }))}\n optionVariant='regular'\n options={dateFormats}\n errorMessage={errors.dateFormat}\n listHeight='large'\n />\n
\n\n \n \n\n setData((prev) => ({ ...prev, timezone: value }))}\n name='timezone'\n value={data.timezone}\n optionVariant='regular'\n options={timezones}\n errorMessage={errors.timezone}\n placeholder='Type and select name'\n listHeight='large'\n />\n
\n\n \n
\n \n \n
\n \n
\n );\n};\nexport default EmailPreferences;\n","import React, { Fragment, useState } from 'react';\nimport { Tab, Disclosure } from '@headlessui/react';\nimport { FiChevronDown, FiChevronRight } from 'react-icons/fi';\nimport { withApollo } from 'utils/v2/apollo';\nimport { withIntl } from 'utils/v2/intl';\nimport { useCurrentUserProfileQuery } from 'data/v2/queries/CurrentUserProfileQuery';\nimport clsx from 'clsx';\nimport UserDetail from './UserDetail';\nimport Spinner from 'components/v2/shared/Spinner';\nimport DateFormat from './DateFormat';\nimport Password from './Password';\nimport Heading from 'components/v2/shared/Heading';\nimport Integrations from './Integrations';\nimport EmailPreferences from './EmailPreferences';\nimport SmartSign from './SmartSign';\nimport Notification from 'components/v2/notification';\n\nconst Panel = ({ timezones, countries, dateFormats, currentUser }) => (\n \n
\n\n \n
\n \n
\n\n \n
\n
\n \n
\n\n \n
\n
\n \n
\n\n \n
\n
\n \n
\n\n \n
\n
\n \n
\n\n \n
\n
\n \n
\n\n \n
\n
\n \n
\n \n \n
\n \n
\n );\n};\n\nexport default withApollo(withIntl(Index));\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport CheckCircleIcon from 'images/icons/circled-green-check.svg';\nimport Heading from 'components/v2/shared/Heading/Heading';\n\nconst IntegrationsBox = ({ connectUrl, disconnectUrl, name, active, logoUrl, emailIdentifier }) => {\n return (\n <>\n \n \n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {({ open }) => (\n <>\n \n \n \n \n \n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n );\n};\n\nconst Integrations = ({ currentUser, zoomIntegration, calendarIntegrations }) => {\n return (\n <>\n \n window.location.assign(connectUrl)}\n className={clsx(\n 'tw-text-cyan-500 tw-relative tw-flex tw-h-[125px] tw-w-full tw-items-center tw-justify-center tw-rounded-xl tw-border tw-border-solid hover:tw-cursor-pointer hover:tw-border-teal-500',\n {\n 'tw-bg-teal-200 md:tw-border-teal-500': active,\n 'tw-border-transparent tw-bg-gray-200 sm:tw-border-gray-500 sm:tw-bg-transparent': !active,\n }\n )}\n >\n {active && 
}\n
\n \n \n
\n \n 
\n {name && name !== 'Zoom Integration' && (\n \n {active && emailIdentifier}\n \n
\n {name}
\n )}\n\n
\n Zoom integration
\n\n Connect your Zoom account to create video meetings from within Shaparency\n
\n\n
\n \n
\n \n );\n};\n\nexport default Integrations;\n","import React, { useState, useEffect } from 'react';\nimport { notify } from 'components/v2/notification';\nimport Heading from 'components/v2/shared/Heading/';\nimport PasswordInput from 'components/v2/shared/PasswordInput';\nimport Button from 'components/v2/shared/Button';\nimport { wrapMutation } from 'utils/v2/gql';\nimport { useUpdateProfilePasswordMutation } from 'data/v2/mutations/UpdateProfilePasswordMutation';\n\nconst Password = () => {\n const [isValidationPassword, setIsValidationPassword] = useState(false);\n const [updateProfilePassword] = useUpdateProfilePasswordMutation();\n const [errors, setErrors] = useState({});\n const [formData, setFormData] = useState({\n currentPassword: '',\n password: '',\n passwordConfirmation: '',\n });\n const errorCommanMessage = `This field can not be left blank`;\n const errorRequirementMessage = `Password requirements are not met.`;\n useEffect(() => {\n if (isValidationPassword) {\n matchPassword();\n }\n }, [formData]);\n\n const matchPassword = () => {\n formData.passwordConfirmation !== '' && formData.password !== formData.passwordConfirmation\n ? setErrors({ passwordConfirmation: 'Passwords do not match' })\n : isValidationPassword\n ? ''\n : setErrors({ password: errorRequirementMessage });\n };\n\n const handlePassword = (e, validationPropsValue) => {\n const { name, value } = e.target;\n setFormData((prev) => ({ ...prev, [name]: value }));\n setErrors((prev) => ({ ...prev, [name]: '' }));\n validationPropsValue !== undefined && setIsValidationPassword(validationPropsValue);\n if (!validationPropsValue && validationPropsValue != undefined) {\n setErrors({ password: errorRequirementMessage });\n }\n if (isValidationPassword) {\n setErrors({ password: '' });\n }\n };\n const handleSubmit = () => {\n if (formData.password && formData.passwordConfirmation && formData.currentPassword && isValidationPassword) {\n wrapMutation(\n updateProfilePassword,\n {\n variables: {\n input: {\n password: formData.password,\n passwordConfirmation: formData.passwordConfirmation,\n currentPassword: formData.currentPassword,\n },\n },\n },\n 'updateProfilePassword'\n )\n .then(() => {\n notify('success', 'Password updated');\n })\n .catch((error) => {\n setErrors({\n password: error.password,\n passwordConfirmation: error.passwordConfirmation,\n currentPassword: error.currentPassword,\n });\n notify('error', 'Review errors before proceeding');\n });\n } else {\n if (!isValidationPassword) {\n setErrors({ password: errorRequirementMessage });\n }\n if (!formData.password && !formData.passwordConfirmation && !formData.currentPassword) {\n setErrors({\n password: errorCommanMessage,\n passwordConfirmation: errorCommanMessage,\n currentPassword: errorCommanMessage,\n });\n } else if (!formData.passwordConfirmation && !formData.currentPassword) {\n setErrors({ passwordConfirmation: errorCommanMessage, currentPassword: errorCommanMessage });\n } else if (!formData.password && !formData.currentPassword) {\n setErrors({ password: errorCommanMessage, currentPassword: errorCommanMessage });\n } else if (!formData.password && !formData.passwordConfirmation) {\n setErrors({ password: errorCommanMessage, passwordConfirmation: errorCommanMessage });\n } else if (!formData.password) {\n setErrors({ password: errorCommanMessage });\n } else if (!formData.passwordConfirmation) {\n setErrors({ passwordConfirmation: errorCommanMessage });\n } else if (!formData.currentPassword) {\n setErrors({ currentPassword: errorCommanMessage });\n }\n }\n };\n\n return (\n Calendar integration
\n\n Connect your calendar to send Shaparency meeting invites directly from your calendar\n
\n\n {calendarIntegrations.map((calendarIntegration) => (\n
\n \n
\n );\n};\nexport default Password;\n","import React, { useRef } from 'react';\nimport SignatureInput from 'components/v2/pages/signatureInput';\nimport { useUpdateProfileSmartSignSettingsMutation } from 'data/v2/mutations/UpdateProfileSmartSignSettingsMutation';\nimport { useClearProfileSmartSignSignatureMutation } from 'data/v2/mutations/ClearProfileSmartSignSignatureMutation';\nimport { uploadFile } from 'utils/v2/directUploads';\nimport { wrapMutation } from 'utils/v2/gql';\nimport { notify } from 'components/v2/notification';\n\nconst SmartSign = ({ currentUser }) => {\n const [updateProfileSmartSignSettings] = useUpdateProfileSmartSignSettingsMutation();\n const [clearProfileSmartSignSignature] = useClearProfileSmartSignSignatureMutation();\n\n const signatureInputRef = useRef();\n\n const handleClearSignature = () => {\n wrapMutation(clearProfileSmartSignSignature, { variables: { input: {} } }, 'clearProfileSmartSignSignature')\n .then(() => {\n notify('success', 'Your signature was successfully cleared!');\n })\n .catch((err) => console.log(err));\n };\n\n const handleSave = (blob) => {\n signatureInputRef.current.processInput((signatureBlob) => {\n signatureBlob.name = 'signature';\n uploadFile(signatureBlob, {}).then((blob) => {\n wrapMutation(\n updateProfileSmartSignSettings,\n { variables: { input: { signatureBlobSignedId: blob.signed_id } } },\n 'updateProfileSmartSignSettings'\n )\n .then(() => {\n notify('success', 'Your signature was successfully saved!');\n })\n .catch((err) => console.log(err));\n });\n });\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n Save\n \n
\n \n
\n );\n};\nexport default UserDetail;\n","import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';\nimport SignaturePad from 'signature_pad';\nimport Dropzone from 'react-dropzone';\nimport canvasTxt from 'canvas-txt';\nimport 'blueimp-canvas-to-blob';\nimport { signatureTypes, signatureFonts } from './types';\nimport Heading from 'components/v2/shared/Heading/';\nimport TextInput from 'components/v2/shared/TextInput';\nimport Label from 'components/v2/shared/Label';\nimport Button from 'components/v2/shared/Button/Button';\nimport { FiCircle } from 'react-icons/fi';\nimport clsx from 'clsx';\n\nconst Index = forwardRef(({ onSave, onClearSignature, name, existingSignatureImageUrl }, ref) => {\n useImperativeHandle(ref, () => ({\n processInput: (handler) => {\n if (isCanvasEmpty()) {\n return setError('Please add a signature in order to proceed');\n }\n\n canvas.current.toBlob(handler);\n },\n resetControl: () => {\n resetControl();\n },\n setError: (error) => {\n setError(error);\n },\n }));\n\n const savedCanvas = useRef();\n const canvas = useRef();\n\n let [activeFont, setActiveFont] = useState(signatureFonts.bethEllen);\n let [signatureType, setSignatureType] = useState(signatureTypes.saved);\n let [activeScript, setActiveScript] = useState(false);\n let [ratioModifier, setRatioModifier] = useState(0);\n let [pad, setPad] = useState();\n let [image, setImage] = useState();\n let [error, setError] = useState();\n\n const resetControl = () => {\n setActiveFont(signatureFonts.bethEllen);\n setSignatureType(signatureTypes.drawing);\n setImage(null);\n setError(null);\n setRatioModifier(0);\n };\n\n const isActiveSignatureType = (type) => {\n return type === signatureType;\n };\n\n const toggleSignatureType = (value) => {\n setSignatureType(value);\n setActiveScript(false);\n setRatioModifier(0);\n };\n\n useEffect(() => {\n if (signatureType && canvas.current) {\n return changeSignatureType(signatureType);\n }\n if (signatureType && savedCanvas.current) {\n return setSavedSignature();\n }\n }, [ratioModifier, activeFont, signatureType, image]);\n\n useEffect(() => {\n if (signatureType && savedCanvas.current) {\n return setSavedSignature();\n }\n }, [signatureType, existingSignatureImageUrl]);\n\n const setSavedSignature = () => {\n const context = savedCanvas.current.getContext('2d');\n const ratio = Math.max(window.devicePixelRatio || 1, 1);\n\n context.clearRect(0, 0, savedCanvas.current.width, savedCanvas.current.height);\n\n savedCanvas.current.width = savedCanvas.current.offsetWidth * ratio;\n savedCanvas.current.height = savedCanvas.current.offsetHeight * ratio;\n\n context.scale(ratio, ratio);\n\n if (pad) {\n pad.off();\n }\n\n if (existingSignatureImageUrl) {\n const existingImage = new Image();\n existingImage.src = existingSignatureImageUrl;\n existingImage.crossOrigin = 'Anonymous';\n existingImage.onload = () => insertImageIntoCanvas(context, ratio, existingImage, savedCanvas);\n }\n };\n\n const changeSignatureType = (type) => {\n const context = canvas.current.getContext('2d');\n const ratio = Math.max(window.devicePixelRatio || 1, 1);\n\n context.clearRect(0, 0, canvas.current.width, canvas.current.height);\n\n canvas.current.width = canvas.current.offsetWidth * ratio;\n canvas.current.height = canvas.current.offsetHeight * ratio;\n\n context.scale(ratio, ratio);\n\n if (pad) {\n pad.off();\n }\n\n if (type === signatureTypes.saved && existingSignatureImageUrl) {\n return insertExistingSignatureImage(context, ratio);\n } else if (type === signatureTypes.drawing) {\n return setPad(new SignaturePad(canvas.current, { throttle: 0 }));\n } else if (type === signatureTypes.script) {\n return insertNameIntoCanvas(context, ratio);\n } else if (type === signatureTypes.upload && image) {\n return insertImageIntoCanvas(context, ratio, image, canvas);\n }\n };\n\n const insertExistingSignatureImage = (context, ratio) => {\n const existingImage = new Image();\n existingImage.src = existingSignatureImageUrl;\n existingImage.crossOrigin = 'Anonymous';\n existingImage.onload = () => insertImageIntoCanvas(context, ratio, existingImage, canvas);\n };\n\n const insertImageIntoCanvas = (context, ratio, image, canvas) => {\n const scale = 1 / ratio;\n\n const imgScale = Math.min(\n (scale * canvas.current.width) / image.width,\n (scale * canvas.current.height) / image.height\n );\n\n const imgW = image.width * (imgScale + ratioModifier / 100);\n const imgH = image.height * (imgScale + ratioModifier / 100);\n\n const cenX = (scale * canvas.current.width - imgW) / 2;\n const cenY = (scale * canvas.current.height - imgH) / 2;\n\n context.drawImage(image, cenX, cenY, imgW, imgH);\n\n const pixels = context.getImageData(0, 0, canvas.current.width, canvas.current.height);\n\n convertToGrayscaleAndRemoveBackground(pixels);\n\n context.putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);\n };\n\n const convertToGrayscaleAndRemoveBackground = (pixels) => {\n for (let y = 0; y < pixels.height; y++) {\n for (let x = 0; x < pixels.width; x++) {\n let data = pixels.data;\n\n // Grayscale\n const index = y * 4 * pixels.width + x * 4;\n const average = (data[index] + data[index + 1] + data[index + 2]) / 3;\n\n data[index] = average;\n data[index + 1] = average;\n data[index + 2] = average;\n\n // Remove background\n if (data[index] >= 160 && data[index + 1] >= 160 && data[index + 2] >= 160) {\n data[index] = 0;\n data[index + 1] = 0;\n data[index + 2] = 0;\n data[index + 3] = 0;\n }\n }\n }\n };\n\n const insertNameIntoCanvas = (context, ratio) => {\n if (name) {\n const fontSize = 50 + 2 * ratioModifier;\n const scale = 1 / ratio;\n const x = 0;\n const y = activeFont === signatureFonts.dawning ? -20 : -10;\n\n canvasTxt.font = activeFont;\n canvasTxt.fontSize = fontSize;\n canvasTxt.lineHeight = fontSize;\n\n canvasTxt.drawText(context, name, x, y, scale * canvas.current.width, scale * canvas.current.height);\n }\n };\n\n const isActiveFont = (font) => {\n return isActiveSignatureType(signatureTypes.script) && activeFont === font;\n };\n\n const clearCanvas = () => {\n const context = canvas.current.getContext('2d');\n if (signatureType === signatureTypes.drawing) {\n context.clearRect(0, 0, canvas.current.width, canvas.current.height);\n } else if (signatureType === signatureTypes.upload) {\n setImage(null);\n }\n };\n\n const changeFontHandler = (font) => {\n return isActiveSignatureType(signatureTypes.script) ? setActiveFont.bind(this, font) : null;\n };\n\n const maxRatioModifier = 18;\n const minRatioModifier = -18;\n\n const isMinRatioModifier = ratioModifier === minRatioModifier;\n const isMaxRatioModifier = ratioModifier === maxRatioModifier;\n\n const scaleUp = () => {\n if (isMaxRatioModifier) return;\n\n setRatioModifier(ratioModifier + 1);\n };\n\n const scaleDown = () => {\n if (isMinRatioModifier) return;\n\n setRatioModifier(ratioModifier - 1);\n };\n\n const handleDropzoneDrop = (acceptedFiles) => {\n const upload = acceptedFiles[0];\n const image = new Image();\n\n image.src = URL.createObjectURL(upload);\n image.onload = () => setImage(image);\n };\n\n const isCanvasEmpty = () => {\n const context = canvas.current.getContext('2d');\n\n const pixelBuffer = new Uint32Array(\n context.getImageData(0, 0, canvas.current.width, canvas.current.height).data.buffer\n );\n\n return !pixelBuffer.some((color) => color !== 0);\n };\n\n const dropZone = (\n \n
\n \n
\n \n Joined on: {moment(currentUser.createdAt).format('DD/MM/YYYY')}\n
\n \n
\n \n
\n \n
\n {currentUser.initials}
\n\n \n
\n \n \n {({ getRootProps, getInputProps }) => (\n \n \n\n
\n )}\n \n \n );\n\n const renderFont = (fontName) => {\n const clickHandler = changeFontHandler(signatureFonts[fontName]);\n return (\n \n Drag and drop\n \n Select from folder instead\n \n
\n \n {name}\n
\n \n
\n \n );\n };\n const DrawHere = () => {\n const context = canvas.current.getContext('2d');\n const ratio = Math.max(window.devicePixelRatio || 1, 1);\n\n context.clearRect(0, 0, canvas.current.width, canvas.current.height);\n\n canvas.current.width = canvas.current.offsetWidth * ratio;\n canvas.current.height = canvas.current.offsetHeight * ratio;\n\n context.scale(ratio, ratio);\n setPad(new SignaturePad(canvas.current, { throttle: 0 }));\n };\n return (\n <>\n \n
\n \n
\n )}\n \n
\n \n {error && \n Clear\n \n )}\n {(isActiveSignatureType(signatureTypes.upload) || isActiveSignatureType(signatureTypes.drawing)) && (\n
\n )}\n\n {isActiveSignatureType(signatureTypes.script) && (\n <>\n {!activeScript ? (\n {error}
}\n \n \n
\n {isActiveSignatureType(signatureTypes.drawing) && (\n \n
\n\n {(isActiveSignatureType(signatureTypes.upload) ||\n isActiveSignatureType(signatureTypes.drawing) ||\n isActiveSignatureType(signatureTypes.saved)) &&\n existingSignatureImageUrl && (\n \n \n
\n )}\n {!isActiveSignatureType(signatureTypes.saved) && (\n \n \n
\n \n \n toggleSignatureType(signatureTypes.saved)}\n >\n Cancel\n \n )}\n
\n\n \n
\n )}\n {isActiveSignatureType(signatureTypes.upload) && !image && dropZone}\n \n \n
\n )}\n \n setActiveScript(true)}\n >\n Choose different font style\n \n \n Clear Saved Signature\n \n
\n ) : (\n <>\n \n \n setActiveScript(false)}\n >\n Cancel\n \n \n
\n\n \n {renderFont('bethEllen')}\n {renderFont('dancingScript')}\n {renderFont('dawning')}\n {renderFont('glory')}\n {renderFont('sheppards')}\n
\n\n \n \n
\n \n )}\n \n )}\n\n Create new signature
\n\n {(isActiveSignatureType(signatureTypes.saved) ||\n isActiveSignatureType(signatureTypes.drawing) ||\n isActiveSignatureType(signatureTypes.upload)) && (\n \n toggleSignatureType(signatureTypes.script)}\n >\n Choose font style\n \n
\n )}\n {(isActiveSignatureType(signatureTypes.saved) ||\n isActiveSignatureType(signatureTypes.script) ||\n isActiveSignatureType(signatureTypes.upload)) && (\n \n toggleSignatureType(signatureTypes.drawing)}\n >\n Create signature with mouse or trackpad\n \n
\n )}\n {(isActiveSignatureType(signatureTypes.saved) ||\n isActiveSignatureType(signatureTypes.script) ||\n isActiveSignatureType(signatureTypes.drawing)) && (\n \n toggleSignatureType(signatureTypes.upload)}\n >\n Upload images as a signature\n \n
\n )}\n \n \n \n );\n});\nexport default Index;\n","export const signatureTypes = {\n saved: 'saved',\n script: 'script',\n upload: 'upload',\n drawing: 'drawing',\n};\n\nexport const signatureFonts = {\n bethEllen: 'BethEllen-Regular',\n dancingScript: 'DancingScript-Regular',\n dawning: 'Dawning-Regular',\n glory: 'GiveYouGlory-Regular',\n sheppards: 'MrsSheppards-Regular',\n};\n","import React from 'react';\n\nconst Inclusions = ({ planData }) => {\n return (\n <>\n \n
\n Inclusions
\n\n {planData.map((row, i) => {\n return (\n
\n \n );\n};\n\nexport default Inclusions;\n","import React, { useState } from 'react';\nimport Button from 'components/v2/shared/Button';\nimport Box from 'components/v2/shared/Box';\nimport Shape from 'components/v2/shared/Shape';\nimport { FiChevronDown, FiChevronUp, FiCheck } from 'react-icons/fi';\n\nconst InvoiceDetails = ({ currentUser, invoices }) => {\n const [expandedInvoiceId, setExpandedInvoiceId] = useState(null);\n const options = { day: '2-digit', month: 'short', year: 'numeric' };\n\n const toggleExpand = (invoiceId) => {\n if (expandedInvoiceId === invoiceId) {\n setExpandedInvoiceId(null);\n } else {\n setExpandedInvoiceId(invoiceId);\n }\n };\n\n return (\n <>\n \n
\n );\n })}\n \n
\n \n
\n {row.title}
\n \n
\n \n
\n Invoices
\n \n
\n Sent to {currentUser?.email}
\n \n {invoices.slice(0, 5).map((invoice, index) => (\n \n \n ))}\n
\n \n );\n};\n\nexport default InvoiceDetails;\n","import React, { useState } from 'react';\nimport { FiChevronLeft, FiChevronDown, FiChevronUp, FiCheck } from 'react-icons/fi';\nimport Shape from 'components/v2/shared/Shape';\nimport Box from 'components/v2/shared/Box';\nimport Button from 'components/v2/shared/Button';\nimport List from 'components/v2/shared/List';\n\nconst InvoiceItem = ({ data }) => {\n const [isOpen, setIsOpen] = useState(false);\n const options = { day: '2-digit', month: 'short', year: 'numeric' };\n\n const onOpen = () => {\n setIsOpen((state) => !state);\n };\n\n return (\n \n
\n \n
\n {expandedInvoiceId === invoice.id && (\n \n {}}\n size='small'\n variant='transparent'\n className='!tw-pl-0 tw-font-sans tw-text-sm !tw-font-semibold !tw-text-black'\n >\n {new Date(invoice?.paid_at).toLocaleDateString('en-US', options)}\n \n
\n \n {}}\n variant='transparent'\n className='!tw-pl-0 tw-font-sans tw-text-sm !tw-font-semibold !tw-text-black'\n >\n ${invoice?.total} {invoice?.currency?.toUpperCase()}\n \n
\n \n {\n window.open(invoice.receipt_link, '_blank');\n }}\n variant='transparent'\n className='tw-font-sans tw-text-xs !tw-font-medium tw-text-teal-500'\n >\n Download\n \n
\n \n {expandedInvoiceId === invoice.id ? (\n toggleExpand(invoice.id)}\n />\n ) : (\n toggleExpand(invoice.id)}\n />\n )}\n
\n \n
\n )}\n \n {}}\n size='small'\n variant='transparent'\n className='!tw-pl-0 tw-font-sans tw-text-sm !tw-font-medium !tw-text-black'\n >\n Ref: {invoice?.number}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n Paid
\n \n
\n \n
\n {isOpen && (\n \n {}}\n size='small'\n variant='transparent'\n className='!tw-pl-0 tw-font-sans tw-text-sm !tw-font-semibold !tw-text-black'\n >\n {new Date(data?.paid_at).toLocaleDateString('en-US', options)}\n \n
\n \n {}}\n size='small'\n variant='transparent'\n className='!tw-pl-0 tw-font-sans tw-text-sm !tw-font-semibold !tw-text-black'\n >\n ${data?.total} {data?.currency?.toUpperCase()}\n \n
\n \n {\n window.open(data.receipt_link, '_blank');\n }}\n variant='transparent'\n className='tw-font-sans tw-text-xs !tw-font-medium tw-text-teal-500'\n >\n Download\n \n
\n \n {isOpen ? (\n onOpen()}\n />\n ) : (\n onOpen()}\n className={`tw-h-5 tw-w-5 tw-cursor-pointer !tw-text-gray-700 tw-duration-100`}\n />\n )}\n
\n \n
\n )}\n \n {}}\n size='small'\n variant='transparent'\n className='!tw-pl-0 tw-font-sans tw-text-sm !tw-font-medium !tw-text-black'\n >\n Ref: {data?.number}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n Paid
\n \n
\n \n \n Billing & Invoices\n \n
\n Invoice history
\n \n
\n \n
\n Invoices
\n \n
\n \n Sent to {currentUser.email}\n
\n \n
\n \n );\n};\nexport default InvoiceHistory;\n","import React from 'react';\nimport Box from 'components/v2/shared/Box';\nimport Button from 'components/v2/shared/Button';\n\nconst OrderOverview = ({ product, taxData, coupon }) => {\n \n const getCountryCode = () => {\n const countrys = taxData?.jurisdiction.split(\" \");\n\n const initials = countrys.map(country => country.charAt(0).toUpperCase());\n return initials;\n }\n\n const getTaxAmount= () => {\n return (product.price - getCouponAmount()) * (taxData.percentage / 100);\n }\n\n const getCouponAmount = () => {\n if(coupon){\n if(coupon?.amount_off) {\n return coupon.amount_off;\n }else if(coupon?.percent_off) {\n return coupon?.percent_off / 100 * product.price;\n }\n }\n return 0;\n }\n\n const getCouponPercent = () => {\n if(coupon){\n if(!coupon?.amount_off) {\n return `${coupon?.percent_off}%`;\n }\n }\n return '';\n }\n\n const getTotalAmount = () => {\n return ((product.price) + getTaxAmount()) - getCouponAmount();\n }\n\n return (\n <>\n Order overview
\n\n {}} onRemove={function noRefCheck() {}} className='!tw-py-2'>\n \n
\n\n \n
\n \n
\n Plan
\n \n
\n {product.name}
\n \n {}} onRemove={function noRefCheck() {}} className='!tw-py-2'>\n \n
\n \n
\n \n
\n Due today
\n \n First payment will be taken immediately, then yearly on the 5th of July. Charged in USD.\n
\n\n
\n ${product.price}
\n \n \n \n
\n\n \n
\n \n
\n Taxes ({getCountryCode()} {taxData.percentage}%)
\n \n
\n ${getTaxAmount().toFixed(2)}
\n \n {}} className='!tw-py-2'>\n \n
\n \n
\n \n
\n Coupon discount
\n {getCouponPercent()}
\n \n
\n ${getCouponAmount().toFixed(2)}
\n \n {}} className='!tw-py-2'>\n \n
\n \n );\n};\n\nexport default OrderOverview;\n","import React, { useContext, useState, useEffect } from 'react';\nimport Checkbox from 'components/v2/shared/Checkbox';\nimport Button from 'components/v2/shared/Button';\nimport Label from '../shared/Label/Label';\nimport { useStripe, useElements, CardNumberElement, CardCvcElement, CardExpiryElement } from '@stripe/react-stripe-js';\nimport axios from 'axios';\nimport { getAxiosHeaders } from '../../../utils/getHeaders';\nimport Spinner from 'components/v2/shared/Spinner';\nimport Modal from 'components/v2/shared/Modal';\nimport Alert from 'components/v2/shared/Alert';\nimport { Severity } from '../shared/Toast';\nimport { ToastContext } from 'contexts/v2/ToastContext';\nimport { useCurrentUserProfileQuery } from 'data/v2/queries/CurrentUserProfileQuery';\n\nconst CustomTextField = ({ label, element }) => {\n return (\n \n
\n \n
\n Total
\n \n
\n ${getTotalAmount().toFixed(2)}
\n \n \n
\n );\n};\n\nconst PaymentForm = ({ onClose, company, onAddPayment }) => {\n const stripe = useStripe();\n const elements = useElements();\n const onCancelPayment = () => {\n onClose(false);\n };\n const [isChecked, setChecked] = useState(false);\n const [isLoading, setLoading] = useState(false);\n const { setToastInfo } = useContext(ToastContext);\n const [alert, setAlert] = useState({ display: false, isValid: false });\n const [loadingStripe, setLoadingStripe] = useState(true);\n const onChangePrimaryCard = () => {\n setChecked((state) => !state);\n };\n\n useEffect(() => {\n if (stripe && elements) {\n setLoadingStripe(false);\n }\n }, [stripe, elements]);\n\n const user = useCurrentUserProfileQuery();\n\n const checkIfCardExist = async (paymentId) => {\n if (user?.data) {\n const header = { Authorization: `Bearer ${ENV['STRIPE_SECRET']}` };\n try {\n const paymentResult = await axios.get(`${ENV['STRIPE_API']}/payment_methods/${paymentId}`, { headers: header });\n\n const newCardFingerPrint = paymentResult.data.card.fingerprint;\n\n const customerResult = await axios.get(`${ENV['STRIPE_API']}/customers`, {\n headers: header,\n params: { email: user.data.currentUser.email },\n });\n const customerId = customerResult.data.data[0].id;\n\n const paymentResponse = await axios.get(`${ENV['STRIPE_API']}/payment_methods`, {\n headers: header,\n params: {\n customer: customerId,\n type: 'card',\n },\n });\n\n const userCardList = paymentResponse.data.data;\n\n const duplicate = userCardList.filter((pm) => pm.card.fingerprint === newCardFingerPrint);\n\n if (duplicate.length > 0) {\n return true;\n }\n } catch (err) {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: err.message,\n });\n }\n }\n return false;\n };\n\n const savePaymentMethod = async (paymentMethod) => {\n const payload = {\n payment_method: paymentMethod.id,\n is_primary: isChecked,\n };\n\n try {\n const response = await axios.post(`/${company.slug}/payment_methods/`, payload, getAxiosHeaders());\n\n onAddPayment(response.data);\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: `Payment method has been successfully added.`,\n });\n } catch (err) {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: err.message,\n });\n }\n onClose();\n setLoading(false);\n };\n\n const handleAdd = () => {\n setLoading(true);\n const cardElement = elements.getElement(CardNumberElement);\n const handleResult = async (result) => {\n if (result.error) {\n setLoading(false);\n onClose();\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: result.error.message,\n });\n } else {\n let exist = await checkIfCardExist(result.paymentMethod.id);\n if (!exist) {\n savePaymentMethod(result.paymentMethod);\n } else {\n setLoading(false);\n setAlert({\n display: true,\n isValid: false,\n });\n }\n }\n };\n\n stripe\n .createPaymentMethod({\n type: 'card',\n card: cardElement,\n })\n .then(handleResult);\n };\n\n return (\n <>\n {loadingStripe ? (\n \n {element}\n
\n \n
\n ) : (\n \n
\n )}\n Add payment method
\n\n
\n \n
\n \n
\n {alert.display && !alert.isValid && (\n \n
\n )}\n \n
\n \n
\n \n {\n handleAdd();\n }}\n size='large'\n variant='purple'\n >\n Add\n \n
\n \n \n Cancel\n \n
\n \n
\n \n
\n \n
\n \n \n Processing, please wait.\n \n
\n \n
\n \n
\n \n
\n \n \n Processing, please wait.\n \n
\n \n {}} className='!tw-bg-gray-100'>\n
\n \n \n \n \n \n {data.primary && (\n
\n {alert.display && !alert.isValid && (\n \n {}}\n size='small'\n variant='transparent'\n className='!tw-pl-0 tw-font-sans tw-text-xs !tw-font-medium !tw-text-black'\n >\n Primary\n \n
\n )}\n \n setEditPayment(true)}\n size='small'\n variant='transparent'\n className='tw-font-sans tw-text-xs !tw-font-medium !tw-text-teal-500'\n >\n Edit\n \n {['xs', 'sm', 'md'].includes(breakpoint) && (\n
\n onClickToDelete()} className='tw-text-gray-700'>\n
\n )}\n \n
\n )}\n \n
\n \n onClickToDelete()}\n className='tw-absolute tw-right-0 tw-top-2.5 tw-text-gray-700 sm:tw-col-span-1'\n >\n
\n )}\n \n
\n {['lg', 'xl', '2xl'].includes(breakpoint) && (\n \n
\n \n 
\n
\n \n {['xs', 'sm', 'md'].includes(breakpoint)\n ? `xxxx ${data.last_digits}`\n : `xxxx xxxx xxxx ${data.last_digits}`}\n
\n \n {data.exp_month} / {data.exp_year.toString().slice(-2)}\n
\n \n
\n Delete payment method
\n \n Are you sure you want to delete this payment method?\n
\n\n \n \n Yes, delete\n \n {\n setDeletePayment(false);\n }}\n >\n No, keep\n \n
\n \n
\n Edit payment method
\n \n
\n \n \n
\n \n {['xs', 'sm', 'md'].includes(breakpoint)\n ? `xxxx ${data.last_digits}`\n : `xxxx xxxx xxxx ${data.last_digits}`}\n
\n \n
\n \n \n setExpiryMonth(data.value)}\n options={months}\n value={expiryMonth}\n placeholder={data.exp_month}\n listBorder\n />\n
\n \n \n setExpiryYear(data.value)}\n options={years}\n value={expiryYear}\n placeholder={data.exp_year}\n listBorder\n />\n
\n \n onClickEdit()}\n label='Primary Card'\n className='!tw-h-8 !tw-w-8'\n labelClass='!tw-text-xs !tw-font-semibold'\n size='large'\n />\n {editAlert.display && !editAlert.isValid && (\n
\n \n
\n )}\n \n
\n \n editPaymentMethod()}\n size='large'\n variant='purple'\n >\n Save\n \n
\n \n setEditPayment(false)}\n size='large'\n variant='lavander'\n >\n Cancel\n \n
\n \n
\n \n
\n\n \n
\n \n \n Full invoice history\n \n
\n \n
\n Your plan
\n\n
\n \n *We will need to verify your status after sign up.\n
\n\n \n
\n \n \n
\n \n {!isPlanCancelled && (\n
\n \n {product?.name}\n
\n\n
\n {!isPlanCancelled && (\n \n ${product?.price} {product?.currency?.toUpperCase()} / {product?.interval}\n
\n\n
\n )}\n {isPlanCancelled && (\n \n {product.interval}ly subscription, next billed {subscription.deactivated_at}\n
\n\n
\n )}\n \n This plan will expire in 30 days, on {subscription.deactivated_at}\n
\n\n
\n\n \n Prices are per {product.interval} / per boardspace, paid {product.interval}.Exclude VAT.\n
\n\n
\n \n
\n \n setToSeeInclusion(true)}\n size='small'\n variant='transparent'\n className={clsx('!tw-pl-0 tw-font-sans tw-text-xs !tw-font-medium', {\n '!tw-text-teal-500': !isPlanCancelled,\n '!tw-text-orange-600': isPlanCancelled,\n })}\n >\n See inclusions\n \n
\n \n {}\n : () => {\n setToCancelPlan((prev) => (prev = !prev));\n }\n }\n size='small'\n variant='transparent'\n className='tw-font-sans tw-text-xs !tw-font-medium !tw-text-black'\n >\n {isPlanCancelled && (\n \n Select Plan\n \n )}\n {!isPlanCancelled && Cancel Plan}\n \n
\n \n
\n {payments.map((payment, index) => {\n return (\n \n
\n \n {}}\n size='small'\n variant='transparent'\n className='!tw-pl-0 tw-font-sans tw-text-sm !tw-font-semibold !tw-text-black'\n >\n Payment method (s)\n \n
\n \n \n Add payment method\n \n
\n \n
\n ) : null}\n \n
\n \n )}\n\n {isActive && !loading && data?.currentUser && (\n \n \n See full invoice history\n \n
\n \n
\n \n
\n {product?.name}
\n \n ${product?.price} {product?.currency?.toUpperCase()} / {product?.interval}\n
\n \n Inclusions\n
\n \n {inclusions.map((row, i) => {\n return (\n
\n \n
\n );\n })}\n {row.title}
\n \n
\n \n Are you sure you want to cancel this plan?\n
\n \n You will continue to have full access to Shaparency until the end of the current billing perios\n
\n \n If you cancel, this plan will expire in 30 days on {getToExpDate()}\n
\n \n setconfirmCancelPlan(e.target.value)}\n placeholder='CANCEL'\n size='regular'\n value={confirmCancelPlan}\n />\n
\n \n {\n handleCancelPlan();\n }}\n isDisabled={confirmCancelPlan !== 'CANCEL'}\n >\n Yes, cancel plan\n \n {\n setToCancelPlan(false);\n }}\n >\n No, keep plan\n \n
\n \n \n
\n );\n};\n\nconst PurchasePlan = ({ company, onCardDetailsDone, onAddCoupon, product, taxData }) => {\n const [alert, setAlert] = useState({ display: false, isValid: false });\n const [couponCode, setCouponCode] = useState('');\n const [coupon, setCoupon] = useState(null);\n const elements = useElements();\n\n useEffect(() => {\n const cardNumberElement = elements?.getElement('cardNumber');\n const cardCvcElement = elements?.getElement('cardCvc');\n const cardExpiryElement = elements?.getElement('cardExpiry');\n\n let isCardNumberComplete = false;\n let isCvcComplete = false;\n let isExpiryComplete = false;\n\n const handleInputChange = (e) => {\n switch (e.elementType) {\n case 'cardNumber':\n e.complete ? isCardNumberComplete = true : isCardNumberComplete = false;\n break;\n case 'cardCvc':\n e.complete ? isCvcComplete = true : isCvcComplete = false;\n break;\n case 'cardExpiry':\n e.complete ? isExpiryComplete = true : isExpiryComplete = false;\n }\n\n if (isCardNumberComplete && isCvcComplete && isExpiryComplete) {\n onCardDetailsDone(elements.getElement(CardNumberElement));\n } else {\n onCardDetailsDone(null);\n }\n };\n\n if (cardNumberElement && cardCvcElement && cardExpiryElement) {\n cardNumberElement.addEventListener('change', handleInputChange);\n cardCvcElement.addEventListener('change', handleInputChange);\n cardExpiryElement.addEventListener('change', handleInputChange);\n }\n }, [elements]);\n\n const handleCouponInputChange = (e) => {\n setCouponCode(e.target.value);\n };\n\n const handleApplyClick = async () => {\n const result = await axios.get(`/${company.slug}/subscriptions/verify_promotion_code?promotion_code=${couponCode}`);\n\n if (result?.data) {\n onAddCoupon(couponCode);\n setCoupon(result.data);\n setAlert({\n display: true,\n isValid: true,\n });\n } else {\n setAlert({\n display: true,\n isValid: false,\n });\n }\n };\n\n const removeCoupon = () => {\n setAlert({\n display: false,\n isValid: false,\n });\n setCouponCode('');\n onAddCoupon('');\n setCoupon(null);\n }\n\n return (\n <>\n \n {element}\n
\n \n
\n Purchase plan with Credit Card
\n\n
\n \n
\n <>\n \n \n
\n {alert.display ? (\n alert.isValid ? (\n \n removeCoupon()}\n />\n )}\n \n Apply\n \n
\n \n
\n ) : (\n \n
\n )\n ) : null}\n \n\n \n
\n \n );\n};\n\nexport default PurchasePlan;\n","import React, { useState, useEffect, useContext } from 'react';\nimport Button from 'components/v2/shared/Button';\nimport Heading from 'components/v2/shared/Heading';\nimport Modal from 'components/v2/shared/Modal';\nimport Spinner from 'components/v2/shared/Spinner';\nimport Inclusions from './Inclusions';\nimport PurchasePlan from './PurchasePlan';\nimport { useStripe } from '@stripe/react-stripe-js';\nimport { Severity } from '../shared/Toast';\nimport { ToastContext } from 'contexts/v2/ToastContext';\nimport { getAxiosHeaders } from '../../../utils/getHeaders';\nimport axios from 'axios';\n\nconst PlanDetails = ({ data, onClick, company, taxData, planData, cancelPurchase }) => {\n const [isActiveInclusions, setActiveInclusions] = useState(false);\n const [isActivePurchasePlan, setActivePurchasePlan] = useState(false);\n const [isLoading, setLoading] = useState(false);\n const stripe = useStripe();\n const [cardElement, setCardElemet] = useState(null);\n const [couponCode, setCouponCode] = useState(null);\n const { setToastInfo } = useContext(ToastContext);\n const [toCancelPurchase, setToCancelPurchase] = useState(false);\n\n const handleOnClickInclusions = () => {\n setActiveInclusions(true);\n setActivePurchasePlan(false);\n };\n const handleOnClickPurchasePlan = () => {\n setActivePurchasePlan(true);\n setActiveInclusions(false);\n };\n\n const handlePaymentThatRequiresCustomerAction = async ({ subscription, priceId, paymentMethodId }) => {\n if (subscription.status === 'active' || subscription.status === 'trialing') {\n // subscription is active, no customer actions required.\n return { subscription, priceId, paymentMethodId };\n }\n\n const paymentIntent = subscription.latest_invoice.payment_intent;\n\n if (paymentIntent.status === 'requires_action') {\n return await stripe\n .confirmCardPayment(paymentIntent.client_secret, {\n payment_method: paymentMethodId,\n })\n .then((result) => {\n if (result.error) {\n throw result;\n } else {\n if (result.paymentIntent.status === 'succeeded') {\n return {\n priceId: priceId,\n subscription: subscription,\n paymentMethodId: paymentMethodId,\n };\n }\n }\n });\n } else {\n return { subscription, priceId, paymentMethodId };\n }\n };\n\n const handleRequiresPaymentMethod = ({ subscription, paymentMethodId, priceId }) => {\n if (subscription.status === 'active' || subscription.status === 'trialing') {\n // subscription is active, no customer actions required.\n return { subscription, priceId, paymentMethodId };\n } else if (subscription.latest_invoice.payment_intent.status === 'requires_payment_method') {\n throw new Error('Your card was declined.');\n } else {\n return { subscription, priceId, paymentMethodId };\n }\n };\n\n\n const createSubscription = async (paymentMethod) => {\n const payload = {\n payment_method: paymentMethod.id,\n company_id: company.id.split('/').pop(),\n product_id: data.id.split('/').pop(),\n promotion_code: couponCode ? couponCode : '',\n };\n try {\n const response = await axios.post(`/${company.slug}/subscriptions/`, payload, getAxiosHeaders());\n\n if(response.data.error){\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: response.data.error.message,\n });\n }else {\n const latest_invoice = {\n id : response.data.latest_invoice.id,\n total : (response.data.latest_invoice.total / 100).toFixed(2),\n paid_at : new Date(),\n number : response.data.latest_invoice.number,\n receipt_link: response.data.latest_invoice.invoice_pdf,\n company_id: company.id.split('/').pop(),\n currency : response.data.latest_invoice.currency\n };\n\n await handlePaymentThatRequiresCustomerAction({\n subscription: response.data,\n paymentMethodId: paymentMethod.id,\n priceId: data.stripeId,\n });\n handleRequiresPaymentMethod({\n subscription: response.data,\n paymentMethodId: paymentMethod.id,\n priceId: data.stripeId,\n });\n onClick(true, latest_invoice);\n }\n } catch (err) {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: err.message,\n });\n }\n }\n\n const completePayment = async () => {\n setLoading(true);\n const { error, paymentMethod } = await stripe.createPaymentMethod({\n type: 'card',\n card: cardElement,\n });\n\n if (error && error != ' ') {\n setLoading(false);\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: error.message,\n });\n } else {\n await createSubscription(paymentMethod);\n }\n setLoading(false);\n };\n\n const onClose = () => {\n setLoading(false);\n onClick(false, null);\n };\n\n useEffect(() => {\n setActiveInclusions(true);\n }, [planData]);\n\n const onCardDetailsDone = (cardNumberElemet) => {\n setCardElemet(cardNumberElemet);\n }\n\n const onAddCoupon = (couponCode) => {\n setCouponCode(couponCode);\n }\n\n return (\n <>\n \n
\n \n Cancel Purchase\n
\n \n Are you sure you want to cancel?\n
\n\n \n
\n\n \n \n Yes, cancel\n \n
\n \n setToCancelPurchase(false)}\n >\n No, continue\n \n
\n \n
\n \n
\n \n ${data?.price} {data.currency?.toUpperCase()} / {data?.interval}\n
\n \n
\n \n \n Inclusions\n \n
\n\n \n \n Purchase plan\n \n
\n {isActiveInclusions &&
\n {isActivePurchasePlan && \n \n Complete payment\n \n
\n \n setToCancelPurchase(true)}\n isFullWidth\n variant='transparent'\n >\n Cancel purchase\n \n
\n \n )}\n \n
\n \n
\n \n
\n \n \n Processing, please wait.\n \n
\n \n \n Cancel\n \n
\n \n
\n );\n};\n\nexport default ConfirmDeleteModal;\n","import React from 'react';\nimport Button from 'components/v2/shared/Button';\nimport Permissions from './Permissions';\nimport StateBadge from 'components/v2/shared/StateBadge';\nimport Modal from 'components/v2/shared/Modal';\nimport { FiX } from 'react-icons/fi';\nimport Heading from 'components/v2/shared/Heading';\n\nconst Users = ({ name, role, isActive }) => {\n return (\n <>\n \n Are you sure you want to delete this role?\n
\n \n All contacts with this role will be reassigned to the following:\n
\n \n \n
\n \n
\n \n
\n \n onConfirm(selected)}\n >\n Yes, delete role\n \n
\n \n \n No, keep role\n \n
\n \n
\n \n );\n};\n\nconst Edit = ({ userModalOpen, onModalChange, selectedRoleData, defaultPermissions, setPermissionsState }) => {\n return (\n \n
\n \n SS\n
\n \n
\n {name}
\n {role}
\n \n \n {isActive ? 'Active' : 'Pending'}\n \n
\n \n \n \n
\n );\n};\n\nexport default Edit;\n","import React, { useEffect, useMemo, useState } from 'react';\nimport Switch from 'components/v2/shared/Switch';\nimport Alert from 'components/v2/shared/Alert';\nimport Heading from 'components/v2/shared/Heading';\nimport { FormattedMessage } from 'react-intl';\nimport { withIntl } from 'utils/v2/intl';\n\nconst SinglePermission = ({ details, isDefault, onClick }) => {\n const [isActive, setIsActive] = useState(details.permitted);\n const handleOnSwitchChange = () => {\n setIsActive((current) => !current);\n onClick(details?.permission?.id ?? details.id, !isActive);\n };\n\n return (\n \n
\n \n {selectedRoleData.users.length} total users\n
\n \n \n View all users\n \n
\n \n
\n \n
\n \n {selectedRoleData.users.map((user) => (\n
\n \n
\n ))}\n \n
\n );\n};\n\nconst Permissions = ({ data, isDefault, defaultPermissions, setPermissionsState }) => {\n useEffect(() => {\n setPermissionsState(data?.permissions ?? defaultPermissions.permissions);\n }, [data]);\n\n const handlePermissionClick = (permissionId, isActive) => {\n setPermissionsState((prev) => {\n const newState = [...prev];\n const index = newState.findIndex((s) => s.id === permissionId);\n newState[index] = { ...newState[index], permitted: isActive };\n\n return newState;\n });\n };\n\n const sortPermissionGroup = (groups) => {\n const sortedGroups = { ...groups };\n Object.keys(sortedGroups).forEach((key) => {\n sortedGroups[key].sort((a, b) => {\n return a.permission.order < b.permission.order ? -1 : a.permission.order > b.permission.order ? 1 : 0;\n });\n });\n\n return sortedGroups;\n };\n\n const permissionGroup = useMemo(\n () => ({\n 'Company Settings': data?.permissions.filter((p) =>\n ['company', 'subscription', 'chat'].includes(p.permission.resource)\n ),\n 'Contact & Roles': data?.permissions.filter((p) =>\n ['access_role', 'contact_group', 'contact'].includes(p.permission.resource)\n ),\n Meetings: data?.permissions.filter((p) => ['meeting'].includes(p.permission.resource)),\n Documents: data?.permissions.filter((p) => ['document'].includes(p.permission.resource)),\n Tasks: data?.permissions.filter((p) => ['task'].includes(p.permission.resource)),\n Minutes: data?.permissions.filter((p) => ['minute'].includes(p.permission.resource)),\n Voting: data?.permissions.filter((p) => ['vote'].includes(p.permission.resource)),\n SmartSign: data?.permissions.filter((p) => ['smart_sign'].includes(p.permission.resource)),\n }),\n [data]\n );\n\n const defaultPermissionGroup = useMemo(\n () => ({\n 'Company Settings': defaultPermissions?.permissions\n .filter((p) => ['company', 'subscription', 'chat'].includes(p.resource))\n .map((permission) => ({\n permission,\n permitted: false,\n })),\n 'Contact & Roles': defaultPermissions?.permissions\n .filter((p) => ['access_role', 'contact_group', 'contact'].includes(p.resource))\n .map((permission) => ({\n permission,\n permitted: false,\n })),\n Meetings: defaultPermissions?.permissions\n .filter((p) => ['meeting'].includes(p.resource))\n .map((permission) => ({\n permission,\n permitted: false,\n })),\n Documents: defaultPermissions?.permissions\n .filter((p) => ['document'].includes(p.resource))\n .map((permission) => ({\n permission,\n permitted: false,\n })),\n Tasks: defaultPermissions?.permissions\n .filter((p) => ['task'].includes(p.resource))\n .map((permission) => ({\n permission,\n permitted: false,\n })),\n Minutes: defaultPermissions?.permissions\n .filter((p) => ['minute'].includes(p.resource))\n .map((permission) => ({\n permission,\n permitted: false,\n })),\n Voting: defaultPermissions?.permissions\n .filter((p) => ['vote'].includes(p.resource))\n .map((permission) => ({\n permission,\n permitted: false,\n })),\n SmartSign: defaultPermissions?.permissions\n .filter((p) => ['smart_sign'].includes(p.resource))\n .map((permission) => ({\n permission,\n permitted: false,\n })),\n }),\n [defaultPermissions]\n );\n\n return (\n \n
\n {details.permission.description}
\n\n
\n \n
\n );\n};\n\nexport default withIntl(Permissions);\n","import React, { useState } from 'react';\nimport Box from 'components/v2/shared/Box';\nimport { FiX } from 'react-icons/fi';\nimport ConfirmDeleteModal from './ConfirmDeleteModal';\nimport Modal from 'components/v2/shared/Modal';\n\nconst RoleList = ({ roles, selectedRoleIndex, onClickRole, onDeleteRole }) => {\n const [isDeleteRoleModalOpen, setIsDeleteRoleModalOpen] = useState(false);\n const [roleToBeDeleted, setRoleToBeDeleted] = useState(null);\n\n const handleDeleteClick = (roleId) => {\n setRoleToBeDeleted(roleId);\n setIsDeleteRoleModalOpen(true);\n };\n\n const handleDeleteRole = (replacementRoleId) => {\n onDeleteRole(roleToBeDeleted, replacementRoleId);\n setIsDeleteRoleModalOpen(false);\n };\n\n return (\n \n
\n )}\n \n {Object.keys(\n data?.permissions ? sortPermissionGroup(permissionGroup) : sortPermissionGroup(defaultPermissionGroup)\n ).map((group) => (\n \n \n ))}\n
\n {group}
\n {data?.permissions\n ? permissionGroup[group].map((details) => (\n \n
\n ))\n : defaultPermissionGroup[group]?.map((details) => (\n \n
\n ))}\n \n setIsDeleteRoleModalOpen(false)} centered size='xl'>\n setIsDeleteRoleModalOpen(false)}\n onConfirm={handleDeleteRole}\n replacementRoleList={roles.filter((role) => role.id !== roleToBeDeleted)}\n />\n \n {roles.map((item, i) => (\n
\n ))}\n \n );\n};\n\nexport default RoleList;\n","import React, { useState, useEffect, useContext } from 'react';\nimport FreeTrialBadge from 'images/icons/free-trial-14.svg';\nimport Heading from 'components/v2/shared/Heading';\nimport Switch from 'components/v2/shared/Switch';\nimport Button from 'components/v2/shared/Button';\nimport Box from 'components/v2/shared/Box';\nimport PlanDetails from 'components/v2/planDetails';\nimport PaymentSuccess from 'components/v2/planDetails/PaymentSuccess';\nimport Spinner from 'components/v2/shared/Spinner';\nimport Alert from 'components/v2/shared/Alert';\nimport { FiChevronRight } from 'react-icons/fi';\nimport { loadStripe } from '@stripe/stripe-js';\nimport { Elements } from '@stripe/react-stripe-js';\nimport { ToastContext } from 'contexts/v2/ToastContext';\nimport Toast, { Severity } from '../shared/Toast';\nimport clsx from 'clsx';\nimport axios from 'axios';\nimport { useProductsQuery } from 'data/v2/queries/ProductsQuery';\nimport { getAxiosHeaders } from '../../../utils/getHeaders';\n\nconst BillingInvoices = ({ currentCompany }) => {\n const stripePromise = loadStripe(ENV['STRIPE_KEY']);\n const [isIndexPlan, setIndexPlan] = useState(0);\n const [isActive, setActive] = useState(false);\n const [isActivePaymentSuccess, setActivePaymentSuccess] = useState(false);\n const [isActivePlan, setActivePlan] = useState(false);\n const [isLoading, setLoading] = useState(false);\n const [planData, setPlanData] = useState([]);\n const [planPrices, setPlanPrices] = useState([]);\n const [taxRates, setTaxRates] = useState(null);\n const [selectedPlanData, setSelectedPlanData] = useState({});\n const [alert, setAlert] = useState({ display: false, isValid: false });\n const [errMsg, setErrorMsg] = useState('');\n const [currentSubscription, setCurrentSubscription] = useState(null);\n const { toastInfo } = useContext(ToastContext);\n const [invoices, setInvoices] = useState([]);\n const [inclusionData] = useState([\n {\n title: 'Board portal',\n },\n {\n title: 'Meeting space',\n },\n {\n title: 'Calendar integration',\n },\n {\n title: 'Document storage',\n },\n {\n title: 'Minute taking',\n },\n {\n title: 'Voting',\n },\n {\n title: 'Taskboard',\n },\n {\n title: 'Electronic signature tool',\n },\n {\n title: 'Chat',\n },\n {\n title: 'Contacts & groups',\n },\n {\n title: 'Multi-company access',\n },\n ]);\n\n const handleOnSwitchChange = (e) => {\n setActive((current) => !current);\n setProductPrices(planData, e);\n };\n\n const setProductPrices = (products, isPerYear) => {\n let productList = [];\n if (isPerYear) {\n productList = products.filter((pro) => pro.interval === 'year');\n } else {\n productList = products.filter((pro) => pro.interval === 'month');\n }\n\n setPlanPrices(productList);\n setSelectedPlanData(productList[0]);\n setIndexPlan(0);\n };\n\n const onClickPlan = (data, index) => {\n setActivePlan(true);\n setSelectedPlanData(data);\n setIndexPlan(index);\n };\n const onClickPaymentSuccess = async (val, latest_invoice) => {\n if (val) {\n let invoiceList = [...invoices];\n invoiceList.unshift(latest_invoice);\n setInvoices(invoiceList);\n }\n await getCurrentSubscription();\n setActivePaymentSuccess(val);\n };\n\n const loadInvoices = async () => {\n try {\n const response = await axios.get(\n `/${currentCompany.slug}/invoices?id=${currentCompany.id.split('/').pop()}`,\n getAxiosHeaders()\n );\n const invoiceList = response.data.map((invoice) => {\n return { ...invoice, total: parseFloat(invoice.total).toFixed(2) };\n });\n\n setInvoices(invoiceList.reverse());\n } catch (err) {\n setInvoices([]);\n }\n };\n\n const getTaxRate = async () => {\n const header = { Authorization: `Bearer ${ENV['STRIPE_SECRET']}` };\n try {\n const taxesResponse = await axios.get(`${ENV['STRIPE_API']}/tax_rates/${ENV['STRIPE_TAX_RATE']}`, {\n headers: header,\n });\n setTaxRates(taxesResponse.data);\n return true;\n } catch (err) {\n setErrorMsg(err.message);\n setAlert({\n display: true,\n isValid: false,\n });\n return false;\n }\n };\n\n const getCurrentSubscription = async () => {\n if (productList?.data) {\n try {\n const response = await axios.get(`/${currentCompany.slug}/profile/reload_subscription`, getAxiosHeaders());\n\n if (response.data.status === 'active') {\n setCurrentSubscription(response.data);\n\n let products = productList.data.products;\n let currProduct = response.data.product_id;\n\n setSelectedPlanData(products.find((product) => currProduct === Number(product.id.split('/').pop())));\n setActivePaymentSuccess(true);\n }\n } catch (err) {\n setCurrentSubscription(null);\n }\n }\n };\n\n const productList = useProductsQuery();\n\n const getProducts = async () => {\n setLoading(true);\n const hasTaxData = await getTaxRate();\n\n if (productList?.data && hasTaxData) {\n setPlanData([]);\n setPlanPrices([]);\n\n let products = productList.data.products.filter((product) => !product.deprecated);\n setPlanData(products);\n setPlanPrices(products);\n setProductPrices(products);\n await loadInvoices();\n await getCurrentSubscription();\n }\n setLoading(false);\n };\n\n useEffect(() => {\n setActivePlan(true);\n getProducts();\n }, [productList]);\n\n const handleCancelPurchase = async () => {\n setActivePlan(false);\n setIndexPlan(-1);\n };\n\n return (\n <>\n \n \n
\n \n \n onClickRole(item, i)}\n >\n
\n \n
\n \n {item.role}\n
\n \n
\n \n {item.isDefault && 'Default'}\n
\n \n
\n \n {`${item.users.length} users`}\n
\n \n {item.isDeletable && (\n handleDeleteClick(item.id)} />\n )}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n We've made pricing simple with our all inclusive features. Charities can take advantage of our\n special discounts.\n \n
\n \n
\n \n
\n {alert.display && !alert.isValid && (\n \n Select plan below\n
\n\n
\n Pricing by
\n \n {\n handleOnSwitchChange(e);\n }}\n variant='purple-bg'\n isChecked={isActive}\n />\n
\n \n
\n \n Prices are per month / per boardspace, paid monthly. Exclude VAT.\n
\n\n
\n )}\n {planPrices.length < 1 && isLoading && (\n \n
\n )}\n {planPrices.length > 0 && !isLoading && (\n \n {planPrices.map((row, i) => {\n return (\n
\n )}\n \n {\n onClickPlan(row, i);\n }}\n isSelected={isIndexPlan === i}\n className='tw-cursor-pointer !tw-rounded !tw-py-6'\n variant='teal'\n >\n
\n );\n })}\n \n
\n \n \n
\n {row.name}
\n \n
\n \n ${row?.price} {row.currency?.toUpperCase()} / {row?.interval}\n
\n \n
\n \n {}}\n size='large'\n variant='transparent'\n className={clsx('!tw-py-0 !tw-px-0 tw-font-sans !tw-text-xs tw-font-medium', {\n '!tw-text-teal-600': isIndexPlan === i,\n })}\n >\n See inclusions\n \n
\n \n {}}\n size='large'\n variant='transparent'\n className={clsx('!tw-py-0 !tw-px-0 tw-font-sans !tw-text-xs tw-font-medium', {\n '!tw-text-teal-600': isIndexPlan === i,\n })}\n >\n Select plan\n \n
\n \n
\n \n {isActivePlan && planPrices.length > 0 && !isLoading && (\n \n \n )}\n
\n \n \n )}\n {isActivePaymentSuccess && currentSubscription !== null && (\n \n
\n );\n};\n\nexport default CompanyDetail;\n","import React, { useContext, createContext, useRef, useState, useEffect, Fragment } from 'react';\nimport Heading from 'components/v2/shared/Heading';\nimport Button from 'components/v2/shared/Button';\nimport StateBadge from 'components/v2/shared/StateBadge';\nimport Filter from 'components/v2/shared/Filter';\nimport TextInput from 'components/v2/shared/TextInput';\nimport { useCreateContactsMutation } from 'data/v2/mutations/CreateContactsMutation';\nimport Modal, { ModalContext } from 'components/v2/shared/Modal';\nimport ContactIndividual from 'components/v2/contacts/ContactIndividual';\nimport Approval from 'components/v2/contacts/Approval';\nimport clsx from 'clsx';\nimport List from 'components/v2/shared/List';\nimport ContactListItem from '../contacts/ContactListItem';\nimport SearchBar from '../shared/SearchBar';\nimport { ToastContext } from 'contexts/v2/ToastContext';\nimport { useContactsQuery } from 'data/v2/queries/ContactsQuery';\nimport { useSubcommitteesQuery } from '../../subcommittees/data/queries/SubcommitteesQuery';\nimport Toast, { Severity } from '../shared/Toast/Toast';\nimport { MdDelete } from 'react-icons/md';\nimport IconButton from 'components/v2/shared/IconButton';\nimport { wrapMutation } from 'utils/v2/gql';\nimport { HiChevronDown } from 'react-icons/hi2';\nimport { HiChevronUpDown } from 'react-icons/hi2';\nimport { useForm, useFieldArray, Controller } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { z } from 'zod';\nimport Spinner from '../shared/Spinner/Spinner';\nimport { useTailwindBreakpoints } from 'hooks/v2/useTailwindBreakpoints';\n\nexport const SelectedContactContext = createContext();\n\nconst filterItems = [\n { id: 1, name: 'View by A - Z', value: 'first_name ASC, last_name ASC' },\n { id: 2, name: 'View by Z - A', value: 'first_name DESC, last_name DESC' },\n { id: 3, name: 'View by status', value: 'status DESC' },\n { id: 4, name: 'View by role', value: 'access_role_id DESC' },\n];\n\nconst inviteFormSchema = z.object({\n invite: z.array(\n z.object({\n email: z\n .string({\n required_error: 'Email address is required',\n invalid_type_error: 'Invalid value',\n })\n .email({ message: 'Invalid email address' }),\n accessRoleId: z.string(),\n subcommitteeId: z.string().nullable().optional(),\n })\n ),\n});\n\nconst Contacts = ({ roles, contactRequests }) => {\n let searchTimeout;\n const PER_PAGE = 10;\n const { toastInfo, setToastInfo } = useContext(ToastContext);\n const [breakpoint] = useTailwindBreakpoints();\n const [filter, setFilter] = useState(filterItems[0]);\n const [search, setSearch] = useState('');\n const [pageData, setPageData] = useState(() => ({\n pageTotal: 1,\n perPage: PER_PAGE,\n page: 1,\n }));\n const [contacts, setContacts] = useState(() => ({\n contactRequests,\n items: [],\n }));\n const {\n data: contactsData,\n loading,\n fetchMore,\n refetch,\n } = useContactsQuery({\n variables: { page: pageData.page, limit: PER_PAGE, order: filter.value, search },\n });\n\n const { data: subcommitteeData, refetch: subcommitteeRefetch } = useSubcommitteesQuery();\n const [isIndividual, setIndividual] = useState(false);\n const [selectedContact, setSelectedContact] = useState({});\n const [modalState, setModalState] = useState({\n inviteModal: false,\n archiveModal: false,\n reassignModal: false,\n });\n const [createContacts] = useCreateContactsMutation();\n\n useEffect(() => {\n if (contactsData) {\n setCompanyContacts();\n setPageData((prev) => ({\n ...prev,\n pageTotal:\n contactsData.companyContactCount > PER_PAGE ? Math.ceil(contactsData.companyContactCount / PER_PAGE) : 1,\n }));\n }\n }, [contactsData]);\n\n const roleFilterItems = roles?.map((role) => ({\n id: role.id,\n name: role.name,\n }));\n\n const subcommitteeFilterItems = subcommitteeData?.currentCompany.subcommittees.map((sc) => ({\n id: sc.id,\n name: sc.name,\n }));\n\n const handlePaginationClick = (page) => {\n setPageData((prev) => ({\n ...prev,\n page,\n }));\n\n fetchMore({\n variables: {\n page,\n limit: PER_PAGE,\n },\n updateQuery: (prevResult, { fetchMoreResult }) => {\n const newEdges = fetchMoreResult.contacts.edges;\n return newEdges.length\n ? {\n contacts: {\n edges: [...newEdges],\n },\n }\n : prevResult;\n },\n });\n };\n\n const getContactItems = () => {\n return contactsData.contacts.edges\n .filter((edge) => !['requested', 'rejected'].includes(edge.node.status))\n .map((c) => {\n c = c.node;\n\n return {\n name: c.name,\n id: c.id,\n isOwner: c.isOwner,\n contactRole: c.contactRole,\n accessRoleId: c.accessRoleId,\n avatarUrl: c.avatarUrl,\n initials: c.initials,\n companyPosition: c.companyPosition,\n status: c.status,\n email: c.email,\n linkedinUrl: c.linkedinUrl,\n phoneNumber: c.phoneNumber,\n address: c.address,\n createdAt: c.createdAt,\n daysSinceCreation: c.daysSinceCreation,\n lastActiveDate: c.lastActiveDate,\n daysSinceActive: c.daysSinceActive,\n actionItems: c.actionItems,\n };\n });\n };\n\n const setCompanyContacts = () => {\n let companyContacts = getContactItems();\n setContacts((prev) => {\n return {\n ...prev,\n items: companyContacts,\n };\n });\n };\n\n const individualRef = useRef(null);\n\n const handleModal = (key, value) => {\n setModalState((prev) => ({ ...prev, [key]: value }));\n };\n\n const onDecide = (id) => {\n setContacts((prev) => {\n return {\n ...prev,\n contactRequests: contacts.contactRequests.filter((c) => c.id !== id),\n };\n });\n };\n\n const onSortSelect = (obj) => {\n const selectedFilter = filterItems.find((item) => item.id == obj.id);\n setFilter(selectedFilter);\n setPageData((prev) => ({\n ...prev,\n page: 1,\n }));\n refetch({ page: 1, limit: PER_PAGE, order: selectedFilter.value });\n };\n\n const InviteContactModal = () => {\n const { control, handleSubmit } = useForm({\n resolver: zodResolver(inviteFormSchema),\n defaultValues: {\n invite: [{ email: '', accessRoleId: null, subcommitteeId: null }],\n },\n });\n const { fields, append, remove } = useFieldArray({\n control,\n name: 'invite',\n });\n const { onClose } = useContext(ModalContext);\n\n const handleAddRow = (e) => {\n e.preventDefault();\n append();\n };\n\n const handleSendInvites = async (data) => {\n try {\n await wrapMutation(\n createContacts,\n {\n variables: {\n input: {\n contacts: data.invite,\n },\n },\n },\n 'createContacts'\n );\n subcommitteeRefetch();\n onClose();\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: `Successfully added ${data.invite.length} new contacts`,\n });\n refetch({ page: 1, limit: PER_PAGE, order: filter.value });\n } catch (error) {\n Object.values(error).forEach((err) => {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: err,\n });\n });\n }\n };\n\n return (\n \n );\n };\n\n const ConfirmReassignModal = () => {\n return (\n \n
\n ) : (\n \n
\n )}\n \n
\n {companyDate && (\n \n setDeleteCompany(true)}\n className='tw-cursor-pointer tw-font-semibold tw-text-red-600 hover:tw-text-red-600'\n >\n Delete\n \n \n \n
\n \n Company created on {companyDate}\n
\n )}\n \n
\n \n \n
\n \n
\n \n Make primary company\n
\n \n
\n \n
\n \n
\n \n
\n Registered details
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n Registered Company Address\n
\n \n
\n \n
\n Website
\n \n
\n \n \n Save\n \n
\n \n
\n );\n };\n\n const RoleList = () => {\n let roles = new Set(contacts?.items.map((m) => m.contactRole));\n roles = [...roles];\n roles = roles.reduce((r, k) => {\n r[`${k.charAt(0).toUpperCase() + k.slice(1)}`] = contacts.items.filter((m) => m.contactRole === k);\n return r;\n }, {});\n\n return Object.keys(roles).map((role, index) => (\n Archive contact
\n \n The contact you are about to archive has \n 1 active action item:\n
\n\n 1. \n Hannah\n
\n\n\n Would you like to reassign this action item to the administrator?\n
\n\n\n
\n \n
\n \n handleModal('reassignModal', false)}\n size='large'\n variant='purple'\n >\n Yes\n \n
\n \n handleModal('reassignModal', false)}\n size='large'\n variant='Lavander'\n >\n No\n \n
\n \n \n \n
\n \n
\n \n
\n {loading ? (\n \n
\n \n handleModal('inviteModal', true)}\n >\n Invite new\n \n
\n \n
\n \n
\n ) : (\n <>\n {contacts?.contactRequests?.length > 0 && (\n \n
\n )}\n \n
\n \n \n Awaiting approval\n \n
\n {contacts.contactRequests.map((c) => (\n \n
\n \n )}\n \n {(filter.id == 1 || filter.id == 2) && (\n
\n \n
\n \n handleModal('inviteModal', false)}\n centered\n size='2xl'\n >\n handleModal('reassignModal', false)}\n centered\n size='xl'\n >\n
\n \n
\n \n \n \n \n
\n \n );\n};\n\nexport default DeleteCompany;\n","import React, { Fragment, useState, useEffect } from 'react';\nimport { Tab, Disclosure } from '@headlessui/react';\nimport { FiChevronRight, FiChevronLeft } from 'react-icons/fi';\nimport clsx from 'clsx';\nimport CompanyDetail from './CompanyDetail';\nimport Subcommittee from './Subcommittee';\nimport BillingInvoices from './BillingInvoices';\nimport RolesPermissions from './RolesPermissions';\nimport Contacts from './Contacts';\nimport Heading from 'components/v2/shared/Heading/';\nimport { withApollo } from 'utils/v2/apollo';\nimport { useCurrentCompanyQuery } from 'data/v2/queries/CurrentCompanyQuery';\nimport { ToastContextProvider } from '../../../contexts/v2/ToastContext';\n\nconst Index = ({ currentUser, address }) => {\n const [listIndex, setListIndex] = useState(0);\n const [isOpen, setIsOpen] = useState(false);\n const [rolesPermissionData, setRolesPermissionData] = useState({\n isRolesSelected: false,\n isRoleEditable: false,\n isNewRole: false,\n isChangeName: false,\n selectedRoleData: {},\n selectedRoleIndex: '',\n roles: [],\n });\n\n const { data, refetch: currentCompanyRefetch } = useCurrentCompanyQuery({\n fetchPolicy: 'no-cache',\n });\n\n useEffect(() => {\n if (data) {\n let accessRoles = data.currentCompany.accessRoles;\n if (accessRoles?.length > 0) {\n setRolesPermissionData((prev) => ({\n ...prev,\n roles: accessRoles.map((a) => {\n return {\n id: a.id,\n role: a.name,\n isDefault: a.isDefault,\n users: a.contacts,\n isDeletable: !a.isDefault,\n permissions: a.rolePermissions,\n };\n }),\n selectedRoleData: {\n ...prev.selectedRoleData,\n permissions: accessRoles[prev.selectedRoleIndex]?.rolePermissions,\n role: accessRoles[prev.selectedRoleIndex]?.name,\n },\n }));\n }\n }\n }, [data]);\n\n const handleSettingsClick = () => {\n setRolesPermissionData((prev) => ({\n ...prev,\n isRolesSelected: false,\n isRoleEditable: false,\n selectedRoleIndex: '',\n isNewRole: false,\n }));\n setIsOpen(false);\n };\n\n const Menu = ({ label }) => {\n return (\n \n Are you sure you want to delete this company?\n
\n \n Once deleted all information of company will be removed permanently.\n
\n\n \n
\n \n \n
\n \n
\n \n \n Yes, delete company\n \n
\n \n \n No, keep company\n \n
\n \n \n
\n \n
\n \n
\n \n
\n
\n\n \n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n \n \n {() => (\n <>\n \n \n \n )}\n \n
\n \n handleSettingsClick()}\n >\n
\n \n
\n \n \n \n \n
\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n onRoleNameChange(false)} size='xl'>\n \n \n <>\n
\n {isRolesSelected && !isNewRole && (\n \n \n \n
\n \n onAddNewRole(true)}\n >\n Add role\n \n
\n \n
\n \n {activeRoles && (\n <>\n
\n \n \n
\n \n {!selectedRoleData.isDefault && (\n onRoleNameChange(true)}\n >\n Change name\n \n )}\n \n Close window\n
\n \n
\n \n )}\n \n \n \n \n {(isNewRole || isRoleEditable) && (\n \n setValue(e.target.value)}\n />\n
\n \n
\n \n
\n )}\n \n );\n};\n\nexport default RolesPermissions;\n","import React, { useState, useContext, useCallback, Fragment, useEffect } from 'react';\nimport { useForm, Controller } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { z } from 'zod';\nimport Heading from 'components/v2/shared/Heading';\nimport TextInput from 'components/v2/shared/TextInput';\nimport SelectInput from 'components/v2/shared/SelectInput';\nimport Button from 'components/v2/shared/Button';\nimport StateBadge from 'components/v2/shared/StateBadge';\nimport { Listbox, Transition } from '@headlessui/react';\nimport { FiChevronRight, FiX, FiInfo } from 'react-icons/fi';\nimport { HiChevronDown } from 'react-icons/hi2';\nimport { getCurrentBreakpoint } from 'helpers/tailwindStyling';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport Label from 'components/v2/shared/Label';\nimport Box from 'components/v2/shared/Box';\nimport Modal from 'components/v2/shared/Modal';\nimport clsx from 'clsx';\nimport Spinner from '../shared/Spinner/Spinner';\nimport Toast, { Severity } from '../shared/Toast';\nimport { ToastContext } from 'contexts/v2/ToastContext';\nimport { useSubcommitteesQuery } from '../../subcommittees/data/queries/SubcommitteesQuery';\nimport { useCreateSubcommittee } from '../../subcommittees/hooks/useCreateSubcommittee';\nimport { useUpdateSubcommittee } from '../../subcommittees/hooks/useUpdateSubcommittee';\nimport { useDeleteSubcommittee } from '../../subcommittees/hooks/useDeleteSubcommittee';\n\nconst InvitedMembers = ({\n accessRoles,\n initials,\n name,\n role,\n email,\n isMember,\n status,\n removeInviteMember,\n removeOutsideInvitee,\n updateInviteeRole,\n isReadOnly,\n index,\n}) => {\n let selectedRole = role ? accessRoles.filter((accessRole) => accessRole.id === role)[0] : accessRoles[0];\n return (\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n \n {isNewRole ? 'Save & create role' : 'Save role'}\n \n
\n \n onAddNewRole(false)}\n variant='transparent'\n >\n Cancel\n \n
\n \n
\n {!isMember && (\n \n
\n \n {initials ? initials : 'SHP'}\n
\n \n \n {email ?? name}\n
\n {selectedRole.name}
\n \n
\n )}\n \n {status && (\n \n {status === 'archived'\n ? 'Archived'\n : status === 'registered'\n ? 'Active'\n : status === 'confirmed'\n ? 'Confirmed'\n : (status === 'invited' || status === 'reinvited')\n ? 'Invited'\n : ''}\n \n )}\n
\n {!isReadOnly && (\n \n {removeOutsideInvitee ? (\n {\n removeOutsideInvitee(index);\n }}\n />\n ) : (\n {\n removeInviteMember(index);\n }}\n />\n )}\n
\n )}\n \n );\n};\n\nconst RoleSelect = ({ items, index, selectedRole, isMember, updateInviteeRole }) => {\n const [selected, setSelected] = useState(selectedRole);\n\n useEffect(() => {\n updateInviteeRole(index, selected, isMember);\n }, [selected]);\n\n return (\n \n \n \n {selected.name}\n \n \n \n \n {items.map((item) => (\n \n `tw-relative tw-select-none tw-p-2 ${active ? 'tw-bg-teal-500 tw-text-white' : 'tw-text-black'}`\n }\n value={item}\n >\n {({ selected }) => (\n <>\n \n {item.name}\n \n \n )}\n \n ))}\n \n \n
\n \n \n Create new subcommittee\n
\n \n \n
\n \n
\n \n );\n};\n\nconst OutsideContactInviteForm = ({ onAddEmail }) => {\n const schema = z.object({\n email: z\n .string({\n required_error: 'Email address is required',\n invalid_type_error: 'Invalid value',\n })\n .email('Invalid email format'),\n });\n\n const { handleSubmit, control } = useForm({\n resolver: zodResolver(schema),\n defaultValues: { email: '' },\n });\n\n return (\n \n );\n};\n\nconst Subcommittee = () => {\n const {\n register,\n resetField,\n handleSubmit,\n formState: { errors },\n } = useForm();\n\n const [groups, setGroups] = useState([]);\n const [isGroupName, setGroupName] = useState('');\n const [isActiveGroupName, setActiveGroupName] = useState(false);\n const [isReadOnly, setReadOnly] = useState(true);\n const [isIndexGroup, setIndexGroup] = useState();\n const [isAddGroup, setIsAddGroup] = useState(false);\n const [isActiveInvitedMember, setActiveInvitedMember] = useState(false);\n const [isInvitedMemberData, setInvitedMemberData] = useState([]);\n const [isOutsideInviteeData, setOutsideInviteeData] = useState([]);\n const [isGroupData, setIsGroupData] = useState([]);\n const [selectedMembers, setSelectedMembers] = useState([]);\n const [groupData, setGroupData] = useState([]);\n const [isAddUser, setAddUser] = useState(false);\n const [isDeleteGroup, setIsDeleteGroup] = useState(false);\n const [isUpdateGroup, setIsUpdateGroup] = useState(true);\n const [confirmDelete, setConfirmDelete] = useState('');\n const { toastInfo, setToastInfo } = useContext(ToastContext);\n const [parentCompanyContacts, setParentCompanyContacts] = useState([]);\n const [accessRoles, setAccessRoles] = useState([]);\n const dimensions = useWindowDimensions();\n const [breakpoint, setBreakpoint] = useState(getCurrentBreakpoint(dimensions.width));\n\n const { data, refetch, loading } = useSubcommitteesQuery({\n fetchPolicy: 'no-cache',\n });\n\n useEffect(() => {\n setBreakpoint(getCurrentBreakpoint(dimensions.width));\n }, [dimensions.width]);\n\n useEffect(() => {\n let groupList = data?.currentCompany?.subcommittees;\n let parentContacts = data?.currentCompany?.contacts;\n setParentCompanyContacts(data?.currentCompany?.contacts);\n setAccessRoles(data?.currentCompany?.accessRoles);\n\n if (groupList?.length > 0) {\n setGroupData([]);\n for (let group of groupList) {\n let groupObj = { ...group, groupName: group.name };\n setGroupData((prevVal) => [...prevVal, groupObj]);\n }\n }\n\n if (parentContacts?.length > 0) {\n let contactList = parentContacts.map((contact) => {\n return { ...contact, label: contact.name, value: contact.name, initials: contact.initials };\n });\n setGroups(contactList);\n }\n }, [data]);\n const companyId = data?.currentCompany?.id;\n const onError = useCallback((errors) => {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: errors[0].message,\n });\n }, []);\n const { createSubcommittee } = useCreateSubcommittee({ onError, companyId });\n const { updateSubcommittee } = useUpdateSubcommittee({ onError });\n const { deleteSubcommittee } = useDeleteSubcommittee({ onError });\n\n const onSubmit = async (subcom) => {\n const groupName = subcom.groupName;\n if (groupName) {\n const invitedMembers = [...isInvitedMemberData, ...isOutsideInviteeData].map((member) => ({\n email: member.email,\n accessRoleId: member.accessRoleId,\n }));\n\n try {\n const result = await createSubcommittee({\n name: groupName,\n contacts: invitedMembers,\n })\n setGroupData((groups) => [\n ...groups,\n {\n id: result.data.createSubcommittee.subcommittee.id,\n groupName: groupName,\n contacts: invitedMembers.map((contact) => {\n return { ...contact,\n initials: contact.initials ? contact.initials : 'shp',\n name: contact.name ? contact.name : contact.email,\n status: contact.status ? contact.status : 'invited',\n }})\n },\n ]);\n setIsAddGroup(false);\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: 'Created successfully',\n });\n } catch (error) {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: 'Error creating subcommittee',\n });\n }\n }\n };\n\n const createNewGroup = () => {\n setIsAddGroup(true);\n setReadOnly(false);\n setActiveGroupName(false);\n setIndexGroup(false);\n resetField('groupName');\n setInvitedMemberData([]);\n setOutsideInviteeData([]);\n };\n const onClickGroupName = (data, index) => {\n setInvitedMemberData(data?.contacts);\n setOutsideInviteeData([]);\n setGroupName(data?.groupName);\n setIndexGroup(index);\n setActiveGroupName(true);\n setReadOnly(true);\n setIsAddGroup(false);\n };\n const onClickEdit = (value) => {\n setReadOnly(value);\n setIsUpdateGroup(true);\n };\n const deleteGroup = () => {\n let newGroupData = [...groupData];\n newGroupData.splice(isIndexGroup, 1);\n deleteSubcommittee({ subcommitteeId: groupData[isIndexGroup].id });\n setGroupData(newGroupData);\n setConfirmDelete('');\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: 'Deleted successfully',\n });\n setActiveGroupName(false);\n setIsDeleteGroup(false);\n setInvitedMemberData([]);\n setOutsideInviteeData([]);\n if (newGroupData.length == 0) {\n setIsAddGroup(false);\n }\n };\n const toSet = (array, property) => {\n const seen = new Set();\n const result = [];\n for (const obj of array) {\n const value = obj[property];\n if (!seen.has(value)) {\n seen.add(value);\n result.push(obj);\n }\n }\n return result;\n}\n const onChangeContactGroup = (data) => {\n setSelectedMembers(data);\n };\n const addToContactGroup = (closeMenu) => {\n setActiveInvitedMember(true);\n let newContacts = toSet([...isInvitedMemberData, ...selectedMembers], 'email');\n setInvitedMemberData(newContacts);\n closeMenu();\n };\n\n const updateInviteeRole = (index, selected, isMember) => {\n if (isMember) {\n let newInviteeData = isInvitedMemberData.map((member, i) => {\n if (i === index) {\n return { ...member, accessRoleId: selected.id };\n }\n return member;\n });\n setInvitedMemberData(newInviteeData);\n } else {\n let newInviteeData = isOutsideInviteeData.map((member, i) => {\n if (i === index) {\n return { ...member, accessRoleId: selected.id };\n }\n return member;\n });\n setOutsideInviteeData(newInviteeData);\n }\n };\n\n const removeInviteMember = (index) => {\n let newGroupData = [...isInvitedMemberData];\n newGroupData.splice(index, 1);\n setInvitedMemberData(newGroupData);\n setIsGroupData(newGroupData);\n };\n const removeOutsideInvitee = (index) => {\n const newInviteeData = [...isOutsideInviteeData];\n newInviteeData.splice(index, 1);\n setOutsideInviteeData(newInviteeData);\n };\n const onAddUserChange = (state) => {\n setAddUser(state);\n setReadOnly((prevVal) => (prevVal = !prevVal));\n setIsUpdateGroup(true);\n };\n\n const renderFooter = ({ closeMenu }) => (\n \n );\n const handleUserInput = (e) => {\n setGroupName(e.target.value);\n };\n const onCloseModal = () => {\n setIsDeleteGroup(true);\n };\n const onClose = () => {\n setIsDeleteGroup(false);\n };\n const handleUpdateGroup = () => {\n let groupList = [...groupData];\n let outsideInvitees = isOutsideInviteeData ? [...isOutsideInviteeData] : [];\n const invitedMembers = [...isInvitedMemberData, ...outsideInvitees].map((member) => ({\n email: member.email,\n accessRoleId: member.accessRoleId,\n }));\n updateSubcommittee({\n subcommitteeId: groupData[isIndexGroup].id,\n name: isGroupName,\n contacts: invitedMembers,\n });\n setToastInfo({\n severity: Severity.Success,\n status: 'Success',\n message: 'Subcommittee update success',\n });\n groupList[isIndexGroup] = {\n groupName: isGroupName,\n contacts: [...isInvitedMemberData, ...outsideInvitees].map((contact) => {\n return { ...contact,\n initials: contact.initials ? contact.initials : 'shp',\n name: contact.name ? contact.name : contact.email,\n status: contact.status ? contact.status : 'invited',\n }}),\n id: groupData[isIndexGroup].id\n };\n setGroupData(groupList);\n setReadOnly(true);\n setAddUser(false);\n setIsUpdateGroup(false);\n setActiveGroupName(false);\n setIndexGroup(false);\n };\n\n const handleAddEmail = (data) => {\n const inviteeData = [...isInvitedMemberData, ...isOutsideInviteeData];\n const contactExists = inviteeData.some((contact) => contact.email === data.email);\n\n if (contactExists) {\n setToastInfo({\n severity: Severity.Error,\n status: 'Error',\n message: 'Email already in invitee list.',\n });\n return;\n }\n\n setOutsideInviteeData([\n ...isOutsideInviteeData,\n { email: data.email, accessRoleId: accessRoles.find((role) => role.name === 'Observer')?.id },\n ]);\n };\n\n return (\n <>\n \n
\n \n No subcommittee currently exists. Please click 'create new subcommittee' to create one.\n
\n \n
\n \n \n
\n \n
\n \n {groupData.length === 0 && !isAddGroup ? 0),\n 'xl:tw-w-1/2': isActiveGroupName || (isAddGroup && groupData.length > 0),\n 'xl:tw-border-0 xl:tw-border-r xl:tw-border-solid xl:tw-border-gray-200':\n isActiveGroupName || (isAddGroup && groupData.length > 0),\n })}\n >\n
\n {groupData.length > 0 && (\n \n
\n \n
\n {groupData.length === 0 && isAddGroup && (\n \n {groupData.length === 0 ? null : (\n <>\n \n Create new subcommittee\n \n )}\n \n )}\n
\n {groupData.length === 0 && isAddGroup && (\n <>\n \n
\n {groupData.length > 0 && (\n \n
\n \n No subcommittees have been made. Create a new one below.\n
\n \n )}\n \n {groupData.map((row, i) => {\n return (\n
\n \n {\n onClickGroupName(row, i);\n }}\n isSelected={isIndexGroup === i}\n className='tw-py-0_ tw-cursor-pointer !tw-p-6'\n variant='purple'\n >\n
\n );\n })}\n \n
\n \n \n
\n \n {row.groupName}\n
\n \n
\n \n
\n )}\n \n {\n e.preventDefault();\n }}\n >\n
\n \n
\n \n
\n \n Invited members\n
\n \n
\n {isActiveInvitedMember && (\n \n {isInvitedMemberData.map((row, i) => {\n return (\n
\n )}\n \n
\n );\n })}\n \n {isOutsideInviteeData && (\n
\n\n \n {isOutsideInviteeData.map((row, i) => {\n return (\n
\n )}\n \n
\n );\n })}\n \n \n Create subcommittee\n \n
\n \n \n
\n )}\n \n {isAddGroup && (\n <>\n {\n e.preventDefault();\n }}\n >\n
\n \n
\n \n
\n\n \n Invited members\n
\n \n
\n {isActiveInvitedMember && (\n \n {isInvitedMemberData.map((row, i) => {\n return (\n
\n )}\n \n
\n );\n })}\n \n {isOutsideInviteeData && (\n
\n\n \n {isOutsideInviteeData.map((row, i) => {\n return (\n
\n )}\n \n
\n );\n })}\n \n \n Create subcommittee\n \n
\n \n \n )}\n {isActiveGroupName && (\n <>\n {isReadOnly ? (\n \n
\n ) : (\n \n
\n \n
\n \n onClickEdit(!isReadOnly)}\n >\n {isReadOnly ? `Edit` : 'Save'}\n \n
\n \n {groupData.length > 0 && (\n \n Delete\n \n )}\n
\n \n \n Delete\n \n
\n )}\n\n {isUpdateGroup && !isReadOnly && (\n \n
\n )}\n\n \n {isReadOnly && (\n <>\n
\n \n )}\n \n onAddUserChange(true)}\n >\n Add user\n \n )}\n
\n {isInvitedMemberData.length === 0 && 0 Members
}\n {loading ? (\n \n
\n ) : (\n isInvitedMemberData.map((row, i) => {\n return (\n \n
\n );\n })\n )}\n \n )}\n {isUpdateGroup && !isReadOnly && (\n \n
\n )}\n \n {\n return !isInvitedMemberData.some((invitee) => invitee.email === contact.email);\n })}\n name='contactGroups'\n placeholder='Type name and select to add'\n renderFooter={renderFooter}\n listHeight='large'\n listBorder\n />\n
\n {!isReadOnly && (\n <>\n \n onAddUserChange(true)}\n >\n Add user\n \n )}\n
\n {isInvitedMemberData.length === 0 && 0 Members
}\n {isInvitedMemberData.map((row, i) => {\n return (\n \n
\n );\n })}\n \n {isOutsideInviteeData && (\n
\n \n )}\n \n {isOutsideInviteeData.map((row, i) => {\n return (\n
\n )}\n \n
\n );\n })}\n \n \n Save subcommittee\n \n
\n \n \n \n
\n \n );\n};\n\nexport default Subcommittee;\n","import React, { useContext, useEffect, useState } from 'react';\nimport Heading from 'components/v2/shared/Heading';\nimport Button from 'components/v2/shared/Button';\nimport Label from 'components/v2/shared/Label';\nimport TextInput from 'components/v2/shared/TextInput';\nimport { ToastContext } from 'contexts/v2/ToastContext';\nimport { Severity } from '../shared/Toast/Toast';\nimport { ModalContext } from '../shared/Modal/Modal';\nimport { useUpdateAccessRoleMutation } from 'data/v2/mutations/UpdateAccessRoleMutation';\nimport { wrapMutation } from 'utils/v2/gql';\n\nconst UpdateRoleName = ({ role, refetch }) => {\n const { toastInfo, setToastInfo } = useContext(ToastContext);\n const { onClose } = useContext(ModalContext);\n const [inputValue, setInputValue] = useState(role.role);\n\n const handleInput = (e) => {\n setInputValue(e.target.value);\n };\n\n const [updateAccessRole] = useUpdateAccessRoleMutation();\n\n const handleUpdate = async () => {\n try {\n await wrapMutation(\n updateAccessRole,\n {\n variables: {\n input: {\n accessRoleId: role.id,\n name: inputValue,\n },\n },\n },\n 'updateAccessRole'\n );\n refetch();\n setToastInfo({\n severity: Severity.Success,\n status: 'Save Successful',\n message: 'Role name has been successfully updated',\n });\n } catch (error) {\n setToastInfo({\n severity: Severity.Error,\n status: 'Failed Saving',\n message: error.message,\n });\n } finally {\n onClose();\n }\n };\n\n return (\n \n
\n \n Are you sure you want to delete this subcommittee?\n
\n \n Once deleted all information for this subcommittee will be removed permanently.\n
\n\n \n setConfirmDelete(e.target.value)}\n placeholder='DELETE'\n size='regular'\n value={confirmDelete}\n />\n
\n \n \n Yes, delete subcommittee\n \n \n No, keep subcommittee\n \n
\n \n
\n );\n};\n\nexport default UpdateRoleName;\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { usePopper } from 'react-popper';\nimport { useClickOutside } from 'hooks/useClickOutside';\nimport { PLACEMENTS } from './constants';\n\nimport Icon from './../Icon';\nimport Menu from './../Menu';\n\nconst ActionsMenu = ({ className, children, placement = 'right-start', offset = { skidding: 0, distance: 5 } }) => {\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside();\n\n const [iconRef, setIconRef] = useState();\n const [menuRef, setMenuRef] = useState();\n\n const { styles, attributes, update } = usePopper(iconRef, menuRef, {\n placement: placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [offset.skidding, offset.distance],\n },\n },\n ],\n });\n\n const openMenu = () => setIsComponentVisible(true);\n\n return (\n \n \n handleInput(e)} />\n
\n \n \n
\n \n
\n );\n};\n\nActionsMenu.propTypes = {\n children: PropTypes.node,\n placement: PropTypes.oneOf(PLACEMENTS),\n className: PropTypes.string,\n offset: PropTypes.shape({\n skidding: PropTypes.number,\n distance: PropTypes.number,\n }),\n};\n\nexport default ActionsMenu;\n","export const PLACEMENTS = [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'right',\n 'right-start',\n 'right-end',\n 'left',\n 'left-start',\n 'left-end',\n];\n","export { default } from './ActionsMenu';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ActivityFeedItem from 'components/v2/shared/ActivityFeedItem';\n\nconst ActivityFeedCircle = () => (\n \n \n
\n \n);\n\nActivityFeedCircle.propTypes = {};\n\nconst ActivityFeed = ({ items }) => (\n \n
\n);\n\nActivityFeed.propTypes = {\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n ...ActivityFeedItem.propTypes,\n })\n ),\n};\n\nexport default ActivityFeed;\n","export { default } from './ActivityFeed';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Box from 'components/v2/shared/Box';\n\nconst ActivityFeedItem = ({ date, time, owner, description }) => (\n \n {items.map((item) => (\n
\n \n
\n ))}\n \n
\n \n
\n\n {date}
\n {`${time} \\u2022 ${owner}`}
\n {description}
\n \n
\n \n {severityIconMap[severity]}\n
\n\n \n
\n {title}
\n {description}
\n \n
\n \n\n {children}
\n \n);\n\nAlert.propTypes = {\n title: PropTypes.string,\n description: PropTypes.node,\n children: PropTypes.node,\n severity: PropTypes.oneOf(Object.values(Severity)),\n width: PropTypes.oneOf(Object.values(Width)),\n isDismissable: PropTypes.bool,\n onDismiss: PropTypes.func,\n};\n\nexport default Alert;\n","export { default, Severity } from './Alert';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ErrorBoundary } from '@appsignal/react';\n\nimport appSignal from 'utils/v2/appSignal';\n\nconst AppSignalWrapper = ({ tags, children }) => (\n \n
\n Assign person to be chair
\n\n \n
\n\n {renderContacts()}
\n\n \n \n
\n 
: placeholder?.toUpperCase()}\n \n);\n\nAvatar.propTypes = {\n onClick: PropTypes.func,\n placeholder: PropTypes.string,\n imgUrl: PropTypes.string,\n className: PropTypes.string,\n color: PropTypes.oneOf(Object.values(Colors)),\n size: PropTypes.oneOf(Object.values(Sizes)),\n};\n\nexport default Avatar;\n","export { default, Sizes, Colors } from './Avatar';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport Avatar, { Colors } from 'components/v2/shared/Avatar';\nimport Badge, { Colors as BadgeColors } from 'components/v2/shared/Badge';\n\nimport * as styles from './AvatarWithBadge.styles';\n\nconst AvatarWithBadge = ({ text, alt, avatarColor, badgeColor, className }) => (\n \n {children}\n \n
\n);\n\nBadge.propTypes = {\n color: PropTypes.oneOf(Object.values(Colors)),\n className: PropTypes.string,\n};\n\nexport default Badge;\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const container = css`\n position: relative;\n display: inline-flex;\n`;\n\nexport const badge = {\n base: css`\n position: absolute;\n right: 0;\n box-shadow: 0 0 0 2px ${colors.white};\n border-radius: 50%;\n bottom: 0;\n width: 8px;\n height: 8px;\n `,\n\n green: css`\n background: ${colors.badgeGreen};\n `,\n\n pink: css`\n background: ${colors.badgePink};\n `,\n\n grey: css`\n background: ${colors.badgeGrey};\n `,\n};\n","export { default, Colors } from './Badge';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nexport const Variants = {\n Purple: 'purple',\n Teal: 'teal',\n};\nconst Box = ({ isSelected = false, isHoverable = false, variant = Variants.Purple, children, className, onClick }) => (\n {author}
\n {message}
\n \n);\n\nChatMessage.propTypes = {\n variant: PropTypes.oneOf(Object.values(Variants)),\n message: PropTypes.string.isRequired,\n author: PropTypes.string,\n className: PropTypes.string,\n};\n\nexport default ChatMessage;\n","export { default, Variants } from './ChatMessage';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { FiCheck } from 'react-icons/fi';\n\nexport const Sizes = {\n Regular: 'regular',\n Large: 'large',\n};\n\nconst Checkbox = ({ size = Sizes.Regular, name, label, labelClass, value, isChecked, isDisabled, onChange }) => (\n \n \n \n\n {onClear &&
\n );\n};\n\nContactCard.propTypes = {\n label: PropTypes.string,\n status: PropTypes.string,\n initials: PropTypes.string,\n avatarUrl: PropTypes.string,\n companyPosition: PropTypes.string,\n variantValueBackground: PropTypes.string,\n variant: PropTypes.oneOf(VARIANTS),\n onClear: PropTypes.func,\n className: PropTypes.string,\n onClick: PropTypes.func,\n};\n\nexport default ContactCard;\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const container = {\n base: css`\n position: relative;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 19px 20px 28px;\n border-width: 1px;\n border-style: solid;\n `,\n\n lightGrey: css`\n background: ${colors.lightestGrey};\n border-color: ${colors.lightestGrey};\n `,\n\n white: css`\n background: ${colors.white};\n border-color: ${colors.white};\n `,\n\n grey: css`\n background: ${colors.iron};\n border-color: ${colors.iron};\n `,\n\n clickable: css`\n cursor: pointer;\n `,\n\n whiteBordered: css`\n background: ${colors.white};\n border-color: ${colors.lighterGrey};\n `,\n};\n\nexport const chip = {\n base: css`\n position: absolute;\n right: 38px;\n top: -15px;\n z-index: 1;\n `,\n list: css`\n position: relative;\n margin-left: auto;\n margin-right: 20px;\n `,\n listActive: css`\n position: relative;\n margin-left: auto;\n margin-right: 20px;\n `,\n};\n\nexport const textWrapper = css`\n line-height: 1;\n`;\n\nexport const flex = css`\n display: flex;\n align-items: center;\n`;\n","export const VARIANTS = ['base', 'list', 'listActive'];\n","export { default } from './ContactCard';\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\nimport pluralize from 'pluralize';\n\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport ContactCard from '../ContactCard';\nimport * as styles from './ContactGroup.styles';\n\nconst ContactGroup = ({ name, className, contacts, onClear }) => {\n const [isExpanded, setIsExpanded] = useState(false);\n\n const countLabel = (number) => {\n return `${number} ${number > 1 ? 'members' : 'member'}`;\n };\n\n const toggleExpanded = () => setIsExpanded(!isExpanded);\n\n const renderContactCards = () =>\n contacts.map(({ id, name, ...rest }) => (\n \n
\n\n \n
\n \n
\n\n {isExpanded && \n
\n\n \n
\n\n {renderContactCards()}
}\n \n \n
\n );\n\n const renderChildren = () => {\n if (!isContentVisible) {\n return \n {renderChildren()}\n
\n );\n};\n\nContentToggle.propTypes = {\n onHide: PropTypes.func,\n onShow: PropTypes.func,\n isVisible: PropTypes.bool,\n className: PropTypes.string,\n children: PropTypes.node,\n labelText: PropTypes.string,\n toggleText: PropTypes.string,\n};\n\nexport default ContentToggle;\n","import { css } from '@emotion/core';\n\nexport const container = css`\n position: relative;\n`;\n","export { default } from './ContentToggle';\n","/** @jsx jsx */\n\nimport React, { useState, useRef } from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\nimport 'react-dates/initialize';\nimport { DayPickerSingleDateController } from 'react-dates';\nimport moment from 'moment';\n\nimport Label from '../Label';\nimport InputError from '../InputError';\nimport TextInput from '../TextInput';\nimport * as styles from './DatePicker.styles';\nimport { position } from 'styles';\n\nconst DatePicker = ({\n name,\n label,\n placeholder,\n isRequired,\n isDisabled,\n className,\n isReadOnly,\n errorMessage,\n value,\n onChange,\n disablePastDates,\n}) => {\n const [isFocused, setIsFocused] = useState(false);\n const textInputRef = useRef(null);\n\n const getDatePickerStyles = () => [styles.datePicker.base, isFocused && styles.datePicker.visible];\n\n const renderNextIcon = () => ;\n const renderPrevIcon = () => ;\n\n const isOutsideRange = (day) => disablePastDates && day.isBefore(moment().parseZone(), 'day');\n\n const formatValue = () => value?.format(getUserDateFormat() || 'DD/MM/YYYY') || '';\n\n const handleDateChange = (value) => {\n onChange(value);\n setIsFocused(false);\n textInputRef.current.blur();\n };\n\n const handleFocus = () => {\n if (isReadOnly || isDisabled) {\n return;\n }\n setIsFocused(true);\n textInputRef.current.focus();\n };\n\n const handleBlur = (e) => {\n if (isReadOnly || isDisabled) {\n return;\n }\n const isWithin = e.relatedTarget && e.currentTarget.contains(e.relatedTarget);\n if (isWithin) {\n textInputRef.current.focus();\n } else {\n setIsFocused(false);\n }\n };\n\n const renderDatePicker = () => {\n if (isDisabled || isReadOnly) {\n return null;\n }\n\n return (\n \n
\n );\n };\n\n const renderDateInput = () => (\n <>\n \n \n
\n );\n};\n\nDatePicker.propTypes = {\n name: PropTypes.string,\n label: PropTypes.string,\n placeholder: PropTypes.string,\n isRequired: PropTypes.bool,\n isDisabled: PropTypes.bool,\n className: PropTypes.string,\n isReadOnly: PropTypes.bool,\n errorMessage: PropTypes.string,\n value: PropTypes.instanceOf(moment),\n onChange: PropTypes.func,\n disablePastDates: PropTypes.bool,\n};\n\nexport default DatePicker;\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const datePicker = {\n base: css`\n .DayPicker {\n visibility: hidden;\n box-shadow: 0px 1.2px 3.6px rgba(0, 72, 90, 0.1), 0px 6.4px 14.4px rgba(0, 77, 97, 0.13);\n border-radius: 2px;\n padding: 17px 19px 13px 15px;\n width: 230px;\n position: absolute !important;\n z-index: 3;\n\n .DayPicker_weekHeader__vertical {\n padding: 0 !important;\n white-space: nowrap;\n top: 27px;\n left: -2px;\n margin-left: 0 !important;\n\n li {\n display: none;\n width: 28px !important;\n }\n }\n\n .CalendarMonthGrid {\n width: 194px !important;\n }\n\n .DayPickerNavigation_button {\n .prev,\n .next {\n font-weight: 300;\n font-size: 12px;\n position: absolute;\n top: 5px;\n }\n\n .prev {\n right: 31px;\n }\n\n .next {\n right: 6px;\n }\n }\n\n .CalendarMonth {\n padding: 0 !important;\n }\n\n .CalendarMonth_table {\n margin: 0 auto;\n }\n\n .CalendarMonth_caption {\n ${fonts.bold}\n font-size: 14px;\n text-align: left;\n padding-left: 7px;\n padding-top: 0;\n padding-bottom: 25px;\n color: ${colors.black};\n }\n\n .CalendarDay__default {\n ${fonts.regular}\n border: none;\n font-size: 12px;\n padding: 0;\n color: ${colors.black};\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background: ${colors.cyan};\n border-radius: 14px;\n border: none;\n color: white;\n }\n\n &.CalendarDay__blocked_out_of_range {\n color: ${colors.mediumGrey};\n\n &:hover {\n background: none;\n border-radius: 0;\n }\n }\n\n &.CalendarDay__selected {\n background: ${colors.cyan};\n border-radius: 50px;\n color: white;\n\n &.CalendarDay__blocked_out_of_range:hover {\n background: ${colors.cyan};\n border-radius: 50px;\n color: white;\n }\n }\n }\n\n .DayPicker_weekHeader_li {\n visibility: hidden;\n font-size: 0;\n }\n\n .DayPicker_weekHeader_li::first-letter {\n ${fonts.bold}\n visibility: visible;\n color: ${colors.black};\n font-size: 12px;\n }\n }\n `,\n\n visible: css`\n .DayPicker {\n visibility: visible;\n\n .DayPicker_weekHeader__vertical {\n li {\n display: inline-block;\n }\n }\n }\n `,\n};\n","export { default } from './DatePicker';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { POSITIONS } from './constants';\n\nimport * as styles from './Divider.styles';\n\nconst Divider = ({ title, position = 'center', isBold = false, className }) => (\n \n {renderDateInput()}\n {renderDatePicker()}\n
\n \n {title}\n
\n);\n\nDivider.propTypes = {\n title: PropTypes.string,\n isBold: PropTypes.bool,\n position: PropTypes.oneOf(POSITIONS),\n className: PropTypes.string,\n};\n\nexport default Divider;\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const divider = {\n base: css`\n --margin: 10px;\n\n display: flex;\n align-items: center;\n margin: var(--margin) 0;\n font-size: 14px;\n color: ${colors.black};\n letter-spacing: 0.1em;\n text-transform: uppercase;\n `,\n\n right: css`\n &:before {\n content: '';\n flex: 1;\n border-bottom: 1px solid ${colors.headingGrey};\n }\n\n &:not(:empty):before {\n margin-right: var(--margin);\n }\n `,\n\n left: css`\n &:after {\n content: '';\n flex: 1;\n border-bottom: 1px solid ${colors.headingGrey};\n }\n\n &:not(:empty):after {\n margin-left: var(--margin);\n }\n `,\n\n center: css`\n &:after,\n &:before {\n content: '';\n flex: 1;\n border-bottom: 1px solid ${colors.headingGrey};\n }\n\n &:not(:empty):before {\n margin-right: var(--margin);\n }\n\n &:not(:empty):after {\n margin-left: var(--margin);\n }\n `,\n\n bold: css`\n ${fonts.bold}\n font-size: 16px;\n text-transform: none;\n letter-spacing: normal;\n `,\n};\n","export const POSITIONS = ['left', 'center', 'right'];\n","export { default } from './Divider';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport IconButton from 'components/v2/shared/IconButton';\nimport { FiX, FiTrash2, FiRotateCcw } from 'react-icons/fi';\nimport Button, { Sizes, Variants } from 'components/v2/shared/Button';\nimport { AttachmentState } from 'contexts/v2/FileUploadContext';\n\nconst attachmentStateLabelMap = {\n [AttachmentState.Enqueued]: 'Preparing',\n [AttachmentState.Pending]: 'Uploading',\n [AttachmentState.Cancelled]: 'Cancelled',\n};\n\nconst Attachment = ({ name, state, progress = 0, error, onCancel, onRestart, onRemove }) => (\n {name}
\n\n \n
\n \n);\n\nAttachment.propTypes = {\n name: PropTypes.string,\n progress: PropTypes.number,\n error: PropTypes.string,\n state: PropTypes.oneOf(Object.values(AttachmentState)),\n onRemove: PropTypes.func,\n onCancel: PropTypes.func,\n onRestart: PropTypes.func,\n};\n\nexport default Attachment;\n","export { default, States } from './Attachment';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Attachment from '../Attachment';\nimport Button, { Sizes, Variants } from 'components/v2/shared/Button';\n\nconst AttachmentList = ({ attachments, onAttachmentRemove, onAttachmentCancel, onAttachmentRestart }) => {\n if (!attachments.length) {\n return (\n {error}
\n {attachmentStateLabelMap[state]}
\n\n {state === AttachmentState.Failed && (\n \n
\n );\n }\n\n const handleAttachmentListClick = (e) => e.stopPropagation();\n const handleAttachmentCancel = (attachment) => () => onAttachmentCancel(attachment);\n const handleAttachmentRemove = (attachment) => () => onAttachmentRemove(attachment);\n const handleAttachmentRestart = (attachment) => () => onAttachmentRestart(attachment);\n\n const renderAttachments = attachments.map((attachment) => (\n Drag & Drop
\n\n \n \n
\n );\n};\n\nAttachmentList.propTypes = {\n attachments: PropTypes.array,\n onAttachmentRemove: PropTypes.func,\n onAttachmentCancel: PropTypes.func,\n onAttachmentRestart: PropTypes.func,\n};\n\nexport default AttachmentList;\n","export { default } from './AttachmentList';\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { withContext } from 'utils/v2/shared';\nimport { FileUploadContextProvider, useFileUploadContext } from 'contexts/v2/FileUploadContext';\nimport Button, { Sizes, Variants } from 'components/v2/shared/Button';\nimport AttachmentList from './AttachmentList';\nimport Dropzone from 'components/v2/shared/Dropzone';\n\nexport const DocumentUpload = ({ isDismissable = false, isDisabled, onUpload, onDismiss }) => {\n const {\n attachments,\n enqueuedAttachmentId,\n addAttachments,\n cancelAttachment,\n restartAttachment,\n removeAttachment,\n uploadAttachment,\n hasPendingAttachments,\n hasFailedAttachments,\n } = useFileUploadContext();\n\n const acceptedFileTypes = [\n '.png',\n '.jpeg',\n '.jpg',\n '.ppt',\n '.pdf',\n '.pptx',\n '.doc',\n '.docx',\n '.xls',\n '.xlsx',\n '.xlsm',\n ];\n\n useEffect(() => {\n uploadAttachment(enqueuedAttachmentId, onUpload);\n }, [enqueuedAttachmentId]);\n\n const StatusText = () => {\n if (!attachments.length) {\n return 'Upload files';\n } else if (hasPendingAttachments) {\n return 'Uploading';\n } else {\n return 'Upload complete';\n }\n };\n\n return (\n \n {renderAttachments}\n
\n\n \n \n \n
\n );\n};\n\nDocumentUpload.propTypes = {\n isDismissable: PropTypes.bool,\n isDisabled: PropTypes.bool,\n onUpload: PropTypes.func,\n onDismiss: PropTypes.func,\n};\n\nexport default withContext(FileUploadContextProvider, DocumentUpload);\n","export { default, DocumentUpload } from './DocumentUpload';\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Item from './Item';\nimport Menu from './Menu';\nimport { usePopper } from 'react-popper';\nimport { useClickOutside } from 'hooks/useClickOutside';\n\nconst Dropdown = ({ renderToggle = () => {}, menuElement, placement = 'bottom-end', className }) => {\n const { ref, isComponentVisible, setIsComponentVisible } = useClickOutside();\n\n const toggleDropdown = () => {\n setIsComponentVisible((prev) => !prev);\n updatePopper && updatePopper();\n };\n\n const [toggleRef, setToggleRef] = useState();\n const [menuRef, setMenuRef] = useState();\n\n const { styles, attributes, update: updatePopper } = usePopper(toggleRef, menuRef, { placement });\n\n return (\n \n \n
\n\n \n
\n\n {isDismissable && (\n \n )}\n \n {isComponentVisible && menuElement}\n
\n \n \n\n {children}\n
\n \n );\n }\n);\n\nDropzone.propTypes = {\n maxFiles: PropTypes.number,\n accept: PropTypes.arrayOf(PropTypes.string),\n multiple: PropTypes.bool,\n onDrop: PropTypes.func,\n isDisabled: PropTypes.bool,\n className: PropTypes.string,\n children: PropTypes.node,\n};\n\nexport default Dropzone;\n","export { default } from './Dropzone';\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport PdfViewer from 'components/v2/shared/PdfViewer';\nimport PdfViewerTopbar from 'components/v2/shared/PdfViewerTopbar';\nimport Modal from 'components/v2/shared/Modal';\nimport { previewDisabledElements } from 'components/meetings/PdfViewer/constants';\nimport Spinner from 'components/v2/shared/Spinner';\n\nconst FileViewer = ({ fileName, fileUrl, isOpen, onClose, onDocumentLoaded }) => {\n const [instance, setInstance] = useState(null);\n const [showSpinner, setShowSpinner] = useState(true);\n\n const handleAfterLeave = () => setShowSpinner(true);\n\n const handleDownload = () => {\n instance.UI.downloadPdf({\n filename: fileName,\n downloadType: 'pdf',\n });\n };\n\n const handlePdfViewerInit = (instance) => {\n setInstance(instance);\n\n instance.UI.iframeWindow.document.querySelector('.custom-ribbons-container').remove();\n instance.UI.disableFeatures([instance.Feature.ThumbnailReordering, instance.Feature.ThumbnailMerging]);\n\n instance.Core.documentViewer.addEventListener('documentLoaded', async () => {\n await onDocumentLoaded?.(instance);\n setShowSpinner(false);\n });\n };\n\n return (\n \n
\n \n \n \n {iconLeft}\n \n {selected?.name ?? placeholder}\n \n \n \n {items.map((item) => (\n \n clsx('tw-select-none tw-rounded tw-p-2 tw-text-black', {\n 'tw-bg-teal-500 tw-text-white': active,\n })\n }\n value={item}\n >\n {({ selected }) => (\n <>\n \n {item.name}\n \n \n )}\n \n ))}\n \n \n \n
\n );\n};\n\nFilter.propTypes = {\n items: PropTypes.array,\n onSelect: PropTypes.func,\n iconLeft: PropTypes.element,\n iconRight: PropTypes.element,\n};\n\nexport default Filter;\n","export { default } from './Filter'","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport FormStepItem from 'components/v2/shared/FormStepItem';\nimport Text from 'components/v2/shared/Text';\nimport TextBadge from 'components/v2/shared/TextBadge';\nimport { useMeetingFormStepContext } from 'contexts/v2/MeetingFormStepContext';\nimport { useMeetingContext } from '../../../../contexts/v2/MeetingContext';\n\nimport * as styles from './FormSidebar.styles';\n\nconst FormSidebar = ({ steps, headerText, activeStep, badgeStatus }) => {\n const { setCurrentStep } = useMeetingFormStepContext();\n\n const {\n meeting: { meetingId },\n } = useMeetingContext();\n\n const handleStepClick = (index) => () => {\n if (!meetingId) {\n return;\n }\n setCurrentStep(index);\n };\n\n const renderSteps = steps.map((title, index) => (\n {iconRight}
\n \n \n
\n );\n};\n\nFormSidebar.propTypes = {\n steps: PropTypes.arrayOf(PropTypes.string),\n activeStep: PropTypes.number,\n onStepClick: PropTypes.func,\n meetingStatus: PropTypes.string,\n headerText: PropTypes.string,\n};\n\nexport default FormSidebar;\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const container = css`\n height: 100%;\n`;\n\nexport const header = css`\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n","export { default } from './FormSidebar';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport { PropTypes } from 'prop-types';\n\nimport * as styles from './FormStepItem.styles';\n\nconst FormStepItem = ({ title, isActive, onClick }) => {\n return (\n \n
\n\n {renderSteps}\n \n \n {title}\n
\n );\n};\n\nFormStepItem.propTypes = {\n onClick: PropTypes.func,\n title: PropTypes.string,\n isActive: PropTypes.bool,\n};\n\nexport default FormStepItem;\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const container = css`\n display: flex;\n align-items: center;\n position: relative;\n line-height: 1;\n padding: 10px 0;\n cursor: pointer;\n\n &:after {\n content: '';\n width: 1px;\n height: 100%;\n border-right: 1px dashed ${colors.cyan};\n z-index: 1;\n position: absolute;\n left: 7px;\n top: 50%;\n }\n\n &:last-child:after {\n display: none;\n }\n`;\n\nexport const icon = {\n base: css`\n --size: 8px;\n --border-size: 2px;\n\n width: var(--size);\n height: var(--size);\n border: var(--border-size) solid ${colors.cyan};\n z-index: 2;\n border-radius: 50%;\n position: absolute;\n background: ${colors.white};\n left: 3px;\n top: 50%;\n transform: translate(0, -50%);\n `,\n\n active: css`\n left: 0;\n --size: 15px;\n --border-size: 5px;\n `,\n};\n\nexport const step = {\n base: css`\n --step-color: ${colors.black};\n\n display: block;\n font-size: 14px;\n margin-left: 22px;\n color: var(--step-color);\n\n &:hover {\n color: var(--step-color);\n }\n `,\n\n active: css`\n ${fonts.bold}\n --step-color: ${colors.cyan};\n `,\n};\n","export { default } from './FormStepItem';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nexport const Sizes = {\n Small: 'small',\n Medium: 'medium',\n Regular: 'regular',\n};\n\nconst Heading = ({ text, className, size = Sizes.Regular }) => (\n <>\n {size === Sizes.Small ? (\n {text}
\n ) : (\n\n {iconMap[icon]}\n
\n);\n\nIcon.propTypes = {\n icon: PropTypes.oneOf(Object.keys(iconMap)),\n setRef: PropTypes.func,\n onClick: PropTypes.func,\n className: PropTypes.string,\n};\n\nexport default Icon;\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const icon = {\n base: css`\n flex-shrink: 0;\n display: inline;\n `,\n\n move: css`\n cursor: move;\n `,\n\n close: css`\n cursor: pointer;\n\n &:hover {\n svg {\n path {\n fill: ${colors.cyan};\n }\n }\n }\n `,\n\n dots: css`\n cursor: pointer;\n padding: 0 5px;\n margin: 0 -5px;\n\n &:hover {\n svg {\n g {\n fill: ${colors.black};\n }\n }\n }\n `,\n};\n","export { default } from './Icon';\n","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { FiX } from 'react-icons/fi';\n\nconst IconButton = forwardRef(({ children, title, className, onClick, isDisabled, ...rest }, ref) => (\n \n
\n\n \n
\n\n {attachmentStateLabelMap[state]}
\n\n \n {state === AttachmentState.Failed &&
\n {error}
\n\n \n
\n {name}
\n \n);\n\nAttachment.propTypes = {\n name: PropTypes.string,\n progress: PropTypes.number,\n error: PropTypes.string,\n state: PropTypes.oneOf(Object.keys(attachmentStateLabelMap)),\n onRemove: PropTypes.func,\n onCancel: PropTypes.func,\n onRestart: PropTypes.func,\n};\n\nexport default Attachment;\n","export { default } from './Attachment';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Attachment from '../Attachment';\nimport Button, { Sizes, Variants } from 'components/v2/shared/Button';\nimport { AttachmentState } from 'contexts/v2/FileUploadContext';\nimport * as ImageUpload from '../ImageUpload';\n\nconst AttachmentManagement = ({\n hasPreview,\n attachment,\n isDisabled,\n onUpload,\n onRemove,\n onCancel,\n onRestart,\n variant,\n}) => {\n if (!attachment) {\n return (\n \n
\n );\n }\n\n if (attachment.state === AttachmentState.Uploaded) {\n return (\n We recommend a 50px x 50px image.
\n \n \n {variant === ImageUpload.Variants.Default\n ? 'Upload'\n : variant === ImageUpload.Variants.Company\n ? 'Upload logo'\n : 'Upload file'}\n \n {hasPreview && (\n onRemove(attachment)}\n size={Sizes.Small}\n variant={Variants.Transparent}\n className='pl-4 !tw-py-0 tw-text-red-600'\n >\n Delete\n \n )}\n
\n \n
\n );\n }\n\n const { id, name, progress, state, error } = attachment;\n\n const handleAttachmentRemove = () => onRemove(attachment);\n const handleAttachmentCancel = () => onCancel(attachment);\n const handleAttachmentRestart = () => onRestart(attachment);\n\n return (\n We recommend a 50px x 50px image.
\n \n \n {variant === ImageUpload.Variants.Default\n ? 'Upload'\n : variant === ImageUpload.Variants.Company\n ? 'Upload logo'\n : 'Upload file'}\n \n onRemove(attachment)}\n size={Sizes.Small}\n variant={Variants.Transparent}\n className='pl-4 !tw-py-0 tw-text-red-600'\n >\n Delete\n \n
\n {text}
\n ) : (\n {text}
\n \n )}\n \n );\n};\n\nexport const ImageUpload = ({\n previewUrl,\n text = 'Drop file',\n isDisabled,\n onUpload,\n onDelete,\n variant = Variants.Default,\n}) => {\n const {\n attachments,\n enqueuedAttachmentId,\n uploadedAttachments,\n addAttachments,\n cancelAttachment,\n restartAttachment,\n removeAttachment,\n uploadAttachment,\n } = useFileUploadContext();\n\n const acceptedFileTypes = ['.png', '.jpeg', '.jpg'];\n const attachment = attachments[0] || uploadedAttachments[0];\n const dropzoneRef = useRef();\n\n useEffect(() => {\n uploadAttachment(enqueuedAttachmentId, onUpload);\n }, [enqueuedAttachmentId]);\n\n const handleUploadClick = () => {\n if (dropzoneRef.current) {\n dropzoneRef.current.open();\n }\n };\n\n const handleDeleteClick = (attachment) => {\n if (attachment) {\n removeAttachment(attachment);\n }\n onDelete();\n };\n\n return (\n \n \n
\n );\n};\n\nImageUpload.propTypes = {\n variant: PropTypes.oneOf(Object.values(Variants)),\n text: PropTypes.string,\n isDisabled: PropTypes.bool,\n onUpload: PropTypes.func,\n onDelete: PropTypes.func,\n};\n\nexport default withContext(FileUploadContextProvider, ImageUpload);\n","export { default, ImageUpload } from './ImageUpload';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nconst InputError = ({ message, className }) => (\n \n
\n \n {(variant === Variants.Default || variant === Variants.Company) && (\n \n \n
\n )}\n {message}
\n \n);\n\nInputError.propTypes = {\n message: PropTypes.string,\n className: PropTypes.string,\n};\n\nexport default InputError;\n","export { default } from './InputError';\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Modal, { Sizes } from './../Modal';\nimport TextInput from './../TextInput';\nimport SelectInput from 'components/v2/shared/SelectInput';\nimport Button, { Variants } from './../Button';\nimport { useAccessRolesContext } from 'contexts/v2/AccessRolesContext';\nimport { useContactsContext } from 'contexts/v2/ContactsContext';\n\nconst InviteContactModalWindow = ({ show, onHide, onDataAdded }) => {\n const [email, setEmail] = useState('');\n const [accessRole, setAccessRole] = useState();\n const [errors, setErrors] = useState({});\n\n const { addContact } = useContactsContext();\n const { accessRoles, defaultRole } = useAccessRolesContext();\n\n useEffect(() => setAccessRole(defaultRole), [defaultRole]);\n\n const handleEmailChange = (e) => setEmail(e.target.value);\n\n const resetForm = () => {\n setErrors({});\n setEmail('');\n setAccessRole(defaultRole);\n };\n\n const handleSave = async () => {\n setErrors({});\n\n try {\n const option = await addContact({ email, accessRoleId: accessRole?.value });\n onDataAdded && onDataAdded(option);\n onHide();\n } catch (e) {\n setErrors(e);\n }\n };\n\n return (\n \n
\n Add new contact
\n\n \n
\n\n \n
\n\n \n \n\n \n
\n \n
\n );\n};\n\nPagination.propTypes = {\n page: PropTypes.number,\n pageTotal: PropTypes.number,\n onPaginationClick: PropTypes.func,\n};\n\nexport default Pagination;\n","export { default } from './List'","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Button from 'components/v2/shared/Button';\n\nconst ListPlaceholder = ({ listItemNode, placeholderText, buttonText, onButtonClick }) => (\n \n
\n \n {pageTabs.map((page) => (\n
\n \n handlePaginationClick(1)}\n isDisabled={currentPage === 1}\n className='tw-col-span-3 tw-justify-self-end tw-rounded-sm tw-p-1 tw-text-xl tw-leading-none tw-text-purple-500 disabled:tw-opacity-30'\n >\n handlePaginationClick(currentPage - 1)}\n className='tw-col-span-3 tw-w-24 !tw-bg-purple-100 !tw-text-sm !tw-font-medium !tw-text-purple-500 hover:!tw-bg-purple-500 hover:!tw-text-purple-100'\n isDisabled={currentPage === 1}\n >\n Previous\n \n handlePaginationClick(currentPage + 1)}\n className='tw-col-span-3 tw-w-24 !tw-bg-purple-100 !tw-text-sm !tw-font-medium !tw-text-purple-500 hover:!tw-bg-purple-500 hover:!tw-text-purple-100'\n isDisabled={currentPage === pageTotal}\n >\n Next\n \n handlePaginationClick(pageTotal)}\n className='tw-col-span-3 tw-justify-self-start tw-rounded-sm tw-p-1 tw-text-xl tw-leading-none tw-text-purple-500 disabled:tw-opacity-30'\n isDisabled={currentPage === pageTotal}\n >\n
\n \n
\n \n handlePaginationClick(1)}\n isDisabled={currentPage === 1}\n className='tw-col-span-3 tw-justify-self-end tw-rounded-sm tw-p-1 tw-text-xl tw-leading-none tw-text-purple-500 disabled:tw-opacity-30'\n >\n handlePaginationClick(currentPage - 1)}\n className='tw-col-span-3 !tw-bg-purple-100 !tw-text-sm !tw-font-medium !tw-text-purple-500 hover:!tw-bg-purple-500 hover:!tw-text-purple-100 md:tw-w-24'\n isDisabled={currentPage === 1}\n >\n Previous\n \n {pageTabs.map((page) => (\n handlePaginationClick(currentPage + 1)}\n className='tw-col-span-3 !tw-bg-purple-100 !tw-text-sm !tw-font-medium !tw-text-purple-500 hover:!tw-bg-purple-500 hover:!tw-text-purple-100 md:tw-w-24'\n isDisabled={currentPage === pageTotal}\n >\n Next\n \n handlePaginationClick(pageTotal)}\n className='tw-col-span-3 tw-justify-self-start tw-rounded-sm tw-p-1 tw-text-xl tw-leading-none tw-text-purple-500 disabled:tw-opacity-30'\n isDisabled={currentPage === pageTotal}\n >\n
\n \n
\n);\n\nListPlaceholder.propTypes = {\n listItemNode: PropTypes.node.isRequired,\n placeholderText: PropTypes.string.isRequired,\n buttonText: PropTypes.string.isRequired,\n onButtonClick: PropTypes.func,\n};\n\nexport default ListPlaceholder;\n","export { default } from './ListPlaceholder';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ClipLoader from 'react-spinners/ClipLoader';\nimport theme from 'theme.config.js';\n\nconst LoadingIndicator = ({ isVisible = false, size = 16, className }) => (\n {listItemNode}
\n {listItemNode}
\n {listItemNode}
\n {listItemNode}
\n {listItemNode}
\n {listItemNode}
\n\n \n
\n \n
\n \n
\n {placeholderText}
\n \n \n
\n);\n\nLoadingIndicator.propTypes = {\n isVisible: PropTypes.bool,\n size: PropTypes.number,\n className: PropTypes.string,\n};\n\nexport default LoadingIndicator;\n","export { default } from './LoadingIndicator';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport * as styles from './Menu.styles';\n\nconst Menu = ({ setRef, className, isOpen, children, ...props }) => (\n \n {children}\n
\n);\n\nMenu.propTypes = {\n isOpen: PropTypes.bool,\n props: PropTypes.object,\n className: PropTypes.string,\n setRef: PropTypes.func,\n children: PropTypes.node,\n};\n\nexport default Menu;\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const container = {\n base: css`\n padding: 6px;\n box-shadow: 0px 1.2px 3.6px rgba(0, 20, 90, 0.1), 0px 6.4px 14.4px rgba(0, 50, 97, 0.13);\n border-radius: 2px;\n position: relative;\n opacity: 0;\n z-index: 1;\n transition: opacity 0.1s ease-in;\n pointer-events: none;\n background: ${colors.white};\n `,\n\n open: css`\n opacity: 1;\n pointer-events: all;\n `,\n};\n","export { default } from './Menu';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport * as styles from './MenuItem.styles';\n\nconst MenuItem = ({ onClick, children }) => (\n \n {children}\n
\n);\n\nMenuItem.propTypes = {\n onClick: PropTypes.func,\n children: PropTypes.node,\n};\n\nexport default MenuItem;\n","import { css } from '@emotion/core';\nimport { colors } from 'styles';\n\nexport const container = css`\n display: block;\n align-items: center;\n background: ${colors.white};\n padding: 10px;\n\n &:hover {\n cursor: pointer;\n border-radius: 2px;\n background: ${colors.lightCyan};\n }\n`;\n","export { default } from './MenuItem';\n","import React, { createContext, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { Dialog, Transition } from '@headlessui/react';\nimport { IoIosClose } from 'react-icons/io';\nimport IconButton from './../IconButton';\nimport clsx from 'clsx';\n\nexport const Sizes = {\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n xl: 'xl',\n '2xl': '2xl',\n '3xl': '3xl',\n '4xl': '4xl',\n '5xl': '5xl',\n '6xl': '6xl',\n '7xl': '7xl',\n fullScreen: 'fullScreen',\n};\n\nexport const ModalContext = createContext(null);\n\n// `afterLeave` is not set on `Transition.Root` due to https://github.com/tailwindlabs/headlessui/issues/1364\nconst Modal = ({ isOpen = false, isDismissable = true, onClose = () => {}, children, size = Sizes.md, afterLeave }) => (\n \n
\n\n \n \n \n \n \n
\n );\n};\n\nPagination.propTypes = {\n hasNextPage: PropTypes.bool,\n hasPreviousPage: PropTypes.bool,\n endCursor: PropTypes.string,\n startCursor: PropTypes.string,\n perPage: PropTypes.number,\n onChange: PropTypes.func,\n};\n\nexport default withIntl(Pagination);\n","export { default } from './Pagination';\n","import React, { forwardRef, useState } from 'react';\nimport { FiEye, FiEyeOff } from 'react-icons/fi';\nimport CircleCheck from 'images/icons/circle-checkmark.svg';\nimport CircleTimes from 'images/icons/circle-times.svg';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nimport Label from '../Label';\nimport InputError from '../InputError';\n\nexport const Sizes = {\n Large: 'large',\n Regular: 'regular',\n};\n\nconst REGEX = {\n MIN8_REGEX: new RegExp('^(?=.{8,})'),\n LOWERCASE_REGEX: new RegExp('^(?=.*[a-z])'),\n UPPERCASE_REGEX: new RegExp('^(?=.*[A-Z])'),\n NUMBER_REGEX: new RegExp('^(?=.*[0-9])'),\n SPECIAL_CHARACTER_REGEX: new RegExp('^(?=.*[!@#$%^&*()])'), //,\n};\n\nconst min8Validation = (value) => REGEX.MIN8_REGEX.test(value);\nconst lowercaseValidation = (value) => REGEX.LOWERCASE_REGEX.test(value);\nconst uppercaseValidation = (value) => REGEX.UPPERCASE_REGEX.test(value);\nconst numberValidation = (value) => REGEX.NUMBER_REGEX.test(value);\nconst specialCharacterValidation = (value) => REGEX.SPECIAL_CHARACTER_REGEX.test(value);\nconst PasswordInput = forwardRef(\n (\n {\n id,\n name,\n value,\n placeholder,\n label,\n isRequired,\n isDisabled,\n isReadOnly,\n errorMessage,\n isInvalid,\n onChange,\n onBlur,\n className,\n isValidation,\n textIconClass,\n size = Sizes.Regular,\n ...props\n },\n ref\n ) => {\n const [isInputTypeText, setIsInputTypeText] = useState(false);\n const [isShowValidationIcon, setIsShowValidationIcon] = useState(false);\n const [validationProps, setValidationProps] = useState({\n min8: false,\n lowercase: false,\n uppercase: false,\n number: false,\n special_character: false,\n });\n\n const updateValidationPropsValue = (name, value) => {\n setValidationProps((prev) => ({ ...prev, [name]: value }));\n };\n\n const handleOnChangePassword = (e) => {\n const { value } = e.target;\n setIsShowValidationIcon(value !== '');\n updateValidationPropsValue('password', value);\n updateValidationPropsValue('min8', min8Validation(value));\n updateValidationPropsValue('lowercase', lowercaseValidation(value));\n updateValidationPropsValue('uppercase', uppercaseValidation(value));\n updateValidationPropsValue('number', numberValidation(value));\n updateValidationPropsValue('special_character', specialCharacterValidation(value));\n if (\n min8Validation(value) &&\n lowercaseValidation(value) &&\n uppercaseValidation(value) &&\n numberValidation(value) &&\n specialCharacterValidation(value)\n ) {\n onChange(e, true);\n } else {\n onChange(e, false);\n }\n };\n\n const handleShowHide = () => {\n setIsInputTypeText(!isInputTypeText);\n };\n\n const ValidationIcon = ({ isValid }) => {\n return (\n <>\n {isShowValidationIcon && (\n \n {!!label && }\n {isValidation && (\n
\n );\n }\n);\n\nPasswordInput.propTypes = {\n id: PropTypes.string,\n name: PropTypes.string,\n value: PropTypes.string,\n placeholder: PropTypes.string,\n label: PropTypes.string,\n isValidation: PropTypes.bool,\n isRequired: PropTypes.bool,\n isDisabled: PropTypes.bool,\n isReadOnly: PropTypes.bool,\n errorMessage: PropTypes.string,\n isInvalid: PropTypes.bool,\n onChange: PropTypes.func,\n onBlur: PropTypes.func,\n className: PropTypes.string,\n size: PropTypes.oneOf(Object.values(Sizes)),\n};\n\nexport default PasswordInput;\n","export { default } from './PasswordInput';\n","import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport WebViewer from '@pdftron/webviewer';\n\nconst PdfViewer = ({ documentUrl, config = {}, children, className, onInit = () => {} }) => {\n const viewerRef = useRef();\n\n useEffect(() => {\n WebViewer(\n {\n path: '/pdftron/',\n css: '/pdftron/custom.css',\n preloadWorker: `${WebViewer.WorkerTypes.PDF},${WebViewer.WorkerTypes.OFFICE}`,\n initialDoc: documentUrl,\n useDownloader: false,\n loadAsPDF: true,\n disableLogs: process.env.NODE_ENV === 'production',\n licenseKey: process.env.PDFJS_KEY,\n ...config,\n },\n viewerRef.current\n ).then(onInit);\n }, []);\n\n return (\n \n
\n )}\n \n
\n
\n
\n
\n
\n
\n \n {isInputTypeText ?
\n \n {children}\n
\n );\n};\n\nPdfViewer.propTypes = {\n documentUrl: PropTypes.string.isRequired,\n config: PropTypes.object,\n children: PropTypes.node,\n className: PropTypes.string,\n onInit: PropTypes.func,\n};\n\nexport default PdfViewer;\n","export { default } from './PdfViewer';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { FiMenu, FiDownloadCloud, FiX } from 'react-icons/fi';\nimport IconButton from 'components/v2/shared/IconButton';\n\nconst PdfViewerTopbar = ({ title, onClose, onDownload, onShowMenu, isViewingMenu }) => (\n \n \n \n\n {onShowMenu && (\n \n
\n\n {title}
\n\n \n {onShowMenu && (\n \n \n )}\n\n \n \n
\n \n);\n\nPdfViewerTopbar.propTypes = {\n title: PropTypes.string,\n onClose: PropTypes.func,\n onDownload: PropTypes.func,\n onShowMenu: PropTypes.func,\n isViewingMenu: PropTypes.bool,\n};\n\nexport default PdfViewerTopbar;\n","export { default } from './PdfViewerTopbar';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\nimport { usePlacesWidget } from 'react-google-autocomplete';\n\nimport TextInput from '../TextInput';\n\nconst PlacesInput = ({ onChange, ...props }) => {\n const { ref } = usePlacesWidget({\n options: {\n types: ['geocode'],\n },\n onPlaceSelected: (place) => onChange(place.formatted_address),\n });\n\n return \n {inputMap[key].component}\n
\n ));\n\n return (\n \n
\n );\n};\n\nSearchBar.propTypes = {\n onChange: PropTypes.func,\n className: PropTypes.string,\n};\n\nexport default SearchBar;\n","export { default } from './SearchBar'","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nconst BreadcrumbItem = ({ name, isSelected, onClick, className }) => (\n \n \n \n
\n \n \n {name}\n
\n /\n \n);\n\nBreadcrumbItem.propTypes = {\n name: PropTypes.string,\n isSelected: PropTypes.bool,\n onClick: PropTypes.func,\n className: PropTypes.string,\n};\n\nexport default BreadcrumbItem;\n","export { default } from './BreadcrumbItem';\n","import React, { useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\nconst Breadcrumbs = ({ items = [], onClick }) => {\n const handleBreadcrumbItemClick = (item) => () => onClick(item);\n const renderBreadcrumbItems = items.map((item, index) => (\n {renderBreadcrumbItems}
;\n};\n\nBreadcrumbs.propTypes = {\n items: PropTypes.array,\n onClick: PropTypes.func,\n};\n\nexport default Breadcrumbs;\n","export { default } from './Breadcrumbs';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ContentAreaItem from '../ContentAreaItem';\nimport LoadingIndicator from 'components/v2/shared/LoadingIndicator';\nimport Placeholder from '../Placeholder';\n\nconst ContentArea = ({ isLoading, isFetchingMore, items = [], onClick, isSelected = () => false }) => {\n const handleItemClick = (item) => () => onClick(item);\n const renderItems = items.map((item) => (\n \n {renderItems}\n
\n );\n};\n\nContentArea.propTypes = {\n items: PropTypes.array,\n onClick: PropTypes.func,\n isSelected: PropTypes.func,\n isLoading: PropTypes.bool,\n isFetchingMore: PropTypes.bool,\n};\n\nexport default ContentArea;\n","export { default } from './ContentArea';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { FiFile, FiFolder } from 'react-icons/fi';\n\nexport const Variants = {\n Directory: 'Directory',\n Document: 'Document',\n};\n\nconst variantIconMap = {\n [Variants.Directory]: FiFolder,\n [Variants.Document]: FiFile,\n};\n\nconst ContentAreaItem = ({ name, variant, isSelected = false, onClick }) => {\n const VariantIcon = variantIconMap[variant];\n\n return (\n \n \n {name}\n
\n \n\n \n \n \n\n \n \n\n \n \n \n\n \n
\n);\n\nFooter.propTypes = {\n selectedCount: PropTypes.number,\n isViewingSelected: PropTypes.bool,\n onShowSelected: PropTypes.func,\n onClearSelected: PropTypes.func,\n onHideSelected: PropTypes.func,\n onAddSelected: PropTypes.func,\n};\n\nexport default Footer;\n","export { default } from './Footer';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { FiChevronDown } from 'react-icons/fi';\n\nconst OrderToggle = ({ isRotated, onClick }) => (\n \n
\n);\n\nOrderToggle.propTypes = {\n isRotated: PropTypes.bool,\n onClick: PropTypes.func,\n};\n\nexport default OrderToggle;\n","export { default } from './OrderToggle';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nconst Placeholder = ({ message }) => (\n By Name
\n \n
\n);\n\nPlaceholder.propTypes = {\n message: PropTypes.string.isRequired,\n};\n\nexport default Placeholder;\n","export { default } from './Placeholder';\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport {\n SelectDocumentModalContextProvider,\n useSelectDocumentModalContext,\n} from 'contexts/v2/SelectDocumentModalContext';\nimport { withContext } from 'utils/v2/shared';\nimport { useInView } from 'react-intersection-observer';\nimport Modal, { Sizes } from 'components/v2/shared/Modal';\nimport Sidebar from './Sidebar';\nimport Topbar from './Topbar';\nimport OrderToggle from './OrderToggle';\nimport Breadcrumbs from './Breadcrumbs';\nimport ContentArea from './ContentArea';\nimport SelectedItemList from './SelectedItemList';\nimport Footer from './Footer';\nimport DocumentUpload from 'components/v2/shared/DocumentUpload';\nimport Button, { Variants } from 'components/v2/shared/Button';\nimport VisibilityWrapper from 'components/v2/shared/VisibilityWrapper';\n\nconst SelectDocumentModal = ({ isOpen, onAdd, onClose }) => {\n const { ref: loadMoreRef, inView: loadMoreInView } = useInView();\n\n const {\n isLoading,\n isFetchingMore,\n isSidebarItemSelected,\n sortDirection,\n toggleSortDirection,\n isSortDirectionAscending,\n sidebarItems,\n selectSidebarItem,\n isSelectedSidebarItem,\n breadcrumbItems,\n selectBreadcrumbItem,\n contentAreaItems,\n selectContentAreaItem,\n isSelectedContentAreaItem,\n selectedItems,\n enterBrowseMode,\n isBrowsing,\n enterUploadMode,\n isUploading,\n enterSearchMode,\n isSearching,\n enterViewSelectedMode,\n isViewingSelected,\n clearSelectedItems,\n canUpload,\n fetchMoreContentAreaItems,\n refetchCurrentDirectory,\n uploadDocument,\n } = useSelectDocumentModalContext();\n\n useEffect(() => {\n if (loadMoreInView && !isUploading) {\n fetchMoreContentAreaItems();\n }\n }, [loadMoreInView]);\n\n const handleAddSelected = () => onAdd && onAdd(selectedItems);\n const handleDismissDocumentUpload = () => {\n refetchCurrentDirectory();\n enterBrowseMode();\n };\n\n return (\n {message}
\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n\n \n
\n \n \n \n\n \n \n \n\n \n
\n \n {isUploading && (\n \n \n\n \n \n
\n \n \n
\n )}\n\n \n
\n \n \n \n\n
\n);\n\nSelectedItem.propTypes = {\n name: PropTypes.string,\n onClick: PropTypes.func,\n};\n\nexport default SelectedItem;\n","export { default } from './SelectedItem';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport SelectedItem from '../SelectedItem';\nimport Placeholder from '../Placeholder';\n\nconst SelectedItemList = ({ items, onClick }) => {\n const handleSelectedItemClick = (item) => () => onClick(item);\n const renderSelectedItems = items.map((item) => (\n \n
\n {name}
\n {renderSelectedItems}
;\n};\n\nSelectedItemList.propTypes = {\n items: PropTypes.array,\n onClick: PropTypes.func,\n};\n\nexport default SelectedItemList;\n","export { default } from './SelectedItemList';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport SidebarItem from '../SidebarItem';\n\nconst Sidebar = ({ items, onClick, isSelected = () => false }) => {\n const handleItemClick = (item) => () => onClick(item);\n const renderSidebarItems = items.map((item) => (\n \n
\n );\n};\n\nSidebar.propTypes = {\n items: PropTypes.array,\n onClick: PropTypes.func,\n isSelected: PropTypes.func,\n};\n\nexport default Sidebar;\n","export { default } from './Sidebar';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nconst SidebarItem = ({ name, onClick, isSelected }) => (\n Documents
\n {renderSidebarItems}
\n \n
\n );\n};\n\nTopbar.propTypes = {\n isSearching: PropTypes.bool,\n canUpload: PropTypes.bool,\n onSearch: PropTypes.func,\n onUpload: PropTypes.func,\n onCancel: PropTypes.func,\n};\n\nexport default Topbar;\n","export { default } from './Topbar';\n","export { default } from './SelectDocumentModal';\n","import React from 'react';\nimport { MockedProvider } from '@apollo/client/testing';\nimport { SELECT_DOCUMENT_MODAL_QUERY } from 'data/v2/queries/SelectDocumentModalQuery';\nimport { WildcardMockLink } from 'wildcard-mock-link';\nimport { ASC, DESC } from 'data/globals/SortDirections';\nimport { PARENT_TYPE, ITEMS_PER_PAGE, SIDEBAR_ALL_ITEM } from 'contexts/v2/SelectDocumentModalContext';\n\nconst rootDirectories = [\n {\n id: 'gid://shaparency/Directory/1',\n name: 'Meeting Folders',\n __typename: 'Directory',\n capabilities: {\n canCreate: false,\n },\n },\n {\n id: 'gid://shaparency/Directory/2',\n name: 'Personal Folders',\n __typename: 'Directory',\n capabilities: {\n canCreate: true,\n },\n },\n {\n id: 'gid://shaparency/Directory/3',\n name: 'Company Folders',\n __typename: 'Directory',\n capabilities: {\n canCreate: true,\n },\n },\n {\n id: 'gid://shaparency/Directory/4',\n name: 'SmartSign',\n __typename: 'Directory',\n capabilities: {\n canCreate: true,\n },\n },\n];\n\nconst edges = [\n {\n node: {\n id: 'gid://shaparency/Directory/5',\n name: 'Sample folder',\n __typename: 'Directory',\n capabilities: {\n canCreate: true,\n },\n },\n },\n {\n node: {\n id: 'gid://shaparency/Document/1',\n name: 'Sample document 1',\n __typename: 'Document',\n },\n },\n {\n node: {\n id: 'gid://shaparency/Document/2',\n name: 'Sample document 2',\n __typename: 'Document',\n },\n },\n {\n node: {\n id: 'gid://shaparency/Document/3',\n name: 'Sample document 3',\n __typename: 'Document',\n },\n },\n {\n node: {\n id: 'gid://shaparency/Document/4',\n name: 'Sample document 4',\n __typename: 'Document',\n },\n },\n {\n node: {\n id: 'gid://shaparency/Document/5',\n name: 'Sample document 5',\n __typename: 'Document',\n },\n },\n {\n node: {\n id: 'gid://shaparency/Document/6',\n name: 'Sample document 6',\n __typename: 'Document',\n },\n },\n {\n node: {\n id: 'gid://shaparency/Document/7',\n name: 'Sample document 7',\n __typename: 'Document',\n },\n },\n {\n node: {\n id: 'gid://shaparency/Document/8',\n name: 'Sample document 8',\n __typename: 'Document',\n },\n },\n];\n\nconst pageInfo = {\n hasNextPage: false,\n endCursor: 'MTU',\n __typename: 'PageInfo',\n};\n\nconst makeVars = (args = {}) => ({\n first: ITEMS_PER_PAGE,\n parentId: SIDEBAR_ALL_ITEM.id,\n parentType: PARENT_TYPE,\n searchTerm: '',\n sortDirection: DESC,\n ...args,\n});\n\nconst makeRequest = (queryVars = {}) => ({\n query: SELECT_DOCUMENT_MODAL_QUERY,\n variables: makeVars(queryVars),\n});\n\nconst makeResponse = (edges) => ({\n data: {\n currentCompany: {\n id: 'gid://shaparency/Company/1',\n __typename: 'Company',\n rootDirectories,\n searchableEntries: {\n pageInfo,\n edges,\n },\n },\n },\n});\n\nexport const mocks = [\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest(),\n result: makeResponse(edges),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ sortDirection: ASC }),\n result: makeResponse([...edges].reverse()),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ parentId: 'gid://shaparency/Directory/1' }),\n result: makeResponse([edges[1], edges[2]]),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ parentId: 'gid://shaparency/Directory/1', sortDirection: ASC }),\n result: makeResponse([edges[2], edges[1]]),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ parentId: 'gid://shaparency/Directory/2' }),\n result: makeResponse([edges[3], edges[4]]),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ parentId: 'gid://shaparency/Directory/2', sortDirection: ASC }),\n result: makeResponse([edges[4], edges[3]]),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ parentId: 'gid://shaparency/Directory/3' }),\n result: makeResponse([edges[5], edges[6]]),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ parentId: 'gid://shaparency/Directory/3', sortDirection: ASC }),\n result: makeResponse([edges[6], edges[5]]),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ parentId: 'gid://shaparency/Directory/4' }),\n result: makeResponse([edges[7], edges[8]]),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ parentId: 'gid://shaparency/Directory/4', sortDirection: ASC }),\n result: makeResponse([edges[8], edges[7]]),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ searchTerm: 'Folder' }),\n result: makeResponse([edges[0]]),\n },\n\n {\n nMatches: Number.POSITIVE_INFINITY,\n request: makeRequest({ sortDirection: ASC, searchTerm: 'Folder' }),\n result: makeResponse([edges[0]]),\n },\n];\n\nconst link = new WildcardMockLink(mocks);\n\nexport const withMockedProvider = (children) => Documents
\n\n \n
\n \n
\n\n \n \n Search\n \n\n \n \n \n\n \n \n \n
\n {item.label}
\n {pluralize('member', item.contacts.length, true)}
\n \n
\n {item.label}
\n {item.companyPosition}
\n \n \n
\n\n - \n \n {renderVirtualItems}\n
\n {!!label && }\n\n \n
\n\n \n \n
\n\n \n
\n );\n\n const variantMap = {\n regular: renderSpinner,\n global: createPortal(renderSpinner, portalTarget),\n };\n\n return variantMap[variant];\n};\n\nSpinner.propTypes = {\n variant: PropTypes.oneOf(VARIANTS),\n show: PropTypes.bool,\n className: PropTypes.string,\n};\n\nexport default Spinner;\n","import { css } from '@emotion/core';\nimport { HexToRgba } from 'components/shared/helpers/HexToRgba';\nimport { colors } from 'styles';\n\nexport const container = {\n base: css`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999999;\n `,\n\n global: css`\n background: ${colors.white};\n opacity: 0.7;\n `,\n};\n","export const VARIANTS = ['regular', 'global'];\n","export { default } from './Spinner';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nexport const Variants = {\n Gray: 'gray',\n Green: 'green',\n Teal: 'teal',\n Black: 'black',\n Faint: 'faint',\n Orange: 'orange',\n Purple: 'purple',\n Red: 'red',\n Chair: 'chair',\n Admin: 'admin',\n};\n\nconst StateBadge = ({ variant = Variants.Gray, alignEnd = false, children, className }) => (\n \n {headerGroups.map((headerGroup) =>\n headerGroup.headers.map((column) => (\n
\n );\n};\n\nTable.propTypes = {\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n Header: PropTypes.string.isRequired,\n accessor: PropTypes.string.isRequired,\n })\n ).isRequired,\n data: PropTypes.array.isRequired,\n};\n\nexport default Table;\n","export { default } from './Table';\n","/** @jsx jsx */\n\nimport React, { useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { Row, Col } from 'react-bootstrap';\n\nimport Button, { Variants } from './../Button';\nimport TextInput from './../TextInput';\nimport SelectInput from 'components/v2/shared/SelectInput';\nimport TextAreaInput from './../TextAreaInput';\nimport ResourceManager from './../ResourceManager';\n\nimport { TASK_DEFAULTS } from './constants';\nimport { getFieldData } from 'utils/v2/data';\nimport { useContactsContext } from 'contexts/v2/ContactsContext';\nimport { useTasksContext } from 'contexts/v2/TasksContext';\n\nimport * as styles from './TaskManager.styles';\n\nconst TaskManager = ({ className }) => {\n const [attributes, setAttributes] = useState({ ...TASK_DEFAULTS });\n const [errors, setErrors] = useState({});\n\n const handleFieldChange = (fieldName) => (e) => {\n const value = getFieldData(e);\n setAttributes((state) => ({ ...state, [fieldName]: value }));\n };\n\n const { contacts } = useContactsContext();\n const { addTask } = useTasksContext();\n\n const handleAddTask = (resetResourceManager) => async () => {\n setErrors({});\n\n try {\n await addTask(attributes);\n resetResourceManager();\n setAttributes({ ...TASK_DEFAULTS });\n } catch (e) {\n setErrors(e);\n }\n };\n\n const inputMap = {\n description: {\n label: 'Description',\n component: (\n \n {column.render('Header')}\n
\n ))\n )}\n\n {rows.map((row, i) => {\n prepareRow(row);\n\n return row.cells.map((cell) => (\n \n {cell.render('Cell')}\n
\n ));\n })}\n TODO: Attachment component
,\n },\n\n assignee: {\n label: 'Assignee',\n component: (\nTODO: Notice times based on meeting date
,\n },\n };\n\n return (\n\n \n
\n \n );\n }\n);\n\nTextAreaInput.propTypes = {\n id: PropTypes.string,\n name: PropTypes.string,\n label: PropTypes.string,\n placeholder: PropTypes.string,\n isRequired: PropTypes.bool,\n isDisabled: PropTypes.bool,\n isReadOnly: PropTypes.bool,\n errorMessage: PropTypes.string,\n value: PropTypes.any,\n onChange: PropTypes.func,\n};\n\nexport default TextAreaInput;\n","export { default } from './TextAreaInput';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { COLORS } from './constants';\n\nimport * as styles from './TextBadge.styles';\n\nconst TextBadge = ({ color = 'orange', text, className }) => (\n \n {text}\n
\n);\n\nTextBadge.propTypes = {\n color: PropTypes.oneOf(COLORS),\n text: PropTypes.string,\n className: PropTypes.string,\n};\n\nexport default TextBadge;\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const badge = {\n base: css`\n ${fonts.regular}\n border-radius: 4px;\n display: inline-flex;\n padding: 3px 5px;\n min-width: 65px;\n align-items: center;\n font-size: 12px;\n justify-content: center;\n line-height: 1.2;\n `,\n\n white: css`\n background: ${colors.white};\n color: ${colors.lightGrey};\n border: 0.8px solid ${colors.lightGrey};\n `,\n\n orange: css`\n background: ${colors.lightestOrange};\n color: ${colors.orange};\n `,\n\n red: css`\n color: ${colors.white};\n background: ${colors.red};\n `,\n\n lightPurple: css`\n color: ${colors.purple};\n background: ${colors.badgeGrey};\n `,\n};\n","export const COLORS = ['white', 'orange', 'red', 'lightPurple'];\n","export { default } from './TextBadge';\n","/** @jsx jsx */\n\nimport React from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\n\nimport { COLORS } from './constants';\n\nimport * as styles from './TextButton.styles';\n\nconst TextButton = ({ color = 'cyan', text, onClick, isDisabled, className }) => (\n \n {!!label && (\n \n )}\n
\n );\n }\n);\n\nTextInput.propTypes = {\n id: PropTypes.string,\n name: PropTypes.string,\n value: PropTypes.string,\n placeholder: PropTypes.string,\n label: PropTypes.string,\n isRequired: PropTypes.bool,\n isDisabled: PropTypes.bool,\n isReadOnly: PropTypes.bool,\n errorMessage: PropTypes.string,\n isInvalid: PropTypes.bool,\n onChange: PropTypes.func,\n className: PropTypes.string,\n size: PropTypes.oneOf(Object.values(Sizes)),\n};\n\nexport default TextInput;\n","export { default } from './TextInput';\n","import React, { useRef, useLayoutEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Button from 'components/v2/shared/Button';\nimport { intl } from 'contexts/v2/TranslationContext';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\n\nconst maxLinesClassMap = {\n 1: 'tw-line-clamp-1',\n 2: 'tw-line-clamp-2',\n 3: 'tw-line-clamp-3',\n 4: 'tw-line-clamp-4',\n};\n\nconst TextLineClampWithToggle = ({ text, maxLines = 1, className }) => {\n const [isClamped, setIsClamped] = useState(true);\n const [isToggleVisible, setIsToggleVisible] = useState(true);\n const toggleIsClamped = () => setIsClamped((prev) => !prev);\n\n const textRef = useRef();\n const { width: windowWidth, height: windowHeight } = useWindowDimensions();\n\n useLayoutEffect(() => {\n if (!textRef) return;\n if (!textRef.current) return;\n if (!isClamped) return setIsToggleVisible(true);\n\n const { clientHeight, scrollHeight } = textRef.current;\n setIsToggleVisible(clientHeight < scrollHeight);\n }, [windowWidth, windowHeight, text, className, maxLines]);\n\n const renderButtonText = () => {\n const textElements = isClamped\n ? ['+', intl.formatMessage({ id: 'TextLineClampWithToggle.show' })]\n : ['-', intl.formatMessage({ id: 'TextLineClampWithToggle.hide' })];\n\n return textElements.join(' ');\n };\n\n if (!text) {\n return null;\n }\n\n return (\n \n
\n \n \n {renderButtonText()}\n \n
\n );\n};\n\nTextLineClampWithToggle.propTypes = {\n text: PropTypes.string,\n maxLines: PropTypes.number,\n className: PropTypes.string,\n};\n\nexport default TextLineClampWithToggle;\n","export { default } from './TextLineClampWithToggle';\n","/** @jsx jsx */\n\nimport React, { useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\n\nimport TextInput from '../TextInput';\nimport Label from '../Label';\nimport InputError from '../InputError';\nimport * as styles from './TimePicker.styles';\n\nconst TimePicker = ({ className, value, isDisabled, onChange, label, errorMessage }) => {\n const [timeValue, setTimeValue] = useState(moment(value).parseZone());\n\n const getTimeValues = () => {\n return [timeValue.format('hh'), timeValue.format('mm'), timeValue.format('A')];\n };\n\n useEffect(() => {\n value && setTimeValue(moment(value).parseZone());\n }, [value]);\n\n const modifyValue = (valueName, value) => () => {\n if (isDisabled) {\n return;\n }\n\n setTimeValue(timeValue.add(value, valueName));\n onChange(timeValue);\n };\n\n const setValue = (valueName) => (e) => {\n if (isDisabled) {\n return;\n }\n\n setTimeValue(timeValue[valueName](parseInt(e.target.value)));\n onChange(timeValue);\n };\n\n const setAmPm = (value) => () => {\n if (isDisabled) {\n return;\n }\n\n const [, , amPm] = getTimeValues();\n if (amPm === value) {\n return;\n }\n\n if (amPm === 'AM') {\n setTimeValue(timeValue.add(12, 'hours'));\n } else {\n setTimeValue(timeValue.subtract(12, 'hours'));\n }\n onChange(timeValue);\n };\n\n const getAmPmButtonStyles = (value) => {\n const [, , amPm] = getTimeValues();\n return [styles.amPmButton.base, amPm === value && styles.amPmButton.active];\n };\n\n const [hourValue, minuteValue, amPmValue] = getTimeValues();\n\n return (\n \n {text}\n
\n\n \n \n
\n );\n};\n\nTimePicker.propTypes = {\n value: PropTypes.instanceOf(moment),\n isDisabled: PropTypes.bool,\n className: PropTypes.string,\n onChange: PropTypes.func,\n label: PropTypes.string,\n errorMessage: PropTypes.string,\n};\n\nexport default TimePicker;\n","import { css } from '@emotion/core';\nimport { fonts, colors } from 'styles';\n\nexport const mainWrapper = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const component = css`\n display: flex;\n flex-direction: row;\n`;\n\nexport const wrapper = css`\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-right: 5px;\n\n i {\n font-weight: 300;\n color: ${colors.mediumGrey};\n\n &:hover {\n cursor: pointer;\n color: ${colors.cyan};\n }\n }\n\n input {\n width: 40px;\n border-radius: 2px;\n height: 44px;\n color: ${colors.black};\n padding: 0;\n text-align: center;\n ${fonts.styledSemiBold}\n\n @media (maxWidth: 991px) {\n font-size: 16px;\n line-height: 24px;\n }\n`;\n\nexport const timeDelimeter = css`\n display: flex;\n align-items: center;\n color: ${colors.lightGrey};\n margin-right: 5px;\n`;\n\nexport const amPmcontainer = css`\n margin-left: 5px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-top: 3px;\n`;\n\nexport const amPmButton = {\n base: css`\n width: 40px;\n height: 20px;\n background: ${colors.grey};\n border-radius: 2px;\n font-size: 12px;\n line-height: 20px;\n color: ${colors.mediumGrey};\n cursor: pointer;\n text-align: center;\n margin-bottom: 5px;\n `,\n active: css`\n background: ${colors.cyan};\n color: ${colors.white};\n `,\n};\n\nexport const errorWrapper = css`\n position: relative;\n margin-top: 20px;\n`;\n","export { default } from './TimePicker';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Toaster as ReactToaster, resolveValue, toast } from 'react-hot-toast';\nimport { Transition } from '@headlessui/react';\nimport clsx from 'clsx';\nimport IconButton from '../IconButton';\nimport { IoClose, IoCloseCircle, IoInformationCircle } from 'react-icons/io5';\nimport { FaCheckCircle } from 'react-icons/fa';\nimport { RiErrorWarningFill } from 'react-icons/ri';\n\nexport const Severity = {\n Success: 'success',\n Error: 'error',\n Info: 'info',\n Warning: 'warning',\n};\n\nconst styles = {\n [Severity.Success]: {\n background: 'tw-bg-green-100',\n border: 'tw-border tw-border-l-teal-700',\n icon: 'tw-text-2xl tw-text-teal-700',\n },\n [Severity.Error]: {\n background: 'tw-bg-red-100',\n border: 'tw-border tw-border-l-red-600',\n icon: 'tw-text-2xl tw-text-red-600',\n },\n [Severity.Warning]: {\n background: 'tw-bg-orange-100',\n border: 'tw-border tw-border-l-orange-600',\n icon: 'tw-text-2xl tw-text-orange-600',\n },\n [Severity.Info]: {\n background: 'tw-bg-gray-100',\n border: 'tw-border tw-border-l-gray-700',\n icon: 'tw-text-2xl tw-text-gray-700',\n },\n};\n\nconst ToasterIcon = ({ severity, className }) => {\n switch (severity) {\n case Severity.Success:\n return \n
\n \n
\n \n :\n \n \n \n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n
\n \n AM\n
\n \n PM\n
\n \n
\n \n \n {(t) => (\n \n toast.dismiss(t.id)}\n className='tw-relative -tw-top-2 tw-right-0 tw-p-0 tw-text-sm hover:tw-bg-transparent'\n >\n
\n );\n};\n\nToaster.propTypes = {\n severity: PropTypes.oneOf(Object.values(Severity)),\n status: PropTypes.string,\n message: PropTypes.string,\n};\n\nexport default React.memo(Toaster);\n","export { default, Severity } from './Toast'","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nconst VisibilityWrapper = ({\n name,\n isVisible,\n children,\n className,\n invisibleClass = 'tw-hidden',\n visibleClass = 'tw-block',\n}) => (\n \n
\n {status}
\n{message}
\nTODO: Attachment component
,\n },\n\n assignees: {\n label: 'Assign',\n component: (\n\n
\n )}\n\n {/* ------------------------Invite Contact-------------------------- */}\n \n
\n \n
\n \n
\n Logo
\n \n
\n Registered details
\n \n
\n \n
\n \n
\n \n
\n \n Registered Company Address\n
\n \n
\n \n
\n Website
\n \n
\n \n \n
\n \n onSwitchChangeHandle('use_company_name')}\n isChecked={isActive.use_company_name}\n isGray={isActive.use_company_name}\n />\n
\n \n Use company name\n
\n \n
\n \n onContinue('invite-users')}\n >\n Create company\n \n
\n \n
\n \n
\n \n ${data.amount} AUD / month\n
\n \n
\n \n \n Inclusions\n \n
\n\n \n \n Purchase plan\n \n
\n {isActiveInclusions &&
\n {isActivePurchasePlan && \n \n Complete payment\n \n
\n \n \n Cancel purchase\n \n
\n \n )}\n \n );\n};\n\nexport default planDetails;\n","import React from 'react';\nimport { FiChevronDown } from 'react-icons/fi';\n\nconst Inclusions = ({ planData }) => {\n return (\n <>\n \n
\n Inclusions
\n\n {planData.map((row, i) => {\n return (\n
\n \n );\n};\n\nexport default Inclusions;\n","import React, { useState, useEffect } from 'react';\nimport Heading from 'components/v2/shared/Heading';\nimport Switch from 'components/v2/shared/Switch';\nimport Button from 'components/v2/shared/Button';\nimport Box from 'components/v2/shared/Box';\nimport { FiChevronRight } from 'react-icons/fi';\nimport clsx from 'clsx';\nimport logoFooter from 'images/icons/logo-footer.svg';\nimport Chooseyourplan from './Chooseyourplan';\n\nconst Index = () => {\n const [isIndexPlan, setIndexPlan] = useState(0);\n const [isActive, setActive] = useState(false);\n const [isActivePaymentSuccess, setActivePaymentSuccess] = useState(false);\n const [isActivePlan, setActivePlan] = useState(false);\n const [planData] = useState([\n {\n title: 'Standard Business',\n amount: 30,\n },\n {\n title: 'Education and Associations',\n amount: 120,\n },\n {\n title: 'Start Up and Charity',\n amount: 160,\n },\n ]);\n const [selectedPlanData, setSelectedPlanData] = useState(planData && planData.length > 0 ? planData[0] : '');\n\n const handleOnSwitchChange = () => {\n setActive((current) => !current);\n };\n const onClickPlan = (data, index) => {\n setActivePlan(true);\n setSelectedPlanData(data);\n setIndexPlan(index);\n };\n const onClickPaymentSuccess = () => {\n setActivePaymentSuccess(true);\n };\n useEffect(() => {\n setActivePlan(true);\n }, []);\n\n return (\n \n
\n );\n })}\n \n
\n \n
\n {row.title}
\n \n
\n \n \n {!isActivePaymentSuccess && (\n <>\n \n
\n \n )}\n \n \n );\n};\n\nexport default Index;\n","import React, { useState, useEffect } from 'react';\nimport Button from 'components/v2/shared/Button';\nimport SelectInput from 'components/v2/shared/SelectInput';\nimport TextInput from 'components/v2/shared/TextInput';\nimport Shape from 'components/v2/shared/Shape';\nimport { FiChevronLeft, FiPlus, FiX } from 'react-icons/fi';\nimport Heading from 'components/v2/shared/Heading';\n\nconst AddUser = ({ addUser, onClick, isInviteUser, users }) => {\n const [value, setValue] = useState('');\n const handleSubmit = (e) => {\n value && addUser(value);\n setValue('');\n isInviteUser(false);\n };\n\n return (\n \n 
\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n We've made pricing simple, for established companies of any size and to help charities and\n companies just starting out we're offering discounts.\n \n
\n \n
\n \n Select plan below\n
\n\n
\n Pricing by
\n \n
\n \n
\n \n Note - Prices are per month / per boardspace, paid monthly. Exclude VAT.\n
\n\n {planData.map((row, i) => {\n return (\n <>\n
\n \n {\n onClickPlan(row, i);\n }}\n isSelected={isIndexPlan === i}\n className='tw-cursor-pointer !tw-rounded !tw-py-6'\n variant='teal'\n >\n
\n \n );\n })}\n \n
\n \n \n
\n \n {row.title}\n
\n \n
\n \n ${row.amount} AUD / month\n
\n \n
\n \n {}}\n size='large'\n variant='transparent'\n className={clsx('!tw-py-0 !tw-px-0 tw-font-sans !tw-text-xs tw-font-medium', {\n '!tw-text-teal-600': isIndexPlan === i,\n })}\n >\n See inclusions\n \n
\n \n {}}\n size='large'\n variant='transparent'\n className={clsx('!tw-py-0 !tw-px-0 tw-font-sans !tw-text-xs tw-font-medium', {\n '!tw-text-teal-600': isIndexPlan === i,\n })}\n >\n Select plan\n \n
\n \n
\n \n {isActivePlan &&
\n \n
\n );\n};\n\nconst InviteUsers = ({ roles, onClickPage, onClick }) => {\n const [users, setUsers] = useState([]);\n const [isUser, setIsUser] = useState(false);\n\n const onPreviousPage = () => {\n onClickPage(false);\n };\n const addUserOnclick = () => {\n setIsUser(true);\n };\n const onClickInvite = (value) => {\n setIsUser(value);\n };\n const addUsers = (email_id) => setUsers([...users, { email_id }]);\n const addInviteUserContinue = () => {\n onClick('list');\n };\n const removeInvitedUsers = (index) => {\n const invitedUser = [...users];\n invitedUser.splice(index, 1);\n setUsers(invitedUser);\n };\n\n return (\n <>\n \n \n
\n \n
\n \n );\n};\nexport default InviteUsers;\n","import React from 'react';\nimport Box from 'components/v2/shared/Box';\nimport Button from 'components/v2/shared/Button';\n\nconst OrderOverview = () => {\n return (\n <>\n \n
\n \n {users.map((row, i) => {\n return (\n <>\n
\n\n {isUser ? (\n \n
\n \n );\n })}\n \n
\n \n
\n \n {row.email_id}\n
\n \n
\n \n {\n removeInvitedUsers(i);\n }}\n />\n
\n \n \n
\n \n )}\n \n
\n Order overview
\n\n {}} onRemove={function noRefCheck() {}} className='!tw-py-2'>\n \n
\n\n \n
\n \n
\n Plan
\n \n
\n Education and Associations
\n \n {}} onRemove={function noRefCheck() {}} className='!tw-py-2'>\n \n
\n \n
\n \n
\n Due today
\n \n First payment will be taken immediately, then yearly on the 5th of July. Charged in USD.\n
\n\n
\n $30.00
\n \n \n \n
\n\n \n
\n \n
\n Taxes (UK 20%)
\n \n {}}\n size='small'\n variant='transparent'\n className='tw-font-sans tw-text-xs !tw-font-medium\t!tw-text-teal-500'\n >\n Swap location\n \n
\n \n
\n $6.00
\n \n {}} className='!tw-py-2'>\n \n
\n \n
\n \n
\n Coupon discount
\n 10%
\n \n
\n $12.60
\n \n {}} className='!tw-py-2'>\n \n
\n \n );\n};\n\nexport default OrderOverview;\n","import React, { useState } from 'react';\nimport Button from 'components/v2/shared/Button';\nimport TextInput from 'components/v2/shared/TextInput';\nimport Alert from 'components/v2/shared/Alert';\nimport Label from 'components/v2/shared/Label';\nimport OrderOverview from './OrderOverview';\n\nconst PurchasePlan = ({}) => {\n const [isActiveCouponCode, setActiveCouponCode] = useState(false);\n const handleApplyCouponcode = () => {\n setActiveCouponCode(true);\n };\n\n return (\n <>\n \n
\n \n
\n Total
\n \n
\n $36.00
\n \n
\n Purchase plan with Credit Card
\n\n
\n \n
\n {isActiveCouponCode && (\n <>\n \n \n
\n\n \n
\n \n
\n \n
\n\n \n {}}\n size='large'\n variant='red'\n className='tw-absolute tw-right-1 tw-top-1'\n >\n Retry\n \n
\n \n
\n \n )}\n {!isActiveCouponCode && (\n \n \n Apply coupon code\n \n
\n )}\n\n \n
\n \n );\n};\n\nexport default PurchasePlan;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ListItem, { ListItemPlaceholder } from 'components/v2/smartSign/ListItem';\nimport ListPlaceholder from 'components/v2/shared/ListPlaceholder';\nimport { injectIntl, FormattedMessage } from 'react-intl';\nimport { formatDate, formatTime } from 'helpers/formatDateTime';\n\nconst List = ({ items = [], intl }) => (\n \n
\n);\n\nList.propTypes = {\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n signedSignatureCount: PropTypes.number.isRequired,\n totalSignatureCount: PropTypes.number.isRequired,\n status: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n owner: PropTypes.shape({\n initials: PropTypes.string.isRequired,\n }).isRequired,\n })\n ),\n};\n\nexport default injectIntl(List);\n","export { default } from './List';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ListItemTemplate from 'components/v2/smartSign/ListItemTemplate';\nimport StateBadge from 'components/v2/shared/StateBadge';\nimport Box from 'components/v2/shared/Box';\nimport Avatar from 'components/v2/shared/Avatar';\nimport Shape from 'components/v2/shared/Shape';\nimport { documentStatusBadgeVariantMap } from 'components/v2/smartSign/constants';\n\nexport const ListItemPlaceholder = () => (\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n\n \n
\n \n {!items.length && (\n
\n {`${signedSignatureCount} / ${totalSignatureCount}`}
\n }\n statusNode={\n {status}
\n {createdAtDate}
\n \n
\n\n {nameNode}
\n {signatureCountNode}
\n\n \n {statusNode}\n
\n\n \n\n \n {dateNode}\n {timeNode}\n
\n \n
\n \n
\n {signatureCountNode}
\n {ownerNode}\n {nameNode}
\n \n \n
\n \n\n \n {signatureCountNode}\n {statusNode}\n
\n {nameNode}
\n {signatureCountNode}
\n {statusNode}
\n \n
\n \n {dateNode}\n {timeNode}\n
\n {ownerNode}
\n \n \n
\n \n
\n\n \n
\n \n
\n {name}
\n {email}
\n \n
\n \n
\n \n \n \n
\n\n {`${signedSignatureCount} / ${totalSignatureCount}`}
\n\n {status}
\n \n {items.map((item) => (\n
\n);\n\nSignatoryList.propTypes = {\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n ...SignatoryItem.propTypes,\n })\n ),\n};\n\nexport default SignatoryList;\n","export { default } from './SignatoryList';\n","export const documentStatusBadgeVariantMap = {\n draft: 'gray',\n completed: 'green',\n signed: 'teal',\n pending: 'orange',\n recalled: 'red',\n corrupted: 'black',\n};\n\nexport const signatoryStatusBadgeVariantMap = {\n pending: 'orange',\n signed: 'teal',\n viewed: 'purple',\n bounced: 'red',\n};\n","/** @jsx jsx */\nimport React, { memo, useState, useRef } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { StatusBadge } from 'components/shared/StatusBadge';\nimport { Spinner } from 'components/shared/Spinner';\nimport { AlertPopup } from 'components/shared/AlertPopup';\nimport { Steps } from 'components/shared/Steps';\nimport { VoteDetailsForm } from '../VoteDetailsForm';\nimport { PollingForm } from '../PollingForm';\n\nimport * as styles from './Form.styles';\n\nimport { useSteps } from 'hooks/useSteps';\nimport { useVoteEditor } from './../hooks/useVoteEditor';\nimport { useValidateResolutions } from './../hooks/useValidateResolutions';\n\nconst Form = memo(({ voteId, companyId, showPolling, root }) => {\n const intl = useIntl();\n\n const { current: stepMap } = useRef({\n 1: intl.formatMessage({ id: 'Form.voteDetails' }),\n 2: intl.formatMessage({ id: 'Form.polling' }),\n });\n\n const initialStep = showPolling ? 2 : 1;\n\n const { steps, changeStep, advanceStep, jumpStep } = useSteps(stepMap, initialStep);\n const { isLoading, vote } = useVoteEditor({ voteId });\n\n const toggleActiveStep = () => {\n if (!voteId) return;\n if (steps.current === stepMap.details) return advanceStep();\n\n if (vote?.status === 'published') {\n validateResolutions({ voteId: vote?.id });\n } else {\n jumpStep(stepMap.details);\n }\n };\n\n const [showResolutionAlert, setShowResolutionAlert] = useState(false);\n\n const displayResolutionAlert = () => setShowResolutionAlert(true);\n const hideResolutionAlert = () => setShowResolutionAlert(false);\n const changeStepToDetails = () => jumpStep(stepMap.details);\n\n const { validateResolutions } = useValidateResolutions({\n onError: displayResolutionAlert,\n onCompleted: changeStepToDetails,\n });\n\n if (isLoading) return \n
\n \n\n \n
\n \n );\n});\n\nexport { Form };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const navigation = css`\n .nav-tabs {\n .nav-item {\n font-size: 14px;\n line-height: 20px;\n flex: none;\n color: ${colors.mediumGrey};\n flex: unset;\n padding: 10px 20px;\n text-align: center;\n cursor: pointer;\n\n &.active {\n padding: 10px 32px;\n margin-bottom: -1px;\n font-family: ${fonts.bold};\n color: ${colors.purple};\n border-bottom: 1px solid ${colors.purple};\n cursor: default;\n }\n }\n\n ${media.tablet} {\n margin-top: 45px;\n }\n }\n}\n`;\n","export { Form } from './Form';\n","import React, { memo, useState, useEffect } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { useIntl } from 'react-intl';\n\nimport { withIntl } from '../../../utils/v2/intl';\nimport { Select } from '../../shared/Select';\nimport Multiselect from '../../shared/Select/Multiselect';\nimport { Search } from '../../shared/Search';\n\nconst Filters = memo(({ companySlug }) => {\n const intl = useIntl();\n\n const statusOptions = [\n { value: 'draft', label: intl.formatMessage({ id: 'Filters.draft' }) },\n { value: 'open', label: intl.formatMessage({ id: 'Filters.open' }) },\n { value: 'published', label: intl.formatMessage({ id: 'Filters.published' }) },\n { value: 'completed', label: intl.formatMessage({ id: 'Filters.completed' }) },\n { value: 'cancelled', label: intl.formatMessage({ id: 'Filters.cancelled' }) },\n { value: 'archived', label: intl.formatMessage({ id: 'Filters.archived' }) },\n ];\n\n const timeframeOptions = [\n { value: 'all', label: intl.formatMessage({ id: 'Filters.all' }) },\n { value: 'next_30_days', label: intl.formatMessage({ id: 'Filters.next30' }) },\n { value: 'next_6_months', label: intl.formatMessage({ id: 'Filters.next6' }) },\n { value: 'past_year', label: intl.formatMessage({ id: 'Filters.pastYear' }) },\n ];\n\n const initialStatusOptions = statusOptions.filter(({ value }) => !['archived', 'cancelled'].includes(value));\n\n let [selectedStatuses, setSelectedStatuses] = useState(initialStatusOptions);\n let [selectedTimeframe, setSelectedTimeframe] = useState(timeframeOptions[0]);\n let [searchTerm, setSearchTerm] = useState('');\n let [isSearching, setIsSearching] = useState(false);\n\n const handleTermChange = (event) => {\n setSearchTerm(event.target.value || '');\n };\n\n const startSearching = () => {\n setIsSearching(true);\n };\n\n const stopSearching = () => {\n setIsSearching(false);\n setSearchTerm('');\n };\n\n useEffect(() => {\n const query = $.param({\n status: selectedStatuses.filter((option) => option.value).map((option) => option.value),\n timeframe: selectedTimeframe && selectedTimeframe.value,\n search_term: searchTerm,\n });\n\n $.get(`/${companySlug}/voting.js?${query}`);\n }, [selectedStatuses, selectedTimeframe, searchTerm]);\n\n return (\n <>\n \n
\n\n {vote?.status != 'open' && (\n \n
\n \n
\n )}\n\n {steps.current === 1 && \n
\n \n );\n});\n\nexport default withIntl(Filters);\n","/** @jsx jsx */\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { AlertPopup } from 'components/shared/AlertPopup';\n\nconst MeetingAlert = memo(({ show, onClose, onConfirm }) => {\n const intl = useIntl();\n\n return (\n \n
\n\n \n \n \n );\n});\n\nexport { MeetingAlert };\n","export { MeetingAlert } from './MeetingAlert';\n","/** @jsx jsx */\nimport React, { memo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport * as styles from './PollingForm.styles';\n\nimport { LoadingIndicator } from 'components/shared/LoadingIndicator';\nimport { Spinner } from 'components/shared/Spinner';\nimport { AlertPopup } from 'components/shared/AlertPopup';\n\nimport { ResolutionForm } from '../ResolutionForm';\nimport { ResolutionSettings } from '../ResolutionSettings';\nimport { PublishConfirmation } from '../PublishConfirmation';\n\nimport { useCreateResolution } from './../hooks/useCreateResolution';\nimport { useDeleteResolution } from './../hooks/useDeleteResolution';\nimport { useUpdateVoteSettings } from './../hooks/useUpdateVoteSettings';\nimport { useValidateResolutions } from './../hooks/useValidateResolutions';\n\nimport FileViewer from 'components/v2/shared/FileViewer';\nimport { useFileViewer } from '../../documents/hooks/useFileViewer';\n\nimport { UploadWindow } from 'components/shared/UploadWindow/UploadWindow';\n\nconst PollingForm = memo(({ vote, onStepChange, root }) => {\n const previewDocument = (document) => openFileViewer(document);\n\n const { fileViewerContext, openFileViewer, closeFileViewer } = useFileViewer();\n\n const onCreatedResolution = (resolution) => setResolutions(resolutions.concat(resolution));\n const onDeletedResolution = (vote) => setResolutions(vote.resolutions);\n const onUpdatedSettings = () => changeUpdateConfig('success', true);\n\n const changeUpdateConfig = (name, value) => setUpdateConfig((updateConfig) => ({ ...updateConfig, [name]: value }));\n\n const { isCreating, createResolution } = useCreateResolution({ voteId: vote.id, onCompleted: onCreatedResolution });\n const { isDeleting, deleteResolution } = useDeleteResolution({ onCompleted: onDeletedResolution });\n const { isUpdating, updateVoteSettings } = useUpdateVoteSettings({ onCompleted: onUpdatedSettings });\n\n const [resolutions, setResolutions] = useState(vote.resolutions);\n const [pollForVote, setPollForVote] = useState(vote.pollForVote);\n const [config, setConfig] = useState(vote.config);\n const [updateConfig, setUpdateConfig] = useState({ success: false, publish: false });\n\n const votePublished = vote?.status === 'published';\n\n const intl = useIntl();\n\n const assignWindowLocation = () => {\n if (votePublished) {\n window.location.assign(`/${getCompanySlug()}/voting/${vote.slug}`);\n } else {\n window.location.assign(`/${getCompanySlug()}/voting`);\n }\n };\n\n useEffect(() => {\n if (!updateConfig.success) return;\n\n if (updateConfig.publish) {\n setUpdateConfig({ success: false, publish: false });\n setShowPublishConfirmation(true);\n } else {\n assignWindowLocation();\n }\n }, [updateConfig.success]);\n\n const addResolution = () => createResolution();\n const removeResolution = (resolution) => deleteResolution(resolution.id);\n\n const saveVote = () => {\n $('.main').scrollTop(0, 0);\n saveVoteSettings();\n };\n\n const handleSave = () => {\n changeUpdateConfig('publish', false);\n\n if (votePublished) return validateResolutions({ voteId: vote?.id });\n\n saveVote();\n };\n\n const [showPublishConfirmation, setShowPublishConfirmation] = useState(false);\n const [showResolutionAlert, setShowResolutionAlert] = useState(false);\n\n const displayResolutionAlert = () => setShowResolutionAlert(true);\n const hideResolutionAlert = () => setShowResolutionAlert(false);\n\n const { validateResolutions } = useValidateResolutions({ onError: displayResolutionAlert, onCompleted: saveVote });\n\n const hidePublishConfirmation = () => setShowPublishConfirmation(false);\n\n const handleSaveAndPublish = () => {\n changeUpdateConfig('publish', true);\n validateResolutions({ voteId: vote?.id });\n };\n\n const saveVoteSettings = () => {\n updateVoteSettings({\n voteId: vote.id,\n pollForVote: pollForVote,\n config: config,\n });\n };\n\n const refreshResolutions = (vote) => setResolutions(vote.resolutions);\n\n const renderResolutions = resolutions.map((resolution, index) => {\n return (\n \n
\n \n\n \n
\n\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n {renderResolutions}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n \n );\n});\n\nexport { PublishConfirmation };\n","import { css } from '@emotion/core';\n\nexport const modal = css`\n .modal-dialog.shaparency {\n .modal-content {\n .modal-footer {\n margin-top: 30px;\n padding: 16px 0;\n }\n }\n }\n`;\n","export { PublishConfirmation } from './PublishConfirmation';\n","/** @jsx jsx */\nimport React, { memo, useEffect, useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { ResolutionDocumentListItem } from '../ResolutionDocumentListItem';\nimport { ResolutionDocumentsUpload } from '../ResolutionDocumentsUpload';\n\nimport { useDeleteResolutionDocument } from './../hooks/useDeleteResolutionDocument';\nimport { useAttachResolutionDocument } from './../hooks/useAttachResolutionDocument';\n\nimport { Spinner } from 'components/shared/Spinner';\n\nimport { ReactComponent as PlusIcon } from 'images/icons/agenda-plus.svg';\nimport { ReactComponent as MinusIcon } from 'images/icons/agenda-minus.svg';\nimport { ReactComponent as DocumentsIcon } from 'images/icons/agenda-documents.svg';\n\nimport * as styles from './ResolutionDocumentList.styles';\n\nconst ResolutionDocumentList = memo(\n ({ resolution, root, showDocuments, onDocumentClick, toggleShowDocuments, isFullWidth }) => {\n const onDeletedResolutionDocument = (resolutionDocumentId) => {\n setResolutionDocuments(resolutionDocuments.filter((document) => document.id !== resolutionDocumentId));\n };\n\n const { isDeleting, deleteResolutionDocument } = useDeleteResolutionDocument({\n onCompleted: onDeletedResolutionDocument,\n });\n\n const onDocumentAdded = (resolution) => {\n setResolutionDocuments(resolution.resolutionDocuments);\n };\n\n const { isAttaching, attachResolutionDocument } = useAttachResolutionDocument({\n resolutionId: resolution.id,\n onCompleted: onDocumentAdded,\n });\n\n const onBrowseUpload = (documentIds) => attachResolutionDocument(documentIds);\n\n const [resolutionDocuments, setResolutionDocuments] = useState(resolution.resolutionDocuments);\n\n useEffect(() => setResolutionDocuments(resolution.resolutionDocuments), [resolution.resolutionDocuments]);\n\n const renderDocuments = resolutionDocuments.map((resolutionDocument) => {\n return (\n \n {vote.name},\n date1: {formatTime(vote.startedAt)},\n date2: {formatDate(vote.startedAt, userDateFormat)},\n }}\n />\n
\n\n \n
\n \n
\n \n );\n }\n);\n\nexport { ResolutionDocumentList };\n","import { css } from '@emotion/core';\nimport { icons, colors, media } from 'styles';\n\nexport const documentWrapper = ({ isFullWidth }) => css`\n /* width: 100%; */\n width: ${isFullWidth ? '100%' : 'calc(100% - 42px)'};\n border: 1px solid transparent;\n border-top: none;\n padding: 20px;\n border-color: ${colors.border};\n background: ${colors.lightestGrey};\n ${media.mobile} {\n width: 100%;\n }\n`;\n\nexport const showDocumentsIcon = css`\n ${icons.base}\n\n svg {\n path {\n fill: ${colors.black};\n }\n }\n`;\n","export { ResolutionDocumentList } from './ResolutionDocumentList';\n","/** @jsx jsx */\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\n\nimport { ReactComponent as DocumentIcon } from 'images/icons/agenda-document.svg';\n\nimport * as styles from './ResolutionDocumentListItem.styles';\nimport { icons } from 'styles';\n\nconst ResolutionDocumentListItem = memo(({ resolutionDocument, onDocumentClick, onDelete }) => {\n const document = resolutionDocument.document;\n const documentFullName = `${document.name}.${document.extension}`;\n\n const openPreview = () => onDocumentClick(document);\n const handleDeleteDocument = () => onDelete(resolutionDocument.id);\n\n return (\n \n
\n\n {showDocuments && (\n \n
\n {`Files attached (${resolutionDocuments.length})`}
\n \n {showDocuments ?
\n \n
\n )}\n {renderDocuments}
\n\n \n
\n );\n});\n\nexport { ResolutionDocumentListItem };\n","import { css } from '@emotion/core';\n\nexport const listItem = css`\n background: rgb(225, 228, 232);\n padding: 10px 17px;\n border-radius: 4px;\n height: 45px;\n cursor: pointer;\n\n .far {\n line-height: 23px;\n }\n`;\n","export { ResolutionDocumentListItem } from './ResolutionDocumentListItem';\n","/** @jsx jsx */\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Spinner } from 'components/shared/Spinner';\n\nimport { useFetchResolutionDocuments } from './../hooks/useFetchResolutionDocuments';\n\nimport { ReactComponent as ResolutionDocumentIcon } from 'images/icons/resolution-document-icon.svg';\nimport * as styles from './index.styles';\n\nconst ResolutionDocumentViewerList = memo(({ resolutionId, previewDocument }) => {\n const { isLoading, resolutionDocuments } = useFetchResolutionDocuments({ resolutionId: resolutionId });\n\n const renderDocuments = resolutionDocuments.map((resolutionDocument) => {\n const handlePreview = previewDocument.bind(this, resolutionDocument.document);\n const documentName = (document) => `${document.name}.${document.extension}`;\n\n return (\n \n
\n\n \n \n {documentName(resolutionDocument.document)}\n
\n \n );\n });\n\n return (\n <>\n \n
\n )}\n \n );\n});\n\nexport { ResolutionDocumentViewerList };\n","export { ResolutionDocumentViewerList } from './ResolutionDocumentViewerList';\n","import { css } from '@emotion/core';\nimport { media } from 'styles';\n\nexport const padding = css`\n padding-left: 60px;\n ${media.tablet} {\n padding-left: 40px;\n }\n`;\n","/** @jsx jsx */\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport Dropzone from 'react-dropzone';\nimport { FormattedMessage } from 'react-intl';\n\nimport FileBrowser from '../../shared/FileBrowser';\nimport { ReactComponent as DocumentsIcon } from 'images/icons/agenda-documents-upload.svg';\nimport { useUploadQueueActions } from 'store/uploadQueueStoreContext';\n\nimport * as styles from './ResolutionDocumentsUpload.styles';\n\nconst ResolutionDocumentsUpload = memo(({ resolution, onBrowseUpload, root }) => {\n const minSize = 0;\n const maxSize = 20971520; // 20MB;\n\n const [showBrowse, setShowBrowse] = useState(false);\n\n const hideBrowse = () => setShowBrowse(false);\n\n const acceptedFileTypes = [\n 'image/png',\n 'image/jpeg',\n 'image/jpg',\n '.ppt',\n '.pdf',\n '.pptx',\n '.doc',\n '.docx',\n '.xls',\n '.xlsx',\n '.xlsm',\n ];\n\n const { addFilesToQueue } = useUploadQueueActions();\n\n const handleBrowse = () => {\n $('#modal-window').modal('hide');\n setShowBrowse(true);\n };\n\n const handleDrop = (files) => {\n addFilesToQueue({ files: files, resolutionId: resolution.id });\n };\n\n const dropzoneComponent = ({ getRootProps, getInputProps, isDragActive }) => (\n <>\n \n
\n\n {renderDocuments}
\n \n \n\n
\n \n );\n\n return (\n <>\n \n \n );\n});\n\nexport { ResolutionDocumentsUpload };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const dropzone = (isDragActive) => css`\n padding: 10px 0;\n display: flex;\n align-items: center;\n font-size: 14px;\n justify-content: center;\n color: ${colors.mediumGrey};\n border: 1px dashed ${colors.lightGrey};\n background: ${colors.white};\n cursor: pointer;\n\n ${isDragActive &&\n `\n box-shadow: 2px 4px 4px rgba(223, 223, 223, 1);\n `}\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const upload = css`\n ${fonts.semiBold}\n color: ${colors.cyan};\n font-size: 14px;\n cursor: pointer;\n\n &:hover {\n color: ${colors.cyan};\n opacity: 0.8;\n }\n`;\n\nexport const icon = css`\n background: ${colors.placeholderGrey};\n height: 24px;\n width: 24px;\n border-radius: 50%;\n display: flex\n align-items: center;\n justify-content: center;\n margin-right: 8px;\n\n svg {\n margin: 0 0 8px 10px;\n }\n`;\n\nexport const documents = css`\n margin-top: 20px;\n position: relative;\n`;\n","export { ResolutionDocumentsUpload } from './ResolutionDocumentsUpload';\n","/** @jsx jsx */\nimport React, { memo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { useIntl } from 'react-intl';\n\nimport { TextAreaInput } from 'components/shared/TextAreaInput';\n\nimport { ResolutionDocumentList } from '../ResolutionDocumentList';\n\nimport * as styles from './ResolutionForm.styles';\n\nimport { useUpdateResolution } from './../hooks/useUpdateResolution';\n\nconst ResolutionForm = memo(({ resolution, index, onDocumentClick, onDelete, resolutionCount, root }) => {\n const [description, setDescription] = useState(resolution.description || '');\n const [showDocuments, setShowDocuments] = useState(false);\n\n const toggleShowDocuments = () => setShowDocuments(!showDocuments);\n\n const handleDelete = onDelete.bind(this, resolution);\n\n const { isUpdating, updateResolution } = useUpdateResolution({});\n\n const changeDescription = (event) => setDescription(event.target.value);\n const updateResolutionDescription = () => updateResolution({ resolutionId: resolution.id, description: description });\n\n useEffect(() => setDescription(resolution.description || ''), [resolution]);\n\n const intl = useIntl();\n\n return (\n \n
\n\n \n \n
\n \n
\n );\n});\n\nexport { ResolutionForm };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const index = css`\n ${fonts.bold}\n font-size: 40px;\n color: ${colors.placeholderGrey};\n position: absolute;\n top: 5px;\n left: 0;\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n width: 30px;\n\n ${media.mobile} {\n top: -11px;\n left: 6px;\n width: auto;\n color: ${colors.linkWater};\n }\n`;\n\nexport const actions = css`\n display: flex;\n flex-direction: column;\n\n ${media.mobile} {\n border: 1px solid ${colors.darkerGrey};\n border-top: none;\n display: flex;\n flex-direction: row;\n border-right: none;\n }\n\n .action-item {\n border: 1px solid ${colors.darkerGrey};\n border-left: none;\n padding: 11px;\n width: 42px;\n height: 42px;\n display: flex;\n align-items: center;\n justify-content: center;\n ${media.mobile} {\n border: none;\n border-right: 1px solid ${colors.darkerGrey};\n flex-grow: 1;\n }\n\n .far {\n color: ${colors.lightGrey};\n\n &:hover {\n color: ${colors.cyan};\n }\n }\n }\n`;\n\nexport const resolutionForm = css`\n position: relative;\n width: 100%;\n display: flex;\n padding-left: 40px;\n margin-bottom: 20px;\n flex-direction: column;\n ${media.mobile} {\n flex-direction: column;\n padding-left: 0;\n margin-bottom: 40px;\n background-color: ${colors.white};\n }\n`;\n\nexport const textAreaInput = css`\n height: 125px;\n`;\n\nexport const textarea = css`\n width: 100%;\n`;\n\nexport const innerWrapper = css`\n width: 100%;\n display: flex;\n flex-direction: row;\n ${media.mobile} {\n flex-direction: column;\n }\n`;\n","export { ResolutionForm } from './ResolutionForm';\n","/** @jsx jsx */\nimport React, { memo } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { RadioButton } from 'components/shared/RadioButton';\n\nimport * as styles from './ResolutionSettings.styles';\n\nconst ResolutionSettings = memo(({ pollForVote, setPollForVote, config, setConfig }) => {\n const isConfigSimple = config === 'simple';\n\n const intl = useIntl();\n\n const setPollPerResolution = () => setPollForVote(false);\n const setPollPerVote = () => setPollForVote(true);\n const changeConfig = (event) => setConfig(event.target.value);\n\n return (\n {`${index}.`}
\n \n
\n \n
\n {resolutionCount > 1 && (\n \n
\n )}\n handleDelete(resolution)}>\n \n
\n \n
\n );\n});\n\nexport { ResolutionSettings };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const resolutionHeading = css`\n ${fonts.bold}\n font-size: 16px;\n color: ${colors.black};\n line-height: 28px;\n padding-bottom: 20px;\n display: none;\n ${media.mobile} {\n display: block;\n }\n`;\n","export { ResolutionSettings } from './ResolutionSettings';\n","/** @jsx jsx */\nimport React, { memo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport Modal from 'react-bootstrap/Modal';\n\nimport { Input } from 'components/shared/Input';\nimport { AlertPopup } from 'components/shared/AlertPopup';\n\nimport { useKeyPress } from 'hooks/useKeyPress';\n\nimport { ReactComponent as LockIcon } from 'images/icons/lock-secondary.svg';\n\nimport * as styles from './PasscodeModal.styles';\n\nconst PasscodeModal = memo(({ votePasscode, show, onVerify }) => {\n const [passcode, setPasscode] = useState('');\n const [passcodeVisible, setPasscodeVisible] = useState(false);\n const [showIncorrectPasscodeAlert, setShowIncorrectPasscodeAlert] = useState(false);\n\n const intl = useIntl();\n\n const onCloseClick = () => {\n return;\n };\n\n const [showPasscodeModal, setShowPasscodeModal] = useState(show);\n\n const hideIncorrectPasscodeAlert = () => {\n setPasscode('');\n\n return setShowIncorrectPasscodeAlert(false);\n };\n\n const Enter = useKeyPress('Enter');\n\n const handleKeyPress = (event) => {\n if (Enter) {\n if (showIncorrectPasscodeAlert) {\n return hideIncorrectPasscodeAlert();\n } else {\n return verifyPasscode();\n }\n }\n };\n\n useEffect(() => handleKeyPress(), [Enter]);\n\n const changePasscode = (event) => {\n return setPasscode(event.target.value);\n };\n\n const togglePasscodeVisible = () => setPasscodeVisible(!passcodeVisible);\n\n const passcodeMatched = () => {\n return passcode === votePasscode;\n };\n\n const verifyPasscode = () => {\n if (passcode.length == 0) return;\n\n if (passcodeMatched()) {\n const accessToken = new URLSearchParams(window.location.search).get('access_token');\n\n setShowPasscodeModal(false);\n Cookies.set('passcodeVerified', accessToken);\n onVerify();\n } else {\n return setShowIncorrectPasscodeAlert(true);\n }\n };\n\n return (\n <>\n \n
\n \n
\n \n \n \n
\n \n
\n \n\n \n
\n \n
\n \n \n
\n \n
\n \n {!meetingDrawer && (\n
\n );\n};\n","import React from 'react';\nimport clsx from 'clsx';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { ReactComponent as LogoIcon } from 'images/logo.svg';\nimport { Badge } from 'components/shared/Badge';\nimport useWindowDimensions from 'hooks/useWindowDimensions';\nimport { voteName, voterAllowPdfExport, voteStartDate, voteStartTime, voteEndDate, voteEndTime } from './helper';\nimport { ResolutionsTable } from '../Voters/ResolutionsTable';\nimport AppHeader from 'components/shared/AppHeader';\nimport { ToAppBarWrapper, Brand, AppBody } from 'components/shared/AppHeader/styles';\nimport { TimeWrapper } from './styles';\n\nexport const ViewerMobile = ({\n meetingDrawer,\n loggedIn,\n vote,\n voteStatus,\n voter,\n changeVoteStatus,\n previewDocument,\n openPdf,\n}) => {\n const intl = useIntl();\n const { isDesktop, isTablet } = useWindowDimensions();\n return (\n <>\n \n
\n )}\n \n \n
\n \n
\n \n
\n\n \n
\n {voterAllowPdfExport(voter, meetingDrawer) && (\n \n
\n \n {voteName(vote)}\n
\n \n
\n \n
\n {voteStatus == 'published' && meetingDrawer && (\n \n
\n \n
\n )}\n \n
\n )}\n \n
\n \n
\n {!(voteStatus == 'published' && meetingDrawer) && (\n \n \n \n \n \n
\n \n
\n \n \n
\n {voteStartDate(vote)}
\n \n {voteStartTime(vote)}
\n \n
\n \n \n
\n {voteEndDate(vote)}
\n \n {voteEndTime(vote)}
\n \n
\n {loggedIn && (\n \n \n
\n \n
\n {voteName(vote)}
\n \n
\n \n
\n \n {vote.data.attributes.owner_name}\n
\n \n
\n \n \n \n \n \n
\n \n \n \n
\n \n \n
\n {voteStartDate(vote)}
\n {voteStartTime(vote)}
\n \n
\n \n \n \n
\n \n \n \n {voteStatus == 'published' && meetingDrawer && voterAllowPdfExport(voter, meetingDrawer) && (\n \n \n
\n {voteEndDate(vote)}
\n {voteEndTime(vote)}
\n \n
\n )}\n \n )}\n {!(voteStatus == 'published' && meetingDrawer) && (\n \n {voteStatus == 'published' && meetingDrawer && (\n
\n {voterAllowPdfExport(voter, meetingDrawer) && (\n \n
\n )}\n \n {\n openPdf(vote);\n }}\n >\n
\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n \n
\n {voteStartDate}
\n \n \n
\n {voteStartTime}
\n \n
\n \n
\n \n \n
\n {voteEndDate}
\n \n \n
\n {voteEndTime}
\n \n \n {!voteOpened && (\n <>\n \n {saveButtonText()}\n \n \n
\n \n \n );\n});\n\nexport { VoteDetailsForm };\n","import { css } from '@emotion/core';\nimport { colors, fonts, media } from 'styles';\n\nexport const wrapper = css`\n .vote-panel {\n min-height: auto !important;\n }\n\n .eye-icon {\n opacity: 0.35;\n position: absolute;\n top: 61%;\n right: 23%;\n cursor: pointer;\n }\n\n .btn-copy {\n height: 44px;\n width: 45px;\n justify-content: center;\n i {\n font-size: 16px;\n }\n }\n\n .vote-error {\n ${fonts.bold};\n padding: 2px 4px;\n background: ${colors.red};\n border-radius: 2px;\n line-height: 1;\n color: ${colors.white};\n text-transform: uppercase;\n font-size: 10px;\n z-index: 2;\n position: absolute;\n top: -40px;\n left: 60px;\n letter-spacing: 0.09em;\n }\n\n #react-picker-input {\n &::placeholder {\n color: ${colors.mediumGrey};\n }\n }\n\n textarea {\n height: 150px !important;\n }\n`;\n\nexport const saveButtonsPanel = css`\n overflow: hidden;\n`;\n\nexport const saveButton = css`\n ${media.tablet} {\n width: 51%;\n margin-right: 0px !important;\n }\n`;\n","export { VoteDetailsForm } from './VoteDetailsForm';\n","/** @jsx jsx */\nimport React, { memo, useRef } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport { DateInput } from 'components/shared/DateInput';\nimport { TimeInput } from 'components/shared/TimeInput';\n\nimport * as styles from './VoteDurationForm.styles';\n\nconst VoteDurationForm = memo(\n ({ voteParams, setStartDate, setEndDate, setStartTime, setEndTime, voteOpened, errorMessage }) => {\n const { current: calendarIcon } = useRef();\n\n const dateFormat = getUserDateFormat() || 'DD/MM/YYYY';\n\n return (\n <>\n \n
\n\n \n
\n \n
\n\n {voteParams.voterType !== 'contacts' && (\n \n
\n \n
\n \n
\n\n \n
\n {`(${voteParams.contactIds && voteParams.contactIds.length})`}
\n \n
\n )}\n \n
\n\n \n
\n {`(${\n voteParams.collaboratorEmails && voteParams.collaboratorEmails.length\n })`}
\n \n
\n \n );\n }\n);\n\nexport { VoteDurationForm };\n","import { css } from '@emotion/core';\nimport { media } from 'styles';\n\nexport const startWrapper = css`\n margin-right: 30px;\n ${media.mobile} {\n margin-right: 0;\n }\n`;\n\nexport const durationWrapped = css`\n display: flex;\n flex-wrap: wrap;\n`;\n\nexport const dataInputWrapper = css`\n min-width: 135px;\n`;\n","export { VoteDurationForm } from './VoteDurationForm';\n","/** @jsx jsx */\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport Popover from 'react-bootstrap/Popover';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport * as styles from './VoteSettingsForm.styles';\nimport { MeetingAlert } from '../MeetingAlert';\nimport { MeetingPicker } from 'components/shared/MeetingPicker';\nimport { Input } from 'components/shared/Input';\nimport { RadioButton } from 'components/shared/RadioButton';\nimport { CheckBox } from 'components/shared/CheckBox';\nimport { Tooltip } from '../../roles/Tooltip';\n\nconst VoteSettingsForm = memo(\n ({\n voteParams,\n handleInputChange,\n updateVoteParams,\n errorMessage,\n voteOpened,\n selectedMeeting,\n onMeetingDataSet,\n onMeetingSelect,\n meetings,\n }) => {\n const [meetingAlertIsVisible, setMeetingAlertIsVisible] = useState(false);\n const [passcodeVisible, setPasscodeVisible] = useState(false);\n const [voteMeeting, setVoteMeeting] = useState(selectedMeeting);\n\n const intl = useIntl();\n\n const meetingOptions = meetings?.map((item) => ({ id: item.id, title: item.title }));\n\n const hideMeetingAlert = () => {\n setVoteMeeting(null);\n setMeetingAlertIsVisible(false);\n };\n\n const setMeetingData = () => {\n onMeetingDataSet();\n setMeetingAlertIsVisible(false);\n };\n\n const selectMeeting = (meeting, onSelect) => {\n if (voteMeeting?.id === meeting.id) {\n onMeetingSelect(null);\n setVoteMeeting(null);\n } else {\n onMeetingSelect(meeting);\n setVoteMeeting(meeting);\n setMeetingAlertIsVisible(true);\n onSelect();\n }\n };\n\n const setShowResultsToOwners = () => updateVoteParams('showResults', false);\n const setShowResultsToAll = () => updateVoteParams('showResults', true);\n\n const togglePasscodeVisible = () => setPasscodeVisible(!passcodeVisible);\n const copyPasscode = () => navigator.clipboard.writeText(voteParams.passcode);\n\n const copyPopover = (\n \n
\n \n
\n \n
\n\n \n \n\n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n );\n }\n);\n\nexport { VoteSettingsForm };\n","import { css } from '@emotion/core';\nimport { colors, fonts } from 'styles';\n\nexport const popover = css`\n ${fonts.regular};\n inset: auto auto 46px -5px !important;\n position: relative !important;\n font-size: 12px;\n color: ${colors.black};\n border-radius: 3px;\n box-shadow: -10px 4px 50px rgba(54, 71, 98, 0.25);\n background: ${colors.white};\n width: 160px;\n pointer-events: none;\n text-align: center;\n bottom: auto;\n left: 50%;\n bottom: 30px;\n transform: translateX(-50%);\n opacity: 1;\n transition: opacity 0.2s ease-in-out;\n z-index: 2;\n line-height: 1;\n border: 1px solid ${colors.agendaGrey};\n\n .arrow {\n display: none;\n }\n\n .triangle {\n top: 40px;\n width: 0;\n height: 0;\n position: absolute;\n left: 53%;\n right: 0;\n transform: translateX(-50%);\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid ${colors.white};\n }\n`;\n\nexport const passcodeInput = css`\n position: relative;\n`;\nexport const passcodeIcon = css`\n opacity: 0.35;\n position: absolute;\n top: 50%;\n right: 10px;\n cursor: pointer;\n transform: translateY(-50%);\n z-index: 2;\n`;\n","export { VoteSettingsForm } from './VoteSettingsForm';\n","// @jsx jsx\n\nimport React, { memo, useState, useEffect } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { Placeholder } from 'components/shared/Placeholder';\nimport { ButtonWithSuccess } from 'components/shared/ButtonWithSuccess';\nimport { EmailChips } from 'components/shared/EmailChips';\n\nimport { ReactComponent as ContactsIcon } from 'images/icons/no-contacts.svg';\nimport { ReactComponent as DeleteIcon } from 'images/icons/delete-minus.svg';\n\nimport { useResendVoteInvite } from '../hooks/useResendVoteInvite';\n\nimport * as styles from './Table.styles';\n\nconst CollaboratorsTable = memo(\n ({ voteId, collaboratorEmails, persistedEmails, voteStatus, onDelete, handleEmailImport }) => {\n const placeholderIcon = \n
\n \n
\n \n
\n \n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n \n \n \n
\n \n
\n \n
\n\n \n \n \n
\n\n {!emails ||\n (!emails.length && (\n
\n \n );\n }\n);\n\nexport { CollaboratorsTable };\n","// @jsx jsx\n\nimport React, { memo, useEffect, useState } from 'react';\nimport { css, jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { Placeholder } from 'components/shared/Placeholder';\nimport { ContactPicker } from 'components/shared/ContactPicker';\nimport { ReactComponent as ContactsIcon } from 'images/icons/no-contacts.svg';\nimport { ReactComponent as DeleteIcon } from 'images/icons/delete-minus.svg';\n\nimport * as styles from './Table.styles';\nimport * as contactsTableStyles from './ContactsTable.styles';\n\nconst ContactsTable = memo(({ contacts, contactIds, meetingContactIds, onDelete, onToggleOption }) => {\n const placeholderIcon = | # | \n\n | \n \n | \n |
|---|---|---|---|
\n
\n\n \n \n \n
\n\n {voteContacts.length === 0 && (\n
\n \n );\n});\n\nexport { ContactsTable };\n","import { css } from '@emotion/core';\nimport { media } from 'styles';\n\nexport const hideMobile = css`\n ${media.mobile} {\n display: none;\n }\n`;\n\nexport const hideTablet = css`\n ${media.tablet} {\n display: none;\n }\n`;\n","/** @jsx jsx */\n\nimport React, { memo, useState, useEffect } from 'react';\nimport { jsx } from '@emotion/core';\nimport axios from 'axios';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { trackPromise } from 'react-promise-tracker';\nimport { getAttributes } from 'helpers/getAttributes';\n\nimport { AlertPopup } from 'components/shared/AlertPopup';\nimport { Spinner } from 'components/shared/Spinner';\n\nimport { ResolutionDocumentViewerList } from '../ResolutionDocumentViewerList';\n\nimport { Results } from './Results';\n\nimport { ReactComponent as CheckmarkIcon } from 'images/icons/check-green.svg';\nimport { ReactComponent as Exclamation } from 'images/icons/circle-exclamation.svg';\n\nimport * as styles from './Table.styles';\n\nconst ResolutionsTable = memo(({ vote, voter, onVoteStatusChange, previewDocument }) => {\n const companySlug = getCompanySlug();\n\n const accessToken = new URLSearchParams(window.location.search).get('access_token');\n\n const intl = useIntl();\n\n const [showSpinner, setShowSpinner] = useState(false);\n const [voteAttributes, setVoteAttributes] = useState(vote.data.attributes);\n const [showVotingSuccessAlert, setShowVotingSuccessAlert] = useState(false);\n const [showVotingFailureAlert, setShowVotingFailureAlert] = useState(false);\n\n const hideVotingSuccessAlert = () => {\n return setShowVotingSuccessAlert(false);\n };\n\n const hideVotingFailureAlert = () => {\n return setShowVotingFailureAlert(false);\n };\n\n const voteOpen = () => {\n return voteAttributes.status == 'open';\n };\n\n const votePublished = () => {\n return voteAttributes.status == 'published';\n };\n\n const resolutionPoll = (resolution) => {\n return resolution.data.attributes.poll.data;\n };\n\n const votePoll = () => {\n return voteAttributes.poll.data;\n };\n\n const resolutionPollResults = (resolution) => {\n return resolutionPoll(resolution).attributes;\n };\n\n const votePollResults = () => {\n return votePoll().attributes;\n };\n\n const savedVoterAnswers = () => {\n if (voter.data) {\n return Object.assign({}, ...voter.data.attributes.answers);\n }\n };\n\n const initialVoterActive = () => {\n return voter.data && voter.data.attributes.active;\n };\n\n const voterShowResults = () => {\n return voter.data && voter.data.attributes.show_results;\n };\n\n const voteAnswerOptions = () => {\n return voteAttributes.answer_options;\n };\n\n const voteResolutions = () => {\n return voteAttributes.resolutions;\n };\n\n const showDetails = () => {\n return !voteAttributes.anonymous || voter.data.attributes.show_all_results;\n };\n\n const isSelected = (pollId, answer) => {\n return voterAnswers[pollId.toString()] == answer;\n };\n\n const showOptions = () => {\n return voterActive || !voterShowResults();\n };\n\n const showResults = () => {\n return !voterActive && voterShowResults() && !votePublished();\n };\n\n const [voterAnswers, setVoterAnswers] = useState(savedVoterAnswers() || {});\n const [voterActive, setVoterActive] = useState(initialVoterActive());\n\n const toggleVoterAnswer = (pollId, answer) => {\n if (!voterActive || savedVoterAnswers().length > 0) return;\n\n const newAnswer = {};\n\n if (isSelected(pollId, answer)) {\n newAnswer[pollId] = null;\n\n return setVoterAnswers((currentVoteAnswers) => ({\n ...currentVoteAnswers,\n ...newAnswer,\n }));\n } else {\n newAnswer[pollId] = answer;\n\n return setVoterAnswers((currentVoteAnswers) => ({\n ...currentVoteAnswers,\n ...newAnswer,\n }));\n }\n };\n\n const allPollsAnswered = () => {\n const voterAnswersLength = Object.keys(voterAnswers).length;\n\n if (votePoll()) {\n return voterAnswersLength === 1;\n } else {\n return voterAnswersLength === voteResolutions().length;\n }\n };\n\n const handleVoteRefresh = () => {\n fetchVote();\n window.scrollTo(0, 0);\n setVoterActive(false);\n };\n\n const handleResponse = (responseStatus) => {\n if (responseStatus == 200) {\n handleVoteRefresh();\n setShowVotingSuccessAlert(true);\n }\n };\n\n const handleError = () => {\n handleVoteRefresh();\n setShowVotingFailureAlert(true);\n };\n\n const castVote = () => {\n const path = `/api/${companySlug}/v1/voters/${voter.data.id}/cast_vote.json`;\n const payload = { answer_params: voterAnswers };\n\n payload['access_token'] = accessToken;\n\n const promise = axios\n .put(path, payload)\n .then((response) => response.status)\n .then(handleResponse)\n .catch(handleError);\n\n return trackPromise(promise);\n };\n\n const fetchVote = () => {\n const path = `/api/${companySlug}/v1/votes/${vote.data.id}.json`;\n const params = {};\n\n if (accessToken) {\n params['access_token'] = accessToken;\n } else {\n params['voter_id'] = voter.data.id;\n }\n\n const promise = axios\n .get(path, { params: params })\n .then((response) => response.data)\n .then((response) => setVote(response));\n\n return trackPromise(promise);\n };\n\n const setVote = (response) => {\n return setVoteAttributes(response.data.attributes);\n };\n\n const refreshVote = () => {\n setShowSpinner(true);\n fetchVote();\n\n setTimeout(() => {\n setShowSpinner(false);\n }, 200);\n };\n\n useEffect(() => {\n return setVoteAttributes(vote.data.attributes);\n }, [vote]);\n\n useEffect(() => {\n return onVoteStatusChange(voteAttributes.status);\n }, [voteAttributes]);\n\n const answerOptions = (pollId) => {\n return voteAnswerOptions().map((option, index) => {\n return (\n | # | \n\n | \n \n | \n \n | \n \n | \n
|---|
\n
\n );\n });\n\n return (\n <>\n \n {index + 1}.\n
\n \n {resolutionAttributes.description && (\n
\n \n {resolutionAttributes.description}\n
\n )}\n\n \n {answerOptions(resolutionPoll(resolution).id)}\n
\n )}\n {resolutionPoll(resolution) && resolutionPoll(resolution).id && showResults() && (\n \n
\n \n \n
\n \n\n \n \n {index + 1} \n {voter.data.attributes.name} \n {voter.data.attributes.email} \n \n );\n });\n\n const renderCollaborators = collaborators().map((voter, index) => {\n return (\n \n {index + 1} \n {voter.data.attributes.email} \n \n );\n });\n\n const options = answerOptions.map((option, index) => {\n return (\n setOption(option)}\n >\n {option}\n
\n );\n });\n\n return (\n <>\n {show && (\n \n
\n \n );\n});\n\nexport { ResolutionsTable };\n","/** @jsx jsx */\nimport React, { memo, useState } from 'react';\nimport { jsx } from '@emotion/core';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { VoterResultsTable } from './VoterResultsTable';\n\nimport * as styles from './Results.styles';\n\nconst Results = memo(({ pollResults, answerOptions, showDetails }) => {\n const [showVoterDetails, setShowVoterDetails] = useState(false);\n\n const intl = useIntl();\n\n const toggleDetails = () => {\n if (showVoterDetails) {\n return setShowVoterDetails(false);\n } else {\n return setShowVoterDetails(true);\n }\n };\n\n const chevronStyles = [styles.chevron.base, showVoterDetails && styles.chevron.rotated];\n\n const results = answerOptions.map((option, index) => {\n const answers = pollResults.answers[option];\n const answerCount = (answers && answers.length) || 0;\n const percentage = pollResults.answer_count ? (answerCount / pollResults.answer_count) * 100 : 0;\n\n return (\n \n
\n {!voterActive && voteOpen() && showResults() && (\n refreshVote()} />\n )}\n
\n \n {voterActive && (\n
\n {voterActive && (\n \n
\n )}\n {resolutions}\n {votePoll() && showOptions() && \n
\n {answerOptions(votePoll().id)}
}\n {votePoll() && showResults() && (\n \n
\n )}\n \n \n
\n )}\n \n \n
\n );\n });\n\n return (\n <>\n \n
\n {option}
\n \n
\n \n
\n \n {results}\n
\n {showDetails && (\n \n
\n )}\n \n {`${\n showVoterDetails\n ? intl.formatMessage({ id: 'Results.hideDetails' })\n : intl.formatMessage({ id: 'Results.showDetails' })\n }`}\n
\n \n \n \n \n
\n\n {contacts().length === 0 && (\n \n \n
\n\n {collaborators().length === 0 && (\n
\n )}\n \n );\n});\n\nexport { VoterResultsTable };\n","import { css } from '@emotion/core';\nimport { tables, fonts, colors, media } from 'styles';\n\nexport const table = tables.table;\nexport const tableRow = tables.tableRow;\n\nexport const voterTable = css`\n overflow-y: auto;\n padding: 20px;\n max-height: 350px;\n background-color: ${colors.backgroundGrey};\n border-radius: 20px;\n margin-left: 60px;\n ${media.mobile} {\n margin-left: 0;\n background-color: ${colors.white};\n }\n`;\n\nexport const votersTitle = css`\n ${media.mobile} {\n text-align: center;\n }\n`;\n\nexport const tableHead = css`\n position: relative;\n &:before {\n position: absolute;\n content: '';\n height: 1px;\n width: calc(100% + 40px);\n bottom: -1px;\n left: -20px;\n background-color: ${colors.zircon};\n z-index: 80;\n }\n`;\n\nexport const tableHeader = (width) => css`\n ${tables.tableHeader(width)}\n`;\n\nexport const voterRow = css`\n margin: 5px 0;\n`;\n\nexport const voteOption = css`\n width: 80px;\n margin: 5px;\n\n &.selected {\n ${fonts.semiBold};\n border: 1px solid ${colors.purple};\n border-radius: 44px;\n color: ${colors.purple};\n cursor: default;\n }\n`;\n","import { gql } from '@apollo/client';\nimport { MEETING_FRAGMENT } from './MeetingFragment';\nimport { CONTACT_FRAGMENT } from './ContactFragment';\n\nconst COMPANY_FRAGMENT = gql`\n fragment CompanyFields on Company {\n id\n\n meetings {\n ...MeetingFields\n }\n\n contacts {\n ...ContactFields\n }\n }\n ${MEETING_FRAGMENT}\n ${CONTACT_FRAGMENT}\n`;\n\nexport { COMPANY_FRAGMENT };\n","import { gql } from '@apollo/client';\n\nconst CONTACT_FRAGMENT = gql`\n fragment ContactFields on Contact {\n id\n name\n email\n contactRole\n }\n`;\n\nexport { CONTACT_FRAGMENT };\n","import { gql } from '@apollo/client';\n\nconst DOCUMENT_FRAGMENT = gql`\n fragment DocumentFields on Document {\n id\n name\n extension\n url\n contentType\n }\n`;\n\nexport { DOCUMENT_FRAGMENT };\n","import { gql } from '@apollo/client';\nimport { CONTACT_FRAGMENT } from './ContactFragment';\n\nconst MEETING_FRAGMENT = gql`\n fragment MeetingFields on Meeting {\n id\n title\n meetingDate\n meetingStartTime\n meetingEndTime\n\n contacts {\n ...ContactFields\n }\n }\n ${CONTACT_FRAGMENT}\n`;\n\nexport { MEETING_FRAGMENT };\n","import { gql } from '@apollo/client';\nimport { DOCUMENT_FRAGMENT } from './DocumentFragment';\n\nconst RESOLUTION_DOCUMENT_FRAGMENT = gql`\n fragment ResolutionDocumentFields on ResolutionDocument {\n id\n\n document {\n ...DocumentFields\n }\n }\n ${DOCUMENT_FRAGMENT}\n`;\n\nexport { RESOLUTION_DOCUMENT_FRAGMENT };\n","import { gql } from '@apollo/client';\nimport { RESOLUTION_DOCUMENT_FRAGMENT } from './ResolutionDocumentFragment';\n\nconst RESOLUTION_FRAGMENT = gql`\n fragment ResolutionFields on Resolution {\n id\n description\n\n resolutionDocuments {\n ...ResolutionDocumentFields\n }\n }\n ${RESOLUTION_DOCUMENT_FRAGMENT}\n`;\n\nexport { RESOLUTION_FRAGMENT };\n","import { gql } from '@apollo/client';\nimport { RESOLUTION_FRAGMENT } from './ResolutionFragment';\nimport { MEETING_FRAGMENT } from './MeetingFragment';\n\nconst VOTE_FRAGMENT = gql`\n fragment VoteFields on Vote {\n id\n name\n slug\n status\n config\n pollForVote\n voterType\n passcode\n contactIds\n showResults\n anonymous\n startedAt\n endedAt\n collaboratorEmails\n\n meeting {\n ...MeetingFields\n }\n\n resolutions {\n ...ResolutionFields\n }\n }\n ${RESOLUTION_FRAGMENT}\n ${MEETING_FRAGMENT}\n`;\n\nexport { VOTE_FRAGMENT };\n","import { gql, useMutation } from '@apollo/client';\nimport { RESOLUTION_FRAGMENT } from './../fragments/ResolutionFragment';\n\nconst ATTACH_RESOLUTION_DOCUMENT = gql`\n mutation attachResolutionDocument($input: AttachResolutionDocumentInput!) {\n attachResolutionDocument(input: $input) {\n resolution {\n ...ResolutionFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${RESOLUTION_FRAGMENT}\n`;\n\nconst useAttachResolutionDocumentMutation = (options) => useMutation(ATTACH_RESOLUTION_DOCUMENT, options);\n\nexport { useAttachResolutionDocumentMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { RESOLUTION_FRAGMENT } from './../fragments/ResolutionFragment';\n\nconst CREATE_RESOLUTION_DOCUMENT = gql`\n mutation createResolutionDocument($input: CreateResolutionDocumentInput!) {\n createResolutionDocument(input: $input) {\n vote {\n resolutions {\n ...ResolutionFields\n }\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${RESOLUTION_FRAGMENT}\n`;\n\nconst useCreateResolutionDocumentMutation = (options) => useMutation(CREATE_RESOLUTION_DOCUMENT, options);\n\nexport { useCreateResolutionDocumentMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { RESOLUTION_FRAGMENT } from './../fragments/ResolutionFragment';\n\nconst CREATE_RESOLUTION = gql`\n mutation createResolution($input: CreateResolutionInput!) {\n createResolution(input: $input) {\n resolution {\n ...ResolutionFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${RESOLUTION_FRAGMENT}\n`;\n\nconst useCreateResolutionMutation = (options) => useMutation(CREATE_RESOLUTION, options);\n\nexport { useCreateResolutionMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { RESOLUTION_DOCUMENT_FRAGMENT } from './../fragments/ResolutionDocumentFragment';\n\nconst DELETE_RESOLUTION_DOCUMENT = gql`\n mutation deleteResolutionDocument($input: DeleteResolutionDocumentInput!) {\n deleteResolutionDocument(input: $input) {\n resolutionDocument {\n ...ResolutionDocumentFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${RESOLUTION_DOCUMENT_FRAGMENT}\n`;\n\nconst useDeleteResolutionDocumentMutation = (options) => useMutation(DELETE_RESOLUTION_DOCUMENT, options);\n\nexport { useDeleteResolutionDocumentMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { VOTE_FRAGMENT } from './../fragments/VoteFragment';\n\nconst DELETE_RESOLUTION = gql`\n mutation deleteResolution($input: DeleteResolutionInput!) {\n deleteResolution(input: $input) {\n vote {\n ...VoteFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${VOTE_FRAGMENT}\n`;\n\nconst useDeleteResolutionMutation = (options) => useMutation(DELETE_RESOLUTION, options);\n\nexport { useDeleteResolutionMutation };\n","import { gql, useMutation } from '@apollo/client';\n\nconst PUBLISH_VOTE = gql`\n mutation publishVote($input: PublishVoteInput!) {\n publishVote(input: $input) {\n vote {\n id\n emailMessage\n }\n }\n }\n`;\n\nconst usePublishVoteMutation = (options) => useMutation(PUBLISH_VOTE, options);\n\nexport { usePublishVoteMutation };\n","import { gql, useMutation } from '@apollo/client';\n\nconst RESEND_VOTE_INVITE = gql`\n mutation resendVoteInvite($input: ResendVoteInviteInput!) {\n resendVoteInvite(input: $input) {\n vote {\n id\n }\n }\n }\n`;\n\nconst useResendVoteInviteMutation = (options) => useMutation(RESEND_VOTE_INVITE, options);\n\nexport { useResendVoteInviteMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { RESOLUTION_FRAGMENT } from './../fragments/ResolutionFragment';\n\nconst UPDATE_RESOLUTION = gql`\n mutation updateResolution($input: UpdateResolutionInput!) {\n updateResolution(input: $input) {\n resolution {\n ...ResolutionFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${RESOLUTION_FRAGMENT}\n`;\n\nconst useUpdateResolutionMutation = (options) => useMutation(UPDATE_RESOLUTION, options);\n\nexport { useUpdateResolutionMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { VOTE_FRAGMENT } from './../fragments/VoteFragment';\n\nconst UPDATE_VOTE_SETTINGS = gql`\n mutation updateVoteSettings($input: UpdateVoteSettingsInput!) {\n updateVoteSettings(input: $input) {\n vote {\n ...VoteFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${VOTE_FRAGMENT}\n`;\n\nconst useUpdateVoteSettingsMutation = (options) => useMutation(UPDATE_VOTE_SETTINGS, options);\n\nexport { useUpdateVoteSettingsMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { VOTE_FRAGMENT } from './../fragments/VoteFragment';\n\nconst UPDATE_VOTERS = gql`\n mutation updateVoters($input: UpdateVotersInput!) {\n updateVoters(input: $input) {\n vote {\n ...VoteFields\n }\n }\n }\n ${VOTE_FRAGMENT}\n`;\n\nconst useUpdateVotersMutation = (options) => useMutation(UPDATE_VOTERS, options);\n\nexport { useUpdateVotersMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { VOTE_FRAGMENT } from './../fragments/VoteFragment';\n\nconst UPSERT_VOTE = gql`\n mutation upsertVote($input: UpsertVoteInput!) {\n upsertVote(input: $input) {\n vote {\n ...VoteFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${VOTE_FRAGMENT}\n`;\n\nconst useUpsertVoteMutation = (options) => useMutation(UPSERT_VOTE, options);\n\nexport { useUpsertVoteMutation };\n","import { gql, useMutation } from '@apollo/client';\nimport { VOTE_FRAGMENT } from './../fragments/VoteFragment';\n\nconst VALIDATE_RESOLUTIONS = gql`\n mutation validateResolutions($input: ValidateResolutionsInput!) {\n validateResolutions(input: $input) {\n vote {\n ...VoteFields\n }\n\n errors {\n attribute\n message\n }\n }\n }\n ${VOTE_FRAGMENT}\n`;\n\nconst useValidateResolutionsMutation = (options) => useMutation(VALIDATE_RESOLUTIONS, options);\n\nexport { useValidateResolutionsMutation };\n","import { gql, useQuery } from '@apollo/client';\nimport { COMPANY_FRAGMENT } from './../fragments/CompanyFragment';\n\nconst COMPANY_QUERY = gql`\n query company {\n currentCompany {\n ...CompanyFields\n }\n }\n ${COMPANY_FRAGMENT}\n`;\n\nconst useCompanyQuery = (options) => useQuery(COMPANY_QUERY, options);\n\nexport { useCompanyQuery };\n","import { gql, useQuery } from '@apollo/client';\nimport { RESOLUTION_DOCUMENT_FRAGMENT } from './../fragments/ResolutionDocumentFragment';\n\nconst RESOLUTION_QUERY = gql`\n query resolution($id: ID!) {\n currentCompany {\n id\n\n resolution(id: $id) {\n id\n\n resolutionDocuments {\n ...ResolutionDocumentFields\n }\n }\n }\n }\n ${RESOLUTION_DOCUMENT_FRAGMENT}\n`;\n\nconst useResolutionQuery = (options) => useQuery(RESOLUTION_QUERY, options);\n\nexport { useResolutionQuery };\n","import { gql, useQuery } from '@apollo/client';\nimport { VOTE_FRAGMENT } from './../fragments/VoteFragment';\n\nconst VOTE_QUERY = gql`\n query vote($id: ID!) {\n currentCompany {\n id\n\n vote(id: $id) {\n ...VoteFields\n }\n }\n }\n ${VOTE_FRAGMENT}\n`;\n\nconst useVoteQuery = (options) => useQuery(VOTE_QUERY, options);\n\nexport { useVoteQuery };\n","import { useState } from 'react';\nimport { useAttachResolutionDocumentMutation } from './../data/mutations/AttachResolutionDocumentMutation';\n\nconst useAttachResolutionDocument = ({ resolutionId, onCompleted }) => {\n const update = (cache, { data: { attachResolutionDocument } }) => {\n const { resolution } = attachResolutionDocument;\n\n onCompleted(resolution);\n };\n\n const [mutate, { loading: isAttaching }] = useAttachResolutionDocumentMutation({ update });\n\n const attachResolutionDocument = (documentIds) => {\n mutate({ variables: { input: { resolutionId: resolutionId, documentIds: documentIds } } });\n };\n\n return {\n isAttaching,\n attachResolutionDocument,\n };\n};\n\nexport { useAttachResolutionDocument };\n","import { useState } from 'react';\nimport { useCreateResolutionMutation } from './../data/mutations/CreateResolutionMutation';\n\nconst useCreateResolution = ({ voteId, onCompleted }) => {\n const update = (cache, { data: { createResolution } }) => {\n const { resolution } = createResolution;\n\n onCompleted(resolution);\n };\n\n const [mutate, { loading: isCreating }] = useCreateResolutionMutation({ update });\n\n const createResolution = () => mutate({ variables: { input: { voteId: voteId } } });\n\n return {\n isCreating,\n createResolution,\n };\n};\n\nexport { useCreateResolution };\n","import {\n CREATE_RESOLUTION_DOCUMENT_MUTATION,\n useCreateResolutionDocumentMutation,\n} from './../data/mutations/CreateResolutionDocumentMutation';\nimport { formatBytes } from 'helpers/formatBytes';\nimport { DirectUpload } from '@rails/activestorage';\n\nconst MAX_SIZE = 104857600;\n\nconst useCreateResolutionDocument = ({ onUpload, onResolutionDocumentUpload, onError }) => {\n const update = (cache, { data: { createResolutionDocument } }) => {\n const { vote, errors } = createResolutionDocument;\n\n if (errors.length) {\n return onError(errors[0].message);\n }\n\n onUpload();\n onResolutionDocumentUpload(vote);\n };\n\n const [mutate] = useCreateResolutionDocumentMutation({ update });\n\n const validate = (attachment) => {\n if (attachment.size > MAX_SIZE) {\n onError(`File size should be less than ${formatBytes(MAX_SIZE, 0)}`);\n return false;\n }\n\n return true;\n };\n\n const createResolutionDocument = (params, updateCurrentUpload) => {\n const isValid = validate(params.attachment);\n\n if (!isValid) return;\n\n const uploadConfig = {\n directUploadWillStoreFileWithXHR: (xhr) => {\n updateCurrentUpload({ xhr });\n\n xhr.upload.addEventListener('progress', (event) => {\n const progress = Math.round((event.loaded * 100) / event.total);\n updateCurrentUpload({ progress });\n });\n },\n };\n\n const upload = new DirectUpload(params.attachment, '/rails/active_storage/direct_uploads', uploadConfig);\n\n upload.create((error, blob) => {\n if (error) {\n return onError(error);\n }\n\n const input = {\n resolutionId: params.resolutionId,\n attachment: blob.signed_id,\n };\n\n mutate({ variables: { input } });\n });\n };\n\n return { createResolutionDocument };\n};\n\nexport { useCreateResolutionDocument };\n","import { useState } from 'react';\nimport { useDeleteResolutionMutation } from './../data/mutations/DeleteResolutionMutation';\n\nconst useDeleteResolution = ({ onCompleted }) => {\n const update = (cache, { data: { deleteResolution } }) => {\n const { vote } = deleteResolution;\n\n onCompleted(vote);\n };\n\n const [mutate, { loading: isDeleting }] = useDeleteResolutionMutation({ update });\n\n const deleteResolution = (resolutionId) => mutate({ variables: { input: { resolutionId: resolutionId } } });\n\n return {\n isDeleting,\n deleteResolution,\n };\n};\n\nexport { useDeleteResolution };\n","import { useState } from 'react';\nimport { useDeleteResolutionDocumentMutation } from './../data/mutations/DeleteResolutionDocumentMutation';\n\nconst useDeleteResolutionDocument = ({ onCompleted }) => {\n const update = (cache, { data: { deleteResolutionDocument } }) => {\n const { resolutionDocument } = deleteResolutionDocument;\n\n onCompleted(resolutionDocument.id);\n };\n\n const [mutate, { loading: isDeleting }] = useDeleteResolutionDocumentMutation({ update });\n\n const deleteResolutionDocument = (resolutionDocumentId) =>\n mutate({ variables: { input: { resolutionDocumentId: resolutionDocumentId } } });\n\n return {\n isDeleting,\n deleteResolutionDocument,\n };\n};\n\nexport { useDeleteResolutionDocument };\n","import { useState, useEffect } from 'react';\nimport { useCompanyQuery } from './../data/queries/CompanyQuery';\n\nconst useFetchCompany = ({ companyId }) => {\n const [fetchedData, setFetchedData] = useState({\n contacts: [],\n meetings: [],\n });\n\n const updateCompanyData = (updates) => setFetchedData((state) => ({ ...state, ...updates }));\n\n const { data: companyData } = useCompanyQuery({});\n\n useEffect(() => setCompanyData(), [companyData]);\n\n const setCompanyData = () => {\n if (!companyData) return;\n\n const { contacts, meetings } = companyData.currentCompany;\n\n updateCompanyData({ contacts: contacts, meetings: meetings });\n };\n\n return {\n ...fetchedData,\n };\n};\n\nexport { useFetchCompany };\n","import { useState, useEffect } from 'react';\nimport { useResolutionQuery } from './../data/queries/ResolutionQuery';\n\nconst useFetchResolutionDocuments = ({ resolutionId }) => {\n const [updatableData, setUpdatableData] = useState({\n isLoading: false,\n resolutionDocuments: [],\n });\n\n const updateResolutionDocumentsData = (updates) => setUpdatableData((state) => ({ ...state, ...updates }));\n\n const { loading: isResolutionLoading, data: resolutionData } = useResolutionQuery({\n variables: { id: resolutionId },\n });\n\n useEffect(() => setIsLoading(), [isResolutionLoading]);\n useEffect(() => setResolutionData(), [resolutionData]);\n\n const setIsLoading = () => {\n if (!isResolutionLoading) return;\n\n updateResolutionDocumentsData({ isLoading: true });\n };\n\n const setResolutionData = () => {\n if (!resolutionData) return;\n\n const { resolution } = resolutionData.currentCompany;\n\n updateResolutionDocumentsData({\n isLoading: false,\n resolutionDocuments: resolution.resolutionDocuments,\n });\n };\n\n return {\n ...updatableData,\n };\n};\n\nexport { useFetchResolutionDocuments };\n","import { useState } from 'react';\nimport { usePublishVoteMutation } from './../data/mutations/PublishVoteMutation';\n\nconst usePublishVote = ({ onCompleted }) => {\n const update = (cache, { data: { publishVote } }) => onCompleted();\n\n const [mutate, { loading: isPublishing }] = usePublishVoteMutation({ update });\n\n const publishVote = (payload) => mutate({ variables: { input: payload } });\n\n return {\n publishVote,\n isPublishing,\n };\n};\n\nexport { usePublishVote };\n","import { useState } from 'react';\nimport { useResendVoteInviteMutation } from './../data/mutations/ResendVoteInviteMutation';\n\nconst useResendVoteInvite = () => {\n const update = (cache, { data: { resendVoteInvite } }) => {\n const { vote } = resendVoteInvite;\n };\n\n const [mutate] = useResendVoteInviteMutation({ update });\n\n const resendVoteInvite = (payload) => mutate({ variables: { input: payload } });\n\n return {\n resendVoteInvite,\n };\n};\n\nexport { useResendVoteInvite };\n","import { useState } from 'react';\nimport { useUpdateResolutionMutation } from './../data/mutations/UpdateResolutionMutation';\n\nconst useUpdateResolution = ({}) => {\n const update = (cache, { data: { updateResolution } }) => {\n const { resolution, errors } = updateResolution;\n\n if (errors.length) {\n return setErrors(errors);\n }\n };\n\n const [errors, setErrors] = useState(null);\n const [mutate, { loading: isUpdating }] = useUpdateResolutionMutation({ update });\n\n const updateResolution = (payload) => mutate({ variables: { input: payload } });\n\n return {\n isUpdating,\n updateResolution,\n errors,\n };\n};\n\nexport { useUpdateResolution };\n","import { useState } from 'react';\nimport { useUpdateVoteSettingsMutation } from './../data/mutations/UpdateVoteSettingsMutation';\n\nconst useUpdateVoteSettings = ({ onCompleted }) => {\n const update = (cache, { data: { updateVoteSettings } }) => {\n const { vote, errors } = updateVoteSettings;\n\n if (errors.length) {\n return setErrors(errors);\n }\n\n onCompleted();\n };\n\n const [errors, setErrors] = useState(null);\n const [mutate, { loading: isUpdating }] = useUpdateVoteSettingsMutation({ update });\n\n const updateVoteSettings = (payload) => mutate({ variables: { input: payload } });\n\n return {\n errors,\n updateVoteSettings,\n isUpdating,\n };\n};\n\nexport { useUpdateVoteSettings };\n","import { useState } from 'react';\nimport { useUpdateVotersMutation } from './../data/mutations/UpdateVotersMutation';\n\nconst useUpdateVoters = ({ onCompleted }) => {\n const update = (cache, { data: { updateVoters } }) => onCompleted();\n\n const [mutate, { loading: isUpdatingVoters }] = useUpdateVotersMutation({ update });\n\n const updateVoters = (payload) => mutate({ variables: { input: payload } });\n\n return {\n updateVoters,\n isUpdatingVoters,\n };\n};\n\nexport { useUpdateVoters };\n","import { useState } from 'react';\nimport { useUpsertVoteMutation } from './../data/mutations/UpsertVoteMutation';\n\nimport { formatDate, formatTime } from 'helpers/formatDateTime';\n\nconst useUpsertVote = ({ onError, onCompleted }) => {\n const update = (cache, { data: { upsertVote } }) => {\n const { vote, errors } = upsertVote;\n const errorsCount = errors.length;\n\n if (errorsCount) {\n setErrors(errors);\n\n return onError(errorsCount);\n }\n\n onCompleted(errorsCount, vote.slug);\n };\n\n const [errors, setErrors] = useState(null);\n const [mutate, { loading: isUpserting }] = useUpsertVoteMutation({ update });\n\n const resetErrors = (attribute) => setErrors((errors) => errors.filter((error) => error.attribute !== attribute));\n\n const upsertVote = (payload) => {\n const params = Object.assign({}, payload);\n\n params.startDate = formatDate(payload.startDate);\n params.endDate = formatDate(payload.endDate);\n params.startTime = formatTime(payload.startTime);\n params.endTime = formatTime(payload.endTime);\n\n mutate({ variables: { input: params } });\n };\n\n return {\n errors,\n resetErrors,\n upsertVote,\n isUpserting,\n };\n};\n\nexport { useUpsertVote };\n","import { useState } from 'react';\nimport { useValidateResolutionsMutation } from './../data/mutations/ValidateResolutionsMutation';\n\nconst useValidateResolutions = ({ onError, onCompleted }) => {\n const update = (cache, { data: { validateResolutions } }) => {\n const { vote, errors } = validateResolutions;\n\n if (errors.length) {\n return onError();\n }\n\n onCompleted();\n };\n\n const [mutate] = useValidateResolutionsMutation({ update });\n\n const validateResolutions = (voteId) => mutate({ variables: { input: voteId } });\n\n return {\n validateResolutions,\n };\n};\n\nexport { useValidateResolutions };\n","import { useCallback } from 'react';\n\nconst useVoteContacts = ({ vote, voteParams, updateVoteParams, contacts }) => {\n const contactExists = useCallback(\n (contact) => {\n voteParams.contactIds.find((item) => item == contact.id);\n },\n [voteParams.contactIds]\n );\n\n const addContact = useCallback(\n (contact) => {\n updateVoteParams('contactIds', Array.from(new Set([...voteParams.contactIds, contact.id])));\n },\n [voteParams.contactIds]\n );\n\n const removeContact = useCallback(\n (contact) => {\n updateVoteParams(\n 'contactIds',\n voteParams.contactIds.filter((id) => id !== contact.id)\n );\n },\n [voteParams.contactIds]\n );\n\n const addCollaborator = useCallback(\n (email) => {\n updateVoteParams('collaboratorEmails', Array.from(new Set([...voteParams.collaboratorEmails, email])));\n },\n [voteParams.collaboratorEmails]\n );\n\n const removeCollaborator = useCallback(\n (email) => {\n updateVoteParams(\n 'collaboratorEmails',\n voteParams.collaboratorEmails.filter((collaboratorEmail) => collaboratorEmail !== email)\n );\n },\n [voteParams.collaboratorEmails]\n );\n\n const toggleContact = useCallback(\n (contact) => {\n if (contactExists(contact)) {\n removeContact(contact);\n } else {\n addContact(contact);\n }\n },\n [voteParams.contactIds]\n );\n\n const contactWithEmail = (email) => {\n return contacts?.find((contact) => contact.email === email);\n };\n\n const importEmails = (inputEmails) => {\n if (!inputEmails) return;\n\n inputEmails.map((email) => {\n if (contactWithEmail(email)) {\n addContact(contactWithEmail(email));\n } else {\n addCollaborator(email);\n }\n });\n };\n\n return {\n contactExists,\n addContact,\n removeContact,\n addCollaborator,\n removeCollaborator,\n toggleContact,\n importEmails,\n };\n};\n\nexport { useVoteContacts };\n","import { useState, useEffect } from 'react';\nimport { useVoteQuery } from './../data/queries/VoteQuery';\n\nconst useVoteEditor = ({ voteId }) => {\n const [updatableData, setUpdatableData] = useState({\n isLoading: false,\n vote: null,\n });\n\n const updateVoteData = (updates) => setUpdatableData((state) => ({ ...state, ...updates }));\n\n const { loading: isVoteLoading, data: voteData } = useVoteQuery({\n variables: { id: voteId },\n skip: !voteId,\n });\n\n useEffect(() => setIsLoading(), [isVoteLoading]);\n useEffect(() => setVoteData(), [voteData]);\n\n const setIsLoading = () => {\n if (!isVoteLoading) return;\n\n updateVoteData({ isLoading: true });\n };\n\n const setVoteData = () => {\n if (!voteData) return;\n\n const { vote } = voteData.currentCompany;\n\n updateVoteData({ isLoading: false, vote });\n };\n\n return {\n ...updatableData,\n };\n};\n\nexport { useVoteEditor };\n","import { useState } from 'react';\n\nimport { parseDateTime } from 'helpers/parseDateTime';\nimport { roundUpHours } from 'helpers/roundUpHours';\n\nconst useVoteParams = ({ vote }) => {\n const initialStartTime = () => vote?.startedAt || roundUpHours(moment().parseZone());\n const initialEndTime = () => vote?.endedAt || roundUpHours(moment().parseZone()).add(15, 'minute');\n\n const initialVoteParams = {\n voteId: vote?.id || '',\n name: vote?.name || '',\n passcode: vote?.passcode || '',\n voterType: vote?.voterType || 'contacts',\n showResults: vote ? vote.showResults : true,\n anonymous: vote ? vote.anonymous : false,\n startTime: initialStartTime(),\n endTime: initialEndTime(),\n startDate: parseDateTime(initialStartTime()),\n endDate: parseDateTime(initialEndTime()),\n meetingId: vote?.meetingId,\n contactIds: vote?.contactIds || [],\n collaboratorEmails: vote?.collaboratorEmails || [],\n };\n\n const [voteParams, setVoteParams] = useState(initialVoteParams);\n\n const updateVoteParams = (name, value) => setVoteParams((voteParams) => ({ ...voteParams, [name]: value }));\n\n const setStartDate = (value) => updateVoteParams('startDate', value);\n const setEndDate = (value) => updateVoteParams('endDate', value);\n const setStartTime = (value) => updateVoteParams('startTime', value);\n const setEndTime = (value) => updateVoteParams('endTime', value);\n\n const setVoteDateTimes = (startTime, endTime, startDate, endDate) => {\n setVoteParams((voteParams) => ({\n ...voteParams,\n startTime: startTime,\n endTime: endTime,\n startDate: startDate,\n endDate: endDate,\n }));\n };\n\n const setVoteMeetingDateTimes = (meeting) => {\n if (!meeting) {\n const startTime = initialStartTime();\n const endTime = initialEndTime();\n\n setVoteDateTimes(startTime, endTime, parseDateTime(startTime), parseDateTime(endTime));\n } else {\n const meetingDate = moment(meeting.meetingStartTime).parseZone();\n\n setVoteDateTimes(meeting.meetingStartTime, meeting.meetingEndTime, meetingDate, meetingDate);\n }\n };\n\n const setVoteMeetingName = (meeting) => {\n if (!meeting) {\n updateVoteParams('name', '');\n } else {\n updateVoteParams('name', `Meeting Vote: ${meeting.title}`);\n }\n };\n\n const handleInputChange = (event) => {\n let inputName = event.target.name;\n let inputValue = event.target.value;\n\n if (inputName == 'anonymous') {\n inputValue = event.target.checked;\n }\n\n updateVoteParams(inputName, inputValue);\n };\n\n return {\n voteParams,\n setVoteParams,\n updateVoteParams,\n setStartDate,\n setEndDate,\n setStartTime,\n setEndTime,\n setVoteMeetingDateTimes,\n setVoteMeetingName,\n handleInputChange,\n };\n};\n\nexport { useVoteParams };\n","import React, { useCallback, useMemo, useState } from 'react';\n\nconst defaultValues = {\n isOpendSendingSign: false,\n setIsOpendSendingSign: () => {},\n isOpendSignModal: false,\n setIsOpendSignModal: () => {},\n};\n\nexport const SendingSignContext = React.createContext(defaultValues);\n\nconst SendingSignProvider = ({ children }) => {\n const [isOpendSendingSign, setIsOpendSendingSignVal] = useState(false);\n const [isOpendSignModal, setIsOpendSignModalVal] = useState(false);\n\n const setIsOpendSendingSign = useCallback(\n (value) => {\n setIsOpendSendingSignVal(value);\n },\n [setIsOpendSendingSignVal]\n );\n\n const setIsOpendSignModal = useCallback(\n (value) => {\n setIsOpendSignModalVal(value);\n },\n [setIsOpendSignModalVal]\n );\n\n const value = useMemo(\n () => ({\n isOpendSendingSign,\n setIsOpendSendingSign,\n isOpendSignModal,\n setIsOpendSignModal,\n }),\n [isOpendSendingSign, setIsOpendSendingSign, isOpendSignModal, setIsOpendSignModal]\n );\n\n return {options}
\n\n \n
\n\n | # | \n\n | \n \n | \n
|---|
\n
\n )}\n\n \n
\n\n | # | \n\n | \n
|---|
\n
\n )}\n Hello from Dashboard
;\n\nexport default Dashboard;\n","import React from 'react';\n\nconst Dashboard = () =>Hello from Taskboard
;\n\nexport default Dashboard;\n","import { createStore } from './createStore';\nimport { deleteById, updateById } from 'utils';\n\nimport { trackPromise } from 'react-promise-tracker';\nimport { getAttributes } from 'helpers/getAttributes';\n\nimport axios from 'axios';\n\nconst initialState = {\n agendas: [],\n visibilityMap: {},\n};\n\nconst actionTypes = {\n SET: 'agendas.set',\n ADD: 'agendas.add',\n UPDATE: 'agendas.update',\n DELETE: 'agendas.remove',\n TOGGLE_VISIBILITY: 'agenda.toggleVisibility',\n TOGGLE_ALL_VISIBILITY: 'agenda.toggleAllVisibility',\n};\n\nconst companyId = getCompanySlug();\n\nconst api = {\n toggleAgenda: (meetingId, agendaId) => {\n const apiURL = `/api/${companyId}/v1/meetings/${meetingId}/agendas/${agendaId}/toggle.json`;\n\n const promise = axios\n .patch(apiURL)\n .then((response) => response.data)\n .then(getAttributes);\n\n return trackPromise(promise);\n },\n\n createAgenda: (meetingId, params) => {\n const apiURL = `/api/${companyId}/v1/meetings/${meetingId}/agendas.json`;\n const payload = { agenda: params };\n\n const promise = axios\n .post(apiURL, payload)\n .then((response) => response.data)\n .then(getAttributes);\n\n return trackPromise(promise);\n },\n\n updateAgenda: (meetingId, agendaId, params) => {\n const apiURL = `/api/${companyId}/v1/meetings/${meetingId}/agendas/${agendaId}.json`;\n const payload = { agenda: params };\n\n const promise = axios\n .put(apiURL, payload)\n .then((response) => response.data)\n .then(getAttributes);\n\n return trackPromise(promise);\n },\n\n deleteAgenda: (meetingId, agendaId) => {\n const apiURL = `/api/${companyId}/v1/meetings/${meetingId}/agendas/${agendaId}.json`;\n\n const promise = axios\n .delete(apiURL)\n .then((response) => response.data)\n .then(getAttributes);\n\n return trackPromise(promise);\n },\n\n reorderAgendas: (meetingId, params) => {\n const apiURL = `/api/${companyId}/v1/meetings/${meetingId}/agendas/reorder.json`;\n const payload = { agenda: params };\n\n const promise = axios\n .put(apiURL, payload)\n .then((response) => response.data)\n .then(getAttributes);\n\n return trackPromise(promise);\n },\n};\n\nconst useAgendasActions = () => {\n const dispatch = useAgendasDispatch();\n\n const toggleAgenda = (meetingId, agendaId) => {\n return api.toggleAgenda(meetingId, agendaId).then((agenda) => {\n dispatch({ type: actionTypes.UPDATE, payload: agenda });\n });\n };\n\n const toggleAgendaVisibility = (agendaId) => {\n return dispatch({ type: actionTypes.TOGGLE_VISIBILITY, payload: agendaId });\n };\n\n const toggleAgendasVisibility = (isVisible) => {\n return dispatch({ type: actionTypes.TOGGLE_ALL_VISIBILITY, payload: isVisible });\n };\n\n const createAgenda = (meetingId, params) => {\n return api.createAgenda(meetingId, params).then(setAgendas);\n };\n\n const updateAgenda = (meetingId, agendaId, params) => {\n return api.updateAgenda(meetingId, agendaId, params).then(setAgendas);\n };\n\n const deleteAgenda = (meetingId, agendaId) => {\n return api.deleteAgenda(meetingId, agendaId).then(setAgendas);\n };\n\n const reorderAgendas = (meetingId, params) => {\n return api.reorderAgendas(meetingId, params).then(setAgendas);\n };\n\n const setAgendas = (agendas) => {\n dispatch({ type: actionTypes.SET, payload: agendas });\n };\n\n return {\n setAgendas,\n toggleAgenda,\n createAgenda,\n updateAgenda,\n deleteAgenda,\n reorderAgendas,\n toggleAgendaVisibility,\n toggleAgendasVisibility,\n };\n};\n\nconst getVisibilityMap = (state, payload) => {\n return payload.reduce((accumulator, agenda) => {\n return { ...accumulator, [agenda.id]: state.visibilityMap[agenda.id] || false };\n }, {});\n};\n\nconst setVisibilityMap = (state, value) => {\n return Object.keys(state.visibilityMap).reduce((accumulator, key) => {\n return { ...accumulator, [key]: value };\n }, {});\n};\n\nconst reducer = (state, action) => {\n const { type, payload } = action;\n\n switch (type) {\n case actionTypes.SET:\n return { agendas: payload, visibilityMap: getVisibilityMap(state, payload) };\n case actionTypes.UPDATE:\n return { agendas: updateById(state.agendas, payload), visibilityMap: getVisibilityMap(state, [payload]) };\n case actionTypes.TOGGLE_VISIBILITY:\n return { ...state, visibilityMap: { ...state.visibilityMap, [payload]: !state.visibilityMap[payload] } };\n case actionTypes.TOGGLE_ALL_VISIBILITY:\n return { ...state, visibilityMap: setVisibilityMap(state, payload) };\n }\n};\n\nconst [AgendasProvider, useAgendasStore, useAgendasDispatch] = createStore(reducer, initialState);\n\nexport { AgendasProvider, useAgendasStore, useAgendasActions };\n","import React, { createContext, useContext, useReducer, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport useAnnotationsQuery from '../components/meetings/data/queries/AnnotationsQuery';\nimport useCreateAnnotationMutation from '../components/meetings/data/mutations/CreateAnnotationMutation';\nimport useUpdateAnnotationMutation from '../components/meetings/data/mutations/UpdateAnnotationMutation';\nimport useDeleteAnnotationMutation from '../components/meetings/data/mutations/DeleteAnnotationMutation';\nimport useAnnotationSubscription from '../components/meetings/data/hooks/useAnnotationSubscription';\nimport { getResourceGID } from '../helpers/graphql';\n\nconst AnnotationContext = createContext();\n\nconst initialState = {\n initialAnnotations: [],\n addedAnnotaion: null,\n updatedAnnotation: null,\n removedAnnotation: null,\n};\n\nconst actionTypes = {\n SET_INITIAL_DATA: 'annotations.setInitialData',\n SET_ADDED_ANNOTATION: 'annotations.setAdded',\n SET_UPDATED_ANNOTATION: 'annotation.setUpdated',\n SET_REMOVED_ANNOTATION: 'annotation.setRemoved',\n};\n\nconst reducer = (state, action) => {\n const { type, payload } = action;\n\n switch (type) {\n case actionTypes.SET_INITIAL_DATA:\n return { ...state, initialAnnotations: payload.initialAnnotations };\n case actionTypes.SET_ADDED_ANNOTATION:\n return { ...state, addedAnnotation: payload.data };\n case actionTypes.SET_UPDATED_ANNOTATION:\n return { ...state, updatedAnnotation: payload.data };\n case actionTypes.SET_REMOVED_ANNOTATION:\n return { ...state, removedAnnotation: payload.data };\n }\n};\n\nexport const AnnotationProvider = ({ meetingId, smartPackId, children, currentContactId }) => {\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const [createAnnotation] = useCreateAnnotationMutation();\n const [updateAnnotation] = useUpdateAnnotationMutation();\n const [deleteAnnotation] = useDeleteAnnotationMutation();\n\n const { data, refetch } = useAnnotationsQuery({\n variables: { id: getResourceGID('Meeting', meetingId) },\n fetchPolicy: 'network-only',\n });\n\n const handleRemoteAnnotation = (actionType) => (data) => {\n if (data.contactId === currentContactId) {\n return;\n }\n\n dispatch({ type: actionType, payload: { data } });\n };\n\n useAnnotationSubscription({\n onCreated: handleRemoteAnnotation(actionTypes.SET_ADDED_ANNOTATION),\n onUpdated: handleRemoteAnnotation(actionTypes.SET_UPDATED_ANNOTATION),\n onRemoved: handleRemoteAnnotation(actionTypes.SET_REMOVED_ANNOTATION),\n });\n\n // On initial db annotations load\n useEffect(() => {\n if (data) {\n const {\n currentCompany: {\n meeting: {\n smartPack: { annotations },\n },\n },\n } = data;\n const initialAnnotations = annotations.map((annotation) => ({\n data: annotation.data,\n contactId: annotation.contactId,\n gid: annotation.id,\n }));\n dispatch({ type: actionTypes.SET_INITIAL_DATA, payload: { initialAnnotations } });\n }\n }, [data, dispatch]);\n\n const addAnnotation = async (annotation, xfdf, shared) => {\n const { data } = await createAnnotation({\n variables: {\n input: {\n smartPackId: getResourceGID('SmartPack', smartPackId),\n externalId: annotation.Id,\n data: xfdf,\n shared: shared,\n },\n },\n });\n\n const annotationId = data.createAnnotation.annotation.id;\n\n ahoy.track('annotation_added', { annotation_id: annotationId });\n\n return annotationId;\n };\n\n const modifyAnnotation = (annotation, data) => {\n ahoy.track('annotation_modified', { annotation_id: annotation.getCustomData('gid') });\n\n updateAnnotation({\n variables: {\n input: {\n annotationId: annotation.getCustomData('gid'),\n data,\n },\n },\n });\n };\n\n const removeAnnotation = (annotation) => {\n ahoy.track('annotation_deleted', { annotation_id: annotation.getCustomData('gid') });\n\n deleteAnnotation({\n variables: {\n input: {\n annotationId: annotation.getCustomData('gid'),\n },\n },\n });\n };\n\n const refetchAnnotations = () => refetch();\n\n const { initialAnnotations, addedAnnotation, updatedAnnotation, removedAnnotation } = state;\n\n return (\n