@hyvor/design 1.1.22 → 1.1.24-beta.1

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -3,11 +3,19 @@
 	import { onMount } from 'svelte';
 	import BarProducts, { PRODUCTS } from './BarProducts.svelte';
 	import BarSupport from './BarSupport.svelte';
-	import { barUser, initBar, setInstanceAndProduct, type BarConfig, type BarUser as BarUserType } from './bar.js';
+	import {
+		barUser,
+		initBar,
+		setInstanceAndProduct,
+		type BarConfig,
+		type BarUser as BarUserType
+	} from './bar.js';
 	import BarUpdates from './BarUpdates.svelte';
 	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
 	import BarNotice from './Notice/BarNotice.svelte';
 	import BarLicense from './Notice/BarLicense.svelte';
+	import BarOrganization from './Organization/BarOrganization.svelte';
+	import { type BarOrganization as BarOrganizationType } from './bar.js';
 
 	interface Props {
 		instance?: string;
@@ -27,16 +35,18 @@
 		authOverride?: {
 			user: BarUserType | null;
 			logoutUrl: string;
-		}
+		};
+		onOrganizationSwitch?: (org: BarOrganizationType) => void;
 	}
 
 	let {
-		instance = 'https://hyvor.com', 
-		product, 
+		instance = 'https://hyvor.com',
+		product,
 		logo = `${instance}/api/public/logo/${product}.svg`,
 		config = {},
 		cloud = true,
-		authOverride = undefined
+		authOverride = undefined,
+		onOrganizationSwitch = () => {}
 	}: Props = $props();
 
 	let mobileShow = $state(false);
@@ -61,15 +71,15 @@
 		}
 	}
 
+	if (authOverride) {
+		barUser.set(authOverride.user);
+	}
+
 	onMount(() => {
 		setInstanceAndProduct(instance, product);
 
 		if (cloud) {
 			initBar();
-		} else {
-			if (authOverride) {
-				barUser.set(authOverride.user);
-			}
 		}
 	});
 
@@ -87,16 +97,12 @@
 	<div class="inner hds-box">
 		<div class="left">
 			<a class="logo" href="/">
-				<img
-					src={logo}
-					alt={product}
-					width="20"
-					height="20"
-				/>
+				<img src={logo} alt={product} width="20" height="20" />
 				<span class="name">
 					{getName()}
 				</span>
 			</a>
+			<BarOrganization onSwitch={onOrganizationSwitch} />
 			<BarLicense name={getName()} />
 		</div>
 		<div class="right">
@@ -132,7 +138,7 @@
 		z-index: 100;
 	}
 	.inner {
-		padding: 10px 29px;
+		padding: 0px 29px;
 		display: flex;
 		align-items: center;
 		border-top-left-radius: 0;
@@ -143,6 +149,7 @@
 		display: flex;
 		align-items: center;
 		flex: 1;
+		height: 100%;
 	}
 	.logo {
 		display: flex;

package/dist/components/HyvorBar/HyvorBar.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type BarConfig, type BarUser as BarUserType } from './bar.js';
+import { type BarOrganization as BarOrganizationType } from './bar.js';
 interface Props {
     instance?: string;
     product: string;
@@ -13,6 +14,7 @@ interface Props {
         user: BarUserType | null;
         logoutUrl: string;
     };
+    onOrganizationSwitch?: (org: BarOrganizationType) => void;
 }
 declare const HyvorBar: import("svelte").Component<Props, {}, "">;
 type HyvorBar = ReturnType<typeof HyvorBar>;

package/dist/components/HyvorBar/Notice/BarLicense.svelte

@@ -22,7 +22,7 @@
 		return daysDiff(endsAt);
 	}
 
-	function remainingCancelAtDAys(cancelAt: number | undefined | null) : null | number {
+	function remainingCancelAtDAys(cancelAt: number | undefined | null): null | number {
 		if (!cancelAt) {
 			return null;
 		}
@@ -36,9 +36,7 @@
 {#if $barLicense}
 	<a class="wrap" href="/console/billing">
 		{#if $barLicense.type === 'subscription'}
-			<Tooltip
-				position="bottom"
-			>
+			<Tooltip position="bottom">
 				{#snippet tooltip()}
 					Your current subscription plan for {name}. Click to manage it.
 				{/snippet}

package/dist/components/HyvorBar/Organization/BarOrganization.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import Dropdown from '../../Dropdown/Dropdown.svelte';
+	import Tooltip from '../../Tooltip/Tooltip.svelte';
+	import { barUser, switchOrganization, type BarOrganization } from '../bar.js';
+	import IconChevronExpand from '@hyvor/icons/IconChevronExpand';
+	import OrgsList from './OrgsList.svelte';
+	import toast from '../../Toast/toast.js';
+
+	let showDropdown = $state(false);
+	let showTooltip = $state(true);
+	let switching = $state(false);
+
+	let props: {
+		onSwitch: (org: BarOrganization) => void;
+	} = $props();
+
+	async function handleSwitch(org: BarOrganization) {
+		showDropdown = false;
+		switching = true;
+
+		try {
+			await switchOrganization(org);
+		} catch (e) {
+			toast.error('Failed to switch organization.');
+			switching = false;
+			return;
+		}
+
+		props.onSwitch(org);
+	}
+
+	$effect(() => {
+		if (showDropdown) {
+			showTooltip = false;
+		} else {
+			setTimeout(() => {
+				showTooltip = true;
+			}, 3000);
+		}
+	});
+</script>
+
+{#if $barUser}
+	<Tooltip position="bottom" text="Switch Organization" disabled={!showTooltip}>
+		<span class="wrap">
+			<Dropdown bind:show={showDropdown} align="center" width={275} contentPadding={0}>
+				{#snippet trigger()}
+					<button>
+						{#if switching}
+							<span class="switching">Switching...</span>
+						{:else}
+							{$barUser.current_organization_name}
+						{/if}
+						<IconChevronExpand size={12} />
+					</button>
+				{/snippet}
+				{#snippet content()}
+					<OrgsList onSwitch={handleSwitch} />
+				{/snippet}
+			</Dropdown>
+		</span>
+	</Tooltip>
+{/if}
+
+<style>
+	.wrap {
+		height: 100%;
+		margin-left: 20px;
+		margin-right: 20px;
+		display: inline-flex;
+		align-items: center;
+	}
+	button {
+		height: 100%;
+		padding: 0 15px;
+		font-size: 14px;
+		height: 24px;
+		font-weight: 600;
+		transition: 0.2s background-color;
+		border: 1px solid var(--border);
+		border-top: none;
+		border-bottom: none;
+	}
+	button:hover {
+		background-color: var(--hover);
+	}
+
+	.wrap :global(.dropdown),
+	.wrap :global(.trigger) {
+		display: inline-block;
+		height: 100%;
+	}
+
+	.switching {
+		opacity: 0.4;
+		animation: switching-pulse 1.5s infinite;
+	}
+	@keyframes switching-pulse {
+		0%,
+		100% {
+			opacity: 0.4;
+		}
+		50% {
+			opacity: 0.8;
+		}
+	}
+</style>

package/dist/components/HyvorBar/Organization/BarOrganization.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type BarOrganization } from '../bar.js';
+type $$ComponentProps = {
+    onSwitch: (org: BarOrganization) => void;
+};
+declare const BarOrganization: import("svelte").Component<$$ComponentProps, {}, "">;
+type BarOrganization = ReturnType<typeof BarOrganization>;
+export default BarOrganization;

package/dist/components/HyvorBar/Organization/OrgsList.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import IconMessage from '../../IconMessage/IconMessage.svelte';
+	import Loader from '../../Loader/Loader.svelte';
+	import { onMount } from 'svelte';
+	import { getMyOrganizations, type BarOrganization } from '../bar.js';
+	import ActionList from '../../ActionList/ActionList.svelte';
+	import ActionListItem from '../../ActionList/ActionListItem.svelte';
+
+	let loading = $state(true);
+	let error = $state('');
+	let orgs = $state<BarOrganization[]>([]);
+
+	let {
+		onSwitch
+	}: {
+		onSwitch: (org: BarOrganization) => void;
+	} = $props();
+
+	onMount(() => {
+		getMyOrganizations()
+			.then((data) => {
+				orgs = data;
+			})
+			.catch((err) => {
+				error = 'Failed to load organizations.';
+			})
+			.finally(() => {
+				loading = false;
+			});
+	});
+</script>
+
+{#if loading}
+	<Loader padding={40} block size="small" />
+{:else if error}
+	<IconMessage error iconSize={30}>
+		{error}
+	</IconMessage>
+{:else}
+	<div class="list-wrap">
+		<ActionList>
+			{#each orgs as org}
+				<ActionListItem on:select={() => onSwitch(org)}>
+					{org.name}
+					{#snippet end()}
+						<span class="role">
+							{org.role.toUpperCase()}
+						</span>
+					{/snippet}
+				</ActionListItem>
+			{/each}
+		</ActionList>
+	</div>
+{/if}
+
+<style>
+	.role {
+		font-size: 10px;
+		color: var(--text-light);
+		font-weight: 600;
+	}
+	.list-wrap {
+		max-height: 300px;
+		overflow-y: auto;
+		padding: 10px;
+	}
+</style>

package/dist/components/HyvorBar/Organization/OrgsList.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type BarOrganization } from '../bar.js';
+type $$ComponentProps = {
+    onSwitch: (org: BarOrganization) => void;
+};
+declare const OrgsList: import("svelte").Component<$$ComponentProps, {}, "">;
+type OrgsList = ReturnType<typeof OrgsList>;
+export default OrgsList;

package/dist/components/HyvorBar/bar.d.ts

@@ -10,6 +10,12 @@ export interface BarUser {
     username?: string | null;
     email: string;
     picture_url: string | null;
+    current_organization_name: string;
+}
+export interface BarOrganization {
+    id: number;
+    name: string;
+    role: 'admin' | 'billing' | 'manager' | 'member';
 }
 export interface BarUpdate {
     id: number;
@@ -34,7 +40,12 @@ export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
 export declare const barLicense: import("svelte/store").Writable<BarResolvedLicense | null>;
 export declare const barHasFailedInvoices: import("svelte/store").Writable<boolean>;
 export declare function setInstanceAndProduct(instance_: string, product_: string): void;
-export declare function initBar(): void;
+/**
+ * @throws Error if initialization fails
+ */
+export declare function initBar(): Promise<void>;
+export declare function getMyOrganizations(): Promise<BarOrganization[]>;
+export declare function switchOrganization(org: BarOrganization): Promise<void>;
 export declare class UnreadUpdatesTimeLocalStorage {
     static KEY: string;
     static get(): number | null;

package/dist/components/HyvorBar/bar.js

@@ -10,35 +10,63 @@ export function setInstanceAndProduct(instance_, product_) {
     instance = instance_;
     product = product_;
 }
-export function initBar() {
+/**
+ * @throws Error if initialization fails
+ */
+export async function initBar() {
     const query = new URLSearchParams();
     query.set('product', product);
     const lastUnreadTime = UnreadUpdatesTimeLocalStorage.get();
     if (lastUnreadTime) {
         query.set('last_read_updates_at', lastUnreadTime.toString());
     }
-    fetch(instance + '/api/public/bar?' + query.toString(), {
+    const response = await fetch(instance + '/api/public/bar?' + query.toString(), {
         credentials: 'include'
-    })
-        .then((response) => response.json())
-        .then((data) => {
-        barUser.set(data.user);
-        barUnreadUpdates.set(data.updates.unread);
-        barLicense.set(data.billing.license);
-        barHasFailedInvoices.set(data.billing.has_failed_invoices);
-        if (lastUnreadTime === null) {
-            UnreadUpdatesTimeLocalStorage.setNow();
-        }
-        if (data.user && track.ready()) {
-            track.identify(data.user.id.toString(), {
-                name: data.user.name ?? undefined,
-                avatar: data.user.picture_url ?? undefined,
-            });
-        }
-    })
-        .catch((error) => {
-        console.error('Error:', error);
     });
+    if (!response.ok) {
+        throw new Error('Failed to initialize bar');
+    }
+    const data = await response.json();
+    barUser.set(data.user);
+    barUnreadUpdates.set(data.updates.unread);
+    barLicense.set(data.billing.license);
+    barHasFailedInvoices.set(data.billing.has_failed_invoices);
+    if (lastUnreadTime === null) {
+        UnreadUpdatesTimeLocalStorage.setNow();
+    }
+    if (data.user && track.ready()) {
+        track.identify(data.user.id.toString(), {
+            name: data.user.name ?? undefined,
+            avatar: data.user.picture_url ?? undefined,
+        });
+    }
+}
+export async function getMyOrganizations() {
+    /* return [
+        { id: 1, name: 'Org 1', role: 'admin' },
+        { id: 2, name: 'Org 2', role: 'member' },
+        { id: 3, name: 'Org 3', role: 'billing' },
+        { id: 4, name: 'Org 4', role: 'manager' },
+    ] */
+    const response = await fetch(instance + '/api/public/bar/myorgs', {
+        credentials: 'include'
+    });
+    const data = await response.json();
+    return data.organizations;
+}
+export async function switchOrganization(org) {
+    const response = await fetch(instance + '/api/public/bar/switch-org', {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ organization_id: org.id })
+    });
+    if (!response.ok) {
+        throw new Error('Failed to switch organization');
+    }
+    await initBar();
 }
 export class UnreadUpdatesTimeLocalStorage {
     static KEY = 'unread_updates';

package/dist/marketing/track/track.d.ts

@@ -8,8 +8,8 @@ declare class Track {
     private op;
     private isProductionDomain;
     init({ forceTrack, openPanelApiUrl, openPanelClientId, context }?: InitOptions): void;
-    private checkOp;
     ready(): boolean;
+    private warnNoOp;
     context(properties: Record<string, any>): void;
     event(name: string, properties?: Record<string, any>): void;
     identify(profileId: string, props: {

package/dist/marketing/track/track.js

@@ -21,38 +21,52 @@ class Track {
             this.op.setGlobalProperties(context);
         }
     }
-    checkOp() {
-        if (!this.op) {
-            throw new Error('OpenPanel is not initialized. Call track.init() first.');
-        }
-    }
     ready() {
         return this.op !== undefined;
     }
+    warnNoOp(message) {
+        console.warn(`[Track] Ignoring action: ${message} - OpenPanel is not initialized. Call track.init() first.`);
+    }
     // set global context
     context(properties) {
-        this.checkOp();
-        this.op.setGlobalProperties(properties);
+        if (this.op) {
+            this.op.setGlobalProperties(properties);
+        }
+        else {
+            this.warnNoOp('set context');
+        }
     }
     // log an event
     event(name, properties) {
-        this.checkOp();
-        this.op.track(name, properties);
+        if (this.op) {
+            this.op.track(name, properties);
+        }
+        else {
+            this.warnNoOp(`log event "${name}"`);
+        }
     }
     // identify user
     identify(profileId, props) {
-        this.checkOp();
-        this.op.identify({
-            profileId: profileId,
-            firstName: props.name,
-            avatar: props.avatar,
-            properties: props.properties
-        });
+        if (this.op) {
+            this.op.identify({
+                profileId: profileId,
+                firstName: props.name,
+                avatar: props.avatar,
+                properties: props.properties
+            });
+        }
+        else {
+            this.warnNoOp(`identify user "${profileId}"`);
+        }
     }
     // log out user (clear identity)
     logout() {
-        this.checkOp();
-        this.op.clear();
+        if (this.op) {
+            this.op.clear();
+        }
+        else {
+            this.warnNoOp('logout user');
+        }
     }
 }
 const track = new Track();

package/package.json

@@ -62,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.22"
+	"version": "1.1.24-beta.1"
 }