Skip to content

fix helpful article #1440

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 24, 2025
Merged

fix helpful article #1440

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
357 changes: 191 additions & 166 deletions src/component/HelpFulArticle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,197 +1,222 @@
import React from 'react';
import { useEffect, useRef, useState } from "react";
import useBaseUrl from '@docusaurus/useBaseUrl';
import ThemedImage from '@theme/ThemedImage'

import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ThemedImage from "@theme/ThemedImage";
export default function HelpFulArticle() {
const [feedback, SetFeedback] = useState();
const [feedbackSubmitted, SetFeedbackSubmitted] = useState(false);
const [isContactFormSubmitted, setIsContactFormSubmitted] = useState(false);

const feedbackSubmit = () => {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
"url": window.location.href,
});

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
const thumbsUpLight = useBaseUrl("/img/thumbsUp_light.svg");
const thumbsUpDark = useBaseUrl("/img/thumbsUp_dark.svg");
const thumbsDownLight = useBaseUrl("/img/thumbsDown_light.svg");
const thumbsDownDark = useBaseUrl("/img/thumbsDown_dark.svg");
return (
<HelpFulArticleClass
thumbsUpLight={thumbsUpLight}
thumbsUpDark={thumbsUpDark}
thumbsDownLight={thumbsDownLight}
thumbsDownDark={thumbsDownDark}
/>
);
}
class HelpFulArticleClass extends React.Component {
constructor(props) {
super(props);
this.state = {
feedback: null,
feedbackSubmitted: false,
isContactFormSubmitted: false,
selectedOption: "",
message: "",
formMsgError: false,
feedbackOptionErr: false
};

fetch(`https://test-backend.lambdatest.com/api/website_feed/thumbs_up`, requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
SetFeedback("")
SetFeedbackSubmitted(true)
this.handleThumbsUp = this.handleThumbsUp.bind(this);
this.handleThumbsDown = this.handleThumbsDown.bind(this);
this.handleOptionChange = this.handleOptionChange.bind(this);
this.handleMessageChange = this.handleMessageChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.getCookie = this.getCookie.bind(this);
}


const handleOptionChange = (e) => {
if(e.target.value) {
setFeedbackOptionErr(false);
}
if(e.target.value === 'other') {
setOtherSelected(true);
} else {
setOtherSelected(false);
setFormMsgError(false);
}

getCookie(name) {
const cookies = document.cookie.split("; ");
const cookie = cookies.find((c) => c.startsWith(name + "="));
return cookie ? decodeURIComponent(cookie.split("=")[1]) : null;
}

let form = useRef();
const [formMsgError, setFormMsgError] = useState(false);
const [feedbackOptionErr, setFeedbackOptionErr] = useState(false);
const [otherSelected, setOtherSelected] = useState(false);
const getContactFormResponse = (res) => {
setIsContactFormSubmitted(res);

handleThumbsUp() {

fetch("https://test-backend.lambdatest.com/api/website_feed/thumbs_up", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ url: window.location.href }),
})
.then(() => this.setState({ feedbackSubmitted: true }))
.catch((error) => console.error("Error:", error));
}

handleThumbsDown() {
this.setState({ feedback: "Negative" });
}

handleOptionChange(e) {
this.setState({
selectedOption: e.target.value,
feedbackOptionErr: false,
formMsgError: e.target.value !== "other" ? false : this.state.formMsgError
});
}

handleMessageChange(e) {
this.setState({
message: e.target.value,
formMsgError: e.target.value.trim() ? false : this.state.formMsgError
});
}
const handleSubmit = (e) => {

handleSubmit(e) {
e.preventDefault();
let utmJsonTemp = getCookie("utm")
const { message, feedback_option } = form.current;
console.log("feedback_option.value", feedback_option.value)
let feedBackString = "";
if(feedback_option.value == '' || feedback_option.value == null) {
setFeedbackOptionErr(true);
return

if (!this.state.selectedOption) {
this.setState({ feedbackOptionErr: true });
return;
}
feedBackString = feedback_option.value;
if(feedback_option.value === 'other') {
setOtherSelected(true);
if(message.value == '' || message.value == null) {
setFormMsgError(true);
return
} else {
setFormMsgError(false);
feedBackString = message.value;
}

if (this.state.selectedOption === "other" && !this.state.message.trim()) {
this.setState({ formMsgError: true });
return;
}



var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
feedback: feedBackString,
url: window.location.href,
utm: utmJsonTemp
});

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};

fetch(`https://test-backend.lambdatest.com/api/website_feed/thumbs_down`, requestOptions)
.then(response => response.text())
.then(result => {
getContactFormResponse(true);
})
.catch(error => console.log('error', error));

};
useEffect(() => {
// console.log('isContactFormSubmitted', isContactFormSubmitted)
}, [isContactFormSubmitted])

return (
fetch("https://test-backend.lambdatest.com/api/website_feed/thumbs_down", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
feedback: this.state.selectedOption === "other" ? this.state.message : this.state.selectedOption,
url: window.location.href,
utm: this.getCookie("utm"),
}),
})
.then(() => this.setState({ isContactFormSubmitted: true }))
.catch((error) => console.error("Error:", error));
}

render() {
const {
feedback,
feedbackSubmitted,
isContactFormSubmitted,
selectedOption,
message,
formMsgError,
feedbackOptionErr
} = this.state;

const {
thumbsUpLight,
thumbsUpDark,
thumbsDownLight,
thumbsDownDark
} = this.props;

const otherSelected = selectedOption === "other";

return (
<div className="feedback__box">

<div className='support_container'>

<div className="support_container">
<div>
<h3 className='feedback__box__title feedback__box__title_helpful'>Do you find this helpful?</h3>
{!feedbackSubmitted && !isContactFormSubmitted &&
<div className='feedback__box__icons'>
<button role="button" tabIndex="0" type="button" onClick={() => { feedbackSubmit() }} title='Document Feedback' aria-label="Document Feedback" >


<h3 className="feedback__box__title feedback__box__title_helpful">
Do you find this helpful?
</h3>
{!feedbackSubmitted && !isContactFormSubmitted ? (
<div className="feedback__box__icons">
<button onClick={this.handleThumbsUp} title="Thumbs Up" type="button">
<ThemedImage
className="no-zoom"
alt="Docusaurus themed image"
alt="Thumbs Up"
sources={{
light: useBaseUrl('/img/thumbsUp_light.svg'),
dark: useBaseUrl('/img/thumbsUp_dark.svg'),
light: thumbsUpLight,
dark: thumbsUpDark,
}}
/>



</button>
<button role="button" tabIndex="0" type="button" onClick={() => { SetFeedback("Negative") }} title='Document Feedback' aria-label="Document Feedback">
<button onClick={this.handleThumbsDown} title="Thumbs Down" type="button">
<ThemedImage
className="no-zoom"
alt="Docusaurus themed image"
alt="Thumbs Down"
sources={{
light: useBaseUrl('/img/thumbsDown_light.svg'),
dark: useBaseUrl('/img/thumbsDown_dark.svg'),
light: thumbsDownLight,
dark: thumbsDownDark,
}}
/>
</button>
</div>
}
{feedbackSubmitted && <div className='feedback__box__thanks-title'>
<h3>Thanks for your feedback!</h3>
</div>}
{isContactFormSubmitted && <div className='feedback__box__thanks-title'>
<h3>Thanks for your feedback!</h3>
</div>}
</div>

<div className="social_button">
) : (
<div className="feedback__box__thanks-title">
<h3>Thanks for your feedback!</h3>
</div>
)}
</div>
<div className="social_button">
<h3 className='feedback__box__title feedback__box__title_helpful'>Still need help?</h3>
<span onClick={() => window.openLTChatWidget()} className="chat_btn"><img loading="lazy" src="/support/img/Chat.svg" alt=" " role="presentation" title='Chat with Us' className='' width="16" height="16" />Chat with Us</span>
<a role="button" tabIndex="0" href="https://community.lambdatest.com/" target="_blank" className="chat_btn"><img loading="lazy" src="/support/img/community.svg" alt=" " role="presentation" title='Chat with Us' className='' width="16" height="16" />Ask the Community</a>
{/* <a href="https://accounts.lambdatest.com/register" target="_blank" className="btnlink">Start Free Testing</a> */}
</div>
</div>

{feedback == "Negative" && !isContactFormSubmitted &&
<form ref={form} onSubmit={handleSubmit} className="feedback__box__form">
<p className='feedback__box__form__title'>We're sorry to hear that. Please share your feedback with us.</p>
<ol className="feedback__box__form__radios">
<li className='feedback__box__form__radio_div'>
<input type="radio" name="feedback_option" value={"The information that I need is partially explained"} onChange={handleOptionChange} />
<span>The information that I need is partially explained</span>
</li>
<li className='feedback__box__form__radio_div'>
<input type="radio" name="feedback_option" value={"This page does not contain what I am looking for."} onChange={handleOptionChange} />
<span>This page does not contain what I am looking for.</span>
</li>
<li className='feedback__box__form__radio_div'>
<input type="radio" name="feedback_option" value={"This content & code samples are not accurate and outdated"} onChange={handleOptionChange} />
<span>This content & code samples are not accurate and outdated</span>
</div>

{feedback === "Negative" && !isContactFormSubmitted && (
<form onSubmit={this.handleSubmit} className="feedback__box__form">
<p className="feedback__box__form__title">
We're sorry to hear that. Please share your feedback with us.
</p>
<ol className="feedback__box__form__radios">
{[
"The information that I need is partially explained",
"This page does not contain what I am looking for.",
"This content & code samples are not accurate and outdated",
"The information that I need is not easy to understand",
].map((option, index) => (
<li key={index} className="feedback__box__form__radio_div">
<input
type="radio"
name="feedback_option"
id={`option_${index}`}
value={option}
checked={selectedOption === option}
onChange={this.handleOptionChange}
/>
<span>{option}</span>
</li>
<li className='feedback__box__form__radio_div'>
<input type="radio" name="feedback_option" value={"The information that I need is not easy to understand"} onChange={handleOptionChange} />
<span>The information that I need is not easy to understand</span>
</li>
<li className='feedback__box__form__radio_div'>
<input type="radio" name="feedback_option" value={"other"} onChange={handleOptionChange} />
<span>Other (please tell us more below)</span>
</li>
</ol>
{feedbackOptionErr && <p className='feedback__box__form__red_alert'>Please select an option.</p>}
<div>
{otherSelected && <textarea id="messageid" name="message" placeholder="What were you looking" className='feedback__form__control'></textarea>}
{otherSelected && formMsgError && <p className='feedback__box__form__red_alert'>Please write your feedback</p>}
<button type="submit" className='feedback__form__submit__btn'>
Submit
</button>
</div>
</form>
}


))}
<li className="feedback__box__form__radio_div">
<input
type="radio"
name="feedback_option"
id="option_other"
value="other"
checked={selectedOption === "other"}
onChange={this.handleOptionChange}
/>
<span>Other (please tell us more below)</span>
</li>
</ol>
{feedbackOptionErr && <p className="feedback__box__form__red_alert">Please select an option.</p>}
{otherSelected && (
<>
<textarea
name="message"
value={message}
onChange={this.handleMessageChange}
placeholder="What were you looking for?"
className="feedback__form__control"
></textarea>
{formMsgError && <p className="feedback__box__form__red_alert">Please write your feedback</p>}
</>
)}
<button type="submit" className="feedback__form__submit__btn">
Submit
</button>
</form>
)}
</div>
);
}
);
}
}
Loading