[CSL-3248] Refactor useCioClient to match other OS Implementations

spec/CioPlp/CioPlp.server.test.jsx

@@ -18,6 +18,13 @@ describe('CioPlp React Server-Side Rendering', () => {
     expect(html).toContain('');
   });
 
+  it('renders CioPlp provider without children on the server without error, if client is provided', () => {
+    // Render the component to a string
+    const html = ReactDOMServer.renderToString(<CioPlp cioClient={{}} />);
+
+    expect(html).toContain('');
+  });
+
   it('renders CioPlp provider with children correctly on the server', () => {
     // Render the component to a string
     const html = ReactDOMServer.renderToString(

spec/CioPlp/CioPlp.test.jsx

@@ -25,6 +25,10 @@ describe('CioPlp React Client-Side Rendering', () => {
     expect(() => render(<CioPlp apiKey={DEMO_API_KEY} />)).not.toThrow();
   });
 
+  it('renders CioPlp provider without children on the client without error, if client is provided', () => {
+    expect(() => render(<CioPlp cioClient={{}} />)).not.toThrow();
+  });
+
   it('renders CioPlp provider with children correctly on the client', () => {
     // Render the component to a string
     const { getByText } = render(

spec/useCioClient.server.test.js

@@ -17,15 +17,16 @@ describe('Testing Hook on the server: useCioClient', () => {
       renderHookServerSide(() => useCioClient(), {
         initialProps: {},
       }),
-    ).toThrow('Api Key required');
+    ).toThrow('Api Key or Constructor Client required');
   });
 
-  it('Should return null when apiKey is provided', () => {
-    const { result } = renderHookServerSide(({ apiKey }) => useCioClient(apiKey), {
-      initialProps: { apiKey: 'xx' },
+  it('Should return client when custom client is provided', () => {
+    const mockClient = { tracker: () => {} };
+    const { result } = renderHookServerSide(({ cioClient }) => useCioClient({ cioClient }), {
+      initialProps: { cioClient: mockClient },
     });
 
-    expect(result).toBe(null);
+    expect(result).toBe(mockClient);
   });
 
   it('Should return when clientOptions are provided', () => {
@@ -47,7 +48,7 @@ describe('Testing Hook on the server: useCioClient', () => {
     };
 
     const { result } = renderHookServerSide(
-      ({ apiKey, options }) => useCioClient(apiKey, options),
+      ({ apiKey, options }) => useCioClient({ apiKey, options }),
       {
         initialProps: { apiKey: key, options: clientOptions },
       },

spec/useCioClient.test.js

@@ -10,8 +10,17 @@ describe('Testing Hook: useCioClient', () => {
     spy.mockRestore();
   });
 
+  test('Should return client when custom client is provided', () => {
+    const mockClient = { tracker: () => {} };
+    const { result } = renderHook(({ cioClient }) => useCioClient({ cioClient }), {
+      initialProps: { cioClient: mockClient },
+    });
+
+    expect(result.current).toBe(mockClient);
+  });
+
   test('Should return a ConstructorIO Client Object', () => {
-    const { result } = renderHook(({ apiKey }) => useCioClient(apiKey), {
+    const { result } = renderHook(({ apiKey }) => useCioClient({ apiKey }), {
       initialProps: { apiKey: 'xx' },
     });
     const client = result.current;
@@ -42,7 +51,7 @@ describe('Testing Hook: useCioClient', () => {
       networkParameters: { timeout: 1000 },
     };
 
-    const { result } = renderHook(({ apiKey, options }) => useCioClient(apiKey, options), {
+    const { result } = renderHook(({ apiKey, options }) => useCioClient({ apiKey, options }), {
       initialProps: { apiKey: key, options: clientOptions },
     });
 

src/components/CioPlp/CioPlpProvider.tsx

@@ -21,11 +21,11 @@ export default function CioPlpProvider(
   } = props;
   const [cioClientOptions, setCioClientOptions] = useState({});
 
-  const cioClient = useCioClient(apiKey);
+  const cioClient = useCioClient({ apiKey, cioClient: customCioClient, options: cioClientOptions });
 
   const contextValue = useMemo(
     (): PlpContextValue => ({
-      cioClient: customCioClient || cioClient,
+      cioClient,
       cioClientOptions,
       setCioClientOptions,
       staticRequestConfigs,
@@ -36,7 +36,6 @@ export default function CioPlpProvider(
     }),
     [
       cioClient,
-      customCioClient,
       cioClientOptions,
       itemFieldGetters,
       formatters,

src/hooks/useCioClient.ts

@@ -6,29 +6,35 @@ import {
 import { useMemo } from 'react';
 import version from '../version';
 
-export type CioClientConfig = { apiKey?: string };
-type UseCioClient = (
-  apiKey: string,
-  options?: Omit<ConstructorClientOptions, 'apiKey' | 'sendTrackingEvents' | 'version'>,
-) => Nullable<ConstructorIOClient> | never;
+type UseCioClientProps = {
+  apiKey?: string;
+  cioClient?: any;
+  options?: Omit<ConstructorClientOptions, 'apiKey' | 'sendTrackingEvents' | 'version'>;
+};
+
+type UseCioClient = (props: UseCioClientProps) => Nullable<ConstructorIOClient> | never;
 
-const useCioClient: UseCioClient = (apiKey, options?) => {
-  if (!apiKey) {
-    throw new Error('Api Key required');
+const useCioClient: UseCioClient = ({ apiKey, cioClient, options } = {}) => {
+  if (!apiKey && !cioClient) {
+    throw new Error('Api Key or Constructor Client required');
   }
 
   const memoizedCioClient = useMemo(() => {
+    if (cioClient) return cioClient;
     if (apiKey && typeof window !== 'undefined') {
-      return new ConstructorIOClient({
-        apiKey,
-        sendTrackingEvents: true,
-        version: `cio-ui-plp-${version}`,
-        ...options,
-      });
+      return (
+        cioClient ||
+        new ConstructorIOClient({
+          apiKey,
+          sendTrackingEvents: true,
+          version: `cio-ui-plp-${version}`,
+          ...options,
+        })
+      );
     }
 
     return null;
-  }, [apiKey, options]);
+  }, [apiKey, cioClient, options]);
   return memoizedCioClient!;
 };
 

src/hooks/useCioPlp.ts

@@ -3,23 +3,28 @@ import {
   IBrowseParameters,
   SearchParameters,
   Nullable,
+  ConstructorClientOptions,
 } from '@constructor-io/constructorio-client-javascript/lib/types';
 import useCioClient from './useCioClient';
 import useSearchResults from './useSearchResults';
 import useBrowseResults from './useBrowseResults';
 
-export type CioPlpConfigs = { apiKey?: string };
+export type CioPlpConfigs = {
+  apiKey?: string;
+  cioClient: any;
+  options: Omit<ConstructorClientOptions, 'apiKey' | 'sendTrackingEvents' | 'version'>;
+};
 export type UseCioPlpHook = { cioClient: Nullable<ConstructorIOClient> };
 
 type UseCioPlp = (configs: CioPlpConfigs) => UseCioPlpHook;
 
 const useCioPlp: UseCioPlp = (configs) => {
-  const { apiKey } = configs;
+  const { apiKey, cioClient: customClient, options } = configs;
   if (!apiKey) {
-    throw new Error('Api Key required');
+    throw new Error('Api Key or Constructor Client required');
   }
 
-  const cioClient = useCioClient(apiKey);
+  const cioClient = useCioClient({ apiKey, cioClient: customClient, options });
   const useCustomSearchResults = (query: string, searchParams: SearchParameters) =>
     useSearchResults({ query, searchParams });
   const useCustomBrowseResults = (