@rocket.chat/onboarding-ui
Version:
Set of components and functions for the onboarding experience on Rocket.Chat
14 lines • 1.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const fuselage_1 = require("@rocket.chat/fuselage");
const react_hook_form_1 = require("react-hook-form");
const react_i18next_1 = require("react-i18next");
const AgreeTermsField = ({ agreementField, termsHref, policyHref, control, errors, }) => {
const { t } = (0, react_i18next_1.useTranslation)();
return ((0, jsx_runtime_1.jsxs)(fuselage_1.Field, { mbs: '24px', children: [(0, jsx_runtime_1.jsxs)(fuselage_1.FieldRow, { justifyContent: 'initial', children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: 'agreement', control: control, rules: {
required: t('component.form.requiredField'),
}, render: ({ field: { ref, name, onBlur, onChange, value } }) => ((0, jsx_runtime_1.jsx)(fuselage_1.CheckBox, { ref: ref, id: agreementField, onChange: onChange, onBlur: onBlur, name: name, checked: value, "aria-describedby": `${agreementField}-error`, "aria-invalid": Boolean(errors.agreement), "aria-required": 'true' })) }), (0, jsx_runtime_1.jsx)(fuselage_1.FieldLabel, { display: 'inline', htmlFor: agreementField, withRichContent: true, required: true, fontScale: 'c1', mis: 4, children: (0, jsx_runtime_1.jsxs)(react_i18next_1.Trans, { i18nKey: 'component.form.termsAndConditions', children: ["I agree with", (0, jsx_runtime_1.jsx)(fuselage_1.Box, { is: 'a', href: termsHref, target: '_blank', rel: 'noopener noreferrer', children: "Terms and Conditions" }), "and", (0, jsx_runtime_1.jsx)(fuselage_1.Box, { is: 'a', href: policyHref, target: '_blank', rel: 'noopener noreferrer', children: "Privacy Policy" })] }) })] }), errors.agreement && ((0, jsx_runtime_1.jsx)(fuselage_1.FieldError, { "aria-live": 'assertive', id: `${agreementField}-error`, children: t('component.form.requiredField') }))] }));
};
exports.default = AgreeTermsField;
//# sourceMappingURL=AgreeTermsField.js.map