\") ?? \"Form Submission\",\n closeBtnText: 'View Details',\n timer: 15000,\n closeButtonLink: data.params?.smartFormId ? `/fbuilder/submission/${data.params.smartFormId}` :\n '/fbuilder/forms',\n leftIcon: renderToString(
\") ?? '',\n closeBtnText: data.params?.closeButtonText ? data.params.closeButtonText : '',\n timer: 15000,\n closeButtonLink: data.params?.link ? data.params.link : null,\n leftIcon: renderToString(
\n
\n `\n container = document.createElement('div')\n container.className = \"pypepro_notification_template\"\n container.className = classText\n container.id = \"pypepro_notification_file_download_wrp_id\"\n container.innerHTML = elm\n document.body.appendChild(container)\n // document.getElementById(\"download_link_input\").value = link;\n\n setTimeout(() => {\n container.classList.add('animate')\n // document.getElementById(\"download_link_input\").value = link;\n }, 0);\n\n if (document.getElementById(\"pypepro_nt_close_file_download_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_file_download_wrp_id\").addEventListener('click', handleOnCloseFileDownloadNotification)\n }\n\n if (document.getElementById(\"custom_file_download\")) {\n document.getElementById(\"custom_file_download\").addEventListener('click', handleDownload)\n }\n\n new_interval = setTimeout(() => {\n try {\n if (document.getElementById(\"pypepro_nt_close_file_download_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_file_download_wrp_id\").removeEventListener('click', handleOnCloseFileDownloadNotification)\n }\n // container.classList.add('pypepro_file_download_nt_hide');\n let element_exist = document.getElementById(\"pypepro_notification_file_download_wrp_id\");\n if (element_exist) {\n element_exist.remove();\n }\n\n }\n catch (error) { }\n }, timer);\n container.setAttribute('interval', new_interval)\n }\n}\n\nexport const ViewResultNotificationHtmlTemplate = (buttonText, message, link) => {\n let leftIcon = 'default';\n let closeText = '';\n let timer = 10000;\n let classText = 'info';\n let new_interval = '', container = '';\n function handleOnCloseViewResultNotification() {\n clearInterval(new_interval)\n new_interval = '';\n container.classList.add('pypepro_view_result_nt_hide');\n }\n\n function handleDownload() {\n\n let input = document.getElementById(\"view_result_input\")\n let newLink = input.value;\n let pageLink = '';\n switch (newLink) {\n case \"ALL\":\n pageLink = 'contacts/clean-list?page=imports&open=new';\n break;\n case \"CARRIER\":\n pageLink = 'contacts/clean-list?tab=verify&page=imports&open=new';\n break;\n case \"DNC\":\n pageLink = 'contacts/clean-list?tab=dnc&page=imports&open=new';\n break;\n case \"SKIP_TRACE\":\n pageLink = 'contacts/clean-list?tab=skiptracing&page=imports&open=new';\n break;\n default:\n pageLink = 'contacts/clean-list';\n }\n window.location.href = window.location.origin + '/' + pageLink;\n\n };\n\n let element_exist = document.getElementById(\"pypepro_notification_view_result_wrp_id\");\n if (element_exist) {\n if (element_exist.getAttribute('interval')) {\n clearInterval(element_exist.getAttribute('interval'))\n element_exist.setAttribute('interval', null)\n }\n if (!element_exist.classList.contains(classText)) {\n element_exist.classList.remove('info')\n element_exist.classList.remove('error')\n element_exist.classList.remove('success')\n element_exist.classList.remove('warning')\n element_exist.classList.remove('default')\n element_exist.classList.add(classText)\n }\n\n element_exist.classList.remove('pypepro_view_result_nt_hide')\n if (element_exist.classList.contains('pypepro_nt_replace')) {\n element_exist.classList.remove('pypepro_nt_replace')\n }\n else {\n element_exist.classList.add('pypepro_nt_replace')\n }\n setTimeout(() => {\n try {\n /* icon */\n let icon_span = element_exist.querySelector('span[id=pypepro_nt_li_view_result_wrp_id]');\n if (icon_span) {\n icon_span.innerHTML = leftIcon\n }\n /* v2 */\n let message_span_v2 = element_exist.querySelector('input[id=view_result_input]');\n if (message_span_v2) {\n message_span_v2.value = link\n }\n /* text */\n let message_span = element_exist.querySelector('span[id=pypepro_nt_info_view_result_wrp_id]');\n if (message_span) {\n message_span.innerHTML = `${buttonText} ${message}`\n }\n /* dismiss */\n let dismiss_span = element_exist.querySelector('span[id=pypepro_nt_close_view_result_wrp_id]');\n if (dismiss_span) {\n dismiss_span.innerText = closeText\n }\n new_interval = setTimeout(() => {\n try {\n element_exist.classList.add('pypepro_view_result_nt_hide');\n }\n catch (error) { }\n }, timer);\n element_exist.setAttribute('interval', new_interval)\n }\n catch (error) { }\n }, 500);\n }\n else {\n const elm = `\n ${message}
\n \n \n \n \n
\n \n
\n `\n container = document.createElement('div')\n container.className = \"pypepro_notification_template\"\n container.className = classText\n container.id = \"pypepro_notification_view_result_wrp_id\"\n container.innerHTML = elm\n document.body.appendChild(container)\n // document.getElementById(\"download_link_input\").value = link;\n\n setTimeout(() => {\n container.classList.add('animate')\n // document.getElementById(\"download_link_input\").value = link;\n }, 0);\n\n if (document.getElementById(\"pypepro_nt_close_view_result_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_view_result_wrp_id\").addEventListener('click', handleOnCloseViewResultNotification)\n }\n\n if (document.getElementById(\"custom_view_result\")) {\n document.getElementById(\"custom_view_result\").addEventListener('click', handleDownload)\n }\n\n new_interval = setTimeout(() => {\n try {\n if (document.getElementById(\"pypepro_nt_close_view_result_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_view_result_wrp_id\").removeEventListener('click', handleOnCloseViewResultNotification)\n }\n // container.classList.add('pypepro_view_result_nt_hide');\n let element_exist = document.getElementById(\"pypepro_notification_view_result_wrp_id\");\n if (element_exist) {\n element_exist.remove();\n }\n\n }\n catch (error) { }\n }, timer);\n container.setAttribute('interval', new_interval)\n }\n}\n\n\n\nexport const NotificationHtmlTemplate = ({ leftIcon = '', text = 'Your file is ready to download!', des = 'description', closeText = 'default', onClose = () => { }, timer = 3000, classText = 'info', redirect = '' }) => {\n let new_interval = '', container = '';\n function handleOnCloseNotification(event) {\n event.stopPropagation();\n clearInterval(new_interval)\n new_interval = ''\n container.classList.add('pypepro_nt_hide');\n onClose()\n }\n let element_exist = document.getElementById(\"pypepro_notification_wrp_id\");\n if (element_exist) {\n element_exist.addEventListener('mouseover', () => {\n clearInterval(new_interval);\n });\n\n element_exist.addEventListener('mouseout', () => {\n new_interval = setTimeout(() => {\n try {\n element_exist.classList.add('pypepro_nt_hide');\n }\n catch (error) { }\n }, 1000);\n });\n\n if (element_exist.getAttribute('interval')) {\n clearInterval(element_exist.getAttribute('interval'))\n element_exist.setAttribute('interval', null)\n }\n if (!element_exist.classList.contains(classText)) {\n element_exist.classList.remove('info')\n element_exist.classList.remove('error')\n element_exist.classList.remove('success')\n element_exist.classList.remove('warning')\n element_exist.classList.remove('default')\n element_exist.classList.add(classText)\n }\n element_exist.classList.remove('pypepro_nt_hide')\n if (element_exist.classList.contains('pypepro_nt_replace')) {\n element_exist.classList.remove('pypepro_nt_replace')\n }\n else {\n element_exist.classList.add('pypepro_nt_replace')\n }\n setTimeout(() => {\n try {\n /* icon */\n let icon_span = element_exist.querySelector('span[id=pypepro_nt_li_wrp_id]');\n if (icon_span) {\n icon_span.innerHTML = leftIcon\n }\n /* text */\n let message_span = element_exist.querySelector('span[id=pypepro_nt_info_wrp_id]');\n if (message_span) {\n message_span.innerHTML = `\n ${text}\n ${des}\n `\n }\n /* dismiss */\n let dismiss_span = element_exist.querySelector('span[id=pypepro_nt_close_wrp_id]');\n if (dismiss_span) {\n dismiss_span.innerText = closeText\n }\n new_interval = setTimeout(() => {\n try {\n element_exist.classList.add('pypepro_nt_hide');\n }\n catch (error) { }\n }, timer);\n\n if (redirect) {\n element_exist.addEventListener('click', (event) => {\n event.stopPropagation();\n clearInterval(new_interval);\n new_interval = '';\n element_exist.classList.add('pypepro_nt_hide');\n onClose();\n window.open(redirect, \"_self\");\n });\n }\n\n element_exist.setAttribute('interval', new_interval)\n }\n catch (error) { }\n }, 500);\n }\n else {\n const elm = `\n ${message}
\n \n \n \n \n
\n \n ${leftIcon}\n \n ${text}\n ${des}\n \n
\n ${closeText}\n `\n container = document.createElement('div')\n container.className = \"pypepro_notification_template\"\n container.className = classText\n container.id = \"pypepro_notification_wrp_id\"\n container.innerHTML = elm\n document.body.appendChild(container)\n\n setTimeout(() => {\n container.classList.add('animate')\n }, 0);\n\n if (document.getElementById(\"pypepro_nt_close_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_wrp_id\").addEventListener('click', handleOnCloseNotification)\n }\n\n new_interval = setTimeout(() => {\n try {\n if (document.getElementById(\"pypepro_nt_close_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_wrp_id\").removeEventListener('click', handleOnCloseNotification)\n }\n // container.classList.add('pypepro_nt_hide');\n let element_exist = document.getElementById(\"pypepro_notification_wrp_id\");\n if (element_exist) {\n element_exist.remove();\n }\n\n }\n catch (error) { }\n }, timer);\n\n container.addEventListener('mouseover', () => {\n clearInterval(new_interval);\n });\n\n container.addEventListener('mouseout', () => {\n new_interval = setTimeout(() => {\n try {\n if (document.getElementById(\"pypepro_nt_close_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_wrp_id\").removeEventListener('click', handleOnCloseNotification)\n }\n\n let element_exist = document.getElementById(\"pypepro_notification_wrp_id\");\n if (element_exist) {\n element_exist.remove();\n }\n }\n catch (error) { }\n }, 1000);\n });\n\n if (redirect) {\n container.style.cursor = \"pointer\";\n container.addEventListener('click', (event) => {\n event.stopPropagation();\n clearInterval(new_interval);\n new_interval = '';\n container.classList.add('pypepro_nt_hide');\n onClose();\n window.open(redirect, \"_self\");\n });\n }\n\n container.setAttribute('interval', new_interval)\n }\n}\n\nexport const NotificationHtmlTemplateV2 = ({\n\n classText = 'pypepro_notification_wrp_class_v2',\n headerText = 'Notice Lead Owner Change',\n bodyText,\n closeBtnText = '',\n timer = 3000,\n closeButtonLink = null,\n leftIcon = '',\n redirect = null,\n onClose = () => { }\n}) => {\n\n let new_interval = '', container = '';\n function handleCloseButtonClick(event) {\n event.stopPropagation();\n clearInterval(new_interval)\n new_interval = ''\n container.classList.add('pypepro_nt_hide');\n onClose();\n\n if (closeButtonLink) {\n window.location.href = closeButtonLink;\n }\n }\n\n function closeNotification(event) {\n event.stopPropagation();\n clearInterval(new_interval)\n new_interval = ''\n container.classList.add('pypepro_nt_hide');\n onClose();\n }\n\n removeNotification();\n const elm = `\n \n
\n \n `\n container = document.createElement('div')\n container.className = \"pypepro_notification_template\"\n container.className = classText\n container.id = \"pypepro_notification_wrp_id\"\n container.innerHTML = elm\n document.body.appendChild(container)\n\n setTimeout(() => {\n container.classList.add('animate')\n }, 0);\n\n if (document.getElementById(\"pypepro_nt_close_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_wrp_id\").addEventListener('click', handleCloseButtonClick)\n }\n\n new_interval = setTimeout(() => {\n try {\n if (document.getElementById(\"pypepro_nt_close_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_wrp_id\").removeEventListener('click', closeNotification)\n }\n // container.classList.add('pypepro_nt_hide');\n let element_exist = document.getElementById(\"pypepro_notification_wrp_id\");\n if (element_exist) {\n element_exist.remove();\n }\n }\n catch (error) { }\n }, timer);\n\n container.addEventListener('mouseover', () => {\n clearInterval(new_interval);\n });\n\n container.addEventListener('mouseout', () => {\n new_interval = setTimeout(() => {\n try {\n if (document.getElementById(\"pypepro_nt_close_wrp_id\")) {\n document.getElementById(\"pypepro_nt_close_wrp_id\").removeEventListener('click', closeNotification)\n }\n\n let element_exist = document.getElementById(\"pypepro_notification_wrp_id\");\n if (element_exist) {\n element_exist.remove();\n }\n }\n catch (error) { }\n }, 1000);\n });\n\n // if (redirect) {\n // container.style.cursor = \"pointer\";\n // container.addEventListener('click', (event) => {\n // event.stopPropagation();\n // clearInterval(new_interval);\n // new_interval = '';\n // container.classList.add('pypepro_nt_hide');\n // onClose();\n // window.open(redirect, \"_self\");\n // });\n // }\n\n container.setAttribute('interval', new_interval)\n\n}\n\nfunction removeNotification() {\n let element_exist = document.getElementById(\"pypepro_notification_wrp_id\");\n if (element_exist) {\n element_exist.remove();\n }\n}\n\nconst isValidURL = (url) => {\n const pattern = new RegExp(\n \"^(https?:\\\\/\\\\/)?\" + // protocol\n \"((([a-z\\\\d]([a-z\\\\d-]*[a-z\\\\d])*)\\\\.)+[a-z]{2,}|\" + // domain name\n \"((\\\\d{1,3}\\\\.){3}\\\\d{1,3}))\" + // OR ip (v4) address\n \"(\\\\:\\\\d+)?(\\\\/[-a-z\\\\d%_.~+]*)*\" + // port and path\n \"(\\\\?[;&a-z\\\\d%_.~+=-]*)?\" + // query string\n \"(\\\\#[-a-z\\\\d_]*)?$\",\n \"i\"\n ); // fragment locator\n return !!pattern.test(url);\n};\n\nconst isValidEmail = (email) => {\n //eslint-disable-next-line\n const re = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return re.test(email);\n}\n\nconst isValidMobileNumber = (mobileNumber) => {\n\n if (mobileNumber !== '' && mobileNumber.length < 10) {\n return false;\n } else if (mobileNumber !== '' && mobileNumber.length > 11) {\n return false;\n } else if (mobileNumber.length === 11 && mobileNumber.substring(0, 1) !== '1') {\n return false;\n }\n return true;\n}\n\nexport const getState = (value) => US_STATE_LIST.find((state) => state.value === value)?.label;\n\nconst validateEmail = (email) => {\n // eslint-disable-next-line no-useless-escape\n var re = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return re.test(email);\n}\n\nconst validateMobileNumber = (mobileNumber) => {\n\n if (mobileNumber !== '' && mobileNumber.length < 10) {\n return false;\n } else if (mobileNumber !== '' && mobileNumber.length > 11) {\n return false\n } else if (mobileNumber.length === 11 && mobileNumber.substring(0, 1) !== '1') {\n return false;\n }\n return true\n}\n\nexport const cleanNumber = (number) => {\n try {\n if (isNaN(number)) {\n return \"x.xx\";\n }\n\n if (typeof number === \"string\") {\n number = parseFloat(number);\n }\n\n const parts = number.toString().split(\".\");\n if (parts.length === 1) {\n return number.toFixed(2).replace(/\\.0*$/, \"\") + \".00\";\n }\n const decimalPart = parts[1].length < 2 ? parts[1] + \"0\" : parts[1];\n return `${parts[0]}.${decimalPart}`;\n } catch (err) {\n return \"x.xx\";\n }\n}\n\nexport const toRegular = (text) => {\n try {\n const modText = text.replace(/([A-Z])/g, \" $1\");\n return modText.charAt(0).toUpperCase() + modText.slice(1);\n } catch (err) {\n return text;\n }\n}\n\nexport const padZero = (value) => {\n return value < 10 ? `0${value}` : value;\n}\n\nexport const toHuman = (text) => {\n if (typeof text === \"boolean\") {\n return text === true ? \"Yes\" : \"No\";\n }\n\n return text;\n}\n\nexport const isDeleteAble = (object, which) => {\n if (which === \"email\") {\n return !!object[\"number\"];\n }\n\n if (which === \"number\") {\n return !!object[\"email\"];\n }\n};\n\nexport const toLowerCase = (value) => {\n try {\n return value.toLowerCase();\n } catch (e) {\n return value;\n }\n}\n\nexport const setNumberType = (value) => {\n try {\n let list = [PHONE_STATE.mobile, PHONE_STATE.landline, PHONE_STATE.voip, PHONE_STATE.unknown];\n\n if (value && typeof value === \"string\") {\n value = value.toLowerCase();\n }\n\n if (value && list.includes(value)) {\n return value\n }\n\n return PHONE_STATE.unknown;\n } catch (er) {\n return PHONE_STATE.unknown;\n }\n}\n\nexport function formatPhoneNumber(phoneNumberString) {\n if (!phoneNumberString) {\n return 'N/A';\n }\n\n if (phoneNumberString.length < 11) {\n phoneNumberString = '1' + phoneNumberString;\n }\n return phoneNumberString.replace(/\\D+/g, '').replace(/(\\d{1})(\\d{3})(\\d{3})(\\d{4})/, '+$1 ($2) $3-$4');\n}\n\nconst validURL = (string) => {\n try {\n const regexp = /^(?:(?:https?|ftp):\\/\\/)?(?:(?!(?:10|127)(?:\\.\\d{1,3}){3})(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))(?::\\d{2,5})?(?:\\/\\S*)?$/;\n return regexp.test(string);\n } catch (err) {\n return false;\n }\n}\n\nconst calculateCash = (amount, fixedCount = 2) => {\n var flag = ''\n // 1000 = 1K\n // 1000000 = 1M = 1K * 1000\n // 1M * 1000 = 1B\n // 1B * 1000 = 1T\n if (amount >= 1000000000000000000000000) {\n amount = amount / 1000000000000000000000000\n flag = 'Y'\n }\n if (amount >= 1000000000000000000000) {\n amount = amount / 1000000000000000000000\n flag = 'Z'\n }\n if (amount >= 1000000000000000000) {\n amount = amount / 1000000000000000000\n flag = 'E'\n }\n if (amount >= 1000000000000000) {\n amount = amount / 1000000000000000\n flag = 'P'\n }\n if (amount >= 1000000000000) {\n amount = amount / 1000000000000\n flag = 'T'\n }\n else if (amount >= 1000000000) {\n amount = amount / 1000000000\n flag = 'B'\n }\n else if (amount >= 1000000) {\n amount = amount / 1000000\n flag = 'M'\n }\n else if (amount >= 1000) {\n amount = amount / 1000\n flag = 'K'\n }\n // return '$' + (Math.round(totalDeal * 100) / 100) + flag\n if (amount != null) {\n return '$' + amount.toFixed(fixedCount) + flag\n }\n return '$' + amount + flag\n}\n\nfunction formatCurrency(n, currency = \"\") {\n try {\n if (n !== \"\") {\n n = parseFloat(n);\n }\n\n if (typeof n !== \"number\" || isNaN(n)) return currency + Number(0).toFixed(2);\n const hasDecimal = n % 1 !== 0;\n\n return (\n currency +\n n.toFixed(hasDecimal ? 2 : 0).replace(/./g, function (c, i, a) {\n return i > 0 && c !== \".\" && (a.length - i) % 3 === 0 ? \",\" + c : c;\n })\n );\n } catch (err) {\n return n;\n }\n}\n\nexport const checkScamMessage = (message) => {\n // List of suspicious keywords or phrases commonly found in scam messages\n\n // Regular expression to detect URLs in the message\n const urlRegex = /https?:\\/\\/[^\\s/$.?#].[^\\s]*/gi;\n\n // Convert message to lowercase for case-insensitive comparison\n const messageLower = message.toLowerCase();\n\n // Check for suspicious keywords\n const containsScamKeyword = SCAM_KEYWORDS.some(keyword => messageLower.includes(keyword));\n\n // Check for URLs in the message\n const containsUrl = urlRegex.test(message);\n\n // If message contains a suspicious keyword or URL, it might be a scam\n if (containsScamKeyword || containsUrl) {\n return true; // Potential scam\n }\n return false;\n}\n\nconst setPlainCookie = (name, value, min) => {\n let date = new Date();\n date.setTime(date.getTime() + (min * 60 * 1000));\n let expires = \"expires=\" + date.toUTCString();\n document.cookie = name + \"=\" + value + \";\" + expires + \";path=/\";\n}\n\nconst getPlainCookie = (name) => {\n let cookieArr = document.cookie.split(\";\");\n\n for (let i = 0; i < cookieArr.length; i++) {\n let cookie = cookieArr[i].trim();\n if (cookie.indexOf(name + \"=\") === 0) {\n return cookie.substring(name.length + 1, cookie.length);\n }\n }\n return null;\n}\n\nconst removeQueryParam = (paramsToRemove) => {\n const url = new URL(window.location.href);\n const searchParams = url.searchParams;\n\n paramsToRemove.forEach((param) => searchParams.delete(param));\n\n let newUrl = url.pathname;\n if (searchParams && searchParams.size !== 0) {\n newUrl += `?${searchParams.toString()}`;\n }\n window.history.replaceState(null, '', newUrl);\n};\n\nconst isMicrophoneOn = async (reason = 'Outgoing') => {\n try {\n // Request permissions for microphone access\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n\n // If we get a stream, the microphone is enabled\n console.log('Microphone is ON.');\n stream.getTracks().forEach((track) => track.stop()); // Stop the stream after checking\n return true;\n } catch (error) {\n // If there's an error, the microphone is either disabled or permission is denied\n if (error.name === 'NotAllowedError') {\n alert(\n reason === 'Outgoing' ? 'Microphone access is blocked. Please enable it'\n : 'Microphone access is blocked. Please enable before receive call'\n );\n } else if (error.name === 'NotFoundError') {\n alert(\n reason === 'Outgoing' ? 'No microphone is detected. Please enable it Before'\n : 'Microphone access is blocked. Please enable before receive call'\n );\n alert('No microphone is detected. Please check your device.');\n } else {\n console.error('Error accessing microphone:', error);\n }\n return false;\n }\n}\n// Helper function to set a cookie with expiry\nfunction setCookieForModalClose(key, value, ttlInMilliseconds) {\n const expires = new Date(Date.now() + ttlInMilliseconds).toUTCString();\n document.cookie = `${key}=${value}; expires=${expires}; path=/`;\n }\n \n // Helper function to get a cookie value\n function getCookieForModalOpen(key) {\n const name = `${key}=`;\n const decodedCookie = decodeURIComponent(document.cookie);\n const cookieArray = decodedCookie.split(\";\");\n for (let i = 0; i < cookieArray.length; i++) {\n let cookie = cookieArray[i].trim();\n if (cookie.indexOf(name) === 0) {\n return cookie.substring(name.length, cookie.length);\n }\n }\n return null;\n }\n export const ONE_DAY_MS = 24 * 60 * 60 * 1000; // 24 hours in milliseconds\n\n/**\n * Utility helper\n */\nconst Utils = {\n setCookieForModalClose,\n getCookieForModalOpen,\n handleException,\n getContactDisplayName,\n getInitial,\n validateEmail,\n validateMobileNumber,\n generateTimezoneList,\n showNotification,\n formatNumber,\n loadSocket,\n getAccountData,\n getShorterText,\n loadCodeSnippets,\n referralTrackingScript,\n getIconTextFromContact,\n isEmpty,\n getContactName,\n reduceTextLength,\n setAgencyTitleAndFav,\n checkLetterExistInText,\n checkNumberExistInText,\n isNaturalNumber,\n create_UUID,\n FileDownloadNotificationHtmlTemplate,\n NotificationHtmlTemplate,\n isValidURL,\n isValidEmail,\n isValidMobileNumber,\n validURL,\n calculateCash,\n formatCurrency,\n setPlainCookie,\n getPlainCookie,\n removeQueryParam,\n isMicrophoneOn\n}\n\nexport default Utils;","import { FormControl, FormHelperText, InputBase, withStyles } from \"@material-ui/core\";\nimport React from \"react\";\nimport Styles from \"./Styles.module.css\";\n\nconst CustomInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n \"&::placeholder\": {\n fontSize: \"11px !important\"\n }\n },\n}))(InputBase);\n\nconst GeneralInformation = ({ inputScrollToViewRef, formData, callback, errorCallback, a2pDlcError }) => {\n const handleFormDataChange = (name, value) => {\n if (name === \"customer_name\"){\n if (value.trim() === \"\"){\n errorCallback(\"customer_name\",\"Legal Business Name is required!\");\n }else{\n errorCallback(\"customer_name\",\"\");\n }\n }else if (name === \"street\"){\n if (value.trim() === \"\"){\n errorCallback(\"street\",\"Street Address is required!\");\n }else {\n errorCallback(\"street\",\"\");\n }\n }else if (name === \"city\"){\n if (value.trim() === \"\"){\n errorCallback(\"city\",\"City is required!\");\n }else {\n errorCallback(\"city\",\"\");\n }\n }else if (name === \"region\"){\n if (value.trim() === \"\"){\n errorCallback(\"region\",\"State is required!\");\n }else {\n errorCallback(\"region\",\"\");\n }\n }else if (name === \"postal_code\"){\n if (value.trim() === \"\"){\n errorCallback(\"postal_code\",\"Postal/Zip Code is required!\");\n }else {\n errorCallback(\"postal_code\",\"\");\n }\n }\n callback(name, value);\n };\n\n const renderErrorMessage = (fieldName) => {\n return ${headerText}
\n${bodyText}
\n\n ${closeBtnText && ``}\n\n
\n );\n}\n\nexport default GeneralInformation;","import React from \"react\";\nimport Styles from \"./Styles.module.css\";\nimport {\n Checkbox,\n FormControl,\n InputBase,\n MenuItem,\n Select,\n withStyles,\n FormControlLabel,\n FormHelperText\n} from \"@material-ui/core\";\nimport {Search} from \"@material-ui/icons\";\nimport Utils from \"../../helpers/Utils\";\n\nconst CustomInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n \"&::placeholder\": {\n fontSize: \"11px !important\"\n }\n },\n}))(InputBase);\n\nconst BootstrapInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n },\n },\n input: {\n fontSize: \"14px !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n color: \"#707070 !important\",\n border: \"1px solid #ced4da !important\",\n padding: \"10px 26px 10px 12px !important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n borderRadius: 4\n },\n },\n}))(InputBase);\n\nconst businessTypeList = [\n {label: \"Sole Proprietorship\", value: \"Sole Proprietorship\"},\n {label: \"Partnership\", value: \"Partnership\"},\n {label: \"Limited Liability Corporation\", value: \"Limited Liability Corporation\"},\n {label: \"Co-operative\", value: \"Co-operative\"},\n {label: \"Non-profit Corporation\", value: \"Non-profit Corporation\"},\n {label: \"Corporation\", value: \"Corporation\"},\n];\n\nconst businessIndustryList = [\n {label: \"Automotive\", value: \"AUTOMOTIVE\"},\n {label: \"Agriculture\", value: \"AGRICULTURE\"},\n {label: \"Banking\", value: \"BANKING\"},\n {label: \"Consumer\", value: \"CONSUMER\"},\n {label: \"Education\", value: \"EDUCATION\"},\n {label: \"Engineering\", value: \"ENGINEERING\"},\n {label: \"Energy\", value: \"ENERGY\"},\n {label: \"Oil and Gas\", value: \"OIL_AND_GAS\"},\n {label: \"Fast Moving Consumer Goods\", value: \"FAST_MOVING_CONSUMER_GOODS\"},\n {label: \"Financial\", value: \"FINANCIAL\"},\n {label: \"Fintech\", value: \"FINTECH\"},\n {label: \"Food and Beverage\", value: \"FOOD_AND_BEVERAGE\"},\n {label: \"Government\", value: \"GOVERNMENT\"},\n {label: \"Health Care\", value: \"HEALTHCARE\"},\n {label: \"Hospitality\", value: \"HOSPITALITY\"},\n {label: \"Insurance\", value: \"INSURANCE\"},\n {label: \"Legal\", value: \"LEGAL\"},\n {label: \"Manufacturing\", value: \"MANUFACTURING\"},\n {label: \"Media\", value: \"MEDIA\"},\n {label: \"Online\", value: \"ONLINE\"},\n {label: \"Raw Materials\", value: \"RAW_MATERIALS\"},\n {label: \"Real Estate\", value: \"REAL_ESTATE\"},\n {label: \"Religion\", value: \"RELIGION\"},\n {label: \"Retail\", value: \"RETAIL\"},\n {label: \"Jewelry\", value: \"JEWELRY\"},\n {label: \"Technology\", value: \"TECHNOLOGY\"},\n {label: \"Telecommunications\", value: \"TELECOMMUNICATIONS\"},\n {label: \"Transportation\", value: \"TRANSPORTATION\"},\n {label: \"Travel\", value: \"TRAVEL\"},\n {label: \"Electronics\", value: \"ELECTRONICS\"},\n {label: \"Not for Profit\", value: \"NOT_FOR_PROFIT\"}\n];\n\nconst typeList = [\n {label: \"Individual\", value: \"individual\"},\n {label: \"Business\", value: \"business\"},\n];\n\nconst BusinessInformation = ({ inputScrollToViewRef, formData, callback, errorCallback, a2pDlcError }) => {\n const handleFormDataChange = (name, value) => {\n if (name === \"business_type\"){\n if (value.trim() === \"\"){\n errorCallback(\"business_type\",\"Business Type is required!\");\n }else{\n errorCallback(\"business_type\",\"\");\n }\n }else if (name === \"type\"){\n if (value.trim() === \"\"){\n errorCallback(\"type\",\"Customer Business Profile Type is required!\");\n }else{\n errorCallback(\"type\",\"\");\n }\n }else if (name === \"business_industry\"){\n if (value.trim() === \"\"){\n errorCallback(\"business_industry\",\"Business Industry is required!\");\n }else {\n errorCallback(\"business_industry\",\"\");\n }\n }else if (name === \"business_registration_id_type\"){\n if (value.trim() === \"\"){\n errorCallback(\"business_registration_id_type\",\"Business Registration ID Type is required!\");\n }else {\n errorCallback(\"business_registration_id_type\",\"\");\n }\n }else if (name === \"business_registration_id\"){\n if (value.trim() === \"\"){\n errorCallback(\"business_registration_id\",\"Business Registration Number (EIN#) is required!\");\n }else {\n errorCallback(\"business_registration_id\",\"\");\n }\n }else if (name === \"website_url\"){\n if (value.trim() === \"\"){\n errorCallback(\"website_url\",\"Business Website is required!\");\n }else if (!Utils.isValidURL(value)){\n errorCallback(\"website_url\",\"Business Website must be a valid url!\");\n }else {\n errorCallback(\"website_url\",\"\");\n }\n }else if(name === \"iso_country\"){\n if (value !== \"US\"){\n window.showNotification(\"ERROR\", \"Sorry, we are currently not operating outside of the Canada and USA regions!\");\n return;\n }\n }\n callback(name, value);\n };\n\n const renderErrorMessage = (fieldName) => {\n return \n
\n Read before answering questions:
\nWhen completing this page please reference your official IRS documentation. (EIN documents, W2, W9, or CP575). Answer the questions carefully to ensure the info you provide matches your official IRS documents EXACTLY. Inaccuracies can lead to manual reviews and long delays in getting your business registered.
\n\n
\n \n inputScrollToViewRef.current[0] = el} className={Styles.formControl}>\n \n Legal Business Name\n *\n \n {handleFormDataChange(\"customer_name\", e.target.value)}}\n />\n {renderErrorMessage(\"customer_name\")}\n \n inputScrollToViewRef.current[1] = el} className={Styles.formControl}>\n \n Street Address\n *\n \n {handleFormDataChange(\"street\", e.target.value)}}\n />\n {renderErrorMessage(\"street\")}\n \n inputScrollToViewRef.current[2] = el} className={Styles.formControl}>\n \n City\n *\n \n {handleFormDataChange(\"city\", e.target.value)}}\n />\n {renderErrorMessage(\"city\")}\n \n inputScrollToViewRef.current[3] = el} className={Styles.formControl}>\n \n State\n *\n \n {handleFormDataChange(\"region\", e.target.value)}}\n />\n {renderErrorMessage(\"region\")}\n \n inputScrollToViewRef.current[4] = el} className={Styles.formControl}>\n \n Postal/Zip Code\n *\n \n {handleFormDataChange(\"postal_code\", e.target.value)}}\n />\n {renderErrorMessage(\"postal_code\")}\n \n
\n \n
\n );\n}\n\nexport default BusinessInformation;","import React from \"react\";\nimport Styles from \"./Styles.module.css\";\nimport {\n FormControl,\n InputBase,\n withStyles,\n FormControlLabel,\n Radio,\n RadioGroup,\n FormHelperText, Select, MenuItem\n} from \"@material-ui/core\";\nimport Utils from \"../../helpers/Utils\";\n\nconst CustomInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n \"&::placeholder\": {\n fontSize: \"11px !important\"\n }\n },\n}))(InputBase);\n\nconst BootstrapInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n },\n },\n input: {\n fontSize: \"14px !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n color: \"#707070 !important\",\n border: \"1px solid #ced4da !important\",\n padding: \"10px 26px 10px 12px !important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n borderRadius: 4\n },\n },\n}))(InputBase);\n\nconst jobPositionList = [\n {label: \"Director\", value: \"Director\"},\n {label: \"GM\", value: \"GM\"},\n {label: \"VP\", value: \"VP\"},\n {label: \"CEO\", value: \"CEO\"},\n {label: \"CFO\", value: \"CFO\"},\n {label: \"General Counsel\", value: \"General_Counsel\"},\n {label: \"Other\", value: \"Other\"}\n];\n\nconst PointOfContact = ({ inputScrollToViewRef, formData, callback, errorCallback, a2pDlcError }) => {\n const handleFormDataChange = (name, value) => {\n if (name === \"rep_user_1_first_name\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_1_first_name\",\"First Name is required!\");\n }else{\n errorCallback(\"rep_user_1_first_name\",\"\");\n }\n }else if (name === \"rep_user_1_last_name\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_1_last_name\",\"Last Name is required!\");\n }else {\n errorCallback(\"rep_user_1_last_name\",\"\");\n }\n }else if (name === \"rep_user_1_business_title\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_1_business_title\",\"Business Title required!\");\n }else {\n errorCallback(\"rep_user_1_business_title\",\"\");\n }\n }else if (name === \"rep_user_1_job_position\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_1_job_position\",\"Job Position is required!\");\n }else {\n errorCallback(\"rep_user_1_job_position\",\"\");\n }\n }else if (name === \"rep_user_1_email\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_1_email\",\"Email Address is required!\");\n }else if (!Utils.isValidEmail(value)){\n errorCallback(\"rep_user_1_email\",\"Email Address must be valid!\");\n }else {\n errorCallback(\"rep_user_1_email\",\"\");\n }\n }else if (name === \"rep_user_1_phone_number\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_1_phone_number\",\"Mobile Number is required!\");\n }else if (!Utils.isValidMobileNumber(value)){\n errorCallback(\"rep_user_1_phone_number\",\"Mobile Number must be valid!\");\n }else {\n errorCallback(\"rep_user_1_phone_number\",\"\");\n }\n }\n\n if (formData.auth_rep_2 !== \"false\"){\n if (name === \"rep_user_2_first_name\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_2_first_name\",\"First Name is required!\");\n }else{\n errorCallback(\"rep_user_2_first_name\",\"\");\n }\n }else if (name === \"rep_user_2_last_name\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_2_last_name\",\"Last Name is required!\");\n }else {\n errorCallback(\"rep_user_2_last_name\",\"\");\n }\n }else if (name === \"rep_user_2_business_title\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_2_business_title\",\"Business Title required!\");\n }else {\n errorCallback(\"rep_user_2_business_title\",\"\");\n }\n }else if (name === \"rep_user_2_job_position\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_2_job_position\",\"Job Position is required!\");\n }else {\n errorCallback(\"rep_user_2_job_position\",\"\");\n }\n }else if (name === \"rep_user_2_email\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_2_email\",\"Email Address is required!\");\n }else if (!Utils.isValidEmail(value)){\n errorCallback(\"rep_user_2_email\",\"Email Address must be valid!\");\n }else {\n errorCallback(\"rep_user_2_email\",\"\");\n }\n }else if (name === \"rep_user_2_phone_number\"){\n if (value.trim() === \"\"){\n errorCallback(\"rep_user_2_phone_number\",\"Mobile Number is required!\");\n }else if (!Utils.isValidMobileNumber(value)){\n errorCallback(\"rep_user_2_phone_number\",\"Mobile Number must be valid!\");\n }else {\n errorCallback(\"rep_user_2_phone_number\",\"\");\n }\n }\n }\n\n callback(name, value);\n };\n\n const renderErrorMessage = (fieldName) => {\n return \n
\n Read before answering questions:
\nWhen completing this page please reference your official IRS documentation. (EIN documents, W2, W9, or CP575). Answer the questions carefully to ensure the info you provide matches your official IRS documents EXACTLY. Inaccuracies can lead to manual reviews and long delays in getting your business registered.
\n\n
\n \n inputScrollToViewRef.current[0] = el} className={Styles.formControl}>\n \n Customer Business Profile Type\n *\n \n { handleFormDataChange(\"type\", e.target.value) }}\n input={ \n inputScrollToViewRef.current[1] = el} className={Styles.formControl}>\n \n Business Type\n *\n \n { handleFormDataChange(\"business_type\", e.target.value) }}\n input={ \n inputScrollToViewRef.current[2] = el} className={Styles.formControl}>\n \n Business Industry\n *\n \n { handleFormDataChange(\"business_industry\", e.target.value) }}\n input={ \n inputScrollToViewRef.current[4] = el} className={Styles.formControl}>\n \n Business Registration Number (EIN#)\n *\n \n {handleFormDataChange(\"business_registration_id\", e.target.value)}}\n />\n {renderErrorMessage(\"business_registration_id\")}\n \n inputScrollToViewRef.current[5] = el} className={Styles.formControl}>\n \n Business Website \n \n (It must be your actual business domain)\n \n *\n \n {handleFormDataChange(\"website_url\", e.target.value)}}\n />\n {renderErrorMessage(\"website_url\")}\n \n inputScrollToViewRef.current[6] = el} className={Styles.formControl}>\n \n Business Regions of Operations\n *\n \n \n
\n \n {handleFormDataChange(\"iso_country\", e.target.name)}}\n checked={formData.iso_country === \"AFRICA\"}\n />\n }\n label=\"Africa\"\n />\n {handleFormDataChange(\"iso_country\", e.target.name)}}\n checked={formData.iso_country === \"ASIA\"}\n />\n }\n label=\"Asia\"\n />\n {handleFormDataChange(\"iso_country\", e.target.name)}}\n checked={formData.iso_country === \"LATIN-AMERICA\"}\n />\n }\n label=\"Latin America\"\n />\n {handleFormDataChange(\"iso_country\", e.target.name)}}\n checked={formData.iso_country === \"US\"}\n />\n }\n label=\"USA and Canada\"\n />\n {handleFormDataChange(\"iso_country\", e.target.name)}}\n checked={formData.iso_country === \"EUROPE\"}\n />\n }\n label=\"Europe\"\n />\n
\n {renderErrorMessage(\"iso_country\")}\n \n
\n \n
\n What is an EIN? (Employer Identification Number)
\n Your 9-digit US EIN is also referred to as your Tax ID.
\n To get the highest possible messaging limits, create your Customer Profile with the details that match those in your US EIN listing.
\n If there are any differences - for example in the business name or address, your messaging limits will be lower.
\n \n \n
\n );\n}\n\nexport default PointOfContact;","import React from \"react\";\nimport Styles from \"./Styles.module.css\";\nimport {Checkbox, FormControlLabel, FormHelperText} from \"@material-ui/core\";\n\nconst TermsAndPolicy = ({ formData, a2pDlcError, callback }) => {\n const handleFormDataChange = (name, value) => {\n callback(name, value);\n }\n\n const renderErrorMessage = (fieldName) => {\n return \n
\n Read before answering questions:
\nPlease complete the info below in case we need to contact you or an authorized representative regarding your registration. We will only contact you if there are urgent issues.
\n\n
\n \n inputScrollToViewRef.current[0] = el} className={Styles.formControl}>\n \n First Name\n *\n \n {handleFormDataChange(\"rep_user_1_first_name\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_1_first_name\")}\n \n inputScrollToViewRef.current[1] = el} className={Styles.formControl}>\n \n Last Name\n *\n \n {handleFormDataChange(\"rep_user_1_last_name\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_1_last_name\")}\n \n inputScrollToViewRef.current[2] = el} className={Styles.formControl}>\n \n Business Title\n *\n \n {handleFormDataChange(\"rep_user_1_business_title\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_1_business_title\")}\n \n inputScrollToViewRef.current[3] = el} className={Styles.formControl}>\n \n Job Position\n *\n \n { handleFormDataChange(\"rep_user_1_job_position\", e.target.value) }}\n input={ \n inputScrollToViewRef.current[4] = el} className={Styles.formControl}>\n \n What is your email address?\n *\n \n {handleFormDataChange(\"rep_user_1_email\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_1_email\")}\n \n inputScrollToViewRef.current[5] = el} className={Styles.formControl}>\n \n What is your phone number?\n *\n \n {handleFormDataChange(\"rep_user_1_phone_number\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_1_phone_number\")}\n \n inputScrollToViewRef.current[6] = el} className={Styles.formControl}>\n \n Do you want to add another authorized representative? (optional)\n *\n \n We may contact this authorized representative if the first one doesn't respond.\n { handleFormDataChange(\"auth_rep_2\",e.target.value) }}>\n \n \n\n
\n \n {\n formData.auth_rep_2 === \"true\" ? (\n
\n \n inputScrollToViewRef.current[7] = el} className={Styles.formControl}>\n \n First Name\n *\n \n {handleFormDataChange(\"rep_user_2_first_name\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_2_first_name\")}\n \n inputScrollToViewRef.current[8] = el} className={Styles.formControl}>\n \n Last Name\n *\n \n {handleFormDataChange(\"rep_user_2_last_name\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_2_last_name\")}\n \n inputScrollToViewRef.current[9] = el} className={Styles.formControl}>\n \n Business Title\n *\n \n {handleFormDataChange(\"rep_user_2_business_title\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_2_business_title\")}\n \n inputScrollToViewRef.current[10] = el} className={Styles.formControl}>\n \n Job Position\n *\n \n { handleFormDataChange(\"rep_user_2_job_position\", e.target.value) }}\n input={ \n inputScrollToViewRef.current[11] = el} className={Styles.formControl}>\n \n What is your email address?\n *\n \n {handleFormDataChange(\"rep_user_2_email\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_2_email\")}\n \n inputScrollToViewRef.current[12] = el} className={Styles.formControl}>\n \n What is your phone number?\n *\n \n {handleFormDataChange(\"rep_user_2_phone_number\", e.target.value)}}\n />\n {renderErrorMessage(\"rep_user_2_phone_number\")}\n \n
\n ) : \"\"\n }\n \n
\n Authorized Representative 2
\n\n
\n );\n}\n\nexport default TermsAndPolicy;","import React from \"react\";\nimport Styles from \"./Styles.module.css\";\n\nconst loadingGifImg = \"https://d24gujj67p1uc1.cloudfront.net/asset/images/releases/1.0.0/loadr.gif\";\n\nconst Processing = ({ ...rest }) => {\n return(\n \n
\n Terms of Service & Privacy Policy
\nWe will process data according to the Twilio Privacy Statement.
\n\n {handleFormDataChange(\"accept_term_privacy\", e.target.checked ? \"yes\" : \"no\")}}\n checked={formData.accept_term_privacy === \"yes\"}\n />\n }\n label=\"I declare that the information provided is accurate. I acknowledge that Twilio will be processing the information provided for the purpose of identity verification, and that Twilio reserves the right to retain Business Profile information after account closure in The case of a traceback from an authority or equivalent.\"\n />\n {renderErrorMessage(\"accept_term_privacy\")}\n
\n \n 
\n
\n );\n};\n\nexport default Processing;","const icons = {\n success: ,\n failed: \n};\n\nexport default icons;","import React from \"react\";\nimport Styles from \"./Styles.module.css\";\nimport Icons from \"./Icons\";\n\nconst ResponseMessage = ({ submissionError, response, hasError, hasSuccess, handleClose, ...rest }) => {\n\n const renderMessage = () => {\n if(response !== undefined && response != null){\n if(response.campaign_setting_available !== undefined && response.campaign_setting_available){\n return \n Processing Registration\n
\n\n Your Submission has been received and we are processing your registration.\n This process can make several minutes to complete. Please! Do not close the window.\n
\n\n
\n }\n \n );\n};\n\nexport default ResponseMessage;","import React, { Fragment, useRef, useState } from \"react\";\nimport {\n Button,\n Paper,\n Modal,\n makeStyles,\n} from \"@material-ui/core\";\nimport Styles from \"./a2pModalStyles.module.css\";\nimport GeneralInformation from \"./GeneralInformation\";\nimport BusinessInformation from \"./BusinessInformation\";\nimport PointOfContact from \"./PointOfContact\";\nimport TermsAndPolicy from \"./TermsAndPolicy\";\nimport { closeA2pModalApi, submitStandardPolicyApi } from \"../../api/globalApi\";\nimport Utils from \"../../helpers/Utils\";\nimport Processing from \"./Processing\";\nimport ResponseMessage from \"./ResponseMessage\";\n\nconst steps = [\n {\n label: \"General Information\",\n title: \"A2P/10DLC Registration - General Information\",\n },\n {\n label: \"Business Information\",\n title: \"A2P/10DLC Registration - Business Information\",\n },\n {\n label: \"Point of Contact\",\n title: \"A2P/10DLC Registration - Points of Contact\",\n },\n {\n label: \"Terms & Privacy Policy\",\n title: \"A2P/10DLC Registration - Terms & Privacy Policy\",\n }\n];\n\nconst useStyles = makeStyles((theme) => {\n return {\n root: {\n \"&.MuiButton-root\": {\n backgroundColor: \"#9670ff\",\n padding: \"5px 32px\",\n borderRadius: \"4px\",\n fontWeight: 700,\n },\n \"&.MuiButton-text\": {\n color: \"#9670ff\"\n },\n \"&.MuiButton-contained\": {\n color: \"white\",\n padding: \"7px 32px\",\n },\n \"&.MuiButton-outlined\": {\n backgroundColor: \"#ffffff\",\n color: \"#9670ff\",\n borderColor: \"#9670ff\",\n border: \"2px solid !important\",\n }\n }\n };\n});\nconst MultiStepperModal = ({ isOpen, onClose, data }) => {\n const inputScrollToViewRef = useRef([]);\n const width = window.innerWidth - 288;\n const height = window.innerHeight - 264;\n const classes = useStyles();\n const [activeStep, setActiveStep] = useState(0);\n const [submitting, setSubmitting] = useState(false);\n const [hasError, setHasError] = useState(\"\");\n const [submissionError, setSubmissionError] = useState([]);\n const [hasSuccess, setHasSuccess] = useState(\"\");\n const [response, setResponse] = useState(null);\n const [isFinal, setIsFinal] = useState(false);\n const [a2pDlcData, setA2pDlcData] = useState({\n customer_name: \"\",\n street: \"\",\n city: \"\",\n postal_code: \"\",\n region: \"\",\n iso_country: \"US\",\n policyType: data?.policyType,\n\n business_identity: \"\",\n business_type: \"\",\n business_industry: \"\",\n business_registration_id_type: \"EIN\",\n business_registration_id: \"\",\n website_url: \"\",\n type: \"\",\n\n rep_user_1_business_title: \"\",\n rep_user_1_email: \"\",\n rep_user_1_first_name: \"\",\n rep_user_1_job_position: \"\",\n rep_user_1_last_name: \"\",\n rep_user_1_phone_number: \"\",\n auth_rep_1: \"true\",\n\n rep_user_2_business_title: \"\",\n rep_user_2_email: \"\",\n rep_user_2_first_name: \"\",\n rep_user_2_job_position: \"\",\n rep_user_2_last_name: \"\",\n rep_user_2_phone_number: \"\",\n auth_rep_2: \"false\",\n\n accept_term_privacy: \"no\",\n });\n const [a2pDlcError, setA2pDlcError] = useState({\n customer_name: \"\",\n street: \"\",\n city: \"\",\n postal_code: \"\",\n region: \"\",\n iso_country: \"\",\n\n business_identity: \"\",\n business_type: \"\",\n business_industry: \"\",\n business_registration_id_type: \"\",\n business_registration_id: \"\",\n website_url: \"\",\n type: \"\",\n\n rep_user_1_business_title: \"\",\n rep_user_1_email: \"\",\n rep_user_1_first_name: \"\",\n rep_user_1_job_position: \"\",\n rep_user_1_last_name: \"\",\n rep_user_1_phone_number: \"\",\n\n rep_user_2_business_title: \"\",\n rep_user_2_email: \"\",\n rep_user_2_first_name: \"\",\n rep_user_2_job_position: \"\",\n rep_user_2_last_name: \"\",\n rep_user_2_phone_number: \"\",\n\n accept_term_privacy: \"\",\n });\n\n const validate = () => {\n if (a2pDlcData) {\n if (activeStep === 0) {\n let message = {\n customer_name: \"\",\n street: \"\",\n city: \"\",\n region: \"\",\n postal_code: \"\",\n };\n\n Object.entries(a2pDlcData).forEach(([key, value]) => {\n if (key === \"customer_name\" && value.trim() === \"\") {\n message.customer_name = \"Legal Business Name is required!\";\n } else if (key === \"street\" && value.trim() === \"\") {\n message.street = \"Street Address is required!\";\n } else if (key === \"city\" && value.trim() === \"\") {\n message.city = \"City is required!\";\n } else if (key === \"region\" && value.trim() === \"\") {\n message.region = \"State is required!\";\n } else if (key === \"postal_code\" && value.trim() === \"\") {\n message.postal_code = \"Postal/Zip Code is required!\";\n }\n });\n\n if (message && !Object.values(message).every(x => x === \"\")) {\n setA2pDlcError({ ...a2pDlcError, ...message });\n\n if (inputScrollToViewRef.current && inputScrollToViewRef.current.length > 0) {\n let index = null;\n let messages = Object.values(message)\n\n for (let i = messages.length; i >= 0; i--) {\n if (messages[i] !== \"\") {\n index = i;\n }\n }\n\n if (index !== null && index !== undefined && inputScrollToViewRef.current[index]) {\n inputScrollToViewRef.current[index].scrollIntoView();\n }\n }\n\n return false;\n }\n return true;\n }\n\n if (activeStep === 1) {\n let message = {\n business_type: \"\",\n type: \"\",\n business_industry: \"\",\n business_registration_id_type: \"\",\n business_registration_id: \"\",\n website_url: \"\",\n };\n\n Object.entries(a2pDlcData).forEach(([key, value]) => {\n if (key === \"business_type\" && value.trim() === \"\") {\n message.business_type = \"Business Type is required!\";\n } else if (key === \"type\" && value.trim() === \"\") {\n message.type = \"Customer Business Profile Type is required!\";\n } else if (key === \"business_industry\" && value.trim() === \"\") {\n message.business_industry = \"Business Industry is required!\";\n } else if (key === \"business_registration_id_type\" && value.trim() === \"\") {\n message.business_registration_id_type = \"Business Registration ID Type is required!\";\n } else if (key === \"business_registration_id\" && value.trim() === \"\") {\n message.business_registration_id = \"Business Registration Number (EIN#) is required!\";\n } else if (key === \"website_url\" && value.trim() === \"\") {\n message.website_url = \"Business Website is required!\";\n } else if (key === \"website_url\" && value !== \"\" && !Utils.isValidURL(value)) {\n message.website_url = \"Business Website must be a valid url!\";\n }\n });\n\n if (message && !Object.values(message).every(x => x === \"\")) {\n setA2pDlcError({ ...a2pDlcError, ...message });\n\n if (inputScrollToViewRef.current && inputScrollToViewRef.current.length > 0) {\n let index = null;\n let messages = Object.values(message)\n\n for (let i = messages.length; i >= 0; i--) {\n if (messages[i] !== \"\") {\n index = i;\n }\n }\n\n if (index !== null && index !== undefined && inputScrollToViewRef.current[index]) {\n inputScrollToViewRef.current[index].scrollIntoView();\n }\n }\n\n return false;\n }\n return true;\n }\n\n if (activeStep === 2) {\n let message = {\n rep_user_1_first_name: \"\",\n rep_user_1_last_name: \"\",\n rep_user_1_business_title: \"\",\n rep_user_1_job_position: \"\",\n rep_user_1_email: \"\",\n rep_user_1_phone_number: \"\",\n rep_user_2_first_name: \"\",\n rep_user_2_last_name: \"\",\n rep_user_2_business_title: \"\",\n rep_user_2_job_position: \"\",\n rep_user_2_email: \"\",\n rep_user_2_phone_number: \"\",\n };\n\n Object.entries(a2pDlcData).forEach(([key, value]) => {\n if (key === \"rep_user_1_business_title\" && value.trim() === \"\") {\n message.rep_user_1_business_title = \"Business Title is required!\";\n } else if (key === \"rep_user_1_email\" && value.trim() === \"\") {\n message.rep_user_1_email = \"Email Address is required!\";\n } else if (key === \"rep_user_1_email\" && value !== \"\" && !Utils.isValidEmail(value)) {\n message.rep_user_1_email = \"Email Address must be valid!\";\n } else if (key === \"rep_user_1_phone_number\" && value.trim() === \"\") {\n message.rep_user_1_phone_number = \"Mobile Number is required!\";\n } else if (key === \"rep_user_1_phone_number\" && value !== \"\" && !Utils.isValidMobileNumber(value)) {\n message.rep_user_1_phone_number = \"Mobile Number must be valid!\";\n } else if (key === \"rep_user_1_job_position\" && value.trim() === \"\") {\n message.rep_user_1_job_position = \"Job Position is required!\";\n } else if (key === \"rep_user_1_first_name\" && value.trim() === \"\") {\n message.rep_user_1_first_name = \"First Name is required!\";\n } else if (key === \"rep_user_1_last_name\" && value.trim() === \"\") {\n message.rep_user_1_last_name = \"Last Name is required!\";\n }\n\n if (a2pDlcData.auth_rep_2 !== \"false\") {\n if (key === \"rep_user_2_business_title\" && value.trim() === \"\") {\n message.rep_user_2_business_title = \"Business Title is required!\";\n } else if (key === \"rep_user_2_email\" && value.trim() === \"\") {\n message.rep_user_2_email = \"Email Address is required!\";\n } else if (key === \"rep_user_2_email\" && value !== \"\" && !Utils.isValidEmail(value)) {\n message.rep_user_2_email = \"Email Address must be valid!\";\n } else if (key === \"rep_user_2_phone_number\" && value.trim() === \"\") {\n message.rep_user_2_phone_number = \"Mobile Number is required!\";\n } else if (key === \"rep_user_2_phone_number\" && value !== \"\" && !Utils.isValidMobileNumber(value)) {\n message.rep_user_2_phone_number = \"Mobile Number must be valid!\";\n } else if (key === \"rep_user_2_job_position\" && value.trim() === \"\") {\n message.rep_user_2_job_position = \"Job Position is required!\";\n } else if (key === \"rep_user_2_first_name\" && value.trim() === \"\") {\n message.rep_user_2_first_name = \"First Name is required!\";\n } else if (key === \"rep_user_2_last_name\" && value.trim() === \"\") {\n message.rep_user_2_last_name = \"Last Name is required!\";\n }\n }\n });\n\n if (message && !Object.values(message).every(x => x === \"\")) {\n setA2pDlcError({ ...a2pDlcError, ...message });\n\n if (inputScrollToViewRef.current && inputScrollToViewRef.current.length > 0) {\n let index = null;\n let messages = Object.values(message)\n\n for (let i = messages.length; i >= 0; i--) {\n if (messages[i] !== \"\") {\n index = i;\n }\n }\n\n if (index !== null && index !== undefined && inputScrollToViewRef.current[index]) {\n inputScrollToViewRef.current[index].scrollIntoView();\n }\n }\n\n return false;\n }\n return true;\n }\n }\n }\n\n const handleNext = () => {\n if (!validate()) {\n window.showNotification(\"Error\", \"Please fill the form correctly. For more details check the form.\");\n return;\n }\n\n if (activeStep === (steps.length - 1)) {\n return;\n }\n if (activeStep === (steps.length - 2)) {\n setIsFinal(true);\n }\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleBack = () => {\n if (activeStep === 0) {\n return;\n }\n if (isFinal) {\n setIsFinal(false);\n }\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleClose = () => {\n onClose();\n };\n\n const handleCloseForOneDay = async () => {\n onClose();\n await closeA2pModalApi();\n }\n\n const handleChangeA2pDlcData = (name, value) => {\n setA2pDlcData({ ...a2pDlcData, [name]: value });\n };\n\n const handleErrorCallback = (name, message) => {\n setA2pDlcError({ ...a2pDlcError, [name]: message });\n };\n\n const handleSubmitInformation = () => {\n\n if (activeStep === 3 && a2pDlcData.accept_term_privacy !== \"yes\") {\n window.showNotification(\"ERROR\", \"You have to accept the terms and policy.\");\n return;\n }\n\n if (submitting) {\n return;\n }\n setSubmitting(true);\n if (a2pDlcData.rep_user_1_phone_number && a2pDlcData.rep_user_1_phone_number.length === 11) {\n a2pDlcData.rep_user_1_phone_number = a2pDlcData.rep_user_1_phone_number.substring(1);\n }\n\n if (a2pDlcData.rep_user_2_phone_number && a2pDlcData.rep_user_2_phone_number.length === 11) {\n a2pDlcData.rep_user_2_phone_number = a2pDlcData.rep_user_2_phone_number.substring(1);\n }\n\n submitStandardPolicyApi(a2pDlcData).then(res => {\n let response = res.data;\n if (response.status === \"success\") {\n setHasSuccess(\"Successfully submitted the form.\");\n setResponse({\n \"campaign_setting_available\": response?.campaign_setting_available || false,\n \"campaign_reg_failed_reason\": response?.campaign_reg_failed_reason || \"\"\n });\n if (data.callback){\n data.callback();\n }\n } else {\n\n if (response.error_message && Array.isArray(response.error_message)) {\n setSubmissionError(response.error_message);\n }\n\n if (response.message) {\n setHasError(response.message);\n } else {\n setHasError(\"Can not register 10DLC information!\");\n }\n }\n setSubmitting(false);\n }).catch((e) => {\n setSubmitting(false);\n setHasError(\"Can not register 10DLC information!\");\n setSubmitting(false);\n });\n };\n\n const getStepBody = () => {\n switch (activeStep) {\n case 0:\n return \n {hasSuccess !== \"\" ? Icons.success : Icons.failed}\n
\n \n {hasError === \"\" ? \"Your registration is successful!\" : hasError}\n
\n {\n hasSuccess !== \"\" ?\n renderMessage() :\n\n {\n submissionError && submissionError[0] &&\n handleClose({onlyClose: true, redirect: false})}\n >\n Try again\n
\n - \n {\n submissionError.map((submissionErrorItem)=>(\n
- * {submissionErrorItem} \n ))\n }\n
\n {\n steps.map((step, index) => (\n
\n \n {(index + 1)}. {step.label}\n
\n ))\n }\n \n
\n \n
\n \n
\n {getStepTitle(activeStep)}
\n\n \n \n
\n \n {getStepBody()}\n
\n \n {\n activeStep !== 0 &&\n (\n \n )\n }\n \n
\n \n
\n );\n}\nexport default MessageBox;","import {\n Button,\n makeStyles,\n Typography\n} from \"@material-ui/core\";\nimport React, { Fragment } from \"react\";\nimport { closeA2pModalApi } from \"../../api/globalApi\";\nimport Utils from \"../../helpers/Utils\";\nimport MessageBox from \"../messageBox/MessageBox\";\nimport Styles from \"./Styles.module.css\";\nimport { a2pOnBoard } from \"./index\";\n\nconst useStyles = makeStyles((theme) => {\n return {\n root: {\n \"&.MuiButton-root\": {\n backgroundColor: \"#9670ff\",\n padding: \"5px 32px\",\n borderRadius: \"4px\",\n fontWeight: 700,\n },\n \"&.MuiButton-text\": {\n color: \"#9670ff\"\n },\n \"&.MuiButton-contained\": {\n color: \"white\",\n padding: \"7px 32px\",\n },\n \"&.MuiButton-outlined\": {\n backgroundColor: \"#ffffff\",\n color: \"#9670ff\",\n borderColor: \"#9670ff\",\n border: \"2px solid !important\",\n }\n }\n };\n});\n\nconst WelcomeDlc = ({ data, onClose, setActiveStep }) => {\n const classes = useStyles();\n\n const handleCloseForOneDay = async () => {\n onClose();\n await closeA2pModalApi();\n }\n\n const handleRedirectHelp = () => {\n\n if (Utils.getAccountData('agencyId') === 1) {\n return `https://softwarehelp.freshdesk.com/support/solutions/articles/66000517994-understanding-a2p-10dlc-registration`;\n }\n return `${process.env.REACT_APP_CDN_LINK}asset/files/releases/1.0.0/10dlc-help.pdf`;\n }\n\n const getReasonMessage = (message) => {\n if (message !== undefined && message !== null && message !== \"\") {\n try {\n let str = message.split(\"Reason\")\n str = str[1];\n str = str.replace(\":\", \"\")\n str = str.trim()\n return (\n \n Action Required: A2P/10DLC Registration \n \n
\n\n \n
\n \n {getReasonMessage(data?.standard_reg_failed_reason)}\n
\n \n
\n \n In order to send text messages in the United States you are now required to register your business.\n This new regulation is called A2P 10DLC.\n
\n\n A2P (Application to Person) 10DLC (10 digit long code) is the standard U.S. telecom carriers have put in\n place to ensure text messages being sent are verified and consensual.\n
\n\n \n
\n \n \n \n
\n \n A2P/10DLC Registration \n
\n\n \n
\n \n Do you send text messages to contacts located in the United States?\n
\n \n \n \n
\n \n
\n \n
\n \n If you are based in the United States registration is mandatory. If you are located outside of the\n United States, but send messages to US numbers you are also required to register.\n
\n\n A2P/10DLC Registration \n
\n\n \n
\n \n Based on your answer you are not required to register for A2P/10DLC at this time.\n
\n \n \n \n
\n \n
\n \n A2P/10DLC Registration \n \n
\n\n \n
\n \n Does the business you're registering have a tax ID (EIN#)?\n
\n \n \n \n
\n \n
\n \n
\n \n * You can find your EIN number on your IRS forms or previous tax return documents (W2, W9, or CP575).\n
\n\n A2P/10DLC Registration \n {\n isBack &&\n \n }\n {\n data.isExit &&\n \n }\n
\n\n \n
\n \n On average, do you plan to send more or less than 6,000 messages per day?\n
\n \n \n \n
\n \n
\n {lItem.label}
\n${lItem.pricing} - One Time
\n- \n {\n lItem?.items?.map((llItem)=>(
{llItem}
))\n }\n
\n A2P/10DLC Registration \n \n
\n\n \n {\n currentCredit < totalCharge &&\n
\n \n
\n }\n \n You need a minimum balance of ${addZeroes(totalCharge)} to complete the registration process. Your current balance is ${addFix(currentCredit)}.\n
\n\n To proceed, please { window.open(\"/billing\", \"_self\") }} className={Styles.redirectLink}>Recharge Now\n
\n\n
\n \n
\n Brand and Campaign Details
\nThe fees associated with registration are displayed below.
\n\n {renderPricingItems()}\n
\n * These fees are paid directly to the phone companies and exist regardless of the texting platform you use
\n* The phone companies also charge campaign fees up to $12/mo in accordance with TCR rules
\n\n \n \n
\n \n A2P/10DLC Registration \n
\n\n \n
\n \n Notice: You are not eligible to register as a
Sole Proprietor\n
\n Sole Proprietor\n
\n \n \n
\n \n
\n \n
\n \n REASON: When you register as a sole proprietor the phone companies only allow you to have 1 virtual number for your entire team.\n (You have {data?.count} active virtual numbers) In order to move forward with registration as a sole proprietor you will need to remove your extra virtual numbers.\n You can also register with an EIN (preferred route). EIN registration doesn't restrict the amount of numbers you can have.\n
\n\n
\n \n \n \n Cancel\n \n \n {props.buttonText}\n \n \n )\n }\n \n
\n \n
\n\n {/* Modal Body */}\n\n \n {\n typeof props.title === 'string' ? \n
\n {typeof props.extraButton != 'undefined' &&\n {props.title}
: \n <>{props.title}\n }\n \n\n {props.extraButton}\n
\n }\n \n {props.children}\n
\n \n {/*Send Massage and close button*/}\n {\n props.hideFooter !== true && (\n \n
\n \n\n
\n \n {state.requestIsSubmitted ?\n
\n\n \n
\n :\n \n
\n \n \n
\n \n
\n \n Your request is submitted successfully\n
\n\n
\n }\n \n
\n \n \n
\n \n
\n {isPackageInTrial &&\n \n You've exceeded your contact limit!\n
\n\n
\n }\n\n \n During your free trial we limit your account to 500 contacts for testing purpose.\n
\n\n
\n {isPackageInTrial &&\n \n To request a contact limit increase from our team click submit.
Our team will review your request and get back to you ASAP.\n {state.loading ? 'Submitting...' : 'Submit'}\n
\n
\n }\n \n To instantly increase your contact limit you can also upgrade to a paid plan.\n goToLink(e, '/billing')}>Upgrade\n
\n\n 
\n
\n New Contact
\n \n }\n onClose={props.onClose}\n buttonText={\"Save\"}\n hideFooter={currentContact >= contactLimit ? true : submittingContact}\n handleSubmit={submitNewContact}\n className={\"global-large-modal main-add-contact-modal main-add-contact-modal-v2\"}\n >\n {!isLoading && (\n\n \n \n \n \n handleSelectChange(e.target.value)}\n mapping={{\n label: \"source_title\",\n value: \"id\"\n }}\n />\n\n \n \n\n \n \n \n Lead Type\n \n\n \n\n \n \n Company Name (Optional)\n \n handleInputField(\"company_name\", event.target.value)}\n />\n \n\n \n \n First Name\n \n handleInputField(\"first_name\", event.target.value)}\n />\n \n\n \n \n Last Name\n \n handleInputField(\"last_name\", event.target.value)}\n />\n \n\n {\n contactForm.numbers.map((number, index) => (\n \n \n {\n index === 0 && (\n \n \n Phone Number(s)\n \n \n )\n }\n\n \n \n { handleChangeDynamicInput(\"numbers\", \"number\", event.target.value, index); }}\n value={number.number}\n />\n \n \n \n \n \n \n \n \n \n ))}\n\n {\n contactForm.emails.map((email, index) => (\n \n {\n index === 0 && (\n \n \n Email Address(s)\n \n \n )\n }\n \n ))\n }\n\n {\n showAddress ? (\n \n \n \n Address Search\n \n \n \n ) : (\n \n \n \n Address Search\n \n \n \n Manual\n \n \n \n \n )\n }\n {\n showAddress ? (\n \n \n \n Address\n \n handleInputField(\"address\", event.target.value)}\n />\n \n \n \n City\n \n handleInputField(\"city\", event.target.value)}\n />\n \n\n \n \n \n State\n \n\n handleInputField(\"state\", event.target.value)}\n input={\n Select State\n \n\n {US_STATE_LIST.map((state) => (\n \n {state.label}\n \n ))}\n \n \n \n \n \n Country\n \n handleInputField(\"country\", event.target.value)}\n />\n \n\n \n \n Zip Code:\n \n handleInputField(\"zip\", event.target.value)}\n />\n \n \n ) : (\n \n \n )\n }\n \n \n\n \n \n \n \n \n \n Birthday\n \n {\n setBirthDate(e.target.value);\n handleInputField(\"birth_date\", e.target.value);\n }}\n />\n \n \n \n \n \n Anniversary\n \n \n \n {\n additionalDates.map((additionalDate, index) => (\n <>\n \n \n { handleChangeInputField('title', event.target.value, index) }}\n />\n {\n (additionalDatesErrors[index] && additionalDatesErrors[index].title) &&\n {additionalDatesErrors[index].title}\n }\n \n \n \n \n \n ))\n }\n \n {/* // Dates */}\n\n \n \n\n
\n )\n }\n\n {\n currentContact >= contactLimit && (\n \n \n Lead Source\n \n
\n\n\n \n { handleChangeDynamicInput(\"numbers\", \"number_state\", event.target.value, index); }}\n mapping={{\n label: \"label\",\n value: \"value\"\n }}\n />\n {/* { handleChangeDynamicInput(\"numbers\", \"number_state\", event.target.value, index); }}\n input={\n {phoneType.label}\n \n ))\n }\n */}\n {index === 0 ? (\n {\n removeMultiField(\"numbers\", index);\n }}\n >\n
\n\n \n {IconList.plusBoldSVG}\n
\n )\n :\n (\n \n { handleChangeDynamicInput(\"emails\", \"email\", event.target.value, index); }}\n />\n {index === 0 ? (\n {\n removeMultiField(\"emails\", index);\n }}\n >\n
\n \n {IconList.plusBoldSVG}\n
\n )\n :\n (\n \n {\n await handleAddress(e.value);\n },\n placeholder: Start typing address here…,\n classNamePrefix: \"my-google-places-autocomplete\",\n }}\n />\n
\n \n \n {IconList.locationSVG}\n \n
\n\n {makeAddress()}
\n \n \n \n Additional Info\n \n \n \n {\n customFields &&\n Array.isArray(customFields) &&\n customFields.map((each, index) => {\n return renderEachCustomField(\n each,\n index,\n handleCustomFieldChange,\n customFieldsData\n );\n })\n }\n \n
\n\n {/* // Dates */}\n \n {\n setAnniversaryDate(e.target.value);\n handleInputField(\"anniversary_date\", e.target.value);\n }}\n />\n
\n \n {IconList.plusBoldSVG}\n
\n \n \n { handleChangeInputField('value', event.target.value, index) }}\n />\n {\n (additionalDatesErrors[index] && additionalDatesErrors[index].value) &&\n {additionalDatesErrors[index].value}\n }\n \n {\n removeInputField(index);\n }}\n >\n
\n \n \n {data.default_values &&\n Array.isArray(data.default_values) &&\n data.default_values.map((each, each_index) => {\n let isChecked = _values.indexOf(each) !== -1 ? true : false;\n return (\n \n
\n )}\n\n {type_id === CustomFieldType.RADIO && (\n \n \n {data.default_values &&\n Array.isArray(data.default_values) &&\n data.default_values.map((each, each_index) => {\n return (\n
\n )}\n\n {type_id === CustomFieldType.SELECT && (\n \n
\n );\n },\n closeOnClickOutside: props.closeOnClickOutside,\n overlayClassName: Styles.overlay\n })\n )\n}\nexport default App;","import React from \"react\";\nimport Styles from \"./Style.module.css\";\n\nconst CampaignUseCaseDescriptionLearnMore = () => {\n return(\n \n
\n \n {props.title}\n
\n \n\n {props.innerBody}\n
\n \n \n \n \n \n \n \n
\n );\n}\n\nexport default CampaignUseCaseDescriptionLearnMore;","import React from \"react\";\nimport Styles from \"./Style.module.css\";\n\nconst CampaignUseCaseLearnMore = () => {\n return(\n Explanation of Campaign objective or purpose.
\n- \n
- If the Campaign pertains to financial services, please include \"Direct Lending\" in the Campaign description to avoid failure or rejection of this Campaign. \n
Successful Example:
\n\"This Campaign sends OTP for MFA challenges to login to an online portal to make changes to a user profile for security purposes. Customer confirms with an SMS when profile changes are made.\"\n
(Campaign description matches sample message and sample message)
\n \nFailure Example:
\n\"This Campaign sends appointment information and confirmations to customer\"
\n\n \n \n \n \n \n \n
\n );\n}\n\nexport default CampaignUseCaseLearnMore;","import {\n Backdrop, CircularProgress,\n FormControl,\n FormHelperText,\n InputBase,\n makeStyles,\n MenuItem,\n Select,\n withStyles\n} from \"@material-ui/core\";\nimport React from \"react\";\nimport A2pLearnMore from \"../a2pLearnMore\";\nimport CampaignUseCaseDescriptionLearnMore from \"../a2pLearnMore/CampaignUseCaseDescriptionLearnMore\";\nimport CampaignUseCaseLearnMore from \"../a2pLearnMore/CampaignUseCaseLearnMore\";\nimport Styles from \"./Styles.module.css\";\n\nconst CustomInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n minHeight: \"200px !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n },\n}))(InputBase);\n\nconst BootstrapInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n },\n },\n input: {\n fontSize: \"14px !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n color: \"#707070 !important\",\n border: \"1px solid #ced4da !important\",\n padding: \"10px 26px 10px 12px !important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n borderRadius: 4\n },\n },\n}))(InputBase);\n\nconst useStyles = makeStyles((theme) => ({\n backdrop: {\n zIndex: theme.zIndex.drawer + 1,\n color: \"#fff\",\n },\n}));\n\nconst CampaignDetails = ({ inputScrollToViewRef, formData, callback, errorCallback, a2pDlcError, campaignUseCase, loading, a2pDlcFeedBacks }) => {\n const classes = useStyles();\n\n const handleFormDataChange = (name, value) => {\n if (name === \"useCase\"){\n if (value.trim() === \"\"){\n errorCallback(\"useCase\",\"Campaign Use Case is required!\");\n }else{\n errorCallback(\"useCase\",\"\");\n }\n }else if (name === \"useCaseDescription\"){\n if (value.trim() === \"\"){\n errorCallback(\"useCaseDescription\",\"Campaign Use Case Description is required!\");\n }else if(value.length < 40 || value.length > 4096){\n errorCallback(\"useCaseDescription\",\"Campaign Use Case Description can not be less than 40 characters and more than 4096 characters!\");\n }else {\n errorCallback(\"useCaseDescription\",\"\");\n }\n }\n callback(name, value);\n };\n\n const renderCampaignUseCaseListOptions = () => {\n const item = [];\n for(let i=0;iUse case that most closely resembles your campaign.
\nSuccessful Example:
\n\n 2FA use case is selected for any authentication or account verification such as OTP.\n
(Use case matches campaign description and sample messages.)
\n \nFailure Example:
\n\n Higher Education is selected for any authentication or account verification such as OTP.\n
(Use case would not match intended use, campaign will be rejected.)
\n \n{campaignUseCase[i].name}
\n );\n }\n return item;\n };\n\n const renderErrorMessage = (fieldName) => {\n return \n \n \n
\n );\n}\n\nexport default CampaignDetails;","import React from \"react\";\nimport Styles from \"./Style.module.css\";\n\nconst SampleMessagesLearnMore = () => {\n return(\n \n
\n Read before answering questions:
\nBefore the phone companies are willing to approve your messaging campaigns they need to review some examples of the types of messages you intend to send. Complete the info below.
\n\n
\n \n inputScrollToViewRef.current[0] = el} className={Styles.formControl}>\n \n \n Campaign Use Case\n *\n \n {\n A2pLearnMore({\n title: \"Campaign Use Case\",\n innerBody: { handleFormDataChange(\"useCase\", e.target.value) }}\n input={ \n inputScrollToViewRef.current[1] = el} className={Styles.formControl}>\n \n \n Campaign Use Case Description\n *\n \n {\n A2pLearnMore({\n title: \"Campaign Use Case Description\",\n innerBody: {handleFormDataChange(\"useCaseDescription\", e.target.value)}}\n multiline\n />\n {renderErrorMessage(\"useCaseDescription\")}\n Min length: 40 characters. Max length: 4096 characters.\n \n
\n \n \n \n \n \n \n \n
\n );\n}\n\nexport default SampleMessagesLearnMore;","import { Box, Button, Checkbox, FormControl, FormControlLabel, FormHelperText, InputBase, withStyles } from \"@material-ui/core\";\nimport React from \"react\";\nimport A2pLearnMore from \"../a2pLearnMore\";\nimport SampleMessagesLearnMore from \"../a2pLearnMore/SampleMessagesLearnMore\";\nimport Styles from \"./Styles.module.css\";\n\nconst CustomInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n minHeight: \"200px !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n },\n}))(InputBase);\n\nconst CustomInputTwo = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n },\n}))(InputBase);\n\nconst SampleMessages = ({ inputScrollToViewRef, formData, callback, errorCallback, a2pDlcError, a2pDlcFeedBacks, showPreview, setIsPreviewed, isPreviewed }) => {\n \n const handleFormDataChange = (name, value) => {\n\n if (isPreviewed) {\n setIsPreviewed(false);\n }\n\n if (name === \"senderIdentification1\"){\n if (value.trim() === \"\"){\n errorCallback(\"senderIdentification1\",\"Sender Identification is required!\");\n }\n }\n if(name===\"sampleMessage1\"){\n if (value.trim() === \"\"){\n errorCallback(\"sampleMessage1\",\"Sample message is required!\");\n }else if(value.length < 20 || value.length > 1024){\n errorCallback(\"sampleMessage1\",\"Sample Message 1 can not be less than 20 characters and more than 1024 characters!\");\n }else {\n errorCallback(\"sampleMessage1\",\"\");\n \n }\n }\n \n if (name === \"optOutLanguage1\"){\n if (value.trim() === \"\"){\n errorCallback(\"optOutLanguage1\",\"Opt-out Language is required!\");\n }\n }\n \n\n if (name === \"senderIdentification2\"){\n if (value.trim() === \"\"){\n errorCallback(\"senderIdentification2\",\"Sender Identification is required!\");\n \n }\n }\n if(name===\"sampleMessage2\"){\n if (value.trim() === \"\"){\n errorCallback(\"sampleMessage2\",\"Sample message is required!\");\n }else if(value.length < 20 || value.length > 1024){\n errorCallback(\"sampleMessage2\",\"Sample Message 1 can not be less than 20 characters and more than 1024 characters!\");\n }else {\n errorCallback(\"sampleMessage2\",\"\");\n \n }\n }\n\n if (name === \"optOutLanguage2\"){\n if (value.trim() === \"\"){\n errorCallback(\"optOutLanguage2\",\"Opt-out Language is required!\");\n }\n }\n\n\n if (name === \"hasEmbeddedLinks\"){\n if (value){\n value = \"TRUE\";\n }else {\n value = \"FALSE\";\n }\n }\n\n if (name === \"hasEmbeddedPhone\"){\n if (value){\n value = \"TRUE\";\n }else {\n value = \"FALSE\";\n }\n }\n\n callback(name, value);\n };\n\n const renderErrorMessage = (fieldName) => {\n return Sample messages should reflect actual messages to be sent under campaign.
\n- \n
- Do not use placeholder text for your sample messages \n
- Use brackets to indicate templated fields in sample message \n
- Consistency in sample message, use case, and campaign description \n
Successful Example:
\n\"ACME 2FA Notice: Here is your one time password: 1234Call [phone-number] to report if this request was not made by you.\"
\nFailure Example:
\n\"You have an upcoming appointment\"\n
(Opt-out is not provided, campaign will be rejected.)
\n \n\n
\n );\n}\n\nexport default SampleMessages;","import React from \"react\";\nimport Styles from \"./Style.module.css\";\n\nconst MessageFlowLearnMore = () => {\n return(\n \n
\n Read before answering questions:
\nBefore the phone companies are willing to approve your messaging campaigns they need to review some examples of the types of messages you intend to send. Complete the info below.
\n\n
\n \n\n inputScrollToViewRef.current[0] = el} className={Styles.formControl}>\n \n \n Sample Message #1: (provide an example below)\n {/* * */}\n \n \n {\n // A2pSuggestion({\n // suggestionTitle: \"Sample Message Suggestions\",\n // suggestions: CODE_WISE_DATA(formData.useCase).SAMPLE_MESSAGE,\n // onChange: (value) => {\n // handleFormDataChange(\"sampleMessage1\", value)\n // }\n // });\n\n A2pLearnMore({\n title: \"Sample messages\",\n innerBody:
\n \n Sender Identification (this section is pre-populated and will be added to the beginning of your message)\n *\n \n{handleFormDataChange(\"senderIdentification1\", e.target.value)}}\n />\n \n
\n \n Add your Sample message below:\n *\n \n\n{handleFormDataChange(\"sampleMessage1\", e.target.value)}}\n multiline\n />\n {renderErrorMessage(\"sampleMessage1\")}\n Min length: 20 characters. Max length: 1024 characters.\n
\n \n Opt-out Language(this section is pre-populated and will be added to the end of your message)\n *\n \n\n{handleFormDataChange(\"optOutLanguage1\", e.target.value)}}\n readOnly\n />\n\n \n\n \n\n
\n\n inputScrollToViewRef.current[1] = el} className={Styles.formControl}>\n \n \n Sample Message #2:(provide an example below)\n {/* * */}\n \n {\n // A2pSuggestion({\n // suggestionTitle: \"Sample Message Suggestions\",\n // suggestions: CODE_WISE_DATA(formData.useCase).SAMPLE_MESSAGE,\n // onChange: (value) => {\n // handleFormDataChange(\"sampleMessage2\", value)\n // }\n // });\n\n A2pLearnMore({\n title: \"Sample messages\",\n innerBody:
\n \n Sender Identification (this section is pre-populated and will be added to the beginning of your message)\n *\n \n{handleFormDataChange(\"senderIdentification2\", e.target.value)}}\n \n />\n {renderErrorMessage(\"senderIdentification2\")}\n
\n\n \n Add your Sample message below:\n *\n \n\n{handleFormDataChange(\"sampleMessage2\", e.target.value)}}\n multiline\n />\n {renderErrorMessage(\"sampleMessage2\")}\n Min length: 20 characters. Max length: 1024 characters.\n\n
\n \n Opt-out Language(this section is pre-populated and will be added to the end of your message)\n *\n \n\n{handleFormDataChange(\"optOutLanguage2\", e.target.value)}}\n readOnly\n />\n \n {/* {renderErrorMessage(\"sampleMessage2\")}\n Min length: 20 characters. Max length: 1024 characters. */}\n \n
\n \n \n Sender Identification (this section is pre-populated and will be added to the beginning of your message)\n *\n \n
\n \n Add your Sample message below:\n *\n \n\n
\n \n Opt-out Language(this section is pre-populated and will be added to the end of your message)\n *\n \n\n
\n\n
\n \n Sender Identification (this section is pre-populated and will be added to the beginning of your message)\n *\n \n
\n\n \n Add your Sample message below:\n *\n \n\n
\n \n Opt-out Language(this section is pre-populated and will be added to the end of your message)\n *\n \n\n
\n \n {handleFormDataChange(\"hasEmbeddedLinks\", e.target.checked)}}\n checked={formData.hasEmbeddedLinks === \"TRUE\"}\n />\n }\n label=\"The message will include an embedded link\"\n />\n {handleFormDataChange(\"hasEmbeddedPhone\", e.target.checked)}}\n checked={formData.hasEmbeddedPhone === \"TRUE\"}\n />\n }\n label=\"The messages will include phone numbers\"\n />\n *If there is any chance your messages will include links or phone numbers we recommend you check these boxes.\n \n \n \n \n
\n \n Notes:\n \n
\n To be in compliance with A2P/10DLC the first message you send a contact must include sender identification and opt-out language.
\n\nSender identification identifies who you are and the name of your company. This will appear at the beginning of your message.
\n\nOpt-out language is text you add to the end of your message that tells contacts how to unsubscribe from further texts.
\n\nIf this is missing your registration will get rejected! \n To ensure compliance we'll automatically add these required elements to the sample messages you provide.
\n\n**If your messages include an embedded link or phone number be sure to check the appropriate boxes. If you check these boxes make sure your sample messages include a link and/or phone number as well. (DO NOT USE LINK SHORTENERS)
\n \n\n \n \n \n \n \n \n
\n );\n}\n\nexport default MessageFlowLearnMore;","const icons = {\n success: ,\n failed: ,\n alert: ,\n url: ,\n info: \n};\n\nexport default icons;","import { FormControl, FormHelperText, InputBase, withStyles } from \"@material-ui/core\";\nimport React from \"react\";\nimport A2pLearnMore from \"../a2pLearnMore\";\nimport MessageFlowLearnMore from \"../a2pLearnMore/MessageFlowLearnMore\";\nimport Icons from \"./Icons\";\nimport Styles from \"./Styles.module.css\";\n\nconst CustomInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n minHeight: \"200px !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n },\n}))(InputBase);\n\nconst EndUserConsent = ({ inputScrollToViewRef, formData, callback, errorCallback, a2pDlcError, a2pDlcFeedBacks }) => {\n const handleFormDataChange = (name, value) => {\n if (name === \"messageFlow\"){\n if (value.trim() === \"\"){\n errorCallback(\"messageFlow\",\"Message Flow is required!\");\n }else if(value.length < 40 || value.length > 2084){\n errorCallback(\"messageFlow\",\"Message Flow can not be less than 40 characters and more than 2084 characters!\");\n }else {\n errorCallback(\"messageFlow\",\"\");\n }\n }\n\n if(name === \"optOutKeywords\"){\n if (value.trim() === \"\"){\n errorCallback(\"messageFlow\",\"Message Flow is required!\");\n }else if (value.split(\",\").length > 0){\n const helperKeywordArray = value.split(\",\");\n\n helperKeywordArray.forEach((keyword)=>{\n let index = keyword.indexOf(\" \");\n\n if(keyword === \"\"){\n errorCallback(\"optOutKeywords\",\"Remove trailing comma from the Opt-out keywords!\");\n }else if (keyword.length > 255){\n errorCallback(\"optOutKeywords\",\"Each Opt-out keyword must be less then 255!\");\n }else if (index >= 0){\n errorCallback(\"optOutKeywords\",\"Opt-out Keyword cannot contain white-space!\");\n }else if(keyword.includes('_') || keyword.includes('-')){\n errorCallback(\"optOutKeywords\",\"Opt-out Keyword must contain either alphanumeric or accented characters!\");\n }else {\n errorCallback(\"optOutKeywords\",\"\");\n }\n });\n }else {\n errorCallback(\"optOutKeywords\",\"\");\n }\n }\n\n if (name === \"optOutMessage\"){\n if (value.trim() === \"\"){\n errorCallback(\"optOutMessage\",\"Opt-out Message is required!\");\n }else if(value.length < 20 || value.length > 320){\n errorCallback(\"optOutMessage\",\"Opt-out Message can not be less than 20 characters and more than 320 characters!\");\n }else {\n errorCallback(\"optOutMessage\",\"\");\n }\n }\n\n if(name === \"helpKeywords\"){\n if (value.trim() === \"\"){\n errorCallback(\"helpKeywords\",\"Help is required!\");\n }else if (value.split(\",\").length > 0){\n const helperKeywordArray = value.split(\",\");\n\n helperKeywordArray.forEach((keyword)=>{\n let index = keyword.indexOf(\" \");\n\n if(keyword === \"\"){\n errorCallback(\"helpKeywords\",\"Remove trailing comma from the Help keywords!\");\n }else if (keyword.length > 255){\n errorCallback(\"helpKeywords\",\"Each Help keyword must be less then 255!\");\n }else if (index >= 0){\n errorCallback(\"helpKeywords\",\"Help Keyword cannot contain white-space!\");\n }else if(keyword.includes('_') || keyword.includes('-')){\n errorCallback(\"helpKeywords\",\"Help Keyword must contain either alphanumeric or accented characters!\");\n }else {\n errorCallback(\"helpKeywords\",\"\");\n }\n });\n }else {\n errorCallback(\"helpKeywords\",\"\");\n }\n }\n\n if (name === \"helpMessage\"){\n if (value.trim() === \"\"){\n errorCallback(\"helpMessage\",\"Help Message is required!\");\n }else if(value.length < 20 || value.length > 320){\n errorCallback(\"helpMessage\",\"Help Message can not be less than 20 characters and more than 320 characters!\");\n }else {\n errorCallback(\"helpMessage\",\"\");\n }\n }\n\n callback(name, value);\n };\n\n const renderErrorMessage = (fieldName) => {\n return \n This field should describe how and when consumers opt-in to the campaign, therefore giving consent to the sender to receive their messages. The call-to-action must be explicitly clear and inform consumers of the nature of the program. If multiple opt-in methods can be used for the same, list them all.\n
\n- \n
- Provide website where opt-in occurs. \n
- List all opt-in methods. \n
- Include an opt-in message if users can text. \n
- If a website is provided, it must be accessible with privacy policy and terms. \n
- If opt-in occurs behind a gated login or on paper, provide a hosted link of a screenshot or document of the opt-in. \n
Successful Example:
\n\"Customers provide opt-in specifically when enrolling into our website, or in person by requesting SMS capabilities within the store. Opt-in during website is a self-service process and occurs at acme.com/signup. By submitting, you authorize ACME to send text messages with offers and other information. Message/data rates apply. Consent is not a condition of purchase. [Link to terms and conditions].\"\n
\nFailure Example:
\n\n \"Customers sign up\"\n
(Where and how the customer provides opt-in is unclear, campaign will be rejected.)
\n \n\n
\n );\n}\n\nexport default EndUserConsent;","import React from \"react\";\nimport Styles from \"./Styles.module.css\";\n\nconst loadingGifImg = \"https://d24gujj67p1uc1.cloudfront.net/asset/images/releases/1.0.0/loadr.gif\";\n\nconst Processing = ({ ...rest }) => {\n return(\n \n
\n Read before answering questions:
\nBefore the phone companies are willing to approve your messaging campaigns they need to review some examples of the types of messages you intend to send. Complete the info below.
\n\n
\n \n inputScrollToViewRef.current[0] = el} className={Styles.formControl}>\n \n \n How do end users consent to receive messages from you?\n *\n \n {\n // A2pSuggestion({\n // suggestionTitle: \"Message Flow Suggestions\",\n // suggestions: CODE_WISE_DATA(formData.useCase).MESSAGE_FLOW,\n // onChange: (value) => {\n // handleFormDataChange(\"messageFlow\", value)\n // }\n // });\n\n A2pLearnMore({\n title: \"How do end-users consent to receive messages?\",\n innerBody: {handleFormDataChange(\"messageFlow\", e.target.value)}}\n multiline\n />\n {renderErrorMessage(\"messageFlow\")}\n \n This field should describe how end users opt-in to the campaign, therefore giving consent to the sender to receive their messages. If multiple opt-in methods can be used for the same campaign, they must all be listed\n \n \n {/* inputScrollToViewRef.current[1] = el} className={Styles.formControl}>*/}\n {/* */}\n {/* Opt-out Keywords*/}\n {/* **/}\n {/* */}\n {/* {handleFormDataChange(\"optOutKeywords\", e.target.value)}}*/}\n {/* multiline*/}\n {/* />*/}\n {/* {renderErrorMessage(\"optOutKeywords\")}*/}\n {/* Opt-out keywords are keywords your contacts can text you to automatically opt-out to receive messages.We recommend using the examples we provide above, but you can also add your own.*/}\n {/* Max length: 255 characters.*/}\n {/* */}\n {/* inputScrollToViewRef.current[2] = el} className={Styles.formControl}>*/}\n {/* */}\n {/* Opt-out Message*/}\n {/* **/}\n {/* */}\n {/* {handleFormDataChange(\"optOutMessage\", e.target.value)}}*/}\n {/* multiline*/}\n {/* />*/}\n {/* {renderErrorMessage(\"optOutMessage\")}*/}\n {/* Min length: 20 characters. Max length: 320 characters.*/}\n {/* */}\n {/* inputScrollToViewRef.current[3] = el} className={Styles.formControl}>*/}\n {/* */}\n {/* Help Keywords*/}\n {/* **/}\n {/* */}\n {/* {handleFormDataChange(\"helpKeywords\", e.target.value)}}*/}\n {/* multiline*/}\n {/* />*/}\n {/* {renderErrorMessage(\"helpKeywords\")}*/}\n {/* Help keywords are keywords your contacts can text you to automatically to get any inquiry or help via messages.We recommend using the examples we provide above, but you can also add your own.*/}\n {/* Max length: 255 characters.*/}\n {/* */}\n {/* inputScrollToViewRef.current[4] = el} className={Styles.formControl}>*/}\n {/* */}\n {/* Help Message*/}\n {/* **/}\n {/* */}\n {/* {handleFormDataChange(\"helpMessage\", e.target.value)}}*/}\n {/* multiline*/}\n {/* />*/}\n {/* {renderErrorMessage(\"helpMessage\")}*/}\n {/* Min length: 20 characters. Max length: 320 characters.*/}\n {/* */}\n
\n \n
\n\n \n {Icons.info}\n
\n \n Did you know?
\n Most Campaigns that fail or are rejected are due to incorrect information being submitted in the \"How do end-users consent to receive messages?\" section below.\n
\n \n Most Campaigns that fail or are rejected are due to incorrect information being submitted in the \"How do end-users consent to receive messages?\" section below.\n
10DLC regulations require that all contacts opt-in to receive messages from your company. The phone companies are looking to see the exact method you use to obtain this consent. The rules and the language they are looking for are very specific. To make this easier we recommend using our pre-filled answer below. We've also included a link to a pre-built, customized opt-in form for your business.
(Recommended - use our pre-filled answer)
\n \n
\n );\n};\n\nexport default Processing;","import React, { Fragment } from \"react\";\nimport {\n IconButton,\n Typography\n} from \"@material-ui/core\";\nimport Styles from \"./ResponseV2.module.css\";\nimport CloseIcon from \"@material-ui/icons/Close\";\n\nconst ResponseV2 = ({ response, hasError, hasSuccess, handleClose }) => {\n\n return (\n \n Processing Registration\n
\n\n Your Submission has been received and we are processing your registration.\n This process can make several minutes to complete. Please! Do not close the window.\n
\n\n A2P/10DLC Campaign Registration \n {\n hasSuccess !== \"\" &&\n handleClose({onlyClose: true, redirect: true})}>\n \n }\n
\n\n \n
\n \n
\n \n { hasError === \"\" ?\n
\n Thank you for submitting your campaign registration!
:\n {hasError}
\n }\n {\n hasSuccess !== \"\" &&\n Your registration is currently pending approval.
\n }\n \n {\n hasSuccess !== \"\" ?\n \n :\n
\n How to check your registration status:
\n Click Settings on the left sidebar then scroll down to Trust Center
\n handleClose({onlyClose: true, redirect: false})}>Try again
\n }\n \n Note: A2P/10DLC registration is an industry wide regulation and is not unique to our platform. All submissions are handled directly by the phone companies and we have no involvement in the registration process.We simply submit the form on your behalf.\n
\n \n
\n );\n },\n closeOnClickOutside: props.closeOnClickOutside,\n overlayClassName: Styles.overlay\n })\n )\n}\nexport default App;","import { confirmAlert } from \"react-confirm-alert\";\nimport \"react-confirm-alert/src/react-confirm-alert.css\";\nimport Styles from \"./PreviewSampleMessage.module.css\";\nimport { Box, Button, Paper, Typography, withStyles } from \"@material-ui/core\";\n\nconst SampleMessage = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n width:\"100%\",\n fontSize: \"14px !important\",\n height: \"auto !important\",\n minHeight:\"100px !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n lineBreak:\"anywhere\"\n },\n}))(Box);\n\nconst App = (props) => {\n return (\n confirmAlert({\n customUI: ({ onClose }) => {\n props.setIsPreviewed(true);\n \n return (\n \n Please preview your sample messages and make any necessary edits before moving on to the next step.\n \n
\n \n This is what your sample messages will look like when we combine the
Sender Identification + Your Message + the Opt-Out Language. \n
\n Sender Identification + Your Message + the Opt-Out Language.
\n
\n \n \n {props.formData.senderIdentification1}\n
\n {props.formData.sampleMessage1}\n
\n {props.formData.optOutLanguage1}\n \n
\n\n {props.formData.senderIdentification2}\n
\n {props.formData.sampleMessage2}\n
\n {props.formData.optOutLanguage2}\n \n
\n Sample Message #1
\n\n {props.formData.sampleMessage1}\n
\n {props.formData.optOutLanguage1}\n
\n
Sample Message #2
\n\n {props.formData.sampleMessage2}\n
\n {props.formData.optOutLanguage2}\n
\n \n
\n \n {\n steps.map((step, index) => (\n
\n\n \n {(index + 1)}. {step.label}\n
\n ))\n }\n \n
\n\n \n
\n \n
\n {getStepTitle(activeStep)}
\n\n \n \n
\n \n {\n isFeedBackAvailable &&\n
\n \n {Icons.alert} This campaign was rejected upon review\n
\n }\n {/*{*/}\n {/* isFeedBackAvailable &&*/}\n {/* - */}\n {/* {generateOtherFeedBacks(otherFeedBacks)}*/}\n {/*
\n {\n activeStep !== 0 &&\n (\n \n )\n }\n {/* */}\n\n \n
\n \n
\n );\n },\n closeOnClickOutside: closeOnClickOutside,\n overlayClassName: Styles.overlay\n })\n )\n}\nexport default RecheckAlert;","const icon = {\n google: (\n \n {title}\n
\n \n {description}\n Would you still like to proceed?\n
\n \n {handleSubmit(onClose)}} className={`${Styles.button} ${Styles.submitButton}`}>\n {submitText}\n \n { onCloseClick(); onClose();}} className={`${Styles.button} ${Styles.cancelButton}`}>{cancelText}\n
\n \n \n
\n \n )\n}\n\nIndex.propTypes = {\n width: PropTypes.number.isRequired,\n text: PropTypes.string,\n}\n\nexport default Index\n","import React from \"react\"\nimport { Typography } from \"@material-ui/core\"\nimport icon from \"./icon\"\nimport Styles from \"./ValidationResultModal.module.css\"\nimport StripedProgress from \"./StripedProgress\"\n\nconst formatPhoneNumber = (phoneNumberString) => {\n if (!phoneNumberString) {\n return \"N/A\"\n }\n\n if (phoneNumberString.length < 11) {\n phoneNumberString = \"1\" + phoneNumberString\n }\n return phoneNumberString\n .replace(/\\D+/g, \"\")\n .replace(/(\\d{1})(\\d{3})(\\d{3})(\\d{4})/, \"+$1 ($2) $3-$4\")\n}\n\nexport const ValidationResultModal = (props) => {\n const [REQUEST_DONE, REQUEST_FAILED] = [\"REQUEST_DONE\", \"REQUEST_FAILED\"]\n const [\n VALID,\n INVALID,\n DO_NOT_CALL,\n VERIFIED_OK,\n TRACED,\n TRACE_FAILED,\n ] = [\n \"VALID\",\n \"INVALID\",\n \"DO_NOT_CALL\",\n \"VERIFIED_OK\",\n \"PENDING\",\n \"TRACED\",\n \"TRACE_FAILED\",\n ]\n\n const renderStatusChip = (status) => {\n switch (status) {\n case VALID:\n return (\n VALID\n )\n case INVALID:\n return (\n \n INVALID\n \n )\n case VERIFIED_OK:\n return (\n \n VERIFIED OK\n \n )\n case DO_NOT_CALL:\n return (\n \n DO NOT CALL\n \n )\n case TRACED:\n return (\n TRACED\n )\n case TRACE_FAILED:\n return (\n \n TRACE FAILED\n \n )\n default:\n return {status}\n }\n }\n \n const parseData = (source) => {\n return props.data.data.find((i) => i.source === source)\n }\n\n if (props.submitting) {\n return (\n {text}
\n \n
\n )\n }\n\n return (\n \n RESULTS\n
\n \n
\n \n \n Your result will appear here when ready\n \n
\n {icon.google}
\n \n \n
\n \n
\n )\n}\n","import {\n Box,\n Button,\n Checkbox,\n CircularProgress,\n FormControl,\n FormControlLabel,\n makeStyles,\n Modal,\n Paper,\n Radio,\n Typography\n} from \"@material-ui/core\";\nimport { Close as CloseIcon } from \"@material-ui/icons\";\nimport React, { Fragment, useEffect, useState } from \"react\";\nimport { connect } from \"react-redux\";\nimport Utils from \"../../../helpers/Utils\";\nimport { carrierLookupSingleApi, getCarrierLookupCreditSettingsApi } from \"../assets/ApiList\";\nimport { ACTION, LOOKUP_TYPE, REQUEST_MODULE, SEARCH_CATEGORY } from \"../Constants\";\nimport { updateCarrierLookupPrices } from \"../redux/enhancedDataActions\";\nimport Styles from \"./EnhanceData.module.css\";\nimport RecheckAlert from \"./RecheckAlert\";\nimport { ValidationResultModal } from \"./ValidationResultModal\";\n\nconst useStyles = makeStyles((theme) => {\n return {\n root: {\n \"&.MuiButtonBase-root\": {\n width: \"190px\",\n },\n \"&.MuiButton-root\": {\n backgroundColor: \"#008945\",\n padding: \"10px 20px\",\n borderRadius: \"4px\",\n },\n \"&.MuiButton-text\": {\n color: \"grey\",\n },\n \"&.MuiButton-contained\": {\n color: \"white\",\n },\n \"&.MuiButton-outlined\": {\n color: \"brown\",\n },\n },\n \n }\n});\n\nconst cleanNumber = (number) => {\n try{\n if(isNaN(number)){\n return \"x.xx\";\n }\n\n if (typeof number === \"string\") {\n number = parseFloat(number);\n }\n\n const parts = number.toString().split('.');\n if (parts.length === 1) {\n return number.toFixed(2).replace(/\\.0*$/, '') + '.00';\n }\n const decimalPart = parts[1].length < 2 ? parts[1] + '0' : parts[1];\n return `${parts[0]}.${decimalPart}`;\n }catch(err){\n return \"x.xx\";\n }\n};\n\nconst padZero = (value) => {\n return value < 10 ? `0${value}` : value;\n};\n\nconst calculateDateDifference = (startDate, endDate) => {\n const startTime = startDate.getTime();\n const endTime = endDate.getTime();\n const timeDiff = endTime - startTime;\n return Math.floor(timeDiff / (1000 * 60 * 60 * 24));\n}\n\nconst EnhancedData = ({ isOpen, onClose, data, carrierLookupPrices, updateCarrierLookupPrices }) => {\n const classes = useStyles();\n const LOOKUP_CREDIT_TYPE_MAP = {\n CARRIER_LOOKUP: 64,\n EMAIL_LOOKUP: 65,\n DNC_LOOKUP: 66,\n SKIP_TRACING_LOOKUP: 67\n };\n const [STATUS_VALID, STATUS_INVALID, STATUS_DO_NOT_CALL, STATUS_VERIFIED_OK, STATUS_TRACED] = [\"VALID\", \"INVALID\", \"DO_NOT_CALL\", \"VERIFIED_OK\", \"PENDING\", \"TRACED\", \"TRACE_FAILED\"];\n const [submitting, setSubmitting] = useState(false);\n const [loading, setLoading] = useState(false);\n const [selectedLookupType, setSelectedLookupType] = useState([]);\n const [selectedSearchCategory, setSelectedSearchCategory] = useState([SEARCH_CATEGORY.HOUSE_CURRENT_OWNER]);\n const [selectedAction, setSelectedAction] = useState(ACTION.ADD_NEW_CONTACT);\n const [alreadyVerified, setAlreadyVerified] = useState({\n EMAIL_LOOKUP: false,\n CARRIER_LOOKUP: false,\n DNC_LOOKUP: false,\n SKIP_TRACING_LOOKUP: false,\n });\n const [lastVerifiedAt, setLastVerifiedAt] = useState({\n EMAIL_LOOKUP: null,\n CARRIER_LOOKUP: null,\n DNC_LOOKUP: null,\n SKIP_TRACING_LOOKUP: null,\n });\n const [showModalContent, setShowModalContent] = useState(true);\n const [showValidationContent,setShowValidationContent]=useState(false);\n const [resData,setResData]=useState(null);\n const [REQUEST_DONE] = [\"REQUEST_DONE\"];\n\n useEffect(() => {\n if (!carrierLookupPrices) {\n setLoading(true);\n getCarrierLookupCreditSettingsApi()\n .then((response)=>{\n if (response.data && response.data.status === \"success\") {\n if (response.data && response.data.data) {\n updateCarrierLookupPrices(response.data.data);\n }\n }\n }).catch((err)=>{\n updateCarrierLookupPrices(null);\n }).finally(()=>{\n setLoading(false);\n });\n }\n }, []);\n\n useEffect(()=>{\n if (data && data.contact_additional_informations){\n let preAlreadyVerified = {\n EMAIL_LOOKUP: false,\n CARRIER_LOOKUP: false,\n DNC_LOOKUP: false,\n SKIP_TRACING_LOOKUP: false,\n };\n\n let preLastVerifiedAt = {\n EMAIL_LOOKUP: null,\n CARRIER_LOOKUP: null,\n DNC_LOOKUP: null,\n SKIP_TRACING_LOOKUP: null,\n };\n\n if (data.contact_additional_informations.email_validation_status === STATUS_VALID ||\n data.contact_additional_informations.email_validation_status === STATUS_INVALID){\n preAlreadyVerified.EMAIL_LOOKUP = true;\n preLastVerifiedAt.EMAIL_LOOKUP = data.contact_additional_informations.email_validation_date;\n }\n\n if (data.contact_additional_informations.number_validation_status === STATUS_VALID ||\n data.contact_additional_informations.number_validation_status === STATUS_INVALID){\n preAlreadyVerified.CARRIER_LOOKUP = true;\n preLastVerifiedAt.CARRIER_LOOKUP = data.contact_additional_informations.number_validation_date;\n }\n\n if (data.contact_additional_informations.dnc_status === STATUS_VERIFIED_OK ||\n data.contact_additional_informations.dnc_status === STATUS_DO_NOT_CALL){\n preAlreadyVerified.DNC_LOOKUP = true;\n preLastVerifiedAt.DNC_LOOKUP = data.contact_additional_informations.dnc_validation_date;\n }\n\n if (data.contact_additional_informations.skip_trace_status === STATUS_TRACED){\n preAlreadyVerified.SKIP_TRACING_LOOKUP = true;\n preLastVerifiedAt.SKIP_TRACING_LOOKUP = data.contact_additional_informations.skip_trace_date;\n }\n\n setAlreadyVerified(preAlreadyVerified);\n setLastVerifiedAt(preLastVerifiedAt);\n }\n },[data]);\n\n const getRecheckAlertMessage = (lookupType) => {\n let fDate = lastVerifiedAt[lookupType];\n\n if (window.globalTimezoneConversionToDifferentTimezone){\n fDate = window.globalTimezoneConversionToDifferentTimezone(fDate,'UTC','','MM/DD/YYYY');\n }\n\n if (lookupType === LOOKUP_TYPE.EMAIL_LOOKUP){\n return {\n title: \"Notice - Email Validation\",\n description: `You previously validated this email address on ${fDate}.`,\n };\n }else if (lookupType === LOOKUP_TYPE.CARRIER_LOOKUP){\n return {\n title: \"Notice - Phone Validation\",\n description: `You previously validated this phone number on ${fDate}.`,\n };\n }else if (lookupType === LOOKUP_TYPE.DNC_LOOKUP){\n return {\n title: \"Notice - DNC Validation\",\n description: `You previously checked this number against the DNC on ${fDate}.`,\n };\n }else if (lookupType === LOOKUP_TYPE.SKIP_TRACING_LOOKUP){\n return {\n title: \"Notice - Skip Tracing\",\n description: `You previously skip-traced this address on ${fDate}.`,\n };\n }else {\n return {\n title: \"Invalid Selection\",\n description: \"\",\n };\n }\n };\n\n const getLookupPrice = (lookupType) => {\n try{\n if (carrierLookupPrices){\n let price = carrierLookupPrices.find((carrierLookupPrice)=>(carrierLookupPrice.type === LOOKUP_CREDIT_TYPE_MAP[lookupType]));\n if (price){\n return cleanNumber(price.value);\n }\n }\n return \"0.00\";\n }catch (err){\n return \"0.00\";\n }\n };\n\n const onLookupTypeChange = (lookupType, bypass=false) => {\n\n if (lastVerifiedAt[lookupType]){\n const today = new Date();\n const someDate = new Date(lastVerifiedAt[lookupType]);\n const differenceInDays = calculateDateDifference(someDate, today);\n if (alreadyVerified[lookupType] && differenceInDays <= 30 && !bypass && !selectedLookupType.includes(lookupType)){\n RecheckAlert({\n ...getRecheckAlertMessage(lookupType),\n onSubmit: () => {\n onLookupTypeChange(lookupType,true);\n }\n });\n return;\n }\n }\n\n let spSelectedLookupType = [...selectedLookupType];\n if (selectedLookupType.includes(lookupType)){\n let index = selectedLookupType.indexOf(lookupType);\n spSelectedLookupType.splice(index,1);\n setSelectedLookupType(spSelectedLookupType);\n }else {\n spSelectedLookupType.push(lookupType);\n setSelectedLookupType(spSelectedLookupType);\n }\n };\n\n const onSubmit = async () => {\n if (!selectedLookupType[0]){\n window.showNotification(\"ERROR\", \"Please select a lookup type\");\n return;\n }\n setShowValidationContent((prev)=>!prev)\n\n setSubmitting(true);\n if (data) {\n var element = document.getElementById(\"enhance-modal\");\n element.classList.add(\"d-none\");\n try {\n let payload = {\n lookupType: selectedLookupType,\n requestModule: data.requestModule,\n contact: { id: data.id },\n }\n\n if (selectedLookupType.includes(LOOKUP_TYPE.EMAIL_LOOKUP)) {\n payload.contact.email = data.email\n }\n\n if (\n selectedLookupType.includes(LOOKUP_TYPE.CARRIER_LOOKUP) ||\n selectedLookupType.includes(LOOKUP_TYPE.DNC_LOOKUP)\n ) {\n payload.contact.number = data.number\n }\n\n if (selectedLookupType.includes(LOOKUP_TYPE.SKIP_TRACING_LOOKUP)) {\n let addressLine1 = \"\"\n let addressLine2 = \"\"\n\n if (data.address) {\n addressLine1 = data.address\n }\n\n if (data.city) {\n addressLine2 += data.city\n }\n\n if (data.state) {\n if (addressLine2) {\n addressLine2 += \", \"\n }\n addressLine2 += data.state\n }\n\n if (data.zip) {\n if (addressLine2) {\n addressLine2 += \", \"\n }\n addressLine2 += data.zip\n }\n\n if (addressLine1) {\n payload.contact.addressLine1 = addressLine1\n }\n\n if (addressLine2) {\n payload.contact.addressLine2 = addressLine2\n }\n\n payload.searchCategory = selectedSearchCategory\n\n if (data.requestModule === REQUEST_MODULE.CONTACT) {\n payload.action = selectedAction\n }\n }\n const res = await carrierLookupSingleApi(payload)\n\n if (res.status === false && res.success === false) {\n window.showNotification(\n \"error\",\n res.message\n ? res.message\n : \"Failed to validate. Contact with administrator\"\n )\n } else {\n data.callback(res)\n // Response({\n // data: res,\n // source: data.requestModule,\n // })\n\n setResData(res)\n\n let preLastVerifiedAt = { ...lastVerifiedAt }\n let preAlreadyVerified = { ...alreadyVerified }\n\n const currentDate = new Date()\n const formattedDate = `${currentDate.getFullYear()}-${padZero(\n currentDate.getMonth() + 1\n )}-${padZero(currentDate.getDate())} ${padZero(\n currentDate.getHours()\n )}:${padZero(currentDate.getMinutes())}:${padZero(\n currentDate.getSeconds()\n )}`\n\n if (res[\"email-lookup-status\"] === REQUEST_DONE) {\n preLastVerifiedAt.EMAIL_LOOKUP = formattedDate\n preAlreadyVerified.EMAIL_LOOKUP = true\n }\n\n if (res[\"carrier-lookup-status\"] === REQUEST_DONE) {\n preLastVerifiedAt.CARRIER_LOOKUP = formattedDate\n preAlreadyVerified.CARRIER_LOOKUP = true\n }\n\n if (res[\"dnc-lookup-status\"] === REQUEST_DONE) {\n preLastVerifiedAt.DNC_LOOKUP = formattedDate\n preAlreadyVerified.DNC_LOOKUP = true\n }\n\n if (res[\"skip-trace-lookup-status\"] === REQUEST_DONE) {\n preLastVerifiedAt.SKIP_TRACING_LOOKUP = formattedDate\n preAlreadyVerified.SKIP_TRACING_LOOKUP = true\n }\n setLastVerifiedAt(preLastVerifiedAt)\n setAlreadyVerified(preAlreadyVerified)\n window.showNotification(\n \"success\",\n \"Contact validated successfully\"\n )\n }\n setSubmitting(false)\n setSelectedLookupType([])\n } catch (err) {\n setSubmitting(false)\n window.showNotification(\"error\", \"Unable to validate contact\")\n }\n } else {\n setSubmitting(false)\n window.showNotification(\"ERROR\", \"Please select a contact\")\n }\n };\n\n const toggleModalContent = () => {\n setShowModalContent((prev) => !prev)\n }\n\n return (\n <>\n \n
\n \n {(props.data[\"email-lookup-status\"] === REQUEST_DONE ||\n props.data[\"carrier-lookup-status\"] === REQUEST_DONE ||\n props.data[\"dnc-lookup-status\"] === REQUEST_DONE ||\n props.data[\"skip-trace-lookup-status\"] === REQUEST_DONE) && (\n
\n \n
\n )}\n Processing: 100% complete
\n\n RESULTS\n
\n \n
\n \n {props.data[\"email-lookup-status\"] === REQUEST_DONE &&\n parseData(props.source) && (\n
\n \n
\n )}\n \n
\n \n \n Email: {parseData(props.source).email}\n \n
\n\n \n \n {renderStatusChip(\n parseData(props.source)[\n \"email-validation-status\"\n ]\n )}\n \n
\n \n {props.data[\"carrier-lookup-status\"] === REQUEST_DONE &&\n parseData(props.source) && (\n
\n \n \n
\n )}\n \n
\n \n \n \n Number:\n {formatPhoneNumber(\n parseData(props.source).number\n )}\n \n \n
\n \n \n {\" \"}\n {renderStatusChip(\n parseData(props.source)[\n \"number-validation-status\"\n ]\n )}\n \n
\n \n {props.data[\"dnc-lookup-status\"] === REQUEST_DONE &&\n parseData(props.source) && (\n
\n \n
\n )}\n \n
\n \n \n \n DNC Status: {formatPhoneNumber(\n parseData(props.source).number\n )}\n \n \n
\n \n {renderStatusChip(\n parseData(props.source)[\"dnc-state\"]\n )}\n
\n \n {props.data[\"skip-trace-lookup-status\"] === REQUEST_DONE &&\n parseData(props.source) && (\n
\n \n SkipTrace: \n \n SkipTrace successful for the contact address\n \n
\n )}\n \n {(props.data[\"email-lookup-status\"] === REQUEST_FAILED ||\n props.data[\"carrier-lookup-status\"] === REQUEST_FAILED ||\n props.data[\"dnc-lookup-status\"] === REQUEST_FAILED ||\n props.data[\"skip-trace-lookup-status\"] === REQUEST_FAILED) && (\n
\n \n
\n )}\n Failed
\n\n RESULTS\n
\n \n {props.data[\"email-lookup-status\"] === REQUEST_FAILED &&\n parseData(props.source) &&\n parseData(props.source)[\"email-validation-status\"] && (\n
\n \n
\n )}\n\n {props.data[\"carrier-lookup-status\"] === REQUEST_FAILED &&\n parseData(props.source) && (\n \n \n \n Email:{parseData(props.source).email} (\n {props.data.error[\"email-lookup-error\"]\n ? props.data.error[\"email-lookup-error\"]\n : \"Email lookup failed\"}\n )\n \n \n
\n \n \n \n Number:{\" \"}\n {formatPhoneNumber(parseData(props.source).number)}{\" \"}\n (\n {props.data.error[\"carrier-lookup-error\"]\n ? props.data.error[\"carrier-lookup-error\"]\n : \"Number lookup failed\"}\n )\n \n \n
\n )}\n\n {props.data[\"dnc-lookup-status\"] === REQUEST_FAILED &&\n parseData(props.source) && (\n \n \n \n DNC Status: {\" \"}\n {formatPhoneNumber(parseData(props.source).number)}{\" \"}\n (\n {props.data.error[\"dnc-lookup-error\"]\n ? props.data.error[\"dnc-lookup-error\"]\n : \"Do-not-call status check failed\"}\n )\n \n \n
\n )}\n\n {props.data[\"skip-trace-lookup-status\"] ===\n REQUEST_FAILED && (\n \n \n \n SkipTrace:\n {props.data.error[\"skip-trace-lookup-error\"]\n ? props.data.error[\"skip-trace-lookup-error\"]\n : \"SkipTrace failed\"}\n \n \n
\n )}\n \n \n
\n \n {/*
\n {showValidationContent ? (\n <>\n */}\n {/* */}\n {/* Enhance Data*/}\n {/* */}\n {/*
*/}\n {!showValidationContent ? (\n <>\n \n \n {/*Enhance Data*/}\n \n
\n \n
\n \n ) : ''}\n {/**/}\n {/* */}\n {/* {showModalContent ? \"How does this work?\" : \"Hide\"}*/}\n {/* */}\n {/*
*/}\n \n \n Having accurate, up-to-date data is key to a successful\n outreach campaign.\n
\n Validate and append your data with a few clicks below.\n \n
\n )}\n \n Validate and append your data with a few clicks below.\n \n
\n \n {showModalContent ? \"How does this work?\" : \"Hide\"}\n \n
\n \n \n \n
\n \n {showModalContent ? (\n <>\n {loading && (\n \n \n \n What do you want to do with your skip traced\n data?\n \n \n (Select one that apply)\n \n \n {\n setSelectedAction(event.target.value)\n }}\n style={{ flexDirection: \"row\" }}\n >\n \n )} */}\n\n {selectedLookupType.includes(\n LOOKUP_TYPE.SKIP_TRACING_LOOKUP\n ) &&\n data.requestModule === REQUEST_MODULE.CONTACT && (\n <>\n \n \n How do you want to organize the skip traced\n data?\n \n \n (Select an option below)\n \n {\n setSelectedAction(event.target.value)\n }}\n >\n
\n \n
\n )}\n \n
\n {/* {selectedLookupType.includes(\n LOOKUP_TYPE.SKIP_TRACING_LOOKUP\n ) &&\n data.requestModule === REQUEST_MODULE.CONTACT && (\n \n \n Make a selection:\n \n \n (Choose all that apply)\n \n
\n\n \n \n {Utils.getAccountData(\"carrierLookup\") && (\n \n {\n onLookupTypeChange(\n LOOKUP_TYPE.EMAIL_LOOKUP\n )\n }}\n control={}\n label={`Validate Email Address ($${getLookupPrice(\n LOOKUP_TYPE.EMAIL_LOOKUP\n )})`}\n disabled={data && !data.email}\n />\n {\n onLookupTypeChange(\n LOOKUP_TYPE.CARRIER_LOOKUP\n )\n }}\n control={}\n label={`Validate Phone Number ($${getLookupPrice(\n LOOKUP_TYPE.CARRIER_LOOKUP\n )})`}\n disabled={data && !data.number}\n />\n \n )}\n {Utils.getAccountData(\"dnc\") && (\n {\n onLookupTypeChange(LOOKUP_TYPE.DNC_LOOKUP)\n }}\n control={}\n label={`Check Do-Not-Call(DNC) status ($${getLookupPrice(\n LOOKUP_TYPE.DNC_LOOKUP\n )})`}\n disabled={data && !data.number}\n />\n )}\n {Utils.getAccountData(\"skipTrace\") && (\n {\n onLookupTypeChange(\n LOOKUP_TYPE.SKIP_TRACING_LOOKUP\n )\n }}\n control={}\n label={`Skip Trace ($${getLookupPrice(\n LOOKUP_TYPE.SKIP_TRACING_LOOKUP\n )})`}\n disabled={\n (data && !data.address) ||\n (data && (!data.city || !data.state))\n }\n />\n )}\n \n\n {selectedLookupType.includes(\n LOOKUP_TYPE.SKIP_TRACING_LOOKUP\n ) && (\n
\n \n {\n setSelectedSearchCategory([\n event.target.value,\n ])\n }}\n style={{ flexDirection: \"row\" }}\n >\n
\n )}\n \n \n \n
\n \n Option 1: Create New Contact Records\n
\n\n If we find multiple contacts when\n running a skip trace we will create a\n new contact record for each of them in\n your CRM\n
\n\n Option 2: Merge Data into One Contact Record\n
\n\n If we find multiple phone numbers and\n email addresses when running a skip\n trace we will merge all the data into\n one contact record.\n
\nOption 3: Generate a Report
\n\n
\n \n This option will not create new contacts\n or add the info we find to an existing\n contact record.
\nWhen you skip trace an\n address we will generate a report.
(How\n to view the report: Click Enhance Data\n on the left sidebar->\n Skiptracing-> Results)
\n\n \n {submitting &&
\n \n ) : (\n \n
\n \n
\n Processing: 100% complete
\n\n
\n\n \n RESULTS\n
\n \n
\n \n
\n {icon.google}
\n \n
\n \n \n \n You can wait here or close the screen.\n \n
\n\n \n We'll notify you when your export is ready!\n \n
\n\n\n \n File Name : \n \n
\n \n \n
\n \n \n
\n \n
\n \n
\n Processing: 100% complete
\n\n
\n\n \n RESULTS\n
\n \n
\n \n
\n {icon.google}
\n \n
\n \n \n \n You can wait here or close the screen.\n \n
\n\n \n We'll notify you when your import is ready!\n \n
\n\n\n
\n \n \n
\n \n \n
\n {makeAddress()}
\n \n \n\n {(type_id === CustomFieldType.TEXT || type_id === CustomFieldType.PHONE) &&\n handleOnChange(e)} />\n }\n\n {type_id === CustomFieldType.MULTILINE_TEXT &&\n \n }\n\n {(type_id === CustomFieldType.NUMERIC || type_id === CustomFieldType.ZIP_CODE) &&\n handleOnChange(e)} />\n }\n\n {type_id === CustomFieldType.DATE &&\n handleOnChange(e)} />\n }\n\n {type_id === CustomFieldType.DATETIME &&\n handleOnChange(e)} />\n }\n\n {type_id === CustomFieldType.WEBSITE &&\n handleOnChange(e)} />\n }\n\n {type_id === CustomFieldType.CHECKBOX &&\n handleOnChange(e)}\n className=\"my-2\"\n />\n }\n
\n )\n }\n\n return null\n}","import React from \"react\";\nimport {EmptyScreenWrapper} from \"../GlobalAddDealModalStyles\";\n\nconst EmptyScreen = ({ text }) => {\n return(\n \n \n {data.default_values && Array.isArray(data.default_values) && data.default_values.map((each, each_index) => {\n let isChecked = _values.indexOf(each) !== -1 ? true : false\n return (\n \n
\n }\n\n {type_id === CustomFieldType.RADIO &&\n \n \n {data.default_values && Array.isArray(data.default_values) && data.default_values.map((each, each_index) => {\n return (\n \n
\n }\n\n {type_id === CustomFieldType.SELECT &&\n \n
\n );\n}\n\nexport default Loading;","import React from \"react\";\nimport { Divider, Typography, styled } from \"@material-ui/core\";\n\nconst WrapperStyle = styled(\"div\")(({theme}) => ({\n display: \"flex\", \n flex: 1, \n alignItems: \"center\",\n \"& .title\": {\n fontSize: 16,\n fontWeight: 600,\n color: \"var(--dark_blue)\",\n },\n \"& .divider\": {\n flex: 1, \n marginLeft: theme.spacing(1),\n marginBottom:\"0px !important\",\n paddingBottom:\"0px !important\"\n }\n}));\n\n\n\nconst CustomTitleAddDeal = ({ title = \"Default Title\" }) => {\n return (\n \n \n
\n {item?.user?.full_name || \" \"}\n \n \n \n )}\n />\n \n $\n {\n handleChangeFormData(\"deal_value\", e.target.value);\n }}\n />\n
\n\n {\n errors.deal_value &&\n \n {\n handleDeleteProduct(index);\n }}\n >\n
\n {\n errors.user_contact_stage_products[index]?.value &&\n \n $\n {\n handleProductChange(index, \"value\", e.target.value);\n }}\n />\n
\n {\n !dealMarkWin &&\n \n \n \n {getContactLabel(selectedContact.fullName, selectedContact.number, selectedContact.email)} \n \n
\n )}\n \n \n
\n {\n selectedContact && (\n {isEdit ? (\n \n
\n )}\n Edit Deal
\n ) : (\n\n {\" \"}\n Add a new Deal\n
\n\n\n
\n \n \n $\n \n {\n handleChangeFormData(\"deal_value\", e.target.value);\n }}\n />\n
\n\n {errors.deal_value && (\n \n {\n handleDeleteProduct(index);\n }}\n >\n
\n {errors.user_contact_stage_products[index]?.value && (\n \n \n $\n \n {\n handleProductChange(index, \"value\", e.target.value);\n }}\n />\n
\n {!dealMarkWin && (\n \n
\n\n \n \n
\n {\n selectedContact && (\n {isEdit ? (\n \n
\n )} \n \n
\n \n ) : (\n \n \n
\n Edit Deal
\n\n \n
\n \n {\" \"}\n Add a new Deal\n
\n\n \n {getContactLabel(selectedContact.fullName,selectedContact.number,selectedContact.email)} \n \n
\n )}\n \n \n Cancel\n \n\n \n \n {isSubmitting ? \"Saving...\" : \"Save\"}\n \n \n \n
\n \n Create New Power Dialer List \n \n \n
\n\n \n
\n \n \n \n List Name\n *\n \n {handleFormDataChange('name', e.target.value)}}\n />\n {renderErrorMessage('name')}\n \n\n \n \n Which number to call from?\n *\n \n\n { handleFormDataChange('virtual_number_id', e.target.value) }}\n input={ \n\n \n \n Description\n \n {handleFormDataChange('description', e.target.value)}}\n />\n {renderErrorMessage('description')}\n \n\n \n \n Copy Settings from\n \n\n {handleFormDataChange('copy_settings_id', e.target.value)}}\n input={ \n
\n\n \n \n \n
\n \n
\n \n );\n },\n closeOnClickOutside: closeOnClickOutside,\n overlayClassName: Styles.overlay\n })\n ) \n}\nexport default TrophyAlert;","import React from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n textAlign: \"center\",\n height: \"301px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\"\n },\n}));\n\nconst Loading = () => {\n const classes = useStyles();\n\n return (\n \n {title}\n\n \n ![\"\"](\"https://s3.us-east-1.amazonaws.com/pypepro/user/1/FQtY1ZIl1IIyeetAsNcLUg2psU3U2xLGVeHrNjFT.gif\")
\n \n \n
\n\n \n \n \n \n
\n \n \n
\n );\n}\n\nexport default Loading;","import React from \"react\";\n\nexport const CloseIcon = () => (\n \n);","import React, { useEffect, useState } from \"react\";\nimport {\n Backdrop,\n Button,\n Fade,\n Grid,\n IconButton,\n Modal,\n Typography,\n makeStyles,\n} from \"@material-ui/core\";\nimport AddIcon from \"@material-ui/icons/Add\";\nimport DeleteForeverIcon from \"@material-ui/icons/DeleteForever\";\nimport { BasicAddButton, BasicFormLabel, BasicInput, ContentWrapper } from \"../GlobalAddDealModalV3/GlobalAddDealModalStyles\";\nimport BasicSelect from \"../GlobalAddDealModalV3/components/BasicSelect\";\nimport CustomTitleAddDeal from \"../GlobalAddDealModalV3/components/CustomTitleAddDeal\";\nimport { getContactStageProductsApi, getUserProductsApi, updateSuccessDealApi } from \"../GlobalAddDealModalV3/helpers/Api\";\nimport Loading from \"./Loading\";\nimport Utils from \"../../helpers/Utils\";\nimport {CloseIcon} from \"./Icons\";\n\n\nconst modalStyles = makeStyles((theme) => ({\n modal: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n paper: {\n width: 700,\n backgroundColor: theme.palette.background.paper,\n borderRadius: \"8px\",\n boxShadow: theme.shadows[5],\n },\n modalHeader: {\n padding: \"16px\",\n background: \"#346fef\",\n color: \"#fff\",\n borderTopRightRadius: \"8px\",\n borderTopLeftRadius: \"8px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n\n \"& .closeIcon\": {\n display: \"flex\",\n cursor: \"pointer\",\n \"& svg\": {\n color: \"#fff\",\n backgroundColor: \"var(--red)\",\n width: \"25px\",\n height: \"25px\",\n borderRadius: \"50px\"\n },\n },\n },\n modalBody: {\n padding: \"16px\",\n \"& .productValueSignDisabled\": {\n color: \"rgba(0,0,0,0.42)\"\n }\n },\n modalBodyInput: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"20px\",\n },\n\n modalFooter: {\n background: \"rgb(24, 31, 72)\",\n borderEndEndRadius: \"8px\",\n borderEndStartRadius: \"8px\",\n padding: \"16px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n\n \"& .title\": {\n color: \"#fff\",\n fontWeight: \"600\",\n },\n\n \"& .btnSubmit\": {\n background: \"#346fef !important\",\n fontWeight: \"600\"\n },\n },\n errorText: {\n color: \"red\",\n marginTop: \"4px\",\n fontSize: \"0.875rem\",\n },\n}));\n\nconst formatDateForInput = (date) => {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, \"0\");\n const day = String(date.getDate()).padStart(2, \"0\");\n return `${year}-${month}-${day}`;\n};\n\nconst ConfirmDealModal = ({ open, onClose, contact_stages_id, data, handleUpdateDealStatus }) => {\n const today = new Date();\n const [isLoading, setIsLoading] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const formattedDate = formatDateForInput(today);\n const [title, setTitle] = useState(\"\");\n const [closeDate, setCloseDate] = useState(formattedDate);\n const [dealValue, setDealValue] = useState(0);\n const [userProducts, setUserProducts] = useState([]);\n const [contactStageProduct, setContactStageProduct] = useState([]);\n const [errors, setErrors] = useState({\n title: \"\",\n dealValue: \"\",\n userProducts: [],\n });\n\n useEffect(() => {\n getContactStageProducts();\n getUserProducts();\n }, []);\n\n useEffect(() => {\n if (contactStageProduct[0]) {\n\n let productSum = contactStageProduct.reduce((accumulator, currentObject) => accumulator + (parseFloat(currentObject.value) || 0), 0);\n\n setDealValue(productSum)\n }\n }, [contactStageProduct])\n\n const getContactStageProducts = async () => {\n setIsLoading(true);\n const resp = await getContactStageProductsApi(contact_stages_id);\n if (resp.success) {\n setTitle(resp.data.contactStage?.title);\n const closeDate =\n resp.data.contactStage?.estimate_closing_date?.split(\" \")[0];\n setCloseDate(closeDate || formattedDate);\n setDealValue(resp.data.contactStage?.deal_value);\n\n setContactStageProduct(resp.data.products);\n }\n setIsLoading(false);\n };\n\n const getUserProducts = async () => {\n setIsLoading(true);\n const resp = await getUserProductsApi();\n\n if (resp.success) {\n setUserProducts(resp.data);\n } else {\n setUserProducts([]);\n }\n setIsLoading(false);\n };\n\n const handleAddProduct = () => {\n let old = [...contactStageProduct];\n \n old.push({\n user_product_id: \"\",\n value: 0,\n });\n\n setContactStageProduct(old);\n setErrors((prevErrors) => ({\n ...prevErrors,\n userProducts: [...prevErrors.userProducts, { user_product_id: \"\", value: \"\" }],\n }));\n };\n\n const handleProductPriceChange = (index, value) => {\n let old = [...contactStageProduct];\n let errorCopy = [...errors.userProducts];\n\n if (typeof value === \"string\" && value.trim() !== \"\") {\n if (value.length > 10) {\n return;\n }\n\n const regex = /^[0-9]*\\.?[0-9]*$/;\n\n if (!regex.test(value)){\n return;\n }\n\n if (value === \".\") {\n value = \"0.\";\n }\n\n let parsedDealValue = parseFloat(dealValue);\n\n if (old[index][\"value\"] === 0) {\n if (parsedDealValue + value >= 0) {\n if(old?.length===1){\n parsedDealValue=0;\n }\n setDealValue(parsedDealValue + value);\n } else {\n setDealValue(0);\n }\n } else if (old[index][\"value\"] >= value) {\n if (parsedDealValue - parseFloat(old[index][\"value\"]) + value >= 0) {\n setDealValue(parsedDealValue - parseFloat(old[index][\"value\"]) + value);\n } else {\n setDealValue(0);\n }\n } else {\n if (!old[index][\"value\"]) {\n\n if (parsedDealValue + value >= 0) {\n setDealValue(parsedDealValue + value);\n } else {\n setDealValue(0);\n }\n } else {\n if (parsedDealValue + value - parseFloat(old[index][\"value\"]) >= 0) {\n setDealValue(parsedDealValue + value - parseFloat(old[index][\"value\"]));\n } else {\n setDealValue(0);\n }\n }\n }\n }\n\n old[index][\"value\"] = value;\n setContactStageProduct(old);\n setErrors((prevErrors) => ({ ...prevErrors, userProducts: errorCopy }));\n };\n\n const handleUserProductIdChange = (index, value) => {\n let old = [...contactStageProduct];\n let errorCopy = [...errors.userProducts];\n\n old[index][\"user_product_id\"] = value;\n\n if (value === \"\") {\n if (errorCopy[index]) {\n errorCopy[index].user_product_id = \"Product cannot be empty\";\n }\n } else {\n if (errorCopy[index]) {\n errorCopy[index].user_product_id = \"\";\n }\n }\n\n setContactStageProduct(old);\n setErrors((prevErrors) => ({ ...prevErrors, userProducts: errorCopy }));\n };\n\n const handleDeleteProduct = (index) => {\n let old = [...contactStageProduct];\n let errorCopy = [...errors.userProducts];\n\n old.splice(index, 1);\n errorCopy.splice(index, 1);\n\n setContactStageProduct(old);\n setErrors((prevErrors) => ({ ...prevErrors, userProducts: errorCopy }));\n };\n\n const sumProductValue = () => {\n let totalValue = 0;\n\n contactStageProduct?.forEach((selectedProduct) => {\n const selectedValue = parseFloat(selectedProduct.value);\n if (!isNaN(selectedValue)) {\n totalValue += selectedValue;\n }\n });\n\n return totalValue;\n };\n\n const validateForm = () => {\n let formValid = true;\n let errors = { title: \"\", dealValue: \"\", userProducts: [] };\n\n contactStageProduct.forEach((product, index) => {\n if (product?.user_product_id === \"\") {\n errors.userProducts[index] = { user_product_id: \"Product cannot be empty\" };\n formValid = false;\n }\n });\n\n setErrors(errors);\n return formValid;\n };\n\n const handleSubmit = async () => {\n if (!validateForm()) {\n return;\n }\n\n const payload = {\n title,\n deal_closed_date: window.globalTimezoneConversionToDifferentTimezone(closeDate, Utils.getAccountData(\"userTimezoneRaw\"), 'UTC', 'YYYY-MM-DD HH:mm:ss'),\n deal_value: dealValue,\n user_contact_stage_products: contactStageProduct,\n };\n setIsSubmitting(true);\n const response = await updateSuccessDealApi({ id: contact_stages_id, payload });\n if (response.success) {\n data?.callback({ success: true });\n window.showNotification(\"SUCCESS\", response.message);\n onClose();\n } else {\n window.showNotification(\"ERROR\", response.message);\n onClose();\n }\n setIsSubmitting(false);\n };\n\n const classes = modalStyles();\n\n return (\n \n
\n \n Confirm Your Deal Information \n\n
\n\n {\n handleUpdateDealStatus();\n onClose();\n }}>\n
\n \n {\n isLoading ?\n \n \n \n \n Deal Title\n \n \n \n Close Date \n \n \n Deal Value \n \n \n\n \n \n \n\n \n {contactStageProduct.length > 0 && (\n <>\n \n Product \n \n\n \n Value \n \n \n )}\n\n {contactStageProduct?.map((product, index) => (\n \n \n {\n handleUserProductIdChange(\n index,\n e.target.value\n );\n }}\n selectedOption={(option) => {\n handleProductPriceChange(\n index,\n option.unit_price\n );\n }}\n />\n {errors.userProducts[index]?.user_product_id && (\n \n {errors.userProducts[index]?.user_product_id}\n \n )}\n \n\n \n \n \n ))}\n \n \n \n \n \n }\n
\n\n \n { setTitle(e.target.value); validateForm() }}\n required\n className={errors.title ? classes.errorStyle : \"\"}\n />\n {errors.title && (\n \n {errors.title}\n \n )}\n
\n \n setCloseDate(e.target.value)}\n />\n
\n \n $\n setDealValue(e.target.value)}\n />\n {errors.dealValue && (\n \n {errors.dealValue}\n \n )}\n
\n \n {\n handleDeleteProduct(index);\n }}\n >\n
\n \n $\n {\n handleProductPriceChange(\n index,\n e.target.value\n );\n }}\n />\n
\n \n \n Deal Value: $ {Utils.formatCurrency(dealValue)}\n \n \n Save\n \n
\n \n
\n \n );\n },\n closeOnClickOutside: closeOnClickOutside,\n overlayClassName: Styles.overlay\n })\n ) \n}\nexport default TrophyAlert;","import React from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n textAlign: \"center\",\n height: \"301px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\"\n },\n}));\n\nconst Loading = () => {\n const classes = useStyles();\n\n return (\n \n {title}\n\n \n \n \n \n
\n\n \n \n \n \n
\n \n \n
\n );\n}\n\nexport default Loading;","import React from \"react\";\n\nexport const CloseIcon = () => (\n \n);","import HttpRequest from \"./HttpRequest\";\nimport Api from \"../constants/Api\";\nimport {sendRequest} from \"./rootApi\";\n\nexport const getUserPolicies = (payload) => {\n return HttpRequest.get(Api.userPolicies, payload);\n};\n\nexport const getUserContactStageProducts = (payload) => {\n return HttpRequest.get(`${Api.userContactStageProducts}/${payload}`);\n};\n\nexport const updateSuccessDealPolicy = (payload) => {\n return HttpRequest.put(Api.updateSuccessDealPolicy, payload);\n};\n\nexport const stagesByPipeline = (payload) => {\n return sendRequest(\"POST\", Api.stagesByPipeline, payload);\n};\n\nexport const getActiveProductList = (payload) => {\n return HttpRequest.get(Api.activeProductList, payload);\n}","import React, { useEffect, useState } from \"react\";\nimport {\n Backdrop,\n Button,\n Fade,\n Grid,\n IconButton,\n Modal,\n Typography,\n makeStyles,\n} from \"@material-ui/core\";\nimport AddIcon from \"@material-ui/icons/Add\";\nimport DeleteForeverIcon from \"@material-ui/icons/DeleteForever\";\nimport {\n BasicAddButton,\n BasicFormLabel,\n BasicInput,\n ContentWrapper\n} from \"../GlobalAddDealModalV3/GlobalAddDealModalStyles\";\nimport BasicSelect from \"../GlobalAddDealModalV3/components/BasicSelect\";\nimport CustomTitleAddDeal from \"../GlobalAddDealModalV3/components/CustomTitleAddDeal\";\nimport Loading from \"./Loading\";\nimport Utils from \"../../helpers/Utils\";\nimport { CloseIcon } from \"./Icons\";\nimport { getInsuranceCompanies } from \"../../api/tenantApi\";\nimport { getUserContactStageProducts, getUserPolicies, updateSuccessDealPolicy } from \"../../api/dealApi\";\n\nconst modalStyles = makeStyles((theme) => ({\n modal: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n paper: {\n width: 930,\n backgroundColor: theme.palette.background.paper,\n borderRadius: \"8px\",\n boxShadow: theme.shadows[5],\n },\n modalHeader: {\n padding: \"16px\",\n background: \"#346fef\",\n color: \"#fff\",\n borderTopRightRadius: \"8px\",\n borderTopLeftRadius: \"8px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n\n \"& .closeIcon\": {\n display: \"flex\",\n cursor: \"pointer\",\n \"& svg\": {\n color: \"#fff\",\n backgroundColor: \"var(--red)\",\n width: \"25px\",\n height: \"25px\",\n borderRadius: \"50px\"\n },\n },\n },\n modalBody: {\n padding: \"16px\",\n \"& .productValueSignDisabled\": {\n color: \"rgba(0,0,0,0.42)\"\n }\n },\n modalBodyInput: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"20px\",\n },\n\n modalFooter: {\n background: \"rgb(24, 31, 72)\",\n borderEndEndRadius: \"8px\",\n borderEndStartRadius: \"8px\",\n padding: \"16px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n\n \"& .title\": {\n color: \"#fff\",\n fontWeight: \"600\",\n },\n\n \"& .btnSubmit\": {\n background: \"#346fef !important\",\n fontWeight: \"600\"\n },\n },\n errorText: {\n color: \"red\",\n marginTop: \"4px\",\n fontSize: \"0.875rem\",\n },\n}));\n\nconst formatDateForInput = (date) => {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, \"0\");\n const day = String(date.getDate()).padStart(2, \"0\");\n return `${year}-${month}-${day}`;\n};\n\nconst ConfirmDealModal = ({ open, onClose, contact_stages_id, data, handleUpdateDealStatus }) => {\n const classes = modalStyles();\n const today = new Date();\n const [isLoading, setIsLoading] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const formattedDate = formatDateForInput(today);\n const [title, setTitle] = useState(\"\");\n const [dealValue, setDealValue] = useState(0);\n const [dealCloseDate, setDealCloseDate] = useState(formattedDate);\n const [userPolicies, setUserPolicies] = useState([]);\n const [userPolicyCompanies, setUserPolicyCompanies] = useState([]);\n const [contactStagePolicies, setContactStagePolicies] = useState([]);\n const [errors, setErrors] = useState({\n title: \"\",\n deal_closed_date: \"\",\n deal_value: \"\",\n user_policy_id: \"\",\n insurance_company_id: \"\",\n userPolicies: [],\n });\n\n useEffect(() => {\n getData()\n }, []);\n\n useEffect(() => {\n if (contactStagePolicies[0]) {\n let productSum = contactStagePolicies\n .reduce((accumulator, currentObject) => (accumulator + (parseFloat(currentObject.value) || 0)), 0);\n setDealValue(productSum)\n }\n }, [contactStagePolicies]);\n\n const getData = async () => {\n try {\n setIsLoading(true);\n const [\n resp1,\n resp2,\n resp3\n ] =\n await Promise.all([\n getInsuranceCompanies(),\n getUserPolicies(),\n getUserContactStageProducts(contact_stages_id)\n ]);\n\n if (resp1 && resp1.success) {\n setUserPolicyCompanies(resp1.data);\n } else {\n setUserPolicyCompanies([]);\n }\n\n if (resp2 && resp2.success) {\n setUserPolicies(resp2.data);\n }\n\n if (resp3.success) {\n setTitle(resp3.data.contactStage?.title);\n const closeDate = resp3.data.contactStage?.estimate_closing_date?.split(\" \")[0];\n setDealCloseDate(closeDate || formattedDate);\n setDealValue(resp3.data.contactStage?.deal_value);\n\n setContactStagePolicies(resp3.data.policies);\n }\n } catch (err) {\n\n } finally {\n setIsLoading(false);\n }\n }\n\n const handleAddPolicy = () => {\n let old = [...contactStagePolicies];\n\n old.push({\n user_policy_id: \"\",\n insurance_company_id: \"\",\n value: 0,\n effective_date: formattedDate,\n });\n\n setContactStagePolicies(old);\n\n setErrors((prevErrors) => ({\n ...prevErrors,\n userPolicies: [\n ...prevErrors.userPolicies,\n {\n user_policy_id: \"\",\n insurance_company_id: \"\",\n value: 0,\n effective_date: \"\",\n }\n ],\n }));\n };\n\n const handleAnnualizedPremiumChange = (index, value) => {\n let old = [...contactStagePolicies];\n let errorCopy = [...errors.userPolicies];\n\n if (typeof value === \"string\" && value.trim() !== \"\") {\n if (value.length > 10) {\n return;\n }\n\n const regex = /^[0-9]*\\.?[0-9]*$/;\n\n if (!regex.test(value)) {\n return;\n }\n\n if (value === \".\") {\n value = \"0.\";\n }\n\n let parsedDealValue = dealValue;\n const selectedValue = value;\n\n if (old[index][\"value\"] === 0) {\n if (parsedDealValue + selectedValue >= 0) {\n if (old?.length === 1) {\n parsedDealValue = 0;\n }\n let temDealValue = parseFloat(parsedDealValue + selectedValue);\n setDealValue(temDealValue);\n } else {\n setDealValue(0);\n }\n } else if (old[index][\"value\"] >= selectedValue) {\n if (parsedDealValue - parseFloat(old[index][\"value\"]) + selectedValue >= 0) {\n let temDealValue = parseFloat(parsedDealValue + old[index][\"value\"] + selectedValue);\n setDealValue(temDealValue);\n } else {\n setDealValue(0);\n }\n } else {\n if (!old[index][\"value\"]) {\n if (parsedDealValue + selectedValue >= 0) {\n let temDealValue = parseFloat(parsedDealValue + selectedValue);\n setDealValue(temDealValue);\n } else {\n setDealValue(0);\n }\n } else {\n if (parsedDealValue + selectedValue - parseFloat(old[index][\"value\"]) >= 0) {\n let temDealValue = parseFloat(parsedDealValue + selectedValue) - old[index][\"value\"];\n setDealValue(temDealValue);\n } else {\n setDealValue(0);\n }\n }\n }\n }\n\n old[index][\"value\"] = value;\n setContactStagePolicies(old);\n setErrors((prevErrors) => ({ ...prevErrors, userPolicies: errorCopy }));\n };\n\n const handleUserPolicyIdChange = (index, value) => {\n let old = [...contactStagePolicies];\n let errorCopy = [...errors.userPolicies];\n\n old[index][\"user_policy_id\"] = value;\n\n if (value === \"\") {\n if (errorCopy[index]) {\n errorCopy[index].user_policy_id = \"Policy cannot be empty\";\n }\n } else {\n if (errorCopy[index]) {\n errorCopy[index].user_policy_id = \"\";\n }\n }\n\n setContactStagePolicies(old);\n setErrors((prevErrors) => ({ ...prevErrors, userPolicies: errorCopy }));\n };\n\n const handleInsuranceCompanyIdChange = (index, value) => {\n let old = [...contactStagePolicies];\n let errorCopy = [...errors.userPolicies];\n\n old[index][\"insurance_company_id\"] = value;\n\n if (value === \"\") {\n if (errorCopy[index]) {\n errorCopy[index].insurance_company_id = \"Insurance company cannot be empty\";\n }\n } else {\n if (errorCopy[index]) {\n errorCopy[index].insurance_company_id = \"\";\n }\n }\n\n setContactStagePolicies(old);\n setErrors((prevErrors) => ({ ...prevErrors, userPolicies: errorCopy }));\n };\n\n const handleEffectiveDateChange = (index, value) => {\n let old = [...contactStagePolicies];\n let errorCopy = [...errors.userPolicies];\n\n old[index][\"effective_date\"] = value;\n\n if (value === \"\") {\n if (errorCopy[index]) {\n errorCopy[index].effective_date = \"Effective date cannot be empty\";\n }\n } else {\n if (errorCopy[index]) {\n errorCopy[index].effective_date = \"\";\n }\n }\n\n setContactStagePolicies(old);\n setErrors((prevErrors) => ({ ...prevErrors, userPolicies: errorCopy }));\n };\n\n const handleDeletePolicy = (index) => {\n let old = [...contactStagePolicies];\n let errorCopy = [...errors.userPolicies];\n\n old.splice(index, 1);\n errorCopy.splice(index, 1);\n\n setContactStagePolicies(old);\n setErrors((prevErrors) => ({ ...prevErrors, userPolicies: errorCopy }));\n };\n\n const validateForm = () => {\n let formValid = true;\n let errors = { title: \"\", deal_value: \"\", userPolicies: [] };\n\n contactStagePolicies.forEach((product, index) => {\n if (product?.user_policy_id === \"\") {\n errors.userPolicies[index] = { user_policy_id: \"Policy cannot be empty\" };\n formValid = false;\n }\n });\n\n setErrors(errors);\n return formValid;\n };\n\n const handleSubmit = async () => {\n if (!validateForm()) {\n return;\n }\n\n const payload = {\n deal_title: title,\n deal_closed_date: window.globalTimezoneConversionToDifferentTimezone(dealCloseDate, Utils.getAccountData(\"userTimezoneRaw\"), 'UTC', 'YYYY-MM-DD HH:mm:ss'),\n deal_value: dealValue,\n user_policies: contactStagePolicies,\n contact_stage_id: contact_stages_id\n };\n\n try {\n setIsSubmitting(true);\n const reps = await updateSuccessDealPolicy(payload);\n if (reps.success) {\n data?.callback({ success: true });\n window.showNotification(\"SUCCESS\", reps.message);\n onClose();\n } else {\n window.showNotification(\"ERROR\", reps.message);\n onClose();\n }\n } catch (err) {\n console.log(err)\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n \n
\n \n Confirm Your Deal Information \n\n
\n\n {\n handleUpdateDealStatus();\n onClose();\n }}>\n
\n \n {\n isLoading ?\n \n \n \n \n Deal Title\n \n \n \n Close Date \n \n \n Deal Value \n \n \n\n \n \n \n\n \n {contactStagePolicies.length > 0 && (\n <>\n \n Policy Type \n \n\n \n Insurance Company \n \n\n \n Annualized Premium \n \n\n \n Effective Date \n \n \n )}\n\n {contactStagePolicies?.map((product, index) => (\n \n \n {\n handleUserPolicyIdChange(\n index,\n e.target.value\n );\n }}\n selectedOption={(option) => {\n handleAnnualizedPremiumChange(\n index,\n option.unit_price\n );\n }}\n />\n {errors.userPolicies[index]?.user_policy_id && (\n \n {errors.userPolicies[index]?.user_policy_id}\n \n )}\n \n\n \n {\n handleInsuranceCompanyIdChange(\n index,\n e.target.value\n );\n }}\n />\n {errors.userPolicies[index]?.user_policy_id && (\n \n {errors.userPolicies[index]?.user_policy_id}\n \n )}\n \n\n \n \n\n \n \n \n ))}\n \n \n \n \n \n }\n
\n\n \n { setTitle(e.target.value); validateForm(); }}\n required\n className={errors.title ? classes.errorStyle : \"\"}\n />\n {errors.title && (\n \n {errors.title}\n \n )}\n
\n \n { setDealCloseDate(e.target.target); }}\n />\n {errors.deal_closed_date && (\n \n {errors.deal_closed_date}\n \n )}\n
\n \n $\n { setDealValue(e.target.value); }}\n />\n {errors.deal_value && (\n \n {errors.deal_value}\n \n )}\n
\n \n $\n {\n handleAnnualizedPremiumChange(\n index,\n e.target.value\n );\n }}\n />\n
\n \n {\n handleEffectiveDateChange(\n index,\n e.target.value\n );\n }}\n />\n {\n handleDeletePolicy(index);\n }}\n >\n
\n \n \n Deal Value: ${Utils.formatCurrency(dealValue)}\n \n \n Save\n \n
\n \n
\n );\n}\n\nexport default Loading;","import React from \"react\";\n\nexport const CloseIcon = () => (\n \n);","import React, { useEffect, useState } from \"react\";\nimport {\n Backdrop,\n Button,\n Fade,\n Grid,\n Modal,\n Typography,\n makeStyles,\n} from \"@material-ui/core\";\nimport {\n BasicInput,\n ContentWrapper\n} from \"../GlobalAddDealModalV3/GlobalAddDealModalStyles\";\nimport BasicSelect from \"../GlobalAddDealModalV3/components/BasicSelect\";\nimport Loading from \"./Loading\";\nimport {CloseIcon} from \"./Icons\";\nimport {lostDealFormData, lostDealRecycle} from \"../../api/tenantApi\";\nimport {stagesByPipeline} from \"../../api/dealApi\";\n\nconst modalStyles = makeStyles((theme) => ({\n modal: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n paper: {\n width: 930,\n backgroundColor: theme.palette.background.paper,\n borderRadius: \"8px\",\n boxShadow: theme.shadows[5],\n },\n modalHeader: {\n padding: \"16px\",\n background: \"#346fef\",\n color: \"#fff\",\n borderTopRightRadius: \"8px\",\n borderTopLeftRadius: \"8px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n\n \"& .closeIcon\": {\n display: \"flex\",\n cursor: \"pointer\",\n \"& svg\": {\n color: \"#fff\",\n backgroundColor: \"var(--red)\",\n width: \"25px\",\n height: \"25px\",\n borderRadius: \"50px\"\n },\n },\n },\n modalBody: {\n padding: \"16px\",\n \"& .productValueSignDisabled\": {\n color: \"rgba(0,0,0,0.42)\"\n }\n },\n modalBodyInput: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"20px\",\n },\n\n modalFooter: {\n background: \"rgb(24, 31, 72)\",\n borderEndEndRadius: \"8px\",\n borderEndStartRadius: \"8px\",\n padding: \"16px\",\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n\n \"& .title\": {\n color: \"#fff\",\n fontWeight: \"600\",\n },\n\n \"& .btnSubmit\": {\n background: \"#346fef !important\",\n fontWeight: \"600\"\n },\n \"& .skipSubmit\": {\n color: \"white\",\n borderColor: \"white\",\n fontWeight: \"600\",\n marginRight: \".5rem\"\n }\n },\n errorText: {\n color: \"red\",\n marginTop: \"4px\",\n fontSize: \"0.875rem\",\n },\n}));\n\nconst formatDateForInput = (date) => {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, \"0\");\n const day = String(date.getDate()).padStart(2, \"0\");\n return `${year}-${month}-${day}`;\n};\n\nconst isDateFuture = (inputDate) => {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n\n const yesterday = new Date(today);\n yesterday.setDate(today.getDate() - 1);\n\n const input = new Date(inputDate);\n input.setHours(0, 0, 0, 0);\n\n return input > today && input > yesterday;\n}\n\nconst GlobalInsuranceDealStatusLost = ({ open, onClose, data }) => {\n const classes = modalStyles();\n const [isLoading, setIsLoading] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [formData, setFormData] = useState({\n lost_deal_reason_id: \"\",\n winner_company_id: \"\",\n recycle_event_id: \"\",\n date_of_recycle: \"\",\n recycle_to_pypeline_id: \"\",\n recycle_to_stage_id: \"\",\n recycle_lead_source_id: \"\",\n recycle_tag_id: \"\",\n note: \"\"\n });\n const [errors, setErrors] = useState({\n lost_deal_reason_id: \"\",\n winner_company_id: \"\",\n recycle_event_id: \"\",\n date_of_recycle: \"\",\n recycle_to_pypeline_id: \"\",\n recycle_to_stage_id: \"\",\n recycle_lead_source_id: \"\",\n recycle_tag_id: \"\",\n note: \"\"\n });\n const [assetData, setAssetData] = useState(null);\n const [pipelineStages, setPipelineStages] = useState([]);\n\n useEffect(()=>{\n if (open){\n callApi();\n }\n },[open]);\n\n const callApi = async () => {\n try {\n setIsLoading(true);\n const resp = await lostDealFormData();\n\n if (resp?.success){\n setAssetData(resp.data);\n }\n }catch (err){\n\n }finally {\n setIsLoading(false);\n }\n };\n\n const handleFormData = async (event) => {\n const name = event.target.name;\n const value = event.target.value;\n\n let oldFormData = {...formData};\n oldFormData[name] = value;\n setFormData(oldFormData);\n\n let oldErrors = {...errors};\n if (oldErrors[name]){\n oldErrors[name] = \"\";\n }\n setErrors(oldErrors);\n\n if (name === \"recycle_to_pypeline_id\"){\n const resp = await stagesByPipeline({ pipelineId: value });\n\n if (resp?.data?.dealStage){\n setPipelineStages(resp?.data?.dealStage);\n }\n }\n };\n\n const validateForm = () => {\n let formValid = true;\n let errors = {\n lost_deal_reason_id: \"\",\n winner_company_id: \"\",\n recycle_event_id: \"\",\n date_of_recycle: \"\",\n recycle_to_pypeline_id: \"\",\n recycle_to_stage_id: \"\",\n recycle_lead_source_id: \"\",\n recycle_tag_id: \"\",\n note: \"\"\n };\n\n if (formData.lost_deal_reason_id === \"\"){\n errors.lost_deal_reason_id = \"Lost reason is required\";\n formValid = false;\n }\n\n if (formData.recycle_event_id === \"\"){\n errors.recycle_event_id = \"Recycle event is required\";\n formValid = false;\n }\n\n if (formData.winner_company_id === \"\"){\n errors.winner_company_id = \"Insurance company is required\";\n formValid = false;\n }\n\n if (formData.recycle_to_pypeline_id === \"\"){\n errors.recycle_to_pypeline_id = \"Pipeline is required\";\n formValid = false;\n }\n\n if (formData.recycle_to_stage_id === \"\"){\n errors.recycle_to_stage_id = \"Pipeline stage is required\";\n formValid = false;\n }\n\n if (formData.date_of_recycle === \"\"){\n errors.date_of_recycle = \"Recycle date is required\";\n formValid = false;\n }\n\n if (formData.date_of_recycle !== \"\" && !isDateFuture(formData.date_of_recycle)){\n errors.date_of_recycle = \"Recycle date must be future date\";\n formValid = false;\n }\n\n setErrors(errors);\n return formValid;\n };\n\n const handleSubmit = async () => {\n if (!validateForm()) {\n return;\n }\n\n let payload = {...formData};\n\n payload.contact_id = data.contact_id;\n payload.contact_stage_id = data.contact_stages_id;\n\n try{\n setIsSubmitting(true);\n const resp = await lostDealRecycle(payload);\n\n if (resp?.success){\n window.showNotification(\"success\", resp.message);\n handleClose();\n }\n }catch (err){\n window.showNotification(\"error\", \"Something went wrong!\");\n }finally {\n setIsSubmitting(false);\n }\n };\n\n const handleClose = () => {\n setErrors({\n lost_deal_reason_id: \"\",\n winner_company_id: \"\",\n recycle_event_id: \"\",\n date_of_recycle: \"\",\n recycle_to_pypeline_id: \"\",\n recycle_to_stage_id: \"\",\n recycle_lead_source_id: \"\",\n recycle_tag_id: \"\",\n note: \"\"\n });\n setFormData({\n lost_deal_reason_id: \"\",\n winner_company_id: \"\",\n recycle_event_id: \"\",\n date_of_recycle: \"\",\n recycle_to_pypeline_id: \"\",\n recycle_to_stage_id: \"\",\n recycle_lead_source_id: \"\",\n recycle_tag_id: \"\",\n note: \"\"\n });\n\n onClose();\n };\n\n return (\n \n
\n \n
\n\n \n LOST DEAL? \n \n Complete the steps below so you can win the business in the future.\n \n
\n\n \n
\n \n {\n isLoading ?\n \n \n \n \n Why did you lose the deal?\n \n \n \n \n Carrier prospect went with?\n \n \n \n \n Recycle event\n \n \n \n \n Date to recycle lead?\n \n \n \n \n Recycle to pipeline\n \n \n \n \n Recycle to stage\n \n \n \n \n When recycled, change lead source to\n \n \n \n \n When recycled, add the following tag\n \n \n \n \n Notes\n \n \n {errors.note}\n \n )}\n \n \n \n }\n
\n\n \n \n {errors.lost_deal_reason_id}\n \n )}\n
\n \n \n {errors.winner_company_id}\n \n )}\n
\n \n \n {errors.recycle_event_id}\n \n )}\n
\n \n \n {errors.date_of_recycle}\n \n )}\n
\n \n \n {errors.recycle_to_pypeline_id}\n \n )}\n
\n \n \n {errors.recycle_to_stage_id}\n \n )}\n
\n \n \n {errors.recycle_lead_source_id}\n \n )}\n
\n \n \n {errors.recycle_tag_id}\n \n )}\n
\n \n \n Skip\n \n \n Save\n \n
\n \n
\n \n
\n \n
\n\n {/* Modal Body */}\n\n \n {\n props.img &&\n 
\n }\n {\n typeof props.title === 'string' ? \n
\n {typeof props.extraButton != 'undefined' &&\n {props.title}
: \n <>{props.title}\n }\n \n\n {props.extraButton}\n
\n }\n \n \n
\n \n {props.children}\n
\n \n {/*Send Massage and close button*/}\n {\n props.hideFooter !== true && (props.newFooter ?\n \n \n \n
:\n )\n }\n\n \n \n search\n
\n );\n}\n \nexport default GlobalSearchBox;","import { AppBar, Box, Tab, Tabs, Typography } from \"@material-ui/core\";\nimport Skeleton from \"@material-ui/lab/Skeleton\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { getContactsFromTopbarNew, searchContactsFromElastic } from \"../../api/globalApi\";\nimport useDelayCallback from \"../../hooks/useDelayCallback\";\nimport { useIsMounted } from \"../../hooks/useIsMounted\";\nimport GlobalSearchBox from \"../globals/GlobalSearchBox/GlobalSearchBox\";\n\nlet typingTimer;\nconst TabPanel = props => {\n const { children, value, index, ...other } = props;\n\n return (\n \n {e.stopPropagation();setMenuVisible(false)}} className=\"d-flex justify-content-start align-items-center search_content\">\n {avatar}\n
\n });\n }\n return \"\";\n }\n\n // For laravel search, dont remove\n const renderElasticContacts = () => {\n if(typeof contacts != 'undefined'){\n let allContacts = contacts;\n return allContacts.map((contact,index) => {\n let firstName = contact['firstName'] ? contact['firstName'] : '';\n let lastName = contact['lastName'] ? contact['lastName'] : '';\n let avatar = firstName?.substring(0,1) + lastName?.substring(0,1)\n return \n
\n \n {(firstName + \" \"+lastName).trim()}
\n{contact['email']}
\n{contact['number']}
\n\n {e.stopPropagation();setMenuVisible(false)}} className=\"d-flex justify-content-start align-items-center search_content\">\n {avatar}\n
\n });\n }\n return \"\";\n }\n\n const checkFullNameOrNumber = (contactObj,key) => {\n let res =null ;\n if(contactObj[key] !== undefined && contactObj[key] != null && contactObj[key] !==\"\"){\n res = contactObj[key] ; \n }\n return res;\n }\n \n const renderContactsForActivityModal = () => {\n\n if(loadingData){\n return(\n \n
\n \n {(firstName + \" \"+lastName).trim()}
\n{contact['email']}
\n{contact['number']}
\n\n {loadingData ? \"Please wait...\" : \"No contact available !\"}\n
\n )\n }\n \n if(typeof contacts != 'undefined'){\n if(contacts.length === 0){\n return(\n \n No contact available !\n
\n )\n }\n let maxlen = contacts.length > 10 ? 10 : contacts.length;\n let dataArray = []\n let contactIds = []\n \n for(let i=0; i< maxlen ;i++){\n if(!contactIds.includes(contacts[i].id)){\n contactIds.push(contacts[i].id)\n dataArray.push(\n props.onSubmit(contacts[i])}>\n
\n )\n }\n }\n return dataArray\n \n }\n else{\n return(\n \n\n
\n {checkFullNameOrNumber(contacts[i],'fullName') ?? \"\"}
\n{contacts[i]['email']}
\n{checkFullNameOrNumber(contacts[i],'number') ?? \"\"}
\n \n\n {loadingData ? \"Please wait...\" : \"No contact available !\"}\n
\n )\n }\n }\n const loadMoreContact =(e)=>{\n setScrolling(true)\n if((props.from === undefined || props.from !== 'activity-modal') && !scrolling && isMoreData &&\n Math.round(e.target.scrollTop + e.target.clientHeight+50, 20) >= Math.round(e.target.scrollHeight, 10)){\n // getMoreData(pageNo+1)\n clearTimeout(typingTimer);\n\n typingTimer = setTimeout(() => { \n \n if(process.env.REACT_APP_DIALER_CONTACT_SEARCH === 'elastic'){\n searchUsingElastic(pageNo+1, true)\n }else{\n getSearchContactsForScroll(pageNo+1, true)\n }\n }, 500);\n\n \n } else{\n setScrolling(false)\n }\n }\n\n const onFocusGlobalSearch = (e) => {\n e.stopPropagation();\n let test = document.getElementById(\"top-search-result\");\n if(searchText !== \"\"){\n if(test){\n setMenuVisible(true)\n }\n }else{\n if(test){\n if(test.classList.contains(\"global___search___panel\")){\n setMenuVisible(false)\n test.classList.remove(\"global___search___panel\");\n }\n }\n }\n }\n\n const loadingSkeleton = () => {\n let skeletons = [];\n for (let i = 0; i < 5; i++) {\n skeletons.push(\n \n \n
\n \n );\n }\n return skeletons;\n };\n\n return (\n <>\n \n setSearchText(e.target.value.replace(/[#,%,$,!]/g, ''))}\n // onBlur={e => setMenuVisible(false)}\n onFocus={e => onFocusGlobalSearch(e)}\n value={searchText}\n ref={global_search_text_ref}\n id=\"global_search_text_ref_id\"\n />\n
\n {e.stopPropagation(); setMenuVisible(true)}} onBlur={() => setMenuVisible(false)} \n className={`top-bar-search-result top-bar-search-wrapper dropdown-content dropdown-tabbed ${ menuVisible? 'global___search___panel' : ''}`} style={{opacity: menuVisible ? 1: 0, visibility: menuVisible ? 'visible': 'hidden'}}>\n
\n \n );\n}\n \nexport default SearchMenu;","import {styled} from \"@material-ui/core\";\nimport {\n KeyboardDatePicker,\n KeyboardTimePicker\n} from \"@material-ui/pickers\";\n\nexport const StyledKeyboardDatePicker = styled(KeyboardDatePicker)(({theme})=>({\n backgroundColor: \"white !important\",\n position: \"relative\",\n fontSize: \"15px !important\",\n margin: \"0 !important\",\n padding: \" 9px !important\",\n borderRadius: \"4px !important\",\n border: \"1px solid #ced4da !important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n borderRadius: 4,\n boxShadow: \"unset !important\",\n backgroundColor: \"#fff !important\"\n },\n \"&::placeholder\": {\n color: \"#082852 !important\",\n },\n \"& .MuiInput-input\": {\n height: \"unset !important\"\n },\n \"& .MuiIconButton-root\": {\n padding: \"0px !important\",\n \"&:focus\": {\n backgroundColor: \"transparent !important\"\n },\n }\n}));\n\nexport const StyledKeyboardTimePicker = styled(KeyboardTimePicker)(({theme})=>({\n backgroundColor: \"white !important\",\n position: \"relative\",\n fontSize: \"15px !important\",\n margin: \"0 !important\",\n padding: \" 9px !important\",\n borderRadius: \"4px !important\",\n border: \"1px solid #ced4da !important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n borderRadius: 4,\n boxShadow: \"unset !important\",\n backgroundColor: \"#fff !important\"\n },\n \"&::placeholder\": {\n color: \"#082852 !important\",\n },\n \"& .MuiInput-input\": {\n height: \"unset !important\"\n },\n \"& .MuiIconButton-root\": {\n padding: \"0px !important\",\n \"&:focus\": {\n backgroundColor: \"transparent !important\"\n },\n }\n}));","import React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nconst shimmer = keyframes`\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n`;\n\nconst SkeletonContainer = styled.div`\n padding: 16px;\n`;\n\nconst SkeletonElement = styled.div`\n background: #f0f0f0;\n background-image: linear-gradient(90deg, #f0f0f0, #e0e0e0, #f0f0f0);\n background-size: 200px 100%;\n animation: ${shimmer} 2.5s infinite linear;\n border-radius: 4px;\n margin-bottom: 12px;\n width: ${({ width }) => width || '100%'};\n height: ${({ height }) => height || '20px'};\n`;\n\nconst SkeletonUserItem = styled(SkeletonElement)`\n height: 50px;\n width: 100%;\n margin-bottom: 15px;\n\n`;\n\nconst EmailSendSkeleton = () => {\n return (\n \n {(props.from === undefined || props.from !== 'activity-modal') &&\n\n \n \n
\n \n \n
\n }\n {(props.from === undefined || props.from !== 'activity-modal') &&\n\n Search all results for “{searchText}”
\n\n \n {setSearchTabValue(newValue);}}\n indicatorColor=\"primary\"\n textColor=\"primary\"\n ariaLabel=\"simple tabs example\">\n \n {/* {(props.from === undefined || props.from !== 'activity-modal') &&\n \n\n } */}\n \n \n
\n }\n loadMoreContact(e)}>\n {(props.from === undefined || props.from !== 'activity-modal') && !loadingNewData && process.env.REACT_APP_DIALER_CONTACT_SEARCH === 'elastic' &&\n\n renderElasticContacts()\n }\n {(props.from === undefined || props.from !== 'activity-modal') && !loadingNewData && process.env.REACT_APP_DIALER_CONTACT_SEARCH !== 'elastic' &&\n\n renderContacts()\n }\n {(props.from !== undefined || props.from === 'activity-modal' ) &&\n\n renderContactsForActivityModal()\n }\n {(props.from === undefined || props.from !== 'activity-modal') && loadingNewData &&\n loadingSkeleton()\n }\n
\n \n
\n\n {/* Modal Body */}\n\n \n \n {props.extraButton}\n
\n )}\n \n {props.img && (\n \n )}\n {typeof props.title === \"string\" ? (\n
\n {typeof props.extraButton != \"undefined\" && (\n {props.title}
\n ) : (\n <>{props.title}\n )}\n\n \n \n {props.buttonText}\n \n
\n ) : (\n \n
\n ))}\n \n \n \n {\n closeModal();\n }}\n className={classes.cancelButton}\n >\n Cancel\n \n\n \n \n Save\n \n \n
\n \n
\n )}\n \n \n {/* {!submitting && */}\n\n
\n \n {props.showAll && (\n
\n \n
\n )}\n \n
\n Select a category for this activity:
\n\n {\n e.preventDefault();\n updateActivityType(\n ActivityType.CALL,\n \"activityType\"\n );\n }}\n className={`${activityClass} ${activityInformation.activityType ===\n ActivityType.CALL\n ? \"active-activity-state\"\n : \"white text-gray\"\n }`}\n >\n phone_in_talk\n Call\n \n {\n e.preventDefault();\n updateActivityType(\n ActivityType.APOINTMENT,\n \"activityType\"\n );\n }}\n className={`${activityClass} ${activityInformation.activityType ===\n ActivityType.APOINTMENT\n ? \"active-activity-state\"\n : \"white text-gray\"\n }`}\n >\n \n \n \n \n \n Appointment\n \n {\n e.preventDefault();\n updateActivityType(\n ActivityType.TASK,\n \"activityType\"\n );\n }}\n className={`${activityClass} ${activityInformation.activityType ===\n ActivityType.TASK\n ? \"active-activity-state\"\n : \"white text-gray\"\n }`}\n >\n \n \n \n \n Task\n \n\n {\n e.preventDefault();\n updateActivityType(\n ActivityType.DEADLINE,\n \"activityType\"\n );\n }}\n className={`${activityClass} ${activityInformation.activityType ===\n ActivityType.DEADLINE\n ? \"active-activity-state\"\n : \"white text-gray\"\n }`}\n >\n watch_later\n Deadline\n \n {\n e.preventDefault();\n updateActivityType(\n ActivityType.EMAIL,\n \"activityType\"\n );\n }}\n className={`${activityClass} ${activityInformation.activityType ===\n ActivityType.EMAIL\n ? \"active-activity-state\"\n : \"white text-gray\"\n }`}\n >\n mail\n Email\n \n {\n e.preventDefault();\n updateActivityType(\n ActivityType.FOLLOWUP,\n \"activityType\"\n );\n }}\n className={`${activityClass} ${activityInformation.activityType ===\n ActivityType.FOLLOWUP\n ? \"active-activity-state\"\n : \"white text-gray\"\n }`}\n >\n person_add\n Followup\n \n {\n e.preventDefault();\n updateActivityType(\n ActivityType.OTHERS,\n \"activityType\"\n );\n }}\n className={`${activityClass} ${activityInformation.activityType ===\n ActivityType.OTHERS\n ? \"active-activity-state\"\n : \"white text-gray\"\n }`}\n >\n more_horiz\n Others\n \n
\n \n
\n \n {\n updateActivityType(e.target.value, \"activityTitle\");\n }}\n type=\"text\"\n placeholder=\"Give your activity a title...\"\n id=\"campaign_setting_activity_title\"\n fullWidth\n inputProps={{\n style: {\n height: \"2.5rem\"\n }\n }}\n />\n {titleValidation &&\n activityInformation.activityTitle === \"\" && (\n Title can not be empty!\n )}\n
\n Title:
\n\n
\n \n {\n updateActivityType(e.target.value, \"activityDescription\");\n }}\n type=\"text\"\n placeholder=\"Add a quick description...\"\n fullWidth\n multiline\n inputProps={{\n style: {\n height: \"80px\"\n }\n }}\n />\n
\n \n Description:\n
\n\n
\n \n \n {\n updateActivityType(event.target.value, \"selectedUser\");\n }}\n value={activityInformation.selectedUser}\n emptyable={true}\n />\n )}\n
\n \n Assign this activity to:\n
\n {teamUsers != null && (\n\n
\n\n <>\n {activityInformation.selectedContactId && (\n Time of activity:
\n\n
\n \n \n \n {props?.editData?.calendarId ? (\n {\n }}\n type=\"text\"\n fullWidth\n inputProps={{\n style: {\n height: \"2.5rem\"\n }\n }}\n disabled={true}\n />\n ) : (\n \n updateActivityTypeDateSelect(\n date,\n \"activityDate\"\n )\n }\n KeyboardButtonProps={{\n \"aria-label\": \"change date\",\n }}\n maxDate={maxDate}\n minDate={minDate}\n />\n )}\n \n \n
\n \n Date\n
\n\n {\n }}\n type=\"text\"\n fullWidth\n inputProps={{\n style: {\n height: \"2.5rem\"\n }\n }}\n disabled={true}\n />\n ) : (\n <>\n {calendarWidgetId ? (\n \n \n \n updateActivityType(date, \"activityTime\")\n }\n KeyboardButtonProps={{\n \"aria-label\": \"change time\",\n }}\n />\n \n \n )}\n \n )}\n
\n Time
\n {props?.editData?.calendarId ? (\n\n {dateRange[0] != undefined ? (\n \n changeTimeOnCalendarWidget(selected)\n }\n />\n ) : (\n
\n ) : (\n No slot available
\n )}\n\n {\n }}\n type=\"text\"\n placeholder=\"Enter Duration\"\n fullWidth\n inputProps={{\n style: {\n height: \"2.5rem\"\n }\n }}\n disabled={\"disabled\"}\n />\n ) : (\n <>\n {activityInformation.calendarWidgetId ? (\n {\n }}\n type=\"text\"\n placeholder=\"Enter Duration\"\n fullWidth\n inputProps={{\n style: {\n height: \"2.5rem\"\n }\n }}\n disabled={\"disabled\"}\n />\n ) : (\n <>\n {calendarWidgetId ? (\n {\n }}\n type=\"text\"\n placeholder=\"Enter Duration\"\n fullWidth\n inputProps={{\n style: {\n height: \"2.5rem\"\n }\n }}\n disabled={true}\n />\n ) : (\n {\n updateActivityType(event.target.value, \"activityDuration\");\n }}\n value={activityInformation.activityDuration}\n />\n )}\n \n )}\n \n )}\n\n
\n \n Duration (hh:mm){\" \"}\n
\n {props?.editData?.calendarId ? (\n\n
\n )}\n {activityInformation.editActivityId == null &&\n calendarWidgets != null && (\n \n Contact Information\n
\n\n
\n )}\n \n {\n updateActivityTypeForCalendarWidget(event.target.value, \"selectedWidget\");\n }}\n value={activityInformation.selectedWidget}\n emptyable={true}\n />\n
\n \n Select an online calendar to confirm availability (optional):\n
\n\n {!activityInformation.selectedContactId && (\n
\n \n {/* } */}\n \n
\n )}\n\n {activityInformation.selectedContactId && (\n <>\n {!Utils.isEmpty(\n activityInformation.selectedContactFullName\n ) && (\n \n To associate this activity with an existing contact, search for them here (optional):\n
\n\n {\n }}\n type=\"text\"\n fullWidth\n inputProps={{\n style: {\n height: \"2.5rem\"\n }\n }}\n disabled={true}\n />\n
\n )}\n {!Utils.isEmpty(\n activityInformation.selectedContactEmail\n ) && (\n \n Name\n
\n\n {\n }}\n type=\"email\"\n fullWidth\n inputProps={{\n style: {\n height: \"2.5rem\"\n }\n }}\n disabled={true}\n />\n
\n )}\n {!Utils.isEmpty(\n activityInformation.selectedContactNumber\n ) && (\n \n Email\n
\n\n {\n }}\n type=\"text\"\n fullWidth\n inputProps={{\n style: {\n height: \"2.5rem\"\n }\n }}\n disabled={true}\n />\n
\n )}\n \n )}\n\n {activityInformation.selectedContactId && (\n \n Phone\n
\n\n \n Search again\n \n
\n )}\n \n {editId == null && (\n
\n \n
\n )}\n \n
\n Actions (optional):
\n\n \n {\n activityInformation.invitationToAttendee &&\n
\n \n {\n if (calendarError) {\n setCalendarError(false);\n }\n updateActivityType(event.target.value, \"connectedCalendarId\");\n }}\n value={activityInformation.connectedCalendarId}\n />\n {\n calendarError && Calendar field is required\n }\n\n
\n }\n\n \n Select Calendar\n
\n\n \n
\n \n
\n For appointments (optional):
\n\n \n
\n\n {activityInformation.sendSms && (\n \n
\n )}\n \n {\n updateActivityType(e.target.value, \"smsText\");\n }}\n type=\"text\"\n placeholder=\"Enter Message\"\n fullWidth\n multiline\n inputProps={{\n style: {\n height: \"80px\"\n }\n }}\n />\n
\n \n \n
\n \n
\n \n
\n {/* \n
\n \n
\n Create a campaign that allows all communication options:
\n\n
\n - \n
- \n \n \n Email\n \n \n
- \n \n \n Video Email\n \n \n
- \n \n \n SMS\n \n \n
- \n \n \n Voice\n \n \n
- \n \n \n Call Bridge\n \n \n
- \n \n \n Direct Mail\n \n \n
- \n \n \n gift\n \n \n
\n
\n \n
\n Create a campaign using only email and/or direct mail
\n\n
\n - \n
- \n \n \n Email\n \n \n
- \n \n \n Video Email\n \n \n
- \n \n \n Direct Mail\n \n \n
- \n \n \n gift\n \n \n
props.handleAddNewCampaignModal(false)}>\n \n \n \n Cancel\n \n
*/}\n \n
\n\n \n Phone Settings \n
\n \n
\n\n \n
\n \n \n To enable the phone and texting functionality,
you first\n need to add a phone number\n \n \n Click the next button to get started\n \n
\n you first\n need to add a phone number\n
\n {onClose()}}\n >\n Close\n \n {setStep(STEP_TABS.SELECT_NUMBER)}}\n >\n Next\n \n
\n \n\n \n\n \n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n Unable to Buy Phone Number\n
\n\n {message}\n
\n\n \n Close\n \n
\n {item.phoneNumber}
\n \n { onClose() }}\n >\n Close\n \n
\n\n \n
\n \n Phone Settings \n \n It's time to select a phone number. Follow the steps below.\n \n
\n \n \n \n \n setCountry(e.target.value)}\n mapping={{\n label: \"name\",\n value: \"short\",\n }}\n />\n
\n \n \n \n Select your country\n \n
\n\n \n \n Preferred area code\n \n
\n\n \n 
\n Looking for phone numbers\n
:\n virtualNumbers[0] ?\n \n Looking for phone numbers\n \n \n Refresh\n \n
\n \n \n \n {\n isSearched ?\n \"There are no numbers available in your preferred area code.\\n Please search for another area code or try again in 24 hours.\" :\n \"Enter your preferred area code above to search for available numbers.\"\n }\n \n
\n }\n \n \n \n {\n isSearched ?\n \"There are no numbers available in your preferred area code.\\n Please search for another area code or try again in 24 hours.\" :\n \"Enter your preferred area code above to search for available numbers.\"\n }\n \n \n
\n\n \n Phone Settings \n
\n \n
\n\n \n
\n \n
\n \n The phone number has been added to your account.\n
\n\n Close this popup to continue configuring your phone number. You\n can add a voicemail message, turn on call recording, forward\n calls, and more.\n
\n\n \n Close\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {\n Utils.getAccountData(\"userIsOwner\") ?\n \"You haven't completed your A2P/10DLC Registration!\" :\n \"Your team didn't completed A2P Campaign Registration! Please contact with team owner.\"\n }\n
\n \n All phone numbers in the United States used to send text messages must be fully registered to an approved campaign under your brand.\n \n \n This requirement applies to all texting platforms in the United States.\n \n \n {\n Utils.getAccountData(\"userIsOwner\") ?\n \n Complete My Registration\n :\n \n Close\n \n }\n
\n \n
\n );\n}\n\nexport default CampaignDetails;","import { Box, Button, Checkbox, FormControl, FormControlLabel, FormHelperText, InputBase, withStyles } from \"@material-ui/core\";\nimport React from \"react\";\nimport A2pLearnMore from \"../a2pLearnMore\";\nimport SampleMessagesLearnMore from \"../a2pLearnMore/SampleMessagesLearnMore\";\nimport Styles from \"./Styles.module.css\";\n\nconst CustomInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n minHeight: \"200px !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n },\n}))(InputBase);\n\nconst CustomInputTwo = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n },\n}))(InputBase);\n\nconst SampleMessages = ({ inputScrollToViewRef, formData, callback, errorCallback, a2pDlcError,showPreview, setIsPreviewed, isPreviewed }) => {\n const handleFormDataChange = (name, value) => {\n if (isPreviewed) {\n setIsPreviewed(false);\n }\n\n if (name === \"senderIdentification1\"){\n if (value.trim() === \"\"){\n errorCallback(\"senderIdentification1\",\"Sender Identification is required!\");\n }\n }\n\n if (name === \"senderIdentification2\"){\n if (value.trim() === \"\"){\n errorCallback(\"senderIdentification2\",\"Sender Identification is required!\");\n \n }\n }\n if (name === \"sampleMessage1\"){\n if (value.trim() === \"\"){\n errorCallback(\"sampleMessage1\",\"Sample Message 1 is required!\");\n }else if(value.length < 20 || value.length > 1024){\n errorCallback(\"sampleMessage1\",\"Sample Message 1 can not be less than 20 characters and more than 1024 characters!\");\n }else {\n errorCallback(\"sampleMessage1\",\"\");\n }\n }\n\n if (name === \"sampleMessage2\"){\n if (value.trim() === \"\"){\n errorCallback(\"sampleMessage2\",\"Sample Message 2 is required!\");\n }else if(value.length < 20 || value.length > 1024){\n errorCallback(\"sampleMessage2\",\"Sample Message 2 can not be less than 20 characters and more than 1024 characters!\");\n }else {\n errorCallback(\"sampleMessage2\",\"\");\n }\n }\n\n if (name === \"optOutLanguage1\"){\n if (value.trim() === \"\"){\n errorCallback(\"optOutLanguage1\",\"Opt-out Language is required!\");\n }\n }\n\n\n if (name === \"optOutLanguage2\"){\n if (value.trim() === \"\"){\n errorCallback(\"optOutLanguage2\",\"Opt-out Language is required!\");\n }\n }\n\n if (name === \"hasEmbeddedLinks\"){\n if (value){\n value = \"TRUE\";\n }else {\n value = \"FALSE\";\n }\n }\n\n if (name === \"hasEmbeddedPhone\"){\n if (value){\n value = \"TRUE\";\n }else {\n value = \"FALSE\";\n }\n }\n\n callback(name, value);\n };\n\n const renderErrorMessage = (fieldName) => {\n return \n
\n Read before answering questions:
\nBefore the phone companies are willing to approve your messaging campaigns they need to review some examples of the types of messages you intend to send. Complete the info below.
\n\n
\n \n inputScrollToViewRef.current[1] = el} className={Styles.formControl}>\n \n \n Campaign Use Case Description\n *\n \n {\n formData.useCase &&\n {\n // A2pSuggestion({\n // suggestionTitle: \"Campaign Use Case Description Suggestions\",\n // suggestions: CODE_WISE_DATA.CAMPAIGN_USE_CASE_DESCRIPTION,\n // onChange: (value) => {\n // handleFormDataChange(\"useCaseDescription\", value)\n // }\n // });\n\n A2pLearnMore({\n title: \"Campaign Use Case Description\",\n innerBody: {handleFormDataChange(\"useCaseDescription\", e.target.value)}}\n multiline\n />\n {renderErrorMessage(\"useCaseDescription\")}\n Min length: 40 characters. Max length: 4096 characters.\n \n
\n \n
\n );\n}\n\nexport default SampleMessages;","import { FormControl, FormHelperText, InputBase, withStyles } from \"@material-ui/core\";\nimport React from \"react\";\nimport A2pLearnMore from \"../a2pLearnMore\";\nimport MessageFlowLearnMore from \"../a2pLearnMore/MessageFlowLearnMore\";\nimport Styles from \"./Styles.module.css\";\n\nconst CustomInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n minHeight: \"200px !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n },\n}))(InputBase);\n\nconst EndUserConsent = ({ inputScrollToViewRef, formData, callback, errorCallback, a2pDlcError }) => {\n const handleFormDataChange = (name, value) => {\n if (name === \"messageFlow\"){\n if (value.trim() === \"\"){\n errorCallback(\"messageFlow\",\"Message Flow is required!\");\n }else if(value.length < 40 || value.length > 2084){\n errorCallback(\"messageFlow\",\"Message Flow can not be less than 40 characters and more than 2084 characters!\");\n }else {\n errorCallback(\"messageFlow\",\"\");\n }\n }\n\n if(name === \"optOutKeywords\"){\n if (value.trim() === \"\"){\n errorCallback(\"optOutKeywords\",\"Opt-out is required!\");\n }else if (value.split(\",\").length > 0){\n const helperKeywordArray = value.split(\",\");\n\n helperKeywordArray.forEach((keyword)=>{\n let index = keyword.indexOf(\" \");\n\n if(keyword === \"\"){\n errorCallback(\"optOutKeywords\",\"Remove trailing comma from the Opt-out keywords!\");\n }else if (keyword.length > 255){\n errorCallback(\"optOutKeywords\",\"Each Opt-out keyword must be less then 255!\");\n }else if (index >= 0){\n errorCallback(\"optOutKeywords\",\"Opt-out Keyword cannot contain white-space!\");\n }else if(keyword.includes('_') || keyword.includes('-')){\n errorCallback(\"optOutKeywords\",\"Opt-out Keyword must contain either alphanumeric or accented characters!\");\n }else {\n errorCallback(\"optOutKeywords\",\"\");\n }\n });\n }else {\n errorCallback(\"optOutKeywords\",\"\");\n }\n }\n\n if (name === \"optOutMessage\"){\n if (value.trim() === \"\"){\n errorCallback(\"optOutMessage\",\"Opt-out Message is required!\");\n }else if(value.length < 20 || value.length > 320){\n errorCallback(\"optOutMessage\",\"Opt-out Message can not be less than 20 characters and more than 320 characters!\");\n }else {\n errorCallback(\"optOutMessage\",\"\");\n }\n }\n\n if(name === \"helpKeywords\"){\n if (value.trim() === \"\"){\n errorCallback(\"helpKeywords\",\"Help is required!\");\n }else if (value.split(\",\").length > 0){\n const helperKeywordArray = value.split(\",\");\n\n helperKeywordArray.forEach((keyword)=>{\n let index = keyword.indexOf(\" \");\n\n if(keyword === \"\"){\n errorCallback(\"helpKeywords\",\"Remove trailing comma from the Help keywords!\");\n }else if (keyword.length > 255){\n errorCallback(\"helpKeywords\",\"Each Help keyword must be less then 255!\");\n }else if (index >= 0){\n errorCallback(\"helpKeywords\",\"Help Keyword cannot contain white-space!\");\n }else if(keyword.includes('_') || keyword.includes('-')){\n errorCallback(\"helpKeywords\",\"Help Keyword must contain either alphanumeric or accented characters!\");\n }else {\n errorCallback(\"helpKeywords\",\"\");\n }\n });\n }else {\n errorCallback(\"helpKeywords\",\"\");\n }\n }\n\n if (name === \"helpMessage\"){\n if (value.trim() === \"\"){\n errorCallback(\"helpMessage\",\"Help Message is required!\");\n }else if(value.length < 20 || value.length > 320){\n errorCallback(\"helpMessage\",\"Help Message can not be less than 20 characters and more than 320 characters!\");\n }else {\n errorCallback(\"helpMessage\",\"\");\n }\n }\n\n callback(name, value);\n };\n\n const renderErrorMessage = (fieldName) => {\n return \n
\n Read before answering questions:
\nBefore the phone companies are willing to approve your messaging campaigns they need to review some examples of the types of messages you intend to send. Complete the info below.
\n\n
\n \n inputScrollToViewRef.current[0] = el} className={Styles.formControl}>\n \n \n Sample Message #1: (provide an example below)\n {/* * */}\n \n {\n formData.useCase &&\n {\n // A2pSuggestion({\n // suggestionTitle: \"Sample Message Suggestions\",\n // suggestions: CODE_WISE_DATA.SAMPLE_MESSAGE,\n // onChange: (value) => {\n // handleFormDataChange(\"sampleMessage1\", value)\n // }\n // });\n\n A2pLearnMore({\n title: \"Sample messages\",\n innerBody: {handleFormDataChange(\"senderIdentification1\", e.target.value)}}\n />\n {renderErrorMessage(\"senderIdentification1\")}\n\n
\n{handleFormDataChange(\"sampleMessage1\", e.target.value)}}\n multiline\n />\n {renderErrorMessage(\"sampleMessage1\")}\n Min length: 20 characters. Max length: 1024 characters.\n\n
\n \n Opt-out Language(this section is pre-populated and will be added to the end of your message)\n *\n \n\n{handleFormDataChange(\"optOutLanguage1\", e.target.value)}}\n readOnly\n />\n \n inputScrollToViewRef.current[1] = el} className={Styles.formControl}>\n \n \n Sample Message #2:\n {/* * */}\n \n {\n formData.useCase &&\n {\n // A2pSuggestion({\n // suggestionTitle: \"Sample Message Suggestions\",\n // suggestions: CODE_WISE_DATA.SAMPLE_MESSAGE,\n // onChange: (value) => {\n // handleFormDataChange(\"sampleMessage2\", value)\n // }\n // });\n\n A2pLearnMore({\n title: \"Sample messages\",\n innerBody: {handleFormDataChange(\"senderIdentification2\", e.target.value)}}\n \n />\n {renderErrorMessage(\"senderIdentification2\")}\n\n
\n\n \n Add your Sample message below:\n *\n \n{handleFormDataChange(\"sampleMessage2\", e.target.value)}}\n multiline\n />\n {renderErrorMessage(\"sampleMessage2\")}\n Min length: 20 characters. Max length: 1024 characters.\n\n
\n \n Opt-out Language(this section is pre-populated and will be added to the end of your message)\n *\n \n\n{handleFormDataChange(\"optOutLanguage2\", e.target.value)}}\n readOnly\n />\n \n
\n \n
\n \n Opt-out Language(this section is pre-populated and will be added to the end of your message)\n *\n \n\n
\n\n \n Add your Sample message below:\n *\n \n
\n \n Opt-out Language(this section is pre-populated and will be added to the end of your message)\n *\n \n\n
\n \n {handleFormDataChange(\"hasEmbeddedLinks\", e.target.checked)}}\n checked={formData.hasEmbeddedLinks === \"TRUE\"}\n />\n }\n label=\"My text message includes an embedded link (website, calendar link, etc.)\"\n />\n {handleFormDataChange(\"hasEmbeddedPhone\", e.target.checked)}}\n checked={formData.hasEmbeddedPhone === \"TRUE\"}\n />\n }\n label=\"My text message includes a phone number\"\n />\n *If there is any chance your messages will include links or phone numbers we recommend you check these boxes.\n \n \n
\n \n \n Notes:\n \n
\n To be in compliance with A2P/10DLC the first message you send a contact must include sender identifcation and opt-out language.
\n\nSender identification identifies who you are and the name of your company. This will appear at the beginning of your message.
\n\nOpt-out language is text you add to the end of your message that tells contacts how to unsubscribe from further texts.
\n\nIf this is missing your registration will get rejected! \n To ensure compliance we'll automatically add these required elements to the sample messages you provide.
\n\n**If your messages include an embedded link or phone number be sure to check the appropriate boxes. If you check these boxes make sure your sample messages include a link and/or phone number as well. (DO NOT USE LINK SHORTENERS)
\n \n\n
\n );\n}\n\nexport default EndUserConsent;","import React from \"react\";\nimport Styles from \"./Styles.module.css\";\nimport {Box, FormControl, FormHelperText, Grid, InputBase, MenuItem, Select, withStyles} from \"@material-ui/core\";\nimport Utils from \"../../helpers/Utils\";\n\nconst CustomInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n },\n input: {\n fontSize: \"14px !important\",\n height: \"auto !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n color: \"#707070 !important\",\n boxShadow: \"none!important\",\n borderColor: \"black !important\",\n },\n },\n}))(InputBase);\n\nconst BootstrapInput = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n },\n },\n input: {\n fontSize: \"14px !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n color: \"#707070 !important\",\n border: \"1px solid #ced4da !important\",\n padding: \"10px 26px 10px 12px !important\",\n transition: theme.transitions.create([\"border-color\", \"box-shadow\"]),\n \"&:focus\": {\n borderRadius: 4\n },\n },\n}))(InputBase);\n\nconst verticalTypeList = [\n {\n \"key\": \"AGRICULTURE\",\n \"value\": \"Agriculture\"\n },\n {\n \"key\": \"COMMUNICATION\",\n \"value\": \"Communication\"\n },\n {\n \"key\": \"CONSTRUCTION\",\n \"value\": \"Construction\"\n },\n {\n \"key\": \"EDUCATION\",\n \"value\": \"Education\"\n },\n {\n \"key\": \"ENERGY\",\n \"value\": \"Energy\"\n },\n {\n \"key\": \"ENTERTAINMENT\",\n \"value\": \"Entertainment\"\n },\n {\n \"key\": \"FINANCIAL\",\n \"value\": \"Financial\"\n },\n {\n \"key\": \"GAMBLING\",\n \"value\": \"Gambling\"\n },\n {\n \"key\": \"GOVERNMENT\",\n \"value\": \"Government\"\n },\n {\n \"key\": \"HEALTHCARE\",\n \"value\": \"Healthcare\"\n },\n {\n \"key\": \"HOSPITALITY\",\n \"value\": \"Hospitality\"\n },\n {\n \"key\": \"HUMAN_RESOURCES\",\n \"value\": \"Human Resources\"\n },\n {\n \"key\": \"INSURANCE\",\n \"value\": \"Insurance\"\n },\n {\n \"key\": \"LEGAL\",\n \"value\": \"Legal\"\n },\n {\n \"key\": \"MANUFACTURING\",\n \"value\": \"Manufacturing\"\n },\n {\n \"key\": \"NGO\",\n \"value\": \"Ngo\"\n },\n {\n \"key\": \"POLITICAL\",\n \"value\": \"Political\"\n },\n {\n \"key\": \"POSTAL\",\n \"value\": \"Postal\"\n },\n {\n \"key\": \"PROFESSIONAL\",\n \"value\": \"Professional\"\n },\n {\n \"key\": \"REAL_ESTATE\",\n \"value\": \"Real Estate\"\n },\n {\n \"key\": \"RETAIL\",\n \"value\": \"Retail\"\n }\n];\n\nconst GeneralInformation = ({ inputScrollToViewRef, formData, callback, errorCallback, a2pDlcError }) => {\n const handleFormDataChange = (name, value) => {\n if (name === \"firstName\"){\n if (value.trim() === \"\"){\n errorCallback(\"firstName\",\"Firstname is required!\");\n }else{\n errorCallback(\"firstName\",\"\");\n }\n }else if (name === \"lastName\"){\n if (value.trim() === \"\"){\n errorCallback(\"lastName\",\"Lastname is required!\");\n }else{\n errorCallback(\"lastName\",\"\");\n }\n }else if (name === \"verifiedAddress\"){\n if (value.trim() === \"\"){\n errorCallback(\"verifiedAddress\",\"Verified Address is required!\");\n }else {\n errorCallback(\"verifiedAddress\",\"\");\n }\n }else if (name === \"city\"){\n if (value.trim() === \"\"){\n errorCallback(\"city\",\"City is required!\");\n }else {\n errorCallback(\"city\",\"\");\n }\n }else if (name === \"state\"){\n if (value.trim() === \"\"){\n errorCallback(\"state\",\"State is required!\");\n }else {\n errorCallback(\"state\",\"\");\n }\n }else if (name === \"zipCode\"){\n if (value.trim() === \"\"){\n errorCallback(\"zipCode\",\"Postal/Zip Code is required!\");\n }else {\n errorCallback(\"zipCode\",\"\");\n }\n }else if (name === \"verifiedEmail\"){\n if (value.trim() === \"\"){\n errorCallback(\"verifiedEmail\",\"Email Address is required!\");\n }else if (!Utils.isValidEmail(value)){\n errorCallback(\"verifiedEmail\",\"Email Address must be valid!\");\n }else {\n errorCallback(\"verifiedEmail\",\"\");\n }\n }else if (name === \"verifiedNumber\"){\n if (value.trim() === \"\"){\n errorCallback(\"verifiedNumber\",\"Mobile Number is required!\");\n }else if (!Utils.isValidMobileNumber(value)){\n errorCallback(\"verifiedNumber\",\"Mobile Number must be valid!\");\n }else {\n errorCallback(\"verifiedNumber\",\"\");\n }\n }else if (name === \"brandName\"){\n if (value.trim() === \"\"){\n errorCallback(\"brandName\",\"Brand Name is required!\");\n }else {\n errorCallback(\"brandName\",\"\");\n }\n }else if (name === \"vertical\"){\n if (value.trim() === \"\"){\n errorCallback(\"vertical\",\"Business Type is required!\");\n }else {\n errorCallback(\"vertical\",\"\");\n }\n }\n callback(name, value);\n };\n\n const renderErrorMessage = (fieldName) => {\n return \n
\n Read before answering questions:
\nBefore the phone companies are willing to approve your messaging campaigns they need to review some examples of the types of messages you intend to send. Complete the info below.
\n\n
\n \n inputScrollToViewRef.current[0] = el} className={Styles.formControl}>\n \n \n How do end users consent to receive messages from you?\n *\n \n {\n formData.useCase &&\n {\n // A2pSuggestion({\n // suggestionTitle: \"Message Flow Suggestions\",\n // suggestions: CODE_WISE_DATA.MESSAGE_FLOW,\n // onChange: (value) => {\n // handleFormDataChange(\"messageFlow\", value)\n // }\n // });\n\n A2pLearnMore({\n title: \"How do end-users consent to receive messages?\",\n innerBody: {handleFormDataChange(\"messageFlow\", e.target.value)}}\n multiline\n />\n {renderErrorMessage(\"messageFlow\")}\n Min length: 40 characters. Max length: 2084 characters.\n \n {/* inputScrollToViewRef.current[1] = el} className={Styles.formControl}>*/}\n {/* */}\n {/* Opt-out Keywords*/}\n {/* **/}\n {/* */}\n {/* {handleFormDataChange(\"optOutKeywords\", e.target.value)}}*/}\n {/* multiline*/}\n {/* />*/}\n {/* {renderErrorMessage(\"optOutKeywords\")}*/}\n {/* Opt-out keywords are keywords your contacts can text you to automatically opt-out to receive messages.We recommend using the examples we provide above, but you can also add your own.*/}\n {/* Max length: 255 characters.*/}\n {/* */}\n {/* inputScrollToViewRef.current[2] = el} className={Styles.formControl}>*/}\n {/* */}\n {/* Opt-out Message*/}\n {/* **/}\n {/* */}\n {/* {handleFormDataChange(\"optOutMessage\", e.target.value)}}*/}\n {/* multiline*/}\n {/* />*/}\n {/* {renderErrorMessage(\"optOutMessage\")}*/}\n {/* Min length: 20 characters. Max length: 320 characters.*/}\n {/* */}\n {/* inputScrollToViewRef.current[3] = el} className={Styles.formControl}>*/}\n {/* */}\n {/* Help Keywords*/}\n {/* **/}\n {/* */}\n {/* {handleFormDataChange(\"helpKeywords\", e.target.value)}}*/}\n {/* multiline*/}\n {/* />*/}\n {/* {renderErrorMessage(\"helpKeywords\")}*/}\n {/* Help keywords are keywords your contacts can text you to automatically to get any inquiry or help via messages.We recommend using the examples we provide above, but you can also add your own.*/}\n {/* Max length: 255 characters.*/}\n {/* */}\n {/* inputScrollToViewRef.current[4] = el} className={Styles.formControl}>*/}\n {/* */}\n {/* Help Message*/}\n {/* **/}\n {/* */}\n {/* {handleFormDataChange(\"helpMessage\", e.target.value)}}*/}\n {/* multiline*/}\n {/* />*/}\n {/* {renderErrorMessage(\"helpMessage\")}*/}\n {/* Min length: 20 characters. Max length: 320 characters.*/}\n {/* */}\n
\n 10DLC regulations require that all contacts opt-in to receive messages from your company. The phone companies are looking to see the exact method you use to obtain this consent. The rules and the language they are looking for are very specific. To make this easier we recommend using our pre-filled answer below. We've also included a link to a pre-built, customized opt-in form for your business.
(Recommended - use our pre-filled answer)
\n
\n );\n}\n\nexport default GeneralInformation;","import React from \"react\";\nimport Styles from \"./Styles.module.css\";\n\nconst loadingGifImg = \"https://d24gujj67p1uc1.cloudfront.net/asset/images/releases/1.0.0/loadr.gif\";\n\nconst Processing = ({ ...rest }) => {\n return(\n \n
\n Read before answering questions:
\nWhen completing this page please reference your official IRS documentation. (EIN documents, W2, W9, or CP575). Answer the questions carefully to ensure the info you provide matches your official IRS documents EXACTLY. Inaccuracies can lead to manual reviews and long delays in getting your business registered.
\n\n
\n \n \n \n inputScrollToViewRef.current[0] = el} className={Styles.formControl}>\n \n First Name\n *\n \n {handleFormDataChange(\"firstName\", e.target.value)}}\n />\n {renderErrorMessage(\"firstName\")}\n \n \n \n inputScrollToViewRef.current[1] = el} className={Styles.formControl}>\n \n Last Name\n *\n \n {handleFormDataChange(\"lastName\", e.target.value)}}\n />\n {renderErrorMessage(\"lastName\")}\n \n \n \n \n \n inputScrollToViewRef.current[2] = el} className={Styles.formControl}>\n \n Verified Address\n *\n \n {handleFormDataChange(\"verifiedAddress\", e.target.value)}}\n />\n {renderErrorMessage(\"verifiedAddress\")}\n \n \n \n inputScrollToViewRef.current[3] = el} className={Styles.formControl}>\n \n City\n *\n \n {handleFormDataChange(\"city\", e.target.value)}}\n />\n {renderErrorMessage(\"city\")}\n \n \n \n \n \n inputScrollToViewRef.current[4] = el} className={Styles.formControl}>\n \n State\n *\n \n {handleFormDataChange(\"state\", e.target.value)}}\n />\n {renderErrorMessage(\"state\")}\n \n \n \n inputScrollToViewRef.current[5] = el} className={Styles.formControl}>\n \n Postal/Zip Code\n *\n \n {handleFormDataChange(\"zipCode\", e.target.value)}}\n />\n {renderErrorMessage(\"zipCode\")}\n \n \n \n \n \n inputScrollToViewRef.current[6] = el} className={Styles.formControl}>\n \n Verified Email\n *\n \n {handleFormDataChange(\"verifiedEmail\", e.target.value)}}\n />\n {renderErrorMessage(\"verifiedEmail\")}\n \n \n \n inputScrollToViewRef.current[7] = el} className={Styles.formControl}>\n \n Verified Number\n *\n [An OTP will send to this number]\n \n {handleFormDataChange(\"verifiedNumber\", e.target.value)}}\n />\n Number cannot be which you've acquired from a CPaaS provider such as Twilio.\n {renderErrorMessage(\"verifiedNumber\")}\n \n \n \n inputScrollToViewRef.current[8] = el} className={Styles.formControl}>\n \n Brand Name\n *\n \n Brand name must be the your real business name. If you don't have any business name provide your first and last name, but you can also provide a DBA name if there is one.\n {handleFormDataChange(\"brandName\", e.target.value)}}\n />\n {renderErrorMessage(\"brandName\")}\n \n inputScrollToViewRef.current[9] = el} className={Styles.formControl}>\n \n Business Type\n *\n \n { handleFormDataChange(\"vertical\", e.target.value) }}\n input={ \n
\n \n Sole Proprietor Registration Tips:\n
\n \n
\n \n
Sole proprietors must register using their own unique information. If you are a branch office or a franchise of a larger brand DO NOT submit the registration using the larger brand's info.
\n\nExample:
\nJohn Doe owns a local Allstate insurance agency. When John completes his sole proprietor registration he needs to provide his own info, not the info for Allstate.
\n\nThe brand name must be your real business name. If you don't have a business name just provide your first and last name.
\n\nBrand Name Examples:
\nJohn Doe Insurance Agency
\nJohn Doe
\n \n\n \n
\n );\n};\n\nexport default Processing;","const icons = {\n success: ,\n failed: \n};\n\nexport default icons;","import React from \"react\";\nimport Styles from \"./Styles.module.css\";\nimport Icons from \"./Icons\";\n\nconst ResponseMessage = ({ response, hasError, hasSuccess, handleClose, ...rest }) => {\n\n return(\n \n Processing Registration\n
\n\n Your Submission has been received and we are processing your registration.\n This process can make several minutes to complete. Please! Do not close the window.\n
\n\n handleClose({onlyClose: true, redirect: true})}\n >\n Close the window\n
:\n \n {hasSuccess !== \"\" ? Icons.success : Icons.failed}\n
\n \n {hasError === \"\" ? \"Thank you for completing your registration!\" : hasError}\n
\n {\n hasSuccess !== \"\" ?\n\n
\n );\n },\n closeOnClickOutside: props.closeOnClickOutside,\n overlayClassName: Styles.overlay\n })\n )\n}\nexport default App;","import { confirmAlert } from \"react-confirm-alert\";\nimport \"react-confirm-alert/src/react-confirm-alert.css\";\nimport Styles from \"./PreviewSample.module.css\";\nimport { Box, Button, Paper, Typography, withStyles } from \"@material-ui/core\";\n\nconst SampleMessage = withStyles((theme) => ({\n root: {\n \"label + &\": {\n marginTop: theme.spacing(3),\n color: \"black !important\",\n fontSize: \"20px!important\"\n },\n width:\"100%\",\n fontSize: \"14px !important\",\n height: \"auto !important\",\n minHeight:\"100px !important\",\n color: \"#707070 !important\",\n borderRadius: \"4px !important\",\n position: \"relative\",\n border: \"1px solid #ced4da!important\",\n padding: \"10px 12px !important\",\n marginBottom: \"0!important\",\n lineBreak:\"anywhere\"\n },\n}))(Box);\n\nconst App = (props) => {\n return (\n confirmAlert({\n customUI: ({ onClose }) => {\n props.setIsPreviewed(true);\n \n return (\n \n Please preview your sample messages and make any necessary edits before moving on to the next step.\n \n
\n \n This is what your sample messages will look like when we combine the
Sender Identification + Your Message + the Opt-Out Language. \n
\n Sender Identification + Your Message + the Opt-Out Language.
\n
\n \n \n {props.formData.senderIdentification1}\n
\n {props.formData.sampleMessage1}\n
\n {props.formData.optOutLanguage1}\n \n
\n\n {props.formData.senderIdentification2}\n
\n {props.formData.sampleMessage2}\n
\n {props.formData.optOutLanguage2}\n \n
\n Sample Message #1
\n\n {props.formData.sampleMessage1}\n
\n {props.formData.optOutLanguage1}\n
\n
Sample Message #2
\n\n {props.formData.sampleMessage2}\n
\n {props.formData.optOutLanguage2}\n
\n \n
\n \n {\n steps.map((step, index) => (\n
\n\n \n {(index + 1)}. {step.label}\n
\n ))\n }\n \n
\n\n \n
\n \n
\n {getStepTitle(activeStep)}
\n\n \n \n
\n \n {getStepBody()}\n
\n \n {\n activeStep !== 0 &&\n (\n \n )\n }\n \n
\n ![\"Powered](\"https://s3.us-east-1.amazonaws.com/pypepro/user/1/6VjSeGclapKlu5siMSU9DdhLA3SIQ3eeu9PLTNBK.png\"\n)
\n 
\n 
*/}\n \n\n 
\n 
*/}\n 
\n 
![\"Congratulation\"]({process.env.REACT_APP_CDN_LINK+\"asset/images/registration/releases/1.0.0/congratulations.png\"})
\n ![\"Message](\"https://d24gujj67p1uc1.cloudfront.net/assets/bulk-email/images/releases/1.0.1/message-00910.svg\")
\n\n ![\"Message](\"https://d24gujj67p1uc1.cloudfront.net/assets/bulk-email/images/releases/1.0.1/message-00909.svg\")
\n\n