admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-3020 IO-3036 Extend blur wrapper, add lock wrapper to components throughout the system. Many placeholders still left for upsell components.

Browse Source
This commit is contained in:
Patrick Fic
2024-12-04 11:51:54 -08:00
parent c85a5eb208
commit 6b3fb00cc0
47 changed files with 781 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project version="1.2" be_version="2.7.1">
<babeledit_project be_version="2.7.1" version="1.2">
<!--
BabelEdit project file
@@ -16353,6 +16353,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>dragtoupload</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>newjobid</name>
<definition_loaded>false</definition_loaded>

25
client/src/components/bills-list-table/bills-list-table.component.jsx
View File

@@ -15,6 +15,8 @@ import BillDeleteButton from "../bill-delete-button/bill-delete-button.component
import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
import { FaTasks } from "react-icons/fa";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
const mapStateToProps = createStructuredSelector({
jobRO: selectJobReadOnly,
@@ -170,6 +172,8 @@ export function BillsListTableComponent({
)
: [];
const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
return (
<Card
title={t("bills.labels.bills")}
@@ -181,6 +185,7 @@ export function BillsListTableComponent({
{job && job.converted ? (
<>
<Button
disabled={!hasBillsAccess}
onClick={() => {
setBillEnterContext({
actions: { refetch: billsQuery.refetch },
@@ -190,9 +195,10 @@ export function BillsListTableComponent({
});
}}
>
{t("jobs.actions.postbills")}
<LockerWrapperComponent featureName="bills">{t("jobs.actions.postbills")}</LockerWrapperComponent>
</Button>
<Button
disabled={!hasBillsAccess}
onClick={() => {
setReconciliationContext({
actions: { refetch: billsQuery.refetch },
@@ -203,7 +209,7 @@ export function BillsListTableComponent({
});
}}
>
{t("jobs.actions.reconcile")}
<LockerWrapperComponent featureName="bills"> {t("jobs.actions.reconcile")}</LockerWrapperComponent>
</Button>
</>
) : null}
@@ -211,6 +217,7 @@ export function BillsListTableComponent({
<Input.Search
placeholder={t("general.labels.search")}
value={searchText}
disabled={!hasBillsAccess}
onChange={(e) => {
e.preventDefault();
setSearchText(e.target.value);
@@ -226,8 +233,20 @@ export function BillsListTableComponent({
}}
columns={columns}
rowKey="id"
dataSource={filteredBills}
dataSource={hasBillsAccess ? filteredBills : []}
onChange={handleTableChange}
locale={{
...(!hasBillsAccess && {
emptyText: (
<div>
Upsell
{
//TODO:Upsell
}
</div>
)
})
}}
/>
</Card>
);

12
client/src/components/documents-local-upload/documents-local-upload.component.jsx
View File

@@ -6,6 +6,9 @@ import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { handleUpload } from "./documents-local-upload.utility";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
import { useTranslation } from "react-i18next";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
@@ -23,17 +26,20 @@ export function DocumentsLocalUploadComponent({
allowAllTypes
}) {
const [fileList, setFileList] = useState([]);
const { t } = useTranslation();
const handleDone = (uid) => {
setTimeout(() => {
setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
}, 2000);
};
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
return (
<Upload.Dragger
multiple={true}
fileList={fileList}
disabled={!hasMediaAccess}
onChange={(f) => {
if (f.event && f.event.percent === 100) handleDone(f.file.uid);
@@ -59,7 +65,9 @@ export function DocumentsLocalUploadComponent({
<p className="ant-upload-drag-icon">
<UploadOutlined />
</p>
<p className="ant-upload-text">Click or drag files to this area to upload.</p>
<p className="ant-upload-text">
<LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
</p>
</>
)}
</Upload.Dragger>

8
client/src/components/documents-upload/documents-upload.component.jsx
View File

@@ -7,6 +7,8 @@ import { createStructuredSelector } from "reselect";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import formatBytes from "../../utils/formatbytes";
import { handleUpload } from "./documents-upload.utility";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
@@ -45,11 +47,13 @@ export function DocumentsUploadComponent({
setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
}, 2000);
};
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
return (
<Upload.Dragger
multiple={true}
fileList={fileList}
disabled={!hasMediaAccess}
onChange={(f) => {
if (f.event && f.event.percent === 100) handleDone(f.file.uid);
setFileList(f.fileList);
@@ -89,7 +93,9 @@ export function DocumentsUploadComponent({
<p className="ant-upload-drag-icon">
<UploadOutlined />
</p>
<p className="ant-upload-text">Click or drag files to this area to upload.</p>
<p className="ant-upload-text">
<LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
</p>
{!ignoreSizeLimit && (
<Space wrap className="ant-upload-text">
<Progress type="dashboard" percent={pct} size="small" />

24
client/src/components/feature-wrapper/blur-wrapper.component.jsx
View File

@@ -13,7 +13,8 @@ const blurringProps = {
webkitUserSelect: "none",
msUserSelect: "none",
mozUserSelect: "none",
userSelect: "none"
userSelect: "none",
pointerEvents: "none"
};
export function BlurWrapper({
@@ -24,11 +25,26 @@ export function BlurWrapper({
overrideValue = true,
overrideValueFunction,
children,
debug,
bypass
}) {
if (import.meta.env.DEV) {
if (!ValidateFeatureName(featureName)) console.trace("*** INVALID FEATURE NAME", featureName);
}
if (debug) {
console.trace("*** DEBUG MODE", featureName);
console.log("*** HAS FEATURE ACCESS?", featureName, HasFeatureAccess({ featureName, bodyshop }));
console.log(
"***LOG ~ All Blur Wrapper Props ",
styleProp,
valueProp,
overrideValue,
overrideValueFunction,
children,
debug,
bypass
);
}
if (bypass) {
console.trace("*** BYPASS USED", featureName);
@@ -68,12 +84,13 @@ export function BlurWrapper({
export default connect(mapStateToProps, null)(BlurWrapper);
function RandomDinero() {
return Dinero({ amount: Math.round(Math.exp(Math.random() * 100, 2)) }).toFormat();
return Dinero({ amount: Math.round(Math.exp(Math.random() * 10, 2)) }).toFormat();
}
const featureNameList = [
"mobile",
"allAccess",
"audit",
"timetickets",
"payments",
"partsorders",
@@ -86,7 +103,8 @@ const featureNameList = [
"scoreboard",
"checklist",
"smartscheduling",
"roguard"
"roguard",
"dashboard"
];
function ValidateFeatureName(featureName) {

14
client/src/components/feature-wrapper/feature-wrapper.component.jsx
View File

@@ -11,9 +11,21 @@ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
function FeatureWrapper({ bodyshop, featureName, noauth, blurContent = false, children, ...restProps }) {
function FeatureWrapper({
bodyshop,
featureName,
noauth,
blurContent = false,
children,
upsellComponent,
...restProps
}) {
const { t } = useTranslation();
if (upsellComponent) {
console.error("Upsell component passed in. This is not yet implemented.");
}
if (HasFeatureAccess({ featureName, bodyshop })) return children;
if (blurContent) {

6
client/src/components/header/header.component.jsx
View File

@@ -593,7 +593,11 @@ function Header({
key: "dashboard",
id: "header-dashboard",
icon: <DashboardFilled />,
label: <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
label: (
<Link to="/manage/dashboard">
<LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
</Link>
)
},
{
key: "reportcenter",

90
client/src/components/job-audit-trail/job-audit-trail.component.jsx
View File

@@ -8,6 +8,7 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser
@@ -41,7 +42,12 @@ export function JobAuditTrail({ currentUser, jobId }) {
{
title: t("audit.fields.operation"),
dataIndex: "operation",
key: "operation"
key: "operation",
render: (text, record) => (
<BlurWrapperComponent featureName="audit">
<div>{text}</div>
</BlurWrapperComponent>
)
}
];
const emailColumns = [
@@ -64,52 +70,78 @@ export function JobAuditTrail({ currentUser, jobId }) {
dataIndex: "to",
key: "to",
render: (text, record) => record.to && record.to.map((email, idx) => <Tag key={idx}>{email}</Tag>)
render: (text, record) =>
record.to &&
record.to.map((email, idx) => (
<Tag key={idx}>
<BlurWrapperComponent featureName="audit">
<div>{email}</div>
</BlurWrapperComponent>
</Tag>
))
},
{
title: t("audit.fields.cc"),
dataIndex: "cc",
key: "cc",
render: (text, record) => record.cc && record.cc.map((email, idx) => <Tag key={idx}>{email}</Tag>)
render: (text, record) =>
record.cc &&
record.cc.map((email, idx) => (
<Tag key={idx}>
<BlurWrapperComponent featureName="audit">
<div>{email}</div>
</BlurWrapperComponent>
</Tag>
))
},
{
title: t("audit.fields.subject"),
dataIndex: "subject",
key: "subject"
key: "subject",
render: (text, record) => (
<BlurWrapperComponent featureName="audit">
<div>{text}</div>
</BlurWrapperComponent>
)
},
{
title: t("audit.fields.status"),
dataIndex: "status",
key: "status"
key: "status",
render: (text, record) => (
<BlurWrapperComponent featureName="audit">
<div>{text}</div>
</BlurWrapperComponent>
)
},
...(currentUser?.email.includes("@imex.")
? [
{
title: t("audit.fields.contents"),
dataIndex: "contents",
key: "contents",
width: "10%",
render: (text, record) => (
<Button
onClick={() => {
var win = window.open(
"",
"Title",
"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
);
win.document.body.innerHTML = record.contents;
}}
>
Preview
</Button>
)
}
]
: [])
{
title: t("audit.fields.contents"),
dataIndex: "contents",
key: "contents",
width: "10%",
render: (text, record) => (
<Button
onClick={() => {
var win = window.open(
"",
"Title",
"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
);
win.document.body.innerHTML = record.contents;
}}
>
Preview
</Button>
)
}
];
return (
<Row gutter={[16, 16]}>
{
//TODO:Upsell
}
<Col span={24}>
<Card
title={t("jobs.labels.audit")}

119
client/src/components/job-bills-total/job-bills-total.component.jsx
View File

@@ -147,7 +147,9 @@ export default function JobBillsTotalComponent({
/>
}
>
<Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
<BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
<Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
</BlurWrapperComponent>
</Tooltip>
<Typography.Title>=</Typography.Title>
<Tooltip
@@ -159,13 +161,15 @@ export default function JobBillsTotalComponent({
/>
}
>
<Statistic
title={t("bills.labels.discrepancy")}
valueStyle={{
color: discrepancy.getAmount() === 0 ? "green" : "red"
}}
value={discrepancy.toFormat()}
/>
<BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
<Statistic
title={t("bills.labels.discrepancy")}
valueStyle={{
color: discrepancy.getAmount() === 0 ? "green" : "red"
}}
value={discrepancy.toFormat()}
/>
</BlurWrapperComponent>
</Tooltip>
<Typography.Title>+</Typography.Title>
<Tooltip
@@ -177,7 +181,9 @@ export default function JobBillsTotalComponent({
/>
}
>
<Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
<BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
<Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
</BlurWrapperComponent>
</Tooltip>
<Typography.Title>=</Typography.Title>
<Tooltip
@@ -189,13 +195,15 @@ export default function JobBillsTotalComponent({
/>
}
>
<Statistic
title={t("bills.labels.discrepancy")}
valueStyle={{
color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
}}
value={discrepWithLbrAdj.toFormat()}
/>
<BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
<Statistic
title={t("bills.labels.discrepancy")}
valueStyle={{
color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
}}
value={discrepWithLbrAdj.toFormat()}
/>
</BlurWrapperComponent>
</Tooltip>
<Typography.Title>+</Typography.Title>
<Tooltip
@@ -207,7 +215,9 @@ export default function JobBillsTotalComponent({
/>
}
>
<Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
<BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
<Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
</BlurWrapperComponent>
</Tooltip>
<Typography.Title>=</Typography.Title>
<Tooltip
@@ -219,16 +229,20 @@ export default function JobBillsTotalComponent({
/>
}
>
<Statistic
title={t("bills.labels.discrepancy")}
valueStyle={{
color: discrepWithCms.getAmount() === 0 ? "green" : "red"
}}
value={discrepWithCms.toFormat()}
/>
<BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
<Statistic
title={t("bills.labels.discrepancy")}
valueStyle={{
color: discrepWithCms.getAmount() === 0 ? "green" : "red"
}}
value={discrepWithCms.toFormat()}
/>
</BlurWrapperComponent>
</Tooltip>
</Space>
{
//TODO:Upsell
}
{showWarning &&
(discrepWithCms.getAmount() !== 0 ||
discrepWithLbrAdj.getAmount() !== 0 ||
@@ -253,7 +267,9 @@ export default function JobBillsTotalComponent({
/>
}
>
<Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
<BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
<Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
</BlurWrapperComponent>
</Tooltip>
<Tooltip
title={
@@ -264,17 +280,19 @@ export default function JobBillsTotalComponent({
/>
}
>
<Statistic
title={t("bills.labels.calculatedcreditsnotreceived")}
valueStyle={{
color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
}}
value={
calculatedCreditsNotReceived.getAmount() >= 0
? calculatedCreditsNotReceived.toFormat()
: Dinero().toFormat()
}
/>
<BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
<Statistic
title={t("bills.labels.calculatedcreditsnotreceived")}
valueStyle={{
color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
}}
value={
calculatedCreditsNotReceived.getAmount() >= 0
? calculatedCreditsNotReceived.toFormat()
: Dinero().toFormat()
}
/>
</BlurWrapperComponent>
</Tooltip>
<Tooltip
title={
@@ -285,22 +303,27 @@ export default function JobBillsTotalComponent({
/>
}
>
<Statistic
title={t("bills.labels.creditsnotreceived")}
valueStyle={{
color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
}}
value={
totalReturnsMarkedNotReceived.getAmount() >= 0
? totalReturnsMarkedNotReceived.toFormat()
: Dinero().toFormat()
}
/>
<BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
<Statistic
title={t("bills.labels.creditsnotreceived")}
valueStyle={{
color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
}}
value={
totalReturnsMarkedNotReceived.getAmount() >= 0
? totalReturnsMarkedNotReceived.toFormat()
: Dinero().toFormat()
}
/>
</BlurWrapperComponent>
</Tooltip>
</Space>
{showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
<Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_credit_memos")} />
)}
{
//TODO:Upsell
}
</Card>
</Col>
</Row>

28
client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx
View File

@@ -1,19 +1,31 @@
import { useLazyQuery, useMutation } from "@apollo/client";
import { CheckCircleOutlined } from "@ant-design/icons";
import { useLazyQuery, useMutation } from "@apollo/client";
import { Button, Card, Form, InputNumber, notification, Popover, Space } from "antd";
import dayjs from "../../utils/day";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
INSERT_SCOREBOARD_ENTRY,
QUERY_SCOREBOARD_ENTRY,
UPDATE_SCOREBOARD_ENTRY
} from "../../graphql/scoreboard.queries";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import { selectBodyshop } from "../../redux/user/user.selectors.js";
import dayjs from "../../utils/day";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component.jsx";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component.jsx";
export default function ScoreboardAddButton({ job, disabled, ...otherBtnProps }) {
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function ScoreboardAddButton({ bodyshop, job, disabled, ...otherBtnProps }) {
const { t } = useTranslation();
const [insertScoreboardEntry] = useMutation(INSERT_SCOREBOARD_ENTRY);
const [updateScoreboardEntry] = useMutation(UPDATE_SCOREBOARD_ENTRY);
@@ -162,12 +174,14 @@ export default function ScoreboardAddButton({ job, disabled, ...otherBtnProps })
setVisibility(true);
setLoading(false);
};
const hasScoreboardAccess = HasFeatureAccess({ bodyshop, featureName: "scoreboard" });
return (
<Popover content={overlay} open={visibility} placement="bottom">
<Button loading={loading} disabled={disabled} onClick={handleClick} {...otherBtnProps}>
{t("jobs.actions.addtoscoreboard")}
<Button loading={loading} disabled={disabled || !hasScoreboardAccess} onClick={handleClick} {...otherBtnProps}>
<LockWrapperComponent featureName="scoreboard">{t("jobs.actions.addtoscoreboard")}</LockWrapperComponent>
</Button>
</Popover>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardAddButton);

8
client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
View File

@@ -959,7 +959,7 @@ export function JobsDetailHeaderActions({
menuItems.push({
key: "exportcustdata",
id: "job-actions-exportcustdata",
disabled: !(job.converted && HasFeatureAccess({ bodyshop, featureName: "export", debug: true })),
disabled: !(job.converted && HasFeatureAccess({ bodyshop, featureName: "export" })),
label: <LockerWrapperComponent featureName="export">{t("jobs.actions.exportcustdata")}</LockerWrapperComponent>,
onClick: handleExportCustData
});
@@ -968,21 +968,21 @@ export function JobsDetailHeaderActions({
{
key: "email",
id: "job-actions-email",
disabled: !(job.ownr_ea && HasFeatureAccess({ bodyshop, featureName: "csi", debug: true })),
disabled: !(job.ownr_ea && HasFeatureAccess({ bodyshop, featureName: "csi" })),
label: <LockerWrapperComponent featureName="checklist">{t("general.labels.email")}</LockerWrapperComponent>,
onClick: handleCreateCsi
},
{
key: "text",
id: "job-actions-text",
disabled: !(job.ownr_ph1 && HasFeatureAccess({ bodyshop, featureName: "csi", debug: true })),
disabled: !(job.ownr_ph1 && HasFeatureAccess({ bodyshop, featureName: "csi" })),
label: <LockerWrapperComponent featureName="checklist">{t("general.labels.text")}</LockerWrapperComponent>,
onClick: handleCreateCsi
},
{
key: "generate",
id: "job-actions-generate",
disabled: job.csiinvites?.length > 0 || !HasFeatureAccess({ bodyshop, featureName: "csi", debug: true }),
disabled: job.csiinvites?.length > 0 || !HasFeatureAccess({ bodyshop, featureName: "csi" }),
label: <LockerWrapperComponent featureName="checklist">{t("jobs.actions.generatecsi")}</LockerWrapperComponent>,
onClick: handleCreateCsi
}

26
client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx
View File

@@ -22,16 +22,14 @@ export default function JobsDetailPliComponent({
{billsQuery.error ? <AlertComponent message={billsQuery.error.message} type="error" /> : null}
<BillDetailEditcontainer />
<Row gutter={[16, 16]}>
<FeatureWrapperComponent featureName="bills" noauth={() => null}>
<Col span={24}>
<JobBillsTotal
bills={billsQuery.data ? billsQuery.data.bills : []}
partsOrders={billsQuery.data ? billsQuery.data.parts_orders : []}
loading={billsQuery.loading}
jobTotals={job.job_totals}
/>
</Col>
</FeatureWrapperComponent>
<Col span={24}>
<JobBillsTotal
bills={billsQuery.data ? billsQuery.data.bills : []}
partsOrders={billsQuery.data ? billsQuery.data.parts_orders : []}
loading={billsQuery.loading}
jobTotals={job.job_totals}
/>
</Col>
<Col span={24}>
<PartsOrderListTableComponent
job={job}
@@ -39,11 +37,9 @@ export default function JobsDetailPliComponent({
billsQuery={billsQuery}
/>
</Col>
<FeatureWrapperComponent featureName="bills" noauth={() => null}>
<Col span={24}>
<BillsListTable job={job} handleOnRowClick={handleBillOnRowClick} billsQuery={billsQuery} />
</Col>
</FeatureWrapperComponent>
<Col span={24}>
<BillsListTable job={job} handleOnRowClick={handleBillOnRowClick} billsQuery={billsQuery} />
</Col>
<Col span={24}>
<PartsDispatchTable job={job} handleOnRowClick={handlePartsDispatchOnRowClick} billsQuery={billsQuery} />
</Col>

16
client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
View File

@@ -13,8 +13,18 @@ import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.sel
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({});
function JobsDocumentsComponent({
bodyshop,
data,
jobId,
refetch,
@@ -103,6 +113,7 @@ function JobsDocumentsComponent({
);
setgalleryImages(documents);
}, [data, setgalleryImages, t]);
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
return (
<div>
@@ -118,6 +129,9 @@ function JobsDocumentsComponent({
{!billId && <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={refetch} />}
</Space>
</Col>
{
//TODO:Upsell
}
<Col span={24}>
<Card>
<DocumentsUploadComponent
@@ -219,4 +233,4 @@ function JobsDocumentsComponent({
);
}
export default JobsDocumentsComponent;
export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsComponent);

3
client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
View File

@@ -17,6 +17,7 @@ import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -84,7 +85,7 @@ export function JobsDocumentsLocalGallery({
{ images: [], other: [] }
)
: { images: [], other: [] };
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
return (
<div>
<Space wrap>

30
client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
View File

@@ -12,6 +12,7 @@ import { alphaSort } from "../../utils/sorters";
import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component";
import "./labor-allocations-table.styles.scss";
import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -190,6 +191,7 @@ export function LaborAllocationsTable({
warningCallback({ key: "labor", warning: t("jobs.labels.outstandinghours") });
}
const hasTimeTicketAccess = HasFeatureAccess({ bodyshop, featureName: "timetickets" });
return (
<Row gutter={[16, 16]}>
<Col span={24}>
@@ -199,7 +201,19 @@ export function LaborAllocationsTable({
rowKey={(record) => `${record.cost_center} ${record.mod_lbr_ty}`}
pagination={false}
onChange={handleTableChange}
dataSource={totals}
dataSource={hasTimeTicketAccess ? totals : []}
locale={{
...(!hasTimeTicketAccess && {
emptyText: (
<div>
Upsell
{
//TODO:Upsell
}
</div>
)
})
}}
scroll={{
x: true
}}
@@ -233,7 +247,19 @@ export function LaborAllocationsTable({
columns={convertedTableCols}
rowKey="id"
pagination={false}
dataSource={convertedLines}
dataSource={hasTimeTicketAccess ? convertedLines : []}
locale={{
...(!hasTimeTicketAccess && {
emptyText: (
<div>
Upsell
{
//TODO:Upsell
}
</div>
)
})
}}
scroll={{
x: true
}}

73
client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
View File

@@ -20,13 +20,14 @@ import { DateFormatter } from "../../utils/DateFormatter";
import { TemplateList } from "../../utils/TemplateConstants";
import { alphaSort } from "../../utils/sorters";
import DataLabel from "../data-label/data-label.component";
import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
import FeatureWrapperComponent, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
import PrintWrapper from "../print-wrapper/print-wrapper.component";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
const mapStateToProps = createStructuredSelector({
jobRO: selectJobReadOnly,
@@ -169,40 +170,44 @@ export function PartsOrderListTableDrawerComponent({
<DeleteFilled />
</Button>
</Popconfirm>
<FeatureWrapperComponent featureName="bills" noauth={() => null}>
<Button
disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
onClick={() => {
logImEXEvent("parts_order_receive_bill");
setBillEnterContext({
actions: { refetch: refetch },
context: {
job: job,
bill: {
vendorid: record.vendor.id,
is_credit_memo: record.return,
billlines: record.parts_order_lines.map((pol) => ({
joblineid: pol.job_line_id || "noline",
line_desc: pol.line_desc,
quantity: pol.quantity,
actual_price: pol.act_price,
cost_center: pol.jobline?.part_type
? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
? pol.jobline.part_type !== "PAE"
? pol.jobline.part_type
: null
: responsibilityCenters.defaults &&
(responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
: null
}))
}
<Button
disabled={
(jobRO ? !record.return : jobRO) ||
record.vendor.id === bodyshop.inhousevendorid ||
!HasFeatureAccess({ bodyshop, featureName: "bills" })
}
onClick={() => {
logImEXEvent("parts_order_receive_bill");
setBillEnterContext({
actions: { refetch: refetch },
context: {
job: job,
bill: {
vendorid: record.vendor.id,
is_credit_memo: record.return,
billlines: record.parts_order_lines.map((pol) => ({
joblineid: pol.job_line_id || "noline",
line_desc: pol.line_desc,
quantity: pol.quantity,
actual_price: pol.act_price,
cost_center: pol.jobline?.part_type
? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
? pol.jobline.part_type !== "PAE"
? pol.jobline.part_type
: null
: responsibilityCenters.defaults &&
(responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
: null
}))
}
});
}}
>
{t("parts_orders.actions.receivebill")}
</Button>
</FeatureWrapperComponent>
}
});
}}
>
<LockWrapperComponent featureName="bills">{t("parts_orders.actions.receivebill")}</LockWrapperComponent>
</Button>
<PrintWrapper
templateObject={{
name: record.return ? Templates.parts_return_slip.key : Templates.parts_order.key,

77
client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
View File

@@ -14,10 +14,11 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
import { DateFormatter } from "../../utils/DateFormatter";
import { TemplateList } from "../../utils/TemplateConstants";
import { alphaSort } from "../../utils/sorters";
import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
import FeatureWrapperComponent, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
import PrintWrapper from "../print-wrapper/print-wrapper.component";
import PartsOrderDrawer from "./parts-order-list-table-drawer.component";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
const mapStateToProps = createStructuredSelector({
jobRO: selectJobReadOnly,
@@ -140,45 +141,49 @@ export function PartsOrderListTableComponent({
<DeleteFilled />
</Button>
</Popconfirm>
<FeatureWrapperComponent featureName="bills" noauth={() => null}>
<Button
disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
onClick={() => {
logImEXEvent("parts_order_receive_bill");
setBillEnterContext({
actions: { refetch: refetch },
context: {
job: job,
bill: {
vendorid: record.vendor.id,
is_credit_memo: record.return,
billlines: record.parts_order_lines.map((pol) => {
return {
joblineid: pol.job_line_id || "noline",
line_desc: pol.line_desc,
quantity: pol.quantity,
<Button
disabled={
(jobRO ? !record.return : jobRO) ||
record.vendor.id === bodyshop.inhousevendorid ||
!HasFeatureAccess({ bodyshop, featureName: "bills" })
}
onClick={() => {
logImEXEvent("parts_order_receive_bill");
actual_price: pol.act_price,
setBillEnterContext({
actions: { refetch: refetch },
context: {
job: job,
bill: {
vendorid: record.vendor.id,
is_credit_memo: record.return,
billlines: record.parts_order_lines.map((pol) => {
return {
joblineid: pol.job_line_id || "noline",
line_desc: pol.line_desc,
quantity: pol.quantity,
cost_center: pol.jobline?.part_type
? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
? pol.jobline.part_type !== "PAE"
? pol.jobline.part_type
: null
: responsibilityCenters.defaults &&
(responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
: null
};
})
}
actual_price: pol.act_price,
cost_center: pol.jobline?.part_type
? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
? pol.jobline.part_type !== "PAE"
? pol.jobline.part_type
: null
: responsibilityCenters.defaults &&
(responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
: null
};
})
}
});
}}
>
{t("parts_orders.actions.receivebill")}
</Button>
</FeatureWrapperComponent>
}
});
}}
>
<LockWrapperComponent featureName="bills">{t("parts_orders.actions.receivebill")}</LockWrapperComponent>
</Button>
<PrintWrapper
templateObject={{
name: record.return ? Templates.parts_return_slip.key : Templates.parts_order.key,

18
client/src/components/report-center-modal/report-center-modal.component.jsx
View File

@@ -110,7 +110,13 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
to: values.to,
subject: Templates[values.key]?.subject
},
values.sendbytext === "text" ? values.sendbytext : values.sendbyexcel === "excel" ? "x" : values.sendby === "email" ? "e" : "p",
values.sendbytext === "text"
? values.sendbytext
: values.sendbyexcel === "excel"
? "x"
: values.sendby === "email"
? "e"
: "p",
id
);
setLoading(false);
@@ -127,7 +133,7 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
...(!HasFeatureAccess({ featureName: "bills", bodyshop }) ? ["purchases"] : []),
...(!HasFeatureAccess({ featureName: "timetickets", bodyshop }) ? ["payroll"] : [])
];
//TODO: Find a way to filter out / blur on demand.
return (
<div>
<Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
@@ -145,15 +151,9 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
]}
>
<Radio.Group>
{/* {Object.keys(Templates).map((key) => (
<Radio key={key} value={key}>
{Templates[key].title}
</Radio>
))} */}
<Row gutter={[16, 16]}>
{Object.keys(grouped)
.filter((key) => !groupExcludeKeyFilter.includes(key))
//.filter((key) => !groupExcludeKeyFilter.includes(key))
.map((key) => (
<Col md={8} sm={12} key={key}>
<Card.Grid

46
client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx
View File

@@ -6,6 +6,7 @@ import { connect } from "react-redux";
import { Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, Tooltip } from "recharts";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
@@ -38,26 +39,35 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
<div>
<Space>
{t("appointments.labels.expectedprodhrs")}
<strong>{loadData?.expectedHours?.toFixed(1)}</strong>
<BlurWrapperComponent featureName="smartscheduling">
<strong>{loadData?.expectedHours?.toFixed(1)}</strong>
</BlurWrapperComponent>
{t("appointments.labels.expectedjobs")}
<strong>{loadData?.expectedJobCount}</strong>
<BlurWrapperComponent featureName="smartscheduling">
<strong>{loadData?.expectedJobCount}</strong>
</BlurWrapperComponent>
</Space>
<RadarChart
// cx={300}
// cy={250}
// outerRadius={150}
width={800}
height={600}
data={data}
>
<PolarGrid />
<PolarAngleAxis dataKey="bucket" />
<PolarRadiusAxis angle={90} />
<Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
<Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
<Tooltip />
<Legend />
</RadarChart>
<BlurWrapperComponent featureName="smartscheduling">
<RadarChart
// cx={300}
// cy={250}
// outerRadius={150}
width={800}
height={600}
data={data}
>
<PolarGrid />
<PolarAngleAxis dataKey="bucket" />
<PolarRadiusAxis angle={90} />
<Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
<Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
<Tooltip />
<Legend />
</RadarChart>
</BlurWrapperComponent>
{
//TODO:Upsell
}
</div>
);

123
client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx
View File

@@ -18,6 +18,8 @@ import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component
import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
import InstanceRenderMgr from "../../utils/instanceRenderMgr";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -59,30 +61,37 @@ export function ScheduleCalendarHeaderComponent({
<tbody>
{loadData && loadData.allJobsOut ? (
loadData.allJobsOut.map((j) => (
<tr key={j.id}>
<td style={{ padding: "2.5px" }}>
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> ({j.status})
</td>
<td style={{ padding: "2.5px" }}>
<OwnerNameDisplay ownerObject={j} />
</td>
<td style={{ padding: "2.5px" }}>
{`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
}/${(j.labhrs.aggregate?.sum?.mod_lb_hrs + j.larhrs.aggregate?.sum?.mod_lb_hrs).toFixed(
1
)} ${t("general.labels.hours")})`}
</td>
<td style={{ padding: "2.5px" }}>
<DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
</td>
</tr>
<BlurWrapperComponent key={j.id} featureName="smartscheduling">
<tr>
<td style={{ padding: "2.5px" }}>
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> ({j.status})
</td>
<td style={{ padding: "2.5px" }}>
<OwnerNameDisplay ownerObject={j} />
</td>
<td style={{ padding: "2.5px" }}>
{`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
}/${(j.labhrs.aggregate?.sum?.mod_lb_hrs + j.larhrs.aggregate?.sum?.mod_lb_hrs).toFixed(
1
)} ${t("general.labels.hours")})`}
</td>
<td style={{ padding: "2.5px" }}>
<DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
</td>
</tr>
</BlurWrapperComponent>
))
) : (
<tr>
<td style={{ padding: "2.5px" }}>{t("appointments.labels.nocompletingjobs")}</td>
<BlurWrapperComponent featureName="smartscheduling">
<td style={{ padding: "2.5px" }}>{t("appointments.labels.nocompletingjobs")}</td>
</BlurWrapperComponent>
</tr>
)}
{
//TODO:Upsell
}
</tbody>
</table>
</div>
@@ -94,30 +103,37 @@ export function ScheduleCalendarHeaderComponent({
<tbody>
{loadData && loadData.allJobsIn ? (
loadData.allJobsIn.map((j) => (
<tr key={j.id}>
<td style={{ padding: "2.5px" }}>
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
</td>
<td style={{ padding: "2.5px" }}>
<OwnerNameDisplay ownerObject={j} />
</td>
<td style={{ padding: "2.5px" }}>
{`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
}/${(j.labhrs?.aggregate?.sum?.mod_lb_hrs + j.larhrs?.aggregate?.sum?.mod_lb_hrs).toFixed(
1
)} ${t("general.labels.hours")})`}
</td>
<td style={{ padding: "2.5px" }}>
<DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
</td>
</tr>
<BlurWrapperComponent key={j.id} featureName="smartscheduling">
<tr>
<td style={{ padding: "2.5px" }}>
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
</td>
<td style={{ padding: "2.5px" }}>
<OwnerNameDisplay ownerObject={j} />
</td>
<td style={{ padding: "2.5px" }}>
{`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
}/${(j.labhrs?.aggregate?.sum?.mod_lb_hrs + j.larhrs?.aggregate?.sum?.mod_lb_hrs).toFixed(
1
)} ${t("general.labels.hours")})`}
</td>
<td style={{ padding: "2.5px" }}>
<DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
</td>
</tr>
</BlurWrapperComponent>
))
) : (
<tr>
<td style={{ padding: "2.5px" }}>{t("appointments.labels.noarrivingjobs")}</td>
<BlurWrapperComponent featureName="smartscheduling">
<td style={{ padding: "2.5px" }}>{t("appointments.labels.noarrivingjobs")}</td>
</BlurWrapperComponent>
</tr>
)}
{
//TODO:Upsell
}
</tbody>
</table>
</div>
@@ -132,10 +148,12 @@ export function ScheduleCalendarHeaderComponent({
trigger="hover"
title={t("appointments.labels.arrivingjobs")}
>
<Icon component={MdFileDownload} style={{ color: "green" }} />
{(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/
{(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/
{(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}
<Space size="small">
<Icon component={MdFileDownload} style={{ color: "green" }} />
<BlurWrapper featureName="smartscheduling">
<span>{`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}</span>
</BlurWrapper>
</Space>
</Popover>
<Popover
placement={"bottom"}
@@ -143,8 +161,12 @@ export function ScheduleCalendarHeaderComponent({
trigger="hover"
title={t("appointments.labels.completingjobs")}
>
<Icon component={MdFileUpload} style={{ color: "red" }} />
{(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}
<Space size="small">
<Icon component={MdFileUpload} style={{ color: "red" }} />
<BlurWrapper featureName="smartscheduling">
<span>{(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}</span>
</BlurWrapper>
</Space>
</Popover>
<ScheduleCalendarHeaderGraph loadData={loadData} />
</Space>
@@ -196,18 +218,7 @@ export function ScheduleCalendarHeaderComponent({
<ScheduleBlockDay alreadyBlocked={isDayBlocked.length > 0} date={date} refetch={refetch}>
<div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
{label}
{InstanceRenderMgr({
imex: HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) ? (
calculating ? (
<LoadingSkeleton />
) : (
LoadComponent
)
) : (
<></>
),
rome: "USE_IMEX"
})}
{calculating ? <LoadingSkeleton /> : LoadComponent}
</div>
</ScheduleBlockDay>
</div>

64
client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
View File

@@ -56,36 +56,14 @@ export function ScheduleCalendarWrapperComponent({
<>
<JobDetailCards />
{HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) &&
InstanceRenderManager({
imex:
problemJobs && problemJobs.length > 2 ? (
<Collapse style={{ marginBottom: "5px" }}>
<Collapse.Panel
key="1"
header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
>
<Space direction="vertical" style={{ width: "100%" }}>
{problemJobs.map((problem) => (
<Alert
key={problem.id}
type="error"
message={
<Trans
i18nKey="appointments.labels.dataconsistency"
components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
values={{
ro_number: problem.ro_number,
code: problem.code
}}
/>
}
/>
))}
</Space>
</Collapse.Panel>
</Collapse>
) : (
<Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}>
problemJobs &&
(problemJobs.length > 2 ? (
<Collapse style={{ marginBottom: "5px" }}>
<Collapse.Panel
key="1"
header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
>
<Space direction="vertical" style={{ width: "100%" }}>
{problemJobs.map((problem) => (
<Alert
key={problem.id}
@@ -103,10 +81,28 @@ export function ScheduleCalendarWrapperComponent({
/>
))}
</Space>
),
rome: "USE_IMEX"
})}
</Collapse.Panel>
</Collapse>
) : (
<Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}>
{problemJobs.map((problem) => (
<Alert
key={problem.id}
type="error"
message={
<Trans
i18nKey="appointments.labels.dataconsistency"
components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
values={{
ro_number: problem.ro_number,
code: problem.code
}}
/>
}
/>
))}
</Space>
))}
<Calendar
events={data}

51
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

@@ -15,6 +15,8 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
import "./schedule-job-modal.scss";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
import { BlurWrapper } from "../feature-wrapper/blur-wrapper.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
@@ -99,36 +101,43 @@ export function ScheduleJobModalComponent({
<DateTimePicker onlyFuture />
</Form.Item>
</LayoutFormRow>
{HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) && (
{
<>
<Typography.Title level={4}>{t("appointments.labels.smartscheduling")}</Typography.Title>
<Space wrap>
<Button onClick={handleSmartScheduling} loading={loading}>
{t("appointments.actions.calculate")}
<LockWrapperComponent featureName="smartscheduling">
{t("appointments.actions.calculate")}
</LockWrapperComponent>
</Button>
{smartOptions.map((d, idx) => (
<Button
className="imex-flex-row__margin"
key={idx}
onClick={() => {
const ssDate = dayjs(d);
if (ssDate.isBefore(dayjs())) {
form.setFieldsValue({ start: dayjs() });
} else {
form.setFieldsValue({
start: dayjs(d).add(8, "hour")
});
}
handleDateBlur();
}}
>
<DateFormatter includeDay>{d}</DateFormatter>
</Button>
<BlurWrapper featureName="smartscheduling" key={idx}>
<Button
className="imex-flex-row__margin"
disabled={!HasFeatureAccess({ bodyshop, featureName: "smartscheduling" })}
onClick={() => {
const ssDate = dayjs(d);
if (ssDate.isBefore(dayjs())) {
form.setFieldsValue({ start: dayjs() });
} else {
form.setFieldsValue({
start: dayjs(d).add(8, "hour")
});
}
handleDateBlur();
}}
>
<DateFormatter includeDay>{d}</DateFormatter>
</Button>
</BlurWrapper>
))}
{
//TODO:Upsell
}
</Space>
</>
)}
,
}
<LayoutFormRow grow>
<Form.Item name="notifyCustomer" valuePropName="checked" label={t("jobs.labels.appointmentconfirmation")}>
<Switch />

19
client/src/components/shop-info/shop-info.component.jsx
View File

@@ -22,6 +22,7 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
import ShopInfoRoGuard from "./shop-info.roguard.component";
import ShopInfoIntellipay from "./shop-intellipay-config.component";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
@@ -88,16 +89,14 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
children: <ShopInfoResponsibilityCenterComponent form={form} />,
id: "tab-shop-responsibilitycenters"
},
...(HasFeatureAccess({ featureName: "checklists", bodyshop })
? [
{
key: "checklists",
label: t("bodyshop.labels.checklists"),
children: <ShopInfoIntakeChecklistComponent form={form} />,
id: "tab-shop-checklists"
}
]
: []),
{
key: "checklists",
label: <LockWrapperComponent featureName="checklist">{t("bodyshop.labels.checklists")}</LockWrapperComponent>,
children: <ShopInfoIntakeChecklistComponent form={form} />,
disabled: HasFeatureAccess({ bodyshop, featureName: "checklist" }),
id: "tab-shop-checklists"
},
{
key: "laborrates",
label: t("bodyshop.labels.laborrates"),

30
client/src/components/time-ticket-list/time-ticket-list.component.jsx
View File

@@ -14,6 +14,8 @@ import dayjs from "../../utils/day";
import { alphaSort, dateSort } from "../../utils/sorters";
import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -39,7 +41,7 @@ export function TimeTicketList({
extra
}) {
const [state, setState] = useState({
sortedInfo: { columnKey: 'date', order: 'descend' },
sortedInfo: { columnKey: "date", order: "descend" },
filteredInfo: { text: "" }
});
@@ -277,6 +279,8 @@ export function TimeTicketList({
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const hasTimeTicketsAccess = HasFeatureAccess({ bodyshop, featureName: "timetickets" });
return (
<Card
title={t("timetickets.labels.timetickets")}
@@ -284,7 +288,7 @@ export function TimeTicketList({
<Space wrap>
{jobId && bodyshop.md_tasks_presets.enable_tasks && (
<Button
disabled={disabled}
disabled={disabled || !hasTimeTicketsAccess}
onClick={() => {
setTimeTicketTaskContext({
actions: { refetch: refetch },
@@ -292,7 +296,9 @@ export function TimeTicketList({
});
}}
>
{t("timetickets.actions.claimtasks")}
<LockWrapperComponent featureName="timetickets">
{t("timetickets.actions.claimtasks")}
</LockWrapperComponent>
</Button>
)}
{jobId &&
@@ -305,9 +311,9 @@ export function TimeTicketList({
? currentUser.email.concat(" | ", currentUser.displayName)
: currentUser.email
}}
disabled={disabled}
disabled={disabled || !hasTimeTicketsAccess}
>
{t("timetickets.actions.enter")}
<LockWrapperComponent featureName="timetickets">{t("timetickets.actions.enter")}</LockWrapperComponent>
</TimeTicketEnterButton>
))}
{extra}
@@ -328,7 +334,7 @@ export function TimeTicketList({
scroll={{
x: true
}}
dataSource={timetickets}
dataSource={hasTimeTicketsAccess ? timetickets : []}
onChange={handleTableChange}
summary={() => {
if (Enhanced_Payroll.treatment === "on") return null;
@@ -354,6 +360,18 @@ export function TimeTicketList({
</Table.Summary.Row>
);
}}
locale={{
...(!hasTimeTicketsAccess && {
emptyText: (
<div>
Upsell
{
//TODO:Upsell
}
</div>
)
})
}}
/>
</Card>
);

10
client/src/pages/accounting-payables/accounting-payables.container.jsx
View File

@@ -57,7 +57,15 @@ export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs, setSelec
return (
<div>
<FeatureWrapperComponent featureName="export">
<FeatureWrapperComponent
featureName="export"
noAuth
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="accounting:payables">
{noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
<AccountingPayablesTable loadaing={loading} bills={data ? data.bills : []} refetch={refetch} />

9
client/src/pages/accounting-payments/accounting-payments.container.jsx
View File

@@ -55,7 +55,14 @@ export function AccountingPaymentsContainer({ bodyshop, setBreadcrumbs, setSelec
!(bodyshop && (bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber || bodyshop.accountingconfig.qbo));
return (
<div>
<FeatureWrapperComponent featureName="export">
<FeatureWrapperComponent
featureName="export"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="accounting:payments">
{noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
<AccountingPaymentsTable loadaing={loading} payments={data ? data.payments : []} refetch={refetch} />

9
client/src/pages/accounting-receivables/accounting-receivables.container.jsx
View File

@@ -60,7 +60,14 @@ export function AccountingReceivablesContainer({ bodyshop, setBreadcrumbs, setSe
return (
<div>
<FeatureWrapperComponent featureName="export">
<FeatureWrapperComponent
featureName="export"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="accounting:receivables">
{noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
<AccountingReceivablesTable loadaing={loading} jobs={data ? data.jobs : []} refetch={refetch} />

9
client/src/pages/bills/bills.page.container.jsx
View File

@@ -53,7 +53,14 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<FeatureWrapperComponent featureName="bills">
<FeatureWrapperComponent
featureName="bills"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="bills:list">
<div>
<BillsPageComponent

9
client/src/pages/contract-create/contract-create.page.container.jsx
View File

@@ -120,7 +120,14 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs, setSelec
}, [t, setBreadcrumbs, setSelectedHeader]);
return (
<FeatureWrapperComponent featureName="courtesycars">
<FeatureWrapperComponent
featureName="courtesycars"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="contracts:create">
<Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish}>
<ContractCreatePageComponent

9
client/src/pages/contract-detail/contract-detail.page.container.jsx
View File

@@ -108,7 +108,14 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem, set
if (!!!data.cccontracts_by_pk) return <NotFound />;
return (
<FeatureWrapperComponent featureName="courtesycars">
<FeatureWrapperComponent
featureName="courtesycars"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="contracts:detail">
<div>
<CourtesyCarReturnModalContainer />

9
client/src/pages/contracts/contracts.page.container.jsx
View File

@@ -56,7 +56,14 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<FeatureWrapperComponent featureName="courtesycars">
<FeatureWrapperComponent
featureName="courtesycars"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="contracts:list">
<ContractsPageComponent
loading={loading}

15
client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
View File

@@ -68,13 +68,20 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs, setSelect
}, [t, setBreadcrumbs, setSelectedHeader]);
return (
<RbacWrapper action="courtesycar:create">
<FeatureWrapperComponent featureName="courtesycars">
<FeatureWrapperComponent
featureName="courtesycars"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="courtesycar:create">
<Form form={form} autoComplete="new-password" onFinish={handleFinish} layout="vertical">
<CourtesyCarFormComponent form={form} saveLoading={loading} newCC={true} />
</Form>
</FeatureWrapperComponent>
</RbacWrapper>
</RbacWrapper>
</FeatureWrapperComponent>
);
}

15
client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx
View File

@@ -34,11 +34,18 @@ export function CourtesyCarsPageContainer({ setBreadcrumbs, setSelectedHeader })
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<RbacWrapper action="courtesycar:list">
<FeatureWrapperComponent featureName="courtesycars">
<FeatureWrapperComponent
featureName="courtesycars"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="courtesycar:list">
<CourtesyCarsPageComponent loading={loading} data={(data && data.courtesycars) || []} refetch={refetch} />
</FeatureWrapperComponent>
</RbacWrapper>
</RbacWrapper>
</FeatureWrapperComponent>
);
}

9
client/src/pages/dashboard/dashboard.container.jsx
View File

@@ -32,7 +32,14 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
}, [setBreadcrumbs, t, setSelectedHeader]);
return (
<FeatureWrapper featureName="dashboard">
<FeatureWrapper
featureName="dashboard"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="shop:dashboard">
<DashboardGridComponent />
</RbacWrapper>

9
client/src/pages/export-logs/export-logs.page.container.jsx
View File

@@ -32,7 +32,14 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
}, [setBreadcrumbs, t, setSelectedHeader]);
return (
<FeatureWrapperComponent featureName="export">
<FeatureWrapperComponent
featureName="export"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="accounting:exportlogs">
<ExportLogsPage />
</RbacWrapper>

61
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -56,6 +56,7 @@ import { DateTimeFormat } from "../../utils/DateFormatter";
import dayjs from "../../utils/day";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import UndefinedToNull from "../../utils/undefinedtonull";
import LockWrapperComponent from "../../components/lock-wrapper/lock-wrapper.component.jsx";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -376,9 +377,7 @@ export function JobsDetailPage({
key: "partssublet",
id: "job-details-partssublet",
icon: <ToolFilled />,
label: HasFeatureAccess({ featureName: "bills", bodyshop })
? t("menus.jobsdetail.partssublet")
: t("menus.jobsdetail.parts"),
label: t("menus.jobsdetail.partssublet"),
children: (
<JobsDetailPliContainer
job={job}
@@ -389,20 +388,16 @@ export function JobsDetailPage({
/>
)
},
...(InstanceRenderManager({
rome: "USE_IMEX",
imex: HasFeatureAccess({ featureName: "timetickets", bodyshop })
})
? [
{
key: "labor",
id: "job-details-labor",
icon: <Icon component={FaHardHat} />,
label: t("menus.jobsdetail.labor"),
children: <JobsDetailLaborContainer job={job} jobId={job.id} />
}
]
: []),
{
key: "labor",
id: "job-details-labor",
icon: <Icon component={FaHardHat} />,
label: (
<LockWrapperComponent featureName="timetickets">{t("menus.jobsdetail.labor")}</LockWrapperComponent>
),
children: <JobsDetailLaborContainer job={job} jobId={job.id} />
},
{
key: "lifecycle",
icon: <BarsOutlined />,
@@ -418,24 +413,18 @@ export function JobsDetailPage({
forceRender: true,
children: <JobsDetailDatesComponent job={job} />
},
...(InstanceRenderManager({
rome: "USE_IMEX",
imex: HasFeatureAccess({ featureName: "media", bodyshop })
})
? [
{
key: "documents",
id: "job-details-documents",
icon: <FileImageFilled />,
label: t("jobs.labels.documents"),
children: bodyshop.uselocalmediaserver ? (
<JobsDocumentsLocalGallery job={job} />
) : (
<JobsDocumentsGalleryContainer jobId={job.id} />
)
}
]
: []),
{
key: "documents",
id: "job-details-documents",
icon: <FileImageFilled />,
label: <LockWrapperComponent featureName="media">{t("jobs.labels.documents")}</LockWrapperComponent>,
children: bodyshop.uselocalmediaserver ? (
<JobsDocumentsLocalGallery job={job} />
) : (
<JobsDocumentsGalleryContainer jobId={job.id} />
)
},
{
key: "notes",
id: "job-details-notes",
@@ -447,7 +436,7 @@ export function JobsDetailPage({
key: "audit",
icon: <HistoryOutlined />,
id: "job-details-audit",
label: t("jobs.labels.audit"),
label: <LockWrapperComponent featureName="audit">{t("jobs.labels.audit")}</LockWrapperComponent>,
children: <JobAuditTrail jobId={job.id} />
},
{

9
client/src/pages/payments-all/payments-all.container.page.jsx
View File

@@ -58,7 +58,14 @@ export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<FeatureWrapperComponent featureName="payments">
<FeatureWrapperComponent
featureName="payments"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="payments:list">
<PaymentsListPaginated
refetch={refetch}

9
client/src/pages/production-board/production-board.container.jsx
View File

@@ -38,7 +38,14 @@ export function ProductionBoardContainer({ setBreadcrumbs, bodyshop, setSelected
}, [t, setBreadcrumbs, setSelectedHeader]);
return (
<FeatureWrapper featureName="visualboard">
<FeatureWrapper
featureName="visualboard"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="production:board">
<ProductionBoardComponent />
</RbacWrapper>

9
client/src/pages/scoreboard/scoreboard.page.container.jsx
View File

@@ -66,7 +66,14 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
* Render the component
*/
return (
<FeatureWrapper featureName="scoreboard">
<FeatureWrapper
featureName="scoreboard"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="scoreboard:view">
<Tabs
activeKey={tab || "sb"}

9
client/src/pages/shift-clock/shift-clock.page.jsx
View File

@@ -5,7 +5,14 @@ import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wr
export default function ShiftClock() {
return (
<FeatureWrapperComponent featureName="timetickets">
<FeatureWrapperComponent
featureName="timetickets"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="shiftclock:view">
<TimeTicketShift />
</RbacWrapper>

9
client/src/pages/tech/tech.page.component.jsx
View File

@@ -82,7 +82,14 @@ export function TechPage({ technician }) {
/>
}
>
<FeatureWrapper featureName="tech-console">
<FeatureWrapper
featureName="tech-console"
upsellComponent={
{
//TODO:Upsell
}
}
>
<TimeTicketModalContainer />
<EmailOverlayContainer />
<PrintCenterModalContainer />

15
client/src/pages/temporary-docs/temporary-docs.container.jsx
View File

@@ -38,11 +38,18 @@ export function TempDocumentsContainer({ setBreadcrumbs, setSelectedHeader }) {
}, [t, setBreadcrumbs, setSelectedHeader]);
return (
<RbacWrapper action="temporarydocs:view">
<FeatureWrapperComponent featureName="media">
<FeatureWrapperComponent
featureName="media"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="temporarydocs:view">
<TemporaryDocsComponent />
</FeatureWrapperComponent>
</RbacWrapper>
</RbacWrapper>
</FeatureWrapperComponent>
);
}

9
client/src/pages/time-tickets/time-tickets.container.jsx
View File

@@ -73,7 +73,14 @@ export function TimeTicketsContainer({ bodyshop, setBreadcrumbs, setSelectedHead
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<FeatureWrapperComponent featureName="timetickets">
<FeatureWrapperComponent
featureName="timetickets"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="timetickets:list">
<Row gutter={[16, 16]}>
<Col span={24}>

9
client/src/pages/tt-approvals/tt-approvals.page.container.jsx
View File

@@ -38,7 +38,14 @@ export function TtApprovalsPage({ setBreadcrumbs, setSelectedHeader }) {
}, [t, setBreadcrumbs, setSelectedHeader]);
return (
<FeatureWrapperComponent featureName="timetickets">
<FeatureWrapperComponent
featureName="timetickets"
upsellComponent={
{
//TODO:Upsell
}
}
>
<RbacWrapper action="ttapprovals:view">
<TtApprovalsList />
</RbacWrapper>

1
client/src/translations/en_us/common.json
View File

@@ -991,6 +991,7 @@
"labels": {
"confirmdelete": "Are you sure you want to delete these documents. This CANNOT be undone.",
"doctype": "Document Type",
"dragtoupload": "Click or drag files to this area to upload",
"newjobid": "Assign to Job",
"openinexplorer": "Open in Explorer",
"optimizedimage": "The below image is optimized. Click on the picture below to open in a new window and view it full size, or open it in explorer.",

1
client/src/translations/es/common.json
View File

@@ -991,6 +991,7 @@
"labels": {
"confirmdelete": "",
"doctype": "",
"dragtoupload": "",
"newjobid": "",
"openinexplorer": "",
"optimizedimage": "",

1
client/src/translations/fr/common.json
View File

@@ -991,6 +991,7 @@
"labels": {
"confirmdelete": "",
"doctype": "",
"dragtoupload": "",
"newjobid": "",
"openinexplorer": "",
"optimizedimage": "",