@wise/dynamic-flow-client-internal 0.0.0-experimental-20240319142919

package/README.md

@@ -0,0 +1,243 @@
+# Dynamic Flow Web Client for Wise
+
+This is the Wise Dynamic Flow web client. It provides a simple way to integrate a Dynamic Flow into your Wise web app.
+
+⚡ Access the latest deployed version of the [Dynamic Flow Playground](https://main--641de2ace0e1566a6a450fad.chromatic.com).
+
+## Integration
+
+1. Install `@wise/dynamic-flow-client-internal`.
+
+```
+# yarn
+yarn add @wise/dynamic-flow-client-internal
+
+# npm
+npm install @wise/dynamic-flow-client-internal
+
+# pnpm
+pnpm install @wise/dynamic-flow-client-internal
+```
+
+2. Install required peer dependencies (if not already installed). Please refer to setup instructions for `@transferwise/components` and `@transferwise/neptune-css` if installing up for the first time.
+
+```
+# yarn
+yarn add prop-types react react-dom react-intl
+yarn add @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css
+
+# npm
+npm install prop-types react react-dom react-intl
+npm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css
+
+# pnpm
+pnpm install prop-types react react-dom react-intl
+pnpm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css
+```
+
+**Note:** Keep in mind that some of these dependencies have their own peer dependencies. Don't forget to install those, for instance: `@transferwise/components` needs `@wise/art` and `@wise/components-theming`.
+
+```js
+// Should be imported once in your application
+import '@wise/dynamic-flow-client-internal/build/main.css';
+```
+
+The `DynamicFlow` component must be wraped in a Neptune `Provider` to support localisation, a `ThemeProvider` to provide theming, and a `SnackbarProvider` to ensure snackbars display correctly. Translations should be imported from both components and dynamic flows, merged, and passed to the `Provider` component (as below).
+
+### For CRAB apps, use the `getLocalisedMessages(...)` function for translations
+
+```js
+import {
+  Provider,
+  SnackbarProvider,
+  translations as componentTranslations,
+} from '@transferwise/components';
+import { getLocalisedMessages } from '@transferwise/crab/client';
+import {
+  DynamicFlow,
+  translations as dynamicFlowsTranslations,
+} from '@wise/dynamic-flow-client-internal';
+
+const messages = getLocalisedMessages(locale, [componentTranslations, dynamicFlowsTranslations])
+
+return (
+  <Provider i18n={{ locale, messages }}>
+    <ThemeProvider theme={theme} screenMode={screenMode}>
+      <SnackbarProvider>
+        <DynamicFlow {...props} />
+      </SnackbarProvider>
+    </ThemeProvider>
+  </Provider>
+);
+```
+
+### For non-CRAB apps
+
+You'll need to merge the '@transferwise/components' translations with the '@wise/dynamic-flow-client' translations.  
+
+```js
+import {
+  Provider,
+  SnackbarProvider,
+  translations as componentTranslations,
+} from '@transferwise/components';
+import {
+  DynamicFlow,
+  translations as dynamicFlowsTranslations,
+} from '@wise/dynamic-flow-client-internal';
+
+// create your messages object
+const messages: Record<string, string> = {
+  ...(componentTranslations[lang] || componentTranslations[lang.replace('-', '_')] || componentTranslations[lang.substring(0, 2)] || {}),
+  ...(translations[lang] || translations[lang.replace('-', '_')] || translations[lang.substring(0, 2)] || {}),
+}
+
+return (
+  <Provider i18n={{ locale, messages }}>
+    <ThemeProvider theme={theme} screenMode={screenMode}>
+      <SnackbarProvider>
+        <DynamicFlow {...props} />
+      </SnackbarProvider>
+    </ThemeProvider>
+  </Provider>
+);
+```
+
+## Configuring your Flow
+
+DF can be initialised with `initialAction` (recommended) or with an `initialStep`.
+
+```tsx
+<DynamicFlow
+  initialAction={{ method: 'GET', url: '/my-amazing-new-flow' }}
+  customFetch={(...args) => fetch(...args)}
+  onCompletion={(result) => {
+    console.log('Flow exited with', result);
+  }}
+  onError={(error, statusCode) => {
+    console.error('Flow Error:', error, 'status code', statusCode);
+  }}
+/>
+```
+
+### When to use `initialStep` instead of `initialAction`
+
+In some cases you may want to obtain the initial step yourself, and then pass it to DF component. In these cases you don't provide a `initialAction` since the next steps will result from interactions in the provided `initialStep`:
+
+```tsx
+<DynamicFlow
+  initialStep={someInitialStep}
+  customFetch={...}
+  onCompletion={...}
+  onError={...}
+/>
+```
+
+### The `customFetch`
+
+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 `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 { makeCustomFetch, DynamicFlow } from '@wise/dynamic-flow-client-internal';
+
+const customFetch = makeCustomFetch('/gateway', {
+  'Accept-Language': currentLanguage,
+  'X-Access-Token': 'Tr4n5f3rw153',
+  'X-Visual-Context': 'personal::light'
+ });
+
+...
+
+<DynamicFlow
+  initialAction={{ method: 'GET', url: '/my-flow' }}
+  customFetch={customFetch}
+  onCompletion={...}
+  onError={...}
+/>
+```
+
+#### Writing your own `customFetch` function
+
+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 mockCustomFetch = (input, init) => {
+  switch (input) {
+    case '/standard':
+      return Promise.resolve(new Response(init.body));
+    case '/exit':
+      return Promise.resolve(new Response(init.body, { headers: { 'x-df-exit': true } }));
+    case '/error':
+    default:
+      return Promise.resolve(new Response('An error has occurred.', { status: 500 }));
+  }
+};
+```
+
+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 mockCustomFetch = (input, init) => Promise.resolve(initialResponse);
+```
+
+```ts
+// ✅ correct - a new instance is returned on each request
+const mockCustomFetch = (input, init) => Promise.resolve(new Response(JSON.stringify(initialStep)));
+```
+
+### Telemetry
+
+The `DynamicFlow` component accepts two optional props: `onEvent` and `onLog` which can be used to track and log.
+
+In the example below we send tracking events to Mixpanel and logging events to Rollbar.
+
+```tsx
+<DynamicFlow
+  onEvent={(event, props) => mixpanel.track(event, props)}
+  onLog={(level, message, extra) => Rollbar[level](message, extra)}
+/>
+```
+
+Alternatively, you can log to the browser console:
+
+```ts
+onEvent={(event, props) => console.log(event, props)}
+onLog={(level, message, extra) => {
+  const levelToConsole = {
+    critical: console.error,
+    error: console.error,
+    warning: console.warn,
+    info: console.info,
+    debug: console.log,
+  } as const;
+  levelToConsole[level](message, extra);
+}}
+```
+
+### Loader configuration
+
+By default, DF will display a loading animation (The `Loader` component from Neptune) when the first step is loading. It will not display it during refresh-on-change or while submitting forms.
+
+You can change the defaults by passing a `loaderConfig` prop:
+
+```ts
+type LoaderConfig = {
+  size?: `xs | sm | md | lg | xl`;
+  initial?: boolean;
+  submission?: boolean;
+};
+```
+
+| property     | type    | notes                                                                          | default |
+| ------------ | ------- | ------------------------------------------------------------------------------ | ------- |
+| `size`       | string  | The size of the Loader component.                                              | `xl`    |
+| `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.

package/build/dynamicFlow/DynamicFlow.js

@@ -0,0 +1,19 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DynamicFlowRevamp, DynamicFlow as DynamicFlowLegacy, } from '@wise/dynamic-flow-client';
+export function DynamicFlow(props) {
+    var _a = props.customFetch, customFetch = _a === void 0 ? globalThis.fetch : _a, features = props.features;
+    var coreProps = __assign(__assign({}, props), { httpClient: customFetch });
+    var revampEnabled = features === null || features === void 0 ? void 0 : features.find(function (feature) { return feature.featureName === 'dynamic-flow-revamp'; });
+    return revampEnabled ? (_jsx(DynamicFlowRevamp, __assign({}, coreProps))) : (_jsx(DynamicFlowLegacy, __assign({}, coreProps)));
+}

package/build/index.js

@@ -0,0 +1,4 @@
+import { makeHttpClient } from '@wise/dynamic-flow-client';
+export { translations, JsonSchemaForm, isValidSchema } from '@wise/dynamic-flow-client';
+export { DynamicFlow } from './dynamicFlow/DynamicFlow';
+export var makeCustomFetch = makeHttpClient;

package/build/main.css

@@ -0,0 +1,263 @@
+.tw-form-control textarea {
+  resize: vertical;
+}
+.camera-capture {
+  background: #000;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1030;
+}
+.camera-capture video {
+  display: block;
+  height: 100%;
+  left: 0;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.camera-capture .bottom-bar {
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+.camera-capture .camera-capture-btn {
+  align-self: center;
+  background-color: transparent;
+  background-image: none;
+  border: 6px solid #f8f9fa;
+  border-radius: 50%;
+  cursor: pointer;
+  display: inline-block;
+  height: 76px;
+  position: relative;
+  touch-action: manipulation;
+  transition: all 0.15s ease-in-out;
+  user-select: none;
+  vertical-align: middle;
+  width: 76px;
+}
+.camera-capture .camera-capture-btn:hover {
+  border-color: #cbd3da;
+}
+.camera-capture .camera-capture-btn:hover .camera-capture-btn-inner {
+  background-color: #cbd3da;
+}
+.camera-capture .camera-capture-btn:active {
+  border-color: #9fadba;
+}
+.camera-capture .camera-capture-btn:active .camera-capture-btn-inner {
+  background-color: #9fadba;
+}
+.camera-capture .camera-capture-btn:focus,
+.camera-capture .camera-capture-btn:focus-visible {
+  outline: 0;
+}
+.camera-capture .camera-capture-btn .camera-capture-btn-inner {
+  background-color: #f8f9fa;
+  border-radius: 50%;
+  display: inline-block;
+  height: 60px;
+  margin: 2px;
+  transition: all 0.15s ease-in-out;
+  width: 60px;
+}
+.camera-capture svg {
+  display: block;
+  height: 100%;
+  left: 0;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.camera-capture svg .camera-capture-text-and-image-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: center;
+  overflow: hidden;
+  position: absolute;
+}
+.camera-capture svg .camera-capture-instructions,
+.camera-capture svg .camera-capture-title {
+  color: #fff;
+  display: block;
+  text-align: center;
+}
+.camera-capture svg .camera-capture-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+.camera-capture svg .camera-capture-img {
+  display: block;
+  filter: invert(100%);
+  height: 32px;
+  position: relative;
+  width: 32px;
+}
+.camera-capture svg foreignObject {
+  overflow: visible;
+}
+.camera-capture .review-image {
+  display: block;
+  height: 100%;
+  left: 0;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.df-back-btn .tw-avatar__content {
+  cursor: pointer;
+  background-color: var(--color-background-neutral);
+}
+.df-back-btn:hover .tw-avatar__content {
+  background-color: var(--color-background-neutral-hover);
+}
+.df-back-btn:active .tw-avatar__content {
+  background-color: var(--color-background-neutral-active);
+}
+.orientation-lock-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-dark);
+  color: var(--color-white);
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-semi-bold);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 24px;
+}
+@media screen and (orientation: landscape) and (height <= 767px) {
+  .orientation-lock-overlay {
+    display: flex;
+  }
+}
+.df-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.df-image img {
+  height: auto;
+  width: 100%;
+}
+/* narrow screens */
+.df-image.xs img {
+  width: 50px;
+}
+.df-image.sm img {
+  width: 100px;
+}
+.df-image.md img {
+  width: 200px;
+}
+.df-image.lg img {
+  width: 300px;
+}
+/* wide screens */
+@media (width >= 576px) {
+  .df-image.xs img {
+    width: 100px;
+  }
+
+  .df-image.sm img {
+    width: 200px;
+  }
+
+  .df-image.md img {
+    width: 300px;
+  }
+
+  .df-image.lg img {
+    width: 500px;
+  }
+
+  .df-image.xl img {
+    max-width: 600px;
+  }
+}
+/* We should move to CSS modules when we move this to the Wise layer */
+.df-box-renderer-border {
+  border: 1px solid var(--color-border-neutral);
+  border-radius: var(--radius-small);
+  padding: var(--size-16);
+}
+.df-box-renderer-fixed-width {
+  display: flex;
+  justify-content: center;
+}
+.df-box-renderer-width-xs,
+.df-box-renderer-width-sm,
+.df-box-renderer-width-md,
+.df-box-renderer-width-lg {
+  width: 100%;
+}
+@media screen and (width >= 768px) {
+  .df-box-renderer-width-xs {
+    width: 33.33%;
+  }
+
+  .df-box-renderer-width-sm {
+    width: 50%;
+  }
+
+  .df-box-renderer-width-md {
+    width: 66.66%;
+  }
+
+  .df-box-renderer-width-lg {
+    width: 83.33%;
+  }
+}
+@media screen and (width >= 990px) {
+  .df-box-renderer-width-xs {
+    width: 25%;
+  }
+
+  .df-box-renderer-width-sm {
+    width: 33.33%;
+  }
+
+  .df-box-renderer-width-md {
+    width: 50%;
+  }
+
+  .df-box-renderer-width-lg {
+    width: 66.66%;
+  }
+}
+.df-columns-renderer-container {
+  display: flex;
+  gap: var(--size-16);
+  flex-direction: column;
+}
+.df-columns-renderer-column,
+.df-columns-renderer-bias-start .df-columns-renderer-column:nth-child(2),
+.df-columns-renderer-bias-end .df-columns-renderer-column:nth-child(1) {
+  flex: 1;
+}
+.df-columns-renderer-bias-start .df-columns-renderer-column:nth-child(1),
+.df-columns-renderer-bias-end .df-columns-renderer-column:nth-child(2) {
+  flex: 2;
+}
+@media (width >= 768px) {
+  .df-columns-renderer-container {
+    flex-direction: row;
+  }
+}