import React, { memo, useEffect, useState, useContext } from "react"; import { makeStyles } from "@mui/styles"; import { toast } from "react-toastify"; import { getTheme } from "../theme.jsx"; import { Context } from "../context/ContextApi.jsx"; import countries from "./Countries.jsx"; import { FormControl, InputLabel, Paper, OutlinedInput, Checkbox, Card, Tooltip, FormControlLabel, Chip, Link, Typography, Switch, Select, MenuItem, Divider, ListItemText, TextField, Button, Tabs, Tab, Grid, Autocomplete, Skeleton, Box, } from "@mui/material"; const useStyles = makeStyles({ notchedOutline: { borderColor: "#f85a3e !important", }, }); const PartnerDetails = (props) => { const { userdata, selectedOrganization, setSelectedOrganization, globalUrl, isCloud, adminTab, isEditOrgTab, partnerData, loadingPartnerData, setPartnerData, } = props; const classes = useStyles(); const defaultBranch = "main"; const ITEM_HEIGHT = 48; const ITEM_PADDING_TOP = 8; const MenuProps = { PaperProps: { style: { maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, width: 400, borderRadius: 10, overflowY: "scroll", }, }, getContentAnchorEl: () => null, }; const expertiseOptions = [ "Cybersecurity", "Cloud Security", "Managed Detection and Response (MDR)", "Incident Response", "Penetration Testing", "Compliance and Governance", "Network Security", "Endpoint Security", "Identity and Access Management (IAM)", "SIEM", ]; const servicesOptions = [ "Cybersecurity Consulting", "Managed Security", "Incident Response", "Penetration Testing", "Cloud Security", "Managed Detection", "Endpoint Security", "Network Security", "Identity Management", "Compliance", "Security Training", "Security Management", "Threat Intelligence", "Web Security", "Database Security", "Disaster Recovery", "IT Security Audit", "Cybersecurity Training", "Security Automation", "AI Security", "IoT Security", "Cloud Security Broker", "Security Service", "Managed Security Provider", "Cybersecurity Service", ] const solutionsOptions = [ "EDR", "MDR", "XDR", "Case Management", "SIEM", "Vulnerability Management", "IPS", "IDS", "Threat Intelligence", "IAM", "Data Security", "Incident Response", "Cloud Security", "Network Security", ] const { themeMode } = useContext(Context); const theme = getTheme(themeMode); const [isDisabled, setIsDisabled] = useState(isCloud ? userdata?.active_org?.is_partner ? false : true : true); const handleExpertiseChange = (event) => { const { value } = event.target; setPartnerData({ ...partnerData, expertise: value, }); }; useEffect(() => { setIsDisabled(isCloud ? userdata?.active_org?.is_partner ? false : true : true); if(userdata?.support) { setIsDisabled(false); } }, [userdata, isCloud]); const handleServicesChange = (event) => { const { value } = event.target; setPartnerData({ ...partnerData, services: Array.isArray(value) ? value : [], }); }; const handleSolutionsChange = (event) => { const { value } = event.target; setPartnerData({ ...partnerData, solutions: Array.isArray(value) ? value : [], }); }; const setSelectedRegion = (region) => { // send a POST request to /api/v1/orgs/{org_id}/region with the region as the body const regionMap = { US: "us-west2", EU: "europe-west2", CA: "northamerica-northeast1", UK: "europe-west2", "EU-2": "europe-west3", AUS: "australia-southeast1", }; region = regionMap[region] || region; var data = { dst_region: region, }; toast.info( "Changing region to " + region + "...This may take a few minutes." ); fetch(`${globalUrl}/api/v1/orgs/${selectedOrganization.id}/change/region`, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, credentials: "include", body: JSON.stringify(data), timeOut: 1000, }).then((response) => { if (response.status !== 200) { response .json() .then((reason) => { toast.error("Failed to change region: " + reason.reason); }) .catch((err) => { toast.error("Failed to change region"); }); } else { toast("Region changed successfully! Reloading in 5 seconds.."); // Reload the page in 2 seconds setTimeout(() => { window.location.reload(); }, 5000); } // return responseJson }); }; if (loadingPartnerData) { return (
Name
{/*
Expertise
Services
*/}
Solutions
Region
Country
Description
Website URL
Article URL
); } return (
Name {}} onChange={(e) => { if (e.target.value.length > 100) { toast("Choose a shorter name."); return; } setPartnerData({ ...partnerData, name: e.target.value, }); }} color="primary" InputProps={{ style: { color: theme.palette.textFieldStyle.color, height: "35px", fontSize: "1em", borderRadius: 4, backgroundColor: theme.palette.textFieldStyle.backgroundColor, }, classes: { notchedOutline: isEditOrgTab ? null : classes.notchedOutline, }, }} />
{/*
Expertise
Services
*/}
Solutions
Region
Country country.label === partnerData?.country)} style={{ minWidth: 210, marginTop: 5, maxWidth: 210, height: 35, borderRadius: 4, color: theme.palette.textFieldStyle.color, cursor: isDisabled ? "not-allowed" : "pointer", }} disabled={isDisabled} options={countries} autoHighlight onClear={() => { setPartnerData({ ...partnerData, country: "", }); }} getOptionLabel={(option) => option?.label || ""} onChange={(event, newValue) => { setPartnerData({ ...partnerData, country: newValue?.label, }); }} renderOption={(props, option) => ( img": { mr: 2, flexShrink: 0 } }} {...props} > {option.label} )} renderInput={(params) => ( country.label === partnerData.country)?.code.toLowerCase()}.png`} alt="" style={{ marginRight: 8 }} /> ) : null, style: { color: theme.palette.textFieldStyle.color, height: "35px", fontSize: "1em", borderRadius: 4, backgroundColor: theme.palette.textFieldStyle.backgroundColor, }, classes: { notchedOutline: isEditOrgTab ? null : classes.notchedOutline, }, }} /> )} />
Description
{ setPartnerData({ ...partnerData, description: e.target.value, }); }} onChange={(e) => { setPartnerData({ ...partnerData, description: e.target.value, }); }} InputProps={{ classes: { notchedOutline: isEditOrgTab ? null : classes.notchedOutline, }, style: { color: theme.palette.textFieldStyle.color, height: 89, borderRadius: 4, }, }} />
Website URL {}} onChange={(e) => { if (e.target.value.length > 100) { toast("Choose a shorter website URL."); return; } setPartnerData({ ...partnerData, website_url: e.target.value, }); }} color="primary" InputProps={{ style: { color: theme.palette.textFieldStyle.color, height: "35px", fontSize: "1em", borderRadius: 4, backgroundColor: theme.palette.textFieldStyle.backgroundColor, }, classes: { notchedOutline: isEditOrgTab ? null : classes.notchedOutline, }, }} />
Article URL {}} onChange={(e) => { if (e.target.value.length > 100) { toast("Choose a shorter article URL."); return; } setPartnerData({ ...partnerData, article_url: e.target.value, }); }} color="primary" InputProps={{ style: { color: theme.palette.textFieldStyle.color, height: "35px", fontSize: "1em", borderRadius: 4, backgroundColor: theme.palette.textFieldStyle.backgroundColor, }, classes: { notchedOutline: isEditOrgTab ? null : classes.notchedOutline, }, }} />
); }; export default PartnerDetails; const RegionChangeModal = memo( ({ isDisabled, selectedOrganization, setSelectedRegion, userdata, partnerData, setPartnerData, }) => { // Show from options: "us-west2", "europe-west2", "europe-west3", "northamerica-northeast1" // var regions = ["us-west2", "europe-west2", "europe-west3", "northamerica-northeast1"] const regionMapping = { "Africa": "af", "Asia Pacific (APAC)": "", "Europe": "eu", "Latin America": "la", "Middle East": "me", "North America": "na", "Global": "" }; //let regiontag = "UK"; let regiontag = partnerData?.region || "UK"; let regionCode = "gb"; const regionsplit = selectedOrganization?.region_url?.split("."); if (regionsplit?.length > 2 && !regionsplit[0]?.includes("shuffler")) { const namesplit = regionsplit[0]?.split("/"); regiontag = namesplit[namesplit.length - 1]; if (regiontag === "california") { regiontag = "US"; regionCode = "us"; } else if (regiontag === "frankfurt") { regiontag = "EU-2"; regionCode = "eu"; } else if (regiontag === "ca") { regiontag = "CA"; regionCode = "ca"; } else if (regiontag === "austrailia") { regiontag = "AUS"; regionCode = "au"; } } return ( {/* Region */} ); } );