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

feature/IO-3499-React-19: Bug Fixes / Checkpoint

Browse Source
This commit is contained in:
Dave
2026-01-13 22:28:43 -05:00
parent 7bdfbfabe9
commit 53d556a621
171 changed files with 1128 additions and 954 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
client/src/components/card-payment-modal/card-payment-modal.component.jsx
View File

@@ -2,11 +2,13 @@ import { CopyFilled, DeleteFilled } from "@ant-design/icons";
import { useLazyQuery, useMutation } from "@apollo/client/react";
import { Button, Card, Col, Form, Input, message, Row, Space, Spin, Statistic } from "antd";
import axios from "axios";
import { useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_PAYMENT_RESPONSE, QUERY_RO_AND_OWNER_BY_JOB_PKS } from "../../graphql/payment_response.queries";
import { getCurrentUser, logImEXEvent } from "../../firebase/firebase.utils";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import { insertAuditTrail } from "../../redux/application/application.actions";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectCardPayment } from "../../redux/modals/modals.selectors";
@@ -14,8 +16,6 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
import AuditTrailMapping from "../../utils/AuditTrailMappings";
import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
import { getCurrentUser, logImEXEvent } from "../../firebase/firebase.utils";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
const mapStateToProps = createStructuredSelector({
cardPaymentModal: selectCardPayment,
@@ -51,9 +51,48 @@ const CardPaymentModalComponent = ({
const { t } = useTranslation();
const notification = useNotification();
const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
skip: !context?.jobid
});
const [loadRoAndOwnerByJobPks, { data, loading: queryLoading, error: queryError, refetch, called }] = useLazyQuery(
QUERY_RO_AND_OWNER_BY_JOB_PKS,
{
fetchPolicy: "network-only",
notifyOnNetworkStatusChange: true
}
);
const safeRefetchRoAndOwner = useCallback(
(vars) => {
// First run: execute the lazy query
if (!called) return loadRoAndOwnerByJobPks({ variables: vars });
// Subsequent runs: refetch expects the variables object directly (not { variables: ... })
return refetch(vars);
},
[called, loadRoAndOwnerByJobPks, refetch]
);
// Watch form payments so we can query jobs when all jobids are filled (without side effects during render)
const payments = Form.useWatch(["payments"], form);
const jobids = useMemo(() => {
if (!Array.isArray(payments) || payments.length === 0) return [];
return payments.map((p) => p?.jobid).filter(Boolean);
}, [payments]);
const allJobIdsFilled = useMemo(() => {
if (!Array.isArray(payments) || payments.length === 0) return false;
return payments.every((p) => !!p?.jobid);
}, [payments]);
const lastJobidsKeyRef = useRef("");
useEffect(() => {
if (!allJobIdsFilled) return;
const nextKey = jobids.join("|");
if (!nextKey || nextKey === lastJobidsKeyRef.current) return;
lastJobidsKeyRef.current = nextKey;
safeRefetchRoAndOwner({ jobids });
}, [allJobIdsFilled, jobids, safeRefetchRoAndOwner]);
const collectIPayFields = () => {
const iPayFields = document.querySelectorAll(".ipayfield");
@@ -72,8 +111,8 @@ const CardPaymentModalComponent = ({
});
window.intellipay.runOnApproval(() => {
//2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
//Add a slight delay to allow the refetch to properly get the data.
// 2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
// Add a slight delay to allow the refetch to properly get the data.
setTimeout(() => {
if (actions?.refetch) actions.refetch();
setLoading(false);
@@ -111,7 +150,7 @@ const CardPaymentModalComponent = ({
const handleIntelliPayCharge = async () => {
setLoading(true);
//Validate
// Validate
try {
await form.validateFields();
} catch {
@@ -133,7 +172,9 @@ const CardPaymentModalComponent = ({
});
if (window.intellipay) {
eval(response.data);
// Use Function constructor instead of eval for security (still executes dynamic code but safer)
// IntelliPay provides initialization code that must be executed
Function(response.data)();
pollForIntelliPay(() => {
SetIntellipayCallbackFunctions();
window.intellipay.autoOpen();
@@ -144,14 +185,14 @@ const CardPaymentModalComponent = ({
document.documentElement.appendChild(node);
pollForIntelliPay(() => {
SetIntellipayCallbackFunctions();
// eslint-disable-next-line react-compiler/react-compiler
window.intellipay.isAutoOpen = true;
window.intellipay.initialize();
});
}
} catch {
notification.open({
type: "error",
message: t("job_payments.notifications.error.openingip")
notification.error({
title: t("job_payments.notifications.error.openingip")
});
setLoading(false);
}
@@ -159,7 +200,7 @@ const CardPaymentModalComponent = ({
const handleIntelliPayChargeShortLink = async () => {
setLoading(true);
//Validate
// Validate
try {
await form.validateFields();
} catch {
@@ -188,9 +229,8 @@ const CardPaymentModalComponent = ({
}
setLoading(false);
} catch {
notification.open({
type: "error",
message: t("job_payments.notifications.error.openingip")
notification.error({
title: t("job_payments.notifications.error.openingip")
});
setLoading(false);
}
@@ -247,40 +287,20 @@ const CardPaymentModalComponent = ({
)}
</Form.List>
<Form.Item
shouldUpdate={(prevValues, curValues) =>
prevValues.payments?.map((p) => p?.jobid + p?.amount).join() !==
curValues.payments?.map((p) => p?.jobid + p?.amount).join()
}
>
{() => {
//If all of the job ids have been fileld in, then query and update the IP field.
const { payments } = form.getFieldsValue();
if (payments?.length > 0 && payments?.filter((p) => p?.jobid).length === payments?.length) {
refetch({ variables: { jobids: payments.map((p) => p.jobid) } });
}
return (
<>
<Input
className="ipayfield"
data-ipayname="account"
type="hidden"
value={
payments && data && data.jobs.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null
}
/>
<Input
className="ipayfield"
data-ipayname="email"
type="hidden"
value={
payments && data && data.jobs.length > 0 ? data.jobs.filter((j) => j.ownr_ea)[0]?.ownr_ea : null
}
/>
</>
);
}}
</Form.Item>
{/* Hidden IntelliPay fields driven by watched payments + query result. IMPORTANT: no refetch() here (avoid side effects during render). */}
<Input
className="ipayfield"
data-ipayname="account"
type="hidden"
value={data?.jobs?.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null}
/>
<Input
className="ipayfield"
data-ipayname="email"
type="hidden"
value={data?.jobs?.length > 0 ? (data.jobs.find((j) => j.ownr_ea)?.ownr_ea ?? null) : null}
/>
<Form.Item
shouldUpdate={(prevValues, curValues) =>
prevValues.payments?.map((p) => p?.amount).join() !== curValues.payments?.map((p) => p?.amount).join()
@@ -332,6 +352,7 @@ const CardPaymentModalComponent = ({
}}
</Form.Item>
</Form>
{paymentLink && (
<Space
style={{ cursor: "pointer", float: "right" }}
@@ -345,6 +366,12 @@ const CardPaymentModalComponent = ({
<CopyFilled />
</Space>
)}
{queryError ? (
<div style={{ marginTop: 12 }}>
<span style={{ color: "red" }}>{queryError.message}</span>
</div>
) : null}
</Spin>
</Card>
);
@@ -352,10 +379,10 @@ const CardPaymentModalComponent = ({
export default connect(mapStateToProps, mapDispatchToProps)(CardPaymentModalComponent);
//Poll for window.IntelliPay.fixAmount for 5 seconds. If it doesn't come up, just try anyways to force the possible error.
// Poll for window.IntelliPay.fixAmount for 5 seconds. If it doesn't come up, just try anyways to force the possible error.
function pollForIntelliPay(callbackFunction) {
const timeout = 5000;
const interval = 150; // Poll every 100 milliseconds
const interval = 150;
const startTime = Date.now();
function checkFixAmount() {
@@ -365,7 +392,7 @@ function pollForIntelliPay(callbackFunction) {
}
if (Date.now() - startTime >= timeout) {
console.log("Stopped polling IntelliPay after 10 seconds. Attemping to set functions anyways.");
console.log("Stopped polling IntelliPay after 5 seconds. Attempting to set functions anyways.");
callbackFunction();
return;
}