Skip to content

Commit f65bfd7

Browse files
carmentangcarmentang
authored
added a contact submission Modal, removed unused variables, fixed gra… (#126)
* added a contact submission Modal, removed unused variables, fixed grammar * adding thank you message * added a contact submission Modal, removed unused variables, fixed grammar * adding thank you message * add a close button + styling to contact submission form * added a contact submission Modal, removed unused variables, fixed grammar * adding thank you message * add a close button + styling to contact submission form * formatting and fix Spanish translations
1 parent d3e3f87 commit f65bfd7

36 files changed

+13681
-157
lines changed

‎package-lock.json

+117
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
}
2323
],
2424
"dependencies": {
25+
"@material-ui/core": "^4.9.3",
26+
"@material-ui/lab": "^4.0.0-alpha.43",
2527
"@mdx-js/loader": "^1.4.5",
2628
"@mdx-js/mdx": "^1.4.5",
2729
"@mdx-js/react": "^1.4.5",
@@ -50,6 +52,7 @@
5052
"react-typography": "^0.16.19",
5153
"redux": "^4.0.4",
5254
"redux-thunk": "^2.3.0",
55+
"semantic-ui-react": "^0.88.2",
5356
"typography": "^0.16.19",
5457
"typography-theme-lincoln": "^0.16.19"
5558
},

‎src/components/Alert.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import { makeStyles } from "@material-ui/core/styles";
3+
import Alert from "@material-ui/lab/Alert";
4+
import AppContext from "./AppContext";
5+
6+
const useStyles = makeStyles(theme => ({
7+
root: {
8+
width: "100%",
9+
"& > * + *": {
10+
marginTop: theme.spacing(2)
11+
}
12+
}
13+
}));
14+
15+
var dict = {
16+
en: {
17+
thankYou: "Thank you for submitting!",
18+
},
19+
es: {
20+
thankYou: "Gracias por enviar!",
21+
}
22+
};
23+
24+
export default function ActionAlerts() {
25+
const classes = useStyles();
26+
27+
return (
28+
<AppContext.Consumer>
29+
{({ appCtx }) => (
30+
<div className={classes.root}>
31+
<Alert>{dict[appCtx.lang].thankYou}</Alert>
32+
</div>
33+
)}
34+
</AppContext.Consumer>
35+
);
36+
}

‎src/components/Buttons.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { Link, navigate } from "gatsby";
2+
import { navigate } from "gatsby";
33
import "../styles/buttons.scss";
44

55
const DefaultButton = ({ className, children, type = "button", ...props }) => (

‎src/components/Contact.js

+21-15
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import React from "react";
22
import AppContext from "./AppContext"
33
import { navigate } from "gatsby";
4+
import { Message } from "semantic-ui-react";
5+
import Alert from "../components/Alert";
6+
import { StyledPrimaryButton } from "../components/Buttons";
47

58
import '../styles/contact.scss'
69

10+
711
const encode = (data) => {
812
return Object.keys(data)
913
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
@@ -18,10 +22,10 @@ var contactDict = {
1822
contactLegend: "Contact Information",
1923
email: "Email",
2024
cell: "Cell",
21-
includeDetails: "Share information I enter about my tenancy",
25+
includeDetails: "Share my tenancy information with Housing Now!",
2226
subscribe: "Subscribe to newsletters from Housing Now!",
2327
disclaimer: "Any information you share is kept confidential and is only used to assist you with your case.",
24-
submitText: "Connect with us",
28+
submitText: "Submit",
2529
},
2630
es: {
2731
nameLegend: "Nombre",
@@ -30,10 +34,10 @@ var contactDict = {
3034
contactLegend: "Información del contacto",
3135
email: "Correo Electrónico",
3236
cell: "Celular",
33-
includeDetails: "Compartir información que ingreso sobre mi arrendamiento",
34-
subscribe: "suscribirse a boletines de Housing Now!",
37+
includeDetails: "¡Comparta mi información de arrendamiento con Housing Now!",
38+
subscribe: "Suscribirse a boletines de Housing Now!",
3539
disclaimer: "Cualquier información que comparta se mantiene confidencial y solo se utiliza para ayudarlo con su caso.",
36-
submitText: "Conéctate con nosotros",
40+
submitText: "Enviar",
3741
}
3842
};
3943

@@ -52,6 +56,7 @@ class QuickContactForm extends React.Component {
5256
subscribe: false,
5357
submitText: props.submitText,
5458
dict: contactDict,
59+
hasSubmitted: false,
5560
};
5661
}
5762

@@ -69,11 +74,13 @@ class QuickContactForm extends React.Component {
6974
if (this.state.submitDestination) {
7075
navigate(this.state.submitDestination);
7176
}
77+
this.setState({
78+
hasSubmitted: true
79+
});
7280
})
7381
.catch(error => console.log(error));
7482

7583
e.preventDefault();
76-
7784
};
7885

7986
checkBoxes = { "includeDetails": true, "subscribe": true };
@@ -93,7 +100,7 @@ class QuickContactForm extends React.Component {
93100
{({ appCtx, updateContext }) => (
94101
(!appCtx.quickFormSubmit || !autohide) ?
95102
<div>
96-
<form onSubmit={(e) => { this.handleSubmit(e, updateContext) }} name="quickContact" data-netlify="true" data-netlify-honeypot="bot-field">
103+
<form onSubmit={(e) => { this.handleSubmit(e, updateContext) }} success={this.state.hasSubmitted.toString()} name="quickContact" data-netlify="true" data-netlify-honeypot="bot-field">
97104
<input type="hidden" name="form-name" value="quickContact" />
98105
<fieldset>
99106
<legend>{dict[appCtx.lang].nameLegend}</legend>
@@ -106,18 +113,17 @@ class QuickContactForm extends React.Component {
106113
<input className="form-control" type="email" name="email" value={email} onChange={this.handleChange} placeholder={dict[appCtx.lang].email} />
107114
</fieldset>
108115
<fieldset>
109-
<label className="form-control"><input type="checkbox" name="includeDetails" checked={includeDetails} onChange={this.handleChange} /> {dict[appCtx.lang].includeDetails}</label>
110-
</fieldset>
111-
<fieldset>
112-
<label className="form-control"><input type="checkbox" name="subscribe" checked={subscribe} onChange={this.handleChange} /> {dict[appCtx.lang].subscribe}</label>
116+
<label className="checkboxes"><input type="checkbox" name="includeDetails" checked={includeDetails} onChange={this.handleChange} /> {dict[appCtx.lang].includeDetails}</label><br/>
117+
<label className="checkboxes"><input type="checkbox" name="subscribe" checked={subscribe} onChange={this.handleChange} /> {dict[appCtx.lang].subscribe}</label>
113118
</fieldset>
114119
<p className="disclaimer">{dict[appCtx.lang].disclaimer}</p>
115-
116-
<button type="submit">{submitText ? submitText : dict[appCtx.lang].submitText}</button>
120+
<center><StyledPrimaryButton type="submit">{submitText ? submitText : dict[appCtx.lang].submitText}</StyledPrimaryButton></center>
117121
</form>
118122
</div>
119123
:
120-
<div />
124+
<div>
125+
<Alert /><br/>
126+
</div>
121127
)}
122128
</AppContext.Consumer>
123129
);
@@ -277,7 +283,7 @@ class FullContactForm extends React.Component {
277283
</div>
278284
}
279285
<p>
280-
<button type="submit">{submitText ? submitText : dict[appCtx.lang].submitText}</button>
286+
<button type="submit">{submitText ? submitText : dict[appCtx.lang].submitText}</button>
281287
</p>
282288
</form>
283289
)}

‎src/components/Disclaimer.js

+22-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
import React from "react";
22
import { Link } from "gatsby";
3+
import AppContext from "./AppContext";
4+
5+
var dict = {
6+
en: {
7+
text1: "This does not consider local rent control ordinances. Check out our ",
8+
text2: "resources page",
9+
text3: "for more help.",
10+
},
11+
es: {
12+
text1: "Esto no considera las ordenanzas locales de control de alquileres. Consulte nuestra",
13+
text2: "página de recursos",
14+
text3: "para obtener más ayuda.",
15+
}
16+
};
317

418
const Disclaimer = () => {
519
return (
6-
<small>
7-
This does not consider local rent control ordinances, please check{" "}
8-
<Link to="/resources">here</Link> for your local laws.
9-
</small>
20+
<AppContext.Consumer>
21+
{({ appCtx }) => (
22+
<small>
23+
{dict[appCtx.lang].text1}
24+
<Link to="/resources">{dict[appCtx.lang].text2}</Link> {dict[appCtx.lang].text3}
25+
</small>
26+
)}
27+
</AppContext.Consumer>
1028
);
1129
};
1230

0 commit comments

Comments
 (0)