diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json index 8756272174..786cb42e08 100644 --- a/packages/onboarding-ui/.i18n/en.i18n.json +++ b/packages/onboarding-ui/.i18n/en.i18n.json @@ -5,7 +5,9 @@ "action": { "back": "Back", "next": "Next", - "skip": "Skip this step" + "skip": "Skip this step", + "register": "Register", + "confirm": "Confirm" }, "requiredField": "This field is required", "termsAndConditions": "I agree with <1>Terms and Conditions and <3>Privacy Policy" @@ -149,34 +151,29 @@ } } }, - "accountEmailForm": { - "description": "To register your server, we need to connect it to your cloud account. If you already have one - we can link it automatically for you. Otherwise, a new account will be created.", - "inputLabel": "Cloud account email", - "inputPlaceholder": "Please enter your Email" - }, - "serverRegistrationForm": { + "registeredServerForm": { "title": "Register Your Server", - "register": { - "title": "Register server", - "subtitle": "What is included", - "description": "Preconfigured gateways and proxies provided by Rocket.Chat Technologies Corp.", - "included": { - "push": "Mobile push notification gateway", - "livechat": "Livechat omnichannel proxy", - "oAuth": "OAuth proxy for social network", - "apps": "Apps Marketplace" - }, - "includeUpdates": "Include product and security updates" + "included": { + "push": "Mobile push notifications", + "externalProviders": "Integration with external providers (WhatsApp, Facebook, Telegram, Twitter)", + "apps": "Access to marketplace apps" }, - "standalone": { - "title": "Standalone server", - "description": "You will have to set up the environment by yourself:", - "actionList": { - "accounts": "create accounts with service providers", - "settings": "update preconfigured settings", - "mobile": "and recompile mobile apps with your certificates" + "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" } - } + }, + "keepInformed": "Keep me informed about news and events", + "continueStandalone": "Continue as standalone", + "agreeToReceiveUpdates": "By registering I agree to receive relevant product and security updates" + }, + "standaloneServerForm": { + "title": "Standalone Server Confirmation", + "servicesUnavailable": "Some of the services will be unavailable or will require manual setup", + "publishOwnApp": "In order to send push notitications you need to compile and publish your own app to Google Play and App Store", + "manuallyIntegrate": "Need to manually integrate with external services" }, "createCloudWorkspace": { "title": "Create Cloud Workspace", diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_CloudAccountEmailForm_CloudAccountEmailForm.png b/packages/onboarding-ui/.loki/reference/desktop_forms_CloudAccountEmailForm_CloudAccountEmailForm.png deleted file mode 100644 index 945c28732d..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_CloudAccountEmailForm_CloudAccountEmailForm.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_Selected.png b/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_Selected.png deleted file mode 100644 index c8ab71ca03..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_Selected.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_Unselected.png b/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_Unselected.png deleted file mode 100644 index 5572432281..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_Unselected.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_RegisterServerForm.png b/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_RegisterServerForm.png deleted file mode 100644 index 08820705ad..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_RegisterServerForm.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisteredServerForm_RegisteredServerForm.png b/packages/onboarding-ui/.loki/reference/desktop_forms_RegisteredServerForm_RegisteredServerForm.png new file mode 100644 index 0000000000..d41882358f Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/desktop_forms_RegisteredServerForm_RegisteredServerForm.png differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_StandaloneServerForm_StandaloneServerForm.png b/packages/onboarding-ui/.loki/reference/desktop_forms_StandaloneServerForm_StandaloneServerForm.png new file mode 100644 index 0000000000..4fdb5bba71 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/desktop_forms_StandaloneServerForm_StandaloneServerForm.png differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_CloudAccountEmailPage_CloudAccountEmailPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_CloudAccountEmailPage_CloudAccountEmailPage.png deleted file mode 100644 index 231c99516e..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/desktop_pages_CloudAccountEmailPage_CloudAccountEmailPage.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_CreateCloudWorkspacePage_CreateCloudWorkspacePage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_CreateCloudWorkspacePage_CreateCloudWorkspacePage.png index d42f6eda92..6d6d9d840d 100644 Binary files a/packages/onboarding-ui/.loki/reference/desktop_pages_CreateCloudWorkspacePage_CreateCloudWorkspacePage.png and b/packages/onboarding-ui/.loki/reference/desktop_pages_CreateCloudWorkspacePage_CreateCloudWorkspacePage.png differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_RegisterServerPage_RegisterServerPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_RegisterServerPage_RegisterServerPage.png deleted file mode 100644 index 1dedb708f7..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/desktop_pages_RegisterServerPage_RegisterServerPage.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_RegisteredServerPage_RegisteredServerPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_RegisteredServerPage_RegisteredServerPage.png new file mode 100644 index 0000000000..27fcce9fdc Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/desktop_pages_RegisteredServerPage_RegisteredServerPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_RequestTrialPage_RequestTrialPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_RequestTrialPage_RequestTrialPage.png index a7912881f5..81b5335240 100644 Binary files a/packages/onboarding-ui/.loki/reference/desktop_pages_RequestTrialPage_RequestTrialPage.png and b/packages/onboarding-ui/.loki/reference/desktop_pages_RequestTrialPage_RequestTrialPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_StandaloneServerPage_StandaloneServerPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_StandaloneServerPage_StandaloneServerPage.png new file mode 100644 index 0000000000..53e28e226f Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/desktop_pages_StandaloneServerPage_StandaloneServerPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_CloudAccountEmailForm_CloudAccountEmailForm.png b/packages/onboarding-ui/.loki/reference/mobile_forms_CloudAccountEmailForm_CloudAccountEmailForm.png deleted file mode 100644 index f25a42e1c9..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_CloudAccountEmailForm_CloudAccountEmailForm.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_Selected.png b/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_Selected.png deleted file mode 100644 index 417fa4582c..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_Selected.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_Unselected.png b/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_Unselected.png deleted file mode 100644 index 64a54cb24a..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_Unselected.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_RegisterServerForm.png b/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_RegisterServerForm.png deleted file mode 100644 index 7a9921926c..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_RegisterServerForm.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisteredServerForm_RegisteredServerForm.png b/packages/onboarding-ui/.loki/reference/mobile_forms_RegisteredServerForm_RegisteredServerForm.png new file mode 100644 index 0000000000..3c8f18f9b5 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/mobile_forms_RegisteredServerForm_RegisteredServerForm.png differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_StandaloneServerForm_StandaloneServerForm.png b/packages/onboarding-ui/.loki/reference/mobile_forms_StandaloneServerForm_StandaloneServerForm.png new file mode 100644 index 0000000000..50840c5990 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/mobile_forms_StandaloneServerForm_StandaloneServerForm.png differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_CloudAccountEmailPage_CloudAccountEmailPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_CloudAccountEmailPage_CloudAccountEmailPage.png deleted file mode 100644 index d7d2e77611..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/mobile_pages_CloudAccountEmailPage_CloudAccountEmailPage.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_RegisterServerPage_RegisterServerPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_RegisterServerPage_RegisterServerPage.png deleted file mode 100644 index c6d9baf92f..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/mobile_pages_RegisterServerPage_RegisterServerPage.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_RegisteredServerPage_RegisteredServerPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_RegisteredServerPage_RegisteredServerPage.png new file mode 100644 index 0000000000..1f29557502 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/mobile_pages_RegisteredServerPage_RegisteredServerPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_StandaloneServerPage_StandaloneServerPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_StandaloneServerPage_StandaloneServerPage.png new file mode 100644 index 0000000000..e39198be39 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/mobile_pages_StandaloneServerPage_StandaloneServerPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_CloudAccountEmailForm_CloudAccountEmailForm.png b/packages/onboarding-ui/.loki/reference/tablet_forms_CloudAccountEmailForm_CloudAccountEmailForm.png deleted file mode 100644 index 945c28732d..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_CloudAccountEmailForm_CloudAccountEmailForm.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_Selected.png b/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_Selected.png deleted file mode 100644 index c8ab71ca03..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_Selected.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_Unselected.png b/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_Unselected.png deleted file mode 100644 index 5572432281..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_Unselected.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_RegisterServerForm.png b/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_RegisterServerForm.png deleted file mode 100644 index c61b0a2b62..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_RegisterServerForm.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisteredServerForm_RegisteredServerForm.png b/packages/onboarding-ui/.loki/reference/tablet_forms_RegisteredServerForm_RegisteredServerForm.png new file mode 100644 index 0000000000..2fc8e9c69a Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/tablet_forms_RegisteredServerForm_RegisteredServerForm.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_StandaloneServerForm_StandaloneServerForm.png b/packages/onboarding-ui/.loki/reference/tablet_forms_StandaloneServerForm_StandaloneServerForm.png new file mode 100644 index 0000000000..4fdb5bba71 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/tablet_forms_StandaloneServerForm_StandaloneServerForm.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_CloudAccountEmailPage_CloudAccountEmailPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_CloudAccountEmailPage_CloudAccountEmailPage.png deleted file mode 100644 index 596daea6cb..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/tablet_pages_CloudAccountEmailPage_CloudAccountEmailPage.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_RegisterServerPage_RegisterServerPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_RegisterServerPage_RegisterServerPage.png deleted file mode 100644 index ac72054c52..0000000000 Binary files a/packages/onboarding-ui/.loki/reference/tablet_pages_RegisterServerPage_RegisterServerPage.png and /dev/null differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_RegisteredServerPage_RegisteredServerPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_RegisteredServerPage_RegisteredServerPage.png new file mode 100644 index 0000000000..b2011612e6 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/tablet_pages_RegisteredServerPage_RegisteredServerPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_StandaloneServerPage_StandaloneServerPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_StandaloneServerPage_StandaloneServerPage.png new file mode 100644 index 0000000000..b6c90a8830 Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/tablet_pages_StandaloneServerPage_StandaloneServerPage.png differ diff --git a/packages/onboarding-ui/src/common/BackgroundLayer.styles.tsx b/packages/onboarding-ui/src/common/BackgroundLayer.styles.tsx index 75da4b7e1f..86a3cfa95f 100644 --- a/packages/onboarding-ui/src/common/BackgroundLayer.styles.tsx +++ b/packages/onboarding-ui/src/common/BackgroundLayer.styles.tsx @@ -12,6 +12,7 @@ const filterWrapperProps = ({ }) => props; export const Wrapper = styled('div', filterWrapperProps)` + flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; @@ -22,8 +23,5 @@ export const Wrapper = styled('div', filterWrapperProps)` background-repeat: no-repeat; background-position: center; background-size: cover; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; color: ${(p) => p.color}; `; diff --git a/packages/onboarding-ui/src/common/List/ListItem.tsx b/packages/onboarding-ui/src/common/List/ListItem.tsx index 95268b653c..8a7b294fe4 100644 --- a/packages/onboarding-ui/src/common/List/ListItem.tsx +++ b/packages/onboarding-ui/src/common/List/ListItem.tsx @@ -12,7 +12,7 @@ const ListItem = ({ iconColor?: ComponentProps['color']; fontScale?: ComponentProps['fontScale']; }): ReactElement => ( - + {icon && } {children} diff --git a/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx b/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx index f736b779f8..b42072af41 100644 --- a/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx +++ b/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx @@ -3,16 +3,15 @@ import type { Meta, Story } from '@storybook/react'; import { useState } from 'react'; import type { AdminInfoPayload } from '../../forms/AdminInfoForm/AdminInfoForm'; -import type { CloudAccountEmailPayload } from '../../forms/CloudAccountEmailForm/CloudAccountEmailForm'; import type { OrganizationInfoPayload } from '../../forms/OrganizationInfoForm/OrganizationInfoForm'; -import type { RegisterServerPayload } from '../../forms/RegisterServerForm/RegisterServerForm'; +import type { RegisteredServerPayload } from '../../forms/RegisteredServerForm/RegisteredServerForm'; import AdminInfoPage from '../../pages/AdminInfoPage'; import AwaitingConfirmationPage from '../../pages/AwaitingConfirmationPage'; -import CloudAccountEmailPage from '../../pages/CloudAccountEmailPage'; import ConfirmationProcessPage from '../../pages/ConfirmationProcessPage'; import EmailConfirmedPage from '../../pages/EmailConfirmedPage'; import OrganizationInfoPage from '../../pages/OrganizationInfoPage'; -import RegisterServerPage from '../../pages/RegisterServerPage'; +import RegisteredServerPage from '../../pages/RegisteredServerPage'; +import StandaloneServerPage from '../../pages/StandaloneServerPage'; import { countryOptions, logSubmit, @@ -39,6 +38,7 @@ export const SelfHostedRegistration: Story = () => { | 'admin-info' | 'org-info' | 'register-server' + | 'standalone-confirmation' | 'cloud-email' | 'awaiting' | 'home' @@ -72,30 +72,11 @@ export const SelfHostedRegistration: Story = () => { ); const handleRegisterServerSubmit = logSubmit( - (data: RegisterServerPayload) => { - switch (data.registerType) { - case 'standalone': { - navigateTo('/home'); - break; - } - - case 'registered': { - setServerRegistration((serverRegistration) => ({ - ...serverRegistration, - updates: data.updates, - agreement: data.agreement, - })); - navigateTo('/cloud-email'); - break; - } - } - } - ); - - const handleCloudAccountEmailSubmit = logSubmit( - (data: CloudAccountEmailPayload) => { + (data: RegisteredServerPayload) => { setServerRegistration((serverRegistration) => ({ ...serverRegistration, + updates: data.updates, + agreement: data.agreement, cloudAccountEmail: data.email, securityCode: 'Funny Tortoise In The Hat', })); @@ -136,7 +117,7 @@ export const SelfHostedRegistration: Story = () => { if (path === '/register-server') { return ( - { }} onBackButtonClick={() => navigateTo('/org-info')} onSubmit={handleRegisterServerSubmit} + onClickContinue={() => navigateTo('/standalone-confirmation')} /> ); } - if (path === '/cloud-email') { + if (path === '/standalone-confirmation') { return ( - navigateTo('/register-server')} - onSubmit={handleCloudAccountEmailSubmit} + onSubmit={() => navigateTo('/home')} /> ); } diff --git a/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx b/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx index a798cc3129..af1df1e6fc 100644 --- a/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx +++ b/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx @@ -21,7 +21,7 @@ export type AdminInfoPayload = { username: string; companyEmail: string; password: string; - keepPosted: boolean; + keepPosted?: boolean; }; type AdminInfoFormProps = { diff --git a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.stories.tsx b/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.stories.tsx deleted file mode 100644 index d4b8d5eb21..0000000000 --- a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { Meta, Story } from '@storybook/react'; -import type { ComponentProps } from 'react'; - -import CloudAccountEmailForm from './CloudAccountEmailForm'; - -type Args = ComponentProps; - -export default { - title: 'forms/CloudAccountEmailForm', - component: CloudAccountEmailForm, - parameters: { - layout: 'centered', - actions: { argTypesRegex: '^on.*' }, - }, - args: { - currentStep: 1, - stepCount: 1, - }, -} as Meta; - -export const _CloudAccountEmailForm: Story = (args) => ( - -); -_CloudAccountEmailForm.storyName = 'CloudAccountEmailForm'; diff --git a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.tsx b/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.tsx deleted file mode 100644 index 2984a087d7..0000000000 --- a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { ButtonGroup, Button, EmailInput, Field } from '@rocket.chat/fuselage'; -import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { ReactElement, useEffect } from 'react'; -import { useForm, SubmitHandler, Validate } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; - -import Form from '../../common/Form'; - -export type CloudAccountEmailPayload = { - email: string; -}; - -type CloudAccountEmailFormProps = { - currentStep: number; - stepCount: number; - initialValues?: Partial; - validateEmail: Validate; - onBackButtonClick: () => void; - onSubmit: SubmitHandler; -}; - -const CloudAccountEmailForm = ({ - currentStep, - stepCount, - initialValues, - validateEmail, - onBackButtonClick, - onSubmit, -}: CloudAccountEmailFormProps): ReactElement => { - const { t } = useTranslation(); - const emailField = useUniqueId(); - - const { - register, - handleSubmit, - formState: { isValidating, isSubmitting, errors }, - setFocus, - } = useForm({ - defaultValues: { - email: '', - ...initialValues, - }, - }); - - useEffect(() => { - setFocus('email'); - }, [setFocus]); - - return ( -
- - {t('form.serverRegistrationForm.title')} - {t('form.accountEmailForm.description')} - - - - {t('form.accountEmailForm.inputLabel')} - - - - - {errors.email && ( - {t('component.form.requiredField')} - )} - - - - - - - - - - ); -}; - -export default CloudAccountEmailForm; diff --git a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/index.ts b/packages/onboarding-ui/src/forms/CloudAccountEmailForm/index.ts deleted file mode 100644 index cc79f01de0..0000000000 --- a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CloudAccountEmailForm'; diff --git a/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.tsx b/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.tsx index e4b5cc51d5..e4abfba61f 100644 --- a/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.tsx +++ b/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.tsx @@ -54,7 +54,7 @@ const CreateCloudWorkspaceForm = ({ control, handleSubmit, formState: { isDirty, isValidating, isSubmitting, errors }, - } = useForm(); + } = useForm(); return (
@@ -132,7 +132,7 @@ const CreateCloudWorkspaceForm = ({ - {errors.workspaceUrl?.type === 'required' && ( + {errors.workspaceURL?.type === 'required' && ( {t('component.form.requiredField')} )} - {errors.workspaceUrl?.type === 'validate' && ( + {errors.workspaceURL?.type === 'validate' && ( {t('form.createCloudWorkspace.fields.workspaceUrl.exists')} diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Block.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Block.tsx deleted file mode 100644 index a1f4f0ff1e..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Block.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ReactElement, ReactNode } from 'react'; - -const Block = ({ children }: { children: ReactNode }): ReactElement => ( - - {children} - -); - -export default Block; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Description.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Description.tsx deleted file mode 100644 index 6f933cc133..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Description.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ReactElement, ReactNode } from 'react'; - -const Description = ({ children }: { children: ReactNode }): ReactElement => ( - - {children} - -); - -export default Description; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/OptionCard.stories.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/OptionCard.stories.tsx deleted file mode 100644 index a54c1c0061..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/OptionCard.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import type { Story, Meta } from '@storybook/react'; -import type { ComponentProps } from 'react'; - -import OptionCard from '.'; - -type Args = ComponentProps; - -export default { - title: 'forms/RegisterServerForm/OptionCard', - component: OptionCard, - parameters: { - layout: 'centered', - actions: { argTypesRegex: '^on.*' }, - }, -} as Meta; - -export const Unselected: Story = (args) => ( - - - Title - - - Description - - - Subtitle - - Item 1 - Item 1 - Item 1 - - - -); -Unselected.args = { - selected: false, -}; - -export const Selected: Story = (args) => ( - - - Title - - - Description - - - Subtitle - - Item 1 - Item 1 - Item 1 - - - -); -Selected.args = { - selected: true, -}; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/OptionCard.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/OptionCard.tsx deleted file mode 100644 index 2f4beea7c2..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/OptionCard.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ReactElement, ReactNode } from 'react'; - -type OptionCardProps = { - selected?: boolean; - onClick: () => void; - children: ReactNode; -}; - -const OptionCard = ({ - selected, - onClick, - children, -}: OptionCardProps): ReactElement => ( - -); - -export default OptionCard; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Subtitle.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Subtitle.tsx deleted file mode 100644 index ff9fea4c35..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Subtitle.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ReactElement, ReactNode } from 'react'; - -const Subtitle = ({ children }: { children: ReactNode }): ReactElement => ( - - {children} - -); - -export default Subtitle; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Title.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Title.tsx deleted file mode 100644 index e82385d2cb..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/Title.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import type { ReactElement, ReactNode } from 'react'; - -const Title = ({ children }: { children: ReactNode }): ReactElement => ( - - {children} - -); - -export default Title; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/index.ts b/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/index.ts deleted file mode 100644 index 7f2900769c..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/OptionCard/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import List from '../../../common/List'; -import Block from './Block'; -import Description from './Description'; -import OptionCard from './OptionCard'; -import Subtitle from './Subtitle'; -import Title from './Title'; - -export default Object.assign(OptionCard, { - Title, - Subtitle, - Description, - List, - ListItem: List.Item, - Block, -}); diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterOptionCard.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterOptionCard.tsx deleted file mode 100644 index 7659ff4f74..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterOptionCard.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import { Divider, CheckBox, RadioButton, Box } from '@rocket.chat/fuselage'; -import React, { ReactElement, useEffect } from 'react'; -import { useFormContext, useWatch } from 'react-hook-form'; -import { useTranslation, Trans } from 'react-i18next'; - -import OptionCard from './OptionCard'; - -const RegisterOptionCard = (): ReactElement => { - const { t } = useTranslation(); - - const { register, setValue, trigger } = useFormContext(); - - const onClickCard = () => { - setValue('registerType', 'registered'); - trigger('agreement'); - }; - - const selected = useWatch({ name: 'registerType' }) === 'registered'; - - useEffect(() => { - if (!selected) { - setValue('agreement', false); - setValue('updates', false); - } - }, [selected, setValue]); - - return ( - - - - - {t('form.serverRegistrationForm.register.title')} - - - - - {t('form.serverRegistrationForm.register.description')} - - - - - {t('form.serverRegistrationForm.register.subtitle')} - - - - {t('form.serverRegistrationForm.register.included.push')} - - - {t('form.serverRegistrationForm.register.included.livechat')} - - - {t('form.serverRegistrationForm.register.included.oAuth')} - - - {t('form.serverRegistrationForm.register.included.apps')} - - - - - - - {' '} - - - - { - if (!selected) { - return true; - } - - return value; - }, - })} - />{' '} - - - I agree with - - Terms and Conditions - - and - - Privacy Policy - - - - - - - ); -}; - -export default RegisterOptionCard; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.stories.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.stories.tsx deleted file mode 100644 index 350e5d029e..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { Meta, Story } from '@storybook/react'; -import type { ComponentProps } from 'react'; - -import RegisterServerForm from './RegisterServerForm'; - -type Args = ComponentProps; - -export default { - title: 'forms/RegisterServerForm', - component: RegisterServerForm, - parameters: { - layout: 'centered', - actions: { argTypesRegex: '^on.*' }, - }, - args: { - currentStep: 1, - stepCount: 1, - agreementHref: '#', - policyHref: '#', - }, -} as Meta; - -export const _RegisterServerForm: Story = (args) => ( - -); -_RegisterServerForm.storyName = 'RegisterServerForm'; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/StandaloneOptionCard.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/StandaloneOptionCard.tsx deleted file mode 100644 index 6d00a9927b..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/StandaloneOptionCard.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { RadioButton } from '@rocket.chat/fuselage'; -import colors from '@rocket.chat/fuselage-tokens/colors.json'; -import type { ReactElement } from 'react'; -import { useFormContext, useWatch } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; - -import OptionCard from './OptionCard'; - -const RegisterOptionCard = (): ReactElement => { - const { t } = useTranslation(); - - const { register, setValue, trigger } = useFormContext(); - - const onClickCard = () => { - setValue('registerType', 'standalone'); - trigger('agreement'); - }; - - const selected = useWatch({ name: 'registerType' }) === 'standalone'; - - return ( - - - - - {t('form.serverRegistrationForm.standalone.title')} - - - - - {t('form.serverRegistrationForm.standalone.description')} - - - - {t('form.serverRegistrationForm.standalone.actionList.accounts')} - - - {t('form.serverRegistrationForm.standalone.actionList.settings')} - - - {t('form.serverRegistrationForm.standalone.actionList.mobile')} - - - - - ); -}; - -export default RegisterOptionCard; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/index.ts b/packages/onboarding-ui/src/forms/RegisterServerForm/index.ts deleted file mode 100644 index e1f2893d50..0000000000 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './RegisterServerForm'; diff --git a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.spec.tsx b/packages/onboarding-ui/src/forms/RegisteredServerForm/RegisteredServerForm.spec.tsx similarity index 73% rename from packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.spec.tsx rename to packages/onboarding-ui/src/forms/RegisteredServerForm/RegisteredServerForm.spec.tsx index c96052dcc2..4c09fd5d20 100644 --- a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.spec.tsx +++ b/packages/onboarding-ui/src/forms/RegisteredServerForm/RegisteredServerForm.spec.tsx @@ -1,16 +1,17 @@ import ReactDOM from 'react-dom'; -import CloudAccountEmailForm from './CloudAccountEmailForm'; +import RegisteredServerForm from './RegisteredServerForm'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render( - true} - onSubmit={() => undefined} onBackButtonClick={() => undefined} + onClickContinue={() => undefined} + onSubmit={() => undefined} />, div ); diff --git a/packages/onboarding-ui/src/forms/RegisteredServerForm/RegisteredServerForm.stories.tsx b/packages/onboarding-ui/src/forms/RegisteredServerForm/RegisteredServerForm.stories.tsx new file mode 100644 index 0000000000..1a1d6ec15f --- /dev/null +++ b/packages/onboarding-ui/src/forms/RegisteredServerForm/RegisteredServerForm.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, Story } from '@storybook/react'; +import type { ComponentProps } from 'react'; + +import RegisteredServerForm from './RegisteredServerForm'; + +type Args = ComponentProps; + +export default { + title: 'forms/RegisteredServerForm', + component: RegisteredServerForm, + parameters: { + layout: 'centered', + actions: { argTypesRegex: '^on.*' }, + }, + args: { + currentStep: 1, + stepCount: 1, + termsHref: '#', + policyHref: '#', + }, +} as Meta; + +export const _RegisteredServerForm: Story = (args) => ( + +); +_RegisteredServerForm.storyName = 'RegisteredServerForm'; diff --git a/packages/onboarding-ui/src/forms/RegisteredServerForm/RegisteredServerForm.tsx b/packages/onboarding-ui/src/forms/RegisteredServerForm/RegisteredServerForm.tsx new file mode 100644 index 0000000000..193a3a1f79 --- /dev/null +++ b/packages/onboarding-ui/src/forms/RegisteredServerForm/RegisteredServerForm.tsx @@ -0,0 +1,203 @@ +import { + Box, + ButtonGroup, + Button, + Field, + EmailInput, + CheckBox, + Icon, +} from '@rocket.chat/fuselage'; +import { useUniqueId, useBreakpoints } from '@rocket.chat/fuselage-hooks'; +import type { ReactElement } from 'react'; +import { + useForm, + SubmitHandler, + FormProvider, + Validate, +} from 'react-hook-form'; +import { useTranslation, Trans } from 'react-i18next'; + +import Form from '../../common/Form'; +import List from '../../common/List'; + +export type RegisteredServerPayload = { + email: string; + registerType: 'registered' | 'standalone'; + agreement: boolean; + updates: boolean; +}; + +type RegisterServerFormProps = { + currentStep: number; + stepCount: number; + initialValues?: Partial; + validateEmail?: Validate; + onSubmit: SubmitHandler; + onBackButtonClick: () => void; + onClickContinue: () => void; + termsHref?: string; + policyHref?: string; +}; + +const RegisterServerForm = ({ + currentStep, + stepCount, + initialValues, + validateEmail, + onSubmit, + onBackButtonClick, + onClickContinue, + termsHref = 'https://rocket.chat/terms', + policyHref = 'https://rocket.chat/policy', +}: RegisterServerFormProps): ReactElement => { + const { t } = useTranslation(); + const emailField = useUniqueId(); + + const breakpoints = useBreakpoints(); + const isMobile = !breakpoints.includes('md'); + + const form = useForm({ + mode: 'onChange', + defaultValues: { + email: '', + registerType: 'registered', + agreement: false, + updates: true, + ...initialValues, + }, + }); + + const { + register, + formState: { isValidating, isSubmitting, isValid, errors }, + handleSubmit, + } = form; + + return ( + + + + {t('form.registeredServerForm.title')} + + + + {t('form.registeredServerForm.included.push')} + + + {t('form.registeredServerForm.included.externalProviders')} + + + {t('form.registeredServerForm.included.apps')} + + + + + + + {t('form.registeredServerForm.fields.accountEmail.inputLabel')} + + + + + + {errors.email && ( + {t('component.form.requiredField')} + )} + + + + {' '} + + {t('form.registeredServerForm.keepInformed')} + + + + {' '} + + + I agree with + + Terms and Conditions + + and + + Privacy Policy + + + + + + + {t('form.registeredServerForm.agreeToReceiveUpdates')} + + + + + + + + + + + + + + + + + + ); +}; + +export default RegisterServerForm; diff --git a/packages/onboarding-ui/src/forms/RegisteredServerForm/index.ts b/packages/onboarding-ui/src/forms/RegisteredServerForm/index.ts new file mode 100644 index 0000000000..f5863fbaad --- /dev/null +++ b/packages/onboarding-ui/src/forms/RegisteredServerForm/index.ts @@ -0,0 +1 @@ +export { default } from './RegisteredServerForm'; diff --git a/packages/onboarding-ui/src/forms/StandaloneServerForm/StandaloneServerForm.spec.tsx b/packages/onboarding-ui/src/forms/StandaloneServerForm/StandaloneServerForm.spec.tsx new file mode 100644 index 0000000000..8676dc0d60 --- /dev/null +++ b/packages/onboarding-ui/src/forms/StandaloneServerForm/StandaloneServerForm.spec.tsx @@ -0,0 +1,17 @@ +import ReactDOM from 'react-dom'; + +import StandaloneServerForm from './StandaloneServerForm'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render( + undefined} + onSubmit={() => undefined} + />, + div + ); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/packages/onboarding-ui/src/forms/StandaloneServerForm/StandaloneServerForm.stories.tsx b/packages/onboarding-ui/src/forms/StandaloneServerForm/StandaloneServerForm.stories.tsx new file mode 100644 index 0000000000..075f0c4e3f --- /dev/null +++ b/packages/onboarding-ui/src/forms/StandaloneServerForm/StandaloneServerForm.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, Story } from '@storybook/react'; +import type { ComponentProps } from 'react'; + +import StandaloneServerForm from './StandaloneServerForm'; + +type Args = ComponentProps; + +export default { + title: 'forms/StandaloneServerForm', + component: StandaloneServerForm, + parameters: { + layout: 'centered', + actions: { argTypesRegex: '^on.*' }, + }, + args: { + currentStep: 1, + stepCount: 1, + }, +} as Meta; + +export const _StandaloneServerForm: Story = (args) => ( + +); +_StandaloneServerForm.storyName = 'StandaloneServerForm'; diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx b/packages/onboarding-ui/src/forms/StandaloneServerForm/StandaloneServerForm.tsx similarity index 56% rename from packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx rename to packages/onboarding-ui/src/forms/StandaloneServerForm/StandaloneServerForm.tsx index 1913b96808..3dff403073 100644 --- a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx +++ b/packages/onboarding-ui/src/forms/StandaloneServerForm/StandaloneServerForm.tsx @@ -4,38 +4,33 @@ import { useForm, SubmitHandler, FormProvider } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import Form from '../../common/Form'; -import RegisterOptionCard from './RegisterOptionCard'; -import StandaloneOptionCard from './StandaloneOptionCard'; +import List from '../../common/List'; -export type RegisterServerPayload = { +export type StandaloneServerPayload = { registerType: 'registered' | 'standalone'; - agreement: boolean; - updates: boolean; }; -type RegisterServerFormProps = { +type StandaloneServerFormProps = { currentStep: number; stepCount: number; - initialValues?: Partial; - onSubmit: SubmitHandler; + initialValues?: Partial; + onSubmit: SubmitHandler; onBackButtonClick: () => void; }; -const RegisterServerForm = ({ +const StandaloneServerForm = ({ currentStep, stepCount, initialValues, onSubmit, onBackButtonClick, -}: RegisterServerFormProps): ReactElement => { +}: StandaloneServerFormProps): ReactElement => { const { t } = useTranslation(); - const form = useForm({ + const form = useForm({ mode: 'onChange', defaultValues: { registerType: 'registered', - agreement: false, - updates: true, ...initialValues, }, }); @@ -49,11 +44,21 @@ const RegisterServerForm = ({
- {t('form.serverRegistrationForm.title')} + {t('form.standaloneServerForm.title')} + - + + + {t('form.standaloneServerForm.servicesUnavailable')} + + + {t('form.standaloneServerForm.publishOwnApp')} + + + {t('form.standaloneServerForm.manuallyIntegrate')} + + - @@ -73,4 +78,4 @@ const RegisterServerForm = ({ ); }; -export default RegisterServerForm; +export default StandaloneServerForm; diff --git a/packages/onboarding-ui/src/forms/StandaloneServerForm/index.ts b/packages/onboarding-ui/src/forms/StandaloneServerForm/index.ts new file mode 100644 index 0000000000..b009a834f7 --- /dev/null +++ b/packages/onboarding-ui/src/forms/StandaloneServerForm/index.ts @@ -0,0 +1 @@ +export { default } from './StandaloneServerForm'; diff --git a/packages/onboarding-ui/src/index.ts b/packages/onboarding-ui/src/index.ts index 895fff44ee..d5ea8e607b 100644 --- a/packages/onboarding-ui/src/index.ts +++ b/packages/onboarding-ui/src/index.ts @@ -1,14 +1,14 @@ export { default as AdminInfoPage } from './pages/AdminInfoPage'; export { default as AwaitingConfirmationPage } from './pages/AwaitingConfirmationPage'; export { default as CheckYourEmailPage } from './pages/CheckYourEmailPage'; -export { default as CloudAccountEmailPage } from './pages/CloudAccountEmailPage'; export { default as ConfirmationProcessPage } from './pages/ConfirmationProcessPage'; export { default as CreateCloudWorkspacePage } from './pages/CreateCloudWorkspacePage'; export { default as EmailConfirmedPage } from './pages/EmailConfirmedPage'; export { default as InvalidLinkPage } from './pages/InvalidLinkPage'; export { default as LoginLinkEmailPage } from './pages/LoginLinkEmailPage'; export { default as OrganizationInfoPage } from './pages/OrganizationInfoPage'; -export { default as RegisterServerPage } from './pages/RegisterServerPage'; +export { default as RegisteredServerPage } from './pages/RegisteredServerPage'; +export { default as StandaloneServerPage } from './pages/StandaloneServerPage'; export { default as RequestTrialPage } from './pages/RequestTrialPage'; export { default as DarkModeProvider } from './common/DarkModeProvider'; export { default as LoginPage } from './pages/LoginPage'; diff --git a/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.stories.tsx b/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.stories.tsx index 8c412fee46..1f5fd21b89 100644 --- a/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.stories.tsx +++ b/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.stories.tsx @@ -34,6 +34,7 @@ export const _CloudAdminInfoPage: Story = (args) => ( ); _AdminInfoPage.storyName = 'AdminInfoPage'; + _CloudAdminInfoPage.storyName = 'CloudAdminInfoPage'; _CloudAdminInfoPage.args = { diff --git a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.stories.tsx b/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.stories.tsx deleted file mode 100644 index 589f9bb11f..0000000000 --- a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { Story, Meta } from '@storybook/react'; -import type { ComponentProps } from 'react'; - -import CloudAccountEmailPage from './CloudAccountEmailPage'; - -type Args = ComponentProps; - -export default { - title: 'pages/CloudAccountEmailPage', - component: CloudAccountEmailPage, - parameters: { - actions: { argTypesRegex: '^on.*' }, - layout: 'fullscreen', - }, - args: { - currentStep: 1, - stepCount: 1, - }, -} as Meta; - -export const _CloudAccountEmailPage: Story = (args) => ( - -); -_CloudAccountEmailPage.storyName = 'CloudAccountEmailPage'; diff --git a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.styles.tsx b/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.styles.tsx deleted file mode 100644 index df57dfea46..0000000000 --- a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.styles.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import styled from '@rocket.chat/styled'; - -import { sans } from '../../helpers/tokenFontFamilies'; - -const filterTitleProps = ({ fontColor, ...props }: { fontColor?: string }) => - props; - -export const Title = styled('div', filterTitleProps)` - font-size: ${String(40 / 16)}rem; - font-family: ${sans}; - font-weight: 500; - line-height: ${String(42 / 16)}rem; - display: inline-block; - text-align: left; - color: ${(p) => (p.fontColor ? p.fontColor : '')}; - - @media (min-width: 1440px) { - text-align: start; - font-size: ${String(52 / 16)}rem; - line-height: ${String(62 / 16)}rem; - } -`; diff --git a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.tsx b/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.tsx deleted file mode 100644 index 7b393df564..0000000000 --- a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import colors from '@rocket.chat/fuselage-tokens/colors.json'; -import type { ReactElement } from 'react'; -import type { SubmitHandler, Validate } from 'react-hook-form'; -import { Trans } from 'react-i18next'; - -import BackgroundLayer from '../../common/BackgroundLayer'; -import FormPageLayout from '../../common/FormPageLayout'; -import type { FormPageLayoutStyleProps } from '../../common/Types'; -import CloudAccountEmailForm from '../../forms/CloudAccountEmailForm'; -import type { CloudAccountEmailPayload } from '../../forms/CloudAccountEmailForm/CloudAccountEmailForm'; -import { Title } from './CloudAccountEmailPage.styles'; - -const titleCloudEmailPages = () => ( - - <Trans i18nKey='page.form.title'> - Let's - <Title fontColor={colors.b500}>Launch - Your Workspace - - -); - -type CloudAccountEmailPageProps = { - currentStep: number; - stepCount: number; - initialValues?: Partial; - validateEmail: Validate; - onBackButtonClick: () => void; - onSubmit: SubmitHandler<{ - email: string; - }>; -}; - -const pageLayoutStyleProps: FormPageLayoutStyleProps = { - justifyContent: 'center', -}; - -const CloudAccountEmailPage = ( - props: CloudAccountEmailPageProps -): ReactElement => ( - - - - - -); - -export default CloudAccountEmailPage; diff --git a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/index.ts b/packages/onboarding-ui/src/pages/CloudAccountEmailPage/index.ts deleted file mode 100644 index 2151057c09..0000000000 --- a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CloudAccountEmailPage'; diff --git a/packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.stories.tsx b/packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.stories.tsx deleted file mode 100644 index 6532f19295..0000000000 --- a/packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { Story, Meta } from '@storybook/react'; -import type { ComponentProps } from 'react'; - -import RegisterServerPage from './RegisterServerPage'; - -type Args = ComponentProps; - -export default { - title: 'pages/RegisterServerPage', - component: RegisterServerPage, - parameters: { - actions: { argTypesRegex: '^on.*' }, - layout: 'fullscreen', - }, - args: { - currentStep: 1, - stepCount: 1, - onSubmit: (data) => console.log(data), - onBackButtonClick: () => console.log('Back'), - }, -} as Meta; - -export const _RegisterServerPage: Story = (args) => ( - -); -_RegisterServerPage.storyName = 'RegisterServerPage'; diff --git a/packages/onboarding-ui/src/pages/RegisterServerPage/index.ts b/packages/onboarding-ui/src/pages/RegisterServerPage/index.ts deleted file mode 100644 index 389a629fc4..0000000000 --- a/packages/onboarding-ui/src/pages/RegisterServerPage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './RegisterServerPage'; diff --git a/packages/onboarding-ui/src/pages/RegisteredServerPage/RegisteredServerPage.spec.tsx b/packages/onboarding-ui/src/pages/RegisteredServerPage/RegisteredServerPage.spec.tsx new file mode 100644 index 0000000000..d6faf7b3a4 --- /dev/null +++ b/packages/onboarding-ui/src/pages/RegisteredServerPage/RegisteredServerPage.spec.tsx @@ -0,0 +1,18 @@ +import ReactDOM from 'react-dom'; + +import RegisteredServerPage from './RegisteredServerPage'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render( + undefined} + onBackButtonClick={() => undefined} + onClickContinue={() => undefined} + />, + div + ); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/packages/onboarding-ui/src/pages/RegisteredServerPage/RegisteredServerPage.stories.tsx b/packages/onboarding-ui/src/pages/RegisteredServerPage/RegisteredServerPage.stories.tsx new file mode 100644 index 0000000000..09f13c477b --- /dev/null +++ b/packages/onboarding-ui/src/pages/RegisteredServerPage/RegisteredServerPage.stories.tsx @@ -0,0 +1,24 @@ +import type { Story, Meta } from '@storybook/react'; +import type { ComponentProps } from 'react'; + +import RegisteredServerPage from './RegisteredServerPage'; + +type Args = ComponentProps; + +export default { + title: 'pages/RegisteredServerPage', + component: RegisteredServerPage, + parameters: { + actions: { argTypesRegex: '^on.*' }, + layout: 'fullscreen', + }, + args: { + currentStep: 1, + stepCount: 1, + }, +} as Meta; + +export const _RegisteredServerPage: Story = (args) => ( + +); +_RegisteredServerPage.storyName = 'RegisteredServerPage'; diff --git a/packages/onboarding-ui/src/pages/RegisteredServerPage/RegisteredServerPage.tsx b/packages/onboarding-ui/src/pages/RegisteredServerPage/RegisteredServerPage.tsx new file mode 100644 index 0000000000..bd8c25139f --- /dev/null +++ b/packages/onboarding-ui/src/pages/RegisteredServerPage/RegisteredServerPage.tsx @@ -0,0 +1,47 @@ +import type { ReactElement } from 'react'; +import type { SubmitHandler, Validate } from 'react-hook-form'; +import { Trans } from 'react-i18next'; + +import BackgroundLayer from '../../common/BackgroundLayer'; +import FormPageLayout from '../../common/FormPageLayout'; +import { Title, TitleHighlight } from '../../common/FormPageLayout.styles'; +import type { FormPageLayoutStyleProps } from '../../common/Types'; +import RegisteredServerForm from '../../forms/RegisteredServerForm'; +import type { RegisteredServerPayload } from '../../forms/RegisteredServerForm/RegisteredServerForm'; + +type RegisteredServerPageProps = { + currentStep: number; + stepCount: number; + initialValues?: Partial; + onSubmit: SubmitHandler; + onBackButtonClick: () => void; + onClickContinue: () => void; + validateEmail?: Validate; +}; + +const pageLayoutStyleProps: FormPageLayoutStyleProps = { + justifyContent: 'center', +}; + +const RegisteredServerPage = ( + props: RegisteredServerPageProps +): ReactElement => ( + + + + Let's + Launch + Your Workspace + + + } + styleProps={pageLayoutStyleProps} + > + + + +); + +export default RegisteredServerPage; diff --git a/packages/onboarding-ui/src/pages/RegisteredServerPage/index.ts b/packages/onboarding-ui/src/pages/RegisteredServerPage/index.ts new file mode 100644 index 0000000000..c371a08fba --- /dev/null +++ b/packages/onboarding-ui/src/pages/RegisteredServerPage/index.ts @@ -0,0 +1 @@ +export { default } from './RegisteredServerPage'; diff --git a/packages/onboarding-ui/src/pages/StandaloneServerPage/StandaloneServerPage.spec.tsx b/packages/onboarding-ui/src/pages/StandaloneServerPage/StandaloneServerPage.spec.tsx new file mode 100644 index 0000000000..f87ac2c43d --- /dev/null +++ b/packages/onboarding-ui/src/pages/StandaloneServerPage/StandaloneServerPage.spec.tsx @@ -0,0 +1,17 @@ +import ReactDOM from 'react-dom'; + +import StandaloneServerPage from './StandaloneServerPage'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render( + undefined} + onBackButtonClick={() => undefined} + />, + div + ); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/packages/onboarding-ui/src/pages/StandaloneServerPage/StandaloneServerPage.stories.tsx b/packages/onboarding-ui/src/pages/StandaloneServerPage/StandaloneServerPage.stories.tsx new file mode 100644 index 0000000000..e4db43a23a --- /dev/null +++ b/packages/onboarding-ui/src/pages/StandaloneServerPage/StandaloneServerPage.stories.tsx @@ -0,0 +1,24 @@ +import type { Story, Meta } from '@storybook/react'; +import type { ComponentProps } from 'react'; + +import StandaloneServerPage from './StandaloneServerPage'; + +type Args = ComponentProps; + +export default { + title: 'pages/StandaloneServerPage', + component: StandaloneServerPage, + parameters: { + actions: { argTypesRegex: '^on.*' }, + layout: 'fullscreen', + }, + args: { + currentStep: 1, + stepCount: 1, + }, +} as Meta; + +export const _StandaloneServerPage: Story = (args) => ( + +); +_StandaloneServerPage.storyName = 'StandaloneServerPage'; diff --git a/packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.tsx b/packages/onboarding-ui/src/pages/StandaloneServerPage/StandaloneServerPage.tsx similarity index 65% rename from packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.tsx rename to packages/onboarding-ui/src/pages/StandaloneServerPage/StandaloneServerPage.tsx index 6854e3c568..442ed5e977 100644 --- a/packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.tsx +++ b/packages/onboarding-ui/src/pages/StandaloneServerPage/StandaloneServerPage.tsx @@ -6,14 +6,14 @@ import BackgroundLayer from '../../common/BackgroundLayer'; import FormPageLayout from '../../common/FormPageLayout'; import { Title, TitleHighlight } from '../../common/FormPageLayout.styles'; import type { FormPageLayoutStyleProps } from '../../common/Types'; -import RegisterServerForm from '../../forms/RegisterServerForm'; -import type { RegisterServerPayload } from '../../forms/RegisterServerForm/RegisterServerForm'; +import StandaloneServerForm from '../../forms/StandaloneServerForm'; +import type { StandaloneServerPayload } from '../../forms/StandaloneServerForm/StandaloneServerForm'; -type RegisterServerPageProps = { +type RegisteredServerPageProps = { currentStep: number; stepCount: number; - initialValues?: Partial; - onSubmit: SubmitHandler; + initialValues?: Partial; + onSubmit: SubmitHandler; onBackButtonClick: () => void; }; @@ -21,7 +21,9 @@ const pageLayoutStyleProps: FormPageLayoutStyleProps = { justifyContent: 'center', }; -const RegisterServerPage = (props: RegisterServerPageProps): ReactElement => ( +const StandaloneServerPage = ( + props: RegisteredServerPageProps +): ReactElement => ( ( } styleProps={pageLayoutStyleProps} > - + ); -export default RegisterServerPage; +export default StandaloneServerPage; diff --git a/packages/onboarding-ui/src/pages/StandaloneServerPage/index.ts b/packages/onboarding-ui/src/pages/StandaloneServerPage/index.ts new file mode 100644 index 0000000000..fefde0953a --- /dev/null +++ b/packages/onboarding-ui/src/pages/StandaloneServerPage/index.ts @@ -0,0 +1 @@ +export { default } from './StandaloneServerPage';