\n {!token ? (\n <>\n \n \n ) : (\n <>\n )}\n\n {token ? (\n \n
\n )}\n \n\n \n \n {generatingPdf &&
\n ) : (\n \n {\n setSendEmail(true);\n }}\n disabled={\n generatingPdf ||\n estimationDetails.changeOrderDetails?.signedByClient\n ?._id ||\n !estimationDetails.changeOrderDetails\n ?.signedByOrganization?._id\n }\n >\n Send Change Order to Customer\n \n
\n \n \n
\n \n
\n \n
- \n
- \n Subtotal :\n \n {NumberFormat(totalChangedOrderWithoutTax)}\n\n \n {estimationDetails.tax?.status &&\n estimationDetails.tax?.percentage > 0 ? (\n
- \n Tax {estimationDetails.tax?.percentage}%\n :\n \n {NumberFormat(totalChangedTax)}\n\n \n ) : (\n \"\"\n )}\n
- \n Change Order Total\n :\n \n {NumberFormat(\n estimationDetails.changeOrderDetails?.changedPrice,\n )}\n\n \n
\n \n\n
Remaining Payments
\n {!token ? (\n\n
\n )}\n \n \n \n {tempCustomerSignatures ||\n estimationDetails.changeOrderDetails?.signedByClient\n ?.signature ? (\n {\n setESignatureOpenFor(SIGNATURE_FOR.CUSTOMER);\n }}\n >\n Add Customer Signature\n \n )}\n
\n \n \n {tempOrgSignatures ||\n estimationDetails.changeOrderDetails?.signedByOrganization\n ?.signature ? (\n \n setESignatureOpenFor(SIGNATURE_FOR.CONTRACTOR)\n }\n // disabled={!editable}\n >\n Add Contractor Signature\n \n )}\n {/* */}\n
\n \n \n\n {featuredIcon}
\n {MODAL_TEXT[changePlanTo]}
\n \n {planDetails?.isDownGrade ? (\n currentPlan?.replace(\"Yearly\", \"\") !== planDetails?.selectedPlan ? (\n DOWNGRADE_NOTE(planDetails?.incomingInvoiceDate)[currentPlan]\n ) : (\n \"\"\n )\n ) : (\n \n
\n )}\n \n \n Unlock access to our new premium features!\n
\n \n changeType(\"Monthly\")}\n className={classNames(\"w-50\", {\n \"apply-btn\": type === \"Monthly\",\n \"clear-filter\": type === \"Yearly\",\n })}\n >\n Billed Monthly\n \n changeType(\"Yearly\")}\n className={classNames(\"w-50\", {\n \"apply-btn\": type === \"Yearly\",\n \"clear-filter\": type === \"Monthly\",\n })}\n >\n Billed Annually - You Save 20%\n \n
\n \n \n \n \n
\n {!planDetails?.isDownGrade && planDetails?.paymentCharge && (\n \n {capIcon}{\" \"}\n
\n \n {CURRENT_PLAN_TEXT[currentPlan]}\n
\n Current Plan
\n {checkIcon}
\n \n {capIcon}{\" \"}\n
\n \n \n {CHANGE_TO_PLAN_TEXT[changePlanTo]}\n
\n \n {planDetails?.isDownGrade\n ? currentPlan?.replace(\"Yearly\", \"\") !==\n planDetails?.selectedPlan\n ? DOWNGRADE_TEXT?.[changePlanTo]\n : \"\"\n : planDetails?.selectedPlan?.includes(\"Yearly\")\n ? `Save 20% On An Annual Plan`\n : `Access To All New Features`}\n
\n \n You will be charged{\" \"}\n \n {NumberFormat(planDetails?.paymentCharge)}\n {\" \"}\n Today including a discount for the remaining days in your current\n billing cycle.\n
\n )}\n \n {planDetails?.isDownGrade\n ? `Your Next Billing Date is: ${moment(\n planDetails?.incomingInvoiceDate,\n ).format(\"MM/DD/YYYY\")}`\n : `Your Next Billing Date After Today Is: ${moment(\n planDetails?.incomingInvoiceDate,\n ).format(\"MM/DD/YYYY\")}`}\n
\n \n handleConfirm()}\n disabled={changingPlan}\n >\n {changingPlan ? \"Changing Plan...\" : \"Confirm\"}\n \n
\n \n \n );\n};\n\nexport default ChangablePlan;\n","import { Dropdown, Menu, message, Modal } from \"antd\";\nimport React from \"react\";\n\nimport { deleteExpense } from \"../../../../api/expense\";\nimport {\n edit3,\n teamDelete,\n temaDotIcon,\n viewAttachmentIcon,\n} from \"../../../../utils/svg.file\";\n\nconst ExpenseActions = ({\n setEditExpense,\n handleShowAttachment,\n record,\n refetchTableData,\n projectId,\n serviceDraggableId,\n breakdownId,\n hasExpensePlan,\n}) => {\n const handleDeleteExpense = (record) => {\n Modal.confirm({\n title: projectId\n ? \"Are you sure you want to remove this expense allocation?\"\n : \"Are you sure you want to delete this expense?\",\n content: projectId\n ? null\n : \"Deleting this expense will also remove allocations across all the projects.\",\n okText: \"Yes, Delete\",\n okType: \"danger\",\n cancelText: \"Cancel\",\n onOk: async () => {\n const showError = () =>\n message.error({\n content: \"Failed to delete. Try again later.\",\n });\n try {\n const res = await deleteExpense({\n expenseId: record?.expenseId ?? record?._id,\n projectId,\n serviceDraggableId,\n breakdownId,\n });\n if (res?.remote === \"success\") {\n message.success({\n content: \"Expense deleted successfully!\",\n });\n refetchTableData();\n } else {\n showError();\n }\n } catch (error) {\n showError();\n }\n },\n onCancel() {\n console.log(\"Cancel clicked\");\n },\n });\n };\n\n return (\n \n (\n \n )}\n trigger={[\"click\"]}\n >\n e.preventDefault()}>{temaDotIcon}\n \n
\n );\n};\n\nexport default ExpenseActions;\n","import { CloseOutlined } from \"@ant-design/icons\";\nimport { Button, Col, Divider, Input, message, Row } from \"antd\";\nimport React, { useState } from \"react\";\n\nimport { addVendorAPI, updateVendorAPI } from \"../../../api/catalogue\";\nimport { contactFormat, removeFormat } from \"../../../utils/javascript\";\n\nexport default function AddEditVendorModal(props) {\n const [vendor, setVendor] = useState({\n name: props?.editVendor?.name || \"\",\n address: props?.editVendor?.address || \"\",\n email: props?.editVendor?.email || \"\",\n phoneNumber: contactFormat(props?.editVendor?.phone || \"\"),\n active: props?.editVendor ? props?.editVendor?.active : true,\n id: props?.editVendor?.id || \"\",\n });\n const [errors, setErrors] = useState({\n name: \"\",\n email: \"\",\n phoneNumber: \"\",\n });\n\n const [loading, setLoading] = useState(false);\n\n const handleAddVendor = async () => {\n const vendorError = (error) => {\n const errorMSG =\n error && !Array.isArray(error)\n ? error\n : props?.editVendor\n ? \"Failed to update vendor\"\n : \"Failed to add vendor\";\n\n message.error(errorMSG);\n };\n const data = {\n ...(vendor.name && { name: vendor.name }),\n ...(vendor.address && { address: vendor.address }),\n ...(vendor.email && { email: vendor.email }),\n ...(vendor.active && { active: vendor.active }),\n ...(vendor.phoneNumber && { phone: removeFormat(vendor.phoneNumber) }),\n };\n setLoading(true);\n try {\n const response = props?.editVendor\n ? await updateVendorAPI(props?.editVendor?._id, data)\n : await addVendorAPI(data);\n if (response?.remote === \"success\") {\n message.success(\n props?.editVendor\n ? \"Vendor updated successfully\"\n : \"Vendor added successfully\",\n );\n props?.getVendorData(\n props?.search,\n props?.pagination?.page,\n props?.pagination?.limit,\n );\n props?.setEditVendor && props?.setEditVendor({});\n setVendor({\n name: \"\",\n address: \"\",\n email: \"\",\n phoneNumber: \"\",\n });\n setErrors({\n name: \"\",\n email: \"\",\n phoneNumber: \"\",\n });\n props?.handleVendorsCancel();\n } else {\n vendorError(response?.errors?.errors);\n }\n } catch (error) {\n vendorError();\n } finally {\n setLoading(false);\n }\n };\n\n const Validation = (name, value) => {\n const arr = [];\n switch (name) {\n case \"name\":\n if (!value?.trim()) {\n arr.push(\"Vendor name is required\");\n }\n return arr;\n\n case \"email\":\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (value && !value.match(emailRegex)) {\n arr.push(\"Please Enter Valid Email\");\n }\n return arr;\n case \"phoneNumber\":\n if (\n value &&\n removeFormat(value) &&\n !removeFormat(value).match(/^\\d{10}/g)\n ) {\n arr.push(\"Please Enter Valid Phone Number\");\n }\n return arr;\n default:\n return arr;\n }\n };\n\n const checkErrorList = (item) => {\n const validationErrors = {};\n Object.keys(item)?.forEach((name) => {\n const err = Validation(name, item[name]);\n if (err && Object.keys(err)?.length) {\n validationErrors[name] = err?.join();\n }\n });\n return validationErrors;\n };\n\n const handleInputChange = (field) => (e) => {\n setVendor((prev) => ({\n ...prev,\n [field]: e.target.value,\n }));\n if (field === \"phoneNumber\") {\n const formattedPhoneNumber = contactFormat(e.target.value);\n setVendor((prev) => ({\n ...prev,\n phoneNumber: formattedPhoneNumber,\n }));\n }\n\n const error = Validation(field, e.target.value);\n setErrors((prev) => ({\n ...prev,\n [field]: error,\n }));\n };\n\n const handleSubmit = () => {\n const error = checkErrorList(vendor);\n if (Object.keys(error)?.length) {\n setErrors(error);\n return;\n }\n handleAddVendor();\n };\n\n const handleVendorsCancel = () => {\n props?.setEditVendor && props?.setEditVendor({});\n setVendor({\n name: \"\",\n address: \"\",\n email: \"\",\n phoneNumber: \"\",\n });\n setErrors({\n name: \"\",\n email: \"\",\n phoneNumber: \"\",\n });\n props?.handleVendorsCancel();\n };\n\n return (\n \n \n \n
\n
\n );\n}\n","import { Modal, Spin } from \"antd\";\nimport axios from \"axios\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { createValidUrl } from \"../../../../utils/commonFuctions\";\nimport AttachmentCarousel from \"./AttachmentCarousel\";\n\nconst ViewAttachment = ({ fileUrls, handleCancel, isModalOpen }) => {\n const [fileContents, setFileContents] = useState({});\n const [currentIndex, setCurrentIndex] = useState(0);\n const [fileUrlConverted, setFileUrlConverted] = useState([]);\n\n useEffect(() => {\n if (fileUrls) {\n const files = Array.isArray(fileUrls) ? fileUrls : [fileUrls];\n setFileUrlConverted(files);\n }\n }, [fileUrls]);\n\n useEffect(() => {\n const currentFileData = fileContents?.[fileUrlConverted?.[currentIndex]];\n if (\n fileUrlConverted?.length > 0 &&\n !currentFileData?.fileData &&\n !currentFileData?.isLoading\n ) {\n fetchFile(fileUrlConverted[currentIndex]);\n }\n }, [fileUrlConverted, currentIndex]);\n\n const fetchFile = async (url) => {\n try {\n const validURL = await createValidUrl(url);\n setFileContents((prev) => ({\n ...prev,\n [url]: { fileData: null, isLoading: true },\n }));\n const response = await axios.get(validURL, {\n responseType: \"blob\",\n });\n\n const contentType = response.headers[\"content-type\"];\n let fileType = \"\";\n if (contentType.startsWith(\"image/\")) {\n fileType = \"image\";\n } else if (contentType === \"application/pdf\") {\n fileType = \"pdf\";\n } else {\n fileType = \"unsupported\";\n }\n setFileContents((prev) => ({\n ...prev,\n [url]: { fileData: response.data, fileType, isLoading: false },\n }));\n } catch (error) {\n console.error(\"Error fetching file:\", error);\n setFileContents((prev) => ({\n ...prev,\n [url]: { ...prev?.[url], fileType: \"error\" },\n }));\n } finally {\n setFileContents((prev) => ({\n ...prev,\n [url]: { ...prev?.[url], isLoading: false },\n }));\n }\n };\n return (\n \n
\n {props?.editVendor ? \"Edit Vendor\" : \"Add Vendor\"}
\nPlease enter your vendor's information to continue.
\n{errors.name}
\n )}\n \n {errors.email}
\n )}\n \n \n {errors.phoneNumber}\n
\n )}\n \n \n \n \n {props?.editVendor ? \"Update Vendor\" : \"Add Vendor\"}\n \n
\n \n \n {fileUrlConverted?.length ? (\n fileUrlConverted?.map((url) => {\n const { fileData, fileType, isLoading } =\n fileContents?.[url] ?? {};\n return (\n
\n );\n })\n ) : (\n \n {isLoading ? (\n \n
\n ) : fileType === \"image\" ? (\n Unsupported file type.
\n ) : (\n fileType === \"error\" &&Error loading file.
\n )}\nNo attachment is uploaded.
\n )}\n \n \n \n );\n};\n\nexport default ViewAttachment;\n","import { Button, Col, Input, Radio, Row } from \"antd\";\nimport { useState } from \"react\";\n\nimport SmallLoader from \"../../../loader/smallLoader\";\n\nconst options = [\n \"Don’t see the Value\",\n \"Customer Support\",\n \"Doesn't Work For My Company\",\n \"Too Expensive\",\n \"Other\",\n];\n\nfunction CancelOne({\n handleCancel,\n handleKeepAccount,\n selectedOption,\n setSelectedOption,\n other,\n setOther,\n showCancelOneErr,\n}) {\n const [loader] = useState(false);\n\n const handleChange = (e) => {\n setSelectedOption(e.target.value);\n };\n\n return (\n \n
\n );\n}\nexport default CancelOne;\n","import { Button, Col, Row } from \"antd\";\nimport TextArea from \"antd/lib/input/TextArea\";\n\nimport SmallLoader from \"../../../loader/smallLoader\";\n\nfunction CancelTwo({\n handleCancel,\n handleKeepAccount,\n cancelReason,\n setCancelReason,\n showTwoErr,\n loader,\n}) {\n const handleInputText = (e) => {\n setCancelReason({ ...cancelReason, [e.target.name]: e.target.value });\n };\n\n return (\n \n We’re sorry to see you go.\n
\n\n
\n What is the primary reason you are deciding to cancel?*
\n\n {loader && (\n \n \n Cancel Plan\n \n \n \n Keep Account\n \n \n
\n
\n \n
\n )}\n \n \n {options.map((option) => (\n \n {selectedOption === \"Other\" && (\n {\n setOther(e.target.value);\n }}\n />\n )}\n
\n \n \n \n {option}\n \n
\n ))}\n \n {showCancelOneErr && \"Please give a reason\"}\n
\n \n
\n );\n}\nexport default CancelTwo;\n","/* eslint-disable no-unused-vars */\nimport { Button, Card, message } from \"antd\";\nimport moment from \"moment\";\nimport React, { useState } from \"react\";\n\nimport { changeCurrentPlan } from \"../../../../api/billing\";\nimport { NumberFormat } from \"../../../../utils/numberFormat\";\nimport { capIcon, checkIcon, featuredIcon } from \"../../../../utils/svg.file\";\nimport {\n CHANGE_TO_PLAN_TEXT,\n CURRENT_PLAN_TEXT,\n DOWNGRADE_NOTE,\n DOWNGRADE_TEXT,\n MODAL_TEXT,\n yearlyPlans,\n} from \"./helper\";\n\nconst UpgradeDowngradePlan = ({\n handleCancel,\n planId,\n changePlanDetails,\n getBillingDetails,\n setConvertToInvoice,\n handleConfirmChange,\n isCardDeclined,\n handleConfirmCallback,\n}) => {\n const [changingPlan, setChangingPlan] = useState(false);\n const selectedPlan = changePlanDetails?.selectedPlan;\n const currentPlan = changePlanDetails?.currentPlanName;\n const isDownGrade = changePlanDetails?.isDownGrade;\n const isUpToYear = changePlanDetails?.selectedPlan?.includes(\"Yearly\");\n const handleConfirm = async () => {\n setChangingPlan({ [planId]: true });\n const payload = {\n planId,\n };\n const response = await changeCurrentPlan(payload);\n if (response.remote === \"success\") {\n if (handleConfirmCallback) {\n handleConfirmCallback();\n } else {\n handleCancel();\n }\n if (\n setConvertToInvoice &&\n (selectedPlan === \"essential\" || selectedPlan === \"essentialYear\")\n ) {\n setConvertToInvoice(true);\n }\n if (getBillingDetails) getBillingDetails();\n setChangingPlan({ [planId]: false });\n } else {\n message.error(\n response?.errors?.errors?.error ||\n response?.errors?.errors?.message ||\n \"Something went wrong!\",\n );\n setChangingPlan({ [planId]: false });\n }\n };\n\n return (\n <>\n \n
\n \n {loader && (\n \n \n Cancel Plan\n \n \n \n Keep Account\n \n \n
\n
\n \n
\n )}\n \n \n
\n \n \n {showTwoErr?.cancelingReason && \"Please give an explanation\"}\n
\n \n \n
\n \n \n {showTwoErr?.whatFeatures && \"Please specify features\"}\n
\n {featuredIcon}
\n {MODAL_TEXT?.[selectedPlan]}
\n \n {isDownGrade ? (\n currentPlan?.replace(\"Yearly\", \"\") !== selectedPlan ? (\n DOWNGRADE_NOTE(changePlanDetails?.incomingInvoiceDate)[currentPlan]\n ) : (\n \"\"\n )\n ) : (\n \n
\n )}\n \n \n Unlock access to our new premium features!\n
\n \n \n \n \n
\n {!changePlanDetails?.isDownGrade && (\n \n {capIcon}{\" \"}\n
\n \n {CURRENT_PLAN_TEXT?.[currentPlan]}\n {/* Essentials Monthly Plan: $197.99/Month */}\n
\n \n Current Plan\n
\n {checkIcon}
\n \n {capIcon}{\" \"}\n
\n \n \n {CHANGE_TO_PLAN_TEXT?.[selectedPlan]}\n
\n \n {isDownGrade\n ? currentPlan?.replace(\"Yearly\", \"\") !== selectedPlan\n ? DOWNGRADE_TEXT?.[currentPlan]\n : \"\"\n : isUpToYear\n ? `Save 20% On An Annual Plan`\n : `Access To All New Features`}\n
\n \n You will be charged{\" \"}\n \n {NumberFormat(changePlanDetails?.paymentCharge)}\n {\" \"}\n Today including a discount for the remaining days in your current\n billing cycle.\n
\n )}\n \n {changePlanDetails?.isDownGrade\n ? `Your Next Billing Date is: ${moment(\n changePlanDetails?.incomingInvoiceDate,\n ).format(\"MM/DD/YYYY\")}`\n : `Your Next Billing Date After Today Is: ${moment(\n changePlanDetails?.incomingInvoiceDate,\n ).format(\"MM/DD/YYYY\")}`}\n
\n \n handleCancel()}\n >\n Cancel\n \n \n isCardDeclined ? handleConfirmChange() : handleConfirm()\n }\n disabled={changingPlan?.[planId]}\n >\n {changingPlan?.[planId] ? (\n Changing your plan...\n ) : (\n Confirm\n )}\n \n
\n \n );\n};\n\nexport default UpgradeDowngradePlan;\n","import React from \"react\";\n\nimport { plans } from \"../../../utils/constants/constants\";\n\nconst CodeDataWithAmountNotFree = ({ codeData, taxAmount, discountAmount }) => {\n const prefixText = `First \n ${codeData?.duration_in_months > 1 ? codeData?.duration_in_months : \"\"}\n ${codeData?.duration_in_months === 1 ? \"Month\" : \"Months\"}`;\n return (\n <>\n \n Plan Price:\n
\n \n
\n \n ${plans[localStorage.getItem(\"planName\")]?.planPrice}{\" \"}\n {/* /Mo */}\n
\n \n {/*
\n \n Original Price $\n {\n plans[localStorage.getItem(\"planName\")]\n ?.planPrice\n }\n /Mo\n
*/}\n \n {codeData?.discountType === \"amount\" && (\n <>\n Discount Amount: \n
\n {taxAmount?.taxPercentage && (\n \n -${(codeData?.discount).toFixed(2)} {/* /Mo */}\n
\n \n )}\n \n \n {\" \"}\n First Month Estimated Tax ({parseInt(\n taxAmount?.taxPercentage,\n )}%):{\" \"}\n \n
\n )}\n\n \n ${(taxAmount?.taxAmount || 0).toFixed(2)}{\" \"}\n {/* /Mo */}\n
\n \n Due Today ({prefixText}):\n
\n {(\n parseFloat(plans[localStorage.getItem(\"planName\")]?.planPrice) -\n discountAmount +\n (taxAmount?.taxAmount || 0)\n )?.toFixed(2) < 0 && (\n \n {(\n parseFloat(plans[localStorage.getItem(\"planName\")]?.planPrice) -\n (discountAmount || 0) +\n (taxAmount?.taxAmount || 0)\n )?.toFixed(2) > 0 ? (\n
\n \n $\n {(\n parseFloat(\n plans[localStorage.getItem(\"planName\")]?.planPrice,\n ) -\n discountAmount +\n (taxAmount?.taxAmount || 0)\n )?.toFixed(2)}\n
\n ) : (\n$0.00
\n )}{\" \"}\n {/* /Mo */}\n\n Credit Towards Future Bill(s):\n
\n )}\n\n {(\n parseFloat(plans[localStorage.getItem(\"planName\")]?.planPrice) -\n discountAmount +\n (taxAmount?.taxAmount || 0)\n )?.toFixed(2) > 0 && (\n \n +$\n {Math.abs(\n parseFloat(plans[localStorage.getItem(\"planName\")]?.planPrice) -\n discountAmount +\n (taxAmount?.taxAmount || 0.0),\n )?.toFixed(2)}{\" \"}\n {/* /Mo */}\n
\n \n \n {(\n parseFloat(plans[localStorage.getItem(\"planName\")]?.planPrice) -\n discountAmount +\n (taxAmount?.taxAmount || 0)\n )?.toFixed(2) < 0\n ? \"Subscription Price After Credit:\"\n : \"Subscription Price (After 1st Mo):\"}{\" \"}\n \n\n <>\n ${plans[localStorage.getItem(\"planName\")]?.planPrice}\n /Mo + Tax\n \n
\n )}\n \n
\n \n );\n};\n\nexport default CodeDataWithAmountNotFree;\n","import React from \"react\";\n\nimport { plans } from \"../../../utils/constants/constants\";\n\nconst CodeDataWithPercentageEntireNotFree = ({\n codeData,\n taxAmount,\n discountAmount,\n calculatePercentage,\n}) => (\n <>\n {codeData?.description}
\n \n Plan Price:\n
\n \n
\n \n ${plans[localStorage.getItem(\"planName\")]?.planPrice}{\" \"}\n /Mo\n
\n \n
\n \n <>\n Discount Amount:\n
\n {taxAmount?.taxPercentage && (\n \n -$\n {calculatePercentage(\n plans[localStorage.getItem(\"planName\")]?.planPrice,\n codeData?.discount,\n )}{\" \"}\n /Mo\n
\n \n \n \n {\" \"}\n Estimated Tax ({parseInt(taxAmount?.taxPercentage)}\n %):{\" \"}\n \n
\n )}\n\n \n ${taxAmount?.taxAmount || 0} /Mo \n
\n \n Subscription Price :\n
\n \n $\n {parseFloat(plans[localStorage.getItem(\"planName\")]?.planPrice) -\n discountAmount +\n (taxAmount?.taxAmount || 0) >\n 0\n ? (\n parseFloat(plans[localStorage.getItem(\"planName\")]?.planPrice) -\n discountAmount +\n (taxAmount?.taxAmount || 0)\n )?.toFixed(2)\n : 0.0}{\" \"}\n /Mo \n
\n\n
\n \n);\n\nexport default CodeDataWithPercentageEntireNotFree;\n","import React from \"react\";\n\nimport { plans } from \"../../../utils/constants/constants\";\n\nconst CodeDataWithPercentageNotFree = ({\n codeData,\n taxAmount,\n discountAmount,\n calculatePercentage,\n}) => {\n const prefixText = `First \n ${codeData?.duration_in_months > 1 ? codeData?.duration_in_months : \"\"}\n ${codeData?.duration_in_months === 1 ? \"Month\" : \"Months\"}`;\n\n return (\n <>\n {codeData?.description}
\n \n Plan Price:\n
\n \n
\n \n ${plans[localStorage.getItem(\"planName\")]?.planPrice}{\" \"}\n {codeData?.duration_in_months > 1 && (\n /Mo\n )}\n
\n \n
\n \n <>\n {prefixText} Discount: \n
\n {taxAmount?.taxPercentage && (\n \n -$\n {calculatePercentage(\n plans[localStorage.getItem(\"planName\")]?.planPrice,\n codeData?.discount,\n )}{\" \"}\n {codeData?.duration_in_months > 1 && (\n /Mo\n )}\n
\n \n \n {prefixText} Estimated Tax : \n
\n )}\n\n \n ${(taxAmount?.taxAmount || 0).toFixed(2)}{\" \"}\n {codeData?.duration_in_months > 1 && /Mo }\n
\n \n Due Today ({prefixText}):\n
\n\n \n {parseFloat(plans[localStorage.getItem(\"planName\")]?.planPrice) -\n (discountAmount || 0) +\n (taxAmount?.taxAmount || 0) >\n 0 ? (\n
\n \n $\n {(\n parseFloat(\n plans[localStorage.getItem(\"planName\")]?.planPrice,\n ) -\n discountAmount +\n (taxAmount?.taxAmount || 0)\n )?.toFixed(2)}\n
\n ) : (\n0.0
\n )}{\" \"}\n {codeData?.duration_in_months > 1 && /Mo }\n\n \n {`Subscription Price (After ${codeData?.duration_in_months} Mo):`}{\" \"}\n \n
\n \n ${plans[localStorage.getItem(\"planName\")]?.planPrice}{\" \"}\n /Mo + Tax\n
\n \n
\n \n );\n};\n\nexport default CodeDataWithPercentageNotFree;\n","import { Progress, Select } from \"antd\";\nimport { Link } from \"react-router-dom\";\n\nimport { customerDetailsRoute } from \"../../utils/constants/constants\";\nimport { NumberFormat } from \"../../utils/numberFormat\";\nimport { TeamArrow } from \"../../utils/svg.file\";\nimport HrsMinute from \"../customer-details/components/estimationDetails/detailedBreakdown/hrsMinute\";\n\nconst { Option } = Select;\n\nexport const calculatePercentage = (value, total, isProfit) => {\n if (!total && !value) return 0;\n if (!total && value) return isProfit ? 0 : 100;\n const formattedVal = Number(value || 0);\n const formattedTotal = Number(total || 0);\n const percentage = (formattedVal / formattedTotal) * 100;\n return percentage.toFixed(2);\n};\n\nexport const JobCostDashColumnData = (\n projectStatus,\n handleProjectStatusChange,\n hasInvoicePlan,\n) => [\n {\n title: \"Customer Name\",\n width: \"160px\",\n fixed: \"left\",\n dataIndex: \"customerName\",\n render: (text, { projectId, estimateId }) => (\n \n {codeData?.description}
\n \n
\n );\n },\n },\n {\n title: \"Material Cost\",\n width: \"150px\",\n dataIndex: \"materialCost\",\n render: (_, record) => {\n const remainingMaterialCost =\n record?.estimateMaterialCost - record?.materialCost;\n const isOver = remainingMaterialCost < 0;\n return (\n \n
\n );\n },\n },\n\n {\n title: \"Man Hours\",\n width: \"150px\",\n key: \"manHours\",\n render: (_, record) => {\n const remainingManHours = record?.estimateManHours - record?.manHours;\n\n const isOver = remainingManHours < 0;\n const percent = (record?.manHours * 100) / record?.estimateManHours;\n console.log(\"remainingManHours\", remainingManHours);\n console.log(\"Math.abs(remainingManHours)\", Math.abs(remainingManHours));\n return (\n \n
\n );\n },\n },\n {\n title: \"Sub Cost\",\n width: \"150px\",\n render: (_, record) => {\n const remainingSubCost = record?.estimateSubCost - record?.subCost;\n const isOver = remainingSubCost < 0;\n const percent = (record?.subCost * 100) / record?.estimateSubCost;\n\n return (\n \n
\n );\n },\n },\n {\n title: \"Equip. Cost\",\n width: \"150px\",\n render: (_, record) => {\n const remainingEquipCost =\n record?.estimateEquipmentCost - record?.equipmentCost;\n const isOver = remainingEquipCost < 0;\n const percent =\n (record?.equipmentCost * 100) / record?.estimateEquipmentCost;\n\n return (\n \n
\n );\n },\n },\n {\n title: \"Gross Profit\",\n dataIndex: \"grossProfit\",\n width: \"150px\",\n render: (_, record) => {\n const isLoss = record?.grossProfit < 0;\n // const percent = calculatePercentage(\n // record?.grossProfit,\n // record?.isInvoiceCreated\n // ? record?.totalPaymentsReceived\n // : record?.estimatePayment,\n // true,\n // );\n const percent = calculatePercentage(\n record?.grossProfit,\n hasInvoicePlan\n ? record?.totalPaymentsReceived\n : record?.estimatePayment,\n true,\n );\n const convertedGrossProfitPer = percent < 0 ? 0 : percent;\n return (\n \n
\n );\n },\n },\n {\n title: \"Overhead\",\n width: \"150px\",\n render: (_, record) => {\n const remainingOverhead =\n record?.estimateOverHead - record?.actualOverhead;\n const isOver = remainingOverhead < 0;\n const percent = (record?.actualOverhead * 100) / record?.estimateOverHead;\n\n return (\n \n
\n );\n },\n },\n {\n title: \"Net Profit\",\n width: \"150px\",\n dataIndex: \"netProfit\",\n render: (_, record) => {\n const isLoss = record?.netProfit < 0;\n // const percent = calculatePercentage(\n // record?.netProfit,\n // record?.isInvoiceCreated\n // ? record?.totalPaymentsReceived\n // : record?.estimatePayment,\n // true,\n // );\n const percent = calculatePercentage(\n record?.netProfit,\n hasInvoicePlan\n ? record?.totalPaymentsReceived\n : record?.estimatePayment,\n true,\n );\n const convertedNetProfitPer = percent < 0 ? 0 : percent;\n return (\n \n
\n );\n },\n },\n];\n\nexport const jobCostDashRowData = [1, 2, 3, 4, 5].map((id) => ({\n id: id.toString(),\n customerName: \"Thomas F. Decker\",\n projectName: \"Project Name\",\n project_no: \"PRJ-0100\",\n projectStatus: \"$21,060.80\",\n totalPrice: \"ProjectStatus\",\n grossProfit: \"\",\n netProfit: \"\",\n materialCost: \"\",\n}));\n\nexport const changeJobCosting = [\n {\n planTitle: \"Essential\",\n planName: \"essential\",\n planPrice: \"$197\",\n sub: \".99\",\n text: \"per month\",\n content: \"Invoicing, Change Orders, Quickbooks Sync & MORE...\",\n subItems: \"FEATURES\",\n featureDescription: \"Everything in Estimating plan plus....\",\n features: [\n \"All Invoicing Features\",\n \"All Change Order Features\",\n \"Auto Generate Invoices\",\n \"Send & Receive Credit Card/ACH Payments\",\n \"Quickbooks Sync & Payment Integration\",\n \"View & Send Project Summary’s\",\n \"Automatic Reminder Emails\",\n \"24/7 US Based Support\",\n ],\n planAmount: 197.99,\n },\n];\n","import { getGoogleClientId } from \"../api/api-integration\";\n\nconst googleClientId = async () => {\n if (localStorage.getItem(\"isCardDeclined\") === \"false\") {\n const response = await getGoogleClientId();\n if (response.remote === \"success\") {\n return response.data.google.clientId;\n }\n return \"\";\n }\n return \"\";\n};\n\nexport default googleClientId;\n","import api from \"./api\";\n\nexport const editApiIntegration = async (data) => {\n const response = await api.request({\n url: \"/api-integration/edit-api-key\",\n method: \"POST\",\n data,\n });\n return response;\n};\n\nexport const getGoogleClientId = async () => {\n const response = await api.request({\n url: \"/api-integration/get-google-client-id\",\n method: \"GET\",\n });\n return response;\n};\n","import { Card, Image, Row } from \"antd\";\nimport React from \"react\";\n\nimport logo from \"../../images/logo-signup.png\";\nimport ScheduleDemo from \"./common/ScheduleDemo\";\n\nconst Header = ({ promoCode, needButton = true }) => (\n \n \n Default Payment Method\n \n
\n \n
\n \n \n Linked on{\" \"}\n {moment(documentData?.paymentMethodAddedAt).format(DATE_FORMATE)}\n
\n\n
\n);\n\nexport default InitialUpload;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgArrowLeft(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 14,\n height: 14,\n viewBox: \"0 0 14 14\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.8327 7.00033H1.16602M1.16602 7.00033L6.99935 12.8337M1.16602 7.00033L6.99935 1.16699\",\n stroke: \"currentColor\",\n strokeWidth: 1.67,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgArrowLeft);\nexport default __webpack_public_path__ + \"static/media/arrow-left.58446cb3.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgArrowRight(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 14,\n height: 14,\n viewBox: \"0 0 14 14\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1.16602 7.00033H12.8327M12.8327 7.00033L6.99935 1.16699M12.8327 7.00033L6.99935 12.8337\",\n stroke: \"currentColor\",\n strokeWidth: 1.67,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgArrowRight);\nexport default __webpack_public_path__ + \"static/media/arrow-right.98bea619.svg\";\nexport { ForwardRef as ReactComponent };","import { Avatar, Button, Col, Row, Typography } from \"antd\";\nimport React, { useEffect, useState } from \"react\";\nimport { useSelector } from \"react-redux\";\n\nimport { ReactComponent as ArrowLeft } from \"../../../../../images/affiliateImages/arrow-left.svg\";\nimport { ReactComponent as ArrowRight } from \"../../../../../images/affiliateImages/arrow-right.svg\";\nimport { ReactComponent as InfoIcon } from \"../../../../../images/warning-icon.svg\";\nimport { createValidUrl } from \"../../../../../utils/commonFuctions\";\n\nconst { Title } = Typography;\nconst limit = 1;\n\nconst PastReports = ({ type, handleCancel, currentPage, setCurrentPage }) => {\n const reportList = useSelector(\n (state) => state?.affiliate?.docNPay?.reported,\n );\n const [totalPage, setTotalPage] = useState(1);\n const [start, setStart] = useState(1);\n const [end, setEnd] = useState(1);\n\n const handlePrev = () => {\n if (currentPage > 1) setCurrentPage((current) => current - 1);\n };\n\n const handleNext = () => {\n if (currentPage < reportList?.[type]?.length)\n setCurrentPage((current) => current + 1);\n };\n\n const resetState = () => {\n setCurrentPage(1);\n };\n\n useEffect(() => {\n if (reportList?.[type]?.length) {\n setStart((currentPage - 1) * limit);\n setEnd((currentPage - 1) * limit + 1);\n setTotalPage(reportList?.[type]?.length / limit);\n }\n }, [reportList, currentPage]);\n\n return (\n <>\n \n
\n Documentation Required
\n\n The following documentation is required to be submitted and reviewed by\n our team. Once the documentation is reviewed we will approve your\n account. When your account is approved you will receive an email with\n your unique affiliate link and promo code!\n
\n\n
\n Step 1 - ID
\n\n Upload a clear image of your identification document. This could be your\n driver‘s license, passport, or national identity card.\n
\n\n \n setFormModal((prev) => ({\n ...prev,\n idCardModal: !prev?.idCardModal,\n }))\n }\n >\n Upload ID\n \n {documentData?.idCardImageName && (\n <>\n
\n \n 
\n
\n Uploaded
\n\n 
\n \n
\n \n )}\n \n
\n
\n Step 2 - W9
\n\n The W-9 form (FW9) is required by the Internal Revenue Service and\n allows us to comply with tax regulations. The W-9 form collects your tax\n information to properly report any relevant transactions.\n
\n- \n
- \n {\" \"}\n Fill out a W9 form by clicking{\" \"}\n
- \n Sign the W9 Form (You can sign via an E-Signature software (Adobe,\n Docusign etc) or Print out the W9 form and manually sign it.\n \n
- Upload the W9 form below \n
\n \n setFormModal((prev) => ({\n ...prev,\n w9FormModal: !prev?.w9FormModal,\n }))\n }\n disabled={!documentData?.idCardImageName}\n >\n Upload W9 Form\n \n {documentData?.w9FormName && (\n <>\n
\n \n \n
\n Uploaded
\n\n \n \n
\n \n )}\n \n
\n
\n Step 3 - Payment Info
\n\n You‘re almost done! The last step is to provide us with your\n default payment method. This is how ZevBit will pay you the commissions\n you earn as an affiliate! Click below to submit your payment info.\n
\n\n \n setFormModal((prev) => ({\n ...prev,\n paymentModal: !prev?.paymentModal,\n }))\n }\n disabled={!documentData?.idCardImageName || !documentData?.w9FormName}\n >\n Select Payment Method\n \n
\n \n
\n \n {obj?.note}\n
\n\n \n
\n {obj?.user?.name}\n \n \n ))}\n {reportList?.[type]?.length > 1 && (\n \n
\n \n Are you sure you want to report a problem? The affiliate will be\n requested to upload a new document.\n
\n\n \n \n {\n setConfirmModal(false);\n setFormModal((prev) => ({ ...prev, idCardModal: true }));\n }}\n style={{ width: \"100%\", borderRadius: \"8px\" }}\n size=\"large\"\n type=\"primary\"\n >\n Go Back\n \n \n {\n setConfirmModal(false);\n handleUploadImage();\n }}\n style={{ width: \"100%\", borderRadius: \"8px\" }}\n size=\"large\"\n type=\"primary\"\n >\n Confirm\n \n \n
\n
\n
\n \n );\n};\n\nexport default ConfirmCard;\n","import { Button, Col, Divider, Row } from \"antd\";\nimport React from \"react\";\n\nimport payonerLogo from \"../../../../../images/payonerLogo.png\";\nimport paypallogo from \"../../../../../images/paypallogo.png\";\nimport venmoLogo from \"../../../../../images/venmoLogo.png\";\n\nconst PaymentModel = ({ setPaymentModal, setToggleModal }) => (\n <>\n \n Are you sure you want to use this photo? Make sure the photo is\n not blurry.\n
\n \n \n 
\n
\n \n \n \n
\n
\n \n);\n\nexport default PaymentModel;\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANoSURBVHgBzVg9b9NAGH7unCZNCjSlgGBAhIkJtR2ZcAc2JGBjK/0FMLFSVqZWYq86MQISG0iEibGRmDoRhET5Km2h+f443tdO0vPZTpzEivpIVqzX57sn9374eU9gSOxXVE4K3GkLLELBJlO2czEOIFAke1EC+bbC67m0KGIIiKgDicgDGr1CtzaGgUDBElg/kxRb0YYPJmLTqE26zWE8FC2JtUHEQgntK5VFA0/QxiPEi3Wk8HROiANEJcRxAomXFAuLQc9rLaDSAKpNoNkGKFYcUGwhablXegpIWQgDx9lyUHyJQDIC7xHgolIdOKy5JKIgQZE9Ow3MTCEyKQ8hx001bJtkWkRgr+LuyChgYhdm3F94Vy8gSaQ093mHcMwYZNg1u0ejk2Hwjn4/cufygEOi5qypceygk9abJplfZcSK8xk3vgxi7Lq8l1BVfYa2O+wm3pluwMYFDvyLp3zuK85Ni6t8k3DI8O4YrvpRCiezs6vw+5/XlkkCS7nBdZbn/FNxY0pD7m9drXCNcmbYr6ltPcU5mziIg/DiYwvvPgWn2eV5gce3E8ikMBDzGV/25WmXlqWT5ka94dQOQxgZxtc9hWdvmij3eb+3RtVnsp3vJJG5q1u56EWtM+OQ4jVqZuYSFwkLN3VbuYGxEZVUxSAkLSxwrOd0Y6OFWMCknr/tX7zM2kYBb7PLcrqxHhMhxs63/jXDFxoCWd6hrG6Lu+70g28t5RI6UWBCHl0iI2vIGBY31xI48BFKTHDPkqZecrS4wgfdlkpgYvARauMLEyrotswECaX9a+Ul+e2VbuEdmoTbeA2fN4iL7EjIvG6f7fNxvHU9XCj7x4b/M5a2BgrMxeWosEXs7O6TGZISpUawSrx/Qzoyw5QfJs6dBq5dCk5Z3h1TZ1OLtM6/oQKtKzsnLdCOzQqr+gh+YT6N2MFzmjHKDWT3vveoo2k39IGsfVkDx1EseY5APU1r6t2svw2qU09mCDZ238/S6DppmiL1bDowe4vUxS7pbdDJbhSjkGKw0is3Xe3EckVvpbv1hQtsaNXnBrGNe5Fa6R4pt4tdo9uHiBcb5Ka1oQ4bPMTcBtLX0Y4AdtFqtyEMw7AHVnw0s4BhQB9vy8JmbAdWAcScIz0KG5suLmZXoB/pKRxK6WRqYZQjvf+UG1yPzz9c9gAAAABJRU5ErkJggg==\"","import { DeleteOutlined } from \"@ant-design/icons\";\nimport { Button, Col, message, Progress, Row, Typography, Upload } from \"antd\";\nimport React, { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport { handleUploadFormAction } from \"../../../../../api/admin\";\nimport UploadFileIcon from \"../../../../../images/File upload icon.png\";\nimport { AFFILIATE_TYPES } from \"../../../../../redux/affiliate/affiliate.types\";\nimport { fileExtension } from \"../../../../../utils/constants/constants\";\nimport { uploadAttachment } from \"../../../../../utils/svg.file\";\n\nfunction formatFileSize(bytes) {\n if (bytes < 1024) {\n return `${bytes} bytes`;\n }\n if (bytes < 1024 * 1024) {\n return `${(bytes / 1024).toFixed(2)} KB`;\n }\n return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;\n}\n\nconst UploadFormCard = ({\n formData,\n setFormData,\n setLoader,\n setIsFormDeleted,\n setFormModal,\n}) => {\n const { Dragger } = Upload;\n const { Text } = Typography;\n const [uploadProgress, setUploadProgress] = useState(0);\n const [error, setError] = useState(\"\");\n const dispatch = useDispatch();\n const checkFileSize = (file) => {\n const maxSize = 100 * 1024 * 1024;\n if (file.size > maxSize) {\n message.error(\"File size must be less than 100MB\");\n setFormData((prev) => ({ ...prev, w9Form: null }));\n return false;\n }\n return true;\n };\n\n const props = {\n name: \"file\",\n action: \"https://www.mocky.io/v2/5cc8019d300000980a055e76\",\n beforeUpload: checkFileSize,\n customRequest: async ({ file, onSuccess, onError }) => {\n try {\n const formData = new FormData();\n formData.append(\"file\", file);\n if (fileExtension.includes(file?.type)) {\n setError(\"\");\n setFormData((prev) => ({ ...prev, w9Form: file }));\n const total = 100;\n let uploaded = 0;\n const randomInterval = Math.floor(Math.random() * (100 - 50) + 50);\n const interval = setInterval(() => {\n const increment = Math.floor(Math.random() * 10) + 1;\n uploaded += increment;\n if (uploaded > total) {\n uploaded = total;\n }\n setUploadProgress(Math.floor((uploaded / total) * 100));\n if (uploaded >= total) {\n clearInterval(interval);\n onSuccess();\n }\n }, randomInterval);\n } else {\n setError(\"Invalid file selected\");\n }\n } catch (error) {\n onError(error);\n }\n },\n };\n\n const handleFormUpload = async () => {\n setLoader(true);\n const data = new FormData();\n data.append(\"w9Form\", formData?.w9Form);\n const payload = data;\n const result = await handleUploadFormAction(payload);\n if (result?.remote === \"success\") {\n setLoader(false);\n dispatch({\n type: AFFILIATE_TYPES.DOCUMENT_DETAIL,\n payload: {\n ...result?.data?.data,\n },\n });\n setIsFormDeleted(false);\n } else {\n setLoader(false);\n }\n };\n\n return (\n \n 
\n {\n setPaymentModal((prev) => ({ ...prev, paymentModal: false }));\n setToggleModal((prev) => ({\n ...prev,\n paypal: { ...prev?.paypal, toggle: true },\n }));\n }}\n style={{ borderRadius: \"8px\" }}\n size=\"large\"\n type=\"primary\"\n >\n Set Up\n \n
\n \n Withdraw funds to your PayPal account. Fee of 3.49% + $0.49\n
\n \n \n 
\n {\n setPaymentModal((prev) => ({ ...prev, paymentModal: false }));\n setToggleModal((prev) => ({\n ...prev,\n venmo: { ...prev?.venmo, toggle: true },\n }));\n }}\n style={{ borderRadius: \"8px\" }}\n size=\"large\"\n type=\"primary\"\n >\n Set Up\n \n
\n \n Withdraw funds to your Venmo account. Instant Transfers – 1.75% per\n transaction ($0.25 minimum and $25 maximum)\n
\n \n \n 
\n {\n setPaymentModal((prev) => ({ ...prev, paymentModal: false }));\n setToggleModal((prev) => ({\n ...prev,\n payo: { ...prev?.payo, toggle: true },\n }));\n }}\n style={{ borderRadius: \"8px\" }}\n size=\"large\"\n type=\"primary\"\n >\n Set Up\n \n
\n \n Withdraw funds to your Payoneer account. 2% Fee\n
\n \n \n \n setPaymentModal((prev) => ({ ...prev, paymentModal: false }))\n }\n style={{ borderRadius: \"8px\" }}\n size=\"large\"\n type=\"primary\"\n >\n Cancel\n \n
\n \n
\n );\n};\n\nexport default UploadFormCard;\n","import { DeleteOutlined } from \"@ant-design/icons\";\nimport { Button, Col, message, Progress, Row, Typography, Upload } from \"antd\";\nimport React, { useState } from \"react\";\n\nimport UploadFileIcon from \"../../../../../images/File upload icon.png\";\nimport { imageFileExtensions } from \"../../../../../utils/constants/constants\";\nimport { uploadAttachment } from \"../../../../../utils/svg.file\";\n\nfunction formatFileSize(bytes) {\n if (bytes < 1024) {\n return `${bytes} bytes`;\n }\n if (bytes < 1024 * 1024) {\n return `${(bytes / 1024).toFixed(2)} KB`;\n }\n return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;\n}\n\nconst UploadIdCard = ({\n setFormData,\n formData,\n setFormModal,\n setConfirmModal,\n}) => {\n const { Dragger } = Upload;\n const { Text } = Typography;\n const [uploadProgress, setUploadProgress] = useState(0);\n const [errors, setErrors] = useState(\"\");\n const checkFileSize = (file) => {\n const maxSize = 100 * 1024 * 1024;\n if (file.size > maxSize) {\n message.error(\"File size must be less than 100MB\");\n setFormData((prev) => ({ ...prev, idCard: null }));\n return false;\n }\n return true;\n };\n\n const props = {\n name: \"file\",\n action: \"https://www.mocky.io/v2/5cc8019d300000980a055e76\",\n beforeUpload: checkFileSize,\n customRequest: async ({ file, onSuccess, onError }) => {\n try {\n const formData = new FormData();\n formData.append(\"file\", file);\n if (imageFileExtensions.includes(file?.type)) {\n setErrors(\"\");\n setFormData((prev) => ({ ...prev, idCard: file }));\n const total = 100;\n let uploaded = 0;\n const randomInterval = Math.floor(Math.random() * (100 - 50) + 50);\n const interval = setInterval(() => {\n const increment = Math.floor(Math.random() * 10) + 1;\n uploaded += increment;\n if (uploaded > total) {\n uploaded = total;\n }\n setUploadProgress(Math.floor((uploaded / total) * 100));\n if (uploaded >= total) {\n clearInterval(interval);\n onSuccess();\n }\n }, randomInterval);\n } else {\n setErrors(\"Invalid file selected\");\n }\n } catch (error) {\n onError(error);\n }\n },\n };\n\n return (\n \n \n \n \n {error}\n \n )}\n {formData?.w9Form?.name && (\n \n {\n setFormModal((prev) => ({ ...prev, w9FormModal: false }));\n setFormData((prev) => ({ ...prev, w9Form: null }));\n setError(\"\");\n }}\n style={{ width: \"100%\", borderRadius: \"8px\" }}\n size=\"large\"\n type=\"primary\"\n >\n Cancel\n \n \n {\n handleFormUpload();\n setFormModal((prev) => ({ ...prev, w9FormModal: false }));\n }}\n style={{ width: \"100%\", borderRadius: \"8px\" }}\n size=\"large\"\n type=\"primary\"\n disabled={!formData?.w9Form?.name}\n >\n Upload\n \n \n
\n
\n
\n \n Please upload a PDF or photo of the signed W9 form to continue\n with your verification.\n
\n \n {uploadAttachment}
\n\n Click to upload or\n
\n\n PDF, JPG, PNG, JPEG (max. 100MB)\n
\n \n \n {error && (\n\n
\n \n )}\n \n {\n setFormData((prev) => ({ ...prev, w9Form: null }));\n setUploadProgress(0);\n }}\n />\n
\n \n
\n \n 
\n
\n \n
\n {formData?.w9Form?.name}
\n \n {formatFileSize(formData?.w9Form?.size)}\n
\n {uploadProgress > 0 && (\n \n )}\n \n
\n );\n};\n\nexport default UploadIdCard;\n","import ModalDailog from \"../../../../../../common/components/ModalDialogue\";\nimport PastReports from \"../../modals/PastReports\";\nimport ReportProblem from \"../../modals/ReportProblem\";\nimport ConfirmCard from \"../../Model/ConfirmCard\";\nimport PaymentModel from \"../../Model/PaymentModel\";\nimport PayoneerModel from \"../../Model/PayoneerModel\";\nimport PayPalModel from \"../../Model/PayPalModel\";\nimport UploadFormCard from \"../../Model/UploadFormCard\";\nimport UploadIdCard from \"../../Model/UploadIdCard\";\nimport VenmoModel from \"../../Model/VenmoModel\";\n\nexport const UploadIdCardModal = ({\n formModal,\n setFormModal,\n setFormData,\n formData,\n setConfirmModal,\n}) => (\n \n \n \n \n {errors}\n \n )}\n {formData?.idCard?.name && (\n \n {\n setFormData((prev) => ({ ...prev, idCard: null }));\n setUploadProgress(0);\n setFormModal((prev) => ({ ...prev, idCardModal: false }));\n setErrors(\"\");\n }}\n style={{\n width: \"100%\",\n borderRadius: \"8px\",\n }}\n size=\"large\"\n type=\"primary\"\n >\n Cancel\n \n \n {\n setFormModal((prev) => ({ ...prev, idCardModal: false }));\n setConfirmModal(true);\n }}\n style={{\n width: \"100%\",\n borderRadius: \"8px\",\n }}\n size=\"large\"\n type=\"primary\"\n disabled={!formData?.idCard?.name}\n >\n Upload\n \n \n
\n
\n
\n \n Please upload a photo of the document type you have selected to\n continue with your verification.\n
\n \n {uploadAttachment}
\n\n Click to upload or\n
\n\n JPG, PNG, JPEG (max. 100MB)\n
\n \n \n {errors && (\n\n
\n \n )}\n \n {\n setFormData((prev) => ({ ...prev, idCard: null }));\n setUploadProgress(0);\n }}\n />\n
\n \n
\n \n \n
\n \n
\n {formData?.idCard?.name}
\n \n {formatFileSize(formData?.idCard?.size)}\n
\n {uploadProgress > 0 && (\n \n )}\n \n
\n ) : (\n <>\n {!Object.keys(documentData)?.length ||\n (documentData?.status === \"Registered\" && !isSuperAdmin) ? (\n \n {console.log(\"getServicesColumnsrecord :>> \", record)}\n\n \n handleTaskHourChange(\n project,\n services,\n record,\n emp?._id,\n timeValue,\n )\n }\n onSelect={(timeValue) =>\n handleTaskHourChange(\n project,\n services,\n record,\n emp?._id,\n timeValue,\n )\n }\n popupClassName=\"no-ok-button\"\n showNow={false}\n className=\"custom-timepicker text-center timesheet-timepicker\"\n />\n
\n ),\n })),\n ];\n\n return columns;\n };\n\n const renderLineItemTasks = (project, service) => (\n \n
\n \n \n \n );\n}\n","import { Button, message, Modal } from \"antd\";\nimport React, { useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nimport {\n addTimeSheetFormChange,\n handleAddTimeSheetStep,\n} from \"../../../../../redux/addTimeSheet/addTimeSheet.action\";\nimport {\n ADD_TIME_SHEET_STEPS,\n createTimeSheet,\n HOURS_BY_LINE_ITEM,\n HOURS_FOR_EACH_PROJECTS,\n RECORD_TIME_SHEET_FORM,\n} from \"../../../helper\";\nimport WorkedLineItems from \"./WorkedLineItems\";\n\nconst AllocateByLineItem = ({\n addTimeSheetStep,\n clearTimeSheetData,\n refetchData,\n}) => {\n const dispatch = useDispatch();\n const [isLoading, setIsLoading] = useState(false);\n const handleBack = () => {\n dispatch(handleAddTimeSheetStep(ADD_TIME_SHEET_STEPS?.SELECT_LINE_ITEM));\n };\n const userData = useSelector((state) => state?.user);\n const { projectsForLineItemAllocation, projectsForOverallAllocation } =\n useSelector(\n (state) => state?.addTimeSheet?.[HOURS_BY_LINE_ITEM]?.formData,\n ) || {};\n const hoursForEachProjects = useSelector(\n (state) => state?.addTimeSheet?.[HOURS_FOR_EACH_PROJECTS]?.formData,\n );\n const timeSheetData = useSelector(\n (state) => state?.addTimeSheet?.[RECORD_TIME_SHEET_FORM]?.formData,\n );\n const empIdKeys = hoursForEachProjects?.employees?.map(({ _id }) => _id);\n const checkIfError = () => {\n let showError = false;\n const newProjects = projectsForLineItemAllocation?.map((project) => {\n const empTotals = empIdKeys?.reduce((acc, key) => {\n const isError =\n parseFloat(project?.[key]?.totalAllocatedHours.toFixed(2)) !==\n parseFloat(project?.[key]?.needToAllocateHours.toFixed(2));\n showError = showError || isError;\n return {\n ...acc,\n [key]: {\n ...project?.[key],\n isError,\n },\n };\n }, {});\n return {\n ...project,\n ...empTotals,\n };\n });\n\n dispatch(\n addTimeSheetFormChange({\n form_parent: HOURS_BY_LINE_ITEM,\n formData: { projectsForLineItemAllocation: newProjects },\n }),\n );\n return showError;\n };\n\n const handleNext = async () => {\n const isError = checkIfError();\n if (isError) {\n message.error(\"Check allocation errors, and try again.\");\n } else {\n const dataForPayload = {\n projectsForLineItemAllocation,\n projectsForOverallAllocation,\n employees: hoursForEachProjects?.employees,\n allocatedHoursProjectsWise: hoursForEachProjects?.projects,\n organizationId: userData?.organization?._id,\n date: timeSheetData?.date,\n note: timeSheetData?.note,\n };\n await createTimeSheet({\n setIsLoading,\n clearTimeSheetData,\n dataForPayload,\n isUpdate: timeSheetData?.isTimeSheetEdit,\n refetchData,\n });\n }\n };\n\n return (\n <>\n \n
\n {ConfirmInfoIcon}
\n Enter How Many Hours Was Worked On Each Line Item
\n\n
\n \n ))}\n \n {\" \"}\n \n Note :\n {\" \"}\n \n The hours need to match up to the Totals listed at the bottom.\n \n
\n \n {projectsForLineItemAllocation?.map((item) => (\n <>\n \n {groupUserExpense}\n
\n \n
\n {item?.customerName}
\n{item?.projectName}
\n\n \n renderLineItemTasks(item, record),\n expandedRowKeys: getExpendedRowKeys(item),\n onExpand: (expended, record) =>\n handleExpand(item, expended, record),\n expandIcon: ({ expanded, onExpand, record }) => (\n onExpand(record, e)}\n style={{ cursor: \"pointer\" }}\n className={`rotate-icon ${\n expanded ? \"rotate-active\" : \"\"\n }`}\n >\n
\n ),\n }}\n summary={() => renderTotalsForProject(item)}\n />\n \n
\n {ConfirmInfoIcon}
\n \n \n
\n Enter Hours Worked
\n\n \n \n\n {!timeSheetData?.isTimeSheetEdit ? (\n
\n \n );\n};\n\nexport default EmpHours;\n","import { Button, Drawer, message } from \"antd\";\nimport React, { useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nimport {\n addTimeSheetFormChange,\n handleAddTimeSheetStep,\n} from \"../../../../../redux/addTimeSheet/addTimeSheet.action\";\nimport { ADD_TIME_SHEET_STEPS, RECORD_TIME_SHEET_FORM } from \"../../../helper\";\nimport EmpHours from \"./EmpHours\";\n\nexport default function EmployeeHoursDrawer({\n clearTimeSheetData,\n addTimeSheetStep,\n}) {\n const timeSheetData = useSelector(\n (state) => state?.addTimeSheet?.[RECORD_TIME_SHEET_FORM]?.formData,\n );\n const [isLoading, setIsLoading] = useState(false);\n const dispatch = useDispatch();\n const handleBack = () => {\n dispatch(syncCrewListWithSelectedCrewList());\n\n dispatch(handleAddTimeSheetStep(ADD_TIME_SHEET_STEPS?.SELECT_EMPLOYS));\n };\n\n const handleNext = async () => {\n if (!timeSheetData?.selectedCrewList?.length) {\n message.error(`Select employee to record hours`);\n return;\n }\n\n const hasMissingHours = timeSheetData.selectedCrewList.some((crew) =>\n crew?.employees?.some(\n ({ total_hours_worked, isDisabled }) =>\n !isDisabled && !total_hours_worked,\n ),\n );\n\n if (hasMissingHours) {\n message.error(`Enter Hours worked for all selected employees`);\n return;\n }\n\n const isAllEMPsDisabled = timeSheetData.selectedCrewList.every((crew) =>\n crew?.employees?.every((emp) => emp?.isDisabled),\n );\n\n if (isAllEMPsDisabled) {\n message.error(`Select employee to record hours`);\n return;\n }\n\n if (!timeSheetData?.isTimeSheetEdit) {\n dispatch(syncCrewListWithSelectedCrewList());\n }\n\n dispatch(handleAddTimeSheetStep(ADD_TIME_SHEET_STEPS?.SELECT_PROJECT));\n };\n\n const syncCrewListWithSelectedCrewList = () => async (dispatch) => {\n const crewMap = new Map();\n\n timeSheetData?.selectedCrewList?.forEach((crew) => {\n const crewId = crew?._id;\n const employees = new Map(\n (crew?.employees || [])?.map((emp) => [emp?._id, true]),\n );\n crewMap.set(crewId, employees);\n });\n\n // Create a new array (updatedCrewList) and update it based on the selectedCrewList\n const updatedCrewList = timeSheetData?.crewList.map((crew) => {\n const updatedCrew = { ...crew }; // Clone the crew object to avoid mutation\n const matchingCrewEmployees = crewMap?.get(crew._id);\n\n updatedCrew.employees = (updatedCrew.employees || [])?.map((emp) => {\n if (matchingCrewEmployees && matchingCrewEmployees?.has(emp?._id)) {\n return { ...emp, isSelected: true }; // Update isSelected\n }\n return { ...emp, isSelected: false }; // Set isSelected to false\n });\n\n return updatedCrew;\n });\n dispatch(\n addTimeSheetFormChange({\n form_parent: RECORD_TIME_SHEET_FORM,\n formData: { crewList: updatedCrewList },\n }),\n );\n };\n const handleCancel = () => {\n clearTimeSheetData();\n };\n\n return (\n <>\n \n {scheduleCalendr}\n
\n \n {timeSheetData?.selectedCrewList?.map((crew) => (\n
\n \n {groupUserExpense}\n
\n ))}\n \n \n
\n \n
\n \n
\n ) : null}\n \n {scheduleCommit}\n
\n \n {timeSheetData?.isTimeSheetEdit ? (\n \n Cancel\n \n ) : (\n \n Back\n \n )}\n \n Next\n \n
\n \n }\n >\n \n
\n ),\n },\n ...(hoursForEachProjects?.employees || [])?.map((emp) => ({\n title: emp.name,\n dataIndex: emp._id,\n key: emp._id,\n width: 150,\n onHeaderCell: () => ({\n style: {\n height: 44,\n padding: \"12px 10px\",\n color: \"#667085\",\n fontSize: \"12px\",\n fontWeight: 500,\n lineHeight: \"18px\",\n },\n }),\n onCell: () => ({\n style: {\n height: 50,\n padding: \"0px 10px\",\n color: \"#101828\",\n fontSize: \"12px\",\n fontWeight: \"400\",\n letterSpacing: \"0.184px\",\n },\n }),\n className: \"text-center\",\n render: (_, record) => (\n {record?.customerName}
\n \n {record?.projectName}\n
\n \n {renderTableCell(record, emp)}\n
\n ),\n })),\n ];\n\n setTableColumns(columns);\n }\n }, [hoursForEachProjects?.employees, hoursForEachProjects?.projects]);\n\n const renderTableCell = (record, employee) => {\n // Case 1: Total Row - Shows total allocated vs required hours\n if (record?._id === \"total\") {\n const employeeHours = record?.[employee?._id] ?? {};\n const { isError, totalAllocatedHours, needToAllocateTotalHours } =\n employeeHours;\n\n return (\n \n
\n );\n }\n\n // Case 2: Read-only Hours Display\n // Shows for unbillable time in multi-project mode OR\n // Shows for project time in single-project mode\n const isReadOnlyDisplay = record?._id !== \"unbillable\" && isSingleProject;\n\n if (isReadOnlyDisplay) {\n const hours = record?.[employee?._id] ?? 0;\n return (\n \n \n
\n {isListLoading ? (\n {ConfirmInfoIcon}
\n \n \n
\n Select A Crew Or Employees To Record Time For
\n\n
\n ) : (\n \n {crewList?.length ? (\n <>\n {crewList?.map((crew) => {\n const isCrewSelected =\n (crew?.employees?.length > 0 &&\n crew.employees.every((worker) => worker?.isSelected)) ||\n false;\n\n return (\n (\n \n handleSelectCrew(crew, isCrewSelected)}\n >\n {console.log(\"Collapse crew :>> \", crew)}\n {crew?.crewName}\n
\n }\n key={crew?._id}\n className={`panel-header ${\n isCrewSelected ? \"ispanel_selected\" : \"\"\n }`}\n >\n \n {`${\n crew?.employees?.length || 0\n } Workers`}\n {isCrewSelected && (\n \n {checkIcon}\n \n )}\n
\n \n {/* note: for future implementation */}\n {/*
\n \n ) : (\n \n \n Cancel\n \n \n Next\n \n
\n \n }\n >\n \n
\n \n );\n};\n\nexport default SelectLineItem;\n","import { Button, Drawer } from \"antd\";\nimport React, { useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nimport {\n addTimeSheetFormChange,\n handleAddTimeSheetStep,\n} from \"../../../../../redux/addTimeSheet/addTimeSheet.action\";\nimport {\n ADD_TIME_SHEET_STEPS,\n createTimeSheet,\n HOURS_BY_LINE_ITEM,\n HOURS_FOR_EACH_PROJECTS,\n RECORD_TIME_SHEET_FORM,\n SELECT_LINE_ITEMS,\n} from \"../../../helper\";\nimport SelectLineItem from \"./SelectLineItem\";\n\nconst SelectLineItemDrawer = ({\n clearTimeSheetData,\n addTimeSheetStep,\n refetchData,\n}) => {\n const dispatch = useDispatch();\n const [isTimeSheetCreating, setIsTimeSheetCreating] = useState(false);\n\n const projectsWithServices = useSelector(\n (state) => state?.addTimeSheet?.[SELECT_LINE_ITEMS]?.formData?.projects,\n );\n\n const projectsForLineItem = useSelector(\n (state) =>\n state?.addTimeSheet?.[HOURS_BY_LINE_ITEM]?.formData\n ?.projectsForLineItemAllocation,\n );\n\n const hoursForEachProjects = useSelector(\n (state) => state?.addTimeSheet?.[HOURS_FOR_EACH_PROJECTS]?.formData,\n );\n\n const timeSheetData = useSelector(\n (state) => state?.addTimeSheet?.[RECORD_TIME_SHEET_FORM]?.formData,\n );\n const userData = useSelector((state) => state?.user);\n\n const [isProjectsLoading, setIsProjectsLoading] = useState(false);\n const empIdKeys = hoursForEachProjects?.employees?.map(({ _id }) => _id);\n\n const getOverallAndLineItemProjects = () => {\n const projectsForOverallAllocation = [];\n const projectsForLineItemAllocation = projectsWithServices\n ?.map((estimate) => {\n // Filter breakdowns where isSelected\n\n const filteredServices = estimate?.services\n .map((service) => {\n const existingServiceData = projectsForLineItem\n ?.find((prj) => prj?.projectId === estimate?.projectId)\n ?.services?.find(\n (srv) => srv?.draggableId === service?.draggableId,\n );\n const editServiceData = timeSheetData?.editTimeSheetData?.projects\n ?.find(({ projectId }) => projectId === estimate?.projectId)\n ?.services?.find(\n (srv) => srv?.draggableId === service?.draggableId,\n );\n\n const filteredBreakdowns = service?.breakdown\n ?.filter((breakdown) => breakdown?.isSelected)\n ?.map((brd) => {\n const empTotalsForBreakdown = empIdKeys?.reduce((acc, id) => {\n const existingAllocation =\n existingServiceData?.breakdown?.find(\n (breakdown) => breakdown?._id === brd?._id,\n )?.[id]?.allocatedHours;\n\n const editDataBilledHours = editServiceData?.breakdown?.find(\n (breakdown) => breakdown?._id === brd?._id,\n )?.actual?.qty;\n\n const allocatedHours =\n existingAllocation ?? editDataBilledHours ?? 0;\n return {\n ...acc,\n [id]: {\n allocatedHours,\n },\n };\n }, {});\n return {\n ...brd,\n ...empTotalsForBreakdown,\n };\n });\n\n const isExpanded =\n typeof existingServiceData?.isExpanded === \"boolean\"\n ? existingServiceData?.isExpanded\n : editServiceData?.breakdown?.some(\n (br) => br?.actual?.qty > 0,\n ) ??\n filteredBreakdowns?.length !== service?.breakdown?.length;\n\n const empTotalsForServices = empIdKeys?.reduce((acc, id) => {\n const existingAllocation =\n existingServiceData?.[id]?.allocatedHours;\n\n const breakdownTotal = filteredBreakdowns?.reduce(\n (acc, br) => acc + br?.[id]?.allocatedHours || 0,\n 0,\n );\n\n const allocationWithCheck = isExpanded\n ? breakdownTotal\n : existingAllocation;\n\n const editDataBilledHours = editServiceData?.totalActualQty;\n\n const allocatedHours =\n allocationWithCheck ?? editDataBilledHours ?? 0;\n\n return {\n ...acc,\n [id]: {\n allocatedHours,\n },\n };\n }, {});\n return filteredBreakdowns.length > 0\n ? {\n ...service,\n breakdown: filteredBreakdowns,\n isExpanded,\n ...empTotalsForServices,\n }\n : null;\n })\n .filter(Boolean); // Remove null services\n\n const empTotalsForProject = empIdKeys?.reduce((acc, id) => {\n const needToAllocateHours = hoursForEachProjects?.projects?.find(\n ({ projectId }) => projectId === estimate?.projectId,\n )?.[id];\n\n const totalAllocatedToProject = filteredServices?.reduce(\n (acc, srv) => acc + srv?.[id]?.allocatedHours,\n 0,\n );\n const convertedTotalAllocatedToProject = parseFloat(\n totalAllocatedToProject.toFixed(2),\n );\n\n return {\n ...acc,\n [id]: {\n isError:\n convertedTotalAllocatedToProject >\n parseFloat(needToAllocateHours.toFixed(2)),\n needToAllocateHours,\n // totalAllocatedHours: convertedTotalAllocatedToProject,\n totalAllocatedHours: totalAllocatedToProject,\n },\n };\n }, {});\n if (filteredServices?.length === 0) {\n // If no services with selected breakdowns, add this project to unselectedProjects\n projectsForOverallAllocation.push({\n ...estimate,\n ...empTotalsForProject,\n });\n }\n // Return the estimate with filtered services only if there are any\n return filteredServices.length > 0\n ? {\n ...estimate,\n ...empTotalsForProject,\n services: filteredServices,\n }\n : null;\n })\n .filter(Boolean);\n\n return {\n projectsForLineItemAllocation,\n projectsForOverallAllocation,\n };\n };\n const handleNext = () => {\n const { projectsForLineItemAllocation, projectsForOverallAllocation } =\n getOverallAndLineItemProjects();\n const isAllOverallAllocationProject =\n !projectsForLineItemAllocation?.length;\n\n if (isAllOverallAllocationProject) {\n const dataForPayload = {\n projectsForLineItemAllocation,\n projectsForOverallAllocation,\n employees: hoursForEachProjects?.employees,\n allocatedHoursProjectsWise: hoursForEachProjects?.projects,\n organizationId: userData?.organization?._id,\n date: timeSheetData?.date,\n note: timeSheetData?.note,\n };\n createTimeSheet({\n setIsLoading: setIsTimeSheetCreating,\n clearTimeSheetData,\n dataForPayload,\n isUpdate: timeSheetData?.isTimeSheetEdit,\n refetchData,\n });\n } else {\n dispatch(\n addTimeSheetFormChange({\n form_parent: HOURS_BY_LINE_ITEM,\n formData: {\n projectsForLineItemAllocation,\n projectsForOverallAllocation,\n },\n }),\n );\n dispatch(handleAddTimeSheetStep(ADD_TIME_SHEET_STEPS?.ALLOCATE_HOURS));\n }\n };\n const handleBack = () => {\n dispatch(\n handleAddTimeSheetStep(\n ADD_TIME_SHEET_STEPS?.ENTER_HOURS_FOR_EACH_PROJECT,\n ),\n );\n };\n\n return (\n \n
\n {ConfirmInfoIcon}
\n \n \n
\n Select What Was Worked On
\n\n \n
\n \n \n {projectsWithServices?.map(\n ({ customerName, projectName, services, projectId }) => {\n const totalSelectedItems = services?.reduce((total, item) => {\n const selectedCount = item?.breakdown?.filter(\n (b) => b?.isSelected,\n )?.length;\n return total + selectedCount;\n }, 0);\n\n const selectLabel = totalSelectedItems\n ? `${totalSelectedItems} Items Selected`\n : \"Entire Project\";\n return (\n
\n );\n },\n )}\n \n
\n \n
\n \n
\n {groupUserExpense}
\n \n \n {customerName}\n
\n \n {projectName}\n
\n \n
\n \n \n handleMenuSelect(projectId, service)\n }\n handleSubOptionsSelect={(lineItem, task) =>\n handleSubOptionsSelect(projectId, lineItem, task)\n }\n />\n
\n {entrieProject}
\n \n \n Back\n \n \n Next\n \n
\n \n }\n >\n \n \n \n dispatch(\n handleAddTimeSheetStep(\n ADD_TIME_SHEET_STEPS?.ENTER_HOURS_WORKED,\n ),\n )\n }\n >\n Back\n \n \n Next\n \n
\n }\n >\n \n You don't have any approved estimates to record on the\n timesheet.\n
\n \n
\n Contact ZevBit with any questions by clicking the Blue chat icon\n in the bottom left corner.\n
\n \n }\n handleProjectSelect={handleProjectSelect}\n MAX_PROJECT_SELECTION={10}\n defaultProjects={projects}\n clearFormData={clearTimeSheetData}\n />\n \n \n );\n};\n\nexport default SelectProjectsDrawer;\n","import React from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nimport {\n addTimeSheetResetMainState,\n // addTimeSheetSetMainState,\n handleAddTimeSheetStep,\n} from \"../../../../redux/addTimeSheet/addTimeSheet.action\";\nimport { ADD_TIME_SHEET_STEPS } from \"../../helper\";\n// import { TimeSheetState } from \"../../helper\";\nimport AllocateByLineItem from \"./AllocateByLineItem/AllocateByLineItemModal\";\n// import { ADD_TIME_SHEET_STEPS } from \"../../helper\";\nimport EmployeeHoursDrawer from \"./EmpHoursDrawer/EmployeeHoursDrawer\";\nimport EnterHoursForEachProjectsModal from \"./EnterHoursForEachProjectsModal\";\nimport SelectEmployDrawer from \"./SelectEMPDrawer/SelectEmployDrawer\";\nimport SelectLineItemDrawer from \"./SelectLineItemDrawer/SelectLineItemDrawer\";\nimport SelectProjectsDrawer from \"./SelectProjectsDrawer\";\n\nconst AddEditTimeSheet = ({ refetchData }) => {\n const dispatch = useDispatch();\n const onClose = () => {\n dispatch(handleAddTimeSheetStep(\"\"));\n };\n\n const clearTimeSheetData = () => {\n dispatch(handleAddTimeSheetStep(\"\"));\n dispatch(addTimeSheetResetMainState({}));\n };\n\n const addTimeSheetStep = useSelector(\n (state) => state?.addTimeSheet?.addTimeSheetStep,\n );\n const addTimeSheet = useSelector((state) => state?.addTimeSheet);\n console.log(\"addTimeSheet :>> \", addTimeSheet);\n return (\n \n
\n );\n};\n\nexport default AddEditTimeSheet;\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgMyReferralFilter(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18,\n height: 13,\n viewBox: \"0 0 18 13\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4.03881 6.49999H13.7888M1.60132 1.625H16.2263M6.47631 11.375H11.3513\",\n stroke: \"currentColor\",\n strokeWidth: 1.62825,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgMyReferralFilter);\nexport default __webpack_public_path__ + \"static/media/my-referral-filter.12a089bf.svg\";\nexport { ForwardRef as ReactComponent };","import { Select, Slider, Typography } from \"antd\";\n\nconst { Option } = Select;\n\nexport const tagRender = ({ label }) => (\n {label}
\n);\n\nexport const SelectFilter = ({\n filterTitle,\n value,\n onChange,\n tagRender,\n options = [],\n mode = \"\",\n placeholder = \"Select Option\",\n name,\n}) => (\n \n {filterTitle} \n onChange(val, name)}\n tagRender={tagRender}\n >\n {options.map(({ value, label }) => (\n \n ))}\n \n
\n);\n\nexport const RangeFilter = ({\n filterTitle,\n needFloat = false,\n prefix = \"\",\n value = [0, 0],\n onChange,\n name,\n}) => (\n \n {filterTitle} \n onChange(val, name)}\n marks={value.reduce((acc, val) => {\n acc[val] = `${prefix}${!needFloat ? val : val?.toFixed(2)}`;\n return acc;\n }, {})}\n />\n
\n);\n","import { Button, Col, Row, Typography } from \"antd\";\nimport moment from \"moment\";\nimport React, { useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nimport {\n getMyReferralsAction,\n saveReferralFilters,\n} from \"../../../../../redux/affiliate/affiliate.action\";\nimport { initialActions } from \"../../../../../utils/constants/constants\";\nimport {\n convertLinksCode,\n convertObjArray,\n currentComm,\n currentPlan,\n filterStatus,\n isEmpty,\n} from \"../../helper\";\nimport { RangeFilter, SelectFilter } from \"./common/filterComponents\";\nimport RangePickerFilter from \"./RangePickerFilter\";\n\nconst AffiliateFilter = ({\n openRangeSelector,\n setOpenRangeSelector,\n toggleFilterModal,\n page,\n perPage,\n sortField,\n sortOrder,\n isSuperAdmin = false,\n search,\n}) => {\n const dispatch = useDispatch();\n const [linkOrCodeList, setLinkOrCodeList] = useState([]);\n const affiliateId = useSelector((state) => state?.affiliate?.profile?._id);\n const linkOrCodes = useSelector(\n (state) => state?.affiliate?.referrals?.promoCodes,\n );\n const savedFilter = useSelector(\n (state) => state?.affiliate?.[\"myReferral-filters\"],\n );\n const handleApplyClick = () => {\n handleRangeToggle(false);\n };\n const handleRangeChange = (date) => {\n if (date?.length) {\n dispatch(\n saveReferralFilters({\n ...savedFilter,\n dateOfAction: {\n start: moment(date[0]).format(\"YYYY-MM-DD\"),\n end: moment(date[1]).format(\"YYYY-MM-DD\"),\n },\n }),\n );\n } else {\n dispatch(\n saveReferralFilters({\n ...savedFilter,\n dateOfAction: {\n start: \"\",\n end: \"\",\n },\n }),\n );\n }\n handleRangeToggle(true);\n };\n const handleRangeToggle = (toggle) => {\n setOpenRangeSelector(toggle);\n };\n const handleClearFilter = () => {\n dispatch(saveReferralFilters());\n callReferralAPI();\n const savedFilterData = JSON.parse(localStorage.getItem(\"referral-filter\"));\n if (!isEmpty(savedFilterData)) {\n delete savedFilterData?.[affiliateId];\n localStorage.setItem(\"referral-filter\", JSON.stringify(savedFilterData));\n } else {\n localStorage.removeItem(\"referral-filter\");\n }\n toggleFilterModal();\n };\n\n const handleFilterChange = (value, name) => {\n dispatch(\n saveReferralFilters({\n ...savedFilter,\n [name]: value,\n }),\n );\n };\n\n const callReferralAPI = (filters) => {\n const payload = {\n page,\n perPage,\n ...(sortField && { fieldName: sortField }),\n ...(isSuperAdmin && { affiliate: affiliateId }),\n sortOrder,\n ...filters,\n ...(search && { search }),\n };\n dispatch(getMyReferralsAction(payload, isSuperAdmin));\n };\n\n const handleSaveFilter = () => {\n callReferralAPI(savedFilter);\n dispatch(saveReferralFilters(savedFilter));\n if (!isEmpty(savedFilter)) {\n Object.entries(savedFilter)?.forEach(([k, v]) => {\n if (isEmpty(v)) {\n delete savedFilter?.[k];\n }\n });\n localStorage.setItem(\n \"referral-filter\",\n JSON.stringify({\n [affiliateId]: savedFilter,\n }),\n );\n } else {\n localStorage.removeItem(\"referral-filter\");\n }\n toggleFilterModal();\n };\n\n useEffect(() => {\n let clonedList = [];\n if (linkOrCodes?.length) {\n linkOrCodes?.forEach((obj) => {\n clonedList = [\n ...clonedList,\n { value: obj?.couponId, label: obj?.couponId },\n { value: obj?.link, label: convertLinksCode(obj?.link) },\n ];\n });\n }\n setLinkOrCodeList(clonedList);\n }, []);\n\n return (\n <>\n \n Filters \n
\n \n Date Of Initial Action \n \n val ? moment(val) : \"\",\n )}\n handleApplyClick={handleApplyClick}\n handleRangeChange={handleRangeChange}\n handleRangeToggle={handleRangeToggle}\n openRangeSelector={openRangeSelector}\n setOpenRangeSelector={setOpenRangeSelector}\n changePos\n />\n
\n \n \n \n Cancel\n \n \n \n Clear\n \n \n \n Apply\n \n \n
\n
\n \n );\n};\n\nexport default AffiliateFilter;\n","import \"./overview.css\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n\nimport { SearchOutlined } from \"@ant-design/icons\";\nimport { Button, Col, Drawer, Input, Row, Typography } from \"antd\";\nimport { useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useNavigate } from \"react-router-dom\";\n\nimport { ReactComponent as MyReferralsFilterIcon } from \"../../../../../images/affiliateImages/my-referral-filter.svg\";\nimport { ReactComponent as MyReferralsIcon } from \"../../../../../images/affiliateImages/my-referrals.svg\";\nimport {\n getMyReferralsAction,\n // saveReferralFilters,\n} from \"../../../../../redux/affiliate/affiliate.action\";\nimport {\n initialActions,\n promoCodeStatus,\n promoCodeStatusColor,\n} from \"../../../../../utils/constants/constants\";\nimport { formatDate } from \"../../../../setting/UserListV2\";\nimport TableData from \"../../../../setting/UserListV2/Table\";\nimport {\n convertLinksCode,\n convertToFloating,\n subscriptionPlanName,\n} from \"../../helper\";\nimport AffiliateFilter from \"./AffiliateFilter\";\n\nconst { Title } = Typography;\n\nconst MyReferrals = ({ isSuperAdmin = false }) => {\n const [sortOrder, setSortOrder] = useState();\n const [sortFields, setSortFields] = useState();\n const [toggleModal, setToggleModal] = useState(false);\n const [matches, setMatches] = useState(\n window.matchMedia(\"(max-width: 400px)\").matches,\n );\n useEffect(() => {\n window\n .matchMedia(\"(max-width:400px)\")\n .addEventListener(\"change\", (e) => setMatches(e.matches));\n }, []);\n\n const history = useNavigate();\n const [openRangeSelector, setOpenRangeSelector] = useState(false);\n const myReferralsTblData = useSelector(\n (state) => state?.affiliate?.myReferrals,\n );\n const [currentReferralPage, setCurrentReferralPage] = useState(1);\n const dispatch = useDispatch();\n\n const getBackgroundColor = (status) =>\n promoCodeStatusColor[status?.toLowerCase()] || \"#FFBC44\";\n\n const affiliateId = useSelector((state) => state?.affiliate?.profile?._id);\n\n const filterDetails = useSelector(\n (state) => state?.affiliate?.[\"myReferral-filters\"],\n );\n\n const promoCodeDetailColumns = [\n {\n ...(isSuperAdmin\n ? {\n title: \"MA Name\",\n dataIndex: \"maName\",\n sorter: (a, b) => a?.maName - b?.maName,\n }\n : {\n title: \"Account #\",\n dataIndex: \"companyNumber\",\n sorter: (a, b) => a?.companyNumber - b?.companyNumber,\n }),\n },\n {\n title: \"Link/ Code\",\n dataIndex: \"linkOrCode\",\n render: (v) => (\n \n \n
\n \n \n \n
\n \n
\n \n \n \n <OverviewIcon style={{ marginRight: 5, color: \"#3483FA\" }} />\n <span>Overview</span>\n \n
\n \n \n {\n const total = {};\n pageData.forEach((obj) => {\n Object.keys(obj).forEach((key) => {\n if (key !== \"action\") {\n if (obj?.action !== \"directSignUp\") {\n if (total?.[key]) total[key] += obj[key];\n else total[key] = obj[key];\n } else {\n if (total?.[key] && key !== \"filledOutRequested\")\n total[key] += obj[key];\n else if (key !== \"filledOutRequested\")\n total[key] = obj[key];\n }\n }\n });\n });\n return (\n \n \n \n Total\n \n \n \n \n {overviewTblData?.totalClick || 0}\n \n \n {promoCodeOverviewColumns.map(\n ({ dataIndex }) =>\n !avoidColumns.includes(dataIndex) && (\n \n \n {total[dataIndex]}\n \n \n ),\n )}\n \n );\n }}\n pagination={false}\n />\n
\n \n \n
\n \n \n Refer Friends.\n
\n\n Get{\" \"}\n {`${commission?.throughOther}-${commission?.throughDirectSignUp}%`}{\" \"}\n Monthly Commission.\n
\nDefault Referral Link
\n \n
\n Default Promo Code
\n \n
\n \n
\n ),\n okText: \"Confirm\",\n onOk() {\n dispatch(getSummaryDetailsAction());\n handlePayoutModalVisibility();\n },\n };\n\n const handlePayoutModalVisibility = () => {\n setOpenPayout(!openPayout);\n dispatch(resetInputErrors(\"payout-request\"));\n form.resetFields();\n };\n\n const handleConfirmPayout = async () => {\n if (!Object.keys(formErrors || {})?.length) {\n const response = await postPaymentRequest(\n {\n amount: form?.getFieldValue(\"payout-request\"),\n },\n setLoading,\n );\n if (response.remote === \"success\") {\n handlePayoutModalVisibility();\n setValue(\"\");\n dispatch(resetInputErrors(\"payout-request\"));\n Modal.info(configs);\n form.resetFields();\n setLoading(false);\n } else {\n dispatch(\n setInputErrors({\n \"payout-request\": response?.error?.errors?.error,\n }),\n );\n setLoading(false);\n }\n }\n };\n\n const handleChange = (e) => {\n const modifiedValue = e.target.value.toString().replace(/\\B\\D/g, \"\");\n console.log(\"modifiedValue\", modifiedValue, +modifiedValue);\n setValue(`$${modifiedValue}`);\n if (\n +modifiedValue >=\n summaryData?.myBalance - summaryData?.totalRequestedAmount\n ) {\n dispatch(\n setInputErrors({\n [e.target.name]: \"You don't have enough balance to withdraw\",\n }),\n );\n } else if (modifiedValue && !+modifiedValue > 0) {\n dispatch(\n setInputErrors({\n [e.target.name]: \"Request should be more than $0\",\n }),\n );\n } else {\n dispatch(resetInputErrors(\"payout-request\"));\n }\n };\n\n return (\n Payment Request Successful
\n \n\n Your request has been processed. This process can take 24 to 72\n hours to be reflected in the selected payment method. You can view\n the status of your request in the “My Payments” tab.\n
\n \n\n \n <SummaryIcon style={{ marginRight: 5 }} />\n <span>Summary</span>\n \n \n {summaryCards.map(({ title, name, ...rest }, ind) => (\n \n \n \n ${trimNumber(summaryData?.[name])}\n \n \n \n ))}\n
\n \n \n handlePayoutModalVisibility()}\n >\n Cancel\n \n \n handleConfirmPayout()}\n htmlType=\"submit\"\n disabled={loading}\n >\n Confirm\n \n \n
\n \n
\n );\n};\n\nexport default Summary;\n","import React from \"react\";\nimport { ToastContainer } from \"react-toastify\";\n\nimport { myReferralContainer } from \"../container\";\nimport {\n ReferralLinkModal,\n ReferralPromoCodeModal,\n} from \"../modals/ReferralModals\";\nimport MyReferrals from \"./MyReferrals\";\nimport Overview from \"./Overview\";\nimport ReferralHeader from \"./ReferralHeader\";\nimport Summary from \"./Summary\";\n\nconst Referrals = ({ isSuperAdmin = false }) => {\n const {\n referral,\n isVisibleLinkModal,\n isVisibleCodeModal,\n handleLinkShareModalVisibility,\n handlePromoCodeModalVisibility,\n } = myReferralContainer(isSuperAdmin);\n\n return (\n <>\n \n {rest.hasButton && (\n handlePayoutModalVisibility()}\n disabled={isSuperAdmin}\n >\n {rest.btnTitle}\n \n )}\n
\n \n We {resent ? \"resent\" : \"have sent\"} a 6 digit code to {modifiedEmail},\n please enter the code to successfully update your {updateField || \"email\"}\n .\n handleSubmit(data)}\n className=\"Email-OTP\"\n >\n Promise.resolve() }]}\n label=\"Enter Code\"\n style={{ fontWeight: 500 }}\n >\n \n \n \n \n \n
\n );\n};\n\nexport default ConfirmOTP;\n","import { Button, Form, Input } from \"antd\";\nimport React, { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport { sendOTP } from \"../../../../../api/affiliate\";\nimport ModalDailog from \"../../../../../common/components/ModalDialogue\";\nimport { setLoading } from \"../../../../../redux/affiliate/affiliate.action\";\nimport { passwordValidator } from \"../../helper\";\nimport ConfirmOTP from \"./ConfirmOTP\";\n\nconst UpdateEmail = ({ email, handleCancel }) => {\n const [form] = Form.useForm();\n const [openOTP, setOpenOTP] = useState(false);\n const [newEmail, setNewEmail] = useState(\"\");\n const dispatch = useDispatch();\n const handleOpenOTP = () => {\n setOpenOTP(true);\n handleCancel();\n };\n const handleCloseOTP = () => {\n setOpenOTP(false);\n };\n const handleSubmit = async (data) => {\n if (data) {\n const response = await sendOTP(\"update-email\", data, dispatch);\n if (response.remote === \"success\") {\n setNewEmail(data?.newEmail);\n dispatch(setLoading(false));\n handleOpenOTP();\n } else {\n dispatch(setLoading(false));\n form.setFields([\n { name: [\"password\"], errors: [response?.errors?.errors?.error] },\n ]);\n }\n }\n };\n\n return (\n \n Did not receive the code? \n \n Resend it!\n \n\n \n {moment\n .utc(moment.duration(timer).asMilliseconds())\n .format(\"mm:ss\")}\n \n
\n \n Having trouble? Contact our
\n \n ) : (\n <>\n \n We have resent the code. Are you still having problems? Contact\n our \n \n To update your email address you must enter your new email address and\n password, then you must verify the link that we will send to your\n current email address.\n \n handleSubmit(data)}\n autoComplete=\"off\"\n >\n \n \n \n ({\n validator: (_, value) => passwordValidator(value),\n }),\n ]}\n >\n \n \n handleSubmit()}\n htmlType=\"submit\"\n >\n Update Email\n \n \n \n \n
\n );\n};\n\nexport default UpdateEmail;\n","import { Button, Form, Input } from \"antd\";\nimport React, { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport { sendOTP } from \"../../../../../api/affiliate\";\nimport ModalDailog from \"../../../../../common/components/ModalDialogue\";\nimport { setLoading } from \"../../../../../redux/affiliate/affiliate.action\";\nimport ResetPasswordModal from \"../../../ResetPasswordModal\";\nimport { passwordValidator } from \"../../helper\";\nimport ConfirmOTP from \"./ConfirmOTP\";\n\nconst UpdatePassword = ({ email, handleCancel }) => {\n const [form] = Form.useForm();\n const [openOTP, setOpenOTP] = useState(false);\n const [newPass, setNewPass] = useState(\"\");\n const [openForgetPass, setOpenForgetPass] = useState(false);\n const dispatch = useDispatch();\n const handleOpenOTP = () => {\n setOpenOTP(true);\n handleCancel();\n };\n const handleOpenForgetPass = () => {\n setOpenForgetPass(!openForgetPass);\n };\n const handleCloseOTP = () => {\n setOpenOTP(false);\n };\n const handleSubmit = async (data) => {\n // NOTE: API integration for sending the email details to get the OTP\n if (data) {\n delete data.confPassword;\n const { remote, errors } = await sendOTP(\n \"update-password\",\n data,\n dispatch,\n );\n if (remote === \"success\") {\n setNewPass(data?.newPassword);\n dispatch(setLoading(false));\n handleOpenOTP();\n } else if (errors) {\n form.setFields([\n { name: [\"password\"], errors: [errors?.errors?.error] },\n ]);\n dispatch(setLoading(false));\n }\n }\n };\n return (\n <>\n \n To update your password you must enter your new password and confirm the\n password password, then you must verify the link that we will send to\n your email address.\n
\n \n 
,\n name: \"instagram\",\n placeholder: \"Instagram Username\",\n },\n {\n icon: \n {console.log(\"file -->\", extension)}\n \n \n \n \n Cancel\n \n \n \n handleDownloadProof(\n rowData?.proofOfPayments,\n `${\n rowData?.paymentMethod\n }-payment-proof${rowData?.proofOfPayments?.slice(\n rowData?.proofOfPayments?.lastIndexOf(\".\"),\n )}`,\n )\n }\n style={{ width: \"100%\", borderRadius: \"8px\" }}\n size=\"large\"\n type=\"primary\"\n >\n Download\n \n \n
\n
\n
\n);\n\nexport default Preview;\n","import \"./docNpay.css\";\n\nimport { Button, Tooltip } from \"antd\";\nimport moment from \"moment\";\nimport React, { useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nimport ModalDailog from \"../../../../common/components/ModalDialogue\";\nimport { ReactComponent as EyeIcon } from \"../../../../images/affiliateImages/eye-icon.svg\";\nimport { ReactComponent as PaymentProofIcon } from \"../../../../images/affiliateImages/payment-proof.svg\";\nimport { ReactComponent as QuestionMarkIcon } from \"../../../../images/affiliateImages/question-mark.svg\";\nimport { getAffiliatePaymentDataAction } from \"../../../../redux/affiliate/affiliate.action\";\nimport { createValidUrl } from \"../../../../utils/commonFuctions\";\nimport { convertToUpperCase } from \"../../../../utils/javascript\";\nimport TableData from \"../../../setting/UserListV2/Table\";\nimport {\n convertToFloating,\n paymentStatus,\n paymentStatusColor,\n} from \"../helper\";\nimport Preview from \"./modals/Preview\";\nimport PayoneerModel from \"./Model/PayoneerModel\";\nimport PayPalModel from \"./Model/PayPalModel\";\nimport VenmoModel from \"./Model/VenmoModel\";\n\nconst convertStatus = (status) =>\n status\n ? { status: paymentStatus[status], color: paymentStatusColor[status] }\n : \"-\";\n\nconst Payments = ({ isSuperAdmin = false }) => {\n const dispatch = useDispatch();\n const [toggleModal, setToggleModal] = useState({});\n const [formData, setFormData] = useState({});\n const [proofOfPaymentToggle, setProofOfPaymentToggle] = useState(false);\n const [rowData, setRowData] = useState();\n const [file, setFile] = useState(\"\");\n const [extension, setExtension] = useState(\"\");\n const paymentColumns = [\n {\n title: \"Payment Number\",\n dataIndex: \"paymentNumber\",\n render: (value) => value || \"-\",\n },\n {\n title: \"Date Requested\",\n dataIndex: \"dateOfRequested\",\n className: \"text-center\",\n render: (value) => (value ? moment(value).format(\"MM/DD/YYYY\") : \"-\"),\n },\n {\n title: \"Date Of Payment\",\n dataIndex: \"paymentDate\",\n className: \"text-center\",\n render: (value) => (value ? moment(value).format(\"MM/DD/YYYY\") : \"-\"),\n },\n {\n title: \"Status\",\n dataIndex: \"status\",\n className: \"text-center\",\n render: (value, row) => {\n const statusVal = convertStatus(value);\n return (\n <>\n \n {statusVal?.status || statusVal}\n \n {value === \"error\" && (\n \n
\n \n );\n}\n","import classNames from \"classnames\";\nimport React from \"react\";\n\nimport { expenseAllocatedStatuses } from \"../helper\";\n\nexport default function ExpTabs({\n expenseStatusesKeys,\n handleFilterChange,\n filterOptions,\n loader,\n expenseStatusFilter,\n}) {\n return (\n {AlertIconExp}
\n \n \n
\n Export Data
\nThe data from the tab you have selected will be exported.
\n\n\n \n \n Confirm\n \n
\n \n
\n );\n}\n","import { Button, Card, Input, message, Modal, Table } from \"antd\";\nimport classNames from \"classnames\";\nimport { debounce } from \"lodash\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\n\nimport { getExpenseData } from \"../../../../api/expense\";\nimport {\n onAddExpenseForProject,\n setEditExpenseData,\n} from \"../../../../redux/recordAllocateExpense/recordAllocateExpense.action\";\nimport { CrewSearch } from \"../../../../utils/svg.file\";\nimport {\n expenseAllocatedStatuses,\n expenseTypes,\n expenseTypesForProjectExpenseTab,\n} from \"../../helper\";\nimport AddEditExpense from \"../AddEditExpense/AddEditExpense\";\nimport ExportData from \"../ExportData\";\nimport ExpTabs from \"../ExpTabs\";\nimport { getExpenseTableColumn } from \"../helper\";\nimport ViewAttachment from \"./ViewAttachment\";\n\nconst SearchSection = ({\n handleInputChange,\n value,\n onAddExpense,\n hasExpensePlan,\n isAddExpenseDisabled,\n}) => (\n <>\n - \n {expenseStatusesKeys?.map((key) => {\n const tabName = expenseAllocatedStatuses?.[key]?.tabName;\n const tabValue = expenseAllocatedStatuses?.[key]?.value;\n const count = expenseStatusFilter?.[key]?.count;\n return (\n
\n
\n \n \n
\n }\n >\n \n
\n \n {expenseTabsKeys.map((item) => {\n const tabName = expenseTypes?.[item]?.tabName;\n const tabValue = expenseTypes?.[item]?.value;\n return (\n \n !loader &&\n handleFilterChange({\n expenseType: tabValue,\n })\n }\n key={item}\n type=\"primary\"\n className={classNames({\n \"exp-fiter-btn\": true,\n \"seleted-btn\": filterOptions?.expenseType === tabValue,\n })}\n >\n {tabName}\n \n );\n })}\n
\n \n
\n \n
\n \n \n setPagination({\n ...pagination,\n currentPage: page,\n }),\n showSizeChanger: false,\n }}\n loading={loader}\n />\n
\n \n \n \n
\n \n \n click\n \n {token && customerView && (\n
\n \n \n {generatingPdf &&
\n )}\n \n {organizationDetails.name}\n
\n Sales: {currentUser.name}\n \n\n \n
\n \n
\n \n {item.displayName || item.title}\n \n {generatingPdf || (token && customerView) ? (\n \"\"\n ) : (\n \n \n {\n const newPhoto = await fileToBase64(e.file);\n setEditingLineItemImage({\n formulaId: item._id,\n lineItemDraggableId: item.draggableId,\n newImage: newPhoto,\n });\n }}\n accept=\"image/*\"\n >\n \n \n \n \n
\n )}\n \n \",\n ),\n }}\n />\n \n \n ))\n : \"\"}\n\n
- \n
- \n Subtotal :\n \n {NumberFormat(projectCharges.projectCharge)}\n\n \n {/** no need in soft launch -> Oscar */}\n {/* {discount ? (\n
- \n Discount :\n {NumberFormat(discount)}\n \n ) : (\n \"\"\n )} */}\n {estimationDetails.tax?.status &&\n estimationDetails.tax?.percentage > 0 ? (\n
- \n Tax {estimationDetails.tax?.percentage}%\n :\n \n {\" \"}\n {NumberFormat(projectCharges.taxAmount)}\n\n \n ) : (\n \"\"\n )}\n
- \n Contract Total\n :\n \n {NumberFormat(projectCharges.totalChargeAfterDiscountAndTax)}\n\n \n
\n Are you ready to move forward? Contact the salesperson you were\n working with right away to get on our schedule!\n
\n| \n {item.title}\n | \n\n {NumberFormat(item.totalPrice)}\n | \n
\n {\n if (e.length !== 2) {\n setIsOpenTermAndConditions([\"0\"]);\n } else {\n setIsOpenTermAndConditions([\"1\"]);\n }\n }}\n >\n \n {isEditTermAndCondition && editable ? (\n {\n const contentBlock = htmlToDraft(\n (\n estimationDetails.termAndCondition ||\n organization?.termAndCondition ||\n organizationDetails?.termAndCondition\n ).replaceAll(\"{{\", \"@{{\"),\n );\n const contentState =\n ContentState.createFromBlockArray(\n contentBlock.contentBlocks,\n );\n EditorState.createWithContent(contentState);\n setEditedTermAndCondition(\n EditorState.createWithContent(contentState),\n );\n\n setIsEditTermAndCondition(true);\n }}\n dangerouslySetInnerHTML={{\n __html: (\n estimationDetails.termAndCondition ||\n organization?.termAndCondition ||\n organizationDetails?.termAndCondition ||\n \"\"\n )\n .replace(\n /{{COMPANY_NAME}}/g,\n organizationDetails?.name,\n )\n .replace(\n /{{COMPANYNAME}}/g,\n organizationDetails?.name,\n )\n .replace(\n /{{CUSTOMER_NAME}}/g,\n customerDetails?.fullName,\n )\n .replace(\n /{{CUSTOMERNAME}}/g,\n customerDetails?.fullName,\n )\n .replace(\n /{{CUSTOMER_ADDRESS}}/g,\n customerDetails?.address,\n )\n .replace(\n /{{CUSTOMERADDRESS}}/g,\n customerDetails?.address,\n )\n .replace(\n /{{ADDRESS}}/g,\n organizationDetails?.address,\n )\n .replace(\n /{{USER_NAME_PHONE_NUMBER}}/g,\n () =>\n `1 ${formatPhoneNumber(\n `+${\n organizationDetails?.phoneNumber || \"\"\n }`,\n \"NATIONAL\",\n )}`,\n )\n .replace(\n /{{COMPANY_PHONE_NUMBER}}/g,\n () =>\n `1 ${formatPhoneNumber(\n `+${customerDetails?.contactNo || \"\"}`,\n \"NATIONAL\",\n )}`,\n ),\n }}\n />\n )}\n \n \n
\n ) : (\n \"\"\n )}\n \n {!generatingPdf &&\n !organization?.termAndCondition &&\n !organizationDetails?.termAndCondition &&\n needToShowTermsButton && (\n \n )}\n \n {\n setEditedTermAndCondition(editorState);\n let html = draftToHtml(\n convertToRaw(editorState.getCurrentContent()),\n );\n\n if (html.includes(\"@{{\")) {\n html = html.replace(/<\\/?a[^>]*>/g, \"\");\n html = html.replaceAll(\"@{{\", \"{{\");\n }\n setEstimationDetails((prevState) => ({\n ...prevState,\n termAndCondition: html,\n }));\n }}\n wrapperClassName=\"wrapper-class\"\n editorClassName=\"editor-class\"\n toolbarClassName=\"toolbar-class\"\n mention={{\n trigger: \"@\",\n separator: \" \",\n suggestions: mentions,\n }}\n />\n
\n ) : (\n \n {!estimationDetails?.customerSignature?.image}\n {customerSignature ? (\n {\n const isSignable =\n estimationDetails.signedByOrganization?.date &&\n (await compareUrlWithBase64(\n createValidUrl(\n estimationDetails.signedByOrganization\n ?.signature || organizationDetails.signature,\n ),\n contractorSignature,\n ));\n if (isSignable) {\n setESignatureOpenFor(SIGNATURE_FOR.CUSTOMER);\n } else {\n setShowCustomerSignatureWarning(true);\n }\n }}\n >\n Add Customer Signature\n \n )}\n
\n \n \n {contractorSignature ? (\n \n setESignatureOpenFor(SIGNATURE_FOR.CONTRACTOR)\n }\n disabled={!editable}\n >\n Add Contractor Signature\n \n ) : (\n \n )\n ) : (\n \n setESignatureOpenFor(SIGNATURE_FOR.CONTRACTOR)\n }\n disabled={!editable}\n >\n Add Contractor Signature\n \n )}\n {/* */}\n
\n \n \n\n \n \n
,\n ]}\n footer={null}\n >\n \n {payCash}\n
\n \n \n \n
\n To pay with a Check or Cash
\n\n {(depositPopupDetail?.invoiceSettings?.paymentIntegration?.stripe\n ?.accountId ||\n depositPopupDetail?.invoiceSettings?.paymentIntegration?.quickbooks\n ?.accountId) && (\n \n )}\n \n Confirm\n \n
\n \n \n
\n \n \n {\n const newPhoto = await fileToBase64(e.file);\n setEditingLineItemImage((prevState) => ({\n ...prevState,\n newImage: newPhoto,\n }));\n }}\n >\n \n \n \n \n
\n \n \n setEditingLineItemImage({\n formulaId: \"\",\n lineItemDraggableId: \"\",\n newImage: \"\",\n })\n }\n >\n Cancel\n \n \n Update for this estimate only\n \n \n Update estimation template\n \n
\n \n \n );\n}\n\nexport default Content;\n","export default __webpack_public_path__ + \"static/media/card.4075da13.png\";","import \"../../../auth/paymentInformation.css\";\n\nimport {\n CardCvcElement,\n CardExpiryElement,\n CardNumberElement,\n Elements,\n useElements,\n useStripe,\n} from \"@stripe/react-stripe-js\";\nimport { loadStripe } from \"@stripe/stripe-js\";\nimport { Button, Card, Col, Form, Input, message, Row, Space } from \"antd\";\nimport _ from \"lodash\";\nimport React, { useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useNavigate } from \"react-router-dom\";\n\nimport {\n checkTaxCalculationAction,\n reactivateSubscriptionAction,\n} from \"../../../../api/billing\";\nimport { applyPromoCodeAPICall } from \"../../../../api/planPricing\";\nimport { getCurrentUser } from \"../../../../api/user\";\nimport card from \"../../../../images/card.png\";\nimport { plans } from \"../../../../utils/constants/constants\";\nimport { NumberFormat } from \"../../../../utils/numberFormat\";\nimport { paymentInfoSchema } from \"../../../../validators/auth/auth.validator\";\nimport CodeDataWithAmountNotFree from \"../../../auth/PaymentInfo/CodeDataWithAmountNotFree\";\nimport CodeDataWithPercentageEntireNotFree from \"../../../auth/PaymentInfo/CodeDataWithPercentageEntireNotFree\";\nimport CodeDataWithPercentageNotFree from \"../../../auth/PaymentInfo/CodeDataWithPercentageNotFree\";\nimport CountryDropdown from \"../../../common/CountryDropdown\";\nimport SmallLoader from \"../../../loader/smallLoader\";\n\nconst stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PRIVATE_KEY);\n\nconst initialFormData = {\n name: \"\",\n address: \"\",\n city: \"\",\n state: \"\",\n zipCode: \"\",\n country: \"\",\n};\n\nfunction calculatePercentage(number, percentage) {\n const result = (number * percentage) / 100;\n return result.toFixed(2);\n}\n\nfunction PaymentForm({ setShowReactiveSub, setShowPaymentGate, selectedPlan }) {\n const stripe = useStripe();\n const elements = useElements();\n const dispatch = useDispatch();\n const [form, setForm] = useState(initialFormData);\n const [errors, setErrors] = useState({});\n const [cardError, setCardError] = useState({});\n const [loader, setLoader] = useState(false);\n const navigate = useNavigate();\n const [promoCode, setPromoCode] = useState(\"\");\n const [promoCodeError, setPromoCodeError] = useState(\"\");\n const userId = localStorage.getItem(\"userId\");\n const planId =\n plans[selectedPlan || localStorage.getItem(\"planName\")]?.planId;\n const [codeData, setCodeData] = useState({});\n const [isTax, setIsTax] = useState(false);\n const [isCountryChange, setIsCountryChange] = useState(false);\n const [isZipCode, setIsZipCode] = useState(false);\n const [taxAmount, setTaxAmount] = useState({});\n const orgData = useSelector((state) => state?.user?.organization);\n const planPrice = parseFloat(\n plans[selectedPlan || localStorage.getItem(\"planName\")]?.planPrice,\n );\n\n let discountAmount =\n codeData?.discountType === \"amount\"\n ? codeData?.discount\n : codeData?.discountType === \"percentage\"\n ? parseFloat(calculatePercentage(planPrice, codeData?.discount))\n : 0;\n const freeTrialPeriod =\n codeData?.trialMonths > 0\n ? codeData?.trialMonths === 1\n ? \"1 Month\"\n : `${codeData?.trialMonths} Months`\n : \"14 Day\";\n\n const useOptions = () => {\n const fontSize = \"16px\";\n const options = React.useMemo(\n () => ({\n style: {\n base: {\n fontSize,\n fontFamily: \"'Poppins', sans-serif\",\n fontWeight: \"300\",\n \"::placeholder\": {\n color: \"#bfbfbf\",\n },\n },\n invalid: {\n color: \"#9e2146\",\n },\n },\n }),\n [fontSize],\n );\n return options;\n };\n\n const options = useOptions();\n\n const checkTaxCalculation = async () => {\n setLoader(true);\n const payload = {\n amount: parseFloat(planPrice),\n zipCode: form?.zipCode,\n country: form?.country,\n };\n const result = await checkTaxCalculationAction(payload);\n if (result?.remote === \"success\") {\n setTaxAmount(result?.data?.data);\n setIsTax(true);\n setLoader(false);\n } else {\n message.error(result?.errors?.errors?.error, 5);\n setTaxAmount({});\n setLoader(false);\n setIsTax(false);\n }\n };\n\n useEffect(() => {\n if (form?.zipCode?.length === 0) {\n setTaxAmount({});\n }\n }, [form]);\n\n const debouncedSearch = _.debounce(async () => {\n setIsZipCode(true);\n setIsCountryChange(true);\n }, 3000);\n\n useEffect(() => {\n if (\n isCountryChange &&\n isZipCode &&\n form?.zipCode?.length &&\n form?.country?.length\n ) {\n checkTaxCalculation();\n }\n }, [isZipCode, isCountryChange]);\n\n const handleAllChange = (e) => {\n setForm({ ...form, [e.target.name]: e.target.value });\n if (e.target.name === \"zipCode\") {\n debouncedSearch(e.target.value);\n setIsTax(false);\n setIsZipCode(false);\n if (e.target.value?.length === 0) {\n setTaxAmount({});\n }\n }\n };\n\n const handleCountryChange = (code) => {\n setForm({ ...form, country: code });\n debouncedSearch(code);\n setIsCountryChange(false);\n };\n\n const handleSubmit = async (e) => {\n e && e?.preventDefault();\n setErrors({});\n const { isValid, errors: formError } = paymentInfoSchema(form);\n if (!isValid) {\n setErrors(formError);\n } else {\n setLoader(true);\n const cardNumberElement = elements.getElement(CardNumberElement);\n\n const res = await stripe.createToken(cardNumberElement, {\n name: form?.name,\n address_zip: form?.zipCode,\n address_line1: form?.address,\n address_state: form?.state,\n address_city: form?.city,\n address_country: form?.country,\n });\n\n if (res?.error) {\n setLoader(false);\n setCardError(res?.error);\n }\n\n if (res?.token?.id) {\n setLoader(true);\n const payload = codeData?.name\n ? {\n userId,\n planId,\n coupon: localStorage.getItem(\"promoCode\") || promoCode,\n token: res?.token?.id,\n country: form?.country,\n }\n : {\n userId,\n planId,\n token: res?.token?.id,\n country: form?.country,\n };\n\n const response = await reactivateSubscriptionAction(payload);\n if (response?.remote === \"success\") {\n setLoader(false);\n message.success(\n \"You have successfully reactivated your subscription!\",\n 10,\n );\n localStorage.setItem(\"isCardDeclined\", false);\n localStorage.setItem(\"isSubscriptionCanceled\", false);\n localStorage.setItem(\"token\", response?.data?.data?.token);\n\n const result = await getCurrentUser();\n if (result?.data?.id) {\n const userId = result?.data?.id;\n localStorage.setItem(\"userId\", userId);\n }\n if (result?.remote === \"success\") {\n dispatch({ type: \"user/userLoaded\", payload: result.data });\n if (!localStorage.getItem(\"userRole\")) {\n localStorage.setItem(\"userRole\", result.data.userRole);\n }\n }\n setShowPaymentGate(false);\n navigate(\"/v2/crm\");\n } else if (response?.remote === \"failure\") {\n setLoader(false);\n message.error(\n response?.errors?.errors?.error ||\n \"Sorry we have a problem processing your card, if the error persists contact your bank and try again later\",\n 10,\n );\n }\n }\n }\n };\n\n const handlePromoCodeChange = (e) => {\n const { value } = e.target;\n setPromoCode(value);\n if (value?.length > 0) {\n setPromoCodeError(\"\");\n }\n };\n\n const handleTaxAfterCode = async (promoData) => {\n discountAmount =\n promoData?.discountType === \"amount\"\n ? promoData?.discount\n : promoData?.discountType === \"percentage\"\n ? calculatePercentage(planPrice, promoData?.discount)\n : 0;\n\n setLoader(true);\n const payload = {\n amount:\n parseFloat((planPrice - discountAmount)?.toFixed(2)) >= 0\n ? parseFloat((planPrice - discountAmount)?.toFixed(2))\n : 0,\n zipCode: form?.zipCode,\n country: form?.country,\n };\n const result = await checkTaxCalculationAction(payload);\n if (result?.remote === \"success\") {\n setTaxAmount(result?.data?.data);\n setIsTax(true);\n setLoader(false);\n } else {\n message.error(result?.errors?.errors?.error, 5);\n setTaxAmount({});\n setLoader(false);\n setIsTax(false);\n }\n };\n\n const handleApplyButton = async () => {\n if (promoCode?.length === 0) {\n setPromoCodeError(\"Please enter Promo Code!\");\n } else {\n const payload = {\n planId,\n coupon: promoCode,\n isReactive: true,\n organizationId: orgData?._id,\n };\n\n setLoader(true);\n const response = await applyPromoCodeAPICall(payload);\n if (response?.remote === \"success\") {\n setLoader(false);\n setCodeData(response?.data?.data);\n message.success(\"Promo code applied successfully\", 10);\n localStorage.setItem(\"promoCode\", promoCode);\n if (form?.zipCode?.length > 0) {\n handleTaxAfterCode(response?.data?.data);\n }\n } else {\n setLoader(false);\n setPromoCode(\"\");\n localStorage.removeItem(\"promoCode\");\n message.error(\n response?.errors?.errors?.error || \"Please enter valid Promo code\",\n 10,\n );\n }\n }\n };\n const handleTaxAfterPCRemove = async () => {\n setLoader(true);\n const payload = {\n amount: planPrice,\n zipCode: form?.zipCode,\n country: form?.country,\n };\n const result = await checkTaxCalculationAction(payload);\n if (result?.remote === \"success\") {\n setTaxAmount(result?.data?.data);\n setIsTax(true);\n setLoader(false);\n } else {\n message.error(result?.errors?.errors?.error, 5);\n setTaxAmount({});\n setLoader(false);\n setIsTax(false);\n }\n };\n\n const handlePromoCodeRemove = () => {\n setPromoCode(\"\");\n setCodeData({});\n localStorage.setItem(\"promoCode\", \"\");\n if (form?.zipCode?.length > 0) {\n handleTaxAfterPCRemove();\n }\n };\n\n return (\n \n \n \n {loader && (\n
\n \n
\n )}\n \n
\n );\n};\n\nexport default AddSubcontractor;\n","import \"../index.css\";\n\nimport { Modal } from \"antd\";\nimport React from \"react\";\n\nimport AddSubcontractor from \"./AddSubcontractor\";\n\nconst AddUpdateSubcontractor = ({\n open,\n handleCancel,\n handleNext,\n isEditForm,\n}) => (\n \n
\n \n Please enter your subcontractor‘s information here.
\n\n \n \n {isEditForm ? \"Update\" : \"Add\"} Subcontractor\n \n
\n \n \n \n \n \n \n \n {headerDetails?.commission}% Commission\n \n \n \n {promoCodeStatus[headerDetails?.status] ||\n headerDetails?.status}\n \n \n
\n \n
\n
\n \n \n \n
\n );\n};\n\nexport default MyReferralDetails;\n","import \"react-draft-wysiwyg/dist/react-draft-wysiwyg.css\";\n\nimport { Button, Card, Form, message } from \"antd\";\nimport classNames from \"classnames\";\nimport { ContentState, convertToRaw, EditorState } from \"draft-js\";\nimport draftToHtml from \"draftjs-to-html\";\nimport htmlToDraft from \"html-to-draftjs\";\nimport React, { useEffect, useState } from \"react\";\nimport { Editor } from \"react-draft-wysiwyg\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nimport {\n copyTermsAndCondition,\n updateOrganizationTermAndCondition,\n} from \"../../../api/organization\";\nimport { getOrganization } from \"../../../redux/organization/organization.action\";\nimport { USER_ROLE } from \"../../../utils/constants/constants\";\nimport { mentions } from \"../../../utils/suggestions\";\nimport BreadcrumbBar from \"../../breadcrumb/Breadcrumb.pages\";\nimport DisclaimerPopup from \"../../disclaimerPopup\";\n\nexport default function TermsAndConditions({\n needBreadcrumb = true,\n needPreview = true,\n className = \"\",\n handleClosePopup = null,\n}) {\n const dispatch = useDispatch();\n const user = useSelector((state) => state.user);\n const { userRole } = user;\n const [previewHtml, setPreviewHtml] = useState();\n const [openDisclaimerPopup, setOpenDisclaimerPopup] = useState(false);\n const mentionsVariables = [\n { key: \"companyName\", value: user?.companyName?.bold() },\n ];\n const [editorState, setEditorState] = React.useState(\n EditorState.createEmpty(),\n );\n const [loading, setLoading] = useState(false);\n const [termAndConditionCopying, setTermAndConditionCopying] = useState(false);\n const [html, setHtml] = useState(\"\");\n const replaceVariables = (html) => {\n if (html) {\n let newHtml = html;\n mentions.forEach((item) => {\n mentionsVariables?.forEach((data) => {\n if (item.field === data.key) {\n newHtml = newHtml.replaceAll(item.value, data.value);\n }\n });\n });\n setPreviewHtml(newHtml);\n }\n };\n\n const _copyTermsAndCondition = async () => {\n setTermAndConditionCopying(true);\n const key = \"updatable\";\n const hide = message.loading({\n content: \"Term And Condition Template Copy In Process\",\n key,\n duration: 0,\n });\n const response = await copyTermsAndCondition();\n if (response.remote === \"success\") {\n dispatch({\n type: \"user/userLoaded\",\n payload: {\n ...user,\n organization: {\n ...user.organization,\n termAndCondition: response.data.termAndCondition,\n },\n },\n });\n setHtml(response.data.termAndCondition);\n hide();\n message.success({\n content: \"Copied Successfully\",\n key,\n duration: 2,\n });\n\n setTermAndConditionCopying(false);\n } else {\n hide();\n message.error({\n content: \"Something Went Wrong\",\n key,\n duration: 2,\n });\n\n setTermAndConditionCopying(false);\n }\n setOpenDisclaimerPopup(false);\n };\n useEffect(() => {\n replaceVariables(html);\n }, [html]);\n\n const onEditorStateChange = (editorState) => {\n setEditorState(editorState);\n let html = draftToHtml(convertToRaw(editorState.getCurrentContent()));\n\n if (user && user.organization && html.includes(\"@{{\")) {\n html = html.replace(/<\\/?a[^>]*>/g, \"\");\n html = html.replaceAll(\"@{{\", \"{{\");\n }\n setHtml(html);\n };\n\n const updateTermAndCondition = async () => {\n if (user && user.organization) {\n setLoading(true);\n if (html === \"\") {\n message.error(\"content cannot be empty\");\n setLoading(false);\n }\n message.loading({\n key: \"updateTermAndCondition\",\n content: \"Updating Term and Conditions\",\n duration: 0,\n });\n\n const newFData = new FormData();\n newFData.append(\"termAndCondition\", html);\n const response = await updateOrganizationTermAndCondition(newFData);\n if (response.remote === \"success\") {\n message.success({\n key: \"updateTermAndCondition\",\n content: \"Updated Successfully\",\n duration: 2,\n });\n dispatch({\n type: \"user/userLoaded\",\n payload: {\n ...user,\n organization: {\n ...user.organization,\n termAndCondition: response.data.data.termAndCondition,\n },\n },\n });\n dispatch(getOrganization());\n if (handleClosePopup) {\n handleClosePopup();\n }\n setLoading(false);\n } else {\n message.error({\n key: \"updateTermAndCondition\",\n content: \"Something went wrong\",\n duration: 2,\n });\n }\n setLoading(false);\n }\n };\n\n useEffect(() => {\n if (user && user.organization) {\n const contentBlock = htmlToDraft(\n user.organization.termAndCondition.replaceAll(\"{{\", \"@{{\"),\n );\n const contentState = ContentState.createFromBlockArray(\n contentBlock.contentBlocks,\n );\n setHtml(user.organization.termAndCondition);\n setEditorState(EditorState.createWithContent(contentState));\n }\n }, [user]);\n\n return (\n <>\n {needBreadcrumb && (\n \n
\n \n \n Terms & conditions
\n {userRole?.roleName === USER_ROLE.superAdmin ? (\n <> \n ) : (\n <>\n \n \n )}\n\n {\n if (e === \"add\") {\n setIsAddCategory(true);\n } else {\n setSelected(e);\n }\n }}\n >\n {options.map((option) => (\n \n {option.title}\n \n ))}\n Add Category \n \n \n
\n );\n}\n\nexport default Category;\n","import { Button, Input, Modal, Select } from \"antd\";\nimport React from \"react\";\n\nimport {\n createFormulaSubCategoryAPI,\n getFormulaSubCategoryAPI,\n} from \"../../../../api/formula\";\n\nfunction SubCategory({ category, subCategory, setSubCategory }) {\n const [isAddSubCategory, setIsAddSubCategory] = React.useState(false);\n const [loading, setLoading] = React.useState(true);\n const [selected, setSelected] = React.useState(\"\");\n const [title, setTitle] = React.useState(\"\");\n const [options, setOptions] = React.useState([]);\n const getFormulaSubCategory = async (categoryId) => {\n setLoading(true);\n const res = await getFormulaSubCategoryAPI(categoryId);\n if (res.remote === \"success\") {\n setOptions(res.data.data);\n }\n setLoading(false);\n };\n const createFormulaSubCategory = async () => {\n setLoading(true);\n const payload = {\n title,\n categoryId: category,\n };\n const res = await createFormulaSubCategoryAPI(payload);\n if (res.remote === \"success\") {\n setOptions([...options, res.data.data]);\n setIsAddSubCategory(false);\n setSelected(res.data.data._id);\n setTitle(\"\");\n }\n setLoading(false);\n };\n\n React.useEffect(() => {\n // fetch sub categories\n if (category) {\n getFormulaSubCategory(category);\n setSelected(\"\");\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [category]);\n\n React.useEffect(() => {\n if (subCategory) {\n setSelected(subCategory);\n }\n }, [subCategory]);\n\n React.useEffect(() => {\n if (setSubCategory && selected) {\n setSubCategory(selected);\n }\n }, [setSubCategory, selected]);\n return (\n \n
\n \n Category:
\n \n setTitle(e.target.value)}\n disabled={loading}\n value={title}\n />\n
\n \n \n \n
\n \n {\n if (e === \"add\") {\n setIsAddSubCategory(true);\n } else {\n setSelected(e);\n }\n }}\n disabled={!category || loading}\n >\n {options.map((option) => (\n \n {option.title}\n \n ))}\n Add Sub Category \n \n \n
\n );\n}\n\nexport default SubCategory;\n","import { useState } from \"react\";\nimport { Mention, MentionsInput } from \"react-mentions\";\nimport { useLocation } from \"react-router-dom\";\n\nimport {\n searchCatalogByName,\n searchOldCatalogByName,\n} from \"../../api/catalogue\";\nimport { FORMULA_MATERIAL_TYPES } from \"../../components/formula/v2/helper\";\n\nfunction ReactMentionInput({\n type,\n elementList,\n elementProps,\n hiddenInputList,\n lineItemsList,\n customInput,\n onChange,\n value,\n placeholder,\n className,\n onBlur,\n noMaterial,\n noElement,\n noHiddenInput,\n isCustomInput,\n isMaterialInput,\n isTotalCharge,\n isCustomNameInput,\n getSelectedCatalog = null,\n getSelectedVariation = null,\n variationsList,\n disabled,\n onKeyDown,\n inputRef,\n}) {\n const params = useLocation();\n const messtyle = {\n input: {\n overflow: \"auto\",\n maxHeight: 150,\n },\n highlighter: {\n boxSizing: \"border-box\",\n overflow: \"hidden\",\n maxHeight: 150,\n },\n suggestions: {\n zIndex: 999999,\n },\n };\n const [originalCatalogs, setOriginalCatalogs] = useState([]);\n const handleCatalog = (query, callback) => {\n const searchQuery = params.search.trim();\n const queryParams = new URLSearchParams(searchQuery);\n const show = queryParams.get(\"show\");\n if (show === \"old\") {\n return searchOldCatalogByName(query, [])\n .then((res) => {\n if (res.remote === \"success\") {\n const catalogs = res.data.data.map((item) => ({\n display: item.name,\n slug: item.slug,\n id: item.superId,\n }));\n return catalogs;\n }\n return [];\n })\n .then(callback);\n }\n return searchCatalogByName(query, [])\n .then((res) => {\n if (res.remote === \"success\") {\n const catalogs = res.data.data.map((item) => ({\n display: item.name,\n slug: item.slug,\n id: item.superId,\n }));\n setOriginalCatalogs(catalogs);\n return catalogs;\n }\n return [];\n })\n .then(callback);\n };\n\n return (\n <>\n \n
\n \n Category:
\n \n setTitle(e.target.value)}\n value={title}\n disabled={loading}\n />\n
\n \n setIsAddSubCategory(false)}\n >\n Cancel\n \n \n
\n \n ({\n id: elem._id,\n display: elem.name,\n }))}\n elementProps={{\n onAdd: (id) => {\n setSelectedElement(elementList.find((elem) => elem._id === id));\n },\n }}\n variationsList={processedVariations}\n getSelectedVariation={getSelectedVariation}\n hiddenInputList={hiddenValueList.map((hiddenValue) => ({\n display: hiddenValue.name,\n id: hiddenValue._id,\n }))}\n placeholder={placeholder || \"\"}\n value={value}\n onChange={(e) => {\n if (!isChanging) {\n setIsChanging(true);\n }\n if (e.target.value) {\n processedVariations.forEach((variation) => {\n e.target.value.replace(variation.display, variation.slug);\n });\n }\n setValue(e.target.value);\n }}\n disabled={disabled}\n onBlur={() => {\n if (isChanging) {\n setIsChanging(false);\n handleChange({\n expression: value,\n element: selectedElement._id,\n });\n }\n }}\n noMaterial\n isTotalCharge\n />\n
\n );\n}\n\nexport default ConditionalInput;\n","import { DeleteOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\n\nimport ReactMentionInput from \"../../../../utils/mentionInput/mentionInput\";\nimport ConditionalInput from \"../elementCard/conditionInput\";\nfunction ClientContractV2({\n title,\n clientContractV2,\n setClientContractV2,\n elementList,\n hiddenValueList,\n getElementCustomFields,\n processedLineItems,\n isUpdatedLineItemName,\n setIsUpdatedLineItemName,\n toggleLineItemNameUpdate,\n}) {\n const inputRefs = React.useRef([]);\n const [remountCondition, setRemountCondition] = React.useState(false);\n const [contract, setContract] = React.useState([]);\n\n const [updatedProcessedElementList, setUpdateProcessedElementList] =\n React.useState([]);\n\n const handleInputRef = (element, index) => {\n inputRefs.current[index] = element;\n };\n\n const handleBlur = () => {\n const newContract = contract.map((contract) => {\n delete contract.tempId;\n return contract;\n });\n setClientContractV2(newContract);\n };\n\n React.useEffect(() => {\n if (clientContractV2 && clientContractV2.length) {\n setContract(\n clientContractV2.map((contract, idx) => {\n if (!contract._id) {\n contract.tempId = idx;\n }\n return contract;\n }),\n );\n }\n }, [clientContractV2]);\n\n React.useEffect(() => {\n if (elementList && getElementCustomFields) {\n const newProcessedElementList = [];\n elementList.forEach((element) => {\n if (element.type === \"dropdown\") {\n const elementCustomFields = getElementCustomFields(element._id);\n if (elementCustomFields) {\n const { customFields } = elementCustomFields;\n customFields.forEach((fields) => {\n newProcessedElementList.push({\n display: `${element.name} - ${fields.fieldName}`,\n id: `${element._id}-${fields.superId || fields._id}`,\n });\n });\n newProcessedElementList.push({\n display: element.name,\n id: element._id,\n });\n }\n } else {\n const newElement = {\n display: element.name,\n id: element._id,\n };\n newProcessedElementList.push(newElement);\n }\n if (element.customInput) {\n element.customInput.forEach((customInput) => {\n newProcessedElementList.push({\n display: `${element.name} - ${customInput.name}`,\n id: `${element._id}-${customInput.id}`,\n });\n });\n }\n });\n setUpdateProcessedElementList(newProcessedElementList);\n }\n }, [elementList, getElementCustomFields]);\n\n function replaceLineItems(clientContract) {\n for (let i = 0; i < clientContract.length; i++) {\n const { content } = clientContract[i];\n\n // Use a single regex to match all occurrences and perform the replacement\n clientContract[i].content = content.replace(\n /\\^{{lineItems\\|\\|([^|]*)\\|\\|([^}]*)}}/g,\n (match, id) => {\n const replacement = isUpdatedLineItemName[id];\n return replacement ? `^{{lineItems||${id}||${replacement}}}` : match;\n },\n );\n }\n\n return clientContract;\n }\n React.useEffect(() => {\n if (Object.keys(isUpdatedLineItemName).length) {\n // update line items name in client contracts\n const newClientContract = replaceLineItems(\n [...clientContractV2],\n processedLineItems,\n );\n setIsUpdatedLineItemName({});\n setClientContractV2(newClientContract);\n }\n }, [toggleLineItemNameUpdate]);\n\n return (\n | \n {title}\n | \n||
|---|---|---|
| \n {!remountCondition ? (\n | \n \n | \n {contract.length !== 1 ? (\n \n | \n ) : (\n \"\"\n )}\n
{element.auto}
\n\n Are you sure you want to delete item ?
\nAre you sure you want to delete this service?
\n\n {\n if (handleAddMaterial && !isAddingMaterial)\n handleAddMaterial(index + 1);\n }}\n >\n {treeIcon}\n \n
\n \n {\n e = { target: { ...e.target, name: \"unitCost\" } };\n handleChange(e, index, newValue);\n }}\n placeholder=\"Enter Charge use '@' and '#' for the dynamic values\"\n value={material.unitCost}\n onBlur={onFocusOut}\n isMaterialInput\n type={material.type}\n hiddenInputList={hiddenValueList.map((hiddenValue) => ({\n display: hiddenValue.name,\n id: hiddenValue._id,\n }))}\n lineItemsList={dropdownCustomField.map((field) => ({\n display: `${material?.name}-${field.fieldName}`,\n id: field.superId || field._id,\n }))}\n getSelectedCatalog={getSelectedCatalog}\n />\n
\n \n \n {\n e = { target: { ...e.target, name: \"cost\" } };\n handleChange(e, index, newValue);\n }}\n placeholder=\"Enter Charge use '@' and '#' for the dynamic values\"\n value={material.cost}\n onBlur={onFocusOut}\n isMaterialInput\n type={material.type}\n hiddenInputList={hiddenValueList.map((hiddenValue) => ({\n display: hiddenValue.name,\n id: hiddenValue._id,\n }))}\n lineItemsList={dropdownCustomField.map((field) => ({\n display: `${material?.name}-${field.fieldName}`,\n id: field.superId,\n }))}\n getSelectedCatalog={getSelectedCatalog}\n />\n
\n \n Are you sure you want to delete this item?
\n\n {\n if (e === \"add\") {\n setIsAddingTabs(true);\n } else {\n setSelected(e);\n }\n }}\n >\n {options.map((option) => (\n \n \n {option.title}\n {[\"main\", \"report\"].includes(option.tabId) ? (\n \"\"\n ) : (\n {\n e.stopPropagation(); // Prevent the select event from triggering\n handleDeleteConfirmation(option.tabId);\n }}\n />\n )}\n
\n \n ))}\n \n
\n \n Tab:
\n \n setTitle(e.target.value)}\n value={title}\n />\n
\n \n \n \n
\n \n
\n \n \n );\n}\n\nexport default Tabs;\n","import {\n CloudUploadOutlined,\n SaveOutlined,\n UploadOutlined,\n} from \"@ant-design/icons\";\nimport {\n Button,\n Card,\n Col,\n Input,\n message,\n Row,\n Switch,\n Tooltip,\n Upload,\n} from \"antd\";\nimport ImgCrop from \"antd-img-crop\";\nimport { debounce } from \"lodash\";\nimport React, { useEffect } from \"react\";\nimport {\n Navigate,\n useLocation,\n // useNavigate\n} from \"react-router-dom\";\n\n// import { Upload } from \"antd\";\n// import ImgCrop from \"antd-img-crop\";\nimport {\n getCatalogDetailsBySuperId,\n searchCatalogByName,\n searchOldCatalogByName,\n} from \"../../../api/catalogue\";\nimport {\n addFormulaNewElement,\n getFormulaById,\n publishChanges,\n unpublishChanges,\n updateFormula,\n} from \"../../../api/formula\";\nimport { GetAllUnits } from \"../../../api/unit\";\nimport { createValidUrl } from \"../../../utils/commonFuctions\";\nimport { USER_ROLE } from \"../../../utils/constants/constants\";\nimport { fileToBase64 } from \"../../../utils/fileBase64\";\nimport { validateArthmaticString } from \"../../../utils/formula/formula\";\nimport regex from \"../../../utils/regex\";\nimport { getRole } from \"../../../utils/role\";\nimport { treeIcon, unpublish } from \"../../../utils/svg.file\";\nimport BreadcrumbBar from \"../../breadcrumb/Breadcrumb.pages\";\nimport SmallLoader from \"../../loader/smallLoader\";\nimport Category from \"./category/category\";\nimport SubCategory from \"./category/subCategory\";\nimport ClientContractV2 from \"./clientContractV2\";\nimport ElementCard from \"./elementCard/elementCard.compnent\";\nimport { FORMULA_MATERIAL_TYPES } from \"./helper\";\nimport HiddenValueCard from \"./hiddenValueCard/hiddenValueCard.component\";\nimport MaterialCard from \"./materialCard/materialCard.component\";\nimport Tabs from \"./tabs\";\n\n/**\n * @author Technologies\n * @version 2.0.0\n */\n\nfunction FormulaV2() {\n // const navigate = useNavigate();\n const [publishing, setPublishing] = React.useState(false);\n const [formulaDetails, setFormulaDetails] = React.useState({});\n const [publishedFormula, setPublishedFormula] = React.useState(\"\");\n const [publishedAt, setPublishedAt] = React.useState(\"\");\n const [displayName, setDisplayName] = React.useState(\"\");\n const [title, setTitle] = React.useState(\"\");\n const [category, setCategory] = React.useState(\"\");\n const [subCategory, setSubCategory] = React.useState(\"\");\n const [elementList, setElementList] = React.useState([]);\n const [materials, setMaterials] = React.useState([]);\n const [hiddenValues, setHiddenValues] = React.useState([]);\n\n const [clientContract, setClientContract] = React.useState(\"\");\n const [clientContractV2, setClientContractV2] = React.useState([]);\n const [crewNotes, setCrewNotes] = React.useState([]);\n const [redirect, setRedirect] = React.useState(null);\n const [catalogs, setCatalogs] = React.useState([]);\n const [photo, setPhoto] = React.useState(null);\n const [file, setFile] = React.useState(null);\n\n const [units, setUnits] = React.useState([]);\n const [customFields, setCustomFields] = React.useState([]);\n const [processedElementList, setProcessedElementList] = React.useState([]);\n const [processedLineItems, setProcessedLineItems] = React.useState([]);\n const [updateProcessedElement, setUpdateProcessedElement] =\n React.useState(\"\"); // this state will store the id of the dropdown element which has changed the dropdown field\n const [isLoadingFirstTime, setIsLoadingFirstTime] = React.useState(true);\n const [isAddingElement, setIsAddingElement] = React.useState(null);\n const [catalogsAndServices, setCatalogsAndServices] = React.useState([]);\n const [subCatalogItems, setSubCatalogItems] = React.useState([]);\n const [loading, setLoading] = React.useState(true);\n\n const [isUpdatedElementName, setIsUpdatedElementName] = React.useState({});\n const [isUpdatedLineItemName, setIsUpdatedLineItemName] = React.useState({});\n const [toggleLineItemNameUpdate, setToggleLineItemNameUpdate] =\n React.useState(false); // this statue toggles when line item name update\n const [variations, setVariations] = React.useState({});\n const [isAddingMaterial, setIsAddingMaterial] = React.useState(false);\n\n const [manualSave, setManualSave] = React.useState(false);\n const [elementTabs, setElementTabs] = React.useState([]);\n\n const current = new Date();\n const date = `${\n current.getMonth() + 1\n }/${current.getDate()}/${current.getFullYear()}`;\n\n const onChange = async (e) => {\n const base64 = await fileToBase64(e.file);\n setFile(e.file || null);\n setPhoto(base64);\n };\n\n const params = useLocation();\n\n React.useEffect(() => {\n getAllCatalogsAndServices();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n React.useEffect(() => {\n const searchQuery = params.search.trim();\n const query = new URLSearchParams(searchQuery);\n const formulaId = query.get(\"formulaId\");\n if (!formulaId) {\n setRedirect(\"/services\");\n } else {\n getFormulaDetails(formulaId);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [params]);\n\n React.useEffect(() => {\n const newProcessedLineItems = [];\n materials.forEach((material) => {\n const elem = material.name.match(regex.materialInput) || [];\n let { name } = material;\n elem.forEach((nam) => {\n const elemName = nam.split(\"||\")[2];\n name = name.replace(nam, elemName.replace(\"}}\", \"\"));\n });\n name = name.trim();\n newProcessedLineItems.push({\n display: `${name} - Quantity`,\n id: `${material._id}-quantity`,\n });\n newProcessedLineItems.push({\n display: `${name} - Unit`,\n id: `${material._id}-unit`,\n });\n newProcessedLineItems.push({\n display: `${name} - Unit Cost`,\n id: `${material._id}-unitCost`,\n });\n newProcessedLineItems.push({\n display: `${name} - Cost`,\n id: `${material._id}-cost`,\n });\n newProcessedLineItems.push({\n display: `${name} - Charge`,\n id: `${material._id}-charge`,\n });\n if (material.type === FORMULA_MATERIAL_TYPES.material) {\n (material.customFields || []).forEach((customField) => {\n newProcessedLineItems.push({\n display: `${name}-${customField.fieldName}`,\n id: customField.superId || customField._id,\n });\n });\n }\n });\n setProcessedLineItems(newProcessedLineItems);\n }, [materials]);\n\n async function getFormulaDetails(formulaId) {\n const formulaDetails = await getFormulaById(formulaId);\n if (formulaDetails.remote === \"success\") {\n setFormulaDetails(formulaDetails.data.data);\n const publishedFormulaDetails = {\n title: formulaDetails.data.data.title,\n elements: formulaDetails.data.data.elements,\n materials: formulaDetails.data.data.materials,\n hiddenValues: formulaDetails.data.data.hiddenValues,\n publishedAt: formulaDetails.data.data.publishedAt,\n clientContract: formulaDetails.data.data.clientContract,\n photo: file || formulaDetails.data.data.photo,\n catalogs: formulaDetails.data.data.catalogs,\n };\n setPublishedFormula(JSON.stringify(publishedFormulaDetails));\n setTitle(formulaDetails.data.data.title);\n\n setCategory(formulaDetails.data.data.category || \"\");\n setSubCategory(formulaDetails.data.data.subCategory || \"\");\n setElementTabs(\n formulaDetails.data.data.elementsTabs || [\n { tabId: \"main\", title: \"Main\" },\n { tabId: \"report\", title: \"Profit\" },\n ],\n );\n\n setPublishedAt(formulaDetails.data.data.publishedAt);\n setDisplayName(formulaDetails.data.data.displayName);\n const catalogs = formulaDetails.data.data?.catalogs || [];\n setCatalogs([...catalogs]);\n setClientContract(formulaDetails.data.data.clientContract);\n setClientContractV2(formulaDetails.data.data.clientContractV2);\n setCrewNotes(formulaDetails.data.data.crewNotes || []);\n setPhoto(formulaDetails.data.data.photo);\n !file && setFile(formulaDetails.data.data.photo);\n\n setIsLoadingFirstTime(false);\n } else {\n setIsLoadingFirstTime(false);\n }\n }\n\n async function updateFormulaDetails(data) {\n const key = \"updatable\";\n message.loading({ content: \"Saving...\", key, duration: 0 });\n setIsAddingElement(true);\n const updatedFormulaDetails = await updateFormula(formulaDetails._id, data);\n if (updatedFormulaDetails.remote === \"success\") {\n const publishedFormulaDetails = {\n title: updatedFormulaDetails.data.data.title,\n publishedAt: updatedFormulaDetails.data.data.publishedAt,\n elements: updatedFormulaDetails.data.data.elements,\n materials: updatedFormulaDetails.data.data.materials,\n hiddenValues: updatedFormulaDetails.data.data.hiddenValues,\n clientContract: updatedFormulaDetails.data.data.clientContract,\n photo: updatedFormulaDetails.data.data.photo,\n catalogs: updatedFormulaDetails.data.data.catalogs,\n };\n setPublishedFormula(JSON.stringify(publishedFormulaDetails));\n setFormulaDetails(updatedFormulaDetails.data.data);\n message.success({ content: \"Saved\", key, duration: 1 });\n setTimeout(() => {\n setIsAddingElement(null);\n setIsAddingMaterial(false);\n }, 500);\n } else {\n setIsAddingElement(null);\n setIsAddingMaterial(false);\n }\n }\n\n async function publish() {\n setPublishing(true);\n const key = \"updatable\";\n message.loading({ content: \"Publishing...\", key, duration: 0 });\n const updatedFormulaDetails = await publishChanges(formulaDetails._id);\n if (updatedFormulaDetails.remote === \"success\") {\n setPublishedAt(date);\n message.success({ content: \"Published\", key, duration: 1 });\n } else {\n message.error({ content: \"Something Went Wrong\", key, duration: 1 });\n }\n setPublishing(false);\n }\n async function unpublishAPI() {\n setPublishing(true);\n const key = \"updatable\";\n message.loading({ content: \"Unpublishing...\", key, duration: 0 });\n const updatedFormulaDetails = await unpublishChanges(formulaDetails._id);\n if (updatedFormulaDetails.remote === \"success\") {\n setPublishedAt(\"\");\n message.success({ content: \"Unpublished\", key, duration: 1 });\n } else {\n message.error({ content: \"Something Went Wrong\", key, duration: 1 });\n }\n setPublishing(false);\n }\n\n React.useEffect(() => {\n if (Object.keys(formulaDetails || {}).length) {\n const newElements = (\n formulaDetails.elements.length > elementList.length\n ? formulaDetails.elements\n : elementList\n ).map((element, idx) => {\n const newElement = elementList[idx];\n if (newElement) {\n if (element.customInput) {\n newElement.customInput = element.customInput;\n }\n return { ...element, ...newElement };\n }\n return element;\n });\n const newMaterials = formulaDetails.materials.map((material, idx) => {\n const newMaterial = materials[idx];\n if (newMaterial) {\n return { ...material, ...newMaterial };\n }\n return material;\n });\n const newHiddenValues = formulaDetails.hiddenValues.map(\n (hiddenValue, idx) => {\n const newHiddenValue = hiddenValues[idx];\n if (newHiddenValue) {\n return { ...hiddenValue, ...newHiddenValue };\n }\n return hiddenValue;\n },\n );\n setElementList(newElements);\n setMaterials(newMaterials);\n setHiddenValues(newHiddenValues);\n // setElementList([...formulaDetails.elements]);\n // setMaterials([...formulaDetails.materials]);\n // setHiddenValues([...(formulaDetails.hiddenValues || [])]);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [formulaDetails]);\n\n const isCustomFieldFetched = (elementId) =>\n customFields.find((item) => item.element._id === elementId);\n\n const getSubCatalogDetailsAndCustomFields = async (subCatalogArray) => {\n let results = [];\n subCatalogArray.forEach((subCatalog) => {\n results.push(getCatalogDetailsBySuperId(subCatalog.dropdown));\n });\n results = await Promise.all(results);\n const customFieldsFetched = [...customFields];\n results.forEach((result, idx) => {\n if (result.remote === \"success\") {\n customFieldsFetched.push({\n customFields: result.data.data.customFields,\n element: subCatalogArray[idx],\n });\n }\n });\n setCustomFields(customFieldsFetched);\n };\n\n const fetchVariation = async (dropdownElements) => {\n const results = [];\n for (let i = 0; i < dropdownElements.length; i++) {\n results.push(getCatalogDetailsBySuperId(dropdownElements[i].dropdown));\n }\n await Promise.all(results);\n // const response = await getVariationBySuperCatalogId(id);\n // if (response.remote === \"success\") {\n // setVariations({ ...variations, [id]: response.data.data });\n // }\n };\n\n React.useEffect(() => {\n let newDropdownElements = [];\n elementList.forEach((elem) => {\n if (elem.dropdown) {\n if (!isCustomFieldFetched(elem._id)) {\n newDropdownElements.push({\n _id: elem._id,\n name: elem.name,\n dropdown: elem.dropdown,\n });\n }\n }\n });\n newDropdownElements = newDropdownElements.filter(\n (value, index, self) =>\n index === self.findIndex((t) => t._id === value._id),\n );\n fetchVariation(newDropdownElements);\n getSubCatalogDetailsAndCustomFields(newDropdownElements);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [elementList]);\n\n const getElementCustomFields = React.useCallback(\n (elementId) =>\n customFields.find((element) => element.element._id === elementId),\n [customFields],\n );\n\n const filterUserCatalogItems = (values, catalogId) => {\n for (let i = 0; i < values.length; i++) {\n const value = values[i];\n if (value.includes(catalogId)) {\n return true;\n }\n }\n return false;\n };\n\n React.useEffect(() => {\n if (isUpdatedElementName.id) {\n const elementsNeedToUpdate = elementList.filter(\n (element) =>\n ![\"prefilled\", \"dropdown\"].includes(element.type) ||\n element.isConditional,\n );\n // const elementsNeedToUpdate = [...elementList];\n const updatedElement = elementList.find(\n (element) => element._id === isUpdatedElementName.id,\n );\n let customFields;\n const replaceElements = [];\n if (updatedElement.type === \"dropdown\") {\n customFields = getElementCustomFields(updatedElement._id)?.customFields;\n const elementVariations = variations[updatedElement._id];\n if (elementVariations) {\n elementVariations.forEach((variation) => {\n const oldElementStyle = `%{{variation||${variation.superId}||(${isUpdatedElementName.prevName}: ${variation.name})}}`;\n const oldElementRegex = new RegExp(\n oldElementStyle.replace(regex.escapeRegex, \"\\\\$&\"),\n \"gi\",\n );\n const newElementRegex = `%{{variation||${variation.superId}||{${updatedElement.name}: ${variation.name}}}}`;\n replaceElements.push({ oldElementRegex, newElementRegex });\n });\n }\n }\n if (customFields) {\n customFields.forEach((field) => {\n const oldElementStyle = `@{{element||${isUpdatedElementName.id}-${\n field.superId || field._id\n }||${isUpdatedElementName.prevName} - ${field.fieldName}}}`;\n const oldElementRegex = new RegExp(\n oldElementStyle.replace(regex.escapeRegex, \"\\\\$&\"),\n \"gi\",\n );\n const newElementRegex = `@{{element||${isUpdatedElementName.id}-${\n field.superId || field._id\n }||${updatedElement.name} - ${field.fieldName}}}`;\n replaceElements.push({\n oldElementRegex,\n newElementRegex,\n });\n });\n const oldElementStyle = `@{{element||${isUpdatedElementName.id}||${isUpdatedElementName.prevName}}}`;\n const oldElementRegex = new RegExp(\n oldElementStyle.replace(regex.escapeRegex, \"\\\\$&\"),\n \"gi\",\n );\n const newElementRegex = `@{{element||${updatedElement._id}||${updatedElement.name}}}`;\n replaceElements.push({ oldElementRegex, newElementRegex });\n } else {\n const oldElementStyle = `@{{element||${isUpdatedElementName.id}||${isUpdatedElementName.prevName}}}`;\n const oldElementRegex = new RegExp(\n oldElementStyle.replace(regex.escapeRegex, \"\\\\$&\"),\n \"gi\",\n );\n const newElementRegex = `@{{element||${updatedElement._id}||${updatedElement.name}}}`;\n replaceElements.push({ oldElementRegex, newElementRegex });\n }\n const newUpdatedElements = [];\n // update elements\n for (let i = 0; i < elementsNeedToUpdate.length; i++) {\n const element = { ...elementsNeedToUpdate[i] };\n for (let k = 0; k < replaceElements.length; k++) {\n const { oldElementRegex, newElementRegex } = replaceElements[k];\n element.value = element.value.replace(\n oldElementRegex,\n newElementRegex,\n );\n if (element.isConditional && element.conditions) {\n element.conditions.expression =\n element.conditions.expression?.replace(\n oldElementRegex,\n newElementRegex,\n );\n }\n }\n newUpdatedElements.push(element);\n }\n const newElementList = elementList.map((element) => {\n const isUpdatedElement = newUpdatedElements.find(\n (elm) => elm._id === element._id,\n );\n if (isUpdatedElement) {\n return isUpdatedElement;\n }\n return element;\n });\n setElementList(newElementList);\n\n // update materials\n const materialsNeedToUpdate = materials.map((material) => {\n const isElementInQuantity = material.quantity.includes(\n isUpdatedElementName.id,\n );\n const isElementInUnitCost = material.unitCost?.includes(\n isUpdatedElementName.id,\n );\n const isElementInCost = material.cost.includes(isUpdatedElementName.id);\n const isElementInCharge = material.charge.includes(\n isUpdatedElementName.id,\n );\n const isElementInConditionalExpression =\n material.conditions?.expression?.includes(isUpdatedElementName.id);\n for (let k = 0; k < replaceElements.length; k++) {\n const { oldElementRegex, newElementRegex } = replaceElements[k];\n if (isElementInQuantity) {\n material.quantity = material.quantity.replace(\n oldElementRegex,\n newElementRegex,\n );\n }\n if (isElementInCharge) {\n material.charge = material.charge.replace(\n oldElementRegex,\n newElementRegex,\n );\n }\n if (isElementInCost) {\n material.cost = material.cost.replace(\n oldElementRegex,\n newElementRegex,\n );\n }\n if (isElementInUnitCost) {\n material.unitCost = material.unitCost.replace(\n oldElementRegex,\n newElementRegex,\n );\n }\n if (isElementInConditionalExpression) {\n material.conditions.expression =\n material.conditions.expression.replace(\n oldElementRegex,\n newElementRegex,\n );\n }\n }\n return material;\n });\n\n setMaterials(materialsNeedToUpdate);\n // update Hidden Values\n const updatedHiddenValues = hiddenValues.map((value) => {\n const isElementInExpression = value.expression.condition.includes(\n isUpdatedElementName.id,\n );\n const isElementInValues = value.value.includes(isUpdatedElementName.id);\n for (let k = 0; k < replaceElements.length; k++) {\n const { oldElementRegex, newElementRegex } = replaceElements[k];\n\n if (isElementInExpression) {\n value.expression.condition = value.expression.condition.replace(\n oldElementRegex,\n newElementRegex,\n );\n }\n if (isElementInValues) {\n value.value = value.value.replace(oldElementRegex, newElementRegex);\n }\n }\n return value;\n });\n setHiddenValues(updatedHiddenValues);\n\n // update client contract wording\n let newClientContract = clientContract;\n for (let k = 0; k < replaceElements.length; k++) {\n const { oldElementRegex, newElementRegex } = replaceElements[k];\n newClientContract = clientContract.replace(\n oldElementRegex,\n newElementRegex,\n );\n }\n setClientContract(newClientContract);\n // reset state\n setIsUpdatedElementName({});\n debouncedSave({\n newElements: newElementList,\n newMaterials: materialsNeedToUpdate,\n newHiddenValues: updatedHiddenValues,\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isUpdatedElementName, elementList]);\n\n React.useEffect(() => {\n (async () => {\n const newProcessedElementList = [];\n if (updateProcessedElement) {\n const element = elementList.find(\n (elem) => elem._id === updateProcessedElement,\n );\n const res = await getCatalogDetailsBySuperId(element.dropdown);\n if (res.remote === \"success\") {\n const { customFields } = res.data.data;\n setCustomFields((prevState) =>\n (prevState || []).map((custom) => {\n if (custom.element._id === updateProcessedElement) {\n return {\n customFields,\n element,\n };\n }\n return custom;\n }),\n );\n }\n }\n elementList.forEach((element) => {\n if (element.type === \"dropdown\") {\n const elementCustomFields = getElementCustomFields(element._id);\n if (elementCustomFields) {\n const { customFields } = elementCustomFields;\n customFields.forEach((fields) => {\n newProcessedElementList.push({\n display: `${element.name} - ${fields.fieldName}`,\n id: `${element._id}-${fields.superId || fields._id}`,\n });\n });\n if (!customFields.length) {\n newProcessedElementList.push({\n display: element.name,\n id: element._id,\n });\n }\n }\n } else {\n const newElement = {\n display: element.name,\n id: element._id,\n };\n newProcessedElementList.push(newElement);\n }\n if (element.customInput) {\n element.customInput.forEach((customInput) => {\n newProcessedElementList.push({\n display: `${element.name} - ${customInput.name}`,\n id: `${element._id}-${customInput.id}`,\n });\n });\n }\n });\n setProcessedElementList(newProcessedElementList);\n setUpdateProcessedElement(\"\");\n })();\n }, [elementList, getElementCustomFields, updateProcessedElement]);\n\n async function getUnitList() {\n const response = await GetAllUnits();\n if (response.remote === \"success\") {\n setUnits(response.data.userData);\n }\n }\n React.useEffect(() => {\n getUnitList();\n }, []);\n const saveFormDataToApi = ({\n newMaterials,\n newElements,\n newHiddenValues,\n }) => {\n const materialsToSave = newMaterials || materials;\n let elementsToSave =\n newElements && newElements.length > 0 ? newElements : elementList;\n const hiddenElementsToSave =\n newHiddenValues > 0 ? newHiddenValues : hiddenValues;\n elementsToSave = elementsToSave.filter(\n (value, index, self) =>\n index === self.findIndex((t) => t._id === value._id),\n );\n // start\n let isValid = true;\n for (let i = 0; i < elementsToSave.length; i++) {\n if (!isValid) {\n break;\n }\n if (!elementList[i].isValid) {\n isValid = false;\n break;\n }\n }\n for (let i = 0; i < materialsToSave.length; i++) {\n if (!isValid) {\n break;\n }\n if (\n !materialsToSave[i].isValidcharge ||\n !materialsToSave[i].isValidcost ||\n !materialsToSave[i].isValidquantity ||\n !materialsToSave[i].isValidUnitCost\n ) {\n isValid = false;\n break;\n }\n }\n const catalogsValue = catalogs.filter(\n (item, pos) => catalogs.indexOf(item) === pos,\n );\n const formData = new FormData();\n elementsToSave.forEach((item) => {\n item.formula =\n item.formula?.filter((element) =>\n filterUserCatalogItems([item.value], element),\n ) || [];\n return item;\n });\n materialsToSave.forEach((item) => {\n item.formula = item.formula.filter((element) =>\n filterUserCatalogItems(\n [item.quantity, item.unitCost, item.cost, item.charge],\n element,\n ),\n );\n return item;\n });\n const allValues = [];\n elementsToSave.forEach((item) => {\n allValues.push(item.value);\n });\n materialsToSave.forEach((item) => {\n allValues.push(item.quantity);\n allValues.push(item.unitCost);\n allValues.push(item.cost);\n allValues.push(item.charge);\n });\n const newCatalogsValueList = catalogsValue.filter((item) =>\n filterUserCatalogItems(allValues, item),\n );\n setElementList(elementsToSave);\n formData.append(\"elementsTabs\", JSON.stringify(elementTabs));\n formData.append(\"elements\", JSON.stringify(elementsToSave));\n formData.append(\"catalogs\", JSON.stringify(newCatalogsValueList));\n formData.append(\"materials\", JSON.stringify(materialsToSave));\n formData.append(\"hiddenValues\", JSON.stringify(hiddenElementsToSave));\n formData.append(\"clientContract\", clientContract);\n formData.append(\"clientContractV2\", JSON.stringify(clientContractV2));\n formData.append(\"crewNotes\", JSON.stringify(crewNotes));\n formData.append(\"title\", title);\n formData.append(\"displayName\", displayName);\n formData.append(\"category\", category);\n formData.append(\"subCategory\", subCategory);\n formData.append(\"publishedAt\", publishedAt || null);\n formData.append(\"isValid\", isValid);\n formData.append(\"photo\", file || photo);\n\n updateFormulaDetails(formData);\n // end\n };\n const debouncedSave = debounce((e) => {\n if (!manualSave) {\n saveFormDataToApi(e);\n }\n }, 1000); // Debounce for 1 second\n\n const handleChange = (value, name, index, newMaterial, customIndex) => {\n let isElementNameUpdate = false;\n const newElementList = elementList; // if we copy the array, it cause the speed issues\n const prevName = newElementList[index][name];\n newElementList[index][name] = value;\n if (newElementList[index].type !== \"dropdown\") {\n newElementList[index].dropdown = \"\";\n }\n switch (name) {\n case \"customFieldToShow\":\n newElementList[index].customFieldToShow = value;\n break;\n case \"value\":\n const isValid = validateArthmaticString(value.trim());\n newElementList[index].isValid = isValid.isValid;\n break;\n case \"name\":\n if (!value) {\n newElementList[index].isValid = false;\n } else {\n newElementList[index].isValid = true;\n }\n const customInput = value.match(regex.customInput);\n if (customInput) {\n newElementList[index].customInput = customInput.map((item) => {\n item = item.replace(\"!\", \"\");\n const isExists = (newElementList[index].customInput || []).find(\n (cuInput) => cuInput.name === item,\n );\n if (isExists) {\n return isExists;\n }\n return {\n id: Date.now().toString(),\n name: item,\n value: 0,\n };\n });\n } else {\n newElementList[index].customInput = [];\n }\n // update state so that it can update the element name in the other boxes if it is used\n setIsUpdatedElementName({\n id: newElementList[index]._id,\n prevName,\n elementList,\n });\n isElementNameUpdate = true;\n break;\n case \"dropdown\":\n setUpdateProcessedElement(newElementList[index]._id);\n break;\n default:\n break;\n }\n if (customIndex !== null && customIndex !== undefined) {\n newElementList[index].customInput[customIndex].value = value;\n }\n if (newMaterial) {\n const processed = processMaterial(newMaterial);\n newElementList[index].formula = [\n ...new Set([\n ...(newElementList[index].formula || []),\n ...processed,\n ...(catalogs || []),\n ]),\n ];\n setCatalogs([...(catalogs || []), ...processed]);\n }\n setElementList(newElementList);\n if (!isElementNameUpdate) {\n debouncedSave({});\n }\n };\n\n const saveNewElement = async (newElement, oldMaterials, at) => {\n const body = {\n element: newElement,\n };\n const response = await addFormulaNewElement(formulaDetails._id, body);\n if (response.remote === \"success\") {\n const newElementList = [...oldMaterials];\n // newElementList[newElementList.length - 4] = {\n // ...response.data.data,\n // disabled: false,\n // automatic: false,\n // };\n newElementList[at] = {\n ...response.data.data,\n disabled: false,\n automatic: false,\n };\n setElementList([...newElementList]);\n setTimeout(() => {\n setIsAddingElement(null);\n }, 500);\n } else {\n // setIsAddingElement(null);\n }\n };\n\n const isElementIdExists = () => {\n let isExists = true;\n elementList.forEach((item) => {\n if (!item._id) {\n isExists = false;\n }\n });\n return isExists;\n };\n\n const handleNewElement = (at) => {\n if (!isLoadingFirstTime && isAddingElement === null && isElementIdExists) {\n // setIsLoading(elementList.length - 3);\n setIsAddingElement(at);\n const newElement = {\n name: \"\",\n color: \"#3483FA\",\n type: \"prefilled\",\n unit: \"\",\n value: 0,\n view: [\n \"client\",\n // \"internal\",\n \"full\",\n ],\n isValid: false,\n };\n const newElementList = elementList.map((elem) => ({ ...elem }));\n newElementList.splice(at, 0, newElement);\n // setElementList(newElementList);\n saveNewElement(newElement, newElementList, at);\n }\n };\n\n const processMaterial = (text) => {\n // eslint-disable-next-line no-useless-escape\n const tags = text.match(regex.materialInput) || [];\n const allMaterialsIds = tags.map((myTag) => {\n const tagData = myTag.slice(3, -2);\n const tagDataArray = tagData.split(\"||\");\n if (tagDataArray[0] === \"catalog\") {\n return tagDataArray[1];\n }\n return null;\n });\n return allMaterialsIds.filter((elem) => elem);\n };\n\n const handleMaterialChange = (e, index, material) => {\n const newMaterials = [...materials];\n newMaterials[index][e.target.name] = e.target.value;\n if (e.target.name === \"type\") {\n if (e.target.value === FORMULA_MATERIAL_TYPES.labor) {\n newMaterials[index].numberOfWorkers =\n newMaterials[index].numberOfWorkers === undefined\n ? '{Company Settings: \"# Of Workers\"}'\n : newMaterials[index].numberOfWorkers;\n }\n }\n if (e.target.name === \"name\") {\n let name = e.target.value;\n const elem = name.match(regex.materialInput) || [];\n\n elem.forEach((nam) => {\n const elemName = nam.split(\"||\")[2];\n name = name.replace(nam, elemName.replace(\"}}\", \"\"));\n });\n name = name.trim();\n setIsUpdatedLineItemName({\n [`${newMaterials[index]._id}-quantity`]: `${name} - Quantity`,\n [`${newMaterials[index]._id}-unit`]: `${name} - Unit`,\n [`${newMaterials[index]._id}-unitCost`]: `${name} - Unit Cost`,\n [`${newMaterials[index]._id}-cost`]: `${name} - Cost`,\n [`${newMaterials[index]._id}-charge`]: `${name} - Charge`,\n });\n setToggleLineItemNameUpdate((prevState) => !prevState);\n }\n if (\n e.target.name === \"quantity\" ||\n e.target.name === \"cost\" ||\n e.target.name === \"charge\" ||\n e.target.name === \"unitCost\"\n ) {\n const isValid = validateArthmaticString(e.target.value.trim());\n if (e.target.name === \"unitCost\") {\n newMaterials[index].isValidUnitCost = isValid.isValid;\n } else {\n newMaterials[index][`isValid${e.target.name}`] = isValid.isValid;\n }\n }\n\n if (material) {\n const processed = processMaterial(material);\n newMaterials[index].formula = [\n ...new Set([...(newMaterials[index].formula || []), ...processed]),\n ];\n setCatalogs([...(catalogs || []), ...processed]);\n }\n setMaterials([...newMaterials]);\n // debouncedSave([...newMaterials]);\n };\n const handleHiddenValueChange = (e, index, isConditional, newMaterial) => {\n const newHiddenValues = [...hiddenValues];\n if (newHiddenValues[index]) {\n if (isConditional) {\n newHiddenValues[index].expression[e.target.name] = e.target.value;\n } else {\n newHiddenValues[index][e.target.name] = e.target.value;\n }\n }\n if (newMaterial) {\n const processed = processMaterial(newMaterial);\n newHiddenValues[index].formula = [\n ...new Set([...(newHiddenValues[index].formula || []), ...processed]),\n ];\n setCatalogs([...(catalogs || []), ...processed]);\n }\n setHiddenValues([...newHiddenValues]);\n debouncedSave({});\n };\n\n const onFocusOut = () => {\n debouncedSave({});\n };\n\n const handleAddMaterial = (at) => {\n setIsAddingMaterial(true);\n const newMaterial = {\n name: \"\",\n quantity: \"\",\n cost: \"{Quantity} * \",\n charge: \"\",\n formula: [],\n };\n const newMaterialsList = materials.map((elem) => ({ ...elem }));\n newMaterialsList.splice(at, 0, newMaterial);\n setMaterials(newMaterialsList);\n debouncedSave({ newMaterials: newMaterialsList });\n };\n\n const handleAddHiddenValue = () => {\n const newHiddenValue = {\n name: \"\",\n value: \"\",\n isConditional: true,\n expression: { condition: \"\", fullfill: \"\", fail: \"\" },\n };\n setHiddenValues([...hiddenValues, newHiddenValue]);\n debouncedSave({ newHiddenValues: [...hiddenValues, newHiddenValue] });\n };\n\n const handleRemoveElement = (id) => {\n const newElementList = [...elementList].filter((elem) => elem._id !== id);\n setElementList([...newElementList]);\n debouncedSave({ newElements: newElementList });\n };\n\n const handleRemoveMaterial = (index) => {\n const newMaterialList = [...materials];\n newMaterialList.splice(index, 1);\n setMaterials([...newMaterialList]);\n const data = {\n newMaterials: [...newMaterialList],\n };\n debouncedSave(data);\n };\n\n useEffect(\n () =>\n // Clean up the debounced function\n () => {\n debouncedSave.cancel();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n );\n\n const role = React.useMemo(() => getRole(), []);\n\n const handleDeleteHiddenValue = (id, toggleFun) => {\n const newHiddenValues = [...hiddenValues].filter((item) => item._id !== id);\n setHiddenValues([...newHiddenValues]);\n if (toggleFun) {\n toggleFun(false);\n }\n };\n\n if (redirect) {\n return Are You sure you want to delete Tab?
\nNote: Element using this tabs will get reset to Main
\n \n \n \n
\n \n handleNewElement(elementList.length - 2)}\n >\n {treeIcon}\n \n
\n \n \n setManualSave(e)}\n checkedChildren=\"Manual Save\"\n unCheckedChildren=\"Autosave\"\n />\n
\n \n setTitle(e.target.value)}\n onBlur={onFocusOut}\n />\n \n
\n {role === USER_ROLE.superAdmin && (\n <>\n \n
\n \n
\n \n )}\n \n setDisplayName(e.target.value)}\n onBlur={onFocusOut}\n />\n \n
\n \n
\n
\n \n \n
\n ) : (\n elementList.length &&\n elementList.map((element, index) => (\n \n \n \n
\n
\n | \n Line Items Needed\n | \n
|---|
\n \n \n
\n
\n | \n Hidden Values\n | \n
|---|
\n
\n \n
\n\n \n \n \n
\n
\n | \n Select Photo - Client Contract\n | \n
|---|
| \n \n Choose Photo:{\" \"}\n \n | \n
\n \n {role === \"superAdmin\" && (\n publish()}\n disabled={publishedFormula === formulaDetails?.publishedFormula}\n style={{ zIndex: \"999\" }}\n >\n unpublishAPI()}\n disabled={publishedFormula === formulaDetails?.publishedFormula}\n style={{ zIndex: \"999\" }}\n >\n {unpublish}\n \n )}\n
\n \n \n );\n}\n\nexport default FormulaV2;\n","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAeCAYAAACiyHcXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKTSURBVHgB7VfbdeIwEB2b/C/bgVPBkgpwKoBUAFSwUEGSAnhsB9vBZiuIU0GSCnA6IAUAuVeMjFD8JPCXe46QrRlm7oykkRxIDsbjcSRnwmKxSP2xQDznQRA84jGS8yHdbrcTkHmwAxeuNAzDWyhEeFxpcxFZI1KNMl0G+ht9RuIgE5PJZEklELkC0xdXhiw94s8xZNeQJVIC2Nmyn8/nfqbbsEEfbdj5CTsm0NBR6GgEqU/AsA0CyqTVai2lGivr1B2kUzi3tvt2PHR0Yv5AKSkwbAyu1+t3qUkChH/kyP5r380j0fOUcknYFJYBgaTsQfgyR2zWAjJ7mAmdq1jHEv9fzpZNpR7etI98gW5RtjbsxhkJ0akggYJI7dxWZqEOkCmTbezGOCOBl54rPAGJVPuoQP6g/roZCbzEKkx8bU4VSA4smapqqvq/+Iwp7hboc4cwoNgsBa2SSyVzI/toIxrD2FD2mRA1/nez2TBrZjurow70uyX6r+rcBIOxuexq0ihwC4gUI4HyH/R96A6kGrX1oXdpKppm41mJvEDAbKSyW+WJWyE16hhtoAUsUl2eCU8l+j21z8ywMLJq3vAMycqqLdlIaTSdTt/kjPB9XciR0JKcTWHeEV0XjUmwwCCdt7KvLQaIzi7A+6aEwibKINDX+0Ysu12UOo2LbEh500tRo0zotmJ/P5vN7jyCXNz/8NhBP+aQ1ETtTGh0bCufAMEp4I1JX3vSAI2mQ1FWulM5AseQODm+SVh8k7D4RKLgXnhqHFyaswMMdeBOyzFP0ZHkfPxotWQ9uC4wXqmjH1hD+sF3yRXH3Iq5QOPZ39FjXUocVX17FOqAALuVXqAMPn2LomNGeD0ru+R8BczSyD3kPgDnhzueZZqdpgAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAcCAYAAACK7SRjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAI6SURBVHgBtVYxVsJAEN2N9sYbhBMQO0q4gZ7AWFoJdFbgCYgnIJZW4gkMHR1wAlNaxguA/8Ms5O3bQBCY98IO2Zk/f2dnBrTaI+1228cS4alrrQM8s8ViMY/jONnnq3dtdjqdJyxxyXa2XC5bCJKpQ8HBuAeWfeoASbCMCYgnxHsGDfDkEmBWGRzAEQCG4nwH59S2wakSLPdyghvY5LaN54y4ZkbGLy5gymAwiLDM5ASRy8ZzsOYFhmQN4LJ8Kwn+Jmq9ErgAK2G1T1Y2rKKq4CZ3TodDxAWeSYBAUlTu7Hn3os4rgfPWkctPcR6qEkHgAHYRdaxxJXCRvlqX4W232x0SyAJuIs9f8vW1rJF2NVEoACY1qayB2t5HipJslWFclG1MJpOfRqPxDvUaQcICqC+negbjR7VDtMV2M6SQ7xwDanXkQu1TctPuTBfsnmDH/bE9zHQB2E4DJZMuTWwSBMVe22G/GWbaMADwVAxT6Txemim1HHoKhjlAfew3DSj0EVkXhtlm1lzSAA49vKBTgpcPApggaCpOISsHOsEMy9SaPTHsv2DTBB5P1NfC+ltY1FxlJaUYFlIwck3BQonywmsEJ6MPtaesqgpG8VRO2mITNYX1pzqBAGcsakhwMy6rTMEqYnDqnjqfXJ8DPOMH7vHKYyfKS1+dRgJ+IPe/Hv+DSKSePf0OFSnrnnwdsRR96c5ArX8k/nuxvtoOtgxlXdu0P5YBgtyq44Wd+8BmtKdioI777ZwVO/cPNrYrPPLb5vMAAAAASUVORK5CYII=\"","import { CloudUploadOutlined, DeleteOutlined } from \"@ant-design/icons\";\nimport { Button, Card, message, Upload } from \"antd\";\nimport ImgCrop from \"antd-img-crop\";\nimport React, { useCallback, useEffect, useMemo } from \"react\";\n\nimport { allImageFilesExtension } from \"../../../../utils/constants/constants\";\nimport { fileToBase64 } from \"../../../../utils/fileBase64\";\n\nfunction UploadFile({\n title,\n size,\n image,\n id,\n handleChange,\n handleRemove,\n aspect,\n shape,\n handleSubmit,\n isLoading,\n isSetUp,\n}) {\n const { Dragger } = Upload;\n const [isChange, setIsChange] = React.useState(true);\n\n const handleImageChange = useCallback(\n async (image) => {\n const imageBase64 = await fileToBase64(image);\n handleChange(imageBase64, id);\n },\n [handleChange, id],\n );\n\n const props = useMemo(\n () => ({\n name: \"file\",\n onChange() {\n // handleImageChange(info.file.originFileObj);\n },\n method: \"get\",\n customRequest: async ({ file, onSuccess }) => {\n if (!allImageFilesExtension.includes(file?.type))\n message.error(\"Invalid file extension\");\n if (onSuccess) {\n onSuccess(\"OK\");\n }\n },\n }),\n [handleImageChange],\n );\n\n useEffect(() => {\n if (isSetUp) {\n props.maxCount = 1;\n }\n }, [isSetUp, props]);\n return (\n \n
\n Click or drag file to this area to upload\n
\nSize by: {size}
\n \n \n\n {image && isChange && (\n\n 
\n handleRemove(\"\", id)} className=\"ant-close-btn\">\n
\n )}\n {!isSetUp && (\n Page not found
\n\n {hrsMin.hrs}:{hrsMin.minutes}\n
\n );\n}\n\nexport default HrsMinute;\n","const recordAllocateExpenseTypes = {\n SET_MAIN_STATE: \"recordAllocateExpense/SET_MAIN_STATE\",\n REST_MAIN_STATE: \"recordAllocateExpense/REST_MAIN_STATE\",\n SET_DEFAULT_DATA: \"recordAllocateExpense/SET_DEFAULT_DATA\",\n ON_FORM_CHANGE: \"recordAllocateExpense/ON_FORM_CHANGE\",\n SET_ERROR: \"recordAllocateExpense/SET_ERROR\",\n RESET_ERROR: \"recordAllocateExpense/RESET_ERROR\",\n};\nexport default recordAllocateExpenseTypes;\n","export default \"data:image/png;base64,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\"","export const Help = (props) => (\n