{"version":3,"file":"productDetails.min.js","names":["GetUserSelectedBranch","RefreshBranchStock","window","onpopstate","console","log","location","reload","ProductDetails","props","getFormatedPriceValue","number","Intl","NumberFormat","style","currency","format","prodCodeSize","content","$","mouseover","e","size","Math","round","outerWidth","leftPos","attr","parents","hasClass","append","mouseout","t","target","parent","is","find","remove","tooltipFix","length","each","arr","push","index","eq","addClass","removeClass","_AntiForgeryToken","id","ajax","url","type","dataType","beforeSend","xhr","setRequestHeader","success","data","complete","html","responseText","error","version","gstper","productId","URLPATH","pathname","split","APIEndPoint","origin","PRONTOCODE","responseData","setResponseData","React","useState","relatedProducts","setRelatedProducts","warningMessage","setWarningMessage","warningType","setWarningType","tempValue","setTempValue","tempIndex","setTempIndex","softErrorArray","setSoftErrorArray","cancelIndex","setCancelIndex","oldQTY","setOldQTY","qtyUpdate","setQtyUpdate","qtypId","setQtypId","qtyIndex","setQtyIndex","qtyRefresh","setQtyRefresh","selectedBranch","setSelectedBranch","productName","brandName","brandMedia","category1","category2","category3","manufacturerNumber","itemNumber","middysPartNumber","unitOfMeasure","description","images","attributes","attributeGroups","warranty","datasheets","showLoader","setShowLoader","isLoaded","setIsLoaded","setError","currentQty","setCurrentQty","currentPrice","setCurrentPrice","addScript","myobj","document","getElementsByClassName","i","script","createElement","setAttribute","src","body","appendChild","addToJobListScript","showLoginPopup","fadeIn","show","isLoggedIn","loginToken","getLogin","hasJobListPermission","jlPermissionToken","getJobListPermission","getProductName","pname","name","re1","replace","re2","re3","toLowerCase","CTA_status","CTAStatus","setCTAStatus","CTA_html","getElementById","innerHTML","query","productDataResponseCode","apiCallToGetProducts","fetch","method","headers","RequestVerificationToken","val","then","results","status","href","json","hasOwnProperty","StatusCode","ErrorMessage","errors","Object","keys","parseInt","product_default_quantity","parseFloat","price","related_products","map","p","setTimeout","addGoogleAnalyticsEvent","event","branch","MiddysSelectedBranch","company","MiddysAccountNumber","value","items","item_id","product_pronto_code","item_name","useEffect","fetchProductDetails","requestVerificationToken","key","setKey","Date","now","reloadProductDetailComponent","update_SelectedBranchStockAvailability","Latitude","Longitude","stockStatusElement","inventory","product_stock","stock_status_msg","stock_img_ind","product_uom_plural","stockAmount","empty","text","toLocaleString","minimumFractionDigits","maximumFractionDigits","css","BranchName","BranchAddress","Suburb","State","Postcode","displayName","brand","medias","preview_uri","hierarchy_categories","a","attribute","groupName","group_name","group","getMatrixTable","matrixDataAttributes","matrix","HTML","HTMLHEAD","arrColumn","globalArray","Array","currColumn","mat","mi","rows","mrv","mri","indexOf","colName","td","j","getImage","className","item","bi","alt","loading","handlePlusMinusClick","includes","handleInputType","re","test","random","handleInputOnBlur","handlePlusMinusClickRelated","newFlag","assign","setJobListProducts","handleWorningPopuuClick","tem","hide","handleCheckStockAvailability","animate","right","sliderContainer","scrollTop","pageYOffset","documentElement","scrollLeft","pageXOffset","timeout","clearTimeout","handleCancelPopupClick","handleInputTypeRelated","JobListProductId","handleInputOnBlurRelated","generateProductStructuredData","structuredData","\"@context\"","\"@type\"","sku","mpn","image","offers","priceCurrency","priceValidUntil","setFullYear","getFullYear","toISOString","availability","seller","height","display","openDivClass","openDivClassRelatedProducts","dangerouslySetInnerHTML","__html","JSON","stringify","script1","fontSize","ItemID","class","onClick","preventDefault","\"data-productcode\"","\"data-productqty\"","NaN","\"data-productprice\"","localStorage","setItem","Fragment","toFixed","onChange","onBlur","\"data-id\"","grp","gindex","sg","g","display_name","unit","ds","d","Name","file_name","file","dataSheetLabel","content_type","labels","download","toUpperCase","wr","w","pronto_code","uom","min","dataId","gst","ReactDOM","render","querySelector"],"sources":["productDetails.js"],"sourcesContent":["\"use strict\";\r\n\r\nimport { GetUserSelectedBranch, RefreshBranchStock } from './Service.min.js';\r\n\r\nwindow.onpopstate = function (e) {\r\n console.log(\"Page reload\");\r\n location.reload(true);\r\n};\r\nconst ProductDetails = (props) => {\r\n\r\n const {\r\n version,\r\n gstper\r\n } = props;\r\n\r\n var listingPageURL = \"/c\";\r\n\r\n var URLPATH = window.location.pathname.split('/');\r\n var APIEndPoint = window.location.origin;\r\n var PRONTOCODE = URLPATH[URLPATH.length - 1];\r\n\r\n var productId;\r\n\r\n if (PRONTOCODE !== null && PRONTOCODE !== undefined && PRONTOCODE !== '') {\r\n productId = PRONTOCODE;\r\n }\r\n\r\n const [responseData, setResponseData] = React.useState(null);\r\n const [relatedProducts, setRelatedProducts] = React.useState([]);\r\n //soft and hard limit\r\n\r\n const [warningMessage, setWarningMessage] = React.useState('');\r\n const [warningType, setWarningType] = React.useState('');\r\n const [tempValue, setTempValue] = React.useState(null);\r\n const [tempIndex, setTempIndex] = React.useState(null);\r\n const [softErrorArray, setSoftErrorArray] = React.useState([]);\r\n const [cancelIndex, setCancelIndex] = React.useState('');\r\n const [oldQTY, setOldQTY] = React.useState('');\r\n const [qtyUpdate, setQtyUpdate] = React.useState('');\r\n const [qtypId, setQtypId] = React.useState('');\r\n const [qtyIndex, setQtyIndex] = React.useState('');\r\n const [qtyRefresh, setQtyRefresh] = React.useState('');\r\n const [selectedBranch, setSelectedBranch] = React.useState(null);\r\n\r\n\r\n // productName\r\n var productName = \"\";\r\n // brandMedia\r\n var brandName = \"\";\r\n var brandMedia = \"\";\r\n //category\r\n var category1 = \"\";\r\n var category2 = \"\";\r\n var category3 = \"\";\r\n\r\n var manufacturerNumber = \"\";\r\n var itemNumber = \"\";\r\n var middysPartNumber = \"\";\r\n var unitOfMeasure = \"\";\r\n var description = \"\";\r\n var images = [];\r\n var attributes = [];\r\n // specification\r\n var speTab = \"\";\r\n var attributeGroups = [];\r\n var speGeneral = [];\r\n var speDimensions = [];\r\n var speOperating = [];\r\n var speElectric = [];\r\n var speComplience = [];\r\n var speTechnical = [];\r\n var warranty = [];\r\n\r\n // Teach document\r\n var datasheets = [];\r\n const [showLoader, setShowLoader] = React.useState(true);\r\n const [isLoaded, setIsLoaded] = React.useState(false);\r\n const [error, setError] = React.useState(null);\r\n\r\n const [currentQty, setCurrentQty] = React.useState(1);\r\n const [currentPrice, setCurrentPrice] = React.useState(0);\r\n function getFormatedPriceValue(number) {\r\n return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number)\r\n }\r\n const addScript = () => {\r\n\r\n var myobj = document.getElementsByClassName(\"addScript\");\r\n for (var i = 0; i < myobj.length; i++) {\r\n myobj[i].remove();\r\n }\r\n\r\n const script = document.createElement(\"script\");\r\n script.setAttribute(\"class\", \"addScript\");\r\n script.src = \"/js/scripts/minified/reloadscript.min.js?v=\" + version;\r\n document.body.appendChild(script);\r\n }\r\n const addToJobListScript = () => {\r\n\r\n var myobj = document.getElementsByClassName(\"AddtoJoblist\");\r\n for (var i = 0; i < myobj.length; i++) {\r\n myobj[i].remove();\r\n }\r\n\r\n const script = document.createElement(\"script\");\r\n script.setAttribute(\"class\", \"AddtoJoblist\");\r\n script.src = \"/js/scripts/minified/AddtoJoblist.min.js?v=\" + version;\r\n document.body.appendChild(script);\r\n }\r\n const showLoginPopup = () => {\r\n $(\".login-popup\").fadeIn();\r\n $(\".login\").fadeIn();\r\n $(\".login-popup .dialog .close-dialog\").show();\r\n }\r\n const addshareButtonScript = () => {\r\n var myobj = document.getElementsByClassName(\"addScriptButton\");\r\n for (var i = 0; i < myobj.length; i++) {\r\n myobj[i].remove();\r\n }\r\n\r\n const script1 = document.createElement(\"script\");\r\n script1.setAttribute(\"class\", \"addScriptButton\");\r\n script1.setAttribute(\"crossorigin\", \"anonymous\");\r\n script1.src = \"https://static.addtoany.com/menu/page.js\";\r\n document.body.appendChild(script1);\r\n }\r\n\r\n const isLoggedIn = () => {\r\n var loginToken = getLogin() == 'True' ? 'Login' : null;\r\n if (loginToken == null || loginToken == '' || loginToken == undefined) {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n }\r\n const hasJobListPermission = () => {\r\n var jlPermissionToken = getJobListPermission() == 'True' ? 'Permission' : null;\r\n if (jlPermissionToken == null || jlPermissionToken == '' || jlPermissionToken == undefined) {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n }\r\n const getProductName = (pname) => {\r\n var name = '';\r\n let re1 = /[^\\w\\d]/ig;\r\n name = pname.replace(re1, '-');\r\n let re2 = /[ ]/;\r\n name = name.replace(re2, '-');\r\n let re3 = /-+/g;\r\n name = name.replace(re3, '-');\r\n return name.toLowerCase();\r\n }\r\n\r\n function prodCodeSize() {\r\n var content = 'Middy’s Part Number (Product Code)';\r\n $('.prod-code').mouseover(function (e) {\r\n var size = Math.round($(this).outerWidth());\r\n var leftPos = ((size - 230) / 2) + 'px';\r\n $(this).attr('data-size', size + 'px');\r\n if (!$(this).parents().hasClass('cart-collection-block')) {\r\n $(this).append('' + content + '')\r\n }\r\n else if ($(this).parents().hasClass('order-detail-block')) {\r\n $(this).append('' + content + '')\r\n }\r\n\r\n })\r\n\r\n $('.prod-code').mouseout(function (e) {\r\n var t = e.target;\r\n if (!$(t).parent().is('.prod-code')) {\r\n $(this).find('.prod-tooltip').remove();\r\n }\r\n })\r\n tooltipFix();\r\n }\r\n function tooltipFix() {\r\n if ($('.products-slider').length > 0) {\r\n $('.products-slider').each(function () {\r\n var arr = []\r\n $(this).find('.owl-stage .owl-item').each(function () {\r\n if ($(this).hasClass('active')) {\r\n arr.push($(this).index());\r\n }\r\n })\r\n $(this).find('.owl-stage .owl-item').eq(arr[0]).addClass('movetooltip');\r\n $(this).find('.owl-stage .owl-item:not(.active)').removeClass('movetooltip');\r\n })\r\n }\r\n }\r\n //Ribbon CTA\r\n var CTA_status = $('#pdp_cta').attr(\"data-active\");\r\n const [CTAStatus, setCTAStatus] = React.useState(CTA_status);\r\n var CTA_html = $(\"#pdp_cta\").length ? document.getElementById(\"pdp_cta\").innerHTML : null;\r\n function _AntiForgeryToken(id) {\r\n $.ajax({\r\n url: \"/login/RefreshToken\",\r\n type: \"GET\",\r\n dataType: \"json\",\r\n beforeSend: function (xhr) {\r\n xhr.setRequestHeader('Content-Type', 'application/json');\r\n },\r\n success: function (data) {\r\n //console.log(data);\r\n },\r\n complete: function (data) {\r\n //console.log(\"Hello\", data);\r\n $(id).html(data.responseText);\r\n // Set our complete callback, \r\n },\r\n error: function (e) {\r\n //alert(\"error\");\r\n }\r\n });\r\n }\r\n\r\n var query = \"\";\r\n if (productId !== \"\" && productId !== null && productId !== undefined) {\r\n query += productId;\r\n }\r\n var productDataResponseCode = ''; \r\n const apiCallToGetProducts = () => {\r\n fetch(APIEndPoint + \"/api/middys?name=productDetail&id=\" + query, {\r\n method: 'GET',\r\n headers: {\r\n \"RequestVerificationToken\": $(\"#PDP_API [name='__RequestVerificationToken']\").val()\r\n }\r\n }).then(results => {\r\n productDataResponseCode = results.status;\r\n if (productDataResponseCode == 204) {\r\n window.location.href = window.location.origin + '/404';\r\n }\r\n return results.json();\r\n }).then((data) => {\r\n _AntiForgeryToken(\"#PDP_API\");\r\n addScript();\r\n addToJobListScript();\r\n if (data) {\r\n if (data.hasOwnProperty('StatusCode')) {\r\n if (data.StatusCode === 204 || data.StatusCode === 500 || data.StatusCode === 404) {\r\n window.location.href = window.location.origin + '/404';\r\n }\r\n if (data.hasOwnProperty('ErrorMessage')) {\r\n setError(data.ErrorMessage);\r\n }\r\n setShowLoader(false);\r\n }\r\n setIsLoaded(true);\r\n if (data.hasOwnProperty('errors')) {\r\n if (data.status == 400) {\r\n window.location.href = window.location.origin + '/404';\r\n }\r\n setError(data.errors);\r\n setShowLoader(false);\r\n }\r\n else {\r\n if (Object.keys(data).length > 0) {\r\n setResponseData(data);\r\n $('#searchProductNumber').val(productId);\r\n if (data.hasOwnProperty(\"product_default_quantity\")) {\r\n setCurrentQty(parseInt(data.product_default_quantity));\r\n }\r\n if (data.hasOwnProperty(\"price\")) {\r\n setCurrentPrice(parseFloat(data.price));\r\n }\r\n setShowLoader(false);\r\n if (data.hasOwnProperty(\"related_products\")) {\r\n if (data.hasOwnProperty('related_products')) {\r\n data.related_products.map(p => {\r\n if (p.hasOwnProperty(\"product_default_quantity\") && p.product_default_quantity !== '') {\r\n p.currentQty = parseInt(p.product_default_quantity);\r\n } else {\r\n p.currentQty = 1;\r\n }\r\n\r\n if (p.hasOwnProperty(\"price\") && p.price !== '') {\r\n p.currentPrice = parseFloat(p.price);\r\n } else {\r\n p.currentPrice = 1;\r\n }\r\n }\r\n );\r\n }\r\n setRelatedProducts(data.related_products);\r\n }\r\n prodCodeSize();\r\n setTimeout(() => {\r\n tooltipFix();\r\n }, 1000);\r\n\r\n }\r\n }\r\n addGoogleAnalyticsEvent({\r\n event: \"viewItem\",\r\n branch: window.MiddysSelectedBranch,\r\n company: window.MiddysAccountNumber,\r\n currency: \"AUD\",\r\n value: data.price,\r\n items: {\r\n item_id: data.product_pronto_code,\r\n item_name: data.name,\r\n price: data.price\r\n },\r\n });\r\n } else {\r\n console.log(\"Some thing went Wrong...\");\r\n setShowLoader(false);\r\n }\r\n }, (error) => {\r\n _AntiForgeryToken(\"#PDP_API\");\r\n setIsLoaded(true);\r\n setError(error);\r\n setShowLoader(false);\r\n\r\n })\r\n }\r\n\r\n React.useEffect(() => {\r\n\r\n const fetchProductDetails = async () => {\r\n setShowLoader(true);\r\n apiCallToGetProducts();\r\n const requestVerificationToken = $(\"#PDP_API [name='__RequestVerificationToken']\").val();\r\n const branch = await GetUserSelectedBranch(requestVerificationToken);\r\n setSelectedBranch(branch);\r\n };\r\n\r\n fetchProductDetails();\r\n\r\n }, [productId]);\r\n\r\n const [key, setKey] = React.useState(Date.now()); // Initialize with current timestamp\r\n React.useEffect(() => {\r\n const reloadProductDetailComponent = async () => {\r\n apiCallToGetProducts();\r\n const requestVerificationToken = $(\"#PDP_API [name='__RequestVerificationToken']\").val();\r\n const branch = await GetUserSelectedBranch(requestVerificationToken);\r\n setSelectedBranch(branch);\r\n setKey(Date.now());\r\n };\r\n\r\n window.reloadProductDetailComponent = reloadProductDetailComponent;\r\n }, []);\r\n\r\n const update_SelectedBranchStockAvailability = async () => {\r\n\r\n RefreshBranchStock(selectedBranch.Latitude, selectedBranch.Longitude, productId, $(\"#PDP_API [name='__RequestVerificationToken']\").val());\r\n\r\n const stockStatusElement = $('#selected-branch-stock');\r\n const { inventory } = responseData || {};\r\n\r\n if (inventory) {\r\n const { product_stock, stock_status_msg, stock_img_ind, product_uom_plural } = inventory;\r\n const stockAmount = parseInt(product_stock, 10);\r\n\r\n stockStatusElement.empty(); // Clear existing content\r\n\r\n if (stockAmount > 0) {\r\n stockStatusElement\r\n .addClass('stock-status')\r\n .removeClass('out-stock')\r\n .text(`${stock_status_msg || ''} (${stockAmount.toLocaleString('en-AU', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} ${product_uom_plural || ''} Available)`);\r\n } else {\r\n stockStatusElement\r\n .addClass('stock-status')\r\n .addClass(stock_img_ind === \"N\" ? 'out-stock' : '')\r\n .css('fontSize', '14px')\r\n .text(stock_status_msg || '');\r\n }\r\n }\r\n\r\n $('#selected-branch-name').text(`Middys's ${selectedBranch.BranchName}`);\r\n $('#selected-branch-address').text(`${selectedBranch.BranchAddress}, ${selectedBranch.Suburb}, ${selectedBranch.State} ${selectedBranch.Postcode}`);\r\n $('#searchProductNumber').val(productId)\r\n }\r\n\r\n if (responseData !== null) {\r\n if (responseData.hasOwnProperty(\"displayName\")) {\r\n productName = responseData.displayName;\r\n }\r\n if (responseData.hasOwnProperty(\"product_pronto_code\")) {\r\n itemNumber = responseData.product_pronto_code;\r\n }\r\n if (responseData.hasOwnProperty(\"description\")) {\r\n description = responseData.description;\r\n }\r\n if (responseData.hasOwnProperty(\"images\")) {\r\n images = responseData.images;\r\n }\r\n if (responseData.hasOwnProperty(\"brand\")) {\r\n if (responseData.brand.hasOwnProperty(\"name\")) {\r\n brandName = responseData.brand.name;\r\n }\r\n if (responseData.brand.hasOwnProperty(\"medias\")) {\r\n if (responseData.brand.medias.length > 0) {\r\n if (responseData.brand.medias[0].hasOwnProperty(\"preview_uri\")) {\r\n brandMedia = responseData.brand.medias[0].preview_uri;\r\n brandMedia = brandMedia.split('?')[0];\r\n\r\n }\r\n }\r\n }\r\n }\r\n if (responseData.hasOwnProperty(\"hierarchy_categories\")) {\r\n if (responseData.hierarchy_categories.length > 0) {\r\n if (responseData.hierarchy_categories[2] !== undefined) {\r\n if (responseData.hierarchy_categories[2].hasOwnProperty(\"name\")) {\r\n category1 = responseData.hierarchy_categories[2].name;\r\n\r\n }\r\n }\r\n if (responseData.hierarchy_categories[1] !== undefined) {\r\n if (responseData.hierarchy_categories[1].hasOwnProperty(\"name\")) {\r\n category2 = responseData.hierarchy_categories[1].name;\r\n\r\n }\r\n }\r\n if (responseData.hierarchy_categories[0] !== undefined) {\r\n if (responseData.hierarchy_categories[0].hasOwnProperty(\"name\")) {\r\n category3 = responseData.hierarchy_categories[0].name;\r\n\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (responseData.hasOwnProperty(\"attributes\")) {\r\n attributes = responseData.attributes;\r\n if (attributes.length > 0) {\r\n for (var a in attributes) {\r\n var attribute = attributes[a];\r\n var groupName = attribute.group_name;\r\n if (groupName !== 'Warranty') {\r\n var group = attributeGroups.find(function (group) {\r\n return group.groupName === groupName;\r\n });\r\n if (!group) {\r\n group = { groupName: groupName, attributes: [] };\r\n if (groupName == 'General') {\r\n\r\n }\r\n attributeGroups.push(group);\r\n }\r\n if (attribute.name == \"id\") {\r\n manufacturerNumber = attribute.value;\r\n } else if (attribute.name == \"middys_code\") {\r\n middysPartNumber = attribute.value;\r\n } else {\r\n if (attribute.name == 'uom' || attribute.name == 'unit_of_measure') {\r\n unitOfMeasure = attribute.value;\r\n }\r\n group.attributes.push(attribute);\r\n }\r\n }\r\n if (attributes[a].group_name == \"Warranty\") {\r\n warranty.push(attributes[a]);\r\n }\r\n }\r\n }\r\n }\r\n if (responseData.hasOwnProperty(\"datasheets\")) {\r\n datasheets = responseData.datasheets;\r\n }\r\n }\r\n\r\n const getMatrixTable = (matrixDataAttributes) => {\r\n if (matrixDataAttributes.matrix.length > 0) {\r\n var HTML = '';\r\n var HTMLHEAD = '';\r\n var arrColumn = [];\r\n var globalArray = new Array(matrixDataAttributes.matrix.length);\r\n HTML += '
' + mat.name + ' | ';\r\n currColumn = mi;\r\n }\r\n if (mat.hasOwnProperty('rows')) {\r\n if (mat.rows.length > 0) {\r\n globalArray[currColumn] = new Array(mat.rows.length);\r\n mat.rows.map(function (mrv, mri) {\r\n if (arrColumn.indexOf(mrv.name) == -1) {\r\n arrColumn.push(mrv.name);\r\n }\r\n globalArray[currColumn][mri] = '' + mrv.value + ' | '\r\n });\r\n }\r\n }\r\n });\r\n HTML += '\t\t
---|---|
';\r\n HTML += HTMLHEAD\r\n HTML += '\t\t | |
' + colName + ' | ';\r\n globalArray.map(function (td, j) {\r\n HTML += (td[i] !== undefined ? td[i] : \"\");\r\n });\r\n HTML += ' |
{sg.display_name} | \r\n\r\n | |
---|---|---|
{sg.display_name} | \r\n {sg.value.includes(\"\\n\") ?\r\n') }}>{sg.unit !== '' && sg.unit !== null ? sg.unit : null} | \r\n :\r\n{sg.value}{sg.unit !== '' && sg.unit !== null ? sg.unit : null} | \r\n }\r\n
{wr.value} {wr.unit}
\r\n