@rocket.chat/onboarding-ui
Version:
Set of components and functions for the onboarding experience on Rocket.Chat
17 lines • 5.37 kB
JavaScript
;
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 RequestTrialForm = ({ defaultValues, organizationSizeOptions, countryOptions, onSubmit, validateEmail, termsHref = 'https://rocket.chat/terms', policyHref = 'https://rocket.chat/privacy', }) => {
const { t } = (0, react_i18next_1.useTranslation)();
const { handleSubmit, register, control, formState: { isValidating, isSubmitting, isValid, errors }, } = (0, react_hook_form_1.useForm)({ mode: 'onChange' });
return ((0, jsx_runtime_1.jsxs)(layout_1.Form, { onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsxs)(fuselage_1.FieldGroup, { children: [(0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { children: t('form.requestTrialForm.fields.emailAddress.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(fuselage_1.EmailInput, { ...register('email', {
validate: validateEmail,
required: true,
}), placeholder: t('form.requestTrialForm.fields.emailAddress.placeholder'), defaultValue: defaultValues?.email, error: errors?.email?.message || undefined }) }), errors?.email && (0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { children: errors.email.message })] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { children: t('form.requestTrialForm.fields.organizationName.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(fuselage_1.TextInput, { ...register('organizationName', { required: true }), placeholder: t('form.requestTrialForm.fields.organizationName.placeholder'), defaultValue: defaultValues?.organizationName }) }), errors?.organizationName && ((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: t('form.requestTrialForm.fields.organizationSize.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'organizationSize', control: control, rules: { required: true }, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.Select, { ...field, options: organizationSizeOptions, placeholder: t('form.requestTrialForm.fields.organizationSize.placeholder'), error: errors?.email?.message || undefined })), defaultValue: defaultValues?.organizationSize }) })] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { children: t('form.requestTrialForm.fields.country.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'country', control: control, rules: { required: true }, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.SelectFiltered, { ...field, options: countryOptions, width: 'full', placeholder: t('form.requestTrialForm.fields.country.placeholder') })), defaultValue: defaultValues?.country }) })] }), (0, jsx_runtime_1.jsx)(fuselage_1.Field, { children: (0, jsx_runtime_1.jsxs)(fuselage_1.Box, { mbs: 24, children: [(0, jsx_runtime_1.jsxs)(fuselage_1.Box, { mbe: 8, display: 'flex', flexDirection: 'row', alignItems: 'flex-start', fontScale: 'c1', lineHeight: 20, children: [(0, jsx_runtime_1.jsx)(fuselage_1.CheckBox, { mie: 8, ...register('updates') }), ' ', (0, jsx_runtime_1.jsx)(fuselage_1.Box, { is: 'label', htmlFor: 'updates', children: t('form.registeredServerForm.keepInformed') })] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', color: 'default', fontScale: 'c1', lineHeight: 20, children: [(0, jsx_runtime_1.jsx)(fuselage_1.CheckBox, { mie: 8, ...register('agreement', { required: true }) }), ' ', (0, jsx_runtime_1.jsx)(fuselage_1.Box, { is: 'label', htmlFor: 'agreement', withRichContent: true, 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: termsHref, target: '_blank', rel: 'noopener noreferrer', children: "Terms and Conditions" }), "and", (0, jsx_runtime_1.jsx)("a", { href: policyHref, target: '_blank', rel: 'noopener noreferrer', children: "Privacy Policy" })] }) })] })] }) }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { children: t('form.requestTrialForm.hasWorkspace.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldDescription, { children: t('form.requestTrialForm.hasWorkspace.description') })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Form.Footer, { children: (0, jsx_runtime_1.jsx)(fuselage_1.Button, { type: 'submit', primary: true, loading: isValidating || isSubmitting, disabled: !isValid, children: t('form.requestTrialForm.button.text') }) })] }));
};
exports.default = RequestTrialForm;
//# sourceMappingURL=RequestTrialForm.js.map