How to use the @webiny/commodo.fields function in @webiny/commodo

export default ({ context, FormSettings }) => {

    // When installing the FormBuilder app on a blank system, defaultLocale will be blank, because I18N app wasn't
    // installed yet, meaning no default locale was selected.
    let defaultLocale = null;
    if (context.i18n.getDefaultLocale()) {
        defaultLocale = context.i18n.getDefaultLocale().id;
    }

    return withFields({
        layout: fields({
            value: {},
            instanceOf: withFields({
                renderer: string({ value: "default" })
            })()
        }),
        submitButtonLabel: i18nString({ context }),
        successMessage: i18nObject({ context }),
        termsOfServiceMessage: fields({
            instanceOf: withFields({
                message: i18nObject({ context }),
                errorMessage: i18nString({ context }),
                enabled: boolean()
            })()
        }),
        reCaptcha: fields({
            instanceOf: flow(

// installed yet, meaning no default locale was selected.
    let defaultLocale = null;
    if (context.i18n.getDefaultLocale()) {
        defaultLocale = context.i18n.getDefaultLocale().id;
    }

    return withFields({
        layout: fields({
            value: {},
            instanceOf: withFields({
                renderer: string({ value: "default" })
            })()
        }),
        submitButtonLabel: i18nString({ context }),
        successMessage: i18nObject({ context }),
        termsOfServiceMessage: fields({
            instanceOf: withFields({
                message: i18nObject({ context }),
                errorMessage: i18nString({ context }),
                enabled: boolean()
            })()
        }),
        reCaptcha: fields({
            instanceOf: flow(
                withProps({
                    settings: {
                        get enabled() {
                            return new Promise(async resolve => {
                                const settings = await FormSettings.load();
                                resolve(Boolean(get(settings, "data.reCaptcha.enabled")));
                            });
                        },

withFields(instance => ({
            key: setOnce()(string({ value: SETTINGS_KEY })),
            data: fields({
                instanceOf: withFields({
                    enabled: boolean(),
                    apiKey: onSet(value => {
                        if (value && value !== instance.apiKey) {
                            instance.registerHookCallback("beforeSave", async () => {
                                console.log("TODO: setOnce");

                                const mailchimp = new MailchimpApi({ apiKey: value });
                                const valid = await mailchimp.isValidApiKey();
                                if (!valid) {
                                    throw Error("API key invalid.");
                                }
                            });
                        }
                        return value;
                    })(string())

apply({ fields: settingsFields }) {
            settingsFields.seo = fields({
                value: {},
                instanceOf: withFields({
                    title: string(),
                    description: string(),
                    meta: fields({
                        list: true,
                        value: [],
                        instanceOf: withFields({
                            name: string(),
                            content: string()
                        })()
                    })
                })()
            });
        }
    },

withFields({
            key: setOnce()(string({ value: SETTINGS_KEY })),
            data: fields({
                instanceOf: withFields({
                    enabled: boolean(),
                    position: string({
                        value: "bottom",
                        validation: validation.create("in:bottom:top:bottom-left:bottom-right")
                    }),
                    palette: fields({
                        instanceOf: withFields({
                            popup: fields({ instanceOf: ColorsModel }),
                            button: fields({ instanceOf: ColorsModel })
                        })()
                    }),
                    content: fields({
                        instanceOf: withFields({
                            href: string(),
                            message: string(),
                            dismiss: string(),
                            link: string()
                        })()
                    })
                })()
            })
        })
    )(createBase());
};

const { id } = context.commodo.fields;

    return flow(
        withName("Settings"),
        withStaticProps({
            async load() {
                return await this.findOne({ query: { key: SETTINGS_KEY } });
            }
        }),
        withFields({
            key: setOnce()(string({ value: SETTINGS_KEY })),
            data: fields({
                value: {},
                instanceOf: withFields({
                    pages: fields({
                        instanceOf: withFields({
                            home: id(),
                            notFound: id(),
                            error: id()
                        })()
                    }),
                    installation: fields({ instanceOf: InstallationFields, value: {} }),
                    name: string(),
                    domain: string(),
                    favicon: id(),
                    logo: id(),
                    social: fields({
                        instanceOf: withFields({
                            facebook: string(),
                            twitter: string(),
                            instagram: string(),

form: fields({
                instanceOf: withFields({
                    parent: ref({
                        parent: instance,
                        instanceOf: Form,
                        validation: validation.create("required")
                    }),
                    revision: ref({
                        parent: instance,
                        instanceOf: Form,
                        validation: validation.create("required")
                    })
                })()
            }),
            data: object({ validation: validation.create("required") }),
            meta: fields({
                instanceOf: withFields({
                    ip: string({ validation: validation.create("required") }),
                    locale: string({ validation: validation.create("required") }),
                    submittedOn: skipOnPopulate()(
                        date({ validation: validation.create("required") })
                    )
                })()
            }),
            logs: fields({
                list: true,
                value: [],
                instanceOf: withFields({
                    type: string({
                        validation: validation.create("required,in:error:warning:info:success"),
                        message: string(),
                        data: object(),

apply({ fields: settingsFields }) {
            settingsFields.seo = fields({
                value: {},
                instanceOf: withFields({
                    title: string(),
                    description: string(),
                    meta: fields({
                        list: true,
                        value: [],
                        instanceOf: withFields({
                            name: string(),
                            content: string()
                        })()
                    })
                })()
            });
        }
    },

instanceOf: Form,
                        validation: validation.create("required")
                    })
                })()
            }),
            data: object({ validation: validation.create("required") }),
            meta: fields({
                instanceOf: withFields({
                    ip: string({ validation: validation.create("required") }),
                    locale: string({ validation: validation.create("required") }),
                    submittedOn: skipOnPopulate()(
                        date({ validation: validation.create("required") })
                    )
                })()
            }),
            logs: fields({
                list: true,
                value: [],
                instanceOf: withFields({
                    type: string({
                        validation: validation.create("required,in:error:warning:info:success"),
                        message: string(),
                        data: object(),
                        createdOn: date({ value: new Date() })
                    })
                })()
            })
        })),
        withHooks({

data: fields({
                value: {},
                instanceOf: withFields({
                    pages: fields({
                        instanceOf: withFields({
                            home: id(),
                            notFound: id(),
                            error: id()
                        })()
                    }),
                    installation: fields({ instanceOf: InstallationFields, value: {} }),
                    name: string(),
                    domain: string(),
                    favicon: id(),
                    logo: id(),
                    social: fields({
                        instanceOf: withFields({
                            facebook: string(),
                            twitter: string(),
                            instagram: string(),
                            image: id()
                        })()
                    })
                })()
            })
        })
    )(createBase());
};