BOD-17 Creation of new contract page
This commit is contained in:
287
client/src/components/contract-form/contract-form.component.jsx
Normal file
287
client/src/components/contract-form/contract-form.component.jsx
Normal file
@@ -0,0 +1,287 @@
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Form, Input, DatePicker, InputNumber, Button } from "antd";
|
||||
import aamva from "aamva";
|
||||
|
||||
export default function ContractFormComponent() {
|
||||
const [state, setState] = useState("");
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div>
|
||||
<Input value={state} onChange={e => setState(e.target.value)} />
|
||||
<Button
|
||||
onClick={() => {
|
||||
console.log("state", state);
|
||||
//let data = state;
|
||||
|
||||
var data =
|
||||
"%FLDELRAY BEACH^DOE$JOHN$^4818 S FEDERAL BLVD^ ?\
|
||||
;6360100462172082009=2101198299090=?\
|
||||
#! 33435 I 1600 ECCECC00000?";
|
||||
data = data.replace(/\n/, "");
|
||||
// replace spaces with regular space
|
||||
data = data.replace(/\s/g, " ");
|
||||
var track = data.match(/(.*?\?)(.*?\?)(.*?\?)/);
|
||||
console.log("data", data);
|
||||
console.log("track", track);
|
||||
const a = aamva.stripe(data);
|
||||
console.log(JSON.stringify(a));
|
||||
}}
|
||||
>
|
||||
Decode
|
||||
</Button>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.status")}
|
||||
name="status "
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.start")}
|
||||
name="start"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.scheduledreturn")}
|
||||
name="scheduledreturn"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.actualreturn")}
|
||||
name="actualreturn"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.kmstart")}
|
||||
name="kmstart"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.kmend")}
|
||||
name="kmend"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_dlnumber")}
|
||||
name="driver_dlnumber"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_dlexpiry")}
|
||||
name="driver_dlexpiry"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_dlst")}
|
||||
name="driver_dlst"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_fn")}
|
||||
name="driver_fn"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_ln")}
|
||||
name="driver_ln"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_addr1")}
|
||||
name="driver_addr1"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_addr2")}
|
||||
name="driver_addr2"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_city")}
|
||||
name="driver_city"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_state")}
|
||||
name="driver_state"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_zip")}
|
||||
name="driver_zip"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_ph1")}
|
||||
name="driver_ph1"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.driver_dob")}
|
||||
name="driver_dob"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.cc_num")}
|
||||
name="cc_num"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.cc_expiry")}
|
||||
name="cc_expiry"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("contracts.fields.cc_cardholder")}
|
||||
name="cc_cardholder"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import ContractFormComponent from "../../components/contract-form/contract-form.component";
|
||||
|
||||
export default function ContractCreatePageComponent() {
|
||||
return (
|
||||
<div>
|
||||
<ContractFormComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import ContractCreatePageComponent from "./contract-create.page.component";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import { Form, notification } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
|
||||
export function ContractCreatePageContainer({ bodyshop }) {
|
||||
const [form] = Form.useForm();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleFinish = values => {
|
||||
// insertCourtesyCar({
|
||||
// variables: { courtesycar: { ...values, bodyshopid: bodyshop.id } }
|
||||
// })
|
||||
// .then(response => {
|
||||
notification["success"]({ message: t("courtesycars.successes.saved") });
|
||||
// })
|
||||
// .catch(error => console.log("error", error));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.title = t("titles.contracts-create");
|
||||
}, [t]);
|
||||
|
||||
return (
|
||||
<Form form={form} autoComplete="no" onFinish={handleFinish}>
|
||||
<ContractCreatePageComponent />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
export default connect(mapStateToProps, null)(ContractCreatePageContainer);
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component"
|
||||
import CourtesyCarFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component"
|
||||
|
||||
export default function CourtesyCarCreateComponent() {
|
||||
return <CourtesyCarCreateFormComponent />;
|
||||
return <CourtesyCarFormComponent />;
|
||||
}
|
||||
|
||||
@@ -55,6 +55,9 @@ const CourtesyCarDetailContainer = lazy(() =>
|
||||
const CourtesyCarsPage = lazy(() =>
|
||||
import("../courtesy-cars/courtesy-cars.page.container")
|
||||
);
|
||||
const ContractCreatePage = lazy(() =>
|
||||
import("../contract-create/contract-create.page.container")
|
||||
);
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
|
||||
@@ -117,7 +120,7 @@ export default function Manage({ match }) {
|
||||
<Route
|
||||
exact
|
||||
path={`${match.path}/courtesycars/contracts/new`}
|
||||
component={() => <div>new cc contract</div>}
|
||||
component={ContractCreatePage}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
|
||||
@@ -139,6 +139,31 @@
|
||||
"save": "Bodyshop saved successfully. "
|
||||
}
|
||||
},
|
||||
"contracts": {
|
||||
"fields": {
|
||||
"actualreturn": "Actual Return Date",
|
||||
"cc_cardholder": "Cardholder Name",
|
||||
"cc_expiry": "Credit Card Expiry Date",
|
||||
"cc_num": "Credit Card Number",
|
||||
"driver_addr1": "Driver Address 1",
|
||||
"driver_addr2": "Driver Address 2",
|
||||
"driver_city": "Driver City",
|
||||
"driver_dlexpiry": "Driver's License Expiration Date",
|
||||
"driver_dlnumber": "Driver's License Number",
|
||||
"driver_dlst": "Driver's License State",
|
||||
"driver_dob": "Driver's DOB",
|
||||
"driver_fn": "Driver's First Name",
|
||||
"driver_ln": "Driver's Last Name",
|
||||
"driver_ph1": "Driver's Phone",
|
||||
"driver_state": "Driver's State ",
|
||||
"driver_zip": "Driver's Postal/ZIP Code",
|
||||
"kmend": "Mileage End",
|
||||
"kmstart": "Mileage Start",
|
||||
"scheduledreturn": "Scheduled Return",
|
||||
"start": "Contract Start",
|
||||
"status": "Status"
|
||||
}
|
||||
},
|
||||
"courtesycars": {
|
||||
"erorrs": {
|
||||
"saving": "Error saving courtesy card. {{error}}"
|
||||
@@ -630,6 +655,7 @@
|
||||
},
|
||||
"titles": {
|
||||
"app": "Bodyshop by ImEX Systems",
|
||||
"contracts-create": "New Contract | $t(titles.app)",
|
||||
"courtesycars-create": "New Courtesy Car | $t(titles.app)",
|
||||
"courtesycars-detail": "Courtesy Car {{id}} | $t(titles.app)",
|
||||
"jobs": "All Jobs | $t(titles.app)",
|
||||
|
||||
@@ -139,6 +139,31 @@
|
||||
"save": ""
|
||||
}
|
||||
},
|
||||
"contracts": {
|
||||
"fields": {
|
||||
"actualreturn": "",
|
||||
"cc_cardholder": "",
|
||||
"cc_expiry": "",
|
||||
"cc_num": "",
|
||||
"driver_addr1": "",
|
||||
"driver_addr2": "",
|
||||
"driver_city": "",
|
||||
"driver_dlexpiry": "",
|
||||
"driver_dlnumber": "",
|
||||
"driver_dlst": "",
|
||||
"driver_dob": "",
|
||||
"driver_fn": "",
|
||||
"driver_ln": "",
|
||||
"driver_ph1": "",
|
||||
"driver_state": "",
|
||||
"driver_zip": "",
|
||||
"kmend": "",
|
||||
"kmstart": "",
|
||||
"scheduledreturn": "",
|
||||
"start": " ",
|
||||
"status": ""
|
||||
}
|
||||
},
|
||||
"courtesycars": {
|
||||
"erorrs": {
|
||||
"saving": ""
|
||||
@@ -630,6 +655,7 @@
|
||||
},
|
||||
"titles": {
|
||||
"app": "Carrocería de ImEX Systems",
|
||||
"contracts-create": "",
|
||||
"courtesycars-create": "",
|
||||
"courtesycars-detail": "",
|
||||
"jobs": "Todos los trabajos | $t(titles.app)",
|
||||
|
||||
@@ -139,6 +139,31 @@
|
||||
"save": ""
|
||||
}
|
||||
},
|
||||
"contracts": {
|
||||
"fields": {
|
||||
"actualreturn": "",
|
||||
"cc_cardholder": "",
|
||||
"cc_expiry": "",
|
||||
"cc_num": "",
|
||||
"driver_addr1": "",
|
||||
"driver_addr2": "",
|
||||
"driver_city": "",
|
||||
"driver_dlexpiry": "",
|
||||
"driver_dlnumber": "",
|
||||
"driver_dlst": "",
|
||||
"driver_dob": "",
|
||||
"driver_fn": "",
|
||||
"driver_ln": "",
|
||||
"driver_ph1": "",
|
||||
"driver_state": "",
|
||||
"driver_zip": "",
|
||||
"kmend": "",
|
||||
"kmstart": "",
|
||||
"scheduledreturn": "",
|
||||
"start": "",
|
||||
"status": ""
|
||||
}
|
||||
},
|
||||
"courtesycars": {
|
||||
"erorrs": {
|
||||
"saving": ""
|
||||
@@ -630,6 +655,7 @@
|
||||
},
|
||||
"titles": {
|
||||
"app": "Carrosserie par ImEX Systems",
|
||||
"contracts-create": "",
|
||||
"courtesycars-create": "",
|
||||
"courtesycars-detail": "",
|
||||
"jobs": "Tous les emplois | $t(titles.app)",
|
||||
|
||||
Reference in New Issue
Block a user