@wise/dynamic-flow-client 0.4.4 → 0.5.0

package/README.md

@@ -75,18 +75,13 @@ return (
 
 ## Configuring your Flow
 
-There are few ways to initialise DF:
-
-- with a `initialAction` or with an `initialStep`
-- with a `baseUrl` or with a `fetcher` function
-
-We recommend using a `initialAction` and a `fetcher` function.
+DF can be initialised with `initialAction` (recommended) or with an `initialStep`.
 
 ```tsx
 <DynamicFlow
   initialAction={{ method: 'GET', url: '/my-amazing-new-flow' }}
-  fetcher={(...args) => fetch(...args)}
-  onComplete={(result) => {
+  httpClient={(...args) => fetch(...args)}
+  onCompletion={(result) => {
     console.log('Flow exited with', result);
   }}
   onError={(error, statusCode) => {
@@ -102,37 +97,37 @@ In some cases you may want to obtain the initial step yourself, and then pass it
 ```tsx
 <DynamicFlow
   initialStep={someInitialStepIfoundLayingAroundHere}
-  fetcher={...}
-  onComplete={...}
+  httpClient={...}
+  onCompletion={...}
   onError={...}
 />
 ```
 
-### The `fetcher` function prop
+### The `httpClient` function prop
 
-You must pass a fetcher function. This can be `window.fetch` itself or some wrapper function where you inject authorisation headers and anything else you many need.
+You must pass a `httpClient` function. This can be `window.fetch` itself or some wrapper function where you inject authorisation headers and anything else you many need.
 
-You can take advantage of the provided `makeFetcher` utility function. This function takes `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.
+You can take advantage of the provided `makeHttpClient` utility function. This function takes `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.
 
 ```tsx
-import { makeFetcher, DynamicFlow } from '@wise/dynamic-flow-client';
+import { makeHttpClient, DynamicFlow } from '@wise/dynamic-flow-client';
 
-const myFetcher = makeFetcher('/my-base-url', { 'X-Access-Token': 'an-access-token' });
+const myHttpClient = makeHttpClient('/my-base-url', { 'X-Access-Token': 'an-access-token' });
 
 <DynamicFlow
   initialAction={{ method: 'GET', url: '/flow-starting-url' }}
-  fetcher={myFetcher}
-  onComplete={...}
+  httpClient={myHttpClient}
+  onCompletion={...}
   onError={...}
 />
 ```
 
-#### Custom `fetcher` functions
+#### Custom `httpClient` functions
 
-If you want to write your own fetcher function (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 `httpClient` function (or if you're writing mocks), it's important that you return actual `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 mockFetcher = (input, init) => {
+const mockHttpClient = (input, init) => {
   switch (input) {
     case '/standard':
       return Promise.resolve(new Response(init.body));
@@ -150,12 +145,12 @@ Also, please make sure your mocks return a new `Response` instace every time. Th
 ```ts
 const initialResponse = new Response(JSON.stringify(initialStep));
 // ❌ wrong - the same instance is returned on each request
-const mockFetcher = (input, init) => Promise.resolve(initialResponse);
+const mockHttpClient = (input, init) => Promise.resolve(initialResponse);
 ```
 
 ```ts
 // ✅ correct - a new instance is returned on each request
-const mockFetcher = (input, init) => Promise.resolve(new Response(JSON.stringify(initialStep)));
+const mockHttpClient = (input, init) => Promise.resolve(new Response(JSON.stringify(initialStep)));
 ```
 
 ### Telemetry

package/build/main.js

@@ -535,7 +535,7 @@ __export(src_exports, {
   fixtures: () => fixtures,
   inlineReferences: () => inlineReferences,
   isValidSchema: () => isValidSchema,
-  makeFetcher: () => makeFetcher,
+  makeHttpClient: () => makeHttpClient,
   translations: () => i18n_default
 });
 module.exports = __toCommonJS(src_exports);
@@ -910,7 +910,7 @@ function useEventDispatcher() {
 }
 var getEventDispatcher = (onEvent, metadata) => (eventName, properties = {}) => onEvent(eventName, __spreadValues(__spreadValues({}, metadata), properties));
 
-// src/common/contexts/fetcherContexts/FetcherContexts.tsx
+// src/common/contexts/httpClientContext/HttpClientContext.tsx
 var import_react4 = require("react");
 
 // src/common/utils/api-utils.ts
@@ -926,8 +926,8 @@ function isRelativePath(url = "") {
   ) === false;
 }
 
-// src/common/makeFetcher/makeFetcher.ts
-var makeFetcher = (baseUrl, additionalHeaders) => (input, init) => {
+// src/common/makeHttpClient/makeHttpClient.ts
+var makeHttpClient = (baseUrl, additionalHeaders) => (input, init) => {
   const resource = applyBaseUrl(input, baseUrl || "");
   const headers = mergeHeaders(init == null ? void 0 : init.headers, additionalHeaders);
   return fetch(resource, __spreadProps(__spreadValues({}, init || {}), { headers }));
@@ -946,25 +946,22 @@ var mergeHeaders = (initHeaders, additionalHeaders) => {
   return headers;
 };
 
-// src/common/contexts/fetcherContexts/FetcherContexts.tsx
+// src/common/contexts/httpClientContext/HttpClientContext.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var FetcherContext = (0, import_react4.createContext)(void 0);
-var FetcherProvider = ({ fetcher, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FetcherContext.Provider, { value: fetcher, children });
+var HttpClientContext = (0, import_react4.createContext)(void 0);
+var HttpClientProvider = ({ httpClient, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HttpClientContext.Provider, { value: httpClient, children });
 };
-var FetcherProviderFromBaseUrl = ({
-  baseUrl,
-  children
-}) => {
-  const fetcher = (0, import_react4.useMemo)(() => makeFetcher(baseUrl), [baseUrl]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FetcherContext.Provider, { value: fetcher, children });
+var HttpClientProviderFromBaseUrl = ({ baseUrl, children }) => {
+  const httpClient = (0, import_react4.useMemo)(() => makeHttpClient(baseUrl), [baseUrl]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HttpClientContext.Provider, { value: httpClient, children });
 };
-var useFetcher = () => {
-  const contextFetch = (0, import_react4.useContext)(FetcherContext);
+var useHttpClient = () => {
+  const contextFetch = (0, import_react4.useContext)(HttpClientContext);
   return contextFetch || fetch;
 };
-var useHasFetcherProvider = () => {
-  const context = (0, import_react4.useContext)(FetcherContext);
+var useHasHttpClientProvider = () => {
+  const context = (0, import_react4.useContext)(HttpClientContext);
   return !!context;
 };
 
@@ -1783,11 +1780,11 @@ function useExternal(url) {
 // src/common/hooks/useExternalStepPolling/useExternalStepPolling.tsx
 var import_react8 = require("react");
 function useExternalStepPolling(polling, onAction) {
-  const fetcher = useFetcher();
+  const httpClient = useHttpClient();
   const asyncFn = (0, import_react8.useMemo)(() => {
     if (polling) {
       return () => {
-        return fetcher(polling.url).then((response) => {
+        return httpClient(polling.url).then((response) => {
           if (response.ok) {
             try {
               return response.json();
@@ -1802,7 +1799,7 @@ function useExternalStepPolling(polling, onAction) {
     } else {
       return void 0;
     }
-  }, [polling, fetcher]);
+  }, [polling, httpClient]);
   const onPollingResponse = (0, import_react8.useCallback)(
     (pollingResponse) => {
       const responseHandlers = (polling == null ? void 0 : polling.responseHandlers) || [];
@@ -3824,7 +3821,7 @@ var import_jsx_runtime24 = require("react/jsx-runtime");
 var UploadInputAdapter = (props) => {
   const {
     id,
-    fetcher = fetch,
+    httpClient = fetch,
     httpOptions,
     fileId,
     idProperty,
@@ -3839,7 +3836,7 @@ var UploadInputAdapter = (props) => {
   const files = (0, import_react15.useMemo)(() => fileId ? [{ id: fileId, status: import_components10.Status.SUCCEEDED }] : [], [fileId]);
   const uploadFile = (formData) => {
     onEvent("Dynamic Flow - PersistAsync", { status: "pending", schemaId: id });
-    return fetcher(`${httpOptions.url}`, {
+    return httpClient(`${httpOptions.url}`, {
       method: httpOptions.method || "POST",
       body: formData
     }).then((response) => {
@@ -3880,7 +3877,7 @@ var PersistAsyncBlobSchema = (props) => {
   const [persistAsyncValidations, setPersistAsyncValidations] = (0, import_react16.useState)(null);
   const [validations, setValidations] = (0, import_react16.useState)([]);
   const [changed, setChanged] = (0, import_react16.useState)(false);
-  const fetcher = useFetcher();
+  const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const refreshValidations = () => {
     if (props.submitted) {
@@ -3928,7 +3925,7 @@ var PersistAsyncBlobSchema = (props) => {
         usLabel: props.schema.title || props.schema.persistAsync.schema.title,
         usPlaceholder: props.schema.description || props.schema.persistAsync.schema.description,
         httpOptions: { url, method, fileInputName: props.schema.persistAsync.param },
-        fetcher,
+        httpClient,
         onSuccess,
         onFailure,
         onCancel
@@ -4199,7 +4196,7 @@ var ValidationAsyncSchema = (props) => {
   const [validationAsyncErrors, setValidationAsyncErrors] = (0, import_react18.useState)(null);
   const [fieldSubmitted, setFieldSubmitted] = (0, import_react18.useState)(false);
   const [abortController, setAbortController] = (0, import_react18.useState)(null);
-  const fetcher = useFetcher();
+  const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const logger = useLogger();
   const getValidationAsyncResponse = async (currentValidationAsyncModel, validationAsyncSpec) => {
@@ -4215,7 +4212,7 @@ var ValidationAsyncSchema = (props) => {
       );
     }
     onEvent("Dynamic Flow - ValidationAsync", { status: "pending" });
-    const response = await fetcher(validationAsyncSpec.url, {
+    const response = await httpClient(validationAsyncSpec.url, {
       method: validationAsyncSpec.method || "POST",
       headers: { "Content-Type": "application/json" },
       body: validationAsyncSpec.method === "GET" ? void 0 : JSON.stringify(requestBody),
@@ -4383,7 +4380,7 @@ var JsonSchemaForm = (props) => {
     disabled: false,
     baseUrl: ""
   }, props);
-  if (useHasFetcherProvider() || schemaProps.baseUrl == null) {
+  if (useHasHttpClientProvider() || schemaProps.baseUrl == null) {
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GenericSchema_default, __spreadValues({}, schemaProps));
   }
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -4403,7 +4400,7 @@ var Providers = ({ baseUrl, onEvent, onLog, children }) => {
     {
       metadata: { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm" },
       onEvent: onEvent != null ? onEvent : noop2,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FetcherProviderFromBaseUrl, { baseUrl, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children })
     }
   ) });
 };
@@ -4466,11 +4463,11 @@ var import_react19 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var DynamicImage = ({ component: image }) => {
   const { url, size, text, margin } = image;
-  const fetcher = useFetcher();
+  const httpClient = useHttpClient();
   const [imageSource, setImageSource] = (0, import_react19.useState)("");
   (0, import_react19.useEffect)(() => {
-    void getImageSource(fetcher, url).then(setImageSource);
-  }, [url, fetcher]);
+    void getImageSource(httpClient, url).then(setImageSource);
+  }, [url, httpClient]);
   const imageProps = {
     alt: text || "",
     src: imageSource,
@@ -4490,11 +4487,11 @@ var readImageBlobAsDataURL = (imageBlob) => {
     reader.readAsDataURL(imageBlob);
   });
 };
-var getImageSource = async (fetcher, imageUrl) => {
+var getImageSource = async (httpClient, imageUrl) => {
   var _a;
   try {
     if (isRelativePath(imageUrl) || (imageUrl == null ? void 0 : imageUrl.indexOf(`${(_a = window == null ? void 0 : window.location) == null ? void 0 : _a.origin}/`)) === 0) {
-      return fetcher(imageUrl, {
+      return httpClient(imageUrl, {
         method: "GET",
         headers: { "Content-Type": "image/image" },
         credentials: "same-origin"
@@ -4588,10 +4585,10 @@ var DynamicLayout = (props) => {
         return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", {}, getKey(component));
     }
   };
-  if (useHasFetcherProvider() || baseUrl == null) {
+  if (useHasHttpClientProvider() || baseUrl == null) {
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: components.map(renderComponent) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FetcherProviderFromBaseUrl, { baseUrl, children: components.map(renderComponent) });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: components.map(renderComponent) });
   }
 };
 var DynamicLayout_default = DynamicLayout;
@@ -4882,7 +4879,7 @@ var controlTypesWithPersistOnChange = /* @__PURE__ */ new Set([
 ]);
 var PersistAsyncBasicSchema = (props) => {
   const intl = (0, import_react_intl15.useIntl)();
-  const fetcher = useFetcher();
+  const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const [persistAsyncModel, setPersistAsyncModel] = (0, import_react22.useState)(null);
   const previousPersistAsyncModel = usePrevious(persistAsyncModel);
@@ -4904,7 +4901,7 @@ var PersistAsyncBasicSchema = (props) => {
     setFieldSubmitted(true);
     try {
       onEvent("Dynamic Flow - PersistAsync", { status: "pending", schemaId: allOf_default.$id });
-      const persistAsyncFetch = fetcher(persistAsyncSpec.url, {
+      const persistAsyncFetch = httpClient(persistAsyncSpec.url, {
         method: persistAsyncSpec.method,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(requestBody),
@@ -4978,7 +4975,7 @@ var PersistAsyncBasicSchema_default = PersistAsyncBasicSchema;
 // src/common/hooks/usePersistAsync/usePersistAsync.ts
 var usePersistAsync = (persistAsync) => {
   const [abortController, setAbortController] = (0, import_react23.useState)(null);
-  const fetcher = useFetcher();
+  const httpClient = useHttpClient();
   const intl = (0, import_react_intl16.useIntl)();
   const { schema: schema2 } = persistAsync;
   async function handlePersistAsync(model) {
@@ -5010,7 +5007,7 @@ var usePersistAsync = (persistAsync) => {
   }
   async function performPersistAsync(payload) {
     try {
-      const response = await fetcher(persistAsync.url, constructFetchInit(payload));
+      const response = await httpClient(persistAsync.url, constructFetchInit(payload));
       if (!response.ok) {
         return handleHTTPError(response);
       }
@@ -5126,11 +5123,11 @@ var usePrevious = (value) => {
 // src/common/hooks/useStepPolling/useStepPolling.tsx
 var import_react26 = require("react");
 function useStepPolling(polling, onAction) {
-  const fetcher = useFetcher();
+  const httpClient = useHttpClient();
   const asyncFn = (0, import_react26.useMemo)(() => {
     if (polling) {
       return () => {
-        return fetcher(polling.url).then((response) => {
+        return httpClient(polling.url).then((response) => {
           if (response.ok) {
             return response.json().then((pollingResponse) => pollingResponse).catch((error) => null);
           } else {
@@ -5141,7 +5138,7 @@ function useStepPolling(polling, onAction) {
     } else {
       return void 0;
     }
-  }, [polling, fetcher]);
+  }, [polling, httpClient]);
   const onPollingResponse = (0, import_react26.useCallback)(
     (pollingResponse) => {
       if (pollingResponse == null ? void 0 : pollingResponse.action) {
@@ -6113,14 +6110,13 @@ var noop7 = () => {
 };
 var DynamicFlowComponent = ({
   flowId,
-  fetcher,
+  httpClient,
   flowUrl,
   initialAction,
   initialStep,
   loaderConfig,
   displayStepTitle = true,
-  onComplete,
-  onStepChange = noop7,
+  onCompletion,
   onError,
   onEvent = noop7,
   onLog = noop7
@@ -6160,7 +6156,7 @@ var DynamicFlowComponent = ({
   const triggerActionRequest = (0, import_react35.useCallback)(
     ({ action: action2, data, etag: etag2 }) => {
       const { url, method = "POST" } = action2;
-      return fetcher(url != null ? url : "", {
+      return httpClient(url != null ? url : "", {
         method,
         headers: __spreadValues({
           "accept-language": locale,
@@ -6171,7 +6167,7 @@ var DynamicFlowComponent = ({
         body: method === "GET" ? void 0 : JSON.stringify(data)
       });
     },
-    [fetcher, locale]
+    [httpClient, locale]
   );
   const fetchNextStep = async (action2, data = {}) => {
     setLoadingState(loadingState === "initial" ? "initial" : "submission");
@@ -6198,18 +6194,18 @@ var DynamicFlowComponent = ({
     try {
       const response = await triggerActionRequest({ action: action2, data });
       const exitResult = await parseExitResponse(response);
-      onCloseWithEvent(__spreadValues(__spreadValues({}, exitResult), action2.result));
+      dispatchEventAndComplete(__spreadValues(__spreadValues({}, exitResult), action2.result));
     } catch (error) {
       handleFetchError(error, "Error fetching exit result");
     }
   };
   const debouncedFetchRefresh = useDebouncedRefresh(fetchRefreshStep);
-  const onCloseWithEvent = (0, import_react35.useCallback)(
+  const dispatchEventAndComplete = (0, import_react35.useCallback)(
     (result) => {
       dispatchEvent("Dynamic Flow - Flow Finished", { result: "success" });
-      onComplete(result);
+      onCompletion(result);
     },
-    [onComplete, dispatchEvent]
+    [onCompletion, dispatchEvent]
   );
   (0, import_react35.useEffect)(() => {
     dispatchEvent("Dynamic Flow - Flow Started", {});
@@ -6222,7 +6218,7 @@ var DynamicFlowComponent = ({
       }, initialAction);
       void fetchNextStep(action2, action2.data);
     }
-  }, [flowUrl, fetcher, locale, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
+  }, [flowUrl, httpClient, locale, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
   const handleFetchResponse = async (response, fetchType) => {
     if (response.ok) {
       try {
@@ -6232,7 +6228,7 @@ var DynamicFlowComponent = ({
             void fetchNextStep(parsedResponse.action, parsedResponse.action.data);
             return;
           case "exit":
-            return onCloseWithEvent(parsedResponse.result);
+            return dispatchEventAndComplete(parsedResponse.result);
           case "step":
           default: {
             const { step: step32, etag: etag2 } = parsedResponse;
@@ -6246,9 +6242,7 @@ var DynamicFlowComponent = ({
     return handleErrorResponse(response, fetchType);
   };
   const updateStepAfterSubmission = (newStep, etag2) => {
-    const previousStep = step31;
     setStepAndEtag(newStep, etag2);
-    onStepChange(newStep, previousStep);
     setSubmitted(false);
     setLoadingState("idle");
     dispatchEvent("Dynamic Flow - Step Started", __spreadValues({ stepId: newStep.key }, newStep == null ? void 0 : newStep.analytics));
@@ -6350,7 +6344,7 @@ var DynamicFlowComponent = ({
         }
         return;
       }
-      onCloseWithEvent(result);
+      dispatchEventAndComplete(result);
       return;
     }
     if (isSubmissionMethod(method)) {
@@ -6367,7 +6361,7 @@ var DynamicFlowComponent = ({
     }
     void fetchNextStep(action2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(LogProvider, { flowId, stepId: step31 == null ? void 0 : step31.key, onLog, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DynamicFlowProvider, { loading: loadingState !== "idle", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FetcherProvider, { fetcher, children: loader !== null ? loader : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(LogProvider, { flowId, stepId: step31 == null ? void 0 : step31.key, onLog, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DynamicFlowProvider, { loading: loadingState !== "idle", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(HttpClientProvider, { httpClient, children: loader !== null ? loader : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     DynamicFlowStep,
     {
       step: step31,
@@ -6521,7 +6515,7 @@ var step3 = {
         ...buttons,
         {
           type: "paragraph",
-          text: "Press any buttons and see the fetcher calls below.",
+          text: "Press any buttons and see the httpClient calls below.",
           align: "center"
         }
       ]