@hubspot/ui-extensions 0.8.52 → 0.8.54

package/dist/__tests__/experimental/crm/fetchCrmProperties.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/experimental/crm/fetchCrmProperties.spec.js

@@ -0,0 +1,83 @@
+// Set up the mock before importing the module
+const mockFetchCrmProperties = jest.fn();
+const mockSelf = {
+    fetchCrmProperties: mockFetchCrmProperties,
+};
+// Mock the global self object
+Object.defineProperty(global, 'self', {
+    value: mockSelf,
+    writable: true,
+});
+import { fetchCrmProperties, } from '../../../experimental/crm/fetchCrmProperties';
+describe('fetchCrmProperties', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('successfully fetches CRM properties', async () => {
+        const mockApiResponse = {
+            firstname: 'Test value for firstname',
+            lastname: 'Test value for lastname',
+        };
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockResolvedValue(mockResponse);
+        const propertyNames = ['firstname', 'lastname'];
+        const result = await fetchCrmProperties(propertyNames, jest.fn());
+        expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function));
+        expect(result).toEqual({
+            firstname: 'Test value for firstname',
+            lastname: 'Test value for lastname',
+        });
+    });
+    it('throws an error when response is not OK', async () => {
+        const mockResponse = {
+            ok: false,
+            statusText: 'Not Found',
+        };
+        mockFetchCrmProperties.mockResolvedValue(mockResponse);
+        const propertyNames = ['firstname'];
+        await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Failed to fetch CRM properties: Not Found');
+    });
+    it('throws an error when fetch fails', async () => {
+        mockFetchCrmProperties.mockRejectedValue(new Error('Network error'));
+        const propertyNames = ['firstname'];
+        await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Network error');
+    });
+    it('throws an error if the response is not an object', async () => {
+        const mockApiResponse = 'Invalid response';
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockResolvedValue(mockResponse);
+        const propertyNames = ['firstname'];
+        await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Invalid response format');
+    });
+    it('passes the propertiesUpdatedCallback and allows it to be called', async () => {
+        let capturedCallback;
+        const mockApiResponse = {
+            firstname: 'Initial',
+            lastname: 'Initial',
+        };
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockImplementation((propertyNames, callback) => {
+            capturedCallback = callback;
+            return Promise.resolve(mockResponse);
+        });
+        const propertyNames = ['firstname', 'lastname'];
+        const mockCallback = jest.fn();
+        await fetchCrmProperties(propertyNames, mockCallback);
+        expect(typeof capturedCallback).toBe('function');
+        // Simulate the callback being called with new properties
+        const updatedProps = { firstname: 'Updated', lastname: 'Updated' };
+        if (capturedCallback) {
+            capturedCallback(updatedProps);
+        }
+        expect(mockCallback).toHaveBeenCalledWith(updatedProps);
+    });
+});

package/dist/__tests__/experimental/hooks/useCrmProperties.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/experimental/hooks/useCrmProperties.spec.js

@@ -0,0 +1,95 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useCrmProperties } from '../../../experimental/hooks/useCrmProperties';
+// Mock the logger module
+jest.mock('../../../logger', () => ({
+    logger: {
+        debug: jest.fn(),
+        info: jest.fn(),
+        warn: jest.fn(),
+        error: jest.fn(),
+    },
+}));
+// Mock the fetchCrmProperties module
+jest.mock('../../../experimental/crm/fetchCrmProperties');
+const mockFetchCrmProperties = jest.fn();
+import * as fetchCrmPropertiesModule from '../../../experimental/crm/fetchCrmProperties';
+fetchCrmPropertiesModule.fetchCrmProperties = mockFetchCrmProperties;
+describe('useCrmProperties', () => {
+    let originalError;
+    beforeAll(() => {
+        // Suppress React act() warning coming from @testing-library/react
+        originalError = console.error;
+        console.error = (...args) => {
+            if (args[0]?.includes('ReactDOMTestUtils.act'))
+                return;
+            originalError.call(console, ...args);
+        };
+    });
+    beforeEach(() => {
+        // Reset the mock before each test
+        mockFetchCrmProperties.mockReset();
+    });
+    afterAll(() => {
+        console.error = originalError;
+    });
+    it('should return the initial values for properties, error, and isLoading', async () => {
+        const { result } = renderHook(() => useCrmProperties(['firstname', 'lastname']));
+        await waitFor(() => {
+            expect(result.current.properties).toEqual({});
+            expect(result.current.error).toBeNull();
+            expect(result.current.isLoading).toBe(true);
+        });
+    });
+    it('should successfully fetch and return CRM properties', async () => {
+        mockFetchCrmProperties.mockResolvedValue({
+            firstname: 'Test value for firstname',
+            lastname: 'Test value for lastname',
+        });
+        const propertyNames = ['firstname', 'lastname'];
+        const { result } = renderHook(() => useCrmProperties(propertyNames));
+        await waitFor(() => {
+            expect(result.current.properties).toEqual({
+                firstname: 'Test value for firstname',
+                lastname: 'Test value for lastname',
+            });
+            expect(result.current.error).toBeNull();
+            expect(result.current.isLoading).toBe(false);
+        });
+    });
+    it('should handle fetch errors correctly', async () => {
+        const errorMessage = 'Failed to fetch CRM properties';
+        mockFetchCrmProperties.mockRejectedValue(new Error(errorMessage));
+        const propertyNames = ['firstname'];
+        const { result } = renderHook(() => useCrmProperties(propertyNames));
+        await waitFor(() => {
+            expect(result.current.error).toBeInstanceOf(Error);
+            expect(result.current.error?.message).toBe(errorMessage);
+            expect(result.current.properties).toEqual({});
+            expect(result.current.isLoading).toBe(false);
+        });
+    });
+    it('should update properties when propertiesUpdatedCallback is called', async () => {
+        // Capture the callback so we can simulate an external update to CRM properties
+        let capturedCallback;
+        mockFetchCrmProperties.mockImplementation((_propertyNames, propertiesUpdatedCallback) => {
+            capturedCallback = propertiesUpdatedCallback;
+            return { firstname: 'Initial', lastname: 'Initial' };
+        });
+        const propertyNames = ['firstname', 'lastname'];
+        const { result } = renderHook(() => useCrmProperties(propertyNames));
+        await waitFor(() => {
+            expect(result.current.properties).toEqual({
+                firstname: 'Initial',
+                lastname: 'Initial',
+            });
+            expect(result.current.isLoading).toBe(false);
+        });
+        const updatedProperties = { firstname: 'Updated', lastname: 'Updated' };
+        await waitFor(() => {
+            if (capturedCallback) {
+                capturedCallback(updatedProperties);
+                expect(result.current.properties).toEqual(updatedProperties);
+            }
+        });
+    });
+});

package/dist/coreComponents.d.ts

@@ -733,7 +733,7 @@ export declare const LineChart: "LineChart" & {
  *
  * **Links:**
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
 export declare const Tabs: "Tabs" & {
     readonly type?: "Tabs" | undefined;
@@ -752,7 +752,7 @@ export declare const Tabs: "Tabs" & {
  *
  * **Links:**
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
 export declare const Tab: "Tab" & {
     readonly type?: "Tab" | undefined;

package/dist/coreComponents.js

@@ -493,7 +493,7 @@ export const LineChart = createRemoteReactComponent('LineChart');
  *
  * **Links:**
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
 export const Tabs = createRemoteReactComponent('Tabs');
 /**
@@ -508,7 +508,7 @@ export const Tabs = createRemoteReactComponent('Tabs');
  *
  * **Links:**
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
 export const Tab = createRemoteReactComponent('Tab');
 /**

package/dist/experimental/crm/fetchCrmProperties.d.ts

@@ -0,0 +1,4 @@
+export type CrmPropertiesResponse = {
+    [key: string]: string;
+};
+export declare const fetchCrmProperties: (propertyNames: string[], propertiesUpdatedCallback: (properties: Record<string, string>) => void) => Promise<Record<string, string>>;

package/dist/experimental/crm/fetchCrmProperties.js

@@ -0,0 +1,32 @@
+// Type guard for CrmPropertiesResponse
+function isCrmPropertiesResponse(data) {
+    if (
+    // Confirm the data is a defined object
+    data === null ||
+        typeof data !== 'object' ||
+        // Confirm all keys and values are strings
+        !Object.keys(data).every((key) => typeof key === 'string' && typeof data[key] === 'string')) {
+        return false;
+    }
+    return true;
+}
+export const fetchCrmProperties = async (propertyNames, propertiesUpdatedCallback) => {
+    try {
+        // eslint-disable-next-line hubspot-dev/no-confusing-browser-globals
+        const response = await self.fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch CRM properties: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (!isCrmPropertiesResponse(data)) {
+            throw new Error('Invalid response format');
+        }
+        return data;
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            throw error;
+        }
+        throw new Error('Failed to fetch CRM properties: Unknown error');
+    }
+};

package/dist/experimental/hooks/useCrmProperties.d.ts

@@ -1,9 +1,11 @@
-import { CrmHostActions } from 'types';
+export interface CrmPropertiesState {
+    properties: Record<string, string>;
+    error: Error | null;
+    isLoading: boolean;
+}
 /**
  * A hook for using and managing CRM properties.
  *
  * @experimental This hook is experimental and might change or be removed in future versions.
  */
-export declare function useCrmProperties(actions: CrmHostActions, properties: string[], callback: (properties: Record<string, string>) => void, onUpdate?: (properties: Record<string, string>) => void | Promise<void> | undefined | null): {
-    onPropertyChanged: import("types").refreshObjectPropertiesAction;
-};
+export declare function useCrmProperties(propertyNames: string[]): CrmPropertiesState;

package/dist/experimental/hooks/useCrmProperties.js

@@ -1,22 +1,49 @@
-import { useEffect } from 'react';
-import { createPropertyManager } from '../crm/propertyManager';
+import { useEffect, useState } from 'react';
 import { logger } from '../../logger';
+import { fetchCrmProperties } from '../crm/fetchCrmProperties';
 /**
  * A hook for using and managing CRM properties.
  *
  * @experimental This hook is experimental and might change or be removed in future versions.
  */
-export function useCrmProperties(actions, properties, callback, onUpdate) {
+export function useCrmProperties(propertyNames) {
+    const [properties, setProperties] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Log experimental warning once on mount
     useEffect(() => {
         logger.warn('useCrmProperties is an experimental hook and might change or be removed in the future.');
     }, []);
+    const propertiesUpdatedCallback = (newProperties) => {
+        setProperties(newProperties);
+    };
+    // Fetch the properties
     useEffect(() => {
-        const propertyManager = createPropertyManager(actions);
-        return propertyManager.initializePropertyMonitoring(properties, (props) => callback(props), (props) => callback(props));
-    }, [actions, properties, callback, onUpdate]);
-    // Return the refresh function
-    const propertyManager = createPropertyManager(actions);
+        (async () => {
+            try {
+                const propertyData = await fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
+                setProperties(propertyData);
+                setError(null);
+            }
+            catch (err) {
+                const errorData = err instanceof Error
+                    ? err
+                    : new Error('Failed to fetch CRM properties');
+                setError(errorData);
+                setProperties({});
+            }
+            finally {
+                setIsLoading(false);
+            }
+        })().catch((err) => {
+            setError(err);
+            setProperties({});
+            setIsLoading(false);
+        });
+    }, [propertyNames]);
     return {
-        onPropertyChanged: propertyManager.refreshProperties,
+        properties,
+        error,
+        isLoading,
     };
 }

package/dist/experimental/index.d.ts

@@ -54,4 +54,16 @@ declare const SettingsView: "SettingsView" & {
     readonly props?: experimentalTypes.SettingsViewProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"SettingsView", experimentalTypes.SettingsViewProps, true>>;
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, };
+/**
+ * The `ExpandableText` component renders a text that can be expanded or collapsed based on a maximum height.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/expandable-text ExpandableText Docs}
+ */
+declare const ExpandableText: "ExpandableText" & {
+    readonly type?: "ExpandableText" | undefined;
+    readonly props?: experimentalTypes.ExpandableTextProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ExpandableText", experimentalTypes.ExpandableTextProps, true>>;
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, };

package/dist/experimental/index.js

@@ -19,4 +19,12 @@ const Grid = createRemoteReactComponent('Grid');
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 const GridItem = createRemoteReactComponent('GridItem');
 const SettingsView = createRemoteReactComponent('SettingsView');
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, };
+/**
+ * The `ExpandableText` component renders a text that can be expanded or collapsed based on a maximum height.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/expandable-text ExpandableText Docs}
+ */
+const ExpandableText = createRemoteReactComponent('ExpandableText');
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, };

package/dist/experimental/types.d.ts

@@ -111,4 +111,15 @@ export interface SettingsViewProps {
      */
     onCancel?: ReactionsHandler<ExtensionEvent>;
 }
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface ExpandableTextProps {
+    children: ReactNode;
+    maxHeight?: number;
+    expandButtonText?: string;
+    collapseButtonText?: string;
+    expanded?: boolean;
+}
 export {};