diff --git a/sdks/js/packages/core/react/components/organization/preferences/index.tsx b/sdks/js/packages/core/react/components/organization/preferences/index.tsx
index e9ada024e..74d41dfa7 100644
--- a/sdks/js/packages/core/react/components/organization/preferences/index.tsx
+++ b/sdks/js/packages/core/react/components/organization/preferences/index.tsx
@@ -75,12 +75,12 @@ export default function UserPreferences() {
label="Theme"
text="Customise your interface color scheme."
name="theme"
- defaultValue="light"
+ defaultValue={theme}
values={themeOptions}
onSelection={value => setTheme(value)}
/>
- console.log(value)}
/>
-
+ */}
);
diff --git a/sdks/js/packages/core/react/components/organization/profile.tsx b/sdks/js/packages/core/react/components/organization/profile.tsx
index 4a1a32c10..ee59f88ae 100644
--- a/sdks/js/packages/core/react/components/organization/profile.tsx
+++ b/sdks/js/packages/core/react/components/organization/profile.tsx
@@ -45,15 +45,20 @@ import ConfirmPlanChange from './plans/confirm-change';
interface OrganizationProfileProps {
organizationId: string;
defaultRoute?: string;
- tempShowBilling?: boolean;
- tempShowTokens?: boolean;
+ showBilling?: boolean;
+ showTokens?: boolean;
+ showPreferences?: boolean;
hideToast?: boolean;
}
const routerContext = new RouterContext<
Pick<
OrganizationProfileProps,
- 'organizationId' | 'tempShowBilling' | 'tempShowTokens' | 'hideToast'
+ | 'organizationId'
+ | 'showBilling'
+ | 'showTokens'
+ | 'hideToast'
+ | 'showPreferences'
>
>();
@@ -296,14 +301,20 @@ const routeTree = rootRoute.addChildren([
const router = new Router({
routeTree,
- context: { organizationId: '', tempShowBilling: false, tempShowTokens: false }
+ context: {
+ organizationId: '',
+ showBilling: false,
+ showTokens: false,
+ showPreferences: false
+ }
});
export const OrganizationProfile = ({
organizationId,
defaultRoute = '/',
- tempShowBilling = false,
- tempShowTokens = false,
+ showBilling = false,
+ showTokens = false,
+ showPreferences = false,
hideToast = false
}: OrganizationProfileProps) => {
const memoryHistory = createMemoryHistory({
@@ -313,9 +324,14 @@ export const OrganizationProfile = ({
const memoryRouter = new Router({
routeTree,
history: memoryHistory,
- context: { organizationId, tempShowBilling, tempShowTokens, hideToast }
+ context: {
+ organizationId,
+ showBilling,
+ showTokens,
+ hideToast,
+ showPreferences
+ }
});
-
return ;
};
diff --git a/sdks/js/packages/core/react/components/organization/sidebar/helpers.ts b/sdks/js/packages/core/react/components/organization/sidebar/helpers.ts
index cede84d30..3b9a6d8bb 100644
--- a/sdks/js/packages/core/react/components/organization/sidebar/helpers.ts
+++ b/sdks/js/packages/core/react/components/organization/sidebar/helpers.ts
@@ -8,11 +8,15 @@ export type NavigationItemsTypes = {
};
interface getOrganizationNavItemsOptions {
- tempShowBilling?: boolean;
- tempShowTokens?: boolean;
+ showBilling?: boolean;
+ showTokens?: boolean;
canSeeBilling?: boolean;
}
+interface getUserNavItemsOptions {
+ showPreferences?: boolean;
+}
+
export const getOrganizationNavItems = (
options: getOrganizationNavItemsOptions = {}
) =>
@@ -45,27 +49,30 @@ export const getOrganizationNavItems = (
{
name: 'Billing',
to: '/billing',
- show: options?.tempShowBilling && options?.canSeeBilling
+ show: options?.showBilling && options?.canSeeBilling
},
{
name: 'Tokens',
to: '/tokens',
- show: options?.tempShowTokens
+ show: options?.showTokens
},
{
name: 'Plans',
to: '/plans',
- show: options?.tempShowBilling
+ show: options?.showBilling
}
].filter(nav => nav.show) as NavigationItemsTypes[];
-export const userNavItems = [
- {
- name: 'Profile',
- to: '/profile'
- }
- // {
- // name: 'Preferences',
- // to: '/preferences'
- // }
-] as NavigationItemsTypes[];
+export const getUserNavItems = (options: getUserNavItemsOptions = {}) =>
+ [
+ {
+ name: 'Profile',
+ to: '/profile',
+ show: true
+ },
+ {
+ name: 'Preferences',
+ to: '/preferences',
+ show: options?.showPreferences
+ }
+ ].filter(nav => nav.show) as NavigationItemsTypes[];
diff --git a/sdks/js/packages/core/react/components/organization/sidebar/index.tsx b/sdks/js/packages/core/react/components/organization/sidebar/index.tsx
index ff32e394c..5577eb562 100644
--- a/sdks/js/packages/core/react/components/organization/sidebar/index.tsx
+++ b/sdks/js/packages/core/react/components/organization/sidebar/index.tsx
@@ -10,7 +10,7 @@ import { Link, useRouterContext, useRouterState } from '@tanstack/react-router';
import React, { useCallback, useMemo, useState } from 'react';
import organization from '~/react/assets/organization.png';
import user from '~/react/assets/user.png';
-import { getOrganizationNavItems, userNavItems } from './helpers';
+import { getOrganizationNavItems, getUserNavItems } from './helpers';
// @ts-ignore
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
@@ -21,9 +21,10 @@ import styles from './sidebar.module.css';
export const Sidebar = () => {
const [search, setSearch] = useState('');
const routerState = useRouterState();
- const { organizationId, tempShowBilling, tempShowTokens } = useRouterContext({
- from: '__root__'
- });
+ const { organizationId, showBilling, showTokens, showPreferences } =
+ useRouterContext({
+ from: '__root__'
+ });
const isActive = useCallback(
(path: string) =>
@@ -61,11 +62,19 @@ export const Sidebar = () => {
const organizationNavItems = useMemo(
() =>
getOrganizationNavItems({
- tempShowBilling: tempShowBilling,
+ showBilling: showBilling,
canSeeBilling: canSeeBilling,
- tempShowTokens: tempShowTokens
+ showTokens: showTokens
}),
- [tempShowBilling, canSeeBilling, tempShowTokens]
+ [showBilling, canSeeBilling, showTokens]
+ );
+
+ const userNavItems = useMemo(
+ () =>
+ getUserNavItems({
+ showPreferences: showPreferences
+ }),
+ []
);
return (