test.js

test.js

import * as React from 'react';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import MoodBadIcon from '@mui/icons-material/MoodBad';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import useDataMediator from 'src/hooks/useDataMediator';
import useGetAssetDetails from 'src/hooks/api/useGetAssetDetails';
import useTrack from 'src/hooks/api/useTrack';
import { CheckAssetDetailsLoadingView, CheckAssetDetailsView } from '@/components/AssessmentView/CheckAssetDetailsView';
import { GetUnderConstructionDialog } from '@/components/dialog/WorkspaceDialogs';
import { LoadingButton } from '@mui/lab';
import { PATH_WORKSPACE2 } from '@/utils/paths';
import { SCOPE_NAMES } from '@/utils/constants';
import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';

export default function CheckAnAssetResult() {
  // TODO merge structure with WhatToBuyResult. there is a lot of copypaste from there
  const t = useTranslations('assetDetailsDialog');
  const track = useTrack();
  const router = useRouter();
  const { query } = useRouter();
  const { result_id: resultRecordId } = query;
  const { getCurrentRecord, updateCurrentRecord, finalizeCurrentRecord, getRecordById, addHistoryItem } = useDataMediator();
  const { UnderConstructionDialog, handleUnderConstructionDialogOpen } = GetUnderConstructionDialog();

  let record = getCurrentRecord(SCOPE_NAMES.checkAnAsset);
  let wizardData = record?.data;
  const showCompletedScenario = resultRecordId != undefined && (record === undefined || record.id != resultRecordId);

  let { data, isLoading, isSuccess, isError, isRefetching, refetch } = useGetAssetDetails(wizardData?.tickerId, !showCompletedScenario && Boolean(wizardData));
  let asset = data?.assets?.[0];
  const filteredReason = data?.filtered_reason;

  const handleBack = () => {
    track('site:check_asset_result:back:click');
    router.back();
  };

  const updateCurrentRecordResults = (ticker, asset) => {
    updateCurrentRecord(SCOPE_NAMES.checkAnAsset,
      {tickerId: ticker, results: asset});
  }

  if (!showCompletedScenario) {
    // try to retrieve current running scenario results
    if (record === undefined) {
      return(<div>Scenario is not started</div>);
    }
  } else {
    record = getRecordById(SCOPE_NAMES.checkAnAsset, resultRecordId);
    if (record === undefined) {
      return(<div>No result with id {resultRecordId}</div>);
    }
    wizardData = record.data;
    asset = record.data.results;
  }

  if (wizardData === undefined) {
    return(<div>Scenario {resultRecordId} is not completed</div>);
  }
  if (wizardData.tickerId === undefined) {
    return(<div>Scenario {resultRecordId} params not filled completely</div>);
  }

  if (filteredReason) {
    return (<div>{filteredReason}</div>)
  }

  if (asset === undefined) {
    return (<div>Loading...</div>)
  } else {
    isLoading = false;
    isSuccess = true;
    isError = false;
    isRefetching = false;
  }

  if (!isSuccess && !record) {
    return <div>Scenario isn&apos;t started</div>;
  }
  if (!showCompletedScenario && isSuccess && record && wizardData?.results === undefined) {
    updateCurrentRecordResults(wizardData.tickerId, asset);
  }

  return (
    <Stack sx={{ maxWidth: 345 }} spacing={1}>
      <Grid container spacing={1}>
        <Grid item xs={2}>
          <Button onClick={handleBack} visible={true}>
            <ArrowBackIosIcon size={'small'}/>
          </Button>
        </Grid>
        <Grid item xs={8}>
          <Typography color="text.primary" variant="h4" sx={{textAlign: 'center'}}>
            <b>Asset&apos;s forecast</b>
          </Typography>
        </Grid>
        <Grid item xs={2}>
        </Grid>
      </Grid>

      {isLoading && <CheckAssetDetailsLoadingView />}
      {isError && (
        <Stack spacing={1} sx={{ p: 4 }} alignItems="center">
          <MoodBadIcon color="action" sx={{ width: 70, height: 70 }} />
          <Typography color="inherit">{t('fetchDataError')}</Typography>
          <LoadingButton variant="contained" size="small" loading={isRefetching} onClick={refetch}>
            {t('refetchButton')}
          </LoadingButton>
        </Stack>
      )}

      {isSuccess && (
      <>
      <Box className="min-h-screen">
        <CheckAssetDetailsView
          asset={asset}
        />

      <Box height={48}/>
      <Button variant="contained" size="medium" fullWidth
        onClick = {() => {
          track('site:check_asset_result:add_to_compare:click');
          handleUnderConstructionDialogOpen();
        }}
      >
        ⚖️  Add to compare
      </Button>

      <Box height={12}/>
      <Button variant="contained" size="medium" fullWidth
        onClick = {() => {
          track('site:check_asset_result:get_recommend_button:click');
          addHistoryItem({scope_name: SCOPE_NAMES.getRecommend, data: {baseTicker: wizardData.tickerId}});
          router.push({
            pathname: PATH_WORKSPACE2.general.recommendDetails,
            query: {from_ca: 1}
          });
        }}
      >
        💼  Get recommendation
      </Button>

      <Box height={12}/>
      <Button variant="contained" size="medium" fullWidth
        onClick = {() => {
          track('site:check_asset_result:add_to_blacklist:click');
          handleUnderConstructionDialogOpen();
        }}
      >
        🚫  Add to blacklist
      </Button>

      </Box>
      <Box height={130}/>
      <Box sx={{width: {md: '345px'}, left: {md: 'auto', xs: '16px'}, right: {md: 'auto', xs: '16px'},
          position: 'fixed', top: 'max(500px, calc(100% - 90px))'}}>
      <LoadingButton
        variant="contained"
        loading={false}
        size='large'
        fullWidth
    onClick = {() => {
      track('site:check_asset_result:home_btn:click');
      if (!showCompletedScenario) {
        track('site:check_asset_result:home_btn:finalize', {isManual: false});
        updateCurrentRecordResults(wizardData.tickerId, asset);
        finalizeCurrentRecord(SCOPE_NAMES.checkAnAsset);
      }
      router.push(PATH_WORKSPACE2.general.home);
    }}
      >
        GO HOME
      </LoadingButton>
      </Box>
      </>

      )}
      <UnderConstructionDialog />
    </Stack>
  );
}