@rocket.chat/onboarding-ui/dist/cjs/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.js

Set of components and functions for the onboarding experience on Rocket.Chat

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const fuselage_1 = require("@rocket.chat/fuselage");
const layout_1 = require("@rocket.chat/layout");
const react_hook_form_1 = require("react-hook-form");
const react_i18next_1 = require("react-i18next");
const InformationTooltipTrigger_1 = __importDefault(require("../../common/InformationTooltipTrigger"));
const WorkspaceUrlInput_1 = __importDefault(require("./WorkspaceUrlInput"));
const CreateCloudWorkspaceForm = ({ defaultValues, onSubmit, domain, serverRegionOptions, languageOptions, onBackButtonClick, validateUrl, validateEmail, }) => {
    const { t } = (0, react_i18next_1.useTranslation)();
    const { register, control, handleSubmit, setValue, formState: { isValid, isValidating, isSubmitting, errors }, } = (0, react_hook_form_1.useForm)({ mode: 'onChange' });
    const onNameBlur = (e) => {
        const fieldValue = e.target.value;
        const workspaceURL = fieldValue.replace(/[^a-zA-Z0-9-]/g, '').toLowerCase();
        setValue('workspaceURL', workspaceURL, { shouldValidate: true });
    };
    return ((0, jsx_runtime_1.jsxs)(layout_1.Form, { onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsx)(layout_1.Form.Header, { children: (0, jsx_runtime_1.jsx)(layout_1.Form.Title, { children: t('form.createCloudWorkspace.title') }) }), (0, jsx_runtime_1.jsxs)(fuselage_1.FieldGroup, { mbs: 16, children: [(0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { children: t('form.createCloudWorkspace.fields.orgEmaillabel') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(fuselage_1.EmailInput, { ...register('organizationEmail', {
                                        required: true,
                                        validate: validateEmail,
                                    }), defaultValue: defaultValues?.organizationEmail, error: errors?.organizationEmail?.type || undefined }) }), errors?.organizationEmail && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { children: errors.organizationEmail.message }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { children: (0, jsx_runtime_1.jsx)(fuselage_1.Box, { display: 'inline', mie: 8, children: t('form.createCloudWorkspace.fields.workspaceNamelabel') }) }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(fuselage_1.TextInput, { ...register('workspaceName', { required: true }), defaultValue: defaultValues?.workspaceName, error: errors?.workspaceName?.type || undefined, onBlur: onNameBlur }) }), errors.workspaceName && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { children: t('component.form.requiredField') }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { children: (0, jsx_runtime_1.jsx)(fuselage_1.Box, { display: 'inline', mie: 8, children: t('form.createCloudWorkspace.fields.workspaceUrllabel') }) }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(WorkspaceUrlInput_1.default, { domain: domain, ...register('workspaceURL', {
                                        required: true,
                                        validate: validateUrl,
                                    }), defaultValue: defaultValues?.workspaceURL }) }), errors?.workspaceURL && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { children: errors.workspaceURL.message }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Grid, { mb: 16, children: [(0, jsx_runtime_1.jsx)(fuselage_1.Grid.Item, { children: (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsxs)(fuselage_1.FieldLabel, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.Box, { display: 'inline', mie: 8, children: t('form.createCloudWorkspace.fields.serverRegionlabel') }), (0, jsx_runtime_1.jsx)(InformationTooltipTrigger_1.default, { text: t('form.createCloudWorkspace.fields.serverRegion.tooltip') })] }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'serverRegion', control: control, rules: { required: true }, defaultValue: defaultValues?.serverRegion, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.Select, { ...field, options: serverRegionOptions, placeholder: t('form.createCloudWorkspace.fields.serverRegionlabel') })) }) })] }) }), (0, jsx_runtime_1.jsx)(fuselage_1.Grid.Item, { children: (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsxs)(fuselage_1.FieldLabel, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.Box, { display: 'inline', mie: 8, children: t('form.createCloudWorkspace.fields.languagelabel') }), (0, jsx_runtime_1.jsx)(InformationTooltipTrigger_1.default, { text: t('form.createCloudWorkspace.fields.language.tooltip') })] }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'language', control: control, rules: { required: true }, defaultValue: defaultValues?.language, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.Select, { ...field, options: languageOptions, placeholder: t('form.createCloudWorkspace.fields.languagelabel') })) }) })] }) })] }), (0, jsx_runtime_1.jsx)(fuselage_1.Divider, { mb: 0 }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsxs)(fuselage_1.FieldRow, { justifyContent: 'flex-start', children: [(0, jsx_runtime_1.jsx)(fuselage_1.CheckBox, { ...register('agreement', { required: true }), mie: 8 }), (0, jsx_runtime_1.jsx)(fuselage_1.Box, { is: 'label', htmlFor: 'agreement', withRichContent: true, fontScale: 'c1', children: (0, jsx_runtime_1.jsxs)(react_i18next_1.Trans, { i18nKey: 'component.form.termsAndConditions', children: ["I agree with", (0, jsx_runtime_1.jsx)("a", { href: 'https://rocket.chat/terms', target: '_blank', rel: 'noopener noreferrer', children: "Terms and Conditions" }), "and", (0, jsx_runtime_1.jsx)("a", { href: 'https://rocket.chat/privacy', target: '_blank', rel: 'noopener noreferrer', children: "Privacy Policy" })] }) })] }), errors.agreement?.type === 'required' && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { children: t('component.form.requiredField') }))] }), (0, jsx_runtime_1.jsx)(fuselage_1.Field, { children: (0, jsx_runtime_1.jsxs)(fuselage_1.FieldRow, { justifyContent: 'flex-start', children: [(0, jsx_runtime_1.jsx)(fuselage_1.CheckBox, { ...register('updates'), mie: 8 }), (0, jsx_runtime_1.jsx)(fuselage_1.Box, { fontScale: 'c1', children: t('form.createCloudWorkspace.fields.keepMeInformed') })] }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Form.Footer, { children: (0, jsx_runtime_1.jsxs)(fuselage_1.ButtonGroup, { children: [onBackButtonClick && ((0, jsx_runtime_1.jsx)(fuselage_1.Button, { disabled: isSubmitting, onClick: onBackButtonClick, children: t('component.form.action.back') })), (0, jsx_runtime_1.jsx)(fuselage_1.Button, { type: 'submit', primary: true, disabled: !isValid, loading: isSubmitting || isValidating, children: t('component.form.action.next') })] }) })] }));
};
exports.default = CreateCloudWorkspaceForm;
//# sourceMappingURL=CreateCloudWorkspaceForm.js.map