99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import React, { createContext, useContext, useEffect, useState } from 'react';
|
|
import { cmsApi, Organization, getImageUrl } from '@/lib/api';
|
|
import { useAuth } from './AuthContext';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
interface BrandingContextType {
|
|
branding: Organization | null;
|
|
loading: boolean;
|
|
refreshBranding: () => Promise<void>;
|
|
}
|
|
|
|
const BrandingContext = createContext<BrandingContextType>({
|
|
branding: null,
|
|
loading: true,
|
|
refreshBranding: async () => { },
|
|
});
|
|
|
|
export const useBranding = () => useContext(BrandingContext);
|
|
|
|
export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { user } = useAuth();
|
|
const [branding, setBranding] = useState<Organization | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const pathname = usePathname();
|
|
|
|
const loadBranding = async () => {
|
|
if (!user?.organization_id) {
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
try {
|
|
const data = await cmsApi.getBranding(user.organization_id);
|
|
// Translate BrandingResponse to Organization shape (partial)
|
|
const orgData = {
|
|
id: user.organization_id,
|
|
name: data.platform_name || 'OpenCCB',
|
|
logo_url: data.logo_url,
|
|
favicon_url: data.favicon_url,
|
|
platform_name: data.platform_name,
|
|
logo_variant: data.logo_variant,
|
|
primary_color: data.primary_color,
|
|
secondary_color: data.secondary_color,
|
|
} as any;
|
|
|
|
setBranding(orgData);
|
|
console.log('Branding loaded in Studio:', orgData);
|
|
} catch (error) {
|
|
console.error('Failed to load branding', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadBranding();
|
|
}, [user?.organization_id]);
|
|
|
|
useEffect(() => {
|
|
if (!branding) return;
|
|
console.log('Applying branding in Studio for path:', pathname);
|
|
|
|
// Apply CSS variables
|
|
if (branding.primary_color) {
|
|
document.documentElement.style.setProperty('--primary-color', branding.primary_color);
|
|
}
|
|
if (branding.secondary_color) {
|
|
document.documentElement.style.setProperty('--secondary-color', branding.secondary_color);
|
|
}
|
|
|
|
// Update Title
|
|
if (branding.platform_name) {
|
|
document.title = `${branding.platform_name} | Studio`;
|
|
}
|
|
|
|
// Update Favicon
|
|
if (branding.favicon_url) {
|
|
const faviconUrl = getImageUrl(branding.favicon_url);
|
|
const link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
|
|
if (link) {
|
|
link.href = faviconUrl;
|
|
} else {
|
|
const newLink = document.createElement("link");
|
|
newLink.rel = "shortcut icon";
|
|
newLink.href = faviconUrl;
|
|
document.head.appendChild(newLink);
|
|
}
|
|
}
|
|
}, [branding, pathname]);
|
|
|
|
return (
|
|
<BrandingContext.Provider value={{ branding, loading, refreshBranding: loadBranding }}>
|
|
{children}
|
|
</BrandingContext.Provider>
|
|
);
|
|
};
|