@datalayer/core 0.0.14 → 0.0.16

package/lib/components/checkout/StripeCheckout.js

@@ -7,34 +7,26 @@ import { createElement, useCallback, useEffect, useState } from 'react';
 import { Button, Flash, FormControl, Spinner, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks';
-import { useIAMStore } from '../../state';
 /**
  * Stripe checkout.
  */
 export function StripeCheckout({ checkoutPortal, }) {
-    const { iamRunUrl } = useIAMStore();
-    const { createCheckoutSession, refreshStripePrices } = useCache();
+    const { useCreateCheckoutSession, useStripePrices } = useCache();
     const [stripe, setStripe] = useState(null);
     const [components, setComponents] = useState(null);
     const [items, setItems] = useState(null);
     const [product, setProduct] = useState(null);
     const [checkout, setCheckout] = useState(false);
-    // Refresh Stripe items.
+    // Get Stripe prices using TanStack Query hook
+    const { data: pricesData } = useStripePrices();
+    // Update items when prices data changes
     useEffect(() => {
-        refreshStripePrices()
-            .then(response => {
-            if (response.success) {
-                setItems(response.prices);
-            }
-            else {
-                setItems([]);
-            }
-        })
-            .catch(error => {
-            console.error('Failed to fetch product items.', error);
-            setItems([]);
-        });
-    }, []);
+        if (pricesData) {
+            setItems(pricesData);
+        }
+    }, [pricesData]);
+    // Get checkout session mutation
+    const checkoutSessionMutation = useCreateCheckoutSession();
     // Load stripe components.
     useEffect(() => {
         import('@stripe/react-stripe-js').then(module => {
@@ -45,15 +37,19 @@ export function StripeCheckout({ checkoutPortal, }) {
     useEffect(() => {
         if (checkoutPortal?.metadata?.stripe_key) {
             import('@stripe/stripe-js').then(module => {
-                setStripe(module.loadStripe(checkoutPortal.metadata.stripe_key));
+                setStripe(module.loadStripe(checkoutPortal.metadata?.stripe_key ?? ''));
             });
         }
     }, [checkoutPortal?.metadata?.stripe_key]);
-    const fetchClientSecret = useCallback(() => {
+    const fetchClientSecret = useCallback(async () => {
         const location = document.location;
-        // Create a Checkout Session.
-        return createCheckoutSession(product, location);
-    }, [iamRunUrl, location, product?.id]);
+        // Create a Checkout Session using TanStack Query mutation
+        const result = await checkoutSessionMutation.mutateAsync({
+            product,
+            location,
+        });
+        return result;
+    }, [checkoutSessionMutation, product]);
     const options = { fetchClientSecret };
     let view = (_jsx(Box, { sx: { minHeight: '40px' }, children: _jsx(Spinner, {}) }));
     if (checkout) {

package/lib/components/context/OrganizationSelect.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { Select } from '@primer/react';
 import { useCache, useUser } from './../../hooks';
 import { useLayoutStore } from '../../state';
@@ -11,25 +11,22 @@ const NO_ORGANIZATION_SELECTED_VALUE = 'NO_ORGANIZATION_SELECTED_VALUE';
 export const OrganizationSelect = () => {
     const user = useUser();
     const { organization, updateLayoutOrganization, updateLayoutSpace } = useLayoutStore();
-    const { refreshUserOrganizations, getUserOrganizations } = useCache();
-    const [organizations, setOrganizations] = useState(getUserOrganizations());
-    const [_, setSelection] = useState(organization);
+    const { useRefreshUserOrganizations, useUserOrganizations } = useCache();
+    const { mutate: refreshUserOrganizationsMutate } = useRefreshUserOrganizations();
+    const { data: organizations = [] } = useUserOrganizations();
     useEffect(() => {
-        refreshUserOrganizations(user).then(resp => {
-            if (resp.success) {
-                setOrganizations(getUserOrganizations());
-            }
-        });
-    }, [user]);
-    const onSelectionChange = useCallback((e) => {
-        const selectedOrganization = e.target.value;
+        if (user) {
+            refreshUserOrganizationsMutate();
+        }
+    }, [user, refreshUserOrganizationsMutate]);
+    const onSelectionChange = useCallback((event) => {
+        const selectedOrganization = event.target.value;
         const org = selectedOrganization === NO_ORGANIZATION_SELECTED_VALUE
             ? undefined
             : organizations[parseInt(selectedOrganization, 10)];
-        setSelection(org);
         updateLayoutOrganization(org);
         updateLayoutSpace(undefined);
-    }, [setSelection, organizations]);
-    return (_jsx(_Fragment, { children: _jsxs(Select, { block: true, width: "medium", onChange: onSelectionChange, children: [_jsx(Select.Option, { value: NO_ORGANIZATION_SELECTED_VALUE, selected: organization === undefined, children: "Please select an organization..." }), organizations.map((org, index) => (_jsx(Select.Option, { value: `${index}`, selected: org.id === organization?.id, children: org.name })))] }) }));
+    }, [organizations, updateLayoutOrganization, updateLayoutSpace]);
+    return (_jsx(_Fragment, { children: _jsxs(Select, { block: true, width: "medium", onChange: onSelectionChange, children: [_jsx(Select.Option, { value: NO_ORGANIZATION_SELECTED_VALUE, selected: organization === undefined, children: "Please select an organization..." }), organizations.map((org, index) => (_jsx(Select.Option, { value: `${index}`, selected: org.id === organization?.id, children: org.name }, org.id)))] }) }));
 };
 export default OrganizationSelect;

package/lib/components/context/SpaceSelect.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { FormControl, Select } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { useCache, useUser } from './../../hooks';
@@ -11,33 +11,32 @@ import { useLayoutStore } from '../../state';
 export const SpaceSelect = () => {
     const user = useUser();
     const { organization, space, updateLayoutSpace } = useLayoutStore();
-    const { refreshUserSpaces, getUserSpaces, refreshOrganizationSpaces, getOrganizationSpaces, } = useCache();
-    const [spaces, setSpaces] = useState([]);
-    const [_, setSelection] = useState(space);
+    const { useRefreshUserSpaces, useUserSpaces, useRefreshOrganizationSpaces, useOrganizationSpaces, } = useCache();
+    const { mutate: refreshUserSpacesMutate } = useRefreshUserSpaces();
+    const { mutate: refreshOrganizationSpacesMutate } = useRefreshOrganizationSpaces();
+    const { data: organizationSpaces = [] } = useOrganizationSpaces(organization?.id ?? '');
+    const { data: userSpaces = [] } = useUserSpaces();
+    const spaces = organization ? organizationSpaces : userSpaces;
     useEffect(() => {
-        if (organization) {
-            refreshOrganizationSpaces(organization.id).then(resp => {
-                if (resp.success) {
-                    setSpaces(getOrganizationSpaces(organization.id));
-                }
-            });
+        if (organization?.id) {
+            refreshOrganizationSpacesMutate(organization.id);
         }
-        else {
-            refreshUserSpaces().then(resp => {
-                if (resp.success) {
-                    setSpaces(getUserSpaces());
-                }
-            });
+        else if (user) {
+            refreshUserSpacesMutate();
         }
-    }, [user, organization]);
-    const onSelectionChange = useCallback((e) => {
-        const selectedSpace = e.target.value;
-        const org = selectedSpace === undefined
+    }, [
+        organization?.id,
+        refreshOrganizationSpacesMutate,
+        refreshUserSpacesMutate,
+        user,
+    ]);
+    const onSelectionChange = useCallback((event) => {
+        const selectedSpaceIndex = Number.parseInt(event.target.value, 10);
+        const selectedSpace = Number.isNaN(selectedSpaceIndex) || selectedSpaceIndex < 0
             ? undefined
-            : spaces[parseInt(selectedSpace, 10)];
-        setSelection(org);
-        updateLayoutSpace(org);
-    }, [setSelection, spaces]);
-    return (_jsx(_Fragment, { children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Select a space" }), _jsx(FormControl.Caption, { children: "This will go with you while you navigate" }), _jsx(Select, { block: true, width: "medium", onChange: onSelectionChange, placeholder: "Please select an space...", children: spaces.map((sp, index) => (_jsx(Select.Option, { value: `${index}`, selected: sp.id === space?.id, children: sp.name }))) })] }) }) }));
+            : spaces[selectedSpaceIndex];
+        updateLayoutSpace(selectedSpace);
+    }, [spaces, updateLayoutSpace]);
+    return (_jsx(_Fragment, { children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Select a space" }), _jsx(FormControl.Caption, { children: "This will go with you while you navigate" }), _jsx(Select, { block: true, width: "medium", onChange: onSelectionChange, placeholder: "Please select an space...", children: spaces.map((sp, index) => (_jsx(Select.Option, { value: `${index}`, selected: sp.id === space?.id, children: sp.name }, sp.id))) })] }) }) }));
 };
 export default SpaceSelect;

package/lib/hooks/useAuthorization.js

@@ -16,8 +16,10 @@ export const useAuthorization = () => {
     };
     // Account -------------------------------------------------------------------
     const checkUserAccountPermissions = (user, accountHandle) => {
-        if (user.handle !== accountHandle) {
-            goToApplicationStateError(`Permissions check failed for account handle: ${accountHandle} and user: ${user}`);
+        // Note: user object from API has handle_s property, not handle
+        const userHandle = user.handle_s || user.handle;
+        if (userHandle !== accountHandle) {
+            goToApplicationStateError(`Permissions check failed for account handle: ${accountHandle} and user handle: ${userHandle}`);
         }
     };
     // Platform -------------------------------------------------------------------