Untitled

// ** React Imports
import React, { forwardRef, useState, useEffect } from 'react'
import LinearProgress from '@mui/material/LinearProgress'

// ** MUI Imports
import Card from '@mui/material/Card'
import Grid from '@mui/material/Grid'
import Button from '@mui/material/Button'
import Checkbox from '@mui/material/Checkbox'
import MenuItem from '@mui/material/MenuItem'
import CardHeader from '@mui/material/CardHeader'
import IconButton from '@mui/material/IconButton'
import FormControl from '@mui/material/FormControl'
import CardContent from '@mui/material/CardContent'
import FormHelperText from '@mui/material/FormHelperText'
import InputAdornment from '@mui/material/InputAdornment'
import FormControlLabel from '@mui/material/FormControlLabel'
import axios from 'axios'
import Dialog from '@mui/material/Dialog'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'

// ** Custom Component Import

import CustomTextField from 'src/@core/components/mui/text-field'

// ** Third Party Imports
import toast from 'react-hot-toast'
import { useForm, Controller } from 'react-hook-form'

// ** Icon Imports
import Icon from 'src/@core/components/icon'
import { useRouter } from 'next/router'
import NoSubscription from 'src/views/apps/user/view/NoSubscriptionComponent'
import LoadingScreen from 'src/views/apps/user/view/LoadingScreenComponent'

const defaultValues = {
  email: '',
  select: '',
  password: '',
  checkbox: false
}

const CustomInput = forwardRef(({ ...props }, ref) => {
  return <CustomTextField fullWidth inputRef={ref} {...props} sx={{ width: '100%' }} />
})

const AddLinkedinAccount = () => {
  // ** States
  const [state, setState] = useState({
    password: '',
    showPassword: false
  })
  const [isConnecting, setIsConnecting] = useState(false)
  const router = useRouter()
  const host = process.env.NEXT_PUBLIC_HOST_API_LINK

  const userData = localStorage.getItem('userData')
  const userId = JSON.parse(userData)._id

  const [isPaidUser, setIsPaidUser] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // Check if the user is a paid subscriber
    const checkUserSubscription = async () => {
      const response = await fetch('/api/paid-check', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ userId: userId }) // Replace 'userId' with the actual userId
      })
      const data = await response.json()
      setIsLoading(false)
      setIsPaidUser(data.paidUser)
    }

    checkUserSubscription()
  }, [])

  // ** Hooks
  const {
    control,
    handleSubmit,
    reset,
    formState: { errors }
  } = useForm({ defaultValues })

  const handleClickShowPassword = () => {
    setState({ ...state, showPassword: !state.showPassword })
  }

  const onSubmit = async values => {
    const response = await fetch('/api/account/save', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'user-data': localStorage.getItem('userData')
      },
      body: JSON.stringify({
        email: values.email,
        password: values.password
      })
    })
    const json = await response.json()

    if (json.message === 'Account already exists') {
      toast.error('This Linkedin account already associated with another gigaboost account')
    } else {
      setIsConnecting(true)

      const userData = localStorage.getItem('userData')
      const userId = JSON.parse(userData)._id

      setTimeout(async () => {
        const shit = await fetchData(userId)
        const shit2 = await shit.json()

        if (json.message === 'Account Data Saved successfully' && shit2.users === 'correct') {
          toast.success('Correct Credentials')
          setIsConnecting(false)
          router.push('/apps/user/add/cred/options')
        } else {
          // toast.error('Wrong Credentials. Try Again')
          setIsConnecting(false)
          reset()
          router.push('/apps/user/add/cred/wrong')
        }
      }, 25000)
    }
  }

  const fetchData = async userId => {
    return fetch('/api/account/fetch', {
      method: 'GET',
      headers: {
        'user-id': userId
      }
    })
  }

  const [progress, setProgress] = useState(0)

  useEffect(() => {
    let timer
    if (isConnecting) {
      timer = setInterval(() => {
        setProgress(prevProgress => {
          if (prevProgress >= 100) {
            clearInterval(timer)
            setIsConnecting(false)
            return 100
          }
          return prevProgress + 1
        })
      }, 250) // Increment every 250 milliseconds
    }

    return () => {
      clearInterval(timer)
    }
  }, [isConnecting])

  useEffect(() => {
    if (!isConnecting) {
      setProgress(0)
    }
  }, [isConnecting])

  // useEffect(() => {
  //   if (isConnecting) {
  //     const timeout = setTimeout(() => {
  //       setIsConnecting(false);
  //     }, 25000); // 25 seconds in milliseconds

  //     return () => clearTimeout(timeout);
  //   }
  // }, [isConnecting]);

  return isLoading ? (
    <LoadingScreen />
  ) : isPaidUser ? (
    <Card>
      <CardHeader title='Please add your LinkedIn account' />
      <CardContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          <Grid container spacing={5}>
            <Grid item xs={12}>
              <Controller
                name='email'
                control={control}
                rules={{ required: true }}
                render={({ field: { value, onChange } }) => (
                  <CustomTextField
                    fullWidth
                    style={{ width: '500px' }}
                    type='email'
                    value={value}
                    label='Your LinkedIn Email'
                    onChange={onChange}
                    error={Boolean(errors.email)}
                    placeholder='carterleonard@gmail.com'
                    aria-describedby='validation-basic-email'
                    {...(errors.email && { helperText: 'This field is required' })}
                  />
                )}
              />
            </Grid>

            <Grid item xs={12}>
              <Controller
                name='password'
                control={control}
                rules={{ required: true }}
                render={({ field: { value, onChange } }) => (
                  <CustomTextField
                    fullWidth
                    style={{ width: '500px' }}
                    value={value}
                    label='Your LinkedIn Password'
                    onChange={onChange}
                    id='validation-basic-password'
                    error={Boolean(errors.password)}
                    type={state.showPassword ? 'text' : 'password'}
                    {...(errors.password && { helperText: 'This field is required' })}
                    InputProps={{
                      endAdornment: (
                        <InputAdornment position='end'>
                          <IconButton
                            edge='end'
                            onClick={handleClickShowPassword}
                            onMouseDown={e => e.preventDefault()}
                            aria-label='toggle password visibility'
                          >
                            <Icon fontSize='1.25rem' icon={state.showPassword ? 'tabler:eye' : 'tabler:eye-off'} />
                          </IconButton>
                        </InputAdornment>
                      )
                    }}
                  />
                )}
              />
            </Grid>

            <Grid item xs={12} sx={{ pt: theme => `${theme.spacing(2)} !important` }}>
              <FormControl>
                <Controller
                  name='checkbox'
                  control={control}
                  rules={{ required: true }}
                  render={({ field }) => (
                    <FormControlLabel
                      label='Bill Existing Subscription'
                      sx={errors.checkbox ? { color: 'error.main' } : null}
                      control={
                        <Checkbox
                          {...field}
                          name='validation-basic-checkbox'
                          sx={errors.checkbox ? { color: 'error.main' } : null}
                        />
                      }
                    />
                  )}
                />
                {errors.checkbox && (
                  <FormHelperText
                    id='validation-basic-checkbox'
                    sx={{ mx: 0, color: 'error.main', fontSize: theme => theme.typography.body2.fontSize }}
                  >
                    This field is required
                  </FormHelperText>
                )}
              </FormControl>
            </Grid>

            <Grid item xs={12}>
              <Button type='submit' variant='contained'>
                Submit
              </Button>
            </Grid>
          </Grid>
        </form>
        {/* <Dialog open={isConnecting}>
          <DialogTitle>Connecting Your Linkedin Acount...</DialogTitle>
          <DialogContent>
            <DialogContentText>
              Please wait while we add your linkedin account. This may take up to 25 seconds.
            </DialogContentText>
          </DialogContent>
        </Dialog> */}
        <Dialog open={isConnecting}>
          <DialogContent>
            <DialogTitle>Connecting Your LinkedIn Account...</DialogTitle>
            <LinearProgress variant='determinate' value={progress} />

            <DialogContentText>
              Please wait while we add your LinkedIn account. This may take up to 25 seconds.
            </DialogContentText>
          </DialogContent>
        </Dialog>
      </CardContent>
    </Card>
  ) : (
    <NoSubscription />
  )
}

export default AddLinkedinAccount