Merge branch 'develop' of github.com:RocketChat/Rocket.Chat.Fuselage …

…into feat/createCloudWorkspaceForm

* 'develop' of github.com:RocketChat/Rocket.Chat.Fuselage:
  docs(github): Update pull request template (#504)
  fix: Escape trademark sign (#500)
  feat(onboarding-ui): AdminInfoPage for Cloud Registration wizard (#497)

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,12 +1,20 @@
 <!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->
 
 <!-- Your Pull Request name should start with one of the following tags
-  new: For new features
+  feat: For new features
   improve: For an improvement (performance or little improvements) in existing features
   fix: For bug fixes that affects the end user
-  break: For pull requests including breaking changes
   chore: For small tasks
-  doc: For documentation
+  docs: For documentation only changes
+  perf: For code change that improves performance
+  build: For changes that affect the build system or external dependencies
+  ci: For changes to our CI configuration files and scripts
+  refactor: For changes that neither fixes a bug nor adds a feature
+  test: For adding missing tests or correcting existing tests
+
+  E.g.:
+
+  feat(fuselage-hooks): Add useWhatever hook
 -->
 
 <!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code. -->

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"
         }
       }
     },

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;

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<AdminInfoPayload, 'password'>;
   validateUsername: Validate<string>;
   validateEmail: Validate<string>;
@@ -39,6 +43,7 @@ const AdminInfoForm = ({
   validateUsername,
   validateEmail,
   validatePassword,
+  keepPosted = false,
   onSubmit,
 }: AdminInfoFormProps): ReactElement => {
   const { t } = useTranslation();
@@ -137,6 +142,14 @@ const AdminInfoForm = ({
               <Field.Error>{errors.password.message}</Field.Error>
             )}
           </Field>
+          {keepPosted && (
+            <Box mbe='x8' display='block' color='info' fontScale='c1'>
+              <CheckBox id='keepPosted' mie='x8' {...register('keepPosted')} />
+              <label htmlFor='keepPosted'>
+                {t('form.adminInfoForm.fields.keepPosted.label')}
+              </label>
+            </Box>
+          )}
         </FieldGroup>
       </Form.Container>
       <Form.Footer>

packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.stories.tsx

@@ -27,4 +27,16 @@ export default {
 export const _AdminInfoPage: Story<Args> = (args) => (
   <AdminInfoPage {...args} />
 );
+
+export const _CloudAdminInfoPage: Story<Args> = (args) => (
+  <AdminInfoPage {...args} />
+);
+
 _AdminInfoPage.storyName = 'AdminInfoPage';
+_CloudAdminInfoPage.storyName = 'CloudAdminInfoPage';
+
+_CloudAdminInfoPage.args = {
+  title: 'Your Workspace is Ready!',
+  description: 'Time to create your first admin user',
+  keepPosted: true,
+};

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<AdminInfoPayload, 'password'>;
   validateUsername: Validate<string>;
   validateEmail: Validate<string>;
@@ -19,7 +22,7 @@ type AdminInfoPageProps = {
 
 const AdminInfoPage = (props: AdminInfoPageProps): ReactElement => (
   <BackgroundLayer>
-    <FormPageLayout>
+    <FormPageLayout title={props.title} description={props.description}>
       <AdminInfoForm {...props} />
     </FormPageLayout>
   </BackgroundLayer>

packages/string-helpers/src/escapeHTML.spec.ts

@@ -8,8 +8,8 @@ describe('escapeHTML', () => {
     expect(escapeHTML('<')).toBe('<');
     expect(escapeHTML(' ')).toBe(' ');
     expect(escapeHTML('¢')).toBe('¢');
-    expect(escapeHTML('¢ £ ¥ € © ®')).toBe(
-      '¢ £ ¥ € © ®'
+    expect(escapeHTML('¢ £ ¥ € © ® ™')).toBe(
+      '¢ £ ¥ € © ® ™'
     );
     expect(escapeHTML(5 as unknown as string)).toBe('5');
     expect(escapeHTML('')).toBe('');

packages/string-helpers/src/escapeHTML.ts

@@ -5,6 +5,7 @@ const characterToHtmlEntityCode = {
   '€': 'euro',
   '©': 'copy',
   '®': 'reg',
+  '™': 'trade',
   '<': 'lt',
   '>': 'gt',
   '"': 'quot',

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 ¢'
     );

packages/string-helpers/src/unescapeHTML.ts

@@ -6,6 +6,7 @@ const htmlEntityCodeToCharacter = {
   euro: '€',
   copy: '©',
   reg: '®',
+  trade: '™',
   lt: '<',
   gt: '>',
   quot: '"',