Initial
This commit is contained in:
Christian Anetzberger
222
pages/eanfrage.jsx
Normal file
222
pages/eanfrage.jsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import React from "react";
|
||||
import { Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import axios from "axios";
|
||||
import Head from "next/head";
|
||||
|
||||
import { EanfrageSchema } from "../components/forms/schemas.jsx";
|
||||
|
||||
import IntroForm from "../components/forms/eanfrageforms/introform.jsx";
|
||||
import ContactPersonForm from "../components/forms/eanfrageforms/contactperson.jsx";
|
||||
import PartForm from "../components/forms/eanfrageforms/partform.jsx";
|
||||
import Summary from "../components/forms/eanfrageforms/summary.jsx";
|
||||
|
||||
export default class Eanfrage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this._renderStepContent = this._renderStepContent.bind(this);
|
||||
this._handleForward = this._handleForward.bind(this);
|
||||
this._handleBackwards = this._handleBackwards.bind(this);
|
||||
|
||||
this.state = {
|
||||
rescode: null,
|
||||
statustext: null,
|
||||
activeStep: 0,
|
||||
disabled: false,
|
||||
};
|
||||
}
|
||||
|
||||
_renderStepContent(
|
||||
step,
|
||||
values,
|
||||
isSubmitting,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
touched,
|
||||
errors,
|
||||
setFieldValue
|
||||
) {
|
||||
switch (step) {
|
||||
case 0:
|
||||
return <IntroForm />;
|
||||
case 1:
|
||||
return (
|
||||
<ContactPersonForm
|
||||
values={values}
|
||||
isSubmitting={isSubmitting}
|
||||
handleChange={handleChange}
|
||||
handleBlur={handleBlur}
|
||||
touched={touched}
|
||||
errors={errors}
|
||||
disabled={this.state.disabled}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<PartForm
|
||||
values={values}
|
||||
isSubmitting={isSubmitting}
|
||||
handleChange={handleChange}
|
||||
handleBlur={handleBlur}
|
||||
touched={touched}
|
||||
errors={errors}
|
||||
disabled={this.state.disabled}
|
||||
setFieldValue={setFieldValue}
|
||||
/>
|
||||
);
|
||||
case 3:
|
||||
return <Summary values={values} />;
|
||||
default:
|
||||
return <div>Not Found</div>;
|
||||
}
|
||||
}
|
||||
|
||||
_handleForward() {
|
||||
this.setState({
|
||||
activeStep: this.state.activeStep + 1,
|
||||
});
|
||||
}
|
||||
|
||||
_handleBackwards() {
|
||||
this.setState({
|
||||
activeStep: this.state.activeStep - 1,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<meta
|
||||
name="description"
|
||||
content="Die Hans Prothmann GmbH ist Ihr Experte für Blechverarbeitung in München. Professionelles Laserschneiden, Stanzen, Biegen und Gravieren in München."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Blechverarbeitung München, Blechverarbeitung Gröbenzell, Laserteile, Biegeteile, Stanzteile"
|
||||
/>
|
||||
<meta name="robots" content="index, follow" />
|
||||
<title>eAnfrage - Prothmann GmbH</title>
|
||||
</Head>
|
||||
<div className="container background-image landing-img d-flex align-items-center minh-100vh navbar-spacing mb-5">
|
||||
<div className="col text-center">
|
||||
<Formik
|
||||
validationSchema={EanfrageSchema}
|
||||
initialValues={{
|
||||
firma: "",
|
||||
anrede: "",
|
||||
titel: "",
|
||||
vorname: "",
|
||||
nachname: "",
|
||||
email: "",
|
||||
telefon: "",
|
||||
invoiceadress: "",
|
||||
invoiceplz: "",
|
||||
diffrentshipping: false,
|
||||
shippingaddress: "",
|
||||
shippingplz: "",
|
||||
parts: [
|
||||
{
|
||||
name: "Teststeil",
|
||||
description: "Dies ist eine total tolle Bschreibung",
|
||||
material: "Sonstiges",
|
||||
materialother: "Kupfer Beryllium",
|
||||
finish: "Sonstiges",
|
||||
finishother: "DLC",
|
||||
amount: "1000",
|
||||
files: [],
|
||||
engraving: true,
|
||||
comment:
|
||||
"Dies hier sind zusätzliche Produktionsanweisungen",
|
||||
},
|
||||
],
|
||||
consent: true,
|
||||
}}
|
||||
onSubmit={async (values, errors) => {
|
||||
console.log(values, errors);
|
||||
// const data = values;
|
||||
// try {
|
||||
// const res = await axios({
|
||||
// method: "post",
|
||||
// url: "/api/contactsend",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// },
|
||||
// data,
|
||||
// });
|
||||
// this.setState({
|
||||
// status: "Ihre Nachricht wurde erfolgreich versendet",
|
||||
// res: res.status,
|
||||
// });
|
||||
// } catch (error) {
|
||||
// this.setState({
|
||||
// status:
|
||||
// "Beim versenden ist ein Fehler aufgetreten! Bitte versuchen Sie es in einigen Minuten noch einmal oder schicken Sie und direkt eine e-Mail.",
|
||||
// res: res.status,
|
||||
// });
|
||||
// }
|
||||
}}
|
||||
>
|
||||
{({
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
setFieldValue,
|
||||
}) => (
|
||||
<form onSubmit={handleSubmit} className="description">
|
||||
{this._renderStepContent(
|
||||
this.state.activeStep,
|
||||
values,
|
||||
isSubmitting,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
touched,
|
||||
errors,
|
||||
setFieldValue
|
||||
)}
|
||||
|
||||
<div className="d-flex flex-row justify-content-between">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-dark ${
|
||||
this.state.activeStep <= 0 ? "disabled" : ""
|
||||
}`}
|
||||
onClick={this._handleBackwards}
|
||||
>
|
||||
Zurück
|
||||
</button>
|
||||
|
||||
{this.state.activeStep !== 3 ? (
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-primary`}
|
||||
onClick={this._handleForward}
|
||||
>
|
||||
Weiter
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-success ${
|
||||
values.consent === false ? "disabled" : ""
|
||||
}`}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Abschicken
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user