@wise/dynamic-flow-client 5.9.0 → 5.9.1

package/build/domain/components/step/StepDomainComponent.js

@@ -49,7 +49,12 @@ export const createStepComponent = (stepProps) => {
             return getLocalValues(this.schemaComponents);
         },
         validate() {
-            return this.schemaComponents.every((inputComponent) => inputComponent.isSchemaReferencedInStep ? inputComponent.validate() : true);
+            return this.schemaComponents.every((inputComponent) => {
+                var _a;
+                return this.referencedSchemaIds.includes((_a = inputComponent.schemaId) !== null && _a !== void 0 ? _a : '')
+                    ? inputComponent.validate()
+                    : true;
+            });
         },
         setLoadingState(loadingState) {
             this._update((draft) => {

package/build/domain/mappers/mapStepSchemas.js

@@ -1,9 +1,8 @@
 import { mapSchemaToComponent } from './mapSchemaToComponent';
-export const mapStepSchemas = (uid, step, stepLocalValue, mapperProps, referencedSchemaIds) => {
-    const isReferenced = (schemaId) => schemaId != null && referencedSchemaIds.includes(schemaId);
+export const mapStepSchemas = (uid, step, stepLocalValue, mapperProps) => {
     return step.schemas.map((schema, i) => {
         var _a, _b;
-        const schemaComponent = mapSchemaToComponent({
+        return mapSchemaToComponent({
             uid: `${uid}.schemas-${i}.${schema.$id}`,
             schemaId: schema.$id,
             schema,
@@ -12,6 +11,5 @@ export const mapStepSchemas = (uid, step, stepLocalValue, mapperProps, reference
             validationErrors: (_b = step.errors) === null || _b === void 0 ? void 0 : _b.validation,
             required: true,
         }, mapperProps);
-        return Object.assign(Object.assign({}, schemaComponent), { isSchemaReferencedInStep: isReferenced(schema.$id) });
     });
 };

package/build/domain/mappers/mapStepToComponent.js

@@ -64,7 +64,7 @@ export const mapStepToComponent = (_a) => {
         onBehavior,
         registerSubmissionBehavior });
     const referencedSchemaIds = getReferencedSchemaId(step);
-    const schemaComponents = mapStepSchemas(uid, step, stepLocalValue, mapperProps, referencedSchemaIds);
+    const schemaComponents = mapStepSchemas(uid, step, stepLocalValue, mapperProps);
     const { layout, footer } = getLayoutAndFooter(step, features);
     const layoutComponents = layout.map((layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents));
     const footerComponents = normaliseMarginInLastComponent(footer).map((footerComponent, index) => mapLayoutToComponent(`${uid}.footer-${index}`, footerComponent, mapperProps, schemaComponents));
@@ -89,6 +89,7 @@ export const mapStepToComponent = (_a) => {
         stackBehavior: (_b = navigation === null || navigation === void 0 ? void 0 : navigation.stackBehavior) !== null && _b !== void 0 ? _b : 'default',
         stepPrefetch,
         step,
+        referencedSchemaIds,
         onComponentUpdate,
         trackEvent,
         onBehavior,
@@ -96,8 +97,8 @@ export const mapStepToComponent = (_a) => {
     return stepComponent;
 };
 const getReferencedSchemaId = (step) => {
-    const { schemas, layout } = step;
-    const stringifiedLayout = JSON.stringify(layout);
+    const { schemas, layout, footer } = step;
+    const stringifiedLayout = JSON.stringify({ layout, footer });
     return schemas
         .filter((schema) => stringifiedLayout.includes(`"schemaId":"${schema.$id}"`) ||
         stringifiedLayout.includes(`"schema":{"$ref":"${schema.$id}"`))

package/build/domain/mappers/schema/oneOfSchemaToComponent/oneOfSchemaToComponent.js

@@ -22,16 +22,6 @@ export const oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
     var _a;
     const { uid, localValue, schema, model, validationErrors: initialError, required = false, } = schemaMapperProps;
     const initialModel = (_a = model !== null && model !== void 0 ? model : schema.default) !== null && _a !== void 0 ? _a : null;
-    if (schema.oneOf.length === 1 && isFormSectionSchema(schema.oneOf[0])) {
-        return mapSchemaToComponent({
-            uid,
-            schema: supressSchemaTitleAndDescription(schema.oneOf[0]),
-            model: initialModel,
-            localValue,
-            validationErrors: initialError,
-            required,
-        }, mapperProps);
-    }
     const options = schema.oneOf.map((childSchema, index) => {
         var _a;
         const { title = '', description, image, icon, media, keywords = [], tags, additionalText, inlineAlert, supportingValues, } = childSchema;

package/build/domain/mappers/schema/oneOfSchemaToComponent/oneOfSchemaToComponent.test.js

@@ -222,44 +222,4 @@ describe('oneOfSchemaToComponent', () => {
             });
         });
     });
-    describe('number of elements', () => {
-        describe('when the oneOf contains only more than one element', () => {
-            it('returns an SelectComponent', () => {
-                const schemaMapperProps = getMockSchemaMapperProps({
-                    schema: {
-                        oneOf: [
-                            { type: 'object', displayOrder: ['name'], properties: { name: { type: 'string' } } },
-                            { type: 'object', displayOrder: ['name'], properties: { name: { type: 'string' } } },
-                        ],
-                    },
-                });
-                const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
-                expect(component.type).toBe('select');
-            });
-        });
-        describe('when the oneOf contains only one element, and its an object schema', () => {
-            it('returns an ObjectComponent', () => {
-                const schemaMapperProps = getMockSchemaMapperProps({
-                    schema: {
-                        oneOf: [
-                            { type: 'object', displayOrder: ['name'], properties: { name: { type: 'string' } } },
-                        ],
-                    },
-                });
-                const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
-                expect(component.type).toBe('object');
-            });
-        });
-        describe('when the oneOf contains only one element, and its a const schema', () => {
-            it('returns an SelectComponent', () => {
-                const schemaMapperProps = getMockSchemaMapperProps({
-                    schema: {
-                        oneOf: [{ const: 'EUR' }],
-                    },
-                });
-                const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
-                expect(component.type).toBe('select');
-            });
-        });
-    });
 });

package/build/main.js

@@ -2615,7 +2615,10 @@ var createStepComponent = (stepProps) => {
     },
     validate() {
       return this.schemaComponents.every(
-        (inputComponent) => inputComponent.isSchemaReferencedInStep ? inputComponent.validate() : true
+        (inputComponent) => {
+          var _a2;
+          return this.referencedSchemaIds.includes((_a2 = inputComponent.schemaId) != null ? _a2 : "") ? inputComponent.validate() : true;
+        }
       );
     },
     setLoadingState(loadingState) {
@@ -5268,19 +5271,6 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
     required = false
   } = schemaMapperProps;
   const initialModel = (_a = model != null ? model : schema.default) != null ? _a : null;
-  if (schema.oneOf.length === 1 && isFormSectionSchema(schema.oneOf[0])) {
-    return mapSchemaToComponent(
-      {
-        uid,
-        schema: supressSchemaTitleAndDescription(schema.oneOf[0]),
-        model: initialModel,
-        localValue,
-        validationErrors: initialError,
-        required
-      },
-      mapperProps
-    );
-  }
   const options = schema.oneOf.map((childSchema, index) => {
     var _a2;
     const {
@@ -5891,26 +5881,24 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
 };
 
 // src/domain/mappers/mapStepSchemas.ts
-var mapStepSchemas = (uid, step, stepLocalValue, mapperProps, referencedSchemaIds) => {
-  const isReferenced = (schemaId) => schemaId != null && referencedSchemaIds.includes(schemaId);
-  return step.schemas.map((schema, i) => {
-    var _a, _b;
-    const schemaComponent = mapSchemaToComponent(
-      {
-        uid: `${uid}.schemas-${i}.${schema.$id}`,
-        schemaId: schema.$id,
-        schema,
-        model: (_a = step.model) != null ? _a : null,
-        localValue: stepLocalValue,
-        validationErrors: (_b = step.errors) == null ? void 0 : _b.validation,
-        required: true
-      },
-      mapperProps
-    );
-    return __spreadProps(__spreadValues({}, schemaComponent), {
-      isSchemaReferencedInStep: isReferenced(schema.$id)
-    });
-  });
+var mapStepSchemas = (uid, step, stepLocalValue, mapperProps) => {
+  return step.schemas.map(
+    (schema, i) => {
+      var _a, _b;
+      return mapSchemaToComponent(
+        {
+          uid: `${uid}.schemas-${i}.${schema.$id}`,
+          schemaId: schema.$id,
+          schema,
+          model: (_a = step.model) != null ? _a : null,
+          localValue: stepLocalValue,
+          validationErrors: (_b = step.errors) == null ? void 0 : _b.validation,
+          required: true
+        },
+        mapperProps
+      );
+    }
+  );
 };
 
 // src/domain/mappers/mapToolbarToComponent.ts
@@ -6311,13 +6299,7 @@ var mapStepToComponent = (_a) => {
     registerSubmissionBehavior
   });
   const referencedSchemaIds = getReferencedSchemaId(step);
-  const schemaComponents = mapStepSchemas(
-    uid,
-    step,
-    stepLocalValue,
-    mapperProps,
-    referencedSchemaIds
-  );
+  const schemaComponents = mapStepSchemas(uid, step, stepLocalValue, mapperProps);
   const { layout, footer } = getLayoutAndFooter(step, features);
   const layoutComponents = layout.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents)
@@ -6346,6 +6328,7 @@ var mapStepToComponent = (_a) => {
     stackBehavior: (_a2 = navigation == null ? void 0 : navigation.stackBehavior) != null ? _a2 : "default",
     stepPrefetch,
     step,
+    referencedSchemaIds,
     onComponentUpdate,
     trackEvent,
     onBehavior
@@ -6353,8 +6336,8 @@ var mapStepToComponent = (_a) => {
   return stepComponent;
 };
 var getReferencedSchemaId = (step) => {
-  const { schemas, layout } = step;
-  const stringifiedLayout = JSON.stringify(layout);
+  const { schemas, layout, footer } = step;
+  const stringifiedLayout = JSON.stringify({ layout, footer });
   return schemas.filter(
     (schema) => stringifiedLayout.includes(`"schemaId":"${schema.$id}"`) || stringifiedLayout.includes(`"schema":{"$ref":"${schema.$id}"`)
   ).map((schema) => schema.$id).filter((schemaId) => schemaId !== void 0);
@@ -8094,6 +8077,7 @@ var sectionComponentToProps = (component, rendererMapperProps) => {
 
 // src/renderers/mappers/selectInputComponentToProps.ts
 var selectInputComponentToProps = (component, rendererMapperProps) => {
+  var _b;
   const { autoComplete, selectedIndex, onSelect } = component;
   const selectedChild = component.getSelectedChild();
   const childrenProps = selectedChild ? componentToRendererProps(selectedChild, rendererMapperProps) : null;
@@ -8103,6 +8087,13 @@ var selectInputComponentToProps = (component, rendererMapperProps) => {
     component.getChildren(),
     rendererMapperProps
   );
+  if (options.length === 1 && ((_b = options[0].childrenProps) == null ? void 0 : _b.type) === "form-section") {
+    if (selectedIndex == null) {
+      rendererMapperProps.trackEvent("OneOf Option Selected - Auto-select single-option", {});
+      onSelect.bind(component)(0);
+    }
+    return options[0].childrenProps;
+  }
   return __spreadProps(__spreadValues(__spreadValues({}, props), rendererMapperProps), {
     autoComplete,
     options,

package/build/main.mjs

@@ -2585,7 +2585,10 @@ var createStepComponent = (stepProps) => {
     },
     validate() {
       return this.schemaComponents.every(
-        (inputComponent) => inputComponent.isSchemaReferencedInStep ? inputComponent.validate() : true
+        (inputComponent) => {
+          var _a2;
+          return this.referencedSchemaIds.includes((_a2 = inputComponent.schemaId) != null ? _a2 : "") ? inputComponent.validate() : true;
+        }
       );
     },
     setLoadingState(loadingState) {
@@ -5238,19 +5241,6 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
     required = false
   } = schemaMapperProps;
   const initialModel = (_a = model != null ? model : schema.default) != null ? _a : null;
-  if (schema.oneOf.length === 1 && isFormSectionSchema(schema.oneOf[0])) {
-    return mapSchemaToComponent(
-      {
-        uid,
-        schema: supressSchemaTitleAndDescription(schema.oneOf[0]),
-        model: initialModel,
-        localValue,
-        validationErrors: initialError,
-        required
-      },
-      mapperProps
-    );
-  }
   const options = schema.oneOf.map((childSchema, index) => {
     var _a2;
     const {
@@ -5861,26 +5851,24 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
 };
 
 // src/domain/mappers/mapStepSchemas.ts
-var mapStepSchemas = (uid, step, stepLocalValue, mapperProps, referencedSchemaIds) => {
-  const isReferenced = (schemaId) => schemaId != null && referencedSchemaIds.includes(schemaId);
-  return step.schemas.map((schema, i) => {
-    var _a, _b;
-    const schemaComponent = mapSchemaToComponent(
-      {
-        uid: `${uid}.schemas-${i}.${schema.$id}`,
-        schemaId: schema.$id,
-        schema,
-        model: (_a = step.model) != null ? _a : null,
-        localValue: stepLocalValue,
-        validationErrors: (_b = step.errors) == null ? void 0 : _b.validation,
-        required: true
-      },
-      mapperProps
-    );
-    return __spreadProps(__spreadValues({}, schemaComponent), {
-      isSchemaReferencedInStep: isReferenced(schema.$id)
-    });
-  });
+var mapStepSchemas = (uid, step, stepLocalValue, mapperProps) => {
+  return step.schemas.map(
+    (schema, i) => {
+      var _a, _b;
+      return mapSchemaToComponent(
+        {
+          uid: `${uid}.schemas-${i}.${schema.$id}`,
+          schemaId: schema.$id,
+          schema,
+          model: (_a = step.model) != null ? _a : null,
+          localValue: stepLocalValue,
+          validationErrors: (_b = step.errors) == null ? void 0 : _b.validation,
+          required: true
+        },
+        mapperProps
+      );
+    }
+  );
 };
 
 // src/domain/mappers/mapToolbarToComponent.ts
@@ -6281,13 +6269,7 @@ var mapStepToComponent = (_a) => {
     registerSubmissionBehavior
   });
   const referencedSchemaIds = getReferencedSchemaId(step);
-  const schemaComponents = mapStepSchemas(
-    uid,
-    step,
-    stepLocalValue,
-    mapperProps,
-    referencedSchemaIds
-  );
+  const schemaComponents = mapStepSchemas(uid, step, stepLocalValue, mapperProps);
   const { layout, footer } = getLayoutAndFooter(step, features);
   const layoutComponents = layout.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents)
@@ -6316,6 +6298,7 @@ var mapStepToComponent = (_a) => {
     stackBehavior: (_a2 = navigation == null ? void 0 : navigation.stackBehavior) != null ? _a2 : "default",
     stepPrefetch,
     step,
+    referencedSchemaIds,
     onComponentUpdate,
     trackEvent,
     onBehavior
@@ -6323,8 +6306,8 @@ var mapStepToComponent = (_a) => {
   return stepComponent;
 };
 var getReferencedSchemaId = (step) => {
-  const { schemas, layout } = step;
-  const stringifiedLayout = JSON.stringify(layout);
+  const { schemas, layout, footer } = step;
+  const stringifiedLayout = JSON.stringify({ layout, footer });
   return schemas.filter(
     (schema) => stringifiedLayout.includes(`"schemaId":"${schema.$id}"`) || stringifiedLayout.includes(`"schema":{"$ref":"${schema.$id}"`)
   ).map((schema) => schema.$id).filter((schemaId) => schemaId !== void 0);
@@ -8064,6 +8047,7 @@ var sectionComponentToProps = (component, rendererMapperProps) => {
 
 // src/renderers/mappers/selectInputComponentToProps.ts
 var selectInputComponentToProps = (component, rendererMapperProps) => {
+  var _b;
   const { autoComplete, selectedIndex, onSelect } = component;
   const selectedChild = component.getSelectedChild();
   const childrenProps = selectedChild ? componentToRendererProps(selectedChild, rendererMapperProps) : null;
@@ -8073,6 +8057,13 @@ var selectInputComponentToProps = (component, rendererMapperProps) => {
     component.getChildren(),
     rendererMapperProps
   );
+  if (options.length === 1 && ((_b = options[0].childrenProps) == null ? void 0 : _b.type) === "form-section") {
+    if (selectedIndex == null) {
+      rendererMapperProps.trackEvent("OneOf Option Selected - Auto-select single-option", {});
+      onSelect.bind(component)(0);
+    }
+    return options[0].childrenProps;
+  }
   return __spreadProps(__spreadValues(__spreadValues({}, props), rendererMapperProps), {
     autoComplete,
     options,

package/build/renderers/mappers/selectInputComponentToProps.js

@@ -13,13 +13,21 @@ import { componentToRendererProps } from './componentToRendererProps';
 import { inputComponentToProps } from './utils/inputComponentToProps';
 import { selectInputOptionsToProps } from './utils/selectInputOptionsToProps';
 export const selectInputComponentToProps = (component, rendererMapperProps) => {
+    var _a;
     const { autoComplete, selectedIndex, onSelect } = component;
     const selectedChild = component.getSelectedChild();
     const childrenProps = selectedChild
         ? componentToRendererProps(selectedChild, rendererMapperProps)
         : null;
-    const _a = inputComponentToProps(component, 'input-select'), { value } = _a, props = __rest(_a, ["value"]);
+    const _b = inputComponentToProps(component, 'input-select'), { value } = _b, props = __rest(_b, ["value"]);
     const options = selectInputOptionsToProps(component.options, component.getChildren(), rendererMapperProps);
+    if (options.length === 1 && ((_a = options[0].childrenProps) === null || _a === void 0 ? void 0 : _a.type) === 'form-section') {
+        if (selectedIndex == null) {
+            rendererMapperProps.trackEvent('OneOf Option Selected - Auto-select single-option', {});
+            onSelect.bind(component)(0);
+        }
+        return options[0].childrenProps;
+    }
     return Object.assign(Object.assign(Object.assign({}, props), rendererMapperProps), { autoComplete,
         options,
         selectedIndex, onSelect: onSelect.bind(component), children: rendererMapperProps.render(childrenProps), childrenProps });

package/build/stories/spec/schemas/features/PersistAsync.story.js

@@ -43,6 +43,9 @@ export function PersistAsyncGenericFailure() {
 export function PersistAsyncValidationFailure() {
     return renderWithStep(getBasicStep('/persist-async-validation-failure'), httpClient);
 }
+export function PersistAsyncValidationFailureWithObjectSchemaWrapper() {
+    return renderWithStep(getBasicStepWithObjectWrapper('/persist-async-validation-failure'), httpClient);
+}
 export function PersistAsyncFileUpload() {
     return renderWithStep(getFileUploadStep(), httpClient);
 }
@@ -75,6 +78,38 @@ const getBasicStep = (url) => ({
     ],
     model: 'the-token',
 });
+const getBasicStepWithObjectWrapper = (url) => ({
+    id: 'step-id',
+    title: 'Persist async on text input',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['field'],
+            properties: {
+                field: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url,
+                        param: 'param',
+                        idProperty: 'token',
+                        schema: { title: 'Card number', type: 'number' },
+                    },
+                },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+    model: 'the-token',
+});
 const getComplexStepWithDelay = () => ({
     id: 'step-id',
     title: 'Persist async on text input',

package/build/stories/spec/schemas/oneOf/OneOfWithSingleOption.story.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getMockHttpClient, respondWith } from '../../../../test-utils';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/OneOf',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const httpClient = getMockHttpClient({
+    '/submit': async () => respondWith({}, { status: 404 }),
+});
+export function SingleOptionOneOfs() {
+    const optionSchemasByType = {
+        object: {
+            type: 'object',
+            title: 'Object Schema Option',
+            displayOrder: ['accountId'],
+            properties: {
+                accountId: {
+                    title: 'Account Number',
+                    type: 'string',
+                    placeholder: '12345678',
+                },
+            },
+        },
+        const: {
+            title: 'Const Schema Option',
+            const: 'fixedValue',
+            layout: [
+                {
+                    type: 'alert',
+                    markdown: 'This is a const schema with a fixed value of "fixedValue"',
+                },
+            ],
+        },
+    };
+    const rootLevel = [true, false];
+    const withId = [true, false];
+    const required = [true, false];
+    const optionSchemaType = Object.keys(optionSchemasByType);
+    const examples = [];
+    rootLevel.forEach((isRootLevel) => {
+        withId.forEach((hasId) => {
+            required.forEach((isRequired) => {
+                optionSchemaType.forEach((optionType) => {
+                    const step = getStep(isRootLevel, isRequired, hasId, optionSchemasByType[optionType]);
+                    if (!isRequired && isRootLevel) {
+                        return null;
+                    }
+                    if (!hasId && isRootLevel) {
+                        return null;
+                    }
+                    examples.push(_jsx("div", { className: "m-b-3", children: _jsx(BeforeAndAfter, { step: step, configuration: _jsx(ConfigurationTable, { ordinal: examples.length + 1, step: step, configuration: {
+                                    isRootLevel,
+                                    isRequired,
+                                    withId: hasId,
+                                    optionType,
+                                } }) }) }, `${isRootLevel}-${isRequired}-${hasId}-${optionType}`));
+                });
+            });
+        });
+    });
+    return examples;
+}
+const getStep = (rootLevel, required, withId, singleOption) => {
+    const oneOfSchema = {
+        $id: withId && rootLevel ? '#oneOfSchemaId' : undefined,
+        title: 'One Of Schema Title',
+        placeholder: 'Select an option',
+        oneOf: [singleOption],
+        // control: 'tab',
+    };
+    const objectSchemaWrapper = {
+        type: 'object',
+        $id: '#objectSchemaWrapper',
+        title: 'Object Schema Wrapper Title',
+        displayOrder: ['childSchema'],
+        properties: {
+            childSchema: oneOfSchema,
+        },
+        required: required ? ['childSchema'] : [],
+    };
+    return {
+        id: 'step-id',
+        title: 'Step Title',
+        schemas: [rootLevel ? oneOfSchema : objectSchemaWrapper],
+        layout: [
+            {
+                type: 'form',
+                schemaId: rootLevel ? '#oneOfSchemaId' : '#objectSchemaWrapper',
+            },
+            {
+                type: 'button',
+                title: 'Submit',
+                behavior: { type: 'action', action: { url: '/submit' } },
+            },
+        ],
+    };
+};
+function ConfigurationTable({ configuration, ordinal, step, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("h4", { children: ["Configuration ", String(ordinal)] }), _jsxs("ul", { style: { paddingLeft: '16px', marginBottom: '4px' }, children: [_jsxs("li", { children: ["OneOf is at ", _jsxs("strong", { children: ["root level: ", configuration.isRootLevel ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["OneOf is ", _jsxs("strong", { children: ["required: ", configuration.isRequired ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["OneOf has ", _jsxs("strong", { children: ["$id: ", configuration.withId ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["Option Schema Type: ", _jsx("strong", { children: configuration.optionType })] })] }), _jsxs("details", { children: [_jsx("summary", { children: "Step JSON" }), _jsx("pre", { children: JSON.stringify(step, null, 2) })] })] }));
+}
+function BeforeAndAfter({ configuration, step }) {
+    return (_jsxs("div", { style: { display: 'flex', gap: '16px' }, children: [_jsx("div", { style: { flex: 1, padding: '8px' }, children: configuration }), _jsxs("div", { style: { flex: 2, border: '1px dashed #999', borderRadius: '8px', padding: '8px' }, children: [_jsx("strong", { children: "Before" }), _jsx("br", {}), renderWithStepAndOverrides(step, {
+                        httpClient,
+                        features: { bugfix: false },
+                    })] }), _jsxs("div", { style: { flex: 2, border: '1px dashed #999', borderRadius: '8px', padding: '8px' }, children: [_jsx("strong", { children: "After" }), _jsx("br", {}), renderWithStepAndOverrides(step, {
+                        httpClient,
+                        features: { bugfix: true },
+                    })] })] }));
+}

package/build/tests/PersistAsync.test.js

@@ -37,6 +37,24 @@ describe('Persist Async', () => {
         ],
         layout: [{ type: 'form', schemaId: '#persist-async-schema' }, submitButtonComponent],
     });
+    const getStepWithPersistAsyncNoObject = (childSchema) => ({
+        id: 'step-1',
+        title: 'Persist Async Step',
+        schemas: [
+            {
+                $id: '#persist-async-schema',
+                type: 'string',
+                persistAsync: {
+                    idProperty: 'id',
+                    url: '/persist-async',
+                    method: 'POST',
+                    param: 'value',
+                    schema: childSchema,
+                },
+            },
+        ],
+        layout: [{ type: 'form', schemaId: '#persist-async-schema' }, submitButtonComponent],
+    });
     const renderDF = (httpClient, initialStep, onError = vi.fn()) => renderWithProviders(_jsx(DynamicFlowWise, { flowId: "persist-async-test-flow", httpClient: httpClient, initialStep: initialStep, onError: onError, onCompletion: () => { } }));
     describe('with a string schema', () => {
         const getStepWithStringSchema = () => getStepWithPersisAsync({ type: 'string', title: 'Credit Card Number' });
@@ -199,6 +217,21 @@ describe('Persist Async', () => {
                 await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
                 expect(screen.getByText('Server-side error')).toBeInTheDocument();
             });
+            it('should set component errors if persist async fails (server error message) (schema not wrapped in object)', async () => {
+                const mockHttpClient = vi
+                    .fn()
+                    .mockResolvedValue(respondWith({ validation: { value: 'Server-side error' } }, { status: 422 }));
+                const step = getStepWithPersistAsyncNoObject({
+                    type: 'string',
+                    title: 'Credit Card Number',
+                });
+                renderDF(mockHttpClient, step);
+                const input = screen.getByRole('textbox', { name: 'Credit Card Number' });
+                await user.type(input, '1111-1111-1111-1111');
+                await user.tab();
+                await waitFor(() => expect(mockHttpClient).toHaveBeenCalledTimes(1));
+                expect(screen.getByText('Server-side error')).toBeInTheDocument();
+            });
             test.each([
                 ['null, 404', new Response(null, { status: 404 })],
                 ['wrong, 200', new Response(JSON.stringify({ wrongId: 'wishful-token' }), { status: 200 })],