- \n {\" \"}\n {arrayOfTeamSupport.slice(2, arrayOfUsers.length).map((personal, index) => {\n const info = Object.entries(personal)[0];\n const email = info[0];\n\n if (teamSupports.includes(email)) {\n const personalInfo = info[1];\n return (\n
- \n
\n {personalInfo.job_title}:
{personalInfo.name}
\n \n \n );\n }\n })}\n
\n
`;\n \n if (index < 4) {\n return (\n \n );\n }\n \n })}\n ${info[1].name}
\n\n
\n
\n ${props.company_name}
\n${info[1].job_title ? personal.job_title : \"N/A\"}
\n${info[0]}
\nTel: ${info[1].phone_number}
\n\n
`;\n\n const lastInfo = `${info[1].name}
\n\n
\n
\n ${props.company_name}
\n${info[1].job_title ? personal.job_title : \"N/A\"}
\n${info[0]}
\nTel: ${info[1].phone_number}
\n\n \n
`;\n \n if (index > 3 && index < 8 && arr.length <= 8) {\n return (\n \n );\n }\n if (index > 3 && index < 7 && arr.length > 8) {\n return (\n \n );\n }\n if (index === 8 && arr.length > 8) {\n return (\n \n );\n }\n \n })}\n \n
\n
\n \n ${props.company_name}
\nAdditional Users
\n\n
\n \n - \n ${clientUsersOverage.map(el => `
- ${el} `).join('')}\n
N/A
:{department}
}\n{access}
\n{access}
\nGlobal:
\n \n {props.client_account.global_website_permissions != null && (\n <>\n\n {permissionsExplainations[props.client_account.global_website_permissions - 1]}\n
\n \n \n )}\nCustom:
\n \n{permissionsLabel[parseInt(web.permission) - 1]}
\n \n\n
\n );\n}\n","import React from 'react'\nimport { Row, Col, Form, Modal, Button } from 'react-bootstrap'\n\nclass ZoomRedirectPopup extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n show: this.props.show\n }\n }\n\n render() {\n const datapulsePreview = require(\"images/datapulse-tablet-preview.png\");\n const datapulseLogo = require(\"images/logos/datapulse-logo-blue-small.png\");\n return (\n <>\n {collapse ? chevronDown : chevronTop}
\n {/* remove class collapse on below for animation purposes */}\n \n
\n
\n \n
\n \n {props.client_logo ? (\n
\n\n \n {props.company_name}
\n )}\n\n
\n
\n \n
\n
\n \n - \n
- \n
Account
\n \n - \n
Team
\n \n \n {chevronLeft}\n \n
\n
\n \n {chevronRight}\n \n \n
\n \n
\n \n
\n\n Website Platform:
\n {websitePlatformLogo}\n\n
\n \n
\n
\n Client Users:
\n {renderAvatarClients}\n\n \n {/* \n \n {permissionsExplainations[props.client_account.global_website_permissions - 1]}\n \n }>\n \n {props.client_account.global_website_permissions}\n \n */}\n
\n )}\n
\n )}\n
\n Comfort Level with Site Changes:
\n {props.client_account.custom_website_permissions_enabled ? (\n\n \n \n \n
\n ) : (\n \n
\n Custom:
\nHover for details
\nGlobal:
\n */}\n {props.client_account.global_website_permissions && (\n{permissionsExplainations[props.client_account.global_website_permissions - 1]}
\n \n\n {/*\n
\n \n
\n \n
\n Team Lead(s):
\n{avatarTeamLead}
\n \n
\n Team Support:
\n{avatarTeamSupport}
\n \n
\n - {renderDepartmentsLegends}
\n
\n
\n \n
\n
\n Access Granted:
\n- {renderAccessesList}
\n
\n - {renderAccessesLegends}
\n
\n \n \n \n Zoom has evolved... \n \n \n \n 
\n \n
\n \n 
\n \n
\n \n \n \n
\n \n
\n Introducing
\nDue to the emergence of Zoom (the communication software that exploded in popularity in 2020), we have since rebranded our Zoom to be called \"DataPulse\". Not only did it get a new name, but also a new look, and tons of exciting features in the works!
\n \nYou can still login using your old Zoom credentials.
\n \n \nDataPulse
\nReal-time metrics reporting
\n \n\n
\n \n You see everything we see in real time via our proprietary reporting platform, DataPulse. See organic traffic projections, all your keyword rankings, your personal team with their contact info, and more.
\n\n
\n Anytime, anywhere.
\n\n {tabletImg}\n
\n \n For assistance or help getting set up with DataPulse, contact your account representative or
support@digitalposition.com
\n
\n );\n}\n","import React from 'react'\nimport Tab from 'react-bootstrap/Tab'\nimport Nav from 'react-bootstrap/Nav'\nimport MailingLists from 'admin/mailing_lists//MailingLists'\nimport LeftIndent from 'utils/LeftIndent';\n\nclass Admin extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n tabLocation: \"\"\n }\n }\n componentDidMount()\n {\n let hashLoc = location.hash.replace(\"#\", \"\");\n if (hashLoc != \"\") {\n this.setState({tabLocation: hashLoc})\n }\n else {\n location.hash = \"#mailingLists\"\n this.setState({tabLocation: \"mailingLists\"})\n }\n }\n\n selectTab (key)\n {\n location.hash = \"#\" + key\n this.setState({tabLocation: key})\n }\n\n render() {\n return (\n <>\n DataPulse Change History
\n- \n {renderLogs.map((log, index) => {\n const user = props.users.find((el) => el.id == log[\"who_dunn_it\"]);\n const userEmail = user.email;\n const client = props.clients.find((el) => el.id == log[\"client_id\"]);\n const time = moment(log.updated_at).format(\"YYYY-MM-DD hh:mm A\");\n let userName = \"\";\n if (log.table == \"users\") {\n userName = props.users.find((el) => el.id == log[\"client_id\"]);\n }\n const createOrUpdate = log.version == 1 ? \"created with value\" : \"updated\";\n const fieldNames = Object.keys(log.log_data);\n const valuesChange = Object.values(log.log_data);\n\n return (\n
- \n
{\n console.log(this)\n const icon = $(e.target).find(\".fas\");\n if (icon.hasClass(\"fa-sort-up\")) {\n icon.removeClass(\"fa-sort-up\").addClass(\"fa-sort-down\");\n } else {\n icon.removeClass(\"fa-sort-down\").addClass(\"fa-sort-up\");\n }\n }}\n >\n \n\n \n\n {log.table == \"users\"\n ? `${userEmail} updated user ${userName.email} info at ${time} `\n : `${userEmail} ${createOrUpdate} ${log.table} for ${jsDig([\"company_name\"], client)} at ${time} `}\n
\nRead more
\n\n \n- \n {fieldNames.map((field, index) => {\n if (field !== \"updated_at\" && field !== \"created_at\" && field !== \"id\") {\n let detailsChange = `${field} was ${createOrUpdate} ${\n log.version > 1\n ? `from ${\n JSON.stringify(jsDig([\"previous_data\", field], log)) && JSON.stringify(jsDig([\"previous_data\", field], log)).replace(/\\\\/g, \"\")\n }`\n : \"\"\n }\n ${log.version > 1 ? \" to \" : \"\"} \n ${JSON.stringify(valuesChange[index]).replace(/\\\\/g, \"\")} `;\n if (log.landing_page_id) {\n detailsChange = `Landing Page ${\n props.landing_page_groups.find((el) => el.id == log.landing_page_id).name\n } ${field} is ${createOrUpdate} ${\n log.version > 1\n ? `from ${\n JSON.stringify(jsDig([\"previous_data\", field], log)) &&\n JSON.stringify(jsDig([\"previous_data\", field], log)).replace(/\\\\/g, \"\")\n }`\n : \"\"\n } to ${JSON.stringify(valuesChange[index]).replace(/\\\\/g, \"\")}`;\n }\n if (log.table == \"campaign_groups\") {\n const campaign = props.campaign_groups.find((el) => el.id == log.campaign_id);\n detailsChange = `Campaign Group ${campaign.name} for ${campaign.section_type} ${field} is ${createOrUpdate} ${\n log.version > 1\n ? `from ${\n JSON.stringify(jsDig([\"previous_data\", field], log)) &&\n JSON.stringify(jsDig([\"previous_data\", field], log)).replace(/\\\\/g, \"\")\n }`\n : \"\"\n } to ${JSON.stringify(valuesChange[index]).replace(/\\\\/g, \"\")}`;\n }\n if (log.table == \"campaign_groups_social\") {\n const campaign = props.campaign_groups_social.find((el) => el.id == log.campaign_social_id);\n detailsChange = `Campaign Group ${campaign.name} for ${campaign.section_type} ${field} is ${createOrUpdate} ${\n log.version > 1\n ? `from ${\n JSON.stringify(jsDig([\"previous_data\", field], log)) &&\n JSON.stringify(jsDig([\"previous_data\", field], log)).replace(/\\\\/g, \"\")\n }`\n : \"\"\n } to ${JSON.stringify(valuesChange[index]).replace(/\\\\/g, \"\")}`;\n }\n return
- {detailsChange} ;\n }\n })}\n
\n );\n })}\n
Admin Settings
\n\n This tool is coming soon!?\n
\n \n \n this.setState({emailInputValue: e.target.value})} />\n \n
\n
\n );\n }\n}\n\nexport default MailingList;","import React from 'react'\nimport Tab from 'react-bootstrap/Tab'\nimport Col from 'react-bootstrap/Col'\nimport Row from 'react-bootstrap/Row'\nimport Nav from 'react-bootstrap/Nav'\nimport Form from 'react-bootstrap/Form'\nimport Button from 'react-bootstrap/Button'\nimport MailingList from 'admin/mailing_lists/MailingList'\n\nclass MailingLists extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n mailingLists: []\n }\n\n this.deleteMailingList = this.deleteMailingList.bind(this);\n }\n componentDidMount() {\n this.setState({\n mailingLists: this.props.mailingLists\n })\n }\n\n deleteMailingList(list_id)\n {\n $.ajax({\n url: \"/datapulse/admin/mailing_lists/\" + list_id,\n type: \"DELETE\",\n data: \"\",\n dataType: 'json',\n success: (data) => {\n const newMailingLists = this.props.state.filter((l) => l.id != list_id);\n this.setState({ mailingLists: newMailingLists });\n DP_FLASH([{ type: 'success', message: 'Mailing list successfully deleted' }])\n },\n error: (data) => {\n DP_FLASH([{ type: 'danger', message: 'Failed delete mailing list' }])\n }\n })\n }\n\n createMailingList()\n {\n $.ajax({\n url: \"/datapulse/admin/mailing_lists\",\n type: \"POST\",\n data: {\n mailing_list: {\n name: \"New Mailing List\",\n description: \"description...\"\n }\n },\n dataType: 'json',\n success: (data) => {\n const newMailingLists = [...this.state.mailingLists]\n newMailingLists.push(data);\n this.setState({ mailingLists: newMailingLists });\n DP_FLASH([{ type: 'success', message: 'Mailing list successfully deleted' }])\n },\n error: (data) => {\n DP_FLASH([{ type: 'danger', message: 'Failed delete mailing list' }])\n }\n })\n }\n\n render() {\n return (\n \n
\n {this.state.name}
\n \n\n this.setState({nameInputValue: e.target.value})}\n >\n \n \n \n
\n \n
\n \n {this.state.description}\n \n
\n\n this.setState({descriptionInputValue: e.target.value})}\n >\n \n \n \n \n
\n \n
\n \n - \n {\n this.state.emails.map( (email) => {\n return (\n
- \n \n {email}\n \n )\n })\n }\n
\n \n {\n this.state.mailingLists.map((l) => {\n return (\n
\n
\n );\n }\n}\n\nexport default MailingLists;\n","import React from 'react'\nimport Tab from 'react-bootstrap/Tab'\nimport Nav from 'react-bootstrap/Nav'\nimport LeftIndent from 'utils/LeftIndent'\nimport SubsByClient from 'alert_subscriptions/SubsByClient'\nimport SubsByUser from 'alert_subscriptions/SubsByUser'\n\nclass AlertSubscriptions extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n tabLocation: \"\"\n }\n }\n componentDidMount() {\n let hashLoc = location.hash.replace(\"#\", \"\");\n if (hashLoc != \"\") {\n this.setState({ tabLocation: hashLoc })\n }\n else {\n location.hash = \"#byClient\"\n this.setState({ tabLocation: \"byClient\" })\n }\n }\n\n addUser(email, sectionName, sectionId) {\n let returnedData = \"\";\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/subscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId\n },\n success: (data) => {\n returnedData = data;\n }\n })\n }\n return returnedData;\n }\n\n removeUser(email, sectionName, sectionId) {\n let removalSuccessful = false;\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/unsubscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId\n },\n success: () => {\n removalSuccessful = true;\n }\n })\n }\n return removalSuccessful;\n }\n\n searchClients(filter, clients) {\n filter = filter.toLowerCase();\n Object.values(clients).forEach((clientRow) => {\n let clientName = clientRow.getAttribute(\"data-client-name\").toLowerCase();\n if (!clientName.includes(filter)) {\n clientRow.style.display = \"none\";\n } else {\n clientRow.style.display = \"table-row\";\n }\n })\n }\n\n selectTab(key) {\n location.hash = \"#\" + key;\n this.setState({ tabLocation: key });\n }\n\n render() {\n return (\n <>\n \n \n
\n Alert Subscriptions
\n\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\treturn (\n\t\t\t\n\t\t\t\t\t\t\t{users}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n this.removeUser(e) : (e) => this.addUser(e)} />\n
\n \n Subscribe to {section} Alerts
\n\n this.searchUsers(e)} />\n \n
\n \n {userSearchList}\n
\n \n
\n - \n {users}\n
Subscriptions By Client
\n\n \n \n
\n
\n \n )\n }\n}\n\nexport default SubsByClient;\n","import React from 'react'\nimport { Table, Row, Col, Form } from 'react-bootstrap';\nimport ManageSubsByUser from 'alert_subscriptions/ManageSubsByUser'\nimport DefaultAvatar from 'utils/DefaultAvatar'\nimport CustomAvatar from 'utils/CustomAvatar'\nimport jsDig from 'utils/jsDig'\n\nclass SubsByUser extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n selectedUser: jsDig([\"users\", this.props.defaultUser], this.props) ? this.props.defaultUser : Object.keys(this.props.users)[0],\n users: [],\n searchVisible: false\n };\n }\n\n toggleSearch(e) {\n let arrow = e.target.querySelector('.fas');\n if (arrow.classList.contains('fa-sort-up')) {\n arrow.classList.remove('fa-sort-up');\n arrow.classList.add('fa-sort-down');\n } else {\n arrow.classList.remove('fa-sort-down');\n arrow.classList.add('fa-sort-up');\n }\n this.setState({searchVisible: !this.state.searchVisible});\n }\n\n searchClients(event) {\n let filter = event.target.value;\n let clients = document.getElementsByClassName(\"client-row-by-user\");\n this.props.searchClients(filter, clients);\n }\n\n searchUsers(event) {\n let filter = event.target.value.toLowerCase();\n let filteredUsers = {};\n let count = 0;\n Object.keys(this.props.users).forEach((userEmail) => {\n let user = this.props.users[userEmail];\n // If less than 10 results displayed && name or email matches input\n if (count < 10 && (userEmail.toLowerCase().includes(filter) || user.name.toLowerCase().includes(filter))) {\n filteredUsers[userEmail] = user;\n count++;\n }\n });\n this.setState({ users: filteredUsers });\n }\n\n changeUser(event) {\n let email = event.target.getAttribute(\"data-email\");\n if (email && email != \"\") {\n this.setState({ selectedUser: email });\n }\n }\n\n render() {\n let usersList = this.state.users;\n let users = Object.keys(usersList).map((userEmail) => {\n let user = usersList[userEmail];\n return (\n this.changeUser(e)}>\n +\n {user.name}\n \n )\n })\n\n\n let selectedUser = this.props.users[this.state.selectedUser];\n let bigAvatar = | \n Client Name\n \n \n this.searchClients(e)} />\n \n | \n PPC | \nSEO | \n|||
|---|---|---|---|---|---|
| Search | \nSocial | \nDisplay | \nVideo | \n||
{client.company_name} | \n \n | \n \n | \n \n | \n \n | \n \n | \n
Subscriptions By User
\n\n \n
\n\n
\n \n )\n }\n}\n\nexport default SubsByUser;\n","import React from \"react\";\nimport DefaultAvatar from \"utils/DefaultAvatar\";\nimport CustomAvatar from \"utils/CustomAvatar\";\nimport { Row, Col, Form, Modal, Button } from \"react-bootstrap\";\n\nclass SubscribeUsersModal extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tshow: false,\n\t\t\tusers: this.props.users,\n\t\t\tnewSubs: [],\n\t\t};\n\t}\n\n\tcomponentDidMount() {\n\t\t// Filter out users who are already subscribed\n\t\tlet unsubscribedUsers = {};\n\t\tObject.keys(this.state.users).forEach((userEmail) => {\n\t\t\tif (!this.props.subscribedUsers.includes(userEmail)) {\n\t\t\t\tunsubscribedUsers[userEmail] = this.props.users[userEmail];\n\t\t\t}\n\t\t});\n\t\tthis.setState({ users: unsubscribedUsers });\n\t}\n\ttoggleUser(e) {\n\t\tlet userEmail = e.target.getAttribute(\"data-email\");\n\t\tlet newSubs = this.state.newSubs;\n\t\tif (this.state.newSubs.includes(userEmail)) {\n\t\t\tnewSubs.splice(newSubs.indexOf(userEmail), 1);\n\t\t} else {\n\t\t\tnewSubs.push(userEmail);\n\t\t}\n\t\tthis.setState({ newSubs: newSubs });\n\t}\n\n\tsubscribeUsers(e) {\n\t\tthis.state.newSubs.forEach((userEmail) => {\n\t\t\tif (userEmail && userEmail != \"\") {\n\t\t\t\tlet data = this.props.addUser(\n\t\t\t\t\tuserEmail,\n\t\t\t\t\tthis.props.sectionName,\n\t\t\t\t\tthis.props.sectionId\n\t\t\t\t);\n\t\t\t\tthis.props.addUserCallback(userEmail);\n\t\t\t}\n\t\t});\n\t\tthis.setState({ show: false });\n\t\tlet sectionTitle = this.props.sectionName.split(\"Section\")[0];\n\t\tsectionTitle = sectionTitle == \"Seo\" ? \"SEO\" : sectionTitle;\n\t\t{\n\t\t\tthis.state.newSubs.length > 1\n\t\t\t\t? DP_FLASH([\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: \"success\",\n\t\t\t\t\t\t\tmessage: `${this.state.newSubs.length} users were subscribed to ${this.props.clientName} - ${sectionTitle}`,\n\t\t\t\t\t\t},\n\t\t\t\t ])\n\t\t\t\t: DP_FLASH([\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: \"success\",\n\t\t\t\t\t\t\tmessage: `${this.state.newSubs.length} user was subscribed to ${this.props.clientName} - ${sectionTitle}`,\n\t\t\t\t\t\t},\n\t\t\t\t ]);\n\t\t}\n\t}\n\n\tsearchUsers(e) {\n\t\tlet filter = e.target.value.toLowerCase();\n\t\tlet visibleUsers = {};\n\t\tObject.keys(this.props.users).forEach((userEmail) => {\n\t\t\tlet user = this.props.users[userEmail];\n\t\t\t// If the user is not subscribed already && their name or email matches input\n\t\t\tif (\n\t\t\t\t!this.props.subscribedUsers.includes(userEmail) &&\n\t\t\t\t(user.name.toLowerCase().includes(filter) ||\n\t\t\t\t\tuserEmail.toLowerCase().includes(filter))\n\t\t\t) {\n\t\t\t\tvisibleUsers[userEmail] = user;\n\t\t\t}\n\t\t});\n\t\tthis.setState({ users: visibleUsers });\n\t}\n\n\trender() {\n\n\t\tlet sectionTitle = this.props.sectionName.split(\"Section\")[0];\n\t\tsectionTitle = sectionTitle == \"Seo\" ? \"SEO\" : sectionTitle;\n\n\t\tlet newSubs = this.state.newSubs.map((userEmail) => {\n\t\t\tlet user = this.props.users[userEmail];\n\t\t\treturn (\n\t\t\t\t\n { bigAvatar }\n
\n \n
\n \n \n
\n this.toggleSearch(e)}>\n
\n {selectedUser.name}
\n\n \n \n this.searchUsers(e)} />\n
\n \n {users}\n
\n \n \n \n
\n
\n | \n Client Name\n \n \n this.searchClients(e)} />\n \n | \n PPC | \nSEO | \n|||
|---|---|---|---|---|---|
| Search | \nSocial | \nDisplay | \nVideo | \n||
{client.company_name} | \n
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{`${this.props.clientName} - Add ${sectionTitle} Subscribers`} \n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n}\n\nexport default SubscribeUsersModal;\n","import React, { useState } from \"react\";\nimport { Button, Modal } from \"react-bootstrap\";\nimport Counter from \"utils/Counter\";\n\nfunction AlertSnoozeModal(props) {\n\tconst [show, setShow] = useState(false);\n\tconst [count, setCount] = useState(7);\n\tconst [snoozed, setSnooze] = useState(false);\n\tconst handleClose = () => setShow(false);\n\tconst handleShow = () => setShow(true);\n\tconst snoozeSrc = require(\"images/icons/snooze-icon.png\");\n\tlet scriptName = props.alert.script_name ? (props.alert.script_name\n\t\t.split(\"_\")\n\t\t.map((a) => {\n\t\t\treturn a.charAt(0).toUpperCase() + a.substring(1);\n\t\t})\n\t\t.join(\" \")) : \"\";\n\n\tconst increment = () => {\n\t\tsetCount((prevCount) => count + 1);\n\t};\n\n\tconst decrement = () => {\n\t\tif (count > 1) {\n\t\t\tsetCount((prevCount) => count - 1);\n\t\t}\n\t};\n\n\tconst snoozeAlert = () => {\n\t\tsetShow(false);\n\t\tsetSnooze(true);\n\t\tprops.snoozeAlert(props.alert.id, count, props.alert.script_name);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t this.searchUsers(e)}\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Enter a name or email address...\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t- \n\t\t\t\t\t\t\t\t\t\t{Object.keys(this.state.users).map((userEmail) => {\n\t\t\t\t\t\t\t\t\t\t\tlet user = this.state.users[userEmail];\n\t\t\t\t\t\t\t\t\t\t\tlet avatar = (\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{avatar}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t {user.name}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t {userEmail}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tTo be subscribed:\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t{newSubs}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t this.setState({ show: false })}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t this.subscribeUsers(e)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tSubscribe users\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n \n \n Resolve All\n \n )}\n
\n\n {!this.props.resolvedView && allResolved ? (\n <>\n \n {this.props.resolvedView ? \"Resolved Alerts\" : \"Alerts\"} for{\" \"}\n {this.props.clientName}\n
\n {!this.props.resolvedView && !allResolved && (\n\n
\n \n ) : (\n <>\n All set for now!
\n\n
\n \"{quote.text}\"
\n- {quote.author}
\n\n \n \n
\n \n
\n Today's Alerts ({today.toLocaleDateString()})
\n\n \n \n
\n \n
\n Yesterday's Alerts ({yesterday.toLocaleDateString()})
\n\n \n \n
\n \n )}\n \n );\n }\n}\n\nexport default AccountAlerts;\n","import React from 'react';\nimport AlertSnoozeModal from 'alerts/AlertSnoozeModal'\nimport { Button } from 'react-bootstrap';\n\nclass Alert extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n showDetails: false,\n resolved: this.props.alert.resolved\n }\n }\n\n toggleDetails() {\n this.setState({ showDetails: !this.state.showDetails });\n }\n\n toggleResolved() {\n this.props.resolveAlert(this.props.alert.id, !this.state.resolved);\n this.setState({ resolved: !this.state.resolved });\n }\n\n render() {\n let section = capitalize(this.props.alert.alert_type.toLowerCase())\n if (section == \"Seo\") {\n section = \"SEO\";\n }\n\n return (\n \n
\n \n All Other Alerts (including and prior to{\" \"}\n {twoDaysAgo.toLocaleDateString()})\n
\n\n \n {this.props.alert.emergency &&\n \n }\n {this.props.alert.text}\n \n {this.props.alert.secondary_text &&\n <>\n this.toggleDetails()}>\n \n \n {this.state.showDetails ? \"Collapse Details\" : \"View Details\"}\n \n \n\n \n }\n
\n \n {section}\n
\n \n
\n \n
\n \n \n \n {alerts}\n \n
\n
\n :\n \n No alerts for this time period\n
\n }\n \n )\n }\n}\n\nexport default AlertList;\n","import React from 'react';\nimport AlertSnoozeModal from 'alerts/AlertSnoozeModal'\nimport { Button } from 'react-bootstrap';\n\nclass Alert extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n showDetails: false,\n alert: this.props.alert\n }\n }\n\n toggleDetails() {\n this.setState({ showDetails: !this.state.showDetails });\n }\n\n toggleResolved() {\n this.props.resolveAlert(this.props.alert.id, !this.state.alert.resolved);\n let alertTemp = this.state.alert;\n alertTemp.resolved = !this.state.alert.resolved\n this.setState({ alert: alertTemp });\n }\n\n render() {\n let section = capitalize(this.props.alert.alert_type.toLowerCase())\n if (section == \"Seo\") {\n section = \"SEO\";\n }\n\n return (\n \n \n {this.props.alert.emergency &&\n \n }\n {this.props.alert.text}\n \n {this.props.alert.secondary_text &&\n <>\n this.toggleDetails()}>\n \n \n Details\n \n \n \n }\n
\n \n {section}\n
\n \n
\n \n
\n \n\t\t\t\t\t
\n\t\t\t\n\t\t);\n\t}\n}\n\nexport default AlertContainer;\n","import React from \"react\";\nimport AlertContainer from \"alerts/alert_summary/AlertContainer\";\n\nclass AlertList extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t}\n\n\trender() {\n\t\tlet alertList = Object.keys(this.props.alerts).map((companyName) => {\n\t\t\tlet alerts = this.props.alerts[companyName];\n\t\t\treturn (\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tResolve All\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t{companyLogo ? (\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t{this.props.companyName}
\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{alerts}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t{alertList}\n\t\t\t\t\t
\n\t\t\t\t) : (\n\t\t\t\t\t\n\t\t\t\t\t\tNo alerts for this time period\n\t\t\t\t\t
\n\t\t\t\t)}\n\t\t\t\n\t\t);\n\t}\n}\n\nexport default AlertList;\n","import React from \"react\";\nimport LeftIndent from \"utils/LeftIndent\";\nimport AlertList from \"alerts/alert_summary/AlertList\";\nimport RandomQuoteGenerator from \"utils/RandomQuoteGenerator\";\nimport { Button } from \"react-bootstrap\";\nclass AlertSummary extends React.Component {\n constructor(props) {\n super(props);\n }\n\n refreshPage = () => {\n location.reload();\n };\n\n render() {\n const today = new Date();\n const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);\n const twoDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2);\n let quote = RandomQuoteGenerator(this.props);\n let allResolved =\n Object.keys(this.props.alerts.todaysAlerts).length == 0 &&\n Object.keys(this.props.alerts.yesterdaysAlerts).length == 0 &&\n Object.keys(this.props.alerts.otherAlerts).length == 0;\n return (\n <>\n \n
\n\n {allResolved ? (\n <>\n Alert Summary
\n {!allResolved && (\n \n )}\n\n
\n \n ) : (\n <>\n All set for now!
\n\n
\n \"{quote.text}\"
\n- {quote.author}
\n\n \n \n
\n \n
\n Today's Alerts ({today.toLocaleDateString()})
\n\n \n \n
\n \n
\n Yesterday's Alerts ({yesterday.toLocaleDateString()})
\n\n \n \n
\n \n )}\n \n );\n }\n}\n\nexport default AlertSummary;\n","import React, { useState, useEffect } from \"react\";\nimport { Button, Col, Row, Container } from \"react-bootstrap\";\nimport { capitalize } from \"lodash-es\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport PlatformSpecific from \"./PlatformSpecific\";\n\nfunction ApiAccess(props) {\n // Simplified platform state handling\n const [platforms, setPlatforms] = useState(props.api_platforms);\n const [mccId, setMccId] = useState(props.organization.google_ads_mcc_id);\n const [showAlert, setShowAlert] = useState(false);\n\n useEffect(() => {\n const googleAds = platforms.google_ads;\n const showAlertCondition = googleAds.authenticated && (!mccId || mccId.length !== 10);\n setShowAlert(showAlertCondition);\n }, [platforms.google_ads, mccId]);\n\n\n const openAuthPage = (authUrl) => {\n window.open(authUrl, \"_blank\");\n };\n\n const renderAuthButton = (platformKey) => {\n const platform = platforms[platformKey];\n const isGoogleService = platform.title.toLowerCase().includes(\"google\");\n \n if (platform.authenticated) {\n return (\n <>\n \n \n );\n } else if (isGoogleService) {\n const googleBtn = require(\"images/google/btn_google_signin_light_normal_web.png\");\n return (\n \n
\n All Other Alerts (including and prior to {twoDaysAgo.toLocaleDateString()})
\n openAuthPage(platform.auth_url)}>\n 
\n
\n );\n } else {\n return (\n <>\n \n \n );\n }\n };\n\n return (\n <>\n \n
\n Authenticate with the services you need to pull for your clients.
\n{apiTitle}
\n {renderAuthButton(platformKey)}\n \n );\n })}\n\n
\n Platform specific data
\n\n \n
\n \n ${JSON.parse(jqXHR.responseText).message}`);\n buildBtn.html('Build');\n buildBtn.removeClass(\"btn-building\");\n buildBtn.addClass(\"btn-success\");\n }\n });\n };\n\n return (\n <>\n
Campaign Builder
\n\n \n \n {props.google_ads_accounts ? props.google_ads_accounts.map((act) => {\n return (\n \n \n \n );\n }) : (\n <>\n )}\n \n buildCampaigns()}\n >\n Build\n \n
\n \n
\n \n This is a tool designed to help automate some of the initial onboarding steps. Clicking the button above will automatically make the following changes in the account of your choice:
\n- \n
- \n Create the following budgets (if they do not already exist):\n
- \n
- Branded \n
- Non-Brand \n
\n - \n Create the following bid strategies (if they do not already exist):\n
- \n
- Branded - BM - tCPA \n
- Branded - EM - tCPA \n
- Non-Brand - BM - tCPA \n
- Non-Brand - EM - tCPA \n
\n - \n Create the following Negative Keyword Lists (if they do not already exist):\n
- \n
- Account-Wide \n
- Brand Name - Apply To NB Campaigns \n
- Branded - Apply To Branded Campaigns \n
- Exact Match Keywords \n
\n - \n Create the following campaigns (if they do not already exist):\n
- \n
- Branded - EM \n
- Branded - BM \n
- Non-Brand - EM \n
- Non-Brand - BM \n
\n - \n
When the script creates new campaigns, it will apply the budget and bid strategy relevant to that campaign. It will also enable ad schedules & geo targeting for the USA and 50 states.
\nPre-existing campaigns will not be modified.
\n \n - \n Negative keyword Lists will be applied to any campaign that matches the list above.\n \n
'\n );\n }\n }\n componentDidUpdate(prevProps) {\n if (prevProps.data !== this.props.data) {\n this.data = this.props.data;\n this.textSizeScalar = 0.15;\n this.strokeScalar = 0.08;\n // The graph actually shows only spend except on hover\n this.bars = jsDig([\"spend\"], this.props.data) ? Object.keys(jsDig([\"spend\"], this.props.data)) : [];\n if (this.props.order) {\n this.bars = this.props.order;\n }\n this.total = 0;\n this.highestValue = 0;\n this.bars.forEach((bar) => {\n this.total += jsDig([\"spend\", bar], this.props.data);\n if (jsDig([\"spend\", bar], this.props.data) > this.highestValue) {\n this.highestValue = jsDig([\"spend\", bar], this.props.data);\n }\n });\n\n if (this.total === 0) this.total = 1;\n\n this.barPercentages = {};\n\n this.bars.forEach((bar) => {\n this.barPercentages[bar] = ReactDOMServer.renderToString(
\n {\n const wOrH = height > width ? width : height;\n const strokeWidth = this.strokeScalar * wOrH;\n const radius = wOrH / 2.1 - strokeWidth / 1.8;\n\n const hW = width / 2;\n const hH = height / 2;\n const axisLineWidth = height / 65;\n const xAxis = height * 0.9;\n const barPadding = width / 4 / this.bars.length;\n const barWidth = width / this.bars.length - barPadding;\n const interpolateBetweenBeginColor = \"42BA96\";\n return (\n <>\n \n {\n const barTitle = _.capitalize(bar);\n let newText = `${barTitle}
`;\n this.props.metricsEnabled.forEach((metricKey, index) => {\n let Formatter = GetFormatter({ metricName: metricKey });\n const metricTitle = _.startCase(_.camelCase(metricKey));\n const metricValue = ReactDOMServer.renderToString(
\" : \"\"}`;\n });\n this.setState({ tooltipText: newText });\n const tooltipElement = $(\"#\" + this.props.id).get(0);\n tooltipElement.setAttribute(\"data-original-title\", this.state.tooltipText);\n $(\"#\" + this.props.id).tooltip(\"show\");\n }}\n onMouseLeave={() => {\n $(\"#\" + this.props.id).tooltip(\"hide\");\n }}\n />\n\n \n );\n })}\n \n );\n }}>\n
\n );\n }\n}\n\nexport default ChartBar;\n","import React from 'react';\nimport { Spring, config } from 'react-spring/renderprops'\nimport Konva from 'konva';\nimport { Arc, Stage, Layer, Text, Shape, Circle } from 'react-konva';\nimport ReactResizeDetector from 'react-resize-detector';\nimport ResizeableStage from 'charts/ResizeableStage';\nimport MetricFormatter from 'dashboards/MetricFormatter'\nimport ReactDOMServer from 'react-dom/server';\n\nclass ChartGoal extends React.Component {\n constructor(props) {\n super(props);\n\n this.projectedStrokeScalar = .04\n this.currentStrokeScalar = .08\n this.metricNameTextSizeScalar = .15\n this.currentTextSizeScalar = .2\n this.projectedTextSizeScalar = .13\n this.goalTextSizeScalar = .13\n\n //clamp the angle at max 360 deg\n this.currentToGoalAngle = Math.min((this.props.goal > 0 ? this.props.current / this.props.goal : 0) * 360, 360)\n this.projectedToGoalAngle = Math.min((this.props.goal > 0 ? this.props.projected / this.props.goal : 0) * 360, 360)\n\n this.goodCurrentColor = \"#42ba96\"\n this.goodProjectedColor = \"#9ed8c6\"\n this.badCurrentColor = \"#c76650\"\n this.badProjectedColor = \"#da7159\"\n this.unlockedCurrentColor = \"#358fc1\"\n\n if (this.props.goalLocked) {\n if (this.props.negative) {\n this.currentColor = this.badCurrentColor;\n } else {\n this.currentColor = this.goodCurrentColor;\n }\n } else {\n this.currentColor = this.unlockedCurrentColor;\n }\n\n if (this.props.negative) {\n this.projectedColor = this.badProjectedColor;\n } else {\n this.projectedColor = this.goodProjectedColor;\n }\n }\n\n componentDidMount() {\n }\n\n render() {\n const Formatter = this.props.formatter;\n const formattedCurrent = ReactDOMServer.renderToString(`;\n this.props.metricsEnabled.forEach((metricKey, index) => {\n let Formatter = GetFormatter({ metricName: metricKey });\n const metricTitle = _.startCase(_.camelCase(metricKey));\n const metricValue = ReactDOMServer.renderToString(
\" : \"\"}`;\n });\n this.setState({ tooltipText: newText });\n const tooltipElement = $(\"#\" + this.props.id).get(0);\n tooltipElement.setAttribute(\"data-original-title\", this.state.tooltipText);\n $(\"#\" + this.props.id).tooltip(\"show\");\n }}\n onMouseLeave={() => {\n $(\"#\" + this.props.id).tooltip(\"hide\");\n }}\n />\n\n
\n {\n const wOrH = (height > width ? width : height);\n const projectedStrokeWidth = this.projectedStrokeScalar * wOrH;\n const currentStrokeWidth = this.currentStrokeScalar * wOrH;\n const radius = (wOrH / 2.1) - (currentStrokeWidth / 1.8);\n\n const hW = width / 2;\n const hH = height / 2;\n return (\n <>\n {\n context.beginPath();\n context.font = `${radius * this.metricNameTextSizeScalar}px visby-medium`;\n context.fillStyle = \"#212348\";\n context.textAlign = 'center';\n context.fillText(this.props.metricName, width / 2, hH / 1.4, width);\n }}\n />\n :\n {\n context.beginPath();\n context.font = `${radius * this.metricNameTextSizeScalar}px visby-medium`;\n context.fillStyle = \"#212348\";\n context.textAlign = 'center';\n context.fillText(this.props.metricName, width / 2, hH - (radius / 2.2), width);\n }}\n />\n }\n\n {!this.props.goal || this.props.goal == 0 ?\n {\n context.beginPath();\n context.font = `${radius * this.currentTextSizeScalar }px visby-extra-bold`;\n context.fillStyle = \"#212348\";\n context.textAlign = 'center';\n // context.fillText(formattedCurrent, width / 2, hH - (radius / 6), width);\n context.fillText(formattedCurrent, width / 2, hH / 1, width);\n }}\n />\n :\n {\n context.beginPath();\n context.font = `${radius * this.currentTextSizeScalar}px visby-extra-bold`;\n context.fillStyle = \"#212348\";\n context.textAlign = 'center';\n context.fillText(formattedCurrent, width / 2, hH - (radius / 5.6), width);\n }}\n />\n }\n\n {!this.props.goal || this.props.goal == 0 ?\n {\n context.beginPath();\n context.font = `${radius * this.projectedTextSizeScalar}px nunito-regular`;\n context.fillStyle = \"#212348\";\n context.textAlign = 'center';\n context.fillText(`Projected: ${formattedProjected}`, width / 2, hH / 0.8, width);\n }}\n />\n :\n {\n context.beginPath();\n context.font = `${radius * this.projectedTextSizeScalar}px nunito-regular`;\n context.fillStyle = \"#212348\";\n context.textAlign = 'center';\n context.fillText(`Projected: ${formattedProjected}`, width / 2, hH + (radius / 5), width);\n }}\n />\n }\n\n {!this.props.goal || this.props.goal == 0 ?\n <>\n :\n {\n context.beginPath();\n context.font = `${radius * this.goalTextSizeScalar}px nunito-bold`;\n context.fillStyle = \"#212348\";\n context.textAlign = 'center';\n context.fillText(`Goal: ${formattedGoal}`, width / 2, hH + (radius / 2.3), width);\n }}\n />\n }\n\n { !this.props.goal || this.props.goal == 0 ? (\n <>\n ) : (\n <>\n \n {\n props => (\n \n \n {\n props => (\n \n \n )}\n \n )\n }}>\n \n
\n )\n }\n}\n\nexport default ChartGoal;\n","import React from 'react';\nimport { Spring, config } from 'react-spring/renderprops';\nimport Konva from 'konva';\nimport { Arc, Rect, Circle, Stage, Layer, Text, Shape, Line } from 'react-konva';\nimport ReactResizeDetector from 'react-resize-detector';\nimport ResizeableStageLine from 'charts/ResizeableStageLine';\nimport MetricFormatter from 'dashboards/MetricFormatter'\nimport ReactDOMServer from 'react-dom/server';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\nimport jsDig from 'utils/jsDig';\n\nclass ChartLine extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n expanded: this.props.expanded\n }\n\n this.projectedStrokeScalar = .04\n this.currentStrokeScalar = .08\n }\n\n componentDidMount() {\n }\n\n render() {\n return (\n \n {\n const TickFormatter = this.props.tickFormatter;\n\n const wOrH = (height > width ? width : height);\n const projectedStrokeWidth = this.projectedStrokeScalar * wOrH;\n const currentStrokeWidth = this.currentStrokeScalar * wOrH;\n\n const axisLineWidth = wOrH * .015;\n const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\n const hW = width / 2;\n const hH = height / 2;\n const xAxis = width * 0.99;\n const yAxis = height * 0.85;\n const xPadding = width * 0.14;\n const yPadding = height * 0.08;\n const xTickSpace = xAxis / (months.length + 3);\n const yTickSpace = yAxis / 12;\n const hTickWidth = xAxis * .02;\n const pointRadius = height * .015;\n\n const thisAndLastYearsData = Object.values(this.props.currentYearData).concat(Object.values(this.props.previousYearData));\n const lowestValue = Math.min(...thisAndLastYearsData);\n const highestValue = Math.max(...thisAndLastYearsData) * 1.3;\n const stepY = highestValue / 10;\n const yTicks = [];\n for (let i = 1; i <= 10; i++) {\n yTicks.push(stepY * i);\n }\n const currentYearPoints = [];\n const previousYearPoints = [];\n const yAxisUsed = yAxis - yTickSpace - yPadding;\n const firstTickY = yTickSpace + yPadding;\n\n if (yAxis > 0) {\n months.forEach((month, i) => {\n if (month in this.props.currentYearData) {\n if (this.props.currentYearData[month] > 0) {\n currentYearPoints.push(xPadding + (xTickSpace * (i + 1)), ((yAxisUsed) - ((this.props.currentYearData[month] / (highestValue / yAxisUsed))) + firstTickY))\n }\n }\n if (month in this.props.previousYearData) {\n if (this.props.previousYearData[month] > 0) {\n previousYearPoints.push(xPadding + (xTickSpace * (i + 1)), ((yAxisUsed) - ((this.props.previousYearData[month] / (highestValue / yAxisUsed))) + firstTickY))\n }\n }\n })\n }\n\n return (\n <>\n \n \n )\n })\n }\n {\n yTicks.map((tick, index) => {\n return (\n \n \n )\n })\n }\n \n \n )\n }\n else\n {\n return (\n \n \n )\n }\n })\n }\n \n \n )\n }\n else\n {\n return (\n \n \n )\n }\n })\n }\n \n )\n }\n }>\n \n
\n )\n }\n}\n\nexport default ChartLine;\n","import React from \"react\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport ReactDOMServer from \"react-dom/server\";\nimport { ReactSVG } from \"react-svg\";\nimport jsDig from \"utils/jsDig\";\nimport getCurrencyDetails from \"utils/getCurrencyDetails\";\nimport { startCase, camelCase } from \"lodash\";\nimport GetFormatter from \"dashboards/GetFormatter\";\n\nfunction changeColor(color1, color2, percentage) {\n var hex = function (x) {\n x = x.toString(16);\n return x.length == 1 ? \"0\" + x : x;\n };\n\n var r = Math.ceil(parseInt(color1.substring(0, 2), 16) * percentage + parseInt(color2.substring(0, 2), 16) * (1 - percentage));\n var g = Math.ceil(parseInt(color1.substring(2, 4), 16) * percentage + parseInt(color2.substring(2, 4), 16) * (1 - percentage));\n var b = Math.ceil(parseInt(color1.substring(4, 6), 16) * percentage + parseInt(color2.substring(4, 6), 16) * (1 - percentage));\n\n return hex(r) + hex(g) + hex(b);\n}\n\nconst mapUrl = require(\"images/us-with-labels.svg\");\n\nclass ChartLocation extends React.Component {\n constructor(props) {\n super(props);\n this.svgRef = React.createRef();\n this.max = jsDig([\"spend\"], this.props.data) ? Math.max(...Object.values(jsDig([\"spend\"], this.props.data))) : 0;\n }\n\n componentDidMount() {}\n\n setupSvg(svg) {\n // The graph actually shows only spend except on hover\n let data = jsDig([\"spend\"], this.props.data) ? jsDig([\"spend\"], this.props.data) : [];\n let statePercentages = {};\n let sumOfAllStateSpend = Object.values(data).reduce((accumlulator, item) => {\n return accumlulator + item;\n }, 0);\n\n Object.keys(data).forEach((key, i, arr) => {\n statePercentages[key] = (data[key] / sumOfAllStateSpend) * 100;\n });\n\n Array.from(svg.children).forEach((child, i, arr) => {\n if (child.getAttribute(\"sodipodi:nodetypes\") == \"cccc\" || child.getAttribute(\"sodipodi:nodetypes\") == \"ccc\") return;\n\n if (child.tagName == \"g\") {\n Array.from(child.children).forEach((secondaryChild, i, arr) => {\n let statePercentage = statePercentages[secondaryChild.id.substring(0, 2)];\n if (!statePercentage) statePercentage = 0;\n let scaledStatePercentage = statePercentage * 12;\n if (scaledStatePercentage >= 100) scaledStatePercentage = 100;\n let stateColor = changeColor(\"42BA96\", \"3291C1\", scaledStatePercentage / 100);\n secondaryChild.style.fill = \"#\" + stateColor;\n if (secondaryChild.id == \"MI-\" || secondaryChild.id == \"SP-\") {\n secondaryChild.id = \"MI\";\n }\n\n if (data[secondaryChild.id.substring(0, 2)] && $(\"#\" + secondaryChild.id).length > 0) {\n let tooltipMsg = secondaryChild.id.substring(0, 2) + \"\n
\n \n \n
\n {this.props.currentYear}
\n\n \n
\n {this.props.previousYear}
\n\";\n this.props.metricsEnabled.forEach((metricKey, index) => {\n let Formatter = GetFormatter({ metricName: metricKey });\n const metricTitle = _.startCase(_.camelCase(metricKey));\n const metricValue = ReactDOMServer.renderToString(
\" : \"\"}`;\n });\n\n $(\"#\" + secondaryChild.id)\n .get(0)\n .setAttribute(\"data-toggle\", \"tooltip\");\n $(\"#\" + secondaryChild.id)\n .get(0)\n .setAttribute(\"data-html\", \"true\");\n $(\"#\" + secondaryChild.id)\n .get(0)\n .setAttribute(\"data-trigger\", \"manual\");\n $(\"#\" + secondaryChild.id)\n .get(0)\n .setAttribute(\"title\", tooltipMsg);\n $(\"#\" + secondaryChild.id)\n .get(0)\n .setAttribute(\"data-placement\", \"auto\");\n $(\"#\" + secondaryChild.id)\n .get(0)\n .setAttribute(\n \"data-template\",\n '
'\n );\n\n svg.querySelector(\"#\" + secondaryChild.id).addEventListener(\"mouseover\", (event) => {\n $(secondaryChild.id).tooltip(\"show\");\n });\n\n svg.querySelector(\"#\" + secondaryChild.id).addEventListener(\"mouseleave\", (event) => {\n $(\"#\" + secondaryChild.id).tooltip(\"hide\");\n });\n\n $(\"#\" + secondaryChild.id)\n .get(0)\n .addEventListener(\"mouseover\", (event) => {\n $(\"#\" + secondaryChild.id).tooltip(\"show\");\n });\n\n $(\"#\" + secondaryChild.id)\n .get(0)\n .addEventListener(\"mouseleave\", (event) => {\n $(\"#\" + secondaryChild.id).tooltip(\"hide\");\n });\n\n $(\"#\" + secondaryChild.id)\n .siblings(\"rect\")\n .on(\"mouseover\", () => {\n $(\"#\" + secondaryChild.id).tooltip(\"show\");\n });\n\n $(\"#\" + secondaryChild.id)\n .siblings(\"rect\")\n .on(\"mouseleave\", () => {\n $(\"#\" + secondaryChild.id).tooltip(\"hide\");\n });\n }\n });\n } else if (child.tagName == \"text\") {\n child.style.fill = \"white\";\n } else if (child.tagName == \"path\") {\n let statePercentage = statePercentages[child.id.substring(0, 2)];\n if (!statePercentage) statePercentage = 0;\n let scaledStatePercentage = statePercentage * 12;\n if (scaledStatePercentage >= 100) scaledStatePercentage = 100;\n let stateColor = changeColor(\"42BA96\", \"3291C1\", scaledStatePercentage / 100);\n child.style.fill = \"#\" + stateColor;\n\n if (data[child.id.substring(0, 2)]) {\n let tooltipMsg = child.id.substring(0, 2) + \"
\";\n this.props.metricsEnabled.forEach((metricKey, index) => {\n let Formatter = GetFormatter({ metricName: metricKey });\n const metricTitle = _.startCase(_.camelCase(metricKey));\n const metricValue = ReactDOMServer.renderToString(
\" : \"\"}`;\n });\n\n if ($(\"path#\" + child.id).get(0)) {\n $(\"path#\" + child.id)\n .get(0)\n .setAttribute(\"data-toggle\", \"tooltip\");\n $(\"path#\" + child.id)\n .get(0)\n .setAttribute(\"data-trigger\", \"manual\");\n $(\"path#\" + child.id)\n .get(0)\n .setAttribute(\"title\", tooltipMsg);\n $(\"path#\" + child.id)\n .get(0)\n .setAttribute(\"data-placement\", \"auto\");\n $(\"path#\" + child.id)\n .get(0)\n .setAttribute(\"data-html\", \"true\");\n $(\"path#\" + child.id)\n .get(0)\n .setAttribute(\n \"data-template\",\n '
'\n );\n\n svg.querySelector(\"#\" + child.id).addEventListener(\"mouseover\", (event) => {\n $(\"path#\" + child.id).tooltip(\"show\");\n });\n\n svg.querySelector(\"#\" + child.id).addEventListener(\"mouseleave\", (event) => {\n $(\"path#\" + child.id).tooltip(\"hide\");\n });\n\n $(\"path#\" + child.id)\n .get(0)\n .addEventListener(\"mouseover\", (event) => {\n $(\"path#\" + child.id).tooltip(\"show\");\n });\n\n $(\"path#\" + child.id)\n .get(0)\n .addEventListener(\"mouseleave\", (event) => {\n $(\"path#\" + child.id).tooltip(\"hide\");\n });\n }\n }\n }\n });\n }\n render() {\n let currencyDetails = getCurrencyDetails(this.props.displayCurrency);\n return (\n
\n
\n );\n }\n}\n\nexport default ChartLocation;\n","import React from \"react\";\nimport { Spring, config } from \"react-spring/renderprops\";\nimport Konva from \"konva\";\nimport { Arc, Stage, Layer, Text, Rect, Shape } from \"react-konva\";\nimport ReactResizeDetector from \"react-resize-detector\";\nimport ResizeableStage from \"charts/ResizeableStage\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport ReactDOMServer from \"react-dom/server\";\nimport jsDig from \"utils/jsDig\";\nimport { startCase, camelCase } from \"lodash\";\nimport GetFormatter from \"dashboards/GetFormatter\";\n\nconst colors = [\n \"#2c345b \",\n \"#3291c1\",\n \"#42ba96\",\n \"#dbb13b\",\n \"#a3a3a3\",\n \"#55588f\",\n \"#65abcf\",\n \"#6fc9ad\",\n \"#e1c474\",\n \"#cacaca\",\n \"#7b7da4\",\n \"#97c4db\",\n \"#9fd8c7\",\n \"#e7d29b\",\n];\nclass ChartPie extends React.Component {\n constructor(props) {\n super(props);\n\n this.textSizeScalar = 0.11;\n this.strokeScalar = 0.08;\n\n // The graph actually shows only spend except on hover\n this.slices = jsDig([\"spend\"], this.props.data) ? Object.keys(jsDig([\"spend\"], this.props.data)) : [];\n this.slices = this.slices.filter((slice) => jsDig([\"spend\", slice], this.props.data) > 0);\n this.total = 0;\n this.slices.forEach((slice) => {\n this.total += jsDig([\"spend\", slice], this.props.data);\n });\n if (this.total === 0) this.total = 1;\n\n this.slicePercentages = {};\n this.slices.forEach((slice) => {\n this.slicePercentages[slice] = jsDig([\"spend\", slice], this.props.data) / this.total;\n });\n\n this.state = {\n tooltipText: \"\",\n };\n }\n\n componentDidMount() {\n const tooltipElement = $(\"#\" + this.props.id).get(0);\n if (tooltipElement) {\n tooltipElement.setAttribute(\"data-toggle\", \"tooltip\");\n tooltipElement.setAttribute(\"data-trigger\", \"manual\");\n tooltipElement.setAttribute(\"data-placement\", \"auto\");\n tooltipElement.setAttribute(\"data-html\", \"true\");\n tooltipElement.setAttribute(\"data-original-title\", \"\");\n tooltipElement.setAttribute(\"data-custom-class\", \"geoMapTooltip\");\n tooltipElement.setAttribute(\n \"data-template\",\n '\n this.setupSvg(svg)}\n beforeInjection={(svg) => {\n svg.setAttribute(\"style\", \"max-width: 100%\");\n }}\n />\n
\n \n { currencyDetails.prefix }0{ currencyDetails.suffix }\n \n \n
\n '\n );\n }\n }\n componentDidUpdate(prevProps) {\n if (prevProps.data !== this.props.data) {\n this.textSizeScalar = 0.11;\n this.strokeScalar = 0.08;\n\n // The graph actually shows only spend except on hover\n this.slices = jsDig([\"spend\"], this.props.data) ? Object.keys(jsDig([\"spend\"], this.props.data)) : [];\n this.slices = this.slices.filter((slice) => jsDig([\"spend\", slice], this.props.data) > 0);\n this.total = 0;\n this.slices.forEach((slice) => {\n this.total += jsDig([\"spend\", slice], this.props.data);\n });\n if (this.total === 0) this.total = 1;\n\n this.slicePercentages = {};\n this.slices.forEach((slice) => {\n this.slicePercentages[slice] = jsDig([\"spend\", slice], this.props.data) / this.total;\n });\n\n this.setState({\n tooltipText: \"\",\n });\n }\n }\n render() {\n return (\n
\n {\n const wOrH = height > width ? width : height;\n const strokeWidth = this.strokeScalar * wOrH;\n const radius = wOrH / 2.1 - strokeWidth / 1.8;\n\n const hW = width / 2;\n const hH = height / 2;\n let allText = \"\";\n this.slices.forEach((slice) => {\n allText += `${slice.charAt(0).toUpperCase() + slice.slice(1)}: ${ReactDOMServer.renderToString(\n \n \n {(props) => (\n {\n const sliceTitle = _.startCase(_.camelCase(slice));\n let newText = `${sliceTitle}
`;\n this.props.metricsEnabled.forEach((metricKey, index) => {\n let Formatter = GetFormatter({ metricName: metricKey });\n const metricTitle = _.startCase(_.camelCase(metricKey));\n const metricValue = ReactDOMServer.renderToString(
\" : \"\"}`;\n });\n this.setState({ tooltipText: newText });\n const tooltipElement = $(\"#\" + this.props.id).get(0);\n tooltipElement.setAttribute(\"data-original-title\", this.state.tooltipText);\n $(\"#\" + this.props.id).tooltip(\"show\");\n }}\n onMouseLeave={() => {\n $(\"#\" + this.props.id).tooltip(\"hide\");\n }}\n />\n )}\n \n \n );\n })}\n \n );\n }}>\n
\n );\n }\n}\n\nexport default ChartPie;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { Spring, config } from \"react-spring/renderprops\";\nimport Konva from \"konva\";\nimport { Arc, Stage, Layer } from \"react-konva\";\n\nexport default function ResizeableStage(props) {\n\n \n const container = useRef();\n const [width, setWidth] = useState(props.pdfDim ? parseInt(props.pdfDim.split(\"x\")[0]) || 0 : 0,);\n const [height, setHeight] = useState(props.pdfDim ? parseInt(props.pdfDim.split(\"x\")[1]) || 0 : 0,);\n\n useEffect(() => {\n if (props.pdfDim) {\n // For PDF rendering, charts have a specific height and width preset\n setTimeout(() => setWidth(width + 1), setHeight(height + 1), 1000);\n } else {\n // For normal viewing (non-PDF) make sure chart renders within the boundary of it's container\n setTimeout(() => setWidth(container.current.offsetWidth), setHeight(container.current.offsetHeight), 1000);\n // Charts must resize responsively if the container is resized\n if (container.current != null) {\n new ResizeObserver(() => {\n setWidth(container.current.offsetWidth) ;\n setHeight(container.current.offsetHeight);\n }).observe(container.current)\n }\n }\n }, [])\n \n let height1 = props.pdfDim ? height :width > props.maxHeight ? props.maxHeight : width;\n\n return (\n `;\n this.props.metricsEnabled.forEach((metricKey, index) => {\n let Formatter = GetFormatter({ metricName: metricKey });\n const metricTitle = _.startCase(_.camelCase(metricKey));\n const metricValue = ReactDOMServer.renderToString(
\" : \"\"}`;\n });\n this.setState({ tooltipText: newText });\n const tooltipElement = $(\"#\" + this.props.id).get(0);\n tooltipElement.setAttribute(\"data-original-title\", this.state.tooltipText);\n $(\"#\" + this.props.id).tooltip(\"show\");\n }}\n onMouseLeave={() => {\n $(\"#\" + this.props.id).tooltip(\"hide\");\n }}\n />\n )}\n
\n \n {props.render(width, height1)} \n \n
\n )\n}","import React, { useState, useEffect, useRef } from \"react\";\nimport { Spring, config } from \"react-spring/renderprops\";\nimport Konva from \"konva\";\nimport { Arc, Stage, Layer } from \"react-konva\";\n\nexport default function ResizeableStageLine(props) {\n\n \n const container = useRef();\n const [width, setWidth] = useState(props.pdfDim ? parseInt(props.pdfDim.split(\"x\")[0]) || 0 : 0,);\n const [height, setHeight] = useState(props.pdfDim ? parseInt(props.pdfDim.split(\"x\")[1]) || 0 : 0,); \n\n useEffect(() => {\n if (props.pdfDim) {\n // For PDF rendering, charts have a specific height and width preset\n setTimeout(() => setWidth(width + 1), setHeight(height + 1), 1000);\n } else {\n // For normal viewing (non-PDF) make sure chart renders within the boundary of it's container\n setTimeout(() => setWidth(container.current.offsetWidth), setHeight(container.current.offsetHeight), 1000);\n // Charts must resize responsively if the container is resized\n if (container.current != null) {\n new ResizeObserver(() => {\n setWidth(container.current.offsetWidth) ;\n setHeight(container.current.offsetHeight);\n }).observe(container.current)\n }\n }\n }, [])\n\n let height1 = props.pdfDim ? height :width > props.maxHeight ? props.maxHeight : width;\n\n return (\n \n \n {props.render(width, height1)} \n \n
\n )\n}","import React, { useState, useEffect } from \"react\";\nimport { Container, Row, Col, Button, Table, Form } from \"react-bootstrap\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function AlertsGroup(props) {\n return (\n <>\n \n {props.service == \"seo\" ? (\n
\n \n );\n}\n","import React from \"react\";\n\nexport default function ConfigTabs(props) {\n const accountConfigPath = \"/datapulse/account-config\";\n const seoConfigPath = \"/datapulse/seo-config\";\n const ppcConfigPath = \"/datapulse/ppc-config\";\n\n return (\n <>\n {props.platform.platformName}
\n ) : (\n{props.platform.platformName}
\n )}\n\n\n {props.platform.alerts.map((alert) => {\n return (\n
\n \n
\n );\n })}\n \n
\n {alert.options && (\n \n \n \n {alert.options.map((option) => {\n return (\n
\n
\n )}\n | {option.title} | \n\n | \n
\n
\n \n );\n}\n","import React, { useState } from \"react\";\nimport { Row, Col, Button, Table, Form, Modal } from \"react-bootstrap\";\nimport allMetrics from \"data/allMetrics.js\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport CustomDropdown from \"utils/CustomDropdown\";\n\nconst allMetricData = allMetrics();\n\nexport default function ConfigureGoalsModal(props) {\n const [show, setShow] = useState(false);\n const handleClose = () => setShow(false);\n const handleShow = () => setShow(true);\n const btnColor = props.service == \"seo\" ? \"success\" : \"info\";\n const metricList = props.metricList;\n const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\n const startDate = moment(\"2018-01-01\");\n const todaysDate = moment();\n const endDate = todaysDate.add(1, \"year\");\n const yearsDiff = Math.ceil(endDate.diff(startDate, \"years\", true));\n const yearsArray = [...Array(yearsDiff)].map((empty, index) => startDate.year() + index).reverse();\n return (\n <>\n \n\n \n {props.selectedTab == \"account\" ? (\n \n Account Configuration\n \n ) : (\n \n Account Config\n \n )}\n
\n \n {props.selectedTab == \"ppc\" ? (\n \n PPC Config\n \n ) : (\n \n PPC Config\n \n )}\n
\n \n {props.selectedTab == \"seo\" ? (\n \n SEO Config\n \n ) : (\n \n SEO Config\n \n )}\n
\n \n \n \n
\n
\n \n | \n For:\n | \n\n {props.service === \"ppc\" ? (\n | \n
Metrics to set goals for:
\n- \n {typeof metricList != \"undefined\" &&\n Object.keys(metricList).map((metricName, index) => {\n const metric = metricList[metricName];\n const checked = props.checkedMetrics && props.checkedMetrics.includes(metricName) ? true : false;\n if (metric) {\n return (\n
- \n
- {`${metricName} could not be found in metricData.json`} ;\n }\n })}\n
\n props.setSelectedCurrency(e.target.value)}\n >\n {currencies.map((currency) => {\n const currencyDetails = getCurrencyDetails(currency)\n return (\n \n );\n })}\n \n
\n \n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport allMetrics from \"data/allMetrics.js\";\nimport DashboardBuilderSection from \"client_config/DashboardBuilderSection\";\nimport { DragDropContext, Droppable } from \"react-beautiful-dnd\";\nimport jsDig from \"utils/jsDig.js\";\nimport { camelCase, snakeCase, capitalize } from \"lodash\";\n\nconst allMetricData = allMetrics();\nconst icons = {\n search: require(\"images/icons/Search-Icon.png\"),\n social: require(\"images/icons/Social-Icon.png\"),\n display: require(\"images/icons/Display-Icon.png\"),\n video: require(\"images/icons/Video-Icon.png\"),\n};\n\nexport default function DashboardBuilder(props) {\n const sectionList = jsDig([\"metricsByDashboard\", props.service, \"sections\"], allMetricData);\n const metricList = jsDig([\"metricsByDashboard\", props.service, \"metrics\"], allMetricData);\n const dashboardId = jsDig([\"id\"], props.dashboard) ? jsDig([\"id\"], props.dashboard) : 0;\n const [dashboardOrder, setDashboardOrder] = useState(jsDig([\"dashboardOrder\"], props.dashboard) ? jsDig([\"dashboardOrder\"], props.dashboard) : []);\n const defaultSectionOrder = dashboardOrder.length > 0 ? dashboardOrder.map((section) => section.name) : Object.keys(sectionList);\n const [dashboards, setDashboards] = useState(props.dashboards);\n const [sectionOrder, setSectionOrder] = useState(defaultSectionOrder);\n const onDragEnd = (result) => {\n const { destination, source, draggableId } = result;\n if (!destination) {\n return;\n }\n if (destination.droppableId === source.droppableId && destination.index === source.index) {\n return;\n }\n\n let newOrder = [...sectionOrder];\n newOrder.splice(source.index, 1);\n newOrder.splice(destination.index, 0, draggableId);\n let newDashboardOrder = dashboardOrder;\n newDashboardOrder.sort((a, b) => {\n if (newOrder.indexOf(a.name) > newOrder.indexOf(b.name)) {\n return 1;\n } else return -1;\n });\n newDashboardOrder = newDashboardOrder.map((el, index) => {\n el.order = index;\n return el;\n });\n\n setSectionOrder(newOrder);\n if (props.onboarding && props.setDashboard) {\n let newDashboard = dashboards;\n newDashboard[props.currentDashboard].dashboardOrder = newDashboardOrder;\n props.setDashboard([...newDashboard]);\n }\n };\n useEffect(() => {\n setDashboards([...props.dashboards]);\n setDashboardOrder(jsDig([\"dashboardOrder\"], props.dashboard) ? jsDig([\"dashboardOrder\"], props.dashboard) : []);\n }, [props.dashboards]);\n\n return (\n <>\n \n {sectionOrder.map((sectionName, index) => {\n let sectionData = jsDig([`${sectionName}`], sectionList);\n let metricData = jsDig([sectionName], metricList);\n let configData = dashboardOrder.find((section) => section.name == sectionName);\n let defaultMetrics = jsDig([\"metricsByDashboard\", props.service, \"defaults\", props.accountType, sectionName], allMetricData);\n // We can't store campaign group information in allMetrics.js because they are dynamic, we need to get them from props\n if (props.service == \"ppc\" && sectionName == \"campaignGroups\" && props.campaignGroups) {\n metricData = {};\n Object.keys(props.campaignGroups).forEach((subservice) => {\n props.campaignGroups[subservice].forEach((campaignGroup) => {\n const icon = `/datapulse${icons[subservice]}`;\n const campaignGroupName = jsDig([\"name\"], campaignGroup);\n if (campaignGroupName) {\n metricData[camelCase(campaignGroupName)] = {\n icon: icon,\n name: { shortened: campaignGroupName, title: campaignGroupName, snakeCase: snakeCase(campaignGroupName) },\n };\n }\n });\n });\n }\n if (props.service == \"ppc\" && sectionName == \"performanceByChannel\" && props.performanceByChannel) {\n metricData = {};\n Object.keys(props.performanceByChannel).forEach((subservice) => {\n if (props.performanceByChannel[subservice]) {\n const icon = `/datapulse${icons[subservice]}`;\n metricData[subservice] = {\n icon: icon,\n name: { shortened: capitalize(subservice), title: capitalize(subservice), snakeCase: subservice },\n };\n }\n });\n }\n return (\n
\n )}\n \n
\n )}\n \n {boxHandle}\n
\n \n
\n \n {props.onboarding && dashboards !== undefined ? (\n ${props.sectionData.name.title}`}\n checked={jsDig([props.currentDashboard, \"dashboardOrder\", props.index, \"enabled\"], dashboards)}\n onChange={(e) => {\n let newDashboardOrder = dashboards[props.currentDashboard].dashboardOrder;\n newDashboardOrder[props.index] = newDashboardOrder[props.index] || {};\n if (newDashboardOrder[props.index].enabled === true) {\n newDashboardOrder[props.index].enabled = false;\n } else {\n newDashboardOrder[props.index].enabled = true;\n }\n\n if (props.onboarding && props.setDashboard) {\n let newDashboard = dashboards;\n newDashboard[props.currentDashboard].dashboardOrder = newDashboardOrder;\n props.setDashboard([...newDashboard]);\n }\n }}\n />\n ) : (\n ${props.sectionData.name.title}`}\n checked={isChecked}\n onChange={changeHelper}\n sendUncheckedValue\n />\n )}\n
\n \n \n \n
\n setShowConfig(!showConfig)}>\n
\n\n Display configuration
\n\n
\n - \n {props.metricData &&\n Object.entries(props.metricData)\n .map((el) => {\n return [el[1].name.title, el[0]];\n })\n .sort()\n .map((item) => {\n return item[1];\n })\n .map((metricName, index) => {\n let metric = props.metricData[metricName];\n if (metric) {\n metric.name.title = (metric.name.title.trim()[0].toUpperCase() + metric.name.title.trim().slice(1).toLowerCase())\n .replace(\"roas\", \"ROAS\")\n .replace(\"Cpc\", \"CPC\")\n .replace(\"Serp\", \"SERP\")\n .replace(\"ips\", \"IPs\")\n .replace(\"top\", \"Top\");\n if (props.service === \"seo\") {\n metric.name.title = (metric.name.title.trim()[0].toUpperCase() + metric.name.title.trim().slice(1).toLowerCase())\n .replace(\"(inflated)\", \"\")\n .replace(\"Gsc\", \"GSC\")\n }\n let label = metric.icon\n ? `
- \n {props.onboarding ? (\n \n\n ) : (\n \n ) : (\n
- \n {`${metricName} not defined in metricData`}\n \n );\n }\n })}\n
\n {metricCanBeBuilt(props.service, props.sectionName, metricName, props.subServiceDashboards, props.enabledServices) ? (\n
\n );\n } else {\n return (\n \n
\n )}\n \n
\n * Will populate only under day of week chart
\n )}\n\n
\n ) : (\n <>\n \n \n \n
\n
\n | \n {props.checkedMetrics.map((metricName) => {\n const metric = props.metricList[metricName];\n if (metric) {\n return (\n | \n {jsDig([\"name\", \"title\"], metric)} \n | \n );\n }\n })}\n
|---|---|
| \n {`${month}.`} \n | \n {props.checkedMetrics.map((metricName) => {\n const metric = props.metricList[metricName];\n let newGoals = props.goals;\n if (props.onboarding && props.goals && props.setGoals) {\n // Populate with empty strings so we can save to db even if the input was not filled out\n newGoals[props.service][props.dashboard.id][props.year] = newGoals[props.service][props.dashboard.id][props.year] || {};\n newGoals[props.service][props.dashboard.id][props.year][month] = newGoals[props.service][props.dashboard.id][props.year][month] || {};\n newGoals[props.service][props.dashboard.id][props.year][month][metricName] =\n newGoals[props.service][props.dashboard.id][props.year][month][metricName] || \"\";\n }\n if (metric) {\n return (\n \n \n | \n );\n }\n })}\n
You don't have any metrics selected.
\n \n )}\n \n );\n}\n// The first rule about GoalsTable.jsx... we don't talk about GoalsTable.jsx\n","import React, { useState, useRef } from \"react\";\nimport { Table, Row, Col, Button, Tooltip, OverlayTrigger } from \"react-bootstrap\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport DialogContent from \"@material-ui/core/DialogContent\";\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\nimport { ExclamationCircle } from \"react-bootstrap-icons\";\nexport default function ManualDataPull(props) {\n const [isEnabled, setIsEnabled] = useState(props.isEnabled);\n const [searchConsoleSelected, setSearchConsoleSelected] = useState(false)\n const [open, setOpen] = useState(false);\n const renderTooltip = (props) => (\n\n
\n \n );\n };\n\n return (\n \n {\n calendarRef.current.setOpen(true);\n }}\n className=\"far f20 fa-calendar-alt\">\n
\n \n \n \n {\n setIsEnabled(!isEnabled);\n }}\n label=\"Enable Manual Data Pulls\"\n />\n
\n {props.platforms.map((platform) => {\n if (platform.name.includes(\"semrush\") && !props.isAdmin) {\n return false;\n } else {\n return (\n \n {platform.name == \"shopify\" && props.shopify_token == null ? (\n \n \n \n ) : (\n {setSearchConsoleSelected(!searchConsoleSelected)} : undefined}\n />\n )}\n
\n );\n }\n })}\n \n
\n \n {\n const values = $('input[name^=\"[pull_platform_data]\"]')\n .map(function () {\n if ($(this).val() == \"1\" && $(this).is(\":checked\")) return $(this).attr(\"name\");\n })\n .get();\n values.length > 0 ? setOpen(true) : inputRef.current.click();\n }}\n />\n \n
\n \n \n
\n );\n}\n","import React, { useRef, useState, useEffect } from \"react\";\nimport { Button, Col, Row } from \"react-bootstrap\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport DialogContent from \"@material-ui/core/DialogContent\";\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\nimport { ExclamationCircle } from \"react-bootstrap-icons\";\nimport jsDig from \"utils/jsDig\";\nimport updateParams from \"utils/updateParams.js\";\n\n\n\nexport default function SaveChanges(props) {\n const [open, setOpen] = useState(false);\n const [showSavePrompt, setShowSavePrompt] = useState(false);\n const [showGoalWarning, setShowGoalWarning] = useState(false);\n const [targetLinkId, setTargetLinkId] = useState(\"\");\n\n // let dashboardOrderOrig = \"\";\n // $('input[name^=\"[dashboard_builder]\"]').each(function () {\n // dashboardOrderOrig += $(this).is(\":checked\") + $(this).attr(\"name\");\n // });\n\n const [dashboardOrderOrig, setDashboardOrderOrig] = useState(\"\")\n useEffect(() => {\n $(() => {\n let dbTemp = \"\" ;\n $('input[name^=\"[dashboard_builder]\"]').each(function () {\n dbTemp += $(this).is(\":checked\") + $(this).attr(\"name\");\n });\n setDashboardOrderOrig(dbTemp)\n })\n }, [])\n \n\n const inputRef = useRef();\n\n // Attach click event handlers to nav links\n const navLinkSelector = \".client_config-account_config .col.nav-item a.nav-link, .client_config-seo_config .col.nav-item a.nav-link, .client_config-ppc_config .col.nav-item a.nav-link\";\n useEffect(() => {\n $(() => {\n let pageHtmlOrig = $(\".client-config-content\").serialize().replace(/selected_page=.+?&/g, \"\").replace(/selected_subpage=.+?&/g, \"\");\n\n $(navLinkSelector).on(\"click\", (e) => {\n let pageHtmlSnap = $(\".client-config-content\").serialize().replace(/selected_page=.+?&/g, \"\").replace(/selected_subpage=.+?&/g, \"\");\n if (pageHtmlOrig != pageHtmlSnap) {\n e.preventDefault();\n const el = $(e.target);\n setTargetLinkId(el.attr(\"id\"))\n setShowSavePrompt(true);\n return false;\n }\n })\n });\n }, [])\n\n // TODO: Optimize - Couldn't figure out how to get this to change tab without reloading\n const routeToTargetLink = (key, linkType) => {\n if (linkType == \"base\") {\n location.href = location.origin + `/datapulse/${key}-config`\n } else {\n updateParams(linkType, key, props.page);\n location.reload()\n }\n }\n\n // If the user is on the goals subpage and they have not set a goal for the current year, return true\n const shouldShowGoalWarning = () => {\n let showWarning = false;\n const searchParams = new URL(location.href).searchParams;\n const page = searchParams.get(\"subpage\");\n if (page == \"goals\") {\n const currentYear = new Date().getFullYear();\n const currentYearGoals = $('input[name*=\"[' + currentYear + ']\"]:not(:hidden)');\n currentYearGoals.each((i, el) => {\n if ($(el).val() == \"\") {\n showWarning = true;\n }\n });\n }\n return showWarning;\n }\n\n\n const shouldStartDataPull = (dashboardOrderOrig) => {\n\n const values = $('input[name^=\"[pull_platform_data]\"]').map(function () {\n if ($(this).val() == \"1\" && $(this).is(\":checked\")) return $(this).attr(\"name\");\n }).get();\n\n let dashboardOrderTemp = \"\";\n $('input[name^=\"[dashboard_builder]\"]').each(function () {\n dashboardOrderTemp += $(this).is(\":checked\") + $(this).attr(\"name\");\n });\n if (dashboardOrderTemp !== dashboardOrderOrig) {\n if (props.seo) {\n $('input[name^=\"[pull_platform_data][seo]\"]').map(function () {\n if ($(this).val() == \"1\" && $(this).attr('id') != \"semrush\") {\n $(`input[name^=\"[pull_platform_data][seo]start_date\"]`).val(`${new Date().getFullYear() - 1}0101`);\n $(this).prop(\"checked\", true);\n }\n });\n }\n if (props.ppc) {\n $('input[name^=\"[pull_platform_data][ppc]\"]').map(function () {\n if ($(this).val() == \"1\") {\n $('input[name^=\"[pull_platform_data][ppc]start_date\"]').val(`${new Date().getFullYear() - 1}0101`);\n $(this).prop(\"checked\", true);\n }\n });\n }\n if (props.tabLocation) {\n $(`input[name^=\"[pull_platform_data][${props.tabLocation}]\"]`).map(function () {\n if ($(this).val() == \"1\") {\n $(`input[name^=\"[pull_platform_data][${props.tabLocation}]start_date\"]`).val(`${new Date().getFullYear() - 1}0101`);\n $(this).prop(\"checked\", true);\n }\n });\n }\n }\n return (values.length > 0 || dashboardOrderTemp !== dashboardOrderOrig)\n }\n\n // If a user switches tabs after making changes to the page, they should be forced to choose whether they want to save or not\n const savePrompt = (\n <>\n \n \n \n )\n\n // If a user hasn't filled out goals for the current year yet, they won't be able to save\n const goalWarning = (\n <>\n \n \n )\n\n const dataPullSave = (\n <>\n \n \n \n );\n\n return (\n \n
\n \n \n
\n \n {\" \"}\n Date range:{\" \"}\n
\n {calendarForm(\"start_date\", moment().subtract(30, \"days\").toDate(), setWarningDisplay)}\n\n
\n \n through\n
\n {calendarForm(\"end_date\", moment().subtract(1, \"days\").toDate(), setWarningDisplay)}\nDataPulse will only repull GA4 data within the last 14 months
: null}\nBasic Info
\n\n Company display name\n
\n \n \n Type of client{\" \"}\n
\n\n \n
\n Legal Information
\n\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n
\n
\n \n \n \n Legal company name\n
\n \n Legal address\n
\n\n \n
\n Company Logo
\n{companyLogo}
\n \n {\n if (e.target.files[0].size > 10000000) {\n alert(\"Image must be less than 10MB. Consider use another image or compress this one.\");\n }\n setImageURL(URL.createObjectURL(e.target.files[0]));\n setFileName(e.target.files[0].name);\n }}\n />\n\n \n
\n \n
\n {fileName}
\n\n
\n \n \n Minimum: 600x600px
\n Recommended format: .png\n
\n Recommended orientation: Landscape\n
\n
\n Client Users
\n \n\n
\n \n Internal Datapulse users
\n\n {hiddenFields}\n
\n \n Invoice Recipients
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t{\" \"}\n\t\t\t\t\t\t\tAdd emails below that will receive invoices for this client.\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\thandleDeleteRecipient(invoiceRecipient.id)}>\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t setInvoiceRecipients([...invoiceRecipients,{id:uuidv4(), email:\"\"}])}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t+ Add email\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\n
\n \n );\n };\n let labelCheck = false;\n if (props.group == \"seo\") {\n labelCheck = props.seo_section.white_label_service;\n }\n if (props.group == \"ppc\") {\n labelCheck = props.search_section.white_label_service;\n }\n\n const [checkLabel, setCheckLabel] = useState(labelCheck);\n return (\n <>\n \n {\n calendarRef.current.setOpen(true);\n }}\n className=\"far f20 fa-calendar-alt\">\n\n {\n if (props.onboarding) {\n props.setStartDate((e) => date), setStartDate((e) => date);\n }\n setStartDate(date);\n }}\n name={`${props.group}_start_date`}\n />\n
\n \n \n
\n \n {\n props.setPpcWhiteLabelService && props.setPpcWhiteLabelService(!checkLabel);\n props.setSeoWhiteLabelService && props.setSeoWhiteLabelService(!checkLabel);\n setCheckLabel(!checkLabel);\n }}\n />\n \n
\n \n
\n \n
\n
\n \n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Tab, Nav, Button, Container, Row, Col } from \"react-bootstrap\";\nimport PpcAgreement from \"./ppc/PpcAgreement\";\nimport PpcServices from \"./ppc/PpcServices\";\nimport updateParams from \"utils/updateParams.js\";\nimport SEO from \"./seo/SEO\";\nlet seodot = require(\"images/icons/seo-dot.png\");\nseodot = \n
\n \n {props.onboarding ? \"Choose Date\" : \"Start Date\"}
\n {calendarForm()}\nPoint(s) of Contact
\nAccount Lead(s)
\n {props.group === \"ppc\" ? (\nRefer to indiviudal PPC services below
\n ) : props.group === \"seo\" ? (\nwrong group input - must be `seo` or `ppc`
\n )}\nAccount Support
\n {props.group === \"ppc\" ? (\nRefer to indiviudal PPC services below
\n ) : props.group === \"seo\" ? (\nwrong group input - must be `seo` or `ppc`
\n )}\n \n\n selectTab(k)}>\n \n \n \n \n \n \n \n \n
\n \n );\n}\n","import React, { useState } from \"react\";\nimport { Button, Table, Form, Row, Col } from \"react-bootstrap\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport CustomSwitch from \"utils/CustomSwitch\";\nimport PointsofContact from \"../PointsOfContact\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function Agreement(props) {\n let ppcFeeStructure = jsDig([\"billing_config\", \"ppc_fee_structure\"], props);\n let ppcFees = jsDig([\"billing_config\", \"ppc_fees\"], props);\n const [ppcFeesStructure, setPPCFeesStructureDetail] = useState(\n ppcFeeStructure && ppcFeeStructure.length > 0\n ? ppcFeeStructure\n : [\n {\n id: uuidv4(),\n flat_fee: \"0\",\n over_ad_spend: \"0\",\n percentage_fee: \"0\",\n flat_fee_enabled: \"0\",\n percentage_fee_enabled: \"0\",\n percentage_fee_total_over: \"total\",\n },\n ]\n );\n const [ppcFeesDetail, setPPCFeesDetail] = useState(\n ppcFees ? ppcFees : [{ id: uuidv4(), label: \"\", amount: \"0\", status: \"0\", enabled: \"0\", status: \"Recurring\", frequency: \"Monthly\" }]\n );\n const handleAddPPCFee = (event) => {\n let newArray = ppcFeesDetail;\n newArray.push({ id: uuidv4(), label: \"\", amount: \"0\", status: \"0\", enabled: \"0\", status: \"Recurring\", frequency: \"Monthly\" });\n setPPCFeesDetail([...newArray]);\n };\n const handleAddStructure = (event) => {\n let newArray = ppcFeesStructure;\n newArray.push({\n id: uuidv4(),\n flat_fee: \"0\",\n over_ad_spend: \"0\",\n percentage_fee: \"0\",\n flat_fee_enabled: \"0\",\n percentage_fee_enabled: \"0\",\n percentage_fee_total_over: \"total\",\n });\n setPPCFeesStructureDetail([...newArray]);\n };\n const handleDeleteStructure = (i) => {\n let remain = ppcFeesStructure.filter((fee, index) => {\n return fee.id !== i;\n });\n setPPCFeesStructureDetail(remain);\n };\n const handleDeleteFee = (i) => {\n let remain = ppcFeesDetail.filter((fee, index) => {\n return fee.id !== i;\n });\n setPPCFeesDetail(remain);\n };\n const handleFeeChangeEnable = (enable, index) => {\n let newSEOFeeEnabled = ppcFeesDetail;\n newSEOFeeEnabled[index][\"enabled\"] = !enable;\n setPPCFeesDetail([...newSEOFeeEnabled]);\n };\n const handleChange = (field, index, value) => {\n let newArray = ppcFeesDetail;\n newArray[index][field] = value;\n setPPCFeesDetail([...newArray]);\n };\n\n return (\n \n
\n \n \n PPC\n \n }\n text=\"PPC\"\n variant=\"ppc\"\n customClass=\"d-inline-block\"\n id=\"ppc-enable\"\n checked={props.isEnabled}\n />\n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Tab, Nav, Button, Table, Form, Row, Col } from \"react-bootstrap\";\nimport CustomSwitch from \"utils/CustomSwitch\";\nimport PpcSupportingRoles from \"./PpcSupportingRoles\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport jsDig from \"utils/jsDig\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { useRef } from \"react\";\nimport { cloneDeep } from \"lodash\";\n\nexport default function Services(props) {\n const [billingConfig, setBillingConfig] = useState(props.billing_config);\n return (\n \n \n
\n
\n Agreement
\n\n
\n \n \n \n
\n
\n \n | \n Select and set shared fee structure{\" \"}\n | \n \n Fixed Amount\n | \n\n % of ad spend (total or above)\n | \n
|---|---|---|
| \n \n \n Over ad spend\n \n | \n \n \n \n \n \n \n \n | \n \n \n \n \n \n \n \n {index >= 0 && ppcFeesStructure.length > 1 && (\n | \n
\n
\n \n Active PPC Fees
\n\n View full history\n
\n\n
\n \n \n \n
\n
\n \n | \n | Frequency | \nLabel | \nAmount | \nStatus | \n
|---|---|---|---|---|
| \n \n \n | \n\n \n | \n \n | \n \n \n \n \n \n \n handleDeleteFee(detail.id)}>\n \n | \n
\n
\n );\n}\n","import { getThemeProps } from \"@material-ui/styles\";\nimport React, { useState, useEffect } from \"react\";\nimport { Tab, Nav, Button, Table, Form } from \"react-bootstrap\";\nimport CustomSwitch from \"utils/CustomSwitch\";\nimport UserSelector from \"utils/UserSelector\";\n\nexport default function PpcSupportingRoles(props) {\n\tconst serviceName = props.service[0].toUpperCase() + props.service.slice(1);\n\tlet service = props.service;\n\tif (props.service == \"ppc\") service = \"search\";\n\tconst accountLeads = props[`${service}_section`].account_leads;\n\tconst accountSupports = props[`${service}_section`].account_supports;\n\treturn (\n\t\t<>\n\t\t\tConfigure PPC subservices
\n {[\"search\", \"social\", \"display\", \"video\"].map((section, index) => {\n const sectionName = section.charAt(0).toUpperCase() + section.slice(1);\n const [uniqueFee, setUniqueFee] = useState(props.billing_config[`${section}_fee_structure_enabled`]);\n let feeDetail =\n Object.keys(billingConfig[`${section.toLowerCase()}_fee_structure`]).length == 0\n ? [\n {\n flat_fee: \"0\",\n over_ad_spend: \"0\",\n percentage_fee: \"0\",\n flat_fee_enabled: \"false\",\n percentage_fee_enabled: \"false\",\n percentage_fee_total_over: \"total\",\n },\n ]\n : billingConfig[`${section.toLowerCase()}_fee_structure`];\n const handleDeleteFee = (i) => {\n let remain = feeDetail.filter((fee, index) => {\n return i != index;\n });\n let newFields = billingConfig;\n newFields[`${section}_fee_structure`] = remain;\n setBillingConfig({ ...newFields });\n };\n const [serviceEnabled, setServiceEnabled] = useState(jsDig([`${section}_section`, \"enabled\"], props) ? true : false);\n return (\n\n \n
\n
\n );\n })}\n \n
\n \n \n {sectionName}\n \n }\n variant=\"ppc\"\n text={sectionName}\n id={`${section}-subservice`}\n customClass=\"d-inline-block\"\n name={`${section}_enabled`}\n isEnabled={serviceEnabled}\n setIsEnabled={setServiceEnabled}\n disabled={!props.isEnabled}\n />\n
\n \n {\n setUniqueFee(false);\n }}\n disabled={!props.isEnabled}\n />\n {\n setUniqueFee(true);\n }}\n disabled={!props.isEnabled}\n />\n
\n \n \n \n {feeDetail.map((detail, i) => {\n const flatFeeEnabled = detail[\"flat_fee_enabled\"] == \"1\";\n const percentageEnabled = detail[\"percentage_fee_enabled\"] == \"1\";\n const greyout = uniqueFee && serviceEnabled ? null : { opacity: \"0.6\" };\n\n return (\n
\n
\n | \n \n Over ad spend\n \n | \n \n \n \n \n \n \n \n | \n \n \n \n \n \n \n \n {(i >= 0 && feeDetail.length > 1) && (\n | \n
\n {\n let newArray = [\n ...feeDetail,\n {\n flat_fee: \"0\",\n over_ad_spend: \"0\",\n percentage_fee: \"0\",\n flat_fee_enabled: \"false\",\n percentage_fee_enabled: \"false\",\n percentage_fee_total_over: \"total\",\n },\n ];\n let arrayForChange = billingConfig;\n arrayForChange[`${section}_fee_structure`] = newArray;\n setBillingConfig({ ...arrayForChange });\n }}>\n + Add Condition\n \n
\n \n \n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Button, Form, Row, Col, Container, Table } from \"react-bootstrap\";\nimport CustomSwitch from \"utils/CustomSwitch\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport PointsofContact from \"../PointsOfContact\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function SEO(props) {\n let seoFeeStructure = jsDig([\"billing_config\", \"seo_fee_structure\"], props);\n let seoFees = jsDig([\"billing_config\", \"seo_fees\"], props);\n const [seoFeesStructure, setSEOFeesStructureDetail] = useState(\n Object.keys(seoFeeStructure).length > 0\n ? seoFeeStructure\n : [{ flat_fee: \"0\", over_ad_spend: \"0\", percentage_fee: \"0\", flat_fee_enabled: \"0\", percentage_fee_enabled: \"0\", percentage_fee_total_over: \"total\" }]\n );\n const [seoFeesDetail, setSEOFeesDetail] = useState(\n seoFees ? seoFees : [{ label: \"\", amount: \"0\", status: \"0\", enabled: \"0\", status: \"Recurring\", frequency: \"Monthly\" }]\n );\n const handleAddSEO = (event) => {\n let newArray = seoFeesStructure;\n newArray.push({\n flat_fee: \"0\",\n over_ad_spend: \"0\",\n percentage_fee: \"0\",\n flat_fee_enabled: \"0\",\n percentage_fee_enabled: \"0\",\n percentage_fee_total_over: \"total\",\n });\n setSEOFeesStructureDetail([...newArray]);\n };\n const handleAddSEOFee = (event) => {\n let newArray = seoFeesDetail;\n newArray.push({ label: \"\", amount: \"0\", status: \"0\", enabled: \"0\", status: \"Recurring\", frequency: \"Monthly\" });\n setSEOFeesDetail([...newArray]);\n };\n const handleChange = (field, index, value) => {\n let newArray = seoFeesDetail;\n newArray[index][field] = value;\n setSEOFeesDetail([...newArray]);\n };\n const handleDeleteStructure = (i) => {\n let remain = seoFeesStructure.filter((web, index) => {\n return i != index;\n });\n setSEOFeesStructureDetail(remain);\n };\n const handleDeleteFee = (i) => {\n let remain = seoFeesDetail.filter((fee, index) => {\n return i != index;\n });\n setSEOFeesDetail(remain);\n };\n\n return (\n {serviceName} Team
\n\t\t\t\tAccount Lead(s)
\n\t\t\t\tAccount Support
\n\t\t\t\t\n
\n );\n}\n","import React from \"react\";\n\nexport default function SideBox(props) {\n\treturn (\n\t\t<>\n\t\t\t\n \n SEO\n \n }\n checked={props.isEnabled}\n />\n
\n \n
\n Agreement
\n\n
\n \n \n \n
\n
\n \n \n Select and set shared fee structure\n | \n \n Fixed amount\n | \n\n Revenue (total or above)\n | \n
|---|---|---|
| \n \n Over revenue\n \n | \n \n \n \n \n \n \n \n | \n \n \n \n \n \n \n \n {(index >= 0 && seoFeesStructure.length > 1) && handleDeleteStructure(index)}>}\n | \n
\n
\n Active SEO Fees
\n\n View full history\n
\n\n
\n \n \n \n
\n
\n \n | \n | Frequency | \nLabel | \nAmount | \n\n Status\n | \n
|---|---|---|---|---|
| \n \n \n | \n \n | \n \n | \n \n \n \n \n \n | \n \n \n handleDeleteFee(index)}>\n \n | \n
\n
\n \n\t\t\t\t
\n\t\t\n\t);\n}\n","import React, { useState, useEffect } from \"react\";\nimport {Row, Container, Col, Form } from \"react-bootstrap\";\nimport TeamBox from \"./TeamBox\";\n\n\nexport default function Team(props) {\n\n return (\n \n\t\t\t\t\t
\n\t\t\tThis box is a placeholder for actual content
\n\t\t\t\tTeam Access
\n\n Team access is a mutually-viewable tool by the client and the\n team, that is for tracking the platforms that the team has been\n granted acess to. In other words, the goal/use of this section is\n exclusively to track and reference in DataPulse, and checking a\n box will not automatically grant access.{/* Access\n must be granted by the client on the platform itself. Click 'Show\n me' for a detailed walkthrough of how to grant the team access to\n each platform.*/} Only after you have granted access to your team on \n the platform should you check and fill the appropriate box in this\n section.\n
\n \n\n
\n \n General
\n\n \n \n
\n \n
\n \n PPC
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n
\n \n
\n \n SEO
\n\n \n \n \n \n
\n \n \n \n \n setMainCheck(!mainCheck)}\n />\n \n \n \n {/* \n Show me }\n message={\n \n {thumbnail}\n \n }\n />\n */}\n
\n \n ) : (\n \n \n {\" \"}\n
\n \n \n )}\n
\n \n \n setSemSetupCheck(!semSetupCheck)}\n checked={semSetupCheck}\n name={`team_access[${props.title}][Completed setup]`}\n />\n \n \n
{\" \"}\n \n \n setSemSetupCheck(!semSetupCheck)}\n checked={!semSetupCheck}\n name={`team_access[${props.title}][Incompleted setup]`}\n />\n \n \n
{\" \"}\n \n
\n \n
{\" \"}\n \n
\n
\n ) : props.title === \"Shopify\" ? (\n \n {props.title}\n
\n \n {options[props.title] ? (\n\n {\" \"}\n Show me\n
\n\n
\n
\n \n
{\" \"}\n \n
\n \n \n setMainCheck(!mainCheck)}\n />\n \n \n \n {/* \n Show me }\n name={`team_access[${props.title}][Completed setup]`}\n message={\n \n {thumbnail}\n \n }\n />\n */}\n
\n \n ) : (\n \n \n {\" \"}\n
\n \n \n )}\n
\n \n
\n \n \n setCheck1(!check1)}\n // onChange={() => {setCheck1(!check1)\n // setRequireCheck(!requireCheck)} }\n checked={check1}\n // required={requireCheck}\n name={`team_access[${props.title}][Completed setup]`}\n />\n \n \n
\n
\n ) : (\n \n {props.title}\n
\n \n {options[props.title] ? (\n\n {\" \"}\n Show me\n
\nAccess level granted:
\n \nCompleted setup
\n \n\n \n \n setMainCheck(!mainCheck)}\n />\n \n \n \n {/* \n Show me }\n message={\n \n {thumbnail}\n \n }\n />\n */}\n
\n \n ) : (\n \n \n {\" \"}\n
\n */}\n \n )}\n
\n \n
\n \n \n setCheck1(!check1)}\n // onChange={() => {setCheck1(!check1)\n // setRequireCheck(!requireCheck)} }\n checked={check1}\n // required={requireCheck}\n name={`team_access[${props.title}][Full]`}\n />\n \n \n
\n \n \n setCheck2(!check2)}\n // onChange={() => {setCheck2(!check2)\n // setRequireCheck(!requireCheck)} }\n checked={check2}\n // required={requireCheck}\n name={`team_access[${props.title}][Restricted]`}\n />\n \n \n
\n
\n )}\n \n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Button, Col, Row, Form } from \"react-bootstrap\";\nimport jsDig from \"utils/jsDig\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport CustomTooltip from \"utils/CustomTooltip\";\n\nexport default function Details(props) {\n const website = jsDig([\"client_account\", \"websites\", \"primary\"], props);\n const additionalWebsites = jsDig([\"client_account\", \"websites\", \"additional\"], props);\n const [primarySite, setPrimarySite] = useState(website);\n const [additionalWebs, setAdditionalWebs] = useState(additionalWebsites ? additionalWebsites : []);\n const [platform, setPlatform] = useState(props.client_account.website_platform ? props.client_account.website_platform : \"0\");\n const [shopifyUrl, setShopifyUrl] = useState(props.client_account.shopify_url ? props.client_account.shopify_url : \"\");\n\n let shopifyIcon = require(\"images/logos/shopify-icon.png\");\n shopifyIcon = \n {props.title}\n
\n \n {options[props.title] ? (\n\n {\" \"}\n Show me\n
\nAccess level granted:
\n \nFull
\n \nRestricted
\n \n
;\n const resetMessage = \"Resetting Shopify token will require you to authenticate again\";\n\n const authenticateFunction = () => {\n const paramsObject = {\n shopify_url: shopifyUrl,\n };\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/shopify-authenticate\",\n dataType: \"json\",\n async: false,\n contentType: \"application/json\",\n data: JSON.stringify(paramsObject),\n success: (data, success, xhr) => {\n window.open(data.permission_url, \"_blank\");\n //change it back to below before push\n // window.location.href = data.redirect_url;\n },\n }).then(setShopifyButton(resetButton));\n };\n\n const authenticateButton = (\n \n );\n const resetToken = () => {\n let myObject = {\n shopify_token: \"\",\n client_account_id: props.client_account.id,\n };\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/reset_token\",\n dataType: \"json\",\n async: false,\n contentType: \"application/json\",\n data: JSON.stringify(myObject),\n });\n setShopifyButton(authenticateButton);\n };\n\n const resetButton = (\n <>\n \n Website/Domain Details
\n\n Navigate to your website in a browser, and copy and paste the URL directly from the address bar. \n To add additional websites or subdomains (ie. if your primary website is \"example.com\" and you need to add \"shop.example.com\"), click the 'Add'\n button to create a new field and follow the same process in the new field with every entry.\n
\n \nPrimary Website
\nAdditional websites/subdomains
\nPlatform
\n \n\n Shopify URL\n
\nIf changing the URL you must press \"Save Changes\" before you can \"Authenticate\"
\n \n \nCapabilities
\n \n\n Development\n
\n\n Creative\n
\n\n \n \n
\n\n
\n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Container } from \"react-bootstrap\";\nimport Details from \"./Details\";\nimport Permissions from \"./Permissions\";\n\nexport default function Website(props) {\n\treturn (\n\t\t\n
\n Website Permissions
\n\n Communicate website permissions from the client to the {props.organization.name} team below. Select your global settings to dictate the overall\n permissions for the website and then use the custom permissions fields if necessary to dictate anything that might vary from your global. For\n eample, if a client wants no changes made to the site but they are okay with changes to content specifically, set the Global permission to a\n 1, and then add 'Content' in the custom fields at a 2 or 3.\n
\n \n {/*\n
\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n \n setIsEnabled(!isEnabled)}\n id=\"websitepermissionenable\"\n name=\"custom_website_permissions_enabled\"\n checked={isEnabled}\n />\n
\n {customPermissions.map((item, idx) => {\n let website = item.website;\n\n return isEnabled ? (\n \n \n \n \n {\n const newPermissions = customPermissions.filter((el) => item.id !== el.id);\n setCustomPermissions([...newPermissions]);\n }}>\n \n \n
\n ) : null;\n })}\n \n permissionHandler([...customPermissions, { id: uuidv4(), website: \"\", permission: 4 }])}>\n + Add field\n \n \n
\n \n
\n\n |
\n
\n Global permissions
\n\nFree to make changes, no notification necessary
\n \nFree to make changes with follow-up email summary
\n \nAll changes require prior approval
\n \n\n {\" \"}\n No changes allowed, or exceptions only{\" \"}\n
\n \nCustom permissions/exceptions
\nEnable
\n\n \n {\" \"}\n \n \n
\n \n Set to:
{\" \"}\n\n
\n \n \n\t\t\t
\n
\n );\n}\n","import React, { useContext, useState } from 'react';\nimport { SettingsContext } from './AccountSettingsButton';\nimport jsDig from 'utils/jsDig.js';\n\nexport default function AccountIds() {\n const props = useContext(SettingsContext);\n\n let shopifyIcon = require(\"images/lite/icons/shopify.png\");\n shopifyIcon = \n
\n \n {handshake}
\n Client Access
\n\n
\n\n \n {teamAccess}
\n \n\n Team Access
\n;\n let googleAds = require(\"images/lite/icons/google-ads.png\");\n googleAds = 
;\n\n let googleAdsId = jsDig([\"client_account\", \"platform_ids\", \"google_ads\"], props);\n let microsoftId = jsDig([\"client_account\", \"platform_ids\", \"microsoft\"], props);\n let metaId = jsDig([\"client_account\", \"platform_ids\", \"meta\"], props);\n let tiktokId = jsDig([\"client_account\", \"platform_ids\", \"tiktok\"], props);\n let googleAnalyticsId = jsDig([\"client_account\", \"platform_ids\", \"google_analytics\"], props);\n let semrushId = jsDig([\"client_account\", \"platform_ids\", \"semrush\"], props);\n let shopifyUrl = jsDig([\"client_account\", \"platform_ids\", \"shopify\"], props);\n let amazonAdsId = jsDig([\"client_account\", \"platform_ids\", \"amazon_ads\"], props);\n\n const [selectedOption, setSelectedOption] = useState(jsDig([\"ppc_section\", \"shopify_revenue_type\"], props));\n const [conversionObjective, setConversionObjective] = useState(jsDig([\"social_section\", \"conversion_objective\"], props));\n const [tiktokConversionObjective, setTiktokConversionObjective] = useState(jsDig([\"social_section\", \"tiktok_conversion_objective\"], props));\n\n const handleRadioChange = (value) => {\n setSelectedOption(value);\n };\n\n return (\n \n
\n );\n}\n\n","import React, { useState, createContext } from 'react';\nimport jsDig from \"utils/jsDig.js\";\nimport AccountSettingsModal from './AccountSettingsModal'; \n\nexport const SettingsContext = createContext();\n\nexport default function AccountSettingsButton(props) {\n\n let cog = require(\"images/lite/icons/settings.png\");\n cog = (\n \n
\n \n
\n \n {GoogleAnalytics}
\n Google Analytics
\n\n
\n Google Analytics ID
\n \n\n
\n \n {googleAds}
\n Google Ads
\n\n
\n Google Ads ID
\n \n\n
\n \n {microsoftAds}
\n Microsoft Ads
\n\n
\n Microsoft Ads ID
\n \n\n
\n \n {metaAds}
\n Meta Ads
\n\n
\n Meta Ads ID
\n \n\n
\n Facebook Objective
\n\n setConversionObjective(e.target.value)}>\n {Object.keys(props.facebook_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.facebook_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n
\n \n
\n \n {tiktokAds}
\n TikTok Ads
\n\n
\n TikTok Ads ID
\n \n\n
\n TikTok Objective
\n\n setTiktokConversionObjective(e.target.value)}>\n {Object.keys(props.tiktok_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.tiktok_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n
\n \n
\n \n {semrush}
\n SEMRush
\n\n
\n SEMRush Target Location:
\n\n \n \n \n \n \n \n
\n \n
\n SEMRush ID
\n \n\n
\n \n {shopifyIcon}
\n Shopify
\n\n
\n Shopify URL
\n \n\n
\n Shopify revenue type
\n\n handleRadioChange(e.target.value)}\n />\n \n
\n \n handleRadioChange(e.target.value)}\n />\n \n
\n \n
\n \n
\n Shopify Country Filter
\n\n \n {[\"none\", \"US\", \"CA\"].map((country) => {\n return (\n \n );\n })}\n \n
\n \n
\n \n {amazonAdsIcon}
\n Amazon Ads
\n\n
\n Amazon Ads ID
\n\n \n
\n \n
\n );\n\n useEffect(() => {\n if (formSubmitted) {\n // location.reload();\n }\n }, [formSubmitted]);\n\n return isModalOpen ? (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n ) : null;\n }\n \n export default AccountSettingsModal;\n ","import React, { useState, useContext, useRef } from 'react';\nimport LiteCurrencySelector from './LiteCurrencySelector'; \nimport { SettingsContext } from './AccountSettingsButton'\nimport jsDig from 'utils/jsDig.js';\n\nexport default function Basic() {\n\n const props = useContext(SettingsContext);\n\n const [baseCurrency, setBaseCurrency] = useState(jsDig([\"client_account\", \"base_currency\"], props));\n const [displayCurrency, setDisplayCurrency] = useState(jsDig([\"client_account\", \"display_currency\"], props));\n const [dashboardObjective, setDashboardObjective] = useState(jsDig([\"client_account\", \"dashboard_objective\"], props));\n const [companyName, setCompanyName] = useState(jsDig([\"company_name\"], props));\n const [primarySite, setPrimarySite] = useState(jsDig([\"client_account\", \"websites\", \"primary\"], props));\n const [isPrimarySiteValid, setPrimarySiteValid] = useState(true);\n\n const validatePrimarySite = (url) => {\n const pattern = new RegExp(\n '^https?:\\\\/\\\\/'+ // protocol (http or https required)\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_]*)?$','i'); // fragment locator\n return pattern.test(url);\n };\n\n const handlePrimarySiteChange = (event) => {\n const url = event.target.value;\n setPrimarySite(url);\n setPrimarySiteValid(validatePrimarySite(url));\n };\n \n\n let defaultLogo = require(\"images/lite/icons/logo-placeholder.png\");\n let uploadIcon = require(\"images/lite/icons/upload.png\");\n uploadIcon = \n
\n );\n}\n","import React, { useState, useContext } from \"react\";\nimport { Button, Row, Col } from \"react-bootstrap\";\nimport UserSelector from \"utils/UserSelector\";\nimport CreateNewUser from \"./CreateNewUser\";\nimport { SettingsContext } from './AccountSettingsButton'\n\nexport default function ClientUsers(props) {\n\n\n const context = useContext(SettingsContext);\n // Users selected in user selector as client users\n const [selectedUsers, setSelectedUsers] = useState(props.client_account.client_users ? props.client_account.client_users : [])\n // All client users in the database with relevant data\n const [clientUsers, setClientUsers] = useState(props.client_users ? props.client_users : {})\n // New users that will need to be created on client config save\n const newUsers = context.newUsers\n const setNewUsers = context.setNewUsers\n \n\n\n const addNewUser = (user) => {\n let newClientUsers = {...clientUsers}\n newClientUsers[user.email] = {\n avatar: false,\n avatar_big: false,\n name: user.firstName + \" \" + user.lastName,\n job_title: null,\n department: \"no_department\"\n }\n setClientUsers(newClientUsers)\n setSelectedUsers([...selectedUsers, user.email])\n setNewUsers([...newUsers, {\n email: user.email,\n firstName: user.firstName,\n lastName: user.lastName,\n accountAccessIds: user.accountAccessIds\n }])\n }\n\n const hiddenFields = newUsers.map((user, index) => (\n \n
\n \n
\n Company display name
\n \n\n
\n Company Website
\nMust use valid URL which includes http or https
}\n\n
\n \n
\n Default Dashboard Objective
\n\n setDashboardObjective(e.target.value)}>\n \n \n \n
\n \n
\n In the majority of cases:
\n- \n
- \"Sales\" will be most helpful for ecommerce. \n
- \"Conversions\" will be most helpful for lead gen. \n
\n
\n \n
\n Base Currency
\n\n
\n \n
\n Display Currency
\n\n
\n \n
\n \n
\n \n
\n Client Logo
\n{companyLogo}
\n \n {\n if (e.target.files[0].size > 10000000) {\n alert(\"Image must be less than 10MB. Consider use another image or compress this one.\");\n }\n console.log(e.target.files[0])\n setImageURL(URL.createObjectURL(e.target.files[0]));\n }}\n />\n\n \n
\n Client Users
\n \n\n
\n \n Internal Datapulse users
\n\n {hiddenFields}\n
\n \n \n
\n );\n}\n","import React, { useContext } from \"react\";\nimport { Row, Col, Form, Modal, Button, FormControl, Alert } from \"react-bootstrap\";\nimport {SettingsContext} from './AccountSettingsButton';\n\nclass CreateNewUser extends React.Component {\n\n\n constructor(props) {\n super(props);\n\n this.state = {\n show: false,\n employeeType: \"client\",\n clients: this.props.clients ? this.props.clients : [],\n first_name: \"\",\n fNameError: \"\",\n last_name: \"\",\n lNameError: \"\",\n email: \"\",\n emailError: \"\",\n accountAccessIds: [this.props.selectedAccountId],\n };\n\n }\n\n\n toggleAccess(clientId) {\n if (!this.state.accountAccessIds.includes(clientId)) {\n this.setState({\n accountAccessIds: [...this.state.accountAccessIds, clientId],\n });\n } else {\n this.setState({\n accountAccessIds: this.state.accountAccessIds.filter((id) => id != clientId),\n });\n }\n }\n\n accessAll(event) {\n let checkAll = event.target.checked;\n $(\".client-list input[type=checkbox]\").each((index, el) => {\n $(el).prop(\"checked\", checkAll);\n });\n checkAll\n ? this.setState({\n accountAccessIds: this.state.clients.map((client) => client.id),\n })\n : this.setState({ accountAccessIds: [] });\n }\n\n nextPage() {\n $(\".page-1\").hide();\n $(\".page-2\").show();\n }\n\n backPage() {\n $(\".page-2\").hide();\n $(\".page-1\").show();\n }\n\n searchClients(event) {\n let filter = event.target.value.toLowerCase().trim();\n let visibleClients = [];\n this.props.clients.forEach((client) => {\n let clientName = client.company_name.toLowerCase();\n if (clientName.includes(filter)) {\n visibleClients.push(client);\n }\n });\n this.setState({ clients: visibleClients });\n }\n\n //=========================== FORM VALIDATION START ===================================\n handleNext = (e) => {\n e.preventDefault();\n const err = this.errorCheck();\n if (!err) {\n this.nextPage();\n } else {\n return;\n }\n };\n\n handleSubmit = (e) => {\n e.preventDefault();\n this.props.addNewUser({\n email: this.state.email,\n firstName: this.state.first_name,\n lastName: this.state.last_name,\n accountAccessIds: this.state.accountAccessIds,\n });\n // Reset state\n this.setState({\n show: false,\n employeeType: \"client\",\n clients: this.props.clients ? this.props.clients : [],\n first_name: \"\",\n fNameError: \"\",\n last_name: \"\",\n lNameError: \"\",\n email: \"\",\n emailError: \"\",\n accountAccessIds: [this.props.selectedAccountId],\n });\n };\n\n errorCheck = () => {\n let isError = false;\n const errors = {\n fNameError: \"\",\n lNameError: \"\",\n emailError: \"\",\n };\n\n if (this.state.first_name.length < 1) {\n isError = true;\n errors.fNameError = \"First name cannot be empty\";\n }\n\n if (this.state.last_name.length < 1) {\n isError = true;\n errors.lNameError = \"Last name cannot be empty\";\n }\n\n if (this.state.email.indexOf(\"@\") === -1) {\n isError = true;\n errors.emailError = \"Valid email must contain @ symbol\";\n }\n if (isError) {\n this.setState({\n ...this.state,\n ...errors,\n });\n }\n return isError;\n };\n\n change = (e) => {\n this.setState({\n [e.target.name]: e.target.value,\n });\n };\n\n //=========================== FORM VALIDATION END ===================================\n\n render() {\n return (\n \n {props.clientUsers.map((user, index) => (\n \n \n ))}\n
\n \n \n \n
\n \n
\n \n {xIcon}\n
\n \n {user.active ? \"Active\" : \"Invited\"}\n
\n This feature is coming soon.
\n \n \n \n \n
\n );\n };\n\n return (\n <>\n \n {platforms === \"Facebook\" ? (\n <>\n \n \n \n \n ) : (\n <>\n {\n uploadCsv(e);\n }}\n onClick={(e) => {\n e.target.value = null;\n }}\n />\n \n {[0, 1].map((tableIndex) => {\n return (\n
\n );\n })}\n
\n \n );\n}\n","import React from \"react\";\nimport getCurrencyDetails from \"utils/getCurrencyDetails\";\n\nexport default function LiteCurrencySelector(props) {\n const currencies = [\n \"USD\",\n \"EUR\",\n \"JPY\",\n \"GBP\",\n \"AUD\",\n \"CAD\",\n \"CHF\",\n \"CNY\",\n \"HKD\",\n \"NZD\",\n \"AED\",\n \"INR\",\n \"SGD\",\n \"KRW\"\n ];\n const selectedCurrency = props.selectedCurrency ? props.selectedCurrency : currencies[0];\n\n return (\n \n
\n {calendarBolt} Inflation (past 30 days)
\n\n
\n \n )}\n\n Show inflation for:
\n\n {\n setSelectedPlatform(e.target.value);\n }}\n value={selectedPlatform}>\n {platforms.map((platform, index) => {\n return ;\n })}\n \n
\n \n \n {ComingSoonTooltip()}\n {platforms !== \"Facebook\" && (\n \n )}\n
\n\n {platforms.map((platform, index) => {\n const visability = platform == selectedPlatform ? \"flex\" : \"none\";\n return (\n \n \n \n
\n
\n \n );\n })}\n | \n {yieldMetrics.map((metric, index) => {\n return (\n | \n {metric}\n | \n );\n })}\n
|---|---|
| \n | \n );\n })}\n
\n props.setSelectedCurrency(e.target.value)}\n >\n {currencies.map((currency) => {\n const currencyDetails = getCurrencyDetails(currency);\n return (\n \n );\n })}\n \n
\n );\n}\n","import React, { useState, useContext } from \"react\";\nimport { Col, Form } from \"react-bootstrap\";\nimport { SettingsContext } from './AccountSettingsButton'\nimport jsDig from \"utils/jsDig.js\";\nimport { v4 as uuidv4 } from \"uuid\";\n\nexport default function ScriptBoxes(props) {\n\n const context = useContext(SettingsContext);\n \n\n const [youtubeChannelExcluderData, setYoutubeChannelExcluderData] = useState(jsDig([\"client_account\", \"scripts\", \"youtube_channel_excluder\"], props) || {});\n const [localKeywords, setLocalKeywords] = useState(context.excludeNbInShoppingKeywords);\n\n const deleteKeyword = (e, kwNum) => {\n e.preventDefault();\n const {[kwNum]: deletedValue, ...remainingKeywords} = context.excludeNbInShoppingKeywords;\n context.setExcludeNbInShoppingKeywords(remainingKeywords);\n };\n\n const handleAddKeyword = (e) => {\n e.preventDefault();\n // context.excludeNbInShoppingKeywords is an object with numeric keys\n const newKey = uuidv4()\n const newKeywords = { ...context.excludeNbInShoppingKeywords, [newKey]: \"\" }; // Add a new entry with an empty string or a default value\n context.setExcludeNbInShoppingKeywords(newKeywords);\n };\n\n const handleScriptPropertyInput = (e, propertyName, currentData, updateMethod) => {\n e.preventDefault();\n console.log(\"handleScriptPropertyInput\", propertyName, e.target.value);\n const newData = { ...currentData, [propertyName]: e.target.value };\n updateMethod(newData);\n };\n\n const handleLocalChange = (key, value) => {\n setLocalKeywords(prevKeywords => ({\n ...prevKeywords,\n [key]: value\n }));\n};\n\nconst handleBlur = () => {\n context.setExcludeNbInShoppingKeywords(localKeywords);\n};\n\n return (\n <>\n {props.scripts.map((script) => {\n console.log(`[scripts][${script.name}]`)\n return (\n \n
\n \n ) : (script.name == \"youtube_channel_excluder\") ? (\n \n
\n \n
\n \n
\n \n {script.desc}\n
\n\n
\n Please add branded keywords - keywords should only match variations of the company name, no long-tail keywords:
\nAll keywords with more than 0 clicks in the past 30 days will be analyzed
\n\n
\n \n \n {Object.keys(context.excludeNbInShoppingKeywords).map((kwNum, i) => {\n return (\n
\n \n {kwNum}.\n handleLocalChange(kwNum, e.target.value)}\n onBlur={handleBlur}\n />\n deleteKeyword(e, kwNum)}>\n \n \n
\n );\n })}\n \n
\n \n ) : (\n \n
\n \n
\n \n
\n {script.desc}
\n\n
\n Please create a copy of this google sheet before enabling this script.
\nEdit access must be granted to support@digitalposition.com
\n\n \n Google Sheet \n handleScriptPropertyInput(e, \"google_sheet\", youtubeChannelExcluderData, setYoutubeChannelExcluderData)}\n placeholder=\"https://docs.google.com/spreadsheets/...\"\n />\n \n \n Allowed Countries \n handleScriptPropertyInput(e, \"allowed_countries\", youtubeChannelExcluderData, setYoutubeChannelExcluderData)}\n placeholder=\"^US$\"\n />\n \n \n Impressions Time Range \n \n \n Impressions Threshold \n handleScriptPropertyInput(e, \"impressions_threshold\", youtubeChannelExcluderData, setYoutubeChannelExcluderData)}\n placeholder=\"Default: 10\"\n />\n \n
\n Please supply a regex formula to specfify which countries you would like to whitelist. (E.g. ^US|UK|CA$)
\nSelect a predefined time range.
\n\n handleScriptPropertyInput(e, \"impressions_time_range\", youtubeChannelExcluderData, setYoutubeChannelExcluderData)}\n placeholder=\"LAST_7_DAYS\"\n >\n \n \n \n \n \n
\n Minimum number of impressions to consider a channel for exclusion.
\n\n
\n \n )}\n \n
\n \n
\n\n \n
\n {script.desc}
\n\n \n
\n \n
\n
\n\t\t\n\t);\n}\n","import React, { useState } from \"react\";\nimport { Form } from \"react-bootstrap\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport jsDig from \"utils/jsDig.js\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport { Row, Col } from \"react-bootstrap\";\n\nexport default function AccountIdBox(props) {\n\tconst [platformEnabled, setPlatformEnabled] = useState(\n\t\tjsDig([\"enabled\"], props.platformData)\n\t\t\t? jsDig([\"enabled\"], props.platformData)\n\t\t\t: false\n\t);\n\n\tconst accountids = jsDig([\"account_ids\"], props.platformData)?jsDig([\"account_ids\"], props.platformData) : [\"\"]\n\n\tconst tooltipMessage = \n
\n \n Scripts:
\n{exclaimTriangle}
\n \n Enabling/disabling these scripts without a thorough understanding of the function may have unintended consequences. Please proceed with caution.\n
\nNote: Microsoft Ads account IDs must now be taken from the URL. Select the account from the initial list of accounts, then check the url for the \"aid\" parameter. The account id directly follows the = symbol. {props.example}
\n\t\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}))\n\t\t\t\t\t\t: (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t);\n}\n","import { includes } from \"lodash-es\";\nimport React from \"react\";\nimport { Draggable } from \"react-beautiful-dnd\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport EditCampaignGroup from \"./EditCampaignGroup\";\n\nconst handleSrc = require(\"images/icons/ui-handle.png\");\nlet triangle = require(\"images/icons/blue-triangle.png\");\ntriangle = ID number
\n\t\t\t\t\t{\n\t\t\t\t\t\taccountids.length > 0 ? (accountids.map((accountId,index)=>{\n\t\t\t\t\t\t\treturn(\n\t\t\t\t\t\t\t\t\n
\n )}\n \n
\n {boxGrip}
\n \n
\n \n
\n \n
\n \n
\n \n {platformType}: {groupName}\n
\n\n
\n \n
\n Contains:
\n {containsAnd && containsAnd.length > 0\n ? containsAnd\n .toString()\n .split(\",\")\n .map((text, index) => {\n return (\n\n \n {text}\n \n {index < containsAnd.toString().split(\",\").length - 1 && (\n \n and\n \n )}\n
\n );\n })\n : containsOr\n .toString()\n .split(\",\")\n .map((text, index) => {\n return (\n \n \n {text}\n \n {index < containsOr.toString().split(\",\").length - 1 && (\n \n or\n \n )}\n
\n );\n })}\n \n
\n \n
\n Does not contain:
\n {noAnd && noAnd.length > 0\n ? noAnd\n .toString()\n .split(\",\")\n .map((text, index) => {\n return (\n\n \n {text}\n \n {index < noAnd.toString().split(\",\").length - 1 && (\n \n and\n \n )}\n
\n );\n })\n : noOr\n .toString()\n .split(\",\")\n .map((text, index) => {\n return (\n \n \n {text}\n \n {index < noOr.toString().split(\",\").length - 1 && (\n \n or\n \n )}\n
\n );\n })}\n \n {props.platformType == \"Social\" ? (\n
\n Custom conversions: {props.item.conversion_objective == \"custom_conversions\" ? \"enabled\" : \"disabled\"}
\n ) : (\nCustom conversions: {props.item.conversion_actions_enabled ? \"enabled\" : \"disabled\"}
\n )}\n\n {props.blueTriangle ? \n triangle :\n invisTriangle\n }\n
\n \n \n \n \n {campaign.conditions.contains && (\n <>\n {Array.isArray(campaign.conditions.contains.and)\n ? campaign.conditions.contains.and.map((words, i) => {\n return ;\n })\n : campaign.conditions.contains.and &&\n campaign.conditions.contains.and.split(\",\").map((words, i) => {\n return ;\n })}\n {Array.isArray(campaign.conditions.contains.or)\n ? campaign.conditions.contains.or.map((words, i) => {\n return ;\n })\n : campaign.conditions.contains.or &&\n campaign.conditions.contains.or.split(\",\").map((words, i) => {\n return ;\n })}\n \n )}\n {campaign.conditions.not_contains && (\n <>\n {Array.isArray(campaign.conditions.not_contains.and)\n ? campaign.conditions.not_contains.and.map((words, i) => {\n return ;\n })\n : campaign.conditions.not_contains.and &&\n campaign.conditions.not_contains.and.split(\",\").map((words, i) => {\n return ;\n })}\n {Array.isArray(campaign.conditions.not_contains.or)\n ? campaign.conditions.not_contains.or.map((words, i) => {\n return ;\n })\n : campaign.conditions.not_contains.or &&\n campaign.conditions.not_contains.or.split(\",\").map((words, i) => {\n return ;\n })}\n \n )}\n\n {campaign.id && }\n {props.platformType == \"Social\" ? (\n <>\n \n {campaign.custom_conversions &&\n campaign.custom_conversions.length > 0 &&\n campaign.custom_conversions.map((conversion, index) => {\n return (\n \n \n \n \n );\n })}\n \n \n ) : (\n <>\n \n {campaign.conversion_actions &&\n campaign.conversion_actions.length > 0 &&\n campaign.conversion_actions.map((conversion) => {\n return (\n \n );\n }\n })\n }\n\n
\n
\n );\n}\n","import React, { useState } from \"react\";\nimport { Row, Col, Modal, Table, Button, Form, Alert } from \"react-bootstrap\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport ConversionActionIds from \"./ConversionActionIds\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport testCampaignGroupFilters from \"utils/testCampaignGroupFilters\";\nimport CustomConversions from \"client_config/ppc_config/social/ids_data/CustomConversions\";\n\nexport default function ConfigureCampaignGroup(props) {\n const [showBox, setShowBox] = useState(false);\n const clearFields = (item, input) => {\n document.getElementById(`${item}`).value = \"\";\n };\n const [testString, setTestString] = useState(\"\");\n const testStringMatches = testCampaignGroupFilters({ contains: { [props.containsPreviewModifier]: props.containsTerms }, notContains: { [props.notContainsPreviewModifier]: props.notContainsTerms } }, testString) == true\n const [conversionActionsEnabled, setConversionActionsEnabled] = useState(false);\n const [conversionActions, setConversionActions] = useState([{ conversion_type: \"exclusive\", name: \"\", conversion_id: \"\" }]);\n // Only used for social\n const [conversionObjective, setConversionObjective] = useState(props.social_section.conversion_objective);\n const [customConversions, setCustomConversions] = useState([]);\n const [tiktokConversionObjective, setTiktokConversionObjective] = useState(props.social_section.tiktok_conversion_objective);\n // Error handling\n const [errorText, setErrorText] = useState([]);\n \n const handleSumbit = (e) => {\n e.preventDefault();\n \n const newName = $(\".campaign-name\").val();\n const conversionActionsLabels = $(\".conversion-actions-label\").map(function() { return $(this).val(); }).toArray();\n const conversionActionsIds = $(\".conversion-actions-id\").map(function() { return $(this).val(); }).toArray();\n const customConversionsLabels = $(\".social-custom-conversions-label\").map(function() { return $(this).val(); }).toArray();\n const customConversionsIds = $(\".social-custom-conversions-id\").map(function() { return $(this).val(); }).toArray();\n let errorsPresent = false;\n let errors = [];\n\n if (newName === undefined || newName === \"\") {\n errorsPresent = true;\n errors.push(\"You must include a campaign group name\")\n }\n if (conversionActionsEnabled && conversionActions.length > 0 && conversionActionsLabels.includes(\"\")) {\n errorsPresent = true;\n errors.push(\"All conversion actions must have a label\")\n }\n if (conversionActionsEnabled && conversionActions.length > 0 && conversionActionsIds.includes(\"\")) {\n errorsPresent = true;\n errors.push(\"All conversion actions must have an ID\")\n }\n // check the props if this is the social section\n if (props.platformType === \"Social\" && conversionObjective === \"custom_conversions\" && customConversions.length > 0 && customConversionsLabels.includes(\"\")) {\n errorsPresent = true;\n errors.push(\"All custom conversions must have a label\")\n }\n if (props.platformType === \"Social\" && conversionObjective === \"custom_conversions\" && customConversions.length > 0 && customConversionsIds.includes(\"\")) {\n errorsPresent = true;\n errors.push(\"All custom conversions must have an ID\")\n }\n\n setErrorText(errors);\n\n if (!errorsPresent) {\n setErrorText([])\n props.handleAddBox(conversionActions, conversionActionsEnabled, customConversions, conversionObjective, tiktokConversionObjective);\n setShowBox(false);\n props.setContainsTerms([]);\n props.setNotContainsTerms([]);\n props.setCampaignGroupsNames([]);\n setConversionActionsEnabled(false);\n setConversionActions([{ conversion_type: \"exclusive\", name: \"\", conversion_id: \"\" }]);\n setConversionObjective(props.social_section.conversion_objective);\n setCustomConversions([]);\n setTiktokConversionObjective(props.social_section.tiktok_conversion_objective);\n }\n };\n\n return (\n \n
\n )}\n \n Campaign Groups:\n
\n\n Here you can create new campaign groups, view and edit all of your existing campaign groups, and click and drag to reorder them.\n Only the top three campaign groups will be displayed in the PPC Summary (indicated with a blue triangle in the bottom-right corner).\n
\n\n \n
\n );\n })}\n \n )}\n \n \n {[1, 2].map((col) => {\n return (\n \n \n {(provided) => (\n \n \n );\n })}\n \n
\n \n \n {sectionOrder\n .filter((groupId, idx) => {\n if (col == 1 && idx % 2 == 0) {\n return groupId;\n }\n if (col == 2 && idx % 2 != 0) {\n return groupId;\n }\n })\n .map((groupId, idx) => {\n const campaign = campaignGroups.find((group) => group.id == groupId);\n if (campaign) {\n return (\n
\n )}\n \n
\n );\n }\n })}\n {provided.placeholder}\n \n setShowBox(false)}>\n \n Configure Campaign Groups \n \n \n \n \n props.setCampaignGroupsNames([...props.campaignGroupsNames, e.target.value])}\n placeholder={`${props.platformType}: Campaign Group Name`}\n required\n />\n \n
\n\n \n \n \n {\n props.setShowAlert1(false);\n props.setContainsInput(\"\");\n }}>\n x\n \n \n
\n \n ) : undefined}\n
\n \n \n props.setContainsPreviewModifier(e.target.value)}\n size=\"sm\"\n as=\"select\"\n value={props.containsPreviewModifier}\n style={{ width: \"70px\" }}>\n \n \n \n \n
\n \n \n props.setNotContainsPreviewModifier(e.target.value)}\n className=\"primary \"\n size=\"sm\"\n value={props.notContainsPreviewModifier}\n as=\"select\"\n style={{ width: \"70px\" }}>\n \n \n \n \n
\n \n
\n\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n\n {props.platformType === \"Social\" ? (\n
\n \n setShowBox(true)}\n className=\"btn-lg\"\n style={{\n cursor: \"pointer\",\n paddingLeft: \"26px\",\n paddingRight: \"26px\",\n }}\n variant=\"success\">\n + New campaign group\n \n
\n {/* Popup Modal */}\n Name:
\n \nContains:
\n\n {\n props.setShowAlert1(false);\n }}\n onChange={(e) => {\n props.setContainsInput(e.target.value);\n }}\n id=\"contains_term\"\n />\n
\n {props.showAlert1 === true ? (\n \n The keyword \"{props.containsInput}\" already exists!\n
\n \n ) : (\n <>\nYou must include a term!
\n \n )}\n \n\n {\n props.addItem(props.containsInput, \"contains\");\n clearFields(\"contains_term\");\n {\n props.showAlert1 === true && props.setContainsInput(\"\");\n }\n }}>\n + Add term\n \n
\n \n {props.containsTerms.map((term, idx) => {\n return (\n
\n \n \n {term}\n {\n props.removeItem(term, \"contains\");\n props.setShowAlert1(false);\n }}>\n x\n \n
\n );\n })}\n Does not contain:
\n\n {\n props.setShowAlert2(false);\n }}\n onChange={(e) => props.setNotContainsInput(e.target.value)}\n />\n {props.showAlert2 === true ? (\n \n \n {\n props.setShowAlert2(false);\n props.setContainsInput(\"\");\n }}>\n x\n \n \n
\n \n ) : undefined}\n
\n You must include a term!
\n ) : (\n <>\n\n The keyword \"{props.notContainsInput}\" already exists!\n
\n \n )}\n \n\n {\n props.addItem(props.notContainsInput, \"notContains\");\n clearFields(\"does_not_contain_term\");\n {\n props.showAlert2 === true && props.setNotContainsInput(\"\");\n }\n }}>\n + Add term\n \n
\n \n {props.notContainsTerms.map((term, idx) => {\n return (\n
\n \n \n {term}\n {\n props.removeItem(term, \"notContains\");\n props.setShowAlert2(false);\n }}>\n x\n \n
\n );\n })}\n \n \"Contains\" modifier:\n
\n \n\n \"Not contains\" modifier:\n
\n \nOutput preview:
\n \nContains:
\n \n\n Does not contain:\n
\n \n\n Test a campaign name:\n
\n\n setTestString(e.target.value)}\n placeholder={\"Add the name of a campaign here\"}\n value={testString}\n style={testString != \"\" ? (\n testStringMatches ? {\n background: \"rgba(0, 200, 0, .25)\"\n } : {\n background: \"rgba(200, 0, 0, .25)\"\n }\n ) : {}}\n />\n
\n \n \n {testString != \"\" && (\n testStringMatches ? (\n \n ) : (\n \n )\n )}\n
\n \n
\n \n Instructions:
\n\n First, configure your terms that you want to contain (or exclude) by typing the term in the top corresponding field and clicking \"Add term\".\n
\n\n Then, select your modifier for each column to determine how those groups of terms will affect tracking. Choosing 'and' will detect and track\n results in which every listed term is included. Choosing 'or' will detect and track{\" \"}\n any result with at least one of the listed terms.\n
\n\n Finally, read (and re-read) your output to ensure your \"sentence structure\" is correct. Remember, 'and' will only track results with{\" \"}\n all terms, while 'or' will track results with any term.\n
\n\n
\n setConversionObjective(e.target.value)}\n style={{ width: \"256px\", paddingLeft: \"20px\", marginLeft: \"3px\" }}>\n {Object.keys(props.facebook_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.facebook_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n {conversionObjective == \"custom_conversions\" && (\n
\n Facebook Objective
\n\n setTiktokConversionObjective(e.target.value)}\n style={{ width: \"256px\", paddingLeft: \"20px\", marginLeft: \"3px\" }}>\n {Object.keys(props.tiktok_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.tiktok_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n
\n \n ) : (\n Tiktok Objective
\n\n Custom Conversions\n \n \n ![\"Conversion](\"https://digital-position.monday.com/protected_static/2205640/resources/991799417/large-conversion-action-ctid.jpg\")
\n
\n }\n inline={true}\n />\n \n To get a Conversion Action ID, go to Google Ads and open the Tools & Settings menu from the top right of the navbar. In the Measurement column, select Conversions. Next, select the conversion action from the list that appears. Once you have selected a conversion action, check the final URL of the page and look for the 'ctId' parameter. This will be equal to the Conversion Action's ID.
\n\n {error}
;\n }\n )}\n\n
\n \n );\n}\n","import React, { useState } from \"react\";\nimport { Row, Col, Modal, Table, Button, Form, Alert } from \"react-bootstrap\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport ConversionActionIds from \"./ConversionActionIds\";\nimport testCampaignGroupFilters from \"utils/testCampaignGroupFilters\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport CustomConversions from \"client_config/ppc_config/social/ids_data/CustomConversions\";\n\nexport default function EditCampaignGroup(props) {\n let edit = require(\"images/icons/edit.png\");\n edit = \n {\n setConversionActionsEnabled(!conversionActionsEnabled);\n }\n }\n />\n
\n \n \n \n {props.option ? (\n
\n
\n | \n | \n Label {\" \"}\n | \n \n ID \n | \n \n | |
| \n | \n \n | \n \n | \n {(index >= 0 && conversionActions.length > 0) ? (\n handleDelete(index)}>\n \n | \n ) : (\n\n )}\n |
\n {\n setConversionActions([...conversionActions, { conversion_type: \"exclusive\", name: \"\", conversion_id: \"\" }]);\n props.setConversionActions\n ? props.setConversionActions([...conversionActions, { conversion_type: \"exclusive\", name: \"\", conversion_id: \"\" }])\n : null;\n }}>\n + Add\n \n {props.cg &&\n
\n Conversion actions defined here are the only ones that will be used for this campaign group
\n }\n\n setShowBox(false)}>\n \n Edit Campaign Groups \n \n \n \n \n {\n props.handleEditBox(\n props.draggableId,\n e.target.value,\n \"\",\n \"\",\n \"\",\n containsTerms,\n notContainsTerms,\n conversionActionsEnabled,\n props.item,\n conversionActions,\n customConversions,\n conversionObjective,\n tiktokConversionObjective,\n containsPreviewModifier,\n notContainsPreviewModifier\n );\n }}\n placeholder=\"Search: Campaign Group Name 1\"\n />\n \n
\n \n \n \n {\n setShowAlert1(false);\n props.setContainsInput(\"\");\n }}>\n x\n \n \n
\n \n ) : undefined}\n
\n \n \n {\n setContainsPreviewModifier(e.target.value);\n props.setContainsPreviewModifier(e.target.value);\n props.handleEditBox(\n props.item.id,\n props.item.name,\n props.containsInput,\n \"\",\n \"\",\n containsTerms,\n notContainsTerms,\n conversionActionsEnabled,\n conversionActions,\n customConversions,\n conversionObjective,\n tiktokConversionObjective,\n e.target.value,\n notContainsPreviewModifier\n );\n\n }}\n size=\"sm\"\n as=\"select\"\n style={{ width: \"70px\" }}\n value={containsPreviewModifier}>\n \n \n \n \n
\n \n \n {\n setNotContainsPreviewModifier(e.target.value);\n props.setNotContainsPreviewModifier(e.target.value);\n props.handleEditBox(\n props.item.id,\n props.item.name,\n props.notContainsInput,\n \"\",\n \"\",\n containsTerms,\n notContainsTerms,\n conversionActionsEnabled,\n conversionActions,\n customConversions,\n conversionObjective,\n tiktokConversionObjective,\n containsPreviewModifier,\n e.target.value\n );\n }}\n className=\"primary \"\n size=\"sm\"\n as=\"select\"\n style={{ width: \"70px\" }}\n value={notContainsPreviewModifier}>\n \n \n \n \n
\n \n
\n\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n\n {props.platformType === \"Social\" ? (\n
\n \n \n
\n {/* Popup Modal */}\n Configure Campaign Groups
*/}\nName:
\n \nContains:
\n\n {\n setShowAlert1(false);\n }}\n onChange={(e) => {\n props.setContainsInput(e.target.value);\n }}\n id=\"contains_term\"\n />\n
\n {showAlert1 === true ? (\n \n The keyword \"{props.containsInput}\" already exists!\n
\n \n ) : (\n <>\nYou must include a term!
\n \n )}\n \n\n {\n let tempContainsTerms = containsTerms.map((el) => el.toLowerCase());\n let tempNotContainsTerms = notContainsTerms.map((el) => el.toLowerCase());\n let tempValue = props.containsInput.toLowerCase();\n clearFields(\"contains_term\");\n if (tempContainsTerms.includes(tempValue) || props.containsInput == \"\") setShowAlert1(true);\n else\n props.handleEditBox(\n props.item.id,\n props.item.name,\n props.containsInput,\n \"contains\",\n \"add\",\n tempContainsTerms,\n tempNotContainsTerms,\n conversionActionsEnabled,\n conversionActions,\n customConversions,\n conversionObjective,\n tiktokConversionObjective,\n containsPreviewModifier,\n notContainsPreviewModifier\n );\n\n {\n showAlert1 === true && props.setContainsInput(\"\");\n }\n }}>\n + Add term\n \n
\n \n {containsTerms[0] !== \"\" &&\n containsTerms.map((term, idx) => {\n return (\n
\n \n \n {term}\n {\n props.handleEditBox(\n props.item.id,\n props.item.name,\n term,\n \"contains\",\n \"remove\",\n containsTerms,\n notContainsTerms,\n conversionActionsEnabled,\n conversionActions,\n customConversions,\n conversionObjective,\n tiktokConversionObjective,\n containsPreviewModifier,\n notContainsPreviewModifier\n );\n setShowAlert1(false);\n }}>\n x\n \n
\n );\n })}\n Does not contain:
\n\n {\n setShowAlert2(false);\n }}\n onChange={(e) => props.setNotContainsInput(e.target.value)}\n />\n {showAlert2 === true ? (\n \n \n {\n setShowAlert2(false);\n props.setContainsInput(\"\");\n }}>\n x\n \n \n
\n \n ) : undefined}\n
\n You must include a term!
\n ) : (\n <>\n\n The keyword \"{props.notContainsInput}\" already exists!\n
\n \n )}\n \n\n {\n let tempContainsTerms = containsTerms.map((el) => el.toLowerCase());\n let tempNotContainsTerms = notContainsTerms.map((el) => el.toLowerCase());\n let tempValue = props.notContainsInput.toLowerCase();\n clearFields(\"does_not_contain_term\");\n if (tempNotContainsTerms.includes(tempValue) || props.notContainsInput == \"\") setShowAlert2(true);\n else\n props.handleEditBox(\n props.item.id,\n props.item.name,\n props.notContainsInput,\n \"notContains\",\n \"add\",\n tempContainsTerms,\n tempNotContainsTerms,\n conversionActionsEnabled,\n conversionActions,\n customConversions,\n conversionObjective,\n tiktokConversionObjective,\n containsPreviewModifier,\n notContainsPreviewModifier\n );\n\n clearFields(\"does_not_contain_term\");\n {\n showAlert2 === true && props.setNotContainsInput(\"\");\n }\n }}>\n + Add term\n \n
\n \n {notContainsTerms[0] !== \"\" &&\n notContainsTerms.map((term, idx) => {\n return (\n
\n \n \n {term}\n {\n props.handleEditBox(\n props.item.id,\n props.item.name,\n term,\n \"notContains\",\n \"remove\",\n containsTerms,\n notContainsTerms,\n conversionActionsEnabled,\n conversionActions,\n customConversions,\n conversionObjective,\n tiktokConversionObjective,\n containsPreviewModifier,\n notContainsPreviewModifier\n );\n setShowAlert2(false);\n }}>\n x\n \n
\n );\n })}\n \n \"Contains\" modifier:\n
\n \n\n \"Not contains\" modifier:\n
\n \nOutput preview:
\n \nContains:
\n \n\n \n {text}\n \n {index < containsTerms.length - 1 && (\n \n and\n \n )}\n
\n );\n })\n : containsTerms.map((text, index) => {\n return (\n \n \n {text}\n \n {index < containsTerms.length - 1 && (\n \n or\n \n )}\n
\n );\n })}\n \n \n Does not contain:\n
\n \n\n \n {text}\n \n {index < notContainsTerms.length - 1 && (\n \n and\n \n )}\n
\n );\n })\n : notContainsTerms.map((text, index) => {\n return (\n \n \n {text}\n \n {index < notContainsTerms.length - 1 && (\n \n or\n \n )}\n
\n );\n })}\n \n \n Test a campaign name:\n
\n\n setTestString(e.target.value)}\n placeholder={\"Add the name of a campaign here\"}\n value={testString}\n style={testString != \"\" ? (\n testStringMatches ? {\n background: \"rgba(0, 200, 0, .25)\"\n } : {\n background: \"rgba(200, 0, 0, .25)\"\n }\n ) : {}}\n />\n
\n \n \n {testString != \"\" && (\n testStringMatches ? (\n \n ) : (\n \n )\n )}\n
\n \n
\n \n Instructions:
\n\n First, configure your terms that you want to contain (or exclude) by typing the term in the top corresponding field and clicking \"Add term\".\n
\n\n Then, select your modifier for each column to determine how those groups of terms will affect tracking. Choosing 'and' will detect and track\n results in which every listed term is included. Choosing 'or' will detect and track{\" \"}\n any result with at least one of the listed terms.\n
\n\n Finally, read (and re-read) your output to ensure your \"sentence structure\" is correct. Remember, 'and' will only track results with{\" \"}\n all terms, while 'or' will track results with any term.\n
\n\n
\n setConversionObjective(e.target.value)}\n style={{\n width: \"256px\",\n paddingLeft: \"20px\",\n marginLeft: \"3px\",\n }}>\n {Object.keys(props.facebook_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.facebook_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n {conversionObjective == \"custom_conversions\" && (\n
\n Facebook Objective
\n\n setTiktokConversionObjective(e.target.value)}\n style={{ width: \"256px\", paddingLeft: \"20px\", marginLeft: \"3px\" }}>\n {Object.keys(props.tiktok_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.tiktok_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n
\n \n ) : (\n Tiktok Objective
\n\n Custom Conversions\n \n \n \n
\n }\n inline={true}\n />\n \n To get a Conversion Action ID, go to Google Ads and open the Tools & Settings menu from the top right of the navbar. In the Measurement column, select Conversions. Next, select the conversion action from the list that appears. Once you have selected a conversion action, check the final URL of the page and look for the 'ctId' parameter. This will be equal to the Conversion Action's ID.
\n\n {error}
;\n }\n )}\nThis feature is coming soon.
\n \n \n \n \n
\n );\n };\n\n return (\n <>\n \n {props.platforms === \"Facebook\" ? (\n <>\n \n \n \n \n ) : (\n <>\n {\n setSelectedPlatform(e.target.value);\n }}\n value={selectedPlatform}>\n {props.platforms.map((platform, index) => {\n return ;\n })}\n \n \n )}\n\n {\n uploadCsv(e);\n }}\n onClick={(e) => {\n e.target.value = null;\n }}\n />\n \n {[0, 1].map((tableIndex) => {\n return (\n
\n );\n })}\n
\n \n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport ConfigTabs from \"client_config/ConfigTabs\";\nimport LeftIndent from \"utils/LeftIndent\";\nimport { Tab, Nav, Container, Form, Row, Col } from \"react-bootstrap\";\nimport Search from \"./search/Search\";\nimport Social from \"./social/Social\";\nimport Display from \"./display/Display\";\nimport Video from \"./video/Video\";\nimport All from \"./all/All\";\nimport SaveChanges from \"client_config/SaveChanges\";\nimport updateParams from \"utils/updateParams.js\";\nimport jsDig from \"utils/jsDig\";\nimport dismissDataPullErrors from \"utils/dismissDataPullErrors\";\nimport { capitalize, uniq } from \"lodash-es\";\n\nexport default function PPCConfig(props) {\n const [tabLocation, setTabLocation] = useState(\"\");\n const formSubmitUrl = \"/datapulse/ppc-config\";\n const authenticityToken = document.querySelector('meta[name=\"csrf-token\"]').content;\n\n const ppcPulling =\n jsDig([\"data_pull_status\", \"shopify_data_pull\"], props.ppc_section) && jsDig([\"data_pull_status\", \"shopify_data_pull\"], props.ppc_section).length > 0;\n const searchPulling =\n (jsDig([\"data_pull_status\", \"google_data_pull\"], props.search_section) &&\n jsDig([\"data_pull_status\", \"google_data_pull\"], props.search_section).length > 0) ||\n (jsDig([\"data_pull_status\", \"bing_data_pull\"], props.search_section) && jsDig([\"data_pull_status\", \"bing_data_pull\"], props.search_section).length > 0);\n const socialPulling =\n jsDig([\"data_pull_status\", \"facebook_data_pull\"], props.social_section) &&\n jsDig([\"data_pull_status\", \"facebook_data_pull\"], props.social_section).length > 0;\n const displayPulling =\n jsDig([\"data_pull_status\", \"google_data_pull\"], props.display_section) && jsDig([\"data_pull_status\", \"google_data_pull\"], props.display_section).length > 0;\n const videoPulling =\n jsDig([\"data_pull_status\", \"google_data_pull\"], props.video_section) && jsDig([\"data_pull_status\", \"google_data_pull\"], props.video_section).length > 0;\n\n const ppcRecalculating =\n jsDig([\"data_pull_status\", \"recalculation\"], props.ppc_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], props.ppc_section).length > 0;\n const searchRecalculating =\n (jsDig([\"data_pull_status\", \"recalculation\"], props.search_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], props.search_section).length > 0);\n\n const socialRecalculating =\n jsDig([\"data_pull_status\", \"recalculation\"], props.social_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], props.social_section).length > 0;\n const displayRecalculating =\n jsDig([\"data_pull_status\", \"recalculation\"], props.display_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], props.display_section).length > 0;\n const videoRecalculating =\n jsDig([\"data_pull_status\", \"recalculation\"], props.video_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], props.video_section).length > 0;\n\n const [showPpcErrors, setShowPpcErrors] = useState((jsDig([\"data_pull_errors\"], props.ppc_section) && Object.keys(jsDig([\"data_pull_errors\"], props.ppc_section)).length > 0) ? true : false)\n const [showSearchErrors, setShowSearchErrors] = useState((jsDig([\"data_pull_errors\"], props.search_section) && Object.keys(jsDig([\"data_pull_errors\"], props.search_section)).length > 0) ? true : false)\n const [showSocialErrors, setShowSocialErrors] = useState((jsDig([\"data_pull_errors\"], props.social_section) && Object.keys(jsDig([\"data_pull_errors\"], props.social_section)).length > 0) ? true : false)\n const [showDisplayErrors, setShowDisplayErrors] = useState((jsDig([\"data_pull_errors\"], props.display_section) && Object.keys(jsDig([\"data_pull_errors\"], props.display_section)).length > 0) ? true : false)\n const [showVideoErrors, setShowVideoErrors] = useState((jsDig([\"data_pull_errors\"], props.video_section) && Object.keys(jsDig([\"data_pull_errors\"], props.video_section)).length > 0) ? true : false)\n\n\n useEffect(() => {\n let searchParams = new URL(location.href).searchParams;\n let page = searchParams.get(\"page\");\n if (!page || page == \"\") {\n page = \"search\";\n }\n setTabLocation(page);\n updateParams(\"page\", page);\n }, []);\n\n const selectTab = (key) => {\n setTabLocation(key);\n updateParams(\"page\", key);\n };\n\n\n const pullInProgress = () => {\n return (\n \n \n {ComingSoonTooltip()}\n {props.platforms !== \"Facebook\" && (\n \n )}\n
\n\n {props.platforms.map((platform, index) => {\n const visability = platform == selectedPlatform ? \"flex\" : \"none\";\n return (\n \n \n \n
\n
\n \n );\n })}\n | \n {yieldMetrics.map((metric, index) => {\n return (\n | \n {metric}\n | \n );\n })}\n
|---|---|
| \n | \n );\n })}\n
\n
\n );\n };\n\n const recalcInProgress = () => {\n return (\n \n
\n \n ![](\"https://marcopolo.me/static/images/loading.png\")
\n
\n \n \n A data pull is in progress.\n
\n \n {\n location.reload();\n }}>\n {\" \"}\n refresh \n \n the page.\n
\n This page is not available while the data pull is in progress.
\n Please check back later or\n\n
\n );\n };\n\n const displayErrors = (section) => {\n return (\n \n
\n \n \n
\n \n \n Data is being recalculated.\n
\n \n {\n location.reload();\n }}>\n {\" \"}\n refresh \n \n the page.\n
\n Your data pull has completed but data is recalculating
\n Please be patient {props.current_user ? props.current_user.first_name : \"my guy\"} and check back later or\n\n
\n )\n }\n\n return (\n <>\n \n
\n \n There were errors on the last data pull\n
\n \n {jsDig([section, \"data_pull_errors\"], props) && Object.keys(jsDig([section, \"data_pull_errors\"], props)).map((platform) => {\n const errorCounts = jsDig([section, \"data_pull_errors\", platform], props).reduce((map, val) => { map[val] = (map[val] || 0) + 1; return map }, {});\n return (\n \n \n )\n })}\n
\n \n
\n {capitalize(platform)}:
\n- \n {uniq(jsDig([section, \"data_pull_errors\", platform], props)).map((errorMessage, index) => {\n const length = errorCounts[errorMessage];\n return (\n
- - {length > 1 ? `(${length}x) ` : ' '}{errorMessage} \n )\n })}\n
\n {\n e.preventDefault()\n dismissDataPullErrors(jsDig([section, \"id\"], props), section.split(\"_\")[0])\n $(e.target).closest('.spin-container').fadeOut();\n setTimeout(() => {\n location.reload()\n }, 1000)\n }}>\n Dismiss\n \n
\n \n
\n \n ) : (script.name == \"youtube_channel_excluder\") ? (\n \n {props.onboarding ? (\n ${script.title}`}\n onChange={(e) => {\n let newScripts = props.client_account.scripts;\n newScripts[script.name] = newScripts[script.name] || {};\n newScripts[script.name][\"enabled\"] = e.target.checked ? \"1\" : \"0\";\n props.setScripts({ ...newScripts });\n props.setIsChecked({ ...newScripts });\n props.checkValidation();\n }}\n />\n ) : (\n ${script.title}`}\n static\n />\n )}\n
\n \n
\n \n {script.desc}\n
\n\n
\n Please add branded keywords - keywords should only match variations of the company name, no long-tail keywords:
\nAll keywords with more than 0 clicks in the past 30 days will be analyzed
\n\n
\n \n \n {Object.keys(excludeNbInShoppingKeywords).map((kwNum, i) => {\n return (\n
\n \n {kwNum}.\n {props.onboarding ? (\n {\n let newScripts = { ...props.client_account.scripts };\n newScripts[script.name] = newScripts[script.name] || {};\n newScripts[script.name][\"keyword\"] = newScripts[script.name][\"keyword\"] || {};\n newScripts[script.name][\"keyword\"][kwNum] = e.target.value;\n props.setScripts({ ...newScripts });\n }}\n />\n ) : (\n {\n let newKeywords = { ...excludeNbInShoppingKeywords };\n newKeywords[kwNum] = e.target.value;\n setExcludeNbInShoppingKeywords(newKeywords);\n }}\n />\n )}\n deleteKeyword(e, kwNum)}>\n \n \n
\n );\n })}\n \n
\n \n ) : (\n \n {props.onboarding ? (\n ${script.title}`}\n onChange={(e) => {\n let newScripts = props.client_account.scripts;\n newScripts[script.name] = newScripts[script.name] || {};\n newScripts[script.name][\"enabled\"] = e.target.checked ? \"1\" : \"0\";\n props.setScripts({ ...newScripts });\n props.setIsChecked({ ...newScripts });\n props.checkValidation();\n }}\n />\n ) : (\n ${script.title}`}\n static\n />\n )}\n
\n \n
\n {script.desc}
\n\n
\n Please create a copy of this google sheet before enabling this script.
\nEdit access must be granted to support@digitalposition.com
\n\n \n Google Sheet \n {props.onboarding ? (\n {\n let newScripts = { ...props.client_account.scripts };\n newScripts[script.name] = newScripts[script.name] || {};\n newScripts[script.name][\"google_sheet\"] = e.target.value;\n props.setScripts({ ...newScripts });\n props.setIsChecked({ ...newScripts });\n props.checkValidation();\n }}\n placeholder=\"https://docs.google.com/spreadsheets/...\"\n />\n ) : (\n handleScriptPropertyInput(e, \"google_sheet\", youtubeChannelExcluderData, setYoutubeChannelExcluderData)}\n placeholder=\"https://docs.google.com/spreadsheets/...\"\n />\n )}\n \n \n Allowed Countries \n {\n let newScripts = { ...props.client_account.scripts };\n newScripts[script.name] = newScripts[script.name] || {};\n newScripts[script.name][\"allowed_countries\"] = e.target.value;\n props.setScripts({ ...newScripts });\n props.setIsChecked({ ...newScripts });\n props.checkValidation();\n }}\n placeholder=\"^US$\"\n />\n ) : (\n handleScriptPropertyInput(e, \"allowed_countries\", youtubeChannelExcluderData, setYoutubeChannelExcluderData)}\n placeholder=\"^US$\"\n />\n )}\n \n \n Impressions Time Range \n {\n let newScripts = { ...props.client_account.scripts };\n newScripts[script.name] = newScripts[script.name] || {};\n newScripts[script.name][\"impressions_time_range\"] = e.target.value;\n console.log(newScripts)\n props.setScripts({ ...newScripts });\n props.setIsChecked({ ...newScripts });\n props.checkValidation();\n }}\n placeholder=\"LAST_7_DAYS\"\n as=\"select\"\n >\n \n \n \n \n \n ) : (\n handleScriptPropertyInput(e, \"impressions_time_range\", youtubeChannelExcluderData, setYoutubeChannelExcluderData)}\n placeholder=\"LAST_7_DAYS\"\n as=\"select\"\n >\n \n \n \n \n \n )}\n \n \n Impressions Threshold \n {\n let newScripts = { ...props.client_account.scripts };\n newScripts[script.name] = newScripts[script.name] || {};\n newScripts[script.name][\"impressions_threshold\"] = e.target.value;\n props.setScripts({ ...newScripts });\n props.setIsChecked({ ...newScripts });\n props.checkValidation();\n }}\n placeholder=\"Default: 10\"\n />\n ) : (\n handleScriptPropertyInput(e, \"impressions_threshold\", youtubeChannelExcluderData, setYoutubeChannelExcluderData)}\n placeholder=\"Default: 10\"\n />\n )}\n \n
\n Please supply a regex formula to specfify which countries you would like to whitelist. (E.g. ^US|UK|CA$)
\n {props.onboarding ? (\nSelect a predefined time range.
\n {props.onboarding ? (\nMinimum number of impressions to consider a channel for exclusion.
\n {props.onboarding ? (\n\n
\n \n )}\n \n {props.onboarding ? (\n ${script.title}`}\n onChange={(e) => {\n let newScripts = props.client_account.scripts;\n newScripts[script.name] = e.target.checked ? \"1\" : \"0\";\n props.setScripts({ ...newScripts });\n props.setIsChecked({ ...newScripts });\n props.checkValidation();\n }}\n />\n ) : (\n ${script.title}`}\n static\n />\n )}\n
\n \n
\n {script.desc}
\n\n {props.selectedPage == \"all_ppc\" && }\n selectTab(k)}>\n \n \n \n \n \n \n \n \n \n \n
\n \n );\n}\n","import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport DashboardBuilder from \"client_config/DashboardBuilder\";\n\nexport default function Dashboard(props) {\n let dashboards = [{ name: \"PPC: Overall\", id: 0, dashboardOrder: props.ppc_section.dashboard_order }];\n const campaignGroups = {\n search: props.search_section.campaign_groups,\n social: props.social_section.campaign_groups,\n display: props.display_section.campaign_groups,\n video: props.video_section.campaign_groups,\n };\n const performanceByChannel = {\n search: props.search_section.enabled,\n social: props.social_section.enabled,\n display: props.display_section.enabled,\n video: props.video_section.enabled,\n };\n if (props.onboarding && props.ppcDashboard) {\n dashboards = props.ppcDashboard;\n }\n const subServiceDashboards = {\n search: props.search_section.dashboard_order,\n social: props.social_section.dashboard_order,\n display: props.display_section.dashboard_order,\n video: props.video_section.dashboard_order,\n };\n return (\n <>\n \n
\n \n \n Dashboard modules:
\n\n
\n );\n })}\n \n \n \n
\n \n
\n \n \n {yearsArray.map((year, yearIndex) => {\n let visible = dashboard.id == selectedDashboardId && selectedYear == year;\n return (\n \n );\n })}\n \n
\n
\n \n );\n}\n","import React, { useState } from \"react\";\nimport { Row, Col } from \"react-bootstrap\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport ManualDataPull from \"client_config/ManualDataPull\";\nimport CurrencySelector from \"client_config/CurrencySelector\";\nimport jsDig from \"utils/jsDig.js\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport { Form } from \"react-bootstrap\";\n\nexport default function IdsData(props) {\n let platforms = [\n {\n name: \"shopify\",\n id: \"pull-shopify\",\n label: \"Pull Shopify data on save\",\n },\n ];\n\n const [platformEnabled, setPlatformEnabled] = useState(\n jsDig([\"platform_data\", \"shopify\", \"enabled\"], props.ppc_section) ? jsDig([\"platform_data\", \"shopify\", \"enabled\"], props.ppc_section) : false\n );\n\n const [baseCurrency, setBaseCurrency] = useState(props.ppc_section.base_currency)\n const [displayCurrency, setDisplayCurrency] = useState(props.ppc_section.display_currency)\n\n return (\n Goals:
\n \n\n
\n \n \n \n \n
\n
\n \n {/* Only show the pull metrics button if the selectedYear matches the current year */}\n { selectedYear == moment().year().toString() ? (\n <>\n { props.ppc_cc_data[selectedDashboardId].length > 0 ? (\n | For: | \n\n | \n
| Year: | \n\n | \n
\n handlePullMetric(selectedDashboardId)}>\n Pull metrics\n \n
\n ) : (\n \n You have the option to pull in historical data from the last year to help set this year's goals. Enter a percentage change to apply to the previous year's data:\n
\n\n (Negative numbers are also supported)\n
\n\n setGoalChangePercent(e.target.value)}\n >\n \n %\n
\n\n \n
\n\n Metrics to fill in:
\n {/* Let the user select which metric to apply the change to. Generate a checkbox for each metric */}\n {checkedMetrics[selectedDashboardId][selectedYear].map((metricName, index) => {\n const metric = metricList[metricName];\n return (\n\n
\n );\n })}\n \n setAllOrBlank(e.target.value)}>\n \n \n \n
\n\n Goals to replace:
\nNo historical data has been pulled so goals cannot be generated.
\n )}\n \n ) : <> }\n\n
\n \n Configure which metrics for the selected for/year fields that you would like to set goals for:
\n\n
\n \n \n {calculatorLarge}
\n What's this?
\n\n
\n \n When you see the blue calculator icon on a goal or column, it means that this metric can be auto-generated using pre-existing information. For\n example, ROAS can be auto-generated based on the existing Spend and Revenue goals. Hover over the icon to get information on which metrics it\n needs to calculate, and click to generate into that field.\n
\n\n
\n );\n })}\n \n \n
\n \n
\n \n
\n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Tab, Nav } from \"react-bootstrap\";\nimport IdsData from \"./ids_data/IdsData\";\nimport CampaignGroups from \"../CampaignGroups\";\nimport Goals from \"./goals/Goals\";\nimport Dashboard from \"./dashboard/Dashboard\";\nimport Scripts from \"./scripts/Scripts\";\nimport Alerts from \"./alerts/Alerts\";\nimport updateParams from \"utils/updateParams.js\";\nimport jsDig from \"utils/jsDig\"\n\nexport default function Display(props) {\n\tconst [tabLocation, setTabLocation] = useState(\"\");\n\n\tuseEffect(() => {\n\t\tlet searchParams = new URL(location.href).searchParams;\n\t\tlet page = searchParams.get(\"subpage\");\n\t\tif (!page || page == \"\") {\n\t\t\tpage = \"ids_data\";\n\t\t}\n\t\tsetTabLocation(page);\n\t\tupdateParams(\"subpage\", page);\n\t}, []);\n\n\tconst selectTab = (key) => {\n\t\tsetTabLocation(key);\n\t\tupdateParams(\"subpage\", key);\n\t};\n\n\n\t// const [shouldWeReloadDisplay, setShouldWeReloadDisplay ]= useState(props.search_section.data_pull_status.display_data_pull !== true)\n // useEffect(() => {\n // if (props.search_section.data_pull_status.display_data_pull === true) {\n // setTimeout(() => {setShouldWeReloadDisplay(shouldWeReloadDisplay)}, 3000)\n // }\n // }, [shouldWeReloadDisplay])\n\n\tconst campaignGroups = props.display_section.campaign_groups\n\tconst google_ads_id = [jsDig([\"google_ads\", \"account_ids\"], props.search_section.platform_data), jsDig([\"google_ads\", \"account_ids\"], props.display_section.platform_data), jsDig([\"google_ads\", \"account_ids\"], props.video_section.platform_data)].filter((id) => id != null)[0]\n\tconst show_scripts = google_ads_id && google_ads_id != \"\" && !props.search_section.enabled && props.display_section.enabled\n\n\treturn (\n\t\t<>\n\t\t\t\n \n Shopify Data\n
\n \n \n
\n \n {\n setPlatformEnabled(!platformEnabled);\n }}\n />\n
\n \n
\n Shopify URL
\n\n
\n Shopify revenue type
\nShopify Country Filter
\n\n \n {[\"none\", \"US\", \"CA\"].map((country) => {\n return (\n \n );\n })}\n \n
\n \n Base Currency
\nDisplay Currency
\n\n\t\t\t\t{props.selectedPage == \"display\" && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t selectTab(k)}\n\t\t\t\t>\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t{show_scripts &&\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t \n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n","import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport AlertsGroup from \"client_config/AlertsGroup\";\nimport ManageSubsByClient from \"alert_subscriptions/ManageSubsByClient\";\nimport OnboardingAlertsGroup from \"onboarding/AlertsGroup\";\n\nconst addUser = (email, sectionName, sectionId) => {\n let returnedData = \"\";\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/subscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId,\n },\n success: (data) => {\n returnedData = data;\n },\n });\n }\n return returnedData;\n};\n\nconst removeUser = (email, sectionName, sectionId) => {\n let removalSuccessful = false;\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/unsubscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId,\n },\n success: () => {\n removalSuccessful = true;\n },\n });\n }\n return removalSuccessful;\n};\n\nexport default function Alerts(props) {\n const platforms = [\n {\n platformName: \"Google Ads\",\n alerts: [\n {\n name: \"google_ads_display_impressions_emergency_detector\",\n title: \"Impressions emergency detector\",\n desc: \"Gets the number of Google Ads impressions on display campaigns for each account and if it falls beneath a certain threshold, emails all DP employees.\",\n },\n\n {\n name: \"google_ads_display_disapproved_ads_detector\",\n title: \"Disapproved ads detector\",\n desc: \"Creates an alert with a list of all disapproved display ads on Google Ads.\",\n },\n {\n name: \"google_ads_display_out_of_stock_detector\",\n title: \"Out of stock detector\",\n desc: \"Checks the landing pages of all display ads on accounts for specific 'out of stock' related language and creates a list of landing pages that match.\",\n },\n {\n name: \"google_ads_display_impressions_flux_detector\",\n title: \"Impressions flux detector\",\n desc: \"Creates an alert if Google Ads display impressions fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_display_clicks_flux_detector\",\n title: \"Clicks flux detector\",\n desc: \"Creates an alert if Google Ads display clicks fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_display_url_issue_detector\",\n title: \"URL issue detector\",\n desc: \"Goes through all Google Ads display ads in an account and makes an alert of pages that produce unacceptable response codes.\",\n },\n\n {\n name: \"google_ads_display_spend_flux_detector\",\n title: \"Spend flux detector\",\n desc: \"Creates an alert if Google Ads display spend fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n\n {\n name: \"google_ads_display_conversions_flux_detector\",\n title: \"Conversions flux detector\",\n desc: \"Creates an alert if Google Ads display conversions fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_display_conversion_rate_flux_detector\",\n title: \"Conversion Rate flux detector\",\n desc: \"Creates an alert if Google Ads display conversion rate fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n ],\n },\n ];\n\n return (\n <>\n \n
\n \n Alerts:
\n\n {platforms.map((platform) => {\n return props.onboarding ? (\n
\n \n Subscribed to these alerts:
\n\n
\n \n Dashboard modules:
\nSelect View:
\n\n {dashboards.findIndex((el) => el.name == selectedDashboard) !== 0 && (\n \n )}\n
\n\n \n
\n \n \n Keep in mind you will need to configure the 'Campaign Groups' tab above before they will appear in the 'Select View' dropdown above!\n \n Check the box to enable/disable, and click and drag the left handleto reorder your dashboard. Click 'Display configuration' to\n configure which metrics will show in each section.\n
\n\n {dashboards\n .map((el) => {\n if (!el.name.includes(\"Display: Overall\")) {\n let newDash = el;\n let result = newDash.dashboardOrder.filter((dash) => {\n return dash.name !== \"campaignGroups\";\n });\n el.dashboardOrder = result;\n }\n return el;\n })\n .map((dashboard, index) => {\n let visible = dashboard.name == selectedDashboard;\n return (\n
\n \n \n
\n );\n })}\n \n \n
\n \n
\n \n \n {yearsArray.map((year, yearIndex) => {\n let visible = dashboard.id == selectedDashboardId && selectedYear == year;\n return (\n \n );\n })}\n \n
\n
\n \n );\n}\n","import React, { useState } from \"react\";\nimport { Row, Col } from \"react-bootstrap\";\nimport AccountIdBox from \"../../AccountIdBox\";\nimport ConversionActionIds from \"../../ConversionActionIds\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport ManualDataPull from \"client_config/ManualDataPull\";\nimport Inflation from \"client_config/ppc_config/Inflation\";\nimport CurrencySelector from \"client_config/CurrencySelector\";\nimport jsDig from \"utils/jsDig.js\"\n\nexport default function IdsData(props) {\n\tlet thumbnail = require(\"images/ShowMeHow.jpg\");\n thumbnail = Goals:
\n \n\n
\n \n \n \n \n
\n
\n {/* Only show the pull metrics button if the selectedYear matches the current year */}\n { selectedYear == moment().year().toString() ? (\n <>\n { props.display_cc_data[selectedDashboardId].length > 0 ? (\n | For: | \n\n | \n
| Year: | \n\n | \n
\n handlePullMetric(selectedDashboardId)}>\n Pull metrics\n \n
\n ) : (\n \n You have the option to pull in historical data from the last year to help set this year's goals. Enter a percentage change to apply to the previous year's data:\n
\n\n (Negative numbers are also supported)\n
\n\n setGoalChangePercent(e.target.value)}\n >\n \n %\n
\n\n \n
\n\n Metrics to fill in:
\n {/* Let the user select which metric to apply the change to. Generate a checkbox for each metric */}\n {checkedMetrics[selectedDashboardId][selectedYear].map((metricName, index) => {\n const metric = metricList[metricName];\n return (\n\n
\n );\n })}\n \n setAllOrBlank(e.target.value)}>\n \n \n \n
\n\n Goals to replace:
\nNo historical data has been pulled so goals cannot be generated.
\n )}\n \n ) : <> }\n\n
\n \n Configure which metrics for the selected for/year fields that you would like to set goals for:
\n\n
\n \n \n {calculatorLarge}
\n What's this?
\n\n
\n \n When you see the blue calculator icon on a goal or column, it means that this metric can be auto-generated using pre-existing information. For\n example, ROAS can be auto-generated based on the existing Spend and Revenue goals. Hover over the icon to get information on which metrics it\n needs to calculate, and click to generate into that field.\n
\n\n
\n );\n })}\n \n\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tAccount IDs\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tInclude/Exclude Conversion Action IDs\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tinline={true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\n\t\t\t\t\t\tTo get a Conversion Action ID, go to Google Ads and open the Tools & Settings menu from the top right of the navbar. In the Measurement column, select Conversions. Next, select the conversion action from the list that appears. Once you have selected a conversion action, check the final URL of the page and look for the 'ctId' parameter. This will be equal to the Conversion Action's ID.
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tInflation (Past 30 Days)\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t{thumbnail}} />\n\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\tBase Currency
\nDisplay Currency
\n\n
\n \n Scripts:
\n{exclaimTriangle}
\n \n Enabling/disabling these scripts without a thorough understanding of the function may have unintended consequences. Please proceed with caution.\n
\n\n\t\t\t\t{props.selectedPage == \"search\" && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t selectTab(k)}\n\t\t\t\t>\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t{show_scripts &&\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t \n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Tab, Nav, Container, Row, Col, Button, Form } from \"react-bootstrap\";\nimport AlertsGroup from \"client_config/AlertsGroup\";\nimport ManageSubsByClient from \"alert_subscriptions/ManageSubsByClient\";\nimport OnboardingAlertsGroup from \"onboarding/AlertsGroup\";\nconst addUser = (email, sectionName, sectionId) => {\n let returnedData = \"\";\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/subscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId,\n },\n success: (data) => {\n returnedData = data;\n },\n });\n }\n return returnedData;\n};\n\nconst removeUser = (email, sectionName, sectionId) => {\n let removalSuccessful = false;\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/unsubscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId,\n },\n success: () => {\n removalSuccessful = true;\n },\n });\n }\n return removalSuccessful;\n};\n\nexport default function Alerts(props) {\n const platforms = [\n {\n platformName: \"Google Ads\",\n alerts: [\n {\n name: \"google_ads_search_impressions_emergency_detector\",\n title: \"Impressions emergency detector\",\n desc: \"Gets the number of Google Ads impressions on search & shopping campaigns for each account and if it falls beneath a certain threshold, emails all DP employees.\",\n },\n\n {\n name: \"google_ads_search_disapproved_ads_detector\",\n title: \"Disapproved ads detector\",\n desc: \"Creates an alert with a list of all disapproved search ads on Google Ads.\",\n },\n {\n name: \"google_ads_search_out_of_stock_detector\",\n title: \"Out of stock detector\",\n desc: \"Checks the landing pages of all search ads on accounts for specific 'out of stock' related language and creates a list of landing pages that match.\",\n },\n {\n name: \"google_ads_search_impressions_flux_detector\",\n title: \"Impressions flux detector\",\n desc: \"Creates an alert if Google Ads search impressions fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_search_clicks_flux_detector\",\n title: \"Clicks flux detector\",\n desc: \"Creates an alert if Google Ads search clicks fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_search_keyword_bleeder_detector\",\n title: \"Keyword bleeder detector\",\n desc: \"Emails the PPC team if a Google Ads keyword has spent over $350 with no conversions in the past 14 days.\",\n options: [\n {\n name: \"threshold\",\n title: \"Spend threshold:\",\n placeholder: \"Default $350\",\n },\n ],\n },\n {\n name: \"google_ads_search_url_issue_detector\",\n title: \"URL issue detector\",\n desc: \"Goes through all Google Ads search ads in an account and makes an alert of pages that produce unacceptable response codes.\",\n },\n\n {\n name: \"google_ads_search_spend_flux_detector\",\n title: \"Spend flux detector\",\n desc: \"Creates an alert if Google Ads search spend fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n\n {\n name: \"google_ads_search_conversions_flux_detector\",\n title: \"Conversions flux detector\",\n desc: \"Creates an alert if Google Ads search conversions fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_search_conversion_rate_flux_detector\",\n title: \"Conversion Rate flux detector\",\n desc: \"Creates an alert if Google Ads search conversion rate fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_search_new_invite_detector\",\n title: \"New Invite Detector\",\n desc: \"Creates an alert & sends an email if a new user has been invited to a Google Ads account.\",\n },\n ],\n },\n {\n platformName: \"Google Shopping\",\n alerts: [\n {\n name: \"google_ads_shopping_campaign_fluctuation_detector\",\n title: \"Shopping campaign fluctuation detector\",\n desc: \"Checks all clicks from all Shopping campaigns on an account and if they fall or rise more than 40%, it will be highlighted in an alert.\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 60%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 140%\",\n },\n ],\n },\n {\n name: \"google_ads_shopping_product_fluctuation_detector\",\n title: \"Shopping product fluctuation detector\",\n desc: \"Checks all products on an account and highlights those which got no clicks despite historically getting clicks in an alert.\",\n },\n ],\n },\n {\n platformName: \"Microsoft Ads\",\n alerts: [\n {\n name: \"bing_ads_search_impressions_emergency_detector\",\n title: \"Impressions emergency detector\",\n desc: \"Gets the number of Bing Ads impressions on search & shopping campaigns for each account and if it falls beneath a certain threshold, emails all DP employees.\",\n },\n {\n name: \"bing_ads_search_disapproved_ads_detector\",\n title: \"Disapproved ads detector\",\n desc: \"Creates an alert with a list of all disapproved search ads on Bing Ads.\",\n },\n {\n name: \"bing_ads_search_impressions_flux_detector\",\n title: \"Impressions flux detector\",\n desc: \"Creates an alert if Bing Ads search impressions fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"bing_ads_search_clicks_flux_detector\",\n title: \"Clicks flux detector\",\n desc: \"Creates an alert if Bing Ads search clicks fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"bing_ads_search_keyword_bleeder_detector\",\n title: \"Keyword bleeder detector\",\n desc: \"Emails the PPC team if a Bing Ads keyword has spent over $350 with no conversions in the past 14 days.\",\n options: [\n {\n name: \"threshold\",\n title: \"Spend threshold:\",\n placeholder: \"Default $350\",\n },\n ],\n },\n {\n name: \"bing_ads_search_spend_flux_detector\",\n title: \"Spend flux detector\",\n desc: \"Creates an alert if Bing Ads search spend fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"bing_ads_search_conversions_flux_detector\",\n title: \"Conversions flux detector\",\n desc: \"Creates an alert if Bing Ads search conversions fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"bing_ads_search_conversion_rate_flux_detector\",\n title: \"Conversion Rate flux detector\",\n desc: \"Creates an alert if Bing Ads search conversion rate fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n ],\n },\n ];\n\n return (\n <>\n \n
\n \n Alerts:
\n\n {platforms.map((platform) => {\n return props.onboarding ? (\n
\n \n Subscribed to these alerts:
\n\n
\n \n \n Dashboard modules:
\nSelect View:
\n\n {dashboards.findIndex((el) => el.name == selectedDashboard) !== 0 && (\n \n )}\n
\n \n
\n \n \n Keep in mind you will need to configure the 'Campaign Groups' tab above before they will appear in the 'Select View' dropdown above!\n \n Check the box to enable/disable, and click and drag the left handleto reorder your dashboard. Click 'Display configuration' to\n configure which metrics will show in each section.\n
\n\n {dashboards\n .map((el) => {\n if (!el.name.includes(\"Search: Overall\")) {\n let newDash = el;\n let result = newDash.dashboardOrder.filter((dash) => {\n return dash.name !== \"campaignGroups\";\n });\n el.dashboardOrder = result;\n }\n return el;\n })\n .map((dashboard, index) => {\n let visible = dashboard.name == selectedDashboard;\n return (\n
\n \n \n
\n );\n })}\n \n \n
\n \n
\n \n \n {yearsArray.map((year, yearIndex) => {\n let visible = dashboard.id == selectedDashboardId && selectedYear == year;\n return (\n \n );\n })}\n \n
\n
\n \n );\n}\n","import React, {useState} from \"react\";\nimport { Row, Col } from \"react-bootstrap\";\nimport AccountIdBox from \"../../AccountIdBox\";\nimport ConversionActionIds from \"../../ConversionActionIds\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport ManualDataPull from \"client_config/ManualDataPull\";\nimport Inflation from \"client_config/ppc_config/Inflation\";\nimport CurrencySelector from \"client_config/CurrencySelector\";\nimport jsDig from \"utils/jsDig.js\"\n\nexport default function IdsData(props) {\n let thumbnail = require(\"images/ShowMeHow.jpg\");\n thumbnail = Goals:
\n \n\n
\n \n \n \n \n
\n
\n \n {/* Only show the pull metrics button if the selectedYear matches the current year */}\n { selectedYear == moment().year().toString() ? (\n <>\n { props.search_cc_data[selectedDashboardId].length > 0 ? (\n | For: | \n\n | \n
| Year: | \n\n | \n
\n handlePullMetric(selectedDashboardId)}>\n Pull metrics\n \n
\n ) : (\n \n You have the option to pull in historical data from the last year to help set this year's goals. Enter a percentage change to apply to the previous year's data:\n
\n\n (Negative numbers are also supported)\n
\n\n setGoalChangePercent(e.target.value)}\n >\n \n %\n
\n\n \n
\n\n Metrics to fill in:
\n {/* Let the user select which metric to apply the change to. Generate a checkbox for each metric */}\n {checkedMetrics[selectedDashboardId][selectedYear].map((metricName, index) => {\n const metric = metricList[metricName];\n return (\n\n
\n );\n })}\n \n setAllOrBlank(e.target.value)}>\n \n \n \n
\n\n Goals to replace:
\nNo historical data has been pulled so goals cannot be generated.
\n )}\n \n ) : <> }\n\n
\n \n Configure which metrics for the selected for/year fields that you would like to set goals for:
\n\n
\n \n \n {calculatorLarge}
\n What's this?
\n\n
\n \n When you see the blue calculator icon on a goal or column, it means that this metric can be auto-generated using pre-existing information. For\n example, ROAS can be auto-generated based on the existing Spend and Revenue goals. Hover over the icon to get information on which metrics it\n needs to calculate, and click to generate into that field.\n
\n\n
\n );\n })}\n \n \n
\n \n \n \n Account IDs\n
\n \n
\n \n
\n \n \n Include/Exclude Conversion Action IDs\n \n \n
\n }\n inline={true}\n />\n \n To get a Conversion Action ID, go to Google Ads and open the Tools & Settings menu from the top right of the navbar. In the Measurement column, select Conversions. Next, select the conversion action from the list that appears. Once you have selected a conversion action, check the final URL of the page and look for the 'ctId' parameter. This will be equal to the Conversion Action's ID.
\n\n \n
\n \n \n Inflation (Past 30 Days)\n \n\t\t\t\t\t\t\n\t\t\t\t\t\t{thumbnail}} />\n\t\t\t\t\t\t \n
\n \n \n
\n Base Currency
\nDisplay Currency
\n\n
\n \n Scripts:
\n{exclaimTriangle}
\n \n Enabling/disabling these scripts without a thorough understanding of the function may have unintended consequences. Please proceed with caution.\n
\n\n\t\t\t\t{props.selectedPage == \"social\" && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t selectTab(k)}\n\t\t\t\t>\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tIDs and Data \n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\tCampaign Groups \n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\tGoals \n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\tDashboard \n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\tAlerts \n\t\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t \n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport AlertsGroup from \"client_config/AlertsGroup\";\nimport ManageSubsByClient from \"alert_subscriptions/ManageSubsByClient\";\nimport OnboardingAlertsGroup from \"onboarding/AlertsGroup\";\n\nconst addUser = (email, sectionName, sectionId) => {\n let returnedData = \"\";\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/subscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId,\n },\n success: (data) => {\n returnedData = data;\n },\n });\n }\n return returnedData;\n};\n\nconst removeUser = (email, sectionName, sectionId) => {\n let removalSuccessful = false;\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/unsubscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId,\n },\n success: () => {\n removalSuccessful = true;\n },\n });\n }\n return removalSuccessful;\n};\n\nexport default function Alerts(props) {\n const platforms = [\n {\n platformName: \"Facebook Ads\",\n alerts: [\n {\n name: \"facebook_ads_social_impressions_emergency_detector\",\n title: \"Impressions Emergency Detector\",\n desc: \"Gets the number of Facebook Ads impressions for each account and if it falls beneath a certain threshold, emails all DP employees.\",\n },\n {\n name: \"facebook_ads_social_impressions_flux_detector\",\n title: \"Impressions Flux Detector\",\n desc: \"Creates an alert if Facebook Ads social impressions fall below or rise above a custom threshold\",\n options: [\n { name: \"min_threshold\", title: \"Min Threshold\", placeholder: \"Default 15%\" },\n { name: \"max_threshold\", title: \"Max Threshold\", placeholder: \"Default 300%\" },\n ],\n },\n {\n name: \"facebook_ads_social_spend_flux_detector\",\n title: \"Spend Flux Detector\",\n desc: \"Creates an alert if Facebook Ads social spend fall below or rise above a custom threshold\",\n options: [\n { name: \"min_threshold\", title: \"Min Threshold\", placeholder: \"Default 15%\" },\n { name: \"max_threshold\", title: \"Max Threshold\", placeholder: \"Default 300%\" },\n ],\n },\n {\n name: \"facebook_ads_social_clicks_flux_detector\",\n title: \"Clicks Flux Detector\",\n desc: \"Creates an alert if Facebook Ads social clicks fall below or rise above a custom threshold\",\n options: [\n { name: \"min_threshold\", title: \"Min Threshold\", placeholder: \"Default 15%\" },\n { name: \"max_threshold\", title: \"Max Threshold\", placeholder: \"Default 300%\" },\n ],\n },\n {\n name: \"facebook_ads_social_conversions_flux_detector\",\n title: \"Conversions Flux Detector\",\n desc: \"Creates an alert if Facebook Ads social conversions fall below or rise above a custom threshold\",\n options: [\n { name: \"min_threshold\", title: \"Min Threshold\", placeholder: \"Default 15%\" },\n { name: \"max_threshold\", title: \"Max Threshold\", placeholder: \"Default 300%\" },\n ],\n },\n {\n name: \"facebook_ads_social_conversion_rate_flux_detector\",\n title: \"Conversion Rate Flux Detector\",\n desc: \"Creates an alert if Facebook Ads social conversion rate fall below or rise above a custom threshold\",\n options: [\n { name: \"min_threshold\", title: \"Min Threshold\", placeholder: \"Default 15%\" },\n { name: \"max_threshold\", title: \"Max Threshold\", placeholder: \"Default 300%\" },\n ],\n },\n ],\n },\n ];\n\n return (\n <>\n \n
\n \n Alerts:
\n\n {platforms.map((platform) => {\n return props.onboarding ? (\n
\n \n Subscribed to these alerts:
\n\n
\n \n \n Dashboard modules:
\nSelect View:
\n\n {dashboards.findIndex((el) => el.name == selectedDashboard) !== 0 && (\n \n )}\n
\n \n
\n \n \n Keep in mind you will need to configure the 'Campaign Groups' tab above before they will appear in the 'Select View' dropdown above!\n \n Check the box to enable/disable, and click and drag the left handleto reorder your dashboard. Click 'Display configuration' to\n configure which metrics will show in each section.\n
\n\n {dashboards\n .map((el) => {\n if (!el.name.includes(\"Social: Overall\")) {\n let newDash = el;\n let result = newDash.dashboardOrder.filter((dash) => {\n return dash.name !== \"campaignGroups\";\n });\n el.dashboardOrder = result;\n }\n return el;\n })\n .map((dashboard, index) => {\n let visible = dashboard.name == selectedDashboard;\n return (\n
\n \n \n
\n );\n })}\n \n \n
\n \n
\n \n \n {yearsArray.map((year, yearIndex) => {\n let visible = dashboard.id == selectedDashboardId && selectedYear == year;\n return (\n \n );\n })}\n \n
\n
\n \n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Table, Row, Col, Button, Form } from \"react-bootstrap\";\n\nexport default function CustomConversions(props) {\n const [customConversions, setCustomConversions] = useState(props.customConversions && props.customConversions.length > 0 ? props.customConversions : [{label: \"\", id: \"\"}]);\n const handleChange = (index, property, value) => {\n let newConversions = customConversions;\n newConversions[index][property] = value;\n setCustomConversions([...newConversions])\n props.setCustomConversions && props.setCustomConversions([...newConversions])\n }\n\n const handleDelete = (targetIndex) => {\n let newConversions = customConversions\n newConversions.splice(targetIndex, 1);\n setCustomConversions([...newConversions])\n props.setCustomConversions && props.setCustomConversions([...newConversions])\n }\n\n const handleAdd = () => {\n setCustomConversions([...customConversions, {label: \"\", id: \"\"}])\n props.setCustomConversions && props.setCustomConversions([...customConversions, {label: \"\", id: \"\"}])\n }\n\n return (\n <>\n Goals:
\n \n\n
\n \n \n \n \n
\n
\n \n {/* Only show the pull metrics button if the selectedYear matches the current year */}\n { selectedYear == moment().year().toString() ? (\n <>\n { props.social_cc_data[selectedDashboardId].length > 0 ? (\n | For: | \n\n | \n
| Year: | \n\n | \n
\n handlePullMetric(selectedDashboardId)}>\n Pull metrics\n \n
\n ) : (\n \n You have the option to pull in historical data from the last year to help set this year's goals. Enter a percentage change to apply to the previous year's data:\n
\n\n (Negative numbers are also supported)\n
\n\n setGoalChangePercent(e.target.value)}\n >\n \n %\n
\n\n \n
\n\n Metrics to fill in:
\n {/* Let the user select which metric to apply the change to. Generate a checkbox for each metric */}\n {checkedMetrics[selectedDashboardId][selectedYear].map((metricName, index) => {\n const metric = metricList[metricName];\n return (\n\n
\n );\n })}\n \n setAllOrBlank(e.target.value)}>\n \n \n \n
\n\n Goals to replace:
\nNo historical data has been pulled so goals cannot be generated.
\n )}\n \n ) : <> }\n\n
\n \n Configure which metrics for the selected for/year fields that you would like to set goals for:
\n\n
\n \n \n {calculatorLarge}
\n What's this?
\n\n
\n \n When you see the blue calculator icon on a goal or column, it means that this metric can be auto-generated using pre-existing information. For\n example, ROAS can be auto-generated based on the existing Spend and Revenue goals. Hover over the icon to get information on which metrics it\n needs to calculate, and click to generate into that field.\n
\n\n
\n );\n })}\n | Label | \nID | \n\n\n |
| \n | \n \n | \n \n {(index >= 0 && customConversions.length > 1) && (\n handleDelete(index)}>\n )}\n | \n
\n \n
\n \n
\n \n
\n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Tab, Nav } from \"react-bootstrap\";\nimport IdsData from \"./ids_data/IdsData\";\nimport CampaignGroups from \"../CampaignGroups\";\nimport Goals from \"./goals/Goals\";\nimport Dashboard from \"./dashboard/Dashboard\";\nimport Scripts from \"./scripts/Scripts\";\nimport Alerts from \"./alerts/Alerts\";\nimport updateParams from \"utils/updateParams.js\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function Video(props) {\n\tconst [tabLocation, setTabLocation] = useState(\"\");\n\n\tuseEffect(() => {\n\t\tlet searchParams = new URL(location.href).searchParams;\n\t\tlet page = searchParams.get(\"subpage\");\n\t\tif (!page || page == \"\") {\n\t\t\tpage = \"ids_data\";\n\t\t}\n\t\tsetTabLocation(page);\n\t\tupdateParams(\"subpage\", page);\n\t}, []);\n\n\tconst selectTab = (key) => {\n\t\tsetTabLocation(key);\n\t\tupdateParams(\"subpage\", key);\n\t};\n\n\tconst campaignGroups = props.video_section.campaign_groups\n\tconst google_ads_id = [jsDig([\"google_ads\", \"account_ids\"], props.search_section.platform_data), jsDig([\"google_ads\", \"account_ids\"], props.display_section.platform_data), jsDig([\"google_ads\", \"account_ids\"], props.video_section.platform_data)].filter((id) => id != null)[0]\n\tconst show_scripts = google_ads_id && google_ads_id != \"\" && !props.search_section.enabled && !props.display_section.enabled && props.video_section.enabled\n\n\treturn (\n\t\t<>\n\t\t\t\n
\n \n \n
\n Account IDs
\n\n
\n \n
\n \n \n \n Filter account data{\" \"}\n
\n \n \n
\n \n \n setConversionObjective(e.target.value)}\n style={{ width: \"256px\", paddingLeft: \"20px\", marginLeft: \"3px\" }}>\n {Object.keys(props.facebook_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.facebook_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n {conversionObjective == \"custom_conversions\" &&
\n \n Facebook Objective
\n\n setTiktokConversionObjective(e.target.value)}\n style={{ width: \"256px\", paddingLeft: \"20px\", marginLeft: \"3px\" }}>\n {Object.keys(props.tiktok_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.tiktok_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n
\n Tiktok Objective
\nBase Currency
\nDisplay Currency
\n\n\t\t\t\t{props.selectedPage == \"video\" && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t selectTab(k)}\n\t\t\t\t>\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t{show_scripts &&\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t \n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n","import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport AlertsGroup from \"client_config/AlertsGroup\";\nimport ManageSubsByClient from \"alert_subscriptions/ManageSubsByClient\";\nimport OnboardingAlertsGroup from \"onboarding/AlertsGroup\";\n\nconst addUser = (email, sectionName, sectionId) => {\n let returnedData = \"\";\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/subscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId,\n },\n success: (data) => {\n returnedData = data;\n },\n });\n }\n return returnedData;\n};\n\nconst removeUser = (email, sectionName, sectionId) => {\n let removalSuccessful = false;\n if (email && email != \"\" && sectionId && sectionId != \"\") {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/alerts/unsubscribe-user/\",\n async: false,\n data: {\n email: email,\n section_name: sectionName,\n section_id: sectionId,\n },\n success: () => {\n removalSuccessful = true;\n },\n });\n }\n return removalSuccessful;\n};\n\nexport default function Alerts(props) {\n const platforms = [\n {\n platformName: \"Google Ads\",\n alerts: [\n {\n name: \"google_ads_video_impressions_emergency_detector\",\n title: \"Impressions emergency detector\",\n desc: \"Gets the number of Google Ads impressions on video campaigns for each account and if it falls beneath a certain threshold, emails all DP employees.\",\n },\n\n {\n name: \"google_ads_video_disapproved_ads_detector\",\n title: \"Disapproved ads detector\",\n desc: \"Creates an alert with a list of all disapproved video ads on Google Ads.\",\n },\n {\n name: \"google_ads_video_out_of_stock_detector\",\n title: \"Out of stock detector\",\n desc: \"Checks the landing pages of all video ads on accounts for specific 'out of stock' related language and creates a list of landing pages that match.\",\n },\n {\n name: \"google_ads_video_impressions_flux_detector\",\n title: \"Impressions flux detector\",\n desc: \"Creates an alert if Google Ads video impressions fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_video_clicks_flux_detector\",\n title: \"Clicks flux detector\",\n desc: \"Creates an alert if Google Ads video clicks fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_video_url_issue_detector\",\n title: \"URL issue detector\",\n desc: \"Goes through all Google Ads video ads in an account and makes an alert of pages that produce unacceptable response codes.\",\n },\n\n {\n name: \"google_ads_video_spend_flux_detector\",\n title: \"Spend flux detector\",\n desc: \"Creates an alert if Google Ads video spend fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n\n {\n name: \"google_ads_video_conversions_flux_detector\",\n title: \"Conversions flux detector\",\n desc: \"Creates an alert if Google Ads video conversions fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n {\n name: \"google_ads_video_conversion_rate_flux_detector\",\n title: \"Conversion Rate flux detector\",\n desc: \"Creates an alert if Google Ads video conversion rate fall below or rise above a custom threshold\",\n options: [\n {\n name: \"min_threshold\",\n title: \"Min threshold:\",\n placeholder: \"Default 15%\",\n },\n {\n name: \"max_threshold\",\n title: \"Max threshold:\",\n placeholder: \"Default 300%\",\n },\n ],\n },\n ],\n },\n ];\n\n return (\n <>\n \n
\n \n Alerts:
\n\n {platforms.map((platform) => {\n return props.onboarding ? (\n
\n \n Subscribed to these alerts:
\n\n
\n \n \n Dashboard modules:
\nSelect View:
\n\n {dashboards.findIndex((el) => el.name == selectedDashboard) !== 0 && (\n \n )}\n
\n \n
\n \n \n Keep in mind you will need to configure the 'Campaign Groups' tab above before they will appear in the 'Select View' dropdown above!\n \n Check the box to enable/disable, and click and drag the left handleto reorder your dashboard. Click 'Display configuration' to\n configure which metrics will show in each section.\n
\n\n {dashboards\n .map((el) => {\n if (!el.name.includes(\"Video: Overall\")) {\n let newDash = el;\n let result = newDash.dashboardOrder.filter((dash) => {\n return dash.name !== \"campaignGroups\";\n });\n el.dashboardOrder = result;\n }\n return el;\n })\n .map((dashboard, index) => {\n let visible = dashboard.name == selectedDashboard;\n return (\n
\n \n \n
\n );\n })}\n \n \n
\n \n
\n \n \n {yearsArray.map((year, yearIndex) => {\n let visible = dashboard.id == selectedDashboardId && selectedYear == year;\n return (\n \n );\n })}\n \n
\n
\n \n );\n}\n","import React, { useState } from \"react\";\nimport { Row, Col } from \"react-bootstrap\";\nimport AccountIdBox from \"../../AccountIdBox\";\nimport ConversionActionIds from \"../../ConversionActionIds\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport ManualDataPull from \"client_config/ManualDataPull\";\nimport CurrencySelector from \"client_config/CurrencySelector\";\nimport Inflation from \"client_config/ppc_config/Inflation\";\nimport jsDig from \"utils/jsDig.js\"\n\nexport default function IdsData(props) {\n\tlet thumbnail = require(\"images/ShowMeHow.jpg\");\n thumbnail = Goals:
\n \n\n
\n \n \n \n \n
\n
\n \n {/* Only show the pull metrics button if the selectedYear matches the current year */}\n { selectedYear == moment().year().toString() ? (\n <>\n { props.video_cc_data[selectedDashboardId].length > 0 ? (\n | For: | \n\n | \n
| Year: | \n\n | \n
\n handlePullMetric(selectedDashboardId)}>\n Pull metrics\n \n
\n ) : (\n \n You have the option to pull in historical data from the last year to help set this year's goals. Enter a percentage change to apply to the previous year's data:\n
\n\n (Negative numbers are also supported)\n
\n\n setGoalChangePercent(e.target.value)}\n >\n \n %\n
\n\n \n
\n\n Metrics to fill in:
\n {/* Let the user select which metric to apply the change to. Generate a checkbox for each metric */}\n {checkedMetrics[selectedDashboardId][selectedYear].map((metricName, index) => {\n const metric = metricList[metricName];\n return (\n\n
\n );\n })}\n \n setAllOrBlank(e.target.value)}>\n \n \n \n
\n\n Goals to replace:
\nNo historical data has been pulled so goals cannot be generated.
\n )}\n \n ) : <> }\n\n
\n \n Configure which metrics for the selected for/year fields that you would like to set goals for:
\n\n
\n \n \n {calculatorLarge}
\n What's this?
\n\n
\n \n When you see the blue calculator icon on a goal or column, it means that this metric can be auto-generated using pre-existing information. For\n example, ROAS can be auto-generated based on the existing Spend and Revenue goals. Hover over the icon to get information on which metrics it\n needs to calculate, and click to generate into that field.\n
\n\n
\n );\n })}\n \n\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tAccount IDs\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tInclude/Exclude Conversion Action IDs\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tinline={true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\n\t\t\t\t\t\tTo get a Conversion Action ID, go to Google Ads and open the Tools & Settings menu from the top right of the navbar. In the Measurement column, select Conversions. Next, select the conversion action from the list that appears. Once you have selected a conversion action, check the final URL of the page and look for the 'ctId' parameter. This will be equal to the Conversion Action's ID.
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tInflation (Past 30 Days)\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t{thumbnail}} />\n\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\tBase Currency
\nDisplay Currency
\n\n
\n \n Scripts:
\n{exclaimTriangle}
\n \n Enabling/disabling these scripts without a thorough understanding of the function may have unintended consequences. Please proceed with caution.\n
\n\n
\n );\n };\n\n const recalcInProgress = () => {\n return (\n \n
\n \n \n
\n \n \n A data pull is in progress.\n
\n \n {\n location.reload();\n }}>\n {\" \"}\n refresh \n \n the page.\n
\n This page is not available while the data pull is in progress.
\n Please check back later or\n\n
\n );\n };\n\n const displayErrors = () => {\n return (\n \n
\n \n \n
\n \n \n Data is being recalculated.\n
\n \n {\n location.reload();\n }}>\n {\" \"}\n refresh \n \n the page.\n
\n Your data pull has completed but data is recalculating
\n Please be patient {props.current_user ? props.current_user.first_name : \"my guy\"} and check back later or\n\n
\n )\n }\n\n return (\n <>\n \n
\n \n There were errors on the last data pull\n
\n \n {props.seo_section.data_pull_errors && Object.keys(props.seo_section.data_pull_errors).map((platform) => {\n const errorCounts = props.seo_section.data_pull_errors[platform].reduce((map, val) => {map[val] = (map[val] || 0)+1; return map}, {} );\n return (\n \n \n )\n })}\n
\n \n
\n {capitalize(platform)}:
\n- \n {uniq(props.seo_section.data_pull_errors[platform]).map((errorMessage, index) => {\n const length = errorCounts[errorMessage];\n return (\n
- - {length > 1 ? `(${length}x) ` : ' '}{errorMessage} \n )\n })}\n
\n {\n e.preventDefault()\n dismissDataPullErrors(jsDig([\"id\"], props.seo_section), \"seo\")\n $(e.target).closest('.spin-container').fadeOut();\n setTimeout(() => {\n location.reload()\n }, 1000)\n }}>\n Dismiss\n \n
\n \n
\n \n Alerts:
\n\n {platforms.map((platform) => {\n return props.onboarding ? (\n
\n \n Subscribed to these alerts:
\n\n
\n \n \n
\n\n \n
\n \n
\n
\n\n {dashboards\n .map((el) => {\n if (!el.name.includes(\"SEO: Overall\")) {\n let newDash = el;\n let result = newDash.dashboardOrder.filter((dash) => {\n return dash.name !== \"landingPageBreakdown\";\n });\n el.dashboardOrder = result;\n }\n return el;\n })\n .map((dashboard, index) => {\n let visible = dashboard.name == selectedDashboard;\n return (\n Dashboard modules:
\n \nSelect View:
\n\n {dashboards.findIndex((el) => el.name == selectedDashboard) !== 0 && (\n \n )}\n
\n \n \n \n Keep in mind you will need to configure the 'Landing Pages' tab above before they will appear in the 'Select View' dropdown above! \n \n Check the box to enable/disable, and click and drag the left handle to reorder your dashboard. Click 'Display configuration' to configure which\n metrics will show in each section.\n
\n \n\n
\n );\n })}\n \n \n
\n \n
\n \n \n {yearsArray.map((year, yearIndex) => {\n let visible = dashboard.id == selectedDashboardId && selectedYear == year;\n return (\n \n );\n })}\n \n
\n
\n \n );\n}\n","import React, { useState } from \"react\";\nimport { Form, Col, Row, Button, Table, Container } from \"react-bootstrap\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function GoogleAnalyticsGoals(props) {\n const [customGoals, setCustomGoals] = useState(props.customGoals);\n const [customGoalsEnabled, setCustomGoalsEnabled] = useState(props.customGoalsEnabled);\n const accountLabels = props.analyticsAccounts;\n const [selectedAccount, setSelectedAccount] = useState(accountLabels[0] && accountLabels[0].id ? accountLabels[0].id : \"\");\n\n const handleDelete = (targetKey, targetIndex) => {\n let newData = { ...customGoals };\n\n if (jsDig([targetKey, targetIndex], newData)) {\n newData[targetKey] = newData[targetKey].filter((goal, index) => {\n return targetIndex != index;\n });\n }\n setCustomGoals(newData);\n };\n\n const handleChange = (targetKey, targetIndex, property, value) => {\n let newData = { ...customGoals };\n if (jsDig([targetKey, targetIndex], newData)) {\n newData[targetKey][targetIndex][property] = value;\n }\n setCustomGoals(newData);\n };\n\n const addGoal = (targetKey) => {\n let newData = { ...customGoals };\n\n if (jsDig([targetKey], newData)) {\n newData[targetKey].push({});\n } else {\n newData[targetKey] = [{}];\n }\n setCustomGoals(newData);\n };\n\n return (\n <>\n Goals:
\n \n\n
\n \n \n \n \n
\n
\n \n {/* Only show the pull metrics button if the selectedYear matches the current year */}\n { selectedYear == moment().year().toString() ? (\n <>\n { props.seo_cc_data[selectedDashboardId].length > 0 ? (\n | For: | \n\n | \n
| Year: | \n\n | \n
\n handlePullMetric(selectedDashboardId)}>\n Pull metrics\n \n
\n ) : (\n \n You have the option to pull in historical data from the last year to help set this year's goals. Enter a percentage change to apply to the previous year's data:\n
\n\n (Negative numbers are also supported)\n
\n\n setGoalChangePercent(e.target.value)}\n >\n \n %\n
\n\n \n
\n\n Metrics to fill in:
\n {/* Let the user select which metric to apply the change to. Generate a checkbox for each metric */}\n {checkedMetrics[selectedDashboardId][selectedYear].map((metricName, index) => {\n const metric = metricList[metricName];\n return (\n\n
\n );\n })}\n \n setAllOrBlank(e.target.value)}>\n \n \n \n
\n\n Goals to replace:
\nNo historical data has been pulled so goals cannot be generated.
\n )}\n \n ) : <> }\n\n
\n \n Configure which metrics for the selected for/year fields that you would like to set goals for:
\n\n
\n );\n })}\n Select Label/ID:
\n \n\n Select the label/ID to track goals for, and set/name the goals below. Note: If you have just added a new ID above, you will need to save and refresh\n before it will appear in this section.\n
\n \n\n \n \n
\n
\n | \n | \n | Label | \n\n\n |
| \n | \n \n | \n \n | \n \n {(index >= 0 && customGoals[label.id].length > 1) && (\n | \n
\n {\n addGoal(selectedAccount);\n }}\n value=\"+ Add goal\"\n variant=\"success\"\n />\n
\n \n \n There are 2 types of Google Analytics properties, GA4 and UA.\n
\n
\n For UA, the ID to use in DataPulse is the view ID. That can be extracted from the URL after you select the relevant view:\n {firstImg}\n
\n The view ID is the number that comes after the 'p' in the URL.\n
\n
\n For GA4, the ID to use is the profile ID. That can also be extracted from the URL after you select the relevant property:\n {secondImg}\n
\n The property ID is the number that comes after the 'p' in the URL.\n
\n \n )\n }\n\n const calendarForm = (name, defaultDate) => {\n const [startDate, setStartDate] = useState(new Date(props.ga4Date));\n\n const handleStartDateChange = (date) => {\n setStartDate(date);\n }\n\n const formatDate = (date) => {\n return moment(date).format(\"YYYY,MM,DD\");\n };\n\n const calendarRef = useRef();\n\n return (\n <>\n \n
\n For UA, the ID to use in DataPulse is the view ID. That can be extracted from the URL after you select the relevant view:\n {firstImg}\n
\n The view ID is the number that comes after the 'p' in the URL.\n
\n
\n For GA4, the ID to use is the profile ID. That can also be extracted from the URL after you select the relevant property:\n {secondImg}\n
\n The property ID is the number that comes after the 'p' in the URL.\n
\n
\n \n );\n };\n\n let segmentImg = require(\"images/analytics-segment.png\");\n segmentImg = \n {\n calendarRef.current.setOpen(true);\n }}\n className=\"far f20 fa-calendar-alt\">\n
\n \n \n In Analytics, apply the segment you wish to use and check the URL for the parameter '_.useg'. The segment ID is everything that follows the 'user' string. For pulling a built-in segment, take the number after 'builtin' and add a hyphen '-' before.\n {segmentImg}\n
\n
\n Also please note that the segment must be shared in order to work. To do this, when creating or editing a segment, in the top right you'll see \"Segment is visible in any View. Change\" click Change then select \"Collaborators and I can apply/edit Segment in this view\". Click okay, then save the segment.\n
\n Click this tooltip for a guided walkthrough.\n
\n \n )\n }\n\n return (\n <>\n \n
\n Also please note that the segment must be shared in order to work. To do this, when creating or editing a segment, in the top right you'll see \"Segment is visible in any View. Change\" click Change then select \"Collaborators and I can apply/edit Segment in this view\". Click okay, then save the segment.\n
\n Click this tooltip for a guided walkthrough.\n
\n \n \n
\n
\n | Label | \n\n | \n | ||
| \n | \n \n | \n \n | \n \n | \n {/* \n {(index >= 0 && googleAnalyticsIds.length > 1) && (\n | \n
\n {\n setGoogleAnalyticsIds((prevState) => [...prevState, {}]);\n }}\n value=\"+ Add Google analytics ID\"\n variant=\"success\"\n />\n
\n \n \n \n
\n
\n \n Account IDs\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n
\n
\n \n SEMRush target Location:\n
\n \n\n \n {\n e.preventDefault();\n checkRef.current.click();\n }}>\n Property is a domain property?\n \n
\n
\n \n \n
\n
\n {/* Base Currency
\nDisplay Currency
\n\n Root Domain\n
\n \n
\n Your root domain(s) are auto-filled from what you entered as the website in account configuration, but you can change them here if need be.\n
\n \n\n \n \n {rootDomains.map((rootDomain, index) => {\n return (\n
\n {\n setRootDomains((prevState) => [...prevState, {}]);\n }}\n value=\"+ Add\"\n variant=\"success\"\n />\n
\n \n | \n | \n \n | \n \n {(index >= 0 && rootDomains.length > 1) && (\n | \n
The ID can change if a new target location has been selected. To make sure the ID is correct, open the project in SEMRush, and in the 'Position Tracking' tile, select 'View full report'. Copy the ID from the URL.
{projectIdImg}
\n\n const addNewRow = () => {\n //create an object with all of the state fields\n let newRow = {};\n newRow.id = \"\";\n newRow.label = \"\";\n newRow.website = jsDig([\"websites\", \"primary\"], props) ? jsDig([\"websites\", \"primary\"], props) : \"\";\n\n setSemrushIds([...semrushIds, newRow]);\n };\n\n const handleIdDelete = (targetIndex) => {\n let newIds = semrushIds.filter((id, index) => {\n return targetIndex != index;\n });\n setSemrushIds(newIds);\n };\n\n const handleIdChange = (targetIndex, property, value) => {\n let newIds = semrushIds.map((id, index) => {\n let newId = id;\n if (index == targetIndex) {\n newId[property] = value;\n }\n return newId;\n });\n setSemrushIds(newIds);\n };\n return (\n <>\n {projectIdImg}
\n \n \n
\n
\n | Website | \nLabel | \n\n ID\n | \n \n |
| \n | \n \n | \n \n | \n \n {index >= 0 && semrushIds.length > 1 && (\n | \n
\n addNewRow()}\n value=\"+ Add SEMRush Project ID\"\n variant=\"success\"\n />\n
\n \n \n \n \n \n \n
\n {conditions.map((el, index) => {\n console.log(props.conditions);\n return (\n
\n \n
\n )}\n {boxHandle}
\n \n \n \n \n
\n
\n Label
\n \n\n \n \n {\n let newArray = props.keywordGroups;\n newArray[props.index][\"name\"] = e.target.value;\n props.setKeywordGroups([...newArray]);\n }}\n />\n ) : (\n
\n
\n Conditions
\n \n\n \n \n
\n
\n );\n })}\n \n \n \n \n \n \n \n
\n \n \n handleRemoveCondition(el[1], index)}>\n
\n \n {props.onboarding ? (\n {\n let newArray = props.keywordGroups;\n console.log(newArray);\n let newConditions = conditions;\n newConditions[index][0][\"word\"] = e.target.value;\n setConditions([...newConditions]);\n newArray[props.index][\"conditions\"][index][\"word\"] = e.target.value;\n console.log(newArray);\n props.setKeywordGroups([...newArray]);\n }}\n style={{ marginBottom: \"12px\" }}\n />\n ) : (\n
\n \n Keyword Groups
\n\n In this section, you can configure keyword groups. It's very important that these entries are configured correctly- failing to do so can return\n skewed or undesirable reporting. Click 'Show me some examples' to the right to learn more about properly configuring your keyword groups. Labels\n are for reference only and will not affect the reporting (besides how it is titled in the performance dashboard).\n
\n \n )}\n\nsetShowBox(false)} className=\"f22 pr-0\">\n X\n
\n \n\n Setting Up Keyword Groups\n
\n\n In this section you can filter Google Search Console SEO keyword data into Keyword Groups to be displayed on the client's SEO Dashboard. This\n will allow you to see trends in certain keyword buckets in SEO. Your objective is to enter unique keyword phrases into each\n field that have no overlap with other fields, to filter the data into a bucket of your choosing. It is important this section is configured\n correctly, or else you wil have overlapping and inaccurate data. A few importnat notes up-front:\n
\n\n {\"1.)\"} Keyword filter entries are not case sensitive.\n
\n {\"2.)\"} Be mindful of singular/plural entries and how that could potentially double-count results.\n
\n {\"3.)\"}Spaces are treated just like any other character. For example, \"nikeshoes\" and \"nike shoes\" are unique keyword phrase filters that\n don't overlap.\n
\n Let's imagine we are setting up a client who sells shoes of various brands. You might want a keyword group for \"nike shoes\" keywords to see\n how that group of brand-specific keywords is performing. See the scenarios below to see what keyword filters you'll need to add to filter{\" \"}\n only these keywords properly:\n
\nScenario #1:
\nGood
\n\n The entries are unique and use the shortest and simplest amount of characters possible to account for all scenarios.\n
\n\n
-No one keyword filter is contained within any other keyword filter.
\n\n
-We accounted for a misspelling we found in Search Console.
\n\n
-The keyword filters won't pick up other irrelevant keywords.
\n\n
\n *Note: if the client carried \"nike shirts\" too, but you only wanted to filter on shoes, this would NOT be okay because \"nike\" is contained\n within \"nike shirts\" and thus would pick up shirts keywords too. See scenario #2.\n
\nScenario #2:
\nGood
\n\n If the client carried \"Nike shirts\" too, we would change the inputs to this scenario to only capture the shoes keywords.\n
\n\n
\n This also doesn't include overlap - even though the word \"shoes\" is in all keyword filters above, these are treated as{\" \"}\n phrases, so no entire keyword phrase is contained within any other phrase.\n
\nScenario #3:
\nNot Good
\nThis list of keyword filters would have overlap, causing double {`(maybe triple) `}counting of the data.
\n\n
\n The first entry \"nike\" is contained within the second entry \"nike shoe\". Also, the third entry \"shoes\" would pick up irrelevant keywords\n like \"adidas shoes\" in Google Search Console.\n
\n\n {sectionOrder.map((kgGroupId, idx) => {\n const keyword = props.onboarding\n ? props.keywordGroups.find((group) => group.id == kgGroupId)\n : keywordGroups.find((group) => group.id == kgGroupId);\n const index = props.onboarding\n ? props.keywordGroups.findIndex((group) => group.id == kgGroupId)\n : keywordGroups.findIndex((group) => group.id == kgGroupId);\n if (keyword) {\n return (\n
\n )}\n \n {props.onboarding ? (\n
\n );\n }\n })}\n {provided.placeholder}\n \n
\n \n );\n };\n\n return (\n <>\n \n \n {\n let newLpGroups = props.lpGroups;\n let targetIndex = newLpGroups.indexOf(newLpGroups.find((group) => group.id == lpGroupId));\n newLpGroups[targetIndex][\"conditions\"][index].url = e.target.value;\n props.setLpGroups([...newLpGroups]);\n }}\n />\n \n \n
\n
\n \n \n {\n let newLpGroups = props.lpGroups;\n let targetIndex = newLpGroups.indexOf(newLpGroups.find((group) => group.id == lpGroupId));\n newLpGroups[targetIndex][\"conditions\"].splice(index, 1);\n props.setLpGroups([...newLpGroups]);\n }}>\n \n {\n let newLpGroups = props.lpGroups;\n let targetIndex = newLpGroups.indexOf(newLpGroups.find((group) => group.id == lpGroupId));\n newLpGroups[targetIndex][\"conditions\"][index].type = e.target.value;\n props.setLpGroups([...newLpGroups]);\n }}>\n \n \n \n \n
\n
\n \n
\n )}\n \n {boxHandle}\n
\n \n {\n let newLpGroups = props.lpGroups;\n let targetIndex = newLpGroups.indexOf(newLpGroups.find((group) => group.id == lpGroupId));\n let newSectionOrder = props.sectionOrder;\n newSectionOrder.splice(props.index, 1);\n props.setSectionOrder(newSectionOrder);\n newLpGroups.splice(targetIndex, 1);\n props.setLpGroups([...newLpGroups]);\n }}>\n \n {\n let newLpGroups = props.lpGroups;\n let targetIndex = newLpGroups.indexOf(newLpGroups.find((group) => group.id == lpGroupId));\n newLpGroups[targetIndex].name = e.target.value;\n props.setLpGroups([...newLpGroups]);\n }}\n />\n \n
\n {lpGroup.conditions &&\n lpGroup.conditions.map((condition, index) => {\n return {conditionHtml(condition.type, condition.url, index, lpGroup.conditions.length)} ;\n })}\n \n
\n Landing Page Tracking
\r\n \r\n\r\n {sectionOrder.map((lpGroupId, index) => {\r\n if (lpGroups.find((group) => group.id == lpGroupId)) {\r\n return (\r\n
\r\n )}\r\n Client Management
\n\n
\n \n \n
\n \n \n \n
\n
\n {this.props.current_user_is_admin && (\n | Status | \nLast Change | \nClient Name | \nActivation Date | \n\n |
|---|---|---|---|---|
| \n | \n {new Date(Date.parse(client.updated_at)).toLocaleDateString()} | \n{client.company_name} | \n{new Date(Date.parse(client.created_at)).toLocaleDateString()} | \n\n |
\n
\n )}\n \n
\n Archive
\n\n
\n \n Collapse Section \n
\n\n
\n \n \n \n \n
\n
\n | Status | \nLast Change | \nClient Name | \nActivation Date | \nDanger Zone | \n
|---|---|---|---|---|
| \n | \n {new Date(Date.parse(client.updated_at)).toLocaleDateString()} | \n{client.company_name} | \n{new Date(Date.parse(client.created_at)).toLocaleDateString()} | \n\n \n | \n
\n
\n \n \n \n {\" \"}\n \n
\n \n \n \n
\n \n
\n \n
\n What is the name of the company for this account?
\n \n\n This is how your name will be displayed in DataPulse.
Just the simplest form of your company name is ideal.\n
\n
\n \n \n );\n }\n}\n\nexport default BlueIndentedSection;\n","import React, { useState } from \"react\";\r\nimport { Table, Row, Col, Button, Form } from \"react-bootstrap\";\r\nimport CustomDropdown from \"utils/CustomDropdown\";\r\n\r\nconst DashboardSubheader = (props) => {\r\n return (\r\n <>\r\n \n
\n {this.props.sectionTitle}
\n this.toggleCollapse(e)}>\n
\n \n {this.state.open === true ? \"Collapse \" : \"Expand \"}Section \n
\n{this.props.children}
\n \n \n \r\n props.setSelectedDashboard(parseInt(e.target.value))}\r\n style={{ width: \"256px\", paddingLeft: \"20px\", marginLeft: \"3px\" }}\r\n value={props.selectedDashboard}\r\n >\r\n {props.dashboards.map((dashboard, index) => {\r\n return (\r\n \r\n )\r\n })}\r\n \r\n }\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default DashboardSubheader;\r\n\r\n","import React from 'react';\nimport MetricFormatter from 'dashboards/MetricFormatter'\n\n// Gets the correct MetricFormatter for each metric based on metric name. We need this because we are looping through each metric now rather than hard coding each metric\nconst GetFormatter = (props) => {\n let Formatter;\n let metric = props.metricName.toLowerCase();\n\n if (props.tick == true) {\n if (metric.includes(\"roas\") || metric.includes(\"aov\") || metric.includes(\"cpa\") || metric.includes(\"cpc\")) {\n Formatter = MetricFormatter.CalculatedMonetaryTick;\n } else if (metric.includes(\"revenue\") || metric.includes(\"spend\")) {\n Formatter = MetricFormatter.MonetaryTick;\n } else if (metric.includes(\"ctr\") || metric.includes(\"cvr\") || metric.includes(\"bounce_rate\")) {\n Formatter = MetricFormatter.CalculatedTick;\n } else {\n Formatter = MetricFormatter.DefaultTick;\n }\n } else {\n if (metric.includes(\"traffic\")) {\n Formatter = MetricFormatter.Sessions;\n } else if (metric.includes(\"impressions\")) {\n Formatter = MetricFormatter.Impressions;\n } else if (metric.includes(\"phone_calls\")) {\n Formatter = MetricFormatter.PhoneCalls;\n } else if (metric.includes(\"search_visibility\")) {\n Formatter = MetricFormatter.SearchVisibility;\n } else if (metric.includes(\"clicks\")) {\n Formatter = MetricFormatter.Clicks;\n } else if (metric.includes(\"revenue\") || metric.includes(\"spend\")) {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.includes(\"bounce_rate\")) {\n Formatter = MetricFormatter.BounceRate;\n } else if (metric.includes(\"roas\")) {\n Formatter = MetricFormatter.ROAS;\n } else if (metric.includes(\"aov\")) {\n Formatter = MetricFormatter.AOV;\n } else if (metric.includes(\"cpa\")) {\n Formatter = MetricFormatter.CPA;\n } else if (metric.includes(\"cpc\")) {\n Formatter = MetricFormatter.CPC;\n } else if (metric.includes(\"cvr\")) {\n Formatter = MetricFormatter.CVR;\n } else if (metric.includes(\"ctr\")) {\n Formatter = MetricFormatter.CTR;\n } else if (metric.includes(\"conversions\")) {\n Formatter = MetricFormatter.Conversions;\n } else if (metric.includes(\"backlinks\")) {\n Formatter = MetricFormatter.Backlinks;\n } else {\n Formatter = MetricFormatter.Sessions;\n }\n }\n\n return Formatter;\n}\n\nexport default GetFormatter;\n","import React from 'react';\nimport ChartGoal from 'charts/ChartGoal'\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nclass GreenIndentedSection extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n }\n }\n\n toggleCollapse(event) {\n let btn = $(event.target);\n btn.next('.collapse').collapse('toggle');\n let icon = btn.find('.fas');\n if (icon.hasClass('fa-sort-up')) {\n icon.removeClass('fa-sort-up').addClass('fa-sort-down')\n } else {\n icon.removeClass('fa-sort-down').addClass('fa-sort-up')\n }\n }\n\n render() {\n return (\n <>\n Select view:
\r\n {props.tabLocation !== \"ppc\" ?\r\n\r\n\n
\n \n \n )\n }\n\n}\n\nexport default GreenIndentedSection;\n","import React from \"react\";\n\nclass KPIMetricBlock extends React.Component {\n constructor(props) {\n super(props);\n }\n\n componentDidMount() { }\n\n render() {\n const goodOrBadText = this.props.negative ? \"text-danger\" : \"text-success\";\n const goodOrBadBg = this.props.negative ? \"bg-danger\" : \"bg-success\";\n return (\n \n
\n \n {this.props.sectionTitle}\n
\n this.toggleCollapse(e)}>\n
\n Collapse Section
\n\n {\n this.props.children\n }\n
\n \n \n \n
\n );\n }\n}\n\nexport default KPIMetricBlock;\n","import React from \"react\";\nimport ChartGoal from \"charts/ChartGoal\";\nimport Row from \"react-bootstrap/Row\";\nimport Col from \"react-bootstrap/Col\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport ReactDOMServer from \"react-dom/server\";\n\nclass KeywordBlock extends React.Component {\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {}\n\n render() {\n const yyText = ReactDOMServer.renderToString({this.props.metricName}
\n {this.props.metric}
\n {this.props.yy}
\n \n
\n );\n }\n}\n\nexport default KeywordBlock;\n","import React from 'react';\n\nclass KeywordImprovedDeclinedBlock extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n {this.props.metricName}
\n{`${\n this.props.metric ? this.props.metric : 0\n } (${yyText})`}
\n {/* {`New: ${this.props.new}`}
\n {`Lost: ${this.props.lost}`}
*/}\n \n
\n )\n }\n}\n\nexport default KeywordImprovedDeclinedBlock;\n","import React from \"react\";\nimport Table from \"react-bootstrap/Table\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\n\nclass KeywordTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n sortBy: props.keyword_sort,\n sortOrderAsc: props.keyword_sort_order_asc,\n sortedKeywords: [],\n };\n }\n\n sortKeywords(by, initial = false) {\n let kwCopy = this.props.keywords === null ? [...this.state.sortedKeywords] : initial ? this.props.keywords : [...this.state.sortedKeywords];\n let tempSortOrder = this.state.sortOrderAsc;\n if (by == this.state.sortBy && !initial) {\n tempSortOrder = !tempSortOrder;\n kwCopy.reverse();\n } else {\n tempSortOrder = initial ? this.state.sortOrderAsc : true;\n if (by == \"keyword\") {\n kwCopy.sort((a, b) => {\n if (a.keyword.toLowerCase() < b.keyword.toLowerCase()) return -1;\n if (a.keyword.toLowerCase() > b.keyword.toLowerCase()) return 1;\n return 0;\n });\n } else if (by == \"prevpos\") {\n kwCopy.sort((a, b) => {\n if (typeof a.start_date_ranking == \"string\") a.start_date_ranking = parseFloat(a.start_date_ranking);\n if (typeof b.start_date_ranking == \"string\") b.start_date_ranking = parseFloat(b.start_date_ranking);\n\n if (a.start_date_ranking == 0) return 1;\n if (b.start_date_ranking == 0) return -1;\n if (a.start_date_ranking < b.start_date_ranking) return -1;\n if (a.start_date_ranking > b.start_date_ranking) return 1;\n return 0;\n });\n } else if (by == \"currentpos\") {\n kwCopy.sort((a, b) => {\n if (a.end_date_ranking == 0) return 1;\n if (b.end_date_ranking == 0) return -1;\n if (a.end_date_ranking < b.end_date_ranking) return -1;\n if (a.end_date_ranking > b.end_date_ranking) return 1;\n return 0;\n });\n } else if (by == \"diff\") {\n kwCopy.sort((a, b) => {\n if (a.ranking_difference < b.ranking_difference) return -1;\n if (a.ranking_difference > b.ranking_difference) return 1;\n return 0;\n });\n } else if (by == \"cpc\") {\n kwCopy.sort((a, b) => {\n if (isNaN(parseFloat(a.cpc))) return -1;\n if (isNaN(parseFloat(b.cpc))) return 1;\n if (parseFloat(a.cpc) < parseFloat(b.cpc)) return -1;\n if (parseFloat(a.cpc) > parseFloat(b.cpc)) return 1;\n return 0;\n });\n } else if (by == \"volume\") {\n kwCopy.sort((a, b) => {\n if (isNaN(parseFloat(a.volume))) return -1;\n if (isNaN(parseFloat(b.volume))) return 1;\n if (parseFloat(a.volume) < parseFloat(b.volume)) return -1;\n if (parseFloat(a.volume) > parseFloat(b.volume)) return 1;\n return 0;\n });\n } else if (by == \"difficulty\") {\n kwCopy.sort((a, b) => {\n if (isNaN(parseFloat(a.difficulty))) return -1;\n if (isNaN(parseFloat(b.difficulty))) return 1;\n if (parseFloat(a.difficulty) < parseFloat(b.difficulty)) return -1;\n if (parseFloat(a.difficulty) > parseFloat(b.difficulty)) return 1;\n return 0;\n });\n }\n if (!tempSortOrder) {\n kwCopy.reverse();\n }\n }\n\n this.setState({ sortBy: by, sortOrderAsc: tempSortOrder, sortedKeywords: kwCopy });\n }\n componentDidMount() {\n this.setState({ sortedKeywords: this.props.keywords });\n this.sortKeywords(this.state.sortBy, true);\n }\n render() {\n const sortUpHtml = ;\n const sortDownHtml = ;\n return (\n \n Improved: {this.props.improved}\n
\n \n Declined: {this.props.declined}\n
\n \n
\n );\n }\n}\n\nexport default KeywordTable;\n","import React from 'react';\nimport Metric from 'utils/Metric'\nimport currencyConverter from 'utils/currencyConverter'\nimport getCurrencyDetails from 'utils/getCurrencyDetails'\n\nconst getTickProps = (oldValue) => {\n let value = oldValue;\n let suffix = \"\";\n let roundTo = 0;\n let decimal = 0;\n if (value === 0) {\n suffix = \"\";\n roundTo = 0;\n } else if (value >= 100 && value < 1000) {\n suffix = \"\";\n roundTo = 1;\n } else if (value >= 1000 && value < 1000000) {\n suffix = \"k\"\n roundTo = 100;\n if (value < 10000) {\n decimal = parseFloat(Math.round(value).toString().split(\"\").reverse()[2]);\n }\n } else if (value >= 1000000 && value < 1000000000) {\n suffix = \"m\"\n roundTo = 100;\n if (value < 10000000) {\n decimal = parseFloat(Math.round(value).toString().split(\"\").reverse()[5]);\n }\n } else if (value >= 1000000000) {\n suffix = \"b\"\n roundTo = 100;\n if (value < 10000000000) {\n decimal = parseFloat(Math.round(value).toString().split(\"\").reverse()[8]);\n }\n }\n\n if (roundTo > 0) {\n value = Math.round(value / roundTo) * roundTo;\n }\n //turn into the last digits after multiples of 3 e.g 1k 100k 999k 89k instead of 1000 999000 89000\n if (value >= 100) {\n value = parseFloat(value.toString().substring(0, (value.toString().length % 3) == 0 ? 3 : (value.toString().length % 3)));\n }\n // We want to show partial values for some abbreviated ticks to avoid showing duplicates, like some were saying 1k, 1k, 1k, 1k, then jump to 2k, 2k, 2k, 2k\n if (decimal > 0) {\n value += decimal / 10\n }\n\n return {\n value: value,\n decimal: decimal,\n suffix: suffix,\n }\n}\n\nconst MetricFormatter = {\n YY: (props) => {\n if (isNaN(props.value) || (typeof props.value == \"string\")) {\n return (\n \n {!this.props.pdf && this.props.user_is_employee && (\n \n )}\n
\n \n \n \n
\n
\n | this.sortKeywords(\"keyword\")}>\n Keyword \n {this.state.sortBy == \"keyword\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordSerpFeatures\"] == \"1\" &&SERP Features | }\n {this.props.metrics[\"metrics_data\"][\"keywordPreviousPosition\"] == \"1\" && (\nthis.sortKeywords(\"prevpos\")}>\n Prev. Pos \n {this.state.sortBy == \"prevpos\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordCurrentPosition\"] == \"1\" && (\nthis.sortKeywords(\"currentpos\")}>\n Current Pos \n {this.state.sortBy == \"currentpos\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordDifference\"] == \"1\" && (\nthis.sortKeywords(\"diff\")}>\n Diff \n {this.state.sortBy == \"diff\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordCostPerConversion\"] == \"1\" && (\nthis.sortKeywords(\"cpc\")}>\n CPC \n {this.state.sortBy == \"cpc\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordSearchVolume\"] == \"1\" && (\nthis.sortKeywords(\"volume\")}>\n Volume \n {this.state.sortBy == \"volume\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n\n {this.props.metrics[\"metrics_data\"][\"keywordDifficulty\"] == \"1\" && (\nthis.sortKeywords(\"difficulty\")}>\n Difficulty \n {this.state.sortBy == \"difficulty\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n\n {this.props.metrics[\"metrics_data\"][\"keywordLabel\"] == \"1\" &&Label | }\n {this.props.metrics[\"metrics_data\"][\"keywordUrl\"] == \"1\" &&Ranking Page | }\n
|---|---|---|---|---|---|---|---|---|---|
| \n {keyword.keyword} \n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordSerpFeatures\"] == \"1\" && (\n \n \n {keyword.serp_features.map((serp_feature) => {\n if (serp_feature == \"rel\") return ;\n if (serp_feature == \"rev\") return ;\n if (serp_feature == \"fsn\") return ;\n if (serp_feature == \"shp\") return ;\n if (serp_feature == \"stl\") return ;\n if (serp_feature == \"adt\") return ;\n if (serp_feature == \"adb\") return ;\n if (serp_feature == \"vid\") return ;\n if (serp_feature == \"img\") return ;\n if (serp_feature == \"geo\") return ;\n if (serp_feature == \"vib\") return ;\n if (serp_feature == \"new\") return ;\n if (serp_feature == \"twt\") return ;\n if (serp_feature == \"knw\") return ;\n if (serp_feature == \"kng\") return ;\n })}\n \n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordPreviousPosition\"] == \"1\" && (\n \n \n {keyword.start_date_ranking == 0 ? \"100+\" : \n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordCurrentPosition\"] == \"1\" && (\n \n \n {keyword.end_date_ranking == 0 ? \"100+\" : \n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordDifference\"] == \"1\" && (\n \n \n \n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordCostPerConversion\"] == \"1\" && (\n \n \n \n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordSearchVolume\"] == \"1\" && (\n \n \n \n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordDifficulty\"] == \"1\" && (\n \n \n \n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordLabel\"] == \"1\" && (\n \n \n {keyword.tag &&\n keyword.tag.map((el, index) => {\n let string = el;\n if (index < keyword.tag.length - 1) string += \", \";\n return string;\n })}\n \n | \n )}\n {this.props.metrics[\"metrics_data\"][\"keywordUrl\"] == \"1\" && (\n \n {keyword.ranking_page} \n | \n )}\n
\n
\n )\n }\n\n}\n\nexport default NoData;\n","import React from \"react\";\nimport Tab from \"react-bootstrap/Tab\";\nimport Nav from \"react-bootstrap/Nav\";\nimport PPCDashboardOverall from \"dashboards/PPCDashboardOverall\";\nimport PPCDashboardSearch from \"dashboards/PPCDashboardSearch\";\nimport PPCDashboardSocial from \"dashboards/PPCDashboardSocial\";\nimport PPCDashboardDisplay from \"dashboards/PPCDashboardDisplay\";\nimport PPCDashboardVideo from \"dashboards/PPCDashboardVideo\";\nimport DashboardSubheader from \"dashboards/DashboardSubheader\";\nimport jsDig from \"utils/jsDig\";\nimport updateParams from \"utils/updateParams.js\";\nimport dismissDataPullErrors from \"utils/dismissDataPullErrors\";\nimport { capitalize, uniq } from \"lodash-es\";\n\nclass PPCDashboard extends React.Component {\n constructor(props) {\n super(props);\n this.setSelectedDashboard = this.setSelectedDashboard.bind(this);\n this.state = {\n tabLocation: \"\",\n selectedDashboard: 0,\n selectedPlatform: \"all\",\n showPpcErrors: (jsDig([\"data_pull_errors\"], this.props.ppc_section) && Object.keys(jsDig([\"data_pull_errors\"], this.props.ppc_section)).length > 0 && this.props.shared.user_is_employee) ? true : false,\n showSearchErrors: (jsDig([\"data_pull_errors\"], this.props.search_section) && Object.keys(jsDig([\"data_pull_errors\"], this.props.search_section)).length > 0 && this.props.shared.user_is_employee) ? true : false,\n showSocialErrors: (jsDig([\"data_pull_errors\"], this.props.social_section) && Object.keys(jsDig([\"data_pull_errors\"], this.props.social_section)).length > 0 && this.props.shared.user_is_employee) ? true : false,\n showDisplayErrors: (jsDig([\"data_pull_errors\"], this.props.display_section) && Object.keys(jsDig([\"data_pull_errors\"], this.props.display_section)).length > 0 && this.props.shared.user_is_employee) ? true : false,\n showVideoErrors: (jsDig([\"data_pull_errors\"], this.props.video_section) && Object.keys(jsDig([\"data_pull_errors\"], this.props.video_section)).length > 0 && this.props.shared.user_is_employee) ? true : false,\n };\n }\n\n setPlatform = (p) => {\n this.setState({selectedPlatform: p})\n }\n\n pullInProgress() {\n return (\n \n
\n \n
\n \n
\n {text}
\n\n
\n );\n }\n\n recalcInProgress() {\n return (\n \n
\n \n \n
\n \n \n A data pull is in progress.\n
\n \n {\n location.reload();\n }}>\n {\" \"}\n refresh \n \n the page.\n
\n This page is not available while the data pull is in progress.
\n Please check back later or\n\n
\n );\n };\n\n displayErrors(section) {\n let configUrl = \"\"\n if (section == \"ppc_section\") {\n configUrl = \"/datapulse/ppc-config?page=ppc\"\n } else if (section == \"search_section\") {\n configUrl = \"/datapulse/ppc-config?page=search\"\n } else if (section == \"social_section\") {\n configUrl = \"/datapulse/ppc-config?page=social\"\n } else if (section == \"display_section\") {\n configUrl = \"/datapulse/ppc-config?page=display\"\n } else if (section == \"video_section\") {\n configUrl = \"/datapulse/ppc-config?page=video\"\n }\n return (\n \n
\n \n \n
\n \n \n Data is being recalculated.\n
\n \n {\n location.reload();\n }}>\n {\" \"}\n refresh \n \n the page.\n
\n Your data pull has completed but data is recalculating
\n Please be patient {this.props.shared && this.props.shared.user ? this.props.shared.user.first_name : \"my guy\"} and check back later or\n\n
\n )\n }\n\n changeSection(hashLoc = \"ppc\") {\n let exportButton = $(\".ppc-export-pdf\");\n let href = exportButton.attr(\"href\").split(\"§ion=\")[0];\n exportButton.attr(\"href\", href + \"§ion=\" + hashLoc + \"&dashboard=0\");\n }\n\n componentDidMount() {\n const urlSearchParams = new URL(location.href).searchParams;\n let hashLoc = urlSearchParams.get(\"page\");\n if (hashLoc) {\n this.setState({ tabLocation: hashLoc });\n updateParams(\"page\", hashLoc, \"dashboard\");\n this.changeSection(hashLoc);\n } else {\n this.setState({ tabLocation: \"paidSearch\" });\n updateParams(\"page\", \"paidSearch\", \"dashboard\");\n this.changeSection();\n }\n }\n\n selectTab(key) {\n this.setState({ tabLocation: key });\n this.setState({ selectedDashboard: 0 });\n this.changeSection(key);\n updateParams(\"page\", key, \"dashboard\");\n setTimeout(() => window.dispatchEvent(new Event(\"resize\")), 1);\n if (key === \"paidDisplay\") {\n $(\"#configure-btn\").attr(\"href\", `ppc-config?page=display&subpage=dashboard`);\n }\n if (key === \"paidVideo\") {\n $(\"#configure-btn\").attr(\"href\", `ppc-config?page=video&subpage=dashboard`);\n }\n if (key === \"paidSocial\") {\n $(\"#configure-btn\").attr(\"href\", `ppc-config?page=social&subpage=dashboard`);\n }\n if (key === \"paidSearch\") {\n $(\"#configure-btn\").attr(\"href\", `ppc-config?page=search&subpage=dashboard`);\n }\n if (key === \"ppc\") {\n $(\"#configure-btn\").attr(\"href\", `ppc-config?page=ppc&subpage=dashboard`);\n }\n }\n\n setSelectedDashboard(id) {\n this.setState({ selectedDashboard: id });\n let exportButton = $(\".ppc-export-pdf\");\n let href = exportButton.attr(\"href\").split(\"§ion=\")[0];\n exportButton.attr(\"href\", href + \"§ion=\" + this.state.tabLocation + \"&dashboard=\" + id);\n }\n\n \n render() {\n\n const ppcDashboards = [{ name: \"PPC: Overall\", id: 0 }];\n const searchDashboards = [\n { name: \"Search: Overall\", id: 0 },\n ...this.props.search_section.campaign_groups.map((group) => ({ name: group.name, id: group.id })),\n ];\n const socialDashboards = [\n { name: \"Social: Overall\", id: 0 },\n ...this.props.social_section.campaign_groups.map((group) => ({ name: group.name, id: group.id })),\n ];\n const displayDashboards = [\n { name: \"Display: Overall\", id: 0 },\n ...this.props.display_section.campaign_groups.map((group) => ({ name: group.name, id: group.id })),\n ];\n const videoDashboards = [\n { name: \"Video: Overall\", id: 0 },\n ...this.props.video_section.campaign_groups.map((group) => ({ name: group.name, id: group.id })),\n ];\n\n let dashboards = [];\n switch (this.state.tabLocation) {\n case \"ppc\":\n dashboards = [...ppcDashboards];\n break;\n case \"paidSearch\":\n dashboards = [...searchDashboards];\n break;\n case \"paidSocial\":\n dashboards = [...socialDashboards];\n break;\n case \"paidDisplay\":\n dashboards = [...displayDashboards];\n break;\n case \"paidVideo\":\n dashboards = [...videoDashboards];\n break;\n default:\n dashboards = [];\n break;\n }\n\n const allPpcEnabled =\n this.props.search_section.enabled || this.props.social_section.enabled || this.props.display_section.enabled || this.props.video_section.enabled;\n\n const ppcPulling =\n jsDig([\"data_pull_status\", \"shopify_data_pull\"], this.props.ppc_section) &&\n jsDig([\"data_pull_status\", \"shopify_data_pull\"], this.props.ppc_section).length > 0;\n const searchPulling =\n (jsDig([\"data_pull_status\", \"google_data_pull\"], this.props.search_section) &&\n jsDig([\"data_pull_status\", \"google_data_pull\"], this.props.search_section).length > 0) ||\n (jsDig([\"data_pull_status\", \"bing_data_pull\"], this.props.search_section) &&\n jsDig([\"data_pull_status\", \"bing_data_pull\"], this.props.search_section).length > 0);\n const socialPulling =\n jsDig([\"data_pull_status\", \"facebook_data_pull\"], this.props.social_section) &&\n jsDig([\"data_pull_status\", \"facebook_data_pull\"], this.props.social_section).length > 0;\n const displayPulling =\n jsDig([\"data_pull_status\", \"google_data_pull\"], this.props.display_section) &&\n jsDig([\"data_pull_status\", \"google_data_pull\"], this.props.display_section).length > 0;\n const videoPulling =\n jsDig([\"data_pull_status\", \"google_data_pull\"], this.props.video_section) &&\n jsDig([\"data_pull_status\", \"google_data_pull\"], this.props.video_section).length > 0;\n\n const ppcRecalculating =\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.ppc_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.ppc_section).length > 0;\n const searchRecalculating =\n (jsDig([\"data_pull_status\", \"recalculation\"], this.props.search_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.search_section).length > 0) ||\n (jsDig([\"data_pull_status\", \"recalculation\"], this.props.search_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.search_section).length > 0);\n const socialRecalculating =\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.social_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.social_section).length > 0;\n const displayRecalculating =\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.display_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.display_section).length > 0;\n const videoRecalculating =\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.video_section) &&\n jsDig([\"data_pull_status\", \"recalculation\"], this.props.video_section).length > 0;\n\n\n let platformCount\n if (this.state.tabLocation === \"paidSearch\" || this.state.tabLocation === \"\") {\n platformCount = Object.keys(this.props[\"search_section\"][\"cc_data\"]).length\n }\n if (this.state.tabLocation === \"paidSocial\") {\n platformCount = Object.keys(this.props[\"social_section\"][\"cc_data\"]).length\n }\n if (this.state.tabLocation === \"paidDisplay\") {\n platformCount = Object.keys(this.props[\"display_section\"][\"cc_data\"]).length\n }\n if (this.state.tabLocation === \"paidVideo\") {\n platformCount = Object.keys(this.props[\"video_section\"][\"cc_data\"]).length\n }\n\n return (\n <>\n \n
\n \n There were errors on the last data pull\n
\n \n {jsDig([section, \"data_pull_errors\"], this.props) && Object.keys(jsDig([section, \"data_pull_errors\"], this.props)).map((platform) => {\n const errorCounts = jsDig([section, \"data_pull_errors\", platform], this.props).reduce((map, val) => {map[val] = (map[val] || 0)+1; return map}, {} );\n return (\n \n \n )\n })}\n
\n \n
\n {capitalize(platform)}:
\n- \n {uniq(jsDig([section, \"data_pull_errors\", platform], this.props)).map((errorMessage, index) => {\n const length = errorCounts[errorMessage];\n return (\n
- - {length > 1 ? `(${length}x) ` : ' '}{errorMessage} \n )\n })}\n
\n {\n dismissDataPullErrors(jsDig([section, \"id\"], this.props), section.split(\"_\")[0])\n $(e.target).closest('.spin-shell').fadeOut();\n setTimeout(() => {\n if (section == \"ppc_section\") {\n this.setState({ showPpcErrors: false })\n } else if (section == \"search_section\") {\n this.setState({ showSearchErrors: false })\n } else if (section == \"social_section\") {\n this.setState({ showSocialErrors: false })\n } else if (section == \"display_section\") {\n this.setState({ showDisplayErrors: false })\n } else if (section == \"video_section\") {\n this.setState({ showVideoErrors: false })\n }\n }, 1000)\n }}>\n Dismiss\n \n {\n dismissDataPullErrors(jsDig([section, \"id\"], this.props), section.split(\"_\")[0])\n }}>\n Go to configs\n \n
\n \n this.selectTab(k)}>\n \n \n \n {ppcPulling ? (\n this.pullInProgress()\n ) : ppcRecalculating ? (\n this.recalcInProgress()\n ) : this.state.showPpcErrors ? (\n this.displayErrors(\"ppc_section\")\n ) : (\n \n \n {searchPulling ? (\n this.pullInProgress()\n ) : searchRecalculating ? (\n this.recalcInProgress()\n ) : this.state.showSearchErrors ? (\n this.displayErrors(\"search_section\")\n ) : (\n \n \n {socialPulling ? (\n this.pullInProgress()\n ) : socialRecalculating ? (\n this.recalcInProgress()\n ) : this.state.showSocialErrors ? (\n this.displayErrors(\"social_section\")\n ) : (\n \n \n {displayPulling ? (\n this.pullInProgress()\n ) : displayRecalculating ? (\n this.recalcInProgress()\n ) : this.state.showDisplayErrors ? (\n this.displayErrors(\"display_section\")\n ) : (\n \n \n {videoPulling ? (\n this.pullInProgress()\n ) : videoRecalculating ? (\n this.recalcInProgress()\n ) : this.state.showVideoErrors ? (\n this.displayErrors(\"video_section\")\n ) : (\n \n \n \n
\n \n );\n }\n}\n\nexport default PPCDashboard;\n","import React from \"react\";\nimport ChartGoal from \"charts/ChartGoal\";\nimport ChartLine from \"charts/ChartLine\";\nimport ChartPie from \"charts/ChartPie\";\nimport ChartBar from \"charts/ChartBar\";\nimport ChartLocation from \"charts/ChartLocation\";\nimport Row from \"react-bootstrap/Row\";\nimport Col from \"react-bootstrap/Col\";\nimport BlueIndentedSection from \"dashboards/BlueIndentedSection\";\nimport KPIMetricBlock from \"dashboards/KPIMetricBlock\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport MetricTable from \"MetricTable\";\nimport ServiceDisabled from \"dashboards/ServiceDisabled\";\nimport NoData from \"dashboards/NoData\";\nimport jsDig from \"utils/jsDig\";\nimport GetFormatter from \"dashboards/GetFormatter\";\nimport allMetrics from \"data/allMetrics.js\";\nimport getNegative from \"utils/getNegative\";\nimport getGoalLocked from \"utils/getGoalLocked\";\nimport { camelCase } from \"lodash-es\";\nimport dashboardTableOrder from \"utils/dashboardTableOrder\";\nimport CustomTooltip from \"utils/CustomTooltip\";\n\nconst allMetricData = allMetrics();\nconst ageKeyOrder = [\"18-24\", \"25-34\", \"35-44\", \"45-54\", \"55-64\", \"65+\", \"unknown\"];\nconst dayKeyOrder = [\"monday\", \"tuesday\", \"wednesday\", \"thursday\", \"friday\", \"saturday\", \"sunday\"];\nconst hourKeyOrder = [\n \"00\",\n \"01\",\n \"02\",\n \"03\",\n \"04\",\n \"05\",\n \"06\",\n \"07\",\n \"08\",\n \"09\",\n \"10\",\n \"11\",\n \"12\",\n \"13\",\n \"14\",\n \"15\",\n \"16\",\n \"17\",\n \"18\",\n \"19\",\n \"20\",\n \"21\",\n \"22\",\n \"23\",\n];\nclass PPCDashboardDisplay extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedPlatform: \"google\",\n };\n }\n\n handlePlatform = (p) => {\n this.setState({ selectedPlatform: p });\n };\n\n generateDashboardSection(section, cc_data, dashboard, p) {\n const metricData = allMetricData[\"metricData\"];\n let date = this.props.date ? moment(this.props.date) : moment();\n let month = date.format(\"MMM\");\n let year = date.year();\n\n if (section.metrics_data) {\n const renderArray = dashboardTableOrder(\"ppc\", Object.keys(section.metrics_data));\n switch (section.name) {\n case \"goalsAndProjections\":\n let goals = this.props.goals;\n return (\n <>\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n\n return (\n
\n \n );\n case \"campaignGroups\":\n const groupOrder = this.props.campaign_group_order ? this.props.campaign_group_order : [];\n return (\n <>\n {groupOrder.map((group_id, index) => {\n let metricTitles = [];\n const campaignGroup = this.props.campaign_groups.find((group) => group.id == group_id);\n if (campaignGroup) {\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{campaignGroup.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for campaign group {group_id}\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\nNo spend data.
;\n }\n default:\n return{section.name} is not a valid section name for this dashboard
;\n }\n }\n }\n\n render() {\n const allPlatforms = Object.keys(jsDig([\"cc_data\"], this.props));\n const platformCount = allPlatforms.length - 1;\n const svgList = {\n google: (\n\n \n {platformCount >= 2 ? Google only : Google}\n \n \n \n
\n ),\n microsoft: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n bing: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n facebook: (\n \n \n {platformCount >= 2 ? Facebook only : Facebook}\n \n \n \n
\n ),\n tiktok: (\n \n \n TikTok Only\n \n \n \n
\n ),\n all: (\n \n \n All platforms\n \n \n \n
\n ),\n };\n\n let allIcon = require(\"images/pacing/all-platforms.svg\");\n allIcon = \n
\n\n {dashboardOrder.map((dashboardSection, index) => {\n const sectionData = sectionList[dashboardSection.name];\n if (dashboardSection.enabled) {\n dashboardsEnable = true;\n return (\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n capitalized = capitalized == \"Bing\" ? \"Microsoft\" : capitalized;\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\" || platform == \"bing\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
You have not enabled any sections for this dashboard yet. Click the configure dashboard button above to set up your dashboard.
\n ) : (\nNo sections of this dashboard are currently enabled. Please contact your account representatives if you would like to this view.
\n ))}\n \n );\n } else {\n return (\n <>\n\n
\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
\n \n Discovery Campaign Data\n
\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n return (\n
\n \n );\n case \"performanceByChannel\":\n const channels = renderArray.map((channel) => {\n if (section.metrics_data[`${channel}`] == \"1\") return channel;\n });\n return (\n {metricKey} was not found in cc_data
;\n }\n } else {\n return{metricName} not defined in metricData.json
;\n }\n })}\n\n {[\"search\", \"social\", \"display\", \"video\"].map((channel, index) => {\n let metricNames =\n this.props.client_type == \"ecommerce\"\n ? [\"spend\", \"clicks\", \"total_conversions\", \"total_roas\"]\n : [\"spend\", \"clicks\", \"total_conversions\", \"total_cpa\"];\n if (channel == \"search\") {\n metricNames =\n this.props.client_type == \"ecommerce\"\n ? [\"spend\", \"clicks\", \"click_conversions\", \"click_roas\"]\n : [\"spend\", \"clicks\", \"click_conversions\", \"click_cpa\"];\n }\n\n if (channels.includes(channel)) {\n if (jsDig([`${channel}_section`, \"cc_data\", 0, \"date\"], this.props)) {\n let tempMetricNames = [];\n return (\n
\n );\n case \"campaignGroups\":\n const sections = renderArray.map((channel) => {\n if (section.metrics_data[`${channel}`] == \"1\") return channel;\n });\n\n return (\n <>\n {[\"search\", \"social\", \"display\", \"video\"].map((channel, index) => {\n const channelName = `${channel}_section`;\n const groupOrder = this.props[channelName].campaign_group_order ? this.props[channelName].campaign_group_order : [];\n\n return (\n \n \n
\n
\n );\n } else return {capitalize(channel)}
\n {metricNames.map((metricName, index) => {\n if (metricName) {\n if (jsDig([`${channel}_section`, \"cc_data\", 0, \"metrics_2_years\", metricName], this.props) == null) {\n console.log(`${metricName} was not found.`);\n return <>;\n }\n } else {\n return{metricName} not defined in metricData.json
;\n }\n\n tempMetricNames.push(metricName);\n })}\n\nThere is no data for {channel}
;\n }\n })}\n\n {groupOrder.map((group_id, index) => {\n let metricNames =\n this.props.client_type == \"ecommerce\"\n ? [\"spend\", \"clicks\", \"total_conversions\", \"total_roas\"]\n : [\"spend\", \"clicks\", \"total_conversions\", \"click_cpa\"];\n if (channel == \"search\") {\n metricNames =\n this.props.client_type == \"ecommerce\"\n ? [\"spend\", \"clicks\", \"click_conversions\", \"click_roas\"]\n : [\"spend\", \"clicks\", \"click_conversions\", \"click_cpa\"];\n }\n const campaignGroup = this.props[channelName].campaign_groups.find(\n (group) => group.id == group_id && sections.includes(camelCase(group.name))\n );\n\n if (campaignGroup) {\n let tempMetricNames = [];\n return (\n
\n );\n })}\n \n );\n case \"spendAllocation\":\n let metricsEnabled = [];\n if (jsDig([dashboard, \"spend\", \"raw\"], cc_data) > 0 && this.state.selectedPlatform === \"all\") {\n return (\n <>\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n metricsEnabled.push(metricKey);\n }\n } else {\n return \n \n
\n
\n );\n }\n })}\n {campaignGroup.name}
\n {metricNames.map((metricName, index) => {\n if (metricName) {\n if (jsDig([group_id, \"metrics_2_years\", metricName], this.props[channelName].cc_data) == null) {\n console.log(`${metricName} was not found in metrics_2_years in cc_data for campaign group ${group_id}`);\n return <>;\n }\n } else {\n return{metricName} not defined in metricData.json
;\n }\n\n tempMetricNames.push(metricName);\n })}\n\n{metricKey} was not found in cc_data
;\n }\n } else {\n return{metricName} not defined in metricData.json
;\n }\n })}\n\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\nNo spend data.
;\n }\n default:\n return (\n <>\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n }\n\n render() {\n const allPlatforms = Object.keys(jsDig([\"cc_data\"], this.props));\n const platformCount = allPlatforms.length - 1;\n const svgList = {\n google: (\n\n \n {platformCount >= 2 ? Google only : Google}\n \n \n \n
\n ),\n microsoft: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n bing: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n facebook: (\n \n \n {platformCount >= 2 ? Facebook only : Facebook}\n \n \n \n
\n ),\n tiktok: (\n \n \n TikTok Only\n \n \n \n
\n ),\n all: (\n \n \n All platforms\n \n \n \n
\n ),\n };\n\n let allIcon = require(\"images/pacing/all-platforms.svg\");\n allIcon = \n
\n {dashboardOrder.map((dashboardSection, index) => {\n const sectionData = sectionList[dashboardSection.name];\n if (dashboardSection.enabled) {\n dashboardsEnable = true;\n return (\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n capitalized = capitalized == \"Bing\" ? \"Microsoft\" : capitalized;\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\" || platform == \"bing\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
You have not enabled any sections for this dashboard yet. Click the configure dashboard button above to set up your dashboard.
\n ) : (\nNo sections of this dashboard are currently enabled. Please contact your account representatives if you would like to this view.
\n ))}\n \n );\n } else {\n return (\n <>\n\n
\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n\n return (\n
\n \n );\n case \"campaignGroups\":\n const groupOrder = this.props.campaign_group_order ? this.props.campaign_group_order : [];\n return (\n <>\n {groupOrder.map((group_id, index) => {\n let metricTitles = [];\n const campaignGroup = this.props.campaign_groups.find((group) => group.id == group_id);\n if (campaignGroup) {\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{campaignGroup.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for campaign group {group_id}\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\nNo spend data.
;\n default:\n return (\n <>\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n }\n\n render() {\n const allPlatforms = Object.keys(jsDig([\"cc_data\"], this.props));\n const platformCount = allPlatforms.length - 1;\n const svgList = {\n google: (\n\n \n {platformCount >= 2 ? Google only : Google}\n \n \n \n
\n ),\n microsoft: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n bing: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n facebook: (\n \n \n {platformCount >= 2 ? Facebook only : Facebook}\n \n \n \n
\n ),\n tiktok: (\n \n \n TikTok Only\n \n \n \n
\n ),\n all: (\n \n \n All platforms\n \n \n \n
\n ),\n };\n\n let allIcon = require(\"images/pacing/all-platforms.svg\");\n allIcon = \n
\n\n {dashboardOrder.map((dashboardSection, index) => {\n const sectionData = sectionList[dashboardSection.name];\n if (dashboardSection.enabled) {\n dashboardsEnable = true;\n return (\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n console.log(capitalized);\n capitalized = capitalized == \"Bing\" ? \"Microsoft\" : capitalized;\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\" || platform == \"bing\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
You have not enabled any sections for this dashboard yet. Click the configure dashboard button above to set up your dashboard.
\n ) : (\nNo sections of this dashboard are currently enabled. Please contact your account representatives if you would like to this view.
\n ))}\n \n );\n } else {\n return (\n <>\n\n
\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n\n return (\n
\n \n );\n case \"campaignGroups\":\n const groupOrder = this.props.campaign_group_order ? this.props.campaign_group_order : [];\n return (\n <>\n {groupOrder.map((group_id, index) => {\n let metricTitles = [];\n const campaignGroup = this.props.campaign_groups.find((group) => group.id == group_id);\n if (campaignGroup) {\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{campaignGroup.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricTitle = jsDig([metricName, \"name\", \"title\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for campaign group {group_id}\n
\n );\n }\n } else {\n return{metricName} not defined in metricData.json
;\n }\n })}\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\n*Device, Gender, Age, Hourly & Location charts do not currently include TikTok data
\n ) : (\n <>\n )}\n \n );\n } else {\n returnNo spend data.
;\n }\n default:\n return{section.name} is not a valid section name for this dashboard
;\n }\n }\n }\n\n render() {\n const dashboard = this.props.selectedDashboard;\n let cc_data = this.props.cc_data[this.state.selectedPlatform];\n\n const allPlatforms = Object.keys(jsDig([\"cc_data\"], this.props));\n const platformCount = allPlatforms.length - 1;\n const uniquePlatforms = Array.from(Object.keys(jsDig([\"cc_data\"], this.props)));\n\n const svgList = {\n google: (\n\n \n {platformCount >= 2 ? Google only : Google}\n \n \n \n
\n ),\n microsoft: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n bing: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n facebook: (\n \n \n {platformCount >= 2 ? Facebook only : Facebook}\n \n \n \n
\n ),\n tiktok: (\n \n \n TikTok Only\n \n \n \n
\n ),\n all: (\n \n \n All platforms\n \n \n \n
\n ),\n };\n\n let allIcon = require(\"images/pacing/all-platforms.svg\");\n allIcon = \n
\n\n {dashboardOrder.map((dashboardSection, index) => {\n const sectionData = sectionList[dashboardSection.name];\n if (dashboardSection.enabled) {\n dashboardsEnable = true;\n return (\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n capitalized = capitalized == \"Bing\" ? \"Microsoft\" : capitalized;\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\" || platform == \"bing\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
You have not enabled any sections for this dashboard yet. Click the configure dashboard button above to set up your dashboard.
\n ) : (\nNo sections of this dashboard are currently enabled. Please contact your account representatives if you would like to this view.
\n ))}\n \n );\n } else {\n return(\n <>\n\n
\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricTitle = jsDig([metricName, \"name\", \"title\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n\n return (\n
\n \n );\n case \"campaignGroups\":\n const groupOrder = this.props.campaign_group_order ? this.props.campaign_group_order : [];\n return (\n <>\n {groupOrder.map((group_id, index) => {\n let metricTitles = [];\n const campaignGroup = this.props.campaign_groups.find((group) => group.id == group_id);\n if (campaignGroup) {\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{campaignGroup.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricTitle = jsDig([metricName, \"name\", \"title\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for campaign group {group_id}\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\nNo spend data.
;\n }\n default:\n return{section.name} is not a valid section name for this dashboard
;\n }\n }\n }\n\n render() {\n const allPlatforms = Object.keys(jsDig([\"cc_data\"], this.props));\n const platformCount = allPlatforms.length - 1;\n const uniquePlatforms = Array.from(Object.keys(jsDig([\"cc_data\"], this.props)));\n const svgList = {\n google: (\n\n \n {platformCount >= 2 ? Google only : Google}\n \n \n \n
\n ),\n microsoft: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n bing: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n facebook: (\n \n \n {platformCount >= 2 ? Facebook only : Facebook}\n \n \n \n
\n ),\n tiktok: (\n \n \n TikTok Only\n \n \n \n
\n ),\n all: (\n \n \n All platforms\n \n \n \n
\n ),\n };\n\n let allIcon = require(\"images/pacing/all-platforms.svg\");\n allIcon = \n
\n\n {dashboardOrder.map((dashboardSection, index) => {\n const sectionData = sectionList[dashboardSection.name];\n if (dashboardSection.enabled) {\n dashboardsEnable = true;\n return (\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n console.log(capitalized);\n capitalized = capitalized == \"Bing\" ? \"Microsoft\" : capitalized;\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\" || platform == \"bing\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
You have not enabled any sections for this dashboard yet. Click the configure dashboard button above to set up your dashboard.
\n ) : (\nNo sections of this dashboard are currently enabled. Please contact your account representatives if you would like to this view.
\n ))}\n \n );\n } else {\n return (\n <>\n\n
\n Select Platform:
\n \n \n
\n {svgList[this.state.selectedPlatform]}
\n \n - \n {Object.keys(this.props[\"cc_data\"])\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
\n
\n \n
\n Client Type:
\n\n {\n changeTable(\"ecommerce\");\n }}>\n Ecommerce\n \n
\n \n {\n changeTable(\"leadgen\");\n }}>\n Lead Gen\n \n
\n \n
\n \n );\n }\n}\n\nexport default PPCSummaryDisplay;\n","import React from \"react\";\nimport Table from \"react-bootstrap/Table\";\nimport Metric from \"utils/Metric\";\nimport { Button, Row, Col } from \"react-bootstrap\";\n\nclass PPCSummaryOverall extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeTable: \"ecommerce\",\n };\n }\n\n render() {\n const clients = Object.keys(this.props.metrics);\n const firstKey = clients[0];\n const metrics = Object.keys(this.props.metrics[firstKey]).filter((el) => !el.includes(\"yy\"));\n const leadgenList = this.props.client_list.filter((el) => el[\"account_type\"] == \"leadgen\").map((item) => item);\n const leadgenClients = leadgenList.map((item) => item.client_name);\n const ecommerceList = this.props.client_list.filter((el) => el[\"account_type\"] == \"ecommerce\").map((item) => item);\n const ecommerceClients = ecommerceList.map((item) => item.client_name);\n let totals = {\n leadgen: {},\n ecommerce: {},\n };\n\n leadgenClients.map((client) => {\n metrics.map((metricName) => {\n let mValue = this.props.metrics[client][metricName];\n totals[\"leadgen\"][metricName] ? (totals[\"leadgen\"][metricName] += mValue) : (totals[\"leadgen\"][metricName] = mValue);\n });\n });\n\n ecommerceClients.map((client) => {\n metrics.map((metricName) => {\n let mValue = this.props.metrics[client][metricName];\n totals[\"ecommerce\"][metricName] ? (totals[\"ecommerce\"][metricName] += mValue) : (totals[\"ecommerce\"][metricName] = mValue);\n });\n });\n\n totals[\"leadgen\"][\"rev_or_conv_yy\"] =\n ((totals[\"leadgen\"][\"rev_or_conv\"] - totals[\"leadgen\"][\"rev_or_conv_ly\"]) / totals[\"leadgen\"][\"rev_or_conv_ly\"]) * 100;\n totals[\"leadgen\"][\"rev_or_conv_lm_yy\"] =\n ((totals[\"leadgen\"][\"rev_or_conv_lm\"] - totals[\"leadgen\"][\"rev_or_conv_lmly\"]) / totals[\"leadgen\"][\"rev_or_conv_lmly\"]) * 100;\n totals[\"ecommerce\"][\"rev_or_conv_yy\"] =\n ((totals[\"ecommerce\"][\"rev_or_conv\"] - totals[\"ecommerce\"][\"rev_or_conv_ly\"]) / totals[\"ecommerce\"][\"rev_or_conv_ly\"]) * 100;\n totals[\"ecommerce\"][\"rev_or_conv_lm_yy\"] =\n ((totals[\"ecommerce\"][\"rev_or_conv_lm\"] - totals[\"ecommerce\"][\"rev_or_conv_lmly\"]) / totals[\"ecommerce\"][\"rev_or_conv_lmly\"]) * 100;\n\n const changeTable = (table) => {\n this.setState({ activeTable: table });\n };\n return (\n <>\n \n
\n \n
\n \n {this.state.activeTable == \"ecommerce\" ? (\n \n \n
\n ) : (\n \n \n
\n )}\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Revenue\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Revenue Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Revenue Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger \";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"ecommerce\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Conversions\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Conversions Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Conversions Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"leadgen\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
\n
\n \n
\n Client Type:
\n\n {\n changeTable(\"ecommerce\");\n }}>\n Ecommerce\n \n
\n \n {\n changeTable(\"leadgen\");\n }}>\n Lead Gen\n \n
\n \n
\n \n );\n }\n}\n\nexport default PPCSummaryOverall;\n","import React from \"react\";\nimport Table from \"react-bootstrap/Table\";\nimport Metric from \"utils/Metric\";\n\nclass PPCSummarySearch extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeTable: \"ecommerce\",\n };\n }\n\n render() {\n const clients = Object.keys(this.props.metrics);\n const firstKey = clients[0];\n const metrics = Object.keys(this.props.metrics[firstKey]).filter((el) => !el.includes(\"yy\"));\n const leadgenList = this.props.client_list.filter((el) => el[\"account_type\"] == \"leadgen\").map((item) => item);\n const leadgenClients = leadgenList.map((item) => item.client_name);\n const ecommerceList = this.props.client_list.filter((el) => el[\"account_type\"] == \"ecommerce\").map((item) => item);\n const ecommerceClients = ecommerceList.map((item) => item.client_name);\n let totals = {\n leadgen: {},\n ecommerce: {},\n };\n\n leadgenClients.map((client) => {\n metrics.map((metricName) => {\n let mValue = this.props.metrics[client][metricName];\n totals[\"leadgen\"][metricName] ? (totals[\"leadgen\"][metricName] += mValue) : (totals[\"leadgen\"][metricName] = mValue);\n });\n });\n\n ecommerceClients.map((client) => {\n metrics.map((metricName) => {\n let mValue = this.props.metrics[client][metricName];\n totals[\"ecommerce\"][metricName] ? (totals[\"ecommerce\"][metricName] += mValue) : (totals[\"ecommerce\"][metricName] = mValue);\n });\n });\n\n totals[\"leadgen\"][\"rev_or_conv_yy\"] =\n ((totals[\"leadgen\"][\"rev_or_conv\"] - totals[\"leadgen\"][\"rev_or_conv_ly\"]) / totals[\"leadgen\"][\"rev_or_conv_ly\"]) * 100;\n totals[\"leadgen\"][\"rev_or_conv_lm_yy\"] =\n ((totals[\"leadgen\"][\"rev_or_conv_lm\"] - totals[\"leadgen\"][\"rev_or_conv_lmly\"]) / totals[\"leadgen\"][\"rev_or_conv_lmly\"]) * 100;\n totals[\"ecommerce\"][\"rev_or_conv_yy\"] =\n ((totals[\"ecommerce\"][\"rev_or_conv\"] - totals[\"ecommerce\"][\"rev_or_conv_ly\"]) / totals[\"ecommerce\"][\"rev_or_conv_ly\"]) * 100;\n totals[\"ecommerce\"][\"rev_or_conv_lm_yy\"] =\n ((totals[\"ecommerce\"][\"rev_or_conv_lm\"] - totals[\"ecommerce\"][\"rev_or_conv_lmly\"]) / totals[\"ecommerce\"][\"rev_or_conv_lmly\"]) * 100;\n\n const changeTable = (table) => {\n this.setState({ activeTable: table });\n };\n return (\n <>\n \n
\n \n
\n \n {this.state.activeTable == \"ecommerce\" ? (\n \n \n
\n ) : (\n \n \n
\n )}\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Revenue\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Revenue Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Revenue Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger \";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"ecommerce\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Conversions\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Conversions Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Conversions Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"leadgen\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
\n
\n \n
\n Client Type:
\n\n {\n changeTable(\"ecommerce\");\n }}>\n Ecommerce\n \n
\n \n {\n changeTable(\"leadgen\");\n }}>\n Lead Gen\n \n
\n \n
\n \n );\n }\n}\n\nexport default PPCSummarySearch;\n","import React from \"react\";\nimport Table from \"react-bootstrap/Table\";\nimport Metric from \"utils/Metric\";\n\nclass PPCSummarySocial extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeTable: \"ecommerce\",\n };\n }\n\n render() {\n const clients = Object.keys(this.props.metrics);\n const firstKey = clients[0];\n const metrics = Object.keys(this.props.metrics[firstKey]).filter((el) => !el.includes(\"yy\"));\n const leadgenList = this.props.client_list.filter((el) => el[\"account_type\"] == \"leadgen\").map((item) => item);\n const leadgenClients = leadgenList.map((item) => item.client_name);\n const ecommerceList = this.props.client_list.filter((el) => el[\"account_type\"] == \"ecommerce\").map((item) => item);\n const ecommerceClients = ecommerceList.map((item) => item.client_name);\n let totals = {\n leadgen: {},\n ecommerce: {},\n };\n\n leadgenClients.map((client) => {\n metrics.map((metricName) => {\n let mValue = this.props.metrics[client][metricName];\n totals[\"leadgen\"][metricName] ? (totals[\"leadgen\"][metricName] += mValue) : (totals[\"leadgen\"][metricName] = mValue);\n });\n });\n\n ecommerceClients.map((client) => {\n metrics.map((metricName) => {\n let mValue = this.props.metrics[client][metricName];\n totals[\"ecommerce\"][metricName] ? (totals[\"ecommerce\"][metricName] += mValue) : (totals[\"ecommerce\"][metricName] = mValue);\n });\n });\n\n totals[\"leadgen\"][\"rev_or_conv_yy\"] =\n ((totals[\"leadgen\"][\"rev_or_conv\"] - totals[\"leadgen\"][\"rev_or_conv_ly\"]) / totals[\"leadgen\"][\"rev_or_conv_ly\"]) * 100;\n totals[\"leadgen\"][\"rev_or_conv_lm_yy\"] =\n ((totals[\"leadgen\"][\"rev_or_conv_lm\"] - totals[\"leadgen\"][\"rev_or_conv_lmly\"]) / totals[\"leadgen\"][\"rev_or_conv_lmly\"]) * 100;\n totals[\"ecommerce\"][\"rev_or_conv_yy\"] =\n ((totals[\"ecommerce\"][\"rev_or_conv\"] - totals[\"ecommerce\"][\"rev_or_conv_ly\"]) / totals[\"ecommerce\"][\"rev_or_conv_ly\"]) * 100;\n totals[\"ecommerce\"][\"rev_or_conv_lm_yy\"] =\n ((totals[\"ecommerce\"][\"rev_or_conv_lm\"] - totals[\"ecommerce\"][\"rev_or_conv_lmly\"]) / totals[\"ecommerce\"][\"rev_or_conv_lmly\"]) * 100;\n\n const changeTable = (table) => {\n this.setState({ activeTable: table });\n };\n return (\n <>\n \n
\n \n
\n \n {this.state.activeTable == \"ecommerce\" ? (\n \n \n
\n ) : (\n \n \n
\n )}\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Revenue\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Revenue Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Revenue Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger \";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"ecommerce\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Conversions\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Conversions Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Conversions Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"leadgen\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
\n
\n \n
\n Client Type:
\n\n {\n changeTable(\"ecommerce\");\n }}>\n Ecommerce\n \n
\n \n {\n changeTable(\"leadgen\");\n }}>\n Lead Gen\n \n
\n \n
\n \n );\n }\n}\n\nexport default PPCSummarySocial\n","import React from \"react\";\nimport Table from \"react-bootstrap/Table\";\nimport Metric from \"utils/Metric\";\n\nclass PPCSummaryVideo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeTable: \"ecommerce\",\n };\n }\n\n render() {\n const clients = Object.keys(this.props.metrics);\n const firstKey = clients[0];\n const metrics = Object.keys(this.props.metrics[firstKey]).filter((el) => !el.includes(\"yy\"));\n const leadgenList = this.props.client_list.filter((el) => el[\"account_type\"] == \"leadgen\").map((item) => item);\n const leadgenClients = leadgenList.map((item) => item.client_name);\n const ecommerceList = this.props.client_list.filter((el) => el[\"account_type\"] == \"ecommerce\").map((item) => item);\n const ecommerceClients = ecommerceList.map((item) => item.client_name);\n let totals = {\n leadgen: {},\n ecommerce: {},\n };\n\n leadgenClients.map((client) => {\n metrics.map((metricName) => {\n let mValue = this.props.metrics[client][metricName];\n totals[\"leadgen\"][metricName] ? (totals[\"leadgen\"][metricName] += mValue) : (totals[\"leadgen\"][metricName] = mValue);\n });\n });\n\n ecommerceClients.map((client) => {\n metrics.map((metricName) => {\n let mValue = this.props.metrics[client][metricName];\n totals[\"ecommerce\"][metricName] ? (totals[\"ecommerce\"][metricName] += mValue) : (totals[\"ecommerce\"][metricName] = mValue);\n });\n });\n\n totals[\"leadgen\"][\"rev_or_conv_yy\"] =\n ((totals[\"leadgen\"][\"rev_or_conv\"] - totals[\"leadgen\"][\"rev_or_conv_ly\"]) / totals[\"leadgen\"][\"rev_or_conv_ly\"]) * 100;\n totals[\"leadgen\"][\"rev_or_conv_lm_yy\"] =\n ((totals[\"leadgen\"][\"rev_or_conv_lm\"] - totals[\"leadgen\"][\"rev_or_conv_lmly\"]) / totals[\"leadgen\"][\"rev_or_conv_lmly\"]) * 100;\n totals[\"ecommerce\"][\"rev_or_conv_yy\"] =\n ((totals[\"ecommerce\"][\"rev_or_conv\"] - totals[\"ecommerce\"][\"rev_or_conv_ly\"]) / totals[\"ecommerce\"][\"rev_or_conv_ly\"]) * 100;\n totals[\"ecommerce\"][\"rev_or_conv_lm_yy\"] =\n ((totals[\"ecommerce\"][\"rev_or_conv_lm\"] - totals[\"ecommerce\"][\"rev_or_conv_lmly\"]) / totals[\"ecommerce\"][\"rev_or_conv_lmly\"]) * 100;\n\n const changeTable = (table) => {\n this.setState({ activeTable: table });\n };\n return (\n <>\n \n
\n \n
\n \n {this.state.activeTable == \"ecommerce\" ? (\n \n \n
\n ) : (\n \n \n
\n )}\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Revenue\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Revenue Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Revenue Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger \";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"ecommerce\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Conversions\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Conversions Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Conversions Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"leadgen\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
\n
\n \n
\n Client Type:
\n\n {\n changeTable(\"ecommerce\");\n }}>\n Ecommerce\n \n
\n \n {\n changeTable(\"leadgen\");\n }}>\n Lead Gen\n \n
\n \n
\n \n );\n }\n}\n\nexport default PPCSummaryVideo;\n","import React from \"react\";\n\nexport default function PdfKPIMetricBlock(props) {\n const goodOrBadText = props.negative ? \"text-danger\" : \"text-success\";\n const goodOrBadBg = props.negative ? \"bg-danger\" : \"bg-success\";\n return (\n \n
\n \n
\n \n {this.state.activeTable == \"ecommerce\" ? (\n \n \n
\n ) : (\n \n \n
\n )}\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Revenue\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Revenue Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Revenue Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger \";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"ecommerce\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"$\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| Client | \n {this.props.metric_list.map((metric) => {\n return (\n\n {metric.display_name == \"Revenue or Conversions\" ? \"Conversions\" :\n metric.display_name == \"Revenue or Conversions Y/Y\" ? \"Conversions Y/Y\" :\n metric.display_name == \"Revenue or Conversions Y/Y Last Month\" ? \"Conversions Y/Y Last Month\" :\n metric.display_name}\n | \n );\n })}\n
|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = this.props.metrics[client.client_name][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[\"leadgen\"][metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n if (metric.programmatic_name.includes(\"yy\")) {\n suffix = \"%\";\n precision = 0;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n suffix = value == 0 || value == Infinity || value == -Infinity ? \"\" : suffix;\n } else if (metric.programmatic_name.includes(\"rev_or_conv\")) {\n prefix = \"\";\n } else if (metric.programmatic_name.includes(\"proj_to_budget\")) {\n prefix = \"$\";\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"proj_to_kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name.includes(\"kpi_goal\")) {\n prefix = \"$\";\n precision = 2;\n } else {\n prefix = \"$\";\n }\n\n return (\n\n | \n );\n })}\n
\n
\n );\n}\n","import React from \"react\";\nimport ChartGoal from \"charts/ChartGoal\";\nimport Row from \"react-bootstrap/Row\";\nimport Col from \"react-bootstrap/Col\";\nimport Table from \"react-bootstrap/Table\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport ReactDOMServer from \"react-dom/server\";\n\nclass PdfKeywordRow extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n sortBy: \"diff\",\n sortOrderAsc: true,\n sortedKeywords: [],\n };\n }\n\n componentDidMount() {\n this.setState({ sortedKeywords: this.props.keywords });\n }\n\n render() {\n return (\n {props.metricName} (Y/Y)
\n\n {\" \"}\n
\n {props.metric}
\n {props.yy}
\n \n \n \n {this.state.sortedKeywords.map((keyword, i) => {\n let diffBackground = \"\";\n if (keyword.ranking_difference > 0) diffBackground = \"bg-success text-white\";\n else if (keyword.ranking_difference < 0) diffBackground = \"bg-danger text-white\";\n return (\n
\n
\n );\n }\n}\n\nexport default PdfKeywordRow;\n","import React, { useState, useEffect } from \"react\";\nimport Table from \"react-bootstrap/Table\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\n\nexport default function PdfKeywordTable(props) {\n const [sortBy, setSortBy] = useState(props.keyword_sort);\n const [sortOrderAsc, setSortOrderAsc] = useState(props.keyword_sort_order_asc);\n const [sortedKeywords, setSortedKeywords] = useState([]);\n const sortKeywords = (by, initial = false) => {\n let kwCopy = initial ? props.keywords : [...sortedKeywords];\n let tempSortOrder = sortOrderAsc;\n if (by == sortBy && !initial) {\n tempSortOrder = !tempSortOrder;\n kwCopy.reverse();\n } else {\n tempSortOrder = initial ? sortOrderAsc : true;\n if (by == \"keyword\") {\n kwCopy.sort((a, b) => {\n if (a.keyword.toLowerCase() < b.keyword.toLowerCase()) return -1;\n if (a.keyword.toLowerCase() > b.keyword.toLowerCase()) return 1;\n return 0;\n });\n } else if (by == \"prevpos\") {\n kwCopy.sort((a, b) => {\n if (typeof a.start_date_ranking == \"string\") a.start_date_ranking = parseFloat(a.start_date_ranking);\n if (typeof b.start_date_ranking == \"string\") b.start_date_ranking = parseFloat(b.start_date_ranking);\n\n if (a.start_date_ranking == 0) return 1;\n if (b.start_date_ranking == 0) return -1;\n if (a.start_date_ranking < b.start_date_ranking) return -1;\n if (a.start_date_ranking > b.start_date_ranking) return 1;\n return 0;\n });\n } else if (by == \"currentpos\") {\n kwCopy.sort((a, b) => {\n if (a.end_date_ranking == 0) return 1;\n if (b.end_date_ranking == 0) return -1;\n if (a.end_date_ranking < b.end_date_ranking) return -1;\n if (a.end_date_ranking > b.end_date_ranking) return 1;\n return 0;\n });\n } else if (by == \"diff\") {\n kwCopy.sort((a, b) => {\n if (a.ranking_difference < b.ranking_difference) return -1;\n if (a.ranking_difference > b.ranking_difference) return 1;\n return 0;\n });\n } else if (by == \"cpc\") {\n kwCopy.sort((a, b) => {\n if (isNaN(parseFloat(a.cpc))) return -1;\n if (isNaN(parseFloat(b.cpc))) return 1;\n if (parseFloat(a.cpc) < parseFloat(b.cpc)) return -1;\n if (parseFloat(a.cpc) > parseFloat(b.cpc)) return 1;\n return 0;\n });\n } else if (by == \"volume\") {\n kwCopy.sort((a, b) => {\n if (isNaN(parseFloat(a.volume))) return -1;\n if (isNaN(parseFloat(b.volume))) return 1;\n if (parseFloat(a.volume) < parseFloat(b.volume)) return -1;\n if (parseFloat(a.volume) > parseFloat(b.volume)) return 1;\n return 0;\n });\n } else if (by == \"difficulty\") {\n kwCopy.sort((a, b) => {\n if (isNaN(parseFloat(a.difficulty))) return -1;\n if (isNaN(parseFloat(b.difficulty))) return 1;\n if (parseFloat(a.difficulty) < parseFloat(b.difficulty)) return -1;\n if (parseFloat(a.difficulty) > parseFloat(b.difficulty)) return 1;\n return 0;\n });\n }\n if (!tempSortOrder) {\n kwCopy.reverse();\n }\n }\n\n setSortBy(by);\n setSortOrderAsc(tempSortOrder);\n setSortedKeywords(kwCopy);\n };\n useEffect(() => {\n setSortedKeywords(props.keywords);\n sortKeywords(sortBy, true);\n });\n const sortUpHtml = ;\n const sortDownHtml = ;\n return (\n | {keyword.keyword} | \n\n {keyword.serp_features.map((serp_feature) => {\n if (serp_feature == \"rel\") return ;\n if (serp_feature == \"rev\") return ;\n if (serp_feature == \"fsn\") return ;\n if (serp_feature == \"shp\") return ;\n if (serp_feature == \"stl\") return ;\n if (serp_feature == \"adt\") return ;\n if (serp_feature == \"adb\") return ;\n if (serp_feature == \"vid\") return ;\n if (serp_feature == \"img\") return ;\n if (serp_feature == \"geo\") return ;\n if (serp_feature == \"vib\") return ;\n if (serp_feature == \"new\") return ;\n if (serp_feature == \"twt\") return ;\n if (serp_feature == \"knw\") return ;\n if (serp_feature == \"kng\") return ;\n })}\n | \n{keyword.start_date_ranking == 0 ? \"100+\" : | \n {keyword.end_date_ranking == 0 ? \"100+\" : | \n \n | \n \n | \n \n | \n
\n {!props.pdf && props.user_is_employee && (\n \n )}\n\n \n \n
\n
\n );\n}\n","import React from \"react\";\nimport ChartGoal from \"charts/ChartGoal\";\nimport ChartLine from \"charts/ChartLine\";\nimport BlueIndentedSection from \"dashboards/BlueIndentedSection\";\nimport KPIMetricBlock from \"dashboards/KPIMetricBlock\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport KeywordBlock from \"dashboards/KeywordBlock\";\nimport KeywordTable from \"dashboards/KeywordTable\";\nimport MetricTable from \"MetricTable\";\nimport ServiceDisabled from \"dashboards/ServiceDisabled\";\nimport NoData from \"dashboards/NoData\";\nimport jsDig from \"utils/jsDig\";\nimport getNegative from \"utils/getNegative\";\nimport GetFormatter from \"dashboards/GetFormatter\";\nimport allMetrics from \"data/allMetrics.js\";\nimport KeywordImprovedDeclinedBlock from \"dashboards/KeywordImprovedDeclinedBlock\";\nimport DashboardSubheader from \"dashboards/DashboardSubheader\";\nimport getGoalLocked from \"utils/getGoalLocked\";\nimport dismissDataPullErrors from \"utils/dismissDataPullErrors\";\nimport { camelCase, capitalize, uniq } from \"lodash-es\";\nimport dashboardTableOrder from \"utils/dashboardTableOrder\";\nimport { Row, Col, OverlayTrigger, Tooltip } from \"react-bootstrap\";\n\nconst allMetricData = allMetrics();\n\nclass SEODashboard extends React.Component {\n constructor(props) {\n super(props);\n this.setSelectedDashboard = this.setSelectedDashboard.bind(this);\n this.state = {\n selectedDashboard: 0,\n showErrors: (jsDig([\"data_pull_errors\"], this.props.seo) && Object.keys(jsDig([\"data_pull_errors\"], this.props.seo)).length > 0 && this.props.user_is_employee) ? true : false\n };\n }\n\n pullInProgress() {\n return (\n | sortKeywords(\"keyword\")} className=\" table-row-header table-row-header-pdf seo-table-row-header\">\n Keyword \n {sortBy == \"keyword\" ? sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordSerpFeatures\"] == \"1\" &&SERP Features | }\n {props.metrics[\"metrics_data\"][\"keywordPreviousPosition\"] == \"1\" && (\nsortKeywords(\"prevpos\")} scope=\"col\">\n Prev. Pos \n {sortBy == \"prevpos\" ? sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordCurrentPosition\"] == \"1\" && (\nsortKeywords(\"currentpos\")}>\n Current Pos \n {sortBy == \"currentpos\" ? sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordDifference\"] == \"1\" && (\nsortKeywords(\"diff\")}>\n Diff \n {sortBy == \"diff\" ? sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordCostPerConversion\"] == \"1\" && (\nsortKeywords(\"cpc\")}>\n CPC \n {sortBy == \"cpc\" ? sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordSearchVolume\"] == \"1\" && (\nsortKeywords(\"volume\")}>\n Volume \n {sortBy == \"volume\" ? sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n\n {props.metrics[\"metrics_data\"][\"keywordDifficulty\"] == \"1\" && (\nsortKeywords(\"difficulty\")}>\n Difficulty \n {sortBy == \"difficulty\" ? sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n\n {props.metrics[\"metrics_data\"][\"keywordLabel\"] == \"1\" &&Label | }\n {props.metrics[\"metrics_data\"][\"keywordUrl\"] == \"1\" &&Ranking Page | }\n
|---|---|---|---|---|---|---|---|---|---|
| \n {keyword.keyword} \n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordSerpFeatures\"] == \"1\" && (\n \n \n {keyword.serp_features.map((serp_feature) => {\n if (serp_feature == \"rel\") return ;\n if (serp_feature == \"rev\") return ;\n if (serp_feature == \"fsn\") return ;\n if (serp_feature == \"shp\") return ;\n if (serp_feature == \"stl\") return ;\n if (serp_feature == \"adt\") return ;\n if (serp_feature == \"adb\") return ;\n if (serp_feature == \"vid\") return ;\n if (serp_feature == \"img\") return ;\n if (serp_feature == \"geo\") return ;\n if (serp_feature == \"vib\") return ;\n if (serp_feature == \"new\") return ;\n if (serp_feature == \"twt\") return ;\n if (serp_feature == \"knw\") return ;\n if (serp_feature == \"kng\") return ;\n })}\n \n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordPreviousPosition\"] == \"1\" && (\n \n \n {keyword.start_date_ranking == 0 ? \"100+\" : \n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordCurrentPosition\"] == \"1\" && (\n \n \n {keyword.end_date_ranking == 0 ? \"100+\" : \n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordDifference\"] == \"1\" && (\n \n \n \n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordCostPerConversion\"] == \"1\" && (\n \n \n \n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordSearchVolume\"] == \"1\" && (\n \n \n \n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordDifficulty\"] == \"1\" && (\n \n \n \n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordLabel\"] == \"1\" && (\n \n \n {keyword.tag &&\n keyword.tag.map((el, index) => {\n let string = el;\n if (index < keyword.tag.length - 1) string += \", \";\n return string;\n })}\n \n | \n )}\n {props.metrics[\"metrics_data\"][\"keywordUrl\"] == \"1\" && (\n \n {keyword.ranking_page} \n | \n )}\n
\n
\n );\n }\n\n recalcInProgress() {\n return (\n \n
\n \n \n
\n \n \n A data pull is in progress.\n
\n \n {\n location.reload();\n }}>\n {\" \"}\n refresh \n \n the page.\n
\n This page is not available while the data pull is in progress.
\n Please check back later or\n\n
\n );\n };\n\n displayErrors() {\n return (\n \n
\n \n \n
\n \n \n Data is being recalculated.\n
\n \n {\n location.reload();\n }}>\n {\" \"}\n refresh \n \n the page.\n
\n Your data pull has completed but data is recalculating
\n Please be patient {this.props.user ? this.props.user.first_name : \"my guy\"} and check back later or\n\n
\n )\n }\n\n generateDashboardSection(section, cc_data, dashboard) {\n const metricData = allMetricData[\"metricData\"];\n let date = this.props.date ? moment(this.props.date) : moment();\n let month = date.format(\"MMM\");\n let year = date.year();\n if (section.metrics_data) {\n const renderArray = dashboardTableOrder(\"seo\", Object.keys(section.metrics_data));\n switch (section.name) {\n case \"goalsAndProjections\":\n let goals = this.props.seo.goals;\n return (\n <>\n \n
\n \n There were errors on the last data pull\n
\n \n {this.props.seo.data_pull_errors && Object.keys(this.props.seo.data_pull_errors).map((platform) => {\n const errorCounts = this.props.seo.data_pull_errors[platform].reduce((map, val) => { map[val] = (map[val] || 0) + 1; return map }, {});\n return (\n \n \n )\n })}\n
\n \n
\n {capitalize(platform)}:
\n- \n {uniq(this.props.seo.data_pull_errors[platform]).map((errorMessage, index) => {\n const length = errorCounts[errorMessage];\n return (\n
- - {length > 1 ? `(${length}x) ` : ' '}{errorMessage} \n )\n })}\n
\n {\n dismissDataPullErrors(jsDig([\"id\"], this.props.seo), \"seo\")\n $(e.target).closest('.spin-shell').fadeOut();\n setTimeout(() => {\n this.setState({ showErrors: false })\n }, 1000)\n }}>\n Dismiss\n \n {\n dismissDataPullErrors(jsDig([\"id\"], this.props.seo), \"seo\")\n }}>\n Go to configs\n \n
\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n\n return (\n <>\n {metricKey == \"average_position\" ? (\n \n
\n \n );\n case \"landingPageBreakdown\":\n const groupOrder = this.props.seo.landing_page_group_order ? this.props.seo.landing_page_group_order : [];\n return (\n <>\n {groupOrder.map((group_id, index) => {\n let metricTitles = [];\n const landingPageGroup = this.props.seo.landing_page_groups.find((group) => group.id == group_id);\n return (\n \n Average Position is the monthly average of all your rankings for the keywords in your campaign. For any keyword where you\n aren’t ranking, it will be calculated as a ranking of 100.{\" \"}\n
\n \n }>\n \n
\n \n ) : (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{landingPageGroup.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n // metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return ;\n } else {\n metricTitles.push(metricKey);\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n\n return (\n
\n );\n case \"keywordGroups\":\n const keywordGroupOrder = this.props.seo.keyword_groups_order ? this.props.seo.keyword_groups_order : [];\n return (\n <>\n {keywordGroupOrder.map((group_id, index) => {\n // let metricTitles = jsDig([group_id, \"metrics_2_years\"], this.props.seo) ? Object.keys(jsDig([group_id, \"metrics_2_years\"], cc_data)) : [];\n const keywordGroup = this.props.seo.keyword_groups.find((group) => group.id == group_id);\n console.log(keywordGroup)\n let metricTitle = this.props.seo.keyword_groups.map((group) => group.name)[index];\n let metricTitles = [];\n metricTitles.push(metricTitle);\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n \n
\n
\n );\n })}\n \n );\n case \"keywordSummary\":\n return (\n <>\n {keywordGroup ? keywordGroup.name : \"\"}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n if (jsDig([0, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for landing page group {group_id}\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n }\n setSelectedDashboard(id) {\n this.setState({ selectedDashboard: id });\n }\n\n render() {\n const dashboard = this.state.selectedDashboard;\n let cc_data = this.props.cc_data;\n\n const dashboards = [{ name: \"SEO: Overall\", id: 0 }, ...this.props.seo.landing_page_groups.map((group) => ({ name: group.name, id: group.id }))];\n const sectionList = jsDig([\"metricsByDashboard\", \"seo\", \"sections\"], allMetricData);\n const defaultMetrics = jsDig([\"metricsByDashboard\", \"seo\", \"defaults\", this.props.client_type], allMetricData);\n let dashboardsEnable = false;\n const seoPulling =\n (jsDig([\"data_pull_status\", \"google_data_pull\"], this.props.seo) && jsDig([\"data_pull_status\", \"google_data_pull\"], this.props.seo).length > 0) ||\n (jsDig([\"data_pull_status\", \"search_console_data_pull\"], this.props.seo) && jsDig([\"data_pull_status\", \"search_console_data_pull\"], this.props.seo).length > 0) ||\n (jsDig([\"data_pull_status\", \"semrush_data_pull\"], this.props.seo) && jsDig([\"data_pull_status\", \"semrush_data_pull\"], this.props.seo).length > 0);\n\n const seoRecalculating = (jsDig([\"data_pull_status\", \"recalculation\"], this.props.seo) && jsDig([\"data_pull_status\", \"recalculation\"], this.props.seo).length > 0)\n\n let dashboardOrder =\n jsDig([dashboard], this.props.seo.dashboard_order) && jsDig([dashboard], this.props.seo.dashboard_order).length > 0\n ? jsDig([dashboard], this.props.seo.dashboard_order)\n : Object.keys(sectionList).map((sectionName) => {\n return {\n name: sectionName,\n enabled: true,\n metrics_data: Object.keys(defaultMetrics[sectionName]).reduce((sum, item) => {\n sum[item] = \"1\";\n return sum;\n }, {}),\n };\n });\n\n if (this.props.enabled) {\n if (jsDig([this.state.selectedDashboard, \"date\"], cc_data)) {\n return (\n <>\nYou have not enabled any sections for this dashboard yet. Click the configure dashboard button above to set up your dashboard.
\n ) : (\nNo sections of this dashboard are currently enabled. Please contact your account representatives if you would like to this view.
\n ))}\n \n )}\n \n );\n } else {\n return (\n <>\n\n
\n \n
\n Client Type:
\n\n {\n changeTable(\"ecommerce\");\n }}>\n Ecommerce\n \n
\n \n {\n changeTable(\"leadgen\");\n }}>\n Lead Gen\n \n
\n \n
\n \n );\n }\n}\n\nexport default SEOSummary;\n","import React from 'react';\n\nclass ServiceDisabled extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n let topText = \"\", leftBullets = \"\", rightBullets = \"\", indentClass = \"styled-indent-blue\", btnClass = \"btn-info\";\n switch(this.props.service) {\n case \"seo\":\n indentClass = \"styled-indent-green\";\n btnClass = \"btn-success\";\n topText = \"You aren't currently signed up for SEO, but we can change that!\";\n leftBullets = [\n \"Increased SEO Revenue 105% in the past year for our clients.\",\n \"We have clients ranking #3 for \\\"running shoes \\\", #1 for \\\"vaporizers\\\", #2 for \\\"jump rope\\\", #1 for \\\"christmas ornaments\\\", and more!\",\n \"Get the same level of service you've come to expect from the same team. Less agencies to manage!\",\n \"Staff of veterans with many years of experience who have scaled accounts for reputable brands.\"\n ];\n rightBullets = [\n \"SEO consulting (we'll tell you exactly what to do)\",\n \"Full service execution (content writing, light development, on-page optimizations)\",\n \"Keyword tracking & management\",\n \"Reporting\"\n ];\n break;\n case \"overall\":\n topText = \"You aren't currently signed up for PPC, but we can change that!\";\n leftBullets = [\n \"Increased PPC Revenue 105% in the past year for our clients.\",\n \"Get the same level of service you've come to expect from the same team. Less agencies to manage!\",\n \"Staff of veterans with many years of experience who have scaled accounts for reputable brands.\"\n ];\n rightBullets = [\n \"Ads managed primarily through Google Ads and Microsoft Ads\",\n \"Full service management (structure, bids, ad copy, etc.)\",\n \"Regular communication\",\n \"Reporting\"\n ];\n break;\n case \"search\":\n topText = \"You aren't currently signed up for paid search, but we can change that!\";\n leftBullets = [\n \"Increased PPC Revenue 105% in the past year for our clients.\",\n \"Get the same level of service you've come to expect from the same team. Less agencies to manage!\",\n \"Staff of veterans with many years of experience who have scaled accounts for reputable brands.\"\n ];\n rightBullets = [\n \"Ads managed through Google Ads and Microsoft Ads\",\n \"Full service management (structure, bids, ad copy, etc.)\",\n \"Regular communication\",\n \"Reporting\"\n ];\n break;\n case \"social\":\n topText = \"You aren't currently signed up for paid social, but we can change that!\";\n leftBullets = [\n \"Increased PPC Revenue 105% in the past year for our clients.\",\n \"Get the same level of service you've come to expect from the same team. Less agencies to manage!\",\n \"Staff of veterans with many years of experience who have scaled accounts for reputable brands.\"\n ];\n rightBullets = [\n \"Ads managed through Facebook Ads\",\n \"Account structure management\",\n \"Budget & bidding management\",\n \"Regular communication\",\n \"Reporting\",\n <>Creative needs to be supplied by client\n ];\n break;\n case \"display\":\n topText = \"You aren't currently signed up for display ads, but we can change that!\";\n leftBullets = [\n \"Increased PPC Revenue 105% in the past year for our clients.\",\n \"Get the same level of service you've come to expect from the same team. Less agencies to manage!\",\n \"Staff of veterans with many years of experience who have scaled accounts for reputable brands.\"\n ];\n rightBullets = [\n \"Ads managed through Google Ads\",\n \"Account structure management\",\n \"Budget & bidding management\",\n \"Regular communication\",\n \"Reporting\",\n \"Brand lift studies and a true understanding of value for display\",\n <>Creative needs to be supplied by client\n ];\n break;\n case \"video\":\n topText = \"You aren't currently signed up for video ads, but we can change that!\";\n leftBullets = [\n \"Increased PPC Revenue 105% in the past year for our clients.\",\n \"Get the same level of service you've come to expect from the same team. Less agencies to manage!\",\n \"Staff of veterans with many years of experience who have scaled accounts for reputable brands.\"\n ];\n rightBullets = [\n \"Ads managed through Google Ads (Youtube)\",\n \"Account structure management\",\n \"Budget & bidding management\",\n \"Regular communication\",\n \"Reporting\",\n \"Brand lift studies and a true understanding of value for video\",\n <>Creative needs to be supplied by client\n ];\n break;\n }\n if (this.props.organizationName === \"Digital Position\") {\n if (!this.props.userIsEmployee) {\n return (\n \n
\n \n
\n \n {this.state.activeTable == \"ecommerce\" ? (\n \n \n
\n ) : (\n \n \n
\n )}\n
\n | \n Client\n | \n\n Revenue {this.props.this_month} MTD \n | \n \n Revenue {this.props.this_month} Y/Y \n | \n \n Organic Traffic {this.props.this_month} MTD \n | \n \n Organic Traffic {this.props.this_month} Projected Y/Y \n | \n
|---|---|---|---|---|
| \n {[1, 2, 3, 4].map((index) => {\n return (\n | \n {this.props.date.substring(0, 4)}\n | \n\n {parseInt(this.props.date.substring(0, 4)) - 1}\n | \n\n Y/Y\n | \n|
| \n {clientName}\n | \n {[\n \"revenue_mtd\",\n \"revenue_mtd_last_year\",\n \"revenue_mtd_yy\",\n \"revenue_this_month_projected\",\n \"revenue_this_month_last_year\",\n \"revenue_this_month_yy\",\n \"traffic_mtd\",\n \"traffic_mtd_last_year\",\n \"traffic_mtd_yy\",\n \"traffic_this_month_projected\",\n \"traffic_this_month_last_year\",\n \"traffic_this_month_yy\",\n ].map((metricName) => {\n let className = \"\";\n let value = this.props.metrics[clientName][metricName];\n if (metricName.includes(\"yy\")) {\n if (value > 0) {\n className = \"bg-success text-white font-weight-bold\";\n } else if (value < 0) {\n className = \"bg-danger text-white font-weight-bold\";\n }\n }\n return (\n\n {value != 0 ? (\n metricName.includes(\"yy\") ? (\n | \n );\n })}\n |||
| \n TOTALS\n | \n {[\n \"revenue_mtd\",\n \"revenue_mtd_last_year\",\n \"revenue_mtd_yy\",\n \"revenue_this_month_projected\",\n \"revenue_this_month_last_year\",\n \"revenue_this_month_yy\",\n \"traffic_mtd\",\n \"traffic_mtd_last_year\",\n \"traffic_mtd_yy\",\n \"traffic_this_month_projected\",\n \"traffic_this_month_last_year\",\n \"traffic_this_month_yy\",\n ].map((metricName) => {\n let className = \"\";\n let value = totals[\"ecommerce\"][metricName];\n if (metricName.includes(\"yy\")) {\n if (value > 0) {\n className = \"bg-success text-white font-weight-bold\";\n } else if (value < 0) {\n className = \"bg-danger text-white font-weight-bold\";\n }\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n }\n return (\n\n {value != 0 ? (\n metricName.includes(\"yy\") ? (\n | \n );\n })}\n
| \n Client\n | \n\n Conversions {this.props.this_month} MTD \n | \n \n Conversions {this.props.this_month} Y/Y \n | \n \n Organic Traffic {this.props.this_month} MTD \n | \n \n Organic Traffic {this.props.this_month} Projected Y/Y \n | \n
|---|---|---|---|---|
| \n {[1, 2, 3, 4].map((index) => {\n return (\n | \n {this.props.date.substring(0, 4)}\n | \n\n {parseInt(this.props.date.substring(0, 4)) - 1}\n | \n\n Y/Y\n | \n|
| \n {clientName}\n | \n {[\n \"revenue_mtd\",\n \"revenue_mtd_last_year\",\n \"revenue_mtd_yy\",\n \"revenue_this_month_projected\",\n \"revenue_this_month_last_year\",\n \"revenue_this_month_yy\",\n \"traffic_mtd\",\n \"traffic_mtd_last_year\",\n \"traffic_mtd_yy\",\n \"traffic_this_month_projected\",\n \"traffic_this_month_last_year\",\n \"traffic_this_month_yy\",\n ].map((metricName) => {\n let className = \"\";\n let value = this.props.metrics[clientName][metricName];\n if (metricName.includes(\"yy\")) {\n if (value > 0) {\n className = \"bg-success text-white font-weight-bold\";\n } else if (value < 0) {\n className = \"bg-danger text-white font-weight-bold\";\n }\n }\n return (\n\n {value != 0 ? (\n metricName.includes(\"yy\") ? (\n | \n );\n })}\n |||
| \n TOTALS\n | \n {[\n \"revenue_mtd\",\n \"revenue_mtd_last_year\",\n \"revenue_mtd_yy\",\n \"revenue_this_month_projected\",\n \"revenue_this_month_last_year\",\n \"revenue_this_month_yy\",\n \"traffic_mtd\",\n \"traffic_mtd_last_year\",\n \"traffic_mtd_yy\",\n \"traffic_this_month_projected\",\n \"traffic_this_month_last_year\",\n \"traffic_this_month_yy\",\n ].map((metricName) => {\n let className = \"\";\n let value = totals[\"leadgen\"][metricName];\n if (metricName.includes(\"yy\")) {\n if (value > 0) {\n className = \"bg-success text-white font-weight-bold\";\n } else if (value < 0) {\n className = \"bg-danger text-white font-weight-bold\";\n }\n className = value == 0 || value == Infinity || value == -Infinity ? \"\" : className;\n }\n return (\n\n {value != 0 ? (\n metricName.includes(\"yy\") ? (\n | \n );\n })}\n
\n
\n )\n } else {\n let serviceName = \"\";\n switch(this.props.service) {\n case \"seo\":\n serviceName = \"SEO\";\n break;\n case \"overall\":\n serviceName = \"PPC\";\n break;\n case \"search\":\n serviceName = \"Search\";\n break;\n case \"social\":\n serviceName = \"Social\";\n break;\n case \"display\":\n serviceName = \"Display\";\n break;\n case \"video\":\n serviceName = \"Video\";\n break;\n }\n return (\n \n
\n \n
\n \n
\n {topText}
\nReach out to your team and we'll be happy to point you in the right direction!
\n See My Team\n\n
\n \n
\n Why sign up?
\n- \n {\n leftBullets.map((bullet, index) => {\n return(\n
- {bullet} \n )\n })\n }\n
\n
\n What you'll get:
\n- \n {\n rightBullets.map((bullet, index) => {\n return(\n
- {bullet} \n )\n })\n }\n
\n
\n )\n }\n } else {\n let serviceName = \"\";\n switch(this.props.service) {\n case \"seo\":\n serviceName = \"SEO\";\n break;\n case \"overall\":\n serviceName = \"PPC\";\n break;\n case \"search\":\n serviceName = \"Search\";\n break;\n case \"social\":\n serviceName = \"Social\";\n break;\n case \"display\":\n serviceName = \"Display\";\n break;\n case \"video\":\n serviceName = \"Video\";\n break;\n }\n return (\n \n
\n \n
\n \n
\n This client doesn't have {serviceName} enabled.
\nIf you'd like to enable it, please change their configuration settings.
\n Account Configuration\n\n
\n )\n }\n }\n\n}\n\nexport default ServiceDisabled;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { Button, Col, Row, Form, Container } from \"react-bootstrap\";\nimport jsDig from \"utils/jsDig\";\nimport LiteMetricTable from \"dashboards/lite/LiteMetricTable\";\nimport LiteLineChart from \"dashboards/lite/LiteLineChart\";\nimport LiteRefresh from \"dashboards/lite/LiteRefresh\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { capitalize } from \"lodash-es\";\n\nexport default function AmazonDashboard(props) {\n console.log(props)\n const metricTableDimensions = jsDig([\"overall\", \"total\", \"spend\"], props.table_data) ? Object.keys(jsDig([\"overall\", \"total\", \"spend\"], props.table_data)) : [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", \"Total\", \"YTD\"];\n // Convert utc date to local time in this format 12:30 PM, 12/31/2021\n const lastDataPull = new Date(jsDig([\"last_data_pull\"], props)).toLocaleString(\"en-US\", {\n hour: \"numeric\",\n minute: \"numeric\",\n hour12: true,\n month: \"numeric\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n const thisYear = new Date().getFullYear();\n const lastYear = thisYear - 1;\n\n return (\n <>\n \n
\n \n
\n \n
\n This client doesn't have {serviceName} enabled.
\nIf you'd like to enable it, please reach out to your account manager.
\n\n\n
\n \n );\n}\n","import React from \"react\";\nimport Table from \"react-bootstrap/Table\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\n\n// All possible metrics to use: [\"keywordName\", \"keywordPreviousPosition\", \"keywordCurrentPosition\", \"keywordSearchVolume\", \"keywordDifficulty\", \"keywordUrl\", \"keywordSerpFeatures\", \"keywordLabel\", \"keywordCostPerConversion\", \"keywordDifference\"]\n\nclass LiteKeywordTable extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n sortBy: props.keyword_sort,\n sortOrderAsc: props.keyword_sort_order_asc,\n sortedKeywords: [],\n };\n }\n\n sortKeywords(by, initial = false) {\n let kwCopy = this.props.keywords === null ? [...this.state.sortedKeywords] : initial ? this.props.keywords : [...this.state.sortedKeywords];\n let tempSortOrder = this.state.sortOrderAsc;\n if (by == this.state.sortBy && !initial) {\n tempSortOrder = !tempSortOrder;\n kwCopy.reverse();\n } else {\n tempSortOrder = initial ? this.state.sortOrderAsc : true;\n if (by == \"keyword\") {\n kwCopy.sort((a, b) => {\n if (a.keyword.toLowerCase() < b.keyword.toLowerCase()) return -1;\n if (a.keyword.toLowerCase() > b.keyword.toLowerCase()) return 1;\n return 0;\n });\n } else if (by == \"prevpos\") {\n kwCopy.sort((a, b) => {\n if (typeof a.start_date_ranking == \"string\") a.start_date_ranking = parseFloat(a.start_date_ranking);\n if (typeof b.start_date_ranking == \"string\") b.start_date_ranking = parseFloat(b.start_date_ranking);\n\n if (a.start_date_ranking == 0) return 1;\n if (b.start_date_ranking == 0) return -1;\n if (a.start_date_ranking < b.start_date_ranking) return -1;\n if (a.start_date_ranking > b.start_date_ranking) return 1;\n return 0;\n });\n } else if (by == \"currentpos\") {\n kwCopy.sort((a, b) => {\n if (a.end_date_ranking == 0) return 1;\n if (b.end_date_ranking == 0) return -1;\n if (a.end_date_ranking < b.end_date_ranking) return -1;\n if (a.end_date_ranking > b.end_date_ranking) return 1;\n return 0;\n });\n } else if (by == \"diff\") {\n kwCopy.sort((a, b) => {\n if (a.ranking_difference < b.ranking_difference) return -1;\n if (a.ranking_difference > b.ranking_difference) return 1;\n return 0;\n });\n } else if (by == \"cpc\") {\n kwCopy.sort((a, b) => {\n if (isNaN(parseFloat(a.cpc))) return -1;\n if (isNaN(parseFloat(b.cpc))) return 1;\n if (parseFloat(a.cpc) < parseFloat(b.cpc)) return -1;\n if (parseFloat(a.cpc) > parseFloat(b.cpc)) return 1;\n return 0;\n });\n } else if (by == \"volume\") {\n kwCopy.sort((a, b) => {\n if (isNaN(parseFloat(a.volume))) return -1;\n if (isNaN(parseFloat(b.volume))) return 1;\n if (parseFloat(a.volume) < parseFloat(b.volume)) return -1;\n if (parseFloat(a.volume) > parseFloat(b.volume)) return 1;\n return 0;\n });\n } else if (by == \"difficulty\") {\n kwCopy.sort((a, b) => {\n if (isNaN(parseFloat(a.difficulty))) return -1;\n if (isNaN(parseFloat(b.difficulty))) return 1;\n if (parseFloat(a.difficulty) < parseFloat(b.difficulty)) return -1;\n if (parseFloat(a.difficulty) > parseFloat(b.difficulty)) return 1;\n return 0;\n });\n }\n if (!tempSortOrder) {\n kwCopy.reverse();\n }\n }\n\n this.setState({ sortBy: by, sortOrderAsc: tempSortOrder, sortedKeywords: kwCopy });\n }\n componentDidMount() {\n this.setState({ sortedKeywords: this.props.keywords });\n this.sortKeywords(this.state.sortBy, true);\n }\n render() {\n const sortUpHtml = ;\n const sortDownHtml = ;\n return (\n \n
\n \n Last refresh: {props.last_data_pull ? lastDataPull : \"Never\"}\n
\n \n
\n \n
\n Creative Links
\n\n
\n Amazon Dashboard
\n\n
\n LOGO
\n\n
\n \n
\n\n \n
\n Total Revenue L60D
\n\n
\n Total ROAS L60D
\n\n
\n\n \n
\n Ad Spend L60D
\n\n
\n Ad Revenue L60D
\n\n
\n Conversion Rate L60D
\n\n
\n\n \n
\n \n
\n Paid Sessions L60D
\n\n
\n \n
\n \n
\n );\n }\n}\n\nexport default LiteKeywordTable;\n","import React from 'react';\nimport {\n Chart as ChartJS,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n Title,\n Tooltip,\n Legend,\n} from 'chart.js';\nimport { Line } from 'react-chartjs-2';\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n Title,\n Tooltip,\n Legend\n);\n\nimport jsDig from 'utils/jsDig';\n\nexport default function LiteLineChart(props) {\n console.log(props)\n const options = {\n responsive: true,\n plugins: {\n legend: {\n position: 'bottom',\n labels: { \n padding: 20,\n font: {size: 16, family: 'nunito-regular'}\n }\n },\n title: {\n display: false,\n },\n },\n scales: {\n x: {\n ticks: {\n maxTicksLimit: 5,\n maxRotation: 0,\n autoSkip: true,\n font: {size: 14, family: 'nunito-regular'},\n },\n grid: {\n display: true,\n },\n },\n y: {\n ticks: {\n font: {size: 16, family: 'nunito-regular'}\n },\n grid: {\n drawBorder: false,\n },\n },\n },\n };\n \n const labels = props.labels\n \n let data = {\n labels,\n datasets: [],\n };\n\n props.datasetNames && props.datasetNames.forEach((name, index) => {\n let color = \"\";\n if (index == 0) {\n color = \"rgba(33,35,72,1)\";\n } else if (index == 1 && props.datasetNames.length == 2) {\n color = \"rgba(140,140,140,1)\";\n } else if (index == 1 && props.datasetNames.length > 2) {\n color = \"rgba(50,145,193,1)\";\n } else if (index == 2) {\n color = \"#F0F3BD\";\n } else if (index == 3) {\n color = \"#F2CD5D\";\n } else if (index == 4) {\n color = \"#AEF3E7\";\n } else if (index == 5) {\n color = \"#69EBD0\";\n } else if (index == 6) {\n color = \"#FFD23F\";\n } else {\n color = \"rgba(140,140,140,1)\";\n }\n data.datasets.push({\n label: name,\n data: labels.map((day, index) => jsDig([name, index], props.data)),\n borderColor: color,\n backgroundColor: color,\n });\n });\n\n return (\n \n \n \n
\n
\n | this.sortKeywords(\"keyword\")}>\n Keyword \n {this.state.sortBy == \"keyword\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics.includes(\"keywordSerpFeatures\") &&SERP Features | }\n {this.props.metrics.includes(\"keywordPreviousPosition\") && (\nthis.sortKeywords(\"prevpos\")}>\n Prev. Pos \n {this.state.sortBy == \"prevpos\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics.includes(\"keywordCurrentPosition\") && (\nthis.sortKeywords(\"currentpos\")}>\n Current Pos \n {this.state.sortBy == \"currentpos\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics.includes(\"keywordDifference\") && (\nthis.sortKeywords(\"diff\")}>\n Diff \n {this.state.sortBy == \"diff\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics.includes(\"keywordCostPerConversion\") && (\nthis.sortKeywords(\"cpc\")}>\n CPC \n {this.state.sortBy == \"cpc\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n {this.props.metrics.includes(\"keywordSearchVolume\") && (\nthis.sortKeywords(\"volume\")}>\n Volume \n {this.state.sortBy == \"volume\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n\n {this.props.metrics.includes(\"keywordDifficulty\") && (\nthis.sortKeywords(\"difficulty\")}>\n Difficulty \n {this.state.sortBy == \"difficulty\" ? this.state.sortOrderAsc ? sortUpHtml : sortDownHtml : <>}\n | \n )}\n\n {this.props.metrics.includes(\"keywordLabel\") &&Label | }\n {this.props.metrics.includes(\"keywordUrl\") &&Ranking Page | }\n
|---|---|---|---|---|---|---|---|---|---|
| \n {keyword.keyword} \n | \n )}\n {this.props.metrics.includes(\"keywordSerpFeatures\") && (\n \n \n {keyword.serp_features.map((serp_feature) => {\n if (serp_feature == \"rel\") return ;\n if (serp_feature == \"rev\") return ;\n if (serp_feature == \"fsn\") return ;\n if (serp_feature == \"shp\") return ;\n if (serp_feature == \"stl\") return ;\n if (serp_feature == \"adt\") return ;\n if (serp_feature == \"adb\") return ;\n if (serp_feature == \"vid\") return ;\n if (serp_feature == \"img\") return ;\n if (serp_feature == \"geo\") return ;\n if (serp_feature == \"vib\") return ;\n if (serp_feature == \"new\") return ;\n if (serp_feature == \"twt\") return ;\n if (serp_feature == \"knw\") return ;\n if (serp_feature == \"kng\") return ;\n })}\n \n | \n )}\n {this.props.metrics.includes(\"keywordPreviousPosition\") && (\n \n \n {keyword.start_date_ranking == 0 ? \"100+\" : \n | \n )}\n {this.props.metrics.includes(\"keywordCurrentPosition\") && (\n \n \n {keyword.end_date_ranking == 0 ? \"100+\" : \n | \n )}\n {this.props.metrics.includes(\"keywordDifference\") && (\n \n \n \n | \n )}\n {this.props.metrics.includes(\"keywordCostPerConversion\") && (\n \n \n \n | \n )}\n {this.props.metrics.includes(\"keywordSearchVolume\") && (\n \n \n \n | \n )}\n {this.props.metrics.includes(\"keywordDifficulty\") && (\n \n \n \n | \n )}\n {this.props.metrics.includes(\"keywordLabel\") && (\n \n \n {keyword.tag &&\n keyword.tag.map((el, index) => {\n let string = el;\n if (index < keyword.tag.length - 1) string += \", \";\n return string;\n })}\n \n | \n )}\n {this.props.metrics.includes(\"keywordUrl\") && (\n \n {keyword.ranking_page} \n | \n )}\n
\n
\n )\n}","import React, { useState } from \"react\";\nimport { startCase, toLower } from \"lodash\";\nimport jsDig from \"utils/jsDig\";\nimport { Button, Menu, MenuItem } from \"@material-ui/core\";\n\nexport default function LiteMetricTable(props) {\n console.log(props)\n const [showDropdown, setShowDropdown] = useState(false);\n const [selectedGroup, setSelectedGroup] = useState(props.groups && props.groups.length > 0 ? props.groups[0] : null);\n\n const toggleDropdown = () => setShowDropdown(!showDropdown);\n const selectGroup = (group) => {\n setSelectedGroup(group);\n setShowDropdown(false);\n };\n\n const baseUrl = props.baseUrl ? props.baseUrl.replace(/\\/$/, \"\") : null;\n\n const renderGroupSelector = () => {\n if (!props.groups || props.groups.length === 0) {\n return null;\n }\n\n return (\n \n \n {showDropdown && (\n
\n );\n };\n\n const renderTableHeader = () => {\n return (\n <>\n \n {props.groups.map((group) => (\n
\n )}\n selectGroup(group)}>\n {group}\n
\n ))}\n | \n {props.tableName}\n | \n
|---|
\n
\n )}\n {dataPullComplete && (\n // Show a message and a juicy green check mark\n Refreshing data...
\n Total Jobs: {totalQueries}
\n Data pull complete!
\n )}\n \n setShowMenu(!showMenu)}\n disabled={loading}\n >\n {loading ? (\n 
\n ) : (\n // Assuming you're using Font Awesome for icons\n )}\n \n \n {showMenu && (\n
\n \n );\n};\n\nexport default LiteRefresh;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { Button, Col, Row, Form, Container } from \"react-bootstrap\";\nimport jsDig from \"utils/jsDig\";\nimport LiteMetricTable from \"dashboards/lite/LiteMetricTable\";\nimport LiteLineChart from \"dashboards/lite/LiteLineChart\";\nimport LiteRefresh from \"dashboards/lite/LiteRefresh\";\nimport LiteKeywordTable from \"dashboards/lite/LiteKeywordTable\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { capitalize } from \"lodash-es\";\n\nexport default function OrganicSearchDashboard(props) {\n console.log(props)\n const metricTableDimensions = jsDig([\"overall\", \"total\", \"spend\"], props.table_data) ? Object.keys(jsDig([\"overall\", \"total\", \"spend\"], props.table_data)) : [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", \"Total\", \"YTD\"];\n // Convert utc date to local time in this format 12:30 PM, 12/31/2021\n const lastDataPull = new Date(jsDig([\"last_data_pull\"], props)).toLocaleString(\"en-US\", {\n hour: \"numeric\",\n minute: \"numeric\",\n hour12: true,\n month: \"numeric\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n const thisYear = new Date().getFullYear();\n const lastYear = thisYear - 1;\n\n return (\n <>\n \n {currentDashboard == \"overview\" && (\n
\n )}\n \n setPullOnlyShopify(!pullOnlyShopify)} />\n \n
\n )}\n handleRefresh('currentMonth')}>Refresh Current Month
\n handleRefresh('last60Days')}>Last 60 Days
\n handleRefresh('wholeDashboard')}>Refresh Whole Dashboard
\n \n
\n \n );\n}\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { Button, Col, Row, Form, Container } from \"react-bootstrap\";\nimport jsDig from \"utils/jsDig\";\nimport LiteMetricTable from \"dashboards/lite/LiteMetricTable\";\nimport LiteLineChart from \"dashboards/lite/LiteLineChart\";\nimport LiteRefresh from \"dashboards/lite/LiteRefresh\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { capitalize } from \"lodash-es\";\n\nexport default function OrganicSocialDashboard(props) {\n console.log(props)\n const metricTableDimensions = jsDig([\"overall\", \"sessions\"], props.table_data) ? Object.keys(jsDig([\"overall\", \"sessions\"], props.table_data)) : [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", \"Total\", \"YTD\"];\n // Convert utc date to local time in this format 12:30 PM, 12/31/2021\n const lastDataPull = new Date(jsDig([\"last_data_pull\"], props)).toLocaleString(\"en-US\", {\n hour: \"numeric\",\n minute: \"numeric\",\n hour12: true,\n month: \"numeric\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n const thisYear = new Date().getFullYear();\n const lastYear = thisYear - 1;\n\n return (\n <>\n \n
\n \n Last refresh: {props.last_data_pull ? lastDataPull : \"Never\"}\n
\n \n
\n\n \n
\n Creative Links
\n\n
\n Organic Search Dashboard
\n\n
\n LOGO
\n\n
\n\n \n
\n\n \n
\n Organic Traffic L60D
\n\n
\n Organic Revenue L60D
\n\n
\n\n \n
\n \n
\n \n
\n\n \n
\n Organic Shopping Traffic L60D
\n\n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n );\n}\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { Button, Col, Row, Form, Container } from \"react-bootstrap\";\nimport jsDig from \"utils/jsDig\";\nimport LiteMetricTable from \"dashboards/lite/LiteMetricTable\";\nimport LiteLineChart from \"dashboards/lite/LiteLineChart\";\nimport LiteRefresh from \"dashboards/lite/LiteRefresh\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { capitalize } from \"lodash-es\";\n\nexport default function OtherDashboard(props) {\n console.log(props)\n const metricTableDimensions = jsDig([\"overall\", \"sessions\", \"direct\"], props.table_data) ? Object.keys(jsDig([\"overall\", \"sessions\", \"direct\"], props.table_data)) : [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", \"Total\", \"YTD\"];\n // Convert utc date to local time in this format 12:30 PM, 12/31/2021\n const lastDataPull = new Date(jsDig([\"last_data_pull\"], props)).toLocaleString(\"en-US\", {\n hour: \"numeric\",\n minute: \"numeric\",\n hour12: true,\n month: \"numeric\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n const thisYear = new Date().getFullYear();\n const lastYear = thisYear - 1;\n\n return (\n <>\n \n
\n \n Last refresh: {props.last_data_pull ? lastDataPull : \"Never\"}\n
\n \n
\n \n
\n Creative Links
\n\n
\n Organic Social Dashboard
\n\n
\n LOGO
\n\n
\n \n
\n\n \n
\n Organic Social Traffic L60D
\n\n
\n Organic Social Revenue L60D
\n\n
\n Organic Social Traffic By Source L60D
\n\n
\n\n \n
\n Followers (vs. last week)
\n\n
\n \n Facebook
\n 0\n
\n \n
\n\n \n
\n \n
\n Total Followers L60D
\n\n
\n\n \n
\n Views L60D
\n\n
\n Likes L60D
\n\n
\n Comments L60D
\n\n
\n Save/Favorite/Share L60D
\n\n
\n \n
\n \n
\n \n );\n}\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { Button, Col, Row, Form, Container } from \"react-bootstrap\";\nimport jsDig from \"utils/jsDig\";\nimport LiteMetricTable from \"dashboards/lite/LiteMetricTable\";\nimport LiteLineChart from \"dashboards/lite/LiteLineChart\";\nimport LiteRefresh from \"dashboards/lite/LiteRefresh\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { capitalize } from \"lodash-es\";\n\nexport default function OverviewDashboard(props) {\n console.log(props)\n const metricTableDimensions = jsDig([\"overall\", \"total\", \"spend\"], props.table_data) ? Object.keys(jsDig([\"overall\", \"total\", \"spend\"], props.table_data)) : [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", \"Total\", \"YTD\"];\n // Convert utc date to local time in this format 12:30 PM, 12/31/2021\n const lastDataPull = new Date(jsDig([\"last_data_pull\"], props)).toLocaleString(\"en-US\", {\n hour: \"numeric\",\n minute: \"numeric\",\n hour12: true,\n month: \"numeric\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n const thisYear = new Date().getFullYear();\n const lastYear = thisYear - 1;\n\n return (\n <>\n \n
\n \n Last refresh: {props.last_data_pull ? lastDataPull : \"Never\"}\n
\n \n
\n \n
\n Creative Links
\n\n
\n Other Dashboard
\n\n
\n LOGO
\n\n
\n \n
\n\n \n
\n Affiliate Traffic L60D
\n\n
\n Direct Traffic L60D
\n\n
\n Referral Traffic L60D
\n\n
\n\n \n
\n Audio Traffic L60D
\n\n
\n Mobile Push Notification Traffic L60D
\n\n
\n SMS Traffic L60D
\n\n
\n\n \n
\n \n
\n \n
\n \n
\n \n );\n}\n","import React from 'react';\n\nconst ProgressBar = ({ progress }) => {\n const fillerStyles = {\n height: '100%',\n width: `${progress}%`,\n backgroundColor: '#42ba96', // Choose a juicy color!\n borderRadius: 'inherit',\n textAlign: 'right',\n transition: 'width 1s ease-in-out', // Smooth transition for the \"juicy\" feel\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n paddingRight: 5, // Padding to ensure the label does not touch the edges\n };\n\n const labelStyles = {\n padding: 5,\n color: 'white',\n fontWeight: 'bold',\n fontSize: '10px'\n };\n\n return (\n \n
\n \n Last refresh: {props.last_data_pull ? lastDataPull : \"Never\"}\n
\n \n
\n\n \n
\n Creative Links
\n\n
\n Overview Dashboard
\n\n
\n LOGO
\n\n
\n\n \n
\n \n
\n Ad Spend L60D
\n\n
\n Revenue
\n\n
\n MER L60D
\n\n
\n \n
\n Website Traffic L60D
\n\n
\n CVR L60D
\n\n
\n AOV L60D
\n\n
\n \n
\n \n
\n Marketing Spend Funnel Allocation
\n\n
\n \n
\n \n
\n );\n};\n\nexport default ProgressBar;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { Button, Col, Row, Form, Container } from \"react-bootstrap\";\nimport jsDig from \"utils/jsDig\";\nimport LiteMetricTable from \"dashboards/lite/LiteMetricTable\";\nimport LiteLineChart from \"dashboards/lite/LiteLineChart\";\nimport LiteRefresh from \"dashboards/lite/LiteRefresh\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { capitalize } from \"lodash-es\";\n\nexport default function SearchDashboard(props) {\n console.log(props)\n const metricTableDimensions = jsDig([\"overall\", \"total\", \"spend\"], props.table_data) ? Object.keys(jsDig([\"overall\", \"total\", \"spend\"], props.table_data)) : [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", \"Total\", \"YTD\"];\n // Convert utc date to local time in this format 12:30 PM, 12/31/2021\n const lastDataPull = new Date(jsDig([\"last_data_pull\"], props)).toLocaleString(\"en-US\", {\n hour: \"numeric\",\n minute: \"numeric\",\n hour12: true,\n month: \"numeric\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n const thisYear = new Date().getFullYear();\n const lastYear = thisYear - 1;\n\n return (\n <>\n \n {`${progress}%`}\n
\n \n
\n \n );\n}\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { Button, Col, Row, Form, Container } from \"react-bootstrap\";\nimport jsDig from \"utils/jsDig\";\nimport LiteMetricTable from \"dashboards/lite/LiteMetricTable\";\nimport LiteLineChart from \"dashboards/lite/LiteLineChart\";\nimport LiteRefresh from \"dashboards/lite/LiteRefresh\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { capitalize } from \"lodash-es\";\n\nexport default function SocialDashboard(props) {\n console.log(props)\n const metricTableDimensions = jsDig([\"overall\", \"total\", \"spend\"], props.table_data) ? Object.keys(jsDig([\"overall\", \"total\", \"spend\"], props.table_data)) : [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", \"Total\", \"YTD\"];\n // Convert utc date to local time in this format 12:30 PM, 12/31/2021\n const lastDataPull = new Date(jsDig([\"last_data_pull\"], props)).toLocaleString(\"en-US\", {\n hour: \"numeric\",\n minute: \"numeric\",\n hour12: true,\n month: \"numeric\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n const thisYear = new Date().getFullYear();\n const lastYear = thisYear - 1;\n\n return (\n <>\n \n
\n \n Last refresh: {props.last_data_pull ? lastDataPull : \"Never\"}\n
\n \n
\n\n \n
\n Creative Links
\n\n
\n Paid Search Dashboard
\n\n
\n LOGO
\n\n
\n\n \n
\n \n
\n Search Spend L60D (infl.)
\n\n
\n Search Revenue L60D (infl.)
\n\n
\n Search ROAS L60D (infl.)
\n\n
\n \n
\n \n
\n Branded vs. Non-Branded L60D
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n );\n}\n","export default () => {\n let allDashboards = [\"seo\", \"ppc\", \"search\", \"social\", \"display\", \"video\"];\n let allSeoDashboards = [\"seo\"];\n let allPpcDashboards = [\"ppc\", \"search\", \"social\", \"display\", \"video\"];\n let allMetrics = {};\n\n let metricData = require(\"data/metricData.json\");\n\n let sectionData = require(\"data/sectionData.json\");\n\n let metricsByDashboard = {\n seo: {\n sections: {\n goalsAndProjections: sectionData.goalsAndProjections,\n primaryKpiCharts: sectionData.primaryKpiCharts,\n primaryKpiTables: sectionData.primaryKpiTables,\n allKpisVsPreviousYear: sectionData.allKpisVsPreviousYear,\n landingPageBreakdown: sectionData.landingPageBreakdown,\n backlinks: sectionData.backlinks,\n keywordGroups: sectionData.keywordGroups,\n keywordSummary: sectionData.keywordSummary,\n keywordRankings: sectionData.keywordRankings,\n },\n metrics: {\n goalsAndProjections: {\n traffic: metricData.traffic,\n conversions: metricData.conversions,\n revenue: metricData.revenue,\n cvr: metricData.cvr,\n aov: metricData.aov,\n gscClicks: metricData.gscClicks,\n gscImpressions: metricData.gscImpressions,\n searchVisibility: metricData.searchVisibility,\n topThreeKeywords: metricData.topThreeKeywords,\n topThreeKeywordsPercentage: metricData.topThreeKeywordsPercentage,\n topTenKeywords: metricData.topTenKeywords,\n topTenKeywordsPercentage: metricData.topTenKeywordsPercentage,\n topTwentyKeywords: metricData.topTwentyKeywords,\n topTwentyKeywordsPercentage: metricData.topTwentyKeywordsPercentage,\n },\n primaryKpiCharts: {\n traffic: metricData.traffic,\n conversions: metricData.conversions,\n revenue: metricData.revenue,\n cvr: metricData.cvr,\n aov: metricData.aov,\n gscClicks: metricData.gscClicks,\n gscImpressions: metricData.gscImpressions,\n searchVisibility: metricData.searchVisibility,\n topThreeKeywords: metricData.topThreeKeywords,\n topThreeKeywordsPercentage: metricData.topThreeKeywordsPercentage,\n topTenKeywords: metricData.topTenKeywords,\n topTenKeywordsPercentage: metricData.topTenKeywordsPercentage,\n topTwentyKeywords: metricData.topTwentyKeywords,\n topTwentyKeywordsPercentage: metricData.topTwentyKeywordsPercentage,\n },\n primaryKpiTables: {\n traffic: metricData.traffic,\n conversions: metricData.conversions,\n revenue: metricData.revenue,\n cvr: metricData.cvr,\n aov: metricData.aov,\n gscClicks: metricData.gscClicks,\n gscImpressions: metricData.gscImpressions,\n searchVisibility: metricData.searchVisibility,\n topThreeKeywords: metricData.topThreeKeywords,\n topThreeKeywordsPercentage: metricData.topThreeKeywordsPercentage,\n topTenKeywords: metricData.topTenKeywords,\n topTenKeywordsPercentage: metricData.topTenKeywordsPercentage,\n topTwentyKeywords: metricData.topTwentyKeywords,\n topTwentyKeywordsPercentage: metricData.topTwentyKeywordsPercentage,\n },\n allKpisVsPreviousYear: {\n traffic: metricData.traffic,\n bounceRate: metricData.bounceRate,\n gscClicks: metricData.gscClicks,\n gscImpressions: metricData.gscImpressions,\n engagedSessions: metricData.engagedSessions,\n conversions: metricData.conversions,\n revenue: metricData.revenue,\n cvr: metricData.cvr,\n aov: metricData.aov,\n searchVisibility: metricData.searchVisibility,\n averagePosition: metricData.averagePosition,\n topThreeKeywords: metricData.topThreeKeywords,\n topThreeKeywordsPercentage: metricData.topThreeKeywordsPercentage,\n topTenKeywords: metricData.topTenKeywords,\n topTenKeywordsPercentage: metricData.topTenKeywordsPercentage,\n topTwentyKeywords: metricData.topTwentyKeywords,\n topTwentyKeywordsPercentage: metricData.topTwentyKeywordsPercentage,\n },\n landingPageBreakdown: {\n traffic: metricData.traffic,\n bounceRate: metricData.bounceRate,\n conversions: metricData.conversions,\n revenue: metricData.revenue,\n cvr: metricData.cvr,\n aov: metricData.aov,\n searchVisibility: metricData.searchVisibility,\n averagePosition: metricData.averagePosition,\n topThreeKeywords: metricData.topThreeKeywords,\n topThreeKeywordsPercentage: metricData.topThreeKeywordsPercentage,\n topTenKeywords: metricData.topTenKeywords,\n topTenKeywordsPercentage: metricData.topTenKeywordsPercentage,\n topTwentyKeywords: metricData.topTwentyKeywords,\n topTwentyKeywordsPercentage: metricData.topTwentyKeywordsPercentage,\n },\n backlinks: {\n totalBacklinks: metricData.totalBacklinks,\n referringIps: metricData.referringIps,\n referringDomains: metricData.referringDomains,\n authorityScore: metricData.authorityScore,\n },\n keywordGroups: {\n traffic: metricData.traffic,\n },\n keywordSummary: {\n keywordsImproved: metricData.keywordsImproved,\n keywordsDeclined: metricData.keywordsDeclined,\n topThreeKeywords: metricData.topThreeKeywords,\n topThreeKeywordsPercentage: metricData.topThreeKeywordsPercentage,\n topTenKeywords: metricData.topTenKeywords,\n topTenKeywordsPercentage: metricData.topTenKeywordsPercentage,\n topTwentyKeywords: metricData.topTwentyKeywords,\n topTwentyKeywordsPercentage: metricData.topTwentyKeywordsPercentage,\n },\n keywordRankings: {\n keywordName: metricData.keywordName,\n keywordSerpFeatures: metricData.keywordSerpFeatures,\n keywordPreviousPosition: metricData.keywordPreviousPosition,\n keywordCurrentPosition: metricData.keywordCurrentPosition,\n keywordDifference: metricData.keywordDifference,\n keywordCostPerConversion: metricData.keywordCostPerConversion,\n keywordSearchVolume: metricData.keywordSearchVolume,\n keywordLabel: metricData.keywordLabel,\n keywordDifficulty: metricData.keywordDifficulty,\n keywordUrl: metricData.keywordUrl,\n },\n },\n defaults: {\n ecommerce: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n traffic: metricData.traffic,\n revenue: metricData.revenue,\n },\n primaryKpiTables: {\n traffic: metricData.traffic,\n revenue: metricData.revenue,\n cvr: metricData.cvr,\n aov: metricData.aov,\n },\n allKpisVsPreviousYear: {\n traffic: metricData.traffic,\n bounceRate: metricData.bounceRate,\n conversions: metricData.conversions,\n revenue: metricData.revenue,\n cvr: metricData.cvr,\n aov: metricData.aov,\n searchVisibility: metricData.searchVisibility,\n },\n landingPageBreakdown: {\n traffic: metricData.traffic,\n },\n backlinks: {\n totalBacklinks: metricData.totalBacklinks,\n referringIps: metricData.referringIps,\n referringDomains: metricData.referringDomains,\n authorityScore: metricData.authorityScore,\n },\n keywordGroups: {\n traffic: metricData.traffic,\n },\n keywordSummary: {\n keywordsImproved: metricData.keywordsImproved,\n keywordsDeclined: metricData.keywordsDeclined,\n topThreeKeywords: metricData.topThreeKeywords,\n topThreeKeywordsPercentage: metricData.topThreeKeywordsPercentage,\n topTenKeywords: metricData.topTenKeywords,\n topTenKeywordsPercentage: metricData.topTenKeywordsPercentage,\n topTwentyKeywords: metricData.topTwentyKeywords,\n topTwentyKeywordsPercentage: metricData.topTwentyKeywordsPercentage,\n },\n keywordRankings: {\n keywordName: metricData.keywordName,\n keywordPreviousPosition: metricData.keywordPreviousPosition,\n keywordCurrentPosition: metricData.keywordCurrentPosition,\n keywordDifference: metricData.keywordDifference,\n keywordDifficulty: metricData.keywordDifficulty,\n keywordSearchVolume: metricData.keywordSearchVolume,\n keywordUrl: metricData.keywordUrl,\n },\n },\n leadgen: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n traffic: metricData.traffic,\n conversions: metricData.conversions,\n },\n primaryKpiTables: {\n traffic: metricData.traffic,\n conversions: metricData.conversions,\n cvr: metricData.cvr,\n },\n allKpisVsPreviousYear: {\n traffic: metricData.traffic,\n gscImpressions: metricData.gscImpressions,\n conversions: metricData.conversions,\n cvr: metricData.cvr,\n searchVisibility: metricData.searchVisibility,\n },\n landingPageBreakdown: {\n traffic: metricData.traffic,\n },\n backlinks: {\n totalBacklinks: metricData.totalBacklinks,\n referringIps: metricData.referringIps,\n referringDomains: metricData.referringDomains,\n authorityScore: metricData.authorityScore,\n },\n keywordGroups: {\n traffic: metricData.traffic,\n },\n keywordSummary: {\n keywordsImproved: metricData.keywordsImproved,\n keywordsDeclined: metricData.keywordsDeclined,\n topThreeKeywords: metricData.topThreeKeywords,\n topThreeKeywordsPercentage: metricData.topThreeKeywordsPercentage,\n topTenKeywords: metricData.topTenKeywords,\n topTenKeywordsPercentage: metricData.topTenKeywordsPercentage,\n topTwentyKeywords: metricData.topTwentyKeywords,\n topTwentyKeywordsPercentage: metricData.topTwentyKeywordsPercentage,\n },\n keywordRankings: {\n keywordName: metricData.keywordName,\n keywordPreviousPosition: metricData.keywordPreviousPosition,\n keywordCurrentPosition: metricData.keywordCurrentPosition,\n keywordDifficulty: metricData.keywordDifficulty,\n keywordSearchVolume: metricData.keywordSearchVolume,\n keywordUrl: metricData.keywordUrl,\n },\n },\n mandatory: {\n keywordRankings: {\n keywordName: metricData.keywordName,\n },\n },\n },\n },\n ppc: {\n sections: {\n goalsAndProjections: sectionData.goalsAndProjections,\n primaryKpiCharts: sectionData.primaryKpiCharts,\n primaryKpiTables: sectionData.primaryKpiTables,\n allKpisVsPreviousYear: sectionData.allKpisVsPreviousYear,\n performanceByChannel: sectionData.performanceByChannel,\n campaignGroups: sectionData.campaignGroups,\n spendAllocation: sectionData.spendAllocation,\n },\n metrics: {\n goalsAndProjections: {\n shopifyRevenue: metricData.shopifyRevenue,\n shopifyRoas: metricData.shopifyRoas,\n shopifySubtotalRevenue: metricData.shopifySubtotalRevenue,\n shopifySubtotalRoas: metricData.shopifySubtotalRoas,\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n totalAov: metricData.totalAov,\n },\n primaryKpiCharts: {\n shopifyRevenue: metricData.shopifyRevenue,\n shopifyRoas: metricData.shopifyRoas,\n shopifySubtotalRevenue: metricData.shopifySubtotalRevenue,\n shopifySubtotalRoas: metricData.shopifySubtotalRoas,\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n totalAov: metricData.totalAov,\n },\n primaryKpiTables: {\n shopifyRevenue: metricData.shopifyRevenue,\n shopifyRoas: metricData.shopifyRoas,\n shopifySubtotalRevenue: metricData.shopifySubtotalRevenue,\n shopifySubtotalRoas: metricData.shopifySubtotalRoas,\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n totalAov: metricData.totalAov,\n },\n allKpisVsPreviousYear: {\n shopifyRevenue: metricData.shopifyRevenue,\n shopifyRoas: metricData.shopifyRoas,\n shopifySubtotalRevenue: metricData.shopifySubtotalRevenue,\n shopifySubtotalRoas: metricData.shopifySubtotalRoas,\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n totalAov: metricData.totalAov,\n },\n performanceByChannel: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n totalAov: metricData.totalAov,\n },\n spendAllocation: {\n spend: metricData.spend,\n clickConversions: metricData.clickConversions,\n totalConversions: metricData.totalConversions,\n clickRevenue: metricData.clickRevenue,\n totalRevenue: metricData.totalRevenue,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n },\n },\n defaults: {\n ecommerce: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n clicks: metricData.clicks,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n totalCpa: metricData.totalCpa,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n totalAov: metricData.totalAov,\n },\n spendAllocation: {\n spend: metricData.spend,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n },\n leadgen: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n clicks: metricData.clicks,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n totalCpa: metricData.totalCpa,\n },\n spendAllocation: {\n spend: metricData.spend,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n },\n },\n },\n search: {\n sections: {\n goalsAndProjections: sectionData.goalsAndProjections,\n primaryKpiCharts: sectionData.primaryKpiCharts,\n primaryKpiTables: sectionData.primaryKpiTables,\n allKpisVsPreviousYear: sectionData.allKpisVsPreviousYear,\n campaignGroups: sectionData.campaignGroups,\n spendAllocation: sectionData.spendAllocation,\n },\n metrics: {\n goalsAndProjections: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n impressionsTopRate: metricData.impressionsTopRate,\n impressionsAbsTopRate: metricData.impressionsAbsTopRate,\n searchImpressionsShare: metricData.searchImpressionsShare,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n clickAov: metricData.clickAov,\n },\n primaryKpiCharts: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n impressionsTopRate: metricData.impressionsTopRate,\n impressionsAbsTopRate: metricData.impressionsAbsTopRate,\n searchImpressionsShare: metricData.searchImpressionsShare,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n clickAov: metricData.clickAov,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n impressionsTopRate: metricData.impressionsTopRate,\n impressionsAbsTopRate: metricData.impressionsAbsTopRate,\n searchImpressionsShare: metricData.searchImpressionsShare,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n clickAov: metricData.clickAov,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n impressionsTopRate: metricData.impressionsTopRate,\n impressionsAbsTopRate: metricData.impressionsAbsTopRate,\n searchImpressionsShare: metricData.searchImpressionsShare,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n clickAov: metricData.clickAov,\n },\n campaignGroups: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n impressionsTopRate: metricData.impressionsTopRate,\n impressionsAbsTopRate: metricData.impressionsAbsTopRate,\n searchImpressionsShare: metricData.searchImpressionsShare,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n clickAov: metricData.clickAov,\n },\n spendAllocation: {\n spend: metricData.spend,\n clickConversions: metricData.clickConversions,\n clickRevenue: metricData.clickRevenue,\n clickCpa: metricData.clickCpa,\n clickRoas: metricData.clickRoas,\n },\n },\n defaults: {\n ecommerce: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n clicks: metricData.clicks,\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n clickConversions: metricData.clickConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n clickAov: metricData.clickAov,\n },\n campaignGroups: {\n spend: metricData.spend,\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n },\n spendAllocation: {\n spend: metricData.spend,\n clickRevenue: metricData.clickRevenue,\n clickRoas: metricData.clickRoas,\n },\n },\n leadgen: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n clickConversions: metricData.clickConversions,\n clickCpa: metricData.clickCpa,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n clicks: metricData.clicks,\n clickConversions: metricData.clickConversions,\n clickCpa: metricData.clickCpa,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n clickConversions: metricData.clickConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n },\n campaignGroups: {\n spend: metricData.spend,\n clickConversions: metricData.clickConversions,\n clickCpa: metricData.clickCpa,\n },\n spendAllocation: {\n spend: metricData.spend,\n clickConversions: metricData.clickConversions,\n clickCpa: metricData.clickCpa,\n },\n },\n },\n },\n social: {\n sections: {\n goalsAndProjections: sectionData.goalsAndProjections,\n primaryKpiCharts: sectionData.primaryKpiCharts,\n primaryKpiTables: sectionData.primaryKpiTables,\n allKpisVsPreviousYear: sectionData.allKpisVsPreviousYear,\n campaignGroups: sectionData.campaignGroups,\n spendAllocation: sectionData.spendAllocation,\n },\n metrics: {\n goalsAndProjections: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n addToCarts: metricData.addToCarts,\n impressionToCartRate: metricData.impressionToCartRate,\n checkoutsStarted: metricData.checkoutsStarted,\n cartToConversionRate: metricData.cartToConversionRate,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n primaryKpiCharts: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n views: metricData.views,\n cpv: metricData.cpv,\n socialViewRate: metricData.socialViewRate,\n viewCtr: metricData.viewCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n addToCarts: metricData.addToCarts,\n impressionToCartRate: metricData.impressionToCartRate,\n checkoutsStarted: metricData.checkoutsStarted,\n cartToConversionRate: metricData.cartToConversionRate,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n views: metricData.views,\n cpv: metricData.cpv,\n socialViewRate: metricData.socialViewRate,\n viewCtr: metricData.viewCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n addToCarts: metricData.addToCarts,\n impressionToCartRate: metricData.impressionToCartRate,\n checkoutsStarted: metricData.checkoutsStarted,\n cartToConversionRate: metricData.cartToConversionRate,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n addToCarts: metricData.addToCarts,\n impressionToCartRate: metricData.impressionToCartRate,\n checkoutsStarted: metricData.checkoutsStarted,\n cartToConversionRate: metricData.cartToConversionRate,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n campaignGroups: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n views: metricData.views,\n cpv: metricData.cpv,\n socialViewRate: metricData.socialViewRate,\n viewCtr: metricData.viewCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n addToCarts: metricData.addToCarts,\n impressionToCartRate: metricData.impressionToCartRate,\n checkoutsStarted: metricData.checkoutsStarted,\n cartToConversionRate: metricData.cartToConversionRate,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n spendAllocation: {\n spend: metricData.spend,\n clickConversions: metricData.clickConversions,\n totalConversions: metricData.totalConversions,\n clickRevenue: metricData.clickRevenue,\n totalRevenue: metricData.totalRevenue,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n },\n },\n defaults: {\n ecommerce: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n addToCarts: metricData.addToCarts,\n impressionToCartRate: metricData.impressionToCartRate,\n checkoutsStarted: metricData.checkoutsStarted,\n cartToConversionRate: metricData.cartToConversionRate,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n totalCpa: metricData.totalCpa,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n totalAov: metricData.totalAov,\n },\n campaignGroups: {\n spend: metricData.spend,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n spendAllocation: {\n spend: metricData.spend,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n },\n leadgen: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n addToCarts: metricData.addToCarts,\n impressionToCartRate: metricData.impressionToCartRate,\n checkoutsStarted: metricData.checkoutsStarted,\n cartToConversionRate: metricData.cartToConversionRate,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n totalCpa: metricData.totalCpa,\n },\n campaignGroups: {\n spend: metricData.spend,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n spendAllocation: {\n spend: metricData.spend,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n },\n },\n },\n display: {\n sections: {\n goalsAndProjections: sectionData.goalsAndProjections,\n primaryKpiCharts: sectionData.primaryKpiCharts,\n primaryKpiTables: sectionData.primaryKpiTables,\n allKpisVsPreviousYear: sectionData.allKpisVsPreviousYear,\n campaignGroups: sectionData.campaignGroups,\n spendAllocation: sectionData.spendAllocation,\n },\n metrics: {\n goalsAndProjections: {\n cpsv: metricData.cpsv,\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n primaryKpiCharts: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n campaignGroups: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n spendAllocation: {\n spend: metricData.spend,\n clickConversions: metricData.clickConversions,\n totalConversions: metricData.totalConversions,\n clickRevenue: metricData.clickRevenue,\n totalRevenue: metricData.totalRevenue,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n },\n },\n defaults: {\n ecommerce: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n totalCpa: metricData.totalCpa,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n totalAov: metricData.totalAov,\n },\n campaignGroups: {\n spend: metricData.spend,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n spendAllocation: {\n spend: metricData.spend,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n },\n leadgen: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n totalCpa: metricData.totalCpa,\n },\n campaignGroups: {\n spend: metricData.spend,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n spendAllocation: {\n spend: metricData.spend,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n },\n },\n },\n video: {\n sections: {\n goalsAndProjections: sectionData.goalsAndProjections,\n primaryKpiCharts: sectionData.primaryKpiCharts,\n primaryKpiTables: sectionData.primaryKpiTables,\n allKpisVsPreviousYear: sectionData.allKpisVsPreviousYear,\n campaignGroups: sectionData.campaignGroups,\n spendAllocation: sectionData.spendAllocation,\n },\n metrics: {\n goalsAndProjections: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n videoCvr: metricData.videoCvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n primaryKpiCharts: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n videoCvr: metricData.videoCvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n videoCvr: metricData.videoCvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n videoCvr: metricData.videoCvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n campaignGroups: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n viewableImpressions: metricData.viewableImpressions,\n views: metricData.views,\n cpv: metricData.cpv,\n viewRate: metricData.viewRate,\n viewCtr: metricData.viewCtr,\n viewableCtr: metricData.viewableCtr,\n\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n inStoreVisits: metricData.inStoreVisits,\n clickConversions: metricData.clickConversions,\n viewConversions: metricData.viewConversions,\n totalConversions: metricData.totalConversions,\n cvr: metricData.cvr,\n videoCvr: metricData.videoCvr,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRevenue: metricData.clickRevenue,\n viewRevenue: metricData.viewRevenue,\n totalRevenue: metricData.totalRevenue,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n clickAov: metricData.clickAov,\n totalAov: metricData.totalAov,\n },\n spendAllocation: {\n spend: metricData.spend,\n clickConversions: metricData.clickConversions,\n totalConversions: metricData.totalConversions,\n clickRevenue: metricData.clickRevenue,\n totalRevenue: metricData.totalRevenue,\n clickCpa: metricData.clickCpa,\n totalCpa: metricData.totalCpa,\n clickRoas: metricData.clickRoas,\n totalRoas: metricData.totalRoas,\n },\n },\n defaults: {\n ecommerce: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n views: metricData.views,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n views: metricData.views,\n cpv: metricData.cpv,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n totalConversions: metricData.totalConversions,\n videoCvr: metricData.videoCvr,\n totalCpa: metricData.totalCpa,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n totalAov: metricData.totalAov,\n },\n campaignGroups: {\n spend: metricData.spend,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n spendAllocation: {\n spend: metricData.spend,\n totalRevenue: metricData.totalRevenue,\n totalRoas: metricData.totalRoas,\n },\n },\n leadgen: {\n goalsAndProjections: {},\n primaryKpiCharts: {\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n primaryKpiTables: {\n spend: metricData.spend,\n views: metricData.views,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n allKpisVsPreviousYear: {\n spend: metricData.spend,\n impressions: metricData.impressions,\n views: metricData.views,\n cpv: metricData.cpv,\n clicks: metricData.clicks,\n cpc: metricData.cpc,\n ctr: metricData.ctr,\n phoneCalls: metricData.phoneCalls,\n totalConversions: metricData.totalConversions,\n videoCvr: metricData.videoCvr,\n totalCpa: metricData.totalCpa,\n },\n campaignGroups: {\n spend: metricData.spend,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n spendAllocation: {\n spend: metricData.spend,\n totalConversions: metricData.totalConversions,\n totalCpa: metricData.totalCpa,\n },\n },\n },\n },\n };\n\n allMetrics[\"metricsByDashboard\"] = metricsByDashboard;\n allMetrics[\"metricData\"] = metricData;\n allMetrics[\"sectionData\"] = sectionData;\n\n return allMetrics;\n};\n","import React, {useEffect, useContext} from \"react\";\nimport { Row, Col, Button } from \"react-bootstrap\";\nimport BackButton from \"./BackButton\";\nimport NextButton from \"./NextButton\";\nimport getNextPage from \"./getNextPage\";\nimport {RouterContext} from \"./Onboarding\"\n\nexport default function AccountConfigurationIntro(props) {\n const route = useContext(RouterContext)\n\n const nextPage = getNextPage(props.onboarding_progress);\n\n useEffect(() => {\n window.localStorage.setItem(\n \"routerHistory\",\n JSON.stringify([...route.get])\n );\n }, [route.get]);\n props.pageLocator();\n return (\n <>\n \n
\n \n Last refresh: {props.last_data_pull ? lastDataPull : \"Never\"}\n
\n \n
\n \n
\n Creative Links
\n\n
\n Paid Social Dashboard
\n\n
\n LOGO
\n\n
\n \n
\n \n
\n Social Spend L60D
\n\n
\n Social Revenue L60D
\n\n
\n Social ROAS L60D
\n\n
\n \n
\n \n
\n Prospecting vs. Remarketing L60D
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n\n \n
\n
\n \n );\n}\n","import { cloneDeep } from \"lodash-es\";\nimport React from \"react\";\nimport { Table, Form } from \"react-bootstrap\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function AlertsGroup(props) {\n return (\n <>\n \n
\n First Up: Account Configuration
\n\n
\n \n \n In the next few sections, the designated team member will set up the account configuration. We'll also set up any necessary configurations for\n services and subservices, depending on what was selected so far.\n
\n\n
\n \n \n {props.service == \"seo\" ? (\n
\n \n );\n}\n","import React, {useEffect, useContext} from \"react\";\nimport { Button } from \"react-bootstrap\";\nimport { useHistory } from \"react-router-dom\";\nimport {RouterContext} from \"./Onboarding\"\n\nexport default function BackButton(props) {\n const history = useHistory();\n const route = useContext(RouterContext)\n\n let chevronLeft = require(\"images/onboarding/chevronLeft.png\");\n chevronLeft = {props.platform.platformName}
\n ) : (\n{props.platform.platformName}
\n )}\n\n\n {props.platform.alerts.map((alert) => {\n return (\n
\n \n
\n );\n })}\n \n {\n const newObj = cloneDeep(props.scripts);\n newObj[alert.name] = jsDig([alert.name], props.scripts) == \"1\" ? \"0\" : \"1\";\n props.setScripts(newObj);\n }}\n />\n
\n {alert.options && (\n \n \n \n {alert.options.map((option) => {\n return (\n
\n
\n )}\n | {option.title} | \n\n | \n
\n
\n Company Logo
\n\n
\n Upload the brand logo here.
\n{companyLogo}
\n \n {\n setImageURL(URL.createObjectURL(e.target.files[0]));\n setFileName(e.target.files[0].name);\n encodeImageFileAsURL(e.target);\n }}\n />\n\n \n
\n \n
\n {fileName}
\n\n
\n \n \n Square image no less than 300x300 is ideal. Maximum
file size is 2MB. Supported files: JPG, PNG\n
\n
\n \n \n
\n Campaign Groups
\n\n
\n \n \n On this page, you can set up any necessary campaign groups for your PPC services. Campaign groups are a great way to track the performance of\n specific areas of your business. Create campaign groups for each specific PPC sub-service as needed, and configure them below.{\" \"}\n \n Only the top three campaign groups will be displayed in the PPC Summary (indicated with a blue triangle in the bottom-right corner).{\" \"}\n \n
\n\n selectTab(k)}>\n \n \n \n {\n props.search_section.enabled ?\n \n \n {\n props.social_section.enabled ?\n \n \n {\n props.display_section.enabled ?\n \n \n {\n props.video_section.enabled ?\n \n :\n \n \n \n
\n \n \n
\n
\n }\n \n
\n \n Search is not currently enabled
\n\n \n
\n
\n }\n \n
\n \n Social is not currently enabled
\n\n \n
\n
\n }\n \n
\n \n Display is not currently enabled
\n\n \n
\n
\n }\n \n
\n \n Video is not currently enabled
\n\n
\n \n \n\n
\n \n );\n}","import React from \"react\";\nimport CampaignGroups from \"../../client_config/ppc_config/CampaignGroups\"\n\nexport default function Search(props) {\n \n const searchCampaignGroups = props.campaignGroups.search\n const allCampaignGroups = props.campaignGroups\n\n return (\n \n \n
\n \n );\n}","import React from \"react\";\nimport CampaignGroups from \"../../client_config/ppc_config/CampaignGroups\"\n\nexport default function Social(props) {\n \n const socialCampaignGroups = props.campaignGroups.social\n const allCampaignGroups = props.campaignGroups\n\n return (\n \n\n
\n \n );\n}","import React from \"react\";\nimport CampaignGroups from \"../../client_config/ppc_config/CampaignGroups\"\n\nexport default function Video(props) {\n \n const videoCampaignGroups = props.campaignGroups.video\n const allCampaignGroups = props.campaignGroups\n\n return (\n \n\n
\n \n );\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport { Row, Col, Button, Form, OverlayTrigger, Popover } from \"react-bootstrap\";\nimport { Link } from \"react-router-dom\";\nimport StateOptions from \"utils/StateOptions\";\nimport BackButton from \"./BackButton\";\nimport NextButton from \"./NextButton\";\nimport SkipButton from \"./SkipButton\";\nimport getNextPage from \"./getNextPage\";\nimport { RouterContext } from \"./Onboarding\"\n\nexport default function CompanyLegalInformation(props) {\n const route = useContext(RouterContext)\n\n const nextPage = getNextPage(props.onboarding_progress);\n\n useEffect(() => {\n window.localStorage.setItem(\n \"routerHistory\",\n JSON.stringify([...route.get])\n );\n }, [route.get]);\n let companyLogo = require(\"images/onboarding/company-logo.png\");\n companyLogo = Company Legal Information
\n \n\n Please add the company's information as it is known legally. It is important that this information is 100% accurate, so please double-check your\n spelling and grammar before continuing.\n
\n \nLegal Company Name:
\n \nLegal Company Address
\n \nStreet Address
\n \nUnit, building, or apt #
\n \n\n
\n \n What is the name of the company for this account?
\n \n\n This is how your name will be displayed in DataPulse. Just the simplest form
of your company name is ideal.\n
Note: Avoid adding company type suffixes like \"Inc\" or \"LLC\" here (that's what the legal page is for!)
\n \nWhat type of company is this?
\n \n\n
\n \n \n \n \n What's the difference?\n \n
\n \n
\n \n
\n \n Ecommerce clients are those that are
tracking revenue and measuring return on
ad spend.\n
\n
\n \n Lead generation clients are those that are
NOT tracking revenue and are measuring
leads & cost per acquisition.\n
\n
\n \n {large}
\n {medium}
\n {small}
\n \n
\n Victory belongs to the most persevering.
\n\n
\n \n \n Congratulations on completing onboarding for {props.company_name}!{\" \"}\n
\nWell Done!
\n\n {props.ppcEnabled ? (\n props.submitForm(\"/datapulse/ppc-dashboard\")}\n style={{\n backgroundColor: \"#3291C1\",\n\n paddingLeft: \"55px\",\n paddingRight: \"55px\",\n }}\n className=\"py-1 f16 nunito-regular onboarding-completed\"\n size=\"md\">\n {`Go to My Dashboard`}{chevronRight}\n \n ) : (\n props.submitForm(\"/datapulse/seo-dashboard\")}\n style={{\n backgroundColor: \"#3291C1\",\n\n paddingLeft: \"55px\",\n paddingRight: \"55px\",\n }}\n className=\"py-1 f16 nunito-regular onboarding-completed\"\n size=\"md\">\n {`Go to My Dashboard`}{chevronRight}\n \n )}\n
\n \n \n
*/}\n \n \n {\n disabled &&\n \n
\n\n \n
\n\n \n changePerson(user.id, userEmail, \"first_name\", e.target.value)}\n onFocus={(e) => {\n setFirstAlert(false);\n }}\n id=\"onboard_first_name\"\n disabled={disabled}\n />\n \n changePerson(user.id, userEmail, \"last_name\", e.target.value)}\n onFocus={(e) => {\n setLastAlert(false);\n }}\n id=\"onboard_last_name\"\n className=\"pb-2 mb-2 \"\n value={user.last_name ? user.last_name : \"\"}\n disabled={disabled}\n />\n \n
\n\n \n
\n \n changePerson(user.id, userEmail, \"email\", e.target.value)}\n id=\"onboard_email\"\n className=\" mb-2\"\n value={userEmail ? userEmail : \"\"}\n disabled={disabled}\n />\n \n
\n\n \n changePerson(user.id, userEmail, \"phone_number\", e.target.value)}\n id=\"onboard_phone\"\n className=\"mb-2\"\n pattern=\"[1-9]{1}[0-9]{9}\"\n placeholder=\"1231231234\"\n value={user.phone_number ? user.phone_number : \"\"}\n disabled={disabled}\n />\n \n\n changePerson(user.id, userEmail, \"job_title\", e.target.value)}\n id=\"onboard_job_title\"\n className=\"mb-2\"\n value={user.job_title ? user.job_title : \"\"}\n disabled={disabled}\n />\n \n
\n\n {/* Commenting this out for now since this field doesn't exist anymore and is not displayed anywhere\n \n
*/}\n
\n \n );\n };\n\n return (\n <>\n \n
\n }\n This email already has access to DataPulse
\nAdd person
\n \nFirst Name (required)
\n \nLast Name (required)
\n \nEmail (required)
\n \nPhone
\nJob Title
\n\n changePerson(user.id, userEmail, \"is_primary_point_of_contact\", e.target.value)}\n label=\"Primary point of contact\"\n disabled={disabled}\n />\n
\n \n DataPulse Access
\n \n\n Here we will add folks from the company that will have direct access to DataPulse. Provide the details to the corresponding fields, and then click\n 'Add' to add them to the list. You can add as many people as necessary, but we recommend limiting your primary points of contact to only one or two.{\" \"}\n All individuals added here will have a DataPulse invitation sent to the email provided for them.\n
\n \n\n
\n \n \n
\n PPC: Overall Goals
\n\n
\n \n \n Let's set some goals for overall PPC. First, indicate which year you would like to set goals for. Then indicate which key metrics you would like\n to track. Lastly, you can set your goals by month in the fields below. You can autofill from previous years' metrics to set your goals to beat\n last years results.\n
\n\n
\n \n \n
\n PPC: Display Goals
\n\n
\n \n \n Let's set some goals for display ads. First, indicate which group and year you would like to set goals for. You can either set goals for all\n search, or choose by campaign group if you've already created and configured those. Then indicate which key metrics you would like to track.\n Lastly, you can set your goals by month in the fields below. You can autofill from previous years' metrics to set your goals to beat last years\n results.\n
\n\n
\n \n \n
\n \n \n \n \n {!props.onboarding && (\n
\n
\n \n {/* Only show the pull metrics button if the selectedYear matches the current year */}\n { selectedYear == moment().year().toString() ? (\n <>\n { props[`${props.service}_cc_data`][selectedDashboardId].length > 0 ? (\n | For: | \n\n | \n
| Year: | \n\n | \n
\n handlePullMetric(selectedDashboardId)}>\n Pull metrics\n \n
\n ) : (\n \n You have the option to pull in historical data from the last year to help set this year's goals. Enter a percentage change to apply to the previous year's data:\n
\n\n (Negative numbers are also supported)\n
\n\n setGoalChangePercent(e.target.value)}\n >\n \n %\n
\n\n \n
\n\n Metrics to fill in:
\n {/* Let the user select which metric to apply the change to. Generate a checkbox for each metric */}\n {checkedMetrics[selectedDashboardId][selectedYear].map((metricName, index) => {\n const metric = metricList[metricName];\n return (\n\n
\n );\n })}\n \n setAllOrBlank(e.target.value)}>\n \n \n \n
\n\n Goals to replace:
\nNo historical data has been pulled so goals cannot be generated.
\n )}\n \n ) : <> }\n\n
\n \n Configure which metrics for the selected for/year fields that you would like to set goals for:
\n\n
\n \n
\n \n \n {calculatorLarge}
\n What's this?
\n\n
\n \n When you see the blue calculator icon on a goal or column, it means that this metric can be auto-generated using pre-existing information. For\n example, ROAS can be auto-generated based on the existing Spend and Revenue goals. Hover over the icon to get information on which metrics it\n needs to calculate, and click to generate into that field.\n
\n\n
\n );\n })}\n \n
\n SEO Goals
\n\n
\n \n \n Let's set some goals for SEO. First, indicate which group and year you would like to set goals for. You can either set goals for all SEO, or\n choose by landing page group if you've already created and configured those. Then indicate which key metrics you would like to track. Lastly, you\n can set your goals by month in the fields below. You can autofill from previous years' metrics to set your goals to beat last years results.\n
\n\n
\n \n \n
\n PPC: Search Goals
\n\n
\n \n \n Let's set some goals for paid search. First, indicate which group and year you would like to set goals for. You can either set goals for all\n search, or choose by campaign group if you've already created and configured those. Then indicate which key metrics you would like to track.\n Lastly, you can set your goals by month in the fields below. You can autofill from previous years' metrics to set your goals to beat last years\n results.\n
\n\n
\n \n \n
\n PPC: Social Goals
\n\n
\n \n \n Let's set some goals for paid social. First, indicate which group and year you would like to set goals for. You can either set goals for all\n search, or choose by campaign group if you've already created and configured those. Then indicate which key metrics you would like to track.\n Lastly, you can set your goals by month in the fields below. You can autofill from previous years' metrics to set your goals to beat last years\n results.\n
\n\n
\n \n \n
\n PPC: Video Goals
\n\n
\n \n \n Let's set some goals for video ads. First, indicate which group and year you would like to set goals for. You can either set goals for all search,\n or choose by campaign group if you've already created and configured those. Then indicate which key metrics you would like to track. Lastly, you\n can set your goals by month in the fields below. You can autofill from previous years' metrics to set your goals to beat last years results.\n
\n\n
\n \n \n
\n Google Analytics Goal Tracking
\n\n
\n \n \n Here you can specify which goals should be pulled from Analytics and counted towards conversions in DataPulse for this client. The 'Label' field may be used to describe the goal, just like in Analytics.\n
\n\n {infoText()}\n
\nProvide the information below:
\n \nSelect label/ID
\n\n \n \n {props.customAnalyticGoals[`${selectedLabel}`].map((row, idx) => {\n return
\n
\n )\n : <>\n }\n \n
\n \n \n \n
\n
\n );\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport { Row, Col, Button, Container, Tab, Nav, OverlayTrigger, Popover } from \"react-bootstrap\";\nimport { Link } from \"react-router-dom\";\nimport Search from \"./Search\";\nimport Display from \"./Display\";\nimport Social from \"./Social\";\nimport Video from \"./Video\";\nimport BackButton from \"../BackButton\";\nimport NextButton from \"../NextButton\";\nimport SkipButton from \"../SkipButton\";\nimport getNextPage from \"../getNextPage\";\nimport { RouterContext } from \"../Onboarding\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function Inflation(props) {\n const route = useContext(RouterContext);\n\n const nextPage = getNextPage(props.onboarding_progress);\n\n useEffect(() => {\n window.localStorage.setItem(\"routerHistory\", JSON.stringify([...route.get]));\n }, [route.get]);\n\n props.pageLocator();\n const [tabLocation, setTabLocation] = useState(\"\");\n useEffect(() => {\n let searchParams = new URL(location.href).searchParams;\n let page = searchParams.get(\"page\");\n if (!page || page == \"\") {\n page = \"search\";\n }\n setTabLocation(page);\n }, []);\n\n const selectTab = (key) => {\n setTabLocation(key);\n };\n let validatedInit = true;\n\n // No inflation for social\n const enabledServices = [];\n if (props.search_section.enabled) enabledServices.push(\"search\");\n if (props.display_section.enabled) enabledServices.push(\"display\");\n if (props.video_section.enabled) enabledServices.push(\"video\");\n\n for (const service in props.inflation) {\n if (enabledServices.includes(service)) {\n for (const platform in props.inflation[service]) {\n for (const metric in props.inflation[service][platform]) {\n if (jsDig([service, platform, metric], props.inflation)) {\n const array = Object.values(props.inflation[service][platform][metric]);\n if (\n Object.values(props.inflation[service][platform][metric])\n .slice(0, array.length - 1)\n .includes(\"\")\n )\n validatedInit = false;\n }\n }\n }\n }\n }\n const [validated, setValidatation] = useState(validatedInit);\n useEffect(() => {\n let validation = true;\n for (const service in props.inflation) {\n if (enabledServices.includes(service)) {\n for (const platform in props.inflation[service]) {\n for (const metric in props.inflation[service][platform]) {\n if (jsDig([service, platform, metric], props.inflation)) {\n const array = Object.values(props.inflation[service][platform][metric]);\n\n if (\n Object.values(props.inflation[service][platform][metric])\n .slice(0, array.length - 1)\n .includes(\"\")\n )\n validation = false;\n }\n }\n }\n }\n }\n setValidatation(validation);\n });\n return (\n \n \n Inflation (Past 30 Days)\n \n \n\t\t\t\t\t\t{thumbnail}} />\n\t\t\t\t\t\t \n
\n \n \n
\n \n
\n Inflation
\n\n
\n \n \n Here you can set values for inflation. You can do so manually, import values from a CSV, or import directly from the accounts that you linked on\n the previous pages in this access section. You can also copy and paste from Google.\n
\n\n
\n \n \n selectTab(k)}>\n \n \n \n {props.search_section.enabled ? (\n \n \n \n \n {props.display_section.enabled ? (\n \n \n {props.video_section.enabled ? (\n \n ) : (\n \n \n \n
\n \n \n
\n
\n )}\n \n
\n \n Search is not currently enabled
\n\n \n
\n
\n )}\n \n
\n \n Display is not currently enabled
\n\n \n
\n
\n )}\n \n
\n \n Video is not currently enabled
\n\n
\n \n This feature is coming soon.
\n \n \n \n \n
\n );\n };\n return (\n <>\n \n {\n setSelectedPlatform(e.target.value);\n }}>\n {props.platforms.map((platform, index) => {\n return ;\n })}\n \n\n {\n uploadCsv(e);\n }}\n onClick={(e) => {\n e.target.value = null;\n }}\n />\n \n {[0, 1].map((tableIndex) => {\n return (\n
\n );\n })}\n
\n \n );\n}\n","import React from \"react\";\nimport { Row, Col } from \"react-bootstrap\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport InflationForm from \"./InflationForm\";\n\nexport default function Search(props) {\n let platformNames = [\"Google\", \"Microsoft\"];\n\n let thumbnail = require(\"images/ShowMeHow.jpg\");\n thumbnail = \n \n {ComingSoonTooltip()}\n {props.section == \"search\" && (\n \n )}\n
\n {props.platforms.map((platform, index) => {\n const platformKey = platform.toLowerCase();\n const visability = platform == selectedPlatform ? \"flex\" : \"none\";\n return (\n \n \n \n
\n
\n \n );\n })}\n | \n {yieldMetrics.map((metric, index) => {\n return (\n | \n {metric}\n | \n );\n })}\n
|---|---|
| \n | \n );\n })}\n
\n \n
\n
\n );\n}\n","import React from \"react\";\nimport { Row, Col } from \"react-bootstrap\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport InflationForm from \"./InflationForm\";\n\nexport default function Social(props) {\n let platformNames = [\"Facebook\"];\n\n return (\n \n Inflation (Past 30 Days)\n \n\t\t\t\t\t\t{thumbnail}} />\n\t\t\t\t\t\t \n
\n \n \n
\n \n \n
\n
\n );\n}\n","import React from \"react\";\nimport { Row, Col } from \"react-bootstrap\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport InflationForm from \"./InflationForm\";\n\nexport default function Video(props) {\n let thumbnail = require(\"images/ShowMeHow.jpg\");\n thumbnail = \n
\n \n Social does not have inflation so there is no need to do this for social
\n {/* \n InflationForm (Past 30 Days)\n \n \n\n
*/}\n \n \n
\n
\n );\n}","import React, {useContext, useEffect} from \"react\";\nimport { Row, Col, Button } from \"react-bootstrap\";\nimport { Link } from \"react-router-dom\";\nimport NextButton from \"./NextButton\";\nimport {RouterContext} from \"./Onboarding\"\n\nexport default function Intro1(props) {\n const route = useContext(RouterContext)\n\n useEffect(() => {\n window.localStorage.setItem(\n \"routerHistory\",\n JSON.stringify([...route.get])\n );\n }, [route.get]);\n let welcome = require(\"images/onboarding/dp-welcome.png\");\n welcome = \n \n Inflation (Past 30 Days)\n \n \n\t\t\t\t\t\t{thumbnail}} />\n\t\t\t\t\t\t \n
\n \n \n
\n \n \n
\n \n
\n
\n \n
\n \n \n
\n
\n );\n}\n","import React, { useState, useEffect, useContext } from \"react\";\nimport { Row, Col, Button, Form, OverlayTrigger, Popover } from \"react-bootstrap\";\nimport { Link } from \"react-router-dom\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport BackButton from \"./BackButton\";\nimport NextButton from \"./NextButton\";\nimport SkipButton from \"./SkipButton\";\nimport getNextPage from \"./getNextPage\";\nimport { RouterContext } from \"./Onboarding\";\n\nexport default function InvoiceRecipients({\n pageLocator,\n invoiceRecipients,\n setInvoiceRecipients,\n handleDeleteRecipient,\n handleAddRecipient,\n submitForm,\n onboarding_progress,\n}) {\n const route = useContext(RouterContext);\n\n const nextPage = getNextPage(onboarding_progress);\n\n useEffect(() => {\n window.localStorage.setItem(\"routerHistory\", JSON.stringify([...route.get]));\n }, [route.get]);\n\n pageLocator();\n\n const [validated, setValidated] = useState(false);\n\n useEffect(() => {\n const form = document.getElementById(\"onboarding-form\");\n if (invoiceRecipients.length > 0 && form.checkValidity() === true) {\n setValidated(true);\n } else {\n setValidated(false);\n }\n });\n\n return (\n <>\n \n {large}
\n {medium}
\n {small}
\n {welcome}
\n \n In the last year, our clients saw a 178% increase in PPC Revenue and a 105% increase in SEO revenue. We're very excited to see your growth as well!\n Which brings us to our first order of business...\n
\n \n\n
\n \n You are currently looking at {logo}\n
\n \n DataPulse is our proprietary reporting platform where you can see all of your organic traffic projections, keyword rankings, your personal Digital\n Position team, and way, way, more -- all in real time. It will be your way (and our way too) of monitoring your progress and growth.{\" \"}\n The first step to beginning your journey with {route.organization.name} will be to complete this onboarding form within DataPulse.\n
\n\n
\n We try to make onboarding as simple and straight-forward as possible for you. You can view your progress at the top of the page, and you can save\n and come back at any time. If you don't know the answer to a question, feel free to skip it and continue. However, please circle back to as much as\n you possibly can, as this information is very necessary for us to do our best work for you. Any of these answers and settings can be changed at any\n time in 'Account Configuration' later.\n
\n \n\n This section is to be completed by the client and the team member together. If you have arranged an onboarding meeting or call, you should begin the\n meeting before continuing forward below.\n
\n \n\n
\n Invoice Recipients
\n\n
\n \n \n Here we will add emails that will receive invoices. You can add any number of emails here, and invoices will be sent to the provided\n addresses at the end of every month.\n
\nAdd email
\n \n\n
\n \n \n
\n Keyword Groups
\n\n
\n \n \n In this section, you can configure keyword groups. It's very important that these entries are configured correctly - failing to do so can return\n skewed or undesirable reporting. Click 'Show me some examples' to the right to learn more about properly configuring your keyword groups. Labels\n are for reference only and will not affect the reporting (besides how it is titled in the performance dashboard).\n
\n\n Improper configuration of keywords can have misleading results showing for different keyword groups. Please double-check your BKI entries\n before continuing or click 'Show me some examples' if unsure.\n
\n \n\n
\n \n \n
\n Landing Pages
\n\n
\n \n \n On this page, you can set up any landing pages that you may want to track for SEO purposes. You can set the landing page items below to track\n exact landing page URLs (like your homepage), or groups of landing pages that share a common base URL (like product pages).\n
\n\n
\n \n
\n \n \n \n \n
\n \n );\n };\n\n return (\n \n \n {\n setIsEnabled(!isEnabled);\n }}\n label=\"Enable Manual Data Pulls\"\n />\n
\n {props.platforms.map((platform) => {\n return (\n \n {\n (platform.name =\n \"shopify\" && props.shopify_token == null ? (\n \n \n ) : (\n
\n );\n })}\n\n \n
\n \n \n
\n
\n );\n}\n","import React, {useEffect, useContext} from \"react\";\nimport { Button, OverlayTrigger, Popover } from \"react-bootstrap\";\nimport {RouterContext} from \"./Onboarding\"\n\nexport default function NextButton(props) {\n const route = useContext(RouterContext)\n\n let chevronRight = require(\"images/onboarding/chevronRight.png\");\n chevronRight = \n
\n \n \n \n
\n
\n | \n \n {\" \"}\n Date range:{\" \"}\n \n | \n {calendarForm(\"start_date\", moment().subtract(30, \"days\").toDate())} | \n\n \n through\n \n | \n {calendarForm(\"end_date\", moment().subtract(1, \"days\").toDate())} | \n
{props.invalidText}
\n \n }>\n \n \n )}\n \n );\n}\n\n\n\n\n\n","import React, {useContext, useEffect} from \"react\";\nimport { Row, Col, Button, Container } from \"react-bootstrap\";\nimport { Link , useHistory } from \"react-router-dom\";\nimport BackButton from \"./BackButton\";\nimport NextButton from \"./NextButton\";\nimport getNextPage from \"./getNextPage\";\nimport {RouterContext} from \"./Onboarding\"\n\nexport default function NotComplete(props) {\n let history = useHistory();\n const route = useContext(RouterContext)\n\n let chevronRight = require(\"images/onboarding/chevronRight.png\");\n chevronRight =\n Onboarding is not yet completed\n
\n {mobileHideCaution}\n \n \n\n \n {caution}{\" \"}\n
*/}\n \n Onboarding is not yet completed\n
\n {mobileHideCaution}\n \n\n
\n \n \n There are steps that were skipped that still need to be\n completed to finish onboarding. Until those are done, \"Complete Onboarding\" will continue to remain for this client in the left\n navigation of DataPulse.{\" \"}
\n \n To complete the skipped onboarding sections please click the \"Finish Onboarding\"\n button below now, or click \"Complete Onboarding\" in the left\n navigation at any time.\n \n
\n
\n \n \n
\n \n \n
\n Next Up: PPC Configuration
\n\n
\n \n Now we will configure the PPC services. You will be able to set up campaign groups, inflation, scripts, and also manage all of your goals for each subservice.
\n\n
\n \n \n
\n );\n}\n","import React from \"react\";\n\nimport Dashboard from \"../../client_config/ppc_config/display/dashboard/Dashboard\";\n\nexport default function Display(props) {\n return (\n \n
\n );\n}\n","import React, { useState, useEffect, useContext } from \"react\";\nimport { Row, Col, Container, Tab, Nav, Form } from \"react-bootstrap\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport Search from \"./Search\";\nimport Display from \"./Display\";\nimport Social from \"./Social\";\nimport Video from \"./Video\";\nimport BackButton from \"../BackButton\";\nimport NextButton from \"../NextButton\";\nimport SkipButton from \"../SkipButton\";\nimport getNextPage from \"../getNextPage\";\nimport updateParams from \"utils/updateParams.js\";\nimport { RouterContext } from \"../Onboarding\";\n\nexport default function PPCDashboardCustomization(props) {\n const route = useContext(RouterContext);\n\n const nextPage = getNextPage(props.onboarding_progress);\n\n useEffect(() => {\n window.localStorage.setItem(\"routerHistory\", JSON.stringify([...route.get]));\n }, [route.get]);\n props.pageLocator();\n const [tabLocation, setTabLocation] = useState(\"\");\n const [validated, setValidatation] = useState(false);\n\n useEffect(() => {\n let searchParams = new URL(location.href).searchParams;\n let page = searchParams.get(\"page\");\n if (!page || page == \"\") {\n page = \"search\";\n }\n setTabLocation(page);\n }, []);\n\n const selectTab = (key) => {\n setTabLocation(key);\n updateParams(\"page\", key);\n };\n\n const [showBoxes, setShowBoxes] = useState(false);\n \n return (\n \n
\n PPC Dashboard Customization - Services
\n\n
\n \n Would you like to customize your PPC dashboards now or use the default settings?
\n\n
\n \n {\n setShowBoxes(false);\n setValidatation(true);\n props.setSearchDefault(true)\n props.setDisplayDefault(true)\n props.setSocialDefault(true)\n props.setVideoDefault(true)\n }}\n />\n {\n setShowBoxes(true);\n setValidatation(true);\n props.setSearchDefault(false)\n props.setDisplayDefault(false)\n props.setSocialDefault(false)\n props.setVideoDefault(false)\n }}\n />\n
\n \n \n Check the boxes to enable/disable sections, and then click and drag dashboard boxes to reorder how they will appear in your performance\n dashboards:\n
\n\n
\n You will configure the \"All\" PPC dashboard on the next page and available options will be dependent on how the below services are set up.\n
\n \n\n {showBoxes === false && }\n selectTab(k)}>\n \n \n \n {props.search_section.enabled ? (\n \n \n {props.display_section.enabled ? (\n \n \n {props.social_section.enabled ? (\n \n \n {props.video_section.enabled ? (\n \n ) : (\n \n \n \n
\n \n \n
\n
\n )}\n \n
\n \n Search is not currently enabled
\n\n \n
\n
\n )}\n \n
\n \n Display is not currently enabled
\n\n \n
\n
\n )}\n \n
\n \n Social is not currently enabled
\n\n \n
\n
\n )}\n \n
\n \n Video is not currently enabled
\n\n
\n \n \n
\n PPC Dashboard Customization - All
\n\n
\n \n Would you like to customize your PPC dashboards now or use the default settings?
\n\n
\n \n {\n setShowBoxes(false);\n setValidatation(true);\n props.setPpcDefault(true)\n }}\n />\n {\n setShowBoxes(true);\n setValidatation(true);\n props.setPpcDefault(false)\n }}\n />\n
\n \n \n Check the boxes to enable/disable sections, and then click and drag dashboard boxes to reorder how they will appear in your performance\n dashboards:\n
\n \n\n {showBoxes === false && }\n \n \n \n \n \n \n \n
\n \n \n \n {chevronLeft}\n {` Back`}\n \n \n
\n \n \n
\n );\n}\n","import React from \"react\";\n\nimport Dashboard from \"../../client_config/ppc_config/social/dashboard/Dashboard\";\n\nexport default function Social(props) {\n return (\n \n
\n );\n}\n","import React from \"react\";\n\nimport Dashboard from \"../../client_config/ppc_config/video/dashboard/Dashboard\";\n\nexport default function Video(props) {\n return (\n \n
\n );\n}\n","import React, { useState, useEffect, useContext } from \"react\";\nimport { Button, Table, Form, Row, Col, OverlayTrigger, Popover } from \"react-bootstrap\";\nimport { Link } from \"react-router-dom\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport CustomSwitch from \"utils/CustomSwitch\";\nimport PointsofContact from \"../client_config/account_config/services_agreement/PointsOfContact\";\nimport PpcSupportingRoles from \"../client_config/account_config/services_agreement/ppc/PpcSupportingRoles\";\nimport BackButton from \"./BackButton\";\nimport NextButton from \"./NextButton\";\nimport SkipButton from \"./SkipButton\";\nimport getNextPage from \"./getNextPage\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport { RouterContext } from \"./Onboarding\";\n\nexport default function PPCServiceAgreements(props) {\n const route = useContext(RouterContext);\n\n const nextPage = getNextPage(props.onboarding_progress);\n\n useEffect(() => {\n window.localStorage.setItem(\"routerHistory\", JSON.stringify([...route.get]));\n }, [route.get]);\n props.pageLocator();\n const isPpcEnabled = props[`searchEnabled`] || props[`socialEnabled`] || props[`displayEnabled`] || props[`videoEnabled`];\n const [isChecked, setIsChecked] = useState(isPpcEnabled);\n const [searchValidation, setSearchValidation] = useState(false)\n const [socialValidation, setSocialValidation] = useState(false)\n const [displayValidation, setDisplayValidation] = useState(false)\n const [videoValidation, setVideoValidation] = useState(false)\n const [validated, setValidation] = useState(true);\n const removeRow = (id, selector) => {\n if (!isChecked) {\n return undefined;\n }\n if (selector == \"1\") {\n const newArray = props.ppcFeeStructure.filter((el) => el.id !== id);\n\n props.setPpcFeeStructure([...newArray]);\n }\n if (selector == \"2\") {\n const newArray = props.ppcFees.filter((el) => el.id !== id);\n props.setPpcFees([...newArray]);\n }\n };\n const ppcStartDate = new Date(props.ppcStartDate);\n\n const validator = () => {\n setSearchValidation(false)\n setSocialValidation(false)\n setVideoValidation(false)\n setDisplayValidation(false)\n setValidation(false);\n if (!isChecked || (props.ppcFeeStructure.length > 0 && props.ppcPointsOfContact.length > 0 && ppcStartDate.getFullYear() > 2000)) {\n if (props.searchEnabled) {\n if (props.searchAccountLeads.length === 0 || props.searchAccountSupports.length === 0) {\n setSearchValidation(false)\n }\n if (props.searchAccountLeads.length > 0 && props.searchAccountSupports.length > 0)\n if (props.searchUniqueFeeEnabled === false) {\n setSearchValidation(true)\n } else if (props.searchFeeStructure.length > 0) setSearchValidation(true);\n else setSearchValidation(false);\n }\n else {\n setSearchValidation(true)\n }\n if (props.socialEnabled) {\n if (props.socialAccountLeads.length === 0 || props.socialAccountSupports.length === 0) {\n setSocialValidation(false)\n }\n if (props.socialAccountLeads.length > 0 && props.socialAccountSupports.length > 0)\n if (props.socialUniqueFeeEnabled === false) {\n setSocialValidation(true)\n } else if (props.socialFeeStructure.length > 0) setSocialValidation(true);\n else setSocialValidation(false);\n }\n else {\n setSocialValidation(true)\n }\n if (props.videoEnabled) {\n if (props.videoAccountLeads.length === 0 || props.videoAccountSupports.length === 0) {\n setVideoValidation(false)\n }\n if (props.videoAccountLeads.length > 0 && props.videoAccountSupports.length > 0)\n if (props.videoUniqueFeeEnabled === false) {\n setVideoValidation(true)\n } else if (props.videoFeeStructure.length > 0) setVideoValidation(true);\n else setVideoValidation(false);\n } else {\n setVideoValidation(true)\n }\n if (props.displayEnabled) {\n if (props.displayAccountLeads.length === 0 || props.displayAccountSupports.length === 0) {\n setDisplayValidation(false)\n }\n if (props.displayAccountLeads.length > 0 && props.displayAccountSupports.length > 0)\n if (props.searchUniqueFeeEnabled === false) {\n setDisplayValidation(true)\n } else if (props.displayFeeStructure.length > 0) setDisplayValidation(true);\n else setDisplayValidation(false);\n } \n else {\n setDisplayValidation(true)\n }\n if (searchValidation === true && socialValidation === true && videoValidation === true && displayValidation === true) {setValidation(true)}\n if (!props.searchEnabled && !props.displayEnabled && !props.socialEnabled && !props.videoEnabled) setValidation(true);\n }\n else {\n setValidation(false);\n }\n }\n\n useEffect(() => validator());\n return (\n <>\n \n \n
\n \n
\n
\n
\n \n \n
\n PPC Service Agreements
\n\n
\n \n \n Please configure the PPC service agreements below for both overall PPC and by sub-service. We have already enabled any services that you have\n indicated in the beginning of onboarding, but you can make changes here if need be.\n
\nTo complete:
\n\n
Step 1: Choose which services should be enabled
\nStep 2: Choose a start date for each service
\nStep 3: Fill in invoicing information (add fees if applicable)
\nStep 4: Assign points of contact, leads and supports (must assign for every service)
\n \n\n \n
\n\n
\n \n
\n \n
\n );\n })}\n \n \n PPC\n \n }\n variant=\"ppc\"\n customClass=\"d-inline-block\"\n id=\"ob-agree-ppc-enable\"\n />\n
\n \n \n
\n
\n Agreement
\n\n \n props.setPpcFeeStructure([\n ...props.ppcFeeStructure,\n {\n id: uuidv4(),\n flat_fee: \"0\",\n over_ad_spend: \"0\",\n percentage_fee: \"0\",\n flat_fee_enabled: \"0\",\n percentage_fee_enabled: \"0\",\n percentage_fee_total_over: \"total\",\n },\n ])\n }>\n + Add Condition\n \n
\n \n \n \n
\n
\n | \n Select and set shared fee structure \n | \n \n | \n \n {\" \"}\n | \n
|---|---|---|
| \n \n \n Over ad spend \n\n \n charge \n | \n \n \n \n \n \n \n \n | \n \n \n \n \n \n \n \n \n \n {index >= 0 && removeRow(el.id, \"1\")} className=\"fas fa-minus-circle\">}\n | \n
\n \n props.setPpcFees([\n ...props.ppcFees,\n {\n id: uuidv4(),\n label: \"\",\n amount: \"0\",\n status: \"0\",\n enabled: \"0\",\n frequency: \"Monthly\",\n },\n ])\n }>\n + Add fee\n \n
\n \n Active PPC Fees
\n\n View full history\n
\n\n {/* */}\n\n \n \n
\n
\n | \n | \n Frequency\n | \n\n Label\n | \n\n Amount\n | \n\n Status\n | \n
|---|---|---|---|---|
| \n \n \n | \n \n \n \n | \n \n \n \n | \n \n \n \n \n \n \n removeRow(el.id, \"2\")} className={\"fas fa-minus-circle\"}>\n \n | \n \n \n {index === 0 && \"\"}\n {index === 1 && \"\"}\n {index === 2 && \"\"}\n \n | \n
\n \n
\n\n {[\"Search\", \"Social\", \"Display\", \"Video\"].map((section, index) => {\n const sectionName = section.toLowerCase();\n const dataSet = props[`${sectionName}FeeStructure`];\n const greyout = props[`${sectionName}UniqueFeeEnabled`] === true ? null : { opacity: \"0.6\" };\n const greyout2 = props[`${sectionName}UniqueFeeEnabled`] === true ? null : { backgroundColor: \"white\", opacity: \"0.6\" };\n\n const addInnerRow = () => {\n props[`set${section}FeeStructure`]([\n ...props[`${sectionName}FeeStructure`],\n {\n id: uuidv4(),\n flat_fee: \"0\",\n over_ad_spend: \"0\",\n percentage_fee: \"0\",\n flat_fee_enabled: \"0\",\n percentage_fee_enabled: \"0\",\n percentage_fee_total_over: \"total\",\n },\n ]);\n };\n\n const removeInnerRow = (id, enabled, uniqueEnabled) => {\n props[`set${section}FeeStructure`](props[`${sectionName}FeeStructure`].filter((row) => row.id !== id));\n };\n return (\n Configure PPC subservices
\n\n \n
\n \n \n addInnerRow()}>\n + Add Condition\n \n \n\n
\n
\n \n
\n \n \n {section}\n \n }\n variant=\"ppc\"\n id={`${sectionName}-subservice`}\n customClass=\"d-inline-block\"\n isEnabled={props[`${sectionName}Enabled`]}\n setIsEnabled={() => props[`set${section}Enabled`](!props[`${sectionName}Enabled`])}\n />\n
\n\n \n {\n props[`set${section}UniqueFeeEnabled`](false);\n }}\n disabled={!props[`${sectionName}Enabled`]}\n />\n {\n props[`set${section}UniqueFeeEnabled`](true);\n }}\n disabled={!props[`${sectionName}Enabled`]}\n />\n
\n \n \n \n {props[`${sectionName}FeeStructure`] &&\n props[`${sectionName}FeeStructure`].map((el, index) => {\n const flatFeeEnabled = el[\"flat_fee_enabled\"] == \"1\";\n\n const percentageEnabled = el[\"percentage_fee_enabled\"] == \"1\";\n const greyout1 =\n props[`${sectionName}UniqueFeeEnabled`] === true && flatFeeEnabled === true ? null : { opacity: \"0.6\" };\n const greyout2 = props[`${sectionName}UniqueFeeEnabled`] === true && percentageEnabled ? null : { opacity: \"0.6\" };\n return (\n
\n
\n | \n \n \n Over ad spend \n\n\n \n charge \n | \n \n \n \n \n \n \n \n | \n \n \n \n \n \n \n \n {index >= 0 && (\n | \n
\n
\n \n \n
\n \n \n
\n Capabilities and Permissions
\n\n
\n What does the company's development team look like?
\n\n \n setDevelopmentCapabilities(e.target.value)}\n required>\n \n \n \n \n \n
\n \n
\n What does the company's creative team look like?
\n\n \n setCreativeCapabilities(e.target.value)}\n required>\n \n \n \n \n \n
\n Website Permissions
\n \n\n This is where you should dictate permissions in regards to what the marketing team can and cannot make changes to.{\" \"}\n \n It's important to review these options carefully, as the marketing team will reference these answers first before making changes to your web\n properties.\n \n
\n\n
\n Make a global selection below to the left that best suits your preferences, and then customize any exceptions in the custom fields to the right. For\n example, if a client wants no changes made to the website but they are okay with changes to only content specifically, set the Global permissions to\n a 1, and then add 'Content' in the custom fields at a 2 or higher.\n
\n \n\n \n \n setGlobalPermission(4)}\n />\n \n
\n \n setGlobalPermission(3)}\n />\n \n
\n \n setGlobalPermission(2)}\n />\n \n
\n \n setGlobalPermission(1)}\n />\n \n
\n \n \n setIsPermissionsEnabled(!isPermissionsEnabled)}\n id={\"websitepermissionenable\"}\n checked={isPermissionsEnabled}\n label=\"Enable\"\n />\n
\n {customPermissions.map((item, idx) => {\n return isPermissionsEnabled ? (\n \n \n {\n let newRecipients = [...customPermissions];\n newRecipients[idx].website = e.target.value;\n setCustomPermissions(newRecipients);\n }}\n />\n \n\n
\n \n {\n const newPermissions = customPermissions.filter((el) => item.id !== el.id);\n setCustomPermissions([...newPermissions]);\n }}\n className=\"mb-2 fas fa-minus-circle\">\n )}\n \n
\n ) : null;\n })}\n\n \n permissionHandler([...customPermissions, { id: uuidv4(), website: \"\", permission: 1 }])}\n style={{ width: \"120px\", backgroundColor: isPermissionsEnabled ? undefined : \"#70768F\", cursor: isPermissionsEnabled ? undefined : \"default\" }}\n className=\"mt-0 mb-2 btn-sm px-4 ml-2 text-center\"\n variant=\"success\">\n + Add field\n \n \n
\n \n
\n
\n \n Global permissions
\n\nFree to make changes, no notification necessary
\n \nFree to make changes with follow-up email summary
\n \nAll changes require prior approval
\n \n\n {\" \"}\n No changes allowed, or
exceptions only{\" \"}\n
\n Custom permissions\n
\nSet to:
{\" \"}\n\n\n
\n \n \n {firstName} {lastName}\n
\n \n{email}
\n \n{phone}
\n \n\n
\n \n \n
\n PPC Alerts
\n\n
\n \n \n We need to make sure PPC alerts are configured correctly. By default, we have automatically subscribed team\n support/leads accordingly based on how they were assigned in the Service Agreement, but if you need to make any changes or customizations, you can\n do so below.\n
\n\n \n
\n
\n \n selectTab(k)}>\n \n \n \n {\n props.search_section.enabled ?\n \n \n {\n props.social_section.enabled ?\n \n \n {\n props.display_section.enabled ?\n \n \n {\n props.video_section.enabled ?\n \n \n \n
\n \n \n
\n
\n }\n \n
\n \n Search is not currently enabled
\n\n \n
\n
\n }\n \n
\n \n Social is not currently enabled
\n\n \n
\n
\n }\n \n
\n \n Display is not currently enabled
\n\n \n
\n
\n }\n \n
\n \n Video is not currently enabled
\n\n
\n \n \n
\n Pull PPC Data
\n\n
\n \n Would you like to pull data from your accounts now?
\n\n
\n \n {\n setShowBoxes(true);\n setValidation(false);\n }}\n />\n {\n setShowBoxes(false);\n setValidation(true);\n pullResetter();\n }}\n />\n
\n \n \n \n
\n
\n For which accounts?
\n\n {props.pullBoxes.map((platform, idx) => {\n let show = true;\n if (platform[0] == \"Google: SEO\" || platform[0] == \"Google Search Console\" || platform[0] == \"SEMRush\") show = false;\n if (platform[0] == \"Shopify\" && jsDig([\"website_platform\"], props.client_account) != \"0\") show = false;\n if (platform[0] == \"Google Ads\") show = jsDig([\"google_ads\", \"enabled\"], props.search_section.platform_data);\n if (platform[0] == \"Microsoft Ads\") show = jsDig([\"microsoft_ads\", \"enabled\"], props.search_section.platform_data);\n if (platform[0] == \"Google: Video\") show = props.video_section.enabled;\n if (platform[0] == \"Google: Display\") show = props.display_section.enabled;\n if (platform[0] == \"Facebook\") show = props.social_section.enabled;\n const visible = show ? \"flex \" : \"none\";\n return (\n
\n \n {\n pullUpdateHelper(idx, !platform[2]);\n\n if (show) {\n let exist = ppcPullboxes.find((el) => el.includes(true));\n\n if (exist == undefined) setValidation(false);\n else setValidation(true);\n }\n }}\n />\n
\n );\n })}\n Clicking next will initiate a large data pull which could take several hours to complete.
\n \n\n {\n showBoxes ? setOpen(true) : props.submitForm(nextPage.url);\n // props.manualDataPull();\n }}\n // onClick={() => setOpen(true)}\n />\n
\n \n \n \n Team Access\n
\n \n \n \n \n \n {percent.percent()}%\n \n
\n \n \n setPercent((prevState) => ({ ...prevState, currentPage: 0 }))}\n className=\"bar-box\">\n General Info\n
\n \n \n Onboarding Progress
\n \nThe ID can change if a new target location has been selected. To make sure the ID is correct, open the project in SEMRush, and in the 'Position Tracking' tile, select 'View full report'. Copy the ID from the URL.
{projectIdImg}
\n\n const addNewRow = () => {\n //create an object with all of the state fields\n let newRow = {};\n newRow.id = \"\";\n newRow.label = \"\";\n newRow.website = props.website;\n // setValidation(true);\n let accessChecked = props.teamAccess;\n accessChecked[\"SEMRush\"][\"Completed setup\"] = \"1\";\n props.setTeamAccess({ ...accessChecked });\n props.setSemRushIds([...props.semRushIds, newRow]);\n };\n\n useEffect(() => {\n window.localStorage.setItem(\"routerHistory\", JSON.stringify([...route.get]));\n }, [route.get]);\n\n const removeRow = (el) => {\n if (props.semRushIds.length == 1) {\n setValidation(false);\n let accessChecked = props.teamAccess;\n accessChecked[\"SEMRush\"][\"Completed setup\"] = \"0\";\n props.setTeamAccess({ ...accessChecked });\n }\n props.setSemRushIds(props.semRushIds.filter((row, idx) => idx != el));\n };\n useEffect(() => {\n if (props.teamAccess[\"SEMRush\"][\"Completed setup\"] !== \"1\" && showBoxes && props.semRushIds.length == 0) {\n setValidation(false);\n }\n });\n\n const setupBox = (el, idx) => {\n return (\n {projectIdImg}
\n \n
\n
\n );\n };\n return (\n <>\n \n \n \n
\n
\n \n | \n ID: \n | \n \n | \n
| \n Label: \n | \n \n | \n
\n
\n SEMRush Setup
\n\n
\n \n \n Now we will need to set up the client in SEMRush. Follow along with the tutorial video to set up the client in SEMRush under the {route.organization.name}\n account, and then add the project ID's in the field below. You can use the 'Label' field to name them for your own reference (this will not affect\n the data in any way).\n
\n\n
\n \n Do we need to set up SEMRush for this client?
\n\n {\n setShowBoxes(true);\n setValidation(true);\n let accessChecked = props.teamAccess;\n accessChecked[\"SEMRush\"][\"Exist\"] = \"1\";\n\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n {\n setShowBoxes(false);\n setValidation(true);\n let accessChecked = props.teamAccess;\n accessChecked[\"SEMRush\"][\"Exist\"] = \"0\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n \n Provide the information below:\n
\n\n
\n \n \n {props.semRushIds.map((row, idx) => {\n return
\n {setupBox(row, idx)}
;\n })}\n SEMRush API Key:
\n\n
\n \n \n
\n Next up: SEO Configuration
\n\n
\n \n \n Now we will configure the SEO service. You will be able to set up branded keywords, landing pages, and also manage your SEO goals.\n
\n\n
\n \n \n
\n SEO Dashboard Customization
\n\n
\n \n Would you like to customize your SEO dashboards now or use the default settings?
\n\n
\n \n {\n setShowBoxes(false);\n setValidatation(true);\n props.setSeoDefault(true)\n }}\n />\n {\n setShowBoxes(true);\n setValidatation(true);\n props.setSeoDefault(false)\n }}\n />\n
\n \n \n Check the boxes to enable/disable sections, and then click and drag dashboard boxes to reorder how they will appear in your performance\n dashboards:\n
\n \n\n {showBoxes === false && }\n
\n \n
\n \n \n
\n SEO Service Agreements
\n\n
\n \n \n Please configure the SEO service agreement below. If you checked SEO at the beginning of onboarding, we have enabled it here for you. If not, now\n is the opportunity to change it if need be.\n
\nTo complete:
\n\n
Step 1: Choose a start date
\nStep 2: Fill in invoicing information (add fees if applicable)
\nStep 3: Assign points of contact, leads and supports
\n \n\n \n
\n\n
\n \n
\n \n
\n \n \n SEO\n \n }\n setIsEnabled={() => props.setSeoEnabled(!props.seoEnabled)}\n />\n
\n \n \n
\n
\n Agreement
\n\n \n props.setSeoFeeStructure([\n ...props.seoFeeStructure,\n {\n id: uuidv4(),\n flat_fee: \"0\",\n over_ad_spend: \"0\",\n percentage_fee: \"0\",\n flat_fee_enabled: \"0\",\n percentage_fee_enabled: \"0\",\n percentage_fee_total_over: \"total\",\n },\n ])\n }>\n + Add Condition\n \n
\n \n \n \n
\n
\n | \n Select and set shared fee structure \n | \n \n | \n \n | \n
|---|---|---|
| \n \n \n Over revenue \n\n\n \n charge \n | \n \n \n \n \n \n \n \n | \n \n \n \n \n \n \n \n \n \n {index >= 0 && removeRow(el.id, \"1\")} className=\"fas fa-minus-circle \">}\n | \n
\n \n props.setSeoFees([\n ...props.seoFees,\n {\n id: uuidv4(),\n label: \"\",\n amount: \"0\",\n status: \"0\",\n enabled: \"0\",\n status: \"Recurring\",\n frequency: \"Monthly\",\n },\n ])\n }>\n + Add fee\n \n
\n \n Active SEO Fees
\n\n View full history\n
\n\n \n \n
\n
\n | \n | \n Status\n | \n|||
|---|---|---|---|---|
| \n \n \n | \n \n | \n \n | \n \n \n \n \n \n \n removeRow(el.id, \"2\")} className=\"fas fa-minus-circle\">\n \n | \n \n \n {index === 0 && \"Recurring\"}\n {index === 1 && \"Ready to be fulfilled in billing\"}\n {index === 2 && \"Currently disabled, will not show in billing\"}\n \n | \n
\n
\n \n \n
\n Scripts
\n\n
\n \n Would you like to activate any PPC scripts at this time?
\n\n
\n \n {\n setShowBoxes(true);\n setValidation(false);\n checkValidation();\n }}\n />\n {\n setShowBoxes(false);\n setValidation(true);\n removeScripts();\n }}\n />\n
\n \n \n
\n \n \n {exclaimTriangle}\n
\n \n {exclaimTriangleMobile}\n
\n \n Enabling/disabling these scripts without a thorough understanding of the function may have unintended consequences. Please proceed with caution.\n
\n\n
\n \n \n
\n\n SEO Alerts
\n\n
\n \n \n We need to make sure SEO alerts are configured correctly. By default, we have automatically subscribed team\n support/leads accordingly based on how they were assigned in the Service Agreement, but if you need to make any changes or customizations, you can\n do so below.\n
\n\n
\n \n \n
\n Pull SEO Data
\n\n
\n \n Would you like to pull data from your accounts now?
\n\n
\n \n {\n setShowBoxes(true), setValidation(false);\n }}\n />\n {\n setShowBoxes(false), setValidation(true), pullResetter();\n }}\n />\n
\n \n \n \n
\n
\n For which accounts?
\n\n {props.pullBoxes.map((platform, idx) => {\n let show = false;\n if (\n (platform[0] == \"Google: SEO\" && Object.values(jsDig([\"Google Analytics\"], props.client_account.team_access)).includes(\"1\")) ||\n (platform[0] == \"Google Search Console\" && Object.values(jsDig([\"Google Search Console\"], props.client_account.team_access)).includes(\"1\")) ||\n (platform[0] == \"SEMRush\" && Object.values(jsDig([\"SEMRush\"], props.client_account.team_access)).includes(\"1\"))\n ) {\n show = true;\n }\n const visible = show ? \"flex \" : \"none\";\n return (\n
\n \n {\n pullUpdateHelper(idx, !platform[2]);\n if (show) {\n let exist = seoPullboxes.find((el) => el.includes(true));\n if (exist == undefined) setValidation(false);\n else setValidation(true);\n }\n }}\n />\n
\n );\n })}\n Clicking next will initiate a large data pull which could take several hours to complete.
\n \n\n {\n showBoxes ? setOpen(true) : props.submitForm(nextPage.url);\n // props.manualDataPull();\n // props.submitForm(nextPage.url);\n }}\n />\n props.submitForm(nextPage.url)}\n open={open}\n handleClose={handleClose}\n />\n
\n \n \n
\n Next Up: Service Agreements
\n\n
\n \n \n Congrats on making it through the basic setup and access! The client can take a deep breath, they are done for now!
\n
On the next two pages, we need to configure the service agreements for the services and sub-services that you selected in the beginning.\n We will set up the agreement information, and also create the makeup of the company's marketing team by providing leads, support, and points of\n contact for each specific service. We have already enabled/disabled services for you based on your answers from earlier, but if you need to make\n changes to the services being provided you can do so here as well.\n
\n \n The remainder of onboarding for this account is to be completed by the team member only. If you are still on the onboarding meeting or call,\n this section can be completed after that has been concluded.\n \n
\n \n\n
\n \n What services will be provided?
\n \n{ppc ? ppcA : ppcI}
\n \n
\n \n\n PPC
\n{seo ? seoA : seoI}
\n\n \n
\n \n \n SEO
\n\n \n
\n \n
\n
\n\n Select PPC sub-services
\n \n\n {services.map((service, idx) => {\n return (\n {\n service[4](!service[1]);\n }}\n className={service[1] ? \"active-box-small \" : \"choose-box-small\"}>\n {service[1] ? service[2] : service[3]}\n\n
\n \n \n
\n \n );\n })}\n {service[0]}
\n\n {\n // Some pages won't be necessary to fill out\n let pageNames = [];\n let incompletePageNames = [];\n if (!searchEnabled) {\n pageNames.push(\"search_goals\");\n } else {\n incompletePageNames.push(\"search_goals\");\n }\n if (!socialEnabled) {\n pageNames.push(\"social_goals\");\n pageNames.push(\"social_conversions\");\n } else {\n incompletePageNames.push(\"social_goals\");\n incompletePageNames.push(\"social_conversions\");\n }\n if (!displayEnabled) {\n pageNames.push(\"display_goals\");\n } else {\n incompletePageNames.push(\"display_goals\");\n }\n if (!videoEnabled) {\n pageNames.push(\"video_goals\");\n } else {\n incompletePageNames.push(\"video_goals\");\n }\n if (!searchEnabled && !displayEnabled && !videoEnabled) {\n pageNames.push(\"scripts\");\n } else {\n incompletePageNames.push(\"scripts\");\n }\n if (client_account.account_type === \"leadgen\") {\n pageNames.push(\"inflation\");\n if (!searchEnabled && !socialEnabled && !displayEnabled && !videoEnabled) {\n pageNames.push(\"ppc_service_agreements\");\n pageNames.push(\"ppc_configuration_intro\");\n pageNames.push(\"track_specific_action_ids\");\n pageNames.push(\"campaign_groups\");\n pageNames.push(\"ppc_data_pull\");\n pageNames.push(\"all_ppc_goals\");\n pageNames.push(\"ppc_dashboard_customization\");\n pageNames.push(\"ppc_dashboard_customization_all\");\n pageNames.push(\"ppc_alerts\");\n pageNames.push(\"datafeedwatch_install\");\n } else {\n incompletePageNames.push(\"ppc_service_agreements\");\n incompletePageNames.push(\"ppc_configuration_intro\");\n incompletePageNames.push(\"track_specific_action_ids\");\n incompletePageNames.push(\"campaign_groups\");\n incompletePageNames.push(\"ppc_data_pull\");\n incompletePageNames.push(\"all_ppc_goals\");\n incompletePageNames.push(\"ppc_dashboard_customization_all\");\n incompletePageNames.push(\"ppc_alerts\");\n incompletePageNames.push(\"datafeedwatch_install\");\n }\n }\n if (client_account.account_type === \"ecommerce\") {\n if (!searchEnabled && !socialEnabled && !displayEnabled && !videoEnabled) {\n pageNames.push(\"ppc_service_agreements\");\n pageNames.push(\"ppc_configuration_intro\");\n pageNames.push(\"track_specific_action_ids\");\n pageNames.push(\"inflation\");\n pageNames.push(\"campaign_groups\");\n pageNames.push(\"ppc_data_pull\");\n pageNames.push(\"all_ppc_goals\");\n pageNames.push(\"ppc_dashboard_customization\");\n pageNames.push(\"ppc_dashboard_customization_all\");\n pageNames.push(\"ppc_alerts\");\n pageNames.push(\"datafeedwatch_install\");\n } else {\n incompletePageNames.push(\"ppc_service_agreements\");\n incompletePageNames.push(\"ppc_configuration_intro\");\n incompletePageNames.push(\"track_specific_action_ids\");\n incompletePageNames.push(\"campaign_groups\");\n incompletePageNames.push(\"ppc_data_pull\");\n incompletePageNames.push(\"all_ppc_goals\");\n incompletePageNames.push(\"ppc_dashboard_customization\");\n incompletePageNames.push(\"ppc_dashboard_customization_all\");\n incompletePageNames.push(\"ppc_alerts\");\n incompletePageNames.push(\"datafeedwatch_install\");\n incompletePageNames.push(\"inflation\");\n }\n }\n if (!seo) {\n pageNames.push(\"seo_service_agreements\");\n pageNames.push(\"seo_configuration_intro\");\n pageNames.push(\"keyword_groups\");\n pageNames.push(\"landing_pages\");\n pageNames.push(\"semrush_setup\");\n pageNames.push(\"google_analytics_goal_tracking\");\n pageNames.push(\"seo_data_pull\");\n pageNames.push(\"google_my_business_access\");\n pageNames.push(\"seo_goals\");\n pageNames.push(\"seo_dashboard_customization\");\n pageNames.push(\"seo_alerts\");\n } else {\n incompletePageNames.push(\"seo_service_agreements\");\n incompletePageNames.push(\"seo_configuration_intro\");\n incompletePageNames.push(\"keyword_groups\");\n incompletePageNames.push(\"landing_pages\");\n incompletePageNames.push(\"semrush_setup\");\n incompletePageNames.push(\"google_analytics_goal_tracking\");\n incompletePageNames.push(\"seo_data_pull\");\n incompletePageNames.push(\"seo_goals\");\n incompletePageNames.push(\"seo_dashboard_customization\");\n incompletePageNames.push(\"seo_alerts\");\n }\n completePages(pageNames.map((page) => `/datapulse/onboarding/${page}`));\n incompletePageFunc(incompletePageNames.map((page) => `/datapulse/onboarding/${page}`));\n }}\n />\n
\n \n You cannot skip the last page
\n \n }>\n| Label | \nID | \n\n\n |
| \n | \n \n | \n \n {index >= 1 && (\n handleDelete(index)}>\n )}\n | \n
\n
\n Social Conversions
\n\n
\n \n Choose the account-level conversion objectives for Facebook & Tiktok.
\n\n {\n props.setFacebookConversionObjective(e.target.value);\n setValidatation(true);\n }}\n style={{ width: \"256px\", paddingLeft: \"20px\", marginLeft: \"3px\" }}>\n {}\n \n {Object.keys(props.facebook_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.facebook_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n {props.facebookConversionObjective == \"custom_conversions\" && (\n
\n \n Facebook Objective
\n\n {\n props.setTiktokConversionObjective(e.target.value);\n setValidatation(true);\n }}\n style={{ width: \"256px\", paddingLeft: \"20px\", marginLeft: \"3px\" }}>\n {}\n \n {Object.keys(props.tiktok_conversion_objectives).map((objectiveName) => {\n const objectiveInt = props.tiktok_conversion_objectives[objectiveName];\n return (\n \n );\n })}\n \n
\n \n Tiktok Objective
\n\n
\n \n \n
\n DataFeedWatch Install
\n\n
\n \n \n On this page you will install DataFeedWatch.{\" \"}\n \n Please click here\n {\" \"}\n to open a new tab with detailed instructions on how to set up properly, and then check the box to indicate that setup is done and the custom feed\n is configured.\n
\n\n
\n \n Do we need to set up DataFeedWatch for this client?
\n\n {\n setShowBoxes(true);\n setValidation(true);\n }}\n />\n {\n setShowBoxes(false);\n setValidation(true);\n }}\n />\n
\n \n \n
\n \n \n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"DataFeedWatch\"][\"Completed setup\"] = props.teamAccess[\"DataFeedWatch\"][\"Completed setup\"] == \"1\" ? \"0\" : \"1\";\n accessChecked[\"DataFeedWatch\"][\"Completed setup\"] == \"1\" && setValidation(true);\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n \n \n
\n Grant Facebook Ads Access
\n\n
\n \n \n On this page you will grant access to Facebook Ads. Please {/*watch the video for the detailed instruction on how to grant access properly, and then*/}\n check the box to indicate the access level granted. It's important to note that checking the access level boxes are solely for reference, and will\n not perform any actions in regards to granting access to your account.\n
\nAuthenticate with Facebook:
\n \n\n
\n \n \n
\n \n {authButton(props.api_platforms[\"facebook_ads\"])}\n
\n {props.api_platforms[\"facebook_ads\"][\"authenticated\"] ?\n \"You have already authenticated with Facebook Ads. If you need access to clients on a different account, reset your token and reauthenticate.\"\n : \"You must go through the authentication process before you can pull data from Facebook Ads!\"\n }\n
\n\n
\n \n \n \n \n {props.facebookAdsIds.map((el, idx) => {\n return (\n
\n
\n Facebook Ads ID
\n| \n | \n
\n
\n Complete as many of the below steps as possible, and check to confirm.
\n\n
\n \n \n \n {\n setUserGrantAccess(!userGrantAccess);\n }}\n />\n
\n\n \n
\n\n Please indicate access granted.
\n\n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Facebook Ads\"][\"Restricted\"] = \"0\";\n accessChecked[\"Facebook Ads\"][\"Full\"] = props.teamAccess[\"Facebook Ads\"][\"Full\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Facebook Ads\"][\"Full\"] = \"0\";\n accessChecked[\"Facebook Ads\"][\"Restricted\"] = props.teamAccess[\"Facebook Ads\"][\"Restricted\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n \n Note: Facebook Ads requires it's own specific process to grant access. Make sure to double-check with the client that all necessary steps have\n been taken, all necessary access is granted, and then check the box to confirm.\n
\n\n
\n \n \n
\n Grant Google Ads Access
\n\n
\n \n \n On this page you will grant access to Google Ads. First, you can provide your account ID's below. This will be used in DataPulse and will\n additionally give {route.organization.name} the means to request access to your account. Once access is requested, the client can log into their Google Ads\n account and approve.\n
\nAuthenticate with Google:
\n \n\n {authButton(props.api_platforms[\"google_ads\"])}\n
\n \n {props.api_platforms[\"google_ads\"][\"authenticated\"] ?\n \"You have already authenticated with Google Ads. If you need access to clients on a different account, reset your token and reauthenticate.\"\n : \"You must go through the authentication process before you can pull data from Google Ads!\"\n }\n
\nGoogle Ads MCC ID (No '-'s):
\n{props.mccId && props.mccId != \"\" ?\n \"MCC ID has already been set. If the value above is incorrect go to API Access to change it.\"\n : \"MCC ID must be set to pull data from Google Ads.\"\n }\n
\n \nProvide your account information below:
\n \n\n
\n ) : (\n <>\n {[\"Search\", \"Display\", \"Video\"].map((section, idx) => {\n return (\n \n \n \n
\n
\n \n | \n ID\n | \n\n |
| \n | \n
{section}
\n \n\n \n \n
\n
\n \n \n );\n })}\n \n )}\n | \n ID\n | \n\n\n |
| \n | \n
Email to grant access to:
\nsupport@digitalposition.com
\n \n\n
\n Complete as many of the below steps as possible, and check to confirm.
\n\n
\n \n \n \n {\n setIdProvided(!idProvided);\n }}\n dynamic\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Ads\"][\"Requested\"] = props.teamAccess[\"Google Ads\"][\"Requested\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n setAccessGranted(!accessGranted);\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Ads\"][\"Restricted\"] = 0;\n accessChecked[\"Google Ads\"][\"Full\"] = 0;\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n\n Please indicate access granted.
\n\n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Ads\"][\"Restricted\"] = \"0\";\n accessChecked[\"Google Ads\"][\"Full\"] = props.teamAccess[\"Google Ads\"][\"Full\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Ads\"][\"Full\"] = \"0\";\n accessChecked[\"Google Ads\"][\"Restricted\"] = props.teamAccess[\"Google Ads\"][\"Restricted\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n \n In Analytics, apply the segment you wish to use and check the URL for the parameter '_.useg'. The segment ID is everything that follows the 'user' string. For pulling a built-in segment, take the number after 'builtin' and add a hyphen '-' before.
{segmentImg}
\n\n useEffect(() => {\n window.localStorage.setItem(\"routerHistory\", JSON.stringify([...route.get]));\n props.googleAnalyticsIds.map((googleAnalyticsId, index) => {\n handleIdChange(index, \"custom_segment\", \"\");\n });\n }, [route.get]);\n const [userGrantAccess, setUserGrantAccess] = useState(\n props.teamAccess[\"Google Analytics\"][\"Full\"] == \"1\" || props.teamAccess[\"Google Analytics\"][\"Restricted\"] == \"1\"\n );\n const handleIdDelete = (targetIndex) => {\n let newIds = props.googleAnalyticsIds.filter((id) => {\n return targetIndex != id.frontId;\n });\n props.setGoogleAnalyticsIds(newIds);\n };\n\n const handleIdChange = (targetIndex, property, value) => {\n let newIds = props.googleAnalyticsIds.map((id, index) => {\n let newId = id;\n if (index == targetIndex) {\n newId[property] = value;\n }\n return newId;\n });\n props.setGoogleAnalyticsIds(newIds);\n };\n\n props.pageLocator();\n\n const [validated, setValidated] = useState(false);\n\n useEffect(() => {\n const form = document.getElementById(\"onboarding-form\");\n if ((form.checkValidity() === true) && (props.googleAnalyticsIds.length > 0) && ((props.teamAccess[\"Google Analytics\"][\"Full\"] == \"1\") || props.teamAccess[\"Google Analytics\"][\"Restricted\"] == \"1\")) {\n setValidated(true);\n } else {\n setValidated(false);\n }\n });\n\n const authenticateFunction = (platform) => {\n window.open(platform[\"auth_url\"], '_blank');\n };\n\n const deauthorizeFunction = (platform) => {\n window.open(platform[\"deauth_url\"], '_blank');\n };\n\n const resetMessage = (platformName) => {\n return (`Resetting ${capitalize(platformName)} token will require you to authenticate again`)\n }\n\n const authButton = (platform) => {\n if (platform.authenticated) {\n return (\n <>\n \n \n )\n } else {\n return (\n <>\n \n \n )\n }\n }\n\n let firstImg = require(\"images/analytics-screenshot-1.png\");\n let secondImg = require(\"images/analytics-screenshot-2.png\");\n firstImg = {segmentImg}
\n There are 2 types of Google Analytics properties, GA4 and UA.\n
\n
\n For UA, the ID to use in DataPulse is the view ID. That can be extracted from the URL after you select the relevant view:\n {firstImg}\n
\n The view ID is the number that comes after the 'p' in the URL.\n
\n
\n For GA4, the ID to use is the profile ID. That can also be extracted from the URL after you select the relevant property:\n {secondImg}\n
\n The property ID is the number that comes after the 'p' in the URL.\n
\n \n )\n }\n\n return (\n <>\n \n
\n For UA, the ID to use in DataPulse is the view ID. That can be extracted from the URL after you select the relevant view:\n {firstImg}\n
\n The view ID is the number that comes after the 'p' in the URL.\n
\n
\n For GA4, the ID to use is the profile ID. That can also be extracted from the URL after you select the relevant property:\n {secondImg}\n
\n The property ID is the number that comes after the 'p' in the URL.\n
\n
\n Grant Google Analytics Access
\n\n
\n \n \n On this page you will grant access to Google Analytics. Provide your Account ID's below, and use the 'Label' fields to name elements for your own\n reference (this will not affect data in any way). You can then check the access level that you have granted your team. It's important to note that\n checking the access level boxes are solely for reference, and will not perform any actions in regards to granting access to your account.\n
\nAuthenticate with Google:
\n \n\n
\n \n \n {authButton(props.api_platforms[\"google_analytics\"])}\n
\n {props.api_platforms[\"google_analytics\"][\"authenticated\"] ?\n \"You have already authenticated with Google Analytics. If you need access to clients on a different account, reset your token and reauthenticate.\"\n : \"You must go through the authentication process before you can pull data from Google Analytics!\"\n }\n
\nProvide your account information below:
\n \n\n {\n props.setGoogleAnalyticsIds((prevState) => [...prevState, { frontId: uuidv4() }]);\n }}\n value=\"+ Add Google Analytics ID\"\n variant=\"success\"\n />\n \n
\n \n \n \n \n
\n
\n | \n Label\n | \n \n ID\n \n | \n \n \n Add custom segment ID\n \n \n | \n \n |
| \n | \n \n | \n \n \n \n | \n \n handleIdDelete(googleAnalyticsId.frontId)} className=\" pl-2 fas fa-minus-circle\">\n | \n
Email to grant access to:
\nsupport@digitalposition.com
\n \n\n
\n Complete as many of the below steps as possible, and check to confirm.
\n\n
\n \n \n setUserGrantAccess(!userGrantAccess)}\n />\n
\n \n
\n\n Please indicate access granted.
\n\n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Analytics\"][\"Restricted\"] = \"0\";\n accessChecked[\"Google Analytics\"][\"Full\"] = props.teamAccess[\"Google Analytics\"][\"Full\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Analytics\"][\"Full\"] = \"0\";\n accessChecked[\"Google Analytics\"][\"Restricted\"] = props.teamAccess[\"Google Analytics\"][\"Restricted\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n \n \n
\n Grant Google Merchant Access
\n\n
\n \n \n On this page you will grant access to Google Merchant. Please {/*watch the video for the detailed instruction on how to grant access properly, and\n then */}check the box to indicate the access level granted. It's important to note that checking the access level boxes are solely for reference, and\n will not perform any actions in regards to granting access to your account.\n
\nEmail to grant access to:
\nsupport@digitalposition.com
\n \n\n {\n setUserGrantAccess(!userGrantAccess);\n }}\n />\n
\n \n
\n Access level granted:
\n\n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Merchant\"][\"Restricted\"] = \"0\";\n accessChecked[\"Google Merchant\"][\"Full\"] = props.teamAccess[\"Google Merchant\"][\"Full\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Merchant\"][\"Full\"] = \"0\";\n accessChecked[\"Google Merchant\"][\"Restricted\"] = props.teamAccess[\"Google Merchant\"][\"Restricted\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n \n
\n \n \n
\n \n \n
\n Grant Google Business Access
\n\n
\n \n \n On this page you will grant access to Google Business. Please check the box to indicate the access level granted. It's important to note that checking the access level boxes are solely for reference, and\n will not perform any actions in regards to granting access to your account.\n
\n\n
\n Complete as many of the below steps as possible, and check to confirm.
\n\n
\n \n {/* \n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Business\"][\"Restricted\"] = props.teamAccess[\"Google Business\"][\"Restricted\"] == \"0\" ? \"0\" : \"1\";\n setUserGrantAccess(!userGrantAccess);\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n Access level granted:
\n\n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Business\"][\"Restricted\"] = \"0\";\n accessChecked[\"Google Business\"][\"Full\"] = props.teamAccess[\"Google Business\"][\"Full\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Business\"][\"Full\"] = \"0\";\n accessChecked[\"Google Business\"][\"Restricted\"] = props.teamAccess[\"Google Business\"][\"Restricted\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n \n Note: Google Business requires it's own specific process to grant access. Make sure to double-check with the client and other team members\n that all necessary steps have been taken, all necessary access are granted, and then check the box to confirm.\n
\n\n
\n \n \n
\n Grant Google Search Console Access
\n\n
\n \n \n On this page you will grant access to Google Search Console. Please check the box to indicate the access level granted. It's important to note that checking the access level boxes are solely for reference,\n and will not perform any actions in regards to granting access to your account.\n
\nAuthenticate with Google:
\n \n\n
\n \n \n {authButton(props.api_platforms[\"google_webmasters\"])}\n
\n {props.api_platforms[\"google_webmasters\"][\"authenticated\"] ?\n \"You have already authenticated with Google Search Console. If you need access to clients on a different account, reset your token and reauthenticate.\"\n : \"You must go through the authentication process before you can pull data from Google Search Console!\"\n }\n
\n\n
\n Complete as many of the below steps as possible, and check to confirm.
\n\n
\n \n {/* \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Search Console\"][\"Restricted\"] = \"0\";\n accessChecked[\"Google Search Console\"][\"Full\"] = \"0\";\n setUserGrantAccess(!userGrantAccess);\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n\n Please indicate access granted.
\n\n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Search Console\"][\"Restricted\"] = \"0\";\n accessChecked[\"Google Search Console\"][\"Full\"] = props.teamAccess[\"Google Search Console\"][\"Full\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Google Search Console\"][\"Full\"] = \"0\";\n accessChecked[\"Google Search Console\"][\"Restricted\"] = props.teamAccess[\"Google Search Console\"][\"Restricted\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n Property is a domain property?
\n \n {\n let domainChecked\n if (props.domainProperty === undefined)\n {\n domainChecked = true\n }\n if (props.domainProperty === true)\n {\n domainChecked = undefined\n }\n if (props.domainProperty === false)\n {\n domainChecked = true\n }\n props.setDomainProperty(domainChecked);\n }}\n />\n
\n \n {\n let domainChecked\n if (props.domainProperty === undefined)\n {\n domainChecked = false\n }\n if (props.domainProperty === true)\n {\n domainChecked = false\n }\n if (props.domainProperty === false)\n {\n domainChecked = undefined\n }\n props.setDomainProperty(domainChecked);\n }}\n />\n
\n \n
\n \n \n
\n Grant Microsoft Ads Access
\n\n
\n \n \n On this page you will grant access to Microsoft Ads. First, provide your account ID below. This will be used in DataPulse and will additionally\n give {route.organization.name} the means to request access to your account. Once access is requested, the client can log into their Microsoft Ads account\n and approve.\n
\nAuthenticate with Microsoft:
\n \n\n
\n \n \n {authButton(props.api_platforms[\"microsoft_ads\"])}\n
\n {props.api_platforms[\"microsoft_ads\"][\"authenticated\"] ?\n \"You have already authenticated with Microsoft Ads. If you need access to clients on a different account, reset your token and reauthenticate.\"\n : \"You must go through the authentication process before you can pull data from Microsoft Ads!\"\n }\n
\nProvide your account information below:
\n \n\n
\n \n \n \n \n
\n
\n | \n ID\n | \n\n\n |
| \n | \n
Email to grant access to:
\nsupport@digitalposition.com
\n \n\n
\n \n {example}
\n \n
\n \n Note: Microsoft Ads account IDs must now be taken from the URL. Select the account from the initial list of accounts, then check the url for\n the \"aid\" parameter. The account id directly follows the = symbol.\n
\n\n
\n Complete as many of the below steps as possible, and check to confirm.
\n\n
\n \n \n \n setIdProvided(!idProvided)}\n dynamic\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Microsoft Ads\"][\"Requested\"] = props.teamAccess[\"Microsoft Ads\"][\"Requested\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n setAccessGranted(!accessGranted);\n let accessChecked = props.teamAccess;\n accessChecked[\"Microsoft Ads\"][\"Exist\"] = \"1\";\n\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n\n Please indicate access granted
\n\n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Microsoft Ads\"][\"Restricted\"] = \"0\";\n accessChecked[\"Microsoft Ads\"][\"Full\"] = props.teamAccess[\"Microsoft Ads\"][\"Full\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Microsoft Ads\"][\"Full\"] = \"0\";\n accessChecked[\"Microsoft Ads\"][\"Restricted\"] = props.teamAccess[\"Microsoft Ads\"][\"Restricted\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n \n ;\n\n return (\n <>\n \n
\n Grant Shopify Access
\n\n
\n \n \n On this page you will grant access to Shopify, which requires a unique process to grant access. There are three steps below that include providing\n the client store URL, having access requested, and then the client granting said access.\n
\nFirst, enter your Shopify store URL:
\n \n\n .myshopify.com\n
\n \n\n
\n \n Next you will need to grant {route.organization.name} access to the account. Check the boxes below to confirm they've been completed.\n
\n\n
\n Complete as many of the below steps as possible, and check to confirm.
\n\n
\n \n \n setUrlProvided(!urlProvided)}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Shopify\"][\"Requested\"] = props.teamAccess[\"Shopify\"][\"Requested\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Shopify\"][\"Full\"] = \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n\n \n
\n \n
\n \n Will Shopify data be pulled utilizing all sales channels or only the online store?\n
\n\n {props.setShopifyChannel(\"online_store\");\n setRadio(true)}}\n />\n {props.setShopifyChannel(\"overall\");\n setRadio(true)}}\n />\n
\n \n
\n \n ;\n const authenticateButton = (\n \n
\n Grant DataPulse Access to Shopify
\n\n
\n \n Now you will install the DataPulse Bridge to the client's Shopify store. This will allow DataPulse to connect and pull metrics and display them in the dashboards.\n
\n\n
\n \n {getFullShopifyUrl(props.shopifyUrl)}
\n\n
\n \n Authenticate your account with one of the two methods below. The green authenticate button will attempt to authenticate automatically,\n or click the blue button to copy the URL (then paste in your browser) to authenticate manually.\n
\n\n {authenticateButton}\n {copyButton}\n
\n \n \n
\n \n \n
\n Next Up: Team Access
\n\n
\n \n \n On this page we'll need to select all of the platforms that the company has accounts with. Then we will go through each of these one at a time on\n the next few pages and provide information and ID's so that the marketing team can do what they do best. Now would be a good opportunity to pause\n and get in touch with anyone who may have this information handy, like company IT specialists and account managers.{\" \"}\n \n You can skip and come back to any of the upcoming sections, but we must stress that this may be detrimental to your teams work, and failing to\n provide this information could potentially impede progress and optimal results.\n \n
\n\n Please select the platforms that the company will be utilizing that we either need to set-up OR be given access to:\n
\n\n {platforms.map((platform, idx) => {\n return (\n
\n \n \n {\n let accessChecked = props.teamAccess;\n const currentValue = accessChecked[platform][\"Exist\"] == \"1\";\n accessChecked[platform][\"Exist\"] = currentValue == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n );\n })}\n \n {\n let completePagesNames = Object.keys(props.teamAccess).filter(\n (platform) => parseInt(props.teamAccess[platform][\"Exist\"]) !== 1 && (platform != \"SEMRush\") & (platform != \"DataFeedWatch\")\n );\n\n !props.seo_section.enabled && completePagesNames.push(\"SEMRush\");\n let incompletePagesNames = Object.keys(props.teamAccess).filter((platform) => parseInt(props.teamAccess[platform][\"Exist\"]) == 1);\n let pageNames = completePagesNames.map((page) =>\n page == \"DataFeedWatch\" ? page.toLowerCase().replaceAll(\" \", \"_\") + \"_install\" : page.toLowerCase().replaceAll(\" \", \"_\") + \"_access\"\n );\n let inCompletepageNames = incompletePagesNames.map((page) =>\n page == \"DataFeedWatch\" ? page.toLowerCase().replaceAll(\" \", \"_\") + \"_install\" : page.toLowerCase().replaceAll(\" \", \"_\") + \"_access\"\n );\n\n completePages(pageNames.map((page) => `/datapulse/onboarding/${page}`));\n incompletePages(inCompletepageNames.map((page) => `/datapulse/onboarding/${page}`));\n\n if (props.webPlatform !== 0) {\n completePages([`shopify_access`, `shopify_authenticate`].map((page) => `/datapulse/onboarding/${page}`));\n } else {\n incompletePages([`shopify_access`, `shopify_authenticate`].map((page) => `/datapulse/onboarding/${page}`));\n }\n }}\n />\n
\n \n \n
\n Grant Tiktok Ads Access
\n\n
\n \n \n On this page you will grant access to Tiktok Ads. Please {/*watch the video for the detailed instruction on how to grant access properly, and then*/}\n check the box to indicate the access level granted. It's important to note that checking the access level boxes are solely for reference, and will\n not perform any actions in regards to granting access to your account.\n
\nAuthenticate with Tiktok:
\n \n\n
\n \n \n
\n \n {authButton(props.api_platforms[\"tiktok_ads\"])}\n
\n {props.api_platforms[\"tiktok_ads\"][\"authenticated\"] ?\n \"You have already authenticated with Tiktok Ads. If you need access to clients on a different account, reset your token and reauthenticate.\"\n : \"You must go through the authentication process before you can pull data from Tiktok Ads!\"\n }\n
\n\n
\n \n \n \n \n {props.tiktokAdsIds.map((el, idx) => {\n return (\n
\n
\n Tiktok Ads ID
\n| \n | \n
\n
\n Complete as many of the below steps as possible, and check to confirm.
\n\n
\n \n \n \n {\n setUserGrantAccess(!userGrantAccess);\n }}\n />\n
\n\n \n
\n\n Please indicate access granted.
\n\n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Tiktok Ads\"][\"Restricted\"] = \"0\";\n accessChecked[\"Tiktok Ads\"][\"Full\"] = props.teamAccess[\"Tiktok Ads\"][\"Full\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Tiktok Ads\"][\"Full\"] = \"0\";\n accessChecked[\"Tiktok Ads\"][\"Restricted\"] = props.teamAccess[\"Tiktok Ads\"][\"Restricted\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n \n Note: Tiktok Ads requires it's own specific process to grant access. Make sure to double-check with the client that all necessary steps have\n been taken, all necessary access is granted, and then check the box to confirm.\n
\n\n
\n \n \n
\n Grant YouTube Access
\n\n
\n \n \n On this page you will grant access to YouTube. Please check\n the box to indicate the access level granted. It's important to note that checking the access level boxes are solely for reference, and will not\n perform any actions in regards to granting access to your account.\n
\n\n
\n Complete as many of the below steps as possible, and check to confirm.
\n\n
\n \n {/* \n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Youtube\"][\"Standard\"] = props.teamAccess[\"Youtube\"][\"Standard\"] == \"1\" ? \"0\" : \"1\";\n setAccessGranted(!accessGranted);\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Youtube\"][\"Restricted\"] = \"0\";\n accessChecked[\"Youtube\"][\"Full\"] = props.teamAccess[\"Youtube\"][\"Full\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n {\n let accessChecked = props.teamAccess;\n accessChecked[\"Youtube\"][\"Full\"] = \"0\";\n accessChecked[\"Youtube\"][\"Restricted\"] = props.teamAccess[\"Youtube\"][\"Restricted\"] == \"1\" ? \"0\" : \"1\";\n props.setTeamAccess({ ...accessChecked });\n }}\n />\n
\n \n
\n \n Note: YouTube requires it's own specific process to grant access. Make sure to double-check with the client that all necessary steps have been\n taken, all necessary access are granted, and then check the box to confirm.\n
\n\n
\n \n Virtual + In-Store Appointments. Book Today.
', 'Free Domestic Shipping + Shop Our Sale.
', 'Shop our Cluster Rings + Classic Bands
', 'Read our Customer Reviews
', 'Free 2-day shipping for domestic orders valued over $500.'];\nlet counter = 0;\nconst elem = document.getElementById(\"top-bar\");\nconst inst = setInterval(change, 5000);\n\nfunction change() {\n elem.innerHTML = text[counter];\n counter++;\n if (counter >= text.length) {\n counter = 0;\n\n }\n}","import React, { useState, useEffect, useContext } from \"react\";\nimport { Row, Col, Button, Form } from \"react-bootstrap\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport CustomTooltip from \"utils/CustomTooltip\";\nimport BackButton from \"./BackButton\";\nimport NextButton from \"./NextButton\";\nimport SkipButton from \"./SkipButton\";\nimport getNextPage from \"./getNextPage\";\nimport { RouterContext } from \"./Onboarding\";\nimport { capitalize } from \"lodash\";\nexport default function TrackSpecificACtionIds(props) {\n const route = useContext(RouterContext);\n\n const nextPage = getNextPage(props.onboarding_progress);\n useEffect(() => {\n window.localStorage.setItem(\"routerHistory\", JSON.stringify([...route.get]));\n }, [route.get]);\n props.pageLocator();\n const sectionName = [\"Search\", \"Display\", \"Video\"];\n const sectionName2 = [\"Search\", \"Display\", \"Video\"];\n\n console.log(props.conversionActions.search.length)\n const [searchActive, setSearchActive] = useState(props.conversionActions.search.lengh > 0 ? false : true);\n const [displayActive, setDisplayActive] = useState(props.conversionActions.display.lengh > 0 ? false : true);\n const [videoActive, setVideoActive] = useState(props.conversionActions.video.lengh > 0 ? false : true)\n const [showBoxes, setShowBoxes] = useState(searchActive ? true : displayActive ? true : videoActive ? true : false);\n const [validated, setValidation] = useState(false);\nconsole.log(searchActive)\n const displayHelper = (section) => {\n section = section.toLowerCase();\n\n if (section === \"search\") {\n return searchActive;\n }\n if (section === \"display\") {\n return displayActive;\n }\n if (section === \"video\") {\n return videoActive;\n }\n };\n useEffect(() => {\n if (!(searchActive || displayActive || videoActive) && showBoxes) {\n setValidation(false);\n }\n });\n const conversionActionBox = (section) => {\n const sectionKey = section.toLowerCase();\n\n const conversionActions = props.conversionActions[sectionKey] ? props.conversionActions[sectionKey] : [];\n\n const [rows, setRows] = useState(conversionActions);\n\n const addNewRow = () => {\n let newActions = { ...props.conversionActions };\n let newRow = {\n conversion_type: \"exclusive\",\n conversion_id: \"\",\n name: \"\",\n };\n newActions[sectionKey].push(newRow);\n setRows([...newActions[sectionKey]]);\n props.setConversionActions({ ...newActions });\n };\n\n const removeRow = (index) => {\n let newActions = { ...props.conversionActions };\n newActions[sectionKey].splice(index, 1);\n setRows([...newActions[sectionKey]]);\n props.setConversionActions({ ...newActions });\n };\n\n const changeRow = (index, name, value) => {\n let newActions = { ...props.conversionActions };\n newActions[sectionKey][index][name] = value;\n setRows([...newActions[sectionKey]]);\n props.setConversionActions({ ...newActions });\n };\n\n return (\n{section}
\n \n\n {rows.map((conversionAction, idx) => {\n return (\n \n changeRow(idx, \"conversion_type\", e.target.value)}>\n \n \n \n \n changeRow(idx, \"name\", e.target.value)}\n />\n \n changeRow(idx, \"conversion_id\", e.target.value)}\n />\n \n
\n );\n })}\n
\n \n
\n Conversion Action ID Tracking
\n\n
\n \n Do you have any specific conversion action ID's to include or exclude for any PPC sub-services?
\n\n \n \n
\n }\n inline={true}\n />{\" \"}\n What does this mean?\n \n \n Sometimes, clients have multiple conversion actions for their campaigns and we only need to focus on one. As a result, sometimes we need to\n specify which conversions to use for the \"conversions\" column in DataPulse. If you need to utilize a specific conversion action ID to track as\n the success metric for a sub-service, you may enter it in here.
\n
To get a Conversion Action ID, go to Google Ads and open the Tools & Settings menu from the top right of the navbar. In the\n Measurement column, select Conversions. Next, select the conversion action from the list that appears. Once you have selected a conversion\n action, check the final URL of the page and look for the 'ctId' parameter. This will be equal to the Conversion Action's ID`\n
\n \n {\n setShowBoxes(true);\n setValidation(true);\n }}\n />\n {\n setShowBoxes(false);\n setValidation(true);\n setDisplayActive(false)\n setSearchActive(false)\n setVideoActive(false)\n }}\n />\n
\n \n \n \n \n
\n \n
\n \n \n {sectionName2.map((section, idx) => {\n return (\n \n {conversionActionBox(section)}\n \n );\n })}\n
\n \n
\n
\n For which sub-services?
\n\n {sectionName.map((section, idx) => {\n section = section.toLowerCase();\n\n return (\n
\n \n \n {section === \"search\" ? (\n {\n setValidation(true);\n setSearchActive(!searchActive);\n }}\n />\n ) : section === \"display\" ? (\n {\n setDisplayActive(!displayActive);\n setValidation(true);\n }}\n />\n ) : section === \"video\" ? (\n {\n setVideoActive(!videoActive);\n setValidation(true);\n }}\n />\n ) : undefined}\n
\n );\n })}\n \n
\n \n Website
\n \nWebsite/Domain Details
\n \n\n Navigate to your website in a browser, and copy and paste the URL directly from the address bar into the field below. To add\n additional websites or subdomains (ie. if your primary website is \"example.com\" and you need to add \"shop.example.com\"), click the 'Add\n subdomain' button to create a new field and follow the same process in the new field with every entry.\n
\n \nPrimary Website
\nAdditional websites/subdomains
\nWebsite platform
\n \nWhat platform is being used?
\n \n\n \n {\" \"}\n \n
\n \n \n \n
\n \n
\n \n
\n Are you sure you want to delete?
\n \n\n WARNING!\n
\n\n Be absolutely sure that this is what you are intending to do. If you delete this organization, every client company within this org will be deleted as well. There is no way to restore this data once it is deleted.\n
\n \nOrganization Management
\n\n
\n \n \n
\n \n \n \n
\n
\n | Name | \nCreation Date | \n\n |
|---|---|---|
| {org.name} | \n{new Date(Date.parse(org.created_at)).toLocaleDateString()} | \n\n | \n
\n \n {\" \"}\n \n
\n \n \n \n
\n \n
\n \n
\n What is the name of the organization?
\n \n\n This is how your name will be displayed in DataPulse.\n
\n \nCUSTOMIZATIONS PAGE
\n \n\n \n \n
\n \n {isClickable ?\n
\n \n \n {props.organizations.length > 1 &&\n
\n : <>\n }\n \n Change Organization\n
\n }\n {\n props.god_or_admin &&\n\n \n Organization Settings\n \n }\nSelect organization to view:
\n\n \n selectTab(k)}>\n {/* */}\n \n \n \n \n \n \n \n {/* */}\n \n \n \n {/* */}\n
\n );\n}\n","import React, { useRef, useState, useEffect } from \"react\";\nimport { Button, Col, Row } from \"react-bootstrap\";\nimport updateParams from \"utils/updateParams.js\";\n\n\n\nexport default function SaveChanges(props) {\n return (\n \n
\n );\n })}\n no metricsData in page
\n \n );\n }\n } else {\n return (\n <>\n )\n }\n}\nexport default MonthlyPpcReport;\n","import React from \"react\";\nimport ChartGoal from \"charts/ChartGoal\";\nimport ChartLine from \"charts/ChartLine\";\nimport Row from \"react-bootstrap/Row\";\nimport Col from \"react-bootstrap/Col\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport MetricTablePdf from \"MetricTablePdf\";\nimport GetFormatter from \"dashboards/GetFormatter\";\nimport jsDig from \"utils/jsDig\";\nimport allMetrics from \"data/allMetrics.js\";\nimport { camelCase, cloneDeep } from \"lodash-es\";\nimport getNegative from \"../utils/getNegative\";\nimport getGoalLocked from \"utils/getGoalLocked\";\nimport dashboardTableOrder from \"../utils/dashboardTableOrder\";\nconst allMetricData = allMetrics();\nexport default function MonthlyPpcSection(props) {\n const section = props.section;\n let cc_data = props[`${props.section.service}_section`].cc_data;\n const baseCurrency = jsDig([`${props.section.service}_section`, 'base_currency'], props)\n const displayCurrency = jsDig([`${props.section.service}_section`, 'display_currency'], props)\n const dashboard = props.dashboard;\n const metricData = allMetricData[\"metricData\"];\n const goalChartDim = \"120x120\";\n const lineChartDim = \"350x250\";\n const goalsPerRow = 5;\n const chartsPerRow = 2;\n const tablesPerRow = 1;\n\n let date = props.date ? moment(props.date) : moment();\n let month = date.format(\"MMM\");\n let year = date.year();\n function categorize(string) {\n if (string.includes(\"campaignGroups\")) {\n campaignGroupCase = string;\n }\n return string;\n }\n if (section.metrics_data) {\n const renderArray = dashboardTableOrder(\"ppc\", Object.keys(section.metrics_data));\n switch (categorize(section.name)) {\n case \"goalsAndProjections\":\n let goals = props[`${props.section.service}_section`].goals;\n return (\n <>\n {props.sectionIndex == 0 && (\n\n
\n )}\n \n KPI's vs Goals{\" \"}\n
\n- \n
- {props.client_name} \n
- {props.date_formatted} \n
\n {section.service == \"ppc\" ? \"All PPC\" : section.service == \"seo\" ? \"SEO\" : capitalize(section.service)}\n
\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n const current = jsDig([dashboard, metricKey, \"raw\"], cc_data);\n const goal = parseFloat(jsDig([dashboard, year, month, camelCase(metricKey)], goals));\n const projected = jsDig([dashboard, metricKey, \"projected\"], cc_data);\n const negative = getNegative(section.name, metricKey, projected - goal, cc_data);\n const goalLocked = getGoalLocked(date, metricKey);\n let Formatter = GetFormatter({ metricName: metricKey });\n\n return (\n
\n \n {metricKey} was not found in cc_data\n
\n )}\n \n );\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n
\n )}\n {props.sectionIndex == 1 && props.section.service == \"ppc\" && \n PPC Performance: {props.section.service == \"ppc\" ? \"All PPC\" : capitalize(props.section.service)}\n
\n- \n
- {props.client_name} \n
- {props.date_formatted} \n
PPC Performance: All PPC
}\nPrimary KPI's (charts)
\n\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n
\n )}\n \n PPC Performance: {props.section.service == \"ppc\" ? \"All PPC\" : capitalize(props.section.service)}\n
\n- \n
- {props.client_name} \n
- {props.date_formatted} \n
Primary KPI's (tables)
\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n}\n","import React from \"react\";\nimport jsDig from \"utils/jsDig\";\nimport PDFPage from \"pdfs/PDFPage\";\n\nexport default function MonthlyReportIntro(props) {\n const datapulseLogo = require(\"images/logos/datapulse-logo-blue.png\");\n const ppcEnabled = jsDig([\"search_section\", \"enabled\"], props) || jsDig([\"social_section\", \"enabled\"], props) || jsDig([\"display_section\", \"enabled\"], props) || jsDig([\"video_section\", \"enabled\"], props)\n const seoEnabled = jsDig([\"seo_section\", \"enabled\"], props)\n\n return (\n\n \n
\n {props.client_name}
\nPerformance Snapshot for
\n{props.date_formatted}
\n\n
\n In this reivew, we'll walk through {props.date_formatted}'s performance in regard to:
\n {ppcEnabled && (\n <>\nPPC Performance
\n- \n
- KPI's vs. Goals \n
- Overview of all PPC performance \n
- Overview of PPC sub-services \n
SEO Performance
\n- \n
- Overview of all SEO performance \n
\n
\n Any questions about your monthly report? Ask your account leads.
\nMore detailed data can be found by logging into DataPulse
\n- \n
- Campaign groups \n
- Spend allocation \n
- & more! \n
\n
\n );\n })\n }\n\n {checkPpcSections(\"enabled\") && jsDig([dashboard, \"date\"], props.ppc_section.cc_data) && (\n ppcPages.map((page, index) => {\n pageNumber += 1;\n return (\n \n
\n );\n })\n )}\n\n {props.seo_section.enabled && jsDig([dashboard, \"date\"], seo_cc_data) && (\n seoPages.map((page, index) => {\n pageNumber += 1;\n return (\n \n
\n );\n })\n )}\n \n
\n );\n })}\n no metricsData in page
\n \n );\n }\n } else {\n return (\n <>\n )\n }\n}\n","import React from \"react\";\nimport ChartGoal from \"charts/ChartGoal\";\nimport ChartLine from \"charts/ChartLine\";\nimport Row from \"react-bootstrap/Row\";\nimport Col from \"react-bootstrap/Col\";\nimport PdfKPIMetricBlock from \"dashboards/PdfKPIMetricBlock\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport PdfKeywordTable from \"dashboards/PdfKeywordTable\";\nimport MetricTablePdf from \"MetricTablePdf\";\nimport GetFormatter from \"dashboards/GetFormatter\";\nimport jsDig from \"utils/jsDig\";\nimport allMetrics from \"data/allMetrics.js\";\nimport { camelCase, cloneDeep } from \"lodash-es\";\nimport getNegative from \"../utils/getNegative\";\nimport getGoalLocked from \"utils/getGoalLocked\";\nimport dashboardTableOrder from \"../utils/dashboardTableOrder\";\nconst allMetricData = allMetrics();\n\nexport default function MonthlySeoSection(props) {\n const goalChartDim = \"135x135\";\n const lineChartDim = \"350x250\";\n const goalsPerRow = 5;\n const chartsPerRow = 2;\n const tablesPerRow = 1;\n const section = props.section;\n const cc_data = props.cc_data;\n const dashboard = props.dashboard;\n const metricData = allMetricData[\"metricData\"];\n let date = props.date ? moment(props.date) : moment();\n let month = date.format(\"MMM\");\n let year = date.year();\n function categorize(string) {\n if (string.includes(\"landingPageGroups\")) {\n landingPageCase = string;\n }\n if (string.includes(\"keywordGroups\")) {\n keywordCase = string;\n }\n return string;\n }\n if (section.metrics_data) {\n const renderArray = dashboardTableOrder(\"seo\", Object.keys(section.metrics_data));\n switch (categorize(section.name)) {\n case \"goalsAndProjections\":\n let seoGoals = props.seo_section.goals;\n return (\n <>\n {props.sectionIndex == 0 && (\n\n
\n )}\n \n SEO Performance\n
\n- \n
- {props.client_name} \n
- {props.date_formatted} \n
Goals & Projections
\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n
\n )}\n \n SEO Performance\n
\n- \n
- {props.client_name} \n
- {props.date_formatted} \n
Primary KPI's (charts)
\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n
\n )}\n \n SEO Performance\n
\n- \n
- {props.client_name} \n
- {props.date_formatted} \n
Primary KPI's (tables)
\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\n\n
\n )}\n \n SEO Performance\n
\n- \n
- {props.client_name} \n
- {props.date_formatted} \n
Backlinks
\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n return (\n
\n \n );\n case \"keywordRankings\":\n let sortedKeywords = jsDig([dashboard, \"keyword_rankings\"], cc_data);\n switch (props.keyword_sort) {\n case \"keyword\":\n sortedKeywords.sort((a, b) => {\n if (a.keyword.toLowerCase() < b.keyword.toLowerCase()) return -1;\n if (a.keyword.toLowerCase() > b.keyword.toLowerCase()) return 1;\n return 0;\n });\n break;\n case \"prevpos\":\n sortedKeywords.sort((a, b) => {\n if (typeof a.start_date_ranking == \"string\") a.start_date_ranking = parseFloat(a.start_date_ranking);\n if (typeof b.start_date_ranking == \"string\") b.start_date_ranking = parseFloat(b.start_date_ranking);\n\n if (a.start_date_ranking == 0) return 1;\n if (b.start_date_ranking == 0) return -1;\n if (a.start_date_ranking < b.start_date_ranking) return -1;\n if (a.start_date_ranking > b.start_date_ranking) return 1;\n return 0;\n });\n break;\n case \"currentpos\":\n sortedKeywords.sort((a, b) => {\n if (a.end_date_ranking == 0) return 1;\n if (b.end_date_ranking == 0) return -1;\n if (a.end_date_ranking < b.end_date_ranking) return -1;\n if (a.end_date_ranking > b.end_date_ranking) return 1;\n return 0;\n });\n break;\n case \"diff\":\n sortedKeywords.sort((a, b) => {\n if (a.ranking_difference < b.ranking_difference) return -1;\n if (a.ranking_difference > b.ranking_difference) return 1;\n return 0;\n });\n break;\n case \"cpc\":\n sortedKeywords.sort((a, b) => {\n if (isNaN(parseFloat(a.cpc))) return -1;\n if (isNaN(parseFloat(b.cpc))) return 1;\n if (parseFloat(a.cpc) < parseFloat(b.cpc)) return -1;\n if (parseFloat(a.cpc) > parseFloat(b.cpc)) return 1;\n return 0;\n });\n break;\n case \"volume\":\n sortedKeywords.sort((a, b) => {\n if (isNaN(parseFloat(a.volume))) return -1;\n if (isNaN(parseFloat(b.volume))) return 1;\n if (parseFloat(a.volume) < parseFloat(b.volume)) return -1;\n if (parseFloat(a.volume) > parseFloat(b.volume)) return 1;\n return 0;\n });\n break;\n case \"difficulty\":\n sortedKeywords.sort((a, b) => {\n if (isNaN(parseFloat(a.difficulty))) return -1;\n if (isNaN(parseFloat(b.difficulty))) return 1;\n if (parseFloat(a.difficulty) < parseFloat(b.difficulty)) return -1;\n if (parseFloat(a.difficulty) > parseFloat(b.difficulty)) return 1;\n return 0;\n });\n break;\n }\n if (!props.seo_section.keyword_sort_order_asc) {\n sortedKeywords.reverse();\n }\n return (\n <>\n {props.sectionIndex == 0 && (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n
\n )}\n \n SEO Performance\n
\n- \n
- {props.client_name} \n
- {props.date_formatted} \n
Keyword Listings
\n{section.name} is not a valid section name for this dashboard
;\n }\n }\n}\n","import React from \"react\";\n\nclass PDFPage extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {};\n }\n\n componentDidMount() {}\n\n render() {\n const logo = require(\"images/logos/dp-logo-small.png\");\n return (\n\n
\n );\n }\n}\n\nexport default PDFPage;\n","import React from \"react\";\nimport ChartGoal from \"charts/ChartGoal\";\nimport ChartLine from \"charts/ChartLine\";\nimport ChartPie from \"charts/ChartPie\";\nimport ChartBar from \"charts/ChartBar\";\nimport ChartLocation from \"charts/ChartLocation\";\nimport Row from \"react-bootstrap/Row\";\nimport Col from \"react-bootstrap/Col\";\nimport KPIMetricBlock from \"dashboards/KPIMetricBlock\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport MetricTablePdf from \"MetricTablePdf\";\nimport ServiceDisabled from \"dashboards/ServiceDisabled\";\nimport GetFormatter from \"dashboards/GetFormatter\";\nimport NoData from \"dashboards/NoData\";\nimport jsDig from \"utils/jsDig\";\nimport allMetrics from \"data/allMetrics.js\";\nimport PDFPage from \"pdfs/PDFPage\";\nimport { camelCase, cloneDeep } from \"lodash-es\";\nimport getNegative from \"../utils/getNegative\";\nimport getGoalLocked from \"utils/getGoalLocked\";\nimport dashboardTableOrder from \"utils/dashboardTableOrder\";\n\nconst allMetricData = allMetrics();\nconst ageKeyOrder = [\"18-24\", \"25-34\", \"35-44\", \"45-54\", \"55-64\", \"65+\", \"unknown\"];\nconst dayKeyOrder = [\"monday\", \"tuesday\", \"wednesday\", \"thursday\", \"friday\", \"saturday\", \"sunday\"];\nconst hourKeyOrder = [\n \"00\",\n \"01\",\n \"02\",\n \"03\",\n \"04\",\n \"05\",\n \"06\",\n \"07\",\n \"08\",\n \"09\",\n \"10\",\n \"11\",\n \"12\",\n \"13\",\n \"14\",\n \"15\",\n \"16\",\n \"17\",\n \"18\",\n \"19\",\n \"20\",\n \"21\",\n \"22\",\n \"23\",\n];\n\nclass PPCPdfDisplay extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n this.goalChartDim = \"135x135\";\n this.lineChartDim = \"350x250\";\n this.pieChartDim = \"175x175\";\n this.goalsPerRow = 5;\n this.chartsPerRow = 2;\n this.tablesPerRow = 1;\n this.kpiBlocksPerRow = 3;\n this.metricsPerTable = 4;\n this.goalRowHeight = 144;\n this.chartRowHeight = 300;\n this.tableRowHeight = 315;\n this.groupTableRowHeight = 355;\n this.kpiBlockRowHeight = 200;\n this.pieRowHeight = 240;\n this.barRowHeight = 340;\n this.mapRowHeight = 600;\n }\n\n generatePdfSection(section, cc_data, dashboard) {\n const metricData = allMetricData[\"metricData\"];\n let date = this.props.date ? moment(this.props.date) : moment();\n let month = date.format(\"MMM\");\n let year = date.year();\n let campaignGroupCase;\n function categorize(string) {\n if (string.includes(\"campaignGroups\")) {\n campaignGroupCase = string;\n }\n return string;\n }\n if (section.metrics_data) {\n const renderArray = dashboardTableOrder(\"ppc\", Object.keys(section.metrics_data));\n\n switch (categorize(section.name)) {\n case \"goalsAndProjections\":\n let goals = this.props.goals;\n return (\n <>\n {this.props.children}
\n \n {/* {this.props.hideLogo ? (\n 
\n ) : (\n <>\n \n \n )} */}\n\n
\n {this.props.pageNumber}
\nGoals & Projections
\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\nPrimary KPI's
\n\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nKPI's vs Previous Year
\n\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n return (\n
\n \n );\n case campaignGroupCase:\n const campaignName = campaignGroupCase.replace(\"campaignGroups\", \"\");\n const campaignGroup = this.props.campaign_groups.find((el) => el.name == campaignName);\n\n return (\n <>\n {[campaignGroup.id].map((group_id, index) => {\n let metricTitles = [];\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{campaignGroup.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for campaign group {group_id}\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nSpend Allocation
\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n }\n\n generatePdfPage(page, cc_data, dashboard, index) {\n if (page[\"metricNames\"]) {\n let sectionNames = page[\"metricNames\"].map((metric) => metric[\"section\"]).filter((value, index, self) => self.indexOf(value) === index);\n let sections = [];\n // Create sections object and format how the dashboard generation loop expects\n sectionNames.forEach((section) => {\n sections.push({\n name: section,\n metrics_data: page[\"metricNames\"]\n .filter((m) => m[\"section\"] == section)\n .reduce((sum, item) => {\n sum[item[\"name\"]] = \"1\";\n return sum;\n }, {}),\n });\n });\n\n console.log(\"Sections:\");\n console.log(sections);\n\n return (\n <>\n\n
\n )}\n {sections.map((section) => {\n return (\n {this.props.client_name} Display Dashboard
\n{this.props.date_formatted}
\n\n {this.generatePdfSection(section, cc_data, dashboard)}\n
\n );\n })}\n no metricsData in page
\n \n );\n }\n }\n\n render() {\n const dashboard = parseInt(this.props.dashboard);\n const cc_data = this.props.cc_data;\n const sectionList = jsDig([\"metricsByDashboard\", \"display\", \"sections\"], allMetricData);\n const defaultMetrics = jsDig([\"metricsByDashboard\", \"display\", \"defaults\", this.props.client_type], allMetricData);\n\n let dashboardOrder =\n jsDig([dashboard], this.props.dashboard_order) && jsDig([dashboard], this.props.dashboard_order).length > 0\n ? cloneDeep(jsDig([dashboard], this.props.dashboard_order))\n : Object.keys(sectionList).map((sectionName) => {\n let defaultMetricsData = defaultMetrics[sectionName] ? Object.keys(defaultMetrics[sectionName]) : [];\n return {\n name: sectionName,\n enabled: true,\n metrics_data: defaultMetricsData.reduce((sum, item) => {\n sum[item] = \"1\";\n return sum;\n }, {}),\n };\n });\n if (dashboard > 0) {\n const tempIndex = this.props.campaign_groups.findIndex((el) => el.id == dashboard);\n dashboardOrder = this.props.campaign_groups[tempIndex].dashboard_order;\n }\n let campaignIndex = dashboardOrder.findIndex((el) => el.name == \"campaignGroups\");\n const copyOfCampaignMetric = campaignIndex == -1 && dashboard > 0 ? cloneDeep(dashboardOrder[dashboard]) : cloneDeep(dashboardOrder[campaignIndex]);\n dashboard == 0 && dashboardOrder.splice(campaignIndex, 1);\n this.props.campaign_groups.forEach((group) => {\n let duplicateCampaign = copyOfCampaignMetric;\n duplicateCampaign[\"name\"] = `campaignGroups${group.name}`;\n dashboardOrder.splice(campaignIndex, 0, cloneDeep(duplicateCampaign));\n campaignIndex += 1;\n });\n\n // Break up spend allocation into 4 sections\n let allocationIndex = dashboardOrder.findIndex((el) => el.name == \"spendAllocation\");\n const allocationMetrics = cloneDeep(dashboardOrder[allocationIndex]);\n dashboardOrder.splice(allocationIndex, 1);\n [...Array(4)].forEach((x, index) => {\n let allocationSection = allocationMetrics;\n let sectionName;\n if (index == 0) {\n sectionName = \"Pies\";\n } else if (index == 1) {\n sectionName = \"Bars1\";\n } else if (index == 2) {\n sectionName = \"Bars2\";\n } else if (index == 3) {\n sectionName = \"Map\";\n }\n allocationSection[\"name\"] = `spendAllocation${sectionName}`;\n dashboardOrder.splice(allocationIndex, 0, cloneDeep(allocationMetrics));\n allocationIndex += 1;\n });\n\n // PDFs can't be processed section by section, we need to get every metric / chart that needs to display and process them sequentially to figure out how much can fit on each page\n let pages = [];\n let currentPage = 0;\n let campaignGroupIndex = dashboardOrder.findIndex((el) => el.name.includes(\"campaignGroups\"));\n for (const [index, section] of dashboardOrder.entries()) {\n if (section.enabled) {\n if (section.metrics_data) {\n let metricNames = section.metrics_data && Object.keys(section.metrics_data);\n let elementsPerRow = 0;\n let elementHeight = 0;\n if (section.name == \"goalsAndProjections\") {\n elementsPerRow = this.goalsPerRow;\n elementHeight = this.goalRowHeight;\n } else if (section.name == \"primaryKpiCharts\") {\n elementsPerRow = this.chartsPerRow;\n elementHeight = this.chartRowHeight;\n } else if (section.name == \"primaryKpiTables\") {\n elementsPerRow = this.metricsPerTable;\n elementHeight = this.tableRowHeight;\n } else if (section.name == \"allKpisVsPreviousYear\") {\n elementsPerRow = this.kpiBlocksPerRow;\n elementHeight = this.kpiBlockRowHeight;\n } else if (section.name.includes(\"campaignGroups\")) {\n elementsPerRow = this.metricsPerTable;\n if (dashboardOrder[index - 1] && dashboardOrder[index - 1].name.includes(\"campaignGroups\") && !((index - campaignGroupIndex) % 2 == 0) && metricNames.length < 3) {\n elementHeight = 0;\n } else {\n elementHeight = this.groupTableRowHeight;\n }\n } else if (section.name == \"spendAllocationPies\") {\n elementHeight = this.pieRowHeight;\n elementsPerRow = 3;\n } else if (section.name == \"spendAllocationBars1\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 2;\n } else if (section.name == \"spendAllocationBars2\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 1;\n } else if (section.name == \"spendAllocationMap\") {\n elementHeight = this.mapRowHeight;\n elementsPerRow = 1;\n } else {\n return section.name;\n }\n\n // Create pages array\n if (section.name == \"spendAllocationPies\") {\n metricNames = [\"platform\", \"device\", \"gender\"];\n }\n if (section.name == \"spendAllocationBars1\") {\n metricNames = [\"age\", \"day\"];\n }\n if (section.name == \"spendAllocationBars2\") {\n metricNames = [\"hour\"];\n }\n if (section.name == \"spendAllocationMap\") {\n metricNames = [\"state\"];\n }\n metricNames.forEach((metricName, metricIndex) => {\n if (!pages[currentPage]) {\n pages[currentPage] = { metricNames: [], pageHeight: 0 };\n }\n\n if (metricIndex == 0) {\n console.log(\"Add 40 pixels for header\");\n pages[currentPage][\"pageHeight\"] += 40;\n }\n\n if (metricIndex % elementsPerRow == 0 || metricIndex == 0) {\n // 1065px page height - (74px + 10px if header) - 10px bottom padding\n let maxPageHeight = currentPage == 0 ? 971 : 1055;\n if (elementHeight + pages[currentPage][\"pageHeight\"] > maxPageHeight) {\n console.log(`${elementHeight + pages[currentPage][\"pageHeight\"]}px Would overflow PDF ${maxPageHeight}px, need to create new page`);\n currentPage += 1;\n if (!pages[currentPage]) {\n console.log(\"Initialized new page\");\n pages[currentPage] = { metricNames: [], pageHeight: 40 };\n }\n }\n\n pages[currentPage][\"pageHeight\"] += elementHeight;\n }\n\n pages[currentPage][\"metricNames\"].push({\n name: metricName,\n section: section.name,\n });\n\n console.log(\n \"section: \" +\n section.name +\n \" page: \" +\n currentPage +\n \", EPR: \" +\n elementsPerRow +\n \", name: \" +\n metricName +\n \", index: \" +\n metricIndex +\n \", page height:\" +\n pages[currentPage][\"pageHeight\"]\n );\n });\n }\n }\n }\n\n console.log(\"Pages:\");\n console.log(pages);\n\n if (this.props.enabled) {\n if (jsDig([dashboard, \"date\"], cc_data)) {\n return (\n <>\n {pages.map((page, index) => {\n return this.generatePdfPage(page, cc_data, dashboard, index);\n })}\n \n );\n } else {\n return (\n <>\nGoals & Projections
\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\nPrimary KPI's
\n\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nKPI's vs Previous Year
\n\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n return (\n
\n \n );\n case \"performanceByChannel\":\n const channels = renderArray.map((channel) => {\n if (section.metrics_data[`${channel}`] == \"1\") return channel;\n });\n\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n
\n );\n case campaignGroupCase:\n const sections = renderArray.map((channel) => {\n if (section.metrics_data[`${channel}`] == \"1\") return channel;\n });\n\n return (\n <>\n Performance By Channels
\n {[\"search\", \"social\", \"display\", \"video\"].map((channel, index) => {\n let metricNames =\n this.props.client_type == \"ecommerce\"\n ? [\"spend\", \"clicks\", \"total_conversions\", \"total_roas\"]\n : [\"spend\", \"clicks\", \"total_conversions\", \"cpa\"];\n if (channel == \"search\") {\n metricNames =\n this.props.client_type == \"ecommerce\"\n ? [\"spend\", \"clicks\", \"click_conversions\", \"click_roas\"]\n : [\"spend\", \"clicks\", \"click_conversions\", \"cpa\"];\n }\n\n if (channels.includes(channel)) {\n let tempMetricNames = [];\n return (\n\n \n
\n
\n );\n }\n })}\n {capitalize(channel)}
\n {metricNames.map((metricName, index) => {\n if (metricName) {\n if (jsDig([`${channel}_section`, \"cc_data\", 0, \"metrics_2_years\", metricName], this.props) == null) {\n console.log(`${metricName} was not found.`);\n return <>;\n }\n } else {\n return{metricName} not defined in metricData.json
;\n }\n\n tempMetricNames.push(metricName);\n })}\n\nCampaign Groups
\n {[\"search\", \"social\", \"display\", \"video\"].map((channel, index) => {\n const channelName = `${channel}_section`;\n const groupOrder = this.props[channelName].campaign_group_order ? this.props[channelName].campaign_group_order : [];\n\n return (\n\n {groupOrder.map((group_id, index) => {\n let metricNames =\n this.props.client_type == \"ecommerce\"\n ? [\"spend\", \"clicks\", \"total_conversions\", \"total_roas\"]\n : [\"spend\", \"clicks\", \"total_conversions\", \"cpa\"];\n if (channel == \"search\") {\n metricNames =\n this.props.client_type == \"ecommerce\"\n ? [\"spend\", \"clicks\", \"click_conversions\", \"click_roas\"]\n : [\"spend\", \"clicks\", \"click_conversions\", \"cpa\"];\n }\n const campaignGroup = this.props[channelName].campaign_groups.find(\n (group) => group.id == group_id && sections.includes(camelCase(group.name))\n );\n\n if (campaignGroup) {\n let tempMetricNames = [];\n return (\n
\n );\n })}\n \n );\n case \"spendAllocationPies\":\n return (\n <>\n \n \n
\n
\n );\n }\n })}\n {campaignGroup.name}
\n {metricNames.map((metricName, index) => {\n if (metricName) {\n if (jsDig([group_id, \"metrics_2_years\", metricName], this.props[channelName].cc_data) == null) {\n console.log(`${metricName} was not found in metrics_2_years in cc_data for campaign group ${group_id}`);\n return <>;\n }\n } else {\n return{metricName} not defined in metricData.json
;\n }\n\n tempMetricNames.push(metricName);\n })}\n\n {[...Array(Math.ceil(metricNames.length / 4))].map((x, index) => {\n return (\nSpend Allocation
\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n }\n\n generatePdfPage(page, cc_data, dashboard, index) {\n if (page[\"metricNames\"]) {\n let sectionNames = page[\"metricNames\"].map((metric) => metric[\"section\"]).filter((value, index, self) => self.indexOf(value) === index);\n let sections = [];\n // Create sections object and format how the dashboard generation loop expects\n sectionNames.forEach((section) => {\n sections.push({\n name: section,\n metrics_data: page[\"metricNames\"]\n .filter((m) => m[\"section\"] == section)\n .reduce((sum, item) => {\n sum[item[\"name\"]] = \"1\";\n return sum;\n }, {}),\n });\n });\n\n console.log(\"Sections:\");\n console.log(sections);\n\n return (\n <>\n\n
\n )}\n {sections.map((section) => {\n return <>{this.generatePdfSection(section, cc_data, dashboard)};\n })}\n {this.props.client_name} PPC Dashboard
\n{this.props.date_formatted}
\nno metricsData in page
\n \n );\n }\n }\n\n render() {\n const dashboard = this.props.dashboard;\n const cc_data = this.props.cc_data;\n const sectionList = jsDig([\"metricsByDashboard\", \"ppc\", \"sections\"], allMetricData);\n const defaultMetrics = jsDig([\"metricsByDashboard\", \"ppc\", \"defaults\", this.props.client_type], allMetricData);\n\n let dashboardOrder =\n jsDig([dashboard], this.props.dashboard_order) && jsDig([dashboard], this.props.dashboard_order).length > 0\n ? jsDig([dashboard], this.props.dashboard_order)\n : Object.keys(sectionList).map((sectionName) => {\n let defaultMetricsData = defaultMetrics[sectionName] ? Object.keys(defaultMetrics[sectionName]) : [];\n return {\n name: sectionName,\n enabled: true,\n metrics_data: defaultMetricsData.reduce((sum, item) => {\n sum[item] = \"1\";\n return sum;\n }, {}),\n };\n });\n\n // Break up spend allocation into 4 sections\n let allocationIndex = dashboardOrder.findIndex((el) => el.name == \"spendAllocation\");\n const allocationMetrics = cloneDeep(dashboardOrder[allocationIndex]);\n dashboardOrder.splice(allocationIndex, 1);\n [...Array(4)].forEach((x, index) => {\n let allocationSection = allocationMetrics;\n let sectionName;\n if (index == 0) {\n sectionName = \"Pies\";\n } else if (index == 1) {\n sectionName = \"Bars1\";\n } else if (index == 2) {\n sectionName = \"Bars2\";\n } else if (index == 3) {\n sectionName = \"Map\";\n }\n allocationSection[\"name\"] = `spendAllocation${sectionName}`;\n dashboardOrder.splice(allocationIndex, 0, cloneDeep(allocationMetrics));\n allocationIndex += 1;\n });\n\n // PDFs can't be processed section by section, we need to get every metric / chart that needs to display and process them sequentially to figure out how much can fit on each page\n let pages = [];\n let currentPage = 0;\n\n for (const [index, section] of dashboardOrder.entries()) {\n if (section.enabled) {\n if (section.metrics_data) {\n let elementsPerRow = 0;\n let elementHeight = 0;\n if (section.name == \"goalsAndProjections\") {\n elementsPerRow = this.goalsPerRow;\n elementHeight = this.goalRowHeight;\n } else if (section.name == \"primaryKpiCharts\") {\n elementsPerRow = this.chartsPerRow;\n elementHeight = this.chartRowHeight;\n } else if (section.name == \"primaryKpiTables\") {\n elementsPerRow = this.metricsPerTable;\n elementHeight = this.tableRowHeight;\n } else if (section.name == \"allKpisVsPreviousYear\") {\n elementsPerRow = this.kpiBlocksPerRow;\n elementHeight = this.kpiBlockRowHeight;\n } else if (section.name == \"performanceByChannel\") {\n elementsPerRow = 1;\n elementHeight = this.groupTableRowHeight;\n } else if (section.name.includes(\"campaignGroups\")) {\n elementsPerRow = 1;\n elementHeight = this.groupTableRowHeight;\n } else if (section.name == \"spendAllocationPies\") {\n elementHeight = this.pieRowHeight;\n elementsPerRow = 3;\n } else if (section.name == \"spendAllocationBars1\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 2;\n } else if (section.name == \"spendAllocationBars2\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 1;\n } else if (section.name == \"spendAllocationMap\") {\n elementHeight = this.mapRowHeight;\n elementsPerRow = 1;\n } else {\n return section.name;\n }\n\n // Create pages array\n let metricNames = Object.keys(section.metrics_data);\n if (section.name == \"spendAllocationPies\") {\n metricNames = [\"platform\", \"device\", \"gender\"];\n }\n if (section.name == \"spendAllocationBars1\") {\n metricNames = [\"age\", \"day\"];\n }\n if (section.name == \"spendAllocationBars2\") {\n metricNames = [\"hour\"];\n }\n if (section.name == \"spendAllocationMap\") {\n metricNames = [\"state\"];\n }\n metricNames.forEach((metricName, metricIndex) => {\n if (!pages[currentPage]) {\n pages[currentPage] = { metricNames: [], pageHeight: 0 };\n }\n\n if (metricIndex == 0) {\n console.log(\"Add 40 pixels for header\");\n pages[currentPage][\"pageHeight\"] += 40;\n }\n\n if (metricIndex % elementsPerRow == 0) {\n // 1065px page height - (74px + 10px if header) - 10px bottom padding\n let maxPageHeight = currentPage == 0 ? 971 : 1055;\n if (elementHeight + pages[currentPage][\"pageHeight\"] > maxPageHeight) {\n console.log(`${elementHeight + pages[currentPage][\"pageHeight\"]}px Would overflow PDF ${maxPageHeight}px, need to create new page`);\n currentPage += 1;\n if (!pages[currentPage]) {\n console.log(\"Initialized new page\");\n pages[currentPage] = { metricNames: [], pageHeight: 40 };\n }\n }\n\n pages[currentPage][\"pageHeight\"] += elementHeight;\n }\n\n pages[currentPage][\"metricNames\"].push({\n name: metricName,\n section: section.name,\n });\n\n console.log(\n \"section: \" +\n section.name +\n \" page: \" +\n currentPage +\n \", EPR: \" +\n elementsPerRow +\n \", name: \" +\n metricName +\n \", index: \" +\n metricIndex +\n \", page height:\" +\n pages[currentPage][\"pageHeight\"]\n );\n });\n }\n }\n }\n\n console.log(\"Pages:\");\n console.log(pages);\n\n if (this.props.search_section.enabled || this.props.social_section.enabled || this.props.display_section.enabled || this.props.video_section.enabled) {\n if (jsDig([dashboard, \"date\"], cc_data)) {\n return (\n <>\n {pages.map((page, index) => {\n return this.generatePdfPage(page, cc_data, dashboard, index);\n })}\n \n );\n } else {\n return (\n <>\nGoals & Projections
\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\nPrimary KPI's
\n\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nKPI's vs Previous Year
\n\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n return (\n
\n \n );\n case campaignGroupCase:\n const campaignName = campaignGroupCase.replace(\"campaignGroups\", \"\");\n const campaignGroup = this.props.campaign_groups.find((el) => el.name == campaignName);\n\n return (\n <>\n {[campaignGroup.id].map((group_id, index) => {\n let metricTitles = [];\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{campaignGroup.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for campaign group {group_id}\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nSpend Allocation
\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n }\n\n generatePdfPage(page, cc_data, dashboard, index) {\n if (page[\"metricNames\"]) {\n let sectionNames = page[\"metricNames\"].map((metric) => metric[\"section\"]).filter((value, index, self) => self.indexOf(value) === index);\n let sections = [];\n // Create sections object and format how the dashboard generation loop expects\n sectionNames.forEach((section) => {\n sections.push({\n name: section,\n metrics_data: page[\"metricNames\"]\n .filter((m) => m[\"section\"] == section)\n .reduce((sum, item) => {\n sum[item[\"name\"]] = \"1\";\n return sum;\n }, {}),\n });\n });\n\n console.log(\"Sections:\");\n console.log(sections);\n\n return (\n <>\n\n
\n )}\n {sections.map((section) => {\n return (\n {this.props.client_name} Search Dashboard
\n{this.props.date_formatted}
\n\n {this.generatePdfSection(section, cc_data, dashboard)}\n
\n );\n })}\n no metricsData in page
\n \n );\n }\n }\n\n render() {\n const dashboard = parseInt(this.props.dashboard);\n const cc_data = this.props.cc_data;\n const sectionList = jsDig([\"metricsByDashboard\", \"search\", \"sections\"], allMetricData);\n const defaultMetrics = jsDig([\"metricsByDashboard\", \"search\", \"defaults\", this.props.client_type], allMetricData);\n let dashboardOrder =\n jsDig([dashboard], this.props.dashboard_order) && jsDig([dashboard], this.props.dashboard_order).length > 0\n ? cloneDeep(jsDig([dashboard], this.props.dashboard_order))\n : Object.keys(sectionList).map((sectionName) => {\n let defaultMetricsData = defaultMetrics[sectionName] ? Object.keys(defaultMetrics[sectionName]) : [];\n return {\n name: sectionName,\n enabled: true,\n metrics_data: defaultMetricsData.reduce((sum, item) => {\n sum[item] = \"1\";\n return sum;\n }, {}),\n };\n });\n if (dashboard > 0) {\n const tempIndex = this.props.campaign_groups.findIndex((el) => el.id == dashboard);\n dashboardOrder = this.props.campaign_groups[tempIndex].dashboard_order;\n }\n let campaignIndex = dashboardOrder.findIndex((el) => el.name == \"campaignGroups\");\n const copyOfCampaignMetric = campaignIndex == -1 && dashboard > 0 ? cloneDeep(dashboardOrder[dashboard]) : cloneDeep(dashboardOrder[campaignIndex]);\n dashboard == 0 && dashboardOrder.splice(campaignIndex, 1);\n this.props.campaign_groups.forEach((group) => {\n let duplicateCampaign = copyOfCampaignMetric;\n duplicateCampaign[\"name\"] = `campaignGroups${group.name}`;\n dashboardOrder.splice(campaignIndex, 0, cloneDeep(duplicateCampaign));\n campaignIndex += 1;\n });\n\n // Break up spend allocation into 4 sections\n let allocationIndex = dashboardOrder.findIndex((el) => el.name == \"spendAllocation\");\n const allocationMetrics = cloneDeep(dashboardOrder[allocationIndex]);\n dashboardOrder.splice(allocationIndex, 1);\n [...Array(4)].forEach((x, index) => {\n let allocationSection = allocationMetrics;\n let sectionName;\n if (index == 0) {\n sectionName = \"Pies\";\n } else if (index == 1) {\n sectionName = \"Bars1\";\n } else if (index == 2) {\n sectionName = \"Bars2\";\n } else if (index == 3) {\n sectionName = \"Map\";\n }\n allocationSection[\"name\"] = `spendAllocation${sectionName}`;\n dashboardOrder.splice(allocationIndex, 0, cloneDeep(allocationMetrics));\n allocationIndex += 1;\n });\n\n // PDFs can't be processed section by section, we need to get every metric / chart that needs to display and process them sequentially to figure out how much can fit on each page\n let pages = [];\n let currentPage = 0;\n let campaignGroupIndex = dashboardOrder.findIndex((el) => el.name.includes(\"campaignGroups\"));\n for (const [index, section] of dashboardOrder.entries()) {\n if (section.enabled) {\n if (section.metrics_data) {\n let metricNames = section.metrics_data && Object.keys(section.metrics_data);\n let elementsPerRow = 0;\n let elementHeight = 0;\n if (section.name == \"goalsAndProjections\") {\n elementsPerRow = this.goalsPerRow;\n elementHeight = this.goalRowHeight;\n } else if (section.name == \"primaryKpiCharts\") {\n elementsPerRow = this.chartsPerRow;\n elementHeight = this.chartRowHeight;\n } else if (section.name == \"primaryKpiTables\") {\n elementsPerRow = this.metricsPerTable;\n elementHeight = this.tableRowHeight;\n } else if (section.name == \"allKpisVsPreviousYear\") {\n elementsPerRow = this.kpiBlocksPerRow;\n elementHeight = this.kpiBlockRowHeight;\n } else if (section.name.includes(\"campaignGroups\")) {\n elementsPerRow = this.metricsPerTable;\n if (dashboardOrder[index - 1] && dashboardOrder[index - 1].name.includes(\"campaignGroups\") && !((index - campaignGroupIndex) % 2 == 0) && metricNames.length < 3) {\n elementHeight = 0;\n } else {\n elementHeight = this.groupTableRowHeight;\n }\n } else if (section.name == \"spendAllocationPies\") {\n elementHeight = this.pieRowHeight;\n elementsPerRow = 3;\n } else if (section.name == \"spendAllocationBars1\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 2;\n } else if (section.name == \"spendAllocationBars2\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 1;\n } else if (section.name == \"spendAllocationMap\") {\n elementHeight = this.mapRowHeight;\n elementsPerRow = 1;\n } else {\n return section.name;\n }\n\n // Create pages array\n if (section.name == \"spendAllocationPies\") {\n metricNames = [\"platform\", \"device\", \"gender\"];\n }\n if (section.name == \"spendAllocationBars1\") {\n metricNames = [\"age\", \"day\"];\n }\n if (section.name == \"spendAllocationBars2\") {\n metricNames = [\"hour\"];\n }\n if (section.name == \"spendAllocationMap\") {\n metricNames = [\"state\"];\n }\n metricNames.forEach((metricName, metricIndex) => {\n if (!pages[currentPage]) {\n pages[currentPage] = { metricNames: [], pageHeight: 0 };\n }\n if (metricIndex == 0) {\n console.log(\"Add 40 pixels for header\");\n pages[currentPage][\"pageHeight\"] += 40;\n }\n if (metricIndex % elementsPerRow == 0 || metricIndex == 0) {\n // 1065px page height - (74px + 10px if header) - 10px bottom padding\n let maxPageHeight = currentPage == 0 ? 971 : 1055;\n if (elementHeight + pages[currentPage][\"pageHeight\"] > maxPageHeight) {\n console.log(`${elementHeight + pages[currentPage][\"pageHeight\"]}px Would overflow PDF ${maxPageHeight}px, need to create new page`);\n currentPage += 1;\n if (!pages[currentPage]) {\n console.log(\"Initialized new page\");\n pages[currentPage] = { metricNames: [], pageHeight: 40 };\n }\n }\n pages[currentPage][\"pageHeight\"] += elementHeight;\n }\n pages[currentPage][\"metricNames\"].push({\n name: metricName,\n section: section.name,\n });\n console.log(\n \"section: \" +\n section.name +\n \" page: \" +\n currentPage +\n \", EPR: \" +\n elementsPerRow +\n \", name: \" +\n metricName +\n \", index: \" +\n metricIndex +\n \", page height:\" +\n pages[currentPage][\"pageHeight\"]\n );\n });\n }\n }\n }\n console.log(\"Pages:\");\n console.log(pages);\n if (this.props.enabled) {\n if (jsDig([dashboard, \"date\"], cc_data)) {\n return (\n <>\n {pages.map((page, index) => {\n return this.generatePdfPage(page, cc_data, dashboard, index);\n })}\n \n );\n } else {\n return (\n <>\nGoals & Projections
\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\nPrimary KPI's
\n\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nKPI's vs Previous Year
\n\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n return (\n
\n \n );\n case campaignGroupCase:\n const campaignName = campaignGroupCase.replace(\"campaignGroups\", \"\");\n const campaignGroup = this.props.campaign_groups.find((el) => el.name == campaignName);\n\n return (\n <>\n {[campaignGroup.id].map((group_id, index) => {\n let metricTitles = [];\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{campaignGroup.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for campaign group {group_id}\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nSpend Allocation
\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n }\n\n generatePdfPage(page, cc_data, dashboard, index) {\n if (page[\"metricNames\"]) {\n let sectionNames = page[\"metricNames\"].map((metric) => metric[\"section\"]).filter((value, index, self) => self.indexOf(value) === index);\n let sections = [];\n // Create sections object and format how the dashboard generation loop expects\n sectionNames.forEach((section) => {\n sections.push({\n name: section,\n metrics_data: page[\"metricNames\"]\n .filter((m) => m[\"section\"] == section)\n .reduce((sum, item) => {\n sum[item[\"name\"]] = \"1\";\n return sum;\n }, {}),\n });\n });\n\n console.log(\"Sections:\");\n console.log(sections);\n\n return (\n <>\n\n
\n )}\n {sections.map((section) => {\n return (\n {this.props.client_name} Social Dashboard
\n{this.props.date_formatted}
\n\n {this.generatePdfSection(section, cc_data, dashboard)}\n
\n );\n })}\n no metricsData in page
\n \n );\n }\n }\n\n render() {\n const dashboard = parseInt(this.props.dashboard);\n const cc_data = this.props.cc_data;\n const sectionList = jsDig([\"metricsByDashboard\", \"social\", \"sections\"], allMetricData);\n const defaultMetrics = jsDig([\"metricsByDashboard\", \"social\", \"defaults\", this.props.client_type], allMetricData);\n\n let dashboardOrder =\n jsDig([dashboard], this.props.dashboard_order) && jsDig([dashboard], this.props.dashboard_order).length > 0\n ? cloneDeep(jsDig([dashboard], this.props.dashboard_order))\n : Object.keys(sectionList).map((sectionName) => {\n let defaultMetricsData = defaultMetrics[sectionName] ? Object.keys(defaultMetrics[sectionName]) : [];\n return {\n name: sectionName,\n enabled: true,\n metrics_data: defaultMetricsData.reduce((sum, item) => {\n sum[item] = \"1\";\n return sum;\n }, {}),\n };\n });\n if (dashboard > 0) {\n const tempIndex = this.props.campaign_groups.findIndex((el) => el.id == dashboard);\n dashboardOrder = this.props.campaign_groups[tempIndex].dashboard_order;\n }\n let campaignIndex = dashboardOrder.findIndex((el) => el.name == \"campaignGroups\");\n const copyOfCampaignMetric = campaignIndex == -1 && dashboard > 0 ? cloneDeep(dashboardOrder[dashboard]) : cloneDeep(dashboardOrder[campaignIndex]);\n dashboard == 0 && dashboardOrder.splice(campaignIndex, 1);\n this.props.campaign_groups.forEach((group) => {\n let duplicateCampaign = copyOfCampaignMetric;\n duplicateCampaign[\"name\"] = `campaignGroups${group.name}`;\n dashboardOrder.splice(campaignIndex, 0, cloneDeep(duplicateCampaign));\n campaignIndex += 1;\n });\n\n // Break up spend allocation into 4 sections\n let allocationIndex = dashboardOrder.findIndex((el) => el.name == \"spendAllocation\");\n const allocationMetrics = cloneDeep(dashboardOrder[allocationIndex]);\n dashboardOrder.splice(allocationIndex, 1);\n [...Array(4)].forEach((x, index) => {\n let allocationSection = allocationMetrics;\n let sectionName;\n if (index == 0) {\n sectionName = \"Pies\";\n } else if (index == 1) {\n sectionName = \"Bars1\";\n } else if (index == 2) {\n sectionName = \"Bars2\";\n } else if (index == 3) {\n sectionName = \"Map\";\n }\n allocationSection[\"name\"] = `spendAllocation${sectionName}`;\n dashboardOrder.splice(allocationIndex, 0, cloneDeep(allocationMetrics));\n allocationIndex += 1;\n });\n\n // PDFs can't be processed section by section, we need to get every metric / chart that needs to display and process them sequentially to figure out how much can fit on each page\n let pages = [];\n let currentPage = 0;\n let campaignGroupIndex = dashboardOrder.findIndex((el) => el.name.includes(\"campaignGroups\"));\n for (const [index, section] of dashboardOrder.entries()) {\n if (section.enabled) {\n if (section.metrics_data) {\n let metricNames = section.metrics_data && Object.keys(section.metrics_data);\n let elementsPerRow = 0;\n let elementHeight = 0;\n if (section.name == \"goalsAndProjections\") {\n elementsPerRow = this.goalsPerRow;\n elementHeight = this.goalRowHeight;\n } else if (section.name == \"primaryKpiCharts\") {\n elementsPerRow = this.chartsPerRow;\n elementHeight = this.chartRowHeight;\n } else if (section.name == \"primaryKpiTables\") {\n elementsPerRow = this.metricsPerTable;\n elementHeight = this.tableRowHeight;\n } else if (section.name == \"allKpisVsPreviousYear\") {\n elementsPerRow = this.kpiBlocksPerRow;\n elementHeight = this.kpiBlockRowHeight;\n } else if (section.name.includes(\"campaignGroups\")) {\n elementsPerRow = this.metricsPerTable;\n if (dashboardOrder[index - 1] && dashboardOrder[index - 1].name.includes(\"campaignGroups\") && !((index - campaignGroupIndex) % 2 == 0) && metricNames.length < 3) {\n elementHeight = 0;\n } else {\n elementHeight = this.groupTableRowHeight;\n }\n } else if (section.name == \"spendAllocationPies\") {\n elementHeight = this.pieRowHeight;\n elementsPerRow = 3;\n } else if (section.name == \"spendAllocationBars1\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 2;\n } else if (section.name == \"spendAllocationBars2\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 1;\n } else if (section.name == \"spendAllocationMap\") {\n elementHeight = this.mapRowHeight;\n elementsPerRow = 1;\n } else {\n return section.name;\n }\n\n // Create pages array\n if (section.name == \"spendAllocationPies\") {\n metricNames = [\"platform\", \"device\", \"gender\"];\n }\n if (section.name == \"spendAllocationBars1\") {\n metricNames = [\"age\", \"day\"];\n }\n if (section.name == \"spendAllocationBars2\") {\n metricNames = [\"hour\"];\n }\n if (section.name == \"spendAllocationMap\") {\n metricNames = [\"state\"];\n }\n metricNames.forEach((metricName, metricIndex) => {\n if (!pages[currentPage]) {\n pages[currentPage] = { metricNames: [], pageHeight: 0 };\n }\n if (metricIndex == 0) {\n console.log(\"Add 40 pixels for header\");\n pages[currentPage][\"pageHeight\"] += 40;\n }\n if (metricIndex % elementsPerRow == 0 || metricIndex == 0) {\n // 1065px page height - (74px + 10px if header) - 10px bottom padding\n let maxPageHeight = currentPage == 0 ? 971 : 1055;\n if (elementHeight + pages[currentPage][\"pageHeight\"] > maxPageHeight) {\n console.log(`${elementHeight + pages[currentPage][\"pageHeight\"]}px Would overflow PDF ${maxPageHeight}px, need to create new page`);\n currentPage += 1;\n if (!pages[currentPage]) {\n console.log(\"Initialized new page\");\n pages[currentPage] = { metricNames: [], pageHeight: 40 };\n }\n }\n\n pages[currentPage][\"pageHeight\"] += elementHeight;\n }\n\n pages[currentPage][\"metricNames\"].push({\n name: metricName,\n section: section.name,\n });\n\n console.log(\n \"section: \" +\n section.name +\n \" page: \" +\n currentPage +\n \", EPR: \" +\n elementsPerRow +\n \", name: \" +\n metricName +\n \", index: \" +\n metricIndex +\n \", page height:\" +\n pages[currentPage][\"pageHeight\"]\n );\n });\n }\n }\n }\n\n console.log(\"Pages:\");\n console.log(pages);\n\n if (this.props.enabled) {\n if (jsDig([dashboard, \"date\"], cc_data)) {\n return (\n <>\n {pages.map((page, index) => {\n return this.generatePdfPage(page, cc_data, dashboard, index);\n })}\n \n );\n } else {\n return (\n <>\n\n {[...Array(Math.ceil(this.props.client_list.length / clientsPerPage))].map((x, index) => {\n return (\n \n \n );\n })}\n
\n );\n }\n}\n\nexport default PPCPdfSummaryDisplay;\n","import React from \"react\";\nimport Table from \"react-bootstrap/Table\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport PDFPage from \"pdfs/PDFPage\";\n\nclass PPCPdfSummaryOverall extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {};\n }\n\n getPageNumber(current) {\n return current + 1;\n }\n\n render() {\n let metrics = this.props.search_metrics;\n let pageNumber = 0;\n let clientsPerPage = 35;\n\n const clients = Object.keys(this.props.search_metrics);\n const firstKey = clients[0];\n const searchMetrics = Object.keys(this.props.search_metrics[firstKey]).filter((el) => !el.includes(\"yy\"));\n\n let totals = {};\n\n clients.map((client) => {\n searchMetrics.map((metricName) => {\n let mValue = this.props.search_metrics[client][metricName];\n totals[metricName] ? (totals[metricName] += mValue) : (totals[metricName] = mValue);\n });\n });\n\n totals[\"rev_or_conv_yy\"] = ((totals[\"rev_or_conv\"] - totals[\"rev_or_conv_ly\"]) / totals[\"rev_or_conv_ly\"]) * 100;\n totals[\"rev_or_conv_lm_yy\"] = ((totals[\"rev_or_conv_lm\"] - totals[\"rev_or_conv_lmly\"]) / totals[\"rev_or_conv_lmly\"]) * 100;\n\n return (\n \n
\n PPC Summary Display
\n{this.props.date_formatted}
\n\n \n \n
\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return{metric.display_name} | ;\n })}\n|
|---|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = metrics[client.client_name][metric.programmatic_name];\n let className = \"\";\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.Revenue : MetricFormatter.Conversions;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n className =\n client.account_type == \"ecommerce\" ? (value > 0 ? \"bg-success\" : \"bg-danger\") : value > 0 ? \"bg-danger\" : \"bg-success\";\n }\n\n if (metric.programmatic_name.includes(\"yy\")) {\n Formatter = MetricFormatter.YY;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n }\n\n return (\n\n | \n );\n })}\n |
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n }\n\n return metric.programmatic_name.includes(\"or\") || metric.programmatic_name.includes(\"kpi\") ? (\n\n ) : (\n | \n | \n );\n })}\n
\n {[...Array(Math.ceil(this.props.client_list.length / clientsPerPage))].map((x, index) => {\n return (\n \n \n );\n })}\n
\n );\n }\n}\n\nexport default PPCPdfSummaryOverall;\n","import React from 'react';\nimport Table from 'react-bootstrap/Table'\nimport MetricFormatter from 'dashboards/MetricFormatter'\nimport PDFPage from 'pdfs/PDFPage'\n\nclass PPCPdfSummarySearch extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {};\n }\n\n getPageNumber(current) {\n return current + 1;\n }\n\n render() {\n let metrics = this.props.search_metrics;\n let pageNumber = 0;\n let clientsPerPage = 35;\n\n const clients = Object.keys(this.props.search_metrics);\n const firstKey = clients[0];\n const searchMetrics = Object.keys(this.props.search_metrics[firstKey]).filter((el) => !el.includes(\"yy\"));\n\n let totals = {};\n\n clients.map((client) => {\n searchMetrics.map((metricName) => {\n let mValue = this.props.search_metrics[client][metricName];\n totals[metricName] ? (totals[metricName] += mValue) : (totals[metricName] = mValue);\n });\n });\n\n totals[\"rev_or_conv_yy\"] = ((totals[\"rev_or_conv\"] - totals[\"rev_or_conv_ly\"]) / totals[\"rev_or_conv_ly\"]) * 100;\n totals[\"rev_or_conv_lm_yy\"] = ((totals[\"rev_or_conv_lm\"] - totals[\"rev_or_conv_lmly\"]) / totals[\"rev_or_conv_lmly\"]) * 100;\n\n return (\n \n
\n PPC Summary Search
\n{this.props.date_formatted}
\n\n \n \n
\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return{metric.display_name} | ;\n })}\n|
|---|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = metrics[client.client_name][metric.programmatic_name];\n let className = \"\";\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.Revenue : MetricFormatter.Conversions;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n className =\n client.account_type == \"ecommerce\" ? (value > 0 ? \"bg-success\" : \"bg-danger\") : value > 0 ? \"bg-danger\" : \"bg-success\";\n }\n\n if (metric.programmatic_name.includes(\"yy\")) {\n Formatter = MetricFormatter.YY;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n }\n\n return (\n\n | \n );\n })}\n |
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n }\n\n return metric.programmatic_name.includes(\"or\") || metric.programmatic_name.includes(\"kpi\") ? (\n\n ) : (\n | \n | \n );\n })}\n
\n {[...Array(Math.ceil(this.props.client_list.length / clientsPerPage))].map((x, index) => {\n return (\n \n \n );\n })}\n
\n );\n }\n}\n\nexport default PPCPdfSummarySearch;\n","import React from 'react';\nimport Table from 'react-bootstrap/Table'\nimport MetricFormatter from 'dashboards/MetricFormatter'\nimport PDFPage from 'pdfs/PDFPage'\n\nclass PPCPdfSummarySocial extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {};\n }\n\n getPageNumber(current) {\n return current + 1;\n }\n\n render() {\n let metrics = this.props.social_metrics;\n let pageNumber = 0;\n let clientsPerPage = 35;\n\n const clients = Object.keys(this.props.social_metrics);\n const firstKey = clients[0];\n const socialMetrics = Object.keys(this.props.social_metrics[firstKey]).filter((el) => !el.includes(\"yy\"));\n\n let totals = {};\n\n clients.map((client) => {\n socialMetrics.map((metricName) => {\n let mValue = this.props.social_metrics[client][metricName];\n totals[metricName] ? (totals[metricName] += mValue) : (totals[metricName] = mValue);\n });\n });\n\n totals[\"rev_or_conv_yy\"] = ((totals[\"rev_or_conv\"] - totals[\"rev_or_conv_ly\"]) / totals[\"rev_or_conv_ly\"]) * 100;\n totals[\"rev_or_conv_lm_yy\"] = ((totals[\"rev_or_conv_lm\"] - totals[\"rev_or_conv_lmly\"]) / totals[\"rev_or_conv_lmly\"]) * 100;\n\n return (\n \n
\n PPC Summary Search
\n{this.props.date_formatted}
\n\n \n \n
\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return{metric.display_name} | ;\n })}\n|
|---|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = metrics[client.client_name][metric.programmatic_name];\n let className = \"\";\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.Revenue : MetricFormatter.Conversions;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n className =\n client.account_type == \"ecommerce\" ? (value > 0 ? \"bg-success\" : \"bg-danger\") : value > 0 ? \"bg-danger\" : \"bg-success\";\n }\n\n if (metric.programmatic_name.includes(\"yy\")) {\n Formatter = MetricFormatter.YY;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n }\n\n return (\n\n | \n );\n })}\n |
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n }\n\n return metric.programmatic_name.includes(\"or\") || metric.programmatic_name.includes(\"kpi\") ? (\n\n ) : (\n | \n | \n );\n })}\n
\n {[...Array(Math.ceil(this.props.client_list.length / clientsPerPage))].map((x, index) => {\n return (\n \n \n );\n })}\n
\n );\n }\n}\n\nexport default PPCPdfSummarySocial;\n","import React from 'react';\nimport Table from 'react-bootstrap/Table'\nimport MetricFormatter from 'dashboards/MetricFormatter'\nimport PDFPage from 'pdfs/PDFPage'\n\nclass PPCPdfSummaryVideo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {};\n }\n\n getPageNumber(current) {\n return current + 1;\n }\n\n render() {\n let metrics = this.props.video_metrics;\n let pageNumber = 0;\n let clientsPerPage = 35;\n\n const clients = Object.keys(this.props.video_metrics);\n const firstKey = clients[0];\n const videoMetrics = Object.keys(this.props.video_metrics[firstKey]).filter((el) => !el.includes(\"yy\"));\n\n let totals = {};\n\n clients.map((client) => {\n videoMetrics.map((metricName) => {\n let mValue = this.props.video_metrics[client][metricName];\n totals[metricName] ? (totals[metricName] += mValue) : (totals[metricName] = mValue);\n });\n });\n\n totals[\"rev_or_conv_yy\"] = ((totals[\"rev_or_conv\"] - totals[\"rev_or_conv_ly\"]) / totals[\"rev_or_conv_ly\"]) * 100;\n totals[\"rev_or_conv_lm_yy\"] = ((totals[\"rev_or_conv_lm\"] - totals[\"rev_or_conv_lmly\"]) / totals[\"rev_or_conv_lmly\"]) * 100;\n\n return (\n \n
\n PPC Summary Social
\n{this.props.date_formatted}
\n\n \n \n
\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return{metric.display_name} | ;\n })}\n|
|---|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = metrics[client.client_name][metric.programmatic_name];\n let className = \"\";\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.Revenue : MetricFormatter.Conversions;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n className =\n client.account_type == \"ecommerce\" ? (value > 0 ? \"bg-success\" : \"bg-danger\") : value > 0 ? \"bg-danger\" : \"bg-success\";\n }\n\n if (metric.programmatic_name.includes(\"yy\")) {\n Formatter = MetricFormatter.YY;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n }\n\n return (\n\n | \n );\n })}\n |
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n }\n\n return metric.programmatic_name.includes(\"or\") || metric.programmatic_name.includes(\"kpi\") ? (\n\n ) : (\n | \n | \n );\n })}\n
\n {[...Array(Math.ceil(this.props.client_list.length / clientsPerPage))].map((x, index) => {\n return (\n \n \n );\n })}\n
\n );\n }\n}\n\nexport default PPCPdfSummaryVideo;\n","import React from \"react\";\nimport ChartGoal from \"charts/ChartGoal\";\nimport ChartLine from \"charts/ChartLine\";\nimport ChartPie from \"charts/ChartPie\";\nimport ChartBar from \"charts/ChartBar\";\nimport ChartLocation from \"charts/ChartLocation\";\nimport Row from \"react-bootstrap/Row\";\nimport Col from \"react-bootstrap/Col\";\nimport KPIMetricBlock from \"dashboards/KPIMetricBlock\";\nimport MetricFormatter from \"dashboards/MetricFormatter\";\nimport MetricTablePdf from \"MetricTablePdf\";\nimport ServiceDisabled from \"dashboards/ServiceDisabled\";\nimport GetFormatter from \"dashboards/GetFormatter\";\nimport NoData from \"dashboards/NoData\";\nimport jsDig from \"utils/jsDig\";\nimport allMetrics from \"data/allMetrics.js\";\nimport PDFPage from \"pdfs/PDFPage\";\nimport { camelCase, cloneDeep } from \"lodash-es\";\nimport getNegative from \"../utils/getNegative\";\nimport getGoalLocked from \"utils/getGoalLocked\";\nimport dashboardTableOrder from \"../utils/dashboardTableOrder\";\n\nconst allMetricData = allMetrics();\nconst ageKeyOrder = [\"18-24\", \"25-34\", \"35-44\", \"45-54\", \"55-64\", \"65+\", \"unknown\"];\nconst dayKeyOrder = [\"monday\", \"tuesday\", \"wednesday\", \"thursday\", \"friday\", \"saturday\", \"sunday\"];\nconst hourKeyOrder = [\n \"00\",\n \"01\",\n \"02\",\n \"03\",\n \"04\",\n \"05\",\n \"06\",\n \"07\",\n \"08\",\n \"09\",\n \"10\",\n \"11\",\n \"12\",\n \"13\",\n \"14\",\n \"15\",\n \"16\",\n \"17\",\n \"18\",\n \"19\",\n \"20\",\n \"21\",\n \"22\",\n \"23\",\n];\n\nclass PPCPdfVideo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {};\n this.goalChartDim = \"135x135\";\n this.lineChartDim = \"350x250\";\n this.pieChartDim = \"175x175\";\n this.goalsPerRow = 5;\n this.chartsPerRow = 2;\n this.tablesPerRow = 1;\n this.kpiBlocksPerRow = 3;\n this.metricsPerTable = 4;\n this.goalRowHeight = 144;\n this.chartRowHeight = 300;\n this.tableRowHeight = 315;\n this.groupTableRowHeight = 355;\n this.kpiBlockRowHeight = 200;\n this.pieRowHeight = 240;\n this.barRowHeight = 340;\n this.mapRowHeight = 600;\n }\n\n generatePdfSection(section, cc_data, dashboard) {\n const metricData = allMetricData[\"metricData\"];\n let date = this.props.date ? moment(this.props.date) : moment();\n let month = date.format(\"MMM\");\n let year = date.year();\n let campaignGroupCase;\n function categorize(string) {\n if (string.includes(\"campaignGroups\")) {\n campaignGroupCase = string;\n }\n return string;\n }\n if (section.metrics_data) {\n const renderArray = dashboardTableOrder(\"ppc\", Object.keys(section.metrics_data));\n switch (categorize(section.name)) {\n case \"goalsAndProjections\":\n let goals = this.props.goals;\n return (\n <>\n \n
\n PPC Summary Video
\n{this.props.date_formatted}
\n\n \n \n
\n
\n | Client | \n {this.props.metric_list.map((metric) => {\n return{metric.display_name} | ;\n })}\n|
|---|---|---|
| \n {client.client_name}\n | \n {this.props.metric_list.map((metric) => {\n let value = metrics[client.client_name][metric.programmatic_name];\n let className = \"\";\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.Revenue : MetricFormatter.Conversions;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = client.account_type == \"ecommerce\" ? MetricFormatter.ROAS : MetricFormatter.CPA;\n className =\n client.account_type == \"ecommerce\" ? (value > 0 ? \"bg-success\" : \"bg-danger\") : value > 0 ? \"bg-danger\" : \"bg-success\";\n }\n\n if (metric.programmatic_name.includes(\"yy\")) {\n Formatter = MetricFormatter.YY;\n className = value > 0 ? \"bg-success\" : \"bg-danger\";\n }\n\n return (\n\n | \n );\n })}\n |
| \n TOTALS\n | \n {this.props.metric_list.map((metric) => {\n let value = totals[metric.programmatic_name];\n let prefix = \"\";\n let suffix = \"\";\n let precision = 0;\n let commas = true;\n let className = false;\n\n let Formatter;\n\n if (metric.programmatic_name == \"budget\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_budget\") {\n Formatter = MetricFormatter.Revenue;\n className = value > 0 ? \"bg-danger\" : \"bg-success\";\n } else if (metric.programmatic_name == \"rev_or_conv\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n } else if (metric.programmatic_name == \"proj_to_kpi_goal\") {\n Formatter = MetricFormatter.Revenue;\n }\n\n return metric.programmatic_name.includes(\"or\") || metric.programmatic_name.includes(\"kpi\") ? (\n\n ) : (\n | \n | \n );\n })}\n
Goals & Projections
\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\nPrimary KPI's
\n\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nKPI's vs Previous Year
\n\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n return (\n
\n \n );\n case campaignGroupCase:\n const campaignName = campaignGroupCase.replace(\"campaignGroups\", \"\");\n const campaignGroup = this.props.campaign_groups.find((el) => el.name == campaignName);\n\n return (\n <>\n {[campaignGroup.id].map((group_id, index) => {\n let metricTitles = [];\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{campaignGroup.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for campaign group {group_id}\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nSpend Allocation
\n\n
\n \n By Platform
\n\n
\n \n By Device
\n\n
\n \n By Gender
\n\n
\n \n By Age
\n\n
\n \n By Day-of-the-Week
\n\n
\n \n By Time-of-Day
\n\n
\n \n By Location
\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n }\n\n generatePdfPage(page, cc_data, dashboard, index) {\n if (page[\"metricNames\"]) {\n let sectionNames = page[\"metricNames\"].map((metric) => metric[\"section\"]).filter((value, index, self) => self.indexOf(value) === index);\n let sections = [];\n // Create sections object and format how the dashboard generation loop expects\n sectionNames.forEach((section) => {\n sections.push({\n name: section,\n metrics_data: page[\"metricNames\"]\n .filter((m) => m[\"section\"] == section)\n .reduce((sum, item) => {\n sum[item[\"name\"]] = \"1\";\n return sum;\n }, {}),\n });\n });\n\n console.log(\"Sections:\");\n console.log(sections);\n\n return (\n <>\n\n
\n )}\n {sections.map((section) => {\n return (\n {this.props.client_name} Video Dashboard
\n{this.props.date_formatted}
\n\n {this.generatePdfSection(section, cc_data, dashboard)}\n
\n );\n })}\n no metricsData in page
\n \n );\n }\n }\n\n render() {\n const dashboard = parseInt(this.props.dashboard);\n const cc_data = this.props.cc_data;\n const sectionList = jsDig([\"metricsByDashboard\", \"video\", \"sections\"], allMetricData);\n const defaultMetrics = jsDig([\"metricsByDashboard\", \"video\", \"defaults\", this.props.client_type], allMetricData);\n\n let dashboardOrder =\n jsDig([dashboard], this.props.dashboard_order) && jsDig([dashboard], this.props.dashboard_order).length > 0\n ? cloneDeep(jsDig([dashboard], this.props.dashboard_order))\n : Object.keys(sectionList).map((sectionName) => {\n let defaultMetricsData = defaultMetrics[sectionName] ? Object.keys(defaultMetrics[sectionName]) : [];\n return {\n name: sectionName,\n enabled: true,\n metrics_data: defaultMetricsData.reduce((sum, item) => {\n sum[item] = \"1\";\n return sum;\n }, {}),\n };\n });\n if (dashboard > 0) {\n const tempIndex = this.props.campaign_groups.findIndex((el) => el.id == dashboard);\n dashboardOrder = this.props.campaign_groups[tempIndex].dashboard_order;\n }\n let campaignIndex = dashboardOrder.findIndex((el) => el.name == \"campaignGroups\");\n const copyOfCampaignMetric = campaignIndex == -1 && dashboard > 0 ? cloneDeep(dashboardOrder[dashboard]) : cloneDeep(dashboardOrder[campaignIndex]);\n dashboard == 0 && dashboardOrder.splice(campaignIndex, 1);\n this.props.campaign_groups.forEach((group) => {\n let duplicateCampaign = copyOfCampaignMetric;\n duplicateCampaign[\"name\"] = `campaignGroups${group.name}`;\n dashboardOrder.splice(campaignIndex, 0, cloneDeep(duplicateCampaign));\n campaignIndex += 1;\n });\n\n // Break up spend allocation into 4 sections\n let allocationIndex = dashboardOrder.findIndex((el) => el.name == \"spendAllocation\");\n const allocationMetrics = cloneDeep(dashboardOrder[allocationIndex]);\n dashboardOrder.splice(allocationIndex, 1);\n [...Array(4)].forEach((x, index) => {\n let allocationSection = allocationMetrics;\n let sectionName;\n if (index == 0) {\n sectionName = \"Pies\";\n } else if (index == 1) {\n sectionName = \"Bars1\";\n } else if (index == 2) {\n sectionName = \"Bars2\";\n } else if (index == 3) {\n sectionName = \"Map\";\n }\n allocationSection[\"name\"] = `spendAllocation${sectionName}`;\n dashboardOrder.splice(allocationIndex, 0, cloneDeep(allocationMetrics));\n allocationIndex += 1;\n });\n\n // PDFs can't be processed section by section, we need to get every metric / chart that needs to video and process them sequentially to figure out how much can fit on each page\n let pages = [];\n let currentPage = 0;\n let campaignGroupIndex = dashboardOrder.findIndex((el) => el.name.includes(\"campaignGroups\"));\n for (const [index, section] of dashboardOrder.entries()) {\n if (section.enabled) {\n if (section.metrics_data) {\n let metricNames = section.metrics_data && Object.keys(section.metrics_data);\n let elementsPerRow = 0;\n let elementHeight = 0;\n if (section.name == \"goalsAndProjections\") {\n elementsPerRow = this.goalsPerRow;\n elementHeight = this.goalRowHeight;\n } else if (section.name == \"primaryKpiCharts\") {\n elementsPerRow = this.chartsPerRow;\n elementHeight = this.chartRowHeight;\n } else if (section.name == \"primaryKpiTables\") {\n elementsPerRow = this.metricsPerTable;\n elementHeight = this.tableRowHeight;\n } else if (section.name == \"allKpisVsPreviousYear\") {\n elementsPerRow = this.kpiBlocksPerRow;\n elementHeight = this.kpiBlockRowHeight;\n } else if (section.name.includes(\"campaignGroups\")) {\n elementsPerRow = this.metricsPerTable;\n if (dashboardOrder[index - 1] && dashboardOrder[index - 1].name.includes(\"campaignGroups\") && !((index - campaignGroupIndex) % 2 == 0) && metricNames.length < 3) {\n elementHeight = 0;\n } else {\n elementHeight = this.groupTableRowHeight;\n }\n } else if (section.name == \"spendAllocationPies\") {\n elementHeight = this.pieRowHeight;\n elementsPerRow = 3;\n } else if (section.name == \"spendAllocationBars1\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 2;\n } else if (section.name == \"spendAllocationBars2\") {\n elementHeight = this.barRowHeight;\n elementsPerRow = 1;\n } else if (section.name == \"spendAllocationMap\") {\n elementHeight = this.mapRowHeight;\n elementsPerRow = 1;\n } else {\n return section.name;\n }\n\n // Create pages array\n if (section.name == \"spendAllocationPies\") {\n metricNames = [\"platform\", \"device\", \"gender\"];\n }\n if (section.name == \"spendAllocationBars1\") {\n metricNames = [\"age\", \"day\"];\n }\n if (section.name == \"spendAllocationBars2\") {\n metricNames = [\"hour\"];\n }\n if (section.name == \"spendAllocationMap\") {\n metricNames = [\"state\"];\n }\n metricNames.forEach((metricName, metricIndex) => {\n if (!pages[currentPage]) {\n pages[currentPage] = { metricNames: [], pageHeight: 0 };\n }\n if (metricIndex == 0) {\n console.log(\"Add 40 pixels for header\");\n pages[currentPage][\"pageHeight\"] += 40;\n }\n if (metricIndex % elementsPerRow == 0 || metricIndex == 0) {\n // 1065px page height - (74px + 10px if header) - 10px bottom padding\n let maxPageHeight = currentPage == 0 ? 971 : 1055;\n if (elementHeight + pages[currentPage][\"pageHeight\"] > maxPageHeight) {\n console.log(`${elementHeight + pages[currentPage][\"pageHeight\"]}px Would overflow PDF ${maxPageHeight}px, need to create new page`);\n currentPage += 1;\n if (!pages[currentPage]) {\n console.log(\"Initialized new page\");\n pages[currentPage] = { metricNames: [], pageHeight: 40 };\n }\n }\n pages[currentPage][\"pageHeight\"] += elementHeight;\n }\n pages[currentPage][\"metricNames\"].push({\n name: metricName,\n section: section.name,\n });\n\n console.log(\n \"section: \" +\n section.name +\n \" page: \" +\n currentPage +\n \", EPR: \" +\n elementsPerRow +\n \", name: \" +\n metricName +\n \", index: \" +\n metricIndex +\n \", page height:\" +\n pages[currentPage][\"pageHeight\"]\n );\n });\n }\n }\n }\n\n console.log(\"Pages:\");\n console.log(pages);\n\n if (this.props.enabled) {\n if (jsDig([dashboard, \"date\"], cc_data)) {\n return (\n <>\n {pages.map((page, index) => {\n return this.generatePdfPage(page, cc_data, dashboard, index);\n })}\n \n );\n } else {\n return (\n <>\nGoals & Projections
\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\nPrimary KPI's
\n\n\n {metricKey} was not found in metrics_by_month in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\nPrimary Kpi Tables
\n\n {metricKey} was not found in metrics_2_years in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nKPI's vs Previous Year
\n\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n return (\n
\n \n );\n case landingPageCase:\n const pageName = landingPageCase.replace(\"landingPageGroups\", \"\");\n const landingPage = this.props.landing_page_groups.find((el) => el.name == pageName);\n return (\n <>\n {[landingPage.id].map((group_id, index) => {\n let metricTitles = [];\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n{landingPage.name}
\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n if (metricKey) {\n metricTitles.push(metricKey);\n if (jsDig([group_id, \"metrics_2_years\", metricKey], cc_data) == null) {\n return (\n\n {metricKey} was not found in metrics_2_years in cc_data for landing page group {group_id}\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n {[...Array(Math.ceil(metricTitles.length / 4))].map((x, index) => {\n return (\nBacklinks
\n\n {renderArray.map((metricName, index) => {\n const metricKey = jsDig([metricName, \"name\", \"snakeCase\"], metricData);\n const metricShortened = jsDig([metricName, \"name\", \"shortened\"], metricData);\n if (metricKey) {\n if (jsDig([dashboard, metricKey], cc_data) != null) {\n if (section.metrics_data[metricName] == \"1\") {\n let Formatter = GetFormatter({ metricName: metricKey });\n const negative = getNegative(section.name, metricKey, jsDig([dashboard, metricKey, \"projected_yy\"], cc_data));\n return (\n
\n \n );\n case keywordCase:\n const keywordName = keywordCase.replace(\"keywordGroups\", \"\");\n const keywordGroup = this.props.keyword_groups.find((el) => el.name == keywordName);\n return (\n <>\n {[keywordGroup].map((group, index) => {\n console.log(group);\n console.log(section);\n const keywordGroup = group;\n const group_id = group.id;\n let metricTitle = this.props.keyword_groups.map((group) => group.name)[index];\n let metricTitles = [];\n metricTitles.push(metricTitle);\n return (\n \n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\n\n \n
\n
\n );\n })}\n \n );\n case \"keywordSummary\":\n return (\n <>\n Keyword: {keywordGroup.name}
\n\nKeyword Summary
\n\n {metricKey} was not found in cc_data\n
\n );\n }\n } else {\n return (\n\n {metricName} not defined in metricData.json\n
\n );\n }\n })}\nKeyword Rankings
\n{section.name} is not a valid section name for this dashboard
\n \n );\n }\n }\n }\n\n generatePdfPage(page, cc_data, dashboard, index) {\n if (page[\"metricNames\"]) {\n let sectionNames = page[\"metricNames\"].map((metric) => metric[\"section\"]).filter((value, index, self) => self.indexOf(value) === index);\n let sections = [];\n // Create sections object and format how the dashboard generation loop expects\n sectionNames.forEach((section) => {\n sections.push({\n name: section,\n metrics_data: page[\"metricNames\"]\n .filter((m) => m[\"section\"] == section)\n .reduce((sum, item) => {\n sum[item[\"name\"]] = \"1\";\n return sum;\n }, {}),\n });\n });\n\n console.log(\"Sections:\");\n console.log(sections, sections.includes(\"landingPageGroups\"));\n\n return (\n\n
\n )}\n {sections.map((section) => {\n return (\n {this.props.client_name} SEO Dashboard
\n{this.props.date_formatted}
\nno metricsData in page
\n \n );\n }\n }\n\n render() {\n const dashboard = this.props.dashboard;\n const cc_data = this.props.cc_data;\n const sectionList = jsDig([\"metricsByDashboard\", \"seo\", \"sections\"], allMetricData);\n const defaultMetrics = jsDig([\"metricsByDashboard\", \"seo\", \"defaults\", this.props.client_type], allMetricData);\n let dashboardOrder =\n jsDig([dashboard], this.props.dashboard_order) && jsDig([dashboard], this.props.dashboard_order).length > 0\n ? cloneDeep(jsDig([dashboard], this.props.dashboard_order))\n : Object.keys(sectionList).map((sectionName) => {\n let defaultMetricsData = defaultMetrics[sectionName] ? Object.keys(defaultMetrics[sectionName]) : [];\n return {\n name: sectionName,\n enabled: true,\n metrics_data: defaultMetricsData.reduce((sum, item) => {\n sum[item] = \"1\";\n return sum;\n }, {}),\n };\n });\n\n let landingPageIndex = dashboardOrder.findIndex((el) => el.name == \"landingPageBreakdown\");\n const copyOfLandingPageMetric = cloneDeep(dashboardOrder[landingPageIndex]);\n dashboardOrder.splice(landingPageIndex, 1);\n this.props.landing_page_groups.forEach((group) => {\n let duplicateLandingPage = copyOfLandingPageMetric;\n duplicateLandingPage[\"name\"] = `landingPageGroups${group.name}`;\n dashboardOrder.splice(landingPageIndex, 0, cloneDeep(duplicateLandingPage));\n landingPageIndex += 1;\n });\n\n let keywordIndex = dashboardOrder.findIndex((el) => el.name == \"keywordGroups\");\n const copyOfKeywordMetric = cloneDeep(dashboardOrder[keywordIndex]);\n dashboardOrder.splice(keywordIndex, 1);\n this.props.keyword_groups.forEach((group) => {\n let duplicateKeywordGroup = copyOfKeywordMetric;\n duplicateKeywordGroup[\"name\"] = `keywordGroups${group.name}`;\n dashboardOrder.splice(keywordIndex, 0, cloneDeep(duplicateKeywordGroup));\n keywordIndex += 1;\n });\n // PDFs can't be processed section this.props.keyword_sort section, we need to get every metric / chart that needs to display and process them sequentially to figure out how much can fit on each page\n let pages = [];\n let currentPage = 0;\n console.log(dashboardOrder, \"entries\");\n let firstLandingPageIndex = dashboardOrder.findIndex((el) => el.name.includes(\"landingPageGroups\"));\n let firstKeywordIndex = dashboardOrder.findIndex((el) => el.name.includes(\"keywordGroups\"));\n for (const [index, section] of dashboardOrder.entries()) {\n console.log(index, firstLandingPageIndex, section, \"section\", !((index - firstLandingPageIndex) % 2 == 0));\n let metricNames = section.metrics_data && Object.keys(section.metrics_data);\n if (section.name == \"keywordGroups\") {\n metricNames = this.props.keyword_groups.map((el) => el.name);\n }\n if (section.enabled) {\n if (section.metrics_data) {\n let elementsPerRow = 0;\n let elementHeight = 0;\n if (section.name == \"goalsAndProjections\") {\n elementsPerRow = this.goalsPerRow;\n elementHeight = this.goalRowHeight;\n } else if (section.name == \"primaryKpiCharts\") {\n elementsPerRow = this.chartsPerRow;\n elementHeight = this.chartRowHeight;\n } else if (section.name == \"primaryKpiTables\") {\n elementsPerRow = this.metricsPerTable;\n elementHeight = this.tableRowHeight;\n } else if (section.name == \"allKpisVsPreviousYear\") {\n elementsPerRow = this.kpiBlocksPerRow;\n elementHeight = this.kpiBlockRowHeight;\n } else if (section.name.includes(\"landingPageGroups\") || section.name.includes(\"keywordGroups\")) {\n elementsPerRow = this.metricsPerTable;\n if (\n ((dashboardOrder[index - 1] && dashboardOrder[index - 1].name.includes(\"landingPageGroups\") && !((index - firstLandingPageIndex) % 2 == 0)) ||\n (dashboardOrder[index - 1] && dashboardOrder[index - 1].name.includes(\"keywordGroups\") && !((index - firstKeywordIndex) % 2 == 0))) &&\n metricNames.length < 3\n ) {\n elementHeight = 0;\n console.log(\"group table height\", 0);\n } else {\n console.log(\"group table height\", this.groupTableRowHeight);\n elementHeight = this.groupTableRowHeight;\n }\n } else if (section.name == \"backlinks\") {\n elementsPerRow = this.kpiBlocksPerRow;\n elementHeight = this.kpiBlockRowHeight;\n } else if (section.name == \"keywordSummary\") {\n elementsPerRow = 2;\n elementHeight = this.kpiBlockRowHeight;\n } else if (section.name == \"keywordRankings\") {\n elementsPerRow = 1;\n elementHeight = this.keywordRankingRowHeight;\n } else {\n return section.name;\n }\n\n // Create pages array\n if (section.name == \"keywordSummary\") {\n metricNames = [\"topThreeKeywords\", \"topTenKeywords\", \"topTwentyKeywords\", \"Improved\"];\n }\n\n if (section.name == \"keywordRankings\") {\n metricNames = jsDig([dashboard, \"keyword_rankings\"], cc_data).map((ranking) => ranking[\"keyword\"]);\n }\n\n metricNames.forEach((metricName, metricIndex) => {\n if (!pages[currentPage]) {\n pages[currentPage] = { metricNames: [], pageHeight: 0 };\n }\n\n if (metricIndex == 0) {\n if (\n ((dashboardOrder[index - 1] && dashboardOrder[index - 1].name.includes(\"landingPageGroups\") && !((index - firstLandingPageIndex) % 2 == 0)) ||\n (dashboardOrder[index - 1] && dashboardOrder[index - 1].name.includes(\"keywordGroups\") && !((index - firstKeywordIndex) % 2 == 0))) &&\n metricNames.length < 3\n ) {\n pages[currentPage][\"pageHeight\"] += 0;\n } else {\n console.log(\"Add 40 pixels for header\");\n pages[currentPage][\"pageHeight\"] += 40;\n }\n }\n\n if (metricIndex % elementsPerRow == 0 || metricIndex == 0) {\n // 1065px page height - (74px + 10px if header) - 10px bottom padding\n let maxPageHeight = currentPage == 0 ? 971 : 1055;\n if (elementHeight + pages[currentPage][\"pageHeight\"] > maxPageHeight) {\n console.log(`${elementHeight + pages[currentPage][\"pageHeight\"]}px Would overflow PDF ${maxPageHeight}px, need to create new page`);\n currentPage += 1;\n if (!pages[currentPage]) {\n console.log(\"Initialized new page\");\n pages[currentPage] = { metricNames: [], pageHeight: 40 };\n }\n if (section.name == \"keywordRankings\") {\n //for table head\n pages[currentPage][\"pageHeight\"] += 25;\n }\n }\n if (metricIndex == 0) {\n if (dashboardOrder[index - 1] && dashboardOrder[index - 1].name.includes(\"landingPageGroups\") && !((index - firstLandingPageIndex) % 2 == 0) && metricNames.length < 3) {\n pages[currentPage][\"pageHeight\"] += 0;\n } else {\n pages[currentPage][\"pageHeight\"] += 40;\n }\n }\n\n pages[currentPage][\"pageHeight\"] += elementHeight;\n }\n\n pages[currentPage][\"metricNames\"].push({\n name: metricName,\n section: section.name,\n });\n\n console.log(\n \"section: \" +\n section.name +\n \" page: \" +\n currentPage +\n \", EPR: \" +\n elementsPerRow +\n \", name: \" +\n metricName +\n \", index: \" +\n metricIndex +\n \", page height:\" +\n pages[currentPage][\"pageHeight\"]\n );\n });\n }\n }\n }\n\n console.log(\"Pages:\");\n console.log(pages);\n\n if (this.props.enabled) {\n if (jsDig([dashboard, \"date\"], cc_data)) {\n return (\n <>\n {pages.map((page, index) => {\n return this.generatePdfPage(page, cc_data, dashboard, index);\n })}\n \n );\n } else {\n return (\n <>\n\n {\n [...Array(Math.ceil(clients.length / clientsPerPage))].map((x, index) => {\n return (\n \n \n )\n })\n }\n
\n )\n }\n}\n\nexport default SEOPdfSummary;\n","import React, { useState, useEffect, useContext } from \"react\";\nimport { Tab, Nav, Container, Form } from \"react-bootstrap\";\nimport SaveChanges from \"./SaveChanges\";\nimport updateParams from \"utils/updateParams.js\";\nimport OverallPPC from \"./services/OverallPPC\";\nimport Search from \"./services/Search\";\nimport Display from \"./services/Display\";\nimport Social from \"./services/Social\";\nimport Video from \"./services/Video\";\n\nexport const PacingContext = React.createContext();\n\nexport default function PpcPacing(props) {\n const authenticityToken = document.querySelector('meta[name=\"csrf-token\"]').content;\n const [tabLocation, setTabLocation] = useState(\"overallPPC\");\n\n const servicePicker = (searchParams) => {\n if (searchParams.toString().includes(\"paidSearch\")) {\n return \"paidSearch\";\n }\n if (searchParams.toString().includes(\"daily\")) {\n return \"daily\";\n }\n if (searchParams.toString().includes(\"display\")) {\n return \"social\";\n }\n if (searchParams.toString().includes(\"display\")) {\n return \"video\";\n }\n };\n\n const submitForm = () => {\n document.getElementById(\"ppc-pacing-data\").submit();\n };\n\n useEffect(() => {\n let searchParams = new URL(location.href).searchParams;\n let page = searchParams.get(\"page\");\n if (!page || page == \"\") {\n page = \"overallPPC\";\n }\n if (page === \"paidSearch\") {\n setTabLocation(page);\n updateParams(\"page\", page);\n // updateParams(\"sub_page\", servicePicker(searchParams));\n } else {\n setTabLocation(page);\n updateParams(\"page\", page);\n }\n }, []);\n\n const selectTab = (key) => {\n if (key === \"services\") {\n setTabLocation(key);\n updateParams(\"page\", key);\n // updateParams(\"sub_page\", servicePicker(searchParams));\n } else {\n setTabLocation(key);\n updateParams(\"page\", key);\n }\n };\n\n return (\n \n
\n SEO Summary
\n{this.props.date_formatted}
\n\n \n \n
\n
\n | Client | \nRevenue {this.props.this_month} MTD | \n Revenue {this.props.this_month} Y/Y | \n Organic Traffic {this.props.this_month} MTD | \n Organic Traffic {this.props.this_month} Projected Y/Y | \n
|---|---|---|---|---|
| \n {\n [1,2,3,4].map((index) => {\n return (\n | {this.props.date.substring(0, 4)} | \n{parseInt(this.props.date.substring(0, 4)) - 1} | \nY/Y | \n|
| {clientName} | \n {\n [\"revenue_mtd\", \"revenue_mtd_last_year\", \"revenue_mtd_yy\", \"revenue_this_month_projected\", \"revenue_this_month_last_year\", \"revenue_this_month_yy\", \"traffic_mtd\", \"traffic_mtd_last_year\", \"traffic_mtd_yy\", \"traffic_this_month_projected\", \"traffic_this_month_last_year\", \"traffic_this_month_yy\"].map((metricName) => {\n let className = \"\";\n let value = this.props.metrics[clientName][metricName];\n if (metricName.includes(\"yy\")) {\n if (value > 0) {\n className = \"bg-success text-white font-weight-bold\"\n } else if (value < 0) {\n className = \"bg-danger text-white font-weight-bold\";\n }\n }\n return (\n\n {\n value != 0 ?\n metricName.includes(\"yy\") ?\n | \n )\n })\n }\n |||
| TOTALS | \n {\n [\"revenue_mtd\", \"revenue_mtd_last_year\", \"revenue_mtd_yy\", \"revenue_this_month_projected\", \"revenue_this_month_last_year\", \"revenue_this_month_yy\", \"traffic_mtd\", \"traffic_mtd_last_year\", \"traffic_mtd_yy\", \"traffic_this_month_projected\", \"traffic_this_month_last_year\", \"traffic_this_month_yy\"].map((metricName) => {\n let className = \"\";\n let value = totals[metricName];\n if (metricName.includes(\"yy\")) {\n if (value > 0) {\n className = \"bg-success text-white font-weight-bold\"\n } else if (value < 0) {\n className = \"bg-danger text-white font-weight-bold\";\n }\n }\n return (\n\n {\n value != 0 ?\n metricName.includes(\"yy\") ?\n | \n )\n })\n }\n
\n \n
\n );\n}\n","import React, { useContext } from \"react\";\nimport { Button, Col, Row } from \"react-bootstrap\";\nimport { PacingContext } from \"./PpcPacing\";\n\n\nexport default function SaveChanges(props) {\n const pacingContext = useContext(PacingContext);\n return (\n \n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Tab, Nav } from \"react-bootstrap\";\nimport updateParams from \"utils/updateParams.js\";\nimport DailyView from \"../views/DailyView\";\nimport SummaryView from \"../views/SummaryView\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function Overall(props) {\n const [tabLocation, setTabLocation] = useState(\"\");\n\n useEffect(() => {\n setTabLocation(\"summary\");\n updateParams(\"sub_page\", tabLocation);\n }, []);\n\n const selectTab = (key) => {\n setTabLocation(key);\n updateParams(\"sub_page\", key);\n };\n\n const defaultMetrics = props.defaultMetrics\n\n return (\n \n \n selectTab(k)}>\n \n \n \n 0 ? props.pacingOrder.summary : defaultMetrics.summary.display}\n defaultMetrics={defaultMetrics.summary.display}\n dateRanges={props.dateRanges}\n platforms={props.platforms}\n metricsData={props.metricsData}\n availableMetrics={props.availableMetrics}\n frequency={props.frequency}\n />\n \n \n 0 ? props.pacingOrder.daily : defaultMetrics.daily.display}\n platforms={props.platforms}\n metricsData={props.metricsData}\n service={props.service}\n />\n \n \n \n
\n \n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Tab, Nav } from \"react-bootstrap\";\nimport updateParams from \"utils/updateParams.js\";\nimport DailyView from \"../views/DailyView\";\nimport SummaryView from \"../views/SummaryView\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function Search(props) {\n const [tabLocation, setTabLocation] = useState(\"\");\n\n useEffect(() => {\n setTabLocation(\"summary\");\n updateParams(\"sub_page\", tabLocation);\n }, []);\n\n const selectTab = (key) => {\n setTabLocation(key);\n updateParams(\"sub_page\", key);\n };\n\n const defaultMetrics = props.defaultMetrics\n\n\n return (\n \n \n selectTab(k)}>\n \n \n \n 0 ? props.pacingOrder.summary : defaultMetrics.summary.overall}\n defaultMetrics={defaultMetrics.summary.overall}\n dateRanges={props.dateRanges}\n platforms={props.platforms}\n metricsData={props.metricsData}\n availableMetrics={props.availableMetrics}\n frequency={props.frequency}\n />\n \n \n 0 ? props.pacingOrder.daily : defaultMetrics.daily.overall}\n metricsData={props.metricsData}\n availableMetrics={props.availableMetrics}\n service={props.service}\n />\n \n \n \n
\n \n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Tab, Nav } from \"react-bootstrap\";\nimport updateParams from \"utils/updateParams.js\";\nimport DailyView from \"../views/DailyView\";\nimport SummaryView from \"../views/SummaryView\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function Social(props) {\n const [tabLocation, setTabLocation] = useState(\"\");\n\n useEffect(() => {\n setTabLocation(\"summary\");\n updateParams(\"sub_page\", tabLocation);\n }, []);\n\n const selectTab = (key) => {\n setTabLocation(key);\n updateParams(\"sub_page\", key);\n };\n\n const defaultMetrics = props.defaultMetrics\n\n return (\n \n \n selectTab(k)}>\n \n \n \n 0 ? props.pacingOrder.summary : defaultMetrics.summary.search}\n defaultMetrics={defaultMetrics.summary.search}\n dateRanges={props.dateRanges}\n platforms={props.platforms}\n metricsData={props.metricsData}\n availableMetrics={props.availableMetrics}\n frequency={props.frequency}\n />\n \n \n 0 ? props.pacingOrder.daily : defaultMetrics.daily.search}\n metricsData={props.metricsData}\n availableMetrics={props.availableMetrics}\n service={props.service}\n />\n \n \n \n
\n \n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport { Tab, Nav } from \"react-bootstrap\";\nimport updateParams from \"utils/updateParams.js\";\nimport DailyView from \"../views/DailyView\";\nimport SummaryView from \"../views/SummaryView\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function Video(props) {\n const [tabLocation, setTabLocation] = useState(\"\");\n\n useEffect(() => {\n setTabLocation(\"summary\");\n updateParams(\"sub_page\", tabLocation);\n }, []);\n\n const selectTab = (key) => {\n setTabLocation(key);\n updateParams(\"sub_page\", key);\n };\n\n const defaultMetrics = props.defaultMetrics\n\n return (\n \n \n selectTab(k)}>\n \n \n \n 0 ? props.pacingOrder.summary : defaultMetrics.summary.social}\n defaultMetrics={defaultMetrics.summary.social}\n dateRanges={props.dateRanges}\n platforms={props.platforms}\n metricsData={props.metricsData}\n availableMetrics={props.availableMetrics}\n frequency={props.frequency}\n />\n \n \n 0 ? props.pacingOrder.daily : defaultMetrics.daily.social}\n defaultMetrics={defaultMetrics.daily.social}\n platforms={props.platforms}\n metricsData={props.metricsData}\n availableMetrics={props.availableMetrics}\n service={props.service}\n />\n \n \n \n
\n \n
\n );\n}\n","import React, { useState, useEffect, useContext } from \"react\";\nimport { Table, Button, Modal, Form, Row, Col } from \"react-bootstrap\";\nimport SaveChanges from \"../SaveChanges\";\nimport { Switch, FormGroup, FormControlLabel } from \"@material-ui/core\";\nimport { Stack, Lock, Unlock } from \"react-bootstrap-icons\";\nimport { PacingContext } from \"../PpcPacing\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function DailyView(props) {\n const pacingContext = useContext(PacingContext);\n const allPlatforms = Object.keys(jsDig([\"metricsData\"], props));\n const platformCount = allPlatforms.length - 1;\n\n const platformSelector = () => {\n const newItem = allPlatforms.filter((item) => item !== \"all\");\n if (platformCount >= 2) {\n return \"all\";\n } else {\n return newItem[0];\n }\n };\n\n const redOrGreen = (integer, metric) => {\n metric = metric.toLowerCase();\n if (integer === \"\") {\n return \"grey-text\";\n }\n if (metric.includes(\"cpa\") || metric.includes(\"cpc\")) {\n if (integer < 0) {\n return \"green-text\";\n } else {\n return \"red-text\";\n }\n } else if (integer < 0) {\n return \"red-text\";\n } else {\n return \"green-text\";\n }\n };\n\n const [availableMetrics, setAvailableMetrics] = useState(props.availableMetrics ? props.availableMetrics : []);\n const [selectedMetrics, setSelectedMetrics] = useState(props.pacingOrder);\n const [selectedPlatform, setSelectedPlatform] = useState(platformSelector());\n const [selectedCampaign, setSelectedCampaign] = useState(\"overall\");\n const [compactView, setCompactView] = useState(pacingContext.user.table_view_preference === \"compact_table_view\" ? true : false);\n const [showBox, setShowBox] = useState(false);\n const [yoy, setYoy] = useState(true);\n\n let columnCount = Math.ceil(availableMetrics.length / 5);\n if (columnCount >= 4) {\n columnCount = 4;\n }\n\n let allIcon = require(\"images/pacing/all-platforms.svg\");\n allIcon = \n \n selectTab(k)}>\n \n \n \n 0 ? props.pacingOrder.summary : defaultMetrics.summary.video}\n defaultMetrics={defaultMetrics.summary.video}\n dateRanges={props.dateRanges}\n platforms={props.platforms}\n metricsData={props.metricsData}\n availableMetrics={props.availableMetrics}\n frequency={props.frequency}\n />\n \n \n 0 ? props.pacingOrder.daily : defaultMetrics.daily.video}\n metricsData={props.metricsData}\n availableMetrics={props.availableMetrics}\n service={props.service}\n />\n \n \n \n
\n \n \n {platformCount >= 2 ? Google only : Google}\n \n \n \n
\n ),\n microsoft: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n facebook: (\n \n \n {platformCount >= 2 ? Facebook only : Facebook}\n \n \n \n
\n ),\n tiktok: (\n \n \n TikTok Only\n \n \n \n
\n ),\n all: (\n \n \n All platforms\n \n \n \n
\n ),\n };\n\n const MetricFormatter = (name, number, views) => {\n let metric = name.toLowerCase();\n let formatted;\n if (metric.includes(\"revenue\") || metric.includes(\"spend\")) {\n formatted = `$${numberWithCommas(Math.round(number))}`;\n } else if (metric.includes(\"cpa\") || metric.includes(\"roas\") || metric.includes(\"cpc\") || metric.includes(\"aov\")) {\n formatted = `$${numberWithCommas((Math.round((number + Number.EPSILON) * 100) / 100).toFixed(2))}`;\n } else if (metric.includes(\"video cvr\") && views === 0) {\n formatted = `0%`;\n } else if (metric.includes(\"cvr\") || metric.includes(\"ctr\")) {\n formatted = `${numberWithCommas((Math.round((number + Number.EPSILON) * 100) / 100).toFixed(2))}%`;\n } else {\n formatted = `${numberWithCommas(Math.round(number))}`;\n }\n return formatted;\n };\n\n return (\n \n {selectedMetrics.map((metric, idx) => {\n return ;\n })}\n {props.service !== \"overall\" && (\n \n
\n
\n );\n}\n","import React, { useState, useContext } from \"react\";\nimport { Table, Button, Modal, Row, Col } from \"react-bootstrap\";\nimport SaveChanges from \"../SaveChanges\";\nimport { Switch, FormGroup, FormControlLabel } from \"@material-ui/core\";\nimport { PacingContext } from \"../PpcPacing\";\nimport CustomFormCheck from \"utils/CustomFormCheck\";\nimport jsDig from \"utils/jsDig\";\n\nexport default function SummaryView(props) {\n const pacingContext = useContext(PacingContext);\n const allPlatforms = Object.keys(jsDig([\"metricsData\"], props));\n const platformCount = allPlatforms.length - 1;\n\n const platformSelector = () => {\n const newItem = allPlatforms.filter((item) => item !== \"all\");\n if (platformCount >= 2) {\n return \"all\";\n } else {\n return newItem[0];\n }\n };\n\n const redOrGreen = (integer, metric) => {\n metric = metric.toLowerCase();\n if (integer === \"\") {\n return \"grey-text\";\n }\n if (metric.includes(\"cpa\") || metric.includes(\"cpc\")) {\n if (integer < 0) {\n return \"green-text\";\n } else {\n return \"red-text\";\n }\n } else if (integer < 0) {\n return \"red-text\";\n } else {\n return \"green-text\";\n }\n };\n\n const [availableMetrics, setAvailableMetrics] = useState(props.availableMetrics ? props.availableMetrics : []);\n const [selectedMetrics, setSelectedMetrics] = useState(props.pacingOrder);\n const [availableFrequency, setAvailableFrequency] = useState([\n \"MTD\",\n \"Last 7 days\",\n \"2 weeks ago\",\n \"Last 14 days\",\n \"Last 30 days\",\n \"Last month\",\n \"2 months ago\",\n \"Projected\",\n ]);\n const [selectedFrequency, setSelectedFrequency] = useState(\n props.frequency.selected_frequency ? props.frequency.selected_frequency[props.service] : availableFrequency\n );\n const [selectedPlatform, setSelectedPlatform] = useState(platformSelector());\n const [selectedCampaign, setSelectedCampaign] = useState(\"overall\");\n const [compactView, setCompactView] = useState(pacingContext.user.table_view_preference === \"compact_table_view\" ? true : false);\n const [yoy, setYoy] = useState(true);\n const [showBox, setShowBox] = useState(false);\n\n let columnCount = Math.ceil(availableMetrics.length / 5);\n if (columnCount >= 4) {\n columnCount = 4;\n }\n\n const metricHelper = (e) => {\n const index = selectedMetrics.indexOf(e.target.name);\n let updatedList = [...selectedMetrics];\n if (index > -1) {\n updatedList.splice(selectedMetrics.indexOf(e.target.name), 1);\n } else {\n updatedList = [...selectedMetrics, e.target.name];\n }\n setSelectedMetrics(updatedList);\n };\n const frequencyHelper = (e) => {\n const index = selectedFrequency.indexOf(e.target.name);\n let updatedList = [...selectedFrequency];\n if (index > -1) {\n updatedList.splice(selectedFrequency.indexOf(e.target.name), 1);\n } else {\n updatedList = [...selectedFrequency, e.target.name];\n }\n setSelectedFrequency(updatedList);\n };\n\n const numberWithCommas = (x) => {\n return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n };\n\n const campaignCapitalized = selectedCampaign.charAt(0).toUpperCase() + selectedCampaign.slice(1);\n const serviceCapitalized = props.service.charAt(0).toUpperCase() + props.service.slice(1);\n\n let platformArray = [];\n if (props.service !== \"overall\") {\n props.platforms.forEach((platform) => props.metricsData[platform] && platformArray.push(Object.keys(props.metricsData[platform])));\n }\n const platformSet = new Set(...platformArray);\n const uniquePlatforms = props.service !== \"overall\" ? Array.from(platformSet) : [];\n\n const svgList = {\n google: (\n \n
\n )}\n \n \n\n
\n - \n {selectedPlatform === \"all\"\n ? uniquePlatforms.map((campaign, index) => {\n const campCapitalized = campaign.charAt(0).toUpperCase() + campaign.slice(1);\n return (\n
\n {serviceCapitalized}: {campCapitalized}{\" \"}\n
\n \n );\n })\n : Object.keys(props.metricsData[selectedPlatform]).map((campaign, index) => {\n const campCapitalized = campaign.charAt(0).toUpperCase() + campaign.slice(1);\n return (\n \n {serviceCapitalized}: {campCapitalized}{\" \"}\n
\n \n );\n })}\n \n \n
\n - \n {Object.keys(props.metricsData)\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n const iconGraphic =\n platform == \"google\" ? googleIcon : platform === \"microsoft\" ? microsoftIcon : platform === \"facebook\" ? facebookIcon : platform === \"tiktok\" ? tiktokIcon : allIcon;\n return (\n
\n setShowBox(false)}>\n \n Customize Table \n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n \n
\n Show these parameters when available:
\n \nMetric:
\n \n- \n {availableMetrics.map((el, i) => {\n return (\n
- \n
\n \n {\n setYoy(!yoy);\n }}\n />\n }\n label=\"Show Y/Y Metrics\"\n />\n \n
\n {/* \n \n {\n setCompactView(!compactView);\n }}\n />\n }\n label={compactView ? \"Compact View\" : \"Full View\"}\n />\n \n
*/}\n \n \n \n
\n
\n | \n \n | \n {selectedMetrics.map((metricName, i) => {\n return (\n\n {metricName}\n | \n );\n })}\n|||
|---|---|---|---|---|
| \n {`${beforeDate} (${formatDate(date)})`} \n | \n {selectedMetrics.map((metricName, i) => {\n const number =\n props.service === \"overall\"\n ? jsDig([\"metricsData\", metricName, \"daily\", \"running_31\", \"this_year\", date], props)\n : jsDig([\"metricsData\", selectedPlatform, selectedCampaign, metricName, \"daily\", \"running_31\", \"this_year\", date], props);\n const views =\n props.service === \"overall\"\n ? jsDig([\"metricsData\", \"Views\", \"daily\", \"running_31\", \"this_year\", date], props)\n : jsDig([\"metricsData\", selectedPlatform, selectedCampaign, \"Views\", \"daily\", \"running_31\", \"this_year\", date], props);\n const currentValue = MetricFormatter(metricName, number, views);\n let overallAmount =\n jsDig([\"metricsData\", metricName, \"daily\", \"running_31\", \"yoy\", date], props) === \"\"\n ? \"\"\n : numberWithCommas(\n (Math.round((jsDig([\"metricsData\", metricName, \"daily\", \"running_31\", \"yoy\", date], props) + Number.EPSILON) * 100) / 100).toFixed(0)\n );\n\n let amount =\n jsDig([\"metricsData\", selectedPlatform, selectedCampaign, metricName, \"daily\", \"running_31\", \"yoy\", date], props) === \"\"\n ? \"\"\n : numberWithCommas(\n (\n Math.round(\n (jsDig([\"metricsData\", selectedPlatform, selectedCampaign, metricName, \"daily\", \"running_31\", \"yoy\", date], props) + Number.EPSILON) * 100\n ) / 100\n ).toFixed(0)\n );\n\n return props.service === \"overall\" ? (\n overallAmount == \"\" ? (\n \n {currentValue} \n{`No data`} \n | \n ) : (\n \n {currentValue} \n | \n )\n ) : amount === \"\" ? (\n \n {currentValue} \n{`No data`} \n | \n ) : (\n \n {currentValue} \n{`${amount}%`} \n | \n );\n })}\n
\n \n {platformCount >= 2 ? Google only : Google}\n \n \n \n
\n ),\n microsoft: (\n \n \n {platformCount >= 2 ? Microsoft only : Microsoft}\n \n \n \n
\n ),\n facebook: (\n \n \n {platformCount >= 2 ? Facebook only : Facebook}\n \n \n \n
\n ),\n tiktok: (\n \n \n TikTok Only\n \n \n \n
\n ),\n all: (\n \n \n All platforms\n \n \n \n
\n ),\n };\n\n const MetricFormatter = (name, number, views) => {\n let metric = name.toLowerCase();\n let formatted;\n if (metric.includes(\"revenue\") || metric.includes(\"spend\")) {\n formatted = `$${numberWithCommas(Math.round(number))}`;\n } else if (metric.includes(\"cpa\") || metric.includes(\"roas\") || metric.includes(\"cpc\") || metric.includes(\"aov\")) {\n formatted = `$${numberWithCommas((Math.round((number + Number.EPSILON) * 100) / 100).toFixed(2))}`;\n } else if (metric.includes(\"video cvr\") && views === 0) {\n formatted = `0%`;\n } else if (metric.includes(\"cvr\") || metric.includes(\"ctr\")) {\n formatted = `${numberWithCommas((Math.round((number + Number.EPSILON) * 100) / 100).toFixed(2))}%`;\n } else {\n formatted = `${numberWithCommas(Math.round(number))}`;\n }\n return formatted;\n };\n\n let allIcon = require(\"images/pacing/all-platforms.svg\");\n allIcon = \n {selectedMetrics.map((metric, idx) => {\n return ;\n })}\n {selectedFrequency.map((frequency, idx) => {\n return ;\n })}\n {props.service !== \"overall\" && (\n \n
\n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\r\nimport { Tab, Nav, Container } from \"react-bootstrap\";\r\nimport jsDig from \"utils/jsDig\";\r\nimport enTranslations from '@shopify/polaris/locales/en.json';\r\nimport {AppProvider, Page, Card, Button, Badge, List, TextContainer, TextStyle} from '@shopify/polaris';\r\n\r\nexport default function App(props) {\r\n const dashboardUrl = `/datapulse/shopify/app/dashboard?shop=${props.shop}`\r\n const teamUrl = `/datapulse/shopify/app/team?shop=${props.shop}`\r\n\r\n return (\r\n \n
\n )}\n \n \n\n
\n - \n {selectedPlatform === \"all\"\n ? uniquePlatforms.map((campaign, index) => {\n const campCapitalized = campaign.charAt(0).toUpperCase() + campaign.slice(1);\n return (\n
\n {serviceCapitalized}: {campCapitalized}{\" \"}\n
\n \n );\n })\n : Object.keys(props.metricsData[selectedPlatform]).map((campaign, index) => {\n const campCapitalized = campaign.charAt(0).toUpperCase() + campaign.slice(1);\n return (\n \n {serviceCapitalized}: {campCapitalized}{\" \"}\n
\n \n );\n })}\n \n \n
\n - \n {Object.keys(props.metricsData)\n .sort((a, b) => (b === \"all\") - (a === \"all\"))\n .filter((el) => (platformCount < 2 ? el !== \"all\" : el))\n .map((platform, index) => {\n let capitalized = platform.charAt(0).toUpperCase() + platform.slice(1);\n const iconGraphic =\n platform == \"google\"\n ? googleIcon\n : platform === \"microsoft\"\n ? microsoftIcon\n : platform === \"facebook\"\n ? facebookIcon\n : platform === \"tiktok\"\n ? tiktokIcon\n : allIcon;\n return (\n
\n setShowBox(false)}>\n \n Customize Table \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n {\n setSelectedMetrics(props.defaultMetrics);\n setSelectedFrequency([\"2 months ago\", \"Last month\", \"MTD\", \"Last 7 days\", \"2 weeks ago\", \"Last 14 days\", \"Last 30 days\", \"Projected\"]);\n }}\n className=\"text-center defaults-btn\">\n Use defaults\n \n \n\n
\n \n \n
\n Show these parameters when available:
\n \nMetric:
\n \n- \n {availableMetrics.map((el, i) => {\n return (\n
- \n
Frequency:
\n \n- \n {availableFrequency.map((el, i) => {\n return (\n
- \n
\n \n {\n setYoy(!yoy);\n }}\n />\n }\n label=\"Show Y/Y Metrics\"\n />\n \n
\n {/* \n \n {\n setCompactView(!compactView);\n }}\n />\n }\n label={compactView ? \"Compact View\" : \"Full View\"}\n />\n \n
*/}\n \n \n \n
\n
\n | \n \n | \n {selectedFrequency.map((frequency, i) => {\n return (\n\n {frequency}\n | \n );\n })}\n|||
|---|---|---|---|---|
| \n {metricName} \n\n Y/Y (%)\n \n | \n {selectedFrequency.map((frequency, i) => {\n const number =\n props.service === \"overall\"\n ? jsDig([\"metricsData\", metricName, \"summary\", \"this_year\", frequency], props)\n : jsDig([\"metricsData\", selectedPlatform, selectedCampaign, metricName, \"summary\", \"this_year\", frequency], props);\n const views =\n props.service === \"overall\"\n ? jsDig([\"metricsData\", \"Views\", \"summary\", \"this_year\", frequency], props)\n : jsDig([\"metricsData\", selectedPlatform, selectedCampaign, \"Views\", \"summary\", \"this_year\", frequency], props);\n const currentValue = MetricFormatter(metricName, number, views);\n let overallAmount =\n jsDig([\"metricsData\", metricName, \"summary\", \"yoy\", frequency], props) === \"\"\n ? \"\"\n : numberWithCommas(\n (Math.round((jsDig([\"metricsData\", metricName, \"summary\", \"yoy\", frequency], props) + Number.EPSILON) * 100) / 100).toFixed(0)\n );\n\n let amount =\n jsDig([\"metricsData\", selectedPlatform, selectedCampaign, metricName, \"summary\", \"yoy\", frequency], props) === \"\"\n ? \"\"\n : numberWithCommas(\n (\n Math.round(\n (jsDig([\"metricsData\", selectedPlatform, selectedCampaign, metricName, \"summary\", \"yoy\", frequency], props) + Number.EPSILON) *\n 100\n ) / 100\n ).toFixed(0)\n );\n\n return props.service === \"overall\" ? (\n overallAmount == \"\" ? (\n \n {currentValue} \n{`No data`} \n | \n ) : (\n \n {currentValue} \n | \n )\n ) : amount === \"\" ? (\n \n {currentValue} \n{`No data`} \n | \n ) : (\n \n {currentValue} \n{`${amount}%`} \n | \n );\n })}\n
With this app installed on your shopify store, Digital Position will be able to pull your performance data and display it in your metrics dashboards on DataPulse.
\r\nDataPulse Bridge is successfully
It was installed on \r\n
To see the metrics we have pulled from your store click the button below.
\r\n \r\nSee your team members and get in touch.
\r\n \r\nYour data was last pulled successfully on: \r\n
Your performance for the current month is:
\r\n- \r\n
Even though you have successfully installed the DataPulse Bridge shopify app, it looks like your store ({props.shop}) hasn't been configured in DataPulse yet. DataPulse is where your real dashboards live, but you may see the data we are pulling from Shopify on this page once we have finished configuring your account. Reach out to your Digital Position representative to address this issue.
\r\n- \r\n {props.account_leads.map((user) => {\r\n return (\r\n <>\r\n
After your account is configured, account leads & contact information will appear here.
\r\n \r\n )}\r\n- \r\n {props.account_supports.map((user) => {\r\n return (\r\n <>\r\n
After your account is configured, account supports & contact information will appear here.
\r\n \r\n )}\r\nEven though you have successfully installed the DataPulse Bridge shopify app, it looks like your store ({props.shop}) hasn't been configured in DataPulse yet. You can see complete data about the Digital Position employees who are assisting your marketing efforts by going to DataPulse, but you may see basic contact information about them on this page once we have finished configuring your account. Reach out to your Digital Position representative to address this issue.
\r\nUser Access
\n\n u.role == \"client\")} deleteUser={this.deleteUser} removeUser={this.removeUser} tableName=\"Clients\" />\n u.role == \"employee\")} deleteUser={this.deleteUser} removeUser={this.removeUser} tableName=\"Employees - Restricted Access\" />\n u.role == \"specialist\")} deleteUser={this.deleteUser} removeUser={this.removeUser} tableName=\"Employees - Standard Access\" />\n u.role == \"manager\")} deleteUser={this.deleteUser} removeUser={this.removeUser} tableName=\"Employees - Full Access\" />\n u.role == \"admin\")} deleteUser={this.deleteUser} removeUser={this.removeUser} tableName=\"Employees - Admin Access\" />\n
\n \n
\n \n \n
\n \n );\n }\n}\n\nexport default UserAccessTable;\n","import React from 'react'\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport Table from 'react-bootstrap/Table';\nimport Button from 'react-bootstrap/Button';\nimport Overlay from 'react-bootstrap/Overlay';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nclass UserAccessTableButtons extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n confirmDelete: false,\n confirmRemove: false\n }\n }\n\n render() {\n return (\n \n
\n {this.props.tableName}
\n\n
\n Collapse Section 0 ? \" fa-sort-up\" : \" fa-sort-down\")}>
\n 0 ? \" show\" : \"\")}>\n
\n \n \n \n \n
\n
\n | ID# | \nName | \nRole | \nDepartment | \n\n | |
|---|---|---|---|---|---|
| {user.id} | \n{user.name} | \n{user.email} | \n\n \n {\n this.props.permissions.includes(user.role) && (\n \n | \n
\n\t\t\t\t\n\t\t\t\t\t-\n\t\t\t\t\n\t\t\t\t{props.count}\n\t\t\t\t\n\t\t\t\t\t+\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n\nexport default Counter;\n","import React from 'react'\n\nclass CustomAvatar extends React.Component {\n render() {\n let christmasSpecial = require(\"images/special/Christmas.svg\");\n let fallSpecial = require(\"images/special/FirstDayFall.svg\")\n let springSpecial = require(\"images/special/FirstDaySpring.svg\")\n let summerSpecial = require(\"images/special/FirstDaySummer.svg\")\n let winterSpecial = require(\"images/special/FirstDayWinter.svg\")\n let halloweenSpecial = require(\"images/special/Halloween.svg\")\n return (\n <>\n \n 
\n
\n \n }\n {this.props.special == \"fall\" &&\n <>\n \n 
\n
\n \n }\n {this.props.special == \"spring\" &&\n <>\n \n 
\n
\n \n }\n {this.props.special == \"summer\" &&\n <>\n \n 
\n
\n \n }\n {this.props.special == \"winter\" &&\n <>\n \n 
\n
\n \n }\n {this.props.special == \"halloween\" &&\n <>\n \n 
\n
\n \n }\n \n );\n }\n}\n\nexport default CustomAvatar;\n","import React, { useState } from \"react\";\nimport onClickOutside from \"react-onclickoutside\";\n\n\nfunction CustomDropdown(props) {\n const campaignGroups = props.dashboards;\n let currentTab = props.tabLocation === \"paidSearch\" ? \"search\" : props.tabLocation === \"paidSocial\" ? \"social\" : props.tabLocation === \"paidDisplay\" ? \"display\" : props.tabLocation === \"paidVideo\" ? \"video\" : undefined\n\n let upper = currentTab\n if (upper !== undefined) {\n\n upper = upper[0].toUpperCase() + upper.slice(1)\n }\n const [open, setOpen] = useState(false);\n const [currentSection, setCurrentSection] = useState(\n props.platformName === \"all\" ? \"Search\" : props.platformName\n );\n const [currentCampaign, setCurrentCampaign] = useState(props.section !== \"Performance\" ? campaignGroups[0].name : 0);\n\n CustomDropdown[`handleClickOutside_` + props.platformName + props.section] = () =>\n setOpen(false);\n\n const campaignSetter = (campaign, section) => {\n setCurrentCampaign(campaign.name);\n setCurrentSection(section);\n props.setSelectedDashboard(campaign.name)\n props.setSelectedDashboardId(campaign.id)\n setTimeout(() => setOpen(false), 200)\n };\n\n const goalSetter = (campaign, section) => {\n setCurrentCampaign(campaign.name);\n setCurrentSection(section);\n props.setSelectedDashboardId(campaign.id)\n props.setSelectedDashboard(campaign.name)\n\n setTimeout(() => setOpen(false), 200)\n };\n const performanceSetter = (campaign, section) => {\n console.log(campaign, section)\n setCurrentCampaign(props.seo ? campaign.id : currentTab);\n setCurrentSection(section);\n props.setSelectedDashboard(campaign.id)\n setTimeout(() => setOpen(false), 200)\n };\n\n const platform = props.platformName ? props.platformName.charAt(0).toUpperCase() + props.platformName.slice(1) : undefined\n\n const toggle = () => setOpen(!open);\n\n return (\n \n
\n );\n })}\n \n ) :\n (\n <>\n \n
\n ) : (\n toggle(!open)}>\n {\n props.section === \"Performance\" ?\n props.seo === undefined ?\n //PPC Performance main input text\n
\n \n {upper}: {(currentTab !== undefined) && (props[`${currentTab}`].filter((el) => el.id === props.selectedDashboard)[0] !== undefined) ? props[`${currentTab}`].length > 0 ? props[`${currentTab}`].filter((el) => el.id === props.selectedDashboard)[0].name : \"Overall\" : \"Overall\"}\n {open ? (\n
\n SEO: {props.dashboards.filter((el) => el.id === currentCampaign) && currentCampaign !== 0 ? props.dashboards.filter((el) => el.id === currentCampaign)[0].name : \"Overall\"}\n {open ? (\n
\n {platform === \"Seo\" ? \"SEO\" : platform}: Overall\n {open ? (\n
\n {platform === \"Seo\" ? \"SEO\" : platform}\n {\": \"}\n {props.selectedDashboard}{\" \"}\n {open ? (\n
\n {platform === \"Seo\" ? \"SEO\" : platform}: Overall\n {open ? (\n
\n {currentSection === \"Seo\" ? \"SEO\" : currentSection}\n {\": \"}\n {props.selectedDashboard}{\" \"}\n {open ? (\n
\n {props.selectedDashboard}{\" \"}\n {open ? (\n
\n
\n );\n })}\n \n ) : props.section === \"Performance\" ?\n props.seo === undefined ?\n (\n <>\n \n \n {props.section === \"Goals\" ? (\n //non-clickable display goals/configure goals\n <>\n
\n ) : (\n //name displayed in list goals/configure Goals remaining\n \n \n
\n {campaignGroups.map((dash, idx) => {\n //name displayed in list goals/configure GOALS Overall\n return idx === 0 ? (\n \n {platform === \"Seo\" ? \"SEO\" : platform} Goals\n
\n\n \n goalSetter(dash, platform)\n\n }\n >\n \n {platform === \"Seo\" ? \"SEO\" : platform}: Overall\n
\n \n \n goalSetter(dash, platform)\n }\n >\n \n \n {platform === \"Seo\" ? \"SEO\" : platform}: {dash.name}\n \n
\n \n \n
\n {campaignGroups.map((dash, idx) => {\n return idx === 0 ? (\n \n {upper} Performance\n
\n\n \n performanceSetter(dash, platform)\n\n }\n >\n \n {upper}: Overall\n
\n \n \n performanceSetter(dash, platform)\n }\n >\n \n \n {upper}: {dash.name}\n \n
\n \n \n
\n {campaignGroups.map((dash, idx) => {\n return idx === 0 ? (\n \n SEO Performance\n
\n\n \n performanceSetter(dash, platform)\n }\n >\n \n SEO: Overall\n
\n \n ) : (\n \n \n performanceSetter(dash, platform)\n }\n >\n \n \n SEO: {dash.name}\n \n
\n \n );\n })}\n \n ) :\n (\n <>\n \n \n
\n {campaignGroups.map((dash, idx) => {\n return idx === 0 ? (\n \n {props.platformName} Overall\n
\n\n \n campaignSetter(dash, props.platformName)\n\n }\n >\n \n {props.platformName}: Overall\n
\n \n ) : (\n \n \n campaignSetter(dash, props.platformName)\n }\n >\n \n \n {props.platformName}: {dash.name}\n \n
\n \n );\n })}\n \n )}\n \n \n \n \n );\n}\n\nconst clickOutsideConfig = {\n handleClickOutside: ({ props }) =>\n CustomDropdown[`handleClickOutside_` + props.platformName + props.section],\n};\n\nexport default onClickOutside(CustomDropdown, clickOutsideConfig);\n","import React, { useState } from \"react\";\nimport { OverlayTrigger, Tooltip } from \"react-bootstrap\";\n// React Form.Check elements have default styling and don't allow changing colors. We already addressed this so we will use this custom form check with custom classes\nconst CustomFormCheck = React.forwardRef((props,ref) => {\n let inputElement;\n if (props.dynamic) {\n let checked = props.checked ? props.checked : false;\n const [isChecked, setIsChecked] = useState(checked);\n const handleChange = props.onChange\n ? () => {\n props.onChange();\n setIsChecked(!isChecked);\n }\n : () => {\n setIsChecked(!isChecked);\n };\n inputElement = (\n <>\n {props.sendUncheckedValue && props.name && !isChecked && }\n \n {inputElement}\n {props.hoverText ? (\n \n \n \n ) : (\n \n )}\n
\n \n );\n})\nexport default CustomFormCheck","import React, { useState } from \"react\";\n\nexport default function CustomSwitch(props) {\n const [isChecked, setIsChecked] = useState(props.checked || props.isEnabled ? true : false);\n return (\n <>\n {props.hoverText}
\n \n }>\n \n
\n \n {props.isEnabled !== undefined ? (\n {\n props.setIsEnabled(!props.isEnabled);\n setIsChecked(!isChecked);\n }}\n type=\"checkbox\"\n className=\"custom-control-input\"\n id={props.id}\n name={props.name ? props.name : null}\n disabled={props.disabled}\n />\n ) : (\n setIsChecked(!isChecked)}\n type=\"checkbox\"\n className=\"custom-control-input\"\n id={props.id}\n name={props.name ? props.name : null}\n disabled={props.disabled}\n />\n )}\n \n
\n \n {props.isEnabled !== undefined ? (\n props.isEnabled ? (\n
\n \n );\n}\n","import React from \"react\";\nimport { Tooltip, OverlayTrigger } from \"react-bootstrap\";\n\nexport default function CustomTooltip(props) {\n\tconst renderTooltip = (refs) => (\n\t\t{props.text} is currently enabled
\n ) : (\n{props.text} is currently disabled
\n )\n ) : isChecked ? (\n\n {\" \"}\n {props.text} is currently enabled\n
\n ) : (\n\n {\" \"}\n {props.text} is currently disabled\n
\n )}\n\n\t\t\t\t{props.message}\n\t\t\t\t
\n\t\t\n\t\t\t\n\t\t{props.label}\n\t\t\t \n\t\t
\n\t);\n}\n","import * as React from \"react\";\nimport { Button } from \"react-bootstrap\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport DialogContent from \"@material-ui/core/DialogContent\";\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\nimport { Row } from \"react-bootstrap\";\nimport { ExclamationCircle } from \"react-bootstrap-icons\";\nexport default function DataPullSavePopUp(props) {\n return (\n \n \n
\n );\n}\n","import React from \"react\";\nimport Datepicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\n\nclass DayPicker extends React.Component {\n changeDate(value) {\n let date = new Date(value).yyyymmdd();\n const url = window.location.origin + window.location.pathname + \"?date_selection=\" + date;\n window.location = url;\n }\n render() {\n let startDate = Date.parse(new Date(this.props.startDate).yyyymmdd());\n let minDate = Date.parse(new Date(\"2019-01-01\").yyyymmdd());\n return (\n <>\n \n \n
\n \n );\n }\n}\n\nexport default DayPicker;\n","import React from \"react\";\n\nclass DefaultAvatar extends React.Component {\n chooseColor(firstLetter, secondLetter) {\n // Need to use something to generate colors since some users don't have full names\n let firstInitial = firstLetter != \"\" ? firstLetter : \"a\";\n let secondInitial = secondLetter != \"\" ? secondLetter : \"a\";\n const colors = [\n { text: \"#2f6051\", bg: \"#47bb98\" },\n { text: \"#55403b\", bg: \"#d97358\" },\n { text: \"#c7f7f7\", bg: \"#2e93c6\" },\n { text: \"#bcdff2\", bg: \"#604bc6\" },\n { text: \"#f2cfbc\", bg: \"#ac3d4d\" },\n { text: \"#bbb5ad\", bg: \"#474857\" },\n { text: \"#7fa7b5\", bg: \"#1a4a77\" },\n { text: \"#6f5d2b\", bg: \"#dbb13b\" },\n { text: \"#4ecac3\", bg: \"#2e6661\" },\n { text: \"#608ac1\", bg: \"#481f6c\" },\n ];\n // Get first letters distance from 'a'\n let firstModifier = firstInitial.charCodeAt(0) - 97;\n // Invert the second modifier to get a more 'random' result\n let secondModifier = (secondInitial.charCodeAt(0) - 97) * -1 + 25;\n let finalModifier = (firstModifier + secondModifier) / 2;\n let optionsRatio = colors.length / 26; // 0.38461538461538464\n let chosenIndex = Math.round(finalModifier * optionsRatio) - 1;\n if (chosenIndex < 0) chosenIndex = 2;\n return colors[chosenIndex];\n }\n\n render() {\n let width = this.props.dim.split(\"x\")[0];\n let height = this.props.dim.split(\"x\")[1];\n let firstName = Number.isInteger(this.props.name) ? String(this.props.name)[0] : this.props.name.split(\" \")[0];\n let lastName = Number.isInteger(this.props.name) ? String(this.props.name % 10) : this.props.name.split(\" \")[1];\n let firstInitial = firstName ? firstName.charAt(0).toLowerCase() : \"\";\n let secondInitial = lastName ? lastName.charAt(0).toLowerCase() : \"\";\n let color = this.chooseColor(firstInitial, secondInitial);\n\n if (this.props.alertCounter) {\n if (Number.isInteger(this.props.name) && this.props.name >= 10) {\n firstInitial = \"9\";\n secondInitial = \"+\";\n } else {\n secondInitial = \"\";\n }\n }\n return (\n \n \n
\n \n );\n }\n}\n\nexport default MonthPicker;\n","import React, { useState } from \"react\";\nimport onClickOutside from \"react-onclickoutside\";\nimport { v4 as uuidv4 } from \"uuid\";\n\nfunction NumberDropdown(props) {\n const sections = [\n [\"1\", \"button-1\"],\n [\"2\", \"button-2\"],\n [\"3\", \"button-3\"],\n [\"4\", \"button-4\"],\n ];\n const index = props.permission ? props.permission : 1;\n const [open, setOpen] = useState(false);\n const [currentSection, setCurrentSection] = useState(sections[index - 1]);\n NumberDropdown[`handleClickOutside_` + props.item] = () => setOpen(false);\n\n const handleChange = (section) => {\n setCurrentSection([section[0], section[1]]);\n if (props.customPermissions && props.setCustomPermissions) {\n let newRecipients = [...props.customPermissions];\n newRecipients[props.idx].permission = section[0];\n props.setCustomPermissions(newRecipients);\n }\n };\n\n const toggle = () => setOpen(!open);\n return (\n \n
\n );\n}\n\nconst clickOutsideConfig = {\n handleClickOutside: ({ props }) => NumberDropdown[\"handleClickOutside_\" + props.item],\n};\n\nexport default onClickOutside(NumberDropdown, clickOutsideConfig);\n","import React, { useState } from \"react\";\nimport {Row, Col, Modal, Form, Button} from \"react-bootstrap\";\nimport OrgPickerModal from \"organizations/OrgPickerModal\"\nimport jsDig from \"utils/jsDig\"\n\nexport default function ProfileDropdown(props) {\n let logout = require(\"images/organizations/logout.png\");\n logout = \n
\n toggle(!open)}>\n
\n \n {currentSection[0]}\n {open ? (\n \n ) : (\n \n )}\n
\n \n
\n \n {sections.map((section) => {\n return (\n
\n handleChange(section)} className=\"d-flex pointer\" key={uuidv4()}>\n
\n );\n })}\n \n \n {section[0] === \"1\" ? (\n 1\n ) : section[0] === \"2\" ? (\n 2\n ) : section[0] === \"3\" ? (\n 3\n ) : section[0] === \"4\" ? (\n 4\n ) : undefined}\n
\n \n {(props.organizations && props.organizations.length) > 0 && (\n <>\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n {\n (getRoleTitle(jsDig([\"role\"], userOrgDetail)) === \"Admin\" || props.current_user_is_god) &&\n \n
\n }\n \n
\n \n )}\n \n
\n My Team
\n {/* {logout}Logout
*/}\n {logout}Logout\n \n
\n {(props.organizations && props.organizations.length > 0) && (\n
\n );\n}\n\n","function RandomQuoteGenerator(props) {\n console.log(props)\n const quotes = [\n {text: \"No job is complete until a selfie is posted.\", author: \"Ashok Kallarakkal\"},\n {text: \"The best way to predict the future is to create it.\", author: \"Abraham Lincoln\"},\n {text: \"If opportunity doesn't knock, build a door.\", author: \"Milton Berle\"},\n {text: \"The world is your \\u{1F9AA}; it's up to you to find the pearls.\", author: \"Chris Gardner\"},\n {text: \"It's what you do right now that makes a difference.\", author: \"Mark Bowden\"},\n {text: \"You don't need to take all the steps, only the next one.\", author: \"Unknown\"},\n {text: \"Boi?\", author: \"Jordan Lagan\"},\n {text: \"Obtain the grain.\", author: \"Kaylee Price\"},\n {text: \"We're no strangers to love. You know the rules and so do I.\", author: \"Rick Astley\"},\n {text: \"Fail fast and cheap.\", author: \"Roger Parent\"},\n {text: \"With increased revenue, comes increased heart rate.\", author: \"Tim Pelletier\"},\n {text: \"Ignore it for now.\", author: \"John Zhang\"},\n {text: \"Do or do not. There is no try.\", author: \"Yoda\"},\n {text: \"I like turtles\", author: \"Jonathan The Zombie\"},\n {text: \"If you're going through hell, keep going\", author: \"Winston Churchill\"},\n {text: \"Walking the dogs, brb!\", author: \"Mike Harrison\"},\n {text: \"All we have to decide is what to do with the time that is given us.\", author: \"Gandalf the Grey\"},\n {text: \"When you arise in the morning, think of what a precious privilege it is to be alive - to breathe, to think, to enjoy, to love.\", author: \"Marcus Aurelius\"},\n {text: \"Just keep swimming.\", author: \"Dory\"}\n ];\n\n const normalQuotes= [\n\n {text: \"The best way to predict the future is to create it.\", author: \"Abraham Lincoln\"},\n {text: \"If opportunity doesn't knock, build a door.\", author: \"Milton Berle\"},\n {text: \"The world is your oyster; it's up to you to find the pearls.\", author: \"Chris Gardner\"},\n {text: \"It's what you do right now that makes a difference.\", author: \"Mark Bowden\"},\n {text: \"You don't need to take all the steps, only the next one.\", author: \"Unknown\"},\n {text: \"I attribute my success to this: I never gave or took any excuse.\", author: \"Florence Nightingale\"},\n {text: \"Today’s accomplishments were yesterday’s impossibilities.\", author: \"Robert H. Schuller\"},\n {text: \"Things may come to those who wait, but only the things left by those who hustle.\", author: \"Unknown\"},\n {text: \"When you arise in the morning, think of what a precious privilege it is to be alive - to breathe, to think, to enjoy, to love.\", author: \"Marcus Aurelius\"}\n ];\n\n const specialQuotes = [\n {text: \"oooooOOHH! It's Mista SooFLAY\", author: \"Jöel Begér\", className: \"rainbow\"}\n ]\n\n let roll = Math.random() * 100;\n let quote = {};\n if (roll < 1) {\n quote = specialQuotes[Math.floor(Math.random() * specialQuotes.length)];\n } else {\n quote = quotes[Math.floor(Math.random() * quotes.length)];\n }\n if (props.organization.name !== \"Digital Position\") {\n quote = normalQuotes[Math.floor(Math.random() * normalQuotes.length)];\n }\n\n return quote\n}\n\nexport default RandomQuoteGenerator;\n","import React, { useState, useEffect } from \"react\";\n\nexport default function StateOptions(props) {\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n","import React from 'react';\n\nfunction UserDepartment(props) {\n let humanizedDepartment = ;\n if (props.department == null || props.department == \"no_department\")\n {\n humanizedDepartment = Organization
\n \n {props.organizations.length > 1 &&\nChange Organization
\n \n }\n{props.selected_org ? props.selected_org.name : \"None\"}
\n \n{getRoleTitle(jsDig([\"role\"], userOrgDetail))}
\n \n\n My Team
\n {/* {logout}Logout
*/}\n {logout}Logout\n \n
NONE
\n }\n else\n {\n humanizedDepartment = {props.department.split(\"_\")[0].toUpperCase()}
\n }\n return humanizedDepartment;\n}\n\nexport default UserDepartment;\n","import React from 'react';\n\nfunction UserRole(props) {\n let humanizedRole = ;\n if (props.role == \"client\")\n {\n humanizedRole = Client
\n }\n else\n {\n let to_lower = props.role.replace(\"dp_\", \"\")\n let firstCap = to_lower.charAt(0).toUpperCase() + to_lower.slice(1);\n humanizedRole = {firstCap}
\n }\n return humanizedRole;\n}\n\nexport default UserRole;","// This component takes a list of relevant users to choose from and an array of\n// html form namespaces so that the params sent to the server can be structured\n// as needed via hidden inputs.\nimport React, { useState, useEffect } from \"react\";\nimport DefaultAvatar from \"utils/DefaultAvatar\";\nimport CustomAvatar from \"utils/CustomAvatar\";\nimport { Row, Col, Form, Modal, Button, OverlayTrigger, Tooltip } from \"react-bootstrap\";\n\nexport default function UserSelector(props) {\n const [show, setShow] = useState(false);\n const handleClose = () => setShow(false);\n const handleShow = () => setShow(true);\n const fieldsFor = props.fieldsForArray.map((field) => `[${field}]`).join(\"\") + \"[]\";\n const [selectedUsers, setSelectedUsers] = useState(Array.isArray(props.defaultValue) ? props.defaultValue : []);\n const [toggledUsers, setToggledUsers] = useState([]);\n const unSelectedUsers = Object.keys(props.users).filter((userEmail) => !selectedUsers.includes(userEmail));\n const [visibleUsers, setVisibleUsers] = useState([...unSelectedUsers]);\n // Update the list of users you can select from to be only unselected ones\n useEffect(() => {\n setVisibleUsers([...Object.keys(props.users).filter((userEmail) => !selectedUsers.includes(userEmail))]);\n }, [selectedUsers]);\n\n // Update the list of selected users\n useEffect(() => {\n setSelectedUsers(Array.isArray(props.defaultValue) ? props.defaultValue : []);\n }, [props.defaultValue]);\n\n const toggleUser = (e) => {\n let userEmail = e.target.getAttribute(\"data-email\");\n let selection = [...toggledUsers];\n if (selection.includes(userEmail)) {\n selection.splice(selection.indexOf(userEmail), 1);\n } else {\n selection.push(userEmail);\n }\n setToggledUsers(selection);\n };\n\n const selectUsers = () => {\n props.setServiceAccount && props.setServiceAccount([...selectedUsers, ...toggledUsers]);\n setSelectedUsers([...selectedUsers, ...toggledUsers]);\n setToggledUsers([]);\n handleClose();\n };\n\n const unselectUser = (e) => {\n let userEmail = e.target.getAttribute(\"data-email\");\n let selection = [...selectedUsers];\n selection.splice(selection.indexOf(userEmail), 1);\n props.setServiceAccount && props.setServiceAccount(selection);\n setSelectedUsers(selection);\n props.validator()\n };\n\n const handleCancel = () => {\n setToggledUsers([]);\n handleClose();\n };\n\n const searchUsers = (e) => {\n let filter = e.target.value.toLowerCase();\n let matchedUsers = [];\n Object.keys(props.users).forEach((userEmail) => {\n let user = props.users[userEmail];\n // If the user is not subscribed already && their name or email matches input\n if (!selectedUsers.includes(userEmail) && (user.name.toLowerCase().includes(filter) || userEmail.toLowerCase().includes(filter))) {\n matchedUsers.push(userEmail);\n }\n });\n setVisibleUsers(matchedUsers);\n };\n\n const toggledUsersList = toggledUsers.map((userEmail) => {\n let user = props.users[userEmail];\n return (\n toggleUser(e)}>\n {user.name}\n \n \n );\n });\n const btnDisabled = props.isEnabled !== undefined ? !props.isEnabled : false;\n return (\n <>\n \n {selectedUsers.map((userEmail, index) => {\n let user = props.users[userEmail];\n if (user) {\n let avatar = {user.name}}>\n \n );\n }\n })}\n \n +\n \n \n \n
\n \n );\n}\n","import jsDig from 'utils/jsDig';\n\nexport default (value, baseCurrency, selectedCurrency) => {\n const decimalPlaces = countDecimals(value);\n const allRates = require(\"data/currencyRates.json\");\n const conversionRate = jsDig([baseCurrency, selectedCurrency], allRates);\n const newValue = (value * conversionRate).toFixed(decimalPlaces);\n return newValue;\n}\n\nconst countDecimals = function (value) {\n if (!value) return 0;\n if (Math.floor(value.valueOf()) === value.valueOf()) return 0;\n return value.toString().split(\".\")[1].length || 0; \n}","const ppcOrderArray = [\n \"spend\",\n \"impressions\",\n \"impressionsTopRate\",\n \"impressionsAbsTopRate\",\n \"searchImpressionsShare\",\n \"views\",\n \"viewableImpressions\",\n \"clicks\",\n \"phoneCalls\",\n \"inStoreVisits\",\n \"cpsv\",\n \"earnedSubscribers\",\n \"earnedLikes\",\n \"earnedShares\",\n \"cpc\",\n \"cpv\",\n \"viewCtr\",\n \"ctr\",\n \"clickConversions\",\n \"viewConversions\",\n \"totalConversions\",\n \"cvr\",\n \"videoCvr\",\n \"clickRevenue\",\n \"viewRevenue\",\n \"shopifyRevenue\",\n \"totalRevenue\",\n \"clickCpa\",\n \"totalCpa\",\n \"clickRoas\",\n \"shopifyRoas\",\n \"totalRoas\",\n \"clickAov\",\n \"totalAov\",\n];\n\nconst seoOrderArray = [\n \"traffic\",\n \"searchVisibility\",\n \"topThreeKeywords\",\n \"topThreeKeywordsPercentage\",\n \"topTenKeywords\",\n \"topTenKeywordsPercentage\",\n \"topTwentyKeywords\",\n \"topTwentyKeywordsPercentage\",\n \"averagePosition\",\n \"bounceRate\",\n \"conversions\",\n \"cvr\",\n \"revenue\",\n \"aov\",\n];\nexport default (service, array) => {\n if (service == \"ppc\") {\n array.sort((a, b) => ppcOrderArray.indexOf(a) - ppcOrderArray.indexOf(b));\n return array;\n } else if (service == \"seo\") {\n array.sort((a, b) => seoOrderArray.indexOf(a) - seoOrderArray.indexOf(b));\n return array;\n }\n};\n","export default (id, section) => {\n $.ajax({\n type: \"POST\",\n url: \"/datapulse/dismiss-errors\",\n data: {\n section_id: id,\n section_name: section\n },\n });\n};\n","export default (currency) => {\n let currencyObj = {\n prefix: \"\",\n suffix: \"\",\n symbol: \"\"\n }\n if (currency == \"USD\") {\n currencyObj.prefix = \"$\"\n currencyObj.symbol = \"$\"\n } else if (currency == \"EUR\") {\n currencyObj.prefix = \"€\"\n currencyObj.symbol = \"€\"\n } else if (currency == \"JPY\") {\n currencyObj.prefix = \"JP¥\"\n currencyObj.symbol = \"¥\"\n } else if (currency == \"GBP\") {\n currencyObj.prefix = \"£\"\n currencyObj.symbol = \"£\"\n } else if (currency == \"AUD\") {\n currencyObj.prefix = \"$\"\n currencyObj.symbol = \"$\"\n } else if (currency == \"CAD\") {\n currencyObj.prefix = \"$\"\n currencyObj.symbol = \"$\"\n } else if (currency == \"CHF\") {\n currencyObj.prefix = \"fr.\"\n currencyObj.symbol = \"fr.\"\n } else if (currency == \"CNY\") {\n currencyObj.prefix = \"¥\"\n currencyObj.symbol = \"¥\"\n } else if (currency == \"HKD\") {\n currencyObj.prefix = \"$\"\n currencyObj.symbol = \"$\"\n } else if (currency == \"NZD\") {\n currencyObj.prefix = \"$\"\n currencyObj.symbol = \"$\"\n } else if (currency == \"AED\") {\n currencyObj.prefix = \"د.إ\"\n currencyObj.symbol = \"د.إ\"\n } else if (currency == \"INR\") {\n currencyObj.prefix = \"₹\"\n currencyObj.symbol = \"₹\"\n } else if (currency == \"SGD\") {\n currencyObj.prefix = \"$\"\n currencyObj.symbol = \"$\"\n } else if (currency == \"KRW\") {\n currencyObj.prefix = \"₩\"\n currencyObj.symbol = \"₩\"\n }\n\n return currencyObj;\n}","export default (date, metricKey, seoMetric = false) => {\n const metric = metricKey.toLowerCase();\n let inflated = false;\n if (!seoMetric) {\n if (metric.includes(\"roas\")) {\n inflated = true;\n } else if (metric.includes(\"cpa\")) {\n inflated = true;\n } else if (metric.includes(\"revenue\")) {\n inflated = true;\n } else if (metric.includes(\"conversions\")) {\n inflated = true;\n }\n }\n \n const today = moment();\n let lockDate = moment(date);\n if (inflated) {\n lockDate.endOf(\"month\").add(30, \"days\")\n } else {\n lockDate.endOf(\"month\").add(1, \"days\")\n }\n\n return today >= lockDate;\n};\n","export default (sectionName, metricKey, diff) => {\n let lessIsGood = false;\n const metric = metricKey.toLowerCase();\n if (metric.includes(\"cpc\")) {\n lessIsGood = true;\n } else if (metric.includes(\"cpa\")) {\n lessIsGood = true;\n } else if (metric.includes(\"spend\") && sectionName == \"goalsAndProjections\") {\n lessIsGood = true;\n } else if (metric.includes(\"bounce_rate\")) {\n lessIsGood = true;\n } else if (metric.includes(\"cpv\")) {\n lessIsGood = true;\n }\n \n const negative = lessIsGood ? diff >= 0 : diff < 0;\n\n return negative;\n};\n","export default (p, o) => {\r\n return p.reduce((xs, x) => (xs && (xs[x] || xs[x] == 0)) ? xs[x] : null, o);\r\n}\r\n","import jsDig from \"utils/jsDig.js\";\r\n\r\nexport default (service, section, metric, dashboards, enabledServices) => {\r\n // This could be expanded if we ever need more customized metrics\r\n if (service == \"ppc\") {\r\n const services = [\"search\", \"social\", \"display\", \"video\"].filter((serviceName) => enabledServices[serviceName] == true);\r\n let canBuild = false;\r\n\r\n if (metric.includes(\"shopify\")) {\r\n canBuild = true;\r\n }\r\n\r\n if (section == \"campaignGroups\" || section == \"performanceByChannel\") {\r\n canBuild = true;\r\n }\r\n\r\n if (section == \"goalsAndProjections\" || section == \"allKpisVsPreviousYear\") {\r\n services.forEach((serviceName) => {\r\n const dbOrd = jsDig([serviceName], dashboards);\r\n const subGroupSections = dbOrd.filter((s) => (s[\"enabled\"] == true) && s[\"name\"] == \"goalsAndProjections\" || s[\"name\"] == \"allKpisVsPreviousYear\");\r\n subGroupSections.forEach((subGroupSection) => {\r\n if (jsDig([\"metrics_data\", metric], subGroupSection) == \"1\") {\r\n canBuild = true;\r\n }\r\n })\r\n })\r\n }\r\n\r\n if (section == \"primaryKpiCharts\") {\r\n services.forEach((serviceName) => {\r\n const dbOrd = jsDig([serviceName], dashboards);\r\n const subGroupSections = dbOrd.filter((s) => (s[\"enabled\"] == true) && s[\"name\"] == \"primaryKpiCharts\");\r\n subGroupSections.forEach((subGroupSection) => {\r\n if (jsDig([\"metrics_data\", metric], subGroupSection) == \"1\") {\r\n canBuild = true;\r\n }\r\n })\r\n })\r\n }\r\n\r\n if (section == \"primaryKpiTables\") {\r\n services.forEach((serviceName) => {\r\n const dbOrd = jsDig([serviceName], dashboards);\r\n const subGroupSections = dbOrd.filter((s) => (s[\"enabled\"] == true) && s[\"name\"] == \"primaryKpiTables\");\r\n subGroupSections.forEach((subGroupSection) => {\r\n if (jsDig([\"metrics_data\", metric], subGroupSection) == \"1\") {\r\n canBuild = true;\r\n }\r\n })\r\n })\r\n }\r\n\r\n if (section == \"spendAllocation\") {\r\n services.forEach((serviceName) => {\r\n const dbOrd = jsDig([serviceName], dashboards);\r\n const subGroupSections = dbOrd.filter((s) => (s[\"enabled\"] == true) && s[\"name\"] == \"spendAllocation\");\r\n subGroupSections.forEach((subGroupSection) => {\r\n if (jsDig([\"metrics_data\", metric], subGroupSection) == \"1\") {\r\n canBuild = true;\r\n }\r\n })\r\n })\r\n }\r\n\r\n return canBuild;\r\n } else {\r\n return true;\r\n }\r\n}\r\n","export default (conditions, name) => {\r\n const containsOr = conditions[\"contains\"][\"or\"]\r\n const containsAnd = conditions[\"contains\"][\"and\"]\r\n const notContainsOr = conditions[\"notContains\"][\"or\"]\r\n const notContainsAnd = conditions[\"notContains\"][\"and\"]\r\n let passes = true;\r\n if (name && name != \"\") {\r\n if (containsOr && containsOr.length > 0) {\r\n const nameContains = containsOr.map((keyword) => name.toLowerCase().includes(keyword.toLowerCase()))\r\n if (!nameContains.includes(true)) {\r\n passes = false\r\n }\r\n }\r\n if (containsAnd && containsAnd.length > 0) {\r\n const nameContains = containsAnd.map((keyword) => name.toLowerCase().includes(keyword.toLowerCase()))\r\n if (nameContains.includes(false)) {\r\n passes = false\r\n }\r\n }\r\n if (notContainsOr && notContainsOr.length > 0) {\r\n const nameNotContains = notContainsOr.map((keyword) => name.toLowerCase().includes(keyword.toLowerCase()))\r\n if (!nameNotContains.includes(false)) {\r\n passes = false\r\n }\r\n }\r\n if (notContainsAnd && notContainsAnd.length > 0) {\r\n const nameNotContains = notContainsAnd.map((keyword) => name.toLowerCase().includes(keyword.toLowerCase()))\r\n if (nameNotContains.includes(true)) {\r\n passes = false\r\n }\r\n }\r\n } else {\r\n passes = false;\r\n }\r\n\r\n return passes\r\n};\r\n","export default (key, value, page) => {\r\n let searchParams = new URL(location.href).searchParams;\r\n if (key === undefined && page === \"services\") {\r\n key = \"sub_page\";\r\n if (searchParams.toString().includes(\"seo\")) {\r\n value = \"ppc\";\r\n } else {\r\n value = \"seo\";\r\n }\r\n }\r\n searchParams.set(key, value);\r\n searchParams = \"?\" + searchParams.toString();\r\n var newurl = `${window.location.origin}${window.location.pathname}${searchParams}`;\r\n window.history.pushState({ path: newurl }, \"\", newurl);\r\n};\r\n","import React, { useCallback, useMemo, useState } from \"react\";\nimport isHotkey from \"is-hotkey\";\nimport { Editable, withReact, useSlate, Slate } from \"slate-react\";\nimport { Editor, Transforms, createEditor } from \"slate\";\nimport { withHistory } from \"slate-history\";\n\nimport { Button, Icon, Toolbar } from \"./components\";\n\nconst HOTKEYS = {\n \"mod+b\": \"bold\",\n \"mod+i\": \"italic\",\n \"mod+u\": \"underline\",\n \"mod+`\": \"code\"\n};\n\nconst LIST_TYPES = [\"numbered-list\", \"bulleted-list\"];\n\nconst RichTextEditor = (props) => {\n const [value, setValue] = useState(initialValue);\n const renderElement = useCallback(props => unselectUser(e)} className=\"d-inline-block cont mr-2 mb-1\">\n {avatar}\n
\n \n \n
\n \n \n \n {props.modalHeader} \n \n \n \n
\n \n
\n \n \n \n
\n \n \n searchUsers(e)} placeholder=\"Enter a name or email address...\" />\n
\n \n - \n {visibleUsers.map((userEmail) => {\n let user = props.users[userEmail];\n let avatar =
- toggleUser(e)} data-email={userEmail} className={toggled}>\n \n\n\n\n\n {avatar}\n\n {user.name}\n {userEmail}\n\n \n\n \n
\n
\n \n To be selected:\n
\n {toggledUsersList}\n\n \n \n
\n \n {\n setValue(value)\n props.setEmailBody(value)\n const isAstChange = editor.operations.some(\n op => 'set_selection' !== op.type\n )\n if (isAstChange) {\n // Save the value to Local Storage.\n const content = JSON.stringify(value)\n }\n }}>\n \n } />\n } />\n } />\n } />\n } />\n } />\n } />\n } />\n } />\n \n {\n for (const hotkey in HOTKEYS) {\n if (isHotkey(hotkey, event)) {\n event.preventDefault();\n const mark = HOTKEYS[hotkey];\n toggleMark(editor, mark);\n }\n }\n }}\n />\n \n
\n \n );\n};\n\nconst toggleBlock = (editor, format) => {\n const isActive = isBlockActive(editor, format);\n const isList = LIST_TYPES.includes(format);\n\n Transforms.unwrapNodes(editor, {\n match: n => LIST_TYPES.includes(n.type),\n split: true\n });\n\n Transforms.setNodes(editor, {\n type: isActive ? \"paragraph\" : isList ? \"list-item\" : format\n });\n\n if (!isActive && isList) {\n const block = { type: format, children: [] };\n Transforms.wrapNodes(editor, block);\n }\n};\n\nconst toggleMark = (editor, format) => {\n const isActive = isMarkActive(editor, format);\n\n if (isActive) {\n Editor.removeMark(editor, format);\n } else {\n Editor.addMark(editor, format, true);\n }\n};\n\nconst isBlockActive = (editor, format) => {\n const [match] = Editor.nodes(editor, {\n match: n => n.type === format\n });\n\n return !!match;\n};\n\nconst isMarkActive = (editor, format) => {\n const marks = Editor.marks(editor);\n return marks ? marks[format] === true : false;\n};\n\nconst Element = ({ attributes, children, element }) => {\n switch (element.type) {\n case \"block-quote\":\n return {children};\n case \"bulleted-list\":\n return
- {children}
{children}
;\n case \"heading-two\":\n return{children}
;\n case \"list-item\":\n return- {children}
{children}
;\n }\n};\n\nconst Leaf = ({ attributes, children, leaf }) => {\n if (leaf.bold) {\n children = {children};\n }\n\n if (leaf.code) {\n children ={children};\n }\n\n if (leaf.italic) {\n children = {children};\n }\n\n if (leaf.underline) {\n children = {children};\n }\n\n return {children};\n};\n\nconst BlockButton = ({ format, icon }) => {\n const editor = useSlate();\n return (\n ${string}`\n }\n return string\n }\n \n const children = node.children.map(n => serialize(n)).join('')\n \n switch (node.type) {\n case 'heading-one':\n return `${children}
`\n case 'heading-two':\n return `${children}
`\n case 'numbered-list':\n return `- ${children}
- ${children}
`\n case 'paragraph':\n return `${children}
${children}
`\n case 'link':\n return `${children}`\n default:\n return children\n }\n }\n\n return(\n <>\n \n \n )\n}","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { css, cx } from '@emotion/css';\n\nexport const Button = React.forwardRef(\n ({ className, active, reversed, ...props }, ref) => (\n