- \n
- \n
\n
\n \n \n \n \n
\n - \n
- \n
- \n
\n \n \n Notification\n \n \n
\n\n - \n
\n {props.row.body}\n
\n\n \n\n
\n \n );\n};\n\nexport default Notifications;\n\nNotifications.propTypes = {\n toggleNotifications: PropTypes.func,\n userInfo: PropTypes.object,\n};\n","import React, { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withRouter, NavLink } from \"react-router-dom\";\n\nimport { Badge } from \"@material-ui/core\";\nimport { API } from \"aws-amplify\";\nimport NotificationsIcon from \"@material-ui/icons/Notifications\";\nimport logo from \"../assets/ATT-LOGO-2c-navy.png\";\nimport OutsideClickHandler from \"../helpers/OutsideClickHandler\";\nimport HeaderLink from \"./HeaderLink\";\nimport MobileMenu from \"./MobileMenu\";\nimport DownloadUserReportLink from \"./DownloadUserReportLink\";\nimport Notifications from \"./Notifications\";\nimport { getUserNotificationCount } from \"../graphql/queries\";\n\nconst Header = ({\n handleLogout,\n handleLogin,\n isLoggedIn,\n userInfo,\n isAgent,\n setIsOpenSubscription,\n isActiveSubscription,\n}) => {\n const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);\n const [slideOutMobileMenu, setSlideOutMobileMenu] = useState(false);\n const [isOpenNotifications, setIsOpenNotifications] = useState(false);\n const [notificationBadgeCount, setNotificationBadgeCount] = useState(0);\n\n useEffect(() => {\n const fetchCount1 = async () => {\n try {\n if (userInfo) {\n const fetchedCount = await API.graphql({\n query: getUserNotificationCount,\n variables: { user_id: userInfo.id },\n });\n\n if (fetchedCount) {\n setNotificationBadgeCount(\n parseInt(fetchedCount.data.getUserNotificationCount.count)\n );\n }\n }\n } catch (error) {\n console.log(error);\n }\n };\n const interval = setInterval(() => {\n fetchCount1();\n }, 1000);\n\n return () => clearInterval(interval);\n }, [userInfo]);\n\n const toggleUserMenu = () => {\n setIsUserMenuOpen((prevIsMenuOpen) => !prevIsMenuOpen);\n };\n\n const toggleSlideOutMenu = () => {\n setSlideOutMobileMenu((prevIsOpen) => !prevIsOpen);\n };\n\n const toggleNotifications = () => {\n setIsOpenNotifications((prevIsOpenNotification) => !prevIsOpenNotification);\n if (slideOutMobileMenu) {\n setSlideOutMobileMenu(false);\n }\n };\n\n return (\n \n
\n \n \n
\n \n \n Notifications\n \n {notificationListingsData.length > 1 && (\n \n
\n {showLoading ? (\n \n
\n\n Clear All Notifications\n \n
\n )}\n\n \n
\n \n \n
\n \n \n
\n ) : (\n \n \n \n \n \n
\n \n )}\n {isAgent &&\n !userInfo.is_free_version_account &&\n isActiveSubscription && (\n \n \n
\n \n \n \n
\n \n \n \n \n
\n \n \n \n \n )}\n\n {!isLoggedIn && (\n <>\n
\n - \n
\n \n \n \n
\n \n Free Trial\n
\n \n \n \n
\n \n Login\n
\n \n \n \n \n \n
\n \n )}\n {isLoggedIn && userInfo && (\n \n Sign up\n
\n \n \n \n \n \n \n
\n \n {userInfo.first_name ? (\n
\n \n {isUserMenuOpen && (\n \n {userInfo.first_name}\n \n {userInfo.last_name}\n \n
\n ) : (\nLogout
\n )}\n\n \n \n
\n {userInfo.accessGroup &&\n userInfo.accessGroup.includes(\"Admin\") && (\n <>\n \n Profile\n
\n \n\n
\n \n Manage Agents\n
\n \n\n Dashboard\n
\n \n \n )}\n {userInfo.is_free_version_account &&\n !isActiveSubscription && (\n\n Upgrade\n
\n \n )}\n {userInfo.validated && !userInfo.locked_out && (\n\n FAQ\n
\n \n \n )}\n\n Log Out\n
\n \n \n )}\n \n \n )}\n \n \n\n 
\n
\n);\n\nexport default Loading;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { withAuthenticator } from 'aws-amplify-react';\nimport { API, graphqlOperation } from 'aws-amplify';\nimport { listClients } from '../graphql/queries';\n\nconst ClientSelect = ({ setSelectedClient, setErrorMessage, isLoggedIn, userInfo }) => {\n const [userClients, setUserClients] = useState([]);\n\n useEffect(() => {\n const fetchUserClients = async () => {\n if (isLoggedIn) {\n try {\n const fetchedUserClientsResponse = await API.graphql(\n graphqlOperation(listClients, { agent_id: userInfo.id })\n );\n\n if (\n fetchedUserClientsResponse &&\n fetchedUserClientsResponse.data &&\n fetchedUserClientsResponse.data.listClients\n ) {\n setUserClients(fetchedUserClientsResponse.data.listClients);\n }\n\n setErrorMessage('');\n } catch (error) {\n setErrorMessage('There has been an error getting client list.');\n }\n }\n };\n\n fetchUserClients();\n }, [userInfo, isLoggedIn, setErrorMessage]);\n\n const clientSelectOptions = userClients.map(client => (\n \n ));\n\n return (\n \n {\n setSelectedClient(value);\n setErrorMessage('');\n }}\n >\n \n {clientSelectOptions}\n \n
\n );\n};\n\nexport default withAuthenticator(ClientSelect);\n\nClientSelect.propTypes = {\n setSelectedClient: PropTypes.func,\n setErrorMessage: PropTypes.func,\n isLoggedIn: PropTypes.bool,\n userInfo: PropTypes.object,\n};\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst Message = ({ message, duration = 5000, setSuccessMessage, successMessage, textStyle }) => {\n useEffect(() => {\n if (successMessage) {\n setTimeout(() => {\n setSuccessMessage('');\n }, duration);\n }\n }, [message, duration, setSuccessMessage, successMessage]);\n\n return \n \n
\n {message}
;\n};\n\nexport default Message;\n\nMessage.propTypes = {\n message: PropTypes.string,\n duration: PropTypes.number,\n setSuccessMessage: PropTypes.func,\n successMessage: PropTypes.bool,\n textStyle: PropTypes.string,\n};\n","const propertyOfInterestAdded = {\n agent: {\n push: '',\n sms: '',\n email: '',\n },\n seller: {\n push: '',\n sms: '',\n email: {},\n },\n buyer: {\n push: `{{BA_NAME}} with {{BROKERAGE}} has added {{ADDRESS}} to your homes of interest.`,\n sms: '',\n email: '',\n },\n};\n\nconst approveShowingRequest = {\n agent: {\n push:\n '{{LA_NAME}} with {{BROKERAGE}} has confirmed an appointment to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}',\n sms:\n 'Hi {{BA_NAME}}, {{LA_NAME}} with {{BROKERAGE}} has confirmed an appointment to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}. \\n\\nThank you',\n email: {\n subject: 'Approve Showing Request',\n body:\n 'Hi {{BA_NAME}},{{LA_NAME}} with {{BROKERAGE}} has confirmed an appointment to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}.
Thank you',\n },\n },\n};\n\nconst rejectShowingRequest = {\n agent: {\n push: '{{LA_NAME}} with {{BROKERAGE}} has rejected an appointment to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}',\n sms:\n 'Hi {{BA_NAME}}, {{LA_NAME}} with {{BROKERAGE}} has rejected an appointment to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}. Please select a different time for your showing. \\n\\nThank you',\n email: {\n subject: 'Reject Showing Request',\n body:\n 'Hi {{BA_NAME}},
{{LA_NAME}} with {{BROKERAGE}} has rejected an appointment to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}. Please select a different time for your showing.
Thank you',\n },\n },\n};\n\nconst sendShowingRequest = {\n agent: {\n push: '{{BA_NAME}} with {{BROKERAGE}} would like to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}',\n sms: `Hi {{LA_NAME}}, this is {{BA_NAME}} with {{BROKERAGE}}. I would like to show {{ADDRESS}}, on {{DATE}}, from {{TIME_RANGE}}. Please contact me at {{PHONE}} \\n\\nThank you, \\n{{BA_NAME}} \\n`,\n email: {\n subject: `Showing Request for {{ADDRESS}}`,\n body: `Hi {{LA_NAME}},
This is {{BA_NAME}} with {{BROKERAGE}}. I would like to show {{ADDRESS}}, on {{DATE}}, from {{TIME_RANGE}}. Please contact me at {{PHONE}}
Thank you,
{{BA_NAME}}
`,\n },\n },\n};\n\nconst sendShowingRequestAutoApprove = {\n agent: {\n push:\n '{{BA_NAME}} with {{BROKERAGE}} would like to show {{ADDRESS}}, on {{DATE}}, from {{TIME_RANGE}} which is auto approved',\n sms: `Hi {{LA_NAME}}, this is {{BA_NAME}} with {{BROKERAGE}}. I would like to show {{ADDRESS}}, on {{DATE}}, from {{TIME_RANGE}} which is auto approved. Please contact me at {{PHONE}} \\n\\nThank you, \\n{{BA_NAME}} \\n`,\n email: {\n subject: `Showing Request for {{ADDRESS}} Auto approved`,\n body: `Hi {{LA_NAME}},
This is {{BA_NAME}} with {{BROKERAGE}}. I would like to show {{ADDRESS}}, on {{DATE}}, from {{TIME_RANGE}} which is auto approved. Please contact me at {{PHONE}}
Thank you,
{{BA_NAME}}
`,\n },\n },\n};\n\nconst sendShowingRequestAutoApproveToBA = {\n agent: {\n pushToBA: 'Your request to show {{ADDRESS}} on {{DATE}}, from {{TIME_RANGE}} is auto approved',\n smsToBA: `Hi {{BA_NAME}}, this is {{LA_NAME}} with {{BROKERAGE}} .your request to show {{ADDRESS}} on {{DATE}}, from {{TIME_RANGE}} is auto approved. Please contact me at {{PHONE}} \\n\\nThank you, \\n{{LA_NAME}} \\n`,\n emailToBA: {\n subject: `Showing Request for {{ADDRESS}} Auto approved`,\n body: `Hi {{BA_NAME}},
This is {{LA_NAME}} with {{BROKERAGE}}.
your request to show {{ADDRESS}} on {{DATE}}, from {{TIME_RANGE}} is auto approved. Please contact me at {{PHONE}}
Thank you,
{{LA_NAME}}
`,\n },\n },\n};\n\nconst editDeleteLAAvailabilitySlot = {\n agent: {\n push:\n 'Hi {{BA_NAME}}, Due to unforeseen circumstances, we had to cancel your showing at {{ADDRESS}}, on {{DATE}}, from {{TIME_RANGE}}',\n sms: `Hi {{BA_NAME}}, Due to unforeseen circumstances, we had to cancel your showing at {{ADDRESS}}, on {{DATE}}, from {{TIME_RANGE}}. Please check the calendar for other available times. Please contact me with questions. \\n\\nThank you, \\n{{LA_NAME}} \\n`,\n email: {\n subject: `Canceled Showing Request for {{ADDRESS}}`,\n body: `Hi {{BA_NAME}},
Due to unforeseen circumstances, we had to cancel your showing at {{ADDRESS}}, on {{DATE}}, from {{TIME_RANGE}}. Please check the calendar for other available times. Please contact me with questions.
Thank you,
{{LA_NAME}}
`,\n },\n },\n};\n\nconst cancelShowingRequest = {\n agent: {\n push: '{{BA_NAME}} has cancelled an appointment to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}',\n sms:\n 'Hi {{LA_NAME}}, {{BA_NAME}} has cancelled an appointment to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}.\\n\\nThank you',\n email: {\n subject: 'Cancelled Showing Request',\n body:\n 'Hi {{LA_NAME}},
{{BA_NAME}} has cancelled an appointment to show {{ADDRESS}}, on {{DATE}}, {{TIME_RANGE}}.
Thank you',\n },\n },\n};\n\nexport default {\n propertyOfInterestAdded,\n approveShowingRequest,\n rejectShowingRequest,\n sendShowingRequest,\n sendShowingRequestAutoApprove,\n sendShowingRequestAutoApproveToBA,\n editDeleteLAAvailabilitySlot,\n cancelShowingRequest,\n};\n","import templates from './templates';\n\nconst BUYER = 'buyer';\nconst AGENT = 'agent';\n\nexport const buildPropertyOfInterestAdded = ({ baName, brokerage, address }) => {\n let { push } = templates.propertyOfInterestAdded[BUYER];\n\n const tokens = [\n { name: 'BA_NAME', value: baName },\n { name: 'BROKERAGE', value: brokerage },\n { name: 'ADDRESS', value: address },\n ];\n\n push = replaceTokens(push, tokens);\n\n return { push };\n};\n\nexport const buildApproveShowingRequest = ({ laName, baName, brokerage, address, date, timeRange }) => {\n let { email, sms, push } = templates.approveShowingRequest[AGENT];\n const emailCopy = { ...email };\n const tokens = [\n { name: 'LA_NAME', value: laName },\n { name: 'BA_NAME', value: baName },\n { name: 'BROKERAGE', value: brokerage },\n { name: 'ADDRESS', value: address },\n { name: 'DATE', value: date },\n { name: 'TIME_RANGE', value: timeRange },\n ];\n\n sms = replaceTokens(sms, tokens);\n emailCopy.subject = replaceTokens(emailCopy.subject, tokens);\n emailCopy.body = replaceTokens(emailCopy.body, tokens);\n push = replaceTokens(push, tokens);\n\n return { sms, email: emailCopy, push };\n};\n\nexport const buildRejectShowingRequest = ({ laName, baName, brokerage, address, date, timeRange }) => {\n let { email, sms, push } = templates.rejectShowingRequest[AGENT];\n const emailCopy = { ...email };\n const tokens = [\n { name: 'LA_NAME', value: laName },\n { name: 'BA_NAME', value: baName },\n { name: 'BROKERAGE', value: brokerage },\n { name: 'ADDRESS', value: address },\n { name: 'DATE', value: date },\n { name: 'TIME_RANGE', value: timeRange },\n ];\n\n sms = replaceTokens(sms, tokens);\n emailCopy.subject = replaceTokens(emailCopy.subject, tokens);\n emailCopy.body = replaceTokens(emailCopy.body, tokens);\n push = replaceTokens(push, tokens);\n\n return { sms, email: emailCopy, push };\n};\n\nexport const buildSendShowingRequest = ({ baName, laName, brokerage, address, date, phone, timeRange }) => {\n let { sms, email, push } = templates.sendShowingRequest[AGENT];\n\n // Need to duplicate because email is an object and objects are passed by reference in JS\n // If updated directly, the template itself will be updated\n // Because push and SMS are primitives, they get passed by value and don't need to be copied\n const emailCopy = { ...email };\n\n const tokens = [\n { name: 'BA_NAME', value: baName },\n { name: 'LA_NAME', value: laName },\n { name: 'BROKERAGE', value: brokerage },\n { name: 'ADDRESS', value: address },\n { name: 'DATE', value: date },\n { name: 'PHONE', value: phone },\n { name: 'TIME_RANGE', value: timeRange },\n ];\n\n sms = replaceTokens(sms, tokens);\n emailCopy.subject = replaceTokens(emailCopy.subject, tokens);\n emailCopy.body = replaceTokens(emailCopy.body, tokens);\n push = replaceTokens(push, tokens);\n\n return { sms, email: emailCopy, push };\n};\n\nexport const buildSendShowingRequestAutoApprove = ({ baName, laName, brokerage, address, date, phone, timeRange }) => {\n let { sms, email, push } = templates.sendShowingRequestAutoApprove[AGENT];\n\n const emailCopy = { ...email };\n\n const tokens = [\n { name: 'BA_NAME', value: baName },\n { name: 'LA_NAME', value: laName },\n { name: 'BROKERAGE', value: brokerage },\n { name: 'ADDRESS', value: address },\n { name: 'DATE', value: date },\n { name: 'PHONE', value: phone },\n { name: 'TIME_RANGE', value: timeRange },\n ];\n\n sms = replaceTokens(sms, tokens);\n emailCopy.subject = replaceTokens(emailCopy.subject, tokens);\n emailCopy.body = replaceTokens(emailCopy.body, tokens);\n push = replaceTokens(push, tokens);\n\n return { sms, email: emailCopy, push };\n};\n\nexport const buildSendShowingRequestAutoApproveToBA = ({\n baName,\n laName,\n brokerage,\n address,\n date,\n phone,\n timeRange,\n}) => {\n let { smsToBA, emailToBA, pushToBA } = templates.sendShowingRequestAutoApproveToBA[AGENT];\n\n const emailCopy = { ...emailToBA };\n\n const tokens = [\n { name: 'BA_NAME', value: baName },\n { name: 'LA_NAME', value: laName },\n { name: 'BROKERAGE', value: brokerage },\n { name: 'ADDRESS', value: address },\n { name: 'DATE', value: date },\n { name: 'PHONE', value: phone },\n { name: 'TIME_RANGE', value: timeRange },\n ];\n\n smsToBA = replaceTokens(smsToBA, tokens);\n emailCopy.subject = replaceTokens(emailCopy.subject, tokens);\n emailCopy.body = replaceTokens(emailCopy.body, tokens);\n pushToBA = replaceTokens(pushToBA, tokens);\n\n return { smsToBA, emailToBA: emailCopy, pushToBA };\n};\n\nexport const buildEditDeleteLAAvailabilitySlot = ({ laName, baName, address, date, timeRange }) => {\n let { email, sms, push } = templates.editDeleteLAAvailabilitySlot[AGENT];\n const emailCopy = { ...email };\n const tokens = [\n { name: 'LA_NAME', value: laName },\n { name: 'BA_NAME', value: baName },\n { name: 'ADDRESS', value: address },\n { name: 'DATE', value: date },\n { name: 'TIME_RANGE', value: timeRange },\n ];\n\n sms = replaceTokens(sms, tokens);\n emailCopy.subject = replaceTokens(emailCopy.subject, tokens);\n emailCopy.body = replaceTokens(emailCopy.body, tokens);\n push = replaceTokens(push, tokens);\n\n return { sms, email: emailCopy, push };\n};\n\nexport const buildCancelShowingRequest = ({ laName, baName, address, date, timeRange }) => {\n let { email, sms, push } = templates.cancelShowingRequest[AGENT];\n const emailCopy = { ...email };\n const tokens = [\n { name: 'LA_NAME', value: laName },\n { name: 'BA_NAME', value: baName },\n { name: 'ADDRESS', value: address },\n { name: 'DATE', value: date },\n { name: 'TIME_RANGE', value: timeRange },\n ];\n\n sms = replaceTokens(sms, tokens);\n emailCopy.subject = replaceTokens(emailCopy.subject, tokens);\n emailCopy.body = replaceTokens(emailCopy.body, tokens);\n push = replaceTokens(push, tokens);\n\n return { sms, email: emailCopy, push };\n};\n\nconst replaceTokens = (message, tokens) => {\n let updatedMessage = message;\n\n for (const token of tokens) {\n updatedMessage = updatedMessage.replace(new RegExp(`{{${token.name}}}`, 'g'), token.value);\n }\n\n return updatedMessage;\n};\n","import { Auth } from 'aws-amplify';\n\nexport const createNotification = async ({ userId, pushMessage }) => {\n try {\n const sessionToken = `Bearer ${(await Auth.currentSession()).getIdToken().jwtToken}`;\n\n const payload = { userId, body: pushMessage, title: null };\n\n const notificationResponse = await fetch(process.env.REACT_APP_NOTIFICATION_ENDPOINT, {\n method: 'post',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: sessionToken,\n },\n body: JSON.stringify({ payload }),\n });\n\n if (notificationResponse.ok) {\n const resultJson = await notificationResponse.json();\n\n return resultJson;\n }\n\n const resultText = await notificationResponse.text();\n\n throw new Error(`Push Notification publish invocation not successful: ${resultText}`);\n } catch (error) {\n console.error('Error sending notification: ', error);\n }\n};\n","import React from 'react';\n\nexport const UserContext = React.createContext({});\n","/* eslint-disable camelcase */\nimport React, { useState, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { API, graphqlOperation } from 'aws-amplify';\nimport { createPropertyRecords } from '../graphql/mutations';\n\nimport { getListingByListingId, getPropertyOfInterestByListingKey } from '../graphql/queries';\n\nimport Loading from './Loading';\nimport Message from './Message';\nimport { buildPropertyOfInterestAdded } from '../notifications/messageBuilder';\nimport { createNotification } from '../services/notificationService';\nimport { UserContext } from '../contexts';\n\nexport default function AddPropertyButton({\n listing,\n selectedClient,\n errorMessage,\n setErrorMessage,\n mlsIds,\n setPropertyErrors,\n setPropertySuccesses,\n}) {\n const { userInfo } = useContext(UserContext);\n const [showLoading, setShowLoading] = useState(false);\n const [successMessage, setSuccessMessage] = useState('');\n\n const notifyBuyerOfNewProperty = async ({ clientId, address, city, state, zip }) => {\n try {\n const formattedAddress = `${\n address && address.includes(',') ? address.split(',')[0] : address\n } ${city}, ${state} ${zip}`;\n\n const { push } = buildPropertyOfInterestAdded({\n baName: `${userInfo.first_name} ${userInfo.last_name}`,\n brokerage: `${userInfo.brokerage}`,\n address: formattedAddress,\n });\n\n await createNotification({\n userId: clientId,\n pushMessage: push,\n });\n } catch (error) {\n console.warn('Error notifying buyer of new property of interest: ', error);\n }\n };\n\n const isDuplicateProperty = async (clientId, listingKey) => {\n try {\n const existingPropertyOfInterestResponse = await API.graphql(\n graphqlOperation(getPropertyOfInterestByListingKey, { client_id: clientId, listing_key: listingKey })\n );\n\n if (existingPropertyOfInterestResponse && existingPropertyOfInterestResponse.data) {\n const existingPropertyOfInterest = existingPropertyOfInterestResponse.data.getPropertyOfInterestByListingKey;\n\n if (existingPropertyOfInterest) {\n return true;\n }\n }\n\n return false;\n } catch (error) {\n console.error('Error checking for duplicate property; ', error);\n\n throw error;\n }\n };\n\n const addPropertyForClient = async () => {\n if (selectedClient) {\n setShowLoading(true);\n\n if (mlsIds) {\n setPropertySuccesses([]);\n setPropertyErrors([]);\n\n mlsIds.forEach(async mlsId => {\n if (!mlsId) {\n return;\n }\n\n await API.graphql({ query: getListingByListingId, variables: { listing_id: mlsId } })\n .then(async response => {\n const returnedListing = response.data.getListingByListingId.items[0];\n\n if (returnedListing.listing_id) {\n try {\n if (!(await isDuplicateProperty(selectedClient, returnedListing.listing_key))) {\n await API.graphql({\n query: createPropertyRecords,\n variables: {\n createPropertyRecordsInput: {\n listing_id: mlsId,\n client_id: selectedClient,\n fallback_phone_number:\n process.env.REACT_APP_STAGE !== 'production' &&\n process.env.REACT_APP_LISTING_AGENT_DEFAULT_PHONE\n ? process.env.REACT_APP_LISTING_AGENT_DEFAULT_PHONE\n : null,\n },\n },\n });\n\n setPropertySuccesses(prevState => [...prevState, `Added ${mlsId}`]);\n\n notifyBuyerOfNewProperty({\n clientId: selectedClient,\n address: returnedListing.address,\n city: returnedListing.city,\n state: returnedListing.state,\n zip: returnedListing.zip,\n });\n } else {\n setPropertyErrors(prevState => [...prevState, `Property Already Added`]);\n }\n } catch (error) {\n console.error('Error adding property records: ', error);\n setPropertyErrors(prevState => [...prevState, `Error Adding ${mlsId}`]);\n }\n } else {\n setPropertyErrors(prevState => [...prevState, mlsId]);\n }\n })\n .catch(error => {\n console.error('Error adding homes: ', error);\n setPropertyErrors(prevState => [...prevState, `Error Adding ${mlsId}`]);\n });\n });\n } else {\n if (await isDuplicateProperty(selectedClient, listing.listing_key)) {\n setErrorMessage(`Property already added.`);\n setShowLoading(false);\n\n return;\n }\n\n await API.graphql({\n query: createPropertyRecords,\n variables: {\n createPropertyRecordsInput: {\n listing_id: listing.listing_id,\n client_id: selectedClient,\n fallback_phone_number:\n process.env.REACT_APP_STAGE !== 'production' && process.env.REACT_APP_LISTING_AGENT_DEFAULT_PHONE\n ? process.env.REACT_APP_LISTING_AGENT_DEFAULT_PHONE\n : null,\n },\n },\n });\n\n notifyBuyerOfNewProperty({\n clientId: selectedClient,\n address: listing.address,\n city: listing.city,\n state: listing.state,\n zip: listing.zip,\n });\n\n setSuccessMessage('Property Added');\n setErrorMessage('');\n }\n setShowLoading(false);\n } else {\n setErrorMessage('Please select a client.');\n }\n };\n\n if (showLoading) return
\n \n ADD TO CLIENT\n \n {successMessage && (\n
\n );\n}\n\nAddPropertyButton.propTypes = {\n listing: PropTypes.object,\n selectedClient: PropTypes.string,\n errorMessage: PropTypes.string,\n setErrorMessage: PropTypes.func,\n mlsIds: PropTypes.array,\n setPropertyErrors: PropTypes.func,\n setPropertySuccesses: PropTypes.func,\n};\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { withAuthenticator } from 'aws-amplify-react';\nimport OutsideClickHandler from '../helpers/OutsideClickHandler';\nimport Loading from './Loading';\nimport ClientSelect from './ClientSelect';\nimport AddPropertyButton from './AddPropertyButton';\n\nfunction MLSAddForm({ setIsMLSAddOpen, isMLSAddOpen, isLoggedIn, userInfo }) {\n const [addMLSTextArea, setAddMLSTextArea] = useState('');\n const [mlsIds, setMlsIds] = useState([]);\n const [selectedClient, setSelectedClient] = useState('');\n const [errorMessage, setErrorMessage] = useState();\n const [showLoading, setShowLoading] = useState(false);\n const [propertyErrors, setPropertyErrors] = useState([]);\n const [propertySuccesses, setPropertySuccesses] = useState([]);\n\n const toggleMLSModal = () => {\n setIsMLSAddOpen(prevIsMLSAddOpen => !prevIsMLSAddOpen);\n };\n\n useEffect(() => {\n setMlsIds(addMLSTextArea.replace(/ /g, '').split(';'));\n }, [addMLSTextArea]);\n\n if (showLoading) return \n \n
\n );\n}\n\nexport default withAuthenticator(MLSAddForm);\n\nMLSAddForm.propTypes = {\n setIsMLSAddOpen: PropTypes.func,\n isMLSAddOpen: PropTypes.bool,\n isLoggedIn: PropTypes.bool,\n userInfo: PropTypes.object,\n};\n","import React, { useState, useEffect } from 'react';\nimport { withAuthenticator } from 'aws-amplify-react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport CryptoJS from 'crypto-js';\nimport Loading from './Loading';\nimport ClientSelect from './ClientSelect';\nimport AddPropertyButton from './AddPropertyButton';\nimport calendar from '../assets/calendar.png';\n\nfunction AddToClient({\n userInfo,\n isLoggedIn,\n listing,\n isListingAgent,\n setIsOpenFreeTrialLimitPopup,\n propertyListings,\n}) {\n const [selectedClient, setSelectedClient] = useState('');\n const [showLoading] = useState(false);\n const [errorMessage, setErrorMessage] = useState();\n const [isAccess, setIsAccess] = useState(false);\n\n useEffect(() => {\n if (propertyListings && isListingAgent) {\n const propData = propertyListings.filter(item => item.listing_id === listing.listing_id);\n\n if (propData.length === 0) {\n setIsAccess(false);\n } else {\n setIsAccess(true);\n }\n }\n }, []);\n\n if (showLoading) return \n
\n \n
\n \n \n \n \n
\n \n setAddMLSTextArea(e.target.value.trim())}\n />\n
\n SELECT A CLIENT
\n\n PASTE MLS NUMBERS SEPARATED BY SEMICOLON\n
\n\n {propertyErrors.length > 0 && (\n
\n - \n {propertyErrors.map((err, idx) => (\n
- \n {err}\n \n ))}\n
- \n {propertySuccesses.map((msg, idx) => (\n
- \n {msg}\n \n ))}\n
\n
\n \n \n \n
\n \n \n \n {' '}\n 
\n \n )}\n\n
\n \n );\n}\n\nexport default withAuthenticator(AddToClient);\n\nAddToClient.propTypes = {\n userInfo: PropTypes.object,\n isLoggedIn: PropTypes.bool,\n listing: PropTypes.object,\n isListingAgent: PropTypes.bool,\n setIsOpenFreeTrialLimitPopup: PropTypes.func,\n propertyListings: PropTypes.array,\n};\n","const getMediaUrl = (photo, listingId, source) => {\n if (source === 'Spark') {\n const tempListingId = listingId.replace('#', '_');\n const filePath = new URL(photo.MediaURL).pathname;\n\n return `${process.env.REACT_APP_LISTHUB_INTEGRATION_BUCKET}/SPARK/${tempListingId}${filePath}`;\n }\n\n if (source === 'Bridge') {\n const tempListingId = listingId.replace('#', '_');\n const filePath = new URL(photo.MediaURL).pathname;\n\n return `${process.env.REACT_APP_LISTHUB_INTEGRATION_BUCKET}/BRIDGE/${tempListingId}${filePath}`;\n }\n\n if (source === 'Beaches') {\n const tempListingId = listingId.replace('#', '_');\n\n console.log(photo);\n const filePath = `/${photo.MediaURL}.jpeg`;\n\n console.log(filePath);\n\n return `${process.env.REACT_APP_LISTHUB_INTEGRATION_BUCKET}/BEACHES/${tempListingId}${filePath}`;\n }\n\n if (photo.MediaURL && photo.MediaURL.includes(`listhub-integration-bucket`)) {\n return photo.MediaURL;\n }\n\n const path = new URL(photo.MediaURL).pathname;\n\n return `${process.env.REACT_APP_LISTHUB_INTEGRATION_BUCKET}/media${path}`;\n};\n\nexport default getMediaUrl;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter, Link } from 'react-router-dom';\nimport bedroom from '../assets/bedroom.svg';\nimport bathroom from '../assets/bathroom.svg';\nimport AddToClient from './AddToClient';\nimport getMediaUrl from '../helpers/getMediaUrl';\nimport calendar from '../assets/calendar.png';\n\nconst Listing = ({\n listing,\n isLoggedIn,\n userInfo,\n isListingAgent,\n setIsOpenFreeTrialLimitPopup,\n propertyListings,\n setIsOpenVisitorSignupMessage,\n}) => {\n const listingPriceString =\n listing && listing.listing_price ? `${parseInt(listing.listing_price).toLocaleString()}` : 'N/A';\n\n return (\n \n setIsOpenFreeTrialLimitPopup(true)}\n role=\"button\"\n onKeyDown={() => setIsOpenFreeTrialLimitPopup(true)}\n tabIndex={0}\n >\n \n
\n ) : (\n \n \n
\n \n );\n};\n\nListing.propTypes = {\n isLoggedIn: PropTypes.bool,\n listing: PropTypes.object,\n userInfo: PropTypes.object,\n isListingAgent: PropTypes.bool,\n setIsOpenFreeTrialLimitPopup: PropTypes.func,\n propertyListings: PropTypes.array,\n setIsOpenVisitorSignupMessage: PropTypes.func,\n};\n\nexport default withRouter(Listing);\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport pageLeft from '../assets/page-left.svg';\nimport pageRight from '../assets/page-right.svg';\n\nconst PageButton = ({\n pageNumber,\n setPageNumber,\n pageIndex,\n isPreviousPageButton,\n isNextPageButton,\n pageNumberHistory,\n setPageNumberHistory,\n}) => {\n const defaultButtonStyling =\n 'flex justify-center text-white items-center w-8 h-8 rounded bg-blue-500 active:bg-blue-800 m-1';\n\n const selectedButtonStyling = 'flex justify-center text-white items-center w-8 h-8 rounded bg-blue-800 m-1';\n\n useEffect(() => {\n if (pageNumberHistory) {\n setPageNumber(JSON.parse(pageNumberHistory));\n }\n }, [pageNumberHistory]);\n\n const nextPage = async () => {\n const newPageNumber = pageNumber + 1;\n\n setPageNumberHistory(JSON.stringify(newPageNumber));\n };\n\n const goToPage = chosenNumber => {\n setPageNumberHistory(JSON.stringify(chosenNumber));\n };\n\n const previousPage = async () => {\n if (pageNumber !== 1) {\n const newPageNumber = pageNumber - 1;\n\n setPageNumberHistory(JSON.stringify(newPageNumber));\n }\n };\n\n if (isPreviousPageButton)\n return (\n \n
\n {listing && listing.Media && listing.Media[0] && listing.Media[0].MediaURL ? (\n {listing && listing.address ? listing.address : 'N/A'}
\n\n MLS #{listing.listing_id ? {listing.listing_id} : N/A}\n • \n \n {listing && listing.status ? listing.status : 'N/A'}\n \n
\nNo images found.
\n )}\n \n\n \n
\n \n \n\n {isLoggedIn && (\n - \n
- ${listingPriceString} \n
- {listing.bedrooms} \n
- {listing.bathrooms} \n
- \n {listing.square_feet ? {listing.square_feet.toLocaleString()} : N/A}\n sqft\n \n
\n
\n \n {!isLoggedIn && (\n {\n event.stopPropagation();\n event.preventDefault();\n setIsOpenVisitorSignupMessage(true);\n }}\n role=\"button\"\n onKeyDown={event => {\n event.stopPropagation();\n event.preventDefault();\n setIsOpenVisitorSignupMessage(true);\n }}\n tabIndex={0}\n className=\"focus:outline-none\"\n >\n \n
\n )}\n |
\n|
\n{pageIndex}
\n \n );\n};\n\nexport default PageButton;\n\nPageButton.propTypes = {\n pageNumber: PropTypes.number,\n setPageNumber: PropTypes.func,\n isPreviousPageButton: PropTypes.bool,\n isNextPageButton: PropTypes.bool,\n pageIndex: PropTypes.number,\n pageNumberHistory: PropTypes.string,\n setPageNumberHistory: PropTypes.func,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport PageButton from './PageButton';\n\nconst Pagination = ({ pageNumber, setPageNumber, userFilteredListings, pageNumberHistory, setPageNumberHistory }) => {\n const mapMiddlePages = userFilteredListings.map((listingsBatch, index) => {\n const totalPageNumber = userFilteredListings.length;\n const pageIndex = index + 1;\n\n if (\n pageIndex >= 4 &&\n pageIndex <= totalPageNumber - 3 &&\n pageIndex >= pageNumber - 1 &&\n pageIndex <= pageNumber + 1\n ) {\n return (\n\n
\n );\n }\n\n return ...;\n }\n\n if (pageOrder === 'last') {\n if (inLastPages) {\n return (\n \n
\n );\n }\n\n return ...;\n }\n };\n\n if (userFilteredListings.length > 4)\n return (\n \n {displayBackButton()}\n
\n );\n\n return (\n \n
\n \n
\n {mapMiddlePages}\n {handleFirstAndLastPages('last')}\n \n {displayBackButton()}\n
\n );\n};\n\nexport default Pagination;\n\nPagination.propTypes = {\n pageNumber: PropTypes.number,\n userFilteredListings: PropTypes.array,\n setPageNumber: PropTypes.func,\n pageNumberHistory: PropTypes.string,\n setPageNumberHistory: PropTypes.func,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport arrowRight from '../../../assets/arrow-right.svg';\n\nconst Arrow = ({ rotateArrow }) => (\n \n
\n {displayNextButton()}\n \n {userFilteredListings.length <= 4 &&
\n {mapSmallList}
}\n \n
\n \n);\n\nexport default FilterHeader;\n\nFilterHeader.propTypes = {\n toggleFilterDropdown: PropTypes.func,\n filterTitle: PropTypes.string,\n isMobile: PropTypes.bool,\n rotateArrow: PropTypes.bool,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport NumberFormat from 'react-number-format';\n\nconst NumberInput = ({ filterField, filterBy, setFilterBy, placeholder }) => {\n const handleFilterBy = value => {\n if (filterField === 'lowPrice') {\n setFilterBy({ ...filterBy, lowPrice: value });\n }\n if (filterField === 'highPrice') {\n setFilterBy({ ...filterBy, highPrice: value });\n }\n if (filterField === 'lowSquareFeet') {\n setFilterBy({ ...filterBy, lowSquareFeet: value });\n }\n if (filterField === 'highSquareFeet') {\n setFilterBy({ ...filterBy, highSquareFeet: value });\n }\n };\n\n return (\n {filterTitle}
\n\n
\n );\n}\n\nPrice.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport search from '../../assets/search.svg';\n\nexport default function Keyword({ filterBy, setFilterBy }) {\n return (\n \n
\n );\n}\n\nKeyword.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n};\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Arrow from './Arrow';\n\nconst FilterSubHeading = ({\n setIsHomeTypeOpen,\n subHeadingName,\n setIsBathroomsOpen,\n setIsBedroomsOpen,\n setIsPriceSortOpen,\n setIsSquareFeetSortOpen,\n isSort,\n filterBy,\n}) => {\n const [rotateArrow, setRotateArrow] = useState(false);\n\n const handleSubHeaderToggle = () => {\n setRotateArrow(open => !open);\n\n if (subHeadingName === 'Home Types') {\n setIsHomeTypeOpen(open => !open);\n }\n if (subHeadingName === 'Bathrooms') {\n setIsBathroomsOpen(open => !open);\n }\n if (subHeadingName === 'Bedrooms') {\n setIsBedroomsOpen(open => !open);\n }\n if (subHeadingName === 'Price') {\n setIsPriceSortOpen(open => !open);\n }\n if (subHeadingName === 'Square Feet') {\n setIsSquareFeetSortOpen(open => !open);\n }\n };\n\n useEffect(() => {\n if (filterBy) {\n handleIfChecked();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [filterBy]);\n\n const handleIfChecked = () => {\n if (subHeadingName === 'Bedrooms') {\n return !!filterBy.bedrooms;\n }\n if (subHeadingName === 'Bathrooms') {\n return !!filterBy.bathrooms;\n }\n if (subHeadingName === 'Home Types') {\n return filterBy.homeTypes.length > 0;\n }\n };\n\n return (\n \n );\n};\n\nexport default FilterSubHeading;\n\nFilterSubHeading.propTypes = {\n setIsHomeTypeOpen: PropTypes.func,\n setIsBathroomsOpen: PropTypes.func,\n setIsBedroomsOpen: PropTypes.func,\n subHeadingName: PropTypes.string,\n setIsPriceSortOpen: PropTypes.func,\n setIsSquareFeetSortOpen: PropTypes.func,\n isSort: PropTypes.bool,\n filterBy: PropTypes.object,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default function SortInput({ filterBy, setFilterBy, sortField, sortDirection }) {\n const { priceSort, squarefeetSort } = filterBy;\n\n const handleSort = () => {\n if (sortField === 'price') {\n if (filterBy.priceSort === `${sortDirection} ${sortField}`) {\n setFilterBy({ ...filterBy, priceSort: '' });\n } else {\n setFilterBy({ ...filterBy, priceSort: `${sortDirection} ${sortField}`, squarefeetSort: '' });\n }\n }\n if (sortField === 'squarefeet') {\n if (filterBy.squarefeetSort === `${sortDirection} ${sortField}`) {\n setFilterBy({ ...filterBy, squarefeetSort: '' });\n } else {\n setFilterBy({ ...filterBy, squarefeetSort: `${sortDirection} ${sortField}`, priceSort: '' });\n }\n }\n };\n\n return (\n \n setFilterBy({ ...filterBy, keyword: value })}\n />\n 
\n
\n \n \n
\n );\n}\n\nSortInput.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n sortField: PropTypes.string,\n sortDirection: PropTypes.string,\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport FilterSubHeader from './shared/FilterSubHeading';\nimport SortInput from './shared/SortInput';\n\nexport default function Sort({ filterBy, setFilterBy }) {\n const [isPriceSortOpen, setIsPriceSortOpen] = useState(false);\n const [isSquareFeetSortOpen, setIsSquareFeetSortOpen] = useState(false);\n\n return (\n \n
\n );\n}\n\nSort.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport NumberInput from './shared/NumberInput';\n\nconst SquareFeet = ({ filterBy, setFilterBy }) => (\n \n
\n \n
\n )}\n \n
\n \n
\n )}\n \n
\n);\n\nexport default SquareFeet;\n\nSquareFeet.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst RadioInput = ({ filterBy, setFilterBy, filterName, filterValue }) => {\n const changeFilterValue = () => {\n if (filterName === 'bathrooms') {\n if (filterValue === filterBy.bathrooms) {\n setFilterBy({ ...filterBy, bathrooms: '' });\n } else {\n setFilterBy({ ...filterBy, bathrooms: filterValue });\n }\n }\n if (filterName === 'bedrooms') {\n if (filterValue === filterBy.bedrooms) {\n setFilterBy({ ...filterBy, bedrooms: '' });\n } else {\n setFilterBy({ ...filterBy, bedrooms: filterValue });\n }\n }\n };\n\n return (\n \n \n
\n );\n};\n\nexport default RadioInput;\n\nRadioInput.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n filterName: PropTypes.string,\n filterValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport FilterSubHeading from './shared/FilterSubHeading';\nimport RadioInput from './shared/FilterRadio';\n\nconst Select = ({ filterBy, setFilterBy }) => {\n const [isBedroomsOpen, setIsBedroomsOpen] = useState(false);\n\n return (\n \n
\n );\n};\n\nexport default Select;\n\nSelect.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport FilterSubHeading from './shared/FilterSubHeading';\nimport RadioInput from './shared/FilterRadio';\n\nconst Select = ({ filterBy, setFilterBy }) => {\n const [isBathroomsOpen, setIsBathroomsOpen] = useState(false);\n\n return (\n \n
\n )}\n \n
\n );\n};\n\nexport default Select;\n\nSelect.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst FilterCheckbox = ({ filterBy, handleTypeChange, filterName }) => (\n \n
\n )}\n \n \n
\n);\n\nexport default FilterCheckbox;\n\nFilterCheckbox.propTypes = {\n filterBy: PropTypes.object,\n handleTypeChange: PropTypes.func,\n filterName: PropTypes.string,\n};\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport FilterCheckbox from './shared/FilterCheckbox';\nimport FilterSubHeading from './shared/FilterSubHeading';\n\nconst Select = ({ filterBy, setFilterBy, fetchedListings }) => {\n const [isHomeTypeOpen, setIsHomeTypeOpen] = useState(false);\n const [homeTypeList, setHomeTypeList] = useState([]);\n\n const handleTypeChange = type => {\n if (filterBy.homeTypes.includes(type)) {\n setFilterBy({ ...filterBy, homeTypes: [...filterBy.homeTypes].filter(item => item !== type) });\n } else {\n setFilterBy({ ...filterBy, homeTypes: [...filterBy.homeTypes, type] });\n }\n };\n\n useEffect(() => {\n if (fetchedListings) {\n fetchedListings.map(item => {\n if (item.home_type) {\n // eslint-disable-next-line no-shadow\n setHomeTypeList(homeTypeList => [...new Set([...homeTypeList, item.home_type])]);\n }\n\n return null;\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [fetchedListings]);\n\n const renderHomeTypes = homeTypeList.map(item => (\n \n
\n );\n};\n\nexport default Select;\n\nSelect.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n fetchedListings: PropTypes.array,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Bedrooms from './Bedrooms';\nimport Bathrooms from './Bathrooms';\nimport HomeTypes from './HomeTypes';\n\nconst Select = ({ filterBy, setFilterBy, fetchedListings }) => (\n {renderHomeTypes}
}\n \n
\n);\n\nexport default Select;\n\nSelect.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n fetchedListings: PropTypes.array,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Keyword from './Keyword';\nimport Sort from './Sort';\nimport Select from './Select';\n\nexport default function More({ filterBy, setFilterBy, toggleMore, fetchedListings }) {\n return (\n \n \n Done\n \n
\n );\n}\n\nMore.propTypes = {\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n toggleMore: PropTypes.func,\n fetchedListings: PropTypes.array,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FilterHeader from '../filters/shared/FilterHeader';\nimport { Price, SquareFeet, More } from '../filters';\nimport arrowRight from '../../assets/arrow-right.svg';\n\nconst MobileFilterAndSort = ({\n setFilterDropdowns,\n filterDropdowns,\n filterBy,\n setFilterBy,\n toggleMore,\n fetchedListings,\n}) => {\n const { isPriceOpen, isSquareFeetOpen, isMoreOpen } = filterDropdowns;\n const toggleFilterDropdown = item => {\n if (item === 'Price') {\n setFilterDropdowns(\n isPriceOpen\n ? { ...filterDropdowns, isPriceOpen: false }\n : { ...filterDropdowns, isPriceOpen: true, isSquareFeetOpen: false }\n );\n }\n if (item === 'Square Feet') {\n setFilterDropdowns(\n isSquareFeetOpen\n ? { ...filterDropdowns, isSquareFeetOpen: false }\n : { ...filterDropdowns, isSquareFeetOpen: true, isPriceOpen: false }\n );\n }\n };\n\n return (\n Sort By
\n\n \n
\n \n
\n \n
\n {isPriceOpen && \n \n 
\n
\n More
\n\n
\n );\n};\n\nexport default DesktopFilterAndSort;\n\nDesktopFilterAndSort.propTypes = {\n setFilterDropdowns: PropTypes.func,\n filterDropdowns: PropTypes.object,\n filterBy: PropTypes.object,\n setFilterBy: PropTypes.func,\n fetchedListings: PropTypes.array,\n};\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport MobileFilterAndSort from './MobileFilterAndSort';\nimport DesktopFilterAndSort from './DesktopFilterAndSort';\n\nconst STATE_KEY = 'filterHistory';\n\nsessionStorage.setItem(STATE_KEY, '');\n\nconst FilterAndSort = ({ fetchedListings, setPageNumber, paginateListings, newSearch }) => {\n const [filterBy, setFilterBy] = useState({\n lowPrice: '',\n highPrice: '',\n lowSquareFeet: '',\n highSquareFeet: '',\n bedrooms: '',\n bathrooms: '',\n homeTypes: [],\n keyword: '',\n priceSort: '',\n squarefeetSort: '',\n });\n const [filterDropdowns, setFilterDropdowns] = useState({\n isSortOpen: false,\n isPriceOpen: false,\n isSquareFeetOpen: false,\n isSelectOpen: false,\n isKeywordOpen: false,\n isMoreOpen: false,\n });\n const [filterHistory, setFilterHistory] = useState(sessionStorage.getItem(STATE_KEY));\n const {\n priceSort,\n squarefeetSort,\n lowPrice,\n highPrice,\n lowSquareFeet,\n highSquareFeet,\n bedrooms,\n bathrooms,\n homeTypes,\n keyword,\n } = filterBy;\n\n useEffect(() => {\n sessionStorage.setItem(STATE_KEY, filterHistory);\n if (!Object.values(filterBy).every(item => item === '' || item.length === 0)) {\n setFilterHistory(JSON.stringify(filterBy));\n } else if (filterHistory && !newSearch) {\n setFilterBy(JSON.parse(filterHistory));\n }\n }, [filterBy, filterHistory, newSearch]);\n\n const filterResults = () => {\n let filteredListings = [...fetchedListings];\n\n setPageNumber(1);\n\n if (lowPrice || highPrice) {\n if (!highPrice) {\n filteredListings = [...filteredListings].filter(\n listing => listing.listing_price >= parseInt(lowPrice.replace(/[^0-9]/g, ''))\n );\n } else if (!lowPrice) {\n filteredListings = [...filteredListings].filter(\n listing => listing.listing_price <= parseInt(highPrice.replace(/[^0-9]/g, ''))\n );\n } else if (lowPrice && highPrice) {\n filteredListings = [...filteredListings].filter(\n listing =>\n listing.listing_price >= parseInt(lowPrice.replace(/[^0-9]/g, '')) &&\n listing.listing_price <= parseInt(highPrice.replace(/[^0-9]/g, ''))\n );\n }\n }\n\n if (lowSquareFeet || highSquareFeet) {\n if (!highSquareFeet) {\n filteredListings = [...filteredListings].filter(\n listing => listing.square_feet >= parseInt(lowSquareFeet.replace(/[^0-9]/g, ''))\n );\n } else if (!lowSquareFeet) {\n filteredListings = [...filteredListings].filter(\n listing => listing.square_feet <= parseInt(highSquareFeet.replace(/[^0-9]/g, ''))\n );\n } else if (lowSquareFeet && highSquareFeet) {\n filteredListings = [...filteredListings].filter(\n listing =>\n listing.square_feet >= parseInt(lowSquareFeet.replace(/[^0-9]/g, '')) &&\n listing.square_feet <= parseInt(highSquareFeet.replace(/[^0-9]/g, ''))\n );\n }\n }\n\n if (bedrooms) {\n if (bedrooms === 'Any') {\n filteredListings = [...filteredListings].filter(listing => listing.bedrooms >= 0);\n } else {\n filteredListings = [...filteredListings].filter(listing => listing.bedrooms >= bedrooms);\n }\n }\n\n if (bathrooms) {\n if (bathrooms === 'Any') {\n filteredListings = [...filteredListings].filter(listing => listing.bathrooms >= 0);\n } else {\n filteredListings = [...filteredListings].filter(listing => listing.bathrooms >= bathrooms);\n }\n }\n\n if (homeTypes.length > 0) {\n filteredListings = [...filteredListings].filter(listing => homeTypes.includes(listing.home_type));\n }\n\n if (keyword) {\n filteredListings = [...filteredListings].filter(listing =>\n Object.keys(listing).some(k => {\n if (typeof listing[k] === 'string') {\n return listing[k].toLowerCase().includes(keyword.toLowerCase());\n }\n\n return null;\n })\n );\n }\n\n if (priceSort) {\n const priceField = 'listing_price';\n\n setFilterBy({ ...filterBy, squarefeetSort: '' });\n\n if (priceSort.includes('ascending')) {\n filteredListings.sort((a, b) => a[priceField] - b[priceField]);\n } else {\n filteredListings.sort((a, b) => b[priceField] - a[priceField]);\n }\n }\n\n if (squarefeetSort) {\n const squarefeetField = 'square_feet';\n\n setFilterBy({ ...filterBy, priceSort: '' });\n\n if (squarefeetSort.includes('ascending')) {\n filteredListings.sort((a, b) => a[squarefeetField] - b[squarefeetField]);\n } else {\n filteredListings.sort((a, b) => b[squarefeetField] - a[squarefeetField]);\n }\n }\n\n paginateListings(filteredListings);\n };\n\n const toggleMore = () => {\n const { isMoreOpen } = filterDropdowns;\n\n setFilterDropdowns(\n isMoreOpen\n ? { ...filterDropdowns, isMoreOpen: false }\n : { ...filterDropdowns, isMoreOpen: true, isPriceOpen: false, isSquareFeetOpen: false }\n );\n };\n\n useEffect(() => {\n if (\n priceSort ||\n squarefeetSort ||\n lowPrice ||\n highPrice ||\n lowSquareFeet ||\n highSquareFeet ||\n bedrooms ||\n bathrooms ||\n homeTypes ||\n keyword\n ) {\n filterResults();\n }\n }, [\n priceSort,\n squarefeetSort,\n lowPrice,\n highPrice,\n lowSquareFeet,\n highSquareFeet,\n bedrooms,\n bathrooms,\n homeTypes,\n keyword,\n ]);\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nexport default FilterAndSort;\n\nFilterAndSort.propTypes = {\n fetchedListings: PropTypes.array,\n setPageNumber: PropTypes.func,\n paginateListings: PropTypes.func,\n newSearch: PropTypes.bool,\n};\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Listing from './Listing';\nimport Pagination from './Pagination';\nimport FilterAndSort from './FilterAndSort/FilterAndSort';\n\nconst SearchResults = ({\n pageNumber,\n setPageNumber,\n userFilteredListings,\n setUserFilteredListings,\n userInfo,\n isLoggedIn,\n fetchedListings,\n resultsMessage,\n setResultsMessage,\n newSearch,\n pageNumberHistory,\n setPageNumberHistory,\n isListingAgent,\n setIsOpenFreeTrialLimitPopup,\n propertyListings,\n setIsOpenVisitorSignupMessage,\n}) => {\n useEffect(() => {\n if (fetchedListings) {\n paginateListings(fetchedListings);\n\n sendListhubTrackingResults(fetchedListings);\n }\n }, [fetchedListings]);\n\n const paginateListings = data => {\n if (data.length > 0) {\n const paginatedData = [];\n\n for (let i = 0; i < data.length; i += 8) {\n paginatedData.push(data.slice(i, i + 8));\n }\n\n setUserFilteredListings(paginatedData);\n } else {\n setUserFilteredListings([]);\n setResultsMessage('No results found.');\n }\n };\n\n const sendListhubTrackingResults = listings => {\n const listingKeys = listings.reduce((acc, currentListing) => {\n if (currentListing.source === 'ListHub') {\n acc.push(currentListing.listing_key);\n }\n\n return acc;\n }, []);\n\n // eslint-disable-next-line no-undef\n lh('submit', 'SEARCH_DISPLAY', listingKeys);\n };\n\n return (\n \n
\n );\n};\n\nexport default SearchResults;\n\nSearchResults.propTypes = {\n pageNumber: PropTypes.number,\n setPageNumber: PropTypes.func,\n userFilteredListings: PropTypes.array,\n setUserFilteredListings: PropTypes.func,\n userInfo: PropTypes.object,\n isLoggedIn: PropTypes.bool,\n fetchedListings: PropTypes.array,\n resultsMessage: PropTypes.string,\n setResultsMessage: PropTypes.func,\n newSearch: PropTypes.bool,\n pageNumberHistory: PropTypes.string,\n setPageNumberHistory: PropTypes.func,\n isListingAgent: PropTypes.bool,\n setIsOpenFreeTrialLimitPopup: PropTypes.func,\n propertyListings: PropTypes.array,\n setIsOpenVisitorSignupMessage: PropTypes.func,\n};\n","import React, { useState, useEffect } from 'react';\nimport { API } from 'aws-amplify';\nimport { withRouter, Redirect } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport MLSAddForm from './MLSAddForm';\nimport searchBackground from '../assets/searchBackground.png';\nimport searchImage from '../assets/search.svg';\nimport locationLightIcon from '../assets/location-light-icon.svg';\nimport locationDarkIcon from '../assets/location-dark-icon.svg';\nimport OutsideClickHandler from '../helpers/OutsideClickHandler';\nimport { listListings, getListingByListingId } from '../graphql/queries';\nimport Loading from './Loading';\nimport SearchResults from './SearchResults';\n\nlet searchingNow = 0;\n\nconst SearchListings = ({\n isLoggedIn,\n fetchedListings,\n searchTermsHistory,\n setSearchTermsHistory,\n pageNumberHistory,\n setPageNumberHistory,\n userHasSearched,\n setUserHasSearched,\n setFetchedListings,\n handleLogin,\n userInfo,\n loginRoute,\n isListingAgent,\n setIsOpenFreeTrialLimitPopup,\n propertyListings,\n setIsOpenVisitorSignupMessage,\n}) => {\n const [searchTerms, setSearchTerms] = useState(searchTermsHistory || '');\n const [showSearchDropdown, setSearchDropdown] = useState(false);\n const [isMLSAddOpen, setIsMLSAddOpen] = useState(false);\n const [searchError, setSearchError] = useState('');\n const [userFilteredListings, setUserFilteredListings] = useState([]);\n const [resultsMessage, setResultsMessage] = useState();\n const [showLoading, setShowLoading] = useState(false);\n const [currentLocationSelected, setCurrentLocationSelected] = useState(false);\n const [pageNumber, setPageNumber] = useState(pageNumberHistory);\n const [newSearch, setNewSearch] = useState();\n const listQuery = async () => {\n try {\n setShowLoading(true);\n setSearchTermsHistory(searchTerms);\n setUserFilteredListings([]);\n setNewSearch(true);\n setPageNumberHistory('1');\n let nextToken;\n let fetchedData = [];\n const prevSearch = searchingNow;\n\n do {\n if (prevSearch !== searchingNow) {\n fetchedData = [];\n setFetchedListings(fetchedData);\n setShowLoading(true);\n break;\n }\n\n // General Search\n const queryOptions = {\n filter: {\n and: [\n { or: [{ status: { eq: 'Active' } }, { status: { eq: 'Pending' } }, { status: { eq: 'Withdrawn' } }] },\n ],\n or: [{ search_address: { contains: searchTerms.toLowerCase() } }, { zip: { eq: searchTerms } }],\n },\n limit: 10000,\n };\n\n if (nextToken !== null) {\n queryOptions.nextToken = nextToken;\n }\n\n let params = {\n query: listListings,\n variables: queryOptions,\n authMode: 'API_KEY',\n };\n\n let returnKey = 'listListings';\n\n // Query by MLS ID\n const isMLSId = /(^[a-zA-Z]*[0-9]+)\\w+/.test(searchTerms) && searchTerms.length > 5;\n\n if (isMLSId) {\n console.log(`${searchTerms} is an MLS ID`);\n\n params = {\n query: getListingByListingId,\n variables: { listing_id: searchTerms.toUpperCase() },\n authMode: 'API_KEY',\n };\n\n returnKey = 'getListingByListingId';\n }\n\n // Run Query\n const listingsBatch = await API.graphql(params).then(response => response.data[returnKey]);\n\n for (const item of listingsBatch.items) {\n fetchedData.push(item);\n }\n\n if (fetchedData.length > 0) {\n paginateListings(fetchedData);\n setFetchedListings(fetchedData);\n setShowLoading(false);\n }\n\n ({ nextToken } = listingsBatch);\n } while (nextToken);\n\n if (prevSearch === searchingNow) {\n if (fetchedData.length === 0) {\n setResultsMessage('No results found.');\n setFetchedListings([]);\n } else {\n setFetchedListings(fetchedData);\n }\n setSearchDropdown(false);\n setShowLoading(false);\n }\n } catch (error) {\n setShowLoading(false);\n\n handleSearchError('There has been an error. Please check your search terms and try again.');\n }\n };\n\n const toggleSearchDropdown = () => {\n setSearchDropdown(prevSearchDropdownOpen => !prevSearchDropdownOpen);\n };\n\n const paginateListings = data => {\n if (data.length > 0) {\n const paginatedData = [];\n\n for (let i = 0; i < data.length; i += 8) {\n paginatedData.push(data.slice(i, i + 8));\n }\n\n setUserFilteredListings(paginatedData);\n } else {\n setUserFilteredListings([]);\n setResultsMessage('No results found.');\n }\n };\n const handleSearchError = error => {\n setSearchError(error);\n setSearchDropdown(true);\n };\n\n const searchByLocation = async () => {\n if (navigator.geolocation) {\n setSearchError('');\n setSearchDropdown(false);\n navigator.geolocation.getCurrentPosition(position => {\n fetch(\n `https://maps.googleapis.com/maps/api/geocode/json?latlng=${position.coords.latitude},${position.coords.longitude}&key=AIzaSyCn8iRJpewWCvg12KHjOinW05mPDbwF_ik`\n )\n .then(response => response.json())\n .then(response => {\n // Search based on user's zip\n if (response.results[0]) {\n response.results[0].address_components.map(data => {\n if (data.types[0] === 'postal_code') {\n setSearchTermsHistory(data.long_name);\n setSearchTerms(data.long_name);\n setCurrentLocationSelected(true);\n setUserHasSearched(true);\n }\n\n return null;\n });\n } else {\n handleSearchError('There has been an error. Please try again or enter a search term.');\n }\n })\n .catch(error => {\n handleSearchError('There has been an error. Please try again or enter a search term.');\n });\n });\n } else {\n handleSearchError('Geolocation is not supported by this browser.');\n }\n };\n\n const searchListings = () => {\n if (searchTerms) {\n setUserHasSearched(true);\n searchingNow += 1;\n listQuery();\n setSearchError('');\n toggleSearchDropdown();\n }\n };\n\n useEffect(() => {\n if (loginRoute && !isLoggedIn) {\n handleLogin(true);\n }\n if (isLoggedIn) {\n handleLogin(false);\n }\n if (currentLocationSelected) {\n searchingNow += 1;\n listQuery();\n setCurrentLocationSelected(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentLocationSelected, setCurrentLocationSelected, isLoggedIn, loginRoute]);\n\n if (loginRoute) return \n
\n \n {userFilteredListings.length > 0 ? (\n userFilteredListings[pageNumber - 1].map(listing => (\n
\n {resultsMessage}
\n )}\n\n
\n {userHasSearched && (\n \n \n
\n \n
\n \n \n \n\n {isLoggedIn && (\n <>\n {\n if (isLoggedIn) {\n setIsMLSAddOpen(prevIsMLSAddOpen => !prevIsMLSAddOpen);\n } else {\n handleLogin(true);\n }\n }}\n style={{ maxWidth: '37rem' }}\n >\n ADD BY MLS NUMBERS\n \n \n )}\n
\n \n Search our listings\n
\n\n
\n \n {\n if (event.key === 'Enter') {\n if (searchTerms) {\n searchListings();\n } else {\n handleSearchError('Please enter a search term or select your location.');\n }\n }\n }}\n onChange={event => {\n setCurrentLocationSelected(false);\n setSearchTerms(event.target.value);\n setSearchError('');\n }}\n onFocus={() => setSearchDropdown(true)}\n />\n \n 
\n \n
\n {showSearchDropdown && (\n - \n
- \n
\n Current Location\n \n
\n {searchError && (\n - \n
{searchError}
\n \n )}\n
\n \n
\n OR
\n \n\n {showLoading ? (\n
\n )}\n \n
\n ) : (\n \n
\n {isMLSAddOpen && (\n \n {isLoggedIn ? (\n
\n \n \n App Download\n \n
\n ) : (\n \n DOWNLOAD OUR APP\n
\n\n \n LOGIN\n \n \n DOWNLOAD THE APP\n \n
\n )}\n \n AGENT LOGIN\n
\n\n SIGN UP BY DOWNLOADING OUR APP\n
\n\n
\n \n Our Mobile App gives Real Estate Agents the opportunity to simplify and optimize the home\n tour scheduling process...\n
\n- \n
- \n
\n
Select the homes you would like to show to your client
\n \n - \n
About Time Tours optimizes the route and creates a schedule
\n \n - \n
Finalize the tour times and send schedule requests to listing agents
\n \n
\n \n
\n );\n};\n\nexport default GalleryModal;\n\nGalleryModal.propTypes = {\n source: PropTypes.string,\n galleryIndex: PropTypes.number,\n setGalleryIndex: PropTypes.func,\n galleryLength: PropTypes.number,\n toggleGallery: PropTypes.func,\n isGalleryOpen: PropTypes.bool,\n};\n","/* eslint-disable react/jsx-props-no-spreading */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ListingSourceLink = ({ source }) => {\n const sharedAttributes = {\n className: 'pb-2 pl-2 text-white underline',\n target: '_blank',\n rel: 'noreferrer noopener',\n };\n\n switch (source) {\n case 'Spark': {\n return (\n \n Spark\n \n );\n }\n case 'Bridge': {\n return (\n \n Bridge\n \n );\n }\n case 'ListHub': {\n return (\n \n Listhub\n \n );\n }\n case 'Beaches': {\n return (\n \n Beaches\n \n );\n }\n default: {\n return ' N/A';\n }\n }\n};\n\nListingSourceLink.propTypes = {\n source: PropTypes.string,\n};\n\nexport default ListingSourceLink;\n","import React, { useState, useEffect } from 'react';\nimport { API } from 'aws-amplify';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport SanitizedHTML from 'react-sanitized-html';\nimport GalleryModal from './GalleryModal';\nimport bedroom from '../assets/bedroom.svg';\nimport bathroom from '../assets/bathroom.svg';\nimport { getListing } from '../graphql/queries';\nimport AddToClient from './AddToClient';\nimport Loading from './Loading';\nimport getMediaUrl from '../helpers/getMediaUrl';\nimport ListingSourceLink from './ListingSourceLink';\n\nconst ListingDetail = ({ match, location, isLoggedIn, userInfo }) => {\n const [isGalleryOpen, setIsGalleryOpen] = useState(false);\n const [galleryIndex, setGalleryIndex] = useState(0);\n\n const { id } = match.params;\n const { hash } = location;\n const [listing, setListingInfo] = useState();\n const [showLoading, setShowLoading] = useState(true);\n const [errorMessage, setErrorMessage] = useState('');\n\n const currentYear = new Date().getFullYear();\n\n const renderImages = () => {\n console.log(listing);\n if (listing && listing.Media && listing.Media.length) {\n return listing.Media.map((photo, index) => {\n if (index > 0 && index < 5) {\n return (\n \n
\n \n
\n \n \n \n
\n \n 
\n
\n \n
\n );\n\n if (errorMessage)\n return (\n \n
\n );\n\n return (\n {errorMessage}
\n\n {listing && (\n
\n );\n};\n\nexport default withRouter(ListingDetail);\n\nListingDetail.propTypes = {\n match: PropTypes.object,\n location: PropTypes.object,\n isLoggedIn: PropTypes.bool,\n userInfo: PropTypes.object,\n};\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Auth, API, graphqlOperation } from 'aws-amplify';\nimport CreateIcon from '@material-ui/icons/Create';\nimport { Tooltip } from '@material-ui/core';\nimport { updateUser } from '../../graphql/mutations';\n\nconst VerifyPhoneNumber = ({ setIsVerifyPhoneOpen, userInfo, setUserInfo }) => {\n const [currentUserPhoneVerified, setCurrentUserPhoneVerified] = useState(false);\n const [phoneNumber, setPhoneNumber] = useState('');\n const [isOpenEditPhone, setIsOpenEditPhone] = useState(false);\n const [confirmationCode, setConfirmationCode] = useState('');\n const [isCodeSent, setIsCodeSent] = useState(false);\n const [isVisibleEditIcon, setIsVisibleEditIcon] = useState(true);\n const [authUser, setAuthUser] = useState(null);\n const [cellPhoneError, setCellPhoneError] = useState('');\n const [codeError, setCodeError] = useState('');\n const [userInfoFromDb, setUserInfoFromDb] = useState();\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const userPoolUser = await Auth.currentUserPoolUser();\n\n setAuthUser(userPoolUser);\n\n if (userPoolUser && userPoolUser.attributes && userPoolUser.attributes.phone_number_verified) {\n setCurrentUserPhoneVerified(userPoolUser.attributes.phone_number_verified);\n }\n } catch (error) {\n console.log(error);\n }\n };\n\n fetchData();\n }, []);\n\n const toggleVerifyPhoneModal = () => {\n setIsVerifyPhoneOpen(prevIsVerifyPhoneOpen => !prevIsVerifyPhoneOpen);\n };\n\n const verifyPhoneNumber = async () => {\n setIsVisibleEditIcon(false);\n\n Auth.verifyUserAttribute(authUser, 'phone_number')\n .then(res => {\n setIsCodeSent(true);\n })\n .catch(error => {\n console.error(error);\n });\n\n setPhoneNumber(userInfo.cell_phone);\n };\n\n const validateCode = () => {\n if (!confirmationCode) {\n setCodeError('Confirmation code is required to continue');\n\n return false;\n }\n setCodeError('');\n\n return true;\n };\n\n const verifyCodeClick = async () => {\n try {\n if (!validateCode()) {\n return false;\n }\n\n await Auth.verifyUserAttributeSubmit(authUser, 'phone_number', confirmationCode);\n\n setCurrentUserPhoneVerified(true);\n\n if (userInfoFromDb) {\n setUserInfo(userInfoFromDb);\n }\n\n toggleVerifyPhoneModal();\n } catch (error) {\n setCodeError(error.message || 'There was an error confirming your code. Please try again.');\n }\n };\n\n const validateCellPhone = () => {\n if (!phoneNumber) {\n setCellPhoneError('Cell Phone Number is required');\n\n return false;\n }\n\n if (phoneNumber.length !== 12) {\n setCellPhoneError('Please enter phone number in this format: XXX-XXX-XXXX');\n\n return false;\n }\n if (phoneNumber === userInfo.cell_phone) {\n setCellPhoneError('Please enter different phone number to update.');\n\n return false;\n }\n\n setCellPhoneError('');\n\n return true;\n };\n\n const updatePhoneNumber = async () => {\n if (!validateCellPhone()) {\n return false;\n }\n\n const cellPhone = `+1${phoneNumber.replace(/-/g, '')}`;\n\n const res = await Auth.updateUserAttributes(authUser, {\n phone_number: cellPhone,\n });\n\n if (res === 'SUCCESS') {\n const updateUserInput = {\n id: userInfo.id,\n cell_phone: phoneNumber,\n };\n\n const {\n data: { updateUser: dbUser },\n } = await API.graphql(graphqlOperation(updateUser, { updateUserInput }));\n\n setUserInfoFromDb(dbUser);\n\n await Auth.verifyUserAttribute(authUser, 'phone_number')\n .then(response => {\n setIsCodeSent(true);\n })\n .catch(error => {\n console.error(error);\n });\n }\n };\n\n const editPhoneClick = () => {\n setIsOpenEditPhone(prevIsOpenEditPhone => !prevIsOpenEditPhone);\n setIsVisibleEditIcon(false);\n };\n\n const isInputNumber = evt => {\n const ch = String.fromCharCode(evt.which);\n\n if (!(/[0-9]/.test(ch) || /[-]/.test(ch))) {\n evt.preventDefault();\n }\n };\n\n return (\n \n
\n )}\n \n {listing && listing.Media && listing.Media[0] && listing.Media[0].MediaURL ? (\n
\n \n \n
\n ) : (\n \n {renderImages()}\n
\n No images found.
\n )}\n\n
\n \n
\n {isLoggedIn && \n
\n - \n
- \n ${parseInt(listing.listing_price).toLocaleString()}\n \n
- {listing.bedrooms} \n
- {listing.bathrooms} \n
- \n {listing.square_feet ? {listing.square_feet.toLocaleString()} : N/A}\n sqft\n \n
\n 
\n 
\n
\n |
\n|
\n\n
\n \n {listing.address}\n
\n\n
\n \n
\n Description:
\n\n
\n Details:
\n- \n {listing.bedrooms && (\n
- \n
\n Bedrooms: {listing.bedrooms}\n
\n \n )}\n {listing.bathrooms && (\n - \n
\n Bathrooms: {listing.bathrooms}\n
\n \n )}\n {listing.square_feet && (\n - \n
\n Square Feet: {listing.square_feet}\n
\n \n )}\n {listing.lot_size && (\n - \n
\n Lot Size:{' '}\n \n {listing.lot_size} {listing.lot_size_units}\n \n
\n \n )}\n {listing.year_built && (\n - \n
\n Year Built: {listing.year_built}\n
\n \n )}\n {listing.listing_id && (\n - \n
\n MLS #: {listing.listing_id}\n
\n \n )}\n {listing.county && (\n - \n
\n County: {listing.county}\n
\n \n )}\n {listing.status && (\n - \n
\n Status: {listing.status}\n
\n \n )}\n
\n
\n {isGalleryOpen && listing.Media.length > 0 && (\n \n
\n \n
\n - \n
- \n
Listing Agent:
\n \n - \n
{listing.listing_agent}
\n \n - \n
\n {listing.listing_agent_phone\n ? listing.listing_agent_phone.replace(/(\\d{3})(\\d{3})(\\d{4})/, '$1-$2-$3')\n : ''}\n
\n \n - \n
{listing.listing_agent_email}
\n \n - \n
{listing.listing_office}
\n \n
- \n
- \n
\n Source:\n
\n\n \n - \n
\n Copyright © {currentYear} Listhub. All rights reserved. All information provided by the listing\n agent/broker is deemed reliable but is not guaranteed and should be independently verified.\n
\n \n
\n \n
\n );\n};\n\nexport default VerifyPhoneNumber;\n\nVerifyPhoneNumber.propTypes = {\n setIsVerifyPhoneOpen: PropTypes.func,\n userInfo: PropTypes.object,\n setUserInfo: PropTypes.func,\n};\n","import { Auth } from 'aws-amplify';\n\nexport const CancelSubscription = async subscriptionId => {\n try {\n const sessionToken = `Bearer ${(await Auth.currentSession()).getIdToken().jwtToken}`;\n const payload = { subId: subscriptionId };\n\n return fetch(process.env.REACT_APP_STRIPE_CANCEL_SUBSCRIPTION, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: sessionToken,\n },\n body: JSON.stringify({ payload }),\n }).then(handleFetchResult);\n } catch (error) {\n console.log(error);\n\n return error;\n }\n};\n\nconst handleFetchResult = result => {\n if (!result.ok) {\n console.log(result);\n }\n\n return result.json();\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { CancelSubscription } from '../../services/CancelSubscription';\n\nconst ConfirmCancelSubscription = ({ setIsCancelSubOpen, subscriptionInfo, setIsRecurring }) => {\n const [errorMessage, setErrorMessage] = useState('');\n\n const confirmEvent = async () => {\n if (subscriptionInfo && subscriptionInfo.subscription && subscriptionInfo.subscription.original_order_id) {\n const deleteData = await CancelSubscription(subscriptionInfo.subscription.original_order_id);\n\n if (deleteData.response === 'deleted') {\n setIsCancelSubOpen(false);\n setIsRecurring(false);\n } else {\n setErrorMessage('Please try again later');\n }\n }\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n\n \n We need to verify your phone number for app functionality.\n
\n\n Please press the Verify button and enter your verification code.\n
\nIf you want to edit your phone number, click on edit icon.
\n\n {userInfo && (\n\n {userInfo.cell_phone}\n {isVisibleEditIcon && (\n \n \n \n \n )}\n
\n )}\n\n {!isOpenEditPhone && !isCodeSent && (\n \n \n Verify\n \n
\n )}\n {currentUserPhoneVerified && Your current phone number is verified
}\n {isOpenEditPhone && (\n\n
\n )}\n {isCodeSent && (\n \n Update phone number\n
\n\n setPhoneNumber(e.target.value.trim())}\n disabled={isCodeSent}\n onKeyPress={input => isInputNumber(input)}\n />\n
\n {cellPhoneError && {cellPhoneError}
}\n {!isCodeSent && (\n\n \n Update\n \n
\n )}\n \n {\n setConfirmationCode(e.target.value.trim());\n }}\n value={confirmationCode}\n />\n\n {codeError &&
\n )}\n {codeError}
}\n\n\n \n Verify Code\n \n
\n \n \n \n
\n \n \n \n
\n );\n};\n\nexport default ConfirmCancelSubscription;\n\nConfirmCancelSubscription.propTypes = {\n setIsCancelSubOpen: PropTypes.func,\n subscriptionInfo: PropTypes.object,\n setIsRecurring: PropTypes.func,\n};\n","/* eslint-disable camelcase */\nimport React, { useEffect, useState } from 'react';\nimport { withAuthenticator } from 'aws-amplify-react';\nimport { Auth, API, graphqlOperation } from 'aws-amplify';\nimport PropTypes from 'prop-types';\nimport dateFormat from 'dateformat';\nimport { getUserByCognitoSub } from '../graphql/queries';\nimport VerifyPhoneNumber from './SignUp/VerifyPhoneNumber';\nimport ConfirmCancelSubscription from './SignUp/ConfirmCancelSubscription';\n\nconst Profile = ({ userInfo, setUserInfo, setIsLoggedIn, subscriptionInfo }) => {\n const [isVerifyPhoneOpen, setIsVerifyPhoneOpen] = useState(false);\n const [isCancelSubOpen, setIsCancelSubOpen] = useState(false);\n const [invoiceList, setInvoiceList] = useState({});\n const [isVisibleSubHistory, setIsVisibleSubHistory] = useState(false);\n const [showLoading, setShowLoading] = useState(false);\n const [isRecurring, setIsRecurring] = useState(false);\n\n useEffect(() => {\n if (!userInfo) {\n Auth.currentAuthenticatedUser()\n .then(({ attributes: { sub } }) =>\n API.graphql(graphqlOperation(getUserByCognitoSub, { cognito_sub: sub }))\n .then(({ data: { getUserByCognitoSub: userByCognitoSub } }) => userByCognitoSub)\n .then(dbUser => {\n setUserInfo(dbUser);\n setIsLoggedIn(true);\n })\n )\n .catch(err => {\n console.error(err);\n });\n }\n if (subscriptionInfo) {\n setIsRecurring(subscriptionInfo.is_recurring);\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const editClick = () => {\n setIsVerifyPhoneOpen(true);\n };\n\n const getInvoiceList = async userId => {\n try {\n const sessionToken = `Bearer ${(await Auth.currentSession()).getIdToken().jwtToken}`;\n\n return fetch(`${process.env.REACT_APP_STRIPE_INVOICE_LIST}/${userId}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: sessionToken,\n },\n }).then(result => result.json());\n } catch (err) {\n console.log(err);\n }\n };\n\n const showSubHistoryClick = async () => {\n if (isVisibleSubHistory) {\n setIsVisibleSubHistory(false);\n } else {\n setShowLoading(true);\n\n if (userInfo) {\n const listData = await getInvoiceList(userInfo.id);\n\n if (listData && listData.response.length > 0) {\n const orderedList = listData.response.sort((a, b) => (a.period_start > b.period_start ? -1 : 1));\n\n setInvoiceList(orderedList);\n }\n setIsVisibleSubHistory(true);\n }\n setShowLoading(false);\n }\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n Are you sure want to cancel your recurring subscription?\n
\n\n\n
\n\n {errorMessage && \n
\n \n \n Confirm\n \n
\n \n setIsCancelSubOpen(false)}\n >\n Cancel\n \n
\n {errorMessage}
}\n\n
\n );\n};\n\nexport default withAuthenticator(Profile, false, []);\n\nProfile.propTypes = {\n userInfo: PropTypes.object,\n setIsLoggedIn: PropTypes.func,\n setUserInfo: PropTypes.func,\n subscriptionInfo: PropTypes.object,\n};\n","/* eslint-disable react/jsx-props-no-spreading */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { useTable, useSortBy } from 'react-table';\nimport { ArrowUpIcon, ArrowDownIcon } from '@heroicons/react/outline';\n\nconst AgentsTable = ({ columns, data, updateAgentApproval, updateSubscriptionStatus }) => {\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(\n {\n columns,\n data,\n updateAgentApproval,\n updateSubscriptionStatus,\n },\n useSortBy\n );\n\n return (\n \n {userInfo && (\n
\n {isVerifyPhoneOpen && (\n \n
\n )}\n\n \n {userInfo.first_name} {userInfo.last_name}\n
\n{userInfo.cell_phone}
\n{userInfo.email_address}
\n\n Want to verify your phone number?{' '}\n \n \n Click here\n \n \n
\n\n {/* stripe related code */}\n {/* {isRecurring && (\n\n Do you want to cancel your recurring subscription?{' '}\n \n
\n Want to show your subscription History?{' '}\n \n
\n \n
\n )} */}\n {/* stripe related code */}\n\n {isVisibleSubHistory && (\n \n {invoiceList.length > 0 ? (\n
\n )}\n \n
\n ) : (\n Subscription history
\n\n
\n \n \n \n
\n
\n | Order id | \nPurchase Date | \nInterval | \nAmount | \nBilling | \nInvoice | \n
|---|---|---|---|---|---|
| {invoice.subscription} | \n{`${dateFormat(\n invoice.period_start * 1000,\n 'mm/dd/yyyy h:MMtt'\n )}`} | \n{invoice.interval} | \n\n {invoice.amount_paid === 0\n ? '-'\n : `${invoice.billing_reason === 'subscription_create' ? 'Paid by user' : 'Recurred'}`}\n | \n\n \n | \n
\n
\n )}\n No Subscription history
\n| \n {cell.render('Cell')}\n | \n ))}\n\n |
\n
\n );\n};\n\nSubscriptionCell.propTypes = {\n value: PropTypes.object,\n row: PropTypes.object,\n updateSubscriptionStatus: PropTypes.func,\n};\n\nexport default SubscriptionCell;\n","import React, { Fragment, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { Dialog, Transition } from '@headlessui/react';\nimport { CheckIcon } from '@heroicons/react/outline';\n\nconst StatusModal = ({ setShowModal, handleConfirmed, subscriptionId, pendingValue }) => {\n const cancelButtonRef = useRef(null);\n\n return (\n \n Active:\n \n {value.is_active ? 'True' : 'False'}\n \n
\n \n Expires:\n {formatedExpiresAt}\n
\n \n Type:\n {value.is_manual ? 'Manual' : 'In App'}\n
\n \n
\n \n
\n \n
\n Pending Agents
\nA list of the new agents waiting to be verified.
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n Denied Agents
\nA list of denied agents because they could not be verified.
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n );\n};\n\nexport default withAuthenticator(ManageAgents);\n","/* eslint-disable react/display-name */\n/* eslint-disable jsx-a11y/img-redundant-alt */\n/* eslint-disable react/prop-types */\n/* eslint-disable react/destructuring-assignment */\nimport React, { useState, useEffect } from 'react';\nimport { DataGrid } from '@material-ui/data-grid';\nimport { Redirect, withRouter, Link } from 'react-router-dom';\nimport CryptoJS from 'crypto-js';\nimport { API } from 'aws-amplify';\nimport { Badge } from '@material-ui/core';\nimport { listPropertyListings, getShowingActionRequiredCount } from '../graphql/queries';\nimport Spinner from './Spinner';\n\nconst CalendarListing = ({ userDetails }) => {\n const [isOpenCalendar, setIsOpenCalendar] = useState(false);\n const [propertyListingsData, setPropertyListingsData] = useState([]);\n const [showLoading, setShowLoading] = useState(true);\n const [countListData, setCountListData] = useState([]);\n\n useEffect(() => {\n const fetchListing1 = async () => {\n try {\n if (userDetails) {\n const fetchedListing = await API.graphql({\n query: listPropertyListings,\n variables: { listing_agent_id: userDetails.id },\n });\n\n if (fetchedListing) {\n setPropertyListingsData(fetchedListing.data.listPropertyListings);\n\n setShowLoading(false);\n }\n const getCount = await API.graphql({\n query: getShowingActionRequiredCount,\n variables: { agent_id: userDetails.id },\n });\n\n if (getCount) {\n setCountListData(getCount.data.getShowingActionRequiredCount);\n }\n }\n } catch (error) {\n console.log(error);\n setShowLoading(false);\n }\n };\n\n fetchListing1();\n }, [userDetails]);\n\n const rows = propertyListingsData.map(item => {\n const container = {};\n\n container.id = item.id;\n container.mlsid = item.listing_id;\n container.Address = item.address;\n container.media_url = item.media_url;\n container.listing_agent_id = item.listing_agent_id;\n\n countListData.map(data => {\n if (data.property_listing_id === item.id) {\n container.count = data.count;\n }\n\n return data;\n });\n\n return container;\n });\n const columns = [\n {\n field: 'media_url',\n headerName: ' ',\n width: 160,\n height: 150,\n sortable: false,\n renderCell: props => (\n \n
\n \n
\n Approved Agents
\nA list of the approved agents.
\n\n
\n \n
\n \n
\n \n
\n \n
\n ),\n },\n {\n field: 'mlsid',\n headerName: 'MLS ID',\n width: 200,\n },\n {\n field: 'Address',\n headerName: 'Address',\n flex: 1,\n },\n {\n field: 'count',\n headerName: ' ',\n width: 50,\n renderCell: props => \n
\n );\n\n return (\n \n
\n );\n};\n\nexport default withRouter(CalendarListing);\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst calendarEventTitle = ({ setIsOpenEventTitle, eventTitle, setEventTitle, addEvent, isAgent }) => (\n \n
\n {isOpenCalendar && \n My Listings\n
\n\n
\n \n \n
\n);\n\nexport default calendarEventTitle;\n\ncalendarEventTitle.propTypes = {\n setIsOpenEventTitle: PropTypes.func,\n setEventTitle: PropTypes.func,\n addEvent: PropTypes.func,\n isAgent: PropTypes.bool,\n eventTitle: PropTypes.string,\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nconst CalendarEventApprove = ({ setIsOpenEventApprove, approveEvent, rejectEvent }) => {\n const [isOpenRejectMessage, setIsOpenRejectMessage] = useState(false);\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n {isAgent ? (\n setEventTitle(e.target.value.trim())}\n />\n \n
\n \n Enter Buying Agent Name and Brokerage\n
\n ) : (\nEnter Tour Title
\n )}\n\n\n \n \n
\n \n \n
\n \n
\n \n \n OK\n \n
\n \n \n Cancel\n \n
\n \n \n
\n );\n};\n\nexport default CalendarEventApprove;\n\nCalendarEventApprove.propTypes = {\n setIsOpenEventApprove: PropTypes.func,\n approveEvent: PropTypes.func,\n rejectEvent: PropTypes.func,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst CalendarAutoApprove = ({ approveEvent, rejectEvent }) => (\n \n
\n \n
\n \n
\n \n {!isOpenRejectMessage ? (\n
\n \n \n
\n ) : (\n Are you sure want to approve this event?
\n\n\n \n \n
\n \n \n
\n \n
\n \n \n Approve\n \n
\n \n setIsOpenRejectMessage(true)}\n >\n Reject\n \n
\n \n \n
\n )}\n \n Are you sure you want to reject this request?{' '}\n
\n\n\n \n \n
\n \n \n
\n \n
\n \n \n Yes\n \n
\n \n \n No\n \n
\n \n \n
\n);\n\nexport default CalendarAutoApprove;\n\nCalendarAutoApprove.propTypes = {\n approveEvent: PropTypes.func,\n rejectEvent: PropTypes.func,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst CalendarLASlotOptions = ({\n setIsOpenLASlotOptions,\n editLASlot,\n deleteLASlot,\n createShowingAppointment,\n isVisibleCreateSlotBtn,\n}) => (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n Are you sure want to approve all events at once?{' '}\n
\n\n\n
\n \n
\n \n \n Approve\n \n
\n \n \n Cancel\n \n
\n \n \n
\n);\n\nexport default CalendarLASlotOptions;\n\nCalendarLASlotOptions.propTypes = {\n setIsOpenLASlotOptions: PropTypes.func,\n editLASlot: PropTypes.func,\n deleteLASlot: PropTypes.func,\n createShowingAppointment: PropTypes.func,\n isVisibleCreateSlotBtn: PropTypes.bool,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst successPopup = ({ setIsOpenSuccessPopup, isAlert, isAddedSlotInPast, isNotValidTimeSlot }) => (\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n Please choose an option\n
\n\n\n \n \n
\n \n \n
\n {isVisibleCreateSlotBtn && (\n \n
\n \n \n Edit\n \n
\n \n \n Delete\n \n
\n \n \n Create showing Appointment\n \n
\n )}\n \n \n
\n);\n\nexport default successPopup;\n\nsuccessPopup.propTypes = {\n setIsOpenSuccessPopup: PropTypes.func,\n isAlert: PropTypes.bool,\n isAddedSlotInPast: PropTypes.bool,\n isNotValidTimeSlot: PropTypes.bool,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport dateFormat from 'dateformat';\n\nconst CalendarLASlotAddUpdatePopup = ({\n setIsOpenLASlotAddUpdatePopup,\n OkClick,\n newLAAvilabilitySlot,\n selectedLAAvilabilitySlot,\n selectedSlotInfo,\n laSlotEventName,\n}) => {\n let displayMsg = null;\n\n if (laSlotEventName === 'edit') {\n const rangeStart = dateFormat(newLAAvilabilitySlot.start, 'h:MMtt');\n const rangeEnd = dateFormat(newLAAvilabilitySlot.end, 'h:MMtt');\n const slotDate = dateFormat(newLAAvilabilitySlot.start, 'mmm dd yyyy');\n\n displayMsg = `Are you sure want to edit available time for ${slotDate} from ${rangeStart} to ${rangeEnd}?`;\n } else if (laSlotEventName === 'delete') {\n const deleteRangeStart = dateFormat(newLAAvilabilitySlot.start, 'h:MMtt');\n const deleteRangeEnd = dateFormat(newLAAvilabilitySlot.end, 'h:MMtt');\n const deleteSlotDate = dateFormat(newLAAvilabilitySlot.start, 'mmm dd yyyy');\n\n displayMsg = `Are you sure want to delete the available showing window for ${deleteRangeStart} - ${deleteRangeEnd} on ${deleteSlotDate}?`;\n } else if (laSlotEventName === 'add') {\n const addRangeStart = dateFormat(selectedSlotInfo.start, 'h:MMtt');\n const addRangeEnd = dateFormat(selectedSlotInfo.end, 'h:MMtt');\n const addSlotDate = dateFormat(selectedSlotInfo.start, 'mmm dd yyyy');\n\n displayMsg = `Are you sure want to add availablity from ${addRangeStart} to ${addRangeEnd} on ${addSlotDate}?`;\n }\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n {isAlert && (\n \n You can not add this time slot. Your selection is less than current time.\n \n )}\n {isNotValidTimeSlot && (\n \n You can not add this time slot. Your selection is not valid.\n \n )}\n
\n \n Agent is not available for this time\n
\n )}\n {isAddedSlotInPast && (\n\n
\n \n
\n \n \n OK\n \n
\n \n \n
\n );\n};\n\nexport default CalendarLASlotAddUpdatePopup;\n\nCalendarLASlotAddUpdatePopup.propTypes = {\n setIsOpenLASlotAddUpdatePopup: PropTypes.func,\n OkClick: PropTypes.func,\n newLAAvilabilitySlot: PropTypes.object,\n selectedLAAvilabilitySlot: PropTypes.object,\n selectedSlotInfo: PropTypes.object,\n laSlotEventName: PropTypes.string,\n};\n","import { Auth } from 'aws-amplify';\n\nexport const sendSMSMessage = async ({ phoneNumber, message }) => {\n try {\n const sessionToken = `Bearer ${(await Auth.currentSession()).getIdToken().jwtToken}`;\n\n const payload = {\n phoneNumber: phoneNumber.replace(/-/g, ''),\n message,\n };\n\n const smsResponse = await fetch(process.env.REACT_APP_SMS_END_POINT, {\n method: 'post',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: sessionToken,\n },\n body: JSON.stringify({ payload }),\n });\n\n if (smsResponse.ok) {\n return true;\n }\n\n return false;\n } catch (error) {\n console.log(error);\n\n return false;\n }\n};\n","import { Auth } from 'aws-amplify';\n\nexport const sendEmail = async ({ emailAddress, body, subject }) => {\n try {\n const sessionToken = `Bearer ${(await Auth.currentSession()).getIdToken().jwtToken}`;\n\n const payload = {\n emailAddress,\n body,\n subject,\n };\n\n const emailResponse = await fetch(process.env.REACT_APP_EMAIL_END_POINT, {\n method: 'post',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: sessionToken,\n },\n body: JSON.stringify({ payload }),\n });\n\n if (emailResponse.ok) {\n return true;\n }\n\n const resultText = await emailResponse.text();\n\n console.log('resultText', resultText);\n\n return false;\n } catch (error) {\n console.log(error);\n\n return false;\n }\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport dateFormat from 'dateformat';\n\nconst CalendarDeleteApprovedSlot = ({ setIsOpenDeleteApprovedSlot, DeleteClick, selectedSlotInfo }) => {\n const deleteRangeStart = dateFormat(selectedSlotInfo.start, 'h:MMtt');\n const deleteRangeEnd = dateFormat(selectedSlotInfo.end, 'h:MMtt');\n const deleteSlotDate = dateFormat(selectedSlotInfo.start, 'mmm dd yyyy');\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n \n {displayMsg}\n \n\n
\n \n
\n \n
\n \n \n Ok\n \n
\n \n \n Cancel\n \n
\n \n \n
\n );\n};\n\nexport default CalendarDeleteApprovedSlot;\n\nCalendarDeleteApprovedSlot.propTypes = {\n setIsOpenDeleteApprovedSlot: PropTypes.func,\n DeleteClick: PropTypes.func,\n selectedSlotInfo: PropTypes.object,\n};\n","/* eslint-disable react/destructuring-assignment */\n/* eslint-disable react/no-access-state-in-setstate */\nimport React, { Component } from 'react';\nimport { Calendar, momentLocalizer } from 'react-big-calendar';\nimport moment from 'moment';\nimport withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';\nimport 'react-big-calendar/lib/addons/dragAndDrop/styles.css';\nimport 'react-big-calendar/lib/css/react-big-calendar.css';\nimport CryptoJS from 'crypto-js';\nimport dateFormat from 'dateformat';\nimport { API, graphqlOperation } from 'aws-amplify';\nimport PropTypes from 'prop-types';\nimport CalendarEventTitle from './CalenderEventTitle';\nimport CalendarEventApprove from './CalendarEventApprove';\nimport CalendarAutoApprove from './CalendarAutoApprove';\nimport CalendarLASlotOptions from './CalendarLASlotOptions';\nimport {\n addListingAgentAvailbility,\n createTour,\n createPropertyOfInterest,\n createTourStop,\n deleteTourStop,\n updateTourStopRequestStatus,\n enableDisableAutoApprove,\n updateListingAgentAvailbility,\n createUserNotification,\n deleteSelectedListingAgentAvailbility,\n createMessage,\n} from '../graphql/mutations';\nimport {\n agentTimeSlotDetails,\n getPropertyListing,\n getTourStopIfExists,\n getPropertyListingAutoApprove,\n getPropertyListingByListingId,\n getListingByListingId,\n} from '../graphql/queries';\nimport {\n buildApproveShowingRequest,\n buildRejectShowingRequest,\n buildSendShowingRequest,\n buildSendShowingRequestAutoApprove,\n buildSendShowingRequestAutoApproveToBA,\n buildEditDeleteLAAvailabilitySlot,\n buildCancelShowingRequest,\n} from '../notifications/messageBuilder';\nimport Spinner from './Spinner';\nimport SuccessPopup from './SuccessPopup';\nimport CalendarLASlotAddUpdatePopup from './CalendarLASlotAddUpdatePopup';\nimport { sendSMSMessage } from '../services/SendSMSMessage';\nimport { sendEmail } from '../services/SendEmail';\nimport CalendarDeleteApprovedSlot from './CalendarDeleteApprovedSlot';\n\nconst localizer = momentLocalizer(moment);\nconst DnDCalendar = withDragAndDrop(Calendar);\n\nclass CalendarControl extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n events: [],\n laAvailabilitySlot: [],\n isOpenEventTitle: false,\n newEventTitle: null,\n isOpenEventApprove: false,\n isOpenAutoApprove: false,\n selectedSlotInfo: null,\n isAutoApproved: false,\n propertyListingId: 0,\n listingAgentId: 0,\n listingAgentName: null,\n listingAgentCellPhone: null,\n listingAgentEmail: null,\n buyingAgentName: null,\n buyingAgentCellPhone: null,\n address: null,\n brokerage: null,\n listingAgentDeadlineHrs: 0,\n laDeadlineHrStart: 0,\n remainingLaDeadlineHrs: 0,\n isOpenLASlotOptions: false,\n propertyMLSId: null,\n selectedLAAvailabilitySlot: null,\n newLAAvailabilitySlot: null,\n showLoading: false,\n isOpenSuccessPopup: false,\n isError: false,\n isOpenLASlotAddUpdatePopup: false,\n laSlotEventName: null,\n agentNotAvailableAlert: false,\n isAddedSlotInPast: false,\n isNotValidTimeSlot: false,\n isVisibleCreateSlotBtn: true,\n selectedDate: new Date(),\n isListingAgent: false,\n isOpenDeleteApprovedSlot: false,\n propertyAddress: null,\n };\n }\n\n onEventResize = data => {\n // const { start, end } = data;\n // this.setState(state => {\n // state.events[0].start = start;\n // state.events[0].end = end;\n // return { events: [...state.events] };\n // });\n };\n\n eventStyleGetter = event => {\n const style = {\n backgroundColor: event.hexColor,\n color: event.color,\n };\n\n return {\n style,\n };\n };\n\n onEventClick = slotInfo => {\n if (this.state.isListingAgent) {\n if (slotInfo.isNew) {\n this.setState({ isOpenEventApprove: true, selectedSlotInfo: slotInfo });\n } else {\n this.setState({ isOpenDeleteApprovedSlot: true, selectedSlotInfo: slotInfo });\n }\n } else if (this.props.userDetails != null && slotInfo.buyingAgentEmail === this.props.userDetails.email_address) {\n this.setState({ isOpenDeleteApprovedSlot: true, selectedSlotInfo: slotInfo });\n }\n };\n\n onSelectSlot = async slotInfo => {\n const now = new Date();\n const a = [];\n\n if (this.state.isListingAgent) {\n if (Math.floor(slotInfo.start.getTime() / 1000) < Math.floor(now.getTime() / 1000)) {\n this.setState({ isAddedSlotInPast: true });\n this.setState({ isNotValidTimeSlot: false });\n this.setIsOpenSuccessPopup();\n } else {\n this.setState({ selectedSlotInfo: slotInfo });\n const availableSlot = this.state.laAvailabilitySlot.find(\n p =>\n (p.start <= dateFormat(slotInfo.start, 'ddd mmm dd yyyy HH:MM') &&\n p.end > dateFormat(slotInfo.start, 'ddd mmm dd yyyy HH:MM')) ||\n (p.start < dateFormat(slotInfo.end, 'ddd mmm dd yyyy HH:MM') &&\n p.end >= dateFormat(slotInfo.end, 'ddd mmm dd yyyy HH:MM'))\n );\n\n if (availableSlot != null) {\n const laSlot = this.state.laAvailabilitySlot.find(\n p =>\n p.start <= dateFormat(slotInfo.start, 'ddd mmm dd yyyy HH:MM') &&\n p.end >= dateFormat(slotInfo.end, 'ddd mmm dd yyyy HH:MM')\n );\n\n if (laSlot != null) {\n this.setState({ isVisibleCreateSlotBtn: true });\n } else {\n this.setState({ isVisibleCreateSlotBtn: false });\n }\n\n for (const slot of slotInfo.slots) {\n const findSlot = this.state.laAvailabilitySlot.find(\n p =>\n p.start === dateFormat(slot, 'ddd mmm dd yyyy HH:MM') ||\n p.end === dateFormat(slot, 'ddd mmm dd yyyy HH:MM')\n );\n\n if (findSlot) {\n const filterData = a.filter(item => item === findSlot);\n\n if (filterData.length === 0) {\n a.push(findSlot);\n }\n }\n\n if (a.length > 1) {\n this.setState({ isAddedSlotInPast: false });\n this.setState({ agentNotAvailableAlert: false });\n this.setState({ isNotValidTimeSlot: true });\n this.setIsOpenSuccessPopup();\n break;\n }\n }\n\n if (a.length < 2) {\n const getTourStopIfExistsData = await API.graphql({\n query: getTourStopIfExists,\n variables: {\n property_listing_id: this.state.propertyListingId,\n start_time: Math.floor(slotInfo.start.getTime() / 1000),\n end_time: Math.floor(slotInfo.end.getTime() / 1000),\n },\n });\n\n if (getTourStopIfExistsData.data.getTourStopIfExists.length === 0) {\n this.setState({ selectedLAAvailabilitySlot: availableSlot });\n this.setState({ newLAAvailabilitySlot: slotInfo });\n this.setIsOpenLASlotOptions();\n } else {\n this.setState({ isAddedSlotInPast: false });\n this.setState({ agentNotAvailableAlert: false });\n this.setState({ isNotValidTimeSlot: true });\n this.setIsOpenSuccessPopup();\n }\n }\n } else {\n this.setIsOpenLASlotAddUpdatePopup();\n this.setState({ laSlotEventName: 'add' });\n }\n }\n } else {\n const getTourStopIfExistsData = await API.graphql({\n query: getTourStopIfExists,\n variables: {\n property_listing_id: this.state.propertyListingId,\n start_time: Math.floor(slotInfo.start.getTime() / 1000),\n end_time: Math.floor(slotInfo.end.getTime() / 1000),\n },\n });\n\n if (getTourStopIfExistsData.data.getTourStopIfExists.length === 0) {\n const availableSlotStart = this.state.laAvailabilitySlot.find(\n p =>\n p.start <= dateFormat(slotInfo.start, 'ddd mmm dd yyyy HH:MM') &&\n p.end >= dateFormat(slotInfo.end, 'ddd mmm dd yyyy HH:MM')\n );\n\n if (availableSlotStart != null) {\n if (Math.floor(slotInfo.start.getTime() / 1000) < Math.floor(now.getTime() / 1000)) {\n this.setState({ isAddedSlotInPast: true });\n this.setState({ agentNotAvailableAlert: false });\n this.setState({ isNotValidTimeSlot: false });\n this.setIsOpenSuccessPopup();\n } else {\n this.setIsOpenEventTitle();\n this.setState({ selectedSlotInfo: slotInfo });\n }\n } else {\n this.setState({ agentNotAvailableAlert: true });\n this.setState({ isAddedSlotInPast: false });\n this.setState({ isNotValidTimeSlot: false });\n this.setIsOpenSuccessPopup();\n }\n } else {\n this.setState({ isAddedSlotInPast: false });\n this.setState({ agentNotAvailableAlert: false });\n this.setState({ isNotValidTimeSlot: true });\n this.setIsOpenSuccessPopup();\n }\n }\n };\n\n setIsOpenEventTitle = () => {\n this.setState({ isOpenEventTitle: !this.state.isOpenEventTitle });\n };\n\n setIsOpenEventApprove = () => {\n this.setState({ isOpenEventApprove: !this.state.isOpenEventApprove });\n };\n\n setIsOpenAutoApprove = () => {\n this.setState({ isOpenAutoApprove: !this.state.isOpenAutoApprove });\n };\n\n approveEvent = async () => {\n this.setIsOpenEventApprove();\n this.setState({ showLoading: true });\n const updateTourStopRequestStatusInput = {\n id: this.state.selectedSlotInfo.tourStopId,\n status: 'approved',\n last_request_sent_by_user_id: this.props.userDetails.id,\n };\n const {\n data: { updateTourStopRequestStatus: updateTourStopRequestStatusData },\n } = await API.graphql(graphqlOperation(updateTourStopRequestStatus, { updateTourStopRequestStatusInput }));\n\n await this.getAgentTimeSlotDetails(true);\n\n this.setState({ showLoading: false });\n\n if (updateTourStopRequestStatusData.status === 'approved') {\n this.sendNotificationOnupdateTourStopRequestStatus(this.state.selectedSlotInfo);\n }\n };\n\n rejectEvent = async () => {\n this.setIsOpenEventApprove();\n\n try {\n this.setState({ showLoading: true });\n const data = await API.graphql(graphqlOperation(deleteTourStop, { id: this.state.selectedSlotInfo.tourStopId }));\n\n await this.getAgentTimeSlotDetails(true);\n this.setState({ showLoading: false });\n if (!data.deleteTourStop) {\n const timeRangeStart = dateFormat(this.state.selectedSlotInfo.start, 'h:MMtt');\n const timeRangeEnd = dateFormat(this.state.selectedSlotInfo.end, 'h:MMtt');\n const { email, sms, push } = buildRejectShowingRequest({\n laName: this.state.selectedSlotInfo.listingAgentName,\n baName: this.state.selectedSlotInfo.buyingAgentName,\n brokerage: this.state.selectedSlotInfo.brokerage,\n date: dateFormat(this.state.selectedSlotInfo.start, 'ddd mmm dd yyyy'),\n address: this.state.selectedSlotInfo.address,\n timeRange: `${timeRangeStart} to ${timeRangeEnd}`,\n });\n\n const sendEmailResult = await sendEmail({\n emailAddress: this.state.selectedSlotInfo.buyingAgentEmail,\n body: email.body,\n subject: email.subject,\n });\n\n const sendSMSResult = await sendSMSMessage({\n phoneNumber: this.state.selectedSlotInfo.buyingAgentPhoneNum,\n message: sms,\n });\n\n await this.createNotification(\n email.subject,\n push,\n this.state.selectedSlotInfo.clientId,\n sendSMSResult,\n sendEmailResult\n );\n }\n } catch (error) {\n this.setState({ showLoading: false });\n console.log(error);\n }\n };\n\n setEventTitle = title => {\n this.setState({ newEventTitle: title });\n };\n\n addEvent = async () => {\n this.setIsOpenEventTitle();\n this.setState({ showLoading: true });\n\n const now = new Date();\n let titleInput;\n\n if (this.state.newEventTitle) {\n titleInput = this.state.newEventTitle.replace(/'/g, \"''\");\n }\n\n try {\n const createTourInput = {\n name: titleInput,\n start_time: Math.floor(this.state.selectedSlotInfo.start.getTime() / 1000),\n end_time: Math.floor(this.state.selectedSlotInfo.end.getTime() / 1000),\n client_id: this.props.userDetails.id,\n agent_id: this.props.userDetails.id,\n created_at: Math.floor(now.getTime() / 1000),\n updated_at: Math.floor(now.getTime() / 1000),\n is_behalf_of_buying_agent: false,\n };\n\n if (this.state.isListingAgent) {\n createTourInput.is_behalf_of_buying_agent = true;\n }\n\n const {\n data: { createTour: TourOpData },\n } = await API.graphql(graphqlOperation(createTour, { createTourInput }));\n\n // console.log('opData', TourOpData);\n\n const startTime =\n this.state.selectedSlotInfo.start.getHours() + this.state.selectedSlotInfo.start.getMinutes() / 60;\n const endTime = this.state.selectedSlotInfo.end.getHours() + this.state.selectedSlotInfo.end.getMinutes() / 60;\n let createTourStopInput = null;\n\n if (this.state.events.length === 0) {\n const createPropertyOfInterestInput = {\n client_id: this.props.userDetails.id,\n property_listing_id: this.state.propertyListingId,\n created_at: Math.floor(now.getTime() / 1000),\n updated_at: Math.floor(now.getTime() / 1000),\n };\n const {\n data: { createPropertyOfInterest: POIopData },\n } = await API.graphql(graphqlOperation(createPropertyOfInterest, { createPropertyOfInterestInput }));\n\n // console.log('POIopData', POIopData);\n\n createTourStopInput = {\n order: 1,\n duration: endTime - startTime,\n start_time: Math.floor(this.state.selectedSlotInfo.start.getTime() / 1000),\n status: 'pending',\n tour_id: TourOpData.id,\n property_of_interest_id: POIopData.id,\n created_at: Math.floor(now.getTime() / 1000),\n updated_at: Math.floor(now.getTime() / 1000),\n request_sent: true,\n showing_request_required: false,\n last_request_sent_by_user_id: this.props.userDetails.id,\n };\n } else {\n const userEventData = this.state.events.filter(\n item => item.clientId === this.props.userDetails.id && item.propertyListingId === this.state.propertyListingId\n );\n\n if (userEventData.length === 0) {\n const createPropertyOfInterestInput = {\n client_id: this.props.userDetails.id,\n property_listing_id: this.state.propertyListingId,\n created_at: Math.floor(now.getTime() / 1000),\n updated_at: Math.floor(now.getTime() / 1000),\n };\n const {\n data: { createPropertyOfInterest: POIopData },\n } = await API.graphql(graphqlOperation(createPropertyOfInterest, { createPropertyOfInterestInput }));\n\n // console.log('POIopData', POIopData);\n createTourStopInput = {\n order: 1,\n duration: endTime - startTime,\n start_time: Math.floor(this.state.selectedSlotInfo.start.getTime() / 1000),\n status: 'pending',\n tour_id: TourOpData.id,\n property_of_interest_id: POIopData.id,\n created_at: Math.floor(now.getTime() / 1000),\n updated_at: Math.floor(now.getTime() / 1000),\n request_sent: true,\n showing_request_required: false,\n last_request_sent_by_user_id: this.props.userDetails.id,\n };\n } else {\n createTourStopInput = {\n order: 1,\n duration: endTime - startTime,\n start_time: Math.floor(this.state.selectedSlotInfo.start.getTime() / 1000),\n status: 'pending',\n tour_id: TourOpData.id,\n property_of_interest_id: userEventData[0].homeOfInterestId,\n created_at: Math.floor(now.getTime() / 1000),\n updated_at: Math.floor(now.getTime() / 1000),\n request_sent: true,\n showing_request_required: false,\n last_request_sent_by_user_id: this.props.userDetails.id,\n };\n }\n }\n\n const currentTime = Math.floor(now.getTime() / 1000);\n const deadlineEndTime = this.state.laDeadlineHrStart + this.state.listingAgentDeadlineHrs * 3600;\n const fetchedPropertyListingData = await API.graphql({\n query: getPropertyListingAutoApprove,\n variables: { id: this.state.propertyListingId },\n });\n\n this.setState({ isAutoApproved: fetchedPropertyListingData.data.getPropertyListing.is_auto_approve });\n this.setState({\n listingAgentDeadlineHrs: fetchedPropertyListingData.data.getPropertyListing.showing_request_deadline,\n });\n this.setState({\n laDeadlineHrStart: fetchedPropertyListingData.data.getPropertyListing.deadline_start_time,\n });\n\n if (this.state.isAutoApproved) {\n const slotStart = Math.floor(this.state.selectedSlotInfo.start.getTime() / 1000);\n\n if ((slotStart > this.state.laDeadlineHrStart && slotStart < deadlineEndTime) || slotStart < currentTime) {\n createTourStopInput.status = 'pending';\n } else {\n createTourStopInput.status = 'approved';\n }\n }\n const msgDateStr = dateFormat(new Date(), 'mm/dd/yy');\n const msgTimeStr = dateFormat(new Date(), 'h:MMtt');\n const showingDate = dateFormat(this.state.selectedSlotInfo.start, 'mm/dd/yy');\n const showingTime = dateFormat(this.state.selectedSlotInfo.start, 'h:MMtt');\n const endTourTime = dateFormat(this.state.selectedSlotInfo.end, 'h:MMtt');\n\n const messageStr = `Showing request sent on ${msgDateStr} at ${msgTimeStr} for ${showingDate} from ${showingTime}-${endTourTime}`;\n const createMessageInput = {\n from_user: this.props.userDetails.id,\n to_user: this.state.listingAgentId,\n message: messageStr,\n };\n\n if (this.state.isListingAgent) {\n createTourStopInput.status = 'approved';\n createMessageInput.from_user = this.state.listingAgentId;\n }\n\n const {\n data: { createTourStop: TourStopOpData },\n } = await API.graphql(graphqlOperation(createTourStop, { createTourStopInput }));\n\n // console.log('TourStopOpData', TourStopOpData);\n if (TourStopOpData) {\n createMessageInput.tour_stop_id = TourStopOpData.id;\n }\n const {\n data: { createMessage: createMessageOp },\n } = await API.graphql(graphqlOperation(createMessage, { createMessageInput }));\n\n this.setState({ showLoading: false });\n\n this.getAgentTimeSlotDetails(true);\n if (TourStopOpData != null && !this.state.isListingAgent) {\n let sendEmailResult = null;\n let sendSMSResult = null;\n\n if (TourStopOpData.status === 'pending') {\n const timeRangeStart = dateFormat(this.state.selectedSlotInfo.start, 'h:MMtt');\n const timeRangeEnd = dateFormat(this.state.selectedSlotInfo.end, 'h:MMtt');\n\n const { email, sms, push } = buildSendShowingRequest({\n baName: this.state.buyingAgentName,\n laName: this.state.listingAgentName,\n brokerage: this.props.userDetails.brokerage,\n address: this.state.address,\n date: dateFormat(this.state.selectedSlotInfo.start, 'ddd mmm dd yyyy'),\n phone: this.state.buyingAgentCellPhone,\n timeRange: `${timeRangeStart} to ${timeRangeEnd}`,\n });\n\n sendEmailResult = await sendEmail({\n emailAddress: this.state.listingAgentEmail,\n body: email.body,\n subject: email.subject,\n });\n\n sendSMSResult = await sendSMSMessage({\n phoneNumber: this.state.listingAgentCellPhone,\n message: sms,\n });\n\n await this.createNotification(email.subject, push, this.state.listingAgentId, sendSMSResult, sendEmailResult);\n } else if (TourStopOpData.status === 'approved') {\n let sendEmailResultToBA = null;\n let sendSMSResultToBA = null;\n const timeRangeStart = dateFormat(this.state.selectedSlotInfo.start, 'h:MMtt');\n const timeRangeEnd = dateFormat(this.state.selectedSlotInfo.end, 'h:MMtt');\n\n const { emailToBA, smsToBA, pushToBA } = buildSendShowingRequestAutoApproveToBA({\n baName: this.state.buyingAgentName,\n laName: this.state.listingAgentName,\n brokerage: this.state.brokerage,\n address: this.state.address,\n date: dateFormat(this.state.selectedSlotInfo.start, 'ddd mmm dd yyyy'),\n phone: this.state.listingAgentCellPhone,\n timeRange: `${timeRangeStart} to ${timeRangeEnd}`,\n });\n\n sendEmailResultToBA = await sendEmail({\n emailAddress: this.props.userDetails.email_address,\n body: emailToBA.body,\n subject: emailToBA.subject,\n });\n\n sendSMSResultToBA = await sendSMSMessage({\n phoneNumber: this.props.userDetails.cell_phone,\n message: smsToBA,\n });\n\n await this.createNotification(\n emailToBA.subject,\n pushToBA,\n this.props.userDetails.id,\n sendSMSResultToBA,\n sendEmailResultToBA\n );\n\n const { email, sms, push } = buildSendShowingRequestAutoApprove({\n baName: this.state.buyingAgentName,\n laName: this.state.listingAgentName,\n brokerage: this.props.userDetails.brokerage,\n address: this.state.address,\n date: dateFormat(this.state.selectedSlotInfo.start, 'ddd mmm dd yyyy'),\n phone: this.state.buyingAgentCellPhone,\n timeRange: `${timeRangeStart} to ${timeRangeEnd}`,\n });\n\n sendEmailResult = await sendEmail({\n emailAddress: this.state.listingAgentEmail,\n body: email.body,\n subject: email.subject,\n });\n\n sendSMSResult = await sendSMSMessage({\n phoneNumber: this.state.listingAgentCellPhone,\n message: sms,\n });\n\n await this.createNotification(email.subject, push, this.state.listingAgentId, sendSMSResult, sendEmailResult);\n }\n }\n } catch (error) {\n this.setState({ showLoading: false });\n console.log(error);\n }\n };\n\n createNotification = async (title, body, recipientId, sentSms, sentEmail) => {\n const createUserNotificationInput = {\n title,\n body,\n recipient_id: recipientId,\n sent_sms: sentSms,\n sent_email: sentEmail,\n };\n\n const {\n data: { createUserNotification: userNotificationOpData },\n } = await API.graphql(graphqlOperation(createUserNotification, { createUserNotificationInput }));\n\n // console.log('userNotificationOpData', userNotificationOpData);\n };\n\n getAgentTimeSlotDetails = async isRefresh => {\n const userId = this.props.history.location.search;\n const trimmed = userId.substring(1);\n const bytes = CryptoJS.AES.decrypt(trimmed, 'my-secret-key@123');\n const decryptedData = bytes.toString(CryptoJS.enc.Utf8);\n\n const arrayData = decryptedData.split('-');\n\n this.setState({ propertyMLSId: arrayData[0] }, () => {\n const propData = this.props.propertyListings.filter(item => item.listing_id === this.state.propertyMLSId);\n\n if (this.props.userDetails != null && this.props.userDetails.is_agent) {\n if (propData.length === 0) {\n this.setState({ isListingAgent: false });\n } else {\n this.setState({ isListingAgent: true });\n if (!this.props.isActiveSubscription) {\n window.location.replace('/');\n }\n this.setState({ propertyListingId: propData[0].id }, () => {});\n this.setState({ listingAgentId: propData[0].listing_agent_id }, () => {});\n }\n }\n });\n\n if (this.props.userDetails != null) {\n this.setState({ showLoading: true });\n\n const propertyDetails = await API.graphql({\n query: getPropertyListingByListingId,\n variables: { listing_id: arrayData[0] },\n });\n const details = propertyDetails.data.getPropertyListingByListingId;\n\n if (details) {\n this.setState({ propertyAddress: details.address });\n this.setState({ listingAgentName: `${details.listing_agent.first_name} ${details.listing_agent.last_name}` });\n } else {\n const propertyDynamoDetails = await API.graphql({\n query: getListingByListingId,\n variables: { listing_id: arrayData[0] },\n });\n\n const dynamoDetails = propertyDynamoDetails.data.getListingByListingId.items[0];\n\n this.setState({ propertyAddress: dynamoDetails.address });\n this.setState({ listingAgentName: dynamoDetails.listing_agent });\n }\n\n const timeSlotDetails = await API.graphql({\n query: agentTimeSlotDetails,\n variables: { listing_id: arrayData[0] },\n });\n\n if (timeSlotDetails.data.agentTimeSlotDetails.length > 0) {\n if (isRefresh) {\n this.setState({ events: [], laAvailabilitySlot: [] });\n }\n\n if (!this.state.isListingAgent) {\n this.setState(\n { buyingAgentName: `${this.props.userDetails.first_name} ${this.props.userDetails.last_name}` },\n () => {}\n );\n }\n\n timeSlotDetails.data.agentTimeSlotDetails.forEach(element => {\n this.setState({ propertyListingId: element.property_listing_id }, () => {});\n this.setState({ listingAgentId: element.listing_agent_id }, () => {});\n this.setState(\n { listingAgentName: `${element.listingAgent_first_name} ${element.listingAgent_last_name}` },\n () => {}\n );\n\n this.setState({ address: element.address }, () => {});\n this.setState({ brokerage: element.listingAgent_brokerage }, () => {});\n\n if (element.STATUS === 'available') {\n const startDate = element.start_time;\n const endDate = element.end_datetime;\n const newSlotData = {\n id: element.availbility_id,\n start: dateFormat(startDate * 1000, 'ddd mmm dd yyyy HH:MM'),\n end: dateFormat(endDate * 1000, 'ddd mmm dd yyyy HH:MM'),\n };\n\n this.setState({\n laAvailabilitySlot: [...this.state.laAvailabilitySlot, newSlotData],\n });\n }\n\n if (element.STATUS === 'pending' || element.STATUS === 'approved') {\n this.setState({ buyingAgentCellPhone: element.buyingAgent_cell_phone });\n\n const endDate = element.start_time + element.duration * 60 * 60;\n const st = new Date(dateFormat(element.start_time * 1000, 'ddd mmm dd yyyy HH:MM'));\n const et = new Date(dateFormat(endDate * 1000, 'ddd mmm dd yyyy HH:MM'));\n const newEventData = {\n start: st,\n end: et,\n title: `${element.buyingAgent_first_name} ${element.buyingAgent_last_name} - ${element.buyingAgent_brokerage}`,\n hexColor: '#fef200',\n isNew: true,\n isApproved: false,\n isRejected: false,\n color: '#000000',\n status: element.STATUS,\n tourStopId: element.tourstop_id,\n buyingAgentEmail: element.buyingAgent_email_address,\n listingAgentEmail: element.listingAgent_email_address,\n buyingAgentPhoneNum: element.buyingAgent_cell_phone,\n listingAgentPhoneNum: element.listingAgent_cell_phone,\n listingAgentName: `${element.listingAgent_first_name} ${element.listingAgent_last_name}`,\n buyingAgentName: `${element.buyingAgent_first_name} ${element.buyingAgent_last_name}`,\n brokerage: element.listingAgent_brokerage,\n address: element.address,\n propertyListingId: element.property_listing_id,\n homeOfInterestId: element.home_of_interest_id,\n clientId: element.client_id,\n tourName: element.tour_name,\n listingAgentId: element.listing_agent_id,\n isBehalfOfBuyingAgent: element.is_behalf_of_buying_agent,\n };\n\n if (!this.state.isListingAgent) {\n newEventData.title = `${newEventData.title} - ${element.tour_name}`;\n }\n\n if (element.STATUS === 'approved') {\n newEventData.hexColor = '#435B77';\n newEventData.color = 'white';\n newEventData.isNew = false;\n newEventData.isApproved = true;\n }\n\n this.setState({\n events: [...this.state.events, newEventData],\n });\n }\n });\n }\n\n const fetchedPropertyListingData = await API.graphql({\n query: getPropertyListing,\n variables: { id: this.state.propertyListingId },\n });\n\n if (fetchedPropertyListingData.data.getPropertyListing) {\n this.setState({\n listingAgentEmail: fetchedPropertyListingData.data.getPropertyListing.listing_agent.email_address,\n });\n this.setState({\n listingAgentCellPhone: fetchedPropertyListingData.data.getPropertyListing.listing_agent.cell_phone,\n });\n\n this.setState({\n listingAgentDeadlineHrs: fetchedPropertyListingData.data.getPropertyListing.showing_request_deadline,\n });\n this.setState({\n laDeadlineHrStart: fetchedPropertyListingData.data.getPropertyListing.deadline_start_time,\n });\n const endtime = this.state.laDeadlineHrStart + this.state.listingAgentDeadlineHrs * 3600;\n const currentTime = Math.floor(new Date().getTime() / 1000);\n\n const current1 = new Date(dateFormat(currentTime * 1000, 'ddd mmm dd yyyy HH:MM:ss'));\n const end1 = new Date(dateFormat(endtime * 1000, 'ddd mmm dd yyyy HH:MM:ss'));\n\n const diff = (end1.getTime() - current1.getTime()) / 1000;\n\n if (currentTime > this.state.laDeadlineHrStart && currentTime < endtime) {\n this.setState({\n remainingLaDeadlineHrs: Math.abs(Math.round(diff / 3600)),\n });\n } else {\n this.setState({ remainingLaDeadlineHrs: 0 });\n }\n\n this.setState({ isAutoApproved: fetchedPropertyListingData.data.getPropertyListing.is_auto_approve });\n\n if (!this.state.isAutoApproved) {\n this.setState({ remainingLaDeadlineHrs: 0 });\n }\n }\n\n if (!this.state.isListingAgent) {\n for (const item of this.state.events) {\n if (this.props.userDetails != null) {\n if (item.buyingAgentEmail !== this.props.userDetails.email_address) {\n item.title = null;\n }\n }\n }\n }\n }\n\n for (const item of this.state.events) {\n if (this.props.userDetails != null) {\n if (!this.state.isListingAgent && item.buyingAgentEmail !== this.props.userDetails.email_address) {\n item.title = null;\n }\n if (this.state.isListingAgent && item.isBehalfOfBuyingAgent) {\n item.title = `\\n ${item.tourName}`;\n }\n }\n }\n\n this.setState({ showLoading: false });\n };\n\n componentDidMount = async () => {\n this.setState({ isListingAgent: this.props.isAgent }, () => {});\n\n await this.getAgentTimeSlotDetails();\n };\n\n onSelecting = slot => {\n if (!this.state.isListingAgent) {\n const availabeSlotStart = this.state.laAvailabilitySlot.find(\n p =>\n p.start <= dateFormat(slot.start, 'ddd mmm dd yyyy HH:MM') &&\n p.end >= dateFormat(slot.end, 'ddd mmm dd yyyy HH:MM')\n );\n\n if (availabeSlotStart != null) {\n return true;\n }\n\n return true;\n }\n };\n\n slotPropGetter = slot => {\n const availableSlotStart = this.state.laAvailabilitySlot.find(\n p => p.start <= dateFormat(slot, 'ddd mmm dd yyyy HH:MM') && p.end > dateFormat(slot, 'ddd mmm dd yyyy HH:MM')\n );\n\n if (availableSlotStart != null) {\n return { className: 'laAvailabeSlot' };\n }\n };\n\n PromptAutoApprove = () => {\n this.setState({ isAutoApproved: !this.state.isAutoApproved }, () => {\n if (!this.state.isAutoApproved) {\n this.setState({ remainingLaDeadlineHrs: 0 });\n }\n });\n };\n\n RejectAutoApprove = () => {\n this.setIsOpenAutoApprove();\n this.setState({ isAutoApproved: !this.state.isAutoApproved });\n this.getAgentTimeSlotDetails(true);\n };\n\n ChangeStatusOfApprove = async () => {\n this.enableDisableAutoApprove(true);\n\n this.setIsOpenAutoApprove();\n\n this.setState({ showLoading: true });\n const pendingApproveData = this.state.events.filter(item => item.status === 'pending');\n\n for (const element of pendingApproveData) {\n const updateTourStopRequestStatusInput = {\n id: element.tourStopId,\n status: 'approved',\n last_request_sent_by_user_id: this.props.userDetails.id,\n };\n\n const {\n data: { updateTourStopRequestStatus: updateTourStopRequestStatusData },\n } = await API.graphql(graphqlOperation(updateTourStopRequestStatus, { updateTourStopRequestStatusInput }));\n\n // console.log('updateTourStopRequestStatusData', updateTourStopRequestStatusData);\n if (updateTourStopRequestStatusData.status === 'approved') {\n this.sendNotificationOnupdateTourStopRequestStatus(element);\n }\n }\n this.setState({ showLoading: false });\n this.getAgentTimeSlotDetails(true);\n };\n\n sendNotificationOnupdateTourStopRequestStatus = async slotInfo => {\n const timeRangeStart = dateFormat(slotInfo.start, 'h:MMtt');\n const timeRangeEnd = dateFormat(slotInfo.end, 'h:MMtt');\n const { email, sms, push } = buildApproveShowingRequest({\n laName: slotInfo.listingAgentName,\n baName: slotInfo.buyingAgentName,\n brokerage: slotInfo.brokerage,\n date: dateFormat(slotInfo.start, 'ddd mmm dd yyyy'),\n address: slotInfo.address,\n timeRange: `${timeRangeStart} to ${timeRangeEnd}`,\n });\n\n const sendEmailResult = await sendEmail({\n emailAddress: slotInfo.buyingAgentEmail,\n body: email.body,\n subject: email.subject,\n });\n\n const sendSMSResult = await sendSMSMessage({\n phoneNumber: slotInfo.buyingAgentPhoneNum,\n message: sms,\n });\n\n await this.createNotification(email.subject, push, slotInfo.clientId, sendSMSResult, sendEmailResult);\n\n const messageStr = 'This time has been approved.';\n const createMessageInput = {\n from_user: this.state.listingAgentId,\n to_user: slotInfo.clientId,\n message: messageStr,\n tour_stop_id: slotInfo.tourStopId,\n };\n\n const {\n data: { createMessage: createMessageOp },\n } = await API.graphql(graphqlOperation(createMessage, { createMessageInput }));\n };\n\n enableDisableAutoApprove = async isAutoApproved => {\n try {\n this.setState({ showLoading: true });\n\n const updatePropertyListingInput = {\n id: this.state.propertyListingId,\n is_auto_approve: isAutoApproved,\n showing_request_deadline: this.state.remainingLaDeadlineHrs,\n deadline_start_time: Math.floor(new Date().getTime() / 1000),\n };\n const {\n data: { enableDisableAutoApprove: autoApproveData },\n } = await API.graphql(graphqlOperation(enableDisableAutoApprove, { updatePropertyListingInput }));\n\n console.log('autoApproveData', autoApproveData);\n } catch (error) {\n this.setState({ showLoading: false });\n this.setState({ isError: true });\n }\n if (!isAutoApproved) {\n this.setState({ showLoading: false });\n }\n };\n\n isInputNumber = evt => {\n const ch = String.fromCharCode(evt.which);\n\n if (!/[0-9]/.test(ch)) {\n evt.preventDefault();\n }\n };\n\n savePropertySetting = async () => {\n if (this.state.isAutoApproved) {\n this.setIsOpenAutoApprove();\n } else {\n this.enableDisableAutoApprove(false);\n }\n };\n\n setIsOpenLASlotOptions = () => {\n this.setState({ isOpenLASlotOptions: !this.state.isOpenLASlotOptions });\n };\n\n LASlotAddUpdate = async () => {\n this.setIsOpenLASlotAddUpdatePopup();\n this.setState({ showLoading: true });\n if (this.state.laSlotEventName === 'edit') {\n const updateListingAgentAvailbilityInput = {\n id: parseInt(this.state.selectedLAAvailabilitySlot.id),\n start_datetime: Math.floor(this.state.newLAAvailabilitySlot.start.getTime() / 1000),\n end_datetime: Math.floor(this.state.newLAAvailabilitySlot.end.getTime() / 1000),\n };\n\n const {\n data: { updateListingAgentAvailbility: updateData },\n } = await API.graphql(graphqlOperation(updateListingAgentAvailbility, { updateListingAgentAvailbilityInput }));\n\n console.log('updateData', updateData);\n\n this.getSlotsAndNotifyForEdit();\n } else if (this.state.laSlotEventName === 'delete') {\n const deleteSelectedListingAgentAvailbilityInput = {\n slot_id: parseInt(this.state.selectedLAAvailabilitySlot.id),\n listing_agent_id: this.state.listingAgentId,\n property_listing_id: this.state.propertyListingId,\n selected_slot_start_time: Math.floor(this.state.newLAAvailabilitySlot.start.getTime() / 1000),\n selected_slot_end_time: Math.floor(this.state.newLAAvailabilitySlot.end.getTime() / 1000),\n start_datetime: Math.floor(new Date(this.state.selectedLAAvailabilitySlot.start).getTime() / 1000),\n end_datetime: Math.floor(new Date(this.state.selectedLAAvailabilitySlot.end).getTime() / 1000),\n };\n const {\n data: { deleteSelectedListingAgentAvailbility: deleteData },\n } = await API.graphql(\n graphqlOperation(deleteSelectedListingAgentAvailbility, { deleteSelectedListingAgentAvailbilityInput })\n );\n\n // console.log('deleteData', deleteData);\n\n this.getSlotsAndNotify();\n } else if (this.state.laSlotEventName === 'add') {\n try {\n const firstSlot = this.state.laAvailabilitySlot.filter(\n item => item.end === dateFormat(this.state.selectedSlotInfo.start, 'ddd mmm dd yyyy HH:MM')\n );\n const secondSlot = this.state.laAvailabilitySlot.filter(\n item => item.start === dateFormat(this.state.selectedSlotInfo.end, 'ddd mmm dd yyyy HH:MM')\n );\n\n const addListingAgentAvailbilityInput = {\n listing_agent_id: this.props.userDetails.id,\n property_listing_id: this.state.propertyListingId,\n start_datetime: Math.floor(this.state.selectedSlotInfo.start.getTime() / 1000),\n end_datetime: Math.floor(this.state.selectedSlotInfo.end.getTime() / 1000),\n first_slot_id: firstSlot.length > 0 ? firstSlot[0].id : null,\n second_slot_id: secondSlot.length > 0 ? secondSlot[0].id : null,\n first_slot_start_time:\n firstSlot.length > 0 ? Math.floor(new Date(firstSlot[0].start).getTime() / 1000) : null,\n second_slot_end_time: secondSlot.length > 0 ? Math.floor(new Date(secondSlot[0].end).getTime() / 1000) : null,\n };\n const {\n data: { addListingAgentAvailbility: addLAOpData },\n } = await API.graphql(graphqlOperation(addListingAgentAvailbility, { addListingAgentAvailbilityInput }));\n\n console.log('AddLAOpData', addLAOpData);\n this.setState({ showLoading: false });\n this.getAgentTimeSlotDetails(true);\n } catch (error) {\n this.setState({ showLoading: false });\n console.log('error', error);\n }\n }\n };\n\n editLASlot = async () => {\n this.setIsOpenLASlotOptions();\n this.setIsOpenLASlotAddUpdatePopup();\n this.setState({ laSlotEventName: 'edit' });\n };\n\n getSlotsAndNotifyForEdit = async () => {\n const timeSlotDetails = await API.graphql({\n query: agentTimeSlotDetails,\n variables: {\n listing_id: this.state.propertyMLSId,\n start_time: Math.floor(new Date(this.state.selectedLAAvailabilitySlot.start).getTime() / 1000),\n end_datetime: Math.floor(new Date(this.state.selectedLAAvailabilitySlot.end).getTime() / 1000),\n },\n });\n\n const newTimeSlotDetails = await API.graphql({\n query: agentTimeSlotDetails,\n variables: {\n listing_id: this.state.propertyMLSId,\n start_time: Math.floor(new Date(this.state.newLAAvailabilitySlot.start).getTime() / 1000),\n end_datetime: Math.floor(new Date(this.state.newLAAvailabilitySlot.end).getTime() / 1000),\n },\n });\n\n for (const element of timeSlotDetails.data.agentTimeSlotDetails) {\n const slotData = newTimeSlotDetails.data.agentTimeSlotDetails.find(p => p.tourstop_id === element.tourstop_id);\n\n if (slotData == null || slotData === undefined) {\n const data = await API.graphql(graphqlOperation(deleteTourStop, { id: element.tourstop_id }));\n\n console.log('deleteTourStopData', data);\n this.sendNotificationOnEditDeleteLASlot(element);\n }\n }\n this.setState({ showLoading: false });\n this.getAgentTimeSlotDetails(true);\n };\n\n deleteLASlot = async () => {\n this.setIsOpenLASlotOptions();\n this.setIsOpenLASlotAddUpdatePopup();\n this.setState({ laSlotEventName: 'delete' });\n };\n\n getSlotsAndNotify = async () => {\n const timeSlotDetails = await API.graphql({\n query: agentTimeSlotDetails,\n variables: {\n listing_id: this.state.propertyMLSId,\n start_time: Math.floor(this.state.newLAAvailabilitySlot.start.getTime() / 1000),\n end_datetime: Math.floor(this.state.newLAAvailabilitySlot.end.getTime() / 1000) - 1,\n },\n });\n\n for (const element of timeSlotDetails.data.agentTimeSlotDetails) {\n if (element.STATUS === 'pending' || element.STATUS === 'approved') {\n const data = await API.graphql(graphqlOperation(deleteTourStop, { id: element.tourstop_id }));\n\n console.log('deleteTourStopData', data);\n this.sendNotificationOnEditDeleteLASlot(element);\n }\n }\n\n this.setState({ showLoading: false });\n this.getAgentTimeSlotDetails(true);\n };\n\n sendNotificationOnEditDeleteLASlot = async element => {\n const laEmailId = element.listingAgent_email_address;\n const baEmailId = element.buyingAgent_email_address;\n const baCellPhone = element.buyingAgent_cell_phone;\n const laCellPhone = element.listingAgent_cell_phone;\n\n if (baEmailId !== laEmailId) {\n const timeRangeStart = dateFormat(element.start_time * 1000, 'h:MMtt');\n const timeRangeEnd = dateFormat((element.start_time + element.duration * 3600) * 1000, 'h:MMtt');\n const { email, sms, push } = buildEditDeleteLAAvailabilitySlot({\n laName: `${element.listingAgent_first_name} ${element.listingAgent_last_name}`,\n baName: `${element.buyingAgent_first_name} ${element.buyingAgent_last_name}`,\n date: dateFormat(element.start_time * 1000, 'ddd mmm dd yyyy'),\n address: element.address,\n timeRange: `${timeRangeStart} to ${timeRangeEnd}`,\n });\n\n const sendEmailResult = await sendEmail({\n emailAddress: baEmailId,\n body: email.body,\n subject: email.subject,\n });\n\n const sendSMSResult = await sendSMSMessage({\n phoneNumber: baCellPhone,\n message: sms,\n });\n\n await this.createNotification(email.subject, push, element.client_id, sendSMSResult, sendEmailResult);\n }\n };\n\n createShowingAppointment = () => {\n this.setIsOpenEventTitle();\n this.setIsOpenLASlotOptions();\n };\n\n setIsOpenSuccessPopup = () => {\n this.setState({ isOpenSuccessPopup: !this.state.isOpenSuccessPopup });\n };\n\n setIsOpenLASlotAddUpdatePopup = () => {\n this.setState({ isOpenLASlotAddUpdatePopup: !this.state.isOpenLASlotAddUpdatePopup });\n };\n\n deadlineHrsChange = event => {\n this.setState({ remainingLaDeadlineHrs: event.target.value });\n this.setState({ listingAgentDeadlineHrs: event.target.value });\n };\n\n setIsOpenDeleteApprovedSlot = () => {\n this.setState({ isOpenDeleteApprovedSlot: !this.state.isOpenDeleteApprovedSlot });\n };\n\n deleteApprovedSlot = async () => {\n this.setIsOpenDeleteApprovedSlot();\n\n try {\n this.setState({ showLoading: true });\n const data = await API.graphql(graphqlOperation(deleteTourStop, { id: this.state.selectedSlotInfo.tourStopId }));\n\n await this.getAgentTimeSlotDetails(true);\n this.setState({ showLoading: false });\n if (!data.deleteTourStop) {\n const timeRangeStart = dateFormat(this.state.selectedSlotInfo.start, 'h:MMtt');\n const timeRangeEnd = dateFormat(this.state.selectedSlotInfo.end, 'h:MMtt');\n\n if (!this.state.isListingAgent) {\n const { email, sms, push } = buildCancelShowingRequest({\n laName: this.state.selectedSlotInfo.listingAgentName,\n baName: this.state.selectedSlotInfo.buyingAgentName,\n date: dateFormat(this.state.selectedSlotInfo.start, 'ddd mmm dd yyyy'),\n address: this.state.selectedSlotInfo.address,\n timeRange: `${timeRangeStart} to ${timeRangeEnd}`,\n });\n\n const sendEmailResult = await sendEmail({\n emailAddress: this.state.selectedSlotInfo.listingAgentEmail,\n body: email.body,\n subject: email.subject,\n });\n\n const sendSMSResult = await sendSMSMessage({\n phoneNumber: this.state.selectedSlotInfo.listingAgentPhoneNum,\n message: sms,\n });\n\n await this.createNotification(\n email.subject,\n push,\n this.state.selectedSlotInfo.listingAgentId,\n sendSMSResult,\n sendEmailResult\n );\n } else {\n const { email, sms, push } = buildCancelShowingRequest({\n laName: this.state.selectedSlotInfo.buyingAgentName,\n baName: this.state.selectedSlotInfo.listingAgentName,\n date: dateFormat(this.state.selectedSlotInfo.start, 'ddd mmm dd yyyy'),\n address: this.state.selectedSlotInfo.address,\n timeRange: `${timeRangeStart} to ${timeRangeEnd}`,\n });\n\n const sendEmailResult = await sendEmail({\n emailAddress: this.state.selectedSlotInfo.buyingAgentEmail,\n body: email.body,\n subject: email.subject,\n });\n\n const sendSMSResult = await sendSMSMessage({\n phoneNumber: this.state.selectedSlotInfo.buyingAgentPhoneNum,\n message: sms,\n });\n\n await this.createNotification(\n email.subject,\n push,\n this.state.selectedSlotInfo.clientId,\n sendSMSResult,\n sendEmailResult\n );\n }\n }\n } catch (error) {\n this.setState({ showLoading: false });\n }\n };\n\n render() {\n if (this.state.showLoading)\n return (\n \n
\n \n
\n \n
\n \n
\n \n \n Are you sure want to delete the available showing window for {deleteRangeStart} - {deleteRangeEnd} of{' '}\n {deleteSlotDate}?\n \n\n
\n \n
\n \n
\n \n \n Delete\n \n
\n \n \n Cancel\n \n
\n \n
\n );\n\n return (\n \n {\n this.setState({ selectedDate: date });\n }}\n events={this.state.events}\n localizer={localizer}\n onEventResize={this.onEventResize}\n resizable\n style={{ height: '100vh', padding: '15px' }}\n timeslots={4}\n step={15}\n views={['week']}\n eventPropGetter={this.eventStyleGetter}\n onSelecting={slotInfo => this.onSelecting(slotInfo)}\n slotPropGetter={this.slotPropGetter}\n selectable\n onSelectEvent={slotInfo => this.onEventClick(slotInfo)}\n onSelectSlot={slotInfo => this.onSelectSlot(slotInfo)}\n min={new Date(1999, 0, 1, 8, 0)}\n max={new Date(2999, 0, 1, 22, 0)}\n messages={{\n previous: '<',\n today: 'Today',\n next: '>',\n }}\n draggableAccessor={event => false}\n />\n\n {this.state.isOpenEventTitle && (\n
\n );\n }\n}\n\nexport default CalendarControl;\n\nCalendarControl.propTypes = {\n isAgent: PropTypes.bool,\n userDetails: PropTypes.object,\n history: PropTypes.object,\n propertyListings: PropTypes.array,\n isActiveSubscription: PropTypes.bool,\n};\n","import React, { useState, useEffect } from \"react\";\n\nimport logo from \"../assets/ATT-LOGO-2c-navy.png\";\nimport { useHistory } from \"react-router-dom\";\nimport PhoneInput from \"react-phone-input-2\";\nimport \"react-phone-input-2/lib/style.css\";\n\nimport {\n HiCalendar,\n HiLocationMarker,\n HiBell,\n HiChartBar,\n HiX,\n HiMail,\n HiShare,\n} from \"react-icons/hi\";\nimport mobileAppHome from \"../assets/mobile-app-home.png\";\n\n// Add this CSS at the top of your file or in a separate CSS file\nconst glowStyles = {\n transition: \"all 0.5s ease-in-out, box-shadow 1.5s ease-out\",\n boxShadow:\n \"0 0 25px 15px rgba(59, 130, 246, 0.3), 0 0 2px rgba(255, 255, 255, 0.8)\",\n transform: \"scale(1.02)\",\n};\n\nconst calculateTimeLeft = (launchDate) => {\n const difference = launchDate - new Date();\n const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);\n const minutes = Math.floor((difference / 1000 / 60) % 60);\n const seconds = Math.floor((difference / 1000) % 60);\n\n return { days, hours, minutes, seconds };\n};\n\nconst SENDGRID_API_KEY = process.env.REACT_APP_SENDGRID_API_KEY;\nconst SENDGRID_LIST_ID = process.env.REACT_APP_SENDGRID_LIST_ID;\nconst TWILIO_ACCOUNT_SID = process.env.REACT_APP_TWILIO_ACCOUNT_SID;\nconst TWILIO_AUTH_TOKEN = process.env.REACT_APP_TWILIO_AUTH_TOKEN;\nconst TWILIO_PHONE_NUMBER = process.env.REACT_APP_TWILIO_PHONE_NUMBER;\n\nconst MAILERLITE_API_KEY = process.env.REACT_APP_MAILERLITE_API_KEY;\nconst MAILERLITE_GROUP_ID = \"142476718776517700\";\n\n// Move Modal outside of Waitlist component\nconst Modal = ({\n showModal,\n setShowModal,\n step,\n email,\n setEmail,\n handleEmailSubmit,\n isSubmitting,\n error,\n phone,\n setPhone,\n handlePhoneSubmit,\n}) => (\n \n
\n\n \n MLS Id: {this.state.propertyMLSId}\n
\n \n Address: {this.state.propertyAddress}\n
\n \n Listing Agent : {this.state.listingAgentName}\n
\n \n \n Pending Slots\n \n Approved Slots\n \n Available Slots\n
\n\n {this.state.isListingAgent && (\n \n Auto-Approve{' '}\n this.isInputNumber(input)}\n value={this.state.remainingLaDeadlineHrs}\n onChange={e => this.deadlineHrsChange(e)}\n name=\"Hours\"\n maxLength=\"2\"\n disabled={!this.state.isAutoApproved}\n />\n \n Save\n \n
\n )}\n\n \n setShowModal(false)}\n />\n
\n);\n\nconst Waitlist = () => {\n const [openSnackbar, setOpenSnackbar] = useState(false);\n const [waitlistCount, setWaitlistCount] = useState(2481);\n const [prevCount, setPrevCount] = useState(2481);\n const [isGlowing, setIsGlowing] = useState(false);\n const launchDate = new Date(Date.UTC(2025, 3, 1)); // Month is 0-based, so 3 = April\n const [timeLeft, setTimeLeft] = useState(() => calculateTimeLeft(launchDate));\n const [showPhonePrompt, setShowPhonePrompt] = useState(false);\n const [phone, setPhone] = useState(\"\");\n const [finalMessage, setFinalMessage] = useState(\"\");\n const history = useHistory();\n const [showModal, setShowModal] = useState(false);\n const [step, setStep] = useState(1);\n const [email, setEmail] = useState(\"\");\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [error, setError] = useState(\"\");\n\n const pageTitle = \"Get the app and streamline your home tours\";\n const pageSubtitle =\n \"Save hours of scheduling time, optimize your routes, and deliver a premium showing experience that impresses both buyers and sellers\";\n\n useEffect(() => {\n const interval = setInterval(() => {\n setPrevCount(waitlistCount);\n setWaitlistCount((current) => {\n const increment = Math.floor(Math.random() * 3) + 1;\n return current + increment;\n });\n // Longer glow duration\n setIsGlowing(true);\n setTimeout(() => setIsGlowing(false), 1500); // Increased to 1.5 seconds\n }, Math.random() * (8000 - 3000) + 3000); // More frequent: 3-8 seconds between updates\n\n return () => clearInterval(interval);\n }, [waitlistCount]);\n\n useEffect(() => {\n const timer = setInterval(() => {\n setTimeLeft(calculateTimeLeft(launchDate));\n }, 1000);\n\n return () => clearInterval(timer);\n }, [launchDate]);\n\n const handleWaitlistClick = () => {\n setShowModal(true);\n setStep(1);\n setError(\"\");\n };\n\n const handleEmailSubmit = async (e) => {\n e.preventDefault();\n setIsSubmitting(true);\n setError(\"\");\n\n try {\n const response = await fetch(\n \"https://connect.mailerlite.com/api/subscribers\",\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${MAILERLITE_API_KEY}`,\n },\n body: JSON.stringify({\n email: email,\n groups: [MAILERLITE_GROUP_ID],\n status: \"active\",\n }),\n }\n );\n\n const data = await response.json();\n console.log(\"MailerLite API Response:\", data);\n\n if (response.ok) {\n setStep(2);\n setWaitlistCount((prev) => prev + 1);\n } else {\n setError(data.message || \"Failed to join waitlist\");\n }\n } catch (error) {\n console.error(\"MailerLite API Exception:\", error);\n setError(\"Failed to join waitlist. Please try again.\");\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const handlePhoneSubmit = async (wantsTexts) => {\n console.log(\"handlePhoneSubmit called with wantsTexts:\", wantsTexts);\n console.log(\"Current step:\", step);\n\n if (!wantsTexts) {\n console.log(\"No thanks clicked, setting step to 3\");\n setStep(3);\n return;\n }\n\n if (!phone || phone.length < 10) {\n console.log(\"Invalid phone number:\", phone);\n return;\n }\n\n setIsSubmitting(true);\n try {\n console.log(\"Fetching subscriber data for email:\", email);\n const getSubscriber = await fetch(\n `https://connect.mailerlite.com/api/subscribers/${email}`,\n {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${MAILERLITE_API_KEY}`,\n },\n }\n );\n\n const subscriberData = await getSubscriber.json();\n console.log(\"Subscriber data received:\", subscriberData);\n\n if (subscriberData.data && subscriberData.data.id) {\n console.log(\"Updating subscriber with phone:\", phone);\n const response = await fetch(\n `https://connect.mailerlite.com/api/subscribers/${subscriberData.data.id}`,\n {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${MAILERLITE_API_KEY}`,\n },\n body: JSON.stringify({\n fields: {\n phone: phone,\n },\n }),\n }\n );\n\n const data = await response.json();\n console.log(\"Update response:\", data);\n\n if (response.ok) {\n console.log(\"Setting step to 3\");\n setStep(3);\n } else {\n console.error(\"Failed to update phone number:\", data);\n }\n }\n } catch (error) {\n console.error(\"Error updating phone:\", error);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const copyInviteLink = () => {\n navigator.clipboard.writeText(window.location.href);\n alert(\"Invite link copied to clipboard!\");\n };\n\n const features = [\n {\n icon: \n
\n \n setShowModal(false)}\n className=\"p-2 hover:bg-gray-100 rounded-full transition-colors duration-200\"\n aria-label=\"Close modal\"\n >\n
\n\n \n setShowModal(false)}\n className=\"w-full py-4 px-6 text-lg font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors\"\n >\n Close\n \n \n )}\n
\n \n 
\n \n {step === 3 ? \"🎉\" : step === 1 ? \"👋\" : \"📱\"}\n \n
\n\n {step === 1 ? (\n <>\n \n Join Our Exclusive Waitlist\n
\n\n Be the first to know when we launch!\n
\n \n \n ) : step === 2 ? (\n <>\n\n Thanks for joining our waitlist!\n
\n\n Would you like to receive text message updates also?\n
\n\n
\n \n ) : (\n <>\n \n \n Phone Number\n \n
\n \n handlePhoneSubmit(false)}\n className=\"flex-1 py-4 px-6 text-lg font-medium text-white bg-gray-500 rounded-lg hover:bg-gray-600 transition-colors\"\n >\n No thanks\n \n handlePhoneSubmit(true)}\n disabled={!phone || phone.length < 10 || isSubmitting}\n className=\"flex-1 py-4 px-6 text-lg font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50\"\n >\n {isSubmitting ? \"Updating...\" : \"Yes! Please text me\"}\n \n
\n \n You're all set!\n
\n\n Thanks for joining our waitlist. We'll keep you updated on our\n progress!\n
\n\n \n
\n \n\n {/* Contact Section */}\n \n
\n\n {/* Features Section */}\n \n {/* Left Column - Content & Form */}\n
\n \n {/* Logo centered */}\n
\n\n {/* Right Column - Mobile App Preview */}\n \n \n
\n\n {/* Main content */}\n \n
\n \n {pageTitle}\n
\n\n {pageSubtitle}\n
\n\n {/* Waitlist Counter and Form */}\n\n
\n \n \n\n \n \n \n Join the Waitlist\n \n
\n \n
\n \n {/* Countdown Timer */}\n
\n\n {/* Added subtext */}\n \n {Object.entries(timeLeft).map(([unit, value]) => (\n \n \n {String(value).padStart(2, \"0\")}\n \n \n {unit}\n \n
\n ))}\n \n We are hard at work building the mobile app for you\n
\n\n
\n \n Powerful Features for Real Estate Professionals\n
\n\n {features.map((feature, index) => (\n \n
\n ))}\n \n {React.cloneElement(feature.icon, {\n className: \"w-8 h-8 text-teal-500\",\n })}\n
\n \n {feature.title}\n
\n\n {feature.description}\n
\n\n
\n \n {/* Email Button */}\n {\n navigator.clipboard.writeText(\"hello@abouttimetours.com\");\n // Add a temporary success message\n const button = document.getElementById(\"email-button\");\n const originalText = button.querySelector(\"p\").textContent;\n button.querySelector(\"p\").textContent = \"Email copied!\";\n setTimeout(() => {\n button.querySelector(\"p\").textContent = originalText;\n }, 2000);\n }}\n id=\"email-button\"\n className=\"group flex items-center justify-center gap-4 p-6 bg-white/10 backdrop-blur-sm rounded-xl hover:bg-white/20 transition-all duration-300\"\n >\n {\n navigator.clipboard.writeText(\"https://abouttimetours.com\");\n // Add a temporary success message\n const button = document.getElementById(\"share-button\");\n const originalText = button.querySelector(\"p\").textContent;\n button.querySelector(\"p\").textContent = \"Link copied!\";\n setTimeout(() => {\n button.querySelector(\"p\").textContent = originalText;\n }, 2000);\n }}\n id=\"share-button\"\n className=\"group flex items-center justify-center gap-4 p-6 bg-white/10 backdrop-blur-sm rounded-xl hover:bg-white/20 transition-all duration-300\"\n >\n
\n \n
\n \n
\n \n\n {/* Share Button */}\n \n Email Us\n
\nhello@abouttimetours.com
\n\n
\n \n
\n \n \n Share With Friends\n
\nCopy invite link
\n\n setOpenSnackbar(false)}\n />\n
\n )}\n\n {showModal && (\n \n
\n \n
\n \n \n \n 👍\n \n
\n\n {!finalMessage && (\n <>\n \n Thanks for joining our waitlist!\n
\n\n Would you like to receive text message updates also?\n
\n\n
\n \n handlePhoneSubmit(false)}\n className=\"flex-1 py-4 px-6 text-lg font-medium text-white bg-gray-500 rounded-lg hover:bg-gray-600 transition-colors\"\n >\n No thanks\n \n handlePhoneSubmit(true)}\n disabled={!phone || phone.length < 10 || isSubmitting}\n className=\"flex-1 py-4 px-6 text-lg font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50\"\n >\n {isSubmitting ? \"Updating...\" : \"Yes! Please text me\"}\n \n
\n \n )}\n\n {finalMessage && (\n <>\n All set!
\n{finalMessage}
\n \n )}\n\n {\n if (!renderLoginComponent) {\n handleLogin(true);\n }\n }}\n isAgent={isAgent}\n setIsOpenSubscription={setIsOpenSubscription}\n isActiveSubscription={isActiveSubscription}\n />\n \n {children} \n {!isLoggedIn &&
\n \n );\n\n return (\n \n
\n