feat(onboarding-ui): RegisterServer Step Flow

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</1> and <3>Privacy Policy</3>"
@@ -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",

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};
 `;

packages/onboarding-ui/src/common/List/ListItem.tsx

@@ -12,7 +12,7 @@ const ListItem = ({
   iconColor?: ComponentProps<typeof Icon>['color'];
   fontScale?: ComponentProps<typeof Box>['fontScale'];
 }): ReactElement => (
-  <Box is='li' fontScale={fontScale} color='inherit'>
+  <Box display='flex' is='li' fontScale={fontScale} color='inherit'>
     {icon && <Icon name={icon} color={iconColor} size='x16' mie='x4' />}
     {children}
   </Box>

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 (
-      <RegisterServerPage
+      <RegisteredServerPage
         currentStep={3}
         stepCount={4}
         initialValues={{
@@ -149,19 +130,19 @@ export const SelfHostedRegistration: Story = () => {
         }}
         onBackButtonClick={() => navigateTo('/org-info')}
         onSubmit={handleRegisterServerSubmit}
+        onClickContinue={() => navigateTo('/standalone-confirmation')}
       />
     );
   }
 
-  if (path === '/cloud-email') {
+  if (path === '/standalone-confirmation') {
     return (
-      <CloudAccountEmailPage
+      <StandaloneServerPage
         currentStep={4}
         stepCount={4}
         initialValues={{}}
-        validateEmail={validateEmail}
         onBackButtonClick={() => navigateTo('/register-server')}
-        onSubmit={handleCloudAccountEmailSubmit}
+        onSubmit={() => navigateTo('/home')}
       />
     );
   }

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 = {

packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.tsx

@@ -54,7 +54,7 @@ const CreateCloudWorkspaceForm = ({
     control,
     handleSubmit,
     formState: { isDirty, isValidating, isSubmitting, errors },
-  } = useForm();
+  } = useForm<CreateCloudWorkspaceFormPayload, object>();
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
@@ -132,7 +132,7 @@ const CreateCloudWorkspaceForm = ({
           <Field.Row>
             <WorkspaceUrlInput
               domain={domain}
-              {...register('workspaceUrl', {
+              {...register('workspaceURL', {
                 required: true,
                 validate: validateUrl,
               })}
@@ -141,10 +141,10 @@ const CreateCloudWorkspaceForm = ({
               )}
             />
           </Field.Row>
-          {errors.workspaceUrl?.type === 'required' && (
+          {errors.workspaceURL?.type === 'required' && (
             <Field.Error>{t('component.form.requiredField')}</Field.Error>
           )}
-          {errors.workspaceUrl?.type === 'validate' && (
+          {errors.workspaceURL?.type === 'validate' && (
             <Field.Error>
               {t('form.createCloudWorkspace.fields.workspaceUrl.exists')}
             </Field.Error>