\n {children}\n \n);\n\nPreTooltipContent.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nexport default PreTooltipContent;\n","import React from \"react\";\nimport { CommentRegularV6, CommentSlashRegularV6, CommentXmarkRegularV6 } from \"@icons\";\nimport twilioErrorCodes from \"@shared/v2/twilioErrorCodes\";\nimport PreTooltipContent from \"../../../../Inbox/components/PreTooltipContent\";\n\nconst SMS_STATUS_ICONS = {\n valid: CommentRegularV6,\n invalid: CommentSlashRegularV6,\n unsubscribed: CommentXmarkRegularV6,\n};\n\nconst SMS_STATUS_ICON_MODIFIERS = {\n valid: \"tw-text-neutral-gray-75\",\n invalid: \"tw-text-semantic-yellow-100\",\n unsubscribed: \"tw-text-brivity-coral-110\",\n};\n\nexport const SMS_STATUS_DESCRIPTIONS = {\n valid: \"Can Be Texted\",\n invalid: \"Cannot Be Texted\",\n unsubscribed: \"Opted-out\",\n};\n\nexport const SMS_STATUS_TOOLTIPS = {\n valid: \"Can Be Texted\",\n invalid:\n \"This number may be unreachable via text message (landline or VOIP)\\nYour account may be liable for SMS failures.\",\n unsubscribed: \"This number has opted out of text communication and cannot be texted\",\n};\n\nconst smsStatusIconForStatus = (status, errorCode) => {\n const UsedIcon = SMS_STATUS_ICONS[status];\n return {\n icon: ({ size = \"l\" }) => \n DNC\n
\n );\n};\n\nDncFlag.propTypes = {\n value: PropTypes.bool,\n};\n\nexport default DncFlag;\n","import PropTypes from \"prop-types\";\nimport React, { useMemo } from \"react\";\n\nimport { viewPhoneShape } from \"@shared/models/Communications/viewPhone\";\nimport Tooltip from \"@shared/v2/Tooltip/Tooltip\";\nimport DncFlag from \"./DncFlag\";\n\nconst Contact = ({ phone, isDnc, personName }) => {\n const flagged = phone && (phone.smsUnsubscribed || !phone.textable);\n const flaggedClasses = phone?.smsUnsubscribed ? \"tw-text-semantic-red-100\" : \"tw-text-semantic-yellow-100\";\n\n const warningIcon = phone?.smsIcon?.icon || null;\n const warningTooltip = phone?.smsIcon?.tooltip || null;\n const phoneNumber = phone?.formattedNumber;\n\n return (\n \n );\n};\n\nContact.propTypes = {\n phone: PropTypes.shape(viewPhoneShape).isRequired,\n personName: PropTypes.string.isRequired,\n isDnc: PropTypes.bool,\n};\n\nContact.defaultProps = {\n isDnc: false,\n};\nexport default Contact;\n","import React from \"react\";\n\nconst HelperText = ({ isDnc }) => {\n const dncHelperText = (\n \n The number you are contacting might be on the Do Not Call registry.\n
\n
\n );\n};\n\nconst interactionShape = { interacted_at: PropTypes.string, dateCreated: PropTypes.string };\n\nLastSeen.propTypes = {\n smsHistory: PropTypes.arrayOf(PropTypes.shape(interactionShape)).isRequired,\n};\n\nexport default LastSeen;\n","const placeholderContent = (viewPhone) => {\n if (!viewPhone) { return \"Compose message\" }\n const messageable = !viewPhone?.smsUnsubscribed;\n return messageable ? \"Compose message\" : viewPhone.smsIcon.tooltip;\n};\n\nexport default placeholderContent;\n","const CALL_STATES = {\n Init: \"init\",\n Started: \"started\",\n Ringing: \"ringing\",\n Connected: \"connected\",\n Ended: \"ended\",\n};\n\nexport default CALL_STATES;\n","export const updateStageAttribute = (editablePerson) => {\n const { type_name, stage } = editablePerson.data.attributes;\n\n if (type_name !== \"lead\") {\n editablePerson.data.attributes.stage = \"\";\n editablePerson.data.attributes.stage_type = \"\";\n } else if (type_name === \"lead\" && stage === \"\") {\n editablePerson.data.attributes.stage = \"New lead\";\n editablePerson.data.attributes.stage_type = \"lead\";\n }\n};\n\nexport const formatFileSize = (bytes) => {\n if (bytes === 0) return \"0 KB\";\n\n const k = 1024;\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + \" \" + sizes[i];\n};\n","/* \n This file is used to help standardizing action creators.\n\n Each action should be namespaced to the reducer they are intended to be used at. \n This will be accomplished using the namespace function along with setting the \n reducer name atop the actions file.\n*/\nimport { snakeCase } from \"lodash\";\nimport moment from \"moment\";\n\nimport { pipe } from \"../Transactions/utils/helpers\";\n\nconst upCase = (string) => string.toUpperCase();\nconst adjustReducerName = pipe(snakeCase, upCase);\n\nconst prefix = (reducerName, actionType) => `[${reducerName}]_${actionType}`;\n\n/**\n * Transforms the action's name to apply upper-case, underscore-separated, square-bracket-enclosed reducerName as prefix.\n * @example\n * // return \"[TDP_REDUCER]_ADD_IMG\"\n * namespaceType(\"ADD_IMG\", \"tdpReducer\")\n * @param {string} actionType\n * @param {string} reducerName\n * @returns {string}\n */\nconst namespaceType = (reducerName, actionType) => prefix(adjustReducerName(reducerName), actionType);\n\n/**\n * Returns an action with namespaced type property. Used to apply reducer namespacing.\n * @example\n * // return { type: \"[TDP_REDUCER]_ADD_IMG\" }\n * namespaceAction(\"tdpReducer\", { type: \"ADD_IMG\" });\n * @param {string} reducerName\n * @param {object} action - Reducer action's, with `type` as the identifier\n * @returns {object} - Action with namespaced `type` property\n */\nconst namespaceAction = (reducerName, action) => ({\n ...action,\n type: namespaceType(reducerName, action.type),\n});\n\n/**\n * Curries namespace action in order to provide namespace once and apply it to multiple actions\n * @param {string} reducerName\n * @returns {function} a function that applies namespaceAction with the provided action and curried reducerName\n */\nconst curriedNamespaceAction = (reducerName) => (action) => namespaceAction(reducerName, action);\n\nexport default curriedNamespaceAction;\n\n// Returns a string calculated by timeframe created\n// const exactDateHelper = (days) => moment().add(days, \"days\").format(\"MM/DD/YYYY\");\n\nconst IMMEDIATE_UNKNOWN = [\"Immediate\", \"Unknown\"];\n\nconst formatExactDateToRead = (dateString) => {\n // Edge case... if dropdown option chosen is Immediate || Unknown don't format\n if (IMMEDIATE_UNKNOWN.includes(dateString)) return dateString;\n\n return moment(dateString, \"MM/DD/YYYY\").format(\"MMM DD, YYYY\");\n};\n\nconst TIMEFRAME_PREFIX_DICTIONARY = {\n Immediate: null,\n Unknown: null,\n \"Within 90 days\": \"By\",\n \"Within a year\": \"By\",\n \"After a year\": \"After\",\n Custom: \"\",\n};\n\n// Gets a easy to read date for FE ex: By Mar 15, 2023 || After Mar 20, 2023 || Unknown\nexport const timeframeReadHelper = (timeframe, exactDate) => {\n if (IMMEDIATE_UNKNOWN.includes(timeframe)) return timeframe;\n\n const pref = TIMEFRAME_PREFIX_DICTIONARY[timeframe];\n\n return `${pref} ${formatExactDateToRead(exactDate)}`;\n};\n","const createAgreement = (rawAgreement) => ({\n agreementType: rawAgreement?.agreement_type,\n id: rawAgreement?.id,\n signedDate: rawAgreement?.signed_at,\n expirationDate: rawAgreement?.expired_at,\n cancellationDate: rawAgreement?.cancelled_at,\n isCompleted: rawAgreement?.completed,\n isCanceled: rawAgreement?.cancelled,\n listing: rawAgreement?.listing\n ? { label: rawAgreement?.listing?.name, value: rawAgreement?.listing?.id }\n : null,\n status: rawAgreement?.status,\n document: createDocument(rawAgreement?.document),\n addendums: createAddendums(rawAgreement?.addendums || []),\n});\n\nconst createDocument = (rawDoc) => ({\n fileExtension: `.${rawDoc?.file_name.split(\".\").pop()}`,\n url: rawDoc?.url,\n uploadedById: rawDoc?.uploaded_by_id,\n uploadedByImageUrl: rawDoc?.uploaded_by_image_url,\n uploadedByImage: rawDoc?.uploaded_by_image,\n uploadedByName: rawDoc?.uploaded_by_name,\n uploadedByUrl: rawDoc?.uploaded_by_url,\n fileName: rawDoc?.file_name,\n fileType: rawDoc?.file_type,\n humanReadableSize: rawDoc?.human_readable_size,\n id: rawDoc?.id,\n nakedName: rawDoc?.naked_name,\n imageIcon: rawDoc?.image_icon,\n size: rawDoc?.size,\n uploadedAt: rawDoc?.uploaded_at,\n addedAgo: rawDoc?.added_ago,\n dateAdded: rawDoc?.date_added,\n expiringUrl: rawDoc?.expiring_url,\n documentSubType: rawDoc?.document_sub_type,\n canRename: true,\n});\n\nexport const createAgreements = (rawAgreements) =>\n rawAgreements.map((rawAgreement) => createAgreement(rawAgreement));\n\nexport const createAddendums = (rawAddendums) =>\n rawAddendums.map((rawAddendum) => createDocument(rawAddendum));\n\nexport const formattedStages = (rawFinancingStages) =>\n rawFinancingStages.map((stage) => ({\n label: stage.toUpperCase(),\n value: stage,\n }));\n","import axios from \"axios\";\nimport { produce } from \"immer\";\nimport { caseTransformingAxios } from \"@shared/v2/caseTransformingAxios\";\nimport { updateStageAttribute } from \"./helper\";\nimport namespaceAction from \"../../reducers/helpers\";\nimport { createAgreements, createAddendums, formattedStages } from \"./apiAdapters\";\n\nconst REDUCER_NAME = \"AgreementReducer\";\nconst wrap = namespaceAction(REDUCER_NAME);\n\nexport const agreementUploaded = (data) => wrap({ type: \"AGREEMENT_UPLOADED\", data });\n\nexport const agreementUpdated = (data, id) => wrap({ type: \"AGREEMENT_UPDATED\", data, id });\n\nexport const loanUpdated = (data, id) => wrap({ type: \"LOAN_UPDATED\", data, id });\n\nexport const agreementReplaced = (data, agreementId) =>\n wrap({ type: \"AGREEMENT_REPLACED\", data, agreementId });\n\nexport const removeDeletedAgreement = (id) => wrap({ type: \"DELETE_AGREEMENT\", id });\n\nexport const toggleSuccessToastMsg = (data) => wrap({ type: \"TOGGLE_SUCCESS_TOAST_MSG\", data });\n\nexport const storeFetchedAgreements = (data) => wrap({ type: \"FETCH_AGREEMENTS\", data });\n\nexport const storeFetchedLoans = (data) => wrap({ type: \"FETCH_LOANS\", data });\n\nexport const storeFetchedLoansFinancingStages = (data) =>\n wrap({ type: \"FETCH_LOANS_FINANCING_STAGES\", data });\n\nexport const storeFetchedAvailableTransactions = (data) =>\n wrap({ type: \"FETCH_AVAILABLE_TRANSACTIONS\", data });\n\nexport const storeFetchedAvailableTransactionsForLoan = (data) =>\n wrap({ type: \"FETCH_AVAILABLE_TRANSACTIONS_LOAN\", data });\n\nexport const storeFetchedAddendums = (data) => wrap({ type: \"FETCH_ADDENDUMS\", data });\n\nconst updatePersonSuccess = (data) => {\n return {\n type: \"UPDATE_PERSON_SUCCESS\",\n person: data,\n };\n};\n\nconst togglePersonError = (value) => {\n return {\n type: \"TOGGLE_PERSON_ERROR\",\n value,\n };\n};\n\nexport const updatePersonValues = (name, value) => {\n return {\n type: \"UPDATE_PERSON_VALUES\",\n name,\n value,\n };\n};\n\nexport const openEditPersonModal = () => {\n return {\n type: \"OPEN_EDIT_PERSON_MODAL\",\n };\n};\n\nexport const closeEditPersonModal = () => {\n return {\n type: \"CLOSE_EDIT_PERSON_MODAL\",\n };\n};\n\nconst fetchInitialTimeline = (data) => {\n return {\n type: \"FETCH_INITIAL_TIMELINE\",\n data: data,\n };\n};\n\nconst fetchTimelineError = (data) => {\n return {\n type: \"FETCH_TIMELINE_ERROR\",\n data: data,\n };\n};\n\nconst fetchingTimeline = () => {\n return {\n type: \"FETCHING_TIMELINE\",\n };\n};\n\nexport const updateTimeline = (data, type) => {\n return {\n type: type,\n data: data,\n };\n};\n\nconst updateTimelineEvent = (data) => {\n return {\n type: \"SUBMIT_UPDATE_TIMELINE_EVENT\",\n data: data,\n };\n};\n\nconst deleteTimelineNote = (id) => {\n return {\n type: \"DELETE_TIMELINE_NOTE\",\n id,\n };\n};\n\nconst submitSendEmail = (data) => {\n return {\n type: \"SUBMIT_SEND_EMAIL\",\n data: data,\n };\n};\n\nconst clearEmailState = (bool) => {\n return {\n type: \"CLEAR_EMAIL_STATE\",\n bool: bool,\n };\n};\n\nconst submitEmailError = (data) => {\n return {\n type: \"SUBMIT_ERROR_EMAIL\",\n data: data,\n };\n};\n\nconst submitAddAppointment = (data) => {\n return {\n type: \"SUBMIT_ADD_APPOINTMENT\",\n data: data,\n };\n};\n\nexport const submitNoteSuccess = (note) => ({\n type: \"SUBMIT_NOTE_SUCCESS\",\n note,\n});\n\nexport const updateNoteSuccess = (note) => ({\n type: \"UPDATE_NOTE_SUCCESS\",\n note,\n});\n\nexport const deleteNoteSuccess = (note) => ({\n type: \"DELETE_NOTE_SUCCESS\",\n note,\n});\n\n// use to reload person Detail after Edit Contact modal close\nexport const reloadPerson = (personId) => {\n return (dispatch) => {\n axios\n .get(`/api/v4/person_detail/show/${personId}`, {\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => {\n dispatch(updatePersonSuccess(res.data));\n });\n };\n};\nexport const updatePerson = (editablePerson) => {\n const updatedPerson = produce(editablePerson, (draft) => {\n updateStageAttribute(draft);\n });\n\n return (dispatch) => {\n axios\n .patch(`/api/v4/person_detail/${updatedPerson.data.id}`, {\n person: updatedPerson,\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => {\n console.log(res.data);\n dispatch(updatePersonSuccess(res.data));\n });\n };\n};\n\nexport const updatePersonData = (updatedPersonData) => {\n return (dispatch) => {\n dispatch(updatePersonSuccess(updatedPersonData));\n };\n};\n\nexport const uploadPersonAvatar = (event, person) => {\n return (dispatch) => {\n const fileUploaded = event.target.files[0];\n const url = \"/api/v4/person_detail/upload_avatar/\" + person.data.attributes.slug;\n let form_data = new FormData();\n form_data.append(\"authenticity_token\", ReactOnRails.authenticityToken());\n form_data.append(\"person[avatar]\", fileUploaded);\n axios\n .post(url, form_data)\n .then((res) => {\n dispatch(updatePersonSuccess(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const addTagToPerson = (tag, person) => {\n return (dispatch) => {\n const url = \"/api/v4/person_detail/create_tag/\" + person.data.attributes.id;\n axios\n .post(url, { tag_name: tag, authenticity_token: ReactOnRails.authenticityToken() })\n .then((res) => {\n dispatch(updatePersonSuccess(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const deleteTagFromPerson = (tag_id, person) => {\n return (dispatch) => {\n const url = \"/api/v4/person_detail/destroy_tag/\" + person.data.attributes.id;\n axios\n .delete(url, { data: { tag_id: tag_id, authenticity_token: ReactOnRails.authenticityToken() } })\n .then((res) => {\n dispatch(updatePersonSuccess(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const submitNote = (note) => {\n return (dispatch) => {\n axios\n .post(`/people/${note.notable_id}/notes`, {\n note: { ...note },\n person_details_page: \"true\",\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => {\n dispatch(submitNoteSuccess(res.data));\n dispatch(closeAddNoteModal());\n dispatch(updateTimeline(res.data.timeline, \"UPDATE_PUBLIC_ACTIVITY_EVENTS\"));\n })\n .catch((err) => {\n console.log(err);\n });\n };\n};\n\nexport const updateNote = (note) => {\n return (dispatch) => {\n axios\n .patch(`/people/${note.notable_id}/notes/${note.id}`, {\n note,\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => {\n dispatch(updateNoteSuccess(res.data));\n dispatch(updateTimelineEvent(res.data.timeline, \"UPDATE_PUBLIC_ACTIVITY_EVENTS\"));\n })\n .catch((err) => {\n console.log(err);\n });\n };\n};\n\nexport const getNotes = (person) => {\n return (dispatch) => {\n axios\n .get(`/people/${person.data.id}/notes.json`)\n .then((res) => {\n dispatch(getNotesSuccess(res.data));\n })\n .catch((err) => {\n console.log(err);\n });\n };\n};\n\nexport const deleteNote = (note) => {\n return (dispatch) => {\n axios\n .delete(`/people/${note.notable_id}/notes/${note.id}`, {\n data: {\n authenticity_token: ReactOnRails.authenticityToken(),\n },\n })\n .then((res) => {\n dispatch(deleteNoteSuccess(note));\n dispatch(deleteTimelineNote(note.id));\n })\n .catch((err) => {\n console.log(err);\n });\n };\n};\n\nexport const submitUpdateNote = (value, event) => {\n return (dispatch) => {\n axios\n .patch(`/people/${event.object_attributes.notable_id}/notes/${event.object_attributes.id}`, {\n note: { content: value },\n person_details_page: \"true\",\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => {\n dispatch(updateTimelineEvent(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const submitUpdateInteraction = (interaction) => {\n return (dispatch) => {\n dispatch(updateTimelineEvent(interaction));\n };\n};\n\nexport const submitEmail = (sentEmailData, appInviteNeedsUpdating = null, homeAppRecipientId = null) => {\n return (dispatch) => {\n dispatch(submitSendEmail(sentEmailData));\n\n if (appInviteNeedsUpdating) {\n dispatch(touchHomeAppInviteSent(homeAppRecipientId));\n }\n\n setTimeout(function () {\n dispatch(clearEmailState(false));\n }, 5000);\n };\n};\n\nexport const handleSubmitEmailError = (err) => {\n return (dispatch) => {\n const data = err?.response?.data;\n let errors = data?.content || data?.error || \"Whoops something went wrong! Try again later.\";\n if (typeof data?.errors === \"object\") {\n const firstKey = Object.keys(data.errors)[0];\n errors = `${firstKey} ${data.errors[firstKey].join(\", \")}`;\n }\n dispatch(submitEmailError({ errors, isSupportError: data?.content?.startsWith(\"We apologize\") }));\n };\n};\n\nexport const submitAppointment = (data) => {\n return (dispatch) => {\n dispatch(submitAddAppointment(data));\n };\n};\n\nexport const openAddAppointmentModal = () => {\n return {\n type: \"OPEN_ADD_APPOINTMENT_MODAL\",\n };\n};\n\nexport const closeAddAppointmentModal = () => {\n return {\n type: \"CLOSE_ADD_APPOINTMENT_MODAL\",\n };\n};\n\nexport const addSmsToTimeline = (smsEvent) => {\n return (dispatch) => {\n dispatch(updateTimeline(smsEvent, \"UPDATE_PUBLIC_ACTIVITY_EVENTS\"));\n };\n};\n\nexport const submitOtherInteraction = (url, brivityOtherInteractionWrapper) => {\n return (dispatch) => {\n axios\n .post(url, brivityOtherInteractionWrapper)\n .then((res) => {\n dispatch(updateTimeline(res.data, \"UPDATE_PUBLIC_ACTIVITY_EVENTS\"));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const openManageAccessModal = () => ({ type: \"OPEN_MANAGE_ACCESS_MODAL\" });\n\nexport const closeManageAccessModal = () => ({ type: \"CLOSE_MANAGE_ACCESS_MODAL\" });\n\nexport const fetchTimeline = (slug) => {\n return (dispatch) => {\n dispatch(fetchingTimeline());\n axios\n .get(`/people/${slug}/timeline?remote=true&person_details_page=true`, {\n validateStatus: function (status) {\n return status < 400; // Resolve only if the status code is less than 400\n },\n })\n .then((res) => {\n dispatch(fetchInitialTimeline(res.data));\n })\n .catch((err) => {\n dispatch(fetchTimelineError(err));\n });\n };\n};\n\nexport const openAddRelationShipModal = () => ({ type: \"OPEN_ADD_RELATIONSHIP_MODAL\" });\n\nexport const closeAddRelationShipModal = () => ({ type: \"CLOSE_ADD_RELATIONSHIP_MODAL\" });\n\nexport const openAddNoteModal = () => ({ type: \"OPEN_ADD_NOTE_MODAL\" });\n\nexport const closeAddNoteModal = () => ({ type: \"CLOSE_ADD_NOTE_MODAL\" });\n\nconst uploadingDocument = (bool) => {\n return {\n type: \"UPLOADING_DOCUMENT\",\n bool,\n };\n};\n\nconst documentUploaded = (data) => {\n return {\n type: \"DOCUMENT_UPLOADED\",\n data: data,\n };\n};\n\nconst storeFetchedDocments = (data) => {\n return {\n type: \"FETCH_DOCUMENTS\",\n data: data,\n };\n};\n\nconst removeDeletedDocument = (id) => {\n return {\n type: \"DELETE_DOCUMENT\",\n id,\n };\n};\n\nexport const removeDocAgreement = (id) => {\n return {\n type: \"DELETE_DOCUMENT_AGREEMENT\",\n id,\n };\n};\n\nexport const renameDocument = (id, newName) => {\n return {\n type: \"RENAME_DOCUMENT\",\n id,\n newName,\n };\n};\n\nexport const createTransactions = (transactionData) => {\n return async (dispatch) => {\n try {\n const {\n selectedAgreementName,\n propertyType,\n closePrice,\n transactionTitle,\n source,\n client_id,\n clientIntent,\n referringAgent,\n referralFee,\n primaryAgent,\n commission,\n commission_percentage,\n referralFeeIsPercentage,\n personId,\n personRoleId,\n } = transactionData;\n\n const AGREEMENT_NAME_HASH = {\n buyer: \"BuyerListing\",\n seller: \"SellerListing\",\n referral: \"ReferralListing\",\n };\n\n const formData = new FormData();\n\n formData.append(\"utf8\", \"✓\");\n formData.append(\"authenticity_token\", ReactOnRails.authenticityToken());\n formData.append(\"listing[type]\", AGREEMENT_NAME_HASH[selectedAgreementName]);\n\n formData.append(\n \"listing[status]\",\n selectedAgreementName === \"buyer\" || selectedAgreementName === \"seller\" ? \"pipeline\" : \"active\",\n );\n formData.append(\"listing[title]\", transactionTitle);\n formData.append(`listing[viewers_attributes][${personId}][person_id]`, personId);\n formData.append(`listing[viewers_attributes][${personId}][role_id]`, personRoleId);\n formData.append(`listing[viewers_attributes][${personId}][visible_to_public]`, true);\n formData.append(`listing[viewers_attributes][${personId}][collaborator]`, false);\n formData.append(`listing[viewers_attributes][${personId}][gets_updates]`, false);\n if (selectedAgreementName === \"buyer\" || selectedAgreementName === \"seller\") {\n formData.append(\"listing[est_close_price]\", closePrice);\n formData.append(\"listing[commission]\", commission);\n formData.append(\"listing[commission_percentage]\", commission_percentage);\n formData.append(\"listing[source_id]\", source?.value);\n\n formData.append(\n `listing[team_members_attributes][${primaryAgent.value}${0}][person_id]`,\n primaryAgent.value,\n );\n formData.append(\n `listing[team_members_attributes][${primaryAgent.value}${0}][role_id]`,\n primaryAgent.roleId,\n );\n formData.append(\n `listing[team_members_attributes][${primaryAgent.value}${0}][visible_to_public]`,\n primaryAgent.visible,\n );\n formData.append(\n `listing[team_members_attributes][${primaryAgent.value}${0}][primary]`,\n primaryAgent.primary,\n );\n formData.append(\"listing[address_attributes][address_type]\", \"listing\");\n formData.append(\"property_type\", propertyType.value);\n } else {\n formData.append(\"listing[referral_attributes][client_id]\", client_id);\n formData.append(\"listing[referral_attributes][client_intent]\", clientIntent);\n formData.append(\"listing[referral_attributes][referring_agent_id]\", referringAgent);\n\n if (referralFee.length) {\n formData.append(\"listing[referral_attributes][referral_fee]\", referralFee);\n }\n formData.append(\"listing[referral_attributes][is_fee_percentage]\", referralFeeIsPercentage);\n // seller\n if (clientIntent === \"seller\") {\n formData.append(\"property_type\", propertyType.value);\n formData.append(\"listing[address_attributes][address_type]\", \"listing\");\n }\n }\n\n if (selectedAgreementName === \"buyer\") {\n formData.append(\"listing[only_pending_info]\", \"true\");\n }\n formData.append(\"return_listing_details\", \"true\");\n const res = await axios.post(\"/listings\", formData);\n\n return res.data?.id;\n } catch (err) {\n // TODO: Handle error\n console.log(err);\n return null;\n }\n };\n};\n\nexport const loadRoles = async (selectedAgreementName, currentUserID) => {\n const path =\n selectedAgreementName === \"buyer\"\n ? \"/roles/pending_transaction_roles\"\n : \"/roles/listing_transaction_roles\";\n\n const response = await axios.get(path, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n });\n\n let defaultRoles = response.data.default_roles;\n const { roles } = response.data;\n\n // Reorder listing or buyer's agent role to be first\n if (selectedAgreementName === \"buyer\") {\n const buyersAgentRole = roles.find((role) => role.label === \"Buyer's Agent\");\n defaultRoles = [buyersAgentRole];\n } else {\n const listingAgentRole = roles.find((role) => role.label === \"Listing Agent\");\n defaultRoles = [listingAgentRole];\n }\n\n // Undefined shows up if the account doesn't have \"Buyer's Agent\" or \"Listing Agent\"\n defaultRoles = defaultRoles.filter((defaultRole) => defaultRole !== undefined);\n\n return {\n agentsOnTransaction: defaultRoles.map((role, index) => {\n const matchedAgent = role.agents.find((agent) => String(agent.value) === String(currentUserID));\n return {\n ...(matchedAgent ? { label: matchedAgent.label, value: matchedAgent.value } : {}),\n roleId: role.value,\n visible: \"false\",\n primary: index === 0 ? \"true\" : \"false\",\n };\n }),\n roles,\n };\n};\nexport const loadAllAvailableRoles = async () => {\n const response = await axios.get(\"/api/v4/transactions/allAvailableRoles/people/roles\");\n return response.data?.client || [];\n};\n\nexport const loadSources = async () => {\n const response = await axios.get(\"/sources\");\n return response.data.sources.map((source) => ({ label: source.text, value: source.id }));\n};\n\nexport const loadPropertyTypes = async () => {\n const response = await axios.get(\"/transaction_property_types\");\n return response.data.property_types.map((propertyType) => ({\n label: propertyType.name,\n value: propertyType.id,\n }));\n};\n\nexport const fetchDocuments = (person) => {\n return (dispatch) => {\n axios\n .get(`/people/${person.id}/documents`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(storeFetchedDocments(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const fetchAddendums = (uuid, agreementId) => {\n return (dispatch) => {\n axios\n .get(`/api/v4/people/${uuid}/agreements/${agreementId}/documents`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(storeFetchedAddendums(createAddendums(res.data)));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const fetchAgreements = (person) => {\n return (dispatch) => {\n axios\n .get(`/api/v4/people/${person.attributes.uuid}/agreements`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(storeFetchedAgreements(createAgreements(res.data)));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const fetchLoans = (personId) => {\n return (dispatch) => {\n axios\n .get(`/api/v4/contact_people/${personId}/loans`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(storeFetchedLoans(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const fetchLoansFinancingStages = (personId) => {\n return (dispatch) => {\n axios\n .get(`/api/v4/contact_people/${personId}/loans/form_options`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(storeFetchedLoansFinancingStages(formattedStages(res.data?.financing_stages)));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const fetchAvailableTransactions = (uuid) => {\n return (dispatch) => {\n axios\n .get(`/api/v4/people/${uuid}/agreements/available_transactions`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(storeFetchedAvailableTransactions(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const fetchAvailableTransactionsForLoan = (uuid) => {\n return (dispatch) => {\n axios\n .get(`/api/v4/people/${uuid}/agreements/available_transactions`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(storeFetchedAvailableTransactionsForLoan(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const handleAgreementCreate = (uuid, agreementData) => {\n return (dispatch) => {\n axios\n .post(`/api/v4/people/${uuid}/agreements`, {\n agreement: agreementData,\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => {\n dispatch(agreementUploaded(createAgreements([res.data])));\n dispatch(uploadingDocument(false));\n if (res.data?.document?.id) {\n dispatch(documentUploaded(res.data?.document));\n }\n const toastData = {\n show: true,\n msg: `${agreementData.agreement_type} Agreement added`,\n ...(agreementData.isCreateTransaction &&\n agreementData.listing_id && { transactionMsg: \"Transaction created\" }),\n };\n dispatch(toggleSuccessToastMsg(toastData));\n\n setTimeout(() => {\n dispatch(toggleSuccessToastMsg({ show: false, msg: \"\", transactionMsg: \"\" }));\n }, 7000);\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const handleAgreementUpdate = (person, agreementData, agreement_id) => {\n return async (dispatch) => {\n try {\n const res = await axios.put(`/api/v4/people/${person.uuid}/agreements/${agreement_id}`, {\n agreement: agreementData,\n authenticity_token: ReactOnRails.authenticityToken(),\n });\n\n dispatch(agreementUpdated(createAgreements([res.data]), agreement_id));\n return res.data;\n } catch (err) {\n // TODO: Handle error\n console.log(err);\n return err;\n }\n };\n};\n\nexport const handleLoanUpdate = (personId, loanData, loan_id) => {\n return async (dispatch) => {\n try {\n const res = await axios.put(`/api/v4/contact_people/${personId}/loans/${loan_id}`, {\n ...loanData,\n authenticity_token: ReactOnRails.authenticityToken(),\n });\n\n dispatch(loanUpdated([res.data], loan_id));\n return res.data;\n } catch (err) {\n // TODO: Handle error\n console.log(err);\n return err;\n }\n };\n};\n\nexport const handleDocumentUpload = (fileObj, person, isAgreement, payloadData, isCreatingAgreementDoc) => {\n return async (dispatch) => {\n try {\n dispatch(uploadingDocument(true));\n const fileUploaded = fileObj;\n const url = \"/people/\" + person.slug + \"/documents\";\n let form_data = new FormData();\n form_data.append(\"authenticity_token\", ReactOnRails.authenticityToken());\n form_data.append(\"document[object]\", fileUploaded);\n form_data.append(\"person_details_page\", \"true\");\n if (isCreatingAgreementDoc) {\n form_data.append(\"document[document_type]\", \"agreement\");\n form_data.append(\"document[document_sub_type]\", payloadData.agreement_type);\n }\n const res = await axios.post(url, form_data);\n\n if (isAgreement) {\n const agreementData = {\n ...payloadData,\n agreement_type: payloadData.agreement_type,\n document_id: res.data.id,\n listing_id: payloadData.listing_id,\n isCreateTransaction: payloadData.isCreateTransaction,\n };\n dispatch(handleAgreementCreate(person.uuid, agreementData));\n } else {\n dispatch(documentUploaded(res.data));\n dispatch(uploadingDocument(false));\n }\n\n return { CreatedDocID: res.data.id };\n } catch (err) {\n // TODO: Handle error\n console.log(err);\n dispatch(uploadingDocument(false));\n return { errors: err?.response?.data?.errors };\n }\n };\n};\n\nexport const handleAddendumUpload = (fileObj, person, agreement_id) => {\n return async (dispatch) => {\n try {\n dispatch(uploadingDocument(true));\n const fileUploaded = fileObj;\n const url = `/api/v4/people/${person.uuid}/agreements/${agreement_id}/documents`;\n let form_data = new FormData();\n form_data.append(\"authenticity_token\", ReactOnRails.authenticityToken());\n form_data.append(\"document[object]\", fileUploaded);\n form_data.append(\"person_details_page\", \"true\");\n form_data.append(\"document[document_type]\", \"addendum\");\n const res = await axios.post(url, form_data);\n dispatch(documentUploaded(res.data));\n dispatch(uploadingDocument(false));\n\n dispatch(toggleSuccessToastMsg({ show: true, msg: \"Addendum uploaded\" }));\n\n setTimeout(() => {\n dispatch(toggleSuccessToastMsg({ show: false, msg: \"\" }));\n }, 7000);\n return res.data;\n } catch (err) {\n // TODO: Handle error\n console.log(err);\n return err;\n }\n };\n};\n\nexport const handleDocumentRename = (person, document_id, newName) => {\n return async (dispatch) => {\n try {\n const res = await axios.patch(`/people/${person.id}/documents/${document_id}/rename`, {\n file_name: newName,\n person_details_page: \"true\",\n authenticity_token: ReactOnRails.authenticityToken(),\n });\n\n dispatch(renameDocument(document_id, newName));\n return res.data;\n } catch (err) {\n // TODO: Handle error\n console.log(err);\n return err;\n }\n };\n};\nexport const handleAddendumRename = (person, agreement_id, document_id, newName) => {\n return async (dispatch) => {\n try {\n const res = await axios.patch(\n `/api/v4/people/${person.uuid}/agreements/${agreement_id}/documents/${document_id}/rename`,\n {\n file_name: newName,\n authenticity_token: ReactOnRails.authenticityToken(),\n },\n );\n\n dispatch(renameDocument(document_id, newName));\n return res.data;\n } catch (err) {\n // TODO: Handle error\n console.log(err);\n return err;\n }\n };\n};\n\nexport const handleDocumentDelete = (person, document_id) => {\n return async (dispatch) => {\n try {\n const path = `/people/${person.id}/documents/${document_id}`;\n const res = await axios.delete(path, {\n params: { authenticity_token: ReactOnRails.authenticityToken() },\n });\n\n dispatch(removeDeletedDocument(document_id));\n dispatch(removeDocAgreement(document_id));\n\n return res.data;\n } catch (err) {\n // TODO: Handle error\n console.log(err);\n return err;\n }\n };\n};\n\nexport const handleAddendumDelete = (person, agreement_id, document_id) => {\n return async (dispatch) => {\n try {\n const path = `/api/v4/people/${person.uuid}/agreements/${agreement_id}/documents/${document_id}`;\n\n const res = await axios.delete(path, {\n params: { authenticity_token: ReactOnRails.authenticityToken() },\n });\n\n dispatch(removeDeletedDocument(document_id));\n return res.data;\n } catch (err) {\n // TODO: Handle error\n console.log(err);\n return err;\n }\n };\n};\n\nexport const handleAgreementDelete = (person, agreement_id) => {\n return (dispatch) => {\n const path = `/api/v4/people/${person.data.attributes.uuid}/agreements/${agreement_id}`;\n axios\n .delete(path, { params: { authenticity_token: ReactOnRails.authenticityToken() } })\n .then((res) => {\n dispatch(removeDeletedAgreement(agreement_id));\n\n dispatch(toggleSuccessToastMsg({ show: true, msg: \"Agreement deleted\" }));\n\n setTimeout(() => {\n dispatch(toggleSuccessToastMsg({ show: false, msg: \"\" }));\n }, 7000);\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nconst storeFetchedRelationships = (data) => {\n return {\n type: \"FETCH_RELATIONSHIPS\",\n data: data,\n };\n};\n\nexport const fetchRelationships = (person) => {\n return (dispatch) => {\n axios\n .get(`/people/${person.id}/relationships?view_type=new`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(storeFetchedRelationships(res.data));\n });\n };\n};\n\nconst relationshipAdded = (data) => {\n return {\n type: \"RELATIONSHIP_ADDED\",\n data: data,\n };\n};\n\nconst relationshipEdited = (data) => {\n return {\n type: \"RELATIONSHIP_EDITED\",\n data: data,\n };\n};\n\nexport const addRelationship = (relationship) => {\n return (dispatch) => {\n dispatch(relationshipAdded(relationship));\n };\n};\n\nexport const saveRelationship = (person, relationshipId, primaryPersonLabel, relatedPersonLabel) => {\n return (dispatch) => {\n let editRelationshipUrl = `/people/${person.slug}/relationships/${relationshipId}.json`;\n let form_data = new FormData();\n form_data.append(\"authenticity_token\", ReactOnRails.authenticityToken());\n form_data.append(\"_method\", \"patch\");\n if (primaryPersonLabel) {\n form_data.append(\"relationship[primary_person_label]\", primaryPersonLabel);\n }\n if (relatedPersonLabel) {\n form_data.append(\"relationship[related_person_label]\", relatedPersonLabel);\n }\n form_data.append(\"person_details_page\", \"true\");\n axios\n .post(editRelationshipUrl, form_data)\n .then((res) => {\n dispatch(relationshipEdited(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nconst storeFetchedTransactions = (desc) => {\n return {\n type: \"STORE_FETCHED_TRANSACTIONS\",\n data: desc,\n };\n};\n\nexport const getPerson = (slug) => (dispatch) => {\n dispatch(togglePersonError());\n axios\n .get(`/api/v4/person/${slug}/details`)\n .then(({ data }) => dispatch(updatePersonSuccess(data)))\n .catch(() => dispatch(togglePersonError(true)));\n};\n\nexport const getNavLinks = (slug) => (dispatch) =>\n caseTransformingAxios\n .get(`/api/v4/person/${slug}/nav_links`)\n .then(({ data }) => dispatch({ type: \"GET_NAV_LINKS\", data }))\n .catch(console.log);\n\nexport const fetchTransactions = (person_id) => {\n return (dispatch) => {\n axios\n .get(`/people/${person_id}/transactions/quick_view`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(storeFetchedTransactions(res.data));\n });\n };\n};\n\nexport const openTaskModal = () => ({ type: \"OPEN_TASK_MODAL\" });\n\nexport const openAppointmentModal = () => ({ type: \"OPEN_APPOINTMENT_MODAL\" });\n\nexport const closeAppointmentModal = () => ({ type: \"CLOSE_APPOINTMENT_MODAL\" });\n\nexport const closeTaskModal = () => ({ type: \"CLOSE_TASK_MODAL\" });\n\nexport const openAddListingAlertModal = () => ({ type: \"OPEN_ADD_LISTING_ALERT_MODAL\" });\n\nexport const closeAddListingAlertModal = () => ({ type: \"CLOSE_ADD_LISTING_ALERT_MODAL\" });\n\nexport const deleteRelationship = (person, relationshipId) => {\n return (dispatch) => {\n const path = `/people/${person.slug}/relationships/${relationshipId}?view_type=new`;\n axios\n .delete(path, {\n params: { person_details_page: true, authenticity_token: ReactOnRails.authenticityToken() },\n })\n .then((res) => {\n dispatch(relationShipDestroyed(relationshipId));\n })\n .catch((error) => {\n console.log(error);\n });\n };\n};\n\nconst relationShipDestroyed = (relationshipId) => {\n return {\n type: \"RELATIONSHIP_DELETED\",\n data: relationshipId,\n };\n};\n\nexport const openEditSocialMediaModal = () => {\n return {\n type: \"OPEN_EDIT_SOCIAL_MEDIA_MODAL\",\n };\n};\n\nexport const closeEditSocialMediaModal = () => {\n return {\n type: \"CLOSE_EDIT_SOCIAL_MEDIA_MODAL\",\n };\n};\n\nexport const openWebActivityModal = () => ({ type: \"OPEN_WEB_ACTIVITY_MODAL\" });\nexport const closeWebActivityModal = () => ({ type: \"CLOSE_WEB_ACTIVITY_MODAL\" });\n\nexport const openAddAutoPlanModal = () => ({ type: \"OPEN_ADD_AUTO_PLAN_MODAL\" });\n\nexport const closeAddAutoPlanModal = () => ({ type: \"CLOSE_ADD_AUTO_PLAN_MODAL\" });\n\nexport const closeDeleteAssignedPlanModal = () => ({ type: \"CLOSE_DELETE_ASSIGNED_PLAN_MODAL\" });\n\nconst fetchAssignedPlansSuccess = (assignedPlans) => {\n return {\n type: \"FETCH_ASSIGNED_PLANS\",\n data: assignedPlans,\n };\n};\n\nconst assignedPlanSuccess = (assignedPlan) => {\n return {\n type: \"CREATE_ASSIGNED_PLAN\",\n data: assignedPlan,\n };\n};\n\nconst updateAssignedPlanSuccess = (assignedPlan) => {\n return {\n type: \"UPDATE_ASSIGNED_PLAN\",\n data: assignedPlan,\n };\n};\n\nexport const getAssignedPlans = (assignable_id) => {\n return (dispatch) => {\n // dispatch(fetchAssignedPlansPending());\n\n axios\n .get(\"/assigned_plans\", {\n responseType: \"json\",\n contentType: \"application/json\",\n params: { assignable_type: \"Person\", assignable_id },\n })\n .then((results) => {\n dispatch(fetchAssignedPlansSuccess(results.data));\n })\n .catch((err) => {\n console.log(\"error\", err);\n // dispatch(fetchAssignedPlansFailure());\n });\n };\n};\n\nexport const fetchAutoPlans = (autoPlansPath, type, page = null) => {\n const path = `${autoPlansPath}.json?plan_type=${type}&page=${page}`;\n return (dispatch) => {\n // dispatch(fetchAutoPlans())\n axios\n .get(path)\n .then((results) => {\n dispatch(autoPlansSuccess(results.data));\n })\n .catch((err) => {\n dispatch({ type: \"AUTO_PLANS_FAILURE\", isFetchingAutoPlans: false });\n });\n };\n};\n\nexport const submitApplyPlan = (plan, assignableId) => {\n const form = { ...plan, assignable_id: assignableId, assignable_type: \"Person\", auto_plan_id: plan.id };\n\n return (dispatch) => {\n axios\n .post(\"/assigned_plans\", {\n assigned_plan: form,\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((results) => {\n dispatch(assignedPlanSuccess(results.data));\n });\n };\n};\n\nexport const updateAssignedPlan = (assignedPlanPath, form) => {\n const formWithToken = { ...form, authenticity_token: ReactOnRails.authenticityToken() };\n\n return (dispatch) => {\n axios\n .patch(assignedPlanPath, formWithToken)\n .then((results) => {\n dispatch(updateAssignedPlanSuccess(results.data.assigned_plan));\n })\n .catch((err) => console.log(\"ERROR UPDATING PLAN\", err));\n };\n};\n\nexport const openDeleteAssignedPlanModal = (planToDelete) => {\n return (dispatch) => {\n dispatch({\n type: \"OPEN_DELETE_ASSIGNED_PLAN_MODAL\",\n planToDelete,\n });\n };\n};\n\nexport const openEditAppointmentModal = () => ({ type: \"OPEN_EDIT_APPOINTMENT_MODAL\" });\nexport const closeEditAppointmentModal = () => ({ type: \"CLOSE_EDIT_APPOINTMENT_MODAL\" });\nexport const updateAppointment = (data) => {\n return (dispatch) => {\n dispatch(updateAppointmentState(data));\n };\n};\n\nconst updateAppointmentState = (data) => {\n return {\n type: \"UPDATE_APPOINTMENT\",\n data: data,\n };\n};\n\nexport const deleteAppointment = ({ id, person_id }) => {\n return (dispatch) => {\n axios\n .delete(`/people/${person_id}/interactions/${id}`, {\n params: {\n person_details_page: \"true\",\n authenticity_token: ReactOnRails.authenticityToken(),\n },\n })\n .then((res) => {\n dispatch(removeAppointment(id));\n })\n .catch((err) => {\n console.log(err);\n });\n };\n};\n\nconst removeAppointment = (id) => {\n return {\n type: \"REMOVE_APPOINTMENT\",\n id,\n };\n};\n\nexport const getTasks = (person_id) => {\n return (dispatch) => {\n axios\n .get(`/tasks/quick_view?id=${person_id}`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(getTasksSuccess(res.data));\n })\n .catch((err) => {\n console.log(err);\n });\n };\n};\n\nexport const getAppointments = (person_id) => {\n return (dispatch) => {\n axios\n .get(`/tasks/appointments?id=${person_id}&limit=3`, {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((res) => {\n dispatch(getAppointmentsSuccess(res.data));\n })\n .catch((err) => {\n console.log(err);\n });\n };\n};\n\nconst getTasksSuccess = (data) => {\n return {\n type: \"GET_TASKS\",\n data,\n };\n};\n\nconst getAppointmentsSuccess = (data) => {\n return {\n type: \"GET_APPOINTMENTS\",\n data,\n };\n};\n\nexport const updateTasks = () => {\n return {\n type: \"UPDATE_TASKS\",\n };\n};\n\nexport const updateCardTasks = (task) => {\n return {\n type: \"UPDATE_CARD_TASKS\",\n task,\n };\n};\n\nconst getNotesSuccess = (data) => {\n return {\n type: \"GET_NOTES\",\n data,\n };\n};\n\nexport const openEditAddressModal = () => ({ type: \"OPEN_EDIT_ADDRESS_MODAL\" });\n\nexport const closeEditAddressModal = () => ({ type: \"CLOSE_EDIT_ADDRESS_MODAL\" });\n\nexport const showAutoPlanPreview = (auto_plan_id) => {\n return (dispatch) => {\n axios\n .get(`/auto_plans/${auto_plan_id}/preview`)\n .then((res) => dispatch({ type: \"SHOW_AUTO_PLAN_PREVIEW\", autoPlan: res.data.auto_plan }))\n .catch((err) => {\n console.log(\"Failed to preview auto plan\");\n });\n };\n};\n\nexport const previewAction = (actionId) => {\n return (dispatch) => {\n dispatch({\n type: \"PREVIEW_ACTION\",\n actionId,\n });\n };\n};\n\nexport const closeAutoPlanPreview = () => {\n return {\n type: \"CLOSE_AUTO_PLAN_PREVIEW\",\n };\n};\n\nexport const showPlanDetails = (planId) => {\n return (dispatch) => {\n axios\n .get(`/assigned_plans/${planId}`, {\n responseType: \"json\",\n contentType: \"application/json\",\n })\n .then((results) => {\n dispatch({ type: \"SHOW_PLAN_DETAILS\", assignedPlan: results.data.assigned_plan });\n })\n .catch((err) => {\n console.log(\"Can't show assigned plan modal\");\n });\n };\n};\n\nexport const closePlanDetails = () => {\n return {\n type: \"CLOSE_PLAN_DETAIL\",\n };\n};\n\nexport const assignedActionPreview = (assignedAction) => {\n return (dispatch) => {\n dispatch({\n type: \"ASSIGNED_ACTION_PREVIEW\",\n assignedAction,\n });\n };\n};\n\nexport const showAssignedActionDeleteModal = (actionToDelete) => {\n return (dispatch) => {\n dispatch({\n type: \"SHOW_ASSIGNED_ACTION_DELETE_MODAL\",\n actionToDelete,\n });\n };\n};\n\nexport const closeAssignedActionDeleteModal = () => {\n return {\n type: \"CLOSE_ASSIGNED_ACTION_DELETE_MODAL\",\n };\n};\n\nexport const deleteAction = (id, assignedActionPath, callback) => {\n return (dispatch) => {\n axios\n .delete(assignedActionPath, { params: { authenticity_token: ReactOnRails.authenticityToken() } })\n .then((results) => {\n dispatch({\n type: \"DELETE_ACTION_SUCCESS\",\n assignedActionId: id,\n });\n // TODO: is this used?\n debugger;\n if (callback) {\n dispatch(callback);\n }\n })\n .catch((err) => {\n dispatch({\n type: \"DELETE_ACTION_FAILURE\",\n error: err.response.data.message,\n });\n });\n };\n};\n\nexport const updateAction = (assignedActionPath, form = {}) => {\n const formWithToken = { ...form, authenticity_token: ReactOnRails.authenticityToken() };\n\n return (dispatch) => {\n dispatch(updateActionPending());\n\n axios\n .patch(assignedActionPath, formWithToken)\n .then((results) => {\n dispatch(updateActionSuccess(results.data));\n })\n .catch((err) => {\n dispatch(updateActionFailure());\n });\n };\n};\n\nconst updateActionPending = () => {\n return {\n type: \"UPDATE_ACTION_PENDING\",\n };\n};\n\nconst updateActionSuccess = (assignedAction) => {\n return {\n type: \"UPDATE_ACTION_SUCCESS\",\n assignedAction,\n };\n};\n\nconst updateActionFailure = (assignedAction) => {\n return {\n type: \"UPDATE_ACTION_FAILURE\",\n };\n};\n\nexport const openDeleteCloseActionsModal = (planToDelete) => {\n return (dispatch) => {\n dispatch({\n type: \"OPEN_DELETE_CLOSE_ACTIONS_MODAL\",\n planToDelete,\n });\n };\n};\n\nexport const setInteractionTab = (tabIndex) => {\n return (dispatch) => {\n dispatch({\n type: \"SET_INTERACTION_TAB\",\n tabIndex,\n });\n };\n};\n\nexport const setGmailReplyThread = (\n gmailReplyThreadId,\n gmailReplyThreadSubject,\n additionalRecipientsVal,\n CCval,\n BCCval,\n) => {\n return (dispatch) => {\n dispatch({\n type: \"SET_GMAIL_REPLY_THREAD\",\n gmailReplyThreadId,\n gmailReplyThreadSubject,\n additionalRecipientsVal,\n CCval,\n BCCval,\n });\n };\n};\n\nexport const setInteractionTabWithHomeAppContent = (defaultHomeAppTabContent, tabIndex) => {\n return {\n type: \"SET_INTERACTION_TAB_WITH_CONTENT\",\n defaultHomeAppTabContent,\n tabIndex,\n };\n};\n\nexport const clearInteractionTabContent = () => {\n return {\n type: \"CLEAR_INTERACTION_TAB_CONTENT\",\n };\n};\n\nexport const touchHomeAppInviteSent = (personId) => {\n return (dispatch) => {\n axios\n .patch(`/api/v4/person_detail/${personId}/touch_home_app_invite_sent`, {\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => {\n dispatch(updateHomeAppInviteSent(res.data));\n });\n };\n};\n\nconst updateHomeAppInviteSent = (personData) => {\n return {\n type: \"UPDATE_HOME_APP_INVITE_SENT\",\n id: personData.data.attributes.id,\n inviteSent: personData.data.attributes.home_app_invite_sent,\n };\n};\n\nexport const toggleTransactionModal = (value) => {\n return {\n type: \"TOGGLE_TRANSACTION_MODAL\",\n value,\n };\n};\n\nexport const toggleLenderModal = () =>\n wrap({\n type: \"TOGGLE_LENDER_MODAL\",\n });\n\nexport const toggleSuccessReferLoanToast = () =>\n wrap({\n type: \"TOGGLE_SUCCESS_REFER_LOAN_TOAST\",\n });\n\nexport const setLastRefferedDateTime = (dateTime) =>\n wrap({\n type: \"SET_LAST_REFERRED_DATE_TIME\",\n data: dateTime,\n });\n\nexport const toggleStarred = (note) => {\n return async (dispatch) => {\n axios\n .patch(`/people/${note.notable_id}/notes/${note.id}`, {\n note: { ...note, starred: !note.starred },\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => {\n dispatch(updateNoteSuccess(res.data));\n dispatch(updateTimelineEvent(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n console.log(err);\n });\n };\n};\n\nexport const toggleExternallyVisible = (note) => {\n return async (dispatch) => {\n axios\n .patch(`/people/${note.notable_id}/notes/${note.id}`, {\n note: { ...note, externallyVisible: !note.externallyVisible },\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => {\n dispatch(updateNoteSuccess(res.data));\n dispatch(updateTimelineEvent(res.data));\n })\n .catch((err) => {\n // TODO: Handle error\n conssole.log(err);\n });\n };\n};\n\nexport const fetchProjects = (slug) => (dispatch) =>\n axios\n .get(`/api/v4/person/${slug}/projects`)\n .then(({ data }) => dispatch({ type: \"FETCH_PROJECTS\", data }))\n .catch(console.log);\n","/* eslint-disable no-param-reassign */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment-timezone\";\nimport { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport {\n caseTransformingAxios,\n responseDataToCamelCase,\n requestDataToSnakeCase,\n} from \"@shared/v2/caseTransformingAxios\";\nimport dncApi from \"@shared/phoneDncStatusApi\";\nimport { upperFirst } from \"lodash\";\nimport { viewPhoneFromFlat } from \"@shared/models/Communications/viewPhone\";\nimport { STATUS_ICON_MODIFIERS } from \"@shared/models/Communications/viewPhoneIcons/CallStatusIcon\";\nimport { DncFlag } from \"@shared/Sms\";\nimport CALL_STATES from \"../../Dialer/utils/states\";\nimport { updateTimeline } from \"../../PersonDetail/actions/personDetailActionCreators\";\n\nexport const DIALER_NAME = \"dialer\";\nexport const DIALER_INLINE_NAME = \"dialerInline\";\n\nexport const initialState = {\n callState: CALL_STATES.Init,\n isRecording: false,\n isRecordingConsentRequired: false,\n comment: \"\",\n conference: null,\n duration: null,\n error: null,\n leadUuids: null,\n loading: false,\n outcome: null,\n person: {},\n phoneNumber: null,\n phoneNumbers: [],\n session: null,\n validLeads: {},\n};\n\nconst PhoneNumberOption = ({ viewPhone, isDnc }) => {\n const icon = viewPhone.isMobile ? viewPhone.mobileCallIcon : viewPhone.callIcon;\n const phoneColor = STATUS_ICON_MODIFIERS[viewPhone.callStatus];\n\n return (\n Last seen
\n {formattedTime}
\n \n {icon.icon({ size: \"m\" })}\n {`${upperFirst(viewPhone.category)}: ${viewPhone.formattedNumber}`}\n {isDnc &&
\n );\n};\n\nPhoneNumberOption.propTypes = {\n viewPhone: PropTypes.shape().isRequired,\n isDnc: PropTypes.bool.isRequired,\n};\n\nconst checkValidLeads = (name) =>\n createAsyncThunk(`${name}/checkValidLeads`, (leadUuids) =>\n caseTransformingAxios.post(\"/dialer/check_valid_leads\", { leadUuids }),\n );\n\nconst createTemporaryTimelineEvent = ({ currentUser, outcome, comment, duration }) => {\n const unixTime = moment().unix();\n return {\n agent_person: {\n first_name: currentUser.firstName,\n last_name: currentUser.lastName,\n },\n id: `public_activity_${unixTime}`,\n interaction_type: \"call\",\n interacted_at_epoch: unixTime,\n interacted_at_absolute: moment.tz(\"America/Los_Angeles\").format(\"MM/DD/YY [at] h:mm a z\"),\n object_attributes: {\n duration,\n interaction_type: \"call\",\n outcome,\n markdown_comment: comment,\n },\n };\n};\n\nconst getPersonAndNumbers = (name) =>\n createAsyncThunk(`${name}/getPerson`, (uuid, thunkApi) =>\n caseTransformingAxios\n .get(`/api/v4/person/${uuid}/dialer_details`, { signal: thunkApi.signal })\n .then(({ data: person }) => {\n const dialablePhoneNumbers = person?.dialablePhoneNumbers || [];\n return dncApi\n .index(\n dialablePhoneNumbers.map((x) => x.value),\n thunkApi.signal,\n )\n .catch(() => ({ data: {} }))\n .then(({ data: dncMap }) => {\n const phoneNumbers = dialablePhoneNumbers.map((phone) => {\n const viewPhone = viewPhoneFromFlat(phone);\n const isDnc = dncMap[phone.value];\n return {\n label: \" : ' '} contact(s):
`\n","import axios from \"axios\";\nimport { differenceWith, fromPairs, isEqual, set, startCase, toPairs } from \"lodash\";\nimport { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport { caseTransformingAxios, requestDataToSnakeCase } from \"@shared/v2/caseTransformingAxios\";\nimport { getExternalApi } from \"@shared/externalApi\";\nimport {\n transformFormOptions,\n transformPerson,\n transformSources,\n validateLeadForm,\n validateUserForm,\n} from \"./helpers\";\nimport { linkFractal, messageFractal } from \"@shared/fractals\";\n\nconst INIT_USER = {\n addressesAttributes: [],\n agentStatus: null,\n emailDetailsAttributes: [],\n isLead: false,\n loginUserAttributes: {\n active: true,\n role: \"Agent\",\n licenseId: null,\n showAgentProfilePage: false,\n showOnWebsiteRoster: false,\n bio: null,\n customLinksAttributes: [],\n subdomain: null,\n },\n phoneDetailsAttributes: [],\n exportToRoster: \"true\",\n};\n\nconst initialState = {\n customDateOptions: {},\n formOptions: {},\n formOptionsLoading: true,\n loading: false,\n originalPerson: {},\n person: {},\n errors: [],\n showPhoneContext: null,\n};\n\nconst validOrderFinder = (order) => (customLink) => customLink.order === order && !(\"_destroy\" in customLink);\n\nconst getFormData = createAsyncThunk(\n \"contacts/getFormOptions\",\n ({ modalType, personId, person }, thunkApi) => {\n const messagingServiceUrl = thunkApi.getState().messaging.messagingServiceUrl;\n const messagingApi = getExternalApi(messagingServiceUrl);\n const getTotalConversationCount = (personUuid, phoneNumber) =>\n messagingApi\n .get(`/Conversation/SmsAndGroupSmsCountForPersonAddressPair/${personUuid}/${phoneNumber}`, {\n signal: thunkApi.signal,\n })\n .then((res) => res.data.total)\n .catch(() => 0);\n const personPromise = personId\n ? axios.get(`/api/v4/${modalType === \"lead\" ? \"contact_people\" : \"account_people\"}/${personId}`, {\n signal: thunkApi.signal,\n })\n : Promise.resolve({ data: modalType === \"user\" ? INIT_USER : person });\n const augmentedPhoneDetailsPersonPromise = personPromise\n .then((res) => transformPerson(res.data))\n .then(async (person) => {\n if (!person) return person;\n const { phoneDetailsAttributes = [] } = person;\n const modifiedDetailsAttributes = await Promise.all(\n phoneDetailsAttributes.map((phone) =>\n getTotalConversationCount(person.uuid, phone.value).then((archiveConversationsCount) => ({\n ...phone,\n archiveConversationsCount,\n })),\n ),\n ).catch(() => phoneDetailsAttributes);\n return { ...person, phoneDetailsAttributes: modifiedDetailsAttributes };\n });\n return Promise.all([\n augmentedPhoneDetailsPersonPromise,\n caseTransformingAxios\n .get(\n modalType === \"lead\"\n ? \"/api/v4/contact_people/form_options\"\n : \"/api/v4/account_people/form_options\",\n { signal: thunkApi.signal },\n )\n .then((res) => transformFormOptions(modalType === \"user\" ? res.data.formOptions : res.data)),\n caseTransformingAxios.get(\"/sources\").then((res) => transformSources(res.data.sources)),\n ])\n .then(([person, formOptions, sourceOptions]) => ({\n person,\n formOptions: {\n ...formOptions,\n sourceOptions,\n },\n }))\n .catch((err) => thunkApi.rejectWithValue(err.response?.data));\n },\n);\n\nconst upsertPerson = createAsyncThunk(\"contacts/savePerson\", ({ modalType }, thunkApi) => {\n const { originalPerson, person } = thunkApi.getState().contactsReducer;\n const response = modalType === \"lead\" ? validateLeadForm(person) : validateUserForm(person);\n if (response.errors.length > 0) return Promise.reject(thunkApi.rejectWithValue(response));\n\n const savePerson = originalPerson.id\n ? fromPairs(differenceWith(toPairs(person), toPairs(originalPerson), isEqual))\n : person;\n\n const phoneChanges = originalPerson.id\n ? differenceWith(\n person.phoneDetailsAttributes,\n originalPerson.phoneDetailsAttributes,\n (a, b) => (a.value || \"\").replace(/\\D/g, \"\") === (b.value || \"\").replace(/\\D/g, \"\"),\n )\n : [];\n\n const changedPhoneDetailsAttributes = phoneChanges.filter((phone) => phone.archiveConversationsCount > 0);\n if (!person.phoneRemovalAck && changedPhoneDetailsAttributes.length > 0) {\n const changedNumbers = changedPhoneDetailsAttributes.map((phone) => {\n return {\n currentNumber: phone._destroy ? null : phone.value,\n previousNumber: originalPerson.phoneDetailsAttributes?.find(\n (originalPhone) => originalPhone.id === phone.id,\n )?.value,\n };\n });\n\n const conversationCount = changedPhoneDetailsAttributes.reduce(\n (acc, phone) => acc + phone.archiveConversationsCount,\n 0,\n );\n\n return Promise.reject(\n thunkApi.rejectWithValue({\n type: \"showPhoneContext\",\n changedNumbers,\n conversationCount,\n }),\n );\n }\n\n return axios[person.id ? \"put\" : \"post\"](\n `/api/v4/${modalType === \"lead\" ? \"contact_people\" : \"account_people\"}${person.id ? `/${person.id}` : \"\"}`,\n {\n person: {\n ...requestDataToSnakeCase({\n ...savePerson,\n phoneDetailsAttributes: person.phoneDetailsAttributes,\n phoneRemovalAck: person.phoneRemovalAck || person.phoneDetailsAttributes?.some((d) => d._destroy),\n }),\n milestones: savePerson.milestones,\n },\n },\n {\n headers: {\n \"x-csrf-token\": ReactOnRails.authenticityToken(),\n },\n signal: thunkApi.signal,\n },\n )\n .then((res) => transformPerson(res.data))\n .catch((err) => thunkApi.rejectWithValue(err.response?.data));\n});\n\nconst uploadAvatar = createAsyncThunk(\"contacts/uploadAvatar\", ({ file, personId }, thunkApi) => {\n const formData = new FormData();\n formData.append(\"authenticity_token\", ReactOnRails.authenticityToken());\n formData.append(\"person[avatar]\", file);\n return caseTransformingAxios\n .post(`/api/v4/person_detail/upload_avatar/${personId}`, formData, { signal: thunkApi.signal })\n .then((res) => res.data)\n .catch((err) => thunkApi.rejectWithValue(err.response?.data));\n});\n\nconst contactsReducer = createSlice({\n initialState,\n name: \"contacts\",\n reducers: {\n setErrors: (state, { payload = [] }) => {\n state.errors = payload;\n },\n setPersonValue: (state, { payload }) => {\n set(state.person, payload.key, payload.value);\n },\n setShowPhoneContext: (state, { payload }) => {\n state.showPhoneContext = payload;\n },\n addCustomLink: (state, { payload }) => {\n const { customLinksAttributes } = state.person.loginUserAttributes;\n customLinksAttributes.push({\n icon: \"fa6 fa6-link\",\n order: customLinksAttributes.filter((customLink) => !customLink._destroy).length + 1,\n category: \"social\",\n });\n },\n setCustomLink: (state, { payload }) => {\n const { customLinksAttributes } = state.person.loginUserAttributes;\n const customLinkIndex = customLinksAttributes.findIndex(validOrderFinder(payload.order));\n customLinksAttributes[customLinkIndex] = { ...customLinksAttributes[customLinkIndex], ...payload };\n },\n deleteCustomLink: (state, { payload }) => {\n const { customLinksAttributes } = state.person.loginUserAttributes;\n const customLinkIndex = customLinksAttributes.findIndex(validOrderFinder(payload.order));\n customLinksAttributes[customLinkIndex]._destroy = true;\n customLinksAttributes\n .filter((customLink) => customLink._destroy)\n .forEach((customLink, i) => {\n customLink.order = -i - 1;\n });\n customLinksAttributes\n .filter((customLink) => !customLink._destroy)\n .forEach((customLink, i) => {\n customLink.order = i + 1;\n });\n },\n },\n extraReducers: (builder) => {\n builder\n .addCase(getFormData.pending, (state) => {\n state.formOptionsLoading = true;\n state.errors = [];\n })\n .addCase(getFormData.fulfilled, (state, { payload }) => {\n if (payload.person) {\n state.originalPerson = payload.person;\n state.person = payload.person;\n }\n state.formOptions = payload.formOptions;\n state.formOptionsLoading = false;\n })\n .addCase(getFormData.rejected, (state) => {\n state.errors = [\"Failed to load form options. Please try again later.\"];\n state.formOptionsLoading = false;\n });\n\n builder\n .addCase(upsertPerson.pending, (state) => {\n state.errors = [];\n state.loading = true;\n })\n .addCase(upsertPerson.fulfilled, (state, { payload }) => {\n state.originalPerson = payload;\n state.person = payload;\n state.loading = false;\n })\n .addCase(upsertPerson.rejected, (state, { payload, ...props }) => {\n if (payload?.type === \"showPhoneContext\") {\n state.showPhoneContext = payload;\n state.loading = false;\n return;\n }\n\n const errBody = payload?.errors?.[0] || {};\n let errors = [];\n\n let phoneValidations = payload?.errors?.[0]?.context?.phone_validations;\n let emailValidations = payload?.errors?.[0]?.context?.email_validations;\n\n if (phoneValidations?.length > 0) {\n const messageError = messageFractal(phoneValidations.length, \"Mobile phone number\");\n const linksError = phoneValidations\n .map((validation) => linkFractal(validation.url, validation.name))\n .join(\", \");\n\n errors.push(`${messageError}${linksError}`);\n }\n\n if (emailValidations?.length > 0) {\n const acctDupes = Object.entries(emailValidations[0]);\n const messageError = messageFractal(acctDupes.length, \"Email\");\n const linksError = acctDupes\n .map(([slug, fullName]) => linkFractal(`/people/${slug}`, fullName))\n .join(\", \");\n\n errors.push(`${messageError}${linksError}`);\n }\n\n Object.entries(errBody?.detail).forEach(([key, value]) =>\n errors.push(`${startCase(key.split(\".\")?.[0])}: ${value}`),\n );\n\n if (errors.length === 0) errors = [\"Failed to save person. Please try again later.\"];\n\n state.errors = errors;\n state.loading = false;\n });\n\n builder\n .addCase(uploadAvatar.pending, (state) => {\n state.loading = true;\n })\n .addCase(uploadAvatar.fulfilled, (state, { payload }) => {\n state.person.avatarUrl = payload.data.attributes.avatarUrl;\n state.loading = false;\n })\n .addCase(uploadAvatar.rejected, (state, { payload }) => {\n let errors = [];\n Object.entries(payload.errors?.[0]?.detail || {}).forEach(([key, value]) =>\n errors.push(`${startCase(key.split(\".\")?.[0])}: ${value}`),\n );\n if (errors.length === 0) errors = [\"Failed to upload profile photo. Please try again later.\"];\n\n state.errors = errors;\n state.loading = false;\n });\n },\n});\n\nexport { getFormData, upsertPerson, uploadAvatar };\n\nexport const {\n addCustomLink,\n setCustomLink,\n deleteCustomLink,\n setErrors,\n setPersonValue,\n setShowPhoneContext,\n} = contactsReducer.actions;\n\nexport default contactsReducer.reducer;\n","import curriedNamespaceAction from \"../../../../reducers/helpers\";\n\nconst REDUCER_BRANDING = \"superUserBranding\";\nconst wrap = curriedNamespaceAction(REDUCER_BRANDING);\n\nexport const setFormData = (keyValue) => wrap({ type: \"SET_FORM_VALUE\", keyValue });\nexport const addOperationalPartner = () => wrap({ type: \"ADD_PARTNER\" });\nexport const updateOperationalPartner = (data) => wrap({ type: \"UPDATE_PARTNER\", ...data });\nexport const removeOperationalPartner = (data) => wrap({ type: \"REMOVE_PARTNER\", ...data });\n\nexport const addCommOnlyOperationalPartner = () => wrap({ type: \"ADD_COMM_PARTNER\" });\nexport const updateCommOnlyOperationalPartner = (data) => wrap({ type: \"UPDATE_COMM_PARTNER\", ...data });\nexport const removeCommOnlyOperationalPartner = (data) => wrap({ type: \"REMOVE_COMM_PARTNER\", ...data });\n\nexport const addTransactionReportAccess = () => wrap({ type: \"ADD_TRANSACTION_REPORT_ACCESS\" });\nexport const updateTransactionReportAccess = (data) => wrap({ type: \"UPDATE_TRANSACTION_REPORT_ACCESS\", ...data });\nexport const removeTransactionReportAccess = (data) => wrap({ type: \"REMOVE_TRANSACTION_REPORT_ACCESS\", ...data });\n\nexport const saveForm = (data) => wrap({ type: \"SAVE_FORM\", ...data });\nexport const saveFormError = (data) => wrap({ type: \"SAVE_FORM_ERROR\", ...data });\nexport const saveFormSuccess = (data) => wrap({ type: \"SAVE_FORM_SUCCESS\", ...data });\n","import { produce } from \"immer\";\nimport * as actionCreators from \"../Support/SuperUsers/Branding/actions/creators\";\n\nexport const defaultState = {\n isSaving: false,\n saveError: null,\n iSearchingUsers: false,\n id: null,\n brands: [],\n brokerages: [],\n partners: [],\n placeBrandedAccounts: [],\n activePlaceTeams: [],\n formData: {},\n dbBrandData: null,\n};\n\nexport const superUsersBranding = (state = defaultState, payload) => {\n switch (payload.type) {\n case actionCreators.setFormData().type:\n return produce(state, (draft) => {\n draft.formData = { ...state.formData, ...payload.keyValue };\n });\n case actionCreators.addOperationalPartner().type:\n const newPartners = state.formData?.operationalPartners ? [...state.formData.operationalPartners] : [];\n\n return produce(state, (draft) => {\n draft.formData.operationalPartners = [...newPartners, { value: null }];\n });\n case actionCreators.updateOperationalPartner().type:\n return produce(state, (draft) => {\n const updatedPartners = draft.formData.operationalPartners\n ? [...draft.formData.operationalPartners]\n : [];\n if (updatedPartners[payload.index]) {\n updatedPartners[payload.index].value = payload.value;\n }\n draft.formData.operationalPartners = updatedPartners;\n });\n case actionCreators.removeOperationalPartner().type:\n const reducedPartners = state.formData.operationalPartners\n ? [...state.formData.operationalPartners]\n : [];\n reducedPartners.splice(payload.index, 1);\n\n return produce(state, (draft) => {\n draft.formData.operationalPartners = reducedPartners;\n });\n case actionCreators.addCommOnlyOperationalPartner().type:\n return produce(state, (draft) => {\n const newPartners = state.formData?.commOnlyOperationalPartners\n ? [...state.formData.commOnlyOperationalPartners]\n : [];\n draft.formData.commOnlyOperationalPartners = [...newPartners, { value: null }];\n });\n case actionCreators.updateCommOnlyOperationalPartner().type:\n return produce(state, (draft) => {\n const updatedPartners = draft.formData.commOnlyOperationalPartners\n ? [...draft.formData.commOnlyOperationalPartners]\n : [];\n if (updatedPartners[payload.index]) {\n updatedPartners[payload.index].value = payload.value;\n }\n draft.formData.commOnlyOperationalPartners = updatedPartners;\n });\n case actionCreators.removeCommOnlyOperationalPartner().type:\n return produce(state, (draft) => {\n const reducedPartners = state.formData.commOnlyOperationalPartners\n ? [...state.formData.commOnlyOperationalPartners]\n : [];\n reducedPartners.splice(payload.index, 1);\n\n draft.formData.commOnlyOperationalPartners = reducedPartners;\n });\n case actionCreators.addTransactionReportAccess().type:\n return produce(state, (draft) => {\n const newPeople = state.formData?.transactionReportAccessUsers\n ? [...state.formData.transactionReportAccessUsers]\n : [];\n draft.formData.transactionReportAccessUsers = [...newPeople, { value: null }];\n });\n case actionCreators.updateTransactionReportAccess().type:\n return produce(state, (draft) => {\n const updatedPeople = draft.formData.transactionReportAccessUsers\n ? [...draft.formData.transactionReportAccessUsers]\n : [];\n if (updatedPeople[payload.index]) {\n updatedPeople[payload.index].value = payload.value;\n }\n draft.formData.transactionReportAccessUsers = updatedPeople;\n });\n case actionCreators.removeTransactionReportAccess().type:\n return produce(state, (draft) => {\n const reducedPeople = state.formData.transactionReportAccessUsers\n ? [...state.formData.transactionReportAccessUsers]\n : [];\n reducedPeople.splice(payload.index, 1);\n\n draft.formData.transactionReportAccessUsers = reducedPeople;\n });\n case actionCreators.saveForm().type:\n return produce(state, (draft) => {\n draft.isSaving = true;\n draft.saveError = null;\n });\n case actionCreators.saveFormSuccess().type:\n return produce(state, (draft) => {\n draft.isSaving = false;\n });\n case actionCreators.saveFormError().type:\n const newState = produce(state, (draft) => {\n draft.isSaving = false;\n draft.saveError = payload.error;\n });\n return newState;\n default:\n return state;\n }\n};\n","import curriedNamespaceAction from \"../../reducers/helpers\";\n\nconst REDUCER_PSEARCH = \"partnerSearch\";\nconst wrap = curriedNamespaceAction(REDUCER_PSEARCH);\n\nexport const changeSearchTab = (tab) => wrap({ type: \"SET_SEARCH_TAB\", tab });\nexport const changeSearchTerm = (term) => wrap({ type: \"SET_SEARCH_TERM\", term });\nexport const changePlaceOnlySearch = (checked) => wrap({ type: \"SET_PLACE_SEARCH\", checked });\nexport const changeIsSearching = (searching) => wrap({ type: \"SET_IS_SEARCHING\", searching });\nexport const setDetailsId = (id) => wrap({ type: \"OPEN_DETAILS\", id });\n\nexport const getDetails = () => wrap({ type: \"GET_DETAILS\" });\nexport const getDetailsError = (error) => wrap({ type: \"GET_DETAILS_ERROR\", error });\nexport const getDetailsSuccess = (data) => wrap({ type: \"GET_DETAILS_SUCCESS\", data });\n\nexport const searchPartners = () => wrap({ type: \"SEARCH_PARTNERS\" });\nexport const searchPartnersError = (error) => wrap({ type: \"SEARCH_PARTNERS_ERROR\", error });\nexport const searchPartnersSuccess = (results) => wrap({ type: \"SEARCH_PARTNERS_SUCCESS\", results });\n","import { produce } from \"immer\";\nimport * as actionCreators from \"../PartnerSearch/actions/creators\";\n\nexport const defaultState = {\n newSourceId: null,\n searchTab: \"google_place\",\n searchTerm: \"\",\n searchPlaceOnly: true,\n results: [],\n isSearching: false,\n hasSearchingError: false,\n hasOtherPartnersInSearch: false,\n detailsId: null,\n loadingDetails: false,\n partnerDetails: null,\n hasLoadingError: false,\n};\n\nconst partnerSearchReducer = (state = defaultState, payload) => {\n switch (payload.type) {\n case actionCreators.changeSearchTab().type:\n return produce(state, (draft) => {\n draft.searchTab = payload.tab;\n draft.searchTerm = \"\";\n });\n case actionCreators.changeSearchTerm().type:\n return produce(state, (draft) => {\n draft.searchTerm = payload.term;\n });\n case actionCreators.changePlaceOnlySearch().type:\n return produce(state, (draft) => {\n draft.searchPlaceOnly = payload.checked;\n });\n case actionCreators.changeIsSearching().type:\n return produce(state, (draft) => {\n draft.isSearching = payload.searching;\n if (payload.searching) {\n draft.results = [];\n }\n });\n case actionCreators.setDetailsId().type:\n return produce(state, (draft) => {\n draft.detailsId = payload.id;\n });\n\n case actionCreators.getDetails().type:\n return produce(state, (draft) => {\n draft.loadingDetails = true;\n draft.hasLoadingError = false;\n });\n case actionCreators.getDetailsError().type:\n return produce(state, (draft) => {\n draft.loadingDetails = false;\n draft.hasLoadingError = true;\n });\n case actionCreators.getDetailsSuccess().type:\n return produce(state, (draft) => {\n draft.loadingDetails = false;\n draft.hasLoadingError = false;\n draft.partnerDetails = payload?.data?.data;\n });\n\n case actionCreators.searchPartners().type:\n return produce(state, (draft) => {\n draft.isSearching = true;\n draft.hasSearchingError = false;\n draft.hasOtherPartnersInSearch = false;\n });\n case actionCreators.searchPartnersError().type:\n return produce(state, (draft) => {\n draft.isSearching = false;\n draft.results = [];\n draft.hasSearchingError = true;\n draft.hasOtherPartnersInSearch = false;\n });\n case actionCreators.searchPartnersSuccess().type:\n return produce(state, (draft) => {\n draft.isSearching = false;\n draft.hasSearchingError = false;\n draft.results = payload.results?.people;\n });\n default:\n return state;\n }\n};\n\nexport default partnerSearchReducer;\n","import { enableMapSet } from \"immer\";\nimport reports from \"./reportsReducer\";\nimport assignedPlans from \"./assignedPlans\";\nimport autoPlans from \"./autoPlans\";\nimport autoPlanEdit from \"./autoPlanEdit\";\nimport businessSettings from \"./businessSettingsReducer\";\nimport triggers from \"./triggers\";\nimport milestones from \"./milestonesReducer\";\nimport addMarketReport from \"./addMarketReportReducer\";\nimport accountFinancial from \"./accountFinancialReducer\";\nimport transactionFinancial from \"./transactionFinancialReducer\";\nimport { tdpAutoPlansReducer } from \"./tdpAutoPlansReducer\";\nimport { tdpDatesReducer } from \"./tdpDatesReducer\";\nimport { tdpDetailsReducer } from \"./tdpDetailsReducer\";\nimport { tdpDocumentsReducer } from \"./tdpDocumentsReducer\";\nimport { tdpFinancialsReducer } from \"./tdpFinancialsReducer\";\nimport { tdpTimelineReducer } from \"./tdpTimelineReducer\";\nimport { tdpTasksReducer } from \"./tdpTasksReducer\";\nimport { tdpMarketingReducer } from \"./tdpMarketingReducer\";\nimport { tdpFeedbackReducer } from \"./tdpFeedbackReducer\";\nimport { tdpPeopleReducer } from \"./tdpPeopleReducer\";\nimport { tdpInteractionsReducer } from \"./tdpInteractionsReducer\";\nimport { tdpNotesReducer } from \"./tdpNotesReducer\";\nimport { tdpTitleAndEscrowReducer } from \"./tdpTitleAndEscrowReducer\";\nimport tdpThumbnailSelector from \"./tdpThumbnailSelectorReducer\";\nimport personDetail from \"./personalDetailReducer/personDetailReducer\";\nimport leadPonds from \"./leadPondsReducer\";\nimport LeadIndex from \"./leadIndexReducer\";\nimport leadRouting from \"./leadRouteReducer\";\nimport notesData from \"./notesReducer\";\nimport userSettings from \"./userSettingsReducer\";\nimport contactsReducer from \"./contactsReducer\";\nimport { superUsersBranding } from \"./superUsersBrandingReducer\";\nimport partnerSearch from \"./partnerSearchReducer\";\n\nenableMapSet();\n\nexport default {\n accountFinancial,\n addMarketReport,\n assignedPlans,\n autoPlanEdit,\n autoPlans,\n businessSettings,\n contactsReducer,\n LeadIndex,\n leadPonds,\n leadRouting,\n milestones,\n notesData,\n partnerSearch,\n personDetail,\n reports,\n superUsersBranding,\n tdpAutoPlansReducer,\n tdpDatesReducer,\n tdpDetailsReducer,\n tdpDocumentsReducer,\n tdpFeedbackReducer,\n tdpFinancialsReducer,\n tdpInteractionsReducer,\n tdpMarketingReducer,\n tdpNotesReducer,\n tdpPeopleReducer,\n tdpTasksReducer,\n tdpThumbnailSelector,\n tdpTimelineReducer,\n tdpTitleAndEscrowReducer,\n transactionFinancial,\n triggers,\n userSettings,\n};\n","import { configureStore as reduxConfigureStore } from \"@reduxjs/toolkit\";\nimport rootReducer from \"../reducers\";\n\nconst configureStore = (preloadedState) =>\n reduxConfigureStore({\n middleware: (getDefaultMiddleware) =>\n getDefaultMiddleware({ immutableCheck: false, serializableCheck: false }),\n preloadedState,\n reducer: rootReducer,\n });\n\nexport default configureStore;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst CloseButton = ({ children, className, onClick, ...props }) => (\n
\n {children}\n
\n );\n};\nAlert.propTypes = {\n variant: PropTypes.oneOf([\"success\", \"info\", \"warning\", \"danger\"]).isRequired,\n deprecatedOverrideMarginClasses: PropTypes.string,\n children: PropTypes.node,\n className: PropTypes.string,\n};\nAlert.defaultProps = {\n deprecatedOverrideMarginClasses: null,\n children: null,\n className: \"\",\n};\n\nAlert.CloseButton = CloseButton;\n\nexport default Alert;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport CLASSES from \"./classes.json\";\n\nconst {\n BACKGROUND_COLOR_CLASSES,\n INTERACTION_BACKGROUND_COLOR_CLASSES,\n\n BORDER_COLOR_CLASSES,\n INVERTED_BORDER_COLOR_CLASSES,\n DISABLED_BORDER_COLOR_CLASSES,\n\n TEXT_CLASSES_CLASSES,\n TEXT_COLOR_CLASSES,\n\n ADDITIONAL_CLASSES,\n SIZE_CLASSES,\n DISPLAY_CLASSES,\n\n BASE_CLASSES,\n} = CLASSES;\n\nconst sizeClasses = (size) => SIZE_CLASSES[size];\n\nconst displayClasses = (display) => DISPLAY_CLASSES[display];\n\nconst backgroundColorClasses = ({ variant, invert }) => {\n const bgColorVariant = invert ? \"inverted\" : variant;\n\n let interactionBgColorVariant = bgColorVariant;\n\n // Edge case. \"default\" variant does not respect the usual inverted\n // background color behavior but instead overrides their own.\n if (invert && variant === \"default\") {\n interactionBgColorVariant = \"invertedDefault\";\n }\n\n return [\n BACKGROUND_COLOR_CLASSES[bgColorVariant],\n INTERACTION_BACKGROUND_COLOR_CLASSES[interactionBgColorVariant],\n ].join(\" \");\n};\n\nconst borderColorClasses = ({ variant, invert }) => {\n // No border.\n if (variant === \"simple\") {\n return \"\";\n }\n\n // Again, the \"default\" variant does not respect the usual inverted border\n // color behavior but instead overrides their own.\n if (invert && variant === \"default\") {\n return BORDER_COLOR_CLASSES[variant];\n }\n\n if (invert) {\n return INVERTED_BORDER_COLOR_CLASSES[variant];\n }\n\n return [BORDER_COLOR_CLASSES[variant], DISABLED_BORDER_COLOR_CLASSES[variant]].join(\" \");\n};\n\nconst textColorClasses = ({ variant, invert }) => {\n if (invert) {\n // And again, \"default\" variant does not respect the usual inverted text\n // styles.\n if (variant === \"default\") {\n return TEXT_COLOR_CLASSES.invertedDefault;\n }\n\n return TEXT_COLOR_CLASSES.inverted;\n }\n\n if ([\"primary\", \"success\", \"info\", \"warning\", \"danger\"].includes(variant)) {\n return TEXT_COLOR_CLASSES.common;\n }\n\n return TEXT_COLOR_CLASSES[variant];\n};\n\nconst textStyleClasses = (variant) => {\n if (variant === \"link\") {\n return TEXT_CLASSES_CLASSES[variant];\n }\n\n return TEXT_CLASSES_CLASSES.common;\n};\n\nconst additionalClasses = (variant) => {\n if (variant in ADDITIONAL_CLASSES) {\n return ADDITIONAL_CLASSES[variant];\n }\n\n return \"\";\n};\n\nconst variantClasses = ({ variant, invert }) =>\n [\n backgroundColorClasses({ variant, invert }),\n borderColorClasses({ variant, invert }),\n textColorClasses({ variant, invert }),\n textStyleClasses(variant),\n additionalClasses(variant),\n ].join(\" \");\n\nexport const Button = React.forwardRef(\n ({ children, className, size, display, variant, invert, ...props }, ref) => {\n const classes = `\n ${BASE_CLASSES}\n ${className}\n ${variantClasses({ variant, invert })}\n ${sizeClasses(size)}\n ${displayClasses(display)}\n `;\n\n return (\n \n );\n },\n);\nButton.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n size: PropTypes.oneOf([\"large\", \"small\", \"extraSmall\", \"default\"]),\n display: PropTypes.oneOf([\"inline\", \"block\"]),\n variant: PropTypes.oneOf([\n \"default\",\n \"info\",\n \"primary\",\n \"success\",\n \"warning\",\n \"danger\",\n \"link\",\n \"inverted\",\n ]),\n invert: PropTypes.bool,\n disabled: PropTypes.bool,\n};\nButton.defaultProps = {\n children: null,\n className: \"\",\n size: \"default\",\n display: \"inline\",\n variant: null,\n invert: false,\n disabled: false,\n};\n\nexport default Button;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst BACKGROUND_COLOR_CLASSES =\n \"tw-bg-gray enabled:focus:tw-bg-gray-light enabled:hover:tw-bg-gray enabled:active:tw-bg-gray-light enabled:active:hover:tw-bg-gray\";\n\nconst BORDER_COLOR_CLASSES =\n \"enabled:tw-border-gray-base enabled:focus:tw-border-color-8c8c8c enabled:hover:tw-border-gray-base enabled:active:tw-border-color-adadad enabled:active:hover:tw-border-gray-base disabled:tw-border-gray-base\";\n\nconst TEXT_COLOR_CLASSES =\n \"tw-text-gray-base focus:tw-text-brand-primary hover:tw-text-brand-primary active:tw-text-brand-primary\";\n\nconst SIZE_CLASSES = {\n large: \"tw-leading-1.3333333 tw-rounded-6px\",\n small: \"tw-leading-normal tw-rounded-3px\",\n extraSmall: \"tw-leading-normal tw-rounded-3px\",\n default: \"tw-leading-1.428571429 tw-rounded-4px\",\n};\n\nconst BASE_CLASSES =\n \"tw-inline-block tw-font-semibold hover:tw-no-underline focus:tw-no-underline tw-border tw-border-solid tw-border-r-3px tw-border-b-3px tw-uppercase tw-py-0.3em tw-px-0.8em tw-text-15px tw-text-center tw-align-middle tw-inline-block tw-mb-0 tw-whitespace-nowrap tw-touch-action-manipulation tw-select-none tw-bg-none focus:tw-outline-bootstrap active:tw-outline-0 enabled:tw-cursor-pointer enabled:active:tw-shadow-bootstrap-15 disabled:!tw-cursor-not-allowed disabled:tw-opacity-65 disabled:tw-shadow-none\";\n\nconst sizeClasses = (size) => SIZE_CLASSES[size];\n\nexport const CancelButton = React.forwardRef(({ className, size, onClick, ...props }, ref) => {\n const classes = `\n ${BASE_CLASSES}\n ${BACKGROUND_COLOR_CLASSES}\n ${BORDER_COLOR_CLASSES}\n ${TEXT_COLOR_CLASSES}\n\t\t${sizeClasses(size)}\n ${className}\n `;\n\n return (\n \n );\n});\n\nCancelButton.propTypes = {\n className: PropTypes.string,\n size: PropTypes.oneOf([\"large\", \"small\", \"extraSmall\", \"default\"]),\n disabled: PropTypes.bool,\n onClick: PropTypes.func,\n};\n\nCancelButton.defaultProps = {\n className: \"\",\n size: \"default\",\n disabled: false,\n onClick: null,\n};\n\nexport default CancelButton;\n","/* eslint-disable react/prop-types */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useGivenOrGeneratedId } from \"../../hookHelpers\";\n\nimport CLASSES from \"./classes.json\";\n\nconst {\n BASE_CLASSES,\n INLINE_CLASSES,\n NORMAL_CLASSES,\n INLINE_MARGIN_CLASSES,\n NORMAL_MARGIN_CLASSES,\n BASE_LABEL_CLASSES,\n INLINE_LABEL_CLASSES,\n NORMAL_LABEL_CLASSES,\n INLINE_LABEL_PADDING_CLASSES,\n NORMAL_LABEL_PADDING_CLASSES,\n BASE_LABEL_TEXT_CLASSES,\n INLINE_LABEL_TEXT_CLASSES,\n NORMAL_LABEL_TEXT_CLASSES,\n CHECKED_COLOR_CLASSES,\n UNCHECKED_COLOR_CLASSES,\n BASE_CHECKBOX_CLASSES,\n INLINE_CHECKBOX_CLASSES,\n NORMAL_CHECKBOX_CLASSES,\n INLINE_CHECKBOX_MARGIN_CLASSES,\n NORMAL_CHECKBOX_MARGIN_CLASSES,\n} = CLASSES;\n\nexport const Checkbox = React.forwardRef(\n (\n {\n id: idFromProps,\n className,\n labelClassName,\n checkboxClassName,\n labelTextClassName,\n name,\n inline,\n deprecatedOverrideMarginClasses,\n deprecatedOverrideLabelPaddingClasses,\n deprecatedOverrideCheckboxMarginClasses,\n checkedColor,\n uncheckedColor,\n children,\n ...props\n },\n ref,\n ) => {\n const id = useGivenOrGeneratedId(\"checkbox\", idFromProps);\n\n const classes = `\n ${BASE_CLASSES}\n ${inline ? INLINE_CLASSES : NORMAL_CLASSES}\n ${deprecatedOverrideMarginClasses || (inline ? INLINE_MARGIN_CLASSES : NORMAL_MARGIN_CLASSES)}\n ${className}\n `;\n\n const labelClasses = `\n ${BASE_LABEL_CLASSES}\n ${inline ? INLINE_LABEL_CLASSES : NORMAL_LABEL_CLASSES}\n ${\n deprecatedOverrideLabelPaddingClasses ||\n (inline ? INLINE_LABEL_PADDING_CLASSES : NORMAL_LABEL_PADDING_CLASSES)\n }\n ${labelClassName}\n `;\n\n const labelTextBeforeContent = inline\n ? \"\"\n : String.raw`before:tw-content-[\"\\f096\"] peer-checked:before:tw-content-[\"\\f14a\"]`;\n\n const labelTextClasses = `\n ${BASE_LABEL_TEXT_CLASSES}\n ${CHECKED_COLOR_CLASSES[checkedColor]}\n ${UNCHECKED_COLOR_CLASSES[uncheckedColor]}\n ${inline ? INLINE_LABEL_TEXT_CLASSES : NORMAL_LABEL_TEXT_CLASSES}\n ${labelTextBeforeContent}\n ${labelTextClassName}\n `;\n\n const checkboxClasses = `\n ${BASE_CHECKBOX_CLASSES}\n ${inline ? INLINE_CHECKBOX_CLASSES : NORMAL_CHECKBOX_CLASSES}\n ${\n deprecatedOverrideCheckboxMarginClasses ||\n (inline ? INLINE_CHECKBOX_MARGIN_CLASSES : NORMAL_CHECKBOX_MARGIN_CLASSES)\n }\n ${checkboxClassName}\n `;\n\n return (\n \n \n
\n );\n },\n);\n\nCheckbox.propTypes = {\n id: PropTypes.string,\n className: PropTypes.string,\n labelClassName: PropTypes.string,\n checkboxClassName: PropTypes.string,\n labelTextClassName: PropTypes.string,\n name: PropTypes.string.isRequired,\n inline: PropTypes.bool,\n deprecatedOverrideMarginClasses: PropTypes.string,\n deprecatedOverrideLabelPaddingClasses: PropTypes.string,\n deprecatedOverrideCheckboxMarginClasses: PropTypes.string,\n checkedColor: PropTypes.oneOf([\"default\", \"info\"]),\n uncheckedColor: PropTypes.oneOf([\"default\", \"info\"]),\n children: PropTypes.node,\n};\n\nCheckbox.defaultProps = {\n id: \"\",\n className: \"\",\n labelClassName: \"\",\n checkboxClassName: \"\",\n labelTextClassName: \"\",\n inline: false,\n deprecatedOverrideMarginClasses: \"\",\n deprecatedOverrideLabelPaddingClasses: \"\",\n deprecatedOverrideCheckboxMarginClasses: \"\",\n checkedColor: \"default\",\n uncheckedColor: \"default\",\n children: null,\n};\n\nexport default Checkbox;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst BASE_CLASSES = `\n before:tw-table\n before:tw-content-['_']\n after:tw-table\n after:tw-content-['_']\n after:tw-clear-both\n`;\n\nexport const Clearfix = ({ className, children, ...props }) => (\n \n {children}\n
\n );\n};\nCol.propTypes = {\n size: PropTypes.oneOf([\n 1,\n 2,\n 3,\n 4,\n 5,\n 6,\n 7,\n 8,\n 9,\n 10,\n 11,\n 12,\n PropTypes.shape({\n xs: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n sm: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n md: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n lg: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n }),\n ]),\n offset: PropTypes.oneOf([\n 1,\n 2,\n 3,\n 4,\n 5,\n 6,\n 7,\n 8,\n 9,\n 10,\n 11,\n 12,\n PropTypes.shape({\n xs: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n sm: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n md: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n lg: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n }),\n null,\n ]),\n deprecatedOverridePaddingClasses: PropTypes.string,\n children: PropTypes.node,\n className: PropTypes.string,\n};\nCol.defaultProps = {\n size: 12,\n offset: null,\n deprecatedOverridePaddingClasses: null,\n children: null,\n className: \"\",\n};\n\nexport default Col;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst BACKGROUND_COLOR_CLASSES =\n \"tw-bg-white enabled:hover:tw-bg-gray-lighter enabled:active:hover:tw-bg-gray-lighter disabled:tw-bg-gray-lighter\";\n\nconst BORDER_COLOR_CLASSES =\n \"enabled:tw-border-brand-danger enabled:focus:tw-border-color-8c8c8c enabled:hover:tw-border-color-adadad enabled:active:tw-border-color-adadad enabled:active:hover:tw-border-color-8c8c8c disabled:tw-border-brand-danger disabled:hover:tw-border-color-ccc\";\n\nconst TEXT_COLOR_CLASSES =\n \"tw-text-gray-darker focus:tw-text-gray-darker hover:!tw-text-gray-darker active:tw-text-gray-darker active:hover:!tw-text-color-333\";\n\nconst SIZE_CLASSES = {\n large: \"tw-leading-1.3333333 tw-rounded-6px\",\n small: \"tw-leading-normal tw-rounded-3px\",\n extraSmall: \"tw-leading-normal tw-rounded-3px\",\n default: \"tw-leading-1.428571429 tw-rounded-4px\",\n};\n\nconst BASE_CLASSES =\n \"tw-inline-block tw-font-semibold hover:tw-no-underline focus:tw-no-underline tw-border tw-border-solid tw-border-r-3px tw-border-b-3px tw-uppercase tw-py-0.3em tw-px-0.8em tw-text-15px tw-text-center tw-align-middle tw-inline-block tw-mb-0 tw-whitespace-nowrap tw-touch-action-manipulation tw-select-none tw-bg-none focus:tw-outline-bootstrap active:tw-outline-0 enabled:tw-cursor-pointer enabled:active:tw-shadow-bootstrap-15 disabled:!tw-cursor-not-allowed disabled:tw-opacity-65 disabled:tw-shadow-none\";\n\nconst sizeClasses = (size) => SIZE_CLASSES[size];\n\nexport const DeleteButton = React.forwardRef(({ className, size, onClick, ...props }, ref) => {\n const classes = `\n ${BASE_CLASSES}\n ${BACKGROUND_COLOR_CLASSES}\n ${BORDER_COLOR_CLASSES}\n ${TEXT_COLOR_CLASSES}\n\t\t${sizeClasses(size)}\n ${className}\n `;\n\n return (\n \n );\n});\n\nDeleteButton.propTypes = {\n className: PropTypes.string,\n size: PropTypes.oneOf([\"large\", \"small\", \"extraSmall\", \"default\"]),\n disabled: PropTypes.bool,\n onClick: PropTypes.func,\n};\n\nDeleteButton.defaultProps = {\n className: \"\",\n size: \"default\",\n disabled: false,\n onClick: null,\n};\n\nexport default DeleteButton;\n","/**\n * Assigns `val` to `obj[key]`, if `obj[key]` is `undefined`.\n * @param {object} obj Object to assign to.\n * @param {object} val Value to be assigned to `key`.\n * @param {object} key Key to assign to inside `obj`.\n */\nconst assignValueToIfUndefined = (obj, val, key) => {\n if (obj[key] === undefined) {\n // eslint-disable-next-line no-param-reassign\n obj[key] = val;\n }\n};\n\nconst makeRenamedPropsCompatible = (originalProps) => {\n const {\n clearable,\n closeOnSelect,\n disabled,\n onClose,\n scrollMenuIntoView,\n searchable,\n\n ...props\n } = originalProps;\n\n assignValueToIfUndefined(props, clearable, \"isClearable\");\n assignValueToIfUndefined(props, closeOnSelect, \"closeMenuOnSelect\");\n assignValueToIfUndefined(props, disabled, \"isDisabled\");\n assignValueToIfUndefined(props, onClose, \"onMenuClose\");\n assignValueToIfUndefined(props, scrollMenuIntoView, \"menuShouldScrollIntoView\");\n assignValueToIfUndefined(props, searchable, \"isSearchable\");\n\n return props;\n};\n\nconst buildValueCompatibleWithLegacyOnUpdateCallback = (evt, nameFromProps) => ({\n target: { value: evt ? evt.value : undefined, name: nameFromProps },\n ...evt,\n});\n\nconst makeCallbacksCompatibleInPlace = (props) => {\n // There used to be a DropdownSelect component, which was extremely similar to\n // the current Dropdown component but had a different API for handling user\n // selection (it had an `onUpdate` instead of `onChange`, and the callback\n // received a custom-made object instead of the original event). This adapter\n // makes it possible the use this component in both cases with no changes to\n // any callbacks/handlers.\n if (!props.onChange && props.onUpdate) {\n // eslint-disable-next-line no-param-reassign\n props.onChange = (evt) => props.onUpdate(buildValueCompatibleWithLegacyOnUpdateCallback(evt, props.name));\n }\n\n return props;\n};\n\nconst recursivelyFindOptionByValue = (options, value) => {\n // Option groups are built by nesting `options` objects inside an existing\n // `option`, so to find a full `option` value based on its `value` we need to\n // recursively traverse the original `options` object.\n let result = options.find?.((opt) => opt.value === value);\n if (result) {\n return result;\n }\n\n // eslint-disable-next-line no-restricted-syntax\n for (const option of options) {\n if (option.options) {\n result = recursivelyFindOptionByValue(option.options, value);\n if (result) {\n return result;\n }\n }\n }\n\n return undefined;\n};\n\nconst makeValuePropCompatibleInPlace = (props) => {\n // As of react-select v2, passing anything other than a `{ label, value }`\n // shaped object means we need to implement a bunch of handlers for the Select\n // component to behave as expected. This function standardizes every usage\n // style seen (so far...) across the codebase.\n\n // Need to specifically test against `undefined` and `null` because other\n // falsy values are valid and must still be handled (e.g.: `false`, `0`).\n if (props.value === undefined || props.value === null) {\n // No value yet - nothing to do.\n return;\n }\n\n if (typeof props.value === \"object\") {\n // Already received an object - nothing to do.\n return;\n }\n\n // Otherwise, we need to convert to the appropiate shape. First...\n if (props.options) {\n // ...try to match the value we got to something in the options list, which\n // was the old react-select behaviour.\n const option = recursivelyFindOptionByValue(props.options, props.value);\n if (option) {\n // Success! Assign to props and bail.\n props.value = option; // eslint-disable-line no-param-reassign\n return;\n }\n }\n\n // Couldn't find a suitable value in the options array, assume label is the\n // same as value (default behavior back in react-select v1 AFAICT), and build\n // the value object by hand.\n // eslint-disable-next-line no-param-reassign\n props.value = { label: props.value, value: props.value };\n};\n\n/**\n * Takes `originalProps`, which were meant to be used with react-select v1 or\n * the legacy `DropdownSelect` component, and converts them to make as much as\n * we can compatible with the new `Dropdown` component.\n *\n * @param {object} originalProps Original props.\n * @returns The updated props, compatible with the new `Dropdown`.\n */\nexport const makePropsCompatible = (originalProps) => {\n const props = makeRenamedPropsCompatible(originalProps);\n makeValuePropCompatibleInPlace(props);\n makeCallbacksCompatibleInPlace(props);\n\n // For consistency with react-select v1.\n if (props.noOptionsMessage === undefined) {\n props.noOptionsMessage = () => \"No results found\";\n }\n\n // Again, to keep behavior consistent with react-select v1. Currently defaults\n // to `true` but used to default to `false` on v1.\n if (props.menuShouldScrollIntoView === undefined) {\n props.menuShouldScrollIntoView = false;\n }\n\n // For use in test helpers, so we can interact with Dropdowns programatically.\n if (props.classNamePrefix === undefined) {\n // Value should be kept in sync with the one in `react_select_helpers.rb`.\n props.classNamePrefix = \"react-select\";\n }\n\n return props;\n};\n\nexport default makePropsCompatible;\n","import { merge } from \"lodash\";\n\nconst getBoxShadowForWhen = (menuIsOpen) => (menuIsOpen ? \"rgba(0, 0, 0, 0.125) 0px 3px 5px inset\" : \"none\");\n\nconst getFillForWhen = (isDisabled) => (isDisabled ? \"rgba(0, 0, 0, 0.15)\" : \"rgb(51, 51, 51)\");\n\nconst dropdownIndicatorSharedStyles = {\n \":hover\": { fill: \"rgb(102, 102, 102)\" },\n \":active\": { fill: \"rgb(153, 153, 153)\" },\n};\n\nexport const sharedStyles = {\n container: (provided) => ({ ...provided, width: \"100%\" }),\n\n indicatorSeparator: () => ({ display: \"none\" }),\n\n menu: (provided) => ({\n ...provided,\n\n marginTop: 0,\n zIndex: 3,\n\n boxShadow: \"none\",\n borderRadius: 0,\n borderStyle: \"solid\",\n borderWidth: \"1px\",\n borderColor: \"rgb(230, 230, 230) rgb(204, 204, 204) rgb(204, 204, 204)\",\n }),\n\n menuList: (provided) => ({\n ...provided,\n\n paddingTop: 0,\n paddingBottom: 0,\n maxHeight: \"200px\",\n }),\n\n option: (provided, { isSelected, isFocused, isDisabled }) => {\n let textColor = \"inherit\";\n if (isSelected) {\n textColor = \"black\";\n } else if (isFocused) {\n textColor = \"rgb(51, 51, 51)\";\n } else if (isDisabled) {\n textColor = \"var(--neutral-gray-30)\";\n }\n\n return {\n ...provided,\n cursor: \"pointer\",\n padding: \"3px 10px\",\n\n backgroundColor: isSelected || isFocused ? \"rgb(245, 245, 245)\" : \"transparent\",\n color: textColor,\n\n \":hover\": {\n backgroundColor: isDisabled ? \"transparent\" : \"rgb(245, 245, 245)\",\n color: isDisabled ? \"var(--neutral-gray-30)\" : \"rgb(51, 51, 51)\",\n },\n };\n },\n\n clearIndicator: (provided) => ({\n ...provided,\n cursor: \"pointer\",\n padding: 0,\n transform: \"scale(0.7)\",\n\n \":hover\": { color: \"red\" },\n }),\n};\n\nexport const variantStyles = {\n outlined: {\n container: (provided, { selectProps: { variantOverrides = {} } }) =>\n merge(provided, { width: variantOverrides.containerWidth }),\n menu: (provided, { selectProps: { variantOverrides = {} } }) =>\n merge(provided, { width: variantOverrides.menuWidth, marginTop: \"-2px\", borderRadius: 0 }),\n menuPortal: (provided) => ({ ...provided, zIndex: 9999 }),\n control: (provided, { menuIsOpen, isFocused, selectProps: { variantOverrides = {} } }) => {\n let borderColor = \"#E0E0E0\";\n if (isFocused && !menuIsOpen) {\n borderColor = \"var(--dropdown-border-hover)\";\n }\n\n if (variantOverrides.hasError) {\n borderColor = \"#FA9996\";\n }\n\n return merge(provided, {\n boxShadow: getBoxShadowForWhen(menuIsOpen),\n\n height: variantOverrides.height || \"36px\",\n width: variantOverrides.controlWidth,\n minHeight: variantOverrides.minHeight || \"34px\",\n\n backgroundColor: \"#F5F7F7\",\n borderColor,\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderRadius: variantOverrides.disableBorderRadius ? 0 : \"2px\",\n\n \":hover\": { borderColor },\n });\n },\n\n indicatorsContainer: (provided, { selectProps: { variantOverrides = {} } }) =>\n variantOverrides.showIndicator ? { ...provided } : { display: \"none\" },\n\n singleValue: (provided, { selectProps: { variantOverrides = {} } }) => ({\n ...provided,\n color: variantOverrides.singleValueColor || \"#999\",\n }),\n input: (provided, { selectProps: { variantOverrides = {} } }) =>\n merge(provided, { paddingLeft: variantOverrides.inputPaddingLeft }),\n valueContainer: (provided, { selectProps: { variantOverrides = {} } }) =>\n merge(provided, { paddingRight: 0, paddingLeft: variantOverrides.valueContainerPaddingLeft }),\n },\n\n transparent: {\n control: (provided, { menuIsOpen, isDisabled }) => {\n let backgroundColor = menuIsOpen ? \"rgb(230, 230, 230)\" : \"transparent\";\n if (isDisabled) {\n backgroundColor = \"#F9F9F9\";\n }\n\n return {\n ...provided,\n\n boxShadow: getBoxShadowForWhen(menuIsOpen),\n\n border: \"none\",\n borderRadius: 0,\n backgroundColor,\n\n minHeight: 0,\n height: \"30px\",\n };\n },\n\n placeholder: (provided, { isDisabled }) => ({\n ...provided,\n\n color: getFillForWhen(isDisabled),\n textAlign: \"right\",\n paddingBottom: \"6px\",\n whiteSpace: \"nowrap\",\n }),\n\n dropdownIndicator: (provided, { isDisabled }) => ({\n ...provided,\n ...dropdownIndicatorSharedStyles,\n fill: getFillForWhen(isDisabled),\n padding: \"6px 6px 6px 0\",\n }),\n\n valueContainer: (provided) => ({ ...provided, height: \"30px\" }),\n },\n\n default: {\n control: (provided, { menuIsOpen, isDisabled, isFocused }) => {\n let backgroundColor = menuIsOpen ? \"rgb(230, 230, 230)\" : \"#FFF\";\n if (isDisabled) {\n backgroundColor = \"rgb(249, 249, 249)\";\n }\n\n let borderColor = menuIsOpen ? \"rgb(173, 173, 173)\" : \"rgb(204, 204, 204)\";\n if (isFocused && !menuIsOpen) {\n borderColor = \"var(--dropdown-border-hover)\";\n }\n\n return {\n ...provided,\n\n boxShadow: getBoxShadowForWhen(menuIsOpen),\n\n borderColor,\n borderRadius: 0,\n\n color: isDisabled ? \"rgba(0, 0, 0, 0.15)\" : \"rgb(51, 51, 51)\",\n backgroundColor,\n\n minHeight: 0,\n height: \"30px\",\n\n \":hover\": { borderColor },\n };\n },\n\n dropdownIndicator: (provided, { isDisabled }) => ({\n ...provided,\n ...dropdownIndicatorSharedStyles,\n fill: getFillForWhen(isDisabled),\n padding: \"5px 5px 5px 0\",\n }),\n\n menuList: (provided, args) => {\n const {\n selectProps: { variantOverrides = {} },\n } = args;\n\n if (!variantOverrides.menuListMaxHeight) {\n return sharedStyles.menuList(provided);\n }\n return { ...sharedStyles.menuList(provided), maxHeight: variantOverrides.menuListMaxHeight };\n },\n\n indicatorsContainer: (provided) => ({ ...provided, height: \"30px\" }),\n valueContainer: (provided) => ({ ...provided, paddingRight: 0, paddingTop: 0 }),\n placeholder: (provided, args) => {\n const {\n selectProps: { variantOverrides = {} },\n } = args;\n\n return {\n ...provided,\n whiteSpace: \"nowrap\",\n color: \"rgb(170, 170, 170)\",\n paddingBottom: variantOverrides.placeholderPaddingBottom || provided.paddingBottom,\n };\n },\n },\n\n flatGray: {\n control: (provided, { menuIsOpen }) => ({\n ...provided,\n\n boxShadow: getBoxShadowForWhen(menuIsOpen),\n\n border: \"none\",\n borderRadius: 0,\n backgroundColor: \"rgb(240, 241, 241)\",\n\n minHeight: \"30px\",\n }),\n\n dropdownIndicator: (provided, { isDisabled }) => ({\n ...provided,\n ...dropdownIndicatorSharedStyles,\n fill: getFillForWhen(isDisabled),\n padding: \"5px 5px 5px 0\",\n }),\n\n valueContainer: (provided) => ({ ...provided, padding: \"0 0 0 8px\" }),\n },\n\n flatBlueishGray: {\n singleValue: (provided) => ({ ...provided, fontSize: \"14px\" }),\n\n control: (provided, { menuIsOpen }) => ({\n ...provided,\n\n boxShadow: getBoxShadowForWhen(menuIsOpen),\n\n border: \"none\",\n borderRadius: \"2px\",\n backgroundColor: \"rgb(236, 239, 239)\",\n minHeight: \"29px\",\n }),\n\n dropdownIndicator: (provided, args) => {\n const { isDisabled, variantOverrides = {} } = args;\n\n return {\n ...provided,\n ...dropdownIndicatorSharedStyles,\n fill: getFillForWhen(isDisabled),\n padding: variantOverrides.dropdownIndicatorPadding || \"5px 5px 5px 0\",\n };\n },\n\n indicatorsContainer: (provided) => ({ ...provided, height: \"29px\" }),\n valueContainer: (provided) => ({ ...provided, padding: \"0 0 0 8px\" }),\n\n placeholder: (provided, { isDisabled }) => ({\n ...provided,\n color: isDisabled ? \"rgba(0, 0, 0, 0.05)\" : \"rgb(170, 170, 170)\",\n }),\n },\n\n timepicker: {\n input: (provided) => ({\n ...provided,\n color: \"var(--neutral-gray-75)\",\n }),\n menu: (provided) => ({\n ...provided,\n borderRadius: \"2px\",\n marginTop: \"4px\",\n boxShadow: \"0px 6px 20px 2px #33333329\",\n border: \"1px solid var(--neutral-gray-15)\",\n }),\n menuList: (provided) => ({\n ...provided,\n color: \"var(--neutral-gray-75)\",\n \"::-webkit-scrollbar\": {\n width: \"6px\",\n height: \"0px\",\n },\n \"::-webkit-scrollbar-track\": {\n background: \"transparent\",\n },\n \"::-webkit-scrollbar-thumb\": {\n background: \"var(--neutral-gray-30)\",\n borderRadius: \"20px\",\n },\n \"::-webkit-scrollbar-thumb:hover\": {\n background: \"var(--neutral-gray-50)\",\n },\n }),\n singleValue: (provided) => ({\n ...provided,\n color: \"var(--neutral-gray-75)\",\n }),\n control: (provided, { menuIsOpen, isFocused }) => {\n const focusBorderStyles = \"1px solid var(--text-input-border-active)\";\n\n return {\n ...provided,\n borderRadius: \"2px\",\n minHeight: \"35px\",\n backgroundColor: menuIsOpen ? \"rgb(255 255 255 / var(--tw-bg-opacity))\" : \"var(--text-input-bg)\",\n boxShadow: isFocused\n ? \"var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\"\n : \"none\",\n border: isFocused ? focusBorderStyles : \"1px solid var(--neutral-gray-15)\",\n ...(isFocused && {\n outline: \"2px solid transparent\",\n \"box-shadow\": \"rgb(255,255,255) 0 0 0 0, rgb(230, 237, 250) 0 0 0 1.5px, rgba(0,0,0,0) 0 0 0 0\",\n }),\n\n \":hover\": { border: isFocused ? focusBorderStyles : \"1px solid var(--text-input-border-hover)\" },\n };\n },\n\n dropdownIndicator: (provided) => ({\n ...provided,\n ...dropdownIndicatorSharedStyles,\n fill: \"var(--neutral-gray-75)\",\n padding: \"7px 5px 5px 0\",\n }),\n\n indicatorsContainer: (provided) => ({ ...provided, height: \"35px\" }),\n\n valueContainer: (provided) => ({ ...provided, padding: \"0 0 0 8px\" }),\n\n placeholder: (provided, { isDisabled }) => ({\n ...provided,\n color: isDisabled ? \"rgba(0, 0, 0, 0.05)\" : \"rgb(170, 170, 170)\",\n }),\n\n // TODO keep this for internal discussion\n // should we create a disabled option style here (first occurrence) or should we add a disabled style on sharedStyles? The latter makes more.\n //\n // option: (provided, state) => ({\n // ...sharedStyles.option(provided, state),\n // color: state.isDisabled ? \"var(--neutral-gray-30)\" : sharedStyles.option.textColor,\n // \":hover\": {\n // backgroundColor: state.isDisabled\n // ? \"transparent\"\n // : sharedStyles.option(provided, state)[\":hover\"].backgroundColor,\n // },\n // }),\n },\n};\n","/* eslint-disable react/jsx-props-no-spreading, react/prop-types */\nimport React from \"react\";\nimport Select, { components as SelectComponents } from \"react-select\";\nimport Creatable from \"react-select/creatable\";\nimport { makePropsCompatible } from \"./utils\";\nimport { sharedStyles, variantStyles } from \"./styles\";\n\nconst DownChevron = ({ menuIsOpen, ...props }) => (\n \n {children}\n
\n );\n};\nFormGroup.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n horizontal: PropTypes.bool,\n deprecatedOverrideMarginClasses: PropTypes.string,\n};\nFormGroup.defaultProps = {\n children: null,\n className: \"\",\n horizontal: false,\n deprecatedOverrideMarginClasses: \"\",\n};\n\nexport default FormGroup;\n","import React, { forwardRef } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport CLASSES from \"./classes.json\";\n\nconst {\n FORM_CONTROL_BASE_CLASSES,\n FORM_CONTROL_VARIANT_CLASSES,\n FORM_CONTROL_SIZE_CLASSES,\n FORM_CONTROL_PADDING_CLASSES,\n} = CLASSES;\n\nexport const FormControl = forwardRef(\n (\n { className, componentClass: Component, size, variant, deprecatedOverridePaddingClasses, ...props },\n ref,\n ) => {\n const classes = `\n ${FORM_CONTROL_BASE_CLASSES}\n ${FORM_CONTROL_VARIANT_CLASSES[variant]}\n ${FORM_CONTROL_SIZE_CLASSES[size]}\n ${deprecatedOverridePaddingClasses || FORM_CONTROL_PADDING_CLASSES[size]}\n ${className}\n `;\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n \n \n
\n );\n },\n);\n\nRadio.propTypes = {\n id: PropTypes.string,\n className: PropTypes.string,\n labelClassName: PropTypes.string,\n radioClassName: PropTypes.string,\n labelTextClassName: PropTypes.string,\n name: PropTypes.string.isRequired,\n inline: PropTypes.bool,\n deprecatedOverrideMarginClasses: PropTypes.string,\n deprecatedOverrideLabelPaddingClasses: PropTypes.string,\n deprecatedOverrideRadioMarginClasses: PropTypes.string,\n children: PropTypes.node,\n};\n\nRadio.defaultProps = {\n id: \"\",\n className: \"\",\n labelClassName: \"\",\n radioClassName: \"\",\n labelTextClassName: \"\",\n inline: false,\n deprecatedOverrideMarginClasses: \"\",\n deprecatedOverrideLabelPaddingClasses: \"\",\n deprecatedOverrideRadioMarginClasses: \"\",\n children: null,\n};\n\nexport default Radio;\n","import { useEffect, useState, useMemo } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport PropTypes from \"prop-types\";\n\nconst Portal = ({ children, portalId }) => {\n const [hasMounted, setHasMounted] = useState(false);\n\n const portalRoot = useMemo(() => {\n const portal = document.createElement(\"div\");\n portal.setAttribute(\"data-portal\", portalId);\n return portal;\n }, []);\n\n useEffect(() => {\n setHasMounted(true);\n }, []);\n\n useEffect(() => {\n const target = document.body;\n const existingPortal = document.querySelector(`[data-portal=\"${portalId}\"]`);\n\n if (!existingPortal) {\n target.appendChild(portalRoot);\n }\n }, [portalRoot]);\n\n if (!hasMounted) {\n return null;\n }\n\n return ReactDOM.createPortal(children, document.querySelector(`[data-portal=\"${portalId}\"]`));\n};\n\nPortal.propTypes = {\n children: PropTypes.node,\n portalId: PropTypes.string,\n};\n\nPortal.defaultProps = {\n children: null,\n portalId: \"common-portal\",\n};\n\nexport default Portal;\n","import React, { useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport const ModalContext = React.createContext({});\n\nconst ModalContextProvider = ({ show, onHide, size, variant, children }) => {\n const [isShown, setIsShown] = React.useState(show);\n\n const onModalHide = () => {\n setIsShown(false);\n if (onHide) onHide();\n };\n\n const onEscapeKeyPress = (e) => {\n if (e.key === \"Escape\") onModalHide();\n };\n\n useEffect(() => {\n if (!document) return;\n\n const addListener = () => {\n document.addEventListener(\"keyup\", onEscapeKeyPress);\n document.body.classList.add(\"tw-overflow-hidden\");\n };\n\n const removeListener = () => {\n document.removeEventListener(\"keyup\", onEscapeKeyPress);\n document.body.classList.remove(\"tw-overflow-hidden\");\n };\n\n if (isShown) {\n addListener();\n } else {\n removeListener();\n }\n\n // We only need to return a cleanup function once we actually attach the event listener\n // eslint-disable-next-line consistent-return\n return removeListener;\n }, [isShown]);\n\n useEffect(() => {\n setIsShown(show);\n }, [show]);\n\n return (\n \n {closeButton &&
\n );\n};\nModalHeader.propTypes = {\n closeButton: PropTypes.bool,\n className: PropTypes.string,\n variant: PropTypes.oneOf([\"classic\", \"modern\"]),\n deprecatedOverridePaddingClasses: PropTypes.string,\n children: PropTypes.node,\n};\nModalHeader.defaultProps = {\n closeButton: false,\n className: \"\",\n variant: null,\n deprecatedOverridePaddingClasses: \"\",\n children: null,\n};\n\nModalHeader.CloseButton = CloseButton;\n\nexport default ModalHeader;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport CLASSES from \"./classes.json\";\n\nconst { MODAL_FOOTER_CLASSES } = CLASSES;\n\nconst ModalFooter = ({ children, className, ...props }) => (\n \n {children}\n
\n);\nModalFooter.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n};\nModalFooter.defaultProps = {\n children: null,\n className: \"\",\n};\n\nexport default ModalFooter;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { ModalContext } from \"./ModalContext\";\nimport CLASSES from \"./classes.json\";\n\nconst { MODAL_TITLE_CLASSES } = CLASSES;\n\nconst ModalTitle = ({ children, className, variant: variantFromProps, ...props }) => {\n const { variant: variantFromContext } = React.useContext(ModalContext);\n const variant = variantFromProps || variantFromContext;\n\n const classes = `\n ${MODAL_TITLE_CLASSES.common}\n ${MODAL_TITLE_CLASSES[variant]}\n ${className}\n `;\n\n return (\n \n {children}\n
\n );\n};\nModalTitle.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n variant: PropTypes.oneOf([\"classic\", \"modern\"]),\n};\nModalTitle.defaultProps = {\n children: null,\n className: \"\",\n variant: null,\n};\n\nexport default ModalTitle;\n","export const MODAL_ANIMATION_DURATION_MS = 300;\n\nexport const containerAnimationStyles = (duration) => ({\n transition: `opacity ${duration}ms ease-in-out`,\n opacity: 0,\n});\n\nexport const modalAnimationStyles = (duration) => ({\n transition: `transform ${duration}ms ease-in-out`,\n transform: \"translateY(-100px)\",\n});\n\nexport const containerTransitionStyles = {\n entering: { opacity: 0 },\n entered: { opacity: 1 },\n exiting: { opacity: 0 },\n exited: { opacity: 0 },\n};\n\nexport const modalTransitionStyles = {\n entering: { transform: \"translateY(-100px)\" },\n entered: { transform: \"translateY(0px)\" },\n exiting: { transform: \"translateY(-100px)\" },\n exited: { transform: \"translateY(-100px)\" },\n};\n","import React, { useMemo, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Transition } from \"react-transition-group\";\nimport Portal from \"../Portal\";\nimport Backdrop from \"./Backdrop\";\nimport ModalContextProvider, { ModalContext } from \"./ModalContext\";\nimport ModalBody from \"./ModalBody\";\nimport ModalHeader from \"./ModalHeader\";\nimport ModalFooter from \"./ModalFooter\";\nimport ModalTitle from \"./ModalTitle\";\n\nimport {\n MODAL_ANIMATION_DURATION_MS,\n containerAnimationStyles,\n containerTransitionStyles,\n modalAnimationStyles,\n modalTransitionStyles,\n} from \"./animationStyles\";\nimport CLASSES from \"./classes.json\";\n\nconst { MODAL_CONTAINER_CLASSES, MODAL_DIALOG_CLASSES, MODAL_CONTENT_CLASSES, MODAL_SIZES } = CLASSES;\n\nconst dictKeyFromSizeString = (size) => {\n switch (size) {\n case \"sm\":\n return \"small\";\n case \"lg\":\n return \"large\";\n default:\n return size;\n }\n};\n\nconst getModalMarginClasses = (size) => MODAL_SIZES.MARGIN_CLASSES[dictKeyFromSizeString(size)];\n\nconst getModalWidthClasses = (size, overrideWidthClasses) => {\n if (overrideWidthClasses !== null) {\n return overrideWidthClasses;\n }\n\n return MODAL_SIZES.WIDTH_CLASSES[dictKeyFromSizeString(size)];\n};\n\nconst Modal = ({\n show = false,\n onHide,\n children,\n className,\n size,\n dialogClassName,\n contentClassName,\n variant,\n backdrop,\n deprecatedOverrideDialogWidthClasses,\n ...props\n}) => {\n const nodeRef = useRef(null);\n\n const shouldCloseOnClick = useMemo(() => backdrop !== \"static\", [backdrop]);\n\n const renderModalContainer = (context) => {\n const dialogSizeClasses = `\n ${getModalMarginClasses(context.size)}\n ${getModalWidthClasses(context.size, deprecatedOverrideDialogWidthClasses)}\n `;\n\n return (\n\n {children}\n
\n );\n};\n\nPanelHeading.propTypes = {\n className: PropTypes.string,\n deprecatedOverrideBorderClasses: PropTypes.string,\n children: PropTypes.node,\n};\n\nPanelHeading.defaultProps = {\n className: \"\",\n deprecatedOverrideBorderClasses: \"\",\n children: null,\n};\n\nexport default PanelHeading;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport CLASSES from \"./classes.json\";\n\nconst { PANEL_TITLE_CLASSES, PANEL_TITLE_TEXT_CLASSES } = CLASSES;\n\nconst PanelTitle = ({ className, deprecatedOverrideTextClasses, children, ...props }) => {\n const classes = `\n ${PANEL_TITLE_CLASSES}\n ${deprecatedOverrideTextClasses || PANEL_TITLE_TEXT_CLASSES}\n ${className}\n `;\n\n return (\n \n {children}\n
\n );\n};\n\nPanelTitle.propTypes = {\n className: PropTypes.string,\n deprecatedOverrideTextClasses: PropTypes.string,\n children: PropTypes.node,\n};\n\nPanelTitle.defaultProps = {\n className: \"\",\n deprecatedOverrideTextClasses: \"\",\n children: null,\n};\n\nexport default PanelTitle;\n","import React, { useContext } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { PanelContext } from \"./PanelContext\";\nimport CLASSES from \"./classes.json\";\n\nconst { PANEL_TRIGGER_CLASSES } = CLASSES;\n\nconst PanelTrigger = ({ className, id, children, ...props }) => {\n const { collapsed, toggleCollapsed } = useContext(PanelContext);\n\n const classes = `\n ${PANEL_TRIGGER_CLASSES}\n ${className}\n `;\n\n return (\n\n {children}\n
\n );\n};\n\nPanelBody.propTypes = {\n className: PropTypes.string,\n deprecatedOverridePaddingClasses: PropTypes.string,\n children: PropTypes.node,\n};\n\nPanelBody.defaultProps = {\n className: \"\",\n deprecatedOverridePaddingClasses: \"\",\n children: null,\n};\n\nexport default PanelBody;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport PanelContextProvider, { PanelContext } from \"./PanelContext\";\nimport PanelHeading from \"./PanelHeading\";\nimport PanelTitle from \"./PanelTitle\";\nimport PanelTrigger from \"./PanelTrigger\";\nimport PanelCollapse from \"./PanelCollapse\";\nimport PanelBody from \"./PanelBody\";\nimport CLASSES from \"./classes.json\";\n\nconst { PANEL_CONTAINER_CLASSES, PANEL_CONTAINER_MARGIN_CLASSES, PANEL_BORDER_CLASSES } = CLASSES;\n\nexport const Panel = ({\n className,\n variant,\n collapsed,\n children,\n deprecatedOverrideMarginClasses,\n ...props\n}) => {\n const classes = `\n ${PANEL_CONTAINER_CLASSES}\n ${deprecatedOverrideMarginClasses || PANEL_CONTAINER_MARGIN_CLASSES}\n ${PANEL_BORDER_CLASSES[variant] || PANEL_BORDER_CLASSES.fallback}\n ${className}\n `;\n\n return (\n \n {children}\n
\n )}\n \n {children}\n
\n );\n};\nRow.propTypes = {\n children: PropTypes.node,\n deprecatedOverrideMarginClasses: PropTypes.string,\n className: PropTypes.string,\n};\nRow.defaultProps = {\n children: null,\n deprecatedOverrideMarginClasses: null,\n className: \"\",\n};\n\nexport default Row;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst LABEL_CLASSES = `\n bs-print:tw-border bs-print:tw-border-solid bs-print:tw-border-black\n tw-inline tw-p-0 tw-text-10px tw-font-bold tw-leading-none\n tw-text-gray-base tw-text-center tw-whitespace-nowrap tw-align-baseline tw-rounded-0.25em\n tw-uppercase tw-temp-label-font-family\n`;\n\nconst LABEL_B_CLASSES =\n \"tw-uppercase tw-text-gray-base tw-text-10px tw-leading-none tw-temp-label-font-family\";\n\nexport const Label = ({ children, className, bold, htmlFor, ...props }) =>\n bold ? (\n \n ) : (\n \n );\nLabel.propTypes = {\n children: PropTypes.node,\n bold: PropTypes.bool,\n className: PropTypes.string,\n htmlFor: PropTypes.string,\n};\nLabel.defaultProps = {\n children: null,\n bold: false,\n className: \"\",\n htmlFor: null,\n};\n\nexport default Label;\n","import React, { useEffect, useState, useRef } from \"react\";\nimport { Transition } from \"react-transition-group\";\nimport PropTypes from \"prop-types\";\n\nconst defaultStyle = (duration) => ({\n transition: `opacity ${duration}ms ease-in-out`,\n opacity: 0,\n});\n\nconst transitionStyles = {\n entering: { opacity: 1 },\n entered: { opacity: 1 },\n exiting: { opacity: 0 },\n exited: { opacity: 0 },\n};\n\nconst clickOnTarget = (e, targetRef) =>\n targetRef && targetRef.current && targetRef.current.contains(e.target);\nconst clickOnContainer = (e, containerRef) => containerRef.current && containerRef.current.contains(e.target);\n\nexport const Overlay = React.forwardRef(\n ({ show, children, className, rootClose, onHide, duration, zIndex, ...props }, targetRef) => {\n const [showOverlay, setShowOverlay] = useState(show);\n const containerRef = useRef(null);\n\n const handleClick = (e) => {\n if (clickOnTarget(e, targetRef) || clickOnContainer(e, containerRef)) {\n return;\n }\n\n if (rootClose) {\n if (onHide) {\n onHide();\n }\n setShowOverlay(false);\n }\n };\n\n useEffect(() => {\n setShowOverlay(show);\n }, [show]);\n\n useEffect(() => {\n if (showOverlay) {\n document.addEventListener(\"mousedown\", handleClick);\n } else {\n document.removeEventListener(\"mousedown\", handleClick);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClick);\n };\n }, [showOverlay]);\n\n return (\n \n \n \n\n
\n\n {!!accountData.account_financial_template?.custom_account_expenses_attributes.length && (\n Office Commission
\n\n \n \n \n \n {formatValue(\n accountData.account_financial_template?.listing_commission,\n accountData.account_financial_template?.listing_commission_percentage,\n )}\n \n \n \n\n \n \n \n {formatValue(\n accountData.account_financial_template?.selling_commission,\n accountData.account_financial_template?.selling_commission_percentage,\n )}\n \n \n \n
\n
\n \n \n \n\n
\n )}\n Transaction Expenses
\n\n {accountData.account_financial_template.custom_account_expenses_attributes.map((expense, i) => {\n return (\n !expense._destroy && (\n
\n \n onValueUpdate(e)} />\n {this.state.inputSymbol}\n
\n\n {!this.state.disableFlip && (\n \n {\n this.setInputType(true);\n onRadioUpdate(e);\n }}\n >\n Percent\n \n\n {\n this.setInputType(false);\n onRadioUpdate(e);\n }}\n >\n Flat\n \n
\n )}\n {title}
}\n{text}
\n {onClose && (\n \n {this.state.isNotValid && \n
\n
\n \n This is standardized for all transactions.
\n \n![\"Drag](\"/assets/drag-icon.svg\"){kind=icon}
\n \n \n));\n\nexport default DragHandle;\n","import React from \"react\";\nimport { Radio, FormGroup, Input } from \"../../../shared/v1\";\n\nclass TransactionInput extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n isPercentage: !!props.isPercentage,\n disableFlip: !!props.disableFlip,\n inputSymbol: !!props.isPercentage ? \"%\" : \"$\",\n inputClass: !!props.isPercentage ? \"percentage-input\" : \"flat-input\",\n };\n }\n\n setInputType = (isPercentage) => {\n this.setState({\n ...this.state,\n isPercentage: isPercentage,\n inputSymbol: !!isPercentage ? \"%\" : \"$\",\n inputClass: !!isPercentage ? \"percentage-input\" : \"flat-input\",\n });\n };\n\n componentWillReceiveProps = (newProps, newContext) => {\n this.setInputType(!!newProps.isPercentage);\n };\n\n render() {\n const { label, value, name, onValueUpdate, onRadioUpdate, addClassradio1, addClassradio2 } = this.props;\n\n return (\n \n onValueUpdate(e)} />\n {this.state.inputSymbol}\n
\n\n {!this.state.disableFlip && (\n \n {\n this.setInputType(true);\n onRadioUpdate(e);\n }}\n >\n Percent\n \n\n {\n this.setInputType(false);\n onRadioUpdate(e);\n }}\n >\n Flat\n \n
\n )}\n \n \n {\n if (!!value.percentage) {\n if (e.target.value >= 0 && e.target.value <= 100) {\n value.value = e.target.value;\n setAccountData(accountData);\n }\n } else {\n value.value = e.target.value;\n setAccountData(accountData);\n }\n }}\n onRadioUpdate={(e) => {\n if (e.target.value === \"true\" && value.value > 100) {\n value.value = \"\";\n }\n value.percentage = e.target.value === \"true\";\n setAccountData(accountData);\n }}\n />\n \n\n \n \n\n {\n value.notes = e.target.value;\n setAccountData(accountData);\n }}\n />\n \n \n\n
\n
\n );\n});\n\nconst SortableContainer = sortableContainer(({ items, accountData, setAccountData }) => {\n return (\n \n {\n accountData.account_financial_template.custom_account_expenses_attributes[sortIndex]._destroy =\n \"1\";\n let position = 0;\n accountData.account_financial_template.custom_account_expenses_attributes.map((obj) => {\n if (obj._destroy) {\n if (obj.position) {\n delete obj[\"position\"];\n }\n } else {\n obj.position = position + 1;\n position = position + 1;\n }\n });\n setAccountData(accountData);\n }}\n >\n \n \n
\n \n
\n\n \n
\n\n Office Commission
\n\n \n {\n if (!!accountData.account_financial_template.listing_commission_percentage) {\n if (e.target.value >= 0 && e.target.value <= 100) {\n accountData.account_financial_template.listing_commission = e.target.value;\n setAccountData(accountData);\n }\n } else {\n accountData.account_financial_template.listing_commission = e.target.value;\n setAccountData(accountData);\n }\n }}\n onRadioUpdate={(e) => {\n if (\n e.target.value === \"true\" &&\n accountData.account_financial_template.listing_commission > 100\n ) {\n accountData.account_financial_template.listing_commission = \"\";\n }\n accountData.account_financial_template.listing_commission_percentage =\n e.target.value === \"true\";\n setAccountData(accountData);\n }}\n />\n \n\n {\n if (!!accountData.account_financial_template.selling_commission_percentage) {\n if (e.target.value >= 0 && e.target.value <= 100) {\n accountData.account_financial_template.selling_commission = e.target.value;\n setAccountData(accountData);\n }\n } else {\n accountData.account_financial_template.selling_commission = e.target.value;\n setAccountData(accountData);\n }\n }}\n onRadioUpdate={(e) => {\n if (\n e.target.value === \"true\" &&\n accountData.account_financial_template.selling_commission > 100\n ) {\n accountData.account_financial_template.selling_commission = \"\";\n }\n accountData.account_financial_template.selling_commission_percentage =\n e.target.value === \"true\";\n setAccountData(accountData);\n }}\n />\n \n
\n
\n \n
\n\n {isModalOpen && this.renderModal()}\n \n \n Add Expense\n \n
\n\n Transaction Expenses
\n\n
\n );\n};\n","const dimensionsDictionary = {\n \"extra-large\": \"tw-w-96px tw-h-96px\",\n large: \"tw-w-48px tw-h-48px\",\n medium: \"tw-w-36px tw-h-36px\",\n \"medium-small\": \"tw-w-32px tw-h-32px\",\n small: \"tw-w-24px tw-h-24px\",\n};\n\nexport const availableSizes = Object.keys(dimensionsDictionary);\n\nexport const dimensionsValue = (size) => dimensionsDictionary[size];\n\nconst fontDictionary = {\n \"extra-large\": \"tw-font-normal tw-text-28d\",\n large: \"tw-font-normal tw-text-18d\",\n medium: \"tw-font-semibold tw-text-14d\",\n \"medium-small\": \"tw-font-semibold tw-text-14d\",\n small: \"tw-font-semibold tw-text-12d\",\n};\n\nexport const fontValue = (size) => fontDictionary[size];\n\nexport const sizeBasedClasses = (size) =>\n size === \"none\" ? \"\" : `${dimensionsValue(size)} ${fontValue(size)}`;\n\nconst borderDictionary = {\n neutral: \"tw-border tw-border-solid tw-border-neutral-gray-15\",\n tinted: \"tw-border tw-border-solid tw-border-tinted-gray-50\",\n};\n\nexport const borderValue = (border) => (border === \"none\" ? \"\" : borderDictionary[border]);\n\nconst iconSizeDictionary = {\n \"extra-large\": \"xxxl\",\n large: \"xl\",\n medium: \"l\",\n \"medium-small\": \"l\",\n small: \"m\",\n};\n\nexport const iconSizeValue = (size) => iconSizeDictionary[size];\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { User as UserIcon } from \"../Icomoon\";\nimport { sizeBasedClasses, borderValue, iconSizeValue, availableSizes } from \"./Avatar.styles\";\nimport { getInitials } from \"../utils\";\n\nconst Avatar = ({ className, size, border, alt, src, ...otherProps }) => {\n const [imgSrc, setImgSrc] = useState(\"\");\n\n useEffect(() => {\n // Make sure that `src` is a valid image URL\n\n if (!src) {\n setImgSrc(\"\");\n\n return;\n }\n\n setImgSrc(\"\");\n\n const img = document.createElement(\"img\");\n img.onload = () => {\n setImgSrc(img.src);\n };\n img.src = src;\n }, [src]);\n\n let children;\n\n // The variant to render is decided based on the props:\n //\n // * `alt` and `src` are provided:\n // * `src` is a valid image URL: renders image\n // * `src` is not a valid image URL: renders text in `alt`\n // * `children` is provided:\n // * renders text in `children`\n // * nothing is provided:\n // * renders user icon\n if (alt && src && imgSrc) {\n children = (\n \n
\n\n Agent Expenses
\n\n {expenses.map((exp, j) =>\n exp.hasOwnProperty(\"royalty\") ? (\n
\n \n \n \n \n \n \n\n \n \n \n \n
\n );\n};\n","import React from \"react\";\nimport { Agent } from \"../Agent\";\nimport { connect } from \"react-redux\";\n\nconst mapStateToProps = (state) => ({\n agents: state.accountFinancial.accountData?.agent_expense_templates.agent_expenses,\n});\n\nexport const Agents = connect(\n mapStateToProps,\n null,\n)((props) => {\n const { agents } = props;\n\n return (\n \n {agents.map((agent, i) => (\n
\n );\n});\n","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\n\nconst Input = forwardRef((props, ref) => {\n const { icon, ...rest } = props;\n const iconType = icon ? : null\n \n return(\n \n \n {iconType}\n
\n )\n});\n\nInput.propTypes = {\n icon: PropTypes.string,\n}\n\nInput.defaultProps = {\n type: 'text',\n className: 'form-control input-sm'\n}\n\nexport default Input;\n","import React from 'react';\nimport Datetime from 'react-datetime';\nimport Input from './Input';\nimport moment from 'moment';\n\nexport const QUERY_DATE_FORMAT = \"YYYY-MM-DD\";\n\nclass DatePicker extends React.Component {\n handleDateOnChange = (e) => {\n const value = e;\n if(moment(value, ['MM-DD-YYYY', 'YYYY-MM-DD'], true).isValid()) {\n this.props.onChange(e);\n }\n }\n\n handleDateOnBlur= (e) => {\n const value = e;\n if(!moment(value, ['MM-DD-YYYY', 'YYYY-MM-DD'], true).isValid()) {\n this.props.onChange('');\n }\n }\n\n handleDateOnFocus= () => {\n if(!moment(this.props.value, ['MM-DD-YYYY', 'YYYY-MM-DD'], true).isValid()) {\n this.props.onChange(moment().format('YYYY-MM-DD'));\n }\n }\n\n showCalendar = (props, openCalendar) => {\n return(\n \n
\n );\n});\n","import React from \"react\";\nimport TransactionInput from \"../../shared/TransactionInput\";\nimport { Row, Col, FormGroup, TextArea } from \"../../../../shared/v1\";\nimport DragHandle from \"../../shared/DragHandle\";\nimport { connect } from \"react-redux\";\nimport * as actionCreators from \"../../../actions/account\";\n\nconst mapDispatchToProps = (dispatch) => ({\n setAgentExpenseData: (attr, data, agentPosition, expPosition) =>\n dispatch(actionCreators.setAgentExpenseData(attr, data, agentPosition, expPosition)),\n destroyAgentExpense: (agentPosition, expPosition) =>\n dispatch(actionCreators.destroyAgentExpense(agentPosition, expPosition)),\n});\n\nexport const ExpenseForm = connect(\n null,\n mapDispatchToProps,\n)((props) => {\n const { value, destroyAgentExpense, agentPosition, sortIndex: expPosition, setAgentExpenseData } = props;\n\n return (\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n {\n if (!!agent.brokerage_split_percentage) {\n if (e.target.value >= 0 && e.target.value <= 100) {\n setAgentBrokerageData(\"brokerage_split\", e.target.value, agentPosition);\n }\n } else {\n setAgentBrokerageData(\"brokerage_split\", e.target.value, agentPosition);\n }\n }}\n onRadioUpdate={(e) => {\n if (e.target.value === \"true\" && agent.brokerage_split > 100) {\n setAgentBrokerageData(\"brokerage_split\", \"\", agentPosition);\n }\n setAgentBrokerageData(\n \"brokerage_split_percentage\",\n e.target.value === \"true\",\n agentPosition,\n );\n }}\n />\n
\n \n \n {\n setAgentBrokerageData(\"brokerage_cap\", e.target.value, agentPosition);\n }}\n />\n
\n \n \n {\n const [month, day] = moment(e).format(\"MM-DD\").split(\"-\");\n setAgentBrokerageData(\"brokerage_cap_reset_day\", day, agentPosition);\n setAgentBrokerageData(\"brokerage_cap_reset_month\", month, agentPosition);\n }}\n />\n
\n \n {\n if (!!agent.royalty_percentage) {\n if (e.target.value >= 0 && e.target.value <= 100) {\n setAgentBrokerageData(\"royalty\", e.target.value, agentPosition);\n }\n } else {\n setAgentBrokerageData(\"royalty\", e.target.value, agentPosition);\n }\n }}\n onRadioUpdate={(e) => {\n if (e.target.value === \"true\" && agent.royalty > 100) {\n setAgentBrokerageData(\"royalty\", \"\", agentPosition);\n }\n setAgentBrokerageData(\"royalty_percentage\", e.target.value === \"true\", agentPosition);\n }}\n />\n
\n \n \n {\n setAgentBrokerageData(\"royalty_cap\", e.target.value, agentPosition);\n }}\n />\n
\n \n \n {\n const [month, day] = moment(e).format(\"MM-DD\").split(\"-\");\n setAgentBrokerageData(\"royalty_cap_reset_day\", day, agentPosition);\n setAgentBrokerageData(\"royalty_cap_reset_month\", month, agentPosition);\n }}\n />\n
\n \n
\n );\n});\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { sortableContainer, sortableElement, arrayMove } from \"react-sortable-hoc\";\nimport {\n openNewExpenseModal0,\n setAgentExpense0,\n setActiveAgentExpense0,\n setAccountData0,\n} from \"../../../actions/account\";\nimport { Panel, Button } from \"../../../../shared/v1\";\nimport { SplitForm } from \"../SplitForm\";\nimport { ExpenseForm } from \"../ExpenseForm\";\nimport { expensePointers } from \"./helpers\";\nimport { onAddExpense, onSortEnd } from \"./handlers\";\nimport { kebabCase } from \"lodash\";\nimport Avatar from \"../../../../shared/v2/Avatar\";\n\nconst SortableItem = sortableElement(({ value, sortIndex, accountData, setAccountData, agentPosition }) => {\n return value.hasOwnProperty(\"royalty\") ? (\n \n \n {\n if (!!value.percentage) {\n if (e.target.value >= 0 && e.target.value <= 100) {\n setAgentExpenseData(\"value\", e.target.value, agentPosition, value.position);\n }\n } else {\n setAgentExpenseData(\"value\", e.target.value, agentPosition, value.position);\n }\n }}\n onRadioUpdate={(e) => {\n if (e.target.value === \"true\" && value.value > 100) {\n setAgentExpenseData(\"value\", \"\", agentPosition, value.position);\n }\n setAgentExpenseData(\"percentage\", e.target.value === \"true\", agentPosition, value.position);\n }}\n />\n \n\n \n \n {\n setAgentExpenseData(\"notes\", e.target.value, agentPosition, value.position);\n }}\n />\n \n \n\n
\n
\n \n {\n destroyAgentExpense(agentPosition, value.position);\n }}\n data-cy=\"financial-settings-destroy-expense-anchor\"\n >\n \n \n
\n \n {items.map(\n (value, index) =>\n !value._destroy && (\n
\n );\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n openNewExpenseModal: () => dispatch(openNewExpenseModal0()),\n setAgentExpense: () => dispatch(setAgentExpense0()),\n setActiveAgentExpense: (agent) => dispatch(setActiveAgentExpense0(agent)),\n setAccountData: (accountData) => dispatch(setAccountData0(accountData)),\n});\n\nconst mapStateToProps = (state) => ({\n accountData: state.accountFinancial.accountData,\n});\n\nexport const AgentForm = connect(\n mapStateToProps,\n mapDispatchToProps,\n)((props) => {\n const { openNewExpenseModal, setAgentExpense, setActiveAgentExpense, setAccountData, agentPosition } =\n props;\n\n const agent = { ...props.agent };\n const avatar = /^http/.test(agent.avatar) ? agent.avatar : null;\n const accountData = { ...props.accountData };\n let expensesPositionPointer = expensePointers(agent);\n\n return (\n \n \n \n \n \n \n\n \n \n \n
\n );\n});\n","import { reAssignExpensePositions, createFinancialsSortedExpensesPointer } from \"../../shared/FinancialViewHelpers\";\n\nexport const expensePointers = agent => {\n reAssignExpensePositions(agent) \n return createFinancialsSortedExpensesPointer(agent);\n}\n","import { arrayMove } from \"react-sortable-hoc\";\n\nexport const onAddExpense = (agent, {openNewExpenseModal, setAgentExpense, setActiveAgentExpense}) => {\n openNewExpenseModal();\n setAgentExpense();\n setActiveAgentExpense(agent);\n}\n\nexport const onSortEnd = (indexes, agentPosition, expensesPositionPointer, accountData, setAccountData, agent) => {\n const { \n oldIndex, \n newIndex\n } = indexes; \n const newExpPointer = arrayMove([...expensesPositionPointer].filter(exp => !exp.hasOwnProperty('_destroy')), oldIndex, newIndex);\n\n let position = 1;\n for(let exp of newExpPointer){\n exp.position = position;\n position = position + 1;\n }\n accountData.agent_expense_templates.agent_expenses[agentPosition] = agent;\n\n setAccountData(accountData);\n};\n","import React from \"react\";\nimport { AgentForm } from \"../AgentForm\";\nimport { connect } from \"react-redux\";\n\nconst mapStateToProps = (state) => ({\n agents: state.accountFinancial.accountData?.agent_expense_templates.agent_expenses,\n});\n\nexport const AgentsForm = connect(\n mapStateToProps,\n null,\n)((props) => {\n const { agents } = props;\n\n return (\n \n \n onSortEnd(\n indexes,\n agentPosition,\n expensesPositionPointer,\n accountData,\n setAccountData,\n agent,\n )\n }\n accountData={accountData}\n agentPosition={agentPosition}\n useDragHandle\n />\n
\n \n \n \n {\n onAddExpense(agent, { openNewExpenseModal, setAgentExpense, setActiveAgentExpense });\n }}\n >\n Add Expense\n \n
\n Agent Expenses
\n\n {agents.map((agent, i) => (\n
\n );\n});\n","import React from \"react\";\nimport { kebabCase } from \"lodash\";\nimport { Col, Row, Clearfix, FormGroup, Panel } from \"../../../../shared/v1\";\nimport { Expense } from \"../Expense\";\nimport Tooltip from \"../../../../shared/v2/Tooltip\";\nimport { Info } from \"../../../../shared/v2/Icomoon\";\n\nconst Company = ({ accountData }) => {\n const { company_expense_template: company_expense, company_expense_types } = accountData;\n const { id, name, custom_agent_expenses_attributes: expenses } = company_expense;\n\n return (\n \n \n \n \n \n {name}\n \n \n \n\n \n \n \n
\n {!!company_expense?.custom_agent_expenses_attributes.length && (\n \n \n \n\n
\n Details
\n\n \n \n
\n }\n trigger={\n \n \n\n
\n )}\n \n \n \n \n \n );\n};\n\nexport default Company;\n","import React from \"react\";\nimport { kebabCase } from \"lodash\";\nimport { Col, Row, FormGroup, TextArea, Panel, Clearfix, Input } from \"../../../../shared/v1\";\nimport { sortableContainer, sortableElement, arrayMove } from \"react-sortable-hoc\";\nimport AddExpenseModal from \"../AddExpenseModal\";\nimport Tooltip from \"../../../../shared/v2/Tooltip\";\nimport { Info, Plus } from \"../../../../shared/v2/Icomoon\";\nimport DragHandle from \"../../shared/DragHandle\";\nimport TransactionInput from \"../../shared/TransactionInput\";\nimport Button from \"../../../../shared/v2/Button\";\nimport { companyOptions } from \"./helpers\";\n\nconst SortableItem = sortableElement(({ value, sortIndex, accountData, setAccountData }) => {\n const { name } = value;\n return (\n Company Expenses/Income
\n\n {expenses.map((expense, i) => {\n return (\n !expense._destroy && (\n
\n \n \n {\n if (!!value.percentage) {\n if (e.target.value >= 0 && e.target.value <= 100) {\n value.value = e.target.value;\n setAccountData(accountData);\n }\n } else {\n value.value = e.target.value;\n setAccountData(accountData);\n }\n }}\n onRadioUpdate={(e) => {\n if (e.target.value === \"true\" && value.value > 100) {\n value.value = \"\";\n }\n value.percentage = e.target.value === \"true\";\n setAccountData(accountData);\n }}\n />\n \n\n \n \n\n {\n value.notes = e.target.value;\n setAccountData(accountData);\n }}\n />\n \n \n\n
\n
\n );\n});\n\nconst SortableContainer = sortableContainer(({ items, accountData, setAccountData }) => {\n return (\n \n {\n accountData.company_expense_template.custom_agent_expenses_attributes[sortIndex]._destroy = \"1\";\n let position = 0;\n accountData.company_expense_template.custom_agent_expenses_attributes.map((obj) => {\n if (obj._destroy) {\n if (obj.position) {\n delete obj[\"position\"];\n }\n } else {\n obj.position = position + 1;\n position = position + 1;\n }\n });\n setAccountData(accountData);\n }}\n >\n \n \n
\n \n \n \n \n \n {name}\n \n \n \n\n \n \n \n
\n\n \n {\n accountData.company_expense_template.name = e.target.value;\n accountData.company_name = e.target.value;\n setAccountData(accountData);\n }}\n />\n \n \n \n
\n \n
\n\n Details
\n\n \n \n
\n }\n trigger={\n
\n \n \n \n \n {isModalOpen && (\n \n \n
\n\n Company Expenses/Income
\n\n {isShowAlert && (\n \n Successfully updated.\n \n )}\n {isShowDangerAlert &&
\n );\n }\n}\n\nexport default AccountFinancial;\n","import { connect } from 'react-redux';\nimport AccountFinancial from '../components/account/AccountFinancial';\nimport * as actions from '../actions/account';\n\n// Which part of the Redux global state does our component want to receive as props?\nconst mapStateToProps = (state) => ({ ...state.accountFinancial });\n\n// Don't forget to actually use connect!\n// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples\nexport default connect(mapStateToProps, actions)(AccountFinancial);\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst FieldError = ({ error, className }) => (\n \n \n
\n
\n\n {!isShowEdit && Transactions GCI
\n\n Set the default values to populate upon creating a new transaction. These figures can be\n adjusted in the transaction details if they become unique to the deal. The order of\n calculation for each expense is top to bottom and can be changed by dragging and dropping.\n
\n \n\n \n {isShowEdit && (\n {\n this.saveData();\n }}\n >\n SAVE\n \n )}\n\n {!isShowEdit && (\n {\n this.showEdit();\n }}\n >\n EDIT\n \n )}\n \n
\n \n \n
\n {!isShowEdit && Company Financials
\n\n
\n\n {!isShowEdit && Agent's Expenses
\n\n {error}\n
\n);\n\nFieldError.propTypes = {\n error: PropTypes.string.isRequired,\n className: PropTypes.string,\n};\n\nFieldError.defaultProps = {\n className: \"\",\n};\n\nexport default FieldError;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst FieldHelper = ({ helperText, isDisabled, className }) => (\n \n {label && (\n
\n );\n },\n);\n\nTextInput.defaultProps = {\n className: \"\",\n containerClassName: \"\",\n error: null,\n readOnly: false,\n multiline: false,\n disabled: false,\n isRequired: false,\n helperText: null,\n label: null,\n id: null,\n};\n\nTextInput.propTypes = {\n className: PropTypes.string,\n containerClassName: PropTypes.string,\n error: PropTypes.string,\n readOnly: PropTypes.bool,\n multiline: PropTypes.bool,\n disabled: PropTypes.bool,\n isRequired: PropTypes.bool,\n helperText: PropTypes.node,\n label: PropTypes.node,\n id: PropTypes.string,\n};\n\nexport default TextInput;\n","import React, { useState } from \"react\";\nimport TextInput from \"../v2/TextInput/TextInput\";\nimport { Search } from \"../v2/Icomoon\";\n\nfunction FieldSearchText({\n className = \"\",\n placeholder = \"\",\n onChange,\n value = \"\",\n flexStyle = \"tw-flex-1\",\n disabled = false,\n}) {\n const [isOnFocus, setIsOnFocus] = useState(false);\n\n return (\n \n setIsOnFocus(true)}\n onBlur={() => setIsOnFocus(false)}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n className={className}\n />\n\n
\n );\n}\n\nexport default FieldSearchText;\n","import { schemaGenerator } from \"../utils\";\n\nconst dictionary = {\n default: {\n default: [\n \"tw-text-neutral-gray-50\",\n \"tw-font-semibold\",\n \"tw-rounded-[30px]\",\n \"tw-border-[1.5px]\",\n \"tw-border-solid\",\n \"tw-border-transparent\",\n ],\n peerChecked: [\n \"peer-checked:tw-text-theme-text-toggle-color-checked\",\n \"peer-checked:tw-border-theme-text-toggle-border-checked\",\n ],\n peerFocusVisible: [\"peer-focus-visible:tw-outline-theme\"],\n },\n small: {\n default: [\"tw-font-12d\", \"tw-px-[12px]\", \"tw-py-[2px]\"],\n },\n medium: {\n default: [\"tw-font-14d\", \"tw-px-[16px]\", \"tw-py-[8px]\"],\n },\n};\n\nconst schema = schemaGenerator(dictionary);\n\nexport default schema;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport styleSchema from \"./TextToggle.styles\";\nimport { useGivenOrGeneratedId } from \"../../hookHelpers\";\n\nconst containerHeight = (size) => (size === \"small\" ? \"tw-h-[24px]\" : \"tw-h-[36px]\");\n\nconst TextToggleOption = ({ name, value, label, checked, size, labelClassName, ...otherProps }) => (\n \n);\n\nTextToggleOption.propTypes = {\n name: PropTypes.string,\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n labelClassName: PropTypes.string,\n size: PropTypes.oneOf([\"small\", \"medium\"]).isRequired,\n};\n\nTextToggleOption.defaultProps = {\n name: null,\n labelClassName: \"\",\n};\n\nconst TextToggle = ({\n name: nameFromProps,\n options,\n value,\n size,\n onChange,\n className,\n labelClassName,\n containerClassName,\n ...otherProps\n}) => {\n const name = useGivenOrGeneratedId(\"text-toggle\", nameFromProps);\n\n return (\n \n {currentUser.account.isAdmin && (\n setFilterSearchText(value)}\n value={filterSearchText}\n placeholder=\"Search by user name or email\"\n className=\"settings-users-search-text-filter-input\"\n flexStyle=\"tw-w-[360px]\"\n />\n
\n );\n}\n\nUsersFilter.propTypes = {\n setIsFilterActiveUsers: PropTypes.func.isRequired,\n isFilterActiveUsers: PropTypes.bool.isRequired,\n setFilterSearchText: PropTypes.func.isRequired,\n filterSearchText: PropTypes.string.isRequired,\n};\n\nexport default UsersFilter;\n","export const MODAL_ANIMATION_DURATION_MS = 400;\n\nexport const containerAnimationStyles = (duration) => ({\n transition: `opacity ${duration}ms ease-in-out`,\n});\n\nexport const modalAnimationStyles = (duration) => ({\n transition: `transform ${duration}ms ease-out`,\n});\n\nexport const containerTransitionStyles = {\n entering: { opacity: 1 },\n entered: { opacity: 1 },\n exiting: { opacity: 0 },\n exited: { opacity: 0 },\n};\n\nexport const modalTransitionStyles = {\n entering: { transform: \"translate3d(0, 0, 0)\" },\n entered: { transform: \"translate3d(0, 0, 0)\" },\n exiting: { transform: \"translate3d(0, 100vh, 0)\" },\n exited: { transform: \"translate3d(0, 100vh, 0)\" },\n};\n","import React, { useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport const ModalContext = React.createContext({});\n\nconst ModalContextProvider = ({ show, onHide, children, closeOnEscape }) => {\n const onModalHide = () => {\n if (onHide) onHide();\n };\n\n const onEscapeKeyPress = (e) => {\n if (closeOnEscape && e.key === \"Escape\") onModalHide();\n };\n\n useEffect(() => {\n if (!document) return;\n\n const addListener = () => {\n document.addEventListener(\"keyup\", onEscapeKeyPress);\n document.body.classList.add(\"tw-overflow-hidden\");\n };\n\n const removeListener = () => {\n document.removeEventListener(\"keyup\", onEscapeKeyPress);\n document.body.classList.remove(\"tw-overflow-hidden\");\n };\n\n if (show) {\n addListener();\n } else {\n removeListener();\n }\n\n // We only need to return a cleanup function once we actually attach the event listener\n // eslint-disable-next-line consistent-return\n return removeListener;\n }, [show]);\n\n return (\n onHide()} className={`${MODAL_BACKDROP_CLASSES} ${className}`}>\n {children}\n
\n \n );\n};\nBackdrop.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n};\nBackdrop.defaultProps = {\n children: null,\n className: \"\",\n};\n\nexport default Backdrop;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst ModalBody = ({ className, children, ...props }) => (\n <>\n \n \n {title ? (\n
\n {description && \n {title}\n
\n ) : (\n \n )}\n {closeButton && (\n\n
\n )}\n {description}
}\n {children}
\n);\n\nModalFooter.propTypes = {\n children: PropTypes.node,\n};\n\nModalFooter.defaultProps = {\n children: null,\n};\n\nexport default ModalFooter;\n","import React, { useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Transition } from \"react-transition-group\";\n\nimport {\n MODAL_ANIMATION_DURATION_MS,\n containerAnimationStyles,\n containerTransitionStyles,\n modalAnimationStyles,\n modalTransitionStyles,\n} from \"./animationStyles\";\n\nimport Portal from \"../../v1/Portal\";\nimport Backdrop from \"./Backdrop\";\nimport ModalContextProvider, { ModalContext } from \"./ModalContext\";\nimport ModalBody from \"./ModalBody\";\nimport ModalHeader from \"./ModalHeader\";\nimport ModalFooter from \"./ModalFooter\";\n\nimport {\n MODAL_CONTAINER_CLASSES,\n MODAL_DIALOG_CLASSES,\n MODAL_CONTENT_CLASSES,\n MODAL_CONTENT_WIDTH_CLASSES,\n availableContentSizes,\n} from \"./Modal.styles\";\n\n/**\n * @summary A Generic Modal interface, binding state, portal, listeners and allowing any content, including Header, Body and Footer.\n * @param {func} onHide - function for what happens clicking outside, cancel or close button.\n * @param {node} children - elements within the body\n * @param {string} className - arbitrary classNames for the outrmost component.\n * @param {string} contentClassName - classNames for the content wrapper.\n * @param {string} dialogClassName - classNames for the content wrapper's wrapper, mostly for layout.\n * */\n\nconst Modal = ({\n show,\n onHide,\n children,\n className,\n dialogClassName,\n contentClassName,\n contentSize,\n closeOnEscape,\n closeOnClickOutside,\n containerClassName,\n ...props\n}) => {\n const nodeRef = useRef(null);\n const renderModalContainer = (context) => (\n \n {error && (\n
\n );\n};\n\n/**\n * @summary Extends GenericModal to offer a medium sized modal for title, 1-liner, arbitrary body and up to 2 CTAs.\n * @param {string} title - the modal's title.\n * @param {(string|JSX.Element|object)} description - subtitle for the modal.\n * @param {object[]} errors - errors to show below the description, if any. Use the `errorForBanner` helper from `v2/ErrorBanner` to create elements for this array.\n * @param {string} primaryOption - content for the primary button.\n * @param {string} primaryProps - props to be passed to the primary button. Check Button for available props.\n * @param {func} onPrimary - function for what happens clicking on primary button.\n * @param {bool} isPrimaryLoading - helper to mark the primary button as loading and disable others.\n * @param {string} secondaryOption - content for the secondary button.\n * @param {string} secondaryProps - props to be passed to the secondary button. Check Text Button for available props.\n * @param {func} onSecondary - function for what happens clicking on secondary button.\n * @param {bool} isSecondaryLoading - helper to mark the secondary button as loading and disable others.\n * @param {string} cancelProps - props to be passed to the cancel button. Check Button for available props.\n * @param {func} onCancel - function for what happens clicking outside, cancel or close button.\n * @param {node} children - elements within the body\n * @param {bool} scroll - defines if component is scrollable.\n * @param {bool} show - defines if modal is visible.\n * @param {JSX.Element} header - the modal's header\n * @param {JSX.Element} footer - the modal's footer\n * @param {string} contentSize - defines the width of the modal's content.\n * @param {string} headerSize - defines the size of the header.\n * @param {bool} closeOnEscape - Close modal when press ESC\n * @param {bool} closeOnClickOutside - Close modal when click outside\n * */\nconst FloatingForm = ({\n title,\n description,\n errors,\n primaryOption,\n onPrimary,\n isPrimaryLoading,\n secondaryOption,\n onSecondary,\n isSecondaryLoading,\n cancelProps,\n onCancel,\n show,\n children,\n scroll,\n header,\n footer,\n footerError,\n contentSize,\n headerSize,\n closeOnEscape,\n closeOnClickOutside,\n modalBodyClassName,\n ...optionProps\n}) => {\n const { primaryProps, secondaryProps } = makeOptionPropsCompatible(optionProps);\n\n // Hack for the _very specific use case_ of using a Dropdown inside of a tiny\n // FloatingForm Modal: in that case, the scroll=\"false\" behavior is not\n // desirable (because the options menu becomes invisible), but neither is\n // scroll=\"true\", because then the user only has a _tiny_ window to scroll\n // through the options. In this case, we want the default behavior of letting\n // the contents overflow the modal, so this is an escape hatch for just that:\n // if an \"invalid\" value is passed in to the `scroll` prop, we don't mess with\n // the overflow property at all.\n const overflow = SCROLL_PROP_TO_CLASS_MAP[scroll] || \"\";\n\n return (\n \n {error}\n
\n )}\n \n \n Cancel\n \n
\n \n {secondaryOption && (\n \n {secondaryOption}\n \n )}\n \n {primaryOption}\n \n
\n \n {secondaryOption && (\n \n {secondaryOption}\n \n )}\n \n {primaryOption}\n \n
\n \n {errorMessages?.map((msg) =>\n typeof msg === \"object\" ? (\n
\n \n \n Email is already in use for an{\" \"}\n \n existing contact\n \n \n window.location.assign(`/people/${msg.existing_person_slug}`)}\n >\n View Contact\n \n
\n ) : (\n \n ),\n )}\n \n This user will not have access to the Brivity CRM but will have access to all other apps associated\n with their account. Contact support at 855-427-4848 if you want this user to have access to Brivity.\n
\n \n
\n \n);\n\nFolderTab.propTypes = {\n tabName: PropTypes.string.isRequired,\n isActive: PropTypes.bool.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n\nexport default FolderTab;\n","import { schemaGenerator } from \"../utils\";\n\nconst base = {\n default: [\n \"tw-font-regular\",\n \"tw-border-solid\",\n \"tw-border\",\n \"tw-rounded-[4px]\",\n \"tw-text-left\",\n \"tw-text-14px\",\n \"tw-px-12px\",\n \"tw-text-neutral-gray-75\",\n \"tw-bg-theme-text-input\",\n ],\n hover: [\"hover:tw-bg-theme-text-input-hover\"],\n focusWithin: [\n \"focus-within:tw-bg-white\",\n \"focus-within:hover:tw-bg-white\",\n \"focus-within:tw-outline-none\",\n \"focus-within:tw-ring-[1.5px]\",\n \"focus-within:tw-ring-theme-text-input-active\",\n ],\n disabled: [\"disabled:tw-text-neutral-gray-30\", \"disabled:tw-bg-theme-text-input-disabled\"],\n};\n\nconst dictionary = {\n regular: {\n default: [...base.default, \"tw-border-theme-text-input\"],\n hover: [...base.hover, \"hover:tw-border-theme-text-input-hover\"],\n focusWithin: [\n ...base.focusWithin,\n \"focus-within:tw-border-theme-text-input-active\",\n \"focus-within:hover:tw-border-theme-text-input-active\",\n \"focus-within:tw-ring-offset-0\",\n ],\n disabled: [...base.disabled, \"disabled:tw-border-theme-text-input-disabled\"],\n },\n error: {\n default: [...base.default, \"tw-border-semantic-red-25\"],\n hover: [...base.hover, \"hover:tw-border-semantic-red-50\"],\n focusWithin: [\n ...base.focusWithin,\n \"focus-within:tw-border-semantic-red-100\",\n \"focus-within:tw-ring-semantic-red-10\",\n \"tw-ring-offset-0\",\n ],\n disabled: [...base.disabled, \"disabled:tw-border-neutral-gray-15\"],\n },\n};\n\nconst schema = schemaGenerator(dictionary);\n\nexport default schema;\n\nconst spacingDictionary = {\n 0: \" \",\n 1: \"tw-space-x-[1px]\",\n 2: \"tw-space-x-[2px]\",\n 3: \"tw-space-x-[3px]\",\n 4: \"tw-space-x-[4px]\",\n 5: \"tw-space-x-[5px]\",\n 6: \"tw-space-x-[6px]\",\n 7: \"tw-space-x-[7px]\",\n 8: \"tw-space-x-[8px]\",\n 9: \"tw-space-x-[9px]\",\n 10: \"tw-space-x-[10px]\",\n 11: \"tw-space-x-[11px]\",\n 12: \"tw-space-x-[12px]\",\n 13: \"tw-space-x-[13px]\",\n 14: \"tw-space-x-[14px]\",\n};\n\nexport const spacingValue = (spacing) => spacingDictionary[spacing] || spacingDictionary[14];\n","import { schemaGenerator } from \"../utils\";\n\nconst dictionary = {\n regular: {\n default: [\"tw-bg-transparent\", \"tw-border-0\", \"tw-outline-none\", \"tw-placeholder-neutral-gray-50\"],\n focus: [\"focus:tw-outline-none\"],\n disabled: [\"disabled:tw-placeholder-neutral-gray-30\"],\n },\n};\n\nconst schema = schemaGenerator(dictionary);\n\nexport default schema;\n\nconst inputSizeDictionary = {\n min: \" \",\n full: \"tw-flex-grow\",\n};\n\nexport const inputSizeValue = (inputSize) => inputSizeDictionary[inputSize] || inputSizeDictionary.full;\n","import React, { useRef, useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport FieldLabel from \"../FieldLabel\";\nimport FieldError from \"../FieldError\";\nimport FieldHelper from \"../FieldHelper\";\n\nimport { range } from \"../../Utilities\";\nimport { useGivenOrGeneratedId } from \"../../hookHelpers\";\n\nimport styleSchema, { spacingValue } from \"./TextComboInput.styles\";\nimport inputStyleSchema, { inputSizeValue } from \"./Input.styles\";\n\nconst schemaBasedClasses = (schemaName) => styleSchema[schemaName] || styleSchema.default;\n\nconst TextComboInput = ({\n id: idFromProps,\n leading,\n trailing,\n disabled,\n error,\n inputRef,\n onFieldClick,\n onFocusIn,\n onFocusOut,\n spacing,\n inputSize,\n className,\n labelClassName,\n containerClassName,\n isRequired,\n label,\n helperText,\n toolTipInfoContent,\n toolTipPlacement,\n ...otherProps\n}) => {\n const fieldsetRef = useRef();\n const inputElementRef = inputRef || useRef();\n const fieldLabelRef = useRef(null);\n\n const [enableHoverOnInput, setEnableHoverOnInput] = useState(false);\n\n const id = useGivenOrGeneratedId(\"text-combo-input\", idFromProps);\n\n const classes = `\n ${schemaBasedClasses(error ? \"error\" : \"regular\")}\n ${className}\n `;\n\n const handleOnMouseDown = (e) => {\n if (!fieldsetRef.current || !inputElementRef.current) {\n return;\n }\n\n // Allow the input element handle the mousedown event\n if (inputElementRef.current === e.target) {\n return;\n }\n\n // Prevent this mouse down event to continue since the current target is the fieldset element\n if (fieldsetRef.current === e.currentTarget) {\n e.preventDefault();\n }\n };\n\n const handleOnBlur = (e) => {\n const { currentTarget } = e;\n\n // Give browser time to focus the next element\n window.requestAnimationFrame(() => {\n // Check if the new focused element is a child of the original container\n if (!currentTarget.contains(document.activeElement)) {\n onFocusOut();\n }\n });\n };\n\n // In this specific case, the focused border style needs to be applied on the fieldset element instead of the input,\n // and as such, hovering over the label doesn't automatically apply the hover style on it as it does on the other components,\n // so we need this workaround for consistency\n useEffect(() => {\n const fieldLabelEl = fieldLabelRef.current;\n\n if (!fieldLabelEl) return;\n\n fieldLabelEl.addEventListener(\"mouseover\", () => {\n setEnableHoverOnInput(true);\n });\n\n fieldLabelEl.addEventListener(\"mouseout\", () => {\n setEnableHoverOnInput(false);\n });\n }, [fieldLabelRef]);\n\n return (\n {tabName}
\n \n setShowDropdown(true)}\n >\n setShowDropdown(false)}\n placement=\"bottom\"\n container={target.current}\n target={target.current}\n >\n \n handlePondSelect(pond)}\n />\n ))}\n\n {filteredAssignableAgents.length > 0 && (\n handleAgentSelect(agent)}\n />\n ))}\n
\n \n \n );\n};\n\nexport default FormAgentOrPondSelect;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport ToolTip from \"../../shared/v2/Tooltip\";\nimport { Info } from \"../v2/Icomoon\";\n\nfunction FieldLabelV1({ label, required, toolTipInfoContent, toolTipPlacement, title }) {\n return (\n \n {leadPondModel ? leadPondModel.name : primaryAgentModel ? primaryAgentModel.name : placeholder}\n
\n \n
\n\n {filteredAssignablePonds.length > 0 && (\n Pond
\n )}\n {filteredAssignablePonds?.map((pond) => (\nTeam
\n )}\n {filteredAssignableAgents?.map((agent) => (\n\n \n {label}\n
\n {required && *
}\n {toolTipInfoContent && (\n \n
\n {labelPlacement === \"end\" && textContent}\n \n );\n};\n\nToggle.propTypes = {\n id: PropTypes.string,\n checked: PropTypes.bool.isRequired,\n disabled: PropTypes.bool,\n labelClassName: PropTypes.string,\n textClassName: PropTypes.string,\n onChange: PropTypes.func,\n size: PropTypes.oneOf([\"small\", \"large\"]),\n dotClassName: PropTypes.string,\n trackClassName: PropTypes.string,\n text: PropTypes.string,\n labelPlacement: PropTypes.oneOf([\"start\", \"end\"]),\n};\n\nToggle.defaultProps = {\n id: null,\n disabled: false,\n labelClassName: \"\",\n textClassName: \"\",\n onChange: null,\n size: \"small\",\n dotClassName: \"\",\n trackClassName: \"\",\n text: \"\",\n labelPlacement: \"end\",\n};\n\nexport default Toggle;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Upload, User } from \"../v2/Icomoon\";\nimport Avatar from \"../v2/Avatar\";\n\nfunction UserImageButton({ imgUrl, firstName, lastName, onClick }) {\n const [isOnHover, setIsOnHover] = useState(false);\n return (\n 
\n ) : (\n <>\n {isOnHover ? (\n \n uploadInput.current.click()}\n firstName={person?.firstName}\n lastName={person?.lastName}\n />\n {!person?.avatarUrl || person?.avatarUrl.includes(\"user-default.svg\") ? (\n onUpdate(e.target.files?.[0])}\n style={{ display: \"none\" }}\n ref={uploadInput}\n />\n
\n \n );\n}\n\nUploadPersonAvatarField.propTypes = {\n person: PropTypes.shape().isRequired,\n onUpdate: PropTypes.func.isRequired,\n onRemove: PropTypes.func.isRequired,\n};\n\nexport default UploadPersonAvatarField;\n","import schemaGenerator from \"../v2/utils\";\n\nconst base = {\n default: [\n \"tw-font-regular\",\n \"tw-border-solid\",\n \"tw-border\",\n \"tw-rounded-[2px]\",\n \"tw-text-left\",\n \"tw-text-14px\",\n \"tw-placeholder-[#999999]\",\n \"tw-px-14px\",\n \"tw-py-8px\",\n \"tw-text-neutral-gray-75\",\n \"tw-bg-theme-text-input\",\n \"tw-w-full\",\n ],\n hover: [\"hover:tw-bg-theme-text-input-hover\"],\n focus: [\n \"focus:tw-bg-white\",\n \"focus:tw-outline-none\",\n \"focus:tw-ring-[1.5px]\",\n \"focus:tw-ring-theme-text-input-active\",\n ],\n disabled: [\"disabled:tw-text-neutral-gray-15\", \"disabled:tw-bg-theme-text-input-disabled\"],\n};\n\nconst dictionary = {\n regular: {\n default: [...base.default, \"tw-border-theme-text-input\"],\n hover: [...base.hover, \"hover:tw-border-theme-text-input-hover\"],\n focus: [...base.focus, \"focus:tw-border-theme-text-input-active\", \"tw-ring-offset-0\"],\n disabled: [...base.disabled, \"disabled:tw-border-theme-text-input-disabled\"],\n },\n error: {\n default: [...base.default, \"tw-border-semantic-red-25\"],\n hover: [...base.hover, \"hover:tw-border-semantic-red-50\"],\n focus: [\"focus:tw-border-semantic-red-100\", \"focus:tw-ring-semantic-red-10\", \"tw-ring-offset-0\"],\n disabled: [...base.disabled, \"disabled:tw-border-neutral-gray-15\"],\n },\n disabled: {\n default: [...base.default, \"tw-border-theme-text-input-disabled\", \"tw-cursor-default\"],\n disabled: [...base.disabled, \"disabled:tw-border-theme-text-input-disabled\"],\n },\n};\n\nconst styleSchema = schemaGenerator(dictionary);\n\nexport default styleSchema;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport FieldError from \"@shared/v2/FieldError\";\nimport FieldLabelV1 from \"./FieldLabelV1\";\nimport styleSchema from \"./FieldStyle\";\nimport { CaretUp, CaretDown } from \"../v2/Icomoon\";\nimport IconButton from \"../v2/IconButton\";\nconst schemaBasedClasses = (schemaName) => styleSchema[schemaName] || styleSchema.default;\n\nfunction FieldSelect({\n placeholder,\n options,\n value,\n onChange,\n className,\n disabled,\n label,\n required,\n flexStyle,\n defaultValue,\n toolTipPlacement,\n toolTipInfoContent,\n isInputSearchable,\n isDropdownSearchable,\n dropdownWidth,\n error,\n isAddNotFound,\n fieldSelect,\n ...otherProps\n}) {\n let schemaKey = disabled ? \"disabled\" : \"regular\";\n schemaKey = error ? \"error\" : schemaKey;\n const classes = `${schemaBasedClasses(schemaKey)} ${className}`;\n\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const [searchText, setSearchText] = useState(\"\");\n\n const [filteredSearchOption, setFilteredSearchOption] = useState(options);\n\n const ref = useRef();\n useEffect(() => {\n const checkIfClickedOutside = (e) => {\n if (isDropdownOpen && ref.current && !ref.current.contains(e.target)) {\n setIsDropdownOpen(false);\n\n if (isDropdownSearchable) {\n setSearchText(\"\");\n }\n\n if (isInputSearchable)\n setSearchText(() => {\n const targetValue = options.find((option) => option.value === value);\n return targetValue ? targetValue.label : \"\";\n });\n }\n };\n document.addEventListener(\"mousedown\", checkIfClickedOutside);\n\n return () => {\n document.removeEventListener(\"mousedown\", checkIfClickedOutside);\n };\n }, [isDropdownOpen]);\n\n useEffect(() => {\n if (isInputSearchable)\n setSearchText(() => {\n const targetValue = options.find((option) => option.value === value);\n return targetValue ? targetValue.label : \"\";\n });\n }, [value]);\n\n useEffect(() => {\n if (defaultValue && !value) {\n onChange(defaultValue);\n }\n }, []);\n\n useEffect(() => {\n if (searchText.length > 0) {\n setFilteredSearchOption(() => {\n const optionsFilteredWithInput = options.filter((option) =>\n `${option.label}${option.description ? ` (${option.description})` : \"\"}`\n .toLowerCase()\n .includes(searchText.toLowerCase()),\n );\n return optionsFilteredWithInput;\n });\n } else {\n setFilteredSearchOption(options);\n }\n }, [searchText, options]);\n\n return (\n \n \n
\n ) : (\n \n \n\n \n
\n )}\n \n {label && \n {isDropdownSearchable && (\n {\n if (option.value === value && isInputSearchable) {\n setSearchText(option.label);\n } else {\n onChange(fieldSelect ? option : option.value);\n if (isDropdownSearchable) setSearchText(\"\");\n }\n setIsDropdownOpen(false);\n }}\n data-cy={`option_${option.label}`}\n >\n {`${option.label}${option.description ? ` (${option.description})` : \"\"}`}\n
\n );\n })\n )}\n \n )}\n \n \n );\n}\n\nFieldSelect.propTypes = {\n placeholder: PropTypes.string,\n label: PropTypes.string,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n description: PropTypes.string,\n header: PropTypes.string,\n }),\n ),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n required: PropTypes.bool,\n flexStyle: PropTypes.string,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n isInputSearchable: PropTypes.bool,\n isDropdownSearchable: PropTypes.bool,\n onChange: PropTypes.func.isRequired,\n dropdownWidth: PropTypes.string,\n error: PropTypes.string,\n};\n\nFieldSelect.defaultProps = {\n placeholder: \"Select\",\n label: \"\",\n options: [\n { label: \"Option1\", value: \"Option1\" },\n { label: \"Option2\", value: \"Option2\" },\n ],\n value: \"\",\n required: false,\n flexStyle: \"tw-flex-1\",\n className: \"\",\n disabled: false,\n isInputSearchable: false,\n isDropdownSearchable: false,\n dropdownWidth: \"\",\n error: \"\",\n};\n\nexport default FieldSelect;\n","import { bodyS } from \"@shared/styles\";\n\nconst STYLES = {\n containerView: \"tw-flex tw-flex-col tw-gap-[24px]\",\n borderHr: \"tw-w-full tw-border-gray-10 tw-m-0\",\n inputDescription: `${bodyS} tw-mt-4`,\n defaultLink: \"tw-w-[254px]\",\n};\n\nexport default STYLES;\n\nexport const { containerView, borderHr, inputDescription, defaultLink } = STYLES;\n","import { useSelector } from \"react-redux\";\n\nexport const useContactFormOptions = () => useSelector((state) => state.contactsReducer.formOptions);\nexport const useContactPerson = () => useSelector((state) => state.contactsReducer.person);\nexport const useShowPhoneContext = () => useSelector((state) => state.contactsReducer.showPhoneContext);\n","import React, { useEffect, useMemo } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport TextComboInput from \"@shared/v2/TextComboInput\";\nimport { headline2 } from \"@shared/styles\";\nimport FormAgentOrPondSelect from \"@shared/FormAgentOrPondSelect\";\nimport FieldLabelV1 from \"../../shared/UtilsV1/FieldLabelV1\";\nimport Toggle from \"../../shared/v2/Toggle\";\nimport UploadPersonAvatarField from \"../UploadPersonAvatarField\";\nimport FieldSelect from \"../../shared/UtilsV1/FieldSelect\";\nimport { containerView } from \"./styles\";\nimport { setPersonValue, uploadAvatar } from \"../../reducers/contactsReducer\";\nimport { useFeatureFlags } from \"../../reducers/layoutReducer/selectors\";\nimport { useContactFormOptions, useContactPerson } from \"../../reducers/contactsReducer/selectors\";\n\nconst INTENT_OPTIONS = [\n { label: \"N/A\", value: \"n/a\" },\n { label: \"Buyer\", value: \"buyer\" },\n { label: \"Seller\", value: \"seller\" },\n];\n\nfunction GeneralView({ modalType }) {\n const dispatch = useDispatch();\n const formOptions = useContactFormOptions();\n const person = useContactPerson();\n const stageOptions = useMemo(\n () => [...(formOptions?.leadStageOptions || []), ...(formOptions?.candidateStageOptions || [])],\n [formOptions],\n );\n\n const featureFlags = useFeatureFlags();\n\n useEffect(() => {\n if (person.id) return;\n if (person.typeName === \"lead\") {\n dispatch(setPersonValue({ key: \"stage\", value: \"New lead\" }));\n dispatch(setPersonValue({ key: \"stageType\", value: \"lead\" }));\n } else {\n dispatch(setPersonValue({ key: \"stage\", value: \"\" }));\n dispatch(setPersonValue({ key: \"stageType\", value: \"\" }));\n }\n }, [person.typeName]);\n\n return (\n \n {isInputSearchable && (\n {\n setSearchText(e.target.value);\n }}\n onFocus={() => {\n setIsDropdownOpen(true);\n }}\n {...otherProps}\n />\n )}\n\n {!isInputSearchable && (\n option.value === value)\n ? options.find((option) => option.value === value)?.label\n : placeholder\n }\n className={`${classes} ${!value ? \"tw-text-neutral-gray-50\" : \"\"}`}\n onClick={() => {\n setIsDropdownOpen((prev) => !prev);\n }}\n disabled={disabled}\n {...otherProps}\n aria-hidden\n />\n )}\n {error && \n {isDropdownOpen ?
\n\n {isDropdownOpen && (\n \n setSearchText(e.target.value)}\n placeholder=\"Search\"\n className={`${classes} tw-h-[24px]`}\n data-cy={`${label}_search_input`}\n disabled={disabled}\n />\n
\n )}\n {filteredSearchOption.length <= 0 ? (\n isAddNotFound ? (\n \n {\n onChange(searchText);\n setSearchText(\"\");\n setIsDropdownOpen(false);\n }}\n >\n \n \n
\n ) : (\n Create tag \"{searchText}\"
\n no matches
\n )\n ) : (\n filteredSearchOption.map((option) => {\n return (\n \n
\n )}\n General
\n \n dispatch(setPersonValue({ key: \"firstName\", value: e.target.value }))}\n data-cy=\"first_name\"\n />\n\n dispatch(setPersonValue({ key: \"lastName\", value: e.target.value }))}\n data-cy=\"last_name\"\n />\n\n {modalType === \"lead\" && (\n dispatch(setPersonValue({ key: \"typeName\", value }))}\n value={person.typeName}\n />\n )}\n\n dispatch(setPersonValue({ key: \"sourceId\", value }))}\n required={modalType === \"lead\"}\n isInputSearchable\n />\n\n {modalType === \"lead\" && person.typeName === \"lead\" && (\n {\n dispatch(setPersonValue({ key: \"stage\", value: option.value }));\n dispatch(setPersonValue({ key: \"stageType\", value: option.type }));\n }}\n value={person.stage}\n data-cy=\"stage_field\"\n />\n )}\n\n {modalType === \"lead\" && (\n dispatch(setPersonValue({ key: \"status\", value }))}\n value={person.status}\n />\n )}\n\n dispatch(setPersonValue({ key: \"leadType\", value }))}\n value={person.leadType}\n />\n {person.typeName === \"lead\" && }\n
\n\n {modalType === \"lead\" && !person.id && (\n \n {\n dispatch(setPersonValue({ key: \"leadPondId\", value: params.lead_pond }));\n dispatch(setPersonValue({ key: \"primaryAgentId\", value: params.primary_agent }));\n }}\n />\n
\n )}\n\n {person.id && (\n \n dispatch(uploadAvatar({ file, personId: person.id }))}\n onRemove={() => dispatch(setPersonValue({ key: \"avatarUrl\", value: null }))}\n />\n
\n \n \n \n For an ideal experience on your Brivity website, please upload an image that is cropped\n square and is under 1MB in size. 5MB limit.\n
\n }\n toolTipPlacement=\"top\"\n />\n \n dispatch(setPersonValue({ key: \"isLead\", value: !person.isLead }))}\n text=\"Show in Leads Index\"\n />\n {featureFlags.userUpdate && (\n // TODO: this is currently hardcoded, but probably shouldn't be?\n <>\n \n dispatch(\n setPersonValue({\n key: \"loginUser.showOnWebsiteRoster\",\n value: !person.loginUserAttributes?.showOnWebsiteRoster,\n }),\n )\n }\n text=\"Display on Website Roster\"\n />\n \n dispatch(\n setPersonValue({\n key: \"loginUser.showAgentProfilePage\",\n value: !person.loginUserAttributes?.showAgentProfilePage,\n }),\n )\n }\n text=\"Website Profile Page\"\n />\n \n )}\n
\n \n );\n}\n\nGeneralView.propTypes = { modalType: PropTypes.string.isRequired };\n\nexport default GeneralView;\n","import PropTypes from \"prop-types\";\n\nexport const extractData = (componentProps) => {\n if (componentProps.data) {\n return componentProps.data;\n }\n\n const selectedValues = componentProps.getValue();\n\n // Automatically change the data type based on whether multiple values are enabled or not\n return componentProps.isMulti ? selectedValues || [] : selectedValues[0] || {};\n};\n\nexport const optionShape = PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n meta: PropTypes.object,\n});\n\nexport const groupedOptionShape = PropTypes.shape({\n label: PropTypes.string.isRequired,\n options: PropTypes.arrayOf(optionShape).isRequired,\n});\n\nexport const option = PropTypes.oneOfType([optionShape, groupedOptionShape]);\n\nexport const data = PropTypes.oneOfType([optionShape, PropTypes.arrayOf(optionShape), PropTypes.shape({})]);\n\nexport const customPropTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n componentProps: PropTypes.object,\n data,\n children: PropTypes.node,\n};\n\nexport const customDefaultProps = {\n componentProps: {},\n data: null,\n children: null,\n};\n","/* eslint-disable no-param-reassign */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { extractData } from \"../utils\";\n\nconst SelectContainer = ({ children, ...componentProps }) => {\n const Component = componentProps.selectProps?.custom?.SelectContainer;\n\n if (!Component) {\n return null;\n }\n\n return (\n \n \n \n {virtualItems.map(({ key, index }) => (\n
\n \n \n );\n};\n\nVirtualMenuList.propTypes = {\n children: PropTypes.node,\n};\n\nVirtualMenuList.defaultProps = {\n children: null,\n};\n\nexport default VirtualMenuList;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { ClearIndicator } from \"./custom-wrappers\";\nimport { optionShape } from \"./utils\";\n\n// This component essentially replicates the native react-select behavior,\n// so it's basically a copy-paste from react-select,\n// adapted so that the components render correctly when called manually\n\nconst DropdownMultiValue = ({ selectRef, optionKey, optionIndex, option, className, removablePrefix }) => {\n const components = selectRef.current?.getComponents?.();\n\n const handleMouseDown = (e) => {\n e.preventDefault();\n };\n\n const removeValue = () => {\n const selectValue = selectRef.current?.state?.selectValue ?? [];\n const newSelectValue = selectValue.filter((currentOption) => currentOption.value !== option.value);\n\n selectRef.current?.props?.onChange?.(newSelectValue, {\n action: \"remove-value\",\n removedValue: option,\n });\n\n if (!selectRef.current?.props?.blurInputOnSelect) {\n selectRef.current?.focusInput?.();\n }\n };\n\n const handleKeyDown = (e) => {\n if (e.key === \"Backspace\" && selectRef.current?.props?.backspaceRemovesValue) {\n removeValue();\n }\n };\n\n return components.MultiValue({\n ...(selectRef.current?.commonProps ?? {}),\n components: {\n Container: components.MultiValueContainer,\n Label: components.MultiValueLabel,\n Remove: components.MultiValueRemove,\n },\n isFocused: false,\n isDisabled: selectRef.current?.props?.isDisabled ?? false,\n key: optionKey,\n index: optionIndex,\n removeProps: {\n // For accessibility\n tabIndex: 0,\n\n onMouseDown: handleMouseDown,\n onClick: removeValue,\n onTouchEnd: removeValue,\n onKeyDown: handleKeyDown,\n },\n data: option,\n children:\n `${removablePrefix}${selectRef.current?.formatOptionLabel?.(option, \"value\")}` ??\n `${removablePrefix}${option.label}`,\n className,\n });\n};\n\nDropdownMultiValue.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n selectRef: PropTypes.object.isRequired,\n optionKey: PropTypes.string.isRequired,\n optionIndex: PropTypes.number.isRequired,\n option: optionShape.isRequired,\n removablePrefix: PropTypes.string,\n};\n\nDropdownMultiValue.defaultProps = {\n // eslint-disable-next-line react/forbid-prop-types\n selectRef: PropTypes.object.isRequired,\n optionKey: PropTypes.string.isRequired,\n optionIndex: PropTypes.number.isRequired,\n option: optionShape.isRequired,\n removablePrefix: \"\",\n};\n\nconst DropdownClearIndicator = ({ selectRef }) => {\n const isClearable = selectRef.current?.isClearable?.() ?? false;\n const hasValue = selectRef.current?.hasValue?.() ?? false;\n const { isDisabled, isLoading } = selectRef.current?.props ?? {\n isDisabled: false,\n isLoading: false,\n };\n\n if (!isClearable || isDisabled || !hasValue || isLoading) {\n return null;\n }\n\n const { commonProps } = selectRef.current;\n const { isFocused } = selectRef.current?.state ?? { isFocused: false };\n\n const innerProps = {\n onMouseDown: selectRef.current?.onClearIndicatorMouseDown,\n onTouchEnd: selectRef.current?.onClearIndicatorTouchEnd,\n \"aria-hidden\": \"true\",\n };\n\n return (\n \n {children[index] || null}\n
\n ))}\n \n {label && (\n
\n {helperText && (\n \n {leading}\n \n
\n {trailing}\n \n {label && {\n onChange(e.target.value);\n }}\n disabled={disabled}\n {...otherProps}\n />\n
\n );\n}\nFieldTextV1.propTypes = {\n onChange: PropTypes.func,\n disabled: PropTypes.bool,\n className: PropTypes.bool,\n label: PropTypes.string,\n value: PropTypes.string,\n flexStyle: PropTypes.string,\n toolTipInfoContent: PropTypes.element,\n toolTipPlacement: PropTypes.string,\n};\n\nFieldTextV1.defaultProps = {\n onChange: () => {},\n required: false,\n disabled: false,\n label: \"\",\n value: \"\",\n flexStyle: \"tw-flex-1\",\n toolTipInfoContent: null,\n toolTipPlacement: null,\n};\nexport default FieldTextV1;\n","import React from \"react\";\n\nexport default function Radio({ checked = false, disabled = false }) {\n return (\n \n {label &&
\n \n );\n};\n\nFieldRadioV1.propTypes = {\n toolTipPlacement: PropTypes.string,\n toolTipInfoContent: PropTypes.element,\n label: PropTypes.string,\n value: PropTypes.string,\n defaultValue: PropTypes.string,\n required: PropTypes.bool,\n flexStyle: PropTypes.string,\n disabled: PropTypes.bool,\n options: PropTypes.arrayOf(PropTypes.string),\n onChange: PropTypes.func,\n};\n\nFieldRadioV1.defaultProps = {\n toolTipInfoContent: null,\n toolTipPlacement: \"\",\n label: \"\",\n value: \"\",\n defaultValue: \"\",\n flexStyle: \"tw-flex-1\",\n required: false,\n disabled: false,\n options: [\"Option1\", \"Option2\"],\n onChange: () => {},\n};\n\nexport default FieldRadioV1;\n","export const UIMODE = {\n DAY: \"DAY\",\n MONTH: \"MONTH\",\n};\nexport const MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\nexport const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];\nexport const VALID_DATE_FORMATS = [\"YYYY/MM/DD\", \"MM/DD/YYYY\", \"YYYY-MM-DD\", \"MM-DD-YYYY\", \"MM/DD\", \"DD/MM\"];\nexport const DATE_FORMAT = \"MM/DD/YYYY\";\n\nexport const TEST_DATE_STATUS = {\n DEFAULT: \"DEFAULT\",\n TEMPORARY: \"TEMPORARY\",\n OUTSIDE_MONTH: \"OUTSIDE_MONTH\",\n};\n\n// This array of times is necessary to make it easier to test which times to block when timerange is enabled on the timepicker.\n// Test by array index is faster than testing by using moment.isSameOrAfter() for every single time option.\n// Example: If the START_TIME is 03:00AM we block every option with index < than 03:00 AM on the END_TIME dropdown\nexport const TIMES = [\n \"12:00 AM\",\n \"12:15 AM\",\n \"12:30 AM\",\n \"12:45 AM\",\n \"01:00 AM\",\n \"01:15 AM\",\n \"01:30 AM\",\n \"01:45 AM\",\n \"02:00 AM\",\n \"02:15 AM\",\n \"02:30 AM\",\n \"02:45 AM\",\n \"03:00 AM\",\n \"03:15 AM\",\n \"03:30 AM\",\n \"03:45 AM\",\n \"04:00 AM\",\n \"04:15 AM\",\n \"04:30 AM\",\n \"04:45 AM\",\n \"05:00 AM\",\n \"05:15 AM\",\n \"05:30 AM\",\n \"05:45 AM\",\n \"06:00 AM\",\n \"06:15 AM\",\n \"06:30 AM\",\n \"06:45 AM\",\n \"07:00 AM\",\n \"07:15 AM\",\n \"07:30 AM\",\n \"07:45 AM\",\n \"08:00 AM\",\n \"08:15 AM\",\n \"08:30 AM\",\n \"08:45 AM\",\n \"09:00 AM\",\n \"09:15 AM\",\n \"09:30 AM\",\n \"09:45 AM\",\n \"10:00 AM\",\n \"10:15 AM\",\n \"10:30 AM\",\n \"10:45 AM\",\n \"11:00 AM\",\n \"11:15 AM\",\n \"11:30 AM\",\n \"11:45 AM\",\n \"12:00 PM\",\n \"12:15 PM\",\n \"12:30 PM\",\n \"12:45 PM\",\n \"01:00 PM\",\n \"01:15 PM\",\n \"01:30 PM\",\n \"01:45 PM\",\n \"02:00 PM\",\n \"02:15 PM\",\n \"02:30 PM\",\n \"02:45 PM\",\n \"03:00 PM\",\n \"03:15 PM\",\n \"03:30 PM\",\n \"03:45 PM\",\n \"04:00 PM\",\n \"04:15 PM\",\n \"04:30 PM\",\n \"04:45 PM\",\n \"05:00 PM\",\n \"05:15 PM\",\n \"05:30 PM\",\n \"05:45 PM\",\n \"06:00 PM\",\n \"06:15 PM\",\n \"06:30 PM\",\n \"06:45 PM\",\n \"07:00 PM\",\n \"07:15 PM\",\n \"07:30 PM\",\n \"07:45 PM\",\n \"08:00 PM\",\n \"08:15 PM\",\n \"08:30 PM\",\n \"08:45 PM\",\n \"09:00 PM\",\n \"09:15 PM\",\n \"09:30 PM\",\n \"09:45 PM\",\n \"10:00 PM\",\n \"10:15 PM\",\n \"10:30 PM\",\n \"10:45 PM\",\n \"11:00 PM\",\n \"11:15 PM\",\n \"11:30 PM\",\n \"11:45 PM\",\n];\n\nexport const getValidDateFormats = (dateFormat = \"\") => {\n if (dateFormat === \"\") {\n return VALID_DATE_FORMATS;\n }\n\n return [dateFormat, ...VALID_DATE_FORMATS];\n};\n","/* eslint-disable no-plusplus */\nimport moment from \"moment\";\n\nimport { VALID_DATE_FORMATS, DATE_FORMAT, TIMES } from \"./constants\";\n\nexport const getWeeksInMonth = (date) => {\n // Get first and last days from previous/next months to fill the table on CalendarMonth component\n const firstDay = date.clone().startOf(\"month\").weekday(0);\n const lastDay = date.clone().endOf(\"month\").weekday(6);\n const totalDays = lastDay.diff(firstDay, \"days\") + 1;\n\n const currentDay = firstDay.clone();\n const weeksInMonth = [];\n\n for (let i = 0; i < totalDays; i += 1) {\n if (i % 7 === 0) {\n weeksInMonth.push([]);\n }\n\n weeksInMonth[weeksInMonth.length - 1].push(currentDay.clone());\n currentDay.add(1, \"day\");\n }\n\n return weeksInMonth;\n};\n\nexport const getDateFormat = (dateFormat) => {\n if (dateFormat !== \"\") {\n return dateFormat;\n }\n\n return DATE_FORMAT;\n};\n\nexport const getMutatedDateFormat = (dateFormat) => getDateFormat(dateFormat).replace(/-/g, \"/\");\n\nexport const getValidDateFormats = (dateFormat) => {\n if (dateFormat === \"\") {\n return VALID_DATE_FORMATS;\n }\n\n return [dateFormat, ...VALID_DATE_FORMATS];\n};\n\nexport const getNextPossibleDateSelectorTime = (lastPossibleTime) => {\n if (lastPossibleTime === TIMES[TIMES.length - 1]) {\n return TIMES[0];\n }\n\n const index = TIMES.indexOf(lastPossibleTime);\n\n if (index === -1) {\n return lastPossibleTime;\n }\n\n return TIMES[index + 1];\n};\n\nexport const getClosestTime = () => {\n const timeNow = moment();\n const minutes = timeNow.minutes();\n timeNow.minutes(minutes - (minutes % 15));\n return timeNow.format(\"hh:mm A\");\n};\n\nexport const meridianCount = (datetime, enableTimePicker) => {\n if (!enableTimePicker) {\n return 0;\n }\n\n const times = datetime.split(\" \");\n\n let count = 0;\n\n times.forEach((time) => {\n if (time.toLowerCase().match(/am|pm/) && enableTimePicker) {\n count++;\n }\n });\n\n return count;\n};\n\nexport const getStartTime = (datetime, enableTimePicker) => {\n const times = datetime.split(\" \");\n\n if (times.length >= 3 && datetime.toLowerCase().match(/am|pm/) && enableTimePicker) {\n return `${times[1]} ${times[2]}`;\n }\n\n return \"\";\n};\n\nexport const getEndTime = (datetime, enableEndTimePicker) => {\n const times = datetime.split(\" \");\n\n if (times.length === 5 && datetime.toLowerCase().match(/am|pm/) && enableEndTimePicker) {\n return `${times[3]} ${times[4]}`;\n }\n\n return \"\";\n};\n\n/**\n * @summary format user input to automatically add forward slashes. Offer default support for separators `/` as default and `-` for backwards compatibility.\n * @return {string} formatted date string with forward slashes `/`.\n * @param {string} allowedCharsUserInput - a string with only numbers, forward slash and - characters\n * @param {string} format - format to apply to the date (MM-DD-YYYY or YYYY-MM-DD etc.)\n */\nexport const maskUserInput = (allowedCharsUserInput, format) => {\n if (format.length === 0) {\n return allowedCharsUserInput;\n }\n\n let formattedUserInput = \"\";\n let separatorCounter = 1;\n const cleanUserInput = allowedCharsUserInput.replace(/[/]|[-]/g, \"\");\n\n for (let i = 0; i < cleanUserInput.length; i++) {\n if (format[i + separatorCounter] === \"/\" || format[i + separatorCounter] === \"-\") {\n separatorCounter++;\n formattedUserInput += `${cleanUserInput[i]}/`;\n } else {\n formattedUserInput += cleanUserInput[i];\n }\n }\n\n return formattedUserInput;\n};\n\nexport const formatDatetime = (state, dateFormat) => {\n if (state.impureDate === \"\" || !moment(state.impureDate, dateFormat).isValid()) {\n return state.impureDate;\n }\n\n const formatedDate = moment(state.impureDate, dateFormat).format(getMutatedDateFormat(dateFormat));\n\n if (\n state.showTimePicker &&\n state.temporaryStartTime !== \"\" &&\n state.showEndTimePicker &&\n state.temporaryEndTime !== \"\"\n ) {\n return `${formatedDate} ${state.temporaryStartTime} ${state.temporaryEndTime}`;\n }\n\n if (state.showTimePicker && state.temporaryStartTime !== \"\") {\n return `${formatedDate} ${state.temporaryStartTime}`;\n }\n\n return formatedDate;\n};\n\nexport const formatDate = (rawFormattedDate, dateFormat) => {\n if (typeof rawFormattedDate !== \"string\" || rawFormattedDate === \"\") return \"\";\n\n const [onlyDate, ...rest] = rawFormattedDate.split(\" \");\n const onlyTime = rest.join(\" \");\n\n if (onlyDate === \"\") {\n return onlyDate;\n }\n\n const formattedDate = moment(onlyDate, getValidDateFormats(dateFormat)).format(\n getMutatedDateFormat(dateFormat),\n );\n\n if (onlyTime !== \"\") {\n return `${formattedDate} ${onlyTime}`;\n }\n\n return formattedDate;\n};\n","import moment from \"moment\";\n\nimport { VALID_DATE_FORMATS } from \"../../DateSelector/utils/constants\";\n\nexport const getValidDateFormats = (dateFormat = \"\") => {\n if (dateFormat === \"\") {\n return VALID_DATE_FORMATS;\n }\n\n return [dateFormat, ...VALID_DATE_FORMATS];\n};\n\nconst isYearlessFormat = (format) => !/[Yy]/.test(format);\n\n// Get the year in case it's not on impureDate (text input). Priority:\n// 1. temporaryDate.year -> user clicked on a date\n// 2. navigationDate.year -> user clicked on a month\n// 3. current year -> assume it's the current year\nconst getIndirectYear = (state) => {\n const currentYear = moment().year();\n if (state.temporaryDate && state.temporaryDate.year() !== currentYear) {\n return state.temporaryDate.year();\n }\n if (state.navigationDate && state.navigationDate.year() !== currentYear) {\n return state.navigationDate.year();\n }\n return currentYear;\n};\n\nexport const isDateValid = (state, dateFormat, key = \"impureTemporary\") => {\n if (typeof state[key] !== \"string\") return false;\n\n // Moment doesn't validate 02/29 if the date format and the input doesn't contain years. Ex. MM/DD MM-DD DD/MM DD-MM\n // Under the hood we add the years to check if the state.date (input text) is valid\n if (dateFormat !== \"\" && isYearlessFormat(dateFormat)) {\n const year = getIndirectYear(state);\n const temporaryYearDate = `${state[key].split(\" \")[0]}/${year}`;\n return moment(temporaryYearDate, [`${dateFormat}/YYYY`, ...VALID_DATE_FORMATS]).isValid();\n }\n\n return moment(state[key].split(\" \")[0], getValidDateFormats(dateFormat)).isValid();\n};\n","import { schemaGenerator } from \"../utils\";\n\nexport const calendarContainerCommon =\n \"tw-flex tw-flex-col tw-flex-nowrap tw-py-12px tw-px-12px tw-w-[240px] tw-min-h-[240px] tw-select-none tw-bg-white\";\nconst calendarDayCommon = \"tw-justify-center tw-cursor-pointer tw-flex tw-items-center tw-rounded-4px\";\nconst monthSelectorCommon =\n \"tw-h-32px tw-w-40px tw-text-center tw-border-0 tw-bg-transparent tw-rounded-4px tw-justify-center tw-content-center\";\n\nexport const dateInputClassNames = (showTimePicker, showEndTimePicker, dateFormatError) => {\n if ((showTimePicker && showEndTimePicker) || (!showTimePicker && !showEndTimePicker)) {\n return dateFormatError ? \"tw-w-full tw-mb-12px\" : \"tw-w-full\";\n }\n\n return dateFormatError ? \"tw-w-[104px] tw-mb-12px\" : \"tw-w-[104px]\";\n};\n\nconst dictionary = {\n dayDisabled: {\n base: [calendarDayCommon],\n default: [\"tw-text-semantic-red-10 tw-w-[31px] tw-h-28px\", \"!tw-cursor-default\"],\n },\n daySelected: {\n base: [calendarDayCommon],\n default: [\"tw-bg-theme-dateselector-main-color tw-text-white tw-w-[31px] tw-h-28px\"],\n },\n dayTempToday: {\n default: [\"tw-text-white\"],\n },\n dayToday: {\n base: [calendarDayCommon],\n default: [\n \"tw-border-theme-dateselector-secondary-color tw-text-theme-dateselector-secondary-color tw-border-1px tw-border-solid tw-m-auto tw-w-24px tw-h-20px tw-justify-center tw-cursor-pointer tw-flex tw-items-center tw-rounded-4px\",\n ],\n },\n dayOutside: {\n base: [calendarDayCommon],\n default: [\"tw-text-neutral-gray-30 tw-w-[31px] tw-h-28px\"],\n hover: [\"hover:tw-bg-neutral-gray-10\"],\n },\n dayDefault: {\n base: [calendarDayCommon],\n default: [\"tw-text-theme-dateselector-text-color tw-w-[31px] tw-h-28px\"],\n hover: [\"hover:tw-bg-neutral-gray-10\"],\n },\n monthSelected: {\n base: [monthSelectorCommon],\n default: [\"tw-text-theme-dateselector-secondary-color tw-font-bold\"],\n hover: [\"hover:tw-bg-neutral-gray-10\"],\n active: [\"active:tw-bg-neutral-gray-15\"],\n },\n monthDefault: {\n base: [monthSelectorCommon],\n default: [\"tw-text-neutral-gray-75\"],\n hover: [\"hover:tw-bg-neutral-gray-10\"],\n active: [\"active:tw-bg-neutral-gray-15\"],\n },\n navigation: {\n base: [\"tw-font-bold tw-flex tw-border-0 tw-bg-transparent tw-rounded-4px tw-items-center tw-p-4px\"],\n default: [\"tw-text-theme-dateselector-text-color\"],\n hover: [\"hover:tw-bg-neutral-gray-10\"],\n active: [\"active:tw-bg-gray-15\"],\n disabled: [\"disabled:tw-text-neutral-gray-30\", \"hover:tw-bg-transparent\", \"active:tw-bg-transparent\"],\n },\n navigationMode: {\n base: [\n \"tw-font-bold tw-flex tw-border-0 tw-bg-transparent tw-rounded-4px tw-items-center tw-py-1px tw-pl-6px tw-pr-4px\",\n ],\n default: [\"tw-text-theme-dateselector-text-color\"],\n hover: [\"hover:tw-bg-neutral-gray-10\"],\n active: [\"active:tw-bg-gray-15\"],\n },\n closeTimePicker: {\n default: [\n \"tw-text-neutral-gray-50 tw-flex tw-p-6px tw-border-0 tw-bg-transparent tw-rounded-4px tw-items-center tw-ml-auto\",\n ],\n hover: [\"hover:tw-bg-neutral-gray-10\"],\n },\n};\n\nconst schema = schemaGenerator(dictionary);\n\nexport default schema;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\n\nimport { ChevronLeft, ChevronRight, CaretDown } from \"../Icomoon\";\n\nimport { UIMODE } from \"./utils/constants\";\n\nimport styleSchema from \"./DateSelector.styles\";\n\nconst renderHeader = (uiMode, navigationDate, noYear) => {\n if (noYear) return navigationDate.format(\"MMM\");\n\n switch (uiMode) {\n case UIMODE.DAY:\n return navigationDate.format(\"MMM YYYY\");\n case UIMODE.MONTH:\n return navigationDate.format(\"YYYY\");\n default:\n return \"\";\n }\n};\n\nconst arialLabelMonthYearNext = (navigationDate, uiMode) => {\n switch (uiMode) {\n case UIMODE.DAY:\n return `Go to next month: ${navigationDate.clone().add(1, \"month\").format(\"MMM YYYY\")} to select a day`;\n case UIMODE.MONTH:\n return `Go to next year: ${navigationDate.clone().add(1, \"year\").format(\"YYYY\")} to select a month`;\n default:\n return \"\";\n }\n};\n\nconst arialLabelMonthYearPrevious = (navigationDate, uiMode) => {\n switch (uiMode) {\n case UIMODE.DAY:\n return `Go to previous month: ${navigationDate\n .clone()\n .subtract(1, \"month\")\n .format(\"MMM YYYY\")} to select a day`;\n case UIMODE.MONTH:\n return `Go to previous year: ${navigationDate\n .clone()\n .subtract(1, \"year\")\n .format(\"YYYY\")} to select a month`;\n default:\n return \"\";\n }\n};\n\nconst arialLabelMonthYearUI = (uiMode) => {\n switch (uiMode) {\n case UIMODE.DAY:\n return \"Change user interface from day select to month select\";\n case UIMODE.MONTH:\n return \"Change user interface from month select to day select\";\n default:\n return \"\";\n }\n};\n\nconst testCurrentPeriod = (uiMode, navigationDate) => {\n switch (uiMode) {\n case UIMODE.DAY:\n return navigationDate.format(\"YYYY-MM\");\n case UIMODE.MONTH:\n return navigationDate.format(\"YYYY\");\n default:\n return \"\";\n }\n};\n\nconst PeriodNavigation = ({\n navigationDate,\n handleNavigationClick,\n uiMode,\n handleChangeUI,\n minDate,\n maxDate,\n noYear,\n}) => {\n // noYear prop used to toggle prev and next if noYear is true && navigationDate is Jan or Dec respectively\n const checkDateBoundary = (isNext) => {\n if (noYear) {\n return isNext ? navigationDate.format(\"MMM\") === \"Dec\" : navigationDate.format(\"MMM\") === \"Jan\";\n }\n\n const dateBoundary = isNext ? maxDate : minDate;\n if (!dateBoundary) return false;\n\n const unit = uiMode === UIMODE.MONTH ? \"year\" : \"month\";\n const comparator = isNext ? \"isSameOrAfter\" : \"isSameOrBefore\";\n\n return navigationDate[comparator](moment(dateBoundary), unit);\n };\n\n const isPrevDisabled = checkDateBoundary(false);\n const isNextDisabled = checkDateBoundary(true);\n\n // handles click on prev and next buttons based on noYear, if noYear it will be month otherwise its either month or year.\n const handleNavigationChange = (isNext) => {\n const operation = isNext ? \"add\" : \"subtract\";\n const amount = 1;\n let unit = \"month\";\n\n if (!noYear) {\n if (uiMode === UIMODE.MONTH) {\n unit = \"year\";\n }\n }\n\n return handleNavigationClick(navigationDate[operation](amount, unit));\n };\n\n const handleClickPrevious = () => handleNavigationChange(false);\n const handleClickNext = () => handleNavigationChange(true);\n\n return (\n \n {options.map((option) => {\n return (\n onChange(option)}\n key={option}\n data-cy={`${option}_radio_btn`}\n >\n
\n );\n })}\n {option}
\n \n handleClickPrevious()}\n aria-label={arialLabelMonthYearPrevious(navigationDate, uiMode)}\n data-test-navigation-previous\n disabled={isPrevDisabled}\n >\n handleChangeUI()}\n aria-label={arialLabelMonthYearUI(uiMode)}\n data-test-navigation-current-period={testCurrentPeriod(uiMode, navigationDate)}\n data-test-ui-mode={uiMode}\n >\n {renderHeader(uiMode, navigationDate, noYear)} handleClickNext()}\n aria-label={arialLabelMonthYearNext(navigationDate, uiMode)}\n data-test-navigation-next\n disabled={isNextDisabled}\n >\n
\n );\n};\n\nPeriodNavigation.propTypes = {\n navigationDate: PropTypes.instanceOf(moment),\n handleNavigationClick: PropTypes.func,\n handleChangeUI: PropTypes.func,\n uiMode: PropTypes.oneOf(Object.values(UIMODE)),\n minDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.string]),\n maxDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.string]),\n noYear: PropTypes.bool,\n};\n\nPeriodNavigation.defaultProps = {\n navigationDate: moment(),\n handleNavigationClick: () => {},\n handleChangeUI: () => {},\n uiMode: UIMODE.DAY,\n minDate: null,\n maxDate: null,\n noYear: false,\n};\n\nexport default PeriodNavigation;\n","import React, { useState, useEffect, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { Dropdown } from \"../../v1/Dropdown\";\nimport { TIMES } from \"./utils/constants\";\n\nconst shouldBlockTime = (blockingTime, _time) => TIMES.indexOf(_time) <= TIMES.indexOf(blockingTime);\n\nconst createTimeOptions = (blockingTime) => {\n const timeOptions = [];\n\n TIMES.forEach((_time) => {\n timeOptions.push({\n label: _time,\n value: _time,\n isDisabled: blockingTime !== \"\" && shouldBlockTime(blockingTime, _time),\n });\n });\n\n return timeOptions;\n};\n\nconst TimePicker = ({ time, blockingTime, placeholder, handleTimeChange, className = \"\", ...otherProps }) => {\n const [_time, setTime] = useState(time);\n const timeOptions = useMemo(() => createTimeOptions(blockingTime), [time, blockingTime]);\n\n useEffect(() => {\n setTime(time);\n }, [time]);\n\n const onTimeChange = (option) => {\n handleTimeChange(option.value);\n };\n\n return (\n \n
\n );\n};\n\nTimePicker.propTypes = {\n className: PropTypes.string,\n placeholder: PropTypes.string,\n time: PropTypes.string,\n blockingTime: PropTypes.string,\n handleTimeChange: PropTypes.func,\n};\n\nTimePicker.defaultProps = {\n className: \"\",\n placeholder: \"\",\n time: \"\",\n blockingTime: \"\",\n handleTimeChange: () => {},\n};\n\nexport default TimePicker;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\n\nimport styleSchema from \"./DateSelector.styles\";\n\nimport { TEST_DATE_STATUS } from \"./utils/constants\";\n\nconst dayStatus = (temporaryDate, navigationDate, day) => {\n if (day.isSame(temporaryDate, \"day\")) {\n return TEST_DATE_STATUS.TEMPORARY;\n }\n\n if (navigationDate.month() !== day.month()) {\n return TEST_DATE_STATUS.OUTSIDE_MONTH;\n }\n\n return TEST_DATE_STATUS.DEFAULT;\n};\n\nconst dayModifierClassNames = (temporaryDate, navigationDate, day, disabled) => {\n if (disabled) return styleSchema.dayDisabled;\n\n if (day.isSame(temporaryDate, \"day\")) return styleSchema.daySelected;\n\n if (navigationDate.month() !== day.month()) return styleSchema.dayOutside;\n\n return styleSchema.dayDefault;\n};\n\nconst isToday = (day) => day.isSame(moment(), \"day\");\nconst isTempDate = (day, temporaryDate) => day.isSame(temporaryDate, \"day\");\n\nconst sameDateStyle = (day, temporaryDate) =>\n isTempDate(day, temporaryDate) ? styleSchema.dayTempToday : styleSchema.dayToday;\n\nconst todayDOM = (day, temporaryDate) => (\n {day.format(\"D\")}\n);\n\nconst dayHTML = (day, temporaryDate) => (isToday(day) ? todayDOM(day, temporaryDate) : day.format(\"D\"));\n\nconst CalendarDay = ({ temporaryDate, navigationDate, day, handleDayClick, disabled }) => (\n \n {dayHTML(day, temporaryDate)}\n
\n \n);\n\nCalendarDay.propTypes = {\n day: PropTypes.instanceOf(moment),\n temporaryDate: PropTypes.instanceOf(moment),\n navigationDate: PropTypes.instanceOf(moment),\n handleDayClick: PropTypes.func,\n disabled: PropTypes.bool.isRequired,\n};\n\nCalendarDay.defaultProps = {\n day: moment(),\n temporaryDate: moment(),\n navigationDate: moment(),\n handleDayClick: () => {},\n};\n\nexport default CalendarDay;\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\n\nimport CalendarDay from \"./CalendarDay\";\n\nimport { getWeeksInMonth } from \"./utils/helpers\";\nimport { WEEKDAYS } from \"./utils/constants\";\n\nconst getWeekHeader = () => {\n const weekHeaders = [];\n\n WEEKDAYS.forEach((i) => {\n weekHeaders.push(moment().weekday(i).format(\"dd\"));\n });\n\n return weekHeaders;\n};\n\nconst renderWeekHeader = () => {\n const weekHeader = getWeekHeader();\n const header = weekHeader.map((day) => (\n {header}
;\n};\n\nconst isDisabled = (day, minDate, maxDate) => {\n const isBeforeMinDate = minDate && day.isBefore(moment(minDate));\n const isAfterMaxDate = maxDate && day.isAfter(moment(maxDate));\n return isBeforeMinDate || isAfterMaxDate;\n};\n\nconst CalendarMonth = ({ temporaryDate, navigationDate, handleDayClick, minDate, maxDate }) => {\n const [weeks, setWeeks] = useState([]);\n\n useEffect(() => {\n setWeeks(getWeeksInMonth(navigationDate));\n }, [navigationDate]);\n\n return (\n \n {renderWeekHeader()}\n \n \n {weeks.map((week) => (\n
\n
\n );\n};\n\nCalendarMonth.propTypes = {\n temporaryDate: PropTypes.instanceOf(moment),\n navigationDate: PropTypes.instanceOf(moment),\n handleDayClick: PropTypes.func,\n minDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.string]),\n maxDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.string]),\n};\n\nCalendarMonth.defaultProps = {\n temporaryDate: moment(),\n navigationDate: moment(),\n handleDayClick: () => {},\n minDate: null,\n maxDate: null,\n};\n\nexport default CalendarMonth;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\n\nimport { MONTHS } from \"./utils/constants\";\n\nimport styleSchema from \"./DateSelector.styles\";\n\nconst monthModifierClassNames = (month, temporaryDate, navigationDate, noYear) => {\n if (noYear) {\n return navigationDate.format(\"MMM\") === month\n ? `${styleSchema.monthSelected}`\n : `${styleSchema.monthDefault}`;\n }\n\n if (navigationDate.clone().month(month).isSame(temporaryDate, \"month\")) {\n return `${styleSchema.monthSelected}`;\n }\n\n return `${styleSchema.monthDefault}`;\n};\n\nconst arialLabelMonth = (month, navigationDate) =>\n `Go to ${month} ${navigationDate.clone().format(\"YYYY\")} to select a day`;\n\nconst isDisabled = ({ month, navigationDate, minDate, maxDate }) => {\n const isBeforeMinDate =\n minDate && moment(navigationDate).set(\"month\", month).endOf(\"month\").isSameOrBefore(moment(minDate));\n const isAfterMaxDate =\n maxDate && moment(navigationDate).set(\"month\", month).startOf(\"month\").isSameOrAfter(moment(maxDate));\n return isBeforeMinDate || isAfterMaxDate;\n};\n\nconst MonthSelector = ({ temporaryDate, navigationDate, handleMonthClick, minDate, maxDate, noYear }) => {\n const onMonthClick = (month) => {\n handleMonthClick(navigationDate.clone().month(month));\n };\n\n return (\n \n
\n );\n};\n\nMonthSelector.propTypes = {\n temporaryDate: PropTypes.instanceOf(moment),\n navigationDate: PropTypes.instanceOf(moment),\n handleMonthClick: PropTypes.func,\n minDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.string]),\n maxDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.string]),\n noYear: PropTypes.bool,\n};\n\nMonthSelector.defaultProps = {\n temporaryDate: moment(),\n navigationDate: moment(),\n handleMonthClick: () => {},\n minDate: null,\n maxDate: null,\n noYear: false,\n};\n\nexport default MonthSelector;\n","import moment from \"moment\";\nimport { UIMODE } from \"./constants\";\n\nimport {\n getDateFormat,\n getClosestTime,\n getNextPossibleDateSelectorTime,\n getStartTime,\n getEndTime,\n meridianCount,\n getValidDateFormats,\n} from \"./helpers\";\n\nexport const initialState = () => {\n const closestTimeStart = getClosestTime();\n const closestTimeEnd = getNextPossibleDateSelectorTime(closestTimeStart);\n\n return {\n impureDate: \"\", // user input. it might be wrong, correct or empty. Do not rely on it. Anything.\n temporaryDate: moment(), // it is always correct. Always a valid date.\n navigationDate: moment(), // internal date state for navigation. Always a valid date.\n temporaryStartTime: closestTimeStart, // user selected start time. Pre-selected Valid times.\n temporaryEndTime: closestTimeEnd, // user selected end time. Pre-selected valid times.\n uiMode: UIMODE.DAY, // UIMODE.day or UIMODE.month\n showTimePicker: false,\n showEndTimePicker: false,\n dateFormatError: \"\", // show this message when the user input (state.impureDate) is wrong.\n };\n};\n\nexport const definedInitialState = ({ value, dateFormat, enableTimePicker, enableEndTimePicker }) => {\n const dateOnly = value.split(\" \")[0];\n const date = moment(dateOnly, getValidDateFormats(dateFormat));\n const closestTimeStart = getClosestTime();\n const closestTimeEnd = getNextPossibleDateSelectorTime(closestTimeStart);\n\n return {\n impureDate: date.isValid() ? date.format(getDateFormat(dateFormat)) : \"\",\n temporaryDate: date.isValid() ? date : moment(),\n navigationDate: date.isValid() ? date : moment(),\n temporaryStartTime: getStartTime(value, enableTimePicker) || closestTimeStart,\n temporaryEndTime: getEndTime(value, enableEndTimePicker) || closestTimeEnd,\n uiMode: UIMODE.DAY,\n showTimePicker: meridianCount(value, enableTimePicker) >= 1,\n showEndTimePicker: meridianCount(value, enableEndTimePicker) >= 2,\n dateFormatError: \"\",\n };\n};\n\nexport const init = (initialData) => {\n const dateOnly = initialData.value.split(\" \")[0];\n if (moment(dateOnly, getValidDateFormats(initialData.dateFormat)).isValid()) {\n return definedInitialState(initialData);\n }\n return initialState();\n};\n\nexport const reducer = (state, action) => {\n switch (action.type) {\n case \"SET_IMPURE_DATE\":\n return { ...state, impureDate: action.payload.date, dateFormatError: \"\" };\n case \"SET_ALL_DATES\":\n return {\n ...state,\n impureDate: action.payload.impureDate,\n temporaryDate: action.payload.temporaryDate,\n navigationDate: action.payload.navigationDate,\n dateFormatError: \"\",\n };\n case \"INVALID_IMPURE_DATE\":\n return { ...state, dateFormatError: action.payload.dateFormatError };\n case \"SAVE_SELECTED_DATETIME\":\n return {\n ...state,\n impureDate: action.payload.impureDate,\n dateFormatError: \"\",\n };\n case \"SAVE_DATETIME_CLICK_OUTSIDE\":\n return {\n ...state,\n impureDate: action.payload.impureDate,\n temporaryDate: action.payload.temporaryDate,\n navigationDate: action.payload.temporaryDate,\n dateFormatError: \"\",\n };\n case \"SET_EMPTY_DATE\":\n return {\n ...state,\n impureDate: \"\",\n };\n case \"SET_TEMPORARY_TIME\":\n return {\n ...state,\n temporaryStartTime: action.payload.temporaryStartTime,\n temporaryEndTime: action.payload.temporaryEndTime,\n };\n case \"SET_TEMPORARY_START_TIME\":\n return {\n ...state,\n temporaryStartTime: action.payload.temporaryStartTime,\n };\n case \"SET_TEMPORARY_END_TIME\":\n return {\n ...state,\n temporaryEndTime: action.payload.temporaryEndTime,\n };\n case \"SET_CLICKED_DATE\":\n return {\n ...state,\n impureDate: action.payload.impureDate,\n temporaryDate: action.payload.temporaryDate.clone().date(action.payload.temporaryDate.date()),\n };\n case \"SET_NAVIGATION_DATE\":\n return { ...state, navigationDate: action.payload.navigationDate };\n case \"CLICK_NAVIGATION_MONTH_DATE\":\n return { ...state, navigationDate: action.payload.navigationDate, uiMode: UIMODE.DAY };\n case \"SET_UI_MODE\":\n return { ...state, uiMode: action.payload.uiMode };\n case \"CLEAR_DATE_PICKER\":\n return {\n ...state,\n impureDate: \"\",\n temporaryStartTime: \"\",\n temporaryEndTime: \"\",\n showTimePicker: false,\n showEndTimePicker: false,\n dateFormatError: \"\",\n };\n case \"CLEAR_DATE_FORMAT_ERROR\":\n return {\n ...state,\n dateFormatError: \"\",\n };\n case \"SHOW_TIME_PICKER\":\n return { ...state, showTimePicker: true };\n case \"CLOSE_TIME_PICKER\":\n return {\n ...state,\n showTimePicker: false,\n showEndTimePicker: false,\n };\n case \"SHOW_END_TIME_PICKER\":\n return { ...state, showEndTimePicker: true };\n case \"CLOSE_END_TIME_PICKER\":\n return { ...state, showEndTimePicker: false };\n default:\n throw new Error(\"Dateselector unhandled action type\");\n }\n};\n","import React, { useEffect, useReducer, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\n\nimport PeriodNavigation from \"./PeriodNavigation\";\nimport TimePicker from \"./TimePicker\";\nimport CalendarMonth from \"./CalendarMonth\";\nimport MonthSelector from \"./MonthSelector\";\nimport TextInput from \"../TextInput\";\nimport Toggle from \"../Toggle\";\n\nimport { calendarContainerCommon, dateInputClassNames } from \"./DateSelector.styles\";\nimport {\n getDateFormat,\n getValidDateFormats,\n getNextPossibleDateSelectorTime,\n maskUserInput,\n formatDatetime,\n formatDate,\n} from \"./utils/helpers\";\nimport { reducer, init } from \"./utils/reducer\";\nimport { DATE_FORMAT, UIMODE } from \"./utils/constants\";\n\n/**\n * @summary DateSelector component. It's possible to enable up to 2 timepickers. `onChange` is the only required prop to make it functional.\n * @param {string} value - The dateselector initial value. Provide a string in the following formats YYYY-MM-DD | YYYY-MM-DD HH:MM AM/PM | YYYY-MM-DD HH:MM AM/PM HH:MM AM/PM\n * @param {func} onChange - The only required prop to make the dateselector useful. It returns a string based on dateFormat. Default format is MM/DD/YYYY\n * @param {bool} enableTimePicker - Enable the timepicker option. Selected time will be sent to onChange.\n * @param {bool} enableEndTimePicker - Enable the second timepicker option. Selected time will be sent to onChange.\n * @param {boolean} enableDateInput - Enable the input for users to type in the date.\n * @param {string} dateFormat - Provide a momentjs date format to override the default one (MM-DD-YYYY). See https://momentjs.com/docs/#/displaying/format/ for available formats.\n * @param {string} containerClassName - className for the outermost HTML element.\n * @param {boolean} error - Shows a message if date is invalid.\n * */\nconst DateSelector = ({\n value,\n onChange,\n enableTimePicker,\n enableEndTimePicker,\n enableDateInput,\n dateFormat,\n containerClassName,\n error,\n minDate,\n maxDate,\n startTimeClassName,\n startTimeEnabled,\n noYear,\n}) => {\n const initialReducerData = {\n value,\n dateFormat,\n enableTimePicker,\n enableEndTimePicker,\n };\n\n const [state, dispatch] = useReducer(reducer, initialReducerData, init);\n\n const oldValue = useRef(formatDate(value.split(\" \")[0], getDateFormat(dateFormat)));\n const isMount = useRef(true);\n\n const handleUpdatedInitialDate = (dateProp) => {\n if (isMount.current === false) return;\n\n isMount.current = false;\n\n if (moment(dateProp, getValidDateFormats(dateFormat)).isValid()) {\n const newValidDate = moment(dateProp, getValidDateFormats(dateFormat));\n\n dispatch({\n type: \"SET_ALL_DATES\",\n payload: {\n impureDate: formatDate(dateProp.split(\" \")[0], dateFormat),\n temporaryDate: newValidDate,\n navigationDate: newValidDate,\n },\n });\n } else {\n dispatch({\n type: \"SET_IMPURE_DATE\",\n payload: {\n date: formatDate(dateProp.split(\" \")[0], dateFormat),\n },\n });\n }\n };\n\n /**\n * @summary How to handle user input. It trims, remove non-numeric characters, and add forward slashes based on dateFormat.\n * @param {string} rawUserInput - It's a date you can't rely on. It's the raw value of the input. It might be valid, invalid, empty, letters etc\n */\n const handleUserInput = (rawUserInput) => {\n if (rawUserInput === \"\") {\n dispatch({\n type: \"SET_EMPTY_DATE\",\n });\n } else {\n const isUserAddingChar = rawUserInput.length > state.impureDate.length;\n const format = getDateFormat(dateFormat);\n const trimmedUserInput = rawUserInput.slice(0, format.length);\n const allowedCharsUserInput = trimmedUserInput.replace(/[^0-9/-]/gi, \"\");\n\n let formattedUserInput = \"\";\n if (isUserAddingChar) {\n formattedUserInput = maskUserInput(allowedCharsUserInput, format);\n } else {\n formattedUserInput = allowedCharsUserInput;\n }\n\n if (moment(formattedUserInput, getValidDateFormats(dateFormat)).isValid()) {\n const newValidDate = moment(formattedUserInput, getValidDateFormats(dateFormat));\n dispatch({\n type: \"SET_ALL_DATES\",\n payload: {\n impureDate: formattedUserInput,\n temporaryDate: newValidDate,\n navigationDate: newValidDate,\n },\n });\n } else {\n dispatch({\n type: \"SET_IMPURE_DATE\",\n payload: {\n date: formattedUserInput,\n },\n });\n }\n }\n };\n\n useEffect(() => {\n if (value === \"\") {\n dispatch({\n type: \"SET_EMPTY_DATE\",\n });\n dispatch({\n type: \"CLOSE_TIME_PICKER\",\n });\n }\n\n handleUpdatedInitialDate(value);\n }, [value]);\n\n useEffect(() => {\n const formattedDate = formatDatetime(state, getDateFormat(dateFormat));\n // Solution to avoid OnChange being called twice.\n if (oldValue.current !== formattedDate) {\n oldValue.current = formattedDate;\n onChange({\n date: state.impureDate,\n startTime: enableTimePicker && state.showTimePicker ? state.temporaryStartTime : \"\",\n endTime: enableEndTimePicker && state.showEndTimePicker ? state.temporaryEndTime : \"\",\n formattedDate,\n temporaryDate: state.temporaryDate,\n navigationDate: state.navigationDate,\n });\n }\n }, [\n state.impureDate,\n state.temporaryStartTime,\n state.temporaryEndTime,\n state.showTimePicker,\n state.showEndTimePicker,\n ]);\n\n useEffect(() => {\n if (startTimeEnabled) {\n dispatch({ type: \"SHOW_TIME_PICKER\" });\n }\n }, [startTimeEnabled]);\n\n useEffect(() => {\n if (error) {\n dispatch({\n type: \"INVALID_IMPURE_DATE\",\n payload: {\n dateFormatError: typeof error === \"string\" ? error : getDateFormat(dateFormat),\n },\n });\n } else {\n dispatch({\n type: \"CLEAR_DATE_FORMAT_ERROR\",\n });\n }\n }, [error]);\n\n const handleDayClick = (day) => {\n dispatch({\n type: \"SET_CLICKED_DATE\",\n payload: {\n temporaryDate: day,\n impureDate: moment(day, getValidDateFormats(dateFormat)).format(getDateFormat(dateFormat)),\n },\n });\n };\n\n const handleNavigationClick = (period) => {\n dispatch({\n type: \"SET_NAVIGATION_DATE\",\n payload: {\n navigationDate: period.clone(),\n },\n });\n };\n\n const handleMonthClick = (month) => {\n dispatch({\n type: \"CLICK_NAVIGATION_MONTH_DATE\",\n payload: {\n navigationDate: month.clone(),\n },\n });\n };\n\n const handleChangeUI = () => {\n switch (state.uiMode) {\n case UIMODE.DAY:\n dispatch({\n type: \"SET_UI_MODE\",\n payload: {\n uiMode: UIMODE.MONTH,\n },\n });\n break;\n case UIMODE.MONTH:\n dispatch({\n type: \"SET_UI_MODE\",\n payload: {\n uiMode: UIMODE.DAY,\n },\n });\n break;\n default:\n dispatch({\n type: \"SET_UI_MODE\",\n payload: {\n uiMode: UIMODE.DAY,\n },\n });\n }\n };\n\n const handleStartTimeChange = (temporaryStartTime) => {\n // temporaryStartTime cannot be later than temporaryEndTime.\n if (moment(temporaryStartTime, \"LT\").isSameOrAfter(moment(state.temporaryEndTime, \"LT\"))) {\n dispatch({\n type: \"SET_TEMPORARY_TIME\",\n payload: {\n temporaryStartTime,\n temporaryEndTime: getNextPossibleDateSelectorTime(temporaryStartTime),\n },\n });\n } else {\n dispatch({\n type: \"SET_TEMPORARY_START_TIME\",\n payload: {\n temporaryStartTime,\n },\n });\n }\n };\n\n const handleEndTimeChange = (temporaryEndTime) => {\n dispatch({\n type: \"SET_TEMPORARY_END_TIME\",\n payload: {\n temporaryEndTime,\n },\n });\n };\n\n const getDatePlaceholder = () => {\n if (enableTimePicker && state.showTimePicker) {\n return \"Date\";\n }\n\n return getDateFormat(dateFormat);\n };\n\n const renderInputUI = () => (\n <>\n \n {MONTHS.map((month) => {\n const disabled = isDisabled({ month, navigationDate, minDate, maxDate });\n return (\n onMonthClick(month)}\n className={`\n ${monthModifierClassNames(month, temporaryDate, navigationDate, noYear)} \n ${disabled ? \"!tw-text-semantic-red-10\" : \"\"} \n `}\n aria-label={arialLabelMonth(month, navigationDate)}\n data-test-date={month}\n disabled={disabled}\n >\n {month}\n \n );\n })}\n
\n \n {enableDateInput && (\n \n handleUserInput(e.target.value)}\n error={state.dateFormatError}\n data-test-date-input\n data-cy=\"date-selector-input\"\n />\n
\n )}\n {state.showTimePicker && (\n \n \n dispatch({ type: \"CLOSE_END_TIME_PICKER\" })\n : () => dispatch({ type: \"SHOW_END_TIME_PICKER\" })\n }\n />\n
\n )}\n {enableTimePicker && }\n \n );\n\n const renderPickerUI = () => {\n switch (state.uiMode) {\n case UIMODE.DAY:\n return (\n
\n {state.uiMode === UIMODE.DAY && renderInputUI()}\n
\n );\n};\n\nDateSelector.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func,\n enableTimePicker: PropTypes.bool,\n enableEndTimePicker: PropTypes.bool,\n dateFormat: PropTypes.string,\n containerClassName: PropTypes.string,\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n enableDateInput: PropTypes.bool,\n minDate: PropTypes.oneOfType([PropTypes.shape(), PropTypes.string]),\n maxDate: PropTypes.oneOfType([PropTypes.shape(), PropTypes.string]),\n startTimeClassName: PropTypes.string,\n startTimeEnabled: PropTypes.bool,\n noYear: PropTypes.bool,\n};\n\nDateSelector.defaultProps = {\n value: moment().format(DATE_FORMAT),\n onChange: () => {},\n enableTimePicker: false,\n enableEndTimePicker: false,\n dateFormat: \"\",\n containerClassName: \"\",\n error: false,\n enableDateInput: true,\n minDate: null,\n maxDate: null,\n startTimeClassName: \"\",\n startTimeEnabled: false,\n noYear: false,\n};\n\nexport default DateSelector;\n","const calendarPositionClassNames = (position) => {\n switch (position) {\n case \"bottom-left\":\n return `tw-absolute tw-top-[0px] tw-left-[0px]`;\n case \"bottom\":\n return `tw-absolute tw-top-[0px] tw-left-[calc(50%-120px)]`;\n case \"default\":\n return `tw-absolute tw-top-[calc(50%-120px)] tw-left-[calc(50%-120px)]`;\n default:\n return \"\";\n }\n};\n\nexport default calendarPositionClassNames;\n","import React, { useRef, useState, useEffect } from \"react\";\n\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\n\nimport { formatDate } from \"../DateSelector/utils/helpers\";\nimport { DATE_FORMAT } from \"../DateSelector/utils/constants\";\n\nimport { getValidDateFormats, isDateValid } from \"./utils/helpers\";\nimport { useClickOutside } from \"../../hookHelpers\";\n\nimport Button from \"../Button\";\nimport DateSelector from \"../DateSelector\";\nimport TextButton from \"../TextButton\";\nimport TextComboInput from \"../TextComboInput\";\nimport { Calendar } from \"../Icomoon\";\n\nimport calendarPositionClassNames from \"./DatePicker.styles\";\n\nconst isDisabled = ({ date, minDate, maxDate }) => {\n const isBeforeMinDate = minDate && moment(date.validTemporary).isBefore(moment(minDate));\n const isAfterMaxDate = maxDate && moment(date.validTemporary).isAfter(moment(maxDate));\n return isBeforeMinDate || isAfterMaxDate || false;\n};\n\n/**\n * @summary DatePicker component. It's possible to enable up to 2 timepickers.\n * @param {string} value - The datepicker initial value. Provide a string in the following formats YYYY-MM-DD | YYYY-MM-DD HH:MM AM/PM | YYYY-MM-DD HH:MM AM/PM HH:MM AM/PM\n * @param {string} position - Provide the position of the calendar.\n * @param {func} onChange - It's triggered when the user clicks on \"done\" or outside the datepicker. It returns a string based on dateFormat. Default format is MM/DD/YYYY\n * @param {func} dateFormat - Provide a momentjs date format to override the default one (MM-DD-YYYY). See https://momentjs.com/docs/#/displaying/format/ for available formats.\n * @param {object} inputProps - This object will be spread on the trigger input (outside). Useful to apply custom HTML attributes.\n * @param {string} containerClassName - className for the outermost HTML element.\n * */\nconst DatePicker = (args) => {\n const {\n onChange,\n value,\n position,\n dateFormat,\n inputProps,\n containerClassName,\n minDate,\n maxDate,\n noYear,\n customError,\n ...otherProps\n } = args;\n\n const [isOpen, setIsOpen] = useState(false);\n\n const initialDate = moment(value, getValidDateFormats(dateFormat)).isValid() ? value : \"\";\n\n // final: Date shown on TextComboInput. \"ValidTemporary\" becomes \"final\" when the user clicks on the \"Done\" button or outside.\n // impureTemporary: User input. it might be wrong, correct or empty. Do not rely on it. It might be anything.\n // validTemporary: It's a valid impureTemporary date. Necessary to send only valid dates to the DateSelector component.\n const [date, setDate] = useState({\n final: initialDate,\n impureTemporary: initialDate,\n validTemporary: initialDate,\n });\n const disabled = isDisabled({ date, minDate, maxDate });\n const [error, setError] = useState(false);\n\n const datepickerRef = useRef(null);\n const oldValueRef = useRef(initialDate);\n\n const handleDone = () => {\n if (date.validTemporary !== \"\" && !isDateValid(date, dateFormat)) {\n setError(true);\n } else {\n setDate((oldDate) => ({\n ...oldDate,\n final: date.validTemporary,\n }));\n setIsOpen(false);\n setError(false);\n }\n };\n\n useClickOutside(datepickerRef, handleDone);\n\n useEffect(() => {\n // an object breaks the datepicker, and in consequence, the page\n if (typeof value !== \"string\") return;\n\n const validDate = moment(value, getValidDateFormats(dateFormat)).isValid() ? value : \"\";\n\n setDate({\n final: validDate,\n impureTemporary: validDate,\n validTemporary: validDate,\n });\n }, [value]);\n\n useEffect(() => {\n if (oldValueRef.current === date.final) return;\n oldValueRef.current = date.final;\n if (onChange) {\n onChange(date.final);\n }\n }, [date.final]);\n\n useEffect(() => {\n if (date.impureTemporary !== \"\" && isDateValid(date, dateFormat)) {\n setDate((oldDate) => ({\n ...oldDate,\n validTemporary: date.impureTemporary,\n }));\n }\n }, [date.impureTemporary]);\n\n return (\n \n setIsOpen((oldValue) => !oldValue)}\n readOnly\n className=\"tw-w-full\"\n trailing={\n \n {\n setDate((oldDate) => ({\n ...oldDate,\n ...dateSelectorState, // necessary for edge case: leap year in date formats without year\n impureTemporary: dateSelectorState.formattedDate,\n }));\n }}\n value={date.validTemporary}\n error={error}\n dateFormat={dateFormat}\n minDate={minDate}\n maxDate={maxDate}\n noYear={noYear}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...otherProps}\n />\n
\n
\n )}\n \n );\n};\n\nDatePicker.propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func,\n enableTimePicker: PropTypes.bool,\n enableEndTimePicker: PropTypes.bool,\n dateFormat: PropTypes.string,\n enableDateInput: PropTypes.bool,\n noYear: PropTypes.bool,\n startTimeClassName: PropTypes.string,\n position: PropTypes.oneOf([\"default\", \"bottom\", \"bottom-left\"]),\n // eslint-disable-next-line react/forbid-prop-types\n inputProps: PropTypes.object,\n containerClassName: PropTypes.string,\n};\n\nDatePicker.defaultProps = {\n value: moment().format(DATE_FORMAT),\n onChange: () => {},\n enableTimePicker: false,\n enableEndTimePicker: false,\n dateFormat: \"\",\n enableDateInput: true,\n noYear: false,\n startTimeClassName: \"\",\n position: \"default\",\n inputProps: {},\n containerClassName: \"\",\n};\n\nexport default DatePicker;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport FieldLabelV1 from \"./FieldLabelV1\";\nimport DatePicker from \"../v2/DatePicker\";\n\nfunction FieldDateV1({\n dateFormat = \"MM/DD/YYYY\",\n value = \"\",\n onChange,\n label,\n disabled = false,\n required,\n flexStyle = \"tw-flex-1\",\n enableTimePicker,\n position,\n noYear,\n}) {\n return (\n \n
\n {\n setDate((oldDate) => ({\n ...oldDate,\n validTemporary: \"\",\n impureTemporary: \"\",\n }));\n }}\n type=\"button\"\n schema=\"default\"\n size=\"small\"\n data-test-clear\n >\n Clear\n \n \n
\n \n {label &&
\n );\n}\nFieldDateV1.propTypes = {\n dateFormat: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n label: PropTypes.string,\n disabled: PropTypes.bool,\n required: PropTypes.bool,\n flexStyle: PropTypes.string,\n position: PropTypes.oneOf([\"default\", \"bottom\", \"bottom-left\"]),\n noYear: PropTypes.bool,\n};\n\nFieldDateV1.defaultProps = {\n dateFormat: \"MM/DD/YYYY\",\n value: \"\",\n onChange: () => {},\n label: \"\",\n disabled: false,\n required: false,\n flexStyle: \"tw-flex-1\",\n position: \"default\",\n noYear: false,\n};\nexport default FieldDateV1;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Close } from \"../v2/Icomoon\";\n\nconst tagStyles = {\n default:\n \"tw-bg-neutral-gray-10 tw-h-[24px] tw-w-fit tw-px-8px tw-py-4px tw-rounded-full tw-text-[11px] tw-flex tw-gap-[6px] tw-items-center tw-justify-center tw-font-bold hover:tw-text-semantic-red-100\",\n hover: \"hover:tw-text-semantic-red-100 hover:tw-bg-semantic-red-5 hover:tw-cursor-pointer\",\n press: \"active:tw-bg-semantic-red-100 active:tw-text-white\",\n};\n\nfunction TagV1({ text, onRemove, disabled }) {\n return (\n \n {\n if (dateValue) {\n onChange(moment(dateValue, dateFormat).format(\"YYYY-MM-DD\"));\n } else {\n onChange(dateValue);\n }\n }}\n value={moment(value).format(dateFormat)}\n inputProps={{\n placeholder: dateFormat,\n disabled: disabled,\n }}\n enableTimePicker={enableTimePicker}\n position={position}\n noYear={noYear}\n />\n
\n \n {label &&
\n )}\n \n {\n //labels group\n }\n {value?.length >= 1 && (\n \n {\n let eValue = e.target.value;\n eValue.length > 0 && isDropdownOpen === false && setIsDropdownOpen(true);\n eValue.length === 0 && isDropdownOpen === true && setIsDropdownOpen(false);\n setSearchText(eValue);\n }}\n onFocus={() => {\n setIsOnFocus(true);\n }}\n onBlur={() => {\n setIsOnFocus(false);\n }}\n />\n\n \n {!searchText ? setSearchText(\"\")} />}\n
\n\n {isDropdownOpen && (\n \n {options.length <= 0 ? (\n {\n onChange(option);\n setIsDropdownOpen(false);\n setSearchText(\"\");\n }}\n data-cy={`${option}_option`}\n >\n
\n );\n })\n )}\n no matches
\n ) : (\n options\n .filter((option) => {\n return option.toLowerCase().includes(searchText.toLowerCase());\n })\n .map((option) => {\n return (\n \n {option\n .replace(\n new RegExp(searchText, \"gi\"),\n (highlight) => `
\n {value.map((label) => {\n return (\n {\n onRemove(label);\n }}\n />\n );\n })}\n
\n )}\n \n );\n}\n\nFieldSearchLabelsV1.propTypes = {\n placeholder: PropTypes.string,\n label: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.string),\n value: PropTypes.arrayOf(PropTypes.string),\n required: PropTypes.bool,\n flexStyle: PropTypes.string,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n onRemove: PropTypes.func,\n searchText: PropTypes.string,\n setSearchText: PropTypes.func.isRequired,\n};\n\nFieldSearchLabelsV1.defaultProps = {\n placeholder: \"Search\",\n label: \"\",\n options: [\"Option1\", \"Option2\"],\n value: [],\n required: false,\n flexStyle: \"tw-flex-1\",\n className: \"\",\n disabled: false,\n onChange: () => {},\n onRemove: () => {},\n searchText: \"\",\n};\n\nexport default FieldSearchLabelsV1;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport TagV1 from \"./TagV1\";\nimport FieldLabelV1 from \"./FieldLabelV1\";\nimport styleSchema from \"./FieldStyle\";\nimport { CaretDown, CaretUp } from \"../v2/Icomoon\";\n\nconst schemaBasedClasses = (schemaName) => styleSchema[schemaName] || styleSchema.default;\n\nfunction FieldSelectLabelsWithCheckboxOptions({\n placeholder,\n options,\n value,\n onChange,\n onRemove,\n className,\n disabled,\n label,\n required,\n flexStyle,\n}) {\n let schemaKey = disabled ? \"disabled\" : \"regular\";\n\n const classes = `${schemaBasedClasses(schemaKey)} ${className}`;\n\n const ref = useRef();\n\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n const [checkboxOptions, setCheckboxOptions] = useState(\n options.map((option) => {\n return {\n value: option,\n checked: !!value?.includes(option),\n };\n }),\n );\n\n useEffect(() => {\n const checkIfClickedOutside = (e) => {\n if (isDropdownOpen && ref.current && !ref.current.contains(e.target)) {\n setIsDropdownOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", checkIfClickedOutside);\n\n return () => {\n document.removeEventListener(\"mousedown\", checkIfClickedOutside);\n };\n }, [isDropdownOpen]);\n\n useEffect(() => {\n const temp = checkboxOptions.reduce((newResults, option) => {\n if (option.checked) {\n if (newResults.length <= 0) return [option.value];\n return [...newResults, option.value];\n } else {\n return newResults;\n }\n }, []);\n\n if (!!temp) {\n onChange(temp);\n } else {\n onChange([]);\n }\n }, [checkboxOptions]);\n\n return (\n \n {label &&
\n {\n //labels group\n }\n {value && value.length >= 1 && (\n \n {\n setIsDropdownOpen((prev) => !prev);\n }}\n readOnly\n />\n\n
\n )}\n \n {isDropdownOpen ?
\n\n {isDropdownOpen && (\n \n {checkboxOptions.length <= 0 ? (\n {\n setCheckboxOptions((prev) => {\n prev[index].checked = !prev[index].checked;\n\n return [...prev];\n });\n }}\n data-cy={`${option.value}_checkbox`}\n >\n \n
\n );\n })\n )}\n no matches
\n ) : (\n checkboxOptions.map((option, index) => {\n return (\n{option.value}
\n \n {value.map((label, index) => {\n return (\n {\n setCheckboxOptions((prev) => {\n prev.find((option) => option.value === label).checked = false;\n\n return prev;\n });\n onRemove(label);\n }}\n />\n );\n })}\n
\n )}\n \n );\n}\n\nFieldSelectLabelsWithCheckboxOptions.propTypes = {\n placeholder: PropTypes.string,\n label: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.string),\n value: PropTypes.arrayOf(PropTypes.string),\n required: PropTypes.bool,\n flexStyle: PropTypes.string,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n onRemove: PropTypes.func,\n};\n\nFieldSelectLabelsWithCheckboxOptions.defaultProps = {\n placeholder: \"Select\",\n label: \"\",\n options: [\"Option1\", \"Option2\"],\n value: [],\n required: false,\n flexStyle: \"tw-flex-1\",\n className: \"\",\n disabled: false,\n onChange: () => {},\n onRemove: () => {},\n};\n\nexport default FieldSelectLabelsWithCheckboxOptions;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport FieldLabelV1 from \"./FieldLabelV1\";\nimport TextInput from \"../v2/TextInput/TextInput\";\n\nfunction FieldEmailV1({ className, placeholder, onChange, required, label, value, flexStyle, disabled }) {\n const isValidEmail = (email) => {\n return (\n String(email)\n .toLowerCase()\n .match(\n /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/,\n ) !== null\n );\n };\n\n return (\n \n {label && onChange(e.target.value)}\n disabled={disabled}\n value={value ? value : \"\"}\n />\n
\n );\n}\nFieldEmailV1.propTypes = {\n className: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n required: PropTypes.bool,\n label: PropTypes.string,\n value: PropTypes.string,\n flexStyle: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nFieldEmailV1.defaultProps = {\n className: \"\",\n placeholder: \"\",\n onChange: () => {},\n required: false,\n label: \"\",\n value: \"\",\n flexStyle: \"tw-flex-1\",\n disabled: false,\n};\nexport default FieldEmailV1;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport FieldLabelV1 from \"./FieldLabelV1\";\nimport TextInput from \"../v2/TextInput/TextInput\";\n\nfunction FieldTextAreaV1({\n className,\n placeholder,\n onChange,\n required,\n label,\n value,\n flexStyle,\n disabled,\n ...otherProps\n}) {\n return (\n \n {label && onChange && onChange(e.target.value)}\n value={value || \"\"}\n {...{ disabled, placeholder }}\n className={`tw-h-[76px] ${className}`}\n {...otherProps}\n />\n
\n );\n}\nFieldTextAreaV1.propTypes = {\n className: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n required: PropTypes.bool,\n label: PropTypes.string,\n value: PropTypes.string,\n flexStyle: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nFieldTextAreaV1.defaultProps = {\n className: \"\",\n placeholder: \"\",\n onChange: () => {},\n required: false,\n label: \"\",\n value: \"\",\n flexStyle: \"tw-flex-1 \",\n disabled: false,\n};\nexport default FieldTextAreaV1;\n","import { schemaGenerator } from \"../utils\";\n\nconst dictionary = {\n regular: {\n default: [\"tw-border-neutral-gray-15\", \"tw-bg-tinted-gray-50\", \"tw-text-neutral-gray-75\"],\n hover: [\"hover:tw-border-semantic-red-100\", \"hover:tw-bg-white\", \"hover:tw-text-semantic-red-100\"],\n active: [\"active:tw-border-semantic-red-100\", \"active:tw-bg-semantic-red-100\", \"active:tw-text-white\"],\n },\n};\n\nconst schema = schemaGenerator(dictionary);\n\nexport default schema;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Trash as TrashIcon } from \"../Icomoon\";\nimport styleSchema from \"./RemoveFieldButton.styles\";\n\nconst RemoveFieldButton = ({ className, type, onClick }) => (\n \n {\n onChange({ mlsId: value, mlsAgentId });\n }}\n error={isNumValid(mlsId)}\n isDropdownSearchable\n required\n />\n
\n );\n}\n\nMLSFieldView.propTypes = {\n value: PropTypes.shape({\n mlsId: PropTypes.number,\n mlsAgentId: PropTypes.string,\n }).isRequired,\n index: PropTypes.number.isRequired,\n setIsAddActive: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default MLSFieldView;\n","import React, { useState, useEffect, useMemo } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport MLSFieldView from \"./MLSFieldView\";\nimport TextButton from \"../../../shared/v2/TextButton\";\nimport { Plus } from \"../../../shared/v2/Icomoon\";\nimport { useContactPerson } from \"../../../reducers/contactsReducer/selectors\";\nimport { setPersonValue } from \"../../../reducers/contactsReducer\";\n\nfunction AddMLSSection() {\n const dispatch = useDispatch();\n const {\n loginUserAttributes: { usersMlsesAttributes = [] },\n } = useContactPerson();\n const userMLSList = useMemo(\n // eslint-disable-next-line no-underscore-dangle\n () => usersMlsesAttributes.filter((mls) => !mls._destroy),\n [usersMlsesAttributes],\n );\n const [isAddActive, setIsAddActive] = useState(false);\n\n const onAddMLS = () => {\n const mlsInit = { mlsId: null, mlsAgentId: \"\", tempId: Date.now() };\n dispatch(\n setPersonValue({\n key: \"loginUserAttributes.usersMlsesAttributes\",\n value: [...usersMlsesAttributes, { ...mlsInit }],\n }),\n );\n };\n\n useEffect(() => {\n if (userMLSList.length === 0) onAddMLS();\n }, [userMLSList]);\n\n const onUpdateMls = (targetMLS, value) => {\n dispatch(\n setPersonValue({\n key: \"loginUserAttributes.usersMlsesAttributes\",\n value: usersMlsesAttributes.map((mls) => {\n if (mls !== targetMLS) return mls;\n return { ...targetMLS, ...value };\n }),\n }),\n );\n };\n\n return (\n \n {\n onChange({ mlsId, mlsAgentId: e.target.value });\n }}\n className=\"tw-h-[37.25px]\"\n labelClassName=\"tw-mb-[4px]\"\n toolTipInfoContent={\n onRemove(curMls)} className=\"tw-mb-[1px] tw-mt-[24px]\" />\n
\n \n Enables your Brivity website to display agent-specific listings on their profile page. If you\n have multiple IDs, only the first one will be used to generate these listings.\n
\n }\n toolTipPlacement=\"top\"\n isRequired\n error={isStrInputLen(mlsAgentId)}\n />\n\n \n \n \n
\n );\n}\n\nexport default AddMLSSection;\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useDispatch } from \"react-redux\";\nimport FieldEmailV1 from \"../../shared/UtilsV1/FieldEmailV1\";\nimport FieldTextV1 from \"../../shared/UtilsV1/FieldTextV1\";\nimport Modal from \"../../shared/v2/Modal\";\nimport Button from \"../../shared/v2/Button\";\nimport { setPersonValue } from \"../../reducers/contactsReducer\";\n\nfunction AddSponsorModal({ onClose, show }) {\n const dispatch = useDispatch();\n const [inputData, setInputData] = useState({\n name: \"\",\n confirmedName: \"\",\n email: \"\",\n });\n\n const onAddSponsor = (sponsorName, sponsorEmail) => {\n dispatch(setPersonValue({ key: \"sponsorName\", value: sponsorName }));\n dispatch(setPersonValue({ key: \"sponsorEmail\", value: sponsorEmail }));\n };\n\n const [isAllRequiredFieldsFilled, setIsAllRequiredFieldsFill] = useState(false);\n\n useEffect(() => {\n if (inputData.name && inputData.name === inputData.confirmedName) {\n setIsAllRequiredFieldsFill(true);\n } else {\n setIsAllRequiredFieldsFill(false);\n }\n }, [inputData.name, inputData.confirmedName]);\n\n return (\n \n {userMLSList.map((mls, index) => (\n onUpdateMls(mls, value)}\n />\n ))}\n
\n \n
\n MLS
\n \n setInputData((prev) => ({ ...prev, name: value }))}\n />\n setInputData((prev) => ({ ...prev, confirmedName: value }))}\n />\n setInputData((prev) => ({ ...prev, email: value }))}\n />\n
\n \n You are about to add a sponsor for this user. The user’s sponsor is the person who referred them\n to the company.\n
\n \n ATTENTION: Adding a sponsor can only be done\n once per user. The sponsor cannot be removed or renamed once it has been added. Please ensure the\n sponsor’s name is spelled correctly.\n
\n \n \n {\n onAddSponsor(inputData.name, inputData.email);\n onClose();\n }}\n >\n Add Sponsor\n \n
\n \n {label &&
\n \n );\n}\n\nRevenuePartnerSearchableDropdown.propTypes = {\n placeholder: PropTypes.string,\n label: PropTypes.string,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n data: PropTypes.shape({}),\n }),\n }),\n ),\n required: PropTypes.bool,\n flexStyle: PropTypes.string,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n setSearchText: PropTypes.func.isRequired,\n searchText: PropTypes.string.isRequired,\n};\n\nRevenuePartnerSearchableDropdown.defaultProps = {\n placeholder: \"Search\",\n label: \"\",\n options: [\n { label: \"Option1\", value: { value: \"Option1\", data: null } },\n { label: \"Option2\", value: { value: \"Option2\", data: null } },\n ],\n required: false,\n flexStyle: \"tw-flex-1\",\n className: \"\",\n disabled: false,\n onChange: () => {},\n};\n\nexport default RevenuePartnerSearchableDropdown;\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useDispatch } from \"react-redux\";\nimport Modal from \"../../shared/v2/Modal\";\nimport Button from \"../../shared/v2/Button\";\nimport FieldSelect from \"../../shared/UtilsV1/FieldSelect\";\nimport { getRevenuePartnerOptions } from \"../../Settings/Users/api\";\nimport RevenuePartnerSearchableDropdown from \"./RevenuePartnerSearchableDropdown\";\nimport { setPersonValue } from \"../../reducers/contactsReducer\";\n\nconst revenuePartnerSourceOptions = [\n { label: \"Search PLACE users\", value: \"Search PLACE users\" },\n { label: \"Pre-PLACE\", value: \"Pre-PLACE\" },\n { label: \"No Revenue Partner in Agent Agreement\", value: \"No revenue partner\" },\n];\n\nfunction AddRevenuePartnerModal({ show, onClose }) {\n const dispatch = useDispatch();\n const [selectedRevenuePartnerSourceOption, setSelectedRevenuePartnerSourceOption] = useState(null);\n const [selectedRevenuePartner, setSelectedRevenuePartner] = useState(null);\n\n const [revenuePartnerSearchText, setRevenuePartnerSearchText] = useState(\"\");\n const [revenuePartnerSearchOptions, setRevenuePartnerSearchOptions] = useState([]);\n const [isAllRequiredFieldsFilled, setIsAllRequiredFieldsFill] = useState(false);\n\n useEffect(() => {\n if (selectedRevenuePartnerSourceOption && selectedRevenuePartnerSourceOption !== \"Search PLACE users\") {\n setIsAllRequiredFieldsFill(true);\n setSelectedRevenuePartner(null);\n } else if (\n selectedRevenuePartnerSourceOption &&\n selectedRevenuePartnerSourceOption === \"Search PLACE users\" &&\n selectedRevenuePartner\n ) {\n setIsAllRequiredFieldsFill(true);\n } else {\n setIsAllRequiredFieldsFill(false);\n }\n }, [selectedRevenuePartnerSourceOption, selectedRevenuePartner]);\n\n const onAddRevenuePartner = () => {\n dispatch(setPersonValue({ key: \"revenuePartnerType\", value: \"Person\" }));\n dispatch(\n setPersonValue({\n key: \"revenuePartnerPersonId\",\n value: selectedRevenuePartner.revenuePartnerPersonId,\n }),\n );\n dispatch(\n setPersonValue({\n key: \"revenuePartnerPersonName\",\n value: selectedRevenuePartner.revenuePartnerPersonName,\n }),\n );\n dispatch(\n setPersonValue({\n key: \"revenuePartnerPersonTeamName\",\n value: selectedRevenuePartner.revenuePartnerPersonTeamName,\n }),\n );\n };\n\n const handleOnAddRevenuePartner = () => {\n if (selectedRevenuePartnerSourceOption === \"Search PLACE users\") {\n onAddRevenuePartner();\n } else {\n dispatch(setPersonValue({ key: \"revenuePartnerType\", value: selectedRevenuePartnerSourceOption }));\n }\n onClose();\n };\n\n useEffect(() => {\n const fetchOptionsData = async () => {\n const res = await getRevenuePartnerOptions(revenuePartnerSearchText);\n setRevenuePartnerSearchOptions([\n ...res.data.map((option) => ({\n label: `${option.full_name} (${option.team_name})`,\n value: {\n value: option.person_id,\n data: {\n revenuePartnerPersonId: option.person_id,\n revenuePartnerPersonName: option.full_name,\n revenuePartnerPersonTeamName: option.team_name,\n },\n },\n })),\n ]);\n };\n // Update debounced function after 500 ms\n const handler = setTimeout(() => {\n if (revenuePartnerSearchText.length > 0) {\n fetchOptionsData();\n } else {\n setRevenuePartnerSearchOptions([]);\n }\n }, 500);\n // Cancel the timeout if value changes (also on delay change or unmount)\n return () => {\n clearTimeout(handler);\n };\n }, [revenuePartnerSearchText]);\n\n return (\n \n {\n setSearchText(e.target.value);\n }}\n onFocus={() => {\n setIsDropdownOpen(true);\n }}\n data-cy=\"revenue_partner_search_input\"\n />\n\n
\n )}\n \n {isDropdownOpen ?
\n\n {isDropdownOpen && (\n \n {filteredSearchOption.length <= 0 ? (\n {\n setSearchText(option.label);\n onChange(option.value);\n setIsDropdownOpen(false);\n }}\n data-cy={option.label}\n aria-hidden=\"true\"\n >\n {option.label}\n
\n ))\n )}\n no matches
\n ) : (\n filteredSearchOption.map((option) => (\n \n setSelectedRevenuePartnerSourceOption(value)}\n />\n {\n // Email will be disable, becasue it will take from Revenue Partner options, and not editable\n // Current revenue partner data only contains id, name, team name\n // needed avatar and email\n }\n {selectedRevenuePartnerSourceOption === \"Search PLACE users\" && (\n {\n setSelectedRevenuePartner(value.data);\n }}\n />\n )}\n
\n \n You are about to add a revenue partner for this user. The user’s revenue partner is the person who\n referred them to the company.\n
\n \n ATTENTION: Adding a revenue\n partner can only be done once per user. The revenue partner cannot be changed or removed once\n added.\n
\n\n \n
\n );\n}\n\nexport default CertificationsAndDesignationsSection;\n","import React from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport TextComboInput from \"@shared/v2/TextComboInput\";\n\nimport { useContactPerson } from \"../../../reducers/contactsReducer/selectors\";\nimport { setPersonValue } from \"../../../reducers/contactsReducer\";\n\nconst Title = () => {\n const dispatch = useDispatch();\n const { jobTitle } = useContactPerson();\n return (\n \n {\n const tempCertificates =\n !certificates || certificates.length <= 0 ? [input] : [...certificates, input];\n\n dispatch(setPersonValue({ key: \"certificates\", value: [...tempCertificates] }));\n setInput(null);\n }}\n className=\"tw-flex tw-items-center\"\n disabled={!input || (certificates && certificates.includes(input))}\n size=\"medium\"\n data-cy=\"certification_btn\"\n >\n ADD\n \n
\n\n \n {\n setInput(value);\n }}\n value={input}\n data-cy=\"certification_input\"\n />\n
\n \n {certificates &&\n certificates.map((item) => (\n \n dispatch(\n setPersonValue({\n key: \"certificates\",\n value: certificates.filter((itemName) => itemName !== item),\n }),\n )\n }\n />\n ))}\n
\n Displays as the user's job title on your Brivity website.
}\n toolTipPlacement=\"right\"\n />\n );\n};\n\nexport default Title;\n","import React from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport TextComboInput from \"@shared/v2/TextComboInput\";\nimport { inputDescription } from \"../../ModalViews/styles\";\nimport { useContactPerson } from \"../../../reducers/contactsReducer/selectors\";\nimport { setPersonValue } from \"../../../reducers/contactsReducer\";\n\nconst LicenseNumber = () => {\n const dispatch = useDispatch();\n const { licenseId } = useContactPerson().loginUserAttributes;\n return (\n <>\n \n If you’re required to display a license number next to other agent information, place it in this\n field.\n
\n \n );\n};\n\nexport default LicenseNumber;\n","/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useMemo, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport Dropdown from \"@shared/v2/Dropdown\";\nimport { headline2 } from \"@shared/styles\";\nimport FieldTextV1 from \"../../shared/UtilsV1/FieldTextV1\";\nimport FieldSelect from \"../../shared/UtilsV1/FieldSelect\";\nimport FieldRadioV1 from \"../../shared/UtilsV1/FieldRadioV1\";\nimport FieldDateV1 from \"../../shared/UtilsV1/FieldDateV1\";\nimport FieldSearchLabelsV1 from \"../../shared/UtilsV1/FieldSearchLabelsV1\";\nimport FieldSelectLabelsWithCheckboxOptions from \"../../shared/UtilsV1/FieldSelectLabelsWithCheckboxOptions\";\nimport FieldEmailV1 from \"../../shared/UtilsV1/FieldEmailV1\";\nimport FieldLabelV1 from \"../../shared/UtilsV1/FieldLabelV1\";\nimport Button from \"../../shared/v2/Button\";\nimport Toggle from \"../../shared/v2/Toggle\";\nimport FieldTextAreaV1 from \"../../shared/UtilsV1/FieldTextAreaV1\";\nimport { Plus } from \"../../shared/v2/Icomoon\";\nimport AddMLSSection from \"../ModalSections/AddMLSSection\";\nimport AddSponsorModal from \"./AddSponsorModal\";\nimport AddRevenuePartnerModal from \"./AddRevenuePartnerModal\";\nimport CertificationsAndDesignationsSection from \"../ModalSections/CertificationsAndDesignationsSection\";\nimport { useGetServiceAreaOptions } from \"../../Settings/Users/helper/hookHelper\";\nimport { containerView } from \"./styles\";\nimport Title from \"../ModalSections/Title\";\nimport { useCurrentUser, useFeatureFlags, useTheme } from \"../../reducers/layoutReducer/selectors\";\nimport { setPersonValue } from \"../../reducers/contactsReducer\";\nimport { useContactFormOptions, useContactPerson } from \"../../reducers/contactsReducer/selectors\";\nimport LicenseNumber from \"../ModalSections/LicenseNumber\";\n\nconst REV_TYPE_MAP_SRC = {\n \"Search PLACE users\": \"Search PLACE users\",\n \"Pre-PLACE\": \"Pre-PLACE\",\n \"No revenue partner\": \"No Revenue Partner in Agent Agreement\",\n};\n\nconst reshapeDropdownValue = (value) => ({ label: value, value });\n\nfunction UserDetailsView() {\n const dispatch = useDispatch();\n const theme = useTheme();\n const featureFlags = useFeatureFlags();\n const currentUser = useCurrentUser();\n const person = useContactPerson();\n const formOptions = useContactFormOptions();\n const [isAddingSponsor, setIsAddingSponsor] = useState(false);\n const [isAddingRevenuePartner, setIsAddingRevenuePartner] = useState(false);\n const [serviceAreaOptions, setServiceAreaOptions] = useState([]);\n const [serviceAreaInput, setServiceAreaInput] = useState(\"\");\n const [fluentLanguageInput, setFluentLanguageInput] = useState(\"\");\n\n const {\n agentHoursOptions,\n brokerageOptions,\n fluenciesOptions,\n positionOptions: basePositionOptions,\n specializationOptions,\n } = formOptions;\n\n const isOperator = person.displayedPosition === \"Operator\";\n\n const positionOptions = useMemo(() => {\n if (isOperator) return [...(basePositionOptions || []), { label: \"Operator\", value: \"Operator\" }];\n return basePositionOptions;\n }, [isOperator, basePositionOptions]);\n\n const isPlaceBrand = theme.name === \"place-theme\";\n\n const { licensed_since: licensedSince, organization_start_date: organizationStartDate } =\n person.milestones || {};\n const { active, role, lastSeen } = person.loginUserAttributes || {};\n const roleOptions = useMemo(\n () =>\n role === \"Account Owner\"\n ? [{ label: \"Account Owner\", value: \"Account Owner\" }]\n : [\n { label: \"Agent\", value: \"Agent\" },\n { label: \"Administrator\", value: \"Administrator\" },\n ],\n [role],\n );\n\n useGetServiceAreaOptions(serviceAreaInput, setServiceAreaOptions);\n\n const setPosition = () => {\n if (isOperator) return reshapeDropdownValue(person.displayedPosition);\n\n return person.position ? reshapeDropdownValue(person.position) : null;\n };\n\n return (\n \n dispatch(setPersonValue({ key: \"loginUserAttributes.lastSeen\", value }))}\n required\n />\n dispatch(setPersonValue({ key: \"reasonForLeaving\", value }))}\n />\n \n )}\n dispatch(setPersonValue({ key: \"loginUserAttributes.role\", value }))}\n defaultValue=\"Agent\"\n toolTipPlacement=\"right\"\n toolTipInfoContent={\n dispatch(setPersonValue({ key: \"position\", value }))}\n data-cy=\"select_position\"\n disabled={isOperator}\n />\n \n
\n }\n onChange={({ value }) => dispatch(setPersonValue({ key: \"agentStatus\", value }))}\n data-cy=\"select_agent_status\"\n />\n {!!person.agentStatus && person.agentStatus !== \"Unlicensed\" && (\n <>\n {person.agentStatus !== \"Inactive\" && (\n User Details
\n\n {!active && (\n <>\n This user has been archived
\n \n
\n }\n disabled={!currentUser.account.isAdmin || role === \"Account Owner\"}\n />\n \n User Types define each team member’s permissions within the account.\n
\n \n Administrators and the Account Owner have access to everything.\n
\n \n Agents cannot change settings or edit the account and\n
\n can only view listings and people which they are granted access to.
\n \n Unlicensed: User is not a licensed real estate agent.\n
\n \n Licensed - Inactive Agent: User is a licensed real estate agent but does not perform\n transactions.\n
\n \n Licensed - Active Agent: User is a licensed real estate agent and actively performs\n transactions.\n
\n \n dispatch(setPersonValue({ key: \"milestones.organization_start_date\", value }))}\n />\n\n {!!person.agentStatus && person.agentStatus !== \"Unlicensed\" && (\n dispatch(setPersonValue({ key: \"milestones.licensed_since\", value }))}\n />\n )}\n
\n {!!person.agentStatus && person.agentStatus !== \"Unlicensed\" && (\n <>\n \n Who referred this user to PLACE.
\n }\n toolTipPlacement=\"top\"\n readOnly\n value={\n person.revenuePartnerType === \"Person\" ||\n (!person.revenuePartnerType && person.revenuePartnerPersonName)\n ? `${person.revenuePartnerPersonName}${\n person.revenuePartnerPersonTeamName ? ` (${person.revenuePartnerPersonTeamName})` : \"\"\n }`\n : REV_TYPE_MAP_SRC[person.revenuePartnerType]\n }\n />\n \n ) : (\n \n Who referred this user to your company.
}\n disabled\n value={person.sponsorName}\n />\n \n \n dispatch(\n setPersonValue({\n key: \"exportToRoster\",\n value: person.exportToRoster === \"true\" ? \"false\" : \"true\",\n }),\n )\n }\n text={null}\n data-cy=\"roster-toggle_field\"\n />\n \n
\n ),\n toolTipPlacement: \"right\",\n }}\n />\n \n )}\n \n );\n}\n\nexport default UserDetailsView;\n","/* eslint-disable no-underscore-dangle */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextComboInput from \"@shared/v2/TextComboInput\";\nimport { isStrInputLen } from \"../../ModalViews/helpers\";\nimport FieldSelect from \"../../../shared/UtilsV1/FieldSelect\";\nimport FieldLabelV1 from \"../../../shared/UtilsV1/FieldLabelV1\";\nimport Radio from \"../../../shared/UtilsV1/FieldRadioV1/Radio\";\nimport RemoveFieldButton from \"../../../shared/v2/RemoveFieldButton\";\n\nfunction EmailView({\n emailDetails,\n value: currentEmail,\n index,\n setPersonValue,\n options,\n removable,\n required,\n}) {\n const onPrimaryChange = (emailPosition) => {\n const tempEmailDetails = emailDetails.map(({ set_main_email: _, ...email }) => {\n if (email.position === 1) {\n return { ...email, position: emailPosition };\n }\n if (email.position === emailPosition) {\n return { ...email, position: 1, set_main_email: true };\n }\n return email;\n });\n\n setPersonValue({ key: \"emailDetailsAttributes\", value: tempEmailDetails });\n };\n\n const onRemove = (targetEmail) => {\n const filteredEmailDetails = emailDetails.map((email) => {\n // Setting value to empty string currently necessary to trigger manage_main_email_state on Person record\n // when removing an email and to get a .changes from ActiveRecord for timeline_publishable\n if (email === targetEmail) return { ...email, value: `delete${email.value}`, _destroy: true };\n return email;\n });\n\n if (targetEmail.position === 1 && filteredEmailDetails.length > 0) {\n filteredEmailDetails[0].position = 1;\n }\n setPersonValue({ key: \"emailDetailsAttributes\", value: filteredEmailDetails });\n };\n\n const updateEmail = (targetEmail, value) =>\n setPersonValue({\n key: \"emailDetailsAttributes\",\n value: emailDetails.map((email) => {\n if (email !== targetEmail) return email;\n return { ...email, ...value };\n }),\n });\n\n return currentEmail?._destroy ? null : (\n Turn on if user is not a unique representation of a real person in the PLACE network.
\n\n Examples include:\n
- \n
- Duplicates of PLACE users who already exist in another CRM \n
- Users which do not represent real people (e.g. "Marketing Manager"). \n
\n
\n \n );\n}\nEmailView.propTypes = {\n emailDetails: PropTypes.arrayOf(PropTypes.shape({})),\n setPersonValue: PropTypes.func.isRequired,\n\n value: PropTypes.shape({\n category: PropTypes.string,\n id: PropTypes.number,\n name: PropTypes.string,\n position: PropTypes.number,\n value: PropTypes.string,\n _destroy: PropTypes.bool,\n }),\n index: PropTypes.number,\n removable: PropTypes.bool,\n options: PropTypes.arrayOf(PropTypes.shape({})),\n required: PropTypes.bool,\n};\n\nEmailView.defaultProps = {\n emailDetails: [],\n options: [],\n value: null,\n index: null,\n removable: false,\n required: false,\n};\n\nexport default EmailView;\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport EmailView from \"./EmailView\";\nimport Button from \"../../../shared/v2/Button\";\nimport TextButton from \"../../../shared/v2/TextButton\";\nimport { Plus } from \"../../../shared/v2/Icomoon\";\nimport { useFilterListOptions } from \"../../../Settings/Users/helper/hookHelper\";\n\nconst EmailTypeOptions = [\n { label: \"Personal\", value: \"personal\", isTaken: false, index: null },\n { label: \"Work\", value: \"work\", isTaken: false, index: null },\n { label: \"Other\", value: \"other\", isTaken: false, index: null },\n];\n\nfunction AddEmailSection({ required, emailDetails, setPersonValue, isDisplayByDefault }) {\n const [emailOptions, setEmailOptions] = useState([]);\n\n useFilterListOptions(EmailTypeOptions, setEmailOptions, emailDetails, \"category\");\n const onAddEmail = () => {\n const initEmail = {\n category: emailOptions.find((o) => !o.isTaken)?.value,\n position: emailDetails.length + 1,\n value: \"\",\n tempId: Date.now(),\n };\n if (emailDetails.length > 0) {\n setPersonValue({ key: \"emailDetailsAttributes\", value: [...emailDetails, { ...initEmail }] });\n } else {\n setPersonValue({ key: \"emailDetailsAttributes\", value: [{ ...initEmail, setMainEmail: true }] });\n }\n };\n\n useEffect(() => {\n if ((required || isDisplayByDefault) && emailDetails.length <= 0) {\n onAddEmail();\n }\n }, []);\n\n return (\n <>\n {emailDetails.length > 0 ? (\n \n {\n updateEmail(currentEmail, { value: e.target.value });\n }}\n data-cy=\"email-email-view\"\n />\n
\n\n \n updateEmail(currentEmail, { category: newValue })}\n value={currentEmail.category}\n placeholder=\"Choose One\"\n />\n\n {removable && (\n onRemove(currentEmail)} className=\"tw-mt-auto tw-mb-1px\" />\n )}\n
\n \n onPrimaryChange(currentEmail.position)}\n onKeyDown={() => onPrimaryChange(currentEmail.position)}\n role=\"button\"\n tabIndex=\"0\"\n >\n
\n \n \n \n
\n ) : (\n \n {emailDetails.map((email, index) => (\n !option.isTaken || option.index === index)\n .map((option) => ({ label: option.label, value: option.value }))}\n emailDetails={emailDetails}\n setPersonValue={setPersonValue}\n removable={!((required || isDisplayByDefault) && email.position === 1)}\n />\n ))}\n
\n\n \n
\n Email
\n \n onChange(e.target.value)}\n disabled={disabled}\n value={value}\n />\n
\n );\n}\n\nexport default FieldPhoneV1;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Modal from \"@shared/v2/Modal\";\nimport Button from \"@shared/v2/Button\";\n\nconst PhoneNumberModal = ({ showContext, onClose }) => {\n const { changedNumbers, conversationCount } = showContext || {};\n return (\n \n The following actions will archive {showContext.conversationCount} existing conversation\n {showContext.conversationCount > 1 && \"s\"} with their respective phone numbers. You will lose all\n conversation history. Existing timeline events will remain.\n
\n - \n {changedNumbers.map((changedNumber, i) => {\n if (changedNumber.currentNumber) {\n return (\n // eslint-disable-next-line react/no-array-index-key\n
- \n Phone number changed from {changedNumber.previousNumber} to {changedNumber.currentNumber}\n \n );\n }\n // eslint-disable-next-line react/no-array-index-key\n return
- {changedNumber.previousNumber} has been removed from this contact ;\n })}\n
\n
\n \n updatePhone(currentPhone, { value })}\n required={required && index === 0}\n />\n
\n\n \n updatePhone(currentPhone, { category: value })}\n value={category}\n />\n\n {removable && (\n {\n if (currentPhone.archiveConversationsCount > 0) {\n setShowContext({\n changedNumbers: [{ previousNumber: currentPhoneNumber }],\n conversationCount: currentPhone.archiveConversationsCount,\n });\n } else {\n onRemove(currentPhone);\n }\n }}\n className=\"tw-mb-1px tw-mt-auto\"\n />\n )}\n
\n \n onPrimaryChange(currentPhone.position)}\n onKeyDown={() => onPrimaryChange(currentPhone.position)}\n role=\"button\"\n tabIndex=\"0\"\n >\n
\n \n \n \n
\n ) : (\n \n {phoneList.map((phone, index) => (\n !option.isTaken || option.index === index)\n .map((option) => ({ label: option.label, value: option.value }))}\n phoneList={phoneList}\n setPersonValue={setPersonValue}\n />\n ))}\n
\n \n {label && (\n
\n \n );\n}\nFieldSelectWithCategoryOptionsWithSearchableDropdown.propTypes = {\n label: PropTypes.string,\n required: PropTypes.bool,\n flexStyle: PropTypes.string,\n className: PropTypes.string,\n error: PropTypes.string,\n placeholder: PropTypes.string,\n disabled: PropTypes.bool,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n category: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n }),\n ),\n optionsForValueMatch: PropTypes.arrayOf(\n PropTypes.shape({ label: PropTypes.string, value: PropTypes.string }),\n ),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onChange: PropTypes.func.isRequired,\n searchable: PropTypes.bool,\n};\n\nFieldSelectWithCategoryOptionsWithSearchableDropdown.defaultProps = {\n label: \"\",\n required: false,\n flexStyle: \"tw-flex-1\",\n className: \"\",\n error: \"\",\n placeholder: \"Select\",\n disabled: false,\n options: [\n { category: \"Category 1\", options: [{ label: \"option1\", value: \"option1\" }] },\n { category: \"Category 2\", options: [{ label: \"option2\", value: \"option2\" }] },\n ],\n optionsForValueMatch: [\n [\n { label: \"option1\", value: \"option1\" },\n { label: \"option2\", value: \"option2\" },\n ],\n ],\n searchable: false,\n value: \"\",\n};\nexport default FieldSelectWithCategoryOptionsWithSearchableDropdown;\n","/* eslint-disable no-underscore-dangle */\nimport React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextInput from \"@shared/v2/TextInput\";\nimport FieldSelect from \"../../../shared/UtilsV1/FieldSelect\";\nimport FieldSelectWithCategoryOptionsWithSearchableDropdown from \"../../../shared/UtilsV1/FieldSelectWithCategoryOptionsWithSearchableDropdown\";\nimport RemoveFieldButton from \"../../../shared/v2/RemoveFieldButton\";\n\nfunction AddressView({\n removable,\n currentAddress,\n index,\n setPersonValue,\n options,\n addressList,\n stateOptions,\n}) {\n const { addressType, city, postalCode, streetAddress, locality } = currentAddress;\n\n const optionsForValueMatch = useMemo(\n () =>\n [].concat(\n ...stateOptions.map((category) =>\n category.options.map((option) => ({ label: option.value, value: option.value })),\n ),\n ),\n [stateOptions],\n );\n\n const onRemove = (targetAddress) => {\n let filteredAddressList = addressList;\n if (Object.hasOwnProperty.call(targetAddress, \"id\")) {\n filteredAddressList = addressList.map((address) =>\n address === targetAddress ? { ...address, _destroy: true } : address,\n );\n } else {\n filteredAddressList = addressList.filter((address) => address !== targetAddress);\n }\n\n setPersonValue({ key: \"addressesAttributes\", value: filteredAddressList });\n };\n\n const updateAddress = (targetAddress, value) =>\n setPersonValue({\n key: \"addressesAttributes\",\n value: addressList.map((address) => {\n if (address !== targetAddress) return address;\n return { ...address, ...value };\n }),\n });\n\n return currentAddress._destroy ? null : (\n \n option.value === value)?.label : placeholder}\n className={`${classes} ${!value ? \"tw-text-neutral-gray-50\" : \"\"}`}\n onClick={() => {\n setIsDropdownOpen((prev) => !prev);\n }}\n {...otherProps}\n />\n\n
\n )}\n \n {isDropdownOpen ?
\n\n {isDropdownOpen && (\n \n {searchable && (\n
\n );\n })}\n {filteredSearchOptions.length <= 0 && (\n \n setSearchInputText(e.target.value)}\n placeholder=\"Search\"\n className={`${classes} tw-h-[24px]`}\n data-cy=\"category_dropdown_search_input\"\n />\n
\n )}\n {filteredSearchOptions?.map((categoryOptions) => {\n return (\n \n {\n onChange(subOption.value);\n setIsDropdownOpen(false);\n setSearchInputText(\"\");\n }}\n data-cy={`${subOption.label}`}\n >\n {subOption.label}\n
\n );\n })}\n {categoryOptions.category}
\n {categoryOptions.options.map((subOption) => {\n return (\n No option available
\n )}\n \n updateAddress(currentAddress, { streetAddress: e.target.value })}\n value={streetAddress}\n />\n
\n
\n );\n}\nconst addressPropType = PropTypes.shape({\n addressType: PropTypes.string,\n city: PropTypes.string,\n country: PropTypes.string,\n locality: PropTypes.string,\n streetAddress: PropTypes.string,\n postalCode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n id: PropTypes.number,\n _destroy: PropTypes.bool,\n});\nAddressView.propTypes = {\n removable: PropTypes.bool,\n currentAddress: addressPropType,\n index: PropTypes.number,\n setPersonValue: PropTypes.func.isRequired,\n addressList: PropTypes.arrayOf(addressPropType),\n stateOptions: PropTypes.arrayOf(\n PropTypes.shape({\n category: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n }),\n ).isRequired,\n options: PropTypes.arrayOf(PropTypes.shape({})),\n};\n\nAddressView.defaultProps = {\n removable: false,\n currentAddress: null,\n index: null,\n addressList: [],\n options: [],\n};\nexport default AddressView;\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Button from \"../../../shared/v2/Button\";\nimport { Plus } from \"../../../shared/v2/Icomoon\";\nimport TextButton from \"../../../shared/v2/TextButton\";\nimport AddressView from \"./AddressView\";\nimport { useFilterListOptions } from \"../../../Settings/Users/helper/hookHelper\";\n\nconst ADDRESS_TYPES = [\n { label: \"Home\", value: \"home\", isTaken: false, index: null },\n { label: \"Work\", value: \"work\", isTaken: false, index: null },\n { label: \"Mailing\", value: \"mailing\", isTaken: false, index: null },\n { label: \"Investment\", value: \"investment\", isTaken: false, index: null },\n { label: \"Other\", value: \"other\", isTaken: false, index: null },\n];\n\nfunction AddAddressSection({\n addressList,\n stateOptions,\n required,\n setPersonValue,\n isDisplayByDefault,\n modalType,\n}) {\n const [addressOptions, setAddressOptions] = useState([]);\n\n useFilterListOptions(ADDRESS_TYPES, setAddressOptions, addressList, \"addressType\");\n\n const onAddAddress = () => {\n const defaultAddress = {\n addressType: addressList?.length === 0 ? \"home\" : addressOptions.find((o) => !o.isTaken)?.value,\n city: \"\",\n country: null,\n locality: \"\",\n postalCode: \"\",\n streetAddress: \"\",\n tempId: Date.now(),\n };\n\n if (addressList?.length > 0) {\n setPersonValue({ key: \"addressesAttributes\", value: [...addressList, { ...defaultAddress }] });\n } else {\n setPersonValue({ key: \"addressesAttributes\", value: [{ ...defaultAddress }] });\n }\n };\n\n useEffect(() => {\n if ((required || isDisplayByDefault) && addressList.length <= 0) {\n onAddAddress();\n }\n }, []);\n\n return (\n <>\n {addressList.length > 0 ? (\n \n updateAddress(currentAddress, { addressType: newValue })}\n value={addressType}\n placeholder=\"Choose One\"\n />\n\n {removable && (\n onRemove(currentAddress)} className=\"tw-mt-auto tw-mb-[1px]\" />\n )}\n
\n \n updateAddress(currentAddress, { city: e.target.value })}\n value={city}\n />\n
\n \n updateAddress(currentAddress, { locality: value })}\n value={locality}\n placeholder=\"Select\"\n searchable\n />\n updateAddress(currentAddress, { postalCode: e.target.value })}\n value={postalCode}\n />\n
\n \n
\n
\n !option.isTaken || option.index === index)\n .map((option) => ({ label: option.label, value: option.value }))}\n addressList={addressList}\n stateOptions={stateOptions}\n setPersonValue={setPersonValue}\n />\n ))}\n \n
\n ) : (\n \n
Addresses
\n {modalType === \"user\" && (\n \n Work addresses are displayed on Brivity websites. No other address types will be displayed\n there.\n
\n )}\n {addressList.map((address, index) => (\n \n dispatch(setPersonValue(...args))}\n />\n dispatch(setPersonValue(...args))}\n />\n dispatch(setPersonValue(...args))}\n stateOptions={formOptions?.stateOptions}\n />\n\n {person.id && (\n
\n );\n}\n\nContactInfoView.propTypes = { modalType: PropTypes.string.isRequired };\n\nexport default ContactInfoView;\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { getDaysInMonth } from \"date-fns\";\nimport Dropdown from \"./Dropdown\";\nimport FieldLabel from \"./FieldLabel\";\nimport FieldError from \"./FieldError\";\nimport FieldHelper from \"./FieldHelper\";\nimport IconButton from \"./IconButton\";\nimport { TrashCanSolidV6 } from \"./Icomoon\";\n\nconst MONTH_OPTIONS = [\"01\", \"02\", \"03\", \"04\", \"05\", \"06\", \"07\", \"08\", \"09\", \"10\", \"11\", \"12\"].map((m) => ({\n value: m,\n label: m,\n}));\n\nconst YEAR_OPTIONS = (() => {\n const currentYear = new Date().getFullYear();\n const years = [];\n for (let i = 1900; i <= currentYear; i += 1) {\n const year = i.toString();\n years.push({ value: year, label: year });\n }\n return years;\n})();\n\nconst useDayOptions = (year = 0, month = 1) =>\n useMemo(() => {\n const daysInMonth = getDaysInMonth(new Date(year, month - 1));\n const days = [];\n for (let i = 1; i <= daysInMonth; i += 1) {\n const day = i.toString().padStart(2, \"0\");\n days.push({ value: day, label: day });\n }\n return days;\n }, [year, month]);\n\nconst DropdownDatePicker = ({ className, error, helperText, label, onChange, value }) => {\n const prevValue = useRef(null);\n const [month, setMonth] = useState(null);\n const [day, setDay] = useState(null);\n const [year, setYear] = useState(null);\n const DAY_OPTIONS = useDayOptions(year?.value, month?.value);\n\n useEffect(() => {\n const lastDay = DAY_OPTIONS[DAY_OPTIONS.length - 1];\n if ((day?.value || 0) > lastDay.value) {\n setDay(lastDay);\n }\n }, [DAY_OPTIONS, day]);\n\n const date = useMemo(\n () =>\n month || day || year ? `${year?.value || \"0000\"}-${month?.value || \"\"}-${day?.value || \"\"}` : null,\n [month, day, year],\n );\n\n useEffect(() => {\n if (value !== prevValue.current) {\n const [y, m, d] = (value || \"\").split(\"-\");\n setYear(YEAR_OPTIONS.find((o) => o.value === y) || null);\n setMonth(MONTH_OPTIONS.find((o) => o.value === m) || null);\n setDay(DAY_OPTIONS.find((o) => o.value === d) || null);\n }\n }, [value]);\n\n useEffect(() => {\n prevValue.current = date;\n onChange(date);\n }, [date]);\n\n return (\n Contact Info
\n {modalType === \"user\" && (\n \n Only your primary email, work phone and mobile phone can be displayed on your Brivity website.\n
\n )}\n \n dispatch(setPersonValue({ key: \"letterSalutation\", value }))}\n />\n dispatch(setPersonValue({ key: \"envelopeSalutation\", value }))}\n />\n
\n )}\n \n {label &&
\n );\n};\n\nDropdownDatePicker.propTypes = {\n className: PropTypes.string,\n error: PropTypes.string,\n helperText: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string,\n};\n\nDropdownDatePicker.defaultProps = {\n className: \"\",\n error: \"\",\n helperText: \"\",\n label: \"\",\n value: \"\",\n};\n\nexport default DropdownDatePicker;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport FieldLabelV1 from \"../../shared/UtilsV1/FieldLabelV1\";\nimport TagV1 from \"../../shared/UtilsV1/TagV1\";\nimport Button from \"../../shared/v2/Button\";\nimport { Plus } from \"../../shared/v2/Icomoon\";\nimport FieldSelect from \"../../shared/UtilsV1/FieldSelect\";\n\nfunction TagsSection({ tags, tagOptions, setPersonValue }) {\n const ref = useRef();\n const [isAddingTags, setIsAddingTags] = useState(false);\n\n const currentTagOptions = tagOptions.filter((option) => !tags.find(option.value));\n\n useEffect(() => {\n if (isAddingTags) {\n document.getElementById(\"tag_input_search\").focus();\n }\n const checkIfClickedOutside = (e) => {\n if (isAddingTags && ref.current && !ref.current.contains(e.target)) {\n setIsAddingTags(false);\n }\n };\n document.addEventListener(\"mousedown\", checkIfClickedOutside);\n\n return () => {\n document.removeEventListener(\"mousedown\", checkIfClickedOutside);\n };\n }, [isAddingTags]);\n\n return (\n \n {\n setYear(null);\n setMonth(null);\n setDay(null);\n }}\n >\n
\n {helperText && !error && \n
\n );\n}\nTagsSection.propTypes = {\n setPersonValue: PropTypes.func.isRequired,\n tags: PropTypes.arrayOf(PropTypes.string),\n tagOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }),\n ),\n};\n\nTagsSection.defaultProps = {\n tags: [],\n tagOptions: [],\n};\n\nexport default TagsSection;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport FieldLabelV1 from \"./FieldLabelV1\";\nimport TextInput from \"../v2/TextInput/TextInput\";\n\nfunction FieldTextWithIconV1({\n className,\n placeholder,\n label,\n value,\n flexStyle,\n iconClassName,\n onChange,\n ...otherProps\n}) {\n return (\n \n setIsAddingTags(true)}\n className=\"tw-flex tw-items-center\"\n data-cy=\"add_tag_button\"\n >\n \n setPersonValue({\n key: \"tagNames\",\n value: tags.filter((tagName) => tagName !== tag),\n })\n }\n />\n ))}\n
\n \n {\n setPersonValue({ key: \"tagNames\", value: [...tags, value] });\n setIsAddingTags(false);\n }}\n className=\"tw-w-[240px]\"\n data-cy=\"tag_section_select\"\n isInputSearchable\n id=\"tag_input_search\"\n dropdownWidth=\"!tw-left-0\"\n isAddNotFound\n />\n
\n )}\n {tags?.map((tag) => (\n \n {label && (\n
\n \n );\n}\n\nFieldTextWithIconV1.propTypes = {\n className: PropTypes.string,\n placeholder: PropTypes.string,\n label: PropTypes.string,\n value: PropTypes.string,\n flexStyle: PropTypes.string,\n iconClassName: PropTypes.string,\n onChange: PropTypes.func,\n};\n\nFieldTextWithIconV1.defaultProps = {\n className: \"\",\n placeholder: \"\",\n label: \"\",\n value: \"\",\n flexStyle: \"tw-flex-1\",\n iconClassName: \"\",\n\n onChange: () => {},\n};\n\nexport default FieldTextWithIconV1;\n\nfunction TikTokIcon() {\n return (\n \n \n {iconClassName === \"fa-tiktok\" ? (\n
\n )}\n \n {\n onChange(e.target.value);\n }}\n value={value || \"\"}\n {...otherProps}\n />\n
\n\n {iconClassName && (\n \n \n \n \n
\n );\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useDispatch } from \"react-redux\";\nimport { headline2 } from \"@shared/styles\";\nimport DropdownDatePicker from \"@shared/v2/DropdownDatePicker\";\nimport TextInput from \"@shared/v2/TextInput\";\nimport FieldTextV1 from \"../../shared/UtilsV1/FieldTextV1\";\nimport FieldDateV1 from \"../../shared/UtilsV1/FieldDateV1\";\nimport TagsSection from \"../ModalSections/TagsSection\";\nimport FieldTextWithIconV1 from \"../../shared/UtilsV1/FieldTextWithIconV1\";\nimport FieldSelect from \"../../shared/UtilsV1/FieldSelect\";\nimport { containerView } from \"./styles\";\nimport { setPersonValue } from \"../../reducers/contactsReducer\";\nimport { useContactFormOptions, useContactPerson } from \"../../reducers/contactsReducer/selectors\";\n\nconst PersonalDetailsView = ({ birthdateError }) => {\n const dispatch = useDispatch();\n const person = useContactPerson();\n const formOptions = useContactFormOptions();\n const { anniversary, birthdate } = person.milestones || {};\n\n return (\n \n dispatch(setPersonValue({ key: \"description\", value: e.target.value }))}\n />\n dispatch(setPersonValue(...args))}\n />\n\n
\n
\n );\n};\n\nPersonalDetailsView.propTypes = {\n birthdateError: PropTypes.string,\n};\n\nPersonalDetailsView.defaultProps = {\n birthdateError: \"\",\n};\n\nexport default PersonalDetailsView;\n","import React from \"react\";\nimport { format, formatISO, parse } from \"date-fns\";\nimport { useDispatch } from \"react-redux\";\nimport { headline2 } from \"@shared/styles\";\nimport DatePicker from \"@shared/v2/DatePicker\";\nimport { TZDate } from \"@date-fns/tz\";\nimport { containerView } from \"./styles\";\nimport { setPersonValue } from \"../../reducers/contactsReducer\";\nimport { useContactFormOptions, useContactPerson } from \"../../reducers/contactsReducer/selectors\";\n\nfunction CustomDatesView() {\n const dispatch = useDispatch();\n const { milestones = {} } = useContactPerson();\n const { customDateOptions } = useContactFormOptions();\n return (\n Personal Details
\n \n dispatch(setPersonValue({ key: \"timezone\", value }))}\n dropdownWidth=\"tw-w-fit\"\n />\n \n dispatch(\n setPersonValue({\n key: \"milestones.birthdate\",\n value,\n }),\n )\n }\n />\n
\n\n \n dispatch(setPersonValue({ key: \"maritalStatus\", value }))}\n />\n \n dispatch(\n setPersonValue({\n key: \"milestones.anniversary\",\n value,\n }),\n )\n }\n />\n
\n\n \n dispatch(setPersonValue({ key: \"kids\", value }))}\n />\n dispatch(setPersonValue({ key: \"pets\", value }))}\n />\n
\n\n \n dispatch(setPersonValue({ key: \"company\", value }))}\n />\n dispatch(setPersonValue({ key: \"jobTitle\", value }))}\n />\n
\n\n {formOptions.militaryStatusOptions && (\n \n dispatch(setPersonValue({ key: \"militaryStatus\", value }))}\n />\n
\n )}\n\n \n
\n dispatch(setPersonValue({ key: \"facebook\", value }))}\n placeholder=\"Facebook profile URL\"\n />\n dispatch(setPersonValue({ key: \"twitter\", value }))}\n placeholder=\"Twitter profile URL\"\n />\n
\n \n dispatch(setPersonValue({ key: \"linkedin\", value }))}\n placeholder=\"LinkedIn profile URL\"\n />\n dispatch(setPersonValue({ key: \"instagram\", value }))}\n placeholder=\"Instagram profile URL\"\n />\n
\n \n dispatch(setPersonValue({ key: \"youtube\", value }))}\n iconClassName=\"fa-youtube-play\"\n placeholder=\"YouTube profile URL\"\n />\n dispatch(setPersonValue({ key: \"pinterest\", value }))}\n iconClassName=\"fa-pinterest-p\"\n placeholder=\"Pinterest profile URL\"\n />\n
\n \n dispatch(setPersonValue({ key: \"tiktok\", value }))}\n iconClassName=\"fa-tiktok\"\n placeholder=\"TikTok profile URL\"\n />\n\n \n
\n \n
\n );\n}\n\nexport default CustomDatesView;\n","import React from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport TextComboInput from \"@shared/v2/TextComboInput\";\nimport { inputDescription } from \"../../ModalViews/styles\";\nimport { useContactPerson } from \"../../../reducers/contactsReducer/selectors\";\nimport { setPersonValue } from \"../../../reducers/contactsReducer\";\n\nconst Subdomain = () => {\n const dispatch = useDispatch();\n const { subdomain } = useContactPerson().loginUserAttributes;\n return (\n <>\n Custom Dates
\n \n {customDateOptions?.map((option) => {\n let formattedDate = milestones[option.name] || null;\n if (formattedDate) {\n const hasTime = formattedDate.includes(\" \");\n formattedDate = format(\n parse(formattedDate, hasTime ? \"yyyy-MM-dd hh:mm a\" : \"yyyy-MM-dd\", TZDate.tz(\"UTC\")),\n hasTime ? \"MM/dd/yyyy hh:mm a\" : \"MM/dd/yyyy\",\n );\n }\n\n return (\n {\n let formattedValue = value;\n\n if (value?.includes(\" \")) {\n const parsedDate = parse(value, \"MM/dd/yyyy hh:mm a\", TZDate.tz(\"UTC\"));\n formattedValue = format(parsedDate, \"yyyy-MM-dd hh:mm a\");\n } else if (value) {\n formattedValue = formatISO(parse(value, \"MM/dd/yyyy\", TZDate.tz(\"UTC\")), {\n representation: \"date\",\n });\n }\n\n dispatch(\n setPersonValue({\n key: `milestones.${option.name}`,\n value: formattedValue,\n }),\n );\n }}\n />\n );\n })}\n {customDateOptions?.length % 2 !== 0 && }\n
\n \n \n dispatch(setPersonValue({ key: \"loginUserAttributes.subdomain\", value: e.target.value }))\n }\n />\n .realestateteam.com\n
\n \n You can only create a subdomain for your main site.\n
\n \n );\n};\n\nexport default Subdomain;\n","import React from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport TextComboInput from \"@shared/v2/TextComboInput\";\n\nimport { defaultLink } from \"../../ModalViews/styles\";\nimport { setPersonValue } from \"../../../reducers/contactsReducer\";\nimport { useContactPerson } from \"../../../reducers/contactsReducer/selectors\";\n\nconst DefaultLinks = () => {\n const dispatch = useDispatch();\n const { zillowReviews, googleReviews, facebookReviews, realtorComReviews, yelpReviews, truliaReviews } =\n useContactPerson();\n\n return (\n \n
\n );\n};\n\nexport default DefaultLinks;\n","const fa6Solid = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"fill-drip\", \"arrows-to-circle\", \"circle-chevron-right\", \"chevron-circle-right\", \"at\", \"trash-can\", \"trash-alt\", \"text-height\", \"user-xmark\", \"user-times\", \"stethoscope\", \"message\", \"comment-alt\", \"info\", \"down-left-and-up-right-to-center\", \"compress-alt\", \"explosion\", \"file-lines\", \"file-alt\", \"file-text\", \"wave-square\", \"ring\", \"building-un\", \"dice-three\", \"calendar-days\", \"calendar-alt\", \"anchor-circle-check\", \"building-circle-arrow-right\", \"volleyball\", \"volleyball-ball\", \"arrows-up-to-line\", \"sort-down\", \"sort-desc\", \"circle-minus\", \"minus-circle\", \"door-open\", \"right-from-bracket\", \"sign-out-alt\", \"atom\", \"soap\", \"icons\", \"heart-music-camera-bolt\", \"microphone-lines-slash\", \"microphone-alt-slash\", \"bridge-circle-check\", \"pump-medical\", \"fingerprint\", \"hand-point-right\", \"magnifying-glass-location\", \"search-location\", \"forward-step\", \"step-forward\", \"face-smile-beam\", \"smile-beam\", \"flag-checkered\", \"football\", \"football-ball\", \"school-circle-exclamation\", \"crop\", \"angles-down\", \"angle-double-down\", \"users-rectangle\", \"people-roof\", \"people-line\", \"beer-mug-empty\", \"beer\", \"diagram-predecessor\", \"arrow-up-long\", \"long-arrow-up\", \"fire-flame-simple\", \"burn\", \"person\", \"male\", \"laptop\", \"file-csv\", \"menorah\", \"truck-plane\", \"record-vinyl\", \"face-grin-stars\", \"grin-stars\", \"bong\", \"spaghetti-monster-flying\", \"pastafarianism\", \"arrow-down-up-across-line\", \"spoon\", \"utensil-spoon\", \"jar-wheat\", \"envelopes-bulk\", \"mail-bulk\", \"file-circle-exclamation\", \"circle-h\", \"hospital-symbol\", \"pager\", \"address-book\", \"contact-book\", \"strikethrough\", \"k\", \"landmark-flag\", \"pencil\", \"pencil-alt\", \"backward\", \"caret-right\", \"comments\", \"paste\", \"file-clipboard\", \"code-pull-request\", \"clipboard-list\", \"truck-ramp-box\", \"truck-loading\", \"user-check\", \"vial-virus\", \"sheet-plastic\", \"blog\", \"user-ninja\", \"person-arrow-up-from-line\", \"scroll-torah\", \"torah\", \"broom-ball\", \"quidditch\", \"quidditch-broom-ball\", \"toggle-off\", \"box-archive\", \"archive\", \"person-drowning\", \"arrow-down-9-1\", \"sort-numeric-desc\", \"sort-numeric-down-alt\", \"face-grin-tongue-squint\", \"grin-tongue-squint\", \"spray-can\", \"truck-monster\", \"w\", \"earth-africa\", \"globe-africa\", \"rainbow\", \"circle-notch\", \"tablet-screen-button\", \"tablet-alt\", \"paw\", \"cloud\", \"trowel-bricks\", \"face-flushed\", \"flushed\", \"hospital-user\", \"tent-arrow-left-right\", \"gavel\", \"legal\", \"binoculars\", \"microphone-slash\", \"box-tissue\", \"motorcycle\", \"bell-concierge\", \"concierge-bell\", \"pen-ruler\", \"pencil-ruler\", \"people-arrows\", \"people-arrows-left-right\", \"mars-and-venus-burst\", \"square-caret-right\", \"caret-square-right\", \"scissors\", \"cut\", \"sun-plant-wilt\", \"toilets-portable\", \"hockey-puck\", \"table\", \"magnifying-glass-arrow-right\", \"tachograph-digital\", \"digital-tachograph\", \"users-slash\", \"clover\", \"reply\", \"mail-reply\", \"star-and-crescent\", \"house-fire\", \"square-minus\", \"minus-square\", \"helicopter\", \"compass\", \"square-caret-down\", \"caret-square-down\", \"file-circle-question\", \"laptop-code\", \"swatchbook\", \"prescription-bottle\", \"bars\", \"navicon\", \"people-group\", \"hourglass-end\", \"hourglass-3\", \"heart-crack\", \"heart-broken\", \"square-up-right\", \"external-link-square-alt\", \"face-kiss-beam\", \"kiss-beam\", \"film\", \"ruler-horizontal\", \"people-robbery\", \"lightbulb\", \"caret-left\", \"circle-exclamation\", \"exclamation-circle\", \"school-circle-xmark\", \"arrow-right-from-bracket\", \"sign-out\", \"circle-chevron-down\", \"chevron-circle-down\", \"unlock-keyhole\", \"unlock-alt\", \"cloud-showers-heavy\", \"headphones-simple\", \"headphones-alt\", \"sitemap\", \"circle-dollar-to-slot\", \"donate\", \"memory\", \"road-spikes\", \"fire-burner\", \"flag\", \"hanukiah\", \"feather\", \"volume-low\", \"volume-down\", \"comment-slash\", \"cloud-sun-rain\", \"compress\", \"wheat-awn\", \"wheat-alt\", \"ankh\", \"hands-holding-child\", \"asterisk\", \"square-check\", \"check-square\", \"peseta-sign\", \"heading\", \"header\", \"ghost\", \"list\", \"list-squares\", \"square-phone-flip\", \"phone-square-alt\", \"cart-plus\", \"gamepad\", \"circle-dot\", \"dot-circle\", \"face-dizzy\", \"dizzy\", \"egg\", \"house-medical-circle-xmark\", \"campground\", \"folder-plus\", \"futbol\", \"futbol-ball\", \"soccer-ball\", \"paintbrush\", \"paint-brush\", \"lock\", \"gas-pump\", \"hot-tub-person\", \"hot-tub\", \"map-location\", \"map-marked\", \"house-flood-water\", \"tree\", \"bridge-lock\", \"sack-dollar\", \"pen-to-square\", \"edit\", \"car-side\", \"share-nodes\", \"share-alt\", \"heart-circle-minus\", \"hourglass-half\", \"hourglass-2\", \"microscope\", \"sink\", \"bag-shopping\", \"shopping-bag\", \"arrow-down-z-a\", \"sort-alpha-desc\", \"sort-alpha-down-alt\", \"mitten\", \"person-rays\", \"users\", \"eye-slash\", \"flask-vial\", \"hand\", \"hand-paper\", \"om\", \"worm\", \"house-circle-xmark\", \"plug\", \"chevron-up\", \"hand-spock\", \"stopwatch\", \"face-kiss\", \"kiss\", \"bridge-circle-xmark\", \"face-grin-tongue\", \"grin-tongue\", \"chess-bishop\", \"face-grin-wink\", \"grin-wink\", \"ear-deaf\", \"deaf\", \"deafness\", \"hard-of-hearing\", \"road-circle-check\", \"dice-five\", \"square-rss\", \"rss-square\", \"land-mine-on\", \"i-cursor\", \"stamp\", \"stairs\", \"i\", \"hryvnia-sign\", \"hryvnia\", \"pills\", \"face-grin-wide\", \"grin-alt\", \"tooth\", \"v\", \"bangladeshi-taka-sign\", \"bicycle\", \"staff-snake\", \"rod-asclepius\", \"rod-snake\", \"staff-aesculapius\", \"head-side-cough-slash\", \"truck-medical\", \"ambulance\", \"wheat-awn-circle-exclamation\", \"snowman\", \"mortar-pestle\", \"road-barrier\", \"school\", \"igloo\", \"joint\", \"angle-right\", \"horse\", \"q\", \"g\", \"notes-medical\", \"temperature-half\", \"temperature-2\", \"thermometer-2\", \"thermometer-half\", \"dong-sign\", \"capsules\", \"poo-storm\", \"poo-bolt\", \"face-frown-open\", \"frown-open\", \"hand-point-up\", \"money-bill\", \"bookmark\", \"align-justify\", \"umbrella-beach\", \"helmet-un\", \"bullseye\", \"bacon\", \"hand-point-down\", \"arrow-up-from-bracket\", \"folder\", \"folder-blank\", \"file-waveform\", \"file-medical-alt\", \"radiation\", \"chart-simple\", \"mars-stroke\", \"vial\", \"gauge\", \"dashboard\", \"gauge-med\", \"tachometer-alt-average\", \"wand-magic-sparkles\", \"magic-wand-sparkles\", \"e\", \"pen-clip\", \"pen-alt\", \"bridge-circle-exclamation\", \"user\", \"school-circle-check\", \"dumpster\", \"van-shuttle\", \"shuttle-van\", \"building-user\", \"square-caret-left\", \"caret-square-left\", \"highlighter\", \"key\", \"bullhorn\", \"globe\", \"synagogue\", \"person-half-dress\", \"road-bridge\", \"location-arrow\", \"c\", \"tablet-button\", \"building-lock\", \"pizza-slice\", \"money-bill-wave\", \"chart-area\", \"area-chart\", \"house-flag\", \"person-circle-minus\", \"ban\", \"cancel\", \"camera-rotate\", \"spray-can-sparkles\", \"air-freshener\", \"star\", \"repeat\", \"cross\", \"box\", \"venus-mars\", \"arrow-pointer\", \"mouse-pointer\", \"maximize\", \"expand-arrows-alt\", \"charging-station\", \"shapes\", \"triangle-circle-square\", \"shuffle\", \"random\", \"person-running\", \"running\", \"mobile-retro\", \"grip-lines-vertical\", \"spider\", \"hands-bound\", \"file-invoice-dollar\", \"plane-circle-exclamation\", \"x-ray\", \"spell-check\", \"slash\", \"computer-mouse\", \"mouse\", \"arrow-right-to-bracket\", \"sign-in\", \"shop-slash\", \"store-alt-slash\", \"server\", \"virus-covid-slash\", \"shop-lock\", \"hourglass-start\", \"hourglass-1\", \"blender-phone\", \"building-wheat\", \"person-breastfeeding\", \"right-to-bracket\", \"sign-in-alt\", \"venus\", \"passport\", \"heart-pulse\", \"heartbeat\", \"people-carry-box\", \"people-carry\", \"temperature-high\", \"microchip\", \"crown\", \"weight-hanging\", \"xmarks-lines\", \"file-prescription\", \"weight-scale\", \"weight\", \"user-group\", \"user-friends\", \"arrow-up-a-z\", \"sort-alpha-up\", \"chess-knight\", \"face-laugh-squint\", \"laugh-squint\", \"wheelchair\", \"circle-arrow-up\", \"arrow-circle-up\", \"toggle-on\", \"person-walking\", \"walking\", \"l\", \"fire\", \"bed-pulse\", \"procedures\", \"shuttle-space\", \"space-shuttle\", \"face-laugh\", \"laugh\", \"folder-open\", \"heart-circle-plus\", \"code-fork\", \"city\", \"microphone-lines\", \"microphone-alt\", \"pepper-hot\", \"unlock\", \"colon-sign\", \"headset\", \"store-slash\", \"road-circle-xmark\", \"user-minus\", \"mars-stroke-up\", \"mars-stroke-v\", \"champagne-glasses\", \"glass-cheers\", \"clipboard\", \"house-circle-exclamation\", \"file-arrow-up\", \"file-upload\", \"wifi\", \"wifi-3\", \"wifi-strong\", \"bath\", \"bathtub\", \"underline\", \"user-pen\", \"user-edit\", \"signature\", \"stroopwafel\", \"bold\", \"anchor-lock\", \"building-ngo\", \"manat-sign\", \"not-equal\", \"border-top-left\", \"border-style\", \"map-location-dot\", \"map-marked-alt\", \"jedi\", \"square-poll-vertical\", \"poll\", \"mug-hot\", \"car-battery\", \"battery-car\", \"gift\", \"dice-two\", \"chess-queen\", \"glasses\", \"chess-board\", \"building-circle-check\", \"person-chalkboard\", \"mars-stroke-right\", \"mars-stroke-h\", \"hand-back-fist\", \"hand-rock\", \"square-caret-up\", \"caret-square-up\", \"cloud-showers-water\", \"chart-bar\", \"bar-chart\", \"hands-bubbles\", \"hands-wash\", \"less-than-equal\", \"train\", \"eye-low-vision\", \"low-vision\", \"crow\", \"sailboat\", \"window-restore\", \"square-plus\", \"plus-square\", \"torii-gate\", \"frog\", \"bucket\", \"image\", \"microphone\", \"cow\", \"caret-up\", \"screwdriver\", \"folder-closed\", \"house-tsunami\", \"square-nfi\", \"arrow-up-from-ground-water\", \"martini-glass\", \"glass-martini-alt\", \"rotate-left\", \"rotate-back\", \"rotate-backward\", \"undo-alt\", \"table-columns\", \"columns\", \"lemon\", \"head-side-mask\", \"handshake\", \"gem\", \"dolly\", \"dolly-box\", \"smoking\", \"minimize\", \"compress-arrows-alt\", \"monument\", \"snowplow\", \"angles-right\", \"angle-double-right\", \"cannabis\", \"circle-play\", \"play-circle\", \"tablets\", \"ethernet\", \"euro-sign\", \"eur\", \"euro\", \"chair\", \"circle-check\", \"check-circle\", \"circle-stop\", \"stop-circle\", \"compass-drafting\", \"drafting-compass\", \"plate-wheat\", \"icicles\", \"person-shelter\", \"neuter\", \"id-badge\", \"marker\", \"face-laugh-beam\", \"laugh-beam\", \"helicopter-symbol\", \"universal-access\", \"circle-chevron-up\", \"chevron-circle-up\", \"lari-sign\", \"volcano\", \"person-walking-dashed-line-arrow-right\", \"sterling-sign\", \"gbp\", \"pound-sign\", \"viruses\", \"square-person-confined\", \"user-tie\", \"arrow-down-long\", \"long-arrow-down\", \"tent-arrow-down-to-line\", \"certificate\", \"reply-all\", \"mail-reply-all\", \"suitcase\", \"person-skating\", \"skating\", \"filter-circle-dollar\", \"funnel-dollar\", \"camera-retro\", \"circle-arrow-down\", \"arrow-circle-down\", \"file-import\", \"arrow-right-to-file\", \"square-arrow-up-right\", \"external-link-square\", \"box-open\", \"scroll\", \"spa\", \"location-pin-lock\", \"pause\", \"hill-avalanche\", \"temperature-empty\", \"temperature-0\", \"thermometer-0\", \"thermometer-empty\", \"bomb\", \"registered\", \"address-card\", \"contact-card\", \"vcard\", \"scale-unbalanced-flip\", \"balance-scale-right\", \"subscript\", \"diamond-turn-right\", \"directions\", \"burst\", \"house-laptop\", \"laptop-house\", \"face-tired\", \"tired\", \"money-bills\", \"smog\", \"crutch\", \"cloud-arrow-up\", \"cloud-upload\", \"cloud-upload-alt\", \"palette\", \"arrows-turn-right\", \"vest\", \"ferry\", \"arrows-down-to-people\", \"seedling\", \"sprout\", \"left-right\", \"arrows-alt-h\", \"boxes-packing\", \"circle-arrow-left\", \"arrow-circle-left\", \"group-arrows-rotate\", \"bowl-food\", \"candy-cane\", \"arrow-down-wide-short\", \"sort-amount-asc\", \"sort-amount-down\", \"cloud-bolt\", \"thunderstorm\", \"text-slash\", \"remove-format\", \"face-smile-wink\", \"smile-wink\", \"file-word\", \"file-powerpoint\", \"arrows-left-right\", \"arrows-h\", \"house-lock\", \"cloud-arrow-down\", \"cloud-download\", \"cloud-download-alt\", \"children\", \"chalkboard\", \"blackboard\", \"user-large-slash\", \"user-alt-slash\", \"envelope-open\", \"handshake-simple-slash\", \"handshake-alt-slash\", \"mattress-pillow\", \"guarani-sign\", \"arrows-rotate\", \"refresh\", \"sync\", \"fire-extinguisher\", \"cruzeiro-sign\", \"greater-than-equal\", \"shield-halved\", \"shield-alt\", \"book-atlas\", \"atlas\", \"virus\", \"envelope-circle-check\", \"layer-group\", \"arrows-to-dot\", \"archway\", \"heart-circle-check\", \"house-chimney-crack\", \"house-damage\", \"file-zipper\", \"file-archive\", \"square\", \"martini-glass-empty\", \"glass-martini\", \"couch\", \"cedi-sign\", \"italic\", \"church\", \"comments-dollar\", \"democrat\", \"z\", \"person-skiing\", \"skiing\", \"road-lock\", \"a\", \"temperature-arrow-down\", \"temperature-down\", \"feather-pointed\", \"feather-alt\", \"p\", \"snowflake\", \"newspaper\", \"rectangle-ad\", \"ad\", \"circle-arrow-right\", \"arrow-circle-right\", \"filter-circle-xmark\", \"locust\", \"sort\", \"unsorted\", \"list-ol\", \"list-1-2\", \"list-numeric\", \"person-dress-burst\", \"money-check-dollar\", \"money-check-alt\", \"vector-square\", \"bread-slice\", \"language\", \"face-kiss-wink-heart\", \"kiss-wink-heart\", \"filter\", \"question\", \"file-signature\", \"up-down-left-right\", \"arrows-alt\", \"house-chimney-user\", \"hand-holding-heart\", \"puzzle-piece\", \"money-check\", \"star-half-stroke\", \"star-half-alt\", \"code\", \"whiskey-glass\", \"glass-whiskey\", \"building-circle-exclamation\", \"magnifying-glass-chart\", \"arrow-up-right-from-square\", \"external-link\", \"cubes-stacked\", \"won-sign\", \"krw\", \"won\", \"virus-covid\", \"austral-sign\", \"f\", \"leaf\", \"road\", \"taxi\", \"cab\", \"person-circle-plus\", \"chart-pie\", \"pie-chart\", \"bolt-lightning\", \"sack-xmark\", \"file-excel\", \"file-contract\", \"fish-fins\", \"building-flag\", \"face-grin-beam\", \"grin-beam\", \"object-ungroup\", \"poop\", \"location-pin\", \"map-marker\", \"kaaba\", \"toilet-paper\", \"helmet-safety\", \"hard-hat\", \"hat-hard\", \"eject\", \"circle-right\", \"arrow-alt-circle-right\", \"plane-circle-check\", \"face-rolling-eyes\", \"meh-rolling-eyes\", \"object-group\", \"chart-line\", \"line-chart\", \"mask-ventilator\", \"arrow-right\", \"signs-post\", \"map-signs\", \"cash-register\", \"person-circle-question\", \"h\", \"tarp\", \"screwdriver-wrench\", \"tools\", \"arrows-to-eye\", \"plug-circle-bolt\", \"heart\", \"mars-and-venus\", \"house-user\", \"home-user\", \"dumpster-fire\", \"house-crack\", \"martini-glass-citrus\", \"cocktail\", \"face-surprise\", \"surprise\", \"bottle-water\", \"circle-pause\", \"pause-circle\", \"toilet-paper-slash\", \"apple-whole\", \"apple-alt\", \"kitchen-set\", \"r\", \"temperature-quarter\", \"temperature-1\", \"thermometer-1\", \"thermometer-quarter\", \"cube\", \"bitcoin-sign\", \"shield-dog\", \"solar-panel\", \"lock-open\", \"elevator\", \"money-bill-transfer\", \"money-bill-trend-up\", \"house-flood-water-circle-arrow-right\", \"square-poll-horizontal\", \"poll-h\", \"circle\", \"backward-fast\", \"fast-backward\", \"recycle\", \"user-astronaut\", \"plane-slash\", \"trademark\", \"basketball\", \"basketball-ball\", \"satellite-dish\", \"circle-up\", \"arrow-alt-circle-up\", \"mobile-screen-button\", \"mobile-alt\", \"volume-high\", \"volume-up\", \"users-rays\", \"wallet\", \"clipboard-check\", \"file-audio\", \"burger\", \"hamburger\", \"wrench\", \"bugs\", \"rupee-sign\", \"rupee\", \"file-image\", \"circle-question\", \"question-circle\", \"plane-departure\", \"handshake-slash\", \"book-bookmark\", \"code-branch\", \"hat-cowboy\", \"bridge\", \"phone-flip\", \"phone-alt\", \"truck-front\", \"cat\", \"anchor-circle-exclamation\", \"truck-field\", \"route\", \"clipboard-question\", \"panorama\", \"comment-medical\", \"teeth-open\", \"file-circle-minus\", \"tags\", \"wine-glass\", \"forward-fast\", \"fast-forward\", \"face-meh-blank\", \"meh-blank\", \"square-parking\", \"parking\", \"house-signal\", \"bars-progress\", \"tasks-alt\", \"faucet-drip\", \"cart-flatbed\", \"dolly-flatbed\", \"ban-smoking\", \"smoking-ban\", \"terminal\", \"mobile-button\", \"house-medical-flag\", \"basket-shopping\", \"shopping-basket\", \"tape\", \"bus-simple\", \"bus-alt\", \"eye\", \"face-sad-cry\", \"sad-cry\", \"audio-description\", \"person-military-to-person\", \"file-shield\", \"user-slash\", \"pen\", \"tower-observation\", \"file-code\", \"signal\", \"signal-5\", \"signal-perfect\", \"bus\", \"heart-circle-xmark\", \"house-chimney\", \"home-lg\", \"window-maximize\", \"face-frown\", \"frown\", \"prescription\", \"shop\", \"store-alt\", \"floppy-disk\", \"save\", \"vihara\", \"scale-unbalanced\", \"balance-scale-left\", \"sort-up\", \"sort-asc\", \"comment-dots\", \"commenting\", \"plant-wilt\", \"diamond\", \"face-grin-squint\", \"grin-squint\", \"hand-holding-dollar\", \"hand-holding-usd\", \"bacterium\", \"hand-pointer\", \"drum-steelpan\", \"hand-scissors\", \"hands-praying\", \"praying-hands\", \"arrow-rotate-right\", \"arrow-right-rotate\", \"arrow-rotate-forward\", \"redo\", \"biohazard\", \"location-crosshairs\", \"location\", \"mars-double\", \"child-dress\", \"users-between-lines\", \"lungs-virus\", \"face-grin-tears\", \"grin-tears\", \"phone\", \"calendar-xmark\", \"calendar-times\", \"child-reaching\", \"head-side-virus\", \"user-gear\", \"user-cog\", \"arrow-up-1-9\", \"sort-numeric-up\", \"door-closed\", \"shield-virus\", \"dice-six\", \"mosquito-net\", \"bridge-water\", \"person-booth\", \"text-width\", \"hat-wizard\", \"pen-fancy\", \"person-digging\", \"digging\", \"trash\", \"gauge-simple\", \"gauge-simple-med\", \"tachometer-average\", \"book-medical\", \"poo\", \"quote-right\", \"quote-right-alt\", \"shirt\", \"t-shirt\", \"tshirt\", \"cubes\", \"divide\", \"tenge-sign\", \"tenge\", \"headphones\", \"hands-holding\", \"hands-clapping\", \"republican\", \"arrow-left\", \"person-circle-xmark\", \"ruler\", \"align-left\", \"dice-d6\", \"restroom\", \"j\", \"users-viewfinder\", \"file-video\", \"up-right-from-square\", \"external-link-alt\", \"table-cells\", \"th\", \"file-pdf\", \"book-bible\", \"bible\", \"o\", \"suitcase-medical\", \"medkit\", \"user-secret\", \"otter\", \"person-dress\", \"female\", \"comment-dollar\", \"business-time\", \"briefcase-clock\", \"table-cells-large\", \"th-large\", \"book-tanakh\", \"tanakh\", \"phone-volume\", \"volume-control-phone\", \"hat-cowboy-side\", \"clipboard-user\", \"child\", \"lira-sign\", \"satellite\", \"plane-lock\", \"tag\", \"comment\", \"cake-candles\", \"birthday-cake\", \"cake\", \"envelope\", \"angles-up\", \"angle-double-up\", \"paperclip\", \"arrow-right-to-city\", \"ribbon\", \"lungs\", \"arrow-up-9-1\", \"sort-numeric-up-alt\", \"litecoin-sign\", \"border-none\", \"circle-nodes\", \"parachute-box\", \"indent\", \"truck-field-un\", \"hourglass\", \"hourglass-empty\", \"mountain\", \"user-doctor\", \"user-md\", \"circle-info\", \"info-circle\", \"cloud-meatball\", \"camera\", \"camera-alt\", \"square-virus\", \"meteor\", \"car-on\", \"sleigh\", \"arrow-down-1-9\", \"sort-numeric-asc\", \"sort-numeric-down\", \"hand-holding-droplet\", \"hand-holding-water\", \"water\", \"calendar-check\", \"braille\", \"prescription-bottle-medical\", \"prescription-bottle-alt\", \"landmark\", \"truck\", \"crosshairs\", \"person-cane\", \"tent\", \"vest-patches\", \"check-double\", \"arrow-down-a-z\", \"sort-alpha-asc\", \"sort-alpha-down\", \"money-bill-wheat\", \"cookie\", \"arrow-rotate-left\", \"arrow-left-rotate\", \"arrow-rotate-back\", \"arrow-rotate-backward\", \"undo\", \"hard-drive\", \"hdd\", \"face-grin-squint-tears\", \"grin-squint-tears\", \"dumbbell\", \"rectangle-list\", \"list-alt\", \"tarp-droplet\", \"house-medical-circle-check\", \"person-skiing-nordic\", \"skiing-nordic\", \"calendar-plus\", \"plane-arrival\", \"circle-left\", \"arrow-alt-circle-left\", \"train-subway\", \"subway\", \"chart-gantt\", \"indian-rupee-sign\", \"indian-rupee\", \"inr\", \"crop-simple\", \"crop-alt\", \"money-bill-1\", \"money-bill-alt\", \"left-long\", \"long-arrow-alt-left\", \"dna\", \"virus-slash\", \"minus\", \"subtract\", \"chess\", \"arrow-left-long\", \"long-arrow-left\", \"plug-circle-check\", \"street-view\", \"franc-sign\", \"volume-off\", \"hands-asl-interpreting\", \"american-sign-language-interpreting\", \"asl-interpreting\", \"hands-american-sign-language-interpreting\", \"gear\", \"cog\", \"droplet-slash\", \"tint-slash\", \"mosque\", \"mosquito\", \"star-of-david\", \"person-military-rifle\", \"cart-shopping\", \"shopping-cart\", \"vials\", \"plug-circle-plus\", \"place-of-worship\", \"grip-vertical\", \"arrow-turn-up\", \"level-up\", \"u\", \"square-root-variable\", \"square-root-alt\", \"clock\", \"clock-four\", \"backward-step\", \"step-backward\", \"pallet\", \"faucet\", \"baseball-bat-ball\", \"s\", \"timeline\", \"keyboard\", \"caret-down\", \"house-chimney-medical\", \"clinic-medical\", \"temperature-three-quarters\", \"temperature-3\", \"thermometer-3\", \"thermometer-three-quarters\", \"mobile-screen\", \"mobile-android-alt\", \"plane-up\", \"piggy-bank\", \"battery-half\", \"battery-3\", \"mountain-city\", \"coins\", \"khanda\", \"sliders\", \"sliders-h\", \"folder-tree\", \"network-wired\", \"map-pin\", \"hamsa\", \"cent-sign\", \"flask\", \"person-pregnant\", \"wand-sparkles\", \"ellipsis-vertical\", \"ellipsis-v\", \"ticket\", \"power-off\", \"right-long\", \"long-arrow-alt-right\", \"flag-usa\", \"laptop-file\", \"tty\", \"teletype\", \"diagram-next\", \"person-rifle\", \"house-medical-circle-exclamation\", \"closed-captioning\", \"person-hiking\", \"hiking\", \"venus-double\", \"images\", \"calculator\", \"people-pulling\", \"n\", \"cable-car\", \"tram\", \"cloud-rain\", \"building-circle-xmark\", \"ship\", \"arrows-down-to-line\", \"download\", \"face-grin\", \"grin\", \"delete-left\", \"backspace\", \"eye-dropper\", \"eye-dropper-empty\", \"eyedropper\", \"file-circle-check\", \"forward\", \"mobile\", \"mobile-android\", \"mobile-phone\", \"face-meh\", \"meh\", \"align-center\", \"book-skull\", \"book-dead\", \"id-card\", \"drivers-license\", \"outdent\", \"dedent\", \"heart-circle-exclamation\", \"house\", \"home\", \"home-alt\", \"home-lg-alt\", \"calendar-week\", \"laptop-medical\", \"b\", \"file-medical\", \"dice-one\", \"kiwi-bird\", \"arrow-right-arrow-left\", \"exchange\", \"rotate-right\", \"redo-alt\", \"rotate-forward\", \"utensils\", \"cutlery\", \"arrow-up-wide-short\", \"sort-amount-up\", \"mill-sign\", \"bowl-rice\", \"skull\", \"tower-broadcast\", \"broadcast-tower\", \"truck-pickup\", \"up-long\", \"long-arrow-alt-up\", \"stop\", \"code-merge\", \"upload\", \"hurricane\", \"mound\", \"toilet-portable\", \"compact-disc\", \"file-arrow-down\", \"file-download\", \"caravan\", \"shield-cat\", \"bolt\", \"zap\", \"glass-water\", \"oil-well\", \"vault\", \"mars\", \"toilet\", \"plane-circle-xmark\", \"yen-sign\", \"cny\", \"jpy\", \"rmb\", \"yen\", \"ruble-sign\", \"rouble\", \"rub\", \"ruble\", \"sun\", \"guitar\", \"face-laugh-wink\", \"laugh-wink\", \"horse-head\", \"bore-hole\", \"industry\", \"circle-down\", \"arrow-alt-circle-down\", \"arrows-turn-to-dots\", \"florin-sign\", \"arrow-down-short-wide\", \"sort-amount-desc\", \"sort-amount-down-alt\", \"less-than\", \"angle-down\", \"car-tunnel\", \"head-side-cough\", \"grip-lines\", \"thumbs-down\", \"user-lock\", \"arrow-right-long\", \"long-arrow-right\", \"anchor-circle-xmark\", \"ellipsis\", \"ellipsis-h\", \"chess-pawn\", \"kit-medical\", \"first-aid\", \"person-through-window\", \"toolbox\", \"hands-holding-circle\", \"bug\", \"credit-card\", \"credit-card-alt\", \"car\", \"automobile\", \"hand-holding-hand\", \"book-open-reader\", \"book-reader\", \"mountain-sun\", \"arrows-left-right-to-line\", \"dice-d20\", \"truck-droplet\", \"file-circle-xmark\", \"temperature-arrow-up\", \"temperature-up\", \"medal\", \"bed\", \"square-h\", \"h-square\", \"podcast\", \"temperature-full\", \"temperature-4\", \"thermometer-4\", \"thermometer-full\", \"bell\", \"superscript\", \"plug-circle-xmark\", \"star-of-life\", \"phone-slash\", \"paint-roller\", \"handshake-angle\", \"hands-helping\", \"location-dot\", \"map-marker-alt\", \"file\", \"greater-than\", \"person-swimming\", \"swimmer\", \"arrow-down\", \"droplet\", \"tint\", \"eraser\", \"earth-americas\", \"earth\", \"earth-america\", \"globe-americas\", \"person-burst\", \"dove\", \"battery-empty\", \"battery-0\", \"socks\", \"inbox\", \"section\", \"gauge-high\", \"tachometer-alt\", \"tachometer-alt-fast\", \"envelope-open-text\", \"hospital\", \"hospital-alt\", \"hospital-wide\", \"wine-bottle\", \"chess-rook\", \"bars-staggered\", \"reorder\", \"stream\", \"dharmachakra\", \"hotdog\", \"person-walking-with-cane\", \"blind\", \"drum\", \"ice-cream\", \"heart-circle-bolt\", \"fax\", \"paragraph\", \"check-to-slot\", \"vote-yea\", \"star-half\", \"boxes-stacked\", \"boxes\", \"boxes-alt\", \"link\", \"chain\", \"ear-listen\", \"assistive-listening-systems\", \"tree-city\", \"play\", \"font\", \"rupiah-sign\", \"magnifying-glass\", \"search\", \"table-tennis-paddle-ball\", \"ping-pong-paddle-ball\", \"table-tennis\", \"person-dots-from-line\", \"diagnoses\", \"trash-can-arrow-up\", \"trash-restore-alt\", \"naira-sign\", \"cart-arrow-down\", \"walkie-talkie\", \"file-pen\", \"file-edit\", \"receipt\", \"square-pen\", \"pen-square\", \"pencil-square\", \"suitcase-rolling\", \"person-circle-exclamation\", \"chevron-down\", \"battery-full\", \"battery\", \"battery-5\", \"skull-crossbones\", \"code-compare\", \"list-ul\", \"list-dots\", \"school-lock\", \"tower-cell\", \"down-long\", \"long-arrow-alt-down\", \"ranking-star\", \"chess-king\", \"person-harassing\", \"brazilian-real-sign\", \"landmark-dome\", \"landmark-alt\", \"arrow-up\", \"tv\", \"television\", \"tv-alt\", \"shrimp\", \"list-check\", \"tasks\", \"jug-detergent\", \"circle-user\", \"user-circle\", \"user-shield\", \"wind\", \"car-burst\", \"car-crash\", \"y\", \"person-snowboarding\", \"snowboarding\", \"truck-fast\", \"shipping-fast\", \"fish\", \"user-graduate\", \"circle-half-stroke\", \"adjust\", \"clapperboard\", \"circle-radiation\", \"radiation-alt\", \"baseball\", \"baseball-ball\", \"jet-fighter-up\", \"diagram-project\", \"project-diagram\", \"copy\", \"volume-xmark\", \"volume-mute\", \"volume-times\", \"hand-sparkles\", \"grip\", \"grip-horizontal\", \"share-from-square\", \"share-square\", \"child-combatant\", \"child-rifle\", \"gun\", \"square-phone\", \"phone-square\", \"plus\", \"add\", \"expand\", \"computer\", \"xmark\", \"close\", \"multiply\", \"remove\", \"times\", \"arrows-up-down-left-right\", \"arrows\", \"chalkboard-user\", \"chalkboard-teacher\", \"peso-sign\", \"building-shield\", \"baby\", \"users-line\", \"quote-left\", \"quote-left-alt\", \"tractor\", \"trash-arrow-up\", \"trash-restore\", \"arrow-down-up-lock\", \"lines-leaning\", \"ruler-combined\", \"copyright\", \"equals\", \"blender\", \"teeth\", \"shekel-sign\", \"ils\", \"shekel\", \"sheqel\", \"sheqel-sign\", \"map\", \"rocket\", \"photo-film\", \"photo-video\", \"folder-minus\", \"store\", \"arrow-trend-up\", \"plug-circle-minus\", \"sign-hanging\", \"sign\", \"bezier-curve\", \"bell-slash\", \"tablet\", \"tablet-android\", \"school-flag\", \"fill\", \"angle-up\", \"drumstick-bite\", \"holly-berry\", \"chevron-left\", \"bacteria\", \"hand-lizard\", \"notdef\", \"disease\", \"briefcase-medical\", \"genderless\", \"chevron-right\", \"retweet\", \"car-rear\", \"car-alt\", \"pump-soap\", \"video-slash\", \"battery-quarter\", \"battery-2\", \"radio\", \"baby-carriage\", \"carriage-baby\", \"traffic-light\", \"thermometer\", \"vr-cardboard\", \"hand-middle-finger\", \"percent\", \"percentage\", \"truck-moving\", \"glass-water-droplet\", \"display\", \"face-smile\", \"smile\", \"thumbtack\", \"thumb-tack\", \"trophy\", \"person-praying\", \"pray\", \"hammer\", \"hand-peace\", \"rotate\", \"sync-alt\", \"spinner\", \"robot\", \"peace\", \"gears\", \"cogs\", \"warehouse\", \"arrow-up-right-dots\", \"splotch\", \"face-grin-hearts\", \"grin-hearts\", \"dice-four\", \"sim-card\", \"transgender\", \"transgender-alt\", \"mercury\", \"arrow-turn-down\", \"level-down\", \"person-falling-burst\", \"award\", \"ticket-simple\", \"ticket-alt\", \"building\", \"angles-left\", \"angle-double-left\", \"qrcode\", \"clock-rotate-left\", \"history\", \"face-grin-beam-sweat\", \"grin-beam-sweat\", \"file-export\", \"arrow-right-from-file\", \"shield\", \"shield-blank\", \"arrow-up-short-wide\", \"sort-amount-up-alt\", \"house-medical\", \"golf-ball-tee\", \"golf-ball\", \"circle-chevron-left\", \"chevron-circle-left\", \"house-chimney-window\", \"pen-nib\", \"tent-arrow-turn-left\", \"tents\", \"wand-magic\", \"magic\", \"dog\", \"carrot\", \"moon\", \"wine-glass-empty\", \"wine-glass-alt\", \"cheese\", \"yin-yang\", \"music\", \"code-commit\", \"temperature-low\", \"person-biking\", \"biking\", \"broom\", \"shield-heart\", \"gopuram\", \"earth-oceania\", \"globe-oceania\", \"square-xmark\", \"times-square\", \"xmark-square\", \"hashtag\", \"up-right-and-down-left-from-center\", \"expand-alt\", \"oil-can\", \"t\", \"hippo\", \"chart-column\", \"infinity\", \"vial-circle-check\", \"person-arrow-down-to-line\", \"voicemail\", \"fan\", \"person-walking-luggage\", \"up-down\", \"arrows-alt-v\", \"cloud-moon-rain\", \"calendar\", \"trailer\", \"bahai\", \"haykal\", \"sd-card\", \"dragon\", \"shoe-prints\", \"circle-plus\", \"plus-circle\", \"face-grin-tongue-wink\", \"grin-tongue-wink\", \"hand-holding\", \"plug-circle-exclamation\", \"link-slash\", \"chain-broken\", \"chain-slash\", \"unlink\", \"clone\", \"person-walking-arrow-loop-left\", \"arrow-up-z-a\", \"sort-alpha-up-alt\", \"fire-flame-curved\", \"fire-alt\", \"tornado\", \"file-circle-plus\", \"book-quran\", \"quran\", \"anchor\", \"border-all\", \"face-angry\", \"angry\", \"cookie-bite\", \"arrow-trend-down\", \"rss\", \"feed\", \"draw-polygon\", \"scale-balanced\", \"balance-scale\", \"gauge-simple-high\", \"tachometer\", \"tachometer-fast\", \"shower\", \"desktop\", \"desktop-alt\", \"m\", \"table-list\", \"th-list\", \"comment-sms\", \"sms\", \"book\", \"user-plus\", \"check\", \"battery-three-quarters\", \"battery-4\", \"house-circle-check\", \"angle-left\", \"diagram-successor\", \"truck-arrow-right\", \"arrows-split-up-and-left\", \"hand-fist\", \"fist-raised\", \"cloud-moon\", \"briefcase\", \"person-falling\", \"image-portrait\", \"portrait\", \"user-tag\", \"rug\", \"earth-europe\", \"globe-europe\", \"cart-flatbed-suitcase\", \"luggage-cart\", \"rectangle-xmark\", \"rectangle-times\", \"times-rectangle\", \"window-close\", \"baht-sign\", \"book-open\", \"book-journal-whills\", \"journal-whills\", \"handcuffs\", \"triangle-exclamation\", \"exclamation-triangle\", \"warning\", \"database\", \"share\", \"arrow-turn-right\", \"mail-forward\", \"bottle-droplet\", \"mask-face\", \"hill-rockslide\", \"right-left\", \"exchange-alt\", \"paper-plane\", \"road-circle-exclamation\", \"dungeon\", \"align-right\", \"money-bill-1-wave\", \"money-bill-wave-alt\", \"life-ring\", \"hands\", \"sign-language\", \"signing\", \"calendar-day\", \"water-ladder\", \"ladder-water\", \"swimming-pool\", \"arrows-up-down\", \"arrows-v\", \"face-grimace\", \"grimace\", \"wheelchair-move\", \"wheelchair-alt\", \"turn-down\", \"level-down-alt\", \"person-walking-arrow-right\", \"square-envelope\", \"envelope-square\", \"dice\", \"bowling-ball\", \"brain\", \"bandage\", \"band-aid\", \"calendar-minus\", \"circle-xmark\", \"times-circle\", \"xmark-circle\", \"gifts\", \"hotel\", \"earth-asia\", \"globe-asia\", \"id-card-clip\", \"id-card-alt\", \"magnifying-glass-plus\", \"search-plus\", \"thumbs-up\", \"user-clock\", \"hand-dots\", \"allergies\", \"file-invoice\", \"window-minimize\", \"mug-saucer\", \"coffee\", \"brush\", \"mask\", \"magnifying-glass-minus\", \"search-minus\", \"ruler-vertical\", \"user-large\", \"user-alt\", \"train-tram\", \"user-nurse\", \"syringe\", \"cloud-sun\", \"stopwatch-20\", \"square-full\", \"magnet\", \"jar\", \"note-sticky\", \"sticky-note\", \"bug-slash\", \"arrow-up-from-water-pump\", \"bone\", \"user-injured\", \"face-sad-tear\", \"sad-tear\", \"plane\", \"tent-arrows-down\", \"exclamation\", \"arrows-spin\", \"print\", \"turkish-lira-sign\", \"try\", \"turkish-lira\", \"dollar-sign\", \"dollar\", \"usd\", \"x\", \"magnifying-glass-dollar\", \"search-dollar\", \"users-gear\", \"users-cog\", \"person-military-pointing\", \"building-columns\", \"bank\", \"institution\", \"museum\", \"university\", \"umbrella\", \"trowel\", \"d\", \"stapler\", \"masks-theater\", \"theater-masks\", \"kip-sign\", \"hand-point-left\", \"handshake-simple\", \"handshake-alt\", \"jet-fighter\", \"fighter-jet\", \"square-share-nodes\", \"share-alt-square\", \"barcode\", \"plus-minus\", \"video\", \"video-camera\", \"graduation-cap\", \"mortar-board\", \"hand-holding-medical\", \"person-circle-check\", \"turn-up\", \"level-up-alt\"]\n\nconst fa6Brand = [\"monero\", \"hooli\", \"yelp\", \"cc-visa\", \"lastfm\", \"shopware\", \"creative-commons-nc\", \"aws\", \"redhat\", \"yoast\", \"cloudflare\", \"ups\", \"wpexplorer\", \"dyalog\", \"bity\", \"stackpath\", \"buysellads\", \"first-order\", \"modx\", \"guilded\", \"vnv\", \"square-js\", \"js-square\", \"microsoft\", \"qq\", \"orcid\", \"java\", \"invision\", \"creative-commons-pd-alt\", \"centercode\", \"glide-g\", \"drupal\", \"hire-a-helper\", \"creative-commons-by\", \"unity\", \"whmcs\", \"rocketchat\", \"vk\", \"untappd\", \"mailchimp\", \"css3-alt\", \"square-reddit\", \"reddit-square\", \"vimeo-v\", \"contao\", \"square-font-awesome\", \"deskpro\", \"sistrix\", \"square-instagram\", \"instagram-square\", \"battle-net\", \"the-red-yeti\", \"square-hacker-news\", \"hacker-news-square\", \"edge\", \"threads\", \"napster\", \"square-snapchat\", \"snapchat-square\", \"google-plus-g\", \"artstation\", \"markdown\", \"sourcetree\", \"google-plus\", \"diaspora\", \"foursquare\", \"stack-overflow\", \"github-alt\", \"phoenix-squadron\", \"pagelines\", \"algolia\", \"red-river\", \"creative-commons-sa\", \"safari\", \"google\", \"square-font-awesome-stroke\", \"font-awesome-alt\", \"atlassian\", \"linkedin-in\", \"digital-ocean\", \"nimblr\", \"chromecast\", \"evernote\", \"hacker-news\", \"creative-commons-sampling\", \"adversal\", \"creative-commons\", \"watchman-monitoring\", \"fonticons\", \"weixin\", \"shirtsinbulk\", \"codepen\", \"git-alt\", \"lyft\", \"rev\", \"windows\", \"wizards-of-the-coast\", \"square-viadeo\", \"viadeo-square\", \"meetup\", \"centos\", \"adn\", \"cloudsmith\", \"pied-piper-alt\", \"square-dribbble\", \"dribbble-square\", \"codiepie\", \"node\", \"mix\", \"steam\", \"cc-apple-pay\", \"scribd\", \"debian\", \"openid\", \"instalod\", \"expeditedssl\", \"sellcast\", \"square-twitter\", \"twitter-square\", \"r-project\", \"delicious\", \"freebsd\", \"vuejs\", \"accusoft\", \"ioxhost\", \"fonticons-fi\", \"app-store\", \"cc-mastercard\", \"itunes-note\", \"golang\", \"kickstarter\", \"grav\", \"weibo\", \"uncharted\", \"firstdraft\", \"square-youtube\", \"youtube-square\", \"wikipedia-w\", \"wpressr\", \"rendact\", \"angellist\", \"galactic-republic\", \"nfc-directional\", \"skype\", \"joget\", \"fedora\", \"stripe-s\", \"meta\", \"laravel\", \"hotjar\", \"bluetooth-b\", \"sticker-mule\", \"creative-commons-zero\", \"hips\", \"behance\", \"reddit\", \"discord\", \"chrome\", \"app-store-ios\", \"cc-discover\", \"wpbeginner\", \"confluence\", \"mdb\", \"dochub\", \"accessible-icon\", \"ebay\", \"amazon\", \"unsplash\", \"yarn\", \"square-steam\", \"steam-square\", \"500px\", \"square-vimeo\", \"vimeo-square\", \"asymmetrik\", \"font-awesome\", \"font-awesome-flag\", \"font-awesome-logo-full\", \"gratipay\", \"apple\", \"hive\", \"gitkraken\", \"keybase\", \"apple-pay\", \"padlet\", \"amazon-pay\", \"square-github\", \"github-square\", \"stumbleupon\", \"fedex\", \"phoenix-framework\", \"shopify\", \"neos\", \"square-threads\", \"hackerrank\", \"researchgate\", \"swift\", \"angular\", \"speakap\", \"angrycreative\", \"y-combinator\", \"empire\", \"envira\", \"square-gitlab\", \"gitlab-square\", \"studiovinari\", \"pied-piper\", \"wordpress\", \"product-hunt\", \"firefox\", \"linode\", \"goodreads\", \"square-odnoklassniki\", \"odnoklassniki-square\", \"jsfiddle\", \"sith\", \"themeisle\", \"page4\", \"hashnode\", \"react\", \"cc-paypal\", \"squarespace\", \"cc-stripe\", \"creative-commons-share\", \"bitcoin\", \"keycdn\", \"opera\", \"itch-io\", \"umbraco\", \"galactic-senate\", \"ubuntu\", \"draft2digital\", \"stripe\", \"houzz\", \"gg\", \"dhl\", \"square-pinterest\", \"pinterest-square\", \"xing\", \"blackberry\", \"creative-commons-pd\", \"playstation\", \"quinscape\", \"less\", \"blogger-b\", \"opencart\", \"vine\", \"paypal\", \"gitlab\", \"typo3\", \"reddit-alien\", \"yahoo\", \"dailymotion\", \"affiliatetheme\", \"pied-piper-pp\", \"bootstrap\", \"odnoklassniki\", \"nfc-symbol\", \"ethereum\", \"speaker-deck\", \"creative-commons-nc-eu\", \"patreon\", \"avianex\", \"ello\", \"gofore\", \"bimobject\", \"facebook-f\", \"square-google-plus\", \"google-plus-square\", \"mandalorian\", \"first-order-alt\", \"osi\", \"google-wallet\", \"d-and-d-beyond\", \"periscope\", \"fulcrum\", \"cloudscale\", \"forumbee\", \"mizuni\", \"schlix\", \"square-xing\", \"xing-square\", \"bandcamp\", \"wpforms\", \"cloudversify\", \"usps\", \"megaport\", \"magento\", \"spotify\", \"optin-monster\", \"fly\", \"aviato\", \"itunes\", \"cuttlefish\", \"blogger\", \"flickr\", \"viber\", \"soundcloud\", \"digg\", \"tencent-weibo\", \"symfony\", \"maxcdn\", \"etsy\", \"facebook-messenger\", \"audible\", \"think-peaks\", \"bilibili\", \"erlang\", \"x-twitter\", \"cotton-bureau\", \"dashcube\", \"42-group\", \"innosoft\", \"stack-exchange\", \"elementor\", \"square-pied-piper\", \"pied-piper-square\", \"creative-commons-nd\", \"palfed\", \"superpowers\", \"resolving\", \"xbox\", \"searchengin\", \"tiktok\", \"square-facebook\", \"facebook-square\", \"renren\", \"linux\", \"glide\", \"linkedin\", \"hubspot\", \"deploydog\", \"twitch\", \"ravelry\", \"mixer\", \"square-lastfm\", \"lastfm-square\", \"vimeo\", \"mendeley\", \"uniregistry\", \"figma\", \"creative-commons-remix\", \"cc-amazon-pay\", \"dropbox\", \"instagram\", \"cmplid\", \"facebook\", \"gripfire\", \"jedi-order\", \"uikit\", \"fort-awesome-alt\", \"phabricator\", \"ussunnah\", \"earlybirds\", \"trade-federation\", \"autoprefixer\", \"whatsapp\", \"slideshare\", \"google-play\", \"viadeo\", \"line\", \"google-drive\", \"servicestack\", \"simplybuilt\", \"bitbucket\", \"imdb\", \"deezer\", \"raspberry-pi\", \"jira\", \"docker\", \"screenpal\", \"bluetooth\", \"gitter\", \"d-and-d\", \"microblog\", \"cc-diners-club\", \"gg-circle\", \"pied-piper-hat\", \"kickstarter-k\", \"yandex\", \"readme\", \"html5\", \"sellsy\", \"sass\", \"wirsindhandwerk\", \"wsh\", \"buromobelexperte\", \"salesforce\", \"octopus-deploy\", \"medapps\", \"ns8\", \"pinterest-p\", \"apper\", \"fort-awesome\", \"waze\", \"cc-jcb\", \"snapchat\", \"snapchat-ghost\", \"fantasy-flight-games\", \"rust\", \"wix\", \"square-behance\", \"behance-square\", \"supple\", \"rebel\", \"css3\", \"staylinked\", \"kaggle\", \"space-awesome\", \"deviantart\", \"cpanel\", \"goodreads-g\", \"square-git\", \"git-square\", \"square-tumblr\", \"tumblr-square\", \"trello\", \"creative-commons-nc-jp\", \"get-pocket\", \"perbyte\", \"grunt\", \"weebly\", \"connectdevelop\", \"leanpub\", \"black-tie\", \"themeco\", \"python\", \"android\", \"bots\", \"free-code-camp\", \"hornbill\", \"js\", \"ideal\", \"git\", \"dev\", \"sketch\", \"yandex-international\", \"cc-amex\", \"uber\", \"github\", \"php\", \"alipay\", \"youtube\", \"skyatlas\", \"firefox-browser\", \"replyd\", \"suse\", \"jenkins\", \"twitter\", \"rockrms\", \"pinterest\", \"buffer\", \"npm\", \"yammer\", \"btc\", \"dribbble\", \"stumbleupon-circle\", \"internet-explorer\", \"stubber\", \"telegram\", \"telegram-plane\", \"old-republic\", \"odysee\", \"square-whatsapp\", \"whatsapp-square\", \"node-js\", \"edge-legacy\", \"slack\", \"slack-hash\", \"medrt\", \"usb\", \"tumblr\", \"vaadin\", \"quora\", \"square-x-twitter\", \"reacteurope\", \"medium\", \"medium-m\", \"amilia\", \"mixcloud\", \"flipboard\", \"viacoin\", \"critical-role\", \"sitrox\", \"discourse\", \"joomla\", \"mastodon\", \"airbnb\", \"wolf-pack-battalion\", \"buy-n-large\", \"gulp\", \"creative-commons-sampling-plus\", \"strava\", \"ember\", \"canadian-maple-leaf\", \"teamspeak\", \"pushed\", \"wordpress-simple\", \"nutritionix\", \"wodu\", \"google-pay\", \"intercom\", \"zhihu\", \"korvue\", \"pix\", \"steam-symbol\"];\n\nexport { fa6Solid, fa6Brand };","import { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport { useSelector } from \"react-redux\";\nimport { caseTransformingAxios } from \"@shared/v2/caseTransformingAxios\";\nimport { isPlace } from \"@shared/Utilities\";\nimport formatters from \"../../shared/formatters\";\nimport { sortBy } from \"lodash\";\n\nexport const initialState = {\n counts: {\n Leads: {},\n People: {},\n Tasks: {},\n Transactions: {},\n },\n currentMetaUser: null,\n currentSuperUser: null,\n currentUser: null,\n env: null,\n featureFlags: null,\n isMobileMenuOpen: false,\n sidebar: null,\n submenu: null,\n theme: null,\n support: null,\n accountCallRecordingLoading: false,\n};\n\nconst transformCounts = (counts) =>\n Object.keys(counts).reduce((acc, key) => ({ ...acc, [key]: formatters.number(counts[key]) }), {\n lastUpdate: Date.now(),\n });\n\nconst updateAccountRecordingSettings = createAsyncThunk(\n \"phoneSettings/updateAccountRecordingSettings\",\n (callRecordingAccountSettings, thunkApi) =>\n caseTransformingAxios\n .post(\n \"/api/v4/call_recording/account_settings/upsert\",\n {\n callRecordingAccountSettings,\n },\n { signal: thunkApi.signal },\n )\n .then(({ data }) => data),\n);\n\nexport const layoutSlice = createSlice({\n name: \"layout\",\n initialState,\n reducers: {\n addPeopleSmartFilterOption: (state, { payload: { option } }) => {\n state.sidebar.menu.forEach((menu) => {\n const smartFilterIndex =\n menu.name !== \"Transactions\" ? menu.options?.findIndex((o) => o.name === \"Smart Filters\") : null;\n const smartFilterOptions = menu.options?.[smartFilterIndex]?.options;\n if (smartFilterOptions) {\n menu.options[smartFilterIndex].options = sortBy(\n [...smartFilterOptions, option],\n [(o) => Boolean(o.deletePath), \"name\"],\n );\n }\n });\n },\n removeSmartFilterOption: (state, { payload: { option } }) => {\n state.sidebar.menu.forEach((menu) => {\n const smartFilterOptions = menu.options?.find((o) => o.name === \"Smart Filters\")?.options;\n if (smartFilterOptions) {\n const optionIndex = smartFilterOptions.findIndex(\n (o) => o.id === option.id && o.name === option.name,\n );\n if (optionIndex > -1) {\n smartFilterOptions.splice(optionIndex, 1);\n }\n }\n });\n },\n setIsSidebarOpen: (state, { payload }) => {\n state.sidebar.isOpen = payload;\n },\n setIsSubmenuOpen: (state, { payload }) => {\n state.submenu = payload;\n },\n toggleMobileMenu: (state, { payload }) => {\n state.isMobileMenuOpen = typeof payload === \"boolean\" ? payload : !state.isMobileMenuOpen;\n },\n updateLeadCounts: (state, { payload }) => {\n state.counts = { ...state.counts, Leads: transformCounts(payload) };\n },\n updatePeopleCounts: (state, { payload }) => {\n state.counts = { ...state.counts, People: transformCounts(payload) };\n },\n updateTaskCounts: (state, { payload }) => {\n state.counts = { ...state.counts, Tasks: transformCounts(payload) };\n },\n updateTransactionCounts: (state, { payload }) => {\n const withAllData = { ...payload, all_count: 0 };\n Object.keys(payload).forEach((key) => {\n // draft not related to statuses. So we need to skip it to remove double counting of\n // any transaction that is a draft, as they _also_ are counted in the statuses\n if (key === \"drafts_count\") return;\n const value = payload[key];\n withAllData.all_count += value;\n });\n state.counts = { ...state.counts, Transactions: transformCounts(withAllData) };\n },\n },\n extraReducers: (builder) => {\n builder\n .addCase(updateAccountRecordingSettings.pending, (state) => {\n state.accountCallRecordingLoading = true;\n })\n .addCase(updateAccountRecordingSettings.fulfilled, (state, action) => {\n state.currentUser.account.callRecordingSettings = action.payload;\n state.accountCallRecordingLoading = false;\n })\n .addCase(updateAccountRecordingSettings.rejected, (state) => {\n state.accountCallRecordingLoading = false;\n });\n },\n});\n\nexport { updateAccountRecordingSettings };\n\nexport const {\n addPeopleSmartFilterOption,\n removeSmartFilterOption,\n setIsSubmenuOpen,\n setIsSidebarOpen,\n toggleMobileMenu,\n updateLeadCounts,\n updatePeopleCounts,\n updateTaskCounts,\n updateTransactionCounts,\n} = layoutSlice.actions;\n\nexport default layoutSlice.reducer;\n\nexport const usePlaceSelector = () => useSelector(({ layout }) => isPlace(layout.theme.name));\n","import React from \"react\";\n\nimport { func, string } from \"prop-types\";\n\nimport { usePlaceSelector } from \"../../reducers/layoutReducer\";\n\nconst AvailableIcon = ({ onSelect, classNameFont, fontPrefix }) => {\n const isPlaceTheme = usePlaceSelector()\n \n return (\n \n dispatch(setPersonValue({ key: \"zillowReviews\", value: e.target.value }))}\n />\n dispatch(setPersonValue({ key: \"googleReviews\", value: e.target.value }))}\n />\n
\n \n dispatch(setPersonValue({ key: \"facebookReviews\", value: e.target.value }))}\n />\n dispatch(setPersonValue({ key: \"realtorComReviews\", value: e.target.value }))}\n />\n
\n \n dispatch(setPersonValue({ key: \"yelpReviews\", value: e.target.value }))}\n />\n dispatch(setPersonValue({ key: \"truliaReviews\", value: e.target.value }))}\n />\n
\n \n
\n \n );\n};\n\nexport default ({ onSelect, onHide, show }) => {\n const store = useMemo(() => ReactOnRails.getStore(\"layoutStore\"), []);\n return (\n \n {solidIcons.map((classNameFont) => (\n onSelectHandlr(`fa6 fa6-${classNameFont}`)}\n classNameFont={classNameFont}\n />\n ))}\n {brandIcons.map((classNameFont) => (\n onSelectHandlr(`fab fa6-${classNameFont}`)}\n classNameFont={classNameFont}\n fontPrefix=\"fab fa6\"\n />\n ))}\n
\n \n \n onTitleChange(e.target.value)}\n error={isStrInputLen(title)}\n isRequired\n />\n onURLChange(e.target.value)}\n error={isStrInputLen(url)}\n isRequired\n />\n \n
\n );\n};\n\nconst CustomLinks = () => {\n const [iconPickerCustomLink, setIconPickerCustomLink] = useState(null);\n const dispatch = useDispatch();\n const { customLinksAttributes } = useContactPerson().loginUserAttributes;\n\n return (\n <>\n \n {customLinksAttributes\n .filter((customLink) => !customLink._destroy)\n .map((customLink) => (\n dispatch(setCustomLink({ order: customLink.order, title }))}\n onURLChange={(url) => dispatch(setCustomLink({ order: customLink.order, url }))}\n onDelete={() => dispatch(deleteCustomLink({ order: customLink.order }))}\n setIconPickerCustomLink={setIconPickerCustomLink}\n />\n ))}\n
\n \n dispatch(setPersonValue({ key: \"loginUserAttributes.bio\", value: e.target.value }))}\n value={bio}\n className=\"tw-w-full tw-h-[136px] tw-mt-[8px]\"\n id=\"aboutMe-1\"\n multiline\n />\n
\n );\n};\n\nexport default AboutMe;\n","import React from \"react\";\n\nimport { headline2, bodyS, headline3 } from \"@shared/styles\";\nimport Title from \"../ModalSections/Title\";\nimport Subdomain from \"../ModalSections/Subdomain/Subdomain\";\nimport DefaultLinks from \"../ModalSections/DefaultLinks\";\nimport CustomLinks from \"../ModalSections/CustomLinks\";\n\nimport { containerView, borderHr } from \"./styles\";\nimport AboutMe from \"../ModalSections/AboutMe\";\n\nconst WebsiteInfoViewRef = () => (\n \n
\n
\n);\n\nexport default WebsiteInfoViewRef;\n","import { schemaGenerator } from \"../utils\";\n\n// The Checkbox component is implemented using an `input[type=checkbox]` element and has custom\n// styles (following the design system) using the appearance none technique. Although it works, CSS\n// selectors take precedence over Tailwind classes that affect `input[type=checkbox]`s globally. So\n// to override it, we must decorate some of the Tailwind classes here with the important flag (!).\n// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#styling_radio_inputs\n// (applies to checkbox as well) and https://developer.mozilla.org/en-US/docs/Web/CSS/appearance\n\nconst dictionary = {\n regular: {\n default: [\n \"tw-appearance-none\",\n \"tw-w-[14px]\",\n \"tw-h-[14px]\",\n \"!tw-m-0\",\n \"tw-rounded-[1.5px]\",\n \"tw-border\",\n \"tw-border-solid\",\n \"tw-border-neutral-gray-30\",\n ],\n before: [\n \"before:tw-content-['_']\",\n \"before:tw-block\",\n \"before:tw-relative\",\n // Negative offset to account for the border of the input\n \"before:tw-top-[-1px]\",\n \"before:tw-left-[-1px]\",\n \"before:tw-w-[14px]\",\n \"before:tw-h-[14px]\",\n ],\n // !important is required because we need to override the browser's outline\n focus: [\"focus:!tw-outline-0\", \"group-focus:!tw-outline-0\"],\n focusVisible: [\"focus-visible:!tw-outline-theme\", \"group-focus-visible:!tw-outline-theme\"],\n hover: [\n \"enabled:hover:tw-border-theme-checkbox-hover\",\n \"enabled:group-hover:tw-border-theme-checkbox-hover\",\n ],\n disabled: [\n \"disabled:tw-border-solid\",\n \"disabled:tw-border-neutral-gray-15\",\n \"disabled:tw-bg-neutral-gray-5\",\n ],\n checked: [\"checked:tw-border-theme-checkbox-checked\"],\n checkedBefore: [\n \"checked:before:tw-bg-theme-checkbox-checked\",\n \"checked:before:tw-bg-theme-checkbox-checked-mask\",\n ],\n checkedHover: [\n \"checked:enabled:hover:tw-border-theme-checkbox-checked-hover\",\n \"checked:enabled:group-hover:tw-border-theme-checkbox-checked-hover\",\n ],\n checkedHoverBefore: [\n \"checked:enabled:hover:before:tw-bg-theme-checkbox-checked-hover\",\n \"checked:enabled:group-hover:before:tw-bg-theme-checkbox-checked-hover\",\n ],\n indeterminate: [\"indeterminate:tw-border-theme-checkbox-indeterminate\"],\n indeterminateBefore: [\n \"indeterminate:before:tw-bg-theme-checkbox-indeterminate\",\n \"indeterminate:before:tw-bg-theme-checkbox-indeterminate-mask\",\n ],\n indeterminateHover: [\n \"indeterminate:enabled:hover:tw-border-theme-checkbox-indeterminate-hover\",\n \"indeterminate:enabled:group-hover:tw-border-theme-checkbox-indeterminate-hover\",\n ],\n indeterminateHoverBefore: [\n \"indeterminate:enabled:hover:before:tw-bg-theme-checkbox-indeterminate-hover\",\n \"indeterminate:enabled:group-hover:before:tw-bg-theme-checkbox-indeterminate-hover\",\n ],\n checkedDisabled: [\"checked:disabled:tw-border-neutral-gray-30\"],\n checkedDisabledBefore: [\n \"checked:disabled:before:tw-bg-neutral-gray-30\",\n \"checked:disabled:before:tw-bg-theme-checkbox-checked-mask\",\n ],\n indeterminateDisabled: [\"indeterminate:disabled:tw-border-neutral-gray-30\"],\n indeterminateDisabledBefore: [\n \"indeterminate:disabled:before:tw-bg-neutral-gray-30\",\n \"indeterminate:disabled:before:tw-bg-theme-checkbox-indeterminate-mask\",\n ],\n },\n};\n\nconst schema = schemaGenerator(dictionary);\n\nexport default schema;\n","import React, { useEffect, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useGivenOrGeneratedId } from \"../../hookHelpers\";\n\nimport styleSchema from \"./Checkbox.styles\";\n\nconst textColor = (disabled) => (disabled ? \"tw-text-neutral-gray-30\" : \"tw-text-neutral-gray-75\");\n\nconst getVerticalAlignment = (alignment) => {\n if (alignment === \"start\") return \"tw-items-start\";\n if (alignment === \"end\") return \"tw-items-end\";\n return \"tw-items-center\";\n};\n\nconst Checkbox = ({\n id: idFromProps,\n label,\n labelClassName,\n checked,\n indeterminate,\n disabled,\n className,\n valign,\n ...otherProps\n}) => {\n const id = useGivenOrGeneratedId(\"checkbox\", idFromProps);\n\n const checkboxInput = useRef(null);\n\n useEffect(() => {\n if (!checkboxInput.current) {\n return;\n }\n // Set the indeterminate value via JavaScript since it can't be set via HTML attribute\n // see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n checkboxInput.current.indeterminate = indeterminate;\n }, [checkboxInput, indeterminate]);\n\n return (\n Website Info
\n Changes may take several minutes to reflect on your Brivity website.
\n Basic
\n \n
Review Links
\n \n Enter the links for the websites you use to collect client reviews. They are added to your Links{\" \"}\n page. (Example: john.mywebsite.com/links)\n
\n Custom Links
\n \n Custom links are added to your Links page. (Example: john.mywebsite.com/links)\n
\n About Me
\n \n \n {label}\n \n {additionalInfo?.content && (\n \n
\n }\n content={{additionalInfo.content}}\n />\n )}\n \n );\n};\n\nRadioButton.propTypes = {\n id: PropTypes.string,\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n labelClassName: PropTypes.string,\n checked: PropTypes.bool,\n disabled: PropTypes.bool,\n additionalInfo: PropTypes.shape({\n content: PropTypes.node,\n multiline: PropTypes.bool,\n placement: PropTypes.oneOf([\"top\", \"right\", \"bottom\", \"left\"]),\n }),\n className: PropTypes.string,\n containerClassName: PropTypes.string,\n};\n\nRadioButton.defaultProps = {\n id: null,\n checked: false,\n disabled: false,\n className: \"\",\n additionalInfo: null,\n labelClassName: \"\",\n containerClassName: \"\",\n};\n\nexport default RadioButton;\n","import { schemaGenerator } from \"../utils\";\n\nconst BASE = [\"tw-text-neutral-gray-75\", \"tw-not-italic\", \"tw-normal-case\", \"tw-m-0\"];\n\nconst schemaDictionary = {\n headline1: {\n default: [...BASE, \"tw-font-normal\", \"tw-text-28d\"],\n },\n headline2: {\n default: [...BASE, \"tw-font-bold\", \"tw-text-18d\"],\n },\n headline3: {\n default: [...BASE, \"tw-font-normal\", \"tw-text-18d\"],\n },\n \"subtitle-m-bold\": {\n default: [...BASE, \"tw-font-bold\", \"tw-text-14d\"],\n },\n \"subtitle-m\": {\n default: [...BASE, \"tw-font-semibold\", \"tw-text-14d\"],\n },\n \"subtitle-s\": {\n default: [...BASE, \"tw-font-semibold\", \"tw-text-12d\"],\n },\n \"body-m\": {\n default: [...BASE, \"tw-font-normal\", \"tw-text-14d\"],\n },\n \"body-s\": {\n default: [...BASE, \"tw-font-normal\", \"tw-text-12d\"],\n },\n inherit: {\n default: [],\n },\n};\n\nconst schema = schemaGenerator(schemaDictionary);\n\nexport default schema;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport schema from \"./Typography.styles\";\n\nconst htmlTagsByVariant = {\n headline1: \"h1\",\n headline2: \"h2\",\n headline3: \"h3\",\n \"subtitle-m-bold\": \"h4\",\n \"subtitle-m\": \"h4\",\n \"subtitle-s\": \"h5\",\n \"body-m\": \"p\",\n \"body-s\": \"p\",\n inherit: \"span\",\n};\n\nexport const availableVariants = Object.keys(htmlTagsByVariant);\n\n/**\n * @summary Typography Component. `children` is the only required prop to make it functional.\n * @param {JSX.Element} children - the element that will be rendered with the variant.\n * @param {string} variant - Variant for the content. Each variant has a different style.\n * @param {JSX.Element | string} component - Optional prop. You can change the default HTML tag that will be rendered.\n * @param {string} className - Arbitrary classNames for the component.\n * */\nconst Typography = ({ children, variant, component, className, ...otherProps }) => {\n const Component = component || htmlTagsByVariant[variant];\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n \n \n {element}\n
\n );\n};\n\nFormElement.propTypes = {\n label: PropTypes.string,\n element: PropTypes.shape({}),\n className: PropTypes.string,\n required: PropTypes.bool,\n};\n\nFormElement.defaultProps = {\n label: \"\",\n element: ,\n className: \"\",\n required: false,\n};\n\nexport default FormElement;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport { caseTransformingAxios } from \"@shared/v2/caseTransformingAxios\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faSpinner } from \"@fortawesome/free-solid-svg-icons\";\nimport Modal from \"../../shared/v2/Modal\";\nimport Button from \"../../shared/v2/Button\";\nimport FormElement from \"../../shared/FormElement\";\nimport FormAgentOrPondSelect from \"../../shared/FormAgentOrPondSelect\";\nimport DatePicker from \"../../shared/v2/DatePicker\";\nimport ErrorBanner from \"../../shared/v2/ErrorBanner\";\nimport RadioButton from \"../../shared/v2/RadioButton/RadioButton\";\nimport { useCurrentUser, useTheme } from \"../../reducers/layoutReducer/selectors\";\n\nconst DeactivateUserModal = ({ onClose, show, userId }) => {\n const theme = useTheme();\n const currentUser = useCurrentUser();\n const [isDeleting, setIsDeleting] = useState(false);\n const [errors, setErrors] = useState([]);\n const [organizationEndDate, setOrganizationEndDate] = useState(null);\n const [reassignLeadsTo, setReassignLeadsTo] = useState({ primary_agent: currentUser.account.ownerId });\n const [reasonForLeaving, setReasonForLeaving] = useState(\"\");\n const [departureType, setDepartureType] = useState(\"Voluntarily\");\n\n const onReload = (data) => {\n onClose(data);\n localStorage.setItem(\n \"successMsg\",\n \"User is archived. Reassigning their leads and tasks is in process. This might take a few minutes. \",\n );\n window.location.replace(\n `${window.location.origin}/people/team?leads_filter%5Bselected_sources%5D%5B%5D=`,\n );\n };\n\n useEffect(() => {\n setReassignLeadsTo({ primary_agent: currentUser.account.ownerId });\n }, [currentUser.account.ownerId]);\n\n const deactivateUserOnClick = () => {\n const newErrors = [];\n if (!organizationEndDate) newErrors.push(\"Last Day is required.\");\n if (!reasonForLeaving) newErrors.push(\"Reason For Leaving is required.\");\n setErrors(newErrors);\n if (newErrors.length > 0) return;\n\n setIsDeleting(true);\n const model = {\n organizationEndDate:\n organizationEndDate === \"\" ? null : moment(organizationEndDate).format(\"DD/MM/YYYY\"),\n reasonForLeaving,\n departureType,\n };\n if (reassignLeadsTo.primary_agent) {\n model.reassignLeadsToId = reassignLeadsTo.primary_agent;\n model.reassignLeadsToType = \"user\";\n } else {\n model.reassignLeadsToId = reassignLeadsTo.lead_pond;\n model.reassignLeadsToType = \"lead_pond\";\n }\n caseTransformingAxios\n .patch(`/users/${userId}/deactivate`, model)\n .then((res) => {\n setIsDeleting(false);\n onReload(res.data || true);\n })\n .catch((err) => {\n setIsDeleting(false);\n onClose(undefined, err?.response?.data.content || err?.response?.data.message);\n });\n };\n\n return (\n \n \n setReasonForLeaving(e.target.value)}\n />\n {theme.name === \"place-theme\" && (\n
\n \n );\n};\n\nDeactivateUserModal.propTypes = {\n userId: PropTypes.number,\n show: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n};\n\nDeactivateUserModal.defaultProps = {\n userId: null,\n};\n\nexport default DeactivateUserModal;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { caseTransformingAxios } from \"@shared/v2/caseTransformingAxios\";\nimport { Prompt } from \"../../shared/v2/Modal\";\n\nfunction ActivateUserModal({ userId, show, onClose }) {\n const [loading, setLoading] = React.useState(false);\n\n const activateUserOnClick = () => {\n setLoading(true);\n caseTransformingAxios\n .patch(`/users/${userId}/activate`)\n .then((res) => {\n setLoading(false);\n onClose(res.data || true);\n })\n .catch((err) => onClose(undefined, err?.response?.data?.content || err?.response?.data?.message));\n };\n\n return (\n \n Before archiving a user, we recommend that you reassign their tasks to the remaining users on your\n team. If you do not reassign these items, they will become "unassigned" and you can\n reassign them later.\n
\n \n Reassigning leads and tasks for this user may take a few minutes once they have been archived.\n
\n\n \n setDepartureType(e.target.value)}\n />\n setDepartureType(e.target.value)}\n />\n
\n )}\n \n }\n />\n \n \n \n
\n \n {copy} }\n {children}\n
\n);\n\nOptionsSection.propTypes = {\n label: PropTypes.string.isRequired,\n copy: PropTypes.string.isRequired,\n isRequired: PropTypes.bool.isRequired,\n children: PropTypes.node,\n};\n\nOptionsSection.defaultProps = {\n children: null,\n};\n\nexport default OptionsSection;\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport TextComboInput from \"@shared/v2/TextComboInput\";\nimport { CheckSolidV6, XmarkSolidV6 } from \"@shared/v2/Icomoon\";\nimport Button from \"@shared/v2/Button\";\nimport Checkbox from \"@shared/v2/Checkbox\";\nimport RadioButton from \"@shared/v2/RadioButton\";\nimport Typography from \"@shared/v2/Typography\";\nimport { isStrInputLen } from \"./helpers\";\nimport DeactivateUserModal from \"../../Settings/Users/DeactivateUserModal\";\nimport CannotReActivateUserModal from \"../../Settings/Users/CannotReActivateUserModal\";\nimport ActivateUserModal from \"../../Settings/Users/ActivateUserModal\";\nimport OptionsSection from \"./OptionsSection\";\nimport { containerView } from \"./styles\";\nimport { setPersonValue } from \"../../reducers/contactsReducer\";\nimport { useCurrentUser, useSupportPhoneNumber, useTheme } from \"../../reducers/layoutReducer/selectors\";\nimport { useContactPerson } from \"../../reducers/contactsReducer/selectors\";\n\nfunction AccountSettingsView() {\n const dispatch = useDispatch();\n const currentUser = useCurrentUser();\n const isPlace = useTheme().name === \"place-theme\";\n const supportPhoneNumber = useSupportPhoneNumber();\n const person = useContactPerson();\n const isSeatsAvailable = currentUser.account.seats > 0;\n const primaryEmail = useMemo(\n () => person.emailDetailsAttributes?.find((email) => email.position === 1)?.value || \"\",\n [person.emailDetailsAttributes],\n );\n const [isDeactivatingUser, setIsDeactivatingUser] = useState(false);\n const [isActivatingUser, setIsActivatingUser] = useState(false);\n const [isCannotReActivateUser, setIsCannotReActivateUser] = useState(false);\n\n useEffect(() => {\n dispatch(setPersonValue({ key: \"loginUserAttributes.email\", value: primaryEmail }));\n }, [primaryEmail]);\n\n if (!person.loginUserAttributes) return null;\n\n return (\n \n Account Settings \n \n dispatch(setPersonValue({ key: \"loginUserAttributes.email\", value: e.target.value }))\n }\n data-cy=\"brivity-login-meail\"\n />\n {person.id && currentUser.person.id !== person.id && (\n \n \n dispatch(\n setPersonValue({\n key: \"loginUserAttributes.inviteToOkta\",\n value: !person.loginUserAttributes.inviteToOkta,\n }),\n )\n }\n />\n \n )}\n {!person.id && (\n \n \n dispatch(setPersonValue({ key: \"loginUserAttributes.inviteToOkta\", value: true }))\n }\n />\n {isPlace && (\n \n They will get access to:\n \n \n dispatch(setPersonValue({ key: \"loginUserAttributes.inviteToOkta\", value: false }))\n }\n />\n \n )}\n {person.id && (\n {\n setIsDeactivatingUser(false);\n if (data) dispatch(setPersonValue({ key: \"loginUserAttributes.active\", value: false }));\n }}\n userId={person.loginUserAttributes.id}\n />\n {isCannotReActivateUser && (\n setIsCannotReActivateUser(false)}\n />\n )}\n {isActivatingUser && (\n {\n setIsActivatingUser(false);\n if (data) dispatch(setPersonValue({ key: \"loginUserAttributes.active\", value: true }));\n }}\n userId={person.loginUserAttributes.id}\n />\n )}\n
\n );\n}\n\nexport default AccountSettingsView;\n","import { useEffect } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport {\n getFormData,\n setErrors,\n setPersonValue,\n setShowPhoneContext,\n upsertPerson,\n} from \"../../reducers/contactsReducer\";\nimport { useShowPhoneContext } from \"../../reducers/contactsReducer/selectors\";\n\nconst usePersonDetailsModal = ({ modalType, person, personId, show }) => {\n const dispatch = useDispatch();\n const errors = useSelector((state) => state.contactsReducer.errors);\n const formLoading = useSelector((state) => state.contactsReducer.formOptionsLoading);\n const loading = useSelector((state) => state.contactsReducer.loading);\n const showPhoneContext = useShowPhoneContext();\n\n useEffect(() => {\n if (!show) return;\n dispatch(getFormData({ modalType, personId, person }));\n }, [person, personId, show]);\n\n return {\n actions: {\n clearErrors: () => dispatch(setErrors()),\n upsertPerson: (opts) => dispatch(upsertPerson(opts)),\n setPersonValue: (opts) => dispatch(setPersonValue(opts)),\n setShowPhoneContext: (opts) => dispatch(setShowPhoneContext(opts)),\n },\n errors,\n formLoading,\n showPhoneContext,\n loading,\n };\n};\n\nexport default usePersonDetailsModal;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextButton from \"@shared/v2/TextButton\";\n\nconst PdpLink = ({ personId }) =>\n personId ? (\n \n {!person.loginUserAttributes.active ? (\n (isSeatsAvailable ? setIsActivatingUser(true) : setIsCannotReActivateUser(true))}\n >\n Activate User\n \n ) : (\n setIsDeactivatingUser(true)}\n >\n Archive User\n \n )}\n
\n )}\n \n
\n )}\n\n {formLoading && (\n \n
\n )}\n\n {!formLoading && (\n \n
\n )}\n \n GeneralViewRef.current.scrollIntoView({ behavior: \"smooth\" })}\n />\n\n {modalType === \"user\" && (\n UserDetailsViewRef.current.scrollIntoView({ behavior: \"smooth\" })}\n />\n )}\n\n ContactInfoViewRef.current.scrollIntoView({ behavior: \"smooth\" })}\n />\n PersonalDetailsViewRef.current.scrollIntoView({ behavior: \"smooth\" })}\n />\n\n CustomDatesViewRef.current.scrollIntoView({ behavior: \"smooth\" })}\n />\n\n {modalType === \"user\" && (\n <>\n {featureFlags.userUpdate && (\n WebsiteInfoViewRef.current.scrollIntoView({ behavior: \"smooth\" })}\n />\n )}\n AccountSettingsViewRef.current.scrollIntoView({ behavior: \"smooth\" })}\n />\n \n )}\n
\n \n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n\n {modalType === \"user\" && (\n <>\n \n
\n
\n \n )}\n\n \n
\n
\n\n \n
\n e.startsWith(\"Birthdate\"))\n ?.replace(\"Birthdate: \", \"\")}\n />\n
\n\n {(isEditing || modalType === \"user\") && (\n <>\n \n
\n
\n \n )}\n\n {modalType === \"user\" && (\n <>\n {featureFlags.userUpdate && (\n <>\n \n
\n
\n \n )}\n \n
\n \n )}\n \n
\n
\n \n
\n {showAddDetailsButton && modalType === \"lead\" && !personId && (\n \n actions.upsertPerson({ modalType }).then(({ payload }) => {\n if (payload.slug) window.location.assign(`/people/${payload.slug}`);\n })\n }\n >\n Add More Details\n \n )}\n\n {personId && (\n actions.upsertPerson({ modalType })}\n >\n Save Changes\n \n )}\n\n \n actions.upsertPerson({ modalType }).then(({ meta, payload }) => {\n if (meta.requestStatus === \"fulfilled\") onClose(payload);\n })\n }\n >\n Save & Close\n \n
\n {title}
\n\n {tooltip && (\n \n {tooltip}
}\n trigger={\n
\n )}\n \n \n {text}\n {iconComponent}\n
\n \n \n
\n );\n }\n\n if (oktaLastSignInAt && !crmAccess) {\n return (\n Brivity Activity
\n \n {lastActiveDate ? moment(lastActiveDate).format(\"MM/DD/YYYY\") : \"-\"}\n
\n \n
\n \n Account Activity\n This user has accessed their PLACE account.
}\n trigger={{moment(oktaLastSignInAt).format(\"MM/DD/YYYY\")}
\n \n );\n }\n\n if (oktaLastSignInAt && crmAccess) {\n return (\n \n
\n );\n }\n\n if (currentUser.account.isAdmin) {\n return (\n <>\n Brivity Activity
\n -
\n -
;\n};\n\nOktaInviteButton.propTypes = {\n crmAccess: PropTypes.bool.isRequired,\n userId: PropTypes.number.isRequired,\n lastActiveDate: PropTypes.string,\n oktaInvitedAt: PropTypes.string,\n oktaLastSignInAt: PropTypes.string,\n};\n\nOktaInviteButton.defaultProps = {\n lastActiveDate: null,\n oktaInvitedAt: null,\n oktaLastSignInAt: null,\n};\n\nexport default OktaInviteButton;\n","import React, { useMemo, useState } from \"react\";\nimport { bool, string } from \"prop-types\";\nimport { useDispatch } from \"react-redux\";\n\nimport IconButton from \"@shared/v2/IconButton\";\nimport { PencilSolidV6, Spinner } from \"@shared/v2/Icomoon\";\nimport { toggleUserModal } from \"../actions/default\";\n\nconst EditUserBtn = ({ userId, disabled }) => {\n const dispatch = useDispatch();\n\n const [isLoading, setIsloading] = useState(false);\n\n const Icon = useMemo(\n () => (isLoading ? \n {children}\n
\n )\n};\n\nexport default DropdownPopUp;\n\nDropdownPopUp.propTypes = {\n show: bool.isRequired,\n containerClassName: string,\n children: node,\n};\n\nDropdownPopUp.defaultProps = {\n containerClassName: '',\n children: null,\n};","import React, { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { string, func, bool } from \"prop-types\";\n\nimport IconButton from \"@shared/v2/IconButton\";\nimport DropdownPopUp from \"@shared/DropdownPopUp\";\nimport {\n AddUser,\n EllipsisSolidV6,\n LockOpenSolidV6,\n LockSolidV6,\n PencilSolidV6,\n TrashCanSolidV6,\n} from \"@shared/v2/Icomoon\";\nimport { useIsLoadingIcon } from \"@shared/hookHelpers\";\n\nimport { toggleUserModal } from \"../actions/default\";\n\nconst DROPDOWN_OPTION_STYLE = \"tw-flex tw-items-center tw-px-12px tw-py-[6px] tw-gap-[8px] tw-cursor-pointer\";\n\nconst AdminUserBtn = ({ userId, agentType, isActive, activeHandlr, suspendHandlr, suspended }) => {\n const [showDropdown, setShowDropdown] = useState(false);\n\n const { Icon, isLoading, setIsLoading } = useIsLoadingIcon(\n {\n if (isLoading) return;\n\n setShowDropdown(true);\n }}\n >\n {Icon}\n \n setShowDropdown(false)}\n >\n \n
\n {isActive && agentType !== \"Account Owner\" && (\n \n
\n );\n};\n\nconst UnsuspendText = () => (\n \n Suspending this user will immediately lock them out of their Brivity account and any associated apps.\n
\n \n A suspended user will still take up a user seat and any automated communication will continue to send\n until the user is archived. You can reassign any tasks, contacts, or settings associated with this\n user while they are suspended.\n
\n \n Users should be archived once you are ready to fully remove them from Brivity.{\" \"}\n \n Learn more about best practices for removing a user.\n \n
\n \n Unsuspending this user will restore full access to this Brivity account.\n
\n);\n\nexport const SuspendUserModal = ({ show, onSubmitHandlr, onHideHandlr, isSuspended, isLoading }) => (\n \n \n {fullName}\n \n
\n \n {fullName}\n
\n {agentType}
\n {position}
\n {email}
\n \n {startDate ? moment(startDate).format(\"MM/DD/YYYY\") : \"--- ---\"}\n
\n \n
\n \n {dateAdded ? moment(dateAdded).format(\"MM/DD/YYYY\") : \"--- ---\"}\n
\n \n setIsDeactivatingUser({ show: true, userId, name: fullName })}\n unArchiveUserHandlr={() =>\n setIsDeactivatingUser({ show: true, userId, name: fullName })\n }\n activeHandlr={\n active\n ? () => setIsDeactivatingUser({ show: true, userId, name: fullName })\n : () => setIsActivatingUser({ show: true, userId })\n }\n userId={id}\n suspendHandlr={() => {\n setSuspendedPayload({ action: suspended ? \"unsuspend\" : \"suspend\", userId });\n }}\n suspended={suspended}\n agentType={agentType}\n />\n
\n \n setUsersTableErrors([])} />\n
\n )}\n \n {\n if (isSeatsAvailable) {\n toggleUserModal();\n } else {\n setIsCannotReActivateUser(true);\n }\n }}\n size=\"medium\"\n data-cy=\"settings-users-add-new-user-button\"\n className=\"tw-ml-auto\"\n >\n
\n\n \n
\n \n )}\n \n \n
\n
\n\n \n {typeof title === \"string\" &&
\n);\n\nexport default HeadingSelect;\n\nHeadingSelect.defaultProps = {\n disabled: false,\n options: DEFAULT_YEAR_OPTIONS,\n};\n\nHeadingSelect.propTypes = {\n disabled: PropTypes.bool,\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n name: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n};\n","import React from \"react\";\n\nconst Loading = () => (\n {title}
}\n {typeof title !== \"string\" && title}\n\n onChange(e.target.value)}\n name={name}\n >\n {options.map((item) => (\n \n ))}\n \n
\n \n \n
\n);\n\nexport default Loading;\n","import React, { forwardRef } from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport const Section = forwardRef(({ children, className }, ref) => (\n {children}
\n);\n\nSectionLabel.defaultProps = {\n className: \"\",\n};\n\nSectionLabel.propTypes = {\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n};\n\nexport const Card = ({ children, className }) => (\n\n {title}\n {value}\n
\n);\n\nDashTooltipRow.propTypes = {\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),\n};\nDashTooltipRow.defaultProps = {\n title: \"\",\n value: \"\",\n};\n\nconst DashTooltip = ({ text, placement }) => {\n if (!text) return null;\n return (\n \n {isValid && (\n \n {isPositive ?
\n );\n};\n\nYtdDifference.propTypes = {\n format: PropTypes.string,\n text: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n postfix: PropTypes.string,\n};\n\nYtdDifference.defaultProps = {\n format: \"number\",\n text: \"\",\n value: undefined,\n postfix: \"\",\n};\n\nconst CardLabel = ({\n className = \"\",\n format,\n ytdDifference,\n label,\n size = \"s\",\n tooltip = \"\",\n value,\n valueColor = \"tw-text-neutral-gray-75\",\n}) => {\n const isPositive = ytdDifference >= 0;\n return (\n \n \n {label}\n {tooltip && \n
\n );\n};\n\nCardLabel.defaultProps = {\n format: undefined,\n className: \"\",\n ytdDifference: undefined,\n size: \"s\",\n tooltip: \"\",\n valueColor: \"tw-text-neutral-gray-75\",\n value: undefined,\n};\n\nCardLabel.propTypes = {\n className: PropTypes.string,\n format: PropTypes.string,\n ytdDifference: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n label: PropTypes.string.isRequired,\n size: PropTypes.string,\n tooltip: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n valueColor: PropTypes.string,\n};\n\nexport default CardLabel;\nexport { YtdDifference };\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport CardLabel from \"../BusinessDashboard/CardLabel\";\nimport colors from \"./helpers/colors\";\n\nconst StatCardLink = ({ className, label, link }) =>\n link ? (\n \n {label}\n \n ) : null;\n\nStatCardLink.defaultProps = {\n className: undefined,\n link: undefined,\n};\n\nStatCardLink.propTypes = {\n className: PropTypes.string,\n label: PropTypes.node.isRequired,\n link: PropTypes.string,\n};\n\nconst StatCard = ({ asCard, className, label, stats = {}, link, mainStat, tooltip }) => {\n const mainValue = stats[mainStat]?.value;\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n {isPositive ?
\n {formatter[format](Math.abs(ytdDifference))}\n \n )}\n \n \n {typeof mainValue === \"undefined\" ? \"N/A\" : mainValue}\n
\n {Object.keys(stats)\n .filter((key) => key !== mainStat)\n .map((key) => (\n \n {label} {tooltip}\n
\n \n);\n\nconst TransactionSnapshot = ({ year }) => {\n const [transactionType, setTransactionType] = useState(\"buyerSeller\");\n const { data, error, loading } = useTransactionSnapshot(year);\n const isThisYear = String(year) === String(new Date().getFullYear());\n const isLastYear = String(year) === String(new Date().getFullYear() - 1);\n const transactionTypeData = data[transactionType] || {};\n\n const queryParams = useMemo(() => {\n const params = new URLSearchParams();\n if (transactionType === \"buyerSeller\") {\n params.append(\"type[]\", \"buyer\");\n params.append(\"type[]\", \"seller\");\n }\n if (transactionType === \"tenantLandlord\") {\n params.append(\"type[]\", \"tenant\");\n params.append(\"type[]\", \"landlord\");\n }\n if (transactionType === \"referral\") {\n params.append(\"type[]\", \"referral\");\n }\n return params;\n }, [transactionType]);\n\n return (\n
\n setTransactionType(e.target.value)}\n />\n
\n \n
\n \n
\n);\n\nTabBar.propTypes = {\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n isPadded: PropTypes.bool,\n};\n\nTabBar.defaultProps = {\n className: \"\",\n isPadded: false,\n};\n\nexport default TabBar;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst BasicStat = ({ label, value }) => (\n \n {Children.map(children, (child) => (isValidElement(child) ? cloneElement(child, { isPadded }) : null))}\n
\n \n \n
\n);\n\nBasicStat.defaultProps = {\n value: \"\",\n};\n\nBasicStat.propTypes = {\n label: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nexport default BasicStat;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst SIZES = {\n l: \"tw-w-[14px] tw-h-[14px]\",\n m: \"tw-w-[12px] tw-h-[12px]\",\n};\n\nconst Dot = ({ className, size }) => (\n \n);\n\nDot.propTypes = {\n className: PropTypes.string.isRequired,\n size: PropTypes.string,\n};\n\nDot.defaultProps = {\n size: \"l\",\n};\n\nexport default Dot;\n","const setCheck = (setChecks, checkNum) => () =>\n setChecks((currentChecks) => {\n const newChecks = [...currentChecks];\n newChecks[checkNum] = !newChecks[checkNum];\n return newChecks;\n });\n\nexport default setCheck;\n","import formatter from \"../../../../shared/formatters\";\n\nconst TOOLTIP_ID = \"dashboard-tooltip\";\n\nconst renderCell = (label, value) =>\n value !== \"$0\"\n ? `{value}
\n {label}
\n \n ${label}:\n ${value}\n
`\n : \"\";\n\nconst getLabelKey = (label) => {\n const labels = {\n \"MTD Closed\": \"closed\",\n \"To Be Closed\": \"toBeClosed\",\n \"Closed Last Year\": \"closedPrevYear\",\n \"MTD Pended\": \"pendedUnits\",\n \"Pended Last Year\": \"pendedPrevYear\",\n \"MTD Listed\": \"listingsTaken\",\n \"Listed Last Year\": \"listingsTakenPrevYear\",\n \"Coming Soon\": \"comingSoon\"\n };\n return labels[label];\n};\n\nfunction renderTooltip({ context, content }) {\n const { caretX, caretY, xAlign, opacity, yAlign } = context.tooltip;\n const tooltipEl = document.getElementById(TOOLTIP_ID) || document.createElement(\"div\");\n if (!tooltipEl.id) {\n tooltipEl.id = TOOLTIP_ID;\n tooltipEl.className = \"tw-transition-all\";\n document.body.appendChild(tooltipEl);\n }\n\n tooltipEl.classList.remove(\"above\", \"below\", \"no-transform\");\n if (yAlign) {\n tooltipEl.classList.add(yAlign);\n } else {\n tooltipEl.classList.add(\"no-transform\");\n }\n\n const halfHeight = tooltipEl.clientHeight / 2;\n const rightPx = xAlign === \"left\" ? 0 : tooltipEl.clientWidth;\n\n if (opacity === 0) {\n tooltipEl.style.opacity = 0;\n return undefined;\n }\n\n const position = context.chart.canvas.getBoundingClientRect();\n\n tooltipEl.innerHTML = `\n \n ${content}\n
`;\n tooltipEl.style.opacity = 1;\n tooltipEl.style.position = \"absolute\";\n tooltipEl.style.left = `${position.left + window.pageXOffset + caretX - rightPx}px`;\n tooltipEl.style.top = `${position.top + window.pageYOffset + caretY - halfHeight}px`;\n tooltipEl.style.pointerEvents = \"none\";\n return tooltipEl;\n}\n\nexport function renderOverviewTooltip({ datasets, rawData, year, tab, agentUuid }, context) {\n const { dataPoints, title } = context.tooltip;\n const { datasetIndex, dataIndex } = dataPoints?.[0] || {};\n const { dotColor, label } = datasets[datasetIndex] || {};\n const labelKey = getLabelKey(label);\n const textYear = /last year/i.test(label) ? year - 1 : year;\n const estText = tab === \"Closings\" ? \"\" : \"Est. \";\n const gciText = agentUuid ? \"Net Income\" : \"GCI\";\n const units = rawData?.chartData?.units?.[labelKey]?.[dataIndex] || 0;\n const gci = formatter.currency(rawData?.chartData?.gci?.[labelKey]?.[dataIndex] || 0, 0);\n const companyIncome = formatter.currency(rawData?.chartData?.companyIncome?.[labelKey]?.[dataIndex] || 0, 0);\n const volume = formatter.currency(rawData?.chartData?.volume?.[labelKey]?.[dataIndex] || 0, 0);\n const avgSalePrice = formatter.currency(rawData?.chartData?.avgSalePrice?.[labelKey]?.[dataIndex] || 0, 0);\n const content = `\n \n ${title?.[0]} ${textYear}\n
\n\n \n ${label}\n
\n \n
\n ${renderCell(\"Units\", units)}\n ${renderCell(`${estText}Volume`, volume)}\n ${renderCell(`${estText}${gciText}`, gci)}\n ${renderCell(`${estText}Company Dollar`, companyIncome)}\n ${renderCell(`${estText}Avg. Sale Price`, avgSalePrice)}\n
\n `;\n\n return renderTooltip({ context, content });\n}\n\nexport function renderPapTooltip(context) {\n const { dataPoints } = context.tooltip;\n\n const { dataIndex, dataset: { data } = {} } = dataPoints?.[0] || {};\n\n if (!data) return \"\";\n\n const content = `\n \n ${renderCell(\"Rookie Agents\", data[dataIndex].rookieAgents)}\n ${renderCell(\"Experienced Agents\", data[dataIndex].experiencedAgents)}\n
\n `;\n return renderTooltip({ context, content });\n}\n","import axios from \"axios\";\nimport moment from \"moment\";\nimport { useEffect, useState } from \"react\";\nimport formatter from \"../../../../shared/formatters\";\nimport colors, { BRIVITY_COLORS, PLACE_COLORS } from \"../helpers/colors\";\nimport { renderOverviewTooltip } from \"../helpers/renderCustomTooltip\";\n\nexport const today = moment();\n\nconst LABELS = {\n Closings: [\"MTD Closed\", \"To Be Closed\", \"Closed Last Year\"],\n Pendings: [\"MTD Pended\", \"\", \"Pended Last Year\"],\n Listings: [\"MTD Listed\", \"Coming Soon\", \"Listed Last Year\"],\n};\n\nconst getInspectedKey = (value = \"\") => value.toLowerCase();\n\nconst getLabels = (rangeType) => {\n const startDate =\n rangeType === \"mtd\"\n ? moment().startOf(\"month\").subtract(12, \"months\")\n : moment().startOf(\"year\").subtract(1, \"month\");\n return Array(12)\n .fill(null)\n .map(() => startDate.add(1, \"month\").format(\"MMM\"));\n};\n\nconst getFailedPendingsPercent = (failedPendings, unitsPended) =>\n formatter.number(\n failedPendings ? (failedPendings / ((failedPendings || 0) + (unitsPended || 0))) * 100 : 0,\n );\n\nconst getVariableColor = (tab) => {\n if (tab === \"Closings\") return BRIVITY_COLORS.color3.default;\n return colors.theme === \"brivity\" ? PLACE_COLORS.color1.default : colors.color3.default;\n};\n\nconst transformMonthlyOverviewData = ({\n rawData: { chartData, summary = {} },\n checks,\n chartType,\n inspectedValue,\n rangeType,\n tab,\n year,\n}) => {\n const labels = getLabels(rangeType);\n const inspectedKey = getInspectedKey(inspectedValue);\n\n return {\n summary: Object.keys(summary).reduce(\n (obj, key) => ({\n ...obj,\n [key]: formatter[/volume|gci/i.test(key) ? \"currency\" : \"number\"](summary[key], 0),\n }),\n {},\n ),\n chartData: {\n labels,\n datasets: [\n {\n label: LABELS[tab][0],\n hidden: !checks[0],\n data:\n chartData?.[inspectedKey].closed ||\n chartData?.[inspectedKey].pendedUnits ||\n chartData?.[inspectedKey].listingsTaken ||\n [],\n datalabels: {\n align: \"right\",\n color: colors.color1.default,\n formatter: (value, context) => {\n if (context.dataset.data.length - 1 === context.dataIndex) {\n if (inspectedValue === \"Units\") return value;\n return formatter.currency(value);\n }\n return \"\";\n },\n },\n backgroundColor: ({ dataIndex }) =>\n year === String(today.get(\"year\")) && dataIndex > today.get(\"month\") - 1\n ? colors.color1.default\n : colors.color2.default,\n dotColor: colors.color1.default,\n hoverBackgroundColor: colors.color1.hover,\n borderColor: colors.color1.default,\n borderWidth: chartType === \"bar\" ? 0 : 3,\n lineTension: 0,\n barPercentage: 0.25,\n fill: false,\n },\n {\n label: LABELS[tab][1],\n hidden: !(chartType === \"bar\" && tab !== \"Pendings\" && checks[1]),\n backgroundColor: getVariableColor(tab),\n hoverBackgroundColor: getVariableColor(tab),\n dotColor: getVariableColor(tab),\n borderWidth: chartType === \"bar\" ? 0 : 3,\n lineTension: 0,\n data: chartData?.[inspectedKey].toBeClosed || chartData?.[inspectedKey].comingSoon || [],\n barPercentage: 0.25,\n fill: false,\n },\n {\n label: LABELS[tab][2],\n hidden: !checks[2],\n datalabels: { formatter: () => \"\" },\n backgroundColor: \"#ECEFEF\",\n dotColor: \"#ECEFEF\",\n borderColor: \"#C2C2C2\",\n borderDash: [10, 10],\n borderWidth: chartType === \"bar\" ? 0 : 3,\n lineTension: 0,\n data:\n chartData?.[inspectedKey].closedPrevYear ||\n chartData?.[inspectedKey].pendedPrevYear ||\n chartData?.[inspectedKey].listingsTakenPrevYear ||\n [],\n barPercentage: 0.5,\n fill: false,\n xAxisID: \"x2\",\n },\n ],\n },\n };\n};\n\nconst createClosingsRow = (\n label,\n unitsClosed,\n volumeClosed,\n gciClosed,\n avgSalePriceClosed,\n unitsToBeClosed,\n volumeToBeClosed,\n gciToBeClosed,\n) => [\n {\n border: \"tw-border-[2px]\",\n className: `${\n label === \"YTD\" ? \"tw-bg-tinted-gray-50\" : \"tw-bg-white\"\n } tw-font-semibold tw-text-center tw-sticky tw-left-0`,\n value: label,\n },\n {\n className: \"tw-text-center\",\n value: unitsClosed || 0,\n },\n {\n value: formatter.currency(volumeClosed || 0),\n },\n {\n value: formatter.currency(gciClosed || 0),\n },\n {\n border: \"tw-border\",\n value: formatter.currency(avgSalePriceClosed || 0),\n },\n {\n className: \"tw-text-center\",\n value: unitsToBeClosed || 0,\n },\n {\n value: formatter.currency(volumeToBeClosed || 0),\n },\n {\n value: formatter.currency(gciToBeClosed || 0),\n },\n];\n\nconst createPendingsRow = (label, unitsPended, volumePended, gciPended, failedPendings) => [\n {\n border: \"tw-border-[2px]\",\n className: `${\n label === \"YTD\" ? \"tw-bg-tinted-gray-50\" : \"tw-bg-white\"\n } tw-font-semibold tw-text-center tw-sticky tw-left-0`,\n value: label,\n },\n {\n className: \"tw-text-center\",\n value: unitsPended || 0,\n },\n {\n value: formatter.currency(volumePended || 0),\n },\n {\n value: formatter.currency(gciPended || 0),\n },\n {\n value: `${failedPendings || 0} (${getFailedPendingsPercent(failedPendings, unitsPended)}%)`,\n },\n];\n\nconst createListingsRow = (\n label,\n listingsTaken,\n listingsVolume,\n listingsGci,\n comingSoonUnits,\n comingSoonVolume,\n comingSoonGci,\n) => [\n {\n border: \"tw-border-[2px]\",\n className: `${\n label === \"YTD\" ? \"tw-bg-tinted-gray-50\" : \"tw-bg-white\"\n } tw-font-semibold tw-text-center tw-sticky tw-left-0`,\n value: label,\n },\n {\n className: \"tw-text-center\",\n value: listingsTaken || 0,\n },\n {\n value: formatter.currency(listingsVolume || 0),\n },\n {\n border: \"tw-border\",\n value: formatter.currency(listingsGci || 0),\n },\n {\n className: \"tw-text-center\",\n value: comingSoonUnits || 0,\n },\n {\n value: formatter.currency(comingSoonVolume || 0),\n },\n {\n value: formatter.currency(comingSoonGci || 0),\n },\n];\n\nconst transformTableData = ({ rangeType, rawData: { chartData, year }, tab }) => {\n let totals;\n let rows = [];\n let totalsRow = [];\n switch (tab) {\n case \"Pendings\": {\n totals = Array(4).fill(0);\n rows = getLabels(rangeType).map((label, i) => {\n const unitsPended = chartData?.units?.pendedUnits?.[i];\n const volumePended = chartData?.volume?.pendedUnits?.[i];\n const gciPended = chartData?.gci?.pendedUnits?.[i];\n const failedPendings = chartData?.units?.failed?.[i];\n\n // Add to totals\n totals[0] += unitsPended;\n totals[1] += volumePended;\n totals[2] += gciPended;\n totals[3] += failedPendings;\n\n return createPendingsRow(label, unitsPended, volumePended, gciPended, failedPendings);\n });\n totalsRow = createPendingsRow(\"YTD\", ...totals);\n break;\n }\n case \"Listings\": {\n totals = Array(6).fill(0);\n rows = getLabels(rangeType).map((label, i) => {\n const listingsTaken = chartData?.units?.listingsTaken?.[i];\n const listingsVolume = chartData?.volume?.listingsTaken?.[i];\n const listingsGci = chartData?.gci?.listingsTaken?.[i];\n const comingSoonUnits = chartData?.units?.comingSoon?.[i];\n const comingSoonVolume = chartData?.volume?.comingSoon?.[i];\n const comingSoonGci = chartData?.gci?.comingSoon?.[i];\n\n // Add to totals\n totals[0] += listingsTaken;\n totals[1] += listingsVolume;\n totals[2] += listingsGci;\n totals[3] += comingSoonUnits;\n totals[4] += comingSoonVolume;\n totals[5] += comingSoonGci;\n\n return createListingsRow(\n label,\n listingsTaken,\n listingsVolume,\n listingsGci,\n comingSoonUnits,\n comingSoonVolume,\n comingSoonGci,\n );\n });\n totalsRow = createListingsRow(\"YTD\", ...totals);\n break;\n }\n default: {\n const now = moment();\n const calendarMonths = year > now.get(\"year\") ? 1 : now.get(\"months\") + 1;\n const divisor = rangeType === \"mtd\" || year < now.get(\"year\") ? 12 : calendarMonths;\n totals = Array(7).fill(0);\n rows = getLabels(rangeType).map((label, i) => {\n const unitsClosed = chartData?.units?.closed?.[i];\n const volumeClosed = chartData?.volume?.closed?.[i];\n const gciClosed = chartData?.gci?.closed?.[i];\n const avgSalePriceClosed = chartData?.avgSalePrice?.closed?.[i];\n const unitsToBeClosed = chartData?.units?.toBeClosed?.[i];\n const volumeToBeClosed = chartData?.volume?.toBeClosed?.[i];\n const gciToBeClosed = chartData?.gci?.toBeClosed?.[i];\n\n // Add to totals\n totals[0] += unitsClosed;\n totals[1] += volumeClosed;\n totals[2] += gciClosed;\n totals[3] += avgSalePriceClosed;\n totals[4] += unitsToBeClosed;\n totals[5] += volumeToBeClosed;\n totals[6] += gciToBeClosed;\n\n return createClosingsRow(\n label,\n unitsClosed,\n volumeClosed,\n gciClosed,\n avgSalePriceClosed,\n unitsToBeClosed,\n volumeToBeClosed,\n gciToBeClosed,\n );\n });\n totals[3] /= divisor;\n totalsRow = createClosingsRow(\"YTD\", ...totals);\n }\n }\n return { rows, totalsRow };\n};\n\nconst getChartOptions = ({\n data: {\n chartData: { datasets },\n },\n rawData,\n year,\n tab,\n agentUuid,\n}) => ({\n plugins: {\n legend: { display: false },\n tooltip: {\n enabled: false,\n external: renderOverviewTooltip.bind(renderOverviewTooltip, { datasets, rawData, year, tab, agentUuid }),\n },\n },\n scales: {\n x: {\n stacked: true,\n grid: {\n display: false,\n },\n offset: true,\n },\n x2: {\n display: false,\n type: \"category\",\n grid: {\n offset: true,\n },\n offset: true,\n },\n y: {\n stacked: true,\n border: {\n display: false,\n },\n min: 0,\n ticks: {\n beginAtZero: true,\n autoSkip: false,\n callback: (value) => (value > 1000 ? `${Math.ceil(value / 1000)}k` : value),\n padding: 10,\n },\n },\n },\n});\n\nconst getCheckLabels = (tab, chartType) => {\n const variableColor = colors.theme === \"brivity\" ? \"tw-bg-semantic-blue-100\" : \"tw-bg-[#121212]\";\n return [\n {\n label: LABELS[tab][0],\n color: colors.theme === \"brivity\" ? \"tw-bg-brivity-blue-100\" : \"tw-bg-semantic-blue-100\",\n },\n {\n label: chartType === \"bar\" ? LABELS[tab][1] : \"\",\n color: tab === \"Listings\" ? variableColor : \"tw-bg-semantic-yellow-100\",\n },\n { label: LABELS[tab][2], color: \"tw-bg-tinted-gray-100\" },\n ];\n};\n\nconst getSectionFromTab = (agentUuid, tab) => `${agentUuid ? \"agent_\" : \"\"}${tab.toLowerCase()}_overview`;\n\nconst useMonthlyOverview = ({ agentUuid, chartType, checks, inspectedValue, rangeType, tab, year }) => {\n const [rawData, setRawData] = useState({});\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const section = getSectionFromTab(agentUuid, tab);\n const checkLabels = getCheckLabels(tab, chartType);\n const data = transformMonthlyOverviewData({\n rawData,\n checks,\n chartType,\n inspectedValue,\n rangeType,\n tab,\n year,\n });\n const tableData = transformTableData({ rangeType, rawData, tab });\n const chartOptions = getChartOptions({ data, rawData, year, tab, agentUuid });\n\n useEffect(() => {\n const abortController = new AbortController();\n\n setLoading(true);\n setError(null);\n\n axios\n .get(`/api/v4/reporting/${agentUuid ? \"agent\" : \"business\"}_dashboard`, {\n params: {\n section,\n selected_year: year,\n range_type: rangeType,\n person_uuid: agentUuid,\n },\n signal: abortController.signal,\n })\n .then(({ data: serverData }) => {\n setRawData(serverData);\n setError(null);\n setLoading(false);\n })\n .catch((err) => {\n if (!axios.isCancel(err)) {\n setError(err);\n setLoading(false);\n }\n });\n\n return () => abortController.abort();\n }, [agentUuid, rangeType, section, year]);\n\n return { chartOptions, checkLabels, data, error, loading, tableData };\n};\n\nexport default useMonthlyOverview;\n","import { useEffect, useRef, useState } from \"react\";\n\nconst getFullscreenElement = () =>\n document.mozFullscreenElement || document.webkitFullscreenElement || document.fullscreenElement;\nconst exitFullscreen = () => {\n if (document.mozExitFullscreen) document.mozExitFullscreen();\n else if (document.webkitExitFullscreen) document.webkitExitFullscreen();\n else if (document.exitFullscreen) document.exitFullscreen();\n};\nconst requestFullscreen = (element) => {\n if (element.mozRequestFullscreen) element.mozRequestFullscreen();\n else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();\n else if (element.requestFullscreen) element.requestFullscreen();\n};\n\nconst useFullscreen = () => {\n const ref = useRef(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n\n useEffect(() => {\n const onFullscreenChange = () => {\n setIsFullscreen(!!getFullscreenElement());\n };\n document.addEventListener(\"mozfullscreenchange\", onFullscreenChange);\n document.addEventListener(\"webkitfullscreenchange\", onFullscreenChange);\n document.addEventListener(\"fullscreenchange\", onFullscreenChange);\n return () => {\n document.removeEventListener(\"mozfullscreenchange\", onFullscreenChange);\n document.removeEventListener(\"webkitfullscreenchange\", onFullscreenChange);\n document.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n };\n }, []);\n\n const toggleFullscreen = () => {\n if (getFullscreenElement()) {\n exitFullscreen();\n return;\n }\n\n const element = ref.current;\n if (element) requestFullscreen(element);\n };\n\n return {\n ref,\n isFullscreen,\n toggleFullscreen,\n };\n};\n\nexport default useFullscreen;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { SortDownSolidV6, SortUpSolidV6 } from \"@shared/v2/Icomoon\";\n\nconst BORDER_STYLE = \"tw-border-solid tw-border-l-0 tw-border-y-0 tw-border-gray-10\";\n\nexport const Table = ({ children, className, ...props }) => (\n \n {children}\n {onSort && (\n \n
\n | \n {value}\n | \n ))}\n
\n Monthly Overview \n
\n \n \n \n \n
\n \n {today.format(\"MMMM\")} {year}\n
\n\n {tab === \"Closings\" && (\n <>\n
\n \n setInspectedValue(e.target.value)}\n />\n\n setIsTableModalOpen(true)}\n >\n
\n \n
\n \n {chartType === \"bar\" && \n \n
\n \n {checkLabels.map(({ label, color }, i) =>\n label ? (\n \n
\n }\n />\n ) : null,\n )}\n \n {t}
\n ))}\n \n );\n};\n\nTooltip.propTypes = {\n left: PropTypes.number,\n top: PropTypes.number,\n tooltip: PropTypes.arrayOf(PropTypes.string),\n};\n\nTooltip.defaultProps = {\n left: null,\n top: null,\n tooltip: null,\n};\n\nconst TooltipContainer = ({ left, top, tooltip }) => {\n let tooltipContainer = document.getElementById(PORTAL_ID);\n if (!tooltipContainer) {\n tooltipContainer = document.createElement(\"div\");\n tooltipContainer.style.pointerEvents = \"none\";\n tooltipContainer.id = PORTAL_ID;\n document.body.appendChild(tooltipContainer);\n }\n return ReactDOM.createPortal(\n
\n );\n};\n\nRingChart.propTypes = {\n baseTooltip: PropTypes.arrayOf(PropTypes.string),\n children: PropTypes.node,\n size: PropTypes.number,\n strokeWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n data: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.number, color: PropTypes.string })),\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n title: PropTypes.string,\n variant: PropTypes.oneOf([\"stacked\", \"segmented\"]),\n fullWidth: PropTypes.bool,\n};\n\nRingChart.defaultProps = {\n baseTooltip: null,\n children: null,\n size: 100,\n strokeWidth: 8,\n data: [],\n label: \"\",\n title: \"\",\n variant: \"stacked\",\n fullWidth: false,\n};\n\nexport default RingChart;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport RingChart from \"../../../shared/v2/RingChart\";\nimport CardLabel from \"../BusinessDashboard/CardLabel\";\nimport Button from \"../../../shared/v2/Button\";\n\nconst RingChartCard = ({\n onSetGoal,\n year,\n data: {\n baseTooltip,\n format,\n hasGoal,\n displayName,\n chartData,\n chartLabel,\n goal,\n total,\n ytdDifference,\n prevYearYtdDifference,\n },\n}) => (\n \n \n \n {title} \n \n )}\n \n {label} \n \n \n {children}\n
\n \n
\n);\n\nRingChartCard.propTypes = {\n onSetGoal: PropTypes.func.isRequired,\n year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n data: PropTypes.shape({\n baseTooltip: PropTypes.arrayOf(PropTypes.string),\n format: PropTypes.string,\n hasGoal: PropTypes.bool,\n displayName: PropTypes.string,\n // eslint-disable-next-line react/forbid-prop-types\n chartData: PropTypes.any,\n chartLabel: PropTypes.string,\n goal: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n total: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n ytdDifference: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n prevYearYtdDifference: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }).isRequired,\n};\n\nexport default RingChartCard;\n","import { useEffect, useState } from \"react\";\nimport { isCancel } from \"axios\";\nimport { caseTransformingAxios as axios } from \"../../../../shared/v2/caseTransformingAxios\";\nimport formatter from \"../../../../shared/formatters\";\nimport colors from \"../helpers/colors\";\n\nconst transformGlanceToChartData = (\n {\n format,\n goal: initialGoal = null,\n ytdGoalTarget = 0,\n total = 0,\n prevYearYtdTarget,\n displayName,\n ...rest\n } = {},\n year,\n) => {\n const goal = Number(initialGoal);\n const ytdDifference = total - ytdGoalTarget;\n const prevYearYtdDifference = total - (prevYearYtdTarget || 0);\n const currentPercentage = total / (goal || 1);\n const targetPercentage = ytdGoalTarget / (goal || 1);\n\n return {\n ...rest,\n format,\n hasGoal: goal !== 0,\n goal: formatter[format](goal),\n total: formatter[format](total),\n ytdGoalTarget: formatter[format](ytdGoalTarget),\n chartLabel: goal === 0 ? \"–\" : `${formatter.number(currentPercentage * 100)}%`,\n ytdDifference,\n prevYearYtdDifference: prevYearYtdTarget ? prevYearYtdDifference : null,\n displayName,\n baseTooltip: [`${year} Goal:`, formatter[format](goal)],\n chartData: [\n {\n color: colors.color2.default,\n value: targetPercentage,\n tooltip: [\"YTD Goal:\", formatter[format](ytdGoalTarget)],\n },\n {\n color: colors.color1.default,\n value: currentPercentage,\n tooltip: [`${displayName}:`, formatter[format](total)],\n },\n ],\n };\n};\n\nconst transformGoalProgress = ({ goals = [], year }) =>\n goals.map((goal) => transformGlanceToChartData(goal, year));\n\nconst useGoals = ({ agentUuid, year }) => {\n const [loading, setLoading] = useState(true);\n const [data, setData] = useState(transformGoalProgress({}));\n const [error, setError] = useState(null);\n\n const actions = {\n reload: (signal) => {\n setLoading(true);\n return axios\n .get(`/api/v4/reporting/${agentUuid ? \"agent\" : \"business\"}_dashboard`, {\n params: { selected_year: year, section: \"goal_progress\", person_uuid: agentUuid },\n signal,\n })\n .then((res) => {\n setData(transformGoalProgress(res.data));\n setError(null);\n setLoading(false);\n })\n .catch((err) => {\n if (!isCancel(err)) {\n setError(err);\n setLoading(false);\n }\n });\n },\n };\n\n useEffect(() => {\n const abortController = new AbortController();\n actions.reload(abortController.signal);\n return () => abortController.abort();\n }, [agentUuid, year]);\n\n return { actions, data, error, loading };\n};\n\nexport default useGoals;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Loader from \"../../../Goals/components/Loader\";\nimport { ChevronRight } from \"../../../shared/v2/Icomoon\";\nimport TextButton from \"../../../shared/v2/TextButton\";\nimport GoalModal from \"../BusinessDashboard/GoalModal\";\nimport RingChartCard from \"./RingChartCard\";\nimport { Section, SectionLabel } from \"../BusinessDashboard/Section\";\nimport useGoals from \"./services/useGoals\";\nimport Error from \"./Error\";\n\nconst GoalsSection = ({ agentUuid, year }) => {\n const [goalType, setGoalType] = useState(null);\n const { actions, data, error, loading } = useGoals({ agentUuid, year });\n\n return (\n \n
\n \n
\n {!hasGoal && (\n \n
\n \n \n
\n )}\n \n {agentUuid ? \"\" : \"Team\"} Goals \n window.location.assign(`/settings/goals?year=${year}`)}\n >\n Goal settings
\n \n {data.map((d) => (\n setGoalType(d)} />\n ))}\n
\n \n {agentUuid ? \"Closings\" : \"Business\"} by Source \n {!agentUuid && (\n {\n if (source.value === \"all\") {\n if (selectedSources.some((s) => s.value === \"all\")) setSelectedSources([]);\n else setSelectedSources(sourceLabels);\n } else if (selectedSources.some((s) => s.value === source.value)) {\n setSelectedSources((currentSources) =>\n currentSources.filter((s) => s.value !== \"all\" && s.value !== source.value),\n );\n } else {\n setSelectedSources((currentSources) =>\n currentSources.length === sourceLabels.length - 2\n ? [sourceLabels[0]].concat([...currentSources, source])\n : [...currentSources, source],\n );\n }\n }}\n />\n )}\n
\n {!agentUuid && (\n \n
\n )}\n \n \n
\n }\n />\n \n
\n \n value > 0)}\n size={104}\n variant=\"segmented\"\n title=\"Total\"\n label={total.units}\n />\n
\n \n \n \n
\n
\n | Type | \nCount | \nVolume | \n{agentUuid ? \"Net Income\" : \"GCI\"} | \nAvg. Close Price | \nAvg. Commission | \n
|---|
\n setOption(e.target.value)}\n />\n
\n \n setShowClosed(!showClosed)}\n label={\n \n setShowPending(!showPending)}\n label={\n \n
\n \n {label}:\n {value}\n
\n);\n\nTooltipRow.propTypes = {\n label: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nTooltipRow.defaultProps = {\n value: \"\",\n};\n\nconst TooltipContent = ({ data, type }) => (\n \n
\n);\n\nTooltipContent.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n data: PropTypes.objectOf(PropTypes.any).isRequired,\n type: PropTypes.oneOf([\"set\", \"held\"]),\n};\n\nTooltipContent.defaultProps = {\n type: \"set\",\n};\n\nconst PipelineStat = ({ completed, data, label, labelTooltip, value }) => {\n const isPlaceTheme = useTheme().name === \"place-theme\";\n const valueContent = data ? \n Appointments {type === \"set\" ? \"Set\" : \"Held\"}\n
\n \n {type === \"set\" && (\n <>\n \n
\n );\n};\n\nPipelineStat.propTypes = {\n completed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n // eslint-disable-next-line react/forbid-prop-types\n data: PropTypes.objectOf(PropTypes.any),\n label: PropTypes.string.isRequired,\n labelTooltip: PropTypes.node,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nPipelineStat.defaultProps = {\n completed: \"\",\n data: null,\n labelTooltip: undefined,\n value: 0,\n};\n\nexport default PipelineStat;\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { caseTransformingAxios } from \"@shared/v2/caseTransformingAxios\";\nimport Alert from \"@shared/v2/Alert\";\nimport Button from \"@shared/v2/Button\";\nimport { BriefcaseSolidV6 } from \"@shared/v2/Icomoon\";\nimport Loading from \"../../../Goals/components/Loader\";\nimport Error from \"../DashboardShared/Error\";\nimport useRecruitingPipeline from \"./services/useRecruitingPipeline\";\nimport { Section, SectionLabel } from \"../BusinessDashboard/Section\";\nimport Dropdown from \"../../../shared/v2/Dropdown\";\nimport CustomControl from \"../BusinessDashboard/Dropdown/CustomControl\";\nimport { CustomBasicSingleValue } from \"../BusinessDashboard/Dropdown/CustomSingleValue\";\nimport CustomValueContainer from \"../BusinessDashboard/Dropdown/CustomValueContainer\";\nimport PipelineStat from \"./PipelineStat\";\nimport getDateDropdownOptions from \"../DashboardShared/helpers/getDateDropdownOptions\";\nimport CustomDropdownIndicator from \"../BusinessDashboard/Dropdown/CustomDropdownIndicator\";\nimport { useFeatureFlags } from \"../../../reducers/layoutReducer/selectors\";\n\nconst useRecruitingSubscription = () => {\n const [recruitingSubscription, setRecruitingSubscription] = useState(null);\n useEffect(() => {\n caseTransformingAxios\n .get(\"/api/v4/reporting/recruiter_subscription\")\n .then(({ data }) => setRecruitingSubscription(data.active))\n .catch(() => false);\n }, []);\n return recruitingSubscription;\n};\n\nconst RecruitingPipelineSection = ({ year, isBrivity }) => {\n const featureFlags = useFeatureFlags();\n const monthlyOverviewOptions = useMemo(() => getDateDropdownOptions(year, \"extended\"), [year]);\n const [rangeType, setRangeType] = useState(monthlyOverviewOptions[0]);\n const { actions, data, error, loading } = useRecruitingPipeline({ isBrivity, rangeType, year });\n const recruitingSubscription = useRecruitingSubscription();\n\n useEffect(() => setRangeType(monthlyOverviewOptions[0]), [monthlyOverviewOptions, year]);\n\n return (\n \n {label} {labelTooltip &&
\n \n {valueContent}\n {typeof completed === \"number\" && (\n
\n \n Recruiting {isBrivity ? \"Funnel\" : \"Pipeline\"} \n
\n\n {isBrivity && featureFlags.recruiterLink && recruitingSubscription === false && (\n \n
\n Need more recruits? Get Recruiter.ai
\n Not enough recruits in your pipeline? You could earn an additional $122,000 - $167,000 in\n annual revenue by adding one agent to your team!\n\n
\n \n
\n);\n\nSingleStatCard.propTypes = {\n label: PropTypes.string.isRequired,\n tooltip: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n};\n\nSingleStatCard.defaultProps = {\n tooltip: \"\",\n};\n\nexport default SingleStatCard;\n","/* eslint-disable camelcase */\nimport React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\nimport formatter from \"../../../../shared/formatters\";\nimport { getBusinessDashboard } from \"./api\";\n\nconst transformSummaryTotals = (\n {\n avgMtdSalesPrice = 0,\n avgYtdCommission = 0,\n avgYtdSalesPrice = 0,\n estTotalGci = 0,\n ytdCompanyDollar = 0,\n ytdPendingToClosedRatio = 0,\n },\n year,\n) => ({\n summary: {\n avgMtdSalesPrice: year !== String(new Date().getFullYear()) ? \"-\" : formatter.currency(avgMtdSalesPrice),\n avgYtdCommission: formatter.currency(avgYtdCommission),\n avgYtdSalesPrice: formatter.currency(avgYtdSalesPrice),\n estTotalGci: formatter.currency(estTotalGci),\n ytdCompanyDollar: formatter.currency(ytdCompanyDollar),\n ytdPendingToClosedRatio,\n },\n year,\n});\n\nconst useTransactionSummary = (year) => {\n const [loading, setLoading] = useState(true);\n const [data, setData] = React.useState(transformSummaryTotals({}));\n const [error, setError] = React.useState(null);\n\n useEffect(() => {\n const abortController = new AbortController();\n setLoading(true);\n getBusinessDashboard({\n signal: abortController.signal,\n params: {\n section: \"ytd_summary\",\n selectedYear: year,\n },\n })\n .then((res) => {\n setData(transformSummaryTotals(res.data, year));\n setError(null);\n setLoading(false);\n })\n .catch((err) => {\n if (!axios.isCancel(err)) {\n setError(err);\n setLoading(false);\n }\n });\n return () => abortController.abort();\n }, [year]);\n\n return { data, error, loading };\n};\n\nexport default useTransactionSummary;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport SingleStatCard from \"./SingleStatCard\";\nimport useTransactionSummary from \"./services/useTransactionSummary\";\nimport Error from \"../DashboardShared/Error\";\nimport Loader from \"../../../Goals/components/Loader\";\n\nconst TransactionSummary = ({ year }) => {\n const isThisYear = String(year) === String(new Date().getFullYear());\n const { data, error, loading } = useTransactionSummary(year);\n return (\n \n
\n {value}\n {label}
\n {tooltip && (\n\n
\n );\n};\n\nTransactionSummary.propTypes = {\n year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n};\n\nexport default TransactionSummary;\n","import { useEffect, useMemo, useState } from \"react\";\nimport axios from \"axios\";\nimport moment from \"moment\";\nimport { caseTransformingAxios } from \"@shared/v2/caseTransformingAxios\";\n\nconst getDateRange = (dateRange) => {\n let startDate = moment().startOf(\"year\");\n let endDate = moment().endOf(\"year\");\n\n if (dateRange === \"today\") {\n startDate = moment().startOf(\"day\");\n endDate = moment().endOf(\"day\");\n }\n\n if (dateRange === \"last_7_days\") {\n startDate = moment().subtract(7, \"days\").startOf(\"day\");\n endDate = moment().endOf(\"day\");\n }\n\n if (dateRange === \"last_14_days\") {\n startDate = moment().subtract(14, \"days\").startOf(\"day\");\n endDate = moment().endOf(\"day\");\n }\n\n if (dateRange === \"last_30_days\") {\n startDate = moment().subtract(30, \"days\").startOf(\"day\");\n endDate = moment().endOf(\"day\");\n }\n\n if (dateRange === \"last_90_days\") {\n startDate = moment().subtract(90, \"days\").startOf(\"day\");\n endDate = moment().endOf(\"day\");\n }\n\n if (dateRange === \"this_month\") {\n startDate = moment().startOf(\"month\");\n endDate = moment().endOf(\"month\");\n }\n\n if (dateRange === \"last_month\") {\n startDate = moment().subtract(1, \"month\").startOf(\"month\");\n endDate = moment().subtract(1, \"month\").endOf(\"month\");\n }\n\n if (dateRange === \"last_year\") {\n startDate = moment().subtract(1, \"year\").startOf(\"year\");\n endDate = moment().subtract(1, \"year\").endOf(\"year\");\n }\n\n return { startDate: startDate.format(\"YYYY-MM-DD\"), endDate: endDate.format(\"YYYY-MM-DD\") };\n};\n\nconst useSalesFunnel = ({ agentUuid, dateRange, filters }) => {\n const [loading, setLoading] = useState(true);\n const [rawData, setRawData] = useState(null);\n const [error, setError] = useState(null);\n\n const data = useMemo(() => {\n if (!rawData) {\n return {\n callsContactedRatio: 0,\n contactedApptSetRatio: 0,\n apptSetApptHeldRatio: 0,\n apptHeldApptSignedRatio: 0,\n apptSignedPendedRatio: 0,\n pendedClosedRatio: 0,\n };\n }\n\n const filterKeys = Object.keys(filters).filter((key) => filters[key]);\n const dataKeys = Object.keys(rawData.buyer);\n const transformedData = dataKeys.reduce((acc, key) => {\n acc[key] = {\n actual: filterKeys.reduce((sum, filterKey) => sum + (rawData[filterKey][key]?.actual || 0), 0),\n goal: Number(Math.round(rawData[filterKeys[0]]?.[key]?.goal) || 0),\n onTarget: Number(rawData[filterKeys[0]]?.[key]?.onTarget || 0),\n };\n return acc;\n }, {});\n transformedData.callsContactedRatio = Math.round(\n (transformedData.contacted.actual / (transformedData.calls.actual || 1)) * 100,\n );\n transformedData.contactedApptSetRatio = Math.round(\n (transformedData.apptSet.actual / (transformedData.contacted.actual || 1)) * 100,\n );\n transformedData.apptSetApptHeldRatio = Math.round(\n (transformedData.apptHeld.actual / (transformedData.apptSet.actual || 1)) * 100,\n );\n transformedData.apptHeldApptSignedRatio = Math.round(\n (transformedData.apptSigned.actual / (transformedData.apptHeld.actual || 1)) * 100,\n );\n transformedData.apptSignedPendedRatio = Math.round(\n (transformedData.pended.actual / (transformedData.apptSigned.actual || 1)) * 100,\n );\n transformedData.pendedClosedRatio = Math.round(\n (transformedData.closed.actual / (transformedData.pended.actual || 1)) * 100,\n );\n\n return transformedData;\n }, [filters, rawData]);\n\n useEffect(() => {\n const abortController = new AbortController();\n setLoading(true);\n caseTransformingAxios\n .get(`/api/v4/reporting/${agentUuid ? \"agent\" : \"business\"}_dashboard`, {\n signal: abortController.signal,\n params: {\n personUuid: agentUuid,\n section: \"sales_funnel\",\n ...getDateRange(dateRange),\n },\n })\n .then((res) => {\n setRawData(res.data);\n setError(null);\n setLoading(false);\n })\n .catch((err) => {\n if (!axios.isCancel(err)) {\n setError(err.response.data?.message || \"Whoops! Something went wrong.\");\n setLoading(false);\n }\n });\n return () => abortController.abort();\n }, [agentUuid, dateRange]);\n\n return { data, error, loading };\n};\n\nexport default useSalesFunnel;\n","import React, { useMemo, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Checkbox from \"@shared/v2/Checkbox\";\nimport RingChart from \"@shared/v2/RingChart\";\nimport TextButton from \"@shared/v2/TextButton\";\nimport Tooltip from \"@shared/v2/Tooltip\";\nimport { AngleRightSolidV6, CircleInfoSolidV6 } from \"@shared/v2/Icomoon\";\nimport Dropdown from \"../../../shared/v2/Dropdown/Dropdown\";\nimport CustomControl from \"./Dropdown/CustomControl\";\nimport { CustomBasicSingleValue } from \"./Dropdown/CustomSingleValue\";\nimport CustomValueContainer from \"./Dropdown/CustomValueContainer\";\nimport CustomDropdownIndicator from \"./Dropdown/CustomDropdownIndicator\";\nimport { Section, SectionLabel } from \"./Section\";\nimport useSalesFunnel from \"./services/useSalesFunnel\";\nimport Loading from \"../../../Goals/components/Loader\";\nimport Error from \"../DashboardShared/Error\";\nimport goToLeadView from \"./helpers/goToLeadView\";\nimport { useTheme } from \"../../../reducers/layoutReducer/selectors\";\n\nconst CountsCallsTooltip = ({ talked }) => (\n <>\n Counts calls {talked ? \"with an outcome of 'Talked'\" : \"\"} to leads with intent of:
\n - \n
- Buyer \n
- Seller \n
- Buyer/Seller \n
- N/A \n
Only appointment types which directly drive production are counted towards Set & Held goals:
\n - \n
- Buyer Consultation \n
- Listing Consultation \n
- Buyer/Listing Consultation \n
\n \n {value.toLocaleString()}\n
\n {hasGoal && {goal.toLocaleString()}}\n {!hasGoal && (\n window.open(\"/settings/goals\", \"_blank\")}>Set Goal \n )}\n
\n {hasGoal && (\n \n {hasGoal && {goal.toLocaleString()}}\n {!hasGoal && (\n
\n {value}}\n content={`${value} ${tooltip}`}\n />\n
\n);\n\nPercent.propTypes = {\n tooltip: PropTypes.node.isRequired,\n value: PropTypes.string.isRequired,\n};\n\nconst FunnelRing = ({ agentId, data, filters, title, tooltip, dateRange }) => {\n const isPlace = useTheme().name === \"place-theme\";\n const ringChartData = useMemo(() => {\n const { goal, actual, onTarget } = data;\n if (goal === 0) return [];\n return [\n { value: onTarget / goal, color: isPlace ? \"#C8D9FA\" : \"#BDE7E7\" },\n { value: actual / goal, color: isPlace ? \"#3270FA\" : \"#59C4C4\" },\n ];\n }, [data, isPlace]);\n return (\n \n \n {title}{\" \"}\n {tooltip && (\n \n
\n );\n};\n\nFunnelRing.propTypes = {\n agentId: PropTypes.number,\n data: PropTypes.shape({\n actual: PropTypes.number,\n goal: PropTypes.number,\n onTarget: PropTypes.number,\n }),\n dateRange: PropTypes.string.isRequired,\n filters: PropTypes.shape().isRequired,\n title: PropTypes.string.isRequired,\n tooltip: PropTypes.node,\n};\n\nFunnelRing.defaultProps = {\n agentId: undefined,\n data: { actual: 0, goal: 0, onTarget: 0 },\n tooltip: null,\n};\n\nconst useDateOptions = () => {\n const [dateRange, setDateRange] = useState(\"this_year\");\n const options = useMemo(\n () => [\n { label: \"Today\", value: \"today\" },\n { label: \"Last 7 Days\", value: \"last_7_days\" },\n { label: \"Last 14 Days\", value: \"last_14_days\" },\n { label: \"Last 30 Days\", value: \"last_30_days\" },\n { label: \"Last 90 Days\", value: \"last_90_days\" },\n { label: \"This Month\", value: \"this_month\" },\n { label: \"Last Month\", value: \"last_month\" },\n { label: \"This Year\", value: \"this_year\" },\n { label: \"Last Year\", value: \"last_year\" },\n // { label: \"All Time\", value: \"all_time\" },\n ],\n [],\n );\n return { options, dateRange, setDateRange };\n};\n\nconst SalesFunnel = ({ agentId, agentPersonId, agentUuid }) => {\n const [filters, setFilters] = useState({\n buyer: true,\n seller: true,\n buyerSeller: true,\n na: true,\n });\n const updateFilter = (name) => () => setFilters((prev) => ({ ...prev, [name]: !prev[name] }));\n const { options, dateRange, setDateRange } = useDateOptions();\n const { data, error, loading } = useSalesFunnel({ agentUuid, dateRange, filters });\n\n return (\n \n
\n }\n />\n \n {title}:\n {data.actual.toLocaleString()}\n
\n \n On Target:\n {data.onTarget.toLocaleString()}\n
\n \n Total Goal:\n {data.goal.toLocaleString()}\n
\n \n Sales Funnel\n
\n \n o.value === dateRange)}\n onChange={(o) => setDateRange(o.value)}\n options={options}\n />\n \n window.open(\"/settings/goals\", \"_blank\")}\n >\n Goal Settings
\n \n
\n {loading && \n
\n );\n};\n\nexport default BusinessDashboard;\n","const getPostJsonHeaders = () => {\n return {\n headers: {\n \"X-CSRF-Token\": ReactOnRails.authenticityToken(),\n \"Content-Type\": \"application/json\",\n \"Accept\": \"application/json\"\n }\n };\n};\n\nexport { getPostJsonHeaders };\n","import axios from \"axios\";\n\nimport { getPostJsonHeaders } from \"@shared/axiosHelpers\";\n\nexport const getAgentsAndTrackingNumbers = async () => {\n const { data } = await axios.get(\"/phone_system/tracking_numbers/settings\", getPostJsonHeaders());\n\n return { agents: data.agents, trackingNumbers: data.tracking_numbers };\n};\n\nconst mapTrackingNumberRoutes = (users) =>\n users?.map((user, i) => ({\n user_id: user.id,\n position: i,\n }));\n\nconst createError = (e) => {\n const error = e.response ? e.response.data.error : \"Something went wrong!\";\n\n return { error };\n};\n\nexport const getAvailableNumbers = async (agentId, countryCode, areaCode) => {\n const data = {\n country_code: countryCode,\n area_code: areaCode,\n };\n\n try {\n const response = await axios.post(\n `/users/${agentId}/available_managed_numbers`,\n data,\n getPostJsonHeaders(),\n );\n const numbers = response.data.numbers.map(([value, label]) => ({ label, value }));\n\n return { numbers };\n } catch (e) {\n return createError(e);\n }\n};\n\nexport const getAvailableTollFreeNumbers = async (agentId, countryCode) => {\n try {\n const response = await axios.get(\n `/users/${agentId}/available_toll_free_numbers?country_code=${countryCode}`,\n );\n\n const numbers = response.data.numbers.map(([value, label]) => ({ label, value }));\n\n return { numbers };\n } catch (e) {\n return createError(e);\n }\n};\n\nexport const getSources = async () => {\n try {\n const response = await axios.get(`/sources`, getPostJsonHeaders());\n const sources = response.data.sources.map(({ text, id }) => ({ label: text, value: id }));\n\n return { sources };\n } catch (e) {\n return createError(e);\n }\n};\n\nconst createNewSource = async (name) => {\n const response = await axios.post(\"/sources\", { source: { name } }, getPostJsonHeaders());\n\n return response.data.source_id;\n};\n\nexport const buyTrackingNumber = async (\n agentId,\n name,\n number,\n routingMethod,\n users,\n sourceId,\n shouldCreateLeads,\n noAnswerSetting,\n voicemailGreetingFilename,\n inboundRecording,\n inboundNotificationMessageCondition,\n) => {\n const data = {\n tracking_number: {\n name,\n inbound_recording: inboundRecording,\n inbound_notification_message_condition: inboundNotificationMessageCondition,\n number,\n routing_rule: routingMethod,\n create_phone_number_leads: shouldCreateLeads,\n new_lead_source_id: sourceId,\n voicemail_greeting: voicemailGreetingFilename,\n },\n tracking_number_routings: mapTrackingNumberRoutes(users),\n };\n\n if (routingMethod === \"round_robin\") {\n data.tracking_number.no_answer_setting = noAnswerSetting;\n }\n\n try {\n if (sourceId === \"new\") {\n data.tracking_number.new_lead_source_id = await createNewSource(name);\n }\n\n const response = await axios.post(\"/phone_system/tracking_numbers\", data, getPostJsonHeaders());\n\n return { trackingNumberId: response.data.tracking_number_id };\n } catch (e) {\n return createError(e);\n }\n};\n\nexport const updateTrackingNumber = async (\n trackingNumberId,\n name,\n sourceId,\n routingMethod,\n users,\n shouldCreateLeads,\n noAnswerSetting,\n voicemailGreetingFilename,\n inboundRecording,\n inboundNotificationMessageCondition,\n) => {\n const data = {\n tracking_number: {\n name,\n inbound_recording: inboundRecording,\n inbound_notification_message_condition: inboundNotificationMessageCondition,\n routing_rule: routingMethod,\n new_lead_source_id: sourceId,\n create_phone_number_leads: shouldCreateLeads,\n voicemail_greeting: voicemailGreetingFilename,\n },\n tracking_number_routings: mapTrackingNumberRoutes(users),\n };\n\n if (routingMethod === \"round_robin\") {\n data.tracking_number.no_answer_setting = noAnswerSetting;\n }\n\n try {\n if (sourceId === \"new\") {\n data.tracking_number.new_lead_source_id = await createNewSource(name);\n }\n\n await axios.put(`/phone_system/tracking_numbers/${trackingNumberId}`, data, getPostJsonHeaders());\n\n return {};\n } catch (e) {\n return createError(e);\n }\n};\n\nexport const deleteTrackingNumber = async (trackingNumberId) => {\n if (!trackingNumberId) {\n return { error: \"No ID!\" };\n }\n\n try {\n await axios.delete(`/phone_system/tracking_numbers/${trackingNumberId}`, getPostJsonHeaders());\n\n return {};\n } catch (e) {\n return createError(e);\n }\n};\n\nexport const updateVoicemailGreeting = async (trackingNumberId, file, filename) => {\n try {\n const headers = {\n headers: {\n \"X-CSRF-Token\": ReactOnRails.authenticityToken(),\n \"Content-Type\": \"multipart/form-data\",\n },\n };\n\n const blob = await fetch(file).then((r) => r.blob());\n const formData = new FormData();\n formData.append(\"file\", blob);\n\n await axios.put(\n `/phone_system/tracking_numbers/${trackingNumberId}/voicemail_greeting?filename=${encodeURIComponent(filename)}`,\n formData,\n headers,\n );\n\n return {};\n } catch (e) {\n return createError(e);\n }\n};\n","import { getPostJsonHeaders } from \"@shared/axiosHelpers\";\n\nimport axios from \"axios\";\n\nexport const checkForRoutingNumber = async (agentId) => {\n try {\n await axios.get(`/users/${agentId}/check_for_routing_number`, getPostJsonHeaders());\n\n return {};\n } catch (e) {\n return createError(e);\n }\n};\n\nexport const saveManagedNumber = async (agentId, number) => {\n try {\n await axios.post(`/users/${agentId}/save_managed_number`, { number }, getPostJsonHeaders());\n\n return {};\n } catch (e) {\n return createError(e);\n }\n};\n\nconst createError = (e) => {\n const error = e.response ? e.response.data.error : \"Something went wrong!\";\n\n return { error };\n};\n","import React from \"react\";\n\nexport const CountryCodes = [\n { label: \"United States (+1)\", value: \"US\" },\n { label: \"Canada (+1)\", value: \"CA\" },\n];\n\nexport const LeadAssignInfo = {\n first_to_claim: {\n description: (\n \n When a caller dials this number, all users below will be called at the same time. The first user to\n answer will be connected to the caller. First to Claim supports up to 10 users.\n \n ),\n pretty: \"First To Claim\",\n },\n round_robin: {\n description: (\n When a caller dials this number, they will be routed to the following agents in order.\n ),\n pretty: \"Round Robin\",\n },\n};\n\nexport const CallRecordingInfo = {\n inboundRecording: {\n disabled: {\n pretty: \"Disable Recording\",\n },\n automatic: {\n pretty: \"Record Automatically\",\n },\n },\n inboundNotificationMessageCondition: {\n always: {\n pretty: \"Always Play\",\n },\n check: {\n pretty: \"Check Location\",\n },\n },\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst Divider = ({ verticalMargin }) => (\n \n \n \n\n
\n \n Business Dashboard}\n name=\"year\"\n value={year}\n onChange={setYear}\n />\n window.location.assign(`/settings/goals?year=${year}`)}\n >\n Settings\n \n
\n \n
\n \n
\n \n
\n \n \n
\n);\n\nDivider.propTypes = {\n verticalMargin: PropTypes.string.isRequired,\n};\n\nexport default Divider;\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Button from \"@shared/v2/Button\";\nimport Dropdown from \"@shared/v2/Dropdown\";\nimport RadioButton from \"@shared/v2/RadioButton\";\nimport Modal from \"@shared/v2/Modal\";\n\nimport { getAvailableNumbers } from \"../../PhoneSystem/TrackingNumbers/Settings/services\";\nimport { saveManagedNumber } from \"./services\";\nimport Error from \"../../Reports/components/DashboardShared/Error\";\nimport { CountryCodes } from \"../../PhoneSystem/TrackingNumbers/Settings/shared\";\nimport Divider from \"./Divider\";\n\nconst AddBrivityPhone = ({ agent, onClose, onNumberSaved }) => {\n const [countryCode, setCountryCode] = useState(CountryCodes[0]);\n const [areaCode, setAreaCode] = useState(\"\");\n const [numberOptions, setNumberOptions] = useState([]);\n const [chosenNumber, setChosenNumber] = useState({});\n const [error, setError] = useState(\"\");\n const [isFetching, setIsFetching] = useState(false);\n\n useEffect(() => {\n if (!agent) {\n setCountryCode(CountryCodes[0]);\n setAreaCode(\"\");\n setNumberOptions([]);\n setChosenNumber({});\n setError(\"\");\n setIsFetching(false);\n }\n }, [agent]);\n\n const onAreaCodeChange = (e) => setAreaCode(e.target?.value);\n\n const getNumberOptions = async () => {\n setIsFetching(true);\n const { numbers, error: fetchError } = await getAvailableNumbers(agent.id, countryCode.value, areaCode);\n\n if (fetchError) {\n setError(fetchError);\n } else {\n setNumberOptions(numbers || []);\n }\n\n setIsFetching(false);\n };\n\n const saveNumber = async () => {\n setIsFetching(true);\n const { error: saveError } = await saveManagedNumber(agent.id, chosenNumber.value);\n\n if (saveError) {\n setIsFetching(false);\n setError(saveError);\n } else {\n onNumberSaved();\n }\n };\n\n return (\n \n Add a Brivity Number to call and text from Brivity. \n \n Note: numbers cannot be deleted or reassigned to other team members, so choose wisely!\n \n
\n \n
\n \n Country Code\n
\n \n Area Code\n
\n \n \n Search\n \n
\n {numberOptions.length > 0 && (\n \n
\n )}\n \n Choose a Brivity number:\n
\n \n {numberOptions.map((number, i) => (\n
\n \n setChosenNumber(number)}\n />\n {number.label}\n
\n ))}\n \n \n \n Save\n \n
\n \n
\n );\n};\n\nNameWithAvatar.propTypes = {\n name: PropTypes.string.isRequired,\n role: PropTypes.string.isRequired,\n avatarUrl: PropTypes.string.isRequired,\n showPath: PropTypes.string.isRequired,\n};\n\nexport default NameWithAvatar;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport Dropdown from \"../../shared/v2/Dropdown/Dropdown\";\n\nconst formatOptionLabel = ({ label, link, isCurrentNumber }) =>\n isCurrentNumber ? (\n label\n ) : (\n \n {label}\n \n );\n\nconst RoutingNumbersDropdown = ({ selectedNumberId, numbers, changeRoutingNumber }) => {\n const phoneOptions = numbers.map((n) => ({\n value: n.detailId,\n label: `${n.routingNumber} (${n.category})`,\n link: n.updateRoutingPath,\n isCurrentNumber: selectedNumberId === n.detailId,\n }));\n\n const phone = phoneOptions.find((s) => s.value === selectedNumberId);\n\n return (\n \n \n {name}\n \n {role}\n
\n \n {loading &&
\n);\n\nCallRecordingDropdown.propTypes = {\n loading: PropTypes.bool,\n};\n\nCallRecordingDropdown.defaultProps = {\n loading: false,\n};\n\nexport default CallRecordingDropdown;\n","import { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport { caseTransformingAxios } from \"@shared/v2/caseTransformingAxios\";\nimport { useSelector } from \"react-redux\";\n\nexport const initialState = {\n agentsWithPhoneUsage: [],\n trackingNumbers: [],\n};\n\nconst updateUserRecordingSettings = createAsyncThunk(\n \"phoneSettings/updateUserRecordingSettings\",\n ({ userUuid, settings: callRecordingUserSettings }, thunkApi) =>\n caseTransformingAxios\n .post(\n `/api/v4/call_recording/user_settings/${userUuid}/upsert`,\n {\n callRecordingUserSettings,\n },\n { signal: thunkApi.signal },\n )\n .then(({ data }) => data),\n);\n\nexport const phoneSettingsSlice = createSlice({\n name: \"phoneSettings\",\n initialState,\n reducers: {},\n extraReducers: (builder) => {\n builder.addCase(updateUserRecordingSettings.pending, (state, action) => {\n const agent = state.agentsWithPhoneUsage.find((agent) => agent.uuid === action.meta.arg.userUuid);\n if (agent) agent.loading = true;\n });\n builder.addCase(updateUserRecordingSettings.fulfilled, (state, action) => {\n const agent = state.agentsWithPhoneUsage.find((agent) => agent.uuid === action.meta.arg.userUuid);\n if (agent) {\n agent.loading = false;\n agent.callRecordingSettings = action.payload;\n }\n });\n builder.addCase(updateUserRecordingSettings.rejected, (state, action) => {\n const agent = state.agentsWithPhoneUsage.find((agent) => agent.uuid === action.meta.arg.userUuid);\n if (agent) agent.loading = false;\n });\n },\n});\n\nexport { updateUserRecordingSettings };\n\nexport default phoneSettingsSlice.reducer;\n\nexport const useAgentsWithPhoneUsage = () => useSelector((state) => state.phoneSettings.agentsWithPhoneUsage);\n","/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useDispatch } from \"react-redux\";\nimport TextButton from \"@shared/v2/TextButton\";\n\nimport NameWithAvatar from \"./NameWithAvatar\";\nimport RoutingNumbersDropdown from \"./RoutingNumbersDropdown\";\nimport { INBOUND_RECORDING_OPTIONS, OUTBOUND_RECORDING_OPTIONS } from \"./helpers/recordingOptions\";\nimport CallRecordingDropdown from \"./CallRecordingDropdown\";\nimport { updateUserRecordingSettings } from \"../../reducers/layoutReducer/phoneSettingsReducer\";\nimport {\n useAccountCallRecordingSettings,\n useCurrentUser,\n useFeatureFlags,\n} from \"../../reducers/layoutReducer/selectors\";\n\nconst AgentRow = ({ addBrivityNumber, agent }) => {\n const dispatch = useDispatch();\n const currentUser = useCurrentUser();\n const featureFlags = useFeatureFlags();\n const accountCallRecordingSettings = useAccountCallRecordingSettings();\n const inboundByNumberDisabled = accountCallRecordingSettings?.inboundRecording !== \"by_number\";\n const outboundByNumberDisabled = accountCallRecordingSettings?.outboundRecording !== \"by_number\";\n const inboundDisabled = inboundByNumberDisabled\n ? accountCallRecordingSettings?.inboundRecording === \"disabled\"\n : agent.callRecordingSettings?.inboundRecording === \"disabled\" ||\n !agent.callRecordingSettings?.inboundRecording;\n const outboundDisabled = outboundByNumberDisabled\n ? accountCallRecordingSettings?.outboundRecording === \"disabled\"\n : agent.callRecordingSettings?.outboundRecording === \"disabled\" ||\n !agent.callRecordingSettings?.outboundRecording;\n const managedNumber = agent.managedNumber ?? (\n \n Notification Message:{\" \"}\n {accountCallRecordingSettings?.inboundNotificationMessageCondition === \"always\"\n ? \"Always Play\"\n : \"Check Location\"}\n
\n )}\n \n Notification Message:{\" \"}\n {accountCallRecordingSettings?.outboundNotificationMessageCondition === \"always\"\n ? \"Always Play\"\n : \"Check Location\"}\n
\n )}\n \n \n
\n );\n};\n\nexport default PlayMessage;\n","import React, { useEffect, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst ShadowScroll = ({ children, className, fromColor = \"tw-from-[rgba(0,0,0,0.1)]\" }) => {\n const contentRef = useRef(null);\n useEffect(() => {\n const onScroll = () => {\n const contentDiv = contentRef.current;\n const wrapperDiv = contentDiv.parentElement;\n const shadowTopDiv = wrapperDiv.querySelector(\".tw-top-0\");\n const shadowBottomDiv = wrapperDiv.querySelector(\".tw-bottom-0\");\n const contentScrollHeight = contentDiv.scrollHeight - wrapperDiv.offsetHeight;\n const currentScroll = contentDiv.scrollTop / contentScrollHeight;\n shadowTopDiv.style.opacity = currentScroll;\n shadowBottomDiv.style.opacity = 1 - currentScroll;\n };\n contentRef.current.addEventListener(\"scroll\", onScroll);\n return () => contentRef.current.removeEventListener(\"scroll\", onScroll);\n }, []);\n\n return (\n \n
\n );\n};\n\nShadowScroll.propTypes = {\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n fromColor: PropTypes.string,\n};\n\nShadowScroll.defaultProps = {\n className: \"\",\n fromColor: \"tw-from-[rgba(0,0,0,0.1)]\",\n};\n\nexport default ShadowScroll;\n","import React, { useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Transition } from \"react-transition-group\";\nimport Alert from \"@shared/v2/Alert\";\nimport Button from \"@shared/v2/Button\";\nimport Checkbox from \"@shared/v2/Checkbox\";\nimport ShadowScroll from \"@shared/v2/ShadowScroll\";\n\nconst transitionStyles = {\n entering: \"tw-opactiy-0 tw-max-h-0\",\n entered: \"tw-opacity-1 tw-max-h-[500px] tw-overflow-visible\",\n exiting: \"tw-opacity-0 tw-max-h-0\",\n exited: \"tw-opacity-0 tw-max-h-0 tw-mt-[-8px] tw-overflow-hidden\",\n};\nconst NoticeTwoPartyConsent = ({ showTwoPartyNotice, agreeTwoParty, setAgreeTwoParty }) => {\n const twoPartyRef = useRef(null);\n\n return (\n \n {children}\n
\n \n Certain countries, states, and jurisdictions require the consent of all parties to record\n telephone conversations. By disabling the notification feature and subsequently recording\n telephone conversations without providing proper notice and consent, you may be in\n violation of federal and/or state law.\n
\n \n By selecting the "I agree" checkbox, the Brivity account owner agrees without\n reservation or limitation, to defend, indemnify, and hold harmless Brivity Inc, its parent\n companies, affiliates, and their respective directors, officers, employees, and agents\n from and against any and all losses, damages, claims, liabilities, penalties, fines,\n judgments, settlements, actions, suits, proceedings, litigation, investigations, legal\n costs and expenses, and demands made by any party due to or arising out of the use of the\n Brivity Dialer call recording feature by the Brivity account owner and/or his/her/its\n employees, agents, affiliates, or representatives.\n
\n \n \n setAgreeTwoParty(e.target.checked)}\n />\n \n window.open(\"https://our.place.com/spaces/64/call-recording/call-recording\", \"_blank\")\n }\n >\n Learn More\n \n
\n \n }\n >\n Two party consent\n \n \n )}\n \n
\n )}\n \n }\n />\n \n
\n \n
\n \n Your business is located in a state that requires 2-party consent to record\n
\n \n Your settings are restricted to protect you from legal risk when recording phone\n calls.\n
\n \n
\n\n \n o.value === formData.inboundRecording)}\n name=\"inboundRecording\"\n menuShouldComeToFront\n onChange={setFormValue}\n />\n
\n Inbound Calls
\n\n o.value === formData.outboundRecording)}\n name=\"outboundRecording\"\n menuShouldComeToFront\n onChange={setFormValue}\n />\n
\n Outbound Calls
\n\n {formData.inboundRecording !== \"disabled\" ? (\n o.value === formData.inboundNotificationMessageCondition,\n )}\n name=\"inboundNotificationMessageCondition\"\n menuShouldComeToFront\n onChange={setFormValue}\n toolTipPlacement=\"top\"\n toolTipInfoContent={\n o.value === formData.outboundNotificationMessageCondition,\n )}\n name=\"outboundNotificationMessageCondition\"\n menuShouldComeToFront\n onChange={setFormValue}\n toolTipPlacement=\"top\"\n toolTipInfoContent={\n
\n \n Audio notification message must always play for businesses operating in states that\n require 2-party consent to record phone calls.\n
\n }\n />\n ) : (\n \n )}\n {formData.outboundRecording !== \"disabled\" ? (\n \n Audio notification message must always play for businesses operating in states that\n require 2-party consent to record phone calls.\n
\n }\n />\n ) : (\n \n )}\n \n {formData.inboundRecording !== \"disabled\" ?
\n\n \n \n Phone Settings\n Brivity Support to\n learn more.\n \n \n \n \n\n setIsCallRecordingModalOpen(false)}\n />\n
\n );\n};\n\nexport default PhoneSettings;\n","import React, { useMemo } from \"react\";\nimport { Provider } from \"react-redux\";\nimport PhoneSettings from \"./PhoneSettings\";\n\nconst PhoneSettingsApp = () => {\n const store = useMemo(() => ReactOnRails.getStore(\"layoutStore\"), []);\n\n return (\n \n setError(\"\")} />\n
\n \n If you need help, visit \n Brivity Numbers \n {featureFlags.callRecording && currentUser.account.isAdmin && (\n \n )}\n
\n \n \n \n
\n
\n | \n Agent Name\n | \n\n \n \n Routing Number\n \n | \n \n Brivity Number\n | \n {featureFlags.callRecording && (\n <>\n\n \n Inbound Call Recording\n {accountCallRecordingSettings.inboundRecording !== \"by_number\" && (\n | \n \n \n Outbound Call Recording\n {accountCallRecordingSettings.outboundRecording !== \"by_number\" && (\n | \n \n )}\n
|---|
\n setHasAgreedToTerms(e.target.checked)}\n label=\"I understand that by deleting this goal, I will be deleting all data corresponding to this goal and that this action cannot be undone. Brivity is not liable for lost data, nor are we able to retrieve it.\"\n />\n
\n \n );\n};\n\nDeleteGoalTypeModal.propTypes = {\n displayName: PropTypes.string.isRequired,\n onClose: PropTypes.func.isRequired,\n onDelete: PropTypes.func.isRequired,\n show: PropTypes.bool.isRequired,\n};\n\nexport default DeleteGoalTypeModal;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport format from \"@shared/formatters\";\nimport NumberField from \"./NumberField\";\nimport DashTooltip from \"../../Reports/components/DashboardShared/DashTooltip\";\nimport TextInput from \"../../shared/v2/TextInput/TextInput\";\nimport ButtonToggle from \"../../shared/v2/ButtonToggle/ButtonToggle\";\nimport IconButton from \"../../shared/v2/IconButton\";\nimport { Trash } from \"../../shared/v2/Icomoon\";\nimport DeleteGoalTypeModal from \"./DeleteGoalTypeModal\";\n\nconst getTooltipText = ({ name }) => {\n if (name === \"per_agent_productivity\") return \"Per Agent Productivity\";\n if (name === \"contacts\") return 'Calls made with an outcome of \"Talked\"';\n if (name === \"signings\")\n return 'Signing appointments completed with an outcome of \"Signed - Buyer Agreement\", \"Signed - Listing Agreement\", or \"Signed - Both Buyer/Listing\"';\n return \"\";\n};\n\nconst Goal = ({ editedGoal, goal, goalType, isDefault, isEditing, onChange, onDelete }) => {\n const [showDeleteModal, setShowDeleteModal] = useState(false);\n const isCustomGoal = isDefault && goalType.accountId !== null;\n return (\n \n Are you sure you want to delete {displayName}? This action\n cannot be undone.\n
\n\n Corresponding goal and tracking data for all users in your account will also be deleted. You will no\n longer be able to view past data on this goal.\n
\n\n {isEditing && isCustomGoal ? (\n \n {goalType.displayName} setShowDeleteModal(false)}\n onDelete={() => onDelete(goalType)}\n show={showDeleteModal}\n />\n
\n );\n};\n\nGoal.propTypes = {\n editedGoal: PropTypes.shape(),\n isDefault: PropTypes.bool,\n isEditing: PropTypes.bool.isRequired,\n onChange: PropTypes.func.isRequired,\n onDelete: PropTypes.func,\n goal: PropTypes.shape({\n goalValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }),\n goalType: PropTypes.shape({\n accountId: PropTypes.number,\n format: PropTypes.string,\n precision: PropTypes.number,\n name: PropTypes.string,\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n displayName: PropTypes.string,\n }).isRequired,\n};\n\nGoal.defaultProps = {\n editedGoal: undefined,\n goal: undefined,\n isDefault: false,\n onDelete: () => {},\n};\n\nexport default Goal;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport HeadingSelect from \"./HeadingSelect\";\nimport Button from \"../../shared/v2/Button\";\nimport Tab from \"../../shared/v2/Tab\";\nimport TabBar from \"../../shared/v2/TabBar\";\n\nconst SectionHeader = ({\n agent,\n description,\n isEditing,\n name,\n onSubmit,\n onTabClick,\n options,\n period,\n selectedTab,\n setIsEditing,\n setPeriod,\n tabs,\n title,\n}) => (\n \n onChange(\"displayName\")(e.target.value)}\n />\n
\n ) : (\n \n onChange(\"format\")(e.target.value)}\n />\n setShowDeleteModal(true)}>\n \n \n )}\n
\n ) : (\n \n {format[goalType.format](\n goal?.goalValue || 0,\n (goal?.goalValue || 0) % 1 > 0 ? goalType.precision : 0,\n )}\n
\n )}\n\n\n \n {tabs.map((tab) => {\n const selected = selectedTab === tab;\n return (\n onTabClick(tab)}\n />\n );\n })}\n \n )}\n\n
\n);\n\nSectionHeader.propTypes = {\n agent: PropTypes.shape({ label: PropTypes.string, value: PropTypes.string }),\n description: PropTypes.string.isRequired,\n isEditing: PropTypes.bool.isRequired,\n name: PropTypes.string.isRequired,\n onSubmit: PropTypes.func.isRequired,\n onTabClick: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.string).isRequired,\n period: PropTypes.string.isRequired,\n setIsEditing: PropTypes.func.isRequired,\n setPeriod: PropTypes.func.isRequired,\n tabs: PropTypes.arrayOf(PropTypes.string),\n selectedTab: PropTypes.string,\n title: PropTypes.string.isRequired,\n};\n\nSectionHeader.defaultProps = {\n agent: null,\n onTabClick: () => {},\n tabs: null,\n selectedTab: \"\",\n};\n\nexport default SectionHeader;\n","import React, { useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { replace } from \"lodash\";\nimport Section from \"./Section\";\nimport { PERIOD_OPTIONS } from \"./HeadingSelect\";\nimport Goal from \"./Goal\";\nimport Loader from \"./Loader\";\nimport useGoals, { goalValueToYearly } from \"../services/useGoals\";\nimport SectionHeader from \"./SectionHeader\";\n\nconst TeamBusinessGoals = ({ year, isAdmin }) => {\n const businessFormRef = useRef(null);\n const businessAgentFormRef = useRef(null);\n const [period, setPeriod] = useState(PERIOD_OPTIONS[0]);\n const [isEditing, setIsEditing] = useState(false);\n const businessGoals = useGoals({\n year,\n period,\n section: \"business\",\n load: isAdmin,\n });\n const businessAgentGoals = useGoals({\n year,\n period,\n section: \"business_agent\",\n load: isAdmin,\n });\n\n const submitGoals = (ref, section) => (e) => {\n e.preventDefault();\n const data = Object.fromEntries(new FormData(ref.current));\n\n Object.keys(data).forEach((key) => {\n const oldGoal = section.goals[key] || { goalTypeId: key };\n const goalType = businessAgentGoals.goalTypes.find((x) => x.id === oldGoal.goalTypeId)?.name || \"\";\n const goal = {\n ...oldGoal,\n goalValue: goalValueToYearly(replace(data[key], /,/g, \"\") || 0, period, goalType),\n year,\n };\n\n if (goal.goalValue === String(oldGoal.goalValue)) return;\n\n if (goal.id) {\n section.actions.updateGoal(goal);\n } else {\n section.actions.createGoal(goal);\n }\n });\n\n setIsEditing(false);\n };\n\n if (!isAdmin) return null;\n\n return (\n \n
\n\n {agent?.value && (\n \n \n \n
\n )}\n \n {agent.label}'s Goals\n
\n )}\n\n {tabs && (\n {description}
\n \n
\n \n \n \n
\n\n {(businessGoals.loading || businessAgentGoals.loading) && \n \n
\n \n \n
\n \n
\n )}\n\n \n \n Use team default\n \n 0}\n disabled={defaultSelection === 2}\n onChange={() => {\n const dataset = defaultSelection > 0 ? goals : defaults;\n setData(\n Object.keys(dataset).reduce((obj, key) => {\n const goal = dataset[key];\n return {\n ...obj,\n [goal.goalTypeId]: { ...obj[goal.goalTypeId], goalValue: goal.goalValue },\n };\n }, {}),\n );\n }}\n />\n
\n \n \n\n {!isTeamDefaultTab && action && setIsCreateModalOpen(true)}\n >\n setIsCreateModalOpen(false)}\n onSubmit={(formData) =>\n actions\n .createGoalType({ goalType: formData.goalType })\n .then(({ id }) =>\n actions.createGoal({\n ...formData.goal,\n goal_value: goalValueToYearly(\n formData.goal.goal_value,\n period,\n formData.goal.goalType.name,\n ),\n goalTypeId: id,\n year,\n }),\n )\n .then(() => setIsCreateModalOpen(false))\n }\n />\n \n )}\n\n {loading &&
\n {action}
}\n\n {isTeamDefaultTab && customGoals && (\n <>\n \n
\n \n
\n \n
\n {children}\n \n
\n \n \n
\n\n {teamActivityGoals.loading && \n
\n \n
\n \n \n Seller to Total Closings Ratio{\" \"}\n
\n \n \n \n \n
\n);\n\nCancelConfirm.propTypes = {\n onCancelEditing: PropTypes.func.isRequired,\n onConfirmEditing: PropTypes.func.isRequired,\n};\n\nexport default CancelConfirm;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useGivenOrGeneratedId } from \"../../hookHelpers\";\nimport { Edit } from \"../Icomoon\";\n\nconst Label = ({ label, timeOnNewLine }) => {\n const showOnNewLine = timeOnNewLine && label?.includes(\" \");\n if (showOnNewLine) {\n const iSpace = label.indexOf(\" \");\n const date = label.substring(0, iSpace);\n const time = label.substring(iSpace);\n return (\n \n {date}\n {time}\n
\n );\n }\n return <>{label};\n};\n\nLabel.propTypes = {\n label: PropTypes.string.isRequired,\n timeOnNewLine: PropTypes.bool,\n};\n\nLabel.defaultProps = {\n timeOnNewLine: false,\n};\n\nconst Display = ({\n id: idFromProps,\n label,\n value,\n disabled,\n icon,\n iconAlwaysVisible,\n onInteract,\n className,\n showLineBreak,\n timeOnNewLine,\n showRightAlign,\n displaySpanClassName,\n ...otherProps\n}) => {\n const id = useGivenOrGeneratedId(\"inline-editor-display\", idFromProps);\n\n const callOnInteractWhenNotDisabled = () => {\n if (disabled) {\n return;\n }\n onInteract();\n };\n\n const handleKeyDown = (e) => {\n switch (e.key) {\n case \"Enter\":\n callOnInteractWhenNotDisabled();\n break;\n default:\n break;\n }\n };\n\n const iconClasses = `group-hover:peer-enabled:tw-cursor-pointer group-hover:peer-disabled:tw-cursor-default peer-disabled:tw-text-neutral-gray-30${\n iconAlwaysVisible ? \"\" : \" tw-invisible group-hover:tw-visible\"\n }`;\n\n return (\n <>\n {display}
;\n }\n\n if (!onClickedOutside) {\n return {editor}
;\n }\n\n const ref = useRef();\n\n useClickOutside(ref, () => {\n onClickedOutside();\n });\n\n return (\n \n {editor}\n
\n );\n};\n\nDisplayEditorToggleBase.propTypes = {\n mode: PropTypes.oneOf([\"display\", \"editor\"]).isRequired,\n display: PropTypes.node.isRequired,\n editor: PropTypes.node.isRequired,\n onClickedOutside: PropTypes.func,\n className: PropTypes.string,\n};\n\nDisplayEditorToggleBase.defaultProps = {\n onClickedOutside: null,\n className: \"\",\n};\n\nexport default DisplayEditorToggleBase;\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport nullable from \"prop-types-nullable\";\n\nimport { range } from \"../../Utilities\";\nimport { useGivenOrGeneratedId } from \"../../hookHelpers\";\nimport { CancelConfirm, Display, DisplayEditorToggleBase } from \"../InlineEditor\";\nimport TextComboInput from \"../TextComboInput\";\nimport TextButton from \"../TextButton\";\nimport { resizeInputBasedOnValue } from \"../utils\";\n\nconst InlineEditingInput = ({\n id: idFromProps,\n value: valueFromProps,\n prefix,\n suffix,\n disabled,\n error,\n placeholder,\n externalEditing,\n onInteract,\n onChange,\n onCancelEditing,\n onConfirmEditing,\n leading,\n additionalTrailing,\n withCancelConfirm,\n inputRef,\n spacing,\n className,\n displayClassName,\n displaySpanClassName,\n editorClassName,\n displayComponent,\n size,\n validateInput,\n formatInput,\n ...otherProps\n}) => {\n const id = useGivenOrGeneratedId(\"inline-editing-input\", idFromProps);\n\n const value = useMemo(\n () => (typeof valueFromProps === \"number\" ? valueFromProps.toString() : valueFromProps) || \"\",\n [valueFromProps],\n );\n\n const ignoreExternalEdition = [null, undefined].includes(externalEditing);\n const [editing, setEditing] = useState(externalEditing ?? false);\n const [editingValue, setEditingValue] = useState(value);\n const textComboInputRef = inputRef || useRef();\n\n // We need to keep track of when the user clicked outside, to prevent calling `confirmEditing` twice\n const [clickedOutside, setClickedOutside] = useState(false);\n\n // Update the editing flag when `externalEditing` changes\n useEffect(() => setEditing(externalEditing ?? false), [externalEditing]);\n\n // Update the editing value when `value` changes\n useEffect(() => setEditingValue(value), [value]);\n\n const handleInteract = () => {\n if (onInteract) {\n onInteract();\n }\n if (ignoreExternalEdition) {\n setEditing(true);\n }\n };\n\n const cancelEditing = () => {\n if (ignoreExternalEdition) {\n setEditing(false);\n }\n setEditingValue(value); // Revert changes made on editing mode\n if (onCancelEditing) {\n onCancelEditing();\n }\n };\n\n const confirmEditing = () => {\n if (onChange) {\n onChange(formatInput ? formatInput(editingValue) : editingValue);\n }\n if (ignoreExternalEdition) {\n setEditing(false);\n }\n if (onConfirmEditing) {\n onConfirmEditing();\n }\n };\n\n const focusInput = () => {\n if (!textComboInputRef.current) {\n return;\n }\n const input = textComboInputRef.current;\n input.select();\n input.focus();\n };\n\n // Auto-focus when switching to editing mode\n useEffect(() => {\n if (!editing) {\n return;\n }\n focusInput();\n }, [editing]);\n\n // Update input styles when switching to editing mode and/or\n // after the user changes the editing value\n useEffect(() => {\n if (!editing) {\n return;\n }\n resizeInputBasedOnValue(textComboInputRef.current, editingValue || placeholder);\n }, [editing, editingValue, placeholder]);\n\n const handleKeyDown = (e) => {\n // In case the input is inside of a modal, this prevents closing the modal before closing the input\n e.stopPropagation();\n\n switch (e.key) {\n case \"Esc\":\n case \"Escape\":\n cancelEditing();\n break;\n case \"Enter\":\n confirmEditing();\n break;\n default:\n break;\n }\n };\n\n const handleFocusOut = () => {\n if (clickedOutside) {\n // Do not call `confirmEditing` a second time if it was already called from `handleClickOutside`\n setClickedOutside(false);\n return;\n }\n\n confirmEditing();\n };\n\n const handleClickOutside = () => {\n setClickedOutside(true);\n\n confirmEditing();\n };\n\n const trailing = () => {\n if (!withCancelConfirm) {\n return additionalTrailing || null;\n }\n\n const cancelConfirm = \n {additionalTrailing}\n {cancelConfirm}\n
\n ) : (\n cancelConfirm\n );\n };\n\n const displayWhenNoValueIsProvided = displayComponent ? (\n displayComponent(handleInteract)\n ) : (\n \n \n \n
\n );\n};\n\nToggle.propTypes = {\n selected: PropTypes.oneOf([\"flat\", \"percent\"]).isRequired,\n onFlatSelected: PropTypes.func.isRequired,\n onPercentSelected: PropTypes.func.isRequired,\n};\n\nexport default Toggle;\n","import format from \"../formatters\";\n\nexport const removeCommas = (value) => value.replace(/,/g, \"\");\n\nexport const formatNumber = (value, commas) => {\n if (Number.isNaN(value) || value === \"NaN\") {\n return \"NaN\";\n }\n\n if (value !== 0 && !value) {\n return \"\";\n }\n\n const formattedNumber = format.number(removeCommas(value), 2);\n return commas ? formattedNumber : removeCommas(formattedNumber);\n};\n\nexport const extractNumeric = (value) => value.replace(/[^0-9,.]/g, \"\");\n\n/**\n * - `000` => `0`\n * - `005` => `5`\n * - `00.5` => `0.5`\n */\nexport const removeLeadingZeroes = (value) => value.replace(/^(0(?!([,.]|$)))+/g, \"\");\n\nexport const isValidValue = (value) => formatNumber(value, false) !== \"NaN\";\n\nexport const isValidPercentage = (value) => Number.parseFloat(value) <= 100;\n\nexport const areValuesDifferent = (valueA, valueB) =>\n formatNumber(valueA, false) !== formatNumber(valueB, false);\n","import React, { useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport nullable from \"prop-types-nullable\";\nimport InlineEditingInput from \"../InlineEditingInput\";\nimport Toggle from \"./Toggle\";\nimport {\n extractNumeric,\n formatNumber,\n isValidPercentage,\n isValidValue,\n removeLeadingZeroes,\n} from \"../../inputFormatUtils\";\n\nconst FlatPercent = ({\n id,\n value,\n placeholder,\n onChange,\n flatOrPercent,\n onFlatSelected,\n onPercentSelected,\n withCancelConfirm,\n showToggle,\n className,\n ...otherProps\n}) => {\n const inlineEditingInputRef = useRef();\n const [initialFlatOrPercent, setInitialFlatOrPercent] = useState(flatOrPercent);\n\n const focusInput = () => {\n if (!inlineEditingInputRef.current) {\n return;\n }\n const input = inlineEditingInputRef.current;\n input.focus();\n };\n\n const flatSelected = () => {\n if (onFlatSelected) {\n onFlatSelected();\n }\n focusInput();\n };\n\n const percentSelected = () => {\n if (onPercentSelected) {\n onPercentSelected();\n }\n focusInput();\n };\n\n const handleOnCancelEditing = () => {\n // Revert flatOrPercent if it has changed\n if (flatOrPercent === initialFlatOrPercent) {\n return;\n }\n switch (flatOrPercent) {\n case \"flat\":\n if (onPercentSelected) {\n onPercentSelected();\n }\n break;\n case \"percent\":\n if (onFlatSelected) {\n onFlatSelected();\n }\n break;\n default:\n break;\n }\n };\n\n const handleOnConfirmEditing = () => {\n // Update the initial value to keep the consistency\n setInitialFlatOrPercent(flatOrPercent);\n };\n\n const isFlat = flatOrPercent === \"flat\";\n const isPercent = flatOrPercent === \"percent\";\n\n const additionalTrailing = (\n <>\n {isPercent ? % : }\n {showToggle && (\n \n \n {label}\n \n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n
\n);\n\nLabeledFlat.propTypes = {\n label: PropTypes.node.isRequired,\n type: PropTypes.oneOf([\"flat\", \"percent\"]),\n};\n\nLabeledFlat.defaultProps = {\n type: \"percent\",\n};\n\nconst RecommendedGoals = ({ onClose, show, year, wizardData }) => {\n const { isPlace } = useCurrentUser().account;\n const { actions, errors, goals: initialGoals } = wizardData;\n const [showIncomeGoal, setShowIncomGoal] = useState(true);\n const [showMore, setShowMore] = useState(false);\n const [baseGoals, setBaseGoals] = useState({ ...initialGoals });\n\n useEffect(() => {\n if (show) setBaseGoals({ ...initialGoals });\n }, [show, initialGoals]);\n\n const onChange = (name) => (value) => {\n const cleanValue = typeof value === \"string\" ? value.replace(/[^0-9.]/g, \"\") : value;\n if (cleanValue > 0) {\n setBaseGoals((prev) => ({\n ...prev,\n [name]: cleanValue,\n }));\n }\n };\n\n const resetDisabled = useMemo(\n () => !Object.entries(baseGoals).some(([key, value]) => initialGoals[key] !== value),\n [baseGoals],\n );\n\n const goals = useMemo(() => {\n const {\n avgCommission,\n avgSalePrice,\n brokerageCap,\n brokerageSplitPercentage,\n buyerCommissionSplit,\n currentNetIncomeGoal,\n pendingToCloseRatio,\n royaltyCap,\n royaltyPercentage,\n sellerCommissionSplit,\n sellerToTotalClosingsRatio,\n } = baseGoals;\n const brokerageSplitPercent = brokerageSplitPercentage / 100;\n const royaltySplitPercent = royaltyPercentage / 100;\n let maxBrokerageCap = currentNetIncomeGoal * brokerageSplitPercent;\n let maxRoyaltyCap = currentNetIncomeGoal * royaltySplitPercent;\n if (maxBrokerageCap > brokerageCap) maxBrokerageCap = brokerageCap;\n if (maxRoyaltyCap > royaltyCap) maxRoyaltyCap = royaltyCap;\n const averageSalePrice = String(avgSalePrice).replace(\",\", \"\");\n\n const pendingToCloseRatioPercent = pendingToCloseRatio / 100;\n const sellerToTotalClosingRatioPercent = 1 - sellerToTotalClosingsRatio / 100;\n\n const averageCommission = averageSalePrice * (avgCommission / 100);\n const sellerCommission =\n averageCommission * (sellerCommissionSplit / 100) * sellerToTotalClosingRatioPercent;\n const buyerCommission =\n averageCommission * (buyerCommissionSplit / 100) * (1 - sellerToTotalClosingRatioPercent);\n\n const closedUnits = Math.ceil(\n (Number(currentNetIncomeGoal) + Number(maxBrokerageCap) + Number(maxRoyaltyCap)) /\n (sellerCommission + buyerCommission),\n );\n const pendedUnits = Math.ceil(closedUnits / pendingToCloseRatioPercent);\n const listedUnits = Math.ceil(pendedUnits * (1 - sellerToTotalClosingRatioPercent));\n const closedVolume = closedUnits * averageSalePrice;\n\n return { closedVolume, closedUnits, pendedUnits, listedUnits };\n }, [baseGoals]);\n\n const textClassName = isPlace ? \"!tw-text-black\" : \"!tw-text-gray-99\";\n\n return (\n <>\n \n
\n \n
\n \n Net Income Goal \n
\n \n {showIncomeGoal && (\n \n {format.currency(baseGoals.currentNetIncomeGoal, 0)}\n \n )}{\" \"}\n setShowIncomGoal((o) => !o)}\n onCancelEditing={() => setShowIncomGoal((o) => !o)}\n onConfirmEditing={() => setShowIncomGoal((o) => !o)}\n displayComponent={(handleInteract) => (\n Change \n )}\n onChange={onChange(\"currentNetIncomeGoal\")}\n />\n
\n \n \n List{\" \"}\n \n {goals.listedUnits}\n {\" \"}\n units on market\n \n \n Pend{\" \"}\n \n {goals.pendedUnits}\n {\" \"}\n units under contract\n \n \n Close on at least{\" \"}\n \n {goals.closedUnits}\n {\" \"}\n of those units\n \n \n Close{\" \"}\n \n {format.currency(goals.closedVolume, 0)}\n {\" \"}\n of total volume\n \n
\n \n \n Goals are calculated using team defaults that admin can set to provide a baseline set of values.{\" \"}\n Click the stats below to fine tune and maximize the accuracy of your goals.\n \n
\n \n
\n \n \n Seller to Total Closings Ratio{\" \"}\n setShowMore((more) => !more)}>\n {showMore ? \"Hide\" : \"Additional\"} Values{\" \"}\n \n {showMore && (\n <>\n
\n \n
\n \n setBaseGoals({ ...initialGoals })} disabled={resetDisabled}>\n Reset Values\n \n \n
\n \n
\n \n \n );\n};\n\nReportingGoals.propTypes = {\n agents: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n};\n\nexport default ReportingGoals;\n","import React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Provider } from \"react-redux\";\nimport ReportingGoals from \"./ReportingGoals\";\n\nconst ReportingGoalsApp = ({ agents }) => {\n const store = useMemo(() => ReactOnRails.getStore(\"layoutStore\"), []);\n return (\n \n \n \n\n
\n \n
\n \n
\n {isAdmin && (\n \n Goal Setting}\n value={year}\n onChange={setYear}\n />\n {isAdmin && (\n <>\n setTeamProductionIsOpen(true)}>\n \n setTeamProductionIsOpen(false)}\n />\n \n )}\n setWizardIsOpen(false)}\n />\n
\n \n Set business, production, and activity tracking goals for a period of time. View progress\n towards goals on your dashboards.\n
\n\n setMenuIsOpen(true)}\n onMenuClose={() => setMenuIsOpen(false)}\n components={{ Menu, Option, SingleValue }}\n className=\"tw-min-w-[300px]\"\n label=\"Assign goals for:\"\n value={agent}\n options={dropdownOptions}\n onChange={setAgent}\n />\n
\n )}\n \n \n Set the activity goal standards for {agent.label}{\" \"}\n for manually logged lead generation activities, lead nurturing activities, or custom goals\n that you want your team to track.\n
\n ) : (\n \"Track progress in activities related to lead generation, lead nurturing, or any other custom goals you wish to track.\"\n )\n }\n customGoals\n />\n \n setWizardIsOpen(true)}\n className=\"tw-flex tw-items-center tw-gap-[4px] tw-ml-[-6px] tw-mt-[16px]\"\n >\n
\n \n Set the production standards for {agent.label} on\n goals such as units sold, units listed, units pended, closed volume, and gross commision\n income (GCI).\n
\n ) : (\n \"Set individual production goals for yourself based on units sold, units listed, units pended, closed volume, gross commission income (GCI). \"\n )\n }\n />\n \n \n Set {agent.label}’s goals for activities that are\n tracked within Brivity. Note that these are automatically logged and do not require manual\n entry.\n
\n ) : (\n \"Set goals for activities tracked within Brivity. Note that these are automatically logged and do not require manual entry.\"\n )\n }\n />\n \n
\n );\n};\nAgreementDateSelect.propTypes = {\n previousSelectedExpirationDate: Proptypes.arrayOf(Proptypes.string),\n previousSelectedSignedDate: Proptypes.arrayOf(Proptypes.string),\n signedDateOptions: Proptypes.arrayOf(Proptypes.shape({ label: Proptypes.string, value: Proptypes.string })),\n expirationDateOptions: Proptypes.arrayOf(\n Proptypes.shape({ label: Proptypes.string, value: Proptypes.string }),\n ),\n};\nAgreementDateSelect.defaultProps = {\n previousSelectedExpirationDate: [],\n previousSelectedSignedDate: [],\n signedDateOptions: [],\n expirationDateOptions: [],\n};\nexport default AgreementDateSelect;\n","import { schemaGenerator } from \"../utils\";\n\nconst baseClasses = [\n \"tw-border-neutral-gray-15\",\n \"tw-border-solid\",\n \"tw-border-[1px]\",\n \"tw-rounded-full\",\n \"tw-select-none\",\n \"tw-mb-0\",\n \"tw-whitespace-nowrap\",\n];\n\nconst sizeClasses = {\n small: [\"tw-text-12d\", \"tw-px-12px\", \"tw-py-3px\"],\n medium: [\"tw-text-14d\", \"tw-px-16px\", \"tw-py-8px\"],\n};\n\nconst variantClasses = {\n gray: {\n default: [\n ...baseClasses,\n \"tw-text-neutral-gray-75\",\n \"peer-checked:tw-text-white\",\n \"peer-checked:tw-bg-neutral-gray-75\",\n \"peer-checked:tw-border-neutral-gray-75\",\n \"peer-enabled:tw-cursor-pointer\",\n ],\n hover: [\n \"peer-enabled:hover:tw-text-neutral-gray-75\",\n \"peer-enabled:hover:tw-bg-neutral-gray-10\",\n \"peer-enabled:hover:tw-border-neutral-gray-10\",\n\n \"peer-enabled:peer-checked:hover:tw-text-white\",\n \"peer-enabled:peer-checked:hover:tw-bg-neutral-gray-50\",\n \"peer-enabled:peer-checked:hover:tw-border-neutral-gray-50\",\n ],\n focused: [\"peer-focus-visible:tw-outline-theme\"],\n disabled: [\"peer-disabled:tw-text-neutral-gray-30\"],\n },\n primary: {\n default: [\n ...baseClasses,\n \"tw-text-neutral-gray-75\",\n \"peer-checked:tw-text-white\",\n \"peer-checked:tw-bg-[var(--filter-pill-selected)]\",\n \"peer-checked:tw-border-[var(--filter-pill-selected)]\",\n \"peer-enabled:tw-cursor-pointer\",\n ],\n hover: [\n \"peer-enabled:hover:tw-text-[var(--filter-pill-hover)]\",\n \"peer-enabled:hover:tw-border-[var(--filter-pill-hover)]\",\n\n \"peer-enabled:peer-checked:hover:tw-text-white\",\n \"peer-enabled:peer-checked:hover:tw-bg-[var(--filter-pill-selected-hover)]\",\n \"peer-enabled:peer-checked:hover:tw-border-[var(--filter-pill-selected-hover)]\",\n ],\n focused: [\"peer-focus-visible:tw-outline-theme\"],\n disabled: [\n \"peer-disabled:tw-text-neutral-gray-30\",\n \"peer-disabled:tw-bg-transparent\",\n \"peer-disabled:tw-border-neutral-gray-30\",\n ],\n },\n};\n\nconst sizeDictionary = schemaGenerator(sizeClasses);\nconst variantDictionary = schemaGenerator(variantClasses);\n\nexport { variantDictionary, sizeDictionary };\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useGivenOrGeneratedId } from \"../../hookHelpers\";\n\nimport { variantDictionary, sizeDictionary } from \"./FilterPill.styles\";\n\nconst FilterPill = ({ children, disabled, id: idFromProps, onClick, selected, variant, size, className }) => {\n const sizeClasses = sizeDictionary[size];\n const variantClasses = variantDictionary[variant];\n const id = useGivenOrGeneratedId(\"filter-pill\", idFromProps);\n\n return (\n \n \n setSelectedSignedDate(e)}\n menuPlacement=\"bottom\"\n labelClassName=\"!tw-font-normal\"\n />\n
\n \n setSelectedExpiredDate(e)}\n menuPlacement=\"bottom\"\n labelClassName=\"!tw-font-normal\"\n />\n
\n \n
\n );\n};\n\nAgreementStatusSelect.propTypes = {\n previousSelectedStatus: Proptypes.arrayOf(Proptypes.string),\n};\n\nAgreementStatusSelect.defaultProps = {\n previousSelectedStatus: [],\n};\n\nexport default AgreementStatusSelect;\n","import React, { useState } from \"react\";\nimport Proptypes from \"prop-types\";\nimport FieldLabel from \"@shared/v2/FieldLabel\";\nimport FilterPill from \"@shared/v2/FilterPill\";\nimport { useEventListenerAction } from \"@shared/hooks/useEventListenerAction\";\nimport { CLEAR_MODAL_FILTER_ID } from \"../../shared/constants\";\n\nconst AgreementTypeSelect = ({ previousSelectedAgreementType }) => {\n const [selectedTypes, setSelectedTypes] = useState(previousSelectedAgreementType || []);\n\n useEventListenerAction(CLEAR_MODAL_FILTER_ID, () => setSelectedTypes([]));\n\n const handleOnChange = (type) => {\n setSelectedTypes((prevSelectedType) => {\n if (prevSelectedType.includes(type)) {\n // If type exists, remove it\n return prevSelectedType.filter((item) => item !== type);\n }\n // If type doesn't exist, add it\n return [...prevSelectedType, type];\n });\n };\n\n return (\n \n {selectedStatus.map((status) => (\n handleOnChange(\"active\")}\n selected={selectedStatus.includes(\"active\")}\n >\n Active\n \n handleOnChange(\"completed\")}\n selected={selectedStatus.includes(\"completed\")}\n >\n Completed\n \n handleOnChange(\"expired\")}\n selected={selectedStatus.includes(\"expired\")}\n >\n Expired\n \n handleOnChange(\"canceled\")}\n selected={selectedStatus.includes(\"canceled\")}\n >\n Canceled\n \n handleOnChange(\"none\")}\n selected={selectedStatus.includes(\"none\")}\n >\n None\n \n
\n \n
\n );\n};\n\nAgreementTypeSelect.propTypes = {\n previousSelectedAgreementType: Proptypes.arrayOf(Proptypes.string),\n};\n\nAgreementTypeSelect.defaultProps = {\n previousSelectedAgreementType: [],\n};\n\nexport default AgreementTypeSelect;\n","import React from \"react\";\nimport Proptypes from \"prop-types\";\nimport AgreementDateSelect from \"./AgreementDateSelect\";\nimport AgreementStatusSelect from \"./AgreementStatusSelect\";\nimport AgreementTypeSelect from \"./AgreementTypeSelect\";\n\nconst AgreementFilters = ({\n previousSelectedAgreementType,\n previousSelectedStatus,\n previousSelectedExpirationDate,\n previousSelectedSignedDate,\n expirationDateOptions,\n signedDateOptions,\n}) => (\n <>\n \n {selectedTypes.map((type) => (\n handleOnChange(\"buyer\")}\n selected={selectedTypes.includes(\"buyer\")}\n >\n Buyer\n \n handleOnChange(\"seller\")}\n selected={selectedTypes.includes(\"seller\")}\n >\n Seller\n \n handleOnChange(\"referral\")}\n selected={selectedTypes.includes(\"referral\")}\n >\n Referral\n \n handleOnChange(\"none\")}\n selected={selectedTypes.includes(\"none\")}\n >\n None\n \n
\n \n
\n
\n \n);\n\nAgreementFilters.propTypes = {\n previousSelectedAgreementType: Proptypes.arrayOf(Proptypes.string),\n previousSelectedStatus: Proptypes.arrayOf(Proptypes.string),\n previousSelectedExpirationDate: Proptypes.arrayOf(Proptypes.string),\n previousSelectedSignedDate: Proptypes.arrayOf(Proptypes.string),\n signedDateOptions: Proptypes.arrayOf(Proptypes.shape({ label: Proptypes.string, value: Proptypes.string })),\n expirationDateOptions: Proptypes.arrayOf(\n Proptypes.shape({ label: Proptypes.string, value: Proptypes.string }),\n ),\n};\nAgreementFilters.defaultProps = {\n previousSelectedAgreementType: [],\n previousSelectedStatus: [],\n previousSelectedExpirationDate: [],\n previousSelectedSignedDate: [],\n signedDateOptions: [],\n expirationDateOptions: [],\n};\nexport default AgreementFilters;\n","// extracted by mini-css-extract-plugin\nexport default {\"checkbox\":\"ip7Fr8OaD3Iq4BgEmJxf\",\"checked\":\"Ek7rrxmx6FvLX94uMfFh\",\"inlineEditable\":\"Leur5N0v63gEG3m_S6nW\",\"hidden\":\"RGIpTaDUR3t7n4EZGCSz\",\"tagBubble\":\"mRam4jb0FkyvCEMG0PE4\",\"faLg\":\"xtT_8B2Y07cUgqXMDwVc\",\"blue\":\"r7kY1lCECCKkHtzxqxxF\",\"gray\":\"jajVkyg85cz5y2woLpxE\",\"editAndDelete\":\"N_bGJNtMV2MT7HjlEjvN\",\"downloadAndDelete\":\"_ir2L985hJfk7Hjyg5gI\",\"editAndAdd\":\"nZcjP0tuR9aTO2iyslg0\",\"button\":\"u7gk01b09ISu8BG3tQHp\",\"edit\":\"v3UGrWGELPQ0RqFWuFwv\",\"smIcon\":\"ihgQJ4zKOjcUttWfbcNA\"};","// extracted by mini-css-extract-plugin\nexport default {\"btn\":\"agIQjaafiAYwv0ii4Uv8\",\"btnLg\":\"nuF228eVdqje4eWLDeLl\",\"btnLgSquare\":\"NV3F26xQYC9bTVljO8ak\",\"btnSm\":\"feWqVvPhfSocFL65ypRQ\",\"btnSmNarrow\":\"nQrX6nOBV2DvUHk4UMqJ feWqVvPhfSocFL65ypRQ\",\"btnBlueDisabled\":\"Ja9CBqvP1Hu8ubsVJrPk\",\"btnBlue\":\"T2WooP0bFVpDv1rJosT8\",\"btnGray\":\"BsHZbuQqJxuD3T49jdZ8\",\"btnDarkBlue\":\"amZCPYx0nHLW7jIHMoW4\",\"btnDanger\":\"tIOmR1OEQNkO8e_j3i2z\",\"btnYellow\":\"fCHSmKpkc6wWoqNMAY5y\",\"spaceBetween\":\"NFm0P9eWbuaZ_JC1nIRe\",\"btnRed\":\"eIUPwqESJDNuuGWTrcI0\",\"btnDropdown\":\"WyGgZD_YFxJDyBWGzEcA\",\"open\":\"kZ3ZR36Bcs0pKMkJ55Qw\",\"btn-default\":\"q_a4F2arSI8i3JEO49sX\",\"dropdown-toggle\":\"FiPNoKz7eCOCYoKfxtHy\",\"btn-group-test\":\"ppdvKc_zAETW0iRqPY_0\",\"inactive\":\"TiNgAlrFakeX3AT0Sebf\",\"btnSecondary\":\"fbPdAc6oXdFK6CzbcjY1\"};","// extracted by mini-css-extract-plugin\nexport default {\"searchResults\":\"_enMyoKOw5WrM8fjbAkJ\",\"resultLabel\":\"u1Yr83atTV3ZfotfAKKs\",\"resultChildren\":\"wqkxyVw9nKZEFFoxm_wV\",\"resultItem\":\"StWWdDlbYHep2ey5NflK\",\"highlight\":\"HZGr3JlR4JI9ZKSd9_Ad\",\"removableBubble\":\"a67SlBqe9ikiug_RxFgk\",\"remove\":\"V3cY6CuXME8hZVduNt3k\",\"searchBubbles\":\"Kku_itC77FYfpTBfK4ei\",\"searchByMap\":\"X8jFs54OVch2E3SfyJrS\",\"mapContainer\":\"anx_kLQHY9JD4kn18EeA\",\"alertContainer\":\"qMiWAGC4ixjGPiED6uFq\",\"viewAllAlert\":\"lnjBx4q7sDYvKWcKdDsx\",\"hideHorizontalScroll\":\"CoVWW3j7ffbm03NQsdR2\",\"advancedOptions\":\"NezLbiCQSbMwTkqtC43l\",\"optionType\":\"FaeGLdXZqhhucaPByVyN\",\"moreOrLess\":\"OpvWpPTd_83Y8PJUjlKB\",\"upOrDownIcon\":\"KHafFtzQmklTZelwSK7Q\",\"optionLabel\":\"V3wD8Wwq8bBOZ0fMbS_H\",\"optionContainer\":\"odveMR82Jg6gweS9EFgq\",\"option\":\"dqnUNGFOeCv8MSDF9xx5\",\"viewAllCard\":\"Tf6OvPsCHq9TtE9G8wyb\",\"addNewAlert\":\"SIUY0ug8LgV6SQlAODiU\",\"alert\":\"Mte3WS782XMyaTvjVv34\",\"lgBell\":\"MqmRZEsxx2WCpRbz3hZF\",\"propertyTypeBubble\":\"fa2dnDypHU15Cvr0V6Dj\",\"selected\":\"vgc0OzlnBjeRNrf6IKfk\",\"ccResult\":\"TofPpAfbFrT4bScsQ7KQ\",\"ccEmail\":\"RgtkTDEQgVHsZXhuwYJw\",\"input\":\"HSGCYxUwoAfj2cikJkIB\",\"card\":\"dinvNHpuMo6z0Eh54dK9\",\"content\":\"u8MbPPmWZIxedOh2z8kj\",\"searchName\":\"Psmw5sjO_2AZigcR72tR\",\"overflow\":\"UbeOhbmK2etIx31gAKio\"};","// extracted by mini-css-extract-plugin\nexport default {\"personDetailLeftFlexbox\":\"Ov1_nP0nem4okKn_HHh3\",\"personDetailCenterFlexbox\":\"rcmMqggfgzI3mg19bHr8\",\"personDetailRightFlexbox\":\"V98eG2s8oTJMbyR1fAWQ\",\"brivityBtnGrayOutline\":\"K5o78eF5OkBg5YsJB5KX\",\"active\":\"X2A8V4fcAi16mMKvs_4B\",\"brivitySocialIcon\":\"caglhZoONFTrLFPVeLuI\",\"brivitySocialIconDisabled\":\"ijmauVhcRvDjZZO4Z9sA\",\"brivityPillBlue\":\"tOCcHDfzigfm4gydSUqn\",\"brivityPillRed\":\"_A3S_KzkStxiIZZC9ZCA\",\"brivityPersonInfoCard\":\"tZGjDLkqaUhWtdSqlZPh\",\"brivityPrevNextWrapper\":\"vR3R4W7C6LhboYxnY3lx\",\"brivityPrevNextBtn\":\"t9YnxLQ95F9ObtysrCcR\",\"enabled\":\"aNqVORpq7oBqRMp9bl21\",\"disabled\":\"zCCoitve53T11Ccpj7I5\",\"brivityPersonAvatarWrapper\":\"mhGAYP4Iz4kWG596j6GE\",\"brivityPersonAvatarInitials\":\"ZLpXFpxQKGegrdtMNFlr\",\"brivityPersonDetailsWrapper\":\"HZtM271BNQn5o4Gxa4nL\",\"brivityPersonDetailsName\":\"tWT3drgWynbh2Oz3f_wg\",\"brivityPersonDetailsSource\":\"BXcjt_1CudC6KinLlXBk\",\"brivityPersonDetailsSourceLabel\":\"HilZ3e6OJgWSZFiqlQsC\",\"brivityPersonDetailsRegistered\":\"lYfCLgYKE_Xw6o5S2sg0\",\"brivityPersonDetailsLastInteraction\":\"AytOyGU5BlPBZtcK3rc5\",\"brivityPersonDetailsStatusIntent\":\"Dgyk3nfaN5mnUFHu337k\",\"brivityPersonDetailsStatusIntentLabel\":\"MarvAXkg0ihcGpZZ2v18\",\"brivityPersonDetailsType\":\"pCRSGzfOnds71DHiwL62\",\"brivityPersonDetailsShowInLeads\":\"MzpKC_gl8r4O3ZBesFeS\",\"brivityPersonContactCard\":\"aOq6C3yTc9K6boAtSZvb\",\"brivityPersonContactHeader\":\"AsfzALmhsTM05YhyUYCu\",\"toggleCollapse\":\"WBoWHkXy2xJ3xKfP8gss\",\"collapsedHeader\":\"lSuzjVqYqx_xntMu1HQ0\",\"brivityPersonContactItem\":\"mHAitSb35OCnDnje3bwp\",\"brivityPersonContactLabel\":\"apPrz7ikjoYFu15OBy39\",\"brivityPersonContactContents\":\"_Iv8GeBtm4mnjy0PdqFp\",\"brivityPersonContactSocial\":\"L7PK2MdyRkzSOGdgbpJB\",\"brivityPersonContactIcon\":\"aPYFX75rnxxCFVXP0gId\",\"brivityPersonContactValue\":\"nZDwyXYRAIP98u_aNnnC\",\"brivityPersonDetailsCard\":\"S7xGWofIvK_OsnXLuYc2\",\"cardRoundedTop\":\"DaRaRRkXAIcDSDeof0z6\",\"brivityPersonDetailsHeader\":\"vGpSKT9idBT1ZfIPJIFx\",\"brivityPersonDetailsTitle\":\"B2Pyhh06axETWXz1Nlv9\",\"brivityPersonDetailsLabel\":\"StWeD3Ob2jddVuxP371C\",\"brivityPersonDetailsText\":\"lnTw_SYg8DBLf4uf91JB\",\"brivityPersonDetailsTag\":\"kDtp2HDL_fdhFSG5YMA3\",\"brivityPersonRelationshipsCard\":\"gVnYNx2yNpuXMHAbuDrL\",\"brivityPersonRelationshipsHeader\":\"CYIIh2dHxfJkSt6RCjiO\",\"brivityPersonRelationshipsHeaderText\":\"QXaBTVidsLkohGW0XX57\",\"brivityPersonRelationshipItem\":\"sxmscrZl7Y60ZEm1fsPi\",\"brivityPersonRelationshipName\":\"Y3Ie5UtLrJUl8TDr2v7B\",\"brivityPersonRelationshipType\":\"RXxiEyqjKHLl52psHn5j\",\"card\":\"B8fQoExBGCYVPyC1KghU\",\"collapsed\":\"QGo3WRnPxRw7C8ZUs4FE\",\"brivityCardBoxShadow\":\"T_Qm3bNHCBk1Uun2XSSX\",\"circleOutlineIcon\":\"U8fUAyb47ku5I8Nx55fM\",\"personDetailLabel\":\"QsU7qQBykzeZ6GKKgtgh\",\"addDetailLink\":\"mrdvbSWUi3Vk2hazY088\",\"addressFadeOverflow\":\"G1nGMsOMBQ72kVqhzUvu\",\"contactInfoFadeOut\":\"_E5dVDEcwUJHBYAWRw89\",\"contactInfoFadeOutHover\":\"SJSjqtAQ9wumspuFH8Mm\",\"personDetailEmptyStateText\":\"huV3ZRbadH08G9i3CUy7\",\"inlineDetail\":\"CjwqNgsVhz_JADRhA7Q3\",\"inlineLabelValue\":\"d8HDFU6IwFu7UDDo8cvt\",\"materialDesignBox\":\"t_lWE4Yv17AnJMxGv8HQ\",\"selectEmailDropdown\":\"yLG0htnIyxMnMeok2c7e\",\"selectEmailDropdownContent\":\"_gvItYlteVMYcsMAJt14\",\"emailStatusIcon\":\"Gy4vFbDFBQQH8vvQBzKD\",\"emailStatusCaret\":\"GMmn3F1pLc2gYQUHWrkQ\",\"cursorPointer\":\"ECZUnaM9OsadmfvMl81s\",\"faDisabled\":\"WHByHd_ntB5C8eNKol0t\",\"note_content\":\"fCAd3nm5YDyjKjmYkqos\",\"note_content_on_view_all\":\"qE7xVCh6RjqLjSNlBI4g\",\"view_all_notes_close_button\":\"BTgjiZDEhud7qEK6NieQ\",\"create_new_note_container\":\"wv3YS2DR0b4cQeMsuXtA\",\"car_note_sidebar\":\"RA1k0mlu0lrnF0xV1G1U\"};","// extracted by mini-css-extract-plugin\nexport default {\"modalTitle\":\"UfMoVRB9MAE7ujzZBsrC\",\"newModalTitle\":\"Yn4mAOwjupB0yN7wX99G\",\"sectionHeader\":\"yNcsoOW2YKDjHZ22mMIU\",\"pT32\":\"oj1ZDsjC4pQeCYjtD1bd\",\"pT30\":\"_4fmeV1UuQRWSmeOUJwAQ\",\"pT20\":\"VzIznD9pwSplbTabtGhw\",\"pT10\":\"a18Q9L4yB3O0Avj9BowQ\",\"pT8\":\"Fsf70LuJ1vW4_nd9pRJ0\",\"pB15\":\"SYWH3itOuk1jj07SV0Aq\",\"pB16\":\"XHdyqLKIPLV0zX3SDzmV\",\"pB24\":\"WZwirT7MF9pvqO4Ublpm\",\"pB30\":\"f7FhxpaCCCGT1DXsGLqg\",\"mT20\":\"L8SPrC40KiNT2u4hhPsz\",\"mB0\":\"CKPHC2KrjWuUEDAnVW3P\",\"mB24\":\"CY_qb9CQNPyBFaCMcxLV\",\"mR16\":\"Njwno7ChON7na0jVJ7Ig\",\"uploadPersonalPhoto\":\"ILhsBaMHK95InTa65ANg\",\"initials\":\"sZRISP86uDVT5UQXgURw\",\"uploadAvatarIcon\":\"HeoUmANgjG5RvpSd9JBh\",\"uploadAvatarText\":\"lWLJ_HYGyWxaSj97DWjZ\",\"divider\":\"DaNP8eP6FbIsm0KAS2e7\",\"modalBodyContainer\":\"pSR0_n4yfW4gn14QZP0a\",\"primaryDetailColor\":\"nhzGJXgaxOLFSO1ZoGS2\",\"makePrimaryLink\":\"neu5op5N78uRPVTQGAyI\",\"centerItems\":\"TY0yYs1p_rPdDxB02nAK\"};","import React from \"react\";\nimport { Col, Row } from \"react-bootstrap\";\nimport modal_css from \"../modal.module.css\";\n\nconst HeaderTitle = (props) => {\n const { isNewHeader, title, onClose } = props;\n return (\n \n
\n \n
\n \n {\n listingAlerts.map((alert, alertIndex) => (\n CREATE NEW LISTING ALERT
\n \n
\n \n ))\n }\n \n \n Listing Alert\n
\n \n\n {/*TODO: Do we need to account for the account's time zone? See listing_alert_decorator.rb*/}\n {moment(alert.createdAt).format(\"MM/D/YYYY\")}\n at {moment(alert.createdAt).format(\"h:mm A\")}\n
\n\n
\n \n Name:\n \n {alert.searchName}\n \n
\n\n
\n Frequency:\n {capitalize(alert.frequency)}\n
\n }\n\n Search Term:\n {formatLocationsForDisplay(alert)}\n
\n\n Price:\n {formattedPriceRange(alert.priceMin, alert.priceMax)}\n
\n\n Bed:\n {formattedRange(alert.bedsMin, alert.bedsMax)}\n
\n\n Bath:\n {formattedRange(alert.bathsMin, alert.bathsMax)}\n
\n\n Square Feet:\n {formattedRange(alert.sqFtMin, alert.sqFtMax)}\n
\n\n Lot:\n {formattedRange(alert.lotSizeMin, alert.lotSizeMax)}\n
\n\n Garage:\n {formattedRange(alert.garageMin, alert.garageMax)}\n
\n\n Year:\n {formattedRange(alert.yearMin, alert.yearMax)}\n
\n\n
\n );\n }\n}\n\nexport default AdvancedOptions;\n\nconst AdvancedOption = ({option, onSelect, isOptionSelected}) => {\n return (\n \n {this.props.label}\n
\n {this.props.options.length > this.CollapsedMax && (\n \n {(options).map(option => (\n this.toggleOptionSelection(option)}\n isOptionSelected={this.isOptionSelected(option)}\n />\n ))}\n
\n \n \n {this.state.collapsedView ? 'MORE' : 'LESS'}\n \n {this.state.collapsedView ?
\n )}\n \n
\n {option.label}\n \n );\n};\n","import React, { Component } from 'react';\nimport alerts from '../listing_alerts/listing_alerts.module.css';\nimport TextInput from '@shared/v2/TextInput';\n\nclass AddCCEmails extends Component {\n state = {\n ccEmail: ''\n }\n\n handleChange = (e) => {\n this.setState({ ccEmail: e.target.value })\n }\n\n validEmail = (email) => /^[^@\\s]+@[^@\\s]+$/.test(email)\n\n displayEmail = () => {\n const { ccEmail } = this.state\n\n if (this.validEmail(ccEmail)) {\n return {ccEmail}\n }\n return `Invalid Email ${ccEmail}`\n }\n\n handleClick = () => {\n const { ccEmail } = this.state\n if (this.validEmail(ccEmail)) {\n this.props.addEmail(ccEmail)\n this.setState({ ccEmail: '' })\n }\n }\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nexport default AddCCEmails;\n","import React from 'react';\nimport { Col } from 'react-bootstrap';\nimport alerts from '../listing_alerts/listing_alerts.module.css';\nimport form from '../form.module.css';\n\nconst CCEmail = (props) => {\n const { email, removeEmail } = props\n return (\n \n {this.displayEmail()}\n
\n }\n \n
\n );\n};\n\nexport default CCEmail;\n","import React from 'react';\n\nconst MatchingResults = (props) => {\n const { showUrl, count, url } = props\n return (\n \n { showUrl ?\n VIEW {count} LISTING{count === 1 ? \"\" : \"S\"}\n :\n \"Add search terms or map area to preview listings\"\n }\n
\n )\n}\n\nexport default MatchingResults;\n","import React, {Component} from 'react';\nimport alerts from './listing_alerts.module.css';\n\nclass Map extends Component {\n state = {\n gblDrawListener: undefined,\n polygonObject: undefined,\n }\n\n componentDidMount() {\n const { geoCodeAccountAddress, polygonCoordinates } = this.props\n let map = undefined\n Brivity.SetUpGetBounds()\n const centerOnUS = {\n zoom: 3,\n center: {\n lat: 39.8283,\n lng: -98.5795\n },\n mapTypeId: 'terrain',\n panControl: false\n }\n\n // Setting up the map.\n // If no polygon coordinates and the account has a geocode address center on that address\n // Otherwise center on the US\n //If there are polygon coordinates draw that on the map and set up listeners for editing and deleting vertices\n if (geoCodeAccountAddress !== undefined && polygonCoordinates === undefined) {\n const geocoder = new google.maps.Geocoder()\n map = new (google.maps.Map)(document.getElementById('listingAlertMap'), { center: { lat: 0, lng: 0 }, zoom: 12 })\n geocoder.geocode({ 'address': geoCodeAccountAddress }, (results, status) => {\n if (status === 'OK') {\n map.setCenter(results[0].geometry.location)\n } else {\n map = new (google.maps.Map)(document.getElementById('listingAlertMap'), centerOnUS)\n }\n })\n } else {\n map = new (google.maps.Map)(document.getElementById('listingAlertMap'), centerOnUS)\n if (polygonCoordinates !== undefined) {\n let polyArray = this.drawPoly(polygonCoordinates)\n let polygonFromCoordinates = new google.maps.Polygon({\n map: map,\n path: polyArray,\n strokeColor: '#656b70',\n strokeOpacity: 0.7,\n strokeWeight: 2,\n fillColor: '#656b70',\n fillOpacity: 0.2,\n editable: true\n })\n\n // centers on polygon and set up edit and delete listeners\n this.setState({ polygonObject: polygonFromCoordinates }, () => {\n map.fitBounds(this.state.polygonObject.getBounds())\n this.editPolyVertexListener()\n this.clickToDeleteVertexListener()\n })\n }\n }\n\n const drawControlDiv = document.createElement('div')\n const drawControl = this.drawOrCancelButton(drawControlDiv, map)\n drawControlDiv.index = 1\n map.controls[google.maps.ControlPosition.TOP_RIGHT].push(drawControlDiv)\n }\n\n componentWillUnmount() {\n if (this.state.polygonObject) {\n google.maps.event.clearListeners(this.state.polygonObject.getPath(), 'insert_at')\n google.maps.event.clearListeners(this.state.polygonObject.getPath(), 'remove_at')\n google.maps.event.clearListeners(this.state.polygonObject.getPath(), 'set_at')\n google.maps.event.clearListeners(this.state.polygonObject, 'click')\n }\n }\n\n drawPoly = (multipolygonWKT) => {\n let polylines = []\n const points = multipolygonWKT.match(/[-]?\\d+(\\.\\d+)?,[-]?\\d+(\\.\\d+)?/g);\n\n points.forEach((point) => {\n let splitPoint = point.split(',')\n polylines.push({ lat: parseFloat(splitPoint[0]), lng: parseFloat(splitPoint[1]) })\n })\n\n return polylines\n }\n\n drawOrCancelButton = (controlDiv, dmap, mobile) => {\n // Set CSS for the control border.\n let controlUI = document.createElement('button')\n controlUI.style.backgroundColor = '#fff'\n controlUI.style.border = '2px solid #fff'\n controlUI.style.borderRadius = '3px'\n controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'\n controlUI.style.cursor = 'pointer'\n controlUI.style.marginTop = '10px'\n controlUI.style.marginRight = '10px'\n controlUI.style.textAlign = 'center'\n controlUI.title = 'Click to do a search by drawing'\n controlUI.setAttribute('type', 'button')\n controlDiv.appendChild(controlUI)\n\n // Set CSS for the control interior.\n let controlText = document.createElement('div')\n controlText.style.color = 'rgb(25,25,25)'\n controlText.style.fontFamily = 'Roboto,Arial,sans-serif'\n controlText.style.fontSize = '12px'\n if (this.state.polygonObject === undefined) {\n controlText.innerHTML = ' Draw'\n } else {\n controlText.innerHTML = 'Cancel'\n }\n controlText.style.paddingLeft = '5px'\n controlText.style.paddingRight = '5px'\n controlText.style.lineHeight = '28px'\n\n if (mobile) {\n controlText.setAttribute(\"id\", \"drawBtnTextM\");\n } else {\n controlText.setAttribute(\"id\", \"drawBtnText\");\n }\n\n if (this.props.polygonCoordinates === undefined) {\n controlText.setAttribute(\"is-active\", false);\n } else {\n controlText.setAttribute(\"is-active\", true);\n }\n\n controlUI.appendChild(controlText);\n let _self = this\n controlUI.addEventListener('click', () => {\n if (mobile) {\n let isActive = $(\"#drawBtnTextM\").attr('is-active');\n\n if (isActive === 'true') {\n $(\"#drawBtnTextM\").attr('is-active', false);\n $(\"#drawBtnTextM\").html(' Draw');\n enableMap(dmap);\n if (this.state.polygonObject !== undefined) {\n this.state.polygonObject.setMap(null)\n }\n // Ensuring all the listeners enabled on 'mousedown' get cleaned\n google.maps.event.clearListeners(dmap.getDiv(), 'mousedown');\n google.maps.event.removeListener(this.state.gblDrawListener.move);\n google.maps.event.clearListeners(dmap, 'mouseup');\n } else {\n $(\"#drawBtnTextM\").attr('is-active', true);\n $(\"#drawBtnTextM\").html('X');\n\n disableMap(dmap);\n\n // Validates element exists to avoid and error and prevent a malfunction of the drawing in mobile\n if ($(\"#listing-grid-results\").length) {\n $('html, body').animate({\n scrollTop: $(\"#listing-grid-results\").offset().top\n }, 200);\n }\n\n google.maps.event.addDomListener(dmap.getDiv(), 'mousedown', function (e) {\n drawFreeHandOnMap(dmap, mobile);\n });\n }\n } else {\n let isActive = $(\"#drawBtnText\").attr('is-active')\n\n if (isActive === 'true') {\n $(\"#drawBtnText\").attr('is-active', false)\n $(\"#drawBtnText\").html(' Draw')\n enableMap(dmap)\n if (this.state.polygonObject !== undefined) {\n this.state.polygonObject.setMap(null)\n }\n\n // Ensuring all the listeners enabled on 'mousedown' get cleaned\n google.maps.event.clearListeners(dmap.getDiv(), 'mousedown')\n google.maps.event.removeListener(this.state.gblDrawListener.move)\n google.maps.event.clearListeners(dmap, 'mouseup')\n\n } else {\n $(\"#drawBtnText\").attr('is-active', true)\n $(\"#drawBtnText\").html('Cancel')\n disableMap(dmap)\n google.maps.event.addDomListener(dmap.getDiv(), 'mousedown', function (e) {\n _self.drawFreeHandOnMap(dmap, mobile)\n })\n }\n }\n })\n }\n\n drawFreeHandOnMap = (dmap, mobile) => {\n if(this.state.polygonObject !== undefined) {\n this.state.polygonObject.setMap(null)\n }\n //the polygon\n let poly = new google.maps.Polyline({\n map: dmap,\n clickable: false,\n strokeColor: '#656b70',\n strokeOpacity: 0.7,\n strokeWeight: 2,\n fillColor: '#656b70',\n fillOpacity: 0.2\n })\n\n //move-listener\n this.setState({ gblDrawListener: google.maps.event.addListener(dmap, 'mousemove', (e) => { poly.getPath().push(e.latLng) }) })\n\n //mouseup-listener\n let _self = this\n google.maps.event.addListenerOnce(dmap, 'mouseup', (e) => {\n google.maps.event.removeListener(this.state.gblDrawListener.move)\n // Use map range distance as a scaler for tolerance (so state-sized\n // polygons don't have hundreds of geographic points *more than* a hand-\n // drawing can realistically communicate, and neighborhood-sized polygons\n // do get enough points to convey the geographic detail a hand-drawing\n // at that scale *does* accurately capture)\n let mapRangeInDegreesLatLng = calculateMapRangeInDegrees(dmap)\n // simplificationTolerance is presumed to be in the same unit as the\n // points (degrees of lat/long, in this case). Larger tolerance leads\n // to less-refined (chunkier) path.\n let simplificationTolerance = mapRangeInDegreesLatLng/100\n let simplifiedLinePath = simplifyLine(poly,simplificationTolerance)\n //Remove freehand drawing and replace with polygon\n poly.setMap(null);\n let polygonObject = new google.maps.Polygon({\n map: dmap,\n path: simplifiedLinePath,\n strokeColor: '#656b70',\n strokeOpacity: 0.7,\n strokeWeight: 2,\n fillColor: '#656b70',\n fillOpacity: 0.2,\n editable: true\n })\n _self.setState({ polygonObject })\n\n google.maps.event.clearListeners(dmap.getDiv(), 'mousedown')\n this.editPolyVerticies()\n\n if (mobile) {\n removeMarkersMobile()\n }\n // Enabling map so user can move it\n enableMap(dmap)\n // TODO: the addListener seems to work with dmap but why not _self.polygon... addListener(_self.polygon, 'click', function(event) {\n google.maps.event.addListener(dmap, 'click', function(event) {\n if(event.path != null && event.vertex != null){\n let path = this.getPaths().getAt(event.path)\n if(path.getLength() > 3){\n path.removeAt(event.vertex)\n }\n }\n })\n })\n }\n\n editPolyVerticies = () => {\n let vertices = this.state.polygonObject.getPath().getArray()\n let contentString = ''\n\n //Add listeners if a polygon has been drawn for the first time\n if (google.maps.event.hasListeners(this.state.polygonObject.getPath(), 'insert_at') === false) {\n this.editPolyVertexListener()\n this.clickToDeleteVertexListener()\n }\n\n // Iterate over the vertices.\n let stopPoint = 0\n let i = 0\n while (i < vertices.length) {\n if (stopPoint == 0) {\n contentString += '(' + vertices[i].lat().toFixed(3) + ',' + vertices[i].lng().toFixed(3) + '),'\n } else {\n if (stopPoint == 5) {\n stopPoint = 0\n } else {\n stopPoint++\n }\n }\n i++\n }\n if (contentString != '') {\n this.props.handlePolygonUpdate(contentString.substr(0, contentString.length - 1))\n // TODO: make sure the counts and url update\n }\n }\n\n editPolyVertexListener = () => {\n google.maps.event.addListener(this.state.polygonObject.getPath(), 'insert_at', (function(_this) {\n return function(event) {\n return _this.editPolyVerticies();\n };\n })(this));\n\n google.maps.event.addListener(this.state.polygonObject.getPath(), 'remove_at', (function(_this) {\n return function(event) {\n return _this.editPolyVerticies();\n };\n })(this));\n\n google.maps.event.addListener(this.state.polygonObject.getPath(), 'set_at', (function(_this) {\n return function(event) {\n return _this.editPolyVerticies();\n };\n })(this));\n }\n\n clickToDeleteVertexListener = () => {\n google.maps.event.addListener(this.state.polygonObject, 'click', (e) => {\n if (e.path !== null && e.vertex !== null) {\n const path = this.state.polygonObject.getPaths().getAt(e.path)\n if (path.getLength() > 3) {\n path.removeAt(e.vertex)\n }\n }\n return\n })\n }\n\n render() {\n return (\n \n )\n }\n}\n\nexport default Map\n","import React from \"react\";\n\nimport Dropdown from '@shared/v2/Dropdown';\nimport { GearSolidV6, PlusSolidV6 } from '@shared/v2/Icomoon';\nimport TextButton from \"@shared/v2/TextButton\";\n\nconst TemplateSelect = ({ templates = [], templateId, onTemplateChosen }) => {\n const options = templates.map(({id, name}) => ({label: name, value: id}));\n\n const handleTemplateSelect = ({value}) => {\n onTemplateChosen(value);\n };\n\n return (\n \n o.value === templateId)}\n options={options}\n onChange={handleTemplateSelect}\n placeholder=\"Custom Listing Alert\"\n components={{ NoOptionsMessage }}\n className=\"tw-mb-4px\"\n />\n Start with a template or create a custom Listing Alert\n
\n );\n};\n\nexport default TemplateSelect;\n\nconst NoOptionsMessage = ({ componentProps }) => (\n \n Template\n window.open(\"/listing_alert_templates\", \"_blank\")}\n >\n
\n \n
\n \n \n
\n \n \n);\n","import React from 'react';\nimport alerts from './listing_alerts.module.css';\n\n\nconst SearchTermResults = (props) => {\n const { categoryPosition, currentCategoryPosition, currentChildPosition, handleHover, handleSelect, results } = props\n\n return (\n \n handleHover(categoryPosition, index)}\n onMouseDown={() => handleSelect({ multiCat: result.category, multiSearch: result.value, label: result.label })}\n >\n {result.text}\n
\n )\n })\n }\n \n );\n};\n\nexport default SearchTermResults;\n","import React from 'react';\nimport alerts from './listing_alerts.module.css';\n\nconst SearchTermBubble = (props) => {\n const { term, removeSearchTerm } = props\n\n return (\n \n {results.text}\n
\n {\n results.children.map((result, index) => {\n const positionClass = currentCategoryPosition === categoryPosition && currentChildPosition === index ? alerts.highlight : ''\n\n return (\n \n {term.label}: {term.multiSearch}\n removeSearchTerm(term.multiSearch)}\n />\n
\n );\n};\n\nexport default SearchTermBubble;\n","import React, { Component } from 'react';\nimport axios from 'axios';\nimport groupBy from 'lodash/groupBy';\nimport SearchTermResults from './SearchTermResults';\nimport SearchTermBubble from './SearchTermBubble';\nimport alerts from './listing_alerts.module.css';\nimport TextInput from '@shared/v2/TextInput';\n\nconst mapSearchFromMultiCat = (multiCatArray, multiSearchArray) => multiSearchArray.map((searchValue, index) => {\n const multiCatAtIndex = multiCatArray[index];\n const searchResult = { multiSearch: searchValue, multiCat: multiCatAtIndex }\n // TODO: determine if any of the other multiCatAtIndex values need to be mapped\n if (multiCatAtIndex === 'CityState') {\n searchResult['label'] = 'City'\n } else if (multiCatAtIndex === 'NeighborhoodCityState') {\n searchResult['label'] = 'Neighborhood'\n } else if (multiCatAtIndex === 'CountyState') {\n searchResult['label'] = 'County'\n } else {\n searchResult['label'] = multiCatAtIndex\n }\n return searchResult\n});\n\nclass SearchAutocomplete extends Component {\n state = {\n currentCategoryPosition: 0,\n currentChildPosition: 0,\n multi_search: '',\n searchTermActive: false,\n searchResults: [],\n selectedSearchTerms: []\n }\n\n componentDidMount() {\n this.mapPropsToSearch();\n }\n\n componentDidUpdate(prevProps, _) {\n if (this.props.multiCatArray === prevProps.multiCatArray && this.props.multiSearchArray === prevProps.multiSearchArray) {\n return;\n }\n\n this.mapPropsToSearch(true);\n }\n\n mapPropsToSearch(propsUpdated = false) {\n const multiCatArray = this.props.multiCatArray || []\n const multiSearchArray = this.props.multiSearchArray || []\n\n if (propsUpdated || multiCatArray.length > 0 && multiSearchArray.length > 0) {\n this.setState({ selectedSearchTerms: mapSearchFromMultiCat(multiCatArray, multiSearchArray) });\n }\n }\n\n fetchResults = (term) => {\n const idsArrayQuery = this.props.mlsIds.map((id) => `mlsIds[]=${id}`).join('&')\n\n // TODO: Do we need to pass multi_search back up to the parent?\n this.setState({ multi_search: term }, () => this.doFetchResults(idsArrayQuery, term))\n };\n\n doFetchResults = (idsArrayQuery, term) => {\n axios.get(`/people/${this.props.personId}/listing_alert_autocomplete.json?${idsArrayQuery}&term=${term}`,\n {\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n }\n }\n )\n .then(response => {\n // This happens if a previous query returned later than a later query\n if (this.state.multi_search !== term) {\n return;\n }\n\n const searchResults = response.data\n const groupedResults = groupBy(searchResults, (obj) => obj.label)\n let mappedResults = []\n\n Object.keys(groupedResults).each((key) => {\n let children = groupedResults[key].map((object) => {\n const isAddress = object.label === \"Address\";\n const value = isAddress ? object.selected_fields.address : object.value;\n return { text: object.value, category: object.category, value: value, label: object.label }\n })\n\n mappedResults.push({ text: key, children: children })\n })\n\n const order = {\n \"Address\": 1,\n \"City\": 2,\n \"Neighborhood\": 3,\n \"MLS\": 4,\n \"County\": 5,\n \"Zip Code\": 6,\n \"Building Name\": 7,\n \"School District\": 8,\n \"Elementary School\": 9,\n \"Middle School\": 10,\n \"High School\": 11,\n \"Area\": 12\n }\n\n const orderedResults = mappedResults.sort((v1, v2) => {\n if (order[v1.text] < order[v2.text]) {\n return -1\n } else if (order[v1.text] > order[v2.text]) {\n return 1\n } else {\n return 0\n }\n })\n\n this.setState({ searchResults: orderedResults })\n })\n };\n\n handleHover = (currentCategoryPosition, currentChildPosition) => {\n this.setState({ currentCategoryPosition, currentChildPosition })\n };\n\n handleMouseSelect = (value) => {\n if (this.state.selectedSearchTerms.filter(term => term.multiSearch === value.multiSearch).length > 0) {\n this.setState({ currentCategoryPosition: 0, currentChildPosition: 0, multi_search: '', searchResults: [], searchTermActive: false })\n } else {\n this.setState((prevState) => ({\n currentCategoryPosition: 0,\n currentChildPosition: 0,\n multi_search: '',\n searchResults: [],\n selectedSearchTerms: [...prevState.selectedSearchTerms, value],\n searchTermActive: false\n }), () => { this.props.handleAddSearchTerm(value) })\n }\n\n }\n\n removeSearchTerm = (multiSearch) => {\n this.setState((prevState) => ({ selectedSearchTerms: prevState.selectedSearchTerms.filter(term => term.multiSearch !== multiSearch) }), () => {\n this.props.handleRemoveSearchTerm(multiSearch)\n })\n }\n\n handleKeyDown = (e) => {\n const { searchResults, currentCategoryPosition, currentChildPosition, multi_search } = this.state\n\n if (e.keyCode === 13) { //Enter has been pressed\n e.preventDefault()\n const selectedTerm = searchResults[currentCategoryPosition].children[currentChildPosition]\n const termValue = { multiCat: selectedTerm.category, multiSearch: selectedTerm.value, label: selectedTerm.label }\n this.setState((prevState) => ({\n currentCategoryPosition: 0,\n currentChildPosition: 0,\n multi_search: '',\n searchResults: [],\n selectedSearchTerms: [...prevState.selectedSearchTerms, termValue]\n }), () => { this.props.handleAddSearchTerm(termValue) })\n } else if (e.keyCode === 38) { //navigate up\n if (currentChildPosition > 0) {\n this.setState(prevState => ({ currentChildPosition: prevState.currentChildPosition - 1 }))\n } else if (currentCategoryPosition > 0) {\n const children = searchResults[currentCategoryPosition - 1].children\n this.setState(prevState => ({ currentCategoryPosition: prevState.currentCategoryPosition - 1, currentChildPosition: children.length - 1 }))\n }\n } else if (e.keyCode === 40) { //navigate down\n if (currentChildPosition < searchResults[currentCategoryPosition].children.length - 1) {\n this.setState(prevState => ({ currentChildPosition: prevState.currentChildPosition + 1 }))\n } else if (currentCategoryPosition < searchResults.length - 1) {\n this.setState(prevState => ({ currentCategoryPosition: prevState.currentCategoryPosition + 1, currentChildPosition: 0 }))\n }\n } else if (e.keyCode === 8 && multi_search.length === 1) { //removing last character with backspace\n this.setState({\n currentCategoryPosition: 0,\n currentChildPosition: 0,\n multi_search: '',\n searchResults: []\n })\n }\n };\n\n render() {\n const { multi_search, searchTermActive, currentCategoryPosition, currentChildPosition, selectedSearchTerms, searchResults } = this.state\n\n return (\n \n this.setState({ searchTermActive: true })}\n onChange={(e) => this.fetchResults(e.target.value)}\n onKeyDown={this.handleKeyDown}\n value={multi_search}\n />\n {(searchTermActive && searchResults.length > 0) &&\n
\n );\n }\n}\n\nexport default SearchAutocomplete;\n","import axios from 'axios';\n\nconst getAvailablePropertyTypes = async (personId, mlsIds) => {\n const url = `/people/${personId}/listing_alert_property_types.json?mls_ids=${mlsIds.join(',')}`;\n const { data } = await axios.get(url, createHeaders());\n\n return data.property_types;\n};\n\nconst getAvailableFeatureFilters = async (personId, mlsIds) => {\n const url = `/people/${personId}/listing_alert_filter_options.json?mls_ids=${mlsIds.join(',')}`;\n const { data } = await axios.get(url, createHeaders());\n\n return data.filter_options;\n};\n\nconst getWebsiteDomain = async personId => {\n const url = `/people/${personId}/listing_alert_website_domain.json`;\n const { data } = await axios.get(url, createHeaders());\n\n return data.website_domain;\n};\n\nconst getListingCounts = async (personId, alert) => {\n const url = `/people/${personId}/listing_alert_counts.json`;\n const { data } = await axios.post(url, alert, createHeaders());\n\n return data.total;\n};\n\nconst getInstantAlertsEnabled = async (personId) => {\n const url = `/people/${personId}/listing_alerts/instant_alerts_enabled.json`;\n const { data } = await axios.get(url);\n\n return data.instant_alerts_enabled;\n};\n\nconst getQueryStringForIdx = async (personId, alert) => {\n const url = `/people/${personId}/listing_alert_search_query.json`;\n const { data } = await axios.post(url, alert, createHeaders());\n\n return data.search_query;\n};\n\nconst getAlerts = async personSlug => {\n const url = `/people/${personSlug}/listing_alerts`;\n return axios.get(url, createHeaders());\n}\n\nconst createAlert = async (personId, alert) => {\n const url = `/people/${personId}/listing_alerts`\n return axios.post(url, alert, createHeaders());\n};\n\nconst updateAlert = async (personId, alertId, alert) => {\n const url = `/people/${personId}/listing_alerts/${alertId}`\n return axios.patch(url, alert, createHeaders());\n};\n\nconst getTemplates = async (personId) => {\n const url = `/listing_alert_templates`;\n const { data } = await axios.get(url, createHeaders());\n\n return data || [];\n};\n\nexport {\n getAvailablePropertyTypes,\n getAvailableFeatureFilters,\n getWebsiteDomain,\n getListingCounts,\n getInstantAlertsEnabled,\n getQueryStringForIdx,\n getAlerts,\n createAlert,\n updateAlert,\n getTemplates\n};\n\nconst createHeaders = () => {\n return {\n headers: {\n \"X-CSRF-Token\": ReactOnRails.authenticityToken(),\n \"Content-Type\": \"application/json\",\n \"Accept\": \"application/json\"\n }\n };\n};\n","export const formatValue = (value, asPrice = false) => {\n if (value === null || value === undefined) {\n return \"N/A\";\n }\n\n if (Array.isArray(value)) {\n return value.length ? value.join(\", \") : \"N/A\";\n }\n\n if (typeof value === \"boolean\") {\n return value ? \"Yes\" : \"No\";\n }\n\n if (asPrice) {\n return formatPrice(value);\n }\n\n return value;\n};\n\nexport const formatNumber = (num) => (num ? num.toLocaleString(\"en-US\") : \"N/A\");\n\nexport const addParametersToImageUrl = (url, height, width, quality = 80, mode = \"crop\") =>\n `${url}&height=${height}&width=${width}&quality=${quality}&mode=${mode}`;\n\nexport const formatPrice = (price, decimalPlaces = 0) => {\n if (!price && price !== 0) {\n return;\n }\n\n const options = {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: decimalPlaces,\n maximumFractionDigits: decimalPlaces,\n };\n\n return new Intl.NumberFormat(\"en-US\", options).format(price);\n};\n\nexport const formatSimplePrice = (price) => {\n if (!price) {\n return;\n }\n\n const slicer = [\n { value: 1_000_000_000, abbr: \"B\", digits: 2 },\n { value: 1_000_000, abbr: \"M\", digits: 2 },\n { value: 1_000, abbr: \"K\", digits: 0 },\n { value: 1, abbr: \"\", digits: 0 },\n ];\n\n for (const { value, abbr, digits } of slicer) {\n if (price >= value) {\n const reduced = (price / value).toFixed(digits);\n return `$${reduced}${abbr}`;\n }\n }\n};\n\nexport const ExistingFeatureFields = [\n \"poolFeatures\",\n \"parkingFeatures\",\n \"interiorFeatures\",\n \"exteriorFeatures\",\n \"communityFeatures\",\n \"propertyFeatures\",\n \"greenFeatures\",\n \"view\",\n \"heating\",\n \"cooling\",\n \"lotFeatures\",\n \"homeStyle\",\n \"financialInformation\",\n \"acreageRange\",\n \"propertySubTypes\"\n];\n\nexport const calculateAgentStats = (listings, agentId) => {\n let soldProduction = 0;\n let soldUnits = 0;\n let boughtUnits = 0;\n let boughtProduction = 0;\n let closePriceTotal = 0;\n let listPriceTotal = 0;\n\n for (const listing of listings) {\n if (listing.standardStatus !== \"Closed\") { // Always be closing\n continue;\n }\n\n closePriceTotal += listing.soldPrice;\n listPriceTotal += getOriginalPrice(listing);\n\n if (isSellerAgent(listing, agentId)) {\n soldUnits++;\n soldProduction += listing.soldPrice;\n } else {\n boughtUnits++;\n boughtProduction += listing.soldPrice;\n }\n }\n\n const totalClosed = soldUnits + boughtUnits;\n\n return {\n closed: {\n total: totalClosed,\n seller: {\n units: soldUnits,\n volume: soldProduction,\n ratio: totalClosed ? soldUnits / totalClosed : 0\n },\n buyer: {\n units: boughtUnits,\n volume: boughtProduction,\n ratio: totalClosed ? boughtUnits / totalClosed : 0\n }\n },\n stats: {\n avgClosePrice: totalClosed ? closePriceTotal / totalClosed : 0,\n avgListPrice: totalClosed ? listPriceTotal / totalClosed : 0,\n grossProduction: closePriceTotal,\n totalListings: listings.length\n }\n };\n};\n\nconst getOriginalPrice = listing => {\n if (!listing) {\n return null;\n }\n\n if (listing.history?.length > 0) {\n for (let hist of listing.history) {\n if (hist.price) {\n return hist.price;\n }\n }\n }\n\n return listing.price;\n};\n\nconst isSellerAgent = (listing, agentId) => {\n for (const { agentType, id } of listing.agents) {\n if (ListAgentTypes.includes(agentType) && id === agentId) {\n return true;\n }\n }\n\n return false;\n};\n\nconst ListAgentTypes = [\"Listing Agent\", \"Co-Listing Agent\"];\n","import React, { Component } from 'react';\nimport alerts from './listing_alerts.module.css';\nimport form_css from '../form.module.css';\nimport AdvancedOptions from \"./AdvancedOptions\";\nimport AddCCEmails from \"./AddCCEmails\";\nimport CCEMail from \"./CCEmail\";\nimport MatchingResults from \"./MatchingResults\";\nimport Map from \"./Map\";\nimport TemplateSelect from './TemplateSelect';\nimport SearchAutocomplete from \"./SearchAutocomplete\";\nimport Error from \"../../../shared/Error\"\nimport {\n dropDownOptions,\n bathroomOptions,\n lotSizeOptions,\n mapStateToAlert,\n storiesOptions,\n searchFrequencyOptions,\n sqFTOptions,\n yearOptions,\n mapAlertToState\n} from '../../../shared/ListingAlertHelpers';\nimport {\n getInstantAlertsEnabled,\n getAvailablePropertyTypes,\n getAvailableFeatureFilters,\n getWebsiteDomain,\n getListingCounts,\n getQueryStringForIdx,\n createAlert,\n updateAlert,\n getTemplates\n} from './service';\nimport TextInput from '@shared/v2/TextInput';\nimport Dropdown from '@shared/v2/Dropdown';\nimport TextToggle from '@shared/v2/TextToggle';\nimport Modal from '@shared/v2/Modal';\nimport Checkbox from '@shared/v2/Checkbox';\nimport Button from '@shared/v2/Button';\nimport FilterPill from '@shared/v2/FilterPill';\nimport { formatPrice } from '../../../SearchListings/components/helpers';\n\nclass ListingAlert extends Component {\n doesLeadHaveApp = !!this.props.person.home_app_last_login;\n\n constructor(props) {\n super(props);\n const alert = mapAlertToState(this.props, this.doesLeadHaveApp);\n\n this.state = {\n instantAlertsEnabled: false,\n advancedOptions: {}, // These are the available options from the listings API, grouped by view category, not where they data is\n geoCodeAccountAddress: this.props.geoCodeAccountAddress,\n listingAlertCounts: undefined,\n propertyTypes: [], // This is, unintuitively, the available property types from the listings api\n websiteDomain: undefined,\n submitDisabled: false,\n showUrl: false,\n templateId: this.props.templateId,\n templateName: this.props.templateName,\n templates: [],\n ...alert\n };\n }\n\n async componentDidMount() {\n const personId = this.props.person.id;\n\n if (!personId) {\n return;\n }\n\n if (this.state.mlsIds.length === 0) {\n this.setState({ errorMessage: 'No MLSs are configured for your account. Please contact support.', submitDisabled: true })\n } else {\n const promises = [\n getInstantAlertsEnabled(personId),\n getAvailablePropertyTypes(personId, this.props.mlsIds),\n getAvailableFeatureFilters(personId, this.props.mlsIds),\n getTemplates(personId)\n ];\n\n if (!this.state.websiteDomain) {\n promises.push(getWebsiteDomain(personId));\n }\n\n const [ instantAlertsEnabled, propertyTypes, advancedOptions, templates, websiteDomain ] = await Promise.all(promises);\n\n this.setState({ instantAlertsEnabled, propertyTypes, advancedOptions, templates });\n\n if (websiteDomain) {\n this.setState({ websiteDomain });\n }\n\n if (this.props.type === 'edit') {\n this.getCountsAndUrl()\n }\n }\n }\n\n componentDidUpdate(_, prevState) {\n if (this.props.isCreatingTemplate) {\n return;\n }\n\n const noTemplateChosen = !this.state.templateId;\n const newTemplateChosen = this.state.templateId && prevState.templateId !== this.state.templateId;\n\n if (noTemplateChosen || newTemplateChosen) {\n return;\n }\n\n const previousAlert = mapStateToAlert(prevState);\n const currentAlert = mapStateToAlert(this.state);\n\n if (JSON.stringify(previousAlert) === JSON.stringify(currentAlert)) {\n return;\n }\n\n this.setState({ templateId: undefined });\n }\n\n onChange = (e) => {\n this.setState({ [e.target.name]: e.target.value });\n }\n\n onSelect = (name, e) => {\n this.setState({ [name]: e.value }, () => {\n this.getCountsAndUrl();\n })\n }\n\n onTemplateChosen = (templateId) => {\n const templateData = this.state.templates.find(({id}) => id === templateId).query;\n const alert = mapAlertToState({ ...templateData, alertId: this.state.search_id }, this.doesLeadHaveApp);\n\n this.setState({ ...alert, templateId }, () => {\n this.getCountsAndUrl();\n });\n }\n\n onMouseOut = (e) => {\n // TODO: This seems like a bug. If i have a min price of 100,000, and set it to empty (effectively 0), that means a new set of listings\n if (e.target.value !== \"\") {\n this.getCountsAndUrl()\n }\n }\n\n toggleButtons = (button) => {\n if (button === 'search-by-terms') {\n this.setState({ searchingByTerm: true });\n } else if (button === 'search-by-map') {\n this.setState({ searchingByTerm: false });\n } else if (button === 'sending-emails') {\n this.setState({ activeForEmails: true })\n } else if (button === 'not-sending-emails') {\n this.setState({ activeForEmails: false })\n } else if (button === 'sending-notifications') {\n this.setState({ activeForAppNotifications: true })\n } else if (button === 'not-sending-notifications') {\n this.setState({ activeForAppNotifications: false })\n }\n }\n\n togglePropertyTypes = (propertyType) => {\n if (this.state.property_types.includes(propertyType)) {\n this.setState((prevState) => ({ property_types: prevState.property_types.filter(property_type => property_type !== propertyType) }), () => { this.getCountsAndUrl() })\n } else {\n this.setState((prevState) => ({ property_types: prevState.property_types.concat(propertyType) }), () => { this.getCountsAndUrl() })\n }\n }\n\n togglePhotosAvailable = () => {\n this.setState(prevState => ({ photos_available: !prevState.photos_available }), () => this.getCountsAndUrl())\n }\n\n isPropertyTypeSelected = (propertyType) => this.state.property_types.includes(propertyType);\n\n toggleAdvanced = (category, value) => {\n if (this.isFeatureValueSelected(category, value)) {\n this.removeAdvancedFeatureValue(category, value);\n } else {\n this.addAdvancedFeatureValue(category, value);\n }\n };\n\n isFeatureValueSelected = (category, value) => {\n return this.state[category] && this.state[category].fields.some(a => a.term === value);\n };\n\n addAdvancedFeatureValue = (category, value) => {\n this.setState(prevState => {\n const newValue = {\n term: value,\n matchAny: false,\n excludeTerm: false\n };\n\n const newFieldList = prevState[category]\n ? [ ...prevState[category].fields, newValue ]\n : [ newValue ];\n\n return {\n [category]: {\n fields: newFieldList\n }\n };\n }, this.getCountsAndUrl);\n };\n\n removeAdvancedFeatureValue = (category, value) => {\n this.setState(prevState => {\n const newFieldsList = prevState[category].fields.filter(f => f.term !== value);\n\n if (!newFieldsList.length) {\n return { [category]: null };\n }\n\n return {\n [category]: {\n fields: newFieldsList\n }\n };\n }, this.getCountsAndUrl);\n };\n\n getCountsAndUrl = async () => {\n if (!this.state.multi_search_array?.length && !this.state.polygon?.length) {\n this.setState({ showUrl: false });\n return;\n }\n\n const alert = mapStateToAlert(this.state);\n const countsPromise = getListingCounts(this.props.person.id, alert);\n const urlPromise = getQueryStringForIdx(this.props.person.id, alert);\n\n const [ listingCount, queryString ] = await Promise.all([countsPromise, urlPromise]);\n\n this.setState({\n showUrl: true,\n listingAlertCounts: listingCount,\n search_url: `https://${this.state.websiteDomain}/${queryString}`\n });\n }\n\n handleSubmit = async e => {\n e.preventDefault()\n this.setState({ submitDisabled: true })\n\n if (this.props.handleFormSubmit !== undefined) {\n this.props.handleFormSubmit(mapStateToAlert(this.state), (response) => {\n if (response.response.status == 422) {\n this.setState({ errorMessage: response.response.data.content, submitDisabled: false })\n }\n });\n\n return;\n }\n\n try {\n if (this.props.type === 'edit') {\n await updateAlert(this.props.person.id, this.state.search_id, mapStateToAlert(this.state));\n } else {\n await createAlert(this.props.person.id, mapStateToAlert(this.state));\n }\n\n this.props.closeListingAlertModal('success');\n } catch (e) {\n this.setState({ errorMessage: e.response.data.content, submitDisabled: false});\n }\n }\n\n handleAddSearchTerm = (term) => {\n this.setState(prevState => ({\n multi_cat_array: [...prevState.multi_cat_array, term.multiCat],\n multi_search_array: [...prevState.multi_search_array, term.multiSearch]\n }),\n () => {\n this.getCountsAndUrl();\n }\n )\n }\n\n handleRemoveSearchTerm = (term) => {\n const indexOfTerm = this.state.multi_search_array.indexOf(term)\n this.setState(prevState => ({\n multi_cat_array: prevState.multi_cat_array.filter((term, index) => index !== indexOfTerm),\n multi_search_array: prevState.multi_search_array.filter((term, index) => index !== indexOfTerm)}\n ), () => {\n if (this.state.multi_search_array.length) {\n this.getCountsAndUrl();\n } else {\n this.setState({ showUrl: false });\n }\n }\n )\n }\n\n handlePolygonUpdate = (coords) => {\n this.setState({ polygon: coords })\n this.getCountsAndUrl()\n }\n\n handleAddEmail = (email) => {\n if (this.state.cc_emails.indexOf(email) === -1) {\n this.setState(prevState => ({ cc_emails: [...prevState.cc_emails, email] }))\n }\n }\n\n handleRemoveEmail = (emailToRemove) => {\n this.setState(prevState => ({ cc_emails: prevState.cc_emails.filter(email => email !== emailToRemove) }))\n }\n\n formatFeatureFields = () => {\n const fields = ['propertySubTypes', 'poolFeatures', 'parkingFeatures', 'propertyFeatures', 'interiorFeatures', 'exteriorFeatures', 'communityFeatures', 'greenFeatures', 'view', 'heating', 'cooling', 'lotFeatures', 'homeStyle', 'financialInformation', 'legacyFields'];\n const chosenFields = [];\n fields.forEach(f => {\n if (this.state[f]) {\n this.state[f].fields.forEach(cf => {\n chosenFields.push({\n ...cf,\n search_category: f\n });\n });\n }\n });\n\n return chosenFields;\n }\n\n hasRequiredFields = () => {\n const hasLocation = this.state.searchingByTerm\n ? this.state.multi_search_array?.length > 0\n : this.state.polygon?.length > 0;\n\n return this.state.search_name && hasLocation;\n }\n\n render() {\n const { templateName, instantAlertsEnabled, search_name, searchingByTerm, price_min, price_max, numbeds_min, numbeds_max, numbaths_min, numbaths_max, sqfeet_min, sqfeet_max, lotval_min, lotval_max, year_min, year_max, garage_min, garage_max, stories, propertyTypes, advancedOptions, activeForEmails, activeForAppNotifications, frequency, polygon, errorMessage, cc_emails, submitDisabled } = this.state;\n const { validIds, selectedIds, submitButton } = this.props;\n const featureFields = this.formatFeatureFields();\n\n const propertyAdvancedOptions = [];\n const financialAdvancedOptions = [];\n for (const opt of Object.keys(advancedOptions)) {\n if (![\"Financial Information\", \"Financial Features\", \"Stories\"].includes(opt)) {\n propertyAdvancedOptions.push(opt);\n }\n\n if ([\"Financial Information\", \"Financial Features\"].includes(opt)) {\n financialAdvancedOptions.push(opt);\n }\n }\n\n return (\n \n
\n }\n \n {\n searchResults.map((results, index) =>\n
\n \n Search by City, Zip, County, Neighborhood, or School District\n
\n \n {\n selectedSearchTerms.map(term => (\n
\n \n
\n { errorMessage &&
\n {selectedIds > 0 && ( // This should mean it is a 'mass' alert creation event\n \n
\n )}\n {this.props.isCreatingTemplate ? (\n 0 ? \"tw-text-[#177335] tw-bg-semantic-green-5 tw-border-semantic-green-5\" : \"tw-text-[#a81e19] tw-bg-semantic-red-5 tw-border-semantic-red-5\"}`}>\n {`${validIds} of the ${selectedIds} selected contacts have a valid email address to create a Listing Alert`}\n
\n \n
\n ) : (\n \n \n
\n \n
\n )}\n \n
\n \n \n
\n \n
\n \n {cc_emails.map(email =>
\n )}\n \n
\n \n \n
\n \n this.toggleButtons(activeForEmails ? \"not-sending-emails\" : \"sending-emails\")}\n />\n Send Email Alerts\n
\n \n \n
\n \n this.onSelect(\"frequency\", e)}\n placeholder='Select...'\n value={searchFrequencyOptions(instantAlertsEnabled).find(o => o.value === frequency)}\n isDisabled={!activeForEmails}\n />\n
\n \n \n {!this.doesLeadHaveApp &&
\n This lead has not yet joined Brivity Home.
}\n \n this.toggleButtons(activeForAppNotifications ? \"not-sending-notifications\" : \"sending-notifications\")}\n disabled={!this.doesLeadHaveApp}\n />\n Enable Home App Alerts\n
\n \n
\n Search By\n
\n {\n searchingByTerm ?\n \n this.toggleButtons(e.target.value)}\n />\n
\n \n \n
\n :\n \n
\n }\n \n
\n \n \n
\n \n \n
\n \n Property Features\n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n this.onSelect(\"stories\", e)}\n placeholder=\"Any\"\n value={storiesOptions.find(o => o.value === stories)}\n containerClassName=\"tw-min-w-[95px]\"\n />\n
\n \n \n
\n {\n propertyAdvancedOptions.map(option => (\n \n {propertyTypes.map(propertyType => (\n this.togglePropertyTypes(propertyType)} selected={this.isPropertyTypeSelected(propertyType)}>\n {propertyType}\n \n ))}\n
\n \n Financial Options\n
{\n financialAdvancedOptions.map(option => (\n \n Note: when you create and save a new Listing Alert, it will send an initial email immediately.\n
\n \n
\n \n CANCEL\n \n \n {submitButton}\n \n
\n \n
\n \n {\n
\n );\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nclass AssignedPlanRow extends React.Component {\n updatePlanState(state) {\n const { onUpdate, assignedPlan } = this.props;\n const { id } = assignedPlan;\n const form = { state };\n onUpdate(`/assigned_plans/${id}`, form);\n }\n\n render() {\n const { assignedPlan, onShowPlanModal, onShowDeleteModal } = this.props;\n\n return (\n \n {tooltipDescription()}}>\n
\n }\n {listingAlertsModalOpen && (\n \n {getAlertCount()}\n
\n \n\n
\n );\n }\n}\n\nexport default AssignedPlanRow;\n\nAssignedPlanRow.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n assignedPlan: PropTypes.objectOf(PropTypes.any).isRequired,\n onUpdate: PropTypes.func.isRequired,\n onShowPlanModal: PropTypes.func.isRequired,\n onShowDeleteModal: PropTypes.func.isRequired,\n};\n","import React from \"react\";\nimport moment from \"moment-timezone\";\nimport { sortByKey } from \"../../shared/Utilities\";\n\nconst autoPlanOptions = (plans = []) => {\n const options = plans.map((plan) => ({ label: plan.name, value: plan.id }));\n\n return sortByKey(options, \"label\");\n};\n\nconst dateTimeFormat = \"MM/DD/YYYY hh:mm a z\";\nconst timeFormat = \"hh:mm a z\";\n\nconst getActionById = (id, assignedPlan) =>\n assignedPlan.assigned_actions.filter((action) => action.id === id)[0];\n\nconst getAutoPlanActionById = (id, autoPlan) => autoPlan.actions.filter((action) => action.id === id)[0];\n\nconst formattedTime = (datetime) => moment(datetime).tz(Brivity.LocalTimeZone).format(timeFormat);\n\nconst determineActionInDisplay = (assignedPlan, activeAssignedActionId) => {\n if (!assignedPlan || !assignedPlan.assigned_actions) {\n return undefined;\n }\n if (activeAssignedActionId) {\n return getActionById(activeAssignedActionId, assignedPlan);\n }\n const sortedActions = sortByKey(assignedPlan.assigned_actions, \"run_at\");\n const action = sortedActions.filter((sortedAction) => sortedAction.state === \"started\")[0];\n return action || sortedActions[0];\n};\n\nconst filterAssignedPlans = (assignedPlans, showCompletedPlans, showDeletedPlans) => {\n const plans = assignedPlans || [];\n return plans.filter(\n (plan) =>\n (plan.state !== \"deleted\" || showDeletedPlans) && (plan.state !== \"completed\" || showCompletedPlans),\n );\n};\n\nconst agentNameLabel = (id, agents = []) => {\n const agent = agents.filter((a) => a.uuid === id)[0];\n return agent ? agent.full_name : \"\";\n};\n\nconst roleTypeLabel = (role) => {\n if (role === \"primary_agent\") {\n return \"Primary Agent\";\n }\n if (role === \"owner\") {\n return \"Account Owner\";\n }\n return \"\";\n};\n\nconst fromUserLabel = (action, agents) => {\n const user = action.agent_id ? agentNameLabel(action.agent_id, agents) : roleTypeLabel(action.agent_role);\n return {user};\n};\n\nconst runAtLabel = (actionType, state) => {\n if (actionType === \"Task\") {\n return state === \"completed\" ? \"Completed At\" : \"Due By\";\n }\n return state === \"completed\" ? \"Sent At\" : \"Send At\";\n};\n\nconst runAtValue = (runAt, state, completedAt) => {\n if (!runAt) {\n return \"\";\n }\n const date = state === \"completed\" && completedAt ? completedAt : runAt;\n return moment(date).tz(Brivity.LocalTimeZone).format(dateTimeFormat);\n};\n\nconst visibilityLabel = (visible) => (visible ? \"Visible to viewers\" : \"Hidden from viewers\");\n\nexport {\n determineActionInDisplay,\n dateTimeFormat,\n timeFormat,\n formattedTime,\n getActionById,\n getAutoPlanActionById,\n filterAssignedPlans,\n fromUserLabel,\n runAtLabel,\n runAtValue,\n visibilityLabel,\n autoPlanOptions,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Modal from \"@shared/v2/Modal\";\nimport Error from \"@shared/Error\";\nimport Button from \"@shared/v2/Button\";\n\nconst DeleteActionModal = ({\n isDeleteAssignedActionModalOpen,\n isDeletingAction,\n closeModal,\n action,\n onActionDelete,\n assignedPlanName,\n hasError,\n errorMessage,\n}) => {\n const assignedActionPath = `/assigned_plans/${action.assigned_plan_id}/assigned_actions/${action.id}`;\n\n return (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n onShowPlanModal(assignedPlan)}>\n {assignedPlan.name}\n \n
\n \n \n {assignedPlan.total_completed_actions} / {assignedPlan.assigned_actions_count} completed\n
\n \n {assignedPlan.state !== \"deleted\" && assignedPlan.next_action_description}\n
\n \n
\n \n {assignedPlan.state === \"paused\" && (\n
\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n \n
\n )}\n {assignedPlan.state === \"started\" && (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n \n
\n )}\n {assignedPlan.state !== \"deleted\" && assignedPlan.state !== \"completed\" && (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n onShowDeleteModal(assignedPlan)} />\n
\n )}\n \n \n Please note that{\" \"}\n \n {action.type}: {action.name}{\" \"}\n \n is generated from action plan "{assignedPlanName}" \n and deleting this action will delete all tasks and interactions contingent on that.\n \n
\n {action && action.descendants && action.descendants.length > 0 && (\n\n
\n )}\n The following actions will also be deleted if this action is removed.
\n\n {action.descendants.map((descendant) => (\n\n \n {descendant.type}: {descendant.name}\n \n
\n ))}\n\n Deleting an auto plan from a contact will delete all incomplete tasks and interactions generated by\n this plan. You are still able to keep track of all completed tasks.\n
\n\n {icon && }\n
\n);\n\nexport default Circle;\n","import React from 'react';\nimport moment from 'moment-timezone';\n\nconst timeWithZoneFormat = 'hh:mm a z';\n\nconst formattedTimeFromUtcDateTimeString = (dateTimeString) => {\n return dateTimeString ? moment(dateTimeString).tz(Brivity.LocalTimeZone).format(timeWithZoneFormat) : null;\n}\n\nconst formattedTimeFromUtcTimeString = (timeString) => {\n const utcTimeObject = moment.utc(`2017-01-01 ${timeString}`, 'YYYY-MM-DD HH:mm');\n const localTimeObject = utcTimeObject.tz(Brivity.LocalTimeZone);\n return localTimeObject.format(timeWithZoneFormat);\n}\n\nexport {\n formattedTimeFromUtcDateTimeString,\n formattedTimeFromUtcTimeString,\n timeWithZoneFormat,\n};\n","import moment from \"moment-timezone\";\nimport { formattedTimeFromUtcDateTimeString, formattedTimeFromUtcTimeString } from \"../../shared/TimeHelpers\";\nimport { toTitleCase } from \"../../shared/Utilities\";\n\nconst actionLookup = (actions, id) => actions && actions.find((action) => action.id === id);\n\nconst delayUnits = { seconds: \"second\", minutes: \"minute\", hours: \"hours\", days: \"day\" };\n\nconst generateTimeString = (action) => {\n if (action.run_at) {\n return formattedTimeFromUtcDateTimeString(action.run_at);\n }\n if (action.run_time) {\n return formattedTimeFromUtcTimeString(action.run_time);\n }\n return undefined;\n};\n\nconst actionSubtitleForEvent = (action) => {\n const atOrBy = action.type === \"Task\" ? \"by\" : \"at\";\n let when = \"\";\n let delayUnitLabel = \"\";\n let dayLabel = \"\";\n const timeToRun = generateTimeString(action);\n\n if (action.delay > 0) {\n dayLabel = `${action.delay} `;\n when = ` after ${atOrBy} `;\n delayUnitLabel = delayUnits[action.delay_unit] + (action.delay > 1 ? \"s\" : \"\");\n } else if (action.delay < 0) {\n dayLabel = `${Math.abs(action.delay)} `;\n when = ` before ${atOrBy} `;\n delayUnitLabel = delayUnits[action.delay_unit] + (action.delay < -1 ? \"s\" : \"\");\n }\n\n return `${dayLabel}${delayUnitLabel} ${when} ${timeToRun}`;\n};\n\nconst actionSubtitle = (action) => {\n if (action.schedule_type === \"event\" && !action.failed_message) {\n return actionSubtitleForEvent(action);\n }\n if (action.run_at) {\n return formattedTimeFromUtcDateTimeString(action.run_at);\n }\n return undefined;\n};\n\nconst iconOptions = (type) => {\n switch (type) {\n case \"Text\":\n return \"fa fa-commenting-o\";\n case \"Task\":\n return \"fa fa-list\";\n case \"Email\":\n return \"fa fa-envelope\";\n default:\n return \"\";\n }\n};\n\nconst dateLabel = (date) => {\n if (date === \"Events\") {\n return \"Event Based\";\n }\n const today = moment().tz(Brivity.LocalTimeZone).format(\"MM/DD/YYYY\");\n const dateString = moment(date).format(\"MM/DD/YYYY\");\n return today === dateString ? \"Today\" : dateString;\n};\n\nconst eventDetailString = (action) => {\n const atOrBy = action.type === \"Task\" ? \"by\" : \"at\";\n let when = \"\";\n let delayUnitLabel = \"\";\n let dayLabel = \"\";\n const timeToRun = generateTimeString(action);\n\n if (action.delay === 0) {\n when = \"on \";\n } else if (action.delay > 0) {\n when = \"after \";\n delayUnitLabel = delayUnits[action.delay_unit] + (action.delay > 1 ? \"s\" : \"\");\n dayLabel = `${action.delay} `;\n } else {\n when = \"before \";\n dayLabel = `${Math.abs(action.delay)} `;\n delayUnitLabel = delayUnits[action.delay_unit] + (action.delay < -1 ? \"s\" : \"\");\n }\n return `${dayLabel}${delayUnitLabel} ${when} ${toTitleCase(action.milestone_name)} ${atOrBy} ${timeToRun}`;\n};\n\nexport { actionLookup, actionSubtitle, dateLabel, delayUnits, eventDetailString, iconOptions };\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { runAtLabel, runAtValue } from \"./helpers\";\nimport { eventDetailString } from \"./AssignedPlanDetailHelpers\";\n\nconst InteractionDetail = ({ action, parentAction }) => (\n \n
\n \n);\n\nexport default InteractionDetail;\n\nInteractionDetail.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n action: PropTypes.objectOf(PropTypes.any).isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n parentAction: PropTypes.objectOf(PropTypes.any).isRequired,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { toTitleCase } from \"../../shared/Utilities\";\n\nconst dayLabels = {\n 0: \"Sunday\",\n 1: \"Monday\",\n 2: \"Tuesday\",\n 3: \"Wednesday\",\n 4: \"Thursday\",\n 5: \"Friday\",\n 6: \"Saturday\",\n};\n\nconst recursRemaininglabel = (amount) => {\n // eslint-disable-next-line eqeqeq\n if (amount == 0 || amount) {\n return `${amount} more times`;\n }\n return \"Never ending\";\n};\n\nconst recurringTypelabel = (type, onDaysOfFrequency = null) => {\n if (type === \"every\") {\n return `Every ${onDaysOfFrequency} days`;\n }\n\n return toTitleCase(type);\n};\n\nconst recurringOnlabel = (type, onDaysOfFrequency) => {\n if (!onDaysOfFrequency || onDaysOfFrequency.length < 1) {\n return \"\";\n }\n\n if (type === \"weekly\") {\n return `On ${onDaysOfFrequency.map((day) => dayLabels[day]).join(\", \")}`;\n }\n if (type === \"monthly\") {\n return `On Month Days: ${onDaysOfFrequency.join(\", \")}`;\n }\n return \"\";\n};\n\nexport const RecurringDetailInnerFields = ({ recurringFrequency, recurringDaysOfFrequency, recurringLimit }) => (\n <>\n \n
\n \n \n
\n {action.assigned_to_label}
\n \n \n
\n\n {parentAction && action.contingent && (\n {action.assigned_for_label}
\n \n \n
\n )}\n {parentAction.name}
\n \n
\n\n \n \n
\n\n {action.milestone_name && (\n {runAtValue(action.run_at, action.state, action.completed_at)}
\n \n \n
\n )}\n {eventDetailString(action)}
\n \n {action.type === \"Email\" && (\n
\n )}\n \n
\n )}\n {action.type === \"Text\" && (\n \n
\n {action.name}
\n \n {action.state === \"failed\" && action.failed_message}\n
\n \n \n
\n \n {action.state === \"failed\" && action.failed_description && (\n
\n )}\n \n \n
\n \n {action.failed_description_type === \"error\" ? \"Text Failure\" : \"Possible Failure\"}\n
\n{action.failed_description}
\n\n
\n {action.template_body}
\n\n {action.state === \"failed\" && action.failed_message}\n
\n {recurringTypelabel(recurringFrequency, recurringDaysOfFrequency)}
\n {recurringOnlabel(recurringFrequency, recurringDaysOfFrequency)}
\n {recursRemaininglabel(recurringLimit)}
\n \n);\n\nconst RecurringDetail = ({ recurringFrequency, recurringDaysOfFrequency, recurringLimit }) => (\n \n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n \n
\n);\n\nexport default RecurringDetail;\n\nRecurringDetail.propTypes = {\n recurringFrequency: PropTypes.string.isRequired,\n recurringDaysOfFrequency: PropTypes.arrayOf(PropTypes.number).isRequired,\n recurringLimit: PropTypes.number.isRequired,\n};\n\nRecurringDetailInnerFields.propTypes = RecurringDetail.propTypes;\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport React from \"react\";\nimport Linkify from \"linkify-react\";\nimport PropTypes from \"prop-types\";\nimport { runAtLabel, runAtValue, visibilityLabel } from \"./helpers\";\nimport { eventDetailString } from \"./AssignedPlanDetailHelpers\";\nimport RecurringDetail from \"./RecurringDetail\";\n\nconst TaskDetail = ({ action, parentAction, planType }) => (\n \n
\n \n
\n);\n\nexport default TaskDetail;\n\nTaskDetail.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n action: PropTypes.objectOf(PropTypes.any).isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n parentAction: PropTypes.objectOf(PropTypes.any).isRequired,\n planType: PropTypes.string.isRequired,\n};\n","/* eslint-disable class-methods-use-this */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Button from \"@shared/v2/Button\";\nimport Circle from \"@shared/Circle\";\nimport { toTitleCase, sortByKey } from \"../../shared/Utilities\";\nimport \"./AssignedPlans.scss\";\nimport { determineActionInDisplay, getActionById } from \"./helpers\";\nimport InteractionDetail from \"./InteractionDetail\";\nimport TaskDetail from \"./TaskDetail\";\nimport { actionLookup, actionSubtitle, dateLabel, iconOptions } from \"./AssignedPlanDetailHelpers\";\n\nclass AssignedPlanDetail extends React.Component {\n circlePropsFromState = (action, assignedPlanState) => {\n const additionalClass = action.overdue && action.type === \"Task\" ? \"overdue\" : \"\";\n\n if (action.state === \"completed\") {\n return {\n icon: \"fa fa-check text-white\",\n circleStyle: \"tw-bg-theme-primary\",\n };\n }\n if (assignedPlanState === \"deleted\") {\n return {\n icon: \"fa fa-trash text-gray\",\n circleStyle: \"deleted\",\n };\n }\n if (action.state === \"failed\") {\n return {\n icon: \"fa fa-close text-white\",\n circleStyle: \"tw-bg-brand-danger\",\n };\n }\n return {\n icon: `${iconOptions(action.type)} text-gray`,\n circleStyle: `tw-border-solid tw-border-[1px] tw-border-gray-15 ${additionalClass}`,\n };\n };\n\n restartButtonText = (type) => (type === \"Task\" ? \"Retry\" : \"Send Now\");\n\n markAsComplete(id, assignedPlanId) {\n const { onActionUpdate } = this.props;\n onActionUpdate(`/assigned_plans/${assignedPlanId}/assigned_actions/${id}/mark_complete`);\n }\n\n restartAssignedAction(id, assignedPlanId) {\n const { onActionUpdate } = this.props;\n onActionUpdate(`/assigned_plans/${assignedPlanId}/assigned_actions/${id}/restart`);\n }\n\n canRestartAction(action = {}) {\n const { assignedPlan } = this.props;\n const { type, state } = action;\n\n if (assignedPlan.state === \"started\" && type === \"Task\" && state === \"failed\") {\n return true;\n }\n\n if (assignedPlan.state === \"started\" && type !== \"Task\" && state !== \"completed\") {\n return true;\n }\n\n return false;\n }\n\n renderActionGroup(groupType, actions, subGroupType, actionInDisplayId) {\n const groupLabel = groupType === \"days\" ? dateLabel(subGroupType) : toTitleCase(subGroupType);\n const sortByField = groupType === \"days\" ? \"run_at\" : \"sort_key\";\n\n return (\n \n
\n\n \n \n
\n \n {runAtValue(action.run_at, action.state, action.completed_at)}\n {action.overdue && (\n \n Overdue\n \n )}\n
\n \n \n
\n {action.assigned_to_label}
\n \n {parentAction && action.contingent && (\n
\n \n \n
\n )}\n {parentAction.name}
\n \n
\n\n \n \n
\n\n {planType === \"transactions\" && (\n {action.priority}
\n \n \n
\n )}\n\n {action.milestone_name && (\n {visibilityLabel(action.visibility)}
\n \n \n
\n )}\n\n {action.recurring_frequency !== \"never\" && (\n {eventDetailString(action)}
\n \n
\n )}\n \n
\n\n \n \n
\n {action.name}
\n {action.state === \"failed\" && action.failed_message}
\n \n
\n \n
\n \n {action.instructions && (\n
\n \n
\n )}\n {action.note && (\n \n \n \n {action.instructions}\n \n
\n \n
\n )}\n \n \n \n {action.note}\n \n
\n {groupLabel}
\n\n {sortByKey(actions, sortByField)\n .sort((a, b) => ((a.position || 0) > (b.position || 0) ? 1 : -1))\n .map((action) => this.renderAction(action.id, actionInDisplayId))}\n \n
\n \n );\n }\n\n render() {\n const { assignedPlan, onShowDeleteModal, activeAssignedActionId, isAssignedActionUpdating } = this.props;\n const actionInDisplay = determineActionInDisplay(assignedPlan, activeAssignedActionId);\n const parentAction = actionInDisplay\n ? getActionById(actionInDisplay.parent_action_id, assignedPlan)\n : null;\n\n return (\n \n {action.type}: \n {action.name}\n
\n \n {actionSubtitle(action)}\n {action.failed_message}\n {action.overdue && action.type === \"Task\" && \"Overdue\"}\n
\n \n
\n );\n }\n}\n\nexport default AssignedPlanDetail;\n\nAssignedPlanDetail.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n assignedPlan: PropTypes.objectOf(PropTypes.any).isRequired,\n onShowDeleteModal: PropTypes.func.isRequired,\n onActionUpdate: PropTypes.func.isRequired,\n activeAssignedActionId: PropTypes.string.isRequired,\n isAssignedActionUpdating: PropTypes.bool.isRequired,\n previewAssignedAction: PropTypes.func.isRequired,\n markAsComplete: PropTypes.func.isRequired,\n restartAssignedAction: PropTypes.func.isRequired,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport IconButton from \"../../../../shared/v2/IconButton\";\nimport { Pause, Play, Spinner, Trash } from \"../../../../shared/v2/Icomoon\";\n\nexport const PlayOrPauseButton = ({ isLoading, isPaused, onClick }) => {\n const PlayOrPauseIcon = isPaused ? Play : Pause;\n return (\n \n {assignedPlan?.assigned_actions &&\n Object.keys(assignedPlan.grouped_actions)\n .sort()\n .map((groupType) => {\n const group = assignedPlan.grouped_actions[groupType];\n return Object.keys(group)\n .sort()\n .map((subGroupKey) =>\n this.renderActionGroup(groupType, group[subGroupKey], subGroupKey, actionInDisplay.id),\n );\n })}\n
\n\n \n {actionInDisplay && (\n <>\n
\n \n {(actionInDisplay.type === \"Email\" || actionInDisplay.type === \"Text\") && (\n
\n\n \n
\n \n )}\n \n {(assignedPlan.state === \"started\" || assignedPlan.state === \"paused\") &&\n actionInDisplay.state !== \"completed\" && (\n onShowDeleteModal(actionInDisplay)}\n >\n Delete\n \n )}\n
\n\n \n {assignedPlan.state === \"started\" && actionInDisplay.type !== \"Task\" && (\n \n this.markAsComplete(actionInDisplay.id, actionInDisplay.assigned_plan_id)\n }\n >\n Mark as Complete\n \n )}\n\n {this.canRestartAction(actionInDisplay) && (\n \n this.restartAssignedAction(actionInDisplay.id, actionInDisplay.assigned_plan_id)\n }\n >\n {this.restartButtonText(actionInDisplay.type)}\n \n )}\n
\n \n updatePlanState(assignedPlan.state === \"paused\" ? \"started\" : \"paused\")}\n />\n showDeleteAssignedPlanModal(assignedPlan)} />\n
\n )}\n \n }\n />\n\n \n
\n \n );\n }\n\n renderActionGroup(groupType, actions, subGroupType, actionInDisplayId) {\n const groupLabel = groupType === \"days\" ? dateLabel(subGroupType) : toTitleCase(subGroupType);\n const sortByField = groupType === \"days\" ? \"run_at\" : \"sort_key\";\n\n return (\n \n {`${action.type}: `}\n {action.name}\n
\n \n {actionSubtitle(action)}\n {action.failed_message}\n {action.overdue && action.type === \"Task\" && \"Overdue\"}\n
\n \n
\n );\n }\n\n render() {\n const { autoPlanPreview, activeAutoPlanActionId } = this.props;\n const actionInDisplay =\n autoPlanPreview?.actions &&\n (getAutoPlanActionById(activeAutoPlanActionId, autoPlanPreview) ||\n autoPlanPreview.actions.sortBy(\"run_at\")[0]);\n const parentAction = actionInDisplay\n ? getAutoPlanActionById(actionInDisplay.parent_action_id, autoPlanPreview)\n : null;\n\n return (\n {groupLabel}
\n\n {\n sortByKey(actions, sortByField)\n .sort((a, b) => ((a.position || 0) > (b.position || 0)) ? 1 : -1)\n .map((action) => this.renderAction(action.id, actionInDisplayId))\n }\n \n
\n );\n }\n}\n\nexport default AssignedPlanDetailPreview;\n\nAssignedPlanDetailPreview.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n autoPlanPreview: PropTypes.objectOf(PropTypes.any).isRequired,\n activeAutoPlanActionId: PropTypes.string.isRequired,\n previewAutoPlanAction: PropTypes.func.isRequired,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Modal from \"@shared/v2/Modal\";\nimport AssignedPlanDetailPreview from \"./AssignedPlanDetailPreview\";\n\nconst PlanModalPreview = ({\n closeModal,\n isPlanPreviewModalOpen,\n autoPlanPreview,\n previewAutoPlanAction,\n activeAutoPlanActionId,\n}) => (\n \n
\n \n
\n \n {autoPlanPreview &&\n autoPlanPreview.actions &&\n autoPlanPreview.grouped_actions &&\n Object.keys(autoPlanPreview.grouped_actions)\n .sort()\n .map((groupType) => {\n const group = autoPlanPreview.grouped_actions[groupType];\n return Object.keys(group)\n .sort()\n .map((subGroupKey) =>\n this.renderActionGroup(\n groupType,\n group[subGroupKey],\n subGroupKey,\n actionInDisplay.id,\n ),\n );\n })}\n
\n \n {actionInDisplay && (\n
\n \n {(actionInDisplay.type === \"Email\" || actionInDisplay.type === \"Text\") && (\n
\n )}\n \n \n Preview\n \n\n \n Apply\n \n
\n \n }\n closeOnClickOutside\n closeOnEscape\n >\n {message}
;\n\n renderLoadingState = () => Loading Auto Plans..
;\n\n renderTableMessage(hasFilteredPlans) {\n const { platformAccount, assignedPlans, isFetchingAssignedPlans, planType } = this.props;\n const hasPlans = assignedPlans && assignedPlans.length > 0;\n\n if (!platformAccount) {\n return this.renderEmptyState(\n \"Auto Plans is an exclusive Brivity Platform feature - call (866) 295-3322 and sign up today, or learn about the Brivity Platform in a 15 minute demo webinar.\",\n );\n }\n if (!hasPlans && !isFetchingAssignedPlans) {\n return this.renderEmptyState(emptyPlanTypeMessage[planType]);\n }\n if (!hasPlans && isFetchingAssignedPlans) {\n return this.renderLoadingState();\n }\n if (hasPlans && !isFetchingAssignedPlans && !hasFilteredPlans) {\n return this.renderEmptyState(\"No plans match the filtered criteria\");\n }\n return \"\";\n }\n\n render() {\n const {\n assignedPlans,\n showApplyModal,\n updateAssignedPlan,\n showPlanModal,\n toggleDeletedPlans,\n showDeletedPlans,\n toggleCompletedPlans,\n showDeleteAssignedPlanModal,\n showCompletedPlans,\n platformAccount,\n } = this.props;\n\n const filteredAssignedPlans = filterAssignedPlans(assignedPlans, showCompletedPlans, showDeletedPlans);\n const hasFilteredPlans = filteredAssignedPlans && filteredAssignedPlans.length > 0;\n\n return (\n \n
\n );\n }\n}\n\nexport default AssignedPlansTable;\n\nAssignedPlansTable.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n assignedPlans: PropTypes.arrayOf(PropTypes.any).isRequired,\n showApplyModal: PropTypes.func.isRequired,\n updateAssignedPlan: PropTypes.func.isRequired,\n showPlanModal: PropTypes.func.isRequired,\n toggleDeletedPlans: PropTypes.func.isRequired,\n showDeletedPlans: PropTypes.bool.isRequired,\n toggleCompletedPlans: PropTypes.func.isRequired,\n showCompletedPlans: PropTypes.bool.isRequired,\n showDeleteAssignedPlanModal: PropTypes.func.isRequired,\n isFetchingAssignedPlans: PropTypes.bool.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n platformAccount: PropTypes.objectOf(PropTypes.any).isRequired,\n planType: PropTypes.string.isRequired,\n isApplyModalOpen: PropTypes.bool.isRequired,\n isPlanModalOpen: PropTypes.bool.isRequired,\n isDeleteAssignedActionModalOpen: PropTypes.bool.isRequired,\n isDeletePlanModalOpen: PropTypes.bool.isRequired,\n isPlanPreviewModalOpen: PropTypes.bool.isRequired,\n getAssignedPlans: PropTypes.func.isRequired,\n assignedPlansPath: PropTypes.string.isRequired,\n assignableId: PropTypes.string.isRequired,\n assignableType: PropTypes.string.isRequired,\n};\n","import { connect } from 'react-redux';\nimport AssignedPlansTable from '../components/AssignedPlansTable';\nimport * as actions from '../actions/assignedPlansCreators';\n\n// Which part of the Redux global state does our component want to receive as props?\nconst mapStateToProps = (state) => ({...state.assignedPlans });\n\n// Don't forget to actually use connect!\n// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples\nexport default connect(mapStateToProps, actions)(AssignedPlansTable);\n","import React, { useMemo } from \"react\";\nimport { Provider } from \"react-redux\";\nimport configureStore from \"../../store/configureStore\";\nimport AssignedPlansContainer from \"../containers/AssignedPlansContainer\";\n\n// See documentation for https://github.com/reactjs/react-redux.\n// This is how you get props from the Rails view into the redux store.\n// This code here binds your smart component to the redux store.\n// railsContext provides contextual information especially useful for server rendering, such as\n// knowing the locale. See the React on Rails documentation for more info on the railsContext\nconst AssignedPlansApp = (props) => {\n const store = useMemo(() => configureStore(props), []);\n return (\n \n
\n \n
\n \n
\n \n NEW Auto Plans\n
\n \n
\n Status
\n \n
\n Progress
\n \n
\n Next Due Action
\n \n \n Get a Demo\n \n )}\n {platformAccount && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n \n {\" \"}\n Add Auto Plan\n \n )}\n
\n \n {assignedPlans && assignedPlans.length > 0 && (\n
\n {!platformAccount && (\n \n \n Show Deleted\n \n
\n )}\n {assignedPlans && assignedPlans.length > 0 && (\n \n \n Show Completed\n \n
\n )}\n \n {this.renderTableMessage(hasFilteredPlans)}\n\n {filteredAssignedPlans?.map((plan) => (\n
\n {this.isModalOpen() && this.renderModal()}\n \n
\n );\n }\n}\n\nexport default AssignedPlansCard;\n\nAssignedPlansCard.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n assignedPlans: PropTypes.arrayOf(PropTypes.any).isRequired,\n getAssignedPlans: PropTypes.func.isRequired,\n onShowApplyModal: PropTypes.func.isRequired,\n onShowDeletePlanModal: PropTypes.func.isRequired,\n onShowPlanModal: PropTypes.func.isRequired,\n onUpdate: PropTypes.func.isRequired,\n showCompletedPlans: PropTypes.bool.isRequired,\n showDeletedPlans: PropTypes.bool.isRequired,\n toggleCompletedPlans: PropTypes.func.isRequired,\n toggleDeletedPlans: PropTypes.func.isRequired,\n};\n","/* eslint-disable class-methods-use-this */\n/* global soe */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Modal from \"@shared/v2/Modal\";\nimport Tooltip from \"@shared/v2/Tooltip\";\nimport \"./AssignedPlans.scss\";\nimport AssignedPlansCard from \"./AssignedPlansCard\";\nimport \"./AssignedPlansCard.scss\";\nimport {\n renderApplyModal,\n renderDeleteActionModal,\n renderPlanModal,\n renderDeletePlanModal,\n renderPlanPreviewModal,\n} from \"./ModalHelpers\";\n\nclass AssignedPlansPreview extends React.Component {\n componentDidMount() {\n const { platformAccount } = this.props;\n if (!platformAccount) Brivity.AccountsAppstore.start();\n }\n\n stateDescription = (state) => {\n if (state === \"running\") {\n return \"Applied auto plan(s) running\";\n }\n if (state === \"empty\") {\n return \"No auto plan applied\";\n }\n if (state === \"completed\") {\n return \"Applied auto plan(s) completed\";\n }\n if (state === \"paused\") {\n return \"Applied auto plan(s) paused\";\n }\n if (state === \"deleted\") {\n return \"Applied auto plan(s) deleted\";\n }\n return \"\";\n };\n\n handleOpenPlans = () => {\n const { platformAccount, showPlansModal } = this.props;\n if (platformAccount) showPlansModal();\n if (!platformAccount) soe.toggleLightBox(\"brivitysales\");\n };\n\n stateTooltip(state) {\n const { platformAccount } = this.props;\n if (!platformAccount) {\n return \n
\n \n
\n \n
\n\n {assignedPlans &&\n filtertedAssignedPlans.map((plan) => (\n {`Assigned Plans (${this.safeCount(\n filtertedAssignedPlans,\n )})`}
\n \n {assignedPlans?.length > 0 && (\n Add New Plan \n
\n \n
\n )}\n {assignedPlans?.length > 0 && (\n \n
\n )}\n \n
\n ))}\n {assignedPlans && filtertedAssignedPlans.length === 0 && (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n
\n onShowPlanModal(plan)}>\n {plan.name}\n
\n \n \n
\n {this.whenStateChangedLabel(plan)}
\n Auto Plan
\n \n {plan.total_completed_actions} of {plan.assigned_actions_count} completed\n
\n Next: {plan.next_action_description}
\n \n {plan.state === \"paused\" && (\n
\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n
\n )}\n {plan.state === \"started\" && (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n
\n )}\n {this.canDeletePlan(plan.state) && (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n onShowDeletePlanModal(plan)}\n />\n
\n )}\n \n
\n )}\n \n {this.emptyPlansLabel(filtertedAssignedPlans.length)}\n
\n Brivity Platform feature - Get a Demo
;\n }\n\n return (\n \n \n {this.stateDescription(state)}\n
\n );\n }\n\n stateOfAssignedPlans() {\n // TODO: disabled eqeqeq for numbers, need further investigation to make sure we are always comparing numbers and not strings\n const { assignedPlansState } = this.props;\n // eslint-disable-next-line eqeqeq\n if (assignedPlansState == 0 || assignedPlansState === \"assigned_plans_none\") {\n return \"empty\";\n }\n // eslint-disable-next-line eqeqeq\n if (assignedPlansState == 1 || assignedPlansState === \"assigned_plans_running\") {\n return \"running\";\n }\n // eslint-disable-next-line eqeqeq\n if (assignedPlansState == 2 || assignedPlansState === \"assigned_plans_paused\") {\n return \"paused\";\n }\n // eslint-disable-next-line eqeqeq\n if (assignedPlansState == 3 || assignedPlansState === \"assigned_plans_completed\") {\n return \"completed\";\n }\n // eslint-disable-next-line eqeqeq\n if (assignedPlansState == 4 || assignedPlansState === \"assigned_plans_deleted\") {\n return \"deleted\";\n }\n return \"empty\";\n }\n\n renderPlansModal() {\n const {\n isPlansModalOpen,\n assignedPlans,\n closeModal,\n assignableName,\n updateAssignedPlan,\n showApplyModal,\n showPlanModal,\n toggleCompletedPlans,\n toggleDeletedPlans,\n showCompletedPlans,\n showDeletedPlans,\n showDeleteAssignedPlanModal,\n getAssignedPlans: _getAssignedPlans,\n assignedPlansPath,\n assignableId,\n assignableType,\n } = this.props;\n\n const getAssignedPlans = () => {\n _getAssignedPlans(assignedPlansPath, assignableId, assignableType);\n };\n\n return (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n \n
\n {this.renderModal()}\n \n );\n }\n}\n\nexport default AssignedPlansPreview;\n\nAssignedPlansPreview.propTypes = {\n assignableId: PropTypes.string.isRequired,\n assignableName: PropTypes.string.isRequired,\n assignableType: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n assignedPlans: PropTypes.arrayOf(PropTypes.any).isRequired,\n assignedPlansPath: PropTypes.string.isRequired,\n assignedPlansState: PropTypes.string.isRequired,\n closeModal: PropTypes.func.isRequired,\n getAssignedPlans: PropTypes.func.isRequired,\n isApplyModalOpen: PropTypes.bool.isRequired,\n isDeleteAssignedActionModalOpen: PropTypes.bool.isRequired,\n isDeletePlanModalOpen: PropTypes.bool.isRequired,\n isPlanModalOpen: PropTypes.bool.isRequired,\n isPlanPreviewModalOpen: PropTypes.bool.isRequired,\n isPlansModalOpen: PropTypes.bool.isRequired,\n platformAccount: PropTypes.bool.isRequired,\n showApplyModal: PropTypes.func.isRequired,\n showCompletedPlans: PropTypes.bool.isRequired,\n showDeleteAssignedPlanModal: PropTypes.func.isRequired,\n showDeletedPlans: PropTypes.bool.isRequired,\n showPlanModal: PropTypes.func.isRequired,\n showPlansModal: PropTypes.func.isRequired,\n toggleCompletedPlans: PropTypes.func.isRequired,\n toggleDeletedPlans: PropTypes.func.isRequired,\n updateAssignedPlan: PropTypes.func.isRequired,\n};\n","import { connect } from 'react-redux';\nimport AssignedPlansPreview from '../components/AssignedPlansPreview';\nimport * as actions from '../actions/assignedPlansCreators';\n\n// Which part of the Redux global state does our component want to receive as props?\nconst mapStateToProps = (state) => ({...state.assignedPlans });\n\n// Don't forget to actually use connect!\n// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples\nexport default connect(mapStateToProps, actions)(AssignedPlansPreview);\n","import React, { useMemo } from \"react\";\nimport { Provider } from \"react-redux\";\nimport configureStore from \"../../store/configureStore\";\nimport AssignedPlansPreviewContainer from \"../containers/AssignedPlansPreviewContainer\";\n\n// See documentation for https://github.com/reactjs/react-redux.\n// This is how you get props from the Rails view into the redux store.\n// This code here binds your smart component to the redux store.\n// railsContext provides contextual information especially useful for server rendering, such as\n// knowing the locale. See the React on Rails documentation for more info on the railsContext\nconst AssignedPlansPreviewApp = (props) => {\n const store = useMemo(() => configureStore(props), []);\n return (\n \n {isEditingName ? (\n
\n );\n }\n}\n\nexport default AutoPlanNameForm;\n\nAutoPlanNameForm.propTypes = {\n isEditingName: PropTypes.bool.isRequired,\n name: PropTypes.string.isRequired,\n toggleEdit: PropTypes.func.isRequired,\n updateName: PropTypes.func.isRequired,\n handleNameChange: PropTypes.func.isRequired,\n};\n","import React, { useEffect, useState } from \"react\";\n\n\nexport const SUBJECT_LINE_LIMIT_ERROR = \"Subject must be 200 characters or less. Please revise.\";\n\nexport const isWithinSubjectLineLimit = (str = '') => str.length <= 200;\n\nexport default () => {\n const [errorMsg, setErrorMsg] = useState(null);\n const [errorTrigger, setErrorTrigger] = useState(false);\n\n useEffect(() => {\n setErrorMsg(errorTrigger ? SUBJECT_LINE_LIMIT_ERROR : null)\n }, [errorTrigger]);\n\n return {\n errorMsg,\n setErrorTrigger,\n }\n}","/* eslint-disable import/prefer-default-export */\nimport axios from \"axios\";\n\nconst fetchAutoPlan = () => ({\n type: \"FETCH_AUTO_PLAN\",\n});\n\nconst fetchAutoPlanSuccess = (data) => ({\n type: \"FETCH_AUTO_PLAN_SUCCESS\",\n autoPlan: data.auto_plan,\n timeline: data.timeline,\n});\n\nexport const toggleEdit = () => ({\n type: \"IS_EDITING_NAME\",\n});\n\nexport const toggleTaskInstructions = () => ({\n type: \"SHOW_INSTRUCTIONS\",\n});\n\nexport const toggleTaskNote = () => ({\n type: \"SHOW_TASK_NOTE\",\n});\n\nexport const handleAutoPlanChange = (name, value) => ({\n type: \"UPDATE_AUTO_PLAN_VALUE\",\n name,\n value,\n});\n\nexport const openDeleteActionModal = (activeActionId) => ({\n type: \"OPEN_DELETE_ACTION_MODAL\",\n activeActionId,\n});\n\nexport const closeDeleteActionModal = () => ({\n type: \"CLOSE_DELETE_ACTION_MODAL\",\n});\nexport const openNewActionModal = (actionForm) => ({\n type: \"OPEN_NEW_ACTION_MODAL\",\n actionForm,\n});\n\nexport const closeNewActionModal = () => ({\n type: \"CLOSE_NEW_ACTION_MODAL\",\n});\n\nexport const openEditActionModal = (action) => ({\n type: \"OPEN_EDIT_ACTION_MODAL\",\n actionForm: action,\n});\n\nexport const closeEditActionModal = () => ({\n type: \"CLOSE_EDIT_ACTION_MODAL\",\n});\n\nexport const updateActionValues = (name, value) => ({\n type: \"UPDATE_ACTION_VALUES\",\n name,\n value,\n});\n\nexport const updateActionManyValues = (formUpdates) => ({\n type: \"UPDATE_ACTION_FORM_MULTIPLE_VALUES\",\n formUpdates,\n});\n\nexport const submitActionPending = () => ({\n type: \"AUTO_PLAN_EDIT_ACTION_PENDING\",\n});\n\nexport const submitActionFailure = (errorMessage) => ({\n type: \"ACTION_FAILURE\",\n errorMessage,\n});\n\nconst createActionSuccess = (action) => ({\n type: \"ACTION_CREATE_SUCCESS\",\n action,\n});\n\nconst updateActionSuccess = (action) => ({\n type: \"ACTION_UPDATE_SUCCESS\",\n action,\n});\n\nexport const beginDeleteAction = () => ({\n type: \"ACTION_DELETE_PENDING\",\n});\n\nconst deleteActionSuccess = (actionId) => ({\n type: \"ACTION_DELETE_SUCCESS\",\n actionId,\n});\n\nconst updateAutoPlanNameSuccess = (autoPlan) => ({\n type: \"AUTO_PLAN_UPDATE_SUCCESS\",\n autoPlan,\n});\n\nconst updateAutoPlanPreferencesSuccess = (autoPlan) => ({\n type: \"AUTO_PLAN_PREFERENCES_UPDATE_SUCCESS\",\n autoPlan,\n});\n\nconst fetchActionSuccess = (activeAction) => ({\n type: \"FETCH_ACTION_SUCCESS\",\n activeAction,\n});\n\nexport const saveAutoPlanPreferences = (autoPlanUpdatePath, form) => (dispatch) => {\n axios\n .patch(autoPlanUpdatePath, { auto_plan: form, authenticity_token: ReactOnRails.authenticityToken() })\n .then((res) => dispatch(updateAutoPlanPreferencesSuccess(res.data.auto_plan)))\n .catch(() => {\n dispatch({\n type: \"AUTO_PLAN_FAILURE\",\n });\n });\n};\n\nexport const saveAutoPlanName = (autoPlanUpdatePath, autoPlan) => (dispatch) => {\n axios\n .patch(autoPlanUpdatePath, {\n auto_plan: autoPlan,\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((res) => dispatch(updateAutoPlanNameSuccess(res.data.auto_plan)))\n .catch(() => {\n dispatch({\n type: \"AUTO_PLAN_FAILURE\",\n });\n });\n};\n\nexport const getAutoPlan = (autoPlanPath) => async (dispatch) => {\n dispatch(fetchAutoPlan());\n try {\n const path = `${autoPlanPath}.json`;\n const res = await axios.get(path);\n await dispatch(fetchAutoPlanSuccess(res.data));\n } catch (err) {\n // need to revisit proper error handling, legacy didn't handle errors either\n dispatch({\n type: \"FETCH_AUTO_PLAN_FAILURE\",\n errors: err.message,\n isFetching: false,\n });\n }\n};\n\nexport const saveAction = (actionPath, action, autoPlanPath) => async (dispatch) => {\n dispatch(submitActionPending());\n try {\n const res = await axios.patch(actionPath, {\n auto_plan_action: action,\n authenticity_token: ReactOnRails.authenticityToken(),\n });\n\n if (autoPlanPath) {\n await dispatch(getAutoPlan(autoPlanPath));\n }\n dispatch(updateActionSuccess(res.data));\n } catch (err) {\n dispatch(submitActionFailure(err.response.data.message));\n }\n};\n\nexport const createAction = (actionPath, action, autoPlanPath) => async (dispatch) => {\n dispatch(submitActionPending());\n try {\n const res = await axios.post(actionPath, {\n auto_plan_action: action,\n authenticity_token: ReactOnRails.authenticityToken(),\n });\n\n if (autoPlanPath) {\n await dispatch(getAutoPlan(autoPlanPath));\n }\n dispatch(createActionSuccess(res.data));\n } catch (err) {\n dispatch(submitActionFailure(err.response.data.errors));\n }\n};\n\nexport const deleteAction = (path, actionId, autoPlanPath) => async (dispatch) => {\n dispatch(beginDeleteAction());\n try {\n await axios.delete(path, { params: { authenticity_token: ReactOnRails.authenticityToken() } });\n if (autoPlanPath) {\n await dispatch(getAutoPlan(autoPlanPath));\n dispatch(deleteActionSuccess(actionId));\n }\n } catch (err) {\n dispatch({ type: \"ACTION_FAILURE\" });\n }\n};\n\nexport const getAction = (actionPath) => (dispatch) => {\n axios\n .get(actionPath)\n .then((res) => dispatch(fetchActionSuccess(res.data)))\n .catch((err) => {\n dispatch({\n type: \"FETCH_ACTION_FAILURE\",\n errors: err.response.data.message,\n isFetching: false,\n });\n });\n};\n\nexport const updateAutoPlanPreferencesForm = (name, value) => ({\n type: \"AUTO_PLAN_PREFERENCES_FORM_UPDATE\",\n name,\n value,\n});\n\nexport const resetAutoPlanPreferencesForm = () => ({\n type: \"AUTO_PLAN_PREFERENCES_FORM_RESET\",\n});\n","import moment from \"moment-timezone\";\nimport { sortByKey } from \"../../shared/Utilities\";\n\nconst timeWithZoneFormat = \"hh:mm a z\";\nconst timeFormat = \"HH:mm\";\n\nconst priorityOptions = [\n { value: 1, label: \"1\" },\n { value: 2, label: \"2\" },\n { value: 3, label: \"3\" },\n { value: 4, label: \"4\" },\n { value: 5, label: \"5\" },\n { value: 6, label: \"6\" },\n { value: 7, label: \"7\" },\n { value: 8, label: \"8\" },\n { value: 9, label: \"9\" },\n];\n\nconst recurringFrequencyOptions = [\n { value: \"never\", label: \"Never\" },\n { value: \"daily\", label: \"Daily\" },\n { value: \"every\", label: \"Every __ Days\" },\n { value: \"weekly\", label: \"Weekly\" },\n { value: \"monthly\", label: \"Monthly\" },\n { value: \"yearly\", label: \"Yearly\" },\n];\n\nconst weeklyOptions = [\n { value: 0, label: \"Sunday\" },\n { value: 1, label: \"Monday\" },\n { value: 2, label: \"Tuesday\" },\n { value: 3, label: \"Wednesday\" },\n { value: 4, label: \"Thursday\" },\n { value: 5, label: \"Friday\" },\n { value: 6, label: \"Saturday\" },\n];\n\nconst monthlyOptions = Array(31)\n .fill()\n .map((_, i) => {\n const day = i + 1;\n\n return { value: day, label: `Day ${day}` };\n });\n\nconst timeUnitOptions = [\n { value: \"seconds\", label: \"Seconds\" },\n { value: \"minutes\", label: \"Minutes\" },\n { value: \"hours\", label: \"Hours\" },\n { value: \"days\", label: \"Days\" },\n];\n\nconst timeUnitOptionsForEvents = [{ value: \"days\", label: \"Days\" }];\n\nconst delayFactorOptions = [\n { value: -1, label: \"Before\" },\n { value: 1, label: \"After\" },\n];\n\nconst recurringFrequencyTypes = [\n { value: \"never\", label: \"Never\" },\n { value: \"number\", label: \"Every _ Days\" },\n { value: \"weekly\", label: \"Weekly\" },\n];\n\nconst peopleAutoPauseStatusOptions = [\n { label: \"Any Status\", value: \"any\" },\n { label: \"New\", value: \"new\" },\n { label: \"Unqualified\", value: \"unqualified\" },\n { label: \"Watch\", value: \"watch\" },\n { label: \"Nurture\", value: \"nurture\" },\n { label: \"Hot\", value: \"hot\" },\n { label: \"Past (Client)\", value: \"past\" },\n { label: \"Inactive\", value: \"inactive\" },\n { label: \"Trash\", value: \"trash\" },\n { label: \"Archived\", value: \"archived\" },\n];\n\nconst transactionAutoPauseStatusOptions = [\n { label: \"Any Status\", value: \"any\" },\n { label: \"Pipeline\", value: \"pipeline\" },\n { label: \"Coming Soon\", value: \"coming soon\" },\n { label: \"Active\", value: \"active\" },\n { label: \"Pending\", value: \"pending\" },\n { label: \"Closed\", value: \"sold\" },\n { label: \"Expired\", value: \"expired\" },\n { label: \"Withdrawn\", value: \"withdrawn\" },\n { label: \"Canceled\", value: \"canceled\" },\n { label: \"Archived\", value: \"archived\" },\n];\n\nconst peopleCompletionStatusOptions = [\n { label: \"Don't Change\", value: \"\" },\n { label: \"New\", value: \"new\" },\n { label: \"Unqualified\", value: \"unqualified\" },\n { label: \"Watch\", value: \"watch\" },\n { label: \"Nurture\", value: \"nurture\" },\n { label: \"Hot\", value: \"hot\" },\n { label: \"Past (Client)\", value: \"past\" },\n { label: \"Inactive\", value: \"inactive\" },\n];\n\nconst transactionCompletionStatusOptions = [\n { label: \"Don't Change\", value: \"\" },\n { label: \"Pipeline\", value: \"pipeline\" },\n { label: \"Coming Soon\", value: \"coming soon\" },\n { label: \"Active\", value: \"active\" },\n { label: \"Pending\", value: \"pending\" },\n { label: \"Closed\", value: \"sold\" },\n { label: \"Expired\", value: \"expired\" },\n { label: \"Withdrawn\", value: \"withdrawn\" },\n { label: \"Canceled\", value: \"canceled\" },\n { label: \"Archived\", value: \"archived\" },\n];\n\nconst canBeContingent = (scheduleType, triggerOptions = []) => {\n if (scheduleType === \"event\") {\n return false;\n }\n\n return triggerOptions.filter((option) => !option.disabled && option.value !== \"Trigger\").length > 0;\n};\n\nconst timeOptions = (increment = 15) => {\n const totalMinutes = 1440;\n\n const options = Array(totalMinutes / increment)\n .fill()\n .map((_, i) => {\n const minutes = (i + 1) * increment;\n const time = moment().startOf(\"year\").add(minutes, \"minutes\");\n const label = time.tz(Brivity.LocalTimeZone).format(timeWithZoneFormat);\n const value = time.utc().format(timeFormat);\n const valueForSort = time.tz(Brivity.LocalTimeZone).format(timeFormat);\n\n return { value, label, valueForSort };\n });\n return sortByKey(options, \"valueForSort\");\n};\n\nconst findDefaultRunAfterTimeOption = (type) => {\n if (type === \"Task\") {\n return timeOptions().find((e) => e.valueForSort === \"17:00\");\n }\n return timeOptions().find((e) => e.valueForSort === \"09:00\");\n};\n\nconst shortDelayUnits = {\n seconds: \"sec\",\n minutes: \"min\",\n hours: \"hours\",\n days: \"days\",\n};\n\nconst getActionById = (id, autoPlan) => autoPlan.actions.filter((action) => action.id === id)[0];\n\nconst autoPlanNameLabel = (id, autoPlans = []) => {\n const autoPlan = autoPlans.filter((a) => a.id === id)[0];\n return autoPlan ? autoPlan.name : \"\";\n};\n\nexport {\n priorityOptions,\n recurringFrequencyOptions,\n weeklyOptions,\n monthlyOptions,\n canBeContingent,\n timeOptions,\n timeUnitOptionsForEvents,\n timeUnitOptions,\n delayFactorOptions,\n recurringFrequencyTypes,\n getActionById,\n autoPlanNameLabel,\n shortDelayUnits,\n timeWithZoneFormat,\n peopleAutoPauseStatusOptions,\n peopleCompletionStatusOptions,\n transactionAutoPauseStatusOptions,\n transactionCompletionStatusOptions,\n findDefaultRunAfterTimeOption,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default class CCSearchResults extends React.Component {\n shortQuery = () => {\n const { type, search_query: searchQuery, search_query_length: searchQueryLength } = this.props;\n switch (type) {\n case \"email\":\n return (\n \n
\n ) : (\n \n this.handleSaveName(e.target.name, e.target.value)}\n defaultValue={name}\n />\n \n \n
\n \n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n {name} \n
\n \n )}\n \n
\n );\n default:\n return (\n Invalid email {searchQuery}
\n \n
\n );\n }\n };\n\n noResults = () => {\n const { type, search_query: searchQuery } = this.props;\n switch (type) {\n case \"email\":\n return (\n Enter {3 - searchQueryLength} more characters to search
\n \n
\n );\n case \"role\":\n return (\n Invalid email {searchQuery}
\n \n
\n );\n default:\n return (\n Invalid role {searchQuery}
\n \n
\n );\n }\n };\n\n render() {\n const {\n search_query_length: searchQueryLength,\n width,\n results,\n highlightedIndex,\n highlight,\n unhighlight,\n selectObject,\n } = this.props;\n\n return (\n searchQueryLength > 0 && (\n No results for {searchQuery}
\n \n {searchQueryLength < 3 && this.shortQuery()}\n {results.length === 0 && searchQueryLength > 2 && this.noResults()}\n {results.map((result, index) => (\n // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n highlight(index)}\n // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n onMouseOut={() => unhighlight(index)}\n onClick={() => selectObject(result)}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n >\n \n {result.label}\n {!!result.email && ` ${result.email}`}\n {!!result.type && result.cc_type === \"Person\" && (\n ({result.type})\n )}\n
\n ))}\n \n \n )\n );\n }\n}\n\nCCSearchResults.propTypes = {\n highlight: PropTypes.func.isRequired,\n highlightedIndex: PropTypes.number.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n results: PropTypes.arrayOf(PropTypes.any).isRequired,\n search_query: PropTypes.string.isRequired,\n search_query_length: PropTypes.number.isRequired,\n selectObject: PropTypes.func.isRequired,\n type: PropTypes.string.isRequired,\n unhighlight: PropTypes.func.isRequired,\n width: PropTypes.string.isRequired,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport axios from \"axios\";\nimport { Input, Dropdown } from \"../../shared/v1\";\nimport CCSearchResults from \"./CCSearchResults\";\n\nexport default class CCFor extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n highlightedIndex: 0,\n // eslint-disable-next-line react/no-unused-state\n highlightedResult: {},\n search_query: \"\",\n search_query_length: 0,\n target: \"\",\n results: [],\n };\n }\n\n componentDidMount() {\n this.getRoleResults();\n }\n\n getRoleResults = () => {\n const { planType } = this.props;\n axios({\n method: \"get\",\n url: `/auto_plans/quick_search_role_recipients?plan_type=${planType}`,\n headers: {\n \"X-CSRF-Token\": ReactOnRails.authenticityToken(),\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n }).then((response) => {\n if (response.data.length === 0) this.setState({ roleResults: [] });\n else this.showRoleResults(response.data);\n });\n };\n\n handleSearchChange = (e) => {\n const { search_query_length: searchQueryLength } = this.state;\n const { value } = e.target;\n\n this.setState({ search_query: value, search_query_length: value.split(\"\").length }, () => {\n if (searchQueryLength < 3) this.setState({ results: [] });\n\n if (searchQueryLength > 2) this.getResults();\n });\n };\n\n getResults = () => {\n const { search_query: searchQuery } = this.state;\n const { type } = this.props;\n if (type === \"people\") {\n axios({\n method: \"get\",\n url: `/auto_plans/quick_search_email_recipients?search=${searchQuery}`,\n headers: {\n \"X-CSRF-Token\": ReactOnRails.authenticityToken(),\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n }).then((response) => {\n if (response.data.length === 0) this.displayZeroResults();\n else this.showResults(response.data);\n });\n } else if (type === \"email\") {\n const email = searchQuery;\n if (/^[^@\\s]+@[^@\\s]+$/.test(email)) {\n this.showResults([\n {\n label: email,\n value: email,\n name: \"_emails\",\n cc_type: \"Email\",\n icon: \"fa fa-envelope\",\n color: \"tw-text-brand-danger\",\n },\n ]);\n }\n }\n };\n\n hideSearchResults = () => {\n this.setState({ results: [], search_query: \"\", search_query_length: 0 });\n this.highlight(0);\n };\n\n displayZeroResults = () => {\n this.setState({ results: [] });\n };\n\n showResults = (data) => {\n const { highlightedIndex } = this.state;\n // eslint-disable-next-line react/no-unused-state\n this.setState({ results: data, highlightedResult: data[highlightedIndex] });\n };\n\n showRoleResults = (data) => {\n this.setState({ roleResults: data });\n };\n\n setTarget = (e) => {\n const { target } = e;\n\n this.setState({ target, width: target.clientWidth });\n };\n\n highlight = (index) => {\n this.setState({ highlightedIndex: index });\n };\n\n unhighlight = () => {\n this.setState({ highlightedIndex: null });\n };\n\n selectObject = (result) => {\n const { onOptionSelect } = this.props;\n if (result.assigned_to_type === \"Role\") {\n onOptionSelect({\n name: \"_role_uuids\",\n label: result.label,\n value: result.value,\n cc_type: result.assigned_to_type,\n });\n } else {\n onOptionSelect(result);\n }\n this.hideSearchResults();\n };\n\n selectByIndex = () => {\n const { results, highlightedIndex, selected } = this.state;\n const newResult = results[highlightedIndex];\n if (Object.values(selected).length === 0) {\n this.selectObject(newResult);\n }\n };\n\n indexDown = () => {\n const { results, highlightedIndex } = this.state;\n if (highlightedIndex < results.length - 1) this.setState({ highlightedIndex: highlightedIndex + 1 });\n };\n\n indexUp = () => {\n const { highlightedIndex } = this.state;\n if (highlightedIndex > 0) this.setState({ highlightedIndex: highlightedIndex - 1 });\n };\n\n keyPressHandler = (e) => {\n if ([13, 40, 38].includes(e.keyCode)) {\n this.keyPressOptions()[e.keyCode.toString()]();\n }\n };\n\n highlightedValue = (index, result) => {\n const { highlightedIndex } = this.state;\n // eslint-disable-next-line react/no-unused-state\n if (highlightedIndex === index) this.setState({ highlightedResult: result });\n };\n\n keyPressOptions = () => ({\n 13: this.selectByIndex,\n 40: this.indexDown,\n 38: this.indexUp,\n });\n\n render() {\n const {\n highlightedIndex,\n results,\n roleResults,\n search_query_length: searchQueryLength,\n search_query: searchQuery,\n target,\n width,\n } = this.state;\n const { type, icon, placeholder } = this.props;\n return (\n \n {type === \"role\" ? (\n 0 && searchQuery) || \"\"}\n name=\"search_query\"\n placeholder={placeholder}\n />\n\n \n\n
\n );\n }\n}\n\nCCFor.propTypes = {\n planType: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n icon: PropTypes.string.isRequired,\n placeholder: PropTypes.string.isRequired,\n onOptionSelect: PropTypes.func.isRequired,\n};\n","import { useEffect, useState } from \"react\";\nimport { getAiToken } from \"@shared/externalApi\";\n\nconst useAiToken = () => {\n const [data, setData] = useState({});\n const getToken = () => getAiToken().then(setData);\n\n useEffect(() => {\n // token payload || {}\n const payload = JSON.parse(atob(data.token?.split(\".\")[1] || \"e30=\"));\n let timeoutId = null;\n\n if (payload.exp) {\n // in the unlikely but possible event that a user remains interacting with the ai\n // assistant for longer than the token lasts, give it a little refresh\n const timeout = new Date((payload.exp - 120) * 1000).valueOf() - Date.now();\n timeoutId = setTimeout(getToken, Math.max(0, timeout));\n }\n\n return () => {\n // if unmounted cancel refresh\n clearTimeout(timeoutId);\n };\n }, [data.token]);\n\n useEffect(() => {\n getToken();\n }, []);\n\n return data;\n};\n\nexport default useAiToken;\n","/* global tinyMCE */\nimport React, { useEffect, useState } from \"react\";\nimport \"@brivity/ai-components/dist/style.css\";\nimport { AiAssist, AiComponentsProvider } from \"@brivity/ai-components\";\nimport useAiToken from \"./hooks/useAiToken\";\n\nconst AiAssistant = ({\n align,\n contactUuid,\n context,\n messageType = \"Generic\",\n onInsertClick,\n side,\n textareaId,\n isTinyMce,\n}) => {\n const [tinyMceDocument, setTinyMceDocument] = useState(null);\n const { token, apiUrl } = useAiToken();\n\n useEffect(() => {\n if (!isTinyMce || tinyMceDocument) return;\n const timeoutId = setInterval(() => {\n if (tinyMCE.activeEditor) setTinyMceDocument(tinyMCE.activeEditor.contentDocument);\n }, 500);\n return () => {\n clearInterval(timeoutId);\n };\n }, [isTinyMce, tinyMceDocument]);\n\n if (!token) return null;\n\n return (\n \n onChange({ instructions: text })}\n />\n \n \n
\n \n \n onChange({ [e.target.name]: parseInt(e.target.value, 10) })}\n >\n {op.label}\n \n ))}\n \n
\n);\n\nPriorityOptions.propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nconst visibilityOptions = [\n {\n value: false,\n label: (\n \n \n Hidden from Viewers\n
\n ),\n },\n {\n value: true,\n label: (\n \n \n Visible to Viewers\n
\n ),\n },\n];\n\nconst VisibilitySection = ({ onChange, value }) => (\n \n onChange({ visibility: opt.value })}\n value={value || false}\n name=\"visibility\"\n options={visibilityOptions}\n />\n \n
\n);\n\nVisibilitySection.propTypes = {\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n};\n\nconst anyoneOption = { label: \"Anyone\", value: \"\", name: \"assigned_to_id\", for_type: \"all\" };\n\nconst AssignTo = ({\n prependAnyoneOption,\n options: propsOptions,\n placeholder: propsPlaceholder,\n label,\n value,\n onChange,\n}) => {\n const options = prependAnyoneOption ? [anyoneOption, ...propsOptions] : propsOptions;\n const placeholder = propsPlaceholder || \"Select Role/User\";\n\n return (\n \n onChange(opt)}\n isClearable={false}\n value={value}\n options={options}\n />\n \n
\n );\n};\n\nAssignTo.propTypes = {\n prependAnyoneOption: PropTypes.bool.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n options: PropTypes.arrayOf(PropTypes.any).isRequired,\n placeholder: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nconst RunTime = ({ label, value, onChange }) => (\n \n
\n);\n\nRunTime.propTypes = {\n label: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nconst ComputedTime = ({ parentActionId, onChange, triggers }) => (\n \n onChange({ run_time: opt.value })}\n options={timeOptions()}\n />\n
\n \n \n
\n);\n\nComputedTime.propTypes = {\n parentActionId: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n triggers: PropTypes.arrayOf(PropTypes.any).isRequired,\n};\n\nconst Event = ({ delay, delayFactor, onChange, milestoneId, milestoneOptions }) => {\n const currentDelay = delay || 0;\n\n return (\n \n onChange({ parent_action_id: opt.value })}\n isSearchable={false}\n isClearable={false}\n name=\"parent_action_id\"\n options={triggers}\n />\n
\n \n
\n );\n};\n\nEvent.propTypes = {\n delay: PropTypes.number.isRequired,\n delayFactor: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n milestoneId: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n milestoneOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n};\n\nconst Schedule = ({ type, ...props }) => (\n \n onChange({ delay_factor: opt.value, delay: currentDelay * -1 })}\n isSearchable={false}\n isClearable={false}\n options={delayFactorOptions}\n />\n
\n \n onChange({ milestone_id: opt.value })}\n isSearchable\n isClearable={false}\n name=\"milestone_id\"\n options={milestoneOptions}\n />\n
\n \n
\n);\n\nScheduleSelector.propTypes = {\n scheduleType: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nconst Delay = ({\n delayFactor = 1,\n delayOnChange,\n delayValue,\n delayUnitValue,\n delayUnitOnChange,\n scheduleType,\n}) => (\n \n onChange(e.target.value)}\n >\n Computed Time\n \n onChange(e.target.value)}\n >\n Event\n \n
\n \n \n delayOnChange({ [e.target.name]: e.target.value * delayFactor })}\n value={Math.abs(delayValue)}\n />\n
\n \n);\n\nDelay.propTypes = {\n delayFactor: PropTypes.number.isRequired,\n delayOnChange: PropTypes.func.isRequired,\n delayValue: PropTypes.number.isRequired,\n delayUnitValue: PropTypes.string.isRequired,\n delayUnitOnChange: PropTypes.func.isRequired,\n scheduleType: PropTypes.string.isRequired,\n};\n\nconst DelayAndScheduleLabel = ({ delayLabel, scheduleLabel }) => (\n \n delayUnitOnChange(opt.value)}\n searchable={false}\n clearable={false}\n options={scheduleType === \"event\" ? timeUnitOptionsForEvents : timeUnitOptions}\n />\n
\n \n \n onChange(recurringFrequencyAttributesToUpdate(opt.value))}\n clearable={false}\n value={frequencyValue}\n options={recurringFrequencyOptions}\n />\n \n\n {(frequencyValue === \"weekly\" || frequencyValue === \"monthly\") && (\n onChange({ recurring_days_of_frequency: [opt.value] })}\n isClearable={false}\n value={daysOfFrequencyValueHelper(daysOfFrequencyValue)}\n options={recurringOnOptions(frequencyValue)}\n />\n \n )}\n {frequencyValue === \"every\" && (\n
\n \n\n {frequencyValue && frequencyValue !== \"never\" && (\n
\n);\n\nRecurringOptions.propTypes = {\n onChange: PropTypes.func.isRequired,\n frequencyValue: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n daysOfFrequencyValue: PropTypes.arrayOf(PropTypes.any).isRequired,\n limitValue: PropTypes.string.isRequired,\n};\n\nconst EmailCCSelector = ({\n planType,\n emails,\n label,\n name,\n onOptionSelect,\n onOptionRemove,\n onRadioChange,\n onToggleBCC,\n placeholder,\n roles,\n showAddBCC,\n type,\n people,\n}) => (\n \n onChange({ recurring_days_of_frequency: [e.target.value] })}\n value={+daysOfFrequencyValueHelper(daysOfFrequencyValue)}\n />\n
\n \n )}\n \n \n
\n\n \n
\n \n )}\n \n onChange({ recurring_limit: opt.value })}\n isClearable={false}\n value={limitValue ? 1 : \"\"}\n options={[\n { value: \"\", label: \"Never\" },\n { value: 1, label: \"After\" },\n ]}\n />\n
\n\n {limitValue && (\n \n
\n )}\n \n onChange({ recurring_limit: e.target.value })}\n value={limitValue}\n />\n
\n occurences
\n \n
\n);\n\nconst EmailCCSelectorV2 = ({\n planType,\n emails,\n label,\n onOptionSelect,\n onOptionRemove,\n onRadioChange,\n placeholder,\n roles,\n type,\n people,\n}) => (\n \n
\n\n \n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n \n Add BCC\n \n
\n\n \n onRadioChange(e)}\n >\n People\n \n\n onRadioChange(e)}\n >\n Email\n \n\n onRadioChange(e)}\n >\n Role\n \n
\n \n {(people || []).map((person) => (\n
\n \n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, react/jsx-no-comment-textnodes, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */}\n onOptionRemove(person)}>\n \n \n person: {person.label} {!!person.email && person.email}\n
\n ))}\n\n {(emails || []).map((email) => (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, react/jsx-no-comment-textnodes, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */}\n onOptionRemove(email)}>\n \n \n email: {email.label}\n
\n ))}\n\n {(roles || []).map((role) => (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, react/jsx-no-comment-textnodes, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */}\n onOptionRemove(role)}>\n \n \n role: {role.label}\n
\n ))}\n \n
\n);\n\nEmailCCSelector.propTypes = {\n planType: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n emails: PropTypes.arrayOf(PropTypes.any).isRequired,\n label: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n onOptionSelect: PropTypes.func.isRequired,\n onOptionRemove: PropTypes.func.isRequired,\n onRadioChange: PropTypes.func.isRequired,\n onToggleBCC: PropTypes.func.isRequired,\n placeholder: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n roles: PropTypes.arrayOf(PropTypes.any).isRequired,\n showAddBCC: PropTypes.bool.isRequired,\n type: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n people: PropTypes.arrayOf(PropTypes.any).isRequired,\n};\n\nEmailCCSelectorV2.propTypes = {\n planType: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n emails: PropTypes.arrayOf(PropTypes.any).isRequired,\n label: PropTypes.string.isRequired,\n onOptionSelect: PropTypes.func.isRequired,\n onOptionRemove: PropTypes.func.isRequired,\n onRadioChange: PropTypes.func.isRequired,\n placeholder: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n roles: PropTypes.arrayOf(PropTypes.any).isRequired,\n type: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n people: PropTypes.arrayOf(PropTypes.any).isRequired,\n};\n\nexport {\n AssignTo,\n Delay,\n DelayAndScheduleLabel,\n Detail,\n Instructions,\n InstructionsLink,\n Note,\n NoteLink,\n PriorityOptions,\n RecurringOptions,\n RunTime,\n Schedule,\n ScheduleSelector,\n VisibilitySection,\n EmailCCSelector,\n EmailCCSelectorV2,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\n\nimport { Button, Checkbox, FormGroup, Col, CancelButton } from \"../../shared/v1\";\nimport * as autoPlanActionCreators from \"../actions/autoPlanActionCreators\";\nimport { canBeContingent } from \"./helpers\";\nimport {\n AssignTo,\n Delay,\n DelayAndScheduleLabel,\n Detail,\n Instructions,\n InstructionsLink,\n Note,\n NoteLink,\n PriorityOptions,\n RecurringOptions,\n RunTime,\n Schedule,\n ScheduleSelector,\n VisibilitySection,\n} from \"./ActionFormHelpers\";\n\nconst defaultTask = {\n auto_plan_id: undefined,\n type: \"Task\",\n name: \"\",\n priority: 9,\n contingent: false,\n delay_factor: 1,\n schedule_type: \"computed_time\",\n};\n\nclass TaskForm extends React.Component {\n toggleInstructions = () => {\n const {\n autoPlanActions: { toggleTaskInstructions },\n } = this.props;\n toggleTaskInstructions();\n };\n\n toggleNote = () => {\n const {\n autoPlanActions: { toggleTaskNote },\n } = this.props;\n toggleTaskNote();\n };\n\n render() {\n const {\n action,\n actionsPath,\n assignedToOptions,\n autoPlanPath,\n handleDelayUnitChange,\n handleScheduleTypeChange,\n isSubmitting,\n milestoneOptions,\n onActionSubmit,\n onAssignedToChange,\n onChange,\n onCloseAction,\n planType,\n showInstructions,\n showNote,\n triggers,\n } = this.props;\n const task = { ...defaultTask, ...action };\n const assignedToValue = task.assigned_to_id || task.assigned_to_role;\n\n return (\n \n );\n }\n}\n\nTaskForm.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n action: PropTypes.objectOf(PropTypes.any).isRequired,\n actionsPath: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n assignedToOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n autoPlanActions: PropTypes.objectOf(PropTypes.any).isRequired,\n autoPlanPath: PropTypes.string.isRequired,\n handleDelayUnitChange: PropTypes.func.isRequired,\n handleScheduleTypeChange: PropTypes.func.isRequired,\n isSubmitting: PropTypes.bool.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n milestoneOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n onActionSubmit: PropTypes.func.isRequired,\n onAssignedToChange: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n onCloseAction: PropTypes.func.isRequired,\n planType: PropTypes.string.isRequired,\n showInstructions: PropTypes.bool.isRequired,\n showNote: PropTypes.bool.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n triggers: PropTypes.arrayOf(PropTypes.any).isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n isSubmitting: state.autoPlanEdit.isSubmitting,\n showInstructions: state.autoPlanEdit.showInstructions,\n showNote: state.autoPlanEdit.showNote,\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n autoPlanActions: bindActionCreators(autoPlanActionCreators, dispatch),\n});\nexport default connect(mapStateToProps, mapDispatchToProps)(TaskForm);\n","import React, { useEffect, useMemo } from \"react\";\n\nconst BrivityTextEditor = ({ className, id, placeholders, settings, ...props }) => {\n const dataPlaceholders = useMemo(() => JSON.stringify(placeholders), [placeholders]);\n\n useEffect(() => {\n const editor = tinyMCE.createEditor(id, { ...tinyMCE.settings, ...settings, selector: `#${id}` });\n editor.render();\n return () => {\n tinyMCE.execCommand(\"mceRemoveEditor\", false, id);\n tinyMCE.editors = [];\n };\n }, []);\n\n return (\n \n
\n \n {(people || []).map((person) => (\n
\n \n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, react/jsx-no-comment-textnodes, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */}\n onOptionRemove(person)}>\n \n \n person: {person.label} {!!person.email && person.email}\n
\n ))}\n\n {(emails || []).map((email) => (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, react/jsx-no-comment-textnodes, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */}\n onOptionRemove(email)}>\n \n \n email: {email.label}\n
\n ))}\n\n {(roles || []).map((role) => (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, react/jsx-no-comment-textnodes, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid */}\n onOptionRemove(role)}>\n \n \n role: {role.label}\n
\n ))}\n \n \n \n
\n );\n};\n\nexport default BrivityTextEditor;\n","/* eslint-disable class-methods-use-this */\n/* eslint-disable jsx-a11y/label-has-associated-control */\n/* global tinymce */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport axios from \"axios\";\nimport { Button, FormGroup, Col, Checkbox, Dropdown, CancelButton } from \"../../shared/v1\";\nimport * as autoPlanActionCreators from \"../actions/autoPlanActionCreators\";\n\nimport BrivityTextEditor from \"../../shared/BrivityTextEditor\";\nimport { sortByKey } from \"../../shared/Utilities\";\n\nimport { canBeContingent } from \"./helpers\";\nimport {\n AssignTo,\n Delay,\n DelayAndScheduleLabel,\n Detail,\n ScheduleSelector,\n EmailCCSelector,\n RunTime,\n Schedule,\n} from \"./ActionFormHelpers\";\nimport AiAssistant from \"../../shared/AiAssistant/AiAssistant\";\n\nconst defaultEmail = {\n name: \"\",\n template_body: \"\",\n type: \"Email\",\n delay: 0,\n delay_unit: \"seconds\",\n contingent: false,\n delay_factor: 1,\n schedule_type: \"computed_time\",\n};\n\nconst ccPlaceholders = {\n role: \"Select a role\",\n people: \"Select...\",\n email: \"Enter Email Address\",\n};\n\nclass EmailForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showBCC: false,\n ccType: \"people\",\n bccType: \"people\",\n };\n // eslint-disable-next-line no-underscore-dangle\n this._isMounted = false;\n }\n\n // eslint-disable-next-line react/no-deprecated\n componentWillMount() {\n const { action } = this.props;\n // eslint-disable-next-line no-underscore-dangle\n this._isMounted = true;\n\n this.getCCLabels(action);\n\n const email = { ...defaultEmail, ...action };\n const bccPeopleUUIDs = email.bcc_people_uuids || [];\n const bccEmails = email.bcc_emails || [];\n if (!!bccPeopleUUIDs.length || !!bccEmails.length) this.displayBCC();\n }\n\n // eslint-disable-next-line react/no-deprecated\n componentWillReceiveProps(nextProps) {\n this.getCCLabels(nextProps.action);\n }\n\n componentWillUnmount() {\n // eslint-disable-next-line no-underscore-dangle\n this._isMounted = false;\n }\n\n emailTemplateOptions = (templates) => {\n const emailTemplate = templates || [];\n const options = emailTemplate.map((template) => ({\n label: template.name,\n value: template.id,\n subject: template.subject,\n }));\n\n return sortByKey(options, \"label\");\n };\n\n updateTinyMceEditor = (content) => {\n if (tinymce && tinymce.activeEditor) {\n tinymce.activeEditor.setContent(content);\n }\n };\n\n handleTemplateChange = async (value) => {\n const templateId = value;\n const { emailTemplates, onChange } = this.props;\n const activeTemplate = emailTemplates.find((t) => templateId === t.id);\n\n const response = await fetch(`/auto_plans/interaction_template_body?id=${templateId}`);\n const templateBody = await response.json();\n\n this.updateTinyMceEditor(templateBody);\n\n // Not including templateBody since updateTinyMceEditor is a controlled component\n onChange({ template_id: templateId, name: activeTemplate.subject });\n\n };\n\n handleSubmit = () => {\n const { action, onActionSubmit, actionsPath, autoPlanPath } = this.props;\n let emailContentFromUncontrollerComponent = \"\";\n if (tinymce && tinymce.activeEditor) {\n emailContentFromUncontrollerComponent = tinymce.activeEditor.getContent();\n }\n\n const emailToSubmit = { ...action, template_body: emailContentFromUncontrollerComponent };\n\n onActionSubmit(emailToSubmit, actionsPath, autoPlanPath);\n };\n\n displayBCC = () => {\n const { showBCC } = this.state;\n if (!showBCC) this.setState({ showBCC: true });\n };\n\n getCCLabels = (email) => {\n this.loadLabelsForCC(email.cc_role_uuids, email.cc_people_uuids, email.cc_emails, \"cc\");\n this.loadLabelsForCC(email.bcc_role_uuids, email.bcc_people_uuids, email.bcc_emails, \"bcc\");\n };\n\n loadLabelsForCC = (roles, people, emails, prefix) => {\n axios({\n method: \"get\",\n url: `/auto_plans/serialized_email_recipients?people_uuids[]=${(people || []).join(\n \"&people_uuids[]=\",\n )}&role_uuids[]=${(roles || []).join(\"&role_uuids[]=\")}`,\n headers: {\n \"X-CSRF-Token\": ReactOnRails.authenticityToken(),\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n }).then((response) => {\n // eslint-disable-next-line no-underscore-dangle\n if (this._isMounted)\n this.setState({\n [`${prefix}Roles`]: response.data.roles || [],\n [`${prefix}People`]: response.data.people || [],\n [`${prefix}Emails`]: (emails || []).map((email) => ({\n label: email,\n value: email,\n name: \"_emails\",\n cc_type: \"Email\",\n })),\n });\n });\n };\n\n render() {\n const {\n bccEmails: stateBccEmails,\n bccPeople,\n bccRoles,\n bccType,\n ccEmails: stateCcEmails,\n ccPeople,\n ccRoles,\n ccType,\n showBCC,\n } = this.state;\n const {\n action,\n assignedForOptions,\n assignedToOptions,\n emailTemplates,\n handleDelayUnitChange,\n handleScheduleTypeChange,\n hideAssignedFor,\n isSubmitting,\n milestoneOptions,\n onAssignedForChange,\n onAssignedToChange,\n onCCChange,\n onChange,\n onCloseAction,\n placeholders,\n planType,\n triggers,\n } = this.props;\n const email = { ...defaultEmail, ...action };\n const assignedToValue = email.assigned_to_id || email.assigned_to_role;\n const assignedForValue = email.assigned_for_id || email.assigned_for_role;\n const ccPeopleUUIDs = email.cc_people_uuids || [];\n const ccRoleUUIDs = email.cc_role_uuids || [];\n const ccEmails = email.cc_emails || [];\n const bccPeopleUUIDs = email.bcc_people_uuids || [];\n const bccRoleUUIDs = email.bcc_role_uuids || [];\n const bccEmails = email.bcc_emails || [];\n\n return (\n \n );\n }\n}\n\nEmailForm.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n action: PropTypes.objectOf(PropTypes.any).isRequired,\n actionsPath: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n assignedForOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n assignedToOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n autoPlanPath: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n emailTemplates: PropTypes.arrayOf(PropTypes.any).isRequired,\n handleDelayUnitChange: PropTypes.func.isRequired,\n handleScheduleTypeChange: PropTypes.func.isRequired,\n hideAssignedFor: PropTypes.bool.isRequired,\n isSubmitting: PropTypes.bool.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n milestoneOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n onActionSubmit: PropTypes.func.isRequired,\n onAssignedForChange: PropTypes.func.isRequired,\n onAssignedToChange: PropTypes.func.isRequired,\n onCCChange: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n onCloseAction: PropTypes.func.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n placeholders: PropTypes.arrayOf(PropTypes.any).isRequired,\n planType: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n triggers: PropTypes.arrayOf(PropTypes.any).isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n isSubmitting: state.isSubmitting,\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n autoPlanActions: bindActionCreators(autoPlanActionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(EmailForm);\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\n\nimport { Button, FormGroup, Col, Checkbox, Dropdown, TextArea, CancelButton } from \"../../shared/v1\";\nimport * as autoPlanActionCreators from \"../actions/autoPlanActionCreators\";\nimport { canBeContingent } from \"./helpers\";\nimport {\n AssignTo,\n Delay,\n DelayAndScheduleLabel,\n ScheduleSelector,\n RunTime,\n Schedule,\n} from \"./ActionFormHelpers\";\nimport AiAssistant from \"../../shared/AiAssistant\";\n\nconst defaultText = {\n template_body: \"\",\n type: \"Text\",\n delay: 0,\n delay_unit: \"seconds\",\n contingent: false,\n delay_factor: 1,\n schedule_type: \"computed_time\",\n};\n\nclass TextForm extends React.Component {\n insertPlaceholder = (opt) => {\n const { onChange } = this.props;\n\n // eslint-disable-next-line react/no-string-refs\n const { textMessageInput } = this.refs;\n const { selectionStart } = textMessageInput;\n const { selectionEnd } = textMessageInput;\n\n const prefix = textMessageInput.value.substring(0, selectionStart);\n const suffix = textMessageInput.value.substring(selectionEnd, textMessageInput.value.length);\n const updatedValue = prefix + opt.value + suffix;\n\n onChange({ template_body: updatedValue });\n };\n\n placeholderOptions() {\n const { placeholders } = this.props;\n\n return placeholders.map((placeholder) => ({ label: placeholder.text, value: placeholder.value }));\n }\n\n render() {\n const {\n action,\n actionsPath,\n assignedForOptions,\n assignedToOptions,\n autoPlanPath,\n handleDelayUnitChange,\n handleScheduleTypeChange,\n hideAssignedFor,\n isSubmitting,\n milestoneOptions,\n onActionSubmit,\n onAssignedForChange,\n onAssignedToChange,\n onChange,\n onCloseAction,\n triggers,\n } = this.props;\n const text = { ...defaultText, ...action };\n const assignedToValue = text.assigned_to_id || text.assigned_to_role;\n const assignedForValue = text.assigned_for_id || text.assigned_for_role;\n\n return (\n \n );\n }\n}\n\nTextForm.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n action: PropTypes.objectOf(PropTypes.any).isRequired,\n actionsPath: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n assignedForOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n assignedToOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n autoPlanPath: PropTypes.string.isRequired,\n handleDelayUnitChange: PropTypes.func.isRequired,\n handleScheduleTypeChange: PropTypes.func.isRequired,\n hideAssignedFor: PropTypes.bool.isRequired,\n isSubmitting: PropTypes.bool.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n milestoneOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n onActionSubmit: PropTypes.func.isRequired,\n onAssignedForChange: PropTypes.func.isRequired,\n onAssignedToChange: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n onCloseAction: PropTypes.func.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n placeholders: PropTypes.arrayOf(PropTypes.any).isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n triggers: PropTypes.arrayOf(PropTypes.any).isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n isSubmitting: state.isSubmitting,\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n autoPlanActions: bindActionCreators(autoPlanActionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TextForm);\n","import React from \"react\";\nimport { shape } from \"prop-types\";\nimport Circle from \"../../shared/Circle\";\n\nconst Action = ({ action, autoPlanActions }) => {\n const iconOptions = {\n Text: \"fa fa-commenting-o\",\n Task: \"fa6 fa6-list\",\n Email: \"fa6-regular fa6-envelope\",\n };\n\n const actionIcon = () => iconOptions[action.type];\n\n const fromUserLabel = () => from {action.assigned_to_label} ;\n\n const afterActionLabel = () => {\n const { parent_action: parentAction } = action;\n if (!parentAction) {\n return \"\";\n }\n\n return (\n \n Due time is {action.delay} {action.delay_unit} after\n \n {\" \"}\n {parentAction.type}: {parentAction.name}\n \n .\n \n );\n };\n\n const contingentAfterActionLabel = () => {\n const { parent_action: parentAction } = action;\n if (!parentAction) {\n return \"\";\n }\n\n return (\n \n Due time auto-updates {action.delay} {action.delay_unit} after\n \n {\" \"}\n {parentAction.type}: {parentAction.name}{\" \"}\n \n is completed\n \n );\n };\n\n const dueTimeLabel = () => {\n if (action.contingent && action.parent_action_id) {\n return - {contingentAfterActionLabel()} ;\n }\n if (action.parent_action_id) {\n return - {afterActionLabel()} ;\n }\n return \"\";\n };\n\n return (\n \n
\n );\n};\n\nAction.propTypes = {\n action: shape({}),\n autoPlanActions: shape({})\n};\n\nAction.defaultProps = {\n action: {},\n autoPlanActions: {}\n};\n\nexport default Action;","/* eslint-disable import/prefer-default-export */\nconst ACTION_BTN = 'tw-border-[2px] tw-border-solid tw-border-teal tw-rounded-full tw-p-[8px] tw-px-[20px] tw-text-14d !tw-text-teal';\nconst ACTION_BTN_LABEL = \"tw-mr-[16px] tw-text-gray-50 tw-text-12d tw-font-semibold\";\n\nexport { \n ACTION_BTN,\n ACTION_BTN_LABEL\n};","/* eslint-disable camelcase */\n/* eslint-disable no-useless-escape */\nimport { padStart, parseInt, words } from \"lodash\";\nimport moment from \"moment-timezone\";\n\nexport const onSaveDateAdapter = (form) => {\n const { day_month_year, run_time } = form;\n \n const dateTimeInLocal = moment.tz(`${day_month_year} ${run_time}`, 'DD/MM/YYYY HH:mm', Brivity.LocalTimeZone);\n\n if (dateTimeInLocal.isDST()) {\n dateTimeInLocal.add(1, 'hour');\n }\n\n const formattedDateTime = {\n run_time: dateTimeInLocal.utc().format('HH:mm')\n };\n\n return {\n ...form,\n ...formattedDateTime\n };\n}\n\n\nexport const convertDateFormat = (inputDate) => {\n const dateObj = new Date(inputDate);\n \n const pad2 = (num) => padStart(num, 2, '0');\n const dayMonthYear = `${pad2(dateObj.getDate())}/${pad2(dateObj.getMonth() + 1)}/${dateObj.getFullYear()}`;\n const runTime = `${pad2(dateObj.getHours())}:${pad2(dateObj.getMinutes())}`;\n \n return { day_month_year: dayMonthYear, run_time: runTime };\n}\n\nexport const formatDateAndTimeToDatePicker = (date, time) => {\n const [day, month, year] = date.split('/').map(Number);\n const [hours, minutes] = time.split(':').map(Number);\n\n const formattedDate = new Date(year, month - 1, day, hours, minutes);\n\n const options = { month: 'numeric', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true };\n\n return formattedDate.toLocaleString('en-US', options).replace(',', '');\n}\n\n// checks if properties within object has something in it (with days && milestones\nexport const hasProperties = (data) => (\n (data.days && Object.keys(data.days).length > 0) ||\n (data.milestones && Object.keys(data.milestones).length > 0)\n);\n\nexport const extractYearFromDateString = (dateString) => {\n const [,, year] = words(dateString, /[^\\/: ]+/g).map(parseInt);\n \n return year\n}\n\nexport const yearErrorMessageHandlr = (year) => {\n const currentYear = new Date().getFullYear();\n return year < currentYear && \"You cannot select a past date\" ||\n year > currentYear + 1 && \"Must be no further out than next year\" ||\n null; // Or you can return false if you just need a boolean result\n}\n \nexport const checkIfDateStringIsWithinRange = (dateString) => {\n const dateStringYear = extractYearFromDateString(dateString);\n\n return yearErrorMessageHandlr(dateStringYear)\n}","/* eslint-disable spaced-comment */\n/* eslint-disable class-methods-use-this */\n/* eslint-disable no-restricted-syntax */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport Button from \"@shared/v2/Button\";\nimport { SUBJECT_LINE_LIMIT_ERROR, isWithinSubjectLineLimit } from \"@shared/hooks/useSubjectLineLimitError\";\nimport { Modal, Row, Col, CancelButton, DeleteButton } from \"../../shared/v1\";\nimport TaskForm from \"./TaskForm\";\nimport EmailForm from \"./EmailForm\";\nimport TextForm from \"./TextForm\";\nimport Action from \"./Action\";\nimport Error from \"../../shared/Error\";\nimport \"./ActionForm.scss\";\nimport { getActionById, shortDelayUnits, timeOptions, findDefaultRunAfterTimeOption } from \"./helpers\";\nimport { formattedTimeFromUtcDateTimeString } from \"../../shared/TimeHelpers\";\nimport { toTitleCase } from \"../../shared/Utilities\";\n\nimport * as autoPlanActionCreators from \"../actions/autoPlanActionCreators\";\nimport { ACTION_BTN_LABEL } from \"../styles\";\nimport { hasProperties } from \"../helpers\";\n\nconst modalComponents = {\n Task: TaskForm,\n Email: EmailForm,\n Text: TextForm,\n};\n\nclass Actions extends React.Component {\n scheduleTypeLabels = {\n days: \"Day\",\n milestones: \"Milestone\",\n };\n\n constructor(props) {\n super(props);\n this.state = {\n subjectErrorMsg: null,\n };\n }\n\n handleActionUpdate = (action, actionsPath, autoPlanPath) => {\n const { autoPlanActions } = this.props;\n if (!this.validateForm(action)) {\n return;\n }\n\n const parentActionId = action.parent_action_id === \"Trigger\" ? null : action.parent_action_id;\n const formData = { ...action, parent_action_id: parentActionId };\n autoPlanActions.saveAction(`${actionsPath}/${action.id}`, formData, autoPlanPath);\n };\n\n handleActionCreate = (action, actionsPath, autoPlanPath) => {\n const { autoPlanActions } = this.props;\n if (!this.validateForm(action)) {\n return;\n }\n\n const parentActionId = action.parent_action_id === \"Trigger\" ? null : action.parent_action_id;\n const formData = { ...action, parent_action_id: parentActionId };\n\n autoPlanActions.createAction(actionsPath, formData, autoPlanPath);\n };\n\n handleScheduleTypeChange = (scheduleType) => {\n const { actionForm, autoPlanActions } = this.props;\n const newValues =\n scheduleType === \"computed_time\"\n ? {\n delay: 0,\n delay_factor: 1,\n milestone_id: null,\n run_time: findDefaultRunAfterTimeOption(actionForm.type).value,\n schedule_type: \"computed_time\",\n }\n : {\n parent_action_id: null,\n delay_unit: \"days\",\n schedule_type: \"event\",\n contingent: false,\n };\n\n autoPlanActions.updateActionManyValues(newValues);\n };\n\n handleDelayUnitChange = (delayUnit) => {\n const { actionForm, autoPlanActions } = this.props;\n const newValues = {\n delay_unit: delayUnit,\n run_time: delayUnit === \"days\" ? findDefaultRunAfterTimeOption(actionForm.type).value : null,\n };\n\n autoPlanActions.updateActionManyValues(newValues);\n };\n\n handleAssignedToChange(option) {\n const { autoPlanActions } = this.props;\n const { name, value, assignedToType } = option;\n const resetFields =\n name === \"assigned_to_role\" ? [\"assigned_to_id\", \"assigned_to_type\"] : [\"assigned_to_role\"];\n\n const newValues = { assigned_to_type: assignedToType, [name]: value };\n const resetValues = resetFields.reduce((obj, resetField) => ({ ...obj, [resetField]: null }), {});\n\n autoPlanActions.updateActionManyValues({ ...newValues, ...resetValues });\n }\n\n handleAssignedForChange(option) {\n const { autoPlanActions } = this.props;\n const { name, value, assignedForType } = option;\n const resetFields =\n name === \"assigned_for_role\" ? [\"assigned_for_id\", \"assigned_for_type\"] : [\"assigned_for_role\"];\n\n const newValues = { assigned_for_type: assignedForType, [name]: value };\n const resetValues = resetFields.reduce((obj, resetField) => ({ ...obj, [resetField]: null }), {});\n\n autoPlanActions.updateActionManyValues({ ...newValues, ...resetValues });\n }\n\n handleCCChange(option, prefix, roleUuids = [], peopleUuids = [], emails = [], remove = false) {\n if (!option) return;\n\n const { autoPlanActions } = this.props;\n const { name, value, cc_type: ccType } = option;\n // eslint-disable-next-line no-nested-ternary\n const values = ccType === \"Person\" ? peopleUuids : ccType === \"Role\" ? roleUuids : emails;\n\n if (remove) values.splice(values.indexOf(value), 1);\n else if (!values.includes(value)) values.push(value);\n\n const filteredSet = new Set(values.filter(Boolean));\n\n autoPlanActions.updateActionManyValues({ [`${prefix}${name}`]: Array.from(filteredSet) });\n }\n\n validateForm = (action) => {\n const { autoPlanActions } = this.props;\n const errors = [];\n\n if (\n action.recurring_frequency === \"every\" &&\n !this.isEveryNDaysValid(action.recurring_days_of_frequency)\n ) {\n errors.push(\"Enter 3 digits or less for recurring frequency.\");\n }\n\n if (\n action.recurring_frequency === \"weekly\" &&\n (!action.recurring_days_of_frequency || action.recurring_days_of_frequency.length === 0)\n ) {\n errors.push(\"Select the day of week to recur on.\");\n }\n\n if (\n action.recurring_frequency === \"monthly\" &&\n (!action.recurring_days_of_frequency || action.recurring_days_of_frequency.length === 0)\n ) {\n errors.push(\"Select the day of month to recur on.\");\n }\n\n // Name is not present or it is empty\n if (!action.name && action.name.trim()) {\n errors.push(\"Name can't be blank.\");\n }\n\n if (\n action.assigned_to_id === undefined &&\n action.assigned_to_role !== \"owner\" &&\n action.assigned_to_role !== \"primary_agent\"\n ) {\n errors.push(\"Please select who the task should be assigned to.\");\n }\n if (errors.length > 0) {\n autoPlanActions.submitActionFailure(errors);\n return false;\n }\n\n return true;\n };\n\n setTriggersForModal = (timeline) => {\n const options = [{ label: \"Auto Plan starts\", value: \"Trigger\" }];\n // Destructuring would prevent use of the `?` operator here and cause a TypeError\n // eslint-disable-next-line react/destructuring-assignment\n const idForThisAction = this.props.actionForm?.id || 0;\n\n // We have multiple schedule trigger types (e.g.: after X days, or after a\n // certain milestone like a birthday)\n for (const [scheduleType, optionsForScheduleType] of Object.entries(timeline || {})) {\n // For each of those, we can have multiple of them (e.g.: we can have a\n // triger after 1 day, another after 2... or a trigger for a birthday\n // milestone and another for some other milestone)\n for (const [event, optionsForEvent] of Object.entries(optionsForScheduleType)) {\n // And finally, within each of those, we can have multiple actions\n // (e.g.: several actions triggered after X days), which is how we want\n // to group them together in the UI. As such, we collapse them here into\n // a single option group and label according to the current\n // day/milestone.\n const timelineGroup = Array.prototype.concat(...Object.values(optionsForEvent));\n options.push({\n label: `${this.scheduleTypeLabels[scheduleType]} ${event}`,\n options: Object.values(timelineGroup)\n .map((timelineAction) => {\n const action = this.actionLookup(timelineAction.id);\n if (action.id === idForThisAction) {\n // An action should not be able to trigger itself.\n return null;\n }\n\n return {\n label: (\n \n {action.type} - {action.name}\n \n ),\n value: action.id,\n };\n })\n .filter((option) => option !== null),\n });\n }\n }\n\n return options;\n };\n\n relativeTimeLabel = (action) => {\n const atOrBy = action.type === \"Task\" ? \"by\" : \"at\";\n const timeOfDayLabel =\n action.delay_unit === \"days\" && action.run_time\n ? `${atOrBy} ${formattedTimeFromUtcDateTimeString(action.run_at)}`\n : \"\";\n const unitLabel = shortDelayUnits[action.delay_unit];\n\n if (action.parent_action_id) {\n return `${action.delay} ${unitLabel} after ${\n action.parent_action && action.parent_action.type\n } ${timeOfDayLabel}`;\n }\n return `${action.delay} ${unitLabel} after Trigger ${timeOfDayLabel}`;\n };\n\n milestoneTimeLabel = (action) => {\n const atOrBy = action.type === \"Task\" ? \"by\" : \"at\";\n let when = \"\";\n\n // eslint-disable-next-line eqeqeq\n const timeOption = timeOptions().find((e) => e.value == action.run_time);\n const timeOfDayLabel = timeOption ? `${atOrBy} ${timeOption.label}` : \"\";\n const unitLabel = shortDelayUnits[action.delay_unit];\n\n if (action.delay === 0) {\n return timeOfDayLabel;\n }\n if (action.delay > 0) {\n when = \"after\";\n } else if (action.delay < 0) {\n when = \"before\";\n }\n\n return `${Math.abs(action.delay)} ${unitLabel} ${when} ${timeOfDayLabel}`;\n };\n\n deleteButton = () => {\n const { isDeletingAction } = this.props;\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {`${action.type}: `}\n {action.name} \n
\n \n {fromUserLabel()} {dueTimeLabel()}\n
\n \n
\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/anchor-is-valid, jsx-a11y/no-static-element-interactions */}\n autoPlanActions.openEditActionModal(action)}>\n \n \n
\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/anchor-is-valid, jsx-a11y/no-static-element-interactions */}\n autoPlanActions.openDeleteActionModal(action.id)}>\n \n \n
\n \n {\n if (actionForm.type === \"Email\" && !isWithinSubjectLineLimit(actionForm.name)) {\n return this.setState({ subjectErrorMsg: SUBJECT_LINE_LIMIT_ERROR });\n }\n this.setState({ subjectErrorMsg: null });\n return createOrUpdate(e, actionsPath, autoPlanPath);\n }}\n actionsPath={actionsPath}\n autoPlanPath={autoPlanPath}\n emailTemplates={emailTemplates}\n triggers={triggerOptions}\n milestoneOptions={milestoneOptions}\n onAssignedToChange={(opt) => this.handleAssignedToChange(opt)}\n onAssignedForChange={(opt) => this.handleAssignedForChange(opt)}\n assignedToOptions={assignedToOptions}\n assignedForOptions={assignedForOptions}\n placeholders={placeholders}\n onCloseAction={() => {\n this.setState({ subjectErrorMsg: null });\n autoPlanActions.closeNewActionModal();\n }}\n onCCChange={(opt, prefix, roles, people, emails, remove) =>\n this.handleCCChange(opt, prefix, roles, people, emails, remove)\n }\n />\n
\n \n \n Please note that deleting{\" \"}\n \n {activeAction.type}: {activeAction.name}{\" \"}\n \n will also delete all tasks and interactions contingent on that.\n \n
\n {activeAction && activeAction.descendants.length > 0 && (\n\n
\n )}\n The following actions will also be deleted if this action is removed.
\n\n {activeAction.descendants.map((descendant) => (\n\n \n {descendant.type}: {descendant.name}\n \n
\n ))}\n\n
\n \n
\n \n Add a new
\n \n {Object.keys(modalComponents).map((type) => (\n this.showNewActionModal({ type }, groupType === \"days\" && day)}\n >\n {type}\n \n ))}\n
\n \n {groups && !hasProperties(groups) && (\n
\n );\n }\n}\n\nActions.propTypes = {\n // eslint-disable-next-line react/forbid-prop-types\n actionForm: PropTypes.objectOf(PropTypes.any).isRequired,\n actionsPath: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n actions: PropTypes.arrayOf(PropTypes.any).isRequired,\n activeActionId: PropTypes.string,\n // eslint-disable-next-line react/forbid-prop-types\n assignedForOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n assignedToOptions: PropTypes.arrayOf(PropTypes.any).isRequired,\n autoPlanId: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n autoPlan: PropTypes.objectOf(PropTypes.any).isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n autoPlanActions: PropTypes.objectOf(PropTypes.any).isRequired,\n autoPlanPath: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n emailTemplates: PropTypes.arrayOf(PropTypes.any).isRequired,\n errorMessage: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string)])\n .isRequired,\n hasError: PropTypes.bool.isRequired,\n isDeleteActionModalOpen: PropTypes.bool.isRequired,\n isDeletingAction: PropTypes.bool.isRequired,\n isModalOpen: PropTypes.bool.isRequired,\n milestoneOptions: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n placeholders: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n timeline: PropTypes.shape(),\n};\n\nActions.defaultProps = {\n activeActionId: null,\n timeline: null,\n};\n\nconst mapStateToProps = ({ autoPlanEdit: { assignedToOptions, assignedForOptions, ...autoPlanEdit } }) => ({\n ...autoPlanEdit,\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n autoPlanActions: bindActionCreators(autoPlanActionCreators, dispatch),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Actions);\n","import React from \"react\";\nimport { func } from \"prop-types\";\n\nimport Button from \"@shared/v2/Button\";\nimport { ACTION_BTN_LABEL } from \"../../styles\";\n\nconst AddNewActions = ({taskBtnOnClick, emailBtnOnClick, textBtnOnClick}) => (\n {this.groupHeader(\"days\", 0)}
\n )}\n {groups && !hasProperties(groups) && this.renderNewActionButtons(\"days\", 0)}\n {actions &&\n actions.length > 0 &&\n groups &&\n //sorted by grouping (i.e. milestone, days)\n Object.keys(groups).map((groupType) => (\n\n {groups[groupType] &&\n //sorted by within milestone or days (i.e. birthdays, 0, 1, 2)\n Object.keys(groups[groupType]).map((day) => (\n
\n ))}\n {isDeleteActionModalOpen && activeActionId && this.renderDeleteModal()}\n {isModalOpen && this.renderModal()}\n \n
\n ))}\n \n
\n {this.groupHeader(groupType, day)}
\n\n {groups[groupType][day] &&\n Object.keys(groups[groupType][day])\n .sort()\n .map((time) => (\n
\n\n {this.renderNewActionButtons(groupType, day)}\n \n
\n ))}\n \n
\n \n {\" \"}\n {this.timeLabel(groups[groupType][day][time][0], day)}{\" \"}\n
\n \n
\n \n
\n {this.renderActions(groups[groupType][day][time])}
\n \n
\n)\nexport default AddNewActions;\n\nAddNewActions.propTypes = {\n taskBtnOnClick: func.isRequired, \n emailBtnOnClick: func.isRequired, \n textBtnOnClick: func.isRequired,\n}\n","import React from \"react\";\nimport { string } from \"prop-types\";\nimport { formattedTimeFromUtcDateTimeString } from \"@shared/TimeHelpers\";\n\nconst formatDate = (inputDate) => {\n const [day, month, year] = inputDate.split('/');\n const formattedDate = new Date(`${month}/${day}/${year}`).toLocaleDateString('en-US', {\n month: 'short', // Use 'short' instead of 'long'\n day: 'numeric',\n year: 'numeric', // Include the year\n });\n\n return formattedDate;\n};\n\nconst TimeStamp = ({ date, localRunTime }) => (\n Add a new
\n \n \n Task\n \n \n Email\n \n \n Text\n \n
\n \n
\n)\n\nexport default TimeStamp;\n\nTimeStamp.propTypes = {\n date: string, \n localRunTime: string\n}\n\nTimeStamp.defaultProps = {\n date: '', \n localRunTime: ''\n}","import React from \"react\";\nimport { bool, oneOf } from \"prop-types\";\nimport { ArrowTurnUpSolidV6, CommentDotsRegularV6, EnvelopeRegularV6, ListUlSolidV6 } from \"@shared/v2/Icomoon\";\n\n\nconst TYPE_ICON_MAP = {\n Task: ListUlSolidV6,\n Email: EnvelopeRegularV6,\n Text: CommentDotsRegularV6,\n}\n\n\nconst Icon = ({type, contingent}) => {\n const TypeIcon = TYPE_ICON_MAP[type];\n\n return (\n {formatDate(date)}
\n {formattedTimeFromUtcDateTimeString(localRunTime)}
\n \n {contingent && \n
\n )\n};\n\nexport default Icon;\n\nIcon.propTypes = {\n type: oneOf(['Task', 'Email', 'Text']).isRequired,\n contingent: bool,\n}\n\nIcon.defaultProps = {\n contingent: false\n}","import { number, string } from \"prop-types\";\nimport React from \"react\";\n\nconst PriorityIndicator = ({ priority, className }) => priority && (\n \n
\n } \n \n {priority}\n
\n)\n\nexport default PriorityIndicator;\n\nPriorityIndicator.propTypes = {\n priority: number,\n className: string\n}\n\nPriorityIndicator.defaultProps = {\n priority: null,\n className: ''\n}","import React from \"react\";\nimport { number, string } from \"prop-types\";\n\nimport PriorityIndicator from \"./PriorityIndicator\";\n\nconst ActionHeader = ({ type, name, priority }) => (\n \n {type}:\n {name}\n \n
\n);\n\nexport default ActionHeader;\n\nActionHeader.propTypes = {\n type: string.isRequired,\n name: string.isRequired,\n priority: number\n}\n\nActionHeader.defaultProps = {\n priority: 9\n}","import React from \"react\";\nimport { string } from \"prop-types\";\n\nconst ActionDescriptor = ({ from }) => (\n from {from}
\n);\n\nexport default ActionDescriptor;\n\nActionDescriptor.propTypes = {\n from: string.isRequired\n}","/* eslint-disable camelcase */\nimport React, { useState } from \"react\";\nimport { bool, number, oneOf, shape, string } from \"prop-types\";\nimport { useDispatch } from \"react-redux\";\nimport moment from \"moment-timezone\";\n\nimport { PencilSolidV6, TrashCanSolidV6 } from \"@shared/v2/Icomoon\";\nimport IconButton from \"@shared/v2/IconButton\";\nimport { toggleTaskActionModal, toggleEmailActionModal, toggleTextActionModal } from \"../../actions/autoPlansActionCreators\";\nimport TimeStamp from \"./TimeStamp\";\nimport Icon from \"./Icon\";\nimport ActionHeader from \"./ActionHeader\";\nimport ActionDescriptor from './ActionDescriptor';\nimport { useAutoPlanId } from \"../../../reducers/autoPlanEdit\";\nimport { deleteAction } from \"../../actions/autoPlanActionCreators\";\n\n\nconst ACTION_TYPE_TOGGLE_MODAL = {\n 'Task': toggleTaskActionModal,\n 'Email': toggleEmailActionModal,\n 'Text': toggleTextActionModal\n}\n\nconst convertFormTimestampToObject = ({local_run_at}) => ({\n run_time: moment(local_run_at).format('HH:mm')\n});\n\nconst ActionV2 = ({action, from}) => {\n const [ showBtns, toggleBtns ] = useState(false);\n const autoPlanId = useAutoPlanId()\n const toggleModal = ACTION_TYPE_TOGGLE_MODAL[action.type];\n const dispatch = useDispatch();\n\n return (\n \n \n
\n )\n};\n\nexport default ActionV2;\n\nActionV2.propTypes = {\n action: shape({\n day_month_year: string,\n run_time: string,\n type: oneOf(['Task', 'Email', 'Text']),\n name: string,\n priority: number,\n contingent: bool\n }).isRequired,\n from: string.isRequired\n}\n","import React from \"react\";\nimport { arrayOf, shape } from \"prop-types\";\nimport { find } from \"lodash\";\n\nimport ActionV2 from \"../ActionV2\";\nimport { useActions } from \"../../../reducers/autoPlanEdit\";\n\nconst SpecificDatesActions = ({actions}) => {\n const listOfAllActions = useActions();\n\n return (\n toggleBtns(true)}\n onMouseLeave={() => toggleBtns(false)}>\n \n
\n \n \n
\n {showBtns &&\n \n dispatch(toggleModal(true, 'put', {\n ...action,\n ...convertFormTimestampToObject(action)\n }))}\n schema='tertiary' \n size='small'\n className='tw-flex tw-items-center tw-justify-center tw-h-[24px] tw-w-[24px]'>\n \n dispatch(deleteAction(\n `/auto_plans/${autoPlanId}/actions/${action.id}`,\n action.id,\n `/auto_plans/${autoPlanId}`\n ))} \n size='small'\n schema='tertiary' \n className='tw-flex tw-items-center tw-justify-center tw-h-[24px] tw-w-[24px]'>\n
\n } \n \n {actions?.map(({id}) => {\n const action = find(listOfAllActions, { id });\n\n return \n }\n )}\n
\n )\n}\n\nexport default SpecificDatesActions;\n\nSpecificDatesActions.propTypes = {\n actions: arrayOf(shape({}))\n};\n\nSpecificDatesActions.defaultProps = {\n actions: [{\n assigned_to_id: null,\n assigned_to_role: 'owner',\n assigned_to_type: null,\n auto_plan_id: \"ed325347-400b-4423-a073-e24f9bc32a12\",\n contingent: true,\n delay: \"0\",\n delay_factor: 1,\n delay_unit: \"days\",\n instructions: \"xx\",\n name: \"neww task\",\n note: \"yy\",\n priority: 3,\n run_time: \"17:00\",\n day_month_year: '15/05/2024',\n schedule_type: \"computed_time\",\n type: \"Task\",\n }]\n}\n","import React, { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport { CalendarDaysSolidV6, ChevronDownSolidV6, ChevronUpSolidV6 } from \"@shared/v2/Icomoon\";\nimport { primaryDisabled, headline2 } from \"@shared/styles\";\nimport AddNewActions from \"../AddNewActions\";\nimport { useTimeline } from \"../../../reducers/autoPlanEdit\";\nimport { toggleEmailActionModal, toggleTaskActionModal, toggleTextActionModal } from \"../../actions/autoPlansActionCreators\";\nimport SpecificDatesActions from \"./SpecificDatesActions\";\n\nconst SpecificDatesAddNewActions = () => {\n const dispatch = useDispatch()\n \n return (\n \n setExpand(!expand)}\n onKeyDown={() => setExpand(!expand)} \n role=\"button\"\n tabIndex=\"0\"\n className={`tw-flex tw-items-center ${hasActions ? \n 'tw-text-gray-base' : ''}`}>\n
\n {expand &&\n <>\n \n setValue(e.target.value)}\n isRequired/>\n
\n);\n\nexport default TaskDetailField;\n\nTaskDetailField.propTypes = {\n value: string, \n setValue: func\n}\n\nTaskDetailField.defaultProps = {\n value: '', \n setValue: () => {}\n}","import React, { useState } from \"react\";\nimport { func, string } from \"prop-types\";\nimport moment from \"moment\";\n\nimport RadioButton from \"@shared/v2/RadioButton\";\nimport DatePicker from \"@shared/v2/DatePicker\";\n// import Checkbox from \"@shared/v2/Checkbox\";\n\nimport { primaryLight, subtleM } from \"@shared/styles\";\nimport { Delay, DelayAndScheduleLabel, Schedule } from \"../ActionFormHelpers\";\nimport { checkIfDateStringIsWithinRange } from \"../../helpers\";\n\nconst ComputedTimeOptions = () => (\n {value ? value.length : 0} / 255
\n \n
\n)\n\nconst EventOptions = () => (\n \n
\n)\n\n// TODO: Reenable when B/E is ready\n// eslint-disable-next-line no-unused-vars\nconst DateTime = ({ setState, value }) => {\n // eslint-disable-next-line no-unused-vars\n const [checked, setChecked] = useState('specificDateAndTime')\n const setCheckedHandlr = (e) => setChecked(e.target.value);\n\n return (\n \n
\n
\n )\n}\n\nexport default DateTime;\n\nDateTime.propTypes = { \n setState: func.isRequired,\n value: string\n}\n\nDateTime.defaultProps = { \n value: null\n}","import React from \"react\";\nimport { func, number, oneOfType, string } from \"prop-types\";\n\nimport RadioButton from \"@shared/v2/RadioButton\";\nimport FieldLabel from \"@shared/v2/FieldLabel\";\nimport { bodyS } from \"@shared/styles\";\n\nconst PriorityRadio = ({ value, setValue }) => (\n \n
\n {/*
\n \n {checked === 'computedTime' &&\n \n
\n } \n {/* TOOD: Re-enable when B/E is ready */}\n {/* Due
\n \n setContingentValue(!contingent)}/>\n Make Contingent (Due time auto-updates based on when the previous action is completed)\n
*/}\n \n
\n);\n\nexport default PriorityRadio;\n\nPriorityRadio.propTypes = {\n value: oneOfType([string, number]).isRequired,\n setValue: func.isRequired,\n};\n","import React from \"react\";\nimport { func, string } from \"prop-types\";\nimport Button from \"@shared/v2/Button\";\nimport { PlusSolidV6 } from \"@shared/v2/Icomoon\";\n\nconst BtnToggle = ({ label, className , onClick}) => (\n \n {Array.from({ length: 9 }, (_, index) => index + 1).map((n) => (\n setValue(n)}\n />\n ))}\n
\n \n Highest\n Lowest\n
\n \n
\n)\n\nexport default TaskInputToggle;\n\nTaskInputToggle.propTypes = {\n label: string.isRequired, \n textareaId: string.isRequired,\n value: string,\n onClose: func.isRequired,\n setValue: func.isRequired,\n show: bool\n};\n\nTaskInputToggle.defaultProps = {\n value: '',\n show: false\n};","import React, { useEffect, useState } from \"react\";\nimport { func, string } from \"prop-types\";\nimport BtnToggle from \"../BtnToggle\";\nimport TaskInputToggle from \"../TaskActionModal/TaskInputToggle\";\n\nconst TaskToggles = ({setInstructions, setNotes, instructions, notes}) => {\n const [isInstructionsOpen, setIsInstructionsOpen] = useState(false);\n const [isNotesOpens, setIsNotesOpen] = useState(false);\n\n useEffect(() => {\n if(instructions.trim().length){\n setIsInstructionsOpen(true)\n }\n }, [instructions])\n\n useEffect(() => {\n if(notes.trim().length){\n setIsNotesOpen(true)\n }\n }, [notes])\n\n return (\n <>\n \n setValue(text)}\n /> \n
\n {label}
\n \n \n setValue('')}\n size=\"l\" />\n \n
\n \n setValue(e.target.value)}\n multiline\n />\n
\n \n {!isInstructionsOpen &&\n setIsInstructionsOpen(true)}/>\n } \n {!isNotesOpens &&\n setIsNotesOpen(true)}/>\n } \n
\n \n
\n { !isBccOn &&\n setBcc(true)}\n />\n }\n {isBccOn &&\n setCCType(e.target.value)}\n people={bccPeopleUuids}\n emails={bccEmails}\n roles={bccRoleUuids}\n onOptionSelect={onSelect}\n onOptionRemove={onRemove}\n />\n }\n
\n)}\n\nexport default BCCField;\n\nBCCField.propTypes = {\n onSelect: func.isRequired, \n onRemove: func.isRequired,\n bccEmails: arrayOf(shape({})), \n bccPeopleUuids: arrayOf(shape({})), \n bccRoleUuids: arrayOf(shape({})), \n}\n\nBCCField.defaultProps = {\n bccEmails: [], \n bccPeopleUuids: [], \n bccRoleUuids: []\n}","/* eslint-disable camelcase */\n/* eslint-disable no-param-reassign */\n/* eslint-disable class-methods-use-this */\n/* eslint-disable jsx-a11y/label-has-associated-control */\n/* global tinymce */\nimport React, { useEffect, useState } from \"react\";\nimport { produce } from \"immer\";\nimport axios from \"axios\";\nimport moment from \"moment\";\nimport { tryCatchHandlr } from \"@shared/Utilities\";\nimport Button from \"@shared/v2/Button\";\nimport { arrayOf, bool, func, shape, string } from \"prop-types\";\nimport Modal from \"@shared/v2/Modal\";\nimport FieldLabel from \"@shared/v2/FieldLabel\";\nimport BrivityTextEditor from \"@shared/BrivityTextEditor\";\nimport AiAssistant from \"@shared/AiAssistant\";\nimport useSubjectLineLimitError, { isWithinSubjectLineLimit } from \"@shared/hooks/useSubjectLineLimitError\";\nimport EmailSubjectField from \"./EmailSubjectField\";\nimport EmailTemplateDropdown from \"./EmailTemplateDropdown\";\nimport CCRadioButtons from \"./CCRadioButtons\";\nimport BCCField from \"./BCCField\";\nimport DateTime from \"../DateTime\";\nimport AssignToDropdown from \"../AssignToDropdown\";\nimport { convertDateFormat, formatDateAndTimeToDatePicker, onSaveDateAdapter } from \"../../helpers\";\nimport ErrorInModal from \"../ErrorInModal\";\nimport { useSpecificActionSubmit } from \"../../../reducers/autoPlanEdit\";\n\nconst CC_TYPE_TO_STATE_MAP = {\n Email: 'cc_emails',\n Role: 'cc_role_uuids',\n Person: 'cc_people_uuids',\n}\n\nconst BCC_TYPE_TO_STATE_MAP = {\n Email: 'bcc_emails',\n Role: 'bcc_role_uuids',\n Person: 'bcc_people_uuids',\n}\n\nconst DEFAULT_STATE = {\n name: '',\n template_id: null,\n template_body: '',\n assigned_to_id: null,\n assigned_to_role: 'owner',\n assigned_to_type: null,\n run_time: \"08:00\",\n day_month_year: moment().format('DD/MM/YYYY'),\n delay_unit: 'days',\n type: \"Email\",\n bcc_emails: [],\n bcc_people_uuids: [],\n bcc_role_uuids: [],\n cc_emails: [],\n cc_people_uuids: [],\n cc_role_uuids: [],\n}\n\nconst loadLabelsForCC = (roles, people) => axios({\n method: \"get\",\n url: \"/auto_plans/serialized_email_recipients\",\n params: { people_uuids: (people || []), role_uuids: (roles || []) },\n headers: {\n \"X-CSRF-Token\": ReactOnRails.authenticityToken(),\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n})\n\nconst EmailActionModal = ({ show, onHide, onSave, form, emailTemplates, assignedToOptions, isSubmitting, autoPlanId, placeholders }) => {\n const formSubmitAction = useSpecificActionSubmit()\n const {\n errorMsg,\n setErrorTrigger\n } = useSubjectLineLimitError();\n const [state, setState] = useState({\n ...DEFAULT_STATE,\n ...form,\n auto_plan_id: autoPlanId,\n });\n\n useEffect(() => {\n (async () => {\n if (show) {\n const [ccRes] = await tryCatchHandlr(loadLabelsForCC(form.cc_role_uuids, form.cc_people_uuids));\n const [bccRes] = await tryCatchHandlr(loadLabelsForCC(form.bcc_role_uuids, form.bcc_people_uuids));\n\n setState({\n ...DEFAULT_STATE,\n ...form,\n auto_plan_id: autoPlanId,\n cc_people_uuids: ccRes.data.people ? ccRes.data.people : [],\n cc_role_uuids: ccRes.data.roles ? ccRes.data.roles : [],\n bcc_people_uuids: bccRes.data.people ? bccRes.data.people : [],\n bcc_role_uuids: bccRes.data.roles ? bccRes.data.roles : [],\n cc_emails: form.cc_emails ? form.cc_emails.map(value => ({ label: value, value })) : [],\n bcc_emails: form.bcc_emails ? form.bcc_emails.map(value => ({ label: value, value })) : [],\n })\n }\n })()\n }, [show])\n\n const setStateHandlr = (key) => (val) => setState(produce(state, (draft) => {\n draft[key] = val\n }))\n\n\n const onHideHandlr = () => {\n setState({\n ...DEFAULT_STATE,\n auto_plan_id: autoPlanId,\n });\n onHide();\n }\n\n return (\n \n
\n \n \n tinymce?.activeEditor?.execCommand(\n \"mceInsertContent\",\n false,\n (text || \"\").replace(/\\r\\n|\\r|\\n/g, \"
\"),\n )\n }\n />\n
\n \"),\n )\n }\n />\n
\n
\n )\n}\n\nexport default TextField;\n\nTextField.propTypes = {\n setValue: func.isRequired,\n value: string, \n options: arrayOf(shape({})),\n}\n\nTextField.defaultProps = {\n value: '', \n options: []\n}","/* eslint-disable camelcase */\n/* eslint-disable no-param-reassign */\nimport React from \"react\";\nimport { produce } from \"immer\";\nimport { arrayOf, bool, func, shape, string } from \"prop-types\";\nimport Modal from \"@shared/v2/Modal\";\nimport Button from \"@shared/v2/Button\";\nimport moment from \"moment\";\n\nimport TextField from \"./TextField\";\nimport DateTime from \"../DateTime\";\nimport AssignToDropdown from \"../AssignToDropdown\";\nimport { convertDateFormat, formatDateAndTimeToDatePicker, onSaveDateAdapter } from \"../../helpers\";\nimport { useFormState } from \"../../hooks\";\nimport ErrorInModal from \"../ErrorInModal\";\nimport { useSpecificActionSubmit } from \"../../../reducers/autoPlanEdit\";\n\nconst DEFAULT_STATE = {\n type:\"Text\",\n template_body: \"\",\n assigned_to_type: null,\n assigned_to_role: 'owner',\n assigned_to_id: null,\n run_time: \"08:00\",\n day_month_year: moment().format('DD/MM/YYYY'),\n delay_unit: 'days',\n}\n\nconst TextActionModal = ({ show, onHide, onSave, autoPlanId, placeholders, assignedToOptions, form, isSubmitting }) => {\n const formSubmitAction = useSpecificActionSubmit()\n const { state, setState, setStateHandlr } = useFormState({\n defaultState: DEFAULT_STATE,\n form,\n autoPlanId,\n show\n });\n\n const onHideHandlr = () => {\n setState({\n ...DEFAULT_STATE,\n auto_plan_id: autoPlanId,\n });\n onHide();\n }\n\n return (\n \n {\n setPlaceHoldr(e);\n insertPlaceholder(e.value);\n }}\n options={options}/> \n
\n \n setValue(e.target.value)}\n textareaId=\"sp_text_message\"\n multiline/>\n
\n \n setValue(text)}\n /> \n
\n \n
\n \n );\n};\n\nAutoPlanEdit.propTypes = {\n assignedForOptions: PropTypes.shape().isRequired,\n assignedToOptions: PropTypes.shape().isRequired,\n autoPlanId: PropTypes.string.isRequired,\n autoPlanPath: PropTypes.string.isRequired,\n autoPlan: PropTypes.objectOf(PropTypes.any).isRequired,\n autoPlanForm: PropTypes.objectOf(PropTypes.any).isRequired,\n autoPlanPreferencesForm: PropTypes.objectOf(PropTypes.any).isRequired,\n emailTemplates: PropTypes.arrayOf(PropTypes.any).isRequired,\n getAutoPlan: PropTypes.func.isRequired,\n handleAutoPlanChange: PropTypes.func.isRequired,\n isEditingName: PropTypes.bool.isRequired,\n isEditingPreferences: PropTypes.bool.isRequired,\n isFetching: PropTypes.bool.isRequired,\n milestones: PropTypes.arrayOf(PropTypes.any).isRequired,\n peoplePlaceholders: PropTypes.arrayOf(PropTypes.any).isRequired,\n resetAutoPlanPreferencesForm: PropTypes.func.isRequired,\n saveAutoPlanName: PropTypes.func.isRequired,\n saveAutoPlanPreferences: PropTypes.func.isRequired,\n toggleEdit: PropTypes.func.isRequired,\n transactionPlaceholders: PropTypes.arrayOf(PropTypes.any).isRequired,\n updateAutoPlanPreferencesForm: PropTypes.func.isRequired,\n};\n\nexport default AutoPlanEdit;\n","import { connect } from 'react-redux';\nimport AutoPlanEdit from '../components/AutoPlanEdit';\nimport * as actions from '../actions/autoPlanActionCreators';\n\n// Which part of the Redux global state does our component want to receive as props?\nconst mapStateToProps = (state) => ({...state.autoPlanEdit});\n\n// Don't forget to actually use connect!\n// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples\nexport default connect(mapStateToProps, actions)(AutoPlanEdit);\n","import React, { useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport FieldLabel from \"@shared/v2/FieldLabel\";\n\nconst AutoPlanStateSelect = ({ previousSelectedStates, togglePlanDropdown }) => {\n function checkState(inputId) {\n document.getElementById(inputId).checked = true;\n }\n useEffect(() => {\n if (previousSelectedStates) {\n previousSelectedStates.forEach((state) => {\n if (state === \"assigned_plans_none\") {\n togglePlanDropdown();\n }\n checkState(state);\n });\n }\n }, []);\n\n return (\n \n \n \n \n \n \n \n {autoPlan && (\n saveAutoPlanName(autoPlanPath, autoPlanForm)}\n name={autoPlanForm.name}\n />\n )}\n
\n \n
\n \n \n \n \n \n {autoPauseReplyOrExpireName && (\n
\n \n updateAutoPlanPreferencesForm(\"status_on_complete\", opt.value)}\n />\n
\n \n \n \n \n \n \n
\n \n
\n \n {isEditingPreferences && (\n
\n \n
\n
\n \n {autoPlan.plan_type} Plan\n
\n )}\n \n \n 0\n }\n onClick={(e) => updateAutoPlanPreferencesForm(e.target.name, e.target.value)}\n labelClassName=\"tw-text-gray-base tw-text-[14px]\"\n containerClassName=\"tw-mr-[12px] tw-cursor-pointer\"\n label=\"Yes, To\"\n />\n \n updateAutoPlanPreferencesForm(\"auto_pause_for_status\", opt.value)\n }\n />\n
\n \n \n updateAutoPlanPreferencesForm(e.target.name, e.target.value)}\n labelClassName=\"tw-text-gray-base tw-text-[14px]\"\n containerClassName=\"tw-mr-[12px] tw-cursor-pointer\"\n label=\"No\"\n />\n
\n \n saveAutoPlanPreferences(autoPlanPath, autoPlanPreferencesForm)}\n className=\"m-r-10\"\n >\n Save\n \n \n
\n )}\n \n \n \n \n \n
\n \n
\n \n Actions\n
\n \n \n
\n
\n \n
\n );\n};\n\nAutoPlanStateSelect.propTypes = {\n previousSelectedStates: PropTypes.arrayOf(PropTypes.string).isRequired,\n togglePlanDropdown: PropTypes.func.isRequired,\n};\n\nexport default AutoPlanStateSelect;\n","/* eslint-disable react/prop-types */\nimport React, { useMemo, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport Checkbox from \"@shared/v2/Checkbox\";\n\nimport Dropdown from \"..\";\n\nexport const CheckboxGroupHeading = ({ componentProps, data, children }) => {\n const { value: selectedOptions, onChange: updateSelectedOptions } = componentProps.selectProps;\n\n const groupOptions = useMemo(\n () => data.options.filter((groupOption) => !groupOption.isDisabled),\n [data.options],\n );\n\n const selectedGroupOptions = useMemo(\n () =>\n groupOptions.filter((groupOption) =>\n selectedOptions.some((selectedOption) => groupOption.value === selectedOption.value),\n ),\n [groupOptions, selectedOptions],\n );\n\n const checked = useMemo(\n () => selectedGroupOptions.length === groupOptions.length,\n [groupOptions, selectedGroupOptions],\n );\n\n const indeterminate = useMemo(\n () => selectedGroupOptions.length > 0 && selectedGroupOptions.length < groupOptions.length,\n [groupOptions, selectedGroupOptions],\n );\n\n const selectAll = useCallback(() => {\n updateSelectedOptions([\n ...selectedOptions,\n ...groupOptions.filter(\n (groupOption) =>\n !selectedOptions.some((selectedOption) => groupOption.value === selectedOption.value),\n ),\n ]);\n }, [groupOptions, selectedGroupOptions]);\n\n const selectNone = useCallback(() => {\n updateSelectedOptions(\n selectedOptions.filter(\n (selectedOption) => !groupOptions.some((groupOption) => selectedOption.value === groupOption.value),\n ),\n );\n }, [groupOptions, selectedGroupOptions]);\n\n const handleClick = useCallback(() => {\n if (indeterminate || !checked) {\n selectAll();\n } else {\n selectNone();\n }\n }, [checked, indeterminate, selectAll, selectNone]);\n\n return (\n \n
\n \n {autoPlans.length > 0 && (\n setSelectedNames(option)}\n ctrlName=\"leads_filter[selected_auto_plan_name_filters][ids][]\"\n id=\"auto_plan_name_filter\"\n />\n )}\n {selectedNames.map((option) => (\n
\n
\n );\n};\n\nexport default AutoPlanNameSelect;\n\nAutoPlanNameSelect.propTypes = {\n isDisabled: bool,\n previousSelectedPlanIds: arrayOf(string),\n};\n\nAutoPlanNameSelect.defaultProps = {\n isDisabled: false,\n previousSelectedPlanIds: [],\n};\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport \"../Filters.sass\";\nimport AutoPlanStateSelect from \"./AutoPlanStateSelect\";\nimport AutoPlanNameSelect from \"./AutoPlanNameSelect\";\n\nconst AutoPlanFilters = ({ previousSelectedPlanIds, previousSelectedStates }) => {\n const [isPlanDropdownDisabled, setisPlanDropdownDisabled] = useState(false);\n\n const togglePlanDropdown = () => {\n setisPlanDropdownDisabled((isDisabled) => !isDisabled);\n };\n\n return (\n <>\n \n
\n \n \n \n\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n \n {platformAccount && (\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n onShareAutoPlan(autoPlan.id)}\n />\n )}\n\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n onDeleteAutoPlan(autoPlan.id)}\n />\n
\n \n \n
\n);\n\nexport default SharedEmail;\n\nSharedEmail.propTypes = {\n email: PropTypes.string.isRequired,\n handleRemoveEmail: PropTypes.func.isRequired,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Modal, Button, FormGroup, Input, CancelButton } from \"../../shared/v1\";\nimport SharedEmail from \"./SharedEmail\";\nimport Error from \"../../shared/Error\";\n\nexport default class ShareAutoPlanModal extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n sharedEmails: [],\n nextEmailValue: \"\",\n copiedPlan: false,\n };\n }\n\n handleKeyDown = (e) => {\n const { nextEmailValue, sharedEmails } = this.state;\n // Handle backspace\n if (e.which === 8) {\n if (nextEmailValue === \"\" && sharedEmails.length > 0) {\n this.handleRemoveEmail(sharedEmails.last());\n }\n }\n // Handle enter or spacebar\n else if (e.which === 13 || e.which === 32) {\n const nextEmail = nextEmailValue;\n if (nextEmail !== \"\") {\n this.setState((prevState) => ({\n sharedEmails: prevState.sharedEmails.concat(nextEmail),\n nextEmailValue: \"\",\n copiedPlan: false,\n }));\n }\n }\n };\n\n handleChange = (e) => {\n const value = e.target.value.trim();\n this.setState({ nextEmailValue: value });\n };\n\n handleRemoveEmail = (emailToRemove) => {\n this.setState((prevState) => {\n const emailAfterRemoval = prevState.sharedEmails.filter((email) => email !== emailToRemove);\n\n return {\n sharedEmails: emailAfterRemoval,\n };\n });\n // eslint-disable-next-line react/no-string-refs\n this.refs.textInput.focus();\n };\n\n handleCloseModal = () => {\n const { closeAutoPlanShareModal } = this.props;\n this.setState({ sharedEmails: [], nextEmailValue: \"\", copiedPlan: false });\n closeAutoPlanShareModal();\n };\n\n allEmails = () => {\n const { sharedEmails, nextEmailValue } = this.state;\n return sharedEmails.concat(nextEmailValue).filter((elem) => elem);\n };\n\n copySharingLink = () => {\n // eslint-disable-next-line react/no-string-refs\n const copyText = this.refs.sharingAutoPlanLink;\n copyText.select();\n document.execCommand(\"copy\");\n this.setState({ copiedPlan: true });\n };\n\n render() {\n const { copiedPlan, sharedEmails, nextEmailValue } = this.state;\n const {\n activeAutoPlanId,\n autoPlanName,\n emailErrors,\n isAutoPlanShareModalOpen,\n shareAutoPlan,\n sharingLink,\n } = this.props;\n return (\n \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n handleRemoveEmail(email)} />\n {email}\n
\n \n Sharing this Auto Plan with another Brivity account will also share any custom roles and dates\n associated with the plan.\n
\n \n\n Share this plan via a link or enter the email addresses of the Brivity account owners or admins\n you want to share the plan with. If you share the plan via email, they will be notified via email\n and will need to accept the plan on the "Shared with me" tab in Auto Plans.\n
\n\n \n {copiedPlan ? \"Copied\" : \"Copy\"}\n \n \n
\n \n {sharedEmails.map((email, index) => (\n // eslint-disable-next-line react/no-array-index-key\n
\n \n {intents[trigger.intent] || \"Any\"}\n
\n \n \n \n
\n \n )}\n {trigger.state == \"disabled\" && (\n \n \n
\n \n )}\n \n {hasError && \n \n onTriggerChange(\"auto_plan_id\", opt.value)}\n placeholder=\"Select a Plan\"\n isSearchable={true}\n isClearable={false}\n options={autoPlanOptions(autoPlans)}\n />\n \n
\n \n\n \n \n
\n \n\n \n \n onTriggerChange(\"intent\", opt.value)}\n isSearchable={false}\n isClearable={false}\n options={intentOptions}\n />\n \n\n onTriggerChange(\"source_slug\", opt.value)}\n isClearable={false}\n options={[{ label: \"Any\", value: \"any\" }].concat(sources)}\n />\n \n
\n \n\n \n \n onTriggerChange(\"status\", opt.value)}\n value={triggerForm && triggerForm.status}\n isSearchable={false}\n isClearable={false}\n options={statusOptions}\n />\n \n onTriggerChange(\"tag\", opt.value)}\n isClearable={false}\n options={[{ label: \"Any\", value: \"any\" }].concat(tags)}\n />\n \n
\n \n\n \n \n
\n \n\n {false && (\n \n onTriggerChange(\"new_imported_contact\", !triggerForm.new_imported_contact)}\n checked={triggerForm.new_imported_contact || false}\n >\n Include new imported contacts\n \n \n \n )}\n\n \n \n
\n \n
\n );\n }\n}\nexport default TriggerForm;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Trigger from \"./Trigger\";\nimport \"./Triggers.scss\";\nimport TriggerForm from \"./TriggerForm\";\nimport \"./TriggerTable.scss\";\nimport \"../../shared/StandardTable.scss\";\nimport { Modal, CancelButton, DeleteButton, Row, Col } from \"../../shared/v1\";\nimport TextButton from \"../../shared/v2/TextButton/TextButton\";\n\nclass Triggers extends React.Component {\n isModalOpen() {\n const { isTriggerDeleteModalOpen, isTriggerModalOpen } = this.props;\n return isTriggerDeleteModalOpen || isTriggerModalOpen;\n }\n\n renderTriggerDeleteModal = () => {\n const {\n isTriggerDeleteModalOpen,\n deleteTrigger,\n closeTriggerDeleteModal,\n isDeletingTrigger,\n triggerToDelete,\n triggersPath,\n getTriggers,\n } = this.props;\n if (!triggerToDelete) {\n return;\n }\n const deletePath = `${triggersPath}/${triggerToDelete.id}`;\n const deleteCallback = () => {\n getTriggers(triggersPath);\n };\n\n return (\n Apply Auto Plan
\n \n No auto plan triggers
;\n\n renderLoadingState = () => Loading trigger..
;\n\n render() {\n const {\n triggers,\n showTriggerModal,\n activeTrigger,\n autoPlans,\n openTriggerDeleteModal,\n getTriggers,\n triggersPath,\n updateTrigger,\n isFetchingTriggers,\n } = this.props;\n const hasTriggers = triggers?.length > 0;\n\n return (\n \n
\n );\n }\n}\nexport default Triggers;\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Button, FormGroup, Col, Input, CancelButton } from \"../../shared/v1\";\nimport Error from \"../../shared/Error\";\n\nconst AutoPlansForm = ({\n autoPlanForm: propsAutoPlanForm,\n onCloseAction,\n autoPlansCreatePath,\n accountUuid,\n onFormChange,\n onSubmitAction,\n isSubmitting,\n hasError,\n errorMessage,\n planType,\n}) => {\n const autoPlanForm = propsAutoPlanForm || {};\n const treatAssignableAsAssignedFor = planType === \"people\";\n const formToSubmit = {\n ...autoPlanForm,\n account_id: accountUuid,\n plan_type: planType,\n treat_assignable_as_assigned_for: treatAssignableAsAssignedFor,\n };\n\n return (\n \n People Auto Plan Triggers\n showTriggerModal(activeTrigger)}>\n Add Trigger\n \n
\n \n \n
\n
\n\n {this.isModalOpen() && this.renderModal()}\n \n {!hasTriggers && !isFetchingTriggers && this.renderEmptyState()}\n {!hasTriggers && isFetchingTriggers && this.renderLoadingState()}\n\n {hasTriggers && (\n \n
\n )}\n {triggers &&\n triggers.map((trigger) => (\n
\n \n \n Please specify name for your new auto plan here. In Auto Plans, tasks\n and interactions will be created when the plan is applied.\n
\n\n\n Contact support at {supportPhoneNumber}{\" \"}\n
\n )}\n \n }\n >\n How would you like to remove this Auto Plan?
\n\n Auto Plan: {autoPlanName}\n
\n\n
\n \n );\n};\n\nexport default DeleteAutoPlanModal;\n\nDeleteAutoPlanModal.propTypes = {\n isAutoPlanDeleteModalOpen: PropTypes.bool.isRequired,\n deleteAutoPlan: PropTypes.func.isRequired,\n closeAutoPlanDeleteModal: PropTypes.func.isRequired,\n isDeletingAutoPlan: PropTypes.bool.isRequired,\n activeAutoPlanId: PropTypes.string.isRequired,\n autoPlansRootPath: PropTypes.string.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n autoPlans: PropTypes.objectOf(PropTypes.any).isRequired,\n supportPhoneNumber: PropTypes.string.isRequired,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Modal } from \"../../../shared/v1\";\nimport AssignedPlanDetailPreview from \"../../../AssignedPlans/components/AssignedPlanDetailPreview\";\n\nconst PreviewAutoPlanModal = ({\n closeModal,\n isAutoPlanPreviewModalOpen,\n autoPlanPreview,\n previewAutoPlanAction,\n activeAutoPlanActionId,\n}) => (\n \n setDeleteNow(false)}\n disabled={isDeletingAutoPlan}\n label={\n <>\n Remove this Auto Plan from all contacts and then delete the template\n
\n \n Support will need to help you remove this Auto Plan from your contacts. You can contact\n support via chat, or by calling {supportPhoneNumber}. All triggers associated with this Auto\n Plan will also be deleted.\n
\n \n }\n />\n \n setDeleteNow(true)}\n disabled={isDeletingAutoPlan}\n label={\n <>\n Delete this Auto Plan template without removing it from contacts\n
\n \n Warning: You will not be able to remove this Auto Plan from contacts after it has\n been deleted.\n
\n \n }\n />\n \n
\n);\n\nexport default SortCarets;\n\nSortCarets.propTypes = {\n isActive: PropTypes.bool.isRequired,\n dir: PropTypes.string.isRequired,\n};\n","import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { sortBy } from \"lodash\";\nimport { LoadMoreButton, Row, Col } from \"../../shared/v1\";\nimport AutoPlan from \"./AutoPlan\";\nimport \"./AutoPlans.sass\";\nimport \"../../shared/StandardTable.scss\";\nimport Error from \"../../shared/Error\";\nimport ShareAutoPlanModal from \"./ShareAutoPlanModal\";\nimport DismissibleAlert from \"../../shared/DismissibleAlert\";\nimport TextButton from \"../../shared/v2/TextButton/TextButton\";\nimport Triggers from \"../../Triggers/components/Triggers\";\nimport NewAutoPlanModal from \"./modals/NewAutoPlanModal\";\nimport DeleteAutoPlanModal from \"./modals/DeleteAutoPlanModal\";\nimport PreviewAutoPlanModal from \"./modals/PreviewAutoPlanModal\";\nimport { autoPlanNameLabel } from \"./helpers\";\nimport { Search } from \"../../shared/v2/Icomoon\";\nimport TextInput from \"../../shared/v2/TextInput/TextInput\";\nimport SortCarets from \"./SortCarets\";\n\nconst TableLabel = ({ type }) => <>{type === \"transactions\" ? \"Transaction\" : \"People\"} Plans;\n\nTableLabel.propTypes = { type: PropTypes.string.isRequired };\n\nconst AutoPlans = ({\n accountUuid,\n activeAutoPlanActionId,\n activeAutoPlanId,\n appRootUrl,\n autoPlanForm,\n autoPlanFormUpdate,\n autoPlanPreview,\n autoPlans,\n autoPlansPath,\n autoPlansRootPath,\n baseLeadFilterPath,\n closeAutoPlanDeleteModal,\n closeAutoPlanShareModal,\n closeModal,\n closeNewAutoPlanModal,\n closeTriggerDeleteModal,\n closeTriggerModal,\n createTrigger,\n deleteAutoPlan,\n deleteTrigger,\n displayAlert,\n emailErrors,\n errorMessage,\n getAutoPlans,\n getTriggers,\n handleClone,\n handleDismissAutoPlanSharedAlert,\n hasError,\n isAutoPlanDeleteModalOpen,\n isAutoPlanPreviewModalOpen,\n isAutoPlanShareModalOpen,\n isCloningAutoPlan,\n isDeletingAutoPlan,\n isFetchingAutoPlans,\n isModalOpen,\n isModalSubmitting,\n modalErrorMessage,\n modalHasError,\n numberShared,\n openAutoPlanDeleteModal,\n openAutoPlanShareModal,\n openTriggerDeleteModal,\n planType,\n platformAccount,\n previewAutoPlanAction,\n shareAutoPlan,\n sharedPlanName,\n showAutoPlanPreviewModal,\n showNewAutoPlanModal,\n showTriggerModal,\n sources,\n submitNewAutoPlan,\n supportPhoneNumber,\n tags,\n triggers,\n triggersPath,\n updateTrigger,\n updateTriggerValues,\n}) => {\n const [state, _setState] = useState({\n currentPage: 1,\n orderBy: \"created_at\",\n orderDir: \"desc\",\n search: \"\",\n sortedAutoPlans: [],\n });\n const setState = (newState) => _setState((prevState) => ({ ...prevState, ...newState }));\n const hasAutoPlans = autoPlans?.length > 0;\n const pluralizedAccount = numberShared > 1 ? \"accounts\" : \"account\";\n const showLoadMore = state.sortedAutoPlans.length > state.currentPage * 30;\n const autoPlanName = autoPlanNameLabel(activeAutoPlanId, autoPlans);\n\n useEffect(() => {\n getTriggers(triggersPath);\n getAutoPlans(autoPlansPath, planType);\n }, []);\n\n useEffect(() => {\n const matcher = new RegExp(state.search, \"i\");\n const sortedAutoPlans = sortBy(\n (autoPlans || []).filter((plan) => matcher.test(plan.name)),\n [state.orderBy],\n );\n if (state.orderDir === \"desc\") sortedAutoPlans.reverse();\n setState({ sortedAutoPlans });\n }, [autoPlans, state.search, state.orderBy, state.orderDir]);\n\n return (\n <>\n {planType === \"people\" && (\n \n
\n \n \n \n
\n \n );\n};\n\nexport default AutoPlans;\n\nAutoPlans.propTypes = {\n accountUuid: PropTypes.string.isRequired,\n activeAutoPlanActionId: PropTypes.string.isRequired,\n activeAutoPlanId: PropTypes.string.isRequired,\n appRootUrl: PropTypes.string.isRequired,\n autoPlanForm: PropTypes.shape().isRequired,\n autoPlanFormUpdate: PropTypes.func.isRequired,\n autoPlanName: PropTypes.string.isRequired,\n autoPlanPreview: PropTypes.shape().isRequired,\n autoPlans: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n autoPlansPath: PropTypes.string.isRequired,\n autoPlansRootPath: PropTypes.string.isRequired,\n baseLeadFilterPath: PropTypes.string.isRequired,\n closeAutoPlanDeleteModal: PropTypes.func.isRequired,\n closeAutoPlanShareModal: PropTypes.func.isRequired,\n closeModal: PropTypes.func.isRequired,\n closeNewAutoPlanModal: PropTypes.func.isRequired,\n closeTriggerDeleteModal: PropTypes.func.isRequired,\n closeTriggerModal: PropTypes.func.isRequired,\n createTrigger: PropTypes.func.isRequired,\n deleteAutoPlan: PropTypes.func.isRequired,\n deleteTrigger: PropTypes.func.isRequired,\n displayAlert: PropTypes.func.isRequired,\n emailErrors: PropTypes.arrayOf(PropTypes.string).isRequired,\n errorMessage: PropTypes.string.isRequired,\n getAutoPlans: PropTypes.func.isRequired,\n getTriggers: PropTypes.func.isRequired,\n handleClone: PropTypes.func.isRequired,\n handleDismissAutoPlanSharedAlert: PropTypes.func.isRequired,\n hasError: PropTypes.bool.isRequired,\n isAutoPlanDeleteModalOpen: PropTypes.bool.isRequired,\n isAutoPlanPreviewModalOpen: PropTypes.bool.isRequired,\n isAutoPlanShareModalOpen: PropTypes.bool.isRequired,\n isCloningAutoPlan: PropTypes.bool.isRequired,\n isDeletingAutoPlan: PropTypes.bool.isRequired,\n isFetchingAutoPlan: PropTypes.bool.isRequired,\n isFetchingAutoPlanActions: PropTypes.bool.isRequired,\n isFetchingAutoPlanEmails: PropTypes.bool.isRequired,\n isFetchingAutoPlanPreview: PropTypes.bool.isRequired,\n isFetchingAutoPlanPreviewActions: PropTypes.bool.isRequired,\n isFetchingAutoPlanPreviewEmails: PropTypes.bool.isRequired,\n isFetchingAutoPlans: PropTypes.bool.isRequired,\n isModalOpen: PropTypes.bool.isRequired,\n isModalSubmitting: PropTypes.bool.isRequired,\n modalErrorMessage: PropTypes.string.isRequired,\n modalHasError: PropTypes.bool.isRequired,\n numberShared: PropTypes.number.isRequired,\n openAutoPlanDeleteModal: PropTypes.func.isRequired,\n openAutoPlanShareModal: PropTypes.func.isRequired,\n openTriggerDeleteModal: PropTypes.func.isRequired,\n planType: PropTypes.string.isRequired,\n platformAccount: PropTypes.shape().isRequired,\n previewAutoPlanAction: PropTypes.func.isRequired,\n shareAutoPlan: PropTypes.func.isRequired,\n sharedPlanName: PropTypes.string.isRequired,\n showAutoPlanPreviewModal: PropTypes.func.isRequired,\n showNewAutoPlanModal: PropTypes.func.isRequired,\n showTriggerModal: PropTypes.func.isRequired,\n sources: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n submitNewAutoPlan: PropTypes.func.isRequired,\n supportPhoneNumber: PropTypes.string.isRequired,\n tags: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n triggers: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n triggersPath: PropTypes.string.isRequired,\n updateTrigger: PropTypes.func.isRequired,\n updateTriggerValues: PropTypes.func.isRequired,\n};\n","import axios from 'axios';\n\nconst fetchTriggersSuccess = (triggers) => {\n return {\n type: 'FETCH_TRIGGERS_SUCCESS',\n triggers\n }\n}\n\nconst createTriggerSuccess = (trigger) => {\n return {\n type: 'CREATE_TRIGGER_SUCCESS',\n trigger\n }\n}\n\nconst saveTriggerPending = () => {\n return { type: 'SAVE_TRIGGER_PENDING' }\n}\n\nconst saveTriggerFailure = (errors) => {\n return {\n type: 'SAVE_TRIGGER_FAILURE',\n errorMessage: errors\n }\n}\n\nconst updateTriggerSuccess = (trigger) => {\n return {\n type: 'UPDATE_TRIGGER_SUCCESS',\n trigger\n }\n}\n\nexport const showTriggerModal = (triggerForm) => {\n return {\n type: 'OPEN_TRIGGER_MODAL',\n triggerForm\n }\n }\n\nexport const closeTriggerModal = () => {\n return {\n type: 'CLOSE_TRIGGER_MODAL'\n }\n}\n\nexport const openTriggerDeleteModal = (triggerToDelete) => {\n return {\n type: 'OPEN_TRIGGER_DELETE_MODAL',\n triggerToDelete\n }\n}\n\nexport const closeTriggerDeleteModal = () => {\n return {\n type: 'CLOSE_TRIGGER_DELETE_MODAL'\n }\n}\n\nexport const deleteTriggerPending = () => {\n return {\n type: 'DELETE_TRIGGER_PENDING'\n }\n}\n\nexport const deleteTriggerSuccess = (triggerId) => {\n return {\n type: 'DELETE_TRIGGER_SUCCESS',\n triggerId\n }\n}\n\nexport const deleteTriggerFailure = () => {\n return {\n type: 'DELETE_TRIGGER_FAILURE'\n }\n}\n\nexport const updateTriggerValues = (name, value) => {\n return {\n type: 'UPDATE_TRIGGER_VALUE',\n name,\n value\n }\n}\n\nexport const createTrigger = (triggersPath, formData, callback) => {\n return dispatch => {\n dispatch(saveTriggerPending())\n axios.post(triggersPath, { trigger: formData, authenticity_token: ReactOnRails.authenticityToken() })\n .then(res => {\n dispatch(createTriggerSuccess(res.data))\n if(callback) { dispatch(callback) }\n })\n .catch(err => {\n dispatch(saveTriggerFailure(err.response.data.errors))\n })\n }\n}\n\nexport const updateTrigger = (triggerPath, formData, callback) => {\n return dispatch => {\n dispatch(saveTriggerPending())\n axios.patch(triggerPath, { trigger: formData, authenticity_token: ReactOnRails.authenticityToken() })\n .then(res => {\n dispatch(updateTriggerSuccess(res.data.trigger))\n if(callback) { dispatch(callback) }\n })\n .catch(err => {\n dispatch(saveTriggerFailure(err.response.data.errors))\n })\n }\n}\n\nexport const getTriggers = (triggersPath) => {\n return dispatch => {\n dispatch({ type: 'FETCH_TRIGGERS' })\n axios.get(triggersPath,{\n responseType: 'json',\n contentType: 'application/json'\n }).then(results => {\n dispatch(fetchTriggersSuccess(results.data))\n })\n }\n}\n\nexport const deleteTrigger = (id, path, callback) => {\n return dispatch => {\n dispatch(deleteTriggerPending())\n\n axios.delete(path, { params: {authenticity_token: ReactOnRails.authenticityToken() }})\n .then(res => {\n dispatch(deleteTriggerSuccess(id))\n if(callback) { dispatch(callback) }\n })\n .catch(err => {\n dispatch(deleteTriggerFailure())\n })\n }\n}\n","import { connect } from \"react-redux\";\nimport AutoPlans from \"../components/AutoPlans\";\nimport * as autoPlanActions from \"../actions/autoPlansActionCreators\";\nimport * as triggerActions from \"../../Triggers/actions/triggersActionCreators\";\n\n// Which part of the Redux global state does our component want to receive as props?\nconst mapStateToProps = (state) => ({ ...state.autoPlans, triggers: state.triggers, supportPhoneNumber: state.layout.support.phoneNumber });\n\n// Don't forget to actually use connect!\n// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples\nexport default connect(mapStateToProps, { ...autoPlanActions, ...triggerActions })(AutoPlans);\n","import axios from \"axios\";\nimport { tryCatchHandlr } from \"../shared/Utilities\";\n\nexport const getBusinessSettingsApi = async ({ successCb, errorCb }) => {\n const url = \"/api/v4/business_settings\";\n const [resData, err] = await tryCatchHandlr(axios.get(url, {}));\n if (err) {\n return errorCb(err);\n }\n return successCb(resData);\n};\n\nexport const saveBusinessSettingsApi = async ({ data, successCb, errorCb }) => {\n const url = \"/api/v4/business_settings\";\n const [resData, err] = await tryCatchHandlr(\n axios.patch(url, data, {\n headers: {\n \"x-csrf-token\": window.ReactOnRails.authenticityToken(),\n },\n }),\n );\n if (err) {\n return errorCb(err);\n }\n return successCb(resData);\n};\n\nexport const removeBusinessImageApi = async ({ isTeam, successCb, errorCb }) => {\n const url = `/account/${isTeam ? \"team_logo_image\" : \"broker_image\"}`;\n const [resData, err] = await tryCatchHandlr(\n axios.delete(url, {\n headers: {\n \"x-csrf-token\": window.ReactOnRails.authenticityToken(),\n },\n }),\n );\n if (err) {\n return errorCb(err);\n }\n return successCb(resData);\n};\n","import * as creators from \"./creators\";\nimport { getBusinessSettingsApi, saveBusinessSettingsApi, removeBusinessImageApi } from \"../services\";\n\nexport const loadBusinessSettings = () => async (dispatch) => {\n dispatch(creators.getBusinessSettings());\n const onFailure = (error) => dispatch(creators.getBusinessSettingsError({ error }));\n const onSuccess = (response) => {\n if (response?.data?.error) {\n return onFailure(response?.data?.error);\n }\n return dispatch(creators.getBusinessSettingsSuccess({ data: response.data }));\n };\n return getBusinessSettingsApi({ successCb: onSuccess, errorCb: onFailure });\n};\n\nexport const saveValue = (key, value) => async (dispatch) => {\n const m = { account: {} };\n m.account[key] = value !== undefined ? value : null;\n dispatch(creators.saveBusinessSettings());\n const onFailure = (error) => dispatch(creators.saveBusinessSettingsError({ error }));\n const onSuccess = (response) => {\n if (response?.data?.error) {\n return onFailure(response?.data?.error);\n }\n return dispatch(creators.saveBusinessSettingsSuccess({ data: response.data }));\n };\n return saveBusinessSettingsApi({ data: m, successCb: onSuccess, errorCb: onFailure });\n};\n\nexport const removeImage = (isTeam) => async (dispatch) => {\n dispatch(creators.removeBusinessImage());\n const onFailure = (error) => dispatch(creators.removeBusinessImageError({ error }));\n const onSuccess = (response) => {\n if (response?.data?.error) {\n return onFailure(response?.data?.error);\n }\n return dispatch(creators.removeBusinessImageSuccess({ data: response.data }));\n };\n return removeBusinessImageApi({ isTeam, successCb: onSuccess, errorCb: onFailure });\n};\n\nexport const saveOffice = (model) => async (dispatch) => {\n const m = { account: model };\n dispatch(creators.addOffice());\n const onFailure = (error) => dispatch(creators.addOfficeError({ error }));\n const onSuccess = (response) => {\n if (response?.data?.error) {\n return onFailure(response?.data?.error);\n }\n return dispatch(creators.addOfficeSuccess({ data: response.data }));\n };\n return saveBusinessSettingsApi({ data: m, successCb: onSuccess, errorCb: onFailure });\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst Card = ({ title, action, children }) => (\n \n
\n \n
\n \n showNewAutoPlanModal()}\n >\n Add Plan\n \n
\n \n {hasAutoPlans && (\n \n
\n
\n \n setState({ search: e.target.value })}\n placeholder={`Search ${planType === \"transactions\" ? \"transaction\" : planType} plans`}\n />\n
\n )}\n \n
\n \n {hasError && \n \n {\n if (e.key === \"Enter\") {\n setState({\n orderBy: \"name\",\n orderDir: state.orderDir === \"asc\" ? \"desc\" : \"asc\",\n });\n }\n }}\n onClick={() =>\n setState({\n orderBy: \"name\",\n orderDir: state.orderDir === \"asc\" ? \"desc\" : \"asc\",\n })\n }\n >\n Name
\n \n {\n if (e.key === \"Enter\") {\n setState({\n orderBy: \"name\",\n orderDir: state.orderDir === \"asc\" ? \"desc\" : \"asc\",\n });\n }\n }}\n onClick={() =>\n setState({\n orderBy: \"created_at\",\n orderDir: state.orderDir === \"asc\" ? \"desc\" : \"asc\",\n })\n }\n >\n Created{\" \"}\n
\n )}\n {state.sortedAutoPlans?.slice(0, state.currentPage * 30).map((plan) => (\n showAutoPlanPreviewModal(plan.id)}\n onCloneAction={handleClone}\n onDeleteAutoPlan={openAutoPlanDeleteModal}\n onShareAutoPlan={openAutoPlanShareModal}\n autoPlansRootPath={autoPlansRootPath}\n isCloningAutoPlan={isCloningAutoPlan}\n platformAccount={platformAccount}\n baseLeadFilterPath={baseLeadFilterPath}\n />\n ))}\n {showLoadMore && (\n
\n\n {isModalOpen && (\n No auto plans
\n )}\n\n {!hasAutoPlans && isFetchingAutoPlans && (\n Loading auto plans...
\n )}\n\n {hasAutoPlans && (\n \n setState({ currentPage: state.currentPage + 1 })}\n disabled={isFetchingAutoPlans}\n loading={isFetchingAutoPlans}\n />\n
\n )}\n \n
\n);\n\nCard.propTypes = {\n title: PropTypes.node.isRequired,\n action: PropTypes.node,\n children: PropTypes.node,\n};\n\nCard.defaultProps = {\n children: null,\n action: null,\n};\nexport default Card;\n","const inputUploadFn =\n ({ onError, awsDirectPost, uploadFiles, onAdd, onSave }) =>\n (e) =>\n uploadFiles({\n files: Array.from(e.target.files),\n config: {\n ...awsDirectPost,\n },\n onAdd: (file) => {\n onAdd(file);\n },\n onSuccess: (file) => {\n onSave(file);\n },\n onError: (fileError) => {\n onError(fileError);\n },\n });\nexport default inputUploadFn;\n","import axios from \"axios\";\nimport { random } from \"lodash\";\nimport { tryCatchHandlr } from \"./Utilities\";\n\nconst files = [];\n// Process AWS File\n// - Get upload url from AWS\n// - Upload the file to the AWS url\n\nexport const uploadFiles = ({ files, config = {}, onAdd, onProgress = () => {}, onSuccess, onError }) => {\n const url = config?.bucket;\n const dataFields = JSON.parse(config?.fields);\n if (!dataFields) {\n return;\n }\n onProgress(0);\n const fileProgress = {};\n const groupProgress = (idx, progressEvent) => {\n fileProgress[idx].total = progressEvent.total; // total will be slightly bigger than the file size bc of the extra meta data passed in the request\n fileProgress[idx].completed = progressEvent.loaded;\n\n const totalCompleted = Object.keys(fileProgress)\n .map((k) => fileProgress[k].completed)\n .reduce((prev, cur) => prev + cur, 0);\n\n const totalSize = Object.keys(fileProgress)\n .map((k) => fileProgress[k].total)\n .reduce((prev, cur) => prev + cur, 0);\n onProgress((totalCompleted / totalSize) * 100);\n };\n files.forEach(async (file, idx) => {\n const tmpId = random(0, 100000000, false);\n if (file.size <= 5000000) {\n fileProgress[idx] = { total: file.size, completed: 0 };\n onAdd({ id: tmpId, isLoading: true, name: file.name });\n const formData = new FormData();\n Object.keys(dataFields).forEach((field) => {\n formData.append(field, dataFields[field]);\n });\n formData.append(\"file\", file);\n await saveFile({\n url,\n idx,\n name: file.name,\n formData,\n tmpId,\n onError,\n onProgress: groupProgress,\n onSuccess,\n });\n } else {\n onError({ name: file.name, id: tmpId, uploadError: true });\n }\n });\n};\n\nconst saveFile = async ({ url, idx, name, tmpId, formData, onError, onProgress = () => {}, onSuccess }) => {\n const [resData, err] = await tryCatchHandlr(\n axios.post(url, formData, {\n headers: {\n Accept: \"application/json\",\n \"Content-Type\": \"multipart/form-data\",\n },\n onUploadProgress: (progressEvent) => onProgress(idx, progressEvent),\n }),\n );\n if (err) {\n return onError({ name, id: tmpId, saveError: true });\n }\n const data = new DOMParser().parseFromString(resData.data, \"application/xml\");\n console.log(\"data\", data, data.querySelectorAll(\"PostResponse Location\")[0].innerHTML);\n const path = data.querySelectorAll(\"PostResponse Location\")[0]?.innerHTML;\n const fileName = data.querySelectorAll(\"PostResponse Key\")[0]?.innerHTML?.split(\"/\").last();\n onSuccess({ name: fileName, path, id: tmpId, isLoading: false });\n};\n\nexport const downloadFile = (filePath, id) => {\n axios({\n url: filePath,\n method: \"GET\",\n responseType: \"blob\",\n }).then((response) => {\n const href = URL.createObjectURL(response.data);\n const link = document.createElement(\"a\");\n link.href = href;\n link.setAttribute(\"download\", `${id}.jpg`);\n link.click();\n URL.revokeObjectURL(href);\n });\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Button from \"../../shared/v2/Button\";\nimport { UploadSolidV6 } from \"../../shared/v2/Icomoon\";\n\nconst ActionImage = ({ url, onReplace, onDelete }) => (\n \n
\n {children}\n {title}
\n {action}\n\n 
\n
\n);\n\nActionImage.propTypes = {\n url: PropTypes.string.isRequired,\n onReplace: PropTypes.func.isRequired,\n onDelete: PropTypes.func.isRequired,\n};\n\nexport default ActionImage;\n","import React, { useState, useRef } from \"react\";\nimport { func, shape, string } from \"prop-types\";\nimport { connect } from \"react-redux\";\nimport * as actions from \"../../actions/creators\";\nimport inputUploadFn from \"./helpers\";\nimport { uploadFiles } from \"../../../shared/AWSUploader\";\nimport { UploadSolidV6, SpinnerSolidV3 } from \"../../../shared/v2/Icomoon/Icons\";\nimport ActionImage from \"../ActionImage\";\n\nconst mapStateToProps = (state) => ({\n awsDirectPost: state.businessSettings.awsDirectPost,\n});\n\nconst UploadImage = ({ awsDirectPost, onSave, onRemove, image }) => {\n const ref = useRef();\n const [uploading, setUploading] = useState(false);\n const inputUpload = inputUploadFn({\n onError: () => setUploading(false),\n awsDirectPost,\n uploadFiles,\n onAdd: () => setUploading(true),\n onSave: (file) => {\n setUploading(false);\n onSave(file);\n },\n });\n\n return (\n <>\n \n \n \n
\n \n \n
\n {image <= \"\" && (\n \n Click here to upload or drag and drop images here.\n
\n \n
\n ) : (\n <>\n {image > \"\" && (\n \n onRemove()} onReplace={() => ref.current.click()} />\n
\n )}\n \n )}\n \n Image must be .jpg or .png format and smaller than 5 MB.\n
\n )}\n \n );\n};\nUploadImage.propTypes = {\n awsDirectPost: shape({}).isRequired,\n image: string,\n onSave: func,\n onRemove: func,\n};\n\nUploadImage.defaultProps = {\n image: null,\n onSave: null,\n onRemove: null,\n};\nexport default connect(mapStateToProps, actions)(UploadImage);\n","/* eslint-disable camelcase */\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport * as creators from \"../actions/creators\";\nimport * as api from \"../actions/api\";\nimport Card from \"./Card\";\nimport UploadImage from \"./UploadImage\";\n\nconst BrandingCard = ({ model, setValue, saveValue, removeImage }) => (\n\n
\n \n {\n setValue(\"team_logo_image_url\", file.path);\n saveValue(\"team_logo_image_temporary_url\", file.path);\n }}\n onRemove={() => {\n removeImage(true);\n setValue(\"team_logo_image_url\", null);\n }}\n />\n
\n \n Team Logo\n
\n\n {\n setValue(\"broker_image_url\", file.path);\n saveValue(\"broker_image_temporary_url\", file.path);\n }}\n onRemove={() => {\n removeImage();\n setValue(\"broker_image_url\", null);\n }}\n />\n
\n \n Brokerage Logo\n
\n\n setOfficeValue(\"name\", v.target.value)}\n label=\"Office Name\"\n isRequired\n />\n
\n \n setOfficeValue(\"phone\", v.target.value)}\n label=\"Phone\"\n />\n setOfficeValue(\"fax\", v.target.value)}\n label=\"Fax\"\n />\n
\n \n \n setOfficeValue(\"address_attributes\", {\n ...model.address_attributes,\n street_address: v.target.value,\n })\n }\n label=\"Street Address\"\n isRequired\n />\n
\n \n \n setOfficeValue(\"address_attributes\", { ...model.address_attributes, city: v.target.value })\n }\n label=\"City\"\n />\n \n setOfficeValue(\"address_attributes\", { ...model.address_attributes, locality: v.value })\n }\n options={[\n {\n label: \"States\",\n options: states,\n },\n {\n label: \"Province\",\n options: territories,\n },\n ]}\n />\n \n setOfficeValue(\"address_attributes\", { ...model.address_attributes, postal_code: v.target.value })\n }\n label=\"ZIP / Postal Code\"\n />\n
\n \n \n setOfficeValue(\"address_attributes\", { ...model.address_attributes, country: v.target.value })\n }\n label=\"Country\"\n />\n
\n \n {\n onClose();\n }}\n size=\"medium\"\n schema=\"tertiary\"\n >\n Cancel\n \n \n onAdd(model)}\n size=\"medium\"\n >\n Add\n \n
\n \n {\n onClose();\n }}\n size=\"medium\"\n schema=\"tertiary\"\n >\n CANCEL\n \n \n \n
\n \n \n {renderValue && (\n setEditing(true) : null}\n className={`tw-overflow-hidden tw-flex tw-items-center tw-group tw-p-0 tw-bg-transparent tw-border-0 active:tw-text-[var(--text-button-color)] ${\n !editable ? \"tw-cursor-default\" : \"\"\n }`}\n >\n \n {displayValue ? displayValue(value) : value}\n \n {editable && (\n \n {isDD ? setEditing(true)} className=\"tw-px-0\">\n Add\n \n )}\n {renderEmptyValue && \"—\"}\n {renderEditComp && (\n onChange(val)}\n onBlur={() => setEditing(false)}\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n e.target?.blur();\n setEditing(false);\n }\n }}\n />\n )}\n
\n \n );\n};\n\nDisplayRow.propTypes = {\n title: PropTypes.string.isRequired,\n tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n tooltipIconClassName: PropTypes.string,\n editable: PropTypes.bool.isRequired,\n alwaysEdit: PropTypes.bool,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n onChange: PropTypes.func.isRequired,\n Comp: PropTypes.func,\n onSave: PropTypes.func.isRequired,\n displayValue: PropTypes.func,\n isDD: PropTypes.bool,\n};\n\nDisplayRow.defaultProps = {\n tooltip: null,\n tooltipIconClassName: \"\",\n value: null,\n Comp: null,\n alwaysEdit: false,\n displayValue: null,\n isDD: false,\n};\nexport default DisplayRow;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextInput from \"../../shared/v2/TextInput\";\nimport { PencilSolidV6 } from \"../../shared/v2/Icomoon\";\n\nconst EdiableTitle = ({ value, onChange, editable, onBlur }) => {\n const [focused, setFocused] = useState(false);\n return (\n \n \n {title}\n \n {tooltip && (\n
\n \n {focused ? (\n {\n setFocused(false);\n onBlur();\n }}\n onChange={(e) => onChange(e.target.value)}\n />\n ) : (\n \n {editable ? (\n setFocused(true)}\n >\n {value}{\" \"}\n \n \n )}\n
\n );\n};\n\nEdiableTitle.propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n onBlur: PropTypes.func.isRequired,\n editable: PropTypes.bool,\n};\n\nEdiableTitle.defaultProps = {\n editable: false,\n};\n\nexport default EdiableTitle;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Button from \"../../shared/v2/Button\";\nimport IconButton from \"../../shared/v2/IconButton\";\nimport { TrashAltSolidV3 } from \"../../shared/v2/Icomoon\";\nimport Card from \"./Card\";\nimport DisplayRow from \"./DisplayRow\";\nimport EditableTitle from \"./EditableTitle\";\n\nconst OfficeCard = ({ model, setValue, saveValue, onAdd, onRemove, editable, SECTIONS }) => (\n \n {onRemove && (\n onRemove(model?.id)}>\n \n )}\n {onAdd && (\n \n + OFFICE\n \n )}\n
\n }\n >\n {SECTIONS.map((sec) => (\n \n {/*\n Not sure why ESLint considers this to be an anchor.\n Is it because it's called Link? There is no `a` element in the DOM tree.\n That's why we just ignored this ESLint rule here.\n */}\n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n \n \n
\n );\n\n const hasSecondaryAction = secondaryActionLabel && onSecondaryActionButtonClick;\n\n const trailing = !hideActions ? (\n <>\n \n\n {hasSecondaryAction && (\n \n )}\n \n ) : null;\n\n return (\n \n
\n );\n }\n\n return (\n \n {(hasError || !model) && (\n
\n );\n};\n\nexport default Main;\n","/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useMemo } from \"react\";\nimport { Provider } from \"react-redux\";\n\nimport Main from \"../Main\";\n\nconst BusinessSettings = (props) => {\n const store = useMemo(() => ReactOnRails.getStore(\"layoutStore\"), []);\n\n return (\n \n
\n \n \n
\n \n );\n};\nResultsBanner.propTypes = {\n totalLeads: oneOfType([number, string]),\n count: oneOfType([number, string]),\n homeValueReportCount: oneOfType([number, string]),\n isCreate: bool,\n isToggleON: bool,\n country: string,\n};\n\nResultsBanner.defaultProps = {\n totalLeads: 0,\n count: 0,\n isCreate: false,\n isToggleON: false,\n homeValueReportCount: 0,\n country: \"\",\n};\nexport default ResultsBanner;\n","import React from \"react\";\nimport { number, oneOfType, string, func, arrayOf, bool, shape } from \"prop-types\";\nimport CircleInfoSolidV6 from \"@shared/v2/Icomoon/Icons/CircleInfoSolidV6\";\nimport Toggle from \"@shared/v2/Toggle\";\nimport Dropdown from \"@shared/v2/Dropdown\";\nimport Tooltip from \"@shared/v2/Tooltip\";\nimport ResultsBanner from \"./ResultsBanner\";\n\nconst CreateReports = ({\n selectedLeads,\n country,\n marketReportCount,\n homeValueReportCount,\n handlePropertyTypeChange,\n propertyTypes,\n selectedPropertyType,\n handleDripFrequencyChange,\n handleSearchRadiusChange,\n searchRadius,\n selectedSearchRadius,\n ContactAddresses,\n selectedContactAddress,\n handleContactAddressChange,\n dripFrequency,\n selectedDripFrequency,\n handleHVToggleChange,\n isToggleON,\n}) => (\n \n
\n \n {count}\n \n {count === 1 ? \"report\" : \"reports\"} will be {isCreate ? \"created\" : \"updated\"}\n \n
\n \n
\n \n {Number(totalLeads) === Number(count) ? (\n <>\n {isCreate\n ? `All ${count} contacts can receive reports`\n : `All ${count} contacts have at least 1 report`}\n \n ) : (\n <>\n
\n \n
\n \n )}\n \n
\n \n {isCreate ? (\n <>\n
\n {isToggleON && (\n
\n \n {isToggleON && (\n
\n
\n )}\n Contacts must have a valid email and be located within your MLS. Market reports require either a\n zip/postal code or city and state/province to generate an accurate report.{\" \"}\n {country && country !== \"canada\" && \"Home value reports also require a valid street address.\"}\n \n ) : (\n <>\n All reports for{\" \"}\n every selected contact with at least 1 report will be\n updated\n \n )}\n \n
\n);\nconst optionsPropTypes = arrayOf(shape({ label: string, value: string }));\n\nCreateReports.propTypes = {\n selectedLeads: arrayOf(oneOfType([number, string])),\n searchRadius: optionsPropTypes,\n ContactAddresses: optionsPropTypes,\n propertyTypes: optionsPropTypes,\n dripFrequency: optionsPropTypes,\n marketReportCount: number,\n homeValueReportCount: number,\n handlePropertyTypeChange: func,\n selectedPropertyType: string,\n handleDripFrequencyChange: func,\n handleSearchRadiusChange: func,\n selectedSearchRadius: string,\n selectedContactAddress: string,\n handleContactAddressChange: func,\n selectedDripFrequency: string,\n handleHVToggleChange: func,\n isToggleON: bool,\n country: string,\n};\n\nCreateReports.defaultProps = {\n selectedLeads: [],\n marketReportCount: 0,\n homeValueReportCount: 0,\n handlePropertyTypeChange: null,\n propertyTypes: [],\n selectedPropertyType: \"\",\n handleDripFrequencyChange: null,\n handleSearchRadiusChange: null,\n searchRadius: [],\n selectedSearchRadius: \"0\",\n ContactAddresses: [],\n selectedContactAddress: \"home\",\n handleContactAddressChange: null,\n dripFrequency: [],\n selectedDripFrequency: \"every_2_weeks\",\n handleHVToggleChange: null,\n isToggleON: false,\n country: \"\",\n};\n\nexport default CreateReports;\n","import React from \"react\";\nimport { func } from \"prop-types\";\nimport Modal from \"@shared/v2/Modal\";\nimport Button from \"@shared/v2/Button/Button\";\n\nconst NoMLSModal = ({ closeOptionsModal }) => {\n const handleClick = () => {\n window.open(\n \"https://www.brivityknowledge.com/docs/enable-brivity-cma-and-market-reports-for-new-users\",\n \"_blank\",\n );\n };\n return (\n \n
\n \n t.value === selectedContactAddress)}\n />\n
\n\n \n t.value === selectedPropertyType)}\n />\n
\n \n
\n {country !== \"canada\" && (\n \n \n Search Radius\n
\n\n \n \n Market Report Drip Frequency\n
\n \n \n Include Home Value in Market Report\n
\n )}\n \n Market Reports are one of the best ways to nurture seller leads and your sphere by showing them\n what's going on in the real estate market in their neighborhood.\n
\n\n
\n \n
\n \n Not Connected to an MLS\n
\n \n You’re almost ready to start using Market Reports! We need a little more info to get started.\n
\n \n Please start a live chat or contact support at 855-427-4848 to complete the setup for CMA and\n Market Reports.\n
\n \n \n
\n \n
\n);\n\nconst optionsPropTypes = arrayOf(shape({ label: string, value: string }));\n\nUpdateFrequency.propTypes = {\n validReportCount: number,\n selectedLeads: arrayOf(oneOfType([number, string])),\n handleDripFrequencyChange: func,\n dripFrequency: optionsPropTypes,\n selectedDripFrequency: string,\n};\n\nUpdateFrequency.defaultProps = {\n validReportCount: 0,\n selectedLeads: [],\n handleDripFrequencyChange: null,\n dripFrequency: [],\n selectedDripFrequency: \"every_2_weeks\",\n};\n\nexport default UpdateFrequency;\n","import React from \"react\";\nimport { func, number } from \"prop-types\";\nimport Modal from \"@shared/v2/Modal\";\nimport Button from \"@shared/v2/Button/Button\";\n\nconst UpdateOrCreateConfirmModal = ({ isCreate, closeOptionsModal, saveDialog, count }) => (\n \n
\n \n \n Market Report Drip Frequency\n
\n\n \n \n Market reports are being created and sent to {count} recipient(s). Check back in a few minutes or\n refresh the page until you see the updates applied.\n
\n ) : (\n <>\n\n Market Report drip frequency is being updated. This can take anywhere from 0-5 minutes. Check back\n in a few minutes, or refresh the page until you see the updates applied.{\" \"}\n Do not attempt to apply it again. \n
\n\n If the frequency hasn't updated after 10 minutes, please contact by calling Support at\n 855-427-4848.\n
\n \n )}\n\n Market Reports are one of the best ways to nurture seller leads and your sphere by showing\n them what's going on in the real estate market in their neighborhood.\n
\n\n
\n {selectedRadio === \"create\" && (\n \n
\n \n We recommend sending out Market Reports from the contact's{\" \"}\n Primary Agent instead of a specific team\n member.\n
\n \n This can be updated from Brivity CMA. Reach out to support if you need help.\n
\n \n }\n placement=\"top\"\n />\n )}\n \n \n )}\n\n \n
\n
\n Upgrade to the full Brivity Platform to get Market Reports
\n\n
\n
\n \n Market Reports are one of the best ways to nurture seller leads and your sphere by showing them\n what"s going on in the real estate market in their neighborhood.\n
\nMarket Reports are included with Brivity CMA, which is part of the full Brivity Platform.
\n\n \n Contact us at (866) 295-3322 or sales@brivity.com to upgrade to the Brivity Platform today!\n \n
\n\n
\n );\n }\n}\n\nexport default BulkApplyMarketReports;\n","import React, { useMemo } from \"react\";\nimport { Provider } from \"react-redux\";\nimport BulkApplyMarketReports from \"./BulkApplyMarketReports\";\n\nconst BulkApplyMarketReportsApp = (props) => {\n const store = useMemo(() => ReactOnRails.getStore(\"layoutStore\"), []);\n return (\n Market Report
\n {this.renderNoPlatformModal()}\n {this.renderOptionsModal()}\n \n \n this.handleEmailSelected(option)}\n />\n
\n );\n }\n}\n","import React from \"react\";\nimport { CircleExclamationRegularV6 } from \"../../../shared/v2/Icomoon\";\n\nconst DncBanner = () => (\n \n {this.state.emails.map((email) => {\n return (\n
\n \n this.handleRemoveEmail(email)}\n >\n \n \n
\n )\n })}\n \n
\n \n
\n \n);\n\nexport default DncBanner;\n","import React, { useState, useEffect } from \"react\";\nimport Modal from \"@shared/v2/Modal\";\nimport Button from \"@shared/v2/Button\";\nimport axios from \"axios\";\nimport DncBanner from \"../../Interactions/PhoneCall/components/DncBanner\";\nimport { CircleInfoSolidV6, ToggleOffSolidV6, VolumeHighSolidV6 } from \"@shared/v2/Icomoon\";\nimport Tooltip from \"@shared/v2/Tooltip\";\nimport { useFeatureFlags, useIsAdmin } from \"../../reducers/layoutReducer/selectors\";\n\nconst ConfirmationModal = ({\n selectedLeadUuids,\n closeConfirmationModal,\n createDialerSession,\n show,\n isLoading,\n}) => {\n const [validLeadCounts, setValidLeadCounts] = useState({ total_leads: 0, valid_leads: 0 });\n const [loadingValidLeads, setLoadingValidLeads] = useState(true);\n const featureFlags = useFeatureFlags();\n\n const isAdmin = useIsAdmin();\n\n const checkValidLeads = () => {\n axios\n .post(\"/dialer/check_valid_leads\", {\n lead_uuids: selectedLeadUuids,\n authenticity_token: ReactOnRails.authenticityToken(),\n })\n .then((resp) => {\n setValidLeadCounts(resp.data);\n setLoadingValidLeads(false);\n });\n };\n\n useEffect(() => {\n if (show) {\n checkValidLeads();\n }\n }, [show]);\n\n return (\n Some numbers might be on the DNC list
\n\n Certain numbers may be on the Do Not Call registry. You may be held liable for contacting these\n individuals.{` `}\n
\n
\n {!loadingValidLeads && \n \n {loadingValidLeads ? (\n \n Loading Selected Leads\n \n ) : (\n {`${validLeadCounts.valid_leads} of ${validLeadCounts.total_leads} contacts can be dialed`}\n )}\n
\n\n {featureFlags.callRecording && (\n \n
\n )}\n \n
\n \n
\n \n
\n \n {isAdmin\n ? \"Configure your recording options in Phone Settings\"\n : \" Contact your admin if you want to change your call recording settings\"}\n
\n }\n />\n \n Start a dialer session with a list of leads! After you end a call and set the outcome, Brivity\n will automatically dial the next contact. Leads with invalid or no phone numbers will not be\n included.\n
\n\n Note: Click 'Hang Up' within Brivity CRM to end calls. Hanging up your phone will end the dialer\n session.\n
\n \n\n {this.personAvatar(suggestion)}\n
\n )}\n />\n \n );\n }\n}\n\nexport default MentionablePersonTextArea;\n","/* eslint-disable react/prop-types, react/jsx-props-no-spreading, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n\nimport React from \"react\";\n\nconst PillButton = ({ className, children, onClick, role, ...otherProps }) => (\n {highlightedDisplay}
\n \n onFieldChange(\"comment\", value)}\n isExternal={false}\n />\n
\n );\n};\n\nexport default CallOutcomeAndNotes;","import React from \"react\";\nimport Proptypes from \"prop-types\";\n\nconst IntentDropdown = ({ currentref, handleToggle, setshow }) => (\n \n {outcomeOptions.map((k, v) => (\n onFieldChange(\"outcome\", k.value)}\n className={`tw-border-1px tw-border-solid tw-border-gray-15 tw-text-gray-75 tw-h-[36px] tw-py-8px tw-px-12px ${outcome === k.value ?\n \"tw-text-white tw-bg-theme-button-primary\" :\n 'tw-bg-transparent'\n }`}\n key={v}>\n {k.label}\n \n ))}\n
\n S
\n B
\n \n );\n }\n if ([\"S\", \"B\", \"T\", \"R\", \"C\", \"L\"].includes(intent.charAt(0).toUpperCase())) {\n return (\n \n {intent.charAt(0).toUpperCase()}\n
\n );\n }\n return \n
\n);\n\nexport default UpNext;\n","// extracted by mini-css-extract-plugin\nexport default {\"trigger\":\"PupZW3MWYtNDfflOSBEV\",\"content\":\"cxJx2asbcjx2YRQGHj4O\",\"statusIntentButton\":\"a5NMHG1GyIWU9Wce5GOW\",\"selectedStatusIntent\":\"JL5kCWSjAiiMTQKre3QK\",\"selectedStatusIntentText\":\"VjH3GEd7j7i0ehZnumLF\",\"selectedFrequencyText\":\"FwB0UsbUevP2KRG2Q2nm\",\"statusIntentOption\":\"j2bKfpGkAJVXMgmVX4Ba\",\"statusFrequencyOption\":\"gNvpBcWpVQ63k1G4oO28\",\"selectedFrequencyTextalign\":\"uX1yIobA57l1raewEmJb\",\"item\":\"QXmjJoAWxwRo3bW9vE_b\",\"dropdown\":\"fFXzCzJl7Gcc0kat6sqg\",\"active\":\"ZSzgy6CX8Ajxe7TaSIPy\"};","// extracted by mini-css-extract-plugin\nexport default {\"brivityBlue\":\"Vx8exAZDG1PYZmN8T51r\",\"brivityOrange\":\"N0pVhsXj39h6QxSvPGeQ\",\"yellowOrange\":\"r2JxvUyd2b8Y9ZrGTADg\",\"darkBlue\":\"JVBY5Rv26sL64SM0l8Bp\",\"gray\":\"ywm1A56ySJjRSnWfZ2VQ\",\"grayBase\":\"tWwhQi6WiIjo4KK7zyJi\",\"statusNew\":\"jfmNj02aOUm6F5FM3Zko\",\"statusUnqual\":\"K2ilcStskzoON9_jdCgr\",\"statusNurt\":\"jMuuvZ0J1GwhBn_Tn9XM\",\"statusWatch\":\"I3YAHG6UiFGYkmIRAdoy\",\"statusHot\":\"IjYmCMwEEuNTPrKk19ht\",\"statusPending\":\"QSJy5mBy8h5hPY9gOSAu\",\"statusActiveClient\":\"T8lAi_aw3YlPqCeqMBb_\",\"statusOther\":\"_29Lg9UIExg6Y2buWT5c\",\"statusProspectiveClient\":\"VnOxeAEafTwqgyt9UFJG\",\"statusPast\":\"Ntrq2ffzaXuQpXf1F71X\",\"statusInactive\":\"EO14djkvIWfr25tHagat\",\"statusArchived\":\"Ae8KC7mJV9NDWN95ued1\",\"statusTrash\":\"mJdEB4ymLi1McSu9gUYu\",\"intentBuyer\":\"_ywPTuy7CwKnRmneQo1h\",\"intentSeller\":\"SSeuug15yqcmQZbRPY7j\",\"intentSellerBuyer\":\"GAeIYRvYgBZngN0x6QzB\",\"intentTenant\":\"_4ekvZqsepxVsId_MaqyG\",\"intentLandlord\":\"RojE0WEPDkSaTtubWjsA\",\"intentRecruit\":\"UelBQn5mFrfif5qrNhI_\",\"intentCandidate\":\"gIoABIRdVgXBUqrerc5v\",\"intentNone\":\"R9CBS02zQXi2JNNWkqWL\"};","import React, { useRef, useState } from \"react\";\nimport { arrayOf, bool, func, shape, string } from \"prop-types\";\nimport statusIntentCss from \"./statusIntentDropdown.module.css\";\nimport colors from \"./colors.module.css\";\nimport { useClickOutside } from \"../hookHelpers\";\nimport Button from \"@shared/v2/Button\";\n\nexport const getStatusClass = (stat) => {\n switch (stat) {\n case \"new\":\n return colors.statusNew;\n case \"unqualified\":\n return colors.statusUnqual;\n case \"hot\":\n return colors.statusHot;\n case \"watch\":\n return colors.statusWatch;\n case \"nurture\":\n return colors.statusNurt;\n case \"past-client\":\n return colors.statusPast;\n case \"past\":\n return colors.statusPast;\n case \"inactive\":\n return colors.statusInactive;\n case \"trash\":\n return colors.statusTrash;\n case \"archived\":\n return colors.statusArchived;\n case \"pending\":\n return colors.statusPending;\n case \"active-client\":\n return colors.statusActiveClient;\n case \"prospective-client\":\n return colors.statusProspectiveClient;\n default:\n return colors.statusOther;\n }\n};\n\nconst StatusDropdown = ({ className, btnClassName, onChange, statusOptions, status, person, isLoading }) => {\n const ref = useRef();\n const [expanded, setExpanded] = useState(false);\n useClickOutside(ref, () => setExpanded(false));\n\n const updateValue = (value) => {\n setExpanded(false);\n onChange(value);\n };\n\n if (!person) return null;\n\n return (\n \n
\n \n \n \n Up Next:
\n {name}
\n Mobile: {phoneNumber}
\n \n {\n if (\n status !== \"active-client\" &&\n status !== \"prospective-client\" &&\n status !== \"brivity-user\" &&\n status !== \"non-compete\"\n ) {\n setExpanded((exp) => !exp);\n }\n }}\n isLoading={isLoading}\n >\n {status === \"prospective-client\" ? \"PROSPECTIVE\" : (status || \"new\").replace(\"-\", \" \").toUpperCase()}\n \n {expanded && (\n
\n );\n};\n\nexport default StatusDropdown;\n\nStatusDropdown.propTypes = {\n className: string,\n onChange: func,\n statusOptions: arrayOf([]),\n status: string,\n person: shape({}),\n btnClassName: string,\n isLoading: bool,\n};\n\nStatusDropdown.defaultProps = {\n className: null,\n onChange: () => { },\n statusOptions: [],\n status: \"new\",\n person: null,\n shape: {},\n isLoading: false,\n btnClassName: \"\",\n};","import React from \"react\";\nimport Proptypes from \"prop-types\";\n\nconst StageOption = ({ stageOption, selectStage, containerClassName, optionClassName }) => (\n <>\n {stageOption.header && (\n \n )}\n \n {statusOptions.map(([label, value]) => (\n updateValue(value)}\n className={`tw-font-bold tw-border-none hover:tw-ring-1 tw-text-[11px] tw-rounded-full tw-w-[120px] tw-leading-[24px] tw-font-boldtw-inline-block ${getStatusClass(\n value,\n )}`}\n >\n {label.toUpperCase()}\n \n ))}\n
\n )}\n \n {icon}\n {children || }\n
\n );\n return (\n \n \n \n setShowStagePicker(!showStagePicker)}\n className={`tw-bg-transparent tw-border-none tw-flex tw-justify-start tw-flex-row tw-flex-nowrap tw-grow tw-shrink-0 tw-items-center\n tw-uppercase tw-text-center tw-align-middle tw-cursor-pointer tw-w-[180px] tw-h-[24px] tw-text-[#666] tw-text-11px tw-leading-[16px]\n tw-font-bold hover:!tw-bg-transparent hover:tw-border-transparent !tw-bg-transparent tw-border-transparent ${containerClassName}`}>\n {selectedTitle}\n \n \n {[...leadStageMapping, ...candidateStageMapping].map((stageOption, i) => (\n selectStage(stageOption)}\n />\n ))}\n \n \n
\n );\n};\n\nStagesDropDown.propTypes = {\n selectedStage: Proptypes.string,\n containerClassName: Proptypes.string,\n optionClassName: Proptypes.string,\n leadStageMapping: Proptypes.array,\n candidateStageMapping: Proptypes.array,\n onUpdateStage: Proptypes.func,\n isLoading: Proptypes.bool,\n};\n\nStagesDropDown.defaultProps = {\n selectedStage: \"\",\n containerClassName: \"\",\n optionClassName: \"\",\n leadStageMapping: LEAD_STAGE_MAPPING,\n candidateStageMapping: CANDIDATE_STAGE_MAPPING,\n onUpdateStage: null,\n isLoading: false,\n};\n\nexport default StagesDropDown;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport nullable from \"prop-types-nullable\";\nimport InlineEditingInput from \"../InlineEditingInput\";\nimport { extractNumeric, formatNumber, isValidValue, removeLeadingZeroes } from \"../../inputFormatUtils\";\n\nexport const validateInput = (value) => {\n if (!value) {\n return { isValid: true, newValue: \"\" };\n }\n\n const newValue = removeLeadingZeroes(extractNumeric(value)) || \"0\";\n const isValid = isValidValue(newValue);\n return { isValid, newValue };\n};\n\nexport const formatInput = (value) => formatNumber(value, true);\n\nconst Flat = ({ id, value, placeholder, onChange, withCancelConfirm, className, ...otherProps }) => (\n \n Don't worry, your client doesn't see when you reschedule something. Select how far you want to move these dates around.\n
\n \n{this.props.header}
\n \n \n \n
\n \n );\n }\n}\n\nexport default NewModalHeader;\n","import React, { Component } from \"react\";\nimport axios from \"axios\";\nimport \"./profile-icon.scss\";\nimport Tooltip from \"./v2/Tooltip\";\n\nexport default class ProfileIcon extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n link: props.link,\n name: props.name,\n initials: props.initials,\n showName: props.showName,\n id: props.userId,\n placement: props.placement ? props.placement : \"right\",\n };\n }\n\n componentWillUnmount() {\n this.state.cancel_taskable && this.state.cancel_taskable();\n }\n\n componentDidMount() {\n if (this.props.dynamic) {\n this.getUser();\n }\n }\n\n getUser = () => {\n var task_this = this;\n axios\n .get(`/profile_icon?id=${this.state.id}`, {\n cancelToken: new axios.CancelToken(function executor(c) {\n task_this.setState({ cancel_get_user: c });\n }),\n })\n .then((response) => {\n this.setState({\n link: response.data.link,\n name: response.data.name,\n initials: response.data.initials,\n });\n })\n .catch((response) => {\n console.log(\"no assigned\");\n });\n };\n\n render() {\n return (\n \n {this.state.link && (\n {this.state.initials}}\n content={this.state.name}\n />\n )}\n {this.state.showName &&
\n );\n }\n}\n","import React from \"react\";\nimport { Row, Col, Modal } from \"react-bootstrap\";\nimport Moment from \"react-moment\";\nimport Pluralize from \"react-pluralize\";\nimport ProfileIcon from \"../../../shared/ProfileIcon\";\nimport HeaderTitle from \"../modals/HeaderTitle\";\nimport form from \"../form.module.css\";\nimport button from \"../button.module.css\";\nimport capitalize from \"capitalize\";\nimport Linkify from \"linkify-react\";\nconst milestoneOptions = (accountMilestoneNames) => {\n const personNames = accountMilestoneNames[\"Person\"];\n let personObject = {};\n\n personNames.forEach((name) => {\n personObject[name] = name\n .split(\"_\")\n .map((element) => capitalize(element))\n .join(\" \");\n });\n\n return personObject;\n};\n\nconst Details = (props) => {\n const weeklyOptions = [\n { value: \"0\", label: \"On Sunday\" },\n { value: \"1\", label: \"On Monday\" },\n { value: \"2\", label: \"On Tuesday\" },\n { value: \"3\", label: \"On Wednesday\" },\n { value: \"4\", label: \"On Thursday\" },\n { value: \"5\", label: \"On Friday\" },\n { value: \"6\", label: \"On Saturday \" },\n ];\n const { task, editTask, completeTaskFromDetails, editAndComplete } = props;\n\n return (\n {this.state.name}
}\n\n {task.state == \"completed\" &&
\n {task.calculated_due_on &&
\n )}\n \n\n {task.type === \"Appointment\" && task.scheduled_time !== null && (\n <>\n \n {moment.unix(task.scheduled_time).format(\"LT\")}
\n \n )}\n\n \n {task.assigned_to_user_id && (\n\n
\n )}\n {!task.assigned_to_user_id && Anyone
}\n\n \n {task.priority &&{task.priority}
}\n {!task.priority &&UNPRIORITIZED
}\n\n \n {task.type &&{task.type}
}\n\n {!task.assigned_plan_id && }\n\n {!task.assigned_plan_id && task.recurring && task.recurring_day_of_week && (\n\n \n {weeklyOptions[task.recurring_day_of_week].label}\n
\n )}\n\n {!task.assigned_plan_id && task.recurring && task.recurring_every_so_many_days && (\n\n \n Every
\n \n Only once\n
\n )}\n \n\n {task.assigned_plan_id && (\n \n \n \n )}\n {task.name}\n
\n {task.instructions && (\n\n \n \n {task.instructions}\n \n
\n )}\n {task.note && (\n \n \n \n {task.note}\n \n
\n )}\n \n \");\n}\n\nexport const parseErrors = (err) => {\n const genericError = \"Uh-oh! Something went wrong.\";\n if (!/text|json/.test(err.response?.headers[\"content-type\"])) {\n return [genericError];\n }\n const parsedError = String(err.response?.data || \"\").split(\" - \")[1];\n if (parsedError?.startsWith(\"[\")) {\n return JSON.parse(parsedError);\n } else {\n return [parsedError || err.message || genericError];\n }\n};\n","import React, { Component } from \"react\";\nimport TextInput from \"../../shared/v2/TextInput\";\nimport { Col } from \"../../shared/v1\";\nimport Button from \"../../shared/v2/Button\";\nimport { Plus } from \"../../shared/v2/Icomoon\";\n\nconst TaskDetailsInformation = ({ task, toggleInstructions, toggleNotes, handleTaskChange, taskDetails }) => (\n
\n {!task.showInstructions && (\n \n )}\n {!task.showNotes && (\n \n )}\n
\n \n);\n\nexport default TaskDetailsInformation;\n","import React from \"react\";\nimport { Col } from \"@shared/v1\";\nimport { Close } from \"@shared/v2/Icomoon\";\nimport IconButton from \"@shared/v2/IconButton\";\nimport TextInput from \"@shared/v2/TextInput\";\nimport AiAssistant from \"@shared/AiAssistant\";\n\nconst TaskInstructions = ({ task, toggleInstructions, handleTaskChange }) => (\n \n handleTaskChange({ target: { name: \"instructions\", value: text } })}\n />\n \n \n
\n \n {priorityNumbers.map((priorityNumber) => (\n taskPriorityWatcher(priorityNumber)}\n checked={task.priority === priorityNumber}\n />\n ))}\n
\n \n );\n }\n}\n\nexport default PrioritySelection;\n","import React from \"react\";\n\nimport { Alert } from \"../../shared/v1\";\n\nconst Errors = ({ errors }) => (\n \n {errors && (\n \n \n )}\n
\n);\n\nexport default Errors;\n","import React from \"react\";\nimport colors from \"../../Reports/components/DashboardShared/helpers/colors\";\nimport { Col } from \"../../shared/v1\";\nimport Dropdown from \"../../shared/v2/Dropdown\";\n\nconst AppointmentTypeSelection = ({\n isCreatingAppointment,\n task,\n taskDetails,\n handleAppointmentType,\n appointmentTypeOptions,\n}) => {\n return (\n - \n {errors.map((error, index) => (\n
- {error} \n ))}\n
\n {hideCancel ? (\n \n ) : (\n \n )}\n\n
\n \n handleCompleteTask()}\n disabled={disableCompletedCheckbox || task.state === \"completed\"}\n />\n {/* btn will be disabled when its creating or scheduling appointment from PDP/ contact index page ,\n task name, priority, task type, appointment type and dueon date is required feild for appointment*/}\n \n {personTaskForm ? submitButton() : saveButtonText}\n \n
\n \n \n Hidden from Viewers\n
\n ),\n },\n {\n value: true,\n label: (\n \n \n Visible to Viewers\n
\n ),\n },\n ];\n }\n\n taskForWatcher = (result) => {\n const taskable_name = result.label !== undefined ? result.label.split(\" \").slice(0, 2).join(\" \") : null;\n const taskable_email = result.label !== undefined ? result.label.split(\" \").slice(2).join(\" \") : null;\n this.setState({\n task: {\n ...this.state.task,\n taskable_type: result.object_type,\n taskable_id: result.uuid,\n taskable_name,\n taskable_email,\n },\n });\n };\n\n taskForLog = (person) => {\n this.setState({\n task: {\n ...this.state.task,\n taskable_type: \"Person\",\n taskable_id: person.uuid,\n },\n });\n };\n\n taskForAppointment = (person) => {\n const { task } = this.state;\n task[\"taskable_type\"] = \"Person\";\n task[\"taskable_id\"] = person.data.attributes.uuid;\n task[\"taskable_name\"] = `${person.data.attributes.first_name} ${person.data.attributes.last_name}`;\n this.setState({ task });\n };\n\n taskForLogAppointment = (person) => {\n const { task } = this.state;\n task[\"taskable_type\"] = \"Person\";\n task[\"taskable_id\"] = person.uuid;\n task[\"taskable_name\"] = person.name ? `${person.name}` : `${person.first_name} ${person.last_name}`;\n this.setState({ task });\n };\n\n handleAccountId = () => {\n const { task } = this.state;\n task[\"account_id\"] = this.props.accountUuid;\n this.setState({ task });\n };\n\n handleUserId = () => {\n const { task } = this.state;\n if (this.props.user !== undefined) {\n task[\"user_id\"] = this.props.user.uuid;\n }\n this.setState({ task });\n };\n\n taskPriorityWatcher = (priority) => {\n this.setState({ task: { ...this.state.task, priority: priority } });\n };\n\n logFormInformation = () => {\n this.assignTaskToLogForm(this.props.user);\n this.taskForLog(this.props.person);\n this.taskForLogAppointment(this.props.person);\n this.handleAccountId();\n this.handleUserId();\n };\n createAppointmentInformation = () => {\n this.taskForAppointment(this.props.person);\n this.handleAccountId();\n this.assignTaskToLogForm(this.props.user);\n };\n\n componentDidMount() {\n this.handleUserId();\n this.props.isSchedulingAppointment\n ? this.logFormInformation()\n : this.props.isCreatingAppointment\n ? this.createAppointmentInformation()\n : null;\n this.state.task.state === \"completed\" && this.toggleCompleteTask();\n\n //TODO: determine if it is appropriate to load\n //agents after the modal has opened for all uses of TaskForm\n if (this.props.agentsNeedLoading === true) {\n axios\n .get(\"/account_active_agents\", {\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n })\n .then((response) => {\n this.setState({\n agents: response.data.map((agent) => ({\n label: agent.name,\n value: agent.uuid,\n email: agent.email,\n })),\n });\n });\n } else {\n this.setState({ agents: this.props.agents });\n }\n }\n\n render() {\n const { task, saveButtonText, agents } = this.state;\n const {\n isSchedulingAppointment,\n newTask,\n isCreatingAppointment,\n editTaskFor,\n personTaskForm,\n errors,\n createTask,\n handleTaskChange,\n taskDetails,\n new_appointment,\n closeModal,\n task_for,\n deleteButton,\n editToDelete,\n submitButton,\n isAppointment,\n isEditing,\n isfromIndex,\n hideCancel,\n } = this.props;\n isSchedulingAppointment || isCreatingAppointment || isAppointment ? (task.type = \"Appointment\") : null;\n let inputProps = { disabled: this.props.taskDetails ? true : false };\n const DATE_TIME_FORMAT = task.type === \"Appointment\" ? `${DATE_FORMAT} hh:mm A` : DATE_FORMAT;\n\n // Fetch modal variant from context or use modern variant by default. There are usages of the\n // TaskForm component without a Modal parent component, thus leading to missing style due to\n // undefined variant.\n // When `isCreatingAppointment` is true, it uses classic variant by default.\n const { variant: variantFromContext } = this.context;\n const modalBodyVariant = variantFromContext || (isCreatingAppointment ? \"classic\" : \"modern\");\n\n //CHECKME: isSchedulingAppointment is coming from TaskFormLogAppointment.jsx , where the TaskForm is getting called from lead or people IDX\n //CHECKME: handleLocationOnChange is coming from TaskForm.jsx\n //CHECKME: personTaskForm is coming from PersonTaskForm.jsx where the TaskForm is getting called in the PDP page from the + on tasks and appointments\n //CHECKME: editTaskFor is coming from TaskIndexModalHelpers.jsx where TaskForm is getting called for editing\n //CHECKME: isCreatingAppointment is coming from the PersonInteractions.jsx which called the appointment tab on PDP page\n //CHECKME: createTask is coming from the NewTask.jsx which is called when + is click on Task idx\n return (\n \n \n
\n );\n }\n}\nTaskForm.defaultProps = {\n isSchedulingAppointment: false,\n personTaskForm: false,\n isCreatingAppointment: false,\n taskDetails: false,\n isAppointment: false,\n};\nexport default TaskForm;\n","/* eslint-disable react/jsx-props-no-spreading */\nimport React from \"react\";\nimport { connect } from \"react-redux\";\n\nimport { propsKey } from \"../../Utilities\";\nimport { get } from \"lodash\";\n\n// Wrapping component with Redux props\n//ex. WrappedComponent = Header, states ['title', 'referral.budget']\nconst withRedux = ({ reducerName }) => ({ WrappedComponent = null, states = [], aliases = [] }) => {\n const arrayOfStates = Array.isArray(states) ? states : [states];\n const arrayOfAliases = Array.isArray(aliases) ? aliases : [aliases];\n \n const mapStateToProps = (reduxState) => arrayOfStates.reduce(\n (acc, state, idx) => ({\n ...acc,\n [arrayOfAliases[idx] || propsKey(state)]: get(reduxState, `${reducerName}.${state}`)\n }),{}\n );\n\n return connect(mapStateToProps)(({ ...allProps }) => \n
\n );\n\n// This is not reusable\nconst TimeFrameDateSelectorWrapper = ({\n show,\n onReferralCalendarEditCancel,\n onPutRefTimeFrameAsThunk,\n timeframeExact,\n uuid,\n}) => {\n // Handles state mgmt on calendar\n const { date, onDateChangeHandlr } = useDateHandlr(timeframeExact);\n\n // Handles clicks outside of calender wrapper\n const cancelViewingCalendar = () => onReferralCalendarEditCancel(UNKNOWN_OPTION);\n const target = useClickOutsideCalendar(cancelViewingCalendar);\n\n // Handles clear and submit btns\n const clearHandlr = () => onDateChangeHandlr({ date: \"\" });\n\n const submitHandlr = () =>\n isDate(date)\n ? cancelViewingCalendar()\n : onPutRefTimeFrameAsThunk({ label: \"Custom\", value: \"Custom\", uuid }, date);\n\n return (\n \n
\n
\n \n
\n \n Clear\n \n \n Done\n \n
\n \n {\n handleChange('name', txt.trim().length > 0 ? txt.trim() : 'Follow Up');\n }}\n validateInput={(newValue) => ({ isValid: newValue.trim().length <= 40, newValue })}\n displaySpanClassName='tw-text-18d tw-text-gray-50'\n icon={
\n );\n};\n\nexport default AddTaskPane;\n\nAddTaskPane.propTypes = {\n agents: arrayOf(shape({})),\n};\n\nAddTaskPane.defaultProps = {\n agents: [],\n};","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Toggle from '@shared/v2/Toggle';\nimport { CheckSolidV6, MinusSolidV6 } from '@shared/v2/Icomoon';\nimport formatPhoneNumber from \"@shared/FormatPhoneNumber\";\nimport { useFeatureFlags } from '../../reducers/layoutReducer/selectors';\n\nconst reminderStyles = (status) => !status ? 'tw-border-[#96B7FA] tw-text-[#2454B2] tw-bg-[#F7F9FC]' : 'tw-border-[#46C771] tw-text-[#177335] tw-bg-[#EDFAF1]';\n\nfunction getCallStatusMessage(callStatus) {\n\n const statusMap = {\n null: {\n status: \"Calling you at your phone\",\n circleColor: 'tw-bg-[#3270FA]'\n },\n Initiated: { status: 'Ringing', circleColor: 'tw-bg-[#3270FA]' },\n Ringing: { status: 'Ringing', circleColor: 'tw-bg-[#3270FA]' },\n 'In-progress': { status: 'Connected', circleColor: 'tw-bg-green-100' },\n };\n\n return statusMap[callStatus] || { status: 'Call Ended', circleColor: 'tw-bg-[#E5342E]' };\n}\n\nconst CallStatusBar = ({\n callStatus,\n currentCallTime,\n isCompleted,\n recorded,\n recordToggleDisabled,\n onToggleChange,\n agentPhoneNumber,\n statusClassName\n}) => {\n const RecordConfirmationIcon = recorded ? CheckSolidV6 : MinusSolidV6;\n const featureFlag = useFeatureFlags();\n const standardCallStatus = getCallStatusMessage(callStatus);\n\n return (\n \n
\n \n
\n \n
\n \n handleChange('type', 'Call')}\n isActive={task.type === 'Call'}\n className=\"tw-w-[90px]\"\n >\n Call\n \n handleChange('type', 'To-Do')}\n isActive={task.type === 'To-Do'}\n className=\"tw-w-[90px]\"\n >\n To-Do\n \n
\n \n handleChange('assigned_to_user_id', v.value)} value={agents.find(agent => agent.value === task.assigned_to_user_id) || initialAgentValue} />\n
\n \n {\n handleChange('due_on', moment(dateObj.date, \"MM/DD/YYYY\").format(\"YYYY-MM-DD\"));\n }}\n minDate={moment().format('MM/DD/YYYY')}\n dateSelectorValue={moment(task.due_on, \"YYYY-MM-DD\").format(\"MM/DD/YYYY\")}\n submitHandlr={() => setShowDateSelector(false)}\n show={showDateSelector} />\n
\n \n {['Today', 'Tomorrow', '7 Days', '30 Days', '90 Days', 'Custom'].map((label) => {\n if (label === 'Custom') {\n return (\n {\n setDateType(label);\n setShowDateSelector(true);\n }}\n isActive={dateType === label}\n className=\"tw-w-[90px]\"\n >\n <>\n {dateType === 'Custom' && task.due_on ? moment(task.due_on).format('MM/DD/YY') : 'Custom'}\n {\n setDateType(label);\n handleChange('due_on', momentDate.format(\"YYYY-MM-DD\"));\n }}\n isActive={dateType === label}\n className=\"tw-w-[90px]\"\n >\n {label}\n \n }\n placement='top'\n />\n );\n })}\n
\n \n
\n \n {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((priority) => (\n handleChange('priority', priority)}\n isActive={task.priority === priority}\n className=\"tw-w-[58px]\"\n >\n {priority}\n \n ))}\n
\n \n Highest\n Lowest\n
\n \n \n \n {(() => {\n if (isCompleted) {\n return recorded ? 'Recorded' : 'Not Recorded';\n }\n return `Record ${recorded ? 'ON' : 'OFF'}`;\n })()}\n \n {callStatus === 'In-progress' && (\n
\n \n
\n \n );\n\n const renderLeadError = () => (\n \n \n
\n Connection Unstable\n
\n Your browser has lost connection with Brivity Dialer.\n
\n Please wait while we attempt to reconnect...\n
\n \n
\n \n Connection Unstable\n
\n Your browser has lost connection with Brivity Dialer.\n
\n Please wait while we attempt to reconnect...\n
\n \n
\n
\n \n );\n\n const conferenceCallIsComplete = () =>\n conferenceCall && conferenceCall?.conference_status === \"conference-end\" && savingOutcomeSuccess;\n\n const renderConferenceComplete = () => (\n \n {savingLeadError}\n
\n \n
\n \n );\n\n const endCallBtnDisabled = () => {\n const callStatus = conferenceCall?.current_participant?.humanized_call_status;\n const conferenceStatus = conferenceCall?.conference_status;\n\n return (\n endCallLoading ||\n conferenceStatus === \"conference-end\" ||\n ![\"Queued\", \"Initiated\", \"Ringing\", \"In-progress\"].includes(callStatus)\n );\n };\n\n const saveContinueBtnDisabled = () => {\n const callComplete = [\"Completed\", \"Failed\", \"Busy\", \"No-answer\", \"Canceled\"].includes(\n conferenceCall?.current_participant?.humanized_call_status,\n );\n return !callComplete || savingCallOutcome || callOutcome.outcome === null;\n };\n\n const saveBtnText = () => {\n if (!conferenceCall && conferenceCallIsComplete()) return \"Save & Complete\";\n\n if (\n conferenceCall?.current_participant_position < conferenceCall?.total_participants &&\n conferenceCall?.conference_status !== \"conference-end\"\n ) {\n return \"Save & Continue\";\n } else {\n return \"Save & Complete\";\n }\n };\n\n const conferenceIsReady = () =>\n websocketsConnected &&\n conferenceCall &&\n conferenceCall?.current_participant &&\n !conferenceCallIsComplete();\n\n const isCompleted = callCompleteStatus.includes(conferenceCall?.current_participant?.humanized_call_status);\n\n const renderCallStatus = () => (\n \n \n
\n Dialer Session Complete\n
\n \n Dialer Session Complete\n
\n
\n );\n\n return (\n <>\n {renderCallStatus()}\n {conferenceCallIsComplete() && renderConferenceComplete()}\n {websocketError() && renderWebsocketError()}\n {savingLeadError && renderLeadError()}\n \n
\n
\n \n
\n \n
\n \n {person?.data?.attributes?.lead_type !== \"n/a\" && (\n \n \n {nameFormat(conferenceCall?.current_participant?.person_full_name)}\n \n
\n \n
\n )}\n \n Mobile: {conferenceCall?.current_participant?.phone_number}\n
\n \n
\n \n Call {conferenceCall?.current_participant_position} of {conferenceCall?.total_participants}\n
\n \n
\n \n {\n setRecordToggleDisabled(true);\n\n const urlApi = `${dialerServiceUrl}/dialer/${!recorded ? \"start\" : \"stop\"}_recording`;\n const payload = {\n token: dialerServiceToken,\n ...(!recorded ? { recording_consent: recorded } : {}),\n };\n\n const [_, err] = await tryCatchHandlr(caseTransformingAxios.post(urlApi, payload));\n if (err) return console.log(err);\n\n setRecordToggleDisabled(false);\n setRecorded(!recorded);\n }}\n agentPhoneNumber={conferenceCall?.agent_participant?.phone_number}\n />\n \n
\n \n
\n {[...savingOutcomeErrors, ...endCallErrors].map((e, i) => {\n return (\n \n
\n );\n })}\n {\n setTaskToggle(!taskToggle);\n }}\n checked={taskToggle}\n />\n {taskToggle &&
\n {e}
\n \n \n
\n \n
\n \n \n window.App.leadUpdateChannel.perform(\"lead_update\", {\n id: person.leadId,\n person_attributes: {\n stage: stage.value,\n stage_type: stage.type,\n },\n })\n }\n containerClassName=\"!tw-border-[1.5px] !tw-border-solid !tw-border-gray-50 hover:!tw-border-gray-50 tw-w-full tw-justify-center\"\n />\n
\n \n {conferenceIsReady() && conferenceCall?.next_participant && (\n
\n \n
\n );\n }\n}\n\nexport default ConferenceCall;\n","import React, { useMemo } from \"react\";\nimport { Provider } from \"react-redux\";\nimport ConferenceCall from \"../ConferenceCall\";\n\nexport default (props) => {\n const store = useMemo(() => ReactOnRails.getStore(\"layoutStore\"), []);\n\n return (\n \n
\n \n);\n\nQuickStat.propTypes = {\n stat: PropTypes.shape({\n count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n name: PropTypes.string,\n path: PropTypes.string,\n }).isRequired,\n};\n\nexport default QuickStat;\n","import axios from \"axios\";\nimport { useEffect, useState } from \"react\";\n\nconst getLeadStats = ({ dateRange, userUuids }, signal) =>\n axios.get(\"/dashboard/lead_quick_stats\", {\n headers: {\n \"content-type\": \"application/json\",\n },\n params: {\n dashboard_opportunities_date_range: dateRange,\n selected_users: userUuids,\n },\n signal,\n });\n\nconst useQuickStats = ({ dateRange, userUuids }) => {\n const [error, setError] = useState(false);\n const [leadStats, setLeadStats] = useState([]);\n const [loading, setLoading] = useState(false);\n\n const reload = (signal) => {\n setLoading(true);\n getLeadStats({ dateRange, userUuids }, signal)\n .then(({ data }) => {\n setLeadStats(data);\n setError(false);\n setLoading(false);\n })\n .catch((err) => {\n if (!axios.isCancel(err)) {\n setError(true);\n setLoading(false);\n }\n });\n };\n\n useEffect(() => {\n const abortController = new AbortController();\n reload(abortController.signal);\n return () => abortController.abort();\n }, [dateRange, userUuids]);\n\n return { error, leadStats, loading, actions: { reload, setError } };\n};\n\nexport default useQuickStats;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Dropdown } from \"../../shared/v1\";\nimport Loader from \"./Loader\";\nimport QuickStat from \"./QuickStat\";\nimport useQuickStats from \"../services/useQuickStats\";\nimport Error from \"../../Reports/components/DashboardShared/Error\";\nimport IconButton from \"../../shared/v2/IconButton\";\nimport { ArrowsRotateSolidV6 } from \"../../shared/v2/Icomoon\";\n\nconst DATE_RANGES = [\n { value: \"today\", label: \"Today\" },\n { value: \"yesterday\", label: \"Yesterday\" },\n { value: \"last_7_days\", label: \"Last 7 Days\" },\n { value: \"last_14_days\", label: \"Last 14 Days\" },\n { value: \"last_30_days\", label: \"Last 30 Days\" },\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: \"Last Year\" },\n { value: \"all_time\", label: \"All Time\" },\n];\n\nconst LeadQuickStats = ({ dateRange: initialDateRange, userUuids }) => {\n const [dateRange, setDateRange] = useState(initialDateRange);\n const { actions, loading, error, leadStats } = useQuickStats({ dateRange, userUuids });\n\n return (\n {stat.count}
\n{stat.name}
\n\n actions.setError(null)} />\n
\n );\n};\n\nLeadQuickStats.propTypes = {\n dateRange: PropTypes.string.isRequired,\n userUuids: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n\nexport default LeadQuickStats;\n","import { useEffect, useState } from \"react\";\nimport { isCancel } from \"axios\";\nimport { caseTransformingAxios as axios } from \"../../shared/v2/caseTransformingAxios\";\n\nconst getAgentActivities = (opts) => axios.get(\"/api/v4/agent_activities/goal_progress_web\", opts);\n\nconst createAgentActivity = (data) => axios.post(\"/api/v4/agent_activities\", data);\n\nconst useLeadGenActivities = ({ period, startDate, endDate, userUuids }) => {\n const [data, setData] = useState(null);\n const [error, setError] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const refreshData = (signal) => {\n setLoading(true);\n getAgentActivities({\n params: {\n thisMonthSelected: period === \"this_month\" || undefined,\n startDate,\n endDate,\n userUuids,\n },\n signal,\n })\n .then((res) => {\n setData(res.data);\n setError(null);\n setLoading(false);\n })\n .catch((err) => {\n if (!isCancel(err)) {\n setError(err.response.data);\n setLoading(false);\n }\n });\n };\n\n useEffect(() => {\n const abortController = new AbortController();\n refreshData(abortController.signal);\n return () => abortController.abort();\n }, [startDate, endDate, userUuids]);\n\n const actions = {\n createAgentActivity(activityData) {\n return createAgentActivity(activityData)\n .then(() => refreshData())\n .catch((err) => setError(err.response.data));\n },\n refreshData() {\n return refreshData();\n },\n setError,\n };\n\n return { actions, data, error, loading };\n};\n\nexport default useLeadGenActivities;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { debounce } from \"lodash\";\nimport PropTypes from \"prop-types\";\nimport { Plus } from \"../../../shared/v2/Icomoon\";\nimport TextButton from \"../../../shared/v2/TextButton\";\nimport colors from \"../../../Reports/components/DashboardShared/helpers/colors\";\nimport Tooltip from \"../../../shared/v2/Tooltip/Tooltip\";\nimport formatters from \"../../../shared/formatters\";\nimport { useTheme } from \"../../../reducers/layoutReducer/selectors\";\n\nconst compactFormatter = new Intl.NumberFormat(\"en\", {\n notation: \"compact\",\n roundingPriority: \"morePrecision\",\n maximumFractionDigits: 1,\n maximumSignificantDigits: 2,\n});\n\nconst LeadGenActivityCard = ({ label, goalValue, isButton, value, onClick, onViewHistory }) => {\n const isPlace = useTheme().name === \"place-theme\";\n const ref = useRef(null);\n const [_isHovering, setIsHovering] = useState(false);\n const [isEdge, setIsEdge] = useState(false);\n const isHovering = isButton && _isHovering;\n const showTooltip = String(value).length > 3 || String(goalValue).length > 3;\n const bgColor = isPlace\n ? \"hover:tw-bg-semantic-blue-10 focus:tw-bg-semantic-blue-10\"\n : \"hover:tw-bg-brivity-blue-20 focus:tw-bg-brivity-blue-20\";\n\n useEffect(() => {\n const el = ref.current;\n if (isButton || !el) return () => {};\n const handleResize = debounce(() => {\n const meetsEdge = Math.abs(el.offsetLeft + el.offsetWidth - el.parentElement.offsetWidth) <= 40; // padding\n setIsEdge(meetsEdge);\n }, 200);\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, [ref]);\n\n return (\n // disabling eslint since this button can be a non-button as well\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n \n \n Take Action\n
\n setDateRange(value)}\n value={dateRange}\n options={DATE_RANGES}\n isClearable={false}\n />\n
\n \n Take Action\n actions.reload()} title=\"Refresh\">\n \n
\n \n {leadStats.map((stat) => (\n
\n {loading && {children}
\n);\n\nFormRow.propTypes = {\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n};\n\nFormRow.defaultProps = {\n className: \"\",\n};\n\nexport default FormRow;\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport DatePicker from \"../../../shared/v2/DatePicker\";\nimport Dropdown from \"../../../shared/v2/Dropdown\";\nimport { FloatingForm } from \"../../../shared/v2/Modal\";\nimport TextInput from \"../../../shared/v2/TextInput\";\nimport FormRow from \"./FormRow\";\n\nconst validateForm = (formData) => {\n const errors = {};\n if (!formData.goalTypeId) errors.goalTypeId = \"Must select goal type\";\n if (!formData.amount) errors.amount = \"Must choose an amount\";\n if (!errors.amount && formData.amount < 1) errors.amount = \"Must choose amount greater than 0\";\n return errors;\n};\n\nconst NewLeadGenActivityModal = ({ goalTypes, open, openForType, onClose, onSubmit }) => {\n const formRef = useRef(null);\n const dropdownRef = useRef(null);\n const [errors, setErrors] = useState({});\n const [goalType, setGoalType] = useState(null);\n const [activityDate, setActivityDate] = useState(moment().format(\"MM/DD/YYYY\"));\n const goalTypeOptions = useMemo(\n () =>\n goalTypes.map((type) => ({\n label: type.displayName,\n value: type.id,\n meta: type,\n })),\n [goalTypes],\n );\n\n useEffect(() => {\n if (openForType) setGoalType(goalTypeOptions.find((gt) => String(gt.value) === openForType));\n }, [openForType, goalTypeOptions]);\n\n const resetForm = () => {\n setGoalType(null);\n formRef.current?.reset();\n };\n\n const closeModal = () => {\n resetForm();\n onClose();\n };\n\n return (\n \n
\n \n {\n if (/[-.]/.test(e.key)) e.preventDefault();\n }}\n onChange={() => setErrors(({ amount, ...currentErrors }) => currentErrors)}\n />\n
\n \n
\n \n {tempActivity ? (\n setValue(\"note_content\", e.target.value)}\n />\n ) : (\n activity.notes?.[0]?.content\n )}\n
\n | Logged By | \n# of Activity | \nActivity Date | \nNotes | \nEdit | \nDelete | \n
|---|
Logged activities will show up here.
}\n {error &&\n goalSection === \"activity\")}\n open={newLeadGenActivityOpen}\n openForType={newLeadGenActivityOpenForType}\n onClose={() => {\n setNewLeadGenActivityOpen(false);\n setNewLeadGenActivityOpenForType(null);\n }}\n onSubmit={actions.createAgentActivity}\n />\n\n setViewHistoryModalGoalType(null)}\n />\n\n actions.setError(null)} />\n {loading &&
\n );\n};\n\nLeadGenActivities.propTypes = {\n userUuids: PropTypes.arrayOf(PropTypes.string).isRequired,\n currentUser: PropTypes.shape({ admin: PropTypes.bool, id: PropTypes.number }),\n};\n\nLeadGenActivities.defaultProps = {\n currentUser: null,\n};\n\nexport default LeadGenActivities;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst Checkbox = ({ checked, labelText, ...props }) => {\n const fontAwesomeCheckboxIcon = checked ? \"\\uF14A\" : \"\\uF096\";\n\n return (\n \n );\n};\nCheckbox.propTypes = {\n checked: PropTypes.bool,\n labelText: PropTypes.string.isRequired,\n};\nCheckbox.defaultProps = {\n checked: false,\n};\n\nexport default Checkbox;\n","import React, { useEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Button from \"../../shared/v2/Button\";\n\nconst ScrollButton = () => {\n const [show, setShow] = useState(false);\n const [portal, setPortal] = useState(null);\n\n useEffect(() => {\n const div = document.createElement(\"div\");\n document.body.appendChild(div);\n setPortal(div);\n return () => div.remove();\n }, []);\n\n useEffect(() => {\n const handleScroll = () => {\n setShow((document.scrollingElement?.scrollTop || 0) > 20);\n };\n window.addEventListener(\"scroll\", handleScroll);\n return () => window.removeEventListener(\"scroll\", handleScroll);\n });\n\n if (!portal || !show) return null;\n\n return ReactDOM.createPortal(\n \n window.location.assign(\"/settings/goals\")}\n >\n Goal Settings
\n Activity Tracking
\n\n
\n \n \n
\n \n {\n const momentStartDate = moment(startDate, FROM_FORMAT);\n const momentValue = moment(value, FROM_FORMAT);\n if (momentStartDate.year() !== momentValue.year()) {\n setEndDate(moment(endDate, FROM_FORMAT).year(momentValue.year()).format(FROM_FORMAT));\n }\n setStartDate(moment(value, FROM_FORMAT).format(FROM_FORMAT));\n }}\n />\n {\n const momentEndDate = moment(endDate, FROM_FORMAT);\n const momentValue = moment(value, FROM_FORMAT);\n if (momentEndDate.year() !== momentValue.year()) {\n setStartDate(moment(startDate, FROM_FORMAT).year(momentValue.year()).format(FROM_FORMAT));\n }\n setEndDate(moment(value, FROM_FORMAT).format(FROM_FORMAT));\n }}\n />\n
\n )}\n \n Brivity Activities\n
\n\n \n {data?.goalTypes\n .filter(({ goalSection }) => goalSection === \"lead_interaction\")\n .map((goalType) => (\n setNewLeadGenActivityOpenForType(String(goalType.id))}\n onViewHistory={() => setViewHistoryModalGoalType(goalType)}\n value={data.brivityActivities[goalType.id] || 0}\n />\n ))}\n
\n \n \n Logged Activities\n \n
\n \n {data?.goalTypes\n .filter(({ goalSection }) => goalSection === \"activity\")\n .map((goalType) => (\n setNewLeadGenActivityOpenForType(String(goalType.id))}\n onViewHistory={() => setViewHistoryModalGoalType(goalType)}\n value={data.loggedActivities[goalType.id] || 0}\n />\n ))}\n
\n \n setIsOpen(true)}>\n setIsOpen(false)}\n >\n \n
\n {personAvatar}\n
\n {errors && \n {person.first_name} {person.last_name}\n
\n\n {person.main_email}\n
\n \n {\n const d = new Date();\n setValue(\n \"interacted_at\",\n set(parse(date, \"MM/dd/yyyy\", d), {\n hours: d.getHours(),\n minutes: d.getMinutes(),\n }).toISOString(),\n );\n }}\n />\n