QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-15 20:30:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactoring: setup wizard pages with simple architecture.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-10-11 20:35:01 +02:00
parent b98ecb7569
commit e15a48dcdd
29 changed files with 608 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/App.js
View File

@@ -7,9 +7,8 @@ import { ReactQueryDevtools } from 'react-query-devtools';
import PrivateRoute from 'components/PrivateRoute';
import Authentication from 'components/Authentication';
import Dashboard from 'components/Dashboard/Dashboard';
import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
import RegisterWizardPage from 'containers/Authentication/Register/RegisterPage';
import messages from 'lang/en';
import 'style/App.scss';
@@ -32,12 +31,8 @@ function App({ locale }) {
<Authentication />
</Route>
<Route path={'/register'}>
<RegisterWizardPage />
</Route>
<Route path={'/'}>
<PrivateRoute component={Dashboard} />
<PrivateRoute component={DashboardPrivatePages} />
</Route>
</Switch>
</Router>

18
client/src/components/Dashboard/Dashboard.js
View File

@@ -14,7 +14,6 @@ import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
import EnsureOrganizationIsReady from './EnsureOrganizationIsReady';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import withOrganizationsActions from 'containers/Organization/withOrganizationActions';
import { compose } from 'utils';
@@ -22,20 +21,14 @@ import { compose } from 'utils';
function Dashboard({
// #withSettings
requestFetchOptions,
// #withOrganizations
requestOrganizationsList,
}) {
const fetchOrganizations = useQuery(
['organizations'],
(key) => requestOrganizationsList(),
);
// const fetchOptions = useQuery(
// ['options'], () => requestFetchOptions(),
// );
return (
<EnsureOrganizationIsReady>
<DashboardLoadingIndicator
isLoading={
fetchOrganizations.isLoading
}>
<DashboardLoadingIndicator isLoading={false}>
<Switch>
<Route path="/preferences">
<DashboardSplitPane>
@@ -62,5 +55,4 @@ function Dashboard({
export default compose(
withSettingsActions,
withOrganizationsActions,
)(Dashboard);

5
client/src/components/Dashboard/DashboardLoadingIndicator.js
View File

@@ -2,12 +2,13 @@ import React from 'react';
import classNames from 'classnames';
import { Choose, Icon } from 'components';
export default function Dashboard({
export default function DashboardLoadingIndicator({
isLoading = false,
className,
children,
}) {
return (
<div className={classNames('dashboard')}>
<div className={classNames(className)}>
<Choose>
<Choose.When condition={isLoading}>
<div class="center">

29
client/src/components/Dashboard/EnsureOrganizationIsReady.js
View File

@@ -1,16 +1,29 @@
import React from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { compose } from 'utils';
import withAuthentication from 'containers/Authentication/withAuthentication';
import withOrganizationByOrgId from 'containers/Organization/withOrganizationByOrgId';
export default function EnsureOrganizationIsReady({
function EnsureOrganizationIsReady({
// #ownProps
children,
}) {
const isOrganizationReady = false;
redirectTo = '/setup',
return (isOrganizationReady) ? children : (
// #withOrganizationByOrgId
organization,
}) {
return (organization.is_ready) ? children : (
<Redirect
to={{
pathname: '/register'
}}
to={{ pathname: redirectTo }}
/>
);
}
}
export default compose(
withAuthentication(),
connect((state, props) => ({
organizationId: props.currentOrganizationId,
})),
withOrganizationByOrgId(),
)(EnsureOrganizationIsReady);

41
client/src/components/Dashboard/PrivatePages.js Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react';
import { Switch, Route } from 'react-router';
import { useQuery } from 'react-query';
import Dashboard from 'components/Dashboard/Dashboard';
import SetupWizardPage from 'containers/Setup/WizardSetupPage';
import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
import withOrganizationActions from 'containers/Organization/withOrganizationActions';
import { compose } from 'utils';
/**
* Dashboard inner private pages.
*/
function DashboardPrivatePages({
requestOrganizationsList,
}) {
const fetchOrganizations = useQuery(
['organizations'],
() => requestOrganizationsList(),
);
return (
<DashboardLoadingIndicator isLoading={fetchOrganizations.isLoading}>
<Switch>
<Route path={'/setup'}>
<SetupWizardPage />
</Route>
<Route path='/'>
<Dashboard />
</Route>
</Switch>
</DashboardLoadingIndicator>
);
}
export default compose(
withOrganizationActions,
)(DashboardPrivatePages);

6
client/src/containers/Authentication/Login.js
View File

@@ -19,18 +19,15 @@ import Icon from 'components/Icon';
import { If } from 'components';
import withAuthenticationActions from './withAuthenticationActions';
import withOrganizationsActions from 'containers/Organization/withOrganizationActions';
import { compose } from 'utils';
const ERRORS_TYPES = {
INVALID_DETAILS: 'INVALID_DETAILS',
USER_INACTIVE: 'USER_INACTIVE',
};
function Login({
requestLogin,
requestOrganizationsList,
}) {
const { formatMessage } = useIntl();
const history = useHistory();
@@ -105,7 +102,7 @@ function Login({
<div className={'authentication-page__label-section'}>
<h3><T id={'log_in'} /></h3>
<T id={'need_bigcapital_account'} />
<Link to='/register'> <T id={'create_an_account'} /></Link>
<Link to='/auth/register'> <T id={'create_an_account'} /></Link>
</div>
<form onSubmit={handleSubmit} className={'authentication-page__form'}>
@@ -170,5 +167,4 @@ function Login({
export default compose(
withAuthenticationActions,
withOrganizationsActions,
)(Login);

284
client/src/containers/Authentication/Register.js Normal file
View File

@@ -0,0 +1,284 @@
import React, { useMemo, useState, useCallback } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Row, Col } from 'react-grid-system';
import { Link, useHistory } from 'react-router-dom';
import {
Button,
InputGroup,
Intent,
FormGroup,
Spinner,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import AppToaster from 'components/AppToaster';
import AuthInsider from 'containers/Authentication/AuthInsider';
import ErrorMessage from 'components/ErrorMessage';
import Icon from 'components/Icon';
import { If } from 'components';
import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
import { compose } from 'utils';
function RegisterUserForm({ requestRegister, requestLogin }) {
const { formatMessage } = useIntl();
const history = useHistory();
const [shown, setShown] = useState(false);
const passwordRevealer = useCallback(() => {
setShown(!shown);
}, [shown]);
const ValidationSchema = Yup.object().shape({
first_name: Yup.string()
.required()
.label(formatMessage({ id: 'first_name_' })),
last_name: Yup.string()
.required()
.label(formatMessage({ id: 'last_name_' })),
email: Yup.string()
.email()
.required()
.label(formatMessage({ id: 'email' })),
phone_number: Yup.string()
.matches()
.required()
.label(formatMessage({ id: 'phone_number_' })),
password: Yup.string()
.min(4)
.required()
.label(formatMessage({ id: 'password' })),
});
const initialValues = useMemo(
() => ({
first_name: '',
last_name: '',
email: '',
phone_number: '',
password: '',
}),
[],
);
const {
errors,
touched,
handleSubmit,
getFieldProps,
isSubmitting,
} = useFormik({
enableReinitialize: true,
validationSchema: ValidationSchema,
initialValues: {
...initialValues,
country: 'libya',
},
onSubmit: (values, { setSubmitting, setErrors }) => {
requestRegister(values)
.then((response) => {
requestLogin({
crediential: values.email,
password: values.password,
})
.then(() => {
history.push('/register/subscription');
setSubmitting(false);
})
.catch((errors) => {
AppToaster.show({
message: formatMessage({ id: 'something_wentwrong' }),
intent: Intent.SUCCESS,
});
});
})
.catch((errors) => {
if (errors.some((e) => e.type === 'PHONE_NUMBER_EXISTS')) {
setErrors({
phone_number: formatMessage({
id: 'the_phone_number_already_used_in_another_account',
}),
});
}
if (errors.some((e) => e.type === 'EMAIL_EXISTS')) {
setErrors({
email: formatMessage({
id: 'the_email_already_used_in_another_account',
}),
});
}
setSubmitting(false);
});
},
});
const passwordRevealerTmp = useMemo(
() => (
<span class="password-revealer" onClick={() => passwordRevealer()}>
<If condition={shown}>
<>
<Icon icon="eye-slash" />{' '}
<span class="text">
<T id={'hide'} />
</span>
</>
</If>
<If condition={!shown}>
<>
<Icon icon="eye" />{' '}
<span class="text">
<T id={'show'} />
</span>
</>
</If>
</span>
),
[shown, passwordRevealer],
);
return (
<AuthInsider>
<div className={'register-form'}>
<div className={'authentication-page__label-section'}>
<h3>
<T id={'register_a_new_organization'} />
</h3>
<T id={'you_have_a_bigcapital_account'} />
<Link to="/auth/login">
{' '}
<T id={'login'} />
</Link>
</div>
<form onSubmit={handleSubmit} className={'authentication-page__form'}>
<Row className={'name-section'}>
<Col md={6}>
<FormGroup
label={<T id={'first_name'} />}
intent={
errors.first_name && touched.first_name && Intent.DANGER
}
helperText={
<ErrorMessage name={'first_name'} {...{ errors, touched }} />
}
className={'form-group--first-name'}
>
<InputGroup
intent={
errors.first_name && touched.first_name && Intent.DANGER
}
{...getFieldProps('first_name')}
/>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup
label={<T id={'last_name'} />}
intent={errors.last_name && touched.last_name && Intent.DANGER}
helperText={
<ErrorMessage name={'last_name'} {...{ errors, touched }} />
}
className={'form-group--last-name'}
>
<InputGroup
intent={
errors.last_name && touched.last_name && Intent.DANGER
}
{...getFieldProps('last_name')}
/>
</FormGroup>
</Col>
</Row>
<FormGroup
label={<T id={'phone_number'} />}
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
helperText={
<ErrorMessage name={'phone_number'} {...{ errors, touched }} />
}
className={'form-group--phone-number'}
>
<InputGroup
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
{...getFieldProps('phone_number')}
/>
</FormGroup>
<FormGroup
label={<T id={'email'} />}
intent={errors.email && touched.email && Intent.DANGER}
helperText={
<ErrorMessage name={'email'} {...{ errors, touched }} />
}
className={'form-group--email'}
>
<InputGroup
intent={errors.email && touched.email && Intent.DANGER}
{...getFieldProps('email')}
/>
</FormGroup>
<FormGroup
label={<T id={'password'} />}
labelInfo={passwordRevealerTmp}
intent={errors.password && touched.password && Intent.DANGER}
helperText={
<ErrorMessage name={'password'} {...{ errors, touched }} />
}
className={'form-group--password has-password-revealer'}
>
<InputGroup
lang={true}
type={shown ? 'text' : 'password'}
intent={errors.password && touched.password && Intent.DANGER}
{...getFieldProps('password')}
/>
</FormGroup>
<div className={'register-form__agreement-section'}>
<p>
<T id={'signing_in_or_creating'} /> <br />
<Link>
<T id={'terms_conditions'} />
</Link>{' '}
<T id={'and'} />
<Link>
{' '}
<T id={'privacy_statement'} />
</Link>
</p>
</div>
<div className={'authentication-page__submit-button-wrap'}>
<Button
className={'btn-register'}
intent={Intent.PRIMARY}
type="submit"
fill={true}
loading={isSubmitting}
>
<T id={'register'} />
</Button>
</div>
</form>
<If condition={isSubmitting}>
<div class="authentication-page__loading-overlay">
<Spinner size={50} />
</div>
</If>
</div>
</AuthInsider>
);
}
export default compose(
withAuthenticationActions,
)(RegisterUserForm);

14
client/src/containers/Authentication/Register/RegisterPage.js
View File

@@ -1,14 +0,0 @@
import React from 'react';
import RegisterRightSection from './RegisterRightSection';
import RegisterLeftSection from './RegisterLeftSection';
function RegisterWizardPage() {
return (
<div class="register-page">
<RegisterLeftSection />
<RegisterRightSection />
</div>
);
}
export default RegisterWizardPage;

55
client/src/containers/Authentication/Register/RegisterRightSection.js
View File

@@ -1,55 +0,0 @@
import React from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { Wizard, Steps, Step } from 'react-albus';
import { useHistory } from "react-router-dom";
import RegisterWizardSteps from './RegisterWizardSteps';
import PrivateRoute from 'components/PrivateRoute';
import RegisterUserForm from 'containers/Authentication/Register/RegisterUserForm';
import RegisterSubscriptionForm from 'containers/Authentication/Register/RegisterSubscriptionForm';
import RegisterOrganizationForm from 'containers/Authentication/Register/RegisterOrganizationForm';
export default function RegisterRightSection () {
const history = useHistory();
return (
<section className={'register-page__right-section'}>
<Wizard
basename={'/register'}
history={history}
render={({ step, steps }) => (
<div>
<RegisterWizardSteps currentStep={steps.indexOf(step) + 1} />
<TransitionGroup>
<CSSTransition
key={step.id}
classNames="example"
timeout={{ enter: 500, exit: 500 }}
>
<div class="register-page-form">
<Steps key={step.id} step={step}>
<Step id="user">
<RegisterUserForm />
</Step>
<Step id="subscription">
<PrivateRoute component={RegisterSubscriptionForm} />
</Step>
<Step id="organization">
<PrivateRoute component={RegisterOrganizationForm} />
</Step>
<Step id="congratulations">
<h1 className="text-align-center">Ice King</h1>
</Step>
</Steps>
</div>
</CSSTransition>
</TransitionGroup>
</div>
)} />
</section>
)
}

281
client/src/containers/Authentication/Register/RegisterUserForm.js
View File

@@ -1,281 +0,0 @@
import React, { useMemo, useState, useCallback } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Row, Col } from 'react-grid-system';
import { Link, useHistory } from 'react-router-dom';
import {
Button,
InputGroup,
Intent,
FormGroup,
Spinner,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import AppToaster from 'components/AppToaster';
import ErrorMessage from 'components/ErrorMessage';
import Icon from 'components/Icon';
import { If } from 'components';
import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
import { compose } from 'utils';
function RegisterUserForm({ requestRegister, requestLogin }) {
const { formatMessage } = useIntl();
const history = useHistory();
const [shown, setShown] = useState(false);
const passwordRevealer = useCallback(() => {
setShown(!shown);
}, [shown]);
const ValidationSchema = Yup.object().shape({
first_name: Yup.string()
.required()
.label(formatMessage({ id: 'first_name_' })),
last_name: Yup.string()
.required()
.label(formatMessage({ id: 'last_name_' })),
email: Yup.string()
.email()
.required()
.label(formatMessage({ id: 'email' })),
phone_number: Yup.string()
.matches()
.required()
.label(formatMessage({ id: 'phone_number_' })),
password: Yup.string()
.min(4)
.required()
.label(formatMessage({ id: 'password' })),
});
const initialValues = useMemo(
() => ({
first_name: '',
last_name: '',
email: '',
phone_number: '',
password: '',
}),
[],
);
const {
errors,
touched,
handleSubmit,
getFieldProps,
isSubmitting,
} = useFormik({
enableReinitialize: true,
validationSchema: ValidationSchema,
initialValues: {
...initialValues,
country: 'libya',
},
onSubmit: (values, { setSubmitting, setErrors }) => {
requestRegister(values)
.then((response) => {
requestLogin({
crediential: values.email,
password: values.password,
})
.then(() => {
history.push('/register/subscription');
setSubmitting(false);
})
.catch((errors) => {
AppToaster.show({
message: formatMessage({
id: 'something_wentwrong',
}),
intent: Intent.SUCCESS,
});
});
})
.catch((errors) => {
if (errors.some((e) => e.type === 'PHONE_NUMBER_EXISTS')) {
setErrors({
phone_number: formatMessage({
id: 'the_phone_number_already_used_in_another_account',
}),
});
}
if (errors.some((e) => e.type === 'EMAIL_EXISTS')) {
setErrors({
email: formatMessage({
id: 'the_email_already_used_in_another_account',
}),
});
}
setSubmitting(false);
});
},
});
const passwordRevealerTmp = useMemo(
() => (
<span class="password-revealer" onClick={() => passwordRevealer()}>
<If condition={shown}>
<>
<Icon icon="eye-slash" />{' '}
<span class="text">
<T id={'hide'} />
</span>
</>
</If>
<If condition={!shown}>
<>
<Icon icon="eye" />{' '}
<span class="text">
<T id={'show'} />
</span>
</>
</If>
</span>
),
[shown, passwordRevealer],
);
return (
<div className={'register-form'}>
<div className={'authentication-page__label-section'}>
<h3>
<T id={'register_a_new_organization'} />
</h3>
<T id={'you_have_a_bigcapital_account'} />
<Link to="/auth/login">
{' '}
<T id={'login'} />
</Link>
</div>
<form onSubmit={handleSubmit} className={'authentication-page__form'}>
<Row className={'name-section'}>
<Col md={6}>
<FormGroup
label={<T id={'first_name'} />}
intent={
errors.first_name && touched.first_name && Intent.DANGER
}
helperText={
<ErrorMessage name={'first_name'} {...{ errors, touched }} />
}
className={'form-group--first-name'}
>
<InputGroup
intent={
errors.first_name && touched.first_name && Intent.DANGER
}
{...getFieldProps('first_name')}
/>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup
label={<T id={'last_name'} />}
intent={errors.last_name && touched.last_name && Intent.DANGER}
helperText={
<ErrorMessage name={'last_name'} {...{ errors, touched }} />
}
className={'form-group--last-name'}
>
<InputGroup
intent={
errors.last_name && touched.last_name && Intent.DANGER
}
{...getFieldProps('last_name')}
/>
</FormGroup>
</Col>
</Row>
<FormGroup
label={<T id={'phone_number'} />}
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
helperText={
<ErrorMessage name={'phone_number'} {...{ errors, touched }} />
}
className={'form-group--phone-number'}
>
<InputGroup
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
{...getFieldProps('phone_number')}
/>
</FormGroup>
<FormGroup
label={<T id={'email'} />}
intent={errors.email && touched.email && Intent.DANGER}
helperText={
<ErrorMessage name={'email'} {...{ errors, touched }} />
}
className={'form-group--email'}
>
<InputGroup
intent={errors.email && touched.email && Intent.DANGER}
{...getFieldProps('email')}
/>
</FormGroup>
<FormGroup
label={<T id={'password'} />}
labelInfo={passwordRevealerTmp}
intent={errors.password && touched.password && Intent.DANGER}
helperText={
<ErrorMessage name={'password'} {...{ errors, touched }} />
}
className={'form-group--password has-password-revealer'}
>
<InputGroup
lang={true}
type={shown ? 'text' : 'password'}
intent={errors.password && touched.password && Intent.DANGER}
{...getFieldProps('password')}
/>
</FormGroup>
<div className={'register-form__agreement-section'}>
<p>
<T id={'signing_in_or_creating'} /> <br />
<Link>
<T id={'terms_conditions'} />
</Link>{' '}
<T id={'and'} />
<Link>
{' '}
<T id={'privacy_statement'} />
</Link>
</p>
</div>
<div className={'authentication-page__submit-button-wrap'}>
<Button
className={'btn-register'}
intent={Intent.PRIMARY}
type="submit"
fill={true}
loading={isSubmitting}
>
<T id={'register'} />
</Button>
</div>
</form>
<If condition={isSubmitting}>
<div class="authentication-page__loading-overlay">
<Spinner size={50} />
</div>
</If>
</div>
);
}
export default compose(withAuthenticationActions)(RegisterUserForm);

1
client/src/containers/Authentication/withAuthentication.js
View File

@@ -6,6 +6,7 @@ export default (mapState) => {
const mapped = {
isAuthorized: isAuthenticated(state),
user: state.authentication.user,
currentOrganizationId: state.authentication?.tenant?.organization_id,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

12
client/src/containers/Authentication/withRegisterOrganizationActions.js
View File

@@ -1,12 +0,0 @@
import {
buildTenant,
seedTenant,
} from 'store/organization/organization.actions';
import { connect } from 'react-redux';
const mapDispatchToProps = (dispatch) => ({
requestBuildTenant: (id, token) => dispatch(buildTenant({ id, token })),
requestSeedTenant: (id, token) => dispatch(seedTenant({ id, token })),
});
export default connect(null, mapDispatchToProps);

4
client/src/containers/Organization/withOrganizationActions.js
View File

@@ -1,10 +1,14 @@
import { connect } from 'react-redux';
import {
fetchOrganizations,
buildTenant,
seedTenant,
} from 'store/organizations/organizations.actions';
export const mapDispatchToProps = (dispatch) => ({
requestOrganizationsList: () => dispatch(fetchOrganizations()),
requestBuildTenant: () => dispatch(buildTenant()),
requestSeedTenant: () => dispatch(seedTenant()),
});
export default connect(null, mapDispatchToProps);

2
client/src/containers/Organization/withOrganizationByOrgId.js
View File

@@ -1,7 +1,7 @@
import { connect } from 'react-redux';
import {
getOrganizationByOrgIdFactory,
} from 'store/organizations/organizations.selector';
} from 'store/organizations/organizations.selectors';
export default (mapState) => {
const getOrganizationByOrgId = getOrganizationByOrgIdFactory();

2
client/src/containers/Organization/withOrganizationByTenId.js
View File

@@ -1,7 +1,7 @@
import { connect } from 'react-redux';
import {
getOrganizationByTenantIdFactory,
} from 'store/organizations/organizations.selector';
} from 'store/organizations/organizations.selectors';
export default (mapState) => {
const getOrgByTenId = getOrganizationByTenantIdFactory();

25
client/src/containers/Setup/EnsureOrganizationIsNotReady.js Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { compose } from 'utils';
import withAuthentication from 'containers/Authentication/withAuthentication';
import withOrganizationByOrgId from 'containers/Organization/withOrganizationByOrgId';
function EnsureOrganizationIsNotReady({
children,
// #withOrganizationByOrgId
organization,
}) {
return (organization.is_ready) ? (
<Redirect to={{ pathname: '/' }} />
) : children;
}
export default compose(
withAuthentication(),
connect((state, props) => ({
organizationId: props.currentOrganizationId,
})),
withOrganizationByOrgId(),
)(EnsureOrganizationIsNotReady);

11
client/src/containers/Authentication/Register/RegisterLeftSection.js → client/src/containers/Setup/SetupLeftSection.js
View File

@@ -7,8 +7,10 @@ import withAuthenticationActions from 'containers/Authentication/withAuthenticat
import { compose } from 'utils';
function RegisterLeftSection({
/**
* Wizard setup left section.
*/
function SetupLeftSection({
requestLogout,
isAuthorized
}) {
@@ -19,7 +21,7 @@ function RegisterLeftSection({
}, [requestLogout]);
return (
<section className={'register-page__left-section'}>
<section className={'setup-page__left-section'}>
<div className={'content'}>
<div className={'content-logo'}>
<Icon
@@ -38,7 +40,6 @@ function RegisterLeftSection({
<T id={'you_have_a_bigcapital_account'} />
</p>
<If condition={!!isAuthorized}>
<div className={'content-org'}>
<span>
@@ -71,4 +72,4 @@ function RegisterLeftSection({
export default compose(
withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
withAuthenticationActions,
)(RegisterLeftSection);
)(SetupLeftSection);

10
client/src/containers/Authentication/Register/RegisterOrganizationForm.js → client/src/containers/Setup/SetupOrganizationForm.js
View File

@@ -20,11 +20,13 @@ import { momentFormatter, tansformDateValue } from 'utils';
import AppToaster from 'components/AppToaster';
import { ListSelect, ErrorMessage, FieldRequiredHint } from 'components';
import { useHistory } from 'react-router-dom';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import withRegisterOrganizationActions from 'containers/Authentication/withRegisterOrganizationActions';
import withOrganizationActions from 'containers/Organization/withOrganizationActions';
import { compose, optionsMapToArray } from 'utils';
function RegisterOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
const { formatMessage } = useIntl();
const [selected, setSelected] = useState();
const history = useHistory();
@@ -414,5 +416,5 @@ function RegisterOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
export default compose(
withSettingsActions,
withRegisterOrganizationActions,
)(RegisterOrganizationForm);
withOrganizationActions,
)(SetupOrganizationForm);

70
client/src/containers/Setup/SetupRightSection.js Normal file
View File

@@ -0,0 +1,70 @@
import React, { useCallback } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { Wizard, Steps, Step } from 'react-albus';
import { useHistory } from "react-router-dom";
import WizardSetupSteps from './WizardSetupSteps';
import SetupSubscriptionForm from './SetupSubscriptionForm';
import SetupOrganizationForm from './SetupOrganizationForm';
import withAuthentication from 'containers/Authentication/withAuthentication';
import { compose } from 'utils';
/**
* Wizard setup right section.
*/
function SetupRightSection ({
isTenantHasSubscriptions: hasSubscriptions = false,
}) {
const history = useHistory();
const handleSkip = useCallback(({ step, push }) => {
const scenarios = [
{ condition: hasSubscriptions, redirectTo: 'organization' },
{ condition: !hasSubscriptions, redirectTo: 'subscription' },
];
const scenario = scenarios.find((scenario) => scenario.condition);
if (scenario) {
push(scenario.redirectTo);
}
}, [hasSubscriptions]);
return (
<section className={'setup-page__right-section'}>
<Wizard
onNext={handleSkip}
basename={'/setup'}
history={history}
render={({ step, steps }) => (
<div>
<WizardSetupSteps currentStep={steps.indexOf(step) + 1} />
<TransitionGroup>
<CSSTransition key={step.id} timeout={{ enter: 500, exit: 500 }}>
<div class="register-page-form">
<Steps key={step.id} step={step}>
<Step id="subscription">
<SetupSubscriptionForm />
</Step>
<Step id="organization">
<SetupOrganizationForm />
</Step>
<Step id="congratulations">
<h1 className="text-align-center">Ice King</h1>
</Step>
</Steps>
</div>
</CSSTransition>
</TransitionGroup>
</div>
)} />
</section>
)
}
export default compose(
withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
)(SetupRightSection);

8
client/src/containers/Authentication/Register/RegisterSubscriptionForm.js → client/src/containers/Setup/SetupSubscriptionForm.js
View File

@@ -1,11 +1,13 @@
import React, { useMemo } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { FormattedMessage as T } from 'react-intl';
import { Button, Intent } from '@blueprintjs/core';
import BillingTab from 'containers/Subscriptions/BillingTab';
function RegisterSubscriptionForm({}) {
export default function SetupSubscriptionForm({
}) {
const ValidationSchema = Yup.object().shape({});
const initialValues = useMemo(() => ({}), []);
@@ -36,5 +38,3 @@ function RegisterSubscriptionForm({}) {
</div>
);
}
export default RegisterSubscriptionForm;

19
client/src/containers/Setup/WizardSetupPage.js Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import EnsureOrganizationIsNotReady from './EnsureOrganizationIsNotReady';
import SetupRightSection from './SetupRightSection';
import SetupLeftSection from './SetupLeftSection';
export default function WizardSetupPage({
organizationId,
}) {
return (
<EnsureOrganizationIsNotReady>
<div class="setup-page">
<SetupLeftSection />
<SetupRightSection />
</div>
</EnsureOrganizationIsNotReady>
);
};

14
client/src/containers/Authentication/Register/RegisterWizardSteps.js → client/src/containers/Setup/WizardSetupSteps.js
View File

@@ -3,7 +3,7 @@ import classNames from 'classnames';
import { FormattedMessage as T } from 'react-intl';
import { registerWizardSteps } from 'common/registerWizard'
function RegisterWizardStep({
function WizardSetupStep({
label,
isActive = false
}) {
@@ -14,15 +14,15 @@ function RegisterWizardStep({
);
}
function RegisterWizardSteps({
function WizardSetupSteps({
currentStep = 1,
}) {
return (
<div className={'register-wizard-steps'}>
<div className={'wizard-container'}>
<ul className={'wizard-wrapper'}>
<div className={'setup-page-steps-container'}>
<div className={'setup-page-steps'}>
<ul>
{registerWizardSteps.map((step, index) => (
<RegisterWizardStep
<WizardSetupStep
label={step.label}
isActive={(index + 1) <= currentStep}
/>
@@ -33,4 +33,4 @@ function RegisterWizardSteps({
);
}
export default RegisterWizardSteps;
export default WizardSetupSteps;

6
client/src/routes/authentication.js
View File

@@ -26,5 +26,11 @@ export default [
component: LazyLoader({
loader: () => import('containers/Authentication/InviteAccept'),
}),
},
{
path: `${BASE_URL}/register`,
component: LazyLoader({
loader: () => import('containers/Authentication/Register'),
}),
}
];

28
client/src/store/organization/organization.actions.js
View File

@@ -1,28 +0,0 @@
import ApiService from 'services/ApiService';
export const buildTenant = ({ id, token }) => {
return (dispatch) => {
return new Promise((resolve, reject) => {
ApiService.post(`organization/build${token}`, id)
.then((response) => {
resolve(response);
})
.catch((error) => {
reject(error.response.data.errors || []);
});
});
};
};
export const seedTenant = ({ id, token }) => {
return (dispatch) => {
return new Promise((resolve, reject) => {
ApiService.post(`organization/seed/${token}`, id)
.then((response) => {
resolve(response);
})
.catch((error) => {
reject(error.response.data.errors || []);
});
});
};
};

40
client/src/store/organizations/organizations.actions.js
View File

@@ -1,16 +1,32 @@
import ApiService from 'services/ApiService';
import t from 'store/types';
export const fetchOrganizations = () => {
return (dispatch) => new Promise((resolve, reject) => {
ApiService.get('organization/all').then((response) => {
dispatch({
type: t.ORGANIZATIONS_LIST_SET,
payload: {
organizations: response.data.organizations,
},
});
resolve(response)
}).catch(error => { reject(error); });
export const fetchOrganizations = () => (dispatch) => new Promise((resolve, reject) => {
ApiService.get('organization/all').then((response) => {
dispatch({
type: t.ORGANIZATIONS_LIST_SET,
payload: {
organizations: response.data.organizations,
},
});
resolve(response)
}).catch(error => { reject(error); });
});
export const buildTenant = () => (dispatch) => new Promise((resolve, reject) => {
ApiService.post(`organization/build`).then((response) => {
resolve(response);
})
.catch((error) => {
reject(error.response.data.errors || []);
});
};
});
export const seedTenant = () => (dispatch) => new Promise((resolve, reject) => {
ApiService.post(`organization/seed/`).then((response) => {
resolve(response);
})
.catch((error) => {
reject(error.response.data.errors || []);
});
});

14
client/src/store/organizations/organizations.selectors.js
View File

@@ -2,17 +2,17 @@ import { createSelector } from '@reduxjs/toolkit';
const oragnizationByTenantIdSelector = (state, props) => state.organizations[props.tenantId];
const organizationByIdSelector = (state, props) => state.organizations.byOrganizationId[props.organizationId];
const organizationsDataSelector = (state, props) => state.organizations.data;
export const getOrganizationByOrgIdFactory = () => createSelector(
organizationByIdSelector,
(organization) => {
return organization;
},
organizationsDataSelector,
(organizationId, organizationsData) => {
return organizationsData[organizationId];
}
);
export const getOrganizationByTenantIdFactory = () => createSelector(
oragnizationByTenantIdSelector,
(organization) => {
return organization;
}
)
(organization) => organization,
);

93
client/src/style/pages/register-wizard-page.scss
View File

@@ -1,5 +1,5 @@
.register-page {
.setup-page {
&__right-section {
padding-left: 25%;
@@ -60,13 +60,14 @@
}
}
// Register Wizard Steps
.wizard-container {
width: 80%;
margin: 60px auto;
.setup-page-steps {
.wizard-wrapper li {
&-container {
width: 80%;
margin: 60px auto;
}
li{
position: relative;
list-style-type: none;
width: 25%;
@@ -74,48 +75,54 @@
text-align: center;
color: #000;
font-size: 15px;
}
.wizard-wrapper li::before {
width: 13px;
height: 13px;
content: '';
line-height: 30px;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: #75859c;
}
.wizard-wrapper li::after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #75859c;
top: 6px;
left: -50%;
z-index: -1;
}
.wizard-wrapper li:first-child::after {
display: none;
}
.wizard-wrapper > li.complete::before {
background-color: #75859c;
}
&::before {
width: 13px;
height: 13px;
content: '';
line-height: 30px;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: #75859c;
}
.wizard-wrapper > li.complete ~ li::before {
background: #ebebeb;
}
&::after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #75859c;
top: 6px;
left: -50%;
z-index: -1;
}
.wizard-wrapper > li.complete ~ li::after {
background: #ebebeb;
}
.wizard-wrapper > li.complete p.wizard-info {
color: #004dd0;
&:first-child::after {
display: none;
}
&.is-active {
&::before {
background-color: #75859c;
}
~ li {
&:before,
&:after {
background: #ebebeb;
}
}
p.wizard-info {
color: #004dd0;
}
}
}
}
// @import './billing.scss';
//Register Subscription form

14
server/src/system/models/Tenant.js
View File

@@ -17,6 +17,20 @@ export default class Tenant extends BaseModel {
return ['createdAt', 'updatedAt'];
}
/**
* Virtual attributes.
*/
static get virtualAttributes() {
return ['isReady'];
}
/**
* Tenant is ready.
*/
get isReady() {
return !!(this.initializedAt && this.seededAt);
}
/**
* Query modifiers.
*/

6
server/src/system/repositories/TenantRepository.ts
View File

@@ -77,9 +77,7 @@ export default class TenantRepository extends SystemRepository {
* @param {number} tenantId - Tenant id.
*/
getByIdWithSubscriptions(tenantId: number) {
return this.cache.get(`tenant.id.${tenantId}.subscriptions`, () => {
return Tenant.query().findById(tenantId)
.withGraphFetched('subscriptions.plan');
});
return Tenant.query().findById(tenantId)
.withGraphFetched('subscriptions.plan');
}
}