openreplay/frontend/app/components/ScopeForm/ScopeForm.tsx

import { ArrowRightOutlined } from '@ant-design/icons';
import { Button, Card, Radio } from 'antd';
import React from 'react';
import { connect } from 'react-redux';
import { upgradeScope, downgradeScope, getScope } from 'App/duck/user';
import { useHistory } from 'react-router-dom';
import * as routes from 'App/routes'
import { SPOT_ONBOARDING } from "../../constants/storageKeys";

const Scope = {
  FULL: 'full',
  SPOT: 'spot',
};

function ScopeForm({
  upgradeScope,
  downgradeScope,
  scopeState,
}: any) {
  const [scope, setScope] = React.useState(Scope.FULL);
  React.useEffect(() => {
    if (scopeState !== 0) {
      if (scopeState === 2) {
        history.replace(routes.onboarding())
      } else {
        history.replace(routes.spotsList())
      }
    }
  }, [scopeState])
  React.useEffect(() => {
    const isSpotSetup = localStorage.getItem(SPOT_ONBOARDING)
    if (isSpotSetup) {
      setScope(Scope.SPOT)
      localStorage.removeItem(SPOT_ONBOARDING)
    }
  }, [])
  const history = useHistory();
  const onContinue = () => {
    if (scope === Scope.FULL) {
      upgradeScope();
      history.replace(routes.onboarding())
    } else {
      downgradeScope();
      history.replace(routes.spotsList())
    }
  };
  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 & Debugging, Customer Support and more
          </Radio>
          <Radio value={'spot'}>Report bugs 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 connect((state) => ({
  scopeState: getScope(state),
}), { upgradeScope, downgradeScope })(ScopeForm);