diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 141b009559..4138e1f78c 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,12 +1,20 @@ diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json index d13256d144..5e66d6613e 100644 --- a/packages/onboarding-ui/.i18n/en.i18n.json +++ b/packages/onboarding-ui/.i18n/en.i18n.json @@ -66,6 +66,9 @@ "password": { "label": "Password", "placeholder": "Create password" + }, + "keepPosted": { + "label": "Keep me posted about Rocket.Chat updates" } } }, diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_AdminInfoPage_CloudAdminInfoPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_AdminInfoPage_CloudAdminInfoPage.png new file mode 100644 index 0000000000..05ab72ce7a Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/desktop_pages_AdminInfoPage_CloudAdminInfoPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_AdminInfoPage_CloudAdminInfoPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_AdminInfoPage_CloudAdminInfoPage.png new file mode 100644 index 0000000000..2f39ba8936 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/mobile_pages_AdminInfoPage_CloudAdminInfoPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_CloudAdminInfoPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_CloudAdminInfoPage.png new file mode 100644 index 0000000000..4baf52dfd2 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_CloudAdminInfoPage.png differ diff --git a/packages/onboarding-ui/src/common/FormPageLayout.styles.tsx b/packages/onboarding-ui/src/common/FormPageLayout.styles.tsx index 560153746a..597201856f 100644 --- a/packages/onboarding-ui/src/common/FormPageLayout.styles.tsx +++ b/packages/onboarding-ui/src/common/FormPageLayout.styles.tsx @@ -86,6 +86,7 @@ export const Subtitle = styled('div')` export const Description = styled('div')` display: none; + font-family: ${sans}; @media (min-width: 1440px) { display: unset; diff --git a/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx b/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx index 42f86ec83a..41f4c078d1 100644 --- a/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx +++ b/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx @@ -6,6 +6,8 @@ import { Button, PasswordInput, TextInput, + Box, + CheckBox, } from '@rocket.chat/fuselage'; import type { ReactElement } from 'react'; import { useForm, SubmitHandler, Validate } from 'react-hook-form'; @@ -18,12 +20,14 @@ export type AdminInfoPayload = { username: string; companyEmail: string; password: string; + keepPosted: boolean; }; type AdminInfoFormProps = { currentStep: number; stepCount: number; passwordRulesHint: string; + keepPosted?: boolean; initialValues?: Omit; validateUsername: Validate; validateEmail: Validate; @@ -39,6 +43,7 @@ const AdminInfoForm = ({ validateUsername, validateEmail, validatePassword, + keepPosted = false, onSubmit, }: AdminInfoFormProps): ReactElement => { const { t } = useTranslation(); @@ -137,6 +142,14 @@ const AdminInfoForm = ({ {errors.password.message} )} + {keepPosted && ( + + + + + )} diff --git a/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.stories.tsx b/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.stories.tsx index 57a4f42540..68ab73acee 100644 --- a/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.stories.tsx +++ b/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.stories.tsx @@ -27,4 +27,16 @@ export default { export const _AdminInfoPage: Story = (args) => ( ); + +export const _CloudAdminInfoPage: Story = (args) => ( + +); + _AdminInfoPage.storyName = 'AdminInfoPage'; +_CloudAdminInfoPage.storyName = 'CloudAdminInfoPage'; + +_CloudAdminInfoPage.args = { + title: 'Your Workspace is Ready!', + description: 'Time to create your first admin user', + keepPosted: true, +}; diff --git a/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.tsx b/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.tsx index 9bfb710397..d5a341bed3 100644 --- a/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.tsx +++ b/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.tsx @@ -1,4 +1,4 @@ -import type { ReactElement } from 'react'; +import type { ReactElement, ReactNode } from 'react'; import type { SubmitHandler, Validate } from 'react-hook-form'; import BackgroundLayer from '../../common/BackgroundLayer'; @@ -7,9 +7,12 @@ import AdminInfoForm from '../../forms/AdminInfoForm'; import type { AdminInfoPayload } from '../../forms/AdminInfoForm/AdminInfoForm'; type AdminInfoPageProps = { + title?: ReactNode; + description?: ReactNode; currentStep: number; stepCount: number; passwordRulesHint: string; + keepPosted?: boolean; initialValues?: Omit; validateUsername: Validate; validateEmail: Validate; @@ -19,7 +22,7 @@ type AdminInfoPageProps = { const AdminInfoPage = (props: AdminInfoPageProps): ReactElement => ( - + diff --git a/packages/string-helpers/src/escapeHTML.spec.ts b/packages/string-helpers/src/escapeHTML.spec.ts index 7cd71b4848..8385ec0079 100644 --- a/packages/string-helpers/src/escapeHTML.spec.ts +++ b/packages/string-helpers/src/escapeHTML.spec.ts @@ -8,8 +8,8 @@ describe('escapeHTML', () => { expect(escapeHTML('<')).toBe('&lt;'); expect(escapeHTML(' ')).toBe(' '); expect(escapeHTML('¢')).toBe('¢'); - expect(escapeHTML('¢ £ ¥ € © ®')).toBe( - '¢ £ ¥ € © ®' + expect(escapeHTML('¢ £ ¥ € © ® ™')).toBe( + '¢ £ ¥ € © ® ™' ); expect(escapeHTML(5 as unknown as string)).toBe('5'); expect(escapeHTML('')).toBe(''); diff --git a/packages/string-helpers/src/escapeHTML.ts b/packages/string-helpers/src/escapeHTML.ts index 834baec0b4..0d7841a64a 100644 --- a/packages/string-helpers/src/escapeHTML.ts +++ b/packages/string-helpers/src/escapeHTML.ts @@ -5,6 +5,7 @@ const characterToHtmlEntityCode = { '€': 'euro', '©': 'copy', '®': 'reg', + '™': 'trade', '<': 'lt', '>': 'gt', '"': 'quot', diff --git a/packages/string-helpers/src/unescapeHTML.spec.ts b/packages/string-helpers/src/unescapeHTML.spec.ts index c1ba227e69..d9d52cfc77 100644 --- a/packages/string-helpers/src/unescapeHTML.spec.ts +++ b/packages/string-helpers/src/unescapeHTML.spec.ts @@ -25,6 +25,9 @@ describe('unescapeHTML', () => { unescapeHTML('what is the ¥ to £ to € conversion process?') ).toBe('what is the ¥ to £ to € conversion process?'); expect(unescapeHTML('® trademark')).toBe('® trademark'); + expect(unescapeHTML('™ unregistered trademark')).toBe( + '™ unregistered trademark' + ); expect(unescapeHTML('© 1992. License available for 50 ¢')).toBe( '© 1992. License available for 50 ¢' ); diff --git a/packages/string-helpers/src/unescapeHTML.ts b/packages/string-helpers/src/unescapeHTML.ts index f9727ddb4e..0cc554d82f 100644 --- a/packages/string-helpers/src/unescapeHTML.ts +++ b/packages/string-helpers/src/unescapeHTML.ts @@ -6,6 +6,7 @@ const htmlEntityCodeToCharacter = { euro: '€', copy: '©', reg: '®', + trade: '™', lt: '<', gt: '>', quot: '"',