Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore:(onboarding-ui): Adjustments of design "copy" for Setup Wizard #1174

Merged
merged 6 commits into from
Sep 27, 2023
Merged

chore:(onboarding-ui): Adjustments of design "copy" for Setup Wizard #1174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
89ea63c
change the copy and small fix design
tiagoevanp Sep 21, 2023
a4d90d9
Create kind-months-warn.md
tiagoevanp Sep 21, 2023
9e689c6
Merge branch 'main' into nbj/setup-wizard
tiagoevanp Sep 21, 2023
ec9b4f5
Delete .changeset/kind-months-warn.md
tiagoevanp Sep 22, 2023
249ad6c
Update en.i18n.json
tiagoevanp Sep 22, 2023
ef7bf86
Merge branch 'main' into nbj/setup-wizard
tiagoevanp Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions packages/onboarding-ui/.i18n/en.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
},
"page": {
"form": {
"title": "Let's <1>Launch</1> Your Workspace"
"title": "Let's launch your workspace"
},
"awaitingConfirmation": {
"title": "Awaiting confirmation",
Expand Down Expand Up @@ -66,10 +66,6 @@
"title": "We emailed you a login link",
"subtitle": "Click the link in the email we just sent you to sign in to your workspace. <1>The link will expire in 30 minutes.</1>"
},
"organizationInfoPage": {
"title": "A few more details...",
"subtitle": "These will help us to personalize your workspace."
},
"loginPage": {
"title": {
"cloud": "Cloud Login"
Expand Down Expand Up @@ -126,7 +122,7 @@
"form": {
"adminInfoForm": {
"title": "Admin Info",
"subtitle": "We need this to create an admin profile inside your workspace",
"subtitle": "We need this information to create an admin profile for your workspace.",
"fields": {
"fullName": {
"label": "Full name",
Expand All @@ -151,7 +147,7 @@
},
"organizationInfoForm": {
"title": "Organization Info",
"subtitle": "Please, bear with us. This info will help us personalize your workspace",
"subtitle": "We need to know who you are.",
"fields": {
"organizationName": {
"label": "Organization name",
Expand All @@ -176,23 +172,22 @@
}
},
"registeredServerForm": {
"title": "Register Your Server",
"title": "Register your workspace",
"included": {
"push": "Mobile push notifications",
"externalProviders": "Integration with external providers (WhatsApp, Facebook, Telegram, Twitter)",
"apps": "Access to marketplace apps"
},
"fields": {
"accountEmail": {
"inputLabel": "Cloud account email",
"tooltipLabel": "To register your server, we need to connect it to your cloud account. If you already have one - we wll link it automatically. Otherwise, a new account will be created",
"inputPlaceholder": "Please enter your Email"
"inputLabel": "Admin email",
"inputPlaceholder": "Insert your email to continue"
}
},
"keepInformed": "Keep me informed about news and events",
"registerLater": "Register later",
"notConnectedToInternet": "The server is not connected to the internet, so you’ll have to do an offline registration for this workspace.",
"agreeToReceiveUpdates": "By registering I agree to receive relevant product and security updates"
"registrationEngagement": "Registration allows automatic license updates, notifications of critical vulnerabilities and access to Rocket.Chat Cloud services. No sensitive workspace data is shared; statistics sent to Rocket.Chat are made visible to you within the administration area."
},
"standaloneServerForm": {
"title": "Standalone Server Confirmation",
Expand Down
15 changes: 3 additions & 12 deletions packages/onboarding-ui/src/common/FormPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
FormPageLayout,
HorizontalWizardLayout,
HorizontalWizardLayoutAside,
HorizontalWizardLayoutTitle,
Expand All @@ -8,7 +7,7 @@ import {
HorizontalWizardLayoutContent,
} from '@rocket.chat/layout';
import type { ReactElement, ReactNode } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { useTranslation } from 'react-i18next';

// import { OnboardingLogo } from './OnboardingLogo';
import type { FormPageLayoutStyleProps } from '../Types';
Expand All @@ -29,20 +28,12 @@ const FormPageLayoutOnboard = ({
description,
children,
}: FormPageLayoutProps): ReactElement => {
useTranslation();
const { t } = useTranslation();
return (
<HorizontalWizardLayout>
<HorizontalWizardLayoutAside>
<HorizontalWizardLayoutTitle>
{title || (
<Trans i18nKey='page.form.title'>
Let's
<FormPageLayout.TitleHighlight>
Launch
</FormPageLayout.TitleHighlight>
Your Workspace
</Trans>
)}
{title || t('page.form.title')}
</HorizontalWizardLayoutTitle>
{subtitle && (
<HorizontalWizardLayoutSubtitle>
Expand Down
86 changes: 33 additions & 53 deletions packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ import {
Field,
EmailInput,
CheckBox,
Icon,
} from '@rocket.chat/fuselage';
import { useUniqueId, useBreakpoints } from '@rocket.chat/fuselage-hooks';
import { Form, List, ActionLink } from '@rocket.chat/layout';
import { Form, ActionLink } from '@rocket.chat/layout';
import type { ReactElement } from 'react';
import type { SubmitHandler, Validate } from 'react-hook-form';
import { useForm, FormProvider } from 'react-hook-form';
Expand Down Expand Up @@ -76,19 +75,6 @@ const RegisterServerForm = ({
<Form.Steps currentStep={currentStep} stepCount={stepCount} />
<Form.Title>{t('form.registeredServerForm.title')}</Form.Title>
</Form.Header>
<Box mbe={24} mbs={16}>
<List>
<List.Item fontScale='p2' icon='check'>
{t('form.registeredServerForm.included.push')}
</List.Item>
<List.Item fontScale='p2' icon='check'>
{t('form.registeredServerForm.included.externalProviders')}
</List.Item>
<List.Item fontScale='p2' icon='check'>
{t('form.registeredServerForm.included.apps')}
</List.Item>
</List>
</Box>
{!offline && (
<Form.Container>
<Field>
Expand All @@ -98,14 +84,6 @@ const RegisterServerForm = ({
htmlFor={emailField}
>
{t('form.registeredServerForm.fields.accountEmail.inputLabel')}
<Icon
title={t(
'form.registeredServerForm.fields.accountEmail.tooltipLabel'
)}
mis={4}
size='x16'
name='info'
/>
</Field.Label>
<Field.Row>
<EmailInput
Expand All @@ -132,7 +110,9 @@ const RegisterServerForm = ({
fontScale='c1'
lineHeight={20}
>
<CheckBox mie={8} {...register('updates')} />{' '}
<Box mie={8}>
<CheckBox {...register('updates')} />{' '}
</Box>
<Box is='label' htmlFor='updates'>
{t('form.registeredServerForm.keepInformed')}
</Box>
Expand All @@ -145,10 +125,9 @@ const RegisterServerForm = ({
fontScale='c1'
lineHeight={20}
>
<CheckBox
mie={8}
{...register('agreement', { required: true })}
/>{' '}
<Box mie={8}>
<CheckBox {...register('agreement', { required: true })} />{' '}
</Box>
<Box is='label' htmlFor='agreement' withRichContent>
<Trans i18nKey='component.form.termsAndConditions'>
I agree with
Expand All @@ -170,10 +149,6 @@ const RegisterServerForm = ({
</Trans>
</Box>
</Box>

<Box mbs={32} fontScale='c1' htmlFor='agreement' withRichContent>
{t('form.registeredServerForm.agreeToReceiveUpdates')}
</Box>
</Box>
</Form.Container>
)}
Expand All @@ -185,28 +160,33 @@ const RegisterServerForm = ({
</Form.Container>
)}
<Form.Footer>
<ButtonGroup vertical={isMobile} flexGrow={1}>
<Button onClick={onBackButtonClick}>
{t('component.form.action.back')}
</Button>
<Button
type='submit'
primary
disabled={isValidating || isSubmitting || !isValid}
>
{offline
? t('component.form.action.registerNow')
: t('component.form.action.register')}
</Button>
<Box display='flex' flexDirection='column'>
<ButtonGroup vertical={isMobile} flexGrow={1}>
<Button onClick={onBackButtonClick}>
{t('component.form.action.back')}
</Button>
<Button
type='submit'
primary
disabled={isValidating || isSubmitting || !isValid}
>
{offline
? t('component.form.action.registerNow')
: t('component.form.action.register')}
</Button>

{offline && (
<ButtonGroup flexGrow={1} align='end' withTruncatedText>
<ActionLink onClick={onClickRegisterLater}>
{t('form.registeredServerForm.registerLater')}
</ActionLink>
</ButtonGroup>
)}
</ButtonGroup>
{offline && (
<ButtonGroup flexGrow={1} align='end' withTruncatedText>
<ActionLink onClick={onClickRegisterLater}>
{t('form.registeredServerForm.registerLater')}
</ActionLink>
</ButtonGroup>
)}
</ButtonGroup>
<Box mbs={24} fontScale='c1'>
{t('form.registeredServerForm.registrationEngagement')}
</Box>
</Box>
</Form.Footer>
</Form>
</FormProvider>
Expand Down
7 changes: 1 addition & 6 deletions packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import type { SelectOption } from '@rocket.chat/fuselage';
import { BackgroundLayer } from '@rocket.chat/layout';
import type { ReactElement, ReactNode } from 'react';
import type { SubmitHandler } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import type { FormPageLayoutStyleProps } from '../../Types';
import FormPageLayout from '../../common/FormPageLayout';
Expand All @@ -27,12 +26,9 @@ type OrganizationInfoPageProps = {

const OrganizationInfoPage = ({
title,
subtitle,
description,
...props
}: OrganizationInfoPageProps): ReactElement => {
const { t } = useTranslation();

const pageLayoutStyleProps: FormPageLayoutStyleProps = {
justifyContent: 'center',
subTitleProps: {
Expand All @@ -44,9 +40,8 @@ const OrganizationInfoPage = ({
<BackgroundLayer>
<FormPageLayout
styleProps={pageLayoutStyleProps}
title={title || t('page.organizationInfoPage.title')}
title={title}
description={description}
subtitle={subtitle || t('page.organizationInfoPage.subtitle')}
>
<OrganizationInfoForm {...props} />
</FormPageLayout>
Expand Down
17 changes: 2 additions & 15 deletions packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import {
BackgroundLayer,
FormPageLayout as FormLayout,
} from '@rocket.chat/layout';
import { BackgroundLayer } from '@rocket.chat/layout';
import type { ReactElement } from 'react';
import type { SubmitHandler, Validate } from 'react-hook-form';
import { Trans } from 'react-i18next';

import type { FormPageLayoutStyleProps } from '../../Types';
import FormPageLayout from '../../common/FormPageLayout';
Expand All @@ -30,16 +26,7 @@ const pageLayoutStyleProps: FormPageLayoutStyleProps = {

const RegisterServerPage = (props: RegisterServerPageProps): ReactElement => (
<BackgroundLayer>
<FormPageLayout
title={
<Trans i18nKey='page.form.title'>
Let's
<FormLayout.TitleHighlight>Launch</FormLayout.TitleHighlight>
Your Workspace
</Trans>
}
styleProps={pageLayoutStyleProps}
>
<FormPageLayout styleProps={pageLayoutStyleProps}>
<RegisterServerForm {...props} />
</FormPageLayout>
</BackgroundLayer>
Expand Down