\r\n Layout Settings\r\n User Interface Settings\r\n
\r\n\r\n
\r\n
\r\n )}\r\n \r\n {status.ImpersonationActive ? (\r\n <>{impersonationHeader}\r\n ) : (\r\n {username}\r\n )}\r\n
\r\n {status.ImpersonationActive && (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Stop Impersonating\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Impersonate\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {username}\r\n
\r\n \r\n {user?.MemberEmail}\r\n \r\n \r\n \r\n Profile\r\n
\r\n \r\n \r\n Logout\r\n
\r\n \r\n \r\n \r\n \r\n { menuFlip ?
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default NavToggle;\r\n","import React from 'react';\r\n\r\nimport TopBar from '@components/general/topBar/TopBar';\r\nimport NavToggle from '@components/general/sideBar/NavToggle';\r\n\r\nconst Header = () => (\r\n \r\n {`Showing rows ${\r\n currentFirstItem <= totalRows ? currentFirstItem : totalRows\r\n } to ${getFinalCount()} of ${totalRows}`}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nPagination.propTypes = {\r\n table: PropTypes.shape({\r\n getState: PropTypes.func,\r\n previousPage: PropTypes.func,\r\n getCanNextPage: PropTypes.func,\r\n nextPage: PropTypes.func,\r\n getPageCount: PropTypes.func,\r\n setPageIndex: PropTypes.func,\r\n getCoreRowModel: PropTypes.func,\r\n getFilteredRowModel: PropTypes.func,\r\n }).isRequired,\r\n maxPages: PropTypes.number,\r\n sizePerPage: PropTypes.number.isRequired,\r\n};\r\n\r\nexport default Pagination;\r\n","import React, { useMemo, useState } from 'react';\r\nimport {\r\n useReactTable,\r\n getCoreRowModel,\r\n getFilteredRowModel,\r\n getPaginationRowModel,\r\n flexRender,\r\n getSortedRowModel,\r\n getExpandedRowModel,\r\n} from '@tanstack/react-table';\r\nimport PropTypes from 'prop-types';\r\nimport Pagination from './pagination';\r\n\r\nconst DataTable = ({\r\n data = [],\r\n columns,\r\n striped,\r\n hover,\r\n wrapperClasses,\r\n classes,\r\n noDataIndication,\r\n searchComponent,\r\n allowPagination = true,\r\n sizePerPage = 10,\r\n defaultSorted = [],\r\n expandRow,\r\n ...props\r\n}) => {\r\n const [globalFilter, setGlobalFilter] = useState('');\r\n const [sorting, setSorting] = useState(defaultSorted);\r\n\r\n const [expanded, setExpanded] = useState({});\r\n\r\n const columnVisibility = useMemo(() => {\r\n const visibility = {};\r\n columns.forEach(({ hidden, id } = {}) => {\r\n if (hidden) {\r\n visibility[id] = !hidden;\r\n }\r\n });\r\n\r\n return visibility;\r\n }, [columns]);\r\n\r\n const table = useReactTable({\r\n data,\r\n columns,\r\n getCoreRowModel: getCoreRowModel(),\r\n getFilteredRowModel: getFilteredRowModel(),\r\n getPaginationRowModel: getPaginationRowModel(),\r\n getSortedRowModel: getSortedRowModel(),\r\n getExpandedRowModel: getExpandedRowModel(),\r\n onSortingChange: setSorting,\r\n onGlobalFilterChange: setGlobalFilter,\r\n onExpandedChange: setExpanded,\r\n getRowCanExpand: () => Boolean(expandRow),\r\n getColumnCanGlobalFilter: column => Boolean(column.columnDef?.searchable),\r\n initialState: {\r\n pagination: {\r\n pageSize: sizePerPage,\r\n },\r\n },\r\n state: {\r\n sorting,\r\n globalFilter,\r\n expanded,\r\n columnVisibility,\r\n },\r\n sortingFns: {\r\n myDateTime: (a, b, column) => (\r\n new Date(a.getValue(column)) < new Date(b.getValue(column)) ? -1 : 1\r\n ),\r\n },\r\n });\r\n\r\n const onSearch = val => setGlobalFilter(val);\r\n\r\n return (\r\n <>\r\n {searchComponent && searchComponent({ onSearch })}\r\n - \r\n {currentPage >= 4 && (\r\n
- \r\n
- \r\n
- \r\n
- \r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nDataTable.propTypes = {\r\n data: PropTypes.arrayOf(PropTypes.shape({})),\r\n columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n striped: PropTypes.bool,\r\n hover: PropTypes.bool,\r\n wrapperClasses: PropTypes.string,\r\n classes: PropTypes.string,\r\n noDataIndication: PropTypes.string,\r\n searchComponent: PropTypes.func,\r\n allowPagination: PropTypes.bool,\r\n sizePerPage: PropTypes.number,\r\n defaultSorted: PropTypes.arrayOf(PropTypes.shape({})),\r\n expandRow: PropTypes.shape({\r\n expandHeaderColumnRenderer: PropTypes.func,\r\n expandColumnRenderer: PropTypes.func,\r\n renderer: PropTypes.func,\r\n }),\r\n};\r\n\r\nexport default DataTable;\r\n","import React from 'react';\r\nimport { createColumnHelper } from '@tanstack/react-table';\r\n\r\nconst columnHelper = createColumnHelper();\r\n\r\nconst generateColumn = col => ({\r\n cell: info => (\r\n col?.formatter ? col.formatter(info.getValue(), info.row?.original) : <>{info.getValue()}\r\n ),\r\n cellProps: {\r\n style: col?.style,\r\n className: `${col?.className || ''} ${col?.classes || ''}`,\r\n },\r\n headerStyle: col?.headerStyle,\r\n headerAttrs: {\r\n ...col?.headerAttrs || {},\r\n className: `${col.headerAttrs?.className || ''} ${col.searchable ? 'sortable' : ''}`,\r\n },\r\n header: () => col?.text || ' ',\r\n footer: info => info.column.id,\r\n enableSorting: col.sort,\r\n sortingFn: col?.sortingFn === undefined ? 'alphanumeric' : col?.sortingFn,\r\n searchable: col.searchable === undefined ? true : col.searchable,\r\n hidden: col.hidden === undefined ? false : col.hidden,\r\n id: col.dataField,\r\n});\r\n\r\nconst translateColumns = (columns = []) => columns.map(col => {\r\n if (col?.dataField === 'actions') return columnHelper.display(generateColumn(col));\r\n return columnHelper.accessor(col.dataField, generateColumn(col));\r\n});\r\n\r\nexport const translateSort = (sortBy = []) => sortBy.map(({ dataField, order }) => ({ id: dataField, desc: order === 'desc' }));\r\n\r\nexport default translateColumns;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport TeamMemberRowActionButtons from '@components/table/actionButtons/TeamMemberRowActionButtons';\r\n\r\nimport Avatar from '@mui/material/Avatar';\r\nimport Stack from '@mui/material/Stack';\r\nimport DataTable from '../dataTable';\r\nimport translateColumns, { translateSort } from '../dataTable/dataTranslate';\r\n\r\nconst TeamLeadersTable = ({\r\n id = 'teamLeadersTable',\r\n displayData,\r\n showDeleteButton = true,\r\n onMemberDelete,\r\n showStartImpersonationButton = false,\r\n isModal = false,\r\n}) => {\r\n const onDeleteRow = row => onMemberDelete(row);\r\n\r\n const actionsFormatter = (cell, row) => (\r\n \r\n \r\n \r\n {table.getHeaderGroups().map(headerGroup => (\r\n \r\n {expandRow && (\r\n \r\n {expandRow?.expandHeaderColumnRenderer({\r\n isAnyExpands: table.getIsSomeRowsExpanded(),\r\n })}\r\n \r\n )}\r\n {headerGroup.headers.map(header => (\r\n \r\n {!header.isPlaceholder && (\r\n <>\r\n {flexRender(\r\n header.column.columnDef.header,\r\n header.getContext(),\r\n )}\r\n \r\n )}\r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {table.getRowModel().rows.map(row => (\r\n <>\r\n \r\n {expandRow && (\r\n \r\n {expandRow?.expandColumnRenderer({\r\n expanded: row.getIsExpanded(),\r\n })}\r\n \r\n )}\r\n {row.getVisibleCells().map(cell => (\r\n \r\n {flexRender(\r\n cell.column.columnDef.cell,\r\n cell.getContext(),\r\n )}\r\n \r\n ))}\r\n \r\n {expandRow && row.getIsExpanded() && (\r\n \r\n \r\n {expandRow?.renderer(row?.original)}\r\n \r\n \r\n )}\r\n \r\n ))}\r\n \r\n {!table.getRowModel().rows.length && (\r\n \r\n {noDataIndication} \r\n \r\n )}\r\n \r\n
\r\n {!!table.getRowModel().rows.length && allowPagination && (\r\n \r\n
\r\n )}\r\n \r\n {!isEmpty(src) ? 
: null}\r\n {!isEmpty(header) ?
\r\n );\r\n};\r\n\r\nCard.propTypes = {\r\n alt: PropTypes.string,\r\n children: PropTypes.node,\r\n customClass: PropTypes.string,\r\n customBodyClass: PropTypes.string,\r\n customHeader: PropTypes.string,\r\n header: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.shape(),\r\n ]),\r\n footer: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.node,\r\n ]),\r\n src: PropTypes.string,\r\n title: PropTypes.string,\r\n id: PropTypes.string,\r\n};\r\n\r\nCard.defaultProps = {\r\n alt: null,\r\n customClass: '',\r\n customHeader: '',\r\n customBodyClass: '',\r\n header: null,\r\n footer: null,\r\n src: null,\r\n title: null,\r\n id: null,\r\n};\r\n\r\nexport default Card;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TeamMemberRowActionButtons from '@components/table/actionButtons/TeamMemberRowActionButtons';\r\n\r\nimport Avatar from '@mui/material/Avatar';\r\nimport Stack from '@mui/material/Stack';\r\nimport translateColumns, { translateSort } from '../dataTable/dataTranslate';\r\nimport DataTable from '../dataTable';\r\n\r\nconst TeamMembersTable = ({\r\n id = 'teamMembersTable',\r\n displayData,\r\n onMemberDelete,\r\n showDeleteButton = true,\r\n isModal = false,\r\n}) => {\r\n const onDeleteRow = row => onMemberDelete(row);\r\n\r\n const actionsFormatter = (cell, row) => (\r\n {header}
: null}\r\n {!isEmpty(title)\r\n ? (\r\n \r\n
\r\n )\r\n : (\r\n \r\n {title}\r\n
\r\n{children}
\r\n \r\n
\r\n )}\r\n {!isEmpty(footer) && footer !== null\r\n ? {children}
\r\n {footer}
: null}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nListingImpersonation.propTypes = {\r\n};\r\n\r\nexport default ListingImpersonation;\r\n","import React from 'react';\r\nimport Modal from '../smartAdminUI/Modal';\r\nimport ListingImpersonation from './ListingImpersonation/ListingImpersonation';\r\n\r\nconst ReqImpersonation = () => (\r\n \r\n
\r\n \r\n);\r\n\r\nexport default ReqImpersonation;\r\n","import { useState } from 'react';\r\n\r\nconst useObjectState = (initialState = {}) => {\r\n const [localState, _setLocalState] = useState(initialState);\r\n const setLocalState = fieldAndValue => _setLocalState({ ...localState, ...fieldAndValue });\r\n\r\n return [localState, setLocalState];\r\n};\r\n\r\nexport default useObjectState;\r\n","import { createSelector } from 'reselect';\r\nimport { isEmpty } from 'lodash';\r\n\r\nexport const getFieldPermissions = createSelector(({ acl }) => acl.fieldPermissions, result => result);\r\n\r\nexport const getFormActions = createSelector(({ acl }) => acl.formActions, result => result);\r\n\r\nexport const getAclString = createSelector(({ acl }) => acl.aclString, result => result);\r\n\r\nexport const getIsAdmin = createSelector(({ acl }) => (\r\n isEmpty(acl.aclString)\r\n ? false\r\n : acl.aclString.split(',').includes('ADMIN')), result => result);\r\n\r\nexport const getMainActions = createSelector(({ acl }) => acl.mainActions, result => result);\r\n\r\nexport const getFormPermissions = createSelector(({ acl }) => acl.formPermissions, result => result);\r\n\r\nexport const getPagePermissions = createSelector(({ acl }) => acl.pagePermissions, result => result);\r\n\r\nexport const getError = createSelector(({ acl }) => acl.error, result => result);\r\n\r\nexport const getLoading = createSelector(({ acl }) => acl.loading, result => result);\r\n\r\nexport const getMultiLoading = createSelector(({ acl }) => acl.actionLoadingStatuses, result => result);\r\n\r\nexport const getCompleted = createSelector(({ acl }) => acl.actionsComplete, result => result);\r\n","import { useEffect, useState } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport {\r\n clearAclDetails,\r\n clearAclLoadingStatuses,\r\n clearAclCompleted,\r\n getAclDetails,\r\n getMainAclDetails,\r\n setMultiLoadingStatus,\r\n setActionCompleted,\r\n} from '@redux/modules/acl';\r\n\r\nimport {\r\n getCompleted,\r\n getFieldPermissions,\r\n getFormActions,\r\n getAclString,\r\n getIsAdmin,\r\n getFormPermissions,\r\n getMainActions,\r\n getPagePermissions,\r\n getError,\r\n getMultiLoading,\r\n} from '@redux/selectors/AclSelector';\r\n\r\nconst useAcl = () => {\r\n const dispatch = useDispatch();\r\n const fieldPermissions = useSelector(getFieldPermissions);\r\n const formActions = useSelector(getFormActions);\r\n const aclString = useSelector(getAclString);\r\n const isAdmin = useSelector(getIsAdmin);\r\n const formPermissions = useSelector(getFormPermissions);\r\n const mainActions = useSelector(getMainActions);\r\n const pagePermissions = useSelector(getPagePermissions);\r\n const isAclError = useSelector(getError);\r\n\r\n const isMultiLoading = useSelector(getMultiLoading);\r\n const isAclCompleted = useSelector(getCompleted);\r\n const [aclInitialized, setAclInitialized] = useState(true);\r\n\r\n const getListingAcl = requestDetails => {\r\n dispatch(getAclDetails('listing', requestDetails));\r\n };\r\n\r\n const getAgentAcl = requestDetails => {\r\n const actionName = `${requestDetails.formname}${requestDetails.action}`;\r\n const loadingStatus = { [actionName]: true };\r\n const completeStatus = { [actionName]: false };\r\n dispatch(getAclDetails('agentACL', requestDetails));\r\n dispatch(setMultiLoadingStatus(loadingStatus));\r\n dispatch(setActionCompleted(completeStatus));\r\n };\r\n\r\n const getOfficeAcl = requestDetails => {\r\n dispatch(getAclDetails('officeACL', requestDetails));\r\n };\r\n\r\n const getMainAcl = requestDetails => {\r\n dispatch(getMainAclDetails('mainACL', requestDetails));\r\n };\r\n\r\n const clearAcl = () => {\r\n dispatch(clearAclDetails());\r\n };\r\n\r\n const clearMultiStatus = () => {\r\n dispatch(clearAclLoadingStatuses());\r\n };\r\n\r\n const clearAclCompletedLog = () => {\r\n dispatch(clearAclCompleted());\r\n };\r\n\r\n const isLoadingMultiple = () => {\r\n const loadingStatus = isMultiLoading;\r\n const loadingValues = Object.values(loadingStatus);\r\n const isLoadingTrueFound = loadingValues.includes(true);\r\n return isLoadingTrueFound;\r\n };\r\n\r\n const isAllComplete = () => {\r\n const completeCalls = isAclCompleted;\r\n if (Object.keys(completeCalls).length === 0) return false;\r\n const completeStatus = !(Object.values(completeCalls).includes(false));\r\n return completeStatus;\r\n };\r\n\r\n /* Clear ACL details on un-mount. */\r\n useEffect(() => {\r\n clearAcl();\r\n clearAclCompleted();\r\n clearMultiStatus();\r\n }, []);\r\n\r\n useEffect(() => {\r\n setAclInitialized(true);\r\n }, []);\r\n\r\n return {\r\n aclInitialized,\r\n canEditForm: formActions?.EDIT ?? false,\r\n canCopyForm: formActions?.COPY ?? false, // listings only\r\n canAuditForm: formActions?.AUDITLOG ?? false, // listings only\r\n canViewForm: formActions?.VIEW ?? false,\r\n canViewTeam: formActions?.VIEWTEAM ?? false, // agents only\r\n canEditTeam: formActions?.EDITTEAM ?? false, // agents only\r\n canAddTeamMember: formActions?.ADDTEAMMEMBER ?? false, // agents only\r\n canAddToTeam: formActions?.ADDTOTEAM ?? false, // agents only\r\n fieldPermissions,\r\n formActions,\r\n aclString,\r\n formPermissions,\r\n mainActions, // homepage only\r\n pagePermissions,\r\n isAdmin,\r\n isAclError,\r\n isAllComplete,\r\n isLoadingMultiple,\r\n clearMultiStatus,\r\n clearAclCompletedLog,\r\n getListingAcl,\r\n getAgentAcl,\r\n getOfficeAcl,\r\n getMainAcl,\r\n };\r\n};\r\n\r\nexport default useAcl;\r\n","export default __webpack_public_path__ + \"static/media/cover-7-lg.d2b95e3a.png\";","export const listingDict = {\r\n com: 'Commercial',\r\n farm: 'Farm',\r\n land: 'Land',\r\n mob: 'MobileHome',\r\n mult: 'Multifamily',\r\n rnt: 'Rental',\r\n res: 'Residential',\r\n};\r\n\r\nexport const listingRuleDict = {\r\n com: 'CommercialListingRules',\r\n farm: 'FarmListingRules',\r\n land: 'LandListingRules',\r\n mob: 'MobileHomeListingRules',\r\n mult: 'MultifamilyListingRules',\r\n rnt: 'RentalListingRules',\r\n res: 'ResidentialListingRules',\r\n chgTerm: 'ChangeToTerminatedListingRules',\r\n chgSold: 'ChangeToSoldListingRules',\r\n chgMajor: 'MajorCorrectionsRules',\r\n chgPending: 'ChangeToPendingListingRules',\r\n chgLeased: 'ChangeToLeasedListingRules',\r\n chgWithdrawn: 'ChangeToWithdrawnListingRules',\r\n chgActive: 'ChangeToActiveListingRules',\r\n chgExp: 'ChangeToExpiredListingRules',\r\n chgDel: 'ChangeToDeletedListingRules',\r\n chgOpenHouse: 'ChangeToOpenHouseListingRules',\r\n};\r\n","import isEmpty from 'lodash/isEmpty';\r\nimport { createSelector } from 'reselect';\r\nimport { isUndefined } from 'lodash';\r\nimport { listingDict } from '../constants/GeneralConstants';\r\n\r\nexport const selectRepeatableSectionCount = ({ listing }) => listing.repeatableSectionCount;\r\n\r\nexport const selectUploadedImages = ({ listing }) => listing.uploadedPhotos;\r\n\r\nexport const selectCurrentImages = ({ listing }) => listing.currentImages;\r\n\r\nexport const selectUploadedSupplements = ({ listing }) => listing.uploadedSupplements;\r\n\r\nexport const selectCurrentListing = ({ listing }) => listing?.listingClicked;\r\n\r\nexport const selectListingStdStatus = ({ listing }) => listing?.listingClicked?.StandardStatus;\r\n\r\nexport const selectListingStdStatusVerb = ({ listing }) => listing?.listingClicked?.StandardStatusVerb;\r\n\r\nexport const selectCurrentListingPreferredPhotoDetails = ({ listing }) => listing.listingPreferredPhotoDetails;\r\n\r\nexport const selectCurrentListingPhoto = ({ listing }) => listing.listingPhoto;\r\n\r\nexport const selectListingSelected = ({ listing }) => listing.selectedListing;\r\n\r\nexport const selectMyListings = ({ listing }) => listing.myListings;\r\n\r\nexport const selectListingSelectedPhotos = createSelector(selectListingSelected, selectedListing => selectedListing?.photos ?? []);\r\n\r\nexport const selectListingSelectedRooms = createSelector(selectListingSelected, selectedListing => selectedListing?.rooms ?? []);\r\n\r\nexport const selectListingSelectedSupplements = createSelector(selectListingSelected, selectedListing => selectedListing?.supplements ?? []);\r\n\r\nexport const selectListingSelectedOpenHouses = createSelector(selectListingSelected, selectedListing => selectedListing?.openHouses ?? []);\r\n\r\nexport const selectListingSelectedParcels = createSelector(selectListingSelected, selectedListing => selectedListing?.parcels ?? []);\r\n\r\nexport const selectListingSelectedDoors = createSelector(selectListingSelected, selectedListing => selectedListing?.doors ?? []);\r\n\r\nexport const selectListingSelectedUnits = createSelector(selectListingSelected, selectedListing => selectedListing?.units ?? []);\r\n\r\nexport const selectListingSelectedHistory = createSelector(selectListingSelected, selectedListing => selectedListing?.history ?? []);\r\n\r\nexport const getSelectedListingData = ({ listing }) => listing?.selectedListing?.listing;\r\n\r\nexport const selectListingPhotoSortOrder = ({ listing }) => listing.listingPhotoSortOrder;\r\n\r\nexport const selectListingCodeFromListing = createSelector(\r\n selectListingSelected,\r\n listing => listing?.PropertyType.toString().toLowerCase(),\r\n);\r\n\r\nexport const selectListingTypeForViewing = createSelector(\r\n selectListingCodeFromListing,\r\n listingType => listingDict[listingType],\r\n);\r\n\r\nexport const selectListingSelectedByFilled = ({ listing }) => {\r\n const selectedListing = [];\r\n const dict = {};\r\n if (!isEmpty(listing.selectedListing)) {\r\n let slctListingData;\r\n if (listing.selectedListing.listing) {\r\n slctListingData = listing.selectedListing.listing; // Loading a listing\r\n } else {\r\n [slctListingData] = listing.selectedListing; // TAP data\r\n }\r\n Object.entries(slctListingData).map(([key, value]) => {\r\n if (value !== null) {\r\n dict[key] = value;\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n if (!isEmpty(dict)) {\r\n selectedListing.push(dict);\r\n }\r\n return selectedListing;\r\n};\r\n\r\n// unused?\r\nexport const selectAutoPopSelectedByFieldName = ({ listing }, fieldName) => {\r\n const dict = {};\r\n if (listing.autoPopSelected) {\r\n const [slctListingData] = listing.autoPopSelected[0];\r\n Object.entries(slctListingData).map(([key, value]) => {\r\n if (key === fieldName) {\r\n dict[key] = value;\r\n }\r\n return null;\r\n });\r\n }\r\n return dict;\r\n};\r\n\r\n/* retrieves ListingId, UnparsedAddress and StandardStatus values from the current listing */\r\nexport const selectEditListingHeaderInfo = createSelector(selectListingSelected, listing => {\r\n const listingInfo = [];\r\n if (!isEmpty(listing)) {\r\n Object.entries(listing).map(([key, value]) => {\r\n if (key === 'listing') {\r\n const unitNumber = isUndefined(value?.UnitNumber) ? '' : `${value?.UnitNumber}, `;\r\n const streetNumber = isUndefined(value?.StreetNumber) ? '' : `${value?.StreetNumber} `;\r\n const streetName = isUndefined(value?.StreetName) ? '' : `${value?.StreetName} `;\r\n const streetSuffix = isUndefined(value?.StreetSuffix) ? '' : `${value?.StreetSuffix} `;\r\n const streetDirSuffix = isUndefined(value?.StreetDirSuffix) ? '' : `${value?.StreetDirSuffix}`;\r\n const unparsedAddress = value?.UnparsedAddress\r\n ? value?.UnparsedAddress\r\n : `${unitNumber}${streetNumber}${streetName}${streetSuffix}${streetDirSuffix}`;\r\n\r\n listingInfo.push({\r\n ListingId: value?.ListingId,\r\n PropertyType: value?.PropertyType,\r\n StandardStatus: value?.StandardStatus,\r\n UnparsedAddress: unparsedAddress,\r\n });\r\n }\r\n return null;\r\n });\r\n }\r\n return listingInfo;\r\n});\r\n\r\nexport const selectSectionsPerRepeatableSection = createSelector(selectRepeatableSectionCount, countListing => {\r\n const countPerSection = {};\r\n if (countListing) {\r\n const {\r\n Photos = [],\r\n Rooms = [],\r\n Supplements = [],\r\n OpenHouses = [],\r\n Doors = [],\r\n Parcels = [],\r\n Units = [],\r\n History = [],\r\n } = countListing;\r\n countPerSection.Photos = Photos.filter(photo => !photo);\r\n countPerSection.Rooms = Rooms.filter(room => !room);\r\n countPerSection.Supplements = Supplements.filter(supp => !supp);\r\n countPerSection.OpenHouses = OpenHouses.filter(openHouse => !openHouse);\r\n countPerSection.Doors = Doors.filter(door => !door);\r\n countPerSection.Parcels = Parcels.filter(parcel => !parcel);\r\n countPerSection.Units = Units.filter(unit => !unit);\r\n countPerSection.History = History.filter(hist => !hist);\r\n }\r\n return countPerSection;\r\n});\r\n","import { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst canUseDOM = () => typeof window === 'undefined' || !window.document || !window.document.createElement;\r\n\r\nexport const ZendeskAPI = (...args) => {\r\n if (canUseDOM && window.zE) window.zE.apply(null, args);\r\n // eslint-disable-next-line no-console\r\n else console.warn('Zendesk is not initialized yet');\r\n};\r\n\r\nexport default class Zendesk extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.insertScript = this.insertScript.bind(this);\r\n this.onScriptLoaded = this.onScriptLoaded.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n if (canUseDOM && !window.zE) {\r\n const { defer, zendeskKey, ...other } = this.props;\r\n this.insertScript(zendeskKey, defer);\r\n window.zESettings = other;\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if (!canUseDOM || !window.zE) {\r\n return;\r\n }\r\n delete window.zE;\r\n delete window.zESettings;\r\n }\r\n\r\n onScriptLoaded() {\r\n const { onLoaded } = this.props;\r\n\r\n if (typeof onLoaded === 'function') {\r\n onLoaded();\r\n }\r\n }\r\n\r\n insertScript(zendeskKey, defer) {\r\n const script = document.createElement('script');\r\n if (defer) {\r\n script.defer = true;\r\n } else {\r\n script.async = true;\r\n }\r\n script.id = 'ze-snippet';\r\n script.src = `https://static.zdassets.com/ekr/snippet.js?key=${zendeskKey}`;\r\n script.addEventListener('load', this.onScriptLoaded);\r\n document.body.appendChild(script);\r\n }\r\n\r\n render() {\r\n return null;\r\n }\r\n}\r\n\r\nZendesk.propTypes = {\r\n zendeskKey: PropTypes.string.isRequired,\r\n defer: PropTypes.bool,\r\n onLoaded: PropTypes.func,\r\n};\r\n","import React, { useState } from 'react';\r\nimport { useSelector } from 'react-redux';\r\n\r\nimport {\r\n getUser,\r\n getLoadingState,\r\n} from '@redux/selectors/UserSelector';\r\nimport { getSelectedListingData, selectCurrentListing } from '@redux/selectors/ListingSelector';\r\n\r\nimport Badge from '@mui/material/Badge';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\nimport Zendesk, { ZendeskAPI } from './ZendeskConfig';\r\n\r\nconst ZendeskChat = () => {\r\n const [unreadCount, setUnreadCount] = useState(0);\r\n const isLoading = useSelector(getLoadingState);\r\n const user = useSelector(getUser);\r\n const currentListing = useSelector(selectCurrentListing);\r\n const selectedListing = useSelector(getSelectedListingData);\r\n let listingId;\r\n\r\n if (selectedListing) listingId = selectedListing.ListingId;\r\n else if (currentListing) listingId = currentListing.ListingId;\r\n\r\n const handleOpen = () => {\r\n ZendeskAPI('messenger', 'open');\r\n\r\n let aor;\r\n\r\n if (!isLoading) {\r\n // Member ID\r\n ZendeskAPI('messenger:set', 'conversationFields', [{ id: 6007868926491, value: user.MemberMlsId }]);\r\n // First Name\r\n ZendeskAPI('messenger:set', 'conversationFields', [{ id: 6013247923099, value: user.MemberFirstName }]);\r\n // Last Name\r\n ZendeskAPI('messenger:set', 'conversationFields', [{ id: 6013249823003, value: user.MemberLastName }]);\r\n // Email Address\r\n ZendeskAPI('messenger:set', 'conversationFields', [{ id: 12878322811419, value: user.MemberEmail }]);\r\n // Board\r\n switch (user.MemberAOR.toLowerCase()) {\r\n case 'creb':\r\n case 'awra':\r\n case 'cara':\r\n case 'fmreb':\r\n case 'gpaar':\r\n case 'ldar':\r\n case 'rald':\r\n case 'mhreb':\r\n case 'rasca':\r\n case 'area':\r\n case 'rae':\r\n aor = `ticket_cf_tag_aor_${user.MemberAOR.toLowerCase()}`;\r\n break;\r\n default:\r\n aor = 'ticket_cf_tag_aor_na';\r\n break;\r\n }\r\n ZendeskAPI('messenger:set', 'conversationFields', [{ id: 18788486062363, value: aor }]);\r\n }\r\n // Listing ID\r\n if (listingId) ZendeskAPI('messenger:set', 'conversationFields', [{ id: 6224018977691, value: listingId }]);\r\n };\r\n\r\n const handleLoaded = () => {\r\n ZendeskAPI('messenger', 'close');\r\n ZendeskAPI('messenger:on', 'unreadMessages', count => setUnreadCount(count));\r\n };\r\n\r\n return (\r\n <>\r\n \r\n Chat & Knowledgebase\r\n \r\n )}\r\n >\r\n
0 ? 'jello-horizontal' : ''}>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SupportFooter;\r\n","import React from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport Badge from 'react-bootstrap/Badge';\r\n\r\nimport { includes } from 'lodash';\r\nimport {\r\n CLOUDCMA_PAGE_CLICKED,\r\n CONDO_MANAGEMENT_PAGE_CLICKED,\r\n CREAWEBFORMS_PAGE_CLICKED,\r\n CREADDF_PAGE_CLICKED,\r\n HOME_BUTTON_CLICKED,\r\n REMAPLIST_PAGE_CLICKED,\r\n SEARCH_AGENTS_PAGE_CLICKED,\r\n SEARCH_LISTINGS_PAGE_CLICKED,\r\n MATRIX_PAGE_CLICKED,\r\n OFFICE_PAGE_CLICKED,\r\n PROSPECTS_PAGE_CLICKED,\r\n SPACELIST_PAGE_CLICKED,\r\n SPIN_PAGE_CLICKED,\r\n} from '@redux/constants/ActionTypes';\r\n\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\nimport { clearPhotoCollection } from '@redux/modules/photo';\r\nimport { clearRepeatableSectionCount } from '@redux/modules/listing';\r\nimport { clearAgent } from '@redux/modules/agent';\r\nimport useObjectState from '@hooks/useObjectState';\r\nimport useAcl from '@hooks/useAcl';\r\n\r\nimport P9CoverLarge from '@images/covers/cover-7-lg.png';\r\nimport P9Logo from '@images/logos/P9LogoWhite.png';\r\nimport WhitePillars from '@images/logos/pillars-white.png';\r\nimport SupportFooter from './SupportFooter';\r\n\r\nconst appSettings = require('../../../appsettings.json');\r\n\r\nconst menuInitialState = {\r\n agentNav: false,\r\n listingNav: false,\r\n createListingNav: false,\r\n officesNav: false,\r\n creaNav: false,\r\n resourcesNav: false,\r\n};\r\n\r\nconst Sidebar = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n\r\n const [{\r\n agentNav,\r\n listingNav,\r\n createListingNav,\r\n officesNav,\r\n creaNav,\r\n }, setMenuState] = useObjectState({\r\n agentNav: false,\r\n listingNav: false,\r\n createListingNav: false,\r\n officesNav: false,\r\n creaNav: false,\r\n });\r\n\r\n const { mainActions } = useAcl();\r\n\r\n const updateAgentNav = e => {\r\n e.stopPropagation();\r\n setMenuState({ ...menuInitialState, agentNav: !agentNav });\r\n };\r\n\r\n // toggles listings menu\r\n const updateListingNav = e => {\r\n e.stopPropagation();\r\n setMenuState({ ...menuInitialState, listingNav: !listingNav });\r\n };\r\n\r\n // toggles create listings submenu\r\n const updateCreateNav = e => {\r\n e.stopPropagation(); // to prevent submenu click from closing the menu\r\n setMenuState({ createListingNav: !createListingNav });\r\n };\r\n\r\n // toggles office menu\r\n const updateOfficesNav = e => {\r\n e.stopPropagation();\r\n setMenuState({ ...menuInitialState, officesNav: !officesNav });\r\n };\r\n\r\n // toggles crea menu\r\n const updateCreaNav = e => {\r\n e.stopPropagation();\r\n setMenuState({ ...menuInitialState, creaNav: !creaNav });\r\n };\r\n\r\n // loads form definitions based on the data attribute of the - \r\n
- \r\n
\r\n www.pillarnine.com\r\n \r\n )}\r\n >\r\n \r\n - \r\n
\r\n Email: support@pillarnine.com\r\n \r\n )}\r\n >\r\n \r\n - \r\n
\r\n Phone: 587-430-2991\r\n \r\n )}\r\n >\r\n \r\n - \r\n
\r\n \r\n
- \r\n {mainActions.AgentsCreate && (\r\n
- \r\n
- \r\n
- \r\n {mainActions.OfficesCreate && (\r\n
- \r\n
- \r\n
- \r\n
- \r\n
- \r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nSimpleAuditTableSearch.propTypes = {\r\n searchValue: PropTypes.string.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n onClear: PropTypes.func.isRequired,\r\n};\r\n\r\nconst ClearableInput = ({ fieldName, inputObject, onInputChange }) => {\r\n const handleInputChange = e => {\r\n const { value } = e.target;\r\n onInputChange(value);\r\n // eslint-disable-next-line no-param-reassign\r\n inputObject[fieldName] = value;\r\n };\r\n\r\n const handleInputClear = () => {\r\n // eslint-disable-next-line no-param-reassign\r\n delete inputObject[fieldName];\r\n onInputChange('');\r\n // eslint-disable-next-line no-param-reassign\r\n inputObject[fieldName] = '';\r\n };\r\n\r\n const inputGroupStyle = {\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '100%',\r\n };\r\n\r\n const inputStyle = {\r\n flex: '1',\r\n };\r\n\r\n const clearButtonStyle = {\r\n position: 'absolute',\r\n top: '50%',\r\n right: '1em',\r\n paddingRight: '0',\r\n transform: 'translateY(-50%)',\r\n cursor: 'pointer',\r\n pointerEvents: 'auto',\r\n zIndex: '100',\r\n background: 'transparent',\r\n border: 'none',\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nAdvancedAuditTableSearch.propTypes = {\r\n searchObject: PropTypes.shape().isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n onClear: PropTypes.func.isRequired,\r\n};\r\n\r\nconst AuditTableSearchInputGroup = ({\r\n setUsingAdvancedSearch,\r\n onSearch,\r\n}) => {\r\n const blankAdvancedSearchObject = {\r\n transactionType: '',\r\n changedBy: '',\r\n impersonating: '',\r\n resourceID: '',\r\n fieldType: '',\r\n fieldName: '',\r\n changedFrom: '',\r\n changedTo: '',\r\n };\r\n const [simpleSearchFieldValue, setSimpleSearchFieldValue] = useState('');\r\n const [advancedSearchObject, setAdvancedSearchObject] = useState(blankAdvancedSearchObject);\r\n const [advancedSearchIsActive, setAdvancedSearchIsActive] = useState(false);\r\n const [key, setKey] = useState('simpleSearch');\r\n\r\n const handleAdvancedSearchChange = value => {\r\n onSearch(value);\r\n setAdvancedSearchObject(value);\r\n };\r\n\r\n const handleSingleSearchChange = value => {\r\n onSearch({ searchText: value });\r\n setSimpleSearchFieldValue(value);\r\n };\r\n\r\n const handleSearchClear = () => {\r\n if (advancedSearchIsActive) {\r\n handleAdvancedSearchChange(blankAdvancedSearchObject);\r\n } else {\r\n handleSingleSearchChange('');\r\n }\r\n };\r\n\r\n const handleSearchTypeChanged = k => {\r\n setKey(k);\r\n const usingAdvancedSearch = k === 'advancedSearch';\r\n setAdvancedSearchIsActive(usingAdvancedSearch);\r\n setUsingAdvancedSearch(usingAdvancedSearch);\r\n if (usingAdvancedSearch) {\r\n handleAdvancedSearchChange(blankAdvancedSearchObject);\r\n } else {\r\n handleSingleSearchChange('');\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nAuditTableSearchInputGroup.propTypes = {\r\n setUsingAdvancedSearch: PropTypes.func,\r\n onSearch: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default AuditTableSearchInputGroup;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n trim,\r\n words,\r\n upperCase,\r\n startCase,\r\n camelCase,\r\n isEmpty,\r\n} from 'lodash';\r\n\r\nimport Avatar from '@mui/material/Avatar';\r\nimport Stack from '@mui/material/Stack';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst AgentAvatar = ({ fullName, showFullName }) => (\r\n showFullName ? (\r\n
\r\n {\r\n (header || panelToolbar)\r\n && (\r\n
\r\n );\r\n};\r\n\r\nPanel.propTypes = {\r\n header: PropTypes.oneOfType([PropTypes.string, PropTypes.shape(), PropTypes.func]),\r\n footer: PropTypes.oneOfType([PropTypes.string, PropTypes.shape(), PropTypes.func]),\r\n children: PropTypes.node,\r\n panelToolbar: PropTypes.node,\r\n customClass: PropTypes.string,\r\n customBodyClass: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n // leave commented in case its needed again\r\n // children: PropTypes.oneOfType([\r\n // PropTypes.arrayOf(PropTypes.node),\r\n // PropTypes.node,\r\n // ]).isRequired,\r\n};\r\n\r\nPanel.defaultProps = {\r\n children: null,\r\n header: '',\r\n footer: '',\r\n panelToolbar: null,\r\n customClass: '',\r\n customBodyClass: '',\r\n disabled: false,\r\n};\r\n\r\nexport default Panel;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory, useLocation } from 'react-router-dom';\r\nimport Swal from 'sweetalert2/src/sweetalert2';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport { selectAuditEntityId } from '@redux/selectors/AuditSelector';\r\nimport { getAuditLog } from '@redux/modules/audit';\r\nimport apiService from '@services/apiService';\r\n\r\nimport AuditTable from '@components/table/AuditTable';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\n\r\nconst AuditLogPage = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n const history = useHistory();\r\n const selectedListingId = useSelector(selectAuditEntityId);\r\n const urlSearchParams = new URLSearchParams(location.search);\r\n const listingIdParam = urlSearchParams.get('ListingID');\r\n const [listingId, setListingId] = useState(listingIdParam);\r\n const [filteredData, setFilteredData] = useState([]);\r\n const [canViewAuditLog, setCanViewAuditLog] = useState(false);\r\n\r\n const headers = [\r\n { key: 'TransactionID', label: 'Transaction ID' },\r\n { key: 'Transactiontype', label: 'Transaction Type' },\r\n { key: 'ClassName', label: 'Class Name' },\r\n { key: 'FieldName', label: 'Field Name' },\r\n { key: 'OldValue', label: 'Old Value' },\r\n { key: 'NewValue', label: 'New Value' },\r\n { key: 'RealUser', label: 'Real User' },\r\n { key: 'ImpersonatedUser', label: 'Impersonated User' },\r\n { key: 'ChangeTimeStamp', label: 'Change Timestamp' },\r\n ];\r\n\r\n const isNullOrEmpty = value => value === null || value === undefined || value === '';\r\n\r\n const handleFilteredData = data => {\r\n setFilteredData(data);\r\n };\r\n\r\n const handleExportAuditData = () => {\r\n const csvData = [\r\n headers.map(header => header.label),\r\n ...filteredData.map(logItem => headers.map(header => logItem[header.key])),\r\n ].map(row => row.join(',')).join('\\n');\r\n\r\n const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });\r\n const link = document.createElement('a');\r\n link.href = URL.createObjectURL(blob);\r\n link.download = `AuditLog for ${listingId} (${new Date().toLocaleString()}).csv`;\r\n link.click();\r\n };\r\n\r\n useEffect(async () => {\r\n if (isNullOrEmpty(listingIdParam)) return;\r\n // TODO: Think about moving this to a custom hook or possibly a HOC that is location aware\r\n // and will catch routing before page actually shows making the second timed Swal unnecessary\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Loading Listing Audit Log...',\r\n title: '',\r\n showConfirmButton: false,\r\n didOpen: async () => {\r\n const response = await apiService.Acl.GetAclDetails('listing', {\r\n action: 'view',\r\n uniqueId: 0,\r\n listingId: listingIdParam,\r\n });\r\n const canAudit = response.formActions.AUDITLOG;\r\n setCanViewAuditLog(canAudit);\r\n if (canAudit) {\r\n setListingId(listingIdParam);\r\n dispatch(getAuditLog({ tableName: 'Listing', uniqueID: 0, entityID: listingIdParam }));\r\n } else {\r\n Swal.close();\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Error -Unauthorized',\r\n text: 'Sorry, but you are not authorized to view this page.',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n });\r\n history.push('/');\r\n }\r\n },\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (isNullOrEmpty(selectedListingId) && isNullOrEmpty(listingIdParam)) return;\r\n if (selectedListingId !== listingIdParam && !isNullOrEmpty(selectedListingId)) {\r\n setListingId(selectedListingId);\r\n } else {\r\n setListingId(listingIdParam);\r\n }\r\n }, [selectedListingId, listingIdParam]);\r\n\r\n return (canViewAuditLog && (\r\n <>\r\n \r\n {!isEmpty(header) ? (\r\n <>\r\n
\r\n )\r\n }\r\n {children && (\r\n \r\n {header}\r\n
\r\n \r\n ) : null}\r\n {!isEmpty(panelToolbar) ?{panelToolbar}
: null}\r\n \r\n
\r\n )}\r\n {!isEmpty(footer) && footer !== null ? \r\n {children}\r\n
\r\n {footer}
: null}\r\n \r\n
\r\n \r\n \r\n Audit Log\r\n
\r\n\r\n
\r\n \r\n ));\r\n};\r\n\r\nexport default AuditLogPage;\r\n","/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport apiService from '@services/apiService';\r\nimport {\r\n CONDO_INSERT,\r\n CONDO_INSERT_FAIL,\r\n CONDO_INSERT_SUCCESS,\r\n CONDO_SEARCH,\r\n CONDO_SEARCH_FAIL,\r\n CONDO_SEARCH_SUCCESS,\r\n CONDO_SELECT,\r\n CONDO_SELECT_FAIL,\r\n CONDO_SELECT_SUCCESS,\r\n CONDO_UPDATE,\r\n CONDO_UPDATE_FAIL,\r\n CONDO_UPDATE_SUCCESS,\r\n} from '../constants/ActionTypes';\r\n\r\n// Condo names search by where clause (subdivision name and value)\r\nexport const searchCondo = searchCriteria => async dispatch => {\r\n dispatch({ type: CONDO_SEARCH });\r\n try {\r\n const condoSearchResults = await apiService.Condo.searchCondoName(searchCriteria);\r\n dispatch({\r\n type: CONDO_SEARCH_SUCCESS,\r\n payload: { condoSearchResults },\r\n });\r\n } catch (err) {\r\n console.error('Error: Condo searchCondo', err);\r\n dispatch({ type: CONDO_SEARCH_FAIL });\r\n }\r\n};\r\n\r\n// Select a condo name by UniqueID\r\n// NOTE: this behavior is not used in legacy app\r\nexport const selectCondo = UniqueID => async dispatch => {\r\n dispatch({ type: CONDO_SELECT });\r\n try {\r\n const condoSelected = await apiService.Condo.selectCondoName(UniqueID);\r\n dispatch({\r\n type: CONDO_SELECT_SUCCESS,\r\n payload: { condoSelected },\r\n });\r\n } catch (err) {\r\n console.error('Error: Condo selectCondo', err);\r\n dispatch({ type: CONDO_SELECT_FAIL });\r\n }\r\n};\r\n\r\n// Creates new condo name record and returns new condo name record\r\nexport const createCondo = newCondoRecord => async dispatch => {\r\n dispatch({ type: CONDO_INSERT });\r\n try {\r\n const condoCreated = await apiService.Condo.createCondoName(newCondoRecord); // returns UniqueID\r\n const newCondo = {\r\n UniqueID: condoCreated.UniqueID,\r\n CondoName: newCondoRecord.CondoData.CondoName,\r\n SubdivisionName: newCondoRecord.CondoData.SubdivisionName,\r\n };\r\n\r\n dispatch({\r\n type: CONDO_INSERT_SUCCESS,\r\n payload: { newCondo },\r\n });\r\n } catch (err) {\r\n console.error('Error: Condo createCondo', err);\r\n dispatch({ type: CONDO_INSERT_FAIL });\r\n }\r\n};\r\n\r\n// Edit/update the condo name of an existing condo record\r\nexport const updateCondo = condoRecord => async dispatch => {\r\n dispatch({ type: CONDO_UPDATE });\r\n try {\r\n const updatedCondo = await apiService.Condo.updateCondoName(condoRecord); // returns type SUCCESS or FAILURE (name already exists)\r\n dispatch({\r\n type: CONDO_UPDATE_SUCCESS,\r\n payload: { updateStatus: updatedCondo },\r\n });\r\n } catch (err) {\r\n console.error('Error: Condo updateCondo', err);\r\n dispatch({ type: CONDO_UPDATE_FAIL });\r\n }\r\n};\r\n","import { createSelector } from 'reselect';\r\nimport { listingDict, listingRuleDict } from '../constants/GeneralConstants';\r\n\r\nexport const getLoadingState = ({ formGeneration }) => formGeneration.isLoading;\r\n\r\nexport const selectPageStructure = ({ formGeneration }) => formGeneration.pageStructure;\r\n\r\nexport const selectVisiblePageStructure = createSelector(selectPageStructure, pageStructure => {\r\n pageStructure.forEach(page => {\r\n // solve for groups\r\n if (!page?.children?.find(child => child.isGroup)) {\r\n const pageVisible = page?.children?.find(child => child?.IsVisible);\r\n page.IsVisible = !!(pageVisible); // eslint-disable-line no-param-reassign\r\n }\r\n if (page?.children?.find(child => child.isGroup)) {\r\n const pageVisible = page?.children?.find(child => child?.fields?.find(field => field?.IsVisible));\r\n page.IsVisible = !!(pageVisible);// eslint-disable-line no-param-reassign\r\n }\r\n });\r\n return pageStructure;\r\n});\r\n\r\nexport const selectPageStructureHasRooms = createSelector(selectPageStructure, pageStructure => pageStructure?.find(section => section.sectionName === 'Rooms') !== undefined ?? false);\r\n\r\nexport const selectAllFields = ({ formGeneration }) => formGeneration.allFields;\r\n\r\nexport const selectStatusByName = ({ formGeneration }, name, repeatableType = '', repeatableId = '') => {\r\n if (repeatableType !== '' && repeatableId !== '') return formGeneration?.validationResult?.[repeatableType]?.[repeatableId]?.[name];\r\n return formGeneration?.validationResult?.[name];\r\n};\r\n\r\nexport const selectSectionAddClicksByName = ({ formGeneration }, name) => formGeneration?.sectionAddClicks?.[name] ?? 0;\r\n\r\nexport const selectRequiredStatusByFieldName = ({ formGeneration }, fieldName) => formGeneration.validationResult?.[fieldName]?.isRequired;\r\n\r\n// retrieves validation results\r\nexport const selectValidationResults = ({ formGeneration }) => formGeneration?.validationResult;\r\n\r\n// Consumes UID corresponding to a room. Returns the validation results for all fields in that room.\r\nexport const selectRoomStatusById = ({ formGeneration }, id) => formGeneration?.roomValidationResult?.[id];\r\n\r\nexport const selectComboValueDict = ({ formGeneration }) => formGeneration.comboSetValueDictionary;\r\n\r\nexport const selectAllComboBoxOptions = createSelector(\r\n ({ formGeneration }) => formGeneration.comboBoxOptions,\r\n ({ listing }) => listing.selectedListing,\r\n ({ formGeneration }) => formGeneration.isCopyOperation,\r\n (comboBoxOptions, selectedListing, isCopyOperation) => {\r\n if (!selectedListing?.listing || isCopyOperation) return comboBoxOptions;\r\n\r\n // When a listing has a disabled value we need to allow the option to show for the member to remove or keep.\r\n return comboBoxOptions.map(comboBoxOption => {\r\n if (selectedListing.listing[comboBoxOption.lookupFieldName]) {\r\n const selectedComboBoxValue = selectedListing.listing[comboBoxOption.lookupFieldName];\r\n const selectedComboBoxOption = comboBoxOption.data.find(option => option.Code === selectedComboBoxValue);\r\n if (selectedComboBoxOption) {\r\n // Ensure current option is enabled\r\n if (!selectedComboBoxOption.Active) {\r\n selectedComboBoxOption.Active = true;\r\n selectedComboBoxOption.Description += ' (disabled)';\r\n }\r\n }\r\n }\r\n return comboBoxOption;\r\n });\r\n },\r\n);\r\n\r\nexport const selectFormType = ({ formGeneration }) => formGeneration.formType;\r\n\r\nexport const selectFormDefinition = ({ formGeneration }) => formGeneration?.formDefinition;\r\n\r\nexport const selectFormDefinitionType = ({ formGeneration }) => formGeneration.definitionType;\r\n\r\nexport const selectListingCode = ({ formGeneration }) => formGeneration.listingType;\r\n\r\nexport const selectRoomValidationResult = ({ formGeneration }) => formGeneration.roomValidationResult;\r\n\r\nexport const selectFormDataStatus = ({ formGeneration }) => formGeneration.formDataStatus;\r\n\r\nexport const selectRoomValidationResults = createSelector(\r\n selectRoomValidationResult,\r\n roomValidationResult => {\r\n const dict = [];\r\n if (roomValidationResult) {\r\n Object.entries(roomValidationResult).map(([roomID]) => {\r\n Object.entries(roomValidationResult[roomID]).map(([key, value]) => {\r\n if (key && !value.isValid) {\r\n dict.push({ [`Rooms.[${roomID}].${value.id}`]: value.errorMessage });\r\n }\r\n return null;\r\n });\r\n return null;\r\n });\r\n }\r\n return dict;\r\n },\r\n);\r\n\r\nexport const selectOpenHouseValidationResults = createSelector(\r\n selectValidationResults,\r\n fullValidationResults => {\r\n const openHouseResults = fullValidationResults?.OpenHouse;\r\n if (!openHouseResults) return [];\r\n const dict = [];\r\n Object.entries(openHouseResults).map(([openHouseID]) => {\r\n Object.entries(openHouseResults[openHouseID]).map(([key, value]) => {\r\n if (key && !value.isValid) {\r\n dict.push({ [`OpenHouse ${value.id}`]: value.errorMessage });\r\n }\r\n return null;\r\n });\r\n return null;\r\n });\r\n return dict;\r\n },\r\n\r\n);\r\n\r\nexport const selectFieldLabelDictionary = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const dictionary = {};\r\n formDefinition.map(item => {\r\n dictionary[item?.fieldLabel] = item?.PageName;\r\n return null;\r\n });\r\n dictionary.Photos = 'Photos';\r\n dictionary.Rooms = 'Rooms';\r\n dictionary.Supplements = 'Supplements';\r\n return dictionary;\r\n },\r\n);\r\n\r\nexport const selectFieldDictionary = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const dictionary = {};\r\n formDefinition.map(item => {\r\n dictionary[item?.FieldName] = item?.PageName;\r\n return null;\r\n });\r\n dictionary.Photos = 'Photos';\r\n dictionary.Rooms = 'Rooms';\r\n dictionary.Supplements = 'Supplements';\r\n return dictionary;\r\n },\r\n);\r\n\r\nexport const getVisibleSections = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const visiblePageNames = formDefinition.map(field => {\r\n if (field?.IsVisible) return field.PageName;\r\n return null;\r\n }).filter(entry => entry);\r\n const visiblePageSet = [...new Set(visiblePageNames)];\r\n return visiblePageSet;\r\n // if all fields w/PageName are visible\r\n },\r\n);\r\n\r\n// sort definition first by pageSortOrder, secondly by field SortOrder\r\nexport const getSortedDefinition = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const sorted = formDefinition.sort((a, b) => {\r\n const x = (a.pageSortOrder - b.pageSortOrder);\r\n if (x === 0) {\r\n return (a.SortOrder - b.SortOrder);\r\n }\r\n return x;\r\n });\r\n return sorted;\r\n },\r\n);\r\n\r\n// consumes sorted form definition, returns (sorted) unique sections\r\nexport const getOrderedSections = createSelector(\r\n // input selector\r\n getSortedDefinition,\r\n // output selector\r\n sortedDef => {\r\n const flags = {};\r\n const unique = sortedDef.filter(item => {\r\n if (flags[item.PageName]) {\r\n return false;\r\n }\r\n if (!item.IsVisible) {\r\n return false;\r\n }\r\n flags[item.PageName] = true;\r\n return true;\r\n });\r\n return unique.map(item => ({ sectionName: item.PageName, sectionLabel: item.PageLabel }));\r\n },\r\n);\r\n\r\n// creates a dictionary mapping between section and fields\r\nexport const selectFormStructure = createSelector(\r\n // input selector\r\n getSortedDefinition,\r\n // output selector\r\n sortedDef => {\r\n const structure = {};\r\n sortedDef.map(item => {\r\n if (!structure[item.PageName]) {\r\n structure[item.PageName] = [];\r\n }\r\n structure[item.PageName] = [\r\n ...structure[item.PageName],\r\n { ...item },\r\n ];\r\n return null;\r\n });\r\n return structure;\r\n },\r\n);\r\n\r\n// Gets/sets the initial values for the create listings form\r\nexport const selectInitialValues = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const initialValues = {};\r\n formDefinition.forEach(field => {\r\n if (field.datatype === 'bit') {\r\n // set bit fields to null by default for validation\r\n initialValues[field.FieldName] = null;\r\n } else {\r\n initialValues[field.FieldName] = '';\r\n }\r\n return null;\r\n });\r\n return initialValues;\r\n },\r\n);\r\n\r\n// gets/sets initial touched values for validation on mount purposes\r\nexport const selectInitialTouched = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const initialTouched = {};\r\n\r\n formDefinition.forEach(field => { initialTouched[field.FieldName] = field.IsRequired; });\r\n return initialTouched;\r\n },\r\n);\r\n\r\n// Needs cases for other listing types\r\nexport const selectListingType = createSelector(\r\n selectListingCode,\r\n listingType => listingDict[listingType],\r\n);\r\n\r\nexport const selectListingRule = createSelector(\r\n selectListingCode,\r\n listingType => listingRuleDict[listingType],\r\n);\r\n\r\n// Retrieves first page name for the change form panel headers\r\nexport const selectEditPageName = createSelector(\r\n selectListingCode,\r\n selectPageStructure,\r\n (listingType, pageStructure) => {\r\n let pageName = '';\r\n const pageValues = Object.values(pageStructure);\r\n if (pageValues.length > 0 && listingType?.includes('chg')) {\r\n pageName = pageValues[0].sectionName;\r\n }\r\n return pageName;\r\n },\r\n);\r\n\r\n// Selects all field objects marked as required from the validationResult section of the data store.\r\nexport const selectRequired = createSelector(\r\n selectValidationResults,\r\n validationResult => {\r\n const required = [];\r\n Object.keys(validationResult).map(fieldName => {\r\n const {\r\n id,\r\n isRequired,\r\n isVisible,\r\n } = validationResult[fieldName];\r\n\r\n if (isRequired && isVisible) (required.push(id));\r\n return null;\r\n });\r\n return required;\r\n },\r\n);\r\n\r\nexport const selectLookupNames = createSelector(\r\n selectFormDefinition,\r\n formDefinition => {\r\n const lookupTableNames = {\r\n lookupNames: [],\r\n };\r\n\r\n formDefinition.map(field => {\r\n if (field.inputType === 'ComboBox' && field.comboBoxLookupName) {\r\n lookupTableNames.lookupNames.push(field.comboBoxLookupName);\r\n }\r\n return null;\r\n });\r\n return lookupTableNames;\r\n },\r\n);\r\n\r\n// Retrieves combo options for a condo lookup name\r\n// Using instead of selectComboBoxOptions since that selector is mainly for listings\r\nexport const selectCondoMgmtComboBoxOptions = createSelector(\r\n [\r\n selectAllComboBoxOptions,\r\n (_, lookupName) => lookupName,\r\n ],\r\n (allComboBoxOptions, lookupName) => {\r\n const comboBoxOptions = [];\r\n allComboBoxOptions.forEach(optionGroups => {\r\n if (lookupName === optionGroups.tableName) {\r\n optionGroups.data.forEach(option => { // add option object to list for specific field.\r\n if (option.Active && option.ParentIsActive) {\r\n comboBoxOptions.push({\r\n label: option.Description,\r\n value: `${option.Code ? option.Code : ''}`,\r\n parents: option.Parents,\r\n });\r\n }\r\n });\r\n }\r\n });\r\n return comboBoxOptions;\r\n },\r\n);\r\n\r\n// Gets all of the options for the given ComboBox Field\r\nexport const selectComboBoxOptions = createSelector(\r\n [\r\n selectFormDefinition,\r\n selectAllComboBoxOptions,\r\n (_, lookupName) => lookupName,\r\n (_, __, lookupRequired) => lookupRequired,\r\n ],\r\n (formDefinition, allComboBoxOptions, lookupName, lookupRequired = true) => {\r\n if (!lookupRequired) return null;\r\n\r\n // if this is using the boptions from formGeneration, then you need to be able to manipulate what's available in that array.\r\n // lookupName == field name\r\n\r\n const comboBoxOptions = [];\r\n let comboBoxLookupName;\r\n // wrapped in an if so that FIGs can be used for comboBox Population in Search Listing forms\r\n if (formDefinition !== []) {\r\n // Goes through the formDefinition to get the lookupTableName based on the fieldName\r\n formDefinition.forEach(field => {\r\n if (field.FieldName === lookupName) {\r\n comboBoxLookupName = field.comboBoxLookupName;\r\n }\r\n });\r\n\r\n // If there was a comboBoxLookupName, now loop through the comboBox options to get the relevant data\r\n if (comboBoxLookupName) {\r\n allComboBoxOptions.forEach(optionGroups => {\r\n if (comboBoxLookupName === optionGroups.tableName) { // matches the table name to the fieldName\r\n optionGroups.data.forEach(option => { // add option object to list for specific field.\r\n // can you just add a ParentActive? prop\r\n if (option.Active && option.ParentIsActive) {\r\n comboBoxOptions.push({ // returned boptions.\r\n label: option.Description,\r\n value: `${option.Code ? option.Code : ''}`,\r\n parents: option.Parents,\r\n });\r\n }\r\n });\r\n }\r\n });\r\n }\r\n }\r\n\r\n // Retrieves comboBoxOptions for dropdown that are not part of a listing form\r\n if (formDefinition.length === 0) {\r\n allComboBoxOptions.forEach(optionGroup => {\r\n if (lookupName === optionGroup.tableName) {\r\n optionGroup.data.forEach(option => { // add option object to list for specific field.\r\n if (option.Active) {\r\n comboBoxOptions.push({ // returned boptions.\r\n label: option.Description,\r\n value: `${option.Code ? option.Code : ''}`,\r\n parents: option.Parents,\r\n });\r\n }\r\n return null;\r\n });\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n return comboBoxOptions;\r\n },\r\n);\r\n\r\nexport const selectYNOptions = ({ formGeneration }, fieldname) => {\r\n const requiredOptions = [];\r\n let YNfield;\r\n\r\n // check that field retrieved matches the fieldname passed in and check if its a YN field\r\n formGeneration.formDefinition.map(field => {\r\n if (field.FieldName === fieldname) {\r\n if (field.datatype === 'bit') {\r\n YNfield = field.FieldName;\r\n }\r\n }\r\n return null;\r\n });\r\n\r\n /*\r\n YN field required : Yes/No/Empty\r\n YN field !required : Yes/No\r\n */\r\n if (YNfield) {\r\n formGeneration.formDefinition.map(field => {\r\n if (YNfield === field.FieldName) {\r\n requiredOptions.push(\r\n { label: 'Yes', value: 1 },\r\n { label: 'No', value: 0 },\r\n );\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n return requiredOptions;\r\n};\r\n\r\n// Receives array of sorted fields and retrieves the error messages to display in the same order\r\nexport const getSortedErrors = createSelector(\r\n selectFormStructure,\r\n selectValidationResults,\r\n selectRoomValidationResults,\r\n selectOpenHouseValidationResults,\r\n (structure, validationResult, roomValidationResult, openHouseValidationResult) => {\r\n const orderedErrors = [];\r\n if (validationResult !== null) {\r\n const orderedSections = Object.keys(structure);\r\n const valKeys = Object.keys(validationResult);\r\n if (valKeys.length > 0) {\r\n orderedSections.map(section => {\r\n const sectionResults = structure[section].sort((a, b) => a.SortOrder - b.SortOrder);\r\n sectionResults.map(field => {\r\n if (valKeys.includes(field.FieldName)) {\r\n const {\r\n isVisible, isValid, errorMessage,\r\n } = validationResult[field.FieldName];\r\n\r\n if (isVisible && !isValid && errorMessage) {\r\n orderedErrors.push({ [field.fieldLabel]: errorMessage });\r\n }\r\n }\r\n return null;\r\n });\r\n if (section === 'Photos' && valKeys.includes('Photos') && validationResult.Photos.errorMessage) {\r\n orderedErrors.push({ Photos: validationResult.Photos.errorMessage });\r\n }\r\n if (section === 'Supplements' && valKeys.includes('Supplements') && validationResult.Supplements.errorMessage) {\r\n orderedErrors.push({ Supplements: validationResult.Supplements.errorMessage });\r\n }\r\n if (section === 'Rooms' && valKeys.includes('RoomDimensions') && validationResult.RoomDimensions.errorMessage) {\r\n orderedErrors.push({ 'Room Dimensions': validationResult.RoomDimensions.errorMessage });\r\n }\r\n if (section === 'Rooms' && valKeys.includes('RoomTypeMinimumRequirements') && validationResult.RoomTypeMinimumRequirements.errorMessage) {\r\n orderedErrors.push({ 'Room Type Minimum Requirements': validationResult.RoomTypeMinimumRequirements.errorMessage });\r\n }\r\n if (section === 'Rooms' && roomValidationResult) {\r\n orderedErrors.push(...roomValidationResult);\r\n }\r\n if (section === 'OpenHouses' && openHouseValidationResult) orderedErrors.push(...openHouseValidationResult);\r\n return null;\r\n });\r\n }\r\n }\r\n return orderedErrors;\r\n },\r\n);\r\n\r\nexport const getSortedErrorsOfInvisibleFields = createSelector(\r\n selectFormStructure,\r\n selectValidationResults,\r\n selectRoomValidationResults,\r\n (structure, validationResult, roomValidationResult) => {\r\n const orderedErrors = [];\r\n if (validationResult !== null) {\r\n const orderedSections = Object.keys(structure);\r\n const valKeys = Object.keys(validationResult);\r\n if (valKeys.length > 0) {\r\n orderedSections.map(section => {\r\n const sectionResults = structure[section].sort((a, b) => a.SortOrder - b.SortOrder);\r\n sectionResults.map(field => {\r\n if (valKeys.includes(field.FieldName)) {\r\n const {\r\n isVisible, isValid, errorMessage,\r\n } = validationResult[field.FieldName];\r\n\r\n if (!isVisible && !isValid && errorMessage) {\r\n orderedErrors.push({ [field.fieldLabel]: errorMessage });\r\n }\r\n }\r\n return null;\r\n });\r\n if (section === 'Photos' && valKeys.includes('Photos') && validationResult.Photos.errorMessage) {\r\n orderedErrors.push({ Photos: validationResult.Photos.errorMessage });\r\n }\r\n if (section === 'Supplements' && valKeys.includes('Supplements') && validationResult.Supplements.errorMessage) {\r\n orderedErrors.push({ Supplements: validationResult.Supplements.errorMessage });\r\n }\r\n if (section === 'Rooms' && valKeys.includes('RoomDimensions') && validationResult.RoomDimensions.errorMessage) {\r\n orderedErrors.push({ 'Room Dimensions': validationResult.RoomDimensions.errorMessage });\r\n }\r\n if (section === 'Rooms' && valKeys.includes('RoomTypeMinimumRequirements') && validationResult.RoomTypeMinimumRequirements.errorMessage) {\r\n orderedErrors.push({ 'Room Type Minimum Requirements': validationResult.RoomTypeMinimumRequirements.errorMessage });\r\n }\r\n if (section === 'Rooms' && roomValidationResult) {\r\n orderedErrors.push(...roomValidationResult);\r\n }\r\n return null;\r\n });\r\n }\r\n }\r\n return orderedErrors;\r\n },\r\n);\r\n\r\nexport const selectErrorsPerSection = createSelector(\r\n getSortedErrors,\r\n selectFieldLabelDictionary,\r\n selectRoomValidationResults,\r\n selectOpenHouseValidationResults,\r\n (errors, dictionary, roomValidationResult, openHouseResult) => {\r\n const errorsPerSection = {};\r\n errorsPerSection.Rooms = [];\r\n errorsPerSection.OpenHouses = [];\r\n errors.map(error => {\r\n const [fieldName] = Object.keys(error);\r\n const section = dictionary[fieldName];\r\n if (fieldName === 'Room Dimensions' || fieldName === 'Room Type Minimum Requirements') {\r\n errorsPerSection.Rooms = [...errorsPerSection.Rooms, fieldName];\r\n } else if (!errorsPerSection[section]) {\r\n errorsPerSection[section] = [fieldName];\r\n } else if (errorsPerSection[section] && !errorsPerSection[section].includes(fieldName)) {\r\n errorsPerSection[section] = [...errorsPerSection[section], fieldName];\r\n }\r\n return null;\r\n });\r\n if (roomValidationResult) {\r\n errorsPerSection.Rooms = [...errorsPerSection.Rooms, ...roomValidationResult];\r\n }\r\n if (!errorsPerSection.Rooms.length) {\r\n delete errorsPerSection.Rooms;\r\n }\r\n if (openHouseResult) {\r\n errorsPerSection.OpenHouses = [...errorsPerSection.OpenHouses, ...openHouseResult];\r\n }\r\n if (!errorsPerSection.OpenHouses.length) {\r\n delete errorsPerSection.OpenHouses;\r\n }\r\n return errorsPerSection;\r\n },\r\n);\r\n\r\nexport const selectRequiredPerSection = createSelector(\r\n selectRequired,\r\n selectFieldDictionary,\r\n (required, dictionary) => {\r\n const reqPerSection = {};\r\n required.map(req => {\r\n const section = dictionary[req];\r\n\r\n if (!reqPerSection[section]) (reqPerSection[section] = [req]);\r\n if (reqPerSection[section] && !reqPerSection[section].includes(req)) {\r\n reqPerSection[section] = [...reqPerSection[section], req];\r\n }\r\n return null;\r\n });\r\n return reqPerSection;\r\n },\r\n);\r\n\r\nexport const getFieldNameAndLabels = createSelector(\r\n selectFormDefinition,\r\n formDefinition => (\r\n formDefinition?.flatMap(singleField => (\r\n [{\r\n fieldName: singleField?.FieldName,\r\n fieldLabel: singleField?.fieldLabel,\r\n }]\r\n ))\r\n ),\r\n);\r\n\r\nexport const getVisibleFieldNameAndLabels = createSelector(\r\n selectFormDefinition,\r\n formDefinition => (\r\n formDefinition?.flatMap(singleField => (\r\n (singleField?.IsVisible || singleField?.isVisible)\r\n ? [{\r\n fieldName: singleField?.FieldName,\r\n fieldLabel: singleField?.fieldLabel,\r\n }] : []\r\n ))\r\n ),\r\n);\r\n\r\nexport const transformComboBoxData = createSelector(\r\n selectAllComboBoxOptions,\r\n allComboBoxOptions => {\r\n const formattedComboBoxOptions = allComboBoxOptions.flatMap(tableOptions => {\r\n const comboData = tableOptions.data.flatMap(singleOption => {\r\n if (!singleOption.Active) return [];\r\n\r\n return [{\r\n label: singleOption.Description,\r\n value: singleOption.Description,\r\n formValue: tableOptions.lookupFieldName,\r\n }];\r\n });\r\n if (!comboData.length) return [];\r\n\r\n return [{\r\n label: tableOptions.lookupFieldName,\r\n options: comboData,\r\n }];\r\n });\r\n\r\n return formattedComboBoxOptions;\r\n },\r\n);\r\n\r\nconst transformFieldOptions = createSelector(\r\n getVisibleFieldNameAndLabels,\r\n fields => {\r\n const fieldOptions = fields.flatMap(fieldData => (\r\n [{\r\n label: fieldData.fieldLabel,\r\n value: fieldData.fieldName,\r\n formValue: fieldData.fieldName,\r\n }]\r\n ));\r\n return {\r\n label: 'Fields',\r\n options: fieldOptions,\r\n };\r\n },\r\n);\r\n\r\nexport const selectFormSearchOptions = createSelector(\r\n transformComboBoxData,\r\n transformFieldOptions,\r\n (comboBoxOptionsGroup, fieldOptions) => {\r\n const groupedOptions = [];\r\n groupedOptions.push(fieldOptions);\r\n /*\r\n Currently, adding the comboBoxOptionsGroup to the options for the form search\r\n causes lag. The Select in FormSearchBar will need to be refactored to be async,\r\n and after talking with Aaron it was decided that we will leave comboBoxOptions\r\n out for now and will come back to it for v2\r\n */\r\n // groupedOptions = groupedOptions.concat(comboBoxOptionsGroup);\r\n\r\n return groupedOptions;\r\n },\r\n);\r\n","import React, { useState, useMemo } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport Select from 'react-select';\r\nimport { selectCondoMgmtComboBoxOptions } from '@redux/selectors/FormSelector';\r\n\r\nconst CondoManagementForm = ({ setSubdivisionSelected }) => {\r\n const [county, setCounty] = useState(null);\r\n const [city, setCity] = useState(null);\r\n const [subdivision, setSubdivision] = useState(null);\r\n\r\n const comboIsLoading = useSelector(state => state.formGeneration.comboIsLoading); // combo loading status\r\n const countyComboValues = useSelector(state => selectCondoMgmtComboBoxOptions(state, 'Lookup_Property_Listing_CountyOrParish'));\r\n const cityComboValues = useSelector(state => selectCondoMgmtComboBoxOptions(state, 'Lookup_Property_Listing_City'));\r\n const subdivisionComboValues = useSelector(state => selectCondoMgmtComboBoxOptions(state, 'Lookup_Property_Listing_SubdivisionName'));\r\n\r\n const handleCountyChange = value => setCounty(value);\r\n const handleCityChange = value => setCity(value);\r\n\r\n const handleSubdivChange = value => {\r\n setSubdivision(value);\r\n setSubdivisionSelected(value);\r\n };\r\n\r\n // Determine the options to display for city based on parent childing rules from County\r\n const cityOptions = useMemo(() => {\r\n if (county) {\r\n // parents is ALWAYS a one-level array since it's already filtered to the city-level;\r\n return cityComboValues.filter(cityValue => cityValue?.parents?.[0]?.ParentCodes?.[0] === county.value);\r\n }\r\n return [];\r\n }, [county]);\r\n\r\n // Determines the options to display for subdivisions based on parent childing rules from City\r\n const subdivOptions = useMemo(() => {\r\n if (city) {\r\n // parents is ALWAYS a one-level array since it's already filtered to the subdivision-level;\r\n return subdivisionComboValues.filter(subdiv => subdiv?.parents?.[0]?.ParentCodes?.[0] === city.value);\r\n }\r\n return [];\r\n }, [city]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n Export CSV\r\n \r\n \r\n )}\r\n >\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nCondoManagementForm.propTypes = {\r\n setSubdivisionSelected: PropTypes.func,\r\n};\r\n\r\nexport default CondoManagementForm;\r\n","/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport { loadComboBoxOptions } from '@redux/modules/formGeneration';\r\nimport { createCondo, searchCondo, updateCondo } from '@redux/actionCreators/CondoCreator';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport CondoForm from '@components/form/forms/CondoManagementForm';\r\n\r\nconst submitTranslation = {\r\n Lookup_Property_Listing_CountyOrParish: 'CountyOrParish',\r\n Lookup_Property_Listing_City: 'City',\r\n Lookup_Property_Listing_SubdivisionName: 'SubdivisionName',\r\n};\r\nconst lookupNames = { lookupNames: Object.keys(submitTranslation) };\r\n\r\n// NOTE: Not all subdivisions will return a list -> will display no subdivisions message\r\n// NOTE: Add Condo Name button disabled until a subdivision search has been performed\r\n\r\nconst CondoManagementPage = () => {\r\n const dispatch = useDispatch();\r\n\r\n const [editCondoName, setEditCondoName] = useState(''); // holds condo name to edit/update\r\n const [currCondo, setCurrCondo] = useState({}); // holds current condo record to edit\r\n const [newCondoName, setNewCondoName] = useState(''); // holds new condo name to create/insert\r\n const [subdivisionSelected, setSubdivisionSelected] = useState({}); // holds subdivision name from results list to create new condo record\r\n const [isEditable, setIsEditable] = useState(false); // flag to determine whether to display the condo name in a or for edit\r\n\r\n const condoSearchResults = useSelector(state => state.condo.condoSearchResults); // array of condo record objects\r\n const isSearching = useSelector(state => state.condo.isSearching);\r\n\r\n // API call to get combo box values on first render\r\n useEffect(() => {\r\n dispatch(loadComboBoxOptions(lookupNames));\r\n }, []);\r\n\r\n // submits search criteria to retrieve condo records\r\n const handleSubmit = event => {\r\n event.preventDefault();\r\n if (subdivisionSelected?.value) {\r\n const jsonBody = {\r\n whereClause: {\r\n clause: [{\r\n name: 'SubdivisionName',\r\n value: subdivisionSelected.value,\r\n }],\r\n },\r\n };\r\n dispatch(searchCondo(jsonBody));\r\n setIsEditable(false);\r\n }\r\n };\r\n\r\n // sets editable state to true and saves input as currCondo\r\n const handleEdit = condoItem => {\r\n setIsEditable(true);\r\n setCurrCondo(condoItem);\r\n };\r\n\r\n // stores input value to local state editCondoName\r\n const updateCondoName = e => {\r\n setEditCondoName(e.target.value);\r\n };\r\n\r\n // extract updated condo name values to submit to API / redux\r\n const buildUpdateWhereClause = values => {\r\n const whereClause = {\r\n clause: [],\r\n };\r\n const valueKeys = Object.keys(values);\r\n valueKeys.forEach(key => {\r\n if (values[key] && key === 'UniqueID') {\r\n whereClause.clause.push({\r\n name: 'UniqueID',\r\n value: values[key],\r\n });\r\n }\r\n });\r\n return whereClause;\r\n };\r\n\r\n // handles the condo name update and re rendering of updated results list (with small delay in re render)\r\n const handleSaveEdit = () => {\r\n setIsEditable(false);\r\n // currCondo is the original condo name record, where as editCondoName only holds the input string to update the condo name\r\n if (currCondo && editCondoName) {\r\n const updateClause = buildUpdateWhereClause(currCondo);\r\n const jsonBody = {\r\n whereClause: updateClause,\r\n CondoData: {\r\n CondoName: editCondoName, // holds new condo name value\r\n SubdivisionName: currCondo.SubdivisionName,\r\n },\r\n };\r\n dispatch(updateCondo(jsonBody));\r\n\r\n const searchClause = {\r\n clause: [{\r\n name: 'SubdivisionName',\r\n value: currCondo.SubdivisionName,\r\n }],\r\n };\r\n const updatedJsonBody = {\r\n whereClause: searchClause,\r\n };\r\n dispatch(searchCondo(updatedJsonBody)); // re render result list with edited condo name\r\n setEditCondoName(''); // clear edit name\r\n }\r\n };\r\n\r\n // reset editable state\r\n const handleCancelEdit = () => {\r\n setEditCondoName(''); // clear edit name\r\n setIsEditable(false);\r\n };\r\n\r\n // Captures the input's value and saves it to local state as newCondoName\r\n const handleInput = e => setNewCondoName(e.target.value);\r\n\r\n // Creates new subdivision and adds new record to results list for display\r\n const submitNewCondoName = e => {\r\n e.preventDefault();\r\n if ((condoSearchResults ?? [])) {\r\n if (newCondoName !== '' && subdivisionSelected !== '') {\r\n const newCondoRecord = {\r\n CondoData: {\r\n CondoName: newCondoName,\r\n SubdivisionName: subdivisionSelected.value,\r\n },\r\n };\r\n dispatch(createCondo(newCondoRecord));\r\n }\r\n }\r\n };\r\n\r\n // NOTE: Left as is for now as per Riz/Bill's instruction since delete might be added later\r\n const handleDelete = () => null;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n Condo Management\r\n
\r\n\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CondoManagementPage;\r\n","import React, { useMemo } from 'react';\r\nimport Select, { components } from 'react-select';\r\nimport { useSelector } from 'react-redux';\r\nimport { selectFormSearchOptions } from '@redux/selectors/FormSelector';\r\n\r\nconst formatGroupLabel = () => (\r\n \r\n);\r\n\r\nconst DropdownIndicator = props => (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n <>\r\n \r\n New Condo Name\r\n \r\n \r\n \r\n \r\n
\r\n \r\n - \r\n {condoSearchResults\r\n && condoSearchResults.sort((a, b) => a.CondoName.localeCompare(b.CondoName)).map(item => (\r\n
- \r\n {`${item.CondoName}`}\r\n \r\n \r\n \r\n\r\n \r\n )}\r\n
\r\n {(isEditable && (currCondo.CondoName === item.CondoName))\r\n ? (\r\n
\r\n ))}\r\n \r\n \r\n
\r\n )\r\n : (\r\n \r\n \r\n \r\n
\r\n No condo names found
}\r\n \r\n ({ ...css, padding: 0 }), clearIndicator: css => ({ ...css, padding: 0 }) }}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default FormSearchBar;\r\n","import React from 'react';\r\n\r\nimport Skeleton from '@mui/material/Skeleton';\r\n\r\nconst FormLoader = () => (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n);\r\n\r\nexport default FormLoader;\r\n","/* eslint-disable no-unused-vars */\r\n/* eslint-disable react/prop-types */\r\n/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport { useEffect } from 'react';\r\nimport { useFormikContext } from 'formik';\r\nimport { useDispatch } from 'react-redux';\r\nimport { setValidationResult } from '@redux/modules/formGeneration';\r\n\r\nconst FieldValidator = ({\r\n validationRules,\r\n validateFieldName,\r\n validateFlag,\r\n validationValue,\r\n selectedListing,\r\n setValidateFlag,\r\n setValidationValue,\r\n setValidateFieldName,\r\n runValidation = () => null,\r\n}) => {\r\n const dispatch = useDispatch();\r\n const { values } = useFormikContext();\r\n\r\n // photosHaveChanged, supplementsHaveChanged, roomsHaveChanged, listing, unmodifiedListing, photos, supplements, rooms\r\n\r\n const getRepeatableChanged = (formikGroup, unmodifiedGroup) => {\r\n /* does origin have this item?\r\n does any prop of this item not match origin?\r\n */\r\n let hasChanged = false;\r\n if (formikGroup.length !== unmodifiedGroup.length) return true;\r\n formikGroup.forEach(item => {\r\n if (hasChanged) return;\r\n if (item.UniqueID) {\r\n // room/door/parcel, openhouse?\r\n const umItem = unmodifiedGroup.find(umi => umi.UniqueID === item.UniqueID);\r\n Object.keys(item).forEach(itemkey => {\r\n if (hasChanged) return;\r\n if (umItem?.[itemkey]) {\r\n if (umItem[itemkey] !== item[itemkey]) hasChanged = true;\r\n }\r\n });\r\n // see that every key's value in formikElement matches umEl\r\n } else if (item.URL) {\r\n // photo or supp\r\n const umItem = unmodifiedGroup.find(umi => umi.URL === item.URL);\r\n Object.keys(item).forEach(itemkey => {\r\n if (hasChanged) return;\r\n if (umItem?.[itemkey]) {\r\n if (umItem[itemkey] !== item[itemkey]) hasChanged = true;\r\n }\r\n });\r\n } else {\r\n // item has neither url or uniqueId;\r\n hasChanged = true;\r\n }\r\n });\r\n return hasChanged;\r\n };\r\n\r\n const getChanged = (unModGroup, photosGroup, roomsGroup, supplementsGroup, openHousesGroup) => {\r\n let photosHaveChanged = false;\r\n let supplementsHaveChanged = false;\r\n let roomsHaveChanged = false;\r\n let openHousesHaveChanged = false;\r\n\r\n photosHaveChanged = getRepeatableChanged(photosGroup, unModGroup.umPhotos);\r\n supplementsHaveChanged = getRepeatableChanged(supplementsGroup, unModGroup.umSupplements);\r\n roomsHaveChanged = getRepeatableChanged(roomsGroup, unModGroup.umRooms);\r\n openHousesHaveChanged = getRepeatableChanged(openHousesGroup, unModGroup.umOpenHouses);\r\n\r\n photosHaveChanged = photosHaveChanged ? 1 : 0;\r\n supplementsHaveChanged = supplementsHaveChanged ? 1 : 0;\r\n roomsHaveChanged = roomsHaveChanged ? 1 : 0;\r\n openHousesHaveChanged = openHousesHaveChanged ? 1 : 0;\r\n\r\n return [photosHaveChanged, supplementsHaveChanged, roomsHaveChanged, openHousesHaveChanged];\r\n };\r\n\r\n useEffect(() => {\r\n if (validateFlag === true) {\r\n values[validateFieldName] = validationValue;\r\n\r\n try {\r\n if (validationRules.descriptions.logics.includes(`${validateFieldName}Rules`)) { // possessionData, NumofElevators rules do not exist, it will throw an error\r\n let res;\r\n const {\r\n Photos, Rooms, Supplements, OpenHouses, ...resourceData\r\n } = values;\r\n\r\n if ((validationRules.descriptions.logicName === 'AgentRules') || (validationRules.descriptions.logicName === 'OfficeRules')) {\r\n res = validationRules.runWithParameters({ name: `${validateFieldName}Rules` }, resourceData);\r\n } else {\r\n const unmodifiedListing = selectedListing ? selectedListing.listing : {};\r\n const unModGroup = {\r\n umPhotos: selectedListing?.photos ?? [],\r\n umRooms: selectedListing?.rooms ?? [],\r\n umSupplements: selectedListing?.supplements ?? [],\r\n umOpenHouses: selectedListing?.openHouses ?? [],\r\n umParcels: selectedListing?.parcels ?? [],\r\n umDoors: selectedListing?.doors ?? [],\r\n };\r\n const photosGroup = Photos\r\n ? Object.keys(Photos).map(key => (!Photos[key].IsDeleted) && Photos[key])\r\n : [];\r\n const roomsGroup = Rooms\r\n ? Object.keys(Rooms).map(key => (!Rooms[key].IsDeleted) && Rooms[key])\r\n : [];\r\n const supplementsGroup = Supplements\r\n ? Object.keys(Supplements).map(key => (!Supplements[key].IsDeleted) && Supplements[key])\r\n : [];\r\n const openHousesGroup = OpenHouses\r\n ? Object.keys(OpenHouses).map(key => (!OpenHouses[key].IsDeleted) && OpenHouses[key])\r\n : [];\r\n\r\n const [photosHaveChanged, supplementsHaveChanged, roomsHaveChanged, openHousesHaveChanged] = getChanged(unModGroup, photosGroup, roomsGroup, supplementsGroup, openHousesGroup);\r\n\r\n res = validationRules.runWithParameters({ name: `${validateFieldName}Rules` }, photosHaveChanged, supplementsHaveChanged, roomsHaveChanged, openHousesHaveChanged, resourceData, unmodifiedListing, photosGroup, supplementsGroup, roomsGroup);\r\n }\r\n\r\n const { fieldValidationResult } = res.context.variableContainer;\r\n dispatch(setValidationResult(fieldValidationResult));\r\n }\r\n } catch (er) {\r\n console.error('Error: FieldValidator getChanged', er);\r\n }\r\n\r\n setValidateFlag(false); // clear state\r\n setValidateFieldName('');\r\n setValidationValue('');\r\n runValidation();\r\n }\r\n }, [validateFlag]);\r\n\r\n return null;\r\n};\r\n\r\nexport default FieldValidator;\r\n","import { createSelector } from 'reselect';\r\n\r\nexport const selectFormGeneration = createSelector(({ formGeneration }) => formGeneration, result => result);\r\n\r\nexport const selectOperationType = createSelector(({ formGeneration }) => formGeneration.operationType, result => result);\r\n\r\nexport const selectDefinitionType = createSelector(({ formGeneration }) => formGeneration.definitionType, result => result);\r\n\r\nexport const selectListingType = createSelector(({ formGeneration }) => formGeneration.listingType, result => result);\r\n\r\nexport const selectDefaultValues = createSelector(({ formGeneration }) => formGeneration.defaultValues, result => result);\r\n\r\nexport const selectListingSelected = createSelector(({ listing }) => listing.selectedListing, result => result);\r\n\r\nexport const selectAgentSelected = createSelector(({ agent }) => agent.agentSelected, result => result);\r\n\r\nexport const selectOfficeSelected = createSelector(({ office }) => office.currentOffice, result => result);\r\n\r\n/*\r\n Select Listings's form data taking default values into account:\r\n * on Create : pre-populate the field with the default value;\r\n * on Full Edit : Listing data takes priority over default values, even if Listing has null data for the field;\r\n * on Task Edits (chgMajor, chgSold etc) : non-null fields in listing data override defaults, but default values override null properties in listing data.\r\n*/\r\nexport const selectListingFormData = createSelector(\r\n selectOperationType,\r\n selectDefinitionType,\r\n selectListingType,\r\n selectDefaultValues,\r\n selectListingSelected,\r\n (operationType, definitionType, listingType, defaultValues, selectedListing) => {\r\n if (definitionType !== 'listings') return null;\r\n if (operationType === 'edit' && !selectedListing) return null;\r\n\r\n const formData = selectedListing?.listing ?? defaultValues;\r\n const taskTypes = ['chgTerm', 'chgSold', 'chgDetails', 'chgMajor', 'chgDel', 'chgPending', 'chgLeased', 'chgPropType', 'chgWithdrawn', 'chgActive', 'chgExp'];\r\n const isTaskEdit = taskTypes.includes(listingType);\r\n if (isTaskEdit) {\r\n // Update empty values with default values.\r\n Object.entries(formData).map(([key, value]) => {\r\n if (value == null && (key in defaultValues)) {\r\n formData[key] = defaultValues[key];\r\n }\r\n return null;\r\n });\r\n // Add missing defaulted fields (TBD if this is required).\r\n Object.entries(defaultValues).map(([key, defaultValue]) => {\r\n if (!(key in formData)) {\r\n formData[key] = defaultValue;\r\n }\r\n return null;\r\n });\r\n }\r\n return formData;\r\n },\r\n);\r\n\r\n/*\r\n Select Agent's form data taking default values into account:\r\n * on Create : pre-populate the field with the default value;\r\n * on Edit : Agent data takes priority over default values, even if Agent has null data for the field.\r\n*/\r\nexport const selectAgentFormData = createSelector(\r\n selectOperationType,\r\n selectDefinitionType,\r\n selectDefaultValues,\r\n selectAgentSelected,\r\n (operationType, definitionType, defaultValues, selectedAgent) => {\r\n if (definitionType !== 'agent') return null;\r\n if (operationType === 'edit' && !selectedAgent) return null;\r\n\r\n const formData = selectedAgent ?? defaultValues;\r\n return formData;\r\n },\r\n);\r\n\r\n/*\r\n Select Office's form data taking default values into account:\r\n * on Create : pre-populate the field with the default value;\r\n * on Edit : Office data takes priority over default values, even if Office has null data for the field.\r\n*/\r\nexport const selectOfficeFormData = createSelector(\r\n selectOperationType,\r\n selectDefinitionType,\r\n selectDefaultValues,\r\n selectOfficeSelected,\r\n (operationType, definitionType, defaultValues, selectedOffice) => {\r\n if (definitionType !== 'office') return null;\r\n if (operationType === 'edit' && !selectedOffice) return null;\r\n\r\n const formData = selectedOffice ?? defaultValues;\r\n return formData;\r\n },\r\n);\r\n","/* eslint-disable react/prop-types */\r\nimport { useEffect } from 'react';\r\nimport { useFormikContext } from 'formik';\r\nimport { useSelector } from 'react-redux';\r\nimport { selectAllComboBoxOptions } from '@redux/selectors/FormSelector';\r\n\r\nconst ComboEnforcer = props => {\r\n const parentFields = [\r\n 'City',\r\n 'CountyOrParish',\r\n 'PropertySubType',\r\n 'SubdivisionName',\r\n ];\r\n\r\n const {\r\n valueBubble, opt, FieldName,\r\n } = props;\r\n\r\n const allComboBoxOptions = useSelector(selectAllComboBoxOptions); // used to gather target children when parent changes\r\n\r\n const { values } = useFormikContext(); // used to check the set displayed values\r\n\r\n useEffect(() => {\r\n if (opt) { // enforcer is running.\r\n // a governing field has changed, select the options that need to be checked.\r\n if (parentFields.includes(FieldName)) { // a governor has changed\r\n const targetComboOptions = allComboBoxOptions.map(aCBO => {\r\n const found = aCBO.data.map(singleOption => {\r\n let isTargetOption = false;\r\n let target = null;\r\n if ('Parents' in singleOption) {\r\n singleOption.Parents.map(parent => {\r\n if (parent.ParentField === FieldName) {\r\n isTargetOption = true;\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n if (isTargetOption === true) {\r\n target = singleOption;\r\n } return target;\r\n });\r\n\r\n return { lookupFieldName: aCBO.lookupFieldName, found };\r\n });\r\n\r\n // filter the target options out of the dirty array\r\n const filteredTargets = [];\r\n\r\n if (targetComboOptions.length > 0) {\r\n targetComboOptions.map(tgt => {\r\n const filteredOptions = tgt.found.filter(fOpt => fOpt !== null);\r\n if (filteredOptions.length > 0) filteredTargets.push({ lookupFieldName: tgt.lookupFieldName, filteredOptions });\r\n return null;\r\n });\r\n }\r\n\r\n // manipulate targeted data. => clear out any values that have been set.\r\n if (filteredTargets.length > 0) { // ensure that there's anything to check\r\n filteredTargets.map(tgtOpt => {\r\n const childOpt = values[tgtOpt.lookupFieldName];\r\n if (childOpt) {\r\n const foundChild = tgtOpt.filteredOptions.find(tData => tData.Code === childOpt);\r\n if (foundChild) {\r\n const targetParent = foundChild.Parents.find(parent => parent.ParentField === FieldName);\r\n if (!targetParent.ParentCodes.includes(opt.value)) {\r\n valueBubble({ fieldName: tgtOpt.lookupFieldName, newValue: '' });\r\n }\r\n }\r\n }\r\n return null;\r\n });\r\n }\r\n\r\n // Manipulate the available options.\r\n const parentValue = values[FieldName];\r\n\r\n filteredTargets.map(fTarg => {\r\n fTarg.filteredOptions.map(fOpt => {\r\n let hasParent;\r\n\r\n fOpt.Parents.map(ftPar => {\r\n if (ftPar.ParentField === FieldName) {\r\n if (ftPar.ParentCodes.find(pc => pc === parentValue)) {\r\n hasParent = true;\r\n }\r\n }\r\n\r\n const mOpt = fOpt;\r\n mOpt.ParentIsActive = hasParent;\r\n return null;\r\n });\r\n return null;\r\n });\r\n return null;\r\n });\r\n }\r\n }\r\n }, [opt]);\r\n return null;\r\n};\r\n\r\nexport default ComboEnforcer;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport { useField } from 'formik';\r\nimport NumberFormat from 'react-number-format';\r\nimport Select from 'react-select';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nimport TextareaAutosize from 'react-textarea-autosize';\r\nimport { setComboSetValueDictionary } from '@redux/modules/formGeneration';\r\n\r\nimport {\r\n selectStatusByName,\r\n selectLookupNames,\r\n selectAllComboBoxOptions,\r\n selectComboBoxOptions,\r\n selectYNOptions, // determines options to show for YN values depending on isRequired\r\n selectRequiredStatusByFieldName, // retrieves required field objects from the validationResults\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport {\r\n selectListingFormData,\r\n selectAgentFormData,\r\n selectOfficeFormData,\r\n} from '@redux/selectors/FormDataSelector';\r\n\r\nimport ComboEnforcer from '@components/form/formHelpers/ParentChildEnforcer';\r\nimport { endsWith } from 'lodash';\r\n\r\n/*\r\nComboBox Attributes\r\n- multiselect\r\n- dataType: string\r\n- inputType: ComboBox\r\n- fieldWidth\r\n- fieldLabel\r\n- isRequired\r\n- showHelpIcon\r\n- helpText\r\n- comboBoxValue\r\n- comboBoxLabel\r\n- comboBoxParentFieldName\r\n- comboBoxParentLinkAttribute\r\n- comboBoxChildLinkAttribute\r\n\r\nTextInput/MaskedTextInput Attributes\r\n- dataType: string, integer, numeric, date, datetime, time\r\n- inputType: TextInput / MaskedTextInput\r\n- fieldWidth\r\n- fieldHeight (multi row)\r\n- fieldLabel\r\n- isRequired\r\n- showHelpIcon\r\n- helpText\r\n- isHidden\r\n- sortOrder\r\n*/\r\n\r\nconst FormikInputGroup = ({\r\n comboClear, // reset flag for combos\r\n setComboClear, // set reset flag for combos\r\n datatype, // = 'string',\r\n // disabled = false, // Removed in favor of IsDisabled flag\r\n fieldLabel,\r\n FieldName,\r\n helpText,\r\n inputType, // = 'TextInput',\r\n IsVisible,\r\n IsDisabled,\r\n multiselect = false,\r\n // PageName, // section name e.g. Remarks, General, etc\r\n Precision,\r\n maxLength,\r\n showHelpIcon = false,\r\n validateFigField,\r\n comboBubbleWrap = {\r\n AddComboMutator: () => { },\r\n setNewComboValue: () => { },\r\n setNewComboOptions: () => { },\r\n },\r\n}) => {\r\n const dispatch = useDispatch();\r\n\r\n const [field, meta, helpers] = useField(FieldName);\r\n const [localFieldValue, setLocalFieldValue] = useState(field?.value);\r\n const [checkOpt, setCheckOpt] = useState('');\r\n const [comboValue, setComboValue] = useState('');\r\n const [characterCount, setCharacterCount] = useState(0);\r\n\r\n const listingFormData = useSelector(selectListingFormData);\r\n const agentFormData = useSelector(selectAgentFormData);\r\n const officeFormData = useSelector(selectOfficeFormData);\r\n const lookUpNames = useSelector(selectLookupNames);\r\n const allComboBoxOptions = useSelector(selectAllComboBoxOptions);\r\n const comboBoxOptions = useSelector(state => selectComboBoxOptions(state, FieldName, inputType === 'ComboBox'));\r\n const comboIsLoading = useSelector(state => state.formGeneration.comboIsLoading); // combo loading status\r\n const requiredFields = useSelector(state => selectRequiredStatusByFieldName(state, FieldName)); // returns isRequired prop per fieldname in the form\r\n const staticOptions = useSelector(state => selectYNOptions(state, FieldName));\r\n const status = useSelector(state => selectStatusByName(state, FieldName));\r\n const fieldIsVisible = IsVisible;\r\n const fieldIsDisabled = IsDisabled ?? false;\r\n const controlRef = useRef(null);\r\n\r\n // string array for combo placeholder to force display of TAP values in form\r\n const validationBubble = fieldValue => {\r\n helpers.setTouched(true);\r\n validateFigField(FieldName, fieldValue);\r\n };\r\n\r\n const comboChange = opt => {\r\n let blurValue = '';\r\n if (opt) {\r\n if (multiselect) {\r\n blurValue = opt?.map(option => option.value).join(',') ?? '';\r\n } else if (datatype !== 'bit') {\r\n blurValue = opt.value ?? '';\r\n setCheckOpt(opt);\r\n } else {\r\n blurValue = opt.value ?? '';\r\n }\r\n }\r\n setComboValue(opt ?? '');\r\n if (field?.value === blurValue) return;\r\n helpers.setValue(blurValue);\r\n validationBubble(blurValue);\r\n };\r\n\r\n // Combo values can be updated externally via redux (see usage of setComboSetValueDictionary and comboSetValueDictionary).\r\n useEffect(() => {\r\n if (inputType === 'ComboBox') {\r\n comboChange(comboValue);\r\n }\r\n }, [comboValue]);\r\n\r\n // sets combo value to empty to remove any values displaying\r\n useEffect(() => {\r\n if (comboClear && inputType === 'ComboBox') {\r\n setComboValue('');\r\n setComboClear(false);\r\n }\r\n }, [comboClear]);\r\n\r\n useEffect(() => {\r\n if (inputType === 'ComboBox') {\r\n dispatch(setComboSetValueDictionary({ [FieldName]: setComboValue }));\r\n }\r\n }, []);\r\n\r\n /*\r\n This is still here to update the comboBox, date time and bit fields.\r\n Because they read their values from state, this will need to potentially\r\n be moved at another time.\r\n */\r\n const updateFIGValues = updatedData => {\r\n if (updatedData) {\r\n Object.entries(updatedData).map(([key, value]) => {\r\n if (field.name !== key) return null;\r\n\r\n switch (inputType) {\r\n case 'TextInput':\r\n if (datatype === 'bit') {\r\n let bitValue;\r\n if (value != null && value !== '') {\r\n if (typeof value === 'string') {\r\n bitValue = value === 'true' ? 1 : 0;\r\n } else if (typeof value === 'boolean') {\r\n bitValue = value === true ? 1 : 0;\r\n } else if (typeof value === 'number') {\r\n bitValue = value;\r\n }\r\n }\r\n if (bitValue != null) {\r\n const option = {\r\n label: bitValue ? 'Yes' : 'No',\r\n value: bitValue,\r\n };\r\n comboChange(option);\r\n }\r\n }\r\n break;\r\n\r\n case 'ComboBox':\r\n if (comboBoxOptions?.length) {\r\n const multiSelectedOptions = [];\r\n let singleSelectOption = null;\r\n comboBoxOptions.forEach(opt => {\r\n // checking that field names and combo options match popfield value to display\r\n if (value) {\r\n if (multiselect) {\r\n value.split(',').map(val => {\r\n if (val === opt.value) {\r\n multiSelectedOptions.push(opt);\r\n }\r\n return null;\r\n });\r\n }\r\n if (value === opt.value) {\r\n if (!multiselect) {\r\n singleSelectOption = opt;\r\n }\r\n }\r\n }\r\n });\r\n if (multiselect) {\r\n comboChange(multiSelectedOptions);\r\n }\r\n if (!multiselect) {\r\n comboChange(singleSelectOption);\r\n }\r\n }\r\n break;\r\n\r\n default: break;\r\n }\r\n return null;\r\n });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (listingFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFIGValues(listingFormData);\r\n }\r\n }, [listingFormData, allComboBoxOptions]);\r\n\r\n useEffect(() => {\r\n if (agentFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFIGValues(agentFormData);\r\n }\r\n }, [agentFormData, allComboBoxOptions]);\r\n\r\n useEffect(() => {\r\n if (officeFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFIGValues(officeFormData);\r\n }\r\n }, [officeFormData, allComboBoxOptions]);\r\n\r\n const sameValue = (oldValue, newValue) => {\r\n if (oldValue === newValue) return true;\r\n if (oldValue?.toString() === newValue?.toString()) return true;\r\n // if (!oldValue && !newValue) return true;\r\n return false;\r\n };\r\n\r\n const handleBlur = e => {\r\n let validationValue = e.target.value;\r\n const isNumber = datatype === 'numeric' || datatype === 'decimal' || datatype === 'integer';\r\n if (isNumber && typeof (validationValue) === 'string') {\r\n validationValue = validationValue.replace(/,/g, '');\r\n }\r\n if (sameValue(field?.value, validationValue)) return;\r\n helpers.setValue(validationValue);\r\n validationBubble(validationValue);\r\n };\r\n\r\n const handleChange = ({ target }) => {\r\n setLocalFieldValue(target.value);\r\n setCharacterCount(target.value.length);\r\n };\r\n\r\n const handleFocus = () => {\r\n controlRef.current.focus();\r\n };\r\n\r\n const handleKeyDown = e => {\r\n if (e.key === 'Enter') {\r\n e.target.blur();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (inputType !== 'TextInput') return;\r\n if (!(datatype === 'string' || datatype === 'integer' || datatype === 'decimal' || datatype === 'numeric')) return;\r\n if (field?.value == null || field.value === localFieldValue) return;\r\n setLocalFieldValue(field.value);\r\n }, [field?.value]);\r\n\r\n // display an asterisk beside the field label if a field is required\r\n const isRequiredSymbol = requiredFields ? * : '';\r\n\r\n const classNames = 'form-group';\r\n // if (!fieldIsVisible) classNames = 'd-none'; // this almost works, but isVisible is not being returned properly.\r\n if (!fieldIsVisible) return null;\r\n\r\n return (\r\n \r\n \r\n {fieldLabel}\r\n {isRequiredSymbol}\r\n \r\n {\r\n showHelpIcon && (\r\n {helpText}}\r\n >\r\n \r\n \r\n )\r\n }\r\n {\r\n inputType === 'TextInput' && (\r\n <>\r\n {\r\n (datatype === 'string' && maxLength < 200)\r\n && (\r\n <>\r\n ({\r\n ...styles,\r\n fontStyle: data?.label?.endsWith('(disabled)') ? 'italic !important' : styles.fontStyle,\r\n filter: data?.label?.endsWith('(disabled)') ? 'grayscale(90%) !important' : styles.filter,\r\n opacity: data?.label?.endsWith('(disabled)') ? '0.8 !important' : styles.opacity,\r\n }),\r\n singleValue: (styles, { data }) => ({\r\n ...styles,\r\n fontStyle: data?.label?.endsWith('(disabled)') ? 'italic !important' : styles.fontStyle,\r\n filter: data?.label?.endsWith('(disabled)') ? 'grayscale(90%) !important' : styles.filter,\r\n opacity: data?.label?.endsWith('(disabled)') ? '0.8 !important' : styles.opacity,\r\n }),\r\n multiValue: (styles, { data }) => ({\r\n ...styles,\r\n fontStyle: data?.label?.endsWith('(disabled)') ? 'italic !important' : styles.fontStyle,\r\n filter: data?.label?.endsWith('(disabled)') ? 'grayscale(90%) !important' : styles.filter,\r\n opacity: data?.label?.endsWith('(disabled)') ? '0.8 !important' : styles.opacity,\r\n }),\r\n menuPortal: styles => ({ ...styles, zIndex: 9999 }),\r\n }}\r\n />\r\n )\r\n }\r\n {\r\n meta && status && status.errorMessage ? (\r\n
\r\n );\r\n};\r\n\r\nFormikInputGroup.propTypes = {\r\n comboClear: PropTypes.bool,\r\n setComboClear: PropTypes.func,\r\n datatype: PropTypes.string,\r\n // disabled: PropTypes.bool,\r\n fieldLabel: PropTypes.string,\r\n FieldName: PropTypes.string,\r\n helpText: PropTypes.string,\r\n inputType: PropTypes.oneOf(['ComboBox', 'TextInput']),\r\n IsVisible: PropTypes.bool,\r\n IsDisabled: PropTypes.bool,\r\n multiselect: PropTypes.bool,\r\n // PageName: PropTypes.string,\r\n Precision: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n showHelpIcon: PropTypes.bool,\r\n validateFigField: PropTypes.func,\r\n comboBubbleWrap: PropTypes.shape({\r\n AddComboMutator: PropTypes.func,\r\n setNewComboValue: PropTypes.func,\r\n setNewComboOptions: PropTypes.func,\r\n }),\r\n};\r\n\r\nexport default FormikInputGroup;\r\n","import { createSelector } from 'reselect';\r\n\r\nexport const selectPhotoMetaCollection = createSelector(({ photo }) => photo.photoMetaCollection, result => result);\r\n\r\nexport const selectPhotosToUpload = createSelector(\r\n selectPhotoMetaCollection,\r\n photos => {\r\n if (!photos) return null;\r\n return photos.filter(p => !p.IsDeleted && !p.externalURL && !p.IsError);\r\n },\r\n);\r\n\r\nexport const selectPhotosToDisplay = createSelector(selectPhotoMetaCollection,\r\n photos => {\r\n if (!photos) return null;\r\n return photos.filter(pm => !pm.IsDeleted && pm.externalURL);\r\n });\r\n\r\nexport const selectValidPhotos = createSelector(selectPhotoMetaCollection, photoMetas => photoMetas.filter(pM => !pM.IsDeleted));\r\n\r\nexport const selectPhotoToEdit = createSelector(({ photo }) => photo.editPhotoMeta, result => result);\r\n\r\nexport const selectMaxSortOrder = createSelector(selectPhotoMetaCollection, allPhotos => {\r\n if (!allPhotos) return 0;\r\n if (allPhotos.length === 0) return 0;\r\n return allPhotos.filter(photoMeta => !photoMeta.IsDeleted).length;\r\n});\r\n\r\nexport const selectPhotoQueueLength = createSelector(selectPhotoMetaCollection, allPhotos => {\r\n if (!allPhotos) return 0;\r\n if (allPhotos.length === 0) return 0;\r\n return allPhotos.filter(photo => !photo.IsUploaded && !photo.IsError).length;\r\n});\r\n\r\nexport const selectDisplayedPhotoCount = createSelector(selectPhotosToDisplay, displayPhotos => displayPhotos.length);\r\n","/* eslint-disable react/prop-types */\r\nimport { useEffect } from 'react';\r\nimport { useFormikContext } from 'formik';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\n\r\nimport {\r\n selectLookupNames,\r\n selectAllComboBoxOptions,\r\n selectFormDefinition,\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport {\r\n setFormDataInitialized,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { setRepeatableSectionCount } from '@redux/modules/listing';\r\nimport { selectPhotoMetaCollection } from '@redux/selectors/PhotoSelector';\r\n\r\nconst FormikFieldUpdater = ({\r\n agentGroupType,\r\n agentLookup,\r\n agentOfficeLookup,\r\n agentFormData,\r\n currCoords,\r\n officeLookup,\r\n officeManagerLookup,\r\n officeFormData,\r\n listingFormData,\r\n runValidation,\r\n}) => {\r\n const formDefinition = useSelector(selectFormDefinition);\r\n const lookUpNames = useSelector(selectLookupNames);\r\n const allComboBoxOptions = useSelector(selectAllComboBoxOptions);\r\n const photoMetaCollection = useSelector(selectPhotoMetaCollection);\r\n const { values, setFieldValue } = useFormikContext();\r\n // const newSortOrder = useSelector(selectListingPhotoSortOrder);\r\n const dispatch = useDispatch();\r\n const generateComboBoxOptions = currComboOptionObject => (\r\n currComboOptionObject.data.flatMap(currOption => {\r\n if (!currOption.Active || !currOption.ParentIsActive) return [];\r\n\r\n return [{\r\n label: currOption.Description,\r\n value: `${currOption.Code ? currOption.Code : ''}`,\r\n parents: currOption.Parents,\r\n }];\r\n })\r\n );\r\n\r\n useEffect(() => {\r\n if (values?.Photos) {\r\n if (photoMetaCollection.length === 0 && Object.keys(values.Photos).length !== 0) values.Photos = {};\r\n }\r\n dispatch(setRepeatableSectionCount(values));\r\n }, [values.Rooms, values.Photos, values.Supplements, values.OpenHouses, values.Doors, values.Parcels, values.Units, values.History]);\r\n\r\n const updateFormikValues = updatedData => {\r\n if (!updatedData) return;\r\n const updatedWhiteList = Object.keys(updatedData);\r\n\r\n const formDefinitionFlatMap = formDefinition.flatMap(field => {\r\n if (!updatedWhiteList.includes(field.FieldName)) return [];\r\n return [{ ...field }];\r\n });\r\n\r\n const comboBoxFlatMap = allComboBoxOptions.flatMap(comboOption => {\r\n if (!updatedWhiteList.includes(comboOption.lookupFieldName)) return [];\r\n return [{ ...comboOption }];\r\n });\r\n\r\n formDefinitionFlatMap.map(currField => {\r\n const currentValue = updatedData[currField.FieldName];\r\n\r\n switch (currField.inputType) {\r\n case 'TextInput':\r\n if (currField.datatype === 'datetime' || currField.datatype === 'date') {\r\n if (!currentValue) break;\r\n // FormikField takes care of formatting and presentation\r\n setFieldValue(currField.FieldName, currentValue.split('T')[0]);\r\n } else if (currField.datatype === 'bit') {\r\n let bitValue;\r\n if (currentValue != null && currentValue !== '') {\r\n if (typeof currentValue === 'string') {\r\n bitValue = currentValue === 'true' ? 1 : 0;\r\n } else if (typeof currentValue === 'boolean') {\r\n bitValue = currentValue === true ? 1 : 0;\r\n } else if (typeof value === 'number') {\r\n bitValue = currentValue;\r\n }\r\n }\r\n setFieldValue(currField.FieldName, bitValue ?? '');\r\n } else {\r\n setFieldValue(currField.FieldName, currentValue);\r\n }\r\n break;\r\n\r\n case 'ComboBox':\r\n if (comboBoxFlatMap.length) {\r\n let currComboOptionDirty;\r\n comboBoxFlatMap.forEach(currOption => {\r\n if (currField.comboBoxLookupName === currOption.tableName) {\r\n currComboOptionDirty = currOption;\r\n }\r\n });\r\n\r\n const currentComboOption = currComboOptionDirty ? generateComboBoxOptions(currComboOptionDirty) : [];\r\n const multiSelectedOptions = [];\r\n let singleSelectOption = {};\r\n currentComboOption.forEach(opt => {\r\n if (currentValue) {\r\n if (currField.multiselect) {\r\n currentValue.split(',').map(val => {\r\n if (val === opt.value) {\r\n multiSelectedOptions.push(opt);\r\n }\r\n return null;\r\n });\r\n } else {\r\n // eslint-disable-next-line no-lonely-if\r\n if (currentValue === opt.value) {\r\n singleSelectOption = opt;\r\n }\r\n }\r\n }\r\n });\r\n\r\n if (currField.multiselect) {\r\n setFieldValue(currField.FieldName, multiSelectedOptions.map(option => option.value).join(','));\r\n } else {\r\n setFieldValue(currField.FieldName, singleSelectOption.value ?? '');\r\n }\r\n }\r\n break;\r\n\r\n default: break;\r\n }\r\n return null;\r\n });\r\n };\r\n\r\n // Goes through the office keys, and sets an object with the MemberOffice field name and AgentOffice field name\r\n const updatedOfficeKeys = (officeKeys, officeType) => (\r\n officeKeys.flatMap(key => {\r\n // eslint-disable-next-line no-unused-vars\r\n const [officePrefix, officeSuffix] = key.split('Office');\r\n const officeUpdatedKey = officeType.concat('Office', officeSuffix);\r\n let officeWhiteList = ['OfficeAOR', 'OfficeKeyNumeric', 'OfficeMlsId', 'OfficeName', 'OfficePhone'];\r\n\r\n if (officeType === 'Main') {\r\n officeWhiteList = ['OfficeKeyNumeric', 'OfficeMlsId', 'OfficeName'];\r\n }\r\n\r\n if (!officeWhiteList.includes(key)) return [];\r\n return [{\r\n base: key,\r\n updated: officeUpdatedKey,\r\n }];\r\n })\r\n );\r\n\r\n // Goes through the agent keys, and sets an object with the Member field name and Agent field name\r\n const updatedAgentKeys = (agentKeys, agentGroup) => (\r\n agentKeys.flatMap(key => {\r\n let agentWhiteList = ['MemberAOR', 'MemberEmail', 'MemberFullName', 'MemberMlsId', 'MemberDirectPhone'];\r\n if (agentGroup === 'OfficeManager') {\r\n agentWhiteList = ['MemberMlsId', 'MemberFullName', 'MemberKeyNumeric'];\r\n }\r\n if (!agentWhiteList.includes(key)) return [];\r\n\r\n let agentUpdatedKey;\r\n switch (key) {\r\n case 'MemberDirectPhone':\r\n if (agentGroup === 'ListAgent') {\r\n agentUpdatedKey = 'ListAgentDirectPhone';\r\n break;\r\n }\r\n if (agentGroup === 'CoListAgent') {\r\n agentUpdatedKey = 'CoListAgentMobilePhone';\r\n break;\r\n }\r\n if (agentGroup === 'BuyerAgent') {\r\n agentUpdatedKey = 'BuyerAgentDirectPhone';\r\n break;\r\n }\r\n if (agentGroup === 'CoBuyerAgent') {\r\n agentUpdatedKey = 'CoBuyerAgentMobilePhone';\r\n break;\r\n }\r\n break;\r\n\r\n default: {\r\n const [, agentSuffix] = key.split('Member');\r\n agentUpdatedKey = agentGroup.concat(agentSuffix);\r\n break;\r\n }\r\n }\r\n if (!agentUpdatedKey) return [];\r\n\r\n return [{\r\n base: key,\r\n updated: agentUpdatedKey,\r\n }];\r\n })\r\n );\r\n\r\n // Populating manager fields in create/edit office\r\n useEffect(() => {\r\n if (officeManagerLookup) {\r\n const memberKeys = Object.keys(officeManagerLookup);\r\n const memberGroup = 'OfficeManager';\r\n\r\n const filteredMemberKeys = updatedAgentKeys(memberKeys, memberGroup);\r\n filteredMemberKeys.map(key => {\r\n setFieldValue(key.updated, officeManagerLookup[key.base]);\r\n return null;\r\n });\r\n\r\n runValidation();\r\n }\r\n }, [officeManagerLookup]);\r\n\r\n // Populating agent lookup fields in create/edit listing\r\n useEffect(() => {\r\n if (agentLookup) {\r\n const memberKeys = Object.keys(agentLookup);\r\n const agentKeys = [];\r\n const officeKeys = [];\r\n\r\n let agentOfficeType = 'List';\r\n let agentGroup = 'ListAgent';\r\n\r\n if (agentGroupType) {\r\n [agentOfficeType] = agentGroupType.split('Agent');\r\n agentGroup = agentGroupType;\r\n }\r\n\r\n memberKeys.map(key => {\r\n if (key.includes('Member')) {\r\n agentKeys.push(key);\r\n } else if (key.includes('Office')) {\r\n officeKeys.push(key);\r\n }\r\n return null;\r\n });\r\n\r\n const filteredMemberKeys = updatedAgentKeys(agentKeys, agentGroup);\r\n const filteredOfficeKeys = updatedOfficeKeys(officeKeys, agentOfficeType);\r\n\r\n filteredMemberKeys.map(key => {\r\n setFieldValue(key.updated, agentLookup[key.base]);\r\n return null;\r\n });\r\n\r\n filteredOfficeKeys.map(key => {\r\n setFieldValue(key.updated, agentLookup[key.base]);\r\n return null;\r\n });\r\n\r\n const keyNumericKey = agentGroup.concat('KeyNumeric');\r\n setFieldValue(keyNumericKey, agentLookup.UniqueID);\r\n\r\n runValidation();\r\n }\r\n }, [agentLookup]);\r\n\r\n // This is for populating the office lookup fields when creating an agent\r\n useEffect(() => {\r\n if (agentOfficeLookup) {\r\n Object.entries(agentOfficeLookup).map(([key, value]) => {\r\n const officeWhiteList = ['OfficeKeyNumeric', 'OfficeID', 'OfficeMlsId', 'OfficeName']; // We know that these are the office fields are are looking for\r\n if (officeWhiteList.includes(key)) {\r\n setFieldValue(key, value);\r\n }\r\n return null;\r\n });\r\n runValidation();\r\n }\r\n }, [agentOfficeLookup]);\r\n\r\n // This is for populating the coordinates fields when using the location plotter\r\n useEffect(() => {\r\n if (currCoords) {\r\n Object.entries(currCoords).map(([key, value]) => {\r\n setFieldValue(key, value);\r\n return null;\r\n });\r\n runValidation();\r\n }\r\n }, [currCoords]);\r\n\r\n /*\r\n This useEffect listens to both the comboBox options and selectedListing\r\n because when editing a listing, we need to wait for the comboBox options\r\n to load before we update the fields, whereas with TAP we don't need to do that.\r\n */\r\n useEffect(() => {\r\n if (listingFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFormikValues(listingFormData);\r\n runValidation();\r\n dispatch(setFormDataInitialized());\r\n }\r\n }, [listingFormData, allComboBoxOptions]);\r\n\r\n // Populating fields when we edit an agent\r\n useEffect(() => {\r\n if (agentFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFormikValues(agentFormData);\r\n runValidation();\r\n dispatch(setFormDataInitialized());\r\n }\r\n }, [agentFormData, allComboBoxOptions]);\r\n\r\n // Populating the fields when editing an office\r\n useEffect(() => {\r\n if (officeFormData && (!lookUpNames?.lookupNames?.length || allComboBoxOptions?.length)) {\r\n updateFormikValues(officeFormData);\r\n runValidation();\r\n dispatch(setFormDataInitialized());\r\n }\r\n }, [officeFormData, allComboBoxOptions]);\r\n\r\n /*\r\n This is for when we are in the create/edit office form\r\n and do a Main Office Lookup\r\n */\r\n useEffect(() => {\r\n if (officeLookup) {\r\n const officeKeys = Object.keys(officeLookup);\r\n const filteredOfficeKeys = updatedOfficeKeys(officeKeys, 'Main');\r\n filteredOfficeKeys.map(key => {\r\n setFieldValue(key.updated, officeLookup[key.base]);\r\n return null;\r\n });\r\n runValidation();\r\n }\r\n }, [officeLookup]);\r\n\r\n return null;\r\n};\r\n\r\nexport default FormikFieldUpdater;\r\n","import { createSelector } from 'reselect';\r\n\r\nexport const getSearchAgentResults = createSelector(({ agent }) => agent.agentSearchResults, results => results);\r\n\r\nexport const getAgentSelected = ({ agent }) => agent.agentSelected;\r\n\r\nexport const selectAgentPhotos = ({ agent }) => agent.agentPhotos;\r\n\r\nexport const selectAgentPreferredPhoto = ({ agent }) => agent.singleAgentPhoto;\r\n\r\nexport const selectAgentPreferredPhotoDetails = createSelector(selectAgentPhotos, photos => {\r\n let preferredPhoto = {};\r\n if (photos?.length > 0) {\r\n [preferredPhoto] = photos;\r\n photos?.map(singlePhoto => {\r\n if (singlePhoto.PreferredPhotoYN) preferredPhoto = singlePhoto;\r\n return null;\r\n });\r\n }\r\n return preferredPhoto;\r\n});\r\n","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\n\r\n// This will group the Address fields together\r\n\r\nconst Address = props => {\r\n const [cityField, setCityField] = useState({ FieldName: 'City' });\r\n const [countyField, setCountyField] = useState({ FieldName: 'CountyOrParish' });\r\n const [postalField, setPostalField] = useState({ FieldName: 'PostalCode' });\r\n const [provinceField, setProvinceField] = useState({ FieldName: 'StateOrProvince' });\r\n const [streetDirSufField, setStreetDirSufField] = useState({ FieldName: 'StreetDirSuffix' });\r\n const [streetNameField, setStreetNameField] = useState({ FieldName: 'StreetName' });\r\n const [streetNumField, setStreetNumField] = useState({ FieldName: 'StreetNumber' });\r\n const [streetSufField, setStreetSufField] = useState({ FieldName: 'StreetSuffix' });\r\n const [unitNumField, setUnitNumField] = useState({ FieldName: 'UnitNumber' });\r\n\r\n const { fields, validateFigField, comboBubbleWrap } = props;\r\n\r\n useEffect(() => {\r\n fields.forEach(field => {\r\n switch (field.FieldName) {\r\n case 'City':\r\n setCityField(field);\r\n break;\r\n case 'CountyOrParish':\r\n setCountyField(field);\r\n break;\r\n case 'PostalCode':\r\n setPostalField(field);\r\n break;\r\n case 'StateOrProvince':\r\n setProvinceField(field);\r\n break;\r\n case 'StreetDirSuffix':\r\n setStreetDirSufField(field);\r\n break;\r\n case 'StreetName':\r\n setStreetNameField(field);\r\n break;\r\n case 'StreetNumber':\r\n setStreetNumField(field);\r\n break;\r\n case 'StreetSuffix':\r\n setStreetSufField(field);\r\n break;\r\n case 'UnitNumber':\r\n setUnitNumField(field);\r\n break;\r\n default: break;\r\n }\r\n });\r\n }, [fields]);\r\n\r\n return (\r\n <>\r\n \r\n {fieldLabel.includes('URL') && (
\r\n \r\n )\r\n }\r\n {\r\n (datatype === 'string' && maxLength >= 200)\r\n && (\r\n <>\r\n )}\r\n
\r\n
\r\n )}\r\n \r\n {maxLength > 0 && !fieldIsDisabled ? `${characterCount} / ${maxLength}` : null}\r\n
\r\n \r\n {fieldLabel.includes('URL') && (
\r\n \r\n )\r\n }\r\n {\r\n datatype === 'integer'\r\n && (\r\n )}\r\n
\r\n
\r\n )}\r\n \r\n {maxLength > 0 && !fieldIsDisabled ? `${characterCount} / ${maxLength}` : null}\r\n
\r\n \r\n {(endsWith(fieldLabel, 'Amount')\r\n || endsWith(fieldLabel, 'Price')\r\n || endsWith(fieldLabel, 'Rent')\r\n || endsWith(fieldLabel, 'Fee')) && (
\r\n )\r\n }\r\n {\r\n datatype === 'bit'\r\n && (\r\n $
)}\r\n \r\n {(endsWith(fieldLabel, 'Amount')\r\n || endsWith(fieldLabel, 'Price')\r\n || endsWith(fieldLabel, 'Rent')\r\n || endsWith(fieldLabel, 'Fee')) && (
\r\n )\r\n }\r\n \r\n )\r\n }\r\n {\r\n inputType === 'ComboBox'\r\n && (\r\n $
)}\r\n {status.errorMessage}
\r\n ) : null\r\n }\r\n {inputType === 'ComboBox'\r\n && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nAddress.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n comboBubbleWrap: PropTypes.shape({\r\n AddComboMutator: PropTypes.func,\r\n setNewComboValue: PropTypes.func,\r\n setNewComboOptions: PropTypes.func,\r\n }),\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default Address;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport { SET_GROUP_TYPE } from '@redux/constants/ActionTypes';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\n\r\nconst AgentLookup = ({ fields, groupName, validateFigField }) => {\r\n const dispatch = useDispatch();\r\n const selectLoading = useSelector(state => state.agent.selectLoading);\r\n\r\n const agentFullNameField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('FULLNAME')), [fields]);\r\n const officeNameField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('OFFICENAME')), [fields]);\r\n\r\n const { setFieldValue } = useFormikContext();\r\n\r\n const agentSearchClicked = () => {\r\n dispatch({ type: SET_GROUP_TYPE, groupType: groupName });\r\n };\r\n\r\n const onAgentCleared = () => {\r\n if (fields) {\r\n fields.map(field => {\r\n setFieldValue(field.FieldName, '');\r\n return null;\r\n });\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nAgentLookup.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n groupName: PropTypes.string,\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default AgentLookup;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextareaAutosize from 'react-textarea-autosize';\r\nimport { isNull } from 'lodash';\r\n\r\nconst FormikTextInput = ({\r\n disabled,\r\n name,\r\n value,\r\n onBlur,\r\n onChange,\r\n onKeyPress,\r\n maxLength,\r\n}) => (maxLength < 200\r\n ? (\r\n \r\n
\r\n {\r\n groupName !== 'OfficeManager' && (\r\n \r\n
\r\n )\r\n }\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n agentSearchClicked()}\r\n variant=\"primary\"\r\n tooltipText=\"Agent Lookup\"\r\n disabled={selectLoading}\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n {name.includes('URL') && (
\r\n )\r\n : (\r\n )}\r\n
\r\n
\r\n )}\r\n \r\n {maxLength > 0 && !disabled ? `${isNull(value) ? 0 : value.length} / ${maxLength}` : null}\r\n
\r\n \r\n {name.includes('URL') && (
\r\n )\r\n);\r\n\r\nFormikTextInput.propTypes = {\r\n disabled: PropTypes.bool,\r\n name: PropTypes.string,\r\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.instanceOf(null)]), // if value is null\r\n onBlur: PropTypes.func,\r\n onChange: PropTypes.func,\r\n onKeyPress: PropTypes.func,\r\n maxLength: PropTypes.number,\r\n};\r\n\r\nexport default FormikTextInput;\r\n","import React, { useMemo } from 'react';\r\nimport { Form } from 'react-bootstrap';\r\nimport PropTypes from 'prop-types';\r\nimport { useField } from 'formik';\r\n\r\nconst FormikBoolean = ({\r\n disabled,\r\n name,\r\n value = false,\r\n onBlur,\r\n onChange,\r\n}) => {\r\n const [field, , helpers] = useField(name);\r\n const checked = useMemo(() => {\r\n if (typeof value === 'boolean') return value;\r\n if (typeof value === 'number') return Boolean(value);\r\n if (typeof value === 'string') return Boolean(Number(value));\r\n return null;\r\n }, [value]);\r\n\r\n const handleChange = event => {\r\n const bitVal = String(Number(event?.target?.checked ?? false));\r\n if (field?.value === bitVal) return;\r\n if (onChange) {\r\n onChange(bitVal);\r\n } else {\r\n helpers.setValue(bitVal);\r\n }\r\n };\r\n\r\n return (\r\n )}\r\n
\r\n
\r\n )}\r\n \r\n {maxLength > 0 && !disabled ? `${isNull(value) ? 0 : value.length} / ${maxLength}` : null}\r\n
\r\n \r\n \r\n
\r\n ));\r\n\r\n DateWithAddOnCalendar.propTypes = {\r\n className: PropTypes.string, val: PropTypes.string, onClick: PropTypes.func,\r\n };\r\n\r\n const TimeWithAddOnClock = React.forwardRef(({\r\n className: _className, val, onClick, ...remaining\r\n }, ref) => (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n ));\r\n\r\n TimeWithAddOnClock.propTypes = {\r\n className: PropTypes.string, val: PropTypes.string, onClick: PropTypes.func,\r\n };\r\n\r\n const [customInput, dateFormat, todayButton, showTimeSelect, showTimeSelectOnly] = useMemo(() => {\r\n let input = null;\r\n let format = 'yyyy/MM/dd HH:mm';\r\n let today = null;\r\n let timeSelect = true;\r\n let timeSelectOnly = false;\r\n\r\n switch (datatype) {\r\n case 'date':\r\n input = \r\n \r\n
\r\n \r\n {(endsWith(name, 'Amount')\r\n || endsWith(name, 'Price')\r\n || endsWith(name, 'Rent')\r\n || endsWith(name, 'Fee')) && (
\r\n );\r\n};\r\n\r\nFormikNumberFormatInput.propTypes = {\r\n disabled: PropTypes.bool,\r\n name: PropTypes.string,\r\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),\r\n onBlur: PropTypes.func,\r\n onChange: PropTypes.func,\r\n onKeyPress: PropTypes.func,\r\n Precision: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n datatype: PropTypes.string,\r\n};\r\n\r\nexport default FormikNumberFormatInput;\r\n","/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport React, { useState, useEffect, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Select from 'react-select';\r\nimport { useField } from 'formik';\r\nimport apiService from '@services/apiService';\r\n\r\nconst FormikSelect = ({\r\n disabled,\r\n name,\r\n value,\r\n onBlur,\r\n onChange,\r\n multiselect,\r\n comboBoxLookupName,\r\n}) => {\r\n const [field, , helpers] = useField(name);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [options, setOptions] = useState([]);\r\n\r\n const comboVal = useMemo(() => options.find(item => item.Code === value), [value, options]);\r\n\r\n useEffect(() => {\r\n if (comboBoxLookupName) {\r\n const getOptions = async () => {\r\n try {\r\n const [definitions] = await apiService.Definitions.PostToLookupTable({ lookupNames: [comboBoxLookupName] });\r\n if (value) {\r\n const currValue = definitions.data.find(item => item.Code === value);\r\n if (currValue.Active === false) {\r\n currValue.Active = true;\r\n currValue.Description += ' (disabled)';\r\n }\r\n }\r\n setOptions(definitions.data.filter(item => item.Active === true));\r\n setIsLoading(false);\r\n } catch (er) {\r\n console.error('Error: FormikSelect comboBoxLookup', er);\r\n }\r\n };\r\n\r\n getOptions();\r\n }\r\n }, [comboBoxLookupName]);\r\n\r\n const handleChange = val => {\r\n const selectVal = multiselect && val?.length\r\n ? val.map(({ Code }) => Code)\r\n : val?.Code;\r\n if (field?.value === selectVal) return;\r\n if (onChange) {\r\n onChange(selectVal);\r\n } else {\r\n helpers.setValue(selectVal);\r\n }\r\n };\r\n\r\n return (\r\n $
)}\r\n \r\n \r\n {fieldLabel}\r\n {status?.errorMessage && *}\r\n \r\n {\r\n showHelpIcon && (\r\n {helpText}}\r\n >\r\n \r\n \r\n )\r\n }\r\n
\r\n );\r\n};\r\n\r\nFormikField.propTypes = {\r\n FieldName: PropTypes.string,\r\n helpText: PropTypes.string,\r\n inputType: PropTypes.string,\r\n showHelpIcon: PropTypes.bool,\r\n datatype: PropTypes.string,\r\n IsVisible: PropTypes.bool,\r\n IsDisabled: PropTypes.bool,\r\n name: PropTypes.string,\r\n fieldLabel: PropTypes.string,\r\n validateFigField: PropTypes.func,\r\n repeatableType: PropTypes.string,\r\n repeatableId: PropTypes.string,\r\n};\r\n\r\nexport default FormikField;\r\n","import React, {\r\n useEffect,\r\n useMemo,\r\n useState,\r\n} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useField } from 'formik';\r\nimport { isNull, isEmpty } from 'lodash';\r\nimport Swal from 'sweetalert2';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport FormikField from '../../../FormikField';\r\n\r\nconst LincNumberGenerator = ({\r\n fields,\r\n validateFigField,\r\n}) => {\r\n const parcelNumberFieldMeta = useMemo(() => fields[0], [fields]);\r\n const [field, , helpers] = useField(parcelNumberFieldMeta.FieldName);\r\n const [parcelNumber, setParcelNumber] = useState('');\r\n\r\n useEffect(() => {\r\n const fieldValue = field?.value;\r\n if (isNull(fieldValue)) return;\r\n setParcelNumber(fieldValue);\r\n validateFigField(parcelNumberFieldMeta.FieldName, fieldValue);\r\n }, [field?.value]);\r\n\r\n const onParcelNumberGenerateClicked = async () => {\r\n if (fields) {\r\n await Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Generating Temporary LINC Number...',\r\n title: '',\r\n showConfirmButton: false,\r\n timer: 2000,\r\n });\r\n const fieldValue = `T${(Math.floor((new Date()).getTime() / 1000)).toString().slice(1)}`;\r\n await helpers.setValue(fieldValue);\r\n }\r\n };\r\n\r\n const onParcelNumberClearClicked = async () => {\r\n if (fields) {\r\n helpers.setValue('');\r\n }\r\n };\r\n\r\n return (\r\n {status?.errorMessage}
}\r\n \r\n
\r\n );\r\n};\r\n\r\nLincNumberGenerator.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default LincNumberGenerator;\r\n","import { useEffect, useRef } from 'react';\r\n\r\n// https://blog.logrocket.com/how-to-get-previous-props-state-with-react-hooks/\r\n\r\nconst usePrevious = value => {\r\n const ref = useRef();\r\n\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n};\r\n\r\nexport default usePrevious;\r\n","import React, {\r\n useEffect,\r\n useState,\r\n useMemo,\r\n useCallback,\r\n} from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\nimport {\r\n Autocomplete, GoogleMap, LoadScript, Marker,\r\n} from '@react-google-maps/api';\r\n\r\nimport { useField } from 'formik';\r\n\r\nimport {\r\n selectComboBoxOptions,\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport usePrevious from '@hooks/usePrevious';\r\n\r\nconst defaultCenter = {\r\n lat: 53.54288713007532,\r\n lng: -113.49615377351157,\r\n};\r\n\r\nconst containerStyles = {\r\n width: '100%',\r\n height: '60vh',\r\n};\r\n\r\nconst defaultLibraries = ['places', 'geometry'];\r\n\r\nconst LocationPlotterMap = ({ onCoordsClicked }) => {\r\n const [autocompleteInstance, setAutocompleteInstance] = useState(null);\r\n const [mapInstance, setMapInstance] = useState(null);\r\n const [zoom, setZoom] = useState(5);\r\n\r\n const [zoomToLocation, setZoomToLocation] = useState(false);\r\n\r\n const [latValue, setLatValue] = useState(null);\r\n const [lngValue, setLngValue] = useState(null);\r\n\r\n const [latField] = useField('Latitude');\r\n const [lngField] = useField('Longitude');\r\n\r\n const [streetNoField] = useField('StreetNumber');\r\n const [streetNameField] = useField('StreetName');\r\n const [postalCodeField] = useField('PostalCode');\r\n const [streetSuffixField] = useField('StreetSuffix'); // ComboBox\r\n const [streetDirSuffixField] = useField('StreetDirSuffix'); // ComboBox\r\n const [cityField] = useField('City'); // ComboBox\r\n const [countyField] = useField('CountyOrParish'); // ComboBox\r\n const [provinceField] = useField('StateOrProvince'); // ComboBox\r\n\r\n const streetSuffixOptions = useSelector(state => selectComboBoxOptions(state, 'StreetSuffix'));\r\n const streetDirSuffixOptions = useSelector(state => selectComboBoxOptions(state, 'StreetDirSuffix'));\r\n const cityOptions = useSelector(state => selectComboBoxOptions(state, 'City'));\r\n const countyOptions = useSelector(state => selectComboBoxOptions(state, 'CountyOrParish'));\r\n const provinceOptions = useSelector(state => selectComboBoxOptions(state, 'StateOrProvince'));\r\n\r\n const streetNo = useMemo(() => streetNoField.value ?? '', [streetNoField]);\r\n const streetName = useMemo(() => streetNameField.value ?? '', [streetNameField]);\r\n const postalCode = useMemo(() => postalCodeField.value ?? '', [postalCodeField]);\r\n const streetSuffix = useMemo(() => streetSuffixOptions.find(opt => opt.value === streetSuffixField.value)?.label ?? '', [streetSuffixField.value, streetSuffixOptions]);\r\n const streetDirSuffix = useMemo(() => streetDirSuffixOptions.find(opt => opt.value === streetDirSuffixField.value)?.label ?? '', [streetDirSuffixField.value, streetSuffixOptions]);\r\n const city = useMemo(() => cityOptions.find(opt => opt.value === cityField.value)?.label ?? '', [cityField.value, streetSuffixOptions]);\r\n const county = useMemo(() => countyOptions.find(opt => opt.value === countyField.value)?.label ?? '', [countyField.value, streetSuffixOptions]);\r\n const province = useMemo(() => provinceOptions.find(opt => opt.value === provinceField.value)?.value ?? '', [provinceField.value, streetSuffixOptions]);\r\n\r\n const [addressInputValue, setAddressInputValue] = useState('');\r\n\r\n const [formAddress, setFormAddress] = useState('');\r\n useEffect(() => {\r\n const cityOrCounty = city || county;\r\n const address = `${streetNo} ${streetName} ${streetSuffix} ${streetDirSuffix}, ${cityOrCounty}, ${province} ${postalCode}`\r\n .replace(/\\s+,/g, ',') // moves any spaced comma next to the leftmost address token\r\n .trim() // cleanups any leading and trailing white space\r\n .replace(/^,+|,+$/g, '') // cleanups leading and trailing commas\r\n .replace(/,+/g, ',') // ensures only one comma is used between address tokens\r\n .replace(/\\s+/g, ' ') // ensures only one space is used between address tokens\r\n .trim(); // cleanups any leading and trailing white space\r\n setFormAddress(address);\r\n setAddressInputValue(address);\r\n }, [streetNo, streetName, streetSuffix, streetDirSuffix, city, county, province, postalCode]);\r\n\r\n const [isModalShown, setIsModalShown] = useState(false);\r\n const previousIsModalShown = usePrevious(isModalShown);\r\n const onModalShow = () => setIsModalShown(true);\r\n const onModalHide = () => setIsModalShown(false);\r\n\r\n useEffect(() => {\r\n window.jQuery('#locationPlotterModal').on('show.bs.modal', onModalShow);\r\n window.jQuery('#locationPlotterModal').on('hide.bs.modal', onModalHide);\r\n return () => {\r\n window.jQuery('#locationPlotterModal').off('show.bs.modal', onModalShow);\r\n window.jQuery('#locationPlotterModal').off('hide.bs.modal', onModalHide);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (previousIsModalShown && !isModalShown && !addressInputValue) {\r\n // Populate address field with existing form address when exiting modal without an address.\r\n setAddressInputValue(formAddress);\r\n }\r\n }, [isModalShown]);\r\n\r\n useEffect(() => {\r\n if (latField.value !== '') {\r\n const parseLat = parseFloat(latField.value);\r\n\r\n if (!latValue || parseLat !== latValue) {\r\n setLatValue(parseLat);\r\n }\r\n setZoomToLocation(true);\r\n } else if (latValue) {\r\n setLatValue(null); // If the user clears the lng coordinate we remove it from the map\r\n }\r\n }, [latField.value]);\r\n\r\n useEffect(() => {\r\n if (lngField.value !== '') {\r\n const parseLng = parseFloat(lngField.value);\r\n\r\n if (!lngValue || parseLng !== lngValue) {\r\n setLngValue(parseLng);\r\n }\r\n setZoomToLocation(true);\r\n } else if (lngValue) {\r\n setLngValue(null); // If the user clears the lng coordinate we remove it from the map\r\n }\r\n }, [lngField.value]);\r\n\r\n useEffect(() => {\r\n if (mapInstance && latValue && lngValue) {\r\n mapInstance.panTo({ lat: latValue, lng: lngValue });\r\n\r\n if (zoomToLocation) {\r\n mapInstance.setZoom(18);\r\n setZoom(18);\r\n }\r\n }\r\n }, [mapInstance, latValue, lngValue, zoomToLocation]);\r\n\r\n const onPlaceChanged = () => {\r\n if (autocompleteInstance) {\r\n const place = autocompleteInstance.getPlace();\r\n\r\n if (!place.geometry) return;\r\n if (mapInstance) {\r\n if (place.geometry.viewport) {\r\n mapInstance.fitBounds(place.geometry.viewport);\r\n } else {\r\n mapInstance.setCenter(place.geometry.location);\r\n mapInstance.setZoom(17);\r\n }\r\n }\r\n setLatValue(place.geometry.location.lat());\r\n setLngValue(place.geometry.location.lng());\r\n onCoordsClicked({\r\n Latitude: place.geometry.location.lat().toString(),\r\n Longitude: place.geometry.location.lng().toString(),\r\n });\r\n setAddressInputValue(place.formatted_address);\r\n }\r\n };\r\n\r\n const onMapClick = e => {\r\n if (mapInstance) {\r\n setZoomToLocation(false);\r\n setLatValue(e.latLng.lat());\r\n setLngValue(e.latLng.lng());\r\n onCoordsClicked({\r\n Latitude: e.latLng.lat().toString(),\r\n Longitude: e.latLng.lng().toString(),\r\n });\r\n }\r\n };\r\n\r\n const onMapLoad = useCallback(map => {\r\n setMapInstance(map);\r\n const parcelLayer = new window.google.maps.ImageMapType({\r\n getTileUrl: (c, z) => `${process.env.REACT_APP_MAPS_PARCEL_LAYER}${z}/${c.x}/${c.y}.png`,\r\n maxZoom: 20,\r\n minZoom: 16,\r\n tileSize: new window.google.maps.Size(256, 256),\r\n name: 'Parcels',\r\n });\r\n\r\n const neighbourhoodLayer = new window.google.maps.ImageMapType({\r\n getTileUrl: (c, z) => `${process.env.REACT_APP_MAPS_NEIGHBOURHOOD_LAYER}${z}/${c.x}/${c.y}.png`,\r\n maxZoom: 15,\r\n minZoom: 12,\r\n tileSize: new window.google.maps.Size(256, 256),\r\n name: 'Neighbourhoods',\r\n });\r\n\r\n const municipalityLayer = new window.google.maps.ImageMapType({\r\n getTileUrl: (c, z) => `${process.env.REACT_APP_MAPS_MUNICIPALITY_LAYER}${z}/${c.x}/${c.y}.png`,\r\n maxZoom: 13,\r\n minZoom: 7,\r\n tileSize: new window.google.maps.Size(256, 256),\r\n name: 'Municipalities',\r\n });\r\n map.overlayMapTypes.insertAt(0, parcelLayer);\r\n map.overlayMapTypes.insertAt(1, neighbourhoodLayer);\r\n map.overlayMapTypes.insertAt(2, municipalityLayer);\r\n }, []);\r\n\r\n const onMapUnmount = () => {\r\n setMapInstance(null);\r\n };\r\n\r\n const onAutoCompleteLoad = autocomplete => {\r\n setAutocompleteInstance(autocomplete);\r\n };\r\n\r\n const onAutoCompleteUnload = () => {\r\n setAutocompleteInstance(null);\r\n };\r\n\r\n const handleClear = () => {\r\n document.getElementById('locationPlotter').value = '';\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n setAddressInputValue(e.value)}\r\n value={addressInputValue}\r\n />\r\n
\r\n \r\n \r\n Clear}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nOfficeLookup.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default OfficeLookup;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport isEmpty from 'lodash/isEmpty';\r\nimport { useField, useFormikContext } from 'formik';\r\n\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\n// Contains one numeric field and one units lookup field\r\n\r\nconst OneDMeasurement = props => {\r\n const { fields, validateFigField } = props;\r\n const { setFieldValue } = useFormikContext();\r\n\r\n const [currUnit, setCurrUnit] = useState('');\r\n\r\n const areaField = useMemo(() => fields.find(field => !(field.FieldName.toUpperCase().includes('UNITS'))), [fields]);\r\n const unitsField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('UNITS')), [fields]);\r\n\r\n const [areaFormikField] = useField(areaField?.FieldName);\r\n const [unitsFormikField] = useField(unitsField?.FieldName);\r\n\r\n // updates current unit value from formik\r\n useEffect(() => {\r\n if (unitsFormikField.name) {\r\n if (!isEmpty(unitsFormikField.value)) {\r\n setCurrUnit(unitsFormikField.value);\r\n }\r\n }\r\n }, [unitsFormikField]);\r\n\r\n const convertFieldMeasurements = () => {\r\n let areaValue = parseFloat(areaFormikField.value);\r\n /*\r\n currUnit is the measurement we are changing from\r\n unitsFormikField is the measurement we are changing to\r\n */\r\n\r\n switch (currUnit) {\r\n case 'AC': {\r\n switch (unitsFormikField.value) {\r\n case 'HA': {\r\n areaValue /= 2.471;\r\n break;\r\n }\r\n case 'SF': {\r\n areaValue *= 43560;\r\n break;\r\n }\r\n case 'SM': {\r\n areaValue /= 0.000247105;\r\n break;\r\n }\r\n default: break;\r\n }\r\n break;\r\n }\r\n case 'HA': {\r\n switch (unitsFormikField.value) {\r\n case 'AC': {\r\n areaValue *= 2.471;\r\n break;\r\n }\r\n case 'SF': {\r\n areaValue *= 107639;\r\n break;\r\n }\r\n case 'SM': {\r\n areaValue *= 10000;\r\n break;\r\n }\r\n default: break;\r\n }\r\n break;\r\n }\r\n case 'SF': {\r\n switch (unitsFormikField.value) {\r\n case 'AC': {\r\n areaValue /= 43560;\r\n break;\r\n }\r\n case 'HA': {\r\n areaValue /= 107640;\r\n break;\r\n }\r\n case 'SM': {\r\n areaValue *= 0.09290304;\r\n break;\r\n }\r\n default: break;\r\n }\r\n break;\r\n }\r\n case 'SM': {\r\n switch (unitsFormikField.value) {\r\n case 'AC': {\r\n areaValue *= 0.000247105;\r\n break;\r\n }\r\n case 'HA': {\r\n areaValue /= 10000;\r\n break;\r\n }\r\n case 'SF': {\r\n areaValue *= 10.7639104167;\r\n break;\r\n }\r\n default: break;\r\n }\r\n break;\r\n }\r\n default: break;\r\n }\r\n\r\n setFieldValue(areaField.FieldName, areaValue);\r\n setCurrUnit(unitsFormikField.value);\r\n };\r\n\r\n useEffect(() => {\r\n if (unitsFormikField.value !== currUnit && areaFormikField.value > 0) {\r\n convertFieldMeasurements();\r\n }\r\n }, [unitsFormikField.value, areaFormikField.value]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nOneDMeasurement.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default OneDMeasurement;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useField, useFormikContext } from 'formik';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\n\r\n// Contains two numeric fields and one units lookup field\r\n\r\nconst TwoDMeasurement = props => {\r\n const { fields, validateFigField } = props;\r\n const { setFieldValue } = useFormikContext();\r\n\r\n const [currUnit, setCurrUnit] = useState('');\r\n\r\n const lengthField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('LENGTH') || field.FieldName.toUpperCase().includes('FRONTAGEINPUT')), [fields]);\r\n const unitsField = useMemo(() => fields.find(field => field.FieldName.toUpperCase().includes('UNITS')), [fields]);\r\n const widthField = useMemo(() => fields.find(field => {\r\n if (field.FieldName.toUpperCase().includes('LENGTH') || field.FieldName.toUpperCase().includes('FRONTAGEINPUT')) return false;\r\n if (field.FieldName.toUpperCase().includes('UNITS')) return false;\r\n return true;\r\n }), [fields]);\r\n\r\n const [lengthFormikField] = useField(lengthField?.FieldName);\r\n const [unitsFormikField] = useField(unitsField?.FieldName);\r\n const [widthFormikField] = useField(widthField?.FieldName);\r\n\r\n // updates current unit value from formik\r\n useEffect(() => {\r\n if (unitsFormikField.name) {\r\n if (!unitsFormikField.value) {\r\n setCurrUnit(unitsFormikField.value);\r\n }\r\n }\r\n }, [unitsFormikField]);\r\n\r\n const convertFieldMeasurements = () => {\r\n const currentUnit = unitsFormikField.value;\r\n let lengthValue = parseFloat(lengthFormikField.value);\r\n let widthValue = parseFloat(widthFormikField.value);\r\n if (unitsFormikField.value === '') return;\r\n // Convert between feet and meters\r\n if (currUnit === 'M') {\r\n lengthValue *= 3.281;\r\n widthValue *= 3.281;\r\n } else if (currUnit === 'F') {\r\n lengthValue /= 3.281;\r\n widthValue /= 3.281;\r\n }\r\n setFieldValue(lengthField.FieldName, lengthValue); // Set the length field in Formik state\r\n setFieldValue(widthField.FieldName, widthValue); // Set the width field in Formik state\r\n setCurrUnit(currentUnit); // Update the state\r\n };\r\n\r\n useEffect(() => {\r\n if (unitsFormikField.value !== currUnit && lengthFormikField.value && widthFormikField.value) {\r\n convertFieldMeasurements();\r\n }\r\n }, [unitsFormikField.value, lengthFormikField.value, widthFormikField.value]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nTwoDMeasurement.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()).isRequired,\r\n validateFigField: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default TwoDMeasurement;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSelector } from 'react-redux';\r\nimport Select from 'react-select';\r\nimport { useField, useFormikContext } from 'formik';\r\nimport { selectComboBoxOptions, selectStatusByName } from '@redux/selectors/FormSelector';\r\n\r\nconst SupplementComboBox = ({ uid, supplementType }) => {\r\n const name = `Supplements.[${uid}].SupplementType`;\r\n const [field, meta] = useField(name);\r\n const { setFieldTouched, setFieldValue } = useFormikContext();\r\n\r\n const supplementTypeOptions = useSelector(state => selectComboBoxOptions(state, 'SupplementType'));\r\n const suppType = useMemo(() => supplementTypeOptions.find(opt => opt.value === supplementType), [supplementType, supplementTypeOptions]);\r\n\r\n const status = useSelector(state => selectStatusByName(state, 'Supplements'));\r\n\r\n // FlexRule does not return a validation result per supplement instance, but instead a single status for all supplements.\r\n // Therefore, it is necessary to check MEASURE and JUDICIAL (the only two valid selections) before displaying validation error message.\r\n const isValid = (meta.touched && status?.errorMessage && field.value !== 'MEASURE' && field.value !== 'JUDICIAL');\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setFieldTouched(name, true)}\r\n // react-select sends synthetic events, and will not work with formik change handler\r\n onChange={option => ((option === null) ? setFieldValue(name, '') : setFieldValue(name, option.value))}\r\n closeMenuOnSelect\r\n value={suppType}\r\n isClearable // option will be null if user clears combo box\r\n options={supplementTypeOptions}\r\n placeholder=\"Choose one\"\r\n />\r\n {isValid && (
\r\n );\r\n};\r\n\r\nSupplementComboBox.propTypes = {\r\n uid: PropTypes.string,\r\n supplementType: PropTypes.string,\r\n};\r\n\r\nexport default SupplementComboBox;\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useField } from 'formik';\r\n\r\nconst SupplementDescription = ({ uid }) => {\r\n const name = `Supplements.[${uid}].Description`;\r\n const [field, , helpers] = useField(name);\r\n const [localFieldValue, setLocalFieldValue] = useState(field?.value);\r\n\r\n const handleBlur = e => {\r\n if (field?.value === e.target.value) return;\r\n helpers.setValue(e.target.value);\r\n };\r\n\r\n const handleChange = ({ target }) => setLocalFieldValue(target.value);\r\n\r\n useEffect(() => {\r\n if (field?.value == null || field.value === localFieldValue) return;\r\n setLocalFieldValue(field.value);\r\n }, [field?.value]);\r\n\r\n return (\r\n {status.errorMessage}
)}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nSupplementDescription.propTypes = {\r\n uid: PropTypes.string,\r\n};\r\n\r\nexport default SupplementDescription;\r\n","import React, { useMemo, useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'react-bootstrap/Button';\r\nimport apiService from '@services/apiService';\r\n\r\nconst extensionDict = {\r\n doc: 'word',\r\n docx: 'word',\r\n pdf: 'pdf',\r\n rtf: 'alt',\r\n txt: 'alt',\r\n xls: 'spreadsheet',\r\n xlsx: 'spreadsheet',\r\n gif: 'image',\r\n jpg: 'image',\r\n jpeg: 'image',\r\n png: 'image',\r\n tiff: 'image',\r\n mov: 'video',\r\n mp4: 'video',\r\n mpeg: 'video',\r\n wmv: 'video',\r\n quicktime: 'video',\r\n};\r\n\r\nconst SupplementLink = ({ path }) => {\r\n const [fileBlob, setFileBlob] = useState(null);\r\n const [blobURL, setBlobURL] = useState('');\r\n const [blobSize, setBlobSize] = useState(0);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const currentIcon = useMemo(() => {\r\n if (path) {\r\n const extension = path.substring(path.lastIndexOf('.') + 1);\r\n return `far fa-file-${extensionDict[extension]}`;\r\n }\r\n return null;\r\n }, [path]);\r\n\r\n const retrieveFile = async awsUrl => {\r\n try {\r\n const response = await apiService.Photos.getSingleImage(awsUrl);\r\n return response;\r\n } catch (er) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: SupplementLink retrieveFile:', er);\r\n return null;\r\n } finally {\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (fileBlob) {\r\n const megabytes = Math.round((fileBlob.size * 0.000001 + Number.EPSILON) * 100) / 100;\r\n setBlobSize(megabytes);\r\n setBlobURL(URL.createObjectURL(fileBlob));\r\n }\r\n }, [fileBlob]);\r\n\r\n useEffect(async () => {\r\n try {\r\n if (path) {\r\n setIsLoading(true);\r\n const fileResp = await retrieveFile(path);\r\n setFileBlob(fileResp);\r\n }\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: SupplementLink retrieveFile', err);\r\n }\r\n }, [path]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nSupplementLink.propTypes = {\r\n path: PropTypes.string,\r\n};\r\n\r\nexport default SupplementLink;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useDispatch } from 'react-redux';\r\nimport { useFormikContext } from 'formik';\r\nimport { SortableHandle } from 'react-sortable-hoc';\r\n\r\nimport Card from 'react-bootstrap/Card';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\nimport { deleteSupplement } from '@redux/modules/listing';\r\n\r\nimport SupplementComboBox from './components/SupplementComboBox';\r\nimport SupplementDescription from './components/SupplementDescription';\r\nimport SupplementLink from './components/SupplementLink';\r\n\r\nconst DragHandle = SortableHandle(() => );\r\n\r\nconst SupplementCard = ({ file, sortIndex }) => {\r\n const dispatch = useDispatch();\r\n const { values, setValues } = useFormikContext();\r\n\r\n const handleDelete = () => {\r\n // flips isDeleted flag in Redux store\r\n dispatch(deleteSupplement(file.uid));\r\n\r\n // set formik state for deleted supplement\r\n setValues({\r\n ...values,\r\n Supplements: {\r\n ...values.Supplements,\r\n [file.uid]: {\r\n ...file,\r\n IsDeleted: true,\r\n },\r\n },\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Download\r\n {' ('}\r\n \r\n {isLoading ? : ` , ${blobSize} MB`}\r\n {') '}\r\n \r\n
\r\n \r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst SupplementGrid = ({ fields, supplementsPayload }) => {\r\n const {\r\n values, setValues, setFieldValue,\r\n } = useFormikContext();\r\n const dispatch = useDispatch();\r\n const statusSupplement = useSelector(state => selectStatusByName(state, 'Supplements'));\r\n // const pageStructureHasRooms = useSelector(selectPageStructureHasRooms);\r\n\r\n const uploadList = useSelector(selectUploadedSupplements);\r\n // this property is duplicated in each member of fields\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const supplementsCount = sectionsPerRepeatableSection.Supplements.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.Supplements) {\r\n Object.entries(values.Supplements).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.Supplements]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Supplements Exceeded',\r\n html: `The maximum number of supplements must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n useEffect(() => {\r\n const formikSupplements = values.Supplements;\r\n uploadList.forEach(upload => {\r\n if (!upload.IsUploading) {\r\n // formik may not have the record.\r\n const uploadFormikRecord = formikSupplements?.[upload.uid] ?? null;\r\n if (uploadFormikRecord) {\r\n uploadFormikRecord.Description = upload.Description;\r\n uploadFormikRecord.Path = upload.Name ?? upload.URL;\r\n uploadFormikRecord.Name = upload.Name ?? upload.URL;\r\n }\r\n }\r\n });\r\n }, [uploadList]);\r\n\r\n const handleFileDrop = acceptedFiles => {\r\n if (supplementsCount + acceptedFiles.length > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n // we batch supplements before adding to formik state, may need async hack per https://github.com/jaredpalmer/formik/issues/529\r\n const batch = {};\r\n acceptedFiles.map(file => {\r\n // generate UID to relate placeholder to POST response to formik state\r\n const id = uuidv4();\r\n // For each file, dispatch async thunk in Redux\r\n dispatch(saveSupplement(file, id));\r\n\r\n batch[id] = {\r\n uid: id,\r\n Description: '',\r\n SupplementType: '',\r\n SortOrder: uploadList.length + 1,\r\n IsDeleted: false,\r\n };\r\n return null;\r\n });\r\n // add uploads to formik state\r\n setValues({\r\n ...values,\r\n Supplements: {\r\n ...values.Supplements,\r\n ...batch,\r\n },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (supplementsPayload?.length) {\r\n const batch = {}; // adds object to formik\r\n const newUploadedSupp = []; // used for re ordering\r\n supplementsPayload.map(supp => {\r\n // generate UID to relate placeholder to POST response to formik state\r\n const id = uuidv4();\r\n batch[id] = {\r\n uid: id,\r\n Description: supp.displayName ?? supp.Description,\r\n SupplementType: supp.SupplementType,\r\n SortOrder: supp.SortOrder,\r\n IsDeleted: supp.IsDeleted,\r\n Name: supp.Path,\r\n Path: supp.Path,\r\n URL: supp.URL,\r\n };\r\n newUploadedSupp.push({\r\n uid: id,\r\n Path: supp.Path,\r\n Description: supp.displayName ?? supp.Description,\r\n UniqueID: supp.UniqueID,\r\n SupplementType: supp.SupplementType,\r\n MediaType: supp.MediaType,\r\n URL: supp.URL,\r\n SortOrder: supp.SortOrder,\r\n IsDeleted: supp.IsDeleted,\r\n IsLive: supp.IsLive,\r\n IsPreload: supp.IsPreload,\r\n Name: supp.Path,\r\n });\r\n return null;\r\n });\r\n // add uploads to formik state\r\n setFieldValue('Supplements', {\r\n ...values.Supplements,\r\n ...batch,\r\n });\r\n // add it to redux\r\n dispatch(reorderSupplements(newUploadedSupp));\r\n }\r\n }, [supplementsPayload]);\r\n\r\n // after sort ends derive new order, then dispatch results to redux\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const newSortOrder = arrayMoveImmutable(uploadList, oldIndex, newIndex);\r\n dispatch(reorderSupplements(newSortOrder));\r\n\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n setValues({\r\n ...values,\r\n Supplements: { ...newValues },\r\n });\r\n };\r\n\r\n const { getRootProps, getInputProps } = useDropzone({ accept: allowableFiles, maxFiles: maxCount, onDrop: handleFileDrop });\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nSupplementGrid.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n supplementsPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default SupplementGrid;\r\n","/* eslint-disable no-param-reassign */\r\n\r\nimport { useEffect, useState } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport apiService from '@services/apiService';\r\nimport {\r\n addNewClientPhoto,\r\n addFlexRulePhoto,\r\n addEditPhotoResult,\r\n addApiUploadResult,\r\n softDeletePhoto,\r\n clearPhotoCollection,\r\n removeEditPhoto,\r\n restorePhotoMetaByKey,\r\n} from '@redux/modules/photo';\r\n\r\nimport {\r\n selectPhotoMetaCollection,\r\n selectPhotosToUpload,\r\n selectPhotoToEdit,\r\n selectMaxSortOrder,\r\n} from '@redux/selectors/PhotoSelector';\r\nimport photoPlaceholder from '@images/image-not-available.png';\r\nimport API from '../config';\r\n\r\nconst usePhotoManager = () => {\r\n const dispatch = useDispatch();\r\n\r\n // retrieves entire collection\r\n const photoMetaCollection = useSelector(selectPhotoMetaCollection);\r\n\r\n // retrieve only photos without externalURL\r\n const photosToUpload = useSelector(selectPhotosToUpload);\r\n\r\n const editPhotoMeta = useSelector(selectPhotoToEdit);\r\n const maxSort = useSelector(selectMaxSortOrder);\r\n // tracks by key which photos have been passed to the api already.\r\n const [photoUploadStatus, setPhotoUploadStatus] = useState([]);\r\n\r\n const getPhotoMetaObject = () => ({\r\n key: null,\r\n id: null,\r\n originalURL: null,\r\n srcURL: null,\r\n cropperSrcURL: null,\r\n externalURL: null,\r\n SortOrder: null,\r\n IsDeleted: null,\r\n IsUploaded: false,\r\n IsError: false,\r\n Description: null,\r\n thumbailSrcURL: null,\r\n thumbExternalURL: null,\r\n cropPointer: null,\r\n cropperResult: {\r\n file: null,\r\n blobURL: null,\r\n },\r\n dropZoneMeta: {\r\n file: null,\r\n blobURL: null,\r\n },\r\n apiMeta: {\r\n assetType: null,\r\n displayName: null,\r\n extension: null,\r\n isError: null,\r\n newName: null,\r\n path: null,\r\n url: null,\r\n },\r\n formikMeta: {\r\n URL: null,\r\n SortOrder: null,\r\n IsDeleted: null,\r\n IsLive: null,\r\n IsPreload: null,\r\n Description: null,\r\n MediaType: null,\r\n MediaCategory: null,\r\n },\r\n flexMeta: {\r\n UniqueID: null,\r\n ParentID: null,\r\n SortOrder: null,\r\n IsDeleted: null,\r\n Description: null,\r\n MediaCategory: null,\r\n MediaKeyNumeric: null,\r\n MediaType: null,\r\n ModificationTimestamp: null,\r\n Order: null,\r\n OriginatingSystemMediaKey: null,\r\n OriginatingSystemName: null,\r\n PreferredPhotoYN: null,\r\n ResourceName: null,\r\n Path: null,\r\n URL: null,\r\n ResourceRecordKeyNumeric: null,\r\n ModifiedDate: null,\r\n IsLive: null,\r\n LongDescription: null,\r\n ParentType: null,\r\n OriginatingSystemParent: null,\r\n IsPreload: null,\r\n fullSizeURL: null,\r\n InitialSortOrder: null,\r\n },\r\n });\r\n\r\n const createThumbNailFile = photoMetaFilePtr => {\r\n let thumbnail;\r\n const fileName = photoMetaFilePtr.path ?? photoMetaFilePtr.name;\r\n const name = fileName.replace(/(\\.[\\w\\d_-]+)$/i, '_thumbnail$1');\r\n thumbnail = new File([photoMetaFilePtr], name, {\r\n type: photoMetaFilePtr.type,\r\n });\r\n thumbnail = Object.assign(thumbnail, {\r\n length: photoMetaFilePtr.length,\r\n });\r\n return thumbnail;\r\n };\r\n\r\n const uuidRegexPattern = /[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}/i;\r\n const createThumbnailExternalLink = photoMeta => {\r\n const externalFullSizeUrl = photoMeta.externalURL;\r\n if (externalFullSizeUrl) {\r\n if (!externalFullSizeUrl.match(uuidRegexPattern)) return externalFullSizeUrl; // thumbnail image does not exist\r\n return externalFullSizeUrl.replace(/(\\.[\\w\\d_-]+)$/i, '_thumbnail$1');\r\n }\r\n return '';\r\n };\r\n\r\n const postFormFiles = async (formFiles, photoMeta) => {\r\n /*\r\n +++++++ Base API return\r\n assetType: \"image\"\r\n photoMeta.apiMeta.displayName: \"cat1_thumbnail.jpg\"\r\n photoMeta.apiMeta.extension: \".jpg\"\r\n photoMeta.apiMeta.isError: false\r\n photoMeta.apiMeta.newName: \"https://dev-pillarnineonmarket.s3.ca-central-1.amazonaws.com/8f46d3eb63af4315b7bff500cceff7d8_thumbnail.jpg\"\r\n photoMeta.apiMeta.path: \"8f46d3eb63af4315b7bff500cceff7d8_thumbnail.jpg\"\r\n photoMeta.apiMeta.url: \"https://dev-pillarnineonmarket.s3.ca-central-1.amazonaws.com/8f46d3eb63af4315b7bff500cceff7d8_thumbnail.jpg\"\r\n */\r\n try {\r\n const result = await apiService.Photos.postImage(formFiles);\r\n result.forEach(res => {\r\n if (res.path.includes('_thumbnail')) {\r\n photoMeta.thumbExternalURL = res.url;\r\n return;\r\n }\r\n photoMeta.IsUploaded = true;\r\n photoMeta.externalURL = res.url;\r\n photoMeta.apiMeta.assetType = res.assetType;\r\n photoMeta.apiMeta.displayName = res.displayName;\r\n photoMeta.apiMeta.extension = res.extension;\r\n photoMeta.apiMeta.isError = res.isError;\r\n photoMeta.apiMeta.newName = res.newName;\r\n photoMeta.apiMeta.path = res.path;\r\n photoMeta.apiMeta.url = res.url;\r\n });\r\n // write photoMeta back to redux.\r\n dispatch(addApiUploadResult(photoMeta));\r\n } catch (error) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: usePhotoManager postFormFiles', error);\r\n photoMeta.IsError = true;\r\n if (photoMeta.cropPointer) {\r\n photoMeta.IsDeleted = true;\r\n dispatch(restorePhotoMetaByKey(photoMeta.cropPointer));\r\n } else {\r\n dispatch(addApiUploadResult(photoMeta));\r\n }\r\n }\r\n };\r\n\r\n const uploadPhoto = async photoMeta => {\r\n try {\r\n const metaFile = photoMeta.cropperResult.file ?? photoMeta.dropZoneMeta.file;\r\n const thumbnail = createThumbNailFile(metaFile);\r\n const formFiles = new FormData();\r\n formFiles.append('cropperImageList', metaFile);\r\n formFiles.append('cropperImageList', thumbnail);\r\n await postFormFiles(formFiles, photoMeta); // dispatch key w/ formfile to maintain object provenance\r\n formFiles.delete('cropperImageList');\r\n } catch (e) {\r\n // eslint-disable-next-line no-console\r\n console.error(e);\r\n }\r\n };\r\n\r\n // set upload flags to track file uploads\r\n // this runs 4 times for 1 photo.\r\n useEffect(() => {\r\n if (photosToUpload && photosToUpload.length > 0) {\r\n photosToUpload.forEach(pm => {\r\n if (!photoUploadStatus.find(status => status.key === pm.key)) {\r\n const newStatus = {\r\n key: pm.key,\r\n toUpload: true,\r\n uploadComplete: false,\r\n reUpload: false,\r\n };\r\n setPhotoUploadStatus([...photoUploadStatus, newStatus]);\r\n }\r\n });\r\n }\r\n }, [photosToUpload, photoUploadStatus]);\r\n\r\n // upload photos based on status\r\n useEffect(() => {\r\n if (photoUploadStatus.length > 0) {\r\n const needToProcess = photoUploadStatus.filter(pU => pU.toUpload);\r\n if (needToProcess.length > 0) {\r\n needToProcess.forEach(async processKey => {\r\n const targetPM = photoMetaCollection.find(pm => pm.key === processKey.key);\r\n if (targetPM) await uploadPhoto(targetPM);\r\n });\r\n const processedStatuses = photoUploadStatus.map(pU => {\r\n const element = pU;\r\n const status = needToProcess.find(n => n.key === pU.key);\r\n if (!status) return element;\r\n element.toUpload = false;\r\n element.uploadComplete = true;\r\n return element;\r\n });\r\n setPhotoUploadStatus(processedStatuses);\r\n }\r\n }\r\n }, [photoUploadStatus]);\r\n\r\n useEffect(() => {\r\n if (photoMetaCollection.length === 0 && photoUploadStatus.length !== 0) setPhotoUploadStatus([]);\r\n }, [photoMetaCollection]);\r\n\r\n // index passed to handle bulk drop of photos, as only the dropzone will know how many files are coming in.\r\n const addNewDropzonePhoto = (photo, index) => {\r\n /* default file params.\r\n {\r\n path: \"cat1.jpg\"\r\n lastModified: 1651087606513\r\n lastModifiedDate: Wed Apr 27 2022 13:26:46 GMT-0600 (Mountain Daylight Time) {}\r\n name: \"cat1.jpg\"\r\n size: 5256\r\n type: \"image/jpeg\"\r\n webkitRelativePath: \"\"\r\n }\r\n */\r\n const newDzPhoto = getPhotoMetaObject();\r\n const key = uuidv4();\r\n newDzPhoto.key = key;\r\n newDzPhoto.id = key;\r\n newDzPhoto.SortOrder = maxSort + index + 1;\r\n newDzPhoto.IsDeleted = false;\r\n newDzPhoto.dropZoneMeta.file = photo;\r\n // need to convert to a safer data ref for redux storage.\r\n if (photo.blobURL) URL.revokeObjectURL(photo.blobURL);\r\n // URL.revokeObjectURL(photo.blobURL);\r\n dispatch(addNewClientPhoto(newDzPhoto));\r\n };\r\n\r\n const addNewFlexRulePhoto = photo => {\r\n const newFrPhoto = getPhotoMetaObject();\r\n const key = uuidv4();\r\n if (!photo.URL) newFrPhoto.IsError = true;\r\n else newFrPhoto.IsUploaded = true;\r\n newFrPhoto.key = key;\r\n newFrPhoto.id = key;\r\n newFrPhoto.SortOrder = photo.SortOrder;\r\n newFrPhoto.IsDeleted = photo.IsDeleted;\r\n newFrPhoto.Description = photo.Description;\r\n newFrPhoto.flexMeta = { ...photo };\r\n newFrPhoto.externalURL = photo.URL;\r\n newFrPhoto.thumbExternalURL = createThumbnailExternalLink(newFrPhoto);\r\n dispatch(addFlexRulePhoto(newFrPhoto));\r\n };\r\n\r\n // const createFileFromUrl = async (dataUrl, name) => fetch(dataUrl).then(r => r.blob()).then(blobFile => new File([blobFile], `${name}.png`, { type: blobFile.type }));\r\n\r\n const getPhotoFileFromApi = async externalURL => {\r\n try {\r\n const response = await apiService.Photos.getSingleImage(externalURL);\r\n return URL.createObjectURL(response);\r\n } catch (er) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: usePhotoManager getPhotoFileFromApi', er);\r\n return photoPlaceholder;\r\n }\r\n };\r\n\r\n const addEditPhotoMeta = (metaSource, cropperBlob) => {\r\n // const cropMeta = deriveCropMetaFromOriginal(editedPhotoMeta);\r\n\r\n const originMeta = metaSource;\r\n const cropMeta = getPhotoMetaObject();\r\n // const originMeta = photoMeta;\r\n const newKey = uuidv4(); // create new key to hold original photo;\r\n cropMeta.key = newKey;\r\n cropMeta.id = newKey;\r\n cropMeta.SortOrder = originMeta.SortOrder;\r\n cropMeta.IsDeleted = originMeta.IsDeleted;\r\n cropMeta.Description = originMeta.Description;\r\n cropMeta.cropPointer = originMeta.key; // point to original to use on reset\r\n\r\n originMeta.IsDeleted = true;\r\n const name = originMeta.Description ?? originMeta.key;\r\n cropMeta.cropperResult.blobURL = cropperBlob;\r\n\r\n dispatch(addEditPhotoResult(cropMeta, name));\r\n dispatch(softDeletePhoto(originMeta));\r\n URL.revokeObjectURL(cropMeta.cropperResult.blobURL);\r\n URL.revokeObjectURL(cropperBlob);\r\n };\r\n\r\n const getFullImageFromMeta = photoMeta => `${API.URL}Image/GetAwsFile?file=${photoMeta.externalURL}`;\r\n\r\n const getThumbFromMeta = photoMeta => `${API.URL}Image/GetAwsFile?file=${photoMeta.thumbExternalURL}`;\r\n\r\n const markIsDeleted = photoMeta => {\r\n const deletedPhotoMeta = photoMeta;\r\n deletedPhotoMeta.IsDeleted = true;\r\n dispatch(softDeletePhoto(deletedPhotoMeta));\r\n };\r\n\r\n const getPhotoToEdit = async () => {\r\n if (editPhotoMeta) {\r\n editPhotoMeta.originalURL = getFullImageFromMeta(editPhotoMeta);\r\n editPhotoMeta.cropperSrcURL = await getPhotoFileFromApi(editPhotoMeta.externalURL);\r\n return editPhotoMeta;\r\n }\r\n return null;\r\n };\r\n const removeEditPhotoMeta = () => dispatch(removeEditPhoto());\r\n\r\n const dispatchClearPhotoCollection = () => dispatch(clearPhotoCollection());\r\n\r\n return {\r\n addNewDropzonePhoto,\r\n addNewFlexRulePhoto,\r\n addEditPhotoMeta,\r\n\r\n dispatchClearPhotoCollection,\r\n getPhotoFileFromApi,\r\n getFullImageFromMeta,\r\n getThumbFromMeta,\r\n getPhotoToEdit,\r\n maxSort,\r\n removeEditPhotoMeta,\r\n markIsDeleted,\r\n };\r\n};\r\n\r\nexport default usePhotoManager;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst Edit = ({ onEditClicked, item, isDisabled = false }) => {\r\n const handleEditClick = () => onEditClicked(item);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n {statusSupplement?.errorMessage && \r\n \r\n
\r\n\r\n Drag 'n' drop your supplement files here, or click to select\r\n them manually.\r\n
\r\n\r\n Press 'Ctrl' or ⌘ to multi-select\r\n
\r\n{statusSupplement.errorMessage}
}\r\n \r\n {dynamicOrder\r\n ? item?.SortOrder\r\n : item.InitialSortOrder}\r\n
\r\n \r\n {image ? (\r\n <>\r\n
\r\n \r\n )}\r\n >\r\n {image\r\n ? (\r\n
\r\n )}\r\n \r\n Loading...\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n },\r\n);\r\n\r\nPhoto.propTypes = {\r\n isSelected: PropTypes.bool,\r\n className: PropTypes.string,\r\n color: PropTypes.string,\r\n dragOverlay: PropTypes.bool,\r\n dragging: PropTypes.bool,\r\n disabled: PropTypes.string,\r\n fadeIn: PropTypes.bool,\r\n height: PropTypes.string,\r\n listeners: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n onSelect: PropTypes.func,\r\n isDropped: PropTypes.bool,\r\n id: PropTypes.string,\r\n index: PropTypes.number,\r\n item: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n sorting: PropTypes.bool,\r\n style: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n transition: PropTypes.string,\r\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n containerId: PropTypes.string,\r\n getIndex: PropTypes.func,\r\n handle: PropTypes.bool,\r\n renderItem: PropTypes.arrayOf(PropTypes.string, PropTypes.shape()),\r\n // onRemove: PropTypes.func,\r\n // onEditClicked: PropTypes.func,\r\n transform: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n wrapperStyle: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n\r\n};\r\n\r\nexport default Photo;\r\n","import React, { useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n// import { useSelector } from 'react-redux';\r\n\r\nimport {\r\n useSortable,\r\n} from '@dnd-kit/sortable';\r\n\r\nimport Photo from './Photo';\r\n\r\nconst useMountStatus = () => {\r\n const [isMounted, setIsMounted] = useState(false);\r\n\r\n useEffect(() => {\r\n const timeout = setTimeout(() => setIsMounted(true), 500);\r\n\r\n return () => clearTimeout(timeout);\r\n }, []);\r\n\r\n return isMounted;\r\n};\r\n\r\nconst SortableItem = ({\r\n item,\r\n isSelected,\r\n onSelect,\r\n // onEditClicked,\r\n // onRemove,\r\n isDropped,\r\n id,\r\n index,\r\n handle,\r\n renderItem,\r\n style,\r\n containerId,\r\n getIndex,\r\n wrapperStyle,\r\n}) => {\r\n // const isBusy = useSelector(state => state?.listing?.isBusy ?? false);\r\n const {\r\n setNodeRef,\r\n listeners,\r\n isDragging,\r\n isSorting,\r\n over,\r\n overIndex,\r\n transform,\r\n transition,\r\n } = useSortable({\r\n id: item.id,\r\n // disabled: isBusy,\r\n });\r\n const mounted = useMountStatus();\r\n const mountedWhileDragging = isDragging && !mounted;\r\n const newlisteners = {\r\n ...listeners,\r\n onClick: event => {\r\n onSelect(item, event.ctrlKey);\r\n },\r\n };\r\n const className = classNames(\r\n isSelected && 'selectedItem',\r\n isDropped && 'droppedItem',\r\n );\r\n\r\n return (\r\n \r\n \r\n {selectedItems.length}\r\n items\r\n \r\n
\r\n )}\r\n \r\n ) : null}\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nImageDropzone.propTypes = {\r\n photosPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n onRemove: PropTypes.func,\r\n onChange: PropTypes.func,\r\n};\r\n\r\nexport default ImageDropzone;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'react-bootstrap/Button';\r\n\r\nconst CropperController = props => {\r\n const {\r\n cropping, photoToEdit, onCrop, onRemove, onReset, onSave, imageURL, imageFileName,\r\n } = props;\r\n\r\n const handleDeleteClick = () => {\r\n onRemove(photoToEdit);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {status?.errorMessage && \r\n \r\n
\r\n\r\n Drag 'n' drop your photos here, or click to select them\r\n manually.\r\n
\r\n\r\n Press 'Ctrl' or ⌘ to multi-select\r\n
\r\n {values.ListingKeyNumeric !== '' && photosCount > 0 && (\r\n\r\n \r\n \r\n Download All Photos\r\n \r\n
\r\n )}\r\n {photosCount === 0 && (\r\n \r\n \r\n Please note that photos must be under 50 MB each in size.\r\n
\r\n
\r\n By uploading photos here, you agree to grant Pillar 9™ ownership of said photos, to do with as Pillar 9™ sees fit. You further represent that you have the right to grant Pillar 9™ such rights (check with your photographer).\r\n
{status.errorMessage}
}\r\n \r\n {cropping && (\r\n \r\n \r\n Download\r\n \r\n
\r\n );\r\n};\r\n\r\nCropperController.propTypes = {\r\n cropping: PropTypes.bool,\r\n imageURL: PropTypes.string,\r\n imageFileName: PropTypes.string,\r\n photoToEdit: PropTypes.oneOfType([PropTypes.string, PropTypes.shape()]),\r\n onCrop: PropTypes.func,\r\n onRemove: PropTypes.func,\r\n onReset: PropTypes.func,\r\n onSave: PropTypes.func,\r\n};\r\n\r\nexport default CropperController;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\n\r\nimport Cropper from 'react-cropper';\r\nimport 'cropperjs/dist/cropper.css';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\nimport { selectPhotoToEdit } from '@redux/selectors/PhotoSelector';\r\nimport { addEditPhotoResult, removeEditPhoto, softDeletePhoto } from '@redux/modules/photo';\r\nimport Modal from '@components/smartAdminUI/Modal';\r\n\r\nimport CropperController from './cropperController/CropperController';\r\n\r\nconst ImageCropperModal = () => {\r\n const dispatch = useDispatch();\r\n const cropperRef = useRef(null);\r\n const [cropping, setCropping] = useState(false); // whether cropper is in the middle of cropping\r\n const [cropData, setCropData] = useState(null); // cropped image object\r\n const [cropper, setCropper] = useState(null); // cropper js object\r\n const photoToEdit = useSelector(selectPhotoToEdit); // gets photo key for editing out of redux\r\n\r\n const [descriptionFieldValue, setDescriptionFieldValue] = useState(''); // value for description text box\r\n const [displayImageSrc, setDisplayImageSrc] = useState(''); // Full size image for cropper to work with\r\n const [imageFileName, setImageFileName] = useState('');\r\n\r\n // set description from redux\r\n useEffect(() => {\r\n if (photoToEdit) {\r\n setDescriptionFieldValue(photoToEdit.Description);\r\n if (photoToEdit.cropperPhoto && typeof (photoToEdit.cropperPhoto) !== 'string') {\r\n const displaySrc = URL.createObjectURL(photoToEdit.cropperPhoto);\r\n setDisplayImageSrc(displaySrc);\r\n setImageFileName(`${photoToEdit.key}.jpeg`);\r\n }\r\n }\r\n }, [photoToEdit]);\r\n\r\n // keep modal state in unison with cropper state\r\n useEffect(() => {\r\n if (cropper && cropper.options.dragMode === 'crop') {\r\n setCropping(true);\r\n }\r\n }, [cropper]);\r\n\r\n // writes orientation and scale changes to canvas\r\n const setTransformData = () => {\r\n const canvasData = cropper.getCanvasData();\r\n if (canvasData) {\r\n cropper.setCropBoxData(canvasData);\r\n setCropData(cropper.getCroppedCanvas().toDataURL());\r\n }\r\n };\r\n\r\n // description modification UI -> formik\r\n const handleBlur = e => {\r\n if (!photoToEdit) return;\r\n if (photoToEdit.Description === e.target.value) return;\r\n photoToEdit.Description = e.target.value;\r\n setTransformData();\r\n };\r\n\r\n // description modification formik -> UI\r\n const handleChange = e => {\r\n setDescriptionFieldValue(e.target.value);\r\n setTransformData();\r\n };\r\n\r\n const onRotateLeft = () => {\r\n if (!cropper) return;\r\n cropper.rotate(-90);\r\n setTransformData();\r\n };\r\n\r\n const onRotateRight = () => {\r\n if (!cropper) return;\r\n cropper.rotate(90);\r\n setTransformData();\r\n };\r\n\r\n const onZoomIn = () => {\r\n if (!cropper) return;\r\n cropper.crop();\r\n cropper.zoom(0.1);\r\n setTransformData();\r\n };\r\n\r\n const onZoomOut = () => {\r\n if (!cropper) return;\r\n cropper.crop();\r\n cropper.zoom(-0.1);\r\n setTransformData();\r\n };\r\n\r\n const onFlipH = () => {\r\n if (!cropper) return;\r\n cropper.scaleX(-cropper.getData().scaleX || 1);\r\n setTransformData();\r\n };\r\n\r\n const onFlipV = () => {\r\n if (!cropper) return;\r\n cropper.scaleY(-cropper.getData().scaleY || 1);\r\n setTransformData();\r\n };\r\n\r\n const onCropImage = action => {\r\n if (!cropper) return;\r\n if (cropper !== undefined && action === 'move') {\r\n cropper.setDragMode('move');\r\n setCropping(false);\r\n } else {\r\n cropper.setDragMode('crop');\r\n setCropping(true);\r\n }\r\n };\r\n\r\n const onSave = async () => {\r\n if (cropData) {\r\n dispatch(addEditPhotoResult(photoToEdit, cropData));\r\n setCropData(URL.revokeObjectURL(cropData));\r\n setCropping(false);\r\n setCropData(null);\r\n dispatch(removeEditPhoto());\r\n }\r\n };\r\n\r\n const onReset = () => {\r\n cropper.reset();\r\n cropper.clear();\r\n if (cropData) setCropData(URL.revokeObjectURL(cropData));\r\n setCropData(null);\r\n setCropping(false);\r\n };\r\n\r\n // load crop result\r\n const onCrop = () => {\r\n if (!cropper) return;\r\n setCropData(cropper.getCroppedCanvas().toDataURL());\r\n setCropping(false);\r\n cropper.setDragMode('move');\r\n };\r\n\r\n const closeClicked = () => {\r\n if (!cropper) return;\r\n if (cropData) setCropData(URL.revokeObjectURL(cropData));\r\n setCropData(null);\r\n setCropping(false);\r\n dispatch(removeEditPhoto());\r\n };\r\n\r\n const onRemove = () => {\r\n if (!cropper) return;\r\n if (cropData) setCropData(URL.revokeObjectURL(cropData));\r\n dispatch(softDeletePhoto(photoToEdit));\r\n dispatch(removeEditPhoto());\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n \r\n OK\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n Delete\r\n \r\n \r\n \r\n Save\r\n \r\n
\r\n \r\n {photoToEdit && (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ImageCropperModal;\r\n","import React, {\r\n useEffect, useMemo,\r\n} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nimport {\r\n setRepeatableSectionCount,\r\n} from '@redux/modules/listing';\r\nimport { selectPhotoMetaCollection } from '@redux/selectors/PhotoSelector';\r\nimport { clearPhotoCollection } from '@redux/modules/photo';\r\nimport 'cropperjs/dist/cropper.css';\r\nimport ImageDropZone from './imageDropZone/ImageDropZone';\r\nimport ImageCropperModal from './imageCropperModal/ImageCropperModal';\r\n\r\nconst ImageCropper = ({ fields, photosPayload }) => {\r\n const dispatch = useDispatch();\r\n const { values, setValues } = useFormikContext();\r\n const photoCollection = useSelector(selectPhotoMetaCollection);\r\n\r\n // clears photo collection on unmount; note the nested anonymous function\r\n useEffect(() => () => {\r\n dispatch(clearPhotoCollection());\r\n }, []);\r\n\r\n const transformFields = currentFields => {\r\n const newFields = [];\r\n if (currentFields?.fields) {\r\n currentFields[0].fields.forEach(field => { newFields[field.FieldName] = ''; });\r\n }\r\n return newFields;\r\n };\r\n\r\n const fieldNames = useMemo(() => transformFields(fields), [fields]);\r\n\r\n // object structure to write to formik values.Photos\r\n const createFormikEntry = photoMeta => {\r\n const formikEntry = {\r\n key: photoMeta.key,\r\n id: photoMeta.id,\r\n URL: photoMeta.externalURL,\r\n UniqueID: photoMeta.flexMeta.UniqueID ?? null,\r\n ParentID: photoMeta.flexMeta.ParentID ?? null,\r\n PreferredPhotoYN: photoMeta.flexMeta.PreferredPhotoYN ?? null,\r\n ResourceName: photoMeta.flexMeta.ResourceName ?? null,\r\n SortOrder: photoMeta.SortOrder,\r\n IsDeleted: photoMeta.IsDeleted,\r\n IsLive: photoMeta.flexMeta.IsLive ?? null,\r\n IsPreload: photoMeta.flexMeta.IsPreload ?? null,\r\n Description: photoMeta.Description,\r\n MediaType: photoMeta.flexMeta.MediaType ?? null,\r\n MediaCategory: photoMeta.flexMeta.MediaCategory ?? null,\r\n };\r\n return formikEntry;\r\n };\r\n\r\n // writes redux photo collection to formik.\r\n useEffect(() => {\r\n if (photoCollection) {\r\n let formikPhotos = values?.Photos ?? {};\r\n if (photoCollection.length === 0) formikPhotos = {};\r\n photoCollection.forEach(dPhoto => {\r\n const formikEntry = createFormikEntry(dPhoto);\r\n if (formikPhotos?.[formikEntry.key] && formikPhotos?.[formikEntry.key] !== formikEntry) {\r\n formikPhotos[formikEntry.key] = { ...fieldNames, ...formikEntry };\r\n } else if (!formikPhotos?.[formikEntry.key]) formikPhotos[formikEntry.key] = formikEntry;\r\n });\r\n const formikValues = values;\r\n formikValues.Photos = formikPhotos;\r\n setValues(formikValues);\r\n dispatch(setRepeatableSectionCount(formikValues));\r\n }\r\n }, [photoCollection]);\r\n\r\n return (\r\n <>\r\n \r\n setCropper(instance)}\r\n dragMode=\"none\"\r\n guides\r\n />\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n Description\r\n \r\n
\r\n \r\n
\r\n \r\n Crop}\r\n >\r\n onCropImage('drag')}\r\n >\r\n \r\n \r\n \r\n Zoom In}\r\n >\r\n \r\n \r\n \r\n \r\n Zoom Out}\r\n >\r\n \r\n \r\n \r\n \r\n Rotate Left}\r\n >\r\n \r\n \r\n \r\n \r\n Rotate Right}\r\n >\r\n \r\n \r\n \r\n \r\n Fip Horizontal}\r\n >\r\n \r\n \r\n \r\n \r\n Fip Vertical}\r\n >\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {roomStatus?.RoomLength?.errorMessage && \r\n
\r\n \r\n {roomValues?.RoomLengthWidthUnits === 'F' ? 'ft' : 'm'}\r\n
\r\n {roomValues?.RoomLengthWidthUnits === 'F' && (\r\n <>\r\n \r\n {roomValues?.RoomLengthWidthUnits === 'F' ? 'in' : 'm'}\r\n
\r\n \r\n )}\r\n {roomStatus.RoomLength.errorMessage}
}\r\n \r\n \r\n \r\n
\r\n {roomStatus?.RoomWidth?.errorMessage && \r\n
\r\n \r\n {roomValues?.RoomLengthWidthUnits === 'F' ? 'ft' : 'm'}\r\n
\r\n {roomValues?.RoomLengthWidthUnits === 'F' && (\r\n <>\r\n \r\n {roomValues?.RoomLengthWidthUnits === 'F' ? 'in' : 'm'}\r\n
\r\n \r\n )}\r\n {roomStatus.RoomWidth.errorMessage}
}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nRoomMeasurement.propTypes = {\r\n formik: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(), PropTypes.number, PropTypes.func])),\r\n id: PropTypes.string.isRequired,\r\n handleBlur: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default RoomMeasurement;\r\n","/* eslint-disable jsx-a11y/label-has-associated-control */\r\nimport React, {\r\n forwardRef, useEffect, useMemo, useCallback,\r\n} from 'react';\r\n\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport Select from 'react-select';\r\n\r\nimport {\r\n setRoomValidationResult,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { selectRoomStatusById, selectComboBoxOptions } from '@redux/selectors/FormSelector';\r\n\r\nimport Card from '@components/smartAdminUI/Card';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport styles from '@components/form/formComponents/repeatableRoom/RoomCard.module.css';\r\nimport RoomMeasurement from '@components/form/formComponents/repeatableRoom/RoomMeasurement';\r\n\r\nconst roomRules = window.FlexRule.RuntimeEngine.fromJavaScript('OnePlatform', 'RoomRules');\r\n\r\nconst RoomCard = forwardRef(\r\n ({\r\n attributes,\r\n item,\r\n className,\r\n color,\r\n dragOverlay,\r\n dragging,\r\n disabled,\r\n fadeIn,\r\n handle,\r\n height,\r\n listeners,\r\n renderItem,\r\n sorting,\r\n style,\r\n transition,\r\n transform,\r\n value,\r\n wrapperStyle,\r\n index,\r\n onRemoveRoom,\r\n role,\r\n formik,\r\n id,\r\n ...props\r\n }, ref) => {\r\n const dispatch = useDispatch();\r\n const roomLvlOptions = useSelector(state => selectComboBoxOptions(state, 'RoomLevel'));\r\n const roomTypeOptions = useSelector(state => selectComboBoxOptions(state, 'RoomType'));\r\n const values = formik?.values?.Rooms[id];\r\n const roomLvl = useMemo(() => roomLvlOptions.find(opt => opt.value === values.RoomLevel), [values, roomLvlOptions]);\r\n const roomType = useMemo(() => roomTypeOptions.find(opt => opt.value === values.RoomType), [values, roomTypeOptions]);\r\n\r\n const roomStatus = useSelector(state => selectRoomStatusById(state, id));\r\n // validates total room, then sets the results in redux\r\n const validateRoomField = () => {\r\n if (!values.IsDeleted) {\r\n const res = roomRules.run(values);\r\n const { fieldValidationResult } = res.context.variableContainer;\r\n dispatch(setRoomValidationResult(id, fieldValidationResult));\r\n }\r\n };\r\n\r\n // sets field as touched, then triggers validation on field\r\n const handleBlur = useCallback(fieldName => () => {\r\n formik.setFieldTouched(fieldName, true);\r\n validateRoomField();\r\n }, [values]);\r\n\r\n const lvlOnChange = opt => {\r\n formik.setFieldValue(`Rooms.[${id}].RoomLevel`, opt?.value);\r\n };\r\n\r\n const typeOnChange = opt => {\r\n formik.setFieldValue(`Rooms.[${id}].RoomType`, opt?.value);\r\n };\r\n\r\n useEffect(() => {\r\n if (!dragOverlay) {\r\n return undefined;\r\n }\r\n\r\n document.body.style.cursor = 'grabbing';\r\n\r\n return () => {\r\n document.body.style.cursor = '';\r\n };\r\n }, [dragOverlay]);\r\n\r\n const removeRoom = () => {\r\n onRemoveRoom(id);\r\n };\r\n return (renderItem && item) ? (\r\n renderItem({\r\n key: id,\r\n dragOverlay: Boolean(dragOverlay),\r\n dragging: Boolean(dragging),\r\n sorting: Boolean(sorting),\r\n index,\r\n fadeIn: Boolean(fadeIn),\r\n listeners,\r\n onRemoveRoom,\r\n ref,\r\n style,\r\n transform,\r\n transition,\r\n value,\r\n })\r\n ) : (\r\n <>\r\n \r\n \r\n Type\r\n \r\n
\r\n {roomStatus.RoomType.errorMessage}
)}\r\n \r\n \r\n Level\r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n },\r\n);\r\n\r\nRoomCard.propTypes = {\r\n attributes: PropTypes.string,\r\n className: PropTypes.string,\r\n color: PropTypes.string,\r\n dragOverlay: PropTypes.bool,\r\n dragging: PropTypes.bool,\r\n disabled: PropTypes.bool,\r\n fadeIn: PropTypes.bool,\r\n handle: PropTypes.bool,\r\n height: PropTypes.string,\r\n key: PropTypes.string,\r\n listeners: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n id: PropTypes.string.isRequired,\r\n index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n item: PropTypes.arrayOf(PropTypes.string),\r\n renderItem: PropTypes.bool,\r\n sorting: PropTypes.bool,\r\n style: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n transform: PropTypes.bool,\r\n transition: PropTypes.string,\r\n value: PropTypes.string,\r\n wrapperStyle: PropTypes.oneOfType([PropTypes.shape(), PropTypes.array]),\r\n onRemoveRoom: PropTypes.func,\r\n role: PropTypes.string,\r\n formik: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(), PropTypes.number, PropTypes.func])),\r\n};\r\n\r\nexport default RoomCard;\r\n","import React, {\r\n useEffect, useState, useMemo,\r\n} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { createPortal } from 'react-dom';\r\nimport { useDispatch } from 'react-redux';\r\nimport {\r\n closestCenter,\r\n DragOverlay,\r\n DndContext,\r\n defaultDropAnimation,\r\n KeyboardSensor,\r\n PointerSensor,\r\n TouchSensor,\r\n useSensor,\r\n useSensors,\r\n} from '@dnd-kit/core';\r\n\r\nimport {\r\n arrayMove,\r\n useSortable,\r\n SortableContext,\r\n sortableKeyboardCoordinates,\r\n rectSortingStrategy,\r\n} from '@dnd-kit/sortable';\r\n\r\nimport {\r\n deleteRoomValidationResult,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { setRepeatableSectionCount } from '@redux/modules/listing';\r\n\r\nimport Grid from '@components/form/formComponents/imageCropper/imageDropZone/components/Grid';\r\nimport RoomCard from '@components/form/formComponents/repeatableRoom/RoomCard';\r\n\r\nconst defaultDropAnimationConfig = {\r\n ...defaultDropAnimation,\r\n dragSourceOpacity: 0.5,\r\n};\r\n\r\nexport function RoomsGridList({\r\n activationConstraint,\r\n animateLayoutChanges,\r\n adjustScale = false,\r\n collisionDetection = closestCenter,\r\n dropAnimation = defaultDropAnimationConfig,\r\n formik,\r\n getItemStyles = () => ({}),\r\n handle = false,\r\n isDisabled = () => false,\r\n measuring,\r\n modifiers,\r\n renderItem,\r\n strategy = rectSortingStrategy,\r\n useDragOverlay = true,\r\n wrapperStyle = () => ({}),\r\n}) {\r\n const roomValues = formik?.values?.Rooms;\r\n const [items, setItems] = useState(null);\r\n const [activeId, setActiveId] = useState(null);\r\n\r\n const sensors = useSensors(\r\n useSensor(PointerSensor, {\r\n activationConstraint: {\r\n distance: 10,\r\n },\r\n }),\r\n useSensor(TouchSensor, {\r\n activationConstraint,\r\n }),\r\n useSensor(KeyboardSensor, {\r\n coordinateGetter: sortableKeyboardCoordinates,\r\n }),\r\n );\r\n const dispatch = useDispatch();\r\n const entryItems = useMemo(() => {\r\n const arrayOfItems = items ? Object.entries(items) : [];\r\n return arrayOfItems;\r\n }, [items]);\r\n\r\n const getIndex = id => Object.keys(items).findIndex(item => item === id);\r\n const activeIndex = activeId ? getIndex(activeId) : -1;\r\n\r\n useEffect(() => {\r\n if (roomValues) {\r\n setItems(roomValues);\r\n }\r\n }, [roomValues]);\r\n\r\n const onRemoveRoom = id => {\r\n // remove room from formik values\r\n const { [id]: removedValue, ...otherValues } = items;\r\n // otherValues is a dictionary.\r\n // keys are just uid prop\r\n\r\n // eslint-disable-next-line no-param-reassign, no-return-assign\r\n const sortedOthers = Object.values(otherValues).filter(ov => !ov.IsDeleted).sort((ov1, ov2) => ov1.SortOrder - ov2.SortOrder).map((sOv, index) => sOv = { ...sOv, SortOrder: index + 1 });\r\n const otherDict = {};\r\n const newValues = formik.values;\r\n sortedOthers.forEach(sO => {\r\n otherDict[sO.uid] = sO;\r\n newValues.Rooms[sO.uid].SortOrder = sO.SortOrder;\r\n });\r\n setItems({ ...otherDict });\r\n newValues.Rooms[removedValue.uid].IsDeleted = true;\r\n formik.setValues(newValues);\r\n // remove room from formik touched, if it exists\r\n if (formik?.touched?.Rooms?.[id]) {\r\n const { [id]: removedTouched, ...otherTouched } = formik.touched.Rooms;\r\n formik.setTouched({\r\n ...formik.touched,\r\n Rooms: { ...otherTouched },\r\n });\r\n }\r\n // remove room from redux validation\r\n dispatch(setRepeatableSectionCount(newValues));\r\n dispatch(deleteRoomValidationResult(id));\r\n };\r\n\r\n const spliceDict = (dict, startIndex, endIndex) => {\r\n let newDict = [];\r\n const newArr = {};\r\n Object.entries(dict).map(([key]) => newDict.push({ [key]: dict[key] }));\r\n newDict = arrayMove(newDict, startIndex, endIndex);\r\n newDict.map((entry, index) => {\r\n Object.entries(entry).map(([key, value]) => {\r\n newArr[key] = {\r\n ...value,\r\n SortOrder: index + 1,\r\n };\r\n return undefined;\r\n });\r\n return undefined;\r\n });\r\n return newArr;\r\n };\r\n return (\r\n {roomStatus.RoomLevel.errorMessage}
)}\r\n \r\n Rooms\r\n \r\n {roomsCount}\r\n \r\n
\r\n \r\n {roomErrorDimension?.errorMessage &&
\r\n\r\n <>\r\n \r\n {(roomsCount > 2) && (\r\n <>\r\n \r\n
\r\n \r\n )}\r\n
\r\n \r\n )}\r\n {roomErrorDimension.errorMessage}
}\r\n {roomErrorCount?.errorMessage && {roomErrorCount.errorMessage}
}\r\n {roomErrorLevel?.errorMessage && {roomErrorLevel.errorMessage}
}\r\n {roomErrorType?.errorMessage && {roomErrorType.errorMessage}
}\r\n \r\n \r\n
\r\n \r\n Units\r\n \r\n
\r\n { roomsCount === 0 && (\r\n \r\n \r\n Please note that you can use the dropdown above to change units from Imperial to Metric.\r\n
\r\n )}\r\n {!isEmpty(formik.values.Rooms) && (\r\n\r\n \r\n )}\r\n
\r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableOpenHouse = ({ fields, validateFigField, openHousesPayload }) => {\r\n const {\r\n values, setValues, setFieldValue,\r\n } = useFormikContext();\r\n\r\n const statusOpenHouseStatus = useSelector(state => selectStatusByName(state, 'OpenHouseStatus'));\r\n const statusOpenHouseDate = useSelector(state => selectStatusByName(state, 'OpenHouseDate'));\r\n const statusOpenHouseStartTime = useSelector(state => selectStatusByName(state, 'OpenHouseStartTime'));\r\n const statusOpenHouseEndTime = useSelector(state => selectStatusByName(state, 'OpenHouseEndTime'));\r\n const statusOpenHouseType = useSelector(state => selectStatusByName(state, 'OpenHouseType'));\r\n const statusOpenHouseURL = useSelector(state => selectStatusByName(state, 'OpenHouseURL'));\r\n\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'OpenHouses'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const openHousesCount = sectionsPerRepeatableSection.OpenHouses.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.OpenHouses) {\r\n Object.entries(values.OpenHouses).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.OpenHouses]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n openHousesPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n OpenHouseDate: entry.OpenHouseDate,\r\n OpenHouseEndTime: entry.OpenHouseEndTime,\r\n OpenHouseStartTime: entry.OpenHouseStartTime,\r\n OpenHouseStatus: entry.OpenHouseStatus,\r\n OpenHouseRemarks: entry.OpenHouseRemarks,\r\n OpenHouseType: entry.OpenHouseType,\r\n Refreshments: entry.Refreshments,\r\n OpenHouseLiveURL: entry.OpenHouseLiveURL,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (openHousesPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('OpenHouses', {\r\n ...values.OpenHouses,\r\n ...newValues,\r\n });\r\n }\r\n }, [openHousesPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Open Houses Exceeded',\r\n html: `The maximum number of open houses must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addOpenHouse = () => {\r\n if (openHousesCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n OpenHouses: {\r\n ...values.OpenHouses,\r\n [uid]: {\r\n uid,\r\n OpenHouseDate: '',\r\n OpenHouseEndTime: '',\r\n OpenHouseStartTime: '',\r\n OpenHouseStatus: '',\r\n OpenHouseRemarks: '',\r\n OpenHouseType: '',\r\n Refreshments: '',\r\n OpenHouseLiveURL: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.OpenHouses).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n OpenHouses: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addOpenHouse();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusOpenHouseStatus?.errorMessage && {statusOpenHouseStatus.errorMessage}
}\r\n { statusOpenHouseDate?.errorMessage && {statusOpenHouseDate.errorMessage}
}\r\n { statusOpenHouseStartTime?.errorMessage && {statusOpenHouseStartTime.errorMessage}
}\r\n { statusOpenHouseEndTime?.errorMessage && {statusOpenHouseEndTime.errorMessage}
}\r\n { statusOpenHouseType?.errorMessage && {statusOpenHouseType.errorMessage}
}\r\n { statusOpenHouseURL?.errorMessage && {statusOpenHouseURL.errorMessage}
}\r\n \r\n
\r\n {(openHousesCount > MAX) && (\r\n
\r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableParcels = ({ fields, validateFigField, parcelsPayload }) => {\r\n const { values, setValues, setFieldValue } = useFormikContext();\r\n const statusParcels = useSelector(state => selectStatusByName(state, 'Parcels'));\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'Parcels'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const parcelsCount = sectionsPerRepeatableSection.Parcels.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.Parcels) {\r\n Object.entries(values.Parcels).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.Parcels]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n parcelsPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n TitleType: entry.TitleType,\r\n LandWestMeridian: entry.LandWestMeridian,\r\n LandTaxAmount: entry.LandTaxAmount,\r\n LandTownship: entry.LandTownship,\r\n LandSection: entry.LandSection,\r\n LandRange: entry.LandRange,\r\n LandQuarter: entry.LandQuarter,\r\n LandLincNumber: entry.LandLincNumber,\r\n LandAcres: entry.LandAcres,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (parcelsPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('Parcels', {\r\n ...values.Parcels,\r\n ...newValues,\r\n });\r\n }\r\n }, [parcelsPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Parcels Exceeded',\r\n html: `The maximum number of parcels must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addParcel = () => {\r\n if (parcelsCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n Parcels: {\r\n ...values.Parcels,\r\n [uid]: {\r\n uid,\r\n TitleType: '',\r\n LandWestMeridian: '',\r\n LandTaxAmount: '',\r\n LandTownship: '',\r\n LandSection: '',\r\n LandRange: '',\r\n LandQuarter: '',\r\n LandLincNumber: '',\r\n LandAcres: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.Parcels).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n Parcels: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addParcel();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusParcels?.errorMessage && {statusParcels.errorMessage}
}\r\n \r\n
\r\n {(parcelsCount > MAX) && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nRepeatableParcels.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func,\r\n parcelsPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default RepeatableParcels;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport { SortableHandle } from 'react-sortable-hoc';\r\n\r\nimport Card from 'react-bootstrap/Card';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\nimport FormikField from '@components/form/FormikField';\r\n\r\nconst DragHandle = SortableHandle(() => );\r\n\r\nconst DoorCard = ({\r\n file,\r\n sortIndex,\r\n validateFigField,\r\n fieldsList,\r\n}) => {\r\n const { values, setValues } = useFormikContext();\r\n const value = values?.Doors[file.uid];\r\n\r\n const handleDelete = () => {\r\n // update deleted entry\r\n const updated = {\r\n ...values.Doors,\r\n [file.uid]: {\r\n ...file,\r\n IsDeleted: true,\r\n },\r\n };\r\n // recalculate sort order\r\n let index = 0;\r\n Object.entries(updated).forEach(([k]) => {\r\n if (!updated[k].IsDeleted) {\r\n updated[k].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n // set formik state\r\n setValues({\r\n ...values,\r\n Doors: updated,\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableDoors = ({ fields, validateFigField, doorsPayload }) => {\r\n const { values, setValues, setFieldValue } = useFormikContext();\r\n const statusDoors = useSelector(state => selectStatusByName(state, 'Doors'));\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'Doors'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const doorsCount = sectionsPerRepeatableSection.Doors.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.Doors) {\r\n Object.entries(values.Doors).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.Doors]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n doorsPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n DoorDescription: entry.DoorDescription,\r\n DoorHeight: entry.DoorHeight,\r\n DoorType: entry.DoorType,\r\n DoorWeight: entry.DoorWeight,\r\n DoorWidth: entry.DoorWidth,\r\n NumberDoors: entry.NumberDoors,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (doorsPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('Doors', {\r\n ...values.Doors,\r\n ...newValues,\r\n });\r\n }\r\n }, [doorsPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Doors Exceeded',\r\n html: `The maximum number of doors must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addDoor = () => {\r\n if (doorsCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n Doors: {\r\n ...values.Doors,\r\n [uid]: {\r\n uid,\r\n DoorDescription: '',\r\n DoorHeight: '',\r\n DoorType: '',\r\n DoorWeight: '',\r\n DoorWidth: '',\r\n NumberDoors: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.Doors).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n Doors: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addDoor();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusDoors?.errorMessage && {statusDoors.errorMessage}
}\r\n \r\n
\r\n {(doorsCount > MAX) && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nRepeatableDoors.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func,\r\n doorsPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default RepeatableDoors;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\n\r\nimport { SortableHandle } from 'react-sortable-hoc';\r\n\r\nimport Card from 'react-bootstrap/Card';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\nimport FormikField from '@components/form/FormikField';\r\n\r\nconst DragHandle = SortableHandle(() => );\r\n\r\nconst UnitCard = ({\r\n file,\r\n sortIndex,\r\n validateFigField,\r\n fieldsList,\r\n}) => {\r\n const { values, setValues } = useFormikContext();\r\n const value = values?.Units[file.uid];\r\n\r\n const handleDelete = () => {\r\n // update deleted entry\r\n const updated = {\r\n ...values.Units,\r\n [file.uid]: {\r\n ...file,\r\n IsDeleted: true,\r\n },\r\n };\r\n // recalculate sort order\r\n let index = 0;\r\n Object.entries(updated).forEach(([k]) => {\r\n if (!updated[k].IsDeleted) {\r\n updated[k].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n // set formik state\r\n setValues({\r\n ...values,\r\n Units: updated,\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableUnits = ({ fields, validateFigField, unitsPayload }) => {\r\n const {\r\n values, setValues, setFieldValue,\r\n } = useFormikContext();\r\n\r\n const statusUnits = useSelector(state => selectStatusByName(state, 'Units'));\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'Units'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const unitsCount = sectionsPerRepeatableSection.Units.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.Units) {\r\n Object.entries(values.Units).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.Units]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n unitsPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n UnitTypeType: entry.UnitTypeType,\r\n UnitTypeTotalRent: entry.UnitTypeTotalRent,\r\n UnitTypeDescription: entry.UnitTypeDescription,\r\n UnitTypeActualRent: entry.UnitTypeActualRent,\r\n UnitTypeUnitsTotal: entry.UnitTypeUnitsTotal,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (unitsPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('Units', {\r\n ...values.Units,\r\n ...newValues,\r\n });\r\n }\r\n }, [unitsPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'Units Exceeded',\r\n html: `The maximum number of units must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addUnit = () => {\r\n if (unitsCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n Units: {\r\n ...values.Units,\r\n [uid]: {\r\n uid,\r\n UnitTypeType: '',\r\n UnitTypeTotalRent: '',\r\n UnitTypeDescription: '',\r\n UnitTypeActualRent: '',\r\n UnitTypeUnitsTotal: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.Units).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n Units: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addUnit();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusUnits?.errorMessage && {statusUnits.errorMessage}
}\r\n \r\n
\r\n {(unitsCount > MAX) && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nRepeatableUnits.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func,\r\n unitsPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default RepeatableUnits;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useFormikContext } from 'formik';\r\nimport { SortableHandle } from 'react-sortable-hoc';\r\n\r\nimport Card from 'react-bootstrap/Card';\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\nimport FormikField from '@components/form/FormikField';\r\n\r\nconst DragHandle = SortableHandle(() => );\r\n\r\nconst HistoryCard = ({\r\n file,\r\n sortIndex,\r\n validateFigField,\r\n fieldsList,\r\n}) => {\r\n const { values, setValues } = useFormikContext();\r\n const value = values?.History[file.uid];\r\n\r\n const handleDelete = () => {\r\n // update deleted entry\r\n const updated = {\r\n ...values.History,\r\n [file.uid]: {\r\n ...file,\r\n IsDeleted: true,\r\n },\r\n };\r\n // recalculate sort order\r\n let index = 0;\r\n Object.entries(updated).forEach(([k]) => {\r\n if (!updated[k].IsDeleted) {\r\n updated[k].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n // set formik state\r\n setValues({\r\n ...values,\r\n History: updated,\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n {fileList.map(([k, file], index) => (\r\n (!file.IsDeleted)\r\n && (\r\n
\r\n));\r\n\r\nconst RepeatableHistory = ({ fields, validateFigField, historyPayload }) => {\r\n const {\r\n values, setValues, setFieldValue,\r\n } = useFormikContext();\r\n\r\n const statusHistory = useSelector(state => selectStatusByName(state, 'History'));\r\n const addClickCounter = useSelector(state => selectSectionAddClicksByName(state, 'History'));\r\n const maxCount = useMemo(() => ((fields[0].repeatableMaxCount) ? fields[0].repeatableMaxCount : 25), [fields]);\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const historyCount = sectionsPerRepeatableSection.History.length;\r\n\r\n const fileList = useMemo(() => {\r\n const array = [];\r\n if (values.History) {\r\n Object.entries(values.History).forEach(([k, file]) => {\r\n if (!file.IsDeleted) {\r\n array.push([k, file]);\r\n }\r\n });\r\n }\r\n return array;\r\n }, [values?.History]);\r\n\r\n const fieldsList = useMemo(() => {\r\n const array = [];\r\n fields.forEach(field => {\r\n if (whiteList.includes(field.FieldName)) {\r\n array.push(field);\r\n }\r\n });\r\n return array;\r\n }, [fields]);\r\n\r\n const buildFormikValues = () => {\r\n const newValues = {};\r\n let index = 0;\r\n historyPayload.sort((a, b) => a.SortOrder - b.SortOrder).forEach(entry => {\r\n const uid = uuidv4(); // keep this an unique string that cannot be converted to a number (prevents keys reordering)\r\n newValues[uid] = {\r\n uid,\r\n UniqueID: entry.UniqueID,\r\n OriginatingSystemTimestamp: entry.OriginatingSystemTimestamp,\r\n EffectiveDate: entry.EffectiveDate,\r\n MlsChangeType: entry.MlsChangeType,\r\n PreviousValue: entry.PreviousValue,\r\n NewValue: entry.NewValue,\r\n DOM: entry.DOM,\r\n SortOrder: entry.SortOrder,\r\n IsDeleted: entry.IsDeleted,\r\n IsLive: entry.IsLive,\r\n };\r\n // ensure correct sort order\r\n if (!entry.IsDeleted) {\r\n newValues[uid].SortOrder = index + 1;\r\n index += 1;\r\n }\r\n });\r\n return newValues;\r\n };\r\n\r\n useEffect(() => {\r\n if (historyPayload?.length) {\r\n const newValues = buildFormikValues();\r\n setFieldValue('History', {\r\n ...values.History,\r\n ...newValues,\r\n });\r\n }\r\n }, [historyPayload]);\r\n\r\n const displayMaxCountExceedMessage = () => Swal.fire({\r\n position: 'center',\r\n title: 'History Exceeded',\r\n html: `The maximum number of history must not exceed ${maxCount}.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n showConfirmButton: false,\r\n timer: 5000,\r\n });\r\n\r\n const addHistory = () => {\r\n if (historyCount + 1 > maxCount) {\r\n displayMaxCountExceedMessage();\r\n return;\r\n }\r\n\r\n const uid = uuidv4();\r\n setValues({\r\n ...values,\r\n History: {\r\n ...values.History,\r\n [uid]: {\r\n uid,\r\n OriginatingSystemTimestamp: '',\r\n EffectiveDate: '',\r\n MlsChangeType: '',\r\n PreviousValue: '',\r\n NewValue: '',\r\n DOM: '',\r\n SortOrder: fileList.length + 1, // fileList excludes deleted entries\r\n IsDeleted: false,\r\n IsLive: false,\r\n },\r\n },\r\n });\r\n };\r\n\r\n // after sort ends derive new order, then set formik state\r\n const onSortEnd = ({ oldIndex, newIndex }) => {\r\n const sortedArray = arrayMoveImmutable(fileList, oldIndex, newIndex);\r\n let newValues = {};\r\n sortedArray.forEach((file, index) => {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n SortOrder: index + 1,\r\n },\r\n };\r\n });\r\n // preserve deleted entries - excluded from fileList\r\n Object.entries(values.History).forEach(file => {\r\n if (file[1].IsDeleted) {\r\n newValues = {\r\n ...newValues,\r\n [file[0]]: {\r\n ...file[1],\r\n },\r\n };\r\n }\r\n });\r\n setValues({\r\n ...values,\r\n History: { ...newValues },\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (addClickCounter) {\r\n addHistory();\r\n }\r\n }, [addClickCounter]);\r\n\r\n return (\r\n <>\r\n { statusHistory?.errorMessage && {statusHistory.errorMessage}
}\r\n \r\n
\r\n {(historyCount > MAX) && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nRepeatableHistory.propTypes = {\r\n fields: PropTypes.arrayOf(PropTypes.shape()),\r\n validateFigField: PropTypes.func,\r\n historyPayload: PropTypes.arrayOf(PropTypes.shape()),\r\n};\r\n\r\nexport default RepeatableHistory;\r\n","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n selectListingSelectedDoors,\r\n selectListingSelectedHistory,\r\n selectListingSelectedOpenHouses,\r\n selectListingSelectedParcels,\r\n selectListingSelectedPhotos,\r\n selectListingSelectedRooms,\r\n selectListingSelectedSupplements,\r\n selectListingSelectedUnits,\r\n} from '@redux/selectors/ListingSelector';\r\nimport { selectAgentPhotos } from '@redux/selectors/AgentSelector';\r\nimport Address from './Address';\r\nimport AgentLookup from './agentLookup/AgentLookup';\r\nimport LincNumberGenerator from './lincNumberGenerator/LincNumberGenerator';\r\nimport LocationPlotter from './locationPlotter/LocationPlotter';\r\nimport OfficeLookup from './officeLookup/OfficeLookup';\r\nimport OneDMeasurement from './OneDMeasurement';\r\nimport TwoDMeasurement from './TwoDMeasurement';\r\nimport SupplementGrid from './supplements/SupplementGrid';\r\nimport ImageCropper from '../imageCropper/ImageCropper';\r\nimport RepeatableRoom from '../repeatableRoom/RepeatableRoom';\r\nimport RepeatableOpenHouse from './openHouse/RepeatableOpenHouse';\r\nimport RepeatableParcels from './parcels/RepeatableParcels';\r\nimport RepeatableDoors from './doors/RepeatableDoors';\r\nimport RepeatableUnits from './units/RepeatableUnits';\r\nimport RepeatableHistory from './history/RepeatableHistory';\r\n\r\n// TODO: In the future, test this component alongside with https://github.com/welldone-software/why-did-you-render\r\nconst LayoutGroupWrapper = ({ groupType, resourceType = 'listing', ...props }) => {\r\n let photosPayload;\r\n\r\n const listingPhotos = useSelector(selectListingSelectedPhotos);\r\n const agentPhotos = useSelector(selectAgentPhotos);\r\n if (resourceType === 'listing') photosPayload = listingPhotos;\r\n else photosPayload = agentPhotos;\r\n\r\n const supplementsPayload = useSelector(selectListingSelectedSupplements);\r\n const roomsPayload = useSelector(selectListingSelectedRooms);\r\n const parcelsPayload = useSelector(selectListingSelectedParcels);\r\n const unitsPayload = useSelector(selectListingSelectedUnits);\r\n const doorsPayload = useSelector(selectListingSelectedDoors);\r\n const openHousesPayload = useSelector(selectListingSelectedOpenHouses);\r\n const historyPayload = useSelector(selectListingSelectedHistory);\r\n\r\n switch (groupType) {\r\n case 'Address':\r\n return ;\r\n case 'AgentLookup':\r\n return
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nOfficeLookupActionButtons.propTypes = {\r\n currRow: PropTypes.shape({\r\n UniqueID: PropTypes.number,\r\n }),\r\n officeSelected: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default OfficeLookupActionButtons;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport OfficeLookupActionButtons from '@components/table/actionButtons/OfficeLookupActionButtons';\r\nimport DataTable from '../dataTable';\r\nimport translateColumns, { translateSort } from '../dataTable/dataTranslate';\r\n\r\nconst OfficeLookupTable = ({\r\n displayData,\r\n onOfficeSelect,\r\n isModal = false,\r\n}) => {\r\n const officeSelected = row => onOfficeSelect(row);\r\n\r\n const actionsFormatter = (cell, row) => (\r\n - \r\n {(isFormDataLoaded) ? errors.map(item => (\r\n
\r\n
\r\n );\r\n};\r\n\r\nAutoSaveMessage.propTypes = {\r\n rowLockEntity: PropTypes.shape({\r\n type: PropTypes.string,\r\n id: PropTypes.number,\r\n }),\r\n isAdmin: PropTypes.bool,\r\n recordIsLocked: PropTypes.bool,\r\n checkStatus: PropTypes.func,\r\n onTakeover: PropTypes.func,\r\n onDiscard: PropTypes.func,\r\n displayActions: PropTypes.bool,\r\n lastUpdatedOn: PropTypes.string,\r\n lastCheckedOn: PropTypes.number,\r\n};\r\n\r\nexport default AutoSaveMessage;\r\n","import React, {\r\n useEffect,\r\n useMemo,\r\n useState,\r\n useCallback,\r\n} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Alert from 'react-bootstrap/Alert';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport useInterval from '@hooks/useInterval';\r\n\r\nconst RowLockMessage = ({\r\n rowLockEntity,\r\n message,\r\n lockedBy,\r\n lockedByMeWithinSession,\r\n impersonatedBy,\r\n userName,\r\n isAdmin,\r\n checkStatus = () => null,\r\n onDiscard = () => null,\r\n displayActions = true,\r\n lastUpdatedOn = null,\r\n lastCheckedOn = null,\r\n}) => {\r\n const rowLockTimer = 5; // minutes\r\n const [minutesElapsed, setMinutesElapsed] = useState(null);\r\n const [secondsElapsed, setSecondsElapsed] = useState(null);\r\n const [secondsRemaining, setSecondsRemaining] = useState(null);\r\n const [callback, setCallback] = useState(null);\r\n const [holdCallbackFiring, setHoldCallbackFiring] = useState(false);\r\n const entityType = useMemo(() => `${rowLockEntity?.type[0].toUpperCase()}${rowLockEntity?.type.slice(1)}`, [rowLockEntity]);\r\n const canTakeAction = useMemo(() => minutesElapsed >= rowLockTimer, [minutesElapsed]);\r\n const timeElapsedMessage = useMemo(() => {\r\n if (minutesElapsed == null) return null;\r\n if (minutesElapsed < 1 && secondsElapsed < 60) return `${secondsElapsed}s ago`;\r\n if (minutesElapsed >= 60) {\r\n const hours = Math.floor(minutesElapsed / 60);\r\n const minutes = minutesElapsed % 60;\r\n return minutes > 0\r\n ? `${hours} hour${hours > 1 ? 's' : ''} and ${minutes} minute${minutes > 1 ? 's' : ''} ago`\r\n : `${hours} hour${hours > 1 ? 's' : ''} ago`;\r\n }\r\n return `${minutesElapsed} minute${minutesElapsed > 1 ? 's' : ''} ago`;\r\n }, [minutesElapsed, secondsElapsed]);\r\n\r\n const lastUpdate = useMemo(() => lastUpdatedOn && new Date(lastUpdatedOn), [lastUpdatedOn]);\r\n const timeRemainingMessage = useMemo(() => {\r\n const diffInMilliseconds = Date.now() - new Date(lastUpdate).getTime();\r\n const differenceInSeconds = Math.floor(diffInMilliseconds / 1000);\r\n setSecondsElapsed(differenceInSeconds);\r\n const remainingTimeInSeconds = (rowLockTimer * 60) - Math.floor(differenceInSeconds);\r\n if (remainingTimeInSeconds <= 0) return '00:00:00';\r\n\r\n const remainingMinutes = Math.floor(remainingTimeInSeconds / 60);\r\n const remainingSeconds = remainingTimeInSeconds % 60;\r\n\r\n // Format minutes and seconds to always have two digits\r\n const formattedMinutes = String(remainingMinutes).padStart(2, '0');\r\n const formattedSeconds = String(remainingSeconds).padStart(2, '0');\r\n\r\n return `00:${formattedMinutes}:${formattedSeconds}`;\r\n }, [secondsRemaining]);\r\n\r\n const updateElapsedTime = useCallback(() => {\r\n if (!lastUpdate) return;\r\n const minutes = Math.floor((Math.abs(Date.now() - lastUpdate) / 1000) / 60);\r\n setMinutesElapsed(minutes);\r\n }, [lastUpdate]);\r\n\r\n const handleDiscard = () => {\r\n checkStatus();\r\n setCallback(() => onDiscard);\r\n setHoldCallbackFiring(true); // put the callback firing on hold until the status check is complete\r\n };\r\n\r\n useEffect(() => {\r\n if (callback && holdCallbackFiring) setHoldCallbackFiring(false);\r\n }, [lastCheckedOn]);\r\n\r\n useEffect(() => {\r\n if (callback && !holdCallbackFiring && (isAdmin || canTakeAction || lockedByMeWithinSession)) {\r\n callback();\r\n setCallback(null);\r\n }\r\n }, [holdCallbackFiring]);\r\n\r\n useEffect(updateElapsedTime, [lastUpdate]);\r\n\r\n useInterval(() => {\r\n if (minutesElapsed < rowLockTimer) setSecondsRemaining(secondsRemaining - 1);\r\n updateElapsedTime();\r\n }, 1000);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n There are unsaved changes available.\r\n
\r\n {displayActions && (\r\n <>\r\nDo you wish to take over these changes, or discard them entirely?
\r\n \r\n \r\n \r\n )}\r\n\r\n
\r\n );\r\n};\r\n\r\nRowLockMessage.propTypes = {\r\n rowLockEntity: PropTypes.shape({\r\n type: PropTypes.string,\r\n id: PropTypes.number,\r\n }),\r\n message: PropTypes.string,\r\n lockedBy: PropTypes.string,\r\n lockedByMeWithinSession: PropTypes.bool,\r\n impersonatedBy: PropTypes.string,\r\n userName: PropTypes.string,\r\n isAdmin: PropTypes.bool,\r\n checkStatus: PropTypes.func,\r\n onDiscard: PropTypes.func,\r\n displayActions: PropTypes.bool,\r\n lastUpdatedOn: PropTypes.string,\r\n lastCheckedOn: PropTypes.number,\r\n};\r\n\r\nexport default RowLockMessage;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Alert from 'react-bootstrap/Alert';\r\nimport Button from '@components/smartAdminUI/Button';\r\n\r\nconst RowLockOwnerMessage = ({\r\n isAutoSave = false,\r\n onRemoveLock = () => null,\r\n}) => (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {message\r\n || ((userName === lockedBy) && (userName === impersonatedBy) && `This ${entityType} is locked by you`)\r\n || ((userName === impersonatedBy) && (userName !== lockedBy) && `This ${entityType} is locked by you, logged in as ${lockedBy}`)\r\n || ((userName === lockedBy) && (userName !== impersonatedBy) && `This ${entityType} is locked by ${impersonatedBy}, logged in as you`)\r\n || ((userName !== lockedBy) && (userName !== impersonatedBy) && (lockedBy !== impersonatedBy) && `This ${entityType} is locked by ${impersonatedBy}, logged in as ${lockedBy}`)\r\n || ((userName !== lockedBy) && (userName !== impersonatedBy) && (lockedBy === impersonatedBy) && `This ${entityType} is locked by ${impersonatedBy}`)}\r\n
\r\n {!lockedByMeWithinSession && (userName === lockedBy) && (userName === impersonatedBy) &&It may either be open in another browser window/tab or possibly on another device.
}\r\n {lastUpdate && timeElapsedMessage && (\r\n\r\n {`The lock was last updated on ${new Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long', timeZone: undefined }).format(lastUpdate)} (${timeElapsedMessage}).`}\r\n
\r\n )}\r\n {!isAdmin && !lockedByMeWithinSession && !canTakeAction && (\r\n <>\r\n{`You will be able to remove the lock on this ${entityType} record in ${timeRemainingMessage}.`}
\r\n \r\n )}\r\n {(isAdmin || lockedByMeWithinSession || (displayActions && canTakeAction)) && (\r\n <>\r\n{`You may remove the lock on this ${entityType} record by clicking on the button below:`}
\r\n \r\n \r\n )}\r\n\r\n
\r\n);\r\n\r\nRowLockOwnerMessage.propTypes = {\r\n isAutoSave: PropTypes.bool,\r\n onRemoveLock: PropTypes.func,\r\n};\r\n\r\nexport default RowLockOwnerMessage;\r\n","import {\r\n useEffect, useMemo, useState, useCallback,\r\n} from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n checkRowLock,\r\n createRowLock,\r\n pingRowLock,\r\n removeRowLock,\r\n setRowLockCurrentUser,\r\n setRowLockEntity,\r\n setRowLockCallback,\r\n takeoverRowLock,\r\n} from '@redux/modules/rowLock';\r\n\r\nimport {\r\n selectLockRequiresCheck,\r\n selectLocked,\r\n selectLockedBy,\r\n selectLockedByMe,\r\n selectImpersonatedBy,\r\n selectLastUpdatedOn,\r\n selectLastCheckedOn,\r\n selectCreatedWithinSession,\r\n selectError,\r\n selectClareityUrl,\r\n} from '@redux/selectors/RowLockSelector';\r\n\r\nimport {\r\n getUserName,\r\n getUserId,\r\n getUserIdleStatus,\r\n} from '@redux/selectors/UserSelector';\r\nimport { getImpersonationStatus } from '@redux/selectors/ImpersonationSelector';\r\n\r\nimport { isValidEntity } from '@utils/rowLock';\r\nimport useInterval from '@hooks/useInterval';\r\nimport useRowChecked from '@hooks/useRowChecked';\r\nimport AutoSaveMessage from '@components/rowLock/AutoSaveMessage';\r\nimport LockMessage from '@components/rowLock/RowLockMessage';\r\nimport LockOwnerMessage from '@components/rowLock/RowLockOwnerMessage';\r\nimport { getIsAdmin } from '@redux/selectors/AclSelector';\r\n\r\n/* Validates hook props using PropTypes.checkPropTypes. */\r\nconst validateProps = props => {\r\n const propTypes = {\r\n rowLockEntity: PropTypes.shape({\r\n type: PropTypes.string,\r\n id: PropTypes.number,\r\n }),\r\n isEditOperation: PropTypes.bool,\r\n enableAutomation: PropTypes.bool,\r\n redirectOnLocked: PropTypes.bool,\r\n enableRowLocking: PropTypes.bool,\r\n };\r\n\r\n PropTypes.checkPropTypes(propTypes, props, 'prop', 'useRowLock');\r\n};\r\n\r\nconst useRowLock = props => {\r\n const {\r\n rowLockEntity = null, // the entity which the hook will be initialized with;\r\n isEditOperation = false, // specifies if the hook is used within an edit page;\r\n enableAutomation = true, // specifies if automations (e.g. intervals) should be ON for this hook;\r\n enableRowLocking = true, // specifies if the row-locking should currently be enabled;\r\n redirectOnLocked = false, // specifies if the user should be redirected to a dedicated page if the entity is locked\r\n } = props;\r\n\r\n validateProps(props);\r\n\r\n const [entity, setEntity] = useState(enableRowLocking && isValidEntity(rowLockEntity) ? rowLockEntity : null);\r\n const [lockCallback, setLockCallback] = useState(null);\r\n const checked = useRowChecked(entity);\r\n\r\n const history = useHistory(); // use for redirection\r\n\r\n const dispatch = useDispatch();\r\n const locked = useSelector(selectLocked);\r\n const lockedBy = useSelector(selectLockedBy);\r\n const lockedByMe = useSelector(selectLockedByMe);\r\n const impersonatedBy = useSelector(selectImpersonatedBy);\r\n const isAdmin = useSelector(getIsAdmin);\r\n const lockCreatedWithinSession = useSelector(selectCreatedWithinSession);\r\n const lockRequiresCheck = useSelector(selectLockRequiresCheck);\r\n const lastUpdatedOn = useSelector(selectLastUpdatedOn);\r\n const lastCheckedOn = useSelector(selectLastCheckedOn);\r\n const isError = useSelector(selectError);\r\n const clareityUrl = useSelector(selectClareityUrl);\r\n\r\n const isErrorOrUnknownStatus = isError || lockRequiresCheck || !!clareityUrl;\r\n const lockedByMeWithinSession = lockedByMe && lockCreatedWithinSession;\r\n const lockingAuthorized = !locked || lockedByMeWithinSession;\r\n\r\n const realUserName = useSelector(getUserName);\r\n const realUserId = useSelector(getUserId);\r\n const isIdle = useSelector(getUserIdleStatus);\r\n const impersonationStatus = useSelector(getImpersonationStatus);\r\n\r\n const currentUser = useMemo(() => (impersonationStatus?.ImpersonationActive\r\n ? { userName: impersonationStatus.memberFullName, userId: impersonationStatus.memberUniqueID }\r\n : { userName: realUserName, userId: realUserId }\r\n ), [realUserName, realUserId, impersonationStatus]);\r\n\r\n const authChecked = useSelector(({ authentication }) => authentication.authChecked);\r\n const isLoadingAuth = useSelector(({ authentication }) => authentication.isLoadingAuth);\r\n const isAuthenticated = useSelector(({ authentication }) => authentication.isAuthenticated);\r\n const isAuthCloseToExpiry = useSelector(({ authentication }) => authentication.isAuthCloseToExpiry);\r\n\r\n const rowLockIntervalsEnabled = enableRowLocking && enableAutomation && !isIdle && authChecked && isAuthenticated && !isLoadingAuth && !isAuthCloseToExpiry;\r\n\r\n /* Save current user to redux store. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n dispatch(setRowLockCurrentUser(currentUser));\r\n }, [currentUser]);\r\n\r\n const initializeEntity = (newEntity, callback) => {\r\n if (!enableRowLocking) return;\r\n setLockCallback(null);\r\n if (!isValidEntity(newEntity)) return;\r\n setEntity(newEntity);\r\n dispatch(setRowLockEntity(newEntity)).then(() => callback && setLockCallback(() => callback));\r\n };\r\n\r\n /* Make sure to re-initialize the local entity when a new rowLock entity is being passed. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n initializeEntity(rowLockEntity);\r\n }, [rowLockEntity]);\r\n\r\n const checkStatus = useCallback(callback => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(checkRowLock(entity)).then(() => callback && setLockCallback(() => callback));\r\n }, [entity]);\r\n\r\n const createLock = useCallback(async callback => {\r\n let created;\r\n\r\n if (!enableRowLocking) return null;\r\n if (!isValidEntity(entity)) return null;\r\n\r\n try {\r\n created = await dispatch(createRowLock(entity));\r\n if (created && callback) setLockCallback(() => callback);\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: RowLock createLock', err);\r\n }\r\n\r\n return created;\r\n }, [entity]);\r\n\r\n const pingLock = useCallback(() => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(pingRowLock(entity));\r\n }, [entity]);\r\n\r\n const removeLock = useCallback(() => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(removeRowLock(entity));\r\n }, [entity]);\r\n\r\n const takeoverLock = useCallback(callback => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(takeoverRowLock(entity)).then(() => callback && setLockCallback(() => callback));\r\n }, [entity]);\r\n\r\n /* It is not very clear at this point what \"Discard Changes\" action should do behind the scenes, so for now\r\n it will just take over existing lock and remove it (remove is only allowed for the owner of the lock).\r\n This approach should also assist in removing any hanging locks. */\r\n const discardChanges = useCallback(() => {\r\n if (!enableRowLocking) return;\r\n if (!isValidEntity(entity)) return;\r\n dispatch(takeoverRowLock(entity)).then(() => dispatch(removeRowLock(entity)));\r\n }, [entity]);\r\n\r\n /* Redirect the user to the Clareity URL when this is being returned by the api, and the user is not on an edit page.\r\n This is meant to be a temporary solution until a middleware will automatically deal with this url. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (clareityUrl && !isEditOperation && checked) {\r\n window.location.href = clareityUrl;\r\n }\r\n }, [clareityUrl, isEditOperation, checked]);\r\n\r\n /* Re-trigger the lock check action if that is required (due to receiving a 'FAILURE' type). */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (lockRequiresCheck && checked && !isError) {\r\n checkStatus();\r\n }\r\n }, [lockRequiresCheck, checked, isError]);\r\n\r\n /* Check if there is any callback action waiting to be fired. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (lockCallback && checked && !isErrorOrUnknownStatus && lockedByMeWithinSession) {\r\n lockCallback();\r\n setLockCallback(null);\r\n }\r\n }, [lockCallback && checked, isErrorOrUnknownStatus, lockedByMeWithinSession]);\r\n\r\n /* Remove any saved callback actions if the user is not entitled to fire it yet. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (lockCallback && checked && !isErrorOrUnknownStatus && locked && !lockedByMeWithinSession) {\r\n setLockCallback(null);\r\n }\r\n }, [lockCallback, checked, isErrorOrUnknownStatus, locked, lockedByMeWithinSession]);\r\n\r\n /* Redirect the user to the RowLock page if the entity is locked. */\r\n useEffect(() => {\r\n if (!enableRowLocking) return;\r\n if (redirectOnLocked && checked && !isErrorOrUnknownStatus && locked && !lockedByMeWithinSession) {\r\n if (lockCallback) {\r\n // Save callback to redux store, from where it will be picked up by the rowLock page.\r\n dispatch(setRowLockCallback(lockCallback));\r\n }\r\n history.push(`/rowLock/${entity.type}/${entity.id}`);\r\n }\r\n }, [redirectOnLocked, checked, isErrorOrUnknownStatus, locked, lockedByMeWithinSession, lockCallback, entity]);\r\n\r\n /* If the lock belongs to the current user, then start to regularly ping the lock for heartbeat purposes. */\r\n useInterval(pingLock, rowLockIntervalsEnabled && isEditOperation && checked && !isErrorOrUnknownStatus && lockedByMeWithinSession ? (1000 * 60 * 5) : null);\r\n\r\n /* If the entity is locked, then start to regularly check for any lock status changes. */\r\n useInterval(checkStatus, rowLockIntervalsEnabled && checked && !isErrorOrUnknownStatus && locked ? (1000 * 60) : null);\r\n\r\n return {\r\n rowLockingEnabled: enableRowLocking && isValidEntity(entity),\r\n entity,\r\n checked,\r\n lockingAuthorized: checked ? lockingAuthorized : false,\r\n locked: checked ? locked : false,\r\n lockedBy: checked ? lockedBy : null,\r\n lockedByMe: checked ? lockedByMe : false,\r\n lockedByMeWithinSession: checked ? lockedByMeWithinSession : false,\r\n impersonatedBy,\r\n isAdmin: checked ? isAdmin : false,\r\n lastUpdatedOn: checked ? lastUpdatedOn : null,\r\n lastCheckedOn: checked ? lastCheckedOn : null,\r\n initializeEntity,\r\n checkStatus,\r\n createLock,\r\n pingLock,\r\n removeLock,\r\n takeoverLock,\r\n discardChanges,\r\n AutoSaveMessage,\r\n LockMessage,\r\n LockOwnerMessage,\r\n };\r\n};\r\n\r\nexport default useRowLock;\r\n","import { useEffect, useRef } from 'react';\r\n\r\nconst useIsMounted = () => {\r\n const isMountedRef = useRef(false);\r\n\r\n useEffect(() => {\r\n isMountedRef.current = true;\r\n return () => {\r\n isMountedRef.current = false;\r\n };\r\n });\r\n\r\n return isMountedRef.current;\r\n};\r\n\r\nexport default useIsMounted;\r\n","/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport React, {\r\n useEffect, useMemo, useRef, useState,\r\n} from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Formik, Form } from 'formik';\r\nimport { useRollbar, useRollbarPerson } from '@rollbar/react';\r\n\r\nimport Swal from 'sweetalert2/src/sweetalert2';\r\nimport Tab from 'react-bootstrap/Tab';\r\nimport Row from 'react-bootstrap/Row';\r\nimport Col from 'react-bootstrap/Col';\r\nimport LinearProgress from '@mui/material/LinearProgress';\r\n\r\nimport apiService from '@services/apiService';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport FormSearchBar from '@components/form/formComponents/formSearch/FormSearchBar';\r\nimport FormLoader from '@components/loaders/FormLoader';\r\nimport FieldValidator from '@components/form/formHelpers/FieldValidator';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\nimport FormikFieldUpdater from '@components/form/formHelpers/FormikFieldUpdater';\r\nimport LayoutGroupWrapper from '@components/form/formComponents/inputGroups/LayoutGroupWrapper';\r\nimport OfficeLookupModal from '@components/form/formComponents/inputGroups/officeLookup/OfficeLookupModal';\r\nimport RepeatableRoom from '@components/form/formComponents/repeatableRoom/RepeatableRoom';\r\nimport OnSubmitValidationError from '@components/form/formikComponents/OnSubmitValidationError';\r\n\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nimport {\r\n getSortedErrors,\r\n selectComboValueDict,\r\n selectFormDefinition,\r\n selectInitialTouched,\r\n selectInitialValues,\r\n selectLookupNames,\r\n selectVisiblePageStructure,\r\n selectAllFields,\r\n getOrderedSections,\r\n selectErrorsPerSection,\r\n selectRequiredPerSection,\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport {\r\n selectSectionsPerRepeatableSection,\r\n} from '@redux/selectors/ListingSelector';\r\n\r\nimport { getUserName, getUserMlsId } from '@redux/selectors/UserSelector';\r\nimport { selectPhotoQueueLength, selectPhotoMetaCollection } from '@redux/selectors/PhotoSelector';\r\nimport { selectAgentFormData } from '@redux/selectors/FormDataSelector';\r\n\r\nimport {\r\n formSubmitted,\r\n loadComboBoxOptions,\r\n setValidationResult,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { clearAgent } from '@redux/modules/agent';\r\n\r\nimport SectionNav from '@components/smartAdminUI/SectionNav';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport usePrevious from '@hooks/usePrevious';\r\nimport useIsMounted from '@hooks/useIsMounted';\r\n\r\nimport Badge from '@components/smartAdminUI/Badge';\r\nimport FormikField from '@components/form/FormikField';\r\n\r\nconst CreateAgentForm = () => {\r\n const dispatch = useDispatch();\r\n const isMounted = useIsMounted();\r\n const formRef = useRef();\r\n const history = useHistory(); // use for redirection\r\n\r\n const agentRules = window.FlexRule.RuntimeEngine.fromJavaScript('OnePlatform', 'AgentRules');\r\n\r\n const photoQueueLength = useSelector(selectPhotoQueueLength);\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const orderedSections = useSelector(getOrderedSections);\r\n const errPerSection = useSelector(selectErrorsPerSection);\r\n const reqPerSection = useSelector(selectRequiredPerSection);\r\n const agentSelected = useSelector(state => state.agent.agentSelected);\r\n const agentDataSelect = useSelector(selectAgentFormData);\r\n const definitionType = useSelector(state => state.formGeneration.definitionType);\r\n const formIsLoading = useSelector(state => state.formGeneration.formIsLoading);\r\n const officeLookup = useSelector(state => state.office.officeLookup);\r\n const operationType = useSelector(state => state.formGeneration.operationType);\r\n const previousOperationType = usePrevious(operationType);\r\n const comboSetValueDict = useSelector(selectComboValueDict);\r\n const currentFormDefinition = useSelector(selectFormDefinition);\r\n const lookUpNames = useSelector(selectLookupNames);\r\n const initialTouched = useSelector(selectInitialTouched);\r\n const initialValues = useSelector(selectInitialValues);\r\n const pageStructure = useSelector(selectVisiblePageStructure);\r\n const allFields = useSelector(selectAllFields);\r\n const photoMeta = useSelector(selectPhotoMetaCollection);\r\n const sortedErrors = useSelector(getSortedErrors);\r\n\r\n const [formSubmitting, setFormSubmitting] = useState(false);\r\n const [newComboValue, setNewComboValue] = useState({});\r\n const [runValidation, setRunValidation] = useState(false);\r\n const [validateFieldName, setValidateFieldName] = useState('');\r\n const [validateFlag, setValidateFlag] = useState(false);\r\n const [validationValue, setValidationValue] = useState('');\r\n const [progress, setProgress] = useState(((1 / orderedSections.length) * 100));\r\n const [activeSection, setActiveSection] = useState(1);\r\n\r\n const memoizedInitialValues = useMemo(() => initialValues, []);\r\n const agentFormData = useMemo(() => agentDataSelect, [agentDataSelect]);\r\n const comboBubbleWrap = { setNewComboValue };\r\n\r\n const photosAreQueued = useMemo(() => {\r\n if (photoQueueLength > 0) return true;\r\n return false;\r\n }, [photoQueueLength]);\r\n\r\n const rowLockEntity = useMemo(() => ({ type: 'agent', id: agentSelected?.UniqueID }), [agentSelected]);\r\n const gaEventTracker = GAEventTracking('Error Agent Form Submit');\r\n const username = useSelector(getUserName);\r\n const userMLSID = useSelector(getUserMlsId);\r\n\r\n const rollbar = useRollbar();\r\n useRollbarPerson({ id: userMLSID, username });\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n checked,\r\n checkStatus,\r\n createLock,\r\n removeLock,\r\n rowLockingEnabled,\r\n } = useRowLock({ rowLockEntity, isEditOperation: operationType === 'edit', enableRowLocking: operationType === 'edit' });\r\n\r\n const lockReleasedByCurrentUser = useRef(false);\r\n\r\n useEffect(() => {\r\n if (!currentFormDefinition?.length) return;\r\n\r\n if (lookUpNames?.lookupNames?.length) {\r\n dispatch(loadComboBoxOptions(lookUpNames, 'agents'));\r\n }\r\n\r\n formRef?.current?.validateForm();\r\n }, [currentFormDefinition]);\r\n\r\n useEffect(() => {\r\n // prevent the execution of this effect when going from edit mode to create mode;\r\n // current component will not be un-mounted yet when [operationType] gets updated in redux.\r\n if (previousOperationType === 'edit' && operationType === 'create') return;\r\n\r\n if (operationType === 'create') {\r\n dispatch(clearAgent());\r\n formRef?.current?.resetForm();\r\n setRunValidation(true);\r\n }\r\n }, [operationType]);\r\n\r\n useEffect(() => {\r\n if (Object.keys(newComboValue).length > 0) {\r\n const newComboKeys = Object.keys(newComboValue);\r\n if (comboSetValueDict) {\r\n if (newComboKeys.length > 0) {\r\n const { fieldName, newValue } = newComboValue;\r\n const comboMutator = comboSetValueDict[fieldName];\r\n comboMutator(newValue);\r\n }\r\n }\r\n }\r\n }, [newComboValue]);\r\n\r\n const getPhotoDeltas = (formikPhoto, unmodifiedEntry) => {\r\n const deltas = {};\r\n if (!formikPhoto) return deltas;\r\n if (formikPhoto.IsDeleted !== unmodifiedEntry.flexMeta.IsDeleted) deltas.IsDeleted = formikPhoto.IsDeleted;\r\n if (formikPhoto.Description !== unmodifiedEntry.flexMeta.Description) deltas.Description = formikPhoto.Description;\r\n if (formikPhoto.SortOrder !== unmodifiedEntry.flexMeta.SortOrder) deltas.SortOrder = formikPhoto.SortOrder;\r\n return deltas;\r\n };\r\n\r\n const mergePhotoData = (formikState, photoMetaCollection = []) => {\r\n if (!photoMetaCollection) return [];\r\n const mergedPhotos = photoMetaCollection.map(image => {\r\n const isError = image.IsError;\r\n if (image.flexMeta?.UniqueID) { // image exists in flexRule DB\r\n // Handle existing photo.\r\n const { SortOrder, IsDeleted } = formikState[image.key];\r\n if (IsDeleted) {\r\n // Mark photo as deleted.\r\n return {\r\n UniqueID: image.flexMeta.UniqueID,\r\n SortOrder: image.SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n if (isError && !IsDeleted) {\r\n // do not calculate deltas\r\n return {\r\n UniqueID: image.flexMeta.UniqueID,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n // Update photo.\r\n //\r\n const deltas = getPhotoDeltas(formikState[image.key], image);\r\n return {\r\n ...deltas,\r\n UniqueID: image.flexMeta.UniqueID,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n // Handle new photo.\r\n if (isError) return null;\r\n const {\r\n URL,\r\n Description,\r\n SortOrder,\r\n IsDeleted,\r\n } = formikState[image.key];\r\n\r\n return {\r\n URL,\r\n Description,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }).filter(photo => photo !== null);\r\n // eslint-disable-next-line no-return-assign, no-param-reassign\r\n mergedPhotos.filter(p => !p.IsDeleted).sort((p1, p2) => p1.SortOrder - p2.SortOrder).forEach((photo, index) => photo.SortOrder = index + 1);\r\n return mergedPhotos;\r\n };\r\n\r\n const convertDateToUTC = date => new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());\r\n\r\n const getDateValue = value => {\r\n let formattedDate;\r\n if (value) {\r\n const dateUTC = convertDateToUTC(new Date(value));\r\n const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(dateUTC);\r\n const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(dateUTC);\r\n const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(dateUTC);\r\n formattedDate = `${year}-${month}-${day}`;\r\n }\r\n return formattedDate ?? '';\r\n };\r\n\r\n const getBitValue = value => {\r\n let bitValue;\r\n if (value != null && value !== '') {\r\n if (typeof value === 'string') {\r\n bitValue = value === 'true' ? 1 : 0;\r\n } else if (typeof value === 'boolean') {\r\n bitValue = value === true ? 1 : 0;\r\n } else if (typeof value === 'number') {\r\n bitValue = value;\r\n }\r\n }\r\n return bitValue ?? '';\r\n };\r\n\r\n const getStringValue = value => value ?? '';\r\n\r\n const getNumericValue = value => (value != null && value !== '' ? Number(value) : '');\r\n\r\n const getComboBoxValue = value => value ?? '';\r\n\r\n // TODO: move to utility module (used by listing/agent/office)\r\n const valueHasChanged = (fieldName, oldValue, newValue) => {\r\n const inputType = allFields[fieldName]?.InputType;\r\n const dataType = allFields[fieldName]?.DataType;\r\n switch (inputType) {\r\n case 'TextInput':\r\n if (dataType === 'datetime' || dataType === 'date') {\r\n return (getDateValue(oldValue) !== getDateValue(newValue));\r\n }\r\n if (dataType === 'bit') {\r\n return (getBitValue(oldValue) !== getBitValue(newValue));\r\n }\r\n if (dataType === 'string') {\r\n return (getStringValue(oldValue) !== getStringValue(newValue));\r\n }\r\n if (dataType === 'numeric' || dataType === 'decimal' || dataType === 'integer') {\r\n return (getNumericValue(oldValue) !== getNumericValue(newValue));\r\n }\r\n return (oldValue !== newValue);\r\n\r\n case 'ComboBox':\r\n return (getComboBoxValue(oldValue) !== getComboBoxValue(newValue));\r\n\r\n default:\r\n return (oldValue !== newValue);\r\n }\r\n };\r\n\r\n const handlePreviousClick = () => {\r\n const tabNav = document.querySelector('.tab-nav');\r\n const tabActive = tabNav.querySelector('.active');\r\n if (tabActive) {\r\n const navItem = tabActive.parentNode;\r\n const previous = navItem.previousElementSibling;\r\n if (previous) {\r\n previous.querySelector('a').click();\r\n window.scrollTo(0, 0);\r\n setProgress(progress - ((1 / orderedSections.length) * 100));\r\n setActiveSection(activeSection - 1);\r\n }\r\n }\r\n };\r\n\r\n const handleNextClick = () => {\r\n const tabNav = document.querySelector('.tab-nav');\r\n const tabActive = tabNav.querySelector('.active');\r\n if (tabActive) {\r\n const navItem = tabActive.parentNode;\r\n const next = navItem.nextElementSibling;\r\n if (next) {\r\n next.querySelector('a').click();\r\n window.scrollTo(0, 0);\r\n setProgress(progress + ((1 / orderedSections.length) * 100));\r\n setActiveSection(activeSection + 1);\r\n }\r\n }\r\n };\r\n\r\n const handleSubmit = async (values, { setSubmitting }) => {\r\n if (!(operationType === 'create') && !(operationType === 'edit')) return;\r\n\r\n let uniqueID;\r\n const { Photos, ...agent } = values;\r\n const photosGroup = Photos ? mergePhotoData(Photos, photoMeta) : null;\r\n // generates postBody\r\n const postBody = {};\r\n\r\n if (operationType === 'create') {\r\n postBody.data = {\r\n agent: { ...agent },\r\n photos: photosGroup,\r\n };\r\n } else if (operationType === 'edit') {\r\n const agentData = {\r\n UniqueID: agentSelected.UniqueID,\r\n };\r\n\r\n Object.keys(agent).map(key => {\r\n if (valueHasChanged(key, agentSelected[key], values[key])) {\r\n agentData[key] = values[key];\r\n }\r\n return null;\r\n });\r\n\r\n postBody.data = {\r\n agent: { ...agentData },\r\n photos: photosGroup,\r\n };\r\n }\r\n\r\n try {\r\n // If the component has been un-mounted meanwhile, we don't need to update local state anymore, nor display subsequent alerts.\r\n if (!isMounted) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n icon: 'question',\r\n iconColor: 'var(--theme-warning)',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg mr-2 swal-question-agent-submit-yes',\r\n denyButton: 'btn btn-primary btn-lg swal-question-agent-submit-no',\r\n },\r\n confirmButtonText: 'Yes, Continue',\r\n denyButtonText: 'No, Cancel',\r\n showDenyButton: true,\r\n title: 'Submit Agent?',\r\n text: 'Your changes will be reflected in Matrix™ within 10-15 minutes.',\r\n }).then(async choice => {\r\n if (choice.isConfirmed) {\r\n setFormSubmitting(true);\r\n\r\n if (operationType === 'create') {\r\n const result = await apiService.Agent.createAgent(postBody);\r\n uniqueID = result?.UniqueID;\r\n } else if (operationType === 'edit') {\r\n uniqueID = agentSelected?.UniqueID;\r\n await apiService.Agent.updateAgent(postBody);\r\n }\r\n\r\n dispatch(formSubmitted());\r\n removeLock();\r\n lockReleasedByCurrentUser.current = true;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Agent Submitted',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n }).then(() => {\r\n history.push(uniqueID == null ? '/' : `/agent/view?UniqueID=${uniqueID}`);\r\n });\r\n }\r\n });\r\n } catch (error) {\r\n // If the component has been un-mounted meanwhile, we don't need to update local state anymore, nor display subsequent alerts.\r\n if (!isMounted) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Agent Not Submitted',\r\n text: 'Agent could not be submitted at this time. Please contact support.',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-submit',\r\n },\r\n });\r\n if (operationType === 'edit') gaEventTracker(`Edit - ${uniqueID}`, `${username}`);\r\n if (operationType === 'create') gaEventTracker(`Create - ${uniqueID}`, `${username}`);\r\n rollbar.error('Error: Agent Form Submit', error, postBody);\r\n }\r\n setFormSubmitting(false);\r\n setSubmitting(false);\r\n };\r\n\r\n const onClickSubmit = (values, actions) => {\r\n if (rowLockingEnabled) return checkStatus(async () => handleSubmit(values, actions)); // check lock status before submitting\r\n return handleSubmit(values, actions);\r\n };\r\n\r\n const transformRepeatable = values => {\r\n const filledValues = { ...values };\r\n const existingLogics = agentRules.descriptions.logics; // existing fields that have validation rules\r\n const newValues = {};\r\n\r\n Object.entries(filledValues).forEach(([key, value]) => { // now handles removal of fields that do not have the validation logic set\r\n const newKeyLogic = `${key}Rules`;\r\n if (existingLogics.includes(newKeyLogic)) {\r\n newValues[key] = value;\r\n }\r\n });\r\n return { agent: newValues };\r\n };\r\n\r\n const myValidateForm = values => {\r\n const errors = {};\r\n\r\n if (agentRules) {\r\n try {\r\n const { agent, photos } = transformRepeatable(values);\r\n\r\n const res = agentRules.run(agent, photos);\r\n const { fieldValidationResult, agentIsValid } = res.context.variableContainer;\r\n\r\n dispatch(setValidationResult(fieldValidationResult));\r\n\r\n if (!agentIsValid) {\r\n errors.agentIsValid = agentIsValid;\r\n }\r\n } catch (er) {\r\n rollbar.error('Error: Agent Validation', er, values);\r\n }\r\n }\r\n\r\n return errors;\r\n };\r\n\r\n const validateFigField = (figFieldName, figValidationValue) => {\r\n setValidateFieldName(figFieldName);\r\n setValidateFlag(true);\r\n setValidationValue(figValidationValue);\r\n };\r\n\r\n const fieldsUpdated = () => {\r\n setRunValidation(true);\r\n };\r\n\r\n useEffect(() => {\r\n if (runValidation) {\r\n formRef?.current?.validateForm();\r\n setRunValidation(false);\r\n }\r\n }, [runValidation]);\r\n\r\n // prevents form from submitting on enter key press\r\n const handleEnterKeyDown = keyEvent => {\r\n if ((keyEvent.charCode || keyEvent.keyCode) === 13) {\r\n keyEvent.preventDefault();\r\n }\r\n };\r\n\r\n // TODO: Pull this function out and put it into a general utils file as it is being used multiple times\r\n // Handle custom header for supplements and photo sections\r\n const getCustomHeader = section => {\r\n if (section.sectionName === 'Photos') {\r\n return (\r\n <>\r\n {section.sectionLabel}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n This entity is currently locked.\r\n
\r\n {isAutoSave && (\r\nAlthough you currently hold a lock for this entity, you must first decide what to do with your unsaved changes below before proceeding.
\r\n )}\r\n {!isAutoSave && (\r\n <>\r\nYou currently hold a lock for this entity. You may either release the lock or perform any other task you wish by clicking one of the buttons in the Listing Details panel header below.
\r\n \r\n \r\n )}\r\n\r\n
\r\n \r\n \r\n Create\r\n Agent\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CreateAgentPage;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from '@components/smartAdminUI/Button';\r\n\r\nconst AgentLookupActionButtons = ({\r\n agentSelected,\r\n currRow,\r\n}) => {\r\n const handleClick = () => agentSelected(currRow);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nAgentLookupActionButtons.propTypes = {\r\n agentSelected: PropTypes.func.isRequired,\r\n currRow: PropTypes.shape({\r\n UniqueID: PropTypes.number,\r\n }),\r\n};\r\n\r\nexport default AgentLookupActionButtons;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport AgentLookupActionButtons from '@components/table/actionButtons/AgentLookupActionButtons';\r\nimport DataTable from '../dataTable';\r\nimport translateColumns, { translateSort } from '../dataTable/dataTranslate';\r\n\r\nconst AgentLookupTable = ({\r\n displayData,\r\n onAgentSelect,\r\n isModal = false,\r\n}) => {\r\n const agentSelected = row => onAgentSelect(row);\r\n\r\n const actionsFormatter = (cell, row) => (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nCustomInput.propTypes = {\r\n label: PropTypes.string,\r\n name: PropTypes.string,\r\n};\r\n\r\nconst TaxAutoPopForm = props => {\r\n const { onSearchSubmit, formClear } = props;\r\n const [formEdited, setFormEdited] = useState(false);\r\n\r\n const taxAutoPopSearchLoading = useSelector(state => state.listing.searchLoading);\r\n\r\n const FormikHelper = () => {\r\n const { dirty, resetForm } = useFormikContext();\r\n\r\n useEffect(() => {\r\n if (dirty) {\r\n if (!formEdited) setFormEdited(true);\r\n } else {\r\n // eslint-disable-next-line no-lonely-if\r\n if (formEdited) setFormEdited(false);\r\n }\r\n }, [dirty]);\r\n\r\n // resets form once the tax auto pop modal reopens\r\n useEffect(() => {\r\n if (formClear) {\r\n if (formEdited) {\r\n resetForm({});\r\n }\r\n }\r\n }, []);\r\n\r\n return null;\r\n };\r\n\r\n const buildWhereClause = values => {\r\n const whereClause = {\r\n clause: [],\r\n };\r\n const valueKeys = Object.keys(values);\r\n\r\n valueKeys.forEach(key => {\r\n if (values[key]) {\r\n whereClause.clause.push({\r\n Name: key,\r\n Value: values[key].trim(),\r\n });\r\n }\r\n });\r\n return whereClause;\r\n };\r\n\r\n const handleSubmit = values => {\r\n const whereClause = buildWhereClause(values);\r\n\r\n const jsonBody = {\r\n action: 'search',\r\n where: whereClause,\r\n };\r\n onSearchSubmit(jsonBody);\r\n };\r\n\r\n return (\r\n {meta.error}
\r\n ) : null}\r\n \r\n \r\n \r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nTaxActionButtons.propTypes = {\r\n listingClicked: PropTypes.func.isRequired,\r\n index: PropTypes.number.isRequired,\r\n};\r\n\r\nexport default TaxActionButtons;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TaxActionButtons from './actionButtons/TaxActionButtons';\r\nimport translateColumns, { translateSort } from '../dataTable/dataTranslate';\r\nimport DataTable from '../dataTable';\r\n\r\nconst TaxAutoPopTable = props => {\r\n const { displayData, onListingSelected, isModal = false } = props;\r\n\r\n const actionsFormatter = (cell, row) => (\r\n \r\n \r\n NOTE:\r\n \r\n Although new tax assessments are sent out to home owners at the beginning of each calendar year, Pillar 9™ does not typically receive\r\n new Calgary Tax Data until sometime in May, with all other municipalities following sometime thereafter. Please check back\r\n \r\n \r\n HERE\r\n \r\n \r\n {' '}\r\n regularly, to see what data has been received for the current and past years.\r\n
\r\n\r\n {\r\n listingData\r\n && (\r\n
Your changes will be reflected in Matrix™ within 10-15 minutes.
'\r\n + ''\r\n + '
Reminder: Use of MLS® listing numbers for advertising and promotion is only permitted once the listing has been activated on the MLS® System.
',\r\n }).then(async choice => {\r\n if (choice.isConfirmed) {\r\n setIsFormSavingAsIncomplete(true);\r\n setIncompleteButtonText('Saving...');\r\n try {\r\n if (operationType === 'create') {\r\n const result = await apiService.Listing.SaveIncomplete({\r\n listingRequest: postBody,\r\n autoSaveRequest: autoSaveExists && autoSaveCriteria ? autoSaveCriteria : null,\r\n rowLockRequest: null,\r\n });\r\n listingId = result?.Data?.ListingId;\r\n } else if (operationType === 'edit') {\r\n listingId = currListing?.ListingId;\r\n const whereClause = currListing ? buildWhereClause(currListing) : null;\r\n await apiService.Listing.UpdateIncomplete({\r\n listingRequest: {\r\n ...postBody,\r\n ...whereClause, // BE requires where clause in EDIT operation (but not CREATE)\r\n },\r\n autoSaveRequest: autoSaveExists && autoSaveCriteria ? autoSaveCriteria : null,\r\n rowLockRequest: rowLockingEnabled ? { type: 'listing', id: currListing.UniqueID } : null,\r\n });\r\n }\r\n } catch (error) {\r\n // If the component has been un-mounted meanwhile, we don't need to update local state anymore, nor display subsequent alerts.\r\n if (!isMounted) return;\r\n\r\n setIsFormSavingAsIncomplete(false);\r\n setIncompleteButtonText('Save Incomplete');\r\n setIsFormSavedAsIncomplete(false);\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Listing Not Saved As Incomplete',\r\n text: 'Listing could not be saved at this time. Please contact support',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-listing-saveIncomplete',\r\n },\r\n });\r\n if (operationType === 'create') gaSaveIncompleteEventTracker(`Save Incomplete Create - ${listingId}`, `${username}`);\r\n if (operationType === 'edit') gaSaveIncompleteEventTracker(`Save Incomplete Edit - ${listingId}`, `${username}`);\r\n rollbar.error('Error: Listing Save Incomplete', error, postBody);\r\n\r\n return;\r\n }\r\n\r\n dispatch(formSubmitted());\r\n lockReleasedByCurrentUser.current = true;\r\n\r\n setIsFormSavingAsIncomplete(false);\r\n setIncompleteButtonText('Save Incomplete');\r\n setIsFormSavedAsIncomplete(true);\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Listing Saved As Incomplete',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n }).then(() => {\r\n history.push(listingId == null ? '/' : `/listings/view?ListingID=${listingId}`);\r\n });\r\n }\r\n });\r\n };\r\n\r\n const onClickSubmit = (values, actions) => {\r\n if (rowLockingEnabled) return checkStatus(async () => handleSubmit(values, actions)); // check lock status before submitting\r\n return handleSubmit(values, actions);\r\n };\r\n\r\n const onClickSaveIncomplete = (values, actions) => {\r\n if (rowLockingEnabled) return checkStatus(async () => handleSaveIncomplete()); // check lock status before submitting\r\n\r\n return handleSaveIncomplete(values, actions);\r\n };\r\n\r\n const getRepeatableChanged = (formikGroup, unmodifiedGroup) => {\r\n /* does origin have this item?\r\n does any prop of this item not match origin?\r\n */\r\n let hasChanged = false;\r\n if (formikGroup.length !== unmodifiedGroup.length) return true;\r\n formikGroup.forEach(item => {\r\n if (hasChanged) return;\r\n if (item.UniqueID) {\r\n // room/door/parcel, openhouse?\r\n const umItem = unmodifiedGroup.find(umi => umi.UniqueID === item.UniqueID);\r\n Object.keys(umItem).forEach(itemkey => {\r\n if (hasChanged) return;\r\n if (umItem?.[itemkey]) {\r\n if (umItem[itemkey] !== item[itemkey]) hasChanged = true;\r\n }\r\n });\r\n // see that every key's value in formikElement matches umEl\r\n } else if (item.URL) {\r\n // photo or supp\r\n const umItem = unmodifiedGroup.find(umi => umi.URL === item.URL);\r\n Object.keys(item).forEach(itemkey => {\r\n if (hasChanged) return;\r\n if (umItem?.[itemkey]) {\r\n if (umItem[itemkey] !== item[itemkey]) hasChanged = true;\r\n }\r\n });\r\n } else {\r\n // item has neither url or uniqueId;\r\n hasChanged = true;\r\n }\r\n });\r\n return hasChanged;\r\n };\r\n\r\n const getChanged = (unModGroup, photosGroup, roomsGroup, supplementsGroup, openHousesGroup) => {\r\n let photosChanged = false;\r\n let supplementsChanged = false;\r\n let roomsChanged = false;\r\n let openHousesChanged = false;\r\n\r\n photosChanged = getRepeatableChanged(photosGroup, unModGroup.umPhotos);\r\n supplementsChanged = getRepeatableChanged(supplementsGroup, unModGroup.umSupplements);\r\n roomsChanged = getRepeatableChanged(roomsGroup, unModGroup.umRooms);\r\n openHousesChanged = getRepeatableChanged(openHousesGroup, unModGroup.umOpenHouses);\r\n\r\n const photosChangedBool = photosChanged;\r\n photosChanged = photosChanged ? 1 : 0;\r\n const supplementsChangedBool = supplementsChanged;\r\n supplementsChanged = supplementsChanged ? 1 : 0;\r\n const roomsChangedBool = roomsChanged;\r\n roomsChanged = roomsChanged ? 1 : 0;\r\n const openHousesChangedBool = openHousesChanged;\r\n openHousesChanged = openHousesChanged ? 1 : 0;\r\n\r\n return [photosChanged, photosChangedBool, supplementsChanged, supplementsChangedBool, roomsChanged, roomsChangedBool, openHousesChanged, openHousesChangedBool];\r\n };\r\n\r\n // TODO: Refactor\r\n // converts repeatable data to format required by validation scripts\r\n // validation is running before the form has even loaded the listing data\r\n const transformRepeatable = values => {\r\n let newValues = {};\r\n\r\n // added if statement to compliment the onMount validation\r\n if (selectedListing?.listing) { // dealing with a saved listing\r\n newValues = {\r\n Photos: values.Photos,\r\n Rooms: values.Rooms,\r\n Supplements: values.Supplements,\r\n OpenHouses: values.OpenHouses,\r\n ...values,\r\n unmodifiedListing: { ...values, ...selectedListing.listing },\r\n };\r\n } else { // new listing\r\n newValues = { ...values, unmodifiedListing: {} }; // supply values and append empty unMod.\r\n }\r\n\r\n const {\r\n Photos, Rooms, Supplements, OpenHouses, unmodifiedListing, ...otherValues\r\n } = newValues;\r\n const photosGroup = Photos\r\n ? Object.keys(Photos).map(key => (!Photos[key].IsDeleted) && Photos[key])\r\n : [];\r\n const roomsGroup = Rooms\r\n ? Object.keys(Rooms).map(key => (!Rooms[key].IsDeleted) && Rooms[key]).filter(r => r !== false)\r\n : [];\r\n // see comments above\r\n const supplementsGroup = Supplements\r\n ? Object.keys(Supplements).map(key => (!Supplements[key].IsDeleted) && Supplements[key])\r\n : [];\r\n const openHousesGroup = OpenHouses\r\n ? Object.keys(OpenHouses).map(key => (!OpenHouses[key].IsDeleted) && OpenHouses[key])\r\n : [];\r\n\r\n const initKeys = Object.keys(memoizedInitialValues); // add in blank or null values for blank form validation\r\n initKeys.forEach(k => {\r\n if (otherValues[k] || otherValues[k] === 0) return;\r\n otherValues[k] = memoizedInitialValues[k];\r\n });\r\n\r\n return {\r\n listing: otherValues, photos: photosGroup, rooms: roomsGroup, supplements: supplementsGroup, unmodifiedListing, openHouses: openHousesGroup,\r\n };\r\n };\r\n\r\n const myValidateForm = values => {\r\n const errors = {};\r\n\r\n if (listingRules) {\r\n try {\r\n const {\r\n listing, photos, rooms, supplements, openHouses, unmodifiedListing,\r\n } = transformRepeatable(values);\r\n\r\n const unModGroup = {\r\n umPhotos: selectedListing?.photos ?? [],\r\n umRooms: selectedListing?.rooms ?? [],\r\n umSupplements: selectedListing?.supplements ?? [],\r\n umOpenHouses: selectedListing?.openHouses ?? [],\r\n umParcels: selectedListing?.parcels ?? [],\r\n umDoors: selectedListing?.doors ?? [],\r\n };\r\n // B: for new validation files, some listing types do not require certain subtables.\r\n // B: the current order is listing, unmodifiedListing, photos, supplements, rooms\r\n\r\n const [photosChanged, photosChangedBool, supplementsChanged, supplementsChangedBool, roomsChanged, roomsChangedBool, openHousesChanged, openHousesChangedBool] = getChanged(unModGroup, photos, rooms, supplements, openHouses);\r\n setPhotosHaveChanged(photosChangedBool);\r\n setSupplementsHaveChanged(supplementsChangedBool);\r\n setRoomsHaveChanged(roomsChangedBool);\r\n setOpenHousesHaveChanged(openHousesChangedBool);\r\n\r\n const formName = listingType ?? editPageName;\r\n let res;\r\n switch (formName) {\r\n case 'Rental':\r\n case 'Residential':\r\n case 'Multifamily':\r\n case 'MobileHome':\r\n res = listingRules?.run(photosChanged, supplementsChanged, roomsChanged, openHousesChanged, listing, unmodifiedListing, photos, supplements, rooms, openHouses);\r\n break;\r\n case 'Commercial':\r\n case 'Farm':\r\n case 'Land':\r\n res = listingRules?.run(photosChanged, supplementsChanged, roomsChanged, openHousesChanged, listing, unmodifiedListing, photos, openHouses);\r\n break;\r\n case 'OpenHouses':\r\n res = listingRules?.run(photosChanged, supplementsChanged, roomsChanged, openHousesChanged, listing, unmodifiedListing, openHouses);\r\n break;\r\n default:\r\n res = listingRules?.run(listing, unmodifiedListing, photos, supplements, rooms);\r\n break;\r\n }\r\n\r\n const { fieldValidationResult, listingIsValid } = res.context.variableContainer;\r\n dispatch(setValidationResult(fieldValidationResult));\r\n if (!listingIsValid) {\r\n errors.listingIsValid = listingIsValid;\r\n }\r\n } catch (er) {\r\n rollbar.error('Error: Listing Validation', er, values);\r\n }\r\n }\r\n return errors;\r\n };\r\n\r\n const validateFigField = (figFieldName, figValidationValue) => {\r\n setValidateFieldName(figFieldName);\r\n setValidateFlag(true);\r\n setValidationValue(figValidationValue);\r\n };\r\n\r\n const fieldsUpdated = () => {\r\n setRunValidation(true);\r\n };\r\n\r\n useEffect(() => {\r\n setRunValidation(true);\r\n }, [repeatableSectionCount]);\r\n\r\n useEffect(() => {\r\n if (runValidation) {\r\n formRef?.current?.validateForm();\r\n setRunValidation(false);\r\n }\r\n }, [runValidation]);\r\n\r\n // Passing data from TAP table to the form\r\n const listingSelected = data => {\r\n if (data) {\r\n const dispatchData = {\r\n ...data,\r\n currentStatus: listingFormData.StandardStatus,\r\n };\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Loading Tax Autopop Data...',\r\n title: '',\r\n showConfirmButton: false,\r\n timer: 2000,\r\n });\r\n if (!isNull(selectedListing)) {\r\n setPreTaxAutoPopListing(selectedListing.listing);\r\n setWasTaxAutoPopped(true);\r\n }\r\n dispatch(loadTaxAutoPopSelected(dispatchData));\r\n }\r\n };\r\n\r\n // prevents form from submitting on enter key press\r\n const handleEnterKeyDown = keyEvent => {\r\n if ((keyEvent.charCode || keyEvent.keyCode) === 13) {\r\n keyEvent.preventDefault();\r\n }\r\n };\r\n\r\n // Handle custom header for supplements and photo sections\r\n const getCustomHeader = section => {\r\n if (section.sectionName === 'Supplements' || section.sectionName === 'Photos' || section.sectionName === 'Rooms' || section.sectionName === 'OpenHouses'\r\n || section.sectionName === 'Doors' || section.sectionName === 'Parcels' || section.sectionName === 'Units' || section.sectionName === 'History') {\r\n return (\r\n <>\r\n {section.sectionLabel}\r\n\r\n
\r\n \r\n \r\n {formEdit ? 'Edit' : 'Create'}\r\n Listing\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CreateListingsPage;\r\n","/* eslint no-console: [\"error\", { allow: [\"warn\", \"error\"] }] */\r\nimport React, {\r\n useEffect, useMemo, useRef, useState,\r\n} from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Formik, Form } from 'formik';\r\nimport { useRollbar, useRollbarPerson } from '@rollbar/react';\r\n\r\nimport Swal from 'sweetalert2';\r\nimport Tab from 'react-bootstrap/Tab';\r\nimport Row from 'react-bootstrap/Row';\r\nimport Col from 'react-bootstrap/Col';\r\nimport LinearProgress from '@mui/material/LinearProgress';\r\n\r\nimport apiService from '@services/apiService';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport FormSearchBar from '@components/form/formComponents/formSearch/FormSearchBar';\r\nimport FormLoader from '@components/loaders/FormLoader';\r\n\r\nimport AgentLookupModal from '@components/form/formComponents/inputGroups/agentLookup/AgentLookupModal';\r\nimport FieldValidator from '@components/form/formHelpers/FieldValidator';\r\nimport FormikInputGroup from '@components/smartAdminUI/input/FormikInputGroup';\r\nimport FormikFieldUpdater from '@components/form/formHelpers/FormikFieldUpdater';\r\nimport LayoutGroupWrapper from '@components/form/formComponents/inputGroups/LayoutGroupWrapper';\r\nimport OfficeLookupModal from '@components/form/formComponents/inputGroups/officeLookup/OfficeLookupModal';\r\nimport RepeatableRoom from '@components/form/formComponents/repeatableRoom/RepeatableRoom';\r\nimport OnSubmitValidationError from '@components/form/formikComponents/OnSubmitValidationError';\r\n\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\n// import Debug from '@components/general/Debug';\r\n\r\nimport {\r\n getSortedErrors,\r\n selectComboValueDict,\r\n selectFormDefinition,\r\n selectInitialTouched,\r\n selectInitialValues,\r\n selectLookupNames,\r\n selectVisiblePageStructure,\r\n selectAllFields,\r\n getOrderedSections,\r\n selectRequiredPerSection,\r\n selectErrorsPerSection,\r\n} from '@redux/selectors/FormSelector';\r\n\r\nimport { selectUploadedImages, selectSectionsPerRepeatableSection } from '@redux/selectors/ListingSelector';\r\nimport { getUserName, getUserMlsId } from '@redux/selectors/UserSelector';\r\nimport { selectOfficeFormData } from '@redux/selectors/FormDataSelector';\r\n\r\nimport {\r\n formSubmitted,\r\n loadComboBoxOptions,\r\n setValidationResult,\r\n} from '@redux/modules/formGeneration';\r\n\r\nimport { clearOffice } from '@redux/modules/office';\r\nimport SectionNav from '@components/smartAdminUI/SectionNav';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport usePrevious from '@hooks/usePrevious';\r\nimport useIsMounted from '@hooks/useIsMounted';\r\nimport FormikField from '@components/form/FormikField';\r\n\r\nconst CreateOfficeForm = () => {\r\n const dispatch = useDispatch();\r\n const isMounted = useIsMounted();\r\n const formRef = useRef();\r\n const history = useHistory(); // use for redirection\r\n\r\n const officeRules = window.FlexRule.RuntimeEngine.fromJavaScript('OnePlatform', 'OfficeRules');\r\n\r\n const sectionsPerRepeatableSection = useSelector(selectSectionsPerRepeatableSection);\r\n const reqPerSection = useSelector(selectRequiredPerSection);\r\n const orderedSections = useSelector(getOrderedSections);\r\n const errPerSection = useSelector(selectErrorsPerSection);\r\n const agentLookup = useSelector(state => state.agent.agentLookup);\r\n const definitionType = useSelector(state => state.formGeneration.definitionType);\r\n const formIsLoading = useSelector(state => state.formGeneration.formIsLoading);\r\n const officeLookup = useSelector(state => state.office.officeLookup);\r\n const officeSelected = useSelector(state => state.office.currentOffice);\r\n const officeFormData = useSelector(selectOfficeFormData);\r\n const operationType = useSelector(state => state.formGeneration.operationType);\r\n const comboSetValueDict = useSelector(selectComboValueDict);\r\n const currentFormDefinition = useSelector(selectFormDefinition);\r\n const lookUpNames = useSelector(selectLookupNames);\r\n const initialTouched = useSelector(selectInitialTouched);\r\n const initialValues = useSelector(selectInitialValues);\r\n const pageStructure = useSelector(selectVisiblePageStructure);\r\n const allFields = useSelector(selectAllFields);\r\n const uploadedImages = useSelector(selectUploadedImages);\r\n const sortedErrors = useSelector(getSortedErrors);\r\n\r\n const [formSubmitting, setFormSubmitting] = useState(false);\r\n const [newComboValue, setNewComboValue] = useState({});\r\n const [runValidation, setRunValidation] = useState(false);\r\n const [validateFieldName, setValidateFieldName] = useState('');\r\n const [validateFlag, setValidateFlag] = useState(false);\r\n const [validationValue, setValidationValue] = useState('');\r\n const [progress, setProgress] = useState(((1 / orderedSections.length) * 100));\r\n const [activeSection, setActiveSection] = useState(1);\r\n\r\n const gaEventTracker = GAEventTracking('Error Office Form Submit');\r\n const username = useSelector(getUserName);\r\n const userMLSID = useSelector(getUserMlsId);\r\n\r\n const rollbar = useRollbar();\r\n useRollbarPerson({ id: userMLSID, username });\r\n\r\n const previousOperationType = usePrevious(operationType);\r\n\r\n const memoizedInitialValues = useMemo(() => initialValues, []);\r\n const rowLockEntity = useMemo(() => ({ type: 'office', id: officeSelected?.UniqueID }), [officeSelected]);\r\n\r\n const comboBubbleWrap = { setNewComboValue };\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n checked,\r\n checkStatus,\r\n createLock,\r\n removeLock,\r\n rowLockingEnabled,\r\n } = useRowLock({ rowLockEntity, isEditOperation: operationType === 'edit', enableRowLocking: operationType === 'edit' });\r\n\r\n const lockReleasedByCurrentUser = useRef(false);\r\n\r\n useEffect(() => {\r\n if (!currentFormDefinition?.length) return;\r\n\r\n if (lookUpNames?.lookupNames?.length) {\r\n dispatch(loadComboBoxOptions(lookUpNames, 'offices'));\r\n }\r\n\r\n formRef?.current?.validateForm();\r\n }, [currentFormDefinition]);\r\n\r\n useEffect(() => {\r\n // prevent the execution of this effect when going from edit mode to create mode;\r\n // current component will not be un-mounted yet when [operationType] gets updated in redux\r\n if (previousOperationType === 'edit' && operationType === 'create') return;\r\n\r\n if (operationType === 'create') {\r\n dispatch(clearOffice());\r\n formRef?.current?.resetForm();\r\n setRunValidation(true);\r\n }\r\n }, [operationType]);\r\n\r\n useEffect(() => {\r\n if (Object.keys(newComboValue).length > 0) {\r\n const newComboKeys = Object.keys(newComboValue);\r\n if (comboSetValueDict) {\r\n if (newComboKeys.length > 0) {\r\n const { fieldName, newValue } = newComboValue;\r\n const comboMutator = comboSetValueDict[fieldName];\r\n comboMutator(newValue);\r\n }\r\n }\r\n }\r\n }, [newComboValue]);\r\n\r\n const getDeltas = (formikState, unmodifiedEntry) => {\r\n const deltas = {};\r\n if (!formikState) return deltas;\r\n Object.entries(unmodifiedEntry).map(([key, value]) => {\r\n if (key in formikState && formikState?.[key] !== value) {\r\n deltas[key] = formikState?.[key];\r\n }\r\n return null;\r\n });\r\n return deltas;\r\n };\r\n\r\n const mergePhotoData = (formikState, uploadList = []) => {\r\n const mergedPhotos = uploadList.flatMap(images => {\r\n if (!images) return [];\r\n return images.map(singleImage => {\r\n const currentDisplayName = singleImage.displayName ?? '';\r\n const imageKey = singleImage?.key ?? singleImage?.UniqueID ?? singleImage?.displayName;\r\n\r\n if (`${currentDisplayName}`.includes('_thumbnail')) return null;\r\n if (singleImage.UniqueID) {\r\n // Handle existing photo.\r\n const { SortOrder, IsDeleted } = formikState[imageKey];\r\n if (IsDeleted) {\r\n // Mark photo as deleted.\r\n return {\r\n UniqueID: singleImage.UniqueID,\r\n SortOrder: singleImage.SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n // Update photo.\r\n const deltas = getDeltas(formikState[imageKey], singleImage);\r\n return {\r\n ...deltas,\r\n UniqueID: singleImage.UniqueID,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }\r\n // Handle new photo.\r\n const {\r\n URL,\r\n Description,\r\n SortOrder,\r\n IsDeleted,\r\n } = formikState[imageKey];\r\n if (IsDeleted) return null;\r\n return {\r\n URL,\r\n Description,\r\n SortOrder,\r\n IsDeleted,\r\n };\r\n }).filter(photo => photo !== null);\r\n });\r\n return mergedPhotos;\r\n };\r\n\r\n const convertDateToUTC = date => new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());\r\n\r\n const getDateValue = value => {\r\n let formattedDate;\r\n if (value) {\r\n const dateUTC = convertDateToUTC(new Date(value));\r\n const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(dateUTC);\r\n const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(dateUTC);\r\n const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(dateUTC);\r\n formattedDate = `${year}-${month}-${day}`;\r\n }\r\n return formattedDate ?? '';\r\n };\r\n\r\n const getBitValue = value => {\r\n let bitValue;\r\n if (value != null && value !== '') {\r\n if (typeof value === 'string') {\r\n bitValue = value === 'true' ? 1 : 0;\r\n } else if (typeof value === 'boolean') {\r\n bitValue = value === true ? 1 : 0;\r\n } else if (typeof value === 'number') {\r\n bitValue = value;\r\n }\r\n }\r\n return bitValue ?? '';\r\n };\r\n\r\n const getStringValue = value => value ?? '';\r\n\r\n const getNumericValue = value => (value != null && value !== '' ? Number(value) : '');\r\n\r\n const getComboBoxValue = value => value ?? '';\r\n\r\n // TODO: move to utility module (used by listing/agent/office)\r\n const valueHasChanged = (fieldName, oldValue, newValue) => {\r\n const inputType = allFields[fieldName]?.InputType;\r\n const dataType = allFields[fieldName]?.DataType;\r\n switch (inputType) {\r\n case 'TextInput':\r\n if (dataType === 'datetime' || dataType === 'date') {\r\n return (getDateValue(oldValue) !== getDateValue(newValue));\r\n }\r\n if (dataType === 'bit') {\r\n return (getBitValue(oldValue) !== getBitValue(newValue));\r\n }\r\n if (dataType === 'string') {\r\n return (getStringValue(oldValue) !== getStringValue(newValue));\r\n }\r\n if (dataType === 'numeric' || dataType === 'decimal' || dataType === 'integer') {\r\n return (getNumericValue(oldValue) !== getNumericValue(newValue));\r\n }\r\n return (oldValue !== newValue);\r\n\r\n case 'ComboBox':\r\n return (getComboBoxValue(oldValue) !== getComboBoxValue(newValue));\r\n\r\n default:\r\n return (oldValue !== newValue);\r\n }\r\n };\r\n\r\n const handlePreviousClick = () => {\r\n const tabNav = document.querySelector('.tab-nav');\r\n const tabActive = tabNav.querySelector('.active');\r\n if (tabActive) {\r\n const navItem = tabActive.parentNode;\r\n const previous = navItem.previousElementSibling;\r\n if (previous) {\r\n previous.querySelector('a').click();\r\n window.scrollTo(0, 0);\r\n setProgress(progress - ((1 / orderedSections.length) * 100));\r\n setActiveSection(activeSection - 1);\r\n }\r\n }\r\n };\r\n\r\n const handleNextClick = () => {\r\n const tabNav = document.querySelector('.tab-nav');\r\n const tabActive = tabNav.querySelector('.active');\r\n if (tabActive) {\r\n const navItem = tabActive.parentNode;\r\n const next = navItem.nextElementSibling;\r\n if (next) {\r\n next.querySelector('a').click();\r\n window.scrollTo(0, 0);\r\n setProgress(progress + ((1 / orderedSections.length) * 100));\r\n setActiveSection(activeSection + 1);\r\n }\r\n }\r\n };\r\n\r\n const handleSubmit = async (values, { setSubmitting }) => {\r\n if (!(operationType === 'create') && !(operationType === 'edit')) return;\r\n\r\n setFormSubmitting(true);\r\n const { Photos, ...office } = values;\r\n\r\n const photosGroup = Photos\r\n ? mergePhotoData(Photos, uploadedImages)\r\n : null;\r\n\r\n // CREATE ONLY\r\n const postBody = {\r\n photos: photosGroup,\r\n };\r\n\r\n if (operationType === 'create') {\r\n postBody.office = { ...office };\r\n } else if (operationType === 'edit') {\r\n const officeData = {\r\n UniqueID: officeSelected.UniqueID,\r\n };\r\n\r\n Object.keys(office).map(key => {\r\n if (valueHasChanged(key, officeSelected[key], values[key])) {\r\n officeData[key] = values[key];\r\n }\r\n return null;\r\n });\r\n\r\n postBody.office = { ...officeData };\r\n }\r\n\r\n let uniqueID;\r\n try {\r\n // If the component has been un-mounted meanwhile, we don't need to update local state anymore, nor display subsequent alerts.\r\n if (!isMounted) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n icon: 'question',\r\n iconColor: 'var(--theme-warning)',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg mr-2 swal-question-office-submit-yes',\r\n denyButton: 'btn btn-primary btn-lg swal-question-office-submit-no',\r\n },\r\n confirmButtonText: 'Yes, Continue',\r\n denyButtonText: 'No, Cancel',\r\n showDenyButton: true,\r\n title: 'Submit Office?',\r\n text: 'Your changes will be reflected in Matrix™ within 10-15 minutes.',\r\n }).then(async choice => {\r\n if (choice.isConfirmed) {\r\n if (operationType === 'create') {\r\n const result = await apiService.Office.insertOffice(postBody);\r\n uniqueID = result?.data?.UniqueID;\r\n } else if (operationType === 'edit') {\r\n uniqueID = officeSelected?.UniqueID;\r\n await apiService.Office.updateOffice(postBody);\r\n }\r\n\r\n dispatch(formSubmitted());\r\n removeLock();\r\n lockReleasedByCurrentUser.current = true;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Office Submitted',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n }).then(() => {\r\n history.push(uniqueID == null ? '/' : `/office/view?UniqueID=${uniqueID}`);\r\n });\r\n }\r\n });\r\n } catch (error) {\r\n // If the component has been un-mounted meanwhile, we don't need to update local state anymore, nor display subsequent alerts.\r\n if (!isMounted) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Office Not Submitted',\r\n text: 'Office could not be submitted at this time. Please contact support.',\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-office-submit',\r\n },\r\n });\r\n if (operationType === 'edit') gaEventTracker(`Edit - ${uniqueID}`, `${username}`);\r\n if (operationType === 'create') gaEventTracker(`Create - ${uniqueID}`, `${username}`);\r\n rollbar.error('Error: Office Form Submit', error, postBody);\r\n }\r\n setFormSubmitting(false);\r\n setSubmitting(false);\r\n };\r\n\r\n const onClickSubmit = (values, actions) => {\r\n if (rowLockingEnabled) return checkStatus(async () => handleSubmit(values, actions)); // check lock status before submitting\r\n return handleSubmit(values, actions);\r\n };\r\n\r\n const transformRepeatable = values => {\r\n const filledValues = { ...values };\r\n const existingLogics = officeRules.descriptions.logics; // existing fields that have validation rules\r\n const newValues = {};\r\n\r\n Object.entries(filledValues).forEach(([key, value]) => { // now handles removal of fields that do not have the validation logic set\r\n const newKeyLogic = `${key}Rules`;\r\n if (existingLogics.includes(newKeyLogic)) {\r\n newValues[key] = value;\r\n }\r\n });\r\n return { office: newValues };\r\n };\r\n\r\n const myValidateForm = values => {\r\n const errors = {};\r\n\r\n if (officeRules) {\r\n try {\r\n const { office, photos } = transformRepeatable(values);\r\n\r\n const res = officeRules.run(office, photos);\r\n\r\n const { fieldValidationResult, officeIsValid } = res.context.variableContainer;\r\n\r\n dispatch(setValidationResult(fieldValidationResult));\r\n\r\n if (!officeIsValid) {\r\n errors.officeIsValid = officeIsValid;\r\n }\r\n } catch (er) {\r\n rollbar.error('Error: Office Validation', er, values);\r\n }\r\n }\r\n return errors;\r\n };\r\n\r\n const validateFigField = (figFieldName, figValidationValue) => {\r\n setValidateFieldName(figFieldName);\r\n setValidateFlag(true);\r\n setValidationValue(figValidationValue);\r\n };\r\n\r\n const fieldsUpdated = () => {\r\n setRunValidation(true);\r\n };\r\n\r\n useEffect(() => {\r\n if (runValidation) {\r\n formRef?.current?.validateForm();\r\n setRunValidation(false);\r\n }\r\n }, [runValidation]);\r\n\r\n // prevents form from submitting on enter key press\r\n const handleEnterKeyDown = keyEvent => {\r\n if ((keyEvent.charCode || keyEvent.keyCode) === 13) {\r\n keyEvent.preventDefault();\r\n }\r\n };\r\n\r\n const handleDiscardChanges = e => {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Discard Changes?',\r\n html: 'Your changes will be discarded.',\r\n iconHtml: '',\r\n iconColor: 'var(--theme-danger)',\r\n buttonsStyling: false,\r\n showDenyButton: true,\r\n confirmButtonText: 'Yes, Continue',\r\n denyButtonText: 'No, Cancel',\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg mr-2 swal-question-office-discard-yes',\r\n denyButton: 'btn btn-primary btn-lg swal-question-office-discard-no',\r\n },\r\n }).then(result => {\r\n if (result.isConfirmed) {\r\n if (operationType) {\r\n e.preventDefault();\r\n removeLock();\r\n lockReleasedByCurrentUser.current = true;\r\n history.push(operationType === 'create' ? '/' : '/office/view');\r\n }\r\n }\r\n });\r\n };\r\n\r\n // updates row lock and displays an alert when changes are being overwritten by another user\r\n useEffect(() => {\r\n const tryRegainRowLock = async () => {\r\n try {\r\n const created = await createLock();\r\n if (!created) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Lock Lost',\r\n text: 'Your lock was lost and could not be regained.',\r\n iconHtml: '',\r\n iconColor: 'var(--theme-warning)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-warning btn-lg swal-warning-office-lockLost',\r\n },\r\n }).then(resp => {\r\n if (resp.value) {\r\n history.push('/office/view');\r\n }\r\n });\r\n }\r\n } catch (err) {\r\n // eslint-disable-next-line no-console\r\n console.error('Error: Office tryRegainRowLock', err);\r\n }\r\n };\r\n\r\n if (operationType === 'edit' && !lockReleasedByCurrentUser.current) {\r\n if (checked && !locked) {\r\n tryRegainRowLock();\r\n return;\r\n }\r\n\r\n if (locked && !lockingAuthorized) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Changes Overwritten',\r\n text: `Your changes have been overwritten by ${lockedBy}.`,\r\n iconHtml: '',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-warning-office-changesOverwritten',\r\n },\r\n }).then(resp => {\r\n if (resp.value) {\r\n history.push('/office/view');\r\n }\r\n });\r\n }\r\n }\r\n }, [locked, lockingAuthorized, lockedBy, operationType]);\r\n\r\n const datePickerWhitelist = ['datetime', 'date', 'time'];\r\n const requiresDatePicker = childDataType => datePickerWhitelist.includes(childDataType);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Create\r\n Office\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CreateOfficePage;\r\n","import React, { useEffect } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\n\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\nimport { setCurrentAgent } from '@redux/modules/agent';\r\nimport { getAgentSelected } from '@redux/selectors/AgentSelector';\r\n\r\nimport CreateAgentForm from '@components/form/forms/CreateAgentForm';\r\n\r\nconst EditAgentPage = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n const currAgent = useSelector(getAgentSelected);\r\n const [urlParam, setUrlParam] = useQueryParam('UniqueID', StringParam);\r\n\r\n const jsonBody = {\r\n action: 'select',\r\n where: {\r\n clause: [],\r\n },\r\n };\r\n\r\n const alertUser = e => {\r\n e.preventDefault(); // cancel the event\r\n e.returnValue = ''; // chrome requires return value to be set\r\n };\r\n\r\n useEffect(() => {\r\n window.addEventListener('beforeunload', alertUser);\r\n\r\n if (urlParam) {\r\n jsonBody.where.clause.push({ name: 'UniqueID', value: urlParam });\r\n dispatch(loadFormDefinition('edit', 'agent', null, urlParam, 'agentACL'));\r\n dispatch(setCurrentAgent(jsonBody));\r\n }\r\n\r\n return () => window.removeEventListener('beforeunload', alertUser);\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n if (currAgent) {\r\n setUrlParam(currAgent?.UniqueID);\r\n }\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currAgent) {\r\n if (location?.search === '' || location?.search !== currAgent?.UniqueID) {\r\n setUrlParam(currAgent?.UniqueID);\r\n }\r\n }\r\n }, [currAgent]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Edit Agent\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default EditAgentPage;\r\n","import React, { useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\n\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\nimport { setCurrentOffice } from '@redux/modules/office';\r\nimport { getCurrentOffice } from '@redux/selectors/OfficeSelector';\r\n\r\nimport CreateOfficeForm from '@components/form/forms/CreateOfficeForm';\r\n\r\nconst EditOfficePageOG = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n const currOffice = useSelector(getCurrentOffice);\r\n\r\n const [urlParam, setUrlParam] = useQueryParam('UniqueID', StringParam); // unique ID of current listing from CLF\r\n\r\n const alertUser = e => {\r\n e.preventDefault(); // cancel the event\r\n e.returnValue = ''; // chrome requires return value to be set\r\n };\r\n\r\n useEffect(() => {\r\n window.addEventListener('beforeunload', alertUser);\r\n\r\n if (urlParam) {\r\n dispatch(loadFormDefinition('edit', 'office', null, urlParam, 'officeACL'));\r\n dispatch(setCurrentOffice(urlParam));\r\n }\r\n\r\n return () => window.removeEventListener('beforeunload', alertUser);\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n if (currOffice) {\r\n setUrlParam(currOffice?.UniqueID);\r\n }\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currOffice) {\r\n if (location?.search === '' || location?.search !== currOffice?.UniqueID) {\r\n setUrlParam(currOffice?.UniqueID);\r\n }\r\n }\r\n }, [currOffice]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Edit\r\n Office\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default EditOfficePageOG;\r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\nimport React from 'react';\r\n\r\nimport Skeleton from '@mui/material/Skeleton';\r\n\r\nconst TableLoaderSmall = () => (\r\n <>\r\n \r\n
\r\n | \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n
|---|---|---|---|---|---|
\r\n
\r\n \r\n);\r\n\r\nexport default TableLoaderSmall;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Button from 'react-bootstrap/Button';\r\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\r\nimport Tooltip from 'react-bootstrap/Tooltip';\r\n\r\nconst ListingActionButtons = ({\r\n viewClicked,\r\n copyClicked,\r\n auditClicked,\r\n currRow,\r\n isEditable,\r\n isCopiable,\r\n isAuditable,\r\n sizeSM,\r\n}) => {\r\n const onViewClick = () => viewClicked(currRow);\r\n const onCopyClick = () => copyClicked(currRow);\r\n const onAuditClick = () => auditClicked(currRow);\r\n\r\n return (\r\n <>\r\n {isEditable && (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nTableSearchInputGroup.propTypes = {\r\n onSearch: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default TableSearchInputGroup;\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSelector } from 'react-redux';\r\n\r\nimport { getUserId, getUserName } from '@redux/selectors/UserSelector';\r\nimport { getImpersonationStatus } from '@redux/selectors/ImpersonationSelector';\r\n\r\nimport { isEmpty, isNull } from 'lodash';\r\n\r\nimport AgentAvatar from '@components/table/avatar/AgentAvatar';\r\nimport TableLoaderSmall from '@components/loaders/TableLoaderSmall';\r\nimport ListingTypeIcons from '@components/table/icons/ListingTypeIcons';\r\nimport ListingActionButtons from '@components/table/actionButtons/ListingActionButtons';\r\nimport TableSearchInputGroup from '@components/smartAdminUI/input/TableSearchInputGroup';\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport DataTable from '../dataTable';\r\nimport translateColumns from '../dataTable/dataTranslate';\r\n\r\nconst ListingsTableWidget = ({\r\n displayData,\r\n onListingSelect,\r\n}) => {\r\n const [slicedTableData, setSlicedTableData] = useState(displayData);\r\n const realUserName = useSelector(getUserName);\r\n const realUserId = useSelector(getUserId);\r\n const impersonationStatus = useSelector(getImpersonationStatus);\r\n const listingsLoading = useSelector(state => state.listing.editableListingLoading);\r\n const showBrokerListings = useSelector(state => state.listing.showBrokerListings);\r\n const hideAgentFullName = useSelector(state => !state.listing.showBrokerListings);\r\n const currentUser = useMemo(() => (impersonationStatus?.ImpersonationActive\r\n ? { userName: impersonationStatus.memberFullName, userId: impersonationStatus.memberUniqueID }\r\n : { userName: realUserName, userId: realUserId }\r\n ), [realUserName, realUserId, impersonationStatus]);\r\n\r\n const actionsFormatter = (cell, row) => (\r\n \r\n handleSearch(e)}\r\n onChange={handleChange}\r\n placeholder=\"Search...\"\r\n ref={n => { input = n; }}\r\n aria-label=\"Table Search\"\r\n aria-describedby=\"tableSearchButton\"\r\n autoComplete=\"off\"\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nListingsTableWidget.propTypes = {\r\n displayData: PropTypes.arrayOf(PropTypes.shape()).isRequired,\r\n onListingSelect: PropTypes.func.isRequired,\r\n onColumnToggle: PropTypes.func,\r\n isModal: PropTypes.bool,\r\n};\r\n\r\nexport default ListingsTableWidget;\r\n","export default __webpack_public_path__ + \"static/media/residential.cafecd31.jpg\";","export default __webpack_public_path__ + \"static/media/multi.b7113201.jpg\";","export default __webpack_public_path__ + \"static/media/mobile.e34c5fdb.jpg\";","export default __webpack_public_path__ + \"static/media/land.43e4413f.jpg\";","export default __webpack_public_path__ + \"static/media/commercial.8ed1fe06.jpg\";","export default __webpack_public_path__ + \"static/media/farm.52c5c7ce.jpg\";","export default __webpack_public_path__ + \"static/media/rent.d110b332.jpg\";","import React from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport Carousel from 'react-bootstrap/Carousel';\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\n\r\nimport ResidentialImage from '@images/createListing/residential.jpg';\r\nimport MultiImage from '@images/createListing/multi.jpg';\r\nimport MobileImage from '@images/createListing/mobile.jpg';\r\nimport LandImage from '@images/createListing/land.jpg';\r\nimport CommercialImage from '@images/createListing/commercial.jpg';\r\nimport FarmImage from '@images/createListing/farm.jpg';\r\nimport RentImage from '@images/createListing/rent.jpg';\r\nimport useAcl from '@hooks/useAcl';\r\n\r\nconst CreateListingWidget = () => {\r\n const dispatch = useDispatch();\r\n const { mainActions } = useAcl();\r\n const handleClicked = e => {\r\n e.stopPropagation();\r\n const clickedItem = e?.currentTarget?.dataset?.id;\r\n if (clickedItem) {\r\n const [operationType, definitionType, listingType] = clickedItem.split('-');\r\n dispatch(loadFormDefinition(operationType, definitionType, listingType, null, 'listing'));\r\n }\r\n };\r\n return (\r\n <>\r\n Residential
\r\nA property that is owned for people to live in. This includes detached, semi-detached, row and condominium properties
\r\n {mainActions.ListingsCreate && (\r\nMulti-Family
\r\nA listing where 2 - 4 units are being sold together, regardless of whether they are connected.
\r\n {mainActions.ListingsCreate && (\r\nRental
\r\nResidential properties listed for rent or lease. This includes all residential property sub-types.
\r\n {mainActions.ListingsCreate && (\r\nMobile
\r\nMobile home on rented/leased land. Note: If a mobile home includes land with the sale it should be listed under detached residential
\r\n {mainActions.ListingsCreate && (\r\nLand
\r\nA property that does not have a dwelling on it, including rural acreage parcels and vacant residential lots. Should include all land parcels regardless of their zoning
\r\n {mainActions.ListingsCreate && (\r\nCommercial
\r\nOffice, industrial, retail property and multi-family with 5 or more units being sold in a single transaction
\r\n {mainActions.ListingsCreate && (\r\nAgribusiness
\r\nA property where the primary purpose is agricultural
\r\n {mainActions.ListingsCreate && (\r\n\r\n {isEditable && (\r\n \r\n \r\n \r\n )}\r\n {isAuditable && (\r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nAgentActionButtons.propTypes = {\r\n viewClicked: PropTypes.func.isRequired,\r\n auditClicked: PropTypes.func.isRequired,\r\n isAuditable: PropTypes.bool.isRequired,\r\n isEditable: PropTypes.bool.isRequired,\r\n currRow: PropTypes.shape({\r\n UniqueID: PropTypes.number,\r\n }),\r\n};\r\n\r\nexport default AgentActionButtons;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEmpty } from 'lodash';\r\n\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport TableSearchInputGroup from '@components/smartAdminUI/input/TableSearchInputGroup';\r\nimport AgentActionButtons from './actionButtons/AgentActionButtons';\r\nimport DataTable from '../dataTable';\r\nimport translateColumns from '../dataTable/dataTranslate';\r\n\r\nconst AgentsTable = ({\r\n displayData,\r\n onAgentSelect,\r\n onAuditClick,\r\n isModal = false,\r\n}) => {\r\n // NOTE: P9 mentioned that isCopiable will always be false so its not included\r\n const actionsFormatter = (cell, row) => (\r\n \r\n
\r\n \r\n \r\n Search\r\n Agent\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SearchAgentPage;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEmpty } from 'lodash';\r\n\r\nimport ListingTypeIcons from '@components/table/icons/ListingTypeIcons';\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport TableSearchInputGroup from '@components/smartAdminUI/input/TableSearchInputGroup';\r\nimport ListingActionButtons from '@components/table/actionButtons/ListingActionButtons';\r\nimport AgentAvatar from '@components/table/avatar/AgentAvatar';\r\nimport DataTable from '../dataTable';\r\nimport translateColumns, { translateSort } from '../dataTable/dataTranslate';\r\n\r\nconst ListingsTable = ({\r\n displayData,\r\n onListingSelect,\r\n onCopyClick,\r\n onAuditClick,\r\n isModal = false,\r\n}) => {\r\n const actionsFormatter = (cell, row) => (\r\n \r\n dispatch(loadFormDefinition('create', 'agent', null, null, 'agentACL'))}>\r\n \r\n Create Agent\r\n \r\n )}\r\n >\r\n
\r\n {!isNull(searchResults) && (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n Search\r\n Listings\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SearchListingsPage;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport isEmpty from 'lodash/isEmpty';\r\n\r\n/*\r\n SmartAdmin input group - default input element for forms\r\n \r\n \r\n
\r\n {!isNull(searchResults) && (\r\n \r\n {mainActions.ListingsCreate && (\r\n \r\n \r\n Create Listing\r\n \r\n )}\r\n
\r\n \r\n )}\r\n >\r\n \r\n \r\n Please note that the search will only return listings you are authorized to see.\r\n
\r\n\r\n \r\n \r\n
\r\n )}\r\n \r\n {!isEmpty(label) ? : null}\r\n
\r\n );\r\n};\r\n\r\nInputGroup.propTypes = {\r\n id: PropTypes.string,\r\n label: PropTypes.string,\r\n placeholder: PropTypes.string.isRequired,\r\n value: PropTypes.node,\r\n type: PropTypes.string.isRequired,\r\n};\r\n\r\nInputGroup.defaultProps = {\r\n id: '',\r\n label: null,\r\n};\r\n\r\nexport default InputGroup;\r\n","import React from 'react';\r\nimport Select from 'react-select';\r\n\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { searchOffices, clearOfficeSearch } from '@redux/modules/office';\r\n\r\nimport useObjectState from '@hooks/useObjectState';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport InputGroup from '@components/smartAdminUI/input/InputGroup';\r\n\r\nconst options = [\r\n { label: 'Active', value: 'A' },\r\n { label: 'Inactive', value: 'I' },\r\n { label: 'Pending', value: 'P' },\r\n { label: 'Suspended', value: 'S' },\r\n { label: 'Terminated', value: 'T' },\r\n];\r\n\r\nconst initialState = {\r\n OfficeMlsId: '',\r\n OfficeManagerMlsId: '',\r\n OfficeManagerFullName: '',\r\n officeName: '',\r\n OfficeCity: '',\r\n OfficeStatus: options[0],\r\n};\r\nconst OfficeAdvancedSearch = () => {\r\n const officeSearchLoading = useSelector(state => state.office.isLoading);\r\n\r\n // custom hook, takes a key:value pair an merges into state object (immutably)\r\n const [searchBarState, setSearchBarState] = useObjectState(initialState);\r\n const dispatch = useDispatch();\r\n\r\n const handleSubmit = e => {\r\n e.preventDefault();\r\n dispatch(searchOffices({\r\n ...searchBarState,\r\n OfficeStatus: searchBarState.OfficeStatus.value,\r\n }));\r\n };\r\n const handleReset = () => {\r\n setSearchBarState(initialState);\r\n dispatch(clearOfficeSearch());\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default OfficeAdvancedSearch;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from '@components/smartAdminUI/Button';\r\n\r\nconst OfficeActionButtons = ({\r\n viewClicked,\r\n auditClicked,\r\n currRow,\r\n isEditable,\r\n isAuditable,\r\n}) => {\r\n const onViewClick = () => viewClicked(currRow);\r\n const onAuditClick = () => auditClicked(currRow);\r\n\r\n return (\r\n \r\n {isEditable && (\r\n \r\n \r\n \r\n )}\r\n {isAuditable && (\r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\nOfficeActionButtons.propTypes = {\r\n viewClicked: PropTypes.func.isRequired,\r\n auditClicked: PropTypes.func.isRequired,\r\n currRow: PropTypes.shape({\r\n UniqueID: PropTypes.number,\r\n }),\r\n isAuditable: PropTypes.bool.isRequired,\r\n isEditable: PropTypes.bool.isRequired,\r\n};\r\n\r\nexport default OfficeActionButtons;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEmpty } from 'lodash';\r\n\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport TableSearchInputGroup from '@components/smartAdminUI/input/TableSearchInputGroup';\r\nimport OfficeActionButtons from './actionButtons/OfficeActionButtons';\r\nimport DataTable from '../dataTable';\r\nimport translateColumns, { translateSort } from '../dataTable/dataTranslate';\r\n\r\nconst OfficesTable = ({\r\n displayData,\r\n onOfficeSelect,\r\n onAuditClick,\r\n isModal = false,\r\n}) => {\r\n // NOTE: P9 mentioned that isCopiable will always be false so its not included\r\n const actionsFormatter = (cell, row) => (\r\n \r\n
\r\n \r\n \r\n Search\r\n Offices\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SearchOfficePage;\r\n","/* eslint-disable jsx-a11y/control-has-associated-label */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Skeleton from '@mui/material/Skeleton';\r\n\r\nconst ViewLoader = ({ type }) => (\r\n <>\r\n \r\n dispatch(loadFormDefinition('create', 'office', null, null, 'officeACL'))}>\r\n \r\n Create Office\r\n \r\n )}\r\n >\r\n
\r\n {!isNull(searchResults) && (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n);\r\n\r\nViewLoader.propTypes = {\r\n type: PropTypes.string.isRequired,\r\n};\r\n\r\nexport default ViewLoader;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\n\r\nimport Swal from 'sweetalert2';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport isEmpty from 'lodash/isEmpty';\r\nimport { loadAgentPhoto, setCurrentAgent } from '@redux/modules/agent';\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\nimport { getAgentSelected, selectAgentPreferredPhoto, selectAgentPreferredPhotoDetails } from '@redux/selectors/AgentSelector';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\nimport { addTeamMember, removeTeamMember, searchTeamMember } from '@redux/modules/teamsManagement';\r\nimport { selectCanBeImpersonatedBy, selectCanImpersonate } from '@redux/selectors/TeamsManagementSelector';\r\nimport Moment from 'react-moment';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport useAcl from '@hooks/useAcl';\r\n\r\nimport TeamMembersTable from '@components/table/TeamMembersTable';\r\nimport TeamLeadersTable from '@components/table/TeamLeadersTable';\r\nimport AgentLookupModal from '@components/form/formComponents/inputGroups/agentLookup/AgentLookupModal';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport ViewLoader from '@components/loaders/ViewLoader';\r\n// import TierModal from '@components/modal/TierModal';\r\n\r\n// import Alert from 'react-bootstrap/Alert';\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\n// import Collapse from 'react-bootstrap/Collapse';\r\n\r\nconst operationType = 'edit';\r\nconst definitionType = 'agent';\r\n\r\nconst ViewAgents = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n\r\n const currAgent = useSelector(getAgentSelected);\r\n const username = useSelector(getUserName);\r\n const currentAgentPhotoDetails = useSelector(selectAgentPreferredPhotoDetails);\r\n const currentAgentPhoto = useSelector(selectAgentPreferredPhoto);\r\n const canBeImpersonatedByData = useSelector(selectCanBeImpersonatedBy);\r\n const canImpersonateData = useSelector(selectCanImpersonate);\r\n const memberName = useMemo(() => currAgent?.MemberFullName ?? currAgent?.MemberFirstName.concat(' ', currAgent?.MemberLastName), [currAgent]);\r\n\r\n const [currentAgentPhotoURL, setCurrentAgentPhotoURL] = useState(null);\r\n const [editButtonClicked, setEditButtonClicked] = useState(false);\r\n // const [open, setOpen] = useState(false);\r\n\r\n const [urlParam, setUrlParam] = useQueryParam('UniqueID', StringParam);\r\n\r\n // const [tierModalOpen, setTierModalOpen] = useState(false);\r\n\r\n const jsonBody = {\r\n action: 'select',\r\n where: {\r\n clause: [],\r\n },\r\n };\r\n\r\n const rowLockEntity = useMemo(() => ({ type: 'agent', id: currAgent?.UniqueID }), [currAgent]);\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n lockedByMeWithinSession,\r\n impersonatedBy,\r\n isAdmin,\r\n lastUpdatedOn,\r\n lastCheckedOn,\r\n checkStatus,\r\n createLock,\r\n discardChanges,\r\n LockMessage,\r\n } = useRowLock({ rowLockEntity });\r\n\r\n const getCurrentAgentPhoto = photoURL => {\r\n dispatch(loadAgentPhoto(photoURL));\r\n };\r\n\r\n const onEditAgent = () => {\r\n if (currAgent) {\r\n dispatch(loadFormDefinition(operationType, definitionType, null, currAgent.UniqueID, 'agentACL'));\r\n }\r\n };\r\n\r\n const onClickEdit = () => {\r\n setEditButtonClicked(true);\r\n createLock(onEditAgent);\r\n };\r\n\r\n const {\r\n getAgentAcl,\r\n canEditForm,\r\n canAddTeamMember, canAddToTeam, canViewTeam, canEditTeam,\r\n isAllComplete,\r\n } = useAcl();\r\n const isAllAclComplete = isAllComplete();\r\n\r\n useEffect(() => {\r\n if (urlParam) {\r\n jsonBody.where.clause.push({ name: 'UniqueID', value: urlParam });\r\n dispatch(setCurrentAgent(jsonBody));\r\n }\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n if (currAgent) {\r\n setUrlParam(currAgent?.UniqueID, 'replaceIn');\r\n }\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currAgent?.UniqueID) {\r\n // Retrieve the teams details for current agent.\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n\r\n // retrieves EDIT and COPY permissions for agent\r\n getAgentAcl({\r\n action: 'view',\r\n formname: 'Agent',\r\n uniqueId: currAgent.UniqueID,\r\n });\r\n\r\n // retrieves form permissions for agent\r\n getAgentAcl({\r\n action: 'forms',\r\n formname: 'Agent',\r\n uniqueId: currAgent.UniqueID,\r\n });\r\n\r\n if (location?.search === '' || location?.search !== currAgent?.UniqueID) {\r\n setUrlParam(currAgent?.UniqueID, 'replaceIn');\r\n }\r\n }\r\n }, [currAgent]);\r\n\r\n useEffect(() => {\r\n if (currentAgentPhotoDetails?.URL) {\r\n getCurrentAgentPhoto(currentAgentPhotoDetails.URL);\r\n }\r\n }, [currentAgentPhotoDetails]);\r\n\r\n useEffect(() => {\r\n if (currentAgentPhotoURL) URL.revokeObjectURL(currentAgentPhotoURL);\r\n if (currentAgentPhoto) setCurrentAgentPhotoURL(URL.createObjectURL(currentAgentPhoto));\r\n return () => currentAgentPhotoURL && URL.revokeObjectURL(currentAgentPhotoURL);\r\n }, [currentAgentPhoto]);\r\n\r\n const onAddMemberToCurrentAgentTeam = async member => {\r\n if (!(currAgent?.UniqueID && member?.UniqueID)) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Adding Member...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const success = await dispatch(addTeamMember({ targetMemberkey: member.UniqueID, targetTeamKey: currAgent.UniqueID }));\r\n\r\n if (success) {\r\n Swal.fire({\r\n position: 'center',\r\n title: 'Member Added',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n });\r\n // Refresh the teams details for current agent.\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Added',\r\n html: `${member.MemberFullName} could not be added at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotAdded',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onAddMemberToCurrentAgentTeam', `${member.MemberFullName} Could not be added. Please contact support.`);\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Added',\r\n html: `${member.MemberFullName} could not be added at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotAdded',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onAddMemberToCurrentAgentTeam', err);\r\n }\r\n };\r\n\r\n const onAddCurrentAgentToTeam = async member => {\r\n if (!(currAgent?.UniqueID && member?.UniqueID)) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Adding Member...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const success = await dispatch(addTeamMember({ targetMemberkey: currAgent.UniqueID, targetTeamKey: member.UniqueID }));\r\n\r\n if (success) {\r\n Swal.fire({\r\n position: 'center',\r\n title: 'Member Added',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n });\r\n // Refresh the teams details for current agent.\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Added',\r\n html: `${member.MemberFullName} could not be added at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotAdded',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onAddCurrentAgentToTeam', `${currAgent.MemberFullName} Could not be added. Please contact support.`);\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Added',\r\n html: `${member.MemberFullName} could not be added at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotAdded',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onAddCurrentAgentToTeam', err);\r\n }\r\n };\r\n\r\n const onRemoveMemberFromCurrentAgentTeam = async member => {\r\n if (!(currAgent?.UniqueID && member?.TeamMemberKeyNumeric)) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Removing Member...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const success = await dispatch(removeTeamMember({ targetMemberkey: member.TeamMemberKeyNumeric, targetTeamKey: currAgent.UniqueID }));\r\n\r\n Swal.fire({\r\n position: 'center',\r\n title: 'Member Removed',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n });\r\n\r\n if (success) {\r\n // Refresh the teams details for current agent.\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Removed',\r\n html: `${member.MemberFullName} could not be removed at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotRemoved',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onRemoveMemberFromCurrentAgentTeam', `${member.MemberFullName} Could not be removed. Please contact support.`);\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Removed',\r\n html: `${member.MemberFullName} could not be removd at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotRemoved',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onRemoveMemberFromCurrentAgentTeam', err);\r\n }\r\n };\r\n\r\n const onRemoveCurrentAgentFromTeam = async member => {\r\n if (!(currAgent?.UniqueID && member?.TeamLeadKeyNumeric)) return;\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Removing Member...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const success = await dispatch(removeTeamMember({ targetMemberkey: currAgent.UniqueID, targetTeamKey: member.TeamLeadKeyNumeric }));\r\n\r\n if (success) {\r\n // Refresh the teams details for current agent.\r\n Swal.fire({\r\n position: 'center',\r\n title: 'Member Removed',\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n });\r\n dispatch(searchTeamMember({ targetMemberkey: currAgent.UniqueID }));\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Removed',\r\n html: `${member.MemberFullName} could not be removed at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotRemoved',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onRemoveCurrentAgentFromTeam', `${currAgent.MemberFullName} Could not be removed. Please contact support.`);\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Member Not Removed',\r\n html: `${member.MemberFullName} could not be removed at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-agent-memberNotRemoved',\r\n },\r\n });\r\n // eslint-disable-next-line no-console\r\n console.error('Error: View Agent onRemoveCurrentAgentFromTeam', err);\r\n }\r\n };\r\n\r\n // const TieredBillingAlertMessage = () => (\r\n // <>\r\n // \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n { type === 'agent' ? (\r\n
\r\n \r\n \r\n
\r\n ) : (\r\n \r\n { type === 'listings' ? : }\r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n More details will be posted here and through your local board in the coming weeks, however, in the meantime, below are a few key questions that we've already answered for you:
\r\n //- \r\n //
- \r\n // What service tier will I be defaulted into in 2024?\r\n //
\r\n // All members will be put into the MLS Elite (full access) tier so that no work\r\n // done to date within Prospects CRM Web/Mobile or Cloud CMA will be lost during the\r\n // transition.\r\n //
\r\n // \r\n // - \r\n // What are the risks in moving from the MLS Elite (full access) tier down to MLS Basic tier?\r\n //
\r\n // \r\n // If you choose to move from the MLS Elite tier down to MLS Basic tier, it should be noted that \r\n // all of your previous work within Prospects Web/Mobile and/or Cloud CMA will be lost and will not be\r\n // recoverable once your user ID is removed for these MLS Elite tools.\r\n // \r\n //
\r\n // \r\n // - \r\n // What do I gain by staying with the MLS Elite (full access) tier?\r\n //
\r\n // By choosing the MLS Elite tier you will have access to the full suite of sales management tools\r\n // including Prospects CRM Web, Prospects CRM Mobile and Cloud CMA at the lowest cost, along with any\r\n // new tools and innovations that the Pillar 9™ development team launches in the future.\r\n //
\r\n // \r\n // - \r\n // What are the fees that my board will charge me based on the choice I make for the tools I want?\r\n //
\r\n // Please see your local board communications for 2024 fee details.\r\n //
\r\n // \r\n //
See what's included in each tier of Pillar 9™ technology & business management tools by clicking the button below:
\r\n // \r\n // \r\n // );\r\n\r\n if (currAgent) {\r\n return (\r\n <>\r\n\r\n
\r\n {!isAllAclComplete && !canEditForm ? (\r\n \r\n \r\n View\r\n Agent\r\n
\r\n */}\r\n {/* Pillar 9™ Technology & Business Management Tools – Choose your tier of services for 2024 */}\r\n {/* */}\r\n {/*
*/}\r\n {/* <> */}\r\n {/* */}\r\n {/* Starting in 2024, Pillar 9™ is offering members more choices in how you access the */}\r\n {/* tools and technology best suited for your business. Soon, you will be */}\r\n {/* able to come back here and choose the tier of business tools that best suits your needs. */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {memberName}
\r\n{currAgent.OfficeName}
\r\n\r\n
\r\n \r\n \r\n {currAgent.MemberDirectPhone}\r\n \r\n
\r\n )}\r\n { !isEmpty(currAgent.MemberEmail) && (\r\n\r\n \r\n \r\n {currAgent.MemberEmail}\r\n \r\n
\r\n )}\r\n\r\n \r\n {canEditForm && (\r\n \r\n \r\n Edit\r\n \r\n )}\r\n \r\n )}\r\n >\r\n \r\n \r\n { currAgent.LanguageSpoken && (\r\n
\r\n \r\n
\r\n | Languages | \r\n{currAgent.LanguageSpoken} | \r\n
|---|---|
| Address | \r\n{currAgent.MemberAddress1} | \r\n
| City | \r\n{currAgent.MemberCity} | \r\n
| Postal Code | \r\n{currAgent.MemberPostalCode} | \r\n
| Mobile | \r\n\r\n \r\n \r\n {currAgent.CellPhone}\r\n \r\n | \r\n
| Fax | \r\n\r\n \r\n \r\n {currAgent.MemberFax}\r\n \r\n | \r\n
| Website | \r\n\r\n \r\n \r\n {currAgent.PrimaryWebsite}\r\n \r\n | \r\n
| Office Phone | \r\n\r\n \r\n \r\n {currAgent.OfficePhone}\r\n \r\n | \r\n
| Membership Date | \r\n|
| Termination Date | \r\n|
| Social | \r\n\r\n { currAgent.WebLinkedIn && }\r\n { currAgent.WebFacebook && }\r\n { currAgent.WebTwitter && }\r\n { currAgent.MemberInstagram && }\r\n | \r\n
\r\n {canViewTeam && (\r\n <>\r\n {canEditTeam && (\r\n <>\r\n
\r\n \r\n )}\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\nexport default ViewAgents;\r\n","export default __webpack_public_path__ + \"static/media/ShowingTime.9d83d4d9.png\";","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSelector } from 'react-redux';\r\nimport md5 from 'md5';\r\nimport { selectCurrentListing } from '@redux/selectors/ListingSelector';\r\nimport { getUserMlsId, getUserName } from '@redux/selectors/UserSelector';\r\nimport { getImpersonationStatus } from '@redux/selectors/ImpersonationSelector';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport showingTimeIcon from '@images/logos/vendor/ShowingTime.png';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst ShowingTimeWidget = ({ disabled }) => {\r\n const currListing = useSelector(selectCurrentListing);\r\n // eslint-disable-next-line no-unused-vars\r\n const impersonationStatus = useSelector(getImpersonationStatus);\r\n const realUserMlsId = useSelector(getUserMlsId);\r\n const userMlsId = useMemo(() => (impersonationStatus?.ImpersonationActive ? impersonationStatus?.memberMlsId : realUserMlsId), [impersonationStatus]);\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n const getDateTimeNowUTC = () => new Date().toISOString();\r\n const getMD5Signature = () => md5(`${getDateTimeNowUTC() + currListing.ListingID + userMlsId}150535003-T2E8K4`);\r\n\r\n const getCurrentListingAddress = () => {\r\n const streetNumber = currListing.StreetNumber?.toString() ?? '';\r\n const streetName = currListing.StreetName;\r\n const streetSuffix = currListing.StreetSuffix?.toString() ?? '';\r\n const streetDirSuffix = currListing.StreetDirSuffix?.toString() ?? '';\r\n return `${streetNumber} ${streetName} ${streetSuffix} ${streetDirSuffix}`;\r\n };\r\n\r\n const getShowingTimeUrl = () => {\r\n if (!(currListing && userMlsId)) return null;\r\n return `https://setup-sso.showingtime.com/config?\r\n level=listing\r\n &siteid=${encodeURIComponent('CORE.PILLARNINE.I')}\r\n &mlsid=${encodeURIComponent('PILLARNINE')}\r\n &listingid=${encodeURIComponent(currListing.ListingID)}\r\n &userid=${encodeURIComponent(userMlsId)}\r\n &laid=${encodeURIComponent(currListing.ListAgentMlsId)}\r\n &listingoffice=${encodeURIComponent(currListing.ListOfficeMlsId)}\r\n &paddr=${encodeURIComponent(getCurrentListingAddress())}\r\n &pcity=${encodeURIComponent(currListing.City)}\r\n &pstate=${encodeURIComponent(currListing.StateOrProvince)}\r\n &pzip=${encodeURIComponent(currListing.PostalCode)}\r\n &price=${encodeURIComponent(currListing.ListPrice?.toString())}\r\n pstatus=${encodeURIComponent(currListing.StandardStatus)}\r\n &datetime=${encodeURIComponent(getDateTimeNowUTC())}\r\n &signature=${encodeURIComponent(getMD5Signature().toUpperCase())}`.replace(/\\s/g, '');\r\n };\r\n return (\r\n \r\n \r\n \r\n Add\r\n \r\n )\r\n )}\r\n >\r\n
\r\n Who this agent can impersonate:
\r\n\r\n \r\n \r\n Add\r\n \r\n )\r\n )}\r\n >\r\n
\r\n \r\n )}\r\n Who can impersonate this agent:
\r\n\r\n 
\r\n {\r\n const url = getShowingTimeUrl();\r\n if (url) {\r\n window.open(url, '_blank');\r\n gaEventTracker('Opened Showing Time', `${username}`);\r\n }\r\n }}\r\n variant=\"primary\"\r\n disabled={disabled}\r\n >\r\n \r\n ShowingTime\r\n \r\n
\r\n );\r\n};\r\n\r\nShowingTimeWidget.propTypes = {\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nexport default ShowingTimeWidget;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { useHistory, useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\nimport Swal from 'sweetalert2/src/sweetalert2';\r\nimport { useRollbar, useRollbarPerson } from '@rollbar/react';\r\n\r\nimport Avatar from '@mui/material/Avatar';\r\nimport startCase from 'lodash/startCase';\r\nimport lowerCase from 'lodash/lowerCase';\r\nimport upperCase from 'lodash/upperCase';\r\nimport isEmpty from 'lodash/isEmpty';\r\nimport sortBy from 'lodash/sortBy';\r\nimport { loadFormDefinition, loadCityNames } from '@redux/modules/formGeneration';\r\nimport { getUserName, getUserMlsId } from '@redux/selectors/UserSelector';\r\nimport {\r\n checkForAutoSave,\r\n loadAutoSave,\r\n removeAutoSave,\r\n loadListingById,\r\n loadListingToCopyById,\r\n loadListingPhoto,\r\n loadListingPreferredPhotoDetails,\r\n reloadListingClicked,\r\n} from '@redux/modules/listing';\r\n\r\nimport {\r\n selectCurrentListing,\r\n selectCurrentListingPreferredPhotoDetails,\r\n selectCurrentListingPhoto,\r\n} from '@redux/selectors/ListingSelector';\r\n\r\nimport { listingDict } from '@redux/constants/GeneralConstants';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport useAcl from '@hooks/useAcl';\r\nimport useInterval from '@hooks/useInterval';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Modal from '@components/smartAdminUI/Modal';\r\nimport Input from '@components/smartAdminUI/input/InputGroup';\r\nimport ShowingTimeWidget from '@components/widget/ShowingTimeWidget';\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\nimport ViewLoader from '@components/loaders/ViewLoader';\r\n\r\nimport apiService from '@services/apiService';\r\n\r\nconst operationType = 'edit';\r\nconst definitionType = 'listings';\r\n\r\nconst listingAttributesWhiteList = [\r\n 'ListingID',\r\n 'PropertyType',\r\n 'UnparsedAddress',\r\n 'City',\r\n 'StateOrProvince',\r\n 'PostalCode',\r\n];\r\n\r\nconst statusTasks = {\r\n chgActive: true,\r\n chgPending: true,\r\n chgSold: true,\r\n chgExp: true,\r\n chgWithdrawn: true,\r\n chgTerm: true,\r\n};\r\n\r\nconst otherTasks = {\r\n chgDetails: true,\r\n chgPropertyType: true,\r\n chgLeased: true,\r\n chgMajor: true,\r\n chgDel: true,\r\n};\r\n\r\nconst otherTaskConfig = [\r\n {\r\n taskCode: 'chgDetails',\r\n iconClass: 'far fa-file-edit fa-2x',\r\n buttonText: 'Change Details',\r\n },\r\n {\r\n taskCode: 'chgPropType',\r\n iconClass: 'far fa-exclamation-triangle fa-2x',\r\n buttonText: 'Change Property Type',\r\n },\r\n {\r\n taskCode: 'chgLeased',\r\n iconClass: 'far fa-house-leave fa-2x',\r\n buttonText: 'Change to Leased',\r\n },\r\n {\r\n taskCode: 'chgMajor',\r\n iconClass: 'far fa-database fa-2x',\r\n buttonText: 'Major Correction',\r\n },\r\n {\r\n taskCode: 'chgDel',\r\n iconClass: 'far fa-trash-alt fa-2x',\r\n buttonText: 'Delete Listing',\r\n },\r\n];\r\n\r\nconst statusTaskConfig = [\r\n {\r\n taskCode: 'chgActive',\r\n buttonText: 'Active',\r\n },\r\n {\r\n taskCode: 'chgPending',\r\n buttonText: 'Pending',\r\n },\r\n {\r\n taskCode: 'chgSold',\r\n buttonText: 'Sold',\r\n },\r\n {\r\n taskCode: 'chgTerm',\r\n buttonText: 'Terminated',\r\n },\r\n {\r\n taskCode: 'chgExp',\r\n buttonText: 'Expired',\r\n },\r\n {\r\n taskCode: 'chgWithdrawn',\r\n buttonText: 'Withdrawn',\r\n },\r\n];\r\n\r\nconst ViewListings = () => {\r\n const dispatch = useDispatch();\r\n const history = useHistory();\r\n const location = useLocation();\r\n\r\n const [autoSaveButtonClicked, setAutoSaveButtonClicked] = useState(false);\r\n const [otherBtnArr, setOtherBtnArr] = useState([]);\r\n const [taskBtnArr, setTaskBtnArr] = useState([]);\r\n const [currentListingPhotoUrl, setCurrentListingPhotoUrl] = useState(null);\r\n const [hideButton, setHideButton] = useState(true);\r\n const [inputString, setInputString] = useState(''); // for ensuring the user of listing deletion\r\n const [isFormLoading, setIsFormLoading] = useState(false);\r\n const [rowLockButtonClicked, setRowLockButtonClicked] = useState(false);\r\n const [editButtonClicked, setEditButtonClicked] = useState(false);\r\n const [deleteButtonClicked, setDeleteButtonClicked] = useState(false);\r\n const [canAccessShowingTime, setCanAccessShowingTime] = useState(false);\r\n const [canViewOpenHouses, setCanViewOpenHouses] = useState(false);\r\n\r\n const cityNames = useSelector(state => state.formGeneration.cityNames);\r\n\r\n const autoSaveExists = useSelector(state => state.listing.autoSaveExists);\r\n const currListing = useSelector(selectCurrentListing);\r\n const currentListingPhoto = useSelector(selectCurrentListingPhoto);\r\n const currentListingPreferredPhotoDetails = useSelector(selectCurrentListingPreferredPhotoDetails);\r\n\r\n const autoSaveCriteria = useMemo(() => ({ ResourceUnique: currListing?.UniqueID }), [currListing]);\r\n const rowLockEntity = useMemo(() => ({ type: 'listing', id: currListing?.UniqueID }), [currListing]);\r\n\r\n const [urlParam, setUrlParam] = useQueryParam('ListingID', StringParam);\r\n\r\n const listingCode = currListing?.PropertyType?.toString().toLowerCase();\r\n const listingType = useMemo(() => listingDict[listingCode], [listingCode]);\r\n const memoizedListingEntries = useMemo(() => (currListing ? Object.entries(currListing) : []), [currListing]);\r\n const username = useSelector(getUserName);\r\n const userMLSID = useSelector(getUserMlsId);\r\n\r\n const rollbar = useRollbar();\r\n useRollbarPerson({ id: userMLSID, username });\r\n\r\n const lookupCities = { lookupnames: ['Lookup_Property_Listing_City'] };\r\n\r\n const jsonBody = {\r\n where: {\r\n clause: [],\r\n },\r\n };\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n lockedByMe,\r\n lockedByMeWithinSession,\r\n impersonatedBy,\r\n isAdmin,\r\n lastUpdatedOn,\r\n lastCheckedOn,\r\n checkStatus,\r\n createLock,\r\n removeLock,\r\n discardChanges,\r\n AutoSaveMessage,\r\n LockMessage,\r\n } = useRowLock({ rowLockEntity });\r\n\r\n const checkAutoSave = () => {\r\n if (!autoSaveCriteria?.ResourceUnique) return;\r\n dispatch(checkForAutoSave(autoSaveCriteria));\r\n };\r\n\r\n useEffect(() => {\r\n checkAutoSave();\r\n }, [autoSaveCriteria]);\r\n\r\n /* If autoSave exists, then start to regularly check for autoSave changes. */\r\n useInterval(checkAutoSave, autoSaveExists ? (1000 * 60) : null);\r\n\r\n const {\r\n getListingAcl,\r\n canEditForm, canCopyForm, canAuditForm, formPermissions,\r\n isAllComplete,\r\n } = useAcl();\r\n const isAllAclComplete = isAllComplete();\r\n\r\n useEffect(() => {\r\n dispatch(loadCityNames(lookupCities));\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (Object.keys(formPermissions).length > 0) {\r\n setCanAccessShowingTime(formPermissions.showingTime);\r\n setCanViewOpenHouses(formPermissions.openHouse);\r\n }\r\n }, [formPermissions]);\r\n\r\n useEffect(() => {\r\n if (urlParam) {\r\n jsonBody.where.clause.push({ name: 'ListingID', value: urlParam });\r\n dispatch(reloadListingClicked(jsonBody));\r\n }\r\n\r\n let otherButtons = Object.keys(otherTasks).map(key => {\r\n if (otherTasks[key]) return otherTaskConfig.find(btnCfg => btnCfg.taskCode === key);\r\n return null;\r\n });\r\n otherButtons = otherButtons.filter(btn => btn);\r\n setOtherBtnArr(otherButtons);\r\n\r\n let statusButtons = Object.keys(statusTasks).map(key => {\r\n if (statusTasks[key]) return statusTaskConfig.find(btnCfg => btnCfg.taskCode === key);\r\n return null;\r\n });\r\n statusButtons = statusButtons.filter(btn => btn);\r\n setTaskBtnArr(statusButtons);\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n setUrlParam(currListing?.ListingID, 'replaceIn');\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currListing?.UniqueID) {\r\n // retrieves EDIT, COPY and AUDITLOG permissions\r\n getListingAcl({\r\n action: 'view',\r\n uniqueId: currListing.UniqueID,\r\n });\r\n\r\n // retrieves forms accessible to user\r\n getListingAcl({\r\n action: 'forms',\r\n uniqueId: currListing.UniqueID,\r\n });\r\n\r\n if (location?.search === '' || location?.search !== currListing?.ListingID) {\r\n setUrlParam(currListing?.ListingID, 'replaceIn');\r\n }\r\n }\r\n }, [currListing]);\r\n\r\n // for confirming deletion of listing by having the user type the string \"delete\" to confirm\r\n const confirmInput = typedString => {\r\n setInputString(typedString);\r\n\r\n if (typedString === 'delete' && hideButton) {\r\n setHideButton(false); // set submit button to enabled\r\n }\r\n };\r\n\r\n // Build where clause with UniqueID to retrieve records for\r\n const buildWhereClause = values => {\r\n const whereClause = {\r\n where: {\r\n clause: [],\r\n },\r\n };\r\n const valueKeys = Object.keys(values);\r\n\r\n valueKeys.map(key => {\r\n if (key === 'UniqueID') {\r\n whereClause.where.clause.push(\r\n {\r\n name: key,\r\n value: values[key],\r\n },\r\n );\r\n }\r\n return null;\r\n });\r\n return whereClause;\r\n };\r\n\r\n const loadAutoSaveData = () => {\r\n dispatch(loadFormDefinition(operationType, definitionType, listingCode, currListing?.UniqueID, 'listing')); // loads create listing page.\r\n dispatch(loadAutoSave(autoSaveCriteria));\r\n };\r\n\r\n const removeAutoSaveData = () => {\r\n dispatch(removeAutoSave(autoSaveCriteria));\r\n };\r\n\r\n /*\r\n When a listing is selected, form definition is loaded according to the PropertyType (listing type)\r\n Dispatch retrieves listing record based on UniqueID\r\n */\r\n const loadListingData = () => {\r\n dispatch(loadFormDefinition(operationType, definitionType, listingCode, currListing?.UniqueID, 'listing')); // loads create listing page.\r\n dispatch(loadListingById(buildWhereClause(currListing))); // dispatches call to get listing values\r\n };\r\n\r\n const onDiscardRowLock = () => {\r\n setRowLockButtonClicked(true);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n\r\n if (lockedByMe) {\r\n removeLock();\r\n } else {\r\n discardChanges();\r\n }\r\n\r\n // Force the AutoSave alert to display if an AutoSave exists by rechecking for AutoSave changes.\r\n if (autoSaveExists) {\r\n setRowLockButtonClicked(false);\r\n checkAutoSave();\r\n }\r\n };\r\n\r\n const onTakeoverAutoSave = () => {\r\n setAutoSaveButtonClicked(true);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(false);\r\n setRowLockButtonClicked(false);\r\n\r\n setIsFormLoading(true);\r\n createLock(loadAutoSaveData);\r\n };\r\n\r\n const onDiscardAutoSave = () => {\r\n setAutoSaveButtonClicked(true);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(false);\r\n setRowLockButtonClicked(false);\r\n\r\n removeAutoSaveData();\r\n };\r\n\r\n const onEditListing = () => {\r\n if (currListing) {\r\n loadListingData();\r\n }\r\n };\r\n\r\n const onDeleteListing = () => {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Delete Listing?',\r\n html: `Are you sure you want to delete Listing ${currListing.ListingId}?`,\r\n iconHtml: '',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'Yes, Delete',\r\n denyButtonText: 'No, Cancel',\r\n showDenyButton: true,\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn-danger btn-lg mr-2 swal-question-listing-discard-yes',\r\n denyButton: 'btn-primary btn-lg swal-question-listing-discard-no',\r\n },\r\n }).then(async result => {\r\n if (result.isConfirmed) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Deleting Listing...',\r\n title: '',\r\n showConfirmButton: false,\r\n });\r\n\r\n try {\r\n const response = await apiService.Listing.DeleteListingById({ UniqueID: currListing.UniqueID, PropertyType: currListing.PropertyType });\r\n const listingId = response?.Data?.ListingId;\r\n\r\n if (listingId) {\r\n setRowLockButtonClicked(false);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(true);\r\n setAutoSaveButtonClicked(false);\r\n\r\n if (autoSaveExists) removeAutoSaveData();\r\n if (lockedByMe) {\r\n removeLock();\r\n } else {\r\n discardChanges();\r\n }\r\n\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Listing Deleted',\r\n text: `Listing ${currListing.ListingId} has been deleted.`,\r\n icon: 'success',\r\n iconColor: 'var(--theme-success)',\r\n showConfirmButton: false,\r\n timer: 3000,\r\n }).then(() => {\r\n history.push('/');\r\n });\r\n } else {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Listing Not Deleted',\r\n text: `Listing ${currListing.ListingId} could not be deleted at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-listing-delete',\r\n },\r\n });\r\n }\r\n } catch (err) {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n title: 'Listing Not Deleted',\r\n text: `Listing ${currListing.ListingId} could not be deleted at this time. Please contact support.`,\r\n icon: 'error',\r\n iconColor: 'var(--theme-danger)',\r\n confirmButtonText: 'OK',\r\n buttonsStyling: false,\r\n customClass: {\r\n confirmButton: 'btn btn-danger btn-lg swal-fail-listing-delete',\r\n },\r\n });\r\n rollbar.error('Error: Listing Delete', err, currListing.ListingId);\r\n }\r\n } else {\r\n setRowLockButtonClicked(false);\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(true);\r\n setAutoSaveButtonClicked(false);\r\n\r\n if (autoSaveExists) removeAutoSaveData();\r\n if (lockedByMe) {\r\n removeLock();\r\n } else {\r\n discardChanges();\r\n }\r\n }\r\n });\r\n };\r\n\r\n const onCopyListing = () => {\r\n Swal.fire({\r\n allowEnterKey: false,\r\n allowEscapeKey: false,\r\n allowOutsideClick: false,\r\n position: 'center',\r\n html: 'Copying Listing...',\r\n title: '',\r\n showConfirmButton: false,\r\n timer: 2000,\r\n });\r\n dispatch(loadFormDefinition('create', 'listings', currListing?.PropertyType?.toLowerCase(), null, 'listing', true));\r\n const copyRequest = buildWhereClause(currListing);\r\n copyRequest.formName = currListing?.PropertyType?.toLowerCase();\r\n dispatch(loadListingToCopyById(copyRequest));\r\n };\r\n\r\n const getTaskDefinitions = taskName => {\r\n dispatch(loadFormDefinition(operationType, definitionType, taskName, currListing?.UniqueID, 'listing'));\r\n dispatch(loadListingById(buildWhereClause(currListing)));\r\n };\r\n\r\n const getCurrentListingPreferredPhotoDetails = uniqueID => {\r\n dispatch(loadListingPreferredPhotoDetails(uniqueID));\r\n };\r\n\r\n const getCurrentListingPhoto = photoId => {\r\n dispatch(loadListingPhoto(photoId));\r\n };\r\n\r\n const onClickEdit = () => {\r\n setEditButtonClicked(true);\r\n setDeleteButtonClicked(false);\r\n setRowLockButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n\r\n setIsFormLoading(true);\r\n createLock(onEditListing);\r\n };\r\n\r\n const onClickDelete = () => {\r\n setEditButtonClicked(false);\r\n setDeleteButtonClicked(true);\r\n setRowLockButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n\r\n setIsFormLoading(true);\r\n createLock(onDeleteListing);\r\n };\r\n\r\n const onClickTask = taskCode => () => {\r\n setEditButtonClicked(true);\r\n setDeleteButtonClicked(false);\r\n setRowLockButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n setIsFormLoading(true);\r\n createLock(() => getTaskDefinitions(taskCode));\r\n };\r\n\r\n // temporary placeholder for copy functions\r\n const onCopyClick = () => {\r\n setRowLockButtonClicked(false);\r\n setAutoSaveButtonClicked(false);\r\n setIsFormLoading(true);\r\n onCopyListing();\r\n };\r\n\r\n const onAuditClick = () => {\r\n if (currListing.UniqueID !== null) {\r\n history.push(`/audit?ListingID=${currListing?.ListingID}`);\r\n }\r\n };\r\n\r\n const getCityNameFromRedux = city => {\r\n if (cityNames) {\r\n if (cityNames[city]) {\r\n return cityNames[city].Description;\r\n }\r\n }\r\n return city;\r\n };\r\n\r\n // update change form buttons and edit button visibility depending on ACL permissions\r\n useEffect(() => {\r\n if (!listingCode) return;\r\n\r\n let otherButtons = Object.keys(formPermissions).flatMap(key => {\r\n if (!formPermissions[key]) return [];\r\n return otherTaskConfig.find(btnCfg => btnCfg.taskCode === key);\r\n });\r\n otherButtons = otherButtons.filter(btn => btn).sort((a, b) => otherTaskConfig.indexOf(a) - otherTaskConfig.indexOf(b));\r\n setOtherBtnArr(otherButtons);\r\n\r\n let taskButtons = Object.keys(formPermissions).flatMap(key => {\r\n if (!formPermissions[key]) return [];\r\n return statusTaskConfig.find(btnCfg => btnCfg.taskCode === key);\r\n });\r\n taskButtons = taskButtons.filter(btn => btn).sort((a, b) => statusTaskConfig.indexOf(a) - statusTaskConfig.indexOf(b));\r\n setTaskBtnArr(taskButtons);\r\n }, [formPermissions, listingCode]);\r\n\r\n useEffect(() => {\r\n if (currListing?.UniqueID) {\r\n getCurrentListingPreferredPhotoDetails(currListing.UniqueID);\r\n }\r\n }, [currListing]);\r\n\r\n useEffect(() => {\r\n if (currentListingPreferredPhotoDetails?.URL) {\r\n getCurrentListingPhoto(currentListingPreferredPhotoDetails.URL);\r\n }\r\n }, [currentListingPreferredPhotoDetails]);\r\n\r\n useEffect(() => {\r\n if (currentListingPhotoUrl) URL.revokeObjectURL(currentListingPhotoUrl);\r\n if (currentListingPhoto) setCurrentListingPhotoUrl(URL.createObjectURL(currentListingPhoto));\r\n return () => currentListingPhotoUrl && URL.revokeObjectURL(currentListingPhotoUrl);\r\n }, [currentListingPhoto]);\r\n\r\n if (currListing) { // added check to avoid crash when home button was clicked.\r\n return (\r\n <>\r\n \r\n ShowingTime \r\n products automate the showing scheduling and management process, simplify the report generating process, and deliver buyer leads.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Are you sure?
\r\nYou are about to permanently delete a listing and all its contents.
\r\n\r\n Please confirm by typing\r\n delete\r\n below\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {!isAllAclComplete && !canEditForm ? (\r\n \r\n \r\n View\r\n Listing\r\n
\r\n\r\n
\r\n \r\n {canEditForm && (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {(isEmpty(currListing.UnitNumber) || lowerCase(currListing.UnitNumber) === 'empty') ? '' : `${currListing.UnitNumber}, `}\r\n {`${currListing.StreetNumber ? currListing.StreetNumber : ''} ${currListing.StreetName ? startCase(lowerCase(currListing.StreetName)) : ''} ${currListing.StreetSuffix ? startCase(lowerCase(currListing.StreetSuffix)) : ''}`}\r\n {isEmpty(currListing.StreetDirSuffix) ? '' : ` ${upperCase(currListing.StreetDirSuffix)}`}\r\n
\r\n\r\n {isEmpty(currListing.City) ? '' : `${getCityNameFromRedux(startCase(currListing.City))}, `}\r\n {startCase(currListing.StateOrProvince) ?? ''}\r\n
\r\n\r\n
\r\n \r\n {canEditForm && otherBtnArr.find(x => x.taskCode === 'chgDel') !== undefined && (\r\n \r\n \r\n Delete\r\n \r\n )}\r\n {canEditForm && (\r\n \r\n \r\n Edit\r\n \r\n )}\r\n {canCopyForm && (\r\n \r\n \r\n Copy\r\n \r\n )}\r\n {canAuditForm && (\r\n \r\n \r\n Audit\r\n \r\n )}\r\n \r\n )}\r\n >\r\n \r\n \r\n {\r\n sortBy(memoizedListingEntries).map(([key, value]) => {\r\n if (!listingAttributesWhiteList.includes(key)) {\r\n return null;\r\n }\r\n if (value) {\r\n return (\r\n
\r\n \r\n {canEditForm && taskBtnArr.length > 0 && (\r\n \r\n
\r\n \r\n )}\r\n | {key.replace(/([a-z])([A-Z])/g, '$1 $2')} | \r\n {/* eslint-disable-next-line no-nested-ternary */}\r\n{ (key === 'PropertyType' ? listingType : key === 'City' ? getCityNameFromRedux(value) : value) } | \r\n
|---|
\r\n {taskBtnArr.map(element => (\r\n \r\n \r\n \r\n {`${element.buttonText}`}\r\n \r\n
\r\n ))}\r\n \r\n {canAccessShowingTime && (\r\n
\r\n )}\r\n \r\n )}\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\nexport default ViewListings;\r\n","import React, { useMemo, useState, useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { useQueryParam, StringParam } from 'use-query-params';\r\n\r\nimport startCase from 'lodash/startCase';\r\nimport sortBy from 'lodash/sortBy';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { getCurrentOffice } from '@redux/selectors/OfficeSelector';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\nimport { setCurrentOffice } from '@redux/modules/office';\r\nimport { loadFormDefinition } from '@redux/modules/formGeneration';\r\n\r\nimport useRowLock from '@hooks/useRowLock';\r\nimport useAcl from '@hooks/useAcl';\r\n\r\nimport Button from '@components/smartAdminUI/Button';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport ViewLoader from '@components/loaders/ViewLoader';\r\n\r\nimport StatusBadges from '@components/badges/StatusBadges';\r\n\r\nconst officeAttributesWhiteList = [\r\n 'OfficeAssociationComments',\r\n 'OfficeEmail',\r\n 'OfficeFax',\r\n 'OfficeMailAddress',\r\n 'OfficeMailCity',\r\n 'OfficeMailPostalCode',\r\n 'OfficePhone',\r\n 'OfficePostalCodePlus4',\r\n 'OtherWebsite',\r\n 'SocialMediaWebsiteUrlOrId',\r\n 'TerminationDate',\r\n 'TollFree',\r\n 'WebFacebook',\r\n 'WebTwitter',\r\n];\r\n\r\nconst operationType = 'edit';\r\nconst definitionType = 'office';\r\n\r\nconst ViewOffices = () => {\r\n const dispatch = useDispatch();\r\n const location = useLocation();\r\n\r\n const currOffice = useSelector(getCurrentOffice);\r\n const username = useSelector(getUserName);\r\n\r\n const [editButtonClicked, setEditButtonClicked] = useState(false);\r\n\r\n const [urlParam, setUrlParam] = useQueryParam('UniqueID', StringParam); // unique ID of current listing from CLF\r\n\r\n const memoizedOfficeEntries = useMemo(() => (currOffice ? Object.entries(currOffice) : []), [currOffice]);\r\n const rowLockEntity = useMemo(() => ({ type: 'office', id: currOffice?.UniqueID }), [currOffice]);\r\n\r\n const {\r\n lockingAuthorized,\r\n locked,\r\n lockedBy,\r\n lockedByMeWithinSession,\r\n impersonatedBy,\r\n isAdmin,\r\n lastUpdatedOn,\r\n lastCheckedOn,\r\n checkStatus,\r\n createLock,\r\n discardChanges,\r\n LockMessage,\r\n } = useRowLock({ rowLockEntity });\r\n\r\n const onEditOffice = () => {\r\n if (currOffice) {\r\n dispatch(loadFormDefinition(operationType, definitionType, null, currOffice?.UniqueID, 'officeACL'));\r\n }\r\n };\r\n\r\n const {\r\n getOfficeAcl,\r\n canEditForm,\r\n isAllComplete,\r\n } = useAcl();\r\n const isAllAclComplete = isAllComplete();\r\n\r\n useEffect(() => {\r\n if (urlParam) {\r\n dispatch(setCurrentOffice(urlParam));\r\n }\r\n }, []);\r\n\r\n /*\r\n This has to be done using location. Currently, when the user loads a form, it redirects the user to the\r\n create/edit page. When this happens, it clears out the path and search values in the location object.\r\n We can't memo the location and use that as a comparison, because technically the locations will be\r\n the same on the reload, so we can't reset the search value in the location object.\r\n */\r\n useEffect(() => {\r\n if (location?.search === '') {\r\n if (currOffice) {\r\n setUrlParam(currOffice?.UniqueID, 'replaceIn');\r\n }\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (currOffice?.UniqueID) {\r\n // retrieves EDIT and COPY permissions for offices\r\n getOfficeAcl({\r\n action: 'view',\r\n formname: 'Office',\r\n uniqueId: currOffice.UniqueID,\r\n });\r\n\r\n // retrieves form permissions for offices\r\n getOfficeAcl({\r\n action: 'forms',\r\n formname: 'Office',\r\n uniqueId: currOffice.UniqueID,\r\n });\r\n\r\n if (location?.search === '' || location?.search !== currOffice?.UniqueID) {\r\n setUrlParam(currOffice?.UniqueID, 'replaceIn');\r\n }\r\n }\r\n }, [currOffice]);\r\n\r\n const onClickEdit = () => {\r\n setEditButtonClicked(true);\r\n createLock(onEditOffice);\r\n };\r\n\r\n if (currOffice) {\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n )}\r\n {canViewOpenHouses && (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n {(otherBtnArr.length > 1 || (otherBtnArr.length === 1 && otherBtnArr[0].taskCode !== 'chgDel')) && (\r\n // eslint-disable-next-line no-nested-ternary\r\n Open Houses
\r\n \r\n\r\n \r\n {otherBtnArr.map(element => (element.taskCode !== 'chgDel' && (\r\n \r\n \r\n \r\n
\r\n )}\r\n {`${element.buttonText}`}
\r\n \r\n )))}\r\n\r\n
\r\n {!isAllAclComplete && !canEditForm ? (\r\n \r\n \r\n View\r\n Office\r\n
\r\n\r\n
\r\n \r\n )}\r\n \r\n );\r\n }\r\n return null;\r\n};\r\n\r\nexport default ViewOffices;\r\n","export default __webpack_public_path__ + \"static/media/corelogic-icon.dcafb25f.svg\";","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport Button from 'react-bootstrap/Button';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport matrixIcon from '@images/logos/vendor/matrix_logo.png';\r\nimport corelogicIcon from '@images/logos/vendor/corelogic-icon.svg';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst MatrixWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {currOffice.OfficeName}
\r\n\r\n
\r\n \r\n \r\n {currOffice.OfficePhone}\r\n \r\n
\r\n \r\n\r\n \r\n \r\n Edit\r\n \r\n )\r\n )}\r\n >\r\n \r\n \r\n {sortBy(memoizedOfficeEntries).map(([key, value]) => {\r\n if (!officeAttributesWhiteList.includes(key)) return null;\r\n if (value) {\r\n return (\r\n
\r\n \r\n
\r\n | {key.replace(/([a-z])([A-Z])/g, '$1 $2')} | \r\n{value} | \r\n
|---|
\r\n 
\r\n {\r\n window.open('https://matrix.pillarnine.com', '_blank');\r\n gaEventTracker('Opened Matrix', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n Matrix™\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default MatrixWidget;\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAWCAYAAAHcAgCAAAAAAXNSR0IArs4c6QAADcVJREFUWAmtWQl0nFUVfu/fZ9IltBQBq3AsoKBVQK0ocsADyGFTQEVEUBYF2dImmWmaSSbzT2bJMpNJ0gWxIsg5lqWtwKGgoIALoCCLgLRAALG0lLKkW5KZf/7t+b0/+YeZ6SRpxXfO5L13733Lf9+9373vhSxffoNK9qMIpjl3JpfPpmLreJ1L6l8ayCR+6tHS+lpeV5RsVj8wk+p4hhP7UvFTK5i1Or3p6Imcnk11nFHNX55OzyunUb+D7bwsUGE3I+wl/OZRRucSStKU0DWyItffEIpQgQvfmOtmvG6KxE4gjB1HCH0WhE9yGnPNzxeL5iO8Tfi++9K66XXwJ9cVt/gqfr+8zqb1jvL+ZG3/+72dNEd0BRMO96f0Y5taY7I/KNfduRD0F/pSsWd9Gq8zqViB19jUWbzmpb877n0Nbze3xbydC5alOpwQaovPtahTx9uUkf/wmrnus5QKjwmiiE8HndILvJqQf4zXwhivc2n92cZlMZpJ6tfzfqn0p/Xvljpo9PckKvrlvOp2rRP1ZQQiCOuyyeRhPsF1HN1vl9dQzavlfd4OtXU+VE3rSSQ+nU63zpNkSSKqIvwHAhSD73IZ8/QKPeZtxz5OluSN0L8E9mxuyY7l1AUDgX4jv/tQh0hvYnINZ/E0c9xrQx2Jp1uiUW8D3iGO5fOe/kRR/I6/AxxsUBKlK0ATx2ls95Jw9Je8fU1jC21sS7/jyzJGG5koLPH7vPYmDrd33tOX6mhtXNaBnY2XgZ5OhslbTNP+rU+brNYCymOCIJxdzucTD3GCrCiX8ZpSsp3XruPGoA5HFZRrcEhnOhL9xmBvcgjes5Pzxwt9DSZ42/XNEdrcGqvHZt4ocbizCCZ5H2ZFlrRES27pC2DSRiyXQ/8VmOXRPn2qGk71Ivh3hiJ6ejK5XLLjXCYI90Ere6052Rif7qlVURRimGYUhvF3bOyrPrOnZ+lMTdJyRqF4E3DkFJ/O61x3/GbmsPPheUwU6Xr4yc84fbC38z7Lsj+FE/wRtHfC4qXt34Lst2HJJ5vUSmlU+xsj9kUukbYT193Ax2QT+nmyKl3BZXmfl750bNBlZE64LX6pruvCbNn8mMPU00ZttoZyTWtEef96AFo2pe9ixP1huK3zAT5wZTbNPhg1Z9fJbAXUscjXNDDvuWublh3PZXjJJmNd2PsZofZOj+a5FKVroOlOzocpLIHt9gtb39MaVqwoTtDOYsy9m3sD76PQFZmUaxatExVNecIwCyeEI4mnxlmVf0sGzMmhNr3+xn4PhIEuHUNFwwzjK/fAtipGWbZ9HDYCtCJtrkyeoUUX3wQcm6LYtrMlNLHhScQYAP5GnOhjjuOwyTbMx3JnqSijo6NHIAgwQGZdc7uerWCi05tILICGALGk0RLyTwgWvVyUpBaw6vGByoS8ia/45mB38mvV4yfrD/YmGBPY8zhNMVB/kLo8k2R+jKwewzV6rirLakNLdH01k/cBKacKknzA7oJzNzbl1pL5X2gIRGfa4shfw+GsFz/2dQ7EbHqzadvr4O014wig6mGodN2c4eFShJxqcnyUtqqvy4uUU8kpivo7as34xFQytXi+Lb8IS/wVBCq03JPUF1mmNYqYM6PW4ClovlNNKnJd07J9hrjlPalmy7EYnEXz7Bgp0dpAQJu1du3aiZA0vo5I2V1wqsWlSDWxfE+ybRFsfROQYYTXcMSjOKu/Sz9lhkzWm6aJ/Ey/L9Oln8bpq3JdHgJBLoMxXtBAgHiwR9fncz5s+IHeRMd1vM0LTkka7ElsyOn6HN53TPcF+M7LyAKe8DaM/C04Vsg/sXloYzcX8EswGDi8uU2/xe/zmidMmhJ4ynGZLgp0ISZ6CLjuBWloYCth5Hc8MDHqbhAYeWti7FlAnDXgXcoI/fk4jZ5BRNvLl0zLadU0ZWUmk/H6s1W607Ss4SZd38FlG6PRhwGFv2+KdPzFMwkOCwKzfyDKGl8gzIWySf3asbH8Zt4uL8x1LrMcdzDcVsqXG6HBJdCK0NSqv45667yAuGrx0k4vaeBjAVc8WVuASHdw+Vx+G3O9iA/6jSg4w30pfYDTkUNc5vPLa0/DnNDcntqCSUl/KnII7wsiHcARXMTb5aU5Em8e2rwt3NetX4LJ1+OYmWla5SJ7tZE7IK+wL92LUUbgEQ5dQ5LFliXLYrPKWBXN0oY5FSF20CHKGmgpqCqKDCx+skIaHWh+6cKjDjOBxfOpKMR4fgDRarGKPleE5kjvVhBrdCRJnI1Aw6H0khpsj+SjhNcZtUho3iwN6ir0FwrG/bUGiZLQY1nWmQjBD/p8xv33Ixbk8VuQLm7AYSxTVXUjlHYXfqVbjT99xYYhYMO7x4AKVzHDnesLldewRwMa6+vu7v67wox5cKLnuEkEg+QgyG3Hz3Zcl9/iTmeW8AJi/Hvl42u1odHrsOb8ppaoh8vZdOzRWZq4C7LBankBnvtvfNUHPkNglNvSq76HTtCHdsyd66lx1KIHCISqCivyCR+xi+wYaPhfMhM9ROAfbVv2r+AFq5jqnuSPB15WREnY9RDs0YS8guC0xHGdIydkSSgSP1WkwhYEs6U+za8pv4woRH1NkaTZ3NaKZvEd0RKOadR1vqFpC7D3cIeRTRgfQNQkRaP4pvLuzqP9DG3aCfZBAAqhA93xw/Bhyp7iyHAk0jW8D8NqigAkzsE0G4pFgwE6j4noXa/UFPw/EiWEdUZMVrRtGwaCm46sHGIR61Y0z59uHZyohBhylwQFI/vEhRQBl1Iv/Z1u7P7w4/G4iiD6B5UKR8pM1jE2vj/jy2URz7bCFe+A+1kBme4u532UNo97s2Y50q5d1K2vf8O4+urV1vLly9WGhoZiCStkWSaGZQ7gdE8JaNp58PXFCIqDUy08U2E9AS2wKF8w/ogT2obHmR87zvQ65g9V7sjB9YJkyUWBmKo6vLuhYfxuUms9HS6aweVoAkTtWjKT0XK5xgDJz50z37bfvxBg2dimPw/ZiyeT3086rMqzTRIOh8f6kvHvKVR6fGT40MXZrvib5sjOA8Ef9C56sOSNmqIeVCiacRjj7YCNl8CklsO+2tKuP1NrYdwAvo1Qdy+wbBez6JFEZj2apl5hGMVXlO07jq2Gi95U9CeKKA/C5YM8yTBxowPGWfCeICKGtwSA/W3BsU5vjCZf5oRcouPKWQfMvpkDvmEYhAM9v0nLskQAimTXyM5rQq2Jm7gsYCA0c+aMzJ49o08zi5wjyGyDFtAWMVxxXcTnQrHwlZb21D84XGiquqGA+eB1RyMSenCRy+lz3AL7EzK/z+MbDIfZp1Tf23qT0VBQC2Q4rBaMQgOMcAVfe7pSsuQJQQV5whCevJoCAWWFaxh3wg2+wE+pfKKeHn0+tdmvsUuklPTykK5/gMyreq7SkEw6lpkZrAvhqeg9c4+xYKmu8+hYUXgujXTzXMNwbgPjK/ixpmgngpF3yeCvrS/jTeozeaMQwVMBbu97FRvxAGbFPiuqwruAgzXFvHNBU3v721WSLoc2TF/EYXuBkfObmry09guZRMdPZUVaLQnqk3i07cLLQoQ/hUh24M+qph5vGOZLgkVODumdXhpcNXfNbkXy5kuE2/WVOM31wWBwgWCOrvbpvAYOC6LN7sAH1yMkD8AS7i3n12qPmbRl+668iAP8WLWC+aUn29X5RRjHArx04dioiDW4G5YK+ho63l6RyE+aKULBBAE4iDedS/AKdkkNBZfmnKwRjnb+0hbdecjLXlVlpRWHv110gu9LsgwFG7BefWFVFjPZVCX6pNanWPTKfD7/ZU3VLu5Ld/y5OTJ+p5ghsRQU/PWxQuGZMYt695XSbJM0oCS3N6Vfhsv+Da7Ljsd4z4XxpELeen3TTtzTn4fl7YGGP1LBowDiSnG7YAu//ygThUL6B6t0/UsFYv0TeeURPKBbpnkr3r32CR6q155UyQ14v+pL6hfBtR6Hca3AU9CjomAdjuefZcCzUUmg34fypg1CuWTbx10qvaQoUj2uOfeOmOSk5khLvnojCLRZfNAJyGyqWfvXp9TCR027r6kmxRPs+aYkrJfgNrblXGcL7GzEm8tz6fg5tiOcuDQafW2q8dW8mnDhC/G7nuu6y/gTFzDir7C2tQL8Gv/WuKqxVf+3LzdV7VLlc1BePSwYqb17Ow5mLwXzZzJREK/BIfBgxLjlTzHnVLwphk3PwroCsP8eRdPuBnTtQHA+ItSu3xiOxM8uFotNoiTO01Q6BKxum362DyXGlcyIJIpecy+lA0ezRtF8ABfsQ3Gac5DirYbb3PHhFOMt6Aa69IZXeEeoLfaQ6zorcVkmSMrXIrq7sNqt+EfKZuCdcdNAL2639CZ81C1ePsTYFwe6E9v5+6W/Bj4eqQB5nEd1/BMnwR9CV/Z1sUy640pfBjWedvZev4zvNeH6eAcYl0PgKwEUjwuzVDrC01fEo/uffH7jwUujyTf88cgk+k3LXoj7xJ6AqiWx91f4Rc7nT1XzRSiSZmXmjh10M9wMH1TT1UDnwYdMfPBec/7iF1fJyjuHiiPDw6w6ffOFgXMznBnkk3iYmEGYMCYZ7hYOSz6/u7tldh2deWTeNEYKjvRGrb3wQLlp0yb5MAyqO2ajdeGF6xw+ntPHQB+Zg/WnyrlhrRD3XrpjsVgRB8c9R6irqwuMjY0527Ztc1avXj0lZkHe00Vd3ai4L4/J/wUyHUwbs+Fv6wAAAABJRU5ErkJggg==\"","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useSelector } from 'react-redux';\r\nimport Button from 'react-bootstrap/Button';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst TrainingWidget = props => {\r\n const { url = '#' } = props;\r\n const username = useSelector(getUserName);\r\n const gaEventTracker = GAEventTracking('User');\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n MLS® System Powered By |\r\n \r\n
\r\n \r\n {\r\n if (url) {\r\n window.open(`${url}`, '_blank');\r\n gaEventTracker('Opened Training', `${username}`);\r\n }\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n Training Resources\r\n \r\n
\r\n );\r\n};\r\n\r\nTrainingWidget.propTypes = {\r\n url: PropTypes.string,\r\n};\r\n\r\nexport default TrainingWidget;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport MatrixWidget from '@components/widget/MatrixWidget';\r\nimport TrainingWidget from '@components/widget/TrainingWidget';\r\n\r\nconst Matrix = () => (\r\n <>\r\n Guides & Videos, Training Courses and Webinars
\r\n\r\n
\r\n \r\n \r\n Matrix™\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default Matrix;\r\n","export default __webpack_public_path__ + \"static/media/logop9map.7b4ffed6.png\";","export default __webpack_public_path__ + \"static/media/remaplist-placeholder.a72a8578.jpg\";","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport Button from 'react-bootstrap/Button';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport REMapListIcon from '@images/logos/logop9map.png';\r\nimport REMapListPlaceholder from '@images/logos/remaplist-placeholder.jpg';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst REMapListWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n {\r\n window.open('https://maps.pillarnine.com', '_blank');\r\n gaEventTracker('Opened REMapList', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n REMapList™\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default REMapListWidget;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport REMapListWidget from '@components/widget/REMapListWidget';\r\n\r\nconst REMapList = () => (\r\n <>\r\n \r\n REMapList™ \r\n is an intuitive mapping tool using data from the Matrix™ and other data sources to provide members with a dynamic mapping experience.\r\n
\r\n\r\n
\r\n \r\n \r\n REMapList™\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default REMapList;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport CreaWebformsWidget from '@components/widget/CreaWebformsWidget';\r\n\r\nconst CREAWEBForms = () => (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n CREA\r\n WEBForms®\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default CREAWEBForms;\r\n","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport Button from 'react-bootstrap/Button';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport creaIcon from '@images/logos/vendor/crea-logo.svg';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst CreaDDFWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n {\r\n window.open('https://www.crea.ca/technology/realtor-ca-for-realtors/realtor-ca-tools/realtor-ca-ddf', '_blank');\r\n gaEventTracker('Opened CREA DDF', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n CREA DDF®\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CreaDDFWidget;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport CreaDDFWidget from '@components/widget/CreaDDFWidget';\r\n\r\nconst CREADDF = () => (\r\n <>\r\n \r\n CREA DDF® \r\n is a managed service to share listings with multiple third-party websites, while providing access to more listings for your own website.\r\n
\r\n\r\n
\r\n \r\n \r\n CREA\r\n DDF®\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n CREA has created a Data Distribution Facility (DDF®) to enable CREA's members to easily disseminate MLS® listing content to&nbps;\r\n multiple websites, and to ensure that MLS® listing content that is displayed on these websites is accurate, up to date, and uses CREA's trademarks correctly.\r\n
\r\n\r\n You can use the DDF® to share your listings with other REALTORS®, with Franchisors, as well as approved real estate advertising websites. You can also receive a feed of listing content from the DDF® for display on your own website.\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default CREADDF;\r\n","export default __webpack_public_path__ + \"static/media/logoprospectscrmwhite2.aa66b88a.png\";","export default __webpack_public_path__ + \"static/media/applebadge.2e842790.svg\";","export default __webpack_public_path__ + \"static/media/google-play-badge.c39ff0cc.svg\";","import React from 'react';\r\n\r\nimport prospectsIcon from '@images/logos/vendor/logoprospectscrmwhite2.png';\r\nimport appleIcon from '@images/logos/applebadge.svg';\r\nimport googleIcon from '@images/logos/google-play-badge.svg';\r\n\r\nconst ProspectsMobileWidget = () => (\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n 
\r\n \r\n \r\n 
\r\n \r\n
\r\n);\r\n\r\nexport default ProspectsMobileWidget;\r\n","import React from 'react';\r\n\r\nimport ProspectsWidget from '@components/widget/ProspectsWidget';\r\nimport ProspectsMobileWidget from '@components/widget/ProspectsMobileWidget';\r\nimport TrainingWidget from '@components/widget/TrainingWidget';\r\nimport Panel from '@components/smartAdminUI/Panel';\r\n\r\nconst Prospects = () => (\r\n <>\r\n \r\n Prospects Mobile gives you the tools you need to stay connected to critical listing data and client activities while you're on the go.\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n Prospects\r\n \r\n Powered by CoreLogic\r\n \r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Members! Did you know that as part of your Pillar 9™ fees you have access to the \r\n Premium Level Pro version\r\n of all of Prospects tools?\r\n
\r\n\r\n Prospects CRM provides you with all the tools you need to succeed and\r\n thrive in a highly competitive market. Manage your contacts and your\r\n everyday business better than ever with this powerful CRM that's\r\n designed for real estate professionals. \r\n
\r\n\r\n Learn more about Prospects here: \r\n
Access & Login
\r\n\r\n To log into Prospects, visit \r\n
\r\n
\r\n \r\n);\r\n\r\nexport default Prospects;\r\n","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport Button from 'react-bootstrap/Button';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport spinIcon from '@images/logos/vendor/spin_logo.gif';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst SpinWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n {\r\n window.open('https://alta.registries.gov.ab.ca/spinii/logon.aspx', '_blank');\r\n gaEventTracker('Opened Spin', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n className=\"pos-right\"\r\n >\r\n \r\n Spin2\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SpinWidget;\r\n","export default \"data:image/gif;base64,R0lGODlhXAA/ALMAAP///0SDharHyGGXmODq642ztMja2/L39/7+/nSjpQAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAABcAD8AAAT/EMhJq7046827/2AojmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJfBEEicRgWjA0R4TCIMDtdgfWayfr5SYKAi13IDwYDIK4wHAACbwJQb1y2IZ9BGVfexsECV16Gn0CQHcBA1VvBgUFHARbAQWEGQYBjCGbKVmfFHcbfY8EHpOhHAUBqjICW2wadwOtLYd/LrNdvBdbsTJPuSiOXALDGVvKYqVemh5kj2dxy0cHh1xVIk/bXWfYE+M4nYgocJiPA9iHsQezeRZpxiTIiSvUmRSvngAG1sEi569SBS3Lrm3wFwDYCkcJJFzqQqYAgXMTkPGbYGCbQV9c/+z5axcjEL9zEEkCuCUh2YFkE15NCZCAzMyGGBwZjIEJ5CRue0wq46Lq1p5mJmcycgRv57kEmy7OMVAuxMg1dcxMeEnzVqxXjLQ1RLUmliOJkDImg1MA3BcTBxgOcAaQ6IEDE9fw4gKHKABwUGPSBDiFkEZBXqpu+PnrILtH0UJ5Ick10yZHdwJTWDfA2hwAF2uGAAmzgklB3Sx0kQa6NIXTOyvQUfEkk8dxqNpVo3vhCTaqGCaRglERCs2qPZ8F+5LvQpqQyi1cdCid0sboIxIExIldRBqM3UXAAhs+RCfw5T9A2RI7PQdkit0vpy4/w936+PPr38+/v/8bCAQo4BCABBYYoHsGJnigfwL+B0QEADs=\"","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport SpinWidget from '@components/widget/SpinWidget';\r\n\r\nconst Spin = () => (\r\n <>\r\n Land titles data products, registered survey plans, township images, survey control markers, soil capability information and other land information.
\r\n\r\n
\r\n \r\n \r\n Spin2\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default Spin;\r\n","export default __webpack_public_path__ + \"static/media/spacelist_logo.c6e3d303.svg\";","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport Button from 'react-bootstrap/Button';\r\nimport { getUserName } from '@redux/selectors/UserSelector';\r\n\r\nimport spacelistIcon from '@images/logos/vendor/spacelist_logo.svg';\r\nimport GAEventTracking from '@components/tracking/GAEventTracking';\r\n\r\nconst SpacelistWidget = () => {\r\n const gaEventTracker = GAEventTracking('User');\r\n const username = useSelector(getUserName);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n {\r\n window.open('https://www.spacelist.ca', '_blank');\r\n gaEventTracker('Opened Spacelist', `${username}`);\r\n }}\r\n variant=\"primary\"\r\n >\r\n \r\n Spacelist™\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SpacelistWidget;\r\n","import AuditLogPage from '@containers/auditLog/AuditLogPage';\r\nimport CondoManagementPage from '@containers/condo/CondoManagementPage';\r\nimport CreateAgentPage from '@containers/agent/CreateAgentPage';\r\nimport CreateListingsPage from '@containers/listing/CreateListingsPage';\r\nimport CreateOfficePageOG from '@containers/office/CreateOfficePageOG';\r\nimport EditAgentPage from '@containers/agent/EditAgentPage';\r\nimport EditOfficePageOG from '@containers/office/EditOfficePageOG';\r\nimport Dashboard from '@containers/dashboard/Dashboard';\r\nimport RowLockPage from '@components/rowLock/RowLockPage';\r\nimport SearchAgentPage from '@containers/agent/SearchAgentPage';\r\nimport SearchListingsPage from '@containers/listing/SearchListingsPage';\r\nimport SearchOfficePage from '@containers/office/SearchOfficePage';\r\nimport ViewAgentPage from '@containers/agent/ViewAgentPage';\r\nimport ViewListingPage from '@containers/listing/ViewListingsPage';\r\nimport ViewOfficePage from '@containers/office/ViewOfficePage';\r\nimport Matrix from '@containers/vendorApps/matrix/Matrix';\r\nimport REMapList from '@containers/vendorApps/remaplist/REMapList';\r\nimport CREAWEBForms from '@containers/vendorApps/crea/CREAWEBForms';\r\nimport CREADDF from '@containers/vendorApps/crea/CREADDF';\r\nimport Prospects from '@containers/vendorApps/prospects/Prospects';\r\nimport Spin from '@containers/vendorApps/spin/Spin';\r\nimport Spacelist from '@containers/vendorApps/spacelist/SpaceList';\r\nimport CloudCMA from '@containers/vendorApps/cloudcma/CloudCMA';\r\nimport RECA from '@containers/resources/RECA';\r\nimport PostalCodeLookup from '@containers/resources/PostalCodeLookup';\r\nimport Training from '@containers/resources/Training';\r\n\r\nexport default [\r\n {\r\n id: 'dashboard_page',\r\n path: '/',\r\n breadcrumbPath: '/',\r\n name: 'Home',\r\n Component: Dashboard,\r\n },\r\n {\r\n id: 'create_agent_page',\r\n path: '/agent/create',\r\n breadcrumbPath: '/agent/create',\r\n name: 'Create Agent',\r\n Component: CreateAgentPage,\r\n },\r\n {\r\n id: 'edit_agent_page',\r\n path: '/agent/edit',\r\n breadcrumbPath: '/agent/edit',\r\n name: 'Edit Agent',\r\n Component: EditAgentPage,\r\n },\r\n {\r\n id: 'search_agent_page',\r\n path: '/agent/search',\r\n breadcrumbPath: '/agent/search',\r\n name: 'Search Agents',\r\n Component: SearchAgentPage,\r\n },\r\n {\r\n id: 'view_agent_page',\r\n path: '/agent/view',\r\n breadcrumbPath: '/agent/view',\r\n name: 'View Agent',\r\n Component: ViewAgentPage,\r\n },\r\n {\r\n id: 'audit_log_page',\r\n path: '/audit',\r\n breadcrumbPath: '/audit',\r\n name: 'Audit Log',\r\n Component: AuditLogPage,\r\n },\r\n {\r\n id: 'condo_management_page',\r\n path: '/condo',\r\n breadcrumbPath: '/condo',\r\n name: 'Condo Management',\r\n Component: CondoManagementPage,\r\n },\r\n {\r\n id: 'create_listings_page',\r\n path: '/listings/create/:listingType',\r\n breadcrumbPath: '/listings/create',\r\n name: 'Create Listing',\r\n Component: CreateListingsPage,\r\n },\r\n {\r\n id: 'edit_listings_page',\r\n path: '/listings/edit/:listingType',\r\n breadcrumbPath: '/listings/edit',\r\n name: 'Edit Listing',\r\n Component: CreateListingsPage,\r\n },\r\n {\r\n id: 'search_listings_page',\r\n path: '/listings/search',\r\n breadcrumbPath: '/listings/search',\r\n name: 'Search Listings',\r\n Component: SearchListingsPage,\r\n },\r\n {\r\n id: 'view_listings_page',\r\n path: '/listings/view',\r\n breadcrumbPath: '/listings/view',\r\n name: 'View Listing',\r\n Component: ViewListingPage,\r\n },\r\n {\r\n id: 'search_office_page',\r\n path: '/office/search',\r\n breadcrumbPath: '/office/search',\r\n name: 'Search Office',\r\n Component: SearchOfficePage,\r\n },\r\n {\r\n id: 'create_office_page',\r\n path: '/office/create',\r\n breadcrumbPath: '/office/create',\r\n name: 'Create Office',\r\n Component: CreateOfficePageOG,\r\n },\r\n {\r\n id: 'edit_office_page',\r\n path: '/office/edit',\r\n breadcrumbPath: '/office/edit',\r\n name: 'Edit Office',\r\n Component: EditOfficePageOG,\r\n },\r\n {\r\n id: 'view_office_page',\r\n path: '/office/view',\r\n breadcrumbPath: '/office/view',\r\n name: 'View Office',\r\n Component: ViewOfficePage,\r\n },\r\n {\r\n id: 'row_lock_page',\r\n path: '/rowLock/:entityType/:entityId',\r\n breadcrumbPath: '/rowLock',\r\n name: 'Row Lock',\r\n Component: RowLockPage,\r\n },\r\n {\r\n id: 'matrix_page',\r\n path: '/matrix',\r\n breadcrumbPath: '/matrix',\r\n name: 'Matrix',\r\n Component: Matrix,\r\n },\r\n {\r\n id: 'remaplist_page',\r\n path: '/remaplist',\r\n breadcrumbPath: '/remaplist',\r\n name: 'REMapList',\r\n Component: REMapList,\r\n },\r\n {\r\n id: 'creawebforms_page',\r\n path: '/crea/webforms',\r\n breadcrumbPath: '/crea/webforms',\r\n name: 'CREA WEBForms',\r\n Component: CREAWEBForms,\r\n },\r\n {\r\n id: 'creaddf_page',\r\n path: '/crea/ddf',\r\n breadcrumbPath: '/crea/ddf',\r\n name: 'CREA DDF',\r\n Component: CREADDF,\r\n },\r\n {\r\n id: 'prospects_page',\r\n path: '/prospects',\r\n breadcrumbPath: '/prospects',\r\n name: 'Prospects',\r\n Component: Prospects,\r\n },\r\n {\r\n id: 'spin_page',\r\n path: '/spin',\r\n breadcrumbPath: '/spin',\r\n name: 'Spin2',\r\n Component: Spin,\r\n },\r\n {\r\n id: 'spacelist_page',\r\n path: '/spacelist',\r\n breadcrumbPath: '/spacelist',\r\n name: 'Spacelist',\r\n Component: Spacelist,\r\n },\r\n {\r\n id: 'cloudcma_page',\r\n path: '/cloudcma',\r\n breadcrumbPath: '/cloudcma',\r\n name: 'Cloud CMA',\r\n Component: CloudCMA,\r\n },\r\n {\r\n id: 'postalcodelookup_page',\r\n path: '/resources/postalcodelookup',\r\n breadcrumbPath: 'resources/postalcodelookup',\r\n name: 'Postal Code Lookup',\r\n Component: PostalCodeLookup,\r\n },\r\n {\r\n id: 'reca_page',\r\n path: '/resources/reca',\r\n breadcrumbPath: '/resources/reca',\r\n name: 'RECA',\r\n Component: RECA,\r\n },\r\n {\r\n id: 'training_page',\r\n path: '/resources/training',\r\n breadcrumbPath: '/training',\r\n name: 'Training',\r\n Component: Training,\r\n },\r\n];\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport SpacelistWidget from '@components/widget/SpacelistWidget';\r\n\r\nconst SpaceList = () => (\r\n <>\r\n \r\n Spacelist™ \r\n is an interactive mapping tool to search billions of square feet of commercial real estate listings for free.\r\n
\r\n\r\n
\r\n \r\n \r\n Spacelist\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default SpaceList;\r\n","import React from 'react';\r\n\r\nimport Panel from '@components/smartAdminUI/Panel';\r\nimport CloudCMAWidget from '@components/widget/CloudCMAWidget';\r\nimport TrainingWidget from '@components/widget/TrainingWidget';\r\n\r\nconst CloudCMA = () => (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Cloud CMA\r\n
\r\n\r\n
\r\n \r\n);\r\n\r\nexport default CloudCMA;\r\n","import React from 'react';\r\n\r\nconst PostalCodeLookup = () => (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n);\r\n\r\nexport default PostalCodeLookup;\r\n","import React from 'react';\r\n\r\nconst RECA = () => (\r\n \r\n
\r\n \r\n \r\n Postal Code Lookup\r\n \r\n Powered by Canada Post\r\n \r\n
\r\n\r\n
\r\n);\r\n\r\nexport default RECA;\r\n","import React from 'react';\r\n\r\nconst Training = () => (\r\n \r\n
\r\n \r\n \r\n RECA\r\n Resources\r\n \r\n Tools, Guides and Standards\r\n \r\n
\r\n\r\n
\r\n);\r\n\r\nexport default Training;\r\n","import React, { useState } from 'react';\r\nimport Modal from 'react-bootstrap/Modal';\r\nimport Button from 'react-bootstrap/Button';\r\n\r\nconst Footer = () => {\r\n const [showTerms, setShowTerms] = useState(false);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n Training\r\n
\r\nData Disclaimer
\r\nInformation is deemed reliable but is NOT guaranteed accurate.
\r\nThe Listing Agent(s) who creates the Listing is responsible for the Listing information to be accurate and shall use their best efforts to transfer copyright title for photographs and other copyrightable material to the Pillar 9™.
\r\nNo warranties or representations are made by PILLAR 9™or our partners.
\r\nAuthorized Use
\r\n- \r\n
- \r\n The information contained on the PILLAR 9™ MLS® System is confidential and shall not be distributed to unauthorized persons (including other real estate boards) or used in any unauthorized manner.\r\n The Shareholders agree that information and data contained on the PILLAR 9™ MLS® System may only be used in an Authorized manner.\r\n \r\n
- \r\n
For the purposes of this Agreement:
\r\n- \r\n
- \r\n
“Authorized Use” or “Authorized manner” “of the MLS® System means:
\r\n- \r\n
- The extraction of data from the MLS® System by Members in good standing necessary to assist them in representing their Clients/Customers or specific identified customers in the Trade of real property; \r\n
- The ability of Members in good standing to remove reference to the Listing Brokerage and Listing Associate when representing specific clients, or specific identified customers in the Trade of real estate; and \r\n
- Any specific use authorized in writing by the Corporation. \r\n
\r\n - \r\n
“Unauthorized Use” of the MLS® System is any use not set out in the above section and includes, but is not limited to:
\r\n- \r\n
- The sale or distribution of any portion of the MLS® System to any third parties; \r\n
- \r\n Use of the MLS® System for direct or personal contact or communication with another Member’s Client/Customer when the status of a listing on PILLAR 9™ MLS® System is marked as either Expired (X),\r\n or Terminated (T) or and the Member knows or ought to know that a written service agreement has been or is in place. \r\n \r\n
- \r\n Any general or institutional advertising of a Member’s services through radio, television, open houses, or other means of reaching a large group of the public not directed specifically to persons having had\r\n a written service agreement that is now either expired (X) or terminated (T) or any contact or communication that was specifically requested or initiated by the Client/Customer, is not deemed to be an unauthorized\r\n use of the MLS® System. \r\n \r\n
- No use is unauthorized if consented to in writing by the Corporation. Anyone requesting such consent is required to meet all requirements as determined by the Corporation. \r\n
- \r\n The Corporation shall be responsible for ensuring the enforcement of agreements that set out the authorized use of data from the MLS®\r\n System by third parties or to take necessary means to prevent unauthorized use.\r\n \r\n
\r\n
\r\n - \r\n
Ownership and Copyright
\r\n- \r\n
- \r\n PILLAR 9™ is the owner of the copyright in its MLS® SYSTEM database. The MLS® SYSTEM database is a licensed product for the exclusive use of Members and other authorized users and any use of this\r\n data for any unauthorized purpose is prohibited. The right to use, reproduce or download the data is subject to the authority of PILLAR 9™ and is limited to the specific uses permitted by PILLAR 9™.\r\n \r\n
- \r\n Members shall comply with, observe, and be bound by all restrictions, copyright notices, or other limitations of access to the PILLAR 9™ MLS® SYSTEM database and use thereof as may be adopted\r\n by the Directors from time to time.\r\n \r\n
- A member, in submitting Listing information to PILLAR 9™, consents to such use of that information as PILLAR 9™ determines. \r\n
- \r\n
The Member shall advise and obtain the Principal’s consent that:
\r\n- \r\n
- \r\n All information concerning the Agency Agreement, the properties affected thereby, and the transactions thereunder shall be made available not only to all other Members but also to any\r\n third-party authorized users with whom PILLAR 9™ has a contract and their Principals;\r\n \r\n
- PILLAR 9™ may, at its option, advertise in any medium, including the Internet, any properties listed on the MLS® SYSTEM database; \r\n
- PILLAR 9™ may retain and distribute the listing information indefinitely and may compile and publish any statistical analysis, including historical MLS® SYSTEM data, on such information. \r\n
\r\n - \r\n PILLAR 9™ shall not be responsible for any indirect, special, or consequential damages or any other obligation or liability arising out of, or in any way connected with, the MLS® SYSTEM database including,\r\n but not limited to, computer failure or interruption, or negligence. \r\n \r\n
- The Directors may from time to time establish fees for use of the PILLAR 9™ MLS® SYSTEM information. \r\n
Cookies
\r\nWhen you use OnePlatform, PILLAR 9™ uses Cookies to track your interactions, usage, and patterns in order to better understand and meet your preferences, to provide you with a customized experience.
\r\nPILLAR 9™ uses third-party technology for tracking and in doing so, a third-party Cookie may be placed or recognized by your browser.
\r\nAccessibility
\r\nPILLAR 9™ strives to ensure that its applications and content are accessible to persons with disabilities including users of screen reader technology.
\r\nWCAG 2.0 Level AA is used as a guide for developing online experiences that serve all of our users.
\r\nPlease be aware that our efforts to maintain accessibility and usability are ongoing.
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 
\r\n \r\n {routes.map(({ path, Component, id }) => (\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n
\r\n