batuhan-basoglu/Kene-s-Cribs-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Made the translation for the homepage and contact us page.

Browse source
This commit is contained in:
Batuhan Basoglu 2021-04-07 15:35:59 -04:00
parent a1d44d75ba
commit 2900b81394
8 changed files with 151 additions and 21008 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/shared-components/contact-us/contact-us.js
View file

@ -7,6 +7,7 @@ import {
FormWithConstraints
} from 'react-form-with-constraints';
import Alert from 'react-bootstrap/Alert';
import { withTranslation } from "react-i18next";
@ -28,25 +29,26 @@ class ContactUs extends Component {
render() {
const { t } = this.props;
return (
<div className="contact-us">
<Alert variant="danger" style={{ display: this.state.alertBad ? "block" : "none" }} onClose={() => this.setState({ alertBad: false })} dismissible>
<Alert.Heading>Message could not send.</Alert.Heading>
<Alert.Heading>{t("Danger1")}</Alert.Heading>
<p>
There are some errors in your contact form.
</p>
{t("Danger2")}
</p>
</Alert>
<Alert variant="success" style={{ display: this.state.alertSucess ? "block" : "none" }} onClose={() => this.setState({ alertSucess: false })} dismissible>
<Alert.Heading>The message is successfully sent.</Alert.Heading>
<Alert.Heading>{t("Success1")}</Alert.Heading>
<p>
You contact form will be delivered to our support team.
</p>
{t("Success2")}
</p>
</Alert>
<div className="container">
<section class="colored-section" id="contact">
<div className="container-fluid">
<div className="contactIntro">
<h2 className="heading-1">Contact Us</h2>
<h2 className="heading-1">{t("Contact-Title")}</h2>
<FormWithConstraints ref={form => this.form = form}
id="contact-form"
onSubmit={this.handleSubmit.bind(this)}
@ -57,30 +59,34 @@ class ContactUs extends Component {
<div className="row">
<div className="col-6">
<select className="form-group" name="agent" id="dropdown" required onChange={this.onAgentChange.bind(this)} value={this.state.agent}>
<option value="">Select an Agent</option>
<option value="">{t("Contact-Agent")}</option>
<option value="Michael">Michael</option>
<option value="Jin">Jin </option>
<option value="Anita">Anita</option>
<option value="Alex">Alex</option>
<option value="Xuan">Xuan</option>
<option value="Walter">Walter</option>
<option value="No preference">No preference</option>
<option value="No preference">{t("No-Pref")}</option>
</select>
<FieldFeedbacks for="agent">
<FieldFeedback when="*" />
<FieldFeedback when="*">
{t("Contact-Error1")}
</FieldFeedback>
</FieldFeedbacks>
</div>
<div className="col-6">
<select className="form-group" name="house" id="dropdown" required onChange={this.onHouseChange.bind(this)} value={this.state.house}>
<option value="">Select a House</option>
<option value="">{t("Contact-House")}</option>
<option value="100 Charlie Rogers">100 Charlie Rogers</option>
<option value="1490 Youville Drive">1490 Youville Drive </option>
<option value="8720 Russell Road">8720 Russell Road</option>
<option value="2785 8th Line Road">2785 8th Line Road</option>
<option value="No preference">No preference</option>
<option value="No preference">{t("No-Pref")}</option>
</select>
<FieldFeedbacks for="house">
<FieldFeedback when="*" />
<FieldFeedbacks for="agent">
<FieldFeedback when="*">
{t("Contact-Error1")}
</FieldFeedback>
</FieldFeedbacks>
</div>
</div>
@ -90,24 +96,28 @@ class ContactUs extends Component {
<input name="firstname"
type="text"
className="form-control"
placeholder="First Name"
placeholder={t("Contact-First")}
value={this.state.firstname}
required onChange={this.onFirstNameChange.bind(this)}
/>
<FieldFeedbacks for="firstname">
<FieldFeedback when="*" />
<FieldFeedbacks for="agent">
<FieldFeedback when="*">
{t("Contact-Error2")}
</FieldFeedback>
</FieldFeedbacks>
</div>
<div className="col-6">
<input name="lastname"
type="text"
className="form-control"
placeholder="Last Name"
placeholder={t("Contact-Last")}
value={this.state.lastname}
required onChange={this.onLastNameChange.bind(this)}
/>
<FieldFeedbacks for="lastname">
<FieldFeedback when="*" />
<FieldFeedbacks for="agent">
<FieldFeedback when="*">
{t("Contact-Error2")}
</FieldFeedback>
</FieldFeedbacks>
</div>
</div>
@ -115,31 +125,34 @@ class ContactUs extends Component {
<input name="email"
type="email"
className="form-control"
placeholder="Email Address"
placeholder={t("Contact-Mail")}
aria-describedby="emailHelp"
value={this.state.email}
required onChange={this.onEmailChange.bind(this)}
/>
<FieldFeedbacks for="email">
<FieldFeedback when="*" />
<FieldFeedback when={value => value.length === 0}>{t("Contact-Error2")}</FieldFeedback>
<FieldFeedback when={value => !/\S+@\S+/.test(value)}>{t("Contact-Error3")}</FieldFeedback>
</FieldFeedbacks>
</div>
<div className="form-group">
<textarea name="message"
className="form-control"
placeholder="Message"
placeholder={t("Contact-Message")}
rows="5"
value={this.state.message}
required onChange={this.onMessageChange.bind(this)}
/>
<FieldFeedbacks for="message">
<FieldFeedback when="*" />
<FieldFeedbacks for="agent">
<FieldFeedback when="*">
{t("Contact-Error1")}
</FieldFeedback>
</FieldFeedbacks>
</div>
<div className="buttonhelper">
<button type="submit" className="button-1">
Submit
</button>
{t("Contact-Submit")}
</button>
</div>
</FormWithConstraints>
</div>
@ -203,12 +216,12 @@ class ContactUs extends Component {
}
alertSuccess(){
alertSuccess() {
this.setState({ alertBad: false, alertSucess: true })
}
alertBad(){
this.setState({ alertSucess: false, alertBad: true })
alertBad() {
this.setState({ alertSucess: false, alertBad: true })
}
resetForm() {
@ -217,4 +230,4 @@ class ContactUs extends Component {
}
export default ContactUs;
export default withTranslation()(ContactUs);