\n {\" \"}\n * Standard variance of 10% may occur on full coil size.\n
\n );\n\n return (\n\n \n \n \n \n\n \n \n \n
\n );\n };\n\n // const calculateAvailableDiscount = () => {\n // // const { price, currency } = pricingPolicy;\n // // const isEligible = quantity % boxSize;\n // // let percentage = BOX_DISCOUNT;\n // // if (fullBoxCoilPercent != null) {\n // // percentage = fullBoxCoilPercent;\n // // }\n // // if (policyName) {\n // // return \"\";\n // // }\n // // if (!isEligible) {\n // // const discount = Number(\n // // (((price * quantity) / 100) * percentage).toFixed(2)\n // // );\n\n // return (\n\n // );\n // // }\n // return \"\";\n // };\n\n return (\n \n
\n \n \n \n this.addBoxRollHandler(item.boahubFullCarton)\n }\n >\n \n ADD {item.boahubFullCarton}\n \n \n
\n ) : (\n \n )}\n \n
\n )}\n \n )}\n {isHoseMaker && (\n <>\n \n You will save {currency} {totalDiscount}\n
\nMatched
}\n \n \n )}\n404
\nPage not found
\n\nThe page you are looking for is not available.
\n\n Go Back \n \n
\n \n Get in Touch\n \n
\n \n {countryCode != \"AU\" ? \"0800 20 20 20\" : \"1800 40 30 40\"}\n \n \n sales@boahydraulics.com\n
\n
\n \n {countryCode != \"AU\" ? \"BOA New Zealand\" : \"BOA Australia\"}\n \n \n );\n\n const contact2 = (\n \n
{countryCode != \"AU\" ? \"Auckland\" : \"Caboolture\"}
\n \n {countryCode != \"AU\"\n ? \"7 David McCathie Place,\"\n : \"47 Evans Drive, Caboolture,\"}\n \n\n \n {countryCode != \"AU\"\n ? \"Silverdale, 0932, New Zealand\"\n : \"QLD, 4501, Australia\"}\n \n \n );\n\n const contact3 = (\n \n
{countryCode != \"AU\" ? \"Caboolture\" : \"Auckland\"}
\n \n {countryCode != \"AU\"\n ? \"47 Evans Drive, Caboolture,\"\n : \"7 David McCathie Place,\"}\n \n\n \n {countryCode != \"AU\"\n ? \"QLD, 4501, Australia\"\n : \"Silverdale, 0932, New Zealand\"}\n \n \n );\n\n const brand = (\n \n
Resources
\n\n \n Media\n \n
\n \n Catalogue\n \n
\n \n BOAhub FAQ's and Troubleshooting\n \n
About BOA Hydraulics
\n \n Our Values\n \n\n \n FAQs\n \n
\n \n Terms & Conditions\n \n \n );\n\n return (\n
\n {window.location.href.includes(\"callback\") ? null : (\n <>\n 1025 ? 6 : 1} className=\"footer-body\">\n \n {contact}\n \n\n \n {contact1}\n \n\n \n {contact2}\n \n\n \n {contact3}\n \n\n \n {brand}\n \n\n \n {important}\n \n \n \n \n \n */}\n \n )}\n
\n );\n};\nexport default Footer;\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAARKADAAQAAAABAAAARAAAAADA2cO/AAAGgElEQVR4Ae2czWucRRzHk1ZaQUqjherFU1eam1pEQqkeclJrDtJS8Ra8eNBL9CJ4MB6EnNqj+RdaPFgqracoKBJQI72lkIM0CsVDm5KDRqrx8908E787efbl2Z3Z3a75wTfz/nvbmXnmmZkn42N9ou3t7RqipsBJMAmUngBHChCMbRbYIFwDq+AWWB4fH1c6O43nkoADDsN7BrwOpsHToBdap/ES+BJcw0FbvTDrW1sccQosgnsgF4m3ZJxKbViyHoJyZ1DuI/BKEyX/Jn8F3AQaBsLvIAwTorvD5zhxDS3hWSDDD4Iy+orMT+kx35UV9j0PR9TADVBGd8nULzkDjnarnNoWPMRLPMtIOmheGgwh/BCYB3+CmJbIOAc0jyQl8Sx4S0ZM0kU6HUoqtB0zBJ4AP4KYrpNxul37VOWSBSQzJul2IpWclnwQpF/+fqTBGulXWzbMWCjZQDo4ScdzGcWOjSFgDvzjUolfAo9mFdwBc+lQ6EKwS9J1roPm1avAeGFXzE5ki2C2Oqe8LaQTkG5OC0mlwjl2xh3y+jZXVDVGugHp6JTGKXDUMHFaIdHrqrOqjZXrS0cgXZ16Gz5w0gTqc4YEPFZZuwE1kK7AnSJbuptoaahHqz9N1AWHvmfEvpfOwIePbKr2SKaBFl2+ztCCZ2jnjNgJcVq6A19AyrbOF29U1mrPaTYW8rClMUZPH6f5jmyghd5N3JsXO2r4EFTCLq2ZAsnG9u8+VPIXNa3+Br7oSuVr2QJ8RXsj5t3w+k9lvcJ/a5Ve47V6TyMrTxJF7hMwehE8BbSL9ghwWkOPLzyj2ziy9Ipx3dq/1HTrgMreO7yRtU8XRd40+Ab4o53kHrqaTmr9FcRfCMt/cFTQTpdT1qcKgj4E7RwR9EntED11nPbuvFG6aDW0d5mNkHPWZHUSTeoQGYbQr03wYoOxFGjTRfuUgbpbzTVwbZ5AiK8eg8xWYQ6HaBUeSLb/t5lF4nwoIbzbUNjcrq5K4P2Myeo0msMh6gSyNdB5GRRmcx0VBLrCrJtzi/+FIKhF+BNlv4IHRZ0fWtTtqkg24okrNH6nYCAffF6PU3A7uIlQZynZCP7vm6yy6NvZhEeMZaspcLteTIZWpoEeEOl6dzySV5qE/8dBWJPwWGnDDJnIPwpkc6DaAeRMmawVutJ9S+eISmYr+qNVYcqywladFQWaknKTIUV40+KDim73WbDbfFIO0elYIJ2mDZr67RC3eVJPmZp5wAstu/sog1ND8jPjoPeVVrSsAR1VWKJ7fxDlpUq6zTU5RC9TgXTWmpp03eG5Ckx1lhvT93FGwrTbPKEhI4UDbYbIkIVak+Qit/nIvkN2bh8EZ9cdEhLDHObsIQ12q4c0dJmG0uFJ/JZRlYYpQ5OqHHKsEOiFqXTQc/4NY/YW8QuWjqNvkvFXlPlLlE6ZdJs35ZAN437c4kmiPC41i+9u//FEfb4N46u02WpTJ2Wx27yhIbNm3H2RZtkjHXWb1+QQX5h44Uh7wYxzm1flkFUrLFsUWfFIRt3mW3LIspmpjeasr/8ma+DRwlbfYF4+wASmOWS90O4g4csD17R/CshW2Sxaly/UQ0S+y352J+t/8ddtrfsgOETXpQNdoCsdDolRDQsbfT10TbYGhygR1iOPE/dNZ9UbRZKNslUk2+udou6QYiF0uV608+ddi49q9D0z7PKexSBdqC9Hmcj5BLSi7MMV4e2PMuUtKmY/7EbGMDik/WF34ZAz0U+X/HbyoB2CfN16dtIVkOZETe8lulyS9MIM/AbWQ2QLkE2Byq9CuHuoGV+puuTlvcbhP0iHVL9SJYNRej64sAhne3VEaD8ohyB3NrJpPujUNqRhfC1TB8NJLtDAp+89RLoDv/9e7VqmPAaDLBd34avbxU82Q9tfq2IF5PR+cTfIhNkoXO3+GTsCdX+125yyf/k/OCOEuHchuLgI7xAmmVOCjJShdAPS0WkhpQzNKbFTdBN4NqmQBMykE5BuTmmdEfREgoZPfJXyInlJF29BXpVQOgBfZ5Cs6zpXhU/lugjZ/wgx9hpO2f9MtcQp+x8yx05Rmt4yUp+6N3wNUWZwp3k4Rq/R+/8MIXYYjtHOm+7N3wO5SLwlw89UYlW6SifrIbF0lNVW4AzQZu406PUDRp0d6ahAm8HZ/qFKNoegdAPhoBoZuoA3CXSeqvQE0HWEcCVBVzME7YLrAE3nzjpq7du/3PkXyKmbNDc70qAAAAAASUVORK5CYII=\"","import React from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport PropTypes from \"prop-types\";\nimport { APP_NAME } from \"../../constants/appConstants\";\n\nconst MetaData = ({ title }) => {\n return (\n \n
\n {/* \n
\n \n \n ©\n {\" \"}\n {year} Copyright BOA Hydraulics\n
\n\n \n 
\n \n \n 
\n {\" \"}\n \n 
\n {\" \"}\n \n 
\n {\" \"}\n \n 
\n \n
\n © {year} Copyright BOA Hydraulics
\n\n Verification sent successfully\n
\n );\n setTimeout(() => {\n setOtpVerifying(false);\n }, 1000);\n } else {\n setOtpVerifying(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n setOtpVerifying(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const verifyAccount = async () => {\n try {\n const payload = {\n code: otp,\n token: token,\n };\n const account = await apiVerifyAccount(payload);\n if (account) {\n if (state.userType === 3) {\n setTimeout(() => {\n setIsModalOpen(true);\n setOtpVerifying(false);\n }, 1000);\n } else {\n const { createAccountForm } = props.forms;\n await props.actionlogIn(createAccountForm);\n }\n } else {\n setOtpVerifying(false);\n setOtp(\"\");\n showErrorToast(\"Invalid verification code\");\n }\n } catch {\n setOtpVerifying(false);\n setOtp(\"\");\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const isCaptchaReady = () => {\n // Temp work around\n setTimeout(() => {\n if (window.grecaptcha) {\n setState({ ...state, captchaReady: true });\n }\n }, 1000);\n };\n\n const iAgreeCheckBoxHandler = (e, data) => {\n const { checked } = data;\n updateState({ ...state, iAgree: checked });\n };\n\n const isFormValid = () => {\n const { mobileErrorFlag } = state;\n const { mobileNumber } = props.forms.createAccountForm;\n if (mobileErrorFlag) {\n return false;\n }\n if (!mobileNumber.length) {\n return false;\n }\n return true;\n };\n\n const isCountryValid = () => {\n const { country } = props.forms.createAccountForm;\n if (!country.length) {\n return false;\n }\n return true;\n };\n\n const isIndustryValid = () => {\n const { industry } = props.forms.createAccountForm;\n if (!industry.length) {\n return false;\n }\n return true;\n };\n\n const passwordValidation = () => {\n const { createAccountForm } = props.forms;\n const { confirmPassword, password } = createAccountForm;\n if (!password && !confirmPassword) {\n return false;\n }\n if (password !== confirmPassword) {\n return false;\n }\n return true;\n };\n\n const passwordPolicyValidation = () => {\n const { createAccountForm } = props.forms;\n const { confirmPassword, password } = createAccountForm;\n\n const regularExpression =\n /^(?=.*[A-Z])(?=.*\\d)(?=.*[!@#$%^&*()-_=+[{\\]}|;:'\",.<>/?]).{6,}$/;\n if (!regularExpression.test(password)) {\n return false;\n }\n return true;\n };\n\n const SingUp = async () => {\n setState({ ...state, errorFlag: false, errorMessage: \"\" });\n const { createAccountForm } = props.forms;\n const properEmail = createAccountForm.email.trim().toLowerCase();\n let createAccount = Object.assign(\n {},\n {\n parentName: createAccountForm.companyName,\n email: properEmail,\n firstName: createAccountForm.firstName,\n lastName: createAccountForm.lastName,\n countryId: +createAccountForm.country,\n industryId: +createAccountForm.industry,\n mobileNumber: createAccountForm.mobileNumber,\n officeNumber: createAccountForm.officePhoneNumber,\n userPassword: createAccountForm.password,\n confirmPassword: createAccountForm.confirmPassword,\n userType: state.userType === 8 ? 8 : null,\n accountType: state.userType === 8 ? 3 : null,\n }\n );\n\n if (state.userType !== 8) {\n createAccount = Object.assign(\n {},\n {\n parentName: createAccountForm.companyName,\n email: properEmail,\n firstName: createAccountForm.firstName,\n lastName: createAccountForm.lastName,\n countryId: +createAccountForm.country,\n industryId: +createAccountForm.industry,\n mobileNumber: createAccountForm.mobileNumber,\n officeNumber: createAccountForm.officePhoneNumber,\n userPassword: createAccountForm.password,\n confirmPassword: createAccountForm.confirmPassword,\n }\n );\n }\n\n // Convert Country to NZ if Other option is chosen\n if (createAccountForm.country === \"0\") createAccount.countryId = 170;\n\n const { iAgree } = state;\n const validFlag = isFormValid();\n const validCountryFlag = isCountryValid();\n const validIndustryFlag = isIndustryValid();\n\n if (!passwordValidation()) {\n updateState({\n ...state,\n errorFlag: true,\n errorMessage: \"Password and Confirm password do not match\",\n });\n return;\n }\n\n if (!passwordPolicyValidation()) {\n updateState({\n ...state,\n errorFlag: true,\n errorMessage:\n \"Your password needs to include at least one number and one symbol\",\n });\n return;\n }\n\n if (!validFlag) {\n updateState({\n ...state,\n errorFlag: true,\n errorMessage: \"Please insert your mobile number\",\n });\n return;\n }\n\n if (!validIndustryFlag) {\n updateState({\n ...state,\n errorFlag: true,\n errorMessage: \"Industry is required\",\n });\n return;\n }\n\n if (!validCountryFlag) {\n updateState({\n ...state,\n errorFlag: true,\n errorMessage: \"Country is required\",\n });\n return;\n }\n if (window._.isEmpty(createAccountForm.captchaToken)) {\n updateState({\n ...state,\n errorFlag: true,\n errorMessage: \"Please check the captcha option\",\n });\n return;\n }\n if (!iAgree) {\n updateState({\n ...state,\n errorFlag: true,\n errorMessage: \"Please check the i agree check box to create account\",\n });\n return;\n }\n setLoading(true);\n\n await props.actionSignUp(createAccount);\n\n setLoading(false);\n };\n\n const cancel = () => {\n props.actionResetState(\"forms.createAccountForm\");\n props.history.push(\"/\");\n };\n\n const customerRoleChangeHandler = (e, data) => {\n updateState({ ...state, customerRoleErrorFlag: false });\n const { value } = data;\n if (window._.isEmpty(value)) {\n updateState({ ...state, customerRoleErrorFlag: true });\n }\n\n const formValue = {\n ...props.forms.createAccountForm,\n userRole: value,\n };\n props.actionSetFormValue(formValue);\n };\n\n const industryChangeHandler = (e, data) => {\n updateState({ ...state, industryErrorFlag: false });\n const { value } = data;\n if (window._.isEmpty(value)) {\n updateState({ ...state, industryErrorFlag: true });\n }\n\n const formValue = {\n ...props.forms.createAccountForm,\n industry: value,\n };\n props.actionSetFormValue(formValue);\n };\n\n const countryChangeHandler = (e, data) => {\n setDefaultCountryCode(\"\");\n updateState({ ...state, countryErrorFlag: false });\n const { value } = data;\n\n if (window._.isEmpty(value)) {\n updateState({ ...state, countryErrorFlag: true });\n }\n\n const formValue = {\n ...props.forms.createAccountForm,\n country: value,\n };\n props.actionSetFormValue(formValue);\n };\n\n const onChangeMobileHandler = (value) => {\n updateState({ ...state, mobileErrorFlag: false });\n if (window._.isEmpty(value)) {\n updateState({\n ...state,\n mobileErrorFlag: true,\n mobileErrorMessage: polyglot.t(\"createAccountPage.mobileRequried\"),\n });\n }\n const formValue = {\n ...props.forms.createAccountForm,\n mobileNumber: value,\n };\n props.actionSetFormValue(formValue);\n };\n\n const onChangeOfficePhoneNumberHandler = (event) => {\n updateState({ ...state, officePhoneNumberErrorFlag: false });\n let value = event.target.value;\n // if ((value.length && value.length < 6) || value.length > 12) {\n // updateState({\n // ...state,\n // officePhoneNumberErrorFlag: true,\n // officePhoneNumberErrorMessage: polyglot.t(\n // \"createAccountPage.validOfficePhoneNumber\"\n // ),\n // });\n // }\n const formValue = {\n ...props.forms.createAccountForm,\n officePhoneNumber: value,\n };\n props.actionSetFormValue(formValue);\n };\n\n const onLoadRecaptcha = () => {\n if (captchaDemo) {\n // captchaDemo.current.reset();\n // captchaDemo.current.execute();\n }\n };\n\n const verifyCallback = (recaptchaToken) => {\n if (recaptchaToken !== \"\") {\n const formValue = {\n ...props.forms.createAccountForm,\n captchaToken: recaptchaToken,\n };\n props.actionSetFormValue(formValue);\n }\n };\n\n const updateState = (data) => {\n setState(data);\n };\n\n const setFormValues = (data) => {\n const form = { ...props.forms.createAccountForm, data };\n props.actionSetFormValue(form);\n };\n\n const goHome = () => {\n props.history.push(\"/\");\n };\n\n const showPassword = () => {\n setState({ ...state, hidden: !state.hidden });\n };\n\n const { customerType } = props.forms.createAccountForm;\n let {\n customerRoleErrorFlag,\n industryErrorFlag,\n countryErrorFlag,\n mobileErrorFlag,\n officePhoneNumberErrorFlag,\n mobileErrorMessage,\n officePhoneNumberErrorMessage,\n iAgree,\n } = state;\n\n const comparePassword = (val) => {\n return props.forms.createAccountForm.password !== val;\n };\n const longEnough = (val) => {\n const passwordRegx = new RegExp(\n /^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)(?=.*[@#$!%^&*()_+{}\\[\\]:;<>,.?~\\\\-])[A-Za-z\\d@#$!%^&*()_+{}\\[\\]:;<>,.?~\\\\-]{6,}$/\n );\n if (!passwordRegx.test(val)) {\n return true;\n }\n return false;\n };\n\n const handleOtpChange = (value) => {\n setOtp(value);\n };\n\n if (!isLoading) {\n return (\n \n
\n BOAhub
\n\n
\n */}\n \n
\n Successful Registration
\n\n
\n Thank you for signing up to BOAHUB.
\n\n
\n \n A BOA representative will setup your account and you will\n receive a further email notification once your account is live.\n
\n\n {state.userType !== null && !showOtp ? (\n \n \n Thank you for signing up to the BOAhub, a\n verification code will be sent to you.\n \n
\n \n \n \n \n {loading && \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {defaultCountryCode === \"\" && (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n !longEnough(val),\n length: (val) => val.length > 5,\n }}\n />\n \n \n \n {state.hidden ? (\n \n \n Password is required,\n longEnough: (\n \n \n \n \n !comparePassword(val),\n }}\n />\n \n \n \n \n \n \n \n \n \n {state.captchaReady ? (\n \n \n \n \n \n \n \n \n \n \n \n \n {!loading && (\n \n {polyglot.t(\"createAccountPage.submit\")}\n \n )}\n {loading && (\n \n Loading\n \n )}\n \n \n \n \n Already have a account? \n \n {\" \"}\n Login\n \n \n \n \n \n
\n ) : showOtp && token !== \"\" ? (\n \n
\n SIGNUP
\n\n {polyglot.t(\n \"createAccountPage.passwordCriteria3\"\n )}\n
\n ),\n }}\n />\n \n \n(Min 6 characters)
\n\n Password must be at least 6 characters and must\n contain at least one uppercase letter,
\n one lowercase letter, one number, one special\n character and shouldn't contain any spaces.\n
\n \n one lowercase letter, one number, one special\n character and shouldn't contain any spaces.\n
\n \n \n \n \n \n \n
\n \n \n
\n \n \n \n
\n
\n \n THE WORLD'S FASTEST
HYDRAULIC HOSE REPAIR\n \n
\n \n
\n \n THE WORLD'S FASTEST
HYDRAULIC HOSE REPAIR\n \n
\n machinery?\n \n \n
BOA Set-Up ?\n \n \n
\n Your Enterprise Account has not been verified by BOA yet. You\n will get an Email notification once its verified. In cases of\n queries dont hesitate to get in touch with BOA.\n
\n );\n } else {\n verifyEmailMessage = (\n \n \n {polyglot.t(\"loginPage.resendVerificationEmail\")}\n \n
\n );\n }\n\n setLoading(false);\n setErrorFlag(true);\n setErrorMessage(verifyEmailMessage);\n }\n }\n } else {\n setLoading(false);\n setErrorFlag(true);\n setErrorMessage(\"Please try again.\");\n }\n };\n\n const ContactUs = async () => {\n if (\n formData.firstName === \"\" ||\n formData.lastName === \"\" ||\n formData.phoneNumber === \"\" ||\n formData.email === \"\" ||\n formData.message === \"\"\n ) {\n showErrorToast(\"Please fill in all fields\");\n return false;\n }\n setLoading(true);\n try {\n const contactFormData = await apiSendContactForm(formData);\n if (contactFormData) {\n setFormSent(true);\n showSuccessToast(\n \n Form Sent Successfully\n
\n );\n } else {\n setLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n setLoading(false);\n showErrorToast(\"Something went wrongs\");\n }\n };\n\n const showPassword = () => {\n setHidden(!hidden);\n };\n\n const showLogin = (show) => {\n setOpenLogin(show);\n };\n\n const mobileScreen = () => {\n return (\n <>\n \n \n
\n \n \n \n
\n \n
\n \n \n 
\n
\n \n
\n \n \n
\n \n \n LOOKING FOR THE NEAREST
\n HYDRAULIC HOSE FITTER?\n \n
\n \n HYDRAULIC HOSE FITTER?\n \n
\n \n MOBILE HYDRAULIC
HOSE REPAIR
\n NEAR YOU!\n \n
\n HOSE REPAIR
\n NEAR YOU!\n \n
\n \n Choose and call. One of our network of
\n trained hose mechanics will arrive
\n with a fully stocked unit equipped to replace\n
\n hydraulic hoses onsite.\n \n
\n \n trained hose mechanics will arrive
\n with a fully stocked unit equipped to replace\n
\n hydraulic hoses onsite.\n \n
\n
\n \n \n \n \n \n LEARN HOW\n \n \n \n \n \n
\n \n \n GET YOUR MACHINE
UP & RUNNING\n \n
\n UP & RUNNING\n \n
\n machine with the BOAhub today - just
\n choose and call.\n \n \n
\n \n
\n\n
\n \n \n
\n
\n \n 
\n
\n \n \n \n • Download the app for free or use the website portal\n \n
\n
\n \n • Click 'Find BOApod' Icon\n \n
\n
\n \n • The map will display your location and show the BOApods\n near you\n \n
\n
\n \n • Click on a BOApod icon to view Operator details\n \n
\n
\n \n • Click phone icon to call BOApod Operator\n \n
\n \n \n \n HERE'S A QUICK HOW TO\n \n
\n \n
\n \n • Click 'Find BOApod' Icon\n \n
\n
\n \n • The map will display your location and show the BOApods\n near you\n \n
\n
\n \n • Click on a BOApod icon to view Operator details\n \n
\n
\n \n • Click phone icon to call BOApod Operator\n \n
\n
\n \n WANT TO BE PART OF OUR NETWORK?\n \n
\n \n
\n \n We give you the key components required to repair and maintain\n hydraulic hoses, either for your own business or as another\n revenue stream.\n \n \n
\n
\n \n 
\n
\n \n \n \n NZ: 0800 20 20 20
\n AU: 1800 40 30 40
\n PHONE: +64 9-579 2103\n \n
\n
\n \n HEAD OFFICE:
\n 7 DAVID MCCATHIE PLACE,
\n SILVERDALE, AUCKLAND 0932\n \n
\n
\n \n AUSTRALIA DISTRIBUTION:
\n 13-15 MASSEY AVE,
\n LEETON, NSW 2705\n \n
\n
\n \n POSTAL ADDRESS:
\n PO BOX 180,
\n SILVERDALE, 0932\n \n
\n \n \n \n \n \n \n LET’S GET IN TOUCH\n \n
\n \n AU: 1800 40 30 40
\n PHONE: +64 9-579 2103\n \n
\n
\n \n HEAD OFFICE:
\n 7 DAVID MCCATHIE PLACE,
\n SILVERDALE, AUCKLAND 0932\n \n
\n
\n \n AUSTRALIA DISTRIBUTION:
\n 13-15 MASSEY AVE,
\n LEETON, NSW 2705\n \n
\n
\n \n POSTAL ADDRESS:
\n PO BOX 180,
\n SILVERDALE, 0932\n \n
\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n {hidden ? (\n \n \n {errorFlag && (\n \n \n \n \n \n {polyglot.t(\"login.forgotPassword\")}\n \n \n \n \n
\n \n \n {loading ? \"Logging in...\" : \"Login\"}\n \n
\n \n \n
\n \n
\n \n
\n \n \n 
\n
\n \n 
\n
\n \n
\n \n
\n \n \n LOOKING FOR THE NEAREST
\n HYDRAULIC HOSE FITTER?\n \n
\n \n HYDRAULIC HOSE FITTER?\n \n
\n \n MOBILE HYDRAULIC
HOSE REPAIR NEAR
\n YOU!\n \n
\n HOSE REPAIR NEAR
\n YOU!\n \n
\n \n Choose and call. One of our network of
\n trained hose mechanics will arrive with\n
\n a fully stocked unit equipped to replace\n
\n hydraulic hoses onsite.\n \n
\n \n trained hose mechanics will arrive with\n
\n a fully stocked unit equipped to replace\n
\n hydraulic hoses onsite.\n \n
\n
\n \n \n \n \n \n LEARN HOW\n \n \n \n \n \n
\n \n BOAhub today - just choose and call.\n \n \n
\n
\n \n \n
\n \n \n
\n \n \n \n • Download the app for free or use the website portal\n \n
\n
\n \n • Click 'Find BOApod' Icon\n \n
\n
\n \n • The map will display your location and show the BOApods\n near you\n \n
\n
\n \n • Click on a BOApod icon to view Operator details\n \n
\n
\n \n • Click phone icon to call BOApod Operator\n \n
\n \n \n \n HERE'S A QUICK HOW TO\n \n
\n \n
\n \n • Click 'Find BOApod' Icon\n \n
\n
\n \n • The map will display your location and show the BOApods\n near you\n \n
\n
\n \n • Click on a BOApod icon to view Operator details\n \n
\n
\n \n • Click phone icon to call BOApod Operator\n \n
\n
\n \n We give you the key components required to repair and maintain\n hydraulic hoses, either for your
\n own business or as another revenue stream.\n \n \n
\n
\n \n
\n \n \n 
\n
\n \n \n
\n \n \n
\n \n \n LET’S GET IN TOUCH\n \n
\n \n \n NZ: 0800 20 20 20
\n AU: 1800 40 30 40
\n PHONE: +64 9-579 2103\n \n
\n
\n \n HEAD OFFICE:
\n 7 DAVID MCCATHIE PLACE,
\n SILVERDALE, AUCKLAND 0932\n \n
\n
\n \n AUSTRALIA DISTRIBUTION:
\n 13-15 MASSEY AVE,
\n LEETON, NSW 2705\n \n
\n
\n \n POSTAL ADDRESS:
\n PO BOX 180,
\n SILVERDALE, 0932\n \n
\n \n AU: 1800 40 30 40
\n PHONE: +64 9-579 2103\n \n
\n
\n \n HEAD OFFICE:
\n 7 DAVID MCCATHIE PLACE,
\n SILVERDALE, AUCKLAND 0932\n \n
\n
\n \n AUSTRALIA DISTRIBUTION:
\n 13-15 MASSEY AVE,
\n LEETON, NSW 2705\n \n
\n
\n \n POSTAL ADDRESS:
\n PO BOX 180,
\n SILVERDALE, 0932\n \n
\n \n \n \n LET’S TALK\n \n
\n \n \n
\n \n
\n ) : (\n \n \n {_.map(eComFeatures, (feature, key) => {\n const { title, page, image, active } = feature;\n\n // Checking for features to hide\n if (title === \"Job Management\" && hasJobbing !== \"true\") {\n return null;\n }\n if (title === \"My Orders\" && accountType === 3) {\n return null;\n }\n if (title === \"Products\" && accountType === 3) {\n return null;\n }\n if (title === \"Find BOApod\" && hasBoahubFindPod !== \"true\") {\n return null;\n }\n if (title === \"Hydraulic Information System\" && !HISusers) {\n return null;\n }\n if (\n title === \"Inventory Management\" &&\n isBoahubPremium !== \"true\"\n ) {\n return null;\n }\n if (\n (title === \"My Customers\" && userType === 4) ||\n (title === \"My Customers\" &&\n (accountType === 2 || accountType === 3))\n ) {\n return null;\n }\n return (\n 2\n ? featureTileSize\n : 3\n }\n key={key}\n className=\"card-body\"\n style={{ textAlign: \"center\", position: \"relative\" }}\n >\n {active ? (\n \n {\n if (\n title === \"Job Management\" &&\n localStorage.getItem(\"isBoahubPremium\") === \"true\"\n ) {\n setTimeout(() => {\n setIsJobbingOpen(true);\n }, 300);\n } else {\n e.preventDefault();\n if (e.ctrlKey) {\n e.stopPropagation();\n window.open(`/${page}`);\n return;\n }\n goToPage(page);\n }\n }}\n >\n \n {\n e.preventDefault();\n }}\n >\n \n \n {title === \"Job Management\" &&\n localStorage.getItem(\"isBoahubPremium\") !== \"true\"\n ? \"Jobbing\"\n : title}\n \n
\n \n );\n })}\n \n \n );\n };\n\n return (\n <>\n \n goToPage(page)}\n account={account}\n /> */}\n
\n );\n};\n\nconst mapStateToProps = (state) => {\n return {\n discountStatistics: state.home.discountStatistics,\n user: state.auth.user,\n emailSent: state.home.emailSent,\n totalSavings: state.home.totalSavings,\n };\n};\n\nconst reducer = { ...home };\nconst mapDispatchToProps = (dispatch) => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home));\n","import React from \"react\";\nimport { Icon, Label } from \"semantic-ui-react\";\nimport _ from \"lodash\";\nimport PropTypes from \"prop-types\";\n\nconst Filter = ({\n applyFilter,\n secondaryGrpDisplayName,\n tertiaryGrpDisplayName,\n productFamilyDisplayName,\n activeNode,\n categories,\n isLoading,\n}) => {\n secondaryGrpDisplayName = _.replace(secondaryGrpDisplayName, \"$and$\", \"&\");\n tertiaryGrpDisplayName = _.replace(tertiaryGrpDisplayName, \"$and$\", \"&\");\n productFamilyDisplayName = _.replace(productFamilyDisplayName, \"$and$\", \"&\");\n\n const showFilter =\n secondaryGrpDisplayName ||\n tertiaryGrpDisplayName ||\n productFamilyDisplayName;\n\n if (!activeNode) return null;\n\n const filterItems = (arr, query) => {\n return arr.filter(\n (el) => el.module.toLowerCase().indexOf(query.toLowerCase()) !== -1\n );\n };\n\n let items = [];\n let values = activeNode.value.split(\",\");\n if (values.length === 1) items.push({ text: activeNode.module, node: \"\" });\n else if (values.length === 2) {\n const level21 = filterItems(categories, values[0].trim());\n\n items.push({ text: values[0], node: \"\" });\n items.push({ text: activeNode.module, node: level21 });\n } else if (values.length === 3) {\n const level31 = filterItems(categories, values[0].trim());\n const level32 = filterItems(level31[0].children, values[1].trim());\n\n items.push({ text: values[0], node: \"\" });\n items.push({ text: level32[0].module, node: level31 });\n items.push({ text: activeNode.module, node: level32 });\n } else if (values.length === 4) {\n const level41 = filterItems(categories, values[0].trim());\n const level42 = filterItems(level41[0].children, values[1].trim());\n const level43 = filterItems(level42[0].children, values[2].trim());\n\n items.push({ text: values[0], node: \"\" });\n items.push({ text: level42[0].module, node: level41 });\n items.push({ text: level43[0].module, node: level42 });\n items.push({ text: activeNode.module, node: level43 });\n }\n\n return (\n \n Filtering by \n\n {activeNode.value !== \"\" &&\n _.map(items, (item) => {\n return (\n \n {item.text}\n applyFilter(item.node[0])}\n />\n \n );\n })}\n
\n );\n};\n\nFilter.propTypes = {\n applyFilter: PropTypes.func,\n secondaryGrp: PropTypes.string,\n tertiaryGrp: PropTypes.string,\n productFamily: PropTypes.string,\n activeNode: PropTypes.object,\n};\n\nexport default Filter;\n","import React from \"react\";\nimport { Grid, Image } from \"semantic-ui-react\";\nimport productDefaultImage from \"../../assets/images/product_default.png\";\nimport \"./narrowFilters.css\";\n\nconst NarrowFilter = ({ narrowFilters = [], onClickHandler }) => {\n const handleClick = (filter) => {\n const {\n secondaryGrpDisplayName = null,\n tertiaryGrpDisplayName = null,\n productFamilyDisplayName = null,\n } = filter;\n\n return onClickHandler(filter);\n\n // if (!productFamilyDisplayName && !tertiaryGrpDisplayName) {\n // return onClickHandler(secondaryGrpDisplayName);\n // }\n\n // if (!productFamilyDisplayName) {\n // return onClickHandler(\n // secondaryGrpDisplayName + \",\" + tertiaryGrpDisplayName\n // );\n // }\n\n // if (productFamilyDisplayName) {\n // return onClickHandler(productFamilyDisplayName);\n // }\n };\n\n return (\n \n \n {narrowFilters.map((filter, key) => {\n const {\n image128: stockImage1,\n // secondaryGrpDisplayName = null,\n // productFamilyDisplayName = null,\n // tertiaryGrpDisplayName = null,\n module: title,\n value,\n } = filter;\n\n // let title = productFamilyDisplayName;\n\n // if (!title) {\n // title = tertiaryGrpDisplayName;\n // }\n\n // if (!title) {\n // title = secondaryGrpDisplayName;\n // }\n\n if (!title || title === \"-\") {\n return null;\n }\n\n const redirectClickHandler = (e, value) => {\n e.preventDefault();\n if (e.ctrlKey) {\n e.stopPropagation();\n window.open(`/search?filter=${value}&value=`);\n return;\n }\n };\n\n return (\n handleClick(filter)}\n >\n redirectClickHandler(event, value)}\n href={`/search?filter=${title}&value=`}\n >\n \n \n \n {{`${title}`}}\n \n \n \n );\n })}\n \n
\n );\n};\n\nexport default NarrowFilter;\n","import React from \"react\";\nimport { Grid, Divider, Image, Icon } from \"semantic-ui-react\";\nimport PropTypes from \"prop-types\";\nimport UiLoader from \"../../components/Loader\";\nimport { CATEGORIES_IMAGES } from \"../../constants/appConstants\";\n\nconst DefaultGrid = ({\n categories = [],\n onClickHandler,\n isLoadingCategories,\n}) => {\n const redirectClickHandler = (e, module) => {\n e.preventDefault();\n if (e.ctrlKey) {\n e.stopPropagation();\n window.open(\"/search?filter=\" + module + \"&value=\");\n }\n };\n return (\n Narrow your search
\n\n
\n \n \n \n \n \n
\n )}\n \n
\n Create your own customized hose.
\n \n \n
\n \n \n
\n \n \n {narrowFilters.map((filter, key) => {\n return (\n \n Loading \n \n \n \n \n \n \n \n );\n })}\n \n
\n {_.map(searchResults, (item, key) => {\n return (\n Narrow your search
\n\n {/*
\n
\n );\n};\n\nresultRenderer.propTypes = {\n stockDescription: PropTypes.string,\n stockCode: PropTypes.string,\n price: PropTypes.number,\n type: PropTypes.string,\n secondaryGrpDisplayName: PropTypes.string,\n tertiaryGrpDisplayName: PropTypes.string,\n productFamilyDisplayName: PropTypes.string,\n isMatched: PropTypes.bool\n};\n\nexport default resultRenderer;\n","import React from \"react\";\nimport { Grid, Dropdown, Form, Button, Segment, Label, Icon, Image } from \"semantic-ui-react\";\nimport PropTypes from \"prop-types\";\nimport { FITTINGS_HYD, ADAPTORS_HYD } from \"../../constants/appConstants\";\nimport _ from \"lodash\";\n\nconst constructOptions = (data) => {\n if (_.isEmpty(data)) {\n return null;\n }\n data = _.compact(data);\n\n\n let options = [{ key: \"\", value: \"\", text: \"ALL\" }]\n data = data.map((value) => {\n return { key: value, value: value, text: value }\n })\n options = [...options, ...data]\n return options;\n}\n\nconst constructThreadSizeOptions = (data) => {\n if (_.isEmpty(data)) {\n return null;\n }\n data = _.compact(data);\n let options = [{ key: \"-1\", value: \"\", text: \"ALL\" }]\n data = data.map((item) => {\n return { key: item.name, value: item.value, text: \n ({stockCode}) {stockDescription}{\" \"}\n {isMatched &&
\n {(secondaryGrpDisplayName || tertiaryGrpDisplayName || productFamilyDisplayName) && (\n Matched
}\n\n
\n )}\n \n {(threadType1 || threadSize1) && }\n {(threadType2 || threadSize2) && }\n
\n }\n\n const threadSize2JSX = (\n \n );\n\n if (![ADAPTORS_HYD, FITTINGS_HYD].includes(category)) {\n return null;\n }\n\n return (\n \n
\n );\n};\n\nQuickSearchResultRenderer.propTypes = {\n stockDescription: PropTypes.string,\n stockCode: PropTypes.string,\n secondaryGrp: PropTypes.string,\n tertiaryGrp: PropTypes.string,\n productFamily: PropTypes.string,\n};\n\nexport default QuickSearchResultRenderer;\n","import React, { useState, useEffect } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport { Grid, Search } from \"semantic-ui-react\";\nimport QuickSearchResultRenderer from \"./QuickSearchResultRenderer\";\nimport * as searchReducer from \"../../containers/Search/search.reducer\";\nimport _ from \"lodash\";\n\nconst QuickSearch = (props) => {\n const [value, setValue] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [filter] = useState(\"\");\n\n const handleResultSelect = (e, { result }) => {\n e.preventDefault();\n props.addToCart(result);\n };\n\n const handleSearchChange = async (e, { value }) => {\n setValue(value);\n };\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n searchProduct(value);\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, [value]);\n\n const searchProduct = async (search) => {\n if (search === \"\") {\n setIsLoading(false);\n return false;\n }\n setIsLoading(true);\n\n // Get the current time in milliseconds to use as the current request ID.\n const requestId = Date.now();\n props.setLatestRequestId(requestId);\n\n await props.actionAutoComplete(requestId, value, filter);\n setIsLoading(false);\n };\n\n const { autoCompleteResult = [] } = props;\n\n return (\n \n ({stockCode}) {stockDescription}{\" \"}\n
\n \n
\n \n
\n )}\n \n \n Loading categories tree
\n
\n )}\n {this.state.dataSource && (\n \n Loading categories tree
\n \n Found {totalRecords} products. Showing the most relevant first.\n
\n ) : null}\n\n {/* Show narrow down filter*/}\n {!isLoading && narrowFilters && narrowFilters.length > 0 ? (\n \n
\n {/* * All prices shown are exclusive of GST {\" \"} */}\n
\n RRP{\" \"}\n
\n BUY{\" \"}\n
\n {this.props.isHoseMaker ? null : (\n \n )}\n
\n\n OTP verified successfully\n
\n );\n setTimeout(() => {\n setOtpVerifying(false);\n if (account.token && account.token !== null) {\n props.clearAuth();\n props.history.push(`/reset-password/${account?.token}`);\n }\n }, 2000);\n } else {\n setOtpVerifying(false);\n setOtp(\"\");\n showErrorToast(\"Invalid verification code\");\n }\n } catch {\n setOtpVerifying(false);\n setOtp(\"\");\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const handleOtpChange = (value) => {\n setOtp(value);\n };\n\n if (state.loading) {\n loader = \n \n
\n \n );\n\n return (\n \n
\n ) : null}\n\n \n \n {otpVerifying ? (\n \n ) : null}\n }\n shouldAutoFocus\n value={otp}\n onChange={handleOtpChange}\n />\n
\n \n \n \n \n \n {polyglot.t(\"forgotPass.title\")}
\n {status === 200 && token !== \"\" ? null : (\n{polyglot.t(\"forgotPass.description\")}
\n )}\n\n {status !== 200 && formCode}\n\n {status === 200 && token !== \"\" ? (\n\n \n \n \n \n \n \n \n Enter verification code\n \n
\n \n \n Back to Login\n \n
\n \n \n \n \n {polyglot.t(\"verifyEmailPage.linkNotFound\")}\n
\n
\n\n {polyglot.t(\"loginPage.resendVerificationEmail\")}\n \n
\n );\n } else if (status === 400) {\n // this.props.history(\"/\");\n responseJSX = (\n \n
\n
\n Invite cancelled\n
\n );\n } else if (status === 500) {\n // this.props.history(\"/\");\n responseJSX = (\n \n
\n );\n } else if (status === 406) {\n responseJSX = (\n \n \n The invite link has been accepted. If you have already set a\n password, log into the BOAhub here.\n \n
\n \n \n If you have not yet set a password, reset your password{\" \"}\n here.\n \n
\n \n Your Account is Active. Try Loging In.\n
\n );\n } else if (status === 200) {\n const { customerType, isActive } = data;\n text = Email Verified;\n if (isActive == true) {\n responseJSX = (\n \n
\n );\n } else {\n responseJSX = (\n Email Verified & Account Active
\n\n Your email has been successfully verified & your account is\n ready to use.\n
\n \n\n Login now -{\" \"}\n \n {\" \"}\n CLICK HERE\n {\" \"}\n
\n \nIf you have any questions Contact Us
\n\n \n https://www.boa.co.nz/blog/\n {\" \"}\n
\n\n
\n );\n }\n }\n }\n if (this.state.loading) {\n loader = {polyglot.t(\"verifyEmailPage.enterprise.success1\")}
\n{polyglot.t(\"verifyEmailPage.enterprise.success2\")}
\n{polyglot.t(\"verifyEmailPage.enterprise.success3\")}
\n\n {\" \"}\n {polyglot.t(\"topMenu.number\")} {\" or \"}{\" \"}\n {polyglot.t(\"topMenu.email\")}{\" \"}\n
\n{polyglot.t(\"verifyEmailPage.enterprise.success4\")}
\n\n \n https://www.boa.co.nz/blog/\n {\" \"}\n
\n\n
\n {this.props.isActive == true ? (\n \n Back\n \n ) : null}\n
\n \n \n {!sendEmail && text}\n {sendEmail && sendEmailText}\n \n
\n\n {!sendEmail && responseJSX}\n {sendEmail && errorMessage}\n
\n\n\n {this.props.isActive == true ? (\n \n Back\n \n ) : null}\n
\n \n \n 2. Select hose group
\n \n {categories.map((hoseCat, key) => {\n return (\n onClickHandler(e, hoseCat)}\n color={hoseCat === selected ? \"green\" : \"\"}\n description={hoseCat}\n />\n );\n })}\n \n \n \n
\n );\n};\n\nHoseCategories.prototype = {\n selected: PropTypes.string,\n onClickHandler: PropTypes.func,\n categories: PropTypes.array\n};\n\nexport default HoseCategories;\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAIAAAC6s0uzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMTA3OUM4M0JBOEMxMUUyODk1OUUwMDM4ODMyNkMyQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMTA3OUM4NEJBOEMxMUUyODk1OUUwMDM4ODMyNkMyQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxMDc5QzgxQkE4QzExRTI4OTU5RTAwMzg4MzI2QzJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxMDc5QzgyQkE4QzExRTI4OTU5RTAwMzg4MzI2QzJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hmM2mwAAD65JREFUeNrs3elvVPW/wHGhm0YtGi9gIsaYGDVGRSVuaIya+MRoYpQnPvQ/EwRqN5ZCRcPWli5QWlq2QosFupe22GlLOzPtzPSeC7lcLz/Ezsp0eL0emKbMnJn59Nh3zyznW9zX1/cYAJBba40AAAQYAAQYABBgABBgAECAAUCAAQABBgABBgAEGAAEGAAEGAAQYAAQYABAgAFAgAEAAQYAAQYABBgABBgABBgAEGAAEGAAQIABQIABAAEGAAEGAAQYAAQYAAQYABBgABBgAECAAUCAAQABBgABBgAEGAAEGAAEGAAQYAAQYABAgAFAgAEAAQYAAQYABBgABBgABBgAEGAAEGAAQIABQIABAAEGAAEGAAQYAAQYAAQYABBgABBgAECAAUCAAQABBgABBgAEGAAEGAAEGAAQYAAQYABAgAFAgAEAAQYAAQYABBgABBgABBgAEGAAEGAAQIABQIABAAEGAAEGAAQYAAQYAAQYABBgABBgAECAAUCAAQABBgABBgAEGAAEGAAQYAAQYAAQYABAgAFAgAEAAQYAAQYABBgABBgAEGAAEGAAEGAAQIABQIABAAEGAAEGAAQYAAQYABBgABBgABBgAECAAUCAAQABBgABBgAEGAAEGAAQYAAQYAAQYABAgAFAgAEAAQYAAQYABBgABBgAEGAAEGAAEGAAQIABQIABAAEGAAEGAAQYAAQYABBgABBgABBgAECAAUCAAQABBgABBgAEGAAEGAAQYAAQYAAQYABAgAFAgAEAAQYAAQYABBgABBgAEGAAEGAAEGAAQIABQIABAAEGAAEGAAQYAAQYABBgABBgABBgAECAAUCAAQABBgABBgAEGABWkWIjIP91dXXFYrGioiKjYCXi8XhpaenmzZuNAgGGtBw6dCgSiRQX211ZkeDPtSeffFKAEWBIVzgcTiQSwWGNUbBCCwsLhkCe8xowq4Ann7HPIMAAgAADgAADAAIMAAIMAAgwAAgwAAgwACDAACDAAIAAA4AAAwACDAACDAD8f9YDpgCVlpZ+/vnnL774YjQaNY1Vf5Swdm0sFjt06ND09LRpIMCQ37t1cfHrr7++ceNGoygYTU1NAkyh/XFpBBSe5eXlcDhsDgUjOAKOx+PmgAADAAIMAAIMAAgwAAgwACDAACDAACDAAIAAA4AAAwAZ4FzQwIrMz89fu3ZtfHw8+CKRSJSUlDz99NObNm166aWXiov9JgEBBjJtaGioo6Ojv79/bm4uFov9/Z/KysrWrVv31ltvffDBB0899ZRZgQADGRAOhxsbG0+ePLm0tHTfC0Sj0YmJiaNHj3Z3d3/yySfvv//+2rVe2AIBBtIQCoWqqqoGBgZWcuGbN2/W1dWNjo5+8803JSUlpgcCDKRibm5u+/btwdFtUtfq6OgIjpW3bdvmOBj+lf9JgHstLi4Gx77J1veOs2fPHj9+3AxBgIGknTp16urVqylfvaGhYXBw0BhBgIEkhEKhlpaWdLaQSCSam5uD/xomCDCwUhcvXpybm0tzI5cvXx4dHTVMEGAgiXamv5F4PN7f32+YIMDAioRCocnJyYxsanh4+J6zdgACDNzf1NRUNBrNyKamp6cztSkQYKDARSKRTL15KhwOOwIGAQZybc2aNYYAAgysyOOPP56pk1gFm7JKEggwZFEhPdH63HPPZepMzuXl5aWlpXYPEGDIilAoVFNTc+PGjcJ4OM8+++z69eszsqlNmzZZlQEEGLKlvb39/Pnzu3fvnpmZKYxH9Nprr6W/kaKioldeecXuAQLMo2X5thzc0M2bNzs6Oh67/emdXbt2pX8CqXywefPm8vLy9CseHAHbFUGAeeTk5kTEzc3N8/Pzd74eGRmprq5eWFhY7aNbt27dxx9/nM4WSkpKtm7dakVCEGDIiuHh4XPnzv39O/39/fv27SuAs098+OGHr776aspX//TTT19++WV7CAgwZEVra2skErnnmxcvXqyrq4vH46v6oZWVlX399dcbN25M4bpvv/32F198YfcAAYasuH79etDa+/5Td3d30ODcvAidPevXr//xxx9feOGFpK713nvvfffdd0VFRfYQEGDIvEQi0dTU9ICP/3Z0dNTX16/2hxk0+KefftqyZctKXs0tLy//9ttvv//+++Do2R4CK+E8NZC03tsefJm2trYgRV999dWqfqRPPPFE0NR33333zJkzV65cue/bvINOv/HGG++8886GDRvsGyDAkC3RaLSxsXEll2xoaAga/Nlnn632h/zybVNTU+Pj4zdu3Lh169by8nJRUdG6deuef/75jRs3Bl/YMUCAIbsuXLgwNDS0wgv/8ccfpaWlH330UQE88P+67c0337z78rblFiAdXgOGJITD4ZaWlqSucvDgwc7OzkIawpr/ZX8AAYYcOX36dLKnfQ6OFw8cOBAcN5seIMCQivn5+VOnTqVwxaWlpb179/b19ZkhIMCQtMbGxlAolNp1I5FIVVXVwMCAMQICDEmYmJg4c+ZMOlsIh8M7d+5c+Ru4AAEG/mfdhaCgaW5kYWGhsrJybGwsB3d4eHj4zkpNgADDahUctp4/fz4jm5qenq6pqZmamsr2fW5sbNy/f/+RI0dyszAUIMCQeS0tLYuLi5na2vj4eG1t7ezsbPbu8OXLl69cuRKk9/jx43V1dUtLS36IIMCwyly9ejXjHyIaHBysrKzM0uLBsVisoaHhbnRPnz7966+/3l23GBBgWAXi8XhwEJmNpY2uX78edPE/FzRMX3t7+z1v9QoOiLdv356D570BAYbM6OnpCY6As7Tx/v7+mpqaDD65HQiFQk1NTf/5/ZGRkZ9//jmovp8pCDDku2g0et+YZdClS5fq6uqC4+xMbbC5ufm+axY9dvv9Xzt37nROLhBgyHddXV2jo6M5uJX6+vqMPMs9PDzc3t7+gAuEw+Hq6uqTJ0/64YIAQ54KWpWzUJ06der3339PfzvB8fq/HkzHYrEDBw4cPnzYx5NAgCEftbW1TU5O5uzmmpubjx07ls4Wenp6Ll68uMILNzQ07Nu3z8eTQIAhv8zOzqa27kI6jh49muxah3dFo9EjR44kdZXOzs6Kiop/esEYEGB4CBobG2/dupX72/3tt98e/CLuPwn+XEh2ncRAb2/vjh07JiYm/MRBgOHhGxsbS3PdhXQcOHCgu7s7qatMTU01NzendnOjo6NBg308CQQYHr7W1tbMfjY3KYlEYu/evUl9WOjEiRPpnOhqenp6165dmTrZNSDAkIrBwcGzZ88+3PsQi8WCBl+5cmUlF7569Wr67VxYWKiurm5ra7MDgADDwxEcTWbwtBgpi0QitbW1wV8DD77Y8vJyQ0NDNBpN/xaDR33w4MHDhw9n47ybgADDgwQHnT09PXlyZ+bm5iorK8fHxx9wmeBgvb+/P4M3GuR8z549D/EZeBBgeOTcWXchr+5SKBTauXPnP30ceWFh4ejRoxm/0TNnzgQ3mtXVEgEBhv9z7ty5gYGBfLtXd94hdd+FjE6ePPnXX39l40aDo+odO3ak8LkmQIAhOZFI5MSJE/l534Ij4JqamuBo+O/fnJiYyOodHhsbCxqc2ee3AQGGe3V2dubzAd/Q0NCePXsWFhbufqe5uTnbr9QGya+oqHjo7wkHAYaCFYQt/xcIurN48J2zN//5559dXV05uNFwOFxbW5vyWT4AAYYHaWlpydKLqZnV29u7d+/emZmZEydO5Gwto3g8fujQofr6eqsnQWYVGwGPuFAolPt1F1J29uzZsbGx+74nK6taW1tnZ2d/+OGH0tJS+wwIMGRAU1NTOBxeRXf4Ya2dcOHChfn5+W3btj3zzDN2G0ifp6B5pI2MjHR0dJjDCl27dm379u1DQ0NGAQIMaWlpacmHE0+uruPvioqKS5cuGQUIMKRoYGDAEkApmJmZqa2t9cwBCDCkqLGx0Tt7UxMOh/ft25eNE2GCAEOB6+np6e3tNYeULS8vHzt2bP/+/VZPAgGGlVpaWnJyiYxob2/ftWvX30/RBQgw/KNYLDYzM2MOGXHp0qVffvnlYX04CgQYVpniYh+Cz5jBwcHdu3dfu3bNKECA4V+sWbPGEDJocnKyqqrKu8pBgIFcm52dra2tbWtrMwoQYCCnlpaWDh48eOTIEaMAAQZy7fjx43v27LmzciIgwEDudHZ27t69OxQKGQUIMJBTfX19FRUVIyMjRgECDOTU8PBwZWVlUGKjAAEGcurmzZtBg7u7u40CBBjIqUgkUl1d3draahQgwDzqlpeXb926ZQ65VF9fX1VV5QygcJez8fEoKikp2bp1a9Bg58PK8R89k5OT5eXlxg4CzKMb4C+//NIcciyRSMRiMfWFOzwFDeTq183ataWlpeYAAgwAAgwAAgwACDAACDAAIMAAIMCQN3v2Wvt2Qf00fXoYAYZVIPhlXVZWZg6FFGB/UVF4nAmLArS4uNja2rphw4bgC9MogPrGYrFQKGQUCDDku3g83tXVZQ5AXv9xaQQAIMAAIMAAgAADgAADAAIMAAIMAAgwAAgwACDAACDAACDAAIAAA4AAQ04tLy8bAklJJBKGgABDuuLxuCEgwBQY6wGzCmzZsmVxcbGkpMQoWImlpaWysjJzIM+t6evrMwUAyDFPQQOAAAOAAAMAAgwAAgwACDAACDAAIMAAIMAAgAADgAADgAADAAIMAAIMAAgwAAgwACDAACDAAIAAA4AAA4AAAwACDAACDAAIMAAIMAAgwAAgwACAAAOAAAOAAAMAAgwAAgwACDAACDAAIMAAIMAAgAADgAADgAADAAIMAAIMAAgwAAgwACDAACDAAIAAA4AAA4AAAwACDAACDAAIMAAIMAAgwAAgwACAAAOAAAOAAAMAAgwAAgwACDAACDAAIMAAIMAAgAADgAADgAADAAIMAAIMAAgwAAgwACDAACDAAIAAA4AAA4AAAwACDAACDAAIMAAIMAAgwAAgwACAAAOAAAOAABsBAAgwAAgwACDAACDAAIAAA4AAAwACDAACDAAIMAAIMAAIMAAgwAAgwACAAAOAAAMAAgwAAgwACDAACDAACDAAIMAAIMAAgAADgAADAAIMAAIMAAgwAAgwAAgwACDAACDAAIAAA4AAAwACDAACDAAIMAAIMAAIMAAgwAAgwACAAAOAAAMAAgwAAgwACDAACDAACDAAIMAAIMAAgAADgAADAAIMAAIMAAgwAAgwAAgwACDAACDAAIAAA4AAAwACDAACDAAIMAAIMAAIMAAgwAAgwACAAAOAAAMAAgwAAgwACDAACDAACDAAIMAAIMAAgAADgAADAAIMAAIMAAgwAAgwAAgwACDAACDAAIAAA4AAAwAp+28BBgBS/CNcon8QzAAAAABJRU5ErkJggg==\"","import React from \"react\";\nimport _ from \"lodash\";\nimport { Button, Table } from \"semantic-ui-react\";\n\nconst NA_VALUES = \"#N/A\";\n\nconst ItemProperties = ({\n isShowMoreButton = false,\n onShowMore,\n onShowLess,\n isShowMore = false,\n stockImage2,\n ...item\n}) => {\n const properties = _.pickBy(item, _.identity);\n const {\n productDimensions,\n } = properties;\n let nonEmptyItems = _.pickBy(productDimensions, _.identity);\n\n const listItems = _.map(nonEmptyItems, (key, value) => {\n value = value.replace(/_/g, \" \");\n value = _.startCase(value);\n if (key === NA_VALUES) return null;\n\n return (\n 2. Select hose group
\n \n {isShowMore\n &&\n
\n );\n};\n\nexport default ItemProperties;\n","import React from \"react\";\nimport { Breadcrumb } from \"semantic-ui-react\";\n\nconst FamilyBreadCrumb = (props) => {\n const { secondaryGrpDisplayName, tertiaryGrpDisplayName } = props;\n \n return (\n \n \n \n {TableHeadJSX}\n
\n
\n }\n \n {!isShowMore && listItems.length > 0\n &&\n
\n \n \n \n
\n }\n {isShowMore\n && }\n \n {stockImage2 && (\n
\n )}\n \n {stockCode}: {stockDescription}
\n1. Select hose type
\n(1SN, R1AT, 1SC, etc)\n \n
(2SN, R2AT, 2SC, etc)\n \n
(ISO18752, 4SH, 4SP, R13, etc)\n \n
\n \n
\n \n
3. Select hose diameter
}\n\n {hoseDiameters.map(diameter => {\n return (\n this.selectDiameter(e, diameter)}\n active={\n diameter === selectedDiameter ? true : false\n }\n >\n {\" \"}\n {diameter}{\" \"}\n \n );\n })}\n
\n )}\n \n
\n )}\n \n );\n this.onBoarChangeHandler = data => {\n boarChangeHandler(data);\n this.setState({ openModal: false });\n };\n\n const hoseModelJSX = (\n 1. Select hose
\n Click to select hose size and type\n\n {hoseJSX}\n {hoseModelJSX}\n
\n \n
\n );\n};\n\nresultRenderer.propTypes = {\n stockDescription: PropTypes.string,\n stockCode: PropTypes.string,\n price: PropTypes.number,\n type: PropTypes.string,\n secondaryGrpDisplayName: PropTypes.string,\n tertiaryGrpDisplayName: PropTypes.string,\n productFamilyDisplayName: PropTypes.string\n};\n \nexport default resultRenderer;","import React from \"react\";\n\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport { Grid, Search } from \"semantic-ui-react\";\nimport PropTypes from \"prop-types\";\nimport * as hoseMakerReducer from \"../../hoseMaker.reducer\";\nimport ResultRenderer from \"./../SelectFitterByFilters/ResultRenderer\";\nimport _ from \"lodash\";\nimport \"./searchFitter.css\";\n\nclass SearchFitterById extends React.Component {\n constructor() {\n super();\n this.state = {\n id: \"\",\n value: \"\",\n isLoading: false\n };\n }\n\n handleResultSelect = (e, { result }) => {\n const value = result.stockCode;\n this.setState({ value });\n this.props.selectedFitting(result);\n };\n\n handleSearchChange = async (e, { value }) => {\n e.preventDefault();\n const { hoseType } = this.props;\n const { productDimensions, stockCode } = hoseType;\n const { dashSize1 } = productDimensions;\n this.setState({ isLoading: true });\n this.setState({ value, searchMessage: null });\n await this.props.actionFittingAutoComplete(value, dashSize1, stockCode);\n this.setState({ isLoading: false });\n };\n\n render() {\n const { value, isLoading } = this.state;\n const { autoCompleteResult } = this.props;\n return (\n \n ({stockCode}) {stockDescription}{\" \"}\n
\n \n
\n \n (OD of Male Thread or ID of Female Thread in mm)\n
\n \n {stockImage1 && side === \"right\" ? (\n
\n );\n } else {\n valueJSX = (\n \n {stockImage1 && side === \"left\" ? (\n
\n );\n }\n return (\n \n \n Select {side} fitting \n \n \n \n \n Or \n \n \n \n \n \n {!_.isEmpty(fittingValue) ? (\n valueJSX\n ) : (\n
\n );\n };\n}\n\nFitting.propTypes = {\n fittingChangeHandler: PropTypes.func,\n fittingValue: PropTypes.object,\n side: PropTypes.string,\n type: PropTypes.string\n};\n\nexport default Fitting;\n","import React from \"react\";\nimport { Grid } from \"semantic-ui-react\";\nimport Fitting from \"./Fitting\";\nimport PropTypes from \"prop-types\";\n\nconst FittingLeft = ({ fittingHandler, selectedTypes = {} }) => {\n this.fittingChangeHandler = (value, type) => {\n fittingHandler(value);\n };\n\n return (\n \n
\n )}\n \n
\n \n {\" \"}\n {side === \"left\" ? \"2.\" : \"3.\"} Select {side} Fitting\n
\n Click to Select Fitting\n\n \n \n \n \n
\n );\n};\n\nFittingLeft.propType = {\n fittingHandler: PropTypes.func,\n selectedTypes: PropTypes.object\n};\n\nexport default FittingLeft;\n","import React from 'react';\nimport { Grid } from 'semantic-ui-react';\nimport Fitting from './Fitting';\nimport PropTypes from \"prop-types\";\n\nconst FittingRight = ({ selectedTypes, fittingHandler }) => {\n \n this.fittingChangeHandler = (value, type) => {\n fittingHandler(value);\n };\n\n return (\n \n \n \n \n
);\n}\n\n\nFittingRight.propTypes = {\n fittingHandler: PropTypes.func,\n selectedTypes: PropTypes.object\n};\n\nexport default FittingRight;","import React from \"react\";\n// import Knob from \"react-canvas-knob\";\nimport NumericInput from \"react-numeric-input\";\nimport \"./angleInput.css\";\nimport { Form } from \"semantic-ui-react\";\nimport PropTypes from \"prop-types\";\n\nconst AngleSelector = ({angle = 180, angleChangeHandler}) => {\n\n function myFormat(num) {\n return num;\n}\n \n return (\n \n {/*
\n );\n \n}\n\nAngleSelector.propTypes = {\n angle: PropTypes.number,\n angleChangeHandler: PropTypes.func\n};\n\nexport default AngleSelector;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Segment, Grid } from \"semantic-ui-react\";\n\nconst HoseInfo = ({ hoseInfo = {}, clearHose, hoseLength = 1 }) => {\n const { stockCode } = hoseInfo;\n return (\n Clear hose
\n removeFitting(type)}>\n x remove\n
\n \n x Remove\n
\n \n
\n );\n};\n\nQuickSearchResultRenderer.propTypes = {\n stockDescription: PropTypes.string,\n stockCode: PropTypes.string,\n secondaryGrp: PropTypes.string,\n tertiaryGrp: PropTypes.string,\n productFamily: PropTypes.string\n};\n \nexport default QuickSearchResultRenderer;","import React from 'react';\nimport { Loader } from 'semantic-ui-react';\nimport PropTypes from 'prop-types';\nconst UiLoader = ({ text = 'Loading' }) => {\n\treturn \n ({stockCode}) {stockDescription}{\" \"}\n
\n \n
\n removeFerrule(type)}>\n x Remove\n
\n \n Hose details
\n \n
\n );\n\n return (\n \n Please ensure you choose between Hose Length and Overall Length\n correctly. For more information\n
\n * Over all length is not available\n {overAllModalJSX}\n
\n \n
\n {stockDescription}\n
) \n };\n\n return ( \n
\n \n \n {narrowFilters.map((filter, key) => {\n const {\n stockImage1 = null,\n secondaryGrpDisplayName= null,\n productFamilyDisplayName= null,\n tertiaryGrpDisplayName= null,\n } = filter;\n\n let title = productFamilyDisplayName;\n\n if (!title) {\n title = tertiaryGrpDisplayName;\n }\n\n if (!title) {\n title = secondaryGrpDisplayName;\n }\n\n\n return (\n handleClick(filter)}\n >\n \n \n \n \n {\n {`${title}`}\n }\n \n \n \n );\n })}\n \n
\n );\n};\n\nexport default AdditionalProductNarrowSearch;\n","import React from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router\";\nimport * as hoseMakerReducer from \"../../hoseMaker.reducer\";\nimport {\n Grid,\n Search,\n Button,\n Message,\n Pagination,\n Card,\n Label\n} from \"semantic-ui-react\";\nimport _ from \"lodash\";\nimport ResultRenderer from \"../SelectFitterByFilters/ResultRenderer\";\nimport { showSuccessToast, showErrorToast } from \"../../../../utils/toastUtils\";\nimport HoseDescription from \"../HoseSearch/HoseDescription\";\nimport AdditionalProductNarrowSearch from \"./AdditionalProductSearchNarrowResult\";\nimport * as searchUtils from \"../../hoseMaker.util\";\nimport FittingsFilter from \"../../../Search/FittingsFilter\";\nimport Filter from \"../../../Search/Filter\";\nconst FILTER_PARAM_FILTER = \"filter\";\nconst FILTER_PARAM_VALUE = \"value\";\nclass AdditionalProductSearch extends React.Component {\n constructor() {\n super();\n this.state = {\n isLoading: false,\n level: null,\n value: \"\",\n filter: null,\n searchMessage: \"\",\n activePage: 1,\n dataSource: null\n };\n }\n\n componentDidMount() {\n this.props.actionResetSearchResult();\n this.props.actionSetThreadType1(undefined);\n this.props.actionSetThreadSize1(undefined);\n this.props.actionSetThreadType2(undefined);\n this.props.actionSetThreadSize2(undefined);\n this.emptySearch();\n }\n\n emptySearch = async () => {\n const { categoryValue } = this.props;\n this.setState({ isLoading: true });\n await this.props.actionSearchProducts(\" \", categoryValue, 1);\n this.setState({ isLoading: false });\n };\n\n addParamsToUrl = ({ value, filter, activePage }) => {\n value = !value ? \"\" : value;\n filter = !filter ? \"\" : _.replace(filter, \"&\", \"$and$\");\n this.props.history.push({\n pathname: \"/additionalProductSearch\",\n search: `?${FILTER_PARAM_FILTER}=${filter}&${FILTER_PARAM_VALUE}=${value}`\n });\n };\n\n callSearchApi = async (value, filter, activePage, pushToHistory = true) => {\n if (!filter) {\n filter = this.props.categoryValue;\n }\n // if (pushToHistory) {\n // this.addParamsToUrl({ value, filter, activePage });\n // }\n\n this.setState({ isLoading: true, activePage });\n const { threadType1, threadSize1, threadType2, threadSize2 } = this.props;\n const result = await this.props.actionSearchProducts(\n value,\n filter,\n activePage,\n threadType1,\n threadSize1,\n threadType2,\n threadSize2\n );\n const { data } = result;\n const { secondaryGrpDisplayName, tertiaryGrpDisplayName } = data;\n const module = tertiaryGrpDisplayName\n ? tertiaryGrpDisplayName\n : secondaryGrpDisplayName;\n\n // const active = {\n // module\n // };\n // this.computeOpenFilterItems(secondaryGrpDisplayName, active);\n this.setState({\n isLoading: false\n });\n };\n\n computeOpenFilterItems = (secondaryGrp, active) => {\n let { dataSource } = this.state;\n\n for (let index = 0; index < dataSource.children.length; index++) {\n const element = dataSource.children[index];\n if (element.module === secondaryGrp) {\n element.collapsed = false;\n } else {\n element.collapsed = true;\n }\n }\n\n this.setState({\n dataSource,\n active\n });\n };\n\n handleSearchChange = async (e, { value }) => {\n e.preventDefault();\n this.setState({ isLoading: true, value, searchMessage: null });\n const { categoryValue } = this.props;\n await this.props.actionAdditionalProductAutoComplete(value, categoryValue);\n this.setState({ isLoading: false });\n };\n\n handleSearchButtonClick = async e => {\n e.preventDefault();\n const { value } = this.state;\n this.setState({ isLoading: true });\n\n if (_.isEmpty(value)) {\n this.setState({\n searchMessage: \"Please enter product details to search\",\n isLoading: false\n });\n\n return;\n }\n\n this.onSubmit(e);\n this.setState({\n searchMessage: null,\n isLoading: false\n });\n };\n\n onSubmit = e => {\n if (e) {\n e.preventDefault();\n }\n const { value } = this.state;\n const { categoryValue } = this.props;\n this.callSearchApi(value, categoryValue, 1);\n };\n handleResultSelect = (e, { result }) => {\n const value = result.stockCode;\n this.setState({ value });\n const { categoryValue } = this.props;\n this.callSearchApi(value, categoryValue, 1);\n };\n\n clearFilters = e => {\n e.preventDefault();\n this.setState({\n activePage: 1,\n totalPages: 1,\n value: \"\",\n filter: \"\"\n });\n this.props.actionSetThreadType1(undefined);\n this.props.actionSetThreadSize1(undefined);\n this.props.actionSetThreadType2(undefined);\n this.props.actionSetThreadSize2(undefined);\n this.props.actionResetSearchResult();\n\n this.emptySearch();\n return;\n };\n\n onNarrowFilterClickHandler = value => {\n // value = !value ? \"\" : _.replace(value, \"&\", \"$and$\");\n this.setState({ filter: value });\n this.callSearchApi(\"\", value, 1);\n };\n\n handlePaginationChange = (e, params) => {\n e.preventDefault();\n const { searchResult } = this.props;\n const { totalPages } = searchResult;\n if (totalPages === 1) {\n return;\n }\n const options = params;\n const { activePage } = options;\n const { value, filter } = this.state;\n this.setState({\n activePage\n });\n this.callSearchApi(value, filter, activePage);\n };\n\n selectProductHandler = (e, data) => {\n const { pricingPolicy } = data;\n const { price } = pricingPolicy;\n if (!price) {\n showErrorToast(\n \"Not able to add this product to the Hose, please contact BOA for this product\",\n 5000\n );\n } else {\n this.props.actionAddAdditionalProducts(data);\n const { productFamilyDisplayName = \"Product\" } = data;\n showSuccessToast(`${productFamilyDisplayName} added to the hose`);\n }\n };\n\n threadType1Handler = async data => {\n const { value } = data;\n const { filter } = this.state;\n await this.props.actionSetThreadType1(value);\n this.callSearchApi(this.state.value, filter, 1);\n };\n\n threadSize1Handler = async data => {\n const { value } = data;\n const { filter } = this.state;\n await this.props.actionSetThreadSize1(value);\n this.callSearchApi(this.state.value, filter, 1);\n };\n\n threadType2Handler = async data => {\n const { value } = data;\n const { filter } = this.state;\n await this.props.actionSetThreadType2(value);\n this.callSearchApi(this.state.value, filter, 1);\n };\n\n threadSize2Handler = async data => {\n const { filter } = this.state;\n const { value } = data;\n await this.props.actionSetThreadSize2(value);\n this.callSearchApi(this.state.value, filter, 1);\n };\n\n clearThreadFilterHandler = async () => {\n await this.props.actionSetThreadType1(undefined);\n await this.props.actionSetThreadSize1(undefined);\n await this.props.actionSetThreadType2(undefined);\n await this.props.actionSetThreadSize2(undefined);\n\n const { filter } = this.state;\n this.callSearchApi(this.state.value, filter, 1);\n };\n\n render() {\n const {\n autoCompleteResult,\n threadType1,\n threadSize1,\n threadType2,\n threadSize2\n } = this.props;\n const { isLoading, searchMessage, activePage, value, filter } = this.state;\n const {\n result = [],\n totalPages = 1,\n narrowFilters = [],\n secondaryGrpDisplayName = undefined,\n tertiaryGrpDisplayName = undefined,\n productFamilyDisplayName = undefined,\n threadFilters = {}\n } = this.props.searchResult;\n\n const {\n physicalThreadSize1,\n threadTypeFilter1,\n threadTypeFilter2,\n physicalThreadSize2\n } = threadFilters;\n const searchResults = result;\n const searchJSX = (\n Narrow your search
\n\n \n {searchMessage && (\n \n {searchMessage} \n \n )}\n
\n );\n\n const resultJSX = (\n \n {!isLoading &&\n searchResults.length !== 0 &&\n _.map(searchResults, (item, key) => {\n const { stockDescription, stockCode, price, currency } = item;\n return (\n \n \n \n \n \n \n \n \n \n );\n })}\n\n {searchResults.length ? (\n this.handlePaginationChange(e, data)}\n size=\"mini\"\n totalPages={totalPages}\n ellipsisItem={true}\n firstItem={null}\n lastItem={null}\n />\n ) : null}\n\n {searchResults.length === 0 && (filter || value) && (\n \n \n No Products found. Try widening your search criteria or get in\n touch with BOA for Assistance.\n \n \n )}\n
\n );\n\n return (\n \n {stockCode} {\" \"}\n {stockDescription}\n
\n\n \n {products.map((item, key) => {\n const {\n stockCode,\n stockDescription,\n secondaryGrpDisplayName,\n quantity,\n pack\n } = item;\n return (\n \n \n {secondaryGrpDisplayName} \n {stockCode} \n {stockDescription} \n \n \n \n removeProduct(stockCode)}\n >\n x remove\n
\n \n \n \n );\n })}\n \n \n )}\n \n \n
\n \n
\n - \n {additionalProduct.map((item, key) => {\n const { stockImage1, stockCode, quantity, stockDescription } = item;\n return (\n\n
\n \n Hose Price\n
\n (Added crimping, cleaning and sleaving charges.)\n Total Price :{\" \"}\n {totalHosePrice.toFixed(2) + \" \" + currency}\n
\n );\n };\n\n return (\n \n Hose Price\n
\n (Added crimping, cleaning and sleaving charges.)\n Total Price :{\" \"}\n {totalHosePrice.toFixed(2) + \" \" + currency}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Hose Length :{\" \"}\n {hoseLength > 0 ? {hoseLength} mm : mm}\n \n \n Overall Length : {overAllLength ? overAllLength.toFixed(2) : \" \"} mm\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n
\n \n {\" \"}\n Crimp : {crimpLeft ? crimpLeft + \"mm\" : TBA}\n
\n \n {leftThreadType1}{\" \"}\n {leftSeatTypeImage && (\n
\n \n \n {leftThreadType1}{\" \"}\n {leftSeatTypeImage && (\n
\n {\" \"}\n Crimp : {crimpRight ? crimpRight + \"mm\" : TBA}\n
\n \n {rightThreadType1}{\" \"}\n {rightSeatTypeImage && (\n
\n \n \n {rightThreadType1}{\" \"}\n {rightSeatTypeImage && (\n
\n \n Please review your hose assembly thoroughly and ensure\n it is correct as per your requirements.\n {\" \"}\n Please ensure hose, threads, angles and lengths are\n correct prior to adding this hose assembly to your cart.\n Once a hose assembly is added to the cart it is considered\n to be correct and will be manufactured as shown\n
\n\n Hold the assembly so that you can look along the length of the hose and with the fitting furtherest away from you in the vertical position. Measure the angle between the vertical fitting and the one nearest to you in a clockwise direction. Relationship can be expressed from 0 degrees to 360 degrees\n
\n\n By default the elbows are positioned at 180 degrees\n
\n\n
\n
\n )}\n Hose items not available in inventory
\n- \n {itemsNotAvailable.map((hoseItem, key) => {\n const { stockCode, pack, quantity } = hoseItem;\n return (\n
\n
\n \n Drop image here / Click here to upload image
\n{\"Hose Identification : \" + hoseName}
\n\n
\n \n Drop image here / Click here to upload image
\n{length}
\n\n \n \n \n
\n \n {/* \n {inventoryLoc && assetId &&\n */}\n \n \n \n {addToCartConfirmModalJSX}\n {sendToHoseMechanicConfirmModalJSX}\n {saveHoseRecipeConfirmModalJSX}\n {editHose && (\n \n {editHose && (\n \n \n {flow === \"editHoseForAsset\" ? (\n \n \n \n Send to hose mechanic\n \n\n \n Order Hose from BOA\n \n {showFacilities && assetId && (\n \n Save Hose Recipe\n \n )}\n \n \n ) : (\n \n {!updateHoseLoader ? (\n \n \n Update hose and{\" \"}\n {assetId ? \"attach to asset\" : \"add to inventory\"}\n \n \n ) : (\n \n )}\n\n \n Go to hose mechanic\n \n \n )}\n \n \n )}\n {!editHose && (\n \n \n {showFacilities && (\n \n Send to hose mechanic\n \n )}\n \n {showFacilities && assetId && (\n \n Save Hose Recipe\n \n )}\n \n )}\n \n {!_.isEmpty(hoseType) && !_.isEmpty(leftFittingTypes) && (\n \n \n {!_.isEmpty(leftFittingTypes) && (\n \n \n \n {!_.isEmpty(rightFittingTypes) && (\n \n \n )}\n \n \n {hoseType ? (\n \n \n \n \n {hoseType && !_.isEmpty(leftFittingTypes) ? (\n \n \n \n \n {!_.isEmpty(leftFittingTypes) && (\n \n \n {!_.isEmpty(hoseType) &&\n !_.isEmpty(leftFittingTypes) &&\n !_.isEmpty(rightFittingTypes) && (\n \n \n {!_.isEmpty(rightFittingTypes) && showAngleDropDown && (\n \n \n
\n );\n }\n}\n\nHoseMakerContainer.propTypes = {\n phase: PropTypes.number,\n hoseHandler: PropTypes.func,\n buttonText: PropTypes.string\n};\n\nconst mapStateToProps = state => ({\n hoseType: state.hoseMaker.hoseType,\n leftFittingTypes: state.hoseMaker.leftFittingTypes,\n rightFittingTypes: state.hoseMaker.rightFittingTypes,\n hoseLength: state.hoseMaker.hoseLength,\n rightFittingAngle: state.hoseMaker.rightFittingAngle,\n leftFittingAngle: state.hoseMaker.leftFittingAngle,\n spiralGuard: state.hoseMaker.spiralGuard,\n hoseDiameters: state.hoseMaker.hoseDiameters,\n orientation: state.hoseMaker.orientation,\n measurement: state.hoseMaker.measurement,\n additionalProduct: state.hoseMaker.additionalProduct,\n makeAtBoa: state.hoseMaker.makeAtBoa,\n totalPrice: state.hoseMaker.totalPrice,\n response: state.hoseMaker.response,\n hoseDescription: state.hoseMaker.hoseDescription,\n leftCrimpSize: state.hoseMaker.leftCrimpSize,\n rightCrimpSize: state.hoseMaker.rightCrimpSize,\n overAllLength: state.hoseMaker.overAllLength,\n showOal: state.hoseMaker.showOal,\n hoseQuantity: state.hoseMaker.hoseQuantity,\n leftFerrule: state.hoseMaker.leftFerrule,\n rightFerrule: state.hoseMaker.rightFerrule,\n leftSeatTypeImage: state.hoseMaker.leftSeatTypeImage,\n rightSeatTypeImage: state.hoseMaker.rightSeatTypeImage,\n editHose: state.hoseMaker.editHose,\n user: state.auth.user,\n model: state.hoseMaker.model,\n assetName: state.hoseMaker.assetName,\n subModel: state.hoseMaker.subModel,\n position: state.hoseMaker.position,\n assetId: state.hoseMaker.assetId,\n stockCode: state.hoseMaker.stockCode,\n allLocations: state.inventoryLocation.allLocations,\n hoseId: state.hoseMaker.hoseId,\n flow: state.hoseMaker.flow\n});\n\nconst reducer = {\n ...hoseMakerReducer,\n ...hoseMechanicReducer,\n ...locationReducer\n};\n\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(mapStateToProps, mapDispatchToProps)(HoseMakerContainer)\n);\n","import React from \"react\";\nimport { Message, Grid, Button, Icon, Divider } from \"semantic-ui-react\";\n\nconst SmallerScreenDisplayMessage = () => {\n return (\n \n
\n \n No locations available in Inventory. Add New\n
\n }\n Hose code: {hoseName}
\n {editHose && (\n \n {\" \"}\n Earlier Saved hose code: {hoseCodeFromDb}{\" \"}\n \n )}\n {assetId ? (\n\n {\" \"}\n ( Asset Name: {assetName} ,Position: {position} )\n
\n ) : null}\n\n {\" \"}\n Crimp : {leftCrimpSize ? leftCrimpSize + \"mm\" : TBA}\n
\n
\n )}\n {!_.isEmpty(leftFerrule) && (\n \n
\n \n {leftThreadType}{\" \"}\n {leftSeatTypeImage && (\n
\n Crimp : {rightCrimpSize ? rightCrimpSize + \"mm\" : TBA}\n
\n
\n )}\n {!_.isEmpty(rightFerrule) && (\n \n
\n \n {rightThreadType}\n {rightSeatTypeImage && (\n
\n
\n )}\n 2. Select left Fitting
\n Click to Select Fitting\n\n
\n )}\n 3. Select right Fitting
\n Click to Select Fitting\n\n
\n )}\n 0 Degree
\n \n\n
\n )}\n \n
\n
\n )}\n {!_.isEmpty(rightFittingTypes) && !showAngleDropDown && (\n \n
0 Degree
\n )}\n\n \n
\n \n \n \n Using BOAhub on you mobile or tablet device? Download the app for a\n better experience!\n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nexport default SmallerScreenDisplayMessage;\n","import React from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport * as hoseMakerReducer from \"./hoseMaker.reducer\";\nimport \"./HoseMakerContainer/hoseMaker.css\";\nimport * as hoseUtil from \"./hoseMaker.util\";\nimport { showErrorToast, showSuccessToast } from \"../../utils/toastUtils\";\nimport * as cartReducer from \"../Cart/cart.reducer\";\nimport HoseMakerContainer from \"./HoseMakerContainer/index\";\nimport MetaData from \"../../components/MetaData\";\nimport {\n ASSET_ID_FOR_URL_PARAM,\n HOSE_ID_FOR_URL_PARAM,\n ASSET_NAME_FOR_URL_PARAM,\n ASSET_MODEL_FOR_URL_PARAM,\n ASSET_SUB_MODEL_FOR_URL_PARAM,\n ASSET_POSITION_FOR_URL_PARAM,\n ASSET_POSITION_ID_FOR_URL_PARAM,\n ASSET_MAKE_FOR_URL_PARAM\n} from \"../../constants/appConstants\";\nimport * as hoseMechanicReducer from \"../HoseMechanic/hoseMechanic.reducer\";\nimport _ from \"lodash\";\nimport SmallerScreenDisplayMessage from \"./SmallerScreenDisplayMessage\";\nclass HoseMaker extends React.Component {\n constructor() {\n super();\n this.state = {\n isLoading: false,\n showModal: false,\n iAgree: false,\n closeOnDimmerClick: false,\n closeOnEscape: false,\n hoseImageData: null,\n phase: 1,\n width: 0,\n height: 0\n };\n }\n\n updateState = state => {\n this.setState(state);\n };\n\n componentWillMount = async () => {\n const params = this.getParams();\n const { assetId, position, hoseId } = params;\n this.props.actionSetPathParams(params);\n if (hoseId) {\n await this.setHose(hoseId);\n this.setState({ phase: 2 });\n }\n if (assetId && position) {\n this.props.actionSetPathParams(params);\n this.setState({ phase: 2 });\n }\n if (assetId && position && hoseId) {\n await this.setHose(hoseId);\n this.props.actionSetPathParams(params);\n this.props.actionSetFlowForHoseMaker(\"editHoseForAsset\");\n this.setState({ phase: 2 });\n }\n this.updateDimensions();\n };\n\n getParams = () => {\n let url = document.location.href;\n url = new URL(url);\n const { searchParams } = url;\n const assetId = searchParams.get(ASSET_ID_FOR_URL_PARAM);\n const position = searchParams.get(ASSET_POSITION_FOR_URL_PARAM);\n const hoseId = searchParams.get(HOSE_ID_FOR_URL_PARAM);\n const model = searchParams.get(ASSET_MODEL_FOR_URL_PARAM);\n const subModel = searchParams.get(ASSET_SUB_MODEL_FOR_URL_PARAM);\n const assetName = searchParams.get(ASSET_NAME_FOR_URL_PARAM);\n const positionId = searchParams.get(ASSET_POSITION_ID_FOR_URL_PARAM);\n const make = searchParams.get(ASSET_MAKE_FOR_URL_PARAM);\n return {\n assetId,\n position,\n hoseId,\n model,\n subModel,\n assetName,\n positionId,\n make\n };\n };\n\n updateDimensions = () => {\n this.setState({ width: window.innerWidth, height: window.innerHeight });\n };\n\n componentDidMount = () => {\n window.addEventListener(\"resize\", this.updateDimensions);\n };\n\n componentWillUnmount = () => {\n const { hoseId, assetId } = this.props;\n if (assetId || hoseId) {\n this.clearHoseHandler();\n }\n window.removeEventListener(\"resize\", this.updateDimensions);\n };\n\n setHose = async hoseId => {\n this.setState({ isLoading: true });\n const hoseData = await this.props.actionGetHoseDataFromServer(hoseId);\n if (_.isEmpty(hoseData)) {\n showErrorToast(\"Hose not found\");\n await this.clearHoseHandler();\n this.props.history.push(\"/hoseMaker\");\n return;\n }\n this.setState({ isLoading: false });\n };\n\n addHoseToCartHandler = async (\n toHoseMechanic = false,\n buttonText = \"\",\n saveHoseRecipe = false\n ) => {\n const {\n hoseType,\n leftFittingTypes,\n rightFittingTypes,\n spiralGuard,\n additionalProduct,\n hoseLength,\n rightFittingAngle,\n leftFittingAngle,\n makeAtBoa,\n totalPrice,\n hoseDescription,\n leftCrimpSize,\n rightCrimpSize,\n hoseQuantity,\n rightFerrule,\n leftFerrule,\n editHose,\n leftSeatTypeImage,\n rightSeatTypeImage,\n makeAtBoaCharges,\n overAllLength,\n uniqueCode,\n hoseId,\n showOal\n } = this.props;\n const isValid = hoseUtil.validateHose(\n hoseType,\n leftFittingTypes,\n rightFittingTypes\n );\n if (!isValid) {\n showErrorToast(\"Please complete your hose first\");\n return false;\n }\n this.setState({ isLoading: true });\n const hoseObjectToSend = hoseUtil.hoseObjectToSend(\n hoseType,\n leftFittingTypes,\n rightFittingTypes,\n hoseLength,\n rightFittingAngle,\n leftFittingAngle,\n hoseDescription,\n makeAtBoa,\n totalPrice,\n spiralGuard,\n additionalProduct,\n leftCrimpSize,\n rightCrimpSize,\n leftFerrule,\n rightFerrule,\n leftSeatTypeImage,\n rightSeatTypeImage,\n makeAtBoaCharges,\n editHose,\n uniqueCode,\n hoseId,\n overAllLength,\n showOal\n );\n const { stockDescription } = hoseObjectToSend;\n if (toHoseMechanic) {\n const param = this.getParams();\n const {\n assetId,\n position,\n assetName,\n model,\n subModel,\n positionId,\n make\n } = param;\n const length = overAllLength ? overAllLength : hoseLength;\n hoseObjectToSend.toHoseMechanic = true;\n hoseObjectToSend.assetId = assetId;\n hoseObjectToSend.position = position;\n hoseObjectToSend.assetName = assetName;\n hoseObjectToSend.model = model;\n hoseObjectToSend.subModel = subModel;\n hoseObjectToSend.positionId = positionId;\n if (assetId) {\n hoseObjectToSend.stockDescription = this.phaseTwoHoseDescriptionForAsset(\n model,\n subModel,\n position,\n rightFittingAngle,\n length,\n hoseDescription\n );\n }\n hoseObjectToSend.quantity = hoseQuantity;\n await this.props.actionSaveToHoseMechanic(hoseObjectToSend);\n const { saveHoseToHoseMechanicResponse } = this.props;\n const { stockCode, uniqueCode, hoseId } = saveHoseToHoseMechanicResponse;\n if (assetId) {\n const saveHoseRecipeInDb = {\n hoseId,\n hoseUniqueCode: uniqueCode,\n positionId,\n model,\n make\n };\n await this.props.actionSaveHoseRecipe(saveHoseRecipeInDb);\n }\n showSuccessToast(\"Hose saved and sent to hose mechanic : \" + stockCode);\n return;\n }\n if (editHose && !saveHoseRecipe && buttonText !== \"Add to cart\") {\n // added for replace hose flow, on click of order hose from boa\n //\n // update hose code\n const param = this.getParams();\n const { hoseId } = param;\n hoseObjectToSend._id = hoseId;\n const { model, subModel, position, assetId } = this.props;\n const length = overAllLength ? overAllLength : hoseLength;\n if (assetId) {\n hoseObjectToSend.stockDescription = this.phaseTwoHoseDescriptionForAsset(\n model,\n subModel,\n position,\n rightFittingAngle,\n length\n );\n }\n hoseObjectToSend.quantity = hoseQuantity;\n await this.props.actionUpdateHoseOfHoseMechanic(hoseObjectToSend);\n await this.setHose(hoseId);\n showSuccessToast(\"Hose updated successfully\");\n this.setState({ isLoading: false });\n return;\n }\n if (saveHoseRecipe) {\n const param = this.getParams();\n const {\n assetId,\n position,\n assetName,\n model,\n subModel,\n positionId,\n make\n } = param;\n const length = overAllLength ? overAllLength : hoseLength;\n hoseObjectToSend.toHoseMechanic = false;\n hoseObjectToSend.assetId = assetId;\n hoseObjectToSend.position = position;\n hoseObjectToSend.assetName = assetName;\n hoseObjectToSend.model = model;\n hoseObjectToSend.subModel = subModel;\n if (assetId) {\n hoseObjectToSend.stockDescription = this.phaseTwoHoseDescriptionForAsset(\n model,\n subModel,\n position,\n rightFittingAngle,\n length,\n hoseDescription\n );\n }\n hoseObjectToSend.quantity = hoseQuantity;\n await this.props.actionSaveToHoseMechanic(hoseObjectToSend);\n const { saveHoseToHoseMechanicResponse: response } = this.props;\n const {\n stockCode,\n uniqueCode: savedUniqueCode,\n hoseId: savedHoseId\n } = response;\n const attachHoseToAssetData = {\n assetId,\n location: \"\",\n position,\n quantity: hoseQuantity,\n stockCode,\n description: hoseDescription,\n hoseId: savedHoseId,\n hoseUniqueCode: savedUniqueCode,\n positionId: positionId\n };\n\n const attachResult = await this.props.actionAttachHoseToAsset(\n attachHoseToAssetData\n );\n const saveHoseRecipeInDb = {\n hoseId,\n hoseUniqueCode: uniqueCode,\n positionId,\n model,\n make\n };\n await this.props.actionSaveHoseRecipe(saveHoseRecipeInDb);\n const { status } = attachResult;\n this.setState({ isLoading: false });\n if (status === 200) {\n showSuccessToast(\"Hose attached to asset successfully\");\n this.props.history.push(`assetDetails/${assetId}`);\n } else {\n showErrorToast(\"Something went wrong , please try again\");\n }\n\n return;\n } else {\n await this.props.actionSaveHoseToDB(hoseObjectToSend);\n const { response } = this.props;\n const { hoseId, stockCode: savedHoseStockCode } = response;\n const addToCartObject = {\n quantity: hoseQuantity,\n length: 1,\n pack: \"Each\",\n hose: true,\n stockCode: savedHoseStockCode,\n stockDescription: stockDescription,\n hoseId\n };\n // add to cart call\n await this.props.actionAddHoseToCart(addToCartObject);\n showSuccessToast(\"Hose added to cart\");\n this.setState({ isLoading: false, showModal: false });\n this.clearHoseHandler();\n }\n };\n\n clearHoseHandler = async () => {\n await this.props.actionClearHoseData();\n };\n\n phaseTwoHoseDescriptionForAsset = (\n model,\n subModel,\n position,\n rightFittingAngle,\n length,\n hoseDescription\n ) => {\n let phase2AssetToHoseDescription = \"\";\n if (model) {\n phase2AssetToHoseDescription = `${phase2AssetToHoseDescription} ${model}`;\n }\n if (subModel) {\n phase2AssetToHoseDescription = `${phase2AssetToHoseDescription} ${subModel}`;\n }\n if (position) {\n phase2AssetToHoseDescription = `${phase2AssetToHoseDescription} ${position}`;\n }\n return `${phase2AssetToHoseDescription} Angle : ${rightFittingAngle} Length : ${length} ${hoseDescription}`;\n };\n\n updateDimensions = () => {\n this.setState({ width: window.innerWidth, height: window.innerHeight });\n };\n componentDidMount = () => {\n window.addEventListener(\"resize\", this.updateDimensions);\n };\n // componentWillUnmount = () => {\n // window.removeEventListener(\"resize\", this.updateDimensions);\n // };\n\n render() {\n const { phase, width } = this.state;\n return (\n \n
\n \n To be used to test components\n\n\n
\n }\n}","import React from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport * as authReducer from \"../auth.reducer\";\nimport { Control, Errors } from \"react-redux-form\";\nimport polyglot from \"../../../i18n\";\nimport { withRouter } from \"react-router-dom\";\nimport Loader from \"../../../components/Loader\";\nimport { Form, Button, Message, Grid, Icon } from \"semantic-ui-react\";\nimport \"./resetPassword.css\";\n\nclass ResetPassword extends React.Component {\n constructor() {\n super();\n this.state = {\n loading: false,\n hidden: true,\n };\n }\n\n componentDidMount() {\n let params = this.props.match.params;\n // this.props.actionVerifyResetPasswordCode(params.code, params.email);\n this.props.setEmailToResetForm({\n email: params.email,\n password: \"\",\n confirmPassword: \"\",\n });\n }\n\n resetPassword = async (e) => {\n this.setState({ loading: true });\n\n this.comparePassword();\n let data = {\n email: this.props.forms.resetPasswordForm.email,\n password: this.props.forms.resetPasswordForm.password,\n token: this.props.match.params.code,\n confirmPassword: this.props.forms.resetPasswordForm.confirmPassword,\n };\n if (data.password !== data.confirmPassword) {\n this.setState({\n errorFlag: true,\n loading: false,\n });\n return;\n }\n if (data.password.length < 6) {\n this.setState({\n errorFlag: true,\n });\n e.preventDefault;\n return;\n }\n await this.props.actionResetPassword(data);\n this.setState({ loading: false });\n };\n\n goHome = () => {\n this.props.history.push(\"/\");\n };\n showPassword = () => {\n this.setState({ hidden: !this.state.hidden });\n };\n\n comparePassword = (val) => {\n return this.props.forms.resetPasswordForm.password !== val;\n };\n\n render() {\n let responseJSX = null;\n let loader = \"\";\n const { verified } = this.props;\n const { status, response } = this.props.response;\n\n const longEnough = (val) => {\n const passwordRegx = new RegExp(\n \"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#%&])(?=.{6,})\"\n );\n if (!passwordRegx.test(val)) {\n return true;\n }\n return false;\n };\n // if (!verified) {\n // responseJSX = \n Login\n
\n\n Login\n
\n\n \n \n \n \n \n !longEnough(val)\n length: (val) => val.length > 5,\n }}\n />\n \n\n \n \n \n \n\n Password is required,\n longEnough: (\n \n \n \n \n \n\n !this.comparePassword(val),\n }}\n />\n \n
\n );\n\n return (\n {polyglot.t(\"resetPassword.title\")}
\n(Min 6 characters)
\n\n {polyglot.t(\"createAccountPage.passwordCriteria\")}\n
\n ),\n length:Min 6 characters required
,\n }}\n />\n\n Tips on Strong Passwords : Using a strong password helps protect\n your data. Try creating a password that you will remember but\n will be hard for others to guess by incorporating a mix of upper\n and lower case letters and special characters.\"\n
\n \n \n
\n \n \n {loader}\n
\n \n {status !== 200 && formCode}\n {responseJSX}\n
\n \n \n Back to Login\n \n
\n \n Training Certificate Updated\n Successfully\n
\n );\n const delayDebounceFn = setTimeout(() => {\n setIsUpdate(false);\n props.getMyUsersData();\n setIsLoading(false);\n setImageData(null);\n setImageSrc(null);\n props.setViewTrainingCertificate(false);\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } else {\n const datesUpdated = await onUpdateCertificate();\n if (datesUpdated) {\n showSuccessToast(\n \n Training Certificate Updated\n Successfully\n
\n );\n const delayDebounceFn = setTimeout(() => {\n setIsUpdate(false);\n props.getMyUsersData();\n setIsLoading(false);\n setImageData(null);\n setImageSrc(null);\n props.setViewTrainingCertificate(false);\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }\n }\n };\n\n const onDeleteTrainingCertificate = async () => {\n setIsLoading(true);\n try {\n const logo = await apiDeleteTrainingCertificate(props.userData.id);\n if (logo) {\n showSuccessToast(\n \n Training Certificate Deleted\n Successfully\n
\n );\n props.getMyUsersData();\n setIsLoading(false);\n setImageData(null);\n setImageSrc(null);\n setDeleteFileOpen(false);\n props.setViewTrainingCertificate(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const handleDownloadFile = (filePath) => {\n if (!filePath) {\n showErrorToast(\"Save asset first before downloading this file\");\n return false;\n }\n try {\n const parts = filePath.split(\"/\");\n const fileName = parts[parts.length - 1];\n fetch(filePath)\n .then((response) => response.blob())\n .then((blob) => {\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = fileName;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n });\n } catch {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const handleDownloadLocal = (file) => {\n // Create a URL for the file\n const url = URL.createObjectURL(file);\n\n // Create a temporary anchor element\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = file.name; // Set the file name for download\n\n // Append the anchor to the body\n document.body.appendChild(a);\n\n // Programmatically click the anchor to trigger the download\n a.click();\n\n // Remove the anchor from the document\n document.body.removeChild(a);\n\n // Revoke the object URL to free up resources\n URL.revokeObjectURL(url);\n };\n\n useEffect(() => {\n if (props.userData) {\n setTrainingDate(\n props.userData?.trainDate ? new Date(props.userData?.trainDate) : null\n );\n setRetrainingDate(\n props.userData?.reTrainDate\n ? new Date(props.userData?.reTrainDate)\n : null\n );\n }\n }, [props.userData]);\n\n return (\n \n \n {props.userData?.rs23TrainingCertificate?.id && !isUpdate\n ? \"VIEW TRAINING CERTIFICATE\"\n : isUpdate\n ? \"UPDATE TRAINING CERTIFICATE\"\n : \"UPLOAD TRAINING CERTIFICATE\"}\n \n
\n \n {isLoading ? (\n
\n \n Are you sure you want
to delete training certificate?\n
\n
\n );\n };\n\n const getProfileData = async () => {\n updateState({ loading: true });\n await actionGetProfileData();\n const { response } = auth;\n updateState({ loading: false });\n };\n\n const getCurrentStockLocation = async () => {\n const currentStockLocation = await apiGetUserCurrentStockLocation();\n if (currentStockLocation.id)\n window.localStorage.setItem(\"boahubLocationId\", currentStockLocation.id);\n window.localStorage.setItem(\n \"stockLocationName\",\n currentStockLocation.stockLocationName\n );\n };\n\n const updateState = (data) => {\n setState((prevState) => ({ ...prevState, ...data }));\n };\n\n const onChangeMobileHandler = (event) => {\n updateState({ mobileErrorFlag: false });\n let value = event.target.value;\n if (_.isEmpty(value)) {\n updateState({\n mobileErrorFlag: true,\n mobileErrorMessage: polyglot.t(\"createAccountPage.mobileRequried\"),\n });\n }\n if ((value.length && value.length < 6) || value.length > 13) {\n updateState({\n mobileErrorFlag: true,\n mobileErrorMessage: polyglot.t(\"createAccountPage.validMobileNumber\"),\n });\n }\n const formValue = {\n ...forms.profileInfoForm,\n mobileNumber: value,\n };\n actionSetProfileInfoForm(formValue);\n };\n\n const onChangeOfficePhoneHandler = (event) => {\n updateState({ officeNumberErrorFlag: false });\n let value = event.target.value;\n if ((value.length && value.length < 6) || value.length > 12) {\n updateState({\n officeNumberErrorFlag: true,\n officeNumberErrorMessage: polyglot.t(\n \"createAccountPage.validOfficePhoneNumber\"\n ),\n });\n }\n const formValue = {\n ...forms.profileInfoForm,\n officePhoneNumber: value,\n };\n actionSetProfileInfoForm(formValue);\n };\n\n const goTochangePassword = (event) => {\n event.preventDefault();\n history.push(\"/profile/changePassword\");\n };\n\n const goBack = (e) => {\n e.preventDefault();\n history.push(\"/home\");\n };\n\n const resendVerificationEmail = async () => {\n updateState({ loading: true, loadingText: \"Sending mail\" });\n await actionResendVerifyNewEmailLink();\n updateState({ loading: false });\n const { response } = auth;\n if (response.status !== 200) {\n return showErrorToast(\"Something went wrong please try again\");\n }\n\n return showSuccessToast(\n \n
\n );\n };\n\n const countryChangeHandler = (e, data) => {\n updateState({ countryErrorFlag: false });\n const { value } = data;\n if (_.isEmpty(value)) {\n updateState({ countryErrorFlag: true });\n }\n\n const formValue = {\n ...forms.profileInfoForm,\n countryId: value,\n };\n actionSetProfileInfoForm(formValue);\n };\n\n const stockLocationChangeHandler = (e, data) => {\n const { value } = data;\n\n const formValue = {\n ...forms.profileInfoForm,\n boahubLocationId: value,\n };\n actionSetProfileInfoForm(formValue);\n };\n\n const getUserInfo = async () => {\n await actionGetProfileData();\n };\n\n useEffect(() => {\n getStockLocationsData();\n getUserInfo();\n }, []);\n\n const { user, accountInfo } = auth;\n\n const {\n id,\n firstName = \"\",\n lastName = \"\",\n mobileNumber,\n officeNumber: officePhoneNumber,\n newEmail,\n verifiedNewMail,\n email,\n userRole,\n customerType,\n country,\n boahubLocationId,\n loading = true,\n } = user;\n\n // const {\n // errorFlag,\n // mobileErrorFlag,\n // mobileErrorMessage,\n // officeNumberErrorMessage,\n // officeNumberErrorFlag,\n // loadingText,\n // countryErrorFlag,\n // initialLoad,\n // } = state;\n\n const firstNameForm = (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n\n return (\n \n \n \n \n {!editProfileFlag && (\n \n \n \n {editProfileFlag && firstNameForm}\n \n \n \n {editProfileFlag && lastNameForm}\n \n \n )}\n \n\n \n \n {!editProfileFlag && \n\n \n \n {!editProfileFlag && \n\n \n \n {!editProfileFlag && \n\n \n \n {!editProfileFlag && \n\n \n \n {!editProfileFlag ? \n\n {newEmail && !verifiedNewMail && (\n \n \n \n \n )}\n \n {hiddenForm}\n \n \n {userData ? (\n {\n setViewTrainingCertificate(true);\n }}\n >\n
\n ) : null}\n \n \n
\n {viewTrainingCertificate && (\n Personal Information
\n\n Change password \n
\n \n \n
\n )}\n {editProfileFlag && (\n {firstName + \" \" + lastName}
\n{email}
}\n {editProfileFlag && emailForm}\n{officePhoneNumber}
}\n {editProfileFlag && officeNumberForm}\n{mobileNumber}
}\n {editProfileFlag && mobileForm}\n{country && country.name}
}\n {editProfileFlag && countryForm}\n{stockLocationName}
: stockLocationForm}\n\n Email{\" \"}\n \n {newEmail}\n {\" \"}\n is not verified yet,{\" \"}\n click \n to resend verification email.\n
\n \n Unless you verify your new email account, you will continue\n to use the old email.\n
\n\n \n Edit\n \n \n
\n )}\n {editProfileFlag && (\n \n \n {!isPrimary && (\n makePrimary(address.id)}>\n {\" \"}\n Make default{\" \"}\n \n )}\n deleteAddressHandler(index, salesforceId)}\n >\n {\" \"}\n Delete{\" \"}\n \n
\n );\n\n const addJSX = (\n \n {isPrimary &&
\n );\n};\n\nAddressDetails.propTypes = {\n index: PropTypes.number,\n options: PropTypes.bool,\n makePrimary: PropTypes.func,\n address: PropTypes.object,\n deleteAddressHandler: PropTypes.func,\n addHandler: PropTypes.func,\n cancelHandler: PropTypes.func,\n editContactInfo: PropTypes.func,\n};\n\nexport default AddressDetails;\n","import React from \"react\";\nimport { Header, Modal } from \"semantic-ui-react\";\nimport \"./creditInfo.css\";\n\nconst CreditPopup = () => {\n return (\n \n
\n \n {street} {street2}\n
\n {suburb && {suburb}
}\n \n {city + \", \"} {city !== state ? state : city}\n
\n {country}
\n {postalCode}
\n {options && optionsJXS}
\n {addHandler && addJSX}\n \n A trade credit account with BOA allows you to order products on preferential prices and pay later.\n The payment terms set, will be 7 days or 20th of the month following invoice.\n
\n\n The process is extremely simple, following the below 3 (is this correct?) steps.\n
\n- \n
- \n Complete Company name, your name, address, email, phones numbers and trade references.\n \n
- \n You will receive a confirmation document to accept the BOA terms of trade and sign electronically.\n \n
- \n BOA finance will complete internal processors, set a credit limit and liven your credit account within 60 minutes. (Between 9am and 4pm weekdays NZT).\n \n
\n You will receive a notification that you are set up and ready to buy.\n
\n\n{parent && parent.name}
\n \n );\n\n const billingAddress = (\n \n \n{creditLimit}
}\n {!creditLimit && !cafSubmitted && (\n \n )}\n {cafSubmitted && !cafStatus && (\n \n
\n )}\n \n );\n\n const deliveryAddressDetail = (\n \n \n \n Add / Delete\n \n
\n );\n\n const manageMarginPrice = (\n \n {editMargin ? (\n
\n );\n\n return (\n \n this.setState({ editMargin: false })}\n color=\"red\"\n />\n
\n ) : (\n \n {priceMargin ? (\n
\n )}\n {priceMargin} %
\n ) : (\n Margin not configured yet \n )}\n\n \n {show && (\n \n \n {companyName}\n \n\n \n {billingAddress}\n \n\n {/* \n {BOACredit}\n \n \n {showFacilities ? (\n */}\n \n )}\n \n {deliveryAddressDetail}\n \n \n \n {deliverAddressComponent}\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n auth: state.auth,\n forms: state.forms,\n user: state.auth.user,\n editAccountFlag: state.auth.editAccountFlag,\n };\n};\nconst mapDispatchToProps = (dispatch) =>\n bindActionCreators(authReducer, dispatch);\n\nexport default withRouter(\n connect(mapStateToProps, mapDispatchToProps)(AccountDetails)\n);\n","import React from \"react\";\nimport MetaData from \"../../components/MetaData\";\nimport { Grid } from \"semantic-ui-react\";\n\nimport ProfileDetails from \"../../components/ProfileDetails\";\nimport AccountDetails from \"../../components/AccountDetails\";\n\nimport \"./profile.css\";\n\nconst Profile = () => {\n return (\n Account information
\n\n \n
\n ) : null}\n \n \n \n \n \n \n \n
\n );\n};\n\nexport default Profile;\n","import React from \"react\";\nimport DatePicker from \"react-datepicker\";\n//import \"react-datepicker/dist/react-datepicker-cssmodules.css\";\nimport \"react-datepicker/dist/react-datepicker.css\";\n\nconst Datepicker = ({ givenDate, minDate = null, maxDate = null, setDate }) => {\n const handleChange = date => {\n setDate(date);\n };\n\n return (\n \n // \n //
\n // );\n\n const postalAddress = (\n {polyglot.t(\"cafForm.title.information\")}
\n{polyglot.t(\"cafForm.title.departmentContacts\")}
\n{polyglot.t(\"cafForm.title.references\")}
\n\n Your application is successfully submitted.\n
{\" \"}\n \n \n
\n \n
\n );\n }\n this.clearAddress();\n await this.getAddressFromServer();\n this.setState({ loading: false });\n }\n };\n\n closeConfirmation = async (item) => {\n this.setState({\n confirmDelete: false,\n itemToDelete: null,\n });\n };\n\n deleteAddressHandler = async (id, sfId) => {\n const { deliveryAddress } = this.props.deliveryAddress;\n const allAddress = [...deliveryAddress];\n\n const addressToBeDeleted = allAddress[id];\n const { isPrimary } = addressToBeDeleted;\n if (isPrimary) {\n showErrorToast(\n \"Can not delete a default address. Change the Default and then delete the address.\"\n );\n return;\n }\n\n this.setState({\n confirmDelete: true,\n itemToDelete: addressToBeDeleted.id,\n });\n };\n\n deleteAddress = async (id) => {\n this.setState({ loading: true });\n const { itemToDelete } = this.state;\n this.closeConfirmation();\n const result = await this.props.actionDeleteDeliveryAddress(itemToDelete);\n const { status, response } = result;\n\n if (response && response.data.statusCode >= 400)\n showErrorToast(response.data.description);\n else if (!(status >= 200 && status <= 299)) {\n showErrorToast(\"Something went wrong, please try again\");\n } else {\n showSuccessToast(\n \n
\n );\n }\n await this.getAddressFromServer();\n this.setState({ loading: false });\n };\n\n makePrimaryAddressHandler = async (address) => {\n // const addressToSend = { ...address };\n // addressToSend.isPrimary = true;\n this.setState({ loading: true });\n await this.props.actionUpdateDeliveryAddress(address);\n this.getAddressFromServer();\n };\n\n updateState = (state) => {\n this.setState(state);\n };\n\n getDeliveryAddress = (deliveryAddress) => {\n if (window._.isEmpty(deliveryAddress)) {\n return null;\n }\n\n const { user } = this.props.auth;\n\n const addressComponent = deliveryAddress.map((value, key) => {\n let customClass = \"\";\n customClass = value.isPrimary\n ? \"address-column primary\"\n : \"address-column\";\n return (\n \n \n
\n );\n\n const hiddenForm = (\n \n \n \n \n \n \n \n
\n );\n\n return (\n \n
\n \n {!this.state.address && (\n {\n this.onAddressSelection(place);\n }}\n types={[\"geocode\"]}\n componentRestrictions={{\n country: countryList,\n }}\n />\n )}\n
\n {this.state.address && (\n \n \n \n \n \n \n !longEnough(val),\n length: (val) => val.length > 5,\n }}\n />\n \n \n \n \n \n Password is required,\n longEnough: (\n \n \n \n \n \n\n !comparePassword(val) }}\n />\n \n
\n );\n\n return (\n {polyglot.t(\"changePassword.title\")}
\n(Min 6 characters)
\n{polyglot.t(\"createAccountPage.passwordCriteria2\")}
\n ),\n // longEnough: (\n //\n // {polyglot.t(\"createAccountPage.passwordCriteria\")}\n //
\n // ),\n length:Min 6 characters required
,\n }}\n />\n\n\n Tips on Strong Passwords Using a strong password helps protect\n your data. Try creating a password that you will remember but\n will be hard for others to guess by incorporating a mix of upper\n and lower case letters and special characters.\"\n
\n \n this.resetPassword}\n >\n {polyglot.t(\"changePassword.submit\")}\n \n
\n \n \n {loader}\n
\n \n {status !== 200 && formCode}\n {responseJSX}\n
\n \n \n Back to profile\n \n
\n {polyglot.t(\"verifyNewEmailPage.linkNotFound\")}
\n );\n } else if (status === 400) {\n this.props.history(\"/\");\n } else if (status === 406) {\n responseJSX = (\n \n Your Email is verified. Try Login In.\n
\n );\n } else if (status === 200) {\n const { customerType } = data;\n text = Email Verified;\n responseJSX = (\n \n
\n );\n }\n }\n if (this.state.loading) {\n loader = \n
\n {polyglot.t(\"verifyNewEmailPage.enterprise.success1\")}
\n\n \n
\n );\n\n return (\n - \n
\n {\" \"}\n Stock Description : {productName}\n {/* {options && (\n \n {\" \"}\n Edit{\" \"}\n \n )} */}\n
\n )}\n {isUpdate && updateDescriptionJSX}\n \n \n {countryCode} ${(Math.round(price * 100) / 100).toFixed(2)}\n \n
\n );\n\n const sub_total_price = (qty, price, countryCode) => {\n return (\n {type}
\n\n {price != null && price === 0 && (\n\n {\"CALL BOA\"}\n
\n )}\n {price != null && price > 0 && (\n <>\n\n {\"(excl GST)\"}\n
\n \n )}\n\n
\n );\n };\n\n const product_image = (image) => (\n \n {image && (\n SUB TOTAL
\n {price > 0 ? (\n <>\n\n {countryCode} ${(Math.round(qty * price * 100) / 100).toFixed(2)}\n
\n{\"BUY\"}
\n \n ) : (\n\n CALL BOA\n
\n )}\n\n {!options && (\n
\n \n );\n };\n\n const uom_detail = (item, details, userCart) => {\n const { pack = \"\" } = details;\n return (\n \n \n {quantityMessage}
\n {quantity}\n
\n \n
\n )}\n \n {options && (\n
\n \n );\n };\n\n const modalJSX = (\n \n \n
\n )}\n \n {item.policyName && (\n \n )}\n\n \n {item.discount > 0 && (\n \n )}\n \n
\n\n \n {item.retailPrice !== null &&\n show_price(\"RRP\", item.countryCode, item.retailPrice)}\n
\n \n\n {item.buyPrice !== null &&\n show_price(\"BUY\", item.countryCode, item.buyPrice)}\n
\n \n\n {!cartProducts.length && (\n \n \n Click here to add products\n \n
\n }\n />\n )}\n\n - \n {cartProducts.length > 0 &&\n _.map(cartProducts, (item, key) => {\n return (\n
\n {cart.length > 0 && (\n
\n );\n};\nTotalPrice.propTypes = {\n cart: PropTypes.array,\n cartCount: PropTypes.object,\n account: PropTypes.object,\n overallDiscount: PropTypes.number,\n showPrice: PropTypes.props,\n};\n\nexport default TotalPrice;\n","import React, { useState, useEffect } from \"react\";\nimport {\n Button,\n Icon,\n Grid,\n Divider,\n Confirm,\n Modal,\n Header,\n Checkbox,\n} from \"semantic-ui-react\";\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport MetaData from \"../../components/MetaData\";\nimport * as cartReducer from \"./cart.reducer\";\nimport * as userCartReducer from \"./userCart.reducer\";\nimport * as authReducer from \"../Auth/auth.reducer\";\nimport * as orderConfirmationReducer from \"../OrderConfirmation/orderConfirmation.reducer\";\nimport _ from \"lodash\";\nimport \"./cart.css\";\nimport CartProducts from \"../../components/CartProducts\";\nimport { showErrorToast, showSuccessToast } from \"../../utils/toastUtils\";\nimport TotalPrice from \"../../components/TotalPrice\";\nimport Loader from \"../../components/Loader\";\nimport QuickSearch from \"../../components/QuickSearch\";\nimport UserRoleCheck from \"../../components/UserRoleCheck\";\nimport { apiGetProductDetails } from \"../HoseMaker/hoseMaker.api\";\nimport { apiGetUserCurrentStockLocationForChecking } from \"./cart.api\";\n\nfunction Cart(props) {\n const [state, setState] = useState({\n initialLoad: true,\n updatingQty: false,\n isLoading: true,\n updatingStockCode: \"\",\n confirmModal: false,\n isSearching: false,\n zeroPriceModal: false,\n stockCode: null,\n });\n const [hasError, setHasError] = useState(false);\n const [noItemsSelected, setNoItemsSelected] = useState(false);\n const [hasLessQuantityThanRoll, setHasLessQuantityThanRoll] = useState(false);\n const [itemWithLessThanRoll, setItemWithLessThanRoll] = useState([]);\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [hasInfo, setHasInfo] = useState(false);\n const [newStockLocationName, setNewStockLocationName] = useState(\"\");\n\n const openNode = [];\n\n useEffect(() => {\n if (props.userCart.isError) {\n setHasError(true);\n setErrorMessage(props.userCart?.error);\n }\n }, [props.userCart.isError]);\n\n useEffect(() => {\n loadCart();\n }, []);\n\n useEffect(() => {\n const selectedItems = props.cart.filter((item) => item.isSelected === true);\n localStorage.setItem(\"selectedCartItems\", JSON.stringify(selectedItems));\n }, [props]);\n\n const loadCart = async () => {\n await props.actionLoadCart();\n // await props.actionLoadCartObj();\n // await props.actionGetOverallDiscount();\n setState({ ...state, initialLoad: false, isLoading: false });\n };\n\n const getAccountDetails = async () => {\n await props.actionGetProfileData();\n await props.actionSetDeliveryDetails();\n };\n\n const setProductIsSelected = async (itemToSelect, isSelected) => {\n const { cart } = props;\n const { stockCode, userCart } = itemToSelect;\n\n setState({\n ...state,\n isLoading: true,\n updatingStockCode: stockCode,\n updatingQty: true,\n });\n\n let newCart = cart.map((item, i) => {\n if (\n item.barcode === itemToSelect.stockCode &&\n item.refId === itemToSelect.refId\n ) {\n item.isSelected = isSelected;\n }\n return item;\n });\n\n userCart.userCartItems = newCart;\n\n await props.actionUpdateItems(newCart);\n\n setState({\n ...state,\n isLoading: false,\n updatingStockCode: \"\",\n updatingQty: false,\n });\n };\n\n const setSelectAllProducts = async (selectAll) => {\n const { cart } = props;\n\n setState({\n ...state,\n isLoading: true,\n updatingStockCode: stockCode,\n updatingQty: true,\n });\n\n let newCart = cart.map((item, i) => {\n item.isSelected = selectAll;\n return item;\n });\n userCart.userCartItems = newCart;\n\n await props.actionUpdateItems(newCart);\n\n setState({\n ...state,\n isLoading: false,\n updatingStockCode: \"\",\n updatingQty: false,\n });\n };\n\n const patchQuantity = async (itemToAdd, isManual) => {\n const { stockCode, userCart } = itemToAdd;\n let action = null;\n let difference = 0;\n\n setState({\n ...state,\n isLoading: true,\n updatingStockCode: stockCode,\n updatingQty: true,\n });\n\n const newCart = getNewCartObject(itemToAdd);\n const updatedItem = newCart.updatedCart[0];\n userCart.updatedCart = newCart.updatedCart[0];\n userCart.userCartItems = newCart.userCartItems;\n\n if (itemToAdd.quantity > updatedItem.quantity) {\n difference = itemToAdd.quantity - updatedItem.quantity;\n action = \"add\";\n }\n if (itemToAdd.quantity < updatedItem.quantity) {\n difference = updatedItem.quantity - itemToAdd.quantity;\n action = \"minus\";\n }\n if (itemToAdd.quantity === 0) {\n action = \"delete\";\n }\n\n if (!isManual && difference !== 0) {\n userCart.updatedCart.quantity = difference;\n } else {\n userCart.updatedCart.quantity = itemToAdd.quantity;\n action = null;\n }\n\n await props.actionUpdateItems(newCart.userCartItems);\n await props.actionPatchCart(userCart, action);\n await props.actionLoadCart();\n\n setState({\n ...state,\n isLoading: false,\n updatingStockCode: \"\",\n updatingQty: false,\n });\n };\n\n const updateQuantity = async () => {\n await props.actionUpdateCart(userCartData);\n };\n\n const getNewCartObject = (itemToUpdate) => {\n const { cart } = props;\n let filteredData = cart;\n\n const isPresent = _.filter(cart, (item) => {\n if (item.refId === itemToUpdate.refId)\n return item.barcode === itemToUpdate.stockCode;\n });\n\n if (!_.isEmpty(isPresent)) {\n const existingProduct = _.head(isPresent);\n filteredData = _.filter(cart, (item) => {\n if (item.barcode === itemToUpdate.stockCode)\n return item.refId !== itemToUpdate.refId;\n return item.barcode !== itemToUpdate.stockCode;\n });\n const { quantity = 1 } = itemToUpdate;\n itemToUpdate = {\n ...existingProduct,\n stockCode: existingProduct.stockCode,\n quantity: quantity,\n };\n }\n const newCart = [...filteredData, itemToUpdate];\n const sortedCart = _.sortBy(newCart, [\"productId\", \"refId\"]);\n const cartData = { updatedCart: isPresent, userCartItems: sortedCart };\n return cartData;\n };\n\n const updateLength = async (itemToAdd) => {\n const { stockCode } = itemToAdd;\n setState({ ...state, isLoading: true, updatingStockCode: stockCode });\n await props.actionUpdateLength(itemToAdd);\n setState({ ...state, isLoading: false, updatingStockCode: \"\" });\n };\n\n const updateDescription = (itemToUpdate) => {\n props.actionUpdateDescription(itemToUpdate);\n };\n\n const removeFromCart = (payload, userCart) => {\n const filteredData = _.filter(userCart.userCartItems, (item) => {\n if (item.barcode === payload.barcode) return item.refId !== payload.refId;\n return item.barcode !== payload.barcode;\n });\n\n const newState = [...filteredData];\n userCart.userCartItems = newState;\n\n props.actionRemoveFromCart(userCart);\n showSuccessToast(\n \n {isLoading && \n {userCountryCode === \"US\" ? (\n \n \n \n \n ) : (\n \n \n \n \n )}\n {userCountryCode === \"US\" ? null : (\n <>\n \n \n \n \n \n \n {\" \"}\n \n \n )}\n \n {/* {totalSave > 0 && (\n
\n )}\n \n Sub total (tax excl.):{\" \"}\n
\n Sub total ( {cartCount} ):{\" \"}\n
\n TOTAL ( {TAX}% GST) :{\" \"}\n
\n {zeroPrice === false ? (\n <>\n {\" \"}\n {currencyValue} ${tax_total.toFixed(2)}\n \n ) : (\n <>{\"CALL BOA\"}\n )}\n
\n \n\n Total :{\" \"}\n
\n Total savings :\n \n {\" \"}\n {currencyValue} {totalSave.toFixed(2)}{\" \"}\n \n
\n )} */}\n\n {\" \"}\n {`Removed ${payload.stockCode} from the Cart`}\n
\n );\n };\n\n const clearCart = () => {\n props.actionClearAll();\n setState({ ...state, confirmModal: false });\n const successToast = (\n \n Cart is cleared{\" \"}\n
\n );\n showSuccessToast(successToast);\n };\n\n const triggerClearCart = () => {\n setState({ ...state, confirmModal: true });\n };\n\n const closeConfirmation = () => {\n setState({ ...state, confirmModal: false });\n };\n\n const goToConfirmOrder = async () => {\n const selectedItems = props.cart.filter((item) => item.isSelected === true);\n const noItemsSelectedData = props.cart.every(\n (obj) => obj.isSelected === false\n );\n if (noItemsSelectedData) {\n setNoItemsSelected(true);\n return false;\n }\n const itemsLessThanRoll = selectedItems.filter(\n (obj) => obj.productUom === 8 && obj.quantity < obj.boahubFullCarton\n );\n if (itemsLessThanRoll?.length > 0) {\n setItemWithLessThanRoll(itemsLessThanRoll);\n setHasLessQuantityThanRoll(true);\n return false;\n }\n\n onConfirmOrder();\n };\n\n const onConfirmOrder = async () => {\n if (getCartCount) {\n const stockLocationId = localStorage.getItem(\"boahubLocationId\");\n const currentStockLocationId = Number(stockLocationId);\n const currentUserInfo = await apiGetUserCurrentStockLocationForChecking();\n const isPartial = cart.some((item) => item.isSelected === false);\n localStorage.setItem(\"isPartial\", isPartial);\n if (currentUserInfo) {\n if (currentStockLocationId !== currentUserInfo.id) {\n setHasInfo(true);\n } else {\n props.history.push(\"/orderConfirmation\");\n }\n } else {\n props.history.push(\"/orderConfirmation\");\n }\n }\n };\n\n const getCartCount = () => {\n let quantity = 0;\n _.forEach(props.cart, (item) => {\n const { pack } = item;\n if (pack === \"Metre\") {\n quantity += 1;\n } else {\n quantity += Number(item.quantity);\n }\n });\n return Quantity {quantity};\n };\n\n const goBack = (e) => {\n e.preventDefault();\n props.history.goBack();\n };\n\n const handleClose = () => {\n setState({ ...state, zeroPriceModal: false });\n };\n\n const handleAddToCart = async (product) => {\n const { cart, userInfo } = props;\n const {\n barcode: stockCode,\n name: stockDescription,\n pack,\n listPrice: price,\n uom,\n currency,\n id,\n taxId,\n image128,\n buyPrice,\n retailPrice,\n countryCode,\n boahubFullCarton,\n } = product;\n\n product.stockImage1 = product.image128;\n product.stockCode = product.barcode;\n\n setState({\n ...state,\n zeroPriceModal: false,\n initialLoad: true,\n isLoading: true,\n });\n\n var currentDate = new Date();\n var utcDate = currentDate.toISOString();\n\n let addToCarData = {\n stockCode,\n quantity: 1,\n length: 1,\n pack: uom && uom.name,\n stockDescription,\n price,\n currencyId: currency && currency.id,\n id,\n email: userInfo && userInfo.email,\n taxId,\n productUom: uom && uom.id,\n image128,\n buyPrice,\n retailPrice,\n countryCode,\n refId: null,\n boahubFullCarton: boahubFullCarton,\n createdDateTime: utcDate,\n isSelected: true,\n };\n\n props.actionAddToCart(addToCarData);\n\n const isPresent = _.filter(cart, (item) => {\n return stockCode === item.barcode;\n });\n\n _.isEmpty(isPresent) &&\n showSuccessToast(\n \n {\" \"}\n {`Added product ${stockCode} to cart.`}\n
\n );\n\n !_.isEmpty(isPresent) &&\n showSuccessToast(\n \n {\" \"}\n {`Product ${stockCode} is already in your cart - please check the quantity.`}\n
\n );\n\n setState({ ...state, initialLoad: false, isLoading: false });\n };\n\n const { cart, userCart, userInfo, accountInfo, overallDiscount } = props;\n const { account = {}, showPriceToUser } = userInfo;\n const { showPrice = false } = account;\n\n const { discount = 0 } = overallDiscount;\n const {\n isLoading,\n updatingStockCode,\n initialLoad,\n updatingQty,\n zeroPriceModal,\n stockCode,\n } = state;\n const { userRole } = userInfo;\n\n const action_buttons = (\n \n \n {cart.length > 0 && (\n \n )}\n \n );\n\n const order_details = (\n \n {cart.length > 0 && (\n \n \n \n {account.showPrice && showPriceToUser ? (\n \n Confirm order\n \n \n \n
\n )}\n \n );\n\n const cart_products = (\n Call BOA on 0800 20 20 20 for this item
\n\n \n \n \n \n {\n setNoItemsSelected(false);\n }}\n >\n OK\n \n \n \n \n \n \n \n {\n setHasLessQuantityThanRoll(false);\n }}\n >\n Back\n \n {\n onConfirmOrder();\n }}\n >\n Continue\n \n \n \n \n \n \n \n {\n setHasError(false);\n props.actionLoadCart();\n }}\n >\n OK\n \n \n \n \n \n \n \n {\n props.history.push(\"/orderConfirmation\");\n }}\n >\n OK\n \n \n \n \n
\n\n Loading,please wait \n )}\n {updatingQty && (\n Updating,please wait \n )}\n {!initialLoad && (\n \n \n \n {action_buttons} \n \n \n \n \n \n {order_details} \n \n \n \n item.isSelected === true)}\n label={\n cart.some((item) => item.isSelected === true)\n ? \"Unselect all\"\n : \"Select all\"\n }\n onChange={() =>\n setSelectAllProducts(\n cart.some((item) => item.isSelected === true) ? false : true\n )\n }\n />\n
\n \n \n
\n Select items you want to order
\n\n
\n \n Quantity of{\" \"}\n {itemWithLessThanRoll.map((item, index) => (\n <>\n {item.barcode}\n {index !== itemWithLessThanRoll.length - 1 && \", \"}\n \n ))}{\" \"}\n is less than a full roll.\n
\n\n
\n Please adjust the quantity if you would like a full roll.
\n\n
\n Error
\n\n
\n {errorMessage}
\n\n
\n Info
\n\n
\n \n The stock location of your user has been changed. This order will\n be placed to {localStorage.getItem(\"stockLocationName\")}\n
\n\n
\n\n \n \n \n New Group \n \n \n \n \n \n \n \n \n \n
\n )\n }\n}\n\n\nconst reducer = { ...chatReducer };\n\n\nconst mapStateToProps = state => {\n return {\n chatGroups: state.chatGroups,\n response: state.chatGroups.response,\n forms: state.forms\n\n\n };\n};\n\nconst mapDispatchToProps = dispatch =>\n bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(AddGroupModal)\n);","import React from 'react';\nimport { Modal, Form, Header, Image, Checkbox, Button, Input, Icon, List, Message } from 'semantic-ui-react'\n\nclass FilterModal extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showModal: false,\n }\n }\n closeModal = () => {\n this.setState({ showModal: false })\n }\n openModal = () => {\n this.setState({ showModal:true })\n }\n render() {\n const {\n showModal,\n } = this.state\n return (\n \n
\n \n \n \n
\n \n
\n Upload Group Image
\nUpload valid image. Only PNG and JPEG are allowed.
\n\n
\n \n \n \n \n \n \n \n\n\n \n
\n \n {_.map(selectedUsers, users => {\n return
\n - \n
\n
\n \n PV
\n {users.name}
\n \n \n {/* */}\n \n Filter By Role \n \n \n \n \n \n \n \n \n \n
\n )\n }\n}\nexport default FilterModal;","import React from 'react';\nimport { Modal, Button,} from 'semantic-ui-react'\n\nclass DeleteChatModal extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showModal: false,\n isLoading:false\n }\n }\n closeModal = () => {\n this.setState({ showModal: false })\n }\n openModal = () => {\n this.setState({ showModal:true })\n }\n\n handleDelete = () => {\n this.setState({isLoading:true})\n this.props.onDeleteChat();\n this.setState({isLoading:false})\n this.closeModal();\n }\n render() {\n const {\n showModal,\n isLoading\n } = this.state\n return (\n \n
\n - \n
Coming Soon
\n {/*\n
\n General Manager
\n \n
\n \n
\n Company Admin
\n \n
\n \n
\n Area Manager
\n \n
\n \n
\n Coustomer Accountant
\n \n
\n \n
\n BOA Admin
\n \n
\n \n
\n Hose Champion
\n \n
\n \n \n Delete group \n \n \n \n \n \n \n \n \n \n \n \n
\n )\n }\n}\nexport default DeleteChatModal;","import React, {PureComponent} from \"react\";\n\nexport default class WhatsappIcon extends PureComponent {\n render = () => {\n return (\n \n );\n }\n}","import React, {PureComponent} from \"react\";\n\nexport default class ChatIcon extends PureComponent {\n render = () => {\n return (\n \n );\n }\n}","import React, { Component, PureComponent } from \"react\";\n//import styles from \"./MessageBubble.module.css\";\nimport PropTypes from \"prop-types\";\nimport { Loader, Modal, Icon, List, Image } from \"semantic-ui-react\";\nimport WhatsappIcon from \"./WhatsappIcon\";\nimport ChatIcon from \"./ChatIcon\";\nimport '../../containers/Chat/chat.css';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport * as chatReducer from '../../containers/Chat/chat.reducer';\nimport ReactPlayer from \"react-player\";\nimport FileViewer from 'react-file-viewer';\nimport { CustomErrorComponent } from 'custom-error';\n\n\nclass MessageBubble extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n hasMedia: this.props.message.type === \"media\",\n mediaDownloadFailed: false,\n mediaUrl: null\n };\n }\n\n componentDidMount = async () => {\n console.log(this.props.message)\n\n this.setState({\n ...this.state,\n type: (await this.props.message.getParticipant()).type\n });\n if (this.state.hasMedia) {\n this.props.message.media\n .getContentTemporaryUrl()\n .then((url) => {\n this.setState({ mediaUrl: url });\n })\n .catch((e) => this.setState({ mediaDownloadFailed: true }));\n }\n document\n .getElementById(this.props.message.sid)\n .scrollIntoView({ behavior: \"smooth\" });\n //this.props.getConversationDetails(this.props.message.sid)\n console.log(\"Mime :\" + this.props.message\n // && this.props.message.state.media.state.contentType \n )\n\n };\n\n componentDidUpdate(prevProps, prevState, snapshot) {\n \n\n document\n .getElementById(this.props.message.sid)\n .scrollIntoView({ behavior: \"smooth\" });\n }\n\n render = () => {\n\n const { conversationDetails } = this.props;\n\n const m = this.props.message;\n\n\n const authorName = conversationDetails && conversationDetails.participantsDetails.map(author => {\n if (m.author === author.email) {\n return author.firstName, author.lastName\n\n\n }\n })\n\n\n const type = this.state.type;\n\n if (this.state.hasMedia) {\n //console.log(\"Message is media message\");\n // log media properties\n //console.log(\"Media properties\", m.media);\n }\n //console.log(m);\n return (\n\n \n
\n Are you sure you want to Remove this group?
\n- \n\n {m.state.timestamp.toLocaleTimeString() !== m.state.timestamp.toLocaleTimeString() ?
\n \n {m.state.timestamp.toLocaleTimeString()}\n \n
\n \n
\n \n\n {author.firstName.charAt(0)}{author.lastName.charAt(0)}\n {/* */}\n
\n \n
\n
\n \n\n {author.firstName} {author.lastName}\n
\n\n\n\n\n
\n {this.state.hasMedia && (\n
\n {m.body}
\n \n {m.state.timestamp.toLocaleTimeString(navigator.language, { hour: '2-digit', minute: '2-digit' })}\n\n\n \n\n\n\n
\n
\n \n
\n {this.state.hasMedia && (\n
\n {m.body}\n\n\n\n
\n \n {m.state.timestamp.toLocaleTimeString(navigator.language, { hour: '2-digit', minute: '2-digit' })}\n \n\n \n\n \n\n {this.props.message.media && this.props.message.media.contentType.slice(0, 2) === 'im' ?\n 
*/}\n\n
\n\n \n\n \n
\n : (this.props.message.media && this.props.message.media.contentType.slice(0, 2) === 'vi' || 'au' ? \n
Documents\n //
:null)\n \n \n \n )}\n {/* \n
*/}\n {/* \n
\n \n
\n Lorem ipsum is placeholder text commonly used in the graphic.
\n 8:40 AM, Today\n\n
: \n \n (this.props.message.media && this.props.message.media.contentType.slice(0, 3) === 'vid' || 'aud' ? \n
\n
:null\n // (this.props.message.media && this.props.message.media.contentType.slice(0, 2) === 'ap' ? \n \n
Documents\n //
:null)\n )\n }\n\n\n {!url && !hasFailed && \n
\n )}\n\n {!hasFailed && url && (\n Failed to load media
\n\n \n { this.props.messages.map(m => {\n if (m.author === this.props.identity)\n return
\n );\n }\n}\n\nConversationsMessages.propTypes = {\n identity: PropTypes.string.isRequired,\n messages: PropTypes.arrayOf(PropTypes.object).isRequired\n};\n\nexport default ConversationsMessages;","import React, { Component } from 'react';\nimport Dropzone from 'react-dropzone';\nimport { withPreviews, clearPreviews } from './withPreview';\n//import styles from './assets/Conversation.module.css'\nimport { Button, Icon, Input, Image, Popup } from \"semantic-ui-react\";\nimport ConversationsMessages from \"./ConversationsMessages\";\nimport PropTypes from \"prop-types\";\nimport WebCamera from \"react-html5-camera-photo\";\nimport \"react-html5-camera-photo/build/css/index.css\";\nimport '../../containers/Chat/chat.css'\nimport { Modal } from 'semantic-ui-react';\nimport ReactPlayer from \"react-player\";\nimport mime from \"mime-types\";\nimport FileViewer from 'react-file-viewer';\nimport { CustomErrorComponent } from 'custom-error';\n//import VoiceMessage from './VoiceMessage';\n\nclass Conversation extends Component {\n constructor(props) {\n super(props);\n this.state = {\n newMessage: '',\n conversationProxy: props.conversationProxy,\n messages: [],\n loadingState: 'initializing',\n boundConversations: new Set(),\n files: [],\n videoFiles: [],\n audioFiles: [],\n voiceMessages: false,\n docFiles: [],\n showCamera: false,\n showImage: false,\n showVideo: false,\n mediaFile: false,\n imageFile: [],\n base64URL: '',\n allowEnter: true,\n isLoading: false,\n openRecorder: false,\n mediaRecorderState: \"inactive\",\n\n };\n this.stream = null;\n this.mediaRecorder = null;\n this.audioBlob = [];\n this.audioUrl = null;\n this.fileInput = React.createRef();\n }\n\n //==========================Voice Messages===========================\n openVoiceMessageModal = () => {\n this.setState({ openRecorder: true })\n }\n closeVoiceMessageModal = () => {\n this.setState({ openRecorder: false })\n this.audioBlob = [];\n this.audioUrl = null;\n\n }\n createStream() {\n return navigator.mediaDevices.getUserMedia({ audio: true });\n }\n componentWillUnmount = () => {\n this.mediaRecorder && this.mediaRecorder.removeEventListener(\"start\", (event) => {\n this.audioUrl = \"\";\n console.log(event);\n audioChunks = [];\n this.setState({ mediaRecorderState: \"recording\" });\n });\n }\n async createRecorder() {\n if (!this.stream) this.stream = await this.createStream();\n if (!this.mediaRecorder) {\n this.mediaRecorder = new MediaRecorder(this.stream);\n let audioChunks = [];\n this.mediaRecorder.addEventListener(\"start\", (event) => {\n this.audioUrl = \"\";\n console.log(event);\n audioChunks = [];\n this.setState({ mediaRecorderState: \"recording\" });\n });\n this.mediaRecorder.ondataavailable = (event) => {\n console.log(event.timecode);\n audioChunks.push(event.data);\n if (this.state.mediaRecorderState !== \"recording\")\n this.setState({ mediaRecorderState: \"recording\" });\n };\n this.mediaRecorder.onstop = (event) => {\n this.audioBlob = new Blob(audioChunks);\n this.audioUrl = URL.createObjectURL(this.audioBlob);\n this.setState({ mediaRecorderState: \"inactive\" });\n };\n this.mediaRecorder.onpause = (event) => {\n this.setState({ mediaRecorderState: \"paused\" });\n };\n this.mediaRecorder.onresume = (event) => {\n this.setState({ mediaRecorderState: \"recording\" });\n };\n }\n return this.mediaRecorder;\n }\n get isRecording() {\n return this.mediaRecorder && this.mediaRecorder.state === \"recording\";\n }\n async toggleRecord() {\n await this.createRecorder();\n if (this.mediaRecorder.state === \"inactive\") {\n this.mediaRecorder.start(1000);\n } else if (this.mediaRecorder.state === \"paused\") {\n this.mediaRecorder.resume();\n } else if (this.mediaRecorder.state === \"recording\") {\n this.mediaRecorder.pause();\n }\n }\n async stop() {\n if (!this.mediaRecorder || this.mediaRecorder.state === \"inactive\") return;\n this.mediaRecorder.stop();\n }\n\n //====================Camera================================\n showImageModal = () => {\n this.setState({ showImage: true })\n }\n closeImageModal = () => {\n this.setState({ showImage: false, files: [], base64URL: '' })\n }\n closeVideoModal = () => {\n this.setState({ showVideo: false, files: [], audioFiles: [], videoFiles: [] })\n }\n\n handleVoiceMessage = () => {\n alert(\"Clicked \")\n this.setState({ voiceMessages: true })\n }\n\n onChangeImage = (event) => {\n this.setState({\n file: URL.createObjectURL(event.target.files[0])\n });\n }\n\n handleCameraClose = () => {\n this.setState({ imageFile: \"\" });\n this.setState({ showCamera: false });\n }\n handleTakePhoto = dataUri => {\n this.setState({ imageFile: dataUri });\n this.setState({ showCamera: false });\n\n }\n\n toggleCamera = () => {\n this.setState({ showCamera: !this.state.showCamera })\n\n }\n\n\n //====================Camera================================\n\n loadMessagesFor = (thisConversation) => {\n if (this.state.conversationProxy === thisConversation) {\n thisConversation.getMessages()\n .then(messagePaginator => {\n if (this.state.conversationProxy === thisConversation) {\n this.setState({ messages: messagePaginator.items, loadingState: 'ready' });\n }\n })\n .catch(err => {\n console.error(\"Couldn't fetch messages IMPLEMENT RETRY\", err);\n this.setState({ loadingState: \"failed\" });\n });\n }\n };\n\n componentDidMount = () => {\n\n if (this.state.conversationProxy) {\n this.loadMessagesFor(this.state.conversationProxy);\n\n if (!this.state.boundConversations.has(this.state.conversationProxy)) {\n let newConversation = this.state.conversationProxy;\n newConversation.on('messageAdded', m => this.messageAdded(m, newConversation));\n this.setState({ boundConversations: new Set([...this.state.boundConversations, newConversation]) });\n }\n }\n }\n\n componentDidUpdate = (oldProps, oldState) => {\n if (this.state.conversationProxy !== oldState.conversationProxy) {\n this.loadMessagesFor(this.state.conversationProxy);\n\n if (!this.state.boundConversations.has(this.state.conversationProxy)) {\n let newConversation = this.state.conversationProxy;\n newConversation.on('messageAdded', m => this.messageAdded(m, newConversation));\n this.setState({ boundConversations: new Set([...this.state.boundConversations, newConversation]) });\n }\n }\n };\n\n static getDerivedStateFromProps(newProps, oldState) {\n let logic = (oldState.loadingState === 'initializing') || oldState.conversationProxy !== newProps.conversationProxy;\n if (logic) {\n return { loadingState: 'loading messages', conversationProxy: newProps.conversationProxy };\n } else {\n return null;\n }\n }\n\n messageAdded = (message, targetConversation) => {\n if (targetConversation === this.state.conversationProxy)\n this.setState((prevState, props) => ({\n messages: [...prevState.messages, message]\n }));\n };\n\n onMessageChanged = event => {\n this.setState({ newMessage: event.target.value });\n };\n\n handleKeypress = e => {\n //it triggers by pressing the enter key\n if (e.key === \"Enter\") {\n this.sendMessage(e);\n }\n\n\n };\n\n sendMessage = (event) => {\n event.preventDefault();\n\n const { audioFiles, videoFiles, base64URL, docFiles, voiceMessages } = this.state;\n // alert(\"Sending\" + voiceMessages + JSON.stringify(audioURL) )\n this.setState({ isLoading: true })\n const message = this.state.newMessage;\n if (message.length>0) {\n\n this.setState({ newMessage: '' });\n this.state.conversationProxy.sendMessage(message);\n alert(\"text\")\n\n }\n else if (audioFiles || videoFiles || base64URL || docFiles || this.audioUrl) {\n this.handleMediaMessage()\n }\n \n\n this.setState({ isLoading: false })\n this.closeVoiceMessageModal()\n // this.setState({ files: [], audioFiles: [], videoFiles: [], base64URL:'' })\n\n\n\n };\n sendWebCamMessage = () => {\n const { imageFile } = this.state;\n //event.preventDefault();\n // const message = this.state.newMessage;\n // this.setState({ newMessage: '' });\n //this.state.conversationProxy.sendMessage(message);\n\n this.state.conversationProxy.sendMessage(imageFile);\n this.closeImageModal();\n };\n\n onDrop = acceptedFiles => {\n alert(JSON.stringify(acceptedFiles))\n\n this.state.conversationProxy.sendMessage({ contentType: 'image/*', media: acceptedFiles[0] });\n };\n\n componentWillUnmount() {\n this.state.files && clearPreviews(this.state.files)\n //this.setState({files:[]})\n }\n\n //===================================Media messages================================\n\n\n getBase64 = (file) => {\n return new Promise((resolve) => {\n let fileInfo;\n let baseURL = \"\";\n // Make new FileReader\n let reader = new FileReader();\n\n // Convert the file to base64 text\n reader.readAsDataURL(file);\n\n // on reader load somthing...\n reader.onload = () => {\n // Make a fileInfo Object\n //console.log(\"Called\", reader);\n baseURL = reader.result;\n //console.log(baseURL);\n resolve(baseURL);\n };\n // console.log(fileInfo);\n });\n };\n\n\n handleChangeMedia = (e) => {\n\n\n\n this.setState({ files: e.target.files[0] }, () => {\n const metadata = { contentType: mime.contentType(e.target.files[0].name) };\n alert(\"Mime : \" + JSON.stringify(metadata + \"Type :\" + e.target.files[0].type))\n if (metadata && (e.target.files[0].type.slice(0, 2) === 'im')) {\n\n let { files } = this.state;\n\n\n files = e.target.files[0];\n\n this.getBase64(files)\n .then((result) => {\n files[\"base64\"] = result;\n console.log(\"File Is\", files);\n this.setState({\n base64URL: result,\n files\n });\n })\n .catch((err) => {\n console.log(err);\n });\n\n\n this.setState({ showImage: true, imageFile: URL.createObjectURL(e.target.files[0]) })\n } else if (metadata && metadata.contentType.slice(0, 2) === 'vi') {\n this.setState({ videoFiles: URL.createObjectURL(e.target.files[0]), showVideo: true })\n }\n else if (metadata && metadata.contentType.slice(0, 2) === 'au') {\n this.setState({ audioFiles: URL.createObjectURL(e.target.files[0]), showVideo: true })\n }\n else if (metadata && (metadata.contentType.slice(0, 2) === 'ap' || 'te')) {\n this.setState({ docFiles: URL.createObjectURL(e.target.files[0]), showImage: true })\n }\n\n\n\n })\n\n // this.setState({\n // files: URL.createObjectURL(e.target.files[0])\n // }, () => {\n // const metadata = { contentType: mime.lookup(e.target.files[0].name) };\n // this.setState({ showImage: true })\n // console.log(\"video : \" + JSON.stringify(metadata ))\n // });\n }\n handleMediaMessage = (e) => {\n\n if (this.state.videoFiles.length > 0) {\n this.state.conversationProxy.sendMessage({ contentType: 'video/*', media: this.state.files });\n }\n else if (this.state.audioFiles.length > 0) {\n this.state.conversationProxy.sendMessage({ contentType: 'audio/*', media: this.state.files });\n }\n else if (this.state.imageFile.length > 0) {\n this.state.conversationProxy.sendMessage({ contentType: 'image/*', media: this.state.files });\n alert(\"Image\")\n\n }\n else if (this.state.docFiles.length > 0) {\n this.state.conversationProxy.sendMessage({ contentType: 'application/*', media: this.state.files });\n alert(this.state.files.type)\n\n }\n else if (this.audioUrl !== null) {\n alert(\"Voice message\" + this.audioUrl)\n this.state.conversationProxy.sendMessage({ contentType: 'audio/*', media: this.audioBlob });\n\n\n }\n\n this.closeVideoModal()\n this.closeImageModal();\n //alert(this.state.files)\n }\n\n\n render = () => {\n const { showCamera, imageFile, newMessage, messages, showImage, showVideo, videoFiles, audioFiles, isLoading, base64URL, docFiles, openRecorder } = this.state;\n\n return (\n {\n }}\n id=\"OpenChannel\"\n\n\n >\n\n\n \n \n\n\n\n \n\n\n {imageFile.length > 0 ? \"Upload Image\" : \"Upload Document\"} \n \n {base64URL && (\n\n \n \n \n \n \n \n\n \n\n\n {videoFiles.length > 0 ? \"Upload Video\" : \"Upload Audio\"} \n \n {this.state.files && videoFiles ? (\n\n \n \n \n \n \n \n\n\n \n\n\n Voice Recorder \n \n \n \n\n \n \n \n\n \n \n\n \n\n \n\n {/* \n */}\n\n
\n \n )}\n\n \n \n
\n\n \n\n\n\n {showCamera && (\n // \n\n \n \n\n )}\n
\n\n\n \n this.sendWebCamMessage(e,dataUri)}\n\n onTakePhoto={(dataUri) => {\n this.setState({\n imageFile: dataUri,\n showImage: true,\n showCamera: false\n })\n\n }}\n />\n\n
\n\n\n \n\n
\n \n\n \n\n\n \n \n {/* */}\n {/* */}\n \n\n
\n\n \n \n\n \n \n \n \n \n\n\n\n
}\n on='click'\n pinned\n trigger={}\n />\n\n\n\n\n\n \n\n \n \n \n Edit Group \n \n \n \n \n \n \n \n\n \n \n
\n )\n }\n}\n\n\nconst reducer = { ...chatReducer };\n\n\nconst mapStateToProps = state => {\n return {\n chatGroups: state.chatGroups,\n response: state.chatGroups.response,\n forms: state.forms,\n\n\n\n };\n};\n\nconst mapDispatchToProps = dispatch =>\n bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(EditGroupModal)\n);\n\n\n\n","import React from 'react';\nimport { Modal, Button, List, Checkbox ,Search} from 'semantic-ui-react'\nimport _ from \"lodash\";\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport * as chatReducer from \"./chat.reducer\";\n\n\nconst polyglot = window.polyglot;\n\n\nclass AddRemovMemberModal extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n something: '',\n showModal: false,\n channelIcon: null,\n file: null,\n chatTitle: '',\n identity: 'nnn@mailinator.com',\n errorFlag: false,\n errorMessage: \"\",\n accessToken: '',\n isLoading:false,\n members:''\n }\n }\n closeModal = () => {\n this.setState({ showModal: false })\n this.props.actionResetForm(\"chatForm\")\n\n }\n openModal = async () => {\n const {conversationDetails,chatForm} = this.props;\n this.setState({ showModal: true\n })\n const formData = {\n ...chatForm,\n participantsList:conversationDetails.chatDetails.participants\n\n\n }\n \n \n\n await this.props.actionSetFormValue(formData)\n \n }\n\n \n handleAddParticipants = async () => {\n this.setState({isLoading:true})\n const { chatForm } = this.props.forms;\n const { conversationDetails } = this.props;\n\n const formData = {\n ...chatForm,\n conversationId:conversationDetails.sid\n }\n\n await this.props.actionUpdateParticipants(formData);\n this.props.getConversationDetails(conversationDetails.sid)\n\n // const { response } = this.props;\n \n // if (response) {\n // if (response.status === 424) {\n // this.updateState({\n // errorFlag: true,\n // errorMessage: \"Something went wrong, please try it again\"\n // });\n // }\n \n // if (response.status === 403) {\n // this.updateState({\n // errorFlag: true,\n // errorMessage: \"Forbidden\"\n // });\n // }\n \n this.setState({isLoading:true})\n // if (response.status === 200) {\n // // window.scrollTo(0, 0);\n // // this.updateState({\n // // success: true\n // // });\n // showSuccessToast(\"New Conversation created successfully!!\")\n // }\n \n // // }\n\n \n this.props.actionResetForm(\"chatForm\")\n this.closeModal();\n\n };\n \n\n checkedUsers = (value,name) => {\n\n\n let { participantsList } = this.props.chatForm;\n let newParticipantsList = [...participantsList];\n let isAvailable = _.includes(participantsList, value);\n if (isAvailable) {\n _.remove(newParticipantsList, n => value === n);\n } else {\n newParticipantsList.push(value);\n }\n this.props.actionSetFormField(\"participantsList\", newParticipantsList);\n \n\n // console.log(\"Checked user list :\" + participantsList)\n };\n\n\n render() {\n const {\n\n showModal,\n isLoading\n\n } = this.state\n\n const { chatUserList, chatForm,operation} = this.props;\n const { participantsList } = chatForm;\n\n let userList = [];\n if (chatUserList && chatUserList.length) {\n _.map(chatUserList, user => {\n const { firstName, email, _id } = user;\n userList.push({ name: firstName, value: email, id: _id });\n });\n }\n const filterdUsers = [...userList];\n let selectedUsers = filterdUsers.filter((filterdUsers) => participantsList.includes(filterdUsers.value))\n\n // const { onDeleteUser, forms } = this.props;\n return (\n \n
\n \n \n \n
\n \n
\n Upload Group Image
\nUpload valid image. Only PNG and JPEG are allowed.
\n\n
\n \n \n \n \n \n \n\n \n
\n\n \n {\n operation===\"add\"? \n \n Add New Members\n \n : Remove Member \n }\n \n \n {operation===\"add\"?\"Add New Members\":\"Remove Member\"} \n \n \n \n \n \n \n\n \n \n \n
\n )\n }\n}\n\n\nconst reducer = { ...chatReducer };\n\n\nconst mapStateToProps = state => {\n return {\n chatGroups: state.chatGroups,\n response: state.chatGroups.response,\n forms: state.forms,\n chatUserList: state.chatGroups.chatuserList.data,\n chatForm: state.forms.chatForm,\n conversationDetails: state.chatGroups.conversationDetails.data,\n\n\n };\n};\n\nconst mapDispatchToProps = dispatch =>\n bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(AddRemovMemberModal)\n);","import React from 'react';\nimport './chat.css';\nimport {\n List,\n Image,\n} from \"semantic-ui-react\";\nimport _ from 'lodash';\nimport EditGroupModal from './EditGroup';\nimport AddMemberModal from './AddMemberModal';\nimport * as chatReducer from './chat.reducer';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport ExitGroupModal from './ExitGroupModal';\n\nclass GroupInfo extends React.Component {\n constructor(props) {\n super(props);\n }\n\n componentDidMount = async () => {\n const { conversationDetails } = this.props;\n const userDetail = _.map(conversationDetails.participantsDetails, user => conversationDetails.chatDetails.createdBy !== user.email ? user._id : null);\n const userId = userDetail[0]\n if (conversationDetails.chatDetails.chatType === 1) {\n await this.props.getChatUserDetails(userId);\n }\n\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { conversationDetails, userDetails } = this.props;\n const userDetail = _.map(conversationDetails.participantsDetails, user => conversationDetails.chatDetails.createdBy !== user.email ? user._id : null);\n const userId = userDetail[0]\n\n if (prevProps.userDetails == userDetails && conversationDetails.chatDetails.chatType === 1) {\n\n\n this.props.getChatUserDetails(userId);\n\n }\n }\n\n handleExitChatgroup = async () => {\n this.setState({ loading: true });\n const { conversationDetails } = this.props;\n let conversationId = {\n conversationSID: conversationDetails.sid\n };\n\n\n await this.props.actionExitChatgroup(conversationId);\n\n\n this.setState({ loading: false });\n this.props.closeGroupInfo();\n };\n\n render() {\n const { closeGroupInfo, conversationDetails, userDetails, onExitChat } = this.props;\n\n\n const userDetail = [{ ...userDetails }];\n const loggedInUser = localStorage.getItem(\"user\");\n\n\n return (\n\n \n \n {_.map(selectedUsers, user => {\n return
\n\n \n
\n \n PV
\n {user.name}
\n \n
\n\n\n\n - \n {_.map(userList, users => {\n const { name, value, id } = users;\n return
\n
\n \n
\n \n HS\n {/* */}\n
\n \n
\n \n
\n\n \n
\n {name}
\n Lorem Ipsum is simply dummy text
\n \n this.checkedUsers(value,name)}\n value={value}\n checked={_.includes(participantsList, value)}\n\n />\n
\n \n
\n\n );\n }\n}\n\n\n\nconst mapStateToProps = state => {\n return {\n conversationDetails: state.chatGroups.conversationDetails.data,\n chatUserList: state.chatGroups.chatuserList.data,\n chatForm: state.forms.chatForm,\n userDetails: state.chatGroups.userDetails.data\n\n }\n}\n\n\n\nconst reducer = { ...chatReducer };\n\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\nexport default connect(mapStateToProps, mapDispatchToProps)(GroupInfo);","import React from 'react';\nimport { Modal, Button,} from 'semantic-ui-react'\n\nclass ExitGroupModal extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showModal: false,\n isLoading:false\n }\n }\n closeModal = () => {\n this.setState({ showModal: false })\n }\n openModal = () => {\n this.setState({ showModal:true })\n }\n\n handleExitGroup = () => {\n this.setState({isLoading:true})\n this.props.onExitChat();\n this.setState({isLoading:false})\n this.closeModal();\n }\n render() {\n const {\n showModal,\n isLoading\n } = this.state\n return (\n \n \n {conversationDetails && conversationDetails.chatDetails.chatType === 2 ? conversationDetails && conversationDetails.friendlyName : conversationDetails && conversationDetails.participantsDetails.map(user => {\n if (user.email !== loggedInUser) {\n return
\n\n {/*
\n\n {conversationDetails && conversationDetails.chatDetails.chatType === 2 ?\n\n \n {conversationDetails && conversationDetails.chatDetails.chatType === 2 ? conversationDetails && conversationDetails.friendlyName : conversationDetails && conversationDetails.participantsDetails.map(user => {\n if (user.email !== loggedInUser) {\n return {user.firstName} {user.lastName} \n }\n\n })}\n\n
\n\n {/* {conversationDetails.chatDetails.chatTitle}
*/}\n \n\n
\n\n\n //* =============================================User Details=================================== */}\n\n : \n
\n \n
\n \n {/* */}\n
\n \n {loggedInUser === conversationDetails.chatDetails.createdBy ?
\n\n \n
\n - \n
{conversationDetails && (new Date(conversationDetails.dateCreated).toLocaleString())}
\n\n
\n\n - \n
\n
\n \n
\n \n HS\n {/* */}\n
\n \n
\n \n
\n\n \n
\n {firstName}
\n {mobileNumber}
\n {conversationDetails.chatDetails.createdBy === member.email ? \"Owner\" : null}\n {member[0] = (conversationDetails.chatDetails.createdBy === member.email)}\n
\n \n {conversationDetails.chatDetails.createdBy === loggedInUser ?
\n\n\n - \n
\n
\n }\n \n
\n\n\n\n\n \n
\n \n {/* */}\n {/*
\n\n\n \n\n {/* {_.map(userDetail,user=>
\n \n \n
\n )} */}\n {/* {_.map(conversationDetails.participantsDetails,user=> - \n
{user.mobileNumber}
\n{user.userRole}
\n\n \n {conversationDetails.chatDetails.createdBy !== user.email ?
\n )} */}\n {\n\n conversationDetails.participantsDetails.map(member => {\n const { _id, firstName,lastName, mobileNumber, userRole, email } = member;\n if (email !== loggedInUser) {\n return - \n
{user.mobileNumber}
\n{user.userRole}
\n- \n\n
{mobileNumber}
\n{userRole}
\n\n \n Exit group \n \n \n \n \n \n \n \n \n \n \n \n
\n )\n }\n}\nexport default ExitGroupModal;","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Segment } from 'semantic-ui-react';\n\nconst resultRenderer = ({\n firstName,\n \n lastName,\n _id\n}) => {\n return (\n \n \n
\n Are you sure you want to exit from this group?
\nName : {firstName} {\" \"} {lastName}
\n \n\n \n \n \n New Chat \n \n \n \n \n \n \n\n \n \n \n
\n )\n }\n}\n\n\nconst reducer = { ...chatReducer };\n\n\nconst mapStateToProps = state => {\n return {\n chatGroups: state.chatGroups,\n response: state.chatGroups.response,\n forms: state.forms,\n chatUserList: state.chatGroups.chatuserList.data,\n chatForm: state.forms.chatForm,\n searchResult:state.chatGroups.searchResult.data\n\n\n };\n};\n\nconst mapDispatchToProps = dispatch =>\n bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(NewChatModal)\n);","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Segment } from 'semantic-ui-react';\n\nconst ResultConversationRenderer = ({\n friendlyName,\n sid\n}) => {\n return (\n \n \n \n \n {selectedUsers &&_.map(selectedUsers, user => {\n return
\n\n \n
\n \n PV
\n {user.name} {user.lastName}
\n \n
\n\n\n\n - \n {_.map(userList, users => {\n const { name, value, id ,lastName,mobileNumber} = users;\n return
\n
\n \n
\n \n HS\n {/* */}\n
\n \n
\n \n
\n\n \n
\n {name} {lastName}
\n {mobileNumber}
\n \n this.checkedUsers(value,name)}\n value={value}\n checked={_.includes(participantsList, value)}\n\n />\n
\n Chat : {friendlyName}
\n {/*Role : {userRole}
*/}\n\n
\n );\n }\n}\n\n\nconst mapStateToProps = state => {\n return {\n chatUserList: state.chatGroups.chatuserList.data,\n conversationList: state.chatGroups.allGroups.data,\n chatForm: state.forms.chatForm,\n searchResult: state.chatGroups.searchResult.data,\n searchConversationResult: state.chatGroups.searchConversationResult.data,\n conversationDetails: state.chatGroups.conversationDetails.data,\n }\n}\n\n\n\nconst reducer = { ...chatReducer };\n\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\nexport default connect(mapStateToProps, mapDispatchToProps)(ChatLandingPage);\n\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport _ from \"lodash\";\nimport * as chatReducer from './chat.reducer';\n\nimport ChatLandingPage from './ChatLandingPage';\n\n\n\nclass Chat extends Component {\n constructor(props) {\n super(props);\n \n }\n\n \n \n\n render() {\n \n return (\n \n \n\n \n \n \n \n
\n\n\n\n \n {!isNewGroup ?\n
\n \n
\n :\n \n
\n\n \n
\n \n {/* */}\n
\n \n
\n - \n {allConversationsList && _.map(allConversationsList, groups => {\n //console.log(\"Conversation details\" + groups.sid)\n return
\n
\n \n
\n \n {groups.chatType === 1 ? : }\n {/* {groups.channelState.attributes.chatType===1? :} */}\n {/* {groups.channelState.attributes.chatType===1?\n
\n\n \n
\n \n : \n \n
\n \n
\n } */}\n\n {/* \n
\n \n \n\n
\n \n {/* {groups.channelState.attributes.chatType===1 &&groups.channelState.attributes.createdBy===loggedInUser?groups.friendlyName: } */}\n\n\n {groups.friendlyName || groups.sid}\n\n {/* {groups.friendlyName} */}\n \n {new Date(groups.dateCreated).toLocaleTimeString(navigator.language, { hour: '2-digit', minute: '2-digit' })}\n \n\n\n\n
\n \n {/* {groups.dateCreated.toLocaleString('en-US', { hour12: false })} */}\n\n {/* { new Date(groups.dateCreated).toLocaleString(undefined, {timeZone: 'Asia/Kolkata'})} */}\n {groups.lastMessage !== null ? groups.lastMessage && groups.lastMessage.body || groups.lastMessage.media && Image
\n \n \n
\n\n }\n \n \n
\n \n {_.map(selectedUsers, user => {\n return
\n\n - \n
\n
\n \n \n {user.name.charAt(0) + user.lastName.charAt(0)}\n
\n {user.name} {user.lastName}
\n \n
\n \n
\n - \n {_.map(userList, users => {\n const { name, lastName, mobileNumber, value } = users;\n return
\n
\n \n
\n \n {name.charAt(0) + lastName.charAt(0)}\n
\n {/* */}\n \n
\n \n
\n {name} {lastName}
\n\n {mobileNumber}
\n \n this.checkedUsers(value)}\n value={value}\n checked={_.includes(participantsList, value)}\n />\n
\n \n this.checkedUsers(value)} disabled={!selectedUsers} />\n
\n \n
\n {showGroupInfo && \n
\n\n\n {conversationContent}\n\n\n\n \n {selectedConversation &&\n
\n {selectedConversation &&\n \n {/* HS */}\n {/* */}\n\n {conversationDetails && conversationDetails.chatDetails.chatType === 1 ? : }\n\n
\n }\n \n {selectedConversation && (conversationDetails && conversationDetails.chatDetails.chatType === 2 ? conversationDetails && conversationDetails.friendlyName : conversationDetails && conversationDetails.participantsDetails.map(user => {\n if (user.email !== loggedInUser) {\n return {user.firstName} {user.lastName} \n }\n }))}\n\n {/* {conversationDetails && conversationDetails.friendlyName} */}\n {/* {conversationDetails && conversationDetails.participantsDetails.map(user => {\n return {user.firstName} \n })} */}\n\n
\n \n \n \n \n {this.state.chatType === 1 ? null\n : \n }\n\n {/* : null}\n\n\n \n \n
\n }\n \n
\n }\n \n Order # \n {options && invoiceUrl && (\n \n View invoice\n \n )}\n
\n\n {name}
\n{orderDate}
\n{this.getStatus(status)}
\n\n {currency} {orderTotal.toFixed(2)}\n
\n ) : null}\n\n {address.street}, {address.city} {address.suburb}{\" \"}\n {address.state}, {address.country}, {address.postalCode}\n
\n )}\n{customerOrderNumber}
\n{reference}
\n\n
\n {summaryItem}
\n\n {currency} {subTotal.toFixed(2)}\n
\n ) : null}\n\n {currency} {taxTotal.toFixed(2)}\n
\n ) : null}\n\n {currency} {orderTotal.toFixed(2)}\n
\n ) : null}\nStock Image:
\nDescription:
\n {description}\nStock code:
\n \n {stockCode}\n \nSales price:
\n\n\n {currency || \"NZD\"} {salesPrice}\n
\nTotal price:
\n\n\n {currency || \"NZD\"} {totalPrice}\n
\nOrder quantity:
\n {orderQuantity} {quantityMessage}\n\n Order Placed Successfully\n
\n );\n this.setState({ orderPlaced: true });\n };\n\n PayWithPaymentExpress = async () => {\n this.setState({\n paymentConfirmationOpen: false,\n errorMessage: false,\n isError: false,\n });\n const {\n customerOrderNumber,\n reference,\n cart,\n accountInfo,\n overallDiscount,\n customNotes,\n } = this.props;\n let { deliveryAddress } = this.props;\n const { needOrderNumber = true } = accountInfo;\n if (needOrderNumber) {\n if (_.isEmpty(customerOrderNumber)) {\n this.setState({\n isError: false,\n errorMessage: \"Please add PO number\",\n });\n window.scrollTo(0, 0);\n return;\n }\n }\n\n if (_.isEmpty(deliveryAddress)) {\n this.setState({\n isError: false,\n errorMessage: \"Please add delivery address\",\n });\n window.scrollTo(0, 0);\n return;\n }\n\n this.setState({ isLoading: true });\n const { discount = 0 } = overallDiscount;\n const { pickUpFlag, pickAddressObject } = this.state;\n let tax = this.calculateTax();\n if (pickUpFlag === true) {\n deliveryAddress = pickAddressObject;\n // let orderData = orderUtils.constructPayWithBOACreditObject({\n // customerOrderNumber,\n // reference,\n // deliveryAddress,\n // //pickAddressObject,\n // cart,\n // tax,\n // discount,\n // iWillPickUp: true,\n // });\n // orderData.paymentType = \"payment gateway\";\n // await this.props.actionPlaceOrderPaymentGateway(orderData);\n } else {\n // let orderData = orderUtils.constructPayWithBOACreditObject({\n // customerOrderNumber,\n // reference,\n // deliveryAddress,\n // cart,\n // tax,\n // discount,\n // iWillPickUp: false,\n // });\n // orderData.paymentType = \"payment gateway\";\n // await this.props.actionPlaceOrderPaymentGateway(orderData);\n }\n const { pxPayInitiateResponse } = this.props;\n const { status = 200, data } = pxPayInitiateResponse;\n this.setState({ isLoading: false });\n if (status === 200) {\n const { pxPayUrl = \"\" } = data;\n document.location.href = pxPayUrl;\n } else if (status === 424) {\n return showErrorToast(\"Something went wrong, please try again\");\n } else {\n const { code } = data;\n this.showOrderErrorMessage(code);\n }\n };\n\n getCartCount = () => {\n let quantity = 0;\n _.forEach(this.props.cart, (item) => {\n quantity = quantity + Number(item.quantity);\n });\n return Quantity {quantity};\n };\n\n computeSubtotal = () => {\n _.forEach(this.props.cart, (item) => {\n if (item.buyPrice === 0 || item.retailPrice === 0) return 0;\n });\n let subTotal = this.props.cart.reduce(\n (prev, item) => prev + item.buyPrice * item.quantity,\n 0\n );\n return subTotal;\n };\n\n editAddress = (e) => {\n e.preventDefault();\n this.props.history.push(\"/profile/deliveryAddress\");\n };\n\n modelOpenHandler = (e) => {\n e.preventDefault();\n this.setState({ modalOpen: true });\n };\n\n modelCloseHandler = () => {\n this.setState({ modalOpen: false, pickUpModalOpen: false });\n };\n\n modelPickupOpenHandler = (e) => {\n e.preventDefault();\n this.setState({ pickUpModalOpen: true });\n };\n\n modelPickUpCloseHandler = () => {\n this.setState({ pickUpModalOpen: false });\n };\n\n changeAddressHandler = (e, address) => {\n this.props.actionChangeAddress(address);\n showSuccessToast(\n \n
\n );\n this.modelCloseHandler();\n };\n\n changePickupAddressHandler = (e, address) => {\n this.setState({\n pickAddressObject: address,\n });\n this.props.actionChangeAddress(address);\n showSuccessToast(\n \n
\n );\n this.modelPickUpCloseHandler();\n };\n\n onChangeReferenceHandler = (e) => {\n const { value } = e.target;\n this.props.actionSetReference(value);\n };\n\n onChangeCustomNotesHandler = (e) => {\n const { value } = e.target;\n this.props.actionSetCustomNotes(value);\n };\n\n onChangeCustomerOrderHandler = (e) => {\n const { value } = e.target;\n this.props.actionSetCustomerOrderNumber(value);\n };\n\n goToOrderHistory = (e) => {\n e.preventDefault();\n this.props.history.push(\"/orderHistory\");\n };\n\n openDispatchDetails = (e) => {\n e.preventDefault();\n this.setState({ openDispatchDetails: true });\n };\n\n closeDispatchDetails = (e) => {\n e.preventDefault();\n this.setState({ openDispatchDetails: false });\n };\n\n orderSuccessSummary = (data) => {\n const { status } = data;\n return (\n \n \n \n {status === \"success\" && (\n \n \n \n Thank you, Your order has been placed\n \n Your payment has been processed.\n \n \n )}\n {status === \"failed\" && (\n \n \n Sorry, Your order failed \n Your payment has been declined.\n \n \n )}\n \n \n \n
\n \n \n
\n );\n };\n\n changedPickupAdd = () => {\n const { pickUpAllAddresses } = this.props;\n // const { data } = pickUpAllAddresses;\n this.setState({\n pickupData: pickUpAllAddresses,\n });\n\n if (pickUpAllAddresses != undefined) {\n pickUpAllAddresses.map((address, key) => {\n if (address.isPrimary === true) {\n this.setState({\n pickAddressObject: address,\n });\n }\n });\n }\n };\n checkBoxAddressHandler = async (e, data) => {\n const { checked } = data;\n if (checked) {\n this.setState({\n iAgree: checked,\n pickUpFlag: true,\n });\n this.changedPickupAdd();\n } else {\n this.setState({\n pickUpFlag: false,\n });\n await this.props.actionSetDeliveryDetails();\n }\n };\n render() {\n const {\n cart,\n deliveryAddress,\n allAddresses,\n reference,\n customNotes,\n customerOrderNumber,\n accountInfo,\n user,\n pickUpAllAddresses,\n } = this.props;\n\n //const pickupData = pickUpAllAddresses.data;\n const {\n modalOpen,\n orderPlaced,\n errorMessage,\n isError,\n isLoading,\n openDispatchDetails,\n iAgree,\n pickUpFlag,\n pickUpModalOpen,\n pickupData,\n pickAddressObject,\n initialLoad,\n } = this.state;\n\n const { customerType, userRole, account = {} } = user;\n const { showPrice = false } = account;\n const { response, overallDiscount } = this.props;\n const { status, data } = response;\n const { stopCredit, needOrderNumber } = accountInfo;\n const { discount = 0 } = overallDiscount;\n let responseJSX = \"\";\n if (status === 200) {\n return this.orderSuccessSummary(data);\n }\n\n // Review Move this Modal out\n const selectAddressModelJSX = (\n \n
\n - \n {allAddresses &&\n allAddresses.map((address, key) => {\n const color = address.isPrimary ? \"green\" : \"\";\n return (\n
{`${address.city}, ${address.country.name} `}
\n {`${address.zip} `}
\n - \n {pickupData.map((address, key) => {\n const color = address.isPrimary ? \"green\" : \"\";\n return (\n
{`${address.city}, ${address.country} `}
\n {`${address.postalCode} `}
\n \n {user.boahubShowPurchasePrice && (\n \n \n \n \n )}\n \n \n \n \n \n \n \n \n \n {/* \n */}\n \n \n \n {!pickUpFlag ? (\n \n
\n ) : (\n \n
\n )}\n \n {!pickUpFlag ? (\n \n )}\n\n {_.isEmpty(deliveryAddress) && (\n \n {/* \n \n \n
\n \n {/* {customerType === ENTERPRISE && stopCredit && (\n \n {\n this.setState({ paymentConfirmationOpen: true });\n }}\n primary\n fluid\n size=\"large\"\n >\n {/* {\n this.setState({ paymentConfirmationOpen: false });\n }}\n onConfirm={this.payWithBoa}\n />\n \n )}\n {isLoading && (\n \n )}\n \n \n \n {\" \"}\n
\n );\n\n const placeOrderJSX = (\n \n
\n {pickUp}
\n\n
\n ) : (\n \n
\n )}\n \n {deliveryAddress.isPrimary && (\n \n )}\n
\n ) : (\n \n {deliveryAddress.street}\n
\n {deliveryAddress.street2}
\n {deliveryAddress.suburb}
\n {deliveryAddress.city}
\n {deliveryAddress.country.name}
\n {deliveryAddress.zip}
\n \n {!_.isEmpty(pickAddressObject) && (\n
\n )}\n \n \n
\n )}\n \n {deliveryAddress.street}\n
\n {deliveryAddress.street2}
\n {deliveryAddress.suburb}
\n {deliveryAddress.city}
\n {deliveryAddress.country.name}
\n {deliveryAddress.zip}
\n \n
\n \n \n Or \n
\n )}\n {(customerType === ENTERPRISE || customerType === RETAIL) &&\n !stopCredit && (\n \n {!isLoading && (\n \n {\n this.setState({ creditPaymentOpen: true });\n }}\n fluid\n color=\"green\"\n size=\"large\"\n >\n Use {\n this.setState({ creditPaymentOpen: false });\n }}\n onConfirm={this.payWithBoa}\n />\n \n )}\n {isLoading && (\n \n )}\n Or \n
\n )} */}\n {!isLoading && (\n \n {initialLoad && (\n Loading,please wait \n )}\n {!initialLoad && (\n
\n );\n\n return (\n \n \n \n \n
\n \n \n \n \n {cartJSX}\n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n cart: JSON.parse(localStorage.getItem(\"selectedCartItems\")),\n deliveryAddress: state.orderConfirmation.deliveryAddress,\n allAddresses: state.orderConfirmation.allAddresses,\n reference: state.orderConfirmation.reference,\n customerOrderNumber: state.orderConfirmation.customerOrderNumber,\n customNotes: state.orderConfirmation.customNotes,\n response: state.orderConfirmation.response,\n user: state.auth.user,\n accountInfo: state.orderConfirmation.accountInfo,\n pxPayInitiateResponse: state.orderConfirmation.pxPayInitiateResponse,\n overallDiscount: state.orderConfirmation.overallDiscount,\n pickUpAllAddresses: state.orderConfirmation.pickUpAllAddresses,\n status: state.orderConfirmation.status,\n statusText: state.orderConfirmation.statusText,\n };\n};\n\nlet reducer = { ...authReducer, ...orderReducer, ...cartReducer };\n\nconst mapDispatchToProps = (dispatch) => bindActionCreators(reducer, dispatch);\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(OrderConfirmationComponent);\n","import React from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport { apiUpdatePaymentResultAndUpdateOrder } from \"./orderConfirmation.api\";\nimport * as orderConfirmationReducer from \"./orderConfirmation.reducer\";\nimport * as cartReducer from \"../../containers/Cart/cart.reducer\";\nimport {\n Segment,\n Icon,\n} from \"semantic-ui-react\";\n\nclass PaymentConfirmation extends React.Component {\n constructor() {\n super();\n const paymentResult = this.getPaymentResponse();\n this.updateOrderWithPaymentResponse(paymentResult);\n }\n\n getPaymentResponse = () => {\n let url = document.location.href;\n url = new URL(url);\n const { searchParams } = url;\n const result = searchParams.get(\"result\");\n const userId = searchParams.get(\"userid\");\n const success = searchParams.get(\"success\");\n\n const paymentResult = {\n success,\n result,\n userId\n }\n\n return paymentResult;\n };\n\n updateOrderWithPaymentResponse = async (paymentResult) => {\n const { success } = paymentResult;\n const response = await apiUpdatePaymentResultAndUpdateOrder(paymentResult);\n\n if (success === \"true\" || success === true) {\n // console.log(\"this.props\", this.props);\n this.props.actionClearAll();\n }\n this.props.actionSetPaymentGatewayResponse(response);\n this.props.history.push(\"/orderConfirmation\");\n }\n\n render() {\n return (\n \n
\n \n
\n\n {dateFilterJSX}
\n \n {allOrders.length ? (\n
\n - \n {items.length &&\n items.map((item, i_key) => {\n const { stockImage1, stockCode, stockDescription, updatedAt } =\n item;\n const lastBought = (\n \n
\n {stockDescription}\n
{lastBought}
\n \n \n \n {isLoading && (\n Loading,please wait \n )}\n \n \n
\n \n \n {mostOrdered.length > 0 ? (\n \n \n Click here to add products and place order\n \n
\n }\n />\n )}\n \n \n {modalJSX}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n mostOrdered: state.myFavorites.mostOrdered,\n activeIndex: state.myFavorites.activeIndex,\n };\n};\n\nconst reducer = { ...MyFavoritesReducer, ...cartReducer };\nconst mapDispatchToProps = (dispatch) => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(mapStateToProps, mapDispatchToProps)(MyFavoritesComponent)\n);\n","import React from 'react'\nimport { Button, Header, Image, Modal } from 'semantic-ui-react'\n\nfunction ModalExampleModal() {\n const [open, setOpen] = React.useState(false)\n\n return (\n \n
\n \n We've found the following gravatar image associated with your e-mail\n address.\n
\nIs it okay to use this photo?
\n\n
\n \n\n \n Loading,please wait \n )}\n \n \n \n \n \n \n
\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n */}\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allAsset: state.assets.allAsset\n };\n};\n\nconst reducer = { ...assetReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(Assets)\n);\n","import _ from \"lodash\";\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Dropdown } from \"semantic-ui-react\";\n\nconst LocationDropdown = ({ locations = [], locationId = \"\", setLocation }) => {\n const locationList = [];\n if (locations && locations.length) {\n _.map(locations, (location, l_key) => {\n const { name } = location;\n locationList.push({\n key: l_key,\n text: name,\n value: name\n });\n });\n }\n\n return (\n \n
\n Coming soon
\n \n\n {/*\n {!_.isEmpty(assets) ? (\n
\n - \n {members &&\n _.map(members, (member, m_key) => {\n const { value: _id, isPortalUser, firstName , email} = member;\n let name = _id;\n let name1 = firstName;\n let email1 = email;\n \n if (isPortalUser) {\n const userInfo = _.find(users, { _id });\n name = userInfo.firstName;\n name1 = userInfo.lastName;\n email1 = userInfo.email;\n\n }\n return (\n
\n \n\n \n \n \n \n \n \n
\n );\n\n return (\n Member
\n\n
\n \n Drop image here / Click here to upload image
\nImage uploaded
, 5000);\n this.setState({ isLoading: false, selectedFile: null });\n };\n\n closeModal = () => {\n this.setState({ selectedFile: null });\n this.props.closePage();\n };\n\n render() {\n const { isImage } = this.props;\n const { selectedFile, isLoading } = this.state;\n\n return (\n \n \n ?}\n content=\"Help text\"\n basic\n />\n \n \n \n \n \n \n
\n );\n\n const assetName = (\n \n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n
\n \n \n \n {isOpenCrewModal && (\n \n \n \n \n {linkedOptions}\n \n\n \n {isLinkedAsset && assetsToLink}\n \n\n \n {assetName}\n \n\n \n {assetType}\n \n\n \n {make}\n \n\n \n {model}\n \n\n \n {subModel}\n \n\n \n {year}\n \n\n \n {engineType}\n \n\n \n {serialNumber}\n \n\n \n {customerPlantNo}\n \n\n \n {modifications}\n \n\n \n {linkedERP}\n \n\n {!isLinkedAsset && (\n \n {crewName}\n \n )}\n\n {!isLinkedAsset && (\n \n {operatorName}\n \n )}\n\n {!isLinkedAsset && (\n \n {locationName}\n \n )}\n\n \n {kilometerText}\n \n\n \n \n \n {assetImage && (\n = 3}\n onClick={() => this.setState({ isParentImage: true })}\n />\n \n \n \n \n \n \n \n \n \n \n {AddLocation} \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allLocations: state.assetLocation.allLocations,\n assetList: state.assetForm.assetList,\n assetTypeDetail: state.assetForm.assetTypeDetail,\n response: state.assetForm.response,\n allCrew: state.crew.allCrew,\n assets: state.assets.assets,\n users: state.crew.users,\n forms: state.forms,\n locationResponse: state.assetLocation.response,\n assetImageResult: state.assetForm.assetImageUrl\n };\n};\n\nconst reducer = {\n ...assetFormReducer,\n ...locationReducer,\n ...crewReducer,\n ...assetLocationReducer\n};\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(AssetForm)\n);\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Message, Grid, Icon, List, Button } from \"semantic-ui-react\";\nimport \"./locationList.css\";\n\nconst LocationList = ({ locations = [], openDeleteBox, openAddLocation, openEditForm }) => {\n return (\n \n
\n \n Note : Upto 3 images only\n
\n {assetImage.length >= 3 ? (\nYou can add 3 images only.
\n ) : null}\n- \n {locations.map((location, l_key) => {\n const { name , _id} = location;\n\n return (\n
\n this.setState({ isEdit: false })}\n onCancel={this.closeEditBox}\n onConfirm={this.updateLocation}\n />\n\n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n \n \n
\n \n \n this.goToPage(\"asset\")}\n icon=\"left arrow\"\n content=\"Go back\"\n labelPosition=\"left\"\n className=\"button-float\"\n />\n \n \n \n \n \n \n {AddLocation} \n {EditModel} \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allLocations: state.assetLocation.allLocations,\n response: state.assetLocation.response,\n forms: state.forms\n };\n};\n\nconst reducer = { ...locationReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(AssetLocation)\n);\n","import { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport * as crewReducer from \"./crew.reducer\";\nimport { withRouter } from \"react-router-dom\";\nimport { Control, Errors } from \"react-redux-form\";\nimport { showErrorToast } from \"../../utils/toastUtils\";\nimport { Modal, Grid, Form, Button, Message } from \"semantic-ui-react\";\nimport Member from \"./Member\";\nimport _ from \"lodash\";\nimport \"./crew.css\";\n\nclass AddCrew extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false\n };\n }\n\n handleChange = (e, data) => {\n const { value } = data;\n this.props.actionSetMemberInfo(\"isPortalUser\", value);\n this.props.actionSetMemberInfo(\"value\", \"\");\n };\n\n setUser = async (e, data) => {\n const { value } = data;\n\n this.props.actionSetMemberInfo(\"value\", value);\n };\n\n manageMember = async (type, index) => {\n const { crewForm } = this.props;\n const { members } = crewForm;\n let all_members = [...members];\n if (type === \"add\") {\n this.addNewMember(all_members);\n } else if (type === \"remove\") {\n this.removeMember(all_members, index);\n }\n };\n\n addNewMember = all_members => {\n const { memberForm } = this.props;\n const { value } = memberForm;\n if (value.length <= 0) {\n return;\n }\n //let isAvailable = _.find(all_members, { value });\n let isAvailable = _.filter(all_members, val => {\n return val.value.toLowerCase() === value.toLowerCase();\n });\n if (isAvailable.length > 0) {\n return showErrorToast(\"Member is already added in crew\");\n }\n\n all_members.push(memberForm);\n this.props.actionSetMembers(all_members);\n this.props.actionSetMemberInfo(\"value\", \"\");\n };\n\n removeMember = (all_members, index) => {\n all_members.splice(index, 1);\n this.props.actionSetMembers(all_members);\n };\n\n manageCrewCall = async () => {\n await this.setState({ isLoading: true });\n await this.props.manageCrew();\n this.setState({ isLoading: false });\n };\n\n textHandle = event => {\n // var newValue = event.target.value;\n const { target } = event;\n const { value } = target;\n let newValue = value;\n if (newValue.length === 0 && event.which === 32) {\n event.preventDefault();\n }\n };\n\n render() {\n const {\n isForm,\n closeForm,\n isMember,\n crewForm,\n memberForm,\n users,\n isError,\n errorMessage\n } = this.props;\n\n const { isLoading } = this.state;\n const CrewName = (\n \n
\n \n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n \n \n
\n \n \n this.openAddCrewForm()}\n size=\"tiny\"\n color=\"black\"\n /> */}\n \n \n \n\n \n \n \n \n \n this.toggleCrewForm(false, false)}\n isError={isError}\n errorMessage={errorMessage}\n />\n */}\n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n crews: state.crew.crews,\n isMember: state.crew.isMember,\n response: state.crew.response,\n totalPages: state.crew.totalPages,\n forms: state.forms,\n users: state.crew.users\n };\n};\n\nconst reducer = { ...crewReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(CrewManagement)\n);\n","import React from \"react\";\nimport { Grid } from 'semantic-ui-react';\n\n\nconst ServerErrorPage = () => (\n \n
\n Coming soon
\n \n\n {/*\n {crews.length ? (\n
\n \n
\n Go Back \n
\n Oops 500 !
\nSomething went wrong
\n\n\n Please refresh the screen and try again or get in touch with BOA if the problem persists.\n
\n\n Go Back \n
\n \n \n \n \n\n \n \n \n
\n );\n\n const priceCheck = (\n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n {from}\n \n\n \n {quantityJSX}\n \n\n \n {priceCheck}\n \n\n \n {soldTo}\n \n\n \n {notes}\n \n\n \n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allInventory: state.inventory.allInventory,\n stock: state.inventory.stock,\n account: state.auth.user.account,\n forms: state.forms,\n response: state.inventory.response\n };\n};\n\nconst reducer = { ...inventoryReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(SellStock)\n);\n","import { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport { withRouter } from \"react-router-dom\";\nimport { Control, Errors } from \"react-redux-form\";\nimport NumericInput from \"react-numeric-input\";\nimport Loader from \"../../components/Loader\";\nimport * as inventoryReducer from \"./inventory.reducer\";\nimport LocationDropdown from \"../../components/LocationDropdown\";\nimport { Grid, Divider, Form, Button, Message } from \"semantic-ui-react\";\n\nconst CONSUME_STOCK = \"consumeStockForm\";\n\nclass ConsumeStock extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false,\n stockId: \"\",\n inventoryType: \"\",\n location: \"\",\n value: \"\"\n };\n }\n\n setLocation = (e, data) => {\n const { value } = data;\n this.props.actionInventorySetFormField(`${CONSUME_STOCK}.location`, value);\n };\n\n consumeStock = async e => {\n const { forms } = this.props;\n const { consumeStockForm } = forms;\n this.setState({ isLoading: true });\n await this.props.actionConsumeStock(consumeStockForm);\n this.setState({ isLoading: false });\n };\n\n textHandle = event => {\n // var newValue = event.target.value;\n const { target } = event;\n const { value } = target;\n let newValue = value;\n if (newValue.length === 0 && event.which === 32) {\n event.preventDefault();\n }\n };\n\n quantityChangeHandler = (e, data) => {\n this.props.actionSetQuantity(`${CONSUME_STOCK}.quantity`, e);\n };\n\n render() {\n const { isLoading } = this.state;\n const { forms, stock, isError, errorMessage } = this.props;\n const { location } = forms.consumeStockForm;\n const { locationQuantity } = stock;\n\n const fromLocations = [];\n\n Object.keys(locationQuantity).forEach(function(key) {\n if (locationQuantity[key] != null && locationQuantity[key] > -1) {\n fromLocations.push({ name: key, quantity: locationQuantity[key] });\n }\n });\n\n const locationDetail = (\n \n \n \n \n \n\n \n \n \n
\n );\n\n const notes = (\n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n {locationDetail}\n \n\n \n {quantity}\n \n\n \n {notes}\n \n\n \n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allInventory: state.inventory.allInventory,\n stock: state.inventory.stock,\n response: state.inventory.response,\n forms: state.forms\n };\n};\n\nconst reducer = { ...inventoryReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(ConsumeStock)\n);\n","import _ from \"lodash\";\nimport { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport { withRouter } from \"react-router-dom\";\nimport { Control, Errors } from \"react-redux-form\";\nimport NumericInput from \"react-numeric-input\";\nimport Loader from \"../../components/Loader\";\nimport * as assetReducer from \"../Asset/asset.reducer\";\nimport * as inventoryReducer from \"./inventory.reducer\";\nimport * as assetDetailReducer from \"../AssetDetails/assetDetail.reducer\";\n\nimport LocationDropdown from \"../../components/LocationDropdown\";\nimport {\n Grid,\n Divider,\n Form,\n Button,\n Message,\n Dropdown\n} from \"semantic-ui-react\";\n\nconst ATTACH_TO_ASSET = \"attachToAssetForm\";\nlet positionList = [];\n\nclass AttachToAsset extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false,\n positionList,\n isDropDownFlag: false,\n value: 1,\n stockId: \"\",\n inventoryType: \"\",\n location: \"\",\n searchText: \"\"\n };\n }\n componentDidMount = async () => {\n await this.props.actionGetAllAsset();\n await this.setQuantity(1);\n const { individualStock } = this.props;\n const {\n hoseId = \"\",\n hoseUniqueCode = \"\",\n type,\n description = \"\"\n } = individualStock;\n if (type === \"HOSE_ASSEMBLY\") {\n await this.props.actionInventorySetFormField(\n `${ATTACH_TO_ASSET}.hoseId`,\n hoseId\n );\n await this.props.actionInventorySetFormField(\n `${ATTACH_TO_ASSET}.hoseUniqueCode`,\n hoseUniqueCode\n );\n await this.props.actionInventorySetFormField(\n `${ATTACH_TO_ASSET}.description`,\n description\n );\n }\n };\n\n setAssetId = async (e, data) => {\n const { value } = data;\n await this.props.actionInventorySetFormField(\n `${ATTACH_TO_ASSET}.assetId`,\n value\n );\n const { forms } = this.props;\n const { attachToAssetForm } = forms;\n const { assetId } = attachToAssetForm;\n await this.props.actionGetAttachedHoses(assetId);\n this.setState({\n isDropDownFlag: true\n });\n };\n\n setLocation = (e, data) => {\n const { value } = data;\n this.props.actionInventorySetFormField(\n `${ATTACH_TO_ASSET}.location`,\n value\n );\n };\n\n setQuantity = value => {\n if (this.props.individualStock.type === \"HOSE_ASSEMBLY\") {\n this.props.actionSetQuantity(`${ATTACH_TO_ASSET}.quantity`, value);\n } else {\n let value = \"\";\n this.props.actionSetQuantity(`${ATTACH_TO_ASSET}.quantity`, value);\n }\n };\n\n attachToAsset = async () => {\n const { forms } = this.props;\n const { attachToAssetForm } = forms;\n\n this.setState({ isLoading: true });\n await this.props.actionAssignStock(attachToAssetForm);\n this.setState({ isLoading: false });\n };\n\n clearErrorMessage = () => {\n this.setState({\n errorMessageflag: false,\n isError: false,\n errorMessage: \"\"\n });\n };\n\n handleChangePosition = (e, data) => {\n const { value } = data;\n this.props.actionSetPositionField(\"position\", value);\n this.setState({ position: value });\n this.props.actionInventorySetFormField(\n `${ATTACH_TO_ASSET}.position`,\n value\n );\n };\n\n handleAddition = (e, { value }) => {\n this.setState({\n positionList: [{ text: value, value }, ...this.state.positionList]\n });\n };\n\n quantityChangeHandler = (e, data) => {\n this.props.actionSetQuantity(`${ATTACH_TO_ASSET}.quantity`, e);\n };\n\n render() {\n const { isLoading, isDropDownFlag } = this.state;\n const {\n forms,\n stock,\n assets,\n attachedHoses,\n isError,\n errorMessage\n } = this.props;\n const { location, assetId, position } = forms.attachToAssetForm;\n const { locationQuantity } = stock;\n let { positionList } = this.state;\n const fromLocations = [];\n let assetList = [];\n if (assets && assets.length) {\n _.map(assets, asset => {\n assetList.push({\n text: asset.name,\n value: asset._id\n });\n });\n }\n\n if (attachedHoses && attachedHoses.length) {\n _.map(attachedHoses, hose => {\n positionList.push({\n text: hose.position,\n value: hose.position\n });\n });\n positionList = _.uniqBy(positionList, name => {\n return name.text;\n });\n }\n\n Object.keys(locationQuantity).forEach(function(key) {\n if (locationQuantity[key] != null && locationQuantity[key] > -1) {\n fromLocations.push({ name: key, quantity: locationQuantity[key] });\n }\n });\n\n const assetName = (\n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n {assetName}\n \n\n {this.props.individualStock.type === \"HOSE_ASSEMBLY\" ? (\n \n {positionOfHose}\n \n ) : null}\n\n \n {locationDetail}\n \n\n {this.props.individualStock.type === \"HOSE_ASSEMBLY\" ? (\n \n {hoseQuantity}\n \n ) : (\n \n {quantity}\n \n )}\n\n \n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allInventory: state.inventory.allInventory,\n assets: state.assets.assets,\n stock: state.inventory.stock,\n forms: state.forms,\n attachedHoses: state.assetDetail.attachedHoses,\n response: state.inventory.response\n };\n};\n\nconst reducer = { ...inventoryReducer, ...assetReducer, ...assetDetailReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(AttachToAsset)\n);\n","import React from \"react\";\nimport { Item } from \"semantic-ui-react\";\n\nconst resultRenderer = ({ stockCode, description, _id, type }) => {\n return (\n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n {from}\n \n\n \n {to}\n \n\n \n {quantity}\n \n\n \n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allInventory: state.inventory.allInventory,\n locations: state.inventoryLocation.locations,\n stock: state.inventory.stock,\n response: state.inventory.response,\n forms: state.forms\n };\n};\n\nconst reducer = { ...inventoryReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(TransferLocation)\n);\n","import _ from \"lodash\";\nimport SellStock from \"./SellStock\";\nimport { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport ConsumeStock from \"./ConsumeStock\";\nimport { bindActionCreators } from \"redux\";\nimport AttachToAsset from \"./AttachToAsset\";\nimport ResultRenderer from \"./ResultRender\";\nimport Loader from \"../../components/Loader\";\nimport MetaData from \"../../components/MetaData\";\nimport TransferLocation from \"./TransferLocation\";\nimport * as inventoryReducer from \"./inventory.reducer\";\nimport { getErrorMessage } from \"../../utils/error.utils\";\nimport { showSuccessToast } from \"../../utils/toastUtils\";\nimport StockActivity from \"../../components/StockActivity\";\nimport InventoryList from \"../../components/InventoryList\";\nimport {\n Grid,\n Divider,\n Icon,\n Button,\n Modal,\n Search,\n Pagination,\n Dropdown\n} from \"semantic-ui-react\";\nimport * as locationReducer from \"../InventoryLocation/inventoryLocation.reducer\";\nimport LocationDropdown from \"../../components/LocationDropdown\";\nimport \"./inventory.css\";\n\nconst ID = \"stockId\";\nconst STOCK_CODE = \"stockCode\";\nconst DESCRIPTION = \"stockDescription\";\nconst PRICE = \"price\";\nconst TRANSFER_FORM = \"transferLocationForm\";\nconst SELL_STOCK = \"sellStockForm\";\nconst CONSUME_STOCK = \"consumeStockForm\";\nconst ATTACH_TO_ASSET = \"attachToAssetForm\";\n\nconst paginationLimit = 20;\nclass Inventory extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false,\n formHeader: \"\",\n type: \"\",\n isError: false,\n errorMessage: \"\",\n stockId: \"\",\n inventoryType: \"\",\n location: \"\",\n activePage: 1,\n value: \"\",\n inventoryIndex: \"\"\n };\n }\n\n componentDidMount = async () => {\n this.getInventories(0);\n this.props.actionGetAllLocationToDropdown();\n this.props.actionsGetTypes();\n };\n\n getInventories = async pageNumber => {\n const { stockId, inventoryType, location, value: searchText } = this.state;\n this.setState({ isLoading: true });\n await this.props.actionGetInventories(\n paginationLimit,\n pageNumber,\n stockId,\n inventoryType,\n location,\n searchText\n );\n this.setState({ isLoading: false });\n };\n\n goToAddStock = () => {\n this.props.history.push(\"/stock\");\n };\n\n goToPageBack = path => {\n this.props.history.goBack();\n };\n\n goToPage = path => {\n let url = `/${path}`;\n this.props.history.push(url);\n };\n\n updateState = (isError, errorMessage) => {\n this.setState({ isError, errorMessage });\n };\n\n openAddStock = inventory => {\n this.addParamsToUrl({ inventory });\n };\n\n addParamsToUrl = ({ inventory }) => {\n let { _id, stockCode, description, price } = inventory;\n this.props.history.push({\n pathname: \"/stock\",\n search: `?${ID}=${_id}&${STOCK_CODE}=${stockCode}&${DESCRIPTION}=${description}&${PRICE}=${price}`\n });\n };\n\n openForm = (stock, formHeader, type) => {\n this.setState({\n formHeader,\n type,\n isError: false,\n errorMessage: \"\",\n individualStock: stock\n });\n const { stockCode } = stock;\n this.props.actionSetStock(stock);\n if (type === \"transfer\") {\n this.props.actionResetForm(TRANSFER_FORM);\n this.props.actionInventorySetFormField(\n `${TRANSFER_FORM}.stockCode`,\n stockCode\n );\n }\n if (type === \"sell\") {\n this.setInitialSellValue(stock);\n }\n\n if (type === \"consume\") {\n this.props.actionResetForm(CONSUME_STOCK);\n this.props.actionInventorySetFormField(\n `${CONSUME_STOCK}.stockCode`,\n stockCode\n );\n }\n if (type === \"attach\") {\n this.props.actionResetForm(ATTACH_TO_ASSET);\n this.props.actionInventorySetFormField(\n `${ATTACH_TO_ASSET}.stockCode`,\n stockCode\n );\n }\n\n this.props.actionToggleModal(true);\n };\n\n setInitialSellValue = stock => {\n let { stockCode, price } = stock;\n this.props.actionResetForm(SELL_STOCK);\n this.props.actionInventorySetFormField(\n `${SELL_STOCK}.stockCode`,\n stockCode\n );\n\n const { account } = this.props;\n const { priceMargin } = account;\n if (priceMargin && price) {\n let margin = (price * priceMargin) / 100;\n price = (price + margin).toFixed(2);\n }\n this.props.actionInventorySetFormField(`${SELL_STOCK}.price`, price);\n };\n\n closeForm = formName => {\n this.props.actionResetForm(formName);\n this.props.actionToggleModal(false);\n };\n\n transferLocation = async () => {\n const { forms } = this.props;\n const { transferLocationForm } = forms;\n const { quantity } = transferLocationForm;\n if (\n transferLocationForm.toLocation === \"\" ||\n transferLocationForm.fromLocation === \"\"\n ) {\n let message = await getErrorMessage(1105);\n return this.updateState(true, message);\n }\n\n if (quantity === 0) {\n this.setState({\n isError: true,\n errorMessage: \"Quantity can not be 0\"\n });\n return;\n }\n\n this.setState({ isLoading: true });\n await this.props.actionTransferLocation(transferLocationForm);\n const { response } = this.props;\n const { status, data } = response;\n if (status === 200) {\n showSuccessToast(\"Location Transfer successfully\");\n this.setState({ isLoading: false });\n } else {\n const { code } = data;\n let message = await getErrorMessage(code);\n return this.updateState(true, message);\n // return this.setState({\n // isError: true,\n // errorMessage: message\n // });\n }\n this.closeForm(TRANSFER_FORM);\n this.props.actionGetInventories();\n };\n\n sellStock = async () => {\n this.setState({ isLoading: true });\n const { forms } = this.props;\n const { sellStockForm } = forms;\n const { quantity } = sellStockForm;\n if (sellStockForm.location === \"\") {\n let message = await getErrorMessage(1105);\n return this.updateState(true, message);\n }\n if (quantity === 0) {\n this.setState({\n isError: true,\n errorMessage: \"Quantity can not be 0\"\n });\n return;\n }\n\n await this.props.actionSellStock(sellStockForm);\n const { response } = this.props;\n const { status, data } = response;\n if (status === 200) {\n showSuccessToast(\"You have sold a stack\");\n this.setState({ isLoading: false });\n } else {\n const { code } = data;\n let message = await getErrorMessage(code);\n return this.updateState(true, message);\n }\n this.closeForm(SELL_STOCK);\n this.props.actionGetInventories();\n };\n\n consumeStock = async () => {\n this.setState({ isLoading: true });\n const { forms } = this.props;\n const { consumeStockForm } = forms;\n const { location, quantity } = consumeStockForm;\n if (consumeStockForm.location === \"\") {\n let message = await getErrorMessage(1105);\n return this.updateState(true, message);\n }\n if (!location) {\n this.setState({\n isError: true,\n errorMessage: \"From is required\"\n });\n return;\n }\n if (quantity === 0) {\n this.setState({\n isError: true,\n errorMessage: \"Quantity can not be 0\"\n });\n return;\n }\n await this.props.actionConsumeStock(consumeStockForm);\n\n const { response } = this.props;\n const { status } = response;\n if (status === 200) {\n showSuccessToast(\"Your have consumed a stock\");\n this.setState({ isLoading: false });\n } else {\n const { data } = response;\n const { code } = data;\n let message = await getErrorMessage(code);\n return this.updateState(true, message);\n }\n this.closeForm(CONSUME_STOCK);\n this.props.actionGetInventories();\n };\n\n attachToAsset = async () => {\n this.setState({ isLoading: true });\n const { forms } = this.props;\n const { attachToAssetForm } = forms;\n const { quantity } = attachToAssetForm;\n if (attachToAssetForm.assetId === \"\" || attachToAssetForm.location === \"\") {\n let message = await getErrorMessage(1105);\n return this.updateState(true, message);\n }\n if (quantity === 0) {\n this.setState({\n isError: true,\n errorMessage: \"Quantity can not be 0\"\n });\n return;\n }\n await this.props.actionAssignStock(attachToAssetForm);\n const { response } = this.props;\n const { status, data } = response;\n if (status === 200) {\n showSuccessToast(\"Your have attached a stock\");\n this.setState({ isLoading: false });\n } else {\n const { code } = data;\n if (code === 1102) {\n return this.setState({\n isError: true,\n errorMessage: \"Selected location does not have sufficient stock\"\n });\n }\n let message = await getErrorMessage(code);\n return this.updateState(true, message);\n }\n this.closeForm(ATTACH_TO_ASSET);\n await this.props.actionGetInventories();\n };\n\n handleResultSelect = (e, { result }) => {\n const { stockCode, _id } = result;\n\n const value = `${stockCode}`;\n this.setState({ stockId: _id, value });\n };\n\n handleSearchChange = async (e, { value }) => {\n e.preventDefault();\n this.setState({ isLoading: true });\n if (!value) {\n this.setState({ value, isLoading: false });\n return this.getInventories(0);\n }\n await this.props.actionSearchStock(value);\n this.setState({ value, searchMessage: null, isLoading: false });\n };\n\n handlePaginationChange = (...params) => {\n document.body.scrollTop = document.documentElement.scrollTop = 0;\n const options = params[1];\n const { activePage } = options;\n const { totalPages } = this.props;\n\n if (totalPages === 1) {\n return;\n }\n\n this.setState({ activePage });\n this.getInventories(activePage - 1);\n };\n\n setType = (e, data) => {\n const { value } = data;\n this.setState({ inventoryType: value });\n };\n\n setLocation = (e, data) => {\n const { value } = data;\n this.setState({ location: value });\n };\n\n clearFilter = async () => {\n await this.setState({\n stockId: \"\",\n inventoryType: \"\",\n location: \"\",\n value: \"\"\n });\n this.getInventories(0);\n };\n\n textHandle = event => {\n // var newValue = event.target.value;\n const { target } = event;\n const { value } = target;\n let newValue = value;\n if (newValue.length === 0 && event.which === 32) {\n event.preventDefault();\n }\n };\n\n render() {\n const {\n isLoading,\n formHeader,\n type,\n isError,\n errorMessage,\n value,\n activePage,\n inventoryType,\n location\n } = this.state;\n const {\n allInventory,\n isModalOpen,\n searchSuggestion,\n stockType,\n locations\n } = this.props;\n const { totalPages, inventories, stockActivity } = allInventory;\n\n const allStock = [];\n\n _.map(stockType, type => {\n allStock.push({ text: type, value: type });\n });\n\n const ActionButton = (\n \n \n this.getInventories(0)}\n size=\"small\"\n color=\"black\"\n />\n
\n );\n\n return (\n \n Loading,please wait \n )}\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n\n \n \n {ActionButton}\n \n\n \n \n \n {searchBox}\n \n \n {typeFilter}\n \n \n {locationFilter}\n \n \n {searchButton}\n \n \n \n\n \n \n */}\n \n {/* \n \n \n {OpenModal}\n \n */}\n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n searchSuggestion: state.inventory.searchSuggestion,\n allInventory: state.inventory.allInventory,\n isModalOpen: state.inventory.isModalOpen,\n locations: state.inventoryLocation.locations,\n response: state.inventory.response,\n stockType: state.inventory.stockTypes,\n account: state.auth.user.account,\n forms: state.forms\n };\n};\n\nconst reducer = { ...inventoryReducer, ...locationReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Inventory);\n","import React from \"react\";\nimport { Breadcrumb } from \"semantic-ui-react\";\n\nconst FamilyBreadCrumb = (props) => {\n const { secondaryGrpDisplayName, tertiaryGrpDisplayName } = props;\n \n return (\n \n
\n Coming soon
\n \n\n {/*\n {!_.isEmpty(inventories) ? (\n
\n \n
\n );\n};\n\nresultRenderer.propTypes = {\n stockDescription: PropTypes.string,\n stockCode: PropTypes.string,\n price: PropTypes.number,\n type: PropTypes.string,\n secondaryGrpDisplayName: PropTypes.string,\n tertiaryGrpDisplayName: PropTypes.string,\n productFamilyDisplayName: PropTypes.string\n};\n \nexport default resultRenderer;","import \"./stockForm.css\";\nimport polyglot from \"../../i18n\";\nimport { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport Loader from \"../../components/Loader\";\nimport { withRouter } from \"react-router-dom\";\nimport MetaData from \"../../components/MetaData\";\nimport NumericInput from \"react-numeric-input\";\nimport { Control, Errors } from \"react-redux-form\";\nimport * as stockReducer from \"../StockReview/stock.reducer\";\nimport LocationDropdown from \"../../components/LocationDropdown\";\nimport { showSuccessToast } from \"../../utils/toastUtils\";\nimport {\n Grid,\n Divider,\n Icon,\n Form,\n Button,\n Message,\n Radio,\n Search,\n Modal\n} from \"semantic-ui-react\";\nimport ResultRenderer from \"./ResultRenderer\";\nimport { getErrorMessage } from \"../../utils/error.utils\";\nimport inventoryLocationReducer, * as locationReducer from \"../InventoryLocation/inventoryLocation.reducer\";\nimport { apiGetProductDetails } from \"../HoseMaker/hoseMaker.api\";\nimport _ from \"lodash\";\nimport Description from \"../Search/Description\";\n\nconst ID = \"stockId\";\nconst STOCK_CODE = \"stockCode\";\nconst DESCRIPTION = \"stockDescription\";\nconst PRICE = \"price\";\n\nconst STOCK_FORM = \"stockForm\";\nclass StockForm extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false,\n isError: false,\n errorMessage: \"\",\n value: \"\",\n filter: \"\",\n searchMessage: null,\n isBoaStock: true,\n updateNonBoaStock: true,\n isOpenForm: false\n };\n }\n componentWillUnmount = async () => {\n await this.props.actionResetStockForm();\n };\n\n componentDidMount = async () => {\n const urlParams = this.getUrlParams();\n if (urlParams) {\n this.setState({\n updateNonBoaStock: false\n });\n this.setInitialForm(urlParams);\n await this.props.actionResetStockForm();\n await this.props.actionGetAllLocationToDropdown();\n return;\n }\n await this.props.actionGetAllLocationToDropdown();\n };\n\n setInitialForm = async stock => {\n await this.props.actionResetStockForm();\n let { _id, stockCode, stockDescription, price } = stock;\n const data_to_set = {\n _id,\n stockCode,\n stockDescription,\n price,\n isBoaStock: false\n };\n this.setState({\n isBoaStock: false\n });\n this.props.actionSetInitialForm(data_to_set);\n await this.props.actionSetStockFormField(\"quantity\", 1);\n };\n\n getUrlParams = () => {\n this.props.actionResetStockForm();\n let url = document.location.href;\n url = new URL(url);\n\n const { searchParams } = url;\n const _id = searchParams.get(ID);\n const stockCode = searchParams.get(STOCK_CODE);\n const stockDescription = searchParams.get(DESCRIPTION);\n\n const price = searchParams.get(PRICE);\n\n if (!!_id || !!stockCode || stockDescription || price) {\n return { _id, stockCode, stockDescription, price };\n }\n\n return null;\n };\n\n goBack = () => {\n this.props.history.push(\"/inventory\");\n };\n\n setLocation = (e, { value }) => {\n this.setState({ isError: false });\n this.props.actionSetStockFormField(\"location\", value);\n };\n\n submitStockForm = async e => {\n const { forms } = this.props;\n const { stockForm } = forms;\n const { location, quantity, price, stockCode } = stockForm;\n if (!location) {\n return this.setState({\n isError: true,\n errorMessage: \"Location is required\"\n });\n } else {\n this.clearErrorMessage();\n }\n if (quantity === 0) {\n this.setState({\n isError: true,\n errorMessage: \"Quantity can not be 0\"\n });\n return;\n } else {\n this.clearErrorMessage();\n }\n if (price === 0) {\n this.setState({\n isError: true,\n errorMessage: \"Price can not be 0\"\n });\n return;\n } else {\n this.clearErrorMessage();\n }\n\n this.setState({ isLoading: true });\n const { isBoaStock } = this.state;\n const dataToSend = { ...stockForm, isBoaStock };\n await this.props.actionAddStock(dataToSend);\n const { response } = this.props;\n const { status } = response;\n this.setState({ isLoading: false });\n if (status === 200) {\n showSuccessToast(\"Stock added\");\n } else {\n // const { data } = response;\n const { code } = response;\n let message = await getErrorMessage(code);\n return this.setState({\n isError: true,\n errorMessage: message\n });\n }\n this.goBack();\n this.clearErrorMessage();\n };\n\n textHandle = event => {\n const { target } = event;\n const { value } = target;\n let newValue = value;\n if (newValue.length === 0 && event.which === 32) {\n event.preventDefault();\n }\n };\n\n quantityChangeHandler = (e, data) => {\n this.props.actionSetQuantity(`${STOCK_FORM}.quantity`, e);\n };\n\n priceChangeHandler = (e, data) => {\n this.props.actionSetQuantity(`${STOCK_FORM}.price`, e);\n };\n\n handleRadioChange = async (e, { value }) => {\n this.setState({ isBoaStock: value });\n this.props.actionSetRadioButtonField(`${STOCK_FORM}.isBoaStock`, value);\n await this.props.actionResetStockForm();\n };\n\n handleResultSelect = async (e, { result }) => {\n const { stockCode, stockDescription } = result;\n //const { filter } = this.state;\n this.setState({ value: stockCode, isLoading: true });\n const productDetails = await apiGetProductDetails(stockCode);\n const { data = {} } = productDetails;\n const { price } = data;\n await this.props.actionBOAStockSetFormField(\n `${STOCK_FORM}.stockCode`,\n stockCode\n );\n this.props.actionSetQuantity(`${STOCK_FORM}.price`, price);\n this.props.actionSetQuantity(\n `${STOCK_FORM}.stockDescription`,\n stockDescription\n );\n this.setState({ isLoading: false });\n\n //this.callSearchApi(value, filter, 1);\n };\n\n handleSearchChange = async (e, { value }) => {\n e.preventDefault();\n this.setState({ value, searchMessage: null, isLoading: true });\n const { filter } = this.state;\n await this.props.actionBoaStockAutoComplete(value, filter);\n this.setState({ isLoading: false });\n };\n\n clearErrorMessage = () => {\n this.setState({\n isError: false,\n errorMessage: \"\"\n });\n };\n\n closeForm = () => {\n this.setState({\n isOpenForm: false\n });\n };\n\n addLocation = async () => {\n this.setState({ isLoading: true });\n this.props.actionResetLocationForm();\n const { locationForm } = this.props.forms;\n\n const { _id, ...data_to_save } = locationForm;\n await this.props.actionAddLocation(data_to_save);\n const { locationResponse } = this.props;\n const { status, data } = locationResponse;\n if (status === 200) {\n this.props.actionGetAllLocationToDropdown();\n showSuccessToast(\"Location added\");\n this.setState({ isLoading: false, isOpenForm: false });\n } else {\n const { code } = data;\n let message = await getErrorMessage(code);\n return this.updateState(true, message);\n }\n this.clearErrorMessage();\n //this.setState({ isLoading: false });\n };\n\n openAddLocation = () => {\n this.clearErrorMessage();\n this.setState({ isOpenForm: true });\n };\n\n render() {\n const {\n isLoading,\n isError,\n errorMessage,\n isBoaStock,\n value,\n updateNonBoaStock,\n isOpenForm\n //filter,\n //searchMessage\n } = this.state;\n const { locations, forms, autoCompleteResult = [] } = this.props;\n const { stockForm } = forms;\n const { location, price, quantity, stockCode } = stockForm;\n\n const stockRadioButton = (\n \n ({stockCode}) {stockDescription}{\" \"}\n
\n \n
\n \n {isBoaStock ? (\n \n \n {price}\n \n ) : (\n \n \n \n )}\n
\n );\n\n const description = (\n \n \n {isLoading && (\n Loading,please wait \n )}\n\n \n \n \n \n
\n \n \n \n \n \n \n\n \n \n \n \n {updateNonBoaStock ? stockRadioButton : \"\"}\n \n \n \n \n {isBoaStock ? searchBoaStock : stockCodeJSX}\n \n\n \n {stockLocation}\n \n \n {quantityJSX}\n \n\n \n {priceJSX}\n \n\n \n {description}\n \n \n \n \n \n {!isLoading && (\n \n Submit\n \n )}\n {isLoading && (\n \n )}\n \n \n \n {AddLocation} \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n // searchSuggestion: state.inventory.searchSuggestion,\n autoCompleteResult: state.search.autoCompleteResult,\n locations: state.inventoryLocation.locations,\n response: state.stock.response,\n forms: state.forms,\n locationResponse: state.inventoryLocation.response\n };\n};\n\nconst reducer = { ...locationReducer, ...stockReducer };\n\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(StockForm)\n);\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Grid,Icon } from \"semantic-ui-react\";\nimport \"./stockReviewList.css\";\n\nconst StockDetails = ({ stock, goToAudits, openChangeModal }) => {\n const { description, location, quantity, stockCode, notes } = stock;\n\n const InventoryBody = () => {\n return (\n \n
\n {description}
\n\n Quantity:\n openChangeModal({ location, quantity, stockCode, notes }) }\n className=\"link_To_Page\"\n >\n \n
\n {quantity}
\n \n- \n {allStock.map(stock => {\n const uniqueKey = stock.stockCode + stock.location;\n return (\n
\n this.setState({ isConformForm: false })}\n onConfirm={this.updateStock}\n />\n \n {isLoading && (\n Loading,please wait \n )}\n\n \n \n \n \n
\n \n \n \n \n \n {locationDropdown}\n \n \n \n \n \n \n \n {AddModal}\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allStock: state.stock.allStock,\n locationName: state.stock.locationName,\n locations: state.inventoryLocation.locations,\n isModalOpen: state.inventory.isModalOpen,\n forms: state.forms\n };\n};\n\nconst reducer = { ...stockReducer, ...inventoryLocation };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(StockReview)\n);\n","import { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport Loader from \"../../components/Loader\";\nimport { withRouter } from \"react-router-dom\";\nimport MetaData from \"../../components/MetaData\";\nimport { Control, Errors } from \"react-redux-form\";\nimport * as locationReducer from \"./inventoryLocation.reducer\";\nimport { showSuccessToast, showErrorToast } from \"../../utils/toastUtils\";\nimport {\n Grid,\n Divider,\n Icon,\n Button,\n Modal,\n Form,\n Confirm,\n Message\n} from \"semantic-ui-react\";\nimport \"./inventoryLocation.css\";\nimport polyglot from \"../../i18n\";\nimport LocationList from \"../../components/LocationList\";\nimport { getErrorMessage } from \"../../utils/error.utils\";\n\nclass AssetLocation extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false,\n isOpenForm: false,\n isDelete: false,\n isEdit: false,\n isEditForm: false,\n locationId: \"\",\n formId: null\n };\n }\n\n componentDidMount = async () => {\n this.setState({ isLoading: true });\n await this.props.actionGetAllLocation();\n this.setState({ isLoading: false });\n };\n\n openAddLocation = () => {\n this.setState({ isOpenForm: true });\n };\n\n goBack = () => {\n this.props.history.push(\"/inventory\");\n };\n\n addLocation = async () => {\n this.setState({ isLoading: true });\n this.props.actionResetLocationForm();\n const { locationForm } = this.props.forms;\n const { _id, ...data_to_save } = locationForm;\n\n await this.props.actionAddLocation(data_to_save);\n\n const { response } = this.props;\n const { status, data } = response;\n if (status === 200) {\n this.props.actionGetAllLocation();\n showSuccessToast(\"Location added\");\n this.setState({ isLoading: false, isOpenForm: false });\n } else {\n const { code } = data;\n let message = await getErrorMessage(code);\n return this.updateState(true, message);\n }\n };\n\n updateState = (isError, errorMessage) => {\n this.setState({ isError, errorMessage, isLoading: false });\n };\n\n updateLocation = async () => {\n this.closeEditBox();\n this.setState({ isLoading: true });\n const { forms } = this.props;\n const { stockForm } = forms;\n const data = {\n name: stockForm.name\n };\n this.setState({ isEditForm: false });\n await this.props.actionUpdateLocation(this.state.formId, data);\n const { locationName } = this.props;\n await this.props.actionGetAllLocation(locationName);\n this.setState({ isLoading: false });\n };\n\n changeLocation = value => {\n const { forms } = this.props;\n const { stockForm } = forms;\n if (stockForm.name === undefined) {\n this.setState({ isEdit: false });\n } else {\n this.setState({ isEdit: true });\n }\n };\n\n openDeleteBox = id => {\n this.setState({ locationId: id, isDelete: true });\n };\n\n openEditForm = async data => {\n this.setState({ isEditForm: true, formId: data._id, name: data.name });\n await this.props.editInventoryLocation(\"name\", data.name);\n };\n\n deleteLocation = async () => {\n this.setState({ isLoading: true });\n const { locationId } = this.state;\n await this.props.actionDeleteLocation(locationId);\n const { response } = this.props;\n const { status, data } = response;\n if (status === 200) {\n await this.props.actionGetAllLocation();\n showSuccessToast(\"Location deleted\");\n } else {\n const { code } = data;\n const message = getErrorMessage(code);\n showErrorToast(message);\n }\n this.closeDeleteBox();\n this.setState({ isLoading: false });\n };\n closeDeleteBox = () => this.setState({ isDelete: false, locationId: \"\" });\n\n closeEditBox = () => this.setState({ isEdit: false, name: \"\" });\n\n closeForm = () => {\n this.setState({\n isOpenForm: false,\n isError: false,\n isLoading: false,\n isEdit: false,\n isEditForm: false\n });\n };\n\n textHandle = event => {\n const { target } = event;\n const { value } = target;\n let newValue = value;\n if (newValue.length === 0 && event.which === 32) {\n event.preventDefault();\n }\n };\n\n render() {\n const { allLocations } = this.props;\n const { locations } = allLocations;\n\n const {\n isLoading,\n isOpenForm,\n isDelete,\n isEdit,\n isError,\n errorMessage\n } = this.state;\n\n const AddLocation = (\n \n
\n \n {!_.isEmpty(inventories) ? (\n
\n \n this.setState({ isEdit: false })}\n onCancel={this.closeEditBox}\n onConfirm={this.updateLocation}\n />\n\n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n {AddLocation} \n {EditModel} \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allLocations: state.inventoryLocation.allLocations,\n forms: state.forms,\n response: state.inventoryLocation.response\n };\n};\n\nconst reducer = { ...locationReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(mapStateToProps, mapDispatchToProps)(AssetLocation)\n);\n","import { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport Loader from \"../../components/Loader\";\nimport { withRouter } from \"react-router-dom\";\nimport MetaData from \"../../components/MetaData\";\nimport * as scheduleReducer from \"./schedule.reducer\";\nimport * as assetDetailReducer from \"../AssetDetails/assetDetail.reducer\";\nimport ScheduleList from \"../../components/ScheduleList\";\nimport {\n Grid,\n Icon,\n Divider,\n Button,\n Pagination,\n Menu,\n Dropdown,\n Label\n} from \"semantic-ui-react\";\nimport \"./schedule.css\";\nimport _ from \"lodash\";\nimport RangePicker from \"../../components/DateRangePicker\";\n\nconst paginationLimit = 12;\nclass ScheduleMaintenance extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false,\n activePage: 1,\n fromDate: \"\",\n toDate: \"\",\n assignTo: \"\",\n assetId: \"\",\n assetName: \"\",\n windowWidth: window.innerWidth\n };\n }\n componentWillMount = async () => {\n if (\n this.props.location &&\n this.props.location.state &&\n this.props.location.state.flag === true\n ) {\n this.handleItemClick(\"history\");\n this.setState({ assetId: this.props.location.state.assetId });\n }\n let params = this.props.location.search;\n if (params.indexOf(\"tab=overDue\") > -1) {\n await this.props.toggleHistory(\"overdue\");\n await this.getSchedules(0);\n return;\n }\n };\n\n componentDidMount = async () => {\n this.props.actionGetUsersForDropdown();\n await this.getSchedules(0);\n };\n\n getSchedules = async pageNumber => {\n this.setState({ isLoading: true });\n const { isHistory } = this.props;\n const {\n assignTo = \"\",\n fromDate = \"\",\n toDate = \"\",\n assetId = \"\"\n // assetName = \"\"\n } = this.state;\n await this.props.actionGetSchedules(\n paginationLimit,\n pageNumber,\n isHistory,\n fromDate,\n toDate,\n assignTo,\n assetId\n );\n await this.props.actionGetScheduleCount(fromDate,toDate,assignTo,assetId);\n this.setState({ isLoading: false });\n };\n\n goToPage = path => {\n let url = `/${path}`;\n this.props.history.push(url);\n };\n\n reviewMaintenanceForm = async id => {\n const { isHistory } = this.props;\n\n if (isHistory === \"history\") {\n this.props.history.push(`maintenance/check/${id}`);\n } else {\n this.props.history.push(`/maintenance/review/${id}`);\n }\n };\n\n closeForm = () => this.setState({ isAddSchedule: false });\n\n handlePaginationChange = (...params) => {\n document.body.scrollTop = document.documentElement.scrollTop = 0;\n const options = params[1];\n const { activePage } = options;\n const { totalPages } = this.props;\n\n if (totalPages === 1) {\n return;\n }\n\n this.setState({\n activePage\n });\n this.getSchedules(activePage - 1);\n };\n\n handleItemClick = async name => {\n await this.props.toggleHistory(name);\n this.getSchedules(0);\n };\n\n setAssignedUser = (e, data) => {\n \n const { value } = data;\n \n this.setState({ assignTo: value });\n \n };\n\n setAssetName = (e, data) => {\n const { value } = data;\n this.setState({ assetId: value });\n };\n\n setFromDate = date => {\n this.setState({ fromDate: date });\n };\n setToDate = date => {\n this.setState({ toDate: date });\n };\n\n clearFilter = async () => {\n await this.setState({\n assignTo: \"\",\n fromDate: \"\",\n toDate: \"\",\n assetName: \"\",\n assetId: \"\"\n });\n this.getSchedules(0);\n };\n\n render() {\n const {\n isLoading,\n activePage,\n assignTo,\n fromDate,\n toDate,\n assetId\n } = this.state;\n const { schedules = {}, isHistory, users, counts } = this.props;\n const {\n completed: completedCount,\n pending: pendingCount,\n overdue: overdueCount,\n schedule: scheduleCount\n } = counts;\n const { totalPages, allSchedule = [] } = schedules;\n let assetNameList = [];\n let usersList = [];\n if (users.length) {\n _.map(users, user => {\n const { firstName, lastName, _id } = user;\n usersList.push({\n key: _id,\n text: `${firstName} ${lastName}`,\n value: _id\n });\n });\n }\n\n if (allSchedule.length) {\n _.map(allSchedule, schedule => {\n const { assetName, _id, asset } = schedule;\n assetNameList.push({\n key: _id,\n text: `${assetName}`,\n value: asset\n });\n });\n assetNameList = _.uniqBy(assetNameList, name => {\n return name.text;\n });\n }\n const ActionButton = () => (\n \n
\n \n \n {isLoading && (\n Loading, please wait \n )}\n\n \n \n \n \n
\n \n \n \n \n \n {/* {filters} */}\n \n\n \n \n \n \n \n \n \n */}\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n schedules: state.schedule.schedules,\n isHistory: state.schedule.isHistory,\n users: state.assetDetail.users,\n counts: state.schedule.counts\n };\n};\n\nconst reducer = { ...scheduleReducer, ...assetDetailReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(ScheduleMaintenance)\n);\n","import _ from \"lodash\";\nimport React from \"react\";\nimport polyglot from \"../../i18n\";\nimport PropTypes from \"prop-types\";\nimport { Control, Errors } from \"react-redux-form\";\nimport { Grid, Form, Button, Segment, List } from \"semantic-ui-react\";\n\nconst CheckPoints = ({ manageCheckPoints, forms, addMoreValue, editCheckPointName, editName }) => {\n const { maintenanceForm, checkPointForm } = forms;\n const { data } = maintenanceForm;\n\n const addNewCheckPoint = () => {\n const { field, section } = checkPointForm;\n if (!field || !section) {\n return;\n }\n manageCheckPoints(\"add\");\n };\n\n\n const sectioned = _.groupBy(data, \"section\");\n const CheckPointList = (\n \n
\n Coming soon
\n \n {/*\n {allSchedule.length > 0 ? (\n
\n \n {sectioned &&\n _.map(sectioned, (point, c_key) => {\n return (\n \n \n {c_key}\n
\n \n );\n })}\n
\n );\n\n const section = (\n \n {c_key}\n addMoreValue(c_key)}\n />\n
\n - \n {_.map(point, (item, item_key) => {\n return (\n
Check Points
\n\n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n
\n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n singleForm: state.maintenance.singleForm,\n response: state.maintenance.response,\n checkList: state.maintenance.checkList,\n forms: state.forms\n };\n};\n\nconst reducer = { ...maintenanceReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(MaintenanceForm)\n);\n","import { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport Loader from \"../../components/Loader\";\nimport { withRouter } from \"react-router-dom\";\nimport MetaData from \"../../components/MetaData\";\nimport { showSuccessToast, showErrorToast } from \"../../utils/toastUtils\";\nimport AllMaintenance from \"../../components/MaintenanceList\";\nimport { Grid, Icon, Divider, Button, Confirm } from \"semantic-ui-react\";\nimport * as maintenanceReducer from \"../MaintenanceForm/maintenanceForm.reducer\";\nimport { getErrorMessage } from \"../../utils/error.utils\";\n\nclass MaintenanceForm extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false,\n isDelete: false,\n formId: \"\"\n };\n }\n\n componentDidMount() {\n this.getFormList();\n }\n\n getFormList = () => this.props.actionGetAllForms();\n\n goToPage = path => {\n const url = `/${path}`;\n this.props.history.push(url);\n };\n\n openDeleteBox = form => {\n const { _id } = form;\n this.setState({ isDelete: true, formId: _id });\n };\n\n deleteForm = async () => {\n const { formId } = this.state;\n await this.props.actionDeleteForm(formId);\n const { response } = this.props;\n const { status, data } = response;\n if (status === 200) {\n this.getFormList();\n showSuccessToast(\"Form deleted\");\n } else {\n const { code } = data;\n const errorMessage = getErrorMessage(code);\n showErrorToast(errorMessage);\n }\n this.setState({ isDelete: false });\n };\n\n editForm = form => {\n const { _id } = form;\n this.props.history.push(`/editMaintenanceForm/${_id}`);\n };\n\n render() {\n const { isLoading, isDelete } = this.state;\n const { allForms } = this.props;\n\n return (\n \n
\n \n \n {formRole === \"add\" ? (\n \n {templates}\n \n ) : null}\n \n \n {header} \n\n \n \n \n \n \n \n \n {editCheckPointName} \n
\n \n this.setState({ isDelete: false })}\n onConfirm={this.deleteForm}\n />\n \n {isLoading && (\n Loading,please wait \n )}\n\n \n \n \n \n
\n \n \n \n this.goToPage(\"home\")}\n icon=\"left arrow\"\n labelPosition=\"left\"\n className=\"button-float\"\n content=\"Go back\"\n />\n {/* this.goToPage(\"addMaintenanceForm\")}\n icon=\"plus\"\n size=\"tiny\"\n color=\"black\"\n /> */}\n \n \n \n\n \n\n \n */}\n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allForms: state.maintenance.allForms,\n response: state.maintenance.response,\n forms: state.forms\n };\n};\n\nconst reducer = { ...maintenanceReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(MaintenanceForm)\n);\n","import React from \"react\";\nimport { Grid, Icon, Image } from \"semantic-ui-react\";\nimport _ from \"lodash\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment\";\nimport { stock_operation } from \"../../constants/appConstants\";\n\nconst AuditDetail = ({ audit }) => {\n const {\n stockCode,\n description,\n quantity,\n type,\n createdAt,\n user,\n reviewData,\n soldData,\n attachmentData,\n consumedData,\n transferData,\n addData\n } = audit;\n\n const data =\n reviewData ||\n soldData ||\n attachmentData ||\n consumedData ||\n transferData ||\n addData;\n let dataArrays = [];\n Object.keys(data).forEach(function(key) {\n const startCaseKey = _.startCase(key);\n dataArrays.push({ key: [startCaseKey], value: data[key] });\n });\n\n return (\n \n
\n Coming soon
\n \n\n {/*\n {stockCode}\n {description}\n
\n ) : (\n\n Deleted Asset : \n {attachmentData.assetName}\n
\n )}\n{quantity}
\n{type}: {quantity}
\n- \n {dataArrays.map(item => {\n if (item.key !== \"Asset Id\") {\n if (\n item.key === \"Image Link\" ||\n item.key === \"Right Fitting Vernier Caliper\" ||\n item.key === \"Left Fitting Vernier Caliper\"\n ) {\n return (\n
- \n {item.key} :{\" \"}\n
\n
\n\n \n );\n }\n\n return (\n - \n {item.key} : {item.value}\n \n );\n }\n return ;\n })}\n
\n
{moment(new Date(createdAt)).format(\"LLL\")}
\n- \n {audits.length > 0 ? (\n audits.map((audit, key) => {\n return (\n
\n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n \n
\n \n \n \n \n \n \n \n {Type}{\" \"}\n \n \n {operatorName}{\" \"}\n \n\n \n {type === \"ATTACHED\" && assetTextBox}\n \n\n \n \n \n \n {StockCode}\n \n \n this.setFromDate(date)}\n setEndDate={date => this.setToDate(date)}\n startDate={fromDate}\n endDate={toDate}\n />\n \n \n {actionButtons}\n \n \n \n {!isLoading && (\n \n \n )}\n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allaudit: state.auditTrail.allaudit,\n users: state.crew.users,\n assets: state.assets.assets,\n searchsuggestion: state.auditTrail.searchsuggestion\n };\n};\n\nconst reducer = { ...auditTrailReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(AuditTrail)\n);\n","import React, { Component } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport { Control, Errors } from \"react-redux-form\";\nimport {\n Grid,\n Form,\n Dropdown,\n Radio,\n Confirm,\n Popup,\n Button\n} from \"semantic-ui-react\";\nimport polyglot from \"../../i18n\";\nimport * as assetFormReducer from \"../../containers/AssetForm/assetForm.reducer\";\nimport * as locationReducer from \"../../containers/AssetLocation/assetLocation.reducer\";\nimport * as crewReducer from \"../../containers/CrewManagement/crew.reducer\";\nimport NumericInput from \"react-numeric-input\";\nimport LocationDropdown from \"../LocationDropdown\";\nimport _ from \"lodash\";\nimport moment from \"moment\";\nimport { withRouter } from \"react-router-dom\";\nimport \"./assetInfo.css\";\nimport ViewImage from \"../ViewImage\";\nimport AddImage from \"../../containers/AssetForm/AddImage\";\nimport Loader from \"../../components/Loader\";\n\nclass AssetInfo extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isImageLoading: false,\n isError: false,\n isOpen: false,\n value: \"\",\n isErrorYear: false,\n isParentImage: false,\n isLinkedAssetRequired: true\n };\n }\n\n componentDidMount = async () => {\n this.props.actionGetAllCrew();\n this.props.actionGetAllLocation();\n this.props.getUserList();\n this.props.actionGetAssetsForDropdown();\n };\n\n setCrewName = (e, data) => {\n const { value } = data;\n this.props.actionSetFormField(\"crew\", value);\n };\n\n setLocation = (e, data) => {\n const { value } = data;\n this.props.actionSetFormField(\"location\", value);\n };\n\n setOperator = (e, data) => {\n const { value } = data;\n this.props.actionSetFormField(\"operator\", value);\n };\n\n setKilometer = (e, data) => {\n this.props.actionSetFormField(\"maintenanceUnit\", e);\n };\n\n setLinkedAssetFlag = async (e, data) => {\n const isLinkedAsset = await this.checkLinkedAsset();\n if (isLinkedAsset) {\n return;\n }\n const { value } = data;\n this.props.actionSetFormField(\"isLinkedAsset\", value);\n if (!value) {\n this.props.actionSetFormField(\"linkedAsset\", \"\");\n this.setState({\n isLinkedAssetRequired: true\n });\n } else if (value) {\n this.setState({\n isLinkedAssetRequired: false\n });\n } else {\n this.props.actionSetFormField(\n \"linkedAsset\",\n this.props.asset.linkedAsset\n );\n }\n };\n\n setLinkedAsset = (e, data) => {\n const { value } = data;\n this.props.actionSetFormField(\"linkedAsset\", value);\n };\n\n checkLinkedAsset = () => {\n const { forms } = this.props;\n const { assetForm } = forms;\n if (assetForm.childAssets.length > 0) {\n this.setState({ isOpen: true });\n this.props.actionSetFormField(\"isLinkedAsset\", false);\n return true;\n }\n return false;\n };\n\n textHandle = event => {\n const { target } = event;\n const { value } = target;\n let newValue = value;\n if (newValue.length === 0 && event.which === 32) {\n event.preventDefault();\n }\n };\n\n yearChangeHandler = (e, data) => {\n this.setState({ isErrorYear: false });\n const year = moment().year();\n if (e > year) {\n this.setState({ isErrorYear: true });\n }\n //this.props.actionSetYear(`${ASSET_FORM}.year`, e);\n this.props.actionSetFormField(\"year\", e);\n };\n\n deleteParentImage = async imageObject => {\n this.setState({ isImageLoading: true });\n const { key: imageKey } = imageObject;\n await this.props.actionDeleteAssetImage(imageKey);\n const { forms } = this.props;\n const { assetForm } = forms;\n const { assetImage } = assetForm;\n const imageArray = [...assetImage];\n _.remove(imageArray, o => {\n return o.key === imageKey;\n });\n this.props.actionSetFormField(\"assetImage\", imageArray);\n this.setState({ isImageLoading: false });\n };\n\n uploadParentImage = async fileData => {\n const data = new FormData();\n data.append(\"file\", fileData);\n await this.props.actionUploadAssetImage(data);\n\n const { assetImageResult, forms } = this.props;\n const { assetForm } = forms;\n const { assetImage } = assetForm;\n const imageArray = [...assetImage];\n\n imageArray.push(assetImageResult);\n this.props.actionSetFormField(\"assetImage\", imageArray);\n this.closeAddParentImageModal();\n };\n\n closeAddParentImageModal = () => {\n this.setState({ isParentImage: false });\n };\n\n render() {\n const {\n allCrew,\n allLocations,\n forms,\n users,\n isEdit,\n asset,\n assetList\n } = this.props;\n const { assetForm } = forms;\n const {\n crew,\n location,\n operator,\n linkedAsset,\n isLinkedAsset,\n maintenanceUnit,\n year: formYear,\n assetImage = []\n } = assetForm;\n\n const {\n name,\n type,\n make,\n model,\n subModel,\n engineType,\n serialNumber,\n customerPlantNo,\n modifications,\n linkedERP,\n assetImage: existingImages = []\n } = asset;\n const {\n isErrorYear,\n isParentImage,\n isImageLoading,\n isLinkedAssetRequired\n } = this.state;\n\n let crewList = [];\n if (allCrew && allCrew.length) {\n _.map(allCrew, (crew, c_key) => {\n crewList.push({\n text: crew.name,\n value: crew._id\n });\n });\n }\n\n let usersList = [];\n if (users.length) {\n _.map(users, user => {\n const { firstName, lastName, _id } = user;\n usersList.push({\n text: `${firstName} ${lastName}`,\n value: _id\n });\n });\n }\n\n let allAsset = [];\n if (assetList.length) {\n _.map(assetList, user => {\n const { _id, name } = user;\n if (asset._id !== _id) {\n allAsset.push({\n text: name,\n value: _id\n });\n }\n });\n }\n let assetName = \"\";\n if (linkedAsset) {\n const asset = _.find(assetList, { _id: linkedAsset });\n if (asset) {\n assetName = asset.name;\n }\n }\n\n const assetNameText = (\n \n
\n \n {!_.isEmpty(auditTrails) ? (\n
\n \n \n \n \n \n \n \n
\n );\n\n return (\n \n this.setState({ isOpen: false })}\n onCancel={() => this.setState({ isOpen: false })}\n />\n \n \n \n ?}\n content=\"Help text\"\n basic\n />\n {isEdit ? (\n linkedOptions\n ) : (\n \n\n {isLinkedAsset && (\n \n \n \n {assetsToLink}\n \n \n )}\n\n {/* {isLinkedAsset &&\n (\n \n \n \n {assetsToLink}\n \n \n )} */}\n\n \n {/* */}\n {isEdit ? (\n assetNameText\n ) : (\n \n\n \n {isEdit ? (\n assetTypeText\n ) : (\n \n\n \n {isEdit ? (\n makeText\n ) : (\n \n\n \n {isEdit ? (\n modelText\n ) : (\n \n\n \n \n {isEdit ? subModelText : \n\n {/* \n \n {isEdit ? yearText : */}\n\n \n {isEdit ? (\n yearText\n ) : (\n \n\n \n \n {isEdit ? engineTypeText : \n\n \n \n {isEdit ? serialNumberText : \n\n \n \n {isEdit ? customerPlantNoText : \n\n \n \n {isEdit ? modificationText : \n\n \n \n {isEdit ? linkedERPText : \n\n {/* {!asset.isLinkedAsset ? (\n \n \n {isEdit ? (\n crewNameText\n ) : asset.crew ? (\n \n ) : null} */}\n\n {!asset.isLinkedAsset ? (\n \n {isEdit ? (\n crewNameText\n ) : asset.crew ? (\n \n ) : null}\n\n {!asset.isLinkedAsset ? (\n \n {isEdit ? (\n operatorNameText\n ) : asset.operator ? (\n \n ) : null}\n\n {!asset.isLinkedAsset ? (\n \n {isEdit ? (\n locationNameText\n ) : (\n \n ) : null}\n\n \n {isEdit ? (\n maintenanceUnitText\n ) : (\n \n\n \n {isImageLoading && \n {assetImage && }\n {assetImage && !isEdit && \n = 3}\n onClick={() => this.setState({ isParentImage: true })}\n />\n \n ) : null}\n {assetImage.length >= 3 ? (\n \n \n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allLocations: state.assetLocation.allLocations,\n response: state.assetForm.response,\n assetList: state.assetForm.assetList,\n assetType: state.assetForm.assetType,\n allCrew: state.crew.allCrew,\n assets: state.assets.assets,\n users: state.crew.users,\n forms: state.forms,\n assetImageResult: state.assetForm.assetImageUrl\n };\n};\n\nconst reducer = { ...assetFormReducer, ...locationReducer, ...crewReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(AssetInfo)\n);\n","import _ from \"lodash\";\nimport moment from \"moment\";\nimport \"./addScheduleForm.css\";\nimport { connect } from \"react-redux\";\nimport React, { Component } from \"react\";\nimport { bindActionCreators } from \"redux\";\nimport Loader from \"../../components/Loader\";\nimport { withRouter } from \"react-router-dom\";\nimport { Control, Errors } from \"react-redux-form\";\nimport DatePicker from \"../../components/DatePicker\";\nimport { showSuccessToast } from \"../../utils/toastUtils\";\nimport { getErrorMessage } from \"../../utils/error.utils\";\nimport NumericInput from \"react-numeric-input\";\nimport { weeklyList } from \"../../constants/appConstants\";\nimport * as assetDetailReducer from \"../../containers/AssetDetails/assetDetail.reducer\";\nimport {\n Grid,\n Form,\n Button,\n Dropdown,\n Checkbox,\n Message,\n Icon\n} from \"semantic-ui-react\";\n\nconst SCHEDULE_FORM = \"scheduleForm\";\n\nclass ScheduleForm extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false,\n isError: false,\n errorMessage: \"\"\n };\n }\n\n componentDidMount() {\n this.props.actionGetFormsForDropdown();\n this.props.actionGetUsersForDropdown();\n }\n\n setForm = (e, data) => {\n const { value } = data;\n this.props.actionSetFormField(\"form\", value);\n };\n\n setDueDate = date => {\n this.props.actionSetFormField(\"dueDate\", date);\n };\n\n setStartDate = date => {\n this.props.actionSetFormField(\"startDate\", date);\n };\n setEndDate = date => {\n this.props.actionSetFormField(\"endDate\", date);\n };\n\n setAssignedUser = (e, data) => {\n const { value } = data;\n this.props.actionSetFormField(\"assignedTo\", value);\n };\n\n setNotifyMember = (e, data) => {\n const { value } = data;\n this.props.actionSetFormField(\"emailNotifications\", value);\n };\n\n addNewSchedule = async () => {\n const { scheduleForm } = this.props;\n const { quantity } = scheduleForm;\n if (quantity === 0) {\n this.setState({\n isError: true,\n errorMessage: \"Kilometer/Engine Hours can not be 0\"\n });\n return;\n }\n this.clearErrorMessage();\n await this.props.actionAddSchedule(scheduleForm);\n const { response } = this.props;\n const { status, data } = response;\n if (status === 200) {\n showSuccessToast(\n {asset.isLinkedAsset ? \"Yes\" : \"No\"}
\n )}\n\n {\" \"}\n \n
\n )}\n {name}
{\" \"}\n\n
\n )}\n {type}
{\" \"}\n\n {\" \"}\n
\n )}\n {make}
\n\n
\n )}\n {model}
\n{subModel}
}\n{year}
}\n\n {\" \"}\n \n
\n )}\n {asset.year}
\n{engineType}
}\n{serialNumber}
}\n{customerPlantNo}
}\n{modifications}
}\n{linkedERP}
}\n{asset.crew.name}
\n ) : null}\n\n \n
\n ) : null}\n {asset.crew.name}
\n\n \n
\n ) : null}\n {asset.operator.name}
\n\n {\" \"}\n \n
\n )}\n {asset.location}
\n\n {\" \"}\n \n
\n )}\n {asset.maintenanceUnit}
\n\n Note : Upto 3 images only\n
\nYou can add 3 images only.
\n ) : null}\n\n
\n );\n this.props.closeModal();\n } else {\n const { code } = data;\n let message = await getErrorMessage(code);\n return this.updateState(true, message);\n }\n this.clearErrorMessage();\n };\n\n repeatSchedule = occurrence => {\n const { repeat } = this.state;\n this.props.actionSetFormField(\"occurrence\", occurrence);\n if (occurrence === \"series\") {\n this.props.actionOmitFormField([\"dueDate\", \"kilometer\"]);\n } else {\n this.props.actionOmitFormField([\"days\", \"startDate\", \"endDate\"]);\n }\n this.setState({ repeat: !repeat });\n };\n\n checkedDay = value => {\n let { days } = this.props.scheduleForm;\n let days_old = [...days];\n let isAvailable = _.includes(days, value);\n if (isAvailable) {\n _.remove(days_old, n => value === n);\n } else {\n days_old.push(value);\n }\n this.props.actionSetFormField(\"days\", days_old);\n };\n\n checkedWeekDays = () => {\n this.props.actionSetFormField(\"days\", [1, 2, 3, 4, 5]);\n };\n checkedAllDays = () => {\n this.props.actionSetFormField(\"days\", [0, 1, 2, 3, 4, 5, 6]);\n };\n\n updateState = (isError, errorMessage) =>\n this.setState({ isError, errorMessage });\n\n goToAddForm = () => {\n this.props.history.push(\"/addMaintenanceForm\");\n };\n\n quantityChangeHandler = (e, data) => {\n this.props.actionSetQuantity(`${SCHEDULE_FORM}.kilometer`, e);\n };\n\n clearErrorMessage = () => {\n this.setState({\n isError: false,\n errorMessage: \"\"\n });\n };\n\n render() {\n const { isLoading, isError, repeat, errorMessage } = this.state;\n const { allForms, users, scheduleForm } = this.props;\n const {\n assignedTo,\n form,\n dueDate,\n days,\n startDate,\n endDate,\n kilometer\n } = scheduleForm;\n\n let usersList = [];\n if (users.length) {\n _.map(users, user => {\n const { firstName, lastName, _id } = user;\n usersList.push({\n key: _id,\n text: `${firstName} ${lastName}`,\n value: _id\n });\n });\n }\n\n let formList = [];\n if (allForms && allForms.length) {\n _.map(allForms, form => {\n const { name, _id } = form;\n formList.push({ text: name, value: _id });\n });\n }\n\n const FormName = (\n \n this.props.actionSetFormField(\"days\", [])}\n />\n
\n \n {_.map(weeklyList, (day, key) => {\n const { name, value } = day;\n return (\n {name}}\n onChange={() => this.checkedDay(value)}\n value={value}\n checked={_.includes(days, value)}\n />\n );\n })}\n
\n \n );\n\n const nextOptions = (\n \n \n \n \n this.repeatSchedule(\"single\")}\n />\n \n \n \n this.repeatSchedule(\"series\")}\n />\n \n \n \n
\n );\n\n const OneTimeSchedule = (\n \n {isLoading && (\n Loading,please wait \n )}\n \n \n \n {FormName}\n \n \n {operatorName}\n \n\n \n {nextOptions}\n \n\n \n {/* {emailNotify} */}\n \n\n {repeat ? (\n {RepeatSchedule} \n ) : (\n {OneTimeSchedule} \n )}\n\n \n {notes}\n \n \n {actionButton}\n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n allForms: state.assetDetail.allForms,\n response: state.assetDetail.response,\n scheduleForm: state.forms.scheduleForm,\n users: state.assetDetail.users\n };\n};\n\nconst reducer = { ...assetDetailReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(ScheduleForm)\n);\n","import React from \"react\";\nimport moment from \"moment\";\nimport PropTypes from \"prop-types\";\nimport { Grid, Button } from \"semantic-ui-react\";\nimport _ from \"lodash\";\n\nconst ALL_DAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"]\n\nconst WEEK_DAYS = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\"]\n\n\nconst getDays = (days) => {\n days = _.orderBy(days);\n\n days = _.map(days, day => {\n return ALL_DAYS[day]\n })\n\n if (_.isEqual(ALL_DAYS, days)) {\n return \"Every day \";\n }\n\n if (_.isEqual(WEEK_DAYS, days)) {\n return \"Every weekday \";\n }\n\n return `Every ${days.join(\" \")} of the week `;\n}\nconst ScheduleDetail = ({ schedule = {}, deleteSchedule }) => {\n const {\n name,\n formName,\n occurrence,\n data,\n dueDate = moment(),\n kilometer,\n note\n } = schedule;\n\n let startDate = null,\n endDate = null;\n if (occurrence === \"series\") {\n startDate = moment(data.startDate).format(\"LL\");\n endDate = moment(data.endDate).format(\"LL\");\n } else {\n startDate = moment(dueDate).format(\"LL\");\n }\n const days = data ? data.days : [];\n\n return (\n \n Form: {formName}\n ({occurrence === \"series\" ? \"Repeated maintenance\" : \"One time maintenance\"})\n
\n \n Note: {note}\n
\n {occurrence === \"series\" ? (\n \n Schedule: \n {getDays(days)}\n from \n {startDate}\n \n to \n {endDate}\n
\n ) : (\n \n Due date: \n {startDate}\n \n {kilometer && (\n \n or {kilometer} kilometers. \n \n )}\n
\n )}\n \n - \n {schedules.map((schedule, s_key) => {\n return (\n
Hose Suggestions
\n- \n {_.map(hoseSuggestion, (hose, index) => (\n
- \n {attachedHoses.length > 0 ? (\n _.map(attachedHoses, (hose, index) => (\n
\n \n {\" \"}\n ( Preventatively :{\" \"}\n {hose.preventiveCount ? hose.preventiveCount : 0} ,\n Failure :{\" \"}\n {hose.failureCount ? hose.failureCount : 0} )\n \n
\n\n
\n \n
\n \n
\n \n \n Changed hose due to failure\n \n
\n Make replacement hose
\n\n {\" \"}\n \n
\n\n {\" \"}\n OR \n
\n Replace hose from assembled inventory
\n\n
\n \n Name your hose position something meaningful that will be\n easily recognized by other people. Suggested good practice\n is to view left and right as if looking from the front of\n the asset.\n
\n\n
\n );\n this.closeEditForm();\n } else {\n const { data } = response;\n const { code } = data;\n let message = await getErrorMessage(code);\n this.updateState(true, message);\n }\n this.setState({ isLoading: false });\n this.clearErrorMessage();\n };\n updateState = (isError, errorMessage) => {\n this.setState({ isError, errorMessage });\n };\n\n deleteAsset = async () => {\n this.setState({ isLoading: true });\n const { asset } = this.props;\n const { _id } = asset;\n\n await this.props.actionDeleteAsset(_id);\n const { response } = this.props;\n const { status } = response;\n if (status === 200) {\n showSuccessToast(\n \n
\n );\n this.setState({ isDeleteAsset: false });\n this.props.history.push(\"/asset\");\n }\n this.setState({ isLoading: false });\n this.clearErrorMessage();\n };\n\n addScheduleForm = () => {\n let params = this.props.match.params;\n this.props.actionResetForm(\"scheduleForm\");\n this.props.actionSetFormField(\"asset\", params.id);\n this.setState({ isSchedule: true });\n };\n\n closeScheduleForm = () => {\n this.setState({ isSchedule: false });\n this.getInitialList();\n };\n\n deleteSchedule = async () => {\n this.setState({ isLoading: true });\n const { scheduleId } = this.state;\n await this.props.actionDeleteSchedule(scheduleId);\n const { response } = this.props;\n const { status } = response;\n if (status === 200) {\n this.getInitialList();\n showSuccessToast(\n \n
\n );\n }\n this.setState({ isDeleteMaintenance: false, scheduleId: \"\" });\n this.setState({ isLoading: false });\n };\n\n conformDeleteBox = scheduleId => {\n this.setState({ isDeleteMaintenance: true, scheduleId });\n };\n\n closeDeleteBox = () =>\n this.setState({ isDeleteMaintenance: false, name: \"\" });\n\n conformDeleteAsset = () => {\n this.setState({ isDeleteAsset: true });\n };\n\n goToCompleteschedule = () => {\n const { asset } = this.props;\n const { _id } = asset;\n this.props.history.push({\n pathname: \"/schedule\",\n state: { flag: true, assetId: _id },\n search: `?${ASSET_ID_FOR_URL_PARAM}=${_id}`\n });\n };\n\n clearErrorMessage = () => {\n this.setState({\n errorMessageflag: false\n });\n };\n\n render() {\n const {\n isLoading,\n activeIndex,\n isError,\n errorMessage,\n isEdit,\n isSchedule,\n isDeleteMaintenance,\n isDeleteAsset\n } = this.state;\n const { asset, schedules } = this.props;\n const { name: assetName } = asset;\n const ActionButton = (\n \n \n \n \n \n \n {formButton} \n \n )}\n \n\n \n {!isEdit && ActionButton}\n \n \n
\n );\n\n const ScheduleMaintenance = (\n \n \n New scheduled Maintenance \n \n \n \n
\n \n
\n \n this.setState({ isDeleteSchedule: false })}\n onCancel={this.closeDeleteBox}\n onConfirm={this.deleteSchedule}\n />\n {isLoading && (\n Loading,please wait \n )}\n \n \n \n \n \n \n
\n \n \n this.goToPage(\"asset\")}\n icon=\"left arrow\"\n content=\"Go back\"\n labelPosition=\"left\"\n className=\"button-float\"\n />\n \n \n \n\n this.setState({ isDeleteAsset: false })}\n onConfirm={this.deleteAsset}\n />\n \n \n \n \n {assetInformation}\n \n \n {activeIndex === 1 && \n \n {ScheduleMaintenance}\n \n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n schedules: state.assetDetail.schedules,\n response: state.assetDetail.response,\n asset: state.assetDetail.asset,\n assetForm: state.forms.assetForm\n };\n};\n\nconst reducer = { ...assetDetailReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(AssetDetail)\n);\n","import _ from \"lodash\";\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {\n Grid,\n Button,\n Segment,\n List,\n Radio,\n Popup,\n Icon,\n Modal,\n Header\n} from \"semantic-ui-react\";\nimport ViewImage from \"../../components/ViewImage\";\n\nconst answerOptions = [\"red\", \"orange\", \"green\"];\n\nconst CheckPoints = ({\n manageCheckPoints,\n maintenanceForm,\n addNotePage,\n addImagePage,\n deleteImage\n}) => {\n const { data } = maintenanceForm;\n\n const sectioned = _.groupBy(data, \"section\");\n\n const goToAddNote = item => {\n const index = _.findIndex(data, item);\n addNotePage(item, index);\n };\n\n const goToAddImage = item => {\n const index = _.findIndex(data, item);\n addImagePage(item, index);\n };\n\n const CheckPointList = (\n \n
\n \n {sectioned &&\n _.map(sectioned, (point, c_key) => {\n return (\n \n \n );\n })}\n
\n );\n\n return (\n \n Section: \n {c_key}\n
\n- \n {_.map(point, item => {\n const { field, result, note, imageUrl } = item;\n let isAddNoteButton = false;\n if (result === \"red\" || result === \"orange\") {\n isAddNoteButton = true;\n }\n return (\n
{field}
\n \n{note}
\n Check Points
\n- \n
- Dry = No oil loss at seals \n
- Tight = Joint moves as new \n
- Movement = Joint shows normal use \n
- \n
\n Seep = Oil slowly accumulating\n \n - \n
\n Play = Joint will need eventual attention\n \n - \n
\n LEAK = Needs immediate repair / replacement\n \n - \n
\n Loose = Joint needs immediate repair / replacement\n \n - \n
\n \n Wet = Fresh Oil Sitting on Seal\n \n
Image uploaded
, 5000);\n this.setState({ isLoading: false, selectedFile: null });\n };\n\n closeModal = () => {\n this.setState({ selectedFile: null });\n this.props.closePage();\n };\n\n render() {\n const { isImage } = this.props;\n const { selectedFile, isLoading } = this.state;\n\n return (\n \n
\n Assigned to:{assignedTo}
\n\n \n {isLoading && (\n Loading,please wait \n )}\n\n \n {formTitle}\n \n \n \n \n \n \n \n {note}\n \n \n \n \n \n {maintenanceUnitText}\n \n \n\n \n {checkPoints}\n \n\n \n \n \n {commentText}\n \n \n\n \n \n \n {imageUrl &&\n = 5}\n onClick={() => this.setState({ isParentImage: true })}\n />\n \n \n\n \n \n \n {formActionButton}\n \n \n \n \n \n \n\n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n maintenanceRecord: state.reviewMaintenance.maintenanceRecord,\n checkPointKey: state.reviewMaintenance.checkPointKey,\n maintenanceForm: state.forms.maintenanceForm,\n imageResult: state.reviewMaintenance.imageUrl,\n response: state.reviewMaintenance.response\n };\n};\n\nconst reducer = { ...reviewMaintenanceReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(ReviewMaintenance)\n);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport { withRouter } from \"react-router-dom\";\nimport MetaData from \"../../components/MetaData\";\nimport Loader from \"../../components/Loader\";\nimport \"./reviewMaintenance.css\";\nimport _ from \"lodash\";\nimport polyglot from \"../../i18n\";\nimport * as reviewMaintenanceReducer from \"./reviewMaintenance.reducer\";\nimport {\n Form,\n Grid,\n Button,\n Divider,\n Icon,\n Segment,\n List,\n Radio,\n Image\n} from \"semantic-ui-react\";\nimport moment from \"moment\";\n\nconst answerOptions = [\"red\", \"orange\", \"green\"];\nclass ReviewMaintenance extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isLoading: false,\n isNote: false,\n currentPoint: {},\n noteInput: \"\",\n isError: false,\n errorMessage: \"\"\n };\n }\n componentDidMount = () => {\n this.props.actionResetForm(\"maintenanceForm\");\n this.getUrlParam();\n };\n\n getUrlParam = async () => {\n const id = this.props.match.params.id;\n if (id) {\n await this.props.actionGetMaintenanceRecord(id);\n const { maintenanceRecord } = this.props;\n const { formData } = maintenanceRecord;\n\n await this.props.actionSetForm(formData);\n this.props.actionSetFormFields(\"_id\", id);\n }\n };\n\n goToPage = () => {\n this.props.history.push(\"/schedule\");\n };\n\n render() {\n const { isLoading } = this.state;\n const { maintenanceForm, maintenanceRecord } = this.props;\n\n const { data, maintenanceUnit, imageUrl, note } = maintenanceForm;\n const sectioned = _.groupBy(data, \"section\");\n const {\n assetName,\n assignedToName,\n formName,\n updatedAt\n } = maintenanceRecord;\n\n const title = `Maintenance: ${assetName} (${formName})`;\n const date = moment(updatedAt).format(\"ddd, ll\");\n const assignedTo = `Completed on: ${date} by ${assignedToName}`;\n\n const CheckPointList = (\n Note : Upto 5 images only
\n {imageUrl.length >= 5 ? (You can add 5 images only.
) : null}\n\n {sectioned &&\n _.map(sectioned, (point, c_key) => {\n return (\n \n \n );\n })}\n
\n );\n\n const showParview = (\n {c_key}
\n- \n {_.map(point, item => {\n const { field, result, note, imageUrl } = item;\n return (\n
\n \n {isLoading && (\n Loading,please wait \n )}\n\n \n \n \n \n
\n \n \n this.goToPage()}\n icon=\"left arrow\"\n content=\"Go back\"\n labelPosition=\"left\"\n className=\"button-float\"\n />\n \n \n \n \n \n \n \n \n \n {maintenanceUnit}\n \n \n\n \n \n \n \n {CheckPointList}\n \n \n {showParview}\n \n \n \n \n \n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = state => {\n return {\n maintenanceRecord: state.reviewMaintenance.maintenanceRecord,\n maintenanceForm: state.forms.maintenanceForm,\n response: state.reviewMaintenance.response\n };\n};\n\nconst reducer = { ...reviewMaintenanceReducer };\nconst mapDispatchToProps = dispatch => bindActionCreators(reducer, dispatch);\n\nexport default withRouter(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(ReviewMaintenance)\n);\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport {\n Grid,\n Divider,\n Icon,\n Image,\n Button,\n Card,\n Pagination,\n Message,\n Modal,\n Header\n} from \"semantic-ui-react\";\nimport productDefaultImage from \"../../assets/images/product_default.png\";\nimport moment from \"moment\";\nimport * as myHosesReducer from \"./myHoses.reducer\";\nimport Loader from \"../../components/Loader\";\nimport * as cartReducer from \"../Cart/cart.reducer\";\nimport { showSuccessToast } from \"../../utils/toastUtils\";\nimport \"./myHoses.css\";\n\nclass MyHoses extends React.Component {\n constructor() {\n super();\n this.state = {\n isLoading: false,\n activePage: 1,\n imageModal: false,\n imageLink: \"\"\n };\n }\n\n componentDidMount() {\n this.getAllHoses();\n }\n\n getAllHoses = async () => {\n this.updateState({ isLoading: true });\n await this.props.actionGetCustomerHoses(0);\n this.updateState({ isLoading: false });\n };\n\n updateState = state => {\n this.setState(state);\n };\n\n addToCartHandler = async item => {\n const { stockCode, stockDescription, length = null, pack, _id } = item;\n const hoseData = {\n stockCode: stockCode,\n quantity: 1,\n length,\n pack,\n stockDescription: stockDescription,\n hose: true,\n hoseId: _id\n };\n await this.props.actionAddHoseToCart(hoseData);\n showSuccessToast(\"Hose added to cart\");\n };\n\n handlePaginationChange = async (...params) => {\n document.body.scrollTop = document.documentElement.scrollTop = 0;\n const options = params[1];\n const { activePage } = options;\n const { hoses } = this.props;\n const { totalPages } = hoses;\n if (totalPages === 1) {\n return;\n }\n this.setState({\n activePage\n });\n await this.props.actionGetCustomerHoses(activePage - 1);\n };\n\n goToHoseMaker = e => {\n e.preventDefault();\n this.props.history.push(\"/hoseMaker\");\n };\n\n openImageModal = imageLink => {\n this.setState({ imageModal: true, imageLink: imageLink });\n };\n\n handleClose = () => {\n this.setState({ imageModal: false, imageLink: \"\" });\n };\n\n render() {\n const { hoses } = this.props;\n const { result: allHoses = [], totalPages } = hoses;\n const { isLoading, activePage, imageLink, imageModal } = this.state;\n\n const hoseDetails = (items = []) => {\n return (\n \n
\n {assignedTo}
\nCheck Points
\n\n {items.length > 0 &&\n items.map((item, i_key) => {\n const {\n stockCode,\n stockDescription,\n updatedAt,\n additionalProducts,\n imageLink\n } = item;\n const lastBought = (\n \n \n \n {stockCode} \n \n \n \n this.openImageModal(imageLink ? imageLink : productDefaultImage)}\n />\n \n \n Stock description:\n {stockDescription}\n {additionalProducts.length > 0 && (\n \n this.addToCartHandler(item)}>\n \n \n \n \n Add to cart\n \n \n \n \n \n \n \n \n );\n })}\n
\n );\n };\n\n const modalJSX = (\n \n Additional Products :{\" \"}\n {additionalProducts.map((item, key) => {\n const { stockCode } = item;\n if (key === 0) {\n return stockCode;\n } else {\n return \",\" + stockCode;\n }\n })}\n
\n )}\n {lastBought}
\n \n \n
\n {allHoses.length === 0 && (\n \n {allHoses.length ? (\n
\n \n {items.length > 0 &&\n items.map((item, i_key) => {\n const {\n imageLink,\n stockCode,\n stockDescription,\n updatedAt,\n additionalProducts,\n _id\n } = item;\n const lastBought = (\n \n \n \n {stockCode} \n \n \n \n this.openImageModal(imageLink ? imageLink : productDefaultImage)}\n />\n \n \n Stock description:\n {stockDescription}\n {additionalProducts.length > 0 && (\n \n this.goToHoseMaker(e, _id)}\n >\n \n Inspect hose\n \n \n
\n {/* this.addToInventoryHandler(_id)}\n >\n \n Add to Inventory\n \n */}\n \n \n \n \n \n );\n })}\n
\n );\n };\n\n const addToInventoryModalJSX = (\n \n Additional Products :{\" \"}\n {additionalProducts.map((item, key) => {\n const { stockCode } = item;\n if (key === 0) {\n return stockCode;\n } else {\n return \",\" + stockCode;\n }\n })}\n
\n )}\n {lastBought}
\n \n \n {/*
\n
\n )}\n Hose items not available in inventory
\n- \n {itemsNotAvailable.map(hoseItem => {\n return (\n
\n
\n {/* \n {allHoses.length === 0 && (\n \n {allHoses.length ? (\n
*/}\n Coming soon
\n \n\n \n {/* {addToInventoryModalJSX}\n {isLoading &&\n Monthly Savings\n
\nhi
\n\n Testing Certificate Updated\n Successfully\n
\n );\n const delayDebounceFn = setTimeout(() => {\n setIsUpdate(false);\n setIsLoading(false);\n setImageData(null);\n setImageSrc(null);\n props.setViewTestingCertificate(false);\n }, 500);\n return () => clearTimeout(delayDebounceFn);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n }\n };\n\n const onDeleteTestingCertificate = async () => {\n setIsLoading(true);\n try {\n const logo = await apiDeleteHoseTestingCertificate(\n props.jobId,\n props.hoseMakerSeqId,\n props.hoseTagSeqId\n );\n if (logo) {\n showSuccessToast(\n \n Testing Certificate Deleted\n Successfully\n
\n );\n props.deleteTestCertificate();\n setIsLoading(false);\n setImageData(null);\n setImageSrc(null);\n setDeleteFileOpen(false);\n props.setViewTestingCertificate(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const handleDownloadFile = (filePath) => {\n if (!filePath) {\n showErrorToast(\"Save asset first before downloading this file\");\n return false;\n }\n try {\n const parts = filePath.split(\"/\");\n const fileName = parts[parts.length - 1];\n fetch(filePath)\n .then((response) => response.blob())\n .then((blob) => {\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = fileName;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n });\n } catch {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const handleDownloadLocal = (file) => {\n // Create a URL for the file\n const url = URL.createObjectURL(file);\n\n // Create a temporary anchor element\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = file.name; // Set the file name for download\n\n // Append the anchor to the body\n document.body.appendChild(a);\n\n // Programmatically click the anchor to trigger the download\n a.click();\n\n // Remove the anchor from the document\n document.body.removeChild(a);\n\n // Revoke the object URL to free up resources\n URL.revokeObjectURL(url);\n };\n\n useEffect(() => {\n console.log(props.hoseTagData);\n }, [props.hoseTagData]);\n\n return (\n \n \n {props.hoseTagData?.testCertFilePath && !isUpdate\n ? \"VIEW HOSE TESTING CERTIFICATE\"\n : isUpdate\n ? \"UPDATE HOSE TESTING CERTIFICATE\"\n : \"UPLOAD HOSE TESTING CERTIFICATE\"}\n \n
\n \n {isLoading ? (\n
\n \n Are you sure you want
to delete training certificate?\n
\n
\n );\n}\n","import axios from \"axios\";\nimport { showErrorToast } from \"../../utils/toastUtils\";\n\nconst { timeZone } = Intl.DateTimeFormat().resolvedOptions();\n\nexport const apiCreateQuote = async (data, location, status) => {\n data.quoteStatusId = status;\n data.locationLat = location.lat.toString();\n data.locationLng = location.lng.toString();\n if (data.discountPercent || data.discountPercent === 0) {\n data.discountPercent = Number(data.discountPercent);\n }\n data.customerDiscount = data.discountPercent\n ? parseFloat(data.discountPercent.toFixed(2))\n : null;\n delete data.discountPercent;\n delete data.customer.discountPercent;\n if (data.otherAssetDetails === \"\") data.otherAssetDetails = null;\n if (data.otherAssetDetails !== null) {\n data.assetId = \"3fa85f64-5717-4562-b3fc-2c963f66afa6\";\n }\n return axios\n .post(`/api/Quoting?tz=${timeZone}`, data)\n .then((result) => {\n if (result && result.data) {\n return result.data.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n if (data.errors?.length > 0) {\n const errorMessages = data.errors;\n\n // Count the total number of error messages\n const countTotalErrors = (errorMessages) => {\n return errorMessages.length;\n };\n\n // Get the total number of error messages\n const totalErrors = countTotalErrors(errorMessages);\n\n // Log the appropriate message\n if (totalErrors > 1) {\n showErrorToast(\"Please complete all required fields\");\n } else if (totalErrors === 1) {\n // Log the first error message if there is only one error\n showErrorToast(errorMessages[0].errorDetails);\n } else {\n console.log(\"No errors found\");\n }\n return false;\n } else {\n const data = error.response.data;\n showErrorToast(data?.description);\n return false;\n }\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiUpdateQuote = async (data, location, status) => {\n const userName = localStorage.getItem(\"user\");\n data.quoteStatusId = status;\n data.hoseMaker.map((item, i) => {\n if (item.step3_LFerrule === null) item.step3_LFerrule = 0;\n if (item.step5_RFerrule === null) item.step5_RFerrule = 0;\n if (item.positionId === null) item.positionId = 0;\n if (item.seqId === undefined) {\n const maxSeqId =\n data.hoseMaker.length > 1\n ? data.hoseMaker.reduce(\n (max, obj) => (obj.seqId > max ? obj.seqId : max),\n data.hoseMaker[0].seqId\n )\n : null;\n if (maxSeqId !== null) {\n item.seqId = maxSeqId + 1;\n } else {\n item.seqId = 0;\n }\n }\n });\n // Add isMatchedList to payload\n data.hoseMaker.forEach((assembly) => {\n const isMatchedList = [\n assembly.step2_Matched ?? false,\n assembly.step3_Matched ?? false,\n assembly.step4_Matched ?? false,\n assembly.step5_Matched ?? false,\n ];\n\n assembly.isMatchedList = isMatchedList;\n });\n data.inventoryNonBOA?.map((item, i) => {\n item.seqId = i;\n });\n if (data.expiryDate) {\n var date = new Date(data.expiryDate);\n const formattedDate = date.toISOString();\n data.expiryDate = formattedDate;\n }\n if (data.otherAssetDetails === \"\") data.otherAssetDetails = null;\n if (data.otherAssetDetails !== null) {\n data.assetId = \"3fa85f64-5717-4562-b3fc-2c963f66afa6\";\n }\n const payload = {\n companyName: data.companyName,\n contactName: data.contactName,\n contactNumber: data.contactNumber,\n contactEmail: data.contactEmail,\n customerPurchaseOrderNumber: data.customerPurchaseOrderNumber,\n customerLocation: data.customerLocation,\n locationLat: location.lat.toString(),\n locationLng: location.lng.toString(),\n urgencyId: data.urgencyId,\n assetSerialNumber: data.assetSerialNumber,\n assetId: data.assetId,\n otherAssetDetails: data.otherAssetDetails,\n assetPropValue: data.assetPropValue,\n assetPropUnit: data.assetPropUnit,\n quoteDesc: data.quoteDesc,\n quoteStatusId: status,\n distanceTravelled: data.distanceTravelled?.toString()\n ? Number(data.distanceTravelled)\n : null,\n hoursLabour: data.hoursLabour?.toString() ? Number(data.hoursLabour) : null,\n hoseMaker: data.hoseMaker,\n inventoryComponents: data.inventoryComponents,\n inventoryNonBOA: data.inventoryNonBOA,\n notes: data.notes,\n makeId: data.makeId,\n saveContactDetails: data.saveContactDetails ? true : false,\n customer: data.customer?.companyName\n ? data.customer\n : { id: null, companyName: data.companyName, userName: userName },\n customerContact: data.customerContact?.contactName\n ? data.customerContact\n : {\n id: null,\n customerId: null,\n contactName: data.contactName,\n contactNumber: data.contactNumber,\n email: data.contactEmail,\n },\n boahubLocationId: data.boahubLocationId,\n assetTextId: data.assetTextId,\n technicianEmail: data.technicianEmail,\n expiryDate: data.expiryDate,\n customerDiscount:\n data.customerDiscount || data.customerDiscount === 0\n ? Number(data.customerDiscount)\n : data.discountPercent\n ? parseFloat(data.discountPercent.toFixed(2))\n : null,\n companyAssetId: data.companyAssetId,\n };\n if (data.selectCustomer && data.selectContact) {\n payload.saveContactDetails = false;\n }\n if (!data.selectCustomer) {\n payload.customer.id = null;\n payload.customerContact.id = null;\n payload.customerContact.customerId = null;\n }\n payload.hoseMaker.map((item, i) => {\n // Trim spaces for hose tags\n if (item.hoseIdTagging?.length > 0) {\n item.hoseIdTagging?.map((hoseTag, i) => {\n let trimmedStr = hoseTag.hoseId.replace(/\\s/g, \"\");\n hoseTag.hoseId = trimmedStr;\n hoseTag.hoseName = item.hoseName;\n hoseTag.hoseOemNumber = item.hoseOemNumber;\n hoseTag.isHoseCleaned = item.isHoseCleaned;\n hoseTag.isVisuallyInspected = item.isVisuallyInspected;\n hoseTag.isDesignStandard = item.isDesignStandard;\n });\n }\n });\n return axios\n .put(`/api/Quoting/${data.id}?tz=${timeZone}`, payload)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n if (data.errors?.length > 0) {\n const errorMessages = data.errors;\n\n // Count the total number of error messages\n const countTotalErrors = (errorMessages) => {\n return errorMessages.length;\n };\n\n // Get the total number of error messages\n const totalErrors = countTotalErrors(errorMessages);\n\n // Log the appropriate message\n if (totalErrors > 1) {\n showErrorToast(\"Please complete all required fields\");\n } else if (totalErrors === 1) {\n // Log the first error message if there is only one error\n showErrorToast(errorMessages[0].errorDetails);\n } else {\n console.log(\"No errors found\");\n }\n return false;\n } else {\n const data = error.response.data;\n showErrorToast(data?.description);\n return false;\n }\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiArchiveQuote = async (id) => {\n return axios.put(`/api/Quoting/archive/${id}`).then((result) => {\n if (result) {\n return result;\n }\n return false;\n });\n};\n\nexport const apiRestoreQuote = async (id) => {\n return axios.put(`/api/Quoting/restore/${id}`).then((result) => {\n if (result) {\n return result;\n }\n return false;\n });\n};\n\nexport const apiDeleteQuote = async (id) => {\n return axios.put(`/api/Quoting/delete/${id}`).then((result) => {\n if (result) {\n return result;\n }\n return false;\n });\n};\n\nexport const apiGetQuotingList = (\n keyword,\n searchType,\n status,\n technicianFilter = \"All\",\n limit = 1000\n) => {\n keyword = keyword !== \"\" ? keyword : null;\n if (technicianFilter === \"\") technicianFilter = \"All\";\n const data = {\n PageNo: 1,\n Limit: limit,\n NodaTZ: timeZone,\n SearchParam: keyword,\n QuoteStatusId: status !== 6 ? status : null,\n SearchType: searchType,\n };\n return axios\n .get(`/api/Quoting?TechnicianFilter=${technicianFilter}`, { params: data })\n .then((result) => {\n if (result) {\n if (result.data) {\n if (status === 5) return result.data.records;\n let filteredData = result.data.records.filter(\n (obj) => obj.quoteStatusId !== 5\n );\n return filteredData;\n }\n }\n return false;\n });\n};\n\nexport const apiGetQuoting = (id) => {\n const timeZoneURI = timeZone.toString().replace(\"/\", \"%2F\");\n return axios.get(`/api/Quoting/${id}/${timeZoneURI}`).then((result) => {\n if (result && result.data) {\n return result.data.data;\n }\n return false;\n });\n};\n\nexport const apiGenerateQuotePDF = (quoteId, quoteNumber, type) => {\n const payload = {\n tz: timeZone,\n };\n return axios\n .get(`/api/Quoting/pdf/${quoteId}`, payload)\n .then(async (response) => {\n if (response) {\n if (response.data && response.status === 200) {\n const result = response.data.result;\n const base64String = result.file;\n const byteCharacters = atob(base64String); // Decode the Base64 string\n const byteArrays = [];\n\n // Convert the decoded string to a byte array\n for (let offset = 0; offset < byteCharacters.length; offset++) {\n const byteArray = byteCharacters.charCodeAt(offset);\n byteArrays.push(byteArray);\n }\n\n // Create a Blob from the byte array\n const blob = new Blob([new Uint8Array(byteArrays)], {\n type: \"application/pdf\",\n });\n const blobUrl = URL.createObjectURL(blob);\n\n // Create a temporary element to trigger the download\n const link = document.createElement(\"a\");\n link.href = blobUrl;\n link.download = quoteNumber + \".pdf\"; // Set a default file name\n document.body.appendChild(link);\n link.click(); // Trigger the download\n document.body.removeChild(link); // Clean up\n\n // Release the object URL\n URL.revokeObjectURL(blobUrl);\n return true;\n }\n }\n return false;\n });\n};\n\nexport const apiGetQuotePDF = (quoteId) => {\n const payload = {\n tz: timeZone,\n };\n return axios\n .get(`/api/Quoting/pdf/${quoteId}`, payload)\n .then(async (response) => {\n if (response) {\n if (response.data && response.status === 200) {\n const result = response.data.result;\n return result;\n }\n }\n return false;\n });\n};\n\nexport const apiSetTechnicianFilter = async (technician) => {\n const data = {\n defaultTechnician: technician,\n };\n return axios\n .put(`/api/Quoting/set-user-default-technician`, data)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiSaveQuoteImage = async (data, id) => {\n const formData = new FormData();\n\n formData.append(\"file\", data);\n return axios\n .post(`/api/Quoting/upload-quote-image?quoteId=${id}`, formData, {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n },\n })\n .then((result) => {\n if (result && result.data) {\n return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n showErrorToast(data?.message);\n if (data.statusCode === 400) return false;\n if (data.statusCode === 500) return false;\n return false;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiRemoveQuoteImage = async (imageId, id) => {\n return axios\n .delete(`/api/Quoting/delete-quote-image?quoteId=${id}&imageId=${imageId}`)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return true;\n }\n return false;\n });\n};\n\nexport const apiDeleteAllHoseMakerImages = async (quoteId, hoseMakerSeqId) => {\n return axios\n .delete(\n `/api/Quoting/delete-quote-hosemaker-allimages?quoteId=${quoteId}&hoseMakerSeqId=${hoseMakerSeqId}`\n )\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return true;\n }\n return false;\n });\n};\n\nexport const apiMoveToJobCard = (quoteId) => {\n const payload = {\n quoteId: quoteId,\n timeZone: timeZone,\n };\n return axios\n .post(`/api/Quoting/move-to-job-card`, payload)\n .then((result) => {\n if (result && result.data) {\n return result.data.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n showErrorToast(data?.description);\n return false;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiAcceptQuote = (quoteId, createdDate) => {\n return axios\n .put(\n `/api/Quoting/external-acceptance?quoteId=${quoteId}&createdDate=${createdDate}`\n )\n .then((result) => {\n if (result) {\n return result;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n // showErrorToast(data?.description);\n return data;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiGetQuoteUrgencies = () => {\n return axios.get(`/api/Quoting/quote-urgencies`).then((result) => {\n if (result) {\n if (result.data) {\n result.data.map((item) => {\n item.text = item.name;\n item.value = item.id;\n });\n result.data.sort((a, b) => a.id - b.id);\n return result.data;\n }\n }\n return false;\n });\n};\n","import React, { useEffect, useState } from \"react\";\nimport {\n Card,\n Form,\n Checkbox,\n Dropdown,\n Grid,\n Icon,\n Image,\n Input,\n Button,\n Header,\n Modal,\n Loader,\n Message,\n Select,\n Label,\n Popup,\n} from \"semantic-ui-react\";\nimport \"./hoseMaker.css\";\nimport MetaData from \"../../components/MetaData\";\nimport rightArrow from \"../../../src/assets/images/right-transparent.png\";\nimport \"../Search/narrowFilters.css\";\nimport SearchComponent from \"../../containers/Search\";\nimport {\n apiGetHosePositions,\n apiGetProduct,\n apiUploadHoseMakerImage,\n apiRemoveHoseMakerImage,\n apiUploadQuotingHoseMakerImage,\n} from \"./hoseMaker.api\";\nimport NumericInputBox from \"../../components/NumericInputBox\";\nimport _, { set } from \"lodash\";\nimport productDefaultImage from \"../../assets/images/product_default.png\";\nimport ImageUploader from \"./imageUploader\";\nimport { hoseMakerTempData } from \"./data\";\nimport { showSuccessToast, showErrorToast } from \"../../utils/toastUtils\";\nimport noImageAvailable from \"../../assets/images/no_image_available.png\";\nimport certificateIcon from \"../../assets/images/certificate.svg\";\nimport certificateUploadIcon from \"../../assets/images/certificate-upload.svg\";\nimport HoseTrainingCertificate from \"./HoseTestingCertificate\";\nimport {\n apiGetJobbing,\n apiGetCauseTypes,\n apiGetDamageTypes,\n} from \"../Jobbing/jobbing.api\";\nimport HoseMakerImageUploader from \"./hoseMakerImageUploader\";\nimport { apiGetQuoting } from \"../Quoting/quoting.api\";\n\nconst HoseMakerNew = (props) => {\n const {\n data,\n currentStatus,\n isAssemble,\n hoseMakerIndex,\n isQuoting = false,\n } = props;\n const [formData, setFormData] = useState({\n step1_Hose: 0,\n step1_Barcode: \"\",\n step1_Name: \"\",\n step2_LHF: 0,\n step2_Barcode: \"\",\n step2_Name: \"\",\n step2_Matched: false,\n step3_LFerrule: 0,\n step3_Barcode: \"\",\n step3_Name: \"\",\n step3_Matched: false,\n step4_RHF: 0,\n step4_Barcode: \"\",\n step4_Name: \"\",\n step4_Matched: false,\n step5_RFerrule: 0,\n step5_Barcode: \"\",\n step5_Name: \"\",\n step5_Matched: false,\n quantity: 1,\n orientation: null,\n orientationString: \"\",\n oal: null,\n oalString: \"\",\n positionId: 0,\n others: [],\n lfActualCrimpSize: 0,\n rfActualCrimpSize: 0,\n isMarkedPushedOnCorrectly: false,\n bomAssembly: {\n lfActualCrimpSize: 0,\n lfRecCrimpSize: 0,\n lfRecDieSize: 0,\n rfActualCrimpSize: 0,\n rfRecCrimpSize: 0,\n rfRecDieSize: 0,\n isMarkedPushedOnCorrectly: false,\n image1: \"\",\n image2: \"\",\n image3: \"\",\n image4: \"\",\n },\n bomAssemblyImages: [],\n });\n const [locationList, setLocationList] = useState([]);\n const [selectedHose, setSelectedHose] = useState({});\n const [selectedFitting, setSelectedFitting] = useState({});\n const [selectedFitting2, setSelectedFitting2] = useState({});\n const [selectedFerrule, setSelectedFerrule] = useState({});\n const [isLHFerrule, setIsLHFerrule] = useState(false);\n const [isRHFerrule, setIsRHFerrule] = useState(false);\n const [hasOrientation, setHasOrientation] = useState(false);\n const [step, setStep] = useState(1);\n const [viewStep, setViewStep] = useState(1);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [status, setStatus] = useState(\"\");\n const [otherItemsList, setOtherItemsList] = useState([]);\n const [images, setImages] = useState({});\n const [isLoading, setIsLoading] = React.useState(false);\n const [userCountryCode, setUserCountryCode] = useState(\"\");\n\n // RS23\n const [viewTestingCertificate, setViewTestingCertificate] = useState(false);\n const [hoseTagData, setHoseTagData] = useState(null);\n const [causeTypes, setCauseTypes] = useState([]);\n const [damageTypes, setDamageTypes] = useState([]);\n\n // Hose maker URL image handling\n const [hoseMakerImages, setHoseMakerImages] = useState(\n data.hoseMaker[hoseMakerIndex]?.bomAssemblyImages\n );\n\n const [isUploadingHoseMakerImage, setIsUploadingHoseMakerImage] =\n useState(false);\n\n const uploadHoseMakerImage = async (imageData) => {\n var file = imageData[0];\n if (file) {\n if (file.size >= 25000000) {\n showErrorToast(\"File size cannot exceed 25MB.\");\n return;\n }\n setIsUploadingHoseMakerImage(true);\n try {\n console.log(\"Uploading image\", hoseMakerIndex);\n console.log(\"Uploading image\", data.hoseMaker[hoseMakerIndex].seqId);\n let result = false;\n if (isQuoting) {\n result = await apiUploadQuotingHoseMakerImage(\n file,\n data.id,\n data.hoseMaker[hoseMakerIndex].seqId\n );\n } else {\n result = await apiUploadHoseMakerImage(\n file,\n data.id,\n data.hoseMaker[hoseMakerIndex].seqId\n );\n }\n if (result) {\n refreshImagesData();\n setIsUploadingHoseMakerImage(false);\n } else {\n showErrorToast(\"Failed to upload the image\");\n setIsUploadingHoseMakerImage(false);\n }\n } catch {\n setIsUploadingHoseMakerImage(false);\n showErrorToast(\"Failed to upload the image\");\n }\n }\n };\n\n const [deleteImagePopupOpen, setDeleteImagePopupOpen] = useState(false);\n const [selectedImage, setSelectedImage] = useState(null);\n\n const onDeleteHoseMakerImage = async () => {\n setIsLoading(true);\n const result = await apiRemoveHoseMakerImage(data.id, selectedImage.id);\n if (result) {\n showSuccessToast(\n \n \n
\n \n
\n Drag and Drop BOM Assembly Image (Max. 4)
\n\n
\n or
\n\n {props.isUploadingHoseMakerImage ? (\n \n Uploading image... \n \n ) : (\n \n )}\n
\n \n Image Deleted Successfully\n
\n );\n\n refreshImagesData();\n setIsLoading(false);\n setDeleteImagePopupOpen(false);\n } else {\n showErrorToast(\"Failed to delete image\");\n setIsLoading(false);\n }\n };\n\n const refreshImagesData = async () => {\n let result = null;\n if (isQuoting) {\n result = await apiGetQuoting(data?.id);\n } else {\n result = await apiGetJobbing(data?.id);\n }\n props.refreshJobData(result);\n if (result) {\n setHoseMakerImages(result.hoseMaker[hoseMakerIndex]?.bomAssemblyImages);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n // Additional values for OAL for inches\n const options = [\n { key: \"00\", text: \"00\", value: 0 },\n { key: \"00\", text: \"1/4\", value: 0.25 },\n { key: \"00\", text: \"1/2\", value: 0.5 },\n { key: \"00\", text: \"3/4\", value: 0.75 },\n ];\n\n const getCauseTypes = async () => {\n const result = await apiGetCauseTypes();\n if (result) {\n setCauseTypes(result);\n }\n };\n\n const getDamageTypes = async () => {\n const result = await apiGetDamageTypes();\n if (result) {\n setDamageTypes(result);\n }\n };\n\n const replacementList = [\n {\n key: 0,\n value: \"Preventative Maintenance\",\n text: \"Preventative Maintenance\",\n },\n {\n key: 1,\n value: \"Reactive Repair\",\n text: \"Reactive Repair\",\n },\n ];\n\n const onSetOAL = () => {\n if (formData.oal == 0 || formData.oal == null) {\n showErrorToast(\"Cut Length is required\");\n return false;\n }\n return true;\n };\n\n const onSetOrientation = () => {\n if (\n hasOrientation &&\n (formData.orientation === null || formData.orientationString === \"\")\n ) {\n showErrorToast(\"Orientation is required\");\n return false;\n }\n return true;\n };\n\n const onConfirmBOM = (closeForm = false) => {\n if (formData.positionId == 0 && locationList.length > 0) {\n showErrorToast(\"Location is required\");\n setViewStep(6);\n return false;\n }\n\n formData.bomAssembly.image1 = images.image1;\n formData.bomAssembly.image2 = images.image2;\n formData.bomAssembly.image3 = images.image3;\n formData.bomAssembly.image4 = images.image4;\n\n var currentDate = new Date();\n var utcDate = currentDate.toISOString();\n\n if (\n formData.lfActualCrimpSize > 0 &&\n formData.rfActualCrimpSize > 0 &&\n formData.isMarkedPushedOnCorrectly === true &&\n formData.bomAssembly.createdDateTime === null\n ) {\n formData.bomAssembly.createdBy = localStorage.getItem(\"user\");\n formData.bomAssembly.createdDateTime = utcDate;\n }\n\n formData.bomAssembly.lastUpdatedDateTime = utcDate;\n\n // Compute total OAL\n formData.oal = formData.oal + formData.oalDecimal;\n\n // Calculate the default value for the Matched hose and fittings toggle only if the ASSEMBLE NOW button is clicked.\n if (closeForm) {\n formData.isDesignStandard =\n formData.step2_Matched && formData.step4_Matched;\n }\n\n if (props.hoseMakerIndex === null) {\n console.log(\"test\");\n props.addBOM(formData);\n props.setHoseMakerIndex(data.hoseMaker.length - 1);\n } else {\n console.log(\"test\");\n props.updateBOM(formData, props.hoseMakerIndex);\n }\n\n if (!closeForm) {\n setFormData({});\n props.onCancelHoseMaker();\n }\n };\n\n const handleKeyPressOAL = (e) => {\n // Prevent typing the period (.)\n if (e.key === \".\") {\n e.preventDefault();\n }\n };\n\n function handleChange(dataType, value, index = 0) {\n setIsLoading(true);\n\n let newState = [];\n newState.push(formData);\n let hoseData = newState.map((item, i) => {\n if (i == 0) {\n if (!item.hoseIdTagging && item.quantity === 1) {\n item.hoseIdTagging = [\n {\n hoseId: \"\",\n hoseIdSequence: 0,\n },\n ];\n }\n if (dataType === \"hose\") {\n item.step1_Hose = value.id;\n item.step1_Barcode = value.stockCode;\n item.step1_Name = value.stockDescription;\n return item;\n }\n if (dataType === \"fitting1\") {\n item.step2_LHF = value.id;\n item.step2_Barcode = value.stockCode;\n item.step2_Name = value.stockDescription;\n item.step2_Matched = value.isMatched;\n return item;\n }\n if (dataType === \"ferrule1\") {\n item.step3_LFerrule = value.id;\n item.step3_Barcode = value.stockCode;\n item.step3_Name = value.stockDescription;\n item.step3_Matched = value.isMatched;\n return item;\n }\n if (dataType === \"fitting2\") {\n item.step4_RHF = value.id;\n item.step4_Barcode = value.stockCode ?? value.barcode;\n item.step4_Name = value.stockDescription;\n item.step4_Matched = value.isMatched;\n return item;\n }\n if (dataType === \"ferrule2\") {\n item.step5_RFerrule = value.id;\n item.step5_Barcode = value.stockCode ?? value.barcode;\n item.step5_Name = value.stockDescription;\n item.step5_Matched = value.isMatched;\n return item;\n }\n if (dataType === \"lfActualCrimpSize\") {\n item.bomAssembly.lfActualCrimpSize = Number(value);\n item.lfActualCrimpSize = Number(value);\n item.lfActualCrimpSizeString = value;\n return item;\n }\n if (dataType === \"rfActualCrimpSize\") {\n item.bomAssembly.rfActualCrimpSize = Number(value);\n item.rfActualCrimpSize = Number(value);\n item.rfActualCrimpSizeString = value;\n return item;\n }\n if (dataType === \"isMarkedPushedOnCorrectly\") {\n item.bomAssembly.isMarkedPushedOnCorrectly = value;\n }\n if (dataType === \"oal\") {\n if (!item.oalDecimal) item.oalDecimal = 0;\n if (/^\\d+$/.test(value) || value === \"\") {\n item.oal = Number(value);\n item.oalString = value;\n return item;\n }\n }\n if (dataType === \"oalDecimal\") {\n item.oalDecimal = value;\n return item;\n }\n if (dataType === \"orientation\") {\n item.orientation = Number(value);\n item.orientationString = value;\n return item;\n }\n if (dataType === \"quantity\") {\n while (item.hoseIdTagging?.length < value) {\n item.hoseIdTagging.push({\n hoseId: \"\",\n hoseIdSequence: item.hoseIdTagging?.length,\n });\n }\n if (item.quantity > value) {\n item.hoseIdTagging.splice(value);\n }\n }\n if (dataType === \"hoseIdTagging\") {\n item.hoseIdTagging[index].hoseId = value;\n return item;\n }\n if (dataType === \"damageType\") {\n item.bomAssembly.damageType = value;\n }\n if (dataType === \"causeType\") {\n item.bomAssembly.causeType = value;\n }\n if (dataType === \"hoseReplacementType\") {\n item.bomAssembly.hoseReplacementType = value;\n }\n if (dataType === \"hoseTestCertificate\") {\n item.hoseIdTagging[index].testCertFilePath = value.filePath;\n item.hoseIdTagging[index].testCertFileName = value.fileName;\n return item;\n }\n if (dataType === \"hoseTestCertificateDelete\") {\n item.hoseIdTagging[index].testCertFilePath = null;\n item.hoseIdTagging[index].testCertFileName = null;\n return item;\n }\n return { ...item, [dataType]: value };\n }\n\n return item;\n });\n\n console.log(hoseData[0]);\n setFormData(hoseData[0]);\n setTimeout(function () {\n setIsLoading(false);\n }, 100);\n }\n\n function handleHoseIDChange(value, index = 0) {\n let newState = [];\n newState = formData.hoseIdTagging;\n\n let hoseIDData = newState.map((item, i) => {\n if (i === index) {\n item.hoseId = value;\n return item;\n }\n return item;\n });\n\n setFormData({ ...formData, hoseIdTagging: hoseIDData });\n }\n\n const getTestCertificate = async (file) => {\n handleChange(\"hoseTestCertificate\", file, hoseTagData.hoseIdSequence);\n };\n\n const deleteTestCertificate = async () => {\n handleChange(\"hoseTestCertificateDelete\", null, hoseTagData.hoseIdSequence);\n };\n\n async function handleBOMQuantityChange(index, value) {\n await setOtherItemsList([]);\n let newState = [];\n newState.push(formData);\n let hoseData = newState.map((item, i) => {\n if (i == 0) {\n item.others[index].quantity = value;\n }\n if (value == 0) {\n item.others.splice(index, 1);\n }\n return item;\n });\n\n setFormData(hoseData[0]);\n setOtherItemsList(hoseData[0].others);\n }\n\n const addOtherItems = async (product) => {\n await setOtherItemsList([]);\n const productData = {\n productId: product.id,\n quantity: 1,\n stockCode: product.stockCode,\n stockDescription: product.stockDescription,\n stockImage1: product.stockImage1,\n name: product.stockDescription,\n barcode: product.stockCode,\n };\n\n let newState = formData.others;\n const existing = newState.find(\n (element) => element.productId === product.id\n );\n\n if (!existing) newState.push(productData);\n\n setOtherItemsList(newState);\n };\n\n const onHoseClick = (hose) => {\n if (hose) {\n if (Object.keys(selectedHose).length > 0) {\n handleChange(\"oal\", \"\");\n handleChange(\"fitting1\", {});\n handleChange(\"ferrule1\", {});\n handleChange(\"fitting2\", {});\n handleChange(\"ferrule2\", {});\n handleChange(\"orientation\", {});\n handleChange(\"quantity\", {});\n handleChange(\"lfActualCrimpSize\", 0);\n handleChange(\"rfActualCrimpSize\", 0);\n setStep(6);\n }\n\n setSelectedHose(hose);\n setSelectedFitting({});\n setSelectedFitting2({});\n setSelectedFerrule({});\n setViewStep(2);\n handleChange(\"hose\", hose);\n }\n };\n\n const onFittingClick = (fitting) => {\n if (fitting) {\n if (fitting.category.name.includes(\"(2-PC)\")) setIsLHFerrule(true);\n setSelectedFitting(fitting);\n if (fitting.category.name.includes(\"(2-PC)\")) {\n setViewStep(3.1);\n } else {\n setIsLHFerrule(false);\n setSelectedFerrule({});\n handleChange(\"ferrule1\", {\n id: 0,\n stockCode: null,\n stockDescription: null,\n });\n handleChange(\"lfActualCrimpSize\", 0);\n setViewStep(4);\n }\n handleChange(\"fitting1\", fitting);\n }\n };\n\n const onFerruleClick = (ferrule) => {\n if (ferrule) {\n setSelectedFerrule(ferrule);\n setViewStep(4);\n handleChange(\"ferrule1\", ferrule);\n }\n };\n\n const onFittingClick2 = (fitting, duplicate = false) => {\n if (fitting) {\n if (fitting.category.name.includes(\"(2-PC)\")) setIsRHFerrule(true);\n setSelectedFitting2(fitting);\n if (fitting.category.name.includes(\"(2-PC)\")) {\n setViewStep(4.1);\n } else {\n setIsRHFerrule(false);\n setSelectedFerrule({});\n handleChange(\"ferrule2\", {\n id: 0,\n stockCode: null,\n stockDescription: null,\n });\n handleChange(\"rfActualCrimpSize\", 0);\n setViewStep(5);\n }\n\n // If the fitting has been duplicated, set it to be matched if the first fitting was matched, or not otherwise.\n if (duplicate) {\n fitting.isMatched = formData.step2_Matched;\n }\n\n handleChange(\"fitting2\", fitting);\n }\n };\n\n const onFerruleClick2 = (ferrule, duplicate = false) => {\n if (ferrule) {\n setViewStep(5);\n\n // If the ferrule has been duplicated, set it to be matched if the first ferrule was matched, or not otherwise.\n if (duplicate) {\n ferrule.isMatched = formData.step3_Matched;\n }\n handleChange(\"ferrule2\", ferrule);\n }\n };\n\n const onDuplicateFirstFitting = () => {\n onFittingClick2(selectedFitting, true);\n setTimeout(function () {\n onFerruleClick2(selectedFerrule, true);\n }, 1000);\n setTimeout(function () {\n handleChange(\"ferrule2\", selectedFerrule);\n }, 2000);\n };\n\n useEffect(() => {\n const countryCode = localStorage.getItem(\"userCountryCode\");\n setUserCountryCode(countryCode);\n getCauseTypes();\n getDamageTypes();\n }, []);\n\n useEffect(() => {\n if (viewStep >= 1) {\n const container = document.getElementById(\"scroll-container\");\n container.scrollTo({ top: 0, behavior: \"smooth\" });\n }\n if (props.hoseMakerIndex === null) {\n setStep(viewStep);\n }\n }, [viewStep]);\n\n useEffect(() => {\n if (\n selectedFitting?.category?.name?.includes(\"(ANGLED)\") &&\n selectedFitting2?.category?.name?.includes(\"(ANGLED)\")\n ) {\n setHasOrientation(true);\n } else {\n setHasOrientation(false);\n }\n }, [selectedFitting, selectedFitting2]);\n\n const getHosePositions = async () => {\n const hosePositions = await apiGetHosePositions(props.assetType);\n if (hosePositions) {\n setLocationList(hosePositions.positions);\n }\n };\n\n const getProduct = async (type, productName) => {\n const product = await apiGetProduct(productName);\n if (type === \"hose\") {\n setSelectedHose(product);\n }\n if (type === \"fitting1\") {\n setSelectedFitting(product);\n }\n if (type === \"ferrule1\") {\n setSelectedFerrule(product);\n }\n if (type === \"fitting2\") {\n setSelectedFitting2(product);\n }\n };\n\n const getProductDetails = async (productName) => {\n const product = await apiGetProduct(productName);\n\n return product;\n };\n\n const getPositionImage = (id) => {\n if (locationList.length > 0) {\n let position = {};\n position = locationList.find((location) => location.id === id);\n if (position) return position.url ? position.url : props.assetImage;\n }\n return props.assetImage;\n };\n\n useEffect(() => {\n if (props.assetType) {\n getHosePositions();\n }\n }, [props.assetType]);\n\n useEffect(() => {\n if (props.hoseMakerData) {\n const selectedData = props.hoseMakerData;\n\n props.hoseMakerData.lfActualCrimpSizeString =\n selectedData.bomAssembly?.lfActualCrimpSize?.toString();\n props.hoseMakerData.rfActualCrimpSizeString =\n selectedData.bomAssembly?.rfActualCrimpSize?.toString();\n\n selectedData.lfActualCrimpSize =\n selectedData.bomAssembly?.lfActualCrimpSize;\n selectedData.rfActualCrimpSize =\n selectedData.bomAssembly?.rfActualCrimpSize;\n selectedData.isMarkedPushedOnCorrectly =\n selectedData.bomAssembly?.isMarkedPushedOnCorrectly;\n selectedData.damageType = selectedData.bomAssembly?.damageType;\n selectedData.causeType = selectedData.bomAssembly?.causeType;\n selectedData.hoseReplacementType =\n selectedData.bomAssembly?.hoseReplacementType;\n\n const goal = Math.floor(selectedData.oal);\n const oalDecimal = selectedData.oal - goal;\n\n selectedData.oal = goal;\n selectedData.oalDecimal = oalDecimal;\n selectedData.oalString = selectedData.oal?.toString();\n\n const otherItems = selectedData.others?.map((data) => {\n data.stockCode = data.barcode;\n data.stockDescription = data.name;\n data.stockImage1 = data.image128;\n return data;\n });\n\n props.hoseMakerData.hoseIdTagging?.map((item, i) => {\n item.hoseIdSequence = i;\n selectedData.hoseName = item.hoseName;\n selectedData.hoseOemNumber = item.hoseOemNumber;\n selectedData.isHoseCleaned = item.isHoseCleaned;\n selectedData.isVisuallyInspected = item.isVisuallyInspected;\n selectedData.isDesignStandard = item.isDesignStandard;\n });\n\n setOtherItemsList(otherItems);\n\n if (props.hoseMakerIndex !== null) {\n getProduct(\"hose\", selectedData.step1_Barcode);\n getProduct(\"fitting1\", selectedData.step2_Barcode);\n if (selectedData.step3_Barcode) {\n getProduct(\"ferrule1\", selectedData.step3_Barcode);\n }\n getProduct(\"fitting2\", selectedData.step4_Barcode);\n if (selectedData.lfActualCrimpSize) {\n setStep(7);\n } else {\n setStep(6);\n }\n if (isAssemble) {\n setStep(7);\n setViewStep(7);\n } else {\n setViewStep(1);\n }\n setFormData(props.hoseMakerData);\n } else {\n setTimeout(function () {\n setFormData(hoseMakerTempData);\n }, 500);\n }\n } else {\n setFormData({\n step1_Hose: 0,\n step1_Barcode: \"\",\n step1_Name: \"\",\n step2_LHF: 0,\n step2_Barcode: \"\",\n step2_Name: \"\",\n step2_Matched: false,\n step3_LFerrule: 0,\n step3_Barcode: \"\",\n step3_Name: \"\",\n step3_Matched: false,\n step4_RHF: 0,\n step4_Barcode: \"\",\n step4_Name: \"\",\n step4_Matched: false,\n step5_RFerrule: 0,\n step5_Barcode: \"\",\n step5_Name: \"\",\n step5_Matched: false,\n quantity: 1,\n orientation: null,\n orientationString: \"\",\n oal: null,\n oalDecimal: null,\n oalString: \"\",\n positionId: 0,\n others: [],\n lfActualCrimpSize: 0,\n rfActualCrimpSize: 0,\n isMarkedPushedOnCorrectly: false,\n bomAssembly: {\n lfActualCrimpSize: 0,\n lfRecCrimpSize: 0,\n lfRecDieSize: 0,\n rfActualCrimpSize: 0,\n rfRecCrimpSize: 0,\n rfRecDieSize: 0,\n isMarkedPushedOnCorrectly: false,\n image1: \"\",\n image2: \"\",\n image3: \"\",\n image4: \"\",\n createdDateTime: null,\n lastUpdatedDateTime: null,\n },\n });\n }\n }, [props.hoseMakerData]);\n\n useEffect(() => {\n const currentIndex =\n data.hoseMaker.length === 0\n ? 0\n : props.hoseMakerIndex\n ? props.hoseMakerIndex\n : props.hoseMakerIndex === 0\n ? 0\n : data.hoseMaker.length;\n }, []);\n\n return (\n \n {viewTestingCertificate && (\n \n Confirmation \n \n \n \n onDeleteHoseMakerImage()}\n >\n YES\n \n \n \n \n \n \n
\n \n \n setViewStep(2)}\n >\n \n Set hose length\n \n
\n ) : null}\n {step > 2 ? (\n \n {isLoading ? (\n
\n \n Are you sure
you want to delete this image?\n
\n
\n \n setViewStep(1)}\n >\n \n Select hose\n \n
\n {step > 1 ? (\n \n \n onConfirmBOM()}\n style={{ display: currentStatus > 2 ? \"none\" : \"visible\" }}\n >\n Confirm\n \n
\n ) : (\n \n \n
\n )}\n Mode\n \n
\n {`Company: \\xa0 ${data.customerDetails?.companyName}`}\n
\n{`Contact: \\xa0 ${data.customerDetails?.contactName}`}\n
\n{`Location: \\xa0 ${data.customerDetails?.customerLocation}`}\n
\n{`Status: \\xa0 Work in Progress`}\n
\n \n
\n
\n
\n {`Asset ID: \\xa0 ${data.assetDetails?.assetSerialNumber}`}\n
\n{`Asset Make: \\xa0 ${data.assetDetails?.makeName}`}\n
\n{`Asset Equipment Type: \\xa0 ${data.assetDetails?.equipmentTypeName}`}\n
\n{`Model Name: \\xa0 ${data.assetDetails?.model}`}\n
\n {`Asset Hours/Mileage: \\xa0 ${\n data.assetDetails?.assetPropValue\n } ${\n data.assetDetails?.assetPropValue &&\n data.assetDetails?.assetPropUnit\n }`}\n
\n \n
\n
\n
\n {`Asset Hours/Mileage: \\xa0 ${\n data.assetDetails?.assetPropValue\n } ${\n data.assetDetails?.assetPropValue &&\n data.assetDetails?.assetPropUnit\n }`}\n
\n {`${\n isQuoting ? \"Quote\" : \"Job\"\n } Details: \\xa0 ${\n data.jobDetails?.jobDesc ? data.jobDetails?.jobDesc : \"\"\n }`}\n
\n {`Travel: \\xa0 ${\n data.jobDetails?.distanceTravelled\n ? `${data.jobDetails?.distanceTravelled} ${\n userCountryCode === \"US\" ? \"MI\" : \"KMs\"\n }`\n : \"\"\n }`}\n
\n {`Labour: \\xa0 ${\n data.jobDetails?.hoursLabour\n ? `${data.jobDetails.hoursLabour} Hrs`\n : \"\"\n }`}\n
\n \n {`Travel: \\xa0 ${\n data.jobDetails?.distanceTravelled\n ? `${data.jobDetails?.distanceTravelled} ${\n userCountryCode === \"US\" ? \"MI\" : \"KMs\"\n }`\n : \"\"\n }`}\n
\n {`Labour: \\xa0 ${\n data.jobDetails?.hoursLabour\n ? `${data.jobDetails.hoursLabour} Hrs`\n : \"\"\n }`}\n
\n \n \n {selectedFitting2 && (\n
\n \n \n {viewStep == 1 ? (\n \n \n \n {selectedHose.stockDescription}\n \n
\n \n 2}>\n \n \n \n \n
\n ) : null}\n {viewStep === 2 ? (\n \n \n 1. Select hose type and size\n \n
\n 2}>\n \n \n \n \n \n \n {selectedFitting && (\n
\n \n \n \n 2. Set hose length\n \n
\n 2}>\n \n \n \n \n \n \n {selectedFitting &&\n selectedFitting.stockImage1 ? (\n
\n \n \n \n 3. Select hose fitting\n \n
\n 2}>\n \n \n \n \n \n \n {selectedFitting &&\n selectedFitting.stockImage1 ? (\n
\n \n \n \n 3.1 Select ferrule\n \n
\n 2}>\n \n \n \n \n \n \n {selectedFitting &&\n selectedFitting.stockImage1 ? (\n
\n \n \n \n 4. Select second fitting\n \n onDuplicateFirstFitting()}\n >\n Duplicate first fitting\n \n
\n 2}>\n \n \n \n \n \n \n {selectedFitting &&\n selectedFitting.stockImage1 ? (\n
\n \n \n \n 4.1 Select ferrule\n \n
\n 2}>\n \n \n \n \n \n {hasOrientation && (\n \n \n handleChange(\"orientation\", data.value)\n }\n />\n
\n \n )}\n \n \n {hasOrientation\n ? \"5. Set orientation and accessories\"\n : \"5. Select hose assembly accessories\"}\n \n
\n \n \n \n Enter Orientation:\n \n
\n \n {otherItemsList.map((data, index) => (\n \n {/* \n {getPositionName(data.positionId)}\n */}\n \n \n \n \n \n \n \n \n handleBOMQuantityChange(\n index,\n value\n )\n }\n onKeyDownHandler={(e) => {\n if (e.key === \"Enter\")\n e.preventDefault();\n }}\n />\n \n \n \n \n \n \n
\n ))}\n \n ) : (\n \n \n \n \n \n \n {`${data.barcode} - ${data.name}`}\n \n \n \n \n
\n \n 2}>\n \n \n \n \n \n \n {selectedFitting &&\n selectedFitting.stockImage1 ? (\n
\n \n \n \n 6. Select location\n \n
\n \n \n \n Select Location:\n \n
\n \n \n \n \n \n \n \n \n {selectedFitting &&\n selectedFitting.stockImage1 ? (\n
\n \n \n \n 7. {isQuoting ? \"BOM Details\" : \"Assemble BOM\"}\n \n
\n \n \n Cut Length: {formData.oal}\n {userCountryCode === \"US\" ? \"inches\" : \"mm\"}\n \n
\n \n \n \n HOSE NAME\n \n
\n \n \n \n OEM Part Number\n \n
\n 2}>\n \n \n handleHoseIDChange(\n data.value,\n index\n )\n }\n placeholder={\"Hose \" + (index + 1)}\n />\n \n
\n \n \n );\n })}\n {props.isJobbingBasicMode ? null : (\n \n
\n \n \n \n \n );\n};\n\nexport default HoseMakerNew;\n","import _ from \"lodash\";\nimport React, { Component } from \"react\";\nimport { Dropdown, Search } from \"semantic-ui-react\";\n\nclass AssetSearch extends Component {\n constructor() {\n super();\n }\n\n state = {\n open: false,\n };\n\n // Debounce the onSearchChange handler\n onSearchChange = _.debounce((e, { value }) => {\n // Update the state with the current search value\n this.props.onSearchChange(value);\n }, 1000); // Adjust the debounce delay as needed\n\n handleFocus = () => {\n this.setState({ open: true }); // Show all results on focus\n };\n\n handleBlur = () => {\n // Delay closing to allow `onResultSelect` to trigger\n this.timeout = setTimeout(() => {\n this.setState({ open: false });\n }, 200);\n };\n\n resultRenderer = ({ value, title, description, price }) => {\n return (\n \n 2}>\n \n \n \n \n Bill of Materials\n \n \n \n {formData && formData.step1_Hose ? (\n \n
\n \n \n Hose:\n \n
\n \n {`${formData.step1_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step1_Name}\n \n
\n ) : null}\n {formData && formData.oal ? (\n \n \n {`${formData.step1_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step1_Name}\n \n
\n \n Cut Length:\n \n
\n {`${\n formData.oal + formData.oalDecimal\n }${userCountryCode === \"US\" ? \" inches\" : \"mm\"}`}\n
\n ) : null}\n {formData && formData.step2_LHF ? (\n \n {`${\n formData.oal + formData.oalDecimal\n }${userCountryCode === \"US\" ? \" inches\" : \"mm\"}`}\n
\n \n LH Fitting:\n \n
\n\n {`${formData.step2_Barcode} \\xa0 x \\xa0 1`}\n \n
\n\n {formData.step2_Name}\n \n
\n ) : null}\n {formData && formData.step3_LFerrule ? (\n \n
\n
\n \n LH Ferrule:\n \n
\n\n {`${formData.step3_Barcode} \\xa0 x \\xa0 1`}\n \n
\n\n {formData.step3_Name}\n \n
\n ) : null}\n {formData && formData.step4_RHF ? (\n \n
\n
\n \n RH Fitting:\n \n
\n\n {`${formData.step4_Barcode} \\xa0 x \\xa0 1`}\n \n
\n\n {formData.step4_Name}\n \n
\n ) : null}\n {formData && formData.step5_RFerrule ? (\n \n
\n
\n \n RH Ferrule:\n \n
\n\n {`${formData.step5_Barcode} \\xa0 x \\xa0 1`}\n \n
\n\n {formData.step5_Name}\n \n
\n ) : null}\n {hasOrientation &&\n formData &&\n formData.orientationString !== \"\" ? (\n \n
\n
\n \n Orientation:\n \n
\n \n {`${formData.orientation}°`}\n \n
\n ) : null}\n {formData &&\n formData.others &&\n formData.others.length > 0 ? (\n \n \n {`${formData.orientation}°`}\n \n
\n \n Other items:\n \n {formData?.others?.map((data, index) => {\n return (\n
\n ) : null}\n {formData.step1_Barcode &&\n ((formData.step2_Barcode && !formData.step2_Matched) ||\n (formData.step3_Barcode && !formData.step3_Matched) ||\n (formData.step4_Barcode && !formData.step4_Matched) ||\n (formData.step5_Barcode &&\n !formData.step5_Matched)) && (\n \n \n {`${data.barcode} \\xa0 x \\xa0 ${data.quantity}`}\n \n
\n {data.name}\n
\n );\n })}\n \n {data.name}\n
\n \n * Highlighted fittings and ferrules are unmatched.\n \n
\n )}\n \n \n {value}\n
\n Manufacturer: {price}\n
\n Equipment Type: {description}\n
\n Model: {title}\n
\n );\n };\n\n render() {\n const {\n loading,\n value,\n enable,\n onResultSelect,\n onSearchChange,\n noResultsMessage,\n isMyAssets = false,\n results,\n } = this.props;\n\n return (\n <>\n {isMyAssets ? (\n \n Manufacturer: {price}\n
\n Equipment Type: {description}\n
\n Model: {title}\n
\n \n \n \n Upload Image\n \n
\n \n );\n}\n","import React, { useState } from \"react\";\nimport { Button, Form, Input, Modal } from \"semantic-ui-react\";\nimport { showErrorToast, showSuccessToast } from \"../../utils/toastUtils\";\n\nconst RS23SetPriceForm = ({\n hosetitle,\n hoseIndex,\n priceText,\n closeForm,\n jobData,\n setJobData,\n}) => {\n if (priceText === null) {\n priceText = \"0.00\";\n } else {\n priceText = priceText.toFixed(2);\n }\n\n const [newPrice, setNewPrice] = useState(priceText.toString());\n const [isValid, setIsValid] = useState(true);\n\n const onChangePrice = (e) => {\n setIsValid(true);\n setNewPrice(e.target.value);\n };\n\n const onSavePrice = async () => {\n if (isNaN(parseFloat(newPrice)) || parseFloat(newPrice) < 0) {\n showErrorToast(\"Invalid input price\");\n setIsValid(false);\n return;\n }\n if (newPrice.includes(\".\") && newPrice.trim().split(\".\")[1].length > 2) {\n showErrorToast(\"Maximum two decimal places\");\n setIsValid(false);\n return;\n }\n const newJobData = { ...jobData };\n newJobData.hoseMaker[hoseIndex].rS23ComplianceRate = parseFloat(newPrice);\n setJobData(newJobData);\n closeForm();\n };\n\n const onCloseForm = () => {\n closeForm();\n };\n\n return (\n \n Hose Maker Item Deleted Successfully\n
\n );\n } else {\n showErrorToast(\"Failed to delete Hose Maker Item\");\n }\n setOpenDeleteHoseMakerPopup(false);\n setIsLoading(false);\n };\n\n // Function to format time as \"HH:MM:SS\"\n const formatTime = (totalSeconds) => {\n if (!totalSeconds) return \"00:00:00\";\n const hours = Math.floor(totalSeconds / 3600);\n const minutes = Math.floor((totalSeconds % 3600) / 60);\n const secs = totalSeconds % 60;\n\n const pad = (num) => String(num).padStart(2, \"0\");\n\n return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;\n };\n\n // Function to toggle the running state\n const toggleTimer = () => {\n onStartStopJobTimeLog();\n };\n\n // Function to call API time clock start/stop\n const onStartStopJobTimeLog = async () => {\n let result = null;\n\n if (!running) {\n result = await apiJobTimeLogStart(selectedId);\n } else {\n result = await apiJobTimeLogStop(selectedId, currentLog.id);\n setSeconds(0);\n }\n\n if (result) {\n setCurrentLog(result);\n getJobbingTimeLogsData();\n onSearch(\n jobbingSearchKeyword,\n jobbingSearchType,\n filterStatus,\n technicianFilter\n );\n setRunning(!running);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n // Function to call API time clock start/stop\n const onSaveManualTimeEntry = async () => {\n try {\n setIsLoading(true);\n const jobData = await apiJobTimeLogManual(manualTimeEntry, selectedId);\n if (jobData) {\n showSuccessToast(\n \n Manual Time Entry Saved Successfully\n
\n );\n setTimeout(function () {\n setIsLoading(false);\n setOpenManualTimeEntry(false);\n getJobbingTimeLogsData();\n setManualTimeEntry({\n id: 0,\n jobId: \"\",\n notes: null,\n timeSpanMinutes: null,\n });\n }, 300);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const getStockLocationsData = async () => {\n const result = await apiGetStockLocationList();\n if (result) {\n setStocklocationList(result);\n } else {\n setStocklocationList([]);\n }\n };\n\n const getAllStockLocationsData = async () => {\n const result = await apiGetAllStockLocationList();\n if (result) {\n setAllStocklocationList(result);\n } else {\n setAllStocklocationList([]);\n }\n };\n\n const mileage =\n localStorage.getItem(\"userCountryCode\") === \"US\" ? \"mi\" : \"km\";\n\n // Unit options for hours/mileage\n const options = [\n { key: \"hrs\", text: \"Hrs\", value: \"hrs\" },\n { key: mileage, text: mileage === \"mi\" ? \"MI\" : \"KMs\", value: mileage },\n ];\n\n const invoiceStatuses = [\n { text: \"Save as draft\", value: 1 },\n { text: \"Complete and send invoice\", value: 2 },\n ];\n\n const locationRef = useRef(null);\n const locationRefXero = useRef(null);\n const ref = useRef();\n const { events } = useDraggable(ref);\n\n function handleChange(dataType, value) {\n const userName = localStorage.getItem(\"user\");\n let newState = [];\n newState.push(formData);\n let jobData = newState.map((item, i) => {\n if (i == 0) {\n if (dataType == \"technicianEmail\") {\n item.technicianSelected = true;\n }\n if (dataType == \"dueDateTime\") {\n var date = new Date(value);\n const formattedDate = date.toISOString();\n item.dueDateTime = formattedDate;\n setSelectedDate(value);\n return item;\n }\n if (dataType == \"companyName\") {\n item.customer = {};\n item.customer.companyName = value;\n item.customer.userName = userName;\n item.customer.id = null;\n }\n if (dataType == \"discountPercent\") {\n item.customer = item.customer ? item.customer : {};\n item.customer.discountPercent = Number(value);\n item.customerDiscount = Number(value);\n }\n if (dataType == \"contactName\") {\n item.customerContact = {};\n item.customerContact.contactName = value;\n item.customerContact.userName = userName;\n item.customerContact.id = null;\n item.customerContact.customerId = item.customer?.id\n ? item.customer?.id\n : null;\n }\n if (dataType == \"customer\") {\n item.companyName = value.companyName;\n }\n if (dataType == \"customerWithDiscount\") {\n item.customer = value;\n item.companyName = value.companyName;\n if (value.discountPercent === 0) {\n item.discountPercent = 0;\n item.customerDiscount = 0;\n }\n if (value.discountPercent === null) {\n item.discountPercent = \"\";\n item.customerDiscount = \"\";\n }\n if (value.discountPercent) {\n item.discountPercent = value.discountPercent;\n item.customerDiscount = value.discountPercent;\n }\n return item;\n }\n if (dataType == \"customerContact\") {\n item.contactName = value.contactName;\n item.contactNumber = value.contactNumber;\n item.contactEmail = value.email;\n }\n if (dataType === \"selectCustomer\") {\n item.discountPercent = \"\";\n item.customerDiscount = \"\";\n item.companyName = \"\";\n setSelectedCustomer({});\n }\n if (dataType == \"selectCustomer\" && value == true) {\n if (!item.contactName) item.selectContact = true;\n }\n if (dataType == \"isSearchAsset\") {\n item.companyAssetId = null;\n item.assetTextId = \"\";\n item.assetSerialNumber = \"\";\n item.equipmentTypeId = null;\n item.assetId = null;\n item.otherAssetDetails = null;\n item.makeName = \"\";\n item.equipmentTypeName = \"\";\n item.model = \"\";\n item.assetPropUnit = \"km\";\n item.assetPropValue = \"\";\n setMyAssetsSearch(\"\");\n setAssetSearch(\"\");\n setAssetType(\"\");\n setAssetImage(\"\");\n setLocationList([]);\n }\n if (dataType == \"makeId\" && value == 0) {\n setAssetSearch(\"\");\n setAssetType(\"\");\n item.equipmentTypeId = null;\n item.assetId = null;\n setAssetImage(\"\");\n setLocationList([]);\n }\n if (dataType == \"makeId\" && value != 0) {\n item.equipmentTypeId = null;\n item.assetId = null;\n item.otherAssetDetails = null;\n item.makeName = \"\";\n item.equipmentTypeName = \"\";\n item.model = \"\";\n setAssetType(\"\");\n setAssetImage(\"\");\n setLocationList([]);\n }\n if (dataType == \"asset\" && value) {\n item.assetId = value;\n item.otherAssetDetails = null;\n return item;\n }\n if (dataType == \"customerLocation\") {\n if (locationRef && locationRef.current)\n return {\n ...item,\n [dataType]: locationRef.current.refs.input.value,\n };\n }\n return { ...item, [dataType]: value };\n }\n return item;\n });\n\n if (dataType === \"assetId\") {\n onAutoSaveJob(jobData[0]);\n }\n setFormData(jobData[0]);\n }\n\n const handleDiscountChange = (e) => {\n const value = e.target.value;\n\n // Allow only numbers and prevent letters\n if (!/^\\d*$/.test(value)) return;\n\n // Enforce the max value of 100\n const numericValue = Math.min(Number(value), 100);\n\n handleChange(\"discountPercent\", numericValue);\n e.target.value = numericValue;\n };\n\n const handleDiscountKeyDown = (e) => {\n // Block non-numeric characters like 'e', 'E', '+', '-', and '.'\n if ([\"e\", \"E\", \"+\", \"-\", \".\"].includes(e.key)) {\n e.preventDefault();\n }\n };\n\n function handleInvoiceChange(dataType, value) {\n let newState = [];\n newState.push(invoice);\n let invoiceData = newState.map((item, i) => {\n if (i == 0) {\n if (dataType === \"contactId\") {\n item.invoiceID = null;\n item.invoiceStatus = 1;\n }\n return { ...item, [dataType]: value };\n }\n return item;\n });\n\n setInvoice(invoiceData[0]);\n }\n\n const addOtherComponents = async (product) => {\n var currentDate = new Date();\n var utcDate = currentDate.toISOString();\n const productData = {\n productId: product.id,\n quantity: 1,\n stockCode: product.stockCode,\n stockDescription: product.stockDescription,\n image128: product.stockImage1,\n name: product.stockDescription,\n barcode: product.stockCode,\n createdDateTime: utcDate,\n };\n\n let newState = formData.inventoryComponents;\n const existing = newState.find(\n (element) => element.productId === product.id\n );\n\n if (!existing) {\n newState.push(productData);\n } else {\n let invComponentsNewState = newState.map((item, i) => {\n if (item.productId === product.id) {\n item.quantity += 1;\n }\n return item;\n });\n handleChange(\"inventoryComponents\", invComponentsNewState);\n setOpenOtherComponents(false);\n return true;\n }\n\n // Sort inventory components AFTER adding product\n newState.sort(function (a, b) {\n return new Date(b.createdDateTime) - new Date(a.createdDateTime);\n });\n\n handleChange(\"inventoryComponents\", newState);\n setOpenOtherComponents(false);\n };\n\n const addCustomComponents = async () => {\n const productData = {\n productId: null,\n stockCode: null,\n stockDescription: customProductText,\n image128: null,\n name: customProductText,\n barcode: null,\n description: customProductText,\n quantity: 1,\n sellPrice: 0,\n };\n\n let newState = formData.inventoryNonBOA;\n newState.push(productData);\n\n handleChange(\"inventoryNonBOA\", newState);\n setOpenCustomItem(false);\n };\n\n function handleOtherComponentQuantityChange(index, value) {\n let newState = [];\n newState.push(formData);\n let jobData = newState.map((item, i) => {\n if (i == 0) {\n item.inventoryComponents[index].quantity = value;\n }\n if (value == 0) {\n item.inventoryComponents.splice(index, 1);\n }\n return item;\n });\n\n handleChange(\"inventoryComponents\", jobData[0].inventoryComponents);\n }\n\n function handleCustomComponentQuantityChange(index, value) {\n let newState = [];\n newState.push(formData);\n let jobData = newState.map((item, i) => {\n if (i == 0) {\n item.inventoryNonBOA[index].quantity = value;\n }\n if (value === -1) {\n item.inventoryNonBOA.splice(index, 1);\n }\n return item;\n });\n\n handleChange(\"inventoryNonBOA\", jobData[0].inventoryNonBOA);\n }\n\n function handleCustomComponentPriceChange(index, value) {\n let newState = [];\n newState.push(formData);\n let jobData = newState.map((item, i) => {\n if (i == 0) {\n item.inventoryNonBOA[index].sellPrice = value;\n }\n return item;\n });\n\n handleChange(\"inventoryNonBOA\", jobData[0].inventoryNonBOA);\n }\n\n function handleBOMQuantityChange(index, value) {\n let newState = [];\n newState.push(formData);\n let jobData = newState.map((item, i) => {\n if (i == 0) {\n item.hoseMaker[index].quantity = value;\n }\n if (value == 0) {\n item.hoseMaker.splice(index, 1);\n }\n return item;\n });\n\n handleChange(\"hoseMaker\", jobData[0].hoseMaker);\n }\n\n const addBOM = (data) => {\n let newState = [];\n newState.push(formData);\n let jobData = newState.map((item, i) => {\n if (i == 0) {\n item.hoseMaker.push(data);\n return item;\n }\n return item;\n });\n\n onAutoSaveJob(jobData[0]);\n setFormData(jobData[0]);\n };\n\n const updateBOM = (data, index) => {\n let newState = [];\n newState.push(formData);\n let jobData = newState.map((item, i) => {\n return item;\n });\n\n jobData[0].hoseMaker.map((item, i) => {\n if (index === i) {\n jobData[0].hoseMaker[i] = data;\n }\n });\n\n onAutoSaveJob(jobData[0]);\n setFormData(jobData[0]);\n };\n\n const onCancelHoseMaker = () => {\n setOpenHoseMaker(false);\n };\n\n const onSearch = async (keyword, searchType, status, technician) => {\n setSearchLoading(true);\n const result = await apiGetJobbingList(\n keyword,\n searchType,\n status,\n technician\n );\n if (result) {\n setSearchLoading(false);\n setData(result);\n setSearchLoading(false);\n const groupedByDateTime = result.reduce((result, item) => {\n var key = \"Completed\";\n if (item.jobStatusId < 3) {\n const date = item.dueDateTime\n ? new Date(item.dueDateTime)\n : \"Unconfirmed\"; // Use ISO string to ensure consistent keys\n\n var today = new Date();\n today.setHours(0, 0, 0, 0);\n var tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n\n if (date !== \"Unconfirmed\") {\n if (date.toDateString() === today.toDateString()) {\n key = \"Today\";\n } else if (date.toDateString() === tomorrow.toDateString()) {\n key = \"Tomorrow\";\n } else if (date < today) {\n key = \"Overdue\";\n } else {\n key = date.toLocaleDateString(\"en-GB\", {\n day: \"2-digit\",\n month: \"2-digit\",\n year: \"2-digit\",\n });\n }\n } else {\n key = \"Unconfirmed\";\n }\n }\n // Check if the key already exists, if not, create an empty array\n result[key] = result[key] || [];\n result[key].push(item);\n\n return result;\n }, {});\n const orderedKeys = Object.keys(groupedByDateTime).sort((a, b) => {\n // Define the order of keys\n const order = {\n Overdue: -3,\n Today: -2,\n Tomorrow: 1,\n Unconfirmed: 100,\n Completed: 101,\n };\n\n // Compare keys based on the order defined\n return (\n (order[a] || Number.MAX_SAFE_INTEGER) -\n (order[b] || Number.MAX_SAFE_INTEGER)\n );\n });\n\n const finalOrderedKeys = orderedKeys.sort((a, b) => {\n if (a === \"Unconfirmed\") return 1;\n if (b === \"Unconfirmed\") return -1;\n return 0;\n });\n\n const finalOrderedKeys2 = finalOrderedKeys.sort((a, b) => {\n if (a === \"Completed\") return 1;\n if (b === \"Completed\") return -1;\n return 0;\n });\n\n const sortedKeys = sortKeysWithDatesFirst(finalOrderedKeys2);\n\n const orderedGrouped = sortedKeys.reduce((result, key) => {\n result[key] = groupedByDateTime[key];\n return result;\n }, {});\n\n // Keys to exclude from sorting\n const excludeKeys = [\"Completed\", \"Unconfirmed\"];\n\n // Iterate over the keys of the object\n for (const key in orderedGrouped) {\n // Check if the key is not in the excludeKeys array\n if (!excludeKeys.includes(key)) {\n // Sort the array based on dueDateTime\n orderedGrouped[key].sort((a, b) => {\n if (a.dueDateTime === null) return 1; // Null dueDateTime goes to the end\n if (b.dueDateTime === null) return -1; // Null dueDateTime goes to the end\n return new Date(a.dueDateTime) - new Date(b.dueDateTime);\n });\n }\n }\n\n setJobListData(orderedGrouped);\n }\n };\n\n const onSubmitJob = async (status, progress) => {\n setIsSaved(true);\n if (formData.companyName?.trim().length === 0) {\n if (isJobbingBasicModeDefault) {\n formData.saveContactDetails = false;\n } else {\n showErrorToast(\"Customer field is required\");\n return false;\n }\n }\n if (\n (formData?.customerPurchaseOrderNumber === \"\" ||\n !formData?.customerPurchaseOrderNumber) &&\n selectedCustomer.requirePurchaseOrderNumber &&\n status === 3 &&\n !isJobbingBasicModeDefault\n ) {\n showErrorToast(\"Order Number (PO) is required\");\n return false;\n }\n if (formData.id === \"\") {\n onSubmitCreateJob(status, progress);\n } else {\n onSubmitUpdateJob(status, progress);\n }\n };\n\n const onDuplicateJob = async () => {\n setIsLoading(true);\n formData.customerPurchaseOrderNumber = \"\";\n formData.urgencyId = 0;\n formData.jobDesc = \"\";\n formData.distanceTravelled = null;\n formData.hoursLabour = null;\n formData.notes = null;\n formData.saveContactDetails = false;\n formData.technicianEmail = null;\n formData.dueDateTime = null;\n\n for (let i = 0; i < formData.hoseMaker.length; i++) {\n formData.hoseMaker[i].quantity = 1;\n\n // Reset BOM Assembly object, minimum 5 items required\n formData.hoseMaker[i].bomAssembly.lfActualCrimpSize = 0;\n formData.hoseMaker[i].bomAssembly.lfRecCrimpSize = 0;\n formData.hoseMaker[i].bomAssembly.lfRecDieSize = 0;\n formData.hoseMaker[i].bomAssembly.rfActualCrimpSize = 0;\n formData.hoseMaker[i].bomAssembly.rfRecCrimpSize = 0;\n formData.hoseMaker[i].bomAssembly.rfRecDieSize = 0;\n formData.hoseMaker[i].bomAssembly.causeType = null;\n formData.hoseMaker[i].bomAssembly.damageType = null;\n formData.hoseMaker[i].bomAssembly.hoseReplacementType = null;\n formData.hoseMaker[i].bomAssembly.isMarkedPushedOnCorrectly = false;\n formData.hoseMaker[i].bomAssembly.createdBy = null;\n formData.hoseMaker[i].bomAssembly.createdDateTime = null;\n formData.hoseMaker[i].bomAssembly.lastUpdatedDateTime =\n new Date().toISOString();\n\n formData.hoseMaker[i].isRS23Compliant = null;\n formData.hoseMaker[i].rS23ComplianceRate = null;\n formData.hoseMaker[i].hosePositionName = null;\n formData.hoseMaker[i].hosePositionImage = null;\n formData.hoseMaker[i].bomAssemblyImages = [];\n formData.hoseMaker[i].isHoseCleaned = null;\n formData.hoseMaker[i].isVisuallyInspected = null;\n formData.hoseMaker[i].isDesignStandard = null;\n formData.hoseMaker[i].hoseIdTagging = [{ hoseId: \"\", hoseIdSequence: 0 }];\n }\n\n const jobData = await apiCreateJob(formData, location, 2);\n if (jobData) {\n formData.id = jobData.id;\n const updatedJobData = await apiUpdateJob(formData, location, 2);\n getJobbingListData();\n showSuccessToast(\n \n Job Duplicated Successfully\n
\n );\n setSelectedId(jobData.id);\n setSelectedCard(jobData?.jobDetails?.jobNumber);\n }\n setIsLoading(false);\n setOpenToDuplicate(false);\n };\n\n const onSubmitCreateJob = async (status, progress) => {\n if (formData.makeId === 0) {\n if (\n formData.makeName === \"\" ||\n formData.equipmentTypeName === \"\" ||\n formData.model === \"\"\n ) {\n showErrorToast(\"Please complete all required fields\");\n if (progress) handleChange(\"jobStatusId\", status - 1);\n return false;\n } else {\n formData.otherAssetDetails = `${formData.makeName} | ${formData.equipmentTypeName} | ${formData.model}`;\n }\n }\n try {\n const jobData = await apiCreateJob(formData, location, status);\n if (jobData) {\n setIsSaved(false);\n getJobbingListData();\n showSuccessToast(\n \n Job Created Successfully\n
\n );\n setSelectedId(jobData.id);\n setSelectedCard(jobData?.jobDetails?.jobNumber);\n } else {\n if (progress) handleChange(\"jobStatusId\", status - 1);\n }\n } catch {\n showErrorToast(\"Please complete all required fields\");\n if (progress) handleChange(\"jobStatusId\", status - 1);\n }\n };\n\n const onSubmitUpdateJob = async (status, progress) => {\n setIsLoading(true);\n if (status > 2 && formData.makeId === 0) {\n if (\n formData.makeName === \"\" ||\n formData.equipmentTypeName === \"\" ||\n formData.model === \"\"\n ) {\n showErrorToast(\"Please complete all required fields\");\n if (progress) handleChange(\"jobStatusId\", status - 1);\n setIsLoading(false);\n return false;\n } else {\n formData.otherAssetDetails = `${formData.makeName} | ${formData.equipmentTypeName} | ${formData.model}`;\n }\n }\n if (formData.makeId === 0) {\n formData.otherAssetDetails = `${formData.makeName} | ${formData.equipmentTypeName} | ${formData.model}`;\n }\n const jobData = await apiUpdateJob(formData, location, status);\n if (jobData) {\n // if (jobData.errors) {\n // setStockLocationError(jobData);\n // setOpenStockLocationError(true);\n // setIsLoading(false);\n // if (progress) handleChange(\"jobStatusId\", status - 1);\n // }\n // if (jobData.statusCode === 403) {\n // setOpenSelectStockLocation(true);\n // setIsLoading(false);\n // return false;\n // }\n\n getCustomersData();\n setIsSaved(false);\n setIsLoading(false);\n setOpenSelectStockLocation(false);\n setOpenToInprogress(false);\n setOpenToInvoiced(false);\n getJobbingListData();\n showSuccessToast(\n \n Job Updated Successfully\n
\n );\n if (jobData.duplicateCustomerMessage) {\n setDuplicateMessage(jobData.duplicateCustomerMessage);\n setOpenIsDuplicateCustomer(true);\n }\n setTimeout(function () {\n getJobbingData();\n }, 300);\n } else {\n setIsLoading(false);\n if (progress) handleChange(\"jobStatusId\", status - 1);\n }\n };\n\n const onAutoSaveJob = async (data) => {\n if (formData.makeId === 0) {\n if (\n formData.makeName === \"\" ||\n formData.equipmentTypeName === \"\" ||\n formData.model === \"\"\n ) {\n } else {\n formData.otherAssetDetails = `${formData.makeName} | ${formData.equipmentTypeName} | ${formData.model}`;\n }\n }\n\n // Add isMatchedList to data\n data.hoseMaker.forEach((assembly) => {\n const isMatchedList = [\n assembly.step2_Matched ?? false,\n assembly.step3_Matched ?? false,\n assembly.step4_Matched ?? false,\n assembly.step5_Matched ?? false,\n ];\n\n assembly.isMatchedList = isMatchedList;\n });\n\n try {\n const jobData = await apiUpdateJob(data, location, data.jobStatusId);\n if (jobData) {\n setOpenToInprogress(false);\n setOpenToInvoiced(false);\n showSuccessToast(\n \n Changes Saved Successfully\n
\n );\n setTimeout(function () {\n if (jobData.data.hoseMaker.length > 0) {\n formData.hoseMaker.forEach((assembly, index) => {\n assembly.bomAssembly.lfRecCrimpSize =\n jobData.data.hoseMaker[index].bomAssembly.lfRecCrimpSize;\n assembly.bomAssembly.lfRecDieSize =\n jobData.data.hoseMaker[index].bomAssembly.lfRecDieSize;\n assembly.bomAssembly.rfRecCrimpSize =\n jobData.data.hoseMaker[index].bomAssembly.rfRecCrimpSize;\n assembly.bomAssembly.rfRecDieSize =\n jobData.data.hoseMaker[index].bomAssembly.rfRecDieSize;\n });\n }\n\n getJobbingData();\n }, 300);\n } else {\n // showErrorToast(\"Changes not saved\");\n }\n } catch {\n // showErrorToast(\"Changes not saved\");\n }\n };\n\n const onGeneratePDF = async (type) => {\n setIsLoading(true);\n try {\n const pdfData = await apiGeneratePDF(\n formData.id,\n selectedData?.jobDetails?.jobNumber,\n type\n );\n if (pdfData) {\n setIsLoading(false);\n setOpenSendJob(false);\n showSuccessToast(\n \n PDF Downloaded Successfully\n
\n );\n } else {\n setIsLoading(false);\n setOpenSendJob(false);\n showWarningToast(\"Generating PDF. Please come back later.\");\n }\n } catch {\n setIsLoading(false);\n setOpenSendJob(false);\n showErrorToast(\"Generate PDF Failed\");\n }\n };\n\n const onGetJobPDF = async (type) => {\n setIsLoading(true);\n const result = await apiGetJobPDF(formData.id, type);\n if (result) {\n sendJobEmail(result, type);\n setIsLoading(false);\n setOpenSendJob(false);\n } else {\n setIsLoading(false);\n setOpenSendJob(false);\n showWarningToast(\"Something went wrong\");\n }\n };\n\n const sendJobEmail = (data, type) => {\n const { fileUrl } = data;\n const subject =\n type === 1\n ? `Internal Job Card - ${selectedData?.jobDetails?.jobNumber}`\n : \"Your Job Card is Ready\";\n\n // Construct the email body using plain text (with %0A for line breaks)\n const body =\n type === 1\n ? `Hello Team,%0A%0A` +\n `The job card for Job Number ${selectedData?.jobDetails?.jobNumber} has been completed. You can view or download it below:%0A%0A` +\n `Job Card (Internal): ${selectedData?.jobDetails?.jobNumber}%0A` +\n `${fileUrl}%0A%0A` +\n `Kind regards,%0A` +\n `${formData.contactName}%0A` +\n `${formData.companyName}`\n : `Hello ${formData.companyName},%0A%0A` +\n `Below is the detailed job card for your recent service:%0A%0A` +\n `Job Card: ${selectedData?.jobDetails?.jobNumber}%0A` +\n `${fileUrl}%0A%0A` +\n `To review the full job details, click on the link above.%0A%0A` +\n `If you have any questions or need further assistance, please contact us.%0A%0A` +\n `Kind regards,%0A` +\n `${formData.contactName}%0A` +\n `${formData.companyName}`;\n\n // Encode the subject and body properly\n const mailtoLink = `mailto:${\n formData.contactEmail\n }?subject=${encodeURIComponent(subject)}&body=${body}`;\n\n // Open the default email client\n window.location.href = mailtoLink;\n };\n\n const onArchiveJob = async () => {\n const jobData = await apiArchiveJob(formData.id);\n if (jobData) {\n getJobbingData();\n getJobbingListData();\n showSuccessToast(\n \n Job Archived Successfully\n
\n );\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onRestoreJob = async () => {\n const jobData = await apiRestoreJob(formData.id);\n if (jobData) {\n getJobbingData();\n getJobbingListData();\n showSuccessToast(\n \n Job Restored Successfully\n
\n );\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onDeleteJob = async () => {\n const jobData = await apiDeleteJob(formData.id);\n if (jobData) {\n getJobbingListData();\n onNewJob();\n showSuccessToast(\n \n Job Deleted Successfully\n
\n );\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onNewJob = () => {\n setIsSaved(false);\n let userStockLocation = null;\n if (stocklocationList?.length === 1) {\n userStockLocation = stocklocationList[0];\n } else {\n userStockLocation = stocklocationList?.find(\n (stockLocationData) =>\n stockLocationData?.id ===\n Number(localStorage.getItem(\"boahubLocationId\"))\n );\n }\n setSelectedCustomer({});\n const newData = {\n id: \"\",\n boahubLocationId: userStockLocation ? userStockLocation.id : null,\n jobNumber: \"\",\n companyName: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n customerPurchaseOrderNumber: \"\",\n customerLocation: \"\",\n locationLat: null,\n locationLng: null,\n urgencyId: null,\n companyAssetId: null,\n assetTextId: \"\",\n assetSerialNumber: \"\",\n makeId: null,\n isSearchAsset: false,\n equipmentTypeId: null,\n assetId: null,\n otherAssetDetails: null,\n assetPropValue: \"\",\n assetPropUnit: \"km\",\n jobDesc: \"\",\n jobImageDetails: null,\n jobStatusId: 1,\n distanceTravelled: null,\n hoursLabour: null,\n hoseMaker: [],\n makeName: \"\",\n equipmentTypeName: \"\",\n model: \"\",\n saveContactDetails: true,\n customer: {},\n customerContact: {},\n selectCustomer: true,\n selectContact: true,\n dueDateTime: null,\n discountPercent: \"\",\n };\n setSelectedDate(null);\n setSelectedId(\"\");\n setSelectedData(newData);\n setFormData(newData);\n setSelectedCard(\"\");\n setHasLocation(false);\n setMyAssetsSearch(\"\");\n setAssetSearch(\"\");\n setAssetType(\"\");\n setAssetImage(\"\");\n if (locationRef && locationRef.current)\n locationRef.current.refs.input.value = \"\";\n const geolocation = {\n lat: -42.312144,\n lng: 172.474153,\n };\n setLocation(geolocation);\n setHasLocation(false);\n setIsJobbingBasicMode(\n localStorage.getItem(\"isJobbingBasicMode\") === \"true\" ? true : false\n );\n };\n\n const onAddressSelection = (place) => {\n handleChange(\"customerLocation\", locationRef.current.refs.input.value);\n if (place && place.geometry) {\n const geolocation = {\n lat: place.geometry.location.lat(),\n lng: place.geometry.location.lng(),\n };\n setLocation(geolocation);\n setHasLocation(true);\n }\n };\n\n const onNewXeroContact = () => {\n setContactFormData({\n accountNumber: \"\",\n name: \"\",\n firstName: \"\",\n lastName: \"\",\n emailAddress: \"\",\n addresses: [\n {\n addressLine1: \"\",\n addressLine2: \"\",\n city: \"\",\n region: \"\",\n postalCode: \"\",\n country: \"\",\n },\n ],\n phones: [\n {\n phoneType: \"1\",\n phoneNumber: \"\",\n phoneAreaCode: \"\",\n phoneCountryCode: \"\",\n },\n ],\n paymentTerms: {\n sales: {\n type: null,\n day: null,\n },\n },\n });\n };\n\n function handleContactChange(dataType, value) {\n let newState = [];\n newState.push(contactFormData);\n let data = newState.map((item, i) => {\n if (i == 0) {\n if (dataType == \"phoneCountryCode\") {\n item.phones[0].phoneCountryCode = value;\n return item;\n }\n if (dataType == \"phoneAreaCode\") {\n item.phones[0].phoneAreaCode = value;\n return item;\n }\n if (dataType == \"phoneNumber\") {\n item.phones[0].phoneNumber = value;\n return item;\n }\n if (dataType == \"xeroInvoiceDay\") {\n item.paymentTerms.sales.day = Number(value);\n return item;\n }\n if (dataType == \"xeroInvoiceType\") {\n item.paymentTerms.sales.type = value;\n return item;\n }\n if (dataType == \"xeroLocationText\") {\n if (locationRefXero && locationRefXero.current) {\n item.addresses[0] = {\n addressLine1: \"\",\n addressLine2: \"\",\n city: \"\",\n region: \"\",\n postalCode: \"\",\n country: \"\",\n };\n return {\n ...item,\n [dataType]: locationRefXero.current.refs.input.value,\n };\n }\n }\n if (dataType == \"xeroLocation\") {\n setContactSaved(false);\n\n let address = {\n street_number: \"\",\n route: \"\",\n subLocality_level_1: \"\",\n locality: \"\",\n administrative_area_level_1: \"\",\n country: \"\",\n postal_code: \"\",\n };\n\n value.address_components.forEach((component) => {\n const types = component.types;\n\n if (types.includes(\"street_number\")) {\n address.street_number = component.long_name;\n } else if (types.includes(\"route\")) {\n address.route = component.long_name;\n } else if (types.includes(\"sublocality_level_1\")) {\n address.subLocality_level_1 = component.long_name;\n } else if (types.includes(\"locality\")) {\n address.locality = component.short_name;\n } else if (types.includes(\"administrative_area_level_1\")) {\n address.administrative_area_level_1 = component.long_name;\n } else if (types.includes(\"country\")) {\n address.country = component.long_name;\n } else if (types.includes(\"postal_code\")) {\n address.postal_code = component.long_name;\n }\n });\n\n if (address.subLocality_level_1 === \"\") {\n address.subLocality_level_1 = address.locality;\n }\n\n item.addresses[0].addressLine1 = address.street_number;\n item.addresses[0].addressLine2 = address.route;\n item.addresses[0].city = address.locality;\n item.addresses[0].region = address.administrative_area_level_1;\n item.addresses[0].country = address.country;\n item.addresses[0].postalCode = address.postal_code;\n return item;\n }\n return { ...item, [dataType]: value };\n }\n return item;\n });\n setContactFormData(data[0]);\n }\n\n const onCreateXeroContact = async () => {\n setIsLoading(true);\n setContactSaved(true);\n if (!contactFormData.name || contactFormData.name === \"\") {\n showErrorToast(\"Xero Contact Name field is required\");\n setIsLoading(false);\n return false;\n }\n if (\n contactFormData.emailAddress &&\n !isValidEmail(contactFormData.emailAddress)\n ) {\n showErrorToast(\"Invalid email address\");\n setIsLoading(false);\n return false;\n }\n if (\n contactFormData.xeroLocationText &&\n (!contactFormData.addresses[0].country ||\n !contactFormData.addresses[0].country === \"\")\n ) {\n showErrorToast(\"Invalid address\");\n setIsLoading(false);\n return false;\n }\n const xeroContactData = await apiCreateXeroContact(contactFormData);\n if (xeroContactData) {\n getXeroCustomersData();\n setOpenCreateXeroContact(false);\n onNewXeroContact();\n showSuccessToast(\n \n Xero Contact Created Successfully\n
\n );\n setIsLoading(false);\n } else {\n setIsLoading(false);\n }\n };\n\n const openGoogleMaps = () => {\n if (formData?.customerLocation === \"\") {\n showErrorToast(\"Enter location first\");\n return false;\n }\n const googleMapsURL = `https://www.google.com/maps?q=${formData?.customerLocation}`;\n\n window.open(googleMapsURL, \"_blank\");\n };\n\n const getJobbingListData = async () => {\n onSearch(\n jobbingSearchKeyword,\n jobbingSearchType,\n filterStatus,\n technicianFilter\n );\n };\n\n const getJobbingData = async () => {\n setDataLoading(true);\n const result = await apiGetJobbing(selectedId);\n if (result) {\n setSelectedData(result);\n setDataLoading(false);\n } else {\n showErrorToast(\"Failed to load the job card, please try again\");\n setDataLoading(false);\n }\n };\n\n const getJobbingTimeLogsData = async () => {\n const result = await apiGetJobTimeLogs(selectedId);\n if (result) {\n setSeconds(0);\n let runningLogs = [];\n runningLogs = result.jobTimeLogs?.filter(\n (obj) => obj.updatedByDateTime === null\n );\n if (runningLogs?.length > 0) {\n runningLogs.map((log) => {\n if (log.createdBy === localStorage.getItem(\"user\")) {\n setCurrentLog(log);\n const startTime = new Date(log.createdDateTime);\n\n // Get the current time\n const currentTime = new Date();\n\n // Calculate the difference in milliseconds\n const timeDifferenceMillis =\n currentTime.getTime() - startTime.getTime();\n\n // Convert milliseconds to seconds\n const timeDifferenceSeconds = Math.floor(\n timeDifferenceMillis / 1000\n );\n\n setRunning(true);\n if (timeDifferenceSeconds > 0) {\n setSeconds(timeDifferenceSeconds);\n } else {\n setSeconds(0);\n }\n }\n });\n }\n\n handleChange(\"hoursLabour\", result.jobLabour?.hoursLabour);\n setTimeLogs(result.jobTimeLogs);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const getImagesData = async () => {\n setDataLoading(true);\n const result = await apiGetJobbing(selectedId);\n if (result) {\n setJobImages(result.jobAssetImages);\n setJobAdditionalImages(result.jobAdditionalImages);\n let imagesFromData = [];\n let additionalImagesFromData = [];\n result.jobAssetImages?.map((item, i) => {\n imagesFromData.push(item.filePath);\n });\n result.jobAdditionalImages?.map((item, i) => {\n additionalImagesFromData.push(item.filePath);\n });\n setImages(imagesFromData);\n setAdditionalImages(additionalImagesFromData);\n setDataLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setDataLoading(false);\n }\n };\n\n const getDropdownData = async () => {\n const urgencies = await apiGetUrgencies();\n if (urgencies) {\n setUrgenciesData(urgencies);\n }\n };\n\n const getCustomersData = async () => {\n const customers = await apiCustomerList();\n if (customers) {\n setCustomerList(customers);\n }\n };\n\n const getUsersList = async () => {\n const result = await apiGetUsersListWithCurrent();\n if (result) {\n const list = result.filter(\n (item, index) => result.indexOf(item) === index\n );\n const filterList = result.filter(\n (item, index) => result.indexOf(item) === index\n );\n setTechnicianList(list);\n filterList.unshift({ text: \"Unassigned\", value: \"Unassigned\" });\n filterList.unshift({ text: \"All\", value: \"All\" });\n setTechnicianFilterList(filterList);\n }\n };\n\n const getHosePositions = async () => {\n const hosePositions = await apiGetHosePositions(assetType);\n if (hosePositions) {\n setAssetImage(hosePositions.url);\n setLocationList(hosePositions.positions);\n } else {\n setAssetImage(\"\");\n setLocationList([]);\n }\n };\n\n const getPositionName = (id) => {\n if (locationList.length > 0) {\n let position = {};\n position = locationList.find((location) => location.id === id);\n if (position) return position.name ? position.name : \"\";\n }\n return \"NO LOCATION ASSIGNED\";\n };\n\n const getPositionImage = (id) => {\n if (locationList.length > 0) {\n let position = {};\n position = locationList.find((location) => location.id === id);\n if (position) return position.url ? position.url : noImageAvailable;\n }\n return noImageAvailable;\n };\n\n const getXeroCustomersData = async () => {\n const customers = await apiXeroCustomerList();\n if (customers) {\n setXeroCustomerList(customers);\n const customer = customers.find(\n (item) => item.name === contactFormData.name\n );\n if (customer) handleInvoiceChange(\"contactId\", customer.contactID);\n }\n };\n\n const getXeroInvoicesData = async (contactId) => {\n const invoices = await apiXeroInvoiceList(contactId);\n if (invoices) {\n let filteredData = invoices.filter((inv) => inv.status === \"DRAFT\");\n setXeroDraftInvoicesList(filteredData);\n setXeroInvoicesList(invoices);\n }\n };\n\n const handleResultSelect = (e, { result }) => {\n setAssetLoading(true);\n const fullDescription = result.displayName.split(\" | \");\n formData.makeName = fullDescription[0];\n formData.equipmentTypeName = fullDescription[1];\n formData.model = fullDescription[2];\n setAssetType(fullDescription[1]);\n handleChange(\"asset\", result.id);\n setTimeout(function () {\n setAssetLoading(false);\n }, 500);\n };\n\n const handleAssetSearch = async (e, { value }) => {\n setAssetSearch(value);\n };\n\n const handleResultSelectMyAssets = (e, { result }) => {\n setMyAssetsLoading(true);\n formData.companyAssetId = result.Id;\n formData.assetTextId = result.AssetId;\n formData.assetSerialNumber = result.AssetSerialNumber;\n formData.makeName = result.Manufacturer;\n formData.equipmentTypeName = result.EquipmentType;\n formData.model = result.Model;\n formData.assetPropUnit = result.AssetPropUnit\n ? result.AssetPropUnit.toLowerCase()\n : \"km\";\n formData.assetPropValue = result.AssetPropValue;\n setMyAssetsSearch(result.AssetId);\n setAssetType(result.EquipmentType);\n handleChange(\"asset\", result.AssetDbId);\n setTimeout(function () {\n setMyAssetsLoading(false);\n }, 500);\n };\n\n const handleMyAssetsSearch = async (e, { value }) => {\n setMyAssetsSearch(value);\n };\n\n const handleOpenAssetDetails = () => {\n setClicked(!clicked);\n };\n\n const handleGenerateXeroPDF = async (type) => {\n setIsLoading(true);\n try {\n const pdfData = await apiGenerateXeroInvoicePDF(invoice.invoiceID);\n if (pdfData) {\n setIsLoading(false);\n } else {\n setIsLoading(false);\n showErrorToast(\"Generate Xero Invoice Failed\");\n }\n } catch {\n setIsLoading(false);\n showErrorToast(\"Generate Xero Invoice Failed\");\n }\n };\n\n const handleDiscardXeroInvoice = async (type) => {\n setIsLoading(true);\n try {\n const invoiceData = await apiDiscardXeroInvoice(\n formData?.id,\n invoice.invoiceID\n );\n if (invoiceData) {\n setIsLoading(false);\n showSuccessToast(\n \n Invoice Discarded Successfully\n
\n );\n setTimeout(function () {\n getJobbingData();\n getJobbingListData();\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const handleGenerateInvoice = () => {\n if (invoice.invoiceID === \"\") {\n showErrorToast(\"Please select Invoice\");\n return false;\n }\n if (invoice.invoiceID === null) {\n onSubmitCreateInvoice();\n } else {\n onAddToExistingInvoice();\n }\n };\n\n const onSubmitCreateInvoice = async () => {\n setIsLoading(true);\n try {\n const invoiceData = await apiGenerateXeroInvoice(\n formData?.id,\n invoice?.contactId,\n invoice?.invoiceStatus === 1 ? false : true\n );\n if (invoiceData) {\n showSuccessToast(\n \n Invoice Created Successfully\n
\n );\n setIsLoading(false);\n setTimeout(function () {\n getJobbingData();\n getJobbingListData();\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onAddToExistingInvoice = async () => {\n setIsLoading(true);\n const invoiceData = await apiAddtoExistingXeroInvoice(\n formData?.id,\n invoice?.invoiceID,\n invoice?.invoiceStatus === 1 ? false : true\n );\n if (invoiceData) {\n setIsLoading(false);\n showSuccessToast(\n \n {\" \"}\n {invoice?.invoiceStatus === 1\n ? \"Invoice Created Successfully\"\n : \"Invoice Generated\"}\n Successfully\n
\n );\n setTimeout(function () {\n getJobbingData();\n getJobbingListData();\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onResendInvoice = async () => {\n setIsLoading(true);\n const invoiceData = await apiResendXeroInvoice(invoice?.invoiceID);\n if (invoiceData) {\n setIsLoading(false);\n showSuccessToast(\n \n Invoice Sent Successfully\n
\n );\n getXeroInvoicesData(invoice?.contactId);\n setTimeout(function () {\n getJobbingData();\n getJobbingListData();\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const getAssetList = async (search) => {\n setAssetLoading(true);\n setAssetList([]);\n if (search === \"\") {\n setAssetList([]);\n setAssetLoading(false);\n return false;\n }\n const assetsData = await apiAssetsSearch(search);\n if (assetsData) {\n setAssetList(assetsData);\n setAssetLoading(false);\n } else {\n setAssetLoading(false);\n }\n };\n\n const getMyAssetsList = async (search) => {\n setMyAssetsLoading(true);\n setMyAssetsList([]);\n const assetsData = await apiGetMyAssetsList(search);\n if (assetsData) {\n setMyAssetsList(assetsData);\n setMyAssetsLoading(false);\n } else {\n setMyAssetsLoading(false);\n }\n };\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n getAssetList(assetSearch);\n }, 1500);\n\n return () => clearTimeout(delayDebounceFn);\n }, [assetSearch]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n getMyAssetsList(myAssetsSearch);\n }, 300);\n\n return () => clearTimeout(delayDebounceFn);\n }, [myAssetsSearch]);\n\n useEffect(() => {\n //Get User's country data and country list\n const countryCode = localStorage.getItem(\"userCountryCode\");\n setUserCountryCode(countryCode);\n const countryList = JSON.parse(localStorage.getItem(\"countries\"));\n setCountries(countryList);\n\n const hasJobbing = localStorage.getItem(\"accessJobbing\");\n if (hasJobbing !== \"true\") {\n props.history.push(\"/\");\n }\n const defaultTechnicianFilter = localStorage.getItem(\n \"defaultTechnicianFilter\"\n );\n setTechnicianFilter(defaultTechnicianFilter);\n\n const delayDebounceFn = setTimeout(() => {\n getDropdownData();\n getStockLocationsData();\n getAllStockLocationsData();\n getCustomersData();\n getUsersList();\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, []);\n\n useEffect(() => {\n setRunning(false);\n setSeconds(0);\n if (selectedId != \"\") {\n getJobbingData();\n }\n }, [selectedId]);\n\n useEffect(() => {\n if (locationRef && locationRef.current)\n locationRef.current.refs.input.value = \"\";\n if (selectedData && selectedData.id != \"\") {\n let customerExisting = false;\n let contactExisting = false;\n setIsJobbingBasicMode(\n selectedData.jobDetails.jobStatusId > 2\n ? false\n : localStorage.getItem(\"isJobbingBasicMode\") === \"true\"\n ? true\n : false\n );\n setHasHoseTags(false);\n setMyAssetsSearch(\n selectedData.companyAssetId\n ? selectedData.assetDetails?.assetTextId\n : \"\"\n );\n setAssetSearch(\"\");\n setCurrentStatus(selectedData.jobDetails.jobStatusId);\n setAssetType(\n selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\"\n );\n if (\n selectedData.assetDetails?.otherAssetDetails !== \"\" &&\n selectedData.assetDetails?.otherAssetDetails !== null\n ) {\n const fullDescription =\n selectedData.assetDetails.otherAssetDetails.split(\" | \");\n selectedData.makeName = fullDescription[0] ? fullDescription[0] : \"\";\n selectedData.equipmentTypeName = fullDescription[1]\n ? fullDescription[1]\n : \"\";\n selectedData.model = fullDescription[2] ? fullDescription[2] : \"\";\n } else {\n selectedData.makeName = selectedData.assetDetails?.makeName;\n selectedData.equipmentTypeName =\n selectedData.assetDetails?.equipmentTypeName;\n selectedData.model = selectedData.assetDetails?.model;\n }\n if (selectedData.customer?.id) {\n const customer = customerList.find(\n (item) => item.id === selectedData.customer?.id\n );\n if (customer) {\n customerExisting = true;\n setSelectedCustomer(customer);\n }\n }\n if (selectedData.customerDetails.companyName === \"-PLACEHOLDER-\") {\n customerExisting = true;\n selectedData.customerDetails.companyName = \"\";\n }\n if (\n selectedData.jobDetails?.jobStatusId > 2 &&\n selectedData.jobDetails?.invoiceId\n ) {\n // Xero Invoice\n setInvoice({\n invoiceStatus: 1,\n contactId: selectedData.jobDetails?.xeroContactId,\n invoiceID: selectedData.jobDetails?.invoiceId,\n });\n } else {\n setInvoice({\n invoiceStatus: 1,\n contactId: \"\",\n invoiceID: null,\n });\n }\n\n let selectedFormData = {\n id: selectedData.id,\n boahubLocationId: selectedData.boahubLocationId,\n jobNumber: selectedData.jobDetails.jobNumber,\n companyName: selectedData.customerDetails.companyName,\n contactName: selectedData.customerContact\n ? selectedData.customerContact?.contactName\n : selectedData.customerDetails.contactName,\n contactNumber: selectedData.customerDetails.contactNumber,\n contactEmail: selectedData.customerDetails.contactEmail,\n customerPurchaseOrderNumber:\n selectedData.customerDetails.customerPurchaseOrderNumber,\n customerLocation: selectedData.customerDetails.customerLocation\n .split(\", \")\n .filter((item) => item !== \"\")\n .join(\", \"),\n locationLat: selectedData.customerDetails.locationLat,\n locationLng: selectedData.customerDetails.locationLng,\n discountPercent:\n selectedData.customerDetails.customerDiscount ||\n selectedData.customerDetails.customerDiscount === 0\n ? selectedData.customerDetails.customerDiscount\n : \"\",\n urgencyId: selectedData.jobDetails.urgencyId,\n companyAssetId: selectedData.companyAssetId,\n assetTextId: selectedData.assetDetails.assetTextId,\n assetSerialNumber: selectedData.assetDetails.assetSerialNumber,\n makeId: selectedData.assetDetails.makeId\n ? selectedData.assetDetails.makeId\n : selectedData.assetDetails.otherAssetDetails\n ? 0\n : null,\n isSearchAsset: selectedData.companyAssetId ? true : false,\n equipmentTypeId: selectedData.assetDetails.equipmentTypeId,\n assetId: selectedData.assetDetails.assetId,\n otherAssetDetails: selectedData.assetDetails.otherAssetDetails,\n assetPropValue: selectedData.assetDetails.assetPropValue,\n assetPropUnit: selectedData.assetDetails.assetPropUnit\n ? selectedData.assetDetails.assetPropUnit.toLowerCase()\n : \"km\",\n jobDesc: selectedData.jobDetails.jobDesc,\n jobImageDetails: selectedData.jobDetails.jobImageDetails,\n jobStatusId: selectedData.jobDetails.jobStatusId,\n jobStatusIdBeforeArchive:\n selectedData.jobDetails.jobStatusIdBeforeArchive,\n distanceTravelled:\n selectedData.jobDetails.distanceTravelled != null\n ? selectedData.jobDetails.distanceTravelled\n : \"\",\n hoursLabour:\n selectedData.jobDetails.hoursLabour != null\n ? selectedData.jobDetails.hoursLabour\n : \"\",\n hoseMaker: selectedData.hoseMaker ? selectedData.hoseMaker : [],\n inventoryComponents: selectedData.inventoryComponents,\n inventoryNonBOA: selectedData.inventoryNonBOA,\n notes: selectedData.jobDetails.notes\n ? selectedData.jobDetails.notes\n : \"\",\n makeName: selectedData.assetDetails.makeName\n ? selectedData.assetDetails.makeName\n : \"\",\n equipmentTypeName: selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\",\n model: selectedData.assetDetails.model\n ? selectedData.assetDetails.model\n : \"\",\n isConflict: selectedData.jobDetails.jobNumber.includes(\"COPY\")\n ? true\n : false,\n saveContactDetails: selectedData.saveContactDetails,\n customer: selectedData.customer?.companyName\n ? selectedData.customer\n : {},\n customerContact: selectedData.customerContact?.contactName\n ? selectedData.customerContact\n : {},\n makeName: selectedData.makeName ? selectedData.makeName : null,\n equipmentTypeName: selectedData.equipmentTypeName\n ? selectedData.equipmentTypeName\n : null,\n model: selectedData.model ? selectedData.model : null,\n selectCustomer: customerExisting,\n selectContact: true,\n technician: selectedData.technician,\n technicianEmail: selectedData.technicianEmail,\n dueDateTime: selectedData.jobDetails.dueDateTime,\n jobAdditionalImages: selectedData.jobAdditionalImages,\n jobAssetImages: selectedData.jobAssetImages,\n };\n if (selectedData.technicianEmail) {\n //find technician if exist\n let technician = technicianList.find(\n (item) => item.email === selectedData.technicianEmail\n );\n if (!technician) {\n setTechnicianDeleted(true);\n }\n }\n setSelectedDate(\n selectedData.jobDetails.dueDateTime\n ? new Date(selectedData.jobDetails.dueDateTime)\n : null\n );\n setJobImages(selectedData.jobAssetImages);\n setJobAdditionalImages(selectedData.jobAdditionalImages);\n let imagesFromData = [];\n let additionalImagesFromData = [];\n selectedData.jobAssetImages?.map((item, i) => {\n imagesFromData.push(item.filePath);\n });\n selectedData.jobAdditionalImages?.map((item, i) => {\n additionalImagesFromData.push(item.filePath);\n });\n selectedFormData.hoseMaker?.map((hose) => {\n hose.hasHoseTags = false;\n hose.hoseIdTagging.map((hoseTag) => {\n if (hoseTag.hoseId) {\n setHasHoseTags(true);\n hose.hasHoseTags = true;\n }\n hose.hoseName = hoseTag.hoseName;\n hose.hoseOemNumber = hoseTag.hoseOemNumber;\n hose.isHoseCleaned = hoseTag.isHoseCleaned;\n hose.isVisuallyInspected = hoseTag.isVisuallyInspected;\n hose.isDesignStandard = hoseTag.isDesignStandard;\n });\n });\n setIsSaved(true);\n setImages(imagesFromData);\n setAdditionalImages(additionalImagesFromData);\n setFormData(selectedFormData);\n }\n }, [selectedData]);\n\n useEffect(() => {\n if (selectedData && selectedData.customerDetails) {\n if (\n selectedData.customerDetails?.locationLat !== \"\" &&\n selectedData.customerDetails?.locationLng !== \"\" &&\n selectedData.customerDetails?.locationLat !== \"string\" &&\n selectedData.customerDetails?.locationLng !== \"string\"\n ) {\n const geolocation = {\n lat: Number(selectedData.customerDetails?.locationLat),\n lng: Number(selectedData.customerDetails?.locationLng),\n };\n if (\n geolocation.lat !== location.lat &&\n geolocation.lng != location.lng\n ) {\n setLocation(geolocation);\n setHasLocation(true);\n }\n }\n }\n }, [selectedData, hasLocation]);\n\n useEffect(() => {\n if (formData && formData?.makeId && formData?.equipmentTypeId) {\n } else {\n setAssetImage(\"\");\n }\n }, [formData?.makeId, formData?.equipmentTypeId]);\n\n useEffect(() => {\n if (formData && formData?.id) {\n const delayDebounceFn = setTimeout(() => {\n getJobbingTimeLogsData();\n }, 1000);\n\n return () => clearTimeout(delayDebounceFn);\n }\n }, [formData?.id]);\n\n useEffect(() => {\n const defaultTechnicianFilter = localStorage.getItem(\n \"defaultTechnicianFilter\"\n );\n if (defaultTechnicianFilter !== technicianFilter) {\n if (technicianFilter === \"\" || technicianFilter === \"All\") {\n if (technicianFilter === \"All\") {\n onSetTechnicianFilter(technicianFilter);\n setTechnicianName(\"All\");\n }\n } else {\n onSetTechnicianFilter(technicianFilter);\n let item = technicianList.find(\n (item) => item.value === technicianFilter\n );\n setTechnicianName(item ? item.text : \"Unassigned\");\n }\n } else {\n if (filterStatus >= 0) {\n const delayDebounceFn = setTimeout(\n () => {\n onSearch(\n jobbingSearchKeyword,\n jobbingSearchType,\n filterStatus,\n technicianFilter\n );\n },\n searchTerm === \"\" ? 100 : 2000\n );\n\n return () => clearTimeout(delayDebounceFn);\n }\n }\n }, [searchTerm, filterStatus, technicianFilter]);\n\n const onSetTechnicianFilter = async (technician) => {\n setIsLoading(true);\n try {\n const result = await apiSetTechnicianFilter(technician);\n if (result) {\n window.localStorage.setItem(\"defaultTechnicianFilter\", technician);\n setIsLoading(false);\n onSearch(\n jobbingSearchKeyword,\n jobbingSearchType,\n filterStatus,\n technicianFilter\n );\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch (e) {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n if (assetType) {\n if (formData?.makeId !== 0) {\n getHosePositions();\n }\n }\n }, [assetType]);\n\n useEffect(() => {\n if (formData && formData?.jobStatusId > 2) {\n getXeroCustomersData();\n } else {\n setInvoice({\n invoiceStatus: 1,\n contactId: \"\",\n invoiceID: null,\n });\n }\n }, [formData?.jobStatusId]);\n\n useEffect(() => {\n if (invoice && invoice?.contactId !== \"\") {\n getXeroInvoicesData(invoice?.contactId);\n }\n }, [invoice?.contactId, formData?.jobStatusId]);\n\n useEffect(() => {\n if (stocklocationList.length > 0 && !formData?.id) {\n onNewJob();\n }\n }, [stocklocationList]);\n\n const handleFileChange = async (file) => {\n if (file) {\n if (file.size >= 25000000) {\n showErrorToast(\"File size cannot exceed 25MB.\");\n setIsLoading(false);\n setFilesLoading(false);\n setImageLoading(false);\n }\n setIsLoading(true);\n setImageLoading(true);\n try {\n const result = await apiSaveJobImage(file, formData.id);\n if (result) {\n getImagesData();\n setIsLoading(false);\n setImageLoading(false);\n showSuccessToast(\n \n Image Uploaded Successfully\n
\n );\n } else {\n setImageLoading(false);\n setIsLoading(false);\n }\n } catch {\n setImageLoading(false);\n setIsLoading(false);\n }\n } else {\n }\n };\n\n const onDeleteFile = async () => {\n setIsLoading(true);\n const assetData = await apiRemoveJobImage(selectedFile.id, formData.id);\n if (assetData) {\n showSuccessToast(\n \n Image Deleted Successfully\n
\n );\n setDeleteFileOpen(false);\n getImagesData();\n setIsLoading(false);\n } else {\n setIsLoading(false);\n }\n };\n\n const openImageViewer = useCallback((index) => {\n setCurrentImage(index);\n setIsViewerOpen(true);\n }, []);\n\n const closeImageViewer = () => {\n setCurrentImage(0);\n setIsViewerOpen(false);\n };\n\n const openAdditionalImageViewer = useCallback((index) => {\n setCurrentImage(index);\n setIsAdditionalViewerOpen(true);\n }, []);\n\n const closeAdditionalImageViewer = () => {\n setCurrentImage(0);\n setIsAdditionalViewerOpen(false);\n };\n\n const jobListGrouped = Object.entries(jobListData).map(\n ([category, list], index) => (\n \n \n {category}\n \n {list.map((data, i) => {\n var date = \"\";\n if (data.dueDateTime !== null) {\n var dateObject = new Date(data.dueDateTime);\n\n // Format the date\n var formattedDate = `${padZero(dateObject.getDate())}/${padZero(\n dateObject.getMonth() + 1\n )}/${dateObject.getFullYear().toString().slice(2)}`;\n var hours = dateObject.getHours() % 12 || 12; // Convert to 12-hour format\n var formattedTime = `${padZero(hours)}:${padZero(\n dateObject.getMinutes()\n )} ${dateObject.getHours() < 12 ? \"AM\" : \"PM\"}`;\n // Combine date and time\n date =\n data.jobStatusId < 3 && category !== \"Overdue\"\n ? `${formattedTime}`\n : `${formattedDate} ${formattedTime}`;\n }\n return (\n \n {\n if (selectedCard !== data.jobNumber) {\n setSelectedId(data.id);\n setSelectedCard(data.jobNumber);\n } else {\n setHasLocation(false);\n setSelectedId(\"\");\n setSelectedCard(\"\");\n setSelectedData(null);\n setFormData(null);\n setAssetType(\"\");\n setAssetImage(\"\");\n setAssetSearch(\"\");\n }\n }}\n style={{ cursor: \"pointer\" }}\n >\n \n \n \n \n \n Job #{data.jobNumber}\n \n \n \n Company:{\" \"}\n {data.companyName === \"-PLACEHOLDER-\"\n ? \"\"\n : data.companyName}\n \n \n Contact: {data.contactName}\n \n {/* \n Location: Sample Location\n */}\n \n Job Status: {data.jobStatusDesc}\n \n {data.quoteIdRef && (\n \n \n \n From Quote\n \n \n \n )}\n {data.jobStatusId === 5 && (\n \n \n \n \n {data.jobStatusIdBeforeArchive === 1\n ? \"New Request\"\n : data.jobStatusIdBeforeArchive === 2\n ? \"In Progress\"\n : data.jobStatusIdBeforeArchive === 3\n ? \"Completed\"\n : \"Invoiced\"}\n \n \n \n \n )}\n {localStorage.getItem(\"isXeroConnected\") === \"true\" &&\n data.xeroInvoiceStatus && (\n \n Xero Invoice Status:{\" \"}\n {data.xeroInvoiceStatus === \"AUTHORISED\"\n ? \"COMPLETED\"\n : data.xeroInvoiceStatus}\n \n )}\n \n {date}\n
\n {data.runningTime?.length > 0 && data.jobStatusId < 3 ? (\n \n \n {data.jobStatusDesc}\n \n
\n \n \n \n \n \n );\n })}\n \n )\n );\n\n const handleDiscountInput = (event) => {\n if (event.target.value === \"\") {\n handleChange(\"discountPercent\", \"\");\n }\n };\n\n const handleClearDiscount = () => {\n handleChange(\"discountPercent\", \"\");\n };\n\n const onSelectCustomerWithDiscount = (data) => {\n console.log(data);\n setSelectedCustomer(data);\n handleChange(\"customerWithDiscount\", data);\n };\n\n const DiscountInput = () => {\n return (\n \n \n \n \n \n \n \n
\n );\n };\n\n return (\n \n {\n if (e.key === \"Enter\") {\n handleChange(\"discountPercent\", e.target.value);\n }\n }}\n onBlurHandler={(e) => {\n handleChange(\"discountPercent\", e.target.value);\n }}\n onInputHandler={handleDiscountInput}\n onClearHandler={handleClearDiscount}\n name=\"quantity\"\n min={0}\n max={100}\n maxLength={6}\n className=\"form-control\"\n precision={2}\n step={1}\n value={formData?.discountPercent}\n />\n
\n \n
\n Error
\n{stockLocationError.message}
\n \n \n\n Please select the stock
location for this job card\n
Are you sure you want to remove BOM?
\n\n
\n \n Are you sure you want to move #\n {selectedData?.jobDetails?.jobNumber} from \"\n {formData?.jobStatusId == 3 ? \"Completed\" : \"Archived\"}\" back to\n \"In Progress\"?\n
\n\n
\n Are you sure you want to duplicate this job card?
\n\n
\n Are you sure you want to delete
\n\n HOSE ASSEMBLY #{hoseMakerIndex + 1}\n
\n\n
\n \n Are you sure you want to move #\n {selectedData?.jobDetails?.jobNumber} to \"Invoiced\"?\n
\n\n
\n It cannot be moved back.
\n\n select the type of job card pdf to download\n
\n \n {selectedData?.jobDetails?.jobNumber}\n \n
\n \n \n {selectedData?.jobDetails?.jobNumber}\n \n
\n
\n {duplicateMessage}
\n\n {isLoading ? (\n
\n \n Are you sure
you want to delete image?\n
\n Are you sure
to discard the changes?\n
\n Invalid address\n
\n ) : null}\n \n Invalid address\n
\n ) : null}\n \n {data.hoseIdTagging?.length > 0 && data.hasHoseTags ? (\n <>\n \n \n \n HOSE ASSEMBLY #{index + 1}\n \n \n \n {\n if (formData.companyName?.trim().length === 0) {\n if (!isJobbingBasicModeDefault) {\n showErrorToast(\"Customer field is required\");\n return false;\n }\n }\n setIsAssemble(true);\n if (formData?.jobStatusId === 2)\n onAutoSaveJob(formData);\n setHoseMakerIndex(index);\n setHoseMakerData(data);\n setOpenHoseMaker(true);\n setOpenViewHoseTags(false);\n }}\n >\n View\n \n \n \n \n {data?.hoseIdTagging?.map((hoseTag) => {\n if (hoseTag.hoseId)\n return (\n \n \n {hoseTag.hoseId}\n \n \n );\n })}\n \n \n ) : null}\n
\n );\n })}\n \n \n {\n setOpenViewHoseTags(false);\n }}\n >\n CLOSE\n \n
\n \n
\n \n {jobbingSearchTypeFullName}\n
\n )}\n \n \n
\n onNewJob()}\n >\n
\n \n \n \n {jobListGrouped}\n
\n \n \n \n {searchLoading ? (\n \n Loading Job Cards...\n \n ) : null}\n
\n {data.length === 0 && !searchLoading ? (\n \n \n No Job Card Found!\n \n
\n ) : null}\n \n onRestoreJob()}\n >\n {\n setOpenSendJob(true);\n }}\n >\n Download / Email\n \n )}\n {formData?.jobStatusId === 3 ? (\n setOpenToInprogress(true)}\n >\n Move back to \"In Progress\"\n \n ) : null}\n {formData?.jobStatusId === 3 ? (\n setOpenToInvoiced(true)}\n >\n Move to Invoiced\n \n ) : null}\n {formData?.jobStatusId > 0 &&\n formData?.jobStatusId < 5 &&\n formData?.id &&\n !formData?.isConflict ? (\n onArchiveJob()}\n style={{\n position: \"absolute\",\n right: formData?.jobStatusId === 1 ? 115 : 12,\n minWidth: 100,\n }}\n >\n Archive\n \n ) : null}\n {(formData?.jobStatusId === 1 ||\n formData?.jobStatusId === 5 ||\n formData?.isConflict) &&\n formData?.id ? (\n onDeleteJob()}\n style={{\n position: \"absolute\",\n right: 12,\n paddingLeft: 15,\n paddingRight: 15,\n minWidth: 100,\n }}\n >\n
\n \n \n {formData?.jobStatusId !== 5 && (\n \n onSubmitJob(formData?.jobStatusId, false)\n }\n >\n Save & Close\n \n )}\n {formData?.jobStatusId < 3 &&\n formData?.jobStatusId !== 5 &&\n !formData?.isConflict && (\n {\n if (formData?.jobStatusId === 2) {\n if (stocklocationList?.length > 1) {\n onSubmitJob(\n formData?.jobStatusId === 3\n ? 3\n : formData?.jobStatusId + 1,\n true\n );\n // setOpenSelectStockLocation(true);\n } else {\n handleChange(\n \"boahubLocationId\",\n stocklocationList[0]?.id\n );\n onSubmitJob(\n formData?.jobStatusId === 3\n ? 3\n : formData?.jobStatusId + 1,\n true\n );\n }\n } else {\n onSubmitJob(\n formData?.jobStatusId === 3\n ? 3\n : formData?.jobStatusId + 1,\n true\n );\n }\n }}\n >\n {formData?.jobStatusId === 2\n ? \"Save & Complete\"\n : \"Save & Progress\"}\n \n )}\n {formData?.jobStatusId === 2 && !isJobbingBasicMode && (\n \n \n \n \n \n Time Clock\n \n \n {formatTime(seconds)}\n \n {!running ? (\n \n \n
\n \n \n \n )}\n {formData?.jobStatusId === 5 ? (\n \n
\n \n \n Job Request\n \n
\n Mode\n \n
\n Job card duplicated from Job Card{\" \"}\n {formData?.jobNumber?.replace(\"COPY-\", \"\")}, due\n to online/offline conflict. Please check both\n job cards, merge details then delete this one.{\" \"}\n
\n\n \n
\n \n \n )}\n \n Hose Name:\n
\n OEM Part Number:\n
\n Cut Length:\n
\n QTY:\n {localStorage.getItem(\n \"boahubIsRS23\"\n ) === \"true\" &&\n data.isRS23Compliant == true && (\n <>\n
\n RS23 Unit Price:\n
\n RS23 Sub-total:\n \n )}\n \n \n
\n \n {data.hoseIdTagging[0]?.hoseName\n ? data.hoseIdTagging[0]?.hoseName\n : \"\"}\n \n
\n \n {data.hoseIdTagging[0]\n ?.hoseOemNumber\n ? data.hoseIdTagging[0]\n ?.hoseOemNumber\n : \"\"}\n \n
\n \n {data.oal ? data.oal + \"mm\" : \"\"}\n \n
\n \n {data.quantity ? data.quantity : \"\"}\n \n {localStorage.getItem(\n \"boahubIsRS23\"\n ) === \"true\" &&\n data.isRS23Compliant == true && (\n <>\n
\n
\n \n ${\" \"}\n {data.rS23ComplianceRate\n ? (\n data.rS23ComplianceRate *\n data.quantity\n ).toFixed(2)\n : `${(0).toFixed(2)}`}\n \n \n )}\n \n \n
\n \n \n \n \n \n {`${data.barcode}`}\n \n \n \n \n
\n \n \n \n \n \n \n \n {`${data.description}`}\n \n \n \n \n \n \n \n handleCustomComponentQuantityChange(\n index,\n value\n )\n }\n onKeyDownHandler={(e) => {\n if (e.key === \"Enter\")\n e.preventDefault();\n }}\n />\n \n \n \n \n \n \n \n \n handleCustomComponentPriceChange(\n index,\n value\n )\n }\n onKeyDownHandler={(e) => {\n if (e.key === \"Enter\")\n e.preventDefault();\n }}\n />\n \n \n \n \n \n handleCustomComponentQuantityChange(\n index,\n -1\n )\n }\n />\n }\n content=\"Remove\"\n style={{\n fontSize: 12,\n opacity: 0.7,\n }}\n inverted\n />\n \n \n \n \n
\n );\n })}\n \n {formData?.jobStatusId > 1 && !isJobbingBasicMode ? (\n <>\n \n
\n \n {data.formattedDateStart}\n \n \n
\n \n )}\n \n \n \n );\n } else {\n return (\n <>\n
\n
\n \n {data.formattedDateStart}\n {\" \"}\n \n
\n \n {data.formattedDateEnd}\n {\" \"}\n \n
\n \n \n \n \n {formData?.makeId !== 0 && (\n
\n \n handleOpenAssetDetails()}>\n
\n ) : (\n 2}>\n \n Asset Details\n \n
\n \n \n Disconnected to Xero successfully!\n
\n );\n }\n };\n\n const generateXeroTokenData = async (code, state) => {\n setXeroLoading(true);\n const result = await apiGenerateXeroToken(code, state);\n if (result) {\n window.localStorage.setItem(\"isXeroConnected\", true);\n window.localStorage.setItem(\"xeroTenantName\", result.tenantName);\n setIsXeroConnected(true);\n setXeroLoading(false);\n showSuccessToast(\n \n Connected to Xero successfully!\n
\n );\n }\n };\n\n return (\n \n {isXeroConnected && (\n <>\n \n {localStorage.getItem(\"xeroTenantName\")}\n
\n \n )}\n \n Connected Xero Organization\n
\n \n \n {isXeroConnected ?
\n \n );\n};\n\nexport default XeroIntegrationPopup;\n","// xeroService.js\nimport axios from \"axios\";\nimport queryString from \"query-string\";\n\nconst xeroAuthUrl = \"https://login.xero.com/identity/connect/authorize\";\n\nexport const getXeroAuthUrl = () => {\n const currentURL = window.location.href;\n const urlObject = new URL(currentURL);\n const baseURL = `${urlObject.protocol}//${urlObject.host}`;\n\n const xeroAuthUrlFromAPI = localStorage.getItem(\"xeroAuthUrl\");\n const urlObj = new URL(xeroAuthUrlFromAPI);\n const params = new URLSearchParams(urlObj.search);\n\n // Get individual parameter values\n const responseType = params.get(\"response_type\");\n const clientId = params.get(\"client_id\");\n const redirectUri = params.get(\"redirect_uri\");\n const scope = params.get(\"scope\");\n const state = params.get(\"state\");\n\n const queryParams = {\n client_id: clientId,\n redirect_uri: `${baseURL}/callback/`,\n response_type: responseType,\n scope: scope,\n state: state,\n };\n\n return `${xeroAuthUrl}?${queryString.stringify(queryParams)}`;\n};\n\nexport const exchangeCodeForToken = async (code) => {\n const tokenUrl = \"https://identity.xero.com/connect/token\";\n\n const data = {\n code,\n client_id: clientId,\n client_secret: \"mJtbiJansCXX5OY04dd2rO_hjg6v1aBiLTUGAWE1S_SqGFKD\",\n redirect_uri: redirectUri,\n grant_type: \"authorization_code\",\n };\n\n try {\n const response = await axios.post(tokenUrl, queryString.stringify(data));\n return response.data;\n } catch (error) {\n console.error(\"Error exchanging code for token:\", error);\n throw error;\n }\n};\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAhGVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAUoAAAABAAABSgAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAlqADAAQAAAABAAAAlgAAAABSoKrCAAAACXBIWXMAADLAAAAywAEoZFrbAAACzGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj4zMzA8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjMzMDwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjMwMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+Mjk5PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CgF89vUAABkgSURBVHgB7V0JkBzVef77mJm9hS4kEBI6FhEQIK0Q4rCMVwRXGaecEAfhkJQqhFBIogrbVXGqnHJcGnCqsF2pxIDR7gpkcQeyMcWRIiEqrAEjkAiSVhKLBDs6QSAkdOyh3Tm6++X730xv7S7a9e70zGz3zHsq7Vzdr9/7/q//97///99rIlUUAgoBhYBCQCGgEFAIKAQUAgoBhYBCQCGgEFAIKAQUAgoBhYBCQCGgEFAIKAQUAgoBhYBCQCGgEFAIKAQUAgoBhYBCQCGgEFAIKAQUAgoBhYBnBDTPNZRyBYIkPtH7M69uV6NrKfsLXlU5JwKKWC4soMqKVtIXTG3UqDHmRDVy3J9Geo0K0inWqLefiInWFThHU2RjvMqaWNEo6bFvNOqbG2O2dg5C3LXv0tpaOz0xkdRrDE0L2yFNhBxKJnqdHt3sPbV+yWe9Q0nHRGsHrq1U3iQrS2Kt+A8ymBCtt5PtEmN12/wZQnMW45sGM0ILnDTNsy26QNepWjdxvMicg7HPdmxh4XOXZmpHdYM6rKT4wNDEzlQitWPDDZ+ecutcgXMWEInRaj/3vFJ4LStiMaEWfAhBRzPD3Jrd8+c6jv0nGmnfAVGuNsLaJD0E1WULciyoHLzye8GWlGtNATFN1wiEIxCLQCzSDI3shINzxOe6oW2x0uK/Irr22iOL4yeYJPK6K8qLYGVBLB7y2i/H8JTVUKt2zP1j3dBXgTC3hCq1GiaRBWIIcAMEcsAhDUOjJl+ZGUNRYpLx0IlXgcKH4q1hhDTNrGDmQa0lxTH8+JJtaY+tXxLfwdWwBiuXIXIoZNz/kirRzY1mdHkM1CFateeSb+qO+EdonOUY3ih9VpKJfwM3YIR/lUJ82qgL84yJyScYpmaEqjVK9zo2aPpbXWgPrmvoaOPfGjeTGVtOsk38uRRLyRKLtRStJYpidrdq59xLdN34uWbQd6GJWNiO1DSa5plMw5GCSQaVxzacGa7VWSNigqCvo+7k2qavHzndCMLHMGkAoXFo6ZWSJJYccmD2sLjW7Jl3H9nag0ZEq051O6xN2AcljfeiiDMzZEqCRSYYlO5zjmDI/X5LQ/xlvn4Us0gmf1HaUsSLlByxoqLRjGoxa83uWROFCG+EDfVnqa7skKcRBsBxKhmCWbDDQnoYTErTvzQt7PgHbg0b9679N06ty/tlS4pY/aTaNedSTTNewSxvfrILczVoKHTUL33lCYKomGgY6R5nMxmpv2i66sjpgbZg3qU8DhWyjVESRQoGmuqerXOXCWFsA43mJ7uhF6ClfEQqxlpHm4zEaTttVGrL4Xd9i31oPMHgPpSEMNAJv9zFnvB0NdXd79Y3GhX0Ogz0sJOCE3M8h77R9EhQOlSthzCRiKd6aPnj18U/HWgfjqYKvx4TeI3Vr6ner19sVojXcKeE7ZTg2Zb/736NQnB5WHCa1YdrtP+95/35U1ox6WCD3q+EGW27Aq2x3BnVXTtmXhgxIu+h0zNAKvYP+Z9UgyWUDtfoISdFb2/bWnfT9lXb07DD2LcWWFdEcO8MAB/F5GoFfJERM9KKUMwMeLuDSCqmWAiukLRZqS1bcu2ZX/MX6FdwZYP2B7bx0Vij9EVN2XXJg6EK/QbMsKShzkIJZMGwmDhjW+EK/Z7VbfUr5ZAYYGM+kEOha+Cu2TH/Zi0kNsGrzQ7GwN4k/TcCNDBiATpCTqf0lFi0bun+T6JROFCzQfP+4wLwJnjCwBDId/Odm2dXkOH8Wyb1ILi2yCCOwGjHYG4hkD3JiWj/yr9x8HzQMQH5EDhiuUNgxWTzh6FK/QorIe2qgoRoeGJpaFVwhNVRSJsg//N7Q6uEtAtySXYAmYgU2Ahi34YY57fZI+/mjwWEU7KZgbobkJvC6Szinvcvu8AIpXchX2oqcgfgWM/nXa2DSNUAx6aEc5TOOqcogbkZ0rLkRdjbWoHbsUqbgdcpUJWCLHE23zK3zUrdQMzgveZF8eukPg7YDDFQ0/Ll0mCPWUbYutes0KcmYeyCaHnqgwChakGSbvos3SZjQHPCt9KSyiV0fmQaVRo1nHtFPVYnHUt+Rvv73qLD6TcJYT+aynmiMI6YYOwjyEMx0r22Hak1lq7ZWX9bkxZvde3KPNRdlCrygkJRWpr16/zdOxdNCldX7EaGwAzb4iQ7r5LkikNyePschJpkXE7fmvz31DD5Brqg6iKqNKugJgdbDDb8r73pHjrSfYC2nXyDNp2WsWSabC6mtOgCHHlwPyHlBl55w7ZFrPmq+HJXWxcF6zxcJDDEcpPjkP25OlxlNHFwGYzwpK14GDNhL1mih45bh+l7U5vomxd+l6ZUnj8IWtZU/I8LayQejweWT7oP0kufbqRNnT+ji0ILkILKKfFpefTA48b6HlcUnJWqC/G1dQ3734kGKMVm8K041p4X8fhYI4weFE3Xvwe7KiNhD9fPkKoKdlQc9lMd/az+Pbpj3mpJKgF1OIhMIBJ8APK/SypJNT4O/2bWzqH7LnuAfjjzFRC0Hd9w80L4601zcaIg0n5gROp/yV1tpxWDGc1f+rQEgljw43BGgFi1o/5yyOp6ZICy5Dy0nZfcVIBURyiiLaHoH71MV065BmTKEIWHPibQSPZSRnNxs9AwnMflphnfoZ/O20pn7I/wiX/xpFB5VmJYfaCuEN9e+fq06latFVMVVBuA4kE4Rewd1v7x1SDCm0NVegTg8liTM8AscIcS0FRV9OP5T0qN43DcmgmVQ7UZG4xXYTi0cMq19KPZb9Ixa590VXhBCR3UrBTsSJ3m1U6rWcp1RRmGAJRgEAsrkxlLLaTdKHgNjSdw2a6qoc+sA3Tvxf9OF9fNk4TQkRDvrWSGS9Ze10y7kVaev5GOYjIQgt/LSwGL2PUAO1C7UdaDVdde6ivWuf5vJDRTFKGOlbumVQtLXI3FoTxE5NxuAz6qL60ddMuEKF07rRGKDxYxVELeStawv2XWbXRp5FbqdT6GimF7K+eiwZ9FpqlJjbWWF2AEoOQR0cL01t2Qo8qYUA9FNcNJg2k5DwaZE1n93XLhHZkGY8aXz8JDKQ+JVWYN3XrB92HMn5Uzz1yvwTcRUoHITjtXrNi8oAZ953shZwRybcdYz/M9sdrXZkDULOdSrLQJAVS2sHMC1tAqYFjvoa/V/oRm14GnKBn7aKywjXy8O3O8cvISaK1bpAc/V0OebyK+mdDS6ZMmJGfxld2bbeRWjO+vvifWglijJBGGwVk6x1OAc66Q6RShLgwk10xaLgnFmqUQhbUWuytqQrW0dMKf0yn7uHTA5nQt3ETsRjNCFNYj+sVcRxAC074nVoxiUh64Z2dCWh7MdqREIOQywaiimdVzZZ2uZpEf8vyHxysu8+uuyLpKvUAtHN5TAm796VznCd5qyefFS2+L0rWpJzISMiPaecwraIKcQOVshBS2U7ggtIwmVUwpeNtd0k6umEZ1+nmwu3jHo5yajrM0uBxguzliIje8kf/4vPieWAuwSwtjCEFV8zseZnIpTKy0OEMTzdlUYVbKKnKtayzX5+GwTp8Lx1tvzm13uyxsx5vvYiwN93is74lF97s9FGy451ykEYyzI8hgKAah3IaaOowjLQyN5SF2KPvNfzB5CUjxP7HWZpHUNE/+G9c8s0SyqKJhj76FMGc+HLDoQ2FmGwVAxP/EynYa8knwkOAaxWPFgmViwhHaZR+lNNZZFav0Wr1IFjyNgbgy57a7Q6FuIg0jIMX3xGrPWryO5XSxgxy2Vk4DIu8oFNFm0xfpfdSZPCPFkytJRyVbVpEoncmT8J3F4W7grNTcFI6csGTq65SVBuCP74nl+rGwu9TnYJWHTBTWWBPouL2XjvV+KkXDvqZCl8M98SydcocaNiHCOmipoX/J7eUdmgvdbq/1595br1ce5fmuHwsJb9hXSuqY3KaFuB4Ph2G87jnzf/LqrktglE0Z02Hs0bew1HF75+/oPKBsi74xnT/kYB0hHVsz9SP8vTtTHnKMrz76nliNje4NLw5gpTPfqTmnIdjwJU0x59KbZ1roVOKEnB0WYjh087MOdH5E2882Ua1xFTqRs10nNBODqKV1hpLOQWZP1IPe5vOLUXxPrGgWRCwu2IfM0dO8dyhKTkMBayxexvWFtZvePvZ6pqICDIesrZiwrx97AXYdNzan5sr2cV+hrbGPAH2MXZhPyi85EO3z4ntiQa1IEB+/7uAXiJd9YIRlk3MGNo1VOBeal9ELx1fKxRCcMpPPmKFb1/bj7yAH/p/lAgsOJXkoDjaQ4x2deedlh1freKiraKf6n1iAwt2QzE7Tu3z3gmq5Ta8krJwaYUjpbDjwACXgDsgXuZhUXNfnZz+h5sN303QMu7xQIzuxzUmoUKgax8o1R9uSUwXjdFIgiNU/C9K0N+wkZ814u2s5vFJnNNDexJO0/uNfSL+WV3K5pGLb7aGO+xA+2odZaBXa6mnXbYEHFBjYm6LTtu23mSOtufosikywQBBLPvwIwAj77BbYWfvNsHRm5Twcckgnhbjh+WYDvdX1AD2ydy11pU73Z5K6xvcfkgXbTu7Qx8TkZWAP7r2TPk29TDXGIrmA1Yu24uo5LRlZ02+vX3LgSJQ3ZAuAfcW4BYJYDCbbFvKhSBq9gn2kMD5kloP9IeEP9ztnNzO5poca6L2en9PaD26nPSe3y8Pd5D/2cw37H1JngjKh2JP/+89ep3/au4xOWK8hNWcRNFYn/zrc5Uf1PROXH62CCSUUFVEs5rHCUV01Pwd563l+2jCqWhawZYUCy3UDlkQlITUT/3PWWlyXS67J5kKEenbSTzuW0KN776e9p3ZL24v9XMP+x9ndqU7afnwL/bL9B/TLI9+iSr0Gezog/yoPpEL1jhnWDeT4d/SEqv+T2xvLrq3k934vOTsbx6Nj7n7oq3fNe86M6Hcku2w87cHz8hp0hceYMMIuFXTSaqNe0PXKir+mK2qX0cyq+TS5YjJFsGsua68+GPsnEsfp8Nm91NazieLJ/6aJYHudsRhDXzdqyqym9YwPjDM8cMC0+pwfNy2K/0LutZp9dIvnuotQQcYrVIQL5fMSmNU1wYi/A6TK040B9YA8T05tmWheSZOhDI+mn6UPTzwrsz95fi+zokE4Tn7hKSn7p87Tp9LFYTyJTiRkrlfGnspLk9gpamJh7peps8bTjF00IKtzuK1c8oJCpqri/I1CuUTBgzVt9W8gXfcm7DrMOySz7PNaWIPpWiQLEI+5POqyVcWFP0E3gVAeZ32ytq/8kdpKN9G3h5sX7/9BIz93J0DaivsTOI3Vn+3gUBOydW/6ilDy9AWHYByRcxgm91Zk7EYznRDYlktr4Yoa34w5sdxrHJczA0cs3iaSkRLOhJed5Jnd2FbxKhi4PDoFZiIykqQRaHcidYaBuOiLzYvjH/JsOJrt80jn+e23QAqDDdn1S7anha41GxF0wZMn3l8iYbsRpGJ3e5NsmXQ0+KuNo2lN4Gws2amMC0ncuXP2eZWGuQvZpbPyswnbaCAr4DEw2+Rmaxa90byw4+Zo1p4s4BULVnUgNRYsaMFa64mGQ5wK+gSE4dlhWjCEx1ox3+o2SW3l2pNjrcIPxwdTYwE5Ds7C2SDu3nbpHDNst8E2qYOllZm6+QHZsbfBwdpJHTvW73KsCdfwUD/2KvxzRjA1FvBjUrFh+/i1Hx0Ew57Hs2gYVU8recZVLLATZUqQRi1MKtbI49oejxcPLLG4326YBz6lZqtPbsYWSGFAzQr45Ewr6Rx20s5z3LegOUS5zQNLoImFabjDYR7shb4TseBX+aHeGCIDp7XkXqNsJ8JeRBZDp9RWGX/WQFkF6n2giTUQaRsGL29QxnHjgd8H4L1AtNPEQ6a6nF7rCW5vUDZXGwnbwBOLHwnChnxLQ8cmuB3eQf4S9ylIWstm+1Bo4vnm6w8dYruR7ceRhBaE3wJPLAb59qzXHbPCZmRcyiyEIIAv24hdIK1eYRmkSxeDazcGpv3DNLQkiIUwj8yBT0y0WrHL8D6k1HBQWn43TL998TXbg2wXInXilXUNHW1sL7Ld6IvGeWxESRALGGQcpnMOJRCYXo/4Ib7xv4DYHpQrnIWWCd94FKafTg+aoTs8dtkwz9/uqJ9aYdBu2FvT8Rwa3qXNr310n/C1BbPaZa7Dd/gOBuuXUtFYTB+ptTYujp+AA/7pUDXUgY9dD5yNKu1Bm5qZMq6dGCz6DN/a0iEW9xF5S/ySTjkbkH3Zh0Qadpj6cYaF8A2e7JUSe5Ndlsxnd+1Ebn8plJIiVjSaWSn8m2sOfoQ9O1sjPI33o62FNrEdiLY99sTyQ4ls+MaPN0DOHC8pYjEK/dN1i5qQhcmWl6/6KMM3JsI3fc7nyS56htsc9PAN92Fo8RXoQxuXy2eerkdhvjRdHd+KWdf/hKsxT/SRrSXDNzVopKBnNt4YP1EK4ZtzyankiMWdbG/NzAQxHWzymYUFysvwTZ+TEo9LgWTtwnMJJ8jf+XUqnhdMV6wgY8pP6rchFnc1nnbPhv0430iaFa7VTLtPPNXUEP8bDt+4Ofx56bCPKhlnoAuHBD/qt7UVMUONmnmHGkzvx904RnoPNvgQwta1ddzzfnuwcDCMW80lS6xYdjl6stt4Aat4DvBydZBs/MIlHL6Bvcd23/qFHdvYDmR7cNwkX+ALlyyxQCLpMP3Nso+6geEG3kgEYhxfQUJnIoSTyWfP2oEFlu+4VV/SNhYMd87OEqvb5s+AnxRhHmfSOOXFs99Kx5rt7dNfii9lf9u4SbxIFy5djcUAglRsazUv+vgoiPWczIsfB9cD23f89C64GpqZVNymIsl33C5T2sQCrI2NGe2ABxCsT/di1488bH80JmnBjmL7zk6IA1o48jyfG8vaf2OqJ2AHlzyxohAs5zkhl3wP8uJflNma7jZ8xRAW7Dpp3+m0ft2C9p5SdYgOhbLkiTWww45GD/HydYyRRel3f/gmIY6JbrGR21KK4ZuBGLvviwKwe7HxeuW8eNZaLVfF38V0/1UEp2F9FT4v3l19gznEhuav7T9eLtqK5VwWxBpIaJuchxwbuoTni4UtcvUNgs1nnLS9ni9VCqtvRgtZ2RCLtRY7JVsWHngDLoffhaqwmqeQWosdopy2Q+IpueMxVjZDW/I4XBalbIjF0nQ32cD+CA8XWLqZYHOv6NPSpgzfuEmIBb6ub6ov9HDgm472NyTjNKXVbfVb8VyepdiBmZ2V+b7BrEitbqb6xMaWhvhdpRxs7sd1yJt8Azqkev99XJEhEW8h+rBuYGzKd3CahzusFUz38VpBTWrGUg42DyfhsiOWm6ZysiPSikeJfGBW5HcNIvSfw2sFYU/9ttTWCg5HonN9X3bEYhAaYUi33t6egvAfweNT8rsGEanQyKYg2HEPnQvwcvmu/Gwslmw2OL1y17TqGqe2DRZWPVbMeLe1MjNBw06LV5sWxv80WuKpMSPdJGWpseDBkik1Ty/84ixWtK7DcJgfrQXfGPvI8O9XDLqbIj2SAEr1t/LUWCzNrNZa8/tZE6kuvAv6aqanDXKhrUplY9p8kL08NRYjl9VaTV8/chpvW0JVMq3F8/ZHmi3kTND1meVDSEGso3w1Fksrq7XufG/29MqIuQuJeOcL3m2LaTe2gn0YNAP7RWyFbXU9r2YsJy/7uaAqX43FaGS11hNLDx0DyTYiJ53JNmatxa4w9onZjvMIV1tq+zBwn8ZayptYjFZ2XZ8QVrPV63Txto34diwxPScEXxhcDHvIntjKVbq+Mn5frqXsicWpwpzO0txw6BD8Dc+MOX0ZLiv5lHlb/Jq30S6HtOPR3CxlTywJkrsaOUmPIn15LE9vZVLxk7o6es2eZ7muWBmkHStijQYBHMNaiwPFLdfFP4TV/gICyKOztXjXGH4+NXxh7BOL8iIJ2G2jvGxJH6Y0Vla8/YFiRzyc7kNABoHkkSQP9mQ2/U+IT6gr9SQfG1Xaqh8yRawsFNHsooumq/dvx6NVX8w8jAAOhGGKTDuu4k3/tRb2hZVT2vEwkAz6WhFrEByZD7rQH0LsEB+GXXQhn9mMtOPjqT5L7hpTLoskzgHXOb9SxBoAi5u+vG7Rx29DE72WWXRxDq2VTTuGutrw+HUHv1DaagCI2beKWEMwcQPHmkO/giceSgum+eCSeURJr+jUbVs+s9n1hQ0+rLw/KWINkb/UWlHSH+VHqAgRCw19hIrUVvx8Anr60cUHD7O24lnlkGrK/qMi1jko0L4WgxwKHq75MFtZiNgwcdjocvCLDtsqadmZPa6UtmKkvlqGqvmvHlGu32QD1Pfuqd+CGOINvSczE8TqaSb1nbQfa26I31OOiyRGSwelsYZBKnp/Rmtp1fZfpXqcTdBcHEc8nThpP9WdpB/xaQgMqiFwGPzU1yMgANup/8a7b1f9RXfvmTOt/3DWaKooBHJFgMnF+VXu+VFeijrgs/u9elUI5IYAk0kRKjfs1FkKAYWAQkAhoBBQCCgEFAIKAYWAQkAhoBBQCCgEFAIKAYWAQkAhoBBQCCgEFAIKAYWAQkAhoBBQCCgEFAIKAYWAQkAhoBBQCCgEFAIKAYWAQiA3BP4fAmWrwlpdyVwAAAAASUVORK5CYII=\"","import React, { useEffect, useRef, useState } from \"react\";\nimport \"./style.css\";\nimport {\n Button,\n Card,\n Dimmer,\n Form,\n Grid,\n Icon,\n Input,\n Loader,\n Modal,\n} from \"semantic-ui-react\";\nimport { getFileExtension, removeFileExtension } from \"../../../utils/utils\";\nimport { showErrorToast, showSuccessToast } from \"../../../utils/toastUtils\";\nimport {\n apiDeleteAssetLocationRS23File,\n apiGetAssetLocationRS23Files,\n apiUploadAssetLocationRS23File,\n} from \"../../MyAssets/myAssets.api\";\n\nexport default function AssetLocationRS23(props) {\n const [categories, setCategories] = useState([]);\n const [openUploadFile, setOpenUploadFile] = useState(false);\n const [selectedCategory, setSelectedCategory] = useState({});\n const [file, setFile] = useState(null);\n const [fileName, setFileName] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [hoveredCard, setHoveredCard] = useState(null);\n const [selectedFile, setSelectedFile] = useState(null);\n const [deleteFileOpen, setDeleteFileOpen] = useState(false);\n\n // Function to handle mouse enter event\n const handleMouseEnter = (categoryId) => {\n setHoveredCard(categoryId); // Set the hovered card ID\n };\n\n // Function to handle mouse leave event\n const handleMouseLeave = () => {\n setHoveredCard(null); // Reset hovered card ID\n };\n\n const fileInputRef = useRef(null);\n\n const handleButtonClick = () => {\n fileInputRef.current.click();\n };\n\n const handleFileChange = (event) => {\n const file = event.target.files[0];\n if (file) {\n setFile(file);\n if (fileName === \"\") setFileName(removeFileExtension(file.name));\n // Handle the selected file here (e.g., upload to server)\n }\n };\n\n const handleDownload = (file) => {\n if (!file.filePath) {\n showErrorToast(\"Save asset first before downloading this file\");\n return false;\n }\n try {\n fetch(file.filePath)\n .then((response) => response.blob())\n .then((blob) => {\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = file.fileDisplayName;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n });\n } catch {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const getRS23Files = async () => {\n setIsLoading(true);\n const data = await apiGetAssetLocationRS23Files(props.assetLocationId);\n if (data) {\n setCategories(data);\n setIsLoading(false);\n setOpenUploadFile(false);\n setFile(null);\n setFileName(\"\");\n setSelectedFile(null);\n setDeleteFileOpen(false);\n } else {\n setIsLoading(false);\n }\n };\n\n const onUploadedRS23Files = async () => {\n setIsLoading(true);\n if (file) {\n const extension = \".\" + getFileExtension(file.name);\n const renamedFile = new File([file], fileName + extension, {\n type: file.type,\n });\n const result = await apiUploadAssetLocationRS23File(\n fileName ? renamedFile : file,\n props.assetLocationId,\n selectedCategory.categoryId\n );\n if (result) {\n showSuccessToast(\n \n File Uploaded Successfully\n
\n );\n getRS23Files();\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onDeleteRS23Files = async (id) => {\n setIsLoading(true);\n const result = await apiDeleteAssetLocationRS23File(id);\n if (result) {\n showSuccessToast(\n \n File Deleted Successfully\n
\n );\n getRS23Files();\n } else {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n if (props.assetLocationId) getRS23Files();\n }, [props.assetLocationId]);\n\n return (\n \n \n RS23 Documents\n \n
\n \n {isLoading ? (\n
\n \n Are you sure you want to delete\n
\n {selectedFile?.fileDisplayName}?\n
\n \n {category.categoryName}\n \n \n \n {category.uploadedFiles?.map((data) => (\n \n handleMouseEnter(data.fileId)}\n onMouseLeave={handleMouseLeave}\n >\n \n \n \n \n \n \n {data?.fileDisplayName}\n \n \n \n \n \n {hoveredCard === data.fileId && (\n handleMouseEnter(data.fileId)}\n onMouseLeave={handleMouseLeave}\n >\n {\n handleDownload(data);\n }}\n >\n View\n \n {props.userType === 4 ||\n props.userType === 7 ||\n props.userType === 10 ? null : (\n {\n setSelectedFile(data);\n setDeleteFileOpen(true);\n }}\n >\n Delete\n \n )}\n
\n )}\n \n ))}\n {props.userType === 4 ||\n props.userType === 7 ||\n props.userType === 10 ? null : (\n \n Stock Location Added Successfully\n
\n );\n setStockFormData({});\n setAddStockLocationOpen(false);\n setIsLoading(false);\n setStockSaved(false);\n getStockLocationsData();\n } else {\n setStockFormData({});\n setAddStockLocationOpen(false);\n setIsLoading(false);\n setStockSaved(false);\n getStockLocationsData();\n }\n } catch (e) {\n setIsLoading(false);\n }\n };\n\n const onUpdateStockLocation = async () => {\n setIsLoading(true);\n try {\n const stockData = await apiUpdateStockLocation(stockFormData);\n if (stockData) {\n showSuccessToast(\n \n Stock Location Updated Successfully\n
\n );\n setStockFormData({});\n setAddStockLocationOpen(false);\n setIsLoading(false);\n setStockSaved(false);\n getStockLocationsData();\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onAddAssetLocation = async () => {\n setIsLoading(true);\n console.log(assetLocationData);\n if (\n !assetLocationData.locationName ||\n !assetLocationData.locationAddress ||\n assetLocationData.locationName === null ||\n assetLocationData.locationAddress === null ||\n assetLocationData.locationName === \"\" ||\n assetLocationData.locationAddress === \"\"\n ) {\n setAssetSaved(true);\n setIsLoading(false);\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n try {\n const assetData = await apiAddAssetLocation(assetLocationData);\n if (assetData) {\n showSuccessToast(\n \n Asset Location Added Successfully\n
\n );\n setAssetLocationData({});\n setAddAssetLocationOpen(false);\n setIsLoading(false);\n getAssetLocationsData();\n setAssetSaved(false);\n } else {\n setAssetLocationData({});\n setAddAssetLocationOpen(false);\n setIsLoading(false);\n getAssetLocationsData();\n }\n } catch (e) {\n setIsLoading(false);\n }\n };\n\n const onAddNotification = async () => {\n if (!notificationData?.id) {\n setNotificationSaved(true);\n return false;\n }\n setIsLoading(true);\n try {\n const assetData = await apiAddNotification(notificationData);\n if (assetData) {\n showSuccessToast(\n \n Notification Receiver Added\n Successfully\n
\n );\n setNotificationData(null);\n setIsLoading(false);\n getNotificationsData();\n setAddNotificationOpen(false);\n setNotificationSaved(false);\n } else {\n setIsLoading(false);\n getNotificationsData();\n }\n } catch (e) {\n setIsLoading(false);\n }\n };\n\n const onUpdateBoahubPreferences = async () => {\n setIsLoading(true);\n const result = await apiUpdateBoahubPreferences(!isJobbingBasicMode);\n if (result) {\n showSuccessToast(\n \n BOAhub preferences updated successfully\n
\n );\n setIsLoading(false);\n setIsJobbingBasicMode(!isJobbingBasicMode);\n window.localStorage.setItem(\"isJobbingBasicMode\", !isJobbingBasicMode);\n } else {\n setIsLoading(false);\n }\n };\n\n const onUpdateAssetLocation = async () => {\n setIsLoading(true);\n if (\n !assetLocationData.locationName ||\n !assetLocationData.locationAddress ||\n assetLocationData.locationName === null ||\n assetLocationData.locationAddress === null ||\n assetLocationData.locationName === \"\" ||\n assetLocationData.locationAddress === \"\"\n ) {\n setAssetSaved(true);\n setIsLoading(false);\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n try {\n const assetData = await apiUpdateAssetLocation(assetLocationData);\n if (assetData) {\n showSuccessToast(\n \n Asset Location Updated Successfully\n
\n );\n setAssetLocationData({});\n setAddAssetLocationOpen(false);\n setIsLoading(false);\n getAssetLocationsData();\n setAssetSaved(false);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onSubmitInviteUser = async () => {\n if (!formData?.boahubLocationId) {\n showErrorToast(\"Stock Location is required\");\n return false;\n }\n formData.email = formData.email.trim().toLowerCase();\n setIsLoading(true);\n try {\n const userData = await apiInviteUser(formData);\n if (userData) {\n getMyUsersData();\n showSuccessToast(\n \n User Added Successfully\n
\n );\n setIsOpen(false);\n setIsLoading(false);\n } else {\n setIsLoading(false);\n }\n } catch {\n setIsLoading(false);\n }\n };\n\n const onResendInviteUser = async (id) => {\n setCurrentId(id);\n setIsResendloading(true);\n try {\n const userData = await apiResendInviteUser(id);\n console.log(userData);\n if (userData) {\n getMyUsersData();\n showSuccessToast(\n \n Invitation sent successfully\n
\n );\n setOpenRemoveUser(false);\n setIsOpen(false);\n setIsResendloading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsResendloading(false);\n }\n };\n\n const onCancelInviteUser = async (id) => {\n setCurrentId(id);\n setIsCancelLoading(true);\n try {\n const userData = await apiCancelInviteUser(id);\n console.log(userData);\n if (userData) {\n getMyUsersData();\n showSuccessToast(\n \n Invitation cancelled\n
\n );\n setOpenRemoveUser(false);\n setIsOpen(false);\n setIsCancelLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsCancelLoading(false);\n }\n };\n\n const onUpdateUser = async () => {\n formData.email = formData.email.trim().toLowerCase();\n setIsLoading(true);\n try {\n const userData = await apiUpdateUser(formData);\n if (userData) {\n getMyUsersData();\n showSuccessToast(\n \n User Updated Successfully\n
\n );\n setIsOpen(false);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onDeleteUser = async () => {\n setIsLoading(true);\n try {\n const userData = await apiDeleteUser(formData);\n if (userData) {\n getMyUsersData();\n showSuccessToast(\n \n User Deleted Successfully\n
\n );\n setOpenRemoveUser(false);\n setIsOpen(false);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onDeleteStockLocation = async () => {\n setIsLoading(true);\n\n const stockData = await apiDeleteStockLocation(stockFormData);\n if (stockData) {\n if (stockData.errors) {\n setDeleteStockLocationError(stockData);\n setDeleteStockLocationErrorOpen(true);\n setDeleteStockLocationOpen(false);\n setIsLoading(false);\n }\n\n getStockLocationsData();\n setStockFormData({});\n showSuccessToast(\n \n Stock Location Deleted Successfully\n
\n );\n setDeleteStockLocationOpen(false);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setDeleteStockLocationOpen(false);\n setIsLoading(false);\n }\n };\n\n const onDeleteAssetLocation = async () => {\n setIsLoading(true);\n\n const assetData = await apiDeleteAssetLocation(assetLocationData);\n if (assetData) {\n getAssetLocationsData();\n setAssetLocationData({});\n showSuccessToast(\n \n Asset Location Deleted Successfully\n
\n );\n setDeleteAssetLocationOpen(false);\n setAddAssetLocationOpen(false);\n setIsLoading(false);\n setAssetSaved(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setDeleteAssetLocationOpen(false);\n setIsLoading(false);\n }\n };\n\n const onDeleteNotification = async () => {\n setIsLoading(true);\n try {\n const result = await apiDeleteNotification(notificationData.id);\n if (result) {\n getNotificationsData();\n showSuccessToast(\n \n Quote Acceptance Email Deleted\n Successfully\n
\n );\n setIsLoading(false);\n setDeleteNotificationOpen(false);\n setNotificationData(null);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const turnPodAvailability = async (pod, isActive) => {\n setIsLoading(true);\n try {\n const podData = await apiUpdatePodAvailability(\n pod,\n isActive,\n availabilitySelected\n );\n if (podData) {\n showSuccessToast(\n \n POD Availability Updated Successfully\n
\n );\n setEditPodOpen(false);\n setEditPodOpen2(false);\n setIsLoading(false);\n } else {\n handlePodChange(\"status\", !isActive, selectedPod);\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n handlePodChange(\"status\", !isActive, selectedPod);\n showErrorToast(\"Please complete all required fields\");\n setIsLoading(false);\n }\n };\n\n function getUserFromId(id) {\n let userData = {};\n userListWithCurrent.map((user, i) => {\n if (user.id === id) {\n userData = user;\n }\n });\n\n return userData;\n }\n\n const onSavePod = async (pod) => {\n try {\n const podData = await apiUpdatePodContactDetails(pod);\n if (podData) {\n showSuccessToast(\n \n Contact Details Saved Successfully\n
\n );\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n function handlePodChange(dataType, value, index) {\n let newState = [];\n newState = podList;\n let podListData = newState.map((item, i) => {\n if (i == index) {\n if (dataType === \"userId\") {\n console.log(\"test\");\n const user = getUserFromId(value);\n item.driverName = user.fullName;\n item.email = user.email;\n console.log(item.driverName);\n }\n if (dataType === \"status\") {\n if (value === true) {\n turnPodAvailability(item, true);\n item.status = \"online\";\n }\n if (value === false) {\n item.status = \"offline\";\n turnPodAvailability(item, false);\n }\n return item;\n }\n return { ...item, [dataType]: value };\n }\n return item;\n });\n\n setPodList(podListData);\n }\n\n const getImage = async (image) => {\n if (image instanceof File) {\n const selectedFile = image;\n const maxSize = 5 * 1024 * 1024; // 5MB in bytes\n\n try {\n const compressedImage = await compressImage(selectedFile);\n setImageData(compressedImage);\n } catch (error) {\n showErrorToast(\"Error compressing image: \" + error);\n }\n }\n };\n\n const compressImage = (file) => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n const img = new Image();\n img.src = event.target.result;\n img.onload = () => {\n const canvas = document.createElement(\"canvas\");\n const maxDimension = 256; // Max width or height of the compressed image\n\n let width = img.width;\n let height = img.height;\n\n if (height > maxDimension) {\n width *= maxDimension / height;\n height = maxDimension;\n }\n\n canvas.width = width;\n canvas.height = height;\n\n const ctx = canvas.getContext(\"2d\");\n ctx.fillStyle = \"#ffffff\"; // White color\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(img, 0, 0, width, height);\n\n canvas.toBlob((blob) => {\n const compressedFile = new File([blob], file.name, {\n type: \"image/jpg\", // Change the format if needed\n });\n resolve(compressedFile);\n }, \"image/jpg\"); // Change the format if needed\n };\n };\n\n reader.readAsDataURL(file);\n });\n };\n\n const getImageSrc = async (image) => {\n if (image) {\n setImageSrc(image);\n }\n };\n\n const onUploadCompanyLogo = async () => {\n setIsLoading(true);\n try {\n const logo = await apiUploadCompanyLogo(imageData);\n if (logo) {\n window.localStorage.setItem(\"relatedCompanyLogoUrl\", logo.logoUrl);\n showSuccessToast(\n \n Logo Updated Successfully\n
\n );\n setUploadLogoOpen(false);\n setIsLoading(false);\n setImageData(null);\n setImageSrc(null);\n refreshTokenAndReload();\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onRemoveCompanyLogo = async () => {\n setIsLoading(true);\n try {\n const logo = await apiRemoveCompanyLogo(imageData);\n if (logo) {\n window.localStorage.setItem(\"relatedCompanyLogoUrl\", \"\");\n showSuccessToast(\n \n Company Logo Removed Successfully\n
\n );\n setRemoveLogoOpen(false);\n setIsLoading(false);\n setImageData(null);\n refreshTokenAndReload();\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const getImageWidth = () => {\n if (imgRef.current) {\n const width = imgRef.current.width;\n setImageWidth(width);\n }\n };\n\n const NumericInputChecker = (event, decimalPlaces = 2) => {\n console.log(event);\n const { key, target } = event;\n const inputValue = target.value;\n console.log(inputValue);\n\n // Check if there is already a decimal point\n const hasDecimal = inputValue.includes(\".\");\n const decimalIndex = inputValue.indexOf(\".\");\n const isAfterDecimal =\n decimalIndex !== -1 && target.selectionStart > decimalIndex;\n const digitsAfterDecimal = isAfterDecimal\n ? inputValue.slice(decimalIndex + 1).length\n : 0;\n\n // Allow control keys like Backspace, Delete, and Arrow keys\n const allowedKeys = [\n \"Backspace\",\n \"Delete\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Tab\",\n ];\n\n // Handle input conditions\n if (\n // Allow numeric keys (0-9) if they don't exceed the allowed decimal places\n (!isNaN(key) &&\n (!isAfterDecimal || digitsAfterDecimal < decimalPlaces)) ||\n // Allow essential control keys\n allowedKeys.includes(key) ||\n // Allow one decimal point\n (key === \".\" && !hasDecimal)\n ) {\n return; // Allow input if conditions are met\n }\n\n // Prevent all other keys\n event.preventDefault();\n };\n\n return accountType === 0 ? null : (\n \n {isLoading ? (\n
\n \n Are you sure
you want to delete user?\n
\n {isLoading ? (\n
\n \n Are you sure
you want to delete stock location?\n
\n {isLoading ? (\n
\n \n Are you sure
you want to delete company logo?\n
\n {isLoading ? (\n
\n \n Are you sure
you want to delete asset location?\n
\n {isLoading ? (\n
\n \n Are you sure you want to delete this email?\n
\n
\n {notificationData?.toNotifyEmail}\n
\n {isLoading ? (\n
\n \n {isLoading ? (\n
\n \n {isLoading ? (\n
\n \n {isLoading ? (\n
\n \n
\n Error
\n{deleteStockLocationError.message}
\n \n {deleteStockLocationError.errors?.length > 0 && (\n\n
\n )}\n \n {deleteStockLocationError.errors[0]}
\n\n {isLoading ? (\n
\n \n {isLoading ? (\n
\n \n 4 && accountType === 1\n ? 400\n : \"100%\",\n }}\n >\n {accountType === 1 && (\n <>\n \n My BOApods\n
\n \n {podsLoading && boaPodsOpen ? (\n \n Loading BOApods...\n \n ) : null}\n
\n \n {pod.driverName !== null &&\n pod.driverName !== \"\" ? (\n \n {pod.driverName}\n \n ) : (\n \n No driver assigned\n \n )}\n
\n )}\n \n \n {pod.driverContactNumber !==\n null &&\n pod.driverContactNumber !==\n \"\" ? (\n \n {pod.driverContactNumber}\n \n ) : (\n \n No contact number\n \n )}\n
\n )}\n \n \n {viewRS23 && (\n \n \n \n \n
\n \n \n {userType === 4 ||\n userType === 7 ||\n userType === 10 ? null : (\n setAddAssetLocationOpen(true)}\n >\n Add Asset Location\n \n )}\n \n \n \n \n \n
\n \n {viewTrainingCertificate && (\n \n \n onNewUser()}\n disabled={\n userType === 4 || userType === 7 || userType === 10\n }\n >\n Add New User\n \n \n \n \n \n {userList.map((data, index) => {\n return (\n \n \n \n \n {data.email === localStorage.getItem(\"user\") ? (\n \n \n {data.fullName}\n
\n \n \n
\n {accountType === 1 ? (\n \n {data.isAccepted && (\n \n Hose Assemblies: {data.hoseCount}\n \n )}\n
\n ) : null}\n \n \n \n onResendInviteUser(data.id)\n }\n loading={\n currentId === data.id && isResendloading\n }\n disabled={\n userType === 4 ||\n userType === 7 ||\n userType === 10\n }\n >\n Resend\n \n \n onCancelInviteUser(data.id)\n }\n loading={\n currentId === data.id && isCanceloading\n }\n disabled={\n userType === 4 ||\n userType === 7 ||\n userType === 10\n }\n >\n Cancel\n \n
\n ) : (\n <>\n {userType === 4 ||\n userType === 7 ||\n userType === 10 ? null : (\n \n \n
\n \n \n \n \n {localStorage.getItem(\"relatedCompanyLogoUrl\") &&\n localStorage.getItem(\"relatedCompanyLogoUrl\") !==\n \"null\" && (\n \n setRemoveLogoOpen(true)}\n >\n x\n \n
\n )}\n \n \n Only accepts JPEG, PNG, BMP formats.\n
\n Maximum file size should be 5MB.\n \n
\n \n \n Maximum file size should be 5MB.\n \n
\n setUploadLogoOpen(true)}\n >\n UPLOAD LOGO{\" \"}\n
\n \n \n \n
\n ) : null}\n {userType === 2 || userType === 3 ? (\n \n \n \n \n \n {\n handlePricingChange(\"useBoaRrp\", true);\n }}\n />\n \n \n {\n handlePricingChange(\"useBoaRrp\", false);\n }}\n />\n \n {!pricingData.useBoaRrp ? (\n \n {!editPricing ? (\n \n ) : null}\n \n \n Global Labour Fee (hr)\n \n $\n {!editPricing ? (\n {Number(pricingData.labourFee)}\n ) : (\n \n handlePricingChange(\n \"labourFee\",\n e.target.value\n )\n }\n onKeyDown={(event) =>\n NumericInputChecker(event, 2)\n }\n />\n )}\n \n \n \n Global Travel Fee (\n {userCountryCode === \"US\" ? \"mi\" : \"km\"})\n \n $\n {!editPricing ? (\n {Number(pricingData.travel)}\n ) : (\n \n handlePricingChange(\"travel\", e.target.value)\n }\n onKeyDown={(event) =>\n NumericInputChecker(event, 2)\n }\n />\n )}\n \n \n {\n handlePricingChange(\"useEach\", true);\n }}\n />\n \n \n NOTE:\n \n \n 2 x crimp fees will added to the value of the\n RRP $ of the Hose & Fittings\n \n \n \n {pricingData.useEach ? (\n \n {!editPricing ? (\n \n ) : null}\n \n {\n handlePricingChange(\"useEach\", false);\n }}\n />\n \n \n NOTE:\n \n \n Will add the % on the value of the RRP $ of the\n Hose & Fittings\n \n \n \n {!pricingData.useEach ? (\n \n {!editPricing ? (\n \n ) : null}\n \n {!editPricing ? (\n \n \n \n
\n \n \n \n \n {Number(pricingData.customGlobalMarkup)}\n \n \n \n %\n \n \n
\n ) : (\n \n \n \n \n handlePricingChange(\n \"customGlobalMarkup\",\n e.target.value\n )\n }\n onKeyDown={(event) =>\n NumericInputChecker(event, 1)\n }\n />\n \n \n %\n \n \n
\n )}\n \n $\n \n {Number(pricingData.crimpFeeEach)}\n \n
\n ) : (\n \n $\n \n handlePricingChange(\n \"crimpFeeEach\",\n e.target.value\n )\n }\n onKeyDown={(event) =>\n NumericInputChecker(event, 2)\n }\n />\n
\n )}\n \n \n {Number(pricingData.crimpFeeMarkupPercent)}\n \n %\n
\n ) : (\n \n \n handlePricingChange(\n \"crimpFeeMarkupPercent\",\n e.target.value\n )\n }\n onKeyDown={(event) =>\n NumericInputChecker(event, 1)\n }\n />\n %\n
\n )}\n \n setEditPricing(true)}\n >\n EDIT\n \n
\n ) : (\n \n {\n onSubmitCustomPricing(pricingData);\n setEditPricing(false);\n }}\n >\n SAVE\n \n {\n getCustomPricingData();\n setEditPricing(false);\n }}\n >\n CANCEL\n \n
\n )}\n \n \n
\n \n {\n setNotificationSaved(false);\n setNotificationData(null);\n setAddNotificationOpen(true);\n }}\n >\n Add New Receiver\n \n
\n \n \n {notificationList?.length > 0 ? (\n
\n No receivers listed to quote acceptance emails\n
\n )}\n \n \n \n \n Jobbing\n \n \n \n \n Use Basic Mode for Jobbing?\n \n \n \n onUpdateBoahubPreferences()}\n />\n \n \n \n \n
\n \n
\n )}\n {response.status === 400 && (\n \n \n CONGRATULATIONS\n \n
\n \n \n Create your password\n \n
\n \n
\n )}\n {status === 404 &&\n status ===\n 400(\n \n \n CONGRATULATIONS\n \n
\n \n \n Your BOAhub user has been created.
\n Lets get started!\n \n
\n \n Lets get started!\n \n
\n \n \n
\n \n \n boahub.co\n \n
\n \n \n \n \n \n \n \n \n \n \n !longEnough(val)\n length: (val) => val.length > 5,\n }}\n />\n \n\n \n \n \n \n\n Password is required,\n longEnough: (\n \n \n \n \n \n !this.comparePassword(val),\n }}\n />\n \n
\n );\n\n return (\n \n Create your password\n
\n(Min 6 characters)
\n\n {polyglot.t(\"createAccountPage.passwordCriteria\")}\n
\n ),\n length:Min 6 characters required
,\n }}\n />\n\n Tips on Strong Passwords : Using a strong password helps protect\n your data. Try creating a password that you will remember but\n will be hard for others to guess by incorporating a mix of upper\n and lower case letters and special characters.\"\n
\n \n \n
\n \n \n {loader}\n
\n \n {status !== 200 && formCode}\n {responseJSX}\n
\n \n \n \n Loading\n \n \n
\n {podLoading && pod?.id === selectedPod?.id ? null : podDetails ===\n null ? (\n \n \n No details found\n \n
\n ) : (\n \n \n \n \n handleSearch(data.value)}\n />\n
\n \n
\n \n \n {data.map(\n (pod) =>\n isVisibleOnMap(pod) && (\n
\n \n \n \n \n {/* Find BOApod */}\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n );\n}\n","export default __webpack_public_path__ + \"static/media/empty.8d1debf5.png\";","import React, { useEffect, useMemo, useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport {\n Button,\n Grid,\n Image as ImageContainer,\n Dimmer,\n Loader,\n} from \"semantic-ui-react\";\nimport { showErrorToast } from \"../../utils/toastUtils\";\nimport \"./myAssets.css\";\n\nconst baseStyle = {\n alignItems: \"center\",\n padding: \"20px\",\n borderWidth: 2,\n borderRadius: 2,\n borderColor: \"#979fa8\",\n borderStyle: \"dashed\",\n backgroundColor: \"#fafafa\",\n color: \"#979fa8\",\n outline: \"none\",\n transition: \"border .24s ease-in-out\",\n};\n\nconst activeStyle = {\n borderColor: \"#2196f3\",\n};\n\nconst acceptStyle = {\n borderColor: \"#00e676\",\n};\n\nconst rejectStyle = {\n borderColor: \"#ff1744\",\n};\n\nexport default function JobImageUploader(props) {\n const MAX_IMAGES = 4;\n const [imagesUploaded, setImagesUploaded] = useState([]);\n const {\n acceptedFiles,\n getRootProps,\n getInputProps,\n isDragActive,\n isDragAccept,\n isDragReject,\n onDropAccepted,\n } = useDropzone({\n accept: \".jpg, .jpeg, .png\",\n onDrop: (acceptedFiles) => {\n const imageListCount = 4 - imagesUploaded.length;\n\n if (acceptedFiles.length > imageListCount) {\n showErrorToast(\"Maximum of 4 images only\");\n } else {\n if (imagesUploaded.length + acceptedFiles.length <= MAX_IMAGES) {\n setHasUploaded(true);\n setImagesUploaded([...imagesUploaded, ...acceptedFiles]);\n }\n }\n },\n });\n\n const style = useMemo(\n () => ({\n ...baseStyle,\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {}),\n }),\n [isDragActive, isDragReject, isDragAccept]\n );\n\n const [isLoading, setIsLoading] = useState(false);\n const [hasUploaded, setHasUploaded] = useState(false);\n const [image1, setImage1] = useState(\"\");\n const [image2, setImage2] = useState(\"\");\n const [image3, setImage3] = useState(\"\");\n const [image4, setImage4] = useState(\"\");\n\n const removeImage = (index) => {\n setHasUploaded(true);\n setImage1(\"\");\n setImage2(\"\");\n setImage3(\"\");\n setImage4(\"\");\n let newState = [];\n newState.push(imagesUploaded);\n\n let imageData = newState.map((item, i) => {\n if (i == 0) {\n item.splice(index, 1);\n }\n return item;\n });\n\n setImagesUploaded([...imageData[0]]);\n };\n\n function base64ToFile(base64, filename) {\n var arr = base64.split(\",\"),\n mime = arr[0].match(/:(.*?);/)[1],\n bstr = atob(arr[1]),\n n = bstr.length,\n u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n return new File([u8arr], filename, { type: mime });\n }\n\n async function compressBase64Image(base64String, desiredSizeInKb) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => {\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0);\n\n let quality = 1; // initial quality\n let compressedBase64 = canvas.toDataURL(\"image/jpeg\", quality);\n let fileSizeInKb = Math.round(compressedBase64.length / 1024);\n\n while (fileSizeInKb > desiredSizeInKb && quality > 0) {\n quality -= 0.1;\n if (quality > 0) {\n compressedBase64 = canvas.toDataURL(\"image/jpeg\", quality);\n fileSizeInKb = Math.round(compressedBase64.length / 1024);\n }\n }\n\n if (fileSizeInKb > desiredSizeInKb) {\n const canvas2 = document.createElement(\"canvas\");\n const ctx2 = canvas2.getContext(\"2d\");\n const aspectRatio = img.width / img.height;\n const newWidth = img.width / 2;\n const newHeight = newWidth / aspectRatio;\n canvas2.width = newWidth;\n canvas2.height = newHeight;\n ctx2.drawImage(img, 0, 0, newWidth, newHeight);\n\n let quality2 = 1; // initial quality\n compressedBase64 = canvas2.toDataURL(\"image/jpeg\", quality2);\n\n while (fileSizeInKb > desiredSizeInKb && quality2 > 0) {\n quality2 -= 0.1;\n if (quality2 > 0) {\n compressedBase64 = canvas2.toDataURL(\"image/jpeg\", quality2);\n fileSizeInKb = Math.round(compressedBase64.length / 1024);\n console.log(\"Image file size: \" + fileSizeInKb);\n }\n }\n }\n\n resolve(compressedBase64);\n };\n img.onerror = reject;\n img.src = base64String;\n });\n }\n\n function getBase64(file, index) {\n if (typeof file === \"string\" || file instanceof String) {\n file = base64ToFile(`data:image/jpeg;base64,${file}`, \"image.jpeg\");\n }\n setIsLoading(true);\n var reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = function () {\n compressBase64Image(reader.result, 50).then((compressedBase64Image) => {\n var compressedBase64EncodedImage = compressedBase64Image.split(\",\")[1];\n if (index === 0) setImage1(compressedBase64EncodedImage);\n if (index === 1) setImage2(compressedBase64EncodedImage);\n if (index === 2) setImage3(compressedBase64EncodedImage);\n if (index === 3) setImage4(compressedBase64EncodedImage);\n });\n };\n reader.onerror = function (error) {\n console.log(\"Error: \", error);\n };\n setTimeout(function () {\n setIsLoading(false);\n }, 300);\n }\n\n useEffect(() => {\n if (hasUploaded) {\n props.setImages(imagesUploaded);\n imagesUploaded.map((file, index) => {\n getBase64(file, index);\n });\n }\n }, [JSON.stringify(imagesUploaded)]);\n\n return (\n \n {isLoading ? (\n \n Loading images... \n \n ) : (\n \n \n {image1 != \"\" && image1 != null ? (\n \n removeImage(0)}\n >\n x\n \n
\n ) : null}\n \n \n \n
\n \n );\n}\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Icon } from \"semantic-ui-react\";\nimport { useDropzone } from \"react-dropzone\";\nimport { showErrorToast } from \"../../utils/toastUtils\";\nimport \"./myAssets.css\";\nimport { fileIsImage } from \"../../utils/utils\";\n\nconst activeStyle = {\n borderColor: \"#2196f3\",\n};\n\nconst acceptStyle = {\n borderColor: \"#00e676\",\n};\n\nconst rejectStyle = {\n borderColor: \"#ff1744\",\n};\n\nexport default function AssetChecklistUploader(props) {\n const [imagesUploaded, setImagesUploaded] = useState([]);\n const {\n getRootProps,\n getInputProps,\n isDragActive,\n isDragAccept,\n isDragReject,\n } = useDropzone({\n onDrop: (acceptedFiles) => {\n const imageListCount = 1;\n\n if (acceptedFiles.length > imageListCount) {\n showErrorToast(\"Maximum of 1 file only\");\n } else {\n setHasUploaded(true);\n setImagesUploaded(acceptedFiles);\n }\n },\n });\n\n const [hasUploaded, setHasUploaded] = useState(false);\n const [image1Src, setImage1Src] = useState(\"\");\n\n const style = useMemo(\n () => ({\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {}),\n }),\n [isDragActive, isDragReject, isDragAccept]\n );\n\n function base64ToFile(base64, filename) {\n var arr = base64.split(\",\"),\n mime = arr[0].match(/:(.*?);/)[1],\n bstr = atob(arr[1]),\n n = bstr.length,\n u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n return new File([u8arr], filename, { type: mime });\n }\n\n async function compressBase64Image(base64String, desiredSizeInKb) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => {\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0);\n\n let quality = 1; // initial quality\n let compressedBase64 = canvas.toDataURL(\"image/jpg\", quality);\n\n resolve(compressedBase64);\n };\n img.onerror = reject;\n img.src = base64String;\n });\n }\n\n function getBase64(file, index) {\n if (typeof file === \"string\" || file instanceof String) {\n file = base64ToFile(`data:image/jpg;base64,${file}`, \"image.jpg\");\n }\n var reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = function () {\n compressBase64Image(reader.result, 10).then((compressedBase64Image) => {\n var compressedBase64EncodedImage = compressedBase64Image.split(\",\")[1];\n if (index === 0) setImage1Src(compressedBase64EncodedImage);\n });\n };\n reader.onerror = function (error) {\n console.log(\"Error: \", error);\n };\n }\n\n useEffect(() => {\n props.setFileSrc(image1Src);\n }, [image1Src]);\n\n useEffect(() => {\n if (hasUploaded) {\n props.setFile(imagesUploaded[0]);\n imagesUploaded.map((file, index) => {\n if (fileIsImage(file)) getBase64(file, index);\n });\n }\n }, [JSON.stringify(imagesUploaded)]);\n\n return (\n \n
\n Drag and Drop image
\n\n
\n or
\n\n \n
\n \n \n \n \n
\n \n );\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport \"./style.css\";\nimport { rs23Categories } from \"../data\";\nimport Collapsible from \"react-collapsible\";\nimport {\n Button,\n Card,\n Dimmer,\n Form,\n Grid,\n Icon,\n Input,\n Loader,\n Modal,\n} from \"semantic-ui-react\";\nimport { getFileExtension, removeFileExtension } from \"../../../utils/utils\";\nimport {\n apiDeleteRS23File,\n apiGetRS23Files,\n apiUploadRS23File,\n} from \"../myAssets.api\";\nimport { showErrorToast, showSuccessToast } from \"../../../utils/toastUtils\";\n\nconst triggerStyle = {\n borderRadius: 8,\n};\n\nconst contentStyle = {\n padding: \"10px\",\n border: \"1px solid #ccc\",\n width: \"100%\", // Ensure the content takes full width\n};\n\nexport default function RS23(props) {\n const [categories, setCategories] = useState(rs23Categories);\n const [openUploadFile, setOpenUploadFile] = useState(false);\n const [selectedCategory, setSelectedCategory] = useState({});\n const [file, setFile] = useState(null);\n const [fileName, setFileName] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [hoveredCard, setHoveredCard] = useState(null);\n const [selectedFile, setSelectedFile] = useState(null);\n const [deleteFileOpen, setDeleteFileOpen] = useState(false);\n\n // Function to handle mouse enter event\n const handleMouseEnter = (categoryId) => {\n setHoveredCard(categoryId); // Set the hovered card ID\n };\n\n // Function to handle mouse leave event\n const handleMouseLeave = () => {\n setHoveredCard(null); // Reset hovered card ID\n };\n\n const fileInputRef = useRef(null);\n\n const handleButtonClick = () => {\n fileInputRef.current.click();\n };\n\n const handleFileChange = (event) => {\n const file = event.target.files[0];\n if (file) {\n setFile(file);\n if (fileName === \"\") setFileName(removeFileExtension(file.name));\n // Handle the selected file here (e.g., upload to server)\n }\n };\n\n const handleDownload = (file) => {\n if (!file.filePath) {\n showErrorToast(\"Save asset first before downloading this file\");\n return false;\n }\n try {\n fetch(file.filePath)\n .then((response) => response.blob())\n .then((blob) => {\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = file.fileDisplayName;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n });\n } catch {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const getRS23Files = async () => {\n setIsLoading(true);\n const data = await apiGetRS23Files(props.assetId);\n if (data) {\n setCategories(data);\n setIsLoading(false);\n setOpenUploadFile(false);\n setFile(null);\n setFileName(\"\");\n setSelectedFile(null);\n setDeleteFileOpen(false);\n } else {\n setIsLoading(false);\n }\n };\n\n const onUploadedRS23Files = async () => {\n setIsLoading(true);\n if (file) {\n const extension = \".\" + getFileExtension(file.name);\n const renamedFile = new File([file], fileName + extension, {\n type: file.type,\n });\n const result = await apiUploadRS23File(\n fileName ? renamedFile : file,\n props.assetId,\n selectedCategory.categoryId\n );\n if (result) {\n showSuccessToast(\n \n File Uploaded Successfully\n
\n );\n getRS23Files();\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onDeleteRS23Files = async (id) => {\n setIsLoading(true);\n const result = await apiDeleteRS23File(id);\n if (result) {\n showSuccessToast(\n \n File Deleted Successfully\n
\n );\n getRS23Files();\n } else {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n if (props.assetId) getRS23Files();\n }, [props.assetId]);\n\n return (\n <>\n \n {isLoading ? (\n
\n \n Are you sure you want to delete\n
\n {selectedFile?.fileDisplayName}?\n
\n {data?.fileDisplayName}\n
\n \n \n Asset Saved Successfully\n
\n );\n setIsLoading(false);\n setFilesLoading(false);\n }, 6000);\n } else {\n showSuccessToast(\n \n Asset Saved Successfully\n
\n );\n setIsLoading(false);\n setFilesLoading(false);\n }\n } else {\n setAssetSaved(false);\n setIsLoading(false);\n }\n } catch (e) {\n setAssetSaved(false);\n setIsLoading(false);\n }\n };\n\n const onUploadFile = async (file, id) => {\n return await onAutoSaveUploadedFiles(file, id);\n };\n\n const onUploadJobImage = async (file, id, index) => {\n return await onAutoSaveUploadedJobImages(file, id, index);\n };\n\n const onSubmitCreateJob = async () => {\n if (bookData.uniqueId === \"\") {\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n setIsLoading(true);\n try {\n const jobData = await apiSubmitJob(bookData, location);\n if (jobData) {\n if (images.length > 0) {\n const results = await Promise.all(\n images.map((file, index) => {\n onUploadJobImage(file, jobData, index);\n })\n );\n }\n if (assetFiles.length > 0) {\n setTimeout(function () {\n getMyAssetsListData();\n getMyAssetsData();\n getServiceHistoryData();\n setIsLoading(false);\n setBookData(tempBookData);\n showSuccessToast(\n \n Your job has been successfully\n submitted to {selectedCompany}\n
\n );\n setBookAPod(false);\n }, 1000);\n } else {\n setTimeout(function () {\n getMyAssetsListData();\n getMyAssetsData();\n getServiceHistoryData();\n setIsLoading(false);\n setBookData(tempBookData);\n showSuccessToast(\n \n Your job has been successfully\n submitted to {selectedCompany}\n
\n );\n setBookAPod(false);\n }, 500);\n }\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Please complete all required fields\");\n setIsLoading(false);\n }\n };\n\n const onUpdateAsset = async () => {\n setHasDTOpen(false);\n if (\n formData.assetId === \"\" ||\n formData.makeName === \"\" ||\n formData.equipmentTypeName === \"\" ||\n formData.model === \"\" ||\n formData.industry === \"\"\n ) {\n setAssetSaved(true);\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n setIsLoading(true);\n if (formData.assetDbId === null) {\n formData.otherAssetDetails = `${formData.makeName} | ${formData.equipmentTypeName} | ${formData.model}`;\n }\n try {\n const result = await apiUpdateAsset(formData);\n if (result) {\n if (imageData !== null) await onAutoSaveAssetImage(formData.id);\n if (fileData !== null) {\n const fileResult = await onAutoSaveAssetChecklist(formData.id);\n if (fileResult) {\n getMyAssetsData(formData.id);\n }\n }\n if (imageRemoved && formData.assetImageUrl !== \"\") {\n await onAutoRemoveAssetImage(formData.id);\n }\n if (fileRemoved && formData.assetPrestartChecklistUrl !== \"\") {\n await onAutoRemoveAssetChecklist(formData.id);\n }\n setAssetSaved(false);\n showSuccessToast(\n \n Asset Updated Successfully\n
\n );\n getMyAssetsListData();\n getMyAssetsData();\n setIsEdit(false);\n setIsLoading(false);\n } else {\n setAssetSaved(false);\n setIsLoading(false);\n }\n } catch (e) {\n setAssetSaved(false);\n setIsLoading(false);\n }\n };\n\n const onDeleteAsset = async () => {\n setIsLoading(true);\n const assetData = await apiDeleteAsset(formData);\n if (assetData) {\n showSuccessToast(\n \n Asset Deleted Successfully\n
\n );\n setDeleteAssetOpen(false);\n getMyAssetsListData();\n setIsEdit(false);\n setIsLoading(false);\n setSelectedId(null);\n setSelectedCard(null);\n setSelectedData(null);\n setFormData(null);\n setAssetType(\"\");\n setAssetImage(\"\");\n setAssetSearch(\"\");\n localStorage.setItem(\"selectedAssetImage\", \"\");\n if (assetHistory.length > 0) handleBack();\n } else {\n setIsLoading(false);\n }\n };\n\n const onDeleteFile = async () => {\n setIsLoading(true);\n if (!formData?.id) {\n const objectsToRemove = [selectedFile];\n let filteredArray = assetFiles.filter((objA) => {\n return !objectsToRemove.some((objToRemove) => objA === objToRemove);\n });\n setAssetFiles(filteredArray);\n setDeleteFileOpen(false);\n setIsLoading(false);\n showSuccessToast(\n \n File Deleted Successfully\n
\n );\n } else {\n const assetData = await apiDeleteFile(selectedFile.id, formData.id);\n if (assetData) {\n showSuccessToast(\n \n File Deleted Successfully\n
\n );\n setDeleteFileOpen(false);\n getMyAssetsData();\n } else {\n setIsLoading(false);\n }\n }\n };\n\n const onSetCategory = async () => {\n setIsLoading(true);\n try {\n const result = await apiSetCategory(selectedCategory);\n if (result) {\n showSuccessToast(\n \n Asset Category Updated Successfully\n
\n );\n setTimeout(function () {\n setCategoryOpen(false);\n getMyAssetsListData();\n getMyAssetsData();\n setIsEdit(false);\n setIsLoading(false);\n }, 300);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch (e) {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onSearch = async (query) => {\n setSearchLoading(true);\n const result = await apiGetMyAssetsList(query);\n if (result) {\n setData(result);\n setSearchLoading(false);\n }\n };\n\n const getMyAssetsListData = async () => {\n // if (setFirstAssetId === \"\") setIsLoading(true);\n const result = await apiGetMyAssetsList(searchTerm);\n if (result) {\n setData(result);\n }\n };\n\n const getAssetList = async (search) => {\n setAssetLoading(true);\n setAssetList([]);\n if (search === \"\") {\n setAssetList([]);\n setAssetLoading(false);\n return false;\n }\n const assetsData = await apiAssetsSearch(search);\n if (assetsData) {\n setAssetList(assetsData);\n setAssetLoading(false);\n } else {\n setAssetLoading(false);\n }\n };\n\n const getMyAssetsData = async (id = null) => {\n setBookAPod(false);\n setClicked(false);\n setImageRemoved(false);\n setFileRemoved(false);\n setIsLoading(true);\n const result = await apiGetAsset(id ? id : selectedId);\n if (result) {\n setFormData(result);\n setSelectedData(result);\n setIsLoading(false);\n setOpenUpdateAssetHours(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n setOpenUpdateAssetHours(false);\n }\n };\n\n const getMyAssetsDataWithoutLoading = async (id) => {\n const result = await apiGetAsset(id);\n if (result) {\n setFormData(result);\n setSelectedData(result);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const getServiceHistoryData = async () => {\n setHistoryLoading(true);\n const result = await apiGetServiceHistory(selectedId);\n if (result) {\n setServiceHistories(result);\n setHistoryLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setHistoryLoading(false);\n }\n };\n\n const getDTLocationsData = async () => {\n if (!formData) return false;\n setIsLoading(true);\n const result = await apiGetDTLocationsList(selectedId, formData.assetDbId);\n if (result) {\n setAssetLocations(result);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const getUsersList = async () => {\n const result = await apiGetUsersListWithCurrent();\n if (result) {\n const list = result.filter(\n (item, index) => result.indexOf(item) === index\n );\n setOperatorList(list);\n setAssetLoading(false);\n } else {\n setAssetLoading(false);\n }\n };\n\n const getIndustryList = async () => {\n const result = await apiGetIndustryList();\n if (result) {\n setIndustryList(result);\n setAssetLoading(false);\n } else {\n setAssetLoading(false);\n }\n };\n\n const getAssetLocationsData = async () => {\n const result = await apiGetAssetLocationsList();\n if (result) {\n setAssetLocationsList(result);\n setAssetLoading(false);\n } else {\n setAssetLoading(false);\n }\n };\n\n const getMyPodsData = async () => {\n setMyPodsLoading(true);\n const result = await apiGetMyBOAPodListData();\n if (result) {\n setMyPodList(result);\n setMyPodsLoading(false);\n } else {\n setMyPodsLoading(false);\n }\n };\n\n const getBOApodsData = async () => {\n setPodsLoading(true);\n try {\n const result = await apiGetBOApodsList(currentLocation);\n if (result) {\n setPodList(result);\n setPodsLoading(false);\n }\n } catch {\n setPodsLoading(false);\n }\n };\n\n const getDropdownData = async () => {\n const urgencies = await apiGetUrgencies();\n if (urgencies) {\n setUrgenciesData(urgencies);\n }\n };\n\n const getHosePositions = async () => {\n setImageLoading(true);\n setAssetImage(\"\");\n localStorage.setItem(\"selectedAssetImage\", \"\");\n const hosePositions = await apiGetHosePositions(assetType);\n if (hosePositions) {\n setAssetImage(hosePositions.url);\n setLocationList(hosePositions.positions);\n setImageLoading(false);\n localStorage.setItem(\"selectedAssetImage\", hosePositions.url);\n } else {\n setAssetImage(\"\");\n setLocationList([]);\n setImageLoading(false);\n localStorage.setItem(\"selectedAssetImage\", \"\");\n }\n };\n\n const handleResultSelect = (e, { result }) => {\n setAssetLoading(true);\n const fullDescription = result.displayName.split(\" | \");\n formData.makeName = fullDescription[0];\n formData.equipmentTypeName = fullDescription[1];\n formData.model = fullDescription[2];\n setAssetType(fullDescription[1]);\n handleChange(\"asset\", result.id);\n setTimeout(function () {\n setAssetLoading(false);\n }, 500);\n };\n\n const handleAssetSearch = async (e, { value }) => {\n setAssetSearch(value);\n };\n\n const onAddressSelection = (place) => {\n handleBookChange(\"customerLocation\", locationRef.current.refs.input.value);\n if (place && place.geometry) {\n const geolocation = {\n lat: place.geometry.location.lat(),\n lng: place.geometry.location.lng(),\n };\n setLocation(geolocation);\n setHasLocation(true);\n }\n };\n\n const onAutoSaveAssetImage = async (id) => {\n setIsLoading(true);\n try {\n const image = await apiAutoSaveAssetImage(imageData, id);\n if (image) {\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onAutoRemoveAssetImage = async (id) => {\n try {\n const logo = await apiAutoRemoveAssetImage(id);\n if (logo) {\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onAutoSaveAssetChecklist = async (id) => {\n setIsLoading(true);\n try {\n const file = await apiAutoSaveAssetChecklist(fileData, id);\n if (file) {\n setIsLoading(false);\n return true;\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n return false;\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n return false;\n }\n };\n\n const onAutoRemoveAssetChecklist = async (id) => {\n try {\n const file = await apiAutoRemoveAssetChecklist(id);\n if (file) {\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onAutoSaveUploadedFiles = async (file, id) => {\n if (file) {\n const result = await apiUploadFile(file, id);\n if (result) {\n setIsLoading(false);\n setTimeout(function () {\n getMyAssetsDataWithoutLoading(id);\n }, 1000);\n } else {\n setIsLoading(false);\n }\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onAutoSaveUploadedJobImages = async (file, id, index) => {\n if (file) {\n const result = await apiSaveJobAssetImage(file, id, index);\n if (result) {\n setIsLoading(false);\n } else {\n setIsLoading(false);\n }\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const getImageWidth = () => {\n if (imgRef.current) {\n const width = imgRef.current.width;\n setImageWidth(width);\n }\n };\n\n const getImage = async (image) => {\n if (image instanceof File) {\n const selectedFile = image;\n const maxSize = 5 * 1024 * 1024; // 5MB in bytes\n\n try {\n const compressedImage = await compressImage(selectedFile);\n setImageData(compressedImage);\n } catch (error) {\n showErrorToast(\"Error compressing image: \" + error);\n }\n }\n };\n\n const getFile = async (file) => {\n if (file instanceof File) {\n setFileRemoved(false);\n const selectedFile = file;\n\n if (selectedFile && fileIsImage(selectedFile)) {\n try {\n const compressedImage = await compressImage(selectedFile);\n setFileData(selectedFile);\n } catch (error) {\n showErrorToast(\"Error compressing image: \" + error);\n }\n } else {\n if (file.size >= 50000000) {\n showErrorToast(\"File size cannot exceed 50MB.\");\n return false;\n }\n setFileData(file);\n }\n }\n };\n\n const compressImage = (file) => {\n if (file.size >= 5000000) {\n return file;\n }\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n const img = new Image();\n img.src = event.target.result;\n img.onload = () => {\n const canvas = document.createElement(\"canvas\");\n const maxDimension = 256; // Max width or height of the compressed image\n\n let width = img.width;\n let height = img.height;\n\n if (height > maxDimension) {\n width *= maxDimension / height;\n height = maxDimension;\n }\n\n canvas.width = width;\n canvas.height = height;\n\n const ctx = canvas.getContext(\"2d\");\n ctx.fillStyle = \"#ffffff\"; // White color\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(img, 0, 0, width, height);\n\n canvas.toBlob((blob) => {\n const compressedFile = new File([blob], file.name, {\n type: \"image/jpg\", // Change the format if needed\n });\n resolve(compressedFile);\n }, \"image/jpg\"); // Change the format if needed\n };\n };\n\n reader.readAsDataURL(file);\n });\n };\n\n const getImageSrc = async (image) => {\n if (image) {\n setImageSrc(image);\n }\n };\n\n const getFileSrc = async (file) => {\n if (file) {\n setFileSrc(file);\n }\n };\n\n const handleFileButtonClick = () => {\n fileInputRef.current.click();\n };\n\n const handleFileChange = async (e) => {\n setFilesLoading(true);\n const file = e.target.files[0];\n if (file) {\n if (file.size >= 25000000) {\n showErrorToast(\"File size cannot exceed 25MB.\");\n setIsLoading(false);\n setFilesLoading(false);\n }\n if (!formData?.id) {\n let list = [];\n list = assetFiles;\n list.push(file);\n setAssetFiles(list);\n setFilesLoading(false);\n setTimeout(function () {\n handleChange(\"assetsUploaded\", assetFiles.length);\n }, 300);\n return false;\n }\n setIsLoading(true);\n try {\n const result = await apiUploadFile(file, formData.id);\n if (result) {\n getMyAssetsData();\n setIsLoading(false);\n setFilesLoading(false);\n showSuccessToast(\n \n File Uploaded Successfully\n
\n );\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n setFilesLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n setFilesLoading(false);\n }\n } else {\n setFilesLoading(false);\n }\n };\n\n const handleDownload = (file) => {\n if (!file.filePath) {\n showErrorToast(\"Save asset first before downloading this file\");\n return false;\n }\n try {\n fetch(file.filePath)\n .then((response) => response.blob())\n .then((blob) => {\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = file.fileName;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n });\n } catch {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const handleDownloadFile = (filePath) => {\n if (!filePath) {\n showErrorToast(\"Save asset first before downloading this file\");\n return false;\n }\n try {\n const parts = filePath.split(\"/\");\n const fileName = parts[parts.length - 1];\n fetch(filePath)\n .then((response) => response.blob())\n .then((blob) => {\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = fileName;\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n });\n } catch {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const handleDownloadLocal = (file) => {\n // Create a URL for the file\n const url = URL.createObjectURL(file);\n\n // Create a temporary anchor element\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = file.name; // Set the file name for download\n\n // Append the anchor to the body\n document.body.appendChild(a);\n\n // Programmatically click the anchor to trigger the download\n a.click();\n\n // Remove the anchor from the document\n document.body.removeChild(a);\n\n // Revoke the object URL to free up resources\n URL.revokeObjectURL(url);\n };\n\n const handleOpenHistory = () => {\n setClicked(!clicked);\n };\n\n const handleBack = () => {\n const history = assetHistory;\n const previousAssetId = history[history.length - 1];\n setSelectedId(previousAssetId);\n setSelectedCard(previousAssetId);\n history.pop();\n setAssetHistory(history);\n };\n\n const onGeneratePDF = async (id, jobNumber, type) => {\n setIsLoading(true);\n try {\n const pdfData = await apiGeneratePDF(id, jobNumber, type);\n if (pdfData) {\n setIsLoading(false);\n showSuccessToast(\n \n PDF Generated Successfully\n
\n );\n } else {\n setIsLoading(false);\n showErrorToast(\"Generate PDF Failed\");\n }\n } catch {\n setIsLoading(false);\n showErrorToast(\"Generate PDF Failed\");\n }\n };\n\n const openImageViewer = useCallback(() => {\n setIsViewerOpen(true);\n }, []);\n\n const closeImageViewer = () => {\n setCurrentImage(0);\n setIsViewerOpen(false);\n };\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n getAssetList(assetSearch);\n }, 1500);\n\n return () => clearTimeout(delayDebounceFn);\n }, [assetSearch]);\n\n useEffect(() => {\n if (selectedId != null) {\n setViewRS23(false);\n getMyAssetsData();\n getServiceHistoryData();\n getDTLocationsData();\n\n window.localStorage.removeItem(\"selectedAssetId\");\n\n const thirdLevelArrays = Object.values(data);\n const combinedArray = [].concat(...thirdLevelArrays);\n const filteredArray = combinedArray.filter(\n (item) => item.Id !== selectedId\n );\n filteredArray.map((item) => {\n if (item.OtherAssetDetails !== \"\") {\n item.text = item.AssetId;\n const fullDescription = item.OtherAssetDetails.split(\" | \");\n item.EquipmentType = fullDescription[1] ? fullDescription[1] : \"\";\n item.Model = fullDescription[2] ? fullDescription[2] : \"\";\n } else {\n item.name = `${item.AssetId} | ${item.EquipmentType} | ${item.Model}`;\n item.text = item.AssetId;\n }\n item.value = item.Id;\n });\n setAssetsList(filteredArray);\n }\n }, [selectedId]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n onSearch(searchTerm);\n }, 1000);\n\n return () => clearTimeout(delayDebounceFn);\n }, [searchTerm]);\n\n const handleSubmit = (event) => {\n event.preventDefault();\n };\n\n useEffect(() => {\n if (assetType) {\n getHosePositions();\n }\n }, [assetType]);\n\n useEffect(() => {\n if (formData?.connectedAssetsIds?.length > 0) {\n const filteredArray = assetsList.filter((item) =>\n formData?.connectedAssetsIds.includes(item.Id)\n );\n setConnectedIds(filteredArray);\n } else {\n setConnectedIds([]);\n }\n }, [formData?.connectedAssetsIds]);\n\n useEffect(() => {\n if (formData?.id) {\n getDTLocationsData();\n }\n }, [formData?.id]);\n\n useEffect(() => {\n if (firstAssetId !== \"\") {\n const selectedAssetId = localStorage.getItem(\"selectedAssetId\");\n if (selectedAssetId !== null) {\n setSelectedId(Number(selectedAssetId));\n setSelectedCard(Number(selectedAssetId));\n } else {\n setSelectedId(firstAssetId);\n setSelectedCard(firstAssetId);\n }\n }\n }, [firstAssetId]);\n\n useEffect(() => {\n if (assetImage !== \"\") {\n if (formData?.id === 0 && assetSearch === \"\") {\n localStorage.setItem(\"selectedAssetImage\", \"\");\n setAssetImage(\"\");\n setLocationList([]);\n }\n }\n }, [assetImage]);\n\n useEffect(() => {\n if (\n currentLocation &&\n currentLocation.lat !== null &&\n currentLocation.lng !== null\n )\n getBOApodsData();\n }, [currentLocation]);\n\n useEffect(() => {\n if (formData?.id === 0 && assetFiles.length > 0) {\n handleChange(\"assetsUploaded\", assetFiles.length);\n }\n }, [assetFiles]);\n\n useEffect(() => {\n if (localStorage.getItem(\"boahubFindPod\") !== \"true\") {\n setPodListData(myPodList);\n } else if (myPodList.length > 0 && podList.length > 0) {\n const filteredArray = podList.filter((itemA) => {\n return !myPodList.some((itemB) => itemA.id === itemB.deviceId);\n });\n const mergedArray = myPodList.concat(filteredArray);\n\n setPodListData(mergedArray);\n } else {\n if (podList.length > 0) setPodListData(podList);\n }\n }, [podList, myPodList]);\n\n useEffect(() => {\n if (selectedData && selectedId) {\n setImageRemoved(false);\n setImageData(null);\n setImageSrc(null);\n setFileRemoved(false);\n setFileData(null);\n setFileSrc(null);\n setBookData(tempBookData);\n setAssetSearch(\"\");\n if (assetType !== selectedData.assetDetails.equipmentTypeName) {\n if (\n selectedData.assetDetails.equipmentTypeName === null ||\n selectedData.assetDetails.equipmentTypeName === \"\"\n ) {\n localStorage.setItem(\"selectedAssetImage\", \"\");\n setAssetImage(\"\");\n setAssetType(\"\");\n } else {\n setAssetType(\n selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\"\n );\n }\n }\n if (\n selectedData.assetDetails?.otherAssetDetails !== null &&\n selectedData.assetDetails?.otherAssetDetails !== \"\"\n ) {\n const fullDescription =\n selectedData.assetDetails.otherAssetDetails.split(\" | \");\n selectedData.makeName = fullDescription[0] ? fullDescription[0] : \"\";\n selectedData.equipmentTypeName = fullDescription[1]\n ? fullDescription[1]\n : \"\";\n selectedData.model = fullDescription[2] ? fullDescription[2] : \"\";\n selectedData.assetDetails.makeName = fullDescription[0]\n ? fullDescription[0]\n : \"\";\n selectedData.assetDetails.equipmentTypeName = fullDescription[1]\n ? fullDescription[1]\n : \"\";\n selectedData.assetDetails.model = fullDescription[2]\n ? fullDescription[2]\n : \"\";\n selectedData.makeId = 0;\n } else {\n selectedData.makeName = selectedData.assetDetails?.makeName;\n selectedData.equipmentTypeName =\n selectedData.assetDetails?.equipmentTypeName;\n selectedData.model = selectedData.assetDetails?.model;\n selectedData.equipmentTypeId =\n selectedData.assetDetails?.equipmentTypeId;\n selectedData.makeId = selectedData.assetDetails?.makeId;\n }\n const selectedFormData = {\n id: selectedData.asset.id,\n assetId: selectedData.asset.assetId,\n assetSerialNumber: selectedData.asset.assetSerialNumber,\n year: selectedData.asset.year,\n industry: selectedData.asset.industry,\n assetLocationId: selectedData.asset.assetLocationId,\n assetImageUrl: selectedData.asset.assetImageUrl,\n assetPrestartChecklistUrl: selectedData.asset.assetPrestartChecklistUrl,\n operator: selectedData.asset.operator,\n nonBoaServiceParts: selectedData.asset.nonBoaServiceParts,\n parentId: selectedData.asset.parentId,\n assetDbId: selectedData.asset.assetDbId,\n otherAssetDetails: selectedData.assetDetails.otherAssetDetails,\n makeName: selectedData.assetDetails.makeName\n ? selectedData.assetDetails.makeName\n : \"\",\n equipmentTypeName: selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\",\n model: selectedData.assetDetails.model\n ? selectedData.assetDetails.model\n : \"\",\n assetPropUnit: selectedData.assetDetails.assetPropUnit\n ? selectedData.assetDetails.assetPropUnit.toLowerCase()\n : \"\",\n assetPropValue: selectedData.assetDetails.assetPropValue\n ? selectedData.assetDetails.assetPropValue\n : \"\",\n equipmentTypeId: selectedData.equipmentTypeId,\n makeId: selectedData.makeId,\n };\n selectedFormData.connectedAssetsIds = [];\n selectedData.asset.connectedAssets.map((item) => {\n selectedFormData.connectedAssetsIds.push(item.assetId);\n });\n setFormData(selectedFormData);\n setAssetFiles(selectedData.assetFiles ? selectedData.assetFiles : []);\n }\n }, [selectedData]);\n\n const assetCategories = Object.entries(data).map(\n ([category, assets], index) => (\n \n {category}\n {list.map((data, i) => {\n return (\n \n \n \n \n \n \n \n \n \n Job Number\n \n \n {data.JobNumber}\n \n \n {data?.JobStatusId > 2 ? \"Number of Hoses\" : \"Urgency\"}\n \n \n {data?.JobStatusId > 2\n ? data.HoseQuantity\n : data.JobUrgency}\n \n {data?.JobStatusId > 2 &&\n data?.JobStatusId !== 5 &&\n data?.JobStatusId !== 99 && (\n \n onGeneratePDF(data.JobId, data.JobNumber, 2)\n }\n >\n \n \n \n \n \n );\n })}\n
\n )\n );\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n const userTypeData = localStorage.getItem(\"userType\");\n setUserType(Number(userTypeData));\n const defaultAssetCategory = localStorage.getItem(\"defaultAssetCategory\");\n setSelectedCategory(defaultAssetCategory);\n\n getMyPodsData();\n getUsersList();\n getIndustryList();\n getAssetLocationsData();\n getDropdownData();\n\n // Get Location\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n (position) => {\n setCurrentLocation({\n lat: position.coords.latitude,\n lng: position.coords.longitude,\n });\n },\n (error) => {\n // Set coordinates to zero if navigator fails to get user's coordinates\n setCurrentLocation({\n lat: 0,\n lng: 0,\n });\n // Identify what caused the navigator error\n switch (error.code) {\n case error.PERMISSION_DENIED:\n console.log(\"Location access denied by user\");\n break;\n case error.POSITION_UNAVAILABLE:\n console.log(\"Location information is unavailable\");\n break;\n case error.TIMEOUT:\n console.log(\"Location request timed out\");\n break;\n default:\n console.log(\"An unknown error occurred\");\n break;\n }\n }\n );\n } else {\n console.error(\"Geolocation is not supported by this browser.\");\n }\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, []);\n\n const handleImageLoad = (e) => {\n const img = e.target;\n const aspectRatio = img.naturalWidth / img.naturalHeight;\n setAspectRatio(aspectRatio);\n };\n\n const handleCircleClick = (e) => {\n // Update circle position based on click coordinates relative to the image\n const boundingRect = e.currentTarget.getBoundingClientRect();\n const x = e.clientX - boundingRect.left;\n const y = e.clientY - boundingRect.top;\n setCirclePosition({ x, y });\n };\n\n return (\n \n
\n \n \n {data.JobStatusId === 4\n ? \"\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\" +\n data.JobStatusDesc\n : data.JobStatusId === 3\n ? \"\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\" +\n data.JobStatusDesc\n : data.JobStatusId === 0\n ? \"\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\" +\n data.JobStatusDesc\n : data.JobStatusId === 5\n ? \"\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\" +\n data.JobStatusDesc\n : data.JobStatusId === 99\n ? \"\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\\xa0\" +\n data.JobStatusDesc\n : data.JobStatusDesc}\n
\n\n {isLoading ? (\n
\n \n Hydraulic hose line mapping will transfer to the new asset model\n selected.\n
\n \n\n {isLoading ? (\n
\n \n Are you sure
you want to delete asset?\n
\n {isLoading ? (\n
\n \n Are you sure
you want to delete file?\n
\n {isLoading ? (\n
\n \n {categoryList?.map((data, index) => {\n return (\n {\n window.localStorage.setItem(\n \"defaultAssetCategory\",\n data.category\n );\n setSelectedCategory(data.category);\n }}\n >\n {data.category}\n \n );\n })}\n
\n \n {isLoading ? (\n
\n \n {assetHistory.length > 0 && (\n handleBack()}\n >\n {\n if (formData?.id > 0) {\n getMyAssetsData();\n setIsEdit(false);\n setOpenUpdateAssetHours(false);\n } else {\n setIsEdit(false);\n setSelectedId(null);\n setSelectedCard(null);\n setSelectedData(null);\n setFormData(null);\n setAssetType(\"\");\n setAssetImage(\"\");\n setAssetSearch(\"\");\n localStorage.setItem(\"selectedAssetImage\", \"\");\n setOpenUpdateAssetHours(false);\n }\n }}\n >\n Discard\n \n {\n if (formData.id > 0) {\n onUpdateAsset();\n } else {\n onSaveAsset();\n }\n }}\n >\n Save\n \n
\n \n
\n ) : (\n \n
\n )}\n \n setSearchTerm(data.value)}\n loading={searchLoading}\n value={searchTerm}\n />\n
\n \n
\n setCategoryOpen(true)}\n >\n Set Category\n \n
\n \n {userType === 4 || userType === 7 || userType === 10 ? null : (\n onNewAsset()}\n >\n Add Asset\n \n )}\n
\n \n \n
\n \n \n {searchLoading ? (\n \n Loading Assets...\n \n ) : null}\n
\n {data.length === 0 && !searchLoading ? (\n \n \n No Assets Found\n \n
\n ) : null}\n \n {assetCategories}\n
\n \n {viewRS23 ? (\n
\n\n No Schematic Available\n
\n )}\n \n setViewRS23(false)}\n >\n
\n ) : bookAPod ? (\n \n {assetHistory.length > 0 && (\n handleBack()}\n >\n {\n setBookAPod(false);\n setBookData(tempBookData);\n }}\n >\n Cancel\n \n {\n onSubmitCreateJob();\n }}\n >\n Submit Job\n \n
\n ) : formData?.id > 0 && !isEdit ? (\n \n {assetHistory.length > 0 && (\n handleBack()}\n >\n setBookAPod(true)}\n >\n Book a Job\n \n setDeleteAssetOpen(true)}\n >\n Delete\n \n setIsEdit(true)}\n >\n Edit\n \n {localStorage.getItem(\"boahubIsRS23\") === \"true\" ? (\n setViewRS23(true)}\n >\n View RS23\n \n ) : null}\n
\n ) : (\n \n {assetHistory.length > 0 && (\n handleBack()}\n >\n {\n if (formData?.id > 0) {\n getMyAssetsData();\n setIsEdit(false);\n } else {\n setIsEdit(false);\n setSelectedId(null);\n setSelectedCard(null);\n setSelectedData(null);\n setFormData(null);\n setAssetType(\"\");\n setAssetImage(\"\");\n setAssetSearch(\"\");\n localStorage.setItem(\"selectedAssetImage\", \"\");\n }\n }}\n >\n Discard\n \n {\n if (formData.id > 0) {\n if (assetLocations.length > 0) {\n if (\n selectedData.asset.assetDbId !==\n formData.assetDbId\n ) {\n setHasDTOpen(true);\n } else {\n onUpdateAsset();\n }\n } else {\n onUpdateAsset();\n }\n } else {\n onSaveAsset();\n }\n }}\n >\n Save\n \n
\n )}\n \n
\n {!bookAPod && !viewRS23 ? (\n
\n ) : (\n \n {\"(Try Test Version)\"}\n \n \n )}\n
\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n
\n \n \n
\n \n \n \n \n {imageLoading ? (\n
\n handleOpenHistory()}>\n
\n \n \n {serviceHistoriesGroup}\n
\n \n \n \n \n Connecting to Xero...\n \n
\n );\n};\n\nexport default CallbackComponent;\n","import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n Card,\n Dropdown,\n Form,\n Grid,\n Icon,\n Image,\n Input,\n Loader,\n Button,\n Header,\n Modal,\n} from \"semantic-ui-react\";\nimport \"./orderHistory.css\";\nimport {\n apiConfirmReceipt,\n apiConfirmReturn,\n apiFetchStockMove,\n apiGetDeliveryDetails,\n apiGetOrderDetails,\n apiGetOrderHistoryList,\n apiGetReturnDetails,\n} from \"./orderHistory.api\";\nimport MetaData from \"../../components/MetaData\";\nimport { useDraggable } from \"react-use-draggable-scroll\";\nimport {\n formatDateTime,\n padZero,\n sortKeysWithDatesFirstDescending,\n} from \"../../utils/utils\";\nimport { apiGetUsersListWithCurrent } from \"../MyAssets/myAssets.api\";\nimport _debounce from \"lodash/debounce\";\nimport rightArrow from \"../../../src/assets/images/right-transparent.png\";\nimport { showErrorToast, showSuccessToast } from \"../../utils/toastUtils\";\nimport Skeleton from \"react-loading-skeleton\";\nimport {\n apiGetAllStockLocationList,\n apiGetStockLocationList,\n} from \"../Settings/settings.api\";\n\nconst OrderHistoryNew = (props) => {\n const [isLoading, setIsLoading] = useState(false);\n const [searchLoading, setSearchLoading] = useState(false);\n const [dataLoading, setDataLoading] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [technicianFilter, setTechnicianFilter] = useState(\"All\");\n const [technicianFilterList, setTechnicianFilterList] = useState([]);\n const [selectedId, setSelectedId] = useState(0);\n const [firstSelectedId, setFirstSelectedId] = useState(0);\n const [technicianName, setTechnicianName] = useState(\"\");\n const [orderHistoryList, setOrderHistoryList] = useState([]);\n const [selectedCard, setSelectedCard] = useState({});\n const [selectedData, setSelectedData] = useState({});\n const [formData, setFormData] = useState({});\n const [formProducts, setFormProducts] = useState([]);\n const [isDelivery, setIsDelivery] = useState(false);\n const [isFormLoading, setIsFormLoading] = useState(false);\n const [stocklocationList, setStocklocationList] = useState([]);\n const [allStocklocationList, setAllStocklocationList] = useState([]);\n const [confirmOpen, setConfirmOpen] = useState(false);\n\n const ref = useRef();\n const { events } = useDraggable(ref);\n\n function handleChange(dataType, value) {\n let newState = [];\n newState.push(formData);\n let data = newState.map((item, i) => {\n if (i == 0) {\n if (dataType === \"stockLocationTo\") {\n const stockLocation = stocklocationList.find(\n (item) => item.id === value\n );\n item.stockLocationToName = stockLocation?.stockLocationName;\n }\n return { ...item, [dataType]: value };\n }\n return item;\n });\n\n setFormData(data[0]);\n }\n\n const onSearch = async (search, technician) => {\n setSearchLoading(true);\n const result = await apiGetOrderHistoryList(search, technician);\n if (result) {\n setSearchLoading(false);\n const groupedByDateTime = result.reduce((result, item) => {\n var key = \"\";\n const date = item.dateOrder ? new Date(item.dateOrder) : \"Unconfirmed\"; // Use ISO string to ensure consistent keys\n\n var today = new Date();\n today.setHours(0, 0, 0, 0);\n var tomorrow = new Date(today);\n tomorrow.setDate(today.getDate() + 1);\n\n if (date !== \"Unconfirmed\") {\n key = date.toLocaleDateString(\"en-GB\", {\n day: \"2-digit\",\n month: \"2-digit\",\n year: \"2-digit\",\n });\n } else {\n key = \"Unconfirmed\";\n }\n // Check if the key already exists, if not, create an empty array\n result[key] = result[key] || [];\n result[key].push(item);\n\n return result;\n }, {});\n\n const orderedKeys = Object.keys(groupedByDateTime).sort((a, b) => {\n // Define the order of keys\n const order = {\n Overdue: -3,\n Today: -2,\n Tomorrow: 1,\n Unconfirmed: 100,\n Completed: 101,\n };\n\n // Compare keys based on the order defined\n return (\n (order[a] || Number.MAX_SAFE_INTEGER) -\n (order[b] || Number.MAX_SAFE_INTEGER)\n );\n });\n\n const sortedKeys = sortKeysWithDatesFirstDescending(orderedKeys);\n\n const orderedGrouped = sortedKeys.reduce((result, key) => {\n result[key] = groupedByDateTime[key];\n return result;\n }, {});\n\n // Iterate over the keys of the object\n for (const key in orderedGrouped) {\n // Check if the key is not in the excludeKeys array\n orderedGrouped[key].sort((a, b) => {\n if (a.dateOrder === null) return 1; // Null dateOrder goes to the end\n if (b.dateOrder === null) return -1; // Null dateOrder goes to the end\n return new Date(b.dateOrder) - new Date(a.dateOrder);\n });\n }\n\n console.log(orderedGrouped);\n setOrderHistoryList(orderedGrouped);\n }\n };\n\n const getUsersList = async () => {\n const result = await apiGetUsersListWithCurrent();\n if (result) {\n const list = result.filter(\n (item, index) => result.indexOf(item) === index\n );\n const filterList = result.filter(\n (item, index) => result.indexOf(item) === index\n );\n filterList.unshift({ text: \"All\", value: \"All\" });\n setTechnicianFilterList(filterList);\n setTechnicianFilter(\"\");\n }\n };\n\n const getOrderData = async () => {\n setDataLoading(true);\n const result = await apiGetOrderDetails(selectedId);\n if (result) {\n setSelectedData(result);\n setDataLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setDataLoading(false);\n }\n };\n\n const getPickingData = async () => {\n if (isDelivery) {\n getDeliveryData();\n } else {\n getReturnData();\n }\n };\n\n const getDeliveryData = async () => {\n setFormProducts([]);\n const result = await apiGetDeliveryDetails(formData?.id);\n if (result) {\n setFormProducts(result);\n setIsFormLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsFormLoading(false);\n }\n };\n\n const getReturnData = async () => {\n setFormProducts([]);\n const result = await apiGetReturnDetails(formData?.id);\n if (result) {\n setFormProducts(result);\n setIsFormLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsFormLoading(false);\n }\n };\n\n const getStockLocationsData = async () => {\n const result = await apiGetStockLocationList();\n if (result) {\n setStocklocationList(result);\n } else {\n setStocklocationList([]);\n }\n };\n\n const getAllStockLocationsData = async () => {\n const result = await apiGetAllStockLocationList();\n if (result) {\n setAllStocklocationList(result);\n } else {\n setAllStocklocationList([]);\n }\n };\n\n const onConfirm = async () => {\n if (isDelivery) {\n onConfirmReceipt();\n } else {\n onConfirmReturn();\n }\n };\n\n const onConfirmReceipt = async () => {\n setIsLoading(true);\n const result = await apiConfirmReceipt(\n formData?.id,\n formData?.stockLocationTo\n );\n if (result) {\n showSuccessToast(\n \n Receipt in completed successfully\n
\n );\n setTimeout(function () {\n setConfirmOpen(false);\n onSearch(searchTerm, technicianFilter);\n getOrderData();\n handleChange(\"isReceiptIn\", true);\n setIsLoading(false);\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onConfirmReturn = async () => {\n setIsLoading(true);\n const result = await apiConfirmReturn(\n formData?.id,\n formData?.stockLocationFrom\n );\n if (result) {\n showSuccessToast(\n \n Return confirmed successfully\n
\n );\n setTimeout(function () {\n setConfirmOpen(false);\n onSearch(searchTerm, technicianFilter);\n getOrderData();\n handleChange(\"isConfirmed\", true);\n setIsLoading(false);\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const debouncedHandleChange = _debounce((value) => {\n onSearch(value, technicianFilter);\n setSearchTerm(value);\n }, 500);\n\n const handleSearchChange = (event) => {\n const { value } = event.target;\n\n // Call the debounced function with the input value\n debouncedHandleChange(value);\n };\n\n const addProtocolIfNeeded = (url) => {\n if (!url.startsWith(\"http://\") && !url.startsWith(\"https://\")) {\n return \"http://\" + url;\n }\n return url;\n };\n\n useEffect(() => {\n if (formData?.id) {\n if (stocklocationList.length === 0) {\n getStockLocationsData();\n getAllStockLocationsData();\n }\n setIsFormLoading(true);\n setTimeout(() => {\n getPickingData();\n }, 500);\n }\n }, [formData?.id]);\n\n useEffect(() => {\n if (technicianFilterList.length > 0) {\n onSearch(searchTerm, technicianFilter);\n var technician = technicianFilterList.find(function (element) {\n return element.value === technicianFilter;\n });\n if (technician) setTechnicianName(technician.text);\n }\n }, [technicianFilter]);\n\n useEffect(() => {\n if (selectedId !== 0) {\n getOrderData();\n } else {\n setSelectedData({});\n }\n }, [selectedCard]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n apiFetchStockMove();\n getUsersList();\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, []);\n\n const orderListGrouped = Object.entries(orderHistoryList).map(\n ([category, list], index) => (\n \n \n {\n if (selectedId !== data.id) {\n setFormProducts([]);\n setFormData({});\n setSelectedData({});\n setSelectedId(data.id);\n setSelectedCard(data);\n } else {\n setSelectedId(0);\n setFormProducts([]);\n setFormData({});\n setSelectedCard({});\n }\n }}\n style={{ cursor: \"pointer\" }}\n >\n \n \n \n \n \n {data.clientOrderRef}\n \n \n \n \n \n {formattedTime}\n
\n \n \n \n \n \n );\n })}\n \n )\n );\n\n return (\n \n \n {category}\n \n
\n {list.map((data, i) => {\n if (index === 0 && i === 0 && firstSelectedId === 0) {\n setFirstSelectedId(data.Id);\n setSelectedId(data.id);\n setSelectedCard(data);\n }\n var date = \"\";\n if (data.dateOrder !== null) {\n var dateObject = new Date(data.dateOrder);\n\n // Format the date\n var formattedDate = `${padZero(dateObject.getDate())}/${padZero(\n dateObject.getMonth() + 1\n )}/${dateObject.getFullYear().toString().slice(2)}`;\n var hours = dateObject.getHours() % 12 || 12; // Convert to 12-hour format\n var formattedTime = `${padZero(hours)}:${padZero(\n dateObject.getMinutes()\n )} ${dateObject.getHours() < 12 ? \"AM\" : \"PM\"}`;\n // Combine date and time\n date = `${formattedDate}`;\n }\n return (\n \n {isLoading ? (\n
\n \n Are you sure you want to
\n receipt these products into {formData?.stockLocationToName}?\n
\n Are you sure you want to
\n confirm this return into {formData?.stockLocationToName}?\n
\n
\n ) : (\n \n
\n )}\n \n
\n \n \n {orderListGrouped}\n
\n \n \n \n {searchLoading ? (\n \n Loading Order History...\n \n ) : null}\n
\n \n {selectedData?.orderName ? (\n \n
\n \n \n
\n \n
\n
\n {isFormLoading ? (\n
\n \n {formData?.id && formProducts.length > 0 ? (\n \n \n \n \n \n {`${\n localStorage.getItem(\"isBoahubPremium\") !== \"true\"\n ? \"\"\n : isDelivery\n ? \"Receipt In\"\n : \"Return\"\n } ${formData?.name}`}\n \n \n \n {formData?.courierTrackingNumber && (\n \n Track Shipment\n \n )}\n \n \n
\n \n\n \n \n
\n \n );\n })}\n \n {isDelivery ? (\n\n {(isDelivery && formData?.state === \"Ready\") ||\n localStorage.getItem(\"isBoahubPremium\") !==\n \"true\" ? null : (\n {\n if (!formData?.stockLocationTo) {\n showErrorToast(\"Select Stock Location\");\n } else {\n setConfirmOpen(true);\n }\n }}\n >\n {formData?.isReceiptIn\n ? \"Receipted In\"\n : \"Receipt In\"}\n \n )}\n \n ) : (\n \n {\n if (!formData?.stockLocationFrom) {\n showErrorToast(\"Select Stock Location\");\n } else {\n setConfirmOpen(true);\n }\n }}\n >\n {formData?.isConfirmed ? \"Confirmed\" : \"Confirm\"}\n \n \n )}\n \n \n \n \n ) : null}\n
\n \n \n
\n \n );\n })}\n \n {isDelivery ? (\n
\n \n
\n );\n}\n","import axios from \"axios\";\n\nexport const apiAddDTHoseLocation = async (data) => {\n const companyId = Number(localStorage.getItem(\"companyId\"));\n data.companyId = companyId;\n return axios\n .post(`/api/DigitalTwin/digital-twin-location`, data)\n .then((result) => {\n if (result && result.data) {\n return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiUpdateTHoseLocation = async (data) => {\n const assetId = Number(localStorage.getItem(\"selectedAssetId\"));\n const companyId = Number(localStorage.getItem(\"companyId\"));\n data.companyId = companyId;\n data.isDeleted = false;\n data.assetId = assetId;\n delete data.assetDetails;\n\n return axios\n .put(`/api/DigitalTwin/digital-twin-location`, data)\n .then((result) => {\n if (result && result.data) {\n return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiGetDTImages = (locationId, assetId) => {\n return axios\n .get(\n `/api/DigitalTwin/digital-twin-images?twinLocationId=${locationId}&assetId=${assetId}`\n )\n .then((result) => {\n if (result) {\n if (result.data) {\n if (result.data) {\n const sortByID = (a, b) => a.id - b.id;\n const sortedArray = result.data.sort(sortByID);\n return sortedArray;\n }\n }\n }\n return false;\n });\n};\n\nexport const apiAddHoseLocationImage = async (data, assetId, locationId) => {\n const formData = new FormData();\n\n formData.append(\"file\", data);\n return axios\n .post(\n `/api/DigitalTwin/upload-digital-twin-image?digitalTwinLocationId=${locationId}&assetId=${assetId}`,\n formData,\n {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n },\n }\n )\n .then((result) => {\n if (result && result.data) {\n return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n console.log(error);\n if (error.response.data) {\n console.log(error.response.data);\n const data = error.response.data;\n showErrorToast(data?.message);\n if (data.statusCode === 400) return false;\n if (data.statusCode === 500) return false;\n return false;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiUpdateImage = async (imageId, imageName) => {\n const data = {\n digitalTwinImages: [{ imageId: imageId, imageName: imageName }],\n };\n return axios\n .put(`/api/DigitalTwin/digital-twin-image?imageId=${imageId}`, data)\n .then((result) => {\n if (result && result.data) {\n return true;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiHoseRecognition = (data, assetId, locationId) => {\n const sessionID = localStorage.getItem(\"sessionID\");\n const companyId = Number(localStorage.getItem(\"companyId\"));\n const formData = new FormData();\n formData.append(\"token\", sessionID);\n formData.append(\"file\", data);\n\n const axiosInstance = axios.create({\n baseURL: \"https://ml.boahub.co\",\n auth: {\n username: \"boahub\",\n password: \"BOAhub@2024\",\n },\n });\n\n return axiosInstance\n .post(\n `/api/recognition/hose_end?platform=web&asset_id=${assetId}&location_id=${locationId}`,\n formData,\n {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n Authorization: `Basic ${btoa(\"boahub:BOAhub@2024\")}`,\n XAPIKey: undefined,\n },\n }\n )\n .then((result) => {\n if (result) {\n if (result.data) {\n console.log(result.data);\n result.data?.data.map((item, i) => {\n item.sequenceId = i + 1;\n item.isRemoved = false;\n });\n return result.data?.data;\n }\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n console.log(error);\n if (error.response.data) {\n console.log(error.response.data);\n const data = error.response.data;\n showErrorToast(data?.message);\n if (data.statusCode === 400) return false;\n if (data.statusCode === 500) return false;\n return false;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiGetHoseEnds = (imageId, assetId) => {\n return axios\n .get(\n `/api/DigitalTwin/hose-ends-by-image-id?imageId=${imageId}&assetId=${assetId}`\n )\n .then((result) => {\n if (result) {\n if (result.data) {\n const hoseEnds = result.data;\n hoseEnds.map((item, i) => {\n item.sequenceId = i + 1;\n item.hoseProductId = item.hoseEndBomData?.hoseProductId;\n item.hoseSku = item.hoseEndBomData?.hoseSku;\n item.hoseName = item.hoseEndBomData?.hoseName;\n item.fittingProductId = item.hoseEndBomData?.fittingProductId;\n item.fittingName = item.hoseEndBomData?.fittingName;\n item.fittingSku = item.hoseEndBomData?.fittingSku;\n item.ferruleProductId = item.hoseEndBomData?.ferruleProductId;\n item.ferruleProductName = item.hoseEndBomData?.ferruleProductName;\n item.ferruleSku = item.hoseEndBomData?.ferruleSku;\n item.oal = item.hoseEndBomData?.oAL;\n item.pairedHoseEnd = item.pairedHoseEndData?.id;\n item.pairedHoseEndAssetId =\n item.pairedHoseEndData?.pairedHoseEndAssetId;\n });\n return result.data;\n }\n }\n return false;\n });\n};\n\nexport const apiSaveHoseEnds = async (\n hoseEnds,\n assetId,\n locationId,\n imageId,\n imageName\n) => {\n let hoseEndsData = hoseEnds.filter((item) => !item.isRemoved);\n hoseEndsData.map((item, i) => {\n item.sequenceId = i + 1;\n item.assetId = Number(assetId);\n item.twinLocationId = locationId;\n item.twinImageId = imageId;\n item.bboxLeftTopX = Number(item.xmin);\n item.bboxLeftTopY = Number(item.ymin);\n item.bboxWidth = Number(item.width);\n item.bboxHeight = Number(item.height);\n });\n const data = {\n digitalTwinHoseEnds: hoseEndsData,\n imageDet: { imageId: imageId, imageName: imageName },\n };\n return axios\n .post(`/api/DigitalTwin/digital-twin-hose-end`, data)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiUpdateHoseEnds = async (\n hoseEnds,\n locationId,\n imageId,\n imageName\n) => {\n let hoseEndsData = hoseEnds.filter((item) => !item.isRemoved);\n hoseEndsData.map((item) => {\n item.twinLocationId = locationId;\n item.twinImageId = imageId;\n item.bboxLeftTopX = Number(item.xmin);\n item.bboxLeftTopY = Number(item.ymin);\n item.bboxWidth = Number(item.width);\n item.bboxHeight = Number(item.height);\n item.pairedHoseEnd = item.pairedHoseEnd ? item.pairedHoseEnd : null;\n item.pairedHoseEndAssetId = item.pairedHoseEndAssetId\n ? item.pairedHoseEndAssetId\n : null;\n delete item.hoseEndBomData;\n delete item.pairedHoseEndData;\n item.otherItems?.map((bom, i) => {\n bom.id = bom.id ? bom.id : 0;\n bom.productName = bom.stockDescription;\n bom.productSKU = bom.stockCode;\n bom.hoseEndBomId = item.hoseEndBomData?.id ? item.hoseEndBomData?.id : 0;\n delete bom.stockDescription;\n delete bom.stockCode;\n delete bom.stockImage1;\n delete bom.barcode;\n delete bom.name;\n });\n });\n const data = {\n digitalTwinHoseEnds: hoseEndsData,\n imageDet: { imageId: imageId, imageName: imageName },\n };\n return axios\n .put(`/api/DigitalTwin/digital-twin-hose-end`, data)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiDeleteHoseEnd = async (hoseEndId) => {\n return axios\n .delete(`/api/DigitalTwin/digital-twin-hose-end?hoseEndId=${hoseEndId}`)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return true;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n if (data.statusCode === 500) return false;\n return data;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiDeleteHoseLocation = async (locationId) => {\n return axios\n .delete(\n `/api/DigitalTwin/digital-twin-location?twinLocationId=${locationId}`\n )\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return true;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n if (data.statusCode === 500) return false;\n return data;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiDeleteHoseLocationImage = async (imageId) => {\n return axios\n .delete(`/api/DigitalTwin/digital-twin-image?imageId=${imageId}`)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return true;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n if (data.statusCode === 500) return false;\n return data;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Icon } from \"semantic-ui-react\";\nimport { useDropzone } from \"react-dropzone\";\nimport { showErrorToast } from \"../../utils/toastUtils\";\nimport \"./hoseMap.css\";\n\nconst activeStyle = {\n borderColor: \"#2196f3\",\n};\n\nconst acceptStyle = {\n borderColor: \"#00e676\",\n};\n\nconst rejectStyle = {\n borderColor: \"#ff1744\",\n};\n\nexport default function LocationImageUploader(props) {\n const [imagesUploaded, setImagesUploaded] = useState([]);\n const {\n acceptedFiles,\n getRootProps,\n getInputProps,\n isDragActive,\n isDragAccept,\n isDragReject,\n onDropAccepted,\n } = useDropzone({\n accept: \".jpg, .jpeg, .png\",\n onDrop: (acceptedFiles) => {\n const imageListCount = 1;\n\n if (acceptedFiles.length > imageListCount) {\n showErrorToast(\"Maximum of 1 image only\");\n } else {\n setHasUploaded(true);\n setImagesUploaded(acceptedFiles);\n }\n },\n });\n\n const [isLoading, setIsLoading] = useState(false);\n const [hasUploaded, setHasUploaded] = useState(false);\n const [image1, setImage1] = useState(null);\n const [image1Src, setImage1Src] = useState(\"\");\n\n const style = useMemo(\n () => ({\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {}),\n }),\n [isDragActive, isDragReject, isDragAccept]\n );\n\n function base64ToFile(base64, filename) {\n var arr = base64.split(\",\"),\n mime = arr[0].match(/:(.*?);/)[1],\n bstr = atob(arr[1]),\n n = bstr.length,\n u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n return new File([u8arr], filename, { type: mime });\n }\n\n async function compressBase64Image(base64String, desiredSizeInKb) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => {\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0);\n\n let quality = 1; // initial quality\n let compressedBase64 = canvas.toDataURL(\"image/jpg\", quality);\n\n resolve(compressedBase64);\n };\n img.onerror = reject;\n img.src = base64String;\n });\n }\n\n function getBase64(file, index) {\n if (typeof file === \"string\" || file instanceof String) {\n file = base64ToFile(`data:image/jpg;base64,${file}`, \"image.jpg\");\n }\n setIsLoading(true);\n var reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = function () {\n compressBase64Image(reader.result, 10).then((compressedBase64Image) => {\n var compressedBase64EncodedImage = compressedBase64Image.split(\",\")[1];\n if (index === 0) setImage1Src(compressedBase64EncodedImage);\n setImage1(\n base64ToFile(\n `data:image/jpg;base64,${compressedBase64EncodedImage}`,\n \"image.jpg\"\n )\n );\n });\n };\n reader.onerror = function (error) {\n console.log(\"Error: \", error);\n };\n setTimeout(function () {\n setIsLoading(false);\n }, 300);\n }\n\n useEffect(() => {\n if (props.bomAssembly) {\n const imageArray = [];\n if (\n props.bomAssembly.image1 !== null &&\n props.bomAssembly.image1 !== \"\" &&\n props.bomAssembly.image1 !== \"null\"\n ) {\n imageArray.push(props.bomAssembly.image1);\n }\n setImage1(props.bomAssembly.image1 ? props.bomAssembly.image1 : \"\");\n setImagesUploaded([...imagesUploaded, ...imageArray]);\n }\n }, [props.bomAssembly]);\n\n useEffect(() => {\n if (hasUploaded) {\n props.setImage(imagesUploaded[0]);\n imagesUploaded.map((file, index) => {\n getBase64(file, index);\n });\n }\n }, [JSON.stringify(imagesUploaded)]);\n\n return (\n \n
\n Drag and Drop image
\n\n
\n or
\n\n \n
\n \n \n \n \n
\n \n );\n}\n","import axios from \"axios\";\n\nexport const apiGetHosePositions = (equipmentTypeName) => {\n return axios\n .get(`/api/Jobbing/hose/positions/${equipmentTypeName}`)\n .then((result) => {\n if (result) {\n if (result.data) {\n if (result.data.positions) {\n result.data.positions.map((item) => {\n item.text = item.name;\n item.value = item.id;\n });\n return result.data;\n }\n }\n }\n return result.data;\n });\n};\n\nexport const apiGetProduct = (productName) => {\n const data = {\n SearchParam: productName ? productName : null,\n };\n return axios.get(`/api/Products/`, { params: data }).then((result) => {\n if (result) {\n if (result.data) {\n result.data.records[0].stockImage1 = result.data.records[0].image128;\n result.data.records[0].stockDescription = result.data.records[0].name;\n return result.data.records[0];\n }\n }\n return false;\n });\n};\n","export const hoseMakerTempData = {\n step1_Hose: 0,\n step1_Barcode: \"\",\n step1_Name: \"\",\n step2_LHF: 0,\n step2_Barcode: \"\",\n step2_Name: \"\",\n step3_LFerrule: 0,\n step3_Barcode: \"\",\n step3_Name: \"\",\n oAL: null,\n oalString: \"\",\n others: [],\n};\n","import React, { useEffect, useState } from \"react\";\nimport {\n Card,\n Form,\n Grid,\n Icon,\n Image,\n Input,\n Button,\n Header,\n Dimmer,\n Loader,\n} from \"semantic-ui-react\";\nimport \"./hoseMaker.css\";\nimport MetaData from \"../../components/MetaData\";\nimport rightArrow from \"../../../src/assets/images/right-transparent.png\";\nimport \"../Search/narrowFilters.css\";\nimport SearchComponent from \"../../containers/Search\";\nimport { apiGetProduct } from \"./hoseMaker.api\";\nimport NumericInputBox from \"../../components/NumericInputBox\";\nimport _ from \"lodash\";\nimport productDefaultImage from \"../../assets/images/product_default.png\";\nimport { hoseMakerTempData } from \"./data\";\nimport { showErrorToast } from \"../../utils/toastUtils\";\nimport noImageAvailable from \"../../assets/images/no_image_available.png\";\n\nconst HoseMakerDT = (props) => {\n const { currentStatus, isAssemble } = props;\n const [formData, setFormData] = useState({\n step1_Hose: 0,\n step1_Barcode: \"\",\n step1_Name: \"\",\n step2_LHF: 0,\n step2_Barcode: \"\",\n step2_Name: \"\",\n step3_LFerrule: 0,\n step3_Barcode: \"\",\n step3_Name: \"\",\n oAL: null,\n oalString: \"\",\n otherItems: [],\n });\n const [selectedHose, setSelectedHose] = useState({});\n const [selectedFitting, setSelectedFitting] = useState({});\n const [selectedFitting2, setSelectedFitting2] = useState({});\n const [selectedFerrule, setSelectedFerrule] = useState({});\n const [isLHFerrule, setIsLHFerrule] = useState(false);\n const [step, setStep] = useState(1);\n const [viewStep, setViewStep] = useState(1);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [status, setStatus] = useState(\"\");\n const [otherItemsList, setOtherItemsList] = useState([]);\n const [isLoading, setIsLoading] = React.useState(false);\n const [searchVisible, setSearchVisible] = useState(true);\n\n const onConfirmBOM = () => {\n if (props.hoseMakerIndex === null) {\n props.addBOM(formData);\n } else {\n props.addBOM(formData);\n }\n\n setFormData({});\n props.onCancelHoseMaker();\n };\n\n function handleChange(dataType, value, index = 0) {\n setIsLoading(true);\n\n let newState = [];\n newState.push(formData);\n let hoseData = newState.map((item, i) => {\n if (i == 0) {\n if (dataType === \"hose\") {\n item.step1_Hose = value.id;\n item.step1_Barcode = value.stockCode;\n item.step1_Name = value.stockDescription;\n return item;\n }\n if (dataType === \"fitting1\") {\n item.step2_LHF = value.id;\n item.step2_Barcode = value.stockCode;\n item.step2_Name = value.stockDescription;\n return item;\n }\n if (dataType === \"ferrule1\") {\n item.step3_LFerrule = value.id;\n item.step3_Barcode = value.stockCode;\n item.step3_Name = value.stockDescription;\n return item;\n }\n if (dataType === \"oAL\") {\n item.oAL = Number(value);\n item.oalString = value;\n return item;\n }\n return { ...item, [dataType]: value };\n }\n\n return item;\n });\n\n console.log(hoseData[0]);\n setFormData(hoseData[0]);\n setTimeout(function () {\n setIsLoading(false);\n }, 300);\n }\n\n async function handleBOMQuantityChange(index, value) {\n await setOtherItemsList([]);\n let newState = [];\n newState.push(formData);\n let hoseData = newState.map((item, i) => {\n if (i == 0) {\n item.otherItems[index].quantity = value;\n }\n // if (value == 0) {\n // item.otherItems.splice(index, 1);\n // }\n return item;\n });\n\n setFormData(hoseData[0]);\n setOtherItemsList(hoseData[0].otherItems);\n }\n\n const addOtherItems = async (product) => {\n setSearchVisible(false);\n setIsLoading(true);\n await setOtherItemsList([]);\n const productData = {\n productId: product.id,\n quantity: 1,\n stockCode: product.stockCode,\n stockDescription: product.stockDescription,\n productName: product.stockDescription,\n productSKU: product.stockCode,\n stockImage1: product.stockImage1,\n name: product.stockDescription,\n barcode: product.stockCode,\n };\n\n let newState = formData.otherItems;\n const existing = newState.find(\n (element) => element.productId === product.id\n );\n\n if (!existing) newState.push(productData);\n\n setOtherItemsList(newState);\n window.scrollTo(0, 0);\n setIsLoading(false);\n setTimeout(() => {\n setSearchVisible(true);\n }, 200);\n };\n\n const onHoseCheck = (hose) => {\n if (hose) {\n setSelectedHose(hose);\n if (props.hoseMakerIndex === null) {\n setStep(2);\n setViewStep(2);\n handleChange(\"hose\", hose);\n }\n }\n };\n\n const onHoseClick = (hose) => {\n if (hose) {\n setSelectedHose(hose);\n if (formData.oAL === null) setStep(2);\n setViewStep(2);\n handleChange(\"hose\", hose);\n }\n };\n\n const onFittingCheck = (fitting) => {\n if (fitting) {\n if (fitting.category.name.includes(\"(2-PC)\")) setIsLHFerrule(true);\n setSelectedFitting(fitting);\n\n if (props.hoseMakerIndex === null) {\n if (fitting.category.name.includes(\"(2-PC)\")) {\n if (\n formData?.step3_LFerrule !== null &&\n formData?.step3_LFerrule !== 0\n ) {\n setStep(4);\n setViewStep(4);\n } else {\n if (formData.oAL === null) {\n setStep(3.1);\n setViewStep(3.1);\n }\n }\n } else {\n setIsLHFerrule(false);\n setStep(4);\n setViewStep(4);\n }\n handleChange(\"fitting1\", fitting);\n }\n }\n };\n\n const onFittingClick = (fitting) => {\n if (fitting) {\n if (fitting.category.name.includes(\"(2-PC)\")) setIsLHFerrule(true);\n setSelectedFitting(fitting);\n\n if (fitting.category.name.includes(\"(2-PC)\")) {\n if (formData.oAL === null) setStep(2.1);\n setViewStep(3.1);\n } else {\n setIsLHFerrule(false);\n if (formData.oAL === null) setStep(4);\n setViewStep(4);\n }\n handleChange(\"fitting1\", fitting);\n }\n };\n\n const onFerruleClick = (ferrule) => {\n if (ferrule) {\n setSelectedFerrule(ferrule);\n if (formData.oAL === null) setStep(4);\n setViewStep(4);\n handleChange(\"ferrule1\", ferrule);\n }\n };\n\n useEffect(() => {\n if (viewStep >= 1) {\n const container = document.getElementById(\"scroll-container\");\n container.scrollTo({ top: 0, behavior: \"smooth\" });\n }\n }, [viewStep]);\n\n const getProduct = async (type, productName) => {\n if (productName === null || productName === \"\") return false;\n const product = await apiGetProduct(productName);\n if (type === \"hose\") {\n onHoseCheck(product);\n }\n if (type === \"fitting1\") {\n onFittingCheck(product);\n }\n };\n\n useEffect(() => {\n const selectedData = props.hoseMakerData;\n console.log(selectedData);\n if (\n selectedData?.hoseProductId ||\n selectedData?.fittingProductId ||\n selectedData?.oAL ||\n selectedData?.otherItems?.length > 0\n ) {\n props.hoseMakerData.oalString = props.hoseMakerData.oAL?.toString();\n\n selectedData.step1_Hose = selectedData.hoseProductId;\n selectedData.step1_Barcode = selectedData.hoseSku;\n selectedData.step1_Name = selectedData.hoseName;\n selectedData.step2_LHF = selectedData.fittingProductId;\n selectedData.step2_Barcode = selectedData.fittingSku;\n selectedData.step2_Name = selectedData.fittingName;\n selectedData.step3_LFerrule = selectedData.ferruleProductId;\n selectedData.step3_Barcode = selectedData.ferruleSku;\n selectedData.step3_Name = selectedData.ferruleProductName;\n selectedData.oalString = selectedData.oAL?.toString();\n\n console.log(selectedData);\n\n if (selectedData.otherItems !== null) {\n const otherItems = selectedData.otherItems?.map((data) => {\n data.stockCode = data.productSKU;\n data.stockDescription = data.productName;\n data.stockImage1 = data.image128\n ? data.image128\n : data.productImage\n ? data.productImage\n : null;\n return data;\n });\n\n setOtherItemsList(otherItems);\n }\n\n setViewStep(1);\n\n if (selectedData.oAL !== null) {\n getProduct(\"hose\", selectedData.step1_Barcode);\n getProduct(\"fitting1\", selectedData.step2_Barcode);\n if (selectedData.oAL) {\n setStep(4);\n }\n setFormData(selectedData);\n } else if (\n selectedData?.step3_LFerrule !== null &&\n selectedData?.step3_LFerrule !== 0\n ) {\n getProduct(\"hose\", selectedData.step1_Barcode);\n getProduct(\"fitting1\", selectedData.step2_Barcode);\n setStep(4);\n setFormData(selectedData);\n } else if (\n selectedData?.step2_LHF !== null &&\n selectedData?.step2_LHF !== 0\n ) {\n getProduct(\"hose\", selectedData.step1_Barcode);\n getProduct(\"fitting1\", selectedData.step2_Barcode);\n setStep(2);\n setFormData(selectedData);\n } else if (\n selectedData?.step1_Hose !== null &&\n selectedData?.step1_Hose !== 0\n ) {\n getProduct(\"hose\", selectedData.step1_Barcode);\n setStep(2);\n setFormData(selectedData);\n } else if (selectedData?.otherItems?.length > 0) {\n setFormData(selectedData);\n } else {\n setTimeout(function () {\n setFormData(hoseMakerTempData);\n }, 500);\n }\n } else {\n setFormData({\n step1_Hose: 0,\n step1_Barcode: \"\",\n step1_Name: \"\",\n step2_LHF: 0,\n step2_Barcode: \"\",\n step2_Name: \"\",\n step3_LFerrule: 0,\n step3_Barcode: \"\",\n step3_Name: \"\",\n oAL: null,\n oalString: \"\",\n otherItems: [],\n });\n }\n }, [props.hoseMakerData]);\n\n return (\n \n \n \n \n
\n \n \n setViewStep(2)}\n >\n \n Set hose length\n \n
\n \n
\n \n setViewStep(1)}\n >\n \n Select Hose\n \n
\n \n props.onCancelHoseMaker()}\n >\n {props.hoseMakerData.isPublic ? \"Close\" : \"Cancel\"}\n \n {!props.hoseMakerData.isPublic && (\n onConfirmBOM()}\n style={{\n display: currentStatus > 2 ? \"none\" : \"visible\",\n }}\n >\n Confirm\n \n )}\n
\n \n \n \n \n \n \n Enter Cut Length\n \n
\n \n {viewStep == 1 ? (\n \n \n \n {selectedHose.stockDescription}\n \n
\n \n 2}>\n \n \n \n
\n ) : null}\n {viewStep === 2 ? (\n \n \n 1. Select hose type and size\n \n
\n 2}>\n \n \n \n \n \n \n {selectedFitting &&\n selectedFitting.stockImage1 ? (\n
\n \n \n \n 2. Set hose length\n \n
\n 2}>\n \n \n \n \n \n \n {selectedFitting &&\n selectedFitting.stockImage1 ? (\n
\n \n \n \n 3. Select hose fitting\n \n
\n 2}>\n \n \n \n \n \n \n {selectedFitting &&\n selectedFitting.stockImage1 ? (\n
\n \n \n \n 3.1 Select ferrule\n \n
\n 2}>\n \n \n \n \n \n \n \n Other items:\n \n
\n {otherItemsList?.length > 0 ? (\n \n \n 4. Select lengths and accessories\n \n
\n \n {otherItemsList.map((data, index) => {\n if (data.quantity === 0) {\n return null;\n } else {\n return (\n \n \n \n \n \n \n \n \n handleBOMQuantityChange(\n index,\n value\n )\n }\n onKeyDownHandler={(e) => {\n if (e.key === \"Enter\")\n e.preventDefault();\n }}\n />\n \n \n \n \n \n \n
\n );\n }\n })}\n \n ) : null}\n \n \n \n \n \n \n \n {`${\n data.productSKU\n ? data.productSKU\n : data.barcode\n } - ${\n data.productName\n ? data.productName\n : data.name\n }`}\n \n \n \n \n
\n \n \n
\n \n \n \n \n 2}>\n \n \n \n \n Bill of Materials\n \n \n \n {formData && formData.step1_Hose ? (\n \n
\n \n \n Hose:\n \n
\n \n {`${formData.step1_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step1_Name}\n \n
\n ) : null}\n {formData && formData.step2_LHF ? (\n \n \n {`${formData.step1_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step1_Name}\n \n
\n \n Fitting:\n \n
\n \n {`${formData.step2_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step2_Name}\n \n
\n ) : null}\n {formData && formData.step3_LFerrule ? (\n \n \n {`${formData.step2_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step2_Name}\n \n
\n \n Ferrule:\n \n
\n \n {`${formData.step3_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step3_Name}\n \n
\n ) : null}\n {formData && formData.step4_RHF ? (\n \n \n {`${formData.step3_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step3_Name}\n \n
\n \n RH Fitting:\n \n
\n \n {`${formData.step4_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step4_Name}\n \n
\n ) : null}\n {formData && formData.step5_RFerrule ? (\n \n \n {`${formData.step4_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step4_Name}\n \n
\n \n RH Ferrule:\n \n
\n \n {`${formData.step5_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step5_Name}\n \n
\n ) : null}\n {formData && formData.oAL ? (\n \n \n {`${formData.step5_Barcode} \\xa0 x \\xa0 1`}\n \n
\n \n {formData.step5_Name}\n \n
\n \n Cut Length:\n \n
\n{`${formData.oAL}mm`}\n
\n ) : null}\n {formData && formData.orientation ? (\n \n
\n \n Orientation:\n \n
\n \n {formData.orientation}degrees\n \n
\n ) : null}\n {formData &&\n formData.otherItems &&\n formData.otherItems?.length > 0 ? (\n \n \n {formData.orientation}degrees\n \n
\n \n Other items:\n \n {formData?.otherItems?.map((data, index) => {\n return (\n
\n ) : null}\n \n \n \n {`${\n data.productSKU\n ? data.productSKU\n : data.barcode\n } \\xa0 x \\xa0 ${data.quantity}`}\n \n
\n \n {data.productName\n ? data.productName\n : data.name}\n \n
\n );\n })}\n \n \n {data.productName\n ? data.productName\n : data.name}\n \n
\n \n
\n );\n}\n","import axios from \"axios\";\n\nexport const apiAddDTHoseLocation = async (data) => {\n const companyId = Number(localStorage.getItem(\"companyId\"));\n data.companyId = companyId;\n return axios\n .post(`/api/DigitalTwin/digital-twin-location`, data)\n .then((result) => {\n if (result && result.data) {\n return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiUpdateTHoseLocation = async (data) => {\n const assetId = Number(localStorage.getItem(\"selectedAssetId\"));\n const companyId = Number(localStorage.getItem(\"companyId\"));\n data.companyId = companyId;\n data.isDeleted = false;\n data.assetId = assetId;\n data.assetDbId = data.assetDetails.assetId;\n data.equipmentTypeId = data.assetDetails.assetId;\n delete data.assetDetails;\n\n return axios\n .put(`/api/DigitalTwin/digital-twin-location`, data)\n .then((result) => {\n if (result && result.data) {\n return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiGetDTImages = (locationId, assetId) => {\n return axios\n .get(\n `/api/DigitalTwin/digital-twin-images?twinLocationId=${locationId}&assetId=${assetId}`\n )\n .then((result) => {\n if (result) {\n if (result.data) {\n if (result.data) {\n const sortByID = (a, b) => a.id - b.id;\n const sortedArray = result.data.sort(sortByID);\n return sortedArray;\n }\n }\n }\n return false;\n });\n};\n\nexport const apiAddHoseLocationImage = async (data, assetId, locationId) => {\n const formData = new FormData();\n\n formData.append(\"file\", data);\n return axios\n .post(\n `/api/DigitalTwin/upload-digital-twin-image?digitalTwinLocationId=${locationId}&assetId=${assetId}`,\n formData,\n {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n },\n }\n )\n .then((result) => {\n if (result && result.data) {\n return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n console.log(error);\n if (error.response.data) {\n console.log(error.response.data);\n const data = error.response.data;\n showErrorToast(data?.message);\n if (data.statusCode === 400) return false;\n if (data.statusCode === 500) return false;\n return false;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiUpdateImage = async (imageId, imageName) => {\n const data = {\n digitalTwinImages: [{ imageId: imageId, imageName: imageName }],\n };\n return axios\n .put(`/api/DigitalTwin/digital-twin-image?imageId=${imageId}`, data)\n .then((result) => {\n if (result && result.data) {\n return true;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiHoseRecognition = (data, assetId, locationId) => {\n const sessionID = localStorage.getItem(\"sessionID\");\n const companyId = Number(localStorage.getItem(\"companyId\"));\n const formData = new FormData();\n formData.append(\"token\", sessionID);\n formData.append(\"file\", data);\n\n const axiosInstance = axios.create({\n baseURL: \"https://ml.boahub.co\",\n auth: {\n username: \"boahub\",\n password: \"BOAhub@2024\",\n },\n });\n\n return axiosInstance\n .post(\n `/api/recognition/hose_end?platform=web&asset_id=${assetId}&location_id=${locationId}`,\n formData,\n {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n Authorization: `Basic ${btoa(\"boahub:BOAhub@2024\")}`,\n XAPIKey: undefined,\n },\n }\n )\n .then((result) => {\n if (result) {\n if (result.data) {\n console.log(result.data);\n result.data?.data.map((item, i) => {\n item.sequenceId = i + 1;\n });\n return result.data?.data;\n }\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n console.log(error);\n if (error.response.data) {\n console.log(error.response.data);\n const data = error.response.data;\n showErrorToast(data?.message);\n if (data.statusCode === 400) return false;\n if (data.statusCode === 500) return false;\n return false;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiGetHoseEnds = (imageId, assetId) => {\n return axios\n .get(\n `/api/DigitalTwin/hose-ends-by-image-id?imageId=${imageId}&assetId=${assetId}`\n )\n .then((result) => {\n if (result) {\n if (result.data) {\n return result.data;\n }\n }\n return false;\n });\n};\n\nexport const apiSaveHoseEnds = async (\n hoseEnds,\n assetId,\n locationId,\n imageId,\n imageName\n) => {\n let hoseEndsData = hoseEnds.filter((item) => !item.isRemoved);\n hoseEndsData.map((item, i) => {\n item.sequenceId = i + 1;\n item.assetId = Number(assetId);\n item.twinLocationId = locationId;\n item.twinImageId = imageId;\n item.bboxLeftTopX = Number(item.xmin);\n item.bboxLeftTopY = Number(item.ymin);\n item.bboxWidth = Number(item.width);\n item.bboxHeight = Number(item.height);\n });\n const data = {\n digitalTwinHoseEnds: hoseEndsData,\n imageDet: { imageId: imageId, imageName: imageName },\n };\n return axios\n .post(`/api/DigitalTwin/digital-twin-hose-end`, data)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiUpdateHoseEnds = async (\n hoseEnds,\n assetId,\n locationId,\n imageId,\n imageName\n) => {\n let hoseEndsData = hoseEnds.filter((item) => !item.isRemoved);\n hoseEndsData.map((item, i) => {\n item.sequenceId = i + 1;\n item.assetId = Number(assetId);\n item.twinLocationId = locationId;\n item.twinImageId = imageId;\n item.bboxLeftTopX = Number(item.xmin);\n item.bboxLeftTopY = Number(item.ymin);\n item.bboxWidth = Number(item.width);\n item.bboxHeight = Number(item.height);\n });\n const data = {\n digitalTwinHoseEnds: hoseEndsData,\n imageDet: { imageId: imageId, imageName: imageName },\n };\n return axios\n .put(`/api/DigitalTwin/digital-twin-hose-end`, data)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return result.data;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response) {\n console.log(\"Error:\", error);\n }\n });\n};\n\nexport const apiDeleteHoseLocation = async (locationId) => {\n return axios\n .delete(\n `/api/DigitalTwin/digital-twin-location?twinLocationId=${locationId}`\n )\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return true;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n if (data.statusCode === 500) return false;\n return data;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n\nexport const apiDeleteHoseLocationImage = async (imageId) => {\n return axios\n .delete(`/api/DigitalTwin/digital-twin-image?imageId=${imageId}`)\n .then((result) => {\n if (result && result.status) {\n if (result.status === 200 || result.status === 204) return true;\n }\n return false;\n })\n .catch((error) => {\n // Handle error response\n if (error.response.data) {\n const data = error.response.data;\n if (data.statusCode === 500) return false;\n return data;\n } else {\n console.log(\"Error:\", error.message);\n }\n return false;\n });\n};\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Icon } from \"semantic-ui-react\";\nimport { useDropzone } from \"react-dropzone\";\nimport { showErrorToast } from \"../../utils/toastUtils\";\nimport \"./hoseMap.css\";\n\nconst activeStyle = {\n borderColor: \"#2196f3\",\n};\n\nconst acceptStyle = {\n borderColor: \"#00e676\",\n};\n\nconst rejectStyle = {\n borderColor: \"#ff1744\",\n};\n\nexport default function LocationImageUploader(props) {\n const [imagesUploaded, setImagesUploaded] = useState([]);\n const {\n acceptedFiles,\n getRootProps,\n getInputProps,\n isDragActive,\n isDragAccept,\n isDragReject,\n onDropAccepted,\n } = useDropzone({\n accept: \".jpg, .jpeg, .png\",\n onDrop: (acceptedFiles) => {\n const imageListCount = 1;\n\n if (acceptedFiles.length > imageListCount) {\n showErrorToast(\"Maximum of 1 image only\");\n } else {\n setHasUploaded(true);\n setImagesUploaded(acceptedFiles);\n }\n },\n });\n\n const [isLoading, setIsLoading] = useState(false);\n const [hasUploaded, setHasUploaded] = useState(false);\n const [image1, setImage1] = useState(null);\n const [image1Src, setImage1Src] = useState(\"\");\n\n const style = useMemo(\n () => ({\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {}),\n }),\n [isDragActive, isDragReject, isDragAccept]\n );\n\n function base64ToFile(base64, filename) {\n var arr = base64.split(\",\"),\n mime = arr[0].match(/:(.*?);/)[1],\n bstr = atob(arr[1]),\n n = bstr.length,\n u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n return new File([u8arr], filename, { type: mime });\n }\n\n async function compressBase64Image(base64String, desiredSizeInKb) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => {\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0);\n\n let quality = 1; // initial quality\n let compressedBase64 = canvas.toDataURL(\"image/jpg\", quality);\n\n resolve(compressedBase64);\n };\n img.onerror = reject;\n img.src = base64String;\n });\n }\n\n function getBase64(file, index) {\n if (typeof file === \"string\" || file instanceof String) {\n file = base64ToFile(`data:image/jpg;base64,${file}`, \"image.jpg\");\n }\n setIsLoading(true);\n var reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = function () {\n compressBase64Image(reader.result, 10).then((compressedBase64Image) => {\n var compressedBase64EncodedImage = compressedBase64Image.split(\",\")[1];\n if (index === 0) setImage1Src(compressedBase64EncodedImage);\n setImage1(\n base64ToFile(\n `data:image/jpg;base64,${compressedBase64EncodedImage}`,\n \"image.jpg\"\n )\n );\n });\n };\n reader.onerror = function (error) {\n console.log(\"Error: \", error);\n };\n setTimeout(function () {\n setIsLoading(false);\n }, 300);\n }\n\n useEffect(() => {\n if (props.bomAssembly) {\n const imageArray = [];\n if (\n props.bomAssembly.image1 !== null &&\n props.bomAssembly.image1 !== \"\" &&\n props.bomAssembly.image1 !== \"null\"\n ) {\n imageArray.push(props.bomAssembly.image1);\n }\n setImage1(props.bomAssembly.image1 ? props.bomAssembly.image1 : \"\");\n setImagesUploaded([...imagesUploaded, ...imageArray]);\n }\n }, [props.bomAssembly]);\n\n useEffect(() => {\n if (hasUploaded) {\n props.setImage(imagesUploaded[0]);\n imagesUploaded.map((file, index) => {\n getBase64(file, index);\n });\n }\n }, [JSON.stringify(imagesUploaded)]);\n\n return (\n \n
\n Drag and Drop image
\n\n
\n or
\n\n \n
\n \n \n \n \n
\n \n );\n}\n","import React, { useEffect, useState, useRef } from \"react\";\nimport \"./hoseMap.css\";\nimport {\n Dropdown,\n Form,\n Grid,\n Image as ImageContainer,\n Input,\n Button,\n Header,\n Icon,\n Loader,\n Card,\n Modal,\n} from \"semantic-ui-react\";\nimport MetaData from \"../../components/MetaData\";\nimport rightArrow from \"../../../src/assets/images/right-transparent.png\";\nimport dtArrow from \"../../../src/assets/images/dt-arrow-edit.png\";\nimport \"react-loading-skeleton/dist/skeleton.css\";\nimport { showErrorToast, showSuccessToast } from \"../../utils/toastUtils\";\nimport emptyImage from \"../../../src/assets/images/empty.png\";\nimport {\n apiGetAsset,\n apiGetDTLocationsList,\n apiGetHosePositions,\n} from \"../MyAssets/myAssets.api\";\nimport HoseMapImageUpload from \"./imageUploader\";\nimport Draggable from \"react-draggable\";\nimport {\n apiAddDTHoseLocation,\n apiAddHoseLocationImage,\n apiDeleteHoseLocation,\n apiDeleteHoseLocationImage,\n apiGetDTImages,\n apiGetHoseEnds,\n apiHoseRecognition,\n apiSaveHoseEnds,\n apiUpdateHoseEnds,\n apiUpdateImage,\n apiUpdateTHoseLocation,\n} from \"./hoseMap.api\";\nimport LocationImageUploader from \"./locationImageUploader\";\nimport HoseMakerDT from \"../HoseMakerDT\";\nimport Collapsible from \"react-collapsible\";\nimport assetIcon from \"../../assets/images/user-type-1.svg\";\n\n// Grouping function\n\nexport function groupBy(arr, key) {\n arr.map((item) => {\n const fullDescription = item.assetDisplayName.split(\" | \");\n item.makeName = fullDescription[0] ? fullDescription[0] : \"\";\n item.equipmentTypeName = fullDescription[1] ? fullDescription[1] : \"\";\n item.model = fullDescription[2] ? fullDescription[2] : \"\";\n });\n return arr.reduce((acc, obj) => {\n const property = obj[key];\n acc[property] = acc[property] || [];\n acc[property].push(obj);\n return acc;\n }, {});\n}\n\nconst PairHoseEnd = (props) => {\n const [selectedData, setSelectedData] = useState(null);\n const [assetType, setAssetType] = useState(\"\");\n const [assetImage, setAssetImage] = useState(\"\");\n const [imageLoading, setImageLoading] = useState(false);\n const [data, setData] = useState({\n id: 0,\n locationName: \"\",\n isPublic: false,\n companyId: null,\n assetId: 231,\n assetDbId: \"fa108acb-b6fe-4dca-afab-0d71c17acb71\",\n equipmentTypeId: null,\n areaId: null,\n areaName: \"\",\n locationX: 0.5,\n locationY: 0.5,\n createdBy: null,\n lastUpdatedBy: null,\n lastUpdatedDateTime: null,\n isDeleted: false,\n deletedBy: null,\n deletedDateTime: null,\n });\n const [formData, setFormData] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n const [assetLocations, setAssetLocations] = useState([]);\n const [locationList, setLocationList] = useState([]);\n const [addHoseLocation, setAddHoseLocation] = useState(false);\n const [isSaved, setIsSaved] = useState(false);\n const [isEdit, setIsEdit] = useState(false);\n const [isPaired, setIsPaired] = useState(false);\n const [selectedId, setSelectedId] = useState(null);\n const [selectedAssetId, setSelectedAssetId] = useState(0);\n const [currentLocationId, setCurrentLocationId] = useState(0);\n const [selectedHoseLocation, setSelectedHoseLocation] = useState(null);\n const [locationImages, setLocationImages] = useState([]);\n const [selectedImage, setSelectedImage] = useState(null);\n const [imageName, setImageName] = useState(\"\");\n const [deleteOpen, setDeleteOpen] = useState(false);\n const [addedLocationId, setAddedLocationId] = useState(null);\n const [hoseEndsLoading, setHoseEndsLoading] = useState(false);\n const [selectedImageData, setSelectedImageData] = useState(null);\n const [imageFile, setImageFile] = useState(null);\n const [imageUrl, setImageUrl] = useState(null);\n const [alreadyPairedHose, setAlreadyPairedHose] = useState(null);\n\n //Draggable add hose location\n const parentSize = 350;\n const draggableSize = 5;\n const [position, setPosition] = useState({ x: 160, y: 160 });\n\n // Hose Recognition Manual Drawing\n const [canStartDrawing, setCanStartDrawing] = useState(false);\n const [isDrawing, setIsDrawing] = useState(false);\n const [startPoint, setStartPoint] = useState({ x: 0, y: 0 });\n const [endPoint, setEndPoint] = useState({ x: 0, y: 0 });\n const [drawingData, setDrawingData] = useState({\n id: 0,\n seq_id: 0,\n xmin: 0,\n ymin: 0,\n width: 0,\n height: 0,\n });\n const containerRef = useRef(null);\n const canvasRef = useRef(null);\n const imageRef = useRef(null);\n\n // Hose Recognition\n const [hoseRecognitions, setHoseRecognitions] = useState([]);\n const [selectedHoseEnd, setSelectedHoseEnd] = useState(null);\n const [loadingHoseRecognition, setLoadingHoseRecognition] = useState(false);\n const [selectedHoseEndId, setSelectedHoseEndId] = useState(null);\n const [selectedHoseEndData, setSelectedHoseEndData] = useState(null);\n\n // Hose Maker\n const [openHoseMaker, setOpenHoseMaker] = React.useState(false);\n\n // Pair Hose End\n const [openConnectedAssets, setOpenConnectedAssets] = useState(false);\n const [connectedAssets, setConnectedAssets] = useState({});\n const ref = useRef();\n\n const onConfirmPaiHoseEnd = (hoseEndId) => {\n const hoseEnd = hoseRecognitions.find((data) => data.id === hoseEndId);\n if (hoseEnd) {\n if (hoseEnd.pairedHoseEndData?.id) {\n setAlreadyPairedHose(hoseEndId);\n } else {\n props.connectHoseEnd(hoseEndId, formData.id);\n props.onCancelPairHoseEnd();\n }\n }\n };\n\n const onCancelAndDeletePaireHoseEnd = async () => {\n if (addedLocationId) {\n const result = await apiDeleteHoseLocation(addedLocationId);\n if (result) {\n setIsLoading(false);\n props.onCancelPairHoseEnd();\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } else {\n props.onCancelPairHoseEnd();\n }\n };\n\n useEffect(() => {\n if (locationImages) {\n const img = new Image();\n img.src = locationImages[0]?.imageUrl;\n getHoseEnds();\n\n img.onload = () => {\n const canvas = canvasRef.current;\n if (canvas) {\n const context = canvas.getContext(\"2d\");\n\n // Set canvas size based on the imageRef dimensions\n canvas.width = imageRef.current.width;\n canvas.height = imageRef.current.height;\n }\n };\n }\n }, [locationImages]);\n\n useEffect(() => {\n const image = locationImages[selectedImage];\n if (image) {\n getHoseEnds();\n setImageName(image.imageName ? image.imageName : \"\");\n setSelectedImageData(image);\n } else {\n setImageName(\"\");\n setSelectedImageData(null);\n }\n }, [selectedImage]);\n\n useEffect(() => {\n if (locationImages && formData?.id) {\n if (!isEdit) getHoseEndsByImage();\n }\n }, [locationImages, formData]);\n\n const handleMouseDown = (e) => {\n if (canStartDrawing) {\n const { offsetX, offsetY } = e.nativeEvent;\n\n // Store the initial mouse position\n if (offsetX !== 0 && offsetY !== 0)\n setStartPoint({ x: offsetX, y: offsetY });\n\n // Set a flag to indicate that drawing has started but not yet confirmed by mouse movement\n setIsDrawing(\"pending\");\n }\n };\n\n const handleMouseMove = (e) => {\n if (!canStartDrawing || !isDrawing) return;\n if (isDrawing === \"pending\") {\n // Drawing is pending and mouse is moving, confirm drawing\n setIsDrawing(true);\n }\n const { offsetX, offsetY } = e.nativeEvent;\n setEndPoint({ x: offsetX, y: offsetY });\n };\n\n const handleMouseUp = () => {\n if (canStartDrawing) {\n // If drawing hasn't started yet due to lack of mouse movement, cancel drawing\n if (isDrawing === \"pending\") {\n setIsDrawing(false);\n } else {\n // Drawing has started and mouse is released, end drawing\n setIsDrawing(false);\n }\n }\n };\n\n const handleMouseLeave = () => {\n if (canStartDrawing && isDrawing) {\n setIsDrawing(false);\n }\n };\n\n const handleStartDrawing = () => {\n setCanStartDrawing(true);\n };\n\n const handleCancelDrawing = () => {\n setIsDrawing(false);\n setStartPoint({ x: 0, y: 0 });\n setEndPoint({ x: 0, y: 0 });\n\n // Clear the drawing canvas\n const drawingCanvas = canvasRef.current;\n if (drawingCanvas) {\n const drawingContext = drawingCanvas.getContext(\"2d\");\n drawingContext.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);\n }\n };\n\n const handleSaveDrawing = () => {\n let hoseEnds = [];\n let seq = 1;\n hoseEnds = hoseRecognitions?.length > 0 ? hoseRecognitions : [];\n drawingData.id = 0;\n hoseEnds.push(drawingData);\n let sortedHoseEnds = hoseEnds.map((item, i) => {\n item.sequenceId = null;\n if (!item.isRemoved) {\n item.sequenceId = seq;\n item.seq_id = seq;\n seq += 1;\n }\n return item;\n });\n setHoseRecognitions(sortedHoseEnds);\n handleCancelDrawing();\n setCanStartDrawing(false);\n };\n\n const drawRectangle = () => {\n if (endPoint.x === 0 || endPoint.y === 0) return false;\n if (!startPoint || !endPoint) return false;\n const context = canvasRef.current.getContext(\"2d\");\n\n // Calculate width and height\n let width = endPoint.x - startPoint.x;\n let height = endPoint.y - startPoint.y;\n\n // Adjust start point if width or height are negative\n let startX = startPoint.x;\n let startY = startPoint.y;\n if (width < 0) {\n startX = endPoint.x;\n width = Math.abs(width);\n }\n if (height < 0) {\n startY = endPoint.y;\n height = Math.abs(height);\n }\n\n // Set canvas dimensions\n canvasRef.current.width = 354;\n canvasRef.current.height = 354;\n\n // Clear the canvas and redraw the image\n context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);\n\n // Draw the rectangle with red border and transparent background\n context.strokeStyle = \"#FFA800\";\n context.lineWidth = 3; // Adjust the border width as needed\n context.fillStyle = \"rgba(255, 0, 0, 0)\";\n context.fillRect(startX, startY, width, height);\n context.strokeRect(startX, startY, width, height);\n\n const ratioX = startX / 354;\n const ratioY = startY / 354;\n const ratioWidth = width / 354;\n const ratioHeight = height / 354;\n console.log(\"Ratio X:\", ratioX.toFixed(2), \"Ratio Y:\", ratioY.toFixed(2));\n\n const delayDebounceFn = setTimeout(() => {\n const drawingRectangleData = {\n id: 0,\n xmin: ratioX.toFixed(2),\n ymin: ratioY.toFixed(2),\n width: ratioWidth.toFixed(2),\n height: ratioHeight.toFixed(2),\n isRemoved: false,\n };\n setDrawingData(drawingRectangleData);\n }, 300);\n\n return () => clearTimeout(delayDebounceFn);\n };\n\n // Hose Recognition Drawing End\n\n const handleDrag = (e, ui) => {\n const { x, y } = ui;\n const ratioX = x / (parentSize - draggableSize);\n const ratioY = y / (parentSize - draggableSize);\n setPosition({ x, y });\n handleChange(\"location\", ui);\n };\n\n function handleChange(dataType, value) {\n let newState = [];\n newState.push(data);\n let hoseData = newState.map((item, i) => {\n if (i == 0) {\n if (dataType === \"areaId\") {\n item.areaName = getPositionName(value);\n }\n if (dataType === \"location\") {\n const ratioX = value.x / (parentSize - draggableSize);\n const ratioY = value.y / (parentSize - draggableSize);\n item.locationX = Number(ratioX.toFixed(2));\n item.locationY = Number(ratioY.toFixed(2));\n return item;\n }\n return { ...item, [dataType]: value };\n }\n\n return item;\n });\n\n console.log(hoseData[0]);\n setData(hoseData[0]);\n }\n\n function handleHoseEndChange(dataType, value, index) {\n let newState = hoseRecognitions;\n let seq = 1;\n let data = newState.map((item, i) => {\n if (i === index) {\n return { ...item, [dataType]: value };\n }\n return item;\n });\n let sortedData = data.map((item, i) => {\n item.sequenceId = null;\n if (!item.isRemoved) {\n item.sequenceId = seq;\n seq += 1;\n }\n return item;\n });\n console.log(sortedData);\n setHoseRecognitions(sortedData);\n }\n\n // Hose Maker Functions\n\n const onCancelHoseMaker = () => {\n setOpenHoseMaker(false);\n };\n\n const addBOM = (bomDetails) => {\n let newState = [];\n newState = hoseRecognitions;\n let bomData = newState.map((item, i) => {\n if (i === selectedHoseEnd) {\n item.hoseProductId = bomDetails.step1_Hose;\n item.hoseSku = bomDetails.step1_Barcode;\n item.hoseName = bomDetails.step1_Name;\n item.fittingProductId = bomDetails.step2_LHF;\n item.fittingSku = bomDetails.step2_Barcode;\n item.fittingName = bomDetails.step2_Name;\n item.ferruleProductId = bomDetails.step3_LFerrule;\n item.ferruleSku = bomDetails.step3_Barcode;\n item.ferruleProductName = bomDetails.step3_Name;\n item.otherItems =\n bomDetails.otherItems?.length > 0 ? bomDetails.otherItems : null;\n item.oal = bomDetails.oAL;\n return item;\n }\n return item;\n });\n\n setHoseRecognitions(bomData);\n setTimeout(function () {\n onUpdateHoseAssembly();\n }, 1000);\n };\n\n const updateBOM = (bomDetails, index) => {\n let newState = [];\n newState.push(data);\n let jobData = newState.map((item, i) => {\n return item;\n });\n\n jobData[0].hoseMaker.map((item, i) => {\n if (index === i) {\n jobData[0].hoseMaker[i] = bomDetails;\n }\n });\n\n console.log(jobData[0]);\n setFormData(jobData[0]);\n };\n\n const getMyAssetsData = async (assetId) => {\n setIsLoading(true);\n const result = await apiGetAsset(assetId);\n if (result) {\n setFormData(result);\n // Grouping by the \"\" field\n const groupedData = groupBy(\n result.asset?.connectedAssets,\n \"equipmentTypeName\"\n );\n setConnectedAssets(groupedData);\n setSelectedData(result);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const getDTLocationsData = async () => {\n if (!formData.assetDbId) return false;\n setIsLoading(true);\n const result = await apiGetDTLocationsList(formData.id, formData.assetDbId);\n if (result) {\n if (selectedId)\n result.map((location) => {\n if (selectedId === location.id) setData(location);\n });\n setAssetLocations(result);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const getHosePositions = async () => {\n setAssetImage(\"\");\n const assetIdData = localStorage.getItem(\"selectedAssetId\");\n if (selectedAssetId === assetIdData) {\n const assetImageData = localStorage.getItem(\"selectedAssetImage\");\n setAssetImage(assetImageData);\n } else {\n setImageLoading(true);\n }\n const hosePositions = await apiGetHosePositions(assetType);\n if (hosePositions) {\n setAssetImage(hosePositions.url);\n setLocationList(hosePositions.positions);\n setImageLoading(false);\n } else {\n setAssetImage(\"\");\n setImageLoading(false);\n }\n };\n\n const getHoseEnds = async (dtImages = []) => {\n const imageId =\n dtImages.length > 0\n ? dtImages[selectedImage]?.id\n : locationImages[selectedImage]?.id;\n if (!imageId) return false;\n if (!formData.id) return false;\n setHoseRecognitions([]);\n setHoseEndsLoading(true);\n const hoseEnds = await apiGetHoseEnds(imageId, formData.id);\n if (hoseEnds) {\n if (Array.isArray(hoseEnds)) {\n hoseEnds.map((item, i) => {\n item.xmin = item.bboxLeftTopX;\n item.ymin = item.bboxLeftTopY;\n item.width = item.bboxWidth;\n item.height = item.bboxHeight;\n item.hoseEndBomData.otherItems = item.otherItems;\n item.isRemoved = false;\n });\n setHoseRecognitions(hoseEnds);\n setHoseEndsLoading(false);\n } else {\n hoseEnds.xmin = hoseEnds.bboxLeftTopX;\n hoseEnds.ymin = hoseEnds.bboxLeftTopY;\n hoseEnds.width = hoseEnds.bboxWidth;\n hoseEnds.height = hoseEnds.bboxHeight;\n setHoseRecognitions([hoseEnds]);\n setHoseEndsLoading(false);\n }\n } else {\n setHoseEndsLoading(false);\n }\n };\n\n const getPositionImage = (id) => {\n if (locationList.length > 0) {\n let position = {};\n position = locationList.find((location) => location.id === id);\n if (position) {\n return position.url ? position.url.replace(/ /g, \"%20\") : assetImage;\n }\n }\n return assetImage;\n };\n\n const getPositionName = (id) => {\n if (locationList.length > 0) {\n let position = {};\n position = locationList.find((location) => location.id === id);\n if (position) {\n return position.name ? position.name : \"\";\n }\n }\n return \"\";\n };\n\n const onSaveHoseLocation = async () => {\n if (data.areaId === null || data.locationName === \"\") {\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n setIsLoading(true);\n try {\n let result = null;\n if (data.id === 0) {\n result = await apiAddDTHoseLocation(data);\n } else {\n result = await apiUpdateTHoseLocation(data);\n }\n\n if (result) {\n setSelectedId(result.id);\n setSelectedImage(0);\n if (data.id === 0) {\n setIsSaved(true);\n setAddedLocationId(result.id);\n } else {\n setAddHoseLocation(false);\n }\n if (selectedAssetId != null) {\n getDTLocationsData();\n }\n showSuccessToast(\n \n Hose Location Saved Successfully\n
\n );\n setIsLoading(false);\n setData(result);\n } else {\n setIsLoading(false);\n }\n } catch (e) {\n setIsLoading(false);\n }\n };\n\n const onConfirmHoseEnd = async () => {\n handleCancelDrawing();\n setCanStartDrawing(false);\n if (isSaved) {\n await onSaveHoseEnds();\n } else {\n await onUpdateHoseEnds();\n }\n\n // await onSaveImage();\n };\n\n const onDeleteDT = async () => {\n setIsLoading(true);\n const imageId = locationImages[selectedImage]?.id;\n try {\n let result = null;\n if (locationImages.length > 1) {\n result = await apiDeleteHoseLocationImage(imageId);\n } else {\n result = await apiDeleteHoseLocation(selectedId);\n }\n if (result) {\n if (locationImages.length > 1) {\n getDTImages();\n showSuccessToast(\n \n Image Deleted Successfully\n
\n );\n setSelectedImage(0);\n } else {\n getDTLocationsData(selectedAssetId);\n const companyId = Number(localStorage.getItem(\"companyId\"));\n const newData = {\n id: 0,\n locationName: \"\",\n isPublic: false,\n companyId: companyId,\n assetId: selectedData.asset.id,\n assetDbId: selectedData.asset.assetDbId,\n equipmentTypeId: null,\n areaId: null,\n areaName: \"\",\n locationX: 0.5,\n locationY: 0.5,\n createdBy: null,\n lastUpdatedBy: null,\n lastUpdatedDateTime: null,\n isDeleted: false,\n deletedBy: null,\n deletedDateTime: null,\n };\n setData(newData);\n setSelectedId(0);\n setSelectedImage(0);\n showSuccessToast(\n \n Location Deleted Successfully\n
\n );\n }\n setIsLoading(false);\n setDeleteOpen(false);\n } else {\n setIsLoading(false);\n }\n } catch (e) {\n setIsLoading(false);\n }\n };\n\n const onSaveHoseEnds = async () => {\n setIsLoading(true);\n try {\n const imageResult = await apiAddHoseLocationImage(\n imageFile,\n formData.id,\n selectedId\n );\n if (imageResult) {\n const result = await apiSaveHoseEnds(\n hoseRecognitions,\n formData.id,\n selectedId,\n imageResult.id,\n imageName\n );\n if (result) {\n getDTLocationsData(selectedAssetId);\n setTimeout(function () {\n getLatestDTImages();\n showSuccessToast(\n \n Image and Hose Ends Confirmed\n Successfully\n
\n );\n setIsEdit(false);\n setIsSaved(false);\n setIsLoading(false);\n }, 1000);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch (e) {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onUpdateHoseEnds = async () => {\n setIsLoading(true);\n const imageId = locationImages[selectedImage]?.id;\n if (!imageId) return false;\n try {\n const result = await apiUpdateHoseEnds(\n hoseRecognitions,\n selectedId,\n imageId,\n imageName\n );\n if (result) {\n getHoseEnds();\n setIsEdit(false);\n showSuccessToast(\n \n Hose End Confirmed Successfully\n
\n );\n setIsSaved(false);\n setIsLoading(false);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch (e) {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onUpdateHoseAssembly = async () => {\n setIsLoading(true);\n const imageId = locationImages[selectedImage]?.id;\n if (!imageId) return false;\n try {\n const result = await apiUpdateHoseEnds(\n hoseRecognitions,\n selectedId,\n imageId,\n imageName\n );\n if (result) {\n getHoseEnds();\n setIsEdit(false);\n showSuccessToast(\n \n Hose Assembly saved successfully\n
\n );\n setIsSaved(false);\n setIsLoading(false);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch (e) {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const getHoseEndsByImage = async () => {\n if (!props.pairedHoseEnd?.twinImageId) {\n setSelectedImage(0);\n return false;\n }\n if (locationImages) {\n locationImages.map((dtImage, index) => {\n if (props.pairedHoseEnd?.twinImageId === dtImage.id) {\n setSelectedImageData(dtImage);\n setSelectedImage(index);\n }\n });\n } else {\n setSelectedImage(0);\n return false;\n }\n };\n\n const getDTImages = async () => {\n if (!formData.id) return false;\n setIsLoading(true);\n setHoseRecognitions([]);\n const dtImages = await apiGetDTImages(selectedId, formData.id);\n if (dtImages) {\n setLocationImages(dtImages);\n const img = new Image();\n img.src = dtImages[0]?.imageUrl;\n\n img.onload = () => {\n const canvas = canvasRef.current;\n if (canvas) {\n const context = canvas.getContext(\"2d\");\n\n // Set canvas size based on the imageRef dimensions\n canvas.width = imageRef.current.width;\n canvas.height = imageRef.current.height;\n }\n };\n getHoseEnds(dtImages);\n if (selectedImage !== 0) {\n const image = dtImages[selectedImage];\n if (image) {\n setImageName(image.imageName ? image.imageName : \"\");\n setSelectedImageData(image);\n } else {\n setSelectedImageData(null);\n }\n } else {\n setImageName(dtImages[0]?.imageName);\n setSelectedImageData(dtImages[0]);\n }\n setIsLoading(false);\n } else {\n setLocationImages([]);\n setIsLoading(false);\n }\n };\n\n const getLatestDTImages = async () => {\n if (!formData.id) return false;\n const dtImages = await apiGetDTImages(selectedId, formData.id);\n if (dtImages) {\n setLocationImages(dtImages);\n setImageName(dtImages[dtImages.length - 1]?.imageName);\n setSelectedImage(dtImages.length - 1);\n setSelectedImageData(dtImages[dtImages.length - 1]);\n setImageFile(null);\n setImageUrl(null);\n }\n };\n\n const addLocationImage = async (file) => {\n if (file) {\n if (file.size >= 25000000) {\n showErrorToast(\"File size cannot exceed 25MB.\");\n setIsLoading(false);\n }\n hoseRecognitionData(file);\n setAddHoseLocation(false);\n setIsEdit(true);\n setIsSaved(true);\n setImageFile(file);\n setImageName(\"\");\n const reader = new FileReader();\n reader.onloadend = () => {\n setImageUrl(reader.result);\n };\n reader.readAsDataURL(file);\n }\n };\n\n const hoseRecognitionData = async (file) => {\n if (file) {\n setHoseRecognitions([]);\n setIsLoading(true);\n setLoadingHoseRecognition(true);\n try {\n const result = await apiHoseRecognition(\n file,\n selectedAssetId,\n selectedId\n );\n if (result) {\n setLoadingHoseRecognition(false);\n if (result.length === 0) {\n setHoseRecognitions([]);\n showErrorToast(\"No hose end identified\");\n setIsLoading(false);\n return false;\n }\n setHoseRecognitions(result);\n setIsLoading(false);\n } else {\n setHoseRecognitions([]);\n setLoadingHoseRecognition(false);\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"No hose end identified\");\n setLoadingHoseRecognition(false);\n setIsLoading(false);\n setHoseRecognitions([]);\n }\n }\n };\n\n const addNewHoseLocation = () => {\n const companyId = Number(localStorage.getItem(\"companyId\"));\n const newData = {\n id: 0,\n locationName: \"\",\n isPublic: false,\n companyId: companyId,\n assetId: selectedAssetId,\n assetDbId: formData.assetDbId,\n equipmentTypeId: null,\n areaId: null,\n areaName: \"\",\n locationX: 0.5,\n locationY: 0.5,\n createdBy: null,\n lastUpdatedBy: null,\n lastUpdatedDateTime: null,\n isDeleted: false,\n deletedBy: null,\n deletedDateTime: null,\n };\n setData(newData);\n };\n\n useEffect(() => {\n if (props.pairedHoseEnd?.assetId) {\n getMyAssetsData(props.pairedHoseEnd?.assetId);\n } else {\n getMyAssetsData(props.assetData?.id);\n }\n }, [props.assetData, props.pairedHoseEnd]);\n\n useEffect(() => {\n if (selectedId !== 0 && selectedId !== null) {\n setIsEdit(false);\n getDTImages();\n }\n }, [selectedId]);\n\n useEffect(() => {\n if (\n props.pairedHoseEnd?.twinLocationId &&\n props.assetData.id &&\n formData?.id\n ) {\n setIsEdit(false);\n setIsSaved(false);\n setIsPaired(true);\n }\n }, [props.pairedHoseEnd, props.assetData, formData]);\n\n useEffect(() => {\n if (isPaired && selectedId === null) {\n setSelectedId(props.pairedHoseEnd?.twinLocationId);\n }\n }, [isPaired, selectedId]);\n\n useEffect(() => {\n let assetIdData = 0;\n if (props.pairedHoseEnd?.assetId) {\n assetIdData = props.pairedHoseEnd?.assetId;\n } else {\n assetIdData = localStorage.getItem(\"selectedAssetId\");\n }\n setSelectedAssetId(assetIdData);\n setCurrentLocationId(props.currentLocationId);\n }, []);\n\n useEffect(() => {\n if (selectedAssetId) {\n getMyAssetsData(selectedAssetId);\n }\n }, [selectedAssetId]);\n\n useEffect(() => {\n if (formData) {\n let assetIdData = 0;\n if (props.pairedHoseEnd?.assetId) {\n assetIdData = props.pairedHoseEnd?.assetId;\n } else {\n assetIdData = localStorage.getItem(\"selectedAssetId\");\n }\n getDTLocationsData(assetIdData);\n }\n }, [formData]);\n\n useEffect(() => {\n if (assetType) {\n getHosePositions();\n }\n }, [assetType]);\n\n useEffect(() => {\n if (selectedData) {\n if (assetType !== selectedData.assetDetails.equipmentTypeName) {\n if (\n selectedData.assetDetails.equipmentTypeName === null ||\n selectedData.assetDetails.equipmentTypeName === \"\"\n ) {\n setAssetImage(\"\");\n setAssetType(\"\");\n } else {\n setAssetType(\n selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\"\n );\n }\n }\n if (\n selectedData.assetDetails?.otherAssetDetails !== null &&\n selectedData.assetDetails?.otherAssetDetails !== \"\"\n ) {\n const fullDescription =\n selectedData.assetDetails.otherAssetDetails.split(\" | \");\n selectedData.makeName = fullDescription[0] ? fullDescription[0] : \"\";\n selectedData.equipmentTypeName = fullDescription[1]\n ? fullDescription[1]\n : \"\";\n selectedData.model = fullDescription[2] ? fullDescription[2] : \"\";\n selectedData.assetDetails.makeName = fullDescription[0]\n ? fullDescription[0]\n : \"\";\n selectedData.assetDetails.equipmentTypeName = fullDescription[1]\n ? fullDescription[1]\n : \"\";\n selectedData.assetDetails.model = fullDescription[2]\n ? fullDescription[2]\n : \"\";\n selectedData.makeId = 0;\n } else {\n selectedData.makeName = selectedData.assetDetails?.makeName;\n selectedData.equipmentTypeName =\n selectedData.assetDetails?.equipmentTypeName;\n selectedData.model = selectedData.assetDetails?.model;\n selectedData.equipmentTypeId =\n selectedData.assetDetails?.equipmentTypeId;\n selectedData.makeId = selectedData.assetDetails?.makeId;\n }\n const companyId = Number(localStorage.getItem(\"companyId\"));\n const newData = {\n id: 0,\n locationName: \"\",\n isPublic: false,\n companyId: companyId,\n assetId: selectedData.asset.id,\n assetDbId: selectedData.asset.assetDbId,\n equipmentTypeId: null,\n areaId: null,\n areaName: \"\",\n locationX: 0.5,\n locationY: 0.5,\n createdBy: null,\n lastUpdatedBy: null,\n lastUpdatedDateTime: null,\n isDeleted: false,\n deletedBy: null,\n deletedDateTime: null,\n };\n setData(newData);\n const selectedFormData = {\n id: selectedData.asset.id,\n assetId: selectedData.asset.assetId,\n assetSerialNumber: selectedData.asset.assetSerialNumber,\n year: selectedData.asset.year,\n industry: selectedData.asset.industry,\n assetLocationId: selectedData.asset.assetLocationId,\n assetImageUrl: selectedData.asset.assetImageUrl,\n operator: selectedData.asset.operator,\n nonBoaServiceParts: selectedData.asset.nonBoaServiceParts,\n parentId: selectedData.asset.parentId,\n assetDbId: selectedData.asset.assetDbId,\n otherAssetDetails: selectedData.assetDetails.otherAssetDetails,\n makeName: selectedData.assetDetails.makeName\n ? selectedData.assetDetails.makeName\n : \"\",\n equipmentTypeName: selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\",\n model: selectedData.assetDetails.model\n ? selectedData.assetDetails.model\n : \"\",\n assetPropUnit: selectedData.assetDetails.assetPropUnit,\n assetPropValue: selectedData.assetDetails.assetPropValue,\n equipmentTypeId: selectedData.equipmentTypeId,\n makeId: selectedData.makeId,\n };\n setFormData(selectedFormData);\n }\n }, [selectedData]);\n\n const assetCategories = Object.entries(connectedAssets).map(\n ([category, assets], index) => (\n \n {isLoading ? (\n
\n \n This hose end is already paired,\n
\n are you sure you want to overwrite this pairing?\n
\n {props.pairedHoseEnd?.id ? \"Paired\" : \"Pair\"} Hose End\n
\n\n onCancelAndDeletePaireHoseEnd()}\n style={{ width: \"100%\" }}\n >\n Close\n \n
\n \n {imageLoading ? (\n
\n \n
\n \n \n \n Select red dot that hose
connects to\n \n
\n connects to\n \n
\n
\n )}\n \n \n {openConnectedAssets ? (\n
\n\n {openConnectedAssets ? (\n
\n \n \n ) : (\n \n )}\n \n setOpenConnectedAssets(false)}\n >\n Cancel\n \n
\n ) : addHoseLocation ? (\n \n onSaveHoseLocation()}\n >\n {isSaved ? \"Confirmed\" : \"Confirm\"}\n \n {!isSaved ? (\n setAddHoseLocation(false)}\n >\n Cancel\n \n ) : null}\n
\n ) : data?.id > 0 && imageUrl && isSaved ? (\n \n onConfirmHoseEnd()}\n >\n Confirm\n \n {\n setImageUrl(null);\n setImageFile(null);\n setHoseRecognitions([]);\n setIsEdit(false);\n setIsSaved(false);\n }}\n >\n Cancel\n \n
\n ) : data?.id > 0 && isEdit ? (\n \n {\n getDTImages();\n getHoseEnds();\n setTimeout(function () {\n setIsEdit(false);\n setCanStartDrawing(false);\n handleCancelDrawing();\n }, 500);\n }}\n >\n Cancel\n \n onConfirmHoseEnd()}\n >\n Confirm\n \n
\n ) : selectedAssetId?.toString() !==\n localStorage.getItem(\"selectedAssetId\") ? (\n \n {\n setSelectedId(0);\n const assetIdData =\n localStorage.getItem(\"selectedAssetId\");\n setSelectedAssetId(assetIdData);\n setAddHoseLocation(false);\n setIsSaved(false);\n setLocationImages([]);\n setSelectedImage(0);\n }}\n >\n Back to Primary Asset\n \n {!isPaired && props.pairedHoseEnd?.id ? (\n <>\n {\n addNewHoseLocation();\n setLocationImages([]);\n setTimeout(function () {\n setIsPaired(true);\n }, 500);\n }}\n >\n Cancel\n \n {\n setSelectedHoseEnd(null);\n setSelectedHoseEndData(null);\n setSelectedHoseEndId(null);\n setIsEdit(true);\n }}\n >\n Edit Hose Ends\n \n \n ) : null}\n {isPaired && (\n <>\n {props.selectedHoseEndData?.isPublic &&\n props.pairedHoseEnd?.isPairPublic ? null : (\n setIsPaired(false)}\n >\n Change paired hose end\n \n )}\n \n )}\n
\n ) : isPaired ? (\n \n <>\n {props.selectedHoseEndData?.isPublic &&\n props.pairedHoseEnd?.isPairPublic ? null : (\n setIsPaired(false)}\n >\n Change paired hose end\n \n )}\n \n
\n ) : !isPaired && props.pairedHoseEnd?.id ? (\n \n setIsPaired(true)}\n >\n Cancel\n \n {\n setSelectedHoseEnd(null);\n setSelectedHoseEndData(null);\n setSelectedHoseEndId(null);\n setIsEdit(true);\n }}\n >\n Edit Hose Ends\n \n
\n ) : data?.id > 0 && locationImages.length > 0 ? (\n \n {\n setSelectedHoseEnd(null);\n setSelectedHoseEndData(null);\n setSelectedHoseEndId(null);\n setIsEdit(true);\n }}\n >\n Edit Hose Ends\n \n
\n ) : (\n \n )}\n \n
\n
\n ) : addHoseLocation ? (\n \n {connectedAssets ? assetCategories : null}\n
\n \n Hose Location Saved Successfully\n
\n );\n setIsLoading(false);\n } else {\n setIsLoading(false);\n }\n } catch (e) {\n console.log(e);\n setIsLoading(false);\n }\n };\n\n const onConfirmHoseEnd = async () => {\n handleCancelDrawing();\n setCanStartDrawing(false);\n if (isSaved) {\n await onSaveHoseEnds();\n } else {\n await onUpdateHoseEnds(hoseRecognitions);\n }\n\n // await onSaveImage();\n };\n\n const onDeleteDTImage = async () => {\n setIsLoading(true);\n const imageId = locationImages[selectedImage]?.id;\n try {\n const result = await apiDeleteHoseLocationImage(imageId);\n if (result) {\n const assetId = localStorage.getItem(\"selectedAssetId\");\n getDTLocationsData(assetId);\n getDTImages();\n showSuccessToast(\n \n Image Deleted Successfully\n
\n );\n setSelectedImage(0);\n setIsLoading(false);\n setDeleteOpen(false);\n setDeleteOpenLocation(false);\n } else {\n setIsLoading(false);\n }\n } catch (e) {\n setIsLoading(false);\n }\n };\n\n const onDeleteDTLocation = async () => {\n setIsLoading(true);\n const imageId = locationImages[selectedImage]?.id;\n try {\n const result = await apiDeleteHoseLocation(selectedId);\n if (result) {\n const assetId = localStorage.getItem(\"selectedAssetId\");\n getDTLocationsData(assetId);\n const companyId = Number(localStorage.getItem(\"companyId\"));\n const newData = {\n id: 0,\n locationName: \"\",\n isPublic: false,\n companyId: companyId,\n assetId: selectedData.asset.id,\n assetDbId: selectedData.asset.assetDbId,\n equipmentTypeId: null,\n areaId: null,\n areaName: \"\",\n locationX: 0.5,\n locationY: 0.5,\n createdBy: null,\n lastUpdatedBy: null,\n lastUpdatedDateTime: null,\n isDeleted: false,\n deletedBy: null,\n deletedDateTime: null,\n };\n setData(newData);\n setSelectedId(0);\n setSelectedImage(0);\n showSuccessToast(\n \n Location Deleted Successfully\n
\n );\n setIsLoading(false);\n setDeleteOpen(false);\n setDeleteOpenLocation(false);\n } else {\n setIsLoading(false);\n }\n } catch (e) {\n setIsLoading(false);\n }\n };\n\n const onSaveHoseEnds = async () => {\n setIsLoading(true);\n const assetId = localStorage.getItem(\"selectedAssetId\");\n try {\n const imageResult = await apiAddHoseLocationImage(\n imageFile,\n assetId,\n selectedId\n );\n if (imageResult) {\n const result = await apiSaveHoseEnds(\n hoseRecognitions,\n assetId,\n selectedId,\n imageResult.id,\n imageName\n );\n if (result) {\n const selectedId = localStorage.getItem(\"selectedAssetId\");\n if (selectedId != null) {\n getDTLocationsData(selectedId);\n }\n setTimeout(function () {\n getLatestDTImages();\n showSuccessToast(\n \n Image and Hose Ends Confirmed\n Successfully\n
\n );\n setIsEdit(false);\n setIsSaved(false);\n setIsLoading(false);\n }, 1000);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch (e) {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onDeleteHoseEnds = async (hoseEnd) => {\n try {\n const response = await apiDeleteHoseEnd(hoseEnd.id);\n if (response) {\n return true;\n }\n } catch (error) {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onUpdateHoseEnds = async (hoseEndsData = []) => {\n setIsLoading(true);\n const imageId = locationImages[selectedImage]?.id;\n if (!imageId) return false;\n try {\n let removedHoseEnds = hoseEndsData.filter((item) => item.isRemoved);\n const deleteHoseEnds = removedHoseEnds.map((item) =>\n onDeleteHoseEnds(item)\n );\n let hoseEndsPayload = hoseEndsData.filter((item) => !item.isRemoved);\n hoseEndsPayload.map((item, i) => {\n item.sequenceId = i + 1;\n });\n await Promise.all(deleteHoseEnds);\n setTimeout(\n async function () {\n const result = await apiUpdateHoseEnds(\n hoseEndsPayload,\n selectedId,\n imageId,\n imageName\n );\n if (result) {\n const selectedId = localStorage.getItem(\"selectedAssetId\");\n if (selectedId != null) {\n getDTLocationsData(selectedId);\n }\n getDTImages();\n getHoseEnds();\n setIsEdit(false);\n showSuccessToast(\n \n Image and Hose Ends Updated\n Successfully\n
\n );\n setIsSaved(false);\n setIsLoading(false);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n },\n removedHoseEnds > 0 ? 2000 : 500\n );\n } catch (e) {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onUpdateHoseAssembly = async () => {\n setIsLoading(true);\n const assetId = localStorage.getItem(\"selectedAssetId\");\n const imageId = locationImages[selectedImage]?.id;\n if (!imageId) return false;\n try {\n const result = await apiUpdateHoseEnds(\n hoseRecognitions,\n selectedId,\n imageId,\n imageName\n );\n if (result) {\n if (assetId != null) {\n getDTLocationsData(assetId);\n }\n getHoseEnds();\n setIsEdit(false);\n showSuccessToast(\n \n Hose Assembly saved successfully\n
\n );\n setIsSaved(false);\n setIsLoading(false);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch (e) {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onUpdatePairHoseEnd = async (hoseEndData = []) => {\n setIsLoading(true);\n const imageId = locationImages[selectedImage]?.id;\n if (!imageId) return false;\n try {\n const result = await apiUpdateHoseEnds(\n hoseEndData,\n selectedId,\n imageId,\n imageName\n );\n if (result) {\n const selectedId = localStorage.getItem(\"selectedAssetId\");\n if (selectedId != null) {\n getDTLocationsData(selectedId);\n }\n getDTImages();\n setIsEdit(false);\n showSuccessToast(\n \n Hose End paired successfully\n
\n );\n setIsSaved(false);\n setIsLoading(false);\n } else {\n getDTImages();\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n } catch (e) {\n getDTImages();\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const getDTImages = async () => {\n if (!formData.id) return false;\n setIsLoading(true);\n const dtImages = await apiGetDTImages(selectedId, formData.id);\n if (dtImages) {\n setLocationImages(dtImages);\n const img = new Image();\n img.src = dtImages[0]?.imageUrl;\n\n img.onload = () => {\n const canvas = canvasRef.current;\n if (canvas) {\n const context = canvas.getContext(\"2d\");\n\n // Set canvas size based on the imageRef dimensions\n canvas.width = imageRef.current.width;\n canvas.height = imageRef.current.height;\n }\n };\n getHoseEnds(dtImages);\n if (selectedImage !== 0) {\n const image = dtImages[selectedImage];\n if (image) {\n setImageName(image.imageName ? image.imageName : \"\");\n setSelectedImageData(image);\n } else {\n setSelectedImageData(null);\n }\n } else {\n setImageName(dtImages[0]?.imageName);\n setSelectedImageData(dtImages[0]);\n }\n setIsLoading(false);\n } else {\n setLocationImages([]);\n setIsLoading(false);\n }\n };\n\n const getLatestDTImages = async () => {\n if (!formData.id) return false;\n const dtImages = await apiGetDTImages(selectedId, formData.id);\n if (dtImages) {\n setLocationImages(dtImages);\n setImageName(dtImages[dtImages.length - 1]?.imageName);\n setSelectedImage(dtImages.length - 1);\n setSelectedImageData(dtImages[dtImages.length - 1]);\n setImageFile(null);\n setImageUrl(null);\n getHoseEnds(dtImages);\n }\n };\n\n const addLocationImage = async (file) => {\n if (file) {\n if (file.size >= 25000000) {\n showErrorToast(\"File size cannot exceed 25MB.\");\n setIsLoading(false);\n }\n hoseRecognitionData(file);\n setAddHoseLocation(false);\n setIsEdit(true);\n setIsSaved(true);\n setImageFile(file);\n setImageName(\"\");\n const reader = new FileReader();\n reader.onloadend = () => {\n setImageUrl(reader.result);\n };\n reader.readAsDataURL(file);\n }\n };\n\n const hoseRecognitionData = async (file) => {\n if (file) {\n setHoseRecognitions([]);\n setIsLoading(true);\n setLoadingHoseRecognition(true);\n try {\n const assetId = localStorage.getItem(\"selectedAssetId\");\n const result = await apiHoseRecognition(file, assetId, selectedId);\n if (result) {\n setLoadingHoseRecognition(false);\n if (result.length === 0) {\n setHoseRecognitions([]);\n showErrorToast(\"No hose end identified\");\n setIsLoading(false);\n return false;\n }\n setHoseRecognitions(result);\n setIsLoading(false);\n } else {\n setHoseRecognitions([]);\n setLoadingHoseRecognition(false);\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"No hose end identified\");\n setLoadingHoseRecognition(false);\n setIsLoading(false);\n setHoseRecognitions([]);\n }\n }\n };\n\n const addNewHoseLocation = () => {\n const companyId = Number(localStorage.getItem(\"companyId\"));\n const newData = {\n id: 0,\n locationName: \"\",\n isPublic: false,\n companyId: companyId,\n assetId: selectedData.asset.id,\n assetDbId: selectedData.asset.assetDbId,\n equipmentTypeId: null,\n areaId: null,\n areaName: \"\",\n locationX: 0.5,\n locationY: 0.5,\n createdBy: null,\n lastUpdatedBy: null,\n lastUpdatedDateTime: null,\n isDeleted: false,\n deletedBy: null,\n deletedDateTime: null,\n };\n setData(newData);\n };\n\n useEffect(() => {\n if (selectedId !== 0) {\n setIsEdit(false);\n getDTImages();\n }\n }, [selectedId]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n const selectedId = localStorage.getItem(\"selectedAssetId\");\n if (selectedId != null && data.id === 0) {\n getMyAssetsData(selectedId);\n }\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, []);\n\n useEffect(() => {\n if (formData) {\n const selectedId = localStorage.getItem(\"selectedAssetId\");\n getDTLocationsData(selectedId);\n }\n }, [formData]);\n\n useEffect(() => {\n if (assetType) {\n getHosePositions();\n }\n }, [assetType]);\n\n useEffect(() => {\n if (selectedData) {\n if (assetType !== selectedData.assetDetails.equipmentTypeName) {\n if (\n selectedData.assetDetails.equipmentTypeName === null ||\n selectedData.assetDetails.equipmentTypeName === \"\"\n ) {\n setAssetImage(\"\");\n setAssetType(\"\");\n } else {\n setAssetType(\n selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\"\n );\n }\n }\n if (\n selectedData.assetDetails?.otherAssetDetails !== null &&\n selectedData.assetDetails?.otherAssetDetails !== \"\"\n ) {\n const fullDescription =\n selectedData.assetDetails.otherAssetDetails.split(\" | \");\n selectedData.makeName = fullDescription[0] ? fullDescription[0] : \"\";\n selectedData.equipmentTypeName = fullDescription[1]\n ? fullDescription[1]\n : \"\";\n selectedData.model = fullDescription[2] ? fullDescription[2] : \"\";\n selectedData.assetDetails.makeName = fullDescription[0]\n ? fullDescription[0]\n : \"\";\n selectedData.assetDetails.equipmentTypeName = fullDescription[1]\n ? fullDescription[1]\n : \"\";\n selectedData.assetDetails.model = fullDescription[2]\n ? fullDescription[2]\n : \"\";\n selectedData.makeId = 0;\n } else {\n selectedData.makeName = selectedData.assetDetails?.makeName;\n selectedData.equipmentTypeName =\n selectedData.assetDetails?.equipmentTypeName;\n selectedData.model = selectedData.assetDetails?.model;\n selectedData.equipmentTypeId =\n selectedData.assetDetails?.equipmentTypeId;\n selectedData.makeId = selectedData.assetDetails?.makeId;\n }\n const companyId = Number(localStorage.getItem(\"companyId\"));\n const newData = {\n id: 0,\n locationName: \"\",\n isPublic: false,\n companyId: companyId,\n assetId: selectedData.asset.id,\n assetDbId: selectedData.asset.assetDbId,\n equipmentTypeId: null,\n areaId: null,\n areaName: \"\",\n locationX: 0.5,\n locationY: 0.5,\n createdBy: null,\n lastUpdatedBy: null,\n lastUpdatedDateTime: null,\n isDeleted: false,\n deletedBy: null,\n deletedDateTime: null,\n };\n setData(newData);\n const selectedFormData = {\n id: selectedData.asset.id,\n assetId: selectedData.asset.assetId,\n assetSerialNumber: selectedData.asset.assetSerialNumber,\n year: selectedData.asset.year,\n industry: selectedData.asset.industry,\n assetLocationId: selectedData.asset.assetLocationId,\n assetImageUrl: selectedData.asset.assetImageUrl,\n operator: selectedData.asset.operator,\n nonBoaServiceParts: selectedData.asset.nonBoaServiceParts,\n parentId: selectedData.asset.parentId,\n assetDbId: selectedData.asset.assetDbId,\n otherAssetDetails: selectedData.assetDetails.otherAssetDetails,\n makeName: selectedData.assetDetails.makeName\n ? selectedData.assetDetails.makeName\n : \"\",\n equipmentTypeName: selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\",\n model: selectedData.assetDetails.model\n ? selectedData.assetDetails.model\n : \"\",\n assetPropUnit: selectedData.assetDetails.assetPropUnit,\n assetPropValue: selectedData.assetDetails.assetPropValue,\n equipmentTypeId: selectedData.equipmentTypeId,\n makeId: selectedData.makeId,\n };\n setFormData(selectedFormData);\n }\n }, [selectedData]);\n\n return (\n \n {isLoading ? (\n
\n \n {data?.locationName} cannot be deleted because it has more than\n one hose image.
\n
Please delete all images before attempting to delete this\n location.\n
\n Are you sure
\n you want to delete {data?.locationName}?\n
\n {isLoading ? (\n
\n \n Are you sure you want
\n to delete{\" \"}\n {locationImages.length > 0\n ? \"Hose Image\" + (imageName ? ` - ${imageName}` : \"\")\n : \" location\"}\n ?\n
\n props.history.goBack()}\n >\n
\n \n
\n ) : (\n \n
\n )}\n \n {imageLoading ? (\n
*/}\n \n {!isLoading ? (\n
\n \n \n {addHoseLocation ? (\n
\n ) : null}\n\n {addHoseLocation ? (\n
\n \n \n ) : (\n \n )}\n \n {!isSaved || (isSaved && locationImages.length > 0) ? (\n onSaveHoseLocation()}\n >\n Confirm\n \n ) : null}\n {\n const selectedId =\n localStorage.getItem(\"selectedAssetId\");\n if (selectedId !== null) {\n getDTLocationsData(selectedId);\n }\n setAddHoseLocation(false);\n getDTLocationsData();\n setIsSaved(false);\n }}\n >\n {isSaved ? \"Close\" : \"Cancel\"}\n \n
\n ) : data?.id > 0 &&\n (locationImages.length > 0 || imageUrl) &&\n isSaved ? (\n \n onConfirmHoseEnd()}\n >\n Confirm\n \n {\n setImageUrl(null);\n setImageFile(null);\n setHoseRecognitions([]);\n setIsEdit(false);\n setIsSaved(false);\n }}\n >\n Cancel\n \n
\n ) : data?.id > 0 && isEdit ? (\n \n {\n getDTImages();\n getHoseEnds();\n setTimeout(function () {\n setIsEdit(false);\n setCanStartDrawing(false);\n handleCancelDrawing();\n }, 500);\n }}\n >\n Cancel\n \n onConfirmHoseEnd()}\n >\n Confirm\n \n
\n ) : data?.id > 0 && locationImages.length > 0 ? (\n \n {locationImages.length > 0 ? (\n <>\n {!selectedImageData?.isPublic && (\n setDeleteOpen(true)}\n >\n Delete Image\n \n )}\n {\n setSelectedHoseEnd(null);\n setSelectedHoseEndIndex(null);\n setSelectedHoseEndData(null);\n setSelectedHoseEndId(null);\n setIsEdit(true);\n }}\n >\n Edit Hose Ends\n \n \n ) : null}\n
\n ) : null}\n {addHoseLocation ||\n (data?.id > 0 && locationImages.length > 0) ? (\n \n ) : null}\n
Topics:
\n \n {topics.map((topic) => (\n\n {renderContentIcon(content.contentType)}\n
\n )}\n\n \n
\n \n );\n};\n\nconst renderContentIcon = (type) => {\n switch (type) {\n case \"VID\":\n return {content.contentName}
\n \n {subTopics.map((subTopic) => (\n
\n )}\n \n {subTopic.subtopicId && (\n \n {subTopic.contents.map((content) => (\n \n \n ))}\n \n )}\n
\n ))}\n {subTopic.subtopicName}
\n )}\n {subTopic.contents.length === 1 &&\n subTopic.contents[0].contentId === null ? (\n NotFound()\n ) : (\n\n
\n \n
\n )\n );\n};\n\nexport default HISDropdown;\n","// DetailedAssembly.js\nimport React from \"react\";\nimport \"./detailAssembly.css\";\n\nconst DetailedAssembly = ({ title, details, onClose }) => {\n return (\n {title}
\n \n \n
\n );\n};\n\nexport default DetailedAssembly;\n","// HoseAssembly.js\nimport React, { useState } from \"react\";\nimport DetailedAssembly from \"./detailAssembly\";\nimport \"./hoseAssembly.css\";\nimport { toast } from \"react-toastify\";\nimport { HISfetchData } from \"./hisAPIprovider\";\n\nconst HoseAssembly = ({ hose_assembly }) => {\n const [showPopup, setShowPopup] = useState(false);\n const [details, setDetails] = useState(null);\n\n const handleButtonClick = async () => {\n // Replace this URL with the actual API endpoint\n const response = await HISfetchData(\"/his/assembly_details\", {\n assembly_id: hose_assembly.assembly_id,\n });\n if (!response.ok) {\n toast.error(\"Failed to get the assembly details\");\n return;\n }\n const data = await response.json();\n setDetails(data.data);\n setShowPopup(true);\n };\n\n const handleClosePopup = () => {\n setShowPopup(false);\n };\n\n return (\n \n \n {title}\n \n {Object.entries(details).map(\n ([key, value]) =>\n value !== \"\" &&\n value !== 0 &&\n value !== \"None\" && (\n
\n \n {key.includes(\"Boa Code\") ? (\n \n {key.toUpperCase()}:\n \n ) : (\n \n ( K / J / S ) {value}\n \n ) : (\n
\n )\n )}\n \n {key}:\n
\n )}\n {key.includes(\"Boa Code\") ? (\n{value}
\n )}\n\n \n
\n \n
\n );\n};\n\nexport default HoseAssembly;\n","import React, { useEffect, useState } from \"react\";\nimport { debounce } from \"lodash\";\nimport HISDropdown from \"./hisDropdown\";\nimport \"./arrangement.css\";\nimport HoseAssembly from \"./hoseAssembly\";\nimport { HISfetchDataCallback } from \"./hisAPIprovider\";\n\nconst Arrangement = () => {\n const [modelSearch, setModelSearch] = useState(\"\");\n const [models, setModels] = useState(null);\n\n const [selectedModel, setSelectedModel] = useState(null);\n const [serNoPrefix, setSerNoPrefix] = useState({ data: [] });\n\n const [selectedSerNoPrefix, setSelectedSerNoPrefix] = useState(null);\n const [serNoRange, setSerNoRange] = useState({ data: [] });\n\n const [selectedSerNoRange, setSelectedSerNoRange] = useState(null);\n const [arrangements, setArrangements] = useState({ data: [] });\n\n const [selectedArrangement, setSelectedArrangement] = useState(null);\n const [arrangementAssemblies, setArrangementAssemblies] = useState({\n data: [],\n });\n\n const [selectedArrangementAssembly, setSelectedArrangementAssembly] =\n useState(null);\n\n const handleSearch = debounce((searchTerm) => {\n setModels(null);\n setSerNoPrefix({ data: [] });\n setSelectedSerNoPrefix(null);\n setSerNoRange({ data: [] });\n setSelectedSerNoRange(null);\n setArrangements({ data: [] });\n setSelectedArrangement(null);\n setArrangementAssemblies({ data: [] });\n setSelectedArrangementAssembly(null);\n if (searchTerm !== \"\") {\n setModelSearch(searchTerm);\n }\n }, 1000);\n\n const handleChange = (event) => {\n const searchTerm = event.target.value;\n handleSearch(searchTerm);\n };\n\n useEffect(() => {\n if (modelSearch !== \"\") {\n HISfetchDataCallback(\n \"/his/model\",\n { search_param: modelSearch },\n setModels\n );\n }\n }, [modelSearch]);\n\n useEffect(() => {\n if (selectedModel) {\n HISfetchDataCallback(\n \"/his/ser_no_prefix\",\n { model: selectedModel },\n setSerNoPrefix\n );\n }\n }, [selectedModel]);\n\n useEffect(() => {\n if (selectedSerNoPrefix) {\n HISfetchDataCallback(\n \"/his/ser_no_range\",\n { model: selectedModel, ser_no_prefix: selectedSerNoPrefix },\n setSerNoRange\n );\n }\n }, [selectedSerNoPrefix]);\n\n useEffect(() => {\n if (selectedSerNoRange) {\n HISfetchDataCallback(\n \"/his/arrangement\",\n {\n model: selectedModel,\n ser_no_prefix: selectedSerNoPrefix,\n ser_no_range: selectedSerNoRange,\n },\n setArrangements\n );\n }\n }, [selectedSerNoRange]);\n\n useEffect(() => {\n if (selectedArrangement) {\n HISfetchDataCallback(\n \"/his/arrangement_assemblies\",\n { arrangement_id: selectedArrangement.arrangement_id },\n setArrangementAssemblies\n );\n }\n }, [selectedArrangement]);\n\n const selectModel = (model) => {\n setSelectedModel(model);\n setSerNoPrefix({ data: [] });\n setSelectedSerNoPrefix(null);\n setSerNoRange({ data: [] });\n setSelectedSerNoRange(null);\n setArrangements({ data: [] });\n setSelectedArrangement(null);\n setArrangementAssemblies({ data: [] });\n };\n\n const selectSerNoPrefix = (prefix) => {\n setSelectedSerNoPrefix(prefix);\n setSerNoRange({ data: [] });\n setSelectedSerNoRange(null);\n setArrangements({ data: [] });\n setSelectedArrangement(null);\n setArrangementAssemblies({ data: [] });\n };\n\n const selectSerNoRange = (range) => {\n setSelectedSerNoRange(range);\n setArrangements({ data: [] });\n setSelectedArrangement(null);\n setArrangementAssemblies({ data: [] });\n };\n\n const selectArrangement = (arrangement) => {\n setSelectedArrangement(arrangement);\n setArrangementAssemblies({ data: [] });\n };\n\n return (\n \n
\n Assembly Part No:
{hose_assembly.assembly_id}
\n\n
\n Bulk Part No:
{hose_assembly.bulk_part_no}
\n\n
\n Hose Type:
{hose_assembly.hose_type}
\n\n
\n Hose Inside Diameter:
{hose_assembly.hose_inside_diam} MM
\n\n
\n Hose Cut Length:
{hose_assembly.hose_cut_length} MM
\n\n
\n \n\n {showPopup && details && (\n Qty:
{hose_assembly.qty}
\n\n
\n )}\n {arrangementAssemblies.data.length > 0 && (\n \n
\n\n {arrangements.data.length > 0 && (\n \n
\n\n {models !== null && models.data.length === 0 && (\n No Model Found!
\n )}\n \n \n
\n \n
\n \n Arrangements ({arrangements.data.length})\n
\n \n {arrangements.data.map((item) => (\n selectArrangement(item)}\n >\n {item.arrangement_id} - {item.arrangement_name}\n
\n ))}\n \n \n
\n )}\n \n );\n};\n\nexport default Arrangement;\n","import React, { useState } from \"react\";\nimport \"./assembly.css\";\nimport { HISfetchData } from \"./hisAPIprovider\";\nimport { toast } from \"react-toastify\";\nimport DetailedAssembly from \"./detailAssembly\";\n\nconst AssemblyDisplay = ({ title, sectionData }) => {\n const [partData, setPartData] = useState(null);\n const [showPopup, setShowPopup] = useState(false);\n const [selectedPart, setSelectedPart] = useState(null);\n\n const handleClick = async (field_name, event) => {\n setSelectedPart(event.target.innerText);\n if (field_name === \"armor_guard_part_no\") {\n title = \"bulk_armor_guard\";\n }\n setPartData(null);\n const response = await HISfetchData(\"/his/component_detail\", {\n category: title,\n part_no: event.target.innerText,\n });\n\n if (!response.ok) {\n toast.error(\"The component details could not be found\");\n return;\n }\n const data = await response.json();\n setPartData(data.data);\n setShowPopup(true);\n };\n\n const handleClosePopup = () => {\n setShowPopup(false);\n };\n return (\n \n
\n \n Hose Assemblies ({arrangementAssemblies.data.length})\n
\n \n {arrangementAssemblies.data.map((item) => (\n
\n \n
\n )\n )}\n\n {showPopup && partData && (\n \n {title.replaceAll(\"_\", \" \") + \" Info\"}\n
\n {sectionData &&\n Object.entries(sectionData).map(\n ([key, value]) =>\n value !== \"\" &&\n value !== 0 && (\n \n handleClick(key, event)}\n >\n {value.toString()}\n
\n ) : (\n \n {key.replaceAll(\"_\", \" \").replaceAll(\"mm\", \"(MM)\")}\n
\n {key.includes(\"no\") && key !== \"assembly_part_no\" ? (\n {value.toString()}
\n )}\n \n
\n \n \n \n
\n \n
\n Assembly Part No
\n \n
\n \n {assemblyData && (\n
\n \n );\n};\n\nexport default Assembly;\n","import React, { useState } from \"react\";\nimport \"./hisComponent.css\";\nimport { toast } from \"react-toastify\";\nimport { HISfetchData } from \"./hisAPIprovider\";\n\nconst components = {\n assembly_details: \"Hose Assembly\",\n adapter: \"Adapter\",\n bulk_armor_guard: \"Bulk Armor Guard\",\n bulk_hose: \"Bulk Hose\",\n clamp: \"Clamp\",\n coupling: \"Coupling\",\n coupling_seal: \"Coupling Seal\",\n nut_and_cap: \"Nut and Cap\",\n plug_and_flange_protector: \"Plug and Flange Protector\",\n quick_disconnect: \"Quick Disconnect\",\n seal_kit: \"Seal Kit\",\n sleeve: \"Sleeve\",\n split_flance: \"Split Flange\",\n};\n\nconst HisComponent = () => {\n const [selectedCategory, setSelectedCategory] = useState(\"\");\n const [partNo, setPartNo] = useState(\"\");\n const [componentData, setComponentData] = useState(null);\n\n const onSelect = (key) => {\n setSelectedCategory(key);\n setPartNo(\"\");\n setComponentData(null);\n };\n\n const handleChange = (e) => {\n setComponentData(null);\n setPartNo(e.target.value);\n };\n\n const handleClick = async () => {\n let response;\n if (selectedCategory !== \"assembly_details\") {\n response = await HISfetchData(\"/his/component_detail\", {\n category: selectedCategory,\n part_no: partNo,\n });\n } else {\n response = await fetchData(\"/his/assembly_details\", {\n assembly_id: partNo,\n });\n }\n\n if (!response.ok) {\n toast.error(\"The component details could not be found\");\n return;\n }\n const data = await response.json();\n setComponentData(data.data);\n };\n\n return (\n \n
\n {componentData !== null && (\n \n \n \n
\n \n
\n Category
\n \n \n
\n \n
\n Part No
\n \n
\n \n \n \n {Object.entries(componentData).map(\n ([key, value]) =>\n value !== \"\" &&\n value !== \"None\" && (\n \n \n {key}\n \n \n {value}\n \n \n )\n )}\n \n
\n )}\n \n );\n};\n\nexport default HisComponent;\n","import React, { useState } from \"react\";\nimport { toast } from \"react-toastify\";\nimport { HISputData, HISdeleteData } from \"./hisAPIprovider\";\n\nconst UserCard = ({ user, onDelete }) => {\n const [userPermission, setUserPermission] = useState(user.active);\n\n const changePermission = async () => {\n const response = await HISputData(`/his/users/${user.user_id}`, {\n email: user.email,\n active: !userPermission,\n });\n if (!response.ok) {\n toast.error(\"Error changing permission\");\n return;\n }\n toast.success(\"Permission changed successfully\");\n setUserPermission(!userPermission);\n };\n\n const handleDelete = async () => {\n const response = await HISdeleteData(`/his/users/${user.user_id}`);\n if (!response.ok) {\n toast.error(\"Error deleting user\");\n return;\n }\n toast.success(\"User deleted successfully\");\n onDelete(user.user_id);\n };\n\n return (\n Component Details - {partNo}
\n\n {\n e.stopPropagation(); // Prevent click from propagating to parent elements\n changePermission();\n }}\n />\n
\n );\n};\n\nexport default UserCard;\n","import React, { useState } from \"react\";\nimport { Button, Form, TextArea, Modal, Input } from \"semantic-ui-react\";\nimport { toast } from \"react-toastify\";\nimport { HISpostData } from \"./hisAPIprovider\";\n\nconst NewUserForm = ({ closeForm }) => {\n const [formData, setFormData] = useState({ email: \"\", active: false });\n const [isEmpty, setIsEmpty] = useState(false);\n const handleChange = (e) => {\n const { name, value } = e.target;\n setFormData({ ...formData, [name]: value });\n if (value.trim() !== \"\") {\n setIsEmpty(false);\n }\n };\n\n const onAddNewUser = async () => {\n if (formData.email.trim() === \"\") {\n setIsEmpty(true);\n } else {\n const response = await HISpostData(\"/his/new_user\", formData);\n if (!response.ok) {\n toast.error(\"Failed to add new user\");\n return;\n }\n closeForm();\n toast.success(\"New user added successfully\");\n }\n };\n return (\n \n {user.email}\n
\n \n \n {users.length !== 0 &&\n users.map((user) => (\n
\n );\n};\n\nexport default HISusers;\n","import MetaData from \"../../components/MetaData\";\nimport React, { useState, useEffect } from \"react\";\nimport { Grid, Icon } from \"semantic-ui-react\";\nimport { Chip } from \"@mui/material\";\nimport Arrangement from \"./arrangement\";\nimport Assembly from \"./assembly\";\nimport HisComponent from \"./hisComponent\";\nimport HISusers from \"./hisUser\";\n\nconst BOAHIS = () => {\n const isAdmin = localStorage.getItem(\"HISisAdmin\");\n let features = [];\n if (isAdmin === \"true\") {\n features = [\n { id: 0, name: \"Asset Model\" },\n { id: 1, name: \"Hose Assembly\" },\n { id: 2, name: \"Components\" },\n { id: 3, name: \"Edit Users\" },\n ];\n } else {\n features = [\n { id: 0, name: \"Asset Model\" },\n { id: 1, name: \"Hose Assembly\" },\n { id: 2, name: \"Components\" },\n ];\n }\n\n const [selectedFeature, setSelectedFeature] = useState(0);\n\n const handleClick = (id) => {\n setSelectedFeature(id);\n };\n return (\n \n
\n \n {value}\n
\n Manufacturer: {price}\n
\n Equipment Type: {description}\n
\n Model: {title}\n
\n );\n };\n\n render() {\n const {\n loading,\n value,\n enable,\n onResultSelect,\n onSearchChange,\n noResultsMessage,\n isMyAssets = false,\n results,\n } = this.props;\n\n return (\n <>\n {isMyAssets ? (\n \n Manufacturer: {price}\n
\n Equipment Type: {description}\n
\n Model: {title}\n
\n \n \n \n Upload Image\n \n
\n \n );\n}\n","import React, { useCallback, useEffect, useState } from \"react\";\nimport \"./quoting.css\";\nimport {\n Card,\n Checkbox,\n Dimmer,\n Dropdown,\n Form,\n Grid,\n Icon,\n Image,\n Input,\n Loader,\n Button,\n Header,\n Select,\n TextArea,\n Popup,\n Container,\n Search,\n Modal,\n Message,\n} from \"semantic-ui-react\";\nimport MetaData from \"../../components/MetaData\";\nimport { useRef } from \"react\";\nimport { useDraggable } from \"react-use-draggable-scroll\";\nimport rightArrow from \"../../../src/assets/images/right-transparent.png\";\nimport Autocomplete from \"react-google-autocomplete\";\nimport GoogleMapReact from \"google-map-react\";\nimport Skeleton from \"react-loading-skeleton\";\nimport \"react-loading-skeleton/dist/skeleton.css\";\nimport {\n showSuccessToast,\n showErrorToast,\n showWarningToast,\n} from \"../../utils/toastUtils\";\nimport {\n hoseMakerTempData,\n quotingSearchDefaultOptions,\n quoteStatusList,\n tempData,\n} from \"./data\";\nimport NumericInputBox from \"../../components/NumericInputBox\";\nimport productDefaultImage from \"../../assets/images/product_default.png\";\nimport noImageAvailable from \"../../assets/images/no_image_available.png\";\nimport SearchComponent from \"../../containers/Search\";\nimport AssetSearch from \"./searchAsset\";\nimport CustomerSearch from \"./searchCustomer\";\nimport ContactSearch from \"./searchContact\";\nimport { apiGetUsersListWithCurrent } from \"../MyAssets/myAssets.api\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport {\n formatDateTime,\n padZero,\n sortKeysWithDatesFirst,\n} from \"../../utils/utils\";\nimport QuoteImageUploader from \"./ImageUploader\";\nimport {\n apiAssetsSearch,\n apiCustomerList,\n apiGetHosePositions,\n apiGetMyAssetsList,\n apiSetTechnicianFilter,\n} from \"../Jobbing/jobbing.api\";\nimport {\n apiArchiveQuote,\n apiCreateQuote,\n apiDeleteAllHoseMakerImages,\n apiDeleteQuote,\n apiGeneratePDF,\n apiGenerateQuotePDF,\n apiGetQuotePDF,\n apiGetQuoting,\n apiGetQuotingList,\n apiMoveToJobCard,\n apiRemoveQuoteImage,\n apiRestoreQuote,\n apiSaveQuoteImage,\n apiUpdateQuote,\n apiGetQuoteUrgencies,\n} from \"./quoting.api\";\nimport quotingIcon from \"../../assets/images/pages/quoting.png\";\nimport { apiGetStockLocationList } from \"../Settings/settings.api\";\nimport HoseMakerNew from \"../HoseMakerNew\";\nimport NumericInputDiscount from \"../../components/NumericInputDiscount\";\nimport RS23SetPriceForm from \"../Jobbing/rs23setprice\";\nimport ImageViewer from \"react-simple-image-viewer\";\n\nconst Quoting = (props) => {\n const [data, setData] = useState([]);\n const [quotingSearchOptions, setQuotingSearchOptions] = useState(\n quotingSearchDefaultOptions\n );\n const [quotingSearchKeyword, setQuotingSearchKeyword] = useState(\"\");\n const [quotingSearchType, setQuotingSearchType] = useState(null);\n const [quotingSearchTypeFullName, setQuotingSearchTypeFullName] =\n useState(null);\n const [quoteListData, setQuoteListData] = useState([]);\n const [openHoseMaker, setOpenHoseMaker] = React.useState(false);\n const [openOtherComponents, setOpenOtherComponents] = React.useState(false);\n const [openCustomItem, setOpenCustomItem] = React.useState(false);\n const [openRemoveBOM, setOpenRemoveBOM] = React.useState(false);\n const [openToInvoiced, setOpenToInvoiced] = React.useState(false);\n const [openAcceptExpiredQuote, setOpenAcceptExpiredQuote] = useState(false);\n const [openMoveToJobbing, setOpenMoveToJobbing] = React.useState(false);\n const [openToInprogress, setOpenToInprogress] = React.useState(false);\n const [openToDuplicate, setOpenToDuplicate] = React.useState(false);\n const [openSendQuote, setOpenSendQuote] = React.useState(false);\n const [hoseMakerData, setHoseMakerData] = useState(hoseMakerTempData);\n const [hoseMakerIndex, setHoseMakerIndex] = useState(null);\n const [assetType, setAssetType] = useState(\"\");\n const [assetImage, setAssetImage] = useState(\"\");\n const [locationList, setLocationList] = useState([]);\n const [selectedId, setSelectedId] = useState(\"\");\n const [selectedData, setSelectedData] = useState(tempData);\n const [formData, setFormData] = useState(tempData);\n const [urgenciesData, setUrgenciesData] = useState([]);\n const [assetList, setAssetList] = useState([]);\n const [myAssetsList, setMyAssetsList] = useState([]);\n const [assetLoading, setAssetLoading] = useState(false);\n const [myAssetsLoading, setMyAssetsLoading] = useState(false);\n const [dataLoading, setDataLoading] = useState(false);\n const [selectedCard, setSelectedCard] = useState(\"\");\n const [hasLocation, setHasLocation] = useState(false);\n const [searchLoading, setSearchLoading] = useState(false);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [assetSearch, setAssetSearch] = useState(\"\");\n const [myAssetsSearch, setMyAssetsSearch] = useState(\"\");\n const [filterStatus, setFilterStatus] = useState(6);\n const [technicianFilter, setTechnicianFilter] = useState(\"\");\n const [technicianName, setTechnicianName] = useState(\"\");\n const [technicianList, setTechnicianList] = useState([]);\n const [technicianFilterList, setTechnicianFilterList] = useState([]);\n const [currentStatus, setCurrentStatus] = useState(0);\n const [customProductText, setcCustomProductText] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [location, setLocation] = useState({\n lat: -42.312144,\n lng: 172.474153,\n });\n const [selectedDate, setSelectedDate] = useState(\n new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)\n );\n const [clicked, setClicked] = useState(false);\n const [userCountryCode, setUserCountryCode] = useState(\"\");\n const [countries, setCountries] = useState([]);\n const [isSaved, setIsSaved] = React.useState(false);\n\n //Customer\n const [selectedCustomer, setSelectedCustomer] = useState({});\n const [openIsDuplicateCustomer, setOpenIsDuplicateCustomer] = useState(false);\n const [duplicateMessage, setDuplicateMessage] = useState(\"\");\n const [customerList, setCustomerList] = useState([]);\n\n // useEffect(() => {\n // if (selectedCustomer) {\n // if (selectedCustomer.id !== formData.customer.id)\n // handleChange(\"customer\", selectedCustomer);\n // }\n // }, [selectedCustomer]);\n\n //Contact\n const [selectedContact, setSelectedContact] = useState({});\n\n useEffect(() => {\n if (selectedContact) {\n handleChange(\"customerContact\", selectedContact);\n }\n }, [selectedContact]);\n\n //Stock Location\n const [openSelectStockLocation, setOpenSelectStockLocation] = useState(false);\n const [openStockLocationError, setOpenStockLocationError] = useState(false);\n const [stockLocationError, setStockLocationError] = useState({});\n const [stocklocationList, setStocklocationList] = useState([]);\n\n //Hose Tagging\n const [isAssemble, setIsAssemble] = useState(false);\n\n //Quoting Image\n const [quoteImages, setQuoteImages] = useState([]);\n const [quoteAdditionalImages, setQuoteAdditionalImages] = useState([]);\n const [images, setImages] = useState([]);\n const [additionalImages, setAdditionalImages] = useState([]);\n const [deleteFileOpen, setDeleteFileOpen] = useState(false);\n const [selectedFile, setSelectefFile] = useState(null);\n const [currentImage, setCurrentImage] = useState(0);\n const [isViewerOpen, setIsViewerOpen] = useState(false);\n const [isAdditionalViewerOpen, setIsAdditionalViewerOpen] = useState(false);\n const [imageLoading, setImageLoading] = useState(false);\n const [technicianDeleted, setTechnicianDeleted] = useState(false);\n\n const [openSearchList, setOpenSearchList] = useState(false);\n\n const handleQuotingSearchChange = (e) => {\n setOpenSearchList(true);\n if (e.target.value === \"\" && quotingSearchType !== null) {\n setQuotingSearchOptions(quotingSearchDefaultOptions);\n setQuotingSearchType(null);\n setQuotingSearchTypeFullName(null);\n onSearch(\"\", null, filterStatus, technicianFilter);\n setOpenSearchList(false);\n }\n const updatedOptions = quotingSearchDefaultOptions?.map((item) => ({\n ...item,\n value: (\n \n Hose Maker Item Deleted Successfully\n
\n );\n } else {\n showErrorToast(\"Failed to delete Hose Maker Item\");\n }\n setOpenDeleteHoseMakerPopup(false);\n setIsLoading(false);\n };\n\n // Function to format time as \"HH:MM:SS\"\n const formatTime = (totalSeconds) => {\n if (!totalSeconds) return \"00:00:00\";\n const hours = Math.floor(totalSeconds / 3600);\n const minutes = Math.floor((totalSeconds % 3600) / 60);\n const secs = totalSeconds % 60;\n\n const pad = (num) => String(num).padStart(2, \"0\");\n\n return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;\n };\n\n const getStockLocationsData = async () => {\n const result = await apiGetStockLocationList();\n if (result) {\n setStocklocationList(result);\n } else {\n setStocklocationList([]);\n }\n };\n\n const mileage =\n localStorage.getItem(\"userCountryCode\") === \"US\" ? \"mi\" : \"km\";\n\n // Unit options for hours/mileage\n const options = [\n { key: \"hrs\", text: \"Hrs\", value: \"hrs\" },\n { key: mileage, text: mileage === \"mi\" ? \"MI\" : \"KMs\", value: mileage },\n ];\n\n const locationRef = useRef(null);\n const ref = useRef();\n const { events } = useDraggable(ref);\n\n function handleChange(dataType, value) {\n const userName = localStorage.getItem(\"user\");\n let newState = [];\n newState.push(formData);\n let quoteData = newState?.map((item, i) => {\n if (i == 0) {\n if (dataType == \"technicianEmail\") {\n item.technicianSelected = true;\n }\n if (dataType == \"expiryDate\") {\n if (value) {\n var date = new Date(value);\n const formattedDate = date.toISOString();\n item.expiryDate = formattedDate;\n setSelectedDate(value);\n } else {\n item.expiryDate = new Date(\n Date.now() + 30 * 24 * 60 * 60 * 1000\n ).toISOString();\n setSelectedDate(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000));\n }\n return item;\n }\n if (dataType == \"companyName\") {\n item.customer = {};\n item.customer.companyName = value;\n item.customer.userName = userName;\n item.customer.id = null;\n }\n if (dataType == \"discountPercent\") {\n item.customer = item.customer ? item.customer : {};\n item.customer.discountPercent = Number(value);\n item.customerDiscount = Number(value);\n }\n if (dataType == \"contactName\") {\n item.customerContact = {};\n item.customerContact.contactName = value;\n item.customerContact.userName = userName;\n item.customerContact.id = null;\n item.customerContact.customerId = item.customer?.id\n ? item.customer?.id\n : null;\n }\n if (dataType == \"customer\") {\n item.companyName = value.companyName;\n }\n if (dataType == \"customerWithDiscount\") {\n item.customer = value;\n item.companyName = value.companyName;\n if (value.discountPercent === 0) {\n item.discountPercent = 0;\n item.customerDiscount = 0;\n }\n if (value.discountPercent === null) {\n item.discountPercent = \"\";\n item.customerDiscount = \"\";\n }\n if (value.discountPercent) {\n item.discountPercent = value.discountPercent;\n item.customerDiscount = value.discountPercent;\n }\n return item;\n }\n if (dataType == \"customerContact\") {\n item.contactName = value.contactName;\n item.contactNumber = value.contactNumber;\n item.contactEmail = value.email;\n }\n if (dataType === \"selectCustomer\") {\n item.discountPercent = \"\";\n item.customerDiscount = \"\";\n item.companyName = \"\";\n setSelectedCustomer({});\n }\n if (dataType == \"selectCustomer\" && value == true) {\n if (!item.contactName) item.selectContact = true;\n }\n if (dataType == \"makeId\" && value == 0) {\n setAssetSearch(\"\");\n setAssetType(\"\");\n item.equipmentTypeId = null;\n item.assetId = null;\n setAssetImage(\"\");\n setLocationList([]);\n }\n if (dataType == \"makeId\" && value != 0) {\n item.equipmentTypeId = null;\n item.assetId = null;\n item.otherAssetDetails = null;\n item.makeName = \"\";\n item.equipmentTypeName = \"\";\n item.model = \"\";\n setAssetType(\"\");\n setAssetImage(\"\");\n setLocationList([]);\n }\n if (dataType == \"asset\" && value) {\n item.assetId = value.id;\n item.otherAssetDetails = null;\n return item;\n }\n if (dataType == \"customerLocation\") {\n if (locationRef && locationRef.current)\n return {\n ...item,\n [dataType]: locationRef.current.refs.input.value,\n };\n }\n return { ...item, [dataType]: value };\n }\n return item;\n });\n\n if (dataType === \"assetId\") {\n onAutoSaveQuote(quoteData[0]);\n }\n console.log(quoteData[0]);\n setFormData(quoteData[0]);\n }\n\n const addOtherComponents = async (product) => {\n var currentDate = new Date();\n var utcDate = currentDate.toISOString();\n const productData = {\n productId: product.id,\n quantity: 1,\n stockCode: product.stockCode,\n stockDescription: product.stockDescription,\n image128: product.stockImage1,\n name: product.stockDescription,\n barcode: product.stockCode,\n createdDateTime: utcDate,\n };\n\n let newState = formData.inventoryComponents\n ? formData.inventoryComponents\n : [];\n const existing = newState.find(\n (element) => element.productId === product.id\n );\n\n if (!existing) {\n newState.push(productData);\n } else {\n let invComponentsNewState = newState?.map((item, i) => {\n if (item.productId === product.id) {\n item.quantity += 1;\n }\n return item;\n });\n handleChange(\"inventoryComponents\", invComponentsNewState);\n setOpenOtherComponents(false);\n return true;\n }\n\n // Sort inventory components AFTER adding product\n newState.sort(function (a, b) {\n return new Date(b.createdDateTime) - new Date(a.createdDateTime);\n });\n\n handleChange(\"inventoryComponents\", newState);\n setOpenOtherComponents(false);\n };\n\n const addCustomComponents = async () => {\n const productData = {\n productId: null,\n stockCode: null,\n stockDescription: customProductText,\n image128: null,\n name: customProductText,\n barcode: null,\n description: customProductText,\n quantity: 1,\n sellPrice: 0,\n };\n\n let newState = formData.inventoryNonBOA ? formData.inventoryNonBOA : [];\n newState.push(productData);\n\n handleChange(\"inventoryNonBOA\", newState);\n setOpenCustomItem(false);\n };\n\n function handleOtherComponentQuantityChange(index, value) {\n let newState = [];\n newState.push(formData);\n let quoteData = newState?.map((item, i) => {\n if (i == 0) {\n item.inventoryComponents[index].quantity = value;\n }\n if (value == 0) {\n item.inventoryComponents.splice(index, 1);\n }\n return item;\n });\n\n handleChange(\"inventoryComponents\", quoteData[0].inventoryComponents);\n }\n\n function handleCustomComponentQuantityChange(index, value) {\n let newState = [];\n newState.push(formData);\n let quoteData = newState?.map((item, i) => {\n if (i == 0) {\n item.inventoryNonBOA[index].quantity = value;\n }\n if (value === -1) {\n item.inventoryNonBOA.splice(index, 1);\n }\n return item;\n });\n\n handleChange(\"inventoryNonBOA\", quoteData[0].inventoryNonBOA);\n }\n\n function handleCustomComponentPriceChange(index, value) {\n let newState = [];\n newState.push(formData);\n let quoteData = newState?.map((item, i) => {\n if (i == 0) {\n item.inventoryNonBOA[index].sellPrice = value;\n }\n return item;\n });\n\n handleChange(\"inventoryNonBOA\", quoteData[0].inventoryNonBOA);\n }\n\n function handleBOMQuantityChange(index, value) {\n let newState = [];\n newState.push(formData);\n let quoteData = newState?.map((item, i) => {\n if (i == 0) {\n item.hoseMaker[index].quantity = value;\n }\n if (value == 0) {\n item.hoseMaker.splice(index, 1);\n }\n return item;\n });\n\n handleChange(\"hoseMaker\", quoteData[0].hoseMaker);\n }\n\n const addBOM = (data) => {\n console.log(\"test\");\n let newState = [];\n newState.push(formData);\n let quoteData = newState?.map((item, i) => {\n if (i == 0) {\n item.hoseMaker.push(data);\n return item;\n }\n return item;\n });\n\n onAutoSaveQuote(quoteData[0]);\n setFormData(quoteData[0]);\n };\n\n const updateBOM = (data, index) => {\n let newState = [];\n newState.push(formData);\n let quoteData = newState?.map((item, i) => {\n return item;\n });\n\n quoteData[0].hoseMaker?.map((item, i) => {\n if (index === i) {\n quoteData[0].hoseMaker[i] = data;\n }\n });\n\n onAutoSaveQuote(quoteData[0]);\n setFormData(quoteData[0]);\n };\n\n const onCancelHoseMaker = () => {\n setOpenHoseMaker(false);\n };\n\n const onSearch = async (keyword, searchType, status, technician) => {\n setSearchLoading(true);\n const result = await apiGetQuotingList(\n keyword,\n searchType,\n status,\n technician\n );\n if (result) {\n setSearchLoading(false);\n setData(result);\n setQuoteListData(result);\n setSearchLoading(false);\n }\n };\n\n const onSubmitQuote = async (status, progress, forceSubmit = false) => {\n setIsSaved(true);\n if (\n (!formData.companyName || formData.companyName?.trim().length === 0) &&\n (!formData.contactNumber || formData.contactNumber === \"\") &&\n formData.quoteStatusId < 3\n ) {\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n if (\n (formData?.customerPurchaseOrderNumber === \"\" ||\n !formData?.customerPurchaseOrderNumber) &&\n selectedCustomer.requirePurchaseOrderNumber &&\n status === 3\n ) {\n showErrorToast(\"Order Number (PO) is required\");\n return false;\n }\n if (!formData.companyName || formData.companyName?.trim().length === 0) {\n showErrorToast(\"Customer field is required\");\n return false;\n }\n if (\n (!formData.contactNumber || formData.contactNumber === \"\") &&\n formData.quoteStatusId < 3\n ) {\n showErrorToast(\"Contact Number field is required\");\n return false;\n }\n\n // Check expiry date\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const expiryDate = new Date(formData.expiryDate);\n expiryDate.setHours(0, 0, 0, 0);\n if (expiryDate < today && !forceSubmit && status === 4) {\n setIsLoading(true);\n setTimeout(function () {\n setOpenToInvoiced(false);\n setIsLoading(false);\n setOpenAcceptExpiredQuote(true);\n }, 300);\n return false;\n }\n\n if (formData.id === \"\") {\n onSubmitCreateQuote(status, progress);\n } else {\n onSubmitUpdateQuote(status, progress);\n }\n };\n\n const onMoveQuoteToJobbing = async () => {\n setIsLoading(true);\n const quoteData = await apiMoveToJobCard(formData.id);\n if (quoteData) {\n getQuotingListData();\n getQuotingData();\n setOpenMoveToJobbing(false);\n showSuccessToast(\n \n Quote Moved to Jobbing Successfully\n
\n );\n setIsLoading(false);\n } else {\n setIsLoading(false);\n }\n };\n\n const onDuplicateQuote = async () => {\n let customer = customerList.find(\n (item) => item.id === selectedCustomer?.id\n );\n if (customer) {\n formData.customerDiscount = customer?.discountPercent;\n formData.discountPercent = customer?.discountPercent;\n }\n setIsLoading(true);\n formData.customerPurchaseOrderNumber = \"\";\n formData.urgencyId = 0;\n formData.quoteDesc = \"\";\n formData.distanceTravelled = null;\n formData.hoursLabour = null;\n formData.notes = null;\n formData.saveContactDetails = false;\n formData.technicianEmail = null;\n formData.expiryDate = new Date(\n Date.now() + 30 * 24 * 60 * 60 * 1000\n ).toISOString();\n setSelectedDate(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000));\n\n for (let i = 0; i < formData.hoseMaker.length; i++) {\n formData.hoseMaker[i].quantity = 1;\n\n // Reset BOM Assembly object, minimum 5 items required\n formData.hoseMaker[i].bomAssembly.lfActualCrimpSize = 0;\n formData.hoseMaker[i].bomAssembly.rfActualCrimpSize = 0;\n formData.hoseMaker[i].bomAssembly.causeType = null;\n formData.hoseMaker[i].bomAssembly.damageType = null;\n formData.hoseMaker[i].bomAssembly.hoseReplacementType = null;\n formData.hoseMaker[i].bomAssembly.isMarkedPushedOnCorrectly = false;\n formData.hoseMaker[i].bomAssembly.createdBy = null;\n formData.hoseMaker[i].bomAssembly.createdDateTime = null;\n formData.hoseMaker[i].bomAssembly.lastUpdatedDateTime =\n new Date().toISOString();\n\n formData.hoseMaker[i].isRS23Compliant = null;\n formData.hoseMaker[i].rS23ComplianceRate = null;\n formData.hoseMaker[i].hosePositionName = null;\n formData.hoseMaker[i].hosePositionImage = null;\n formData.hoseMaker[i].bomAssemblyImages = [];\n formData.hoseMaker[i].isHoseCleaned = null;\n formData.hoseMaker[i].isVisuallyInspected = null;\n formData.hoseMaker[i].isDesignStandard = null;\n formData.hoseMaker[i].hoseIdTagging = [{ hoseId: \"\", hoseIdSequence: 0 }];\n }\n\n const quoteData = await apiCreateQuote(formData, location, 2);\n if (quoteData) {\n formData.id = quoteData.id;\n const updatedQuoteData = await apiUpdateQuote(formData, location, 2);\n getQuotingListData();\n showSuccessToast(\n \n Quote Duplicated Successfully\n
\n );\n setSelectedId(quoteData.id);\n setSelectedCard(quoteData?.quoteDetails?.quoteNumber);\n }\n setIsLoading(false);\n setOpenToDuplicate(false);\n };\n\n const onSubmitCreateQuote = async (status, progress) => {\n if (formData.makeId === 0) {\n if (\n formData.makeName === \"\" ||\n formData.equipmentTypeName === \"\" ||\n formData.model === \"\"\n ) {\n showErrorToast(\"Please complete all required fields\");\n if (progress) handleChange(\"quoteStatusId\", status - 1);\n return false;\n } else {\n formData.otherAssetDetails = `${formData.makeName} | ${formData.equipmentTypeName} | ${formData.model}`;\n }\n }\n const quoteData = await apiCreateQuote(formData, location, status);\n if (quoteData) {\n setIsSaved(false);\n getQuotingListData();\n showSuccessToast(\n \n Quote Created Successfully\n
\n );\n setSelectedId(quoteData.id);\n setSelectedCard(quoteData?.quoteDetails?.quoteNumber);\n } else {\n if (progress) handleChange(\"quoteStatusId\", status - 1);\n }\n };\n\n const onSubmitUpdateQuote = async (status, progress) => {\n setIsLoading(true);\n if (status > 2 && formData.makeId === 0) {\n if (\n formData.makeName === \"\" ||\n formData.equipmentTypeName === \"\" ||\n formData.model === \"\"\n ) {\n showErrorToast(\"Please complete all required fields\");\n if (progress) handleChange(\"quoteStatusId\", status - 1);\n setIsLoading(false);\n return false;\n } else {\n formData.otherAssetDetails = `${formData.makeName} | ${formData.equipmentTypeName} | ${formData.model}`;\n }\n }\n if (formData.makeId === 0) {\n formData.otherAssetDetails = `${formData.makeName} | ${formData.equipmentTypeName} | ${formData.model}`;\n }\n const quoteData = await apiUpdateQuote(formData, location, status);\n if (quoteData) {\n if (quoteData.errors) {\n setStockLocationError(quoteData);\n setOpenStockLocationError(true);\n setIsLoading(false);\n if (progress) handleChange(\"quoteStatusId\", status - 1);\n }\n if (quoteData.statusCode === 403) {\n setOpenSelectStockLocation(true);\n setIsLoading(false);\n return false;\n }\n\n getCustomersData();\n setIsSaved(false);\n setIsLoading(false);\n setOpenSelectStockLocation(false);\n setOpenToInprogress(false);\n setOpenToInvoiced(false);\n setOpenAcceptExpiredQuote(false);\n getQuotingListData();\n showSuccessToast(\n \n Quote Updated Successfully\n
\n );\n if (quoteData.duplicateCustomerMessage) {\n setDuplicateMessage(quoteData.duplicateCustomerMessage);\n setOpenIsDuplicateCustomer(true);\n }\n setTimeout(function () {\n getQuotingData();\n }, 300);\n } else {\n setIsLoading(false);\n if (progress) handleChange(\"quoteStatusId\", status - 1);\n }\n };\n\n const onAutoSaveQuote = async (data) => {\n if (formData.makeId === 0) {\n if (\n formData.makeName === \"\" ||\n formData.equipmentTypeName === \"\" ||\n formData.model === \"\"\n ) {\n } else {\n formData.otherAssetDetails = `${formData.makeName} | ${formData.equipmentTypeName} | ${formData.model}`;\n }\n }\n\n // Add isMatchedList to data\n data.hoseMaker.forEach((assembly) => {\n const isMatchedList = [\n assembly.step2_Matched ?? false,\n assembly.step3_Matched ?? false,\n assembly.step4_Matched ?? false,\n assembly.step5_Matched ?? false,\n ];\n\n assembly.isMatchedList = isMatchedList;\n });\n\n const quoteData = await apiUpdateQuote(data, location, data.quoteStatusId);\n if (quoteData) {\n setOpenToInprogress(false);\n setOpenToInvoiced(false);\n showSuccessToast(\n \n Changes Saved Successfully\n
\n );\n setTimeout(function () {\n getQuotingData();\n }, 300);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onGeneratePDF = async (type) => {\n setIsLoading(true);\n const result = await apiGenerateQuotePDF(\n formData.id,\n selectedData?.quoteDetails?.quoteNumber,\n type\n );\n if (result) {\n setIsLoading(false);\n setOpenSendQuote(false);\n showSuccessToast(\n \n PDF Downloaded Successfully\n
\n );\n } else {\n setIsLoading(false);\n setOpenSendQuote(false);\n showWarningToast(\"Generating PDF. Please come back later.\");\n }\n };\n\n const onGetQuotePDF = async () => {\n setIsLoading(true);\n const result = await apiGetQuotePDF(formData.id);\n if (result) {\n sendQuoteEmail(result);\n setIsLoading(false);\n setOpenSendQuote(false);\n } else {\n setIsLoading(false);\n setOpenSendQuote(false);\n showWarningToast(\"Something went wrong\");\n }\n };\n\n const sendQuoteEmail = (data) => {\n const { acceptanceUrl, fileUrl } = data;\n const subject = \"Your Quote is Ready – Review and Accept\";\n const acceptanceLink = acceptanceUrl.replace(/&/g, \"%26\");\n\n // Construct the email body using plain text (with %0A for line breaks)\n const body =\n `Hello ${formData.contactName},%0A%0A` +\n `Below is a detailed quote for you to review and accept.%0A` +\n `QUOTE - ${formData.quoteNumber}%0A` +\n `${fileUrl}%0A%0A` +\n `To proceed, you have two options:%0A` +\n `- Click the acceptance button directly in the quote.%0A` +\n `- Or click here to accept.%0A` +\n `${acceptanceLink}%0A%0A` +\n `If you require any changes or have questions about the quote, please contact us.`;\n\n // Encode the subject and body properly\n const mailtoLink = `mailto:${\n formData.contactEmail\n }?subject=${encodeURIComponent(subject)}&body=${body}`;\n\n // Open the default email client\n window.location.href = mailtoLink;\n };\n\n const onArchiveQuote = async () => {\n const quoteData = await apiArchiveQuote(formData.id);\n if (quoteData) {\n getQuotingData();\n getQuotingListData();\n showSuccessToast(\n \n Quote Archived Successfully\n
\n );\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onRestoreQuote = async () => {\n const quoteData = await apiRestoreQuote(formData.id);\n if (quoteData) {\n getQuotingData();\n getQuotingListData();\n showSuccessToast(\n \n Quote Restored Successfully\n
\n );\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onDeleteQuote = async () => {\n const quoteData = await apiDeleteQuote(formData.id);\n if (quoteData) {\n getQuotingListData();\n onNewQuote();\n showSuccessToast(\n \n Quote Deleted Successfully\n
\n );\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onNewQuote = () => {\n setIsSaved(false);\n setSelectedCustomer({});\n const newData = {\n id: \"\",\n quoteNumber: \"\",\n companyName: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n customerPurchaseOrderNumber: \"\",\n customerLocation: \"\",\n locationLat: null,\n locationLng: null,\n urgencyId: null,\n companyAssetId: null,\n assetTextId: \"\",\n assetSerialNumber: \"\",\n makeId: null,\n equipmentTypeId: null,\n assetId: null,\n otherAssetDetails: null,\n assetPropValue: \"\",\n assetPropUnit: \"km\",\n quoteDesc: \"\",\n quoteImageDetails: null,\n quoteStatusId: 1,\n distanceTravelled: null,\n hoursLabour: null,\n hoseMaker: [],\n makeName: \"\",\n equipmentTypeName: \"\",\n model: \"\",\n saveContactDetails: true,\n customer: {},\n customerContact: {},\n selectCustomer: true,\n selectContact: true,\n discountPercent: \"\",\n expiryDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),\n };\n setSelectedDate(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000));\n setSelectedId(\"\");\n setSelectedData(newData);\n setFormData(newData);\n setSelectedCard(\"\");\n setHasLocation(false);\n setAssetSearch(\"\");\n setAssetType(\"\");\n setAssetImage(\"\");\n if (locationRef && locationRef.current)\n locationRef.current.refs.input.value = \"\";\n const geolocation = {\n lat: -42.312144,\n lng: 172.474153,\n };\n setLocation(geolocation);\n setHasLocation(false);\n };\n\n const onAddressSelection = (place) => {\n handleChange(\"customerLocation\", locationRef.current.refs.input.value);\n if (place && place.geometry) {\n const geolocation = {\n lat: place.geometry.location.lat(),\n lng: place.geometry.location.lng(),\n };\n setLocation(geolocation);\n setHasLocation(true);\n }\n };\n\n const openGoogleMaps = () => {\n if (formData?.customerLocation === \"\") {\n showErrorToast(\"Enter location first\");\n return false;\n }\n const googleMapsURL = `https://www.google.com/maps?q=${formData?.customerLocation}`;\n\n window.open(googleMapsURL, \"_blank\");\n };\n\n const getQuotingListData = async () => {\n onSearch(\n quotingSearchKeyword,\n quotingSearchType,\n filterStatus,\n technicianFilter\n );\n };\n\n const getQuotingData = async () => {\n setDataLoading(true);\n const result = await apiGetQuoting(selectedId);\n if (result) {\n if (!result.hoseMaker) result.hoseMaker = [];\n setSelectedData(result);\n setDataLoading(false);\n } else {\n showErrorToast(\"Failed to load the quote card, please try again\");\n setDataLoading(false);\n }\n };\n\n const getImagesData = async () => {\n setDataLoading(true);\n const result = await apiGetQuoting(selectedId);\n if (result) {\n setQuoteImages(result.quoteAssetImages);\n setQuoteAdditionalImages(result.quoteAdditionalImages);\n let imagesFromData = [];\n let additionalImagesFromData = [];\n result.quoteAssetImages?.map((item, i) => {\n imagesFromData.push(item.filePath);\n });\n result.quoteAdditionalImages?.map((item, i) => {\n additionalImagesFromData.push(item.filePath);\n });\n setImages(imagesFromData);\n setAdditionalImages(additionalImagesFromData);\n setDataLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setDataLoading(false);\n }\n };\n\n const getDropdownData = async () => {\n const urgencies = await apiGetQuoteUrgencies();\n if (urgencies) {\n setUrgenciesData(urgencies);\n }\n };\n\n const getCustomersData = async () => {\n const customers = await apiCustomerList();\n if (customers) {\n setCustomerList(customers);\n }\n };\n\n const getUsersList = async () => {\n const result = await apiGetUsersListWithCurrent();\n if (result) {\n const list = result.filter(\n (item, index) => result.indexOf(item) === index\n );\n const filterList = result.filter(\n (item, index) => result.indexOf(item) === index\n );\n setTechnicianList(list);\n filterList.unshift({ text: \"Unassigned\", value: \"Unassigned\" });\n filterList.unshift({ text: \"All\", value: \"All\" });\n setTechnicianFilterList(filterList);\n }\n };\n\n const getHosePositions = async () => {\n const hosePositions = await apiGetHosePositions(assetType);\n if (hosePositions) {\n setAssetImage(hosePositions.url);\n setLocationList(hosePositions.positions);\n } else {\n setAssetImage(\"\");\n setLocationList([]);\n }\n };\n\n const getPositionName = (id) => {\n if (locationList.length > 0) {\n let position = {};\n position = locationList.find((location) => location.id === id);\n if (position) return position.name ? position.name : \"\";\n }\n return \"NO LOCATION ASSIGNED\";\n };\n\n const getPositionImage = (id) => {\n if (locationList.length > 0) {\n let position = {};\n position = locationList.find((location) => location.id === id);\n if (position) return position.url ? position.url : noImageAvailable;\n }\n return noImageAvailable;\n };\n\n const handleResultSelect = (e, { result }) => {\n setAssetLoading(true);\n const fullDescription = result.displayName.split(\" | \");\n formData.makeName = fullDescription[0];\n formData.equipmentTypeName = fullDescription[1];\n formData.model = fullDescription[2];\n setAssetType(fullDescription[1]);\n handleChange(\"asset\", result);\n setTimeout(function () {\n setAssetLoading(false);\n }, 500);\n };\n\n const handleAssetSearch = async (e, { value }) => {\n setAssetSearch(value);\n };\n\n const handleResultSelectMyAssets = (e, { result }) => {\n setMyAssetsLoading(true);\n formData.companyAssetId = result.Id;\n formData.assetTextId = result.AssetId;\n formData.assetSerialNumber = result.AssetSerialNumber;\n formData.makeName = result.Manufacturer;\n formData.equipmentTypeName = result.EquipmentType;\n formData.model = result.Model;\n formData.assetPropUnit = result.AssetPropUnit\n ? result.AssetPropUnit.toLowerCase()\n : \"km\";\n formData.assetPropValue = result.AssetPropValue;\n setMyAssetsSearch(result.AssetId);\n setAssetType(result.EquipmentType);\n handleChange(\"asset\", result.AssetDbId);\n setTimeout(function () {\n setMyAssetsLoading(false);\n }, 500);\n };\n\n const handleMyAssetsSearch = async (e, { value }) => {\n console.log(value);\n setMyAssetsSearch(value);\n };\n\n const handleOpenAssetDetails = () => {\n setClicked(!clicked);\n };\n\n const getAssetList = async (search) => {\n console.log(search);\n setAssetLoading(true);\n setAssetList([]);\n if (search === \"\") {\n setAssetList([]);\n setAssetLoading(false);\n return false;\n }\n const assetsData = await apiAssetsSearch(search);\n if (assetsData) {\n setAssetList(assetsData);\n setAssetLoading(false);\n } else {\n setAssetLoading(false);\n }\n };\n\n const getMyAssetsList = async (search) => {\n console.log(search);\n setMyAssetsLoading(true);\n setMyAssetsList([]);\n const assetsData = await apiGetMyAssetsList(search);\n if (assetsData) {\n setMyAssetsList(assetsData);\n setMyAssetsLoading(false);\n } else {\n setMyAssetsLoading(false);\n }\n };\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n getAssetList(assetSearch);\n }, 1500);\n\n return () => clearTimeout(delayDebounceFn);\n }, [assetSearch]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n getMyAssetsList(myAssetsSearch);\n }, 300);\n\n return () => clearTimeout(delayDebounceFn);\n }, [myAssetsSearch]);\n\n useEffect(() => {\n //Get User's country data and country list\n const countryCode = localStorage.getItem(\"userCountryCode\");\n setUserCountryCode(countryCode);\n const countryList = JSON.parse(localStorage.getItem(\"countries\"));\n setCountries(countryList);\n\n const defaultTechnicianFilter = localStorage.getItem(\n \"defaultTechnicianFilter\"\n );\n setTechnicianFilter(defaultTechnicianFilter);\n\n const delayDebounceFn = setTimeout(() => {\n getDropdownData();\n getStockLocationsData();\n getCustomersData();\n getUsersList();\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, []);\n\n useEffect(() => {\n if (locationRef && locationRef.current)\n locationRef.current.refs.input.value = \"\";\n if (selectedData && selectedData.id != \"\") {\n let customerExisting = false;\n let contactExisting = false;\n setMyAssetsSearch(\n selectedData.companyAssetId\n ? selectedData.assetDetails?.assetTextId\n : \"\"\n );\n setAssetSearch(\"\");\n setCurrentStatus(selectedData.quoteDetails.quoteStatusId);\n setAssetType(\n selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\"\n );\n if (\n selectedData.assetDetails?.otherAssetDetails !== \"\" &&\n selectedData.assetDetails?.otherAssetDetails !== null\n ) {\n const fullDescription =\n selectedData.assetDetails.otherAssetDetails.split(\" | \");\n selectedData.makeName = fullDescription[0] ? fullDescription[0] : \"\";\n selectedData.equipmentTypeName = fullDescription[1]\n ? fullDescription[1]\n : \"\";\n selectedData.model = fullDescription[2] ? fullDescription[2] : \"\";\n } else {\n selectedData.makeName = selectedData.assetDetails?.makeName;\n selectedData.equipmentTypeName =\n selectedData.assetDetails?.equipmentTypeName;\n selectedData.model = selectedData.assetDetails?.model;\n }\n if (selectedData.customer?.id) {\n const customer = customerList.find(\n (item) => item.id === selectedData.customer?.id\n );\n if (customer) {\n customerExisting = true;\n setSelectedCustomer(customer);\n if (selectedData.customerContact?.id) {\n const contact = customer?.customerContacts?.find(\n (item) => item.id === selectedData.customerContact?.id\n );\n if (contact) {\n contactExisting = true;\n }\n }\n }\n }\n let selectedFormData = {\n id: selectedData.id,\n quoteNumber: selectedData.quoteDetails.quoteNumber,\n companyName: selectedData.customerDetails.companyName,\n contactName: selectedData.customerContact\n ? selectedData.customerContact?.contactName\n : selectedData.customerDetails.contactName,\n contactNumber: selectedData.customerDetails.contactNumber,\n contactEmail: selectedData.customerDetails.contactEmail,\n customerPurchaseOrderNumber:\n selectedData.quoteDetails.customerPurchaseOrderNumber,\n customerLocation: selectedData.customerDetails.customerLocation\n .split(\", \")\n .filter((item) => item !== \"\")\n .join(\", \"),\n locationLat: selectedData.customerDetails.locationLat,\n locationLng: selectedData.customerDetails.locationLng,\n discountPercent:\n selectedData.customerDetails.customerDiscount ||\n selectedData.customerDetails.customerDiscount === 0\n ? selectedData.customerDetails.customerDiscount\n : \"\",\n urgencyId: selectedData.quoteDetails.urgencyId,\n companyAssetId: selectedData.companyAssetId,\n assetTextId: selectedData.assetDetails.assetTextId,\n assetSerialNumber: selectedData.assetDetails.assetSerialNumber,\n makeId: selectedData.assetDetails.makeId\n ? selectedData.assetDetails.makeId\n : selectedData.assetDetails.otherAssetDetails\n ? 0\n : null,\n isSearchAsset: selectedData.companyAssetId ? true : false,\n equipmentTypeId: selectedData.assetDetails.equipmentTypeId,\n assetId: selectedData.assetDetails.assetId,\n otherAssetDetails: selectedData.assetDetails.otherAssetDetails,\n assetPropValue: selectedData.assetDetails.assetPropValue,\n assetPropUnit: selectedData.assetDetails.assetPropUnit\n ? selectedData.assetDetails.assetPropUnit\n : \"km\",\n quoteDesc: selectedData.quoteDetails.quoteDesc,\n quoteImageDetails: selectedData.quoteDetails.quoteImageDetails,\n quoteStatusId: selectedData.quoteDetails.quoteStatusId,\n quoteStatusIdBeforeArchive:\n selectedData.quoteDetails.quoteStatusIdBeforeArchive,\n distanceTravelled:\n selectedData.quoteDetails.distanceTravelled != null\n ? selectedData.quoteDetails.distanceTravelled\n : \"\",\n hoursLabour:\n selectedData.quoteDetails.hoursLabour != null\n ? selectedData.quoteDetails.hoursLabour\n : \"\",\n hoseMaker: selectedData.hoseMaker ? selectedData.hoseMaker : [],\n inventoryComponents: selectedData.inventoryComponents,\n inventoryNonBOA: selectedData.inventoryNonBOA,\n notes: selectedData.quoteDetails.notes\n ? selectedData.quoteDetails.notes\n : \"\",\n makeName: selectedData.assetDetails.makeName\n ? selectedData.assetDetails.makeName\n : \"\",\n equipmentTypeName: selectedData.assetDetails.equipmentTypeName\n ? selectedData.assetDetails.equipmentTypeName\n : \"\",\n model: selectedData.assetDetails.model\n ? selectedData.assetDetails.model\n : \"\",\n isConflict: selectedData.quoteDetails.quoteNumber.includes(\"COPY\")\n ? true\n : false,\n saveContactDetails: selectedData.customerDetails.saveContactDetails,\n customer: selectedData.customer?.companyName\n ? selectedData.customer\n : {},\n customerContact: selectedData.customerContact?.contactName\n ? selectedData.customerContact\n : {},\n makeName: selectedData.makeName ? selectedData.makeName : null,\n equipmentTypeName: selectedData.equipmentTypeName\n ? selectedData.equipmentTypeName\n : null,\n model: selectedData.model ? selectedData.model : null,\n selectCustomer: customerExisting,\n selectContact: contactExisting,\n technician: selectedData.technician,\n technicianEmail: selectedData.technicianEmail,\n expiryDate: selectedData.quoteDetails.expiryDate\n ? selectedData.quoteDetails.expiryDate\n : new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),\n quoteAdditionalImages: selectedData.quoteAdditionalImages,\n quoteAssetImages: selectedData.quoteAssetImages,\n };\n if (selectedData.technicianEmail) {\n //find technician if exist\n let technician = technicianList?.find(\n (item) => item.email === selectedData.technicianEmail\n );\n if (!technician) {\n setTechnicianDeleted(true);\n }\n }\n setSelectedDate(\n selectedData.quoteDetails.expiryDate\n ? new Date(selectedData.quoteDetails.expiryDate)\n : new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)\n );\n setQuoteImages(selectedData.quoteAssetImages);\n setQuoteAdditionalImages(selectedData.quoteAdditionalImages);\n let imagesFromData = [];\n let additionalImagesFromData = [];\n selectedData.quoteAssetImages?.map((item, i) => {\n imagesFromData.push(item.filePath);\n });\n selectedData.quoteAdditionalImages?.map((item, i) => {\n additionalImagesFromData.push(item.filePath);\n });\n selectedFormData.hoseMaker?.map((hose) => {\n hose.hoseIdTagging?.map((hoseTag) => {\n hose.hoseName = hoseTag.hoseName;\n hose.hoseOemNumber = hoseTag.hoseOemNumber;\n hose.isHoseCleaned = hoseTag.isHoseCleaned;\n hose.isVisuallyInspected = hoseTag.isVisuallyInspected;\n hose.isDesignStandard = hoseTag.isDesignStandard;\n });\n });\n setIsSaved(true);\n setImages(imagesFromData);\n setAdditionalImages(additionalImagesFromData);\n setFormData(selectedFormData);\n }\n }, [selectedData]);\n\n useEffect(() => {\n if (selectedData && selectedData.customerDetails) {\n if (\n selectedData.customerDetails?.locationLat !== \"\" &&\n selectedData.customerDetails?.locationLng !== \"\" &&\n selectedData.customerDetails?.locationLat !== \"string\" &&\n selectedData.customerDetails?.locationLng !== \"string\"\n ) {\n const geolocation = {\n lat: Number(selectedData.customerDetails?.locationLat),\n lng: Number(selectedData.customerDetails?.locationLng),\n };\n if (\n geolocation.lat !== location.lat &&\n geolocation.lng != location.lng\n ) {\n setLocation(geolocation);\n setHasLocation(true);\n }\n }\n }\n }, [selectedData, hasLocation]);\n\n useEffect(() => {\n if (formData && formData?.makeId && formData?.equipmentTypeId) {\n } else {\n setAssetImage(\"\");\n }\n }, [formData?.makeId, formData?.equipmentTypeId]);\n\n useEffect(() => {\n const defaultTechnicianFilter = localStorage.getItem(\n \"defaultTechnicianFilter\"\n );\n if (defaultTechnicianFilter !== technicianFilter) {\n if (technicianFilter === \"\" || technicianFilter === \"All\") {\n if (technicianFilter === \"All\") {\n onSetTechnicianFilter(technicianFilter);\n setTechnicianName(\"All\");\n }\n } else {\n onSetTechnicianFilter(technicianFilter);\n let item = technicianList.find(\n (item) => item.value === technicianFilter\n );\n setTechnicianName(item ? item.text : \"Unassigned\");\n }\n } else {\n if (filterStatus >= 0) {\n const delayDebounceFn = setTimeout(\n () => {\n onSearch(\n quotingSearchKeyword,\n quotingSearchType,\n filterStatus,\n technicianFilter\n );\n },\n searchTerm === \"\" ? 100 : 2000\n );\n\n return () => clearTimeout(delayDebounceFn);\n }\n }\n }, [searchTerm, filterStatus, technicianFilter]);\n\n const onSetTechnicianFilter = async (technician) => {\n setIsLoading(true);\n try {\n const result = await apiSetTechnicianFilter(technician);\n if (result) {\n window.localStorage.setItem(\"defaultTechnicianFilter\", technician);\n setIsLoading(false);\n onSearch(\n quotingSearchType,\n quotingSearchType,\n filterStatus,\n technicianFilter\n );\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch (e) {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n if (assetType) {\n if (formData?.makeId !== 0) {\n getHosePositions();\n }\n }\n }, [assetType]);\n\n const handleFileChange = async (file) => {\n if (file) {\n if (file.size >= 25000000) {\n showErrorToast(\"File size cannot exceed 25MB.\");\n setIsLoading(false);\n setFilesLoading(false);\n setImageLoading(false);\n }\n setIsLoading(true);\n setImageLoading(true);\n try {\n const result = await apiSaveQuoteImage(file, formData.id);\n if (result) {\n getImagesData();\n setIsLoading(false);\n setImageLoading(false);\n showSuccessToast(\n \n Image Uploaded Successfully\n
\n );\n } else {\n setImageLoading(false);\n setIsLoading(false);\n }\n } catch {\n setImageLoading(false);\n setIsLoading(false);\n }\n } else {\n }\n };\n\n const onDeleteFile = async () => {\n setIsLoading(true);\n const assetData = await apiRemoveQuoteImage(selectedFile.id, formData.id);\n if (assetData) {\n showSuccessToast(\n \n Image Deleted Successfully\n
\n );\n setDeleteFileOpen(false);\n getImagesData();\n setIsLoading(false);\n } else {\n setIsLoading(false);\n }\n };\n\n const openImageViewer = useCallback((index) => {\n setCurrentImage(index);\n setIsViewerOpen(true);\n }, []);\n\n const closeImageViewer = () => {\n setCurrentImage(0);\n setIsViewerOpen(false);\n };\n\n const openAdditionalImageViewer = useCallback((index) => {\n setCurrentImage(index);\n setIsAdditionalViewerOpen(true);\n }, []);\n\n const closeAdditionalImageViewer = () => {\n setCurrentImage(0);\n setIsAdditionalViewerOpen(false);\n };\n\n useEffect(() => {\n if (selectedId != \"\") {\n getQuotingData();\n }\n }, [selectedId]);\n\n const handleDiscountInput = (event) => {\n if (event.target.value === \"\") {\n handleChange(\"discountPercent\", \"\");\n }\n };\n\n const handleClearDiscount = () => {\n handleChange(\"discountPercent\", \"\");\n };\n\n const onSelectCustomerWithDiscount = (data) => {\n setSelectedCustomer(data);\n handleChange(\"customerWithDiscount\", data);\n };\n\n const DiscountInput = () => {\n return (\n \n \n \n \n \n \n \n
\n );\n };\n\n return (\n \n {\n if (e.key === \"Enter\") {\n handleChange(\"discountPercent\", e.target.value);\n }\n }}\n onBlurHandler={(e) => {\n handleChange(\"discountPercent\", e.target.value);\n }}\n onInputHandler={handleDiscountInput}\n onClearHandler={handleClearDiscount}\n name=\"quantity\"\n min={0}\n max={100}\n maxLength={6}\n className=\"form-control\"\n precision={2}\n step={1}\n value={formData?.discountPercent}\n />\n
\n \n
\n Error
\n{stockLocationError.message}
\n \n \n\n Please select the stock
location for this quote\n
Are you sure you want to remove BOM?
\n\n
\n \n Are you sure you want to move #\n {selectedData?.quoteDetails?.quoteNumber} from \"\n {formData?.quoteStatusId == 3 ? \"Completed\" : \"Archived\"}\" back to\n \"In Progress\"?\n
\n\n
\n Are you sure you want to duplicate this quote?
\n\n
\n Are you sure you want to delete
\n\n HOSE ASSEMBLY #{hoseMakerIndex + 1}\n
\n\n
\n \n Once accepted, quote cannot be
\n moved back to completed.\n
\n
\n \n This quote is expired,
\n are you sure you want to accept this quote?\n
\n
\n \n Are you sure to move this quote to Jobbing?
\n
\n This quote will be archived.\n
\n
\n {duplicateMessage}
\n\n {isLoading ? (\n
\n \n Are you sure
you want to delete image?\n
\n
\n \n {quotingSearchTypeFullName}\n
\n )}\n \n \n
\n onNewQuote()}\n >\n
\n \n \n \n
\n \n \n \n {searchLoading ? (\n \n Loading Quotes...\n \n ) : null}\n
\n {data.length === 0 && !searchLoading ? (\n \n \n No Quote Found\n \n
\n ) : null}\n \n {quoteListData.map((data, i) => {\n return (\n \n {\n if (selectedCard !== data.quoteNumber) {\n setSelectedId(data.id);\n setSelectedCard(data.quoteNumber);\n } else {\n setHasLocation(false);\n setSelectedId(\"\");\n setSelectedCard(\"\");\n setSelectedData(null);\n setFormData(null);\n setAssetType(\"\");\n setAssetImage(\"\");\n setAssetSearch(\"\");\n }\n }}\n style={{ cursor: \"pointer\" }}\n >\n \n \n \n \n \n Quote #{data.quoteNumber}\n \n \n \n Company: {data.companyName}\n \n \n Contact: {data.contactName}\n \n \n Quote Status: {data.quoteStatusDesc}\n \n {data.quoteStatusId === 5 && (\n \n \n \n \n {data.quoteStatusIdBeforeArchive === 1\n ? \"New Request\"\n : data.quoteStatusIdBeforeArchive ===\n 2\n ? \"In Progress\"\n : data.quoteStatusIdBeforeArchive ===\n 3\n ? \"Completed\"\n : data.quoteStatusIdBeforeArchive ===\n 4 && !data.jobRefId\n ? \"Accepted\"\n : \"Moved to Jobbing\"}\n \n \n \n \n )}\n \n \n \n \n \n \n );\n })}\n
\n \n \n {data.quoteStatusDesc}\n \n
\n \n \n
\n\n \n event.key === \"Enter\" && event.preventDefault()\n }\n >\n \n \n 2}\n >\n \n \n \n In Progress\n \n \n \n
\n \n \n {formData?.quoteStatusId < 3 && (\n \n onSubmitQuote(formData?.quoteStatusId, false)\n }\n >\n Save & Close\n \n )}\n {formData?.quoteStatusId < 3 &&\n formData?.quoteStatusId !== 5 &&\n !formData?.isConflict && (\n {\n if (formData?.quoteStatusId === 2) {\n if (stocklocationList?.length > 1) {\n onSubmitQuote(\n formData?.quoteStatusId === 3\n ? 3\n : formData?.quoteStatusId + 1,\n true\n );\n // setOpenSelectStockLocation(true);\n } else {\n handleChange(\n \"boahubLocationId\",\n stocklocationList[0]?.id\n );\n onSubmitQuote(\n formData?.quoteStatusId === 3\n ? 3\n : formData?.quoteStatusId + 1,\n true\n );\n }\n } else {\n onSubmitQuote(\n formData?.quoteStatusId === 3\n ? 3\n : formData?.quoteStatusId + 1,\n true\n );\n }\n }}\n >\n {formData?.quoteStatusId === 2\n ? \"Save & Complete\"\n : \"Save & Progress\"}\n \n )}\n {formData?.quoteStatusId === 5 &&\n !selectedData?.quoteDetails?.jobRefId ? (\n onRestoreQuote()}\n >\n {\n setOpenSendQuote(true);\n }}\n >\n View Quote\n \n )}\n {formData?.quoteStatusId === 3 ? (\n setOpenToInprogress(true)}\n >\n Move to In Progress\n \n ) : null}\n {formData?.quoteStatusId === 3 ||\n (formData?.quoteStatusId === 5 &&\n selectedData?.quoteDetails?.quoteStatusIdBeforeArchive ===\n 3) ? (\n setOpenToInvoiced(true)}\n >\n Accept Quote\n \n ) : null}\n {formData?.quoteStatusId === 4 ? (\n setOpenMoveToJobbing(true)}\n >\n Move To Jobbing\n \n ) : null}\n {formData?.quoteStatusId > 0 &&\n formData?.quoteStatusId < 5 &&\n formData?.id ? (\n onArchiveQuote()}\n style={{\n position: \"absolute\",\n right: formData?.quoteStatusId === 1 ? 115 : 12,\n minWidth: 100,\n }}\n >\n Archive\n \n ) : null}\n {(formData?.quoteStatusId === 1 ||\n formData?.quoteStatusId === 5) &&\n formData?.id ? (\n onDeleteQuote()}\n style={{\n position: \"absolute\",\n right: 12,\n paddingLeft: 15,\n paddingRight: 15,\n minWidth: 100,\n }}\n >\n
\n \n
\n \n \n New Request\n \n
\n \n Quote duplicated from Quote{\" \"}\n {formData?.quoteNumber?.replace(\"COPY-\", \"\")},\n due to online/offline conflict. Please check\n both quotes, merge details then delete this one.{\" \"}\n
\n\n \n
\n \n \n Hose Name:\n
\n OEM Part Number:\n
\n Cut Length:\n
\n QTY:\n {localStorage.getItem(\n \"boahubIsRS23\"\n ) === \"true\" &&\n data.isRS23Compliant == true && (\n <>\n
\n RS23 Unit Price:\n
\n RS23 Sub-total:\n \n )}\n \n \n
\n \n {data.hoseIdTagging &&\n data.hoseIdTagging[0]?.hoseName\n ? data.hoseIdTagging[0]?.hoseName\n : \"\"}\n \n
\n \n {data.hoseIdTagging &&\n data.hoseIdTagging[0]?.hoseOemNumber\n ? data.hoseIdTagging[0]\n ?.hoseOemNumber\n : \"\"}\n \n
\n \n {data.oal ? data.oal + \"mm\" : \"\"}\n \n
\n \n {data.quantity ? data.quantity : \"\"}\n \n {localStorage.getItem(\n \"boahubIsRS23\"\n ) === \"true\" &&\n data.isRS23Compliant == true && (\n <>\n
\n
\n \n ${\" \"}\n {data.rS23ComplianceRate\n ? (\n data.rS23ComplianceRate *\n data.quantity\n ).toFixed(2)\n : `${(0).toFixed(2)}`}\n \n \n )}\n \n \n
\n \n \n \n \n \n {`${data.barcode}`}\n \n \n \n \n
\n \n \n \n \n \n \n \n {`${data.description}`}\n \n \n \n \n \n \n \n handleCustomComponentQuantityChange(\n index,\n value\n )\n }\n onKeyDownHandler={(e) => {\n if (e.key === \"Enter\")\n e.preventDefault();\n }}\n />\n \n \n \n \n \n \n \n \n handleCustomComponentPriceChange(\n index,\n value\n )\n }\n onKeyDownHandler={(e) => {\n if (e.key === \"Enter\")\n e.preventDefault();\n }}\n />\n \n \n \n \n \n handleCustomComponentQuantityChange(\n index,\n -1\n )\n }\n />\n }\n content=\"Remove\"\n style={{\n fontSize: 12,\n opacity: 0.7,\n }}\n inverted\n />\n \n \n \n \n
\n );\n })}\n \n \n {formData?.quoteStatusId > 1 ? (\n <>\n \n \n \n \n \n {formData?.makeId !== 0 && (\n
\n \n handleOpenAssetDetails()}>\n
\n ) : (\n 2}>\n \n Asset Details\n \n
\n \n \n Min/Max Imported Successfully with\n Errors: Some records were not imported.\n
\n );\n } else {\n showSuccessToast(\n \n Min/Max Imported Successfully\n
\n );\n props.setMinMaxOpen(false);\n setIsImporting(false);\n setJsonResult([]);\n setPayloadData([]);\n }\n } else {\n showErrorToast(\"Something went wrong\");\n setIsImporting(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsImporting(false);\n }\n };\n\n // Error checker for quantity field\n function hasError(quantity) {\n let hasError = false;\n\n if (quantity === \"\") return false;\n if (isNaN(quantity)) {\n hasError = true;\n }\n if (!Number.isFinite(Number(parseFloat(quantity)))) {\n hasError = true;\n }\n if (quantity < 0) {\n hasError = true;\n }\n return hasError;\n }\n\n function hasProductIdError(productId) {\n if (/[^0-9]/.test(productId)) return true;\n }\n\n return (\n \n {isLoading ? (\n
\n \n \n \n {jsonResult.length > 0 ? (\n \n
\n ) : (\n \n 1. Export current Min/Max report as CSV\n
\n 2. Edit the CSV file locally\n
\n 3. Upload the CSV file for preview\n
\n )}\n \n \n 2. Edit the CSV file locally\n
\n 3. Upload the CSV file for preview\n
\n Min/Max Adjusted Successfully\n
\n );\n setTimeout(() => {\n setIsLoading(false);\n props.setAdjustMinMaxOpen(false);\n }, 1000);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n return (\n \n {isLoading ? (\n
\n \n \n \n \n Min / Max Adjustment\n \n \n \n \n \n \n \n \n \n \n \n {\n if (e.key === \"Enter\") {\n setMinValue(e.target.value);\n }\n }}\n onBlurHandler={(e) => {\n setMinValue(e.target.value);\n }}\n name=\"quantity\"\n min={0}\n max={10000}\n maxLength={6}\n className=\"form-control\"\n precision={\n props.selectedProduct?.uomData?.id === 8 ? 1 : 0\n }\n step={1}\n value={minValue}\n />\n \n \n \n \n \n Max:\n \n \n \n {\n if (e.key === \"Enter\") {\n setMaxValue(e.target.value);\n }\n }}\n onBlurHandler={(e) => {\n setMaxValue(e.target.value);\n }}\n name=\"quantity\"\n min={0}\n max={10000}\n maxLength={6}\n className=\"form-control\"\n precision={\n props.selectedProduct?.uomData?.id === 8 ? 1 : 0\n }\n step={1}\n value={maxValue}\n />\n \n \n \n \n \n \n \n onUpdateProductMinMax()}\n >\n Confirm\n \n {\n props.setAdjustMinMaxOpen(false);\n }}\n >\n Discard\n \n \n \n
\n \n \n Stock Code\n \n
\n \n \n {props.selectedProduct?.barCode}\n \n
\n \n \n Current\n \n
\n \n \n Min: {props.selectedProduct?.inventoryData?.min}\n \n
\n \n \n Max: {props.selectedProduct?.inventoryData?.max}\n \n
\n \n Stock Adjustment Imported\n Successfully with Errors: Some records were not imported.\n
\n );\n } else {\n showSuccessToast(\n \n Stock Adjustment Imported\n Successfully\n
\n );\n props.setBulkAdjustmentOpen(false);\n setIsImporting(false);\n setJsonResult([]);\n setPayloadData([]);\n }\n } else {\n showErrorToast(\"Something went wrong\");\n setIsImporting(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsImporting(false);\n }\n };\n\n // Error checker for quantity field\n function hasError(quantity) {\n let hasError = false;\n\n if (isNaN(quantity)) {\n hasError = true;\n }\n if (!Number.isFinite(Number(parseFloat(quantity)))) {\n hasError = true;\n }\n return hasError;\n }\n\n function hasProductIdError(productId) {\n if (/[^0-9]/.test(productId)) return true;\n }\n\n const headerStyle = {\n position: \"sticky\",\n top: 0,\n backgroundColor: \"white\",\n zIndex: 1,\n };\n\n return (\n \n {isLoading ? (\n
\n \n \n \n {jsonResult.length > 0 ? (\n \n
\n ) : (\n \n 1. Download File for Bulk Adjustment as CSV\n
\n 2. Edit the CSV file locally\n
\n 3. Upload the CSV file for preview\n
\n )}\n \n \n 2. Edit the CSV file locally\n
\n 3. Upload the CSV file for preview\n
\n Products Added to Cart Successfully\n
\n );\n setTimeout(() => {\n setIsLoading(false);\n props.setMinMaxReportOpen(false);\n }, 1000);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const headerStyle = {\n position: \"sticky\",\n top: 0,\n backgroundColor: \"white\",\n zIndex: 1,\n };\n\n const headerStyleQty = {\n position: \"sticky\",\n top: 0,\n backgroundColor: \"white\",\n zIndex: 1,\n color: \"#66CC23\",\n };\n\n return (\n \n {isLoading ? (\n
\n \n Are you sure
you want to add to cart all products?\n
\n {isLoading ? (\n
\n \n \n \n \n
\n {productList.length === 0 && (\n \n \n No products found in {props.stockLocationName} below the set\n minimum level.\n \n
\n )}\n \n \n Stock Location Deleted Successfully\n
\n );\n setDeleteStockLocationOpen(false);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setDeleteStockLocationOpen(false);\n setIsLoading(false);\n }\n };\n\n const onUpdateStockLocation = async () => {\n setIsLoading(true);\n try {\n const stockData = await apiUpdateStockLocation(stockFormData);\n if (stockData) {\n showSuccessToast(\n \n Stock Location Updated Successfully\n
\n );\n setStockFormData({});\n setAddStockLocationOpen(false);\n setIsLoading(false);\n setStockSaved(false);\n getStockLocationsData();\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onSubmitAddStockLocation = async () => {\n setIsLoading(true);\n setStockSaved(true);\n try {\n const stockData = await apiAddStockLocation(stockFormData);\n if (stockData) {\n showSuccessToast(\n \n Stock Location Added Successfully\n
\n );\n setStockFormData({});\n setAddStockLocationOpen(false);\n setIsLoading(false);\n setStockSaved(false);\n getStockLocationsData();\n } else {\n setStockFormData({});\n setAddStockLocationOpen(false);\n setIsLoading(false);\n setStockSaved(false);\n getStockLocationsData();\n }\n } catch (e) {\n setIsLoading(false);\n }\n };\n\n const handleSearchChange = (event) => {\n const { value } = event.target;\n setSearchTerm(value);\n };\n\n useEffect(() => {\n setPage(1);\n const delayDebounceFn = setTimeout(() => {\n latestRequest.current += 1;\n const currentRequest = latestRequest.current;\n getStockProductsData(searchTerm, 1, currentRequest);\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, [searchTerm]);\n\n useEffect(() => {\n if (selectedId !== 0) {\n latestRequest.current += 1;\n const currentRequest = latestRequest.current;\n setPage(1);\n getStockProductsData(searchTerm, 1, currentRequest);\n localStorage.setItem(\"selectedStockLocationId\", selectedId);\n localStorage.setItem(\n \"selectedStockLocationName\",\n selectedStock?.stockLocationName\n );\n } else {\n setSelectedData({});\n setStockFormData({});\n }\n }, [selectedId, adjustMinMaxOpen, minMaxOpen, bulkAdjustmentOpen]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n apiFetchStockMove();\n getStockLocationsData();\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n actionGetCart();\n }\n }, [selectedId]);\n\n const handleQuantityChange = (value, index) => {\n console.log(value);\n let newState = productList?.records;\n\n let productsData = newState.map((item, i) => {\n if (i === index) {\n item.quantity = Number(value);\n }\n return item;\n });\n\n setProductList({ ...productList, records: productsData });\n };\n\n const addBoxRollHandler = (item, quantity) => {\n addToCartHandler(item, quantity);\n };\n\n const addToCartHandler = async (item, quantity, length = 1) => {\n const product = await apiGetProductById(item.id);\n if (product) {\n const {\n stockCode,\n stockDescription,\n pack,\n pricingPolicy,\n id,\n taxId,\n productUom,\n } = product;\n const { email } = props.userInfo;\n const { price, currencyId } = pricingPolicy;\n let data = {\n stockCode,\n quantity: quantity ? quantity : Number(item.quantity),\n length: length,\n pack,\n stockDescription,\n price,\n currencyId,\n id,\n email,\n taxId,\n productUom,\n refId: null,\n };\n const latestCart = await actionAddProductToCart(data, cart, selectedId);\n if (latestCart) {\n setTimeout(async () => {\n await actionGetCart();\n }, 1000);\n }\n const isPresent = _.filter(cart, (item) => {\n return stockCode === item.barcode;\n });\n addToCart({ stockCode, isPresent });\n }\n };\n\n const Quantity = ({ pack, quantity, index, uomId }) => {\n // const isEach = pack == \"Each\";\n const isMeter = pack === \"Metre\" || pack === \"Feet\";\n\n const quantityMessage = isMeter ? pack : \"Quantity\";\n\n return (\n \n \n \n \n \n \n \n \n
\n );\n };\n\n return (\n \n {\n if (e.key === \"Enter\") {\n handleQuantityChange(e.target.value, index);\n }\n }}\n onBlurHandler={(e) => {\n handleQuantityChange(e.target.value, index);\n }}\n name=\"quantity\"\n min={1}\n max={10000}\n maxLength={6}\n className=\"form-control\"\n precision={uomId === 8 ? 1 : 0}\n step={1}\n value={quantity}\n />\n
\n \n {isLoading ? (\n
\n \n Are you sure
you want to delete{\" \"}\n {stockFormData.stockLocationName}\n
\n {isLoading ? (\n
\n \n
\n Error
\n{deleteStockLocationError.message}
\n \n {deleteStockLocationError.errors?.length > 0 && (\n\n
\n )}\n \n {deleteStockLocationError.errors[0]}
\n\n {isLoading ? (\n
\n \n
\n ) : (\n \n
\n )}\n \n
Stock Locations
\n \n\n \n {stocklocationList?.map((data, index) => {\n if (localStorage.getItem(\"userType\") === \"4\" && index !== 0) {\n return null;\n }\n return (\n \n {\n if (selectedId !== data?.id) {\n setSearchTerm(\"\");\n setSelectedId(data?.id);\n setSelectedStock(data);\n } else {\n setSearchTerm(\"\");\n setSelectedId(0);\n setSelectedStock(null);\n }\n }}\n >\n \n \n \n {\" \"}\n {data?.stockLocationType?.toLowerCase() ===\n \"boapod\" ? (\n \n
\n ) : null}\n \n \n \n {data?.stockLocationType?.toLowerCase() === \"boapod\" ||\n localStorage.getItem(\"userType\") === \"4\" ? null : (\n \n {searchLoading ? (\n \n Loading Stock Locations...\n \n ) : null}\n
\n {data?.stockLocationName}
\n \n\n
\n \n \n \n \n {localStorage.getItem(\"userType\") === \"4\" ? (\n \n \n {selectedStock?.id ? (\n \n \n Outgoing:{\" \"}\n \n \n {card.inventoryData?.outgoing}\n \n {card.inventoryData?.movementDetails?.map(\n (data, index) => {\n if (\n data?.moveType?.toLowerCase() ===\n \"outgoing\"\n ) {\n return (\n \n \n {data.moveName}:{\" \"}\n \n \n {data?.qty\n ? data?.qty\n : 0}\n {\" - \"}\n \n \n {`(${\n data?.typeId === 0\n ? \"ADJUSTMENT\"\n : data?.typeId === 1\n ? \"TRANSFER\"\n : data?.typeId === 2\n ? \"ORDER\"\n : data?.typeId === 3\n ? \"JOBBING\"\n : \"RETURN\"\n })`}\n \n
\n );\n }\n }\n )}\n \n {\n setTimeout(function () {\n props.history.push(\"/stock-adjustment\");\n }, 100);\n }}\n >\n Stock Adjustment\n \n
\n ) : (\n \n {\n setTimeout(function () {\n props.history.push(\"/stock-adjustment\");\n }, 100);\n }}\n >\n Stock Adjustment\n \n setBulkAdjustmentOpen(true)}\n >\n Bulk Adjustment\n \n onGetStockLocationReport()}\n >\n Stock Report\n \n
\n )}\n \n \n \n {productList?.records?.map((card, index) => {\n const isExpanded = expandedCardIds.includes(card.id);\n return (\n \n \n \n \n {card.barCode}\n \n \n \n \n \n \n \n {card.name}\n \n \n \n \n \n Available:{\" \"}\n \n 0\n ? \"#66CC23\"\n : \"#FF0000\",\n }}\n >\n {card.inventoryData?.available\n ? card.inventoryData?.available\n : 0}\n \n \n {!isExpanded ? (\n \n ) : (\n <>\n \n \n Incoming:{\" \"}\n \n \n {card.inventoryData?.incoming}\n \n {card.inventoryData?.movementDetails?.map(\n (data, index) => {\n if (\n data?.moveType?.toLowerCase() ===\n \"incoming\"\n ) {\n return (\n \n \n {data.moveName}:{\" \"}\n \n \n {data?.qty\n ? data?.qty\n : 0}\n {\" - \"}\n \n \n {`(${\n data?.typeId === 0\n ? \"ADJUSTMENT\"\n : data?.typeId === 1\n ? \"TRANSFER\"\n : data?.typeId === 2\n ? \"ORDER\"\n : data?.typeId === 3\n ? \"JOBBING\"\n : \"RETURN\"\n })`}\n \n
\n );\n }\n }\n )}\n \n \n
\n \n {\n stockDetails?.stockLocationName\n }\n
\n \n \n Available:{\" \"}\n \n 0\n ? \"#66CC23\"\n : \"#FF0000\",\n }}\n >\n {data?.qty}\n \n
\n \n {\n setTimeout(\n function () {\n props.history.push(\n `/stock-transfer/${data.stockLocationId}/${selectedId}/${card.id}`\n );\n },\n 100\n );\n }}\n >\n Create Transfer\n \n
\n \n {productList.length ? (\n
\n {localStorage.getItem(\"userType\") === \"4\" ? null : (\n <>\n \n
\n \n \n setMinMaxReportOpen(true)}\n >\n Min/Max Report\n \n \n \n setMinMaxOpen(true)}\n >\n Set Min/Max\n \n \n \n
\n \n )}\n \n ) : dataLoading ? (\n \n Min/Max\n
\n\n Stock Transfer Deleted Successfully\n
\n );\n setTimeout(function () {\n setProductList([]);\n setFormData({ statusId: 0, transferReason: \"\" });\n setDeleteStockTransferOpen(false);\n getTransfersList();\n setIsLoading(false);\n }, 300);\n } else {\n showErrorToast(\"Something went wrong\");\n setDeleteStockTransferOpen(false);\n setIsLoading(false);\n }\n };\n\n const onSaveStockTransfer = async (isComplete = false) => {\n setIsLoading(true);\n const result = await apiCreateStockTransfer(\n formData,\n productList,\n isComplete\n );\n if (result) {\n showSuccessToast(\n \n Stock Transfer saved successfully\n
\n );\n setTimeout(function () {\n getTransfersList();\n setFormData({ statusId: 0, transferReason: \"\" });\n setSelectedId(null);\n setIsLoading(false);\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onUpdateStockTransfer = async (isComplete = false) => {\n setIsLoading(true);\n const result = await apiUpdateStockTransfer(\n formData,\n productList,\n isComplete\n );\n if (result) {\n showSuccessToast(\n \n Stock Transfer completed successfully\n
\n );\n setTimeout(function () {\n getTransfersList();\n setFormData({ statusId: 0, transferReason: \"\" });\n setSelectedId(null);\n setIsLoading(false);\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n useEffect(() => {\n if (selectedId !== 0) {\n getTransferDetails();\n } else {\n setStockFormData({});\n }\n }, [selectedId]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n getStockLocationsData();\n getAllStockLocationsData();\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, []);\n\n useEffect(() => {\n if (props?.match?.params) {\n const delayDebounceFn = setTimeout(() => {\n const paramData = props.match.params;\n if (paramData.product) {\n setFormData({\n statusId: 0,\n transferReason: \"\",\n fromStockLocationId: Number(paramData.from),\n toStockLocationId: Number(paramData.to),\n });\n onGetProductById(Number(paramData.product));\n }\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }\n }, [props?.match?.params]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n getTransfersList();\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, [status]);\n\n useEffect(() => {\n if (selectedId) {\n getTransferDetails(selectedId);\n }\n }, [selectedId]);\n\n function handleQuantityChange(value, index) {\n let newState = productList;\n\n let productsData = newState.map((item, i) => {\n if (i === index) {\n item.moveQty = Number(value);\n }\n return item;\n });\n\n if (value == 0) {\n productsData.splice(index, 1);\n }\n\n setProductList(productsData);\n }\n\n const onGetProductById = async (id) => {\n const product = await apiGetProductById(id);\n if (product) {\n addProduct(product);\n }\n };\n\n const addProduct = async (product) => {\n if (!product) return false;\n const productData = {\n id: product.id,\n productId: product.id,\n moveQty: 1,\n stockCode: product.barcode,\n productName: product.name,\n image128: product.image128,\n name: product.name,\n barCode: product.barcode,\n uomData: product.uom,\n };\n\n let newState = productList;\n const existing = newState.find(\n (element) => element.productId === product.id\n );\n\n if (!existing) {\n newState.unshift(productData);\n } else {\n let invComponentsNewState = newState.map((item, i) => {\n if (item.productId === product.id) {\n item.moveQty += 1;\n }\n return item;\n });\n setProductList([...invComponentsNewState]);\n return true;\n }\n\n // Sort inventory components AFTER adding product\n newState.sort(function (a, b) {\n return new Date(b.barCode) - new Date(a.barCode);\n });\n\n setProductList([...newState]);\n };\n\n const Quantity = ({ pack, quantity, index, uomId }) => {\n // const isEach = pack == \"Each\";\n const isMeter = pack === \"Metre\" || pack === \"Feet\";\n\n const quantityMessage = isMeter ? pack : \"Quantity\";\n\n return (\n \n \n \n \n \n \n \n
\n );\n };\n\n return (\n \n {\n if (e.key === \"Enter\") {\n handleQuantityChange(e.target.value, index);\n }\n }}\n onBlurHandler={(e) => {\n handleQuantityChange(e.target.value, index);\n }}\n name=\"quantity\"\n min={1}\n max={10000}\n maxLength={6}\n className=\"form-control\"\n precision={uomId === 8 ? 1 : 0}\n step={1}\n value={quantity}\n />\n
\n \n {isLoading ? (\n
\n \n Are you sure
you want to delete {formData?.moveName}\n
\n {isLoading ? (\n
\n \n Are you sure
you want to discard the changes?\n
\n
\n \n props.history.goBack()}\n >\n
\n \n
\n {\n setFormData({ statusId: 0, transferReason: \"\" });\n setProductList([]);\n setSelectedId(0);\n }}\n >\n New Transfer\n \n
\n \n setStatus(data.value)}\n />\n
\n \n \n \n {transfersList.length === 0 && (\n \n No transfers found\n
\n )}\n {transfersList?.map((data, index) => {\n // if (localStorage.getItem(\"userType\") === \"4\" && index !== 0) {\n // return null;\n // }\n return (\n \n {searchLoading ? (\n \n Loading Stock Transfers...\n \n ) : null}\n
\n \n
\n \n {data?.moveName}
\n\n {selectedId === null ? null : (\n
\n \n \n \n {formData?.id ? (\n Stock Transfer - {formData?.moveName}\n ) : (\n New Stock Transfer\n )}\n
\n \n {\n setFormData({ statusId: 0, transferReason: \"\" });\n setSelectedId(null);\n setProductList([]);\n }}\n >\n Close\n \n
\n )}\n \n
\n \n \n \n \n \n \n \n \n \n Stock Code\n \n \n \n \n Quantity\n \n \n \n
\n \n {productList?.map((card, index) => {\n return (\n\n \n \n \n \n
\n )}\n \n \n \n \n
\n \n \n {productList?.map((card, index) => {\n return (\n
\n \n {card.barCode}\n \n
\n \n \n Stock Description:{\" \"}\n \n \n {card?.productName}\n \n
\n \n {formData.statusId === 0 ? (\n \n handleQuantityChange(0, index)\n }\n >\n \n
\n \n \n \n );\n })}\n \n \n \n \n )}\n \n
\n Stock Adjustment Deleted Successfully\n
\n );\n setTimeout(function () {\n setProductList([]);\n setFormData({ statusId: 0, adjustmentReason: \"\" });\n setDeleteStockAdjustmentOpen(false);\n getAdjustmentsList();\n setIsLoading(false);\n }, 300);\n } else {\n showErrorToast(\"Something went wrong\");\n setDeleteStockAdjustmentOpen(false);\n setIsLoading(false);\n }\n };\n\n const onSaveStockAdjustment = async (isComplete = false) => {\n setIsLoading(true);\n const result = await apiCreateStockAdjustment(\n formData,\n productList,\n isComplete\n );\n if (result) {\n showSuccessToast(\n \n Stock Adjustment saved successfully\n
\n );\n setTimeout(function () {\n getAdjustmentsList();\n setFormData({ statusId: 0, adjustmentReason: \"\" });\n setSelectedId(null);\n setIsLoading(false);\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const onUpdateStockAdjustment = async (isComplete = false) => {\n setIsLoading(true);\n const result = await apiUpdateStockAdjustment(\n formData,\n productList,\n isComplete\n );\n if (result) {\n showSuccessToast(\n \n Stock Adjustment completed successfully\n
\n );\n setTimeout(function () {\n getAdjustmentsList();\n setFormData({ statusId: 0, adjustmentReason: \"\" });\n setSelectedId(null);\n setIsLoading(false);\n }, 300);\n } else {\n setIsLoading(false);\n showErrorToast(\"Something went wrong\");\n }\n };\n\n useEffect(() => {\n if (selectedId !== 0) {\n getAdjustmentDetails();\n } else {\n setStockFormData({});\n }\n }, [selectedId]);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n getStockLocationsData();\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, []);\n\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n getAdjustmentsList();\n }, 500);\n\n return () => clearTimeout(delayDebounceFn);\n }, [status]);\n\n useEffect(() => {\n if (selectedId) {\n getAdjustmentDetails(selectedId);\n } else {\n handleChange(\"adjustmentReason\", \"\");\n }\n }, [selectedId]);\n\n function handleQuantityChange(value, index, uomId) {\n let newState = productList;\n\n if (value === \"remove\") {\n // Remove product in list\n let productsData = newState.map((item, i) => {\n return item;\n });\n productsData.splice(index, 1);\n setProductList(productsData);\n return false;\n }\n\n value = Number(value);\n\n // Check if uom is not Metre and prevent decimal value\n if (uomId !== 8 && Number(value) === value && value % 1 !== 0) {\n value = Math.trunc(value);\n }\n\n // Update product Adjusted Quantity\n let productsData = newState.map((item, i) => {\n if (i === index) {\n item.quantity = value;\n item.signedMoveQty = value;\n item.adjustedAvailableQty =\n item.initialSignedMoveQty <= 0\n ? item.availableQty + value - item.initialSignedMoveQty\n : item.availableQty + value;\n }\n return item;\n });\n setProductList(productsData);\n }\n\n const getStockProductsData = async (textSearch = \"\") => {\n const result = await apiGetStockProducts(\n localStorage.getItem(\"selectedStockLocationId\"),\n textSearch\n );\n if (result) {\n return result.records[0];\n } else {\n showErrorToast(\"Something went wrong\");\n }\n };\n\n const addProduct = async (product) => {\n if (!product) return false;\n let productData = {};\n const stockProductData = await getStockProductsData(product.barcode);\n if (stockProductData) {\n productData = {\n id: product.id,\n productId: product.id,\n moveQty: 0,\n stockCode: product.barcode,\n productName: product.name,\n image128: product.image128,\n name: product.name,\n barCode: product.barcode,\n uomData: product.uom,\n availableQty: stockProductData?.inventoryData?.available\n ? stockProductData?.inventoryData?.available\n : 0,\n adjustedAvailableQty: stockProductData?.inventoryData?.available\n ? stockProductData?.inventoryData?.available\n : 0,\n signedMoveQty: 0,\n };\n }\n\n let newState = productList;\n const existing = newState.find(\n (element) => element.productId === product.id\n );\n\n if (!existing) {\n newState.unshift(productData);\n } else {\n let invComponentsNewState = newState.map((item, i) => {\n if (item.productId === product.id) {\n item.moveQty += 1;\n }\n return item;\n });\n setProductList([...invComponentsNewState]);\n return true;\n }\n\n // Sort inventory components AFTER adding product\n newState.sort(function (a, b) {\n return new Date(b.barCode) - new Date(a.barCode);\n });\n\n setProductList([...newState]);\n };\n\n const Quantity = ({ pack, quantity, index, uomId }) => {\n // const isEach = pack == \"Each\";\n const isMeter = pack === \"Metre\" || pack === \"Feet\";\n\n const quantityMessage = isMeter ? pack : \"Quantity\";\n\n let newQuantity = uomId === 8 ? parseFloat(quantity) : parseInt(quantity);\n\n return (\n \n \n \n \n \n \n \n
\n );\n };\n\n return (\n \n \n \n \n handleQuantityChange(e.target.value, index, uomId)\n }\n onKeyDown={NumericInputChecker}\n input={{\n style: {\n textAlign: \"center\",\n color:\n newQuantity > 0\n ? \"#66CC23\"\n : newQuantity < 0\n ? \"#FF1414\"\n : \"#000\",\n },\n }}\n />\n \n \n \n \n handleQuantityChange(newQuantity + 1, index, uomId)\n }\n />\n \n handleQuantityChange(newQuantity - 1, index, uomId)\n }\n />\n \n \n \n
\n \n {isLoading ? (\n
\n \n Are you sure
you want to delete {formData?.moveName}\n
\n {isLoading ? (\n
\n \n Are you sure
you want to discard the changes?\n
\n
\n \n props.history.goBack()}\n >\n
\n \n
\n {localStorage.getItem(\"selectedStockLocationName\")}
\n\n
\n {\n setFormData({ statusId: 0, adjustmentReason: \"\" });\n setProductList([]);\n setSelectedId(0);\n }}\n >\n New Adjustment\n \n
\n \n setStatus(data.value)}\n />\n
\n \n \n \n {adjustmentsList.length === 0 && (\n \n No adjustments found\n
\n )}\n {adjustmentsList?.map((data, index) => {\n // if (localStorage.getItem(\"userType\") === \"4\" && index !== 0) {\n // return null;\n // }\n return (\n \n {searchLoading ? (\n \n Loading Stock Adjustments...\n \n ) : null}\n
\n \n
\n {data?.moveName}
\n\n {selectedId === null ? null : (\n
\n \n \n \n {formData?.id ? (\n Stock Adjustment - {formData?.moveName}\n ) : (\n New Stock Adjustment\n )}\n
\n \n {\n setFormData({ statusId: 0, adjustmentReason: \"\" });\n setSelectedId(null);\n setProductList([]);\n }}\n >\n Close\n \n
\n )}\n \n Completed By: {formData.completedBy}\n
\n \n Completed Date Time:{\" \"}\n {formatDateTime(\n formData.completedDateTime,\n true\n )}\n \n
\n \n \n Completed Date Time:{\" \"}\n {formatDateTime(\n formData.completedDateTime,\n true\n )}\n \n
\n Deleted By: {formData.deletedBy}\n
\n \n Deleted Date Time:{\" \"}\n {formatDateTime(formData.deletedDateTime, true)}\n \n
\n \n )}\n \n \n Deleted Date Time:{\" \"}\n {formatDateTime(formData.deletedDateTime, true)}\n \n
\n \n \n \n \n \n \n \n Stock Code\n \n \n \n \n {formData.statusId === 0\n ? \"Adjusted\"\n : \"Adjustment\"}\n \n \n {formData.statusId === 0 && (\n \n \n Available\n \n \n )}\n \n
\n \n {productList?.map((card, index) => {\n return (\n\n \n \n \n \n {formData.statusId === 0 ? (\n \n 0\n ? \"#66CC23\"\n : card.signedMoveQty < 0\n ? \"#FF1414\"\n : \"#000\",\n }}\n >\n {card.signedMoveQty}\n
\n )}\n \n \n {productList?.map((card, index) => {\n return (\n
\n \n {card.barCode}\n \n
\n \n \n Stock Description:{\" \"}\n \n \n {card?.productName}\n \n
\n \n {formData.statusId === 0 ||\n !formData.statusId ? (\n \n handleQuantityChange(\n \"remove\",\n index,\n 0\n )\n }\n >\n \n
\n \n \n \n );\n })}\n \n \n \n \n
Success!
\nQuote has been accepted.
\n {!window.localStorage.getItem(\"user\") && (\n <>\nLogin to BOAhub for more details.
\n\n \n )}\n \n
Error
\nUnable to access this page.
\n \nError
\nUnable to accept the quote.
\n{data.description}
\n \n\n Customer Added Successfully\n
\n );\n setIsOpen(false);\n setIsLoading(false);\n }\n }\n } catch (e) {\n setIsLoading(false);\n }\n };\n\n const onSubmitAddContact = async (id) => {\n try {\n const contactData = await apiAddContact(contactFormData, id);\n if (contactData) {\n getCustomersList();\n if (selectedId !== id) {\n setSelectedId(id);\n } else {\n getCustomerData();\n }\n setAddContactOpen(false);\n setContactFormData({});\n showSuccessToast(\n \n Contact Added Successfully\n
\n );\n setIsOpen(false);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onSubmitUpdateCustomer = async () => {\n setCustomerSaved(true);\n if (!formData.companyName || formData.companyName === \"\") {\n showErrorToast(\"Company Name field is required\");\n return false;\n }\n if (\n !formData.useGlobalLabour &&\n (formData.labourFee === \"\" || formData.labourFee === null)\n ) {\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n if (\n !formData.useGlobalTravel &&\n (formData.travelFee === \"\" || formData.travelFee === null)\n ) {\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n if (\n !formData.useGlobalMarkup &&\n (formData.markupPercent === \"\" || formData.markupPercent === null)\n ) {\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n\n try {\n const contactData = await apiUpdateCustomer(formData);\n if (contactData) {\n setCustomerSaved(false);\n getCustomersList();\n getCustomerData();\n setAddContactOpen(false);\n setContactFormData({});\n showSuccessToast(\n \n Customer Updated Successfully\n
\n );\n setIsOpen(false);\n setIsLoading(false);\n } else {\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onSubmitUpdateContact = async () => {\n setContactSaved(true);\n if (contactFormData.contactName) {\n if (contactFormData.email) {\n contactFormData.email = contactFormData.email.trim().toLowerCase();\n if (!isValidEmail(contactFormData.email)) {\n showErrorToast(\"Invalid contact email\");\n return false;\n }\n }\n } else {\n showErrorToast(\"Please complete all required fields\");\n return false;\n }\n try {\n const contactData = await apiUpdateContact(contactFormData);\n if (contactData) {\n setContactSaved(false);\n getCustomersList();\n getCustomerData();\n setAddContactOpen(false);\n setContactFormData({});\n showSuccessToast(\n \n Contact Updated Successfully\n
\n );\n setIsOpen(false);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onDeleteCustomer = async (includeContacts) => {\n setIsLoading(true);\n try {\n const customerData = await apiDeleteCustomer(\n includeContacts,\n selectedCustomer.id\n );\n if (customerData) {\n getCustomersList();\n showSuccessToast(\n \n Customer Deleted Successfully\n
\n );\n setSelectedCustomer({});\n setOpenRemoveCustomer(false);\n setOpenDeleteCustomer(false);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const onDeleteContact = async () => {\n setIsLoading(true);\n try {\n const contactData = await apiDeleteContact(selectedContact);\n if (contactData) {\n getCustomersList();\n getCustomerData();\n showSuccessToast(\n \n Contact Deleted Successfully\n
\n );\n setSelectedContact({});\n setOpenRemoveContact(false);\n setIsLoading(false);\n } else {\n showErrorToast(\"Something went wrong\");\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setIsLoading(false);\n }\n };\n\n const handleFileChange = (event) => {\n const file = event.target.files[0];\n const userName = localStorage.getItem(\"user\");\n if (file) {\n Papa.parse(file, {\n complete: (result) => {\n let resultData = result.data;\n\n resultData.map(async (customer) => {\n customer.id = 0;\n customer.isDeleted = false;\n customer.userName = userName;\n customer.companyName = customer[\"Customer Name (required)\"]\n ? customer[\"Customer Name (required)\"].trim()\n : \"\";\n customer.customerName = customer[\"Customer Name (required)\"]\n ? customer[\"Customer Name (required)\"].trim()\n : \"\";\n customer.contactName = customer[\"Contact Name\"]\n ? customer[\"Contact Name\"].trim()\n : \"\";\n customer.contactNumber = customer[\"Contact Number\"];\n customer.email = customer[\"Contact Email\"];\n customer.discountPercent =\n customer[\"Customer Specific Discount (%)\"];\n customer.useGlobalMarkup = customer[\"Customer Specific Markup (%)\"]\n ? false\n : true;\n customer.markupPercent = customer[\"Customer Specific Markup (%)\"];\n customer.useGlobalLabour = customer[\"Labour Fee ($)\"]\n ? true\n : false;\n customer.labourFee = customer[\"Labour Fee ($)\"];\n customer.useGlobalTravel = customer[\"Travel Fee ($)\"]\n ? true\n : false;\n customer.travelFee = customer[\"Travel Fee ($)\"];\n if (customer.email) {\n customer.email = customer.email.trim().toLowerCase();\n if (!isValidEmail(customer.email)) {\n customer.hasInvalidEmail = true;\n }\n }\n });\n\n console.log(resultData);\n\n let data = resultData.filter((obj) => {\n return (\n (obj.customerName !== undefined &&\n obj.customerName !== null &&\n obj.customerName !== \"\") ||\n (obj.contactName !== undefined &&\n obj.contactName !== null &&\n obj.contactName !== \"\") ||\n (obj.contactNumber !== undefined &&\n obj.contactNumber !== null &&\n obj.contactNumber !== \"\") ||\n (obj.email !== undefined &&\n obj.email !== null &&\n obj.email !== \"\")\n );\n });\n\n let list = data.reduce((result, currentItem) => {\n currentItem.customerId = 0;\n\n const group = result.find(\n (groupItem) =>\n groupItem.companyName.toLowerCase() ===\n currentItem.companyName.toLowerCase() &&\n groupItem.contactName.toLowerCase() ===\n currentItem.contactName.toLowerCase()\n );\n\n if (group) {\n group.isDeleted = false;\n group.userName = userName;\n group.companyName = currentItem.companyName;\n group.customerName = currentItem.customerName;\n group.discountPercent = currentItem.discountPercent\n ? currentItem.discountPercent\n : group.discountPercent;\n group.markupPercent = currentItem.markupPercent\n ? currentItem.markupPercent\n : group.markupPercent;\n group.labourFee = currentItem.labourFee\n ? currentItem.labourFee\n : group.labourFee;\n group.travelFee = currentItem.travelFee\n ? currentItem.travelFee\n : group.travelFee;\n group.customerContacts.push(currentItem);\n } else {\n result.push({\n isDeleted: false,\n userName: userName,\n companyName: currentItem.companyName,\n customerName: currentItem.customerName,\n contactName: currentItem.contactName,\n contactNumber: currentItem.contactNumber,\n email: currentItem.email,\n discountPercent: currentItem.discountPercent,\n useGlobalMarkup: currentItem.useGlobalMarkup,\n markupPercent: currentItem.markupPercent,\n useGlobalLabour: currentItem.useGlobalLabour,\n labourFee: currentItem.labourFee,\n useGlobalTravel: currentItem.useGlobalTravel,\n travelFee: currentItem.travelFee,\n useGlobalTravel: currentItem.useGlobalTravel,\n hasInvalidEmail: currentItem.hasInvalidEmail,\n customerContacts: [currentItem],\n });\n }\n\n return result;\n }, []);\n\n list.map((obj) => {\n data.map((customer) => {\n if (\n obj.companyName.toLowerCase() ===\n customer.companyName.toLowerCase()\n ) {\n obj.discountPercent = customer.discountPercent\n ? customer.discountPercent\n : obj.discountPercent;\n obj.markupPercent = customer.markupPercent\n ? customer.markupPercent\n : obj.markupPercent;\n obj.labourFee = customer.labourFee\n ? customer.labourFee\n : obj.labourFee;\n obj.travelFee = customer.travelFee\n ? customer.travelFee\n : obj.travelFee;\n }\n });\n });\n\n // Handle decimals for customer specific fields\n list.map((obj) => {\n obj.discountPercent = isNumber(obj.discountPercent)\n ? parseFloat(obj.discountPercent).toFixed(1)\n : obj.discountPercent;\n obj.markupPercent = isNumber(obj.markupPercent)\n ? parseFloat(obj.markupPercent).toFixed(1)\n : obj.markupPercent;\n obj.labourFee = isNumber(obj.labourFee)\n ? parseFloat(obj.labourFee).toFixed(2)\n : obj.labourFee;\n obj.travelFee = isNumber(obj.travelFee)\n ? parseFloat(obj.travelFee).toFixed(2)\n : obj.travelFee;\n });\n\n setJsonResultData(list);\n setJsonResult(list);\n },\n header: true, // Set this to true if your CSV file has headers\n });\n }\n };\n\n function isNumber(value) {\n return !isNaN(value) && value.trim() !== \"\";\n }\n\n // Error checker for number fields\n function hasError(quantity) {\n let hasError = false;\n\n if (quantity === \"\") return false;\n if (isNaN(quantity)) {\n hasError = true;\n }\n if (!Number.isFinite(Number(parseFloat(quantity)))) {\n hasError = true;\n }\n if (quantity < 0) {\n hasError = true;\n }\n return hasError;\n }\n\n const generateCSV = () => {\n const csvContent = [\n [\n \"Customer Name (required)\",\n \"Contact Name\",\n \"Contact Number\",\n \"Contact Email\",\n \"Customer Specific Discount (%)\",\n \"Customer Specific Markup (%)\",\n \"Labour Fee ($)\",\n \"Travel Fee ($)\",\n ],\n // Add more data rows here\n ];\n\n const csvRows = csvContent.map((row) => row.join(\",\")); // Join each row with a comma\n\n return csvRows.join(\"\\n\"); // Join rows with a newline character\n };\n\n const onSaveCustomersAndContacts = async () => {\n // Validate all payload data for errors\n let errorCount = 0;\n jsonResult.map((data) => {\n if (hasError(data.markupPercent)) errorCount++;\n if (hasError(data.labourFee)) errorCount++;\n if (hasError(data.travelFee)) errorCount++;\n if (hasError(data.discountPercent)) errorCount++;\n });\n if (errorCount > 0) {\n showErrorToast(\"Please correct all data before importing\");\n return false;\n }\n\n let hasDataError = false;\n jsonResult.map((data) => {\n if (!data.customerName || data.hasInvalidEmail) {\n hasDataError = true;\n }\n });\n\n if (hasDataError) {\n showErrorToast(\"Please correct all data before importing\");\n return false;\n }\n\n let groupedCustomers = jsonResultData.reduce((result, currentItem) => {\n currentItem.customerId = 0;\n\n const group = result.find(\n (groupItem) =>\n groupItem.companyName.toLowerCase() ===\n currentItem.companyName.toLowerCase()\n );\n\n if (group) {\n group.customerContacts.push(currentItem);\n } else {\n result.push(currentItem);\n }\n\n return result;\n }, []);\n\n let postData = groupedCustomers.map((obj) =>\n filterObject(obj, customerContactModel)\n );\n\n setIsLoading(true);\n setCustomersLoading(true);\n setOnCustomerEdit(false);\n try {\n const data = await apiSaveCustomersAndContacts(postData);\n if (data) {\n showSuccessToast(\n \n Customers and Contacts Updated\n Successfully\n
\n );\n setTimeout(() => {\n window.location.reload();\n }, 1000);\n } else {\n showErrorToast(\"Something went wrong\");\n setCustomersLoading(false);\n setIsLoading(false);\n }\n } catch {\n showErrorToast(\"Something went wrong\");\n setCustomersLoading(false);\n setIsLoading(false);\n }\n };\n\n // Function to filter objects based on the given model\n const filterObject = (obj, model) => {\n return Object.keys(model).reduce((acc, key) => {\n if (Array.isArray(model[key]) && Array.isArray(obj[key])) {\n // Recursively filter arrays of objects\n acc[key] = obj[key].map((item) => filterObject(item, model[key][0]));\n } else if (obj[key] !== undefined) {\n // Keep only keys present in the model\n acc[key] = obj[key];\n }\n return acc;\n }, {});\n };\n\n useEffect(() => {\n if (selectedId != \"\") {\n setFormData(null);\n getCustomerData();\n }\n }, [selectedId]);\n\n useEffect(() => {\n const accountType = localStorage.getItem(\"accountType\");\n const userType = localStorage.getItem(\"userType\");\n if (userType === \"4\" || accountType === \"2\" || accountType === \"3\") {\n props.history.push(\"/\");\n }\n\n const delayDebounceFn = setTimeout(async () => {\n getCustomersList(\"\", null, true);\n }, 300);\n\n return () => clearTimeout(delayDebounceFn);\n }, []);\n\n const handleDiscountInput = (event) => {\n if (event.target.value === \"\") {\n handleChange(\"discountPercent\", \"\");\n }\n };\n\n const handleClearDiscount = () => {\n handleChange(\"discountPercent\", \"\");\n };\n\n const DiscountInput = () => {\n return (\n \n \n \n \n \n \n \n
\n );\n };\n\n const NumericInputChecker = (event, decimalPlaces = 2) => {\n const { key, target } = event;\n const inputValue = target.value;\n console.log(inputValue);\n\n // Check if there is already a decimal point\n const hasDecimal = inputValue.includes(\".\");\n const decimalIndex = inputValue.indexOf(\".\");\n const isAfterDecimal =\n decimalIndex !== -1 && target.selectionStart > decimalIndex;\n const digitsAfterDecimal = isAfterDecimal\n ? inputValue.slice(decimalIndex + 1).length\n : 0;\n\n // Allow control keys like Backspace, Delete, and Arrow keys\n const allowedKeys = [\n \"Backspace\",\n \"Delete\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Tab\",\n ];\n\n // Handle input conditions\n if (\n // Allow numeric keys (0-9) if they don't exceed the allowed decimal places\n (!isNaN(key) &&\n (!isAfterDecimal || digitsAfterDecimal < decimalPlaces)) ||\n // Allow essential control keys\n allowedKeys.includes(key) ||\n // Allow one decimal point\n (key === \".\" && !hasDecimal)\n ) {\n return; // Allow input if conditions are met\n }\n\n // Prevent all other keys\n event.preventDefault();\n };\n\n const customerListGrouped = Object.entries(customerList)?.map(\n ([category, list], index) => (\n \n {\n if (e.key === \"Enter\") {\n handleChange(\"discountPercent\", e.target.value);\n }\n }}\n onBlurHandler={(e) => {\n handleChange(\"discountPercent\", e.target.value);\n }}\n onInputHandler={handleDiscountInput}\n onClearHandler={handleClearDiscount}\n name=\"quantity\"\n min={0}\n max={100}\n maxLength={6}\n className=\"form-control\"\n precision={2}\n step={1}\n value={formData?.discountPercent}\n />\n
\n \n \n {category}\n \n {list?.map((data, i) => {\n return (\n \n \n \n \n {\n if (selectedId !== data?.id) {\n setSelectedId(data.id);\n } else {\n setSelectedId(\"\");\n setFormData(null);\n }\n }}\n >\n \n {data.companyName} \n \n \n \n {data.id !== -1 ? (\n {\n if (selectedId !== data?.id) {\n setSelectedId(data.id);\n } else {\n setSelectedId(\"\");\n setFormData(null);\n }\n }}\n >\n 0 ? \"#66CC23\" : \"#AFABAB\",\n }}\n >\n 0 ? \"#66CC23\" : \"\",\n }}\n link\n name=\"user\"\n />\n {data.contactsCount}\n
\n \n \n \n \n \n );\n })}\n \n )\n );\n\n return (\n \n {\n setSelectedCustomer(data);\n setOpenRemoveCustomer(true);\n }}\n />\n
\n ) : null}\n \n \n {isLoading ? (\n
\n \n Are you sure
you want to delete customer?\n
\n
\n {selectedCustomer.companyName}\n
\n {isLoading ? (\n
\n \n Do you want to delete all contacts
\n attached to {selectedCustomer.companyName}\n
\n {isLoading ? (\n
\n \n Are you sure
you want to delete contact?\n
\n
\n {selectedContact.contactName}\n
\n
\n \n {customerSearchTypeFullName}\n
\n )}\n \n \n
\n {\n setIsAddContactFromCustomer(false);\n setIsAddCompany(false);\n setContactSaved(false);\n setOnCustomerEdit(false);\n setAddContactOpen(true);\n }}\n >\n
\n \n {\n setOnCustomerEdit(false);\n setCsvUploadOpen(true);\n }}\n >\n Bulk Upload Contacts\n \n
\n \n \n \n No Customers Found\n
\n )}\n \n {searchLoading ? (\n \n Loading Customers...\n \n ) : null}\n
\n {!searchLoading && Object.keys(customerList).length === 0 && (\n \n {!onCustomerEdit ? (\n \n handleChange(\"companyName\", data.value)\n }\n />\n )}\n
\n \n {formData?.companyName}\n
\n ) : (\n\n {!onCustomerEdit ? (\n setOnCustomerEdit(true)}\n >\n Edit\n \n ) : (\n <>\n onSubmitUpdateCustomer()}\n >\n Confirm\n \n {\n getCustomerData();\n setOnCustomerEdit(false);\n }}\n >\n Cancel\n \n \n )}\n
\n ) : null}\n \n
\n
Are you sure you want to logout?
\n\n {isLoggedIn ? (\n \n {routes} \n \n \n
\n ) : (\n \n \n {window.location.pathname.includes(\"/home\") ? (\n <>\n \n {banners.length > 0 &&\n banners.map((image, index) => (\n \n goToPage(page)}\n />\n \n props.history.push(\"/company-ranking\")}\n >\n Check Your Hose Assembly Comp Ranking!\n \n
\n ) : null} */}\n \n \n
\n ))}\n \n Please choose the correct stock location for this order\n
\n \n \n