update crm and create new customer
parent
831fa8e0ab
commit
4746e3e892
File diff suppressed because it is too large
Load Diff
|
|
@ -4,6 +4,7 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.0.1",
|
||||
"@mdxeditor/editor": "^1.13.2",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
|
|
|
|||
|
|
@ -277,6 +277,7 @@
|
|||
"notes": "Notes"
|
||||
},
|
||||
"buttonNew": "New",
|
||||
"buttonUndo": "Undo",
|
||||
"tabs": {
|
||||
"dealInfo": "Deal Info",
|
||||
"activities": "Activities",
|
||||
|
|
|
|||
|
|
@ -67,3 +67,7 @@
|
|||
content: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.mdx-editor {
|
||||
background: #f4f5f4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Route, Routes } from "react-router-dom";
|
||||
import { Constants, hasOnePermission, hasPermission } from "../../utils";
|
||||
import { useAppContext } from "../../Contexts/AppContext";
|
||||
import { Suspense, lazy } from "react";
|
||||
import { Spin } from "antd";
|
||||
import { lazy } from "react";
|
||||
import { MySupsenseFallback } from "../MySupsenseFallback";
|
||||
|
||||
// Lazy-loaded components
|
||||
const Dashboard = lazy(() => import("../../Pages/Dashboard"));
|
||||
|
|
@ -25,30 +25,6 @@ const Consoles = lazy(() => import("../../Pages/Consoles"));
|
|||
const RoboticsRobots = lazy(() => import("../../Pages/Robotics/Robots"));
|
||||
const Crm = lazy(() => import("../../Pages/Crm"));
|
||||
|
||||
function SuspenseFallback({ children }) {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
textAlign: "center",
|
||||
height: "98.3vh",
|
||||
}}
|
||||
>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AppRoutes({ userSession, setUserSession }) {
|
||||
const appContext = useAppContext();
|
||||
|
||||
|
|
@ -59,9 +35,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<Dashboard />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
|
|
@ -72,9 +48,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<EquipmentDocumentationOverview />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -86,9 +62,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={`${Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION_VIEW}:paramStockId`}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<ViewEquipmentDocumentations />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -100,11 +76,11 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={`${Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION_VIEW}:paramStockId/edit/:paramDocumentationId`}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<ViewEquipmentDocumentations
|
||||
isEditEquipmentDocumentationModalOpen={true}
|
||||
/>
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -116,11 +92,11 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={`${Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION_VIEW}:paramStockId/create`}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<ViewEquipmentDocumentations
|
||||
isCreateEquipmentDocumentationModalOpen={true}
|
||||
/>
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -128,18 +104,18 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={`${Constants.ROUTE_PATHS.GROUP_TASKS}:paramCategory`}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<GroupTasks isGroupTasksViewModalOpen={false} />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={`${Constants.ROUTE_PATHS.GROUP_TASKS}:paramCategory/view/:paramGroupTaskId`}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<GroupTasks isGroupTasksViewModalOpen={true} />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
|
|
@ -150,9 +126,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={Constants.ROUTE_PATHS.GROUP_TASKS_HISTORY}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<GroupTasksHistory />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -160,30 +136,30 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={Constants.ROUTE_PATHS.SCANNERS}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<Scanners />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.USERS}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<AllUsers />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.USER_PROFILE}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<UserProfile
|
||||
userSession={userSession}
|
||||
setUserSession={setUserSession}
|
||||
/>
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
|
|
@ -197,9 +173,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={Constants.ROUTE_PATHS.ADMIN_AREA_ROLES}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<AdminAreaRoles />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -211,9 +187,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={Constants.ROUTE_PATHS.ADMIN_AREA_LOGS}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<AdminAreaLogs />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -230,9 +206,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={Constants.ROUTE_PATHS.ADMIN_AREA_MANAGE}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<AdminAreaManage />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -244,9 +220,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={Constants.ROUTE_PATHS.CONSOLES}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<Consoles />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -258,9 +234,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={Constants.ROUTE_PATHS.ROBOTICS_ROBOTS}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<RoboticsRobots />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -274,9 +250,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path={`${Constants.ROUTE_PATHS.CRM}:paramType/:paramDealPhase`}
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<Crm />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -284,9 +260,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
|
|||
<Route
|
||||
path="*"
|
||||
element={
|
||||
<SuspenseFallback>
|
||||
<MySupsenseFallback>
|
||||
<PageNotFound />
|
||||
</SuspenseFallback>
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
import { Spin } from "antd";
|
||||
import { Suspense } from "react";
|
||||
|
||||
export function MySupsenseFallback({ children }) {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
textAlign: "center",
|
||||
height: "98.3vh",
|
||||
}}
|
||||
>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ const preview = {
|
|||
openDrawerCustomerId: null,
|
||||
currentDrawerCustomer: null,
|
||||
currentDrawerCustomerRef: null,
|
||||
changedDrawerCustomerFieldsRef: null,
|
||||
};
|
||||
|
||||
const CrmContext = createContext(preview);
|
||||
|
|
@ -24,8 +25,9 @@ export function CrmProvider({ children }) {
|
|||
const openDrawerCustomerId = useRef(null);
|
||||
// will be used to store the customer object that is currently being viewed in the drawer
|
||||
const [currentDrawerCustomer, setCurrentDrawerCustomer] = useState(null);
|
||||
// will be set on drawer open and used to check if the customer has changed
|
||||
// will be used to store the customer updated object that is currently being viewed in the drawer
|
||||
const currentDrawerCustomerRef = useRef(null);
|
||||
const changedDrawerCustomerFieldsRef = useRef([]);
|
||||
|
||||
return (
|
||||
<CrmContext.Provider
|
||||
|
|
@ -41,6 +43,7 @@ export function CrmProvider({ children }) {
|
|||
currentDrawerCustomer,
|
||||
setCurrentDrawerCustomer,
|
||||
currentDrawerCustomerRef,
|
||||
changedDrawerCustomerFieldsRef,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ export const ReceivedMessagesCommands = {
|
|||
AdminAreaManageLogManagerServerConnectionAdded: 45,
|
||||
AdminAreaManageLogManagerServerConnectionRemoved: 46,
|
||||
CrmCustomerUpdated: 47,
|
||||
CrmCustomerCreated: 48,
|
||||
};
|
||||
|
||||
// commands sent to the backend server
|
||||
|
|
@ -1030,14 +1031,27 @@ export function handleWebSocketMessage(
|
|||
);
|
||||
break;
|
||||
case ReceivedMessagesCommands.CrmCustomerUpdated:
|
||||
console.log("CrmCustomerUpdated", body);
|
||||
|
||||
console.log("current", crmContext.currentDrawerCustomerRef.current);
|
||||
|
||||
// update drawer customer if it is the same customer
|
||||
if (crmContext.currentDrawerCustomerRef.current !== null) {
|
||||
if (crmContext.currentDrawerCustomerRef.current.Id === body.Id) {
|
||||
crmContext.setCurrentDrawerCustomer(body);
|
||||
for (const property in body) {
|
||||
if (
|
||||
crmContext.changedDrawerCustomerFieldsRef.current.includes(
|
||||
property
|
||||
)
|
||||
)
|
||||
continue;
|
||||
|
||||
if (body[property] !== undefined && property !== "Id") {
|
||||
crmContext.setCurrentDrawerCustomer((obj) => {
|
||||
const newObj = { ...obj };
|
||||
|
||||
newObj[property] = body[property];
|
||||
|
||||
return newObj;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1048,13 +1062,23 @@ export function handleWebSocketMessage(
|
|||
const arrIndex = arr.findIndex((customer) => customer.Id === body.Id);
|
||||
|
||||
if (arrIndex !== -1) {
|
||||
newArr[arrIndex] = body;
|
||||
// only update the changed properties and if the property exists
|
||||
for (const property in body) {
|
||||
if (body[property] !== undefined && property !== "Id") {
|
||||
newArr[arrIndex][property] = body[property];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return newArr;
|
||||
});
|
||||
|
||||
break;
|
||||
case ReceivedMessagesCommands.CrmCustomerCreated:
|
||||
console.log("test");
|
||||
|
||||
crmContext.setCustomers((arr) => [...arr, body]);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error("unknown command", cmd);
|
||||
|
|
|
|||
|
|
@ -28,6 +28,22 @@ import PageNotFound from "../PageNotFound";
|
|||
import { useCrmContext } from "../../Contexts/CrmContext";
|
||||
import MyPagination from "../../Components/MyPagination";
|
||||
|
||||
import "@mdxeditor/editor/style.css";
|
||||
import { MDXEditor } from "@mdxeditor/editor/MDXEditor";
|
||||
import { headingsPlugin } from "@mdxeditor/editor/plugins/headings";
|
||||
import { listsPlugin } from "@mdxeditor/editor/plugins/lists";
|
||||
import { quotePlugin } from "@mdxeditor/editor/plugins/quote";
|
||||
import { thematicBreakPlugin } from "@mdxeditor/editor/plugins/thematic-break";
|
||||
import { toolbarPlugin } from "@mdxeditor/editor/plugins/toolbar";
|
||||
import { BoldItalicUnderlineToggles } from "@mdxeditor/editor/plugins/toolbar/components/BoldItalicUnderlineToggles";
|
||||
import { UndoRedo } from "@mdxeditor/editor/plugins/toolbar/components/UndoRedo";
|
||||
import { linkPlugin } from "@mdxeditor/editor/plugins/link";
|
||||
import { markdownShortcutPlugin } from "@mdxeditor/editor/plugins/markdown-shortcut";
|
||||
import { MySupsenseFallback } from "../../Components/MySupsenseFallback";
|
||||
import { linkDialogPlugin } from "@mdxeditor/editor";
|
||||
import { tablePlugin } from "@mdxeditor/editor";
|
||||
import { frontmatterPlugin } from "@mdxeditor/editor";
|
||||
|
||||
export default function Crm() {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -67,7 +83,6 @@ export default function Crm() {
|
|||
},
|
||||
{
|
||||
title: t("crm.table.createdAt"),
|
||||
|
||||
dataIndex: "createdAt",
|
||||
key: "createdAt",
|
||||
},
|
||||
|
|
@ -91,11 +106,6 @@ export default function Crm() {
|
|||
dataIndex: "createdBy",
|
||||
key: "createdBy",
|
||||
},
|
||||
{
|
||||
title: t("crm.table.notes"),
|
||||
dataIndex: "notes",
|
||||
key: "notes",
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
|
|
@ -113,7 +123,6 @@ export default function Crm() {
|
|||
email: item.Email,
|
||||
lastContact: item.LastContact,
|
||||
createdBy: item.CreatedBy,
|
||||
notes: item.Notes,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -160,7 +169,7 @@ export default function Crm() {
|
|||
wsConnectionCustomEventName,
|
||||
handleCustomersRequest
|
||||
);
|
||||
}, [paramType, paramDealPhase]);
|
||||
}, [paramType, paramDealPhase, crmContext.paginationPage]);
|
||||
|
||||
if (paramDealPhase > segmentedOptions.length) {
|
||||
return <PageNotFound />;
|
||||
|
|
@ -176,8 +185,18 @@ export default function Crm() {
|
|||
>
|
||||
<Typography.Title level={4}>{t(title)}</Typography.Title>
|
||||
|
||||
<Button icon={<PlusOutlined />} onClick={() => console.log("add")}>
|
||||
New
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
crmContext.openDrawerCustomerId.current = "new";
|
||||
crmContext.currentDrawerCustomer = null;
|
||||
crmContext.currentDrawerCustomerRef.current = null;
|
||||
crmContext.changedDrawerCustomerFieldsRef.current = [];
|
||||
|
||||
setIsDrawerOpen(true);
|
||||
}}
|
||||
>
|
||||
{t("crm.buttonNew")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
|
@ -243,20 +262,39 @@ function CustomerDrawer({ isOpen, onClose }) {
|
|||
{
|
||||
key: "1",
|
||||
label: t("crm.tabs.activities"),
|
||||
children: "Tab 2 content",
|
||||
children: <TabContentActivities />,
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
label: t("crm.tabs.notes"),
|
||||
children: "Tab 3 content",
|
||||
children: (
|
||||
<TabContentNotes
|
||||
notes={
|
||||
crmContext.currentDrawerCustomer === null ||
|
||||
crmContext.currentDrawerCustomer.Notes === null
|
||||
? ""
|
||||
: crmContext.currentDrawerCustomer.Notes
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
console.log("isOpen", isOpen);
|
||||
const [activeTab, setActiveTab] = useState(tabItems[0].key);
|
||||
|
||||
useEffect(() => {
|
||||
if (crmContext.openDrawerCustomerId.current === null) return;
|
||||
|
||||
if (crmContext.openDrawerCustomerId.current === "new") {
|
||||
if (isOpen) return;
|
||||
|
||||
// check if something has changed
|
||||
if (crmContext.currentDrawerCustomer === null) return;
|
||||
|
||||
myFetch(`/crm/customer/create`, "POST", crmContext.currentDrawerCustomer);
|
||||
return;
|
||||
}
|
||||
|
||||
const customerRequest = () => {
|
||||
if (!isOpen) return;
|
||||
|
||||
|
|
@ -264,7 +302,6 @@ function CustomerDrawer({ isOpen, onClose }) {
|
|||
`/crm/customer/view/${crmContext.openDrawerCustomerId.current}`,
|
||||
"GET"
|
||||
).then((data) => {
|
||||
console.log("customer", data);
|
||||
crmContext.setCurrentDrawerCustomer(data);
|
||||
crmContext.currentDrawerCustomerRef.current = data;
|
||||
});
|
||||
|
|
@ -278,22 +315,26 @@ function CustomerDrawer({ isOpen, onClose }) {
|
|||
JSON.stringify(crmContext.currentDrawerCustomer) !==
|
||||
JSON.stringify(crmContext.currentDrawerCustomerRef.current)
|
||||
) {
|
||||
console.log("something has changed");
|
||||
// only updated changed fields
|
||||
const updatedCustomer = {};
|
||||
|
||||
Object.keys(crmContext.currentDrawerCustomer).forEach((key) => {
|
||||
if (
|
||||
crmContext.currentDrawerCustomer[key] !==
|
||||
crmContext.currentDrawerCustomerRef.current[key]
|
||||
) {
|
||||
updatedCustomer[key] = crmContext.currentDrawerCustomer[key];
|
||||
}
|
||||
});
|
||||
|
||||
myFetch(
|
||||
`/crm/customer/update/${crmContext.openDrawerCustomerId.current}`,
|
||||
"POST",
|
||||
crmContext.currentDrawerCustomer
|
||||
).then((data) => {
|
||||
console.log("update", data);
|
||||
});
|
||||
} else {
|
||||
console.log("nothing has changed");
|
||||
updatedCustomer
|
||||
);
|
||||
}
|
||||
|
||||
crmContext.openDrawerCustomerId.current = null;
|
||||
crmContext.currentDrawerCustomer = null;
|
||||
crmContext.currentDrawerCustomerRef.current = null;
|
||||
handleCloseDrawer();
|
||||
}
|
||||
|
||||
const handleCustomerRequest = () => customerRequest();
|
||||
|
|
@ -310,16 +351,44 @@ function CustomerDrawer({ isOpen, onClose }) {
|
|||
);
|
||||
}, [isOpen]);
|
||||
|
||||
const handleCloseDrawer = () => {
|
||||
crmContext.openDrawerCustomerId.current = null;
|
||||
crmContext.currentDrawerCustomer = null;
|
||||
crmContext.currentDrawerCustomerRef.current = null;
|
||||
crmContext.changedDrawerCustomerFieldsRef.current = [];
|
||||
|
||||
setActiveTab(tabItems[0].key);
|
||||
};
|
||||
|
||||
const title =
|
||||
crmContext.currentDrawerCustomer === null
|
||||
? "loading..."
|
||||
: `${crmContext.currentDrawerCustomer?.FirstName} ${crmContext.currentDrawerCustomer?.LastName}`;
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={`${crmContext.currentDrawerCustomer?.FirstName} ${crmContext.currentDrawerCustomer?.LastName}`}
|
||||
title={title}
|
||||
placement="right"
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
width={720}
|
||||
extra={
|
||||
<Button
|
||||
onClick={() => {
|
||||
onClose();
|
||||
handleCloseDrawer();
|
||||
}}
|
||||
>
|
||||
{console.log("drawer", crmContext.openDrawerCustomerId.current)}
|
||||
<Tabs defaultActiveKey="0" items={tabItems} centered />
|
||||
{t("crm.buttonUndo")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={(activeKey) => setActiveTab(activeKey)}
|
||||
items={tabItems}
|
||||
centered
|
||||
/>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
|
@ -357,7 +426,14 @@ function CollapseContainer({ children, label }) {
|
|||
function TabContentDealInfo() {
|
||||
const crmContext = useCrmContext();
|
||||
|
||||
const addToChangedFields = (value) => {
|
||||
if (!crmContext.changedDrawerCustomerFieldsRef.current.includes(value)) {
|
||||
crmContext.changedDrawerCustomerFieldsRef.current.push(value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<MySupsenseFallback>
|
||||
<Space direction="vertical" style={{ display: "flex" }}>
|
||||
<CollapseContainer
|
||||
label={t("crm.tabContent.dealInfo.collapseDealStatus.label")}
|
||||
|
|
@ -368,16 +444,19 @@ function TabContentDealInfo() {
|
|||
initialValue={crmContext.currentDrawerCustomer?.Pipeline}
|
||||
>
|
||||
<Select
|
||||
value={crmContext.currentDrawerCustomer?.Pipeline}
|
||||
value={
|
||||
crmContext.currentDrawerCustomer?.Pipeline === undefined
|
||||
? 1
|
||||
: crmContext.currentDrawerCustomer?.Pipeline
|
||||
}
|
||||
onChange={(value) => {
|
||||
//setSelectedPipeline(value);
|
||||
//setSelectedDealPhase(0);
|
||||
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
Pipeline: value,
|
||||
DealPhase: 0,
|
||||
DealPhase: 1,
|
||||
});
|
||||
|
||||
addToChangedFields("Pipeline");
|
||||
}}
|
||||
options={[
|
||||
{
|
||||
|
|
@ -397,13 +476,19 @@ function TabContentDealInfo() {
|
|||
initialValue={crmContext.currentDrawerCustomer?.DealPhase}
|
||||
>
|
||||
<Select
|
||||
value={crmContext.currentDrawerCustomer?.DealPhase}
|
||||
onChange={(value) =>
|
||||
value={
|
||||
crmContext.currentDrawerCustomer?.DealPhase === undefined
|
||||
? 1
|
||||
: crmContext.currentDrawerCustomer?.DealPhase
|
||||
}
|
||||
onChange={(value) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
DealPhase: value,
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
addToChangedFields("DealPhase");
|
||||
}}
|
||||
options={t(
|
||||
crmContext.currentDrawerCustomer?.Pipeline === 1
|
||||
? "crm.dmcPipeline.segmentedOptions"
|
||||
|
|
@ -433,12 +518,14 @@ function TabContentDealInfo() {
|
|||
>
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.FirstName}
|
||||
onChange={(e) =>
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
FirstName: e.target.value,
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
addToChangedFields("FirstName");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
|
@ -449,12 +536,14 @@ function TabContentDealInfo() {
|
|||
>
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.LastName}
|
||||
onChange={(e) =>
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
LastName: e.target.value,
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
addToChangedFields("LastName");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
|
|
@ -467,12 +556,14 @@ function TabContentDealInfo() {
|
|||
>
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.Telephone}
|
||||
onChange={(e) =>
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
Telephone: e.target.value,
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
addToChangedFields("Telephone");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
|
|
@ -483,12 +574,14 @@ function TabContentDealInfo() {
|
|||
>
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.Email}
|
||||
onChange={(e) =>
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
Email: e.target.value,
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
addToChangedFields("Email");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
|
|
@ -499,7 +592,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseMasterDataOfContact.company"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.Company}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
Company: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("Company");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
|
@ -507,7 +610,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseMasterDataOfContact.zipCode"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.ZipCode}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
ZipCode: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("ZipCode");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
|
||||
|
|
@ -517,7 +630,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseMasterDataOfContact.address"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.Address}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
Address: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("Address");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
|
@ -525,7 +648,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseMasterDataOfContact.city"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.City}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
City: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("City");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
|
||||
|
|
@ -535,7 +668,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseMasterDataOfContact.country"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.Country}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
Country: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("Country");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
|
@ -543,7 +686,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseMasterDataOfContact.federalState"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.FederalState}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
FederalState: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("FederalState");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
|
||||
|
|
@ -553,7 +706,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseMasterDataOfContact.website"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.Website}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
Website: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("Website");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
|
@ -561,7 +724,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseMasterDataOfContact.leadOrigin"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.LeadOrigin}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
LeadOrigin: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("LeadOrigin");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
</CollapseContainer>
|
||||
|
|
@ -575,7 +748,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseSetterInfo.numberOfEmployees"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.NumberOfEmployees}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
NumberOfEmployees: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("NumberOfEmployees");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
|
@ -583,7 +766,19 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseSetterInfo.numberOfJobsSearchedFor"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={
|
||||
crmContext.currentDrawerCustomer?.NumberOfJobsSearchedFor
|
||||
}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
NumberOfJobsSearchedFor: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("NumberOfJobsSearchedFor");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
|
||||
|
|
@ -591,7 +786,17 @@ function TabContentDealInfo() {
|
|||
<Form.Item
|
||||
label={t("crm.tabContent.dealInfo.collapseSetterInfo.jobTitle")}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.JobTitle}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
JobTitle: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("JobTitle");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
|
@ -599,7 +804,19 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseSetterInfo.numberOfEmployeesRequired"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={
|
||||
crmContext.currentDrawerCustomer?.NumberOfEmployeesRequired
|
||||
}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
NumberOfEmployeesRequired: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("NumberOfEmployeesRequired");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
|
||||
|
|
@ -609,13 +826,35 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseSetterInfo.howLongHadHeBeenSearching"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={
|
||||
crmContext.currentDrawerCustomer?.HowLongHadHeBeenSearching
|
||||
}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
HowLongHadHeBeenSearching: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("HowLongHadHeBeenSearching");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("crm.tabContent.dealInfo.collapseSetterInfo.turnover")}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.Turnover}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
Turnover: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("Turnover");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
</CollapseContainer>
|
||||
|
|
@ -629,7 +868,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseDealProperties.dateOfcompletion"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.DateOfCompletion}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
DateOfCompletion: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("DateOfCompletion");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
|
@ -637,7 +886,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseDealProperties.orderVolume"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.OrderVolume}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
OrderVolume: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("OrderVolume");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
|
||||
|
|
@ -647,7 +906,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseDealProperties.numberOfInstallments"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.NumberOfInstallments}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
NumberOfInstallments: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("NumberOfInstallments");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
|
@ -655,7 +924,19 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseDealProperties.amountsOfTheInstallments"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={
|
||||
crmContext.currentDrawerCustomer?.AmountsOfTheInstallments
|
||||
}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
AmountsOfTheInstallments: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("AmountsOfTheInstallments");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
|
||||
|
|
@ -665,7 +946,17 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseDealProperties.bookedPackages"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.BookedPackages}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
BookedPackages: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("BookedPackages");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
|
@ -673,10 +964,68 @@ function TabContentDealInfo() {
|
|||
"crm.tabContent.dealInfo.collapseDealProperties.assignedEmployee"
|
||||
)}
|
||||
>
|
||||
<Input />
|
||||
<Input
|
||||
value={crmContext.currentDrawerCustomer?.AssignedEmployee}
|
||||
onChange={(e) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
AssignedEmployee: e.target.value,
|
||||
});
|
||||
|
||||
addToChangedFields("AssignedEmployee");
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Content>
|
||||
</CollapseContainer>
|
||||
</Space>
|
||||
</MySupsenseFallback>
|
||||
);
|
||||
}
|
||||
|
||||
function TabContentActivities() {
|
||||
return (
|
||||
<MySupsenseFallback>
|
||||
<div>Coming soon</div>
|
||||
</MySupsenseFallback>
|
||||
);
|
||||
}
|
||||
|
||||
function TabContentNotes({ notes }) {
|
||||
const crmContext = useCrmContext();
|
||||
|
||||
return (
|
||||
<MySupsenseFallback>
|
||||
<MDXEditor
|
||||
key={crmContext.currentDrawerCustomer?.Id}
|
||||
className="mdx-editor"
|
||||
markdown={notes}
|
||||
onChange={(value) => {
|
||||
crmContext.setCurrentDrawerCustomer({
|
||||
...crmContext.currentDrawerCustomer,
|
||||
Notes: value,
|
||||
});
|
||||
}}
|
||||
plugins={[
|
||||
listsPlugin(),
|
||||
quotePlugin(),
|
||||
headingsPlugin(),
|
||||
linkPlugin(),
|
||||
linkDialogPlugin(),
|
||||
tablePlugin(),
|
||||
thematicBreakPlugin(),
|
||||
frontmatterPlugin(),
|
||||
markdownShortcutPlugin(),
|
||||
toolbarPlugin({
|
||||
toolbarContents: () => (
|
||||
<>
|
||||
<UndoRedo />
|
||||
<BoldItalicUnderlineToggles />
|
||||
</>
|
||||
),
|
||||
}),
|
||||
]}
|
||||
/>
|
||||
</MySupsenseFallback>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue