ss

gistfile1.txt

import React, { useState,useEffect, Fragment, useContext } from 'react';
import '../css/app/App.css';
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';
import { AiContent } from '../contexts/ai_content.js';
import Topbar from '../../../Shared/Topbar';
import TopNav from '../../../Shared/Topnav';
import InnerNav from '../../../Shared/InnerNav';
import Slider from '@material-ui/core/Slider';
import Cards from '../../../Shared/Cards/ContentAutomationCart';
import ClipLoader from 'react-spinners/BeatLoader';
import { css } from '@emotion/core';
import Modal from 'react-modal';
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';
import { Editor } from '@tinymce/tinymce-react';
import Axios from 'axios';
import { salesCopywritingWizard, loadScriptTemplate, autoSuggestioin, EmailExport } from '../../../../Config/Api';


const override = css`
	position: absolute;
	top: 70%;
	left: 50%;
	border-color: #f5b848;
`;

const customStyles = {
	content: {
		width: '800px',
		top: '50%',
		left: '50%',
		right: 'auto',
		bottom: 'auto',
		marginRight: '-50%',
		transform: 'translate(-50%, -50%)',
	},
};
export function AppHome(props) {
	const [query, setQuery] = useState();
	const [loading, setloading] = useState(false);
	const [ismodal, setIsmodal] = useState(false);
	const [response, setResponse] = useState();
	const [scripts , setScripts] = useState();
	const [AllScript, setAllScript] = useState();

	const options = ['Select Script',
  'Authority Headlines'];

	const [stage, setStage] = useState(false);
const defaultOption = options[0];

	function changeQuery(event) {
		setQuery(event.target.value);
	}

	function HandleSubmit() {
		console.log('asdfasf');
		Router.push('/app');
	}

	const goToStep2 = async () =>{

		await Axios.get("https://api.crawlq.ai/Sales-Copywriting-Wizard/select?user_id=410&project_id=null")
		.then((res) => {
			console.log(res.data.data['Authority Power Headlines'])
			setResponse(res.data.data['Authority Power Headlines'])

		})
		if (stage === true) {
			setStage(false)
			
		}
		else{
			setStage(true)
		}
		
	}
// useEffect(() => {
// 		handleGetAllData();
// 	}, []);

	const onSelectDropDown = (e) => {

		console.log(e.value)
		const selectedScript = e.value;
	


	}

	// const handleGetAllData = () => {
	// 	setloading(true);
	// 	Axios.get(
	// 		salesCopywritingWizard +
	// 			'?user_id=' +
	// 			localStorage.getItem('user_id') +
	// 			'&project_id=' +
	// 			localStorage.getItem('project_id')
	// 	)
	// 		.then((res) => {
	// 			setloading(false);

	// 			const result = Object.values(res.data.data).map(Object.values);

	// 			let AllScript = [];
	// 			Object.keys(res.data.data).map(function(key, index) {
	// 				for (var i = 0; i < res.data.data[key].length; i++) {
	// 					AllScript.push(res.data.data[key][i]);
	// 				}
	// 			});
	// 			// console.log(res.data.data);
	// 			// console.log(AllScript);

	// 			setresponse(res.data.data);
	// 			console.log("response"+response)
	// 			setAllScript(AllScript)
	// 			// setScripts(AllScript);
	// 		})
	// 		.catch((err) => {
	// 			setloading(false);
	// 			console.log(err);
	// 		});
	// };

//Sub scripts 
	// const handlegettabs = (e) => {
	// 	console.log(response);
		
	// 	// setSuccess(false);
	// 	// setismodalscript(false);

	// 	// setSelectedtabs(e.toLowerCase());
	// 	// setshowtemplate(false);
	// 	const SingleScripts = Object.keys(response).reduce((object, key) => {
	// 		console.log(key.toLowerCase());
	// 		console.log(e.toLowerCase());
	// 		if (key.toLowerCase() === e.toLowerCase()) {
	// 			object[key] = response[key];
	// 		}
	// 		return object;
	// 	}, {});

		
	// 	// console.log(SingleScripts);
	
	// 	let script = Object.values(SingleScripts);
	// 	console.log(script);
	// 	setScripts(script[0]);
	// };



	const step1 = () => {
        return (
			<div className="col-sm-6 brder-left text-center">
							
							<div className="card no-margin card-new2">

							<h6> Search For Topic</h6>

							<input
									id="seatch_topic"
									class="form-control"
									placeholder="Enter Your Topic"
								></input>

							<p>Select a script to generate text</p>
							<Dropdown options={options} value={defaultOption} onChange={onSelectDropDown} placeholder="Select an option" />

							<button style={{textAlign:'center'}}onClick={goToStep2} className="btn-create">Next <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
							
						
							</div>
						</div>
          
        );
    };

	const step2 = () => {
        return (
			<div className="col-sm-6 brder-left text-center">
								
				<div className="card no-margin card-new">
										
					{response.map((element) => (
					
						<p id={element.script_id}>{element.script_name}</p>
					))}
					
				<button style={{textAlign:'center'}}onClick={goToStep2} className="btn-create">Next <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
		
		</div>
		</div>
          
        );
    };

	const VieStepsModal = () => {
		//function for displaying the Steps  modal
	
		return (
		  <Modal
			isOpen={ismodal}
			onRequestClose={handleModal}
			style={customStyles}
			ariaHideApp={false}
		  >
			<div>
			  <div className="right-head">
				<h5>Steps</h5>
			  </div>
			  <div className="modal-content-wrap">
				<p>
				  <span className="stepper"> Step 1</span>: Enter the main Heading (H1) related to your article (e.g., 7 Brutal economic consequences of the outbreak of the second wave of Covid-19 in 2020).
				</p>
				<p>
				  <span className="stepper"> Step 2</span>: Provide a short introductory text that more closely matches the main title (H1) of your article.
				</p>
				<p>
				  <span className="stepper"> Step 3</span>: You can add subtitles and subsections by clicking on + button.
				</p>
				<p>
				  <span className="stepper"> Step 4</span>: At the end of each sub-heading (H2), you can choose the content length to generate the content according to the specified content length.
				</p>
				<p>
				  <span className="stepper"> Step 5</span>: You can also enter domain-specific keywords, separated by spaces or commas, to target your content more specifically.
				</p>
				<p>
				  <span className="stepper"> Step 6</span>: You can repeat steps 3, 4, and 5 to create a template for your content.
				</p>
				<p>
				  <span className="stepper"> Step 7</span>: Click on the Build button and you will see the desired content generated with CrawlQ AI Content Writer (Beta).
				</p>
				<div className="modal-buttons">
				  <button onClick={handleModal} className="btn btn-secondary">
					Close
				  </button>
				</div>
			  </div>
			</div>
		  </Modal>
		);
	  };
	  const handleModal = () => {
		//function for opening and closing the modal
		setIsmodal(!ismodal);
	  };
	return (
		<Fragment>
			 {VieStepsModal()}
			<TopNav />
			<div className="main-content" id="panel">
				<Topbar />
				<div className="mt--12">
					<InnerNav />
				</div>
				<div className="mt--12 modify-mt--12">
					<Cards />
				</div>
				<div className="mt--6">
				<h6 className="subhead">
				AI-powered Content Writer that automatically generates unique, comprehensive, high-quality articles for sales and SEO in under 60 seconds.
						<button onClick={handleModal}>View Steps</button>
					</h6>
					<br />
					<div className="sweet-loading">
						<ClipLoader css={override} size={20} color={'#123abc'} loading={loading} />
					</div>
					<div className="row wrap modify-rewrite v-middle">
						
						{stage ? step2():step1()}

						<div className="col-sm-6 text-center">
						<Editor
						apiKey="tryts89jkngepe1w4pwbaix6adi2fdttpdueuhgh9p6p5yym"
									/>
								
						</div>
						<div className="col-sm-7">
							<div className="row">
								<div className="app_body custom-background">
									<div class="container content">
										<div class="row">
											<div class="col-md-6 col-md-offset-3 align-middle">
												<div class="panel panel-default">
													<div class="panel-heading panel-heading-color">

													</div>
													<div class="panel-body">

														<form class="form-content">


														</form>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Fragment>
	);
}
export default AppHome;