Frikky
266 lines
12 KiB
React
266 lines
12 KiB
React
import React, { useEffect, useState, useCallback, useContext } from 'react';
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
import Branding from "../components/Branding.jsx";
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
import { Button } from '@mui/material';
|
|
import { getTheme } from '../theme.jsx';
|
|
import { Context } from '../context/ContextApi.jsx';
|
|
import PartnerSettings from '../components/PartnerSettings.jsx';
|
|
import PartnersUsecasesTab from '../components/PartnersUsecasesTab.jsx';
|
|
import PartnersApps from '../components/PartnerApps.jsx';
|
|
import PartnerArticles from '../components/PartnersArticles.jsx';
|
|
const PartnerTab = (props) => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const {
|
|
userdata,
|
|
globalUrl,
|
|
serverside,
|
|
isCloud,
|
|
setSelectedOrganization,
|
|
selectedOrganization, handleGetOrg,
|
|
handleStatusChange,
|
|
isLoaded,
|
|
removeCookie
|
|
} = props;
|
|
|
|
|
|
const [selectedTab, setSelectedTab] = useState('partner_settings');
|
|
const [loadingPartnerData, setLoadingPartnerData] = useState(false);
|
|
const [curIndex, setCurIndex] = React.useState(0);
|
|
const [partnerData, setPartnerData] = React.useState({
|
|
name: "",
|
|
description: "",
|
|
image_url: "",
|
|
landscape_image_url: "",
|
|
website_url: "",
|
|
article_url: "",
|
|
expertise: [],
|
|
usecases: [],
|
|
services: [],
|
|
solutions: [],
|
|
country: "",
|
|
region: "",
|
|
partner_type: {},
|
|
});
|
|
|
|
const tabsOnPartnerTab = [ 'Partner Settings', 'Usecases', 'Apps', 'AI Agents', 'Articles', 'Branding'];
|
|
|
|
const { themeMode } = useContext(Context);
|
|
const theme = getTheme(themeMode);
|
|
|
|
useEffect(() => {
|
|
if(!isCloud || !userdata?.active_org?.is_partner) {
|
|
// If the user is not a partner or if it's not a cloud environment do not make api call :)
|
|
return;
|
|
}
|
|
setLoadingPartnerData(true);
|
|
const url = globalUrl + "/api/v1/partners/" + userdata?.active_org?.id;
|
|
fetch(url, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
toast.info("No partner details found");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if(responseJson.success) {
|
|
setPartnerData(responseJson?.partner);
|
|
setLoadingPartnerData(false);
|
|
}else{
|
|
setLoadingPartnerData(false);
|
|
console.error(responseJson?.reason)
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setLoadingPartnerData(false);
|
|
})
|
|
}, [globalUrl]);
|
|
|
|
// Used to auto select the tab based on the url : partner_tab
|
|
useEffect(() => {
|
|
const queryParams = new URLSearchParams(location.search);
|
|
const tabName = queryParams.get('partner_tab');
|
|
if (tabName) {
|
|
const decodedTabName = decodeURIComponent(tabName);
|
|
setSelectedTab(decodedTabName);
|
|
if (decodedTabName === 'partner_settings') {
|
|
setCurIndex(0);
|
|
} else if(decodedTabName === 'usecases'){
|
|
setCurIndex(1)
|
|
}else if (decodedTabName === 'apps'){
|
|
setCurIndex(2);
|
|
} else if (decodedTabName === 'aiagents') {
|
|
setCurIndex(3);
|
|
} else if (decodedTabName === 'articles') {
|
|
setCurIndex(4);
|
|
} else if (decodedTabName === 'branding') {
|
|
setCurIndex(5);
|
|
}
|
|
}
|
|
}, [location.search]);
|
|
|
|
// Tab click on partner tab
|
|
const handleTabClick = (tabName) => {
|
|
const formattedTabName = tabName.toLowerCase().replace(/[\s&]+/g, '');
|
|
const encodedTabName = encodeURIComponent(formattedTabName);
|
|
setSelectedTab(formattedTabName);
|
|
document.title = `Shuffle - partner - ${formattedTabName}`;
|
|
navigate(`?partner_tab=${encodedTabName}`);
|
|
};
|
|
|
|
// Rendering the content based on the selected tab
|
|
const renderContent = () => {
|
|
switch (selectedTab) {
|
|
case 'partner_settings':
|
|
return <PartnerSettings isCloud={isCloud} loadingPartnerData={loadingPartnerData} partnerData={partnerData} setPartnerData={setPartnerData} handleStatusChange={handleStatusChange} userdata={userdata} globalUrl={globalUrl} serverside={serverside} handleGetOrg={handleGetOrg} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization} selectedTab={selectedTab} />;
|
|
case 'usecases':
|
|
return <PartnersUsecasesTab isCloud={isCloud} partnerData={partnerData} setPartnerData={setPartnerData} handleStatusChange={handleStatusChange} userdata={userdata} globalUrl={globalUrl} serverside={serverside} handleGetOrg={handleGetOrg} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization} selectedTab={selectedTab} />;
|
|
case `apps`:
|
|
return <PartnersApps isCloud={isCloud} partnerData={partnerData} setPartnerData={setPartnerData} handleStatusChange={handleStatusChange} userdata={userdata} globalUrl={globalUrl} serverside={serverside} handleGetOrg={handleGetOrg} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization} selectedTab={selectedTab} />;
|
|
case 'articles' :
|
|
return <PartnersUsecasesTab isCloud={isCloud} partnerData={partnerData} setPartnerData={setPartnerData} handleStatusChange={handleStatusChange} userdata={userdata} globalUrl={globalUrl} serverside={serverside} handleGetOrg={handleGetOrg} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization} selectedTab={selectedTab} />;
|
|
case `aiagents`:
|
|
return <PartnerArticles tabName="AI Agents, Coming Soon.." isCloud={isCloud} partnerData={partnerData} setPartnerData={setPartnerData} handleStatusChange={handleStatusChange} userdata={userdata} globalUrl={globalUrl} serverside={serverside} handleGetOrg={handleGetOrg} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization} selectedTab={selectedTab} />;
|
|
case 'branding':
|
|
return <Branding
|
|
isCloud={isCloud}
|
|
userdata={userdata}
|
|
globalUrl={globalUrl}
|
|
handleGetOrg={handleGetOrg}
|
|
selectedOrganization={selectedOrganization}
|
|
clickedFromOrgTab={true}
|
|
setSelectedOrganization={setSelectedOrganization}
|
|
/>;
|
|
default:
|
|
return <PartnerSettings isCloud={isCloud} partnerData={partnerData} setPartnerData={setPartnerData} handleStatusChange={handleStatusChange} userdata={userdata} globalUrl={globalUrl} serverside={serverside} handleGetOrg={handleGetOrg} setSelectedOrganization={setSelectedOrganization} selectedOrganization={selectedOrganization} />;
|
|
}
|
|
};
|
|
|
|
const isTabDisabled = (tabName) => {
|
|
// If user is a support user, enable all tabs
|
|
if (userdata?.support) {
|
|
return false;
|
|
}
|
|
|
|
// For non-support users, apply the following restrictions:
|
|
|
|
// For onPrem only partner settings and branding are enabled
|
|
if (
|
|
!isCloud &&
|
|
(tabName === "Usecases" ||
|
|
tabName === "Apps" ||
|
|
tabName === "AI Agents")
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
// Disable Apps, Articles, and AI Agents for all non-support users
|
|
if (
|
|
tabName === "Apps" ||
|
|
tabName === "AI Agents"
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
// Disable Usecases tab for cloud users if not a partner or is in a sub-org
|
|
if (isCloud && tabName === "Usecases") {
|
|
if (
|
|
!userdata?.active_org?.is_partner ||
|
|
userdata?.active_org?.is_sub_org
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// Disable Branding tab if not an integration partner
|
|
const isIntegrationPartner =
|
|
userdata &&
|
|
userdata?.org_status?.includes("integration_partner") &&
|
|
!userdata?.org_status?.includes("sub_org");
|
|
if (tabName === "Branding" && !isIntegrationPartner) {
|
|
return true;
|
|
}
|
|
|
|
// Enable the tab by default
|
|
return false;
|
|
}
|
|
|
|
const isSupportOnlyTab = (tabName) => {
|
|
return tabName === "Apps" || tabName === "AI Agents";
|
|
}
|
|
|
|
return (
|
|
<div style={{ height: "100%", width: "100%", color: theme.palette.platformColor, backgroundColor: theme.palette.platformColor, borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: theme.palette.defaultBorder, boxSizing: 'border-box' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-around', width: "100%", borderBottom: theme.palette.defaultBorder ,boxSizing: 'border-box' }}>
|
|
{tabsOnPartnerTab?.map((tabName, index) => (
|
|
<div key={tabName} style={{ pointerEvents: 'auto', width: '100%', position: 'relative'}}>
|
|
<Button
|
|
onClick={() => {
|
|
setCurIndex(index);
|
|
handleTabClick(index === 0 ? "partner_settings" : tabName.toLowerCase().replace(/[\s&]+/g, ''));
|
|
}}
|
|
disabled={isTabDisabled(tabName)}
|
|
variant="text"
|
|
sx={{
|
|
"&.MuiButton-root": {
|
|
padding: '28px 0',
|
|
borderBottom: index === curIndex ? '2px solid #FF8444' : 'none',
|
|
cursor: 'pointer',
|
|
fontWeight: index === curIndex ? 'bold' : 'normal',
|
|
color: index === curIndex ? "#FF8444" : theme.palette.text.primary,
|
|
textTransform: 'none',
|
|
fontSize: 16,
|
|
width: "100%",
|
|
height: "100%",
|
|
borderRadius: 0,
|
|
},
|
|
"&: hover": {
|
|
backgroundColor: theme.palette.hoverColor
|
|
},
|
|
"&.Mui-disabled": {
|
|
color: "#6F6F6F",
|
|
},
|
|
}}
|
|
>
|
|
{tabName}
|
|
</Button>
|
|
{isSupportOnlyTab(tabName) && userdata?.support && (
|
|
<div style={{
|
|
position: 'absolute',
|
|
top: '8px',
|
|
right: '8px',
|
|
backgroundColor: '#4D4D4D',
|
|
color: 'white',
|
|
borderRadius: '50%',
|
|
width: '20px',
|
|
height: '20px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '12px',
|
|
fontWeight: 'bold',
|
|
zIndex: 1
|
|
}}>
|
|
S
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div style={{ display: 'flex', justifyContent: 'center', width: "100%", height: "100%", paddingBottom: 200, boxSizing:'border-box'}}>
|
|
{renderContent()}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PartnerTab;
|