223 lines
6.8 KiB
JavaScript
223 lines
6.8 KiB
JavaScript
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>
|
|
</>
|
|
);
|
|
}
|
|
}
|