@wise/dynamic-flow-client-internal 1.0.0 → 1.1.1

package/README.md

@@ -84,7 +84,7 @@ DF can be initialised with `initialAction` (recommended) or with an `initialStep
 ```tsx
 <DynamicFlow
   initialAction={{ method: 'GET', url: '/my-amazing-new-flow' }}
-  httpClient={(...args) => fetch(...args)}
+  customFetch={(...args) => fetch(...args)}
   onCompletion={(result) => {
     console.log('Flow exited with', result);
   }}
@@ -101,39 +101,43 @@ In some cases you may want to obtain the initial step yourself, and then pass it
 ```tsx
 <DynamicFlow
   initialStep={someInitialStep}
-  httpClient={...}
+  customFetch={...}
   onCompletion={...}
   onError={...}
 />
 ```
 
-### The `httpClient`
+### The `customFetch`
 
-You must pass an http client. This can be `window.fetch` itself or some wrapper function where you inject authorisation headers and anything else you many need.
+You probably want to pass a custom fetch function. This would allow you to add additional request headers to each network request and possibly prefix a base URL to relative paths.
 
-You can take advantage of the `makeHttpClient` utility function. This function takes a `baseUrl` and `additionalHeaders` arguments. The `baseUrl` will be prefixed to any relative request URLs. Absolute URLs will not be altered. The `additionalHeaders` parameter can be used to add any request headers you need in all requests, such as `{ 'X-Access-Token': 'Tr4n5f3rw153' }`:
+You can take advantage of the `makeCustomFetch` utility function. This function takes a `baseUrl` and `additionalHeaders` arguments. The `baseUrl` will be prefixed to any relative request URLs. Absolute URLs will not be altered. The `additionalHeaders` parameter can be used to add any request headers you need in all requests, such as `{ 'X-Access-Token': 'Tr4n5f3rw153' }`:
 
 ```tsx
-import { makeHttpClient, DynamicFlow } from '@wise/dynamic-flow-client';
+import { makeCustomFetch, DynamicFlow } from '@wise/dynamic-flow-client-internal';
 
-const myHttpClient = makeHttpClient('/my-base-url', { 'X-Access-Token': 'Tr4n5f3rw153' });
+const customFetch = makeCustomFetch('/gateway', {
+  'Accept-Language': currentLanguage,
+  'X-Access-Token': 'Tr4n5f3rw153',
+  'X-Visual-Context': 'personal::light'
+ });
 
 ...
 
 <DynamicFlow
-  initialAction={{ method: 'GET', url: '/my-amazing-new-flow' }}
-  httpClient={myHttpClient}
+  initialAction={{ method: 'GET', url: '/my-flow' }}
+  customFetch={customFetch}
   onCompletion={...}
   onError={...}
 />
 ```
 
-#### Using a custom `httpClient`
+#### Writing your own `customFetch` function
 
-If you want to write your own `httpClient` (or if you're writing mocks), it's important that you return proper `Response` objects, and that you **do not throw**. Errors should result in a response with an error status code and potentially a body with an error message. For example:
+If you want to write your own `customFetch` (or if you're writing mocks), it's important that you return proper `Response` objects, and that you **do not throw**. Errors should result in a response with an error status code and potentially a body with an error message. For example:
 
 ```tsx
-const mockHttpClient = (input, init) => {
+const mockCustomFetch = (input, init) => {
   switch (input) {
     case '/standard':
       return Promise.resolve(new Response(init.body));
@@ -145,17 +149,18 @@ const mockHttpClient = (input, init) => {
   }
 };
 ```
+
 Also, please make sure your mocks return a new `Response` instace every time. This is because responses are mutated when we parse their body, and they cannot be parsed a second time.
 
 ```ts
 const initialResponse = new Response(JSON.stringify(initialStep));
 // ❌ wrong - the same instance is returned on each request
-const mockHttpClient = (input, init) => Promise.resolve(initialResponse);
+const mockCustomFetch = (input, init) => Promise.resolve(initialResponse);
 ```
 
 ```ts
 // ✅ correct - a new instance is returned on each request
-const mockHttpClient = (input, init) => Promise.resolve(new Response(JSON.stringify(initialStep)));
+const mockCustomFetch = (input, init) => Promise.resolve(new Response(JSON.stringify(initialStep)));
 ```
 
 ### Telemetry
@@ -207,8 +212,6 @@ type LoaderConfig = {
 | `initial`    | boolean | Whether or not to display the Loader component while loading the initial step. | true    |
 | `submission` | boolean | Whether or not to display the Loader component during form submissions.        | false   |
 
-
 ## Contributing
 
 We love contributions! Check out `CONTRIBUTING.md` for more information.
-