@rocket.chat/onboarding-ui
Version:
Set of components and functions for the onboarding experience on Rocket.Chat
34 lines • 7.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const fuselage_1 = require("@rocket.chat/fuselage");
const fuselage_hooks_1 = require("@rocket.chat/fuselage-hooks");
const layout_1 = require("@rocket.chat/layout");
const react_1 = require("react");
const react_hook_form_1 = require("react-hook-form");
const react_i18next_1 = require("react-i18next");
const OrganizationInfoForm = ({ currentStep, stepCount, organizationIndustryOptions, organizationSizeOptions, countryOptions, nextStep, initialValues, onSubmit, onBackButtonClick, onClickSkip, }) => {
const { t } = (0, react_i18next_1.useTranslation)();
const breakpoints = (0, fuselage_hooks_1.useBreakpoints)();
const isMobile = !breakpoints.includes('md');
const formId = (0, react_1.useId)();
const organizationNameField = (0, react_1.useId)();
const organizationIndustryField = (0, react_1.useId)();
const organizationSizeField = (0, react_1.useId)();
const countryField = (0, react_1.useId)();
const organizationInfoFormRef = (0, react_1.useRef)(null);
const { control, handleSubmit, formState: { isValidating, isSubmitting, errors }, } = (0, react_hook_form_1.useForm)({
defaultValues: initialValues,
mode: 'onBlur',
});
(0, react_1.useEffect)(() => {
if (organizationInfoFormRef.current) {
organizationInfoFormRef.current.focus();
}
}, []);
return ((0, jsx_runtime_1.jsxs)(layout_1.Form, { ref: organizationInfoFormRef, tabIndex: -1, "aria-labelledby": `${formId}-title`, "aria-describedby": `${formId}-description`, onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsxs)(layout_1.Form.Header, { children: [(0, jsx_runtime_1.jsx)(layout_1.Form.Steps, { currentStep: currentStep, stepCount: stepCount }), (0, jsx_runtime_1.jsx)(layout_1.Form.Title, { id: `${formId}-title`, children: t('form.organizationInfoForm.title') }), (0, jsx_runtime_1.jsx)(layout_1.Form.Subtitle, { id: `${formId}-description`, children: t('form.organizationInfoForm.subtitle') })] }), (0, jsx_runtime_1.jsx)(layout_1.Form.Container, { 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, { required: true, htmlFor: organizationNameField, children: t('form.organizationInfoForm.fields.organizationName.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'organizationName', control: control, rules: {
required: t('component.form.requiredField'),
}, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.TextInput, { ...field, placeholder: t('form.organizationInfoForm.fields.organizationName.placeholder'), "aria-describedby": `${organizationNameField}-error}`, "aria-required": 'true', "aria-invalid": Boolean(errors.organizationName), id: organizationNameField })) }) }), errors.organizationName && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${organizationNameField}-error}`, children: t('component.form.requiredField') }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { required: true, htmlFor: organizationIndustryField, children: t('form.organizationInfoForm.fields.organizationIndustry.label') }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldRow, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'organizationIndustry', control: control, rules: { required: t('component.form.requiredField') }, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.Select, { ...field, options: organizationIndustryOptions, placeholder: t('form.organizationInfoForm.fields.organizationIndustry.placeholder'), "aria-required": 'true', "aria-invalid": Boolean(errors.organizationIndustry), "aria-describedby": `${organizationIndustryField}-error}`, id: organizationIndustryField })) }) }), errors.organizationIndustry && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${organizationIndustryField}-error}`, children: t('component.form.requiredField') }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { required: true, htmlFor: organizationSizeField, children: t('form.organizationInfoForm.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: t('component.form.requiredField') }, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.Select, { ...field, options: organizationSizeOptions, placeholder: t('form.organizationInfoForm.fields.organizationSize.placeholder'), "aria-required": 'true', "aria-invalid": Boolean(errors.organizationSize), "aria-describedby": `${organizationSizeField}-error}`, id: organizationSizeField })) }) }), errors.organizationSize && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${organizationSizeField}-error}`, children: t('component.form.requiredField') }))] }), (0, jsx_runtime_1.jsxs)(fuselage_1.Field, { children: [(0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { required: true, htmlFor: countryField, children: t('form.organizationInfoForm.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: t('component.form.requiredField') }, render: ({ field }) => ((0, jsx_runtime_1.jsx)(fuselage_1.Select, { ...field, options: countryOptions, placeholder: t('form.organizationInfoForm.fields.country.placeholder'), "aria-required": 'true', "aria-invalid": Boolean(errors.country), "aria-describedby": `${countryField}-error}`, id: countryField })) }) }), errors.country && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${countryField}-error}`, children: t('component.form.requiredField') }))] })] }) }), (0, jsx_runtime_1.jsx)(layout_1.Form.Footer, { children: (0, jsx_runtime_1.jsxs)(fuselage_1.ButtonGroup, { vertical: isMobile, 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, loading: isValidating || isSubmitting, children: nextStep ?? t('component.form.action.next') }), onClickSkip && ((0, jsx_runtime_1.jsx)(fuselage_1.Box, { withTruncatedText: true, flexGrow: 1, children: (0, jsx_runtime_1.jsx)(fuselage_1.ButtonGroup, { align: 'end', children: (0, jsx_runtime_1.jsx)(layout_1.ActionLink, { onClick: onClickSkip, children: t('component.form.action.skip') }) }) }))] }) })] }));
};
exports.default = OrganizationInfoForm;
//# sourceMappingURL=OrganizationInfoForm.js.map