OpenConceptLab/ocl_online#504 | A profile slot under the username for the private UI package

src/common/plugins/loader.js

@@ -1,11 +1,19 @@
-export async function loadUsageDashboard() {
+async function loadPrivateExport(name) {
   try {
     // webpack won't try to resolve this at build time
     /*eslint no-undef: 0*/
     const mod = await import("ocl-analytics-web");
-    /*eslint no-console: 0*/
-    return mod.UsageDashboard || mod.default || null;
+    return mod[name] || null;
   } catch (e) {
     return null;
   }
 }
+
+export function loadUsageDashboard() {
+  return loadPrivateExport("UsageDashboard");
+}
+
+// A component the private package renders under the name on a user's profile, or null without the package
+export function loadUserProfileExtension() {
+  return loadPrivateExport("UserProfileExtension");
+}

src/common/plugins/usage-dashboard.stub.js

@@ -1,2 +1,3 @@
 export const UsageDashboard = null;
+export const UserProfileExtension = null;
 export default null;

src/components/users/UserProfile.jsx

@@ -20,7 +20,10 @@ import Link from '../common/Link'
 import { OperationsContext } from '../app/LayoutContext';
 import APIService from '../../services/APIService';
 import FollowActionButton from '../common/FollowActionButton'
+import { loadUserProfileExtension } from '../../common/plugins/loader'
 
+// eslint-disable-next-line no-undef, no-process-env
+const ANALYTICS_URL = window.ANALYTICS_API || process.env.ANALYTICS_API
 
 const UserProperty = ({icon, value, label}) => {
   return value ? (
@@ -45,6 +48,7 @@ const UserProfile = ({ user }) => {
   const { t } = useTranslation()
   const params = useParams()
   const [apiToken, setApiToken] = React.useState(undefined)
+  const [ProfileExtension, setProfileExtension] = React.useState(null)
   const { setAlert } = React.useContext(OperationsContext);
   const iconStyle = {fontSize: '20px', color: 'secondary.main'}
   const userOrgs = sortOrgs(user?.subscribed_orgs || [])
@@ -60,6 +64,9 @@ const UserProfile = ({ user }) => {
   React.useEffect(() => {
     fetchAPIToken()
   }, [params.user])
+  React.useEffect(() => {
+    loadUserProfileExtension().then(component => component && setProfileExtension(() => component))
+  }, [])
   const currentUser = getCurrentUser()
   const isCurrentUser = Boolean(currentUser?.username && currentUser?.username == params.user)
   return (
@@ -71,6 +78,10 @@ const UserProfile = ({ user }) => {
       <Typography component='h3' sx={{color: 'surface.light', display: 'flex', alignItems: 'center'}}>
         {user?.username}
       </Typography>
+      {
+        ProfileExtension &&
+          <ProfileExtension user={user} currentUser={currentUser} APIService={APIService} ANALYTICS_URL={ANALYTICS_URL} t={t} />
+      }
       <List sx={{color: 'secondary.main', marginTop: '8px'}}>
         <UserProperty icon={<LocationIcon sx={iconStyle} />} value={user?.location} />
         <UserProperty icon={<CompanyIcon sx={iconStyle} />} value={user?.company} />

src/i18n/locales/en/translations.json

@@ -926,6 +926,25 @@
     "profile_update_success": "Profile updated successfully",
     "profile_update_failure": "An error occurred while updating profile.",
     "copy_api_token": "Copy API token",
+    "plan": {
+      "heading": "Plan",
+      "community": "Community",
+      "community_subtitle": "Free plan",
+      "early_access": "Early access",
+      "early_access_subtitle": "Free during early access",
+      "pro": "Pro",
+      "team": "Team",
+      "paid_subtitle": "Paid plan",
+      "core": "Core",
+      "core_subtitle": "OCL core team: no plan limits",
+      "manage_billing": "Manage billing",
+      "see_plans": "See plans",
+      "view_usage": "View usage",
+      "view_usage_staff": "View usage (staff)",
+      "billing_questions": "Billing questions: {{email}}",
+      "staff_badge": "Staff",
+      "test_badge": "Test account"
+    },
     "copy_token_success": "Copied token to your clipboard",
     "your": "Your",
     "avatar": "Avatar",

src/i18n/locales/es/translations.json

@@ -527,6 +527,25 @@
     "success_delete": "Organización eliminada correctamente"
   },
   "user": {
+    "plan": {
+      "heading": "Plan",
+      "community": "Comunidad",
+      "community_subtitle": "Plan gratuito",
+      "early_access": "Acceso anticipado",
+      "early_access_subtitle": "Gratis durante el acceso anticipado",
+      "pro": "Pro",
+      "team": "Equipo",
+      "paid_subtitle": "Plan de pago",
+      "core": "Core",
+      "core_subtitle": "Equipo central de OCL: sin límites de plan",
+      "manage_billing": "Gestionar facturación",
+      "see_plans": "Ver planes",
+      "view_usage": "Ver uso",
+      "view_usage_staff": "Ver uso (staff)",
+      "billing_questions": "Preguntas de facturación: {{email}}",
+      "staff_badge": "Staff",
+      "test_badge": "Cuenta de prueba"
+    },
     "users": "Usuarios",
     "user": "Usuario",
     "my_profile": "Mi perfil",

src/i18n/locales/pt-BR/translations.json

@@ -916,6 +916,25 @@
     "profile_update_success": "Perfil atualizado com sucesso",
     "profile_update_failure": "Ocorreu um erro ao atualizar o perfil.",
     "copy_api_token": "Copiar token da API",
+    "plan": {
+      "heading": "Plano",
+      "community": "Comunidade",
+      "community_subtitle": "Plano gratuito",
+      "early_access": "Acesso antecipado",
+      "early_access_subtitle": "Gratuito durante o acesso antecipado",
+      "pro": "Pro",
+      "team": "Equipe",
+      "paid_subtitle": "Plano pago",
+      "core": "Core",
+      "core_subtitle": "Equipe principal da OCL: sem limites de plano",
+      "manage_billing": "Gerenciar cobrança",
+      "see_plans": "Ver planos",
+      "view_usage": "Ver uso",
+      "view_usage_staff": "Ver uso (equipe)",
+      "billing_questions": "Dúvidas de cobrança: {{email}}",
+      "staff_badge": "Equipe",
+      "test_badge": "Conta de teste"
+    },
     "copy_token_success": "Token copiado para sua área de transferência",
     "your": "Seu",
     "avatar": "Avatar",

src/i18n/locales/zh/translations.json

@@ -586,6 +586,25 @@
     "profile_update_success": "已成功更新个人资料",
     "profile_update_failure": "更新个人资料时出现错误。",
     "copy_api_token": "复制 API 令牌",
+    "plan": {
+      "heading": "套餐",
+      "community": "社区版",
+      "community_subtitle": "免费套餐",
+      "early_access": "抢先体验",
+      "early_access_subtitle": "抢先体验期间免费",
+      "pro": "Pro",
+      "team": "团队版",
+      "paid_subtitle": "付费套餐",
+      "core": "核心",
+      "core_subtitle": "OCL 核心团队：无套餐限制",
+      "manage_billing": "管理账单",
+      "see_plans": "查看套餐",
+      "view_usage": "查看用量",
+      "view_usage_staff": "查看用量（员工）",
+      "billing_questions": "账单问题：{{email}}",
+      "staff_badge": "员工",
+      "test_badge": "测试账户"
+    },
     "copy_token_success": "已将令牌复制到您的粘贴板",
     "your": "您的",
     "avatar": "头像",