@wise/dynamic-flow-client 3.10.0 → 3.11.1

package/build/main.mjs

@@ -1269,11 +1269,14 @@ var isStringSchemaWithUpload = (schema) => isStringSchema(schema) && schema.form
 var isSchemaWithPersistAsync = (schema) => "persistAsync" in schema && !isNullish(schema.persistAsync);
 
 // src/revamp/renderers/stepComponentToProps.ts
-var stepComponentToProps = ({ back, external, loadingState, trackEvent }, children) => ({
+var stepComponentToProps = ({ back, description, error, external, loadingState, title, trackEvent }, children) => ({
   type: "step",
   back,
+  description,
+  error,
   external,
   loadingState,
+  title,
   trackEvent,
   children
 });
@@ -6497,27 +6500,6 @@ var alertLayoutToComponent = (uid, { control, markdown, margin = "md", context =
   context: mapLegacyContext(context)
 });
 
-// src/revamp/domain/components/HeadingComponent.ts
-var createHeadingComponent = (headingProps) => __spreadProps(__spreadValues({
-  type: "heading"
-}, headingProps), {
-  getSubmittableValue: async () => null,
-  getSummary: () => ({}),
-  // Noop
-  getLocalValue: () => null,
-  validate: () => true
-});
-
-// src/revamp/domain/mappers/layout/headingLayoutToComponent.ts
-var headingLayoutToComponent = (uid, { align = "left", margin = "md", size = "md", control, text }) => createHeadingComponent({
-  uid,
-  align: mapLegacyAlign(align),
-  control,
-  margin,
-  size,
-  text
-});
-
 // src/revamp/domain/components/BoxComponent.ts
 var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps), {
   type: "box",
@@ -7761,38 +7743,32 @@ var getComponentForLocalValueKey = (key, component) => {
 
 // src/revamp/domain/components/utils/isPartialLocalValueMatch.ts
 var isPartialLocalValueMatch = (partialValue, component) => {
-  if (isArray(partialValue) && component.type === "repeatable") {
-    const children = component.getChildren();
-    return partialValue.every((value, index) => {
-      const childComponent = children[index];
-      return childComponent ? isPartialLocalValueMatch(value, childComponent) : false;
-    });
+  if (!component) {
+    return false;
   }
   const componentValue = component.getLocalValue();
   if (component.type === "const") {
     return compareLocalValue(partialValue, componentValue);
   }
   if (isObjectLocalValue(partialValue) && isObjectLocalValue(componentValue)) {
-    const allKeys = Array.from(
-      /* @__PURE__ */ new Set([...Object.keys(partialValue), ...Object.keys(componentValue)])
-    );
-    const matchingKeys = allKeys.filter(
-      (key) => !isNullish(partialValue[key]) && !isNullish(componentValue[key])
-    );
-    return matchingKeys.length > 0 && matchingKeys.every((key) => {
-      const componentForKey = getComponentForLocalValueKey(key, component);
-      return componentForKey ? isPartialLocalValueMatch(partialValue[key], componentForKey) : false;
-    });
-  }
-  if (partialValue instanceof File && componentValue instanceof File) {
-    return areEquivalentFiles(partialValue, componentValue);
+    return isPartialObjectMatch(partialValue, componentValue, component);
   }
-  if ("isPersisted" in component && component.isPersisted) {
-    return true;
-  }
-  return compareLocalValue(partialValue, componentValue);
+  return true;
+};
+var isPartialObjectMatch = (partialValue, componentValue, component) => {
+  const resultByKey = getMatchingKeys(partialValue, componentValue).map((key) => {
+    const componentForKey = getComponentForLocalValueKey(key, component);
+    if (componentForKey && componentForKey.type === "const") {
+      return isPartialLocalValueMatch(partialValue[key], componentForKey);
+    }
+    return null;
+  });
+  return resultByKey.includes(true) && !resultByKey.includes(false);
+};
+var getMatchingKeys = (a, b) => {
+  const allKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]));
+  return allKeys.filter((key) => !isNullish(a[key]) && !isNullish(b[key]));
 };
-var areEquivalentFiles = (fileA, fileB) => fileA.name === fileB.name && fileA.type === fileB.type && fileA.size === fileB.size;
 
 // src/revamp/domain/components/SelectInputComponent.ts
 var createSelectInputComponent = (selectProps, updateComponent) => {
@@ -8118,6 +8094,19 @@ var toBase64 = async (file) => new Promise((resolve, reject) => {
   reader.addEventListener("error", reject);
   reader.readAsDataURL(file);
 });
+var base64dataUrltoFile = (dataurl, filename) => {
+  if (!isBase64DataUrl(dataurl)) {
+    return null;
+  }
+  const [, base64data] = dataurl.split(",");
+  return new File([base64ToBytes(base64data)], filename, { type: getMimeType(dataurl) });
+};
+var isBase64DataUrl = (dataurl) => dataurl.startsWith("data:") && dataurl.includes("base64") && dataurl.includes(",");
+var getMimeType = (base64dataUrl) => base64dataUrl.substring("data:".length).split(";")[0];
+var base64ToBytes = (base64) => {
+  const charCodes = atob(base64).split("").map((m) => m.charCodeAt(0));
+  return Uint8Array.from(charCodes);
+};
 
 // src/revamp/domain/components/UploadInputComponent.ts
 var createUploadInputComponent = (uploadInputProps, updateComponent) => {
@@ -8219,6 +8208,7 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
 
 // src/revamp/domain/mappers/schema/stringSchemaToComponent/stringSchemaToUploadInputComponent.ts
 var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
+  var _a;
   const { schema, localValue, model, required = false } = schemaMapperProps;
   const { accepts, autocompleteHint, maxSize, validationMessages } = schema;
   const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
@@ -8226,7 +8216,7 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
   const { performPersistAsync } = getPersistAsyncInitialState(schemaMapperProps, mapperProps);
   const persistedState = performPersistAsync ? getInitialPersistedState(null, model) : getInitialPersistedState();
   const validLocalValue = isFile(localValue) ? localValue : null;
-  const value = performPersistAsync ? validLocalValue : null;
+  const value = (_a = getFileFromModel(model)) != null ? _a : validLocalValue;
   return createUploadInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       accepts,
@@ -8243,6 +8233,7 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
     updateComponent
   );
 };
+var getFileFromModel = (model) => isString(model) ? base64dataUrltoFile(model, "") : null;
 
 // src/revamp/domain/components/TextInputComponent.ts
 var createTextInputComponent = (textInputProps, updateComponent) => {
@@ -9228,6 +9219,27 @@ var formLayoutToComponent = (uid, { schemaId, schema: schemaRef, control, margin
   });
 };
 
+// src/revamp/domain/components/HeadingComponent.ts
+var createHeadingComponent = (headingProps) => __spreadProps(__spreadValues({
+  type: "heading"
+}, headingProps), {
+  getSubmittableValue: async () => null,
+  getSummary: () => ({}),
+  // Noop
+  getLocalValue: () => null,
+  validate: () => true
+});
+
+// src/revamp/domain/mappers/layout/headingLayoutToComponent.ts
+var headingLayoutToComponent = (uid, { align = "left", margin = "md", size = "md", control, text }) => createHeadingComponent({
+  uid,
+  align: mapLegacyAlign(align),
+  control,
+  margin,
+  size,
+  text
+});
+
 // src/revamp/domain/components/ImageComponent.ts
 var createImageComponent = (imageProps) => __spreadProps(__spreadValues({
   type: "image"
@@ -9700,7 +9712,7 @@ var mapStepToComponent = (_a) => {
   ]);
   var _a2, _b2;
   const { httpClient, step, updateComponent } = restProps;
-  const { id, navigation, external, key, layout = [], polling } = step;
+  const { id, description, errors, external, key, layout = [], navigation, polling, title } = step;
   const backNavigation = (_a2 = navigation == null ? void 0 : navigation.back) != null ? _a2 : navigation == null ? void 0 : navigation.backButton;
   const back = backNavigation ? {
     title: backNavigation.title,
@@ -9737,34 +9749,21 @@ var mapStepToComponent = (_a) => {
       onRefresh
     }))
   );
-  const additionalComponents = makeAdditionalComponents(step, uid, displayStepTitle);
   const stepComponent = createStepComponent({
     uid,
-    components: [...additionalComponents, ...layoutComponents],
     back,
+    components: layoutComponents,
+    description,
+    error: errors == null ? void 0 : errors.error,
     external,
     loadingState,
     stepPolling,
     updateComponent,
+    title: displayStepTitle ? title : void 0,
     trackEvent
   });
   return stepComponent;
 };
-var makeAdditionalComponents = (step, uid, displayStepTitle) => {
-  const { title, errors } = step;
-  const heading = title && displayStepTitle ? headingLayoutToComponent(`${uid}.title`, {
-    type: "heading",
-    text: title,
-    align: "center",
-    size: "lg"
-  }) : void 0;
-  const stepError = (errors == null ? void 0 : errors.error) ? alertLayoutToComponent(`${uid}.global-error`, {
-    type: "alert",
-    markdown: errors.error,
-    context: "negative"
-  }) : void 0;
-  return [...heading ? [heading] : [], ...stepError ? [stepError] : []];
-};
 
 // src/revamp/flow/executeRefresh.ts
 var executeRefresh = async (props) => {
@@ -12280,7 +12279,7 @@ import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs20 } from "react/jsx-
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title }) => {
-    const orientation = control === "horizontal" ? "HORIZONTAL_RIGHT_ALIGNED" : "VERTICAL_ONE_COLUMN";
+    const orientation = mapControlToDefinitionListLayout(control);
     const action = callToAction ? {
       text: callToAction.title,
       onClick: (event) => {
@@ -12305,6 +12304,21 @@ var ReviewRenderer = {
   }
 };
 var ReviewRenderer_default = ReviewRenderer;
+var mapControlToDefinitionListLayout = (control) => {
+  switch (control) {
+    case "horizontal":
+    case "horizontal-end-aligned":
+      return "HORIZONTAL_RIGHT_ALIGNED";
+    case "horizontal-start-aligned":
+      return "HORIZONTAL_LEFT_ALIGNED";
+    case "vertical-two-column":
+      return "VERTICAL_TWO_COLUMN";
+    case "vertical":
+    case "vertical-one-column":
+    default:
+      return "VERTICAL_ONE_COLUMN";
+  }
+};
 var getFieldValue = (value, help, orientation) => {
   if (help) {
     return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ jsxs20(Fragment10, { children: [
@@ -12430,13 +12444,14 @@ function BackButton({ title, onClick }) {
 var BackButton_default = BackButton;
 
 // src/revamp/wise/renderers/step/StepRenderer.tsx
+import { Alert as Alert3 } from "@transferwise/components";
 import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { back, loadingState, external, trackEvent, children } = props;
+  const { back, description, error, external, loadingState, title, trackEvent, children } = props;
   const value = useMemo4(() => ({ loadingState, trackEvent }), [loadingState, trackEvent]);
   const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
   if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
@@ -12444,6 +12459,9 @@ function StepRendererComponent(props) {
   }
   return /* @__PURE__ */ jsxs23(StepRendererContextProvider, { value, children: [
     back ? /* @__PURE__ */ jsx58(BackButton_default, __spreadValues({}, back)) : null,
+    title ? /* @__PURE__ */ jsx58("h2", { className: "text-xs-center m-b-2", children: title }) : void 0,
+    description ? /* @__PURE__ */ jsx58("p", { className: "text-xs-center m-b-2", children: description }) : void 0,
+    error ? /* @__PURE__ */ jsx58(Alert3, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }
@@ -13813,7 +13831,7 @@ var import_classnames16 = __toESM(require_classnames());
 import { useEffect as useEffect17, useMemo as useMemo17, useState as useState27 } from "react";
 
 // src/legacy/layout/alert/DynamicAlert.tsx
-import { Alert as Alert3 } from "@transferwise/components";
+import { Alert as Alert4 } from "@transferwise/components";
 
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
 import { Avatar as Avatar5, AvatarType as AvatarType4 } from "@transferwise/components";
@@ -13914,7 +13932,7 @@ import { jsx as jsx69 } from "react/jsx-runtime";
 var DynamicAlert = (props) => {
   const alert = props.component;
   return /* @__PURE__ */ jsx69(
-    Alert3,
+    Alert4,
     {
       type: mapContextToAlertType(legacy_mapContext(alert.context)),
       className: getMargin2(alert.margin),
@@ -17127,9 +17145,21 @@ var getFieldValue2 = (value, help, orientation) => {
   }
   return value;
 };
-var getReviewLayout = (review) => {
+var getDefinitionListLayout = (review) => {
   const orientation = review.control || review.orientation;
-  return orientation === "horizontal" ? "HORIZONTAL_RIGHT_ALIGNED" : "VERTICAL_ONE_COLUMN";
+  switch (orientation) {
+    case "horizontal":
+    case "horizontal-end-aligned":
+      return "HORIZONTAL_RIGHT_ALIGNED";
+    case "horizontal-start-aligned":
+      return "HORIZONTAL_LEFT_ALIGNED";
+    case "vertical-two-column":
+      return "VERTICAL_TWO_COLUMN";
+    case "vertical":
+    case "vertical-one-column":
+    default:
+      return "VERTICAL_ONE_COLUMN";
+  }
 };
 function DynamicReview(props) {
   const review = props.component;
@@ -17144,7 +17174,7 @@ function DynamicReview(props) {
       }
     }
   });
-  const orientation = getReviewLayout(review);
+  const orientation = getDefinitionListLayout(review);
   const callToAction = review.callToAction ? getReviewAction2(review.callToAction.title, review.callToAction.action) : null;
   const legacyCallToAction = !callToAction && review.action ? getReviewAction2(review.action.title || "", review.action) : null;
   return /* @__PURE__ */ jsxs40("div", { className: margin, children: [

package/build/types/revamp/domain/components/StepDomainComponent.d.ts

@@ -6,19 +6,22 @@ export type StepDomainComponent = BaseComponent & {
     type: 'step';
     back?: BackNavigation;
     components: DomainComponent[];
+    description?: string;
+    error?: string;
     external?: Step['external'];
     loadingState: LoadingState;
+    title?: string;
+    trackEvent: AnalyticsEventDispatcher<string>;
     setLoadingState: (loadingState: LoadingState) => void;
     getChildren: () => DomainComponent[];
     getLocalValue: () => LocalValue;
     stop: () => void;
-    trackEvent: AnalyticsEventDispatcher<string>;
 };
 type BackNavigation = {
     title?: string;
     onClick: () => void;
 };
-export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "components" | "external" | "trackEvent" | "back" | "loadingState"> & {
+export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "error" | "uid" | "title" | "components" | "description" | "external" | "trackEvent" | "back" | "loadingState"> & {
     stepPolling?: StepPolling | undefined;
     updateComponent: UpdateComponent;
 }) => StepDomainComponent;

package/build/types/revamp/domain/components/utils/file-utils.d.ts

@@ -1 +1,2 @@
 export declare const toBase64: (file: Blob) => Promise<string>;
+export declare const base64dataUrltoFile: (dataurl: string, filename: string) => File | null;

package/build/types/revamp/domain/components/utils/isPartialLocalValueMatch.d.ts

@@ -1,2 +1,2 @@
 import type { DomainComponent, LocalValue } from '../../types';
-export declare const isPartialLocalValueMatch: (partialValue: LocalValue, component: DomainComponent) => boolean;
+export declare const isPartialLocalValueMatch: (partialValue: LocalValue, component: DomainComponent | null) => boolean;

package/build/types/revamp/renderers/stepComponentToProps.d.ts

@@ -1,4 +1,4 @@
 import type { ReactNode } from 'react';
 import type { StepDomainComponent } from '../domain/components/StepDomainComponent';
 import type { StepRendererProps } from './types';
-export declare const stepComponentToProps: ({ back, external, loadingState, trackEvent }: StepDomainComponent, children: ReactNode) => StepRendererProps;
+export declare const stepComponentToProps: ({ back, description, error, external, loadingState, title, trackEvent }: StepDomainComponent, children: ReactNode) => StepRendererProps;

package/build/types/revamp/renderers/types.d.ts

@@ -29,10 +29,13 @@ export type StepRendererProps = {
         title?: string;
         onClick: () => void;
     };
+    description?: string;
+    error?: string;
     external?: {
         url: string;
     };
     loadingState: LoadingState;
+    title?: string;
     trackEvent: AnalyticsEventDispatcher<string>;
     children: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.10.0",
+  "version": "3.11.1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -44,7 +44,6 @@
     "@transferwise/formatting": "^2.13.0",
     "@transferwise/icons": "3.13.0",
     "@transferwise/neptune-css": "14.10.0",
-    "@transferwise/neptune-tokens": "8.9.2",
     "@types/enzyme": "^3.10.18",
     "@types/jest": "29.5.12",
     "@types/react": "18",