Files
bodyshop/client/src/components/shop-info/shop-info.component.jsx

616 lines
20 KiB
JavaScript

import { DeleteFilled } from "@ant-design/icons";
import {
Button,
Collapse,
Form,
Input,
InputNumber,
Radio,
Select,
Switch,
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import PhoneFormItem, {
PhoneItemFormatterValidation,
} from "../form-items-formatted/phone-form-item.component";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
import ShopInfoLaborRates from "./shop-info.laborrates.component";
import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
import ShopInfoRbacComponent from "./shop-info.rbac.component";
import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
export default function ShopInfoComponent({ form, saveLoading }) {
const { t } = useTranslation();
return (
<div>
<Button
type="primary"
loading={saveLoading}
onClick={() => form.submit()}
>
{t("general.actions.save")}
</Button>
<Collapse>
<Collapse.Panel key="shopinfo" header={t("bodyshop.labels.shopinfo")}>
<LayoutFormRow>
<Form.Item
label={t("bodyshop.fields.shopname")}
name="shopname"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.address1")}
name="address1"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item label={t("bodyshop.fields.address2")} name="address2">
<Input />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.city")}
name="city"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.state")}
name="state"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item label={t("bodyshop.fields.zip_post")} name="zip_post">
<Input />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow>
<Form.Item label={t("bodyshop.fields.country")} name="country">
<Input />
</Form.Item>
<Form.Item label={t("bodyshop.fields.email")} name="email">
<Input />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.phone")}
name="phone"
rules={[
({ getFieldValue }) =>
PhoneItemFormatterValidation(getFieldValue, "phone"),
]}
>
<PhoneFormItem />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.federal_tax_id")}
name="federal_tax_id"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.insurance_vendor_id")}
name="insurance_vendor_id"
>
<Input />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.logo_img_path")}
name="logo_img_path"
>
<Input />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.state_tax_id")}
name="state_tax_id"
>
<Input />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow>
<Form.Item
label={t("bodyshop.fields.invoice_federal_tax_rate")}
name={["bill_tax_rates", "federal_tax_rate"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.invoice_state_tax_rate")}
name={["bill_tax_rates", "state_tax_rate"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.invoice_local_tax_rate")}
name={["bill_tax_rates", "local_tax_rate"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.appt_length")}
name={"appt_length"}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber min={15} precision={0} />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow>
<Form.Item
label={t("bodyshop.fields.dailypainttarget")}
name={["scoreboard_target", "dailyPaintTarget"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber min={0} precision={0} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.dailybodytarget")}
name={["scoreboard_target", "dailyBodyTarget"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber min={0} precision={0} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.lastnumberworkingdays")}
name={["scoreboard_target", "lastNumberWorkingDays"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber min={0} max={12} precision={0} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.prodtargethrs")}
name={["prodtargethrs"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber min={1} precision={1} />
</Form.Item>
<Form.Item
name={["md_referral_sources"]}
label={t("bodyshop.fields.md_referral_sources")}
rules={[
{
required: true,
message: t("general.validation.required"),
type: "array",
},
]}
>
<Select mode="tags" />
</Form.Item>
<Form.Item
label={t("bodyshop.labels.accountingtiers")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={["accountingconfig", "tiers"]}
>
<Radio.Group>
<Radio value={2}>2</Radio>
<Radio value={3}>3</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.inhousevendorid")}
name={"inhousevendorid"}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item shouldUpdate>
{() => {
return (
<Form.Item
label={t("bodyshop.labels.2tiersetup")}
shouldUpdate
rules={[
{
required:
form.getFieldValue(["accountingconfig", "tiers"]) ===
2,
message: t("general.validation.required"),
},
]}
name={["accountingconfig", "twotierpref"]}
>
<Radio.Group
disabled={
form.getFieldValue(["accountingconfig", "tiers"]) === 3
}
>
<Radio value="name">
{t("bodyshop.labels.2tiername")}
</Radio>
<Radio value="source">
{t("bodyshop.labels.2tiersource")}
</Radio>
</Radio.Group>
</Form.Item>
);
}}
</Form.Item>
</LayoutFormRow>
<Form.List name={["md_messaging_presets"]}>
{(fields, { add, remove, move }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item
key={field.key}
style={{ padding: 0, margin: 2 }}
>
<div style={{ display: "flex" }}>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t("bodyshop.fields.messaginglabel")}
key={`${index}label`}
name={[field.name, "label"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t("bodyshop.fields.messagingtext")}
key={`${index}text`}
name={[field.name, "text"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
<FormListMoveArrows
move={move}
index={index}
total={fields.length}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("general.actions.add")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
<Form.List name={["md_notes_presets"]}>
{(fields, { add, remove, move }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item
key={field.key}
style={{ padding: 0, margin: 2 }}
>
<div style={{ display: "flex" }}>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t("bodyshop.fields.noteslabel")}
key={`${index}label`}
name={[field.name, "label"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
style={{ padding: 0, margin: 2 }}
label={t("bodyshop.fields.notestext")}
key={`${index}text`}
name={[field.name, "text"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
<FormListMoveArrows
move={move}
index={index}
total={fields.length}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("general.actions.add")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
<Form.List name={["md_parts_locations"]}>
{(fields, { add, remove, move }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item
key={field.key}
style={{ padding: 0, margin: 2 }}
>
<div className="imex-flex-row">
<Form.Item
className="imex-flex-row__margin"
label={t("bodyshop.fields.partslocation")}
key={`${index}`}
name={[field.name]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<DeleteFilled
className="imex-flex-row__margin"
onClick={() => {
remove(field.name);
}}
/>
<FormListMoveArrows
move={move}
index={index}
total={fields.length}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("bodyshop.actions.addpartslocation")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
<LayoutFormRow>
<Form.Item
name={["md_classes"]}
label={t("bodyshop.fields.md_classes")}
rules={[
{
required: true,
message: t("general.validation.required"),
type: "array",
},
]}
>
<Select mode="tags" />
</Form.Item>
<Form.Item
name={["md_categories"]}
label={t("bodyshop.fields.md_categories")}
rules={[
{
required: true,
message: t("general.validation.required"),
type: "array",
},
]}
>
<Select mode="tags" />
</Form.Item>
<Form.Item
name={["md_ins_cos"]}
label={t("bodyshop.fields.md_ins_cos")}
rules={[
{
required: true,
message: t("general.validation.required"),
type: "array",
},
]}
>
<Select mode="tags" />
</Form.Item>
<Form.Item
name={["enforce_class"]}
label={t("bodyshop.fields.enforce_class")}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
name={["target_touchtime"]}
label={t("bodyshop.fields.target_touchtime")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber min={0.1} precision={1} />
</Form.Item>
</LayoutFormRow>
</Collapse.Panel>
<Collapse.Panel
key="speedprint"
header={t("bodyshop.labels.speedprint")}
>
<ShopInfoSpeedPrint form={form} />
</Collapse.Panel>
<Collapse.Panel key="rbac" header={t("bodyshop.labels.rbac")}>
<ShopInfoRbacComponent form={form} />
</Collapse.Panel>
<Collapse.Panel
key="roStatus"
header={t("bodyshop.labels.jobstatuses")}
>
<ShopInfoROStatusComponent form={form} />
</Collapse.Panel>
<Collapse.Panel
key="scheduling"
header={t("bodyshop.labels.scheduling")}
>
<ShopInfoSchedulingComponent form={form} />
</Collapse.Panel>
<Collapse.Panel
key="orderStatus"
header={t("bodyshop.labels.orderstatuses")}
>
<ShopInfoOrderStatusComponent form={form} />
</Collapse.Panel>
<Collapse.Panel
key="responsibilityCenters"
header={t("bodyshop.labels.responsibilitycenters.title")}
>
<ShopInfoResponsibilityCenterComponent form={form} />
</Collapse.Panel>
<Collapse.Panel key="intake" header={t("bodyshop.labels.intake")}>
<ShopInfoIntakeChecklistComponent form={form} />
</Collapse.Panel>
<Collapse.Panel
key="laborrates"
header={t("bodyshop.labels.laborrates")}
>
<ShopInfoLaborRates form={form} />
</Collapse.Panel>
</Collapse>
</div>
);
}