98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import { ArrowRightOutlined } from '@ant-design/icons';
|
|
import { Button, Card, Radio } from 'antd';
|
|
import React from 'react';
|
|
import { useNavigate } from 'react-router';
|
|
import * as routes from 'App/routes'
|
|
import { SPOT_ONBOARDING } from "App/constants/storageKeys";
|
|
import { useStore } from 'App/mstore';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
const Scope = {
|
|
FULL: 'full',
|
|
SPOT: 'spot',
|
|
};
|
|
|
|
function getDefaultSetup() {
|
|
const isSpotSetup = localStorage.getItem(SPOT_ONBOARDING)
|
|
if (isSpotSetup) {
|
|
localStorage.removeItem(SPOT_ONBOARDING)
|
|
return Scope.SPOT
|
|
}
|
|
return Scope.FULL
|
|
}
|
|
|
|
function ScopeForm() {
|
|
const { userStore } = useStore();
|
|
const upgradeScope = userStore.upgradeScope
|
|
const downgradeScope = userStore.downgradeScope
|
|
const scopeState = userStore.scopeState
|
|
const [scope, setScope] = React.useState(getDefaultSetup);
|
|
const navigate = useNavigate()
|
|
React.useEffect(() => {
|
|
if (scopeState !== 0) {
|
|
if (scopeState === 2) {
|
|
navigate(routes.onboarding(), { replace: true })
|
|
} else {
|
|
navigate(routes.spotsList(), { replace: true })
|
|
}
|
|
}
|
|
}, [scopeState])
|
|
|
|
const onContinue = () => {
|
|
if (scope === Scope.FULL) {
|
|
void upgradeScope();
|
|
navigate(routes.onboarding(), { replace: true })
|
|
} else {
|
|
void downgradeScope();
|
|
navigate(routes.spotsList(), { replace: true })
|
|
}
|
|
};
|
|
return (
|
|
<div className={'flex items-center justify-center w-screen h-screen'}>
|
|
<Card
|
|
style={{ width: 540 }}
|
|
title={'👋 Welcome to OpenReplay'}
|
|
classNames={{
|
|
header: 'text-2xl font-semibold text-center',
|
|
body: 'flex flex-col gap-2',
|
|
}}
|
|
>
|
|
<div className={'font-semibold'}>
|
|
How will you primarily use OpenReplay?{' '}
|
|
</div>
|
|
<div className={'text-disabled-text'}>
|
|
<div>
|
|
You will have access to all OpenReplay features regardless of your
|
|
choice.
|
|
</div>
|
|
<div>
|
|
Your preference will simply help us tailor your onboarding experience.
|
|
</div>
|
|
</div>
|
|
<Radio.Group
|
|
value={scope}
|
|
onChange={(e) => setScope(e.target.value)}
|
|
className={'flex flex-col gap-2 mt-4 '}
|
|
>
|
|
<Radio value={'full'}>
|
|
Session Replay with DevTools, Co-browsing and Product Analytics
|
|
</Radio>
|
|
<Radio value={'spot'}>Bug reporting via Spot</Radio>
|
|
</Radio.Group>
|
|
|
|
<div className={'self-end'}>
|
|
<Button
|
|
type={'primary'}
|
|
onClick={() => onContinue()}
|
|
icon={<ArrowRightOutlined />}
|
|
iconPosition={'end'}
|
|
>
|
|
Continue
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(ScopeForm);
|