@wise/dynamic-flow-client-internal 3.8.0-experimental-6700be9 → 3.9.0-experimental-bd037e3

package/README.md

@@ -58,7 +58,7 @@ import {
   translations as dynamicFlowsTranslations,
 } from '@wise/dynamic-flow-client-internal';
 
-const messages = getLocalisedMessages(locale, [componentTranslations, dynamicFlowsTranslations])
+const messages = getLocalisedMessages(locale, [componentTranslations, dynamicFlowsTranslations]);
 
 return (
   <Provider i18n={{ locale, messages }}>
@@ -73,7 +73,7 @@ return (
 
 ### For non-CRAB apps
 
-You'll need to merge the '@transferwise/components' translations with the '@wise/dynamic-flow-client' translations.  
+You'll need to merge the '@transferwise/components' translations with the '@wise/dynamic-flow-client' translations.
 
 ```js
 import {
@@ -238,6 +238,55 @@ 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   |
 
+## Using Dynamic Flow with a ref
+
+**Note:** this only works with `DynamicFlowRevamp`.
+
+If you need to extract the submittable data outside of a submission, you can do so by providing us with a ref. This will give you access to two methods: `getValue` and `validate`. For example:
+
+```tsx
+import type { DynamicFlowController } from '@wise/dynamic-flow-client-internal';
+import { DynamicFlowRevamp } from '@wise/dynamic-flow-client-internal';
+import { useRef } from 'react';
+
+function DynamicFlowWithRef() {
+  const ref = useRef<DynamicFlowController | null>(null);
+
+  return (
+    <>
+      <DynamicFlowRevamp
+          ref={ref}
+          flowId={"id"}
+          customFetch={fetch}
+          initialStep={selectedStep}
+          onEvent={(eventName, props) => {
+            // Note - this event will only be fired if you provide a ref
+            if (eventName === 'Dynamic Flow - Value Changed') {
+              // Value has changed.
+            }
+          }}
+          onCompletion={(error) => console.error(error)}
+          onCompletion={() => console.log('Completed')}
+      />
+      <Button
+        onClick={async () => {
+          // This will get the value, whether or not the form is valid
+          const value = (await ref.current?.getValue()) ?? null);
+
+          // This will trigger validation of the form and show any validation messages to the user.
+          // The response is a boolean indicating whether or not the form is valid.
+          const isValid = ref.current?.validate();
+
+          // Whatever you want to do with value
+        }}
+      >
+        Log value
+      </Button>
+    </>
+  );
+}
+```
+
 ## Contributing
 
 We love contributions! Check out `CONTRIBUTING.md` for more information.

package/build/dynamicFlow/DynamicFlow.js

@@ -11,13 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DynamicFlowRevamp as DynamicFlowCoreRevamp, DynamicFlow as DynamicFlowCoreLegacy, } from '@wise/dynamic-flow-client';
+import { forwardRef } from 'react';
 export function DynamicFlowLegacy(props) {
     var _a = props.customFetch, customFetch = _a === void 0 ? globalThis.fetch : _a;
     var coreProps = __assign(__assign({}, props), { httpClient: customFetch });
     return _jsx(DynamicFlowCoreLegacy, __assign({}, coreProps));
 }
-export function DynamicFlowRevamp(props) {
+export var DynamicFlowRevamp = forwardRef(function DynamicFlowRevamp(props, ref) {
     var _a = props.customFetch, customFetch = _a === void 0 ? globalThis.fetch : _a;
     var coreProps = __assign(__assign({}, props), { httpClient: customFetch });
-    return _jsx(DynamicFlowCoreRevamp, __assign({}, coreProps));
-}
+    return _jsx(DynamicFlowCoreRevamp, __assign({ ref: ref }, coreProps));
+});

package/build/main.js

@@ -51,17 +51,18 @@ var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
 
 // src/dynamicFlow/DynamicFlow.tsx
 var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlow, __spreadValues({}, coreProps));
 }
-function DynamicFlowRevamp(props) {
+var DynamicFlowRevamp = (0, import_react.forwardRef)(function DynamicFlowRevamp2(props, ref) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlowRevamp, __spreadValues({}, coreProps));
-}
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlowRevamp, __spreadValues({ ref }, coreProps));
+});
 
 // src/index.ts
 var makeCustomFetch = import_dynamic_flow_client2.makeHttpClient;

package/build/main.min.js

@@ -1 +1 @@
-"use strict";var n=Object.defineProperty,P=Object.defineProperties,C=Object.getOwnPropertyDescriptor,f=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertyNames,s=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var F=(t,o,i)=>o in t?n(t,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[o]=i,c=(t,o)=>{for(var i in o||(o={}))w.call(o,i)&&F(t,i,o[i]);if(s)for(var i of s(o))R.call(o,i)&&F(t,i,o[i]);return t},p=(t,o)=>P(t,f(o));var g=(t,o)=>{for(var i in o)n(t,i,{get:o[i],enumerable:!0})},L=(t,o,i,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of v(o))!w.call(t,e)&&e!==i&&n(t,e,{get:()=>o[e],enumerable:!(r=C(o,e))||r.enumerable});return t};var u=t=>L(n({},"__esModule",{value:!0}),t);var W={};g(W,{DynamicFlow:()=>l,DynamicFlowLegacy:()=>l,DynamicFlowRevamp:()=>D,JsonSchemaForm:()=>a.JsonSchemaForm,isValidSchema:()=>a.isValidSchema,makeCustomFetch:()=>I,translations:()=>a.translations});module.exports=u(W);var h=require("@wise/dynamic-flow-client"),a=require("@wise/dynamic-flow-client");var m=require("@wise/dynamic-flow-client");var y=require("react/jsx-runtime");function l(t){let{customFetch:o=globalThis.fetch}=t,i=p(c({},t),{httpClient:o});return(0,y.jsx)(m.DynamicFlow,c({},i))}function D(t){let{customFetch:o=globalThis.fetch}=t,i=p(c({},t),{httpClient:o});return(0,y.jsx)(m.DynamicFlowRevamp,c({},i))}var I=h.makeHttpClient;
+"use strict";var m=Object.defineProperty,f=Object.defineProperties,C=Object.getOwnPropertyDescriptor,R=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertyNames,s=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var w=(t,o,i)=>o in t?m(t,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[o]=i,n=(t,o)=>{for(var i in o||(o={}))F.call(o,i)&&w(t,i,o[i]);if(s)for(var i of s(o))g.call(o,i)&&w(t,i,o[i]);return t},p=(t,o)=>f(t,R(o));var d=(t,o)=>{for(var i in o)m(t,i,{get:o[i],enumerable:!0})},L=(t,o,i,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of v(o))!F.call(t,e)&&e!==i&&m(t,e,{get:()=>o[e],enumerable:!(c=C(o,e))||c.enumerable});return t};var u=t=>L(m({},"__esModule",{value:!0}),t);var I={};d(I,{DynamicFlow:()=>r,DynamicFlowLegacy:()=>r,DynamicFlowRevamp:()=>h,JsonSchemaForm:()=>a.JsonSchemaForm,isValidSchema:()=>a.isValidSchema,makeCustomFetch:()=>x,translations:()=>a.translations});module.exports=u(I);var P=require("@wise/dynamic-flow-client"),a=require("@wise/dynamic-flow-client");var l=require("@wise/dynamic-flow-client"),D=require("react");var y=require("react/jsx-runtime");function r(t){let{customFetch:o=globalThis.fetch}=t,i=p(n({},t),{httpClient:o});return(0,y.jsx)(l.DynamicFlow,n({},i))}var h=(0,D.forwardRef)(function(o,i){let{customFetch:c=globalThis.fetch}=o,e=p(n({},o),{httpClient:c});return(0,y.jsx)(l.DynamicFlowRevamp,n({ref:i},e))});var x=P.makeHttpClient;

package/build/main.mjs

@@ -27,17 +27,18 @@ import {
   DynamicFlowRevamp as DynamicFlowCoreRevamp,
   DynamicFlow as DynamicFlowCoreLegacy
 } from "@wise/dynamic-flow-client";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
   return /* @__PURE__ */ jsx(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
 }
-function DynamicFlowRevamp(props) {
+var DynamicFlowRevamp = forwardRef(function DynamicFlowRevamp2(props, ref) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ jsx(DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
-}
+  return /* @__PURE__ */ jsx(DynamicFlowCoreRevamp, __spreadValues({ ref }, coreProps));
+});
 
 // src/index.ts
 var makeCustomFetch = makeHttpClient;

package/build/stories/DynamicFlowWithRef.story.js

@@ -0,0 +1,102 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { layouts, features, examples, schemas } from '@wise/dynamic-flow-fixtures';
+import { fixtureHttpClient } from './utils/fixtureHttpClient';
+import { useRef } from 'react';
+import { Button } from '@transferwise/components';
+import { DynamicFlowRevamp } from '../dynamicFlow/DynamicFlow';
+var fixtures = __assign(__assign(__assign(__assign({}, examples), schemas), layouts), features);
+function DynamicFlowWithRef(_a) {
+    var _this = this;
+    var _b = _a.initialStepName, initialStepName = _b === void 0 ? '' : _b;
+    var selectedStep = (fixtures[initialStepName] || {});
+    var ref = useRef(null);
+    var props = {
+        flowId: 'storybook',
+        customFetch: fixtureHttpClient,
+        onCompletion: action('onCompletion'),
+        onError: action('onError'),
+        onEvent: action('onEvent'),
+        onLog: action('onLog'),
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DynamicFlowRevamp, __assign({ ref: ref, initialStep: selectedStep }, props)), _jsx(Button, { onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                    var _a;
+                    var _b, _c, _d;
+                    return __generator(this, function (_e) {
+                        switch (_e.label) {
+                            case 0:
+                                _a = action('getValue');
+                                return [4 /*yield*/, ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.getValue())];
+                            case 1:
+                                _a.apply(void 0, [(_c = (_e.sent())) !== null && _c !== void 0 ? _c : null]);
+                                action('validate')((_d = ref.current) === null || _d === void 0 ? void 0 : _d.validate());
+                                return [2 /*return*/];
+                        }
+                    });
+                }); }, children: "Log value" })] }));
+}
+var meta = {
+    title: 'Dynamic Flow With Ref',
+    component: DynamicFlowWithRef,
+};
+export var AllFixtures = {
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures),
+        },
+    },
+    args: { initialStepName: Object.keys(fixtures)[1] },
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export default meta;

package/build/types/dynamicFlow/DynamicFlow.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type DynamicFlowProps as DynamicFlowCoreLegacyProps, type DynamicFlowRevampProps as DynamicFlowCoreRevampProps, type DynamicFlowRevampPropsWithInitialAction, type DynamicFlowRevampPropsWithInitialStep } from '@wise/dynamic-flow-client';
+import { type DynamicFlowProps as DynamicFlowCoreLegacyProps, type DynamicFlowRevampProps as DynamicFlowCoreRevampProps, type DynamicFlowRevampPropsWithInitialAction, type DynamicFlowRevampPropsWithInitialStep, type DynamicFlowController } from '@wise/dynamic-flow-client';
 import type { DynamicFlowPropsWithInitialAction, DynamicFlowPropsWithInitialStep } from '@wise/dynamic-flow-client/build/types/legacy/dynamic-flow-types';
 export type DynamicFlowLegacyProps = (Omit<DynamicFlowPropsWithInitialAction, 'httpClient'> | Omit<DynamicFlowPropsWithInitialStep, 'httpClient'>) & {
     customFetch?: DynamicFlowCoreLegacyProps['httpClient'];
@@ -8,4 +8,4 @@ export type DynamicFlowRevampProps = (Omit<DynamicFlowRevampPropsWithInitialActi
     customFetch?: DynamicFlowCoreRevampProps['httpClient'];
 };
 export declare function DynamicFlowLegacy(props: DynamicFlowLegacyProps): JSX.Element;
-export declare function DynamicFlowRevamp(props: DynamicFlowRevampProps): JSX.Element;
+export declare const DynamicFlowRevamp: import("react").ForwardRefExoticComponent<DynamicFlowRevampProps & import("react").RefAttributes<DynamicFlowController>>;

package/build/types/index.d.ts

@@ -1,5 +1,7 @@
+import { type DynamicFlowController } from '@wise/dynamic-flow-client';
 export type { DynamicFlowProps, Step, InitialAction } from '@wise/dynamic-flow-client';
 export { translations, JsonSchemaForm, isValidSchema } from '@wise/dynamic-flow-client';
 export type { DynamicFlowLegacyProps as WiseDynamicFlowProps, DynamicFlowLegacyProps, DynamicFlowRevampProps, } from './dynamicFlow/DynamicFlow';
 export { DynamicFlowLegacy as DynamicFlow, DynamicFlowLegacy, DynamicFlowRevamp, } from './dynamicFlow/DynamicFlow';
 export declare const makeCustomFetch: (baseUrl: string, additionalHeaders?: HeadersInit | undefined) => typeof fetch;
+export type { DynamicFlowController };

package/build/types/stories/DynamicFlowWithRef.story.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { StoryObj, Meta } from '@storybook/react';
+declare function DynamicFlowWithRef({ initialStepName }: {
+    initialStepName?: string | undefined;
+}): JSX.Element;
+declare const meta: Meta<typeof DynamicFlowWithRef>;
+export declare const AllFixtures: StoryObj<typeof DynamicFlowWithRef>;
+export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "3.8.0-experimental-6700be9",
+  "version": "3.9.0-experimental-bd037e3",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -72,7 +72,8 @@
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "typescript": "5.1.6",
     "webpack": "5.91.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-types": "2.14.0"
   },
   "peerDependencies": {
     "react": "^18",
@@ -80,7 +81,7 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "3.8.0-experimental-6700be9"
+    "@wise/dynamic-flow-client": "3.9.0-experimental-bd037e3"
   },
   "scripts": {
     "dev": "storybook dev -p 3005",