@wise/dynamic-flow-client 5.30.0-experimental-7a76ef5 → 5.30.0

package/build/domain/mappers/schema/objectSchemaToComponent/objectSchemaToObjectComponent.js

@@ -0,0 +1,32 @@
+import { isObjectLocalValue, isObjectModel } from '../../../../utils/type-utils';
+import { createObjectComponent } from '../../../components/ObjectComponent';
+import { mapSchemaToComponent } from '../../mapSchemaToComponent';
+import { isObject } from '../../../../utils/type-validators';
+import { mapCommonSchemaProps } from '../utils/mapCommonSchemaProps';
+import { assertDisplayOrder } from './assertDisplayOrder';
+export const objectSchemaToObjectComponent = (schemaMapperProps, mapperProps) => {
+    assertDisplayOrder(schemaMapperProps.schema, mapperProps.logEvent);
+    const componentMap = createComponentMap(schemaMapperProps, mapperProps, 'obj');
+    return createObjectComponent(Object.assign(Object.assign({}, mapCommonSchemaProps(schemaMapperProps)), { displayOrder: schemaMapperProps.schema.displayOrder, componentMap }));
+};
+export const createComponentMap = (schemaMapperProps, mapperProps, uidPrefix) => {
+    const { uid, localValue, schema, model, validationErrors, onValueChange } = schemaMapperProps;
+    const { $id, displayOrder, properties, required } = schema;
+    const initialReducerValue = {};
+    return displayOrder.reduce((acc, propName) => {
+        var _a;
+        const propSchema = properties[propName];
+        if (propSchema === undefined) {
+            throw new Error(`Object schema ${$id} has no property named ${propName}`);
+        }
+        return Object.assign(Object.assign({}, acc), { [propName]: mapSchemaToComponent({
+                uid: `${uid}.${uidPrefix}-${propName}`,
+                schema: propSchema,
+                model: isObjectModel(model) ? model[propName] : null,
+                localValue: isObjectLocalValue(localValue) ? localValue[propName] : null,
+                required: (_a = required === null || required === void 0 ? void 0 : required.includes(propName)) !== null && _a !== void 0 ? _a : false,
+                validationErrors: isObject(validationErrors) ? validationErrors[propName] : undefined,
+                onValueChange,
+            }, mapperProps) });
+    }, initialReducerValue);
+};

package/build/domain/mappers/schema/objectSchemaToComponent/objectSchemaToObjectComponent.test.js

@@ -0,0 +1,99 @@
+import { getMockMapperProps, getMockSchemaMapperProps } from '../tests/test-utils';
+import { objectSchemaToObjectComponent } from './objectSchemaToObjectComponent';
+describe('objectSchemaToObjectComponent', () => {
+    const defaultMapperProps = getMockMapperProps();
+    describe('initial model handling', () => {
+        describe('when the initial model is null', () => {
+            it('sets component value to an empty object', async () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        type: 'object',
+                        properties: {},
+                        displayOrder: [],
+                    },
+                    model: null,
+                });
+                const component = objectSchemaToObjectComponent(schemaMapperProps, defaultMapperProps);
+                expect(await component.getSubmittableValue()).toStrictEqual({});
+            });
+            it('is still an empty object if child values have not been set', async () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        type: 'object',
+                        properties: {
+                            name: {
+                                type: 'string',
+                            },
+                            occupation: {
+                                type: 'string',
+                            },
+                        },
+                        displayOrder: ['name', 'occupation'],
+                    },
+                    model: null,
+                });
+                const component = objectSchemaToObjectComponent(schemaMapperProps, defaultMapperProps);
+                expect(await component.getSubmittableValue()).toStrictEqual({});
+            });
+        });
+        describe('when initial model is defined', () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    type: 'object',
+                    properties: {
+                        name: {
+                            type: 'string',
+                        },
+                        occupation: {
+                            type: 'string',
+                        },
+                    },
+                    displayOrder: ['name', 'occupation'],
+                },
+                model: {
+                    name: 'John Smith',
+                    city: 'New York',
+                },
+            });
+            it('sets the component value to the initial model', async () => {
+                const component = objectSchemaToObjectComponent(schemaMapperProps, defaultMapperProps);
+                expect(await component.getSubmittableValue()).toStrictEqual(expect.objectContaining({
+                    name: 'John Smith',
+                }));
+            });
+        });
+    });
+    describe('initial validation error handling', () => {
+        it('sets the initial error if provided', () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    type: 'object',
+                    properties: {
+                        name: {
+                            type: 'string',
+                        },
+                        occupation: {
+                            type: 'string',
+                        },
+                    },
+                    displayOrder: ['name', 'occupation'],
+                },
+                model: {
+                    name: 'Jane Doe',
+                    occupation: 'Programmer',
+                },
+                validationErrors: {
+                    name: 'Problem with this name',
+                    occupation: 'Problem with this occupation',
+                },
+            });
+            const component = objectSchemaToObjectComponent(schemaMapperProps, defaultMapperProps);
+            expect(component.componentMap.name.errors).toStrictEqual([
+                'Problem with this name',
+            ]);
+            expect(component.componentMap.occupation.errors).toStrictEqual([
+                'Problem with this occupation',
+            ]);
+        });
+    });
+});

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

@@ -0,0 +1,67 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { isAllOfSchema, isArrayTupleSchema, isObjectSchema } from '../../../../utils/type-utils';
+import { createSelectInputComponent } from '../../../components/SelectInputComponent';
+import { getSchemaOnChange } from '../../../features/schema-on-change/getSchemaOnChange';
+import { getRequiredCheck } from '../../../features/validation/value-checks';
+import { mapSchemaToComponent } from '../../mapSchemaToComponent';
+import { getAutocompleteString } from '../../utils/getAutocompleteString';
+import { getDomainLayerMedia } from '../../utils/media-utils';
+import { mapInlineAlert } from '../../utils/utils';
+import { mapCommonSchemaProps } from '../utils/mapCommonSchemaProps';
+export const oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
+    var _a;
+    const { uid, localValue, schema, model, validationErrors: initialError, required = false, onValueChange, } = schemaMapperProps;
+    const initialModel = (_a = model !== null && model !== void 0 ? model : schema.default) !== null && _a !== void 0 ? _a : null;
+    const options = schema.oneOf.map((childSchema, index) => {
+        var _a;
+        const { title = '', description, image, icon, media, keywords = [], tags, additionalText, inlineAlert, supportingValues, } = childSchema;
+        return {
+            title,
+            description,
+            additionalText,
+            analyticsId: (_a = childSchema.analyticsId) !== null && _a !== void 0 ? _a : childSchema.$id,
+            disabled: 'disabled' in childSchema ? Boolean(childSchema.disabled) : false,
+            inlineAlert: mapInlineAlert(inlineAlert),
+            keywords,
+            media: getDomainLayerMedia({ icon, image, media }),
+            supportingValues,
+            tags,
+            component: mapSchemaToComponent({
+                uid: `${uid}.oneOf-${index}`,
+                schema: isFormSectionSchema(childSchema)
+                    ? supressSchemaTitleAndDescription(childSchema)
+                    : childSchema,
+                model: initialModel,
+                localValue,
+                validationErrors: initialError,
+                required,
+                onValueChange,
+            }, mapperProps),
+        };
+    });
+    const { getErrorMessageFunctions, onComponentUpdate, trackEvent, onBehavior } = mapperProps;
+    const { validationMessages } = schema;
+    const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
+    return createSelectInputComponent(Object.assign(Object.assign({}, mapCommonSchemaProps(schemaMapperProps)), { autoComplete: getAutocompleteString(schema.autocompleteHint), checks: schema.hidden ? [] : [getRequiredCheck(required, errorMessageFunctions)], options,
+        initialModel, schemaOnChange: getSchemaOnChange(schema, onBehavior), onValueChange,
+        trackEvent }), onComponentUpdate);
+};
+const isFormSectionSchema = (schema) => isObjectSchema(schema) || isArrayTupleSchema(schema) || isAllOfSchema(schema);
+/**
+ * When using a schema in a oneOf, the title is not needed, as it is already displayed in the dropdown, radio or tab.
+ * We also suppress the description, because it is not displayed on mobile clients.
+ */
+const supressSchemaTitleAndDescription = (schema) => {
+    const { title, description } = schema, headlessSchema = __rest(schema, ["title", "description"]);
+    return headlessSchema;
+};

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

@@ -0,0 +1,225 @@
+import { getMockMapperProps, getMockSchemaMapperProps } from '../tests/test-utils';
+import { oneOfSchemaToComponent } from './oneOfSchemaToComponent';
+describe('oneOfSchemaToComponent', () => {
+    describe('initial model handling', () => {
+        describe('when initial model is null', () => {
+            it('sets component value to null', async () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        oneOf: [{ const: 'EUR' }, { const: 'USD' }, { const: 'GBP' }],
+                    },
+                    model: null,
+                });
+                const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
+                expect(await component.getSubmittableValue()).toBeNull();
+            });
+        });
+    });
+    describe('when a default is provided', () => {
+        it('initialises the value to the default', async () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    oneOf: [{ const: 'EUR' }, { const: 'USD' }, { const: 'GBP' }],
+                    default: 'USD',
+                },
+                model: null,
+            });
+            const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
+            expect(await component.getSubmittableValue()).toBe('USD');
+        });
+    });
+    describe('when initial model is defined', () => {
+        it('sets the component value to the initial model', async () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    oneOf: [{ const: 'EUR' }, { const: 'USD' }, { const: 'GBP' }],
+                },
+                model: 'USD',
+            });
+            const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
+            expect(await component.getSubmittableValue()).toBe('USD');
+        });
+    });
+    describe('when a default and a model are provided', () => {
+        it('prefers the model over the default', async () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    oneOf: [{ const: 'EUR' }, { const: 'USD' }, { const: 'GBP' }],
+                    default: 'EUR',
+                },
+                model: 'USD',
+            });
+            const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
+            expect(await component.getSubmittableValue()).toBe('USD');
+        });
+    });
+    describe('initial validation error handling', () => {
+        it('sets the initial error if provided', () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    oneOf: [{ const: 'EUR' }, { const: 'USD' }, { const: 'GBP' }],
+                },
+                model: null,
+                validationErrors: 'You must select a currency',
+            });
+            const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
+            expect(component.errors).toEqual(['You must select a currency']);
+        });
+    });
+    describe('validation checks', () => {
+        describe('when required is true but the model is null', () => {
+            it('fails validation', () => {
+                const schemaMapperProps = Object.assign(Object.assign({}, getMockSchemaMapperProps({
+                    schema: {
+                        oneOf: [{ const: 'EUR' }, { const: 'USD' }, { const: 'GBP' }],
+                    },
+                    model: null,
+                })), { required: true });
+                const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
+                expect(component.validate()).toBe(false);
+                expect(component.errors).toStrictEqual(['required']);
+            });
+        });
+        describe('when required is true but the model is not null', () => {
+            it('passes validation', () => {
+                const schemaMapperProps = Object.assign(Object.assign({}, getMockSchemaMapperProps({
+                    schema: {
+                        oneOf: [{ const: 'EUR' }, { const: 'USD' }, { const: 'GBP' }],
+                    },
+                    model: 'EUR',
+                })), { required: true });
+                const component = oneOfSchemaToComponent(schemaMapperProps, getMockMapperProps());
+                expect(component.validate()).toBe(true);
+            });
+        });
+    });
+    describe('analytics', () => {
+        describe('when selecting an option that is a const schema', () => {
+            it('triggers an event', () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        analyticsId: 'currency',
+                        oneOf: [
+                            { const: 'EUR', analyticsId: 'EUR' },
+                            { const: 'USD', analyticsId: 'USD' },
+                            { const: 'GBP', analyticsId: 'GBP' },
+                        ],
+                    },
+                    model: null,
+                });
+                const defaultMapperProps = getMockMapperProps();
+                const component = oneOfSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                component.selectIndex(1);
+                expect(defaultMapperProps.trackEvent).toHaveBeenCalledWith('OneOf Selected', {
+                    oneOfId: 'currency',
+                    schemaId: 'USD',
+                });
+            });
+            it('uses $id in the absence of analyticsId', () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        $id: 'currency',
+                        oneOf: [
+                            { const: 'EUR', $id: 'EUR' },
+                            { const: 'USD', $id: 'USD' },
+                            { const: 'GBP', $id: 'GBP' },
+                        ],
+                    },
+                    model: null,
+                });
+                const defaultMapperProps = getMockMapperProps();
+                const component = oneOfSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                component.selectIndex(1);
+                expect(defaultMapperProps.trackEvent).toHaveBeenCalledWith('OneOf Selected', {
+                    oneOfId: 'currency',
+                    schemaId: 'USD',
+                });
+            });
+            it('favours analyticsId over $id', () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        analyticsId: 'currency',
+                        $id: 'currency-$id',
+                        oneOf: [
+                            { const: 'EUR', analyticsId: 'EUR', $id: 'EUR-$id' },
+                            { const: 'USD', analyticsId: 'USD', $id: 'USD-$id' },
+                            { const: 'GBP', analyticsId: 'GBP', $id: 'GBP-$id' },
+                        ],
+                    },
+                    model: null,
+                });
+                const defaultMapperProps = getMockMapperProps();
+                const component = oneOfSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                component.selectIndex(1);
+                expect(defaultMapperProps.trackEvent).toHaveBeenCalledWith('OneOf Selected', {
+                    oneOfId: 'currency',
+                    schemaId: 'USD',
+                });
+            });
+            it(`doesn't trigger a 'OneOf Selected' event if the main schema doesn't have an analyticsId or $id, but it triggers 'OneOf Option Selected'`, () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        oneOf: [
+                            { const: 'EUR', analyticsId: 'EUR', $id: 'EUR-$id' },
+                            { const: 'USD', analyticsId: 'USD', $id: 'USD-$id' },
+                            { const: 'GBP', analyticsId: 'GBP', $id: 'GBP-$id' },
+                        ],
+                    },
+                    model: null,
+                });
+                const defaultMapperProps = getMockMapperProps();
+                const component = oneOfSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                component.selectIndex(1);
+                expect(defaultMapperProps.trackEvent).not.toHaveBeenCalledWith('OneOf Selected', expect.objectContaining({ oneOfId: '', schemaId: 'USD' }));
+                expect(defaultMapperProps.trackEvent).toHaveBeenCalledWith('OneOf Option Selected', expect.objectContaining({ selectedOption: 'USD', schema: '' }));
+            });
+            it('does trigger an event if the selected option doesnt have an analyticsId or $id', () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        analyticsId: 'currency',
+                        oneOf: [{ const: 'EUR' }, { const: 'USD' }, { const: 'GBP' }],
+                    },
+                    model: null,
+                });
+                const defaultMapperProps = getMockMapperProps();
+                const component = oneOfSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                component.selectIndex(1);
+                expect(defaultMapperProps.trackEvent).toHaveBeenCalledWith('OneOf Selected', {
+                    oneOfId: 'currency',
+                    schemaId: undefined,
+                });
+            });
+        });
+        describe('when selecting an option that is an object schema', () => {
+            it('triggers an event', () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        analyticsId: 'options-a-or-b',
+                        oneOf: [
+                            {
+                                type: 'object',
+                                analyticsId: 'option-A',
+                                displayOrder: ['name'],
+                                properties: { name: { type: 'string' } },
+                            },
+                            {
+                                type: 'object',
+                                analyticsId: 'option-B',
+                                displayOrder: ['name'],
+                                properties: { name: { type: 'string' } },
+                            },
+                        ],
+                    },
+                    model: null,
+                });
+                const defaultMapperProps = getMockMapperProps();
+                const component = oneOfSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                component.selectIndex(1);
+                expect(defaultMapperProps.trackEvent).toHaveBeenCalledWith('OneOf Selected', {
+                    oneOfId: 'options-a-or-b',
+                    schemaId: 'option-B',
+                });
+            });
+        });
+    });
+});

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

@@ -0,0 +1,29 @@
+import { createPersistAsyncComponent } from '../../components/PersistAsyncComponent';
+import { getSchemaOnChange } from '../../features/schema-on-change/getSchemaOnChange';
+import { mapSchemaToComponent } from '../mapSchemaToComponent';
+import { getPerformPersistAsyncFn } from './utils/getPerformPersistAsyncFn';
+// Only some component types are supported for persistAsync
+const isSupported = (type) => ['const', 'boolean', 'text', 'date', 'integer', 'number', 'upload'].includes(type);
+export const persistAsyncSchemaToComponent = (schemaMapperProps, mapperProps) => {
+    const { uid, schema, model, localValue } = schemaMapperProps;
+    const { persistAsync, tags } = schema;
+    const performPersistAsync = getPerformPersistAsyncFn(schema, persistAsync, mapperProps);
+    const onPersistAsync = async () => paComponent.persist().then(() => { });
+    const childComponent = mapSchemaToComponent(Object.assign(Object.assign({}, schemaMapperProps), { uid: `${uid}-persist`, schema: persistAsync.schema, onPersistAsync }), mapperProps);
+    if (!isSupported(childComponent.type)) {
+        return childComponent;
+    }
+    const paComponent = createPersistAsyncComponent({
+        uid,
+        // This should be `schema.hidden ?? false`
+        // but some steps are setting PA schemas as hidden for no good reason
+        // so we default to false here to avoid hiding the the children of the PA component
+        hidden: false,
+        component: childComponent,
+        schemaId: schema.$id,
+        model,
+        localValue,
+        tags,
+    }, performPersistAsync, getSchemaOnChange(schema, mapperProps.onBehavior), mapperProps.onComponentUpdate);
+    return paComponent;
+};

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

@@ -0,0 +1,18 @@
+import { stringSchemaToUploadInputComponent } from './stringSchemaToUploadInputComponent';
+import { stringSchemaToTextInputComponent } from './stringSchemaToTextInputComponent';
+import { dateSchemaToComponent } from '../dateSchemaToComponent';
+export const stringSchemaToComponent = (schemaMapperProps, mapperProps) => {
+    const { schema } = schemaMapperProps;
+    if (isStringSchemaWithBase64(schema)) {
+        return stringSchemaToUploadInputComponent(Object.assign(Object.assign({}, schemaMapperProps), { schema }), mapperProps);
+    }
+    switch (schema.format) {
+        case 'date':
+            return dateSchemaToComponent(Object.assign(Object.assign({}, schemaMapperProps), { schema: Object.assign(Object.assign({}, schema), { type: 'date' }) }), mapperProps);
+        default:
+            return stringSchemaToTextInputComponent(schemaMapperProps, mapperProps);
+    }
+};
+const isStringSchemaWithBase64 = (schema) => {
+    return schema.format === 'base64url' && !('persistAsync' in schema);
+};

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

@@ -0,0 +1,133 @@
+import { getMockMapperProps, getMockSchemaMapperProps } from '../tests/test-utils';
+import { stringSchemaToComponent } from './stringSchemaToComponent';
+describe('stringSchemaToComponent', () => {
+    const defaultMapperProps = getMockMapperProps();
+    describe('initial model handling', () => {
+        describe('when initial model is null', () => {
+            it('sets component value to null', async () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        type: 'string',
+                    },
+                    model: null,
+                });
+                const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                expect(await component.getSubmittableValue()).toBeNull();
+            });
+            describe('when a default is provided', () => {
+                it('initialises the value to the default', async () => {
+                    const schemaMapperProps = getMockSchemaMapperProps({
+                        schema: {
+                            type: 'string',
+                            default: 'John Smith',
+                        },
+                        model: null,
+                    });
+                    const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                    expect(await component.getSubmittableValue()).toBe('John Smith');
+                });
+            });
+        });
+        describe('when initial model is defined', () => {
+            it('sets the component value to the initial model', async () => {
+                const schemaMapperProps = getMockSchemaMapperProps({
+                    schema: {
+                        type: 'string',
+                    },
+                    model: 'John Smith',
+                });
+                const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                expect(await component.getSubmittableValue()).toBe('John Smith');
+            });
+            describe('when a default is provided', () => {
+                it('prefers the model over the default', async () => {
+                    const schemaMapperProps = getMockSchemaMapperProps({
+                        schema: {
+                            type: 'string',
+                            default: 'Jane Doe',
+                        },
+                        model: 'John Smith',
+                    });
+                    const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+                    expect(await component.getSubmittableValue()).toBe('John Smith');
+                });
+            });
+        });
+    });
+    describe('initial validation error handling', () => {
+        it('sets the initial error if provided', () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    type: 'string',
+                },
+                model: 'jane@doe.com',
+                validationErrors: 'An account with this email already exists',
+            });
+            const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+            expect(component.errors).toStrictEqual(['An account with this email already exists']);
+        });
+    });
+    describe('autocomplete', () => {
+        it('sets the autocomplete value', () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    type: 'string',
+                    autocompleteHint: ['name', 'shipping'],
+                },
+                model: 'John Smith',
+            });
+            const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+            expect(component.autoComplete).toBe('name shipping');
+        });
+    });
+    describe('validation checks', () => {
+        it('sets minimum length validation', () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    type: 'string',
+                    minLength: 10,
+                },
+                model: 'Jane',
+            });
+            const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+            expect(component.validate()).toBe(false);
+            expect(component.errors).toStrictEqual(['minLength']);
+        });
+        it('sets maximum length validation', () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    type: 'string',
+                    maxLength: 2,
+                },
+                model: 'Jane',
+            });
+            const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+            expect(component.validate()).toBe(false);
+            expect(component.errors).toStrictEqual(['maxLength']);
+        });
+        it('sets pattern validation', () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    type: 'string',
+                    pattern: '^[a-zA-Z]*$',
+                },
+                model: '012345',
+            });
+            const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+            expect(component.validate()).toBe(false);
+            expect(component.errors).toStrictEqual(['pattern']);
+        });
+        it('sets required validation', () => {
+            const schemaMapperProps = getMockSchemaMapperProps({
+                schema: {
+                    type: 'string',
+                },
+                model: null,
+                required: true,
+            });
+            const component = stringSchemaToComponent(schemaMapperProps, defaultMapperProps);
+            expect(component.validate()).toBe(false);
+            expect(component.errors).toStrictEqual(['required']);
+        });
+    });
+});

package/build/domain/mappers/schema/stringSchemaToComponent/stringSchemaToTextInputComponent.js

@@ -0,0 +1,38 @@
+import { createTextInputComponent } from '../../../components/TextInputComponent';
+import { isString } from '../../../../utils/type-validators';
+import { getSchemaOnChange } from '../../../features/schema-on-change/getSchemaOnChange';
+import { getAboveMaxLengthCheck, getBelowMinLengthCheck, getNotAdheringToPatternCheck, getStringRequiredCheck, } from '../../../features/validation/value-checks';
+import { getAutocompleteString } from '../../utils/getAutocompleteString';
+import { mapSuggestions } from '../../utils/suggestions-utils';
+import { getValidationAsyncInitialState } from '../utils/getValidationAsyncInitialState';
+import { mapCommonSchemaProps } from '../utils/mapCommonSchemaProps';
+export const stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
+    const { schema, localValue, model, required = false, onPersistAsync, onValueChange, } = schemaMapperProps;
+    const { autocapitalization, autocompleteHint, control, default: defaultValue, displayFormat, format, maxLength, minLength, pattern, suggestions, validationMessages, } = schema;
+    const { getErrorMessageFunctions, onComponentUpdate, onBehavior, logEvent } = mapperProps;
+    const controlForLegacyFormat = getControlForLegacyFormat(format);
+    const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
+    const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(schemaMapperProps, mapperProps);
+    const validLocalValue = isString(localValue) ? localValue : null;
+    const validModel = isString(model) ? model : (defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const value = onPersistAsync ? validLocalValue : validModel;
+    return createTextInputComponent(Object.assign(Object.assign({}, mapCommonSchemaProps(schemaMapperProps)), { autocapitalization, autoComplete: getAutocompleteString(autocompleteHint), checks: schema.hidden
+            ? []
+            : [
+                getStringRequiredCheck(required, errorMessageFunctions),
+                getAboveMaxLengthCheck(schema, errorMessageFunctions),
+                getBelowMinLengthCheck(schema, errorMessageFunctions),
+                getNotAdheringToPatternCheck(schema, errorMessageFunctions, { logEvent }),
+            ], control: control !== null && control !== void 0 ? control : controlForLegacyFormat, displayFormat,
+        maxLength,
+        minLength,
+        pattern, suggestions: mapSuggestions(suggestions, mapperProps.logEvent), value,
+        validationAsyncState, schemaOnChange: getSchemaOnChange(schema, onBehavior), performValidationAsync,
+        onValueChange }), onComponentUpdate);
+};
+const getControlForLegacyFormat = (format) => {
+    if (format && ['numeric', 'phone-number', 'email', 'password'].includes(format)) {
+        return format;
+    }
+    return undefined;
+};