\n \n Errors Found ({errors.length})\n \n\n \n {/* : \n }\n size=\"small\"\n onClick={toggleSortOrder}\n >\n {sortOrder === \"asc\" ? \"Oldest First\" : \"Newest First\"}\n */}\n\n }\n variant=\"outlined\"\n size=\"small\"\n color=\"primary\"\n onClick={downloadErrorsCSV}\n style={{ marginLeft: 8 }}\n >\n Export Errors\n \n \n \n\n \n {sortedErrors.map((error, index) => (\n \n toggleErrorExpansion(index)}>\n \n \n \n Row {error.row}: {error.name}\n \n \n {error.email}\n \n \n\n \n \n {expandedError === index ? (\n \n ) : (\n \n )}\n \n \n \n\n \n \n \n {error.errors.map((err, errIndex) => (\n \n \n \n ))}\n
\n \n \n \n ))}\n
\n \n )}\n\n \n \n {stats.success > 0 ? \"Done\" : \"Close\"}\n \n \n \n );\n};\n\nexport default UploadResultsSummary;\n","import React, { useState } from \"react\";\nimport {\n withStyles,\n Button,\n Grid,\n Typography,\n Box,\n CircularProgress,\n IconButton,\n LinearProgress,\n Paper,\n} from \"@material-ui/core\";\nimport { CloudUpload, GetApp } from \"@material-ui/icons\";\nimport axios from \"axios\";\nimport Papa from \"papaparse\";\nimport { APIURL } from \"../../config/config\";\nimport CSVTemplateDownloader from \"./CSVTemplateDownloader\";\nimport UploadResultsSummary from \"./UploadResultSummary\";\n\nconst CSVUpload = (props) => {\n const {\n classes,\n toggleCreateAffiliateAgents,\n showSnackbar,\n fetchChildAffiliateCount,\n loadClient,\n partner,\n } = props;\n const [file, setFile] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n const [uploadStats, setUploadStats] = useState({\n total: 0,\n success: 0,\n failed: 0,\n });\n const [errors, setErrors] = useState([]);\n const [showResults, setShowResults] = useState(false);\n const [progress, setProgress] = useState(0);\n const [progressMessage, setProgressMessage] = useState(\"\");\n\n const handleFileChange = (e) => {\n const selectedFile = e.target.files[0];\n if (selectedFile && selectedFile.type === \"text/csv\") {\n setFile(selectedFile);\n setErrors([]);\n setShowResults(false);\n } else {\n showSnackbar(\"error\", \"Please upload a valid CSV file\");\n }\n };\n\n const validateRow = (row) => {\n const errors = [];\n\n if (!row[\"Name\"] || row[\"Name\"].trim() === \"\") {\n errors.push(\"Name is required\");\n }\n\n if (!row[\"Mobile No\"] || !/^\\d{10,}$/.test(row[\"Mobile No\"])) {\n errors.push(\"Valid Mobile No is required (at least 10 digits)\");\n }\n\n if (\n !row[\"Email ID\"] ||\n !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(row[\"Email ID\"])\n ) {\n errors.push(\"Valid Email ID is required\");\n }\n\n return errors;\n };\n\n const createAffiliateLink = async (affiliateId) => {\n try {\n await axios.post(APIURL + `/affiliates/create-new-affiliate-link`, {\n linkTitle: \"link1\",\n domain: \"app.aisensy.com\",\n affiliateId,\n });\n return true;\n } catch (error) {\n console.error(\"Error creating affiliate link:\", error);\n return false;\n }\n };\n\n const processCSV = async () => {\n if (!file) {\n showSnackbar(\"error\", \"Please select a CSV file first\");\n return;\n }\n\n setIsLoading(true);\n setShowResults(false);\n setErrors([]);\n setProgress(0);\n setProgressMessage(\"Preparing to process CSV...\");\n\n // Parse the CSV file\n Papa.parse(file, {\n header: true,\n skipEmptyLines: true,\n complete: async (results) => {\n const { data } = results;\n if (!data || data.length === 0) {\n setIsLoading(false);\n showSnackbar(\"error\", \"The CSV file is empty or has invalid format\");\n return;\n }\n\n // Check if required headers exist\n const requiredHeaders = [\"Name\", \"Mobile No\", \"Email ID\"];\n const headers = Object.keys(data[0]);\n const missingHeaders = requiredHeaders.filter(\n (header) => !headers.includes(header)\n );\n\n if (missingHeaders.length > 0) {\n setIsLoading(false);\n showSnackbar(\n \"error\",\n `Missing required headers: ${missingHeaders.join(\", \")}`\n );\n return;\n }\n\n // Process records\n const stats = {\n total: data.length,\n success: 0,\n failed: 0,\n };\n\n const errorList = [];\n\n // Get partner ID\n const superAffiliateId = partner?._id || \"67c29170603e6b0bf4f5849b\";\n\n for (let i = 0; i < data.length; i++) {\n // Update progress\n const percent = Math.floor((i / data.length) * 100);\n setProgress(percent);\n setProgressMessage(\n `Processing ${i + 1} of ${data.length} records (${percent}%)...`\n );\n\n const row = data[i];\n const rowErrors = validateRow(row);\n\n if (rowErrors.length > 0) {\n stats.failed++;\n errorList.push({\n row: i + 2, // +2 for header row and 1-indexing\n name: row[\"Name\"] || \"N/A\",\n email: row[\"Email ID\"] || \"N/A\",\n errors: rowErrors,\n });\n\n // Small delay to allow UI to update\n await new Promise((resolve) => setTimeout(resolve, 10));\n continue;\n }\n\n try {\n const response = await axios.post(\n APIURL + \"/affiliates/create-super-affiliate-agent\",\n {\n userName: row[\"Name\"],\n name: row[\"Name\"],\n team: row[\"Team Name\"] || \"\",\n companyName: \"\",\n contact: row[\"Mobile No\"],\n email: row[\"Email ID\"],\n loginPassword: null,\n isChildAffiliate: true,\n superAffiliateId: superAffiliateId,\n isAdsCommissionEnabled: true,\n }\n );\n\n await createAffiliateLink(response.data.affiliate._id);\n\n stats.success++;\n } catch (error) {\n stats.failed++;\n errorList.push({\n row: i + 2,\n name: row[\"Name\"] || \"N/A\",\n email: row[\"Email ID\"] || \"N/A\",\n errors: [\n error.response?.data?.message || \"Unknown error occurred\",\n ],\n });\n }\n\n // Small delay to allow UI to update\n await new Promise((resolve) => setTimeout(resolve, 10));\n }\n\n // Complete\n setProgress(100);\n setProgressMessage(\"Processing complete!\");\n setUploadStats(stats);\n setErrors(errorList);\n setIsLoading(false);\n setShowResults(true);\n\n // Refresh the list if any successful uploads\n if (stats.success > 0) {\n loadClient();\n fetchChildAffiliateCount();\n showSnackbar(\n \"success\",\n `Successfully created ${stats.success} affiliate agents`\n );\n } else if (stats.total > 0) {\n showSnackbar(\n \"error\",\n \"No records were successfully processed. Please check the errors and try again.\"\n );\n }\n },\n error: (error) => {\n setIsLoading(false);\n showSnackbar(\"error\", \"Error parsing CSV: \" + error.message);\n },\n });\n };\n\n return (\n \n \n \n \n \n \n {file && (\n \n {file.name}\n \n )}\n \n \n\n \n \n \n The CSV should have these headers: \"Name\", \"Mobile No\", \"Email\n ID\", \"Team Name\"\n \n \n \n \n \n \n\n \n \n \n {isLoading ? (\n \n ) : (\n \"Upload and Process\"\n )}\n \n \n\n {isLoading && (\n \n \n {progressMessage}\n \n \n \n )}\n \n\n {showResults && (\n \n {\n if (uploadStats.success > 0) {\n // If we had successful uploads, close the dialog\n toggleCreateAffiliateAgents();\n } else {\n // Otherwise, just hide the results and let the user try again\n setShowResults(false);\n }\n }}\n />\n \n )}\n \n
\n );\n};\n\nconst styles = (theme) => ({\n root: {\n padding: theme.spacing(2),\n },\n input: {\n display: \"none\",\n },\n uploadBox: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n padding: theme.spacing(3),\n border: \"2px dashed #ccc\",\n borderRadius: 8,\n backgroundColor: \"#f9f9f9\",\n },\n uploadButton: {\n marginBottom: theme.spacing(2),\n },\n fileName: {\n marginTop: theme.spacing(1),\n },\n processButton: {\n minWidth: 150,\n },\n progressBar: {\n height: 8,\n borderRadius: 4,\n },\n resultsPaper: {\n padding: theme.spacing(3),\n marginTop: theme.spacing(2),\n },\n errorList: {\n maxHeight: 200,\n overflowY: \"auto\",\n border: \"1px solid #ddd\",\n borderRadius: 4,\n padding: theme.spacing(1),\n },\n errorItem: {\n padding: theme.spacing(1),\n backgroundColor: \"#fff4f4\",\n borderRadius: 4,\n marginBottom: theme.spacing(1),\n },\n errorSubList: {\n margin: 0,\n paddingLeft: theme.spacing(2),\n },\n});\n\nexport default withStyles(styles)(CSVUpload);\n","import axios from \"axios\";\nimport { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport { withRouter } from \"react-router-dom\";\nimport { APIURL, URL, partnerURL } from \"../../config/config\";\nimport { Clear } from \"@material-ui/icons\";\nimport {\n withStyles,\n Button,\n Grid,\n IconButton,\n Tooltip,\n Typography,\n Box,\n Tabs,\n Tab,\n} from \"@material-ui/core\";\nimport { isoToDialCode } from \"../../config/dialCodes\";\nimport CreateAgentForm from \"./CreateAgentForm\";\nimport {\n fetchChildAffiliateCount,\n loadClient,\n} from \"../../pages/SuperAffiliate/AffiliateAgentsStore\";\nimport CSVUpload from \"./CSVUpload\";\n\nclass CreateAffiliateAgent extends Component {\n constructor(props) {\n super(props);\n this.state = {\n activeStep: 0,\n error: null,\n snack: false,\n snackMessage: \"\",\n snackStatus: \"\",\n email: null,\n name: \"\",\n team: \"\",\n contact: \"\",\n company: \"\",\n currency: this.props?.partner?.currency || \"INR\",\n password: null,\n confirmPassword: null,\n buttonDisable: false,\n countryCode: isoToDialCode[this.props.partner?.isoCode] || \"+91\",\n showPassword: false,\n tabValue: 0,\n };\n }\n\n handleTabChange = (event, newValue) => {\n this.setState({ tabValue: newValue });\n };\n\n createAffiliateLink = (affiliateId) => {\n axios\n .post(APIURL + `/affiliates/create-new-affiliate-link`, {\n linkTitle: \"link1\",\n domain: \"app.aisensy.com\",\n affiliateId,\n })\n .then((response) => {})\n .catch((error) => {\n this.setState({ isLoading: false });\n const snackStatus = \"error\";\n const snackMessage = error?.response?.data?.message;\n this.props.businessSnackDialog(snackStatus, snackMessage);\n });\n };\n\n createChildAffiliate = () => {\n this.setState({ isLoading: true });\n const partnerId = this.props.partner._id;\n const { name, team, company, contact, email, password, confirmPassword } =\n this.state;\n axios\n .post(APIURL + \"/affiliates/create-super-affiliate-agent\", {\n userName: name,\n name,\n team,\n companyName: company,\n contact,\n email,\n loginPassword: password,\n isChildAffiliate: true,\n superAffiliateId: partnerId,\n isAdsCommissionEnabled: true,\n })\n .then((response) => {\n const snackStatus = \"success\";\n const snackMessage = \"Successfully created\";\n this.props.toggleCreateAffiliateAgents();\n this.props.loadClient();\n this.props.fetchChildAffiliateCount();\n this.props.showSnackbar(snackStatus, snackMessage);\n const { data } = response;\n const affiliateId = data?.affiliate?._id;\n\n this.createAffiliateLink(affiliateId);\n this.setState({\n countryCode: \"+91\",\n company: \"\",\n password: null,\n confirmPassword: null,\n isLoading: false,\n name: \"\",\n contact: \"\",\n email: \"\",\n team: \"\",\n });\n })\n .catch((error) => {\n this.setState({ isLoading: false });\n const snackStatus = \"error\";\n const snackMessage = error?.response?.data?.message;\n this.props.showSnackbar(snackStatus, snackMessage);\n });\n };\n\n updateState = (keys, value) => {\n const returnObj = {};\n returnObj[keys] = value;\n this.setState(returnObj);\n };\n\n render() {\n const { classes, tags, partner } = this.props;\n const { activeStep, snackStatus, tabValue } = this.state;\n\n return (\n \n \n \n \n \n Add Affiliate Agents\n \n \n \n this.props.toggleCreateAffiliateAgents()}\n >\n \n \n \n \n \n\n \n \n \n \n\n {tabValue === 0 ? (\n \n \n \n {this.getStepContent(activeStep, tags)}\n \n\n \n \n \n \n \n {this.state.isLoading ? \"Creating...\" : \"Create\"}\n \n \n \n \n \n \n \n ) : (\n \n \n \n )}\n
\n );\n }\n\n getStepContent = (step, tags) => {\n const { partner } = this.props;\n const { type } = partner || {};\n\n switch (step) {\n case 0:\n return (\n \n );\n case 1:\n return <>;\n\n default:\n return <>;\n }\n };\n\n nextBtnDisableStatus = () => {\n const error = this.getValidationError();\n return !!error;\n };\n\n getValidationError = () => {\n const validateEmail = (email) => {\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n return emailRegex.test(email);\n };\n\n const validatePhone = (phone) => {\n const phoneRegex = /^\\d{10,}$/;\n return phoneRegex.test(phone);\n };\n\n const { email, name, team, company, contact, password, confirmPassword } =\n this.state;\n\n if (!name || name.trim() === \"\") return \"Name is required\";\n if (name.trim().length < 3) return \"Name should be at least 3 characters\";\n\n // if (!company || company.trim() === \"\") return \"Company name is required\";\n // if (company.trim().length < 2)\n // return \"Company name should be at least 2 characters\";\n\n if (!contact) return \"Phone number is required\";\n if (!validatePhone(contact))\n return \"Phone number should be at least 10 digits\";\n\n if (!email) return \"Email is required\";\n if (!validateEmail(email)) return \"Invalid email format\";\n\n // if (!password) return \"Password is required\";\n // if (password.length < 6) return \"Password should be at least 6 characters\";\n\n // if (!confirmPassword) return \"Confirm password is required\";\n // if (password !== confirmPassword) return \"Passwords do not match\";\n\n return null;\n };\n}\n\nconst styles = (theme) => ({\n root: {\n height: \"100%\",\n overflowY: \"auto\",\n overflowX: \"hidden\", \n width: \"100%\",\n boxSizing: \"border-box\",\n },\n\n formContainer: {\n borderRadius: \"8px\",\n // minHeight: 200,\n justifyContent: \"center\",\n boxSizing: \"border-box\",\n [theme.breakpoints.down(\"sm\")]: {\n paddingLeft: \"10px\",\n paddingRight: \"10px\",\n },\n },\n textFieldRoot: {\n width: \"100%\",\n padding: \"8px 20px 10px\",\n marginTop: \"4px\",\n marginBottom: \"20px\",\n background: \"disabled\",\n border: \"2px solid disabled\",\n \"& input\": {\n padding: \"6px 12px!important\",\n },\n \"& label\": {\n background: \"disabled\",\n // color: \"#b2b3b3 !important\",\n padding: \"0 6px\",\n marginTop: -4,\n },\n },\n\n formContainer1: {\n background: \"white\",\n borderRadius: \"8px\",\n // minHeight: 200,\n boxSizing: \"border-box\",\n paddingLeft: \"10px\",\n paddingRight: \"10px\",\n [theme.breakpoints.down(\"sm\")]: {\n paddingLeft: \"10px\",\n paddingRight: \"10px\",\n },\n marginBottom: \"20px\",\n },\n\n stepContainer: {\n overflow: \"auto\",\n marginBottom: \"1em\",\n display: \"block\",\n },\n\n buttonContainer: {\n // margin: \"0% 8%\",\n width: \"100%\",\n padding: \"1em 0em\",\n overflowX: \"none\",\n },\n\n pageTitleContainer: {\n position: \"sticky\",\n zIndex: 100,\n top: 0,\n height: 60,\n boxSizing: \"border-box\",\n background: \"white\",\n marginBottom: \"20px\",\n },\n option: {\n // backgroundColor: \"white\",\n fontSize: 15,\n [theme.breakpoints.down(\"sm\")]: {\n width: \"95%\",\n },\n \"& > span\": {\n marginRight: 10,\n fontSize: 18,\n },\n myTextfield: {\n \"& MuiOutlinedInput-adornedEnd\": {\n paddingRight: 0,\n },\n },\n },\n myStateClass: {\n \"&::before\": {\n content: '\"some content\"',\n display: \"block\",\n height: 60,\n marginTop: -60,\n },\n \"&::after\": {\n content: '\"some content\"',\n display: \"block\",\n height: 60,\n marginTop: -60,\n },\n },\n tooltipError: {\n backgroundColor: theme.palette.error.main,\n color: theme.palette.error.contrastText,\n fontSize: \"12px\",\n maxWidth: \"300px\",\n },\n csvUploadContainer: {\n padding: theme.spacing(2),\n border: `1px dashed ${theme.palette.grey[400]}`,\n borderRadius: theme.spacing(1),\n marginTop: theme.spacing(2),\n },\n fileInput: {\n display: \"none\",\n },\n uploadButton: {\n margin: theme.spacing(1),\n },\n progressContainer: {\n display: \"flex\",\n alignItems: \"center\",\n marginTop: theme.spacing(2),\n },\n progressText: {\n marginLeft: theme.spacing(2),\n },\n});\n\nconst CreateAffiliateAgentConnect = connect(\n (state) => ({\n user: state.login.user,\n partner: state.partner.partner,\n }),\n {\n loadClient,\n fetchChildAffiliateCount,\n }\n)(CreateAffiliateAgent);\n\nexport default withStyles(styles)(withRouter(CreateAffiliateAgentConnect));\n","/* eslint-disable no-undef */\nimport React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Alert, Autocomplete } from \"@material-ui/lab\";\nimport axios from \"axios\";\nimport { withRouter } from \"react-router-dom\";\nimport {\n withStyles,\n Button,\n Box,\n Typography,\n Grid,\n IconButton,\n TextField,\n Dialog,\n DialogContent,\n DialogActions,\n Snackbar,\n TablePagination,\n CircularProgress,\n Tabs,\n Tab,\n} from \"@material-ui/core\";\nimport { DateRangePicker } from \"react-dates\";\nimport { partnerURL } from \"../../config/config\";\nimport moment from \"moment\";\nimport { Add, Clear } from \"@material-ui/icons\";\nimport \"react-dates/initialize\";\nimport \"react-dates/lib/css/_datepicker.css\";\nimport \"../../react-dates-custom.css\";\nimport ClientsTable from \"./SuperAffiliateAgentsTable\";\nimport {\n loadNext,\n loadClient,\n unfetchclients,\n createnewClient,\n loadSearch,\n fetchChildAffiliateCount,\n} from \"./AffiliateAgentsStore\";\nimport Header from \"../../commons/Header/Header\";\nimport withMediaQuery from \"../../helpers/mediaQueryHelper\";\nimport { isoToDialCode } from \"../../config/dialCodes\";\nimport CreateAffiliateAgents from \"./CreateAffiliateAgents\";\nimport { fetchPartnerDetails } from \"../../store/partnerState\";\nclass SuperAffiliateAgents extends Component {\n constructor(props) {\n super(props);\n this.state = {\n openDialog: false,\n agentDialog: false,\n email: null,\n display_name: \"\",\n company: \"\",\n contact: \"\",\n currency: this.props.partner?.currency || \"INR\",\n password: null,\n timezone: \"Asia/Calcutta GMT+05:30\",\n countryCode: isoToDialCode[this.props.partner?.isoCode] || \"+91\",\n industry: \"\",\n snack: false,\n companySize: \"\",\n showPassword: false,\n showConfirmPassword: false,\n status: null,\n statusMessage: \"\",\n buttonDisable: false,\n filter: \"\",\n searchdone: false,\n applied: {\n createdAt: {\n startDate: null,\n endDate: null,\n focus: null,\n },\n },\n clientFilter: {\n filter: \"All\",\n sort: \"dec\",\n },\n tab: \"All\",\n allCount: 0,\n archivedCount: 0,\n };\n }\n\n businessSnackDialog = (val, mess) => {\n this.setState({\n status: val,\n statusMessage: mess,\n snack: true,\n });\n };\n componentDidMount() {\n // Always fetch partner details on mount\n this.props\n .fetchPartnerDetails()\n .then(() => {\n // Only fetch other data after partner details are loaded\n this.props.fetchChildAffiliateCount();\n this.props.unfetchclients();\n this.props.loadClient(this.state.clientFilter);\n })\n .catch((error) => {\n console.error(\"Failed to fetch partner details:\", error);\n // Handle error - maybe show a snackbar\n this.setState({\n snack: true,\n status: \"error\",\n statusMessage: \"Failed to load data. Please refresh the page.\",\n });\n });\n }\n\n componentDidUpdate(prevProps) {\n if (!prevProps.partner && this.props.partner) {\n // Partner data was loaded, update state that depends on partner\n this.setState({\n currency: this.props.partner.currency || \"INR\",\n countryCode: isoToDialCode[this.props.partner.isoCode] || \"+91\",\n });\n }\n }\n\n handleInput = (e) => {\n this.setState({ [e.target.name]: e.target.value });\n };\n\n clearDate = (filterKey) => {\n const applied = { ...this.state.applied };\n applied[filterKey].startDate = null;\n applied[filterKey].endDate = null;\n this.setState({ applied });\n };\n checkDateInput = (filterKey) => {\n const applied = { ...this.state.applied };\n const s = applied[filterKey];\n if (s.startDate && s.endDate) {\n return;\n } else {\n this.clearDate(filterKey);\n }\n };\n\n setFocus = (filterKey, focusedInput) => {\n const applied = { ...this.state.applied };\n applied[filterKey].focusedInput = focusedInput;\n this.setState({ applied });\n };\n setDate = (filterKey, startDate, endDate) => {\n const applied = { ...this.state.applied };\n applied[filterKey].startDate = startDate;\n applied[filterKey].endDate = endDate;\n this.setState({ applied });\n };\n\n applyFilter = () => {\n const { applied, clientFilter } = this.state;\n const filterObj = { ...clientFilter };\n if (applied.createdAt.startDate && applied.createdAt.endDate) {\n filterObj.fromDate = applied.createdAt.startDate._d;\n filterObj.toDate = applied.createdAt.endDate._d;\n } else {\n delete filterObj.fromDate;\n delete filterObj.toDate;\n }\n this.setState(\n {\n clientFilter: filterObj,\n openDialog: false,\n },\n () => {\n this.onTabChange();\n }\n );\n };\n onTabChange = () => {\n this.props.loadClient(this.state.clientFilter);\n };\n\n showSnackbar = (status, message) => {\n this.setState({\n status: status,\n statusMessage: message,\n snack: true,\n });\n };\n\n handlesearch = (e) => {\n this.setState({ filter: e.target.value });\n };\n onSnackbarClose = (event) => {\n this.setState({ snack: false });\n };\n\n handleClickShowConfirmPassword = () => {\n this.setState({ showConfirmPassword: !this.state.showConfirmPassword });\n };\n\n handleClickShowPassword = () => {\n this.setState({ showPassword: !this.state.showPassword });\n };\n\n toggleDialog = () => {\n this.setState({ openDialog: !this.state.openDialog });\n };\n toggleCreateAffiliateAgents = () => {\n this.setState({ agentDialog: !this.state.agentDialog });\n };\n buttondisbale = () => {\n this.setState({ buttonDisable: !this.state.buttonDisable });\n };\n\n handleEnter = (e) => {\n if (e.key === \"Enter\") {\n if (this.state.filter === \"\") {\n this.props.unfetchclients();\n this.props.loadClient(this.state.clientFilter);\n this.setState({\n searchdone: false,\n });\n }\n this.props.loadSearch(this.state.filter);\n if (this.state.filter !== \"\") {\n this.setState({\n searchdone: true,\n });\n }\n }\n };\n\n handleClear = () => {\n this.props.unfetchclients();\n this.setState({\n filter: \"\",\n });\n this.setState({\n searchdone: false,\n });\n this.props.loadClient(this.state.clientFilter);\n };\n\n render() {\n const {\n classes,\n business,\n skip,\n totalBusinesses,\n loadNext,\n loadClient,\n isLoading,\n page,\n unfetchclients,\n rowsPerPage,\n createnewClient,\n fetchChildAffiliateCount,\n user,\n loadSearch,\n } = this.props;\n\n const { clientFilter, applied, tab } = this.state;\n const { partnerPlanFamily, partnerWccFamily, mediaQuery, partner } =\n this.props;\n\n const passwordRegex = /^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$/;\n const isPasswordValid = passwordRegex.test(this.state.password);\n const clients = this.props.business.slice(\n page * rowsPerPage,\n page * rowsPerPage + rowsPerPage\n );\n const SIZE = [\n \"1 - 10 Employees\",\n \"10 - 20 Employees\",\n \"20 - 50 Employees\",\n \"50 - 200 Employees\",\n \"200 + Employees\",\n ];\n\n const SORT = [\"dec\", \"asc\"];\n const VERTICALS = [\n \"Ecommerce\",\n \"Education\",\n \"Automotive\",\n \"IT Services\",\n \"Real Estate\",\n \"SAAS/Apps\",\n \"Gaming\",\n \"Entertainment\",\n \"Finance and Banking\",\n \"Medical and Health\",\n \"Hotel and Lodging\",\n \"Beauty, Spa and Salon\",\n \"Clothing and Apparel\",\n \"Event Planning and Service\",\n \"Food and Grocery\",\n \"Professional Services\",\n \"Public Service\",\n \"Non-profit\",\n \"Shopping and Retail\",\n \"Travel and Transportation\",\n \"Restaurant\",\n \"Other\",\n ];\n\n const tabs = [\n {\n display: \"All\",\n state: \"allCount\",\n theme: \"#f4f4f4\",\n },\n // {\n // display: \"Archived\",\n // state: \"archivedCount\",\n // theme: \"#f2c14e3d\",\n // },\n ];\n\n const getflag = (langcode) => {\n var first = langcode.charCodeAt(0) + 127397;\n var second = langcode.charCodeAt(1) + 127397;\n var flag = `&#${first};&#${second};`;\n const x = document.createElement(\"p\");\n x.innerHTML = flag;\n return x.innerText;\n };\n\n return (\n \n {/* Page name & description container */}\n
\n \n \n }\n buttonTitle={\"Create New Agent\"}\n onButtonClick={this.toggleCreateAffiliateAgents}\n showSearch={true}\n searchPlaceholder={\"Search business name\"}\n handleSearch={this.handlesearch}\n handleEnter={this.handleEnter}\n handleClear={this.handleClear}\n searchDone={this.state.searchdone}\n filter={this.state.filter}\n toggleFilterDialog={this.toggleDialog}\n filterColor={\n !!applied.createdAt.endDate && !!applied.createdAt.startDate\n }\n section={\"All Businesses\"}\n />\n\n \n {\n if (this.state.tab === newValue) return;\n // const tab = tabs.find((i) => i.display === newValue);\n this.setState(\n {\n tab: newValue,\n // templates: tab.list,\n // totalCount: tab.list.length,\n clientFilter: {\n ...this.state.clientFilter,\n filter: newValue,\n },\n },\n this.onTabChange\n );\n }}\n indicatorColor=\"primary\"\n textColor=\"primary\"\n variant=\"scrollable\"\n scrollButtons=\"auto\"\n aria-label=\"scrollable auto tabs example\"\n TabIndicatorProps={{\n className: classes.tabIndicator,\n }}\n >\n {tabs.map((i) => (\n \n \n \n \n {this.props[i.state]}\n \n \n \n
\n {`${i.display}`}\n \n \n }\n value={i.display}\n style={{\n textTransform: \"none\",\n alignItems: \"end\",\n minWidth: 190,\n marginLeft: 35,\n paddingBottom: 8,\n background: `linear-gradient(180deg, white, ${\n this.state.tab === i.display ? i.theme : \"white\"\n })`,\n }}\n />\n ))}\n \n \n \n \n \n
\n {/* Layout */}\n
\n \n {/* First section */}\n {/* Scrollable (x & y) table container */}\n\n \n \n
\n \n {\" \"}\n {/* Table footer fixed at bottom */}\n
\n
{\n this.props.loadNext(event, newPage, this.state.clientFilter);\n }}\n rowsPerPage={this.props.rowsPerPage}\n rowsPerPageOptions={[25]}\n />\n {\" \"}\n {/* Create Affiliate Agents Dialog */}\n
\n {/* Filter Dialog */}\n
\n \n \n \n Filter\n \n \n \n \n \n \n \n\n \n Sort\n \n {\n const filterObj = {\n ...this.state.clientFilter,\n sort: value === \"Descending\" ? \"dec\" : \"asc\",\n };\n this.setState({ clientFilter: filterObj });\n }}\n name=\"sort\"\n options={[\"Descending\", \"Ascending\"]}\n renderInput={(params) => (\n \n )}\n />\n \n \n \n \n this.clearDate(\"createdAt\")}\n style={{ marginRight: 8 }}\n >\n Clear Filter\n \n \n Apply\n \n \n \n \n \n \n {this.state.statusMessage}\n \n \n \n \n \n Meta Ads\n \n {getNavItems().map((item, index) => {\n const isActive = location.pathname === item.path;\n return (\n history.push(item.path)}\n >\n \n \n \n {item.icon}\n \n \n \n \n {item.name}\n \n \n \n \n );\n })}\n \n
\n );\n}\n\nconst styles = (theme) => ({\n root: {\n width: \"220px\",\n height: \"100vh\",\n background: \"rgb(255, 255, 255)\",\n borderRight: \"1px solid rgb(240,240,240)\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"space-between\",\n color: \"gray\",\n [theme.breakpoints.down(\"md\")]: {\n width: \"220px\",\n },\n [theme.breakpoints.down(\"sm\")]: {\n display: \"none\",\n },\n },\n logo: {\n height: 50,\n marginTop: 15,\n },\n link_inactive: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"35px\",\n width: \"35px\",\n margin: \"auto\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n transition: \"0.5s\",\n },\n link_active: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"35px\",\n width: \"35px\",\n margin: \"auto\",\n borderRadius: \"50%\",\n backgroundColor: \"white\",\n color: \"white\",\n cursor: \"pointer\",\n transition: \"0.5s\",\n },\n icon_active: {\n color: theme.palette.primary.main,\n },\n icon_inactive: {\n color: \"rgb(20,20,20)\",\n },\n name_active: {\n color: theme.palette.primary.main,\n },\n name_inactive: {\n color: \"rgb(20,20,20)\",\n },\n linkButton: {\n margin: \"3px 0em\",\n width: \"100%\",\n borderRadius: \"5px\",\n padding: \"10px\",\n },\n active: {\n backgroundColor: \"#002d621f\",\n },\n inactive: {\n backgroundColor: \"transparent\",\n },\n});\n\nconst connectedAgentsAdsNavBarDesktop = connect((state) => ({\n agent: state.login.user,\n partner: state.partner.partner,\n}))(AgentsAdsNavBarDesktop);\n\nexport default withStyles(styles)(connectedAgentsAdsNavBarDesktop);\n","import React, { Component } from \"react\";\nimport { withStyles, Grid, Typography, Box } from \"@material-ui/core\";\nimport { connect } from \"react-redux\";\nimport { Redirect, Route, Switch } from \"react-router-dom\";\nimport { fetchPartnerDetails } from \"../../store/partnerState\";\nimport AgentsAdsNavBarDesktop from \"./Navbar/AgnetAdsNavBarDesktop\";\nimport MetaAds from \"../../pages/MetaAds/MetaAds\";\n\nclass AgentsMetaAdsLayout extends Component {\n constructor(props) {\n super(props);\n this.state = {\n agentId: props.match?.params?.id,\n view: props.location?.pathname?.includes(\"/ads/\") ? \"ads\" : \"projects\",\n };\n }\n componentDidMount() {\n this.props.fetchPartnerDetails();\n }\n\n render() {\n const { classes, agent, partner, user } = this.props;\n const { type } = partner || {};\n const { agentId } = this.state;\n const baseroute = `/agents/meta-ads`;\n\n return (\n \n \n \n \n \n \n \n {/* Default route */}\n (\n \n )}\n />\n\n (\n \n )}\n />\n\n (\n \n )}\n />\n \n
\n \n \n );\n }\n}\n\nconst styles = (theme) => ({\n root: {\n width: \"100%\",\n height: \"100vh\",\n overflow: \"hidden\",\n boxSizing: \"border-box\",\n },\n routeWrapper: {\n height: \"100vh\",\n overflow: \"hidden\",\n boxSizing: \"border-box\",\n background: \"white\",\n },\n routeContainer: {\n width: \"100%\",\n height: \"100vh\",\n transition: \"1s\",\n overflow: \"hidden\",\n [theme.breakpoints.down(\"sm\")]: {},\n },\n});\n\nconst connectedAgentsMetaAdsLayout = connect(\n (state) => ({\n user: state.login.user,\n agent: state.login.user,\n partner: state.partner.partner,\n }),\n { fetchPartnerDetails }\n)(AgentsMetaAdsLayout);\n\nexport default withStyles(styles)(connectedAgentsMetaAdsLayout);\n","import React, { Component } from \"react\";\nimport {\n withStyles,\n Grid,\n Box,\n Checkbox,\n Typography,\n Dialog,\n DialogActions,\n DialogContent,\n DialogContentText,\n DialogTitle,\n Button,\n TextField,\n IconButton,\n CircularProgress,\n} from \"@material-ui/core\";\n\nimport clsx from \"clsx\";\n// import AssistantsDetails from \"./AssistantsDetails\";\nimport { withRouter } from \"react-router-dom\";\nimport { connect } from \"react-redux\";\nimport { Skeleton } from \"@material-ui/lab\";\n\nconst leads = [\n {\n name: \"Name\",\n size: 2,\n key: \"agentName\",\n },\n {\n name: \"Project Name\",\n size: 2,\n key: \"assistantName\",\n },\n {\n name: \"Aggregated Ad Recharge\",\n size: 2,\n key: \"aggAdCreditRecharged\",\n },\n {\n name: \"Phone Number\",\n size: 2,\n key: \"agentPhone\",\n },\n {\n name: \"Company Name\",\n size: 2,\n key: \"agentCompanyName\",\n },\n {\n name: \"Industry\",\n size: 2,\n key: \"agentIndustry\",\n },\n {\n name: \"Created At\",\n size: 2,\n key: \"createdAt\",\n },\n];\n\nconst wabaLive = [\n {\n name: \"Name\",\n size: 2,\n key: \"agentName\",\n },\n {\n name: \"Project Name\",\n size: 2,\n key: \"assistantName\",\n },\n {\n name: \"Phone Number\",\n size: 2,\n key: \"agentPhone\",\n },\n {\n name: \"WABA Number\",\n size: 2,\n key: \"whatsappNumber\",\n },\n {\n name: \"Company Name\",\n size: 2,\n key: \"agentCompanyName\",\n },\n {\n name: \"Industry\",\n size: 2,\n key: \"agentIndustry\",\n },\n {\n name: \"Created At\",\n size: 2,\n key: \"createdAt\",\n },\n];\n\nconst conversions = [\n {\n name: \"Project Name\",\n key: \"assistantName\",\n size: 3,\n },\n {\n name: \"Plan Purchased\",\n key: \"planPurchased\",\n size: 3,\n },\n {\n name: \"Currency\",\n key: \"currency\",\n size: 3,\n },\n // {\n // name: \"Amount\",\n // key: \"amountPaid\",\n // size: 2,\n // },\n // {\n // name: \"Commision Earned\",\n // key: \"commision\",\n // size: 2,\n // },\n // {\n // name: \"Commision Percentage\",\n // key: \"commisionPercent\",\n // size: 2,\n // },\n {\n name: \"Purchase Date\",\n key: \"createdAt\",\n size: 3,\n },\n];\n\nclass BusinessesTable extends Component {\n constructor(props) {\n super(props);\n this.state = {\n openDialog: false,\n selectedTemplate: null,\n };\n }\n\n listScrolled = (event) => {\n if (!this.offsetPosition) {\n this.offsetPosition = this.rootEle.current.offsetTop;\n }\n const container = event.currentTarget;\n const currentPos = container.scrollTop;\n this.setState({\n sticky: currentPos > this.offsetPosition,\n });\n };\n toggleDialog = () => {\n this.setState({ openDialog: !this.state.openDialog });\n };\n openTemplate = (e) => {\n const templates = [...this.props.templates];\n const foundIndex = templates.findIndex((x) => x._id == e._id);\n this.props.history.push(\"/assistants/\" + templates[foundIndex]._id);\n // this.setState({ openDialog: true, selectedTemplate: foundIndex });\n };\n render() {\n const { classes, templates, tab } = this.props;\n\n const fields =\n tab === \"Signups\" ? leads : tab === \"WABA Live\" ? wabaLive : conversions;\n\n return (\n <>\n \n \n \n \n \n \n \n {fields.map((e) => (\n \n \n \n {e.name}\n \n \n \n ))}\n \n {templates.map((e) => (\n \n {fields.map((field) => (\n this.openTemplate(e)\n // }\n >\n \n \n ))}\n \n ))}\n \n \n \n \n \n
\n\n \n {/* Assistants Details */}\n {/* */}\n \n \n );\n }\n}\n\nfunction Cell({\n classes,\n item,\n field,\n allBusiness,\n openCampaign,\n partner,\n ...props\n}) {\n switch (field) {\n case \"commision\":\n return (\n \n \n \n {item.currency === \"USD\" ? \"$\" : \"₹\"}\n {(item[field] ? item[field] / 100000 : 0).toFixed(2)}\n \n \n \n );\n break;\n\n case \"amountPaid\":\n return (\n \n \n \n {item.currency === \"USD\" ? \"$\" : \"₹\"}\n {(item[field] ? item[field] / 100000 : 0).toFixed(2)}\n \n \n \n );\n break;\n\n case \"commisionPercent\":\n return (\n \n \n \n {item[field] ? item[field] / 100000 : 0}%\n \n \n \n );\n\n case \"displayNameVerified\":\n return (\n \n \n \n {item[field] ? \"Verified\" : \"Not Verified\"}\n \n \n \n );\n\n case \"assistantName\":\n return (\n \n \n {item[field]}\n \n \n );\n break;\n case \"createdAt\":\n return (\n \n \n \n {getFormattedDate(item[field])}\n \n \n \n );\n\n case \"aggAdCreditRecharged\":\n return (\n \n \n \n {item[field] ? item[field] / 100000 : 0}\n \n \n \n );\n\n case \"Loading\":\n return (\n \n \n {Array.from(Array(20).keys()).map((i) => {\n return (\n \n \n
\n );\n })}\n \n \n );\n break;\n\n case \"agentPhone\":\n return (\n \n \n \n {partner?.isChildAffiliate\n ? maskPhoneNumber(item[field])\n : item[field]}\n \n \n \n );\n\n default:\n return (\n \n \n {item[field]}\n \n \n );\n }\n}\n\nexport function getFormattedDate(date) {\n const d = new Date(date);\n const options = { year: \"numeric\", month: \"long\", day: \"numeric\" };\n return d.toLocaleDateString(\"en-US\", options);\n}\n\nexport const maskPhoneNumber = (phone) => {\n if (phone) return phone?.replace(/.(?=.{4})/g, \"*\");\n};\n\nconst styles = (theme) => ({\n root: {\n width: \"100%\",\n height: \"100%\",\n // background: \"red\",\n // display: \"flex\",\n background: \"rgb(249,249,249)\",\n boxSizing: \"border-box\",\n overflowX: \"hidden\",\n position: \"relative\",\n // marginBottom: \"5em\",\n // paddingBottom: \"80px\"\n },\n tableWrapper: {\n overflowX: \"auto\",\n width: \"100%\",\n },\n\n tableContainer: {\n marginTop: \"1.5em\",\n minWidth: 1800,\n },\n\n tableItem: {\n background: \"white\",\n marginBottom: \"1em\",\n padding: 4,\n flexWrap: \"nowrap\",\n borderRadius: 8,\n // cursor: \"pointer\",\n // \"&:hover\": {\n // background: \"#efefef\",\n // },\n },\n tableItemNoHover: {\n background: \"white\",\n marginBottom: \"1em\",\n padding: 4,\n flexWrap: \"nowrap\",\n borderRadius: 8,\n },\n tableItem1: {\n marginBottom: \"1em\",\n padding: 4,\n flexWrap: \"nowrap\",\n borderRadius: 8,\n },\n\n tableHeader: {\n background: \"white\",\n padding: 4,\n borderRadius: 8,\n marginBottom: \"1em\",\n flexWrap: \"nowrap\",\n },\n row: {\n background: \"white\",\n display: \"flex\",\n },\n alterRow: {\n background: \"rgb(246,246,246)\",\n },\n dataRow: {\n cursor: \"pointer\",\n transition: \"0.3s\",\n \"&:hover\": {\n background: \"rgb(70 20 134 / 15%)\",\n },\n },\n topbar: {\n background: \"rgb(252,252,252)\",\n position: \"sticky\",\n top: \"0\",\n zIndex: \"100\",\n },\n column: {\n // width: \"4400px\",\n fontWeight: \"normal\",\n height: \"50px\",\n display: \"flex\",\n alignItems: \"center\",\n textAlign: \"center\",\n paddingRight: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(2),\n boxSizing: \"border-box\",\n },\n});\n\n// export default withStyles(styles)(withRouter(BusinessesTable));\n\nconst connectAssistantsTable = connect((state) => ({\n allBusiness: state.business.allBusiness,\n isLoading: state.assistants.isLoading,\n partner: state.partner.partner,\n}))(BusinessesTable);\n\nexport default withStyles(styles)(withRouter(connectAssistantsTable));\n","import React, { Component } from \"react\";\nimport { DateRangePicker } from \"react-dates\";\nimport { connect } from \"react-redux\";\nimport moment from \"moment\";\nimport { withRouter } from \"react-router-dom\";\nimport {\n withStyles,\n Button,\n Box,\n Typography,\n Grid,\n IconButton,\n TextField,\n Tabs,\n Tab,\n DialogContent,\n Dialog,\n DialogActions,\n FormControl,\n Select,\n MenuItem,\n InputLabel,\n Snackbar,\n CircularProgress,\n Popper,\n InputAdornment,\n Tooltip,\n} from \"@material-ui/core\";\nimport {\n NavigateNext,\n NavigateBefore,\n Clear,\n FilterList,\n Add,\n Visibility,\n VisibilityOff,\n InfoOutlined,\n CheckCircleOutlined,\n GetApp,\n} from \"@material-ui/icons\";\nimport \"react-dates/initialize\";\nimport \"react-dates/lib/css/_datepicker.css\";\nimport \"../../react-dates-custom.css\";\n\nimport BusinessesTable, { fields, getFormattedDate } from \"./BusinessesTable\";\nimport { TablePagination } from \"@material-ui/core\";\n// import { assistants } from \"../../config/assistants\";\nimport { URL, partnerURL } from \"../../config/config\";\nimport axios from \"axios\";\nimport {\n fetchAssistants,\n loadNextAssistants,\n loadPrevAssistants,\n changeRowsPerPage,\n fetchAssistantsCounts,\n} from \"../../store/assistantState\";\nimport { fetchBusiness } from \"../../store/businessState\";\nimport { Alert, Autocomplete, Skeleton } from \"@material-ui/lab\";\nimport { timeZones } from \"../../config/timezone\";\nimport dialCodes, {\n countryMap,\n isoMap,\n isoToDialCode,\n} from \"../../config/dialCodes\";\nimport Header from \"../../commons/Header/Header\";\nimport CreateProjectDialog from \"../../commons/Dialog/CreateProjectDialog\";\nimport plansHelper from \"../../helpers/plansHelper\";\nimport withMediaQuery from \"../../helpers/mediaQueryHelper\";\n\nclass AllBusinesses extends Component {\n constructor(props) {\n super(props);\n this.state = {\n alertType: \"\",\n alertMsg: \"\",\n rowsPerPage: 15,\n totalCount: null,\n skip: 0,\n timeStamp: new Date(),\n search: \"\",\n searchDone: false,\n templates: [],\n backupTemplates: [],\n backupSearchTemplates: [],\n err: null,\n isLoading: false,\n page: 0,\n applied: {\n createdAt: {\n startDate: null,\n endDate: null,\n focus: null,\n },\n planActivatedOn: {\n startDate: null,\n endDate: null,\n focus: null,\n },\n },\n tab: \"Signups\",\n openDialog: false,\n assistantFilter: {\n filter: \"Signups\",\n sort: \"dec\",\n },\n allCount: 0,\n wabaCount: 0,\n countryCode: isoToDialCode[this.props.partner?.isoCode] || \"+91\",\n liveCount: 0,\n draftCount: 0,\n trialPlanCount: 0,\n monthlyPlanCount: 0,\n yearlyPlanCount: 0,\n deletedCount: 0,\n stoppedCount: 0,\n openProjectDialog: false,\n selectBusiness: \"\",\n newProjectName: \"\",\n projectSubmitLoader: false,\n clientDialog: false,\n company: \"\",\n companySize: \"\",\n industry: \"\",\n display_name: \"\",\n contact: \"\",\n buttonDisable: false,\n timezone: \"Asia/Calcutta GMT+05:30\",\n currency: this.props.partner?.currency || \"INR\",\n };\n }\n componentDidMount() {\n const { partner } = this.props;\n const { isSuperAffiliate } = partner || {};\n this.props.fetchAssistantsCounts(isSuperAffiliate);\n this.props.fetchAssistants(this.state.assistantFilter, isSuperAffiliate);\n }\n\n toggleDialog = (event, reason) => {\n reason !== \"backdropClick\" &&\n this.setState({ openDialog: !this.state.openDialog });\n };\n\n handleChangePage = (event, newPage) => {\n const { page } = this.props;\n const { partner } = this.props;\n const { isSuperAffiliate } = partner || {};\n const step = newPage - page;\n if (step === -1) {\n this.props.loadPrevAssistants();\n } else if (step === 1) {\n this.props.loadNextAssistants(\n this.state.assistantFilter,\n isSuperAffiliate\n );\n }\n };\n\n handleChangeRowsPerPage = (event) => {\n const rowsPerPage = parseInt(event.target.value, 10);\n this.props.changeRowsPerPage(rowsPerPage);\n this.onTabChange();\n };\n\n setTemplate = (template) => {\n const templates = [...this.state.templates];\n const foundIndex = templates.findIndex((x) => x._id == template._id);\n // console.log({foundIndex})\n // if(foundIndex > -1) {\n templates[foundIndex] = template;\n this.setState({ templates });\n // } else {\n // }\n // templates.forEach\n };\n\n handleBusinessInput = (e) => {\n this.setState({ [e.target.name]: e.target.value });\n };\n\n handleInput = (e) => {\n this.setState({ [e.target.name]: e.target.value });\n };\n\n handleEnter = (e) => {\n // const { backupSearchTemplates, search } = this.state;\n if (e.key === \"Enter\") {\n const { assistantFilter } = this.state;\n const newObj = { ...assistantFilter };\n if (e.target.value) {\n newObj.assistantName = e.target.value;\n } else {\n delete newObj.assistantName;\n }\n this.setState(\n { assistantFilter: newObj, searchDone: true },\n this.onTabChange\n );\n }\n };\n handleSearch = (e) => {\n const { assistantFilter } = this.state;\n const newObj = { ...assistantFilter, assistantName: e.target.value };\n this.setState({\n assistantFilter: newObj,\n search: e.target.value,\n });\n };\n handleClear = () => {\n const { assistantFilter } = this.state;\n delete assistantFilter.assistantName;\n this.setState(\n {\n search: \"\",\n searchDone: false,\n assistantFilter,\n },\n this.onTabChange\n );\n };\n\n // methods for date filter\n clearDate = (filterKey) => {\n const applied = { ...this.state.applied };\n applied[filterKey].startDate = null;\n applied[filterKey].endDate = null;\n this.setState({ applied });\n };\n checkDateInput = (filterKey) => {\n const applied = { ...this.state.applied };\n const s = applied[filterKey];\n if (s.startDate && s.endDate) {\n return;\n } else {\n this.clearDate(filterKey);\n }\n };\n setFocus = (filterKey, focusedInput) => {\n const applied = { ...this.state.applied };\n applied[filterKey].focusedInput = focusedInput;\n this.setState({ applied });\n };\n setDate = (filterKey, startDate, endDate) => {\n const applied = { ...this.state.applied };\n applied[filterKey].startDate = startDate;\n applied[filterKey].endDate = endDate;\n this.setState({ applied });\n };\n applyFilter = () => {\n const { applied, assistantFilter } = this.state;\n const filterObj = { ...assistantFilter };\n if (applied.createdAt.startDate && applied.createdAt.endDate) {\n filterObj.fromDate = applied.createdAt.startDate._d;\n filterObj.toDate = applied.createdAt.endDate._d;\n } else {\n delete filterObj.fromDate;\n delete filterObj.toDate;\n }\n\n if (applied.planActivatedOn.startDate && applied.planActivatedOn.endDate) {\n filterObj.fromPlanActivatedDate = applied.planActivatedOn.startDate._d;\n filterObj.toPlanActivatedDate = applied.planActivatedOn.endDate._d;\n } else {\n delete filterObj.fromPlanActivatedDate;\n delete filterObj.toPlanActivatedDate;\n }\n this.setState(\n {\n assistantFilter: filterObj,\n openDialog: false,\n },\n () => {\n this.onTabChange();\n }\n );\n };\n\n onTabChange = () => {\n const { partner } = this.props;\n const { isSuperAffiliate } = partner || {};\n this.props.fetchAssistants(this.state.assistantFilter, isSuperAffiliate);\n };\n\n projectDialog = (event) => {\n this.setState({ openProjectDialog: !this.state.openProjectDialog });\n };\n\n toggleclientDialog = () => {\n this.setState({ clientDialog: !this.state.clientDialog });\n };\n\n buttondisbale = () => {\n this.setState({ buttonDisable: !this.state.buttonDisable });\n };\n\n createclient = async () => {\n try {\n const partnerId = this.props.user.id;\n const {\n email,\n display_name,\n company,\n contact,\n currency,\n timezone,\n password,\n } = this.state;\n const queryObj = {\n email,\n password,\n display_name,\n company,\n contact,\n timezone,\n currency,\n };\n\n let response = await axios.post(\n partnerURL + `/partner/${partnerId}/business/`,\n queryObj\n );\n // this.props.createnewClient(response.data)\n // this.props.fetchBusiness();\n this.setState({\n clientDialog: !this.state.clientDialog,\n openProjectDialog: true,\n });\n this.setState({\n status: \"success\",\n statusMessage: \"Business Created Succesfully\",\n });\n this.setState({\n email: null,\n display_name: null,\n company: null,\n contact: null,\n currency: this.props.partner?.currency || \"INR\",\n timezone: \"Asia/Calcutta GMT+05:30\",\n countryCode: isoToDialCode[this.props.partner?.isoCode] || \"+91\",\n industry: null,\n companySize: null,\n password: null,\n });\n } catch (error) {\n this.setState({\n buttonDisable: false,\n });\n const errorResponse = error.response;\n console.error(error);\n const errorMessage = errorResponse?.data?.message;\n this.setState({\n status: \"error\",\n statusMessage: errorMessage,\n });\n }\n };\n\n onSnackbarClose = () => {\n this.setState({\n alertType: \"\",\n alertMsg: \"\",\n });\n };\n\n selectBusiness = (e, value, reason) => {\n if (reason === \"select-option\") {\n const assistantValue = Object.keys(this.props.allBusiness).find(\n (key) => this.props.allBusiness[key].name === value.split(\" - \")[1]\n );\n this.setState({ selectBusiness: assistantValue });\n }\n };\n\n render() {\n const {\n classes,\n partner,\n partnerPlanFamily,\n partnerWccFamily,\n mediaQuery,\n partnerId,\n user,\n } = this.props;\n const { backupTemplates, tab, assistantFilter, applied } = this.state;\n const { assistants, page, rowsPerPage, totalAssistants } = this.props;\n\n const affiliateTabs = [\n {\n display: \"Businesses\",\n state: \"draftCount\",\n theme: \"#00b4bf59\",\n },\n // {\n // display: \"WABA Live\",\n // state: \"wabaCount\",\n // theme: \"#f2c14e3d\",\n // list: backupTemplates,\n // },\n // {\n // display: \"Conversions\",\n // state: \"liveCount\",\n // theme: \"#08cf6533\",\n // list: backupTemplates.filter((i) => !!i.isWhatsappVerified),\n // },\n ];\n\n const tabs = affiliateTabs;\n\n const passwordRegex = /^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$/;\n const isPasswordValid = passwordRegex.test(this.state.password);\n\n return (\n \n {/* Page name & description container */}\n
\n \n \n }\n // buttonTitle={user.isReferral ? \"\" : \"Create New Project\"}\n onButtonClick={this.projectDialog}\n showSearch={true}\n searchPlaceholder={\"Search business name\"}\n handleSearch={this.handleSearch}\n handleEnter={this.handleEnter}\n searchDone={this.state.searchDone}\n handleClear={this.handleClear}\n filter={this.state.search}\n toggleFilterDialog={this.toggleDialog}\n filterColor={\n (!!applied.createdAt.startDate &&\n !!applied.createdAt.endDate) ||\n (!!applied.planActivatedOn.endDate &&\n !!applied.planActivatedOn.startDate)\n }\n />\n \n {}}\n indicatorColor=\"primary\"\n textColor=\"#000\"\n variant=\"scrollable\"\n scrollButtons=\"auto\"\n aria-label=\"scrollable auto tabs example\"\n TabIndicatorProps={{\n className: classes.tabIndicator,\n }}\n >\n {tabs.map((i) => (\n \n \n \n \n {totalAssistants}\n \n \n \n \n {`${i.display}`}\n \n \n }\n value={i.display}\n style={{\n textTransform: \"none\",\n alignItems: \"end\",\n minWidth: 190,\n // marginLeft: 16,\n paddingBottom: 8,\n // background: `linear-gradient(180deg, white, ${\"#00b4bf59\"})`,\n }}\n />\n ))}\n \n \n \n \n \n \n {/* Layout */}\n \n \n {/* First section */}\n {/* Scrollable (x & y) table container */}\n \n \n
\n \n \n {/* Table footer fixed at bottom */}\n \n {/* Filter dialog */}\n \n \n \n \n Filter\n \n \n \n \n \n \n \n \n \n \n \n \n \n Apply\n \n \n \n \n\n {/* project dialog */}\n {this.state.openProjectDialog && (\n \n this.setState({ newProjectName: e.target.value })\n }\n createBusiness={() =>\n this.setState({\n openProjectDialog: false,\n clientDialog: true,\n })\n }\n onSubmit={this.projectSubmit}\n disableSubmit={this.state.projectSubmitLoader}\n planFamilies={partnerPlanFamily}\n defaultPlanFamily={partner?.defaultPlanFamily}\n defaultPlanName={partner?.defaultPlanName}\n wccPlans={partnerWccFamily}\n defaultWccPlan={partner?.defaultWccPlan}\n type={partner?.type}\n partner={partner}\n />\n )}\n\n \n \n {this.state.alertMsg}\n \n \n \n {props.children}\n
\n );\n}\n\nfunction DateFilter({\n filterKey,\n applied,\n setFocus,\n setDate,\n checkDateInput,\n clearDate,\n ...props\n}) {\n const { classes, filterName } = props;\n const A = applied[filterKey];\n return (\n \n \n {A.startDate && A.endDate ? (\n \n clearDate(filterKey)}\n >\n \n \n \n ) : (\n \"\"\n )}\n \n \n {filterName}\n \n \n \n checkDateInput(filterKey)}\n startDateId=\"startDate\"\n endDateId=\"endDate\"\n startDate={A.startDate}\n endDate={A.endDate}\n onDatesChange={({ startDate, endDate }) =>\n setDate(filterKey, startDate, endDate)\n }\n focusedInput={A.focusedInput}\n onFocusChange={(focusedInput) => setFocus(filterKey, focusedInput)}\n navPosition=\"navPositionTop\"\n numberOfMonths={1}\n navPrev={\n \n \n \n }\n navNext={\n \n \n \n }\n hideKeyboardShortcutsPanel\n customArrowIcon={null}\n screenReaderInputMessage={\" \"}\n small\n readOnly\n isOutsideRange={(day) => moment().diff(day) < 0}\n />\n \n \n \n );\n\n // function setToday()\n}\n\nconst styles = (theme) => ({\n root: {\n width: \"100%\",\n height: \"100%\",\n // background: \"red\",\n // display: \"flex\",\n background: \"rgb(249,249,249)\",\n boxSizing: \"border-box\",\n overflowX: \"hidden\",\n position: \"relative\",\n // paddingBottom: \"80px\"\n },\n pageTitleContainer: {\n position: \"sticky\",\n zIndex: 100,\n top: 0,\n height: 60,\n boxSizing: \"border-box\",\n [theme.breakpoints.down(\"md\")]: {\n // paddingTop: \"40px\",\n },\n [theme.breakpoints.down(\"sm\")]: {\n // paddingTop: \"20px\",\n },\n },\n fullWidth: {\n width: \"100%\",\n background: \"white\",\n },\n container: {\n background: \"white\",\n borderRadius: \"8px\",\n },\n fixedBottomContainer: {\n position: \"fixed\",\n height: \"60px\",\n borderTop: \"1px solid lightgrey\",\n background: \"white\",\n bottom: \"0\",\n left: \"71px\",\n right: \"0\",\n overflow: \"hidden\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n [theme.breakpoints.down(\"sm\")]: {\n left: \"0px\",\n height: \"50px\",\n },\n },\n tableContainer: {\n top: \"60px\",\n height: \"calc(100vh - 260px)\",\n width: \"100%\",\n overflow: \"hidden\",\n // background: \"red\",\n boxSizing: \"border-box\",\n position: \"sticky\",\n [theme.breakpoints.down(\"xs\")]: {\n // position top + bottombar height + bottom padding + navbar\n marginTop: 48,\n height: \"calc(100vh - 70px - 50px - 10px - 50px)\",\n paddingLeft: theme.spacing(1),\n paddingRight: theme.spacing(1),\n boxSizing: \"border-box\",\n },\n },\n textField: {\n width: \"100%\",\n height: 42,\n },\n sortFormControl: {\n width: 120,\n marginRight: 8,\n height: 32,\n borderRadius: \"4px\",\n border: \"1px solid lightgrey\",\n },\n textFieldPopper: {\n [theme.breakpoints.down(\"md\")]: {\n left: \"12px !important\",\n minWidth: \"calc(100% - 35px)\",\n },\n [theme.breakpoints.up(\"md\")]: {\n left: \"calc(12.5vw - 16px) !important\",\n minWidth: \"calc(25vw + 54px)\",\n },\n },\n tabContainer: {\n background: \"white\",\n boxShadow: \"0 0 12px rgb(171 170 170)\",\n // padding: \"24px\",\n },\n tabIndicator: {\n borderRadius: \"3px 3px 0px 0px\",\n height: 3,\n },\n textFieldRootAutocomplete: {\n width: \"100%\",\n marginTop: \"4px\",\n marginBottom: \"20px\",\n height: 32,\n background: \"white\",\n border: \"2px solid grey\",\n \"& input\": {\n padding: \"0px 12px!important\",\n },\n \"& label\": {\n background: \"white\",\n color: \"#b2b3b3 !important\",\n padding: \"0 6px\",\n marginTop: -4,\n },\n },\n dialogContainer: {\n // zIndex: \"3400 !important\",\n \"& .MuiPaper-root\": {\n [theme.breakpoints.down(\"md\")]: {\n width: \"100%\",\n // height: \"100%\",\n // maxHeight: \"100%\",\n margin: \"0\",\n borderRadius: \"0px\",\n },\n [theme.breakpoints.up(\"md\")]: {\n width: \"100%\",\n // height: \"unset\",\n // maxHeight: \"unset\",\n // minHeight: \"600px\",\n margin: \"unset\",\n borderRadius: \"6px\",\n },\n },\n },\n projectdialogContainer: {\n // zIndex: \"3400 !important\",\n \"& .MuiPaper-root\": {\n [theme.breakpoints.down(\"md\")]: {\n width: \"100%\",\n // height: \"100%\",\n // maxHeight: \"100%\",\n margin: \"0\",\n borderRadius: \"0px\",\n },\n [theme.breakpoints.up(\"md\")]: {\n width: \"100%\",\n // height: \"unset\",\n // maxHeight: \"unset\",\n // minHeight: \"100px\",\n margin: \"unset\",\n borderRadius: \"6px\",\n },\n },\n },\n\n inputRoot: {\n '&[class*=\"MuiOutlinedInput-root\"].MuiAutocomplete-input': {\n padding: 12,\n },\n '&&[class*=\"MuiOutlinedInput-root\"]': {\n padding: 0,\n },\n },\n popper: {\n width: \"fit-content\",\n zIndex: 10000,\n height: \"10px\",\n },\n snackbar: {\n // marginTop:\"20px\",\n // [theme.breakpoints.down(\"sm\")]: {\n // marginTop:\"40px\",\n // },\n },\n textFieldRootAutocomplete: {\n width: \"100%\",\n padding: \"2px 8px\",\n marginTop: \"4px\",\n marginBottom: \"20px\",\n background: \"white\",\n border: \"2px solid grey\",\n \"& label\": {\n background: \"white\",\n color: \"#b2b3b3 !important\",\n padding: \"0 6px\",\n marginTop: -4,\n },\n },\n phoneTextFieldRoot: {\n width: \"100%\",\n padding: \"8px 20px\",\n marginTop: \"4px\",\n marginBottom: \"20px\",\n \"& input\": { width: \"calc(100% - 80px)\", marginLeft: \"80px\" },\n background: \"white\",\n border: \"2px solid grey\",\n },\n codeTextFieldRoot: {\n width: \"90px\",\n padding: \"0 0 0 14px\",\n position: \"absolute\",\n zIndex: 1,\n margin: \"10px 0 0 2px\",\n background: \"white\",\n \"& input\": {\n padding: \"10px 0 !important\",\n },\n \"& button\": {\n width: \"12px\",\n position: \"relative\",\n left: \"7px\",\n background: \"white\",\n borderRadius: 0,\n \"&:hover\": {\n background: \"white\",\n },\n },\n \"& div\": {\n paddingRight: \"0px !important\",\n },\n },\n textFieldRoot: {\n width: \"100%\",\n padding: \"8px 20px 10px\",\n marginTop: \"4px\",\n marginBottom: \"20px\",\n background: \"white\",\n border: \"2px solid grey\",\n \"& input\": {\n padding: \"6px 12px!important\",\n },\n \"& label\": {\n background: \"white\",\n color: \"#b2b3b3 !important\",\n padding: \"0 6px\",\n marginTop: -4,\n },\n },\n});\n\nconst connectAssistants = connect(\n (state) => ({\n user: state.login.user,\n assistants: state.assistants.assistants,\n page: state.assistants.page,\n isAssistantsLoading: state.assistants.isLoading,\n assistantError: state.assistants.error,\n rowsPerPage: state.assistants.rowsPerPage,\n totalAssistants: state.assistants.total,\n allCount: state.assistants.allCount,\n liveCount: state.assistants.liveCount,\n wabaCount: state.assistants.wabaCount,\n draftCount: state.assistants.draftCount,\n trialPlanCount: state.assistants.trialPlanCount,\n monthlyPlanCount: state.assistants.monthlyPlanCount,\n yearlyPlanCount: state.assistants.yearlyPlanCount,\n deletedCount: state.assistants.deletedCount,\n stoppedCount: state.assistants.stoppedCount,\n allBusiness: state.business.allBusiness,\n partnerId: state.partner.partner._id,\n partner: state.partner.partner,\n partnerSecretHash: state.partner.partner.passwordHash,\n partnerPlanFamily: state.planFamilies.allPlanFamilies,\n partnerWccFamily: state.wccPlans.allWccPlans,\n }),\n {\n fetchAssistants,\n loadNextAssistants,\n loadPrevAssistants,\n changeRowsPerPage,\n fetchAssistantsCounts,\n fetchBusiness,\n }\n)(AllBusinesses);\n\nexport default withStyles(styles)(\n withMediaQuery(\"(max-width:600px)\")(withRouter(connectAssistants))\n);\n","import React from \"react\";\nimport {\n PersonOutlined,\n DashboardOutlined,\n Build,\n TuneOutlined,\n Facebook,\n} from \"@material-ui/icons\";\nimport AgentProfilePage from \"../../../pages/AgentProfile/AgentProfilePage\";\nimport DashboardPage from \"../../../pages/Dashboard/DashboardPage\";\nimport AssistantsRoute from \"../../../pages/Assistants/AssistantsRoute\";\nimport BillingRoute from \"../../../pages/BillingProfile/BillingRoute\";\nimport PlanFamilyPage from \"../../../pages/Manage/PlanFamilyPage\";\nimport DefaultsPage from \"../../../pages/Manage/DefaultsPage\";\nimport DashboardIcon from \"@material-ui/icons/Dashboard\";\nimport ContactlessIcon from \"@material-ui/icons/Contactless\";\nimport BlurOnIcon from \"@material-ui/icons/BlurOn\";\nimport MetaAdsLayout from \"../MetaAdsLayout\";\nimport MetaAds from \"../../../pages/MetaAds/MetaAds\";\nimport BarChartOutlinedIcon from \"@material-ui/icons/BarChartOutlined\";\nimport AccountTreeOutlinedIcon from \"@material-ui/icons/AccountTreeOutlined\";\nimport SuperDashboard from \"../../../pages/SuperAffiliate/SuperDashboard\";\nimport ViewQuiltIcon from \"@material-ui/icons/ViewQuilt\";\nimport BusinessIcon from \"@material-ui/icons/Business\";\nimport SuperAffiliateRoute from \"../../../pages/SuperAffiliate/SuperAffiliateRoute\";\nimport AgentsMetaAdsLayout from \"../agentsMetaAdLayout\";\nimport GroupIcon from '@material-ui/icons/Group';\nimport AssistantsPage from \"../../../pages/Assistants/AssistantsPage\";\nimport AllBusinessesPage from \"../../../pages/SuperAffiliate/AllBusinessesPage\";\n\nconst topRoutes = [\n {\n name: \"Dashboard\",\n to: \"/\",\n component: DashboardPage,\n icon: ,\n exact: true,\n },\n {\n name: \"Customers\",\n to: \"/customers\",\n component: AssistantsRoute,\n icon: ,\n },\n {\n name: \"Meta Ads\",\n to: \"/meta-ads\",\n component: MetaAdsLayout,\n icon: ,\n },\n {\n name: \"Payouts\",\n to: \"/payouts\",\n component: BillingRoute,\n icon: ,\n },\n];\n\nconst renderMetaAdsRoute = [\n {\n name: \"Ads Setup\",\n to: \"/project\",\n component: MetaAds,\n icon: ,\n },\n {\n name: \"Ads Overview\",\n to: \"/ads\",\n component: MetaAds,\n icon: ,\n },\n {\n name: \"Businesses\",\n to: \"/businesses\",\n component: AllBusinessesPage,\n icon: ,\n },\n];\n\nconst renderAgnetsMetaAdsRoute = [\n {\n name: \"Ads Setup\",\n to: \"/projects/:id\",\n component: MetaAds,\n icon: ,\n },\n {\n name: \"Ads Overview\",\n to: \"/ads/:id\",\n component: MetaAds,\n icon: ,\n },\n];\n\nconst renderSuperAffiliateRoute = [\n {\n name: \"Dashboard\",\n to: \"/\",\n component: SuperDashboard,\n icon: ,\n exact: true,\n },\n {\n name: \"Agents\",\n to: \"/agents\",\n component: SuperAffiliateRoute,\n icon: ,\n exact: true,\n },\n {\n name: \"Meta Ads\",\n to: \"/meta-ads\",\n component: MetaAdsLayout,\n icon: ,\n },\n {\n name: \"Agent Meta Ads\",\n to: \"/agents/meta-ads/projects/:id\",\n component: AgentsMetaAdsLayout,\n icon: ,\n exact: true,\n hidden: true,\n },\n {\n name: \"Agent Meta Ads\",\n to: \"/agents/meta-ads/ads/:id\",\n component: AgentsMetaAdsLayout,\n icon: ,\n exact: true,\n hidden: true,\n },\n];\n\nconst renderManageRoute = [\n {\n name: \"Configure Plan\",\n to: \"/config\",\n component: PlanFamilyPage,\n icon: ,\n },\n {\n name: \"Defaults\",\n to: \"/defaults\",\n component: DefaultsPage,\n icon: ,\n },\n];\n\nconst bottomRoutes = [\n {\n name: \"Profile\",\n to: \"/agentProfile\",\n component: AgentProfilePage,\n icon: ,\n },\n];\n\nexport {\n topRoutes,\n bottomRoutes,\n renderManageRoute,\n renderMetaAdsRoute,\n renderSuperAffiliateRoute,\n renderAgnetsMetaAdsRoute,\n};\n","import React from \"react\";\nimport { useHistory, useLocation, useParams, Link } from \"react-router-dom\";\nimport { Box, Typography, withStyles } from \"@material-ui/core\";\nimport { connect } from \"react-redux\";\nimport LOGO from \"../../../static/logo.jpg\";\nimport {\n topRoutes,\n bottomRoutes,\n renderSuperAffiliateRoute,\n} from \"../Routes/ProjectRoutes\";\n\nfunction NavBarDesktop(props) {\n const location = useLocation();\n const history = useHistory();\n const params = useParams();\n const { classes, partner } = props;\n const { isAdsCommissionEnabled, isSuperAffiliate, isChildAffiliate } =\n partner || {};\n\n const filteredRoutes = topRoutes.filter((route) => {\n if (route.to === \"/meta-ads\") {\n return isAdsCommissionEnabled;\n }\n\n if (route.to === \"/payouts\" && isChildAffiliate) {\n return false;\n }\n return true;\n });\n\n const routes = isSuperAffiliate\n ? renderSuperAffiliateRoute.filter((route) => !route.hidden)\n : filteredRoutes;\n\n return (\n \n
\n \n 
\n \n\n {routes.map((route, index) => {\n let className = \"inactive\";\n if (location.pathname.split(\"/\")[1] === route.to.split(\"/\")[1]) {\n className = \"active\";\n }\n\n return (\n {\n history.push(route.to);\n }}\n >\n \n \n {route.icon}\n \n \n
\n {route.name}\n \n \n \n \n \n {}\n \n \n \n \n Manage\n \n \n \n
\n \n \n \n {[...renderFilteredManageRoutes].map((route, index) => {\n let className = \"inactive\";\n if (location.pathname.includes(route.to)) {\n className = \"active\";\n }\n return (\n !route.excludedTypes?.includes(type) && (\n openMangeRoute(route)}\n >\n \n \n \n {route.icon}\n \n \n \n \n {route.name}\n \n \n \n \n )\n );\n })}\n \n \n \n } */}\n \n \n {bottomRoutes.map((route, index) => {\n return (\n openRoute(route)}>\n {route.icon}\n \n );\n })}\n \n \n );\n};\n\nconst styles = (theme) => ({\n container: {\n width: \"100%\",\n height: \"100%\",\n overflowY: \"auto\",\n boxSizing: \"border-box\",\n overflowX: \"hidden\",\n // minWidth: \"300px\",\n // flexGrow: 1,\n },\n drawerPaper: {\n width: \"calc(100vw - 70px)\",\n height: \"100%\",\n position: \"relative\",\n overflow: \"hidden\",\n },\n logo: {\n height: \"50px\",\n marginRight: \"10px\",\n },\n link_inactive: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"35px\",\n width: \"35px\",\n margin: \"auto\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n transition: \"0.5s\",\n },\n link_active: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"35px\",\n width: \"35px\",\n margin: \"auto\",\n borderRadius: \"50%\",\n backgroundColor: \"white\",\n color: \"white\",\n cursor: \"pointer\",\n transition: \"0.5s\",\n },\n // profile_active: {\n\n // },\n // profile_inactive: {\n\n // }\n icon_active: {\n color: theme.palette.primary.main,\n },\n icon_inactive: {\n color: \"rgb(20,20,20)\",\n },\n name_active: {\n color: theme.palette.primary.main,\n },\n name_inactive: {\n color: \"rgb(20,20,20)\",\n },\n linkButton: {\n margin: \"3px 0em\",\n width: \"100%\",\n borderRadius: \"5px\",\n padding: \"10px\",\n },\n active: {\n backgroundColor: \"rgb(70 20 134 / 15%)\",\n },\n inactive: {\n backgroundColor: \"transparent\",\n },\n fullWidth: {\n width: \"100%\",\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n profileWrapper: {\n position: \"absolute\",\n left: 0,\n bottom: 0,\n width: \"100%\",\n backgroundColor: \"white\",\n paddingTop: theme.spacing(2) * 1.5,\n paddingBottom: theme.spacing(2) * 1.5,\n },\n profileIcon: {\n backgroundColor: theme.palette.primary.main,\n borderRadius: \"50%\",\n color: \"white\",\n width: \"40px\",\n height: \"40px\",\n margin: \"0px 10px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n});\n\nconst connectedNavDrawerMobile = connect((state) => ({\n agent: state.login.user,\n partner: state.partner.partner,\n}))(NavDrawerMobile);\n\nexport default withStyles(styles)(connectedNavDrawerMobile);\n","import React, { Component } from \"react\";\nimport { withRouter } from \"react-router-dom\";\nimport {\n withStyles,\n IconButton,\n Typography,\n Box,\n Hidden,\n} from \"@material-ui/core\";\nimport { connect } from \"react-redux\";\nimport { FilterList, Search, Menu } from \"@material-ui/icons\";\nimport clsx from \"clsx\";\n\nimport NavDrawerMobile from \"./NavDrawerMobile\";\n\nclass NavBarMobile extends Component {\n state = {\n drawerOpen: false,\n };\n\n onDrawerClose = (event) => {\n if (\n event.type === \"keydown\" &&\n (event.key === \"Tab\" || event.key === \"Shift\")\n ) {\n return;\n }\n this.setState({ drawerOpen: false });\n };\n\n onDrawerOpen = () => {\n this.setState({ drawerOpen: true });\n };\n render() {\n const { drawerOpen } = this.state;\n const { classes, location, agent } = this.props;\n const livePage = false;\n\n return (\n \n \n \n \n \n \n \n AiSensy\n \n \n \n \n \n );\n }\n}\n\nconst styles = (theme) => ({\n root: {\n // position: \"sticky\",\n // top: \"0\",\n width: \"100%\",\n height: \"50px\",\n overflow: \"hidden\",\n transition: \"0.3s\",\n zIndex: 1000,\n },\n sticky: {\n position: \"sticky\",\n top: 0,\n },\n icon: {\n fontSize: \"1em\",\n // color: \"white\"\n },\n hideNavBar: {\n height: 0,\n },\n});\n\nconst connectedNavBarMobile = connect((state) => ({\n agent: state.login.user,\n}))(NavBarMobile);\n\nexport default withStyles(styles)(withRouter(connectedNavBarMobile));\n","import { Typography, useMediaQuery, useTheme } from \"@material-ui/core\";\nimport { Clock } from \"lucide-react\";\nexport default function WarningBanner({ text, backgroundColor }) {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down(\"sm\"));\n\n return (\n \n \n \n {text}\n \n \n );\n}\n","import React from \"react\";\nimport NavBarDesktop from \"./NavBarDesktop\";\nimport NavBarMobile from \"./NavBarMobile\";\nimport WarningBanner from \"../../WarningBanner/WarningBanner\";\nimport { connect } from \"react-redux\";\n\nfunction NavBar(props) {\n const ignoredId = props.partnerDetail._id;\n\n return (\n \n {ignoredId !== \"67c29170603e6b0bf4f5849b\" && (\n \n )}\n \n \n \n );\n}\n\nexport default connect((state) => ({\n isPartnerDetailLoading: state.partner.isLoading,\n partnerDetail: state.partner.partner,\n}))(NavBar);\n","import React, { Component } from \"react\";\n\nclass ErrorBoundary extends Component {\n state = { hasError: false };\n\n static getDerivedStateFromError(error) {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n componentDidCatch(error, errorInfo) {\n // You can also log the error to an error reporting service\n console.error(error, errorInfo);\n this.setState({ errorInfo });\n }\n\n render() {\n if (this.state.hasError) {\n // You can render any custom fallback UI\n return (\n \n Something went wrong.
\n \n );\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n","import React, { Component } from \"react\";\nimport {\n withStyles,\n Grid,\n Snackbar,\n CircularProgress,\n} from \"@material-ui/core\";\nimport { Alert } from \"@material-ui/lab\";\nimport { Redirect, Route, Switch } from \"react-router-dom\";\nimport { connect } from \"react-redux\";\nimport NavBar from \"./Navbar/NavBar\";\nimport ErrorBoundary from \"../ErrorBoundary/ErrorBoundary\";\nimport {\n topRoutes,\n bottomRoutes,\n renderSuperAffiliateRoute,\n} from \"./Routes/ProjectRoutes\";\n\nclass ProjectsLayout extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: true,\n };\n }\n\n componentDidMount() {\n if (!this.props.partner?._id) {\n this.props\n .fetchPartnerDetails()\n .then(() => {\n this.setState({ isLoading: false });\n })\n .catch((error) => {\n console.error(\"Failed to fetch partner details:\", error);\n this.setState({ isLoading: false });\n });\n } else {\n this.setState({ isLoading: false });\n }\n }\n\n render() {\n const { classes, partner } = this.props;\n const { isLoading } = this.state;\n const { type, isSuperAffiliate } = partner || {};\n const routes = isSuperAffiliate ? renderSuperAffiliateRoute : topRoutes;\n\n if (isLoading) {\n return (\n \n \n
\n );\n }\n\n return (\n \n
\n
\n \n \n {routes.map((route, index) => {\n if (!route.excludedTypes?.includes(type)) {\n return (\n \n );\n }\n })}\n {bottomRoutes.map((route) => {\n return (\n \n );\n })}\n } />\n \n
\n \n
\n \n \n \n \n Affiliate Dashboard\n \n \n \n \n Sign In\n \n \n {\n if (event.key === \"Enter\")\n loginUser(userName, password);\n }}\n style={{\n marginBottom: \"20px\",\n backgroundColor: \"#F1F1F1\",\n borderRadius: \"8px\",\n width: \"calc(100% - 16px)\",\n padding: \"8px\",\n }}\n />\n\n {\n loginUser(userName, password);\n }}\n >\n Continue\n \n \n \n \n \n \n \n Don't have an account?{\" \"}\n \n Let's SignUp\n \n \n \n \n\n \n
\n );\n }\n }\n}\n\nfunction Signup() {\n return (\n <>\n \n OR{\" \"}\n \n \n Continue With Google\n \n \n \n \n Sign up for new account\n \n \n \n \n );\n}\n\nconst theme = createTheme({\n palette: {\n gray: {\n main: \"#bdbdbd\",\n darker: \"#616161\",\n },\n black: {\n main: \"#212121\",\n contrastText: \"#424242\",\n },\n },\n});\n\nexport default connect(\n (state) => ({\n isAuthenticated: state.login.isAuthenticated,\n isLoading: state.login.isLoading,\n error: state.login.error,\n errmsg: state.login.errmsg,\n }),\n { loginUser, loginWithToken }\n)(Login);\n","export default __webpack_public_path__ + \"static/media/f0d373c302b5c689e4445a1c3a9691a3.f0d373c3.svg\";","import React, { Component } from \"react\";\nimport {\n withStyles,\n Grid,\n Box,\n Typography,\n Button,\n IconButton,\n Snackbar,\n TextField,\n Checkbox,\n FormControlLabel,\n CircularProgress,\n} from \"@material-ui/core\";\nimport {\n Close,\n Facebook,\n FiberManualRecord,\n FileCopyOutlined,\n FilterNone,\n Send,\n VisibilityOutlined,\n} from \"@material-ui/icons\";\nimport { Alert, Autocomplete } from \"@material-ui/lab\";\n// import CallhippoLogo from \"../../static/callhippo_logo.png\";\nimport LOGO from \"../../static/logo.jpg\";\nimport WhatsAppLogo from \"../../static/f0d373c302b5c689e4445a1c3a9691a3.svg\";\nimport dialCodes from \"../../config/dialCodes\";\nimport axios from \"axios\";\nimport { URL } from \"../../config/config\";\nimport { timeZones } from \"../../config/timezone\";\n\nclass Preview extends Component {\n constructor(props) {\n super(props);\n this.state = {\n alert: false,\n alertMsg: \"\",\n alertSeverity: \"\",\n step: 1,\n hasRead: false,\n countryCode: \"+91\",\n contact: \"\",\n otp: \"\",\n otpSent: false,\n fetchLoading: false,\n partnerLogos: {},\n name: \"\",\n company: \"\",\n contact: \"\",\n email: \"\",\n timezone: \"\",\n };\n }\n\n launchWhatsAppSignup = async () => {\n // const { showSnackbar, assistantId, startConfetti } = this.props;\n const assistantId = \"123\";\n const { company, contact, email, timezone } = this.state;\n this.setState({ fbLoading: true });\n // trackEvent({\n // event: \"went_for_whatsapp_signup\",\n // properties: {},\n // });\n window.launchWhatsAppSignup && window.launchWhatsAppSignup();\n window.FB?.login &&\n window.FB.login(\n (response) => {\n if (response.authResponse) {\n // trackEvent({\n // event: \"whatsapp_access_token_success\",\n // properties: {},\n // });\n const accessToken = response.authResponse.accessToken;\n axios\n .post(URL + \"/api/submit-facebook-access-token\", {\n assistantId,\n accessToken,\n })\n .then((data) => {\n if (data.data?.success) {\n // trackEvent({\n // event: \"whatsapp_verification_success\",\n // properties: {},\n // });\n this.setState({\n alertMsg: \"WABA is Live!\",\n alert: true,\n alertSeverity: \"success\",\n });\n // showSnackbar({\n // alertMsg: \"WABA is Live!\",\n // severity: \"success\",\n // alertOpen: true,\n // });\n // startConfetti(assistantId, \"v3\");\n } else {\n // trackEvent({\n // event: \"whatsapp_verification_pending\",\n // properties: {},\n // });\n this.setState({\n alertMsg: \"WABA in progress! Please Sync after 10 minutes\",\n alert: true,\n alertSeverity: \"info\",\n });\n // showSnackbar({\n // alertMsg: \"WABA in progress! Please Sync after 10 minutes\",\n // severity: \"info\",\n // alertOpen: true,\n // });\n }\n })\n .catch((err) => {\n console.log(err);\n this.setState({\n alertMsg: err?.response?.data || \"Something went wrong!\",\n alert: true,\n alertSeverity: \"error\",\n });\n // showSnackbar({\n // alertMsg: err?.response?.data || \"Something went wrong!\",\n // severity: \"error\",\n // alertOpen: true,\n // });\n })\n .finally(() => {\n this.setState({\n fbLoading: false,\n });\n });\n } else {\n // trackEvent({\n // event: \"whatsapp_access_token_failed\",\n // properties: {},\n // });\n this.setState({\n alert: false,\n alertMsg: \"Connection Failed!\",\n alertSeverity: \"error\",\n });\n // showSnackbar({\n // alertMsg: \"Connection Failed!\",\n // severity: \"error\",\n // alert: true,\n // });\n this.setState({\n fbLoading: false,\n });\n }\n },\n {\n scope:\n \"business_management,whatsapp_business_management,public_profile,email\",\n extras: {\n feature: \"whatsapp_embedded_signup\",\n setup: {\n business: {\n name: company || \"\",\n email: email || \"\",\n phone: {\n code: 91,\n number: contact || \"\",\n },\n website: \"\",\n address: {\n streetAddress1: \"\",\n city: \"\",\n state: \"\",\n zipPostal: \"\",\n country: \"\",\n },\n timezone: `UTC${\n timeZones.find((i) => i.label.includes(timezone))?.value ||\n \"+05:30\"\n }`,\n },\n phone: {\n displayName: company || \"\",\n category: \"\",\n description: \"\",\n },\n },\n },\n }\n );\n };\n\n fetchPartnerLogos = () => {\n this.setState({ fetchLoading: true });\n axios\n .get(URL + `/api/${this.props.match.params.partnerId}/get-partner-logos`)\n .then((response) => {\n this.setState({ fetchLoading: false, partnerLogos: response.data });\n })\n .catch((error) => {\n console.error(error);\n this.setState({ fetchLoading: false });\n });\n };\n\n handleInput = (e) => {\n this.setState({\n [e.target.name]: e.target.value,\n });\n };\n\n closeSnackbar = () => {\n this.setState({ alert: false, alertMsg: \"\", alertSeverity: \"\" });\n };\n\n componentDidMount = () => {\n this.fetchPartnerLogos();\n };\n\n render() {\n const { classes, match } = this.props;\n const { step, hasRead, countryCode, contact, otpSent, otp } = this.state;\n const assistantId = match.params.projectId;\n return (\n \n {/* Page name & description container */}\n {this.state.fetchLoading ? (\n
\n \n \n ) : (\n <>\n
\n \n \n \n \n AiSensy is a verified WhatsApp Solution Provider and has\n been given the right by Facebook/WhatsApp to grant their\n clients access to the WhatsApp Business API.\n \n \n \n \n \n \n {/* Layout */}\n \n \n \n \n \n \n \n {`Step ${step} of 2`}\n \n {step === 1 && (\n <>\n \n \n \n WhatsApp Business API Account Submission\n \n \n Please provide information about the company and phone\n number that you would like to connect to the WhatsApp\n Business API. Please make sure that your company\n follows Facebook's compliance policy.\n \n\n \n \n PERSONAL INFORMATION\n \n \n \n \n \n \n BUSINESS INFORMATION\n \n \n\n \n \n Terms & Conditions\n \n {\n this.setState({\n hasRead: e.target.checked,\n });\n }}\n color=\"primary\"\n />\n }\n label={\n \n I agree to the{\" \"}\n \n AiSensy Terms of Service\n \n \n }\n />\n \n }\n onClick={() => {\n // let hubUrl = window.location.origin + \"/facebook-verify\";\n // console.log(hubUrl);\n // const redirect = window.open(hubUrl, \"_blank\");\n // redirect.focus();\n this.launchWhatsAppSignup();\n // this.setState({\n // step: 2,\n // });\n }}\n style={{\n margin: \"24px 0\",\n fontSize: 18,\n color: \"white\",\n background: hasRead ? \"#1877F2\" : \"lightgrey\",\n fontWeight: 600,\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n Connect to Facebook\n \n \n )}\n {step === 2 && (\n <>\n \n \n \n Configure WhatsApp Number\n \n \n Please provide information about the company and phone\n number that you would like to connect to the WhatsApp\n Business API. Please make sure that your company\n follows Facebook's compliance policy.\n \n\n \n\n \n i.dialCode)}\n onChange={(e, value, reason) => {\n this.setState({\n countryCode: value,\n });\n }}\n value={countryCode}\n renderInput={(params) => (\n \n )}\n />\n\n {\n this.setState({\n contact: e.target.value,\n });\n }}\n className={classes.phoneTextFieldRoot}\n />\n \n \n \n\n {otpSent && (\n <>\n \n {[1, 2, 3, 4].map((i) => (\n \n \n \n ))}\n \n \n\n \n Didn't received code?{\" \"}\n {\n this.setState({\n alertMsg: \"OTP Resent Successfully!\",\n alert: true,\n alertSeverity: \"success\",\n });\n }}\n >\n Regenerate\n \n \n \n )}\n\n \n {\n this.setState({\n otpSent: true,\n step: otpSent ? 3 : 2,\n alertMsg: \"OTP Sent Successfully!\",\n alert: otpSent ? false : true,\n alertSeverity: \"success\",\n });\n }}\n style={{\n margin: \"24px 0\",\n // fontSize: 18,\n // fontWeight: 600,\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n {otpSent ? \"Submit OTP\" : \"Verify Phone Number\"}\n \n \n \n )}\n {step === 3 && (\n <>\n \n \n \n Setup Complete\n \n\n \n\n \n \n \n }\n disabled={!hasRead}\n onClick={() => {\n this.setState({\n alertMsg: \"Message Sent Successfully!\",\n alert: true,\n alertSeverity: \"success\",\n });\n }}\n style={{\n margin: \"24px 0\",\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n Send Test Message\n \n \n \n )}\n \n \n \n\n \n \n Powered⚡ by\n \n \n \n \n \n \n AiSensy\n \n \n \n \n \n )}\n \n \n {this.state.alertMsg}\n \n \n \n \n - Must be 8 characters long\n \n \n - At least 1 lowercase letter\n \n \n - At least 1 number\n \n \n - At least 1 special character\n \n
\n );\n\n switch (step) {\n case 1:\n return (\n \n \n \n \n this.handleChange(event, value, \"name\")\n }\n renderInput={(params) => (\n \n \n \n \n \n ),\n }}\n />\n )}\n />\n \n \n \n this.handleChange(event, value, \"companyName\")\n }\n renderInput={(params) => (\n \n \n \n \n \n ),\n }}\n />\n )}\n />\n \n \n \n \n
i.dialCode)}\n classes={{ popper: classes.textFieldPopper }}\n getOptionLabel={(option) => {\n return `${getflag(isoMap[option])} ${option} ${\n countryMap[option.substring(1)]\n }`;\n }}\n onChange={(e, value, reason) => {\n this.setState({\n countryCode: value,\n });\n }}\n value={countryCode}\n renderInput={(params) => (\n \n )}\n />\n this.handleInputChange(e)}\n value={formValues.contact}\n className={classes.phoneTextFieldRoot}\n InputProps={{\n endAdornment: errors.contact && (\n \n \n \n \n \n ),\n }}\n />\n \n
\n \n \n \n 
\n \n \n AiSensy Affiliate Dashboard\n \n \n Start with 20% commission and Grow More !!!\n \n \n \n \n\n \n Trusted by 50000 + Brands\n \n \n \n\n \n \n \n \n \n \n Already a member ?{\" \"}\n \n Log in\n \n \n
\n \n \n Create Your AiSensy Affiliate Account\n \n \n Fill in the details below to complete your signup.\n \n
\n \n
\n \n {this.renderStep()}
\n \n \n {step > 1 && (\n \n Back\n \n )}\n {step === 2 ? (\n \n Verify OTP\n \n ) : (\n \n {this.state.isLoading ? (\n <>\n Sending OTP \n \n \n ) : (\n \"Next \"\n )}\n \n )}\n \n
\n \n \n \n \n \n \n AiSensy Affiliate Dashboard\n \n \n Start with 20% commission and Grow More !!!\n \n \n \n \n\n \n Trusted by 50000 + Brands\n \n \n \n \n \n \n \n \n \n \n \n Not a member yet?{\" \"}\n \n Sign up\n \n \n \n\n \n \n \n \n {forgotPassword ? (\n \n ) : (\n \n \n this.handleChange(event, value, \"username\")\n }\n renderInput={(params) => (\n \n )}\n />\n \n this.handleChange(event, value, \"password\")\n }\n renderInput={(params) => (\n \n )}\n />\n \n Continue\n \n \n \n Forgot Password?\n \n \n \n )}\n \n \n \n
\n
\n
i.dialCode)}\n classes={{ popper: classes.textFieldPopper }}\n getOptionLabel={(option) => {\n return `${getflag(isoMap[option])} ${option} ${\n countryMap[option.substring(1)]\n }`;\n }}\n onChange={(e, value, reason) => {\n this.setState({\n countryCode: value,\n });\n }}\n value={countryCode}\n renderInput={(params) => (\n \n )}\n />\n this.handleInputChange(e)}\n value={formValues.contact}\n className={classes.phoneTextFieldRoot}\n InputProps={{\n endAdornment: errors.contact && (\n \n \n \n \n \n ),\n }}\n />\n \n
\n \n \n \n \n \n \n AiSensy Affiliate Dashboard\n \n {/* \n Start with 20% commission and Grow More !!!\n */}\n \n \n \n\n \n Trusted by 50000 + Brands\n \n \n \n\n \n \n \n Welcome! Sign in to continue.\n \n {/* \n Fill in the details below to complete your signup.\n */}\n
\n \n
\n \n {this.renderStep()}
\n \n \n {step > 1 && (\n \n Back\n \n )}\n {step === 2 ? (\n \n Verify OTP\n \n ) : (\n \n {this.state.isLoading ? (\n <>\n Sending OTP \n \n \n ) : (\n \"Next \"\n )}\n \n )}\n