Merge branch 'feature/IO-3357-Reynolds-and-Reynolds-DMS-API-Integration' of bitbucket.org:snaptsoft/bodyshop into feature/IO-3357-Reynolds-and-Reynolds-DMS-API-Integration
This commit is contained in:
Patrick Fic
@@ -1,10 +1,9 @@
|
||||
import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
|
||||
import { EditFilled, SyncOutlined } from "@ant-design/icons";
|
||||
import { Button, Card, Col, Row, Space } from "antd";
|
||||
import axios from "axios";
|
||||
import i18n from "i18next";
|
||||
import { isFunction } from "lodash";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Gallery } from "react-grid-gallery";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Lightbox from "react-image-lightbox";
|
||||
import "react-image-lightbox/style.css";
|
||||
@@ -18,19 +17,13 @@ import JobsDocumentsDownloadButton from "./jobs-document-imgproxy-gallery.downlo
|
||||
import JobsDocumentsGalleryReassign from "./jobs-document-imgproxy-gallery.reassign.component";
|
||||
import JobsDocumentsDeleteButton from "./jobs-documents-imgproxy-gallery.delete.component";
|
||||
import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-imgproxy-gallery.selectall.component";
|
||||
import LocalMediaGrid from "../jobs-documents-local-gallery/local-media-grid.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
const mapDispatchToProps = () => ({});
|
||||
|
||||
/*
|
||||
################################################################################################
|
||||
Developer Note:
|
||||
Known Technical Debt Item
|
||||
Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
|
||||
################################################################################################
|
||||
*/
|
||||
function JobsDocumentsImgproxyComponent({
|
||||
bodyshop,
|
||||
data,
|
||||
@@ -119,17 +112,12 @@ function JobsDocumentsImgproxyComponent({
|
||||
)}
|
||||
<Col span={24}>
|
||||
<Card title={t("jobs.labels.documents-images")}>
|
||||
<Gallery
|
||||
<LocalMediaGrid
|
||||
images={galleryImages.images}
|
||||
onClick={(index) => {
|
||||
setModalState({ open: true, index: index });
|
||||
// window.open(
|
||||
// item.fullsize,
|
||||
// "_blank",
|
||||
// "toolbar=0,location=0,menubar=0"
|
||||
// );
|
||||
}}
|
||||
onSelect={(index) => {
|
||||
onToggle={(index) => {
|
||||
setGalleryImages({
|
||||
...galleryImages,
|
||||
images: galleryImages.images.map((g, idx) =>
|
||||
@@ -137,30 +125,26 @@ function JobsDocumentsImgproxyComponent({
|
||||
)
|
||||
});
|
||||
}}
|
||||
minColumns={4}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Card title={t("jobs.labels.documents-other")}>
|
||||
<Gallery
|
||||
<LocalMediaGrid
|
||||
images={galleryImages.other}
|
||||
thumbnailStyle={() => {
|
||||
return {
|
||||
backgroundImage: <FileExcelFilled />,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
cursor: "pointer"
|
||||
};
|
||||
}}
|
||||
onClick={(index) => {
|
||||
window.open(galleryImages.other[index].source, "_blank", "toolbar=0,location=0,menubar=0");
|
||||
}}
|
||||
onSelect={(index) => {
|
||||
onToggle={(index) => {
|
||||
setGalleryImages({
|
||||
...galleryImages,
|
||||
other: galleryImages.other.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g))
|
||||
});
|
||||
}}
|
||||
minColumns={4}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
@@ -221,6 +205,7 @@ export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, billId,
|
||||
width: 225,
|
||||
isSelected: false,
|
||||
key: value.key,
|
||||
filename: value.key,
|
||||
extension: value.extension,
|
||||
id: value.id,
|
||||
type: value.type,
|
||||
@@ -259,6 +244,7 @@ export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, billId,
|
||||
isSelected: false,
|
||||
extension: value.extension,
|
||||
key: value.key,
|
||||
filename: value.key,
|
||||
id: value.id,
|
||||
type: value.type,
|
||||
size: value.size
|
||||
|
||||
@@ -1,31 +1,112 @@
|
||||
import { useEffect } from "react";
|
||||
import { Gallery } from "react-grid-gallery";
|
||||
import { fetchImgproxyThumbnails } from "./jobs-documents-imgproxy-gallery.component";
|
||||
import { useEffect, useMemo, useState, useCallback } from "react";
|
||||
import axios from "axios";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import LocalMediaGrid from "../jobs-documents-local-gallery/local-media-grid.component";
|
||||
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
||||
|
||||
/*
|
||||
################################################################################################
|
||||
Developer Note:
|
||||
Known Technical Debt Item
|
||||
Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
|
||||
################################################################################################
|
||||
*/
|
||||
|
||||
function JobsDocumentImgproxyGalleryExternal({ jobId, externalMediaState }) {
|
||||
function JobsDocumentImgproxyGalleryExternal({ jobId, externalMediaState, context = "chat" }) {
|
||||
const [galleryImages, setgalleryImages] = externalMediaState;
|
||||
const [rawMedia, setRawMedia] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const fetchThumbnails = useCallback(async () => {
|
||||
const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId });
|
||||
return result.data;
|
||||
}, [jobId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (jobId) fetchImgproxyThumbnails({ setStateCallback: setgalleryImages, jobId, imagesOnly: true });
|
||||
}, [jobId, setgalleryImages]);
|
||||
if (!jobId) return;
|
||||
setIsLoading(true);
|
||||
fetchThumbnails()
|
||||
.then(setRawMedia)
|
||||
.catch(console.error)
|
||||
.finally(() => setIsLoading(false));
|
||||
}, [jobId, fetchThumbnails]);
|
||||
|
||||
const documents = useMemo(() => {
|
||||
return rawMedia
|
||||
.filter((v) => v.type?.startsWith("image"))
|
||||
.map((v) => ({
|
||||
src: v.thumbnailUrl,
|
||||
thumbnail: v.thumbnailUrl,
|
||||
fullsize: v.originalUrl,
|
||||
width: 225,
|
||||
height: 225,
|
||||
thumbnailWidth: 225,
|
||||
thumbnailHeight: 225,
|
||||
caption: v.key,
|
||||
filename: v.key,
|
||||
// additional properties if needed
|
||||
key: v.key,
|
||||
id: v.id,
|
||||
type: v.type,
|
||||
size: v.size,
|
||||
extension: v.extension
|
||||
}));
|
||||
}, [rawMedia]);
|
||||
|
||||
useEffect(() => {
|
||||
const prevSelection = new Map(galleryImages.map((p) => [p.filename, p.isSelected]));
|
||||
const nextImages = documents.map((d) => ({ ...d, isSelected: prevSelection.get(d.filename) || false }));
|
||||
// Micro-optimization: if array length and each filename + selection flag match, skip creating a new array.
|
||||
if (galleryImages.length === nextImages.length) {
|
||||
let identical = true;
|
||||
for (let i = 0; i < nextImages.length; i++) {
|
||||
if (
|
||||
galleryImages[i].filename !== nextImages[i].filename ||
|
||||
galleryImages[i].isSelected !== nextImages[i].isSelected
|
||||
) {
|
||||
identical = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (identical) {
|
||||
setIsLoading(false); // ensure loading stops even on no-change
|
||||
return;
|
||||
}
|
||||
}
|
||||
setgalleryImages(nextImages);
|
||||
setIsLoading(false); // stop loading after transform regardless of emptiness
|
||||
}, [documents, setgalleryImages, galleryImages, jobId]);
|
||||
|
||||
const handleToggle = useCallback(
|
||||
(idx) => {
|
||||
setgalleryImages((imgs) => imgs.map((g, gIdx) => (gIdx === idx ? { ...g, isSelected: !g.isSelected } : g)));
|
||||
},
|
||||
[setgalleryImages]
|
||||
);
|
||||
|
||||
const messageStyle = { textAlign: "center", padding: "1rem" };
|
||||
|
||||
if (!jobId) {
|
||||
return (
|
||||
<div aria-label="media gallery unavailable" style={{ position: "relative", minHeight: 80 }}>
|
||||
<div style={messageStyle}>No job selected.</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="clearfix">
|
||||
<Gallery
|
||||
images={galleryImages}
|
||||
backdropClosesModal={true}
|
||||
onSelect={(index) => {
|
||||
setgalleryImages(galleryImages.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g)));
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="clearfix"
|
||||
style={{ position: "relative", minHeight: 80 }}
|
||||
data-jobid={jobId}
|
||||
aria-label={`media gallery for job ${jobId}`}
|
||||
>
|
||||
{isLoading && galleryImages.length === 0 && (
|
||||
<div className="local-gallery-loading" style={messageStyle} role="status" aria-live="polite">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
)}
|
||||
{galleryImages.length > 0 && (
|
||||
<LocalMediaGrid images={galleryImages} minColumns={4} context={context} onToggle={handleToggle} />
|
||||
)}
|
||||
{galleryImages.length > 0 && (
|
||||
<div style={{ fontSize: 10, color: "#888", marginTop: 4 }} aria-live="off">
|
||||
{`${t("general.labels.media")}: ${galleryImages.length}`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
|
||||
import { EditFilled, SyncOutlined } from "@ant-design/icons";
|
||||
import { Alert, Button, Card, Col, Row, Space } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Gallery } from "react-grid-gallery";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -14,6 +13,7 @@ import JobsDocumentsLocalDeleteButton from "./jobs-documents-local-gallery.delet
|
||||
import JobsLocalGalleryDownloadButton from "./jobs-documents-local-gallery.download";
|
||||
import JobsDocumentsLocalGalleryReassign from "./jobs-documents-local-gallery.reassign.component";
|
||||
import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-gallery.selectall.component";
|
||||
import LocalMediaGrid from "./local-media-grid.component";
|
||||
|
||||
import Lightbox from "react-image-lightbox";
|
||||
import "react-image-lightbox/style.css";
|
||||
@@ -132,54 +132,34 @@ export function JobsDocumentsLocalGallery({
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Card title={t("jobs.labels.documents-images")}>
|
||||
<Gallery
|
||||
{optimized && (
|
||||
<Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
|
||||
)}
|
||||
<LocalMediaGrid
|
||||
images={jobMedia.images}
|
||||
onSelect={(index, image) => {
|
||||
toggleMediaSelected({ jobid: job.id, filename: image.filename });
|
||||
}}
|
||||
{...(optimized && {
|
||||
customControls: [
|
||||
<Alert
|
||||
key="optimizedImageALert"
|
||||
style={{ margin: "4px" }}
|
||||
message={t("documents.labels.optimizedimage")}
|
||||
type="success"
|
||||
/>
|
||||
]
|
||||
})}
|
||||
onClick={(index) => {
|
||||
setModalState({ open: true, index: index });
|
||||
// const media = allMedia[job.id].find(
|
||||
// (m) => m.optimized === item.src
|
||||
// );
|
||||
|
||||
// window.open(
|
||||
// media ? media.fullsize : item.fullsize,
|
||||
// "_blank",
|
||||
// "toolbar=0,location=0,menubar=0"
|
||||
// );
|
||||
}}
|
||||
onToggle={(index) => {
|
||||
toggleMediaSelected({ jobid: job.id, filename: jobMedia.images[index].filename });
|
||||
}}
|
||||
minColumns={4}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Card title={t("jobs.labels.documents-other")}>
|
||||
<Gallery
|
||||
<LocalMediaGrid
|
||||
images={jobMedia.other}
|
||||
thumbnailStyle={() => {
|
||||
return {
|
||||
backgroundImage: <FileExcelFilled />,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
cursor: "pointer"
|
||||
};
|
||||
}}
|
||||
onClick={(index) => {
|
||||
window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
|
||||
}}
|
||||
onSelect={(index, image) => {
|
||||
toggleMediaSelected({ jobid: job.id, filename: image.filename });
|
||||
onToggle={(index) => {
|
||||
toggleMediaSelected({ jobid: job.id, filename: jobMedia.other[index].filename });
|
||||
}}
|
||||
minColumns={4}
|
||||
expandHeight={true}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
@@ -6,15 +6,18 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
* Props:
|
||||
* - images: Array<{ src, fullsize, filename?, isSelected? }>
|
||||
* - onToggle(index)
|
||||
* - onClick(index) optional for viewing
|
||||
*/
|
||||
export function LocalMediaGrid({
|
||||
images,
|
||||
onToggle,
|
||||
onClick,
|
||||
thumbSize = 100,
|
||||
gap = 8,
|
||||
minColumns = 3,
|
||||
maxColumns = 12,
|
||||
context = "default"
|
||||
context = "default",
|
||||
expandHeight = false
|
||||
}) {
|
||||
const containerRef = useRef(null);
|
||||
const [cols, setCols] = useState(() => {
|
||||
@@ -114,8 +117,7 @@ export function LocalMediaGrid({
|
||||
display: "grid",
|
||||
gridTemplateColumns,
|
||||
gap,
|
||||
maxHeight: 420,
|
||||
overflowY: "auto",
|
||||
...(expandHeight ? {} : { maxHeight: 420, overflowY: "auto" }),
|
||||
overflowX: "hidden",
|
||||
padding: 4,
|
||||
justifyContent: justifyMode,
|
||||
@@ -131,7 +133,7 @@ export function LocalMediaGrid({
|
||||
role="listitem"
|
||||
tabIndex={0}
|
||||
aria-label={img.filename || `image ${idx + 1}`}
|
||||
onClick={() => onToggle(idx)}
|
||||
onClick={() => onClick ? onClick(idx) : onToggle(idx)}
|
||||
onKeyDown={(e) => handleKeyDown(e, idx)}
|
||||
style={{
|
||||
position: "relative",
|
||||
@@ -197,6 +199,23 @@ export function LocalMediaGrid({
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{onClick && (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={img.isSelected}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggle(idx);
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
right: 5,
|
||||
zIndex: 2
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{/* No placeholders needed; layout uses auto-fit for non-chat or fixed columns for chat */}
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
|
||||
import { Button, DatePicker, Form, Input, InputNumber, Radio, Select, Space, Switch } from "antd";
|
||||
import { Button, Form, Input, InputNumber, Select, Space, Switch } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import DatePickerRanges from "../../utils/DatePickerRanges";
|
||||
import InstanceRenderManager from "../../utils/instanceRenderMgr";
|
||||
import FeatureWrapper, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
import FormItemEmail from "../form-items-formatted/email-form-item.component";
|
||||
@@ -26,14 +23,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoGeneral);
|
||||
export function ShopInfoGeneral({ form, bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const {
|
||||
treatments: { ClosingPeriod, ADPPayroll }
|
||||
} = useTreatmentsWithConfig({
|
||||
attributes: {},
|
||||
names: ["ClosingPeriod", "ADPPayroll"],
|
||||
splitKey: bodyshop?.imexshopid
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow header={t("bodyshop.labels.businessinformation")} id="businessinformation">
|
||||
@@ -143,299 +132,6 @@ export function ShopInfoGeneral({ form, bodyshop }) {
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
|
||||
{[
|
||||
...(HasFeatureAccess({ featureName: "export", bodyshop })
|
||||
? [
|
||||
<Form.Item
|
||||
key="qbo"
|
||||
label={t("bodyshop.labels.qbo")}
|
||||
valuePropName="checked"
|
||||
name={["accountingconfig", "qbo"]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>,
|
||||
InstanceRenderManager({
|
||||
imex: (
|
||||
<Form.Item key="qbo_usa_wrapper" shouldUpdate noStyle>
|
||||
{() => (
|
||||
<Form.Item
|
||||
label={t("bodyshop.labels.qbo_usa")}
|
||||
shouldUpdate
|
||||
valuePropName="checked"
|
||||
name={["accountingconfig", "qbo_usa"]}
|
||||
>
|
||||
<Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form.Item>
|
||||
)
|
||||
}),
|
||||
<Form.Item
|
||||
key="qbo_departmentid"
|
||||
label={t("bodyshop.labels.qbo_departmentid")}
|
||||
name={["accountingconfig", "qbo_departmentid"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="accountingtiers"
|
||||
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 key="twotierpref_wrapper" 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>,
|
||||
<Form.Item
|
||||
key="printlater"
|
||||
label={t("bodyshop.labels.printlater")}
|
||||
valuePropName="checked"
|
||||
name={["accountingconfig", "printlater"]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="emaillater"
|
||||
label={t("bodyshop.labels.emaillater")}
|
||||
valuePropName="checked"
|
||||
name={["accountingconfig", "emaillater"]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
]
|
||||
: []),
|
||||
<Form.Item
|
||||
key="inhousevendorid"
|
||||
label={t("bodyshop.fields.inhousevendorid")}
|
||||
name={"inhousevendorid"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="default_adjustment_rate"
|
||||
label={t("bodyshop.fields.default_adjustment_rate")}
|
||||
name={"default_adjustment_rate"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} />
|
||||
</Form.Item>,
|
||||
InstanceRenderManager({
|
||||
imex: (
|
||||
<Form.Item key="federal_tax_id" label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)
|
||||
}),
|
||||
<Form.Item key="state_tax_id" label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
...(HasFeatureAccess({ featureName: "bills", bodyshop })
|
||||
? [
|
||||
InstanceRenderManager({
|
||||
imex: (
|
||||
<Form.Item
|
||||
key="invoice_federal_tax_rate"
|
||||
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
|
||||
key="invoice_state_tax_rate"
|
||||
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
|
||||
key="invoice_local_tax_rate"
|
||||
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
|
||||
key="md_payment_types"
|
||||
name={["md_payment_types"]}
|
||||
label={t("bodyshop.fields.md_payment_types")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="md_categories"
|
||||
name={["md_categories"]}
|
||||
label={t("bodyshop.fields.md_categories")}
|
||||
rules={[
|
||||
{
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>,
|
||||
...(HasFeatureAccess({ featureName: "export", bodyshop })
|
||||
? [
|
||||
<Form.Item
|
||||
key="ReceivableCustomField1"
|
||||
name={["accountingconfig", "ReceivableCustomField1"]}
|
||||
label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
|
||||
>
|
||||
{ReceivableCustomFieldSelect}
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="ReceivableCustomField2"
|
||||
name={["accountingconfig", "ReceivableCustomField2"]}
|
||||
label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
|
||||
>
|
||||
{ReceivableCustomFieldSelect}
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="ReceivableCustomField3"
|
||||
name={["accountingconfig", "ReceivableCustomField3"]}
|
||||
label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
|
||||
>
|
||||
{ReceivableCustomFieldSelect}
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="md_classes"
|
||||
name={["md_classes"]}
|
||||
label={t("bodyshop.fields.md_classes")}
|
||||
rules={[
|
||||
({ getFieldValue }) => {
|
||||
return {
|
||||
required: getFieldValue("enforce_class"),
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
};
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="enforce_class"
|
||||
name={["enforce_class"]}
|
||||
label={t("bodyshop.fields.enforce_class")}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>,
|
||||
...(ClosingPeriod.treatment === "on"
|
||||
? [
|
||||
<Form.Item
|
||||
key="ClosingPeriod"
|
||||
name={["accountingconfig", "ClosingPeriod"]}
|
||||
label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
|
||||
>
|
||||
<DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
|
||||
</Form.Item>
|
||||
]
|
||||
: []),
|
||||
...(ADPPayroll.treatment === "on"
|
||||
? [
|
||||
<Form.Item
|
||||
key="companyCode"
|
||||
name={["accountingconfig", "companyCode"]}
|
||||
label={t("bodyshop.fields.companycode")}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
]
|
||||
: []),
|
||||
...(ADPPayroll.treatment === "on"
|
||||
? [
|
||||
<Form.Item
|
||||
key="batchID"
|
||||
name={["accountingconfig", "batchID"]}
|
||||
label={t("bodyshop.fields.batchid")}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
]
|
||||
: [])
|
||||
]
|
||||
: []),
|
||||
<Form.Item
|
||||
key="accumulatePayableLines"
|
||||
name={["accountingconfig", "accumulatePayableLines"]}
|
||||
label={t("bodyshop.fields.accumulatePayableLines")}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
]}
|
||||
</LayoutFormRow>
|
||||
<FeatureWrapper featureName="scoreboard" noauth={() => null}>
|
||||
<LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
|
||||
<Form.Item
|
||||
@@ -499,6 +195,19 @@ export function ShopInfoGeneral({ form, bodyshop }) {
|
||||
</FeatureWrapper>
|
||||
<LayoutFormRow header={t("bodyshop.labels.systemsettings")} id="systemsettings">
|
||||
{[
|
||||
<Form.Item
|
||||
key="md_categories"
|
||||
name={["md_categories"]}
|
||||
label={t("bodyshop.fields.md_categories")}
|
||||
rules={[
|
||||
{
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="md_referral_sources"
|
||||
name={["md_referral_sources"]}
|
||||
@@ -1592,11 +1301,3 @@ export function ShopInfoGeneral({ form, bodyshop }) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ReceivableCustomFieldSelect = (
|
||||
<Select allowClear>
|
||||
<Select.Option value="v_vin">VIN</Select.Option>
|
||||
<Select.Option value="clm_no">Claim No.</Select.Option>
|
||||
<Select.Option value="ded_amt">Deductible Amount</Select.Option>
|
||||
</Select>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
|
||||
import { Button, Form, Input, InputNumber, Select, Space, Switch } from "antd";
|
||||
import { Button, DatePicker, Form, Input, InputNumber, Radio, Select, Space, Switch } from "antd";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
@@ -15,6 +15,7 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
|
||||
import ShopInfoResponsibilitycentersTaxesComponent from "./shop-info.responsibilitycenters.taxes.component";
|
||||
import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
|
||||
import DatePickerRanges from "../../utils/DatePickerRanges";
|
||||
|
||||
const SelectorDiv = styled.div`
|
||||
.ant-form-item .ant-select {
|
||||
@@ -35,10 +36,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
|
||||
const hasDMSKey = bodyshopHasDmsKey(bodyshop);
|
||||
|
||||
const {
|
||||
treatments: { Qb_Multi_Ar, DmsAp }
|
||||
treatments: { ClosingPeriod, ADPPayroll, Qb_Multi_Ar, DmsAp }
|
||||
} = useTreatmentsWithConfig({
|
||||
attributes: {},
|
||||
names: ["Qb_Multi_Ar", "DmsAp"],
|
||||
names: ["ClosingPeriod", "ADPPayroll", "Qb_Multi_Ar", "DmsAp"],
|
||||
splitKey: bodyshop?.imexshopid
|
||||
});
|
||||
|
||||
@@ -64,6 +65,14 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
|
||||
setProfitOptions(getCenterNames(["md_responsibility_centers", "profits"]));
|
||||
};
|
||||
|
||||
const ReceivableCustomFieldSelect = (
|
||||
<Select allowClear>
|
||||
<Select.Option value="v_vin">VIN</Select.Option>
|
||||
<Select.Option value="clm_no">Claim No.</Select.Option>
|
||||
<Select.Option value="ded_amt">Deductible Amount</Select.Option>
|
||||
</Select>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<RbacWrapper action="shop:responsibilitycenter">
|
||||
@@ -287,6 +296,286 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
|
||||
</>
|
||||
)}
|
||||
|
||||
<LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
|
||||
{[
|
||||
...(HasFeatureAccess({ featureName: "export", bodyshop })
|
||||
? [
|
||||
<Form.Item
|
||||
key="qbo"
|
||||
label={t("bodyshop.labels.qbo")}
|
||||
valuePropName="checked"
|
||||
name={["accountingconfig", "qbo"]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>,
|
||||
InstanceRenderManager({
|
||||
imex: (
|
||||
<Form.Item key="qbo_usa_wrapper" shouldUpdate noStyle>
|
||||
{() => (
|
||||
<Form.Item
|
||||
label={t("bodyshop.labels.qbo_usa")}
|
||||
shouldUpdate
|
||||
valuePropName="checked"
|
||||
name={["accountingconfig", "qbo_usa"]}
|
||||
>
|
||||
<Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form.Item>
|
||||
)
|
||||
}),
|
||||
<Form.Item
|
||||
key="qbo_departmentid"
|
||||
label={t("bodyshop.labels.qbo_departmentid")}
|
||||
name={["accountingconfig", "qbo_departmentid"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="accountingtiers"
|
||||
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 key="twotierpref_wrapper" 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>,
|
||||
<Form.Item
|
||||
key="printlater"
|
||||
label={t("bodyshop.labels.printlater")}
|
||||
valuePropName="checked"
|
||||
name={["accountingconfig", "printlater"]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="emaillater"
|
||||
label={t("bodyshop.labels.emaillater")}
|
||||
valuePropName="checked"
|
||||
name={["accountingconfig", "emaillater"]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
]
|
||||
: []),
|
||||
<Form.Item
|
||||
key="inhousevendorid"
|
||||
label={t("bodyshop.fields.inhousevendorid")}
|
||||
name={"inhousevendorid"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="default_adjustment_rate"
|
||||
label={t("bodyshop.fields.default_adjustment_rate")}
|
||||
name={"default_adjustment_rate"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} />
|
||||
</Form.Item>,
|
||||
InstanceRenderManager({
|
||||
imex: (
|
||||
<Form.Item key="federal_tax_id" label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)
|
||||
}),
|
||||
<Form.Item key="state_tax_id" label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
...(HasFeatureAccess({ featureName: "bills", bodyshop })
|
||||
? [
|
||||
InstanceRenderManager({
|
||||
imex: (
|
||||
<Form.Item
|
||||
key="invoice_federal_tax_rate"
|
||||
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
|
||||
key="invoice_state_tax_rate"
|
||||
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
|
||||
key="invoice_local_tax_rate"
|
||||
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
|
||||
key="md_payment_types"
|
||||
name={["md_payment_types"]}
|
||||
label={t("bodyshop.fields.md_payment_types")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>,
|
||||
...(HasFeatureAccess({ featureName: "export", bodyshop })
|
||||
? [
|
||||
<Form.Item
|
||||
key="ReceivableCustomField1"
|
||||
name={["accountingconfig", "ReceivableCustomField1"]}
|
||||
label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
|
||||
>
|
||||
{ReceivableCustomFieldSelect}
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="ReceivableCustomField2"
|
||||
name={["accountingconfig", "ReceivableCustomField2"]}
|
||||
label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
|
||||
>
|
||||
{ReceivableCustomFieldSelect}
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="ReceivableCustomField3"
|
||||
name={["accountingconfig", "ReceivableCustomField3"]}
|
||||
label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
|
||||
>
|
||||
{ReceivableCustomFieldSelect}
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="md_classes"
|
||||
name={["md_classes"]}
|
||||
label={t("bodyshop.fields.md_classes")}
|
||||
rules={[
|
||||
({ getFieldValue }) => {
|
||||
return {
|
||||
required: getFieldValue("enforce_class"),
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
};
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key="enforce_class"
|
||||
name={["enforce_class"]}
|
||||
label={t("bodyshop.fields.enforce_class")}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>,
|
||||
...(ClosingPeriod.treatment === "on"
|
||||
? [
|
||||
<Form.Item
|
||||
key="ClosingPeriod"
|
||||
name={["accountingconfig", "ClosingPeriod"]}
|
||||
label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
|
||||
>
|
||||
<DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
|
||||
</Form.Item>
|
||||
]
|
||||
: []),
|
||||
...(ADPPayroll.treatment === "on"
|
||||
? [
|
||||
<Form.Item
|
||||
key="companyCode"
|
||||
name={["accountingconfig", "companyCode"]}
|
||||
label={t("bodyshop.fields.companycode")}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
]
|
||||
: []),
|
||||
...(ADPPayroll.treatment === "on"
|
||||
? [
|
||||
<Form.Item
|
||||
key="batchID"
|
||||
name={["accountingconfig", "batchID"]}
|
||||
label={t("bodyshop.fields.batchid")}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
]
|
||||
: [])
|
||||
]
|
||||
: []),
|
||||
<Form.Item
|
||||
key="accumulatePayableLines"
|
||||
name={["accountingconfig", "accumulatePayableLines"]}
|
||||
label={t("bodyshop.fields.accumulatePayableLines")}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
]}
|
||||
</LayoutFormRow>
|
||||
{HasFeatureAccess({ featureName: "export", bodyshop }) && (
|
||||
<>
|
||||
<LayoutFormRow header={t("bodyshop.labels.responsibilitycenters.costs")} id="costs">
|
||||
|
||||
@@ -283,6 +283,11 @@ async function InsertBill(oauthClient, qbo_realmId, req, bill, vendor, bodyshop)
|
||||
VendorRef: {
|
||||
value: vendor.Id
|
||||
},
|
||||
...(vendor.TermRef && {
|
||||
SalesTermRef: {
|
||||
value: vendor.TermRef.value
|
||||
}
|
||||
}),
|
||||
TxnDate: moment(bill.date)
|
||||
//.tz(bill.job.bodyshop.timezone)
|
||||
.format("YYYY-MM-DD"),
|
||||
|
||||
Reference in New Issue
Block a user