[CSL-3049] Add support for cioJsClientOptions (#108)

Author: esezen

src/constants.ts

@@ -111,6 +111,7 @@ export const apiKeyDescription = `Pass an \`apiKey\` to request results from con
 export const cioJsClientDescription = `If you are already using an instance of the \`ConstructorIOClient\`, you can pass a \`cioJsClient\` instead of an \`apiKey\` to request results from constructor's servers
 
 > Note: when we say \`cioJsClient\`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)`;
+export const cioJsClientOptionsDescription = `If you don't want to create an instance of the \`ConstructorIOClient\` but still want to customize some of the options, you can pass a \`cioJsClientOptions\` object. You can learn more about the possible values [here under the parameters section](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html).`;
 export const placeholderDescription = `Pass a \`placeholder\` to override the default input field placeholder text shown to users before they start typing their query`;
 export const searchSuggestionsDescription = `Override default \`sections\` to only suggest search terms`;
 export const productsDescription = `Override default \`sections\` to only suggested products`;

src/hooks/useCioAutocomplete.ts

@@ -28,6 +28,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     openOnFocus,
     apiKey,
     cioJsClient,
+    cioJsClientOptions,
     placeholder = 'What can we help you find today?',
     sections = defaultSections,
     zeroStateSections,
@@ -37,7 +38,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
 
   const [query, setQuery] = useState('');
   const previousQuery = usePrevious(query);
-  const cioClient = useCioClient({ apiKey, cioJsClient } as CioClientConfig);
+  const cioClient = useCioClient({ apiKey, cioJsClient, cioJsClientOptions } as CioClientConfig);
 
   // Get autocomplete sections (autocomplete + recommendations + custom)
   const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = useSections(

src/hooks/useCioClient.ts

@@ -6,13 +6,16 @@ import { CioClientConfig } from '../types';
 
 type UseCioClient = (cioClientConfig: CioClientConfig) => Nullable<ConstructorIOClient>;
 
-const useCioClient: UseCioClient = ({ apiKey, cioJsClient }) => {
+const useCioClient: UseCioClient = ({ apiKey, cioJsClient, cioJsClientOptions }) => {
   if (!apiKey && !cioJsClient) {
     // eslint-disable-next-line no-console
     console.error('Either apiKey or cioJsClient is required');
   }
 
-  return useMemo(() => cioJsClient || getCioClient(apiKey), [apiKey, cioJsClient]);
+  return useMemo(
+    () => cioJsClient || getCioClient(apiKey, cioJsClientOptions),
+    [apiKey, cioJsClient, cioJsClientOptions]
+  );
 };
 
 export default useCioClient;

src/stories/Autocomplete/Component/index.stories.tsx

@@ -12,6 +12,7 @@ import {
   customStylesDescription,
   apiKey,
   onSubmitDefault as onSubmit,
+  cioJsClientOptionsDescription,
 } from '../../../constants';
 
 export default {
@@ -91,6 +92,16 @@ const args = { cioJsClient, onSubmit: ${functionStrings.onSubmit} };`,
   cioJsClientDescription
 );
 
+const cioJsClientOptions = { serviceUrl: 'https://ac.cnstrc.com' };
+
+export const ProvideCIOClientOptions = ComponentTemplate.bind({});
+ProvideCIOClientOptions.args = { apiKey, cioJsClientOptions, onSubmit };
+addComponentStoryDescription(
+  ProvideCIOClientOptions,
+  `const args = ${stringifyWithDefaults(ProvideCIOClientOptions.args)}`,
+  cioJsClientOptionsDescription
+);
+
 const placeholder = 'Custom placeholder';
 
 export const ProvideCustomPlaceHolder = ComponentTemplate.bind({});

src/stories/Autocomplete/Hook/index.stories.tsx

@@ -11,6 +11,7 @@ import {
   customStylesDescription,
   apiKey,
   onSubmitDefault as onSubmit,
+  cioJsClientOptionsDescription,
 } from '../../../constants';
 
 export default {
@@ -47,6 +48,16 @@ const args = { cioJsClient, onSubmit: ${functionStrings.onSubmit} };`,
   cioJsClientDescription
 );
 
+const cioJsClientOptions = { serviceUrl: 'https://ac.cnstrc.com' };
+
+export const ProvideCIOClientOptions = HooksTemplate.bind({});
+ProvideCIOClientOptions.args = { apiKey, cioJsClientOptions, onSubmit };
+addHookStoryCode(
+  ProvideCIOClientOptions,
+  `const args = ${stringifyWithDefaults(ProvideCIOClientOptions.args)}`,
+  cioJsClientOptionsDescription
+);
+
 const placeholder = 'Custom placeholder';
 
 export const ProvideCustomPlaceHolder = HooksTemplate.bind({});

src/types.ts

@@ -8,11 +8,16 @@ import {
   Product as ProductFromClient,
   Item as ItemBase,
   AutocompleteRequestType,
+  ConstructorClientOptions,
 } from '@constructor-io/constructorio-client-javascript/lib/types';
 
 export type { IAutocompleteParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
 
-export type CioClientConfig = { apiKey?: string; cioJsClient?: ConstructorIOClient };
+export type CioClientConfig = {
+  apiKey?: string;
+  cioJsClient?: ConstructorIOClient;
+  cioJsClientOptions?: ConstructorClientOptions;
+};
 
 export interface AdvancedParametersBase {
   numTermsWithGroupSuggestions?: number;

src/utils.ts

@@ -1,5 +1,8 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { AutocompleteRequestType } from '@constructor-io/constructorio-client-javascript/lib/types';
+import {
+  AutocompleteRequestType,
+  ConstructorClientOptions,
+} from '@constructor-io/constructorio-client-javascript/lib/types';
 import { isCustomSection } from './typeGuards';
 import { OnSubmit, Item, Section, UserDefinedSection, SectionsData } from './types';
 import version from './version';
@@ -123,12 +126,13 @@ export const disableStoryActions = (story) => {
   story.parameters.actions = { argTypesRegex: null };
 };
 
-export const getCioClient = (apiKey?: string) => {
+export const getCioClient = (apiKey?: string, cioJsClientOptions?: ConstructorClientOptions) => {
   if (apiKey) {
     const cioClient = new ConstructorIOClient({
       apiKey,
       sendTrackingEvents: true,
       version: `cio-ui-autocomplete-${version}`,
+      ...cioJsClientOptions,
     });
 
     // eslint-disable-next-line no-console