Skip to content

Commit f67e85e

Browse files
surishubhamsurishubham
committed
fix helpful article
1 parent 3d5f9c3 commit f67e85e

File tree

1 file changed

+191
-166
lines changed

1 file changed

+191
-166
lines changed

‎src/component/HelpFulArticle.js‎

Lines changed: 191 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,197 +1,222 @@
1-
import React from 'react';
2-
import { useEffect, useRef, useState } from "react";
3-
import useBaseUrl from '@docusaurus/useBaseUrl';
4-
import ThemedImage from '@theme/ThemedImage'
5-
1+
import React from "react";
2+
import useBaseUrl from "@docusaurus/useBaseUrl";
3+
import ThemedImage from "@theme/ThemedImage";
64
export default function HelpFulArticle() {
7-
const [feedback, SetFeedback] = useState();
8-
const [feedbackSubmitted, SetFeedbackSubmitted] = useState(false);
9-
const [isContactFormSubmitted, setIsContactFormSubmitted] = useState(false);
10-
11-
const feedbackSubmit = () => {
12-
var myHeaders = new Headers();
13-
myHeaders.append("Content-Type", "application/json");
14-
15-
var raw = JSON.stringify({
16-
"url": window.location.href,
17-
});
18-
19-
var requestOptions = {
20-
method: 'POST',
21-
headers: myHeaders,
22-
body: raw,
23-
redirect: 'follow'
5+
const thumbsUpLight = useBaseUrl("/img/thumbsUp_light.svg");
6+
const thumbsUpDark = useBaseUrl("/img/thumbsUp_dark.svg");
7+
const thumbsDownLight = useBaseUrl("/img/thumbsDown_light.svg");
8+
const thumbsDownDark = useBaseUrl("/img/thumbsDown_dark.svg");
9+
return (
10+
<HelpFulArticleClass
11+
thumbsUpLight={thumbsUpLight}
12+
thumbsUpDark={thumbsUpDark}
13+
thumbsDownLight={thumbsDownLight}
14+
thumbsDownDark={thumbsDownDark}
15+
/>
16+
);
17+
}
18+
class HelpFulArticleClass extends React.Component {
19+
constructor(props) {
20+
super(props);
21+
this.state = {
22+
feedback: null,
23+
feedbackSubmitted: false,
24+
isContactFormSubmitted: false,
25+
selectedOption: "",
26+
message: "",
27+
formMsgError: false,
28+
feedbackOptionErr: false
2429
};
25-
26-
fetch(`https://test-backend.lambdatest.com/api/website_feed/thumbs_up`, requestOptions)
27-
.then(response => response.text())
28-
.then(result => console.log(result))
29-
.catch(error => console.log('error', error));
30-
SetFeedback("")
31-
SetFeedbackSubmitted(true)
30+
31+
this.handleThumbsUp = this.handleThumbsUp.bind(this);
32+
this.handleThumbsDown = this.handleThumbsDown.bind(this);
33+
this.handleOptionChange = this.handleOptionChange.bind(this);
34+
this.handleMessageChange = this.handleMessageChange.bind(this);
35+
this.handleSubmit = this.handleSubmit.bind(this);
36+
this.getCookie = this.getCookie.bind(this);
3237
}
33-
34-
35-
const handleOptionChange = (e) => {
36-
if(e.target.value) {
37-
setFeedbackOptionErr(false);
38-
}
39-
if(e.target.value === 'other') {
40-
setOtherSelected(true);
41-
} else {
42-
setOtherSelected(false);
43-
setFormMsgError(false);
44-
}
38+
39+
getCookie(name) {
40+
const cookies = document.cookie.split("; ");
41+
const cookie = cookies.find((c) => c.startsWith(name + "="));
42+
return cookie ? decodeURIComponent(cookie.split("=")[1]) : null;
4543
}
46-
47-
let form = useRef();
48-
const [formMsgError, setFormMsgError] = useState(false);
49-
const [feedbackOptionErr, setFeedbackOptionErr] = useState(false);
50-
const [otherSelected, setOtherSelected] = useState(false);
51-
const getContactFormResponse = (res) => {
52-
setIsContactFormSubmitted(res);
44+
45+
handleThumbsUp() {
46+
47+
fetch("https://test-backend.lambdatest.com/api/website_feed/thumbs_up", {
48+
method: "POST",
49+
headers: { "Content-Type": "application/json" },
50+
body: JSON.stringify({ url: window.location.href }),
51+
})
52+
.then(() => this.setState({ feedbackSubmitted: true }))
53+
.catch((error) => console.error("Error:", error));
54+
}
55+
56+
handleThumbsDown() {
57+
this.setState({ feedback: "Negative" });
58+
}
59+
60+
handleOptionChange(e) {
61+
this.setState({
62+
selectedOption: e.target.value,
63+
feedbackOptionErr: false,
64+
formMsgError: e.target.value !== "other" ? false : this.state.formMsgError
65+
});
66+
}
67+
68+
handleMessageChange(e) {
69+
this.setState({
70+
message: e.target.value,
71+
formMsgError: e.target.value.trim() ? false : this.state.formMsgError
72+
});
5373
}
54-
const handleSubmit = (e) => {
74+
75+
handleSubmit(e) {
5576
e.preventDefault();
56-
let utmJsonTemp = getCookie("utm")
57-
const { message, feedback_option } = form.current;
58-
console.log("feedback_option.value", feedback_option.value)
59-
let feedBackString = "";
60-
if(feedback_option.value == '' || feedback_option.value == null) {
61-
setFeedbackOptionErr(true);
62-
return
77+
78+
if (!this.state.selectedOption) {
79+
this.setState({ feedbackOptionErr: true });
80+
return;
6381
}
64-
feedBackString = feedback_option.value;
65-
if(feedback_option.value === 'other') {
66-
setOtherSelected(true);
67-
if(message.value == '' || message.value == null) {
68-
setFormMsgError(true);
69-
return
70-
} else {
71-
setFormMsgError(false);
72-
feedBackString = message.value;
73-
}
82+
83+
if (this.state.selectedOption === "other" && !this.state.message.trim()) {
84+
this.setState({ formMsgError: true });
85+
return;
7486
}
7587

76-
77-
78-
var myHeaders = new Headers();
79-
myHeaders.append("Content-Type", "application/json");
80-
81-
var raw = JSON.stringify({
82-
feedback: feedBackString,
83-
url: window.location.href,
84-
utm: utmJsonTemp
85-
});
86-
87-
var requestOptions = {
88-
method: 'POST',
89-
headers: myHeaders,
90-
body: raw,
91-
redirect: 'follow'
92-
};
93-
94-
fetch(`https://test-backend.lambdatest.com/api/website_feed/thumbs_down`, requestOptions)
95-
.then(response => response.text())
96-
.then(result => {
97-
getContactFormResponse(true);
98-
})
99-
.catch(error => console.log('error', error));
100-
101-
};
102-
useEffect(() => {
103-
// console.log('isContactFormSubmitted', isContactFormSubmitted)
104-
}, [isContactFormSubmitted])
105-
106-
return (
88+
fetch("https://test-backend.lambdatest.com/api/website_feed/thumbs_down", {
89+
method: "POST",
90+
headers: { "Content-Type": "application/json" },
91+
body: JSON.stringify({
92+
feedback: this.state.selectedOption === "other" ? this.state.message : this.state.selectedOption,
93+
url: window.location.href,
94+
utm: this.getCookie("utm"),
95+
}),
96+
})
97+
.then(() => this.setState({ isContactFormSubmitted: true }))
98+
.catch((error) => console.error("Error:", error));
99+
}
100+
101+
render() {
102+
const {
103+
feedback,
104+
feedbackSubmitted,
105+
isContactFormSubmitted,
106+
selectedOption,
107+
message,
108+
formMsgError,
109+
feedbackOptionErr
110+
} = this.state;
111+
112+
const {
113+
thumbsUpLight,
114+
thumbsUpDark,
115+
thumbsDownLight,
116+
thumbsDownDark
117+
} = this.props;
118+
119+
const otherSelected = selectedOption === "other";
120+
121+
return (
107122
<div className="feedback__box">
108-
109-
<div className='support_container'>
110-
123+
<div className="support_container">
111124
<div>
112-
<h3 className='feedback__box__title feedback__box__title_helpful'>Do you find this helpful?</h3>
113-
{!feedbackSubmitted && !isContactFormSubmitted &&
114-
<div className='feedback__box__icons'>
115-
<button role="button" tabIndex="0" type="button" onClick={() => { feedbackSubmit() }} title='Document Feedback' aria-label="Document Feedback" >
116-
117-
125+
<h3 className="feedback__box__title feedback__box__title_helpful">
126+
Do you find this helpful?
127+
</h3>
128+
{!feedbackSubmitted && !isContactFormSubmitted ? (
129+
<div className="feedback__box__icons">
130+
<button onClick={this.handleThumbsUp} title="Thumbs Up" type="button">
118131
<ThemedImage
119132
className="no-zoom"
120-
alt="Docusaurus themed image"
133+
alt="Thumbs Up"
121134
sources={{
122-
light: useBaseUrl('/img/thumbsUp_light.svg'),
123-
dark: useBaseUrl('/img/thumbsUp_dark.svg'),
135+
light: thumbsUpLight,
136+
dark: thumbsUpDark,
124137
}}
125138
/>
126-
127-
128-
129139
</button>
130-
<button role="button" tabIndex="0" type="button" onClick={() => { SetFeedback("Negative") }} title='Document Feedback' aria-label="Document Feedback">
140+
<button onClick={this.handleThumbsDown} title="Thumbs Down" type="button">
131141
<ThemedImage
132142
className="no-zoom"
133-
alt="Docusaurus themed image"
143+
alt="Thumbs Down"
134144
sources={{
135-
light: useBaseUrl('/img/thumbsDown_light.svg'),
136-
dark: useBaseUrl('/img/thumbsDown_dark.svg'),
145+
light: thumbsDownLight,
146+
dark: thumbsDownDark,
137147
}}
138148
/>
139149
</button>
140150
</div>
141-
}
142-
{feedbackSubmitted && <div className='feedback__box__thanks-title'>
143-
<h3>Thanks for your feedback!</h3>
144-
</div>}
145-
{isContactFormSubmitted && <div className='feedback__box__thanks-title'>
146-
<h3>Thanks for your feedback!</h3>
147-
</div>}
148-
</div>
149-
150-
<div className="social_button">
151+
) : (
152+
<div className="feedback__box__thanks-title">
153+
<h3>Thanks for your feedback!</h3>
154+
</div>
155+
)}
156+
</div>
157+
<div className="social_button">
151158
<h3 className='feedback__box__title feedback__box__title_helpful'>Still need help?</h3>
152159
<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>
153160
<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>
154161
{/* <a href="https://accounts.lambdatest.com/register" target="_blank" className="btnlink">Start Free Testing</a> */}
155162
</div>
156-
</div>
157-
158-
{feedback == "Negative" && !isContactFormSubmitted &&
159-
<form ref={form} onSubmit={handleSubmit} className="feedback__box__form">
160-
<p className='feedback__box__form__title'>We're sorry to hear that. Please share your feedback with us.</p>
161-
<ol className="feedback__box__form__radios">
162-
<li className='feedback__box__form__radio_div'>
163-
<input type="radio" name="feedback_option" value={"The information that I need is partially explained"} onChange={handleOptionChange} />
164-
<span>The information that I need is partially explained</span>
165-
</li>
166-
<li className='feedback__box__form__radio_div'>
167-
<input type="radio" name="feedback_option" value={"This page does not contain what I am looking for."} onChange={handleOptionChange} />
168-
<span>This page does not contain what I am looking for.</span>
169-
</li>
170-
<li className='feedback__box__form__radio_div'>
171-
<input type="radio" name="feedback_option" value={"This content & code samples are not accurate and outdated"} onChange={handleOptionChange} />
172-
<span>This content & code samples are not accurate and outdated</span>
163+
</div>
164+
165+
{feedback === "Negative" && !isContactFormSubmitted && (
166+
<form onSubmit={this.handleSubmit} className="feedback__box__form">
167+
<p className="feedback__box__form__title">
168+
We're sorry to hear that. Please share your feedback with us.
169+
</p>
170+
<ol className="feedback__box__form__radios">
171+
{[
172+
"The information that I need is partially explained",
173+
"This page does not contain what I am looking for.",
174+
"This content & code samples are not accurate and outdated",
175+
"The information that I need is not easy to understand",
176+
].map((option, index) => (
177+
<li key={index} className="feedback__box__form__radio_div">
178+
<input
179+
type="radio"
180+
name="feedback_option"
181+
id={`option_${index}`}
182+
value={option}
183+
checked={selectedOption === option}
184+
onChange={this.handleOptionChange}
185+
/>
186+
<span>{option}</span>
173187
</li>
174-
<li className='feedback__box__form__radio_div'>
175-
<input type="radio" name="feedback_option" value={"The information that I need is not easy to understand"} onChange={handleOptionChange} />
176-
<span>The information that I need is not easy to understand</span>
177-
</li>
178-
<li className='feedback__box__form__radio_div'>
179-
<input type="radio" name="feedback_option" value={"other"} onChange={handleOptionChange} />
180-
<span>Other (please tell us more below)</span>
181-
</li>
182-
</ol>
183-
{feedbackOptionErr && <p className='feedback__box__form__red_alert'>Please select an option.</p>}
184-
<div>
185-
{otherSelected && <textarea id="messageid" name="message" placeholder="What were you looking" className='feedback__form__control'></textarea>}
186-
{otherSelected && formMsgError && <p className='feedback__box__form__red_alert'>Please write your feedback</p>}
187-
<button type="submit" className='feedback__form__submit__btn'>
188-
Submit
189-
</button>
190-
</div>
191-
</form>
192-
}
193-
194-
188+
))}
189+
<li className="feedback__box__form__radio_div">
190+
<input
191+
type="radio"
192+
name="feedback_option"
193+
id="option_other"
194+
value="other"
195+
checked={selectedOption === "other"}
196+
onChange={this.handleOptionChange}
197+
/>
198+
<span>Other (please tell us more below)</span>
199+
</li>
200+
</ol>
201+
{feedbackOptionErr && <p className="feedback__box__form__red_alert">Please select an option.</p>}
202+
{otherSelected && (
203+
<>
204+
<textarea
205+
name="message"
206+
value={message}
207+
onChange={this.handleMessageChange}
208+
placeholder="What were you looking for?"
209+
className="feedback__form__control"
210+
></textarea>
211+
{formMsgError && <p className="feedback__box__form__red_alert">Please write your feedback</p>}
212+
</>
213+
)}
214+
<button type="submit" className="feedback__form__submit__btn">
215+
Submit
216+
</button>
217+
</form>
218+
)}
195219
</div>
196-
);
197-
}
220+
);
221+
}
222+
}

0 commit comments

Comments
 (0)