\n \n Notifications\n \n\n
\n \n setShowOnlyUnread(!showOnlyUnread)}\n disabled={isLoading}\n />\n \n
\n \n
\n\n \n setType(opt?.value || '')}\n isSearchable\n isDisabled={isLoading}\n />\n
\n\n \n \n\n
\n {renderContent()}\n
\n \n \n toggleReadStatus(notification, !notification.IsRead)}\n aria-label={notification.IsRead ? 'Mark as unread' : 'Mark as read'}\n >\n {isUpdating ? (\n \n )}\n
\n );\n});\n\nexport default NotificationItem;\n","import React, { memo } from 'react';\n\nimport NotificationItem from './NotificationItem';\nimport GroupItem from './GroupItem';\nimport InfiniteScroll from '~/components/VirtualList/InfiniteScroll';\n\nconst NotificationsGroup = memo(({\n notifications,\n nextToken,\n isNextPageLoading,\n fetchNextPageOfNotifications,\n updatingNotificationIds,\n updatingAllNotifications,\n markAllNotificationsAsRead,\n toggleNotificationReadStatus,\n}) => {\n const hasUnreadNotifications = notifications.some((notification) => notification?.type === 'notification' && !notification?.content?.IsRead);\n\n const renderItem = (item, loadingSkeleton, index) => {\n if (item?.type === 'group') {\n return (\n \n
\n\n \n {!loadingSkeleton &&
\n \n
\n\n {!loadingSkeleton && (\n \n \n {loadingSkeleton ? (\n
\n\n \n {loadingSkeleton ? (\n
\n \n
\n );\n});\n\nexport default NotificationsGroup;\n","import React, {\n forwardRef, useImperativeHandle, useRef, useEffect, useState, useCallback, useReducer,\n} from 'react';\nimport { VariableSizeList as List } from 'react-window';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { useLocation, useHistory } from 'react-router-dom';\nimport useSmoothScrollToElement from '~/components/hooks/useSmoothScrollToElement';\nimport Item from './Item';\n\nconst OVERSCAN_COUNT = 20;\n\nconst InfiniteScroll = forwardRef(({\n items,\n renderItem,\n itemSize,\n nextPage,\n prevPage,\n isNextPageLoading,\n setLoadingActivities,\n loadNextPage,\n activeTab,\n setActiveTab,\n lead,\n isFormOpen,\n editFormState,\n isActivitiesComponent,\n}, ref) => {\n const listRef = useRef();\n const [, forceUpdate] = useState();\n const rowHeights = useRef({});\n const location = useLocation();\n const history = useHistory();\n const itemCount = nextPage || prevPage ? items.length + 1 : items.length;\n const [targetActivityId, setTargetActivityId] = useState(null);\n const [isEndReached, setIsEndReached] = useState(false);\n\n useEffect(() => {\n if (listRef.current) {\n listRef.current?.resetAfterIndex(0);\n }\n }, [isFormOpen]);\n\n const loadMoreItems = useCallback((startIndex, stopIndex) => {\n if (!isNextPageLoading && !isEndReached) {\n if (startIndex === 0 && prevPage) {\n loadNextPage('prev');\n } else if (stopIndex >= items.length - 1 && nextPage) {\n loadNextPage('next');\n } else if (stopIndex >= items.length - 1 && !nextPage) {\n setIsEndReached(true);\n }\n }\n }, [isNextPageLoading, prevPage, nextPage, loadNextPage, items.length, isEndReached]);\n\n const handleItemsRendered = useCallback(({ onItemsRendered }) => ({\n visibleStartIndex,\n visibleStopIndex,\n overscanStartIndex,\n overscanStopIndex,\n }) => {\n onItemsRendered({\n visibleStartIndex,\n visibleStopIndex,\n overscanStartIndex,\n overscanStopIndex,\n });\n\n if (visibleStartIndex === 0 && prevPage && !isNextPageLoading) {\n loadMoreItems(visibleStartIndex, visibleStopIndex);\n } else if (visibleStopIndex >= items.length - 5 && nextPage && !isNextPageLoading && !isEndReached) {\n loadMoreItems(visibleStartIndex, visibleStopIndex);\n }\n }, [items.length, prevPage, nextPage, isNextPageLoading, loadMoreItems, isEndReached]);\n\n useEffect(() => {\n if (!isNextPageLoading && listRef.current) {\n listRef.current?.resetAfterIndex(0);\n setIsEndReached(false);\n }\n }, [isNextPageLoading]);\n\n const isItemLoaded = (index) => {\n const result = index < items.length;\n return result;\n };\n\n const setRowHeight = useCallback((index, size) => {\n if (rowHeights.current[index] !== size) {\n rowHeights.current[index] = size;\n if (listRef.current) {\n window.requestAnimationFrame(() => {\n listRef.current?.resetAfterIndex(index);\n });\n }\n }\n }, []);\n\n const getRowHeight = (index) => {\n const height = rowHeights.current[index] ?? itemSize;\n return height;\n };\n\n useImperativeHandle(ref, () => ({\n scrollToItem: (index, align = 'auto') => {\n listRef.current?.scrollToItem(index, align);\n },\n forceUpdateList: () => {\n forceUpdate({});\n if (listRef.current) {\n listRef.current?.resetAfterIndex(0, true);\n }\n },\n }));\n\n useEffect(() => {\n if (typeof setLoadingActivities !== 'function') return;\n\n setTimeout(() => {\n listRef.current?.scrollToItem(0, 'start');\n }, 100);\n\n if (isNextPageLoading) {\n setLoadingActivities(false);\n }\n }, [activeTab]);\n\n useEffect(() => {\n if (location.hash) {\n const hash = location.hash.replace('#', '');\n setTargetActivityId(hash);\n }\n }, [location.hash]);\n\n useEffect(() => {\n if (listRef.current) {\n listRef.current?.resetAfterIndex(0, true);\n }\n }, [items]);\n\n useEffect(() => {\n const { pathname, hash, search } = location;\n const normalizedHash = hash.replace('#', '');\n const activitiesPaths = ['/recruiter/today', '/retention/today'];\n\n const isOnActivitiesPage = activitiesPaths.some((path) => pathname.includes(path));\n\n const isPageRefresh = performance?.getEntriesByType\n ? performance.getEntriesByType('navigation')[0].type === 'reload'\n : false;\n\n if (isPageRefresh && normalizedHash && isOnActivitiesPage) {\n history.replace(`${pathname}${search}`);\n setActiveTab('all');\n loadNextPage('init');\n }\n }, [location, history]);\n\n const renderLoading = () => (\n \n { isActivitiesComponent && isNextPageLoading && renderLoading() }\n
\n \n )}\n \n {data.renderItem(item, isLoading, index, data.editFormState)}\n {(data.items.length === index + 1) && (data.activeTab === 'all' || data.activeTab === 'changes') && (\n
\n );\n}, areEqual);\n\nexport default Item;\n","import React, { Suspense, lazy } from 'react';\nimport { Router, Route } from 'react-router-dom';\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\n\nconst AgentDashboard = lazy(() => import(\n /* webpackChunkName: \"agent-dashboard\" */ '~/components/pages/agent_dashboard'\n));\nconst PublicReport = lazy(() => import(\n /* webpackChunkName: \"public-report\" */ '~/components/pages/public_report'\n));\nconst PhoneNumberSetting = lazy(() => import(\n /* webpackChunkName: \"phone-number\" */ '~/components/pages/account/phone_number_setting'\n));\nconst TeamSettings = lazy(() => import(\n /* webpackChunkName: \"account\" */ '~/pages/AccountSettings/index'\n));\nconst UserSettings = lazy(() => import(\n /* webpackChunkName: \"user\" */ '~/pages/UserSettings/index'\n));\nconst LandingPageSetting = lazy(() => import(\n /* webpackChunkName: \"landing-page\" */ '~/components/pages/account/landing_page_setting'\n));\nconst LandingPageAccountSetting = lazy(() => import(\n /* webpackChunkName: \"landing-page\" */ '~/components/pages/account/landing_page_account_setting'\n));\nconst TeamMembers = lazy(() => import(\n /* webpackChunkName: \"team-members\" */ '~/components/pages/account/team_members'\n));\nconst Campaigns = lazy(() => import(\n /* webpackChunkName: \"campaigns\" */ '~/pages/Campaigns/index'\n));\nconst EditCampaign = lazy(() => import(\n /* webpackChunkName: \"campaigns\" */ '~/pages/Campaigns/components/EditCampaign'\n));\nconst EditCampaignLibrary = lazy(() => import(\n /* webpackChunkName: \"campaign-library\" */ '~/components/pages/account/manage_campaigns_library/form/edit_campaign_library'\n));\nconst OnboardApp = lazy(() => import(\n /* webpackChunkName: \"onboard-app\" */ '~/components/onboard_app'\n));\nconst Labels = lazy(() => import(\n /* webpackChunkName: \"labels\" */ '~/pages/Labels/index'\n));\nconst ManageCampaignTriggers = lazy(() => import(\n /* webpackChunkName: \"campaign-triggers\" */ '~/components/pages/account/manage_campaign_triggers'\n));\nconst NewOrEditCampaignTrigger = lazy(() => import(\n /* webpackChunkName: \"campaign-triggers\" */ '~/components/pages/account/new_or_edit_campaign_trigger'\n));\nconst ManageCampaignsLibrary = lazy(() => import(\n /* webpackChunkName: \"campaign-library\" */ '~/components/pages/account/manage_campaigns_library'\n));\nconst PreviewCampaignsLibrary = lazy(() => import(\n /* webpackChunkName: \"campaign-library\" */ '~/components/pages/account/preview_campaigns_library'\n));\nconst ManageData = lazy(() => import(\n /* webpackChunkName: \"data\" */ '~/components/pages/account/manage_data'\n));\nconst SignUp = lazy(() => import(\n /* webpackChunkName: \"sign-up\" */ '~/components/pages/users/sign_up'\n));\nconst Register = lazy(() => import(\n /* webpackChunkName: \"sign-up\" */ '~/components/pages/users/register'\n));\nconst NewOrEditSearchQuery = lazy(() => import(\n /* webpackChunkName: \"search-queries\" */ '~/components/pages/account/data/mls_import_tab/new_or_edit_search_query'\n));\nconst ManageMlsConfiguration = lazy(() => import(\n /* webpackChunkName: \"mls\" */ '~/components/pages/account/manage_mls_configuration'\n));\nconst VideoPreview = lazy(() => import(\n /* webpackChunkName: \"videos\" */ '~/components/pages/videos/preview'\n));\nconst Inbox = lazy(() => import(\n /* webpackChunkName: \"inbox\" */ '~/pages/Inbox/index'\n));\nconst DocumentPreview = lazy(() => import(\n /* webpackChunkName: \"documents\" */ '~/components/pages/documents/preview'\n));\n\nconst isDmsEnabled = checkFeatureFlag(process.env.ENABLE_DOCUMENT_MANAGEMENT_FLAG);\n\n// TODO: [Teefan] AppRouter could be improved?\n// https://reacttraining.com/react-router/web/example/route-config\nconst AppRouter = () => (\n \n {/* Recruiting routes */}\n
\n \n {\n e.preventDefault();\n this.resendAppointment(appt.id);\n }}\n >\n Resend\n \n {\n e.preventDefault();\n this.cancelAppointment(appt.id);\n }}\n >\n Cancel\n \n
\n );\n }\n\n return (\n \n {\n e.preventDefault();\n this.resendEmail(email.id);\n }}\n >\n Resend\n \n {\n e.preventDefault();\n this.cancelEmail(email.id);\n }}\n >\n Cancel\n \n
\n );\n }\n\n return (\n \n \n \n {appointments.map(this.renderAppointment)}\n {emails.map(this.renderEmail)}\n \n
\n
\n );\n }\n}\n\nexport default AttentionNeeded;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport CountUp from 'react-countup';\nimport NumberFormat from 'react-number-format';\nimport bugsnag from '@bugsnag/js';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport APIRequest from '~/lib/api_request';\nimport AdditionalUsersSelect from './forms/additional_users_select';\nimport SmsStats from './pages/billing/sms_stats';\nimport EmailStats from './pages/billing/email_stats';\nimport CallStats from './pages/billing/call_stats';\nimport RecordingStats from './pages/billing/recording_stats';\nimport CardForm from './forms/billing_forms/card_form';\nimport UpdateCardForm from './forms/billing_forms/update_card_form';\n\nconst bulkMessageLookbackPeriod = process.env.BULK_MESSAGE_LOOKBACK_PERIOD / 24;\n\nclass BillingApp extends React.Component {\n constructor(props) {\n super(props);\n\n const { subscription } = this.props;\n\n this.state = {\n subscription,\n view: subscription ? 'subscription' : 'plans',\n hasError: false,\n chargedCard: false,\n updatedCard: false,\n annual: true,\n frequency: 'yearly',\n loading: true,\n qty_additional_users: subscription ? subscription.qty_additional_users : 0,\n };\n\n autoBind(this);\n }\n\n static getDerivedStateFromError(error) {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n componentDidMount() {\n APIRequest.get({\n resource: '/v1/pricing_plans',\n }).end((err, res) => {\n this.setState({ plans: res.body, loading: false });\n });\n }\n\n componentDidCatch(error, errorInfo) {\n if (!process.env.BUGSNAG_API_KEY) return;\n const bugsnagClient = bugsnag(process.env.BUGSNAG_API_KEY);\n\n if (bugsnagClient) {\n bugsnagClient.notify(error, { context: errorInfo });\n }\n }\n\n onSuccess(res) {\n this.setState({\n subscription: res.body,\n chargedCard: true,\n view: 'subscription',\n });\n }\n\n onSuccessPaymentCard(res) {\n this.setState({\n subscription: res.body,\n updatedCard: true,\n view: 'subscription',\n });\n }\n\n onCancel(e) {\n this.setState({ view: 'plans' });\n }\n\n onChoosePlan(plan) {\n const { qty_additional_users } = this.state;\n\n this.setState({\n invoice: null,\n pricing_plan_id: plan.id,\n plan_id: plan.plan_id,\n additional_users_plan_id: plan.users_plan_id,\n qty_additional_users,\n view: 'cardform',\n });\n }\n\n onChooseAdditionalUsers(e) {\n const { subscription, qty_additional_users, plans } = this.state;\n\n this.setState({\n invoice: null,\n pricing_plan_id: subscription.pricing_plan_id,\n plan_id: subscription.base_plan_stripe_id,\n additional_users_plan_id: subscription.additional_users_stripe_id,\n qty_additional_users,\n view: 'cardform',\n });\n }\n\n handleQtyAdditionalUsersSelect = (selectedValue) => {\n this.setState({ qty_additional_users: selectedValue.value });\n }\n\n renderPurchaseForm() {\n const {\n pricing_plan_id, plan_id, additional_users_plan_id,\n qty_additional_users, subscription,\n } = this.state;\n const { purchaseButtonLabel, authToken } = this.props;\n const { invoice } = this.state;\n const purchaseBtnLabel = purchaseButtonLabel || 'Purchase';\n\n let invoiceForm;\n\n if (!invoice) {\n APIRequest.get({\n resource: '/v1/subscription/invoice',\n data: {\n pricing_plan_id,\n plan_id,\n additional_users_plan_id,\n qty_additional_users,\n },\n }).end((err, res) => {\n this.setState(res.body);\n });\n }\n\n if (invoice) {\n invoiceForm = invoice.items.map((i) => {\n const klass = i.amount < 0 ? 'text-green' : '';\n\n return (\n \n
\n Items requiring your attention
\n{i.description}
\n { i.trial && {i.trial} }\nTotal Charge Today
\n {subscription && subscription.in_trial && (\n\n \n Trialing until\n {' '}\n {Moment(subscription.trial_end).format('LL')}\n \n
\n )}\n\n
Loading
\n
\n );\n }\n\n renderPlan(plan) {\n const { frequency, plans, annual } = this.state;\n const oppositeFrequency = frequency === 'monthly' ? 'yearly' : 'monthly';\n\n const oppositeFrequencyPlan = plans[oppositeFrequency].find((p) => p.order === plan.order);\n\n let from;\n let to;\n\n if (frequency === 'annual') {\n from = plan.monthly_price;\n to = oppositeFrequencyPlan.monthly_price;\n } else {\n from = oppositeFrequencyPlan.monthly_price;\n to = plan.monthly_price;\n }\n\n return (\n \n
\n \n
\n \n \n \n {invoiceForm}\n \n
\n { invoice && (\n
\n Confirm Your Selection
\n\n
\n \n
\n Completely risk-free
\n\n If you’re not happy,\n {' '}\n let us know.\n {' '}\n Cancel any time during your trial period, and there will be no cost.\n
\n\n \n
\n { annual && (\n
\n );\n }\n\n renderPlans() {\n const {\n subscription, frequency, plans, annual, qty_additional_users,\n } = this.state;\n const { title } = this.props;\n const activeSubscription = subscription && subscription.status === 'active';\n\n const isCurrentPlan = (plan) => {\n if (!subscription) return false;\n return plan.id === subscription.pricing_plan_id;\n };\n\n const renderLimit = (limit, unit = '') => (limit != null ? `${limit.toLocaleString()} ${unit}` : 'Unlimited');\n\n const pickPlanButton = (plan, klass = 'btn-secondary') => {\n if (isCurrentPlan(plan)) {\n return ;\n }\n\n return (\n \n
\n { annual && (\n \n
\n )}\n \n
\n Save\n {' '}\n
\n
\n );\n }\n\n renderSubscription() {\n const { subscription, chargedCard, updatedCard } = this.state;\n const { message, onboard, authToken } = this.props;\n\n return (\n \n {title &&
\n\n {showPlanPicker && (\n {title}
}\n\n Pick one: \n {\n this.setState({\n annual: false,\n frequency: 'monthly',\n });\n }}\n className={classNames(\n 'btn btn-wide',\n monthlySelected ? 'btn-green' : 'btn-outline-green',\n )}\n >\n {monthlySelected && (\n {\n this.setState({ annual: true, frequency: 'yearly' });\n }}\n className={classNames(\n 'btn btn-wide',\n annualSelected ? 'btn-green' : 'btn-outline-green',\n )}\n >\n {annualSelected && (\n
\n \n \n \n
\n
\n )}\n | \n {activeSubscription && (\n | \n {plans[frequency].map((plan) => (\n |
\n Monthly price\n | \n\n {plans[frequency].map((plan) => (\n |
|---|---|
| \n Setup fee\n | \n {plans[frequency].map((plan) => (\n|
| \n {plans[frequency].map((plan) => (\n | |
| \n Suited For\n | \n {plans[frequency].map((plan) => (\n|
| \n User seats included\n | \n {plans[frequency].map((plan) => (\n|
| \n MLS import queries included\n | \n {plans[frequency].map((plan) => (\n|
| \n Generative AI request tokens\n | \n {plans[frequency].map((plan) => (\n|
| \n Text message segments per month\n \n included (image/video MMS text segments\n \n will count as 3 segments)\n | \n {plans[frequency].map((plan) => (\n |
| \n Videos per month included\n | \n {plans[frequency].map((plan) => (\n|
| \n Documents limit\n | \n {plans[frequency].map((plan) => (\n|
| \n Emails per month included\n | \n {plans[frequency].map((plan) => (\n|
| \n Voice call minutes to the US or Canada per month\n \n included\n | \n {plans[frequency].map((plan) => (\n |
| \n Call recording minutes included\n | \n {plans[frequency].map((plan) => (\n|
| \n Bulk messaging limit\n | \n {plans[frequency].map((plan) => (\n|
| \n Recruiting leads included\n | \n {plans[frequency].map((plan) => (\n|
| \n Retention team members included\n | \n {plans[frequency].map((plan) => (\n|
| \n Plan Details\n | \n {plans[frequency].map((plan) => (\n|
\n Add-Ons\n | \n |
| \n \n \n | \n |
| \n Monthly fee to add Admin/Staff\n \n user accounts within a pricing plan tier\n | \n {plans[frequency].map((plan) => (\n |
| \n Usage fee for months where\n \n the text limit is exceeded\n | \n \n $14.99 per additional block of 1,000 text segments\n | \n
| \n Usage fee for months where\n \n the email limit is exceeded\n | \n \n $7.99 per additional block of 15,000 emails\n | \n
| \n Usage fee for months where\n \n the voice minute limit is exceeded\n | \n \n $7.49 per additional block of 300 call minutes\n | \n
| \n Usage fee for voice recordings\n \n per minute (12 month retention period)\n | \n \n $7.49 per additional block of 600 call recording minutes\n | \n
\n { chargedCard && (\n
\n );\n }\n\n render() {\n const { hasError, loading, view } = this.state;\n\n let body;\n\n if (hasError) {\n return (\n \n { message || (\n \n Thanks! Your Brokerkit account is now active and ready for action.\n Back to Dashboard\n \n )}\n
\n )}\n\n { updatedCard && (\n \n \n Thanks! Your payment source has been updated.\n Back to Dashboard\n \n
\n )}\n\n \n
\n\n { !onboard && (\n \n
\n \n
\n \n
\n Subscription
\n\n {subscription.name}\n {' '}\n \n
\n Started on\n {' '}\n {Moment(subscription.started_at).format('LL')}\n .\n
\n \n\n
\n \n
\n \n
\n Card Details
\n\n
\n )}\n \n
\n \n
\n \n
\n Usage Stats
\n\n
\n \n
\n );\n }\n\n if (!loading) {\n switch (view) {\n case 'subscription':\n body = this.renderSubscription();\n break;\n case 'plans':\n body = this.renderPlans();\n break;\n case 'cardform':\n body = this.renderPurchaseForm();\n break;\n default:\n body = this.renderPlans();\n break;\n }\n }\n\n return (\n !loading && (\n \n
\n Oh no, looks like we had an issue.
\nPlease try again, or refresh the page. Our site admins have been notified and we'll have this fixed shortly.
\n\n {body}\n
\n )\n );\n }\n}\n\nexport default BillingApp;\n","import autoBind from 'react-autobind';\nimport qs from 'qs';\nimport { v4 as uuidv4 } from 'uuid';\nimport classNames from 'classnames';\nimport React, { Component } from 'react';\nimport Mousetrap from 'mousetrap';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\n\nlet leadStoreListener;\n\nclass Drawer extends Component {\n constructor(props) {\n super(props);\n autoBind(this);\n }\n\n componentDidMount() {\n const $drawer = $(this.modal);\n\n Mousetrap.bind(['left'], this.handlePrevAction);\n Mousetrap.bind(['right'], this.handleNextAction);\n Mousetrap.bind(['esc'], this.handleCloseAction);\n\n $drawer.on('shown.bs.modal', () => {\n if (Rails.isMobile) {\n // this is to fix mobile drawer background scroll by hiding it\n $('.content-container').hide();\n }\n });\n\n $drawer.modal({ keyboard: false, backdrop: 'static' });\n\n // listen to LeadDrawerStore changes\n leadStoreListener = LeadDrawerStore.addListener(this.onChange);\n }\n\n componentWillUnmount() {\n const $drawer = $(this.modal);\n\n Mousetrap.unbind(['left', 'right', 'esc']);\n\n $drawer.on('hidden.bs.modal', () => {\n if (Rails.isMobile) {\n // this is to fix mobile drawer background scroll by hiding it\n $('.content-container').show();\n }\n $(this).data('bs.modal', null);\n }).modal('hide');\n\n // remove listener to LeadDrawerStore changes on Unmount\n if (leadStoreListener) leadStoreListener.remove();\n }\n\n handlePrevAction() {\n const { handlePrevClick, reportItemIndex } = this.props;\n if (typeof handlePrevClick === 'function') { handlePrevClick(reportItemIndex); }\n }\n\n handleNextAction() {\n const { handleNextClick, reportItemIndex } = this.props;\n if (typeof handleNextClick === 'function') { handleNextClick(reportItemIndex); }\n }\n\n handleCloseAction(e) {\n const { helpers } = this.context;\n const params = GlobalContainer.urlParams();\n\n delete params.lead;\n delete params.tab;\n\n const searchQuery = qs.stringify(params, {\n arrayFormat: 'brackets',\n });\n\n e.preventDefault();\n helpers.closeDrawer();\n browserHistory.push(\n `${location.pathname}?${decodeURI(searchQuery)}`,\n {},\n );\n }\n\n // when LeadDrawerStore changes...\n onChange() {\n const { leadDrawerStoreAction } = LeadDrawerStore.getState();\n const { helpers } = this.context;\n\n if (leadDrawerStoreAction === 'reassignLeadDone') {\n setTimeout(() => {\n helpers.closeDrawer();\n }, 1);\n }\n }\n\n render() {\n const {\n id,\n size,\n pop,\n url,\n children,\n contentClass,\n showNextPrev,\n handlePrevClick,\n handleNextClick,\n scrollable,\n isDialerOpen,\n isLoading,\n } = this.props;\n\n const drawerClass = classNames(\n `drawer drawer-${size} modal show hide-scrollbar`,\n );\n const drawerContentClass = classNames(\n 'modal-content content',\n contentClass,\n scrollable && 'scrollable',\n );\n\n return (\n \n {!isDialerOpen ? (\n \n \n \n \n \n \n \n )}\n
\n\n \n
\n \n );\n }\n}\n\nDrawer.contextTypes = {\n helpers: PropTypes.shape({}),\n};\n\nDrawer.defaultProps = {\n id: uuidv4(),\n size: 'normal',\n pop: true,\n url: null,\n containerID: 'primary-modal',\n contentClass: 'modal-content content',\n children: [],\n item: null,\n reportItemIndex: null,\n showNextPrev: false,\n handlePrevClick: null,\n handleNextClick: null,\n isDialerOpen: false,\n isLoading: false,\n};\n\nDrawer.propTypes = {\n id: PropTypes.string,\n size: PropTypes.oneOf(['normal', 'wide']),\n pop: PropTypes.bool,\n url: PropTypes.string,\n containerID: PropTypes.string,\n contentClass: PropTypes.string,\n children: PropTypes.oneOfType([\n PropTypes.array,\n PropTypes.element,\n ]),\n item: PropTypes.shape({}),\n reportItemIndex: PropTypes.number,\n showNextPrev: PropTypes.bool,\n handlePrevClick: PropTypes.func,\n handleNextClick: PropTypes.func,\n isDialerOpen: PropTypes.bool,\n isLoading: PropTypes.bool,\n};\n\nexport default Drawer;\n","import React from 'react';\n\nimport NewLeadDrawer from '~/components/drawers/new_lead_drawer';\nimport NewReferralDrawer from '~/components/drawers/new_referral_drawer';\nimport TeamMemberDrawer from '~/components/drawers/team_member_drawer';\nimport LeadDrawer from '~/components/drawers/lead_drawer';\nimport EmailDomainDrawer from '~/components/drawers/email_domain_drawer';\n\nexport default class DrawerManager extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n open(kind, options) {\n let drawer;\n\n switch (kind) {\n case 'email-domain':\n drawer = \n \n \n
\n \n
\n );\n }\n}\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\nimport Collapse from 'react-bootstrap/Collapse';\nimport ClickableTooltip from '~/components/effects/clickable_tooltip';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nimport Drawer from '~/components/drawers/drawer';\nimport EmailDomainActions from '~/actions/email_domain_actions';\nimport EmailDomainStore from '~/stores/email_domain_store';\n\nconst TooltipText = 'If you already have an SPF record in the DNS records for this sending domain, please edit it vs. adding a duplicate one and just add “include:mailgun.org” after “v=spf1” with a space in between.';\nclass EmailDomainDrawer extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n domain: props.domain,\n errors: null,\n submitting: false,\n isOpen: false,\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.domainStoreListener = EmailDomainStore.addListener(\n this.onDomainStoreChange,\n );\n }\n\n componentWillUnmount() {\n if (this.domainStoreListener) {\n this.domainStoreListener.remove();\n }\n }\n\n handleCopy() {\n GlobalContainer.notify('Copied to Clipboard', 'info');\n }\n\n onDomainStoreChange() {\n const domainStoreState = EmailDomainStore.getState();\n const { domain, lastDomainStoreAction, errors } = domainStoreState;\n let nextState;\n\n if (lastDomainStoreAction === 'verifyEmailDomain') {\n nextState = {\n errors,\n submitting: true,\n };\n }\n\n if (lastDomainStoreAction === 'verifyEmailDomainDone') {\n nextState = {\n domain,\n errors,\n submitting: false,\n };\n }\n\n if (lastDomainStoreAction === 'verifyEmailDomainFail') {\n nextState = {\n errors,\n submitting: false,\n };\n }\n\n this.setState(nextState);\n }\n\n onCollapseClick(e) {\n e.preventDefault();\n\n const { isOpen } = this.state;\n\n this.setState({ isOpen: !isOpen });\n }\n\n onCancel(e) {\n e.preventDefault();\n\n const { helpers } = this.context;\n\n helpers.closeDrawer();\n }\n\n getProcessedDomainName(domainName) {\n if (domainName === '_dmarc') return domainName;\n\n const domainParts = domainName.split('.');\n\n if (domainParts.length === 2) return '@';\n\n return domainParts.slice(0, -2).join('.');\n }\n\n verifyDomain() {\n const { domain } = this.state;\n\n if (_lodash.isEmpty(domain)) return;\n\n EmailDomainActions.verifyDomain(domain);\n }\n\n renderStatus(status) {\n let className;\n let statusName;\n\n switch (status) {\n case 'valid':\n case true:\n className = 'badge badge-outline-green';\n statusName = 'Valid';\n break;\n case 'unknown':\n case 'unverified':\n case false:\n className = 'badge badge-outline-warning';\n statusName = 'Pending';\n break;\n default:\n className = 'badge badge-outline-gray';\n statusName = 'Pending';\n break;\n }\n\n return (\n {statusName.toUpperCase()}\n );\n }\n\n renderDomainNameWithCopy(record) {\n const { domain } = this.state;\n const domainName = this.getProcessedDomainName(record.name || domain.name);\n\n return (\n <>\n {domainName}\n {' '}\n {drawer}
\n \n \n \n \n \n \n
\n
\n );\n }\n\n render() {\n const { domain, submitting, isOpen } = this.state;\n const {\n sending_records,\n tracking_records,\n receiving_records,\n dmarc_record,\n } = domain;\n const dmarcRecords = [\n {\n record_type: 'TXT',\n name: '_dmarc',\n value:\n 'v=DMARC1; p=none; pct=100;',\n valid: !!dmarc_record,\n },\n ];\n\n return (\n \n );\n }\n}\n\nEmailDomainDrawer.contextTypes = {\n helpers: PropTypes.shape({}),\n};\n\nEmailDomainDrawer.defaultProps = {};\n\nEmailDomainDrawer.propTypes = {\n domain: PropTypes.shape({}).isRequired,\n};\n\nexport default EmailDomainDrawer;\n","import qs from 'qs';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport autoBind from 'react-autobind';\nimport { PropTypes } from 'prop-types';\nimport { Container } from 'flux/utils';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Tabs from 'react-bootstrap/Tabs';\nimport Tab from 'react-bootstrap/Tab';\n\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\n\nimport Drawer from '~/components/drawers/drawer';\nimport ResumeDrawer from '~/components/drawers/lead_drawer/ResumeDrawer';\nimport Dialer from '~/components/modals/dialer';\nimport LeadDrawerHeader from './lead_drawer/lead_drawer_header';\nimport LeadDrawerNotes from './lead_drawer/lead_drawer_notes';\nimport LeadDrawerLabels from './lead_drawer/lead_drawer_labels';\nimport LeadDrawerForms, {\n isFormNameValid,\n} from './lead_drawer/lead_drawer_forms';\nimport LeadDrawerTimeline from './lead_drawer/lead_drawer_timeline';\nimport LeadDrawerCampaignSubscriptions from './lead_drawer/lead_drawer_campaign_subscriptions';\nimport LeadDrawerMainDetails from './lead_drawer/details/lead_drawer_main_details';\nimport LeadDrawerRecruitingDetails from './lead_drawer/details/lead_drawer_recruiting_details';\nimport LeadDrawerRelitixDetails from './lead_drawer/details/lead_drawer_relitix_details';\nimport LeadDrawerAgentAlerts from './lead_drawer/details/LeadDrawerAgentAlerts/LeadDrawerAgentAlerts';\nimport LeadDrawerRetentionDetails from './lead_drawer/details/lead_drawer_retention_details';\nimport LeadDrawerPipelineDetails from './lead_drawer/details/lead_drawer_pipeline_details';\nimport LeadDrawerSocialLinks from './lead_drawer/details/lead_drawer_social_links';\nimport LeadDrawerTasks from './lead_drawer/details/lead_drawer_tasks';\nimport LeadDrawerDocuments from './lead_drawer/details/lead_drawer_documents';\n\n/**\n * Class LeadDrawer - and going to be exported as a state Container\n * @extends React.Component\n */\n\nclass LeadDrawer extends React.Component {\n static getStores() {\n return [LeadDrawerStore];\n }\n\n /**\n * Determine when to re-render LeadDrawer container\n * @param prevState\n * @returns {Object} Store current state\n */\n static calculateState(prevState) {\n return {\n leadDrawerState: LeadDrawerStore.getState(),\n };\n }\n\n isResumeTabEnabled = checkFeatureFlag(process.env.RESUME_TAB_FLAG || true);\n\n isDmsEnabled = checkFeatureFlag(process.env.ENABLE_DOCUMENT_MANAGEMENT_FLAG);\n\n constructor(props) {\n super(props);\n\n this.state = {\n dialer: {\n id: null,\n body: '',\n callSid: '',\n callStatus: '',\n },\n activeKey: 'timeline',\n isDialerOpen: false,\n };\n\n this.switchForm = this.switchForm.bind(this);\n this.loadLead = this.loadLead.bind(this);\n this.recordIndex = this.recordIndex.bind(this);\n this.handlePrevClick = this.handlePrevClick.bind(this);\n this.handleNextClick = this.handleNextClick.bind(this);\n this.onLeadDrawerStoreChange = this.onLeadDrawerStoreChange.bind(this);\n this.handleOpenDialer = this.handleOpenDialer.bind(this);\n this.setDialerField = this.setDialerField.bind(this);\n\n autoBind(this);\n }\n\n componentDidMount() {\n const { defaultAction } = this.props;\n this.loadLead(this.props);\n\n if (defaultAction) {\n // someone wanted to open to this action, honor the request and force it\n window.location.hash = `#${defaultAction}`;\n }\n\n if (window.location.hash) {\n // hash set from url, wasn't being passed from somewhere\n this.switchForm(window.location.hash.replace('#', ''));\n }\n\n // listen to LeadDrawerStore change events and store reference\n this.listener = LeadDrawerStore.addListener(\n this.onLeadDrawerStoreChange,\n );\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n this.loadLead(nextProps);\n }\n\n componentWillUnmount() {\n LeadDrawerActions.unloadLead();\n\n if (this.listener) this.listener.remove();\n }\n\n handlePrevClick() {\n const { leadDrawerState } = this.state;\n const { query, rowIdx } = this.props;\n const { recordIndex } = leadDrawerState;\n\n let index = recordIndex;\n if (typeof index === 'undefined') {\n index = this.recordIndex(query, rowIdx);\n }\n\n let prevRecordIndex = index - 1;\n if (prevRecordIndex < 0) prevRecordIndex = 0;\n\n LeadDrawerActions.loadLeadByIndex(query, prevRecordIndex);\n }\n\n handleNextClick() {\n const { leadDrawerState } = this.state;\n const { query, totalCount, rowIdx } = this.props;\n const { recordIndex } = leadDrawerState;\n\n let index = recordIndex;\n if (typeof index === 'undefined') {\n index = this.recordIndex(query, rowIdx);\n }\n\n let nextRecordIndex = index + 1;\n if (nextRecordIndex > totalCount - 1) {\n nextRecordIndex = totalCount - 1;\n }\n\n LeadDrawerActions.loadLeadByIndex(query, nextRecordIndex);\n }\n\n handleOpenDialer(phoneNumber) {\n const { currentForm, leadDrawerState } = this.state;\n const { lead } = leadDrawerState;\n\n this.setState({ isDialerOpen: true });\n\n ReactDOM.render(\n | \n Type\n | \n\n Host Name\n | \n {receiving && (\n\n Priority\n | \n )}\n\n Required Data\n | \n\n Status\n | \n
|---|---|---|---|---|
| {record.record_type} | \n\n {spfTooltip && index === records.length - 1 ? (\n | \n {record.priority && (\n \n Set to any large value not used already. Ex: 50\n {' '}\n | \n )}\n \n {spfTooltip && index === records.length - 1 ? (\n | \n {this.renderStatus(record.valid)} | \n
\n
\n\n \n
\n\n {this.isDmsEnabled && (\n \n
\n )}\n\n {GlobalContainer.product() === 'retention' ? (\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 renderFormSection() {\n const {\n currentForm, leadDrawerState, dialer, activeKey, email, smsMessage, schedule,\n } = this.state;\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 Lead Not Found\n
\n (this.containerEle = el)}>\n {drawerContent}\n
\n \n );\n }\n}\n\nLeadDrawer.defaultProps = {\n defaultAction: null,\n lead: null,\n loadLeadID: null, // if loadLeadID presents, load it\n table: null,\n query: null,\n totalCount: 0,\n rowIdx: null,\n reportItemIndex: null,\n recordsLength: null,\n handleReportPrevClick: () => false,\n handleReportNextClick: () => false,\n};\n\nLeadDrawer.propTypes = {\n defaultAction: PropTypes.string,\n lead: PropTypes.shape({}),\n loadLeadID: PropTypes.number,\n table: PropTypes.shape({}),\n query: PropTypes.shape({}),\n totalCount: PropTypes.number,\n rowIdx: PropTypes.number,\n reportItemIndex: PropTypes.number,\n recordsLength: PropTypes.number,\n handleReportPrevClick: PropTypes.func,\n handleReportNextClick: PropTypes.func,\n};\n\n/**\n * Export LeadDrawer as a Container\n * @type {Container}\n */\nexport default Container.create(LeadDrawer);\n","import React, { useRef, useState, useEffect } from 'react';\nimport { DirectUpload } from '@rails/activestorage';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Viewer, Worker, SpecialZoomLevel } from '@react-pdf-viewer/core';\nimport { toolbarPlugin } from '@react-pdf-viewer/toolbar';\nimport { printPlugin } from '@react-pdf-viewer/print';\nimport { getFilePlugin } from '@react-pdf-viewer/get-file';\nimport Pubnub from 'pubnub';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\nimport brokerbit from '~/lib/brokerbit';\nimport Tooltipable from '~/components/effects/tooltipable';\n\n// 25 MB in bits\nconst MAX_FILE_SIZE = 26214400;\n\n// 25 MB in megabytes\nconst MAX_FILE_SIZE_IN_MB = MAX_FILE_SIZE / (1024 * 1024);\n\nconst disableScrollPlugin = () => {\n const renderViewer = (props) => {\n const { slot } = props;\n\n if (slot.subSlot && slot.subSlot.attrs && slot.subSlot.attrs.style) {\n slot.subSlot.attrs.style = { ...slot.subSlot.attrs.style, scrollbarWidth: 'thin', scrollbarColor: 'white white' };\n }\n\n return slot;\n };\n\n return {\n renderViewer,\n };\n};\n\nconst disableScrollPluginInstance = disableScrollPlugin();\nconst workerUrl = 'https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js';\nconst uploadUrl = `${Rails.apiUrl}/rails/active_storage/direct_uploads`;\n\nconst pubnub = new Pubnub({\n publishKey: process.env.PUBNUB_PUBLISH_KEY,\n subscribeKey: process.env.PUBNUB_SUBSCRIBE_KEY,\n uuid: process.env.PUBNUB_DOCUMENTS_UUID,\n});\n\nconst ResumeDrawer = () => {\n const isAdminOrStaff = Rails.abilities.manageLead;\n const windowTitle = document.title;\n\n const setWindowTitleForPrint = () => {\n const { lead } = LeadDrawerStore.getState();\n document.title = `${lead.first_name} ${lead.last_name} - Resume`;\n };\n\n const resetWindowTitle = () => {\n document.title = windowTitle;\n };\n\n useEffect(() => {\n const onMessageReceived = (payload) => {\n setResumeUrl(payload.message.document_url);\n setResume({ ...resume, document_type: 'pdf_resume' });\n };\n\n const leadDrawerListener = LeadDrawerStore.addListener(onLeadDrawerStoreChange);\n pubnub.addListener({ message: onMessageReceived });\n\n window.addEventListener('beforeprint', setWindowTitleForPrint);\n\n window.addEventListener('afterprint', resetWindowTitle);\n\n return () => {\n leadDrawerListener.remove();\n pubnub.removeListener({ message: onMessageReceived });\n window.removeEventListener('beforeprint', setWindowTitleForPrint);\n window.removeEventListener('afterprint', resetWindowTitle);\n };\n }, []);\n\n const toolbarPluginInstance = toolbarPlugin();\n const { Toolbar } = toolbarPluginInstance;\n\n const printPluginInstance = printPlugin();\n const { print } = printPluginInstance;\n const getFilePluginInstance = getFilePlugin();\n const { Download } = getFilePluginInstance;\n\n const { lead } = LeadDrawerStore.getState();\n const [resumeUrl, setResumeUrl] = useState(lead.document?.url || null);\n const resumeId = lead.document?.id || null;\n\n const [resume, setResume] = useState({\n id: null,\n document_file: '',\n title: null,\n document_type: null,\n });\n\n useEffect(() => {\n setResumeUrl(lead.document?.url || null);\n }, [lead]);\n\n const hiddenFileInput = useRef(null);\n\n const handleFileSelect = (e) => {\n e.preventDefault();\n\n hiddenFileInput.current.value = '';\n hiddenFileInput.current.click();\n\n hiddenFileInput.current.onchange = (event) => {\n const file = event.target.files[0];\n uploadResume(file);\n };\n };\n\n const checkFileTypeAndSize = (file) => {\n const fileType = file.name.split('.').pop();\n const validFileTypes = ['pdf', 'doc', 'docx'];\n const isFileTypeValid = validFileTypes.includes(fileType);\n const isSizeWithinLimit = file.size <= MAX_FILE_SIZE;\n\n if (!file) return null;\n\n if (!isFileTypeValid) {\n GlobalContainer.notify(\n `Unsupported Format: Only ${validFileTypes.join(', ').toUpperCase()} files are accepted.`,\n 'error',\n );\n return null;\n }\n\n if (!isSizeWithinLimit) {\n GlobalContainer.notify(\n `File Size Limit Exceeded: Ensure your file is within ${MAX_FILE_SIZE_IN_MB} megabytes`,\n 'error',\n );\n return null;\n }\n\n return fileType;\n };\n\n const uploadResume = (file) => {\n const fileType = checkFileTypeAndSize(file);\n if (!fileType) return;\n\n const upload = new DirectUpload(file, uploadUrl, {\n directUploadWillCreateBlobWithXHR: (xhr) => {\n xhr.setRequestHeader('Authentication', `${Rails.helpers.authToken}`);\n },\n });\n\n upload.create((error, blob) => {\n if (!error) {\n const document = ({\n id: null,\n document_file: blob.signed_id,\n title: file.name,\n lead_id: lead.id,\n document_type: fileType === 'pdf' ? 'pdf_resume' : 'word_resume',\n });\n\n setResume(document);\n\n LeadDrawerActions.uploadResume({ document }, lead);\n }\n });\n };\n\n const onLeadDrawerStoreChange = () => {\n const storeState = LeadDrawerStore.getState();\n const { leadDrawerStoreAction } = storeState;\n\n const validActions = ['createResumeDone', 'updateResumeDone'];\n if (validActions.includes(leadDrawerStoreAction)) {\n const { lead: { document } } = storeState;\n\n const documentIsWordType = document.document_type === 'word_resume';\n\n if (documentIsWordType) {\n GlobalContainer.notify(\n 'Document conversion in progress. Please check back in a few seconds.',\n 'success',\n );\n pubnub.subscribe({\n channels: [`document_conversion-${resumeId}`],\n });\n }\n }\n\n if (leadDrawerStoreAction === 'deleteResumeDone') {\n setResume({\n id: null,\n document_file: '',\n title: null,\n document_type: null,\n });\n setResumeUrl(null);\n }\n };\n\n const handleDeleteResume = (e) => {\n e.preventDefault();\n\n if (lead.document?.url) {\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this?',\n callback: (ok) => {\n if (ok) {\n LeadDrawerActions.deleteResume(lead);\n }\n },\n });\n }\n };\n\n return (\n <>\n \n \n \n \n {(props) => {\n const {\n CurrentPageInput,\n GoToNextPage,\n GoToPreviousPage,\n Zoom,\n ZoomIn,\n ZoomOut,\n EnterFullScreen,\n } = props;\n return (\n \n \n
\n \n );\n};\n\nexport default ResumeDrawer;\n","import React, { useState, useRef, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Modal from 'react-bootstrap/Modal';\nimport isEmpty from 'lodash/isEmpty';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport TaskActions from '~/actions/task_actions';\nimport FollowUpPicker from '~/components/forms/lead_fields/follow_up_picker';\nimport AgentAlertTask from '../AgentAlertTask';\nimport Buttons from './Buttons';\nimport { formatValue, formatPrice, formatUSDate } from '~/helpers/formatHelper';\nimport GoogleMapLink from '~/components/shared/google_map_link';\nimport LeadHelpers from '~/helpers/lead_helpers';\nconst AgentAlertModal = ({\n lead, agentAlert, showModal, handleCloseModal,\n}) => {\n const { currentUser } = Rails.helpers;\n const [isOpen, setIsOpen] = useState(false);\n const [task, setTask] = useState({\n isOpen: false,\n name: 'Follow Up',\n category: 'follow_up',\n due_date_at: null,\n description: '',\n owner_id: currentUser.id,\n priority: 'normal',\n status: 'to_do',\n lead_ids: [lead.id],\n });\n const [isSaving, setIsSaving] = useState(false);\n const [errors, setErrors] = useState({});\n const pickerRef = useRef(null);\n\n const handleFieldChange = useCallback(\n (field) => (value) => {\n setTask((prevTask) => ({\n ...prevTask,\n [field]: value,\n }));\n },\n [setTask],\n );\n\n const onCollapseClick = (e) => {\n e.preventDefault();\n\n setIsOpen(!isOpen);\n };\n\n const validate = () => {\n const validationErrors = {};\n\n if (!task.due_date_at) {\n validationErrors.due_date_at = 'Must be set to a date';\n }\n\n if (!task.name) {\n validationErrors.name = \"Can't be empty\";\n }\n\n if (!task.category) {\n validationErrors.category = \"Can't be empty\";\n }\n\n if (!task.priority) {\n validationErrors.priority = \"Can't be empty\";\n }\n\n if (!task.status) {\n validationErrors.status = \"Can't be empty\";\n }\n\n if (isEmpty(task.lead_ids)) {\n validationErrors.lead_ids = \"Can't be empty\";\n }\n\n if (task.status === 'onboarding' && isEmpty(lead.email)) {\n validationErrors.status = 'Please add an email address before moving this lead to Signed.';\n }\n\n setErrors(validationErrors);\n\n return isEmpty(validationErrors);\n };\n\n const handleConfirm = (e) => {\n e.preventDefault();\n\n if (validate()) {\n setIsSaving(true);\n\n TaskActions.createTask(task, lead.id);\n\n handleCloseModal();\n setIsSaving(false);\n }\n };\n\n return (\n \n
\n );\n }}\n \n \n
\n \n \n
\n \n {(() => {\n if (resumeUrl && lead.document?.document_type === 'pdf_resume') {\n return (\n
\n \n
\n\n \n {lead.name}\n {' '}\n {formatUSDate(agentAlert.alert_date)}\n
\n\n \n\n
\n\n \n Alert Type:\n {' '}\n {formatValue(agentAlert.alert_type)}\n
\n\n Description:\n {' '}\n {formatValue(agentAlert.alert_description)}\n
\n\n
\n\n \n
\n\n \n Alert ID:\n {' '}\n {formatValue(agentAlert.alert_guid)}\n
\n\n Agent ID:\n {' '}\n {formatValue(agentAlert.agent_id)}\n
\n\n\n Role:\n {' '}\n {formatValue(agentAlert.role)}\n
\n\n\n Office Name:\n {' '}\n {formatValue(lead.currently_at)}\n
\n\n\n Office ID:\n {' '}\n {formatValue(agentAlert.office_guid)}\n
\n\n\n Address:\n {' '}\n \n {formatValue(agentAlert.unparsed_address)}\n \n { LeadHelpers.shouldShowGoogleMapLink(agentAlert) && (\n
\n City:\n {' '}\n {formatValue(agentAlert.postal_city)}\n
\n\n\n State:\n {' '}\n {formatValue(agentAlert.state)}\n
\n\n\n Postal Code:\n {' '}\n {formatValue(agentAlert.postal_code)}\n
\n\n
\n \n MLS ID:\n {' '}\n {formatValue(agentAlert.reso_ouid)}\n
\n\n\n MLS Name:\n {' '}\n {formatValue(agentAlert.mls?.name)}\n
\n\n\n Listing ID:\n {' '}\n {formatValue(agentAlert.mls_number)}\n
\n\n\n Property Type:\n {' '}\n {formatValue(agentAlert.property_type)}\n
\n\n\n Prop Sub Type:\n {' '}\n {formatValue(agentAlert.property_subtype)}\n
\n\n\n Price:\n {' '}\n {formatPrice(agentAlert.price)}\n
\n\n
\n \n
\n\n \n Cobroke ID:\n {' '}\n {formatValue(agentAlert.cobroke_agent_id)}\n
\n\n\n Cobroke Name:\n {' '}\n {formatValue(agentAlert.cobroke_agent_name)}\n
\n\n
\n \n Cobroke Office ID:\n {' '}\n {formatValue(agentAlert.cobroke_office_guid)}\n
\n\n\n Cobroke Office Name:\n {' '}\n {formatValue(agentAlert.cobroke_office_name)}\n
\n\n
\n \n
\n\n \n
\n \n
\n\n {!isOpen && (\n \n
\n \n handleFieldChange('due_date_at')(picker && picker.date)}\n />\n
\n \n \n
\n\n Select date for Follow Up
\n\n \n {isSaving ? 'Creating ...' : 'Confirm'}\n \n\n \n Close\n \n
\n);\n\nButtons.propTypes = {\n handleConfirm: PropTypes.func.isRequired,\n handleCloseModal: PropTypes.func.isRequired,\n isSaving: PropTypes.bool.isRequired,\n};\n\nexport default Buttons;\n","import React, { useState, useCallback, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Overlay from 'react-bootstrap/Overlay';\nimport Popover from 'react-bootstrap/Popover';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nconst AgentAlertPopover = ({ children, placement }) => {\n const [showPopover, setShowPopover] = useState(false);\n const popoverTarget = useRef(null);\n\n const togglePopover = useCallback((event) => {\n setShowPopover((prevShow) => !prevShow);\n popoverTarget.current = event.target;\n }, []);\n\n const handleClose = useCallback(() => {\n setShowPopover(false);\n }, []);\n\n return (\n <>\n {children({ togglePopover })}\n\n Upgrade your Subscription
\n\n\n Stay up to date on potential contacts with Agent Alerts\n
\n\n\n
\n \n
\n \n
\n\n \n \n handleFieldChange('name')(e.target.value)}\n />\n
\n\n \n \n handleFieldChange('category')(opt && opt.value)}\n />\n
\n \n \n\n handleFieldChange('description')(html)}\n placeholder=\"Enter Description\"\n id=\"agent-alert-task-description\"\n spellCheck={isOpen}\n />\n
\n\n \n
\n\n \n \n\n handleFieldChange('lead_ids')(ids)}\n isInvalid={!!errors.lead_ids}\n />\n
\n \n
\n\n {isOpen && (\n \n \n Owner\n \n\n handleFieldChange('owner_id')(opt && opt.value)}\n clearable\n />\n
\n\n \n \n handleFieldChange('priority')(opt && opt.value)}\n />\n
\n\n \n \n handleFieldChange('status')(opt && opt.value)}\n />\n
\n \n \n ' : 'Next'}\n />\n )}\n
\n \n\n {selectedAlert && (\n \n \n {({ togglePopover }) => (\n onCollapseClick(e, togglePopover)}\n >\n { isOpen ? (\n \n
\n\n Agent Alerts
\n\n\n {loading && (\n \n
\n ))}\n\n {!loading && !error && totalPages > 1 && (\n \n
\n )}\n\n {error && (\n {error}
\n )}\n\n {!loading && !error && alerts.length === 0 && (\n \n No Agent Alerts available.\n
\n )}\n\n {!loading && !error && alerts.map((alert, index) => (\n \n
\n\n {formatUSDate(alert.alert_date)}
\n \n Alert Type:\n {' '}\n {alert.alert_type || 'N/A'}\n
\n \n Role:\n {' '}\n {alert.role || 'N/A'}\n
\n \n Address:\n {' '}\n {alert.unparsed_address ? <>\n \n {alert.unparsed_address}\n \n { LeadHelpers.shouldShowGoogleMapLink(alert) && (\n \n
\n \n handleViewClick(alert)}\n >\n View\n \n
\n \n
\n );\n }\n\n renderProgress() {\n const { subscription } = this.state;\n const { campaign } = subscription;\n const percentage = Math.round((subscription.sent_count / campaign.campaign_steps_count) * 100);\n\n if (_lodash.isEmpty(subscription.start_date)) {\n return (\n \n \n
\n );\n }\n\n renderNextStepScheduledDate() {\n const { subscription } = this.state;\n\n const nextScheduledMoment = Moment(subscription.next_step_scheduled_at);\n const nextScheduledDate = nextScheduledMoment.format('l, h:mm A');\n const timeLeft = nextScheduledMoment.isValid() ? nextScheduledMoment.fromNow() : 0;\n\n return (\n \n
\n\n {subscription.sent_count}\n {' '}\n of\n {' '}\n {campaign.campaign_steps_count}\n {' '}\n generated\n \n \n Next Step Scheduled:\n {' '}\n {nextScheduledDate}\n {' '}\n (\n {timeLeft}\n )\n \n
\n );\n }\n\n renderDuration() {\n const { subscription, subscriptionErrors } = this.state;\n\n if (_lodash.isEmpty(subscription.start_date)) {\n return (\n \n
\n );\n }\n\n if (subscription.status === 'running') {\n const startDate = Moment(subscription.start_date).format('l');\n const endDate = Moment(subscription.end_date).format('l');\n\n return (\n <>\n \n \n Start Date:\n {' '}\n {startDate}\n \n\n \n End Date:\n {' '}\n {endDate}\n\n {subscription.show_icon && (\n <>\n
\n\n {subscription.campaign.new_engine && (\n this.renderNextStepScheduledDate()\n )}\n \n );\n }\n\n return (\n \n \n
\n );\n }\n}\n\nLeadDrawerCampaignSubscription.defaultProps = {};\n\nLeadDrawerCampaignSubscription.propTypes = {\n lead: PropTypes.shape({}).isRequired,\n subscription: PropTypes.shape({}).isRequired,\n};\n\nexport default LeadDrawerCampaignSubscription;\n","import React, {\n useState, useEffect, useRef, useCallback,\n} from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Collapse } from 'reactstrap';\nimport ReactPaginate from 'react-paginate';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport ReactDOM from 'react-dom';\n\nimport { Link } from 'react-router-dom';\nimport classNames from 'classnames';\nimport brokerbit from '~/lib/brokerbit';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport DocumentActions from '~/actions/document_actions';\nimport DocumentStore from '~/stores/document_store';\nimport EditDocumentModal from '~/components/modals/edit_document_modal';\nimport DocumentUploader from '~/components/navigation/document_uploader';\nimport DocumentLimitAlertChecker from '~/components/shared/document_limit_alert_checker';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\n\nconst LeadDrawerDocuments = ({ leadId }) => {\n const [state, setState] = useState({\n leadID: leadId,\n isOpen: false,\n documents: [],\n pagination: { total_pages: 1, current_page: 1 },\n loading: false,\n lastDocumentStoreAction: null,\n });\n const [showLimitAlert, setShowLimitAlert] = useState(false);\n\n const [isEditModalOpen, setIsEditModalOpen] = useState(false);\n const [selectedDocument, setSelectedDocument] = useState(null);\n\n const context = GlobalContainer.product() === 'recruiting' ? 'recruiter' : GlobalContainer.product();\n\n const {\n documents = [],\n pagination = { total_pages: 1, current_page: 1 },\n isOpen,\n loading,\n } = state;\n\n const { current_page, total_pages } = pagination;\n\n const { currentUser } = Rails.helpers;\n\n const isAdminOrStaff = currentUser.role.name === 'admin' || currentUser.role.name === 'staff';\n\n const uploaderRef = useRef(null);\n const abortControllerRef = useRef(null);\n const { leadID } = state;\n\n const loadDocuments = useCallback((page = 1) => {\n if (abortControllerRef.current) {\n abortControllerRef.current.abort();\n }\n\n abortControllerRef.current = new AbortController();\n\n setTimeout(() => {\n DocumentActions.loadDocumentsWithRelatedContact(leadID, page);\n }, 0);\n }, [leadID]);\n\n const onChange = useCallback(() => {\n const newState = DocumentStore.getState();\n const { lastDocumentStoreAction, pagination } = newState;\n let { current_page } = pagination;\n\n if (lastDocumentStoreAction === 'createDocumentDone'\n || lastDocumentStoreAction === 'updateDocumentDone'\n || lastDocumentStoreAction === 'deleteDocumentDone') {\n current_page = lastDocumentStoreAction === 'createDocumentDone' ? 1 : current_page || 1;\n loadDocuments(current_page);\n }\n\n setState((prevState) => ({\n ...prevState,\n ...newState,\n }));\n }, [loadDocuments]);\n\n const onLeadDrawerChange = useCallback(() => {\n const storeState = LeadDrawerStore.getState();\n const { leadDrawerStoreAction } = storeState;\n\n const validActions = ['createResumeDone', 'updateResumeDone', 'deleteResumeDone'];\n if (validActions.includes(leadDrawerStoreAction)) {\n loadDocuments();\n }\n }, [loadDocuments]);\n\n useEffect(() => {\n const storeListener = DocumentStore.addListener(onChange);\n const leadDrawerListener = LeadDrawerStore.addListener(onLeadDrawerChange);\n loadDocuments();\n\n return () => {\n storeListener.remove();\n leadDrawerListener.remove();\n if (abortControllerRef.current) {\n abortControllerRef.current.abort();\n }\n };\n }, [onChange, loadDocuments, onLeadDrawerChange]);\n\n const onPageChange = (data) => {\n const newPage = data.selected + 1;\n loadDocuments(newPage);\n };\n\n const handleChangeInternalClick = (document) => {\n const { internal } = document;\n\n DocumentActions.updateDocument({\n ...document,\n internal: !internal,\n }, leadID);\n };\n\n const handleDocumentDelete = (e, document) => {\n e.preventDefault();\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this document?',\n callback: (ok) => {\n if (ok) {\n DocumentActions.deleteDocument(document, leadID);\n }\n },\n });\n };\n\n const handleEditDocumentClick = (e, document) => {\n e.preventDefault();\n setSelectedDocument(document);\n setIsEditModalOpen(true);\n };\n\n const handleCloseModal = useCallback(() => {\n setIsEditModalOpen(false);\n setSelectedDocument(null);\n }, []);\n\n const handleDownloadDocument = async (e, document) => {\n e.preventDefault();\n try {\n const downloadUrl = `${Rails.apiUrl}/api/v1/documents/${document.id}/download?auth=${Rails.helpers.authToken}`;\n\n const link = window.document.createElement('a');\n link.href = downloadUrl;\n window.document.body.appendChild(link);\n link.click();\n window.document.body.removeChild(link);\n } catch (error) {\n console.error('Error downloading the file', error);\n }\n };\n\n const onCollapseClick = (e) => {\n e.preventDefault();\n\n if (!isOpen) {\n loadDocuments();\n }\n setState((prevState) => ({\n ...prevState,\n isOpen: !prevState.isOpen,\n }));\n };\n\n const handleFileSelect = (e) => {\n e.preventDefault();\n if (uploaderRef.current) {\n uploaderRef.current.handleFileSelect();\n }\n };\n\n const onUploadComplete = () => {\n loadDocuments();\n };\n\n const onLoadingStateChange = (isLoading) => {\n setState((prevState) => ({\n ...prevState,\n loading: isLoading,\n }));\n };\n\n const renderDocument = useCallback((document) => {\n const buttonContainerStyle = {\n display: 'flex',\n gap: '8px',\n justifyContent: 'flex-end',\n };\n\n const documentUrl = `/documents/${document.id}`;\n\n let uploadedAtDate = null;\n let isValidDate = false;\n\n if (document.uploaded_at) {\n uploadedAtDate = new Date(document.uploaded_at);\n isValidDate = !Number.isNaN(uploadedAtDate.getTime());\n }\n\n return (\n {campaign.name}
\n\n\n
\n \n
\n\n {unverifiedNumbersWarning && (\n \n {this.renderCount()}\n {this.renderProgress()}\n\n {subscription.show_icon && (\n
\n \n
\n \n {this.renderDuration()}\n
\n\n \n \n {\n _lodash.isEmpty(subscription.start_date) && (\n \n Schedule\n \n )\n }\n\n {subscription.start_date && this.renderStatusControls()}\n\n \n \n \n \n
\n \n Your campaign includes a text step, but the sender's\n phone number is not linked to an approved verified texting use case.\n To assign this campaign, please select a phone number in the\n text step(s) which are linked to an approved verified texting use case.\n
\n )}\n \n
\n \n \n {document.title}\n
\n \n {uploadedAtDate.toLocaleDateString()}\n
\n )}\n \n \n handleDownloadDocument(e, document)}\n >\n \n\n {isAdminOrStaff && (\n <>\n \n handleEditDocumentClick(e, document)}\n >\n \n \n handleChangeInternalClick(document)}\n >\n \n \n handleDocumentDelete(e, document)}\n >\n \n \n )}\n
\n \n \n {documents.length === 0 && \n\n {isEditModalOpen\n && ReactDOM.createPortal(\n
\n );\n};\n\nLeadDrawerDocuments.defaultProps = {\n leadID: null,\n};\n\nLeadDrawerDocuments.propTypes = {\n leadID: PropTypes.number.isRequired,\n};\n\nexport default LeadDrawerDocuments;\n","import React, { useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport APIRequest from '~/lib/api_request';\nimport brokerbit from '~/lib/brokerbit';\n\nconst LeadDrawerLabel = ({ leadID, label, onLabelRemoved }) => {\n const [isDeleting, setIsDeleting] = useState(false);\n\n const handleLabelDelete = useCallback(async (e) => {\n e.preventDefault();\n\n brokerbit.confirmBox({\n message: `Are you sure to remove the \"${label.name}\" label?`,\n callback: async (ok) => {\n if (!ok) return;\n\n setIsDeleting(true);\n\n try {\n const request = APIRequest.delete({\n resource: `/v1/leads/${leadID}/labels/${label.id}`,\n });\n\n await new Promise((resolve, reject) => {\n request.end((error, response) => {\n if (error) reject(error);\n else resolve(response);\n });\n });\n\n onLabelRemoved?.(label);\n } catch (error) {\n console.error('Error removing label:', error);\n setIsDeleting(false);\n }\n },\n });\n }, [leadID, label, onLabelRemoved]);\n\n return (\n \n \n {isOpen ? (\n \n \n \n {loading ? (\n \n \n ) : null}\n
\n\n Documents
\n {loading &&Uploading document...
}\nNo Documents
}\n\n \n {documents.map(renderDocument)}\n
\n
\n \n {total_pages > 1 && (\n
\n \n \n
\n )}\n \n \n View all documents\n \n
\n \n \n \n {isDeleting ? (\n \n
\n );\n};\n\nLeadDrawerLabel.propTypes = {\n leadID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n label: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired,\n onLabelRemoved: PropTypes.func,\n};\n\nLeadDrawerLabel.defaultProps = {\n onLabelRemoved: () => {},\n};\n\nexport default LeadDrawerLabel;\n","import classNames from 'classnames';\nimport autoBind from 'react-autobind';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Input, Collapse } from 'reactstrap';\nimport Geosuggest from 'react-geosuggest';\nimport isEmail from 'validator/lib/isEmail';\nimport isMobilePhone from 'validator/lib/isMobilePhone';\nimport PhoneInput from 'react-phone-input-2';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport DuplicateContactCard from '~/components/duplicate_contact_card';\nimport ErrorMessageWithIcon from '~/components/forms/ErrorMessageWithIcon';\nimport Select from '~/components/forms/select';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\nimport MultipleListingServicesSelect from '~/components/forms/multiple_listing_services_select';\nimport AllowOrgDuplicateCheckBox from '~/components/forms/allow_org_duplicate_checkbox';\nimport GlobalContainer from '~/components/global_container';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport GoogleSearchLink from '~/components/shared/google_search_link';\n\nlet leadStoreListener;\nlet approvedForm = false;\n\nconst { currentTeam } = Rails.helpers;\nconst teamID = currentTeam ? currentTeam.id : null;\nconst defaultEmailTypeOptions = [\n { value: 'office', label: 'Office' },\n { value: 'personal', label: 'Personal' },\n { value: 'other', label: 'Other' },\n];\nconst OPT_IN_TOOLTIP = \"This contact has opted in to receive communications by submitting their information through a website's sign-up form or landing page.\";\n\nclass LeadDrawerMainDetails extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n const isOpen = localStorage.isDetailsOpen ? JSON.parse(localStorage.isDetailsOpen) : true;\n\n this.emptyEmail = {\n id: null,\n email: '',\n email_type: 'office',\n main: false,\n team_id: teamID,\n _destroy: false,\n };\n\n this.emptyAgentID = {\n id: null,\n agent_id: '',\n multiple_listing_service_ouid: '',\n _destroy: false,\n };\n\n this.state = {\n opened: this.props.opened,\n fields: _lodash.pick(props.lead, 'first_name', 'last_name', 'email', 'phone', 'birthday',\n 'alt_address', 'alt_city', 'alt_zip', 'alt_lat', 'alt_lng', 'other_phone',\n 'license_number', 'license_exp_date', 'lead_emails_attributes', 'lead_agent_ids_attributes', 'allow_duplicates_in_org', 'opt_in'),\n duplicates_found_in_org: false,\n duplicate_org_accounts: [],\n errors: {},\n warnings: {},\n isOpen,\n };\n }\n\n componentDidMount() {\n const { fields } = this.state;\n\n // listen to LeadDrawerStore changes\n leadStoreListener = LeadDrawerStore.addListener(this.onChange);\n\n if (_lodash.size(fields.lead_emails_attributes) === 0) {\n this.setState({\n fields: {\n ...fields,\n lead_emails_attributes: [{\n id: null,\n email: '',\n email_type: 'office',\n main: true,\n team_id: teamID,\n _destroy: false,\n }],\n },\n });\n }\n\n if (_lodash.size(fields.lead_agent_ids_attributes) === 0) {\n this.setState({\n fields: {\n ...fields,\n lead_agent_ids_attributes: [{\n id: null,\n agent_id: '',\n multiple_listing_service_ouid: '',\n _destroy: false,\n }],\n },\n });\n }\n }\n\n componentWillUnmount() {\n // remove listener to LeadDrawerStore changes on Unmount\n if (leadStoreListener) leadStoreListener.remove();\n }\n\n handleAddressChange(address) {\n const { fields } = this.state;\n\n this.setState({\n fields: {\n ...fields,\n alt_address: address,\n },\n });\n }\n\n handleAddressSuggestion(suggest) {\n const { fields } = this.state;\n if (!suggest) return;\n\n const addressComponents = suggest.gmaps.address_components;\n const readableAddress = LeadHelpers.parseAddressComponents(addressComponents);\n\n this.setState({\n fields: {\n ...fields,\n alt_address: suggest.label,\n alt_city: readableAddress.locality,\n alt_zip: readableAddress.postal_code,\n alt_lat: suggest.location.lat,\n alt_lng: suggest.location.lng,\n },\n });\n }\n\n handleEmailChange(e, leadEmail) {\n e.preventDefault();\n\n leadEmail.email = e.target.value;\n\n this.setState({ lead: this.state.lead });\n }\n\n handleEmailTypeChange(opt, leadEmail) {\n leadEmail.email_type = opt ? opt.value : '';\n\n this.setState({ lead: this.state.lead });\n }\n\n handleMainChange(e, leadEmail) {\n leadEmail.main = e.target.checked;\n\n this.setState({ lead: this.state.lead });\n }\n\n handleLeadEmailDelete(e, leadEmail) {\n e.preventDefault();\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this email?',\n callback: (ok) => {\n if (ok) {\n leadEmail._destroy = true;\n this.setState({ fields: this.state.fields });\n }\n },\n });\n }\n\n handleAgentIdChange(e, leadAgentId) {\n e.preventDefault();\n\n leadAgentId.agent_id = e.target.value;\n\n this.setState({ lead: this.state.lead });\n }\n\n handleMultipleListingServiceChange(value, leadAgentId) {\n leadAgentId.multiple_listing_service_ouid = value;\n\n this.setState({ lead: this.state.lead });\n }\n\n handleLeadAgentIdDelete(e, leadAgentId) {\n e.preventDefault();\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this Agent ID?',\n callback: (ok) => {\n if (ok) {\n leadAgentId._destroy = true;\n this.setState({ fields: this.state.fields });\n }\n },\n });\n }\n\n // when LeadDrawerStore changes...\n onChange() {\n let duplicates_found_in_org = false;\n\n const leadDrawerState = LeadDrawerStore.getState();\n const {\n leadDrawerStoreAction, errors, lead, warnings,\n } = leadDrawerState;\n const { duplicate_org_accounts } = this.state;\n\n const emailErrors = {};\n const agentIDErrors = {};\n\n if (leadDrawerStoreAction === 'updateLeadDone') {\n this.setState({\n opened: false,\n errors: {},\n warnings: {},\n fields: _lodash.pick(lead, 'first_name', 'last_name', 'email', 'phone', 'birthday',\n 'alt_address', 'alt_city', 'alt_zip', 'alt_lat', 'alt_lng', 'lead_agent_ids_attributes',\n 'license_number', 'license_exp_date', 'other_phone', 'lead_emails_attributes', 'opt_in'),\n });\n }\n\n if (leadDrawerStoreAction === 'updateLeadFail') {\n if (errors.duplicate_emails) {\n errors.duplicate_emails.forEach((e, i) => {\n if (e) {\n if (e.context === 'org') {\n duplicate_org_accounts.push(`${e.match.name}: Email: ${e.value}`);\n duplicates_found_in_org = true;\n }\n\n emailErrors[i] = {\n duplicate: 'it looks like a contact with this email already exists.',\n context: e.context,\n match: e.match,\n };\n }\n });\n }\n\n if (errors.duplicate_agent_ids) {\n errors.duplicate_agent_ids.forEach((e, i) => {\n if (e) {\n if (e.context === 'org') {\n duplicate_org_accounts.push(`${e.match.name}: Agent ID/MLS: ${e.value}`);\n duplicates_found_in_org = true;\n }\n\n agentIDErrors[i] = {\n duplicate: 'It looks like this agent id already exists.',\n context: e.context,\n match: e.match,\n };\n }\n });\n }\n\n this.setState({\n errors: emailErrors,\n warnings: agentIDErrors,\n submitting: false,\n duplicates_found_in_org,\n });\n }\n }\n\n onEditClick(e) {\n e.preventDefault();\n\n this.setState({\n opened: true,\n });\n }\n\n onCollapseClick(e) {\n e.preventDefault();\n\n const { isOpen } = this.state;\n\n this.setState({ isOpen: !isOpen });\n localStorage.isDetailsOpen = !isOpen;\n }\n\n onEditCloseClick(e) {\n e.preventDefault();\n\n approvedForm = false;\n\n this.setState({\n opened: false,\n warnings: {},\n });\n }\n\n onFormSubmit(e) {\n e.preventDefault();\n\n const { fields } = this.state;\n const { lead_agent_ids_attributes, lead_emails_attributes } = fields;\n const { lead, query } = this.props;\n const leadEmailAttributes = lead_emails_attributes.filter((x, i) => !x._destroy);\n const leadAgentIdAttributes = lead_agent_ids_attributes.filter((x, i) => !x._destroy);\n\n const errors = this.validate();\n\n this.setState({ duplicate_org_accounts: [], duplicates_found_in_org: false });\n\n if (_lodash.size(errors) === 0 && !approvedForm) {\n leadEmailAttributes.forEach((leadEmail) => {\n if (!leadEmail.email) {\n leadEmail._destroy = true;\n }\n });\n\n leadAgentIdAttributes.forEach((leadAgentId) => {\n if (!leadAgentId.agent_id) {\n leadAgentId.multiple_listing_service_ouid = '';\n }\n\n if (!leadAgentId.agent_id && !leadAgentId.multiple_listing_service_ouid) {\n leadAgentId._destroy = true;\n }\n });\n\n LeadDrawerActions.updateLead({ ...fields, id: lead.id }, query);\n } else {\n this.setState({ errors });\n }\n }\n\n setFormField(name, val) {\n const { fields } = this.state;\n this.setState({\n fields: {\n ...fields, [name]: val,\n },\n });\n }\n\n _handleCellPhoneChange = (phone_number) => {\n this.setFormField('phone', phone_number);\n };\n\n _handleOtherPhoneChange = (phone_number) => {\n this.setFormField('other_phone', phone_number);\n };\n\n validate() {\n let all_emails_blank = true;\n let all_agent_ids_blank = true;\n\n const { fields } = this.state;\n const {\n first_name, last_name, phone, other_phone, lead_emails_attributes, lead_agent_ids_attributes,\n } = fields;\n\n const errors = {};\n const warnings = {};\n\n const leadEmailAttributes = lead_emails_attributes.filter((x, i) => !x._destroy);\n const leadAgentIdAttributes = lead_agent_ids_attributes.filter((x, i) => !x._destroy);\n const checkedCount = leadEmailAttributes.filter((x, i) => x.main).length;\n\n if (!first_name) {\n errors.first_name = 'This field can not be empty';\n }\n\n if (!last_name) {\n errors.last_name = 'This field can not be empty';\n }\n\n if (!_lodash.isEmpty(phone) && !isMobilePhone(phone, ['en-US'])) {\n errors.phone = 'Is invalid';\n }\n\n if (!_lodash.isEmpty(other_phone) && !isMobilePhone(other_phone, ['en-US'])) {\n errors.other_phone = 'Is invalid';\n }\n\n if (leadEmailAttributes.length > 0 && checkedCount < 1) {\n errors.emails = ['Please select any main email'];\n }\n\n leadEmailAttributes.forEach((leadEmail, index) => {\n if (leadEmail.email) {\n all_emails_blank = false;\n\n if (!isEmail(leadEmail.email)) {\n errors[index] = { email: 'The provided email is invalid' };\n }\n }\n\n if (!leadEmail.email_type) {\n errors[index] = { email_type: \"Can't be empty\" };\n }\n });\n\n if (GlobalContainer.product() === 'retention') {\n if (leadEmailAttributes.length === 0 || all_emails_blank) {\n errors.no_email = ['Please add an email address to create this record so that there is a way to match and update the data later and this email will function as their username'];\n }\n }\n\n leadAgentIdAttributes.forEach((leadAgentId, index) => {\n if (leadAgentId.agent_id) {\n all_agent_ids_blank = false;\n }\n\n if (!!leadAgentId.agent_id && !leadAgentId.multiple_listing_service_ouid) {\n warnings[index] = { multiple_listing_service_ouid: 'It is recommended that you select the MLS for this agent ID.' };\n }\n });\n\n if (GlobalContainer.product() === 'recruiting') {\n if ((leadEmailAttributes.length === 0 && leadAgentIdAttributes.length === 0) || (all_emails_blank && all_agent_ids_blank)) {\n errors.no_email_agent_id = ['Please add either an email address or agent ID to be able to create this record so that there is a way to match and update the data later.'];\n }\n }\n\n if (_lodash.size(errors) === 0 && _lodash.size(warnings) !== 0) {\n approvedForm = !approvedForm;\n } else {\n approvedForm = false;\n }\n\n this.setState({ warnings });\n\n return errors;\n }\n\n addLeadEmail() {\n const { fields } = this.state;\n\n fields.lead_emails_attributes.push({ ...this.emptyEmail });\n\n this.setState({ fields });\n }\n\n isLeadEmailValid(index) {\n const { errors } = this.state;\n\n if (errors[index] || errors.no_email_agent_id || errors.no_email) {\n return errors.no_email_agent_id || errors.no_email || errors[index].email || errors[index].duplicate;\n }\n\n return '';\n }\n\n isLeadAgentIDValid(index) {\n const { errors, warnings } = this.state;\n\n if (warnings[index] || errors.no_email_agent_id) {\n return errors.no_email_agent_id || warnings[index].duplicate;\n }\n\n return '';\n }\n\n addLeadAgentId() {\n const { fields } = this.state;\n\n fields.lead_agent_ids_attributes.push({ ...this.emptyAgentID });\n\n this.setState({ fields });\n }\n\n renderLeadEmail() {\n const { errors, fields } = this.state;\n const { lead_emails_attributes } = fields;\n\n const leadEmailAttributes = lead_emails_attributes.filter((x, i) => !x._destroy);\n const checkedCount = leadEmailAttributes.filter((x, i) => x.main).length;\n const disableMainCheckbox = checkedCount >= 1;\n\n return leadEmailAttributes.map((leadEmail, index) => {\n const emailDOM = (\n \n
\n );\n return emailDOM;\n });\n }\n\n renderLeadAgentId() {\n const { errors, warnings, fields } = this.state;\n const { lead_agent_ids_attributes } = fields;\n const leadAgentIdAttributes = lead_agent_ids_attributes.filter((x, i) => !x._destroy);\n\n return leadAgentIdAttributes.map((leadAgentId, index) => {\n const agentIdDOM = (\n \n this.handleEmailChange(e, leadEmail)}\n />\n
\n\n \n this.handleEmailTypeChange(opt, leadEmail)}\n placeholder=\"--- Select ---\"\n className={classNames({ 'has-error': errors[index] ? errors[index].email_type : '' })}\n />\n
\n\n \n
\n\n \n this.handleMainChange(e, leadEmail)}\n checked={leadEmail.main || false}\n disabled={!leadEmail.main && disableMainCheckbox}\n />\n \n Main\n \n
\n \n \n
\n {errors[index] && errors[index].duplicate && (\n \n
\n )}\n\n { errors[index] && errors[index].email && (\n \n
\n )}\n \n
\n );\n\n return agentIdDOM;\n });\n }\n\n renderContent() {\n const { isOpen } = this.state;\n const { lead } = this.props;\n\n return (\n \n this.handleAgentIdChange(e, leadAgentId)}\n />\n
\n\n \n this.handleMultipleListingServiceChange(val, leadAgentId)}\n teamMlses\n primaryMls\n clearable\n target={`mls-select-${index}`}\n />\n
\n\n \n \n
\n\n {warnings[index] && warnings[index].multiple_listing_service_ouid && (\n \n
\n )}\n\n { warnings[index] && warnings[index].duplicate && (\n \n
\n )}\n \n \n \n \n
\n \n
\n );\n }\n\n renderForm() {\n const { lead } = this.props;\n const {\n fields, errors, duplicates_found_in_org, duplicate_org_accounts,\n } = this.state;\n const saveButton = approvedForm ? 'Approve & Save' : 'Save';\n\n return (\n \n \n { Rails.abilities.manageLead && (\n \n )}\n
\n\n Personal Details
\n\n| Full Name: | \n\n {LeadHelpers.renderLeadName(lead)}\n | \n
|---|---|
| \n {_lodash.titleize(leadEmail.email_type)}\n {' '}\n Email:\n {' '}\n {mainEmail}\n | \n{leadEmail.email} | \n
| Cell Phone: | \n\n {LeadHelpers.renderPhoneNumber(lead.phone)}\n | \n
| Other Phone: | \n\n {LeadHelpers.renderPhoneNumber(lead.other_phone)}\n | \n
| Agent ID: | \n\n {leadAgentId.agent_id}\n {leadAgentId.mls_name && ` - ${leadAgentId.mls_name}`}\n | \n
| License Number: | \n{lead.license_number} | \n
| License Expiration Date: | \n{lead.license_exp_date && Moment(lead.license_exp_date).format('LL')} | \n
| Birthday: | \n{lead.birthday && Moment(lead.birthday).format('MMMM D')} | \n
| Home Address: | \n\n { lead.alt_address && (\n \n {lead.alt_address}\n \n \n )}\n | \n
| Opted In: | \n\n \n \n | \n
\n
\n );\n }\n\n render() {\n const { opened } = this.state;\n\n if (opened) {\n return this.renderForm();\n }\n\n return this.renderContent();\n }\n}\n\nLeadDrawerMainDetails.defaultProps = {\n lead: null,\n query: null,\n opened: false,\n};\n\nLeadDrawerMainDetails.propTypes = {\n lead: PropTypes.shape({}),\n query: PropTypes.shape({}),\n opened: PropTypes.bool,\n};\n\nexport default LeadDrawerMainDetails;\n","export const RATING_OPTIONS = [\n { value: '10', label: '10 - Joining this month' },\n { value: '9', label: '9 - Joining next month' },\n { value: '8', label: '8 - Joining in 2 months' },\n { value: '7', label: '7 - Joining in 3 months' },\n { value: '6', label: '6 - Good meeting' },\n { value: '5', label: '5 - Meeting could have gone better' },\n { value: '4', label: '4 - No meeting' },\n];\n","export const YES_NO_OPTIONS = [\n { value: true, label: 'Yes' },\n { value: false, label: 'No' },\n];\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport update from 'immutability-helper';\nimport Collapse from 'react-bootstrap/Collapse';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport Select from '~/components/forms/dropdowns/SelectWrapper/Select';\n\n// Constants\nimport { generateDateOptions } from '~/constants/dropdowns/MonthOptions';\nimport { RATING_OPTIONS } from '~/constants/dropdowns/ratingOptions';\nimport { YES_NO_OPTIONS } from '~/constants/dropdowns/yesNoOptions';\n\nclass LeadDrawerPipelineDetails extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n\n const isOpen = localStorage.isPipelineOpen ? JSON.parse(localStorage.isPipelineOpen) : false;\n const { opened } = props;\n\n this.state = {\n opened,\n fields: _lodash.pick(props.lead, 'rating', 'joined_at', 'active_listings_count', 'kpa_taken'),\n kpaTakenLabel: Rails.helpers.currentConfiguration.kpaTakenLabel,\n isOpen,\n };\n }\n\n onEditClick(e) {\n e.preventDefault();\n\n this.setState({\n opened: true,\n });\n }\n\n onCollapseClick(e) {\n e.preventDefault();\n\n const { isOpen } = this.state;\n\n this.setState({ isOpen: !isOpen });\n localStorage.isPipelineOpen = !isOpen;\n }\n\n onEditCloseClick(e) {\n e.preventDefault();\n\n this.setState({\n opened: false,\n });\n }\n\n onFormSubmit(e) {\n e.preventDefault();\n\n const { fields } = this.state;\n const { lead, query } = this.props;\n\n LeadDrawerActions.updateLead(update(fields, { id: { $set: lead.id } }), query);\n\n this.setState({\n opened: false,\n });\n }\n\n setFormField(name, val) {\n this.setState((prevState) => ({\n fields: {\n ...prevState.fields,\n [name]: val,\n },\n }));\n }\n\n renderContent() {\n const { lead } = this.props;\n const { kpaTakenLabel, isOpen } = this.state;\n\n return (\n \n \n
\n\n \n \n \n \n
\n );\n }\n\n renderForm() {\n const { fields, kpaTakenLabel } = this.state;\n\n return (\n \n \n { Rails.abilities.manageLead && (\n \n )}\n
\n\n Pipeline
\n\n\n \n \n
\n
\n | Rating | \n{lead.rating} | \n
|---|---|
| Month Joining | \n{lead.joined_at && Moment(lead.joined_at).format('MMMM YYYY')} | \n
| Active Listings | \n{lead.active_listings_count} | \n
| {kpaTakenLabel} | \n{!_lodash.isNull(lead.kpa_taken) && (lead.kpa_taken ? 'Yes' : 'No')} | \n
\n
\n );\n }\n\n render() {\n const { opened } = this.state;\n\n if (opened) {\n return this.renderForm();\n }\n return this.renderContent();\n }\n}\n\nLeadDrawerPipelineDetails.defaultProps = {\n lead: null,\n query: null,\n opened: false,\n};\n\nLeadDrawerPipelineDetails.propTypes = {\n lead: PropTypes.shape({}),\n query: PropTypes.shape({}),\n opened: PropTypes.bool,\n};\n\nexport default LeadDrawerPipelineDetails;\n","import classNames from 'classnames';\nimport autoBind from 'react-autobind';\nimport update from 'immutability-helper';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport isMobilePhone from 'validator/lib/isMobilePhone';\nimport Geosuggest from 'react-geosuggest';\nimport PhoneInput from 'react-phone-input-2';\nimport NumberFormat from 'react-number-format';\nimport { Collapse } from 'reactstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport TinyUser from '~/components/shared/users/tiny_user';\nimport CurrencyInput from '~/components/forms/currency_input';\nimport PercentageInput from '~/components/forms/percentage_input';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport {\n TeammatePicker,\n TeamMemberPicker,\n} from '~/components/forms/team_member_picker';\nimport {\n ProductionLabelSelect,\n SourceSelect,\n} from '~/components/forms/lead_fields';\n\nclass LeadDrawerRecruitingDetails extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n const isOpen = localStorage.isRecruitingOpen ? JSON.parse(localStorage.isRecruitingOpen) : false;\n\n this.state = {\n opened: props.opened,\n fields: _lodash.pick(props.lead, 'owner_id', 'referrer_id', 'referred_at', 'currently_at', 'source',\n 'production_ytd', 'production_label', 'office_address', 'office_city', 'office_zip',\n 'office_lat', 'office_lng', 'dollar_change', 'percentage_change', 'production_ltm', 'office_county',\n 'office_id', 'office_phone', 'avg_sales_price'),\n errors: {},\n isOpen,\n };\n }\n\n handleAddressChange(address) {\n this.setState((prevState) => ({\n fields: {\n ...prevState.fields,\n office_address: address,\n },\n }));\n }\n\n handleAddressSuggestion(suggest) {\n if (!suggest) return;\n\n const addressComponents = suggest.gmaps.address_components;\n const readableAddress = LeadHelpers.parseAddressComponents(addressComponents);\n\n this.setState((prevState) => ({\n fields: {\n ...prevState.fields,\n office_address: suggest.label,\n office_city: readableAddress.locality,\n office_zip: readableAddress.postal_code,\n office_lat: suggest.location.lat,\n office_lng: suggest.location.lng,\n },\n }));\n }\n\n onEditClick(e) {\n e.preventDefault();\n\n this.setState({\n opened: true,\n });\n }\n\n onCollapseClick(e) {\n e.preventDefault();\n\n const { isOpen } = this.state;\n\n this.setState({ isOpen: !isOpen });\n localStorage.isRecruitingOpen = !isOpen;\n }\n\n onEditCloseClick(e) {\n e.preventDefault();\n\n this.setState({\n opened: false,\n });\n }\n\n onFormSubmit(e) {\n e.preventDefault();\n\n const { fields } = this.state;\n const { lead, query } = this.props;\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n LeadDrawerActions.updateLead(update(fields, { id: { $set: lead.id } }), query);\n\n this.setState({\n opened: false,\n errors: {},\n });\n } else {\n this.setState({ errors });\n }\n }\n\n setFormField(name, val) {\n this.setState((prevState) => ({\n fields: {\n ...prevState.fields,\n [name]: val,\n },\n }));\n }\n\n handleOfficePhoneChange = (phone_number) => {\n this.setFormField('office_phone', phone_number);\n };\n\n validate() {\n const errors = {};\n const { fields } = this.state;\n const { office_phone } = fields;\n\n if (!_lodash.isEmpty(office_phone) && !isMobilePhone(office_phone, ['en-US'])) {\n errors.office_phone = 'Is invalid';\n }\n\n return errors;\n }\n\n renderContent() {\n const { isOpen } = this.state;\n const { lead } = this.props;\n\n return (\n \n \n
\n\n \n \n \n \n \n
\n \n
\n );\n }\n\n renderForm() {\n const { lead } = this.props;\n const { fields, errors } = this.state;\n\n return (\n \n \n { Rails.abilities.manageLead && (\n \n )}\n
\n\n Recruiting
\n\n| Owner | \n\n | \n
|---|---|
| Referrer | \n\n | \n
| Referral Date | \n{lead.referred_at && Moment(lead.referred_at).format('LL')} | \n
| Company | \n\n {lead.currently_at} \n | \n
| Office Address | \n\n { lead.office_address && (\n \n {lead.office_address}\n \n \n )}\n | \n
| Office Phone | \n\n {LeadHelpers.renderPhoneNumber(lead.office_phone)}\n | \n
| Office County | \n{lead.office_county} | \n
| Office ID | \n{lead.office_id} | \n
| Source | \n{lead.source} | \n
| Total $ Production LTM | \n\n {lead.production_ytd && {LeadHelpers.renderProductionValue(lead.production_ytd)}}\n {lead.production_label && LeadHelpers.renderProductionBadge(lead)}\n | \n
| Total # Production LTM | \n{lead.production_ltm} | \n
| $ Change | \n{LeadHelpers.renderProductionValue(lead.dollar_change)} | \n
| % Change | \n{lead.percentage_change && `${lead.percentage_change} % `} | \n
| Average Sales Price | \n{LeadHelpers.renderProductionValue(lead.avg_sales_price)} | \n
\n
\n );\n }\n\n render() {\n const { opened } = this.state;\n\n if (opened) return this.renderForm();\n\n return this.renderContent();\n }\n}\n\nLeadDrawerRecruitingDetails.defaultProps = {\n lead: null,\n query: null,\n opened: false,\n};\n\nLeadDrawerRecruitingDetails.propTypes = {\n lead: PropTypes.shape({}),\n query: PropTypes.shape({}),\n opened: PropTypes.bool,\n};\n\nexport default LeadDrawerRecruitingDetails;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Collapse } from 'reactstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nclass LeadDrawerRelitixDetails extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n const isOpen = localStorage.isRelitixOpen ? JSON.parse(localStorage.isRelitixOpen) : false;\n\n this.state = {\n isOpen,\n };\n }\n\n onCollapseClick(e) {\n e.preventDefault();\n\n const { isOpen } = this.state;\n\n this.setState({ isOpen: !isOpen });\n localStorage.isRelitixOpen = !isOpen;\n }\n\n render() {\n const { isOpen } = this.state;\n const { lead } = this.props;\n const {\n closest_office_name,\n closest_office_address,\n dist_to_closest_office,\n rookie_potential_rating,\n first_trans_date_current_office,\n switch_color,\n list_eff_grade,\n list_eff_impact,\n five_yr_closed_pct,\n five_yr_tot_listings,\n production_zip_code,\n dist_to_office,\n first_trans_date,\n update_date,\n } = lead.relitix_attributes || {};\n\n const currentFormat = Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });\n\n return (\n \n \n
\n\n \n \n \n \n \n
\n \n
\n );\n }\n}\n\nLeadDrawerRelitixDetails.defaultProps = {\n lead: null,\n};\n\nLeadDrawerRelitixDetails.propTypes = {\n lead: PropTypes.shape({}),\n};\n\nexport default LeadDrawerRelitixDetails;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport update from 'immutability-helper';\nimport { Collapse } from 'reactstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport SimpleMonthPicker, { months } from '~/components/forms/simple_month_picker';\nimport LeadDrawerTeamMemberManager from './lead_drawer_team_member_manager';\n\nclass LeadDrawerRetentionDetails extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n const isOpen = localStorage.isRetentionOpen ? JSON.parse(localStorage.isRetentionOpen) : false;\n\n this.state = {\n opened: props.opened,\n isOpen,\n fields: _lodash.pick(props.lead, 'active_listings_count', 'anniversary_month', 'joined_at', 'production_label'),\n };\n }\n\n onCollapseClick(e) {\n e.preventDefault();\n\n const { isOpen } = this.state;\n\n this.setState({ isOpen: !isOpen });\n localStorage.isRetentionOpen = !isOpen;\n }\n\n onEditClick(e) {\n e.preventDefault();\n\n this.setState({\n opened: true,\n });\n }\n\n onEditCloseClick(e) {\n e.preventDefault();\n\n this.setState({\n opened: false,\n });\n }\n\n onFormSubmit(e) {\n e.preventDefault();\n\n const { fields } = this.state;\n const { lead, query } = this.props;\n\n LeadDrawerActions.updateLead(\n update(fields, { id: { $set: lead.id } }), query,\n );\n\n this.setState({\n opened: false,\n });\n }\n\n setFormField = (name, val) => {\n this.setState((prevState) => ({\n fields: {\n ...prevState.fields,\n [name]: val,\n },\n }));\n };\n\n renderContent() {\n const { isOpen } = this.state;\n const { lead } = this.props;\n\n return (\n \n \n
\n\n Relitix
\n\n| Our Closest Office: | \n{closest_office_name} | \n
|---|---|
| Our Closest Office Address: | \n{ closest_office_address } | \n
| Dist. to Our Closest Office: | \n\n { dist_to_closest_office ? `${dist_to_closest_office} mi` : ''}\n | \n
| Dist. to Current Office: | \n\n { dist_to_office ? `${dist_to_office} mi` : ''}\n | \n
| Center of Production Zip: | \n{production_zip_code} | \n
| First Transaction at Current Office: | \n\n {first_trans_date_current_office ? Moment(first_trans_date_current_office).format('L') : ''}\n | \n
| First Transaction in MLS: | \n\n {first_trans_date ? Moment(first_trans_date).format('L') : ''}\n | \n
| Rookie Rating: | \n{rookie_potential_rating === null ? '' : rookie_potential_rating} | \n
| Current Switch Risk: | \n{switch_color} | \n
| Listing Effectiveness Grade: | \n{list_eff_grade} | \n
| Listing Effectiveness Impact: | \n\n {list_eff_impact ? currentFormat.format(list_eff_impact) : ''}\n | \n
| 5 Year Batting Avg: | \n{ five_yr_closed_pct ? `${five_yr_closed_pct * 100}%` : ''} | \n
| 5 Year Listing Count: | \n{five_yr_tot_listings} | \n
| Last Updated: | \n\n {update_date ? Moment(update_date).format('MM/DD/YYYY h:mm A') : ''}\n | \n
\n \n \n \n
\n \n
\n );\n }\n\n renderForm() {\n const { fields } = this.state;\n\n return (\n \n \n { Rails.abilities.manageLead && (\n \n )}\n
\n\n Retention
\n\n| Active Listings | \n{lead.active_listings_count} | \n
|---|---|
| Anniversary | \n{months[lead.anniversary_month - 1]} | \n
| Joined On | \n{lead.joined_at && Moment(lead.joined_at).format('MMMM D, YYYY')} | \n
| Last Signin | \n\n | \n
\n
\n );\n }\n\n render() {\n const { opened } = this.state;\n\n if (opened) {\n return this.renderForm();\n }\n return this.renderContent();\n }\n}\n\nLeadDrawerRetentionDetails.defaultProps = {\n lead: null,\n query: null,\n opened: false,\n};\n\nLeadDrawerRetentionDetails.propTypes = {\n lead: PropTypes.shape({}),\n query: PropTypes.shape({}),\n opened: PropTypes.bool,\n};\n\nexport default LeadDrawerRetentionDetails;\n","const LeadLinkActionTypes = {\n LOAD_LEAD_LINKS_DONE: 'LOAD_LEAD_LINKS_DONE',\n\n CREATE_LEAD_LINK: 'CREATE_LEAD_LINK',\n CREATE_LEAD_LINK_DONE: 'CREATE_LEAD_LINK_DONE',\n CREATE_LEAD_LINK_FAIL: 'CREATE_LEAD_LINK_FAIL',\n\n UPDATE_LEAD_LINK: 'UPDATE_LEAD_LINK',\n UPDATE_LEAD_LINK_DONE: 'UPDATE_LEAD_LINK_DONE',\n UPDATE_LEAD_LINK_FAIL: 'UPDATE_LEAD_LINK_FAIL',\n\n DELETE_LEAD_LINK: 'DELETE_LEAD_LINK',\n DELETE_LEAD_LINK_DONE: 'DELETE_LEAD_LINK_DONE',\n DELETE_LEAD_LINK_FAIL: 'DELETE_LEAD_LINK_FAIL',\n\n UPDATE_FROM_FULLCONTACT: 'UPDATE_FROM_FULLCONTACT',\n UPDATE_FROM_FULLCONTACT_DONE: 'UPDATE_FROM_FULLCONTACT_DONE',\n UPDATE_FROM_FULLCONTACT_FAIL: 'UPDATE_FROM_FULLCONTACT_FAIL',\n};\n\nexport default LeadLinkActionTypes;\n","import AppDispatcher from '~/dispatchers/app_dispatcher';\nimport APIRequest from '~/lib/api_request';\nimport LeadLinkActionTypes from '~/types/lead_link_action_types';\n\nlet fullContactRequest;\nlet createLinkRequest;\nlet updateLinkRequest;\nlet deleteLinkRequest;\n\nconst LeadLinkActions = {\n loadLeadLinks(links) {\n setTimeout(() => {\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.LOAD_LEAD_LINKS_DONE,\n links,\n });\n }, 1);\n },\n\n createLeadLink(leadID, link) {\n APIRequest.abort(createLinkRequest);\n\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.CREATE_LEAD_LINK,\n });\n\n createLinkRequest = APIRequest.post({\n resource: `/v1/leads/${leadID}/links/`,\n data: {\n ...link,\n },\n });\n\n createLinkRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.CREATE_LEAD_LINK_FAIL,\n error,\n });\n\n return;\n }\n\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.CREATE_LEAD_LINK_DONE,\n links: response.body,\n });\n });\n },\n\n updateLeadLink(leadID, link) {\n APIRequest.abort(updateLinkRequest);\n\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.UPDATE_LEAD_LINK,\n });\n\n updateLinkRequest = APIRequest.put({\n resource: `/v1/leads/${leadID}/links/${link.id}`,\n data: {\n ...link,\n },\n });\n\n updateLinkRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.UPDATE_LEAD_LINK_FAIL,\n error,\n });\n\n return;\n }\n\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.UPDATE_LEAD_LINK_DONE,\n links: response.body,\n });\n });\n },\n\n deleteLeadLink(leadID, link) {\n APIRequest.abort(deleteLinkRequest);\n\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.DELETE_LEAD_LINK,\n leadID,\n link,\n });\n\n deleteLinkRequest = APIRequest.delete({\n resource: `/v1/leads/${leadID}/links/${link.id}`,\n });\n\n deleteLinkRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.DELETE_LEAD_LINK_FAIL,\n error,\n });\n\n return;\n }\n\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.DELETE_LEAD_LINK_DONE,\n links: response.body,\n });\n });\n },\n\n updateFromFullContact(leadID) {\n APIRequest.abort(fullContactRequest);\n\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.UPDATE_FROM_FULLCONTACT,\n });\n\n fullContactRequest = APIRequest.post({\n resource: `/v1/leads/${leadID}/links/autoload`,\n });\n\n fullContactRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.UPDATE_FROM_FULLCONTACT_FAIL,\n error,\n });\n\n return;\n }\n\n AppDispatcher.dispatch({\n type: LeadLinkActionTypes.UPDATE_FROM_FULLCONTACT_DONE,\n links: response.body,\n });\n });\n },\n};\n\nexport default LeadLinkActions;\n","import { ReduceStore } from 'flux/utils';\nimport AppDispatcher from '~/dispatchers/app_dispatcher';\nimport LeadLinkActionTypes from '~/types/lead_link_action_types';\n\nclass LeadLinkStore extends ReduceStore {\n constructor() {\n super(AppDispatcher);\n }\n\n getInitialState() {\n return {\n showAddLink: false,\n links: [],\n lastLeadLinkStoreAction: null,\n errors: {},\n newLink: {\n service_name: '',\n service_url: '',\n },\n editLink: {\n service_name: '',\n service_url: '',\n },\n };\n }\n\n updateFromFullContact(state, action) {\n const newState = { ...state };\n\n newState.loading = true;\n newState.lastLeadLinkStoreAction = 'updateFromFullContact';\n\n return newState;\n }\n\n updateFromFullContactDone(state, action) {\n const newState = { ...state };\n\n newState.links = action.links.map((l) => ({ ...l, showEdit: false, showText: true }));\n newState.loading = false;\n newState.errors = {};\n newState.lastLeadLinkStoreAction = 'updateFromFullContactDone';\n\n return newState;\n }\n\n updateFromFullContactFail(state, action) {\n const newState = { ...state };\n\n newState.loading = false;\n newState.errors = action.error.response.body.errors;\n newState.lastLeadLinkStoreAction = 'updateFromFullContactFail';\n\n return newState;\n }\n\n loadLeadLinksDone(state, action) {\n const newState = { ...state, showAddLink: false, links: action.links.map((l) => ({ ...l, showEdit: false, showText: true })) };\n\n newState.lastLeadLinkStoreAction = 'loadLeadLinksDone';\n\n return newState;\n }\n\n createLeadLink(state, action) {\n const newState = { ...state };\n\n newState.lastLeadLinkStoreAction = 'createLeadLink';\n\n return newState;\n }\n\n updateLeadLink(state, action) {\n const newState = { ...state };\n\n newState.lastLeadLinkStoreAction = 'updateLeadLink';\n\n return newState;\n }\n\n deleteLeadLink(state, action) {\n const newState = { ...state };\n\n newState.lastLeadLinkStoreAction = 'deleteLeadLink';\n\n return newState;\n }\n\n createLeadLinkDone(state, action) {\n const newState = { ...state };\n\n newState.showAddLink = false;\n newState.links = action.links.map((l) => ({ ...l, showEdit: false, showText: true }));\n newState.errors = {};\n newState.lastLeadLinkStoreAction = 'createLeadLinkDone';\n\n return newState;\n }\n\n updateLeadLinkDone(state, action) {\n const newState = { ...state };\n\n newState.links = action.links.map((l) => ({ ...l, showEdit: false, showText: true }));\n newState.errors = {};\n newState.lastLeadLinkStoreAction = 'updateLeadLinkDone';\n\n return newState;\n }\n\n deleteLeadLinkDone(state, action) {\n const newState = { ...state };\n\n newState.links = action.links.map((l) => ({ ...l, showEdit: false, showText: true }));\n newState.errors = {};\n newState.lastLeadLinkStoreAction = 'deleteLeadLinkDone';\n\n return newState;\n }\n\n createLeadLinkFail(state, action) {\n const newState = { ...state };\n\n newState.errors = action.error.response.body.errors;\n newState.lastLeadLinkStoreAction = 'createLeadLinkFail';\n\n return newState;\n }\n\n updateLeadLinkFail(state, action) {\n const newState = { ...state };\n\n newState.errors = action.error.response.body.errors;\n newState.lastLeadLinkStoreAction = 'updateLeadLinkFail';\n\n return newState;\n }\n\n deleteLeadLinkFail(state, action) {\n const newState = { ...state };\n\n newState.errors = action.error.response.body.errors;\n newState.lastLeadLinkStoreAction = 'deleteLeadLinkFail';\n\n return newState;\n }\n\n reduce(state, action) {\n switch (action.type) {\n case LeadLinkActionTypes.LOAD_LEAD_LINKS_DONE:\n return this.loadLeadLinksDone(state, action);\n case LeadLinkActionTypes.CREATE_LEAD_LINK:\n return this.createLeadLink(state, action);\n case LeadLinkActionTypes.CREATE_LEAD_LINK_DONE:\n return this.createLeadLinkDone(state, action);\n case LeadLinkActionTypes.CREATE_LEAD_LINK_FAIL:\n return this.createLeadLinkFail(state, action);\n case LeadLinkActionTypes.UPDATE_LEAD_LINK:\n return this.updateLeadLink(state, action);\n case LeadLinkActionTypes.UPDATE_LEAD_LINK_DONE:\n return this.updateLeadLinkDone(state, action);\n case LeadLinkActionTypes.UPDATE_LEAD_LINK_FAIL:\n return this.updateLeadLinkFail(state, action);\n case LeadLinkActionTypes.DELETE_LEAD_LINK:\n return this.deleteLeadLink(state, action);\n case LeadLinkActionTypes.DELETE_LEAD_LINK_DONE:\n return this.deleteLeadLinkDone(state, action);\n case LeadLinkActionTypes.DELETE_LEAD_LINK_FAIL:\n return this.deleteLeadLinkFail(state, action);\n case LeadLinkActionTypes.UPDATE_FROM_FULLCONTACT:\n return this.updateFromFullContact(state, action);\n case LeadLinkActionTypes.UPDATE_FROM_FULLCONTACT_DONE:\n return this.updateFromFullContactDone(state, action);\n case LeadLinkActionTypes.UPDATE_FROM_FULLCONTACT_FAIL:\n return this.updateFromFullContactFail(state, action);\n default:\n return state;\n }\n }\n}\n\nexport default new LeadLinkStore();\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Collapse } from 'reactstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Select from '~/components/forms/select';\n\nimport LeadLinkActions from '~/actions/lead_link_actions';\nimport LeadLinkStore from '~/stores/lead_link_store';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\n\nconst SUPPORTED_SERVICES = [\n { label: 'Linkedin', value: 'linkedin' },\n { label: 'Facebook', value: 'facebook' },\n { label: 'Twitter', value: 'twitter' },\n { label: 'Pinterest', value: 'pinterest' },\n { label: 'Youtube', value: 'youtube' },\n { label: 'Vimeo', value: 'vimeo' },\n { label: 'Business Website', value: 'business-website' },\n { label: 'Personal Website', value: 'personal-website' },\n { label: 'Other', value: 'other' },\n];\n\nclass LeadDrawerSocialLinks extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n const isOpen = localStorage.isSocialLinksOpen ? JSON.parse(localStorage.isSocialLinksOpen) : true;\n\n this.state = {\n isOpen,\n avatarFile: React.createRef(),\n };\n }\n\n componentDidMount() {\n const { lead } = this.props;\n\n this.linkStoreListener = LeadLinkStore.addListener(this.onLeadLinkStoreChange);\n this.leadDrawerStoreListener = LeadDrawerStore.addListener(this.onLeadDrawerStoreChange);\n\n LeadLinkActions.loadLeadLinks(lead.web_links);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n LeadLinkActions.loadLeadLinks(nextProps.lead.web_links);\n }\n\n componentWillUnmount() {\n if (this.linkStoreListener) this.linkStoreListener.remove();\n if (this.leadDrawerStoreListener) this.leadDrawerStoreListener.remove();\n }\n\n onLeadLinkStoreChange() {\n const nextState = LeadLinkStore.getState();\n const { lastLeadLinkStoreAction } = nextState;\n const { lead } = this.props;\n\n switch (lastLeadLinkStoreAction) {\n case 'updateLeadLinkFail':\n GlobalContainer.notify(\"Couldn't update link, please try again\", 'danger');\n break;\n case 'createLeadLinkFail':\n GlobalContainer.notify(\"Couldn't add link, please try again\", 'danger');\n break;\n\n case 'updateFromFullContactFail':\n GlobalContainer.notify('Something went wrong during lookup, please try again', 'danger');\n break;\n\n case 'updateFromFullContactDone':\n setTimeout(() => {\n LeadDrawerActions.loadLead(lead.id);\n });\n break;\n\n default:\n break;\n }\n\n this.setState(nextState);\n }\n\n onLeadDrawerStoreChange() {\n const { lead } = this.props;\n const nextState = LeadDrawerStore.getState();\n const { leadDrawerStoreAction } = nextState;\n\n switch (leadDrawerStoreAction) {\n case 'updateLeadAvatarFail':\n GlobalContainer.notify(\"Couldn't update the headshot, check if file size is greater than 10MB\", 'danger');\n break;\n\n case 'updateLeadAvatarDone':\n setTimeout(() => {\n LeadDrawerActions.loadLead(lead.id);\n });\n break;\n\n default:\n break;\n }\n }\n\n onCollapseClick(e) {\n e.preventDefault();\n\n const { isOpen } = this.state;\n\n this.setState({ isOpen: !isOpen });\n localStorage.isSocialLinksOpen = !isOpen;\n }\n\n onLinkServiceNameChange(v, attr) {\n this.setState({\n [attr]: {\n ...this.state[attr],\n service_name: v.value,\n },\n });\n }\n\n onLinkServiceURLChange(v, attr) {\n this.setState({\n [attr]: {\n ...this.state[attr],\n service_url: v.target.value,\n },\n });\n }\n\n addAvatar(e) {\n const { lead } = this.props;\n const file = e.target.files[0];\n\n if (!file) return;\n\n LeadDrawerActions.updateAvatar({ id: lead.id, photo_url: file });\n e.target.value = null;\n }\n\n removeAvatar() {\n const { lead } = this.props;\n\n LeadDrawerActions.removeAvatar({ id: lead.id, remove_photo_url: true });\n }\n\n updateFromFullContact() {\n const { lead } = this.props;\n\n LeadLinkActions.updateFromFullContact(lead.id);\n }\n\n initialiseState(extraState = {}) {\n const { links } = this.state;\n\n this.setState(LeadLinkActions.loadLeadLinks(links));\n }\n\n createLink(e) {\n e.preventDefault();\n\n const { lead } = this.props;\n const { newLink } = this.state;\n\n LeadLinkActions.createLeadLink(lead.id, newLink);\n }\n\n deleteLink(linkId) {\n const { lead } = this.props;\n\n LeadLinkActions.deleteLeadLink(lead.id, linkId);\n }\n\n updateLink(e) {\n e.preventDefault();\n\n const { lead } = this.props;\n const { editLink } = this.state;\n\n LeadLinkActions.updateLeadLink(lead.id, editLink);\n }\n\n showEditLink(link) {\n const links = [...this.state.links].map((l) => {\n if (l.id === link.id) {\n return { ...link, showEdit: true, showText: false };\n }\n return { ...l, showEdit: false, showText: true };\n });\n\n const editLink = { id: link.id, service_name: link.service_name, service_url: link.service_url };\n\n this.setState({ ...this.state, links, editLink });\n }\n\n renderLinks() {\n const { lead } = this.props;\n const { links } = this.state;\n\n if (links) {\n if (Object.keys(links).length > 0) {\n const renderedLinks = _lodash.map(links, (e) => (\n \n \n
\n\n \n \n
\n\n \n
\n \n {_lodash.startCase(_lodash.toLower(e.service_name))}\n :\n
\n\n \n \n {e.service_url}\n \n
\n \n
\n \n )}\n\n {e.showEdit && this.renderEditLink()}\n \n \n \n
\n \n {this.renderAddLink()}\n {renderedLinks}\n
\n );\n }\n\n return (\n \n {this.renderAddLink()}\n
\n );\n }\n\n return null;\n }\n\n renderAddLink() {\n const { showAddLink, newLink } = this.state;\n\n if (!showAddLink) return null;\n\n return (\n No social profiles found
\n\n \n
\n );\n }\n\n renderEditLink() {\n const { editLink } = this.state;\n\n return (\n \n );\n }\n\n renderUpdateButton() {\n const { loading, avatarFile } = this.state;\n const { lead } = this.props;\n\n if (Rails.abilities.manageLead === false) return null;\n\n if (loading) {\n return (\n \n );\n }\n\n return (\n \n \n {!lead.photo_url && (\n avatarFile.current.click()}\n >\n
\n );\n }\n\n render() {\n const { isOpen } = this.state;\n const { lead } = this.props;\n\n return (\n \n \n {lead.photo_url && (\n \n
\n );\n }\n}\n\nLeadDrawerSocialLinks.defaultProps = {\n lead: null,\n};\n\nLeadDrawerSocialLinks.propTypes = {\n lead: PropTypes.shape({}),\n};\n\nexport default LeadDrawerSocialLinks;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { PropTypes } from 'prop-types';\nimport { Collapse } from 'reactstrap';\nimport ReactPaginate from 'react-paginate';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport TaskActions from '~/actions/task_actions';\nimport TaskStore from '~/stores/task_store';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport TaskModal from '~/components/modals/task_modal';\n\nclass LeadDrawerTasks extends React.Component {\n constructor(props) {\n super(props);\n\n const isOpen = localStorage.isTasksOpen\n ? JSON.parse(localStorage.isTasksOpen)\n : true;\n\n this.state = {\n isOpen,\n tasks: [],\n pagination: {},\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n const { lead } = this.props;\n\n // listen to TaskStore changes\n this.taskStoreListener = TaskStore.addListener(\n this.onTaskStoreChange,\n );\n this.leadDrawerStoreListener = LeadDrawerStore.addListener(\n this.onLeadDrawerStoreChange,\n );\n\n setTimeout(() => {\n TaskActions.loadTasks(lead.id);\n });\n }\n\n componentWillUnmount() {\n // remove listener to TaskStore changes on Unmount\n if (this.taskStoreListener) this.taskStoreListener.remove();\n if (this.leadDrawerStoreListener) {\n this.leadDrawerStoreListener.remove();\n }\n }\n\n handleTaskDelete(e, task) {\n e.preventDefault();\n\n const { lead } = this.props;\n const { pagination } = this.state;\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this task?',\n callback: (ok) => {\n if (ok) {\n TaskActions.deleteTask(\n task,\n lead.id,\n pagination.current_page,\n );\n }\n },\n });\n }\n\n handleEditTaskClick(e, task) {\n e.preventDefault();\n\n const { lead } = this.props;\n\n ReactDOM.render(\n \n \n
\n\n Social and Web
\n\n\n
\n )}\n \n 
\n
\n \n \n \n
\n {this.renderUpdateButton()}
\n \n \n {this.renderLinks()}\n
\n \n Owner:\n {' '}\n {task.owner_name}\n
\n Category:\n {' '}\n {task.category}\n
\n Priority:\n {' '}\n {LeadHelpers.renderTaskPriority(task.priority)}\n
\n \n {_lodash.isEmpty(tasks) && \n
\n );\n }\n}\n\nLeadDrawerTasks.defaultProps = {\n lead: null,\n};\n\nLeadDrawerTasks.propTypes = {\n lead: PropTypes.shape({}),\n};\n\nexport default LeadDrawerTasks;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\n\nclass LeadDrawerTeamMemberManager extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n disabled: false,\n };\n this.onInviteToTeam = this.onInviteToTeam.bind(this);\n }\n\n onInviteToTeam(e) {\n e.preventDefault();\n this.setState({ sending: true });\n LeadDrawerActions.inviteLeadToTeam(this.props.lead);\n }\n\n render() {\n const { lead } = this.props;\n const { sending } = this.state;\n\n if (!lead.email) {\n return add email to invite to team;\n }\n\n if (lead.team_member && lead.team_member.joined_at) {\n return {Moment(lead.team_member.last_sign_in_at).format('MMMM D, YYYY')};\n }\n\n if (sending) {\n return (\n \n \n \n {isOpen ? (\n
\n\n Tasks
\n\nNo Tasks
}\n\n \n {tasks.map(this.renderTask)}\n
\n
\n {pagination.total_pages > 1 && (\n \n \n
\n )}\n \n
\n\n {isCustomSelected && (\n \n
\n\n \n
\n \n
\n )}\n \n );\n});\n\nCustomScheduleOption.propTypes = {\n customOptions: PropTypes.shape({\n time: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n ]),\n date: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n ]),\n timezone: PropTypes.string,\n }),\n errors: PropTypes.shape({}),\n isCustomSelected: PropTypes.bool.isRequired,\n updateCustomOptions: PropTypes.func.isRequired,\n};\n\nCustomScheduleOption.defaultProps = {\n customOptions: {\n time: '',\n date: '',\n timezone: '',\n },\n errors: {},\n};\n\nexport default CustomScheduleOption;\n","import React, { useEffect, useState } from 'react';\nimport { Button, Popover, OverlayTrigger } from 'react-bootstrap';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport classNames from 'classnames';\n\nimport ScheduleOption from './ScheduleOption';\nimport CustomScheduleOption from './CustomScheduleOption';\n\nconst scheduleOptions = [\n { id: '1-hour', value: '1 hour', label: 'In 1 hour' },\n { id: '2-hour', value: '2 hour', label: 'In 2 hours' },\n { id: '8AM', value: '08:00', label: 'Tomorrow Morning (8AM)' },\n { id: '1PM', value: '13:00', label: 'Tomorrow Afternoon (1PM)' },\n {\n id: 'Custom', value: 'Custom', label: 'Custom', isCustom: true,\n },\n];\n\nconst ScheduleButton = ({\n schedule,\n disabled,\n setSchedule,\n popoverPlacement,\n containerRef,\n}) => {\n const { selectedSchedule, customOptions: customOptionsProp } = schedule;\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const [selectedOption, setSelectedOption] = useState(null);\n const [errors, setErrors] = useState({});\n const [customOptions, setCustomOptions] = useState({\n date: '',\n time: '',\n timezone: customOptionsProp?.timezone || '',\n });\n\n useEffect(() => {\n if (isPopoverOpen && selectedSchedule) {\n const option = scheduleOptions.find((opt) => opt.value === selectedSchedule);\n\n if (option) {\n setSelectedOption(option);\n setCustomOptions(customOptionsProp);\n }\n }\n }, [isPopoverOpen, selectedSchedule]);\n\n const togglePopover = () => {\n setIsPopoverOpen(!isPopoverOpen);\n\n if (!isPopoverOpen) {\n setSelectedOption(null);\n setCustomOptions({\n date: '',\n time: '',\n timezone: customOptionsProp?.timezone || '',\n });\n setErrors({});\n }\n };\n\n const validateCustomOptions = (options) => {\n const validationErrors = {};\n if (!options.date) validationErrors.date = 'Date is required.';\n if (!options.time) validationErrors.time = 'Time is required.';\n if (!options.timezone) validationErrors.timezone = 'Timezone is required.';\n return validationErrors;\n };\n\n const updateCustomOptions = (field, value) => {\n setCustomOptions((prev) => ({ ...prev, [field]: value }));\n\n if (errors[field]) {\n setErrors((prev) => ({ ...prev, [field]: null }));\n }\n };\n\n const handleConfirm = () => {\n if (selectedOption?.isCustom) {\n const validationErrors = validateCustomOptions(customOptions);\n\n if (Object.keys(validationErrors).length > 0) {\n setErrors(validationErrors);\n return;\n }\n }\n\n setSchedule({\n selectedSchedule: selectedOption?.value || '',\n customOptions: selectedOption?.isCustom ? customOptions : {},\n });\n\n setIsPopoverOpen(false);\n };\n\n const handleSelectedSchedule = (e) => {\n const { value } = e.target;\n let option;\n if (value === selectedOption?.value) {\n option = null;\n } else {\n option = scheduleOptions.find((opt) => opt.value === value);\n }\n\n setSelectedOption(option);\n };\n\n const renderPopover = (props) => (\n \n
\n \n \n Confirm\n \n\n \n Cancel\n \n
\n \n
\n));\n\nScheduleOption.propTypes = {\n id: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n labelText: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n onChange: PropTypes.func.isRequired,\n children: PropTypes.node,\n};\n\nScheduleOption.defaultProps = {\n children: null,\n};\n\nexport default ScheduleOption;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport update from 'immutability-helper';\nimport { Input } from 'reactstrap';\n\nimport TaskActions from '~/actions/task_actions';\nimport LeadsSelect from '~/components/forms/leads_select';\nimport TaskCategorySelect from '~/components/forms/task_category_select';\nimport TaskPrioritySelect from '~/components/forms/task_priority_select';\nimport TaskStatusSelect from '~/components/forms/task_status_select';\nimport TaskEditor from '~/components/forms/HtmlEditors/TaskEditor';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport { TeammatePicker } from '~/components/forms/team_member_picker';\n\nimport InsertDocumentButton from '~/components/insert_document_button';\n\nclass AddTaskForm extends React.Component {\n constructor(props) {\n super(props);\n\n const { lead } = this.props;\n\n this.state = {\n task: {\n name: 'Follow Up',\n category: 'follow_up',\n due_date_at: Moment().format('YYYY-MM-DD'),\n description: '',\n owner_id: Rails.helpers.currentUser.id,\n priority: 'normal',\n status: 'to_do',\n lead_ids: [lead.id],\n },\n errors: {},\n sending: false,\n };\n\n autoBind(this);\n }\n\n setTaskField(name, val) {\n this.setState({\n task: update(this.state.task, { [name]: { $set: val } }),\n });\n }\n\n onFormSubmit = (e) => {\n e.preventDefault();\n\n const { task } = this.state;\n const { lead } = this.props;\n\n this.setState({ sending: true });\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n TaskActions.createTask(task, lead.id);\n } else {\n this.setState({ sending: false, errors });\n }\n };\n\n validate() {\n const { task } = this.state;\n const errors = {};\n\n if (!task.name) {\n errors.name = \"Can't be empty\";\n }\n\n if (!task.category) {\n errors.category = \"Can't be empty\";\n }\n\n if (!task.due_date_at) {\n errors.due_date_at = \"Can't be empty\";\n }\n\n if (!task.priority) {\n errors.priority = \"Can't be empty\";\n }\n\n if (!task.status) {\n errors.status = \"Can't be empty\";\n }\n\n if (_lodash.isEmpty(task.lead_ids)) {\n errors.lead_ids = \"Can't be empty\";\n }\n\n this.setState({ errors });\n\n return errors;\n }\n\n render() {\n const { task, sending, errors, linksToInsert } = this.state;\n const submitButtonClass = classNames('btn btn-primary', {\n disabled: sending,\n });\n\n return (\n \n );\n }\n}\n\nexport default AddTaskForm;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React, { createRef } from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Moment from 'moment-timezone';\nimport { Container } from 'flux/utils';\nimport { Popover, OverlayTrigger } from 'react-bootstrap';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport AppointmentEditor from '~/components/forms/HtmlEditors/AppointmentEditor';\nimport TimeSelect from '~/components/forms/dropdowns/TimeSelect';\nimport TimeLengthSelect from '~/components/forms/dropdowns/TimeLengthSelect';\nimport TimezoneSelect from '~/components/forms/dropdowns/TimezoneSelect';\nimport EmailSelect from '~/components/forms/email_select';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport { TeammatePicker } from '~/components/forms/team_member_picker';\nimport FormFooter from './common/form_footer';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport { WarningMessage } from '~/components/warnings/GooglePermissionDeniedWarning';\nimport InsertDocumentButton from '~/components/insert_document_button';\n\nconst CurrentDate = Moment().startOf('day').toDate();\n\nclass AppointmentForm extends React.Component {\n static getStores() {\n return [LeadDrawerStore];\n }\n\n static calculateState() {\n return {\n leadDrawerState: LeadDrawerStore.getState(),\n };\n }\n\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n const { lead } = props;\n\n this.state = {\n status: lead.status,\n address: Rails.helpers.currentTeam.address,\n appointment_at_date: Moment().local(),\n timezone: Moment.tz.guess(),\n appointment_minutes: 60,\n cc_emails: '',\n show_cc_emails: false,\n owner_id: Rails.helpers.currentUser.id,\n show_owner_dropdown: false,\n errors: {},\n sending: false,\n showPopover: false,\n warningMessage: '',\n };\n this.ref = createRef();\n\n // Explicitly bind the methods\n this.handleShowAdditionalEmails = this.handleShowAdditionalEmails.bind(this);\n this.handleHideAdditionalEmails = this.handleHideAdditionalEmails.bind(this);\n this.handleOwnerDropdown = this.handleOwnerDropdown.bind(this);\n this.handleSaveAppointment = this.handleSaveAppointment.bind(this);\n this.onChangeDate = this.onChangeDate.bind(this);\n this.onChangeTime = this.onChangeTime.bind(this);\n this.onChangeTimezone = this.onChangeTimezone.bind(this);\n this.onChangeLength = this.onChangeLength.bind(this);\n this.onFormSubmit = this.onFormSubmit.bind(this);\n this.createAppointment = this.createAppointment.bind(this);\n this.validate = this.validate.bind(this);\n this.renderPopover = this.renderPopover.bind(this);\n }\n\n handleShowAdditionalEmails() {\n this.setState({ show_cc_emails: true });\n }\n\n handleHideAdditionalEmails(e) {\n e.preventDefault();\n\n this.setState({ show_cc_emails: false });\n }\n\n handleOwnerDropdown(e) {\n e.preventDefault();\n\n const { show_owner_dropdown } = this.state;\n\n this.setState({ show_owner_dropdown: !show_owner_dropdown });\n }\n\n handleSaveAppointment(e) {\n e.preventDefault();\n const { warningMessage } = this.state;\n if (warningMessage) {\n this.setState({ showPopover: true });\n } else {\n this.setState({ sending: true }, () => {\n this.createAppointment({ sendToLead: false });\n });\n }\n }\n\n onChangeDate(m) {\n this.setState({ appointment_at_date: m.format('YYYY-MM-DD') });\n }\n\n onChangeTime(opt) {\n this.setState({ appointment_at_time: opt ? opt.value : '' });\n }\n\n onChangeTimezone(opt) {\n this.setState({ timezone: opt ? opt.value : '' });\n }\n\n onChangeLength(opt) {\n this.setState({ appointment_minutes: opt ? opt.value : '' });\n }\n\n onFormSubmit(e) {\n e.preventDefault();\n this.createAppointment({ sendToLead: true });\n }\n\n createAppointment(options = {}) {\n const { lead } = this.props;\n const {\n appointment_at_time,\n appointment_at_date,\n subject,\n body,\n cc_emails,\n appointment_minutes,\n address,\n owner_id,\n timezone,\n } = this.state;\n\n this.setState({ sending: options.sendToLead ? 'send' : 'save' });\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n const combinedDateTime = `${appointment_at_date} ${appointment_at_time}`;\n const date = Moment.tz(combinedDateTime, timezone).seconds(0);\n const _footer = this.footer.serialize();\n const _attrs = {\n ..._footer,\n appointment: {\n subject,\n body,\n cc_emails,\n appointment_minutes,\n address,\n owner_id,\n timezone,\n appointment_at: date,\n internal: _footer.internal,\n },\n send_to_lead: options.sendToLead,\n };\n LeadDrawerActions.createLeadAppointment(lead, _attrs)\n .catch((error) => {\n const errorMsg = error.response?.body?.errors\n || 'An error occurred while checking permissions for calendar,'\n + 'please try again later.';\n this.setState({\n warningMessage: errorMsg,\n showPopover: true,\n });\n })\n .finally(() => {\n this.setState({ sending: false });\n });\n } else {\n this.setState({ sending: false, errors });\n }\n }\n\n validate() {\n const {\n appointment_at_date,\n appointment_at_time,\n appointment_minutes,\n address,\n subject,\n owner_id,\n timezone,\n } = this.state;\n const errors = {};\n\n if (!appointment_at_date) {\n errors.appointment_at_date = \"Can't be empty\";\n }\n\n if (!appointment_at_time) {\n errors.appointment_at_time = \"Can't be empty\";\n }\n\n if (!appointment_minutes) {\n errors.appointment_minutes = \"Can't be empty\";\n }\n\n if (!address) {\n errors.address = \"Can't be empty\";\n }\n\n if (!subject) {\n errors.subject = \"Can't be empty\";\n }\n\n if (!owner_id) {\n errors.owner_id = \"Can't be empty\";\n }\n\n if (!timezone) {\n errors.timezone = \"Can't be empty\";\n }\n\n return this.footer.validate(errors);\n }\n\n renderPopover(props) {\n const { warningMessage } = this.state;\n\n return (\n \n
\n\n {children}\n \n \n { sending === 'save' ? (\n \n \n \n \n
\n );\n } else {\n submitActionsComponent = (\n \n
\n\n \n \n setTaskField('name', val && val.target.value)}\n />\n
\n \n \n setTaskField('category', opt && opt.value)}\n />\n
\n \n \n setTaskField('description', html)}\n placeholder=\"Enter Description\"\n id=\"task_description\"\n spellCheck={isOpen}\n linksToInsert={linksToInsert}\n clearLinksToInsert={() => {\n this.setState({ linksToInsert: [] });\n }}\n />\n
\n\n \n
\n \n this.setState({ linksToInsert })}\n />\n
\n \n
\n\n \n \n setTaskField('lead_ids', ids)}\n isInvalid={!!errors.lead_ids}\n />\n
\n \n
\n \n );\n }\n\n renderTasksControls = () => {\n const { isOpen } = this.state;\n const { errors, task, setTaskField } = this.props;\n\n return (\n <>\n \n \n Owner\n \n setTaskField('owner_id', opt && opt.value)}\n clearable\n />\n
\n\n \n \n setTaskField('priority', opt && opt.value)}\n />\n
\n\n \n \n setTaskField('status', opt && opt.value)}\n />\n
\n \n setTaskField(\n 'due_date_at',\n picker && picker.toDate(),\n )}\n />\n
\n \n \n
\n Select date for Follow Up
\n \n );\n };\n\n render() {\n const { isOpen } = this.state;\n const { showScheduleButton, setSchedule } = this.props;\n const {\n lead,\n onRatingChange,\n rating,\n internal,\n status,\n call_disposition,\n errors,\n showRatingSelect,\n sending,\n submitButtonText,\n submitButtonSendingText,\n onSubmit,\n disabledButton,\n activityType,\n onCallDispositionChange,\n onStatusChange,\n onToggleSharedType,\n submitActionsComponent,\n schedule,\n scheduleBtnPopoverPlacement,\n isEditingMode,\n showPopover,\n renderPopover,\n } = this.props;\n\n const product = GlobalContainer.product();\n const showTaskSelect = !(product === 'recruiting' && status === 'onboarding'); // show anytime it's not recruiting and Signed (onboardind) status\n const stage = LeadHelpers.determineStatusStage(lead);\n const isAdminOrStaff = Rails.abilities.manageLead;\n\n return (\n\n {\n !isEditingMode && (\n <>\n
\n\n \n \n {this.renderTasksControls()}\n
\n )}\n \n {activityType === 'phone_call' && (\n
\n\n {showRatingSelect && (\n \n {errors.status}\n
\n )}\n \n
\n )}\n\n {showTaskSelect && isAdminOrStaff && (\n {this.renderTasksForm()}
\n \n
\n \n );\n }\n}\n\nFormFooterView.propTypes = {\n scheduleBtnPopoverPlacement: PropTypes.string,\n rating: PropTypes.string,\n status: PropTypes.string,\n call_disposition: PropTypes.string,\n warningMessage: PropTypes.string,\n submitButtonText: PropTypes.string.isRequired,\n submitButtonSendingText: PropTypes.string.isRequired,\n lead: PropTypes.shape({}),\n task: PropTypes.shape({}),\n errors: PropTypes.shape({}),\n schedule: PropTypes.shape({}),\n submitActionsComponent: PropTypes.shape({}),\n internal: PropTypes.bool,\n sending: PropTypes.bool,\n showRatingSelect: PropTypes.bool,\n disabledButton: PropTypes.bool,\n showScheduleButton: PropTypes.bool,\n isEditingMode: PropTypes.bool,\n showPopover: PropTypes.bool,\n setSchedule: PropTypes.func,\n onToggleSharedType: PropTypes.func.isRequired,\n onStatusChange: PropTypes.func.isRequired,\n onCallDispositionChange: PropTypes.func.isRequired,\n setTaskField: PropTypes.func.isRequired,\n onRatingChange: PropTypes.func.isRequired,\n onSubmit: PropTypes.func.isRequired,\n renderPopover: PropTypes.func.isRequired,\n};\n\nFormFooterView.defaultProps = {\n scheduleBtnPopoverPlacement: 'bottom',\n rating: '',\n status: '',\n call_disposition: '',\n lead: {},\n task: {},\n errors: {},\n schedule: {},\n submitActionsComponent: null,\n internal: false,\n sending: false,\n showRatingSelect: false,\n disabledButton: false,\n showScheduleButton: false,\n isEditingMode: false,\n setSchedule: () => {},\n};\n\nexport default FormFooterView;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Container } from 'flux/utils';\nimport { Popover } from 'react-bootstrap';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\nimport SharedEmailForm from '~/components/forms/email_form';\nimport FormFooter from './common/form_footer';\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\nimport { WarningMessage } from '~/components/warnings/GooglePermissionDeniedWarning';\n\nclass EmailForm extends React.Component {\n static getStores() {\n return [LeadDrawerStore];\n }\n\n static calculateState() {\n return {\n leadDrawerState: LeadDrawerStore.getState(),\n };\n }\n\n constructor(props) {\n super(props);\n\n const { lead, email, schedule } = this.props;\n const { currentUser } = Rails.helpers;\n\n this.state = {\n email: {\n id: email?.id || null,\n subject: email?.subject || '',\n body: email?.body || '',\n cc_emails: email?.cc_emails || '',\n attachment_ids: email?.attachment_ids || '',\n },\n status: lead.status,\n schedule: schedule || { customOptions: { timezone: currentUser.timezone } },\n sending: false,\n showPopover: false,\n warningMessage: '',\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.leadStoreListener = LeadDrawerStore.addListener(this.onLeadStoreChange);\n const { email, schedule } = this.props;\n\n this.setState((prevState) => ({\n email: { ...prevState.email, ...email },\n schedule: { ...prevState.schedule, ...schedule },\n scheduleEmailsAllowed: checkFeatureFlag(process.env.ALLOW_SCHEDULE_EMAILS_FLAG),\n }));\n }\n\n componentDidUpdate(prevProps) {\n const { email, schedule } = this.props;\n if (schedule !== prevProps.schedule || email?.id !== prevProps.email?.id) {\n this.setState((prevState) => ({\n email: { ...prevState.email, ...email },\n schedule,\n }));\n }\n }\n\n componentWillUnmount() {\n if (this.leadStoreListener) this.leadStoreListener.remove();\n\n this.setState({\n email: {\n id: null,\n subject: '',\n body: '',\n cc_emails: '',\n attachment_ids: '',\n },\n status: '',\n schedule: {},\n });\n }\n\n onFormSubmit = (e) => {\n e.preventDefault();\n\n const { lead } = this.props;\n const { schedule, email } = this.state;\n\n this.setState({ sending: true });\n\n const errors = this.validate();\n if (Object.keys(errors).length === 0) {\n const _footer = this.footer.serialize();\n const _attrs = {\n ..._footer,\n email: {\n ...email,\n internal: _footer.internal,\n schedule,\n },\n };\n\n if (email?.id) {\n LeadDrawerActions.updateLeadEmail(lead, email.id, _attrs);\n } else {\n LeadDrawerActions.createLeadEmail(lead, _attrs)\n .catch((error) => {\n const errorMsg = error.response?.body?.errors\n || 'An error occurred while checking permissions for email,'\n + 'please try again later.';\n this.setState({\n warningMessage: errorMsg,\n showPopover: true,\n });\n })\n .finally(() => {\n this.setState({ sending: false });\n });\n }\n } else {\n this.setState({ sending: false });\n }\n }\n\n renderPopover = (props) => {\n const { warningMessage } = this.state;\n\n return (\n \n {isAdminOrStaff && (\n internal ? (\n \n \n \n ) : (\n \n \n \n )\n )}\n
\n \n
\n \n {submitActionsComponent || (\n <>\n
\n \n {submitButtonText === 'Send with Google' ? (\n <>\n \n \n {sending ? (\n \n \n {sending ? (\n \n
\n \n )}\n \n \n\n
\n );\n};\n\nLabelingForm.propTypes = {\n leadID: PropTypes.number.isRequired,\n onLabelCreated: PropTypes.func,\n};\n\nLabelingForm.defaultProps = {\n onLabelCreated: () => {},\n};\n\nexport default LabelingForm;\n","import autoBind from 'react-autobind';\nimport React from 'react';\n\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport ActivityEditor from '~/components/forms/HtmlEditors/ActivityEditor';\nimport TimeSelect from '~/components/forms/dropdowns/TimeSelect';\nimport FormFooter from './common/form_footer';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport InsertDocumentButton from '~/components/insert_document_button';\n\nconst CurrentDate = Moment().startOf('day').toDate();\n\nclass LogAppointmentForm extends React.Component {\n constructor(props) {\n super(props);\n\n const { lead } = this.props;\n\n this.state = {\n occurred_at_date: Moment().local(),\n occurred_at_time: null,\n status: lead.status,\n internal: GlobalContainer.product() === 'retention',\n rating: props.lead.rating,\n errors: {},\n };\n\n autoBind(this);\n }\n\n onChangeDate(m) {\n this.setState({ occurred_at_date: m });\n };\n\n onFormSubmit = (e) => {\n e.preventDefault();\n const { body, occurred_at_date } = this.state;\n const { lead } = this.props;\n\n this.setState({ sending: true });\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n const date = Moment(occurred_at_date)\n .set('hour', 0)\n .set('minutes', 0)\n .set('second', 0);\n\n const footer = this.footer.serialize();\n const {\n status,\n rating,\n task,\n internal,\n notify,\n } = footer;\n\n const data = {\n status,\n rating,\n task,\n event: 'appointment',\n activity: {\n body,\n occurred_at: date,\n internal,\n },\n };\n\n LeadDrawerActions.createLeadActivity(lead, data);\n } else {\n this.setState({ sending: false, errors });\n }\n };\n\n validate() {\n const { occurred_at_date } = this.state;\n const errors = {};\n\n if (!occurred_at_date) {\n errors.occurred_at_date = \"Can't be empty\";\n }\n\n return this.footer.validate(errors);\n }\n\n render() {\n const { lead } = this.props;\n const {\n errors,\n occurred_at_date,\n status,\n internal,\n rating,\n occurred_at_time,\n linksToInsert,\n } = this.state;\n const userTimezone = LeadHelpers.tzAbbr(Moment.tz.guess());\n\n return (\n \n );\n }\n}\n\nexport default LogAppointmentForm;\n","import React from 'react';\nimport NoteForm from './note_form';\n\nconst LogTextMessageForm = ({ ...props }) => (\n {error &&
\n \n
\n );\n }\n\n render() {\n const {\n errors,\n sending,\n disabledButton,\n body,\n templateBody,\n smsNumber,\n subscription,\n status,\n smsMessage,\n internal,\n media_url,\n media,\n schedule,\n scheduleSmsMessageAllowed,\n linksToInsert,\n } = this.state;\n const { lead, scheduleBtnPopoverPlacement } = this.props;\n const mediaName = media?.name || media?.title;\n const restrictedUnverifiedNumbers = this.isRestrictionForUnverifiedNumbersEnabled;\n const showVerifiedTextingWarning = restrictedUnverifiedNumbers && !smsNumber?.verified_texting;\n const showA2PWarning = restrictedUnverifiedNumbers && smsNumber?.verified_texting && !smsNumber?.a2p_approved;\n\n if (subscription && smsNumber) {\n return (\n \n );\n }\n\n return (\n \n {\n e.preventDefault();\n this.setState({ media: null, media_url: null });\n }}\n >\n
\n \n
\n \n
\n );\n }\n pickerView = \n {_lodash.map(availablePhoneNumbers, (num) => (\n
\n \n {\n this.setState({\n serviceNumber: num,\n });\n }}\n >\n {LeadHelpers.renderPhoneNumber(num)}\n \n
\n ))}\n \n \n Next 30\n \n
\n {nums}
;\n } else if (searching) {\n pickerView = (\n \n \n
\n );\n }\n\n renderPhonePairForm() {\n const {\n errors, forwardNumber, serviceNumber, submitting,\n } = this.state;\n\n return (\n \n
\n\n {pickerView}\n Pick your phone number
\n\n First, select the area code of the phone number that will\n be assigned to you.\n
\n\n
\n \n {\n e.preventDefault();\n }}\n >\n {\n this.state.phone_number_area_code = e.target.value;\n if (e.target.value.length !== 3) { e.target.value = e.target.value.slice(0, 3); }\n this.onPhoneNumberSearch();\n }}\n />\n \n
\n \n
\n );\n }\n\n renderOnboardPhoneNumber() {\n const { serviceNumber } = this.state;\n\n if (serviceNumber) {\n return this.renderPhonePairForm();\n }\n return this.renderPhonePicker();\n }\n\n renderOnboardSubscription() {\n return (\n Now add your mobile number
\n\n
\n\n \n \n {\n this.state.forwardNumber = v;\n }}\n specialLabel={false}\n inputProps={{\n className: classNames('phone form-control', {\n 'has-error': !!errors.forward_number,\n }),\n }}\n />\n
\n \n \n
\n \n
\n \n {LeadHelpers.renderPhoneNumber(serviceNumber)}\n
\n \n
\n \n {!_lodash.isEmpty(errors) &&
\n \n
\n \n {\n this.setState({ serviceNumber: undefined, errors: {}});\n }}\n >\n Cancel\n \n {submitting ? (\n \n \n Start Texting\n \n )}\n
\n \n
\n );\n }\n\n renderMissingSubscription() {\n return (\n Set up your Text Message subscription
\n\n How does it work?\n {' '}\n Just send a text here,\n replies will be forwarded to your mobile phone, and\n everything will be tracked in Brokerkit.\n
\n \n Change Subscription Plan\n \n\n
\n );\n }\n\n render() {\n const { loading, view } = this.state;\n\n if (loading) {\n return (\n \n \n Add billing info to set up Text Message\n
\n\n Before you can grab a phone number and start texting with\n Brokerkit, billing info needs to be added to your account.\n
\n \n Add Billing Info\n \n{error}
);\n }\n\n return [];\n });\n\n if (generalErrorsList.length > 0) {\n errorComponents.push(\n\n {generalErrorsList}\n
,\n );\n }\n\n return errorComponents;\n};\n\nconst LeadDrawerCampaignSubscriptions = ({ lead }) => {\n const [subscriptions, setSubscriptions] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [errors, setErrors] = useState(null);\n const [unverifiedNumbersWarning, setUnverifiedNumbersWarning] = useState(false);\n const isOpenLocalStorage = localStorage.isDetailsOpen;\n const [isOpen, setIsOpen] = useState(isOpenLocalStorage ? JSON.parse(isOpenLocalStorage) : false);\n\n useEffect(() => {\n const loadSubscriptions = async () => {\n await CampaignSubscriptionActions.loadCampaignSubscriptions(\n lead.id,\n );\n };\n\n setTimeout(loadSubscriptions, 0);\n\n const subscription = CampaignSubscriptionStore.addListener(() => {\n const state = CampaignSubscriptionStore.getState();\n\n setSubscriptions(state.subscriptions);\n setIsLoading(state.loadingCampaignSubscriptions);\n setErrors(state.subscriptionErrors);\n\n switch (state.lastCampaignSubscriptionStoreAction) {\n case 'createCampaignSubscriptionDone':\n case 'updateCampaignSubscriptionDone':\n case 'deleteCampaignSubscriptionDone':\n setTimeout(loadSubscriptions, 0);\n break;\n default:\n break;\n }\n });\n\n return () => subscription.remove();\n }, [lead.id]);\n\n useEffect(() => {\n const loadSubscriptions = async () => {\n await CampaignSubscriptionActions.loadCampaignSubscriptions(\n lead.id,\n );\n };\n\n const leadDrawer = LeadDrawerStore.addListener(() => {\n const state = LeadDrawerStore.getState();\n\n switch (state.leadDrawerStoreAction) {\n case 'updateLeadDone':\n setTimeout(loadSubscriptions, 0);\n break;\n default:\n break;\n }\n });\n\n return () => leadDrawer.remove();\n }, [lead.id]);\n\n const handleCampaignSelect = (selectedOption) => {\n if (!selectedOption) return;\n\n const campaignID = selectedOption.value;\n\n validateSmsCampaignStepsWithUnverifiedNumbers(campaignID).then((validationPassed) => {\n if (!validationPassed) return;\n\n CampaignSubscriptionActions.createCampaignSubscription(lead.id, {\n campaign_id: campaignID,\n });\n });\n };\n\n const validateSmsCampaignStepsWithUnverifiedNumbers = async (campaignId) => {\n const isRestrictionForUnverifiedNumbersEnabled = checkFeatureFlag(process.env.BLOCK_UNVERIFIED_NUMBERS_FLAG);\n\n if (!isRestrictionForUnverifiedNumbersEnabled) return true;\n\n try {\n const response = await APIRequest.get({\n resource: `/v1/campaigns/${campaignId}/check_campaign_for_unverified_numbers`,\n });\n\n const unferifiedNumbersInSteps = response.body?.unferifiedNumbersInSteps;\n\n if (unferifiedNumbersInSteps) {\n setUnverifiedNumbersWarning(true);\n\n return false;\n }\n\n setUnverifiedNumbersWarning(false);\n return true;\n } catch (error) {\n setUnverifiedNumbersWarning(false);\n return false;\n }\n };\n\n const renderLoading = () => (\n \n
\n );\n\n const onCollapseClick = (e) => {\n e.preventDefault();\n\n setIsOpen(!isOpen);\n localStorage.isDetailsOpen = !isOpen;\n };\n\n const renderLeadCampaignSubscriptions = () => {\n if (!Rails.abilities.manageLead) return null;\n\n if (isLoading) {\n return renderLoading();\n }\n\n return subscriptions.map((subscription) => (\n \n
\n\n \n Campaigns\n \n
\n\n
\n\n \n Your campaign includes a text step, but the sender's\n phone number is not linked to an approved verified texting use case.\n To assign this campaign, please select a phone number in the\n text step(s) which are linked to an approved verified texting use case.\n
\n )}\n\n \n\n {renderLeadCampaignSubscriptions()}\n
\n
\n );\n};\n\nLeadDrawerForms.defaultProps = {\n currentForm: null,\n lead: null,\n};\n\nLeadDrawerForms.propTypes = {\n currentForm: PropTypes.string,\n lead: PropTypes.shape({}),\n};\n\nexport default LeadDrawerForms;\n","import classNames from 'classnames';\nimport React, { Component, createRef } from 'react';\nimport { Link } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport { Tooltip } from 'reactstrap';\nimport autoBind from 'react-autobind';\nimport ReactDOM from 'react-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n Popover,\n Button,\n OverlayTrigger,\n} from 'react-bootstrap';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport brokerbit from '~/lib/brokerbit';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\nimport TaskStore from '~/stores/task_store';\nimport APIRequest from '~/lib/api_request';\nimport ReassignLeadModal from '~/components/modals/reassign_lead_modal';\nimport StatusSelect from '~/components/forms/dropdowns/StatusSelect';\nimport {\n BucketSelect,\n LeadBucketAndRoleSelect,\n} from '~/components/forms/lead_fields';\nimport {\n WarningMessage,\n checkGoogleScopes,\n} from '~/components/warnings/GooglePermissionDeniedWarning';\n\nconst team = Rails.helpers.currentTeam;\nlet leadStoreListener;\nlet taskStoreListener;\n\nclass LeadDrawerHeader extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n this.state = {\n tooltips: {\n call: false,\n email: false,\n appt: false,\n },\n errors: {},\n warningMessage: null,\n showEmailPopover: false,\n showApptPopover: false,\n };\n this.ref = createRef();\n this.popoverTarget = createRef();\n this.handleButtonClick = this.handleButtonClick.bind(this);\n }\n\n hideEmailPopover() {\n this.setState({ showEmailPopover: false });\n }\n\n hideApptPopover() {\n this.setState({ showApptPopover: false });\n }\n\n componentDidMount() {\n leadStoreListener = LeadDrawerStore.addListener(\n this.onStoreChange,\n );\n taskStoreListener = TaskStore.addListener(this.onStoreChange);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { leadDrawerStoreAction } = nextProps;\n\n const LeadDrawerStoreState = LeadDrawerStore.getState();\n const { errors } = LeadDrawerStoreState;\n\n if (leadDrawerStoreAction === 'updateLeadFail' && errors) {\n this.setState({ errors });\n } else {\n this.setState({ errors: {} });\n }\n }\n\n componentDidUpdate(prevProps) {\n const { lead } = this.props;\n\n // Check if there's a change in the lead status\n if (lead && prevProps.lead && (lead.recruiting !== prevProps.lead.recruiting || lead.retention !== prevProps.lead.retention)) {\n this.handleLeadStatusChange();\n }\n }\n\n componentWillUnmount() {\n if (leadStoreListener) leadStoreListener.remove();\n if (taskStoreListener) taskStoreListener.remove();\n }\n\n handleLeadStatusChange() {\n const { lead } = this.props;\n let url = '';\n\n // Determine the URL based on some condition\n if (GlobalContainer.product() === 'retention' && lead.recruiting) {\n url = `/recruiter/today?lead=${lead.id}&_t=${lead.team_id}`;\n } else if (GlobalContainer.product() === 'recruiting' && lead.retention) {\n url = `/retention/today?lead=${lead.id}&_t=${lead.team_id}`;\n }\n\n // Defer the URL update\n if (url) {\n setTimeout(() => {\n browserHistory.push(url);\n }, 0); // SetTimeout with 0 delay to defer the execution until the stack is clear\n }\n }\n\n handleReassignLeadClick(e) {\n e.preventDefault();\n\n const { lead } = this.props;\n\n ReactDOM.render(\n {form}
\n \n {message}\n \n {linkText}\n \n
\n );\n }\n\n getLimitAlert() {\n const { errors } = this.state;\n\n return errors?.reached_users_limit ? (\n \n You are unable to add another user with the Admin or Staff\n role at this time as you are at the current limit of your\n pricing plan. Please email us at\n \n help@getbrokerkit.com\n \n {' '}\n to upgrade your pricing plan to enable additional users.\n
\n ) : null;\n }\n\n getArchivedAlert() {\n const { lead } = this.props;\n\n return lead.archived ? (\n \n {this.getLimitAlert()}\n\n
\n ) : null;\n }\n\n renderAlert() {\n return this.getArchivedAlert() || null;\n }\n\n renderCallButton() {\n const { lead, handleOpenDialer } = this.props;\n const { tooltips } = this.state;\n\n if (!Rails.abilities.manageLead) return null;\n\n return (\n <>\n {lead.phone || lead.other_phone || lead.office_phone ? (\n \n This lead has been archived and will be hidden everywhere\n except Archived.\n {Rails.abilities.manageLead && (\n \n Un-Archive\n \n )}\n
\n \n \n
\n ) : (\n \n {lead.phone && (\n {\n e.preventDefault();\n handleOpenDialer(lead.phone);\n }}\n >\n Cell Phone\n \n )}\n\n {lead.other_phone && (\n {\n e.preventDefault();\n handleOpenDialer(lead.other_phone);\n }}\n >\n Other Phone\n \n )}\n\n {lead.office_phone && (\n {\n e.preventDefault();\n handleOpenDialer(lead.office_phone);\n }}\n >\n Office Phone\n \n )}\n
\n \n \n \n {lead.email ? (\n warningMessage ? (\n \n this.handleButtonClick('Email', e)}\n ref={this.popoverTarget}\n >\n this.handleButtonClick('Email', e)}\n >\n this.setState({ tooltips: { email: true } })}\n onMouseLeave={() => this.setState({ tooltips: { email: false } })}\n onClick={(e) => this.handleButtonClick('Email', e)}\n >\n {\n e.preventDefault();\n this.handleSwitchForm('text-message');\n }}\n >\n {\n this.setState({ tooltips: { texting: true } });\n }}\n onMouseLeave={() => {\n this.setState({ tooltips: { texting: false } });\n }}\n onClick={(e) => {\n e.preventDefault();\n }}\n >\n \n this.handleButtonClick('appointment', e)}\n >\n this.handleButtonClick('appointment', e)}\n >\n \n \n Contact's phone required\n \n \n Contact's email required\n \n \n\n {GlobalContainer.product() !== 'retention' && (\n {\n e.preventDefault();\n this.handleSwitchForm('log-appointment');\n }}\n >\n {\n e.preventDefault();\n this.handleSwitchForm('add-task');\n }}\n >\n
\n );\n }\n\n renderLeadActions() {\n const { lead, query, currentForm } = this.props;\n\n const role = lead.team_member && lead.team_member.role;\n const isRetention = GlobalContainer.product() === 'retention';\n\n return (\n \n
\n );\n }\n\n renderNoteActions() {\n const { currentForm } = this.props;\n\n return (\n \n {!currentForm && !isRetention && (\n
\n \n \n \n {\n e.preventDefault();\n this.handleSwitchForm('phone-call');\n }}\n >\n {\n e.preventDefault();\n this.handleSwitchForm('log-text-message');\n }}\n >\n {\n e.preventDefault();\n this.handleSwitchForm('email-sent');\n }}\n >\n {\n e.preventDefault();\n this.handleSwitchForm('general-note');\n }}\n >\n
\n \n );\n }\n\n renderRoles() {\n const { lead } = this.props;\n\n if (!lead.team_member || !lead.team_member.role) return null;\n\n let className;\n switch (lead.team_member.role.name) {\n case 'admin':\n className = 'badge badge-outline-green';\n break;\n case 'staff':\n className = 'badge badge-outline-yellow';\n break;\n case 'agent':\n className = 'badge badge-outline-blue';\n break;\n case 'affiliate':\n className = 'badge badge-outline-gray';\n break;\n default:\n return null;\n }\n\n return (\n \n {lead.today_tasks && (\n
\n );\n }\n\n render() {\n const { loadingLead, lead, currentForm } = this.props;\n const { errors } = this.state;\n\n if (!lead) {\n return \n \n There is a task due for this\n {' '}\n {contact}\n {' '}\n today\n \n
\n )}\n\n {lead.past_tasks && (\n \n \n There is a task for this\n {' '}\n {contact}\n {' '}\n past the due date\n \n
\n )}\n\n {lead.future_tasks && (\n \n \n This\n {' '}\n {contact}\n {' '}\n has a task due in the future\n \n
\n )}\n No lead loaded
;\n }\n\n let loadingSpinner;\n if (loadingLead) {\n loadingSpinner = (\n\n
\n );\n\n if (Rails.abilities.manageLead === false) {\n leadDrawerActions = (\n \n
\n \n {this.renderMainActions()}\n {this.renderNoteActions()}\n
\n \n {this.renderLeadActions()}\n
\n \n
\n \n );\n }\n\n const showReassign = team\n && team.organization_id\n && lead.role_type !== 'internal'\n && Rails.abilities.reassign;\n\n return (\n \n
\n \n
\n \n \n \n {\n e.preventDefault();\n this.handleSwitchForm('general-note');\n }}\n >\n
\n \n \n {errors.status}\n
\n )}\n\n {Rails.abilities.manageLead && this.renderAlert()}\n {Rails.abilities.manageLead && this.renderTaskAlert()}\n\n {leadDrawerActions}\n \n );\n }\n}\n\nLeadDrawerHeader.defaultProps = {\n loadingLead: false,\n leadDrawerStoreAction: null,\n lead: null,\n query: null,\n currentForm: null,\n switchForm: () => false,\n handleOpenDialer: () => false,\n};\n\nLeadDrawerHeader.propTypes = {\n loadingLead: PropTypes.bool,\n leadDrawerStoreAction: PropTypes.string,\n lead: PropTypes.shape({}),\n query: PropTypes.shape({}),\n currentForm: PropTypes.string,\n switchForm: PropTypes.func,\n handleOpenDialer: PropTypes.func,\n};\n\nexport default LeadDrawerHeader;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Collapse from 'react-bootstrap/Collapse';\nimport APIRequest from '~/lib/api_request';\nimport LabelingForm from './forms/labeling_form';\nimport LeadDrawerLabel from './details/lead_drawer_label';\n\nconst LeadDrawerLabels = ({ lead }) => {\n const canManageLead = Rails.abilities.manageLead;\n const isOpenLocalStorage = localStorage.isDetailsOpen;\n const [isOpen, setIsOpen] = useState(isOpenLocalStorage ? JSON.parse(isOpenLocalStorage) : false);\n const [labels, setLabels] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const fetchLabels = useCallback(async () => {\n if (!lead?.id) return;\n\n setIsLoading(true);\n\n try {\n const request = APIRequest.get({\n resource: `/v1/leads/${lead.id}/labels`,\n });\n\n const response = await new Promise((resolve, reject) => {\n request.end((error, res) => {\n if (error) reject(error);\n else resolve(res);\n });\n });\n\n setLabels(response.body);\n } catch (error) {\n console.error('Error loading labels:', error);\n } finally {\n setIsLoading(false);\n }\n }, [lead?.id]);\n\n useEffect(() => {\n const abortController = new AbortController();\n\n const loadData = async () => {\n await fetchLabels();\n };\n\n loadData();\n\n return () => {\n abortController.abort();\n };\n }, [fetchLabels]);\n\n const handleLabelCreated = useCallback((newLabel) => {\n setLabels((prevLabels) => [newLabel, ...prevLabels]);\n }, []);\n\n const handleLabelRemoved = useCallback((removedLabel) => {\n setLabels((prevLabels) => prevLabels.filter((label) => label.id !== removedLabel.id));\n }, []);\n\n const onCollapseClick = useCallback((e) => {\n e.preventDefault();\n const newIsOpen = !isOpen;\n setIsOpen(newIsOpen);\n localStorage.isDetailsOpen = newIsOpen;\n }, [isOpen]);\n\n const renderLoading = () => (\n \n
\n\n {errors.status && (\n \n \n \n {LeadHelpers.renderLeadName(lead)}\n {this.renderRoles()}\n {loadingSpinner}\n \n {showReassign && (\n \n
\n
\n \n \n {LeadHelpers.renderLeadName(lead)}\n {this.renderRoles()}\n {loadingSpinner}\n \n {showReassign && (\n \n \n \n )}\n
\n \n {this.renderStatus()}\n
\n \n
\n );\n\n const renderLeadLabels = () => {\n if (isLoading) return renderLoading();\n\n if (!labels || labels.length === 0) {\n return (\n \n No labels\n
\n );\n }\n\n return labels.map((label) => (\n \n \n \n
\n );\n};\n\nLeadDrawerLabels.defaultProps = {\n lead: null,\n};\n\nLeadDrawerLabels.propTypes = {\n lead: PropTypes.shape({}),\n};\n\nexport default LeadDrawerLabels;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Collapse } from 'reactstrap';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport { initWebSpellChecker } from '~/lib/web_spell_checker';\n\nconst LeadDrawerNotes = ({ leadDrawerStoreAction, lead }) => {\n const isOpenLocalStorage = localStorage.isDetailsOpen;\n const [isOpen, setIsOpen] = useState(isOpenLocalStorage ? JSON.parse(isOpenLocalStorage) : false);\n const [editing, setEditing] = useState(false);\n const { manageLead, manageNotes } = Rails.abilities;\n const noteRef = useRef(null);\n\n useEffect(() => {\n if (leadDrawerStoreAction === 'updateLeadDone') {\n setEditing(false);\n }\n }, [leadDrawerStoreAction]);\n\n useEffect(() => {\n const ele = noteRef.current\n if (ele) initWebSpellChecker(ele);\n }, [editing]);\n\n const toggleEditing = (newState) => (e) => {\n e.preventDefault();\n setEditing(newState);\n };\n\n const onCollapseClick = (e) => {\n e.preventDefault();\n\n setIsOpen(!isOpen);\n localStorage.isDetailsOpen = !isOpen;\n };\n\n const onNoteSubmit = (e) => {\n e.preventDefault();\n const note = document.getElementById('lead_note').value;\n LeadDrawerActions.updateLead({ id: lead.id, note });\n };\n\n const onSave = (e) => {\n e.preventDefault();\n\n setEditing(false);\n setIsOpen(false);\n };\n\n let noteContent;\n let noteButton;\n\n if (editing) {\n noteContent = (\n \n Labels\n \n
\n\n\n
\n \n {canManageLead && (\n
\n\n {renderLeadLabels()}
\n \n
\n\n \n \n
\n \n );\n noteButton = (\n {lead.note}
;\n noteButton = (\n\n \n {noteContent}\n \n
\n );\n};\n\nLeadDrawerNotes.defaultProps = {\n leadDrawerStoreAction: null,\n lead: null,\n};\n\nLeadDrawerNotes.propTypes = {\n leadDrawerStoreAction: PropTypes.string,\n lead: PropTypes.shape({}),\n};\n\nexport default LeadDrawerNotes;\n","import React, {\n useState,\n useEffect,\n useCallback,\n useRef,\n useMemo,\n} from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Tabs, Tab } from 'react-bootstrap';\n\nimport APIRequest from '~/lib/api_request';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\nimport CampaignSubscriptionStore from '~/stores/campaign_subscription_store';\nimport GlobalContainer from '~/components/global_container';\nimport TaskStore from '~/stores/task_store';\nimport Activities from './timeline/Activities';\n\nconst tabs = [\n 'all',\n 'notes',\n 'emails',\n 'calls',\n 'texts',\n 'tasks',\n 'appointments',\n 'changes',\n];\n\nconst LeadDrawerTimeline = ({ lead, setCurrentFormWithData }) => {\n const [activeTab, setActiveTab] = useState(GlobalContainer.urlParams()?.tab || 'all');\n const [expanded, setExpanded] = useState(false);\n const [hideOlderThan, setHideOlderThan] = useState(new Date());\n\n const [activities, setActivities] = useState([]);\n const [loadingActivities, setLoadingActivities] = useState(false);\n const [errors, setErrors] = useState(null);\n const [nextPage, setNextPage] = useState(null);\n const [prevPage, setPrevPage] = useState(null);\n const [activitiesCount, setActivitiesCount] = useState(0);\n\n const isMounted = useRef(true);\n\n const attachStoreListener = useCallback(\n (store, actions, lastActionProperty) => {\n const listener = store.addListener(() => {\n const state = store.getState();\n\n if (actions.includes(state[lastActionProperty])) {\n fetchLeadActivities(lead.id, activeTab);\n }\n });\n\n return () => listener.remove();\n },\n [lead.id, activeTab, fetchLeadActivities],\n );\n\n const toggleActivityInternal = (activityId, newInternalValue) => {\n setActivities((prevActivities) => prevActivities.map((activity) => (activity.id === activityId ? { ...activity, internal: newInternalValue } : activity)));\n };\n\n const removeActivityFromList = (activityId) => {\n setActivities((prevActivities) => prevActivities.filter((activity) => activity && activity.id !== activityId));\n };\n\n useEffect(() => attachStoreListener(\n CampaignSubscriptionStore,\n [\n 'createCampaignSubscriptionDone',\n 'deleteCampaignSubscriptionDone',\n ],\n 'lastCampaignSubscriptionStoreAction',\n ), [lead.id, activeTab, attachStoreListener]);\n\n useEffect(() => attachStoreListener(\n TaskStore,\n ['createTaskDone', 'deleteTaskDone'],\n 'lastTaskStoreAction',\n ), [lead.id, activeTab, attachStoreListener]);\n\n useEffect(\n () => attachStoreListener(\n LeadDrawerStore,\n [\n 'updateLeadDone',\n 'updateLeadRoleDone',\n 'createLeadAppointmentDone',\n 'createLeadSmsMessageDone',\n 'createLeadEmailDone',\n 'createLeadActivityDone',\n 'updateLeadActivityDone',\n 'cancelScheduledLeadEmailDone',\n 'updateLeadEmailDone',\n 'updateLeadSmsMessageDone',\n 'cancelScheduledLeadSmsMessageDone',\n ],\n 'leadDrawerStoreAction',\n ),\n [lead.id, activeTab, attachStoreListener],\n );\n\n useEffect(() => () => {\n isMounted.current = false;\n }, []);\n\n useEffect(() => {\n const parseHash = () => {\n if (!window.location.hash) return { objectId: null, objectClass: null };\n\n const [objectId, objectClass] = window.location.hash.substring(1).split('-');\n return { objectId, objectClass };\n };\n\n const { objectId, objectClass } = parseHash();\n\n fetchLeadActivities(lead.id, activeTab, 1, 'init', objectId, objectClass);\n }, [lead.id, activeTab, fetchLeadActivities]);\n\n useEffect(() => {\n setActivities([]);\n }, [lead.id]);\n\n useEffect(() => {\n if (GlobalContainer.product() === 'retention' && lead.joined_at) {\n setExpanded(true);\n const hideOlderThanDate = Moment(lead.joined_at).add(1, 'second').toDate();\n setHideOlderThan(hideOlderThanDate);\n }\n }, [lead.joined_at]);\n\n const loadMoreActivities = useCallback((direction) => {\n if (direction === 'init') {\n fetchLeadActivities(lead.id, 'all', 1, 'init');\n return;\n }\n\n if (!loadingActivities) {\n if (direction === 'next' && nextPage) {\n fetchLeadActivities(lead.id, activeTab, nextPage, 'next');\n } else if (direction === 'prev' && prevPage) {\n fetchLeadActivities(lead.id, activeTab, prevPage, 'prev');\n }\n }\n }, [loadingActivities, nextPage, prevPage, fetchLeadActivities, lead.id, activeTab]);\n\n const fetchLeadActivities = useCallback((leadID, type, page = 1, direction = 'next', objectID = null, objectClass = null) => {\n setLoadingActivities(true);\n setErrors(null);\n\n const queryParams = {\n type,\n page,\n ...(objectID && { object_id: objectID }),\n ...(objectClass && { object_class: objectClass }),\n limit: 20,\n };\n\n const request = APIRequest.get({\n resource: `/v1/leads/${leadID}/activities`,\n data: queryParams,\n }).end((error, response) => {\n if (!isMounted.current) return;\n\n if (error) {\n setErrors((prevErrors) => [...prevErrors, error]);\n } else {\n const {\n activities: leadActivities,\n total_activities: totalActivitiesCount,\n pagy,\n } = response.body;\n\n const newActivities = JSON.parse(leadActivities);\n\n const newPageState = {\n nextPage: pagy?.current_page < pagy?.last_page ? pagy.current_page + 1 : null,\n prevPage: pagy?.current_page > 1 ? pagy.current_page - 1 : null,\n };\n\n setActivitiesCount(totalActivitiesCount);\n if (direction === 'init') setActivities([]);\n setActivities((prev) => {\n const activityMap = new Map();\n (prev || []).forEach((activity) => {\n activityMap.set(activity.id, activity);\n });\n (newActivities || []).forEach((activity) => {\n activityMap.set(activity.id, activity);\n });\n\n return Array.from(activityMap.values());\n });\n\n setNextPage(newPageState.nextPage);\n setPrevPage(newPageState.prevPage);\n }\n\n setLoadingActivities(false);\n });\n\n return () => {\n if (request) request.abort();\n };\n }, []);\n\n const handleTabSelect = (key, e) => {\n if (activeTab === key) return;\n\n e.currentTarget.blur();\n\n setActivities([]);\n\n setActiveTab(key);\n };\n\n const productClass = GlobalContainer.product() === 'retention'\n ? 'retention-activities'\n : 'recruiting-activities';\n\n const memoizedTabs = useMemo(() => (\n \n Referrer Notes\n {' '}\n {(manageLead || manageNotes) && noteButton}\n { !editing && (\n \n )}\n
\nActivity
\n\n {memoizedTabs}\n\n\n
\n );\n\n const renderNoActivities = () => {\n if (!loadingActivities && activities.length === 0 && activeTab !== 'all' && activeTab !== 'changes') {\n return (\n \n
\n );\n }\n return null;\n };\n\n const validActivities = activities.filter((activity) => activity !== null);\n\n const renderActivityEntries = useCallback((activity, isLoading, index, editFormOpen) => {\n if (!activity) {\n return null;\n }\n\n return (\n No activities found for this tab.
\n\n \n {beforeActivities.length}\n {' '}\n older activities, click to show recruiting history\n \n
\n );\n\n const HideButton = ({ onClick }) => (\n \n \n Hide recruiting history\n \n
\n );\n\n const toggleAfterActivities = () => {\n setShowAfterActivities(!showAfterActivities);\n };\n\n const combinedActivities = showAfterActivities\n ? [...afterActivities, ...beforeActivities]\n : [...afterActivities];\n\n infiniteScrollRef.current?.forceUpdateList();\n\n const renderInfiniteScroll = (items) => (\n \n {(showAfterActivities ? (\n
\n \n {combinedActivities.length > 0\n ? renderInfiniteScroll(combinedActivities)\n : renderNoActivities()}\n
\n \n );\n }\n\n return (\n \n {sortedActivities.length > 0\n ? renderInfiniteScroll(sortedActivities)\n : renderNoActivities()}\n
\n );\n};\n\nActivities.propTypes = {\n loadingActivities: PropTypes.bool.isRequired,\n activities: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n activeTab: PropTypes.string.isRequired,\n hideOlderThan: PropTypes.instanceOf(Date).isRequired,\n expanded: PropTypes.bool.isRequired,\n setExpanded: PropTypes.func.isRequired,\n lead: PropTypes.shape({}).isRequired,\n setCurrentFormWithData: PropTypes.func.isRequired,\n};\n\nexport default Activities;\n","import TimelineActivityAppointment from '~/components/drawers/timeline/activity_appointment';\nimport TimelineActivityAppointmentSent from '~/components/drawers/timeline/activity_appointment_sent';\nimport TimelineActivityRetention from '~/components/drawers/timeline/activity_retention';\nimport TimelineActivityNote from '~/components/drawers/timeline/activity_note';\nimport TimelineActivityMerge from '~/components/drawers/timeline/activity_merge';\nimport TimelineActivityPhoneCall from '~/components/drawers/timeline/activity_phone_call';\nimport TimelineActivityEmail from '~/components/drawers/timeline/activity_email';\nimport TimelineActivityEmailSent from '~/components/drawers/timeline/activity_email_sent';\nimport TimelineActivityStatus from '~/components/drawers/timeline/activity_status';\nimport TimelineActivityBucket from '~/components/drawers/timeline/activity_bucket';\nimport TimelineActivityTextMessage from '~/components/drawers/timeline/activity_text_message';\nimport TimelineActivitySmsConversation from '~/components/drawers/timeline/activity_sms_conversation';\nimport TimelineActivityCampaignSubscription from '~/components/drawers/timeline/activity_campaign_subscription';\nimport TimelineActivityReassign from '~/components/drawers/timeline/activity_reassign';\nimport TimelineActivityTask from '~/components/drawers/timeline/activity_task';\nimport TimelineActivityReleasePhoneNumber from '~/components/drawers/timeline/activity_release_phone_number';\nimport TimelineActivityLeadUpdate from '~/components/drawers/timeline/activity_lead_update';\nimport TimelineActivityReferrerUpdate from '~/components/drawers/timeline/activity_referrer_update';\nimport TimelineActivityResume from '~/components/drawers/timeline/activity_resume';\nimport TimelineActivityMessageScheduled from '~/components/drawers/timeline/activity_message_scheduled';\nimport TimelineActivityDocument from '~/components/drawers/timeline/activity_document';\n\nconst ActivityComponentMap = {\n 'lead.create_task': { Component: TimelineActivityTask, props: { color: 'text-green' } },\n 'lead.destroy_task': { Component: TimelineActivityTask, props: { color: 'text-red' } },\n 'lead.update_task': { Component: TimelineActivityTask, props: { color: 'text-green' } },\n 'lead.status': { Component: TimelineActivityStatus },\n 'lead.bucket': { Component: TimelineActivityBucket },\n 'lead.note': { Component: TimelineActivityNote },\n 'lead.merge': { Component: TimelineActivityMerge },\n 'lead.reassign': { Component: TimelineActivityReassign },\n 'lead.phone_call': { Component: TimelineActivityPhoneCall },\n 'lead.text_message': { Component: TimelineActivityTextMessage },\n 'lead.sms_conversation': { Component: TimelineActivitySmsConversation },\n 'lead.appointment_sent': { Component: TimelineActivityAppointmentSent },\n 'lead.appointment_saved': { Component: TimelineActivityAppointmentSent, props: { title: 'Appointment Saved' } },\n 'lead.appointment': { Component: TimelineActivityAppointment },\n 'lead.retention': { Component: TimelineActivityRetention },\n 'lead.email': { Component: TimelineActivityEmail },\n 'lead.email_sent': { Component: TimelineActivityEmailSent },\n 'lead.email_scheduled': {\n Component: TimelineActivityMessageScheduled,\n props: { messageType: 'email', editable: true, title: 'Scheduled Email' },\n },\n 'lead.email_schedule_updated': {\n Component: TimelineActivityMessageScheduled,\n props: { messageType: 'email', editable: true, title: 'Updated Scheduled Email' },\n },\n 'lead.email_schedule_canceled': {\n Component: TimelineActivityMessageScheduled,\n props: {\n messageType: 'email', editable: false, title: 'Scheduled Email Canceled', deletable: false,\n },\n },\n 'lead.campaign_email_sent': { Component: TimelineActivityEmailSent, props: { title: 'Campaign Email Sent' } },\n 'lead.campaign_subscription': { Component: TimelineActivityCampaignSubscription },\n 'lead.campaign_subscription_delete': { Component: TimelineActivityCampaignSubscription },\n 'lead.campaign_subscription.paused_due_to_text_reply': { Component: TimelineActivityCampaignSubscription },\n 'lead.release_phone_number': { Component: TimelineActivityReleasePhoneNumber },\n 'lead.update': { Component: TimelineActivityLeadUpdate },\n 'lead.referrer_changed': { Component: TimelineActivityReferrerUpdate },\n 'lead.create_resume': { Component: TimelineActivityResume, props: { resume_status: 'Resume Uploaded' } },\n 'lead.update_resume': { Component: TimelineActivityResume, props: { resume_status: 'Resume Updated' } },\n 'lead.delete_resume': { Component: TimelineActivityResume, props: { resume_status: 'Resume Deleted' } },\n 'lead.create_document': { Component: TimelineActivityDocument, props: { document_status: 'Document Uploaded' } },\n 'lead.update_document': { Component: TimelineActivityDocument, props: { document_status: 'Document Updated' } },\n 'lead.delete_document': { Component: TimelineActivityDocument, props: { document_status: 'Document Deleted' } },\n 'lead.text_message_scheduled': {\n Component: TimelineActivityMessageScheduled,\n props: {\n messageType: 'sms_message',\n icon: 'comment',\n color: 'text-yellow',\n title: 'Scheduled Text',\n },\n },\n 'lead.text_message_schedule_updated': {\n Component: TimelineActivityMessageScheduled,\n props: {\n messageType: 'sms_message',\n icon: 'comment',\n color: 'text-yellow',\n title: 'Updated Scheduled Text',\n },\n },\n 'lead.text_message_schedule_canceled': {\n Component: TimelineActivityMessageScheduled,\n props: {\n messageType: 'sms_message',\n icon: 'comment',\n color: 'text-yellow',\n editable: false,\n title: 'Scheduled Text Canceled',\n deletable: false,\n },\n },\n};\n\nexport default ActivityComponentMap;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ActivityComponentMap from '~/constants/ActivityComponentMap';\n\nconst Activity = ({\n lead, activity, setCurrentFormWithData, toggleActivityInternal, removeActivity, dispatch, editFormState, forceUpdateList,\n}) => {\n const ActivityComponentInfo = ActivityComponentMap[activity.key];\n\n if (!ActivityComponentInfo) {\n return (\n \n
\n );\n }\n\n const { Component: ActivityComponent, props: activityProps = {} } = ActivityComponentInfo;\n const allProps = {\n activity,\n lead,\n key: `activity-${activity.id}-${activity.updated_at}`,\n ...activityProps,\n setCurrentFormWithData,\n toggleActivityInternal,\n removeActivity,\n dispatch,\n editFormState,\n forceUpdateList,\n };\n\n return \n Missing activity timeline for\n {' '}\n {activity.key}\n
Lead Submitted
\n\n on\n {' '}\n {formattedSubmissionDate}\n
\n\n
\n
\n );\n\n return emailDOM;\n });\n }\n\n renderLeadAgentId() {\n const { lead, warnings } = this.state;\n const leadAgentIdAttributes = lead.lead_agent_ids_attributes.filter((x, i) => !x._destroy);\n\n return leadAgentIdAttributes.map((leadAgentId, index) => {\n const agentIdDOM = (\n \n this.handleEmailChange(e, leadEmail)}\n />\n
\n\n \n this.handleEmailTypeChange(opt, leadEmail)}\n placeholder=\"--- Select ---\"\n className={classNames({\n 'has-error': errors[index]\n ? errors[index].email_type\n : '',\n })}\n />\n
\n\n \n
\n\n \n this.handleMainChange(e, leadEmail)}\n checked={leadEmail.main || false}\n disabled={!leadEmail.main && disableMainCheckbox}\n />\n \n Main\n \n
\n \n \n
\n\n { errors[index] && errors[index].duplicate && (\n \n
\n )}\n { errors[index] && errors[index].email && (\n \n
\n )}\n\n \n \n this.handleMultipleListingServiceChange(\n val,\n leadAgentId,\n )}\n teamMlses\n primaryMls\n clearable\n target={`mls-select-${index}`}\n />\n
\n\n \n this.handleAgentIdChange(e, leadAgentId)}\n />\n
\n\n \n this.handleLeadAgentIdDelete(e, leadAgentId)}\n >\n
\n\n { warnings[index] && warnings[index].multiple_listing_service_ouid && (\n \n
\n )}\n\n { warnings[index] && warnings[index].duplicate && (\n \n
\n )}\n \n );\n\n return agentIdDOM;\n });\n }\n\n render() {\n const {\n lead, errors, duplicates_found_in_org, duplicate_org_accounts, submitting,\n } = this.state;\n const saveButton = approvedForm ? 'Approve & Save' : 'Save';\n\n return (\n \n
\n\n Add Lead
\n\n
\n\n \n \n {\n lead.first_name = v.target.value;\n }}\n />\n { errors.first_name &&
\n\n \n \n {\n lead.last_name = v.target.value;\n }}\n />\n { errors.last_name &&
\n\n \n \n\n {this.renderLeadEmail()}\n\n { errors.emails && (\n
\n\n \n \n {\n lead.phone = v;\n }}\n specialLabel={false}\n inputProps={{\n id: 'phone-number',\n className: classNames('phone form-control', {\n 'has-error': !!errors.phone,\n }),\n }}\n />\n
\n\n \n \n\n {this.renderLeadAgentId()}\n
\n\n {GlobalContainer.product() === 'recruiting' && (\n \n \n {\n lead.currently_at = v.target.value;\n }}\n />\n
\n )}\n\n \n \n\n
\n\n \n {\n lead.production_ytd = v;\n }}\n />\n
\n \n \n\n
\n\n \n {\n lead.production_ltm = v.target.value;\n }}\n />\n
\n \n \n {\n lead.production_label = opt && opt.value;\n }}\n />\n
\n\n {Rails.abilities.manageLead && (\n <>\n \n \n (lead.source = opt && opt.value)}\n />\n
\n\n \n \n (lead.status = opt && opt.value)}\n isInvalid={!!errors.status}\n isSearchable\n />\n\n {errors.status && (\n
\n\n \n \n (lead.rating = opt && opt.value)}\n clearable\n />\n
\n \n )}\n\n {Rails.abilities.manageLead\n && GlobalContainer.product() === 'recruiting' && (\n \n {\n lead.owner_id = opt && opt.value;\n }}\n />\n
\n )}\n\n {Rails.abilities.manageLead\n && GlobalContainer.product() === 'recruiting' && (\n \n {\n lead.referrer_id = opt && opt.value;\n }}\n />\n
\n )}\n\n \n \n {\n lead.note = v.target.value;\n }}\n innerRef={this.notesRef}\n />\n
\n \n \n Cancel\n \n {submitting ? (\n \n \n {saveButton}\n \n )}\n
\n \n
\n );\n\n return emailDOM;\n });\n }\n\n renderLeadAgentId() {\n const { lead, errors, warnings } = this.state;\n const leadAgentIdAttributes = lead.lead_agent_ids_attributes.filter((x, i) => !x._destroy);\n\n return leadAgentIdAttributes.map((leadAgentId, index) => {\n const agentIdDOM = (\n \n this.handleEmailChange(e, leadEmail)}\n />\n
\n\n \n this.handleEmailTypeChange(opt, leadEmail)}\n placeholder=\"--- Select ---\"\n className={classNames({ 'has-error': errors[index] ? errors[index].email_type : '' })}\n />\n
\n\n \n
\n\n \n this.handleMainChange(e, leadEmail)}\n checked={leadEmail.main || false}\n disabled={!leadEmail.main && disableMainCheckbox}\n />\n \n Main\n \n
\n \n \n
\n \n
\n );\n\n return agentIdDOM;\n });\n }\n\n render() {\n const { lead, errors, submitting } = this.state;\n const saveButton = approvedForm ? 'Approve & Save' : 'Save';\n\n return (\n \n );\n }\n}\n\nNewReferralDrawer.contextTypes = {\n helpers: PropTypes.shape({}),\n};\n\nexport default NewReferralDrawer;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport isEmail from 'validator/lib/isEmail';\nimport isMobilePhone from 'validator/lib/isMobilePhone';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Drawer from '~/components/drawers/drawer';\nimport AgentActions from '~/actions/agent_actions';\nimport TeamMembersActions from '~/actions/team_members_actions';\nimport TeamMembersStore from '~/stores/team_members_store';\nimport APIRequest from '~/lib/api_request';\nimport TeamMemberDrawerForm from './team_member_drawer/team_member_drawer_form';\n\nlet approvedForm = false;\n\nclass TeamMemberDrawer extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n teamMember: props.teamMember,\n formData: { allow_duplicates_in_org: false },\n errors: {},\n warnings: {},\n sending: false,\n loadingLimits: true,\n limits: {},\n duplicate_org_accounts: [],\n duplicates_found_in_org: false,\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.listener = TeamMembersStore.addListener(this.handleTeamMember);\n const { teamMember } = this.props;\n\n APIRequest.get({\n resource: '/v1/team_subscription_limits',\n data: {\n role: (teamMember || { role: {} }).role,\n },\n }).end((error, response) => {\n this.setState({ loadingLimits: false }, () => {\n if (!error) {\n const limits = response.body;\n\n this.setState({ limits });\n }\n });\n });\n }\n\n componentWillUnmount() {\n if (this.listener) this.listener.remove();\n }\n\n handleFormChange(formData) {\n this.setState((prevState) => ({\n formData: {\n ...prevState.formData,\n ...formData,\n },\n }));\n }\n\n handleTeamMember() {\n const emailErrors = {};\n const agentIDErrors = {};\n const { duplicate_org_accounts } = this.state;\n const teamMembersState = TeamMembersStore.getState();\n const {\n teamMember, lastTeamMembersStoreAction, errors, sending,\n } = teamMembersState;\n const { helpers } = this.context;\n\n let nextState = { teamMembersState };\n let duplicates_found_in_org = false;\n\n if (lastTeamMembersStoreAction === 'createTeamMemberDone'\n || lastTeamMembersStoreAction === 'updateTeamMemberDone') {\n if (teamMember) {\n if (teamMember.lead) {\n setTimeout(() => {\n helpers.openLeadDrawer({\n loadLeadID: teamMember.lead.id,\n });\n }, 500);\n } else {\n helpers.closeDrawer();\n GlobalContainer.notify(`${teamMember.name} was added successfully`);\n }\n\n setTimeout(() => {\n AgentActions.reloadLeadTables();\n }, 500);\n }\n }\n\n if (lastTeamMembersStoreAction === 'createTeamMemberFail'\n || lastTeamMembersStoreAction === 'updateTeamMemberFail') {\n if (errors.duplicate_emails) {\n errors.duplicate_emails.forEach((e, i) => {\n if (e) {\n if (e.context === 'org') {\n duplicate_org_accounts.push(`${e.match.name}: Email: ${e.value}`);\n duplicates_found_in_org = true;\n }\n\n emailErrors[i] = {\n duplicate: 'It looks like a contact with this email already exists.',\n context: e.context,\n match: e.match,\n };\n }\n });\n }\n\n if (errors.duplicate_agent_ids) {\n errors.duplicate_agent_ids.forEach((e, i) => {\n if (e) {\n if (e.context === 'org') {\n duplicate_org_accounts.push(`${e.match.name}: Agent ID/MLS: ${e.value}`);\n duplicates_found_in_org = true;\n }\n\n agentIDErrors[i] = {\n duplicate: 'It looks like this agent id already exists.',\n context: e.context,\n match: e.match,\n };\n }\n });\n }\n nextState = {\n ...nextState, errors: emailErrors, warnings: agentIDErrors, sending, duplicate_org_accounts, duplicates_found_in_org,\n };\n\n this.setState(nextState);\n }\n }\n\n onSubmit(e) {\n e.preventDefault();\n\n this.setState({ sending: true });\n\n const {\n memberRole, searchQuery, currentPage, notify, teamMember,\n } = this.props;\n const { formData } = this.state;\n\n const isExistingMember = !!formData.id;\n\n const memberData = {\n user: {\n first_name: formData.firstName,\n last_name: formData.lastName,\n notify,\n },\n role: formData.role,\n lead: {\n agent_id: formData.agentId,\n owner_id: formData.owner_id,\n phone: formData.phone,\n production_ytd: formData.productionYtd,\n production_ltm: formData.productionLtm,\n production_label: formData.productionLabel,\n lead_emails_attributes: formData.lead_emails_attributes,\n lead_agent_ids_attributes: formData.lead_agent_ids_attributes,\n allow_duplicates_in_org: formData.allow_duplicates_in_org,\n },\n };\n\n const leadEmailAttributes = formData.lead_emails_attributes.filter((x, i) => !x._destroy);\n const leadAgentIdAttributes = formData.lead_agent_ids_attributes.filter((x, i) => !x._destroy);\n\n if (teamMember && _lodash.isNumber(teamMember.id)) {\n memberData.user.id = teamMember.id;\n }\n\n if (this.validate() && !approvedForm) {\n leadEmailAttributes.forEach((leadEmail) => {\n if (!leadEmail.email) {\n leadEmail._destroy = true;\n }\n });\n\n leadAgentIdAttributes.forEach((leadAgentId) => {\n if (!leadAgentId.agent_id) {\n leadAgentId.multiple_listing_service_ouid = '';\n }\n\n if (!leadAgentId.agent_id && !leadAgentId.multiple_listing_service_ouid) {\n leadAgentId._destroy = true;\n }\n });\n\n this.setState({ duplicate_org_accounts: [] });\n\n if (isExistingMember) {\n TeamMembersActions.updateTeamMember(memberData, memberRole, searchQuery, currentPage);\n } else {\n TeamMembersActions.createTeamMember(memberData, memberRole, searchQuery, currentPage);\n }\n } else {\n this.setState({ sending: false });\n }\n }\n\n onCancel(e) {\n e.preventDefault();\n\n const { helpers } = this.context;\n\n helpers.closeDrawer();\n }\n\n validate() {\n let all_emails_blank = true;\n const { formData, limits } = this.state;\n const errors = {};\n const warnings = {};\n\n const leadEmailAttributes = formData.lead_emails_attributes.filter((x, i) => !x._destroy);\n const leadAgentIdAttributes = formData.lead_agent_ids_attributes.filter((x, i) => !x._destroy);\n const checkedCount = leadEmailAttributes.filter((x, i) => x.main).length;\n\n if (!formData.firstName) {\n errors.first_name = 'This field can not be empty';\n }\n\n if (!formData.lastName) {\n errors.last_name = 'This field can not be empty';\n }\n\n if (!_lodash.isEmpty(formData.phone) && !isMobilePhone(formData.phone, ['en-US'])) {\n errors.phone = 'Is invalid';\n }\n\n if (!formData.role.name) {\n errors.role = 'This field can not be empty';\n }\n\n if (leadEmailAttributes === 0) {\n errors.emails = ['Please add email'];\n }\n\n if (leadEmailAttributes.length > 0 && checkedCount < 1) {\n errors.emails = ['Please select any main email'];\n }\n\n leadEmailAttributes.forEach((leadEmail, index) => {\n if (leadEmail.email) {\n all_emails_blank = false;\n\n if (!isEmail(leadEmail.email)) {\n errors[index] = { email: 'The provided email is invalid' };\n }\n }\n\n if (!leadEmail.email_type) {\n errors[index] = { email_type: \"Can't be empty\" };\n }\n });\n\n if (leadEmailAttributes.length === 0 || all_emails_blank) {\n errors.no_email = ['Please add an email address to create this record so that there is a way to match and update the data later and this email will function as their username'];\n }\n\n leadAgentIdAttributes.forEach((leadAgentId, index) => {\n if (!!leadAgentId.agent_id && !leadAgentId.multiple_listing_service_ouid) {\n warnings[index] = { multiple_listing_service_ouid: 'It is recommended that you select the MLS for this agent ID.' };\n }\n });\n\n if (formData.reached_users_limit && (formData.role.name === 'admin' || formData.role.name === 'staff')) {\n errors.reached_users_limit = true;\n }\n\n if (_lodash.size(errors) === 0 && _lodash.size(warnings) !== 0) {\n approvedForm = !approvedForm;\n } else {\n approvedForm = false;\n }\n\n this.setState({ errors, warnings });\n\n return _lodash.size(errors) === 0;\n }\n\n render() {\n const {\n teamMember, errors, warnings, loadingLimits, limits, sending, duplicate_org_accounts,\n duplicates_found_in_org,\n } = this.state;\n const { externalRolesOnly } = this.props;\n const saveButton = approvedForm ? 'Approve & Save' : 'Save';\n\n let drawerTitle = 'Add Team Member';\n if (teamMember) {\n drawerTitle = 'Edit Team Member';\n }\n\n return (\n \n );\n }\n}\n\nTeamMemberDrawer.contextTypes = {\n helpers: PropTypes.shape({}),\n};\n\nTeamMemberDrawer.defaultProps = {\n memberRole: 'staff',\n searchQuery: '',\n currentPage: 1,\n teamMember: null,\n notify: true,\n externalRolesOnly: false,\n};\n\nTeamMemberDrawer.propTypes = {\n memberRole: PropTypes.string,\n searchQuery: PropTypes.string,\n currentPage: PropTypes.number,\n teamMember: PropTypes.shape({}),\n notify: PropTypes.bool,\n externalRolesOnly: PropTypes.bool,\n};\n\nexport default TeamMemberDrawer;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Input } from 'reactstrap';\nimport PhoneInput from 'react-phone-input-2';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport DuplicateContactCard from '~/components/duplicate_contact_card';\nimport ErrorMessageWithIcon from '~/components/forms/ErrorMessageWithIcon';\n\nimport brokerbit from '~/lib/brokerbit';\nimport Select from '~/components/forms/select';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport CurrencyInput from '~/components/forms/currency_input';\nimport RoleSelect from '~/components/forms/team_fields/role_select';\nimport LeadHelpers from '~/helpers/lead_helpers';\n\nimport { ProductionLabelSelect } from '~/components/forms/lead_fields';\nimport MultipleListingServicesSelect from '~/components/forms/multiple_listing_services_select';\nimport AllowOrgDuplicateCheckBox from '~/components/forms/allow_org_duplicate_checkbox';\nimport {\n TeammatePicker,\n} from '~/components/forms/team_member_picker';\n\nconst defaultEmailTypeOptions = [\n { value: 'office', label: 'Office' },\n { value: 'personal', label: 'Personal' },\n { value: 'other', label: 'Other' },\n];\n\nconst { currentTeam } = Rails.helpers;\nconst teamID = currentTeam ? currentTeam.id : null;\n\nclass TeamMemberDrawerForm extends React.Component {\n constructor(props) {\n super(props);\n\n this.emptyEmail = {\n id: null,\n email: '',\n email_type: 'office',\n main: false,\n team_id: teamID,\n _destroy: false,\n };\n\n this.emptyAgentID = {\n id: null,\n agent_id: '',\n multiple_listing_service_ouid: '',\n _destroy: false,\n };\n\n const { teamMember } = props;\n\n if (teamMember) {\n this.state = {\n id: teamMember.id,\n firstName: teamMember.first_name,\n lastName: teamMember.last_name,\n email: teamMember.email,\n role: teamMember.role,\n owner_id: teamMember.lead ? teamMember.lead.owner_id : Rails.helpers.currentUser.id,\n agentId: teamMember.lead ? teamMember.lead.agent_id : '',\n phone: teamMember.lead ? teamMember.lead.phone : '',\n productionYtd: teamMember.lead ? teamMember.lead.production_ytd : '',\n productionLtm: teamMember.lead ? teamMember.lead.production_ltm : '',\n productionLabel: teamMember.lead ? teamMember.lead.production_label : '',\n allow_duplicates_in_org: false,\n lead_emails_attributes: teamMember.lead ? teamMember.lead.lead_emails_attributes : [{\n id: null,\n email: teamMember.email,\n email_type: 'office',\n team_id: teamID,\n main: true,\n _destroy: false,\n }],\n lead_agent_ids_attributes: teamMember.lead ? teamMember.lead.lead_agent_ids_attributes : [{\n id: null,\n agent_id: '',\n multiple_listing_service_ouid: '',\n _destroy: false,\n }],\n };\n } else {\n this.state = {\n id: '',\n firstName: '',\n lastName: '',\n email: '',\n phone: '',\n agentId: '',\n productionYtd: '',\n productionLtm: '',\n productionLabel: '',\n reached_users_limit: false,\n owner_id: Rails.helpers.currentUser.id,\n role: {\n name: '',\n title: '',\n notification_recruiting: false,\n notification_retention: false,\n },\n allow_duplicates_in_org: false,\n lead_emails_attributes: [{\n id: null,\n email: '',\n email_type: 'office',\n main: true,\n team_id: teamID,\n _destroy: false,\n }],\n lead_agent_ids_attributes: [{\n id: null,\n agent_id: '',\n multiple_listing_service_ouid: '',\n _destroy: false,\n }],\n };\n }\n\n autoBind(this);\n }\n\n componentDidMount() {\n const { handleFormChange } = this.props;\n\n handleFormChange(this.state);\n }\n\n handleLeadEmailDelete(e, leadEmail) {\n e.preventDefault();\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this email?',\n callback: (ok) => {\n if (ok) {\n const { lead_emails_attributes } = this.state;\n\n leadEmail._destroy = true;\n this.setState({ lead_emails_attributes });\n }\n },\n });\n }\n\n handleLeadAgentIdDelete(e, leadAgentId) {\n e.preventDefault();\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this Agent ID?',\n callback: (ok) => {\n if (ok) {\n const { lead_agent_ids_attributes } = this.state;\n\n leadAgentId._destroy = true;\n this.setState({ lead_agent_ids_attributes });\n }\n },\n });\n }\n\n handleAgentIdChange(e, leadAgentId) {\n e.preventDefault();\n\n const { lead_agent_ids_attributes } = this.state;\n const { handleFormChange } = this.props;\n\n leadAgentId.agent_id = e.target.value;\n\n this.setState({ lead_agent_ids_attributes });\n handleFormChange({ lead_agent_ids_attributes });\n }\n\n handleMultipleListingServiceChange(value, leadAgentId) {\n const { lead_agent_ids_attributes } = this.state;\n const { handleFormChange } = this.props;\n\n leadAgentId.multiple_listing_service_ouid = value;\n\n this.setState({ lead_agent_ids_attributes });\n handleFormChange({ lead_agent_ids_attributes });\n }\n\n handleEmailChange(e, leadEmail) {\n e.preventDefault();\n\n const { lead_emails_attributes } = this.state;\n const { handleFormChange } = this.props;\n\n leadEmail.email = e.target.value;\n\n this.setState({ lead_emails_attributes });\n handleFormChange({ lead_emails_attributes });\n }\n\n handleEmailTypeChange(opt, leadEmail) {\n const { lead_emails_attributes } = this.state;\n const { handleFormChange } = this.props;\n\n leadEmail.email_type = opt ? opt.value : '';\n\n this.setState({ lead_emails_attributes });\n handleFormChange({ lead_emails_attributes });\n }\n\n handleMainChange(e, leadEmail) {\n const { lead_emails_attributes } = this.state;\n const { handleFormChange } = this.props;\n\n leadEmail.main = e.target.checked;\n\n this.setState({ lead_emails_attributes });\n handleFormChange({ lead_emails_attributes });\n }\n\n onFirstNameChange(e) {\n e.preventDefault();\n\n const { handleFormChange } = this.props;\n\n const change = {\n firstName: e.target.value,\n };\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onLastNameChange(e) {\n e.preventDefault();\n\n const { handleFormChange } = this.props;\n\n const change = {\n lastName: e.target.value,\n };\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onEmailChange(e) {\n e.preventDefault();\n\n const { handleFormChange } = this.props;\n\n const change = {\n email: e.target.value,\n };\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onPhoneChange(value) {\n const { handleFormChange } = this.props;\n\n const change = {\n phone: value,\n };\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onProductionYtdChange(value) {\n const { handleFormChange } = this.props;\n\n const change = {\n productionYtd: value,\n };\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onProductionLtmChange(e) {\n const { handleFormChange } = this.props;\n\n e.preventDefault();\n\n const change = {\n productionLtm: e.target.value,\n };\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onProductionLabelChange(option) {\n const { handleFormChange } = this.props;\n\n const change = {\n productionLabel: option.value,\n };\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onOwnerChange(opt) {\n const { handleFormChange } = this.props;\n\n const change = {\n owner_id: opt.value,\n };\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onTitleChange(e) {\n e.preventDefault();\n\n const { handleFormChange } = this.props;\n\n const change = Object.assign(this.state.role, {\n title: e.target.value,\n });\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onAllowDuplicatesChange(checked) {\n const { handleFormChange } = this.props;\n\n const change = {\n allow_duplicates_in_org: checked,\n };\n\n this.setState(change);\n handleFormChange(change);\n }\n\n onRoleChange(option) {\n const { role } = this.state;\n const { limits, handleFormChange } = this.props;\n\n if (role.name === option.value) {\n return;\n }\n\n let newState;\n\n if (option.value === 'admin' || option.value === 'staff') {\n newState = Object.assign(this.state, {\n reached_users_limit: limits.reached_users_limit,\n role: {\n name: option.value,\n notification_recruiting: true,\n notification_retention: true,\n },\n });\n } else {\n newState = Object.assign(this.state, {\n reached_users_limit: false,\n role: {\n name: option.value,\n notification_recruiting: false,\n notification_retention: false,\n },\n });\n }\n\n this.setState(newState);\n handleFormChange(newState);\n }\n\n onNotificationChange(e) {\n const { role } = this.state;\n const { handleFormChange } = this.props;\n\n role[e.target.name] = e.target.checked;\n\n const change = Object.assign(this.state, { role });\n\n this.setState(change);\n handleFormChange(change);\n }\n\n addLeadEmail() {\n const { lead_emails_attributes } = this.state;\n\n lead_emails_attributes.push({ ...this.emptyEmail });\n\n this.setState({ lead_emails_attributes });\n }\n\n addLeadAgentId() {\n const { lead_agent_ids_attributes } = this.state;\n\n lead_agent_ids_attributes.push({ ...this.emptyAgentID });\n\n this.setState({ lead_agent_ids_attributes });\n }\n\n isLeadEmailValid(index) {\n const { errors } = this.props;\n return errors[index] || errors.no_email ? errors.no_email || errors[index].email || errors[index].duplicate : '';\n }\n\n renderLeadEmail() {\n const { lead_emails_attributes } = this.state;\n const { errors } = this.props;\n\n const leadEmailAttributes = lead_emails_attributes.filter((x, i) => !x._destroy);\n const checkedCount = leadEmailAttributes.filter((x, i) => x.main).length;\n const disableMainCheckbox = checkedCount >= 1;\n\n return leadEmailAttributes.map((leadEmail, index) => {\n const emailDOM = (\n \n this.handleAgentIdChange(e, leadAgentId)}\n />\n
\n\n \n this.handleMultipleListingServiceChange(val, leadAgentId)}\n className={classNames({ 'has-error': errors[index] ? errors[index].multiple_listing_service_ouid : '' })}\n teamMlses\n primaryMls\n clearable\n target={`mls-select-${index}`}\n />\n
\n\n \n \n
\n\n {warnings[index] && (\n \n
\n )}\n \n
\n );\n\n return emailDOM;\n });\n }\n\n renderLeadAgentId() {\n const { lead_agent_ids_attributes } = this.state;\n const { warnings } = this.props;\n\n const leadAgentIdAttributes = lead_agent_ids_attributes.filter((x, i) => !x._destroy);\n\n return leadAgentIdAttributes.map((leadAgentId, index) => {\n const agentIdDOM = (\n \n this.handleEmailChange(e, leadEmail)}\n />\n
\n\n \n this.handleEmailTypeChange(opt, leadEmail)}\n placeholder=\"--- Select ---\"\n className={classNames({ 'has-error': errors[index] ? errors[index].email_type : '' })}\n />\n
\n\n \n
\n\n \n this.handleMainChange(e, leadEmail)}\n checked={leadEmail.main || false}\n disabled={!leadEmail.main && disableMainCheckbox}\n />\n \n Main\n \n
\n \n \n
\n { errors[index] && errors[index].duplicate && (\n \n
\n )}\n\n { errors[index] && errors[index].email && (\n \n
\n )}\n \n
\n );\n\n return agentIdDOM;\n });\n }\n\n render() {\n const {\n role, reached_users_limit, id, firstName, lastName, phone, productionYtd, productionLtm, productionLabel, owner_id,\n allow_duplicates_in_org,\n } = this.state;\n const {\n teamMember, errors, limits, externalRolesOnly, duplicate_org_accounts, duplicates_found_in_org,\n } = this.props;\n const mutable = !teamMember || _lodash.isNull(teamMember.last_sign_in_at);\n\n return (\n \n this.handleAgentIdChange(e, leadAgentId)}\n />\n
\n\n \n this.handleMultipleListingServiceChange(val, leadAgentId)}\n teamMlses\n primaryMls\n clearable\n target={`mls-select-${index}`}\n />\n
\n\n \n \n
\n\n {warnings[index] && warnings[index].multiple_listing_service_ouid && (\n \n
\n )}\n\n { warnings[index] && warnings[index].duplicate && (\n \n
\n )}\n\n \n \n\n { errors.user_exists && (\n
\n );\n }\n}\n\nTeamMemberDrawerForm.defaultProps = {\n teamMember: null,\n errors: {},\n warnings: {},\n handleFormChange: () => false,\n externalRolesOnly: false,\n limits: {},\n};\n\nTeamMemberDrawerForm.propTypes = {\n teamMember: PropTypes.shape({}),\n errors: PropTypes.shape({}),\n warnings: PropTypes.shape({}),\n handleFormChange: PropTypes.func,\n externalRolesOnly: PropTypes.bool,\n limits: PropTypes.shape({}),\n};\n\nexport default TeamMemberDrawerForm;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport shadowRoot from 'react-shadow';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport APIRequest from '~/lib/api_request';\nimport TinyUser from '~/components/shared/users/tiny_user';\nimport ActivityEditor from '~/components/forms/HtmlEditors/ActivityEditor';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport editFormReducer, { openEditForm, closeEditForm } from '~/components/hooks/editFormReducer';\nimport LeadDrawerStore from '~/stores/lead_drawer_store';\n\nclass TimelineActivity extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n lead: props.lead,\n activity: props.activity,\n queuedChanges: {},\n // eslint-disable-next-line react/no-unused-state\n loading: true, // Used in Activities\n // eslint-disable-next-line react/no-unused-state\n emailEvents: {}, // Used in Email Activities\n editing: false,\n };\n\n autoBind(this);\n\n this.onSubmit = this.onSubmit.bind(this); // don't remove, for some reason autoBind doesn't work with onSubmit: https://zube.io/brokerkit/webapp/c/1920\n this.onLeadDrawerStoreChange = this.onLeadDrawerStoreChange.bind(this);\n }\n\n componentDidMount() {\n this.leadDrawerStoreListener = LeadDrawerStore.addListener(\n this.onLeadDrawerStoreChange,\n );\n }\n\n componentDidUpdate(prevProps) {\n const { activity } = this.props;\n if (activity !== prevProps.activity) {\n this.setState({ activity });\n }\n }\n\n componentWillUnmount() {\n if (this.leadDrawerStoreListener) {\n this.leadDrawerStoreListener.remove();\n }\n }\n\n onLeadDrawerStoreChange() {\n const leadDrawerState = LeadDrawerStore.getState();\n const { activity: currentActivity } = this.state;\n const { activity: leadDrawerActivity, leadDrawerStoreAction } = leadDrawerState;\n\n if (\n leadDrawerStoreAction === 'updateLeadActivityDone'\n && currentActivity?.id === leadDrawerActivity?.id\n ) {\n this.setState({ activity: leadDrawerActivity });\n }\n }\n\n handleEditClick = () => {\n const { dispatch } = this.props;\n this.setState({ editing: true }, () => {\n // Dispatch after state is set\n dispatch(openEditForm());\n });\n };\n\n handleFormClose = () => {\n const { dispatch } = this.props;\n this.setState({ editing: false });\n dispatch(closeEditForm());\n };\n\n onSubmit(e) {\n e.preventDefault();\n\n const { lead, activity, queuedChanges } = this.state;\n this.setState({ sending: true });\n\n APIRequest.put({\n resource: `/v1/leads/${lead.id}/activities/${activity.id}`,\n data: {\n activity: {\n body: queuedChanges?.body,\n parameters: queuedChanges?.parameters,\n },\n },\n }).end((err, res) => {\n this.setState({\n activity: res.body,\n sending: false,\n editing: false,\n });\n this.handleFormClose();\n });\n }\n\n onDelete = async (e) => {\n e.preventDefault();\n\n const { deleteMessage, removeActivity } = this.props;\n const { lead, activity } = this.state;\n const message = deleteMessage || 'Are you sure you want to delete this?';\n\n const confirmed = await this.confirmDeletion(message);\n if (!confirmed) return;\n\n this.setState({ deleting: true });\n try {\n await this.deleteActivity(lead, activity);\n setTimeout(() => {\n this.setState({\n deleting: false,\n deleted: true,\n });\n }, 500);\n\n if (removeActivity) {\n removeActivity(activity.id);\n }\n } catch (err) {\n this.setState({ deleting: false, deleted: false });\n }\n };\n\n confirmDeletion = (message) => new Promise((resolve) => {\n brokerbit.confirmBox({\n message,\n callback: (ok) => resolve(ok),\n });\n });\n\n deleteActivity = (lead, activity) => APIRequest.delete({\n resource: `/v1/leads/${lead.id}/activities/${activity.id}`,\n });\n\n switchActivityView(value) {\n const { lead, activity } = this.state;\n const { toggleActivityInternal } = this.props;\n\n APIRequest.put({\n resource: `/v1/leads/${lead.id}/activities/${activity.id}`,\n data: {\n activity: { internal: value === 'lock' },\n },\n }).end((err, res) => {\n const updatedActivity = res.body;\n this.setState({ activity: updatedActivity });\n\n if (toggleActivityInternal) {\n toggleActivityInternal(updatedActivity.id, updatedActivity.internal);\n }\n });\n }\n\n renderForm() {\n const { activity, queuedChanges, sending } = this.state;\n\n return (\n \n );\n }\n\n renderView() {\n const { activity } = this.state;\n\n if (!activity) {\n return null;\n }\n\n return (\n <>\n {activity.body && (\n \n {errors.user_exists}\n
\n )}\n\n { (reached_users_limit || errors.reached_users_limit)\n && (\n \n You are unable to add another user with the Admin or Staff role at this time as you are at the current limit of your pricing plan. Please email us at\n {' '}\n help@getbrokerkit.com\n {' '}\n to upgrade your pricing plan to enable additional users.\n
\n )}\n\n { !mutable\n && This user has registered with the system and is in control of their settings, so we've disabled editing their details.
}\n\n \n \n this.firstNameInput = input}\n name=\"team_member[first_name]\"\n className={classNames('form-control', { 'has-error': !!errors.first_name })}\n value={firstName}\n onChange={this.onFirstNameChange}\n disabled={!mutable}\n />\n\n { errors.first_name &&
\n\n \n \n this.lastNameInput = input}\n name=\"team_member[last_name]\"\n className={classNames('form-control', { 'has-error': !!errors.last_name })}\n value={lastName}\n onChange={this.onLastNameChange}\n disabled={!mutable}\n />\n { errors.last_name &&
\n\n \n \n\n {this.renderLeadEmail()}\n\n {errors.email && (
\n\n \n \n
\n\n \n \n\n {this.renderLeadAgentId()}\n
\n\n \n \n
\n\n \n \n this.productionLtmInput = input}\n name=\"team_member[production_ltm]\"\n className={classNames('form-control', { 'has-error': !!errors.production_ltm })}\n value={productionLtm || ''}\n onChange={this.onProductionLtmChange}\n />\n
\n\n \n \n
\n\n \n \n this.titleInput = input}\n name=\"team_member[title]\"\n placeholder=\"Team Leader, etc\"\n className={classNames('form-control', { 'has-error': !!errors.title })}\n value={role.title || ''}\n onChange={this.onTitleChange}\n disabled={!mutable}\n />\n
\n\n {\n Rails.abilities.manageLead && (\n \n
\n )\n }\n\n \n \n
\n\n { (role.name === 'admin' || role.name === 'staff') && (\n \n \n
\n )}\n\n \n \n
\n\n \n
\n \n
\n \n
\n \n \n \n <>{Moment(activity.occurred_at).fromNow()}\n \n \n
\n );\n }\n\n renderActivitySwitch() {\n const { activity } = this.state;\n const { alwaysPublic } = this.props;\n\n if (alwaysPublic) {\n return null;\n }\n\n return this.renderActivityButton(activity.internal);\n }\n\n renderActivityButton(isInternal) {\n const { editable, deletable } = this.props;\n\n const buttonClass = classNames('btn btn-secondary btn-sm pl8 pr8', {\n mr5: editable || deletable,\n });\n\n const tooltipText = isInternal ? 'Private - Viewable to staff only' : 'Public - Viewable to staff and recruiting agent';\n const icon = isInternal ? ['far', 'fa-eye-slash'] : ['far', 'fa-eye'];\n\n return (\n \n \n {_title}\n \n )}\n {this.renderView()}\n {this.renderWhoTimestamp()}\n
\n );\n }\n\n return (\n \n {Rails.abilities.manageLead && this.renderActivitySwitch()}\n {editable && (\n {\n this.setState({ editing: true });\n this.handleEditClick();\n }}\n className={classNames(\n 'btn btn-secondary btn-sm',\n deletable ? 'mr5' : '',\n )}\n >\n \n
\n {_title && (\n {body}
\n \n );\n }\n}\n\nTimelineActivity.defaultProps = {\n editable: false,\n deletable: false,\n alwaysPublic: false,\n icon: 'sticky-note',\n prefix: 'far',\n color: 'text-grey-dark',\n};\n\nexport default TimelineActivity;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport shadowRoot from 'react-shadow';\n\nimport TimelineActivity from '~/components/drawers/timeline/activity';\nimport LeadHelpers from '~/helpers/lead_helpers';\n\nclass TimelineActivityAppointment extends TimelineActivity {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n renderView() {\n const { activity } = this.state;\n const appointmentAt = LeadHelpers.renderAppointmentAt(activity.occurred_at);\n\n return (\n \n \n \n \n )\n )}\n
\n );\n }\n}\n\nTimelineActivityAppointment.defaultProps = {\n editable: false,\n deletable: true,\n title: 'Appointment Logged',\n icon: 'calendar-check',\n prefix: 'far',\n color: 'text-blue',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityAppointment;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport shadowRoot from 'react-shadow';\n\nimport TimelineActivityAppointment from '~/components/drawers/timeline/activity_appointment';\nimport AppointmentActions from '~/actions/appointment_actions';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\nimport LeadHelpers from '~/helpers/lead_helpers';\n\nclass TimelineActivityAppointmentSent extends TimelineActivityAppointment {\n constructor(props) {\n super(props);\n autoBind(this);\n }\n\n onTogglePopover() {\n this.setState({\n popoverOpen: !this.state.popoverOpen,\n });\n }\n\n renderView() {\n const { activity } = this.state;\n\n if (!activity.appointment) {\n return null;\n }\n\n const appointmentAt = LeadHelpers.renderAppointmentAt(activity.appointment.appointment_at);\n const content = activity.appointment.body;\n\n return (\n \n on\n {' '}\n {appointmentAt}\n
\n\n {(activity.body\n && (\n\n \n \n \n ))}\n
\n );\n }\n}\n\nTimelineActivityAppointmentSent.defaultProps = {\n editable: false,\n deletable: true,\n title: 'Appointment Sent',\n icon: 'calendar-alt',\n prefix: 'fas',\n color: 'text-blue',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityAppointmentSent;\n","import { PropTypes } from 'prop-types';\nimport TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityBucket extends TimelineActivity {}\n\nTimelineActivityBucket.defaultProps = {\n title: ({ props: { activity: { parameters: { bucket } } } }) => (\n bucket === 'archived' ? 'Bucket changed to archived' : 'Removed from archived bucket'\n ),\n icon: 'exchange-alt',\n prefix: 'fas',\n alwaysPublic: false,\n};\n\nTimelineActivityBucket.propTypes = {\n editable: PropTypes.bool,\n deletable: PropTypes.bool,\n title: PropTypes.func,\n icon: PropTypes.string,\n prefix: PropTypes.string,\n color: PropTypes.string,\n};\n\nexport default TimelineActivityBucket;\n","import React from 'react';\nimport TimelineActivity from '~/components/drawers/timeline/activity';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport TinyUser from '~/components/shared/users/tiny_user';\n\nclass TimelineActivityCampaignSubscription extends TimelineActivity {\n renderWhoTimestamp() {\n const { activity } = this.state;\n const { parameters: { trigger_name }, owner } = activity;\n const activity_owner = trigger_name ? { name: trigger_name } : (owner || { name: 'System' });\n\n return (\n \n for\n {' '}\n {appointmentAt}\n
\n {(content && (\n\n \n \n <>{Moment(activity.occurred_at).fromNow()}\n \n \n {activity_owner.id ? (\n
\n );\n }\n}\n\nTimelineActivityCampaignSubscription.defaultProps = {\n title: (object) => {\n const { parameters: { campaign_name, trigger_name }, owner, key } = object.props.activity;\n const activity_owner = trigger_name ? { name: trigger_name } : (owner || { name: 'System' });\n\n switch (key) {\n case 'lead.campaign_subscription':\n return (\n `${campaign_name} was added by ${trigger_name ? 'campaign trigger' : ''} ${activity_owner.name}`\n );\n case 'lead.campaign_subscription_delete':\n return (\n `${campaign_name} was deleted by ${trigger_name ? 'campaign trigger' : ''} ${activity_owner.name}`\n );\n case 'lead.campaign_subscription.paused_due_to_text_reply':\n return (\n `${campaign_name} was paused. The campaign was paused because the contact replied to a campaign text`\n );\n default:\n return (\n `${campaign_name} was ${key} by ${trigger_name ? 'campaign trigger' : ''} ${activity_owner.name}`\n );\n }\n },\n icon: 'exchange-alt',\n prefix: 'fas',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityCampaignSubscription;\n","import TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityDocument extends TimelineActivity {\n}\n\nTimelineActivityDocument.defaultProps = {\n title: (obj) => `${obj.props.document_status} - ${obj.props.activity.parameters.document_title}`,\n color: 'text-indigo',\n icon: 'file',\n prefix: 'far',\n alwaysPublic: true,\n};\n\nexport default TimelineActivityDocument;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport shadowRoot from 'react-shadow';\nimport {\n Popover,\n PopoverTitle,\n PopoverContent,\n} from 'reactstrap';\n\nimport TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityEmail extends TimelineActivity {\n constructor(props) {\n super(props);\n autoBind(this);\n }\n\n onTogglePopover() {\n this.setState({\n popoverOpen: !this.state.popoverOpen,\n });\n }\n\n renderView() {\n const { activity } = this.state;\n let subject;\n let body;\n let id;\n\n if (activity.email) {\n // Always refer to the email, it's the best source of info.\n id = activity.email.id;\n subject = activity.email.subject;\n body = activity.email.body;\n } else {\n // Just use activity body, if any\n body = activity.body;\n }\n\n return (\n \n {subject && \n \n \n )}\n
\n );\n }\n}\n\nTimelineActivityEmail.defaultProps = {\n editable: true,\n deletable: true,\n title: 'Email Note',\n icon: 'envelope',\n prefix: 'fas',\n color: 'text-blue',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityEmail;\n","import { v4 as uuidv4 } from 'uuid';\nimport shadowRoot from 'react-shadow';\nimport autoBind from 'react-autobind';\nimport React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport TimelineActivity from '~/components/drawers/timeline/activity';\nimport APIRequest from '~/lib/api_request';\n\nclass TimelineActivityEmailSent extends TimelineActivity {\n _isMounted = false;\n\n constructor(props) {\n super(props);\n autoBind(this);\n }\n\n componentDidMount() {\n this._isMounted = true;\n this.loadEmailEvents();\n }\n\n loadEmailEvents() {\n const { activity } = this.state;\n const { email } = activity;\n\n if (!email) {\n this.setState({ loading: false });\n\n return;\n }\n\n if (this._isMounted && email.source !== 'manual') {\n APIRequest.get({ resource: `/v1/events/${email.id}` })\n .end((_err, response) => {\n if (response && response.ok) {\n const emailEvents = response.body;\n\n this.setState({ emailEvents, loading: false });\n } else {\n this.setState({ loading: false });\n }\n });\n }\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n onTogglePopover() {\n this.setState({\n popoverOpen: !this.state.popoverOpen,\n });\n }\n\n renderEmailEvents() {\n const { loading, emailEvents } = this.state;\n\n if (loading) {\n return (\n {subject}
}\n {body && (\n\n
\n );\n }\n\n if (_lodash.isEmpty(emailEvents)) return null;\n\n return (\n \n
\n );\n }\n\n renderView() {\n const { activity } = this.state;\n let subject;\n let body;\n let attachments;\n let source;\n let id;\n\n if (activity.email) {\n // Always refer to the email, it's the best source of info.\n id = activity.email.id;\n subject = activity.email.subject;\n body = activity.email.body;\n attachments = activity.email.attachments;\n source = activity.email.source;\n } else {\n // Just use activity body, if any\n body = activity.body;\n }\n\n return (\n \n CLICKS\n
\n {emailEvents?.clicked}\n
\n \n {emailEvents?.clicked}\n
\n OPENS\n
\n {emailEvents?.opened}\n
\n \n {emailEvents?.opened}\n
\n STATUS\n
\n {emailEvents?.status}\n
\n \n {emailEvents?.status}\n
\n { subject && \n \n \n\n { attachments && (\n attachments.map((a) => (\n <>\n \n
\n \n ))\n )}\n { source !== 'manual' && this.renderEmailEvents() }\n
\n );\n }\n}\n\nTimelineActivityEmailSent.defaultProps = {\n editable: false,\n deletable: true,\n title: 'Email Sent',\n icon: 'envelope',\n prefix: 'fas',\n color: 'text-blue',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityEmailSent;\n","import TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityLeadUpdate extends TimelineActivity {}\n\nTimelineActivityLeadUpdate.defaultProps = {\n title: (object) => {\n const {\n parameters: {\n name, company, emails, agent_ids,\n },\n } = object.props.activity;\n const options = [];\n const company_title = _lodash.isEmpty(company) ? '' : `with ${company}`;\n const emailAdresses = _lodash.isEmpty(emails) ? null : options.unshift(`Email addresses: ${emails}`);\n const agentIds = _lodash.isEmpty(agent_ids) ? null : options.unshift(`Agent IDs: ${agent_ids}`);\n const agentIdAndEmailTitle = _lodash.isEmpty(options) ? '' : `(${options.map((option) => option)})`;\n\n return (\n `${name} ${agentIdAndEmailTitle} ${company_title} was updated from a duplicate new contact`\n );\n },\n icon: 'sync',\n prefix: 'fas',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityLeadUpdate;\n","import TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityMerge extends TimelineActivity {}\n\nTimelineActivityMerge.defaultProps = {\n title: (object) => {\n const {\n parameters: {\n name, company, emails, agent_ids,\n },\n } = object.props.activity;\n const options = [];\n const company_title = _lodash.isEmpty(company) ? '' : `with ${company}`;\n const emailAdresses = _lodash.isEmpty(emails) ? null : options.unshift(`Email addresses: ${emails}`);\n const agentIds = _lodash.isEmpty(agent_ids) ? null : options.unshift(`Agent IDs: ${agent_ids}`);\n const agentIdAndEmailTitle = _lodash.isEmpty(options) ? '' : `(${options.map((option) => option)})`;\n\n return (\n `${name} ${agentIdAndEmailTitle} ${company_title} was merged into this record`\n );\n },\n icon: 'compress',\n prefix: 'fas',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityMerge;\n","import React, {\n useState,\n useMemo,\n} from 'react';\nimport {\n Popover,\n Button,\n OverlayTrigger,\n} from 'react-bootstrap';\nimport { v4 as uuidv4 } from 'uuid';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport shadowRoot from 'react-shadow';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport TimelineActivity from '~/components/drawers/timeline/activity';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport TinyUser from '~/components/shared/users/tiny_user';\nimport APIRequest from '~/lib/api_request';\nimport ConfirmAlertBox from '~/components/shared/confirm_alert_box';\nimport LeadDrawerActions from '~/actions/lead_drawer_actions';\n\nconst TimelineActivityMessageScheduled = ({\n activity: activityProp,\n editable,\n deletable,\n lead,\n icon,\n prefix,\n color,\n title,\n setCurrentFormWithData,\n messageType,\n toggleActivityInternal,\n}) => {\n const [activity, setActivity] = useState(activityProp);\n const [deletingActivity, setDeletingActivity] = useState(false);\n\n const dateTime = useMemo(() => {\n const { schedule_at: scheduleAt, timezone } = activity.parameters || {};\n\n if (!scheduleAt || !timezone) return '';\n\n return Moment(scheduleAt).tz(timezone).format('ddd, MMM D, hh:mmA z');\n }, [activity.parameters?.schedule_at, activity.parameters?.timezone]);\n\n const truncateMessageBody = (body) => (body ? body.substring(0, 100) + (body.length > 100 ? '...' : '') : '');\n\n const formatMessageType = () => {\n switch (messageType) {\n case 'email':\n return 'Email';\n case 'sms_message':\n return 'Text';\n default:\n return messageType;\n }\n };\n\n const renderView = () => {\n const { subject, body, media_url } = activity.parameters || {};\n const { email } = activity;\n const attachments = email?.attachments || [];\n\n return (\n {subject}
}\n\n\n \n ))\n )}\n { source !== 'manual' && this.renderEmailEvents() }\n
\n { subject && \n \n \n\n { attachments && (\n attachments.map((a) => (\n <>\n \n
\n \n ))\n )}\n\n {(messageType === 'sms_message') && media_url && (\n \n
\n );\n };\n\n const renderTitle = () => (\n {subject}
}\n\n\n \n ))\n )}\n\n {(messageType === 'sms_message') && media_url && (\n \n
\n {title}\n {' - '}\n {dateTime}\n
\n );\n\n const renderWhoTimestamp = () => (\n\n \n \n <>{Moment(activity.occurred_at).fromNow()}\n \n \n
\n );\n\n const renderActivitySwitch = () => {\n const btnClass = classNames('btn btn-secondary btn-sm pl8 pr8', {\n mr5: editable || deletable,\n });\n const tooltipText = activity.internal ? 'Private - Viewable to staff only' : 'Public - Viewable to staff and recruiting agent';\n\n return (\n \n {Rails.abilities.manageLead && renderActivitySwitch()}\n\n {activityEditable && (\n \n \n \n \n \n )}\n
\n );\n };\n\n const switchActivityView = (internal) => {\n APIRequest.put({\n resource: `/v1/leads/${lead.id}/activities/${activity.id}`,\n data: {\n activity: { internal: !internal },\n },\n }).end((err, res) => {\n if (err) {\n const errorsArr = res.body?.errors || [];\n GlobalContainer.notify(errorsArr.join(', '), 'error');\n } else {\n const updatedActivity = res.body;\n setActivity(updatedActivity);\n toggleActivityInternal(updatedActivity.id, updatedActivity.internal);\n }\n });\n };\n\n const onDelete = () => {\n setDeletingActivity(() => true);\n\n if (messageType === 'sms_message') {\n LeadDrawerActions.cancelLeadSmsMessage(lead, activity.sms_message.id);\n } else if (messageType === 'email') {\n LeadDrawerActions.cancelLeadEmail(lead, activity.email.id);\n }\n };\n\n const onEdit = () => {\n const { schedule } = activity;\n const { run_at: runAt, run_at_timezone: timezone } = schedule;\n const dateTimeObject = Moment(runAt).tz(timezone);\n const object = getObject();\n const form = messageType === 'email' ? 'email' : 'text-message';\n const scheduleParams = {\n selectedSchedule: 'Custom',\n customOptions: {\n date: dateTimeObject.format('MMM Do YYYY'),\n time: dateTimeObject.format('HH:mm'),\n timezone,\n },\n };\n const data = { object, schedule: scheduleParams };\n\n setCurrentFormWithData({ form, data });\n };\n\n const getObject = () => {\n if (messageType === 'email') {\n return activity.email;\n } if (messageType === 'sms_message') {\n return activity.sms_message;\n }\n\n return {};\n };\n\n return (\n \n {renderTitle()}\n {renderActions()}\n
\n\n {renderView()}\n {renderWhoTimestamp()}\n \n );\n};\n\nTimelineActivityMessageScheduled.defaultProps = {\n editable: true,\n deletable: true,\n title: 'Email Scheduled',\n icon: 'envelope',\n prefix: 'fas',\n color: 'text-blue',\n setCurrentFormWithData: () => {},\n};\n\nTimelineActivityMessageScheduled.propTypes = {\n activity: PropTypes.shape({}).isRequired,\n lead: PropTypes.shape({}).isRequired,\n messageType: PropTypes.string.isRequired,\n editable: PropTypes.bool,\n deletable: PropTypes.bool,\n icon: PropTypes.string,\n prefix: PropTypes.string,\n color: PropTypes.string,\n title: PropTypes.string,\n setCurrentFormWithData: PropTypes.func,\n};\n\nexport default TimelineActivityMessageScheduled;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityNote extends TimelineActivity {\n}\n\nTimelineActivityNote.defaultProps = {\n editable: true,\n deletable: true,\n title: 'Note',\n icon: 'sticky-note',\n prefix: 'far',\n color: 'text-purple',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityNote;\n","import React from 'react';\nimport autoBind from 'react-autobind';\nimport ReactAudioPlayer from 'react-audio-player';\nimport shadowRoot from 'react-shadow';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport TimelineActivity from '~/components/drawers/timeline/activity';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport ActivityEditor from '~/components/forms/HtmlEditors/ActivityEditor';\nimport CallDispositionSelect from '~/components/forms/call_disposition_select';\n\nconst callDisposition = {\n no_answer: 'No Answer',\n closed: 'Completed',\n voicemail: 'Voicemail',\n busy: 'Busy',\n wrong_number: 'Wrong Number',\n canceled: 'Canceled',\n failed: 'Failed',\n};\n\nclass TimelineActivityPhoneCall extends TimelineActivity {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n renderForm() {\n const { activity } = this.state;\n const call_isposition = activity.parameters?.call_disposition;\n\n return (\n \n );\n }\n\n renderView() {\n const { activity } = this.state;\n const { parameters, voice_call } = activity;\n\n if (!activity) {\n return null;\n }\n\n return (\n \n {voice_call && (\n \n {_lodash.capitalize(voice_call.direction)}\n {' '}\n call to the\n {' '}\n {LeadHelpers.renderPhoneNumber(voice_call.to)}\n {' '}\n {LeadHelpers.renderDuration(voice_call.duration)}\n \n )}\n\n {parameters && parameters.call_disposition && (\n \n \n \n )\n )}\n
\n );\n }\n}\n\nTimelineActivityPhoneCall.defaultProps = {\n editable: true,\n deletable: true,\n title: 'Phone Call',\n icon: 'phone-alt',\n prefix: 'fas',\n color: 'text-pink',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityPhoneCall;\n","import React from 'react';\nimport TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityReassign extends TimelineActivity {}\n\nTimelineActivityReassign.defaultProps = {\n title: (object) => {\n const { parameters: { team_name }, owner } = object.props.activity;\n\n return `Lead reassigned to this account from \"${team_name}\" by ${owner.name}`;\n },\n icon: 'redo',\n prefix: 'fas',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityReassign;\n","import TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityReferrerUpdate extends TimelineActivity {\n}\n\nTimelineActivityReferrerUpdate.defaultProps = {\n title: (obj) => `The referrer has been set to ${obj.props.activity.parameters.referrer.changed_to} by ${obj.props.activity.parameters.referrer.changed_by}`,\n icon: 'exchange-alt',\n prefix: 'fas',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityReferrerUpdate;\n","import React from 'react';\nimport TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineReleasePhoneNumber extends TimelineActivity {}\n\nTimelineReleasePhoneNumber.defaultProps = {\n title: (object) => {\n const { parameters: { acting_user_name, message }, owner } = object.props.activity;\n\n return `${message}`;\n },\n icon: 'redo',\n prefix: 'fas',\n alwaysPublic: false,\n};\n\nexport default TimelineReleasePhoneNumber;\n","import TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityResume extends TimelineActivity {\n}\n\nTimelineActivityResume.defaultProps = {\n title: (obj) => `${obj.props.resume_status} - ${obj.props.activity.parameters.document_title}`,\n color: 'text-deluge',\n icon: 'file',\n prefix: 'far',\n alwaysPublic: true,\n};\n\nexport default TimelineActivityResume;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport shadowRoot from 'react-shadow';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport TimelineActivity from '~/components/drawers/timeline/activity';\nimport ActivityEditor from '~/components/forms/HtmlEditors/ActivityEditor';\n\nclass TimelineActivityRetention extends TimelineActivity {\n constructor(props) {\n super(props);\n\n const { activity } = this.props;\n\n autoBind(this);\n }\n\n renderView() {\n const { activity } = this.state;\n\n return (\n \n Call Disposition:\n {' '}\n {callDisposition[parameters.call_disposition]}\n
\n )}\n\n {voice_call && voice_call.record_url && (\n \n
\n )}\n\n {(activity.body\n && (\n \n \n \n \n ))}\n
\n );\n }\n\n renderForm() {\n const { activity } = this.state;\n\n return (\n \n );\n }\n}\n\nTimelineActivityRetention.defaultProps = {\n editable: true,\n deletable: true,\n title: 'Retention Logged',\n icon: 'list-alt',\n prefix: 'far',\n color: 'text-blue',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityRetention;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivitySmsConversation extends TimelineActivity {\n componentDidMount() {\n /* initialize stack of activity listeners if not initialized yet */\n if (!window.onSmsMessageReceived) window.onSmsMessageReceived = {};\n\n /* add listener to stack of message listeners */\n window.onSmsMessageReceived[this.state.activity.id] = this.handleUpdateMessage;\n }\n\n componentWillUnmount() {\n /* remove listener from stack of message listeners */\n delete window.onSmsMessageReceived[this.state.activity.id];\n }\n\n handleUpdateMessage = (data) => {\n if (this.state.activity.id !== data.message.activity_id) return;\n\n /* check if this a new message or status update */\n const isIncluded = this.state.activity.sms_messages.map((m) => m.id).includes(data.message.id);\n\n if (isIncluded) {\n this.setState((prevState) => ({\n activity: {\n ...prevState.activity,\n sms_messages: prevState.activity.sms_messages.map((message) => {\n if (data.message.id === message.id) return { ...message, status: data.message.status };\n return message;\n }),\n },\n }));\n } else {\n this.setState((prevState) => ({\n activity: {\n ...prevState.activity,\n sms_messages: [data.message, ...prevState.activity.sms_messages],\n },\n }));\n }\n }\n\n render() {\n const { activity } = this.state;\n\n if (!activity.sms_messages) {\n return null;\n }\n\n return (\n \n on\n {' '}\n {Moment(activity.occurred_at).format('dddd, MMMM Do YYYY, h:mm a')}\n
\n\n {(activity.body && (\n\n \n
\n );\n }\n}\n\nTimelineActivitySmsConversation.defaultProps = {\n editable: false,\n deletable: false,\n title: 'Text Message Conversation',\n icon: 'comment',\n prefix: 'fas',\n color: 'text-yellow',\n alwaysPublic: false,\n};\n\nexport default TimelineActivitySmsConversation;\n","import React from 'react';\n\nimport TimelineActivity from '~/components/drawers/timeline/activity';\nimport LeadHelpers from '~/helpers/lead_helpers';\n\nclass TimelineActivityStatus extends TimelineActivity {\n // render(){\n // const { activity } = this.props;\n //\n // return(\n // \n
\n Text Message Conversation
\n\n Started on\n {' '}\n {Moment(activity.created_at).format('LL')}\n
\n\n {activity.sms_messages.map((m) => (\n
\n \n
\n \n )}\n \n {Moment(m.created_at).fromNow()}\n {' '}\n via\n {' '}\n {m.source}\n \n
\n ))}\n \n {m.media_url && (\n 
\n )}\n
\n \n {m.status && (\n \n {m.status === 'sent' ? 'pending' : m.status}\n \n {m.body}\n
\n \n\n \n )}\n \n {Moment(m.created_at).fromNow()}\n {' '}\n via\n {' '}\n {m.source}\n \n
Status changed to {)}
\n // {this.renderWhoTimestamp()}\n //\n \n Category:\n {' '}\n {activity.parameters.category}\n \n
\n {(activity.body\n && (\n\n \n \n )\n )}\n
\n );\n }\n}\n\nTimelineActivityTask.defaultProps = {\n icon: 'tasks',\n prefix: 'fas',\n title: (object) => {\n const { key, parameters: { owner_name } } = object.props.activity;\n let type;\n\n switch (key) {\n case 'lead.create_task':\n type = 'added';\n break;\n case 'lead.destroy_task':\n type = 'deleted';\n break;\n case 'lead.update_task':\n type = 'updated';\n break;\n default:\n type = 'performed an unknown action on';\n }\n\n return (\n `Follow Up Task was ${type} by ${owner_name}`\n );\n },\n alwaysPublic: false,\n};\n\nexport default TimelineActivityTask;\n","import React from 'react';\nimport TimelineActivity from '~/components/drawers/timeline/activity';\n\nclass TimelineActivityTextMessage extends TimelineActivity {}\n\nTimelineActivityTextMessage.defaultProps = {\n editable: true,\n deletable: true,\n title: 'Text Message',\n icon: 'comment',\n prefix: 'fas',\n color: 'text-yellow',\n alwaysPublic: false,\n};\n\nexport default TimelineActivityTextMessage;\n","import React, { useMemo } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Link } from 'react-router-dom';\nimport { getRestrictionScope } from '~/helpers/staffRestrictionHelper';\n\nconst { currentUser } = Rails.helpers;\n\nconst DuplicateContactCard = ({ duplicate: { type, match } }) => {\n const productType = GlobalContainer.product();\n const currentRestriction = useMemo(() => getRestrictionScope(), [productType]);\n const showLeadLink = (!currentRestriction || (match.owner && currentUser.id === match.owner.id));\n\n const getProfileURL = (contact) => {\n switch (contact.product) {\n case 'recruiting':\n return `/recruiter/leads?lead=${contact.id}`;\n case 'retention':\n return `/retention/team?lead=${contact.id}`;\n default:\n return `/recruiter/leads?lead=${contact.id}`;\n }\n };\n\n return (\n \n {(activity.body\n && (\n
\n
\n );\n};\n\nexport default DuplicateContactCard;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Tooltip } from 'reactstrap';\n\nconst ClickableTooltip = ({\n children,\n trigger,\n placement,\n target,\n innerClassName,\n text,\n ...otherProps\n}) => {\n const [tooltipOpen, setTooltipOpen] = useState(false);\n const toggle = () => setTooltipOpen(!tooltipOpen);\n const tooltipObject = typeof text === 'object';\n\n return (\n <>\n {children}\n \n
\n \n
\n \n
\n {showLeadLink && (\n \n 
\n
\n\n \n
\n \n {match.name}\n
\n \n {match.company}\n
\n { match.owner && (\n \n Owner \n \n 
\n \n \n {match.owner.name}\n\n \n
\n )}\n \n \n
\n )}\n pickerElement?.current?.show}>\n {children}\n
\n );\n }\n\n return (\n \n e.preventDefault()}\n />\n
\n );\n };\n\n return (\n \n \n
\n \n {renderTrigger()}\n
\n );\n};\n\nDateTimePicker.propTypes = {\n id: PropTypes.string,\n format: PropTypes.string,\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n ]),\n placeholder: PropTypes.string,\n pickerType: PropTypes.string,\n bulk: PropTypes.bool,\n showTodayButton: PropTypes.bool,\n showClear: PropTypes.bool,\n useCurrent: PropTypes.bool,\n isInvalid: PropTypes.bool,\n isDisabled: PropTypes.bool,\n minDate: PropTypes.instanceOf(Date),\n maxDate: PropTypes.instanceOf(Date),\n onChange: PropTypes.func,\n children: PropTypes.node,\n};\n\nDateTimePicker.defaultProps = {\n id: '',\n format: 'LL',\n value: '',\n placeholder: '',\n pickerType: 'datetime',\n bulk: false,\n showTodayButton: false,\n showClear: false,\n useCurrent: false,\n isInvalid: false,\n isDisabled: false,\n minDate: undefined,\n maxDate: undefined,\n onChange: () => {},\n children: null,\n};\n\nexport default DateTimePicker;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst ErrorMessage = ({ message = [], className }) => {\n const errorMessage = useMemo(() => {\n if (!message || !Array.isArray(message) || message.length === 0) {\n return '';\n }\n return message[0];\n }, [message]);\n\n if (!errorMessage) {\n return null;\n }\n\n return (\n \n {errorMessage}\n \n );\n};\n\nErrorMessage.defaultProps = {\n message: [],\n className: '',\n};\n\nErrorMessage.propTypes = {\n message: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n ])),\n ]),\n className: PropTypes.string,\n};\n\nexport default ErrorMessage;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\n\nconst ErrorMessageWithIcon = ({ message = '', icon = ['fas', 'fa-exclamation-circle'], className = '' }) => {\n const errorText = useMemo(() => (\n \n ${text} `;\n\n newContent += linkHtml;\n });\n setContent(newContent);\n clearLinksToInsert();\n }\n }, [linksToInsert, clearLinksToInsert]);\n\n const handleEditorChange = (_value, editor) => {\n const newContent = editor.getContent({ format: 'html' });\n setContent(newContent);\n onChange(newContent);\n };\n\n const handleOnInit = (_event, editor) => {\n setLoading(false);\n\n if (value) {\n editor.setContent(value, { format: 'html' });\n }\n\n if (spellCheck) {\n initWebSpellChecker(editor.iframeElement);\n }\n };\n return (\n <>\n
\n {loading && (\n
\n \n );\n};\n\nActivityEditor.defaultProps = {\n value: '',\n className: '',\n id: '',\n placeholder: 'Enter text or insert / drop images ...',\n onChange: () => false,\n activityType: 'note',\n spellCheck: false,\n linksToInsert: [],\n};\n\nActivityEditor.propTypes = {\n value: PropTypes.string,\n className: PropTypes.string,\n id: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n activityType: PropTypes.string,\n spellCheck: PropTypes.bool,\n linksToInsert: PropTypes.array,\n};\n\nexport default ActivityEditor;\n","import React, {\n useState,\n useEffect,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport { PropTypes } from 'prop-types';\nimport { Editor } from '@tinymce/tinymce-react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\nimport VideosModal from '~/components/modals/videos/VideosModal';\nimport AssistModal from '~/components/modals/AiAssist/Modal';\nimport MentionsEditor from '~/components/forms/HtmlEditors/MentionsEditor';\nimport {\n TINYMCE_SCRIPT_PATH,\n APPT_EDITOR_PLUGINS,\n APPT_EDITOR_TOOLBAR,\n IMAGES_UPLOAD_HANDLER,\n} from '~/constants/TinyMCE';\nimport { initWebSpellChecker } from '~/lib/web_spell_checker';\nimport EditorHelpers from '~/helpers/editor_helpers';\n\nconst AppointmentEditor = ({\n id,\n value,\n className,\n placeholder,\n onChange,\n linksToInsert,\n clearLinksToInsert,\n}) => {\n const [isFeatureEnabled, setIsFeatureEnabled] = useState(false);\n const [hasCheckedFeature, setHasCheckedFeature] = useState(false);\n const [loading, setLoading] = useState(true);\n const [content, setContent] = useState('');\n const init = {\n placeholder,\n license_key: 'gpl',\n plugins: APPT_EDITOR_PLUGINS,\n toolbar: APPT_EDITOR_TOOLBAR,\n toolbar_mode: 'wrap',\n branding: false,\n menubar: false,\n file_picker_types: 'image',\n min_height: 350,\n relative_urls: false,\n remove_script_host: false,\n document_base_url: Rails.baseUrl,\n forced_root_block: 'div',\n entity_encoding: 'named',\n content_style: 'body { font-family: Arial; font-size: 13px; }',\n paste_as_text: false,\n contextmenu: false,\n paste_remove_styles_if_webkit: false,\n statusbar: true,\n images_upload_handler: IMAGES_UPLOAD_HANDLER,\n setup: (editor) => {\n editor.ui.registry.addIcon('videoIcon', '');\n editor.ui.registry.addIcon('usersIcon', '');\n\n editor.ui.registry.addButton('videos', {\n icon: 'videoIcon',\n tooltip: 'Insert Video',\n onAction: () => {\n ReactDOM.render(\n \n
\n )}\n\n {hasCheckedFeature && isFeatureEnabled ? (\n ${text} `;\n\n newContent += linkHtml;\n });\n setContent(newContent);\n clearLinksToInsert();\n }\n }, [linksToInsert, clearLinksToInsert]);\n\n const handleEditorChange = (_value, editor) => {\n const newContent = editor.getContent({ format: 'html' });\n\n setContent(newContent);\n onChange(newContent);\n };\n\n const handleOnInit = (_event, editor) => {\n setLoading(false);\n\n if (value) {\n editor.setContent(value, { format: 'html' });\n }\n\n initWebSpellChecker(editor.iframeElement);\n };\n\n return (\n <>\n
\n {loading && (\n
\n \n );\n};\n\nAppointmentEditor.defaultProps = {\n value: '',\n className: '',\n id: '',\n placeholder: 'Enter text',\n onChange: () => false,\n linksToInsert: [],\n clearLinksToInsert: () => false,\n};\n\nAppointmentEditor.propTypes = {\n value: PropTypes.string,\n className: PropTypes.string,\n id: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n linksToInsert: PropTypes.array,\n clearLinksToInsert: PropTypes.func,\n};\n\nexport default AppointmentEditor;\n","import React, {\n useState,\n useEffect,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport { PropTypes } from 'prop-types';\nimport { Editor } from '@tinymce/tinymce-react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport VideosModal from '~/components/modals/videos/VideosModal';\nimport AssistModal from '~/components/modals/AiAssist/Modal';\nimport {\n TINYMCE_SCRIPT_PATH,\n EMAIL_EDITOR_PLUGINS,\n EMAIL_EDITOR_TOOLBAR,\n IMAGES_UPLOAD_HANDLER,\n} from '~/constants/TinyMCE';\n\nimport { initWebSpellChecker } from '~/lib/web_spell_checker';\nimport EditorHelpers from '~/helpers/editor_helpers';\n\nconst EmailEditor = ({\n id,\n value,\n className,\n placeholder,\n replaceValue,\n clearReplaceValue,\n linksToInsert,\n clearLinksToInsert,\n onChange,\n setSubject,\n}) => {\n const [loading, setLoading] = useState(true);\n const [content, setContent] = useState('');\n\n useEffect(() => {\n if (replaceValue) {\n setContent(replaceValue);\n clearReplaceValue();\n }\n }, [replaceValue, clearReplaceValue]);\n\n useEffect(() => {\n if (linksToInsert?.length) {\n let newContent = content;\n linksToInsert.forEach((link) => {\n const { text, href } = link;\n const linkHtml = `\n
\n )}\n\n {hasCheckedFeature && isFeatureEnabled ? (\n ${text} `;\n\n newContent += linkHtml;\n });\n setContent(newContent);\n clearLinksToInsert();\n }\n }, [linksToInsert, clearLinksToInsert]);\n\n const handleEditorChange = (_value, editor) => {\n const newContent = editor.getContent({ format: 'html' });\n setContent(newContent);\n onChange(newContent);\n };\n\n const handleOnInit = (_event, editor) => {\n setLoading(false);\n\n if (value) {\n editor.setContent(value, { format: 'html' });\n }\n initWebSpellChecker(editor.iframeElement);\n };\n\n return (\n <>\n
\n {loading && (\n {\n editor.ui.registry.addIcon('videoIcon', '');\n editor.ui.registry.addIcon('usersIcon', '');\n\n editor.ui.registry.addButton('videos', {\n icon: 'videoIcon',\n tooltip: 'Insert Video',\n onAction: () => {\n ReactDOM.render(\n
\n \n );\n};\n\nEmailEditor.defaultProps = {\n id: '',\n value: '',\n className: '',\n placeholder: 'Enter text or insert / drop images ...',\n replaceValue: null,\n clearReplaceValue: () => false,\n linksToInsert: [],\n clearLinksToInsert: () => false,\n onChange: () => false,\n setSubject: () => false,\n};\n\nEmailEditor.propTypes = {\n id: PropTypes.string,\n value: PropTypes.string,\n className: PropTypes.string,\n placeholder: PropTypes.string,\n replaceValue: PropTypes.string,\n clearReplaceValue: PropTypes.func,\n linksToInsert: PropTypes.array,\n clearLinksToInsert: PropTypes.func,\n onChange: PropTypes.func,\n setSubject: PropTypes.func,\n};\n\nexport default EmailEditor;\n","import React, { useEffect, useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { PropTypes } from 'prop-types';\nimport { Editor } from '@tinymce/tinymce-react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport VideosModal from '~/components/modals/videos/VideosModal';\nimport AssistModal from '~/components/modals/AiAssist/Modal';\nimport {\n TINYMCE_SCRIPT_PATH,\n LANDING_PAGE_EDITOR_PLUGINS,\n LANDING_PAGE_EDITOR_TOOLBAR,\n IMAGES_UPLOAD_HANDLER,\n} from '~/constants/TinyMCE';\nimport { initWebSpellChecker } from '~/lib/web_spell_checker';\n\nconst LandingPageHtmlEditor = ({\n value,\n id,\n className,\n placeholder,\n onChange,\n spellCheck,\n}) => {\n const [loading, setLoading] = useState(true);\n const [content, setContent] = useState('');\n const editorRef = useRef(null);\n\n useEffect(() => {\n if (!spellCheck) return;\n\n const editor = editorRef.current\n if (editor) initWebSpellChecker(editor.iframeElement);\n }, [spellCheck]);\n\n const handleEditorChange = (_value, editor) => {\n const newContent = editor.getContent({ format: 'html' });\n setContent(newContent);\n onChange(newContent);\n };\n\n const handleOnInit = (_event, editor) => {\n editorRef.current = editor\n setLoading(false);\n\n if (value) {\n editor.setContent(value, { format: 'html' });\n }\n };\n\n return (\n <>\n \n
\n )}\n\n \n {loading && (\n {\n editor.ui.registry.addIcon('videoIcon', '');\n\n editor.ui.registry.addButton('videos', {\n icon: 'videoIcon',\n tooltip: 'Insert Video',\n onAction: () => {\n ReactDOM.render(\n
\n \n );\n};\n\nLandingPageHtmlEditor.defaultProps = {\n value: '',\n className: '',\n id: '',\n placeholder: 'Enter text or insert / drop images ...',\n onChange: () => false,\n spellCheck: false,\n};\n\nLandingPageHtmlEditor.propTypes = {\n value: PropTypes.string,\n className: PropTypes.string,\n id: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n spellCheck: PropTypes.bool,\n};\n\nexport default LandingPageHtmlEditor;\n","import React, { useState } from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Editor } from '@tinymce/tinymce-react';\nimport { v4 as uuidv4 } from 'uuid';\nimport AutoComplete from '~/components/forms/HtmlEditors/mentions/AutoComplete';\nimport { TINYMCE_SCRIPT_PATH } from '~/constants/TinyMCE';\n\nconst MentionsEditor = ({\n id: propId,\n init: propInit,\n onKeyPress,\n ...otherProps\n}) => {\n const [activityType] = useState(otherProps.activityType);\n const [id] = useState(propId || uuidv4());\n const [autoComplete, setAutoComplete] = useState(null);\n\n const handleOnKeyPress = (e) => {\n const delimiterIndex = ['@'].indexOf(String.fromCharCode(e.which || e.keyCode));\n\n onKeyPress();\n\n if (delimiterIndex > -1 && prevCharIsSpace()) {\n if (autoComplete == null || (autoComplete.hasFocus !== undefined && !autoComplete.hasFocus)) {\n e.preventDefault();\n setAutoComplete(new AutoComplete(tinymce.get(id), {}, activityType));\n }\n }\n };\n\n const prevCharIsSpace = () => {\n const ed = tinymce.get(id);\n const range = ed.selection.getRng(true);\n const text = range.startContainer.data || '';\n const character = text.charAt(Math.max(range.startOffset - 1, 0));\n\n return /^\\s*$/.test(character);\n };\n\n // editor.on('keydown', (e) => {\n // if (e.keyCode === 40 || e.keyCode === 13 || e.keyCode === 38) {\n // console.log('prevent default');\n // e.preventDefault();\n // }\n // });\n\n return (\n \n
\n )}\n\n \n {loading && (\n {\n editor.ui.registry.addIcon('videoPlus', '');\n\n editor.ui.registry.addButton('videos', {\n icon: 'videoPlus',\n tooltip: 'Insert Video',\n onAction: () => {\n ReactDOM.render(\n
\n );\n};\n\nSignatureHtmlEditor.defaultProps = {\n value: '',\n className: '',\n id: '',\n placeholder: 'Enter text or insert / drop images ...',\n onChange: () => false,\n};\n\nSignatureHtmlEditor.propTypes = {\n value: PropTypes.string,\n className: PropTypes.string,\n id: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n};\n\nexport default SignatureHtmlEditor;\n","export const getAllowedDomains = () => {\n const webAppUrl = process.env.WEB_APP_URL || 'http://localhost:3000';\n const baseUrl = new URL(webAppUrl);\n const allowedDomains = [\n baseUrl.host,\n 'localhost:3000',\n ].map((domain) => domain.replace('.', '\\\\.'));\n return allowedDomains;\n};\n\nexport const isValidVideoURL = (url) => {\n // UUID v4 pattern\n const uuidPattern = '[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}';\n const allowedDomains = getAllowedDomains();\n\n const pattern = new RegExp(\n `^https?://(${allowedDomains.join('|')})/video/${uuidPattern}$`,\n 'i',\n );\n\n return pattern.test(url);\n};\n\nexport const isValidDocumentURL = (url) => {\n const allowedDomains = getAllowedDomains();\n\n // Document URL pattern:\n // Matches:\n // domain.com/d/123 (no auth param)\n // domain.com/d/123/?auth=some_token (with auth param)\n //\n // Explanation:\n // - ^https?://(${allowedDomains.join('|')}) : must start with allowed domain\n // - /d/\\\\d+ : path with 'd' followed by one or more digits (the doc ID)\n // - (/?auth=[^\\\\s]+)? : optional group for auth parameter\n\n const docPattern = new RegExp(\n `^https?://(${allowedDomains.join('|')})/d/\\\\d+(/\\\\?auth=[^\\\\s]+)?$`,\n 'i',\n );\n\n return docPattern.test(url);\n};\n","import React, {\n useState,\n useEffect,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport { PropTypes } from 'prop-types';\nimport { Editor } from '@tinymce/tinymce-react';\nimport nl2br from 'nl2br';\nimport pluralize from 'pluralize';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport { SegmentedMessage } from 'sms-segments-calculator';\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\nimport {\n isValidVideoURL,\n isValidDocumentURL,\n} from '~/helpers/SmsMessages/contentURLChecks';\nimport ClickableTooltip from '~/components/effects/clickable_tooltip';\nimport MmsAttachmentModal from '~/components/modals/attachments/MmsAttachmentModal';\nimport AssistModal from '~/components/modals/AiAssist/Modal';\nimport VideosModal from '~/components/modals/videos/VideosModal';\nimport {\n TINYMCE_SCRIPT_PATH,\n SMS_TEXT_EDITOR_PLUGINS,\n SMS_TEXT_EDITOR_TOOLBAR,\n} from '~/constants/TinyMCE';\nimport { initWebSpellChecker } from '~/lib/web_spell_checker';\n\nconst tooltipText = (\n <>\n Please Note on Text Segment Usage:\n\n \n
\n )}\n\n - \n
- Text messages are limitied to 160 characters and messages > 160 characters will be split across multiple segments. Certain characters like emojis 😁 can increase your count faster. \n
- MMS segments with image or videos count as 3 segments. \n
- \n Please be sure to monitor your text messaged segment usage\n {' '}\n here\n .\n \n
${href} `;\n\n newContent += linkHtml;\n });\n setContent(newContent);\n clearLinksToInsert();\n }\n }, [linksToInsert, clearLinksToInsert]);\n\n const formatContent = (text) => nl2br(text);\n\n const countTextChars = (text) => {\n let count = 0;\n if (typeof text === 'string') {\n count = new SegmentedMessage(text).numberOfCharacters;\n }\n return count;\n };\n\n const countTextSegments = (text) => {\n let newSegments = 0;\n if (typeof text === 'string') {\n const textWithoutNonBreakingSpaces = text.replace(/\\u00A0/g, ' ');\n newSegments = new SegmentedMessage(textWithoutNonBreakingSpaces).segmentsCount;\n }\n return newSegments;\n };\n\n const handleEditorChange = (newContent, editor) => {\n let text = '';\n text = editor.getContent({ format: 'text' });\n const urlPattern = /https?:\\/\\/[^\\s]+/g;\n const urls = text.match(urlPattern) || [];\n\n const hasValidURL = urls.some((url) => isValidVideoURL(url) || isValidDocumentURL(url));\n const newSegmentsCount = countTextSegments(text);\n\n setContent(newContent);\n setSegments(newSegmentsCount);\n setCharsCount(countTextChars(text));\n setHasURL(hasValidURL);\n onChange(text, newSegmentsCount);\n };\n\n const handleOnInit = (_event, editor) => {\n setLoading(false);\n\n if (value) {\n const text = formatContent(value);\n editor.setContent(text, { format: 'text' });\n }\n\n initWebSpellChecker(editor.iframeElement);\n };\n\n return (\n <>\n {showVideoWarning && (\n
\n It looks like you're trying to add a video to your text — great choice! Please\n {' '}\n upgrade your pricing plan\n {' '}\n to enable this feature.\n
\n )}\n\n \n\n \n {loading && (\n {\n editor.ui.registry.addIcon('videoIcon', '');\n editor.ui.registry.addIcon('usersIcon', '');\n\n editor.ui.registry.addButton('images', {\n icon: 'image',\n tooltip: 'Insert Image',\n onAction: () => {\n ReactDOM.render(\n
\n\n {!loading && (\n \n
\n )}\n\n \n <>\n \n {pluralize('Characters', charsCount, true)}\n {' '}\n -\n {' '}\n {mms ? '3 MMS Segments' : pluralize('SMS Segments', segments, true)}\n \n\n
\n )}\n \n );\n};\n\nSmsTextEditor.defaultProps = {\n id: '',\n value: '',\n mms: false,\n className: '',\n placeholder: 'Enter text or insert ...',\n replaceValue: null,\n linksToInsert: [],\n clearLinksToInsert: () => false,\n handleMediaUrlChange: () => false,\n clearReplaceValue: () => false,\n onChange: () => false,\n};\n\nSmsTextEditor.propTypes = {\n id: PropTypes.string,\n value: PropTypes.string,\n mms: PropTypes.bool,\n className: PropTypes.string,\n placeholder: PropTypes.string,\n replaceValue: PropTypes.string,\n linksToInsert: PropTypes.array,\n clearLinksToInsert: PropTypes.func,\n handleMediaUrlChange: PropTypes.func,\n clearReplaceValue: PropTypes.func,\n onChange: PropTypes.func,\n};\n\nexport default SmsTextEditor;\n","import React, {\n useState,\n useEffect,\n useRef,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport { PropTypes } from 'prop-types';\nimport { Editor } from '@tinymce/tinymce-react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\nimport VideosModal from '~/components/modals/videos/VideosModal';\nimport AssistModal from '~/components/modals/AiAssist/Modal';\nimport MentionsEditor from '~/components/forms/HtmlEditors/MentionsEditor';\nimport {\n TINYMCE_SCRIPT_PATH,\n TASK_EDITOR_PLUGINS,\n TASK_EDITOR_TOOLBAR,\n TASK_CAMPAIGN_EDITOR_TOOLBAR,\n IMAGES_UPLOAD_HANDLER,\n} from '~/constants/TinyMCE';\nimport { initWebSpellChecker } from '~/lib/web_spell_checker';\nimport EditorHelpers from '~/helpers/editor_helpers';\n\nconst TaskEditor = ({\n id,\n value,\n className,\n placeholder,\n onChange,\n isCampaingStep,\n spellCheck,\n linksToInsert,\n clearLinksToInsert,\n}) => {\n const [isFeatureEnabled, setIsFeatureEnabled] = useState(false);\n const [hasCheckedFeature, setHasCheckedFeature] = useState(false);\n const [loading, setLoading] = useState(true);\n const [content, setContent] = useState('');\n const editorRef = useRef(null);\n const init = {\n placeholder,\n license_key: 'gpl',\n plugins: TASK_EDITOR_PLUGINS,\n toolbar: isCampaingStep ? TASK_CAMPAIGN_EDITOR_TOOLBAR : TASK_EDITOR_TOOLBAR,\n toolbar_mode: 'wrap',\n branding: false,\n menubar: false,\n file_picker_types: 'image',\n min_height: 350,\n relative_urls: false,\n remove_script_host: false,\n document_base_url: Rails.baseUrl,\n forced_root_block: 'div',\n entity_encoding: 'named',\n content_style: 'body { font-family: Arial; font-size: 13px; }',\n paste_as_text: false,\n contextmenu: false,\n paste_remove_styles_if_webkit: false,\n statusbar: true,\n images_upload_handler: IMAGES_UPLOAD_HANDLER,\n setup: (editor) => {\n editor.ui.registry.addIcon('videoIcon', '');\n editor.ui.registry.addIcon('usersIcon', '');\n\n editor.ui.registry.addButton('videos', {\n icon: 'videoIcon',\n tooltip: 'Insert Video',\n onAction: () => {\n ReactDOM.render(\n \n Note: The hyperlink in this text will be shortened as it is delivered.\n
\n )}\n\n {segments > 1 && (\n \n This is a multi segment message and text billing is\n per segment\n
\n )}\n ${text} `;\n\n newContent += linkHtml;\n });\n setContent(newContent);\n clearLinksToInsert();\n }\n }, [linksToInsert, clearLinksToInsert]);\n\n useEffect(() => {\n initSpellCheckerForEditor();\n }, [spellCheck]);\n\n const initSpellCheckerForEditor = () => {\n const editor = editorRef.current;\n\n if (spellCheck && editor) {\n initWebSpellChecker(editor.iframeElement);\n }\n };\n\n const handleEditorChange = (_value, editor) => {\n const newContent = editor.getContent({ format: 'html' });\n setContent(newContent);\n onChange(newContent);\n };\n\n const handleOnInit = (_event, editor) => {\n setLoading(false);\n\n if (value) {\n editor.setContent(value, { format: 'html' });\n }\n\n editorRef.current = editor;\n initSpellCheckerForEditor();\n };\n\n return (\n <>\n
\n {loading && (\n
\n \n );\n};\n\nTaskEditor.defaultProps = {\n value: '',\n className: '',\n id: '',\n placeholder: 'Enter text or insert / drop images ...',\n onChange: () => false,\n isCampaingStep: false,\n spellCheck: true,\n linksToInsert: [],\n clearLinksToInsert: () => false,\n};\n\nTaskEditor.propTypes = {\n value: PropTypes.string,\n className: PropTypes.string,\n id: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n isCampaingStep: PropTypes.bool,\n spellCheck: PropTypes.bool,\n linksToInsert: PropTypes.array,\n clearLinksToInsert: PropTypes.func,\n};\n\nexport default TaskEditor;\n","export default class ActionHandler {\n constructor(ed, aCInstance) {\n this.editor = ed;\n this.aCInstance = aCInstance;\n this.options = this.aCInstance.options;\n this.process = this.aCInstance.process;\n }\n\n highlightPreviousResult = () => {\n const listItems = this.aCInstance.dropdown.querySelectorAll('li');\n const currentIndex = Array.from(listItems).findIndex((item) => item.classList.contains('active'));\n const index = (currentIndex <= 0) ? listItems.length - 1 : currentIndex - 1;\n\n listItems.forEach((item) => {\n item.classList.remove('active');\n });\n\n listItems[index].classList.add('active');\n }\n\n highlightNextResult = () => {\n const listItems = this.aCInstance.dropdown.querySelectorAll('li');\n const currentIndex = Array.from(listItems).findIndex((item) => item.classList.contains('active'));\n const index = (currentIndex === listItems.length - 1) ? 0 : currentIndex + 1;\n\n listItems.forEach((item) => {\n item.classList.remove('active');\n });\n\n listItems[index].classList.add('active');\n }\n\n select = (item) => {\n this.editor.focus();\n\n const selection = this.editor.dom.select('span#mentions-autocomplete')[0];\n\n this.editor.dom.remove(selection);\n\n if (item.id !== undefined) {\n this.editor.execCommand('mceInsertContent', false, this.insert(item));\n }\n }\n\n insert = (item) => (\n `\n ${this.options.delimiter}${item[this.options.insertFrom]}\n `\n );\n\n lookup = () => {\n const text = this.editor.getBody().querySelector('#autocomplete-searchtext')?.textContent || '';\n this.aCInstance.query = text.trim().replace('\\u200b', '');\n\n if (this.aCInstance.dropdown === undefined) {\n this.aCInstance.show();\n }\n\n clearTimeout(this.searchTimeout);\n this.searchTimeout = setTimeout(() => {\n const items = typeof this.options.source === 'function' ? this.options.source(this.query, this.process, this.options.delimiter) : this.options.source;\n if (items) {\n this.process(items);\n }\n }, this.options.delay);\n }\n}\n","import UIHandler from '~/components/forms/HtmlEditors/mentions/UIHandler';\nimport EventsHandler from '~/components/forms/HtmlEditors/mentions/EventsHandler';\nimport PositionHandler from '~/components/forms/HtmlEditors/mentions/PositionHandler';\nimport QueryHandler from '~/components/forms/HtmlEditors/mentions/QueryHandler';\n\nexport default class AutoComplete {\n constructor(ed, options, activityType) {\n this.editor = ed;\n this.activityType = activityType;\n\n this.options = {\n delay: 500,\n queryBy: 'name',\n items: 10,\n delimiter: '@',\n ...options,\n };\n\n this.queryHandler = new QueryHandler(ed, this, this.activityType);\n this.uiHandler = new UIHandler(ed, this);\n this.eventHandler = new EventsHandler(ed, this);\n this.positionHandler = new PositionHandler(ed);\n\n this.options.source = this.options.source || this.queryHandler.loadOptions();\n this.options.insertFrom = this.options.insertFrom || this.options.queryBy;\n this.matcher = this.options.matcher || this.queryHandler.matcher;\n this.sorter = this.options.sorter || this.queryHandler.sorter;\n this.renderDropdown = this.options.renderDropdown || this.uiHandler.renderDropdown;\n this.render = this.options.renderItem || this.uiHandler.renderItem;\n this.insert = this.options.insert || this.insert;\n this.highlighter = this.options.highlighter || this.highlighter;\n\n this.query = '';\n this.hasFocus = true;\n this.dropdown = undefined;\n\n this.uiHandler.renderInput(ed);\n this.eventHandler.bindEvents();\n }\n\n show = () => {\n const autocompleteSpan = this.editor.dom.select('span#mentions-autocomplete')[0];\n if (!autocompleteSpan) {\n return;\n }\n const offset = this.editor.inline ? this.positionHandler.offsetInline() : this.positionHandler.offset();\n\n this.dropdown = this.renderDropdown();\n\n this.dropdown.style.top = `${offset.top}px`;\n this.dropdown.style.left = `${offset.left}px`;\n\n document.body.appendChild(this.dropdown);\n\n this.dropdown.addEventListener('click', this.eventHandler.autoCompleteClick);\n }\n\n process = (data) => {\n if (!this.hasFocus) {\n return;\n }\n\n const result = [];\n\n let items = data.filter((item) => this.matcher(item));\n\n items = this.queryHandler.sorter(items);\n\n items = items.slice(0, this.options.items);\n\n items.forEach((item, i) => {\n const element = document.createElement('li');\n element.innerHTML = this.uiHandler.renderItem(item, i);\n\n Object.keys(items[i]).forEach((key) => {\n element.setAttribute(`data-${key}`, items[i][key]);\n });\n\n result.push(element.outerHTML);\n });\n\n if (result.length) {\n this.dropdown.innerHTML = result.join('');\n this.dropdown.style.display = 'block';\n } else {\n this.dropdown.style.display = 'none';\n const listItems = this.dropdown.querySelectorAll('li');\n\n listItems.forEach((item) => {\n item.classList.remove('active');\n });\n }\n }\n\n cleanUp = (rollback) => {\n this.eventHandler.unbindEvents();\n this.hasFocus = false;\n\n if (this.dropdown !== undefined) {\n this.dropdown.remove();\n delete this.dropdown;\n }\n\n if (rollback && this.editor.isHidden()) {\n const text = this.query;\n const selection = this.editor.dom.select('span#mentions-autocomplete');\n\n if (!selection.length) {\n return;\n }\n const paragraph = document.createElement('p');\n paragraph.innerHTML = `${this.options.delimiter}${text}`;\n const replacement = paragraph.firstChild;\n\n const editorSelectionOffsetTop = this.editor.selection.getNode().getBoundingClientRect().top + window.scrollY;\n const autocompleOffsetTop = selection[0].getBoundingClientRect().top + window.scrollY;\n\n const focus = editorSelectionOffsetTop === autocompleOffsetTop;\n\n this.editor.dom.replace(replacement, selection[0]);\n\n if (focus) {\n this.editor.selection.select(replacement);\n this.editor.selection.collapse();\n }\n }\n }\n}\n","import ActionHandler from '~/components/forms/HtmlEditors/mentions/ActionHandler';\nimport { captureEvent } from '~/helpers/capture_posthog_event';\n\nexport default class AutoCompleteEvents {\n constructor(ed, aCInstance) {\n this.editor = ed;\n this.aCInstance = aCInstance;\n this.actionHandler = new ActionHandler(ed, aCInstance);\n this.cleanUp = aCInstance.cleanUp;\n }\n\n bindEvents = () => {\n this.editor.on('keyup', this.rteKeyUp.bind(this));\n this.editor.on('keydown', this.rteKeyDown.bind(this));\n this.editor.on('click', this.rteClicked.bind(this));\n\n document.body.addEventListener('click', this.rteLostFocus.bind(this));\n\n this.editor.getWin().addEventListener('scroll', this.rteScroll = () => { this.cleanUp(true); });\n this.addParentScrollListener(this.editor.getContainer());\n }\n\n unbindEvents = () => {\n this.editor.off('keyup', this.rteKeyUp);\n this.editor.off('keydown', this.rteKeyDown);\n this.editor.off('click', this.rteClicked);\n\n document.body.removeEventListener('click', this.bodyClickProxy);\n this.removeParentScrollListener(this.editor.getContainer());\n\n if (this.editor.getWin()) {\n this.editor.getWin().removeEventListener('scroll', this.rteScroll);\n }\n }\n\n rteKeyUp = (e) => {\n switch (e.which || e.keyCode) {\n case 40: // DOWN ARROW\n case 38: // UP ARROW\n case 16: // SHIFT\n case 17: // CTRL\n case 18: // ALT\n break;\n case 8: // BACKSPACE\n if (this.aCInstance.query === '') {\n this.cleanUp(true);\n } else {\n this.actionHandler.lookup();\n }\n break;\n\n case 9: // TAB\n case 13: { // ENTER\n const item = this.aCInstance.dropdown !== undefined ? this.aCInstance.dropdown.querySelector('li.active') : null;\n\n if (item !== null) {\n this.actionHandler.select(item.dataset);\n this.cleanUp(false);\n } else {\n this.cleanUp(true);\n }\n break;\n }\n case 27: // ESC\n this.cleanUp(true);\n break;\n\n default:\n this.actionHandler.lookup();\n }\n }\n\n rteKeyDown = (e) => {\n switch (e.which || e.keyCode) {\n case 9: // TAB\n case 13: // ENTER\n case 27: // ESC\n e.preventDefault();\n break;\n case 38: // UP ARROW\n e.preventDefault();\n if (this.aCInstance.dropdown !== undefined) {\n this.actionHandler.highlightPreviousResult();\n }\n break;\n case 40: // DOWN ARROW\n e.preventDefault();\n if (this.aCInstance.dropdown !== undefined) {\n this.actionHandler.highlightNextResult();\n }\n break;\n default:\n }\n\n e.stopPropagation();\n }\n\n rteClicked = (e) => {\n const { target: { parentNode } } = e;\n\n if (this.aCInstance.hasFocus && parentNode.getAttribute?.('id') !== 'autocomplete-searchtext') {\n this.cleanUp(true);\n }\n }\n\n rteLostFocus = () => {\n if (this.aCInstance.hasFocus) {\n this.cleanUp(true);\n }\n };\n\n autoCompleteClick = (e) => {\n const item = e.target.closest('li')?.dataset;\n if (item && Object.keys(item).length !== 0) {\n this.actionHandler.select(item);\n this.cleanUp(false);\n }\n e.stopPropagation();\n e.preventDefault();\n captureEvent('at_mention');\n }\n\n updatePosition = () => {\n const offset = this.aCInstance.positionHandler.offset();\n this.aCInstance.dropdown.style.top = `${offset.top}px`;\n this.aCInstance.dropdown.style.left = `${offset.left}px`;\n }\n\n addParentScrollListener = (el) => {\n let parent = el.parentNode;\n\n while (parent) {\n if (parent.scrollHeight > parent.clientHeight) {\n parent.addEventListener('scroll', this.updatePosition);\n }\n parent = parent.parentNode;\n }\n }\n\n removeParentScrollListener = (el) => {\n let parent = el.parentNode;\n\n while (parent) {\n // Consider the element only if it is scrollable\n if (parent.scrollHeight > parent.clientHeight) {\n // Listen for the scroll event\n parent.removeEventListener('scroll', this.updatePosition);\n }\n parent = parent.parentNode;\n }\n }\n}\n","export default class PositionHandler {\n constructor(editor) {\n this.editor = editor;\n }\n\n offset = () => {\n const editorContainerRect = this.editor.getContainer().getBoundingClientRect();\n const editorContentAreaRect = this.editor.getContentAreaContainer();\n const autocompleteSpan = this.editor.dom.select('span#mentions-autocomplete')[0];\n const scrollTop = this.editor.getDoc().documentElement.scrollTop || this.editor.getDoc().body.scrollTop;\n\n const rtePosition = { top: editorContainerRect.top + window.scrollY, left: editorContainerRect.left + window.scrollX };\n const contentAreaPosition = { top: editorContentAreaRect.offsetTop, left: editorContentAreaRect.offsetLeft };\n\n const nodePosition = {\n top: autocompleteSpan.offsetTop,\n left: autocompleteSpan.offsetLeft,\n };\n\n return {\n top: rtePosition.top + contentAreaPosition.top + nodePosition.top + this.editor.selection.getNode().clientHeight - scrollTop + 25,\n left: rtePosition.left + contentAreaPosition.left + nodePosition.left,\n };\n }\n\n offsetInline = () => {\n const nodePosition = this.editor.dom.select('span#mentions-autocomplete').getBoundingClientRect();\n\n return {\n top: nodePosition.top + this.editor.selection.getNode().offsetHeight + 5,\n left: nodePosition.left,\n };\n }\n}\n","import APIRequest from '~/lib/api_request';\n\nexport default class QueryHandler {\n constructor(ed, aCInstance, activityType) {\n this.editor = ed;\n this.activityType = activityType;\n this.aCInstance = aCInstance;\n this.options = aCInstance.options;\n }\n\n matcher = (item) => {\n const lowercaseItemValue = item[this.options.queryBy].toLowerCase();\n const lowercaseQuery = this.aCInstance.query.toLowerCase();\n const index = lowercaseItemValue.indexOf(lowercaseQuery);\n\n return index === 0 || lowercaseItemValue[index - 1] === ' ';\n };\n\n sorter = (items) => {\n const beginswith = [];\n const caseSensitive = [];\n const caseInsensitive = [];\n let item = null;\n const { query } = this.aCInstance;\n\n while (item = items.shift()) { // eslint-disable-line no-cond-assign\n if (!item[this.options.queryBy].toLowerCase().indexOf(query.toLowerCase())) {\n beginswith.push(item);\n } else if (~item[this.options.queryBy].indexOf(query)) { // eslint-disable-line no-bitwise\n caseSensitive.push(item);\n } else {\n caseInsensitive.push(item);\n }\n }\n\n return beginswith.concat(caseSensitive, caseInsensitive);\n }\n\n loadOptions() {\n const params = GlobalContainer.urlParams();\n\n const request = APIRequest.get({\n resource: '/v1/team/members_role_options',\n data: { lead_id: params.lead, activity_type: this.activityType },\n });\n\n request.end((error, response) => {\n if (error) return;\n\n const data = response.body.data ? response.body.data : response.body;\n const options = data.map((u) => ({ avatar: u.avatar_url, id: u.id.toString(), name: u.name }));\n\n this.aCInstance.options.source = options;\n });\n }\n}\n","export default class AutoCompleteUI {\n constructor(editor, aCInstance) {\n this.editor = editor;\n this.queryBy = aCInstance.options.queryBy;\n }\n\n renderInput = () => {\n const rawHtml = `\n \n @\n \n \\u200b\n \n `;\n\n this.editor.execCommand('mceInsertContent', false, rawHtml);\n this.editor.focus();\n this.selectFirstDummySpan();\n };\n\n selectFirstDummySpan = () => {\n const dummySpan = this.editor.selection.dom.select('span#autocomplete-searchtext span')[0];\n this.editor.selection.select(dummySpan);\n this.editor.selection.collapse(0);\n };\n\n renderDropdown = () => {\n const dropdown = document.createElement('ul');\n dropdown.className = 'rte-autocomplete dropdown-menu';\n\n const listItem = document.createElement('li');\n listItem.className = 'loading text-center';\n\n const spinnerIcon = document.createElement('i');\n spinnerIcon.className = 'far fa-spinner';\n\n listItem.appendChild(spinnerIcon);\n\n dropdown.appendChild(listItem);\n\n return dropdown;\n }\n\n renderItem = (item, index) => `\n \n \n
\n )}\n\n {isCampaingStep || (hasCheckedFeature && !isFeatureEnabled) ? (\n \n
\n );\n};\n\nIconInput.defaultProps = {\n side: 'left',\n iconPrefix: 'far',\n className: '',\n};\n\nIconInput.propTypes = {\n icon: PropTypes.string.isRequired,\n iconPrefix: PropTypes.string,\n side: PropTypes.string,\n className: PropTypes.string,\n};\n\nexport default IconInput;\n","import React from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nexport const SkeletonText = ({\n width = '100px',\n height = '1em',\n className = '',\n}) => (\n \n It looks like the following duplicates exist in other accounts linked in this organization:\n {' '}\n {' '}\n \n {duplicate_org_accounts.join(', ')}\n \n
\n);\n\nAllowOrgDuplicateCheckbox.defaultProps = {\n duplicate_org_accounts: [],\n onChange: () => false,\n};\n\nAllowOrgDuplicateCheckbox.propTypes = {\n duplicate_org_accounts: PropTypes.shape([]),\n onChange: PropTypes.func,\n};\n\nexport default AllowOrgDuplicateCheckbox;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport Select from '~/components/forms/select';\n\nclass AudienceSelect extends React.Component {\n constructor(props) {\n super(props);\n\n const options = [\n { value: 'leads', label: 'LEADS' },\n { value: 'team', label: 'TEAM' },\n ];\n\n this.state = {\n options,\n };\n\n autoBind(this);\n }\n\n render() {\n const { options } = this.state;\n const { value } = this.props;\n\n return (\n \n Please confirm you want to create a duplicate before proceeding.\n
\n \n onChange(e.target.checked)}\n />\n \n
\n \n {suggestion.name}\n
\n );\n\n onChange = (event, { newValue }) => {\n const { onChange } = this.props;\n\n this.setState({ value: newValue }, () => {\n onChange(newValue);\n });\n };\n\n // Autosuggest will call this function every time you need to update suggestions.\n // You already implemented this logic above, so just use it.\n onSuggestionsFetchRequested = ({ value }) => {\n this.setState({\n suggestions: this.getSuggestions(value),\n });\n };\n\n onSuggestionsClearRequested = () => {\n this.setState({\n suggestions: [],\n });\n };\n\n render() {\n const {\n id, name, placeholder, styles, value,\n } = this.props;\n const { suggestions } = this.state;\n\n // Autosuggest will pass through all these props to the input.\n const inputProps = {\n id,\n name,\n placeholder,\n value,\n onChange: this.onChange,\n className: styles,\n };\n\n return (\n \n\n \n \n );\n }\n}\n\nexport default UpdateCardForm;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport Select from '~/components/forms/select';\n\nclass BusinessTypeSelect extends React.Component {\n constructor(props) {\n super(props);\n\n // https://www.twilio.com/docs/sms/a2p-10dlc/onboarding-isv-api?code-sample=code-create-an-empty-secondary-customer-profile-bundle&code-language=Ruby&code-sdk-version=5.x#13-create-end-user-object-of-type-customer_profile_business_information\n const options = [\n { value: 'Sole Proprietorship', label: 'Sole Proprietorship' },\n { value: 'Partnership', label: 'Partnership' },\n { value: 'Co-operative', label: 'Co-operative' },\n { value: 'Non-profit Corporation', label: 'Non-profit' },\n { value: 'Corporation', label: 'Corporation' },\n { value: 'Limited Liability Corporation', label: 'Limited Liability Corporation' },\n ];\n\n this.state = {\n options,\n };\n\n autoBind(this);\n }\n\n render() {\n const { options } = this.state;\n const { value } = this.props;\n\n return (\n
\n (this.monthSelect = el)}\n className=\"form-control mr5 mb5-sm-down\"\n style={{ position: 'relative', top: '-8px' }}\n onChange={this.handleChange}\n value={date.getMonth()}\n >\n {months.map((month, i) => (\n \n ))}\n \n\n {enableYearSelect && (\n (this.yearSelect = el)}\n className=\"form-control\"\n style={{ position: 'relative', top: '-8px' }}\n onChange={this.handleChange}\n value={date.getFullYear()}\n >\n {years.map((year) => (\n \n ))}\n \n )}\n
\n );\n }\n}\n\nclass DatePicker extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n active: false,\n title: this.props.title,\n };\n\n if (this.props.value) {\n this.state.value = Moment(this.props.value);\n }\n\n autoBind(this);\n }\n\n UNSAFE_componentWillReceiveProps(props) {\n if (props.value && props.value != this.state.value) {\n this.state.value = Moment(props.value);\n }\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.value !== this.props.value) {\n this.setState({ value: this.props.value });\n }\n }\n\n onFocus(e) {\n e.preventDefault();\n this.input.showDayPicker();\n }\n\n onBlur(e) {\n e.preventDefault();\n if (!this.input.clickedInside) {\n this.input.hideDayPicker();\n }\n }\n\n registerButton(button) {\n this.button = button;\n }\n\n registerInput(input) {\n this.input = input;\n }\n\n toggleActivation(e) {\n e.preventDefault();\n const { active } = this.state;\n const activeState = !active;\n\n this.setState({\n active: activeState,\n });\n\n if (activeState) {\n this.input.showDayPicker();\n }\n }\n\n onChangeInput(event) {\n const { onChange, clearable } = this.props;\n\n if (!event.target.value && clearable) {\n this.setState({ value: '' });\n onChange('');\n }\n }\n\n handleDayChange(momentDate, modifiers) {\n const { format, onChange } = this.props;\n\n this.setState({\n active: false,\n title: momentDate.format(format),\n value: momentDate.local(),\n });\n\n onChange(momentDate.local(), modifiers);\n }\n\n changeDisplayDate(date) {\n this.input.setState({ month: date.toDate() });\n }\n\n renderSelectButton() {\n const { className, style } = this.props;\n const { active } = this.state;\n\n const btnClassName = classNames(className, 'btn btn-secondary', { active });\n\n return (\n \n
\n );\n }\n\n render() {\n const {\n disabledDays, kind, captionElement, enableYearSelect, right, style,\n } = this.props;\n\n let component;\n switch (kind) {\n case 'button':\n component = this.renderSelectButton;\n break;\n case 'input':\n component = this.renderInput;\n break;\n case 'link':\n component = this.renderLink;\n break;\n default:\n break;\n }\n const containerClasses = classNames('DayPickerInput', kind === 'link' ? '' : 'DayPickerInput-Block');\n const modifiedCaptionElement = captionElement || (\n ({ date, localeUtils }) => (\n \n {showCCEmails && enableCCField && (\n
\n );\n }\n\n renderExtraFeatureMenu() {\n const { showCCEmails } = this.state;\n const { enableCCField } = this.props;\n\n return (\n \n \n Cancel and hide\n \n \n
\n )}\n \n {!showCCEmails && enableCCField && (\n \n \n Add CC Emails\n \n \n )}\n
\n );\n }\n\n renderAttachments(attachments) {\n return attachments.map((f) => (\n \n
\n ));\n }\n\n render() {\n const {\n from,\n subject,\n body,\n errors,\n templateBody,\n attachmentsLoading,\n attachments,\n attachmentsError,\n enableEmailTemplate,\n linksToInsert,\n } = this.state;\n const { enableFromField, disableSignature, contactOwner } = this.props;\n\n const { currentUser } = Rails.helpers;\n const { signature } = currentUser;\n\n const emailContent = body || '';\n const signatureContent = signature || '';\n\n let emailValue;\n if (!_lodash.isEmpty(emailContent) || disableSignature) {\n emailValue = emailContent;\n } else {\n emailValue = `${emailContent}${signatureContent}`;\n }\n const showSignatureNag = !signature && localStorage['emailForm.hideSignatureNag'] !== 1;\n\n return (\n \n {\n e.preventDefault();\n this.onRemoveAttachment(f.id);\n }}\n >\n
\n \n
\n \n {enableFromField && (\n
\n );\n }\n}\n\nEmailForm.defaultProps = {\n errors: {},\n from: '',\n subject: '',\n body: '',\n attachments: [],\n disableSignature: false,\n enableFromField: false,\n enableCCField: false,\n contactOwner: false,\n onChange: () => false,\n validateFromDomainAndRecipients: () => false,\n};\n\nEmailForm.propTypes = {\n errors: PropTypes.shape({}),\n from: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n subject: PropTypes.string,\n body: PropTypes.string,\n attachments: PropTypes.arrayOf(PropTypes.shape({})),\n disableSignature: PropTypes.bool,\n enableFromField: PropTypes.bool,\n enableCCField: PropTypes.bool,\n contactOwner: PropTypes.bool,\n onChange: PropTypes.func,\n validateFromDomainAndRecipients: PropTypes.func,\n};\n\nexport default EmailForm;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport isEmail from 'validator/lib/isEmail';\n\nimport Select from '~/components/forms/select';\n\nclass EmailSelect extends React.Component {\n constructor(props) {\n super(props);\n\n let selectedEmails = [];\n let selectedOptions = [];\n\n const { multi, localStorageKey, value } = props;\n\n if (multi) {\n if (localStorageKey && localStorage[localStorageKey]) {\n selectedEmails = localStorage[localStorageKey].split(',');\n } else if (value) {\n selectedEmails = value.split(',');\n }\n selectedOptions = _lodash.map(selectedEmails, (email) => ({ value: email, label: email }));\n }\n\n this.state = {\n multiValue: selectedEmails,\n options: selectedOptions,\n value: props.value,\n };\n\n autoBind(this);\n }\n\n handleOnChange(value) {\n const { multi, localStorageKey, onChange } = this.props;\n\n if (multi) {\n this.setState({ multiValue: value });\n if (localStorageKey) localStorage[localStorageKey] = _lodash.map(value, (select) => select.value).join(',');\n } else {\n this.setState({ value });\n if (localStorageKey) localStorage[localStorageKey] = value;\n }\n if (onChange) { onChange(value); }\n }\n\n isValidNewOption(value) {\n return value.label && isEmail(value.label);\n }\n\n render() {\n const { multi, className } = this.props;\n const { multiValue, options, value } = this.state;\n\n return (\n \n \n
\n )}\n\n {this.renderExtraFeatures()}\n\n \n {this.renderExtraFeatureMenu()}\n \n
\n\n \n \n {\n this.setState({\n templateBody: null,\n });\n }}\n linksToInsert={linksToInsert}\n clearLinksToInsert={() => {\n this.setState({ linksToInsert: [] });\n }}\n />\n\n {showSignatureNag && (\n
\n\n \n Need to add a signature? Add it in \n
\n
\n \n
\n\n \n \n {({ getRootProps, getInputProps }) => (\n \n this.setState({ linksToInsert })}\n />\n\n {this.renderAttachments(attachments)}\n\n {attachmentsError && (\n
\n \n \n {attachmentsLoading ? (\n
\n )}\n {attachmentsError}
\n )}\n \n {enableEmailTemplate && (\n
\n \n
\n );\n }\n}\n\nEmailTemplateSelect.defaultProps = {\n subject: '',\n body: '',\n attachments: [],\n applyTemplate: () => false,\n validateEmailTemplate: () => false,\n};\n\nEmailTemplateSelect.propTypes = {\n subject: PropTypes.string,\n body: PropTypes.string,\n attachments: PropTypes.arrayOf(PropTypes.shape({})),\n applyTemplate: PropTypes.func,\n validateEmailTemplate: PropTypes.func,\n};\n\nexport default EmailTemplateSelect;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport autoBind from 'react-autobind';\nimport { Link } from 'react-router-dom';\n\nimport Select from '~/components/forms/select';\nimport MlsServiceRequest from '~/lib/mls_service_request';\n\nclass ImportersSelect extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n options: [],\n value: props.value,\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n MlsServiceRequest.get({\n resource: '/importers',\n }).end((error, response) => {\n this.setState({ loading: false }, () => {\n if (!error) {\n const options = response.body.map((importer) => ({\n label: importer.name,\n value: importer.id,\n }));\n\n this.setState({ options });\n }\n });\n });\n }\n\n handleSelectChange = (selectedOption) => {\n const value = selectedOption ? selectedOption.value || selectedOption : null;\n const { onChange } = this.props;\n\n this.setState({ value }, () => {\n onChange(selectedOption);\n });\n }\n\n render() {\n const { placeholder, clearable, className } = this.props;\n const { value, loading, options } = this.state;\n\n return (\n \n
\n\n { selectedTemplate && (\n \n
\n )}\n \n \n \n Options\n \n \n \n Save changes\n \n \n Delete\n \n \n \n
\n \n {\n this.input = el;\n }}\n value={this.state.value || ''}\n onChange={this.onChange}\n disabled={disabled}\n />\n
\n );\n }\n}\n\nInputWithIcon.defaultProps = {\n name: '',\n value: '',\n type: 'text',\n side: 'left',\n onChange: () => false,\n focusOnIconClick: true,\n disabled: false,\n};\n\nInputWithIcon.propTypes = {\n name: PropTypes.string,\n className: PropTypes.string,\n icon: PropTypes.string.isRequired,\n prefix: PropTypes.string.isRequired,\n side: PropTypes.string,\n size: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n focusOnIconClick: PropTypes.bool,\n onChange: PropTypes.func,\n disabled: PropTypes.bool,\n};\n\nexport default InputWithIcon;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport Select from '~/components/forms/select';\n\nclass JobPositionSelect extends React.Component {\n constructor(props) {\n super(props);\n\n const options = [\n { value: 'Director', label: 'Director' },\n { value: 'GM', label: 'GM' },\n { value: 'VP', label: 'VP' },\n { value: 'CEO', label: 'CEO' },\n { value: 'CFO', label: 'CFO' },\n { value: 'General Counsel', label: 'General Counsel' },\n { value: 'Other', label: 'Other' },\n ];\n\n this.state = {\n options,\n };\n\n autoBind(this);\n }\n\n render() {\n const { options } = this.state;\n const { value } = this.props;\n\n return (\n \n \n
\n \n \n );\n }\n\n return (\n React.createElement(\n (this.props.inline ? 'span' : 'div'),\n { className: this.props.bulk ? '' : 'position-relative col p0' },\n triggerComponent,\n inputComponent,\n )\n );\n }\n}\n\nexport default FollowUpPicker;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Select from '~/components/forms/select';\nimport APIRequest from '~/lib/api_request';\n\nclass LabelSelect extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n options: [],\n value: props.value && _lodash.map(props.value, (v) => parseInt(v, 10)),\n };\n }\n\n componentDidMount() {\n const { blank } = this.props;\n\n APIRequest.get({\n resource: '/v1/labels',\n }).end((error, response) => {\n this.setState({ loading: false }, () => {\n if (!error) {\n let options = response.body.map((label) => ({\n label: `${label.name} (${label.leads_count})`,\n value: label.id,\n }));\n\n if (blank) options = [{ value: '-blank-', label: '-blank-' }, ...options];\n\n this.setState({ options });\n }\n });\n });\n }\n\n handleSelectChange = (selectedOption) => {\n const value = selectedOption ? selectedOption.value || selectedOption : null;\n const { onChange } = this.props;\n\n this.setState({ value }, () => {\n onChange(selectedOption);\n });\n }\n\n render() {\n const {\n placeholder, multi, clearable, className,\n } = this.props;\n\n const { value, loading, options } = this.state;\n\n return (\n \n \n
\n ) : null)}\n \n );\n};\n\nLeadsSelect.defaultProps = {\n id: '',\n placeholder: 'Please Select Value...',\n multiple: true,\n onChange: () => {},\n selected_ids: [],\n};\n\nLeadsSelect.propTypes = {\n id: PropTypes.string,\n placeholder: PropTypes.string,\n multiple: PropTypes.bool,\n onChange: PropTypes.func,\n selected_ids: PropTypes.arrayOf(PropTypes.number),\n};\n\nexport default LeadsSelect;\n","import React, { useEffect, useState } from 'react';\nimport ReactSelect from 'react-select-4';\n\nimport APIRequest from '~/lib/api_request';\nimport LeadHelpers from '~/helpers/lead_helpers';\n\nconst selectAllOption = {\n id: '\n
\n );\n }\n}\n\nSmsTemplateSelect.defaultProps = {\n body: '',\n media_url: '',\n media_name: '',\n applyTemplate: () => false,\n validateSmsTemplate: () => false,\n};\n\nSmsTemplateSelect.propTypes = {\n body: PropTypes.string,\n media_url: PropTypes.string,\n media_name: PropTypes.string,\n applyTemplate: PropTypes.func,\n validateSmsTemplate: PropTypes.func,\n};\n\nexport default SmsTemplateSelect;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport Select from '~/components/forms/select';\n\nclass StatementSelect extends React.Component {\n constructor(props) {\n super(props);\n\n const options = [\n { value: 'all', label: 'ALL' },\n { value: 'any', label: 'ANY' },\n ];\n\n this.state = {\n options,\n };\n\n autoBind(this);\n }\n\n render() {\n const { options } = this.state;\n const { value } = this.props;\n\n return (\n \n
\n\n { selectedTemplate && (\n \n
\n )}\n \n \n \n Options\n \n \n \n Save changes\n \n \n Delete\n \n \n \n
\n \n { label\n && (\n \n )}\n { this.select = el; }}\n isLoading={loading}\n options={members}\n value={this.state.value}\n disabled={this.state.disabled}\n openOnFocus\n optionRenderer={this.renderOption}\n onChange={this.props.onChange}\n />\n
\n );\n }\n}\n\nSmsNumberPicker.defaultProps = {\n name: '',\n value: '',\n clearable: false,\n blank: false,\n apiResource: '/v1/team/members',\n};\n\nSmsNumberPicker.propTypes = {\n name: PropTypes.string,\n value: PropTypes.string,\n clearable: PropTypes.bool,\n apiResource: PropTypes.string,\n options: PropTypes.array,\n blank: PropTypes.bool,\n onChange: PropTypes.func,\n};\n\nexport default TeamMemberPicker;\n","import TeamMemberPicker from '~/components/forms/team_fields/team_member_picker';\n\nclass TeamAffiliatePicker extends TeamMemberPicker {}\n\nTeamAffiliatePicker.defaultProps = {\n apiResource: '/v1/team/affiliates_options',\n key: 'teamAffiliatePicker',\n};\n\nexport default TeamAffiliatePicker;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport APIRequest from '~/lib/api_request';\nimport Select from '~/components/forms/select';\nimport { validateOptionValueExists } from '~/lib/form_validators';\n\nclass TeamEmailPicker extends React.Component {\n _isMounted = false;\n\n constructor(props) {\n super(props);\n\n const value = props.value ? props.value.toString() : '';\n\n this.state = {\n disabled: false,\n value,\n loading: false,\n options: [],\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.loadOptions();\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const value = nextProps.value ? nextProps.value.toString() : '';\n this.setState({\n value,\n });\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n loadOptions() {\n const { contactOwner } = this.props;\n\n this._isMounted = true;\n this.setState({ loading: true });\n\n const request = APIRequest.get({\n resource: '/v1/team/teammates_options',\n });\n\n request.end((error, response) => {\n if (this._isMounted) {\n if (error) return;\n\n const options = response.body.data.map((u) => ({\n label: `${u.name} <${u.email}>`,\n value: u.email,\n }));\n\n if (contactOwner) options.unshift({ value: -1, label: \"Contact's Owner\" });\n\n this.setState({\n options,\n loading: false,\n }, () => {\n // Validate current value against loaded options\n this.validateEmailExists(this.state.value);\n });\n }\n });\n }\n\n validateEmailExists(emailValue) {\n const { options } = this.state;\n const { onChange } = this.props;\n validateOptionValueExists(emailValue, options, onChange);\n }\n\n render() {\n const { label, onChange } = this.props;\n const {\n loading, options, disabled, value,\n } = this.state;\n\n return (\n \n { label && (\n \n )}\n { this.select = el; }}\n isLoading={loading}\n options={options}\n value={value}\n disabled={disabled}\n openOnFocus\n onChange={onChange}\n />\n
\n );\n }\n}\n\nTeamEmailPicker.defaultProps = {\n name: '',\n value: '',\n clearable: false,\n contactOwner: false,\n onChange: () => false,\n};\n\nTeamEmailPicker.propTypes = {\n name: PropTypes.string,\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n clearable: PropTypes.bool,\n contactOwner: PropTypes.bool,\n onChange: PropTypes.func,\n};\n\nexport default TeamEmailPicker;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Input } from 'reactstrap';\nimport isEmail from 'validator/lib/isEmail';\n\nimport APIRequest from '~/lib/api_request';\nimport Select from '~/components/forms/select';\nimport RoleSelect from '~/components/forms/team_fields/role_select';\nimport ErrorMessageWithIcon from '~/components/forms/ErrorMessageWithIcon';\nimport DuplicateContactCard from '~/components/duplicate_contact_card';\nimport AllowOrgDuplicateCheckBox from '~/components/forms/allow_org_duplicate_checkbox';\n\nclass TeamMemberPicker extends React.Component {\n _isMounted = false;\n\n constructor(props) {\n super(props);\n autoBind(this);\n\n const value = props.value ? props.value.toString() : '';\n\n this.state = {\n value,\n loading: true,\n addableErrors: [],\n members: [],\n duplicates_found_in_org: false,\n allow_duplicates_in_org: false,\n duplicate_org_accounts: [],\n };\n\n this.loadOptions = this.loadOptions.bind(this);\n }\n\n componentDidMount() {\n this.loadOptions();\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const value = nextProps.value ? nextProps.value.toString() : '';\n this.setState({\n value,\n });\n }\n\n componentDidUpdate(prevProps) {\n const { level } = this.props;\n\n if (prevProps.level !== level) {\n this.setState({\n loading: true,\n });\n this.loadOptions();\n }\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n handleAllowDuplicatesChange(value) {\n this.setState({ allow_duplicates_in_org: value });\n }\n\n onSubmitAddable(e) {\n e.preventDefault();\n\n const {\n first_name, last_name, email, role, allow_duplicates_in_org,\n } = this.state;\n const { onChange } = this.props;\n\n this.setState({\n addableSending: true, duplicates_found_in_org: false, duplicate_org_accounts: [], addableErrors: [],\n });\n\n if (this.validateAddable()) {\n APIRequest\n .post({\n resource: '/v1/team/members',\n data: {\n user: {\n first_name,\n last_name,\n notify: true,\n },\n role: {\n name: role,\n },\n lead: {\n lead_emails_attributes: [{\n id: null,\n email,\n email_type: 'office',\n main: true,\n _destroy: false,\n }],\n allow_duplicates_in_org,\n },\n },\n })\n .end((err, res) => {\n const errors = res.body || {};\n let { duplicates_found_in_org } = this.state;\n\n if (errors.duplicate_emails) {\n const duplicate_org_accounts = [];\n const dup = errors.duplicate_emails[0];\n\n if (dup.context === 'org') {\n duplicate_org_accounts.push(`${dup.match.name} - Email: ${dup.value}`);\n duplicates_found_in_org = true;\n }\n\n errors.email = 'It looks like a contact with this email already exists.';\n errors.duplicate = {\n context: dup.context,\n match: dup.match,\n };\n\n this.setState({\n addableSending: false, addableErrors: errors, duplicates_found_in_org, duplicate_org_accounts,\n });\n } else {\n this.loadOptions();\n const newTeamMemberOption = { value: res.body.id.toString(), addableOpen: false, addableSending: false };\n this.setState(newTeamMemberOption);\n if (onChange) onChange(newTeamMemberOption);\n }\n });\n } else {\n this.setState({ addableSending: false });\n }\n }\n\n validateAddable() {\n const {\n first_name, last_name, email, role,\n } = this.state;\n const errors = {};\n\n if (!first_name) {\n errors.first_name = 'This field can not be empty';\n }\n\n if (!last_name) {\n errors.last_name = 'This field can not be empty';\n }\n\n if (email) {\n if (!isEmail(email)) {\n errors.email = 'The provided email is invalid';\n }\n } else {\n errors.email = ['Please add an email address to create this record so that there is a way to match and update the data later and this email will function as their username'];\n }\n\n if (!role) {\n errors.role = 'This field can not be empty';\n }\n\n this.setState({ addableErrors: errors });\n\n return _lodash.size(errors) === 0;\n }\n\n loadOptions() {\n const {\n apiResource, blank, contactOwner, multi, show_all, clearLabel, level,\n } = this.props;\n this._isMounted = true;\n\n const request = APIRequest.get({\n resource: apiResource,\n data: {\n level,\n },\n });\n\n request.end((error, response) => {\n if (this._isMounted) {\n if (error) return;\n\n const data = response.body.data ? response.body.data : response.body;\n const options = data.map((u) => ({ user: u, value: u.id.toString(), label: u.name }));\n\n if (blank) options.unshift({ value: '-blank-', label: '-blank-' });\n\n if (contactOwner) options.unshift({ value: -1, label: \"Contact's Owner\" });\n\n if (!multi && show_all) {\n options.unshift({ value: '', label: clearLabel });\n }\n\n this.setState({\n members: options,\n loading: false,\n });\n }\n });\n }\n\n renderOption(opt) {\n const { skipAvatar } = this?.props || {};\n\n if (opt.user) {\n return (\n \n {!skipAvatar && (
)}\n {opt.user.name}\n
\n );\n }\n return {opt.label}
;\n }\n\n renderAddable() {\n const { addable } = this.props;\n const {\n addableOpen, addableSending, addableErrors, role,\n duplicates_found_in_org, duplicate_org_accounts, allow_duplicates_in_org,\n } = this.state;\n\n if (addableOpen) {\n return (\n \n
\n );\n }\n\n return null;\n }\n\n render() {\n const {\n addable, label, disabled, onChange, clearable,\n } = this.props;\n const {\n loading, members, addableOpen, value,\n } = this.state;\n\n return (\n \n
\n {addable.title}
\n\n \n {\n this.state.first_name = v.target.value;\n }}\n />\n { addableErrors.first_name &&
\n \n \n {\n this.state.last_name = v.target.value;\n }}\n />\n { addableErrors.last_name &&
\n \n \n {\n this.state.email = v.target.value;\n }}\n />\n { addableErrors.email &&
\n \n \n {\n this.state.role = opt.value;\n }}\n />\n { addableErrors.role &&
\n\n \n \n Save\n \n { this.setState({ addableOpen: false }); }}\n >\n Cancel\n \n
\n \n { addableOpen ? (\n this.renderAddable()\n ) : (\n
\n );\n }\n}\n\nTeamMemberPicker.defaultProps = {\n label: '',\n name: '',\n value: '',\n addable: {},\n multi: false,\n clearable: false,\n clearLabel: 'Show All',\n blank: false,\n show_all: false,\n apiResource: '/v1/team/members_options',\n options: [],\n onChange: () => false,\n contactOwner: false,\n level: null,\n skipAvatar: false,\n};\n\nTeamMemberPicker.propTypes = {\n label: PropTypes.string,\n name: PropTypes.string,\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n PropTypes.array,\n ]),\n addable: PropTypes.shape({}),\n multi: PropTypes.bool,\n show_all: PropTypes.bool,\n clearable: PropTypes.bool,\n clearLabel: PropTypes.string,\n apiResource: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.shape({})),\n blank: PropTypes.bool,\n onChange: PropTypes.func,\n contactOwner: PropTypes.bool,\n level: PropTypes.string,\n skipAvatar: PropTypes.bool,\n};\n\nexport default TeamMemberPicker;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport APIRequest from '~/lib/api_request';\nimport Select from '~/components/forms/select';\nimport { validateOptionValueExists } from '~/lib/form_validators';\n\nclass TeamPhoneNumberPicker extends React.Component {\n _isMounted = false;\n\n constructor(props) {\n super(props);\n\n const value = props.value ? props.value.toString() : '';\n\n this.state = {\n disabled: false,\n value,\n loading: false,\n options: [],\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.loadOptions();\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const value = nextProps.value ? nextProps.value.toString() : '';\n\n this.setState({\n value,\n });\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n loadOptions() {\n const { contactOwner, handleNumbersExistsChange } = this.props;\n\n this._isMounted = true;\n this.setState({ loading: true });\n\n const request = APIRequest.get({\n resource: '/v1/sms_numbers/team',\n });\n\n request.end((error, response) => {\n if (this._isMounted) {\n if (error) return;\n\n const { data } = response.body;\n\n if (handleNumbersExistsChange) handleNumbersExistsChange(!_lodash.isEmpty(data));\n\n const options = data.map((u) => ({\n value: u.service_number,\n label: `${u.user_name} - ${u.formatted_number}`,\n verified_texting: u.verified_texting,\n a2p_approved: u.a2p_approved,\n }));\n\n if (contactOwner) options.unshift({ value: -1, label: \"Contact's Owner\" });\n\n this.setState((prevState) => ({\n options,\n loading: false,\n }), () => {\n const { handleVerifiedTextingWarning, handleA2PWarning } = this.props;\n const { value } = this.state;\n const defaultOption = options.find((option) => option.value === value);\n const showWarning = defaultOption && !defaultOption.verified_texting;\n const showA2PWarning = defaultOption && (defaultOption.verified_texting && !defaultOption.a2p_approved);\n\n handleVerifiedTextingWarning(showWarning);\n handleA2PWarning(showA2PWarning);\n this.validatePhoneNumberExists(value);\n });\n }\n });\n }\n\n validatePhoneNumberExists(phoneNumber) {\n const { options } = this.state;\n const { onChange } = this.props;\n validateOptionValueExists(phoneNumber, options, onChange);\n }\n\n render() {\n const { label, onChange } = this.props;\n const {\n loading, value, options, disabled,\n } = this.state;\n\n return (\n \n { label\n && (\n \n ) }\n { this.select = el; }}\n isLoading={loading}\n options={members}\n value={value}\n openOnFocus\n optionRenderer={this.renderOption}\n onChange={onChange}\n disabled={disabled}\n clearable={clearable}\n />\n
\n )}\n \n { label && (\n \n )}\n { this.select = el; }}\n isLoading={loading}\n options={options}\n value={value}\n disabled={disabled}\n openOnFocus\n onChange={onChange}\n />\n
\n );\n }\n}\n\nTeamPhoneNumberPicker.defaultProps = {\n name: '',\n value: '',\n clearable: false,\n contactOwner: false,\n onChange: () => false,\n handleVerifiedTextingWarning: () => {},\n handleA2PWarning: () => {},\n handleNumbersExistsChange: () => false,\n};\n\nTeamPhoneNumberPicker.propTypes = {\n name: PropTypes.string,\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n ]),\n clearable: PropTypes.bool,\n contactOwner: PropTypes.bool,\n onChange: PropTypes.func,\n handleVerifiedTextingWarning: PropTypes.func,\n handleA2PWarning: PropTypes.func,\n handleNumbersExistsChange: PropTypes.func,\n};\n\nexport default TeamPhoneNumberPicker;\n","import TeamMemberPicker from '~/components/forms/team_fields/team_member_picker';\n\nclass TeammatePicker extends TeamMemberPicker {}\n\nTeammatePicker.defaultProps = {\n apiResource: '/v1/team/teammates_options',\n key: 'teammatePicker',\n disabled: false,\n contactOwner: false,\n};\n\nexport default TeammatePicker;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport Select from '~/components/forms/select';\n\nclass TwilioCountrySelect extends React.Component {\n constructor(props) {\n super(props);\n\n const options = [\n { value: 'US', label: 'United States' },\n { value: 'CA', label: 'Canada' },\n ];\n\n this.state = {\n options,\n };\n\n autoBind(this);\n }\n\n render() {\n const { options } = this.state;\n const { value } = this.props;\n\n return (\n - \n {videoInputs.map((item) => (\n
- \n {audioInputs.map((item) => (\n
\n
\n );\n }\n\n renderErrors = () => {\n const { error } = this.state;\n\n if (error) {\n return (\n \n
\n\n \n Microphone\n
\n \n \n
\n \n {this.renderAudioInputSettings()}\n
\n \n
\n \n
\n Camera
\n {this.renderVideoInputSettings()}\n \n
\n );\n }\n\n return null;\n }\n\n renderInitializator = () => {\n const { hasUserMedia, error } = this.state;\n\n if ((!hasUserMedia || !this.videoNode.srcObject) && !error) {\n return (\n \n
\n
\n );\n }\n\n return null;\n }\n\n renderVideoPlayer = () => {\n const { blob } = this.state;\n\n if (!blob) return null;\n\n const videoJsOptions = {\n posterImage: false,\n autoplay: true,\n controls: true,\n fluid: true,\n bigPlayButton: false,\n preload: 'auto',\n sources: [{\n src: URL.createObjectURL(blob),\n type: 'video/mp4',\n }],\n };\n\n return (\n \n
Initializing...
\n\n
\n );\n }\n\n render() {\n const {\n recording,\n streamDuration,\n maxDurtion,\n paused,\n showSettings,\n hasUserMedia,\n error,\n preview,\n } = this.state;\n\n return (\n \n
\n \n
\n \n {this.renderErrors()}\n {this.renderInitializator()}\n\n
\n\n {preview && this.renderVideoPlayer()}\n \n );\n }\n}\n\nVideoRecorder.defaultProps = {\n onUserMedia: () => false,\n};\n\nVideoRecorder.propTypes = {\n onUserMedia: PropTypes.func,\n};\n\nexport default VideoRecorder;\n","import autoBind from 'react-autobind';\nimport qs from 'qs';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { toast } from 'react-toastify';\nimport { PropTypes } from 'prop-types';\n\nimport AttentionNeeded from '~/components/attention_needed';\nimport GlobalNotices from '~/components/shared/global_notices';\nimport DrawerManager from '~/components/drawers/drawer_manager';\nimport NavBar from '~/components/navigation/nav_bar';\n/**\n * Global Container component\n * Responsible for executing logic at global level\n */\n\nexport const DrawerContext = React.createContext();\n\nclass GlobalContainer extends React.Component {\n /**\n * Return location.search query as object: ?a=b&x=y => { a: b, x: y }\n * @returns {Object} params\n */\n static urlParams() {\n if (!window.location.search) return {};\n\n const locationSearch = window.location.search.replace('?', '');\n return qs.parse(locationSearch);\n }\n\n static notify(message, type) {\n const opts = {\n position: toast.POSITION.TOP_RIGHT,\n closeOnClick: true,\n autoClose: 3000,\n };\n\n switch (type) {\n case 'success':\n toast.success(\n \n this.videoContainer = node}\n >\n
\n \n this.videoNode = node}\n muted\n autoPlay\n playsInline\n className=\"video-output\"\n style={{ transform: 'initial' }}\n />\n\n
\n \n \n
\n\n \n {VideoRecorderHelpers.renderDuration(streamDuration)}\n /\n {VideoRecorderHelpers.renderDuration(maxDurtion)}\n
\n \n \n
\n \n {recording ? (\n <>\n \n {this.renderPauseButton()}\n \n ) : (\n \n )}\n
\n \n {!recording && (\n
\n \n \n {this.renderSettings()}\n
\n )}\n \n {message}
,\n Object.assign(opts, { className: 'success-toast' }),\n );\n break;\n case 'info':\n toast.info(\n {message}
,\n Object.assign(opts, { className: 'info-toast' }),\n );\n break;\n case 'warn':\n case 'warning':\n toast.warn(\n {message}
,\n Object.assign(opts, { className: 'warning-toast' }),\n );\n break;\n case 'error':\n toast.error(\n ,\n Object.assign(opts, { className: 'danger-toast' }),\n );\n break;\n default:\n switch (GlobalContainer.product()) {\n case 'recruiting':\n toast.success(\n {message}
,\n Object.assign(opts, { className: 'success-toast' }),\n );\n break;\n case 'retention':\n toast.info(\n {message}
,\n Object.assign(opts, { className: 'info-toast' }),\n );\n break;\n default:\n toast.success(\n {message}
,\n Object.assign(opts, {\n className: 'success-toast',\n }),\n );\n }\n }\n }\n\n static renderErrors(errors) {\n const errorsContent = [];\n _lodash.forEach(errors, (v, k) => {\n errorsContent.push(`${_lodash.titleize(k)} ${v.join(', ')}`);\n });\n\n return errorsContent.join(', ');\n }\n\n /**\n * Returns the product mode (or none if not in product mode)\n * @returns {String} product\n */\n static product() {\n const path = window.location.pathname;\n switch (true) {\n case /^\\/recruiter\\/archived/.test(path):\n return 'archived';\n case /^\\/recruiter/.test(path):\n return 'recruiting';\n case /^\\/retention/.test(path):\n return 'retention';\n case /^\\/agent/.test(path):\n return 'agent';\n case /^\\/archived/.test(path):\n return 'archived';\n case /^\\/campaign_libraries/.test(path):\n return 'recruiting';\n default:\n return 'default';\n }\n }\n\n static productUriPrefix() {\n const product = this.product();\n\n if (product === 'recruiting') {\n return '/recruiter';\n }\n if (product === 'retention') {\n return '/retention';\n }\n\n return '';\n }\n\n static productUri(url) {\n return `${this.productUriPrefix()}${url}`;\n }\n\n /**\n * Returns the product mode (or none if not in product mode)\n * @returns {String} product\n */\n static productColor() {\n const path = window.location.pathname;\n switch (true) {\n case /^\\/recruiter/.test(path):\n return 'green';\n case /^\\/retention/.test(path):\n return 'blue';\n case /^\\/agent/.test(path):\n return 'green';\n default:\n return 'green';\n }\n }\n\n constructor(props) {\n super(props);\n this.state = {};\n autoBind(this);\n }\n\n getChildContext() {\n const { abilities } = Rails;\n\n return {\n helpers: {\n openDrawer: this.openDrawer,\n closeDrawer: this.closeDrawer,\n openLeadDrawer: (options) => {\n this.openDrawer('lead', options);\n },\n openNewLeadDrawer: () => {\n this.openDrawer('new-lead');\n },\n openTeamMemberDrawer: (options) => {\n this.openDrawer('team-member', options);\n },\n openNewTeamMemberDrawer: () => {\n this.openDrawer('team-member', {\n externalRolesOnly: !abilities.manageCurrentTeam,\n });\n },\n openNewReferralDrawer: () => {\n this.openDrawer('new-referral');\n },\n openEmailEmailDrawer: (options) => {\n this.openDrawer('email-domain', options);\n },\n },\n };\n }\n\n componentDidMount() {\n let searchState = {};\n\n if (window.location.search) {\n searchState = qs.parse(\n window.location.search.toString().replace('?', ''),\n );\n }\n if (searchState.lead) {\n this.openDrawer('lead', { loadLeadID: searchState.lead });\n }\n }\n\n /**\n * Open the LeadDrawer by a reloaded Lead or load Lead by ID\n * @param {String} kind - Lead load options, support: lead, loadLeadID, defaultAction\n * @param {Object} options - Lead load options, support: lead, loadLeadID, defaultAction\n */\n openDrawer = (kind, options = {}) => {\n this.drawerManager.open(kind, options);\n }\n\n /**\n * Close lead drawer\n */\n closeDrawer() {\n this.drawerManager && this.drawerManager.close();\n }\n\n render() {\n const { widgets, children, showHeader } = this.props;\n\n return (\n \n {widgets &&
\n \n\n \n\n \n
\n {children}
\n \n {_lodash.startCase(k)}\n {' - '}\n {v.join(', ')}\n
,\n );\n });\n\n return errorsContent;\n }\n\n render() {\n const {\n user, interest, sending, status, response,\n } = this.state;\n const {\n team, thank_you, url, color,\n } = this.props;\n\n const style = { backgroundColor: color, borderColor: color };\n const submitButtonClass = classNames(\n 'btn btn-primary btn-block btn-lg',\n { disabled: sending },\n );\n\n let formContent = (\n \n );\n\n if (thank_you === true) {\n formContent = (\n\n Thanks for requesting to meet the team at\n {' '}\n {team.name}\n !\n We've sent your information to the Team Leader and you\n should hear from them shortly. Make it a great day! Return\n to the\n {' '}\n previous page.\n
\n );\n }\n\n return (\n \n
\n );\n }\n}\n\nexport default LeadRecruitingApp;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport PubNub from '~/lib/pubnub';\n\nclass Messages extends React.PureComponent {\n componentDidMount() {\n const {\n publishKey, subscribeKey, pubNubUuid, token, channel,\n } = this.props;\n\n this.listeners = {\n message: this.onMessageReceived,\n presence: this.onMessagePresence,\n status: this.onMessageStatus,\n };\n\n this.pubnub = PubNub.client(publishKey, subscribeKey, pubNubUuid);\n this.pubnub.setAuthKey(token);\n this.pubnub.addListener(this.listeners);\n\n this.pubnub.subscribe({\n channels: [channel + token],\n });\n }\n\n componentWillUnmount() {\n this.pubnub.removeListener(this.listeners);\n }\n\n onMessageReceived = (payload) => {\n if (typeof window.onSmsMessageReceived !== 'object') return;\n\n window.onSmsMessageReceived[payload.message.activity_id](payload);\n }\n\n onMessagePresence = (payload) => {\n if (typeof window.onSmsMessagePresence !== 'object') return;\n\n window.onSmsMessagePresence[payload.message.activity_id](payload);\n }\n\n onMessageStatus = (payload) => {\n if (typeof window.onSmsMessageStatus !== 'object') return;\n\n window.onSmsMessageStatus[payload.message.activity_id](payload);\n }\n\n render() {\n return null;\n }\n}\n\nMessages.propTypes = {\n channel: PropTypes.string,\n token: PropTypes.string,\n publishKey: PropTypes.string.isRequired,\n subscribeKey: PropTypes.string.isRequired,\n pubNubUuid: PropTypes.string.isRequired,\n};\n\nMessages.defaultProps = {\n channel: 'twilio',\n token: '',\n};\n\nexport default Messages;\n","import React, { useEffect, useState, useCallback } from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport AppModal from '../app_modal';\nimport useAIAssist from './hooks/useAIAssist';\nimport TokenLimitExceededCTA from './ui/TokenLimitExceededCTA';\nimport ModalContent from './ui/ModalContent';\nimport SelectPromptType from './ui/SelectPromptType';\nimport APIRequest from '~/lib/api_request';\n\nconst AssistModal = ({\n containerID,\n modalClass,\n dialogClass,\n editor,\n mode,\n setSubject,\n}) => {\n const {\n state,\n dispatch,\n appModalRef,\n stateRef,\n markdownContentRef,\n handleInputChange,\n handlePromptClick,\n handleNewPrompt,\n handleRevisePrompt,\n handleInsert,\n handleGenerateText,\n handleRegenerate,\n handleRetry,\n fetchTokensUsage,\n } = useAIAssist(editor, mode, setSubject);\n const [tokensLimitExceeded, setTokensLimitExceeded] = useState(false);\n const [selectedType, setSelectedType] = useState('');\n const [options, setOptions] = useState([]);\n const tokensLimitExceededClass = tokensLimitExceeded ? '' : 'modal-lg';\n\n useEffect(() => {\n stateRef.current = state;\n setTokensLimitExceeded(\n stateRef.current.subscriptionLimit !== null\n && stateRef.current.totalTokensUsed >= stateRef.current.subscriptionLimit,\n );\n }, [state]);\n\n useEffect(() => {\n fetchTokensUsage();\n }, []);\n\n useEffect(() => {\n fetchOptions();\n }, [fetchOptions]);\n\n const fetchOptions = useCallback(() => {\n APIRequest.get({ resource: '/v1/ai_prompt_types' }).end((error, response) => {\n if (!error) {\n setOptions(response.body);\n }\n });\n }, []);\n\n const ModalHeader = (text, displayPromptSelector = true) => (\n \n
\n Learn more about us!
\n {formContent}\n\n \n ×\n \n
\n );\n\n return (\n \n {text}\n
\n\n {displayPromptSelector && (\n\n
\n )}\n\n \n
\n \n );\n } if (tokensLimitExceeded) {\n return (\n <>\n {ModalHeader('Upgrade Now For More AI Tokens! 🚀', false)}\n \n
\n \n {state.status === ModalStates.INITIAL && !state.error && (\n handleGenerateText()}\n >\n Generate Message\n \n )}\n\n {(state.status === ModalStates.ERROR || state.error) && (\n \n Insert\n \n\n \n Regenerate\n \n\n \n Revise Prompt\n \n\n \n New Prompt\n \n\n {state.status === ModalStates.FINISHED && state.conversationId && (\n
\n);\n\nexport default Buttons;\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { ModalStates } from '../states/ModalStates';\n\nconst ErrorState = ({ state }) => (\n \n \n Retry\n \n
\n )}\n\n {(state.status === ModalStates.FINISHED || state.status === ModalStates.GENERATING) && (\n <>\n \n
\n);\n\nexport default ErrorState;\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\nimport APIRequest from '~/lib/api_request';\nimport { FeedbackStates } from '../states/FeedbackStates';\n\nconst Feedback = ({\n state,\n dispatch,\n}) => {\n const feedbackHandler = (feedback) => async () => {\n if (state.feedbackState === feedback) {\n dispatch({ type: 'SET_FEEDBACK_STATE', payload: null });\n } else {\n dispatch({ type: 'SET_FEEDBACK_STATE', payload: feedback });\n }\n };\n\n const handleThumbsUp = feedbackHandler(FeedbackStates.UP);\n const handleThumbsDown = feedbackHandler(FeedbackStates.DOWN);\n\n const handleSendFeedback = async () => {\n const {\n conversationId, feedbackSending, feedbackState, feedbackText,\n } = state;\n\n if (feedbackSending) return null;\n\n dispatch({ type: 'SET_FEEDBACK_SENDING', payload: true });\n\n try {\n await APIRequest.post({\n resource: '/v1/ai_ratings',\n data: {\n rating: {\n ai_conversation_id: conversationId,\n rating: feedbackState,\n feedback: feedbackText,\n },\n },\n });\n\n dispatch({ type: 'SET_FEEDBACK_TEXT', payload: '' });\n dispatch({ type: 'SET_FEEDBACK_STATE', payload: null });\n\n GlobalContainer.notify(\n \"Thank you for your feedback. It's been sent successfully.\",\n 'success',\n );\n\n return null;\n } catch (error) {\n GlobalContainer.notify(\n 'Oops! There was an issue sending your feedback. Please try again.',\n 'error',\n );\n\n return null;\n } finally {\n dispatch({ type: 'SET_FEEDBACK_SENDING', payload: false });\n }\n };\n\n return (\n <>\n \n {state.status === ModalStates.ERROR && (\n
\n\n \n
\n \n {state.error && state.error}\n
\n \n \n \n
\n\n {state.feedbackState && (\n \n dispatch({\n type: 'SET_FEEDBACK_TEXT',\n payload: e.target.value,\n })}\n />\n \n Send Feedback\n \n
\n )}\n \n );\n};\n\nFeedback.propTypes = {\n state: PropTypes.shape({}).isRequired,\n dispatch: PropTypes.func.isRequired,\n};\n\nexport default Feedback;\n","import React, { useEffect } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { marked } from 'marked';\nimport { markedHighlight } from 'marked-highlight';\nimport hljs from 'highlight.js';\nimport { ModalStates } from '../states/ModalStates';\nimport TokensUsage from './TokensUsage';\n\nconst renderer = {\n paragraph(text) {\n return `${text}
\n
\n\n \n {state.status === ModalStates.GENERATING && (\n
\n\n \n {state.outputText && (\n \n )}\n
\n \n
\n \n );\n};\n\nexport default GeneratingState;\n","import React from 'react';\nimport ErrorMessageWithIcon from '~/components/forms/ErrorMessageWithIcon';\nimport PromptsList from './PromptsList';\nimport TokensUsage from './TokensUsage';\n\nconst InitialState = ({\n state,\n handlePromptClick,\n handleInputChange,\n selectedType,\n}) => (\n <>\n \n
\n\n \n {state.inputError &&
\n \n
\n \n);\n\nexport default InitialState;\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport InitialState from './InitialState';\nimport GeneratingState from './GeneratingState';\nimport ErrorState from './ErrorState';\nimport Buttons from './Buttons';\nimport { ModalStates } from '../states/ModalStates';\n\nconst ModalContent = ({\n state,\n dispatch,\n markdownContentRef,\n handleInputChange,\n handlePromptClick,\n handleGenerateText,\n handleInsert,\n handleRegenerate,\n handleRevisePrompt,\n handleNewPrompt,\n handleRetry,\n selectedType,\n}) => (\n <>\n \n {state.status === ModalStates.INITIAL && (\n
\n \n);\n\nexport default ModalContent;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport ReactPaginate from 'react-paginate';\nimport APIRequest from '~/lib/api_request';\n\nconst PromptsList = ({ handlePromptClick, selectedType }) => {\n const [isLoading, setIsLoading] = useState(false);\n const [prompts, setPrompts] = useState([]);\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(0);\n let content;\n\n const fetchPrompts = useCallback((page) => {\n let isMounted = true;\n setIsLoading(true);\n APIRequest.get({\n resource: '/v1/ai_prompts',\n data: {\n ai_prompt_type: selectedType,\n page,\n },\n }).end((error, response) => {\n if (isMounted) {\n if (!error) {\n setPrompts(response.body.prompts);\n setTotalPages(response.body.pagination?.total_pages);\n }\n setIsLoading(false);\n }\n });\n\n return () => {\n isMounted = false;\n };\n }, [selectedType]);\n\n useEffect(() => {\n const cleanup = fetchPrompts(currentPage);\n return cleanup;\n }, [fetchPrompts, currentPage]);\n\n const handlePageChange = ({ selected }) => {\n setCurrentPage(selected + 1);\n };\n\n if (isLoading) {\n content = (\n \n
\n
\n );\n } else if (prompts.length === 0) {\n content = (\n \n
\n );\n } else {\n content = (\n No prompts found
\n \n {prompts.map((prompt, index) => (\n
\n ))}\n \n );\n }\n\n return (\n \n handlePromptClick(prompt.prompt)}\n >\n {prompt.prompt}\n
\n \n
\n );\n};\n\nPromptsList.propTypes = {\n handlePromptClick: PropTypes.func.isRequired,\n};\n\nexport default PromptsList;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from '~/components/forms/dropdowns/SelectWrapper/Select';\n\nconst SelectPromptType = ({\n onTypeSelected,\n selectedType,\n options,\n}) => {\n const handleOptionChange = (opt) => {\n const clickedOption = opt ? opt.value : '';\n\n onTypeSelected(clickedOption);\n };\n\n return (\n \n Ideas for you\n\n
\n\n {content}\n\n {totalPages > 1 && !isLoading && (\n
\n \n\n {content}\n\n {totalPages > 1 && !isLoading && (\n
\n
\n
\n\n \n Unlock the full potential of our AI text generator by upgrading to the next pricing plan.\n Get additional generative AI tokens for creating your emails, texts,\n landing pages and notes to boost your recruiting and retention efforts.\n
\n\n \n
\n Don't let limited tokens hold you back. Click the button below to upgrade & supercharge your Brokerkit experience today!\n
\n \n \n\n
\n \n);\n\nexport default TokenLimitExceededCTA;\n","import React from 'react';\nimport numeral from 'numeral';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nconst TokensUsage = ({ state }) => {\n const maxTokensPerConversation = process.env.MAX_TOKENS_PER_CONVERSATION;\n const { tokensCount, totalTokensUsed, subscriptionLimit } = state;\n\n const formattedTokensCount = numeral(tokensCount).format('0,0');\n const formattedMaxTokens = numeral(maxTokensPerConversation).format('0,0');\n const formattedTotalTokensUsed = numeral(totalTokensUsed).format('0,0');\n const formattedLimit = subscriptionLimit !== null ? numeral(subscriptionLimit).format('0,0') : 'unlimited';\n\n const tooltipText = 'A token is a unit of text used in AI models. In English, a token can be as short as one character or as long as one word (e.g., \"a\" or \"apple\"). The total number of tokens affects both the cost and the ability to generate or process text. In English, a token can often correspond to a word, but it can also represent a single character or part of a word. For example, the word \"apple\" is one token, but \"haven\\'t\" would be split into two tokens: \"have\" and \"n\\'t.\" While it might be common for many words to be represented as single tokens, it\\'s not a strict one-token-per-word mapping.';\n\n return (\n \n Tokens in this conversation:\n {' '}\n {formattedTokensCount}\n {' '}\n /\n {' '}\n {formattedMaxTokens}\n \n \n If you have any questions or need assistance, our support team is always here to help.\n Just reach out to us at\n {' '}\n \n support@getbrokerkit.com\n \n {' '}\n or via the in-app chat\n \n
\n \n Total tokens used (plan limit):\n {' '}\n {formattedTotalTokensUsed}\n {' '}\n of\n {' '}\n {formattedLimit}\n \n );\n};\n\nexport default TokensUsage;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { PropTypes } from 'prop-types';\nimport Modal from 'react-bootstrap/Modal';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport size from 'lodash/size';\n\nimport CampaignActions from '~/actions/campaign_actions';\nimport CampaignStore from '~/stores/campaign_store';\nimport DonateCampaignOriginSelect from '~/components/forms/donate_campaign_origin_select';\n\nconst DonateCampaignModal = ({ campaignId, show, onClose }) => {\n const [errors, setErrors] = useState({});\n const [submitting, setSubmitting] = useState(false);\n const [origin, setOrigin] = useState(null);\n\n const onChange = useCallback(() => {\n const campaignState = CampaignStore.getState();\n const { lastCampaignStoreAction, message, errors: stateErrors } = campaignState;\n\n if (lastCampaignStoreAction === 'donateCampaignDone') {\n GlobalContainer.notify(message, 'success');\n if (onClose) onClose();\n }\n\n if (lastCampaignStoreAction === 'donateCampaignFail') {\n setErrors(stateErrors);\n setSubmitting(false);\n }\n }, [onClose]);\n\n useEffect(() => {\n const campaignStoreListener = CampaignStore.addListener(onChange);\n return () => {\n if (campaignStoreListener) campaignStoreListener.remove();\n };\n }, [onChange]);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n if (validate()) {\n setSubmitting(true);\n CampaignActions.donateCampaign(campaignId, origin);\n }\n };\n\n const handleOriginSelect = (selectedValue) => {\n setOrigin(selectedValue?.value || null);\n };\n\n const validate = () => {\n const validationsErrors = {};\n\n if (!origin) validationsErrors.origin = \"Can't be empty\";\n setErrors(validationsErrors);\n\n return size(validationsErrors) === 0;\n };\n\n return (\n
\n
\n );\n }\n\n if (bulkLimitsReached) {\n return this.renderBulkVallidationError();\n }\n\n return this.renderContent();\n };\n\n resetWarning = (selectedOption) => {\n const { selectedCampaignId } = this.state;\n\n if (selectedOption && selectedOption.value !== selectedCampaignId) {\n this.setState({ warningAccepted: false, isLimitExceeded: false });\n }\n }\n\n acceptWarning = () => {\n this.setState({ warningAccepted: true });\n }\n\n renderBulkVallidationError = () => {\n const { bulkMessageFrequencyLimit, bulkMessageSizeLimit } = this.state;\n const bulkMessageLookbackPeriod = process.env.BULK_MESSAGE_LOOKBACK_PERIOD / 24;\n\n const trialText = (\n <>\n while on a trial. Your limits will be increased at the end of\n the trial to those of your selected pricing plan seen\n {' '}\n \n here.\n \n \n );\n\n const mainText = (\n <>\n on your pricing plan. Please upgrade your pricing plan\n {' '}\n \n here\n \n {' '}\n to increase your limits.\n \n );\n\n return (\n \n
\n );\n };\n\n renderContent = () => {\n const {\n errors,\n submitting,\n message,\n loadingValidation,\n isSmsValid,\n isEmailDomainValid,\n unverifiedNumbersWarning,\n warningAccepted,\n textMessagesCount,\n segmentsCount,\n isLimitExceeded,\n selectedCampaignId,\n limitAlertAllowed,\n } = this.state;\n const { countSelectedItems } = this.props;\n const selectedItemsCount = countSelectedItems();\n const saveButtonClass = classNames('btn btn-primary', {\n disabled: submitting || loadingValidation || !isEmailDomainValid || !isSmsValid,\n });\n\n return (\n <>\n \n Bulk messaging actions can only be triggered on up to\n {' '}\n {bulkMessageSizeLimit}\n {' '}\n contacts up to\n {' '}\n {bulkMessageFrequencyLimit}\n {' '}\n times within\n {' '}\n {bulkMessageLookbackPeriod}\n {' '}\n days\n {' '}\n {currentTeam.trial ? trialText : mainText}\n
\n \n \n \n {message.text}\n {' '}\n
\n
\n )}\n\n {unverifiedNumbersWarning && (\n \n {message.text}\n {' '}\n \n Configure Now\n \n
\n \n
\n\n \n
\n\n \n
\n \n The campaign will not be assigned to contacts where the\n same campaign is currently running and the timelines\n overlap.\n
\n \n\n \n \n Cancel\n \n \n Add\n \n
\n \n );\n };\n\n render() {\n const { submitting } = this.state;\n const { countSelectedItems } = this.props;\n const selectedItemsCount = countSelectedItems();\n const spinnerImg = (\n \n
\n );\n }\n\n return (\n <>\n \n
\n\n \n \n this.setTaskField('name', val && val.target.value)}\n />\n
\n\n \n \n this.setTaskField('category', opt && opt.value)}\n />\n
\n\n \n \n this.setTaskField(\n 'due_date_at',\n picker && picker.toDate(),\n )}\n />\n
\n \n \n this.setTaskField('description', html)}\n placeholder=\"Enter Description\"\n />\n
\n\n \n
\n \n );\n }\n\n render() {\n const { submitting } = this.state;\n const { countSelectedItems } = this.props;\n\n const saveButtonClass = classNames('btn btn-primary', {\n disabled: submitting,\n });\n const spinnerImg = (\n \n \n Owner\n \n this.setTaskField('owner_id', opt && opt.value)}\n clearable\n />\n
\n\n \n \n this.setTaskField('priority', opt && opt.value)}\n />\n
\n\n \n \n this.setTaskField('status', opt && opt.value)}\n />\n
\n \n
\n \n );\n }\n}\n\nAppModal.defaultProps = {\n containerID: 'primary-modal',\n id: 'modal-dialog',\n modalClass: 'modal',\n dialogClass: 'modal-dialog',\n contentClass: 'modal-content',\n children: [],\n};\n\nAppModal.propTypes = {\n containerID: PropTypes.string,\n id: PropTypes.string,\n modalClass: PropTypes.string,\n dialogClass: PropTypes.string,\n contentClass: PropTypes.string,\n children: PropTypes.oneOfType([\n PropTypes.array,\n PropTypes.element,\n ]),\n};\n\nexport default AppModal;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport autoBind from 'react-autobind';\nimport Dropzone from 'react-dropzone';\nimport filesize from 'filesize';\nimport SuperAgent from 'superagent';\nimport APIRequest from '~/lib/api_request';\n\nimport AppModal from '../app_modal';\n\nconst acceptedFormats = {\n 'image/png': ['.png'],\n 'image/gif': ['.gif'],\n 'image/jpeg': ['.jpeg'],\n 'image/jpg': ['.jpg'],\n};\nconst maxImageSize = 5242880; // 5 MB;\n\nclass MmsAttachmentModal extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n file: undefined,\n errors: {},\n uploading: false,\n };\n\n this.appModal = React.createRef();\n\n autoBind(this);\n }\n\n onDrop = (acceptedFiles, fileRejections) => {\n const file = acceptedFiles[0];\n const rejectedFile = fileRejections[0];\n\n rejectedFile?.errors.forEach((err) => {\n if (err.code === 'file-too-large') {\n this.setErrors('fileTooLarge', `Error: Image is too large (${filesize(rejectedFile.file.size)}).`);\n }\n\n if (err.code === 'file-invalid-type') {\n this.setErrors('fileInvalidType', 'Error: Image type is not accepted.');\n }\n });\n\n if (rejectedFile) return;\n\n this.setState({ file }, () => {\n this.uploadImage();\n });\n };\n\n uploadImage = () => {\n const { file } = this.state;\n const { handleMediaUrlChange } = this.props;\n\n if (!file) return;\n\n this.setState({ errors: {}, uploading: true });\n\n // We have to do a special request here since we need to multipart the\n // uploads, and api request by default tries to set everything as JSON\n const req = SuperAgent.post(`${Rails.apiUrl}/api/v1/mms_attachments`);\n\n req.set(APIRequest.apiRequiredHeaders());\n req.attach('attachment[media]', file);\n\n req.then((res) => {\n this.setState({\n uploading: false,\n file: undefined,\n errors: {},\n }, () => {\n const media = res.body;\n const modalRef = this.appModal.current;\n const $modal = $(modalRef.modal);\n\n handleMediaUrlChange(media);\n $modal.modal('hide');\n });\n }).catch((error) => {\n this.setState((prevState) => ({\n uploading: false,\n errors: {\n ...prevState.errors,\n file_uploading: error,\n },\n }));\n });\n }\n\n setErrors = (name, value) => {\n this.setState((prevState) => ({\n errors: {\n [name]: value,\n },\n }));\n }\n\n renderDropZone = () => {\n const {\n file,\n errors,\n uploading,\n percentCompleted,\n } = this.state;\n\n if (uploading) {\n return (\n\n \n {children}\n
\n \n
\n );\n }\n\n return (\n We are now uploading your image.
\n\n \n {({\n getRootProps,\n getInputProps,\n isDragActive,\n isDragReject,\n acceptedFiles,\n fileRejections,\n }) => {\n const rejectedFile = fileRejections[0];\n\n return (\n
\n );\n }\n\n render = () => {\n const {\n containerID,\n modalClass,\n dialogClass,\n } = this.props;\n\n return (\n \n \n\n
\n );\n }}\n \n \n
\n ) : (\n <>\n {isDragActive ? (\n Drop the image file here ...
\n ) : (\n\n Click or Drag image file to this area to upload.\n
\n )}\n\n\n Up to\n {' '}\n {filesize(maxImageSize)}\n {' '}\n in size.\n
\n\n\n Accepted formats: png, gif, jpeg, jpg.\n
\n\n {rejectedFile && (\n <>\n {!!errors.file_uploading && (\n\n Oops, something went wrong. Try again later.\n
\n )}\n\n {!!errors.file && (\n \n File must be selected!\n
\n )}\n\n {!!errors.fileInvalidType && (\n \n {errors.fileInvalidType}\n
\n )}\n\n {!!errors.fileTooLarge && (\n \n {errors.fileTooLarge}\n
\n )}\n \n )}\n \n )}\n \n \n
\n\n \n
\n\n \n
\n\n \n \n
\n\n \n {this.renderDropZone()}\n
\n \n \n
\n \n );\n }\n}\n\nMmsAttachmentModal.defaultProps = {\n containerID: '',\n modalClass: '',\n dialogClass: '',\n handleMediaUrlChange: undefined,\n};\n\nMmsAttachmentModal.propTypes = {\n containerID: PropTypes.string,\n modalClass: PropTypes.string,\n dialogClass: PropTypes.string,\n handleMediaUrlChange: PropTypes.func,\n};\n\nexport default MmsAttachmentModal;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport autoBind from 'react-autobind';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\nimport APIRequest from '~/lib/api_request';\nimport TeamEmailPicker from '~/components/forms/team_fields/team_email_picker';\nimport TeamPhoneNumberPicker from '~/components/forms/team_fields/team_phone_number_picker';\nimport { TeammatePicker } from '~/components/forms/team_member_picker';\nimport VerifiedTextingWarning from '~/components/warnings/VerifiedTextingWarning';\nimport OwnerContactWarning from '~/components/warnings/OwnerContactWarning';\nimport AppModal from './app_modal';\nimport A2pNotApprovedWarning from '~/components/warnings/A2pNotApprovedWarning';\n\nclass CopyCampaignLibraryModal extends React.Component {\n isRestrictionForUnverifiedNumbersEnabled = checkFeatureFlag(process.env.BLOCK_UNVERIFIED_NUMBERS_FLAG);\n\n constructor(props) {\n super(props);\n\n const { currentUser } = Rails.helpers;\n const smsNumber = _lodash.first(currentUser.sms_numbers);\n const ownerID = _lodash.isInteger(currentUser.id) ? currentUser.id.toString() : '';\n\n this.state = {\n submitting: false,\n email_address: currentUser.role ? currentUser.email : null,\n phone_number: smsNumber ? smsNumber.service_number : null,\n owner_id: ownerID,\n errors: {},\n showVerifiedTextingWarning: false,\n showA2PWarning: false,\n };\n\n autoBind(this);\n }\n\n handleEmailAddressSelect = (selectedItem) => {\n const emailAddress = selectedItem ? selectedItem.value : null;\n\n this.setState({\n email_address: emailAddress,\n });\n }\n\n handlePhoneNumberSelect = (selectedItem) => {\n this.setState((prevState) => {\n const phoneNumber = selectedItem?.value || null;\n\n if (phoneNumber === -1) {\n return {\n phone_number: phoneNumber,\n showVerifiedTextingWarning: false,\n showA2PWarning: false,\n };\n }\n\n const showWarning = phoneNumber ? !selectedItem.verified_texting : false;\n const showA2PWarning = phoneNumber ? (selectedItem.verified_texting && !selectedItem.a2p_approved) : false;\n\n return {\n phone_number: phoneNumber,\n showVerifiedTextingWarning: showWarning,\n showA2PWarning,\n };\n });\n }\n\n handleVerifiedTextingWarning = (verifiedTexting) => {\n this.setState({\n showVerifiedTextingWarning: verifiedTexting,\n });\n }\n\n handleA2PWarning = (a2pApproved) => {\n this.setState({\n showA2PWarning: a2pApproved,\n });\n }\n\n handleOwnerSelect = (selectedItem) => {\n const ownerId = selectedItem ? selectedItem.value : null;\n\n this.setState({\n owner_id: ownerId,\n });\n }\n\n handleSubmit(e) {\n e.preventDefault();\n\n const {\n email_address, phone_number, owner_id,\n } = this.state;\n const { campaign } = this.props;\n const $modal = $(this.appModal.modal);\n\n this.setState({ submitting: true }, () => {\n if (this.validate()) {\n APIRequest.put({\n resource: `/v1/campaign_libraries/${campaign.id}/copy`,\n data: {\n campaign_id: campaign.id, email_address, phone_number, owner_id,\n },\n }).end((error) => {\n this.setState({ submitting: false }, () => {\n if (!error) {\n GlobalContainer.notify(`Campaign ${campaign.name} was successfully copied to your team account.`, 'success');\n\n $modal.modal('hide');\n }\n });\n });\n } else {\n this.setState({ submitting: false });\n }\n });\n }\n\n validate() {\n const errors = {};\n const {\n email_address, phone_number, owner_id, showVerifiedTextingWarning, showA2PWarning,\n } = this.state;\n\n if (!email_address) {\n errors.email_address = \"Can't be empty\";\n }\n\n if ((this.isRestrictionForUnverifiedNumbersEnabled && showVerifiedTextingWarning && showA2PWarning) && phone_number) {\n errors.phone_number = 'This number is not verified for texting. Please choose another number.';\n }\n\n if (!phone_number) {\n errors.phone_number = \"Can't be empty\";\n }\n\n if (!owner_id) {\n errors.owner_id = \"Can't be empty\";\n }\n\n this.setState({ errors });\n\n return _lodash.size(errors) === 0;\n }\n\n renderSmsAndEmailForm() {\n const {\n email_address, phone_number, owner_id, errors, showVerifiedTextingWarning, showA2PWarning,\n } = this.state;\n\n return (\n <>\n \n {this.isRestrictionForUnverifiedNumbersEnabled && showVerifiedTextingWarning &&
\n\n \n \n
\n\n \n \n
\n \n );\n }\n\n render() {\n const { submitting } = this.state;\n const { campaign } = this.props;\n\n return (\n {button.subDigit}
\n )}\n \n );\n\n renderDTMFTone = () => (\n \n {BUTTONS.map((row, rowIndex) => (\n // eslint-disable-next-line react/no-array-index-key\n
\n );\n\n render() {\n const {\n error,\n onPhone,\n callLog,\n muted,\n hold,\n initialized,\n timerTime,\n timerOn,\n userPhoneNumber,\n creatingActivity,\n disconnectionHandled,\n } = this.state;\n const {\n containerID, modalClass, dialogClass, lead, leadPhone, onDialerClose,\n } = this.props;\n\n // Prevent render if disconnected and `disconnectionHandled` is set\n if (!initialized || disconnectionHandled) return null;\n\n const seconds = `0${Math.floor(timerTime / 1000) % 60}`.slice(-2);\n const minutes = `0${Math.floor(timerTime / 60000) % 60}`.slice(\n -2,\n );\n const hours = `0${Math.floor(timerTime / 3600000)}`.slice(-2);\n\n return (\n \n {row.map((button) => this.renderDigitButton(button))}\n
\n ))}\n \n
\n \n \n {LeadHelpers.renderLeadName(lead)}\n
\n\n {!creatingActivity && (\n \n ×\n \n )}\n
\n\n \n {LeadHelpers.renderLeadName(lead)}\n
\n {LeadHelpers.renderPhoneNumber(leadPhone)}\n
\n\n {!creatingActivity && (\n \n
\n\n \n
\n \n {creatingActivity && (\n
\n \n
\n )}\n\n {error && (\n \n {error}\n
\n )}\n\n {!userPhoneNumber && (\n \n Please Set Up Phone Number on the Phone Number\n Page\n {' '}\n \n here\n \n
\n )}\n\n {!error && callLog && userPhoneNumber && (\n <>\n \n {!creatingActivity && callLog}\n
\n {timerOn && (\n \n {hours > 0 && `${hours} : `}\n {minutes}\n {' '}\n :\n {' '}\n {seconds}\n
\n )}\n \n )}\n\n {onPhone && (\n <>\n {this.renderDTMFTone()}\n\n \n \n {\n this.state.body = v.target.value.replace(\n /(?:\\r\\n|\\r|\\n)/g,\n '
',\n );\n }}\n />\n
\n \n )}\n ',\n );\n }}\n />\n
\n
\n \n {onPhone && this.connection && (\n <>\n \n \n \n
\n \n
\n );\n }\n\n const status_id = document.status_id || document.status?.id || '';\n const category_id = document.category_id || document.category?.id || '';\n\n return (\n <>\n {errors.title}
}\n \n \n \n setDocumentField('status_id', e.target.value || null)}\n >\n \n {statuses.map((status) => (\n \n ))}\n \n {errors.status_id && \n\n \n \n setDocumentField('category_id', e.target.value || null)}\n >\n \n {categories.map((category) => (\n \n ))}\n \n {errors.category_id && \n
\n {errors.status_id}
}\n {errors.category_id}
}\n {errors.owner}
}\n \n \n {renderDocumentForm()}\n
\n\n \n {submitting ? (\n \n ) : (\n \n )}\n \n
\n \n \n );\n};\n\nEditDocumentModal.defaultProps = {\n modalClass: '',\n dialogClass: '',\n};\n\nEditDocumentModal.propTypes = {\n documentID: PropTypes.number.isRequired,\n containerID: PropTypes.string.isRequired,\n leadID: PropTypes.number,\n modalClass: PropTypes.string,\n dialogClass: PropTypes.string,\n onClose: PropTypes.func.isRequired,\n table: PropTypes.object,\n query: PropTypes.object,\n};\n\nexport default EditDocumentModal;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport classNames from 'classnames';\nimport autoBind from 'react-autobind';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport LeadSourceActions from '~/actions/lead_source_actions';\nimport LeadSourceStore from '~/stores/lead_source_store';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport AppModal from './app_modal';\n\nclass EditLeadSourceModal extends React.Component {\n constructor(props) {\n super(props);\n\n const { sourceID } = props;\n\n this._isMounted = false;\n\n this.state = {\n loadingSource: !!sourceID,\n source: {},\n errors: {},\n submitting: false,\n sourceName: '',\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this._isMounted = true;\n\n // listen to leadSourceStoreListener changes\n this.leadSourceStoreListener = LeadSourceStore.addListener(this.onLeadSourceStoreChange);\n\n const { sourceID } = this.props;\n\n if (sourceID && this._isMounted) {\n LeadSourceActions.loadLeadSource(sourceID, this.onLeadSourceLoad);\n }\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n\n // remove listener to leadSourceStoreListener changes on Unmount\n if (this.leadSourceStoreListener) this.leadSourceStoreListener.remove();\n }\n\n handleNameChange = (e) => {\n e.preventDefault();\n\n const { value } = e.target;\n\n this.setState((prevState) => ({\n ...prevState,\n source: {\n ...prevState.source,\n name: value,\n },\n }));\n };\n\n handleSubmit(e) {\n e.preventDefault();\n\n const { source, sourceName } = this.state;\n\n this.setState({ submitting: true }, () => {\n brokerbit.confirmBox({\n message: `Are you sure you want to change (${sourceName}) to (${source.name})?`,\n callback: (ok) => {\n if (ok) {\n LeadSourceActions.updateLeadSource({ ...source, id: source.id });\n } else {\n this.setState({ submitting: false });\n }\n },\n });\n });\n }\n\n onLeadSourceLoad(source) {\n this.setState({\n loadingSource: false,\n sourceName: source.name,\n source,\n });\n }\n\n // when onLeadSourceStoreChange changes...\n onLeadSourceStoreChange() {\n const leadSourceState = LeadSourceStore.getState();\n const { source, errors, lastLeadSourceStoreAction } = leadSourceState;\n const $modal = $(this.appModal.modal);\n\n let nextState = { leadSourceState };\n\n if (lastLeadSourceStoreAction === 'updateLeadSourceDone') {\n $modal.modal('hide');\n GlobalContainer.notify(`Source \"${source.name}\" updated.`, 'success');\n }\n\n if (lastLeadSourceStoreAction === 'updateLeadSourceFail') {\n if (errors) {\n nextState = { ...nextState, errors, submitting: false };\n }\n }\n\n this.setState(nextState);\n }\n\n renderLeadSourceForm() {\n const {\n loadingSource, source, errors, responseErrors,\n } = this.state;\n const { leadSources } = this.props;\n\n if (loadingSource) {\n return (\n \n
\n );\n }\n\n return (\n \n \n
\n );\n }\n\n render() {\n const { source, submitting } = this.state;\n\n return (\n \n {}}\n />\n \n
\n There are no documents.
;\n }\n\n return (\n \n \n \n
\n
\n );\n };\n\n const renderDocumentRow = (document) => {\n const {\n title, size, uploaded_at, category,\n } = document;\n\n return (\n | \n | \n NAME | \nCREATED | \nSIZE | \nCATEGORY | \nOWNER | \n
|---|
\n
\n );\n\n const selectStyle = { display: 'inline-block', width: 'auto', verticalAlign: 'middle' };\n\n return (\n \n \n \n \n \n \n \n items per page\n
\n\n {pagination.total_pages > 1 && (\n \n \n
\n )}\n \n
\n Insert Document
\n \n\n
\n \n
\n {loadingDocuments ? (\n \n setFilters({ ...filters, query: e.target.value })}\n onKeyDown={(e) => e.key === 'Enter' && setFilters({ ...filters, query: e.target.value })}\n disabled={loadingDocuments}\n name=\"search\"\n />\n
\n \n {\n setFilters({ ...filters, owner_id: opt.map((a) => a.value) || [] });\n }}\n clearable\n multi\n skipAvatar\n disabled={loadingDocuments}\n apiResource=\"/v1/documents/owner_options?only_existing=true\"\n />\n
\n \n
\n ) : (\n renderDocuments()\n )}\n {!loadingDocuments && documents.length > 0 && (\n renderPagination()\n )}\n \n {selectedDocuments.length > 0 && (\n \n Insert\n \n \n
\n \n );\n};\n\nSelectDocumentModal.defaultProps = {\n onInsertClick: () => {},\n handleClose: () => {},\n};\n\nSelectDocumentModal.propTypes = {\n containerID: PropTypes.string.isRequired,\n modalClass: PropTypes.string,\n dialogClass: PropTypes.string,\n onInsertClick: PropTypes.func.isRequired,\n handleClose: PropTypes.func,\n};\n\nexport default SelectDocumentModal;\n","import { animateScroll } from 'react-scroll';\n\nconst Helpers = {\n scrollToBottom(containerId) {\n animateScroll.scrollToBottom({\n containerId,\n });\n },\n\n generateHoursInterval(\n startHourInMinute,\n endHourInMinute,\n interval,\n ) {\n const times = [];\n\n for (let i = 0; startHourInMinute < 24 * 60; i++) {\n if (startHourInMinute > endHourInMinute) break;\n\n const hh = Math.floor(startHourInMinute / 60);\n const mm = startHourInMinute % 60;\n\n times[i] = `${(`0${hh % 24}`).slice(-2)}:${(`0${mm}`).slice(-2)}`;\n startHourInMinute += interval;\n }\n\n return times;\n },\n\n extractDomainFromEmail(email) {\n if (!email) return null;\n\n const atIndex = email.lastIndexOf('@');\n if (atIndex === -1) {\n return null;\n }\n\n const domain = email.slice(atIndex + 1);\n return domain;\n },\n};\n\nexport default Helpers;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport bugsnag from '@bugsnag/js';\nimport { animateScroll } from 'react-scroll';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport BulkActions from '~/actions/bulk_actions';\nimport APIRequest from '~/lib/api_request';\nimport EmailForm from '~/components/forms/email_form';\nimport RecipientItem from '~/components/modals/recipients/recipient_item';\nimport AppModal from './app_modal';\nimport ScheduleButton from '~/components/drawers/lead_drawer/forms/ScheduleForm/ScheduleButton';\n\nimport Helpers from '~/helpers/helpers';\nimport { DOMAIN_MESSAGES } from '~/helpers/constants';\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\n\nconst { currentTeam } = Rails.helpers;\n\nclass SendEmailModal extends React.Component {\n constructor(props) {\n super(props);\n\n const { currentUser } = Rails.helpers;\n\n this.state = {\n loadingBulkLimits: false,\n bulkLimitsReached: false,\n submitting: false,\n loadingRecipients: false,\n isConfirming: false,\n renderContent: false,\n email: {\n from: '',\n subject: '',\n body: '',\n cc_emails: '',\n attachment_ids: '',\n },\n recipients: [],\n recipientIDs: [],\n errors: {},\n responseError: null,\n visibleRecipients: 10,\n message: {\n type: null,\n text: '',\n },\n loadingValidation: false,\n disableSendButton: false,\n schedule: { customOptions: { timezone: currentUser.timezone } },\n scheduleEmailsAllowed: checkFeatureFlag(process.env.ALLOW_SCHEDULE_EMAILS_FLAG),\n };\n\n this.containerRef = React.createRef();\n }\n\n componentDidMount() {\n this.loadRecipients();\n }\n\n assignEmailState = (email) => {\n this.setState({ email });\n };\n\n setSchedule = (newSchedule) => {\n this.setState((prevState) => ({\n schedule: { ...prevState.schedule, ...newSchedule },\n }));\n };\n\n loadRecipients = () => {\n this.setState({ loadingRecipients: true }, () => {\n const {\n table,\n searchData,\n bulkSelecting,\n selectedItems,\n unSelectedItems,\n blastTeam,\n } = this.props;\n\n let selectedLeads = Object.values(selectedItems);\n const unselectedLeads = Object.values(unSelectedItems);\n\n let emailData;\n\n if (bulkSelecting) {\n selectedLeads = 'all';\n emailData = {\n ...searchData,\n ids: 'all',\n unselected_ids: _lodash.map(unselectedLeads, 'id'),\n };\n } else if (blastTeam) {\n selectedLeads = 'blast';\n emailData = { ...searchData, ids: 'blast' };\n } else {\n emailData = {\n ...searchData,\n ids: _lodash.map(selectedLeads, 'id'),\n };\n }\n\n APIRequest.post({\n resource: '/v1/lead_bulk_emails/recipients',\n data: emailData,\n }).end((error, response) => {\n this.setState({ loadingRecipients: false }, () => {\n if (!error) {\n const recipients = response.body;\n\n this.setState(\n {\n recipients,\n recipientIDs: _lodash.map(recipients, 'id'),\n },\n () => {\n this.validateBulkLimits();\n },\n );\n }\n });\n });\n });\n };\n\n validateBulkLimits = () => {\n const { recipients } = this.state;\n\n this.setState({ loadingBulkLimits: true }, () => {\n APIRequest.get({\n resource: '/v1/bulk_actions/validate_limits',\n data: {\n count_of_contacts: recipients.length,\n },\n }).end((error, response) => {\n this.setState({ loadingBulkLimits: false }, () => {\n if (!error) {\n const {\n bulk_message_frequency_limit,\n bulk_message_size_limit,\n reached_limits,\n } = response.body;\n\n this.setState({\n bulkLimitsReached: reached_limits,\n bulkMessageFrequencyLimit:\n bulk_message_frequency_limit || 'unlimited',\n bulkMessageSizeLimit:\n bulk_message_size_limit || 'unlimited',\n renderContent: true,\n });\n }\n });\n });\n });\n };\n\n validateFromDomainAndRecipients = async (address) => {\n const { recipients } = this.state;\n const recipientsCount = recipients.length;\n const domain = Helpers.extractDomainFromEmail(address);\n const maxRecipients = parseInt(\n process.env.UNCONFIG_DOMAIN_RECIPIENTS_LIMIT,\n 10,\n );\n\n if (!domain) {\n this.setState({\n message: {\n type: null,\n text: '',\n },\n disableSendButton: false,\n });\n\n return;\n }\n\n this.setState({ loadingValidation: true });\n\n try {\n const isDomainConfigured = await this.fetchDomainConfigurationStatus(domain);\n\n if (!isDomainConfigured) {\n if (recipientsCount <= maxRecipients) {\n this.setState({\n message: DOMAIN_MESSAGES.UNCONFIGURED_DOMAIN_WARNING,\n disableSendButton: false,\n });\n } else {\n this.setState({\n message: DOMAIN_MESSAGES.UNCONFIGURED_DOMAIN_ERROR(\n recipientsCount,\n maxRecipients,\n ),\n disableSendButton: true,\n });\n }\n } else {\n this.setState({\n message: {\n type: null,\n text: '',\n },\n disableSendButton: false,\n });\n }\n } catch (error) {\n this.setState({\n message: DOMAIN_MESSAGES.VALIDATION_ERROR,\n disableSendButton: true,\n });\n }\n\n this.setState({ loadingValidation: false });\n };\n\n fetchDomainConfigurationStatus = (domain) => new Promise((resolve, reject) => {\n APIRequest.get({\n resource: '/v1/email_domains/validate_domain',\n data: { domain },\n }).end((error, response) => {\n if (!error) {\n resolve(response.body.is_configured);\n } else {\n reject(error);\n }\n });\n });\n\n handleNext = (e) => {\n e.preventDefault();\n\n const errors = this.emailForm.validate();\n if (!_lodash.size(errors)) {\n this.setState({ isConfirming: true, errors: null });\n } else {\n this.setState({ errors });\n }\n };\n\n handleSubmit = (e) => {\n e.preventDefault();\n\n const $modal = $(this.appModal.modal);\n\n this.setState({ submitting: true }, () => {\n const { searchData, blastTeam, reloadLeads } = this.props;\n const { recipientIDs, email, schedule } = this.state;\n\n const emailData = { ids: recipientIDs, ...searchData };\n\n const defaults = {\n attachment_ids: _lodash.map(email.attachments, 'id'),\n };\n\n APIRequest.post({\n resource: '/v1/lead_bulk_emails',\n data: {\n ...defaults, ...emailData, ...email, schedule,\n },\n }).end((error, response) => {\n this.setState({ submitting: false }, () => {\n if (!error) {\n $modal.modal('hide');\n\n if (!blastTeam) {\n reloadLeads();\n }\n\n BulkActions.createAction('email');\n\n const notifyMessage = schedule?.selectedSchedule ? 'Your email is scheduled to be sent' : 'Your email is in the send queue and will go out shortly';\n\n GlobalContainer.notify(\n notifyMessage,\n );\n } else {\n if (response.status === 500) { // server error\n const bugsnagClient = bugsnag(\n process.env.BUGSNAG_API_KEY,\n );\n\n this.setState({ responseError: true });\n\n if (bugsnagClient) {\n bugsnagClient.notify(error, { context: response.text });\n }\n }\n\n GlobalContainer.notify(response?.body?.error || response.text, 'error');\n }\n });\n });\n });\n };\n\n handleRecipientSelect = (leadId, selected) => {\n const { recipientIDs } = this.state;\n\n const leadIdx = recipientIDs.indexOf(leadId);\n const leadSelected = leadIdx > -1;\n\n if (leadSelected) {\n if (!selected) {\n this.setState((prevState) => {\n const nextIds = [...prevState.recipientIDs];\n nextIds.splice(leadIdx, 1);\n\n return { recipientIDs: nextIds };\n });\n }\n } else if (selected) {\n this.setState((prevState) => ({\n recipientIDs: [...prevState.recipientIDs, leadId],\n }));\n }\n };\n\n loadMore = () => {\n this.setState(\n (prev) => ({ visibleRecipients: prev.visibleRecipients + 10 }),\n () => {\n this.scrollToBottom();\n },\n );\n };\n\n scrollToBottom = () => {\n animateScroll.scrollToBottom({\n containerId: 'recipients-table',\n });\n };\n\n renderRecipients = () => {\n const { recipients, loadingRecipients, visibleRecipients } = this.state;\n\n const leadRows = recipients.slice(0, visibleRecipients).map((lead, idx) => (\n \n Selected documents will be shared as public links. Recipients won’t need a Brokerkit account to view them.\n
\n )}\n | Loading recipients... | \n
\n \n Loading Recipients\n {' '}\n
\n
\n \n );\n }\n\n if (responseError) {\n return (\n <>\n \n Loading Recipients\n {' '}\n
\n \n {this.renderResponseError()}\n
\n\n \n {\n this.setState({\n isConfirming: false,\n responseError: false,\n message: {\n type: null,\n text: '',\n },\n });\n }}\n >\n Back\n \n
\n \n );\n }\n\n let takeOffHeader = `${selectedItemsCount} people`;\n\n // TODO: count correct retention agents for blasting\n if (blastTeam) {\n takeOffHeader = 'All team agents';\n }\n\n const sendButtonClass = classNames('btn btn-primary mr-0', {\n disabled: submitting,\n });\n\n return (\n <>\n \n
\n\n Prepare for takeoff ...
\n\n \n Load more ...\n \n )}\n
\n {takeOffHeader}
\nwill receive
\n{email.subject}
\n {this.renderRecipients()}\n\n {visibleRecipients < selectedItemsCount && (\n\n {\n this.setState({\n isConfirming: false,\n responseError: false,\n message: {\n type: null,\n text: '',\n },\n });\n }}\n >\n Back\n \n
\n \n );\n };\n\n renderContent() {\n const {\n message, submitting, errors, loadingValidation, disableSendButton,\n } = this.state;\n\n const sendButtonClass = classNames('btn btn-primary', {\n disabled: submitting || loadingValidation || disableSendButton,\n });\n\n return (\n <>\n \n \n Send\n \n\n {scheduleEmailsAllowed && (\n
\n \n {message.text && (\n \n {message.text}\n {' '}\n \n Configure Now\n \n
\n )}\n\n \n \n Cancel\n \n \n Next\n \n
\n \n );\n }\n\n renderResponseError = () => {\n const { responseError } = this.state;\n\n if (responseError) {\n return (\n \n
\n );\n }\n\n return null;\n };\n\n renderBulkVallidationError = () => {\n const { bulkMessageFrequencyLimit, bulkMessageSizeLimit } = this.state;\n const bulkMessageLookbackPeriod = process.env.BULK_MESSAGE_LOOKBACK_PERIOD / 24;\n\n const trialText = (\n <>\n while on a trial. Your limits will be increased at the end of\n the trial to those of your selected pricing plan seen\n {' '}\n \n here.\n \n \n );\n\n const mainText = (\n <>\n on your pricing plan. Please upgrade your pricing plan\n {' '}\n \n here\n \n {' '}\n to increase your limits.\n \n );\n\n return (\n \n
\n Oh no, looks like we had an issue.
\n\n Please try again, or refresh the page. Our site admins\n have been notified and we'll have this fixed shortly.\n
\n\n
\n );\n };\n\n renderBody = () => {\n const {\n isConfirming,\n bulkLimitsReached,\n loadingBulkLimits,\n renderContent,\n } = this.state;\n\n if (loadingBulkLimits) {\n return (\n \n Bulk messaging actions can only be triggered on up to\n {' '}\n {bulkMessageSizeLimit}\n {' '}\n contacts up to\n {' '}\n {bulkMessageFrequencyLimit}\n {' '}\n times within\n {' '}\n {bulkMessageLookbackPeriod}\n {' '}\n days\n {' '}\n {currentTeam.trial ? trialText : mainText}\n
\n \n
\n );\n }\n\n if (bulkLimitsReached) {\n return this.renderBulkVallidationError();\n }\n\n if (renderContent && isConfirming) {\n return this.renderConfirming();\n }\n\n if (renderContent && !isConfirming) {\n return this.renderContent();\n }\n\n return null;\n };\n\n render() {\n const { blastTeam } = this.props;\n const { submitting, isConfirming } = this.state;\n\n let modalHeader = (\n <>\n {isConfirming ? 'Confirming ' : ''}\n Bulk Email\n \n );\n\n if (blastTeam) {\n modalHeader = (\n <>\n {isConfirming ? 'Confirming ' : ''}\n Mass Email\n to All team agents\n \n );\n }\n\n const spinnerImg = (\n \n \n \n {leadRows}\n \n
\n
\n );\n }\n\n renderConfirming = () => {\n const {\n submitting, sms, recipientIDs, loadingRecipients, visibleRecipients, schedule, scheduleTextsAllowed,\n } = this.state;\n\n const count = recipientIDs.length;\n const takeOffHeader = count === 1 ? '1 person' : `${count.toLocaleString('en-US')} people`;\n\n const sendButtonClass = classNames('btn btn-primary', { disabled: submitting });\n\n if (loadingRecipients) {\n return (\n <>\n \n \n Loading Recipients\n {' '}\n
\n
\n \n );\n }\n\n return (\n <>\n \n Loading Recipients\n {' '}\n
\n \n
\n \n\n Prepare for blast...
\n\n \n
\n\n {this.renderRecipients()}\n\n {visibleRecipients < count\n && }\n {takeOffHeader}
\nwill receive
\n\n
\n \n {sms.media_url && (\n \n )}\n {sms.body}\n
\n {\n this.setState({ confirming: false });\n }}\n >\n Back\n \n
\n \n );\n }\n\n renderAttachment = () => {\n const { media, sms } = this.state;\n const { media_url } = sms;\n\n if (!media_url) return null;\n\n const name = media?.name || media?.title;\n\n return (\n \n \n {scheduleTextsAllowed && (\n
\n \n
\n );\n }\n\n renderBulkVallidationError = () => {\n const { bulkMessageFrequencyLimit, bulkMessageSizeLimit } = this.state;\n const bulkMessageLookbackPeriod = process.env.BULK_MESSAGE_LOOKBACK_PERIOD / 24;\n\n const trialText = (\n <>\n while on a trial. Your limits will be increased at the end of the\n {' '}\n trial to those of your selected pricing plan seen\n {' '}\n here.\n \n );\n\n const mainText = (\n <>\n on your pricing plan. Please upgrade your pricing plan\n {' '}\n here\n {' '}\n to increase your limits.\n \n );\n\n return (\n \n \n
\n \n
\n \n
\n );\n }\n\n renderBody = () => {\n const {\n confirming,\n bulkLimitsReached,\n loadingBulkLimits,\n renderContent,\n } = this.state;\n\n if (loadingBulkLimits) {\n return (\n \n Bulk messaging actions can only be triggered on up to\n {' '}\n {bulkMessageSizeLimit}\n {' '}\n contacts up to\n {' '}\n {bulkMessageFrequencyLimit}\n {' '}\n times within\n {' '}\n {bulkMessageLookbackPeriod}\n {' '}\n days\n {' '}\n {currentTeam.trial ? trialText : mainText}\n
\n \n
\n );\n }\n\n if (bulkLimitsReached) {\n return this.renderBulkVallidationError();\n }\n\n if (renderContent && confirming) {\n return this.renderConfirming();\n }\n\n if (renderContent && !confirming) {\n return this.renderContent();\n }\n\n return null;\n }\n\n applyTemplate(template) {\n const newState = update(this.state, {\n sms: {\n body: { $set: template.body },\n media_url: { $set: template.media_url },\n },\n media: {\n name: { $set: template.media_name },\n },\n templateBody: { $set: template.body },\n errors: { $set: {} },\n });\n\n this.setState(newState);\n }\n\n validate() {\n const VALIDATABLE_FIELDS = ['from', 'body'];\n const { sms } = this.state;\n const errors = {};\n\n VALIDATABLE_FIELDS.forEach((field) => {\n if (!sms[field]) errors[field] = [\"Can't be empty\"];\n });\n\n if (sms.body && charsLimit < sms.body.length) {\n errors.body = limitError;\n }\n\n this.setState({ errors });\n\n return errors;\n }\n\n validateBody() {\n const { sms } = this.state;\n const lengthCondition = sms.body && charsLimit < sms.body.length;\n\n const newState = update(this.state, {\n errors: {\n body: { $set: lengthCondition ? limitError : null },\n },\n disabledButton: { $set: !!lengthCondition },\n });\n\n this.setState(newState);\n }\n\n renderContent = () => {\n const {\n loading, submitting, disabledButton, errors, numbers, sms,\n templateBody, showVerifiedTextingWarning, warningAccepted,\n isLimitExceeded, recipientIDs, limitAlertAllowed, showA2PWarning, linksToInsert,\n } = this.state;\n const sendButtonClass = classNames('btn btn-primary', { disabled: submitting });\n\n const selectedItemsCount = recipientIDs.length;\n\n return (\n <>\n \n
\n\n \n \n
\n\n \n {\n this.setState({\n templateBody: null,\n });\n }}\n linksToInsert={linksToInsert}\n clearLinksToInsert={() => {\n this.setState({ linksToInsert: [] });\n }}\n />\n {errors.body &&
\n\n \n
\n \n this.setState({ linksToInsert })}\n />\n
\n\n \n {this.renderAttachment()}\n {errors.media &&
\n\n \n
\n \n \n \n
\n \n );\n }\n\n render() {\n const {\n records, blastTeam,\n } = this.props;\n const {\n submitting, confirming, sms,\n } = this.state;\n\n const spinnerImg = \n
\n );\n }\n\n return (\n <>\n \n
\n\n \n \n this.setTaskField('name', val && val.target.value)}\n />\n
\n \n \n this.setTaskField('category', opt && opt.value)}\n />\n
\n \n \n this.setTaskField(\n 'due_date_at',\n picker && picker.format('YYYY-MM-DD'),\n )}\n />\n
\n \n \n this.setTaskField('description', html)}\n placeholder=\"Enter Description\"\n value={task.description}\n />\n
\n\n \n
\n\n \n \n this.setTaskField('lead_ids', ids)}\n isInvalid={!!errors.lead_ids}\n />\n
\n \n
\n \n );\n }\n\n render() {\n const { task, submitting } = this.state;\n const { containerID, modalClass, dialogClass } = this.props;\n\n return (\n \n \n Owner\n \n this.setTaskField('owner_id', opt && opt.value)}\n clearable\n />\n
\n\n \n \n this.setTaskField('priority', opt && opt.value)}\n />\n
\n\n \n \n this.setTaskField('status', opt && opt.value)}\n />\n
\n \n \n ×\n \n
\n\n \n Edit Task\n
\n\n{this.renderTaskForm()}
\n\n \n \n Cancel\n \n {submitting ? (\n \n \n \n \n \n )}\n
\n \n \n );\n }\n}\n\nTaskModal.defaultProps = {\n lead: {},\n loadLead: true,\n};\n\nTaskModal.propTypes = {\n taskID: PropTypes.number.isRequired,\n lead: PropTypes.shape({}),\n loadLead: PropTypes.bool,\n};\n\nexport default TaskModal;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport autoBind from 'react-autobind';\nimport { Link, BrowserRouter } from 'react-router-dom';\n\nimport brokerbit from '~/lib/brokerbit';\nimport VideoActions from '~/actions/video_actions';\n\nclass VideoItem extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n inEdit: false,\n video: props.video,\n newTitle: props.video?.title,\n newDescription: props.video?.description,\n errors: {},\n };\n\n autoBind(this);\n }\n\n onChangeTitle = (e) => {\n e.persist();\n\n this.setState({ newTitle: e.target.value });\n }\n\n onChangeDescription = (e) => {\n e.persist();\n\n this.setState({ newDescription: e.target.value });\n }\n\n editVideo = (e) => {\n e.preventDefault();\n\n this.setState({ inEdit: true });\n }\n\n handleCancelEditing = (e) => {\n e.preventDefault();\n\n const { video } = this.state;\n\n this.setState({\n video,\n inEdit: false,\n newTitle: video.title,\n newDescription: video.description,\n });\n }\n\n handleSaveVideoTitle = (e) => {\n e.preventDefault();\n\n const { newTitle, newDescription, video } = this.state;\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n this.setState((prevState) => ({\n video: {\n ...prevState.video,\n title: newTitle,\n description: newDescription,\n },\n }), this.updateVideo);\n } else {\n this.setState({ errors });\n }\n }\n\n updateVideo = () => {\n const { video } = this.state;\n const { pagination, search } = this.props;\n\n VideoActions.updateVideo(video, {\n page: pagination.current_page,\n search: {\n query: encodeURIComponent(search?.title),\n user_id: search?.user_id,\n },\n });\n }\n\n deleteVideo = (e) => {\n e.preventDefault();\n\n const { video } = this.state;\n const { pagination, search } = this.props;\n\n brokerbit.confirmBox({\n message: `Are you sure to remove the \"${video.title}\" video?`,\n callback: (ok) => {\n if (ok) {\n VideoActions.deleteVideo(video, {\n page: pagination.current_page,\n search: {\n query: encodeURIComponent(search?.title),\n user_id: search?.user_id,\n },\n });\n }\n },\n });\n }\n\n validate = () => {\n const { newTitle } = this.state;\n const errors = {};\n\n if (!newTitle) {\n errors.title = 'Is invalid';\n }\n\n return errors;\n }\n\n renderRadioButton = () => {\n const { video } = this.state;\n const { selectedVideo, selectVideo } = this.props;\n\n return (\n \n
\n );\n }\n\n renderImageAndState = () => {\n const { video } = this.state;\n\n return (\n \n
\n \n
\n );\n }\n\n renderInformation = () => {\n const {\n inEdit,\n video,\n newTitle,\n newDescription,\n errors,\n } = this.state;\n const videoCreatedAt = Moment(video.created_at).format('MMMM D, YYYY - hh:mmA');\n\n return (\n \n {video.thumbnail ? (\n \n 
\n \n ) : (\n
\n Processing ...
\n )}\n \n {inEdit ? (\n <>\n
\n );\n }\n\n renderAction = () => {\n const { inEdit, video } = this.state;\n\n return (\n <>\n {!inEdit && (\n \n )}\n \n );\n }\n\n render() {\n const { video } = this.state;\n const { selectedVideo } = this.props;\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 {videoCreatedAt}
\n {video.title}
\n \n
\n \n {this.renderRadioButton()}\n {this.renderImageAndState()}\n {this.renderInformation()}\n {this.renderAction()}\n
\n\n {(selectedVideo === video.id && !video.thumbnail) && (\n \n The thumbnail is being created, and you can't insert it until that is completed.\n
\n )}\n \n { pagination.total_pages > 1\n && (\n ' : 'Next'}\n />\n )}\n
\n );\n }\n\n renderCount = () => {\n const {\n loadingVideos,\n videosLimit,\n countOfVideos,\n } = this.state;\n const { currentTeam } = Rails.helpers;\n\n if (loadingVideos) return null;\n\n const count = countOfVideos || 0;\n const limits = videosLimit || 'unlimited';\n const text = currentTeam.organization_id ? 'organization' : 'account';\n\n return (\n \n {count}\n {' '}\n of\n {' '}\n {limits}\n {' '}\n in your\n {' '}\n {text}\n
\n );\n }\n\n renderSearchForm = () => {\n const { search } = this.state;\n\n return (\n \n
\n );\n }\n\n renderVideos = () => {\n const {\n videos,\n loadingVideos,\n pagination,\n search,\n selectedVideo,\n } = this.state;\n\n if (loadingVideos) {\n return (\n \n (this.queryInput = input)}\n type=\"text\"\n className=\"form-control\"\n placeholder=\"Search a Video\"\n value={search.title}\n onChange={this.handleSearchChange}\n onKeyDown={this.handleSearchKeyDown}\n />\n
\n\n \n this.handleUserIdChange(opt)}\n />\n
\n \n
\n );\n }\n\n if (_lodash.isEmpty(videos)) {\n return (\n <>\n There are no videos.
\n \n );\n }\n\n return (\n \n {videos.map((v) => (\n
\n );\n }\n\n render() {\n const { selectedVideo, videos } = this.state;\n const { onChooseView, sms } = this.props;\n const video = _lodash.find(videos, (t) => t.id === selectedVideo);\n const thumbnail = video?.gif_thumbnail || video?.thumbnail;\n const tooltipText = 'Note: The hyperlink to your video will be automatically shortened when the text is delivered. This ensures a cleaner, more user-friendly experience for the recipient.';\n\n return (\n <>\n \n {this.renderSearchForm()}\n {this.renderVideos()}\n\n
\n\n \n
\n \n {this.renderCount()}\n {this.renderPagination()}\n
\n \n \n\n
\n \n );\n }\n}\n\nVideoLibrary.defaultProps = {\n onChooseView: () => false,\n closeModal: () => false,\n sms: false,\n editor: {},\n};\n\nVideoLibrary.propTypes = {\n onChooseView: PropTypes.func,\n closeModal: PropTypes.func,\n sms: PropTypes.bool,\n editor: PropTypes.shape({}),\n};\n\nexport default VideoLibrary;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport autoBind from 'react-autobind';\n\nimport AppModal from '../app_modal';\nimport RecordVideo from './forms/RecordVideo';\nimport UploadVideo from './forms/UploadVideo';\nimport VideoLibrary from './VideoLibrary';\n\nclass VideosModal extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n view: 'recordVideo',\n };\n\n this.appModal = React.createRef();\n\n autoBind(this);\n }\n\n onChooseView = (e, view) => {\n e.preventDefault();\n\n this.setState({ view });\n }\n\n closeModal = () => {\n const modalRef = this.appModal.current;\n const $modal = $(modalRef.modal);\n\n $modal.modal('hide');\n }\n\n getComponent = () => {\n const { view } = this.state;\n const { editor, sms } = this.props;\n\n switch (view) {\n case 'recordVideo':\n return (\n \n {sms ? (\n \n \n Insert video\n \n \n ) : (\n \n Insert video\n \n )}\n
\n \n
\n \n Oh shoot, looks like we had an issue.\n
\n \n \n
\n \n );\n }\n }\n\n render() {\n const {\n containerID,\n modalClass,\n dialogClass,\n sms,\n } = this.props;\n\n return (\n \n \n
\n\n \n
\n\n {this.getComponent()}\n \n );\n }\n}\n\nVideosModal.defaultProps = {\n containerID: '',\n modalClass: '',\n dialogClass: '',\n editor: {},\n sms: false,\n};\n\nVideosModal.propTypes = {\n containerID: PropTypes.string,\n modalClass: PropTypes.string,\n dialogClass: PropTypes.string,\n editor: PropTypes.shape({}),\n sms: PropTypes.bool,\n};\n\nexport default VideosModal;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport autoBind from 'react-autobind';\nimport { Progress } from 'react-sweet-progress';\nimport { DirectUpload } from '@rails/activestorage';\nimport Pubnub from 'pubnub';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nimport VideoRecorder from '~/components/forms/video_recorder';\nimport VideoActions from '~/actions/video_actions';\nimport VideoStore from '~/stores/video_store';\n\nimport SubscriptionLimitActions from '~/actions/subscription_limit_actions';\nimport SubscriptionLimitStore from '~/stores/subscription_limit_store';\n\nconst today = Moment().format('MMMM D, YYYY');\n// const uploadUrl = `${process.env.API_URL}/rails/active_storage/direct_uploads`;\nconst uploadUrl = `${Rails.apiUrl}/rails/active_storage/direct_uploads`;\n\nclass RecordVideo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n videosLimitReached: false,\n percentCompleted: 0,\n uploading: false,\n submitting: false,\n file: undefined,\n errors: {},\n transcoding: {\n status: '',\n progress: 0,\n video_url: null,\n gif_thumbnail: null,\n thumbnail: null,\n },\n video: {\n id: null,\n video: '',\n title: `Video - ${today}`,\n description: '',\n animated_thumbnail: false,\n },\n };\n\n this.pubnub = new Pubnub({\n publishKey: process.env.PUBNUB_PUBLISH_KEY,\n subscribeKey: process.env.PUBNUB_SUBSCRIBE_KEY,\n uuid: process.env.PUBNUB_VIDEOS_UUID,\n });\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.videosStoreListener = VideoStore.addListener(this.onVideoStoreChange);\n this.subscriptionLimitStoreListener = SubscriptionLimitStore.addListener(this.onSubscriptionLimitStoreChange);\n\n this.pubNubListeners = {\n message: this.onMessageReceived,\n };\n\n this.pubnub.addListener(this.pubNubListeners);\n\n SubscriptionLimitActions.checkIfVideosLimitReached();\n }\n\n componentWillUnmount() {\n if (this.videosStoreListener) this.videosStoreListener.remove();\n if (this.subscriptionLimitStoreListener) this.subscriptionLimitStoreListener.remove();\n if (this.pubnub) this.pubnub.removeListener(this.pubNubListeners);\n }\n\n onVideoStoreChange = () => {\n const {\n video, lastVideoStoreAction, errors, submitting,\n } = VideoStore.getState();\n let nextState = { errors, submitting };\n const params = {\n id: video?.id,\n title: video?.title,\n description: video?.description,\n animated_thumbnail: video?.animated_thumbnail,\n uuid: video?.uuid,\n };\n\n switch (lastVideoStoreAction) {\n case 'createVideoDone':\n nextState = { video: params, errors, submitting };\n\n this.pubnub.subscribe({\n channels: [`video_conversion-${video.id}`],\n });\n\n break;\n case 'updateVideoDone':\n nextState = { video: params, errors, submitting };\n\n break;\n case 'createVideoFail':\n nextState = { errors, submitting };\n\n break;\n default:\n }\n\n this.setState(nextState);\n }\n\n onSubscriptionLimitStoreChange = () => {\n const { loading, videosLimitReached } = SubscriptionLimitStore.getState();\n\n this.setState({\n loading,\n videosLimitReached,\n });\n }\n\n onMessageReceived = (payload) => {\n const { video } = this.state;\n const { message } = payload;\n const transcoding = message?.transcoding;\n const status = transcoding?.status;\n\n this.setState({\n transcoding,\n }, () => {\n if (video?.id && status === 'transcoded') {\n this.pubnub.unsubscribe({\n channels: [`video_conversion-${video.id}`],\n });\n }\n });\n }\n\n setFormField(field, value) {\n this.setState((prevState) => ({\n video: {\n ...prevState.video,\n [field]: value,\n },\n }));\n }\n\n setErrors = (name, value) => {\n this.setState((prevState) => ({\n errors: {\n [name]: value,\n },\n }));\n }\n\n onUserMedia = (blob) => {\n const { video } = this.state;\n\n if (!blob) return;\n\n const file = new File([blob], `${video.title}.webm`, {\n type: 'video/webm',\n });\n\n this.setState({ file });\n }\n\n uploadVideo = () => {\n const { file } = this.state;\n\n if (!file) return;\n\n this.setState({ uploading: true });\n\n const upload = new DirectUpload(file, uploadUrl, {\n directUploadWillCreateBlobWithXHR: (xhr) => {\n xhr.setRequestHeader('Authentication', `${Rails.helpers.authToken}`);\n },\n directUploadWillStoreFileWithXHR: (xhr) => {\n xhr.upload.addEventListener('progress', (event) => this.directUploadDidProgress(event));\n },\n });\n\n upload.create((error, blob) => {\n if (error) {\n this.setState((prevState) => ({\n uploading: false,\n percentCompleted: 0,\n errors: {\n ...prevState.errors,\n file_uploading: error,\n },\n }));\n } else {\n this.setState((prevState) => ({\n uploading: false,\n percentCompleted: 0,\n transcoding: {\n ...prevState.transcoding,\n status: 'transcoding',\n progress: 0,\n },\n video: {\n ...prevState.video,\n video: blob.signed_id,\n },\n }));\n\n this.createVideo();\n }\n });\n }\n\n createVideo = () => {\n const { video } = this.state;\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n VideoActions.createVideo({ video });\n } else {\n this.setState({ errors });\n }\n }\n\n handleUploadVideo = (e) => {\n e.preventDefault();\n\n this.uploadVideo();\n }\n\n handleSaveVideo = (e) => {\n e.preventDefault();\n\n const { video } = this.state;\n const params = {\n id: video.id,\n title: video.title,\n description: video.description,\n animated_thumbnail: video.animated_thumbnail,\n };\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n VideoActions.updateVideo(params, {\n loadVideos: false,\n });\n } else {\n this.setState({ errors });\n }\n }\n\n handleInsertVideo = (e) => {\n e.preventDefault();\n\n const { transcoding, video } = this.state;\n const { editor, closeModal, sms } = this.props;\n\n if (editor && (transcoding.gif_thumbnail || transcoding.thumbnail)) {\n const thumbnail = video?.animated_thumbnail ? transcoding.gif_thumbnail : transcoding.thumbnail;\n\n if (!sms) {\n editor.insertContent(\n `\n
\n\n \n \n { this.disabledStatus() ? (\n \n ) : (\n \n )}\n\n { this.disabledStatus() ? (\n \n ) : (\n \n )}\n\n { this.disabledStatus() ? (\n \n ) : (\n \n )}\n
\n );\n }\n\n renderThumbnail = () => {\n const { transcoding, video } = this.state;\n const { gif_thumbnail, thumbnail } = transcoding;\n\n if (!gif_thumbnail && !thumbnail) return null;\n\n const imageUrl = video.animated_thumbnail ? gif_thumbnail : thumbnail;\n\n return (\n \n
\n );\n }\n\n renderVideoRecordingComponent = () => {\n const {\n file,\n video,\n uploading,\n percentCompleted,\n transcoding,\n errors,\n } = this.state;\n\n if (errors.file_uploading) {\n return (\n \n
\n \n 
\n
\n \n Oops, something went wrong. Try again later.\n
\n );\n }\n\n if (uploading) {\n return (\n \n
\n );\n }\n\n if (transcoding.status === 'transcoding') {\n const transcodingProgress = Math.round(transcoding.progress);\n\n return (\n <>\n We are now uploading your video.
\nPlease keep the video window open while the video uploads. You can work on Brokerkit in the meantime in other tabs
\n \n\n
\n We are now converting your video.
\nWhile the video converts you can keep the video window open or you can close it and wait for the video to show in your video library for sending.
\n\n \n
\n \n );\n }\n\n if (transcoding.status === 'transcoded') {\n return this.renderThumbnail();\n }\n\n return (\n \n
\n );\n }\n\n renderModalBody = () => {\n const {\n video,\n errors,\n loading,\n videosLimitReached,\n } = this.state;\n const { onChooseView } = this.props;\n\n if (loading) {\n return (\n \n
\n );\n }\n\n if (videosLimitReached) {\n return (\n \n
\n );\n }\n\n return (\n <>\n {this.renderVideoRecordingComponent()}\n\n You've reached the video limit
\nUpgrade to unlock uploading videos and recording time.
\n Upgrade Plan\n\n onChooseView(e, 'videoLibrary')}> Or go delete videos in your library to continue recording.\n
\n\n
\n\n \n this.setFormField('title', e.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.title })}\n />\n
\n\n \n
\n \n this.setFormField('animated_thumbnail', e.target.checked)}\n />\n \n
\n \n
\n \n );\n };\n\n render() {\n const {\n file,\n video,\n transcoding,\n } = this.state;\n const { sms } = this.props;\n const tooltipText = 'Note: The hyperlink to your video will be automatically shortened when the text is delivered. This ensures a cleaner, more user-friendly experience for the recipient.';\n let saveButton;\n\n if (!video.id) {\n if (this.disabledStatus() || !file) {\n saveButton = (\n \n );\n } else {\n saveButton = (\n \n );\n }\n } else if (this.disabledStatus()) {\n saveButton = (\n \n );\n } else {\n saveButton = (\n \n );\n }\n\n return (\n <>\n \n this.setFormField('description', e.target.value)}\n className=\"form-control\"\n rows={1}\n />\n
\n \n {this.renderViews()}\n {this.renderModalBody()}\n
\n\n \n { this.disabledStatus() ? (\n \n ) : (\n \n )}\n\n {saveButton}\n\n {sms ? (\n \n \n Insert video\n \n \n ) : (\n \n Insert video\n \n )}\n
\n \n );\n }\n}\n\nRecordVideo.defaultProps = {\n onChooseView: () => false,\n closeModal: () => false,\n sms: false,\n editor: {},\n};\n\nRecordVideo.propTypes = {\n onChooseView: PropTypes.func,\n closeModal: PropTypes.func,\n sms: PropTypes.bool,\n editor: PropTypes.shape({}),\n};\n\nexport default RecordVideo;\n","/* eslint-disable jsx-a11y/media-has-caption */\n\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport autoBind from 'react-autobind';\nimport Dropzone from 'react-dropzone';\nimport filesize from 'filesize';\nimport { Progress } from 'react-sweet-progress';\nimport { DirectUpload } from '@rails/activestorage';\nimport Pubnub from 'pubnub';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nimport VideoActions from '~/actions/video_actions';\nimport VideoStore from '~/stores/video_store';\nimport SubscriptionLimitActions from '~/actions/subscription_limit_actions';\nimport SubscriptionLimitStore from '~/stores/subscription_limit_store';\n\nconst today = Moment().format('MMMM D, YYYY');\n// const uploadUrl = `${process.env.API_URL}/rails/active_storage/direct_uploads`;\nconst uploadUrl = `${Rails.apiUrl}/rails/active_storage/direct_uploads`;\nconst maxVideoSize = Number(process.env.MAX_VIDEO_SIZE);\nconst acceptedFormats = {\n 'video/mp4': ['.mp4'],\n 'video/mpeg': ['.mpeg', '.mpg'],\n 'video/x-msvideo': ['.avi'],\n 'video/quicktime': ['.mov'],\n 'video/x-flv': ['.flv'],\n 'video/x-ms-wmv': ['.wmv'],\n 'video/x-m4v': ['.m4v'],\n};\n\nclass UploadVideo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: false,\n videosLimitReached: false,\n uploading: false,\n percentCompleted: 0,\n submitting: false,\n file: undefined,\n errors: {},\n transcoding: {\n status: '',\n progress: 0,\n video_url: null,\n gif_thumbnail: null,\n thumbnail: null,\n },\n video: {\n id: null,\n video: '',\n title: `Video - ${today}`,\n description: '',\n animated_thumbnail: false,\n },\n };\n\n this.baseState = this.state;\n\n this.pubnub = new Pubnub({\n publishKey: process.env.PUBNUB_PUBLISH_KEY,\n subscribeKey: process.env.PUBNUB_SUBSCRIBE_KEY,\n uuid: process.env.PUBNUB_VIDEOS_UUID,\n });\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.videosStoreListener = VideoStore.addListener(this.onVideoStoreChange);\n this.subscriptionLimitStoreListener = SubscriptionLimitStore.addListener(this.onSubscriptionLimitStoreChange);\n\n this.pubNubListeners = {\n message: this.onMessageReceived,\n };\n\n this.pubnub.addListener(this.pubNubListeners);\n\n SubscriptionLimitActions.checkIfVideosLimitReached();\n }\n\n componentWillUnmount() {\n if (this.videosStoreListener) this.videosStoreListener.remove();\n if (this.subscriptionLimitStoreListener) this.subscriptionLimitStoreListener.remove();\n if (this.pubnub) this.pubnub.removeListener(this.pubNubListeners);\n }\n\n onSubscriptionLimitStoreChange = () => {\n const { loading, videosLimitReached } = SubscriptionLimitStore.getState();\n\n this.setState({\n loading,\n videosLimitReached,\n });\n }\n\n onMessageReceived = (payload) => {\n const { video } = this.state;\n const { message } = payload;\n const transcoding = message?.transcoding;\n const status = transcoding?.status;\n\n this.setState({\n transcoding,\n }, () => {\n if (video?.id && status === 'transcoded') {\n this.pubnub.unsubscribe({\n channels: [`video_conversion-${video.id}`],\n });\n }\n });\n }\n\n onVideoStoreChange = () => {\n const {\n video, lastVideoStoreAction, errors, submitting,\n } = VideoStore.getState();\n let nextState = { errors, submitting };\n\n const params = {\n id: video?.id,\n title: video?.title,\n description: video?.description,\n animated_thumbnail: video?.animated_thumbnail,\n uuid: video?.uuid,\n };\n\n switch (lastVideoStoreAction) {\n case 'createVideoDone':\n nextState = { video: params, errors, submitting };\n\n this.pubnub.subscribe({\n channels: [`video_conversion-${video.id}`],\n });\n\n break;\n case 'updateVideoDone':\n nextState = { video: params, errors, submitting };\n\n break;\n case 'createVideoFail':\n nextState = { errors, submitting };\n\n break;\n default:\n }\n\n this.setState(nextState);\n }\n\n setFormField(field, value) {\n this.setState((prevState) => ({\n video: {\n ...prevState.video,\n [field]: value,\n },\n }));\n }\n\n setErrors = (name, value) => {\n this.setState((prevState) => ({\n errors: {\n [name]: value,\n },\n }));\n }\n\n onDrop = (acceptedFiles, fileRejections) => {\n const file = acceptedFiles[0];\n const rejectedFile = fileRejections[0];\n\n rejectedFile?.errors.forEach((err) => {\n if (err.code === 'file-too-large') {\n this.setErrors('fileTooLarge', `Error: File is too large (${filesize(rejectedFile.file.size)}).`);\n }\n\n if (err.code === 'file-invalid-type') {\n this.setErrors('fileInvalidType', 'Error: File type is not accepted.');\n }\n });\n\n if (rejectedFile) return;\n\n this.setState({\n file,\n }, () => {\n this.uploadVideo();\n });\n };\n\n uploadVideo = () => {\n const { file } = this.state;\n\n if (!file) return;\n\n this.setState({ uploading: true });\n\n const upload = new DirectUpload(file, uploadUrl, {\n directUploadWillCreateBlobWithXHR: (xhr) => {\n xhr.setRequestHeader('Authentication', `${Rails.helpers.authToken}`);\n },\n directUploadWillStoreFileWithXHR: (xhr) => {\n xhr.upload.addEventListener('progress', (event) => this.directUploadDidProgress(event));\n },\n });\n\n upload.create((error, blob) => {\n if (error) {\n this.setState((prevState) => ({\n uploading: false,\n percentCompleted: 0,\n errors: {\n ...prevState.errors,\n file_uploading: error,\n },\n }));\n } else {\n this.setState((prevState) => ({\n uploading: false,\n percentCompleted: 0,\n transcoding: {\n ...prevState.transcoding,\n status: 'transcoding',\n progress: 0,\n },\n video: {\n ...prevState.video,\n video: blob.signed_id,\n },\n }));\n\n this.createVideo();\n }\n });\n }\n\n createVideo = () => {\n const { video } = this.state;\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n VideoActions.createVideo({ video });\n } else {\n this.setState({ errors });\n }\n }\n\n handleSaveVideo = (e) => {\n e.preventDefault();\n\n const { newTitle, video } = this.state;\n const params = {\n id: video.id,\n title: video.title,\n description: video.description,\n animated_thumbnail: video.animated_thumbnail,\n };\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n VideoActions.updateVideo(params, {\n loadVideos: false,\n });\n } else {\n this.setState({ errors });\n }\n }\n\n handleInsertVideo = (e) => {\n e.preventDefault();\n\n const { transcoding, video } = this.state;\n const { editor, closeModal, sms } = this.props;\n\n if (editor && (transcoding.gif_thumbnail || transcoding.thumbnail)) {\n const thumbnail = video?.animated_thumbnail ? transcoding.gif_thumbnail : transcoding.thumbnail;\n\n if (!sms) {\n editor.insertContent(\n `\n { this.disabledStatus() ? (\n \n ) : (\n \n )}\n\n { this.disabledStatus() || !video.id ? (\n \n ) : (\n \n )}\n\n {sms ? (\n \n \n Insert video\n \n \n ) : (\n \n Insert video\n \n )}\n
\n );\n }\n\n renderViews = () => {\n const { onChooseView } = this.props;\n\n return (\n \n { this.disabledStatus() ? (\n \n ) : (\n \n )}\n\n { this.disabledStatus() ? (\n \n ) : (\n \n )}\n\n { this.disabledStatus() ? (\n \n ) : (\n \n )}\n
\n );\n }\n\n renderThumbnail = () => {\n const { transcoding, video } = this.state;\n const { gif_thumbnail, thumbnail } = transcoding;\n\n if (!gif_thumbnail && !thumbnail) return null;\n\n const imageUrl = video.animated_thumbnail ? gif_thumbnail : thumbnail;\n\n return (\n \n
\n );\n }\n\n renderDropZone = () => {\n const {\n video,\n file,\n errors,\n transcoding,\n uploading,\n percentCompleted,\n } = this.state;\n\n if (uploading) {\n return (\n \n
\n \n \n
\n \n
\n );\n }\n\n if (transcoding.status === 'transcoding') {\n const transcodingProgress = Math.round(transcoding.progress);\n\n return (\n <>\n We are now uploading your video.
\nPlease keep the video window open while the video uploads. You can work on Brokerkit in the meantime in other tabs
\n \n\n
\n We are now converting your video.
\nWhile the video converts you can keep the video window open or you can close it and wait for the video to show in your video library for sending.
\n\n \n
\n \n );\n }\n\n return (\n \n \n {({\n getRootProps,\n getInputProps,\n isDragActive,\n isDragReject,\n acceptedFiles,\n fileRejections,\n }) => {\n const rejectedFile = fileRejections[0];\n\n return (\n
\n );\n }\n\n renderModalBody = () => {\n const {\n video,\n errors,\n loading,\n transcoding,\n videosLimitReached,\n } = this.state;\n const { onChooseView } = this.props;\n const poster = video.animated_thumbnail ? transcoding.gif_thumbnail : transcoding.thumbnail;\n\n if (loading) {\n return (\n \n \n\n
\n );\n }}\n \n \n
\n ) : (\n <>\n {isDragActive ? (\n Drop the video file here ...
\n ) : (\n\n Click or Drag video file to this area to upload.\n
\n )}\n\n\n Up to\n {' '}\n {filesize(maxVideoSize)}\n {' '}\n in size.\n
\n\n\n Accepted formats: mp4, mpg, mov, avi, flv, mpeg, wmv, m4v.\n
\n\n {rejectedFile && (\n <>\n {!!errors.file_uploading && (\n\n Oops, something went wrong. Try again later.\n
\n )}\n\n {!!errors.video && (\n \n File must be selected!\n
\n )}\n\n {!!errors.fileInvalidType && (\n \n {errors.fileInvalidType}\n
\n )}\n\n {!!errors.fileTooLarge && (\n \n {errors.fileTooLarge}\n
\n )}\n \n )}\n \n )}\n \n
\n );\n }\n\n if (videosLimitReached) {\n return (\n \n
\n );\n }\n\n return (\n <>\n You've reached the video limit
\nUpgrade to unlock uploading videos and recording time.
\n Upgrade Plan\n\n onChooseView(e, 'videoLibrary')}> Or go delete videos in your library to continue recording.\n
\n\n {transcoding.status === 'transcoded' ? (\n this.renderThumbnail()\n ) : (\n this.renderDropZone()\n )}\n
\n\n \n
\n\n \n this.setFormField('title', e.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.title })}\n />\n
\n\n \n
\n \n this.setFormField('animated_thumbnail', e.target.checked)}\n />\n \n
\n \n
\n \n );\n }\n\n render() {\n return (\n <>\n \n this.setFormField('description', e.target.value)}\n className=\"form-control\"\n rows={1}\n />\n
\n \n {this.renderViews()}\n {this.renderModalBody()}\n
\n\n {this.renderModalFooter()}\n \n );\n }\n}\n\nUploadVideo.defaultProps = {\n onChooseView: () => false,\n closeModal: () => false,\n sms: false,\n editor: {},\n};\n\nUploadVideo.propTypes = {\n onChooseView: PropTypes.func,\n closeModal: PropTypes.func,\n sms: PropTypes.bool,\n editor: PropTypes.shape({}),\n};\n\nexport default UploadVideo;\n","import classNames from 'classnames';\nimport React from 'react';\nimport { Link } from 'react-router-dom';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nclass AccountSideBar extends React.Component {\n render() {\n const { team } = this.props;\n const { abilities } = Rails;\n const { currentUser } = Rails.helpers;\n const currentUserRoleName = currentUser.role.name;\n // eslint-disable-next-line no-restricted-globals, no-undef\n const page = location.pathname;\n\n const homeURL = '/';\n\n const accountClassName = classNames('list-group-item', { active: page === '/users/edit' });\n const landingPageClassName = classNames('list-group-item', { active: page === '/team/landing_page/edit' });\n const teamClassName = classNames('list-group-item', { active: page === '/team/edit' });\n const phoneNumberPageClassName = classNames('list-group-item', { active: page === '/users/phone_number/edit' });\n const membersClassName = classNames('list-group-item', { active: page === '/team/members' });\n\n return (\n \n \n
\n );\n }\n}\n\nAccountSideBar.defaultProps = {\n team: null,\n};\n\nAccountSideBar.propTypes = {\n team: PropTypes.shape({}),\n};\n\nexport default AccountSideBar;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Link, useLocation } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Tooltip } from 'reactstrap';\nimport classNames from 'classnames';\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\n\nconst AgentSideBar = () => {\n const { abilities } = Rails;\n const [isInboxTooltipVisible, setIsInboxTooltipVisible] = useState(false);\n const [dropdowns, setDropdowns] = useState({\n content: false,\n leadGen: false,\n automation: false,\n data: false,\n });\n const isDmsAllowed = checkFeatureFlag(process.env.ENABLE_DOCUMENT_MANAGEMENT_FLAG);\n\n const innerLinks = [\n /documents/,\n '/recruiter/team/landing_page/edit',\n '/onboard/referrers',\n '/recruiter/campaigns',\n '/recruiter/campaign_libraries',\n '/recruiter/campaign_triggers',\n '/recruiter/data',\n '/recruiter/labels',\n ];\n\n const inboxLinkRef = useRef(null);\n const tooltipRef = useRef(null);\n\n const location = useLocation();\n const page = location.pathname;\n\n const handleInboxClick = (e) => {\n const isAccessAllowed = checkFeatureFlag(process.env.RESTRICT_INBOX_ACCESS_FLAG);\n if (!isAccessAllowed) {\n e.preventDefault();\n setIsInboxTooltipVisible(true);\n } else {\n setIsInboxTooltipVisible(false);\n }\n };\n\n const handleOutsideClick = (e) => {\n if (inboxLinkRef.current && !inboxLinkRef.current.contains(e.target)\n && tooltipRef.current && !tooltipRef.current.contains(e.target)) {\n setIsInboxTooltipVisible(false);\n }\n };\n\n const toggleDropdown = (name) => {\n setDropdowns((prev) => ({ ...prev, [name]: !prev[name] }));\n };\n\n function isActivePage(pathOrRegex) {\n let isActive = false;\n\n if (Array.isArray(pathOrRegex)) {\n isActive = pathOrRegex.some((p) => (typeof p === 'string' ? page === p : p.test(page)));\n } else if (typeof pathOrRegex === 'string') {\n isActive = page === pathOrRegex;\n } else {\n isActive = pathOrRegex.test(page);\n }\n\n return isActive;\n }\n\n const isDropdown = (pathOrRegex) => {\n if (Array.isArray(pathOrRegex)) {\n return pathOrRegex.some((p) => innerLinks.some((l) => (typeof l === 'string' ? l === p : l.source === p.source)));\n } if (typeof pathOrRegex === 'string') {\n return innerLinks.some((l) => l === pathOrRegex);\n }\n return innerLinks.some((l) => l.source === pathOrRegex.source);\n };\n\n const getClassName = (pathOrRegex) => {\n const active = isActivePage(pathOrRegex);\n let baseClass = 'list-group-item justify-content-between';\n const dropDown = isDropdown(pathOrRegex);\n if (dropDown) {\n baseClass += ' pl30 pr-3';\n }\n\n return classNames(baseClass, {\n active,\n });\n };\n\n useEffect(() => {\n document.addEventListener('mousedown', handleOutsideClick);\n\n setDropdowns({\n content: isActivePage(/documents/),\n leadGen: isActivePage([/landing_page/, '/onboard/referrers']),\n automation: isActivePage(/campaign/),\n data: isActivePage([/data/, /labels/, /search_queries/, /configure_mls/]),\n });\n\n return () => {\n document.removeEventListener('mousedown', handleOutsideClick);\n };\n }, [page]);\n\n const innerLinkStyles = { width: 'fit-content', minWidth: '100%' };\n const dropdownStyles = {\n background: 'none',\n border: 'none',\n padding: '10',\n width: '100%',\n textAlign: 'left',\n };\n\n return (\n \n \n
\n \n \n \n { }}\n innerRef={tooltipRef}\n >\n <>\n It looks like you're trying to access the inbox — great choice! Please upgrade your pricing plan\n {' '}\n \n here\n \n {' '}\n to enable this feature.\n \n \n \n\n \n toggleDropdown('content')}\n style={dropdownStyles}\n >\n toggleDropdown('leadGen')}\n style={dropdownStyles}\n >\n toggleDropdown('automation')}\n style={dropdownStyles}\n >\n \n \n \n toggleDropdown('data')}\n style={dropdownStyles}\n >\n \n \n
\n );\n};\n\nAgentSideBar.defaultProps = {};\nAgentSideBar.propTypes = {};\n\nexport default AgentSideBar;\n","import React, {\n useRef, forwardRef, useImperativeHandle\n} from 'react';\n\nimport PropTypes from 'prop-types';\nimport { DirectUpload } from '@rails/activestorage';\nimport DocumentActions from '~/actions/document_actions';\nimport {\n checkIfLimitExceeded\n} from '~/helpers/document_helpers.jsx';\n\nconst MAX_FILE_SIZE = 26214400;\nconst MAX_FILE_SIZE_IN_MB = MAX_FILE_SIZE / (1024 * 1024);\nconst uploadUrl = `${Rails.apiUrl}/rails/active_storage/direct_uploads`;\nconst FILE_TYPE_MAP = {\n pdf: 'pdf_document',\n doc: 'word_document',\n docx: 'word_document',\n jpg: 'image_document',\n jpeg: 'image_document',\n png: 'image_document',\n ppt: 'powerpoint_document',\n pptx: 'powerpoint_document',\n xls: 'excel_document',\n xlsx: 'excel_document',\n tiff: 'other_document',\n txt: 'other_document',\n rtf: 'other_document',\n csv: 'other_document',\n};\nconst SUPPORTED_FILE_FORMATS = Object.keys(FILE_TYPE_MAP);\n\nconst DocumentUploader = forwardRef((\n {\n onUploadComplete, onLoadingStateChange, setShowLimitAlert, leadID,\n }, ref,\n) => {\n const hiddenFileInput = useRef(null);\n\n useImperativeHandle(ref, () => ({\n handleFileSelect() {\n hiddenFileInput.current.value = '';\n hiddenFileInput.current.click();\n },\n }));\n\n const checkFileTypeAndSize = (file) => {\n const fileType = file.name.split('.').pop();\n const isFileTypeValid = SUPPORTED_FILE_FORMATS.includes(fileType.toLowerCase());\n const isSizeWithinLimit = file.size <= MAX_FILE_SIZE;\n\n if (!file) return null;\n\n if (!isFileTypeValid) {\n GlobalContainer.notify(`Unsupported File Format: ${fileType}`, 'error');\n onLoadingStateChange(false);\n return null;\n }\n\n if (!isSizeWithinLimit) {\n GlobalContainer.notify(\n `File Size Limit Exceeded: Ensure your file is within ${MAX_FILE_SIZE_IN_MB} megabytes`,\n 'error',\n );\n onLoadingStateChange(false);\n return null;\n }\n\n return fileType;\n };\n\n const getDocumentType = (fileType) => FILE_TYPE_MAP[fileType] || null;\n\n const uploadDocuments = (files) => {\n const documentsData = [];\n onLoadingStateChange(true);\n\n files.forEach((file) => {\n const fileType = checkFileTypeAndSize(file);\n if (!fileType) return;\n\n const upload = new DirectUpload(file, uploadUrl, {\n directUploadWillCreateBlobWithXHR: (xhr) => {\n xhr.setRequestHeader('Authentication', `${Rails.helpers.authToken}`);\n },\n });\n\n upload.create(async (error, blob) => {\n if (!error) {\n const documentType = getDocumentType(fileType);\n const documentData = {\n document_file: blob.signed_id,\n title: file.name,\n document_type: documentType,\n lead_id: leadID,\n };\n documentsData.push(documentData);\n\n if (documentsData.length === files.length) {\n try {\n await DocumentActions.createDocument(documentsData, leadID);\n if (onUploadComplete) onUploadComplete();\n } catch (err) {\n const errorMsg = err.response?.body?.errors?.[0]?.errors?.[0] || 'An error occurred while uploading the document';\n GlobalContainer.notify(errorMsg, 'error');\n } finally {\n onLoadingStateChange(false);\n }\n }\n } else {\n GlobalContainer.notify('Error uploading the file. Please try again.', 'error');\n onLoadingStateChange(false);\n }\n });\n });\n };\n\n const handleFileChange = (event) => {\n const files = Array.from(event.target.files);\n if (files.length) {\n checkIfLimitExceeded(files.length).then((isLimitExceeded) => {\n if (isLimitExceeded) {\n setShowLimitAlert(true);\n } else {\n uploadDocuments(files);\n }\n });\n }\n };\n\n return (\n \n \n
\n )}\n \n\n \n \n {switchText}\n \n
\n \n
\n )}\n\n {isInboxAccessRestricted && (\n \n It looks like you're trying to switch to the retention module — great choice!\n Please upgrade your pricing plan\n {' '}\n here\n {' '}\n to enable this feature.\n
\n \n
\n )}\n\n \n \n );\n};\n\nNavBar.defaultProps = {};\n\nNavBar.propTypes = {};\n\nexport default NavBar;\n","import React from 'react';\nimport { Nav } from 'reactstrap';\nimport NavBarSupportedContent from './nav_bar_supported_content';\nimport HelpCenter from './help_center';\nimport NotificationButton from '~/components/Notifications/Button';\n\nconst AgentNavContent = () => (\n \n);\n\nAgentNavContent.defaultProps = {};\nAgentNavContent.propTypes = {};\n\nexport default AgentNavContent;\n","import React from 'react';\nimport { Nav } from 'reactstrap';\nimport NavBarSupportedContent from './nav_bar_supported_content';\nimport HelpCenter from './help_center';\nimport NotificationButton from '~/components/Notifications/Button';\n\nconst DefaultNavContent = () => (\n \n);\n\nDefaultNavContent.defaultProps = {};\nDefaultNavContent.propTypes = {};\n\nexport default DefaultNavContent;\n","import React from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { UncontrolledDropdown, DropdownToggle, DropdownMenu } from 'reactstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nclass HelpCenter extends React.PureComponent {\n /* this function declaration allows not to bind function to component in constructor */\n\n openHubSpotChat = (e) => {\n e.preventDefault();\n\n if (window.HubSpotConversations) {\n window.HubSpotConversations.widget.open();\n } else {\n setTimeout(this.openHubSpotChat, 1000, e);\n }\n };\n\n renderDropdownMenu = () => {\n const { currentUser } = Rails.helpers;\n const hr = \n It looks like you're trying to access the inbox — great choice! Please upgrade your pricing plan\n {' '}\n here\n {' '}\n to enable this feature.\n
\n ;\n\n const LinkWithText = ({\n href = '#', children, description, separater = true, target = '_blank', onClick,\n }) => (\n \n
{children}
\n {description &&{description}
}\n \n { separater && hr }\n\n
\n \n \n { label }\n {' '}\n
\n- \n
- \n
\n Log In / Register\n \n \n
\n \n Admin\n \n
\n );\n }\n\n const accountItems = [];\n\n accountItems.push(\n \n {t.name}\n \n ))}\n
\n );\n }\n\n return (\n \n Change Team\n
\n {teams.map((t) => (\n{accountItems.map((i) =>
}\n {teamItems.length > 0 && {i}
)}{teamItems.map((i) =>
}\n {teamSwitcher}\n {i}
)}\n \n \n { }}\n innerRef={tooltipRef}\n >\n It looks like you're trying to access the inbox — great choice! Please upgrade your pricing plan\n {' '}\n \n here\n \n {' '}\n to enable this feature.\n \n \n\n \n toggleDropdown('content')}\n style={dropdownStyles}\n >\n toggleDropdown('automation')}\n style={dropdownStyles}\n >\n \n \n \n toggleDropdown('data')}\n style={dropdownStyles}\n >\n \n \n
\n );\n};\n\nRetentionSideBar.defaultProps = {};\nRetentionSideBar.propTypes = {};\n\nexport default RetentionSideBar;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { ToastContainer } from 'react-toastify';\n\nimport PubNub from '~/lib/pubnub';\n\nclass Notifications extends React.Component {\n componentDidMount() {\n const {\n channel, publishKey, subscribeKey, pubNubUuid,\n } = this.props;\n\n this.pubnub = PubNub.client(publishKey, subscribeKey, pubNubUuid);\n this.pubnub.addListener({\n message(payload) {\n switch (payload.message.event) {\n case 'reauth':\n // google auth failure, let's force them to do something about it.\n // eslint-disable-next-line no-restricted-globals\n top.location = '/google_token_expired';\n break;\n case 'notification':\n switch (payload.message.type) {\n case 'success':\n GlobalContainer.notify(payload.message.text, 'success');\n break;\n case 'error':\n case 'danger':\n GlobalContainer.notify(payload.message.text, 'danger');\n break;\n default:\n // do nothing\n }\n break;\n default:\n }\n },\n });\n\n if (channel) {\n this.pubnub.subscribe({\n channels: [channel, 'broadcast'],\n });\n }\n }\n\n render() {\n return (\n \n \n
\n )}\n \n\n \n
\n );\n }\n}\n\nNotifications.propTypes = {\n publishKey: PropTypes.string,\n subscribeKey: PropTypes.string,\n channel: PropTypes.string,\n pubNubUuid: PropTypes.string,\n};\nNotifications.defaultProps = {\n publishKey: '',\n subscribeKey: '',\n channel: '',\n pubNubUuid: '',\n};\nexport default Notifications;\n","import autoBind from 'react-autobind';\nimport React from 'react';\n\nimport APIRequest from '~/lib/api_request';\nimport BlankPage from '~/components/pages/blank_page';\nimport GlobalContainer from '~/components/global_container';\nimport TeamMembersCore from '~/components/pages/account/team_members/team_members_core';\nimport AgentSideBar from '~/components/navigation/agent_side_bar';\n\nclass OnboardApp extends React.Component {\n constructor() {\n super();\n autoBind(this);\n\n this.state = {\n message:\n \"Hi Team, we're excited to be moving to Brokerkit, \"\n + 'the latest and greatest platform for making referrals and tracking their recruiting progress. '\n + 'You also have a new landing page that you can use to get more referrals. Thanks so much!',\n teamMembersState: {\n notJoinedCount: 0,\n },\n };\n }\n\n handleTeamMembersStoreChange(teamMembersState) {\n this.setState({\n teamMembersState,\n });\n }\n\n handleSendInvitation = () => {\n const { currentTeam } = Rails.helpers;\n const { message } = this.state;\n\n APIRequest.post({\n resource: `/v1/teams/${currentTeam.id}/launch`,\n data: {\n team: { welcome_message: message },\n },\n }).end((error, response) => {\n GlobalContainer.notify('Team invitations have been sent', 'success');\n browserHistory.push('/recruiter/today');\n });\n };\n\n render() {\n const { currentTeam } = Rails.helpers;\n const { message, teamMembersState } = this.state;\n const { notJoinedCount } = teamMembersState;\n\n return (\n \n \n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n Invite Your Agents
\n\n Invite your agents and affiliates to refer leads to\n {' '}\n {currentTeam.name}\n .\n
\n Once invited, they can refer new leads and view the status of\n leads they have referred.\n
\n {\n this.setState({ message: e.target.value });\n }}\n />\n
\n\n \n Add a custom message to the team invite:\n
\n\n \n
\n \n \n Send Team Invitation to\n {' '}\n {notJoinedCount}\n {' '}\n Referrers\n \n
\n \n
\n );\n};\n\nexport default BrokerMetricsImportTab;\n","import React from 'react';\nimport Tab from 'react-bootstrap/Tab';\nimport Nav from 'react-bootstrap/Nav';\n\nimport LeadsImportTab from './leads_import_tab';\nimport TeamImportTab from './team_import_tab';\nimport BrokerMetricsImportTab from './broker_metrics_import_tab';\nimport MarketViewBrokerImportTab from './mark_view_broker_import_tab';\n\nconst DataImportTab = () => (\n Follow the prompts below to import your data into Brokerkit
\n\n- \n
- \n Create a query in BrokerMetrics and export it to CSV in the "Contact Information" view for upload into Brokerkit. See\n {' '}\n
- Your file uploaded must be in the format of the "Contact Information" view as we have mapped those columns to Brokerkit fields \n
- We match data by column header name to know which field to import the data into so do not modify the column headers or delete columns from the "Contact Information" view \n
- You can add columns with the header names "Notes" and "Labels" and import them. Any other columns will be skipped on import \n
- Any row that has neither an email address nor an agent ID will be skipped \n
- The agent ID OR email address columns will be used to match and update existing records \n
- If there are no existing records with the email addresses or agent IDs in the CSV, then new records will be created \n
- An MLS is required to be selected if the import includes Agent IDs \n
- Please import data from only one MLS at a time \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 LeadsImportTab;\n","import React, {\n useState,\n useCallback,\n} from 'react';\nimport StepWizard from 'react-step-wizard';\nimport DownloadStep from './steps/download_step';\nimport SettingsStep from './steps/settings_step';\nimport UploadFileStep from './steps/upload_file_step';\n\nconst MarketViewBrokerImportTab = () => {\n const importType = 'Import::MarketViewBroker';\n const templateUrl = '/mvb_normal_template.xlsx';\n const templateButtonTitle = 'Download Template for MVB Normal View';\n const secondTemplateUrl = '/mvb_percent_change_template.xlsx';\n const secondTemplateButtonTitle = 'Download Template for MVB % Change View';\n const [labels, setLabels] = useState('');\n const [multipleListingServiceOuid, setMultipleListingServiceOuid] = useState('');\n\n const handleLabelsChange = useCallback((e) => {\n setLabels(e.target.value);\n }, []);\n\n const handleMultipleListingServiceChange = useCallback((value) => {\n setMultipleListingServiceOuid(value);\n }, []);\n\n const resetState = useCallback(() => {\n setLabels('');\n setMultipleListingServiceOuid('');\n }, []);\n\n return (\n Follow the prompts below to import your data into Brokerkit
\n\n- \n
- \n Download our import template in Excel format, add in your data, and then\n {' '}\n save it as a CSV file to import\n \n
- We match data by column header name to know which field to import the data into so do not modify the column header names \n
- Any columns not in the download template will be skipped on import \n
- Any row that has neither an email address nor an agent ID will be skipped \n
- The agent ID OR email address columns will be used to match and update existing records \n
- If there are no existing records with the email addresses or agent IDs in the CSV, then new records will be created \n
- An MLS is required to be selected if the import includes Agent IDs \n
- Please import data from only one MLS at a time \n
\n \n \n
\n \n
\n );\n};\n\nexport default MarketViewBrokerImportTab;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Stats from './stats';\n\nconst DownloadStep = ({\n templateUrl,\n templateButtonTitle,\n secondTemplateUrl,\n secondTemplateButtonTitle,\n step,\n ...props\n}) => (\n Follow the prompts below to import your data into Brokerkit
\n\n- \n
- \n Create a query in the normal or % change view in MarketView Broker as detailed\n {' '}\n
- Download the proper template below (normal or % change view) and paste the data rows without the header information into the Brokerkit template for upload \n
- The % change view is preferred as it will add year over year production changes not in the normal view \n
- The columns in the template should align with the data export from MVB with the addition of columns for Notes and Labels for you to add notes and labels by row on import if desired. Any other columns will be skipped on import \n
- We match data by column header name to know which field to import the data into so do not modify the column headers or delete columns from the template \n
- Any row that has neither an email address nor an agent ID will be skipped \n
- The agent ID OR email address columns will be used to match and update existing records \n
- If there are no existing records with the email addresses or agent IDs in the CSV, then new records will be created \n
- An MLS is required to be selected if the import includes Agent IDs \n
- Please import data from only one MLS at a time \n
\n \n \n
\n \n \n
\n);\n\nDownloadStep.defaultProps = {\n templateButtonTitle: 'Download Template',\n secondTemplateUrl: '',\n secondTemplateButtonTitle: 'Download Template',\n};\n\nDownloadStep.propTypes = {\n importType: PropTypes.string.isRequired,\n templateUrl: PropTypes.string.isRequired,\n secondTemplateUrl: PropTypes.string,\n templateButtonTitle: PropTypes.string,\n secondTemplateButtonTitle: PropTypes.string,\n};\n\nexport default DownloadStep;\n","import React, { useCallback } from 'react';\nimport Stats from './stats';\nimport MultipleListingServicesSelect from '~/components/forms/multiple_listing_services_select';\nimport brokerbit from '~/lib/brokerbit';\n\nconst SettingsStep = ({\n labels,\n multiple_listing_service_ouid,\n handleLabelsChange,\n handleMultipleListingServiceChange,\n step,\n nextStep,\n ...props\n}) => {\n const validate = useCallback(() => {\n if (multiple_listing_service_ouid) {\n nextStep();\n } else {\n brokerbit.confirmBox({\n message: 'Please confirm proceeding with no MLS set',\n callback: (ok) => {\n if (ok) nextStep();\n },\n });\n }\n }, [multiple_listing_service_ouid, nextStep]);\n\n return (\n \n
\n );\n};\n\nexport default SettingsStep;\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nconst Stats = ({\n nextStep,\n previousStep,\n totalSteps,\n step,\n disabled,\n}) => (\n \n \n
\n\n \n \n handleMultipleListingServiceChange(val)}\n teamMlses\n primaryMls\n clearable\n target=\"mls-select\"\n />\n
\n\n \n
\n\n
\n);\n\nexport default Stats;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport filesize from 'filesize';\nimport axios from 'axios';\nimport { Progress } from 'react-sweet-progress';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport { axiosInstance } from '~/lib/api_request';\nimport DataActions from '~/actions/data_actions';\nimport DataStore from '~/stores/data_store';\nimport Stats from './stats';\n\nconst { CancelToken } = axios;\nlet cancel;\n\nclass UploadFileStep extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: false,\n file: undefined,\n key: '',\n percentCompleted: 0,\n errors: {},\n };\n\n this.baseState = this.state;\n\n this.hiddenFileInput = React.createRef();\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.dataStoreListener = DataStore.addListener(this.onDataStoreChange);\n }\n\n componentWillUnmount() {\n if (this.dataStoreListener) this.dataStoreListener.remove();\n }\n\n onDataStoreChange() {\n const { lastDataStoreAction } = DataStore.getState();\n const { resetState, goToStep } = this.props;\n\n switch (lastDataStoreAction) {\n case 'createImportDone':\n GlobalContainer.notify('Your import has started successfully. We will send you an email about the import results.', 'success');\n break;\n case 'createImportFail':\n GlobalContainer.notify('Oops, something went wrong. Try again later.', 'error');\n break;\n default:\n // do nothing\n }\n\n this.hiddenFileInput.current.value = null;\n this.setState(this.baseState);\n resetState();\n goToStep(1);\n }\n\n handleCancelUploading = (event) => {\n event.preventDefault();\n\n this.setState({ percentCompleted: 0 });\n\n cancel();\n }\n\n handleClick = (event) => {\n this.hiddenFileInput.current.click();\n };\n\n handleFileChange = (event) => {\n const errors = {};\n const file = event.target.files[0];\n if (!file) return;\n\n if (!(/\\.(csv)$/i).test(file.name)) {\n errors.file_type = 'Invalid file format. Please select a different file.';\n }\n\n this.setState({ errors, file });\n };\n\n handleResetFile = (event) => {\n event.preventDefault();\n\n this.hiddenFileInput.current.value = null;\n this.setState({ file: undefined, key: '', percentCompleted: 0 });\n }\n\n submit = async (e) => {\n const { file, key, loading } = this.state;\n const { labels, multiple_listing_service_ouid, importType } = this.props;\n const errors = {};\n\n if (!file || loading || key || !_lodash.isEmpty(errors)) return;\n\n this.setState({ errors, loading: true });\n\n try {\n const { data } = await axiosInstance.get('/v1/imports/direct_post');\n const { url, fields } = data;\n const formData = new FormData();\n\n Object.keys(fields).forEach((fieldKey) => {\n formData.append(fieldKey, fields[fieldKey]);\n });\n formData.append('file', file);\n\n const response = await axios.post(url, formData, {\n onUploadProgress: (progressEvent) => {\n const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);\n this.setState({ percentCompleted });\n },\n cancelToken: new CancelToken((c) => cancel = c),\n });\n\n const awsKey = new DOMParser()\n .parseFromString(response.data, 'application/xml')\n .getElementsByTagName('Key')[0]\n .textContent;\n\n this.setState({ key: awsKey });\n\n setTimeout(() => {\n if (awsKey) {\n DataActions.createImport({\n type: importType,\n key: awsKey,\n labels,\n multiple_listing_service_ouid,\n });\n }\n }, 2000);\n } catch (error) {\n if (!axios.isCancel(error)) {\n errors.s3_error = `Oops, ${error.message}. Try it again later.`;\n this.setState({ errors });\n }\n } finally {\n // Stop loading\n this.setState({ loading: false });\n }\n }\n\n render() {\n const {\n key, loading, file, errors, percentCompleted,\n } = this.state;\n const { step } = this.props;\n let status = 'active';\n\n if (!loading && _lodash.isEmpty(errors) && key) {\n status = 'success';\n }\n\n if (!loading && !_lodash.isEmpty(errors)) {\n status = 'error';\n }\n\n return (\n \n\n
\n { step > 1 && }\n { step < totalSteps ? : (\n \n )}\n
\n \n
\n\n \n
\n );\n }\n}\n\nexport default UploadFileStep;\n","import React, {\n useState,\n useCallback,\n} from 'react';\nimport StepWizard from 'react-step-wizard';\nimport DownloadStep from './steps/download_step';\nimport SettingsStep from './steps/settings_step';\nimport UploadFileStep from './steps/upload_file_step';\n\nconst TeamImportTab = () => {\n const [importType] = useState('Import::Retention');\n const [templateUrl] = useState('/team_template.xlsx');\n const [labels, setLabels] = useState('');\n const [multipleListingServiceOuid, setMultipleListingServiceOuid] = useState('');\n\n const handleLabelsChange = useCallback((e) => {\n setLabels(e.target.value);\n }, []);\n\n const handleMultipleListingServiceChange = useCallback((value) => {\n setMultipleListingServiceOuid(value);\n }, []);\n\n const resetState = useCallback(() => {\n setLabels('');\n setMultipleListingServiceOuid('');\n }, []);\n\n return (\n Allowed File Type: CSV
\n\n\n\n \n
\n
\n\n
\n\n {errors.file_type && (\n
\n )}\n\n \n\n
{file.name}
\n {filesize(file.size)}\n\n\n\n {errors.file_type && (\n
{errors.file_type}
\n )}\n\n {errors.s3_error && (\n{errors.s3_error}
\n )}\n\n {!loading ? (\n \n ) : (\n \n )}\n\n \n\n
\n );\n};\n\nexport default TeamImportTab;\n","import classNames from 'classnames';\nimport autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Link, withRouter } from 'react-router-dom';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport DataActions from '~/actions/data_actions';\n\nclass DuplicateItem extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n\n this.state = {\n group: props.group,\n submitting: false,\n };\n }\n\n handlePrimaryDuplicateClick(e, lead) {\n e.preventDefault();\n\n lead.primary = !lead.primary;\n\n this.setState({ group: this.state.group });\n }\n\n handleMergeDuplicate(e, lead) {\n e.preventDefault();\n\n const { group } = this.state;\n const { duplicatesFilter, pagination } = this.props;\n const primaryLead = _lodash.find(group, (l) => l.primary);\n\n if (primaryLead && lead) {\n this.setState({ submitting: true });\n DataActions.mergeDuplicates(primaryLead, lead, duplicatesFilter, pagination.current_page);\n }\n }\n\n renderPhoneNumbers(lead) {\n const cellPhone = lead.cell_phone ? `${LeadHelpers.formatPhoneNumber(lead.cell_phone)} (Cell)` : null;\n const homePhone = lead.other_phone ? `${LeadHelpers.formatPhoneNumber(lead.other_phone)} (Home)` : null;\n const officePhone = lead.office_phone ? `${LeadHelpers.formatPhoneNumber(lead.office_phone)} (Office)` : null;\n const phoneNumbers = [cellPhone, homePhone, officePhone];\n\n return _lodash.chain(phoneNumbers)\n .filter((phoneNumber) => phoneNumber !== null)\n .map((phoneNumber) => phoneNumber)\n .join(', ')\n .value();\n }\n\n renderRole(lead) {\n if (!lead.role) return null;\n\n let className;\n switch (lead.role.name) {\n case 'admin':\n className = 'badge badge-outline-green';\n break;\n case 'staff':\n className = 'badge badge-outline-yellow';\n break;\n case 'agent':\n className = 'badge badge-outline-blue';\n break;\n case 'affiliate':\n className = 'badge badge-outline-gray';\n break;\n default:\n return null;\n }\n\n return (\n Follow the prompts below to import your data into Brokerkit
\n\n- \n
- \n Download our import template in Excel format, add in your data, and then\n {' '}\n save it as a CSV file to import\n \n
- We match data by column header name to know which field to import the data into so do not modify the column header names \n
- Any columns not in the download template will be skipped on import \n
- Any row without an email address will be skipped \n
- Any row that has neither an email address nor an agent ID will be skipped \n
- The agent ID OR email address columns will be used to match and update existing records \n
- If there are no existing records with the email addresses or agent IDs in the CSV, then new records will be created \n
- An MLS is required to be selected if the import includes Agent IDs \n
- Please import data from only one MLS at a time \n
\n \n \n
\n \n
\n );\n\n return leadDOM;\n });\n }\n\n render() {\n return (\n <>\n \n
\n \n
\n \n {this.renderLeadLink(lead)}\n {this.renderRole(lead)}\n
\n\n\n Email Addresses:\n {' '}\n {emailList.join(', ')}\n
\n\n Agent IDs:\n {' '}\n {agentIdList.join(', ')}\n
\n\n Phone Numbers:\n {' '}\n {this.renderPhoneNumbers(lead)}\n
\n\n Company Name:\n {' '}\n {lead.company}\n
\n\n Bucket:\n {' '}\n {lead.bucket}\n
\n\n Creation Date:\n {' '}\n {lead.created_at}\n
\n\n\n {(!primaryLead || lead.primary) && (\n
\n \n \n
\n )}\n\n {!lead.primary && (\n \n \n \n \n
\n )}\n \n {this.renderLeadItem()}\n
\n \n \n );\n }\n}\n\nDuplicateItem.defaultProps = {};\n\nDuplicateItem.propTypes = {\n history: PropTypes.shape({}).isRequired,\n group: PropTypes.array,\n pagination: PropTypes.shape({}),\n duplicatesFilter: PropTypes.string,\n};\n\nexport default withRouter(DuplicateItem);\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { withRouter } from 'react-router-dom';\n\nimport DuplicateItem from './duplicate_item';\n\nclass DuplicateItems extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n }\n\n renderGroupRows() {\n const { duplicates, duplicatesFilter, pagination } = this.props;\n\n const duplicateGroups = [];\n duplicates.forEach((group, idx) => {\n duplicateGroups.push(\n
\n {this.renderGroupRows()}\n
\n );\n }\n}\n\nDuplicateItems.defaultProps = {\n loading: false,\n duplicates: [],\n pagination: {},\n duplicatesFilter: null,\n};\n\nDuplicateItems.propTypes = {\n history: PropTypes.shape({}).isRequired,\n loading: PropTypes.bool,\n duplicates: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.array]),\n pagination: PropTypes.shape({}),\n duplicatesFilter: PropTypes.string,\n};\n\nexport default withRouter(DuplicateItems);\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport ReactPaginate from 'react-paginate';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport debounce from 'lodash/debounce';\n\nimport DuplicatesSelect from '~/components/forms/duplicates_select';\nimport DataActions from '~/actions/data_actions';\nimport DataStore from '~/stores/data_store';\nimport DuplicateItems from './duplicate_items';\nimport IconInput from '~/components/forms/IconInput';\n\nclass DuplicatesTab extends React.Component {\n identifyDuplicatesDebounced = debounce(() => {\n const { duplicatesFilter, duplicatesSearch } = this.state;\n DataActions.identifyDuplicates({ duplicatesFilter, duplicatesSearch }, 1);\n }, 500);\n\n constructor(props) {\n super(props);\n\n this.state = {\n errors: {},\n loadingDuplicates: false,\n duplicateLeads: [],\n duplicatesFilter: null,\n pagination: {},\n duplicatesSearch: '',\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n // listen to dataStoreListener changes\n this.dataStoreListener = DataStore.addListener(this.onDataStoreChange);\n }\n\n componentWillUnmount() {\n if (this.dataStoreListener) this.dataStoreListener.remove();\n }\n\n onDataStoreChange() {\n const dataStoreState = DataStore.getState();\n const {\n duplicateLeads, lastDataStoreAction, loadingDuplicates, errors, pagination,\n } = dataStoreState;\n\n if (lastDataStoreAction === 'identifyDuplicates') {\n this.setState({ loadingDuplicates });\n }\n\n if (lastDataStoreAction === 'identifyDuplicatesDone') {\n this.setState({ loadingDuplicates, pagination, duplicateLeads });\n }\n\n if (lastDataStoreAction === 'identifyDuplicatesFail') {\n this.setState({ loadingDuplicates, errors, pagination });\n }\n }\n\n handleDuplicatesFilter = (selectedOption) => {\n const value = selectedOption ? selectedOption.value || selectedOption : null;\n\n this.setState({ duplicatesFilter: value, duplicatesSearch: '' });\n }\n\n handleDuplicatesSearch = (value) => {\n this.setState({ duplicatesSearch: value });\n const { duplicatesFilter } = this.state;\n\n if (!duplicatesFilter) return;\n\n this.identifyDuplicatesDebounced();\n }\n\n onPageChange(page) {\n const { duplicatesFilter } = this.state;\n const selectedPage = page.selected;\n\n DataActions.identifyDuplicates({ duplicatesFilter }, selectedPage + 1);\n }\n\n identifyDuplicates = (e) => {\n e.preventDefault();\n\n const { duplicatesFilter, duplicatesSearch } = this.state;\n\n if (!duplicatesFilter) return;\n\n DataActions.identifyDuplicates({ duplicatesFilter, duplicatesSearch }, 1);\n }\n\n buildPageHref(pageNumber) {\n return `#page-${pageNumber}`;\n }\n\n renderDuplicateItems = () => {\n const {\n loadingDuplicates, duplicateLeads, duplicatesFilter, pagination,\n } = this.state;\n\n if (loadingDuplicates) {\n return (\n \n
\n );\n }\n\n if (!duplicatesFilter) {\n return Please select a filter by which duplicates will be identified.
;\n }\n\n if (duplicateLeads.length === 0) {\n return You don't have the duplicate leads or agents.
;\n }\n\n return (\n \n
\n );\n }\n\n render() {\n const { errors, duplicatesFilter, duplicatesSearch } = this.state;\n\n return (\n <>\n \n
\n \n Showing\n {' '}\n {pagination.start}\n {' '}\n to\n {' '}\n {pagination.end}\n {' '}\n of\n {' '}\n {pagination.total_count}\n {' '}\n duplicates\n
\n \n { pagination.total_pages > 1\n && (\n \n )}\n
\n \n
\n\n \n this.handleDuplicatesFilter(opt)}\n clearable\n />\n
\n \n \n
\n \n
\n\n \n this.handleDuplicatesSearch(e.target.value)}\n onKeyDown={(e) => e.key === 'Enter' && this.handleDuplicatesSearch(e.target.value)}\n name=\"search\"\n />\n
\n \n
\n \n );\n }\n}\n\nexport default DuplicatesTab;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Table from 'react-bootstrap/Table';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport ClickableTooltip from '~/components/effects/clickable_tooltip';\n\nimport brokerbit from '~/lib/brokerbit';\nimport MlsServiceRequest from '~/lib/mls_service_request';\nimport SearchQueryActions from '~/actions/search_query_actions';\nimport SearchQueryStore from '~/stores/search_query_store';\nimport SubscriptionLimitActions from '~/actions/subscription_limit_actions';\nimport SubscriptionLimitStore from '~/stores/subscription_limit_store';\n\nimport { formatNumber } from '~/helpers/formatHelper';\n\nconst { currentUser, currentTeam } = Rails.helpers;\n\nclass MlsImportTab extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loadingSearchQueries: false,\n loading: false,\n searchQueries: [],\n subscriptionLimits: {},\n submittingQueryIds: [],\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.searchQueryStoreListener = SearchQueryStore.addListener(this.onSearchQueryStoreChange);\n this.subscriptionLimitStoreListener = SubscriptionLimitStore.addListener(this.onSubscriptionLimitStoreChange);\n\n setTimeout(() => {\n SearchQueryActions.loadSearchQueries();\n SubscriptionLimitActions.loadSubscriptionLimits();\n });\n }\n\n componentWillUnmount() {\n if (this.searchQueryStoreListener) this.searchQueryStoreListener.remove();\n if (this.subscriptionLimitStoreListener) this.subscriptionLimitStoreListener.remove();\n }\n\n handleAddSearchQuery(e) {\n e.preventDefault();\n\n const searchQueryNewUri = GlobalContainer.productUri('/search_queries/new');\n\n browserHistory.push(searchQueryNewUri);\n }\n\n handleSearchQueriesReachedLimit(e) {\n e.preventDefault();\n\n brokerbit.dialogBox({\n message: 'You are currently at the limit of search queries available with your pricing plan. Please upgrade your subscription.',\n okLabel: 'Upgrade Subscription',\n okCallback: (ok) => {\n window.open('/billing', '_blank');\n },\n });\n }\n\n handleQueryImport(query) {\n this.setState((prevState) => ({\n submittingQueryIds: [...prevState.submittingQueryIds, query.id],\n }));\n\n MlsServiceRequest.post({\n resource: '/imports',\n data: {\n team_name: currentTeam.name,\n email: currentUser.email,\n user_id: currentUser.id,\n user_name: currentUser.name,\n search_query_id: query.id,\n },\n }).end((error, response) => {\n this.setState(\n (prevState) => ({\n loading: false,\n submittingQueryIds: prevState.submittingQueryIds.filter((id) => id !== query.id),\n }),\n () => {\n if (error) {\n GlobalContainer.notify(response.body.message, 'error');\n } else {\n GlobalContainer.notify(\n 'Your import has started successfully. We will send you an email about the import results.',\n 'success',\n );\n }\n },\n );\n });\n }\n\n handleScheduleQueryUpdates(query) {\n MlsServiceRequest.post({\n resource: '/import_schedules',\n data: {\n team_name: currentTeam.name,\n email: currentUser.email,\n user_id: currentUser.id,\n user_name: currentUser.name,\n search_query_id: query.id,\n },\n }).end((error, response) => {\n this.setState({ loading: false }, () => {\n if (!error) {\n SearchQueryActions.loadSearchQueries();\n\n if (error) {\n GlobalContainer.notify(\n response.body.message,\n 'error',\n );\n } else {\n GlobalContainer.notify(\n 'Monthly Import Query Updates Triggered',\n 'success',\n );\n }\n }\n });\n });\n }\n\n handleUnscheduleQueryUpdates(query) {\n MlsServiceRequest.delete({\n resource: `/import_schedules/${query.import_schedule.id}`,\n }).end((error, response) => {\n this.setState({ loading: false }, () => {\n if (!error) {\n SearchQueryActions.loadSearchQueries();\n\n GlobalContainer.notify(\n 'Monthly Import Query Updates Ended',\n 'success',\n );\n }\n });\n });\n }\n\n handleEditQuery(query) {\n const search_query_edit_uri = GlobalContainer.productUri(`/search_queries/${query.id}/edit`);\n\n browserHistory.push(search_query_edit_uri);\n }\n\n handleDeleteQuery(query) {\n if (_lodash.isEmpty(query)) return;\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this Query?',\n callback: (ok) => {\n if (ok) {\n SearchQueryActions.deleteSearchQuery(query);\n }\n },\n });\n }\n\n onSearchQueryStoreChange() {\n const searchQueryStoreState = SearchQueryStore.getState();\n const { loadingSearchQueries, searchQueries } = searchQueryStoreState;\n\n this.setState({\n loadingSearchQueries,\n searchQueries,\n });\n }\n\n onSubscriptionLimitStoreChange() {\n const subscriptionLimitStoreState = SubscriptionLimitStore.getState();\n const { loading, subscriptionLimits } = subscriptionLimitStoreState;\n\n this.setState({\n loading,\n subscriptionLimits,\n });\n }\n\n displayRowCount(count = 0) {\n if (count === 'calculating') {\n return \n {this.renderDuplicateItems()}\n {this.renderPagination()}\n
\n \n This query exceeds the\n {' '}\n {formatNumber(query.import_limit)}\n {' '}\n agent import limit per query.\n {' '}\n Please adjust your criteria to narrow down the results.\n
\n Only the first\n {' '}\n {formatNumber(query.import_limit)}\n {' '}\n agents will be imported and it could be different\n {' '}\n agents each time the query is triggered.\n \n )}\n placement=\"right\"\n target=\"count-warning-icon\"\n />\n \n )}\n
\n
\n );\n }\n\n if (searchQueries.length === 0) {\n return There are no MLS Import Queries defined. Please add one.
;\n }\n\n return (\n | Name | \nStatus | \n\n | \n Last Run | \nActions | \n
|---|
\n
\n );\n }\n}\n\nexport default MlsImportTab;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport BlankPage from '~/components/pages/blank_page';\nimport FrontSideBar from '~/components/navigation/front_side_bar';\nimport ComposingSearchQuery from './search_query_form/composing_search_query';\n\nclass NewOrEditSearchQuery extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n render() {\n const { currentTeam } = Rails.helpers;\n if (!currentTeam) return null;\n\n const { match } = this.props;\n\n return (\n \n
\n\n \n
\n MLS Import Queries
\n\n
\n \n {this.renderAddSearchQueryLink()}\n \n Learn more about the MLS Import feature\n {' '}\n here.\n \n )}\n placement=\"bottom\"\n target=\"add-search-query-btn\"\n />\n
\n \n
\n \n {this.renderSearchQueriesTable()}\n
\n \n
\n \n
\n \n
\n );\n }\n\n return \n
\n );\n }\n}\n\nComposingSearchQuery.defaultProps = {\n searchQueryID: null,\n};\n\nComposingSearchQuery.propTypes = {\n searchQueryID: PropTypes.string,\n history: PropTypes.shape({}).isRequired,\n};\n\nexport default withRouter(ComposingSearchQuery);\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport update from 'immutability-helper';\nimport { Input } from 'reactstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport Select from '~/components/forms/select';\nimport SearchQueryConditionFieldSelect from '~/components/forms/search_query_condition_field_select';\nimport SearchQueryConditionOperatorSelect from '~/components/forms/search_query_condition_operator_select';\n\nconst booleanValueOptions = [\n { value: '1', label: 'TRUE' },\n { value: '0', label: 'FALSE' },\n];\n\nclass SearchQueryConditionForm extends React.Component {\n constructor(props) {\n super(props);\n\n const { condition } = props;\n\n this.state = {\n search_field_id: condition.search_field_id || '',\n search_operator_id: condition.search_operator_id || '',\n value: condition.value || '',\n typeField: 'string',\n };\n\n autoBind(this);\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { product, conditionIdx, updateCondition } = this.props;\n\n if (prevProps.product !== product) {\n const newState = update(this.state, {\n search_field_id: { $set: '' },\n search_operator_id: { $set: '' },\n value: { $set: '' },\n typeField: { $set: 'string' },\n });\n\n this.setState(newState, () => {\n updateCondition(conditionIdx, newState);\n });\n }\n }\n\n handleConditionDelete(e) {\n e.preventDefault();\n\n const { conditionIdx, deleteCondition } = this.props;\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this condition?',\n callback: (ok) => {\n if (ok) { deleteCondition(conditionIdx); }\n },\n });\n }\n\n handleFieldIdChange(opt) {\n const { conditionIdx, updateCondition } = this.props;\n\n const newState = update(this.state, {\n search_field_id: { $set: opt ? opt.value : '' },\n search_operator_id: { $set: '' },\n value: { $set: '' },\n typeField: { $set: opt ? opt.type_field : 'string' },\n });\n\n this.setState(newState, () => {\n updateCondition(conditionIdx, newState);\n });\n }\n\n handleOperatorIdChange(opt) {\n const { conditionIdx, updateCondition } = this.props;\n\n const newState = update(this.state, {\n search_operator_id: { $set: opt ? opt.value : '' },\n });\n\n this.setState(newState, () => {\n updateCondition(conditionIdx, newState);\n });\n }\n\n handleValueChange(e) {\n e.preventDefault();\n\n const { conditionIdx, updateCondition } = this.props;\n\n const newState = update(this.state, {\n value: { $set: e.target.value },\n });\n\n this.setState(newState, () => {\n updateCondition(conditionIdx, newState);\n });\n }\n\n handleValueSelect(opt) {\n const { conditionIdx, updateCondition } = this.props;\n\n const newState = update(this.state, {\n value: { $set: opt ? opt.value : '' },\n });\n\n this.setState(newState, () => {\n updateCondition(conditionIdx, newState);\n });\n }\n\n handleTypeField(value) {\n const newState = update(this.state, {\n typeField: { $set: value },\n });\n\n this.setState(newState);\n }\n\n renderValueComponent() {\n const { value, typeField } = this.state;\n const { errors, conditionIdx } = this.props;\n\n let component;\n\n if (typeField === 'number') {\n component = (\n \n \n
\n\n {this.renderSearchQueryForm()}\n
\n \n \n \n \n {searchQueryID ? 'Edit' : 'New'}\n {' '}\n Import Query\n
\n
\n\n {this.renderSearchQueryForm()}\n {errors[conditionIdx] &&
\n \n );\n }\n\n render() {\n const { search_field_id, search_operator_id } = this.state;\n const { errors, conditionIdx, product } = this.props;\n\n return (\n \n
\n );\n }\n}\n\nSearchQueryConditionForm.defaultProps = {\n condition: {},\n product: '',\n errors: {},\n conditionIdx: null,\n updateCondition: () => false,\n deleteCondition: () => false,\n};\n\nSearchQueryConditionForm.propTypes = {\n condition: PropTypes.shape({}),\n product: PropTypes.string,\n errors: PropTypes.shape({}),\n conditionIdx: PropTypes.number,\n updateCondition: PropTypes.func,\n deleteCondition: PropTypes.func,\n};\n\nexport default SearchQueryConditionForm;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport update from 'immutability-helper';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Redirect } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport CheckboxWithPopover from './CheckboxWithPopover';\nimport ClickableTooltip from '~/components/effects/clickable_tooltip';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport GlobalContainer from '~/components/global_container';\nimport ActivatedMlsesSelect from '~/components/forms/activated_mlses_select';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport Select from '~/components/forms/select';\nimport SearchQueryConditionForm from './conditions/search_query_condition_form';\nimport SearchQueryActions from '~/actions/search_query_actions';\nimport SearchQueryStore from '~/stores/search_query_store';\nimport { captureEvent } from '~/helpers/capture_posthog_event';\nimport { formatNumber } from '~/helpers/formatHelper';\n\nconst ProductOptions = [\n { value: 'recruiting', label: 'Recruiting' },\n { value: 'retention', label: 'Retention' },\n];\n\nconst { currentTeam, currentUser } = Rails.helpers;\nconst API_KEY_ERROR = 'The search query is not saved. \n
\n\n {errors[conditionIdx] &&
\n \n
\n\n {errors[conditionIdx] &&
\n \n {this.renderValueComponent()}\n
\n\n \n \n
\n Access denied due to an invalid subscription key. Please make sure to provide a valid key for an active subscription.';\n\nclass SearchQueryForm extends React.Component {\n constructor(props) {\n super(props);\n\n const { searchQuery } = this.props;\n\n this.newCondition = {\n id: null,\n search_field_id: null,\n search_operator_id: null,\n value: '',\n _destroy: false,\n };\n\n this.state = {\n submitting: false,\n errors: {},\n redirect: null,\n searchQueryForm: {\n id: null,\n name: '',\n team_id: currentTeam.id,\n importers_mlses_teams_id: null,\n product: 'recruiting',\n email_notification: false,\n pull_agent_alerts: false,\n labels: '',\n data: {},\n import_limit: null,\n search_conditions_attributes: [{ ...this.newCondition }],\n },\n };\n\n if (searchQuery) {\n this.state.searchQueryForm = this.buildSearchQueryFormState(searchQuery);\n }\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.searchQueryStoreListener = SearchQueryStore.addListener(this.onSearchQueryStoreChange);\n }\n\n componentWillUnmount() {\n if (this.searchQueryStoreListener) this.searchQueryStoreListener.remove();\n }\n\n handleFormSubmit(e) {\n e.preventDefault();\n\n const { searchQueryForm } = this.state;\n const errors = this.validate(searchQueryForm);\n\n if (_lodash.size(errors) === 0) {\n this.setState({ submitting: true }, () => {\n if (_lodash.isNumber(searchQueryForm.id)) {\n SearchQueryActions.updateSearchQuery(searchQueryForm);\n } else {\n const createForm = {\n ...searchQueryForm,\n team_name: currentTeam.name,\n actor_user_id: currentUser.id,\n actor_user_name: currentUser.name,\n actor_user_email: currentUser.email,\n };\n SearchQueryActions.createSearchQuery(createForm);\n }\n });\n }\n }\n\n onSearchQueryStoreChange() {\n const searchQueryStoreState = SearchQueryStore.getState();\n const {\n searchQuery, lastSearchQueryStoreAction, errors, submitting,\n } = searchQueryStoreState;\n const search_queries_uri = GlobalContainer.productUri('/data');\n\n let nextState = { searchQueryStoreState };\n\n switch (lastSearchQueryStoreAction) {\n case 'createSearchQueryDone':\n GlobalContainer.notify(`Import Query \"${searchQuery.name}\" created.`, 'success');\n nextState = { errors, submitting, redirect: search_queries_uri };\n\n break;\n case 'createSearchQueryFail':\n if (errors && errors.api_key) {\n GlobalContainer.notify(API_KEY_ERROR, 'error');\n }\n nextState = { ...nextState, errors, submitting };\n\n break;\n case 'updateSearchQueryDone':\n GlobalContainer.notify(`Import Query \"${searchQuery.name}\" updated.`, 'success');\n nextState = { errors, submitting, redirect: search_queries_uri };\n\n break;\n case 'updateSearchQueryFail':\n if (errors && errors.api_key) {\n GlobalContainer.notify(API_KEY_ERROR, 'error');\n }\n nextState = { ...nextState, errors, submitting };\n break;\n\n default:\n }\n\n this.setState(nextState);\n }\n\n setQueryField(name, val) {\n this.setState((prevState) => ({\n searchQueryForm: update(prevState.searchQueryForm, { [name]: { $set: val } }),\n }));\n }\n\n updateCondition = (conditionIdx, conditionDataFragment) => {\n const { searchQueryForm } = this.state;\n const updateCondition = searchQueryForm.search_conditions_attributes[conditionIdx];\n\n const newState = update(this.state, {\n searchQueryForm: {\n search_conditions_attributes: {\n $splice: [[conditionIdx, 1, { ...updateCondition, ...conditionDataFragment }]],\n },\n },\n });\n\n this.setState(newState);\n }\n\n deleteCondition = (conditionIdx) => {\n const { searchQueryForm } = this.state;\n const deleteCondition = searchQueryForm.search_conditions_attributes[conditionIdx];\n\n deleteCondition._destroy = true;\n\n const newState = update(this.state, {\n searchQueryForm: {\n search_conditions_attributes: {\n $splice: [[conditionIdx, 1, deleteCondition]],\n },\n },\n });\n\n this.setState(newState);\n }\n\n addCondition(e) {\n e.preventDefault();\n\n const { searchQueryForm } = this.state;\n\n searchQueryForm.search_conditions_attributes.push({ ...this.newCondition });\n\n this.setState({ searchQueryForm });\n }\n\n validate(searchQueryForm) {\n const {\n name, importers_mlses_teams_id, product, search_conditions_attributes,\n } = searchQueryForm;\n const errors = {};\n\n if (!name) {\n errors.name = ['Please enter a name to save this query'];\n }\n\n if (!importers_mlses_teams_id) {\n errors.importers_mlses_teams_id = ['Please select a MLS to save this query'];\n }\n\n if (!product) {\n errors.product = [\"Can't be empty\"];\n }\n\n if (search_conditions_attributes.length === 0) {\n errors.conditions = [\"Can't be empty\"];\n }\n\n search_conditions_attributes.forEach((condition, index) => {\n if (condition._destroy === true) return;\n\n errors[index] = {};\n\n if (!condition.search_field_id) {\n errors[index].search_field_id = [\"Can't be empty\"];\n }\n\n if (!condition.search_operator_id) {\n errors[index].search_operator_id = [\"Can't be empty\"];\n }\n\n if (!condition.value) {\n errors[index].value = [\"Can't be empty\"];\n }\n\n if (_lodash.size(errors[index]) === 0) delete errors[index];\n });\n\n this.setState({ errors });\n\n return errors;\n }\n\n buildSearchQueryFormState(searchQueryProp) {\n if (!searchQueryProp) return null;\n\n return {\n id: searchQueryProp.id,\n name: searchQueryProp.name,\n importers_mlses_teams_id: searchQueryProp.importers_mlses_teams_id,\n product: searchQueryProp.product,\n email_notification: searchQueryProp.email_notification,\n pull_agent_alerts: searchQueryProp.pull_agent_alerts,\n labels: searchQueryProp.labels,\n data: searchQueryProp.data,\n import_limit: searchQueryProp.import_limit,\n search_conditions_attributes: searchQueryProp.search_conditions.map((condition, idx) => _lodash.pickBy({\n id: condition.id,\n search_field_id: condition.search_field_id,\n search_operator_id: condition.search_operator_id,\n value: condition.value,\n })),\n };\n }\n\n renderErrors() {\n const { errors } = this.state;\n\n if (errors.conditions) {\n return (\n
\n Can‘t save Import Query without Conditions.\n
\n );\n }\n\n return null;\n }\n\n renderSearchQueryConditions() {\n const { searchQueryForm, errors } = this.state;\n const { product } = searchQueryForm;\n const conditionAttributes = searchQueryForm.search_conditions_attributes;\n\n return conditionAttributes.map((condition, idx) => {\n if (condition._destroy === true) return null;\n const conditionKey = condition.id || `new-${idx}`;\n const conditionDOM = (\n \n \n
\n );\n }\n}\n\nSearchQueryForm.defaultProps = {\n searchQuery: null,\n};\n\nSearchQueryForm.propTypes = {\n history: PropTypes.shape({}).isRequired,\n searchQuery: PropTypes.shape({}),\n};\n\nexport default SearchQueryForm;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport classNames from 'classnames';\nimport { v4 as uuidv4 } from 'uuid';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport MultipleListingServicesSelect from '~/components/forms/multiple_listing_services_select';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport ClickableTooltip from '~/components/effects/clickable_tooltip';\n\nimport TeamMlsActions from '~/actions/team_mls_actions';\nimport TeamMlsStore from '~/stores/team_mls_store';\nimport MlsActions from '~/actions/mls_actions';\nimport MlsStore from '~/stores/mls_store';\n\nclass MlsSettingsTab extends React.Component {\n constructor(props) {\n super(props);\n\n this.emptyMultipleListingService = {\n id: null,\n mlses_ouid: '',\n primary: false,\n integration_status: false,\n _destroy: false,\n };\n\n this.state = {\n team_mlses: [],\n errors: {},\n updating: false,\n loading: false,\n mlses: [],\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n // listen to TeamMlsStore change events and store reference\n this.listener = TeamMlsStore.addListener(\n this.onTeamMlsStoreChange,\n );\n this.mlsStoreListener = MlsStore.addListener(\n this.onMlsStoreChange,\n );\n\n MlsActions.loadMlsOptions();\n TeamMlsActions.loadTeamMlses();\n }\n\n componentWillUnmount() {\n if (this.listener) this.listener.remove();\n if (this.mlsStoreListener) this.mlsStoreListener.remove();\n }\n\n handleMlsOuidChange(val, mls) {\n mls.mlses_ouid = val;\n\n this.setState({ team_mlses: this.state.team_mlses });\n }\n\n handlePrimaryMlsChange(e, mls) {\n mls.primary = e.target.checked;\n\n this.setState({ team_mlses: this.state.team_mlses });\n }\n\n handleFormSubmit(e) {\n e.preventDefault();\n\n const { team_mlses } = this.state;\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n const teamData = {\n id: Rails.helpers.currentTeam.id,\n team_mlses,\n };\n\n TeamMlsActions.updateTeamMlses(teamData);\n } else {\n this.setState({ errors });\n }\n }\n\n handleMultipleListingServiceDelete(e, mls) {\n e.preventDefault();\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this MLS?',\n callback: (ok) => {\n if (ok) {\n mls._destroy = true;\n this.setState({ team_mlses: this.state.team_mlses });\n }\n },\n });\n }\n\n handleMlsConfiguration(e, mls) {\n e.preventDefault();\n\n const uri = GlobalContainer.productUri(\n `/configure_mls/${mls.id}`,\n );\n\n browserHistory.push(uri);\n }\n\n onTeamMlsStoreChange() {\n const mlsState = TeamMlsStore.getState();\n const {\n loading,\n team_mlses,\n updating,\n lastTeamMlsStoreAction,\n errors,\n } = mlsState;\n\n const newState = {\n loading,\n team_mlses,\n updating,\n errors,\n };\n\n if (lastTeamMlsStoreAction === 'updateTeamMlsesDone') {\n GlobalContainer.notify(\n 'Your Multiple Listing Services were saved.',\n );\n }\n\n this.setState(newState);\n }\n\n onMlsStoreChange() {\n const mlsStoreState = MlsStore.getState();\n const { options } = mlsStoreState;\n\n this.setState({\n mlses: options,\n });\n }\n\n validate() {\n const errors = {};\n const { team_mlses } = this.state;\n const activeMlses = team_mlses.filter((x, i) => !x._destroy);\n const checkedCount = activeMlses.filter(\n (x, i) => x.primary,\n ).length;\n\n if (activeMlses.length > 0 && checkedCount < 1) {\n errors.mls = ['Please select primary MLS'];\n }\n\n if (activeMlses.length > 0 && checkedCount > 1) {\n errors.mls = ['Please select only one primary MLS'];\n }\n\n team_mlses.forEach((mls, index) => {\n if (mls._destroy) return;\n\n if (!mls.mlses_ouid) {\n errors[index] = { mlses_ouid: \"Can't be empty\" };\n }\n });\n\n return errors;\n }\n\n addMultipleListingService(e) {\n e.preventDefault();\n\n const { team_mlses } = this.state;\n\n team_mlses.push({ ...this.emptyMultipleListingService });\n\n this.setState({ team_mlses });\n }\n\n renderIntegrationStatus(enabled) {\n let status;\n\n if (enabled) {\n status = (\n \n
\n \n this.handleMlsOuidChange(val, mls)}\n className={classNames({\n 'has-error': errors[index]\n ? errors[index].mlses_ouid\n : '',\n })}\n clearable\n />\n\n {mls.api_key && Mls?.preferred_phone_setting && !mls.preferred_phone && (\n
\n\n \n You selected an MLS which only provides Preferred\n Phone without indicating phone type, so we recommend\n you activate the Preferred Phone mapping for the\n Relitix integration\n {' '}\n \n here\n \n
\n )}\n \n
\n \n {mlsImportFeatureEnabled && (\n
\n \n {this.renderIntegrationStatus(\n mls.integration_status,\n )}\n
\n )}\n\n \n
\n\n \n this.handlePrimaryMlsChange(e, mls)}\n checked={mls.primary || false}\n disabled={\n !mls.primary && disablePrimaryCheckbox\n }\n />\n
\n \n {mls.id && mlsImportFeatureEnabled && (\n <>\n {\n this.handleMlsConfiguration(e, mls);\n }}\n >\n this.handleMultipleListingServiceDelete(\n e,\n mls,\n )}\n id={`deletes-mls-${index}`}\n >\n
\n \n
\n
\n );\n }\n\n return (\n \n );\n }\n}\n\nexport default MlsSettingsTab;\n","import classNames from 'classnames';\nimport autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Tooltipable from '~/components/effects/tooltipable';\nimport EmailDomainActions from '~/actions/email_domain_actions';\nimport EmailDomainStore from '~/stores/email_domain_store';\n\nclass DomainItem extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n\n this.state = {\n submitting: false,\n };\n }\n\n componentDidMount() {\n this.domainStoreListener = EmailDomainStore.addListener(\n this.onDomainStoreChange,\n );\n }\n\n componentWillUnmount() {\n if (this.domainStoreListener) {\n this.domainStoreListener.remove();\n }\n }\n\n onDomainStoreChange() {\n const domainStoreState = EmailDomainStore.getState();\n const { lastDomainStoreAction } = domainStoreState;\n let nextState;\n\n if (\n lastDomainStoreAction === 'verifyEmailDomainDone'\n || lastDomainStoreAction === 'verifyEmailDomainFail'\n ) {\n nextState = {\n submitting: false,\n };\n }\n\n this.setState(nextState);\n }\n\n verifyDomain() {\n const { domain } = this.props;\n\n if (_lodash.isEmpty(domain)) return;\n\n this.setState({ submitting: true }, () => {\n EmailDomainActions.verifyDomain(domain);\n });\n }\n\n render() {\n const { submitting } = this.state;\n const { domain, handleDomainDelete } = this.props;\n const { helpers } = this.context;\n const { sending_records, tracking_records } = domain;\n const requiredRecordsValid = (sending_records || []).concat(tracking_records || []).every(\n (record) => record?.valid === 'valid',\n );\n\n return (\n \n \n {Moment(domain.created_at).format(\n 'MMMM Do YYYY, h:mm A',\n )}\n \n
\n\n \n \n
\n
\n );\n }\n}\n\nEmailDomainsTable.defaultProps = {\n domains: [],\n deleteDomain: () => false,\n};\n\nEmailDomainsTable.propTypes = {\n history: PropTypes.shape({}).isRequired,\n domains: PropTypes.arrayOf(\n PropTypes.shape({}),\n ),\n deleteDomain: PropTypes.func,\n};\n\nexport default withRouter(EmailDomainsTable);\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport update from 'immutability-helper';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport EmailDomainActions from '~/actions/email_domain_actions';\nimport EmailDomainStore from '~/stores/email_domain_store';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nclass DomainForm extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n this.state = {\n errors: {},\n submitting: false,\n formVisible: false,\n domain: {\n name: '',\n },\n };\n }\n\n componentDidMount() {\n // listen to domainStoreListener changes\n this.domainStoreListener = EmailDomainStore.addListener(\n this.onDomainStoreChange,\n );\n }\n\n componentWillUnmount() {\n // remove listener to EmailDomainStore changes on Unmount\n if (this.domainStoreListener) {\n this.domainStoreListener.remove();\n }\n }\n\n handleNameChange(e) {\n e.preventDefault();\n\n const { value } = e.target;\n this.setState((prevState) => ({\n ...prevState,\n domain: {\n ...prevState.domain,\n name: value,\n },\n }));\n }\n\n handleFormSubmit(e) {\n e.preventDefault();\n\n const { domain } = this.state;\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n EmailDomainActions.createDomain({ ...domain });\n } else {\n this.setState({ errors });\n }\n }\n\n // when EmailDomainStore changes...\n onDomainStoreChange() {\n const domainStoreState = EmailDomainStore.getState();\n const { helpers } = this.context;\n const {\n domain,\n lastDomainStoreAction,\n errors,\n submitting,\n formVisible,\n } = domainStoreState;\n let nextState;\n\n if (lastDomainStoreAction === 'createEmailDomain') {\n nextState = {\n errors,\n submitting,\n };\n }\n\n if (lastDomainStoreAction === 'createEmailDomainDone') {\n helpers.openEmailEmailDrawer({ domain });\n\n nextState = {\n domain: { name: '' },\n errors,\n submitting,\n formVisible,\n };\n }\n\n if (lastDomainStoreAction === 'createEmailDomainFail') {\n nextState = {\n errors,\n submitting,\n };\n }\n\n this.setState(nextState);\n }\n\n validate() {\n const { domain } = this.state;\n const { name } = domain;\n const errors = {};\n const domainRegex = /^(?=.{1,253})(?=.{1,63}\\.)((?!-)[A-Za-z0-9-]{1,63}(?\n | \n Domain Name\n | \n\n Status\n | \n
|---|
\n
\n );\n }\n\n if (domains.length === 0) {\n return (\n \n You don't have any sending domains, please add...\n
\n );\n }\n\n return (\n \n
\n\n {this.renderDomainsTable()}\n \n );\n }\n}\n\nListingEmailDomains.defaultProps = {};\n\nListingEmailDomains.propTypes = {};\n\nexport default ListingEmailDomains;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport update from 'immutability-helper';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { v4 as uuidv4 } from 'uuid';\nimport GlobalContainer from '~/components/global_container';\nimport CampaignActions from '~/actions/campaign_actions';\nimport CampaignStep from './campaign_form/campaign_step';\nimport CampaignStepNew from './campaign_form/campaign_step_new';\nimport CampaignStepTemplate from './campaign_form/campaign_step_template';\nimport ErrorMessageWithIcon from '~/components/forms/ErrorMessageWithIcon';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nconst charsLimit = 1600;\nconst { newCampaignEngineFeatureEnabled } = Rails.helpers;\n\nclass CampaignForm extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n this.state = {\n stepsErrors: {},\n submitting: false,\n errors: {},\n campaignForm: {\n id: null,\n name: '',\n description: '',\n new_engine: true,\n campaign_steps_attributes: [],\n pause_on_text_reply: true,\n pause_on_email_reply: true,\n },\n };\n\n this.stepInstances = [];\n }\n\n componentDidUpdate(prevProps) {\n const { campaignForm } = this.state;\n const { campaign, campaignSettings } = this.props;\n const updates = {};\n\n if (prevProps.campaign !== campaign && campaign) {\n const newCampaignForm = this.buildCampaignFormState(campaign);\n Object.keys(newCampaignForm).forEach((key) => {\n if (campaignForm[key] !== newCampaignForm[key]) {\n updates[key] = newCampaignForm[key];\n }\n });\n }\n\n if (prevProps.campaignSettings !== campaignSettings && campaignSettings) {\n const { pause_on_text_reply, pause_on_email_reply } = campaignSettings;\n\n if (campaignForm.pause_on_text_reply !== pause_on_text_reply) {\n updates.pause_on_text_reply = pause_on_text_reply;\n }\n if (campaignForm.pause_on_email_reply !== pause_on_email_reply) {\n updates.pause_on_email_reply = pause_on_email_reply;\n }\n }\n\n if (Object.keys(updates).length > 0) {\n this.setState((prevState) => ({\n campaignForm: {\n ...prevState.campaignForm,\n ...updates,\n },\n }));\n }\n }\n\n handleNameChange(e) {\n e.preventDefault();\n\n this.setState((prevState) => ({\n campaignForm: {\n ...prevState.campaignForm,\n name: e.target.value,\n },\n }));\n }\n\n handleDescriptionChange(e) {\n e.preventDefault();\n\n this.setState((prevState) => ({\n campaignForm: {\n ...prevState.campaignForm,\n description: e.target.value,\n },\n }));\n }\n\n handleEngineChange(e) {\n this.setState((prevState) => ({\n campaignForm: {\n ...prevState.campaignForm,\n new_engine: e.target.checked,\n },\n }));\n }\n\n handleFormSubmit(e) {\n e.preventDefault();\n\n const { history } = this.props;\n const { campaignForm } = this.state;\n\n const isSaved = this.saveCampaign(campaignForm);\n const campaigns_uri = GlobalContainer.productUri('/campaigns');\n\n if (isSaved) {\n GlobalContainer.notify('Campaign saved.', 'success');\n history.push(campaigns_uri);\n window.scrollTo(0, 0);\n }\n }\n\n handleFromScratchClick() {\n const { onCampaignStateChange } = this.props;\n\n onCampaignStateChange({\n selectingTemplate: false,\n });\n }\n\n handleCampaignTemplateClick(templateCampaign) {\n const { onCampaignStateChange } = this.props;\n\n const newStepAttributes = templateCampaign.campaign_steps.map(\n (step) => {\n // Step without id and campaign ID\n const { id, campaign_id, ...newStep } = step;\n\n return newStep;\n },\n );\n\n onCampaignStateChange({ selectingTemplate: false });\n\n const newState = update(this.state, {\n campaignForm: {\n campaign_steps_attributes: {\n $push: newStepAttributes,\n },\n },\n });\n\n this.setState(newState);\n }\n\n buildCampaignFormState(campaignProp) {\n if (!campaignProp) return null;\n\n return {\n id: campaignProp.id,\n name: campaignProp.name,\n description: campaignProp.description,\n new_engine: campaignProp.new_engine,\n campaign_steps_attributes: campaignProp.campaign_steps,\n pause_on_text_reply: campaignProp.pause_on_text_reply,\n pause_on_email_reply: campaignProp.pause_on_email_reply,\n };\n }\n\n rebuildStepOrder(steps) {\n const { campaignForm } = this.state;\n let position = 1;\n\n steps.forEach((step, idx) => {\n // intentionally mutate step position\n if (step._destroy === true) {\n step.position = null;\n return;\n }\n\n // intentionally mutate wait_time to zero if this is first step and old engine - this could be dangerous\n if (position === 1 && !campaignForm.new_engine) step.wait_time = 0;\n\n step.position = position;\n position += 1;\n });\n }\n\n addStep(stepForm = 'email', stepIdx) {\n const { campaignForm } = this.state;\n const { campaign_steps_attributes } = campaignForm;\n\n let defaultOnValue = 'mon-fri';\n let defaultAtValue = '09:00-12:00';\n let defaultWaitTime = 0;\n\n if (campaignForm.id && campaignForm.new_engine) {\n defaultOnValue = '*';\n }\n\n if (\n !campaignForm.id\n && campaignForm.new_engine\n && stepForm === 'task'\n ) {\n defaultAtValue = '09:00';\n }\n\n if (campaignForm.campaign_steps_attributes.length > 0) {\n defaultWaitTime = 86400 * 7; // 7 days\n }\n\n const newStep = {\n id: null,\n position: stepIdx + 1,\n action_type: stepForm,\n wait_time: defaultWaitTime,\n from: null,\n subject: '',\n body: '',\n cc_emails: '',\n attachment_ids: [],\n at: defaultAtValue,\n on: defaultOnValue,\n uuid: uuidv4(),\n };\n\n if (stepForm === 'task') {\n newStep.task_name = 'Follow Up';\n newStep.task_category = 'follow_up';\n newStep.body = '';\n newStep.task_due_days = 0;\n newStep.task_owner = Rails.helpers.currentUser.id;\n newStep.task_priority = 'normal';\n newStep.task_status = 'to_do';\n newStep.notification_task_assignment = true;\n }\n\n campaign_steps_attributes.splice(newStep.position, 0, newStep);\n\n this.rebuildStepOrder(campaign_steps_attributes);\n\n this.setState({\n campaignForm: {\n ...campaignForm,\n campaign_steps_attributes,\n },\n });\n }\n\n updateStep(stepIdx, stepDataFragment) {\n const { campaignForm } = this.state;\n const updateStep = campaignForm.campaign_steps_attributes[stepIdx];\n\n const newState = update(this.state, {\n campaignForm: {\n campaign_steps_attributes: {\n $splice: [[stepIdx, 1, { ...updateStep, ...stepDataFragment }]],\n },\n },\n });\n\n this.setState(newState, () => {\n this.validateSmsBody(stepIdx);\n });\n }\n\n validateSmsBody(stepIdx) {\n const { campaignForm } = this.state;\n const { onCampaignStateChange } = this.props;\n\n const stepsErrors = {};\n\n campaignForm.campaign_steps_attributes.forEach((stepAttributes, idx) => {\n if (stepAttributes._destroy === true) return;\n\n if (stepAttributes.action_type === 'sms' && stepAttributes.body && charsLimit < stepAttributes.body.length) {\n stepsErrors.body = 'You have exceeded your limit of maximum characters allowed';\n }\n });\n\n this.setState({ stepsErrors });\n onCampaignStateChange({ validCampaign: _lodash.isEmpty(stepsErrors) });\n }\n\n moveStep(dragIndex, hoverIndex) {\n const { campaignForm } = this.state;\n const dragStep = campaignForm.campaign_steps_attributes[dragIndex];\n\n const newState = update(this.state, {\n campaignForm: {\n campaign_steps_attributes: {\n $splice: [[dragIndex, 1], [hoverIndex, 0, dragStep]],\n },\n },\n });\n\n this.rebuildStepOrder(newState.campaignForm.campaign_steps_attributes);\n\n this.setState(newState);\n }\n\n deleteStep(stepIdx) {\n const { campaignForm } = this.state;\n const deleteStep = campaignForm.campaign_steps_attributes[stepIdx];\n\n const newState = update(this.state, {\n campaignForm: {\n campaign_steps_attributes: {\n $splice: [[stepIdx, 1, { ...deleteStep, _destroy: true }]],\n },\n },\n });\n\n this.rebuildStepOrder(newState.campaignForm.campaign_steps_attributes);\n\n this.setState(newState, () => {\n this.stepInstances = this.stepInstances.filter((el) => el.id !== stepIdx);\n });\n }\n\n validate(campaignForm) {\n const { name, description } = campaignForm;\n const { setCampaignErrors, setErrors } = this.props;\n const context = this;\n\n const errors = {};\n\n if (!name) {\n errors.name = \"Can't be empty\";\n }\n\n const campaignStepAttibutes = campaignForm.campaign_steps_attributes.filter((x, i) => !x._destroy);\n\n if (campaignStepAttibutes.length === 0) {\n errors.steps = \"Can't be empty\";\n }\n\n if (description && description.length > 400) {\n errors.description = 'Description must be at most 400 characters';\n }\n\n campaignStepAttibutes.forEach((stepAttributes, idx) => {\n if (stepAttributes.action_type === 'email' || stepAttributes.action_type === 'sms') {\n if (!stepAttributes.from) {\n errors.step_from = \"Can't be empty\";\n }\n\n if (stepAttributes.action_type === 'email' && !stepAttributes.subject) {\n errors.step_subject = \"Can't be empty\";\n }\n\n if (!stepAttributes.body) {\n errors.step_body = \"Can't be empty\";\n }\n }\n\n if (stepAttributes.action_type === 'task') {\n if (!stepAttributes.task_owner) {\n errors.step_task_owner = \"Can't be empty\";\n }\n }\n\n if (stepAttributes.action_type === 'sms' && stepAttributes.body && charsLimit < stepAttributes.body.length) {\n errors.body = 'You have exceeded your limit of maximum characters allowed';\n }\n });\n\n this.stepInstances.map((stepInstance) => {\n const { instance } = stepInstance;\n const instanceError = instance.validate();\n\n if (_lodash.size(instanceError) !== 0) {\n errors.instance_error = instanceError;\n }\n\n return null;\n });\n\n this.setState({ errors }, () => {\n if (setCampaignErrors) {\n setCampaignErrors(context.renderErrors());\n }\n\n if (setErrors) {\n setErrors(errors);\n }\n });\n\n return errors;\n }\n\n saveCampaign(campaignForm) {\n const errors = this.validate(campaignForm);\n\n if (_lodash.size(errors) === 0) {\n if (_lodash.isNumber(campaignForm.id)) {\n CampaignActions.updateCampaign(campaignForm);\n } else {\n CampaignActions.createCampaign(campaignForm);\n }\n\n return true;\n }\n\n return false;\n }\n\n renderErrors() {\n const { errors } = this.state;\n const content = [];\n\n if (errors.steps) {\n content.push(\n \n Can't save campaign without step.\n
,\n );\n }\n\n if (errors.step_from || errors.step_subject || errors.step_body) {\n content.push(\n \n Fields "From", "Body" and "Subject" fields are required for Email/Text step.\n
,\n );\n }\n\n if (errors.step_task_owner) {\n content.push(\n \n Field "Task Owner" is required for Task step.\n
,\n );\n }\n\n if (errors?.instance_error?.unverified_number) {\n content.push(\n \n Your campaign includes a text step, but the sender's phone number is not linked to an approved verified texting use case.\n {' '}\n To save this campaign, please select a phone number in the text step(s) which are linked to an approved verified texting use case.\n
,\n );\n }\n\n return <>{content};\n }\n\n renderCampaignSteps() {\n const { campaignForm } = this.state;\n const stepAttributes = campaignForm.campaign_steps_attributes;\n\n return stepAttributes.map((step, idx) => {\n if (step._destroy === true) return false;\n\n return (\n \n \n
\n )}\n\n \n this.handleEngineChange(e)}\n checked={campaignForm.new_engine}\n />\n \n {campaignForm.new_engine ? 'Disable' : 'Enable'}\n {' '}\n Campaigns 2.0\n \n
\n \n \n \n
\n\n \n
\n )}\n \n \n
\n\n {this.renderCampaignSteps()}\n\n {selectingTemplate ? (\n \n
\n )}\n \n {this.renderErrors()}\n
\n\n \n \n Cancel and Go Back\n \n\n {selectingTemplate === false && (\n \n Save Campaign\n \n )}\n
\n \n );\n }\n}\n\nCampaignForm.defaultProps = {\n campaign: null,\n campaignSettings: null,\n validCampaign: true,\n selectingTemplate: false,\n onCampaignStateChange: () => {},\n setCampaignErrors: () => {},\n setErrors: () => {},\n};\n\nCampaignForm.propTypes = {\n history: PropTypes.shape({}).isRequired,\n campaign: PropTypes.shape({}),\n campaignSettings: PropTypes.shape({}),\n validCampaign: PropTypes.bool,\n selectingTemplate: PropTypes.bool,\n onCampaignStateChange: PropTypes.func,\n setCampaignErrors: PropTypes.func,\n setErrors: PropTypes.func,\n};\n\nexport default CampaignForm;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Select from '~/components/forms/select';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport StepEmailForm from './step_email_form';\nimport StepTaskForm from './step_task_form';\nimport StepTextMessageForm from './step_text_message_form';\n\nimport brokerbit from '~/lib/brokerbit';\nimport CampaignStepOnSelect from '~/components/forms/dropdowns/CampaignStepOnSelect';\nimport CampaignStepAtSelect from '~/components/forms/dropdowns/CampaignStepAtSelect';\nimport MeridianSelect from '~/components/forms/dropdowns/MeridianSelect';\nimport CampaignStepNew from './campaign_step_new';\n\nclass CampaignStep extends React.Component {\n static updateColorAndIcon(formName) {\n let color = 'text-blue';\n let icon = 'envelope';\n let prefix = 'far';\n\n switch (formName) {\n case 'sms':\n color = 'text-yellow';\n icon = 'comment';\n prefix = 'far';\n break;\n\n case 'task':\n color = 'text-green';\n icon = 'tasks';\n prefix = 'far';\n break;\n\n case 'email':\n default:\n color = 'text-blue';\n icon = 'envelope';\n prefix = 'far';\n }\n\n return { color, icon, prefix };\n }\n\n static timeToSeconds(timeValue, timeUnit) {\n switch (timeUnit) {\n case 'hours':\n return timeValue * 3600;\n case 'days':\n default:\n return timeValue * 86400;\n }\n }\n\n static secondsToTimeValue(seconds) {\n return seconds % 86400 === 0 ? seconds / 86400 : seconds / 3600;\n }\n\n static secondsToTimeUnit(seconds) {\n return seconds % 86400 === 0 ? 'days' : 'hours';\n }\n\n static timeToHhmm(time) {\n if (time === '*' || time === '09:00-12:00') {\n return [time, 'am'];\n }\n\n const convertedTime = Moment(time, 'hh:mm A');\n const at = convertedTime.format('hh:mm');\n const meridian = convertedTime.format('a');\n\n return [at, meridian];\n }\n\n static timeToHHmm(time, meridian) {\n if (time === '*' || time === '09:00-12:00') {\n return time;\n }\n\n // eslint-disable-next-line prefer-const\n let [hours, minutes] = time.split(':');\n\n hours = (hours % 12) + (meridian === 'am' ? 0 : 12);\n hours = hours < 10 ? `0${hours}` : hours;\n\n return `${hours}:${minutes}`;\n }\n\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n let formName = 'email';\n let timeValue = 0;\n let timeUnit = 'days';\n let on = 'mon-fri';\n let at = '09:00-12:00';\n let meridian = 'am';\n\n const { step } = props;\n\n if (step) {\n formName = step.action_type;\n on = step.on || on;\n at = step.at || step.random_at_range || at;\n timeValue = CampaignStep.secondsToTimeValue(step.wait_time);\n timeUnit = CampaignStep.secondsToTimeUnit(step.wait_time);\n }\n\n const { color, icon, prefix } = CampaignStep.updateColorAndIcon(formName);\n\n [at, meridian] = CampaignStep.timeToHhmm(at);\n\n this.state = {\n currentForm: formName,\n waitTimeValue: timeValue,\n waitTimeUnit: timeUnit,\n showAddStepDialog: false,\n on,\n at,\n meridian,\n color,\n icon,\n prefix,\n };\n }\n\n handleSwitchForm(formName) {\n const { stepIdx, step, updateStep } = this.props;\n\n const { color, icon, prefix } = CampaignStep.updateColorAndIcon(formName);\n\n this.setState({\n currentForm: formName,\n color,\n icon,\n prefix,\n });\n\n if (!step.id) {\n this.setStepOn({ value: 'mon-fri' });\n\n if (formName === 'email' || formName === 'sms') {\n this.setStepAt({ value: '09:00-12:00' });\n } else {\n this.setStepAt({ value: '09:00' });\n }\n }\n\n updateStep(stepIdx, { action_type: formName });\n }\n\n handleStepFormChange(formState) {\n const { stepIdx, updateStep } = this.props;\n\n updateStep(stepIdx, formState);\n }\n\n handleStepDelete(e) {\n e.preventDefault();\n\n const { deleteStep, stepIdx } = this.props;\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this step?',\n callback: (ok) => {\n if (ok) { deleteStep(stepIdx); }\n },\n });\n }\n\n handleOptionChange(e) {\n const { stepIdx, moveStep } = this.props;\n\n moveStep(stepIdx, e.value);\n }\n\n onWaitTimeValueChange(e) {\n e.preventDefault();\n\n const { stepIdx, updateStep } = this.props;\n const { waitTimeUnit } = this.state;\n const timeValue = parseInt(e.target.value, 10);\n const value = _lodash.isNaN(timeValue) ? 0 : timeValue;\n\n this.setState({\n waitTimeValue: value,\n });\n\n updateStep(stepIdx, { wait_time: CampaignStep.timeToSeconds(value, waitTimeUnit) });\n }\n\n onAddStepIconClick() {\n this.setState({ showAddStepDialog: true });\n }\n\n onCloseStepIconClick() {\n this.setState({ showAddStepDialog: false });\n }\n\n setStepOn(option) {\n const { stepIdx, updateStep } = this.props;\n\n this.setState({ on: option.value });\n updateStep(stepIdx, { on: option.value });\n }\n\n setStepAt(option) {\n const { meridian } = this.state;\n const { stepIdx, updateStep } = this.props;\n let at = option.value;\n let random_at_range;\n\n if (at === '09:00-12:00') random_at_range = at;\n\n this.setState({ at }, () => {\n at = CampaignStep.timeToHHmm(at, meridian);\n\n if (random_at_range) updateStep(stepIdx, { random_at_range, at: null });\n if (!random_at_range) updateStep(stepIdx, { random_at_range: null, at });\n });\n }\n\n setStepMeridian(option) {\n let { at } = this.state;\n const { stepIdx, updateStep } = this.props;\n const meridian = option.value;\n\n this.setState({ meridian }, () => {\n at = CampaignStep.timeToHHmm(at, meridian);\n updateStep(stepIdx, { at });\n });\n }\n\n validate() {\n const { currentForm } = this.state;\n let errors;\n\n switch (currentForm) {\n case 'sms':\n errors = this.smsForm.validate();\n break;\n case 'task':\n errors = this.taskForm.validate();\n break;\n case 'email':\n default:\n errors = this.emailForm.validate();\n }\n\n return errors;\n }\n\n addStep(...args) {\n const { addStep } = this.props;\n addStep(...args);\n this.setState({ showAddStepDialog: false });\n }\n\n renderStepContent() {\n const { step, type, stepIdx } = this.props;\n const { currentForm } = this.state;\n\n switch (currentForm) {\n case 'sms':\n return (\n \n {newEngine && (\n <>\n
\n \n );\n }\n\n renderStepLabel() {\n const { step } = this.props;\n const { currentForm } = this.state;\n\n let stepLabel = 'Add the first step:';\n if (step.position > 1) stepLabel = 'Add another step:';\n\n if (_lodash.isNumber(step.id)) {\n stepLabel = 'Send a';\n if (currentForm === 'email') stepLabel = 'Send an';\n }\n\n return {stepLabel};\n }\n\n renderAddStepIcon() {\n const { showAddStepDialog } = this.state;\n const { stepIdx } = this.props;\n\n return (\n \n \n On:\n \n this.setStepOn(opt || '')}\n className=\"d-inline-block\"\n />\n
\n\n \n \n At:\n \n this.setStepAt(opt || '')}\n className=\"d-inline-block\"\n />\n
\n\n {at !== '*' && at !== '09:00-12:00' && (\n \n this.setStepMeridian(opt || '')}\n className=\"d-inline-block\"\n />\n
\n )}\n\n \n after waiting\n \n
\n \n )}\n \n {!showAddStepDialog ? (\n
\n );\n }\n\n render() {\n const { subscription } = Rails;\n const {\n step,\n stepIdx,\n isDragging,\n isOver,\n newEngine,\n stepAttributes,\n } = this.props;\n const {\n currentForm,\n color,\n icon,\n prefix,\n waitTimeValue,\n } = this.state;\n\n const steps = [];\n\n stepAttributes.forEach((stp, idx) => {\n if (stp._destroy !== true) {\n steps.push({ value: idx, label: `Step ${stp.position}` });\n }\n });\n\n const stepClass = classNames('campaign-step', {\n 'new-step': _lodash.isNumber(step.id) === false,\n 'is-dragging': isDragging,\n 'is-over': isOver,\n });\n\n return (\n \n
\n ) : (\n \n
\n
\n \n \n
\n
\n
\n \n
\n
\n );\n }\n}\n\nCampaignStep.defaultProps = {\n type: 'Campaign',\n isDragging: false,\n isOver: false,\n step: {},\n stepIdx: null,\n updateStep: () => false,\n deleteStep: () => false,\n newEngine: false,\n position: 0,\n addStep: () => false,\n stepAttributes: [],\n};\n\nCampaignStep.propTypes = {\n type: PropTypes.string,\n isDragging: PropTypes.bool,\n isOver: PropTypes.bool,\n step: PropTypes.shape({\n action_type: PropTypes.string,\n }),\n stepIdx: PropTypes.number,\n updateStep: PropTypes.func,\n deleteStep: PropTypes.func,\n newEngine: PropTypes.bool,\n position: PropTypes.number,\n addStep: PropTypes.func,\n stepAttributes: PropTypes.shape([]),\n};\n\nexport default CampaignStep;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Tooltipable from '~/components/effects/tooltipable';\n\nclass CampaignStepNew extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n addNewStep(stepName) {\n const { addStep, stepIdx } = this.props;\n\n addStep(stepName, stepIdx);\n }\n\n renderStepLabel() {\n const { nested } = this.props;\n\n let stepLabel = 'Add the first step...';\n if (nested) stepLabel = 'Add another step...';\n\n return {stepLabel};\n }\n\n render() {\n const { subscription } = Rails;\n const { nested, onClose } = this.props;\n\n return (\n \n \n
\n {this.renderAddStepIcon()}\n \n
\n \n
\n\n \n
\n\n \n \n {this.renderStepLabel()}\n\n \n {\n e.preventDefault();\n this.handleSwitchForm('email');\n }}\n >\n {\n e.preventDefault();\n this.handleSwitchForm('sms');\n }}\n >\n \n \n \n )}\n\n {\n e.preventDefault();\n this.handleSwitchForm('task');\n }}\n >\n \n\n {!newEngine && (\n <>\n {step.position === 1 && generated on the first day scheduled}\n\n {\n step.position > 1 // only display wait time if not first step\n && (\n \n after waiting\n
\n\n {this.renderTimeStepContent()}\n\n {this.renderStepContent()}\n \n {!nested && (\n <>\n \n
\n );\n }\n}\n\nCampaignStepNew.defaultProps = {\n nested: false,\n stepIdx: 0,\n addStep: () => false,\n onClose: () => false,\n};\n\nCampaignStepNew.propTypes = {\n nested: PropTypes.bool,\n stepIdx: PropTypes.number,\n addStep: PropTypes.func,\n onClose: PropTypes.func,\n};\n\nexport default CampaignStepNew;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport CampaignActions from '~/actions/campaign_actions';\nimport CampaignStore from '~/stores/campaign_store';\nimport CampaignTemplateItem from './campaign_template/campaign_template_item';\n\nclass CampaignStepTemplate extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n\n this.state = {\n campaigns: [],\n };\n }\n\n componentDidMount() {\n this.campaignStoreListener = CampaignStore.addListener(this.onCampaignStoreChange);\n\n CampaignActions.loadCampaigns();\n }\n\n componentWillUnmount() {\n if (this.campaignStoreListener) this.campaignStoreListener.remove();\n }\n\n onCampaignStoreChange() {\n const newState = { ...CampaignStore.getState() };\n\n this.setState({\n campaigns: newState.campaigns,\n });\n }\n\n renderCampaigns() {\n const { campaigns } = this.state;\n const { handleCampaignTemplateClick } = this.props;\n\n if (campaigns.length === 0) {\n return (\n
\n \n {this.renderStepLabel()}\n\n \n {\n e.preventDefault();\n this.addNewStep('email');\n }}\n >\n {\n e.preventDefault();\n this.addNewStep('sms');\n }}\n >\n \n \n \n )}\n\n {\n e.preventDefault();\n this.addNewStep('task');\n }}\n >\n
\n { nested && (\n \n \n
\n )}\n No existing campaign found.
);\n }\n\n const campaignRows = [];\n _lodash.each(campaigns, (campaign, idx) => {\n campaignRows.push(\n\n
\n );\n }\n}\n\nCampaignStepTemplate.defaultProps = {\n handleFromScratchClick: () => false,\n handleCampaignTemplateClick: () => false,\n};\n\nCampaignStepTemplate.propTypes = {\n handleFromScratchClick: PropTypes.func,\n handleCampaignTemplateClick: PropTypes.func,\n};\n\nexport default CampaignStepTemplate;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nclass CampaignTemplateItem extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n\n this.state = {};\n }\n\n render() {\n const { campaign } = this.props;\n\n let { duration } = campaign;\n if (duration < 86400) duration = 86400;\n else duration += 86400;\n\n const durationMessage = `lasts ${Moment().add(duration, 's').fromNow(true)}`;\n\n return (\n \n
\n\n Select a template
\n\n\n {\n e.preventDefault();\n handleFromScratchClick();\n }}\n >\n Create from scratch\n \n
\n or choose an existing campaign
\n\n {this.renderCampaigns()}\n \n
\n );\n }\n}\n\nStepTaskForm.defaultProps = {\n step: {},\n onChange: () => false,\n};\n\nStepTaskForm.propTypes = {\n step: PropTypes.shape({}),\n onChange: PropTypes.func,\n type: PropTypes.string.isRequired,\n};\n\nexport default StepTaskForm;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport filesize from 'filesize';\n\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\nimport SmsTextEditor from '~/components/forms/HtmlEditors/SmsTextEditor';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport SmsTemplateSelect from '~/components/forms/sms_template_select';\nimport TeamPhoneNumberPicker from '~/components/forms/team_fields/team_phone_number_picker';\nimport VerifiedTextingWarning from '~/components/warnings/VerifiedTextingWarning';\nimport OwnerContactWarning from '~/components/warnings/OwnerContactWarning';\nimport A2pNotApprovedWarning from '~/components/warnings/A2pNotApprovedWarning';\nimport InsertDocumentButton from '~/components/insert_document_button';\n\nconst MAX_MEDIA_SIZE = 5120000; // 5MB\nconst charsLimit = 1600;\n\nclass TextMessageForm extends React.Component {\n isRestrictionForUnverifiedNumbersEnabled = checkFeatureFlag(process.env.BLOCK_UNVERIFIED_NUMBERS_FLAG);\n\n constructor(props) {\n super(props);\n\n const { step } = props;\n const smsNumber = _lodash.first(Rails.helpers.currentUser.sms_numbers);\n\n this.state = {\n errors: {},\n media: {},\n sms: {\n from: step.from || (smsNumber ? smsNumber.service_number : ''),\n body: step.body || '',\n media_url: step.media_url || null,\n media_name: step.media_name || null,\n },\n enableFromField: props.type === 'Campaign',\n numbersExists: true,\n showVerifiedTextingWarning: false,\n showA2PWarning: false,\n };\n\n autoBind(this);\n }\n\n handleFromChange = (opt) => {\n this.setState((prevState) => {\n const { sms } = prevState;\n const fromValue = opt?.value || null;\n\n if (fromValue === -1) {\n return {\n sms: { ...sms, from: fromValue },\n showVerifiedTextingWarning: false,\n showA2PWarning: false,\n };\n }\n\n const showWarning = fromValue ? !opt.verified_texting : false;\n const showA2PWarning = fromValue ? (opt.verified_texting && !opt.a2p_approved) : false;\n\n return {\n sms: { ...sms, from: fromValue },\n showVerifiedTextingWarning: showWarning,\n showA2PWarning,\n };\n }, () => {\n const { sms } = this.state;\n const { onChange } = this.props;\n onChange(sms);\n });\n }\n\n handleNumbersExistsChange(numbersExists) {\n this.setState({ numbersExists });\n }\n\n handleBodyChange = (text) => {\n this.setState((prevState) => {\n const errors = {};\n\n if (charsLimit < text.length) {\n errors.body = ['You have exceeded your limit of maximum characters allowed.'];\n }\n\n return {\n errors: { ...prevState.errors, ...errors },\n sms: { ...prevState.sms, body: text },\n };\n }, () => {\n const { sms } = this.state;\n const { onChange } = this.props;\n onChange(sms);\n });\n }\n\n handleMediaUrlChange = (media) => {\n this.setState((prevState) => {\n const media_name = media.name || media.title;\n let media_url;\n\n if (media.type === 'image') {\n media_url = media.small_media_url;\n }\n\n return {\n media: { ...prevState.media, ...media },\n sms: {\n ...prevState.sms,\n media_url,\n media_name,\n },\n };\n }, () => {\n const { sms } = this.state;\n const { onChange } = this.props;\n onChange(sms);\n });\n }\n\n handleVerifiedTextingWarning = (verifiedTexting) => {\n this.setState({\n showVerifiedTextingWarning: verifiedTexting,\n });\n }\n\n handleA2PWarning = (a2pApproved) => {\n this.setState({\n showA2PWarning: a2pApproved,\n });\n }\n\n applyTemplate = (template) => {\n this.setState((prevState) => ({\n sms: {\n ...prevState.sms,\n body: template.body,\n media_url: template.media_url,\n },\n media: {\n ...prevState.media,\n name: template.media_name,\n },\n templateBody: template.body,\n errors: {},\n }), () => {\n const { sms } = this.state;\n const { onChange } = this.props;\n onChange(sms);\n });\n }\n\n removeAttachment = (e) => {\n e.preventDefault();\n\n const { onChange } = this.props;\n\n this.setState((prevState) => ({\n media: null,\n sms: {\n ...prevState.sms,\n media_url: null,\n media_name: null,\n },\n }), () => {\n const { sms } = this.state;\n\n onChange(sms);\n });\n }\n\n validate() {\n const errors = {};\n const {\n sms, enableFromField, media, showVerifiedTextingWarning, showA2PWarning,\n } = this.state;\n\n if (enableFromField && !sms.from) {\n errors.from = [\"Can't be empty\"];\n }\n\n if (enableFromField && (this.isRestrictionForUnverifiedNumbersEnabled && showVerifiedTextingWarning && showA2PWarning) && sms.from) {\n errors.from = ['This number is not verified for texting. Please choose another number.'];\n errors.unverified_number = true;\n }\n\n if (!sms.body) {\n errors.body = [\"Can't be empty\"];\n }\n\n if (sms.body && charsLimit < sms.body.length) {\n errors.body = ['You have exceeded your limit of maximum characters allowed.'];\n }\n\n if (media && media?.type !== 'image') {\n const media_size = media?.animated_thumbnail ? media.gif_byte_size : media.thumbnail_byte_size;\n let error;\n\n if (media_size > MAX_MEDIA_SIZE) {\n errors.media = [`File is too large (${filesize(media_size)}). Allowed ${filesize(MAX_MEDIA_SIZE)}.`];\n }\n }\n\n this.setState({ errors });\n\n return errors;\n }\n\n renderAttachment = () => {\n const { media, sms } = this.state;\n const { media_url } = sms;\n\n if (!media_url) return null;\n\n const name = media?.name || media?.title || sms?.media_name;\n\n return (\n \n
\n\n \n \n this.setTaskField('task_name', val && val.target.value)}\n />\n {errors.task_name && (\n
\n\n \n \n this.setTaskField('task_category', opt && opt.value)}\n />\n {errors.task_category && (\n
\n\n \n \n this.setTaskField('task_due_days', val && val.target.value)}\n />\n {errors.task_due_days && (\n
\n \n \n this.setTaskField('body', html)}\n placeholder=\"Enter Description\"\n value={task.body}\n isCampaingStep\n linksToInsert={linksToInsert}\n clearLinksToInsert={() => {\n this.setState({ linksToInsert: [] });\n }}\n />\n
\n\n \n
\n\n \n this.setState({ linksToInsert })}\n />\n
\n \n {enableOwnerField && (\n
\n\n \n \n this.setTaskField('task_owner', opt && opt.value)}\n className={errors.task_owner ? 'has-error' : ''}\n clearable\n contactOwner\n />\n {errors.task_owner && (\n
\n )}\n\n \n \n this.setTaskField('task_priority', opt && opt.value)}\n />\n {errors.task_priority && (\n
\n\n \n \n this.setTaskField('task_status', opt && opt.value)}\n />\n {errors.task_status && (\n
\n \n
\n \n
\n \n this.setTaskField('notification_task_assignment', e && e.target.checked)}\n checked={task.notification_task_assignment}\n />\n \n Disable Task Notification Emails\n \n
\n \n
\n );\n }\n\n render() {\n const {\n errors, templateBody, enableFromField, sms, numbersExists, showVerifiedTextingWarning, showA2PWarning, linksToInsert,\n } = this.state;\n\n if (enableFromField && !numbersExists) {\n return (\n \n \n
\n \n
\n \n
\n );\n }\n\n return (\n Looks like no one on your team has started using texting on Brokerkit.
\n\n Choose a number and turn on texting by opening any lead with a phone number in\n {' '}\n recruiting\n
\n\n {enableFromField && (\n <>\n {this.isRestrictionForUnverifiedNumbersEnabled && showVerifiedTextingWarning &&
\n );\n }\n}\n\nTextMessageForm.defaultProps = {\n step: {},\n onChange: () => false,\n};\n\nTextMessageForm.propTypes = {\n step: PropTypes.shape({}),\n onChange: PropTypes.func,\n type: PropTypes.string.isRequired,\n};\n\nexport default TextMessageForm;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport update from 'immutability-helper';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { v4 as uuidv4 } from 'uuid';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport GlobalContainer from '~/components/global_container';\nimport CampaignPicker from '~/components/forms/campaign_picker';\nimport AudienceSelect from '~/components/forms/audience_select';\nimport ActionSelect from '~/components/forms/action_select';\nimport StatementSelect from '~/components/forms/statement_select';\nimport CampaignTriggerActions from '~/actions/campaign_trigger_actions';\nimport CampaignTriggerStore from '~/stores/campaign_trigger_store';\nimport TriggerCondition from './trigger_condition_form/trigger_condition';\nimport TriggerConditionNew from './trigger_condition_form/trigger_condition_new';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\nimport APIRequest from '~/lib/api_request';\n\nclass CampaignTriggerForm extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n submitting: false,\n unverifiedNumbersWarning: false,\n errors: {},\n conditions: [],\n campaignTriggerForm: {\n id: null,\n name: '',\n campaign_id: null,\n audience: 'leads',\n action: 'start',\n statement: 'all',\n trigger_conditions_attributes: [],\n },\n };\n\n const { campaignTrigger } = this.props;\n\n if (campaignTrigger) {\n this.state.campaignTriggerForm = this.buildCampaignTriggerFormState(campaignTrigger);\n this.state.conditions = this.buildCampaignConditionComponents(campaignTrigger.trigger_conditions);\n }\n\n this.conditionInstances = [];\n\n autoBind(this);\n }\n\n componentDidMount() {\n const { campaignTrigger } = this.props;\n\n this.campaignTriggerStoreListener = CampaignTriggerStore.addListener(this.onCampaignTriggerStoreChange);\n\n if (!campaignTrigger) {\n this.addCondition();\n }\n }\n\n componentWillUnmount() {\n if (this.campaignTriggerStoreListener) this.campaignTriggerStoreListener.remove();\n }\n\n handleNameChange(e) {\n e.preventDefault();\n\n this.setState((prevState) => ({\n campaignTriggerForm: {\n ...prevState.campaignTriggerForm,\n name: e.target.value,\n },\n }));\n }\n\n handleCampaignIdChange(option) {\n const campaignId = option ? option.value : null;\n\n this.setState((prevState) => ({\n campaignTriggerForm: {\n ...prevState.campaignTriggerForm,\n campaign_id: campaignId,\n },\n }), () => {\n this.validateSmsCampaignStepsWithUnverifiedNumbers(campaignId);\n });\n }\n\n handleAudienceChange(option) {\n const audience = option ? option.value : null;\n\n this.setState((prevState) => {\n const updatedCampaignTriggerForm = {\n ...prevState.campaignTriggerForm,\n audience,\n };\n\n return {\n campaignTriggerForm: updatedCampaignTriggerForm,\n conditions: this.buildCampaignConditionComponents(prevState.campaignTriggerForm.trigger_conditions_attributes, audience),\n };\n });\n }\n\n handleActionChange(option) {\n const action = option ? option.value : null;\n\n this.setState((prevState) => ({\n campaignTriggerForm: {\n ...prevState.campaignTriggerForm,\n action,\n },\n }));\n }\n\n handleStatementChange(option) {\n const statement = option ? option.value : null;\n\n this.setState((prevState) => ({\n campaignTriggerForm: {\n ...prevState.campaignTriggerForm,\n statement,\n },\n }));\n }\n\n handleFormSubmit(e) {\n e.preventDefault();\n\n const { campaignTriggerForm } = this.state;\n\n this.saveCampaignTrigger(campaignTriggerForm);\n }\n\n onCampaignTriggerStoreChange() {\n const campaignTriggerStoreState = CampaignTriggerStore.getState();\n const {\n campaignTrigger, lastCampaignTriggerStoreAction, errors, submitting,\n } = campaignTriggerStoreState;\n\n let nextState = { campaignTriggerStoreState };\n\n switch (lastCampaignTriggerStoreAction) {\n case 'createCampaignTriggerDone':\n GlobalContainer.notify(`Campaign Trigger \"${campaignTrigger.name}\" created.`, 'success');\n this.redirectToCampaignTriggers();\n\n break;\n case 'createCampaignTriggerFail':\n nextState = { ...nextState, errors, submitting };\n\n break;\n case 'updateCampaignTriggerDone':\n if (campaignTrigger) {\n this.setState({\n conditions: this.buildCampaignConditionComponents(campaignTrigger.trigger_conditions),\n campaignTriggerForm: this.buildCampaignTriggerFormState(campaignTrigger),\n });\n }\n\n GlobalContainer.notify(`Campaign Trigger \"${campaignTrigger.name}\" updated.`, 'success');\n this.redirectToCampaignTriggers();\n\n break;\n case 'updateCampaignTriggerFail':\n nextState = { ...nextState, errors, submitting };\n break;\n default:\n // do nothing\n }\n\n this.setState(nextState);\n }\n\n deleteCondition = (conditionIdx) => {\n const { campaignTriggerForm } = this.state;\n const deleteCondition = campaignTriggerForm.trigger_conditions_attributes[conditionIdx];\n\n deleteCondition._destroy = 1;\n\n const newState = update(this.state, {\n campaignTriggerForm: {\n trigger_conditions_attributes: {\n $splice: [[conditionIdx, 1, deleteCondition]],\n },\n },\n });\n\n newState.conditions = this.buildCampaignConditionComponents(newState.campaignTriggerForm.trigger_conditions_attributes);\n\n this.setState(newState);\n }\n\n addCondition = () => {\n const { campaignTriggerForm } = this.state;\n\n const newCondition = {\n id: null,\n field: null,\n operator: null,\n value: '',\n };\n\n const newState = update(this.state, {\n conditions: {\n $push: [(\n \n \n
\n \n )}\n\n \n {\n this.setState({\n templateBody: null,\n });\n }}\n linksToInsert={linksToInsert}\n clearLinksToInsert={() => {\n this.setState({ linksToInsert: [] });\n }}\n />\n
\n\n \n {errors.body &&
\n \n
\n \n this.setState({ linksToInsert })}\n />\n
\n\n \n {this.renderAttachment()}\n {errors.media &&
\n\n \n
\n \n Can't save campaign trigger without conditions.\n
\n );\n }\n\n return null;\n }\n\n render() {\n const {\n campaignTriggerForm, submitting, errors, unverifiedNumbersWarning,\n } = this.state;\n\n const conditionsCount = campaignTriggerForm.trigger_conditions_attributes.length;\n const campaign_triggers_uri = GlobalContainer.productUri('/campaign_triggers');\n\n return (\n \n );\n }\n}\n\nCampaignTriggerForm.defaultProps = {\n campaignTrigger: null,\n};\n\nCampaignTriggerForm.propTypes = {\n history: PropTypes.shape({}).isRequired,\n campaignTrigger: PropTypes.shape({}),\n};\n\nexport default CampaignTriggerForm;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { SketchPicker } from 'react-color';\nimport ajaxUploader from 'simple-ajax-uploader';\n\nimport { TeammatePicker } from '~/components/forms/team_member_picker';\nimport APIRequest from '~/lib/api_request';\nimport AccountActions from '~/actions/account_actions';\nimport AccountStore from '~/stores/account_store';\nimport LandingPageHtmlEditor from '~/components/forms/HtmlEditors/LandingPageHtmlEditor';\n\nimport { initWebSpellChecker } from '~/lib/web_spell_checker';\n\nclass LandingPageForm extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n landingPage: props.landingPage,\n uploadingIntroBackground: false,\n accountState: AccountStore.getState(),\n errors: {},\n showSketchPicker: false,\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.uploader = new ajaxUploader.SimpleUpload({\n button: 'landing_page_intro_background',\n url: `${Rails.apiUrl}/api/v1/landing_page`,\n name: 'landing_page[intro_background]',\n method: 'PUT',\n responseType: 'json',\n customHeaders: APIRequest.apiRequiredHeaders(),\n maxSize: 10240, // kilobytes\n onSubmit: this.onUploadSubmit,\n onProgress: this.onUploadProgress,\n onComplete: this.onUploadComplete,\n onSizeError: this.onUploadSizeError,\n });\n\n // listen to LeadDrawerStore change events and store reference\n this.listener = AccountStore.addListener(\n this.onAccountStoreChange,\n );\n }\n\n componentDidUpdate(_prevProps, prevState) {\n if (this.state.form !== prevState.form) {\n const introElement = this.landingPageIntroInput;\n if (introElement) initWebSpellChecker(introElement);\n }\n }\n\n componentWillUnmount() {\n if (this.listener) this.listener.remove();\n }\n\n handleActiveChange(e) {\n const {\n landingPage: { active },\n } = this.state;\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n active: !active,\n },\n }));\n }\n\n handleHeaderChange(e) {\n e.preventDefault();\n\n const header = e.target.value;\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n header,\n },\n }));\n }\n\n handleTitleChange(e) {\n e.preventDefault();\n\n const title = e.target.value;\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n title,\n },\n }));\n }\n\n handleUserIntroductionChange(e) {\n e.preventDefault();\n\n const user_introduction = e.target.value;\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n user_introduction,\n },\n }));\n }\n\n handleIntroChange(e) {\n e.preventDefault();\n\n const intro = e.target.value;\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n intro,\n },\n }));\n }\n\n handleIntroBackgroundChange(e) {\n if (e.target.files.length === 0) return;\n\n const intro_background = e.target.files[0];\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n intro_background,\n },\n }));\n }\n\n handleTeamLeaderChange(selectedItem) {\n const { value } = selectedItem;\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n team_leader_id: value,\n },\n }));\n }\n\n handleColorChange(color) {\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n color: color.hex,\n },\n }));\n }\n\n handlePhoneChange(e) {\n e.preventDefault();\n\n const phone = e.target.value;\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n phone,\n },\n }));\n }\n\n handleBodyChange(body) {\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n body,\n },\n }));\n }\n\n handleFBPixelIDChange(e) {\n e.preventDefault();\n\n const fb_pixel_id = e.target.value;\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n fb_pixel_id,\n },\n }));\n }\n\n handleGATrackingIDChange(e) {\n e.preventDefault();\n\n const ga_tracking_id = e.target.value;\n\n this.setState((prevState) => ({\n landingPage: {\n ...prevState.landingPage,\n ga_tracking_id,\n },\n }));\n }\n\n handleSketchPicker(e) {\n e.preventDefault();\n\n const { showSketchPicker } = this.state;\n\n this.setState({ showSketchPicker: !showSketchPicker });\n }\n\n handleFormSubmit(e) {\n e.preventDefault();\n\n const { landingPage } = this.state;\n\n const landingPageData = {\n active: landingPage.active,\n header: landingPage.header,\n title: landingPage.title,\n intro: landingPage.intro,\n team_leader_id: landingPage.team_leader_id,\n body: landingPage.body,\n phone: landingPage.phone,\n fb_pixel_id: landingPage.fb_pixel_id,\n ga_tracking_id: landingPage.ga_tracking_id,\n user_introduction: landingPage.user_introduction,\n color: landingPage.color,\n };\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n this.setState({ form: false });\n\n AccountActions.updateLandingPage(landingPageData);\n } else {\n this.setState({ errors });\n }\n }\n\n onAccountStoreChange() {\n const accountState = AccountStore.getState();\n const { landingPage, lastAccountStoreAction } = accountState;\n\n const newState = {\n accountState,\n };\n\n if (landingPage) {\n newState.landingPage = landingPage;\n }\n\n if (lastAccountStoreAction === 'updateLandingPageDone') {\n GlobalContainer.notify('Team landing page was updated.');\n }\n\n this.setState(newState);\n }\n\n onUploadSubmit(filename, extension, uploadBtn, fileSize) {\n this.setState({\n uploadingIntroBackground: true,\n });\n\n return true;\n }\n\n onUploadProgress(percentage) {}\n\n onUploadComplete(filename, response, uploadBtn, fileSize) {\n this.setState({\n landingPage: response,\n uploadingIntroBackground: false,\n });\n }\n\n onUploadSizeError(filename, fileSize) {\n GlobalContainer.notify(\n 'Background image size could not be larger than 10 megabytes.',\n 'error',\n );\n }\n\n hideSketchPicker() {\n this.setState({ showSketchPicker: false });\n }\n\n validate() {\n const { landingPage } = this.state;\n\n const errors = {};\n\n if (!landingPage.title) {\n errors.title = \"Can't be empty\";\n }\n\n if (!landingPage.user_introduction) {\n errors.user_introduction = \"Can't be empty\";\n }\n\n this.setState({ errors });\n\n return errors;\n }\n\n showForm(e) {\n e.preventDefault();\n this.setState({ form: true, showSketchPicker: false });\n }\n\n hideForm(e) {\n e.preventDefault();\n this.setState({ form: false, showSketchPicker: false, errors: {} });\n }\n\n renderIntroBackground() {\n const { landingPage, uploadingIntroBackground } = this.state;\n\n let backgroundImageContent;\n\n if (landingPage && landingPage.intro_background) {\n backgroundImageContent = (\n \n
\n );\n }\n\n return backgroundImageContent;\n }\n\n render() {\n const {\n form, landingPage, accountState, errors, showSketchPicker,\n } = this.state;\n const { updating } = accountState;\n\n const submitButtonClass = classNames('btn btn-primary', {\n disabled: updating,\n });\n\n return (\n \n );\n }\n}\n\nLandingPageForm.defaultProps = {\n landingPage: {},\n};\n\nLandingPageForm.propTypes = {\n landingPage: PropTypes.shape({}),\n};\n\nexport default LandingPageForm;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport LeadSourceActions from '~/actions/lead_source_actions';\nimport LeadSourceStore from '~/stores/lead_source_store';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\n\nclass LeadSourceForm extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n\n this.state = {\n errors: {},\n submitting: false,\n source: {\n id: null,\n name: '',\n },\n };\n }\n\n componentDidMount() {\n // listen to leadSourceStoreListener changes\n this.leadSourceStoreListener = LeadSourceStore.addListener(this.onLeadSourceStoreChange);\n }\n\n componentWillUnmount() {\n // remove listener to LeadSourceStore changes on Unmount\n if (this.leadSourceStoreListener) this.leadSourceStoreListener.remove();\n }\n\n handleNameChange = (e) => {\n e.preventDefault();\n\n const { value } = e.target;\n\n this.setState((prevState) => ({\n ...prevState,\n source: {\n ...prevState.source,\n name: value,\n },\n }));\n };\n\n handleFormSubmit(e) {\n e.preventDefault();\n\n const { source } = this.state;\n\n this.setState({ submitting: true }, () => {\n LeadSourceActions.createLeadSource({ ...source });\n });\n }\n\n // when LeadSourceStore changes...\n onLeadSourceStoreChange() {\n const leadSourceStoreState = LeadSourceStore.getState();\n const {\n source, lastLeadSourceStoreAction, errors, submitting,\n } = leadSourceStoreState;\n\n let nextState = { leadSourceStoreState };\n\n if (lastLeadSourceStoreAction === 'createLeadSourceDone') {\n GlobalContainer.notify(`Source \"${source.name}\" created.`, 'success');\n nextState = { source: { id: null, name: '' }, errors, submitting };\n }\n\n if (lastLeadSourceStoreAction === 'createLeadSourceFail') {\n nextState = { ...nextState, errors, submitting };\n }\n\n this.setState(nextState);\n }\n\n render() {\n const { source, errors, submitting } = this.state;\n\n return (\n \n \n
\n );\n }\n}\n\nLeadSourceForm.defaultProps = {};\n\nLeadSourceForm.propTypes = {};\n\nexport default LeadSourceForm;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Link, withRouter } from 'react-router-dom';\nimport { Input } from 'reactstrap';\nimport classNames from 'classnames';\nimport update from 'immutability-helper';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport ClickableTooltip from '~/components/effects/clickable_tooltip';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nimport TeamMlsActions from '~/actions/team_mls_actions';\nimport TeamMlsStore from '~/stores/team_mls_store';\nimport GlobalContainer from '~/components/global_container';\nimport ImportersSelect from '~/components/forms/importers_select';\n\nclass MlsConfigurationForm extends React.Component {\n constructor(props) {\n super(props);\n\n const { teamMlsId } = props;\n\n this.state = {\n loadingTeamMls: !!teamMlsId,\n teamMls: {},\n updating: false,\n errors: {},\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n const { teamMlsId } = this.props;\n\n // listen to TeamMlsStore change events and store reference\n this.listener = TeamMlsStore.addListener(\n this.onTeamMlsStoreChange,\n );\n\n if (teamMlsId) {\n TeamMlsActions.loadTeamMls(\n teamMlsId,\n this.onTeamMlsLoad,\n this.onTeamMlsLoadFail,\n );\n }\n }\n\n componentWillUnmount() {\n if (this.listener) this.listener.remove();\n }\n\n handleUpdateClick(e) {\n e.preventDefault();\n\n const { teamMls } = this.state;\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n TeamMlsActions.updateTeamMls(teamMls);\n } else {\n this.setState({ errors });\n }\n }\n\n onTeamMlsStoreChange() {\n const mlsState = TeamMlsStore.getState();\n const {\n teamMls, updating, lastTeamMlsStoreAction, errors,\n } = mlsState;\n\n const newState = {\n teamMls,\n updating,\n errors,\n };\n\n if (lastTeamMlsStoreAction === 'updateTeamMlsDone') {\n GlobalContainer.notify(\n 'Your Configuration for Multiple Listing Service were saved.',\n );\n }\n\n this.setState(newState);\n }\n\n onTeamMlsLoad(teamMls) {\n this.setState({\n loadingTeamMls: false,\n teamMls,\n });\n }\n\n onTeamMlsLoadFail() {\n this.setState({\n loadingTeamMls: false,\n teamMls: {},\n });\n }\n\n setFormField(name, val) {\n this.setState({\n teamMls: update(this.state.teamMls, { [name]: { $set: val } }),\n });\n }\n\n validate() {\n const errors = {};\n const { teamMls } = this.state;\n\n if (!teamMls.importers_id) {\n errors.importers_id = 'Is invalid';\n }\n\n if (!teamMls.api_key) {\n errors.api_key = 'Is invalid';\n }\n\n return errors;\n }\n\n renderSearchQueryForm() {\n const {\n loadingTeamMls, teamMls, updating, errors,\n } = this.state;\n const { history } = this.props;\n\n if (loadingTeamMls) {\n return (\n {errors.name &&
\n \n
\n );\n }\n\n return (\n <>\n {teamMls.mls_name}
\n\n\n \n Learn how to get an API key\n {' '}\n \n here.\n \n \n )}\n placement=\"bottom\"\n target=\"data-source-label\"\n />\n\n \n Learn how to get an API key\n {' '}\n \n here.\n \n \n )}\n placement=\"bottom\"\n target=\"api-key-label\"\n />\n
\n\n \n \n Select Data Source\n \n this.setFormField(\n 'importers_id',\n val ? val.value : '',\n )}\n />\n
\n \n \n API Key\n \n this.setFormField('api_key', e.target.value)}\n />\n
\n \n
\n\n \n
\n \n this.setFormField(\n 'preferred_phone',\n e && e.target.checked,\n )}\n />\n\n \n \n Map Preferred Phone to Cell Phone if Cell Phone is\n not available\n \n \n
\n \n {updating ? (\n \n \n Update\n \n )}\n
\n \n );\n }\n\n render() {\n const data_uri = GlobalContainer.productUri('/data');\n\n return (\n \n
\n );\n }\n}\n\nMlsConfigurationForm.defaultProps = {\n teamMlsId: null,\n};\n\nMlsConfigurationForm.propTypes = {\n teamMlsId: PropTypes.string,\n history: PropTypes.shape({}).isRequired,\n};\n\nexport default withRouter(MlsConfigurationForm);\n","import React from 'react';\nimport classNames from 'classnames';\nimport {\n Form,\n FormGroup,\n Input,\n Label,\n} from 'reactstrap';\nimport { PropTypes } from 'prop-types';\nimport PhoneInput from 'react-phone-input-2';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport APIRequest from '~/lib/api_request';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nclass SmsNumberEditForm extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n errors: {},\n phoneNumber: props.phoneNumber,\n };\n }\n\n _handleFormSubmit = (e) => {\n e.preventDefault();\n\n const { phoneNumber } = this.state;\n const { onPhoneSelect } = this.props;\n\n APIRequest.patch({\n resource: `/v1/sms_numbers/${phoneNumber.id}`,\n data: {\n id: phoneNumber.id,\n forward_number: phoneNumber.forward_number,\n },\n }).end((err, res) => {\n if (res.body.errors) {\n this.setState({ errors: res.body.errors });\n } else {\n this.setState({ errors: {} }, () => {\n onPhoneSelect(phoneNumber);\n GlobalContainer.notify('Forwarding number updated');\n });\n }\n });\n };\n\n handleButtonRelease = (e) => {\n e.preventDefault();\n\n const { phoneNumber } = this.state;\n const { onPhoneSelect, loadReleasedNumbers } = this.props;\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to release this BK service number?',\n callback: (ok) => {\n if (ok) {\n APIRequest.delete({ resource: `/v1/sms_numbers/${phoneNumber.id}` })\n .end((err, res) => {\n onPhoneSelect({});\n loadReleasedNumbers();\n GlobalContainer.notify('BK Service Number released');\n });\n }\n },\n });\n };\n\n render() {\n const { phoneNumber, errors } = this.state;\n\n return (\n \n );\n }\n}\n\nSmsNumberEditForm.defaultProps = {\n onPhoneSelect: () => false,\n};\n\nSmsNumberEditForm.propTypes = {\n phoneNumber: PropTypes.shape({}).isRequired,\n onPhoneSelect: PropTypes.func,\n};\n\nexport default SmsNumberEditForm;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport TriggerConditionForm from './trigger_condition_form';\nimport brokerbit from '~/lib/brokerbit';\n\nclass TriggerCondition extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n handleConditionFormChange(formState) {\n const { conditionIdx, updateCondition } = this.props;\n\n updateCondition(conditionIdx, formState);\n }\n\n handleConditionDelete(e) {\n e.preventDefault();\n\n const { conditionIdx, deleteCondition } = this.props;\n\n brokerbit.confirmBox({\n message: 'Are you sure you want to delete this condition?',\n callback: (ok) => {\n if (ok) deleteCondition(conditionIdx);\n },\n });\n }\n\n validate() {\n this.conditionForm.validate();\n }\n\n render() {\n const { condition, audience, conditionIdx } = this.props;\n\n return (\n \n \n
\n\n {this.renderSearchQueryForm()}\n
\n \n \n \n \n Manage MLS Data Source\n
\n
\n\n {this.renderSearchQueryForm()}\n \n this.conditionForm = el}\n audience={audience}\n condition={condition}\n onChange={this.handleConditionFormChange}\n />\n
\n );\n }\n}\n\nTriggerCondition.defaultProps = {\n condition: {},\n audience: '',\n conditionIdx: null,\n updateCondition: () => false,\n deleteCondition: () => false,\n};\n\nTriggerCondition.propTypes = {\n condition: PropTypes.shape({}),\n audience: PropTypes.string,\n conditionIdx: PropTypes.number,\n updateCondition: PropTypes.func,\n deleteCondition: PropTypes.func,\n};\n\nexport default TriggerCondition;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport update from 'immutability-helper';\nimport { Link } from 'react-router-dom';\n\nimport Select from '~/components/forms/select';\nimport { SourceSelect } from '~/components/forms/lead_fields';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\n\nconst leadsFieldOptions = [\n { value: 'source', label: 'Source' },\n { value: 'appointment', label: 'Date: Appointment' },\n { value: 'birthday', label: 'Date: Birthday' },\n { value: 'license_exp_date', label: 'Date: License Expiration' },\n { value: 'due_date_at', label: 'Date: Task Due Date' },\n { value: 'last_activity_at', label: 'Date: Last Activity' },\n { value: 'appointments_logged', label: 'Date: Appointment Logged' },\n { value: 'created_at', label: 'Date: Contact Created' },\n];\n\nconst teamFieldOptions = [\n { value: 'source', label: 'Source' },\n { value: 'birthday', label: 'Date: Birthday' },\n { value: 'joined_at', label: 'Date: Joined On' },\n { value: 'license_exp_date', label: 'Date: License Expiration' },\n { value: 'anniversary_month', label: 'Date: Anniversary' },\n { value: 'last_seen_at', label: 'Date: Last Team Member Sign In' },\n { value: 'due_date_at', label: 'Date: Task Due Date' },\n { value: 'last_activity_at', label: 'Date: Last Activity' },\n { value: 'created_at', label: 'Date: Contact Created' },\n];\n\nconst defaultOperatorOptions = [\n { value: 'is', label: 'is' },\n { value: 'is_not', label: 'is not' },\n];\n\nconst dateValueOptions = [\n { value: '1_day_prior', label: '1 Day Prior' },\n { value: '7_day_prior', label: '7 Days Prior' },\n { value: '1_month_prior', label: '1 Month Prior' },\n { value: 'today', label: 'Date' },\n { value: '1_day_after', label: '1 Day Afterward' },\n { value: '7_day_after', label: '7 Days Afterward' },\n { value: '1_month_after', label: '1 Month Afterward' },\n];\n\nconst dateFields = ['appointment', 'birthday', 'joined_at', 'license_exp_date', 'anniversary_month',\n 'last_seen_at', 'due_date_at', 'last_activity_at', 'appointments_logged', 'created_at'];\n\nclass TriggerConditionForm extends React.Component {\n constructor(props) {\n super(props);\n\n const { condition } = props;\n\n this.state = {\n errors: {},\n condition: {\n field: condition.field || '',\n operator: condition.operator || '',\n value: condition.value || '',\n },\n };\n\n autoBind(this);\n }\n\n operatorOptions() {\n const { condition } = this.state;\n\n let options;\n\n if (condition.field === 'source') {\n options = [\n { value: 'is', label: 'is' },\n { value: 'is_not', label: 'is not' },\n ];\n } else if (dateFields.includes(condition.field)) {\n options = [\n { value: 'is', label: 'on' },\n ];\n } else {\n options = defaultOperatorOptions;\n }\n\n return options;\n }\n\n fieldOptions() {\n const { audience } = this.props;\n\n let options;\n\n switch (audience) {\n case 'leads':\n options = leadsFieldOptions;\n break;\n case 'team':\n options = teamFieldOptions;\n break;\n }\n\n return _lodash.sortBy(options, 'label');\n }\n\n dateValueOptions() {\n const { condition } = this.state;\n\n let options;\n\n if (condition.field === 'joined_at' || condition.field === 'last_seen_at'\n || condition.field === 'last_activity_at' || condition.field === 'appointments_logged'\n || condition.field === 'created_at') {\n return options = [\n { value: 'today', label: 'Date' },\n { value: '1_day_after', label: '1 Day Afterward' },\n { value: '7_day_after', label: '7 Days Afterward' },\n { value: '1_month_after', label: '1 Month Afterward' },\n ];\n } if (condition.field === 'anniversary_month') {\n return options = [\n { value: 'today', label: 'Date' },\n ];\n }\n return options = dateValueOptions;\n }\n\n renderValueComponent() {\n const { condition, errors } = this.state;\n\n if (condition.field === 'source') {\n return (\n \n \n
\n \n
\n {errors.field &&
\n \n
\n {errors.operator &&
\n \n {this.renderValueComponent()}\n
\n \n );\n }\n}\n\nTriggerConditionForm.defaultProps = {\n condition: {},\n audience: '',\n onChange: () => false,\n};\n\nTriggerConditionForm.propTypes = {\n condition: PropTypes.shape({}),\n audience: PropTypes.string,\n onChange: PropTypes.func,\n};\n\nexport default TriggerConditionForm;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nclass TriggerConditionNew extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n addNewCondition() {\n this.props.addCondition();\n }\n\n render() {\n const { conditionsCount } = this.props;\n\n const buttonText = conditionsCount < 1 ? 'Add Condition' : 'Add Another Condition';\n\n return (\n {errors.value &&
\n \n
\n \n
\n \n
\n\n \n { currentTeam && abilities.manageCurrentTeam && (\n
\n \n
\n )}\n\n \n
\n \n
\n \n
\n My Landing Page
\nUse this in email signatures and any personal marketing. New leads will automatically add you as the referrer.
\n \n {personalLandingPageUrl}\n \n \n\n
\n \n { currentTeam && abilities.manageCurrentTeam && (\n
\n \n
\n )}\n\n \n
\n \n
\n \n
\n My Landing Page
\nUse this in email signatures and any personal marketing. New leads will automatically add you as the referrer.
\n \n {personalLandingPageUrl}\n \n \n\n \n
\n
\n );\n }\n\n if (leadSources.length === 0) {\n return You don't have the custom sources, please add...
;\n }\n\n return \n
\n\n {this.renderSourcesTable()}\n \n );\n }\n}\n\nListingLeadSources.defaultProps = {};\n\nListingLeadSources.propTypes = {};\n\nexport default ListingLeadSources;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport BlankPage from '~/components/pages/blank_page';\nimport FrontSideBar from '~/components/navigation/front_side_bar';\nimport ListingCampaignTriggers from './manage_campaign_triggers/listing_campaign_triggers';\n\nclass ManageCampaignTriggers extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n render() {\n const { currentTeam } = Rails.helpers;\n if (!currentTeam) return null;\n\n return (\n \n
\n \n
\n \n
\n );\n }\n\n return \n
\n );\n }\n}\n\nComposingCampaignTrigger.defaultProps = {\n triggerID: null,\n};\n\nComposingCampaignTrigger.propTypes = {\n triggerID: PropTypes.string,\n history: PropTypes.shape({}).isRequired,\n};\n\nexport default withRouter(ComposingCampaignTrigger);\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport CampaignTriggerActions from '~/actions/campaign_trigger_actions';\nimport CampaignTriggerStore from '~/stores/campaign_trigger_store';\nimport CampaignTriggersTable from './campaign_triggers_table';\n\nclass ListingCampaignTriggers extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loadingCampaignTriggers: false,\n campaignTriggers: [],\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.campaignTriggerStoreListener = CampaignTriggerStore.addListener(this.onCampaignTriggerStoreChange);\n\n CampaignTriggerActions.loadCampaignTriggers();\n }\n\n componentWillUnmount() {\n if (this.campaignTriggerStoreListener) this.campaignTriggerStoreListener.remove();\n }\n\n onCampaignTriggerStoreChange() {\n const campaignTriggerStoreState = CampaignTriggerStore.getState();\n const { loadingCampaignTriggers, campaignTriggers } = campaignTriggerStoreState;\n\n this.setState({\n loadingCampaignTriggers,\n campaignTriggers,\n });\n }\n\n deleteCampaignTrigger(trigger) {\n if (_lodash.isEmpty(trigger)) return;\n\n CampaignTriggerActions.deleteCampaignTrigger(trigger);\n }\n\n renderCampaignTriggersTable() {\n const { loadingCampaignTriggers, campaignTriggers } = this.state;\n\n if (loadingCampaignTriggers) {\n return (\n \n \n
\n\n {this.renderCampaignForm()}\n
\n \n \n Back To Triggers\n \n Smart Campaign Triggers\n
\n
\n\n {this.renderCampaignForm()}\n \n
\n );\n }\n\n if (campaignTriggers.length === 0) {\n return No smart campaign triggers, please add a new one trigger.
;\n }\n\n return (\n \n
\n );\n }\n}\n\nListingCampaignTriggers.defaultProps = {};\n\nListingCampaignTriggers.propTypes = {};\n\nexport default ListingCampaignTriggers;\n","import autoBind from 'react-autobind';\nimport React from 'react';\n\nimport BlankPage from '~/components/pages/blank_page';\nimport FrontSideBar from '~/components/navigation/front_side_bar';\nimport ListingCampaignsLibrary from './manage_campaigns_library/listing_campaigns_lib';\n\nclass ManageCampaignsLibrary extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n render() {\n const { currentTeam } = Rails.helpers;\n if (!currentTeam) return null;\n\n return (\n \n \n Smart Campaign Triggers\n
\n
\n {this.renderCampaignTriggersTable()}\n \n Smart Campaign Triggers\n \n \n
\n \n
\n \n
\n \n {campaign.description}\n
\n\n\n \n
\n
\n );\n }\n\n render() {\n return (\n <>\n \n
\n \n Showing\n {' '}\n {campaign_libraries.start}\n {' '}\n to\n {' '}\n {campaign_libraries.end}\n {' '}\n of\n {' '}\n {campaign_libraries.total_count}\n {' '}\n campaigns\n
\n \n { campaign_libraries.total_pages > 1\n && (\n \n )}\n
\n \n
\n );\n };\n\n renderMmsAttachment = () => {\n const { step } = this.props;\n\n if (!step.media_url) return null;\n\n return (\n \n \n \n
\n\n \n \n \n
\n \n \n
\n \n );\n };\n\n renderSms = () => {\n const { step } = this.props;\n\n return (\n \n \n
\n \n \n \n
\n );\n };\n\n renderTask = () => {\n const { step } = this.props;\n const ownerID = _lodash.isInteger(step.task_owner)\n ? step.task_owner.toString()\n : '';\n\n return (\n \n
\n );\n };\n\n renderAttachments() {\n const { step } = this.props;\n\n return step.attachments.map((f) => (\n \n
\n\n \n \n \n
\n\n \n Task Category:\n
\n\n \n Task Due Days:\n \n
\n \n \n \n
\n\n \n
\n \n Task Priority:\n
\n\n \n Task Status:\n
\n \n
\n \n
\n\n \n
\n \n \n Preview Attachment\n \n
\n \n \n
\n );\n }\n}\n\nCampaignPreviewStep.defaultProps = {\n step: {\n body: '',\n subject: '',\n },\n};\n\nCampaignPreviewStep.propTypes = {\n step: PropTypes.shape({\n action_type: PropTypes.string,\n body: PropTypes.string,\n subject: PropTypes.string,\n }),\n campaign: PropTypes.shape({}).isRequired,\n};\n\nexport default CampaignPreviewStep;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport update from 'immutability-helper';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { v4 as uuidv4 } from 'uuid';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nimport GlobalContainer from '~/components/global_container';\nimport CampaignLibraryActions from '~/actions/campaign_library_actions';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport CampaignStep from '~/components/pages/account/forms/campaign_form/campaign_step';\nimport CampaignStepNew from '~/components/pages/account/forms/campaign_form/campaign_step_new';\nimport ListingCampaignTypes from '../listing_campaign_types';\nimport CampaignLibraryStore from '~/stores/campaign_library_store';\n\nconst charsLimit = 1600;\nconst { newCampaignEngineFeatureEnabled } = Rails.helpers;\n\nclass CampaignLibraryForm extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n\n this.state = {\n stepsErrors: {},\n submitting: false,\n selectedCampaignTypeFilter: null,\n steps: [],\n errors: {},\n campaignForm: {\n id: null,\n name: '',\n description: '',\n new_engine: false,\n campaign_steps_attributes: [],\n },\n };\n\n const { campaign } = this.props;\n\n if (campaign) {\n this.state.campaignForm = this.buildCampaignFormState(campaign);\n this.state.selectedCampaignTypeFilter = campaign.campaign_type_id ? campaign.campaign_type_id : null;\n }\n\n this.stepInstances = [];\n }\n\n componentDidMount() {\n this.campaignStoreListener = CampaignLibraryStore.addListener(this.onCampaignComposeStoreChange);\n CampaignLibraryActions.loadCampaignTypes();\n }\n\n componentWillUnmount() {\n if (this.campaignStoreListener) this.campaignStoreListener.remove();\n }\n\n handleNameChange(e) {\n e.preventDefault();\n\n this.setState((prevState) => ({\n campaignForm: {\n ...prevState.campaignForm,\n name: e.target.value,\n },\n }));\n }\n\n handleDescriptionChange(e) {\n e.preventDefault();\n\n this.setState((prevState) => ({\n campaignForm: {\n ...prevState.campaignForm,\n description: e.target.value,\n },\n }));\n }\n\n handleEngineChange(e) {\n const { onCampaignStateChange } = this.props;\n\n this.setState((prevState) => ({\n campaignForm: {\n ...prevState.campaignForm,\n new_engine: e.target.checked,\n },\n }), () => {\n const { campaignForm } = this.state;\n\n onCampaignStateChange({ campaign: campaignForm });\n });\n }\n\n handleFormSubmit(e) {\n e.preventDefault();\n\n const { history } = this.props;\n const { campaignForm } = this.state;\n\n const isSaved = this.saveCampaign(campaignForm);\n const campaigns_uri = GlobalContainer.productUri('/campaign_libraries');\n\n if (isSaved) {\n GlobalContainer.notify('Campaign saved.', 'success');\n history.push({\n pathname: campaigns_uri,\n page: history.location.state?.page,\n });\n window.scrollTo(0, 0);\n }\n }\n\n onCampaignComposeStoreChange() {\n const { campaignTypes } = CampaignLibraryStore.getState();\n if (campaignTypes.length) {\n this.setState({ campaignTypes });\n }\n }\n\n ListingCampaignTypesOnChange(selectedOption) {\n const clickedOption = selectedOption ? selectedOption.value : '';\n const { campaignForm } = this.state;\n campaignForm.campaign_type_id = clickedOption;\n this.setState(\n { campaignForm, selectedCampaignTypeFilter: clickedOption },\n );\n }\n\n buildCampaignFormState(campaignProp) {\n if (!campaignProp) return null;\n\n return {\n id: campaignProp.id,\n name: campaignProp.name,\n description: campaignProp.description,\n new_engine: campaignProp.new_engine,\n campaign_steps_attributes: campaignProp.campaign_steps,\n };\n }\n\n rebuildStepOrder(steps) {\n const { campaignForm } = this.state;\n let position = 1;\n\n steps.forEach((step, idx) => {\n // intentionally mutate step position\n if (step._destroy === true) {\n step.position = null;\n return;\n }\n\n // intentionally mutate wait_time to zero if this is first step and old engine - this could be dangerous\n if (position === 1 && !campaignForm.new_engine) step.wait_time = 0;\n\n step.position = position;\n position += 1;\n });\n }\n\n addStep(stepForm = 'email', stepIdx) {\n const { campaignForm } = this.state;\n const { campaign_steps_attributes } = campaignForm;\n\n let defaultOnValue = 'mon-fri';\n let defaultAtValue = '09:00-12:00';\n let defaultWaitTime = 0;\n\n if (campaignForm.id && campaignForm.new_engine) {\n defaultOnValue = '*';\n }\n\n if (\n !campaignForm.id\n && campaignForm.new_engine\n && stepForm === 'task'\n ) {\n defaultAtValue = '09:00';\n }\n\n if (campaignForm.campaign_steps_attributes.length > 0) {\n defaultWaitTime = 86400 * 7; // 7 days\n }\n\n const newStep = {\n id: null,\n position: stepIdx + 1,\n action_type: stepForm,\n wait_time: defaultWaitTime,\n from: null,\n subject: '',\n body: '',\n cc_emails: '',\n attachment_ids: [],\n notification_task_assignment: true,\n at: defaultAtValue,\n on: defaultOnValue,\n uuid: uuidv4(),\n };\n\n if (stepForm === 'task') {\n newStep.task_name = 'Follow Up';\n newStep.task_category = 'follow_up';\n newStep.body = '';\n newStep.task_due_days = 0;\n newStep.task_owner = Rails.helpers.currentUser.id;\n newStep.task_priority = 'normal';\n newStep.task_status = 'to_do';\n newStep.notification_task_assignment = true;\n }\n\n campaign_steps_attributes.splice(newStep.position, 0, newStep);\n\n this.rebuildStepOrder(campaign_steps_attributes);\n\n this.setState({\n campaignForm: {\n ...campaignForm,\n campaign_steps_attributes,\n },\n });\n }\n\n updateStep(stepIdx, stepDataFragment) {\n const { campaignForm } = this.state;\n const updateStep = campaignForm.campaign_steps_attributes[stepIdx];\n\n const newState = update(this.state, {\n campaignForm: {\n campaign_steps_attributes: {\n $splice: [[stepIdx, 1, { ...updateStep, ...stepDataFragment }]],\n },\n },\n });\n\n this.setState(newState, () => {\n this.validateSmsBody(stepIdx);\n });\n }\n\n moveStep(dragIndex, hoverIndex) {\n const { campaignForm } = this.state;\n const dragStep = campaignForm.campaign_steps_attributes[dragIndex];\n\n const newState = update(this.state, {\n campaignForm: {\n campaign_steps_attributes: {\n $splice: [[dragIndex, 1], [hoverIndex, 0, dragStep]],\n },\n },\n });\n\n this.rebuildStepOrder(newState.campaignForm.campaign_steps_attributes);\n\n this.setState(newState);\n }\n\n deleteStep(stepIdx) {\n const { campaignForm } = this.state;\n const deleteStep = campaignForm.campaign_steps_attributes[stepIdx];\n\n const newState = update(this.state, {\n campaignForm: {\n campaign_steps_attributes: {\n $splice: [[stepIdx, 1, { ...deleteStep, _destroy: true }]],\n },\n },\n });\n\n this.rebuildStepOrder(newState.campaignForm.campaign_steps_attributes);\n\n this.setState(newState, () => {\n this.stepInstances = this.stepInstances.filter((el) => el.id !== stepIdx);\n });\n }\n\n validate(campaignForm) {\n const { name, description } = campaignForm;\n const { selectedCampaignTypeFilter, campaignTypes } = this.state;\n\n const errors = {};\n\n if (!name) {\n errors.name = \"Can't be empty\";\n }\n\n const campaignStepAttibutes = campaignForm.campaign_steps_attributes.filter((x, i) => !x._destroy);\n\n if (campaignStepAttibutes.length === 0) {\n errors.steps = \"Can't be empty\";\n }\n\n if (description && description.length > 400) {\n errors.description = 'Description must be at most 400 characters';\n }\n\n campaignStepAttibutes.forEach((stepAttributes, idx) => {\n if (stepAttributes.action_type === 'email' || stepAttributes.action_type === 'sms') {\n if (!stepAttributes.from) {\n errors.step_from = \"Can't be empty\";\n }\n\n if (stepAttributes.action_type === 'email' && !stepAttributes.subject) {\n errors.step_subject = \"Can't be empty\";\n }\n\n if (!stepAttributes.body) {\n errors.step_body = \"Can't be empty\";\n }\n }\n\n if (stepAttributes.action_type === 'sms' && stepAttributes.body && charsLimit < stepAttributes.body.length) {\n errors.body = 'You have exceeded your limit of maximum characters allowed';\n }\n });\n\n this.stepInstances.map((stepInstance) => {\n const { instance } = stepInstance;\n\n instance.validate();\n\n return null;\n });\n\n this.setState({ errors });\n\n return errors;\n }\n\n validateSmsBody(stepIdx) {\n const { campaignForm } = this.state;\n const { onCampaignStateChange } = this.props;\n\n const stepsErrors = {};\n\n campaignForm.campaign_steps_attributes.forEach((stepAttributes, idx) => {\n if (stepAttributes._destroy === true) return;\n\n if (stepAttributes.action_type === 'sms' && stepAttributes.body && charsLimit < stepAttributes.body.length) {\n stepsErrors.body = 'You have exceeded your limit of maximum characters allowed';\n }\n });\n\n this.setState({ stepsErrors });\n onCampaignStateChange({ validCampaign: _lodash.isEmpty(stepsErrors) });\n }\n\n saveCampaign(campaignForm) {\n const errors = this.validate(campaignForm);\n\n if (_lodash.size(errors) === 0) {\n if (_lodash.isNumber(campaignForm.id)) {\n CampaignLibraryActions.updateCampaign(campaignForm);\n }\n\n return true;\n }\n\n return false;\n }\n\n renderErrors() {\n const { errors } = this.state;\n\n if (errors.steps) {\n return (\n \n
\n \n {this.renderStepLabel()}\n
\n\n {step.action_type === 'email' && this.renderEmail()}\n {step.action_type === 'email' && this.renderAttachments()}\n {step.action_type === 'sms' && this.renderSms()}\n {step.action_type === 'task' && this.renderTask()}\n \n Can't save campaign without step.\n
\n );\n }\n\n if (errors.step_from || errors.step_subject || errors.step_body) {\n return (\n \n Fields "From", "Body" and "Subject" fields are required for Email/Text step.\n
\n );\n }\n\n return null;\n }\n\n renderCampaignSteps() {\n const { campaignForm } = this.state;\n const stepAttributes = campaignForm.campaign_steps_attributes;\n\n return stepAttributes.map((step, idx) => {\n if (step._destroy === true) return false;\n\n return (\n \n
\n )}\n\n {(currentUser.admin || newCampaignEngineFeatureEnabled) && (\n \n \n
\n )}\n\n \n this.handleEngineChange(e)}\n checked={campaignForm.new_engine}\n />\n \n {campaignForm.new_engine ? 'Disable' : 'Enable'}\n {' '}\n Campaigns 2.0\n \n
\n \n \n \n
\n\n {this.renderCampaignSteps()}\n\n { stepsCount === 0 && (\n \n
\n )}\n\n \n \n
\n )}\n \n \n Cancel and Go Back\n \n \n Save Campaign\n \n
\n \n );\n }\n}\n\nCampaignLibraryForm.defaultProps = {\n campaign: null,\n validCampaign: true,\n onCampaignStateChange: () => {},\n};\n\nCampaignLibraryForm.propTypes = {\n history: PropTypes.shape({}).isRequired,\n campaign: PropTypes.shape({}),\n validCampaign: PropTypes.bool,\n onCampaignStateChange: PropTypes.func,\n};\n\nexport default CampaignLibraryForm;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Link, withRouter } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport GlobalContainer from '~/components/global_container';\nimport CampaignLibraryActions from '~/actions/campaign_library_actions';\nimport CampaignForm from './campaign_library_form';\n\nclass ComposingCampaignLibrary extends React.Component {\n constructor(props) {\n super(props);\n\n const { campaignID } = props;\n\n this.state = {\n loadingCampaign: !!campaignID,\n validCampaign: true,\n campaign: null,\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n const { campaignID } = this.props;\n\n if (campaignID) {\n CampaignLibraryActions.loadCampaign(campaignID, this.onCampaignLoad);\n }\n }\n\n onCampaignLoad(campaign) {\n this.setState({\n loadingCampaign: false,\n campaign,\n });\n }\n\n onCampaignStateChange(stateChange) {\n this.setState(stateChange);\n }\n\n renderCampaignForm() {\n const {\n loadingCampaign, campaign, validCampaign,\n } = this.state;\n\n const { history } = this.props;\n\n if (loadingCampaign) {\n return (\n \n
\n );\n }\n\n return (\n \n
\n );\n }\n}\n\nComposingCampaignLibrary.defaultProps = {\n campaignID: null,\n};\n\nComposingCampaignLibrary.propTypes = {\n campaignID: PropTypes.string,\n history: PropTypes.shape({}).isRequired,\n};\n\nexport default withRouter(ComposingCampaignLibrary);\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport BlankPage from '~/components/pages/blank_page';\nimport FrontSideBar from '~/components/navigation/front_side_bar';\nimport ComposingCampaignLibrary from './composing_campaign_library';\n\nclass EditCampaignLibrary extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n }\n\n render() {\n const { currentTeam } = Rails.helpers;\n if (!currentTeam) return null;\n\n const { match } = this.props;\n\n return (\n \n \n
\n\n {this.renderCampaignForm()}\n
\n \n \n \n Cancel and Go Back\n \n \n Save Campaign\n \n \n \n Compose a Campaign\n \n
\n\n {this.renderCampaignForm()}\n \n
\n \n
\n \n
\n );\n }\n\n if (_lodash.isEmpty(campaign_libraries)) {\n return There are no campaigns. Check again later.
;\n }\n\n return (\n \n
\n );\n }\n}\n\nListingCampaignsLibrary.defaultProps = {};\n\nListingCampaignsLibrary.propTypes = {};\n\nexport default ListingCampaignsLibrary;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { PropTypes } from 'prop-types';\nimport { Link, withRouter } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport GlobalContainer from '~/components/global_container';\nimport CampaignLibraryActions from '~/actions/campaign_library_actions';\nimport CopyCampaignLibraryModal from '~/components/modals/copy_campaign_library_modal';\nimport CampaignPreviewStep from './campaign_preview_step';\n\nclass PreviewCampaign extends React.Component {\n constructor(props) {\n super(props);\n\n const { campaignID } = props;\n\n this.state = {\n loadingCampaign: !!campaignID,\n campaign: null,\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n const { campaignID } = this.props;\n\n if (campaignID) {\n CampaignLibraryActions.loadCampaign(campaignID, this.onCampaignLoad);\n }\n }\n\n onCampaignLoad(campaign) {\n this.setState({\n loadingCampaign: false,\n campaign,\n });\n }\n\n handleCopyClick = (e) => {\n e.preventDefault();\n\n const { campaign } = this.state;\n\n ReactDOM.render(\n \n
\n\n {this.renderCampaignsTable()}\n \n Campaign Library\n
\n\n
\n \n
\n \n
\n \n Your Campaigns\n \n \n
\n );\n }\n\n const campaign_libraries_uri = GlobalContainer.productUri('/campaign_libraries');\n\n return (\n <>\n \n Campaign: \n {' '}\n {campaign.name}\n
\n\n {this.renderCampaignSteps()}\n\n \n \n Back to the Library\n \n \n
\n \n );\n }\n\n render() {\n const { history } = this.props;\n const campaign_libraries_uri = GlobalContainer.productUri('/campaign_libraries');\n\n return (\n \n
\n );\n }\n}\n\nPreviewCampaign.defaultProps = {\n campaignID: null,\n};\n\nPreviewCampaign.propTypes = {\n campaignID: PropTypes.string,\n history: PropTypes.shape({}).isRequired,\n};\n\nexport default withRouter(PreviewCampaign);\n","import React from 'react';\n\nimport BlankPage from '~/components/pages/blank_page';\nimport FrontSideBar from '~/components/navigation/front_side_bar';\nimport DataCore from './data/data_core';\n\nclass ManageData extends React.Component {\n render() {\n const { currentTeam } = Rails.helpers;\n if (!currentTeam) return null;\n\n return (\n \n \n
\n\n {this.renderCampaign()}\n
\n \n \n \n Back to the Library\n \n \n \n\n Campaign Library\n
\n
\n\n {this.renderCampaign()}\n \n
\n \n
\n \n
\n \n
\n Data
\n\n\n
\n \n
\n \n
\n \n
\n \n
\n
\n )\n }\n \n );\n }\n\n render() {\n const { currentTeam, currentUser } = Rails.helpers;\n const { loadingReleasedNumbers, numbers } = this.state;\n const { twilioProfileFeatureEnabled } = Rails.helpers;\n\n return (\n Phone Number
\n\n
\n \n
\n \n
\n \n
\n {twilioProfileFeatureEnabled && (currentUser.role.name === 'admin' || currentUser.admin)\n && (\n \n
\n \n {this.renderSmsForm()}\n
\n \n
\n )}\n \n
\n \n
\n Register for Verified Texting & Calling
\n\n
No Released Phone Numbers
\n );\n }\n\n return (\n\n
\n );\n }\n\n render() {\n return (\n \n \n \n
\n
\n | BrokerKit number | \nForwarding number | \nDate released | \n\n |
|---|---|---|---|
| {LeadHelpers.nationalFormatPhoneNumber(el.service_number)} | \n{LeadHelpers.nationalFormatPhoneNumber(el.forward_number)} | \n{Moment(el.deleted_at).format('LL')} | \n\n \n Request to Restore\n \n | \n
\n
\n );\n }\n}\n\nReleasedPhoneNumbers.defaultProps = {\n loading: true,\n numbers: [],\n loadReleasedNumbers: () => false,\n};\n\nReleasedPhoneNumbers.propTypes = {\n loading: PropTypes.bool,\n numbers: PropTypes.arrayOf(PropTypes.shape({})),\n loadReleasedNumbers: PropTypes.func,\n};\n\nexport default ReleasedPhoneNumbers;\n","import AppDispatcher from '~/dispatchers/app_dispatcher';\nimport APIRequest from '~/lib/api_request';\nimport BusinessContactsActionTypes from '~/types/business_contacts_action_types';\n\nlet createContactsRequest;\nlet updateContactsRequest;\n\nconst BusinnessContactsActions = {\n createContacts(contacts, tabName = null) {\n APIRequest.abort(createContactsRequest);\n\n AppDispatcher.dispatch({\n type: BusinessContactsActionTypes.CREATE_BUSINESS_CONTACT,\n contacts,\n });\n\n createContactsRequest = APIRequest.post({\n resource: '/v1/business_contacts',\n data: { contacts },\n });\n\n createContactsRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: BusinessContactsActionTypes.CREATE_BUSINESS_CONTACT_FAIL,\n error,\n });\n\n return;\n }\n\n AppDispatcher.dispatch({\n type: BusinessContactsActionTypes.CREATE_BUSINESS_CONTACT_DONE,\n contacts: response.body,\n tabName,\n });\n });\n },\n\n updateContacts(contacts, tabName = null) {\n APIRequest.abort(updateContactsRequest);\n\n AppDispatcher.dispatch({\n type: BusinessContactsActionTypes.UPDATE_BUSINESS_CONTACT,\n contacts,\n });\n\n updateContactsRequest = APIRequest.put({\n resource: '/v1/business_contacts',\n data: { contacts },\n });\n\n updateContactsRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: BusinessContactsActionTypes.UPDATE_BUSINESS_CONTACT_FAIL,\n error,\n });\n\n return;\n }\n\n AppDispatcher.dispatch({\n type: BusinessContactsActionTypes.UPDATE_BUSINESS_CONTACT_DONE,\n contacts: response.body,\n tabName,\n });\n });\n },\n};\n\nexport default BusinnessContactsActions;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport classNames from 'classnames';\nimport PhoneInput from 'react-phone-input-2';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport isMobilePhone from 'validator/lib/isMobilePhone';\nimport isEmail from 'validator/lib/isEmail';\n\nimport BusinessContactsActions from '~/actions/business_contacts_actions';\nimport BusinessContactsStore from '~/stores/business_contacts_store';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport JobPositionSelect from '~/components/forms/job_position_select';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport ErrorAlert from '~/components/shared/error_alert';\n\nclass BusinessContactsTab extends React.Component {\n constructor(props) {\n super(props);\n\n const { authorized_representative_1, authorized_representative_2 } = this.props;\n const representative_1 = authorized_representative_1;\n const representative_2 = authorized_representative_2;\n\n this.state = {\n errors: {},\n creating: false,\n saving: false,\n no_second_representative: _lodash.isEmpty(representative_2),\n authorized_representative_1: {\n first_name: representative_1.first_name || '',\n last_name: representative_1.last_name || '',\n email: representative_1.email || '',\n business_title: representative_1.business_title || '',\n job_position: representative_1.job_position || '',\n phone_number: representative_1.phone_number || '',\n },\n authorized_representative_2: {\n first_name: representative_2.first_name || '',\n last_name: representative_2.last_name || '',\n email: representative_2.email || '',\n business_title: representative_2.business_title || '',\n job_position: representative_2.job_position || '',\n phone_number: representative_2.phone_number || '',\n },\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n // listen to BusinessContactsStore change events and store reference\n this.listener = BusinessContactsStore.addListener(this.onBusinessContactsStoreChange);\n }\n\n componentWillUnmount() {\n if (this.listener) this.listener.remove();\n }\n\n onBusinessContactsStoreChange() {\n const {\n errors,\n creating,\n saving,\n authorized_representative_1,\n authorized_representative_2,\n lastBusinessContactsStoreAction,\n tabName,\n } = BusinessContactsStore.getState();\n\n const { setTab } = this.props;\n\n let newState = {\n errors,\n creating,\n saving,\n };\n\n if (lastBusinessContactsStoreAction === 'createContactsDone'\n || lastBusinessContactsStoreAction === 'updateContactsDone') {\n GlobalContainer.notify('Your Business Contacts was saved.');\n newState = { ...newState, authorized_representative_1, authorized_representative_2 };\n } else if (lastBusinessContactsStoreAction === 'createContactsFail'\n || lastBusinessContactsStoreAction === 'updateContactsFail') {\n newState.submitError = errors || 'Failed to save Business Contact.';\n }\n\n if (saving || creating) newState.submitError = null;\n this.setState(newState);\n setTimeout(() => {\n if (tabName) setTab(tabName);\n }, 0);\n }\n\n onCreateClick(e, tabName) {\n e.preventDefault();\n\n const errors = this.validate();\n\n const { no_second_representative, authorized_representative_1, authorized_representative_2 } = this.state;\n const data = {\n no_second_representative,\n authorized_representative_1: { ...authorized_representative_1 },\n authorized_representative_2: { ...(!no_second_representative && authorized_representative_2) },\n };\n\n if (_lodash.size(errors) === 0) {\n BusinessContactsActions.createContacts(data, tabName);\n } else {\n this.setState({ errors });\n }\n }\n\n onSaveClick(e, tabName) {\n e.preventDefault();\n\n const errors = this.validate();\n\n const { no_second_representative, authorized_representative_1, authorized_representative_2 } = this.state;\n const data = {\n no_second_representative,\n authorized_representative_1: { ...authorized_representative_1 },\n authorized_representative_2: { ...(!no_second_representative && authorized_representative_2) },\n };\n\n if (_lodash.size(errors) === 0) {\n BusinessContactsActions.updateContacts(data, tabName);\n } else {\n this.setState({ errors });\n }\n }\n\n setFormField(model, field, value) {\n this.setState((prevState) => ({\n [model]: {\n ...prevState[model],\n [field]: value,\n },\n }));\n }\n\n validate() {\n const { no_second_representative, authorized_representative_1, authorized_representative_2 } = this.state;\n\n const errors = {};\n\n if (!authorized_representative_1.first_name) {\n errors.first_name1 = 'Is invalid';\n }\n\n if (!authorized_representative_1.last_name) {\n errors.last_name1 = 'Is invalid';\n }\n\n if (!authorized_representative_1.business_title) {\n errors.business_title1 = 'Is invalid';\n }\n\n if (!authorized_representative_1.job_position) {\n errors.job_position1 = 'Is invalid';\n }\n\n if (!authorized_representative_1.phone_number || !isMobilePhone(authorized_representative_1.phone_number, ['en-US'])) {\n errors.phone_number1 = 'Is invalid';\n }\n\n if (!authorized_representative_1.email || !isEmail(authorized_representative_1.email)) {\n errors.email1 = 'Is invalid';\n }\n\n if (!no_second_representative) {\n if (!authorized_representative_2.first_name) {\n errors.first_name2 = 'Is invalid';\n }\n\n if (!authorized_representative_2.last_name) {\n errors.last_name2 = 'Is invalid';\n }\n\n if (!authorized_representative_2.business_title) {\n errors.business_title2 = 'Is invalid';\n }\n\n if (!authorized_representative_2.job_position) {\n errors.job_position2 = 'Is invalid';\n }\n\n if (!authorized_representative_2.phone_number || !isMobilePhone(authorized_representative_2.phone_number, ['en-US'])) {\n errors.phone_number2 = 'Is invalid';\n }\n\n if (!authorized_representative_2.email || !isEmail(authorized_representative_2.email)) {\n errors.email2 = 'Is invalid';\n }\n }\n\n return errors;\n }\n\n renderAuthorizedRepresentative1(disableStatus) {\n const { errors, authorized_representative_1 } = this.state;\n\n return (\n <>\n Released Phone Numbers
\n\n When you release a phone number, we will reserve that number for you\n for 10 days in case you need it back. Please contact support to\n restore the phone number.\n
\n {this.renderRealeasedNumber()}\nAuthorized Representative #1
\n\n
\n\n \n \n this.setFormField('authorized_representative_1', 'first_name', val.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.first_name1 })}\n disabled={disableStatus}\n />\n
\n\n \n \n this.setFormField('authorized_representative_1', 'last_name', val.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.last_name1 })}\n disabled={disableStatus}\n />\n
\n \n
\n\n \n \n this.setFormField('authorized_representative_1', 'email', val.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.email1 })}\n disabled={disableStatus}\n />\n
\n\n \n \n this.setFormField('authorized_representative_1', 'business_title', val.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.business_title1 })}\n disabled={disableStatus}\n />\n
\n \n
\n \n );\n }\n\n renderAuthorizedRepresentative2(disableStatus) {\n const { errors, authorized_representative_2 } = this.state;\n\n return (\n <>\n \n \n this.setFormField('authorized_representative_1', 'job_position', val ? val.value : '')}\n className={classNames({ 'has-error': !!errors.job_position1 })}\n disabled={disableStatus}\n />\n
\n\n \n \n this.setFormField('authorized_representative_1', 'phone_number', val)}\n disabled={disableStatus}\n />\n
\n Authorized Representative #2
\n\n
\n\n \n \n this.setFormField('authorized_representative_2', 'first_name', val.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.first_name2 })}\n disabled={disableStatus}\n />\n
\n\n \n \n this.setFormField('authorized_representative_2', 'last_name', val.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.last_name2 })}\n disabled={disableStatus}\n />\n
\n \n
\n\n \n \n this.setFormField('authorized_representative_2', 'email', val.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.email2 })}\n disabled={disableStatus}\n />\n
\n\n \n \n this.setFormField('authorized_representative_2', 'business_title', val.target.value)}\n className={classNames('form-control', { 'has-error': !!errors.business_title2 })}\n disabled={disableStatus}\n />\n
\n \n
\n \n );\n }\n\n render() {\n const {\n errors, no_second_representative, authorized_representative_1, saving, creating, submitError,\n } = this.state;\n const { bundle, status } = this.props;\n const disableStatus = _lodash.includes(['in-review', 'twilio-approved'], status.status_code);\n\n return (\n <>\n \n \n this.setFormField('authorized_representative_2', 'job_position', val ? val.value : '')}\n className={classNames({ 'has-error': !!errors.job_position2 })}\n disabled={disableStatus}\n />\n
\n\n \n \n this.setFormField('authorized_representative_2', 'phone_number', val)}\n disabled={disableStatus}\n />\n
\n Your authorized representative could be contacted to verify your identities. Please ensure they are contactable via email and phone.
\n\n \n \n );\n }\n}\n\nBusinessContactsTab.defaultProps = {\n bundle: {},\n status: {},\n business_information: {},\n address: {},\n authorized_representative_1: {},\n authorized_representative_2: {},\n};\n\nBusinessContactsTab.propTypes = {\n bundle: PropTypes.shape({}),\n status: PropTypes.shape({}),\n business_information: PropTypes.shape({}),\n address: PropTypes.shape({}),\n authorized_representative_1: PropTypes.shape({}),\n authorized_representative_2: PropTypes.shape({}),\n};\n\nexport default BusinessContactsTab;\n","import AppDispatcher from '~/dispatchers/app_dispatcher';\nimport APIRequest from '~/lib/api_request';\nimport BusinessProfilesActionTypes from '~/types/business_profiles_action_types';\n\nlet createProfileRequest;\nlet updateProfileRequest;\n\nconst BusinnessProfileActions = {\n createProfile(profile, tabName = null) {\n APIRequest.abort(createProfileRequest);\n\n AppDispatcher.dispatch({\n type: BusinessProfilesActionTypes.CREATE_BUSINESS_PROFILE,\n profile,\n });\n\n createProfileRequest = APIRequest.post({\n resource: '/v1/business_profile',\n data: { profile },\n });\n\n createProfileRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: BusinessProfilesActionTypes.CREATE_BUSINESS_PROFILE_FAIL,\n error,\n });\n\n return;\n }\n\n AppDispatcher.dispatch({\n type: BusinessProfilesActionTypes.CREATE_BUSINESS_PROFILE_DONE,\n profile: response.body,\n tabName\n });\n });\n },\n\n updateProfile(profile, tabName = null) {\n APIRequest.abort(updateProfileRequest);\n\n AppDispatcher.dispatch({\n type: BusinessProfilesActionTypes.UPDATE_BUSINESS_PROFILE,\n profile,\n });\n\n updateProfileRequest = APIRequest.put({\n resource: '/v1/business_profile',\n data: { profile },\n });\n\n updateProfileRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: BusinessProfilesActionTypes.UPDATE_BUSINESS_PROFILE_FAIL,\n error,\n });\n\n return;\n }\n\n AppDispatcher.dispatch({\n type: BusinessProfilesActionTypes.UPDATE_BUSINESS_PROFILE_DONE,\n profile: response.body,\n tabName\n });\n });\n },\n};\n\nexport default BusinnessProfileActions;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport isURL from 'validator/lib/isURL';\n\nimport BusinessProfileActions from '~/actions/business_profile_actions';\nimport BusinessProfileStore from '~/stores/business_profile_store';\nimport RegistrationTypeSelect from '~/components/forms/registration_type_select';\nimport BusinessTypeSelect from '~/components/forms/business_type_select';\nimport TwilioCountrySelect from '~/components/forms/twilio_country_select';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport ErrorAlert from '~/components/shared/error_alert';\n\nclass BusinessProfileTab extends React.Component {\n constructor(props) {\n super(props);\n\n const { address, business_information } = this.props;\n const {\n street, city, region, postal_code, iso_country,\n } = address;\n const {\n business_name, friendly_name,\n business_type, business_registration_identifier,\n business_registration_number, website_url,\n } = business_information;\n\n this.state = {\n errors: {},\n creating: false,\n saving: false,\n address: {\n street: street || '',\n city: city || '',\n region: region || '',\n postal_code: postal_code || '',\n iso_country: iso_country || '',\n },\n business_information: {\n business_name: business_name || '',\n friendly_name: friendly_name || '',\n business_type: business_type || '',\n business_registration_identifier: business_registration_identifier || '',\n business_registration_number: business_registration_number || '',\n website_url: website_url || '',\n },\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n // listen to BusinessProfileStore change events and store reference\n this.listener = BusinessProfileStore.addListener(this.onBusinessProfileStoreChange);\n }\n\n componentWillUnmount() {\n if (this.listener) this.listener.remove();\n }\n\n onBusinessProfileStoreChange() {\n const {\n errors,\n creating,\n saving,\n business_information,\n address,\n lastBusinessProfileStoreAction,\n tabName,\n } = BusinessProfileStore.getState();\n\n const { setTab } = this.props;\n\n let newState = {\n errors,\n creating,\n saving,\n };\n\n if (lastBusinessProfileStoreAction === 'createProfileDone'\n || lastBusinessProfileStoreAction === 'updateProfileDone') {\n GlobalContainer.notify('Your Business Profile was saved.');\n newState = { ...newState, business_information, address };\n } else if (lastBusinessProfileStoreAction === 'createProfileFail'\n || lastBusinessProfileStoreAction === 'updateProfileFail') {\n newState.submitError = errors || 'Failed to save Business Profile.';\n }\n\n if (tabName) setTab(tabName);\n if (saving || creating) newState.submitError = null;\n this.setState(newState);\n }\n\n onCreateClick(e, tabName) {\n e.preventDefault();\n\n const errors = this.validate();\n const { address, business_information } = this.state;\n const data = { ...address, ...business_information };\n\n if (_lodash.size(errors) === 0) {\n BusinessProfileActions.createProfile(data, tabName);\n } else {\n this.setState({ errors });\n }\n }\n\n onSaveClick(e, tabName) {\n e.preventDefault();\n\n const errors = this.validate();\n\n if (_lodash.size(errors) === 0) {\n const { address, business_information } = this.state;\n const data = { ...address, ...business_information };\n\n BusinessProfileActions.updateProfile(data, tabName);\n } else {\n this.setState({ errors });\n }\n }\n\n setFormField(model, field, value) {\n this.setState((prevState) => ({\n [model]: {\n ...prevState[model],\n [field]: value,\n },\n }));\n }\n\n validate() {\n const { business_information, address } = this.state;\n const errors = {};\n\n if (!business_information.business_name) {\n errors.business_name = 'Is invalid';\n }\n\n if (!business_information.friendly_name) {\n errors.friendly_name = 'Is invalid';\n }\n\n if (!business_information.business_type) {\n errors.business_type = 'Is invalid';\n }\n\n if (!business_information.business_registration_identifier) {\n errors.business_registration_identifier = 'Is invalid';\n }\n\n if (!business_information.business_registration_number) {\n errors.business_registration_number = 'Is invalid';\n }\n\n if (!business_information.website_url || !isURL(business_information.website_url)) {\n errors.website_url = 'Is invalid';\n }\n\n if (!address.street) {\n errors.street = 'Is invalid';\n }\n\n if (!address.city) {\n errors.city = 'Is invalid';\n }\n\n if (!address.region) {\n errors.region = 'Is invalid';\n }\n\n if (!address.postal_code) {\n errors.postal_code = 'Is invalid';\n }\n\n if (!address.iso_country) {\n errors.iso_country = 'Is invalid';\n }\n\n return errors;\n }\n\n render() {\n const {\n errors, business_information={}, address={}, saving, creating, submitError\n } = this.state;\n const { status } = this.props;\n const disableStatus = _lodash.includes(['in-review', 'twilio-approved'], status.status_code);\n const rejectedStatus = _lodash.includes(['twilio-rejected'], status.status_code);\n\n return (\n <>\n \n \n );\n }\n}\n\nBusinessProfileTab.defaultProps = {\n bundle: {},\n status: {},\n business_information: {},\n address: {},\n};\n\nBusinessProfileTab.propTypes = {\n bundle: PropTypes.shape({}),\n status: PropTypes.shape({}),\n business_information: PropTypes.shape({}),\n address: PropTypes.shape({}),\n};\n\nexport default BusinessProfileTab;\n","import React, { memo } from 'react';\nimport { PropTypes } from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport isEqual from 'lodash/isEqual';\n\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport CampaignUseCaseSelect from '~/components/forms/campaign_use_case_select';\nimport { MessagingServicePhoneNumbersSelect } from '~/components/forms/messaging_service_phone_numbers_select';\n\nconst TWILIO_A2P_PHONES_MAX_SIZE = process.env.TWILIO_A2P_PHONES_MAX_SIZE || 400;\n\nconst MessagingServiceItem = memo(({\n messaging_service,\n index,\n counter,\n errors,\n isDeleting,\n disableStatus,\n onUseCaseChange,\n onInputChange,\n onCheckboxChange,\n onPhoneNumbersChange,\n onDelete,\n renderCampaignStatus,\n}) => (\n\n
\n
\n), (prevProps, nextProps) => (\n prevProps.messaging_service.id === nextProps.messaging_service.id\n && prevProps.messaging_service.usecase === nextProps.messaging_service.usecase\n && prevProps.messaging_service.description === nextProps.messaging_service.description\n && prevProps.messaging_service.message_sample_one === nextProps.messaging_service.message_sample_one\n && prevProps.messaging_service.message_sample_two === nextProps.messaging_service.message_sample_two\n && prevProps.messaging_service.message_flow === nextProps.messaging_service.message_flow\n && prevProps.messaging_service.has_embedded_links === nextProps.messaging_service.has_embedded_links\n && prevProps.messaging_service.has_embedded_phone === nextProps.messaging_service.has_embedded_phone\n && isEqual(prevProps.messaging_service.sms_numbers, nextProps.messaging_service.sms_numbers)\n && prevProps.isDeleting === nextProps.isDeleting\n && prevProps.disableStatus === nextProps.disableStatus\n && isEqual(prevProps.errors, nextProps.errors)\n));\n\nMessagingServiceItem.defaultProps = {\n errors: {},\n};\n\nMessagingServiceItem.propTypes = {\n errors: PropTypes.shape({}),\n messaging_service: PropTypes.shape({}).isRequired,\n index: PropTypes.number.isRequired,\n counter: PropTypes.number.isRequired,\n isDeleting: PropTypes.bool.isRequired,\n disableStatus: PropTypes.bool.isRequired,\n onUseCaseChange: PropTypes.func.isRequired,\n onInputChange: PropTypes.func.isRequired,\n onCheckboxChange: PropTypes.func.isRequired,\n onPhoneNumbersChange: PropTypes.func.isRequired,\n onDelete: PropTypes.func.isRequired,\n renderCampaignStatus: PropTypes.func.isRequired,\n};\n\nexport default MessagingServiceItem;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport TwilioBundleActions from '~/actions/twilio_bundle_actions';\nimport TwilioBundleStore from '~/stores/twilio_bundle_store';\nimport TwilioVerifiedTextingActions from '~/actions/twilio_verified_texting_actions';\nimport TwilioVerifiedTextingStore from '~/stores/twilio_verified_texting_store';\nimport ClickableTooltip from '~/components/effects/clickable_tooltip';\n\nclass ProfileStatusTab extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n creating: false,\n errors: {},\n brand: {},\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n // listen to TwilioBundleStore change events and store reference\n this.listener = TwilioBundleStore.addListener(this.onTwilioBundleStoreChange);\n this.verifiedTextingListener = TwilioVerifiedTextingStore.addListener(this.onTwilioVerifiedTextingStoreChange);\n\n // Defer the dispatch to avoid nested dispatch\n setTimeout(() => {\n TwilioVerifiedTextingActions.loadVerifiedTexting();\n }, 0);\n }\n\n componentWillUnmount() {\n if (this.listener) this.listener.remove();\n if (this.verifiedTextingListener) this.verifiedTextingListener.remove();\n }\n\n onTwilioVerifiedTextingStoreChange() {\n const { brand } = TwilioVerifiedTextingStore.getState();\n this.setState({ brand });\n }\n\n onTwilioBundleStoreChange() {\n const { setTab } = this.props;\n const { creating, lastTwilioBundleStoreAction, error_message } = TwilioBundleStore.getState();\n\n const newState = {\n creating,\n };\n\n if (lastTwilioBundleStoreAction === 'createBundleDone') {\n GlobalContainer.notify('Your Business Profile was created.');\n setTab('business_profile');\n } else if (lastTwilioBundleStoreAction === 'createBundleFail') {\n let message = error_message || 'Failed to create Business Profile.';\n GlobalContainer.notify(message, 'error');\n }\n\n this.setState(newState);\n }\n\n onCreateClick(e) {\n e.preventDefault();\n\n TwilioBundleActions.createTwilioBundle();\n }\n\n renderStatus() {\n const { status } = this.props;\n\n if (!status) {\n return '-';\n }\n\n let text = '-';\n let icon = '';\n\n switch (status.status_code) {\n case 'draft':\n text = 'Draft';\n icon = \n Texting Use Case\n {' '}\n {counter}\n {' '}\n {renderCampaignStatus(messaging_service)}\n
\n\n\n \n onUseCaseChange(opt, messaging_service)}\n id={`use-case-select-${index}`}\n placeholder=\"Select an option\"\n clearable\n className={classNames('d-block', {\n 'has-error': errors[index]\n ? errors[index].usecase\n : '',\n })}\n disabled={isDeleting || disableStatus}\n />\n {errors[index] && errors[index].usecase && (\n
\n\n \n \n onInputChange(e, messaging_service, 'description')}\n id={`use-case-description-${index}`}\n placeholder=\"Enter the use case details for which you'll send the messages\"\n rows=\"5\"\n className={classNames('form-control', {\n 'has-error': errors[index]\n ? errors[index].description\n : '',\n })}\n disabled={isDeleting || disableStatus}\n />\n {errors[index] && errors[index].description && (\n
\n\n \n \n onInputChange(e, messaging_service, 'message_sample_one')}\n id={`message-sample-one-${index}`}\n placeholder=\"Enter the message sample content\"\n rows=\"5\"\n className={classNames('form-control', {\n 'has-error': errors[index]\n ? errors[index].message_sample_one\n : '',\n })}\n disabled={isDeleting || disableStatus}\n />\n {errors[index] && errors[index].message_sample_one && (\n
\n\n \n \n onInputChange(e, messaging_service, 'message_sample_two')}\n id={`message-sample-two-${index}`}\n placeholder=\"Enter the message sample content\"\n rows=\"5\"\n className={classNames('form-control', {\n 'has-error': errors[index]\n ? errors[index].message_sample_two\n : '',\n })}\n disabled={isDeleting || disableStatus}\n />\n {errors[index] && errors[index].message_sample_two && (\n
\n\n \n \n onInputChange(e, messaging_service, 'message_flow')}\n id={`message-flow-${index}`}\n placeholder=\"Enter the details regarding how the customers will opt-in\"\n rows=\"5\"\n className={classNames('form-control', {\n 'has-error': errors[index]\n ? errors[index].message_flow\n : '',\n })}\n disabled={isDeleting || disableStatus}\n />\n {errors[index] && errors[index].message_flow && (\n
\n\n \n
\n\n Message Contents
\n- \n
- \n \n\n \n
- \n \n\n \n
\n \n Numbers Available For Association\n
\n \n * Max\n {' '}\n {TWILIO_A2P_PHONES_MAX_SIZE}\n {' '}\n phone numbers\n \n \n onPhoneNumbersChange(opt, messaging_service)}\n value={messaging_service.sms_numbers}\n isInvalid={errors[index] && errors[index].sms_numbers}\n />\n {errors[index] && errors[index].sms_numbers && (\n
\n\n \n \n * Max\n {' '}\n {TWILIO_A2P_PHONES_MAX_SIZE}\n {' '}\n phone numbers\n \n \n
\n onDelete(e, messaging_service)}\n disabled={isDeleting}\n >\n {isDeleting ? (\n <>\n
\n \n
\n Texting Use Case\n {' '}\n {index + 1}\n :\n {' '}\n {text }\n {' '}\n {icon}\n
\n );\n });\n }\n\n render() {\n const { creating } = this.state;\n const { bundle, status } = this.props;\n\n return (\n <>\n Business Verification Submission Status
\n\n If you want to text from 5 or more numbers or see \"Caller Verified\" on your outbound calls, you will need to register your business.\n
\n\n {status.status_code === 'twilio-rejected' && status.status_text && (\n\n
\n )}\n\n {!_lodash.isEmpty(bundle) && (\n - \n {status.status_text.split(';').map((item, index) =>
- {item} ) }\n
\n \n \n
\n
\n )}\n\n | Business Profile Friendly Name | \n\n Status\n \n | \n \n Trust Score\n \n | \n
|---|---|---|
| {bundle.friendly_name || '-'} | \n\n {this.renderStatus()}\n {' '}\n \n {this.renderShakenStirStatus()}\n {' '}\n \n {this.renderVerifiedTextingStatus()}\n {' '}\n \n {this.renderMessagingServiceStatuses()}\n | \n {status.score || '-'} | \n
\n {_lodash.isEmpty(bundle) && (\n this.state.creating ? (\n \n ) : (\n \n )\n )}\n
\n \n );\n }\n}\n\nProfileStatusTab.defaultProps = {\n bundle: {},\n status: {},\n business_information: {},\n address: {},\n shaken_stir: {},\n brand: {},\n};\n\nProfileStatusTab.propTypes = {\n bundle: PropTypes.shape({}),\n status: PropTypes.shape({}),\n business_information: PropTypes.shape({}),\n address: PropTypes.shape({}),\n shaken_stir: PropTypes.shape({}),\n brand: PropTypes.shape({\n messaging_services: PropTypes.arrayOf(PropTypes.shape({\n status_code: PropTypes.string,\n })),\n }),\n};\n\nexport default ProfileStatusTab;\n","import { ReduceStore } from 'flux/utils';\nimport AppDispatcher from '~/dispatchers/app_dispatcher';\nimport TwilioProfileActionTypes from '~/types/twilio_profile_action_types';\n\nclass TwilioProfileStore extends ReduceStore {\n constructor() {\n super(AppDispatcher);\n }\n\n getInitialState() {\n return {\n bundle: null,\n status: null,\n business_information: null,\n address: null,\n lastTwilioProfileStoreAction: null,\n submitting: false,\n errors: {},\n twilio_errors: [],\n };\n }\n\n submitTwilioProfile(state, action) {\n const newState = { ...state };\n\n newState.lastTwilioProfileStoreAction = 'submitTwilioProfile';\n newState.submitting = true;\n\n return newState;\n }\n\n submitTwilioProfileDone(state, action) {\n const newState = { ...state };\n\n newState.lastTwilioProfileStoreAction = 'submitTwilioProfileDone';\n newState.submitting = false;\n newState.errors = {};\n newState.twilio_errors = [];\n\n return newState;\n }\n\n submitTwilioProfileFail(state, action) {\n const newState = { ...state };\n\n newState.submitting = false;\n newState.twilio_errors = action.error.response.body?.twilio_errors || [];\n newState.lastTwilioProfileStoreAction = 'submitTwilioProfileFail';\n\n return newState;\n }\n\n reduce(state, action) {\n switch (action.type) {\n case TwilioProfileActionTypes.SUBMIT_TWILIO_PROFILE:\n\n return this.submitTwilioProfile(state, action);\n case TwilioProfileActionTypes.SUBMIT_TWILIO_PROFILE_DONE:\n\n return this.submitTwilioProfileDone(state, action);\n case TwilioProfileActionTypes.SUBMIT_TWILIO_PROFILE_FAIL:\n\n return this.submitTwilioProfileFail(state, action);\n default:\n return state;\n }\n }\n}\n\nexport default new TwilioProfileStore();\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport APIRequest from '~/lib/api_request';\nimport TwilioProfileStore from '~/stores/twilio_profile_store';\nimport TwilioVerifiedTextingActions from '~/actions/twilio_verified_texting_actions';\nimport TwilioVerifiedTextingStore from '~/stores/twilio_verified_texting_store';\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport VerifiedTextingPlanSelect from '~/components/forms/verified_texting_plan_select';\nimport ErrorAlert from '~/components/shared/error_alert';\nimport MessagingServiceItem from './components/MessagingServiceItem';\n\nconst LENGTH_CRITERIA = {\n description: {\n min: process.env.A2P_DESCRIPTION_MIN,\n max: process.env.A2P_DESCRIPTION_MAX,\n },\n message_sample: {\n min: process.env.A2P_MSG_SAMPLE_MIN,\n max: process.env.A2P_MSG_SAMPLE_MAX,\n },\n message_flow: {\n min: process.env.A2P_MESSAGE_FLOW_MIN,\n max: process.env.A2P_MESSAGE_FLOW_MAX,\n },\n};\nconst confirmationMessage = 'Are you sure you want to delete this text use case?';\nconst deleteConfirmationMessage = `${confirmationMessage} This action cannot be undone.\n You will need to create a new text use case from scratch and will require going through the entire approval process again.`;\n\nclass VerifiedTextingTab extends React.Component {\n constructor(props) {\n super(props);\n\n this._isMounted = false;\n\n this.emptyMessagingService = {\n id: null,\n usecase: 'MIXED',\n description:\n 'Text notifications with updates to internal team members',\n message_sample_one:\n 'Hi Jane, this is a reminder that we have a training webinar on lead follow up tomorrow at 9 am at the link below. Look forward to seeing you there. Betsy https://zoom.us/j/123',\n message_sample_two:\n 'Hi Bob, your license needs to be renewed by June 30th. Please confirm you have completed that. Sara',\n has_embedded_links: true,\n has_embedded_phone: false,\n message_flow:\n 'Customers opt-in by creating their account with a click through agreement on the website and then add their phone numbers in that account to enable texting',\n sms_numbers: [],\n };\n\n this.state = {\n loading: false,\n creating: false,\n saving: false,\n submitting: false,\n twilio_errors: [],\n errors: {},\n error: false,\n brand: {\n id: null,\n plan: '',\n messaging_services: [],\n },\n deletingMessagingServiceIds: [],\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this._isMounted = true;\n\n // listen to TwilioProfileStore change events and store reference\n this.profile_listener = TwilioProfileStore.addListener(\n this.onTwilioProfileStoreChange,\n );\n\n // listen to TwilioVerifiedTextingStore change events and store reference\n this.brand_listener = TwilioVerifiedTextingStore.addListener(\n this.onTwilioVerifiedTextingStoreChange,\n );\n\n if (this._isMounted) {\n TwilioVerifiedTextingActions.loadVerifiedTexting();\n }\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n\n if (this.profile_listener) this.profile_listener.remove();\n if (this.brand_listener) this.brand_listener.remove();\n }\n\n handleAddAppToPersonCampaign(e) {\n e.preventDefault();\n\n const { brand } = this.state;\n\n brand.messaging_services.push({ ...this.emptyMessagingService });\n this.setState({ brand });\n }\n\n handleMessagingServiceDelete(e, messaging_service) {\n e.preventDefault();\n\n brokerbit.confirmBox({\n message: messaging_service?.messaging_service_id ? deleteConfirmationMessage : confirmationMessage,\n callback: (ok) => {\n if (ok) {\n if (messaging_service.messaging_service_id) {\n // If the messaging service has been submitted, make an API call to delete it\n this.setState((prevState) => ({\n deletingMessagingServiceIds: [\n ...prevState.deletingMessagingServiceIds,\n messaging_service.messaging_service_id,\n ],\n }));\n\n APIRequest.delete({\n resource: `/v1/twilio_verified_texting/${messaging_service.messaging_service_id}`,\n }).end((error, response) => {\n if (!error && response.status === 200) {\n this.setState((prevState) => ({\n brand: {\n ...prevState.brand,\n messaging_services: prevState.brand.messaging_services.filter(\n (ms) => ms.messaging_service_id !== messaging_service.messaging_service_id,\n ),\n },\n deletingMessagingServiceIds: prevState.deletingMessagingServiceIds.filter(\n (id) => id !== messaging_service.messaging_service_id,\n ),\n }), () => {\n GlobalContainer.notify('Texting Use Case Deleted', 'success');\n });\n } else {\n this.setState((prevState) => ({\n deletingMessagingServiceIds: prevState.deletingMessagingServiceIds.filter(\n (id) => id !== messaging_service.messaging_service_id,\n ),\n }), () => {\n GlobalContainer.notify(\n 'Error Deleting Texting Use Case, Please try again',\n 'error',\n );\n });\n }\n });\n } else {\n // If the messaging service hasn't been submitted, simply remove it from state\n this.setState((prevState) => ({\n brand: {\n ...prevState.brand,\n messaging_services: prevState.brand.messaging_services.filter(\n (ms) => ms !== messaging_service,\n ),\n },\n }));\n }\n }\n },\n });\n }\n\n handleInputChange = (e, messaging_service, field) => {\n e.preventDefault();\n this.updateMessagingService(messaging_service, field, e.target.value);\n };\n\n handleCheckboxChange = (e, messaging_service, field) => {\n this.updateMessagingService(messaging_service, field, e.target.checked);\n };\n\n handleTextSegments = (selectedOption) => {\n this.updateBrand(\n 'plan',\n selectedOption ? selectedOption.value || selectedOption : '',\n );\n };\n\n handleUseCaseChange = (opt, messaging_service) => {\n this.updateMessagingService(\n messaging_service,\n 'usecase',\n opt ? opt.value : '',\n );\n };\n\n handlePhoneNumbers = (opt, messaging_service) => {\n this.updateMessagingService(\n messaging_service,\n 'sms_numbers',\n opt,\n );\n };\n\n onTwilioProfileStoreChange() {\n const {\n errors,\n submitting,\n twilio_errors,\n lastTwilioProfileStoreAction,\n } = TwilioProfileStore.getState();\n\n const newState = {\n errors,\n submitting,\n twilio_errors,\n };\n\n if (lastTwilioProfileStoreAction === 'submitTwilioProfileDone') {\n GlobalContainer.notify('Your Profile was submitted.');\n } else if (lastTwilioProfileStoreAction === 'submitTwilioProfileFail') {\n newState.submitError = twilio_errors ? this.formatErrors(twilio_errors) : 'Failed to submit profile.';\n }\n\n if (submitting) newState.submitError = null;\n this.setState(newState);\n }\n\n onTwilioVerifiedTextingStoreChange() {\n const {\n brand,\n errors,\n error,\n creating,\n saving,\n loading,\n lastTwilioVerifiedTextingStoreAction,\n } = TwilioVerifiedTextingStore.getState();\n\n const newState = {\n brand,\n errors,\n error,\n creating,\n saving,\n loading,\n };\n\n if (\n lastTwilioVerifiedTextingStoreAction\n === 'createVerifiedTextingDone'\n || lastTwilioVerifiedTextingStoreAction\n === 'updateVerifiedTextingDone'\n ) {\n GlobalContainer.notify('Your changes was saved.');\n }\n\n this.setState(newState);\n }\n\n onCreateClick(e, tabName) {\n e.preventDefault();\n\n const errors = this.validate();\n\n const { brand } = this.state;\n const { setTab } = this.props;\n const data = { ...brand };\n\n if (_lodash.size(errors) === 0) {\n TwilioVerifiedTextingActions.createVerifiedTexting(data);\n\n if (tabName) {\n setTab(tabName);\n }\n } else {\n this.setState({ errors });\n }\n }\n\n onSaveClick(e, tabName) {\n e.preventDefault();\n\n const errors = this.validate();\n const { brand } = this.state;\n const { setTab } = this.props;\n const data = { ...brand };\n\n if (_lodash.size(errors) === 0) {\n TwilioVerifiedTextingActions.updateVerifiedTexting(data);\n\n if (tabName) {\n setTab(tabName);\n }\n } else {\n this.setState({ errors });\n }\n }\n\n onSubmitClick(e) {\n e.preventDefault();\n\n const errors = this.validate();\n const { brand } = this.state;\n const {\n business_information,\n address,\n authorized_representative_1,\n } = this.props;\n const data = { ...brand };\n\n if (\n !_lodash.isEmpty(business_information)\n && !_lodash.isEmpty(address)\n && !_lodash.isEmpty(authorized_representative_1)\n ) {\n if (_lodash.size(errors) === 0) {\n if (!brand.id) {\n TwilioVerifiedTextingActions.createVerifiedTexting(\n data,\n 'submitTwilioProfile',\n );\n } else {\n TwilioVerifiedTextingActions.updateVerifiedTexting(\n data,\n 'submitTwilioProfile',\n );\n }\n } else {\n this.setState({ errors });\n }\n } else {\n GlobalContainer.notify(\n 'Your Business Profile Cannot Be Submitted.',\n 'error',\n );\n }\n }\n\n updateBrand = (field, value) => {\n this.setState((prevState) => ({\n brand: {\n ...prevState.brand,\n [field]: value,\n },\n }));\n };\n\n updateMessagingService = (messaging_service, field, value) => {\n this.setState((prevState) => {\n const newMessagingServices = prevState.brand.messaging_services.map((ms) => {\n if (ms === messaging_service) {\n return {\n ...ms,\n [field]: value,\n };\n }\n return ms;\n });\n\n return {\n brand: {\n ...prevState.brand,\n messaging_services: newMessagingServices,\n },\n };\n });\n };\n\n formatErrors = (errorList) => errorList.map((obj) => Object.entries(obj).map(([key, value]) => `${key}: '${value}'`).join(', ')).join(' and ')\n\n isRecentlyUpdated = (messaging_service) => {\n if (!messaging_service.updated_at) return false;\n\n const updateTime = new Date(messaging_service.updated_at).getTime();\n const currentTime = new Date().getTime();\n const twoMinutes = 2 * 60 * 1000;\n\n return (currentTime - updateTime) < twoMinutes;\n };\n\n validate() {\n const errors = {};\n const { brand } = this.state;\n const messagingServices = brand.messaging_services;\n\n if (!brand.plan) {\n errors.plan = [\"Can't be empty\"];\n }\n\n // if (brand.plan === 'starter') return;\n\n if (brand.plan === 'standard' || brand.plan === 'starter') {\n if (\n messagingServices.filter((x) => !!x).length < 1\n ) {\n errors.brand = ['Please Add Texting Use Case'];\n }\n\n messagingServices.forEach((campaign, index) => {\n if (\n _lodash.isNumber(campaign.id)\n && !_lodash.isEmpty(campaign.sid)\n ) {\n return;\n }\n\n errors[index] = {};\n\n if (!campaign.usecase) {\n errors[index].usecase = [\"Can't be empty\"];\n }\n\n if (!campaign.description) {\n errors[index].description = [\"Can't be empty\"];\n } else {\n const { min, max } = LENGTH_CRITERIA.description;\n const contentLength = campaign.description.length;\n const inRange = min <= contentLength && contentLength <= max;\n\n if (!inRange) {\n errors[index].description = [\n `Content should be from ${min} to ${max} characters long`,\n ];\n }\n }\n\n if (!campaign.message_sample_one) {\n errors[index].message_sample_one = [\"Can't be empty\"];\n } else {\n const { min, max } = LENGTH_CRITERIA.message_sample;\n const contentLength = campaign.message_sample_one.length;\n const inRange = min <= contentLength && contentLength <= max;\n\n if (!inRange) {\n errors[index].message_sample_one = [\n `Content should be from ${min} to ${max} characters long`,\n ];\n }\n }\n\n if (!campaign.message_sample_two) {\n errors[index].message_sample_two = [\"Can't be empty\"];\n } else {\n const { min, max } = LENGTH_CRITERIA.message_sample;\n const contentLength = campaign.message_sample_two.length;\n const inRange = min <= contentLength && contentLength <= max;\n\n if (!inRange) {\n errors[index].message_sample_two = [\n `Content should be from ${min} to ${max} characters long`,\n ];\n }\n }\n\n if (!campaign.message_flow) {\n errors[index].message_flow = [\"Can't be empty\"];\n } else {\n const { min, max } = LENGTH_CRITERIA.message_flow;\n const contentLength = campaign.message_flow.length;\n const inRange = min <= contentLength && contentLength <= max;\n\n if (!inRange) {\n errors[index].message_flow = [\n `Content should be from ${min} to ${max} characters long`,\n ];\n }\n }\n\n if (_lodash.isEmpty(campaign.sms_numbers)) {\n errors[index].sms_numbers = [\"Can't be empty\"];\n }\n\n if (_lodash.size(errors[index]) === 0) delete errors[index];\n });\n }\n\n return errors;\n }\n\n renderTwilioErrors() {\n const { brand, twilio_errors } = this.state;\n\n const evaluation_errors = (brand.evaluation && brand.evaluation.status_errors) || [];\n const errors = [...twilio_errors, ...evaluation_errors];\n\n if (\n _lodash.isEmpty(errors)\n || (brand.evaluation && brand.evaluation.status === 'compliant')\n ) {\n return null;\n }\n\n return (\n \n
\n );\n }\n\n renderCampaignStatus(campaign) {\n const status = campaign ? campaign.status_code : 'draft';\n\n let text = '';\n let icon = '';\n\n switch (status) {\n case 'IN_PROGRESS':\n text = 'In Review';\n icon = (\n - \n {errors.map((item, index) => (\n
- \n {Object.keys(item)}\n
- \n {_lodash.flatten(Object.values(item)).map((v, i) => (\n
- {v} \n ))}\n
\n ))}\n
\n \n
\n {this.renderMessagingService()}\n \n );\n }\n\n renderVerifiedTextingPlanText() {\n const { brand } = this.state;\n const { plan } = brand;\n\n if (!plan) return null;\n\n return (\n \n {errors.brand &&
\n \n You will be submitting this information to the carriers so\n they understand what type of messages you'll be sending.\n {' '}\n Declaring your exact campaign use case rather than using a\n mixed campaign use case will generally result in higher limits\n because you're being more specific about what messages\n you are sending.\n
\n );\n }\n\n render() {\n const {\n brand,\n loading,\n submitting,\n creating,\n saving,\n errors,\n error,\n submitError,\n deletingMessagingServiceIds,\n } = this.state;\n const {\n business_information,\n address,\n authorized_representative_1,\n } = this.props;\n\n const disableStatus = false; // status.status_code === 'in-review' || (shaken_stir && shaken_stir.status_code === 'in-review') || (brand && brand.status_code === 'PENDING');\n const disableSubmitButton = !_lodash.isEmpty(business_information)\n && !_lodash.isEmpty(address)\n && !_lodash.isEmpty(authorized_representative_1)\n && deletingMessagingServiceIds.length === 0;\n\n if (loading) {\n return (\n\n
\n );\n }\n\n if (error) {\n return (\n \n Oops, something went wrong. Try again later.\n
\n );\n }\n\n return (\n <>\n {!submitError && this.renderTwilioErrors()}\n\n \n How many text segments do you plan to send per day and how\n many phone numbers do you plan to text from?\n
\n\n \n \n );\n }\n}\n\nVerifiedTextingTab.defaultProps = {};\n\nVerifiedTextingTab.propTypes = {};\n\nexport default VerifiedTextingTab;\n","import React, { useState, useEffect } from 'react';\nimport { useLocation, useHistory } from 'react-router-dom';\nimport autoBind from 'react-autobind';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Tabs from 'react-bootstrap/Tabs';\nimport Tab from 'react-bootstrap/Tab';\n\nimport TwilioBundleActions from '~/actions/twilio_bundle_actions';\nimport BusinessProfileStore from '~/stores/business_profile_store';\nimport TwilioBundleStore from '~/stores/twilio_bundle_store';\nimport BusinessContactsStore from '~/stores/business_contacts_store';\nimport ProfileStatusTab from './tabs/profile_status_tab';\nimport BusinessProfileTab from './tabs/business_profile_tab';\nimport BusinessContactsTab from './tabs/business_contacts_tab';\nimport VerifiedTextingTab from './tabs/verified_texting_tab';\n\nfunction TwilioTabs(props) {\n const KEYS = ['profile_status', 'business_profile', 'business_contacts', 'verified_texting'];\n const [key, setKey] = useState('profile_status');\n\n const location = useLocation();\n const history = useHistory();\n\n useEffect(() => {\n const hash = location.hash;\n const value = hash?.substring(1);\n if (value && KEYS.includes(value)) {\n setKey(value);\n }\n }, []);\n\n useEffect(() => {\n history.replace({ ...location, hash: key });\n }, [key]);\n\n return (\n\n
\n );\n }\n\n if (error) {\n return (\n \n Oops, something went wrong. Try again later.\n
\n );\n }\n\n return (\n <>\n \n
\n \n
\n \n Need to import or mass update your team?\n {' '}\n
\n\n Download a current CSV\n \n {' '}\n and edit team members or add new ones to the end.\n
\n );\n }\n\n renderInviteNotice() {\n const { teamMembersState } = this.state;\n\n if (_lodash.isEmpty(teamMembersState)) return null;\n\n const { notJoinedCount } = teamMembersState;\n\n if (notJoinedCount === 0) return null;\n\n return (\n \n
\n Some of your team hasn't yet joined Brokerkit (\n {notJoinedCount}\n , to be\n exact). To reinvite them,\n {' '}\n \n invite who's left\n \n .\n
\n );\n }\n\n render() {\n const { currentTeam } = Rails.helpers;\n const { selectedTab } = this.state;\n\n if (!currentTeam) return null;\n\n if (this.props.sidebar) {\n return (\n \n
\n \n
\n \n
\n \n {this.renderImportNotice()}\n {this.renderInviteNotice()}\n\n
\n Note:
';\n } else {\n size = 'small';\n title = '';\n message = `Are you sure you want to remove ${teamMember.name}?`;\n }\n\n brokerbit.confirmBox({\n title,\n message,\n size,\n callback: (ok) => {\n if (ok) TeamMembersActions.deleteTeamMember(teamMember, selectedTab, searchQuery, currentPage);\n },\n });\n }\n\n onSelectChange(opt) {\n const { teamMember } = this.props;\n const { selectedTab, searchQuery, currentPage } = this.context;\n\n switch (opt.value) {\n case 'recruiting':\n brokerbit.confirmBox({\n message: `Are you sure you want to send ${teamMember.name} back to Recruiting and remove their access to Brokerkit?`,\n callback: (ok) => {\n if (ok) {\n TeamMembersActions.moveTeamMember(teamMember, 'recruiting', selectedTab, searchQuery, currentPage);\n }\n },\n });\n break;\n case 'agent':\n brokerbit.confirmBox({\n message: `Are you sure you want to convert ${teamMember.name} to an Agent?`,\n callback: (ok) => {\n if (ok) {\n TeamMembersActions.moveTeamMember(teamMember, 'agent', selectedTab, searchQuery, currentPage);\n }\n },\n });\n break;\n case 'affiliate':\n brokerbit.confirmBox({\n message: `Are you sure you want to convert ${teamMember.name} to an Affiliate?`,\n callback: (ok) => {\n if (ok) {\n TeamMembersActions.moveTeamMember(teamMember, 'affiliate', selectedTab, searchQuery, currentPage);\n }\n },\n });\n break;\n case 'archived':\n brokerbit.confirmBox({\n message: `Are you sure you'd like to move ${teamMember.name} to Archive and remove their access to Brokerkit?`,\n callback: (ok) => {\n if (ok) {\n TeamMembersActions.moveTeamMember(teamMember, 'archived', selectedTab, searchQuery, currentPage);\n }\n },\n });\n break;\n default:\n break;\n }\n }\n\n renderRoles() {\n const { teamMember } = this.props;\n const { name } = teamMember.role;\n\n let label = name.replace('_', ' ').toUpperCase();\n\n let className;\n switch (name) {\n case 'admin':\n className = 'badge badge-outline-green';\n break;\n case 'staff':\n className = 'badge badge-outline-yellow';\n label = 'STAFF';\n break;\n case 'agent':\n className = 'badge badge-outline-blue';\n break;\n default:\n className = 'badge badge-outline-grey';\n break;\n }\n\n return {label};\n }\n\n render() {\n const { mode } = this.context;\n const { teamMember } = this.props;\n\n if (mode === 'onboarding') {\n return (\n - Removing this user will remove their system access and they will be moved to Archive in Retention.
- Please review all campaigns to determine if this user is set as a \"Sender\" and change the sender to a different user to avoid messages being sent later as this user.
\n
\nNote: This is separate from the billing email address (set on the billing page here), where invoices and billing-related communications are sent.`;\n\nclass TeamMembersCore extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n\n const tabs = props.tabs || ['admins', 'staff', 'agents', 'affiliates'];\n const { currentTeam } = Rails.helpers;\n this.state = {\n selectedTab: props.selectedTab || tabs[0],\n searchQuery: '',\n currentPage: 1,\n tabs,\n account_poc_id: currentTeam.account_poc_id || null,\n };\n }\n\n getChildContext() {\n const { mode } = this.props;\n const { selectedTab, searchQuery, currentPage } = this.state;\n\n return {\n selectedTab,\n searchQuery,\n currentPage,\n mode,\n };\n }\n\n componentDidMount() {\n const { per, filter } = this.props;\n\n this.teamMembersStoreListener = TeamMembersStore.addListener(this.onTeamMembersStoreChange);\n\n TeamMembersActions.loadTeamMembers(this.state.selectedTab, { page: 1, per, filter });\n }\n\n componentWillUnmount() {\n if (this.teamMembersStoreListener) this.teamMembersStoreListener.remove();\n }\n\n onTeamMembersStoreChange() {\n const teamMembersState = TeamMembersStore.getState();\n\n this.props.onTeamMembersStoreChange(teamMembersState);\n\n this.setState({\n teamMembersState,\n });\n }\n\n handleTabSwitch(role) {\n const { per, filter } = this.props;\n\n TeamMembersActions.loadTeamMembers(role, {\n q: this.state.searchQuery, page: 1, per, filter,\n });\n\n this.setState({\n selectedTab: role,\n currentPage: 1,\n });\n\n if (this.props.handleTabSwitch) this.props.handleTabSwitch(role);\n }\n\n handleSearch(query) {\n const { per, filter } = this.props;\n\n this.setState({\n searchQuery: query,\n selectedTab: query.length > 0 ? 'members' : this.state.selectedTab,\n currentPage: 1,\n });\n\n TeamMembersActions.loadTeamMembers(this.state.selectedTab, {\n q: query, page: 1, per, filter,\n });\n }\n\n handleAccountPocChange(selectedOption) {\n const newAccountPocId = selectedOption ? selectedOption?.user?.id : null;\n\n if (!newAccountPocId) {\n return;\n }\n\n this.setState({ account_poc_id: newAccountPocId });\n\n APIRequest.put({\n resource: `/v1/teams/${Rails.helpers.currentTeam.id}`,\n data: {\n team: {\n account_poc_id: newAccountPocId,\n },\n },\n })\n .then((response) => {\n if (response.ok || response.status === 200) {\n GlobalContainer.notify('Account POC has been updated successfully', 'success');\n } else {\n GlobalContainer.notify('Failed to update Account POC', 'error');\n }\n })\n .catch((error) => {\n console.error('Error updating Account POC:', error);\n });\n }\n\n clearSearch() {\n const { per, filter } = this.props;\n\n this.setState({\n searchQuery: '',\n currentPage: 1,\n });\n\n TeamMembersActions.loadTeamMembers(this.state.selectedTab, { page: 1, per, filter });\n }\n\n handlePageChange(page) {\n const { per, filter } = this.props;\n const { selectedTab, searchQuery } = this.state;\n\n this.setState({\n currentPage: page + 1,\n });\n\n TeamMembersActions.loadTeamMembers(selectedTab, {\n q: searchQuery, page: page + 1, per, filter,\n });\n }\n\n render() {\n const { currentUser } = Rails.helpers;\n const { title, notify, drawerExternalRolesOnly } = this.props;\n const {\n selectedTab, searchQuery, currentPage, teamMembersState, tabs, account_poc_id,\n } = this.state;\n const disableAccountPoc = !(currentUser.role.name === 'admin' || currentUser.admin);\n\n return (\n
\n
\n );\n }\n}\n\nTeamMembersCore.childContextTypes = {\n selectedTab: PropTypes.string,\n searchQuery: PropTypes.string,\n currentPage: PropTypes.number,\n mode: PropTypes.string,\n};\n\nTeamMembersCore.defaultProps = {\n title: 'Manage Team',\n sidebar: true,\n per: 10,\n filter: [],\n notify: true,\n drawerExternalRolesOnly: false,\n handleTabSwitch: () => false,\n onTeamMembersStoreChange: () => false,\n mode: 'default',\n};\n\nTeamMembersCore.propTypes = {\n title: PropTypes.string,\n tabs: PropTypes.arrayOf(PropTypes.string),\n selectedTab: PropTypes.string,\n sidebar: PropTypes.bool,\n per: PropTypes.number,\n filter: PropTypes.arrayOf(PropTypes.string),\n mode: PropTypes.string,\n notify: PropTypes.bool,\n drawerExternalRolesOnly: PropTypes.bool,\n handleTabSwitch: PropTypes.func,\n onTeamMembersStoreChange: PropTypes.func,\n};\n\nexport default TeamMembersCore;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport ReactDOM from 'react-dom';\nimport classNames from 'classnames';\n\nimport TeamMemberDrawer from '~/components/drawers/team_member_drawer';\n\nclass TeamMembersSearch extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n query: '',\n };\n\n autoBind(this);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n this.setState({\n query: nextProps.searchQuery,\n });\n }\n\n onAddMemberClick(e) {\n e.preventDefault();\n\n const {\n memberRole, searchQuery, currentPage, notify, drawerExternalRolesOnly,\n } = this.props;\n const { helpers } = this.context;\n\n helpers.openTeamMemberDrawer({\n memberRole,\n searchQuery,\n currentPage,\n notify,\n externalRolesOnly: drawerExternalRolesOnly,\n });\n }\n\n handleQueryChange(e) {\n const query = e.target.value || '';\n\n this.setState({\n query,\n });\n\n clearTimeout(this.delayTimer);\n this.delayTimer = setTimeout(() => {\n this.props.handleSearch(query);\n }, 650);\n }\n\n render() {\n const { drawerExternalRolesOnly } = this.props;\n const classes = classNames(drawerExternalRolesOnly ? 'form-group' : 'form-group mr-3');\n\n return (\n \n \n {title}\n\n
\n\n
\n \n {title}\n\n \n
\n\n \n
\n\n \n \n {' '}\n \n
\n \n {\n this.handleAccountPocChange(opt);\n }}\n disabled={disableAccountPoc}\n />\n
\n \n
\n );\n }\n}\n\nTeamMembersSearch.contextTypes = {\n helpers: PropTypes.shape({}),\n};\n\nTeamMembersSearch.defaultProps = {\n memberRole: 'staff',\n searchQuery: '',\n currentPage: 1,\n handleSearch: () => false,\n notify: false,\n drawerExternalRolesOnly: false,\n};\n\nTeamMembersSearch.propTypes = {\n memberRole: PropTypes.string,\n searchQuery: PropTypes.string,\n currentPage: PropTypes.number,\n handleSearch: PropTypes.func,\n notify: PropTypes.bool,\n drawerExternalRolesOnly: PropTypes.bool,\n};\n\nTeamMembersSearch.contextTypes = {\n helpers: PropTypes.shape({}),\n};\n\nexport default TeamMembersSearch;\n","import classNames from 'classnames';\nimport autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nclass TeamMembersTab extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n handleTabClick(selectedTab) {\n const { handleTabSwitch } = this.props;\n\n handleTabSwitch(selectedTab);\n }\n\n render() {\n const { memberRole, tabs } = this.props;\n const selected = memberRole || tabs[0];\n\n const tabItems = tabs.map((tab) => {\n let tabName = _lodash.titleize(tab);\n if (tab === 'members') tabName = 'All Members';\n\n return (\n \n (this.queryInput = input)}\n className=\"form-control\"\n placeholder=\"Search...\"\n value={this.state.query}\n onChange={this.handleQueryChange}\n />\n
\n\n { !drawerExternalRolesOnly && (\n \n \n
\n )}\n - \n {tabItems}\n
\n
No users found
\n\n
\n );\n }\n\n render() {\n const { searchQuery, banner, clearSearch } = this.props;\n\n return (\n \n
\n \n Showing\n {' '}\n {members.start}\n {' '}\n to\n {' '}\n {members.end}\n {' '}\n of\n {' '}\n {members.total_count}\n {' '}\n members\n
\n \n { members.total_pages > 1\n && (\n
\n \n \n
\n )}\n \n {\n searchQuery && searchQuery.length > 0\n && (\n \n \n {this.renderTeamMembers()}\n \n
\n\n {this.renderPagination()}\n
\n );\n }\n}\n\nTeamMembersTable.contextTypes = {\n helpers: PropTypes.shape({}),\n};\n\nTeamMembersTable.defaultProps = {\n memberRole: '',\n loadingMembers: false,\n teamMembers: {},\n handlePageChange: () => false,\n notify: false,\n banner: null,\n searchQuery: null,\n clearSearch: () => false,\n drawerExternalRolesOnly: false,\n};\n\nTeamMembersTable.propTypes = {\n memberRole: PropTypes.string,\n loadingMembers: PropTypes.bool,\n teamMembers: PropTypes.shape({}),\n handlePageChange: PropTypes.func,\n notify: PropTypes.bool,\n banner: PropTypes.element,\n searchQuery: PropTypes.string,\n clearSearch: PropTypes.func,\n drawerExternalRolesOnly: PropTypes.bool,\n};\n\nexport default TeamMembersTable;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport qs from 'qs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport GlobalContainer from '~/components/global_container';\nimport AgentActions from '~/actions/agent_actions';\nimport BulkSelectActions from '~/actions/bulk_select_actions';\nimport tableConfig from '~/components/pages/agent_dashboard/table_config';\nimport AgentSideBar from '~/components/navigation/agent_side_bar';\nimport RetentionSideBar from '~/components/navigation/retention_side_bar';\nimport ErrorBoundary from '~/components/shared/error_boundary';\nimport DataTable from './agent_dashboard/data_table';\nimport PageScoping from './agent_dashboard/page_scoping';\nimport SearchForm from './agent_dashboard/search_form';\nimport TaskFiltersForm from '~/components/pages/agent_dashboard/task_filters_form';\nimport AppointmentCard from './agent_dashboard/appointment_card';\nimport ReportCard from './agent_dashboard/report_card';\nimport widgetsConfig from './agent_dashboard/widgets_config';\nimport AgentStore from '~/stores/agent_store';\nimport DocumentActions from '~/actions/document_actions';\n\nimport DocumentFiltersForm from './agent_dashboard/document_filters_form';\n// import Report from '~/pages/Report';\n\n// import bugsnag from 'bugsnag-js';\n// import createPlugin from 'bugsnag-react';\n\n// const bugsnagClient = bugsnag(process.env.BUGSNAG_API_KEY);\n// const BugsnagErrorBoundary = bugsnagClient.use(createPlugin(React));\n\nclass AgentDashboard extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n key: uuidv4(),\n widgets: {\n hasSearch: true,\n hasTaskSearch: false,\n hasDocumentSearch: false,\n hasAppointment: false,\n tables: [],\n }, // manage current widgets on/off state\n scopedQueries: {},\n };\n\n this.unmounted = false;\n this.componentDidMount = this.componentDidMount.bind(this);\n this.reloadTimeout = null;\n\n autoBind(this);\n }\n\n /**\n * Return context to child components as props\n * https://facebook.github.io/react/docs/context.html\n * @returns {\n * {\n * history: AgentDashboard.props.history,\n * location: AgentDashboard.props.location,\n * match: AgentDashboard.props.match\n * }\n * }\n */\n getChildContext() {\n const { history, location, match } = this.props;\n\n return {\n history,\n location,\n match,\n handleSearch: this.handleSearch,\n handleTaskSearch: this.handleTaskSearch,\n };\n }\n\n componentDidMount() {\n this.configurePageWidgets();\n window.addEventListener('agent.reload', this.reload);\n }\n\n componentDidUpdate() {\n const { widgets } = this.state;\n\n document.title = widgets.title || 'Brokerkit';\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n\n if (this.reloadTimeout) {\n clearTimeout(this.reloadTimeout);\n }\n\n window.removeEventListener('agent.reload', this.reload);\n }\n\n handleSearch(searchData) {\n const { history } = this.props;\n\n BulkSelectActions.deselectLeadItems();\n\n const searchQuery = qs.stringify(\n { s: searchData, _t: Rails.helpers.currentTeam.id },\n { arrayFormat: 'brackets' },\n );\n const resource = GlobalContainer.product() === 'recruiting' ? 'recruiter' : GlobalContainer.product();\n\n history.push(\n `/${resource}/search?${decodeURI(searchQuery)}`,\n searchData,\n );\n\n if (GlobalContainer.product() === 'retention') {\n AgentActions.loadLeads(tableConfig.retentionSearchTable(), {\n searchData,\n });\n } else {\n AgentActions.loadLeads(tableConfig.recruitingSearchTable(), {\n searchData,\n });\n }\n }\n\n handleDocumentSearch(searchData) {\n const { location, history } = this.props;\n const searchQuery = qs.stringify(\n { s: searchData, _t: Rails.helpers.currentTeam.id },\n { arrayFormat: 'brackets' },\n );\n\n history.push(\n `${location.pathname}?${decodeURI(searchQuery)}`,\n searchData,\n );\n\n DocumentActions.loadDocuments(tableConfig.documentsTable(), {\n searchData: searchData || {},\n });\n }\n\n handleTaskSearch(searchData) {\n BulkSelectActions.deselectLeadItems();\n\n const { location, history } = this.props;\n\n const searchQuery = qs.stringify(\n { s: searchData, _t: Rails.helpers.currentTeam.id },\n { arrayFormat: 'brackets' },\n );\n\n history.push(\n `${location.pathname}?${decodeURI(searchQuery)}`,\n searchData,\n );\n\n switch (location.pathname) {\n case '/recruiter/tasks':\n case '/retention/tasks':\n AgentActions.loadLeads(tableConfig.allTasksTable(), {\n searchData,\n });\n break;\n case '/recruiter/tasks_due_today':\n case '/retention/tasks_due_today':\n AgentActions.loadLeads(tableConfig.tasksDueTodayTable(), {\n searchData,\n });\n break;\n case '/recruiter/tasks_due_later':\n case '/retention/tasks_due_later':\n AgentActions.loadLeads(tableConfig.tasksDueLaterTable(), {\n searchData,\n });\n break;\n case '/recruiter/tasks_overdue':\n case '/retention/tasks_overdue':\n AgentActions.loadLeads(tableConfig.tasksOverdueTable(), {\n searchData,\n });\n break;\n default:\n AgentActions.loadLeads(tableConfig.tasksDueTodayTable(), {\n searchData,\n });\n break;\n }\n }\n\n reload() {\n if (this.unmounted) return;\n\n // Clear existing timeout if any\n if (this.reloadTimeout) {\n clearTimeout(this.reloadTimeout);\n }\n const { scopedQueries } = AgentStore.getState();\n\n // give some time before reload - not sure why but instant reload doesn't refresh data\n this.reloadTimeout = setTimeout(() => {\n if (this.unmounted) return; // Check again before setting state\n this.setState({ key: uuidv4(), scopedQueries });\n }, 200);\n }\n\n configurePageWidgets() {\n const { location } = this.props;\n\n this.setState({\n widgets: widgetsConfig(location),\n });\n }\n\n renderSearchForm() {\n const { widgets } = this.state;\n\n if (!widgets.hasSearch) {\n return null;\n }\n\n return \n \n Search results for\n {' '}\n {searchQuery}\n \n
{banner}
\n )}\n\n \n
\n );\n }\n\n renderReport() {\n const { widgets } = this.state;\n\n if (!widgets.hasReport) {\n return null;\n }\n\n return (\n \n
\n );\n }\n\n renderSidebar() {\n const { widgets } = this.state;\n\n switch (GlobalContainer.product()) {\n case 'retention':\n return \n \n \n
\n );\n\n tablesContent.push(tableSection);\n });\n\n return tablesContent;\n }\n\n renderPageWithLayout() {\n const { location } = this.props;\n const { pathname } = location;\n const { widgets } = this.state;\n\n let pageLayout = (\n \n \n {this.renderSidebar()}\n \n\n
\n );\n\n // setup special layout for Agent view\n if (pathname === '/agent/dashboard') {\n pageLayout = (\n \n {this.renderSearchForm()}\n {this.renderTaskFiltersForm()}\n {this.renderDocumentFiltersForm()}\n {this.renderAppointment()}\n {this.renderTables()}\n {this.renderReport()}\n
\n \n
\n );\n }\n\n return pageLayout;\n }\n\n render() {\n const { widgets } = this.state;\n\n return (\n \n {this.renderTables()}\n
\n - \n {tabs}\n
\n {this.renderAppointmentTable(apptTable.appointments)}\n
\n );\n\n tabContent.push(tabContentItem);\n });\n\n return (\n \n {tabContent}\n
\n );\n }\n\n renderAppointmentTable(appointments) {\n const tableRows = [];\n\n appointments.forEach((appointment) => {\n const { lead } = appointment;\n const now = Moment();\n const apptMoment = Moment(appointment.appointment_at);\n const diffDays = apptMoment.diff(now, 'days');\n\n let apptDateText = apptMoment.format('MMM DD YYYY [at] h:mma');\n if (apptMoment >= Moment().startOf('day') && apptMoment < Moment().endOf('day')) {\n apptDateText = apptMoment.format('[Today at] h:mma');\n }\n\n let meetingButton;\n if (appointment.logged) {\n meetingButton = (\n \n );\n } else {\n meetingButton = (\n No Appointments
;\n }\n\n return (\n\n
\n );\n }\n}\n\nAppointmentCard.contextTypes = {\n helpers: PropTypes.shape({}),\n};\n\nAppointmentCard.defaultProps = {};\n\nAppointmentCard.propTypes = {};\n\nexport default Container.create(AppointmentCard);\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport numeral from 'numeral';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport AgentActions from '~/actions/agent_actions';\nimport BulkSelectActions from '~/actions/bulk_select_actions';\nimport AgentStore from '~/stores/agent_store';\nimport APIRequest from '~/lib/api_request';\nimport DataTableContent from './data_table/data_table_content';\nimport TaskModal from '~/components/modals/task_modal';\nimport { restrictOwnerScope } from '~/helpers/staffRestrictionHelper';\nimport DocumentActions from '~/actions/document_actions';\nimport brokerbit from '~/lib/brokerbit';\nimport DocumentStore from '~/stores/document_store';\n\nclass DataTable extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n referralStats: {\n leads_count: 0,\n joins_count: 0,\n total_value: 0,\n },\n ...this.getScopedTableData(props.table),\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n const { table, params, query } = this.props;\n const urlParams = GlobalContainer.urlParams();\n\n AgentActions.resetStore();\n\n this.unmounted = false;\n this.agentStoreListener = AgentStore.addListener(this.onAgentChange);\n this.documentStoreListener = DocumentStore.addListener(this.onDocumentChange);\n\n BulkSelectActions.deselectLeadItems(table);\n\n if (params.loadReferrerStats) {\n APIRequest.get({\n resource: '/v1/leads/referrer_stats',\n }).end((err, res) => {\n this.setState({\n referralStats: res.body,\n });\n });\n }\n\n if (urlParams.taskID) {\n ReactDOM.render(\n \n
\n\n Upcoming Appointments
\n\n {this.renderTabs()}\n
\n\n {this.renderTabContent()}\n \n {table.title}\n {table.subtitle ? (\n \n {table.subtitle}\n {table.scope === 'trash_documents' && (\n Empty Trash Now\n )}\n \n ) : null}\n
\n );\n\n if (records && loading === false && location.pathname === '/recruiter/search') {\n cardTitle ={`${table.title} (${records.pagination.total_count})`}
;\n }\n\n if (loading && location.pathname === '/recruiter/search') {\n cardTitle =Searching...
;\n }\n\n return cardTitle;\n }\n\n renderReferrerAction() {\n const { table } = this.props;\n const { currentUser, currentTeam } = Rails.helpers;\n const { helpers } = this.context;\n\n if (currentUser.staff_type !== 'external' || table.scope !== 'agent_referrals') return null;\n\n return (\n\n Who else should we be talking to?\n \n {\n currentTeam.landing_page\n && (\n \n
\n );\n }\n\n renderReferrerStatistic() {\n const { referralStats } = this.state;\n const { table } = this.props;\n\n if (Rails.helpers.currentUser.staff_type !== 'external' || table.scope !== 'agent_referrals' || !referralStats) return null;\n\n return (\n \n You've made\n \n {' '}\n {referralStats.leads_count}\n {' '}\n {_lodash.pluralize('referral', referralStats.leads_count)}\n {' '}\n \n resulting in\n \n {' '}\n {referralStats.joins_count}\n {' '}\n {_lodash.pluralize('agent', referralStats.joins_count)}\n {' '}\n joining\n {' '}\n \n with a total\n {' '}\n \n last 12 months production of\n {' '}\n {numeral(referralStats.total_value).format('$0,0[.]00')}\n \n .\n
\n );\n }\n\n render() {\n const { loading } = this.state;\n const { params, table } = this.props;\n const { downloadTaskCSV } = params;\n\n return (\n \n
\n );\n }\n}\n\nDataTable.contextTypes = {\n helpers: PropTypes.shape({}),\n};\n\nDataTable.defaultProps = {\n table: {},\n params: {\n loadReferrerStats: false,\n },\n};\n\nDataTable.propTypes = {\n table: PropTypes.shape({}),\n params: PropTypes.shape({}),\n};\n\nexport default DataTable;\n","import { ReduceStore } from 'flux/utils';\nimport AppDispatcher from '~/dispatchers/app_dispatcher';\nimport BulkSelectActionTypes from '~/types/bulk_select_action_types';\n\nclass BulkSelectStore extends ReduceStore {\n constructor() {\n super(AppDispatcher);\n }\n\n getInitialState() {\n return {\n // table scope for data below is stored as Object key\n scopedSelItems: {}, // store different selected table items\n scopedSelAllItems: {},\n unselectedItems: {}, // store unselected table items when all items optons is set\n bulkSelectStoreAction: null, // store last dispatch action name\n };\n }\n\n selectAllItems(state, action) {\n const newState = { ...state };\n const { tableScope } = action;\n\n newState.scopedSelAllItems[tableScope] = true;\n newState.unselectedItems[tableScope] = {};\n newState.bulkSelectStoreAction = 'selectAllItems';\n\n return newState;\n }\n\n deselectAllItems(state, action) {\n const newState = { ...state };\n const { tableScope } = action;\n\n newState.scopedSelAllItems[tableScope] = false;\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n newState.bulkSelectStoreAction = 'deselectAllItems';\n\n return newState;\n }\n\n selectDocumentItems(state, action) {\n const newState = { ...state };\n const { tableScope, documentItems } = action;\n\n newState.bulkSelectStoreAction = 'selectDocumentItems';\n\n if (!newState.scopedSelItems[tableScope]) {\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n }\n\n documentItems.forEach((documentItem) => {\n const itemKey = `document-item-${documentItem.id}`;\n\n if (!newState.unselectedItems[tableScope][itemKey]) {\n newState.scopedSelItems[tableScope][itemKey] = documentItem;\n }\n });\n\n return newState;\n }\n\n deselectDocumentItems(state, action) {\n const newState = { ...state };\n const { tableScope, documentItems } = action;\n\n newState.bulkSelectStoreAction = 'deselectDocumentItems';\n\n if (!tableScope\n || !documentItems\n || !newState.scopedSelItems[tableScope]) {\n newState.scopedSelItems = {};\n newState.scopedSelAllItems = {};\n newState.unselectedItems = {};\n\n return newState;\n }\n\n if (newState.scopedSelAllItems[tableScope]) {\n newState.scopedSelAllItems[tableScope] = false;\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n\n return newState;\n }\n\n documentItems.forEach((documentItem) => {\n const itemKey = `document-item-${documentItem.id}`;\n delete newState.scopedSelItems[tableScope][itemKey];\n });\n\n return newState;\n }\n\n selectDocumentItem(state, action) {\n const newState = { ...state };\n const { tableScope, documentItem } = action;\n const itemKey = `document-item-${documentItem.id}`;\n\n newState.bulkSelectStoreAction = 'selectDocumentItem';\n\n if (!newState.scopedSelItems[tableScope]) {\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n }\n\n newState.scopedSelItems[tableScope][itemKey] = documentItem;\n delete newState.unselectedItems[tableScope][itemKey];\n\n return newState;\n }\n\n deselectDocumentItem(state, action) {\n const newState = { ...state };\n const { tableScope, documentItem } = action;\n\n newState.bulkSelectStoreAction = 'deselectDocumentItem';\n\n if (!tableScope || !documentItem || !newState.scopedSelItems[tableScope]) {\n return newState;\n }\n\n const itemKey = `document-item-${documentItem.id}`;\n\n delete newState.scopedSelItems[tableScope][itemKey];\n\n if (!newState.unselectedItems[tableScope]) {\n newState.scopedSelAllItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n }\n\n if (newState.scopedSelAllItems[tableScope]) {\n newState.unselectedItems[tableScope][itemKey] = documentItem;\n\n return newState;\n }\n\n return newState;\n }\n\n selectTrashDocumentItems(state, action) {\n const newState = { ...state };\n const { tableScope, trashDocumentItems } = action;\n\n newState.bulkSelectStoreAction = 'selectTrashDocumentItems';\n\n if (!newState.scopedSelItems[tableScope]) {\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n }\n\n trashDocumentItems.forEach((trashDocumentItem) => {\n const itemKey = `trash-document-${trashDocumentItem.id}`;\n\n if (!newState.unselectedItems[tableScope][itemKey]) {\n newState.scopedSelItems[tableScope][itemKey] = trashDocumentItem;\n }\n });\n\n return newState;\n }\n\n deselectTrashDocumentItems(state, action) {\n const newState = { ...state };\n const { tableScope, trashDocumentItems } = action;\n\n newState.bulkSelectStoreAction = 'deselectTrashDocumentItems';\n\n if (!tableScope || !trashDocumentItems || !newState.scopedSelItems[tableScope]) {\n newState.scopedSelItems = {};\n newState.scopedSelAllItems = {};\n newState.unselectedItems = {};\n\n return newState;\n }\n\n if (newState.scopedSelAllItems[tableScope]) {\n newState.scopedSelAllItems[tableScope] = false;\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n\n return newState;\n }\n\n trashDocumentItems.forEach((trashDocumentItem) => {\n const itemKey = `trash-document-${trashDocumentItem.id}`;\n delete newState.scopedSelItems[tableScope][itemKey];\n });\n\n return newState;\n }\n\n selectTrashDocumentItem(state, action) {\n const newState = { ...state };\n const { tableScope, trashDocumentItem } = action;\n const itemKey = `trash-document-${trashDocumentItem.id}`;\n\n newState.bulkSelectStoreAction = 'selectTrashDocumentItem';\n\n if (!newState.scopedSelItems[tableScope]) {\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n }\n\n newState.scopedSelItems[tableScope][itemKey] = trashDocumentItem;\n delete newState.unselectedItems[tableScope][itemKey];\n\n return newState;\n }\n\n deselectTrashDocumentItem(state, action) {\n const newState = { ...state };\n const { tableScope, trashDocumentItem } = action;\n\n newState.bulkSelectStoreAction = 'deselectTrashDocumentItem';\n\n if (!tableScope || !trashDocumentItem || !newState.scopedSelItems[tableScope]) {\n return newState;\n }\n\n const itemKey = `trash-document-${trashDocumentItem.id}`;\n\n delete newState.scopedSelItems[tableScope][itemKey];\n\n if (!newState.unselectedItems[tableScope]) {\n newState.scopedSelAllItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n }\n\n if (newState.scopedSelAllItems[tableScope]) {\n newState.unselectedItems[tableScope][itemKey] = trashDocumentItem;\n\n return newState;\n }\n\n return newState;\n }\n\n selectLeadItems(state, action) {\n const newState = { ...state };\n const { tableScope, leadItems } = action;\n\n newState.bulkSelectStoreAction = 'selectLeadItems';\n\n if (!newState.scopedSelItems[tableScope]) {\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n }\n\n leadItems.forEach((leadItem) => {\n const itemKey = `lead-item-${leadItem.id}`;\n\n if (!newState.unselectedItems[tableScope][itemKey]) {\n newState.scopedSelItems[tableScope][itemKey] = leadItem;\n }\n });\n\n return newState;\n }\n\n deselectLeadItems(state, action) {\n const newState = { ...state };\n const { tableScope, leadItems } = action;\n\n newState.bulkSelectStoreAction = 'deselectLeadItems';\n\n if (!tableScope\n || !leadItems\n || !newState.scopedSelItems[tableScope]) {\n newState.scopedSelItems = {};\n newState.scopedSelAllItems = {};\n newState.unselectedItems = {};\n\n return newState;\n }\n\n if (newState.scopedSelAllItems[tableScope]) {\n newState.scopedSelAllItems[tableScope] = false;\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n\n return newState;\n }\n\n leadItems.forEach((leadItem) => {\n const itemKey = `lead-item-${leadItem.id}`;\n delete newState.scopedSelItems[tableScope][itemKey];\n });\n\n return newState;\n }\n\n selectLeadItem(state, action) {\n const newState = { ...state };\n const { tableScope, leadItem } = action;\n const itemKey = `lead-item-${leadItem.id}`;\n\n newState.bulkSelectStoreAction = 'selectLeadItem';\n\n if (!newState.scopedSelItems[tableScope]) {\n newState.scopedSelItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n }\n\n newState.scopedSelItems[tableScope][itemKey] = leadItem;\n delete newState.unselectedItems[tableScope][itemKey];\n\n return newState;\n }\n\n deselectLeadItem(state, action) {\n const newState = { ...state };\n const { tableScope, leadItem } = action;\n\n newState.bulkSelectStoreAction = 'deselectLeadItem';\n\n if (!tableScope || !leadItem || !newState.scopedSelItems[tableScope]) {\n return newState;\n }\n\n const itemKey = `lead-item-${leadItem.id}`;\n\n delete newState.scopedSelItems[tableScope][itemKey];\n\n if (!newState.unselectedItems[tableScope]) {\n newState.scopedSelAllItems[tableScope] = {};\n newState.unselectedItems[tableScope] = {};\n }\n\n if (newState.scopedSelAllItems[tableScope]) {\n newState.unselectedItems[tableScope][itemKey] = leadItem;\n\n return newState;\n }\n\n return newState;\n }\n\n reduce(state, action) {\n switch (action.type) {\n case BulkSelectActionTypes.SELECT_ALL_ITEMS:\n return this.selectAllItems(state, action);\n\n case BulkSelectActionTypes.DESELECT_ALL_ITEMS:\n return this.deselectAllItems(state, action);\n\n case BulkSelectActionTypes.SELECT_LEAD_ITEMS:\n return this.selectLeadItems(state, action);\n\n case BulkSelectActionTypes.DESELECT_LEAD_ITEMS:\n return this.deselectLeadItems(state, action);\n\n case BulkSelectActionTypes.SELECT_LEAD_ITEM:\n return this.selectLeadItem(state, action);\n\n case BulkSelectActionTypes.DESELECT_LEAD_ITEM:\n return this.deselectLeadItem(state, action);\n\n case BulkSelectActionTypes.SELECT_DOCUMENT_ITEMS:\n return this.selectDocumentItems(state, action);\n\n case BulkSelectActionTypes.DESELECT_DOCUMENT_ITEMS:\n return this.deselectDocumentItems(state, action);\n\n case BulkSelectActionTypes.SELECT_DOCUMENT_ITEM:\n return this.selectDocumentItem(state, action);\n\n case BulkSelectActionTypes.DESELECT_DOCUMENT_ITEM:\n return this.deselectDocumentItem(state, action);\n\n case BulkSelectActionTypes.SELECT_TRASH_DOCUMENT_ITEMS:\n return this.selectTrashDocumentItems(state, action);\n\n case BulkSelectActionTypes.DESELECT_TRASH_DOCUMENT_ITEMS:\n return this.deselectTrashDocumentItems(state, action);\n\n case BulkSelectActionTypes.SELECT_TRASH_DOCUMENT_ITEM:\n return this.selectTrashDocumentItem(state, action);\n\n case BulkSelectActionTypes.DESELECT_TRASH_DOCUMENT_ITEM:\n return this.deselectTrashDocumentItem(state, action);\n default:\n return state;\n }\n }\n}\n\nexport default new BulkSelectStore();\n","import autoBind from 'react-autobind';\nimport qs from 'qs';\nimport { v4 as uuidv4 } from 'uuid';\nimport classNames from 'classnames';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport ReactPaginate from 'react-paginate';\nimport pluralize from 'pluralize';\nimport { Nav, NavItem } from 'reactstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport { TeammatePicker } from '~/components/forms/team_member_picker';\nimport { BucketSelect } from '~/components/forms/lead_fields';\nimport AgentActions from '~/actions/agent_actions';\nimport AgentStore from '~/stores/agent_store';\nimport BulkSelectActions from '~/actions/bulk_select_actions';\nimport BulkSelectStore from '~/stores/bulk_select_store';\nimport AddTaskModal from '~/components/modals/add_task_modal';\nimport AddNoteModal from '~/components/modals/add_note_modal';\nimport SendEmailModal from '~/components/modals/send_email_modal';\nimport SendSMSModal from '~/components/modals/send_sms_modal';\nimport AddCampaignModal from '~/components/modals/add_campaign_modal';\nimport RemoveCampaignModal from '~/components/modals/remove_campaign_modal';\nimport AddLabelModal from '~/components/modals/add_label_modal';\nimport RemoveLabelModal from '~/components/modals/remove_label_modal';\nimport EditTaskDescriptionModal from '~/components/modals/edit_task_description_modal';\nimport TaskStatusSelect from '~/components/forms/task_status_select';\nimport TaskCategorySelect from '~/components/forms/task_category_select';\nimport TaskPrioritySelect from '~/components/forms/task_priority_select';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport StatusSelect from '~/components/forms/dropdowns/StatusSelect';\n\nimport LeadsSelect from '~/components/forms/leads_select';\nimport DataTableProductionFilter from './data_table_production_filter';\nimport DataTableSortLink from './data_table_sort_link';\nimport DataTableItem from './data_table_item';\nimport DocumentActions from '~/actions/document_actions';\nimport DocumentStore from '~/stores/document_store';\nimport DocumentLimitAlertChecker from '~/components/shared/document_limit_alert_checker';\nimport {\n checkIfLimitExceeded,\n} from '~/helpers/document_helpers';\n\nconst scopeToEntity = {\n today_or_past_tasks: 'tasks',\n tasks_due_later: 'tasks',\n tasks_overdue: 'tasks',\n all_tasks: 'tasks',\n documents: 'documents',\n trash_documents: 'documents',\n};\n\nclass DataTableContent extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n fetching: false,\n tableFilters: {},\n tableSortField: props.tableSortField,\n tableSortDirection: props.tableSortDirection,\n unSelectedItems: {},\n selectedItems: {},\n selectAllItems: false,\n categories: [],\n statuses: [],\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.listener = AgentStore.addListener(this.onAgentStoreChange);\n this.bulkSelectlistener = BulkSelectStore.addListener(this.onBulkSelectStoreChange);\n DocumentActions.loadCategories();\n DocumentActions.loadStatuses();\n this.documentStoreListener = DocumentStore.addListener(() => {\n const { categories, statuses, lastDocumentStoreAction } = DocumentStore.getState();\n\n if (lastDocumentStoreAction === 'loadCategoriesDone') {\n this.setCategories(categories);\n }\n\n if (lastDocumentStoreAction === 'loadStatusesDone') {\n this.setStatuses(statuses);\n }\n });\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { table, records } = nextProps;\n const { selectAllItems } = this.state;\n\n if (selectAllItems) {\n setTimeout(() => {\n if (table.scope === 'documents') {\n BulkSelectActions.selectDocumentItems(table, records.documents);\n } else if (table.scope === 'trash_documents') {\n BulkSelectActions.selectTrashDocumentItems(table, records.documents);\n } else {\n BulkSelectActions.selectLeadItems(table, records.data);\n }\n });\n }\n }\n\n componentWillUnmount() {\n if (this.listener) this.listener.remove();\n if (this.bulkSelectlistener) this.bulkSelectlistener.remove();\n if (this.documentStoreListener) this.documentStoreListener.remove();\n }\n\n onAgentStoreChange() {\n const { fetching } = this.state;\n\n const agentStoreState = AgentStore.getState();\n const { AgentStoreAction } = agentStoreState;\n\n if (fetching) {\n if (AgentStoreAction === 'loadLeadsDone') {\n this.setState({ fetching: false });\n }\n }\n }\n\n onBulkSelectStoreChange() {\n let newState;\n const { table } = this.props;\n\n const bulkSelectStoreState = BulkSelectStore.getState();\n const {\n scopedSelItems,\n scopedSelAllItems,\n unselectedItems,\n } = bulkSelectStoreState;\n\n const selectedItems = scopedSelItems[table.scope] ? scopedSelItems[table.scope] : {};\n const selectAllItems = scopedSelAllItems[table.scope] ? scopedSelAllItems[table.scope] : false;\n const unSelectedItems = unselectedItems[table.scope] ? unselectedItems[table.scope] : {};\n\n newState = {\n selectedItems,\n selectAllItems,\n unSelectedItems,\n };\n\n this.setState(newState);\n }\n\n onPageChange(page) {\n const selectedPage = page.selected;\n\n this.reloadLeads({}, { page: selectedPage + 1 });\n }\n\n onBulkSelect(e) {\n const { table, records } = this.props;\n const data = records.data || records.documents;\n\n if (!data) return;\n\n if (e.target.checked) {\n if (table.scope === 'documents') {\n BulkSelectActions.selectDocumentItems(table, records.documents);\n } else if (table.scope === 'trash_documents') {\n BulkSelectActions.selectTrashDocumentItems(table, records.documents);\n } else {\n BulkSelectActions.selectLeadItems(table, records.data);\n }\n } else if (table.scope === 'documents') {\n BulkSelectActions.deselectDocumentItems(table, records.documents);\n } else if (table.scope === 'trash_documents') {\n BulkSelectActions.deselectTrashDocumentItems(table, records.documents);\n } else {\n BulkSelectActions.deselectLeadItems(table, records.data);\n }\n }\n\n onSelectAllRecords(e) {\n e.preventDefault();\n const { table, records } = this.props;\n\n if (!records.data && !records.documents) return;\n\n BulkSelectActions.selectAllItems(table);\n if (table.scope === 'documents') {\n BulkSelectActions.selectDocumentItems(table, records.documents);\n } else if (table.scope === 'trash_documents') {\n BulkSelectActions.selectTrashDocumentItems(table, records.documents);\n } else {\n BulkSelectActions.selectLeadItems(table, records.data);\n }\n }\n\n onFilteringProductions(productions) {\n const { tableFilters } = this.state;\n\n this.setState({\n tableFilters: { ...tableFilters, production: productions },\n });\n\n this.reloadLeads({ production: productions }, { page: 1 });\n }\n\n onSortToggle(sortField, sortDirection) {\n const { tableSortField, tableSortDirection } = this.state;\n\n if (tableSortDirection === 'desc' && tableSortField.column === sortField.column) {\n sortField = { column: null };\n sortDirection = null;\n }\n\n this.setState({\n tableSortField: sortField,\n tableSortDirection: sortDirection,\n }, () => {\n this.reloadLeads({}, { column: sortField.column, direction: sortDirection });\n });\n }\n\n onAddNoteClick(e) {\n e.preventDefault();\n\n const { table, records } = this.props;\n const {\n selectAllItems, selectedItems, tableFilters, unSelectedItems,\n } = this.state;\n const { query } = this.props;\n\n const searchData = Object.assign(query);\n\n ReactDOM.render(\n \n {!loading && Rails.abilities.manageLead\n && table.scope !== 'trash_documents' && table.scope !== 'documents' && (\n \n )}\n {this.renderCollectionTitle()}\n {this.renderReferrerAction()}\n {this.renderReferrerStatistic()}\n
\n\n {this.renderLeadsTable()}\n Note:
';\n } else {\n size = 'small';\n title = '';\n message = `Deleting ${pluralPronoun} ${selectedItemsText} will be permanent. Please confirm you want to proceed.`;\n }\n\n brokerbit.confirmBox({\n title,\n message,\n size,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkDeleteLeads(table, selectedLeads, searchData, deleteData);\n BulkSelectActions.deselectAllItems(table);\n this.reloadLeads();\n }\n },\n });\n }\n\n onBucketChange(bucket) {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, records, query } = this.props;\n const searchData = Object.assign(query);\n\n let updateParams = {};\n let selectedLeads = Object.values(selectedItems);\n const unselectedItems = Object.values(unSelectedItems);\n\n switch (bucket.value) {\n case 'recruiting':\n updateParams = { ...updateParams, status: 'new_lead', bucket: 'backlog' };\n break;\n default:\n updateParams = { ...updateParams, bucket: bucket.value };\n }\n\n if (selectAllItems) {\n selectedLeads = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItems, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to move these ${selectedItemsCount} contacts to ${bucket.label}?`,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkUpdateLeads(table, selectedLeads, searchData, updateParams);\n this.reloadLeads();\n }\n },\n });\n }\n\n onOwnerChange(owner) {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, records, query } = this.props;\n const searchData = Object.assign(query);\n\n let updateParams = { owner_id: owner.value };\n let selectedLeads = Object.values(selectedItems);\n const unselectedItems = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedLeads = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItems, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the owner of these ${selectedItemsCount} contacts to ${owner.label}?`,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkUpdateLeads(table, selectedLeads, searchData, updateParams);\n this.reloadLeads();\n }\n },\n });\n }\n\n onStatusChange(status) {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, query } = this.props;\n const searchData = Object.assign(query);\n\n if (!status.value) return;\n\n let updateParams = { status: status.value };\n let selectedLeads = Object.values(selectedItems);\n const unselectedItems = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedLeads = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItems, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n brokerbit.confirmBox({\n message: `Are you sure you want to change the status of these ${selectedItemsCount} contacts to ${status.label}?`,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkUpdateLeads(table, selectedLeads, searchData, updateParams);\n this.reloadLeads();\n }\n },\n });\n }\n\n onDocumentStatusChange = (status) => {\n const statusId = status.value;\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, query } = this.props;\n\n let updateParams = { status_id: statusId };\n let selectedDocuments = Object.values(selectedItems);\n const unselectedItemsArray = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedDocuments = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItemsArray, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the status of these ${selectedItemsCount} documents to ${status.label}?`,\n callback: (ok) => {\n if (ok) {\n DocumentActions.bulkUpdateDocuments(table, selectedDocuments, updateParams, query);\n BulkSelectActions.deselectAllItems(table);\n }\n },\n });\n };\n\n onDocumentCategoryChange = (category) => {\n const categoryId = category.value;\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, query } = this.props;\n\n let updateParams = { category_id: categoryId };\n let selectedDocuments = Object.values(selectedItems);\n const unselectedItemsArray = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedDocuments = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItemsArray, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the category of these ${selectedItemsCount} documents to ${category.label}?`,\n callback: (ok) => {\n if (ok) {\n DocumentActions.bulkUpdateDocuments(table, selectedDocuments, updateParams, query);\n BulkSelectActions.deselectAllItems(table);\n }\n },\n });\n };\n\n onDocumentOwnerChange = (owner) => {\n const ownerId = owner.value;\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, query } = this.props;\n\n let updateParams = { owner_id: ownerId };\n let selectedDocuments = Object.values(selectedItems);\n const unselectedItemsArray = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedDocuments = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItemsArray, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the owner of these ${selectedItemsCount} documents to ${owner.label}?`,\n callback: (ok) => {\n if (ok) {\n DocumentActions.bulkUpdateDocuments(table, selectedDocuments, updateParams, query);\n BulkSelectActions.deselectAllItems(table);\n }\n },\n });\n }\n\n onDocumentRelatedContactsChange = (relatedContacts) => {\n const contactIds = relatedContacts.filter((contact) => contact != null);\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, query } = this.props;\n\n let updateParams = { related_contact_ids: contactIds };\n let selectedDocuments = Object.values(selectedItems);\n const unselectedItemsArray = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedDocuments = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItemsArray, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the related contacts of these ${selectedItemsCount} documents?`,\n callback: (ok) => {\n if (ok) {\n DocumentActions.bulkUpdateDocuments(table, selectedDocuments, updateParams, query);\n BulkSelectActions.deselectAllItems(table);\n }\n },\n });\n };\n\n onBulkDeleteDocuments = () => {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const {\n table, query, records, ownerScope,\n } = this.props;\n\n let deleteParams = {};\n let selectedDocuments = Object.values(selectedItems);\n const unselectedItemsArray = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedDocuments = 'all';\n deleteParams = { ...deleteParams, unselected_ids: _lodash.map(unselectedItemsArray, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to delete these ${selectedItemsCount} documents?`,\n callback: (ok) => {\n if (ok) {\n const { page, s, per: size } = query;\n const searchOptions = { s };\n DocumentActions.bulkDeleteDocuments(table, selectedDocuments, deleteParams, searchOptions);\n BulkSelectActions.deselectAllItems(table);\n setTimeout(() => {\n DocumentActions.loadDocuments(table, { page, size, searchData: s });\n }, 500);\n }\n },\n });\n };\n\n onBulkRestoreDocuments = () => {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, query, records } = this.props;\n\n let restoreParams = {};\n let selectedTrashDocuments = Object.values(selectedItems);\n const unselectedItemsArray = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedTrashDocuments = 'all';\n restoreParams = { ...restoreParams, unselected_ids: _lodash.map(unselectedItemsArray, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to restore these ${selectedItemsCount} documents?`,\n callback: (ok) => {\n if (ok) {\n checkIfLimitExceeded(selectedItemsCount).then((isLimitExceeded) => {\n if (isLimitExceeded) {\n this.setShowLimitAlert(true);\n } else {\n DocumentActions.bulkRestoreTrashDocuments(table, selectedTrashDocuments, restoreParams);\n BulkSelectActions.deselectAllItems(table);\n const { page, per: size, s: searchData } = query;\n setTimeout(() => {\n DocumentActions.loadTrashedDocuments(table, { page, size, searchData });\n }, 500);\n }\n });\n }\n },\n });\n };\n\n onBulkDeleteTrashDocuments = () => {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, query } = this.props;\n\n let deleteParams = {};\n let selectedTrashDocuments = Object.values(selectedItems);\n const unselectedItemsArray = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedTrashDocuments = 'all';\n deleteParams = { ...deleteParams, unselected_ids: _lodash.map(unselectedItemsArray, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to permanently delete these ${selectedItemsCount} documents? This action cannot be undone.`,\n callback: (ok) => {\n if (ok) {\n DocumentActions.bulkDeleteTrashDocuments(table, selectedTrashDocuments, deleteParams);\n BulkSelectActions.deselectAllItems(table);\n const { page, per: size, s: searchData } = query;\n setTimeout(() => {\n DocumentActions.loadTrashedDocuments(table, { page, size, searchData });\n }, 500);\n }\n },\n });\n };\n\n onTaskOwnerChange(owner) {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, records, query } = this.props;\n const searchData = Object.assign(query);\n\n let updateParams = { owner_id: owner.value };\n let selectedTasks = Object.values(selectedItems);\n const unselectedItems = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedTasks = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItems, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the owner of these ${selectedItemsCount} contacts to ${owner.label}?`,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkUpdateTasks(table, selectedTasks, searchData, updateParams);\n this.reloadLeads();\n }\n },\n });\n }\n\n onTaskStatusChange(status) {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, records, query } = this.props;\n const searchData = Object.assign(query);\n\n let updateParams = { status: status.value };\n let selectedTasks = Object.values(selectedItems);\n const unselectedItems = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedTasks = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItems, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the status of these ${selectedItemsCount} contacts to ${status.label}?`,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkUpdateTasks(table, selectedTasks, searchData, updateParams);\n this.reloadLeads();\n }\n },\n });\n }\n\n onTaskCategoryChange(category) {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, records, query } = this.props;\n const searchData = Object.assign(query);\n\n let updateParams = { category: category.value };\n let selectedTasks = Object.values(selectedItems);\n const unselectedItems = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedTasks = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItems, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the category of these ${selectedItemsCount} contacts to ${category.label}?`,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkUpdateTasks(table, selectedTasks, searchData, updateParams);\n this.reloadLeads();\n }\n },\n });\n }\n\n onTaskPriorityChange(priority) {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, records, query } = this.props;\n const searchData = Object.assign(query);\n\n let updateParams = { priority: priority.value };\n let selectedTasks = Object.values(selectedItems);\n const unselectedItems = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedTasks = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItems, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the priority of these ${selectedItemsCount} contacts to ${priority.label}?`,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkUpdateTasks(table, selectedTasks, searchData, updateParams);\n this.reloadLeads();\n }\n },\n });\n }\n\n onTaskDueDateChange(dueDate) {\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, records, query } = this.props;\n const searchData = Object.assign(query);\n\n let momentDueDate;\n\n if (Moment.isMoment(dueDate)) {\n momentDueDate = dueDate;\n } else if (dueDate && dueDate.date && Moment.isMoment(dueDate.date)) {\n momentDueDate = dueDate.date;\n } else if (dueDate instanceof Date) {\n momentDueDate = Moment(dueDate);\n } else {\n console.error('Invalid dueDate format:', dueDate);\n return;\n }\n\n let updateParams = { due_date_at: momentDueDate.format('YYYY-MM-DD') };\n let selectedTasks = Object.values(selectedItems);\n const unselectedItems = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedTasks = 'all';\n updateParams = { ...updateParams, unselected_ids: _lodash.map(unselectedItems, 'id') };\n }\n\n const snoozeDate = momentDueDate.format('dddd, MMMM Do');\n const selectedItemsCount = this.selectedItemsCount();\n\n brokerbit.confirmBox({\n message: `Are you sure you want to change the due date on these ${selectedItemsCount} contacts to ${snoozeDate}?`,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkUpdateTasks(table, selectedTasks, searchData, updateParams);\n this.reloadLeads();\n }\n },\n });\n }\n\n onDeleteTaskClick(e) {\n e.preventDefault();\n\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, query } = this.props;\n const searchData = Object.assign(query);\n\n let deleteData;\n let selectedTasks = Object.values(selectedItems);\n const unselectedItems = Object.values(unSelectedItems);\n\n if (selectAllItems) {\n selectedTasks = 'all';\n deleteData = { ...deleteData, unselected_ids: _lodash.map(unselectedItems, 'id') };\n }\n\n const selectedItemsCount = this.selectedItemsCount();\n const selectedItemsText = pluralize('record', selectedItemsCount, true);\n const pluralPronoun = pluralize('this', selectedItemsCount);\n\n brokerbit.confirmBox({\n message: `Deleting ${pluralPronoun} ${selectedItemsText} will be permanent. Please confirm you want to proceed.`,\n callback: (ok) => {\n if (ok) {\n AgentActions.bulkDeleteTasks(table, selectedTasks, searchData, deleteData);\n BulkSelectActions.deselectAllItems(table);\n this.reloadLeads();\n }\n },\n });\n }\n\n onTaskDescriptionClick(e) {\n e.preventDefault();\n\n const { selectAllItems, unSelectedItems, selectedItems } = this.state;\n const { table, records, query } = this.props;\n const searchData = Object.assign(query);\n\n ReactDOM.render(\n - Deleting this user will remove their system access and delete their Retention record.
- Please review all campaigns to determine if this user is set as a \"Sender\" and change the sender to a different user to avoid messages being sent later as this user.
\n
No documents in trash
\n\n
No documents found
\n\n
{records.error}
\nNo data found
\n\n
\n )}\n\n \n
\n \n );\n }\n\n renderNoLeadsMessage() {\n const { table } = this.props;\n const { tableFilters } = this.state;\n const entity = scopeToEntity[table.scope] || 'leads';\n\n if (Rails.abilities.manageLead) {\n return (\n \n \n Showing\n {' '}\n {from}\n {' '}\n to\n {' '}\n {to}\n {' '}\n of\n {' '}\n {totalCount}\n {' '}\n {entity}\n \n
\n\n {totalPages > 1 && (\n \n \n
\n )}\n \n
\n\n
\n );\n } if (table.scope === 'agent_referrals') {\n return (\n \n No\n {' '}\n {entity}\n {' '}\n here, folks\n
\n\n Congrats, if you're done for the day! Otherwise, change the filter to\n {' '}\n All\n {' '}\n to see everyone's\n {' '}\n {entity}\n {' '}\n and assign some to you.\n
\n\n {!!table.enableProductionFilter && (\n \n\n\n
\n
\n );\n }\n\n return null;\n }\n\n renderLeadHeader() {\n const { tableSortField, tableSortDirection } = this.state;\n const { table } = this.props;\n const { timestamp, scope } = table;\n\n return (\n <>\n {GlobalContainer.product() !== 'retention' && (\n No referrals yet
\nYou're in, let's get started referring!
\n\n
\n \n \n View Trash\n \n
\n );\n }\n\n render() {\n const { table, records, loading } = this.props;\n const { scope } = table;\n const data = records.data || records.documents || [];\n\n const renderContent = () => {\n if (scope === 'documents') {\n return this.renderDocuments();\n }\n if (scope === 'trash_documents') {\n return this.renderTrash();\n }\n return this.renderLeads();\n };\n\n if (data.length === 0 && loading === false) {\n return (\n \n {table.tabs && this.renderTabs()}\n {table.task_tabs && this.renderTaskTabs()}\n\n
\n );\n }\n\n return (\n \n {this.renderNoLeadsMessage()}\n
\n {scope === 'documents' && (this.renderViewTrashButton())}\n \n {table.tabs && this.renderTabs()}\n {table.task_tabs && this.renderTaskTabs()}\n\n
\n );\n }\n}\n\nDataTableContent.contextTypes = {\n handleSearch: PropTypes.func,\n handleTaskSearch: PropTypes.func,\n};\n\nDataTableContent.defaultProps = {\n table: {},\n query: {},\n clickable: true,\n loading: false,\n records: {},\n ownerScope: 'all',\n leadScopeSize: 10,\n tableSortField: {\n column: 'id',\n title: 'ID',\n },\n tableSortDirection: null,\n timestampField: 'referred_at',\n};\n\nDataTableContent.propTypes = {\n table: PropTypes.shape({\n timestamp: PropTypes.shape({}),\n }),\n query: PropTypes.shape({}),\n clickable: PropTypes.bool,\n loading: PropTypes.bool,\n records: PropTypes.shape({}),\n ownerScope: PropTypes.string,\n leadScopeSize: PropTypes.number,\n tableSortField: PropTypes.shape({}),\n tableSortDirection: PropTypes.string,\n timestampField: PropTypes.string,\n};\n\nexport default DataTableContent;\n","import classNames from 'classnames';\nimport autoBind from 'react-autobind';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { PropTypes } from 'prop-types';\nimport { v4 as uuidv4 } from 'uuid';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport brokerbit from '~/lib/brokerbit';\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\nimport { ALL_STATUSES } from '~/components/forms/dropdowns/StatusSelect';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport BulkSelectActions from '~/actions/bulk_select_actions';\nimport TaskActions from '~/actions/task_actions';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport UserAvatar from '~/components/shared/users/user_avatar';\nimport { months } from '~/components/forms/simple_month_picker';\nimport TaskModal from '~/components/modals/task_modal';\n\nimport DocumentActions from '~/actions/document_actions';\nimport DocumentStore from '~/stores/document_store';\nimport EditDocumentModal from '~/components/modals/edit_document_modal';\nimport DocumentLimitAlertChecker from '~/components/shared/document_limit_alert_checker';\n\nimport {\n formatedFileSize, formatedDate, checkIfLimitExceeded,\n} from '~/helpers/document_helpers';\n\nclass DataTableItem extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedRow: false,\n showLimitAlert: false,\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n const {\n selectedKeys, lead, table, document, trash_document,\n } = this.props;\n let selectedRow = false;\n if (table.scope === 'documents' && document) {\n selectedRow = _lodash.includes(selectedKeys, `document-item-${document.id}`);\n } else if (table.scope === 'trash_documents' && trash_document) {\n selectedRow = _lodash.includes(selectedKeys, `trash-document-${trash_document.id}`);\n } else if (lead) {\n selectedRow = _lodash.includes(selectedKeys, `lead-item-${lead.id}`);\n }\n\n this.setState({ selectedRow });\n this.unsubscribe = DocumentStore.addListener(this.onChange);\n }\n\n componentWillUnmount() {\n if (this.unsubscribe) {\n this.unsubscribe.remove();\n }\n }\n\n static getDerivedStateFromProps(props, state) {\n const {\n selectedKeys, lead, table, document, trash_document,\n } = props;\n let selectedRow = false;\n\n if (table.scope === 'documents' && document) {\n selectedRow = _lodash.includes(selectedKeys, `document-item-${document.id}`);\n } else if (table.scope === 'trash_documents' && trash_document) {\n selectedRow = _lodash.includes(selectedKeys, `trash-document-${trash_document.id}`);\n } else if (lead) {\n selectedRow = _lodash.includes(selectedKeys, `lead-item-${lead.id}`);\n }\n\n state.selectedRow = selectedRow;\n\n return state;\n }\n\n handleEditDocumentClick = (e, document) => {\n const { table, query } = this.props;\n e.preventDefault();\n\n ReactDOM.render(\n \n \n \n {this.renderHeader()}\n {renderContent()}\n \n
\n
\n\n {this.renderPagination()}
\n\n {scope === 'documents' && (this.renderViewTrashButton())}\n \n this.handleDownloadDocument(e, document)}\n >\n \n \n \n\n {isAdminOrStaff && (\n <>\n this.handleEditDocumentClick(e, document)}\n >\n \n \n \n this.handleChangeInternalClick(document)}\n >\n \n \n \n this.handleDocumentDelete(e, document)}\n >\n \n \n \n \n )}\n
\n \n {contactsToShow.map((contact) => (\n \n \n ))}\n {showMore && '...'}\n
\n );\n }\n\n renderDocumentRows() {\n const { document } = this.props;\n const { selectedRow } = this.state;\n const documentUrl = `/documents/${document.id}`;\n return (\n <>\n this.onLeadClick(e, contact.id)}>\n {LeadHelpers.renderLeadAvatar(contact, { className: 'mr5' })}\n
\n \n
\n \n
\n \n \n this.handleRestoreDocument(e, trash_document)}\n >\n this.handlePermanentDeleteDocument(e, trash_document)}\n >\n
\n );\n }\n\n renderLeadRows() {\n const { lead, timestampField, table } = this.props;\n const displayCustomStatuses = checkFeatureFlag(process.env.DISPLAY_CUSTOM_STATUSES_FLAG);\n\n return (\n <>\n {GlobalContainer.product() !== 'retention' && (\n \n
\n \n {filterComponent}\n
\n );\n }\n}\n\nDataTableProductionFilter.defaultProps = {\n table: null,\n productions: [],\n onChange: () => false,\n};\n\nDataTableProductionFilter.propTypes = {\n table: PropTypes.shape({}),\n productions: PropTypes.arrayOf(PropTypes.string),\n onChange: PropTypes.func,\n};\n\nexport default DataTableProductionFilter;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nclass DataTableSortLink extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n sortDirection: props.sortDirection,\n };\n\n this.onSortToggle = this.onSortToggle.bind(this);\n this.renderSortTitleContent = this.renderSortTitleContent.bind(this);\n }\n\n onSortToggle(e) {\n e.preventDefault();\n const { sortField, onSortToggle, tableSortField } = this.props;\n const { sortDirection } = this.state;\n\n let newDirection;\n switch (sortDirection) {\n case 'desc':\n newDirection = 'asc';\n break;\n case 'asc':\n newDirection = 'desc';\n break;\n default:\n newDirection = 'asc';\n }\n\n // reset internal sort direction if sort column changed\n if (tableSortField && tableSortField.column !== sortField.column) {\n newDirection = 'asc';\n }\n\n this.setState({\n sortDirection: newDirection,\n });\n\n onSortToggle(sortField, newDirection);\n }\n\n renderSortTitleContent() {\n const { sortField, tableSortField } = this.props;\n let { sortDirection } = this.state;\n\n if (tableSortField && tableSortField.column !== sortField.column) {\n sortDirection = null;\n }\n\n switch (sortDirection) {\n case 'asc':\n return (\n \n {sortField.title}\n {' '}\n \n \n
\n );\n};\n\nDocumentFiltersForm.defaultProps = {\n handleDocumentSearch: () => false,\n};\n\nDocumentFiltersForm.propTypes = {\n handleDocumentSearch: PropTypes.func,\n};\n\nexport default DocumentFiltersForm;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { Form, Input } from 'reactstrap';\nimport { PropTypes } from 'prop-types';\n\nimport AgentActions from '~/actions/agent_actions';\nimport BulkSelectActions from '~/actions/bulk_select_actions';\nimport SearchForm from '~/components/pages/agent_dashboard/search_form';\nimport { getRestrictionScope } from '~/helpers/staffRestrictionHelper';\nimport DocumentActions from '~/actions/document_actions';\n\nclass PageScoping extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n handleScopeChange(e) {\n e.preventDefault();\n const { widgets } = this.props;\n\n const scope = e.target.value;\n\n BulkSelectActions.deselectLeadItems();\n AgentActions.switchOwnerScope(widgets, scope);\n }\n\n handleSizeChange(e) {\n e.preventDefault();\n const { widgets } = this.props;\n\n const size = e.target.value;\n\n const currentScope = widgets.tables[0]?.scope;\n const isDocumentScope = currentScope === 'documents' || currentScope === 'trash_documents';\n\n if (isDocumentScope) {\n DocumentActions.switchDocumentScopeSize(widgets, parseInt(size, 10), SearchForm.buildSearchData());\n } else {\n AgentActions.switchLeadScopeSize(widgets, parseInt(size, 10), SearchForm.buildSearchData());\n }\n }\n\n shouldDisplayOwnerScope() {\n // only show owner scope filter if can manage lead and is not searching - which is not very wise regex test\n return Rails.abilities.manageLead;\n }\n\n render() {\n const { widgets } = this.props;\n let { ownerScope, leadScopeSize, documentScopeSize } = localStorage;\n\n const staffRestriction = getRestrictionScope();\n\n ownerScope = ownerScope || staffRestriction || 'all';\n leadScopeSize = parseInt(leadScopeSize, 10) || 10;\n documentScopeSize = parseInt(documentScopeSize, 10) || 10;\n\n if (widgets.tables.length === 0) {\n return null;\n }\n\n const selectStyle = { display: 'inline-block', width: 'auto', verticalAlign: 'middle' };\n\n const currentScope = widgets.tables[0].scope;\n let leadsScope;\n let scopeSize = leadScopeSize;\n\n if (currentScope === 'documents' || currentScope === 'trash_documents') {\n leadsScope = 'documents';\n scopeSize = documentScopeSize;\n } else if (widgets.leadsScope) {\n leadsScope = GlobalContainer.product() === 'retention' ? 'team members' : 'leads';\n } else {\n leadsScope = 'tasks';\n }\n\n if (widgets.tasksScope) {\n leadsScope = 'leads/tasks';\n }\n const isDocumentsOrTrash = widgets.tables[0].scope === 'documents' || widgets.tables[0].scope === 'trash_documents';\n\n let leadScope;\n if (this.shouldDisplayOwnerScope()) {\n leadScope = (\n \n \n \n {!isDocumentsOrTrash && staffRestriction !== 'mine' && staffRestriction !== 'my+unassigned' && (\n \n )}\n \n \n \n {leadsScope}\n {' '}\n and\n \n \n );\n }\n\n return (\n \n );\n }\n}\n\nPageScoping.defaultProps = {\n widgets: {\n tables: [],\n },\n};\n\nPageScoping.propTypes = {\n widgets: PropTypes.shape({\n tables: PropTypes.arrayOf(PropTypes.shape({})),\n }),\n};\n\nexport default PageScoping;\n","const ReportActionTypes = {\n LOAD_REPORT: 'LOAD_REPORT',\n LOAD_REPORT_DONE: 'LOAD_REPORT_DONE',\n LOAD_REPORT_FAIL: 'LOAD_REPORT_FAIL',\n\n LOAD_JOIN_REPORT: 'LOAD_JOIN_REPORT',\n LOAD_JOIN_REPORT_DONE: 'LOAD_JOIN_REPORT_DONE',\n LOAD_JOIN_REPORT_FAIL: 'LOAD_JOIN_REPORT_FAIL',\n\n LOAD_ACTIVITY: 'LOAD_ACTIVITY',\n LOAD_ACTIVITY_DONE: 'LOAD_ACTIVITY_DONE',\n LOAD_ACTIVITY_FAIL: 'LOAD_ACTIVITY_FAIL',\n};\n\nexport default ReportActionTypes;\n","import AppDispatcher from '~/dispatchers/app_dispatcher';\nimport APIRequest from '~/lib/api_request';\nimport ReportActionTypes from '~/types/report_action_types';\n\nlet loadReportRequest;\nlet loadJoinReportRequest;\nlet loadActivityRequest;\n\nconst ReportActions = {\n loadReport(filters = {}) {\n APIRequest.abort(loadReportRequest);\n\n AppDispatcher.dispatch({\n type: ReportActionTypes.LOAD_REPORT,\n });\n\n loadReportRequest = APIRequest.get({\n resource: '/v1/reports',\n data: {\n filters,\n },\n });\n\n loadReportRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: ReportActionTypes.LOAD_REPORT_FAIL,\n error,\n });\n\n return;\n }\n AppDispatcher.dispatch({\n type: ReportActionTypes.LOAD_REPORT_DONE,\n recordGroups: response.body.data,\n summaryCount: response.body.summary_count,\n summaryYTD: response.body.summary_ytd,\n });\n });\n },\n\n loadJoinReport(filters = {}) {\n APIRequest.abort(loadJoinReportRequest);\n\n AppDispatcher.dispatch({\n type: ReportActionTypes.LOAD_JOIN_REPORT,\n });\n\n loadJoinReportRequest = APIRequest.get({\n resource: '/v1/join_reports',\n data: {\n filters,\n },\n });\n\n loadJoinReportRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: ReportActionTypes.LOAD_JOIN_REPORT_FAIL,\n error,\n });\n\n return;\n }\n AppDispatcher.dispatch({\n type: ReportActionTypes.LOAD_JOIN_REPORT_DONE,\n recordGroups: response.body.data,\n });\n });\n },\n\n loadActivityData(params = {}) {\n APIRequest.abort(loadActivityRequest);\n\n AppDispatcher.dispatch({\n type: ReportActionTypes.LOAD_ACTIVITY,\n });\n\n loadActivityRequest = APIRequest.get({\n resource: '/v1/activity',\n data: { ...params },\n });\n\n loadActivityRequest.end((error, response) => {\n if (error) {\n AppDispatcher.dispatch({\n type: ReportActionTypes.LOAD_ACTIVITY_FAIL,\n error,\n });\n\n return;\n }\n\n AppDispatcher.dispatch({\n type: ReportActionTypes.LOAD_ACTIVITY_DONE,\n activityData: response.body,\n totalPages: response.body.pagy?.total_pages || 1,\n currentPage: response.body.pagy?.current_page || 1,\n totalItems: response.body.pagy?.total_items || 0,\n perPage: response.body.pagy?.per_page || 10,\n lastPage: response.body.pagy?.last_page || 1,\n startItem: response.body.pagy?.from || 0,\n endItem: response.body.pagy?.to || 0,\n });\n });\n },\n\n};\n\nexport default ReportActions;\n","import { ReduceStore } from 'flux/utils';\nimport AppDispatcher from '~/dispatchers/app_dispatcher';\nimport ReportActionTypes from '~/types/report_action_types';\nimport LeadDrawerActionTypes from '~/types/lead_drawer_action_types';\n\nclass ReportStore extends ReduceStore {\n constructor() {\n super(AppDispatcher);\n }\n\n getInitialState() {\n return {\n loadingReport: false,\n loadingActivity: false,\n recordGroups: [],\n summaryCount: null,\n summaryYTD: null,\n reportStoreAction: null,\n activityData: [],\n };\n }\n\n loadReport(state, action) {\n const newState = { ...state };\n\n newState.loadingReport = true;\n\n return newState;\n }\n\n loadReportDone(state, action) {\n const newState = { ...state };\n newState.loadingReport = false;\n newState.recordGroups = action.recordGroups;\n newState.summaryCount = action.summaryCount;\n newState.summaryYTD = action.summaryYTD;\n newState.reportStoreAction = 'loadReportDone';\n\n return newState;\n }\n\n loadReportFail(state, action) {\n const newState = { ...state };\n\n newState.loadingReport = false;\n newState.reportStoreAction = 'loadReportFail';\n\n return newState;\n }\n\n loadJoinReport(state, action) {\n const newState = { ...state };\n\n newState.loadingJoinReport = true;\n\n return newState;\n }\n\n loadJoinReportDone(state, action) {\n const newState = { ...state };\n\n newState.loadingJoinReport = false;\n newState.recordGroups = { ...newState.recordGroups, ...action.recordGroups };\n newState.reportStoreAction = 'loadJoinReportDone';\n\n return newState;\n }\n\n loadJoinReportFail(state, action) {\n const newState = { ...state };\n\n newState.loadingJoinReport = false;\n newState.reportStoreAction = 'loadJoinReportFail';\n\n return newState;\n }\n\n updateLeadDone(state, action) {\n const newState = { ...state };\n\n const { lead } = action;\n if (!lead.rating) return state;\n\n const records = newState.recordGroups[lead.rating];\n if (!records) return state;\n\n let recordsLen = records.length;\n // TODO: is there any performance problem?\n while (recordsLen--) { // eslint-disable-line\n const item = records[recordsLen];\n if (item && item.id === lead.id) {\n newState.recordGroups[lead.rating][recordsLen] = lead;\n\n break;\n }\n }\n\n return newState;\n }\n\n loadActivity(state, action) {\n const newState = { ...state };\n\n newState.loadingActivity = true;\n newState.activityData = action.activityData;\n newState.lastPage = action.lastPage;\n newState.currentPage = action.currentPage;\n\n return newState;\n }\n\n loadActivityDone(state, action) {\n const newState = { ...state };\n newState.loadingActivity = false;\n newState.activityData = action.activityData;\n newState.lastPage = action.lastPage;\n newState.currentPage = action.currentPage;\n newState.reportStoreAction = 'loadActivityDone';\n\n return newState;\n }\n\n loadActivityFail(state, action) {\n const newState = { ...state };\n\n newState.loadingActivity = false;\n newState.reportStoreAction = 'loadActivityFail';\n\n return newState;\n }\n\n reduce(state, action) {\n switch (action.type) {\n case ReportActionTypes.LOAD_REPORT:\n return this.loadReport(state, action);\n case ReportActionTypes.LOAD_REPORT_DONE:\n return this.loadReportDone(state, action);\n case ReportActionTypes.LOAD_REPORT_FAIL:\n return this.loadReportFail(state, action);\n case ReportActionTypes.LOAD_JOIN_REPORT:\n return this.loadJoinReport(state, action);\n case ReportActionTypes.LOAD_JOIN_REPORT_DONE:\n return this.loadJoinReportDone(state, action);\n case ReportActionTypes.LOAD_JOIN_REPORT_FAIL:\n return this.loadJoinReportFail(state, action);\n case LeadDrawerActionTypes.UPDATE_LEAD_DONE:\n return this.updateLeadDone(state, action);\n case ReportActionTypes.LOAD_ACTIVITY:\n return this.loadActivity(state, action);\n case ReportActionTypes.LOAD_ACTIVITY_DONE:\n return this.loadActivityDone(state, action);\n case ReportActionTypes.LOAD_ACTIVITY_FAIL:\n return this.loadActivityFail(state, action);\n default:\n return state;\n }\n }\n}\n\nexport default new ReportStore();\n","const hasOrganizationId = Rails?.helpers?.currentTeam?.organization_id;\nconst hasAdminRole = Rails?.helpers?.currentUser?.role?.name === 'admin';\n\nconst PIPELINE_LEVEL_OPTIONS = [\n { value: 'account', label: 'Account' },\n ...(hasOrganizationId && hasAdminRole ? [{ value: 'organization', label: 'Organization' }] : []),\n];\n\nconst ACTIVITY_LEVEL_OPTIONS = [\n { value: 'account', label: 'Account' },\n ...(hasOrganizationId ? [{ value: 'organization', label: 'Organization' }] : []),\n];\n\nexport { PIPELINE_LEVEL_OPTIONS, ACTIVITY_LEVEL_OPTIONS };\n","export const REPORT_DATES_OPTIONS = [\n { value: 'this_week', label: 'This Week' },\n { value: 'last_week', label: 'Last Week' },\n { value: 'this_month', label: 'This Month' },\n { value: 'last_month', label: 'Last Month' },\n { value: 'this_year', label: 'This Year' },\n { value: 'last_year', label: 'Prior Year' },\n];\n","import classNames from 'classnames';\nimport React from 'react';\nimport ReactPaginate from 'react-paginate';\nimport { PropTypes } from 'prop-types';\nimport { Container } from 'flux/utils';\nimport Moment from 'moment';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Humanize from 'humanize-plus';\n\nimport APIRequest from '~/lib/api_request';\nimport ReportActions from '~/actions/report_actions';\nimport ReportStore from '~/stores/report_store';\n\nimport Tooltipable from '~/components/effects/tooltipable';\nimport ReportTable from './report_card/report_table';\nimport DataTableSortLink from './data_table/data_table_sort_link';\n\nimport Select from '~/components/forms/dropdowns/SelectWrapper/Select';\nimport { TeammatePicker } from '~/components/forms/team_member_picker';\n\n// Constants\nimport { generateDateOptions } from '~/constants/dropdowns/MonthOptions';\nimport { REPORT_DATES_OPTIONS } from '~/constants/dropdowns/ReportDatesOptions';\nimport { PIPELINE_LEVEL_OPTIONS, ACTIVITY_LEVEL_OPTIONS } from '~/constants/dropdowns/ReportLevelOptions';\n\nconst activityTabColum = {\n num_of_agent_joind: [],\n num_of_appoint_set: [],\n num_of_appoint_logged: [],\n sum_of_completed_tasks: [],\n num_of_email_sent: [],\n num_of_text_sent: [],\n num_of_calls_logged: [],\n contacts_made: [],\n recruiting_contacts: [],\n pipeline_prod: [],\n recruited_prod: [],\n};\n\nconst { currentTeam, currentUser } = Rails.helpers;\nconst staffRole = currentUser?.role?.name === 'staff';\nconst restrictRecruitingStaffRoleAccess = (currentTeam && currentUser) && (currentTeam.staff_role_access_in_recruiting === 'mine' && staffRole);\n\nclass ReportCard extends React.Component {\n static getStores() {\n return [ReportStore];\n }\n\n static calculateState(prevState) {\n const reportStoreState = ReportStore.getState();\n return {\n ...prevState,\n reportStoreState,\n lastPage: reportStoreState.lastPage,\n currentPage: reportStoreState.currentPage,\n };\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n currentTab: 'recruiting',\n tabName: 'Pipeline',\n selectedDateFilter: { value: 'this_month', label: 'This Month' },\n selectedLevelFilter: { value: 'account', label: 'Account' },\n showTeams: false,\n tableSortField: { column: 'name', title: 'Name' },\n tableSortDirection: null,\n ownerID: restrictRecruitingStaffRoleAccess ? currentUser.id : null,\n selectedLevelFilterOnPipeline: { value: 'account', label: 'Account' },\n currentPage: 1,\n recordsPerPage: 10,\n lastPage: 1,\n };\n\n this.onTeamMemberChange = this.onTeamMemberChange.bind(this);\n this.onJoinedMonthChange = this.onJoinedMonthChange.bind(this);\n this.handleDownloadClick = this.handleDownloadClick.bind(this);\n this.onSortToggle = this.onSortToggle.bind(this);\n this.handleActivityDownloadClick = this.handleActivityDownloadClick.bind(this);\n this.handlePageClick = this.handlePageClick.bind(this);\n }\n\n componentDidMount() {\n this.fetchReportData();\n }\n\n handleLevelFilterOnPipeline = (selectedOption) => {\n if (!selectedOption?.value) {\n return;\n }\n\n const {\n joinedMonth, ownerID,\n } = this.state;\n const reportParams = {\n month: joinedMonth,\n level: selectedOption.value,\n ...(ownerID && { owner_id: ownerID }),\n };\n\n this.setState({ selectedLevelFilterOnPipeline: selectedOption }, () => {\n ReportActions.loadReport(reportParams);\n });\n }\n\n handlePageClick = (data) => {\n const selected = data.selected + 1; // Adjusting for ReactPaginate's 0-indexed pages\n this.setState({ currentPage: selected }, () => {\n this.fetchActivityData();\n });\n };\n\n handleRecordsPerPageChange = (e) => {\n const recordsPerPage = parseInt(e.target.value, 10);\n this.setState({ recordsPerPage, currentPage: 1 }, () => {\n this.fetchActivityData();\n });\n }\n\n handleDateFilter = (selectedOption) => {\n this.setState({ selectedDateFilter: selectedOption }, () => {\n this.fetchActivityData();\n });\n }\n\n handleLevelFilter = (selectedOption) => {\n const showTeams = selectedOption.value === 'organization';\n this.setState({ selectedLevelFilter: selectedOption, showTeams }, () => {\n this.fetchActivityData();\n });\n }\n\n handleDownloadClick(e) {\n e.preventDefault();\n\n this.setState({ downloading: true });\n\n const { ownerID, selectedLevelFilterOnPipeline } = this.state;\n let url;\n\n if (ownerID) {\n url = `${\n Rails.apiUrl\n }/api/v1/reports.xls?filters[owner_id]=${ownerID}&filters[level]=${selectedLevelFilterOnPipeline?.value}&auth=${\n Rails.helpers.authToken\n }`;\n } else {\n url = `${Rails.apiUrl}/api/v1/reports.xls?filters[level]=${selectedLevelFilterOnPipeline?.value}&auth=${\n Rails.helpers.authToken\n }`;\n }\n\n window.location = url;\n\n setTimeout(() => {\n this.setState({ downloading: false });\n }, 5000);\n }\n\n handleActivityDownloadClick(e) {\n e.preventDefault();\n\n const {\n selectedDateFilter, selectedLevelFilter,\n } = this.state;\n const date = selectedDateFilter?.value || 'this_month';\n const level = selectedLevelFilter?.value || 'account';\n\n const data = {\n level,\n auth: Rails.helpers.authToken,\n timeframe: date,\n download: true,\n };\n\n const params = new URLSearchParams(data);\n const url = `${Rails.apiUrl}/api/v1/activity.xls?${params.toString()}`;\n\n window.open(url, '_blank');\n }\n\n handleShareableClick(e) {\n e.preventDefault();\n const windowReference = window.open();\n\n APIRequest.get({ resource: '/v1/auth/token/report' }).end((err, res) => {\n if (res.body.token) {\n windowReference.location = `/r/pipeline?auth=${res.body.token}`;\n } else {\n GlobalContainer.error(\n 'Unable to authenticate for reports, please contact support',\n 'error',\n );\n }\n });\n }\n\n onTeamMemberChange(change) {\n const { joinedMonth, selectedLevelFilterOnPipeline } = this.state;\n if (change && change.value) {\n this.setState({\n ownerID: change.value,\n }, () => {\n ReportActions.loadReport({\n owner_id: change.value,\n month: joinedMonth,\n level: selectedLevelFilterOnPipeline.value,\n });\n });\n } else {\n this.setState({\n ownerID: null,\n }, () => {\n ReportActions.loadReport({\n month: joinedMonth,\n level: selectedLevelFilterOnPipeline.value,\n });\n });\n }\n }\n\n onJoinedMonthChange(month) {\n const { ownerID } = this.state;\n const value = month?.value || '';\n\n this.setState({\n joinedMonth: value,\n });\n\n ReportActions.loadJoinReport({\n owner_id: ownerID,\n month: value,\n });\n }\n\n onSortToggle(sortField, sortDirection) {\n const {\n selectedDateFilter, selectedLevelFilter, currentPage, recordsPerPage,\n } = this.state;\n const date = selectedDateFilter?.value || 'this_month';\n const level = selectedLevelFilter?.value || 'account';\n\n this.setState({\n tableSortField: sortField,\n tableSortDirection: sortDirection,\n });\n\n Object.keys(activityTabColum).forEach((key) => activityTabColum[key] = []);\n ReportActions.loadActivityData({\n timeframe: date, level, sort_column: `${sortField.column}_${sortDirection}`, page: currentPage, per_page: recordsPerPage,\n });\n }\n\n manageActivityTabs = (tabName) => {\n this.setState({ tabName }, () => { tabName === 'Activity' && this.renderActivityTableData(); });\n }\n\n showTeamDisplayStyle = () => {\n const { showTeams } = this.state;\n const showTeamStyle = showTeams ? 'table-cell' : 'none';\n\n return showTeamStyle;\n }\n\n sumOfTableRow = (tableRowData) => {\n const columns = {\n num_of_agent_joind: 'no_of_agents_joined',\n num_of_appoint_set: 'appt_set',\n num_of_appoint_logged: 'appt_logged',\n sum_of_completed_tasks: 'num_of_completed_tasks',\n num_of_email_sent: 'emails_sent',\n num_of_text_sent: 'messages_sent',\n num_of_calls_logged: 'calls_logged',\n contacts_made: 'contacts_made',\n recruiting_contacts: 'recruiting_contacts',\n pipeline_prod: 'pipeline_prod',\n recruited_prod: 'recruited_prod',\n };\n\n Object.keys(activityTabColum).forEach((key) => {\n if (tableRowData[columns[key]]) {\n activityTabColum[key].push(tableRowData[columns[key]]);\n }\n });\n }\n\n switchTab(tabKey) {\n this.setState({\n currentTab: tabKey,\n });\n }\n\n fetchReportData() {\n const { ownerID, selectedLevelFilterOnPipeline } = this.state;\n let params = ownerID ? { owner_id: ownerID } : {};\n params = {\n ...params,\n level: selectedLevelFilterOnPipeline.value,\n };\n\n ReportActions.loadReport(params);\n }\n\n fetchActivityData() {\n const {\n currentPage, recordsPerPage, lastPage, selectedDateFilter, selectedLevelFilter,\n } = this.state;\n\n const params = {\n page: currentPage,\n per_page: recordsPerPage,\n timeframe: selectedDateFilter.value,\n level: selectedLevelFilter.value,\n last_page: lastPage,\n };\n\n ReportActions.loadActivityData(params);\n }\n\n fetchSpecialRecords() {\n // Joined, Signed\n const { recordGroups } = ReportStore.getState();\n const { currentTab } = this.state;\n const { 11: joinedRecords = [], 12: signedRecords = [], ...recruitingRecords } = recordGroups;\n\n const retentionTabs = [\n {\n title: 'Recruiting',\n key: 'recruiting',\n selected: currentTab === 'recruiting',\n records: recruitingRecords,\n },\n {\n title: 'Onboarding',\n key: 'onboarding',\n selected: currentTab === 'onboarding',\n records: signedRecords,\n },\n {\n title: 'Retention',\n key: 'retention',\n selected: currentTab === 'retention',\n records: joinedRecords,\n },\n ];\n\n return retentionTabs;\n }\n\n renderFooter = () => {\n const { activityData, currentPage, lastPage } = ReportStore.getState();\n\n const noOwnerData = activityData.no_owner || {};\n\n const totals = {\n recruiting_contacts: 0,\n num_of_completed_tasks: 0,\n emails_sent: 0,\n calls_logged: 0,\n messages_sent: 0,\n contacts_made: 0,\n appt_set: 0,\n appt_logged: 0,\n no_of_agents_joined: 0,\n pipeline_prod: 0,\n recruited_prod: 0,\n };\n\n activityData.records.forEach((record) => {\n Object.keys(totals).forEach((key) => {\n const valueToAdd = Number(record[key]) || 0;\n totals[key] += valueToAdd;\n });\n });\n\n if (currentPage === lastPage && noOwnerData) {\n Object.keys(totals).forEach((key) => {\n const additionalValue = Number(noOwnerData[key]) || 0;\n totals[key] += additionalValue;\n });\n }\n\n return (\n <>\n \n
\n );\n } else if (recruitTable.records && recruitTable.records.length > 0) {\n tabContentItem = (\n \n
Gathering report...
\n\n
\n );\n }\n\n const tabContentWrapper = (\n No Leads Found
\n\n {tabContentItem}\n
\n );\n\n tabContent.push(tabContentWrapper);\n });\n\n return {tabContent}
;\n }\n\n renderSpecialRecordsList() {\n const { loadingReport, recordGroups } = ReportStore.getState();\n\n if (loadingReport || !recordGroups || _lodash.isEmpty(recordGroups)) return null;\n\n return (\n \n
\n );\n }\n\n renderRecordsList() {\n const { loadingReport, recordGroups } = ReportStore.getState();\n const { clickable } = this.props;\n const { selectedLevelFilterOnPipeline } = this.state;\n\n if (loadingReport || !recordGroups || _lodash.isEmpty(recordGroups)) return null;\n\n const reportTables = [];\n for (let i = 10; i > 0; i -= 1) {\n const records = recordGroups[i.toString()];\n\n if (records && records.length > 0) {\n reportTables.push(\n <>\n {this.renderTabs()}
\n {this.renderTabContent()}\n \n
\n ,\n );\n }\n }\n\n return reportTables;\n }\n\n renderRecruitingTabs = () => (\n - \n
- \n this.manageActivityTabs('Pipeline')} id=\"pipeLine-tab\" data-toggle=\"tab\" href=\"#pipeLine\" role=\"tab\" aria-controls=\"pipeLine\" aria-selected=\"true\">\n Pipeline\n \n \n
- \n this.manageActivityTabs('Activity')} id=\"profile-tab\" data-toggle=\"tab\" href=\"#profile\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\">\n Activity\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
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| No owner | \n {this.renderFooterOfOwner(activityData)}\n||||||||||||||
| Total | \n {this.renderFooter()}\n
\n
\n )}\n \n
Gathering data...
\n\n {this.renderPagination()}\n
\n \n {this.renderPaginationControls()}\n
\n \n ) : (\n \n
\n )\n );\n }\n\n renderPagination() {\n const { reportStoreState } = this.state;\n if (!reportStoreState.activityData || !reportStoreState.activityData.pagy) {\n return null;\n }\n\n const { pagy } = reportStoreState.activityData;\n\n return (\n \n
Gathering data...
\n\n
\n );\n }\n\n renderPaginationControls() {\n const { recordsPerPage } = this.state;\n\n return (\n \n );\n }\n\n renderFooterOfOwner = (activityData) => {\n const {\n no_of_agents_joined, appt_set, appt_logged, num_of_completed_tasks,\n emails_sent, messages_sent, calls_logged, recruiting_contacts, contacts_made,\n pipeline_prod, recruited_prod,\n } = { ...activityData.no_owner };\n\n this.sumOfTableRow(activityData.no_owner);\n\n return (\n <>\n \n
\n \n { `Showing ${pagy.from} to ${pagy.to} of ${pagy.total_items} users` }\n
\n \n { pagy.total_pages > 1 && (\n \n )}\n
\n \n
\n );\n }\n\n return (\n \n
\n );\n }\n\n renderSummary() {\n const { loadingReport, summaryCount, summaryYTD } = ReportStore.getState();\n\n if (loadingReport) {\n return (\n - {tabs}
\n
\n );\n }\n\n return (\n \n
Gathering report...
\n\n
\n );\n }\n\n renderActivityHtml = () => {\n const { selectedDateFilter, selectedLevelFilter } = this.state;\n\n return (\n <>\n \n This month\n {' '}\n {summaryCount}\n {' '}\n new agents are joining,\n with the last 12 month total production of\n {' '}\n \n $\n {Humanize.compactInteger(summaryYTD, 1)}\n \n
\n\n
\n\n \n \n this.handleDateFilter(opt)}\n placeholder=\"--- Select ---\"\n isSearchable\n />\n
\n \n \n this.handleLevelFilter(opt)}\n placeholder=\"--- Select ---\"\n isSearchable\n />\n
\n \n {this.renderActivtyTableRecord()}\n
\n \n );\n }\n\n renderActivityTableData = () => {\n const { selectedDateFilter, selectedLevelFilter } = this.state;\n const date = selectedDateFilter?.value || 'this_month';\n const level = selectedLevelFilter?.value || 'account';\n\n ReportActions.loadActivityData({ timeframe: date, level });\n\n Object.keys(activityTabColum).forEach((key) => activityTabColum[key] = []);\n }\n\n render() {\n const { shareable } = this.props;\n const { downloading, ownerID, tabName } = this.state;\n const { selectedLevelFilterOnPipeline } = this.state;\n\n let downloadButton = (\n \n {this.renderRecruitingTabs()}\n
\n\n { tabName === 'Activity' && (\n \n
\n )}\n\n { tabName === 'Pipeline' && (\n \n
\n \n
\n {this.renderActivityHtml()}\n \n {downloadActivityButton}\n {shareable && !restrictRecruitingStaffRoleAccess && (\n \n
\n Recruiting Activity Dashboard
\n\n
\n )}\n \n );\n }\n}\n\nReportCard.defaultProps = {\n clickable: true,\n downloadable: true,\n shareable: true,\n code: null,\n};\n\nReportCard.propTypes = {\n clickable: PropTypes.bool,\n downloadable: PropTypes.bool,\n shareable: PropTypes.bool,\n code: PropTypes.string,\n};\n\nexport default Container.create(ReportCard);\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport UserAvatar from '~/components/shared/users/user_avatar';\n\nclass ReportItem extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n handleRecordClick(e) {\n e.preventDefault();\n\n const {\n record, recordIndex, recordsLength, clickable, handleReportPrevClick, handleReportNextClick,\n } = this.props;\n\n if (clickable === false) return;\n\n this.context.helpers.openLeadDrawer({\n loadLeadID: record.id,\n reportItemIndex: recordIndex,\n recordsLength,\n handleReportPrevClick,\n handleReportNextClick,\n });\n }\n\n renderDate(date) {\n if (!date) return null;\n\n const diff = Moment(date).diff(Moment(), 'h');\n if (diff > -24) {\n // less than 24 hours ago\n return 'Today';\n }\n return Moment(date).fromNow();\n }\n\n render() {\n const { record, showOwner } = this.props;\n\n return (\n \n
\n {this.renderSpecialRecordsList()}\n \n
\n \n
\n\n \n {downloadButton}\n {shareable && !restrictRecruitingStaffRoleAccess && (\n \n
\n Live Pipeline Report
\n\n
\n {this.renderSummary()}\n \n \n
\n \n \n this.handleLevelFilterOnPipeline(opt)}\n placeholder=\"--- Select ---\"\n />\n
\n | \n {showRating\n && (\n \n {rating}\n {' '}\n -\n {' '}\n {LeadHelpers.renderRatingText(rating)}\n \n )}\n | \n {showOwner && (Account | )}\n$12 MO | \nReferred | \n1st Appt | \nLast Appt | \nLast Contact | \n\n |
|---|
\n \n ×\n \n
\n\n Limited Access
\n\n\n
\n\n \n Oops! Limited Access.\n
\n The "Blast Team" option is available only for users with the admin role.\n Please check with one of your admins to get your role updated if needed.\n
\n \n The "Blast Team" option is available only for users with the admin role.\n Please check with one of your admins to get your role updated if needed.\n
\n \n Cancel\n \n
\n \n );\n }\n\n render() {\n const { searchData } = this.state;\n\n return (\n \n \n
\n );\n }\n}\n\nSearchForm.contextTypes = {\n history: PropTypes.shape({}),\n location: PropTypes.shape({}),\n match: PropTypes.shape({}),\n handleSearch: PropTypes.func,\n};\n\nSearchForm.defaultProps = {\n handleSearch: () => false,\n};\n\nSearchForm.propTypes = {\n handleSearch: PropTypes.func,\n};\n\nexport default SearchForm;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Input } from 'reactstrap';\n\nimport {\n OwnerPicker,\n ReferrerPicker,\n} from '~/components/forms/team_member_picker';\nimport {\n BucketSelect,\n ProductionLabelSelect,\n RatingSelect,\n SourceSelect,\n CompanySelect,\n CitySelect,\n EngagementSelect,\n EngagementTimePeriodSelect,\n RoleSelect,\n} from '~/components/forms/lead_fields';\nimport LabelSelect from '~/components/forms/lead_fields/label_select';\nimport ProductionSelect from '~/components/forms/lead_fields/production_select';\nimport CampaignPicker from '~/components/forms/campaign_picker';\nimport SimpleMonthPicker from '~/components/forms/simple_month_picker';\nimport StatusSelect from '~/components/forms/dropdowns/StatusSelect';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\n\nconst processPickerValue = (value) => {\n if (!value || value.length === 0) return null;\n\n return value;\n};\n\nconst ArchivedSearchFilters = ({\n searchData,\n clearSearch,\n hideFilters,\n handleSingleSelectChange,\n handleMultiSelectChange,\n handleDateSelectChange,\n handleCheckBoxClick,\n}) => {\n const ownerValue = processPickerValue(searchData.owner);\n const referrerValue = processPickerValue(searchData.referrer);\n const productionValue = processPickerValue(searchData.production);\n const productionSelectValue = processPickerValue(searchData.production_select_value);\n const EngagementSelectValue = processPickerValue(searchData.engagement);\n const rolesValue = processPickerValue(searchData.role);\n const anniversaryMonthValue = processPickerValue(searchData.anniversary_month);\n const statusesValue = processPickerValue(searchData.status);\n const sourceValue = processPickerValue(searchData.source);\n const ratingsValue = processPickerValue(searchData.rating);\n const companiesValue = processPickerValue(searchData.currently_at);\n const bucketsValue = processPickerValue(searchData.bucket);\n const campaignsValue = processPickerValue(searchData.campaign);\n const citiesValue = processPickerValue(searchData.city);\n const labelsValue = processPickerValue(searchData.label);\n const engagementTimePeriodValue = processPickerValue(searchData.engagement_time_period);\n const referredAtStart = processPickerValue(searchData.referred_at_start);\n const referredAtEnd = processPickerValue(searchData.referred_at_end);\n const dueDateAtStart = processPickerValue(searchData.due_date_at_start);\n const dueDateAtEnd = processPickerValue(searchData.due_date_at_end);\n const lastActivityAtStart = processPickerValue(searchData.last_activity_at_start);\n const lastActivityAtEnd = processPickerValue(searchData.last_activity_at_end);\n const lastAppointmentAtStart = processPickerValue(searchData.last_appointment_at_start);\n const lastAppointmentAtEnd = processPickerValue(searchData.last_appointment_at_end);\n const birthdayStart = processPickerValue(searchData.birthday_start);\n const birthdayEnd = processPickerValue(searchData.birthday_end);\n const joinedAtStart = processPickerValue(searchData.joined_at_start);\n const joinedAtEnd = processPickerValue(searchData.joined_at_end);\n const licenseExpDateStart = processPickerValue(searchData.license_exp_date_start);\n const licenseExpDateEnd = processPickerValue(searchData.license_exp_date_end);\n\n const EngagementClasses = EngagementSelectValue ? 'col-lg-2 col-md-4' : 'col-md-4';\n\n return (\n \n
\n\n {this.renderFilters()}\n \n \n
\n \n \n \n \n \n\n {GlobalContainer.product() === 'retention' && (\n \n
\n \n \n
\n )}\n \n \n Text Team\n \n \n Email Team\n \n
\n \n \n\n
\n );\n};\n\nArchivedSearchFilters.defaultProps = {\n searchData: {},\n clearSearch: () => false,\n handleSingleSelectChange: () => false,\n handleMultiSelectChange: () => false,\n handleDateSelectChange: () => false,\n handleCheckBoxClick: () => false,\n};\n\nArchivedSearchFilters.propTypes = {\n searchData: PropTypes.shape({}),\n clearSearch: PropTypes.func,\n hideFilters: PropTypes.func.isRequired,\n handleSingleSelectChange: PropTypes.func,\n handleMultiSelectChange: PropTypes.func,\n handleDateSelectChange: PropTypes.func,\n handleCheckBoxClick: PropTypes.func,\n};\n\nexport default ArchivedSearchFilters;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport { TeammatePicker } from '~/components/forms/team_member_picker';\nimport DocumentActions from '~/actions/document_actions';\nimport DocumentStore from '~/stores/document_store';\n\nconst processPickerValue = (value) => {\n if (!value || value.length === 0) return null;\n return value;\n};\n\nconst DocumentSearchFilters = ({\n searchData,\n clearSearch,\n hideFilters,\n handleSingleSelectChange,\n handleDateSelectChange,\n handleMultiSelectChange,\n}) => {\n const [categories, setCategories] = useState([]);\n const [statuses, setStatuses] = useState([]);\n\n useEffect(() => {\n const documentStoreListener = DocumentStore.addListener(() => {\n const { categories, statuses, lastDocumentStoreAction } = DocumentStore.getState();\n\n if (lastDocumentStoreAction === 'loadCategoriesDone') {\n setCategories(categories);\n }\n\n if (lastDocumentStoreAction === 'loadStatusesDone') {\n setStatuses(statuses);\n }\n });\n\n DocumentActions.loadCategories();\n DocumentActions.loadStatuses();\n\n return () => {\n documentStoreListener.remove();\n };\n }, []);\n\n const uploaded_at = processPickerValue(searchData.uploaded_at);\n\n return (\n \n
\n\n \n \n {\n handleMultiSelectChange('owner', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('referrer', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('production', selectedOptions);\n }}\n blank\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('role', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('status', selectedOptions);\n }}\n isMulti\n isClearable\n isSearchable\n />\n
\n\n \n \n handleSingleSelectChange('anniversary_month', val ? val.value : '')}\n />\n
\n\n \n \n {\n handleMultiSelectChange('source', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('rating', selectedOptions);\n }}\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('currently_at', selectedOptions);\n }}\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('bucket', selectedOptions);\n }}\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('campaign', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('city', selectedOptions);\n }}\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('label', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n handleSingleSelectChange('engagement', val ? val.value : '')}\n clearable\n />\n
\n\n {EngagementSelectValue && (\n \n \n handleSingleSelectChange('engagement_time_period', val ? val.value : '')}\n />\n
\n )}\n \n
\n\n \n \n {\n handleDateSelectChange('referred_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('referred_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('due_date_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('due_date_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('last_activity_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('last_activity_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('last_appointment_at_end', date);\n }}\n />\n
\n \n {\n handleDateSelectChange('last_appointment_at_start', date);\n }}\n />\n
\n\n \n
\n\n \n \n {\n handleDateSelectChange('birthday_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('birthday_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('joined_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('joined_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('license_exp_date_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('license_exp_date_start', date);\n }}\n />\n
\n\n \n \n
\n \n handleSingleSelectChange('production_select_value', val ? val.value : '')}\n clearable\n />\n
\n\n {productionSelectValue && (\n \n
\n )}\n \n {\n handleSingleSelectChange('production_start_value', v.target.value);\n }}\n />\n
\n\n \n {\n handleSingleSelectChange('production_end_value', v.target.value);\n }}\n />\n
\n \n
\n \n \n
\n \n \n\n
\n );\n};\n\nDocumentSearchFilters.defaultProps = {\n searchData: {},\n clearSearch: () => false,\n handleSingleSelectChange: () => false,\n handleDateSelectChange: () => false,\n handleMultiSelectChange: () => false,\n};\n\nDocumentSearchFilters.propTypes = {\n searchData: PropTypes.shape({}),\n clearSearch: PropTypes.func,\n hideFilters: PropTypes.func.isRequired,\n handleSingleSelectChange: PropTypes.func,\n handleDateSelectChange: PropTypes.func,\n handleMultiSelectChange: PropTypes.func,\n};\n\nexport default DocumentSearchFilters;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Input } from 'reactstrap';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n OwnerPicker,\n ReferrerPicker,\n} from '~/components/forms/team_member_picker';\nimport {\n BucketSelect,\n ProductionLabelSelect,\n RatingSelect,\n SourceSelect,\n CompanySelect,\n CitySelect,\n ClosestOfficeSelect,\n ClosestOfficeAddressSelect,\n EngagementSelect,\n EngagementTimePeriodSelect,\n ProductionOfficeZipSelect,\n CurrentSwitchRiskSelect,\n EffectivenessGradeSelect,\n LeadOfficeZipSelect,\n} from '~/components/forms/lead_fields';\nimport LabelSelect from '~/components/forms/lead_fields/label_select';\nimport ProductionSelect from '~/components/forms/lead_fields/production_select';\nimport ProductionInsightsSelect from '~/components/forms/lead_fields/production_insights_select';\nimport ProductionDatesSelect from '~/components/forms/lead_fields/production_dates_select';\nimport ProductionLocationSelect from '~/components/forms/lead_fields/production_location_select';\nimport CampaignPicker from '~/components/forms/campaign_picker';\nimport StatusSelect from '~/components/forms/dropdowns/StatusSelect';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport {\n relitixProductionFilterTooltip,\n relitixProductionInsightsFilterTooltip,\n relitixProductionLocationFilterTooltip,\n relitixProductionDatesFilterTooltip,\n} from '~/constants/tooltips/RelitixAdvancedSearchTooltips';\n\nconst processPickerValue = (value) => {\n if (!value || value.length === 0) return null;\n\n return value;\n};\n\nconst RecruitingSearchFilters = ({\n searchData,\n clearSearch,\n hideFilters,\n handleSingleSelectChange,\n handleMultiSelectChange,\n handleDateSelectChange,\n handleCheckBoxClick,\n}) => {\n const productionSelectValue = processPickerValue(searchData.production_select_value);\n const productionInsightsSelectValue = processPickerValue(searchData.production_insights_select_value);\n const productionLocationSelectValue = processPickerValue(searchData.production_location_select_value);\n const productionDatesSelectValue = processPickerValue(searchData.production_dates_select_value);\n const EngagementSelectValue = processPickerValue(searchData.engagement);\n const ownerValue = processPickerValue(searchData.owner);\n const referrerValue = processPickerValue(searchData.referrer);\n const productionValue = processPickerValue(searchData.production);\n const statusesValue = processPickerValue(searchData.status);\n const sourcesValue = processPickerValue(searchData.source);\n const ratingsValue = processPickerValue(searchData.rating);\n const companiesValue = processPickerValue(searchData.currently_at);\n const bucketsValue = processPickerValue(searchData.bucket);\n const campaignsValue = processPickerValue(searchData.campaign);\n const citiesValue = processPickerValue(searchData.city);\n const labelsValue = processPickerValue(searchData.label);\n const engagementTimePeriodValue = processPickerValue(searchData.engagement_time_period);\n const productionInsightsListingEffGrade = processPickerValue(searchData.production_insights_listing_eff_grade);\n const productionInsightsCurrentSwitchRisk = processPickerValue(searchData.production_insights_current_switch_risk);\n const leadOfficeZip = processPickerValue(searchData.lead_office_zip);\n const productionClosestOffice = processPickerValue(searchData.production_closest_office);\n const productionLocationClosestOfficeAddress = processPickerValue(searchData.production_location_closest_office_address);\n const centerOfProductionZips = processPickerValue(searchData.center_of_production_zips);\n const productionStartDate = processPickerValue(searchData.production_start_date);\n const productionEndDate = processPickerValue(searchData.production_end_date);\n const referredAtStart = processPickerValue(searchData.referred_at_start);\n const referredAtEnd = processPickerValue(searchData.referred_at_end);\n const dueDateAtStart = processPickerValue(searchData.due_date_at_start);\n const dueDateAtEnd = processPickerValue(searchData.due_date_at_end);\n const lastActivityAtStart = processPickerValue(searchData.last_activity_at_start);\n const lastActivityAtEnd = processPickerValue(searchData.last_activity_at_end);\n const lastAppointmentAtStart = processPickerValue(searchData.last_appointment_at_start);\n const lastAppointmentAtEnd = processPickerValue(searchData.last_appointment_at_end);\n const birthdayStart = processPickerValue(searchData.birthday_start);\n const birthdayEnd = processPickerValue(searchData.birthday_end);\n\n const EngagementClasses = EngagementSelectValue ? 'col-lg-2 col-md-4' : 'col-md-4';\n\n return (\n \n
\n \n \n
\n \n {\n handleDateSelectChange('uploaded_at', date);\n }}\n />\n
\n \n \n {\n handleMultiSelectChange('owner_id', selectedOptions);\n }}\n multi\n blank\n clearable\n apiResource={'/v1/documents/owner_options?only_existing=true'}\n />\n
\n\n \n \n handleSingleSelectChange('status', e.target.value)}\n className=\"form-control\"\n >\n \n {statuses.map((status) => (\n \n ))}\n \n
\n\n \n \n handleSingleSelectChange('category', e.target.value)}\n className=\"form-control\"\n >\n \n {categories.map((category) => (\n \n ))}\n \n
\n \n
\n \n \n
\n \n \n\n
\n );\n};\n\nRecruitingSearchFilters.defaultProps = {\n searchData: {},\n clearSearch: () => false,\n handleSingleSelectChange: () => false,\n handleMultiSelectChange: () => false,\n handleDateSelectChange: () => false,\n handleCheckBoxClick: () => false,\n};\n\nRecruitingSearchFilters.propTypes = {\n searchData: PropTypes.shape({}),\n clearSearch: PropTypes.func,\n hideFilters: PropTypes.func.isRequired,\n handleSingleSelectChange: PropTypes.func,\n handleMultiSelectChange: PropTypes.func,\n handleDateSelectChange: PropTypes.func,\n handleCheckBoxClick: PropTypes.func,\n};\n\nexport default RecruitingSearchFilters;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Input } from 'reactstrap';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n OwnerPicker,\n ReferrerPicker,\n} from '~/components/forms/team_member_picker';\nimport {\n RoleSelect,\n ProductionLabelSelect,\n SourceSelect,\n CitySelect,\n ClosestOfficeSelect,\n ProductionOfficeZipSelect,\n ClosestOfficeAddressSelect,\n CurrentSwitchRiskSelect,\n EffectivenessGradeSelect,\n LeadOfficeZipSelect,\n EngagementSelect,\n EngagementTimePeriodSelect,\n} from '~/components/forms/lead_fields';\nimport LabelSelect from '~/components/forms/lead_fields/label_select';\nimport ProductionSelect from '~/components/forms/lead_fields/production_select';\nimport ProductionInsightsSelect from '~/components/forms/lead_fields/production_insights_select';\nimport ProductionDatesSelect from '~/components/forms/lead_fields/production_dates_select';\nimport ProductionLocationSelect from '~/components/forms/lead_fields/production_location_select';\nimport CampaignPicker from '~/components/forms/campaign_picker';\nimport SimpleMonthPicker from '~/components/forms/simple_month_picker';\nimport StatusSelect from '~/components/forms/dropdowns/StatusSelect';\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport {\n relitixProductionFilterTooltip,\n relitixProductionInsightsFilterTooltip,\n relitixProductionLocationFilterTooltip,\n relitixProductionDatesFilterTooltip,\n} from '~/constants/tooltips/RelitixAdvancedSearchTooltips';\n\nconst processPickerValue = (value) => {\n if (!value || value.length === 0) return null;\n\n return value;\n};\n\nconst RetentionSearchFilters = ({\n searchData,\n clearSearch,\n hideFilters,\n handleSingleSelectChange,\n handleMultiSelectChange,\n handleDateSelectChange,\n handleCheckBoxClick,\n}) => {\n const statusesValue = processPickerValue(searchData.status);\n const referrersValue = processPickerValue(searchData.referrer);\n const rolesValue = processPickerValue(searchData.role);\n const citiesValue = processPickerValue(searchData.city);\n const campaignsValue = processPickerValue(searchData.campaign);\n const ownersValue = processPickerValue(searchData.owner);\n const anniversaryMonthValue = processPickerValue(searchData.anniversary_month);\n const sourceValue = processPickerValue(searchData.source);\n const productionValue = processPickerValue(searchData.production);\n const labelsValue = processPickerValue(searchData.label);\n const leadOfficeZip = processPickerValue(searchData.lead_office_zip);\n const productionClosestOffice = processPickerValue(searchData.production_closest_office);\n const centerOfProductionZips = processPickerValue(searchData.center_of_production_zips);\n const productionLocationClosestOfficeAddress = processPickerValue(searchData.production_location_closest_office_address);\n const productionInsightsListingEffGrade = processPickerValue(searchData.production_insights_listing_eff_grade);\n const productionInsightsCurrentSwitchRisk = processPickerValue(searchData.production_insights_current_switch_risk);\n const engagementTimePeriodValue = processPickerValue(searchData.engagement_time_period);\n const productionSelectValue = processPickerValue(searchData.production_select_value);\n const productionInsightsSelectValue = processPickerValue(searchData.production_insights_select_value);\n const productionLocationSelectValue = processPickerValue(searchData.production_location_select_value);\n const productionDatesSelectValue = processPickerValue(searchData.production_dates_select_value);\n const EngagementSelectValue = processPickerValue(searchData.engagement);\n const productionStartDate = processPickerValue(searchData.production_start_date);\n const productionEndDate = processPickerValue(searchData.production_end_date);\n const referredAtStart = processPickerValue(searchData.referred_at_start);\n const referredAtEnd = processPickerValue(searchData.referred_at_end);\n const dueDateAtStart = processPickerValue(searchData.due_date_at_start);\n const dueDateAtEnd = processPickerValue(searchData.due_date_at_end);\n const lastActivityAtStart = processPickerValue(searchData.last_activity_at_start);\n const lastActivityAtEnd = processPickerValue(searchData.last_activity_at_end);\n const joinedAtStart = processPickerValue(searchData.joined_at_start);\n const joinedAtEnd = processPickerValue(searchData.joined_at_end);\n const licenseExpDateStart = processPickerValue(searchData.license_exp_date_start);\n const licenseExpDateEnd = processPickerValue(searchData.license_exp_date_end);\n const birthdayStart = processPickerValue(searchData.birthday_start);\n const birthdayEnd = processPickerValue(searchData.birthday_end);\n const EngagementClasses = EngagementSelectValue ? 'col-lg-2 col-md-4' : 'col-md-4';\n\n return (\n \n
\n\n \n \n {\n handleMultiSelectChange('owner', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('referrer', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('production', selectedOptions);\n }}\n blank\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('status', selectedOptions);\n }}\n isMulti\n isClearable\n isSearchable\n />\n
\n\n \n \n {\n handleMultiSelectChange('source', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('rating', selectedOptions);\n }}\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('currently_at', selectedOptions);\n }}\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('bucket', selectedOptions);\n }}\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('campaign', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('city', selectedOptions);\n }}\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('label', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleSingleSelectChange('engagement', val ? val.value : '');\n }}\n clearable\n />\n
\n\n {EngagementSelectValue && (\n \n \n handleSingleSelectChange('engagement_time_period', val ? val.value : '')}\n />\n
\n )}\n\n \n \n \n
\n\n \n handleSingleSelectChange('production_select_value', val ? val.value : '')}\n clearable\n />\n
\n\n {productionSelectValue && (\n \n
\n )}\n \n {\n handleSingleSelectChange('production_start_value', v.target.value);\n }}\n />\n
\n\n \n {\n handleSingleSelectChange('production_end_value', v.target.value);\n }}\n />\n
\n \n \n \n handleSingleSelectChange('production_insights_listing_eff_grade', val ? val.value : '')}\n />\n )}\n\n {productionInsightsSelectValue === 'current_switch_risk' && (\n {\n handleMultiSelectChange('production_insights_current_switch_risk', selectedOptions);\n }}\n multi\n clearable\n />\n )}\n\n {productionInsightsSelectValue\n && productionInsightsSelectValue !== 'current_switch_risk'\n && productionInsightsSelectValue !== 'effectiveness_grade'\n && (\n
\n\n \n handleSingleSelectChange('production_insights_select_value', val?.value || '')}\n clearable\n />\n
\n\n {productionInsightsSelectValue === 'effectiveness_grade' && (\n \n
\n )}\n \n {\n handleSingleSelectChange('production_insights_start_value', v.target.value);\n }}\n />\n
\n\n \n {\n handleSingleSelectChange('production_insights_end_value', v.target.value);\n }}\n />\n
\n \n \n \n {\n handleMultiSelectChange('lead_office_zip', selectedOptions);\n }}\n multi\n clearable\n />\n )}\n\n {productionLocationSelectValue === 'closest_office_name' && (\n {\n handleMultiSelectChange('production_closest_office', selectedOptions);\n }}\n multi\n clearable\n />\n )}\n\n {productionLocationSelectValue === 'closest_office_address' && (\n {\n handleMultiSelectChange('production_location_closest_office_address', selectedOptions);\n }}\n multi\n clearable\n />\n )}\n\n {productionLocationSelectValue === 'center_of_production_zips' && (\n {\n handleMultiSelectChange('center_of_production_zips', selectedOptions);\n }}\n multi\n clearable\n />\n )}\n\n {productionLocationSelectValue\n && !(['closest_office_name', 'closest_office_address', 'center_of_production_zips', 'lead_office_zip'].includes(productionLocationSelectValue))\n && (\n
\n\n \n handleSingleSelectChange('production_location_select_value', val ? val.value : '')}\n clearable\n />\n
\n\n {productionLocationSelectValue === 'lead_office_zip' && (\n \n
\n )}\n \n {\n handleSingleSelectChange('production_location_start_value', v.target.value);\n }}\n />\n
\n\n \n {\n handleSingleSelectChange('production_location_end_value', v.target.value);\n }}\n />\n
\n \n \n \n
\n\n \n handleSingleSelectChange('production_dates_select_value', val ? val.value : '')}\n clearable\n />\n
\n\n {productionDatesSelectValue && (\n \n
\n )}\n \n {\n handleDateSelectChange('production_start_date', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('production_end_date', date);\n }}\n />\n
\n \n \n {\n handleDateSelectChange('referred_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('referred_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('due_date_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('due_date_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('last_activity_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('last_activity_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('last_appointment_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('last_appointment_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('birthday_end', date);\n }}\n />\n
\n \n {\n handleDateSelectChange('birthday_start', date);\n }}\n />\n
\n\n \n
\n \n \n
\n \n \n\n
\n );\n};\n\nRetentionSearchFilters.defaultProps = {\n searchData: {},\n clearSearch: () => false,\n handleSingleSelectChange: () => false,\n handleMultiSelectChange: () => false,\n handleDateSelectChange: () => false,\n handleCheckBoxClick: () => false,\n};\n\nRetentionSearchFilters.propTypes = {\n searchData: PropTypes.shape({}),\n clearSearch: PropTypes.func,\n hideFilters: PropTypes.func.isRequired,\n handleSingleSelectChange: PropTypes.func,\n handleMultiSelectChange: PropTypes.func,\n handleDateSelectChange: PropTypes.func,\n handleCheckBoxClick: PropTypes.func,\n};\n\nexport default RetentionSearchFilters;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport DateTimePicker from '~/components/forms/DateTimePicker';\nimport TaskStatusSelect from '../../../forms/task_status_select';\nimport TaskPrioritySelect from '../../../forms/task_priority_select';\nimport TaskCategorySelect from '../../../forms/task_category_select';\nimport { TeammatePicker } from '../../../forms/team_member_picker';\n\nconst processPickerValue = (value) => {\n if (!value || value.length === 0) return null;\n\n return value;\n};\n\nconst TaskSearchFilters = ({\n searchData,\n clearSearch,\n hideFilters,\n handleSingleSelectChange,\n handleDateSelectChange,\n handleMultiSelectChange,\n}) => {\n const dueDateStart = processPickerValue(searchData.due_date_at_start);\n const dueDateEnd = processPickerValue(searchData.due_date_at_end);\n\n return (\n \n
\n\n \n \n {\n handleMultiSelectChange('production', selectedOptions);\n }}\n blank\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('status', selectedOptions);\n }}\n isMulti\n isClearable\n isSearchable\n />\n
\n\n \n \n {\n handleMultiSelectChange('referrer', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('role', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('city', selectedOptions);\n }}\n multi\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('campaign', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('owner', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n handleSingleSelectChange('anniversary_month', val ? val.value : '')}\n />\n
\n\n \n \n {\n handleMultiSelectChange('source', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('label', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n handleSingleSelectChange('engagement', val ? val.value : '')}\n clearable\n />\n
\n\n {EngagementSelectValue && (\n \n \n handleSingleSelectChange('engagement_time_period', val ? val.value : '')}\n clearable\n />\n
\n )}\n \n
\n\n \n \n \n
\n\n \n handleSingleSelectChange(\n 'production_select_value',\n val ? val.value : '',\n )}\n clearable\n />\n
\n\n {productionSelectValue && (\n \n
\n )}\n \n {\n handleSingleSelectChange(\n 'production_start_value',\n v.target.value,\n );\n }}\n />\n
\n\n \n {\n handleSingleSelectChange(\n 'production_end_value',\n v.target.value,\n );\n }}\n />\n
\n \n \n \n handleSingleSelectChange(\n 'production_insights_listing_eff_grade',\n val ? val.value : '',\n )}\n />\n )}\n\n {productionInsightsSelectValue === 'current_switch_risk' && (\n {\n handleMultiSelectChange(\n 'production_insights_current_switch_risk',\n selectedOptions,\n );\n }}\n multi\n clearable\n />\n )}\n\n {productionInsightsSelectValue\n && productionInsightsSelectValue !== 'current_switch_risk'\n && productionInsightsSelectValue !== 'effectiveness_grade'\n && (\n
\n\n \n handleSingleSelectChange(\n 'production_insights_select_value',\n val ? val.value : '',\n )}\n clearable\n />\n
\n\n {productionInsightsSelectValue === 'effectiveness_grade' && (\n \n
\n )}\n \n {\n handleSingleSelectChange(\n 'production_insights_start_value',\n v.target.value,\n );\n }}\n />\n
\n\n \n {\n handleSingleSelectChange(\n 'production_insights_end_value',\n v.target.value,\n );\n }}\n />\n
\n \n \n \n {\n handleMultiSelectChange('lead_office_zip', selectedOptions);\n }}\n multi\n clearable\n />\n )}\n\n {productionLocationSelectValue === 'closest_office_name' && (\n {\n handleMultiSelectChange(\n 'production_location_closest_office_address',\n selectedOptions,\n );\n }}\n multi\n clearable\n />\n )}\n\n {productionLocationSelectValue === 'closest_office_address' && (\n {\n handleMultiSelectChange(\n 'production_location_closest_office_address',\n selectedOptions,\n );\n }}\n multi\n clearable\n />\n )}\n\n {productionLocationSelectValue === 'center_of_production_zips' && (\n {\n handleMultiSelectChange(\n 'center_of_production_zips',\n selectedOptions,\n );\n }}\n multi\n clearable\n />\n )}\n\n {productionLocationSelectValue\n && productionLocationSelectValue !== 'closest_office_name'\n && productionLocationSelectValue !== 'center_of_production_zips'\n && productionLocationSelectValue !== 'closest_office_address'\n && productionLocationSelectValue !== 'lead_office_zip'\n && (\n
\n\n \n handleSingleSelectChange(\n 'production_location_select_value',\n val ? val.value : '',\n )}\n clearable\n />\n
\n\n {productionLocationSelectValue === 'lead_office_zip' && (\n \n
\n )}\n \n {\n handleSingleSelectChange(\n 'production_location_start_value',\n v.target.value,\n );\n }}\n />\n
\n\n \n {\n handleSingleSelectChange(\n 'production_location_end_value',\n v.target.value,\n );\n }}\n />\n
\n \n \n \n
\n\n \n handleSingleSelectChange(\n 'production_dates_select_value',\n val ? val.value : '',\n )}\n clearable\n />\n
\n\n {productionDatesSelectValue && (\n \n
\n )}\n \n {\n handleDateSelectChange('production_start_date', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('production_end_date', date);\n }}\n />\n
\n \n \n {\n handleDateSelectChange('referred_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('referred_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('due_date_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('due_date_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('last_activity_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('last_activity_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('joined_at_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('joined_at_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('birthday_end', date);\n }}\n />\n
\n\n \n {\n handleDateSelectChange('birthday_start', date);\n }}\n />\n
\n\n \n \n {\n handleDateSelectChange('license_exp_date_end', date);\n }}\n />\n
\n \n {\n handleDateSelectChange('license_exp_date_start', date);\n }}\n />\n
\n\n \n
\n \n {\n clearSearch();\n }}\n >\n Clear search\n \n
\n \n \n\n
\n );\n};\n\nTaskSearchFilters.defaultProps = {\n searchData: {},\n clearSearch: () => false,\n handleSingleSelectChange: () => false,\n handleDateSelectChange: () => false,\n handleMultiSelectChange: () => false,\n};\n\nTaskSearchFilters.propTypes = {\n searchData: PropTypes.shape({}),\n clearSearch: PropTypes.func,\n hideFilters: PropTypes.func.isRequired,\n handleSingleSelectChange: PropTypes.func,\n handleDateSelectChange: PropTypes.func,\n handleMultiSelectChange: PropTypes.func,\n};\n\nexport default TaskSearchFilters;\n","const tableConfig = {\n todayTable() {\n return {\n title: 'New Leads',\n subtitle: null,\n scope: 'today_new_leads',\n resource: '/v1/leads',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'referred_at',\n title: 'Referred On',\n },\n };\n },\n\n followUpTable() {\n return {\n title: 'Tasks Due Today',\n subtitle: null,\n scope: 'today_or_past_tasks',\n resource: '/v1/task_leads',\n leadTasks: true,\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: false,\n bucket: true,\n owner: true,\n status: false,\n },\n tasksBulkAction: {\n owner: false,\n status: true,\n category: false,\n priority: false,\n dueDate: true,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: null,\n title: null,\n },\n };\n },\n\n backlogTable() {\n return {\n title: 'Backlog',\n subtitle: 'Leads without tasks',\n scope: 'backlog',\n resource: '/v1/leads',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'referred_at',\n title: 'Referred On',\n },\n };\n },\n\n onboardingTable() {\n return {\n title: 'Onboarding',\n subtitle: null,\n scope: 'today_retention_onboarding',\n resource: '/v1/leads',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'last_activity_at',\n title: 'Last Contacted',\n },\n };\n },\n\n retentionFollowUps() {\n return {\n title: 'Tasks Due Today',\n scope: 'today_or_past_tasks',\n subtitle: null,\n resource: '/v1/task_leads',\n leadTasks: true,\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: false,\n bucket: true,\n owner: true,\n status: false,\n },\n tasksBulkAction: {\n owner: false,\n status: true,\n category: false,\n priority: false,\n dueDate: true,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: null,\n title: null,\n },\n };\n },\n\n todayRetentionTable() {\n return {\n title: 'Retention Reminders',\n subtitle: 'No 1-on-1 contact in the last 30 days',\n scope: 'today_retention_active',\n resource: '/v1/leads',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'last_activity_at',\n title: 'Last Contacted',\n },\n enableProductionFilter: true,\n };\n },\n\n backlogRetentionTable() {\n return {\n title: 'Retention Backlog',\n subtitle: 'Team Members without tasks',\n scope: 'backlog_retention',\n resource: '/v1/leads',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'last_activity_at',\n title: 'Last Contacted',\n },\n };\n },\n\n recruitingSearchTable() {\n return {\n title: 'Search Results',\n subtitle: null,\n scope: 'search_results',\n tabs: true,\n resource: '/v1/search',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'referred_at',\n title: 'Referred On',\n },\n };\n },\n\n recruitingLeadsTable() {\n return {\n title: 'Leads',\n subtitle: null,\n scope: 'recruiting_leads',\n tabs: true,\n resource: '/v1/leads',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'referred_at',\n title: 'Referred On',\n },\n };\n },\n\n trashTable() {\n return {\n title: 'Trash',\n subtitle: 'Documents that have been in Trash more than 30 days will be automatically deleted.',\n scope: 'trash_documents',\n resource: '/v1/documents/trashed_documents',\n trashDocumentBulkAction: {\n permanent_delete: true,\n restore: true,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n filterable: false,\n searchable: false,\n sortBy: 'deleted_at',\n sortDirection: 'desc',\n timestamp: {\n column: 'deleted_at',\n title: 'Deleted At',\n },\n };\n },\n\n documentsTable() {\n return {\n scope: 'documents',\n title: 'Documents',\n resource: '/v1/documents',\n documentBulkAction: {\n delete: true,\n owner: true,\n status: true,\n category: true,\n related_contacts: true,\n },\n filterable: true,\n searchable: true,\n sortBy: 'uploaded_at',\n sortDirection: 'desc',\n timestamp: {\n column: 'uploaded_at',\n title: 'Uploaded At',\n },\n };\n },\n\n retentionSearchTable() {\n return {\n title: 'Search Results',\n subtitle: null,\n scope: 'search_results',\n tabs: true,\n resource: '/v1/search',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'joined_at',\n title: 'Joined On',\n },\n };\n },\n\n retentionTeamTable() {\n return {\n title: 'Team',\n subtitle: null,\n scope: 'retention_team',\n tabs: true,\n resource: '/v1/leads',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'joined_at',\n title: 'Joined On',\n },\n };\n },\n\n archivedSearchTable() {\n return {\n title: 'Search Results',\n subtitle: null,\n scope: 'search_results',\n tabs: true,\n resource: '/v1/search',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'joined_at',\n title: 'Joined On',\n },\n };\n },\n\n archivedTable() {\n return {\n title: 'Archived',\n subtitle: null,\n scope: 'archived',\n tabs: true,\n resource: '/v1/leads',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'joined_at',\n title: 'Joined On',\n },\n };\n },\n\n referralsTable() {\n return {\n title: 'Referrals Made',\n subtitle: null,\n scope: 'agent_referrals',\n resource: '/v1/leads',\n contactsBulkAction: {\n labels: true,\n notes: true,\n emails: true,\n texts: true,\n campaigns: true,\n tasks: true,\n delete: true,\n bucket: true,\n owner: true,\n status: true,\n },\n tasksBulkAction: {\n owner: false,\n status: false,\n category: false,\n priority: false,\n dueDate: false,\n description: false,\n deleteTask: false,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: 'referred_at',\n title: 'Referred On',\n },\n };\n },\n\n allTasksTable() {\n return {\n title: 'All Tasks',\n subtitle: null,\n scope: 'all_tasks',\n resource: '/v1/task_leads',\n task_tabs: true,\n contactsBulkAction: {\n labels: false,\n notes: false,\n emails: false,\n texts: false,\n campaigns: false,\n tasks: false,\n delete: false,\n bucket: false,\n owner: false,\n status: false,\n },\n tasksBulkAction: {\n owner: true,\n status: true,\n category: true,\n priority: true,\n dueDate: true,\n description: true,\n deleteTask: true,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: null,\n title: null,\n },\n };\n },\n\n tasksDueTodayTable() {\n return {\n title: 'Tasks Due Today',\n subtitle: null,\n scope: 'today_or_past_tasks',\n resource: '/v1/task_leads',\n task_tabs: true,\n contactsBulkAction: {\n labels: false,\n notes: false,\n emails: false,\n texts: false,\n campaigns: false,\n tasks: false,\n delete: false,\n bucket: false,\n owner: false,\n status: false,\n },\n tasksBulkAction: {\n owner: true,\n status: true,\n category: true,\n priority: true,\n dueDate: true,\n description: true,\n deleteTask: true,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: null,\n title: null,\n },\n };\n },\n\n tasksDueLaterTable() {\n return {\n title: 'Tasks Due Later',\n subtitle: null,\n scope: 'tasks_due_later',\n resource: '/v1/task_leads',\n task_tabs: true,\n contactsBulkAction: {\n labels: false,\n notes: false,\n emails: false,\n texts: false,\n campaigns: false,\n tasks: false,\n delete: false,\n bucket: false,\n owner: false,\n status: false,\n },\n tasksBulkAction: {\n owner: true,\n status: true,\n category: true,\n priority: true,\n dueDate: true,\n description: true,\n deleteTask: true,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: null,\n title: null,\n },\n };\n },\n\n tasksOverdueTable() {\n return {\n title: 'Tasks Overdue',\n subtitle: null,\n scope: 'tasks_overdue',\n resource: '/v1/task_leads',\n task_tabs: true,\n contactsBulkAction: {\n labels: false,\n notes: false,\n emails: false,\n texts: false,\n campaigns: false,\n tasks: false,\n delete: false,\n bucket: false,\n owner: false,\n status: false,\n },\n tasksBulkAction: {\n owner: true,\n status: true,\n category: true,\n priority: true,\n dueDate: true,\n description: true,\n deleteTask: true,\n },\n documentBulkAction: {\n delete: false,\n owner: false,\n status: false,\n category: false,\n related_contacts: false,\n },\n timestamp: {\n column: null,\n title: null,\n },\n };\n },\n};\n\nexport default tableConfig;\n","import autoBind from 'react-autobind';\nimport { v4 as uuidv4 } from 'uuid';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport {\n InputGroup, InputGroupAddon, Button,\n} from 'reactstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport TaskSearchFilters from './search_form/task_search_filters';\n\nclass TaskFiltersForm extends React.Component {\n static defaultSearchValues() {\n return {\n query: '',\n status: [],\n priority: [],\n category: [],\n owner_id: [],\n due_date_at_start: '',\n due_date_at_end: '',\n };\n }\n\n static buildSearchData(params = {}) {\n const urlParams = _lodash.isEmpty(params) ? GlobalContainer.urlParams() : params;\n const searchObj = urlParams.s;\n\n if (!searchObj) return TaskFiltersForm.defaultSearchValues();\n\n return {\n query: searchObj.query,\n status: searchObj.status,\n priority: searchObj.priority,\n category: searchObj.category,\n owner_id: searchObj.owner_id,\n due_date_at_start: searchObj.due_date_at_start,\n due_date_at_end: searchObj.due_date_at_end,\n };\n }\n\n doAutoComplete = _lodash.debounce((searchData, query) => {\n const { handleTaskSearch } = this.props;\n\n handleTaskSearch({ ...searchData, query: encodeURIComponent(query) });\n }, 850)\n\n constructor(props) {\n super(props);\n\n const params = GlobalContainer.urlParams();\n\n this.state = {\n showFilters: false,\n searchData: TaskFiltersForm.defaultSearchValues(),\n filtersKey: uuidv4(),\n };\n\n if (params.s) {\n this.state.showFilters = true;\n this.state.searchData = TaskFiltersForm.buildSearchData();\n }\n\n autoBind(this);\n }\n\n componentDidMount() {\n // autofocus to the end of search query input text\n if (this.queryInput) {\n const len = this.queryInput.value.length;\n this.queryInput.focus();\n this.queryInput.setSelectionRange(len, len);\n }\n\n // listen to URL hash changes\n const { history } = this.context;\n this.unlisten = history.listen((location, action) => {\n const urlParams = GlobalContainer.urlParams();\n if (_lodash.isEmpty(urlParams) || !urlParams.s) return;\n\n this.setState((prevState) => ({\n searchData: {\n ...prevState.searchData,\n ...TaskFiltersForm.buildSearchData(),\n },\n }));\n }).bind(this);\n }\n\n componentWillUnmount() {\n if (this.unlisten) this.unlisten();\n }\n\n handleSubmit(e) {\n e.preventDefault();\n\n const { searchData } = this.state;\n const { handleTaskSearch } = this.props;\n\n handleTaskSearch({ ...searchData, query: encodeURIComponent(searchData.query) });\n }\n\n handleQueryChange(e) {\n const query = e.target.value || '';\n\n this.setState((prevState) => ({\n searchData: {\n ...prevState.searchData,\n query,\n },\n }), () => {\n const { searchData } = this.state;\n\n this.doAutoComplete(searchData, query);\n });\n }\n\n handleSearchDataChange(data) {\n const { handleTaskSearch } = this.props;\n\n this.setState((prevState) => ({\n searchData: {\n ...prevState.searchData,\n ...data,\n },\n }), () => {\n const { searchData } = this.state;\n\n handleTaskSearch(searchData);\n });\n }\n\n handleSingleSelectChange(fieldName, fieldValue) {\n this.handleSearchDataChange({ [fieldName]: fieldValue });\n }\n\n handleDateSelectChange(fieldName, fieldValue) {\n this.handleSearchDataChange({ [fieldName]: Moment.isMoment(fieldValue) ? fieldValue.format('YYYY-MM-DD') : null });\n }\n\n handleMultiSelectChange(fieldName, selectedOptions) {\n this.handleSearchDataChange({ [fieldName]: _lodash.map(selectedOptions, (opt) => opt.value) });\n }\n\n showFilters() {\n this.setState({\n showFilters: true,\n });\n }\n\n hideFilters() {\n this.setState({\n showFilters: false,\n });\n }\n\n registerQueryInput(input) {\n this.queryInput = input;\n }\n\n clearSearch() {\n const { handleTaskSearch } = this.props;\n\n this.setState({\n searchData: TaskFiltersForm.defaultSearchValues(),\n filtersKey: uuidv4(), // regenerate a key so the old component gets trashed\n });\n\n handleTaskSearch(TaskFiltersForm.defaultSearchValues());\n }\n\n renderFilters() {\n const { searchData, showFilters, filtersKey } = this.state;\n\n if (!showFilters) {\n return (\n \n );\n }\n\n const props = {\n key: filtersKey,\n searchData,\n hideFilters: this.hideFilters,\n clearSearch: this.clearSearch,\n handleSingleSelectChange: this.handleSingleSelectChange,\n handleMultiSelectChange: this.handleMultiSelectChange,\n handleDateSelectChange: this.handleDateSelectChange,\n };\n\n return (\n \n
\n\n \n \n {\n handleMultiSelectChange('status', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('priority', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n {\n handleMultiSelectChange('category', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n \n
\n\n \n \n {\n handleMultiSelectChange('owner_id', selectedOptions);\n }}\n multi\n blank\n clearable\n />\n
\n\n \n \n
\n\n \n {\n handleDateSelectChange('due_date_at_start', date);\n }}\n />\n
\n \n \n
\n \n {\n handleDateSelectChange('due_date_at_end', date);\n }}\n />\n
\n \n
\n \n \n
\n \n \n
\n );\n }\n}\n\nTaskFiltersForm.contextTypes = {\n history: PropTypes.shape({}),\n location: PropTypes.shape({}),\n match: PropTypes.shape({}),\n handleTaskSearch: PropTypes.func,\n};\n\nTaskFiltersForm.defaultProps = {\n handleTaskSearch: () => false,\n};\n\nTaskFiltersForm.propTypes = {\n handleTaskSearch: PropTypes.func,\n};\n\nexport default TaskFiltersForm;\n","import tableConfig from './table_config';\n\nfunction widgetsConfig(location) {\n const { pathname } = location;\n\n const availableWidgets = {\n hasSearch: true,\n hasTaskSearch: false,\n hasDocumentSearch: false,\n hasAppointment: false,\n hasReport: false,\n tables: [],\n };\n\n switch (pathname) {\n case '/recruiter/leads':\n availableWidgets.title = 'Leads - Brokerkit';\n availableWidgets.tables = [tableConfig.recruitingLeadsTable()];\n availableWidgets.leadsScope = true;\n break;\n\n case '/recruiter/documents':\n case '/retention/documents':\n availableWidgets.title = 'Documents - Brokerkit';\n availableWidgets.tables = [tableConfig.documentsTable()];\n availableWidgets.leadsScope = false;\n availableWidgets.hasSearch = false;\n availableWidgets.hasDocumentSearch = true;\n break;\n\n case '/recruiter/documents/trash':\n case '/retention/documents/trash':\n availableWidgets.title = 'Trash - Brokerkit';\n availableWidgets.tables = [tableConfig.trashTable()];\n availableWidgets.leadsScope = false;\n availableWidgets.hasSearch = false;\n availableWidgets.hasDocumentSearch = false;\n break;\n\n case '/recruiter/tasks':\n case '/retention/tasks':\n availableWidgets.title = 'All Tasks - Brokerkit';\n availableWidgets.tables = [tableConfig.allTasksTable()];\n availableWidgets.leadsScope = false;\n availableWidgets.hasSearch = false;\n availableWidgets.hasTaskSearch = true;\n break;\n\n case '/recruiter/tasks_due_today':\n case '/retention/tasks_due_today':\n availableWidgets.title = 'Tasks Due Today - Brokerkit';\n availableWidgets.tables = [tableConfig.tasksDueTodayTable()];\n availableWidgets.leadsScope = false;\n availableWidgets.hasSearch = false;\n availableWidgets.hasTaskSearch = true;\n break;\n\n case '/recruiter/tasks_due_later':\n case '/retention/tasks_due_later':\n availableWidgets.title = 'Tasks Due Later - Brokerkit';\n availableWidgets.tables = [tableConfig.tasksDueLaterTable()];\n availableWidgets.leadsScope = false;\n availableWidgets.hasSearch = false;\n availableWidgets.hasTaskSearch = true;\n break;\n\n case '/recruiter/tasks_overdue':\n case '/retention/tasks_overdue':\n availableWidgets.title = 'Tasks Overdue - Brokerkit';\n availableWidgets.tables = [tableConfig.tasksOverdueTable()];\n availableWidgets.leadsScope = false;\n availableWidgets.hasSearch = false;\n availableWidgets.hasTaskSearch = true;\n break;\n\n case '/recruiter/backlog':\n availableWidgets.title = 'Backlog - Brokerkit';\n availableWidgets.tables = [tableConfig.backlogTable()];\n availableWidgets.leadsScope = true;\n break;\n\n case '/recruiter/search':\n availableWidgets.title = 'Search - Brokerkit';\n availableWidgets.tables = [tableConfig.recruitingSearchTable()];\n availableWidgets.leadsScope = true;\n break;\n\n case '/recruiter/reports':\n availableWidgets.title = 'Report - Brokerkit';\n availableWidgets.hasSearch = false;\n availableWidgets.hasReport = true;\n availableWidgets.leadsScope = true;\n break;\n\n case '/agent/dashboard':\n availableWidgets.title = 'Agent Dashboard - Brokerkit';\n availableWidgets.tables = [tableConfig.referralsTable()];\n availableWidgets.leadsScope = true;\n break;\n\n case '/recruiter':\n case '/recruiter/today':\n availableWidgets.hasAppointment = true;\n availableWidgets.title = 'Today - Brokerkit';\n availableWidgets.tables = [tableConfig.todayTable(), tableConfig.followUpTable()];\n availableWidgets.leadsScope = false;\n availableWidgets.tasksScope = true;\n break;\n\n case '/retention/team':\n availableWidgets.title = 'Team - Brokerkit';\n availableWidgets.tables = [tableConfig.retentionTeamTable()];\n availableWidgets.leadsScope = true;\n break;\n\n case '/retention/backlog':\n availableWidgets.title = 'Backlog - Brokerkit';\n availableWidgets.tables = [tableConfig.backlogRetentionTable()];\n availableWidgets.leadsScope = true;\n break;\n\n case '/retention/search':\n availableWidgets.title = 'Search - Brokerkit';\n availableWidgets.tables = [tableConfig.retentionSearchTable()];\n availableWidgets.leadsScope = true;\n break;\n\n case '/retention/reports':\n availableWidgets.title = 'Report - Brokerkit';\n availableWidgets.hasSearch = false;\n availableWidgets.hasReport = true;\n availableWidgets.leadsScope = true;\n break;\n\n case '/retention':\n case '/retention/today':\n availableWidgets.title = 'Today - Brokerkit';\n availableWidgets.tables = [\n tableConfig.retentionFollowUps(),\n tableConfig.onboardingTable(),\n tableConfig.todayRetentionTable(),\n ];\n availableWidgets.leadsScope = true;\n break;\n\n case '/archived/search':\n availableWidgets.title = 'Search - Brokerkit';\n availableWidgets.tables = [tableConfig.archivedSearchTable()];\n availableWidgets.leadsScope = true;\n break;\n\n case '/archived':\n availableWidgets.title = 'Archived - Brokerkit';\n availableWidgets.tables = [tableConfig.archivedTable()];\n availableWidgets.leadsScope = true;\n break;\n\n default:\n availableWidgets.hasAppointment = true;\n availableWidgets.title = 'Today - Brokerkit';\n availableWidgets.tables = [tableConfig.todayTable(), tableConfig.followUpTable()];\n availableWidgets.leadsScope = true;\n }\n\n return availableWidgets;\n}\n\nexport default widgetsConfig;\n","import React from 'react';\nimport autoBind from 'react-autobind';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport APIRequest from '~/lib/api_request';\n\nclass CallStats extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n callStats: {},\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.loadCallStats();\n }\n\n loadCallStats() {\n APIRequest.get({ resource: '/v1/statistics/voice_calls' })\n .end((err, response) => {\n if (response && response.ok) {\n const callStats = response.body;\n\n this.setState({ callStats, loading: false });\n } else {\n this.setState({ loading: false });\n }\n });\n }\n\n renderStatisticTable() {\n const { loading, callStats } = this.state;\n\n if (loading) {\n return (\n \n \n \n \n
\n
\n );\n }\n}\n\nCallStats.defaultProps = {};\n\nCallStats.propTypes = {};\n\nexport default CallStats;\n","import React from 'react';\nimport autoBind from 'react-autobind';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport APIRequest from '~/lib/api_request';\n\nclass EmailStats extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n emailStats: {},\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.loadEmailStats();\n }\n\n loadEmailStats() {\n APIRequest.get({ resource: '/v1/statistics/emails' })\n .end((err, response) => {\n if (response && response.ok) {\n const emailStats = response.body;\n\n this.setState({ emailStats, loading: false });\n } else {\n this.setState({ loading: false });\n }\n });\n }\n\n renderStatisticTable() {\n const { loading, emailStats } = this.state;\n\n if (loading) {\n return (\n \n | Call usage minutes | \nInbound | \nOutbound | \n
|---|
\n \n \n
\n
\n );\n }\n}\n\nEmailStats.defaultProps = {};\n\nEmailStats.propTypes = {};\n\nexport default EmailStats;\n","import React from 'react';\nimport autoBind from 'react-autobind';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport APIRequest from '~/lib/api_request';\n\nclass RecordingStats extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loading: true,\n recordingStats: {},\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.loadRecordingStats();\n }\n\n loadRecordingStats() {\n APIRequest.get({ resource: '/v1/statistics/voice_recordings' })\n .end((err, response) => {\n if (response && response.ok) {\n const recordingStats = response.body;\n\n this.setState({ recordingStats, loading: false });\n } else {\n this.setState({ loading: false });\n }\n });\n }\n\n renderRecordingStatisticTable() {\n const { loading, recordingStats } = this.state;\n\n if (loading) {\n return (\n \n | Emails Sent | \n
|---|
\n \n \n
\n
\n );\n }\n}\n\nRecordingStats.defaultProps = {};\n\nRecordingStats.propTypes = {};\n\nexport default RecordingStats;\n","import React from 'react';\nimport autoBind from 'react-autobind';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport APIRequest from '~/lib/api_request';\n\nclass SmsStats extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n loadingSms: true,\n loadingMms: true,\n smsStats: {},\n mmsStats: {},\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n this.loadSmsStats();\n this.loadMmsStats();\n }\n\n loadSmsStats = () => {\n APIRequest.get({ resource: '/v1/statistics/sms_messages' })\n .end((err, response) => {\n if (response && response.ok) {\n const smsStats = response.body;\n\n this.setState({ smsStats, loadingSms: false });\n } else {\n this.setState({ loadingSms: false });\n }\n });\n }\n\n loadMmsStats = () => {\n APIRequest.get({ resource: '/v1/statistics/mms_messages' })\n .end((err, response) => {\n if (response && response.ok) {\n const mmsStats = response.body;\n\n this.setState({ mmsStats, loadingMms: false });\n } else {\n this.setState({ loadingMms: false });\n }\n });\n }\n\n renderStatisticTable = () => {\n const {\n loadingSms,\n loadingMms,\n smsStats,\n mmsStats,\n } = this.state;\n\n if (loadingSms || loadingMms) {\n return (\n \n | Call recording minutes | \nInbound | \nOutbound | \n
|---|
\n \n \n
\n
\n );\n }\n}\n\nSmsStats.defaultProps = {};\n\nSmsStats.propTypes = {};\n\nexport default SmsStats;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\n\nimport GlobalContainer from '../global_container';\n\nclass BlankPage extends React.Component {\n constructor(props) {\n super(props);\n\n autoBind(this);\n }\n\n /**\n * Return context to child components as props\n * https://facebook.github.io/react/docs/context.html\n * @returns {\n * {\n * history: AgentDashboard.props.history,\n * location: AgentDashboard.props.location,\n * match: AgentDashboard.props.match\n * }\n * }\n */\n getChildContext() {\n const { history, location, match } = this.props;\n\n return {\n history,\n location,\n match,\n };\n }\n\n componentDidMount() {\n const { title } = this.props;\n\n document.title = title || 'Brokerkit';\n }\n\n componentDidUpdate() {\n const { title } = this.props;\n\n document.title = title || 'Brokerkit';\n }\n\n render() {\n const { children, showHeader } = this.props;\n\n return (\n | \n Text Messages\n \n Sent & Received\n | \n Messages | \nSegments | \n|
|---|---|---|---|
| SMS | \nMMS | \nSMS | \nMMS | \n
\n \n
\n )\n}\n","import React from 'react';\nimport { Viewer, Worker, SpecialZoomLevel } from '@react-pdf-viewer/core';\nimport { toolbarPlugin } from '@react-pdf-viewer/toolbar';\nimport { getFilePlugin } from '@react-pdf-viewer/get-file';\n\nexport default function PdfDocViewer({ document }) {\n const { url } = document;\n const workerUrl = 'https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js';\n\n const toolbarPluginInstance = toolbarPlugin();\n const getFilePluginInstance = getFilePlugin();\n const disableScrollPlugin = () => {\n const renderViewer = (props) => {\n const { slot } = props;\n\n if (slot.subSlot && slot.subSlot.attrs && slot.subSlot.attrs.style) {\n slot.subSlot.attrs.style = { ...slot.subSlot.attrs.style, scrollbarWidth: 'thin', scrollbarColor: 'white white' };\n }\n\n return slot;\n };\n\n return {\n renderViewer,\n };\n };\n\n const disableScrollPluginInstance = disableScrollPlugin();\n const { Toolbar } = toolbarPluginInstance;\n\n return (\n \n \n \n {(props) => {\n const {\n CurrentPageInput,\n GoToNextPage,\n GoToPreviousPage,\n Zoom,\n ZoomIn,\n ZoomOut,\n EnterFullScreen,\n } = props;\n return (\n \n \n
\n );\n}\n","import MSDocViewer from '~/helpers/MSDocViewer'\nimport PdfDocViewer from '~/helpers/PdfDocViewer'\nimport ImageDocViewer from '~/helpers/ImageDocViewer'\nimport NoPreviewDocViewer from '~/helpers/NoPreviewDocViewer'\n\nconst DocumentComponentMap = {\n 'word_document': { Component: MSDocViewer },\n 'word_resume': { Component: MSDocViewer },\n 'excel_document': { Component: MSDocViewer },\n 'powerpoint_document': { Component: MSDocViewer },\n 'image_document': { Component: ImageDocViewer },\n 'pdf_document': { Component: PdfDocViewer },\n 'pdf_resume': { Component: PdfDocViewer },\n 'other_document': { Component: NoPreviewDocViewer },\n}\n\nexport default DocumentComponentMap\n","import React, { useEffect, useRef } from 'react'\nimport Viewer from 'viewerjs';\n\nexport default function ImageDocViewer({ document }) {\n const { public_url } = document\n const imageRef = useRef(null);\n\n useEffect(() => {\n const viewer = new Viewer(imageRef.current, {\n inline: false,\n });\n\n return () => {\n viewer.destroy();\n }\n }, [imageRef]);\n\n return (\n \n
\n );\n }}\n \n \n
\n \n \n
\n \n
\n )\n}\n","import React from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nexport default function NoPreviewDocViewer({ document }) {\n return (\n \n
\n \n
\n
\n )\n}\n","import React, { useState, useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\nimport DocumentComponentMap from '~/constants/DocumentComponentMap';\nimport DocumentActions from '~/actions/document_actions';\nimport DocumentStore from '~/stores/document_store';\nimport brokerbit from '~/lib/brokerbit';\nimport APIRequest from '~/lib/api_request';\nimport BlankPage from '~/components/pages/blank_page';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport { formatedFileSize } from '~/helpers/document_helpers';\nimport { checkFeatureFlag } from '~/helpers/FeatureFlagChecker';\n\nconst Preview = () => {\n const isDmsEnabled = checkFeatureFlag(process.env.ENABLE_DOCUMENT_MANAGEMENT_FLAG);\n\n if (!isDmsEnabled) return 'Document management is disabled';\n\n const { id: documentId } = useParams();\n const [state, setState] = useState({\n loadingDocument: false,\n document: null,\n error: false,\n });\n const { helpers } = Rails;\n const { currentUser } = helpers;\n const isAdminOrStaff = currentUser?.role.name === 'admin' || currentUser?.role.name === 'staff';\n const [sharableTooltipText, setSharableTooltipText] = useState('Copy internal link to clipboard (requires Brokerkit access)');\n const [shareablePublicTooltipText, setShareablePublicTooltipText] = useState('Copy public link to clipboard (no Brokerkit login required)');\n const [sharablePublicDocLink, setSharablePublicDocLink] = useState('');\n\n useEffect(() => {\n const documentStoreListener = DocumentStore.addListener(onDocumentStoreChange);\n\n if (documentId) {\n DocumentActions.loadDocument(documentId);\n fetchAndSetPublicDocumentLink(documentId);\n }\n\n return () => {\n if (documentStoreListener) documentStoreListener.remove();\n };\n }, [documentId]);\n\n const onDocumentStoreChange = () => {\n const {\n loadingDocument,\n document,\n lastDocumentStoreAction,\n } = DocumentStore.getState();\n\n let nextState = { loadingDocument, document };\n\n switch (lastDocumentStoreAction) {\n case 'loadDocumentFail':\n nextState = { loadingDocument, error: true };\n break;\n case 'deleteDocumentDone':\n window.location.href = '/recruiter/documents';\n break;\n default:\n break;\n }\n\n setState(nextState);\n };\n\n const handlePrintClick = () => {\n const { document } = state;\n switch (document.document_type) {\n case 'image_document':\n handlePrintImage(document.url);\n break;\n case 'pdf_document':\n case 'pdf_resume':\n handlePrintPdf();\n break;\n default:\n console.log('Document type not supported for printing');\n }\n };\n\n const handlePrintImage = (url) => {\n const printWindow = window.open('', '_blank');\n\n printWindow.onafterprint = function () {\n printWindow.close();\n };\n\n printWindow.document.write(`\n \n \n File not available to display
\n\n
Supported files to display are:
\nPDF, PNG, JPG, JPEG,
\nDOC, DOCX, XLS, XLSX, PPT, PPTX
\nDocument type not supported
;\n\n let style = {};\n if (document.document_type.includes('pdf')) {\n style = { minHeight: '845px' };\n }\n\n return (\n \n
\n );\n };\n\n const renderDocumentActions = () => {\n const { document } = state;\n if (!document) return null;\n const showPrintButton = ['image_document', 'pdf_document', 'pdf_resume'].includes(document.document_type);\n\n return (\n \n
\n \n
\n );\n };\n\n const { loadingDocument, document, error } = state;\n const { title, size } = document || {};\n const TopBarStyle = {\n position: 'sticky',\n zIndex: '999',\n top: '0',\n marginTop: '-30px',\n };\n\n return (\n \n {isAdminOrStaff && (\n <>\n \n setSharableTooltipText('Copied!')}>\n \n \n\n \n setShareablePublicTooltipText('Copied!')}>\n \n \n \n )}\n {showPrintButton && (\n \n \n )}\n \n \n {isAdminOrStaff && (\n <>\n
\n setSharableTooltipText('Copy internal link to clipboard (requires Brokerkit access)')}>\n \n
\n setShareablePublicTooltipText('Copy public link to clipboard (no Brokerkit login required)')}>\n \n
\n \n \n
\n \n \n
\n \n {\n document.internal ? (\n \n \n \n ) : (\n \n \n \n )\n }\n
\n \n \n \n \n
\n \n )}\n \n
\n \n
\n\n {error && (\n \n
\n \n
\n File Preview
\n\n
\n )}\n\n {loadingDocument && (\n \n
\n \n
\n
\n Sorry, but this document is no longer available.
\n\n
\n
\n )}\n\n {document && (\n <>\n {renderDocumentActions()}\n {renderDocumentViewer()}\n \n
\n \n )}\n \n
\n \n {title}\n
\n {formatedFileSize(size)}\n
\n\n \n {formatedFileSize(size)}\n
\n
\n \n
\n \n
\n \n
\n \n \n );\n }\n}\n\nexport default Register;\n","import autoBind from 'react-autobind';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { Input } from 'reactstrap';\nimport PhoneInput from 'react-phone-input-2';\nimport isEmail from 'validator/lib/isEmail';\nimport isMobilePhone from 'validator/lib/isMobilePhone';\nimport { loadStripe } from '@stripe/stripe-js';\nimport {\n Elements,\n CardElement,\n ElementsConsumer,\n} from '@stripe/react-stripe-js';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport ErrorMessage from '~/components/forms/ErrorMessage';\nimport Tooltipable from '~/components/effects/tooltipable';\nimport LeadHelpers from '~/helpers/lead_helpers';\nimport APIRequest from '~/lib/api_request';\n\nconst stripePromise = loadStripe(process.env.STRIPE_PUBLISHIBLE_KEY);\n\nclass SignUp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n team: {\n first_name: '',\n last_name: '',\n email: '',\n phone: '',\n company_name: '',\n timezone: Moment.tz.guess(),\n },\n submitting: false,\n errors: {},\n };\n\n autoBind(this);\n }\n\n handleFirstNameChange = (e) => {\n e.preventDefault();\n\n const first_name = e.target.value;\n\n this.setState((prevState) => ({\n team: { ...prevState.team, first_name },\n }));\n };\n\n handleLastNameChange = (e) => {\n e.preventDefault();\n\n const last_name = e.target.value;\n\n this.setState((prevState) => ({\n team: { ...prevState.team, last_name },\n }));\n };\n\n handleEmailChange = (e) => {\n e.preventDefault();\n\n const email = e.target.value;\n\n this.setState((prevState) => ({\n team: { ...prevState.team, email },\n }));\n };\n\n handleCompanyNameChange = (e) => {\n e.preventDefault();\n\n const company_name = e.target.value;\n\n this.setState((prevState) => ({\n team: { ...prevState.team, company_name },\n }));\n };\n\n handlePhoneChange = (phone) => {\n this.setState((prevState) => ({\n team: { ...prevState.team, phone },\n }));\n };\n\n handleFormSubmit = async (e, elements, stripe) => {\n e.preventDefault();\n\n if (!stripe || !elements) return;\n\n this.setState({ submitting: true });\n\n const { team } = this.state;\n const cardElement = elements.getElement(CardElement);\n const payload = await stripe.createToken(cardElement);\n\n const errors = this.validate();\n\n if (payload.error) errors.stripe = [payload.error.message];\n\n if (_lodash.size(errors) === 0) {\n this.setState({ errors: {} });\n\n const params = {\n ...team,\n page: 'Trial Signup',\n card: {\n id: payload.token.id,\n client_ip: payload.token.client_ip,\n address_zip: payload.token.card.address_zip,\n brand: payload.token.card.brand,\n exp_month: payload.token.card.exp_month,\n exp_year: payload.token.card.exp_year,\n last4: payload.token.card.last4,\n },\n };\n\n APIRequest.post({\n resource: '/v1/registration',\n data: params,\n }).end((error, response) => {\n if (response.body.errors) {\n this.setState({\n errors: response.body.errors,\n submitting: false,\n });\n } else {\n this.setState({ submitting: false }, () => {\n if (!error) {\n browserHistory.push('/users/sign_in');\n window.location.reload(); // Since sign_in page - rails view :(\n }\n });\n }\n });\n } else {\n this.setState({ submitting: false, errors });\n }\n };\n\n validate = () => {\n const { team } = this.state;\n const {\n first_name, last_name, email, phone, company_name,\n } = team;\n\n const errors = {};\n\n if (!first_name) {\n errors.first_name = 'Is invalid';\n }\n\n if (!last_name) {\n errors.last_name = 'Is invalid';\n }\n\n if (!phone || !isMobilePhone(phone, ['en-US'])) {\n errors.phone = 'Is invalid';\n }\n\n if (!email || !isEmail(email)) {\n errors.email = 'Is invalid';\n }\n\n if (!company_name) {\n errors.company_name = [\"Company Name can't be blank\"];\n }\n\n return errors;\n };\n\n render() {\n const { team, submitting, errors } = this.state;\n\n const submitButtonClass = classNames(\n 'btn btn-primary mt-3 mt-xl-0 mt-md-0 pull-right',\n { disabled: submitting },\n );\n\n return (\n <>\n \n
\n \n
\n\n \n
\n \n
\n
\n Create Your Account
\n\n
\n \n \n {({ elements, stripe }) => (\n this.handleFormSubmit(\n e,\n elements,\n stripe,\n )}\n >\n
\n\n \n
\n \n
\n\n \n \n First Name\n \n
\n \n
\n\n \n \n Last Name\n \n
\n \n
\n\n \n \n \n Email Address\n \n
\n \n
\n\n \n \n Mobile Phone Number\n \n
\n \n
\n\n \n \n \n Company Name\n \n
\n {errors.company_name && (\n \n \n Card Details\n \n
\n {errors.stripe && (\n \n \n
\n \n
\n \n )}\n \n \n \n
\n\n \n
\n \n Please Note:\n {' '}\n By signing up, you agree to our\n {' '}\n
\n As you become a part of our community, you may receive\n {' '}\n occasional updates via text & email messages.\n {' '}\n In certain cases, communication surcharges may apply.\n
\n\n {submitting ? (\n \n Creating...\n \n ) : (\n \n Sign Up\n \n )}\n
\n \n
\n \n
\n \n
\n\n \n Why Brokerkit?\n
\n\n\n
\n \n
\n - \n
- \n
- \n
- \n
\n
\n \n \n );\n }\n}\n\nexport default SignUp;\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport VideoPlayer from '~/helpers/video_player';\nimport VideoActions from '~/actions/video_actions';\nimport VideoStore from '~/stores/video_store';\n\nclass Preview extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: false,\n };\n\n autoBind(this);\n }\n\n componentDidMount() {\n const { match } = this.props;\n const videoId = match?.params?.id;\n\n this.videoStoreListener = VideoStore.addListener(this.onVideoStoreChange);\n\n if (videoId) {\n VideoActions.loadVideo(videoId);\n }\n }\n\n componentWillUnmount() {\n if (this.videoStoreListener) this.videoStoreListener.remove();\n }\n\n onVideoStoreChange() {\n const {\n loadingVideo,\n video,\n lastVideoStoreAction,\n } = VideoStore.getState();\n\n let nextState = { loadingVideo, video };\n\n switch (lastVideoStoreAction) {\n case 'loadVideoFail':\n nextState = { loadingVideo, error: true };\n break;\n\n default:\n break;\n }\n\n this.setState(nextState);\n }\n\n renderVideoPlayer = () => {\n const { video } = this.state;\n\n if (!video) return null;\n\n const posterUrl = video.animated_thumbnail ? video.gif_thumbnail : video.thumbnail;\n const videoJsOptions = {\n posterImage: true,\n autoplay: false,\n controls: true,\n fluid: true,\n bigPlayButton: false,\n poster: posterUrl,\n playbackRates: [1, 1.5, 2],\n aspectRatio: '16:9',\n audioTrackButton: false,\n controlBar: {\n pictureInPictureToggle: false,\n fullscreenToggle: true,\n audioTrackButton: false,\n playbackRateMenuButton: true,\n },\n sources: [{\n src: video.url,\n type: 'video/mp4',\n }],\n };\n\n return (\n \n
\n \n
\n\n \n
\n \n
\n
\n \n Start Your Free\n {' '}\n {process.env.TRIAL_PERIOD_DAYS_FOR_TRIAL_SIGNUP || 7}\n {' '}\n Day Trial\n
\n\n
\n \n \n {({ elements, stripe }) => (\n this.handleFormSubmit(\n e,\n elements,\n stripe,\n )}\n >\n
\n\n \n
\n \n
\n\n \n \n First Name\n \n
\n \n
\n\n \n \n Last Name\n \n
\n \n
\n\n \n \n \n Email Address\n \n
\n \n
\n\n \n \n Mobile Phone Number\n \n
\n \n
\n\n \n \n \n Company Name\n \n
\n {errors.company_name && (\n \n \n Card Details\n \n
\n {errors.stripe && (\n \n \n
\n \n
\n \n )}\n \n \n \n
\n\n \n
\n\n \n No charges will be processed today.\n
\n\n\n After\n {' '}\n {process.env.TRIAL_PERIOD_DAYS_FOR_TRIAL_SIGNUP || 7}\n {' '}\n days, we'll process a charge to your card on file,\n {' '}\n unless you decide to cancel prior to the end of your\n {' '}\n {process.env.TRIAL_PERIOD_DAYS_FOR_TRIAL_SIGNUP || 7}\n {' '}\n Day Trial.\n {' '}\n Our Payments are 100% Safe & Secure.\n
\n\n
\n \n Please Note:\n {' '}\n By signing up, you agree to our\n {' '}\n
\n As you become a part of our community, you may receive\n {' '}\n occasional updates via text & email messages.\n {' '}\n In certain cases, communication surcharges may apply.\n
\n\n {submitting ? (\n \n \n Sign Up\n \n )}\n
\n \n
\n \n
\n \n
\n\n \n Why Brokerkit?\n
\n\n\n
\n \n
\n - \n
- \n
- \n
- \n
\n
\n );\n }\n\n render() {\n const { loadingVideo, video, error } = this.state;\n\n if (loadingVideo) {\n return (\n \n
\n \n
\n \n
\n );\n }\n\n return (\n \n
\n );\n }\n}\n\nPreview.defaultProps = {};\n\nPreview.propTypes = {\n match: PropTypes.shape({\n params: PropTypes.shape({\n id: PropTypes.string,\n }).isRequired,\n }).isRequired,\n};\n\nexport default Preview;\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nexport default function ConfirmAlertBox({\n onConfirm, message, disabled, buttonTitle,\n}) {\n return (\n \n
\n\n {error && (\n \n {video && (\n
\n \n
\n )}\n \n
\n )}\n\n {video && (\n <>\n {this.renderVideoPlayer()}\n\n \n
\n \n
\n
\n Sorry, but this video is no longer available.
\n\n
\n
\n \n )}\n \n
\n \n {video.description}\n
\n \n \n
\n
\n
\n );\n}\n","import React from 'react'\n\nconst DocumentLimitAlert = ({onClose}) => (\n \n
\n \n
\n { message }\n
\n\n
\n)\n\nexport default DocumentLimitAlert\n","import React from 'react';\nimport DocumentLimitAlert from '~/components/shared/document_limit_alert';\nimport { Popover, OverlayTrigger } from 'react-bootstrap';\n\nconst DocumentLimitAlertChecker = (props) => {\n const { showLimitAlert, setShowLimitAlert, placement, children } = props;\n\n const renderPopover = (props) => {\n return (\n \n
\n \n \n
\n \n Oh no, you've reached your allowed document limit\n
\nDelete some old documents or upgrade your subscription.
\n Upgrade your Subscription\n\n
\n)\n\nexport default ErrorAlert\n","import autoBind from 'react-autobind';\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n// https://reactjs.org/docs/error-boundaries.html\n//\n// Catch JavaScript errors anywhere in their child component tree, log those errors,\n// and display a fallback UI instead of the component tree that crashed.\n//\n// Error boundaries catch errors during rendering, in lifecycle methods,\n// and in constructors of the whole tree below them.\n//\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n autoBind(this);\n\n this.state = { hasError: false };\n }\n\n componentDidCatch(error, info) {\n // Display fallback UI\n this.setState({ hasError: true });\n // You can also log the error to an error reporting service\n // logErrorToMyService(error, info);\n }\n\n handleRecoveryClick(e) {\n e.preventDefault();\n\n const { onRecovery } = this.props;\n\n onRecovery();\n }\n\n render() {\n const recoveryLink = Click here to reload;\n const { hasError } = this.state;\n const { children } = this.props;\n\n if (hasError) {\n return (\n \n \n \n
\n
\n \n
\n Error: \"{message}\"
\nIf the problem persists, email us at support@getbrokerkit.com.
\n\n Oh shoot, looks like we had an issue.\n {' '}\n {recoveryLink}\n .\n
\n );\n }\n return children;\n }\n}\n\nErrorBoundary.defaultProps = {\n children: null,\n onRecovery: () => false,\n};\n\nErrorBoundary.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node,\n ]),\n onRecovery: PropTypes.func,\n};\n\nexport default ErrorBoundary;\n","import autoBind from 'react-autobind';\nimport React from 'react';\n\nconst Notice = ({ children, color }) => (\n \n
\n);\n\nclass GlobalNotices extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n autoBind(this);\n }\n\n render() {\n const { currentUser, currentTeam } = Rails.helpers;\n\n if (!currentTeam) return null;\n\n if (!currentTeam.activated_at || !currentTeam.live) {\n return (\n \n {children}\n
\n \n
\n);\n\nexport default StyleguideDatepicker;\n","import React from 'react';\nimport EmailEditor from '../forms/HtmlEditors/EmailEditor';\n\nconst StyleguideHtmlEditor = (props) => (\n \n
\n);\n\nexport default StyleguideHtmlEditor;\n","import React from 'react';\nimport Select from '../forms/dropdowns/SelectWrapper/Select';\n\nconst StyleguideSelect = (props) => (\n \n
\n);\n\nexport default StyleguideSelect;\n","import React from 'react';\n\nconst A2pNotApprovedWarning = () => (\n \n This number was added to an already approved verified texting campaign, but the profile was not submitted. To comply with carrier texting regulations, please resubmit the profile\n {' '}\n here\n {' '}\n to enable texting from this number. Once submitted, your number will be reviewed and approved within an hour.\n
\n);\n\nexport default A2pNotApprovedWarning;\n","import React, { Component, createRef } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\nimport APIRequest from '~/lib/api_request';\nimport Tooltipable from '~/components/effects/tooltipable';\n\nconst onLogout = () => {\n fetch('/users/sign_out', {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('[name=csrf-token]').content,\n },\n })\n .then((response) => {\n if (response.ok) {\n top.location = '/';\n } else {\n console.error('Logout failed');\n }\n })\n .catch((error) => {\n console.error('Logout error:', error);\n });\n};\n\nconst splitParagraph = (text, maxLength = 70) => text.split(' ').reduce((lines, word) => {\n const currentLine = lines[lines.length - 1];\n if (currentLine && (`${currentLine} ${word}`).length <= maxLength) {\n lines[lines.length - 1] += ` ${word}`;\n } else {\n lines.push(word);\n }\n return lines;\n}, ['']);\n\nconst WarningMessage = ({ message, onClose }) => {\n if (!message) return null;\n const errorMessage = splitParagraph(message);\n const { currentUser } = Rails.helpers;\n const warningText = currentUser.is_google ? {\n tooltipText: 'Google',\n iconText: 'Oops, Permissions weren’t Granted',\n } : {\n tooltipText: 'Google/Microsoft',\n iconText: 'Oops, this feature is not available',\n };\n\n return (\n \n
\n );\n};\n\nconst getErrorMessage = (type) => {\n const action = type.toLowerCase() === 'email' ? 'email' : 'appointments';\n return `To send ${action} directly via your Google account,\n please grant ${action === 'appointments' ? 'calendar' : action} access on the sign-in page.`;\n};\n\nconst getGenericErrorMessage = (type) => {\n const action = type.toLowerCase() === 'email' ? 'email' : 'calendar';\n return `An error occurred while checking permissions for ${action},\n please try again later.`;\n};\n\nconst checkGoogleScopes = async (type) => {\n const apiUrl = '/v1/auth/check_google_scopes';\n const requestType = {\n resource: apiUrl,\n data: {\n buttonType: type,\n },\n };\n\n try {\n const response = await APIRequest.get(requestType);\n\n if (response?.body?.invalidToken) {\n top.location = '/google_token_expired';\n return { error: true, message: null };\n }\n\n if (!response?.body?.hasRequiredScope) {\n const errorMsg = getErrorMessage(type);\n return { error: true, message: errorMsg };\n }\n return { error: false, message: null };\n } catch (error) {\n const errorMsg = getGenericErrorMessage(type);\n return { error: true, message: errorMsg };\n }\n};\n\nexport { WarningMessage, checkGoogleScopes };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { captureEvent } from '~/helpers/capture_posthog_event';\n\nclass LimitExceededWarning extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n sms_limit: Rails.subscription_limit.sms_limit,\n pricing_plan_name: Rails.subscription.pricing_plan_name,\n };\n }\n\n componentDidMount() {\n captureEvent('alerts on texting over the limit');\n }\n\n render() {\n const { sms_limit, pricing_plan_name } = this.state;\n const {\n selectedItemsCount, smsStats, segmentsCount, onWarningAccepted, textMessagesCount,\n } = this.props;\n const totalSegments = segmentsCount * selectedItemsCount;\n const exceedingLimit = totalSegments + (smsStats?.thisMonth ?? 0) - sms_limit;\n\n return (\n \n \n
\n {errorMessage.map((line, index) => (\n
\n \n
\n {errorMessage.map((line, index) => (\n {line}
\n ))}\n\n
\n \n \n \n \n \n \n \n
\n \n
\n );\n }\n}\n\nLimitExceededWarning.defaultProps = {\n segmentsCount: 0,\n smsStats: {},\n selectedItemsCount: 0,\n textMessagesCount: 1,\n onWarningAccepted: () => {},\n};\n\nLimitExceededWarning.propTypes = {\n segmentsCount: PropTypes.number,\n smsStats: PropTypes.shape({}),\n selectedItemsCount: PropTypes.number,\n textMessagesCount: PropTypes.number,\n onWarningAccepted: PropTypes.func,\n};\n\nexport default LimitExceededWarning;\n","import React from 'react';\n\nconst OwnerContactWarning = () => (\n \n
\n \n
\n Heads Up! Additional Fees Ahead!
\n \n\n You're about to send \n {textMessagesCount}\n text message(s) with \n \n {segmentsCount}\n text segment(s)\n \n to \n \n {selectedItemsCount}\n contact(s) \n \n which will surpass the texting allocation for your \n \n pricing plan \n {pricing_plan_name}\n \n with an \n \n overage of \n {exceedingLimit}\n segment(s)\n \n and generate texting usage fees. Please confirm to proceed with the text message. You can review your billing page \n \n here\n \n to see your existing usage and/or upgrade your pricing plan or email us at support@getbrokerkit.com with questions.\n
\n\n Note: If the owner of the contact's phone number is not added to a verified texting use case, the message will not be sent.\n
\n);\n\nexport default OwnerContactWarning;\n","import React from 'react';\n\nconst VerifiedTextingWarning = () => (\n \n 📵 This phone number is not linked to an approved verified texting campaign. To comply with carrier texting regulations, please register for verified texting\n {' '}\n here\n {' '}\n first to enable texting from this number.\n
\n);\n\nexport default VerifiedTextingWarning;\n","import { axiosInstance } from '~/lib/api_request';\n\nexport const TINYMCE_SCRIPT_PATH = '/packs/dist/tinymce/tinymce.min.js';\n\nexport const SIGNATURE_EDITOR_PLUGINS = 'autoresize code advlist lists preview emoticons link autolink image wordcount table visualblocks charmap media';\nexport const SIGNATURE_EDITOR_TOOLBAR = 'undo redo | blocks fontfamily fontsize | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | image videos link table | charmap emoticons | forecolor backcolor | removeformat | preview | ai-assist | code';\n\nexport const LANDING_PAGE_EDITOR_PLUGINS = 'autoresize code advlist lists preview emoticons link autolink image wordcount table visualblocks charmap media';\nexport const LANDING_PAGE_EDITOR_TOOLBAR = 'undo redo | blocks fontfamily fontsize | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | image videos media link table | charmap emoticons | forecolor backcolor | removeformat | preview | ai-assist | code';\n\nexport const ACTIVITY_EDITOR_PLUGINS = 'autoresize advlist lists preview emoticons link autolink image wordcount table charmap';\nexport const ACTIVITY_EDITOR_TOOLBAR = 'undo redo | blocks fontfamily fontsize | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | image link table | charmap emoticons | forecolor backcolor | removeformat | preview | ai-assist';\n\nexport const APPT_EDITOR_PLUGINS = 'autoresize preview emoticons wordcount charmap advlist lists link autolink';\nexport const APPT_EDITOR_TOOLBAR = 'undo redo | bold italic | numlist bullist | link | charmap emoticons | variables | removeformat | preview | ai-assist';\n\nexport const TASK_EDITOR_PLUGINS = 'autoresize advlist lists preview emoticons link charmap';\nexport const TASK_EDITOR_TOOLBAR = 'undo redo | bold italic underline | numlist bullist | link | charmap emoticons | forecolor backcolor | preview | ai-assist';\nexport const TASK_CAMPAIGN_EDITOR_TOOLBAR = 'undo redo | bold italic underline | numlist bullist | link | charmap emoticons | forecolor backcolor | variables | preview | ai-assist';\n\nexport const EMAIL_EDITOR_PLUGINS = 'autoresize code advlist lists preview emoticons link autolink image wordcount table visualblocks charmap';\nexport const EMAIL_EDITOR_TOOLBAR = 'undo redo | blocks fontfamily fontsize | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | image videos link table | charmap emoticons | forecolor backcolor | variables | removeformat | preview | code | ai-assist';\n\nexport const SMS_TEXT_EDITOR_PLUGINS = 'autoresize preview emoticons wordcount charmap';\nexport const SMS_TEXT_EDITOR_TOOLBAR = 'undo redo | charmap emoticons | images videos | variables | preview | ai-assist';\n\nexport const IMAGES_UPLOAD_HANDLER = (blobInfo, progress) => new Promise((resolve, reject) => {\n const formData = new FormData();\n\n formData.append('image[image]', blobInfo.blob(), blobInfo.filename());\n\n axiosInstance.post('/v1/images', formData, {\n headers: { 'Content-Type': 'multipart/form-data' },\n onUploadProgress: (progressEvent) => {\n const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);\n progress(percentCompleted);\n },\n }).then((response) => {\n if (response.data && response.data.image && response.data.image.url) {\n resolve(response.data.image.url);\n } else {\n reject(new Error('Invalid response, URL missing.'));\n }\n }).catch((error) => {\n if (error.response) {\n reject(new Error(`HTTP Error: ${error.response.status}, ${error.response.data}`));\n } else if (error.request) {\n reject(new Error('No response received'));\n } else {\n reject(error.message);\n }\n });\n});\n","import Moment from 'moment';\n\nexport const generateDateOptions = (startDate = Moment().startOf('month'), endDate = Moment().startOf('month').add(2, 'years')) => {\n const options = [];\n\n for (let d = Moment(startDate).startOf('month'); d.isBefore(endDate); d.add(1, 'month')) {\n options.push({ value: d.format('YYYY-MM-DD'), label: d.format('MMMM YYYY') });\n }\n\n return options;\n};\n","export const NOTIFICATION_TYPE_OPTIONS = [\n { value: 'all', label: 'All' },\n { value: 'email', label: 'Email' },\n { value: 'text', label: 'Text' },\n { value: 'agent_alerts_new_listing', label: 'Agent Alert - New Listing' },\n { value: 'agent_alerts_new_pending', label: 'Agent Alert - New Pending' },\n { value: 'agent_alerts_new_contract', label: 'Agent Alert - New Contract' },\n { value: 'agent_alerts_new_closing', label: 'Agent Alert - New Closing' },\n { value: 'agent_alerts_misc', label: 'Agent Alert - Misc' },\n // { value: 'call', label: 'Call' },\n // { value: 'landing_page', label: 'Landing Page' },\n // { value: 'referral', label: 'Referral' },\n];\n","export const relitixProductionFilterTooltip = `\n- \n
- Sales production volume over the last twelve months. \n
- \n
- Total units sold by an agent on either side of a transaction in the last twelve months. \n
- \n
- Sales volume production in the last twelve months compared to the prior twelve months on a dollar basis. \n
- \n
- Sales volume production in the last twelve months compared to the prior twelve months on a percentage basis. \n
- \n
- The average sales price of all transactions sold by the agent in the last twelve months. \n
- \n
- This rating indicates the probability that this agent will still be in the business in their fourth year and that they'll be closing more than 3 million in volume. \n
- \n
- It compares this agent's behavior to the behavior of agents who have switched offices and gives us the likelihood that this agent will switch offices in the next three months. \n
- Green: The agent is less likely than the average agent to switch offices. \n
- Yellow: They are 5 times more likely than the average agent to switch offices in the next 3 months. \n
- Red: They are 10 times more likely than the average agent to switch offices in the next 3 months. \n
- \n
- Each agent is graded based on how well they handled their listings over the last 6 to 18 months. All the agents in the MLS are graded on a curve. The top 20% of agents in the MLS get an A, and the bottom 20% get an F. \n
- \n
- Assigns a dollar amount to this agent’s effectiveness with listings by comparing the volume they closed on their listings to what an average agent would have closed for those same listings. If there is a high negative number, this agent most likely had a high-priced listing canceled or expired. \n
- \n
- This shows the number of listings the agent has held over the last five years and the percentage of those that closed. \n
- \n
- The number of listings taken between 6 and 66 months ago. Co-listing agents are not counted. \n
- \n
- \n The office of your company which is located the closest to the geographical center of an agent’s historical listings and sales activity. This determines the best-fit office location for a prospective agent recruit.\n \n
- \n
- Address of your closest office. \n
- \n
- \n This is the straight-line distance from the geographical center of the agent’s historical listing and sale activity to your closest office.\n \n
- \n
- \n This is the straight-line distance from the geographical center of the agent’s historical listing and sale activity to their current office. Large values here indicate agents working in virtual offices.\n \n
- \n
- Agent's office mailing zip code. \n
- \n
- The zip code that is the center of the agent’s production. \n
- \n
- \n The date of the first MLS transaction (listing or sale) at the agent's current office. Note that Relitix only loads back to 2011 for most MLSs.\n \n
- \n
- \n The date of the first MLS transaction record in which the agent appears, regardless of office. Note that this is limited by the history loaded in Relitix’s server and will not be accurate beyond the first date of complete data for the MLS in question.\n \n
\n \n
\n );\n }\n}\n\nVideoPlayer.defaultProps = {};\n\nVideoPlayer.propTypes = {\n handleReRecord: PropTypes.func.isRequired,\n options: PropTypes.shape({}).isRequired,\n};\n\nexport default VideoPlayer;\n","import request from 'superagent';\nimport axios from 'axios';\nimport qs from 'qs';\nimport GlobalContainer from '~/components/global_container';\n\nconst unauthorizedRedirect = (req) => {\n req.on('response', (res) => {\n if (res.status === 401) {\n request.delete('/users/sign_out')\n .set('X-CSRF-Token', getCSRFToken())\n .end((err, response) => {\n if (!err) {\n window.location.href = '/users/sign_in';\n }\n });\n }\n });\n};\n\nconst getCSRFToken = () => document.querySelector(\"meta[name='csrf-token']\").getAttribute('content');\n\nconst APIRequest = {\n apiRequiredHeaders() {\n const headers = {};\n if (Rails.helpers.currentTeam) headers.team = Rails.helpers.currentTeam.id;\n if (Rails.helpers.authToken) {\n headers.Authentication = Rails.helpers.authToken;\n }\n return headers;\n },\n\n setDefaultOptions(options) {\n const defaultOpts = {\n data: {\n product: GlobalContainer?.product(),\n },\n };\n\n return _lodash.merge(options, defaultOpts);\n },\n\n ajaxRequest(resource, method, type = 'application/json', data) {\n return request(method, `${Rails.apiUrl}/api${resource}`)\n .set(this.apiRequiredHeaders())\n .type(type)\n .use(unauthorizedRedirect)\n .accept('application/json');\n },\n\n get(options) {\n const mergedOptions = this.setDefaultOptions(options);\n return this.ajaxRequest(mergedOptions.resource, 'GET').query(\n qs.stringify(mergedOptions.data, { arrayFormat: 'brackets' }),\n );\n },\n\n post(options, type) {\n const mergedOptions = this.setDefaultOptions(options);\n return this.ajaxRequest(mergedOptions.resource, 'POST', type).send(\n mergedOptions.data,\n );\n },\n\n put(options) {\n const mergedOptions = this.setDefaultOptions(options);\n return this.ajaxRequest(mergedOptions.resource, 'PUT').send(\n mergedOptions.data,\n );\n },\n\n patch(options) {\n const mergedOptions = this.setDefaultOptions(options);\n return this.ajaxRequest(mergedOptions.resource, 'PATCH').send(\n mergedOptions.data,\n );\n },\n\n delete(options) {\n const mergedOptions = this.setDefaultOptions(options);\n return this.ajaxRequest(mergedOptions.resource, 'DELETE').send(\n mergedOptions.data,\n );\n },\n\n abort(req) {\n if (req) {\n req.abort();\n }\n },\n};\n\nexport const axiosInstance = axios.create({\n baseURL: `${Rails.apiUrl}/api`,\n headers: APIRequest.apiRequiredHeaders(),\n responseType: 'json',\n});\n\nexport const apiV2Instance = axios.create({\n baseURL: `${Rails.apiUrl}/v2`,\n headers: { 'Content-Type': 'application/json' },\n responseType: 'json',\n});\n\nexport default APIRequest;\n","import bootbox from 'bootbox';\n\n/**\n * BrokerBit application object - Store all common library methods\n * @type {Object}\n */\nconst brokerbit = {\n /**\n * Open confirmation box and execute callback\n * @param {Object} options - Confirmation options\n * @param {string} options.message - Confirmation message\n * @param {string} options.size - Box size\n * @param {string} options.confirmLabel - Confirm label\n * @param {string} options.cancelLabel - Cancel label\n * @param {callback} options.callback\n */\n confirmBox(options = {}) {\n const defaults = {\n title: '',\n message: 'Are you sure?',\n size: 'small',\n confirmLabel: 'Yes',\n confirmClass: 'btn-success',\n cancelClass: 'btn-secondary',\n cancelLabel: 'No',\n callback: () => false,\n };\n\n const opts = Object.assign(defaults, options);\n\n const showModal = (callback) => (ok) => {\n callback(ok);\n\n /* Hack to enable scroll on mobile, since you can't edit bootbox code\n * Issue is that bootbox, hides all modals on page, disabling scroll\n */\n setTimeout(() => {\n const $drawer = $('.drawer');\n const $page = $('.leads-pages');\n\n if ($drawer.length) {\n $page.addClass('modal-open');\n $drawer.modal({ keyboard: false, backdrop: 'static' });\n }\n }, 500);\n };\n\n bootbox.confirm({\n title: opts.title,\n size: opts.size,\n message: opts.message,\n buttons: {\n confirm: {\n label: opts.confirmLabel,\n className: opts.confirmClass,\n },\n cancel: {\n label: opts.cancelLabel,\n className: opts.cancelClass,\n },\n },\n callback: showModal(opts.callback),\n });\n },\n\n dialogBox(options = {}) {\n const defaults = {\n title: '',\n message: 'Are you sure?',\n size: 'small',\n okLabel: 'Ok',\n okClass: 'btn-success',\n okCallback: () => false,\n };\n\n const opts = Object.assign(defaults, options);\n\n bootbox.dialog({\n title: opts.title,\n size: opts.size,\n message: opts.message,\n buttons: {\n ok: {\n label: opts.okLabel,\n className: opts.okClass,\n callback: opts.okCallback,\n },\n },\n });\n },\n\n /**\n * Compare current class and return *active* if matched\n * @param {string} currentType - Current element type\n * @param {string} selectedType - Selected element type\n * @returns {string} 'active' or ''\n */\n isActive(currentType, selectedType) {\n if (currentType === selectedType) {\n return 'active';\n }\n\n return '';\n },\n};\n\nexport default brokerbit;\n","/**\n * Validates if value(s) exist in a list of options\n * @param {string|number|Array