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