Fix / Merge / Rewrite Job Details Header Actions Menu
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
@@ -1,164 +0,0 @@
|
|||||||
import { useMutation } from "@apollo/client";
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
Form,
|
|
||||||
Input,
|
|
||||||
Menu,
|
|
||||||
notification,
|
|
||||||
Popover,
|
|
||||||
Select,
|
|
||||||
Space,
|
|
||||||
} from "antd";
|
|
||||||
import dayjs from "../../utils/day";
|
|
||||||
import React, { 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_MANUAL_APPT } from "../../graphql/appointments.queries";
|
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
||||||
import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
|
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
|
||||||
bodyshop: selectBodyshop,
|
|
||||||
});
|
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
|
||||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
||||||
});
|
|
||||||
export default connect(
|
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)(JobsDetailHeaderAddEvent);
|
|
||||||
|
|
||||||
export function JobsDetailHeaderAddEvent({ bodyshop, jobid, ...props }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [visibility, setVisibility] = useState(false);
|
|
||||||
|
|
||||||
const handleFinish = async (values) => {
|
|
||||||
logImEXEvent("schedule_manual_event");
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
insertAppointment({
|
|
||||||
variables: {
|
|
||||||
apt: { ...values, isintake: false, jobid, bodyshopid: bodyshop.id },
|
|
||||||
},
|
|
||||||
refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
|
|
||||||
});
|
|
||||||
notification.open({
|
|
||||||
type: "success",
|
|
||||||
message: t("appointments.successes.created"),
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
setVisibility(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const overlay = (
|
|
||||||
<Card>
|
|
||||||
<div>
|
|
||||||
<Form form={form} layout="vertical" onFinish={handleFinish}>
|
|
||||||
<Form.Item
|
|
||||||
label={t("appointments.fields.title")}
|
|
||||||
name="title"
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label={t("appointments.fields.note")} name="note">
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
label={t("appointments.fields.start")}
|
|
||||||
name="start"
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<FormDateTimePickerComponent
|
|
||||||
onBlur={() => {
|
|
||||||
const start = form.getFieldValue("start");
|
|
||||||
form.setFieldsValue({ end: start.add(30, "minutes") });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
label={t("appointments.fields.end")}
|
|
||||||
name="end"
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
({ getFieldValue }) => ({
|
|
||||||
async validator(rule, value) {
|
|
||||||
if (value) {
|
|
||||||
const { start } = form.getFieldsValue();
|
|
||||||
if (dayjs(start).isAfter(dayjs(value))) {
|
|
||||||
return Promise.reject(
|
|
||||||
t("employees.labels.endmustbeafterstart")
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<FormDateTimePickerComponent />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item label={t("appointments.fields.color")} name="color">
|
|
||||||
<Select>
|
|
||||||
{bodyshop.appt_colors.map((col, idx) => (
|
|
||||||
<Select.Option key={idx} value={col.color.hex}>
|
|
||||||
{col.label}
|
|
||||||
</Select.Option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Space wrap>
|
|
||||||
<Button type="primary" htmlType="submit" loading={loading}>
|
|
||||||
{t("general.actions.save")}
|
|
||||||
</Button>
|
|
||||||
<Button onClick={() => setVisibility(false)}>
|
|
||||||
{t("general.actions.cancel")}
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleClick = (e) => {
|
|
||||||
setVisibility(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO - Client Update - Why is this a menu item?
|
|
||||||
return (
|
|
||||||
<Popover content={overlay} open={visibility}>
|
|
||||||
<Menu.Item {...props} onClick={handleClick}>
|
|
||||||
{t("appointments.labels.manualevent")}
|
|
||||||
</Menu.Item>
|
|
||||||
</Popover>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,240 +0,0 @@
|
|||||||
import { useApolloClient, useMutation } from "@apollo/client";
|
|
||||||
import { Menu, notification } from "antd";
|
|
||||||
import parsePhoneNumber from "libphonenumber-js";
|
|
||||||
import React from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { connect } from "react-redux";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { createStructuredSelector } from "reselect";
|
|
||||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
|
||||||
import {
|
|
||||||
GET_CURRENT_QUESTIONSET_ID,
|
|
||||||
INSERT_CSI,
|
|
||||||
} from "../../graphql/csi.queries";
|
|
||||||
import { setEmailOptions } from "../../redux/email/email.actions";
|
|
||||||
import {
|
|
||||||
openChatByPhone,
|
|
||||||
setMessage,
|
|
||||||
} from "../../redux/messaging/messaging.actions";
|
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
||||||
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
|
||||||
import { TemplateList } from "../../utils/TemplateConstants";
|
|
||||||
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
|
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
|
||||||
//currentUser: selectCurrentUser'
|
|
||||||
bodyshop: selectBodyshop,
|
|
||||||
});
|
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
|
||||||
setEmailOptions: (e) => dispatch(setEmailOptions(e)),
|
|
||||||
openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
|
|
||||||
setMessage: (text) => dispatch(setMessage(text)),
|
|
||||||
});
|
|
||||||
|
|
||||||
export function JobsDetailHeaderCsi({
|
|
||||||
setEmailOptions,
|
|
||||||
bodyshop,
|
|
||||||
job,
|
|
||||||
openChatByPhone,
|
|
||||||
setMessage,
|
|
||||||
...props
|
|
||||||
}) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [insertCsi] = useMutation(INSERT_CSI);
|
|
||||||
const client = useApolloClient();
|
|
||||||
|
|
||||||
const handleCreateCsi = async (e) => {
|
|
||||||
logImEXEvent("job_create_csi");
|
|
||||||
|
|
||||||
//Is tehre already a CSI?
|
|
||||||
if (!job.csiinvites || job.csiinvites.length === 0) {
|
|
||||||
const questionSetResult = await client.query({
|
|
||||||
query: GET_CURRENT_QUESTIONSET_ID,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (questionSetResult.data.csiquestions.length > 0) {
|
|
||||||
const result = await insertCsi({
|
|
||||||
variables: {
|
|
||||||
csiInput: {
|
|
||||||
jobid: job.id,
|
|
||||||
bodyshopid: bodyshop.id,
|
|
||||||
questionset: questionSetResult.data.csiquestions[0].id,
|
|
||||||
relateddata: {
|
|
||||||
job: {
|
|
||||||
id: job.id,
|
|
||||||
ownr_fn: job.ownr_fn,
|
|
||||||
ro_number: job.ro_number,
|
|
||||||
v_model_yr: job.v_model_yr,
|
|
||||||
v_make_desc: job.v_make_desc,
|
|
||||||
v_model_desc: job.v_model_desc,
|
|
||||||
},
|
|
||||||
bodyshop: {
|
|
||||||
city: bodyshop.city,
|
|
||||||
email: bodyshop.email,
|
|
||||||
state: bodyshop.state,
|
|
||||||
country: bodyshop.country,
|
|
||||||
address1: bodyshop.address1,
|
|
||||||
address2: bodyshop.address2,
|
|
||||||
shopname: bodyshop.shopname,
|
|
||||||
zip_post: bodyshop.zip_post,
|
|
||||||
logo_img_path: bodyshop.logo_img_path,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
refetchQueries: ["GET_JOB_BY_PK"],
|
|
||||||
awaitRefetchQueries: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!!!result.errors) {
|
|
||||||
notification["success"]({ message: t("csi.successes.created") });
|
|
||||||
} else {
|
|
||||||
notification["error"]({
|
|
||||||
message: t("csi.errors.creating", {
|
|
||||||
message: JSON.stringify(result.errors),
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (e.key === "email")
|
|
||||||
setEmailOptions({
|
|
||||||
jobid: job.id,
|
|
||||||
messageOptions: {
|
|
||||||
to: [job.ownr_ea],
|
|
||||||
replyTo: bodyshop.email,
|
|
||||||
},
|
|
||||||
template: {
|
|
||||||
name: TemplateList("job_special").csi_invitation_action.key,
|
|
||||||
variables: {
|
|
||||||
id: result.data.insert_csi.returning[0].id,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (e.key === "text") {
|
|
||||||
const p = parsePhoneNumber(job.ownr_ph1, "CA");
|
|
||||||
if (p && p.isValid()) {
|
|
||||||
openChatByPhone({
|
|
||||||
phone_num: p.formatInternational(),
|
|
||||||
jobid: job.id,
|
|
||||||
});
|
|
||||||
setMessage(
|
|
||||||
`${window.location.protocol}//${window.location.host}/csi/${result.data.insert_csi.returning[0].id}`
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
notification["error"]({
|
|
||||||
message: t("messaging.error.invalidphone"),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (e.key === "generate") {
|
|
||||||
//copy it to clipboard.
|
|
||||||
navigator.clipboard.writeText(
|
|
||||||
`${window.location.protocol}//${window.location.host}/csi/${result.data.insert_csi.returning[0].id}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
notification["error"]({
|
|
||||||
message: t("csi.errors.notconfigured"),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (e.key === "email")
|
|
||||||
setEmailOptions({
|
|
||||||
jobid: job.id,
|
|
||||||
messageOptions: {
|
|
||||||
to: [job.ownr_ea],
|
|
||||||
replyTo: bodyshop.email,
|
|
||||||
},
|
|
||||||
template: {
|
|
||||||
name: TemplateList("job_special").csi_invitation_action.key,
|
|
||||||
variables: {
|
|
||||||
id: job.csiinvites[0].id,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (e.key === "text") {
|
|
||||||
const p = parsePhoneNumber(job.ownr_ph1, "CA");
|
|
||||||
if (p && p.isValid()) {
|
|
||||||
openChatByPhone({
|
|
||||||
phone_num: p.formatInternational(),
|
|
||||||
jobid: job.id,
|
|
||||||
});
|
|
||||||
setMessage(
|
|
||||||
`${window.location.protocol}//${window.location.host}/csi/${job.csiinvites[0].id}`
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
notification["error"]({
|
|
||||||
message: t("messaging.error.invalidphone"),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.key === "generate") {
|
|
||||||
//copy it to clipboard.
|
|
||||||
navigator.clipboard.writeText(
|
|
||||||
`${window.location.protocol}//${window.location.host}/csi/${job.csiinvites[0].id}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!HasFeatureAccess({ featureName: "csi", bodyshop })) return <></>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu.SubMenu
|
|
||||||
key="sendcsi"
|
|
||||||
title={t("jobs.actions.sendcsi")}
|
|
||||||
disabled={!job.converted}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<Menu.Item
|
|
||||||
onClick={handleCreateCsi}
|
|
||||||
key="email"
|
|
||||||
disabled={!!!job.ownr_ea}
|
|
||||||
>
|
|
||||||
{t("general.labels.email")}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item
|
|
||||||
onClick={handleCreateCsi}
|
|
||||||
key="text"
|
|
||||||
disabled={!!!job.ownr_ph1}
|
|
||||||
>
|
|
||||||
{t("general.labels.text")}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item
|
|
||||||
onClick={handleCreateCsi}
|
|
||||||
key="generate"
|
|
||||||
disabled={job.csiinvites && job.csiinvites.length > 0}
|
|
||||||
>
|
|
||||||
{t("jobs.actions.generatecsi")}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Divider />
|
|
||||||
{job.csiinvites.map((item, idx) => {
|
|
||||||
return item.completedon ? (
|
|
||||||
<Menu.Item key={idx}>
|
|
||||||
<Link to={`/manage/shop/csi?responseid=${item.id}`}>
|
|
||||||
<DateTimeFormatter>{item.completedon}</DateTimeFormatter>
|
|
||||||
</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
) : (
|
|
||||||
<Menu.Item
|
|
||||||
key={idx}
|
|
||||||
onClick={() => {
|
|
||||||
navigator.clipboard.writeText(
|
|
||||||
`${window.location.protocol}//${window.location.host}/csi/${item.id}`
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("general.actions.copylink")}
|
|
||||||
</Menu.Item>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Menu.SubMenu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
export default connect(
|
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)(JobsDetailHeaderCsi);
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
import { Menu, notification } from "antd";
|
|
||||||
import axios from "axios";
|
|
||||||
import React from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { connect } from "react-redux";
|
|
||||||
import { createStructuredSelector } from "reselect";
|
|
||||||
import { auth, logImEXEvent } from "../../firebase/firebase.utils";
|
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
|
||||||
bodyshop: selectBodyshop,
|
|
||||||
});
|
|
||||||
const mapDispatchToProps = (dispatch) => ({});
|
|
||||||
|
|
||||||
export function JobsDetailHeaderActionexportCustomerData({
|
|
||||||
bodyshop,
|
|
||||||
job,
|
|
||||||
...props
|
|
||||||
}) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const handleExportCustData = async (e) => {
|
|
||||||
logImEXEvent("job_export_cust_data");
|
|
||||||
let PartnerResponse;
|
|
||||||
if (bodyshop.accountingconfig && bodyshop.accountingconfig.qbo) {
|
|
||||||
PartnerResponse = await axios.post(`/qbo/receivables`, {
|
|
||||||
jobIds: [job.id],
|
|
||||||
custDataOnly: true,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
//Default is QBD
|
|
||||||
|
|
||||||
let QbXmlResponse;
|
|
||||||
try {
|
|
||||||
QbXmlResponse = await axios.post(
|
|
||||||
"/accounting/qbxml/receivables",
|
|
||||||
{ jobIds: [job.id], custDataOnly: true },
|
|
||||||
{
|
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
console.log("handle -> XML", QbXmlResponse);
|
|
||||||
} catch (error) {
|
|
||||||
console.log("Error getting QBXML from Server.", error);
|
|
||||||
notification["error"]({
|
|
||||||
message: t("jobs.errors.exporting", {
|
|
||||||
error: "Unable to retrieve QBXML. " + JSON.stringify(error.message),
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
//let PartnerResponse;
|
|
||||||
try {
|
|
||||||
PartnerResponse = await axios.post(
|
|
||||||
"http://localhost:1337/qb/",
|
|
||||||
QbXmlResponse.data,
|
|
||||||
{
|
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.log("Error connecting to quickbooks or partner.", error);
|
|
||||||
notification["error"]({
|
|
||||||
message: t("jobs.errors.exporting-partner"),
|
|
||||||
});
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//Check to see if any of them failed. If they didn't don't execute the update.
|
|
||||||
const failedTransactions = PartnerResponse.data.filter((r) => !r.success);
|
|
||||||
if (failedTransactions.length > 0) {
|
|
||||||
//Uh oh. At least one was no good.
|
|
||||||
failedTransactions.forEach((ft) => {
|
|
||||||
//insert failed export log
|
|
||||||
notification.open({
|
|
||||||
// key: "failedexports",
|
|
||||||
type: "error",
|
|
||||||
message: t("jobs.errors.exporting", {
|
|
||||||
error: ft.errorMessage || "",
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
//Handle Failures.
|
|
||||||
} else {
|
|
||||||
//Insert success export log.
|
|
||||||
|
|
||||||
notification.open({
|
|
||||||
type: "success",
|
|
||||||
key: "jobsuccessexport",
|
|
||||||
message: t("jobs.successes.exported"),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu.Item
|
|
||||||
{...props}
|
|
||||||
onClick={handleExportCustData}
|
|
||||||
key="exportcustdata"
|
|
||||||
disabled={!job.converted}
|
|
||||||
>
|
|
||||||
{t("jobs.actions.exportcustdata")}
|
|
||||||
</Menu.Item>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
export default connect(
|
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)(JobsDetailHeaderActionexportCustomerData);
|
|
||||||
Reference in New Issue
Block a user