\r\n 
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n\r\n tabModal.push(\r\n <>\r\n \r\n
\r\n \r\n {item.MediaPath.map((obj, index) => {\r\n var img = getFullMediaURL(obj.MediaPath);\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n {item.MediaPath.map((obj, index) => {\r\n var img = getFullMediaURL(obj.MediaPath);\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n 
\"\r\n );\r\n } else {\r\n var $span = $(\r\n \"\" +\r\n idioma.text +\r\n \"
\"\r\n );\r\n }\r\n return $span;\r\n };\r\n\r\n this.select2Setting.templateSelection = function (idioma) {\r\n if (idioma.id) {\r\n if (idioma.title == \"bts\") {\r\n var $span = $(\r\n \"\" +\r\n idioma.text +\r\n \"\"\r\n );\r\n } else {\r\n var $span = $(\r\n \"\" +\r\n idioma.text +\r\n \"\"\r\n );\r\n }\r\n } else {\r\n var $span = $(\"\" + idioma.text + \"\");\r\n }\r\n return $span;\r\n };\r\n }\r\n\r\n if (this.props.templateSelection) {\r\n this.select2Setting.templateSelection = this.props.templateSelection;\r\n }\r\n\r\n if (this.props.minimumResultsForSearch) {\r\n this.select2Setting.minimumResultsForSearch =\r\n this.props.minimumResultsForSearch;\r\n }\r\n\r\n // console.log(this.select2Setting)\r\n this.$el\r\n .select2(this.select2Setting)\r\n .one(\"select2:open\", this.handleOpen)\r\n .on(\"select2:selecting\", this.handleChange);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.option !== this.props.option) {\r\n this.$el.select2(\"destroy\");\r\n this.$el\r\n .select2(\r\n this.select2Setting\r\n // {\r\n // placeholder: this.props.placeholder,\r\n // allowClear: true,\r\n // //onChange: this.handleChange\r\n // }\r\n )\r\n .one(\"select2:open\", this.handleOpen)\r\n .on(\"select2:selecting\", this.handleChange);\r\n // console.log(`SelectList ${this.props.fieldName} Updated`)\r\n }\r\n if (prevProps.value !== this.props.value) {\r\n this.$el.trigger(\"change.select2\");\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n startClick(item)}>\r\n {item}\r\n \r\n );\r\n }\r\n\r\n function renderEndChild(item, index) {\r\n return (\r\n endClick(item)}>\r\n {item}\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n \r\n {value}\r\n \r\n );\r\n }\r\n\r\n return (\r\n
ลองติจูด: {propertyDetail.Longtitude}\r\n \r\n );\r\n } else if (propertyDetail.Latitude && propertyDetail.Latitude !== \"-\") {\r\n coordinateHtmls = <>ละติจูด: {propertyDetail.Latitude};\r\n } else if (propertyDetail.Longtitude && propertyDetail.Longtitude !== \"-\") {\r\n coordinateHtmls = <>ลองติจูด: {propertyDetail.Longtitude};\r\n }\r\n\r\n return (\r\n <>\r\n\r\n ข้อมูล ราคา และเงื่อนไขทรัพย์สินที่เสนอขาย\r\n อาจเปลี่ยนแปลงได้โดยผู้ขายไม่ต้องแจ้งให้ผู้ซื้อทราบล่วงหน้า\r\n \r\n \r\n ผู้ซื้อมีหน้าที่ต้องตรวจสอบข้อมูล สภาพทรัพย์สิน สถานที่ตั้งทรัพย์สิน\r\n และข้อมูลอื่นใดที่เกี่ยวข้องกับทรัพย์สินก่อนเสนอซื้อ\r\n \r\n \r\n );\r\n } else if (code == \"66\") {\r\n remarkHtml = (\r\n <>\r\n ทรัพย์ฝากขายเป็นทรัพย์สินของบุคคลภายนอก ธนาคารไม่ได้เป็นเจ้าของกรรมสิทธิ์ \r\n ข้อมูลดังกล่าวเป็นข้อมูลของผู้ฝากขาย ธนาคารไม่รับรองความถูกต้องแต่อย่างใด \r\n ธนาคารไม่มีส่วนเกี่ยวข้องกับการตกลงซื้อขายและกำหนดเงื่อนไขใดๆ \r\n ข้อมูลทรัพย์สิน, ราคา, เงื่อนไข อาจมีการเปลี่ยนแปลงโดยไม่มีการแจ้งให้ทราบล่วงหน้า \r\n \r\n ค่าพิกัดภูมิศาสตร์และการตีเส้นสีแดงในภาพข้างต้น\r\n เป็นเพียงการระบุตำแหน่งที่ตั้งและประมาณการพื้นที่เบื้องต้นของทรัพย์สินรอการขายเบื้องต้นของธนาคารเท่านั้น\r\n ซึ่งอาจมีการคลาดเคลื่อนจากสภาพความเป็นจริงได้\r\n ผู้ซื้อต้องตรวจสอบสภาพสถานที่ตั้งทรัพย์สินด้วยตนเองก่อนซื้อ\r\n \r\n สำหรับทรัพย์ฝากขายทุกประเภท ไม่เข้าร่วมโปรโมชันฟรีค่าธรรมเนียมการโอนทุกกรณี \r\n \r\n ทรัพย์ฝากขายทุกประเภทที่ไม่ติดจำนองกับธนาคารกสิกรไทย\r\n ไม่สามารถเข้าร่วม แคมเปญสินเชื่อบ้าน โครงการ K-Smart Asset (Home Loan)\r\n และโครงการสินเชื่อเพื่อลงทุนในสินทรัพย์ถาวร (K-SME Smart Asset) ได้\r\n \r\n \r\n );\r\n } else if (code == \"88\") {\r\n remarkHtml = (\r\n <>\r\n ข้อมูลทรัพย์สิน, ราคา, เงื่อนไข อาจมีการเปลี่ยนแปลงโดยไม่ต้องแจ้งให้ทราบล่วงหน้า \r\n \r\n ค่าพิกัดภูมิศาสตร์เป็นเพียงการระบุตำแหน่งที่ตั้งทรัพย์สินรอการขายเบื้องต้นของธนาคารเท่านั้น\r\n อาจมีการคลาดเคลื่อนจากสภาพความเป็นจริงได้\r\n ผู้ซื้อต้องตรวจสอบสภาพสถานที่ตั้งทรัพย์สินด้วยตนเองก่อนซื้อ\r\n \r\n \r\n หากทรัพย์สินมีผู้บุกรุกและ/หรือผู้อยู่อาศัย และ/หรือการรอนสิทธิ์\r\n ผู้เสนอซื้อตกลงรับภาระในการดำเนินการเอง เว้นแต่จะตกลงไว้เป็นอย่างอื่น\r\n \r\n \r\n โปรโมชันฟรีค่าธรรมเนียมการโอนกรรมสิทธิ์\r\n สำหรับผู้ซื้อทรัพย์มือสองของธนาคารกสิกรไทยที่เป็นทรัพย์พร้อมโอน\r\n (โอนเป็นกรรมสิทธิ์ของธนาคารแล้ว) โดยธนาคารจ่ายค่าโอนกรรมสิทธิ์ให้ตามจริง ไม่เกิน 100,000\r\n บาท โดยมีเงื่อนไขดังนี้ สำหรับลูกค้าที่เสนอซื้อและได้รับการอนุมัติขาย ตั้งแต่วันที่ 1 มกราคม 2568\r\n - 31 มีนาคม 2568 ต้องดำเนินการโอนกรรมสิทธิ์ให้แล้วเสร็จภายใน 30 วัน\r\n นับจากวันที่ธนาคารแจ้งผลการอนุมัติขาย\r\n \r\n สำหรับทรัพย์ฝากขายทุกประเภท ไม่เข้าร่วมโปรโมชันฟรีค่าธรรมเนียมการโอนทุกกรณี \r\n \r\n สำหรับทรัพย์ที่มีราคาพิเศษที่ประกาศอยู่บนเว็บไซต์\r\n ธนาคารขอสงวนสิทธิ์อนุมัติขายให้กับลูกค้าที่ทำการเสนอซื้อไม่ต่ำกว่าราคาพิเศษ\r\n และวางเงินประกันการเสนอซื้อ 1% พร้อมส่งเอกสารหลักฐานการเสนอซื้อเป็นลำดับแรก\r\n \r\n เงื่อนไขการขอคืนเงินประกัน/เงินมัดจำ \r\n \r\n กรณียื่นสินเชื่อกับธนาคารกสิกรไทยเท่านั้น ถึงจะสามารถขอเงินคืนได้โดยมีเงื่อนไขดังนี้ :\r\n \r\n \r\n );\r\n } else {\r\n remarkHtml = (\r\n <>\r\n ข้อมูลทรัพย์สิน, ราคา, เงื่อนไข อาจมีการเปลี่ยนแปลงโดยไม่ต้องแจ้งให้ทราบล่วงหน้า \r\n \r\n ค่าพิกัดภูมิศาสตร์และการตีเส้นสีแดงในภาพข้างต้น\r\n เป็นเพียงการระบุตำแหน่งที่ตั้งและประมาณการพื้นที่เบื้องต้นของทรัพย์สินรอการขายเบื้องต้นของธนาคารเท่านั้น\r\n ซึ่งอาจมีการคลาดเคลื่อนจากสภาพความเป็นจริงได้\r\n ผู้ซื้อต้องตรวจสอบสภาพสถานที่ตั้งทรัพย์สินด้วยตนเองก่อนซื้อ\r\n \r\n \r\n หากทรัพย์สินมีผู้บุกรุกและ/หรือผู้อยู่อาศัย และ/หรือการรอนสิทธิ์\r\n ผู้เสนอซื้อตกลงรับภาระในการดำเนินการเอง เว้นแต่จะตกลงไว้เป็นอย่างอื่น\r\n \r\n \r\n สำหรับทรัพย์ที่มีราคาพิเศษประกาศอยู่บนเว็บไซต์ ธนาคารขอสงวนสิทธิ อนุมัติขายให้กับ\r\n ลูกค้าที่ทำการเสนอซื้อไม่ต่ำกว่าราคาพิเศษ และวางเงินประกันการเสนอซื้อ 1%\r\n พร้อมส่งเอกสารหลักฐานการเสนอซื้อ เป็นลำดับแรก\r\n \r\n \r\n ธนาคารขอสงวนสิทธิ์ในการเปลี่ยนแปลงเงื่อนไข ข้อกำหนด\r\n รวมถึงการยกเลิกรายการส่งเสริมการขายนี้โดยไม่ต้องแจ้งให้ทราบล่วงหน้า หลักเกณฑ์\r\n และเงื่อนไขอื่นๆ เป็นไปตามที่ธนาคารกำหนด\r\n ในกรณีมีข้อพิพาทให้ถือคำตัดสินของธนาคารเป็นที่สุด สอบถามข้อมูลเพิ่มเติม K-Contact Center\r\n โทร{\" \"}\r\n \r\n 02-8888888\r\n {\" \"}\r\n กด 04\r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n );\r\n\r\n tabDetail.push(\r\n \r\n
\r\n );\r\n // console.log(item, index, id, tab, tabDetail)\r\n });\r\n }\r\n\r\n console.log(\"PropertyNearByTabList render\", NearbyPlaces);\r\n // locations = locations.map(({places}) => places).flat()\r\n // propertyDetail.addtion (-lg)\r\n return (\r\n <>\r\n \r\n
\r\n {/* Idea Modal */}\r\n \r\n {item.MediaPath.map((obj, index) => {\r\n var img = getFullMediaURL(obj.MediaPath);\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n );\r\n // console.log(item, index, id, tab, tabDetail)\r\n });\r\n }else{\r\n return (<>);\r\n }\r\n\r\n useEffect(() => {\r\n let ideaSwiper = {};\r\n for (let i = 1; i <= IdeaDec.length; i++) {\r\n let thumbs = new Swiper(`#idea-thumb-${i}`, {\r\n slidesPerView: \"auto\",\r\n initialSlide: 1,\r\n spaceBetween: 8,\r\n loop: true,\r\n pagination: {\r\n el: \".gallery-sm-pagi\",\r\n clickable: true,\r\n },\r\n navigation: {\r\n nextEl: \".swiper-button-next\",\r\n prevEl: \".swiper-button-prev\",\r\n },\r\n threshold: 20,\r\n });\r\n\r\n let slider = new Swiper(`#idea-slide-${i}`, {\r\n slidesPerView: \"auto\",\r\n initialSlide: 1,\r\n spaceBetween: 10,\r\n centeredSlides: true,\r\n autoHeight: true,\r\n loop: true,\r\n thumbs: {\r\n swiper: thumbs,\r\n },\r\n pagination: {\r\n el: \".swiper-pagination\",\r\n clickable: true,\r\n },\r\n });\r\n\r\n ideaSwiper[`idea-swiper-${i}`] = new Swiper(`#idea-swiper-${i}`, {\r\n zoom: false,\r\n navigation: {\r\n nextEl: \".swiper-button-next\",\r\n prevEl: \".swiper-button-prev\",\r\n },\r\n breakpoints: {\r\n 768: {\r\n slidesPerView: 2,\r\n spaceBetween: 20,\r\n },\r\n 1025: {\r\n slidesPerView: 1,\r\n spaceBetween: 20,\r\n },\r\n },\r\n pagination: {\r\n el: \".g-page\",\r\n type: \"fraction\",\r\n },\r\n });\r\n }\r\n\r\n $(\".idea-list\").on(\"click\", function () {\r\n let idElm = $(this).attr(\"id\");\r\n let slideIndex = $(\"#\" + idElm)\r\n .find(\".swiper-slide-active\")\r\n .data(\"swiper-slide-index\");\r\n\r\n let slideName = \"\";\r\n if (idElm === \"idea-slide-1\") {\r\n slideName = ideaSwiper[`idea-swiper-1`];\r\n } else if (idElm === \"idea-slide-2\") {\r\n slideName = ideaSwiper[`idea-swiper-2`];;\r\n } else if (idElm === \"idea-slide-3\") {\r\n slideName = ideaSwiper[`idea-swiper-3`];;\r\n }\r\n\r\n slideName.slideTo(slideIndex);\r\n\r\n $(\"#idea-modal\").addClass(\"active\");\r\n $(\"body\").addClass(\"lock-scrolling\");\r\n });\r\n }, [IdeaDec]);\r\n\r\n console.log(\"PropertyNearByTabList render\", IdeaDec);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n หมายเหตุ : ภาพดังกล่าวไม่ใช่ภายจริงแต่ถูกสร้างขึ้นด้วย AI\r\n \r\n
\r\n \r\n \r\n
\r\n ไอเดียสำหรับการตกแต่ง
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n - {tab}
{tabDetail}
\r\n \r\n \r\n
\r\n \r\n );\r\n}, areNearbyPlacesEqual);\r\n\r\nfunction areNearbyPlacesEqual(prevProps, nextProps) {\r\n if (prevProps.propertyDetail?.AIImg?.length !== nextProps.propertyDetail?.AIImg?.length) {\r\n return false;\r\n }\r\n return true;\r\n}\r\n","import { createSlice } from \"@reduxjs/toolkit\";\r\n\r\nexport const paylaterSlice = createSlice({\r\n name: \"merchant\",\r\n initialState: {\r\n merchants: [],\r\n categories: [],\r\n subcategories: [],\r\n cate_relation: [],\r\n cate_logo: [],\r\n default_popular: null,\r\n search: \"\",\r\n selected_category: null,\r\n selected_subcategory: \"\",\r\n loading: null,\r\n filter_popular_merchants: null,\r\n filter_merchants: null,\r\n search_popular_merchants: null,\r\n search_all_merchants: null,\r\n },\r\n reducers: {\r\n setMerchants: (state, action) => {\r\n const data = action.payload.data.map((m) => {\r\n const keysArray = m.keys.split(\";\");\r\n return { ...m, keys: keysArray };\r\n });\r\n state.merchants = data;\r\n const temp = action.payload.data;\r\n\r\n // state.merchants?.sort((a, b) => a.seq - b.seq);\r\n // const sortedArray = [...state.merchants].sort((a, b) => a.seq - b.seq);\r\n const sortedArray = [...state.merchants].sort((a, b) => {\r\n if (a.seq !== \"\" && b.seq !== \"\") {\r\n return parseInt(a.seq) - parseInt(b.seq);\r\n } else if (a.seq !== \"\") {\r\n return -1; // a.seq is not empty, so it comes before b.seq\r\n } else if (b.seq !== \"\") {\r\n return 1; // b.seq is not empty, so it comes before a.seq\r\n } else {\r\n return 0; // both a.seq and b.seq are empty, no preference in order\r\n }\r\n });\r\n state.merchants = sortedArray;\r\n // let cat = state.merchants.map((m) => m.cate_th);\r\n let cate_logo = state.merchants.map(({ cate_th, cate_logo }) => ({\r\n cate_th,\r\n cate_logo,\r\n }));\r\n\r\n // let subcat = state.merchants.map((m) => m.subcate);\r\n let subcat = state.merchants.map((m) => m.subcate).filter((x) => x);\r\n let popular = state.merchants.filter((m) => m.fg == \"Y\");\r\n let all = { cate_th: \"ร้านค้ายอดนิยม\", cate_logo: \"popular\" };\r\n cate_logo.unshift(all);\r\n state.categories = [...new Set(cate_logo)];\r\n const uniqueData = Array.from(new Set(state.categories.map(JSON.stringify))).map(JSON.parse);\r\n\r\n const result = uniqueData.filter(\r\n (obj, index, self) =>\r\n index ===\r\n self.findIndex((o) => o.cate_th === obj.cate_th && o.cate_logo === obj.cate_logo)\r\n );\r\n state.categories = result;\r\n state.subcategories = [...new Set(subcat)];\r\n\r\n state.default_popular = [...new Set(popular)];\r\n // state.sort = [...new Set(cate_logo)];\r\n let relation = state.categories.map((c) => {\r\n let temp = state.merchants.filter((m) => m.cate_th == c);\r\n let temp2 = temp.map((t) => t.subcate);\r\n let arr = [];\r\n arr[c] = [...new Set(temp2)];\r\n return arr;\r\n });\r\n\r\n state.cate_relation = relation;\r\n },\r\n setSelectedCategory: (state, action) => {\r\n state.selected_category = action.payload;\r\n },\r\n setSelectedSubCategory: (state, action) => {\r\n if (action.payload == \"ทั้งหมด\") {\r\n state.selected_subcategory = null;\r\n } else {\r\n state.selected_subcategory = action.payload;\r\n }\r\n },\r\n unselectedCategory: (state, action) => {\r\n state.selected_category = null;\r\n state.selected_subcategory = null;\r\n state.filter_popular_merchants = null;\r\n state.filter_merchants = null;\r\n },\r\n filterCategory: (state, action) => {\r\n state.filter_merchants = state.merchants.filter((m) => m.cate_th == state.selected_category);\r\n state.filter_popular_merchants = state.filter_merchants.filter((m) => m.fg == \"Y\");\r\n\r\n if (state.selected_category != \"ร้านค้ายอดนิยม\") {\r\n let temp = state.filter_merchants.map((m) => m.subcate).filter((x) => x);\r\n // let temp = state.filter_merchants.map((m) => m.subcate);\r\n\r\n if (temp != 0) {\r\n state.subcategories = [...new Set(temp)];\r\n } else {\r\n state.subcategories = null;\r\n }\r\n } else {\r\n let subcat = state.merchants.map((m) => m.subcate);\r\n state.subcategories = [...new Set(subcat)];\r\n }\r\n let s = state.subcategories?.length ? state.subcategories : [];\r\n state.subcategories = s;\r\n },\r\n setSearch: (state, action) => {\r\n state.search = action.payload;\r\n if (state.selected_category != null) {\r\n state.filter_merchants = state.filter_merchants.filter(\r\n (m) =>\r\n m.nm_en.toLowerCase().includes(action.payload.toLowerCase()) ||\r\n m.nm_th.includes(action.payload) ||\r\n m.keys.includes(action.payload)\r\n );\r\n } else {\r\n state.filter_merchants = state.merchants.filter(\r\n (m) =>\r\n m.nm_en.toLowerCase().includes(action.payload.toLowerCase()) ||\r\n m.nm_th.includes(action.payload) ||\r\n m.keys.includes(action.payload)\r\n );\r\n }\r\n state.filter_merchants = state.filter_merchants.filter(\r\n (m) =>\r\n m.nm_en.toLowerCase().includes(action.payload.toLowerCase()) ||\r\n m.nm_th.includes(action.payload) ||\r\n m.keys.includes(action.payload)\r\n );\r\n\r\n console.log(\"🚀 ------------------------------------------------------------------------------🚀\")\r\n console.log(\"🚀 ~ file: paylaterSlice.js:128 ~ tate.filter_merchants:\", state.filter_merchants)\r\n console.log(\"🚀 ------------------------------------------------------------------------------🚀\")\r\n\r\n state.filter_popular_merchants = state.filter_merchants.filter((m) => m.fg == \"Y\");\r\n },\r\n clearSearch: (state, action) => {\r\n state.search = \"\";\r\n state.filter_merchants = null;\r\n state.filter_popular_merchants = null;\r\n state.selected_category = null;\r\n state.selected_subcategory = \"\";\r\n },\r\n filterSubCategory: (state, action) => {\r\n if (state.selected_subcategory != null) {\r\n state.filter_merchants = state.merchants.filter(\r\n (m) => m.subcate == state.selected_subcategory\r\n );\r\n\r\n state.filter_popular_merchants = state.filter_merchants.filter((m) => m.fg == \"Y\");\r\n } else {\r\n state.filter_merchants = state.merchants.filter(\r\n (m) => m.cate_th == state.selected_category\r\n );\r\n state.filter_popular_merchants = state.filter_merchants.filter((m) => m.fg == \"Y\");\r\n }\r\n },\r\n },\r\n});\r\n\r\n// Action creators are generated for each case reducer function\r\nexport const {\r\n setMerchants,\r\n setSelectedCategory,\r\n setSelectedSubCategory,\r\n updateMerchants,\r\n filterCategory,\r\n filterSubCategory,\r\n setSearch,\r\n clearSearch,\r\n unselectedCategory,\r\n} = paylaterSlice.actions;\r\n\r\nexport default paylaterSlice.reducer;\r\n","import classnames from \"classnames/bind\";\r\nimport Config from \"config\";\r\nimport React, { createRef, useEffect, useState } from \"react\";\r\n\r\nconst $ = window.$;\r\nexport class SelectList extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n if (this.props.className) {\r\n this.className = this.props.className;\r\n } else {\r\n this.className = \"select-field mb-3\";\r\n }\r\n\r\n if (this.props.templateSelection) {\r\n this.templateSelection = this.props.templateSelection;\r\n } else {\r\n this.templateSelection = \"\";\r\n }\r\n\r\n this.minimumResultsForSearch = this.props.minimumResultsForSearch;\r\n\r\n // console.log(\"select name\",this.className)\r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleOpen = this.handleOpen.bind(this);\r\n }\r\n\r\n handleChange(e) {\r\n // console.log(e)\r\n\r\n if (this.props.clearOption && e.params.args.data.id == \"clear\") {\r\n this.props.OnformsDataChange({\r\n field: this.props.fieldName,\r\n value: \"\",\r\n });\r\n } else {\r\n this.props.OnformsDataChange({\r\n field: this.props.fieldName,\r\n value: e.params.args.data.id,\r\n });\r\n }\r\n\r\n e.preventDefault();\r\n this.$el.select2(\"close\");\r\n }\r\n\r\n handleOpen() {\r\n console.log(\"this.props.placeholderSearch\", this.props.placeholderSearch);\r\n $(\"input.select2-search__field\").prop(\r\n \"placeholder\",\r\n this.props.placeholderSearch\r\n );\r\n }\r\n\r\n componentDidMount() {\r\n //const props = this.props\r\n this.$el = $(this.el);\r\n\r\n if (this.$el.data(\"select2\")) {\r\n this.$el.select2(\"destroy\");\r\n }\r\n\r\n this.select2Setting = {\r\n placeholder: this.props.placeholder,\r\n allowClear: true,\r\n //onChange: this.handleChange\r\n };\r\n\r\n if (this.props.dropdownParent) {\r\n this.select2Setting.dropdownParent = $(this.props.dropdownParent);\r\n }\r\n\r\n if (this.props.fieldName === \"station\") {\r\n this.select2Setting.templateResult = function (idioma) {\r\n if (idioma.id === \"clear\") {\r\n var $span = $(\r\n \"\" +\r\n idioma.text +\r\n \"\"\r\n );\r\n }\r\n else if (idioma.title == \"bts\") {\r\n var $span = $(\r\n \"\" +\r\n idioma.text +\r\n \"\r\n
\r\n \r\n
\r\n ไอเดียสำหรับการตกแต่ง
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n - {tab}
{tabModal}
\r\n \"\r\n );\r\n } else {\r\n var $span = $(\r\n \"\" +\r\n idioma.text +\r\n \"\"\r\n );\r\n }\r\n return $span;\r\n };\r\n\r\n this.select2Setting.templateSelection = function (idioma) {\r\n if (idioma.id) {\r\n if (idioma.title == \"bts\") {\r\n var $span = $(\r\n \"\" +\r\n idioma.text +\r\n \"\"\r\n );\r\n } else {\r\n var $span = $(\r\n \"\" +\r\n idioma.text +\r\n \"\"\r\n );\r\n }\r\n } else {\r\n var $span = $(\"\" + idioma.text + \"\");\r\n }\r\n return $span;\r\n };\r\n }\r\n\r\n if (this.props.templateSelection) {\r\n this.select2Setting.templateSelection = this.props.templateSelection;\r\n }\r\n\r\n if (this.props.minimumResultsForSearch) {\r\n this.select2Setting.minimumResultsForSearch =\r\n this.props.minimumResultsForSearch;\r\n }\r\n\r\n // console.log(this.select2Setting)\r\n this.$el\r\n .select2(this.select2Setting)\r\n .one(\"select2:open\", this.handleOpen)\r\n .on(\"select2:selecting\", this.handleChange);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.option !== this.props.option) {\r\n this.$el.select2(\"destroy\");\r\n this.$el\r\n .select2(\r\n this.select2Setting\r\n // {\r\n // placeholder: this.props.placeholder,\r\n // allowClear: true,\r\n // //onChange: this.handleChange\r\n // }\r\n )\r\n .one(\"select2:open\", this.handleOpen)\r\n .on(\"select2:selecting\", this.handleChange);\r\n // console.log(`SelectList ${this.props.fieldName} Updated`)\r\n }\r\n if (prevProps.value !== this.props.value) {\r\n this.$el.trigger(\"change.select2\");\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n (this.el = el)}\r\n readOnly\r\n >\r\n {!this.props.notShowEmptyOption && }\r\n {this.props.clearOption && }\r\n {Array.isArray(this.props.option) &&\r\n this.props.option.map((item, index) => renderChild(item, index))}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nfunction renderChild(item, index) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport class IonRange extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n //this.formsDataChange = props.formsDataChange;\r\n //this = props;\r\n // Don't call this.setState() here!\r\n // this.state = { counter: 0 };\r\n // this.handleClick = this.handleClick.bind(this);\r\n this.handleChange = this.handleChange.bind(this);\r\n }\r\n\r\n handleChange(data) {\r\n this.props.OnformsDataChange(\r\n this.props.fieldName,\r\n data.from_value,\r\n (new Set([data.from, data.to, data.max]).size === 1) ? \"\" : data.to_value\r\n );\r\n }\r\n\r\n componentDidMount() {\r\n //const props = this.props\r\n // console.log(this.props, \" <--slider value\");\r\n this.$el = $(this.el);\r\n this.$el.ionRangeSlider({\r\n skin: \"big\",\r\n type: \"double\",\r\n grid: false,\r\n min: this.props.min,\r\n max: this.props.max,\r\n from: this.props.from,\r\n to: this.props.to,\r\n step: this.props.step,\r\n values: this.props.values,\r\n hide_from_to: true,\r\n hide_min_max: true,\r\n // skin: \"round\",\r\n // prettify_separator: \",\",\r\n //onChange: this.handleChange\r\n onFinish: this.handleChange,\r\n });\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n // Typical usage (don't forget to compare props):\r\n if (\r\n this.props.max !== prevProps.max ||\r\n this.props.min !== prevProps.min ||\r\n this.props.step !== prevProps.step ||\r\n this.props.count !== prevProps.count\r\n ) {\r\n this.$el.data(\"ionRangeSlider\").update({\r\n min: this.props.min,\r\n max: this.props.max,\r\n step: this.props.step,\r\n from: this.props.from,\r\n to: this.props.to,\r\n });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.$el.data(\"ionRangeSlider\").destroy();\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n (this.el = el)} />\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const RangeInput = (props) => {\r\n const [Start, setStartValue] = useState(\"\");\r\n const [End, setEndValue] = useState(\"\");\r\n const [StartList, setStartListValue] = useState(props.values);\r\n const [EndList, setEndListValue] = useState(props.values);\r\n const dropdown = createRef();\r\n\r\n function clickRangeInput() {\r\n if ($(\".range-dropdown.active\").length > 0) {\r\n $(\".range-dropdown.active\").removeClass(\"active\");\r\n }\r\n $(dropdown.current).addClass(\"active\");\r\n setStart();\r\n }\r\n\r\n function setStart() {\r\n $(dropdown.current).addClass(\"start\");\r\n $(dropdown.current).removeClass(\"end\");\r\n }\r\n\r\n function setEnd() {\r\n $(dropdown.current).addClass(\"end\");\r\n $(dropdown.current).removeClass(\"start\");\r\n }\r\n\r\n function startClick(item) {\r\n // console.log(\"start\",item)\r\n setStartValue(item);\r\n const index = StartList.indexOf(item);\r\n if (index > 0) {\r\n setEndListValue(\r\n StartList.slice(0, 1).concat(\r\n StartList.slice(StartList.indexOf(item) + 1)\r\n )\r\n );\r\n } else {\r\n setEndListValue(StartList);\r\n }\r\n props.OnformsDataChange(props.fieldName, item, \"\");\r\n setEnd();\r\n }\r\n\r\n function endClick(item) {\r\n // console.log(\"end\",item)\r\n setEndValue(item);\r\n props.OnformsDataChange(props.fieldName, Start, item);\r\n $(dropdown.current).removeClass(\"active\");\r\n }\r\n\r\n function renderStartChild(item, index) {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const CounterInput = (props) => {\r\n function decrease() {\r\n if (props.value > props.min) {\r\n props.OnformsDataChange({\r\n field: props.fieldName,\r\n value: props.value - 1,\r\n });\r\n }\r\n }\r\n\r\n function increase() {\r\n if (props.value < props.max) {\r\n props.OnformsDataChange({\r\n field: props.fieldName,\r\n value: props.value + 1,\r\n });\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n เริ่มต้น\r\n
\r\n -
\r\n \r\n สิ้นสุด\r\n
\r\n \r\n
\r\n - \r\n {StartList.map((item, index) => renderStartChild(item, index))}\r\n
- \r\n {EndList.map((item, index) => renderEndChild(item, index))}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport const CheckBoxIonInput = (props) => {\r\n function check() {\r\n props.OnformsDataChange(props.fieldName, !props.value, props.group);\r\n }\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {props.name}
\r\n \r\n );\r\n};\r\n\r\nexport const CheckBoxCustomInput = (props) => {\r\n function check() {\r\n props.OnformsDataChange(props.fieldName, !props.value, props.group);\r\n }\r\n\r\n return (\r\n <>\r\n\r\n \r\n (this.el = el)}\r\n readOnly\r\n >\r\n \r\n {Array.isArray(this.props.option) &&\r\n this.props.option.map((item) => this.renderChild(item))}\r\n \r\n {this.props.errorMessage && (\r\n \r\n {this.props.errorMessage}\r\n \r\n )}\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const CalcInputField = (props) => {\r\n // console.log(\"InputField Render\",props.fieldName)\r\n\r\n function OnformsDataChange(e) {\r\n console.log(\"on change\", e.target.value);\r\n props.OnformsDataChange(props.fieldName, e.target.value);\r\n }\r\n\r\n function OnformsBlur(e) {\r\n if (props.formsBlur) {\r\n var value = e.target.value;\r\n // if (value === props.placeholder) {\r\n // value = '';\r\n // }\r\n console.log(\"on change\", value);\r\n props.formsBlur(props.fieldName, value);\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport class DropLeadSelectList extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n // console.log(\"select name\",this.className)\r\n this.handleChange = this.handleChange.bind(this);\r\n this.renderChild = this.renderChild.bind(this);\r\n }\r\n\r\n handleChange(e) {\r\n // console.log(e)\r\n this.props.OnformsDataChange(this.props.fieldName, e.params.args.data.id);\r\n e.preventDefault();\r\n this.$el.select2(\"close\");\r\n }\r\n\r\n componentDidMount() {\r\n //const props = this.props\r\n this.$el = $(this.el);\r\n\r\n if (this.$el.data(\"select2\")) {\r\n this.$el.select2(\"destroy\");\r\n }\r\n\r\n this.select2Setting = {\r\n placeholder: this.props.placeholder,\r\n allowClear: true,\r\n minimumResultsForSearch: -1,\r\n dropdownCssClass: \"border-dropdown\",\r\n };\r\n\r\n this.$el\r\n .select2(this.select2Setting)\r\n .on(\"select2:selecting\", this.handleChange);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.option !== this.props.option) {\r\n this.$el.select2(\"destroy\");\r\n this.$el\r\n .select2(this.select2Setting)\r\n .on(\"select2:selecting\", this.handleChange);\r\n // console.log(`SelectList ${this.props.fieldName} Updated`)\r\n }\r\n if (prevProps.value !== this.props.value) {\r\n this.$el.trigger(\"change.select2\");\r\n }\r\n }\r\n\r\n renderChild(item) {\r\n return (\r\n \r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport const DropLeadInputField = (props) => {\r\n // console.log(\"InputField Render\",props.fieldName)\r\n\r\n function OnformsDataChange(e) {\r\n props.OnformsDataChange(props.fieldName, e.target.value);\r\n }\r\n\r\n function OnformsBlur(e) {\r\n if (props.formsBlur) {\r\n var value = e.target.value;\r\n props.formsBlur(props.fieldName, value);\r\n }\r\n }\r\n\r\n return (\r\n \r\n (this.el = el)}\r\n readOnly\r\n >\r\n \r\n {Array.isArray(this.props.option) &&\r\n this.props.option.map((item) => this.renderChild(item))}\r\n \r\n
\r\n {this.props.errorMessage && (\r\n \r\n {this.props.errorMessage}\r\n \r\n )}\r\n \r\n \r\n
\r\n );\r\n};\r\n","var api = require(\"!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = require(\"!!../../node_modules/css-loader/dist/cjs.js!./partnerCalc.css\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.id, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nmodule.exports = content.locals || {};","// Imports\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(true);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"#calculators .container-calculate.view-mode[no-decoration=\\\"true\\\"] .col-body-box-1,\\r\\n#calculators .container-calculate.view-mode #for-stay[no-decoration=\\\"true\\\"] .col-body-box-1,\\r\\n#calculators .container-calculate.view-mode #for-business[no-decoration=\\\"true\\\"] .col-body-box-1 {\\r\\n width: 100%;\\r\\n}\\r\\n\\r\\n#calculators .container-calculate.view-mode[no-decoration=\\\"true\\\"] .col-body-box-2,\\r\\n#calculators .container-calculate.view-mode #for-stay[no-decoration=\\\"true\\\"] .col-body-box-2,\\r\\n#calculators .container-calculate.view-mode #for-business[no-decoration=\\\"true\\\"] .col-body-box-2 {\\r\\n display: none;\\r\\n}\\r\\n\\r\\n#calculators .container-calculate[no-decoration=\\\"true\\\"] .decoration-limit-field,\\r\\n#calculators .container-calculate[no-decoration=\\\"true\\\"] .decoration-installment-field,\\r\\n#calculators .container-calculate #for-stay[no-decoration=\\\"true\\\"] .decoration-limit-field,\\r\\n#calculators .container-calculate #for-stay[no-decoration=\\\"true\\\"] .decoration-installment-field,\\r\\n#calculators .container-calculate #for-business[no-decoration=\\\"true\\\"] .decoration-limit-field,\\r\\n#calculators .container-calculate #for-business[no-decoration=\\\"true\\\"] .decoration-installment-field {\\r\\n display: none !important;\\r\\n}\\r\\n\\r\\n#calculators [no-decoration=\\\"true\\\"] .debt-burden-field {\\r\\n border-top: none !important;\\r\\n}\\r\\n\\r\\n#icw #calculators .input-error {\\r\\n border-bottom-color: var(--red-color-1);\\r\\n}\\r\\n\\r\\n#icw #calculators .head-table .input-error {\\r\\n border-bottom-color: #ff6060;\\r\\n}\\r\\n\\r\\n#calculators .head-table .error-message {\\r\\n color: #ff6060;\\r\\n}\\r\\n\\r\\n#calculators .view-mode .error-message {\\r\\n display: none !important;\\r\\n}\\r\\n\\r\\n.garage-container .btn {\\r\\n position: relative;\\r\\n display: inline-block;\\r\\n vertical-align: middle;\\r\\n font-size: 16px;\\r\\n font-weight: bold;\\r\\n text-align: center;\\r\\n text-decoration: none;\\r\\n padding: 0 50px;\\r\\n max-width: 100%;\\r\\n height: 50px;\\r\\n line-height: 50px;\\r\\n border-radius: 25px;\\r\\n border-top-left-radius: 25px;\\r\\n border-top-right-radius: 25px;\\r\\n border-bottom-right-radius: 25px;\\r\\n border-bottom-left-radius: 25px;\\r\\n border: 0;\\r\\n background: rgba(0, 168, 80, 1);\\r\\n background: -webkit-gradient(linear, left top, right top, from(rgba(0, 168, 80, 1)), to(rgba(97, 214, 153, 1)));\\r\\n background: -webkit-linear-gradient(left, rgba(0, 168, 80, 1) 0%, rgba(97, 214, 153, 1) 100%);\\r\\n background: -o-linear-gradient(left, rgba(0, 168, 80, 1) 0%, rgba(97, 214, 153, 1) 100%);\\r\\n background: linear-gradient(90deg, rgba(0, 168, 80, 1) 0%, rgba(97, 214, 153, 1) 100%);\\r\\n background-size: 100% auto;\\r\\n -webkit-box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2);\\r\\n -o-box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2);\\r\\n box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2);\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.icw .a-center {\\r\\n text-align: center;\\r\\n}\\r\\n\\r\\n.icw .a-right {\\r\\n text-align: right;\\r\\n}\\r\\n\\r\\n.theme-h2c .h1,\\r\\n.theme-h2c .display-1.home-revise-title-line-height {\\r\\n line-height: 1.2 !important;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator select.select2,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator span.select2-selection__rendered,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .field input[type=text] {\\r\\n font-family: Kanit, notosansthai, Arial, sans-serif;\\r\\n font-size: 20px;\\r\\n font-weight: 600;\\r\\n color: #00A94F !important;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .field .input.border-bottom {\\r\\n border-bottom: solid 1px #E0E0E0 !important;\\r\\n padding-bottom: 1px;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .select2.disabled,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .select2-selection__rendered.disabled,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .select2-selection__placeholder {\\r\\n color: #8F8F8F !important;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .select:after,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator span.select2-selection__arrow b:before {\\r\\n color: #333333;\\r\\n right: 0;\\r\\n text-align: right;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .select2-container--default .select2-selection--single .select2-selection__arrow b {\\r\\n left: 0;\\r\\n top: 0;\\r\\n border: none;\\r\\n margin: 0 0 0 0;\\r\\n position: static;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow,\\r\\n#jmt-calculator-container .mfp-content .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow {\\r\\n transform: none;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select2-container *:focus {\\r\\n box-shadow: none;\\r\\n -webkit-box-shadow: none;\\r\\n -moz-box-shadow: none;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select2-container--open .select2-dropdown--below {\\r\\n margin: 0 0 0 0;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select2-container--default .select2-selection--single .select2-selection__rendered {\\r\\n line-height: 50px !important;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select select,\\r\\n#jmt-calculator-container .select select:focus {\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.mfp-hide {\\r\\n display: none !important;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .irs--flat .irs-min,\\r\\n.irs--flat .irs-max {\\r\\n font-size: 0px;\\r\\n line-height: 0px;\\r\\n padding: 0;\\r\\n /* visibility: hidden !important; */\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider .irs-handle {\\r\\n top: -0.1875rem;\\r\\n width: 30px;\\r\\n height: 30px;\\r\\n /* background-image: url(../img/garage/calculator-button-bar.png); */\\r\\n background-size: 30px;\\r\\n background-repeat: no-repeat;\\r\\n cursor: pointer;\\r\\n border-radius: 50%;\\r\\n -webkit-box-shadow: 0 0.1875rem 0.75rem rgb(140 152 164 / 31%);\\r\\n box-shadow: 0 0.1875rem 0.75rem rgb(140 152 164 / 31%);\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider .irs-handle i {\\r\\n display: none;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator-result .u-range-slider .irs-handle {\\r\\n top: 26px;\\r\\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAgVBMVEUAAAAAqU4AqU4AqE8AqU4AqU8AokYAqU8AqE8AqU8Aq08AqU4AqE8AqU0AqU0AqE4AqU4Aq0wAqU4Aqk4Aqk4AqU4AqU4AqU4AqE4AqU4ApUsAqU4AqE4AqE0ApEkAsU4AqU4AqE0A/wAAqk0AqU////+b3bpjypMftGQTr1wMrVfojyF3AAAAJHRSTlMA8fuo9qsHh+K4F596TzDPmR1XSSbKwLSQWxHYpHAODek4AWMEOdV6AAABXklEQVRIx6WX2XKDMAxFrzcgEBIIWchGlirr/39gZwoT2gKJLZ8nv5wxaCzNFQZIw2S1iLSOFqskTGHPZm0E/UGY9QY2TEbUy2iCT8wNDWLmeEeeSXqDzGIMUgj6gBis3ZgsGKOPQJEVuwAd4ilZMo0799aunf3/bkMOKEatBqo2k26yLFr3cCRHjtVLDsmZEA25dpd1jJqEGGRNI0mOLOsO7e/f6+VWH26Xa39//5Ra8mRZAZgRT6YZAMWVEwCCK0fAibgynbDny3uUfDmE4ssJlnx5iYgvb6H5soDwkbcen+1XMMWXlc8jKTH2eZ4FXy4QCK4sAo9hoHzHUMUdgAff0YsJT25imeLICjV5318/7s/68Lw/qIvO0ZCRM2WbhLSrK2K8+HKVUwDcbBDiN2fj4pqzf4hrySNbN8rRIdgxgys/Mrekmh/WgZizJrTMFWNB4a5G/KXMah0s0M839smHd0RyVngAAAAASUVORK5CYII=');\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider-indicator.u-range-slider-grid,\\r\\n.jmt-calculator-container .u-range-slider-indicator.u-range-slider-grid .irs {\\r\\n height: 80px;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider-grid .irs-grid {\\r\\n height: 25px;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider-grid .irs-grid-text {\\r\\n font-family: Helvetica, Arial, sans-serif;\\r\\n font-weight: 300;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider-indicator .irs-bar,\\r\\n.jmt-calculator-container .u-range-slider-indicator .irs-line {\\r\\n top: 38.75px;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .col-md-6 {\\r\\n width: 100%;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .col-sm-6 {\\r\\n width: 100%;\\r\\n padding-left: 10px;\\r\\n padding-right: 10px;\\r\\n}\\r\\n\\r\\n@media (min-width: 992px) {\\r\\n .jmt-calculator-container .col-md-6 {\\r\\n width: 50%;\\r\\n float: left;\\r\\n }\\r\\n .jmt-calculator-container .col-md-12 {\\r\\n float: left;\\r\\n }\\r\\n}\\r\\n\\r\\n@media (min-width: 768px) {\\r\\n .jmt-calculator-container .col-sm-6 {\\r\\n width: 50%;\\r\\n float: left;\\r\\n }\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .row {\\r\\n display: block;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .row:after {\\r\\n clear: both;\\r\\n content: \\\" \\\";\\r\\n display: table;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container select {\\r\\n appearance: none;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container ul {\\r\\n padding: 0;\\r\\n margin: 0;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container p {\\r\\n margin: 0;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .tab-condition li {\\r\\n font-family: Helvetica, Arial, sans-serif;\\r\\n font-weight: 300;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c h1,\\r\\n.jmt-calculator-container.theme-h2c h2,\\r\\n.jmt-calculator-container.theme-h2c h3,\\r\\n.jmt-calculator-container.theme-h2c h4,\\r\\n.jmt-calculator-container.theme-h2c h5,\\r\\n.jmt-calculator-container.theme-h2c h6,\\r\\n.jmt-calculator-container.theme-h2c .h1,\\r\\n.jmt-calculator-container.theme-h2c .h2,\\r\\n.jmt-calculator-container.theme-h2c .h3,\\r\\n.jmt-calculator-container.theme-h2c .h4,\\r\\n.jmt-calculator-container.theme-h2c .h5,\\r\\n.jmt-calculator-container.theme-h2c .h6,\\r\\n.jmt-calculator-container.theme-h2c strong,\\r\\n.jmt-calculator-container.theme-h2c a {\\r\\n font-family: Kanit, notosansthai, Arial, sans-serif;\\r\\n font-weight: 600;\\r\\n /*semi bold*/\\r\\n}\\r\\n\\r\\n#icw #calculators .c-red {\\r\\n color: var(--red-color-1) !important;\\r\\n}\\r\\n\\r\\n#icw #calculators .required-star {\\r\\n margin-left: 0px;\\r\\n}\", \"\",{\"version\":3,\"sources\":[\"webpack://src/Detail/partnerCalc.css\"],\"names\":[],\"mappings\":\"AAAA;;;IAGI,WAAW;AACf;;AAEA;;;IAGI,aAAa;AACjB;;AAEA;;;;;;IAMI,wBAAwB;AAC5B;;AAEA;IACI,2BAA2B;AAC/B;;AAEA;IACI,uCAAuC;AAC3C;;AAEA;IACI,4BAA4B;AAChC;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,wBAAwB;AAC5B;;AAEA;IACI,kBAAkB;IAClB,qBAAqB;IACrB,sBAAsB;IACtB,eAAe;IACf,iBAAiB;IACjB,kBAAkB;IAClB,qBAAqB;IACrB,eAAe;IACf,eAAe;IACf,YAAY;IACZ,iBAAiB;IACjB,mBAAmB;IACnB,4BAA4B;IAC5B,6BAA6B;IAC7B,gCAAgC;IAChC,+BAA+B;IAC/B,SAAS;IACT,+BAA+B;IAC/B,+GAA+G;IAC/G,6FAA6F;IAC7F,wFAAwF;IACxF,sFAAsF;IACtF,0BAA0B;IAC1B,qDAAqD;IACrD,gDAAgD;IAChD,6CAA6C;IAC7C,eAAe;AACnB;;AAEA;IACI,kBAAkB;AACtB;;AAEA;IACI,iBAAiB;AACrB;;AAEA;;IAEI,2BAA2B;AAC/B;;AAEA;;;IAGI,mDAAmD;IACnD,eAAe;IACf,gBAAgB;IAChB,yBAAyB;AAC7B;;AAEA;IACI,2CAA2C;IAC3C,mBAAmB;AACvB;;AAEA;;;IAGI,yBAAyB;AAC7B;;AAEA;;IAEI,cAAc;IACd,QAAQ;IACR,iBAAiB;AACrB;;AAEA;IACI,OAAO;IACP,MAAM;IACN,YAAY;IACZ,eAAe;IACf,gBAAgB;AACpB;;AAEA;;IAEI,eAAe;AACnB;;AAEA;IACI,gBAAgB;IAChB,wBAAwB;IACxB,qBAAqB;AACzB;;AAEA;IACI,eAAe;AACnB;;AAEA;IACI,4BAA4B;AAChC;;AAEA;;IAEI,eAAe;AACnB;;AAEA;IACI,wBAAwB;AAC5B;;AAEA;;IAEI,cAAc;IACd,gBAAgB;IAChB,UAAU;IACV,mCAAmC;AACvC;;AAEA;IACI,eAAe;IACf,WAAW;IACX,YAAY;IACZ,oEAAoE;IACpE,qBAAqB;IACrB,4BAA4B;IAC5B,eAAe;IACf,kBAAkB;IAClB,8DAA8D;IAC9D,sDAAsD;AAC1D;;AAEA;IACI,aAAa;AACjB;;AAEA;IACI,SAAS;IACT,20BAA20B;AAC/0B;;AAEA;;IAEI,YAAY;AAChB;;AAEA;IACI,YAAY;AAChB;;AAEA;IACI,yCAAyC;IACzC,gBAAgB;AACpB;;AAEA;;IAEI,YAAY;AAChB;;AAEA;IACI,WAAW;AACf;;AAEA;IACI,WAAW;IACX,kBAAkB;IAClB,mBAAmB;AACvB;;AAEA;IACI;QACI,UAAU;QACV,WAAW;IACf;IACA;QACI,WAAW;IACf;AACJ;;AAEA;IACI;QACI,UAAU;QACV,WAAW;IACf;AACJ;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,WAAW;IACX,YAAY;IACZ,cAAc;AAClB;;AAEA;IACI,gBAAgB;AACpB;;AAEA;IACI,UAAU;IACV,SAAS;AACb;;AAEA;IACI,SAAS;AACb;;AAEA;IACI,yCAAyC;IACzC,gBAAgB;AACpB;;AAEA;;;;;;;;;;;;;;IAcI,mDAAmD;IACnD,gBAAgB;IAChB,YAAY;AAChB;;AAEA;IACI,oCAAoC;AACxC;;AAEA;IACI,gBAAgB;AACpB\",\"sourcesContent\":[\"#calculators .container-calculate.view-mode[no-decoration=\\\"true\\\"] .col-body-box-1,\\r\\n#calculators .container-calculate.view-mode #for-stay[no-decoration=\\\"true\\\"] .col-body-box-1,\\r\\n#calculators .container-calculate.view-mode #for-business[no-decoration=\\\"true\\\"] .col-body-box-1 {\\r\\n width: 100%;\\r\\n}\\r\\n\\r\\n#calculators .container-calculate.view-mode[no-decoration=\\\"true\\\"] .col-body-box-2,\\r\\n#calculators .container-calculate.view-mode #for-stay[no-decoration=\\\"true\\\"] .col-body-box-2,\\r\\n#calculators .container-calculate.view-mode #for-business[no-decoration=\\\"true\\\"] .col-body-box-2 {\\r\\n display: none;\\r\\n}\\r\\n\\r\\n#calculators .container-calculate[no-decoration=\\\"true\\\"] .decoration-limit-field,\\r\\n#calculators .container-calculate[no-decoration=\\\"true\\\"] .decoration-installment-field,\\r\\n#calculators .container-calculate #for-stay[no-decoration=\\\"true\\\"] .decoration-limit-field,\\r\\n#calculators .container-calculate #for-stay[no-decoration=\\\"true\\\"] .decoration-installment-field,\\r\\n#calculators .container-calculate #for-business[no-decoration=\\\"true\\\"] .decoration-limit-field,\\r\\n#calculators .container-calculate #for-business[no-decoration=\\\"true\\\"] .decoration-installment-field {\\r\\n display: none !important;\\r\\n}\\r\\n\\r\\n#calculators [no-decoration=\\\"true\\\"] .debt-burden-field {\\r\\n border-top: none !important;\\r\\n}\\r\\n\\r\\n#icw #calculators .input-error {\\r\\n border-bottom-color: var(--red-color-1);\\r\\n}\\r\\n\\r\\n#icw #calculators .head-table .input-error {\\r\\n border-bottom-color: #ff6060;\\r\\n}\\r\\n\\r\\n#calculators .head-table .error-message {\\r\\n color: #ff6060;\\r\\n}\\r\\n\\r\\n#calculators .view-mode .error-message {\\r\\n display: none !important;\\r\\n}\\r\\n\\r\\n.garage-container .btn {\\r\\n position: relative;\\r\\n display: inline-block;\\r\\n vertical-align: middle;\\r\\n font-size: 16px;\\r\\n font-weight: bold;\\r\\n text-align: center;\\r\\n text-decoration: none;\\r\\n padding: 0 50px;\\r\\n max-width: 100%;\\r\\n height: 50px;\\r\\n line-height: 50px;\\r\\n border-radius: 25px;\\r\\n border-top-left-radius: 25px;\\r\\n border-top-right-radius: 25px;\\r\\n border-bottom-right-radius: 25px;\\r\\n border-bottom-left-radius: 25px;\\r\\n border: 0;\\r\\n background: rgba(0, 168, 80, 1);\\r\\n background: -webkit-gradient(linear, left top, right top, from(rgba(0, 168, 80, 1)), to(rgba(97, 214, 153, 1)));\\r\\n background: -webkit-linear-gradient(left, rgba(0, 168, 80, 1) 0%, rgba(97, 214, 153, 1) 100%);\\r\\n background: -o-linear-gradient(left, rgba(0, 168, 80, 1) 0%, rgba(97, 214, 153, 1) 100%);\\r\\n background: linear-gradient(90deg, rgba(0, 168, 80, 1) 0%, rgba(97, 214, 153, 1) 100%);\\r\\n background-size: 100% auto;\\r\\n -webkit-box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2);\\r\\n -o-box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2);\\r\\n box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2);\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.icw .a-center {\\r\\n text-align: center;\\r\\n}\\r\\n\\r\\n.icw .a-right {\\r\\n text-align: right;\\r\\n}\\r\\n\\r\\n.theme-h2c .h1,\\r\\n.theme-h2c .display-1.home-revise-title-line-height {\\r\\n line-height: 1.2 !important;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator select.select2,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator span.select2-selection__rendered,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .field input[type=text] {\\r\\n font-family: Kanit, notosansthai, Arial, sans-serif;\\r\\n font-size: 20px;\\r\\n font-weight: 600;\\r\\n color: #00A94F !important;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .field .input.border-bottom {\\r\\n border-bottom: solid 1px #E0E0E0 !important;\\r\\n padding-bottom: 1px;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .select2.disabled,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .select2-selection__rendered.disabled,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .select2-selection__placeholder {\\r\\n color: #8F8F8F !important;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator .select:after,\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator span.select2-selection__arrow b:before {\\r\\n color: #333333;\\r\\n right: 0;\\r\\n text-align: right;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .select2-container--default .select2-selection--single .select2-selection__arrow b {\\r\\n left: 0;\\r\\n top: 0;\\r\\n border: none;\\r\\n margin: 0 0 0 0;\\r\\n position: static;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow,\\r\\n#jmt-calculator-container .mfp-content .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow {\\r\\n transform: none;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select2-container *:focus {\\r\\n box-shadow: none;\\r\\n -webkit-box-shadow: none;\\r\\n -moz-box-shadow: none;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select2-container--open .select2-dropdown--below {\\r\\n margin: 0 0 0 0;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select2-container--default .select2-selection--single .select2-selection__rendered {\\r\\n line-height: 50px !important;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .select select,\\r\\n#jmt-calculator-container .select select:focus {\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.mfp-hide {\\r\\n display: none !important;\\r\\n}\\r\\n\\r\\n#jmt-calculator-container .irs--flat .irs-min,\\r\\n.irs--flat .irs-max {\\r\\n font-size: 0px;\\r\\n line-height: 0px;\\r\\n padding: 0;\\r\\n /* visibility: hidden !important; */\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider .irs-handle {\\r\\n top: -0.1875rem;\\r\\n width: 30px;\\r\\n height: 30px;\\r\\n /* background-image: url(../img/garage/calculator-button-bar.png); */\\r\\n background-size: 30px;\\r\\n background-repeat: no-repeat;\\r\\n cursor: pointer;\\r\\n border-radius: 50%;\\r\\n -webkit-box-shadow: 0 0.1875rem 0.75rem rgb(140 152 164 / 31%);\\r\\n box-shadow: 0 0.1875rem 0.75rem rgb(140 152 164 / 31%);\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider .irs-handle i {\\r\\n display: none;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c .sc-calculator-result .u-range-slider .irs-handle {\\r\\n top: 26px;\\r\\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAgVBMVEUAAAAAqU4AqU4AqE8AqU4AqU8AokYAqU8AqE8AqU8Aq08AqU4AqE8AqU0AqU0AqE4AqU4Aq0wAqU4Aqk4Aqk4AqU4AqU4AqU4AqE4AqU4ApUsAqU4AqE4AqE0ApEkAsU4AqU4AqE0A/wAAqk0AqU////+b3bpjypMftGQTr1wMrVfojyF3AAAAJHRSTlMA8fuo9qsHh+K4F596TzDPmR1XSSbKwLSQWxHYpHAODek4AWMEOdV6AAABXklEQVRIx6WX2XKDMAxFrzcgEBIIWchGlirr/39gZwoT2gKJLZ8nv5wxaCzNFQZIw2S1iLSOFqskTGHPZm0E/UGY9QY2TEbUy2iCT8wNDWLmeEeeSXqDzGIMUgj6gBis3ZgsGKOPQJEVuwAd4ilZMo0799aunf3/bkMOKEatBqo2k26yLFr3cCRHjtVLDsmZEA25dpd1jJqEGGRNI0mOLOsO7e/f6+VWH26Xa39//5Ra8mRZAZgRT6YZAMWVEwCCK0fAibgynbDny3uUfDmE4ssJlnx5iYgvb6H5soDwkbcen+1XMMWXlc8jKTH2eZ4FXy4QCK4sAo9hoHzHUMUdgAff0YsJT25imeLICjV5318/7s/68Lw/qIvO0ZCRM2WbhLSrK2K8+HKVUwDcbBDiN2fj4pqzf4hrySNbN8rRIdgxgys/Mrekmh/WgZizJrTMFWNB4a5G/KXMah0s0M839smHd0RyVngAAAAASUVORK5CYII=');\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider-indicator.u-range-slider-grid,\\r\\n.jmt-calculator-container .u-range-slider-indicator.u-range-slider-grid .irs {\\r\\n height: 80px;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider-grid .irs-grid {\\r\\n height: 25px;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider-grid .irs-grid-text {\\r\\n font-family: Helvetica, Arial, sans-serif;\\r\\n font-weight: 300;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .u-range-slider-indicator .irs-bar,\\r\\n.jmt-calculator-container .u-range-slider-indicator .irs-line {\\r\\n top: 38.75px;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .col-md-6 {\\r\\n width: 100%;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .col-sm-6 {\\r\\n width: 100%;\\r\\n padding-left: 10px;\\r\\n padding-right: 10px;\\r\\n}\\r\\n\\r\\n@media (min-width: 992px) {\\r\\n .jmt-calculator-container .col-md-6 {\\r\\n width: 50%;\\r\\n float: left;\\r\\n }\\r\\n .jmt-calculator-container .col-md-12 {\\r\\n float: left;\\r\\n }\\r\\n}\\r\\n\\r\\n@media (min-width: 768px) {\\r\\n .jmt-calculator-container .col-sm-6 {\\r\\n width: 50%;\\r\\n float: left;\\r\\n }\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .row {\\r\\n display: block;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .row:after {\\r\\n clear: both;\\r\\n content: \\\" \\\";\\r\\n display: table;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container select {\\r\\n appearance: none;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container ul {\\r\\n padding: 0;\\r\\n margin: 0;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container p {\\r\\n margin: 0;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container .tab-condition li {\\r\\n font-family: Helvetica, Arial, sans-serif;\\r\\n font-weight: 300;\\r\\n}\\r\\n\\r\\n.jmt-calculator-container.theme-h2c h1,\\r\\n.jmt-calculator-container.theme-h2c h2,\\r\\n.jmt-calculator-container.theme-h2c h3,\\r\\n.jmt-calculator-container.theme-h2c h4,\\r\\n.jmt-calculator-container.theme-h2c h5,\\r\\n.jmt-calculator-container.theme-h2c h6,\\r\\n.jmt-calculator-container.theme-h2c .h1,\\r\\n.jmt-calculator-container.theme-h2c .h2,\\r\\n.jmt-calculator-container.theme-h2c .h3,\\r\\n.jmt-calculator-container.theme-h2c .h4,\\r\\n.jmt-calculator-container.theme-h2c .h5,\\r\\n.jmt-calculator-container.theme-h2c .h6,\\r\\n.jmt-calculator-container.theme-h2c strong,\\r\\n.jmt-calculator-container.theme-h2c a {\\r\\n font-family: Kanit, notosansthai, Arial, sans-serif;\\r\\n font-weight: 600;\\r\\n /*semi bold*/\\r\\n}\\r\\n\\r\\n#icw #calculators .c-red {\\r\\n color: var(--red-color-1) !important;\\r\\n}\\r\\n\\r\\n#icw #calculators .required-star {\\r\\n margin-left: 0px;\\r\\n}\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","var map = {\n\t\"./af\": 102,\n\t\"./af.js\": 102,\n\t\"./ar\": 103,\n\t\"./ar-dz\": 104,\n\t\"./ar-dz.js\": 104,\n\t\"./ar-kw\": 105,\n\t\"./ar-kw.js\": 105,\n\t\"./ar-ly\": 106,\n\t\"./ar-ly.js\": 106,\n\t\"./ar-ma\": 107,\n\t\"./ar-ma.js\": 107,\n\t\"./ar-ps\": 108,\n\t\"./ar-ps.js\": 108,\n\t\"./ar-sa\": 109,\n\t\"./ar-sa.js\": 109,\n\t\"./ar-tn\": 110,\n\t\"./ar-tn.js\": 110,\n\t\"./ar.js\": 103,\n\t\"./az\": 111,\n\t\"./az.js\": 111,\n\t\"./be\": 112,\n\t\"./be.js\": 112,\n\t\"./bg\": 113,\n\t\"./bg.js\": 113,\n\t\"./bm\": 114,\n\t\"./bm.js\": 114,\n\t\"./bn\": 115,\n\t\"./bn-bd\": 116,\n\t\"./bn-bd.js\": 116,\n\t\"./bn.js\": 115,\n\t\"./bo\": 117,\n\t\"./bo.js\": 117,\n\t\"./br\": 118,\n\t\"./br.js\": 118,\n\t\"./bs\": 119,\n\t\"./bs.js\": 119,\n\t\"./ca\": 120,\n\t\"./ca.js\": 120,\n\t\"./cs\": 121,\n\t\"./cs.js\": 121,\n\t\"./cv\": 122,\n\t\"./cv.js\": 122,\n\t\"./cy\": 123,\n\t\"./cy.js\": 123,\n\t\"./da\": 124,\n\t\"./da.js\": 124,\n\t\"./de\": 125,\n\t\"./de-at\": 126,\n\t\"./de-at.js\": 126,\n\t\"./de-ch\": 127,\n\t\"./de-ch.js\": 127,\n\t\"./de.js\": 125,\n\t\"./dv\": 128,\n\t\"./dv.js\": 128,\n\t\"./el\": 129,\n\t\"./el.js\": 129,\n\t\"./en-au\": 130,\n\t\"./en-au.js\": 130,\n\t\"./en-ca\": 131,\n\t\"./en-ca.js\": 131,\n\t\"./en-gb\": 132,\n\t\"./en-gb.js\": 132,\n\t\"./en-ie\": 133,\n\t\"./en-ie.js\": 133,\n\t\"./en-il\": 134,\n\t\"./en-il.js\": 134,\n\t\"./en-in\": 135,\n\t\"./en-in.js\": 135,\n\t\"./en-nz\": 136,\n\t\"./en-nz.js\": 136,\n\t\"./en-sg\": 137,\n\t\"./en-sg.js\": 137,\n\t\"./eo\": 138,\n\t\"./eo.js\": 138,\n\t\"./es\": 139,\n\t\"./es-do\": 140,\n\t\"./es-do.js\": 140,\n\t\"./es-mx\": 141,\n\t\"./es-mx.js\": 141,\n\t\"./es-us\": 142,\n\t\"./es-us.js\": 142,\n\t\"./es.js\": 139,\n\t\"./et\": 143,\n\t\"./et.js\": 143,\n\t\"./eu\": 144,\n\t\"./eu.js\": 144,\n\t\"./fa\": 145,\n\t\"./fa.js\": 145,\n\t\"./fi\": 146,\n\t\"./fi.js\": 146,\n\t\"./fil\": 147,\n\t\"./fil.js\": 147,\n\t\"./fo\": 148,\n\t\"./fo.js\": 148,\n\t\"./fr\": 149,\n\t\"./fr-ca\": 150,\n\t\"./fr-ca.js\": 150,\n\t\"./fr-ch\": 151,\n\t\"./fr-ch.js\": 151,\n\t\"./fr.js\": 149,\n\t\"./fy\": 152,\n\t\"./fy.js\": 152,\n\t\"./ga\": 153,\n\t\"./ga.js\": 153,\n\t\"./gd\": 154,\n\t\"./gd.js\": 154,\n\t\"./gl\": 155,\n\t\"./gl.js\": 155,\n\t\"./gom-deva\": 156,\n\t\"./gom-deva.js\": 156,\n\t\"./gom-latn\": 157,\n\t\"./gom-latn.js\": 157,\n\t\"./gu\": 158,\n\t\"./gu.js\": 158,\n\t\"./he\": 159,\n\t\"./he.js\": 159,\n\t\"./hi\": 160,\n\t\"./hi.js\": 160,\n\t\"./hr\": 161,\n\t\"./hr.js\": 161,\n\t\"./hu\": 162,\n\t\"./hu.js\": 162,\n\t\"./hy-am\": 163,\n\t\"./hy-am.js\": 163,\n\t\"./id\": 164,\n\t\"./id.js\": 164,\n\t\"./is\": 165,\n\t\"./is.js\": 165,\n\t\"./it\": 166,\n\t\"./it-ch\": 167,\n\t\"./it-ch.js\": 167,\n\t\"./it.js\": 166,\n\t\"./ja\": 168,\n\t\"./ja.js\": 168,\n\t\"./jv\": 169,\n\t\"./jv.js\": 169,\n\t\"./ka\": 170,\n\t\"./ka.js\": 170,\n\t\"./kk\": 171,\n\t\"./kk.js\": 171,\n\t\"./km\": 172,\n\t\"./km.js\": 172,\n\t\"./kn\": 173,\n\t\"./kn.js\": 173,\n\t\"./ko\": 174,\n\t\"./ko.js\": 174,\n\t\"./ku\": 175,\n\t\"./ku-kmr\": 176,\n\t\"./ku-kmr.js\": 176,\n\t\"./ku.js\": 175,\n\t\"./ky\": 177,\n\t\"./ky.js\": 177,\n\t\"./lb\": 178,\n\t\"./lb.js\": 178,\n\t\"./lo\": 179,\n\t\"./lo.js\": 179,\n\t\"./lt\": 180,\n\t\"./lt.js\": 180,\n\t\"./lv\": 181,\n\t\"./lv.js\": 181,\n\t\"./me\": 182,\n\t\"./me.js\": 182,\n\t\"./mi\": 183,\n\t\"./mi.js\": 183,\n\t\"./mk\": 184,\n\t\"./mk.js\": 184,\n\t\"./ml\": 185,\n\t\"./ml.js\": 185,\n\t\"./mn\": 186,\n\t\"./mn.js\": 186,\n\t\"./mr\": 187,\n\t\"./mr.js\": 187,\n\t\"./ms\": 188,\n\t\"./ms-my\": 189,\n\t\"./ms-my.js\": 189,\n\t\"./ms.js\": 188,\n\t\"./mt\": 190,\n\t\"./mt.js\": 190,\n\t\"./my\": 191,\n\t\"./my.js\": 191,\n\t\"./nb\": 192,\n\t\"./nb.js\": 192,\n\t\"./ne\": 193,\n\t\"./ne.js\": 193,\n\t\"./nl\": 194,\n\t\"./nl-be\": 195,\n\t\"./nl-be.js\": 195,\n\t\"./nl.js\": 194,\n\t\"./nn\": 196,\n\t\"./nn.js\": 196,\n\t\"./oc-lnc\": 197,\n\t\"./oc-lnc.js\": 197,\n\t\"./pa-in\": 198,\n\t\"./pa-in.js\": 198,\n\t\"./pl\": 199,\n\t\"./pl.js\": 199,\n\t\"./pt\": 200,\n\t\"./pt-br\": 201,\n\t\"./pt-br.js\": 201,\n\t\"./pt.js\": 200,\n\t\"./ro\": 202,\n\t\"./ro.js\": 202,\n\t\"./ru\": 203,\n\t\"./ru.js\": 203,\n\t\"./sd\": 204,\n\t\"./sd.js\": 204,\n\t\"./se\": 205,\n\t\"./se.js\": 205,\n\t\"./si\": 206,\n\t\"./si.js\": 206,\n\t\"./sk\": 207,\n\t\"./sk.js\": 207,\n\t\"./sl\": 208,\n\t\"./sl.js\": 208,\n\t\"./sq\": 209,\n\t\"./sq.js\": 209,\n\t\"./sr\": 210,\n\t\"./sr-cyrl\": 211,\n\t\"./sr-cyrl.js\": 211,\n\t\"./sr.js\": 210,\n\t\"./ss\": 212,\n\t\"./ss.js\": 212,\n\t\"./sv\": 213,\n\t\"./sv.js\": 213,\n\t\"./sw\": 214,\n\t\"./sw.js\": 214,\n\t\"./ta\": 215,\n\t\"./ta.js\": 215,\n\t\"./te\": 216,\n\t\"./te.js\": 216,\n\t\"./tet\": 217,\n\t\"./tet.js\": 217,\n\t\"./tg\": 218,\n\t\"./tg.js\": 218,\n\t\"./th\": 219,\n\t\"./th.js\": 219,\n\t\"./tk\": 220,\n\t\"./tk.js\": 220,\n\t\"./tl-ph\": 221,\n\t\"./tl-ph.js\": 221,\n\t\"./tlh\": 222,\n\t\"./tlh.js\": 222,\n\t\"./tr\": 223,\n\t\"./tr.js\": 223,\n\t\"./tzl\": 224,\n\t\"./tzl.js\": 224,\n\t\"./tzm\": 225,\n\t\"./tzm-latn\": 226,\n\t\"./tzm-latn.js\": 226,\n\t\"./tzm.js\": 225,\n\t\"./ug-cn\": 227,\n\t\"./ug-cn.js\": 227,\n\t\"./uk\": 228,\n\t\"./uk.js\": 228,\n\t\"./ur\": 229,\n\t\"./ur.js\": 229,\n\t\"./uz\": 230,\n\t\"./uz-latn\": 231,\n\t\"./uz-latn.js\": 231,\n\t\"./uz.js\": 230,\n\t\"./vi\": 232,\n\t\"./vi.js\": 232,\n\t\"./x-pseudo\": 233,\n\t\"./x-pseudo.js\": 233,\n\t\"./yo\": 234,\n\t\"./yo.js\": 234,\n\t\"./zh-cn\": 235,\n\t\"./zh-cn.js\": 235,\n\t\"./zh-hk\": 236,\n\t\"./zh-hk.js\": 236,\n\t\"./zh-mo\": 237,\n\t\"./zh-mo.js\": 237,\n\t\"./zh-tw\": 238,\n\t\"./zh-tw.js\": 238\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = 322;","import { configureStore } from \"@reduxjs/toolkit\";\r\nimport loginReducer from \"./stores/loginSlice\";\r\nimport { merchantAPI } from \"./stores/paylaterAPI\";\r\nimport paylaterReducer from \"./stores/paylaterSlice\";\r\nimport propertyReducer from \"./stores/propertySlice\";\r\nexport default () =>\r\n configureStore({\r\n reducer: {\r\n property: propertyReducer,\r\n login: loginReducer,\r\n paylater: paylaterReducer,\r\n [merchantAPI.reducerPath]: merchantAPI.reducer,\r\n },\r\n middleware: (getDefaultMiddleware) =>\r\n getDefaultMiddleware().concat(merchantAPI.middleware),\r\n devTools: process.env.NODE_ENV !== \"production\",\r\n });\r\n","import Config from \"config\";\r\nimport parse from \"html-react-parser\";\r\nimport React from \"react\";\r\nimport {\r\n addCommas,\r\n dmyHmsToDateObj,\r\n getArea,\r\n getDateTimeFormat,\r\n getPropertyType,\r\n showAreaValue,\r\n showBedAndBath,\r\n showUseableAreaValue,\r\n timeInRangeList,\r\n} from \"../common/Common\";\r\nimport { prepareDataForProopertyBox } from \"../common/PropertyBox\";\r\nimport \"./index.css\";\r\n\r\nconst pagesLink = Config.pagesLink;\r\n\r\nimport { auctionDetailLink } from \"./auctionConstants\";\r\n\r\nexport const TagBadgeWrapper = React.memo((propertyDetail) => {\r\n // console.log(\"TagBadgeWrapper Render\");\r\n\r\n return (\r\n \r\n {propertyDetail.IsPartner && (\r\n
\r\n );\r\n});\r\n\r\nexport const PartnerDetail = React.memo((propertyDetail) => {\r\n // console.log(\"TagBadgeWrapper Render\");\r\n if (!propertyDetail.IsPartner) return;\r\n return (\r\n \r\n \r\n
\r\n )}\r\n {propertyDetail.PropertyID.slice(2, 4) === \"66\" && (\r\n ทรัพย์ผู้ขาย
\r\n\r\n \r\n
\r\n )}\r\n {propertyDetail.IsNew && (\r\n ทรัพย์ฝากขาย
\r\n\r\n \r\n
\r\n )}\r\n {propertyDetail.IsHot && (\r\n NEW
\r\n\r\n \r\n
\r\n )}\r\n {propertyDetail.PromotionName && (\r\n HOT
\r\n\r\n \r\n
\r\n )}\r\n PROMOTION
\r\n\r\n ทรัพย์ผู้ขาย :\r\n
\r\n );\r\n});\r\n\r\nexport const PriceWrapper = React.memo((props) => {\r\n // Price\r\n let tag = \"\";\r\n let PromotionPrice = \"\";\r\n let Price = \"\";\r\n if (props.PromotionPrice) {\r\n if (props.isAuction) {\r\n tag = \r\n
\r\n ราคาประมูลเริ่มต้นที่
;\r\n } else {\r\n tag = ราคาพิเศษ
;\r\n }\r\n\r\n PromotionPrice = (\r\n \r\n {addCommas(props.PromotionPrice)}\r\n บาท\r\n
\r\n );\r\n Price ={addCommas(props.SellPrice)} บาท
;\r\n } else if (props.AdjustPrice) {\r\n tag =ราคาลดลงกว่าเดิม
;\r\n PromotionPrice = (\r\n \r\n {addCommas(props.AdjustPrice)}\r\n บาท\r\n
\r\n );\r\n Price ={addCommas(props.SellPrice)} บาท
;\r\n } else {\r\n tag = ;\r\n PromotionPrice = (\r\n\r\n {addCommas(props.SellPrice)}\r\n บาท\r\n
\r\n );\r\n }\r\n\r\n console.log(\"PriceWrapper Render\");\r\n\r\n return (\r\n\r\n {tag}\r\n
\r\n );\r\n});\r\n\r\nexport const PropertyDetailsTable = React.memo((propertyDetail) => {\r\n console.log(\"render PropertyDetailsTable\");\r\n\r\n var area = showAreaValue(propertyDetail) ? getArea(propertyDetail) : \"\";\r\n\r\n area = area ? area.value + \" \" + area.unit : \"\";\r\n\r\n return (\r\n \r\n {PromotionPrice}\r\n {Price}\r\n
\r\n \r\n {propertyDetail.PropertyTypeName && (\r\n
\r\n );\r\n});\r\n\r\nexport const PropertyDetailsCondition = React.memo((propertyDetail) => {\r\n console.log(\"render PropertyDetailsCondition\");\r\n\r\n const PMMaintenanceStatus =\r\n propertyDetail.PMMaintenanceStatus === \"มีผู้บุกรุก\"\r\n ? \"มีผู้ใช้ประโยชน์\"\r\n : propertyDetail.PMMaintenanceStatus;\r\n var propertySourceName = \"\";\r\n if (propertyDetail.PropertySourceID) {\r\n switch (propertyDetail.PropertySourceID) {\r\n case \"13\":\r\n case \"03\":\r\n case \"04\":\r\n propertySourceName = \"โอนกรรมสิทธิ์เป็นของธนาคารแล้ว\";\r\n break;\r\n case \"12\":\r\n case \"02\":\r\n propertySourceName = \"อยู่ระหว่างโอนกรรมสิทธิ์เป็นของธนาคาร\";\r\n break;\r\n case \"66\":\r\n propertySourceName = \"ทรัพย์ฝากขาย ไม่ใช่ทรัพย์สินของธนาคาร\"; //\"ทรัพย์ฝากขาย ไม่ใช่ทรัพย์สินของธนาคาร\";\r\n break;\r\n // case \"10\":\r\n // propertySourceName = \"ทรัพย์พาร์ทเนอร์ ไม่ใช่ทรัพย์สินของธนาคาร\";\r\n // break;\r\n default:\r\n propertySourceName = propertyDetail.PropertySourceName;\r\n break;\r\n }\r\n }\r\n\r\n var InOutProblemTH = \"\";\r\n\r\n if (propertyDetail.InOutProblemTH) {\r\n InOutProblemTH = \"ทรัพย์มีข้อจำกัดทางเข้า-ออก\";\r\n }\r\n\r\n function genList(value) {\r\n return (\r\n \r\n
\r\n )}\r\n {propertyDetail.AssetInfoTH && (\r\n ประเภททรัพย์
\r\n {getPropertyType(propertyDetail)}
\r\n \r\n
\r\n )}\r\n {area && (\r\n \r\n รายละเอียดของทรัพย์\r\n
\r\n {propertyDetail.AssetInfoTH}
\r\n \r\n
\r\n )}\r\n ขนาดพื้นที่
\r\n {area}
\r\n \r\n {/*
\r\n );\r\n});\r\n\r\nexport const PropertyInfoTable = React.memo((propertyDetail) => {\r\n console.log(\"render PropertyInfoTable\");\r\n\r\n var coordinateHtmls;\r\n\r\n if (\r\n propertyDetail.Latitude &&\r\n propertyDetail.Latitude !== \"-\" &&\r\n propertyDetail.Longtitude &&\r\n propertyDetail.Longtitude !== \"-\"\r\n ) {\r\n coordinateHtmls = (\r\n <>\r\n ละติจูด: {propertyDetail.Latitude} */}\r\n
*/}\r\n เงื่อนไข / โปรโมชัน
\r\n {/*- \r\n {PMMaintenanceStatus && genList(PMMaintenanceStatus)}\r\n {propertySourceName && genList(propertySourceName)}\r\n {InOutProblemTH && genList(InOutProblemTH)}\r\n {propertyDetail.PromotionRemark && genList(propertyDetail.PromotionRemark)}\r\n
ลองติจูด: {propertyDetail.Longtitude}\r\n \r\n );\r\n } else if (propertyDetail.Latitude && propertyDetail.Latitude !== \"-\") {\r\n coordinateHtmls = <>ละติจูด: {propertyDetail.Latitude};\r\n } else if (propertyDetail.Longtitude && propertyDetail.Longtitude !== \"-\") {\r\n coordinateHtmls = <>ลองติจูด: {propertyDetail.Longtitude};\r\n }\r\n\r\n return (\r\n <>\r\n
\r\n {propertyDetail.PropertyDocumentName && (\r\n
\r\n \r\n
\r\n )}\r\n {propertyDetail.DocumentNo && (\r\n \r\n ประเภทเอกสารสิทธิ์\r\n
\r\n {propertyDetail.PropertyDocumentName}
\r\n \r\n
\r\n )}\r\n {coordinateHtmls && (\r\n \r\n เลขที่เอกสารสิทธิ์\r\n
\r\n {propertyDetail.DocumentNo}
\r\n \r\n
\r\n )}\r\n พิกัดภูมิศาสตร์
\r\n {coordinateHtmls}
\r\n \r\n
*/}\r\n \r\n );\r\n});\r\n\r\nconst SpecialAnnouncement = React.memo((propertyDetail) => {\r\n // \"838800093\"\r\n if (propertyDetail.PropertyID == \"028811523\") {\r\n return (\r\n <>\r\n QR Code ของทรัพย์สิน
\r\n\r\n เงื่อนไขพิเศษ : \r\n \r\n ราคาประกาศขายขั้นต่ำ 58,000,000.-บาท โดยผู้สนใจซื้อ ต้องทำการเสนอราคา ภายใน วันที่ 27\r\n เมษายน 2566 ถึง วันที่ 8 พฤษภาคม 2566 เวลา 12.00 น. ผู้เสนอราคาสูงสุดจะเป็นผู้ที่ได้รับ\r\n การพิจารณาจากทางธนาคาร เงื่อนไขอื่นๆ เป็นไปตามที่ธนาคารกำหนด.\r\n \r\n
\r\n \r\n );\r\n }\r\n return;\r\n});\r\n\r\nexport const AnnouncementText = React.memo((propertyDetail) => {\r\n try {\r\n var promoStart = dmyHmsToDateObj(propertyDetail.PromotionStartDate);\r\n var promoEnd = dmyHmsToDateObj(propertyDetail.PromotionEndDate);\r\n\r\n if (!timeInRangeList([[promoStart, promoEnd]], new Date().setHours(0, 0, 0, 0))) {\r\n return;\r\n }\r\n\r\n if (propertyDetail.isAuction) {\r\n console.log(\"acution true-->\");\r\n return (\r\n <>\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n var text = \"ทรัพย์โปรโมชัน\";\r\n\r\n if(propertyDetail.PromotionName.includes(\"0_fee_3yrs\")){\r\n text += \" โปรน็อกแรง ดอกเบี้ย 0% นาน 3 ปี\";\r\n }else if(propertyDetail.PromotionName.includes(\"0_fee_10yrs\")){\r\n text += \" โปรน็อกแรง ดอกเบี้ย 0% นาน 10 ปี\";\r\n }else{\r\n text += \"ราคาพิเศษ\";\r\n }\r\n \r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ทรัพย์ประมูล วันที่ {getDateTimeFormat(propertyDetail.isAuction[1], false)}\r\n
\r\n \r\n ดูรายละเอียดเพิ่มเติม\r\n \r\n
\r\n \r\n );\r\n } catch {\r\n return;\r\n }\r\n});\r\n\r\nexport const PropertyRemark = React.memo((propertyDetail) => {\r\n console.log(\"render remark\");\r\n\r\n var remarkHtml;\r\n\r\n if (propertyDetail.RemarkDetail) {\r\n remarkHtml = <>{parse(propertyDetail.RemarkDetail)};\r\n } else if (propertyDetail.PropertyID) {\r\n var code = propertyDetail.PropertyID.substr(2, 2);\r\n\r\n if (propertyDetail.IsPartner) {\r\n remarkHtml = (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n {text}
\r\n \r\n ตั้งแต่วันที่ {getDateTimeFormat(promoStart, false)} –{\" \"}\r\n {getDateTimeFormat(promoEnd, false)}\r\n
\r\n - \r\n
- ธนาคารไม่อนุมัติสินเชื่อ หรือ \r\n
- \r\n ธนาคารอนุมัติสินเชื่อ แต่ไม่เท่ากับจำนวนที่ท่านยื่นเรื่องขอสินเชื่อไว้ (ต่างเสนอ)\r\n \r\n
- \r\n ลูกค้าต้องยื่นขอสินเชื่อกับธนาคารกสิกรไทยเท่านั้น โดยระยะเวลาที่ยื่นไม่เกิน 15 วัน\r\n หลังวันที่ธนาคารแจ้งผลการอนุมัติขายทรัพย์\r\n \r\n
- \r\n ลูกค้าต้องเซ็นสัญญาซื้อขายและวางเงินมัดจำเพิ่ม 9% ไม่เกิน 15 วัน\r\n หลังวันที่ธนาคารแจ้งผลการอนุมัติขายทรัพย์\r\n \r\n
- \r\n โดยลูกค้าสามารถติดต่อทีมขายที่ดูแลสินเชื่อ เพื่อทำเรื่องเสนอขอคืนเงินประกัน (1%)\r\n เงินมัดจำ (9%) ทั้งนี้จะต้องเป็นไปตามเงื่อนไขที่ธนาคารกำหนด\r\n ธนาคารขอสงวนสิทธิ์ในการเปลี่ยนแปลงเงื่อนไข ข้อกำหนด\r\n รวมถึงการยกเลิกรายการส่งเสริมการขายนี้โดยไม่ต้องแจ้งให้ทราบล่วงหน้า หลักเกณฑ์\r\n และเงื่อนไขอื่นๆ เป็นไปตามที่ธนาคารกำหนด\r\n ในกรณีมีข้อพิพาทให้ถือคำตัดสินของธนาคารเป็นที่สุด สอบถามข้อมูลเพิ่มเติม K-Contact\r\n Center โทร{\" \"}\r\n \r\n 02-8888888\r\n {\" \"}\r\n กด 04\r\n \r\n
\r\n
\r\n \r\n );\r\n});\r\n\r\nfunction areEqual(prevProps, nextProps) {\r\n if (prevProps !== nextProps) {\r\n return false;\r\n }\r\n return true;\r\n}\r\n\r\nexport const PropertyNearByTabList = React.memo((propertyDetail) => {\r\n const NearbyPlaces = propertyDetail.NearbyPlaces;\r\n\r\n let tab = [];\r\n let tabDetail = [];\r\n let lg = propertyDetail.addtion;\r\n\r\n if (NearbyPlaces) {\r\n NearbyPlaces.map((item, index) => {\r\n let id = \"\";\r\n if (typeof item.TypeCode !== \"string\") {\r\n id = item.TypeCode[0];\r\n } else {\r\n id = item.TypeCode;\r\n }\r\n\r\n let icon = \"\";\r\n\r\n if (item.icon) {\r\n icon = item.icon;\r\n }\r\n\r\n tab.push(\r\n หมายเหตุ :
\r\n - {remarkHtml}
\r\n เพิ่มเติม\r\n \r\n
\r\n {item.NameTH}
\r\n- \r\n {item.places.slice(0, 10).map((item, index) => {\r\n return (\r\n
- \r\n {item.PlaceName} {(item.Distance / 1000).toFixed(1)} กม.\r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n\r\n \r\n {tabDetail}\r\n {/*
\r\n \r\n );\r\n}, areNearbyPlacesEqual);\r\n\r\nexport const PropertyNearByTabList2024 = React.memo((propertyDetail) => {\r\n const NearbyPlaces = propertyDetail.NearbyPlaces;\r\n\r\n let tab = [];\r\n let tabDetail = [];\r\n let lg = propertyDetail.addtion;\r\n\r\n const CategoryDetail = propertyDetail.CategoryDetail;\r\n\r\n var hasFirstTab = false;\r\n\r\n if (CategoryDetail) {\r\n const details = CategoryDetail.split(\"#\").filter((detail) => detail !== \"\");\r\n const data = [];\r\n\r\n details.forEach((detail) => {\r\n const [PlaceName, Distance] = detail.split(\"|\");\r\n data.push({ PlaceName, Distance });\r\n });\r\n tabDetail.push(\r\n \r\n
\r\n รถไฟฟ้า
\r\n- \r\n
- ศูนย์ราชการนนทบุรี 0.8 กม. \r\n
- กระทรวงสาธารณสุข 1.1 กม. \r\n
- บางกระสอ 1.7 กม. \r\n
\r\n
\r\n Shopping
\r\n- \r\n
- ศูนย์ราชการนนทบุรี 0.8 กม. \r\n
- กระทรวงสาธารณสุข 1.1 กม. \r\n
- บางกระสอ 1.7 กม. \r\n
\r\n
\r\n Hospital
\r\n- \r\n
- ศูนย์ราชการนนทบุรี 0.8 กม. \r\n
- กระทรวงสาธารณสุข 1.1 กม. \r\n
- บางกระสอ 1.7 กม. \r\n
\r\n
*/}\r\n Restaurant
\r\n- \r\n
- ศูนย์ราชการนนทบุรี 0.8 กม. \r\n
- กระทรวงสาธารณสุข 1.1 กม. \r\n
- บางกระสอ 1.7 กม. \r\n
\r\n \r\n \r\n {data.map((item, index) => {\r\n return (\r\n
\r\n
\r\n );\r\n hasFirstTab = tabDetail.length > 0;\r\n\r\n if (hasFirstTab) {\r\n tab.push(\r\n | \r\n {item.PlaceName}\r\n | \r\n{parseFloat(item.Distance).toFixed(1)} กม. | \r\n
| \r\n {item.PlaceName}\r\n | \r\n{(parseFloat(item.Distance) / 1000).toFixed(1)} กม. | \r\n
\r\n
\r\n \r\n );\r\n}, areNearbyPlacesEqual);\r\n\r\nfunction areNearbyPlacesEqual(prevProps, nextProps) {\r\n if (prevProps.NearbyPlaces?.length !== nextProps.NearbyPlaces?.length) {\r\n return false;\r\n }\r\n return true;\r\n}\r\n\r\nexport const DetailContainer = React.memo((propertyDetail) => {\r\n var Bedroom =\r\n showBedAndBath(propertyDetail) && propertyDetail.Bedroom > 0 ? propertyDetail.Bedroom : \"\";\r\n var Bathroom =\r\n showBedAndBath(propertyDetail) && propertyDetail.Bathroom > 0 ? propertyDetail.Bathroom : \"\";\r\n\r\n var area = showAreaValue(propertyDetail) ? getArea(propertyDetail) : \"\";\r\n\r\n var ShowAreaValue = area ? area.value + \" \" + area.unit : \"\";\r\n var ShowUseableArea =\r\n showUseableAreaValue(propertyDetail) && propertyDetail.UseableArea\r\n ? propertyDetail.UseableArea.toFixed(2) + \" ตร.ม.\"\r\n : \"\";\r\n\r\n return (\r\n <>\r\n สถานที่ใกล้เคียง
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n - {tab}
{tabDetail}
\r\n \r\n {ShowAreaValue && (\r\n
\r\n \r\n );\r\n});\r\n\r\nexport const PrivacyText = React.memo((propertyDetail) => {\r\n const kbankPrivacyLink = \"https://kbank.co/PDPA_TH_WEBSITE\";\r\n const JMTPrivacyLink = \"https://www.j-amc.co.th/index.php/policycustomer\";\r\n if (propertyDetail.IsPartner) {\r\n // var partnerName = \"บริษัท บริหารสินทรัพย์ เจ จำก้ด \";\r\n var privacyText =\r\n \"ข้าพเจ้ายินยอมให้ธนาคารเปิดเผยข้อมูลของข้าพเจ้าตามที่ระบุข้างต้นให้แก่ผู้ขายที่ข้าพเจ้าสนใจ (“ผู้ขาย”) และยินยอมให้ธนาคาร และ/หรือผู้ขายเก็บรวบรวม ใช้ และ/หรือเปิดเผยข้อมูลของข้าพเจ้าดังกล่าว เพื่อวัตถุประสงค์ในการติดต่อ นำเสนอ และประชาสัมพันธ์ผลิตภัณฑ์และบริการที่ข้าพเจ้าสนใจ ข้าพเจ้าได้อ่านและเข้าใจรายละเอียดและสิทธิใน \";\r\n\r\n return (\r\n <>\r\n \r\n
\r\n )}\r\n\r\n {ShowUseableArea && (\r\n เนื้อที่
\r\n \r\n{ShowAreaValue}
\r\n\r\n
\r\n )}\r\n\r\n {Bedroom && (\r\n พื้นที่ใช้สอย
\r\n \r\n{ShowUseableArea}
\r\n\r\n
\r\n )}\r\n\r\n {Bathroom && (\r\n ห้องนอน
\r\n \r\n{Bedroom} ห้อง
\r\n\r\n
\r\n )}\r\n\r\n {propertyDetail.CarParking && (\r\n ห้องน้ำ
\r\n \r\n{Bathroom} ห้อง
\r\n\r\n
\r\n )}\r\n ที่จอดรถ
\r\n \r\n{propertyDetail.CarParking} คัน
\r\n\r\n {privacyText}\r\n \r\n นโยบายการคุ้มครองข้อมูลส่วนบุคคลของธนาคาร\r\n {\" \"}\r\n และ นโยบายการคุ้มครองข้อมูลส่วนบุคคลของผู้ขาย ตามช่องทางที่ผู้ขายกำหนดเรียบร้อยแล้ว\r\n
\r\n \r\n );\r\n }\r\n\r\n return (\r\n <>\r\n\r\n ธนาคารจะเก็บรวบรวม ใช้ เปิดเผยข้อมูลส่วนบุคคลของคุณเพื่อติดต่อ\r\n นำเสนอและประชาสัมพันธ์ผลิตภัณฑ์และบริการที่คุณสนใจ โปรดศึกษารายละเอียดและสิทธิใน{\" \"}\r\n \r\n นโยบายการคุ้มครองข้อมูลส่วนบุคคล\r\n \r\n
\r\n \r\n );\r\n});\r\n\r\nexport function getLocation(data) {\r\n var location = \"\";\r\n\r\n if (data.AddressNoTH) {\r\n location += \"เลขที่ \" + data.AddressNoTH;\r\n }\r\n\r\n if (data.BuildingTH) {\r\n location += \" อาคาร \" + data.BuildingTH;\r\n }\r\n\r\n if (data.FloorTH) {\r\n location += \" ชั้น \" + data.FloorTH;\r\n }\r\n\r\n if (data.VillageTH) {\r\n location += \" หมู่บ้าน \" + data.VillageTH;\r\n }\r\n\r\n if (data.SoiTH) {\r\n location += \" ซอย \" + data.SoiTH;\r\n }\r\n\r\n if (data.RoadTH) {\r\n location += \" ถนน \" + data.RoadTH;\r\n }\r\n\r\n var isBangkok = data.ProvinceName && data.ProvinceName.indexOf(\"กรุงเทพ\") !== -1;\r\n\r\n if (data.TambonName) {\r\n location += (isBangkok ? \" แขวง \" : \" ตำบล \") + data.TambonName;\r\n }\r\n\r\n if (data.AmphurName) {\r\n //location += (isBangkok ? \" เขต \" : \" อำเภอ \") + data.AmphurName;\r\n if (isBangkok) {\r\n if (data.AmphurName.indexOf(\"เขต\") === 0) {\r\n location += \" \" + data.AmphurName;\r\n } else {\r\n location += \" เขต \" + data.AmphurName;\r\n }\r\n } else {\r\n location += \" อำเภอ \" + data.AmphurName;\r\n }\r\n }\r\n\r\n if (data.ProvinceName) {\r\n location += \" จังหวัด \" + data.ProvinceName;\r\n }\r\n\r\n return location.trim();\r\n}\r\n\r\nexport const TagPropertiesWrapper = React.memo((propertyDetail) => {\r\n const group = propertyDetail.CategoryGroup;\r\n\r\n const tags = group?.split(\"#\")?.filter((tag) => tag !== \"\") ?? [];\r\n\r\n const tagToLink = (tag) => {\r\n switch (tag) {\r\n case \"ทรัพย์อุ่นใจใกล้หมอ\":\r\n return pagesLink.search+\"?searchpurposes=Doctor\";\r\n case \"ทรัพย์เพื่อตากอากาศ\":\r\n return pagesLink.search+\"?searchpurposes=Bungalow\";\r\n case \"ทรัพย์ต่างจังหวัดใจกลางเมือง\":\r\n return pagesLink.search+\"?searchpurposes=CityCenter\";\r\n case \"ทรัพย์กรุงเทพฯ รอบนอก\":\r\n return pagesLink.search+\"?searchpurposes=OuterBangkok\";\r\n case \"ทรัพย์เด่นแนวรถไฟฟ้า\":\r\n return pagesLink.search+\"?searchpurposes=OutstandingAlongTheSkyTrain\";\r\n default:\r\n return pagesLink.search;\r\n }\r\n };\r\n\r\n // Doctor ทรัพย์อุ่นใจใกล้หมอ\r\n // Bungalow ทรัพย์เพื่อตากอากาศ\r\n // CityCenter ทรัพย์ต่างจังหวัดใจกลางเมือง\r\n // OuterBangkok ทรัพย์กรุงเทพฯ รอบนอก\r\n // OutstandingAlongTheSkyTrain ทรัพย์เด่นแนวรถไฟฟ้า\r\n\r\n return (\r\n <>\r\n\r\n {tags.map((tag) => (\r\n \r\n {tag}\r\n \r\n ))}\r\n
\r\n {/* \r\n \r\n ทรัพย์ใกล้รถไฟฟ้า\r\n \r\n \r\n ทรัพย์ใกล้หมอ\r\n \r\n \r\n ทรัพย์พร้อมอยู่\r\n \r\n \r\n ทรัพย์ราคาพิเศษ\r\n \r\n
*/}\r\n \r\n );\r\n});\r\n\r\nexport const DetailWrapper = React.memo((propertyDetail) => {\r\n return (\r\n <>\r\n \r\n {propertyDetail.ShowAreaValue && (\r\n
\r\n \r\n );\r\n});\r\n\r\nexport const TableDetail = React.memo((propertyDetail) => {\r\n // console.log(\"render TableDetail\");\r\n\r\n var area = showAreaValue(propertyDetail) ? getArea(propertyDetail) : \"\";\r\n\r\n area = area ? area.value + \" \" + area.unit : \"\";\r\n\r\n return (\r\n <>\r\n \r\n
\r\n )}\r\n {propertyDetail.ShowUseableArea && (\r\n เนื้อที่
\r\n \r\n\r\n
\r\n เนื้อที่
\r\n{propertyDetail.ShowAreaValue}
\r\n\r\n
\r\n )}\r\n {propertyDetail.Bedroom && (\r\n พื้นที่ใช้สอย
\r\n \r\n\r\n
\r\n พื้นที่ใช้สอย
\r\n{propertyDetail.ShowUseableArea}
\r\n\r\n
\r\n )}\r\n {propertyDetail.Bathroom && (\r\n ห้องนอน
\r\n \r\n\r\n
\r\n ห้องนอน
\r\n{propertyDetail.Bedroom} ห้อง
\r\n\r\n
\r\n )}\r\n {propertyDetail.CarParking && (\r\n ห้องน้ำ
\r\n \r\n\r\n
\r\n ห้องน้ำ
\r\n{propertyDetail.Bathroom} ห้อง
\r\n\r\n
\r\n )}\r\n ที่จอดรถ
\r\n \r\n\r\n
\r\n ที่จอดรถ
\r\n{propertyDetail.CarParking} คัน
\r\n\r\n \r\n \r\n {propertyDetail.PropertyTypeName && (\r\n
\r\n
\r\n \r\n );\r\n});\r\n\r\nexport const ShareConent = () => {\r\n return (\r\n <>\r\n รายละเอียดทรัพย์สิน
\r\n| ประเภททรัพย์ | \r\n{getPropertyType(propertyDetail)} | \r\n
| รายละเอียดทรัพย์ | \r\n{propertyDetail.AssetInfoTH} | \r\n
| ขนาดพื้นที่ | \r\n{area} | \r\n
| ทรัพย์ใกล้รถไฟฟ้า | \r\nสายสีชมพู, ฟ้า | \r\n
| พร้อมอยู่ | \r\nรีโนเวทวันที่ 19 กพ 64 | \r\n
\r\n \r\n
\r\n แชร์
\r\n\r\n
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n แชร์
\r\n\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport const ModalDetail = (props) => {\r\n const propertyDetail = props.propertyDetail;\r\n const title = props.title ?? \"รายละเอียดทรัพย์\";\r\n const makeAnOfferClick = props.makeAnOfferClick;\r\n const isDecoration = props.isDecoration;\r\n\r\n var {\r\n propertyDetailURL,\r\n thumbnailURL,\r\n location,\r\n propertyName,\r\n tag,\r\n PromotionPrice,\r\n Price,\r\n areaHtml,\r\n bedRoomHtml,\r\n propertyTypeHtml,\r\n PropertyIDFormat,\r\n IsPartner,\r\n } = prepareDataForProopertyBox(propertyDetail);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React, { useEffect, useState } from \"react\";\r\nimport {\r\n addCommas,\r\n getUTM,\r\n showBedAndBath,\r\n getArea,\r\n getPropertyType,\r\n getCookie,\r\n setCookie,\r\n setLikeProperty,\r\n} from \"../common/Common\";\r\nimport Config from \"config\";\r\nimport classnames from \"classnames/bind\";\r\nimport { CompareButton } from \"../Compare/Common\";\r\n\r\nconst pagesLink = Config.pagesLink;\r\nconst mediaURLPrefix = Config.mediaURLPrefix;\r\nconst defaultThumbnailURL = Config.defaultThumbnailURL;\r\n\r\nconst PropertyImgComp = ({ imgUrl, altName = \"pfs-image\" }) => {\r\n return (\r\n <>\r\n \r\n
\r\n {title}
\r\n \r\n\r\n
\r\n \r\n {/* 1\r\n /\r\n {slideImages.length} */}\r\n
\r\n \r\n \r\n แชร์\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {propertyName}
\r\n \r\n\r\n \r\n
\r\n {location}
\r\n\r\n
\r\n {propertyTypeHtml}
\r\nรหัส {propertyDetail.PropertyIDFormat}
\r\n\r\n
\r\n {bedRoomHtml}
\r\n {areaHtml}
\r\n \r\n {tag}\r\n
\r\n {/* \r\n {PromotionPrice}\r\n {Price}\r\n
\r\n \r\n \r\n ติดต่อเจ้าหน้าที่/นัดหมายชมทรัพย์จริง\r\n \r\n \r\n ติดต่อเจ้าหน้าที่/นัดหมายเข้าชมทรัพย์\r\n \r\n \r\n เสนอราคาซื้อ\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nconst PropertyBox = (property) => {\r\n const [isLike, setIslike] = useState(false);\r\n const [showLike, setShowLike] = useState(true);\r\n\r\n useEffect(() => {\r\n // if (getCookie(\"Allow_Cookies\") === \"N\") {\r\n // setShowLike(false);\r\n // return;\r\n // }\r\n var favProp = getCookie(\"favoriteProperty\");\r\n if (favProp && favProp.split(\",\").includes(property.PropertyID)) {\r\n setIslike(true);\r\n }\r\n }, []);\r\n\r\n function OnLikeCheck(e) {\r\n // e.stopPropagation();\r\n e.preventDefault();\r\n // if (getCookie(\"Allow_Cookies\") === \"N\") {\r\n // setShowLike(false);\r\n // return;\r\n // }\r\n setLikeProperty(property.PropertyID, !isLike);\r\n setIslike(!isLike);\r\n // var favProp = getCookie(\"favoriteProperty\");\r\n // if (isLike) {\r\n // if (favProp) {\r\n // setCookie(\r\n // \"favoriteProperty\",\r\n // favProp\r\n // .split(\",\")\r\n // .filter((e) => e != property.PropertyID)\r\n // .join(\",\"),\r\n // 30\r\n // );\r\n // }\r\n // setIslike(false);\r\n // } else if (!isLike) {\r\n // if (!favProp.split(\",\").includes(property.PropertyID)) {\r\n // setCookie(\r\n // \"favoriteProperty\",\r\n // favProp\r\n // .split(\",\")\r\n // .concat(property.PropertyID)\r\n // .filter((x) => x)\r\n // .join(\",\"),\r\n // 30\r\n // );\r\n // }\r\n // setIslike(true);\r\n // }\r\n }\r\n\r\n function goToUrl(url) {\r\n window.location = url;\r\n }\r\n\r\n var {\r\n propertyDetailURL,\r\n thumbnailURL,\r\n location,\r\n propertyName,\r\n tag,\r\n PromotionPrice,\r\n Price,\r\n areaHtml,\r\n bedRoomHtml,\r\n propertyTypeHtml,\r\n PropertyIDFormat,\r\n IsPartner,\r\n imgPCList,\r\n } = prepareDataForProopertyBox(property);\r\n\r\n // console.log(\"imgPCList\", imgPCList);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n ดูเพิ่มเติม\r\n \r\n goToUrl(propertyDetailURL)}\r\n href={propertyDetailURL}\r\n >\r\n {IsPartner && (\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport const PropertyList = (props) => {\r\n if (!props.list) {\r\n return <>;\r\n }\r\n return (\r\n <>\r\n \r\n 
\r\n
\r\n )}\r\n {/* \r\n {\r\n currentTarget.onerror = null; // prevents looping\r\n currentTarget.src = defaultThumbnailURL;\r\n }}\r\n alt={propertyName}\r\n loading=\"lazy\"\r\n />\r\n
*/}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {imgPCList.length > 0 && (\r\n <>\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n {/* 2024 add multi img */}\r\n {imgPCList.length > 0 &&\r\n imgPCList.map((pcUrl, index) => {\r\n return (\r\n \r\n {imgPCList.length == 0 &&
\r\n \r\n {index == imgPCList.length - 1 &&
\r\n );\r\n })}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {IsPartner && (\r\n
\r\n \r\n \r\n ทรัพย์ผู้ขาย\r\n
\r\n )}\r\n {property.PropertyID?.slice(2, 4) === \"66\" && (\r\n \r\n \r\n \r\n ทรัพย์ฝากขาย\r\n
\r\n )}\r\n {property.IsNew && (\r\n \r\n \r\n NEW\r\n
\r\n )}\r\n {property.IsHot && (\r\n \r\n \r\n HOT\r\n
\r\n )}\r\n {property.PromotionName && (\r\n \r\n \r\n Promotion\r\n
\r\n )}\r\n \r\n \r\n
\r\n {propertyName}
\r\n \r\n\r\n
\r\n \r\n {showLike && (\r\n OnLikeCheck(e)}\r\n >\r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n กรุณากดยอมรับ
Cookie สำหรับ
{\" \"}\r\n การเพิ่มทรัพย์ถูกใจ\r\n \r\n
\r\n Cookie สำหรับ
{\" \"}\r\n การเพิ่มทรัพย์ถูกใจ\r\n \r\n
\r\n \r\n
\r\n {location}
\r\n\r\n
\r\n {propertyTypeHtml}
\r\nรหัส {PropertyIDFormat}
\r\n\r\n
\r\n {bedRoomHtml}
\r\n {areaHtml}
\r\n \r\n {tag}\r\n
\r\n \r\n {PromotionPrice}\r\n {Price}\r\n
\r\n \r\n {props.list.map((property, i) => (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport function prepareDataForProopertyBox(\r\n property,\r\n { isBedPTag = false, atBath = true } = {}\r\n) {\r\n // Link & img\r\n var propertyDetailURL =\r\n pagesLink.detail.replace(\"{{PropID}}\", property.PropertyID) + // + '&source=' + encodeURIComponent(window.location.href)\r\n \"?\" +\r\n getUTM();\r\n\r\n var thumbnail = property.PropertyMediaes?.filter(function (media) {\r\n return media.MediaType === \"IMAGE-THUMBNAIL\";\r\n })[0];\r\n\r\n var thumbnailURL;\r\n\r\n if (thumbnail !== undefined) {\r\n thumbnailURL = mediaURLPrefix + thumbnail.MediaPath;\r\n } else {\r\n thumbnailURL = defaultThumbnailURL;\r\n }\r\n\r\n var imgPCList = property.PropertyMediaes?.filter(function (media) {\r\n return media.MediaType === \"IMAGE-PC\";\r\n }).map((item) => {\r\n return mediaURLPrefix + item.MediaPath;\r\n });\r\n\r\n // Location\r\n var isInBangkok =\r\n property.ProvinceName && property.ProvinceName.indexOf(\"กรุงเทพ\") !== -1;\r\n var location = \"\";\r\n\r\n if (property.AmphurName) {\r\n if (isInBangkok) {\r\n location +=\r\n property.AmphurName.indexOf(\"เขต\") !== -1\r\n ? property.AmphurName\r\n : \"เขต\" + property.AmphurName;\r\n } else {\r\n location += property.AmphurName;\r\n }\r\n location += \" \";\r\n }\r\n\r\n if (property.ProvinceName) {\r\n location += property.ProvinceName;\r\n }\r\n\r\n // Property Name\r\n var propertyName;\r\n var title;\r\n\r\n if (property.VillageTH && property.VillageTH !== \"-\") {\r\n propertyName = property.VillageTH;\r\n if (propertyName.length > 46) {\r\n propertyName = propertyName.slice(0, 50) + \"...\";\r\n }\r\n title = \"ดูเพิ่มเติม \" + propertyName;\r\n } else {\r\n propertyName = `${getPropertyType(property)} ${property.ProvinceName}`;\r\n title = \"ดูเพิ่มเติม\";\r\n }\r\n\r\n // Price\r\n let tag = \"\";\r\n let PromotionPrice = \"\";\r\n let Price = \"\";\r\n if (property.PromotionPrice) {\r\n tag = (\r\n \r\n
\r\n );\r\n PromotionPrice = (\r\n ราคาพิเศษ
\r\n\r\n {addSpan(property.PromotionPrice, atBath)}\r\n
\r\n );\r\n Price ={addCommas(property.SellPrice, 0)} บาท
;\r\n } else if (property.AdjustPrice) {\r\n tag = (\r\n\r\n
\r\n );\r\n PromotionPrice = (\r\n ราคาลดลงกว่าเดิม
\r\n\r\n {addSpan(property.AdjustPrice, atBath)}\r\n
\r\n );\r\n Price ={addCommas(property.SellPrice, 0)} บาท
;\r\n } else {\r\n PromotionPrice = (\r\n\r\n {addSpan(property.SellPrice, atBath)}\r\n
\r\n );\r\n Price = (\r\n\r\n -\r\n
\r\n );\r\n\r\n tag = (\r\n\r\n
\r\n );\r\n }\r\n\r\n //area\r\n var areaHtml;\r\n var area = getArea(property);\r\n\r\n if (area !== null) {\r\n areaHtml = (\r\n -
\r\n\r\n {area.value}{\" \"}\r\n {area.unit}\r\n
\r\n );\r\n } else {\r\n areaHtml = (\r\n\r\n \r\n
\r\n );\r\n }\r\n\r\n //bed & bath\r\n var bedRoomHtml;\r\n if (showBedAndBath(property)) {\r\n var bed;\r\n var bath;\r\n if (property.Bedroom && property.Bedroom > 0) {\r\n if (isBedPTag) {\r\n bed = (\r\n\r\n \r\n {property.Bedroom}\r\n
\r\n );\r\n } else {\r\n bed = (\r\n \r\n \r\n {property.Bedroom}\r\n \r\n );\r\n }\r\n }\r\n if (property.Bathroom && property.Bathroom > 0) {\r\n if (isBedPTag) {\r\n bath = (\r\n\r\n \r\n {property.Bathroom}\r\n
\r\n );\r\n } else {\r\n bath = (\r\n \r\n \r\n {property.Bathroom}\r\n \r\n );\r\n }\r\n }\r\n if (bed && bath) {\r\n bedRoomHtml = [bed, , bath];\r\n } else if (bed || bath) {\r\n bedRoomHtml = [bed, bath];\r\n } else {\r\n bedRoomHtml =;\r\n }\r\n }\r\n\r\n //assetType\r\n var propertyTypeHtml;\r\n if (property.PropertyTypeName) {\r\n propertyTypeHtml = getPropertyType(property);\r\n } else {\r\n propertyTypeHtml = \" \";\r\n }\r\n\r\n var PropertyIDFormat = property.PropertyID\r\n ? `${property.PropertyID?.slice(0, 2)}-${property.PropertyID?.slice(\r\n 2,\r\n 4\r\n )}-${property.PropertyID?.slice(4)}`\r\n : \"\";\r\n\r\n var Logo =\r\n \"/SiteCollectionDocuments/assets/PFS2022/theme/img/logo/\" +\r\n property.SourceImageLogo;\r\n var IsPartner = checkIsPartner(property) ? Logo : false;\r\n\r\n return {\r\n propertyDetailURL,\r\n thumbnailURL,\r\n location,\r\n propertyName,\r\n tag,\r\n PromotionPrice,\r\n Price,\r\n areaHtml,\r\n bedRoomHtml,\r\n propertyTypeHtml,\r\n PropertyIDFormat,\r\n IsPartner,\r\n imgPCList,\r\n };\r\n}\r\n\r\nfunction addSpan(value, atBath = true) {\r\n if (atBath) {\r\n return (\r\n <>\r\n {addCommas(value, 0)} บาท\r\n \r\n );\r\n } else {\r\n return (\r\n <>\r\n {\" \"}\r\n {addCommas(value, 0)} บาท\r\n \r\n );\r\n }\r\n}\r\n\r\nexport function checkIsPartner(data) {\r\n return data.SourceSaleType == \"Partner\";\r\n var propertyCode = data.PropertyID.slice(2, 4);\r\n switch (propertyCode) {\r\n case \"10\":\r\n return true;\r\n default:\r\n return false;\r\n }\r\n}\r\n","const $ = window.$;\r\nconst numberOnlyRegEx = /^[0-9]*$/;\r\nfunction checkID(id) {\r\n if (id.length !== 13) return false;\r\n let sum = 0;\r\n for (let i = 0; i < 12; i++) {\r\n sum += parseFloat(id.charAt(i)) * (13 - i);\r\n }\r\n if ((11 - sum % 11) % 10 !== parseFloat(id.charAt(12)))\r\n return false;\r\n return true;\r\n}\r\n\r\nfunction IsValidMobilePhone(phonenumber) {\r\n return /0[13456789]{1}[0-9]{8}$/.test(phonenumber)// && /^0[869]/.test(phonenumber);\r\n}\r\n\r\nfunction IsNumberOnly(str) {\r\n return /[0123456789]$/.test(str)\r\n}\r\n\r\nfunction IsPostCode(str) {\r\n let valid = true\r\n valid = valid && !(/(\\d)\\1\\1\\1\\1/.test(str))\r\n valid = valid && IsNumberOnly(str)\r\n return valid\r\n}\r\n\r\nexport function validatePlaceName(str) {\r\n let valid = true\r\n valid = valid && (str.length !== 1 && str[0] !== ' ' && str.indexOf('|') === -1)\r\n valid = valid && !(/[^0-9A-Za-z\\~!@#$%&*()_+=\\u002D\\u0027\\\\\\][{}\\:;\\/?.><, \\u0E01-\\u0E3A\\u0E40-\\u0E4D\\^]/.test(str))\r\n return valid\r\n}\r\n\r\nexport function toThousandSeparated(num) {\r\n if (num === '') {\r\n return '';\r\n }\r\n\r\n num = '' + num;\r\n\r\n var isNegative = num.indexOf('-') === 0;\r\n var output = isNegative ? num.slice(1) : num;\r\n var count = 0;\r\n var i = output.length - 1;\r\n\r\n while (i > 0) {\r\n count++;\r\n\r\n if (count >= 3) {\r\n output = output.slice(0, i) + ',' + output.slice(i);\r\n count = 0;\r\n }\r\n\r\n i--;\r\n }\r\n\r\n return (isNegative ? '-' : '') + output;\r\n}\r\n\r\nexport function getAmount(value) {\r\n return value.trim().replace(RegExp(',', 'g'), '');\r\n}\r\n\r\nfunction isInteger(val) {\r\n return /^[0-9]*$/.test(val);\r\n}\r\n\r\nexport function VaridateCalcDataField(formData, field, value) {\r\n if (typeof (value) == 'boolean') {\r\n value = value.toString();\r\n }\r\n\r\n const formDataField = formData[field];\r\n\r\n switch (field) {\r\n case 'stayInstallmentYear':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกระยะเวลาผ่อนชำระ';\r\n }\r\n\r\n return '';\r\n case 'stayPropertyLimitAmount':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกวงเงินทรัพย์';\r\n }\r\n\r\n return '';\r\n case 'stayDecorationLimitAmount':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกวงเงินตกแต่ง';\r\n }\r\n\r\n return '';\r\n case 'stayIncomePerMonth':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกรายได้ต่อเดือน';\r\n } else if (+value < formDataField.minValue) {\r\n return 'ผู้กู้ต้องมีรายได้ขั้นต่ำ ' + toThousandSeparated('' + formDataField.minValue) + ' บาท';\r\n }\r\n\r\n return '';\r\n case 'stayDebtBurdenPerMonth':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกภาระหนี้';\r\n }\r\n\r\n return '';\r\n case 'businessInstallmentYear':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกระยะเวลาผ่อนชำระ';\r\n }\r\n\r\n return '';\r\n case 'businessPropertyLimitAmount':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกวงเงินทรัพย์';\r\n }\r\n\r\n return '';\r\n case 'businessDecorationLimitAmount':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกวงเงินตกแต่ง';\r\n }\r\n\r\n return '';\r\n case 'businessIncomePerMonth':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกกำไรสุทธิต่อเดือน';\r\n }\r\n\r\n return '';\r\n case 'businessDebtBurdenPerMonth':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกภาระหนี้';\r\n }\r\n\r\n return '';\r\n\r\n // case 'price':\r\n // value = getAmount(value);\r\n\r\n // if (value === '') {\r\n // return 'กรุณากรอกราคาทรัพย์/ราคาเสนอซื้อ';\r\n // } else if (!isInteger(value)) {\r\n // return 'กรุณาระบุเป็นจำนวนเต็ม';\r\n // } else if (definedPropertyPrice !== null && +value > definedPropertyPrice) {\r\n // return 'กรุณาระบุราคาไม่เกิน ' + toThousandSeparated('' + definedPropertyPrice) + ' บาท';\r\n // }\r\n // return '';\r\n \r\n default:\r\n return '';\r\n }\r\n}\r\n\r\nexport function VaridateDropleadDataField(formData, field, value) {\r\n if (typeof (value) == 'boolean') {\r\n value = value.toString()\r\n }\r\n\r\n const formDataField = formData[field];\r\n if (formDataField.required) {\r\n switch (field) {\r\n case 'juJuristicId':\r\n if (value === '') {\r\n return 'กรุณากรอกเลขนิติบุคคล';\r\n } else if (!/^[0-9]{13}$/g.test(value)) {\r\n return 'กรอกข้อมูลเลขนิติบุคคลให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'juFirstName':\r\n if (value === '') {\r\n return 'กรุณากรอกชื่อ';\r\n } else if (!isThaiEngNonNumber(value)) {\r\n return 'กรอกข้อมูลชื่อให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'juLastName':\r\n if (value === '') {\r\n return 'กรุณากรอกนามสกุล';\r\n } else if (!isThaiEngNonNumber(value)) {\r\n return 'กรอกข้อมูลนามสกุลให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'phone':\r\n if (value === '') {\r\n return 'กรุณากรอกเบอร์มือถือ';\r\n } else if (!IsValidMobilePhone(value) || !/^0[869]/.test(value)) {\r\n return 'กรอกข้อมูลเบอร์มือถือให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'confirmphone':\r\n var mobileNo = formData[\"phone\"].value.trim();\r\n\r\n if (value === '') {\r\n return 'กรุณาระบุเบอร์มือถือให้ตรงกัน';\r\n } else if (value !== mobileNo) {\r\n return 'กรุณาระบุเบอร์มือถือให้ตรงกัน';\r\n }\r\n\r\n return '';\r\n case 'email':\r\n if (value === '') {\r\n return 'กรุณากรอกอีเมล';\r\n } else if (!IsValidEmail(value)) {\r\n return 'กรอกข้อมูลอีเมลให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'naCitizenId':\r\n if (value === '') {\r\n return 'กรุณากรอกเลขบัตรประชาชน';\r\n } else if (!checkID(value)) {\r\n return 'กรอกข้อมูลเลขบัตรประชาชนให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'consentCheck':\r\n case 'juCompanyName':\r\n if (value === '') {\r\n return 'กรุณากรอกชื่อบริษัท';\r\n } else if (!isCompanyNameFormat(value)) {\r\n return 'กรอกข้อมูลชื่อบริษัทให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'naFirstName':\r\n if (value === '') {\r\n return 'กรุณากรอกชื่อ';\r\n } else if (!isThaiEngNonNumber(value)) {\r\n return 'กรอกข้อมูลชื่อให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'naLastName':\r\n if (value === '') {\r\n return 'กรุณากรอกนามสกุล';\r\n } else if (!isThaiEngNonNumber(value)) {\r\n return 'กรอกข้อมูลนามสกุลให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'naCareer':\r\n if (value === '') {\r\n return 'กรุณากรอกอาชีพ';\r\n }\r\n\r\n return '';\r\n case 'naSalary':\r\n value = getAmount(value);\r\n\r\n if (value === '') {\r\n return 'กรุณากรอกรายได้ต่อเดือน';\r\n } else if (!IsNumberOnly(value)\r\n || !/^[1-9]/.test(value)\r\n || getAmountDigit(value) > 7) {\r\n return 'กรอกข้อมูลรายได้ต่อเดือนให้ถูกต้อง';\r\n }\r\n\r\n return '';\r\n case 'availableTime':\r\n if (value === '') {\r\n return 'กรุณากรอกช่วงเวลาที่สะดวกให้ติดต่อกลับ';\r\n }\r\n\r\n return '';\r\n default:\r\n return '';\r\n }\r\n }\r\n else {\r\n return '';\r\n }\r\n}\r\n\r\nfunction IsValidEmail(email) {\r\n // the regex works in IE but should be a string (see nnnnn's answer) \r\n // var em= new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/i);\r\n var em = /^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/i; // simpler\r\n return em.test(email);\r\n}\r\n\r\nvar thaiEngNonNumberRegEx = /^[A-Za-z\\u0E00-\\u0E5F_-]*$/;\r\n\r\nfunction isThaiEngNonNumber(str) {\r\n return thaiEngNonNumberRegEx.test(str);\r\n}\r\n\r\nvar companyNameRegEx = /^[A-Za-z0-9\\u0E00-\\u0E5F\\s.,()-]*$/;\r\nfunction isCompanyNameFormat(str) {\r\n return companyNameRegEx.test(str);\r\n}\r\n\r\nfunction getAmountDigit(num) {\r\n var count = 0;\r\n\r\n num.split(\"\").filter(function (ch) {\r\n if (numberOnlyRegEx.test(ch)) {\r\n count++;\r\n }\r\n });\r\n\r\n return count;\r\n}\r\n\r\nexport function GoToError() {\r\n if ($('.text-error:first').length !== 0) {\r\n // if(isElementOutViewport($('.text-error:first').parent()[0])){\r\n // $('html, body').animate({\r\n // scrollTop: $('.text-error:first').parent().offset().top\r\n // }, 500);\r\n // }\r\n // $('html, body').animate({\r\n // scrollTop: $('.text-error:first').parent().offset().top\r\n // }, 500);\r\n $('html, body').scrollTop($('.text-error:first').parent().offset().top - 20);\r\n $('.text-error:first').parent().find('input').shake()\r\n console.log(\"done goto error\")\r\n } else {\r\n console.log(\"not found goto error\")\r\n }\r\n}\r\n\r\n// function isElementOutViewport(el){\r\n// var rect = el.getBoundingClientRect();\r\n// return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;\r\n// }","import React, { useState, useEffect } from 'react';\r\nimport { useDispatch } from 'react-redux'\r\nimport { formsCalcPropsChange, formsCalcDataChange, CalcValidateChange } from '../stores/propertySlice'\r\nimport { toThousandSeparated, VaridateCalcDataField, getAmount } from './ValidateHelper'\r\nimport * as formulajs from '@formulajs/formulajs'\r\n\r\nexport function CalculatorsV2(props) {\r\n const dispatch = useDispatch();\r\n\r\n const [isEditMode, setIsEditMode] = useState(false);\r\n \r\n useEffect(() => {\r\n console.log('#### useEffect CalculatorsV2');\r\n\r\n if(props.calculatorHomeLoanSetting.value === 0\r\n || props.calculatorLandSetting.value === 0\r\n || props.calculatorSMESetting.value === 0\r\n ){\r\n return;\r\n }\r\n\r\n var calHomeLoanSetting = props.calculatorHomeLoanSetting.value;\r\n var calLandSetting = props.calculatorLandSetting.value;\r\n var calSMESetting = props.calculatorSMESetting.value;\r\n\r\n var stayTotalInstallmentPerMonth;\r\n var stayTotalLimitAmount;\r\n var stayInstallmentYear;\r\n var stayPropertyLimitAmount;\r\n var stayPropertyInstallmentPerMonth;\r\n var stayDecorationLimitAmount;\r\n var stayDecorationInstallmentPerMonth;\r\n var stayIncomePerMonth;\r\n var stayDebtBurdenPerMonth;\r\n var stayCanTakeDecoration;\r\n\r\n if (props.appliedCalcTypes.value.forStay === props.calcTypes.Home) {\r\n var defaultLoanYear = +calHomeLoanSetting.DefaultLoanYear;\r\n\r\n var result = calHomeLoan({\r\n B2_propertyPrice: props.definedPropertyPrice.value,\r\n B3_homeLoanType: calHomeLoanSetting.B3HomeLoanType,\r\n B5_propertyLoanAmount: props.definedPropertyPrice.value,\r\n B6_career: calHomeLoanSetting.B6Career,\r\n B7_age: +calHomeLoanSetting.B7Age,\r\n B9_propertyLoanYear: defaultLoanYear,\r\n B10_salary: '',\r\n B11_deptBurdenPerMonth: '',\r\n B12_appraisalPrice: props.appraisalPrice.value,\r\n B20_decorationLoanAmount: null,\r\n B21_decorationLoanYear: defaultLoanYear,\r\n calHomeLoanSetting: calHomeLoanSetting,\r\n });\r\n\r\n console.log('cal home loan result:', result);\r\n\r\n stayCanTakeDecoration = props.definedPropertyPrice.value <= 10000000; //true;\r\n\r\n stayTotalInstallmentPerMonth = forceNumber(result.B29_HLInstallmentPerMonth) + (stayCanTakeDecoration ? forceNumber(result.B34_HDInstallmentPerMonth) : 0);\r\n stayTotalLimitAmount = forceNumber(result.B28_HLLimit) + (stayCanTakeDecoration ? forceNumber(result.B33_HDLimit) : 0);\r\n stayPropertyLimitAmount = forceNumber(result.B28_HLLimit);\r\n stayDecorationLimitAmount = forceNumber(+result.B33_HDLimit);\r\n\r\n stayInstallmentYear = forceNumber(result.B8_maxLoanYear);\r\n stayPropertyInstallmentPerMonth = forceNumber(result.B29_HLInstallmentPerMonth);\r\n stayDecorationInstallmentPerMonth = forceNumber(+result.B34_HDInstallmentPerMonth);\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: toThousandSeparated('' + stayTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayInstallmentYear\", \r\n value: toThousandSeparated('' + stayInstallmentYear.toFixed(0)), \r\n maxValue: result.B8_maxLoanYear,\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyLimitAmount\", \r\n value: toThousandSeparated('' + stayPropertyLimitAmount.toFixed(0)),\r\n maxValue: +stayPropertyLimitAmount.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationLimitAmount\", \r\n value: toThousandSeparated('' + stayDecorationLimitAmount.toFixed(0)), \r\n maxValue: +stayDecorationLimitAmount.toFixed(0),\r\n //visible: stayCanTakeDecoration,\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayDecorationInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayIncomePerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDebtBurdenPerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayCanTakeDecoration\", \r\n value: stayCanTakeDecoration,\r\n }));\r\n } else if (props.appliedCalcTypes.value.forStay === props.calcTypes.Land) {\r\n var defaultLoanYear = +calLandSetting.DefaultLoanYear;\r\n\r\n var result = calLand({\r\n B2_propertyPrice: props.definedPropertyPrice.value,\r\n B3_homeLoanType: calLandSetting.B3HomeLoanType,\r\n B5_propertyLoanAmount: props.definedPropertyPrice.value,\r\n B6_career: calLandSetting.B6Career,\r\n B7_age: +calLandSetting.B7Age,\r\n B9_propertyLoanYear: defaultLoanYear,\r\n B10_salary: '',\r\n B11_deptBurdenPerMonth: '',\r\n B12_appraisalPrice: props.appraisalPrice.value,\r\n calLandSetting: calLandSetting,\r\n });\r\n\r\n console.log('cal land result:', result);\r\n\r\n stayTotalInstallmentPerMonth = forceNumber(result.B19_HLInstallmentPerMonth);\r\n stayTotalLimitAmount = forceNumber(result.B18_HLLimit);\r\n stayPropertyLimitAmount = forceNumber(result.B18_HLLimit);\r\n\r\n stayInstallmentYear = forceNumber(result.B8_maxLoanYear);\r\n stayPropertyInstallmentPerMonth = forceNumber(result.B19_HLInstallmentPerMonth);\r\n stayCanTakeDecoration = false;\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: toThousandSeparated('' + stayTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayInstallmentYear\", \r\n value: toThousandSeparated('' + stayInstallmentYear.toFixed(0)), \r\n maxValue: result.B8_maxLoanYear,\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyLimitAmount\", \r\n value: toThousandSeparated('' + stayPropertyLimitAmount.toFixed(0)),\r\n maxValue: +stayPropertyLimitAmount.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayIncomePerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDebtBurdenPerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayCanTakeDecoration\", \r\n value: stayCanTakeDecoration,\r\n }));\r\n }\r\n\r\n var decoration = props.propertyTypeID.value !== '01';\r\n var smePropertyType = ([\"02\", \"03\", \"04\", \"05\"].indexOf(props.propertyTypeID.value) !== -1) ? props.propertyTypeID.value : 'other';\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"smePropertyType\", \r\n value: smePropertyType,\r\n }));\r\n\r\n var smeDefaultLoanYear = +((smePropertyType === \"other\") ? calSMESetting.DefaultOtherLoanYear : calSMESetting.DefaultBuildingLoanYear);\r\n\r\n var resultSME = calSME({\r\n D10_propertyPrice: props.definedPropertyPrice.value,\r\n D12_propertyLoanAmount: props.definedPropertyPrice.value,\r\n D18_propertyType: smePropertyType,\r\n D20_appraisalPrice: props.appraisalPrice.value,\r\n D28_propertyLoanYear: smeDefaultLoanYear,\r\n D30_profitPerMonth: '',\r\n D32_deptBurdenPerMonth: '',\r\n D37_decorationLoanAmount: decoration ? null : 0,\r\n calSMESetting: calSMESetting,\r\n });\r\n\r\n console.log('cal SME result:', resultSME);\r\n\r\n var businessTotalInstallmentPerMonth = forcePositiveNumber(resultSME.D46_propertyInstallmentPerMonth) + forcePositiveNumber(resultSME.D50_decorationInstallmentPerMonth);\r\n var businessTotalLimitAmount = forcePositiveNumber(resultSME.D44_propertyPrimaryMaxLoanAmount) + forcePositiveNumber(resultSME.D48_decorationPrimaryMaxLoanAmount);\r\n var businessInstallmentYear = forcePositiveNumber(resultSME.D56_loanableYear);\r\n var businessPropertyLimitAmount = forcePositiveNumber(resultSME.D44_propertyPrimaryMaxLoanAmount);\r\n var businessPropertyInstallmentPerMonth = forcePositiveNumber(resultSME.D46_propertyInstallmentPerMonth);\r\n var businessDecorationLimitAmount = forcePositiveNumber(resultSME.D48_decorationPrimaryMaxLoanAmount);\r\n var businessDecorationInstallmentPerMonth = forcePositiveNumber(resultSME.D50_decorationInstallmentPerMonth);\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalLimitAmount\", \r\n value: toThousandSeparated('' + businessTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessInstallmentYear\", \r\n value: toThousandSeparated('' + businessInstallmentYear.toFixed(0)), \r\n maxValue: resultSME.I30_maxLoanYear, //+businessInstallmentYear.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyLimitAmount\", \r\n value: toThousandSeparated('' + businessPropertyLimitAmount.toFixed(0)),\r\n maxValue: +businessPropertyLimitAmount.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationLimitAmount\", \r\n value: toThousandSeparated('' + businessDecorationLimitAmount.toFixed(0)), \r\n maxValue: +businessDecorationLimitAmount.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessDecorationInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessIncomePerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDebtBurdenPerMonth\", \r\n value: '0',\r\n }));\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"decoration\", \r\n value: decoration,\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayValidateFields\", \r\n value: getValidateField('stay', decoration && stayCanTakeDecoration),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessValidateFields\", \r\n value: getValidateField('business', decoration),\r\n }));\r\n // dispatch(formsCalcDataChange({ \r\n // field: \"stayCanTakeDecoration\", \r\n // value: stayCanTakeDecoration,\r\n // }));\r\n }, [props.appliedCalcTypes.value]);\r\n\r\n function forcePositiveNumber(num, defaultValue) {\r\n var result = forceNumber(num, defaultValue);\r\n\r\n if(result < 0){\r\n return 0;\r\n }\r\n\r\n return result;\r\n }\r\n\r\n function forceNumber(num, defaultValue) {\r\n if (defaultValue === undefined) {\r\n defaultValue = 0;\r\n }\r\n\r\n if (typeof num !== 'number') {\r\n return defaultValue;\r\n }\r\n\r\n if (isNaN(num)) {\r\n return defaultValue;\r\n }\r\n\r\n return num;\r\n }\r\n\r\n function formsDataChange(tab, field, e) {\r\n console.log('change ' + field + ' = ' + e.target.value);\r\n\r\n let value = e.target.value;\r\n let numValue = parseFloat(value.replace(/,/g, ''));\r\n //const limit = 1000000000;\r\n //numValue = numValue > limit ? limit : numValue;\r\n\r\n // let maxValue = props[field].maxValue;\r\n\r\n // if (maxValue !== undefined) {\r\n // numValue = numValue > maxValue ? maxValue : numValue;\r\n // }\r\n\r\n if (numValue || numValue === 0) {\r\n //value = numValue.toLocaleString();\r\n\r\n let numStr = '' + numValue;\r\n\r\n if (props[field].maxDigit) {\r\n numStr = numStr.slice(0, props[field].maxDigit);\r\n }\r\n \r\n value = toThousandSeparated('' + numStr);\r\n } else {\r\n value = '';\r\n }\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: field, \r\n value: value,\r\n //errorMessage: VaridateCalcDataField(props, field, value),\r\n }));\r\n\r\n //recalculate(tab, field, value);\r\n }\r\n\r\n function formsBlur(tab, field, e) {\r\n console.log('blur ' + field);\r\n\r\n e.preventDefault();\r\n\r\n dispatch(CalcValidateChange({ \r\n field: field,\r\n errorMessage: VaridateCalcDataField(props, field, e.target.value),\r\n }));\r\n\r\n recalculate(tab, field, e.target.value);\r\n }\r\n\r\n function recalculate(tab, field, newValue) {\r\n var calFormData = {\r\n stayInstallmentYear: props.stayInstallmentYear.value,\r\n stayPropertyLimitAmount: props.stayPropertyLimitAmount.value,\r\n stayDecorationLimitAmount: props.stayDecorationLimitAmount.value,\r\n stayIncomePerMonth: props.stayIncomePerMonth.value,\r\n stayDebtBurdenPerMonth: props.stayDebtBurdenPerMonth.value,\r\n\r\n businessInstallmentYear: props.businessInstallmentYear.value,\r\n businessPropertyLimitAmount: props.businessPropertyLimitAmount.value,\r\n businessDecorationLimitAmount: props.businessDecorationLimitAmount.value,\r\n businessIncomePerMonth: props.businessIncomePerMonth.value,\r\n businessDebtBurdenPerMonth: props.businessDebtBurdenPerMonth.value,\r\n };\r\n\r\n calFormData[field] = newValue;\r\n\r\n var calHomeLoanSetting = props.calculatorHomeLoanSetting.value;\r\n var calLandSetting = props.calculatorLandSetting.value;\r\n var calSMESetting = props.calculatorSMESetting.value;\r\n \r\n if (tab === 'stay') {\r\n var stayInstallmentYear = Math.min(+getAmount(calFormData.stayInstallmentYear), props.stayInstallmentYear.maxValue);\r\n \r\n if (field === 'stayInstallmentYear') {\r\n if (calFormData.stayInstallmentYear !== '' && +getAmount(calFormData.stayInstallmentYear) > props.stayInstallmentYear.maxValue) {\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayInstallmentYear\", \r\n value: toThousandSeparated('' + stayInstallmentYear.toFixed(0)),\r\n note: 'ระยะเวลาผ่อนชำระสูงสุด ' + props.stayInstallmentYear.maxValue + ' ปี',\r\n }));\r\n } else {\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayInstallmentYear\",\r\n note: \"\",\r\n }));\r\n }\r\n }\r\n\r\n if(!validateCalcForm(tab, calFormData)){\r\n console.log('validate calc form failed!');\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n\r\n return;\r\n }\r\n\r\n var stayTotalInstallmentPerMonth;\r\n var stayTotalLimitAmount;\r\n var stayPropertyLimitAmount;\r\n var stayDecorationLimitAmount = 0;\r\n //var canTakeOnDecorationLoan;\r\n var stayCanTakeDecoration;\r\n var stayPropertyInstallmentPerMonth;\r\n var stayDecorationInstallmentPerMonth;\r\n\r\n if (props.appliedCalcTypes.value.forStay === props.calcTypes.Home) {\r\n //cal home loan\r\n var result = calHomeLoan({\r\n B2_propertyPrice: props.definedPropertyPrice.value,\r\n B3_homeLoanType: calHomeLoanSetting.B3HomeLoanType,\r\n B5_propertyLoanAmount: +getAmount(calFormData.stayPropertyLimitAmount),\r\n B6_career: calHomeLoanSetting.B6Career,\r\n B7_age: +calHomeLoanSetting.B7Age,\r\n B9_propertyLoanYear: stayInstallmentYear,\r\n B10_salary: +getAmount(calFormData.stayIncomePerMonth),\r\n B11_deptBurdenPerMonth: +getAmount(calFormData.stayDebtBurdenPerMonth),\r\n B12_appraisalPrice: props.appraisalPrice.value,\r\n B20_decorationLoanAmount: +getAmount(calFormData.stayDecorationLimitAmount),\r\n B21_decorationLoanYear: stayInstallmentYear,\r\n calHomeLoanSetting: calHomeLoanSetting,\r\n });\r\n \r\n console.log('cal home loan result:', result);\r\n\r\n if(checkCalError(result, \"LackOfPayDeptAbility\")) {\r\n console.log('cal home loan: LackOfPayDeptAbility');\r\n\r\n stayTotalInstallmentPerMonth = 0;\r\n stayTotalLimitAmount = 0;\r\n stayPropertyLimitAmount = 0;\r\n stayDecorationLimitAmount = 0;\r\n stayPropertyInstallmentPerMonth = 0;\r\n stayDecorationInstallmentPerMonth = 0;\r\n\r\n showCalErrorPopup('ไม่ผ่านความสามารถการชำระหนี้');\r\n } else {\r\n stayTotalInstallmentPerMonth = forceNumber(result.B16_HLInstallmentPerMonth) + forceNumber(result.B26_HDInstallmentPerMonth);\r\n stayTotalLimitAmount = forceNumber(result.B14_HLPrimaryMaxLimit) + forceNumber(result.B24_HDPrimaryMaxLimit);\r\n stayPropertyLimitAmount = forceNumber(result.B14_HLPrimaryMaxLimit);\r\n stayDecorationLimitAmount = forceNumber(+result.B24_HDPrimaryMaxLimit);\r\n //canTakeOnDecorationLoan = result.B19_canTakeOnDecorationLoan;\r\n stayCanTakeDecoration = result.B19_canTakeOnDecorationLoan;\r\n stayPropertyInstallmentPerMonth = forceNumber(result.B16_HLInstallmentPerMonth);\r\n stayDecorationInstallmentPerMonth = forceNumber(result.B26_HDInstallmentPerMonth);\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayCanTakeDecoration\", \r\n value: stayCanTakeDecoration,\r\n }));\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayValidateFields\", \r\n value: getValidateField('stay', props.decoration.value && stayCanTakeDecoration),\r\n }));\r\n }\r\n \r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: toThousandSeparated('' + stayTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyLimitAmount\", \r\n value: toThousandSeparated('' + stayPropertyLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationLimitAmount\", \r\n value: toThousandSeparated('' + stayDecorationLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayDecorationInstallmentPerMonth.toFixed(0)),\r\n }));\r\n } else if (props.appliedCalcTypes.value.forStay === props.calcTypes.Land) {\r\n //cal land\r\n var result = calLand({\r\n B2_propertyPrice: props.definedPropertyPrice.value,\r\n B3_homeLoanType: calLandSetting.B3HomeLoanType,\r\n B5_propertyLoanAmount: +getAmount(calFormData.stayPropertyLimitAmount),\r\n B6_career: calLandSetting.B6Career,\r\n B7_age: +calLandSetting.B7Age,\r\n B9_propertyLoanYear: stayInstallmentYear,\r\n B10_salary: +getAmount(calFormData.stayIncomePerMonth),\r\n B11_deptBurdenPerMonth: +getAmount(calFormData.stayDebtBurdenPerMonth),\r\n B12_appraisalPrice: props.appraisalPrice.value,\r\n calLandSetting: calLandSetting,\r\n });\r\n \r\n console.log('cal land result:', result);\r\n\r\n if(checkCalError(result, \"LackOfPayDeptAbility\")) {\r\n console.log('cal land: LackOfPayDeptAbility');\r\n\r\n stayTotalInstallmentPerMonth = 0;\r\n stayTotalLimitAmount = 0;\r\n stayPropertyLimitAmount = 0;\r\n stayPropertyInstallmentPerMonth = 0;\r\n\r\n showCalErrorPopup('ไม่ผ่านความสามารถการชำระหนี้');\r\n } else {\r\n stayTotalInstallmentPerMonth = forceNumber(result.B16_installmentPerMonth);\r\n stayTotalLimitAmount = forceNumber(result.B14_primaryMaxLimit);\r\n stayPropertyLimitAmount = forceNumber(result.B14_primaryMaxLimit);\r\n //canTakeOnDecorationLoan = false;\r\n stayPropertyInstallmentPerMonth = forceNumber(result.B16_installmentPerMonth);\r\n }\r\n \r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: toThousandSeparated('' + stayTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyLimitAmount\", \r\n value: toThousandSeparated('' + stayPropertyLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n }\r\n\r\n //props.stayDecorationLimitAmount.visible = canTakeOnDecorationLoan;\r\n } else if (tab === 'business') {\r\n var businessInstallmentYear = Math.min(+getAmount(calFormData.businessInstallmentYear), props.businessInstallmentYear.maxValue);\r\n\r\n if (field === 'businessInstallmentYear') {\r\n if (calFormData.businessInstallmentYear !== '' && +getAmount(calFormData.businessInstallmentYear) > props.businessInstallmentYear.maxValue) {\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessInstallmentYear\", \r\n value: toThousandSeparated('' + businessInstallmentYear.toFixed(0)),\r\n note: 'ระยะเวลาผ่อนชำระสูงสุด ' + props.businessInstallmentYear.maxValue + ' ปี',\r\n }));\r\n } else {\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessInstallmentYear\",\r\n note: \"\",\r\n }));\r\n }\r\n }\r\n\r\n if(!validateCalcForm(tab, calFormData)){\r\n console.log('validate calc form failed!');\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalLimitAmount\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n\r\n return;\r\n }\r\n\r\n var resultSME = calSME({\r\n D10_propertyPrice: props.definedPropertyPrice.value,\r\n D12_propertyLoanAmount: Math.min(+getAmount(calFormData.businessPropertyLimitAmount), props.definedPropertyPrice.value),\r\n D18_propertyType: props.smePropertyType.value,\r\n D20_appraisalPrice: props.appraisalPrice.value,\r\n D28_propertyLoanYear: businessInstallmentYear,\r\n D30_profitPerMonth: +getAmount(calFormData.businessIncomePerMonth),\r\n D32_deptBurdenPerMonth: +getAmount(calFormData.businessDebtBurdenPerMonth),\r\n D37_decorationLoanAmount: +getAmount(calFormData.businessDecorationLimitAmount),\r\n calSMESetting: calSMESetting,\r\n });\r\n \r\n console.log('cal SME result:', resultSME);\r\n \r\n var businessTotalInstallmentPerMonth;\r\n var businessTotalLimitAmount;\r\n var businessPropertyLimitAmount;\r\n var businessDecorationLimitAmount;\r\n var businessPropertyInstallmentPerMonth;\r\n var businessDecorationInstallmentPerMonth;\r\n\r\n if (resultSME.D53_errorMessage !== \"\") {\r\n businessTotalInstallmentPerMonth = 0;\r\n businessTotalLimitAmount = 0;\r\n businessPropertyLimitAmount = 0;\r\n businessDecorationLimitAmount = 0;\r\n businessPropertyInstallmentPerMonth = 0;\r\n businessDecorationInstallmentPerMonth = 0;\r\n\r\n showCalErrorPopup('รายได้ที่แจ้งไม่เพียงพอต่อการชำระหนี้');\r\n } else {\r\n businessTotalInstallmentPerMonth = forcePositiveNumber(resultSME.D46_propertyInstallmentPerMonth) + forcePositiveNumber(resultSME.D50_decorationInstallmentPerMonth);\r\n businessTotalLimitAmount = forcePositiveNumber(resultSME.D44_propertyPrimaryMaxLoanAmount) + forcePositiveNumber(resultSME.D48_decorationPrimaryMaxLoanAmount);\r\n businessPropertyLimitAmount = forcePositiveNumber(resultSME.D44_propertyPrimaryMaxLoanAmount);\r\n businessDecorationLimitAmount = forcePositiveNumber(resultSME.D48_decorationPrimaryMaxLoanAmount);\r\n businessPropertyInstallmentPerMonth = forcePositiveNumber(resultSME.D46_propertyInstallmentPerMonth);\r\n businessDecorationInstallmentPerMonth = forcePositiveNumber(resultSME.D50_decorationInstallmentPerMonth);\r\n }\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalLimitAmount\", \r\n value: toThousandSeparated('' + businessTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyLimitAmount\", \r\n value: toThousandSeparated('' + businessPropertyLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationLimitAmount\", \r\n value: toThousandSeparated('' + businessDecorationLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessDecorationInstallmentPerMonth.toFixed(0)),\r\n }));\r\n } else {\r\n throw new Error('Param \"tab\" has an invalid value.');\r\n }\r\n }\r\n\r\n function showCalErrorPopup(message) {\r\n props.openErrorPopup(message)\r\n }\r\n\r\n function checkCalError(calResult, errorCode) {\r\n return calResult.errors.filter(function(error){\r\n return error.errorCode === errorCode;\r\n }).length > 0;\r\n }\r\n\r\n function validateCalcForm(tab, formData) {\r\n var validateFields = [];\r\n\r\n if (tab === 'stay') {\r\n validateFields = props.stayValidateFields.value;\r\n\r\n // dispatch(formsCalcDataChange({ \r\n // field: \"stayInstallmentYear\",\r\n // note: \"\",\r\n // }));\r\n } else if (tab === 'business') {\r\n validateFields = props.businessValidateFields.value;\r\n\r\n // dispatch(formsCalcDataChange({ \r\n // field: \"businessInstallmentYear\",\r\n // note: \"\",\r\n // }));\r\n }\r\n\r\n const validateResults = validateFields.map(field => {\r\n var errorMessage = VaridateCalcDataField(props, field, formData[field]);\r\n\r\n dispatch(CalcValidateChange({ \r\n field: field,\r\n errorMessage: errorMessage,\r\n }));\r\n\r\n return errorMessage === '';\r\n });\r\n\r\n return validateResults.every(c => c);\r\n }\r\n\r\n function getValidateField(tab, decoration) {\r\n let validateField = [];\r\n\r\n if (tab === 'stay') {\r\n validateField = [\r\n 'stayInstallmentYear',\r\n 'stayPropertyLimitAmount',\r\n 'stayIncomePerMonth',\r\n 'stayDebtBurdenPerMonth',\r\n ];\r\n\r\n if (decoration) {\r\n validateField.push('stayDecorationLimitAmount');\r\n }\r\n } else if (tab === 'business') {\r\n validateField = [\r\n 'businessInstallmentYear',\r\n 'businessPropertyLimitAmount',\r\n 'businessIncomePerMonth',\r\n 'businessDebtBurdenPerMonth',\r\n ];\r\n\r\n if (decoration) {\r\n validateField.push('businessDecorationLimitAmount');\r\n }\r\n }\r\n\r\n return validateField;\r\n }\r\n\r\n function ErrorMessage(props) {\r\n return {props.message};\r\n }\r\n\r\n function Note(props) {\r\n return {props.message};\r\n }\r\n\r\n function handleChangeLimitButtonClick() {\r\n setIsEditMode(true);\r\n }\r\n\r\n return (\r\n
\r\n
\r\n คำนวณวงเงินกู้สินเชื่อทรัพย์มือสองเบื้องต้น
\r\n\r\n
\r\n\r\n วัตถุประสงค์การกู้ :
\r\n - \r\n
- \r\n \r\n \r\n
- \r\n \r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n ยอดผ่อนชำระต่อเดือน
\r\n \r\n
\r\n {props.stayTotalInstallmentPerMonth.value}
\r\n บาท
\r\n \r\n
\r\n \r\n
\r\n ยอดรวมวงเงินกู้
\r\n {props.stayTotalLimitAmount.value} บาท
\r\n \r\n
\r\n ระยะเวลาผ่อนชำระ (สูงสุดไม่เกิน {props.stayInstallmentYear.maxValue} ปี)
\r\n \r\n \r\n ปี\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n วงเงินทรัพย์
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n\r\n ยอดผ่อนต่อเดือน (วงเงินทรัพย์)
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n รายได้ต่อเดือน
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n วงเงินตกแต่ง
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n \r\n ยอดผ่อนต่อเดือน (วงเงินตกแต่ง)
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n ภาระหนี้
\r\n \r\n \r\n บาท\r\n
\r\n \r\n \r\n //
\r\n \r\n
\r\n\r\n \r\n
\r\n ยอดผ่อนชำระต่อเดือน
\r\n \r\n
\r\n {props.businessTotalInstallmentPerMonth.value}
\r\n บาท
\r\n \r\n
\r\n \r\n
\r\n ยอดรวมวงเงินกู้
\r\n {props.businessTotalLimitAmount.value} บาท
\r\n \r\n
\r\n ระยะเวลาผ่อนชำระ (สูงสุดไม่เกิน {props.businessInstallmentYear.maxValue} ปี)
\r\n \r\n \r\n ปี\r\n
\r\n \r\n
\r\n\r\n {\r\n isEditMode && \r\n
\r\n\r\n \r\n
\r\n\r\n วงเงินทรัพย์
\r\n \r\n \r\n บาท{isEditMode && *}\r\n
\r\n \r\n
\r\n\r\n ยอดผ่อนต่อเดือน (วงเงินทรัพย์)
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n กำไรสุทธิต่อเดือน
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n วงเงินตกแต่ง
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n \r\n ยอดผ่อนต่อเดือน (วงเงินตกแต่ง)
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n ภาระหนี้
\r\n \r\n \r\n บาท\r\n
\r\n กรุณาระบุ “กำไรสุทธิต่อเดือน” และ “ภาระหนี้”
(ถ้ามี) ให้เรียบร้อยก่อนระบุ “วงเงินทรัพย์”
*กรุณาระบุ \"กำไรสุทธิต่อเดือน\" และ \"ภาระหนี้\" (ถ้ามี) ให้เรียบร้อยก่อน ระบุ \"วงเงินทรัพย์\"
\r\n }\r\n ผลการคำนวณดังกล่าวเป็นเพียงการประมาณการเบื้องต้นเท่านั้น การพิจารณาสินเชื่อเป็นไปตามข้อกำหนดและเงื่อนไขของธนาคาร
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n ผลการคำนวณวงเงินกู้เบื้องต้น
\r\n\r\n
\r\n \r\n
\r\n วงเงินที่ต้องการ (บาท)
\r\n \r\n \r\n\r\n
\r\n ระยะเวลากู้ที่ต้องการ (ปี)
\r\n \r\n \r\n\r\n
\r\n \r\n
\r\n วงเงินกู้สูงสุด (บาท)
\r\n2,268,000
\r\n\r\n
\r\n ยอดผ่อนต่อเดือน (บาท)
\r\n12,000
\r\nผลการคำนวณดังกล่าวเป็นเพียงการประมาณการเบื้องต้นเท่านั้น การพิจารณาสินเชื่อเป็นไปตามข้อกำหนดและเงื่อนไขของธนาคาร
\r\n\r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useDispatch } from 'react-redux'\r\nimport { formsCalcPropsChange, formsCalcDataChange, CalcValidateChange } from '../stores/propertySlice'\r\nimport { toThousandSeparated, VaridateCalcDataField, getAmount } from './ValidateHelper'\r\nimport * as formulajs from '@formulajs/formulajs'\r\n\r\nexport function PartnerSMECalculatorTab(props) {\r\n const dispatch = useDispatch();\r\n\r\n const [isEditMode, setIsEditMode] = useState(false);\r\n \r\n useEffect(() => {\r\n console.log('#### useEffect PartnerSMECalculatorTab');\r\n\r\n if(props.calculatorHomeLoanSetting.value === 0\r\n || props.calculatorLandSetting.value === 0\r\n || props.calculatorSMESetting.value === 0\r\n ){\r\n return;\r\n }\r\n\r\n var calHomeLoanSetting = props.calculatorHomeLoanSetting.value;\r\n var calLandSetting = props.calculatorLandSetting.value;\r\n var calSMESetting = props.calculatorSMESetting.value;\r\n\r\n var stayTotalInstallmentPerMonth;\r\n var stayTotalLimitAmount;\r\n var stayInstallmentYear;\r\n var stayPropertyLimitAmount;\r\n var stayPropertyInstallmentPerMonth;\r\n var stayDecorationLimitAmount;\r\n var stayDecorationInstallmentPerMonth;\r\n var stayIncomePerMonth;\r\n var stayDebtBurdenPerMonth;\r\n var stayCanTakeDecoration;\r\n\r\n if (props.appliedCalcTypes.value.forStay === props.calcTypes.Home) {\r\n var defaultLoanYear = +calHomeLoanSetting.DefaultLoanYear;\r\n\r\n var result = calHomeLoan({\r\n B2_propertyPrice: props.definedPropertyPrice.value,\r\n B3_homeLoanType: calHomeLoanSetting.B3HomeLoanType,\r\n B5_propertyLoanAmount: props.definedPropertyPrice.value,\r\n B6_career: calHomeLoanSetting.B6Career,\r\n B7_age: +calHomeLoanSetting.B7Age,\r\n B9_propertyLoanYear: defaultLoanYear,\r\n B10_salary: '',\r\n B11_deptBurdenPerMonth: '',\r\n B12_appraisalPrice: props.appraisalPrice.value,\r\n B20_decorationLoanAmount: null,\r\n B21_decorationLoanYear: defaultLoanYear,\r\n calHomeLoanSetting: calHomeLoanSetting,\r\n });\r\n\r\n console.log('cal home loan result:', result);\r\n\r\n stayCanTakeDecoration = props.definedPropertyPrice.value <= 10000000; //true;\r\n\r\n stayTotalInstallmentPerMonth = forceNumber(result.B29_HLInstallmentPerMonth) + (stayCanTakeDecoration ? forceNumber(result.B34_HDInstallmentPerMonth) : 0);\r\n stayTotalLimitAmount = forceNumber(result.B28_HLLimit) + (stayCanTakeDecoration ? forceNumber(result.B33_HDLimit) : 0);\r\n stayPropertyLimitAmount = forceNumber(result.B28_HLLimit);\r\n stayDecorationLimitAmount = forceNumber(+result.B33_HDLimit);\r\n\r\n stayInstallmentYear = forceNumber(result.B8_maxLoanYear);\r\n stayPropertyInstallmentPerMonth = forceNumber(result.B29_HLInstallmentPerMonth);\r\n stayDecorationInstallmentPerMonth = forceNumber(+result.B34_HDInstallmentPerMonth);\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: toThousandSeparated('' + stayTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayInstallmentYear\", \r\n value: toThousandSeparated('' + stayInstallmentYear.toFixed(0)), \r\n maxValue: result.B8_maxLoanYear,\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyLimitAmount\", \r\n value: toThousandSeparated('' + stayPropertyLimitAmount.toFixed(0)),\r\n maxValue: +stayPropertyLimitAmount.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationLimitAmount\", \r\n value: toThousandSeparated('' + stayDecorationLimitAmount.toFixed(0)), \r\n maxValue: +stayDecorationLimitAmount.toFixed(0),\r\n //visible: stayCanTakeDecoration,\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayDecorationInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayIncomePerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDebtBurdenPerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayCanTakeDecoration\", \r\n value: stayCanTakeDecoration,\r\n }));\r\n } else if (props.appliedCalcTypes.value.forStay === props.calcTypes.Land) {\r\n var defaultLoanYear = +calLandSetting.DefaultLoanYear;\r\n\r\n var result = calLand({\r\n B2_propertyPrice: props.definedPropertyPrice.value,\r\n B3_homeLoanType: calLandSetting.B3HomeLoanType,\r\n B5_propertyLoanAmount: props.definedPropertyPrice.value,\r\n B6_career: calLandSetting.B6Career,\r\n B7_age: +calLandSetting.B7Age,\r\n B9_propertyLoanYear: defaultLoanYear,\r\n B10_salary: '',\r\n B11_deptBurdenPerMonth: '',\r\n B12_appraisalPrice: props.appraisalPrice.value,\r\n calLandSetting: calLandSetting,\r\n });\r\n\r\n console.log('cal land result:', result);\r\n\r\n stayTotalInstallmentPerMonth = forceNumber(result.B19_HLInstallmentPerMonth);\r\n stayTotalLimitAmount = forceNumber(result.B18_HLLimit);\r\n stayPropertyLimitAmount = forceNumber(result.B18_HLLimit);\r\n\r\n stayInstallmentYear = forceNumber(result.B8_maxLoanYear);\r\n stayPropertyInstallmentPerMonth = forceNumber(result.B19_HLInstallmentPerMonth);\r\n stayCanTakeDecoration = false;\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: toThousandSeparated('' + stayTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayInstallmentYear\", \r\n value: toThousandSeparated('' + stayInstallmentYear.toFixed(0)), \r\n maxValue: result.B8_maxLoanYear,\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyLimitAmount\", \r\n value: toThousandSeparated('' + stayPropertyLimitAmount.toFixed(0)),\r\n maxValue: +stayPropertyLimitAmount.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayIncomePerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDebtBurdenPerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayCanTakeDecoration\", \r\n value: stayCanTakeDecoration,\r\n }));\r\n }\r\n\r\n var decoration = props.propertyTypeID.value !== '01';\r\n var smePropertyType = ([\"02\", \"03\", \"04\", \"05\"].indexOf(props.propertyTypeID.value) !== -1) ? props.propertyTypeID.value : 'other';\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"smePropertyType\", \r\n value: smePropertyType,\r\n }));\r\n\r\n var smeDefaultLoanYear = +calSMESetting.Partner_DefaultLoanYear;\r\n\r\n var resultSME = calPartnerSME({\r\n D10_propertyPrice: props.definedPropertyPrice.value,\r\n D12_propertyLoanAmount: props.definedPropertyPrice.value,\r\n //D18_propertyType: smePropertyType,\r\n D20_appraisalPrice: props.appraisalPrice.value,\r\n D28_propertyLoanYear: smeDefaultLoanYear,\r\n D30_profitPerMonth: '',\r\n D32_deptBurdenPerMonth: '',\r\n //D37_decorationLoanAmount: decoration ? null : 0,\r\n calSMESetting: calSMESetting,\r\n });\r\n\r\n console.log('cal SME result:', resultSME);\r\n\r\n var businessTotalInstallmentPerMonth = forcePositiveNumber(resultSME.D46_propertyInstallmentPerMonth) + forcePositiveNumber(resultSME.D50_decorationInstallmentPerMonth);\r\n var businessTotalLimitAmount = forcePositiveNumber(resultSME.D44_propertyPrimaryMaxLoanAmount) + forcePositiveNumber(resultSME.D48_decorationPrimaryMaxLoanAmount);\r\n var businessInstallmentYear = forcePositiveNumber(resultSME.D56_loanableYear);\r\n var businessPropertyLimitAmount = forcePositiveNumber(resultSME.D44_propertyPrimaryMaxLoanAmount);\r\n var businessPropertyInstallmentPerMonth = forcePositiveNumber(resultSME.D46_propertyInstallmentPerMonth);\r\n var businessDecorationLimitAmount = forcePositiveNumber(resultSME.D48_decorationPrimaryMaxLoanAmount);\r\n var businessDecorationInstallmentPerMonth = forcePositiveNumber(resultSME.D50_decorationInstallmentPerMonth);\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalLimitAmount\", \r\n value: toThousandSeparated('' + businessTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessInstallmentYear\", \r\n value: toThousandSeparated('' + businessInstallmentYear.toFixed(0)), \r\n maxValue: resultSME.I30_maxLoanYear, //+businessInstallmentYear.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyLimitAmount\", \r\n value: toThousandSeparated('' + businessPropertyLimitAmount.toFixed(0)),\r\n maxValue: +businessPropertyLimitAmount.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationLimitAmount\", \r\n value: toThousandSeparated('' + businessDecorationLimitAmount.toFixed(0)), \r\n maxValue: +businessDecorationLimitAmount.toFixed(0),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessDecorationInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessIncomePerMonth\", \r\n value: '0',\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDebtBurdenPerMonth\", \r\n value: '0',\r\n }));\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"decoration\", \r\n value: decoration,\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayValidateFields\", \r\n value: getValidateField('stay', decoration && stayCanTakeDecoration),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessValidateFields\", \r\n value: getValidateField('business', decoration),\r\n }));\r\n // dispatch(formsCalcDataChange({ \r\n // field: \"stayCanTakeDecoration\", \r\n // value: stayCanTakeDecoration,\r\n // }));\r\n }, [props.appliedCalcTypes.value]);\r\n\r\n\r\n\r\n function forcePositiveNumber(num, defaultValue) {\r\n var result = forceNumber(num, defaultValue);\r\n\r\n if(result < 0){\r\n return 0;\r\n }\r\n\r\n return result;\r\n }\r\n\r\n function forceNumber(num, defaultValue) {\r\n if (defaultValue === undefined) {\r\n defaultValue = 0;\r\n }\r\n\r\n if (typeof num !== 'number') {\r\n return defaultValue;\r\n }\r\n\r\n if (isNaN(num)) {\r\n return defaultValue;\r\n }\r\n\r\n return num;\r\n }\r\n\r\n function formsDataChange(tab, field, e) {\r\n console.log('change ' + field + ' = ' + e.target.value);\r\n\r\n let value = e.target.value;\r\n let numValue = parseFloat(value.replace(/,/g, ''));\r\n //const limit = 1000000000;\r\n //numValue = numValue > limit ? limit : numValue;\r\n\r\n // let maxValue = props[field].maxValue;\r\n\r\n // if (maxValue !== undefined) {\r\n // numValue = numValue > maxValue ? maxValue : numValue;\r\n // }\r\n\r\n if (numValue || numValue === 0) {\r\n //value = numValue.toLocaleString();\r\n\r\n let numStr = '' + numValue;\r\n\r\n if (props[field].maxDigit) {\r\n numStr = numStr.slice(0, props[field].maxDigit);\r\n }\r\n \r\n value = toThousandSeparated('' + numStr);\r\n } else {\r\n value = '';\r\n }\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: field, \r\n value: value,\r\n //errorMessage: VaridateCalcDataField(props, field, value),\r\n }));\r\n\r\n //recalculate(tab, field, value);\r\n }\r\n\r\n function formsBlur(tab, field, e) {\r\n console.log('blur ' + field);\r\n\r\n dispatch(CalcValidateChange({ \r\n field: field,\r\n errorMessage: VaridateCalcDataField(props, field, e.target.value),\r\n }));\r\n\r\n recalculate(tab, field, e.target.value);\r\n }\r\n\r\n function recalculate(tab, field, newValue) {\r\n var calFormData = {\r\n stayInstallmentYear: props.stayInstallmentYear.value,\r\n stayPropertyLimitAmount: props.stayPropertyLimitAmount.value,\r\n stayDecorationLimitAmount: props.stayDecorationLimitAmount.value,\r\n stayIncomePerMonth: props.stayIncomePerMonth.value,\r\n stayDebtBurdenPerMonth: props.stayDebtBurdenPerMonth.value,\r\n\r\n businessInstallmentYear: props.businessInstallmentYear.value,\r\n businessPropertyLimitAmount: props.businessPropertyLimitAmount.value,\r\n businessDecorationLimitAmount: props.businessDecorationLimitAmount.value,\r\n businessIncomePerMonth: props.businessIncomePerMonth.value,\r\n businessDebtBurdenPerMonth: props.businessDebtBurdenPerMonth.value,\r\n };\r\n\r\n calFormData[field] = newValue;\r\n\r\n var calHomeLoanSetting = props.calculatorHomeLoanSetting.value;\r\n var calLandSetting = props.calculatorLandSetting.value;\r\n var calSMESetting = props.calculatorSMESetting.value;\r\n \r\n if (tab === 'stay') {\r\n var stayInstallmentYear = Math.min(+getAmount(calFormData.stayInstallmentYear), props.stayInstallmentYear.maxValue);\r\n \r\n if (field === 'stayInstallmentYear') {\r\n if (calFormData.stayInstallmentYear !== '' && +getAmount(calFormData.stayInstallmentYear) > props.stayInstallmentYear.maxValue) {\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayInstallmentYear\", \r\n value: toThousandSeparated('' + stayInstallmentYear.toFixed(0)),\r\n note: 'ระยะเวลาผ่อนชำระสูงสุด ' + props.stayInstallmentYear.maxValue + ' ปี',\r\n }));\r\n } else {\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayInstallmentYear\",\r\n note: \"\",\r\n }));\r\n }\r\n }\r\n\r\n if(!validateCalcForm(tab, calFormData)){\r\n console.log('validate calc form failed!');\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n\r\n return;\r\n }\r\n\r\n var stayTotalInstallmentPerMonth;\r\n var stayTotalLimitAmount;\r\n var stayPropertyLimitAmount;\r\n var stayDecorationLimitAmount = 0;\r\n //var canTakeOnDecorationLoan;\r\n var stayCanTakeDecoration;\r\n var stayPropertyInstallmentPerMonth;\r\n var stayDecorationInstallmentPerMonth;\r\n\r\n if (props.appliedCalcTypes.value.forStay === props.calcTypes.Home) {\r\n //cal home loan\r\n var result = calHomeLoan({\r\n B2_propertyPrice: props.definedPropertyPrice.value,\r\n B3_homeLoanType: calHomeLoanSetting.B3HomeLoanType,\r\n B5_propertyLoanAmount: +getAmount(calFormData.stayPropertyLimitAmount),\r\n B6_career: calHomeLoanSetting.B6Career,\r\n B7_age: +calHomeLoanSetting.B7Age,\r\n B9_propertyLoanYear: stayInstallmentYear,\r\n B10_salary: +getAmount(calFormData.stayIncomePerMonth),\r\n B11_deptBurdenPerMonth: +getAmount(calFormData.stayDebtBurdenPerMonth),\r\n B12_appraisalPrice: props.appraisalPrice.value,\r\n B20_decorationLoanAmount: +getAmount(calFormData.stayDecorationLimitAmount),\r\n B21_decorationLoanYear: stayInstallmentYear,\r\n calHomeLoanSetting: calHomeLoanSetting,\r\n });\r\n \r\n console.log('cal home loan result:', result);\r\n\r\n if(checkCalError(result, \"LackOfPayDeptAbility\")) {\r\n console.log('cal home loan: LackOfPayDeptAbility');\r\n\r\n stayTotalInstallmentPerMonth = 0;\r\n stayTotalLimitAmount = 0;\r\n stayPropertyLimitAmount = 0;\r\n stayDecorationLimitAmount = 0;\r\n stayPropertyInstallmentPerMonth = 0;\r\n stayDecorationInstallmentPerMonth = 0;\r\n\r\n showCalErrorPopup('ไม่ผ่านความสามารถการชำระหนี้');\r\n } else {\r\n stayTotalInstallmentPerMonth = forceNumber(result.B16_HLInstallmentPerMonth) + forceNumber(result.B26_HDInstallmentPerMonth);\r\n stayTotalLimitAmount = forceNumber(result.B14_HLPrimaryMaxLimit) + forceNumber(result.B24_HDPrimaryMaxLimit);\r\n stayPropertyLimitAmount = forceNumber(result.B14_HLPrimaryMaxLimit);\r\n stayDecorationLimitAmount = forceNumber(+result.B24_HDPrimaryMaxLimit);\r\n //canTakeOnDecorationLoan = result.B19_canTakeOnDecorationLoan;\r\n stayCanTakeDecoration = result.B19_canTakeOnDecorationLoan;\r\n stayPropertyInstallmentPerMonth = forceNumber(result.B16_HLInstallmentPerMonth);\r\n stayDecorationInstallmentPerMonth = forceNumber(result.B26_HDInstallmentPerMonth);\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayCanTakeDecoration\", \r\n value: stayCanTakeDecoration,\r\n }));\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayValidateFields\", \r\n value: getValidateField('stay', props.decoration.value && stayCanTakeDecoration),\r\n }));\r\n }\r\n \r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: toThousandSeparated('' + stayTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyLimitAmount\", \r\n value: toThousandSeparated('' + stayPropertyLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationLimitAmount\", \r\n value: toThousandSeparated('' + stayDecorationLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayDecorationInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayDecorationInstallmentPerMonth.toFixed(0)),\r\n }));\r\n } else if (props.appliedCalcTypes.value.forStay === props.calcTypes.Land) {\r\n //cal land\r\n var result = calLand({\r\n B2_propertyPrice: props.definedPropertyPrice.value,\r\n B3_homeLoanType: calLandSetting.B3HomeLoanType,\r\n B5_propertyLoanAmount: +getAmount(calFormData.stayPropertyLimitAmount),\r\n B6_career: calLandSetting.B6Career,\r\n B7_age: +calLandSetting.B7Age,\r\n B9_propertyLoanYear: stayInstallmentYear,\r\n B10_salary: +getAmount(calFormData.stayIncomePerMonth),\r\n B11_deptBurdenPerMonth: +getAmount(calFormData.stayDebtBurdenPerMonth),\r\n B12_appraisalPrice: props.appraisalPrice.value,\r\n calLandSetting: calLandSetting,\r\n });\r\n \r\n console.log('cal land result:', result);\r\n\r\n if(checkCalError(result, \"LackOfPayDeptAbility\")) {\r\n console.log('cal land: LackOfPayDeptAbility');\r\n\r\n stayTotalInstallmentPerMonth = 0;\r\n stayTotalLimitAmount = 0;\r\n stayPropertyLimitAmount = 0;\r\n stayPropertyInstallmentPerMonth = 0;\r\n\r\n showCalErrorPopup('ไม่ผ่านความสามารถการชำระหนี้');\r\n } else {\r\n stayTotalInstallmentPerMonth = forceNumber(result.B16_installmentPerMonth);\r\n stayTotalLimitAmount = forceNumber(result.B14_primaryMaxLimit);\r\n stayPropertyLimitAmount = forceNumber(result.B14_primaryMaxLimit);\r\n //canTakeOnDecorationLoan = false;\r\n stayPropertyInstallmentPerMonth = forceNumber(result.B16_installmentPerMonth);\r\n }\r\n \r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayTotalLimitAmount\", \r\n value: toThousandSeparated('' + stayTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyLimitAmount\", \r\n value: toThousandSeparated('' + stayPropertyLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"stayPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + stayPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n }\r\n\r\n //props.stayDecorationLimitAmount.visible = canTakeOnDecorationLoan;\r\n } else if (tab === 'business') {\r\n var businessInstallmentYear = Math.min(+getAmount(calFormData.businessInstallmentYear), props.businessInstallmentYear.maxValue);\r\n\r\n if (field === 'businessInstallmentYear') {\r\n if (calFormData.businessInstallmentYear !== '' && +getAmount(calFormData.businessInstallmentYear) > props.businessInstallmentYear.maxValue) {\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessInstallmentYear\", \r\n value: toThousandSeparated('' + businessInstallmentYear.toFixed(0)),\r\n note: 'ระยะเวลาผ่อนชำระสูงสุด ' + props.businessInstallmentYear.maxValue + ' ปี',\r\n }));\r\n } else {\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessInstallmentYear\",\r\n note: \"\",\r\n }));\r\n }\r\n }\r\n\r\n if(!validateCalcForm(tab, calFormData)){\r\n console.log('validate calc form failed!');\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalLimitAmount\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationInstallmentPerMonth\", \r\n value: \"0\",\r\n }));\r\n\r\n return;\r\n }\r\n\r\n var resultSME = calPartnerSME({\r\n D10_propertyPrice: props.definedPropertyPrice.value,\r\n D12_propertyLoanAmount: Math.min(+getAmount(calFormData.businessPropertyLimitAmount), props.definedPropertyPrice.value),\r\n //D18_propertyType: props.smePropertyType.value,\r\n D20_appraisalPrice: props.appraisalPrice.value,\r\n D28_propertyLoanYear: businessInstallmentYear,\r\n D30_profitPerMonth: +getAmount(calFormData.businessIncomePerMonth),\r\n D32_deptBurdenPerMonth: +getAmount(calFormData.businessDebtBurdenPerMonth),\r\n //D37_decorationLoanAmount: +getAmount(calFormData.businessDecorationLimitAmount),\r\n calSMESetting: calSMESetting,\r\n });\r\n \r\n console.log('cal SME result:', resultSME);\r\n \r\n var businessTotalInstallmentPerMonth;\r\n var businessTotalLimitAmount;\r\n var businessPropertyLimitAmount;\r\n var businessDecorationLimitAmount;\r\n var businessPropertyInstallmentPerMonth;\r\n var businessDecorationInstallmentPerMonth;\r\n\r\n if (resultSME.D53_errorMessage !== \"\") {\r\n businessTotalInstallmentPerMonth = 0;\r\n businessTotalLimitAmount = 0;\r\n businessPropertyLimitAmount = 0;\r\n businessDecorationLimitAmount = 0;\r\n businessPropertyInstallmentPerMonth = 0;\r\n businessDecorationInstallmentPerMonth = 0;\r\n\r\n showCalErrorPopup('รายได้ที่แจ้งไม่เพียงพอต่อการชำระหนี้');\r\n } else {\r\n businessTotalInstallmentPerMonth = forcePositiveNumber(resultSME.D46_propertyInstallmentPerMonth) + forcePositiveNumber(resultSME.D50_decorationInstallmentPerMonth);\r\n businessTotalLimitAmount = forcePositiveNumber(resultSME.D44_propertyPrimaryMaxLoanAmount) + forcePositiveNumber(resultSME.D48_decorationPrimaryMaxLoanAmount);\r\n businessPropertyLimitAmount = forcePositiveNumber(resultSME.D44_propertyPrimaryMaxLoanAmount);\r\n businessDecorationLimitAmount = forcePositiveNumber(resultSME.D48_decorationPrimaryMaxLoanAmount);\r\n businessPropertyInstallmentPerMonth = forcePositiveNumber(resultSME.D46_propertyInstallmentPerMonth);\r\n businessDecorationInstallmentPerMonth = forcePositiveNumber(resultSME.D50_decorationInstallmentPerMonth);\r\n }\r\n\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessTotalInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessTotalLimitAmount\", \r\n value: toThousandSeparated('' + businessTotalLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyLimitAmount\", \r\n value: toThousandSeparated('' + businessPropertyLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationLimitAmount\", \r\n value: toThousandSeparated('' + businessDecorationLimitAmount.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessPropertyInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessPropertyInstallmentPerMonth.toFixed(0)),\r\n }));\r\n dispatch(formsCalcDataChange({ \r\n field: \"businessDecorationInstallmentPerMonth\", \r\n value: toThousandSeparated('' + businessDecorationInstallmentPerMonth.toFixed(0)),\r\n }));\r\n } else {\r\n throw new Error('Param \"tab\" has an invalid value.');\r\n }\r\n }\r\n\r\n function showCalErrorPopup(message) {\r\n props.openErrorPopup(message)\r\n }\r\n\r\n function checkCalError(calResult, errorCode) {\r\n return calResult.errors.filter(function(error){\r\n return error.errorCode === errorCode;\r\n }).length > 0;\r\n }\r\n\r\n function validateCalcForm(tab, formData) {\r\n var validateFields = [];\r\n\r\n if (tab === 'stay') {\r\n validateFields = props.stayValidateFields.value;\r\n\r\n // dispatch(formsCalcDataChange({ \r\n // field: \"stayInstallmentYear\",\r\n // note: \"\",\r\n // }));\r\n } else if (tab === 'business') {\r\n validateFields = props.businessValidateFields.value;\r\n\r\n // dispatch(formsCalcDataChange({ \r\n // field: \"businessInstallmentYear\",\r\n // note: \"\",\r\n // }));\r\n }\r\n\r\n const validateResults = validateFields.map(field => {\r\n var errorMessage = VaridateCalcDataField(props, field, formData[field]);\r\n\r\n dispatch(CalcValidateChange({ \r\n field: field,\r\n errorMessage: errorMessage,\r\n }));\r\n\r\n return errorMessage === '';\r\n });\r\n\r\n return validateResults.every(c => c);\r\n }\r\n\r\n function getValidateField(tab, decoration) {\r\n let validateField = [];\r\n\r\n if (tab === 'stay') {\r\n validateField = [\r\n 'stayInstallmentYear',\r\n 'stayPropertyLimitAmount',\r\n 'stayIncomePerMonth',\r\n 'stayDebtBurdenPerMonth',\r\n ];\r\n\r\n if (decoration) {\r\n validateField.push('stayDecorationLimitAmount');\r\n }\r\n } else if (tab === 'business') {\r\n validateField = [\r\n 'businessInstallmentYear',\r\n 'businessPropertyLimitAmount',\r\n 'businessIncomePerMonth',\r\n 'businessDebtBurdenPerMonth',\r\n ];\r\n\r\n if (decoration) {\r\n validateField.push('businessDecorationLimitAmount');\r\n }\r\n }\r\n\r\n return validateField;\r\n }\r\n\r\n function ErrorMessage(props) {\r\n return {props.message};\r\n }\r\n\r\n function Note(props) {\r\n return {props.message};\r\n }\r\n\r\n function tabClick(tab, e) {\r\n props.onTabClick(tab);\r\n }\r\n\r\n function handleChangeLimitButtonClick() {\r\n setIsEditMode(true);\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n คำนวณวงเงินกู้
\r\n\r\n
\r\n คำนวณวงเงินกู้
สินเชื่อบ้าน เบื้องต้น
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n วัตถุประสงค์การกู้ :
\r\n - \r\n
- \r\n \r\n \r\n
- \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n คำนวณ\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n
\r\n\r\n ผลการคำนวณ
วงเงินกู้เบื้องต้น
\r\n \r\n
\r\n \r\n
\r\n หมายเหตุ :
\r\n- \r\n
- ผลการคำนวณเป็นการประเมินความสามารถในการกู้เบื้องต้นเท่านั้น ทั้งนี้ ผลการอนุมัติสินเชื่อเป็นไปตามหลักเกณฑ์และเงื่อนไขของธนาคาร \r\n
\r\n
\r\n );\r\n}\r\n\r\nfunction calHomeLoan(options) {\r\n var careers = ['employee', 'business_owner'];\r\n var homeLoanTypes = [\r\n 'home1',\r\n 'home2_with_home1_lessthan_2years',\r\n 'home2_with_home1_2years_or_more',\r\n 'home3_or_else'\r\n ];\r\n\r\n if (careers.indexOf(options.B6_career) === -1) {\r\n throw new Error('Param B6_career is invalid');\r\n }\r\n\r\n if (homeLoanTypes.indexOf(options.B3_homeLoanType) === -1) {\r\n throw new Error('Param B3_homeLoanType is invalid');\r\n }\r\n\r\n try {\r\n var errors = [];\r\n\r\n var ROUNDUP = formulajs.ROUNDUP;\r\n var ROUNDDOWN = formulajs.ROUNDDOWN;\r\n var PV = formulajs.PV;\r\n var PMT = formulajs.PMT;\r\n\r\n var B2_propertyPrice = options.B2_propertyPrice;\r\n var B3_homeLoanType = options.B3_homeLoanType;\r\n var B5_propertyLoanAmount = options.B5_propertyLoanAmount;\r\n var B6_career = options.B6_career;\r\n var B7_age = options.B7_age;\r\n var B9_propertyLoanYear = options.B9_propertyLoanYear;\r\n var B10_salary = options.B10_salary;\r\n var B11_deptBurdenPerMonth = options.B11_deptBurdenPerMonth;\r\n var B12_appraisalPrice = options.B12_appraisalPrice;\r\n var B20_decorationLoanAmount = options.B20_decorationLoanAmount;\r\n var B21_decorationLoanYear = options.B21_decorationLoanYear;\r\n var calHomeLoanSetting = options.calHomeLoanSetting;\r\n var F5_limitKBank = calHomeLoanSetting.LimitKBank / 100;\r\n var F15_MRR = calHomeLoanSetting.KBankMRR / 100;\r\n var F18_HLBaseRate = +calHomeLoanSetting.HLBaseRate;\r\n var F24_HDBaseRate = +calHomeLoanSetting.HDBaseRate;\r\n\r\n var F4_limitBot;\r\n\r\n if (B3_homeLoanType === 'home1') {\r\n if (B2_propertyPrice < 10000000) {\r\n F4_limitBot = calHomeLoanSetting.LimitBotHouse1LessThan10MB;\r\n } else {\r\n F4_limitBot = calHomeLoanSetting.LimitBotHouse1GreaterThan10MB;\r\n }\r\n } else if (B3_homeLoanType === 'home2_with_home1_2years_or_more') {\r\n F4_limitBot = calHomeLoanSetting.LimitBotHouse2InstallGreaterThan2Years;\r\n } else if (B3_homeLoanType === 'home2_with_home1_lessthan_2years') {\r\n F4_limitBot = calHomeLoanSetting.LimitBotHouse2InstallLessThan2Years;\r\n } else if (B3_homeLoanType === 'home3_or_else') {\r\n F4_limitBot = calHomeLoanSetting.LimitBotHouse3;\r\n } else {\r\n F4_limitBot = \"\";\r\n\r\n errors.push({\r\n errorCode: 'CalculateF4LimitBotFailed',\r\n errorMessage: null,\r\n });\r\n }\r\n\r\n F4_limitBot = F4_limitBot / 100;\r\n\r\n var F6 = Math.min(F4_limitBot, F5_limitKBank);\r\n var B4_maxLimitFromPrice;\r\n\r\n if (ROUNDUP((B2_propertyPrice * F6), -3) > B2_propertyPrice) {\r\n B4_maxLimitFromPrice = B2_propertyPrice;\r\n } else {\r\n B4_maxLimitFromPrice = ROUNDUP((B2_propertyPrice * F6), -3);\r\n }\r\n\r\n var B8_maxLoanYear = Math.min((70 - B7_age), 30);\r\n var F8_salary;\r\n\r\n if (B10_salary < 30000) {\r\n F8_salary = calHomeLoanSetting.F8SalaryLessThan30000;\r\n } else if (B10_salary < 70001) {\r\n F8_salary = calHomeLoanSetting.F8Salary30000To70000;\r\n } else if (B10_salary >= 70001) {\r\n F8_salary = calHomeLoanSetting.F8SalaryGreaterThan70000\r\n } else {\r\n F8_salary = \"\";\r\n\r\n errors.push({\r\n errorCode: 'CalculateF8SalaryFailed',\r\n errorMessage: null,\r\n });\r\n }\r\n\r\n F8_salary = F8_salary / 100;\r\n\r\n var F9_entre;\r\n\r\n if (B10_salary < 30000) {\r\n F9_entre = calHomeLoanSetting.F9SalaryLessThan30000;\r\n } else if (B10_salary < 70001) {\r\n F9_entre = calHomeLoanSetting.F9Salary30000To70000;\r\n } else if (B10_salary >= 70001) {\r\n F9_entre = calHomeLoanSetting.F9SalaryGreaterThan70000\r\n } else {\r\n F9_entre = \"\";\r\n\r\n errors.push({\r\n errorCode: 'CalculateF9EntreFailed',\r\n errorMessage: null,\r\n });\r\n }\r\n\r\n F9_entre = F9_entre / 100;\r\n\r\n var F10;\r\n\r\n if (B6_career === 'employee') {\r\n F10 = F8_salary;\r\n } else if (B6_career === 'business_owner') {\r\n F10 = F9_entre;\r\n } else {\r\n F10 = \"\";\r\n\r\n errors.push({\r\n errorCode: 'CalculateF10Failed',\r\n errorMessage: null,\r\n });\r\n }\r\n\r\n var F11_Inst1 = ROUNDUP(B10_salary * F10, -2);\r\n var F12_Inst2 = F11_Inst1 - B11_deptBurdenPerMonth;\r\n var F19_HLRate = (F15_MRR - (F18_HLBaseRate / 100)) + 0.01;\r\n var B15_HLLoanableYear;\r\n\r\n if (F12_Inst2 < 1000) {\r\n B15_HLLoanableYear = \"ไม่ผ่านความสามารถการชำระหนี้\";\r\n\r\n errors.push({\r\n errorCode: 'LackOfPayDeptAbility',\r\n errorMessage: 'ไม่ผ่านความสามารถการชำระหนี้',\r\n });\r\n } else {\r\n B15_HLLoanableYear = Math.min(B8_maxLoanYear, B9_propertyLoanYear);\r\n }\r\n\r\n var F13_Limt = ROUNDDOWN(PV(F19_HLRate / 12, B15_HLLoanableYear * 12, -F12_Inst2), -3);\r\n var B14_HLPrimaryMaxLimit;\r\n var maxPropertyLimit;\r\n\r\n if (F12_Inst2 < 1000) {\r\n B14_HLPrimaryMaxLimit = \"ไม่ผ่านความสามารถการชำระหนี้\";\r\n maxPropertyLimit = null;\r\n\r\n errors.push({\r\n errorCode: 'LackOfPayDeptAbility',\r\n errorMessage: 'ไม่ผ่านความสามารถการชำระหนี้',\r\n });\r\n } else {\r\n B14_HLPrimaryMaxLimit = Math.min(B4_maxLimitFromPrice, B5_propertyLoanAmount, F13_Limt, B12_appraisalPrice);\r\n maxPropertyLimit = Math.min(B4_maxLimitFromPrice, F13_Limt, B12_appraisalPrice);\r\n }\r\n\r\n var B16_HLInstallmentPerMonth;\r\n\r\n if (F12_Inst2 < 1000) {\r\n B16_HLInstallmentPerMonth = \"ไม่ผ่านความสามารถการชำระหนี้\";\r\n\r\n errors.push({\r\n errorCode: 'LackOfPayDeptAbility',\r\n errorMessage: 'ไม่ผ่านความสามารถการชำระหนี้',\r\n });\r\n } else {\r\n B16_HLInstallmentPerMonth = ROUNDUP(PMT(F19_HLRate / 12, B15_HLLoanableYear * 12, -B14_HLPrimaryMaxLimit), -2);\r\n }\r\n\r\n var F14_LTVMinusHL = Math.min(B12_appraisalPrice - B14_HLPrimaryMaxLimit, B4_maxLimitFromPrice * 0.1);\r\n var B19_HDMaxDecorationLimit = null;\r\n var B19_canTakeOnDecorationLoan = true;\r\n\r\n if (B2_propertyPrice >= 10000000) {\r\n B19_HDMaxDecorationLimit = \"ไม่สามารถกู้วงเงินตกแต่ง\";\r\n B19_canTakeOnDecorationLoan = false;\r\n\r\n errors.push({\r\n errorCode: 'UnableToTakeOnDecorationLoan',\r\n errorMessage: 'ไม่สามารถกู้วงเงินตกแต่ง',\r\n });\r\n } else if (F14_LTVMinusHL >= 1000) {\r\n B19_HDMaxDecorationLimit = F14_LTVMinusHL;\r\n } else {\r\n B19_HDMaxDecorationLimit = \"ไม่สามารถกู้วงเงินตกแต่ง\";\r\n B19_canTakeOnDecorationLoan = false;\r\n\r\n errors.push({\r\n errorCode: 'UnableToTakeOnDecorationLoan',\r\n errorMessage: 'ไม่สามารถกู้วงเงินตกแต่ง',\r\n });\r\n }\r\n\r\n var F28_Inst2MinusB16 = F12_Inst2 - B16_HLInstallmentPerMonth;\r\n var F25_HDRate = (F15_MRR - (F24_HDBaseRate / 100)) + 0.01;\r\n var B25_HDLoanableYear;\r\n\r\n if (!B19_canTakeOnDecorationLoan) {\r\n B25_HDLoanableYear = \"ไม่สามารถกู้วงเงินตกแต่ง\";\r\n\r\n errors.push({\r\n errorCode: 'UnableToTakeOnDecorationLoan',\r\n errorMessage: 'ไม่สามารถกู้วงเงินตกแต่ง',\r\n });\r\n } else if (F28_Inst2MinusB16 < 1000) {\r\n B25_HDLoanableYear = \"ไม่ผ่านความสามารถการชำระหนี้\";\r\n\r\n errors.push({\r\n errorCode: 'LackOfPayDeptAbility',\r\n errorMessage: 'ไม่ผ่านความสามารถการชำระหนี้',\r\n });\r\n } else if (B21_decorationLoanYear <= B15_HLLoanableYear) {\r\n B25_HDLoanableYear = B21_decorationLoanYear;\r\n } else {\r\n B25_HDLoanableYear = B15_HLLoanableYear;\r\n }\r\n\r\n var F29_Limit2 = ROUNDDOWN(PV(F25_HDRate / 12, B25_HDLoanableYear * 12, -F28_Inst2MinusB16), -3);\r\n var B24_HDPrimaryMaxLimit;\r\n var maxDecorationLimit;\r\n\r\n if (!B19_canTakeOnDecorationLoan) {\r\n B24_HDPrimaryMaxLimit = \"ไม่สามารถกู้วงเงินตกแต่ง\";\r\n maxDecorationLimit = null;\r\n\r\n errors.push({\r\n errorCode: 'UnableToTakeOnDecorationLoan',\r\n errorMessage: 'ไม่สามารถกู้วงเงินตกแต่ง',\r\n });\r\n } else if (F28_Inst2MinusB16 < 1000) {\r\n B24_HDPrimaryMaxLimit = \"ไม่ผ่านความสามารถการชำระหนี้\";\r\n maxDecorationLimit = null;\r\n\r\n errors.push({\r\n errorCode: 'LackOfPayDeptAbility',\r\n errorMessage: 'ไม่ผ่านความสามารถการชำระหนี้',\r\n });\r\n } else {\r\n if(B20_decorationLoanAmount !== null){\r\n B24_HDPrimaryMaxLimit = Math.min(B19_HDMaxDecorationLimit, B20_decorationLoanAmount, F29_Limit2);\r\n } else {\r\n B24_HDPrimaryMaxLimit = Math.min(B19_HDMaxDecorationLimit, F29_Limit2);\r\n }\r\n\r\n maxDecorationLimit = Math.min(B19_HDMaxDecorationLimit, F29_Limit2);\r\n }\r\n\r\n var B26_HDInstallmentPerMonth;\r\n\r\n if (!B19_canTakeOnDecorationLoan) {\r\n B26_HDInstallmentPerMonth = \"ไม่สามารถกู้วงเงินตกแต่ง\";\r\n\r\n errors.push({\r\n errorCode: 'UnableToTakeOnDecorationLoan',\r\n errorMessage: 'ไม่สามารถกู้วงเงินตกแต่ง',\r\n });\r\n } else if (F28_Inst2MinusB16 < 1000) {\r\n B26_HDInstallmentPerMonth = \"ไม่ผ่านความสามารถการชำระหนี้\";\r\n\r\n errors.push({\r\n errorCode: 'LackOfPayDeptAbility',\r\n errorMessage: 'ไม่ผ่านความสามารถการชำระหนี้',\r\n });\r\n } else {\r\n B26_HDInstallmentPerMonth = ROUNDUP(PMT(F25_HDRate / 12, B25_HDLoanableYear * 12, -B24_HDPrimaryMaxLimit), -2);\r\n }\r\n\r\n var B28_HLLimit = Math.min(B4_maxLimitFromPrice, B12_appraisalPrice);\r\n var B29_HLInstallmentPerMonth = ROUNDUP(PMT(F19_HLRate / 12, B8_maxLoanYear * 12, -B28_HLLimit), -2);\r\n var B33_HDLimit = B2_propertyPrice * 0.1;\r\n var B34_HDInstallmentPerMonth = ROUNDUP(PMT(F25_HDRate / 12, B8_maxLoanYear * 12, -B33_HDLimit), -2);\r\n\r\n return {\r\n errors: errors,\r\n\r\n B4_maxLimitFromPrice: B4_maxLimitFromPrice,\r\n B8_maxLoanYear: B8_maxLoanYear,\r\n B14_HLPrimaryMaxLimit: B14_HLPrimaryMaxLimit,\r\n B15_HLLoanableYear: B15_HLLoanableYear,\r\n B16_HLInstallmentPerMonth: B16_HLInstallmentPerMonth,\r\n B19_HDMaxDecorationLimit: B19_HDMaxDecorationLimit,\r\n B19_canTakeOnDecorationLoan: B19_canTakeOnDecorationLoan,\r\n B24_HDPrimaryMaxLimit: B24_HDPrimaryMaxLimit,\r\n B25_HDLoanableYear: B25_HDLoanableYear,\r\n B26_HDInstallmentPerMonth: B26_HDInstallmentPerMonth,\r\n maxPropertyLimit: maxPropertyLimit,\r\n maxDecorationLimit: maxDecorationLimit,\r\n B28_HLLimit: B28_HLLimit,\r\n B29_HLInstallmentPerMonth: B29_HLInstallmentPerMonth,\r\n B33_HDLimit: B33_HDLimit,\r\n B34_HDInstallmentPerMonth: B34_HDInstallmentPerMonth,\r\n \r\n inputs: options,\r\n };\r\n } catch (e) {\r\n console.error(e);\r\n\r\n return {\r\n errors: [\r\n {\r\n errorCode: null,\r\n errorMessage: '' + e,\r\n },\r\n ],\r\n };\r\n }\r\n}\r\n\r\nfunction calLand(options) {\r\n var careers = ['employee', 'business_owner'];\r\n var homeLoanTypes = [\r\n 'home1',\r\n 'home2_with_home1_lessthan_2years',\r\n 'home2_with_home1_2years_or_more',\r\n 'home3_or_else'\r\n ];\r\n\r\n if (careers.indexOf(options.B6_career) === -1) {\r\n throw new Error('Param B6_career is invalid');\r\n }\r\n\r\n if (homeLoanTypes.indexOf(options.B3_homeLoanType) === -1) {\r\n throw new Error('Param B3_homeLoanType is invalid');\r\n }\r\n\r\n try {\r\n var errors = [];\r\n\r\n var ROUNDUP = formulajs.ROUNDUP;\r\n var ROUNDDOWN = formulajs.ROUNDDOWN;\r\n var PV = formulajs.PV;\r\n var PMT = formulajs.PMT;\r\n\r\n var B2_propertyPrice = options.B2_propertyPrice;\r\n var B3_homeLoanType = options.B3_homeLoanType;\r\n var B5_propertyLoanAmount = options.B5_propertyLoanAmount;\r\n var B6_career = options.B6_career;\r\n var B7_age = options.B7_age;\r\n var B9_propertyLoanYear = options.B9_propertyLoanYear;\r\n var B10_salary = options.B10_salary;\r\n var B11_deptBurdenPerMonth = options.B11_deptBurdenPerMonth;\r\n var B12_appraisalPrice = options.B12_appraisalPrice;\r\n var calLandSetting = options.calLandSetting;\r\n var F5_limitKBank = calLandSetting.LimitKBank / 100;\r\n var F15_MRR = calLandSetting.KBankMRR / 100;\r\n var F18_baseRate = +calLandSetting.F18BaseRate;\r\n\r\n var F4_limitBot;\r\n\r\n if (B3_homeLoanType === 'home1') {\r\n if (B2_propertyPrice < 10000000) {\r\n F4_limitBot = calLandSetting.LimitBotHouse1LessThan10MB;\r\n } else {\r\n F4_limitBot = calLandSetting.LimitBotHouse1GreaterThan10MB;\r\n }\r\n } else if (B3_homeLoanType === 'home2_with_home1_2years_or_more') {\r\n F4_limitBot = calLandSetting.LimitBotHouse2InstallGreaterThan2Years;\r\n } else if (B3_homeLoanType === 'home2_with_home1_lessthan_2years') {\r\n F4_limitBot = calLandSetting.LimitBotHouse2InstallLessThan2Years;\r\n } else if (B3_homeLoanType === 'home3_or_else') {\r\n F4_limitBot = calLandSetting.LimitBotHouse3;\r\n } else {\r\n F4_limitBot = \"\";\r\n\r\n errors.push({\r\n errorCode: 'CalculateF4LimitBotFailed',\r\n errorMessage: null,\r\n });\r\n }\r\n\r\n F4_limitBot = F4_limitBot / 100;\r\n\r\n var F6 = Math.min(F4_limitBot, F5_limitKBank);\r\n var B4_maxLimitFromPrice;\r\n\r\n if (ROUNDUP((B2_propertyPrice * F6), -3) > B2_propertyPrice) {\r\n B4_maxLimitFromPrice = B2_propertyPrice;\r\n } else {\r\n B4_maxLimitFromPrice = ROUNDUP((B2_propertyPrice * F6), -3);\r\n }\r\n\r\n var B8_maxLoanYear = Math.min((70 - B7_age), 10);\r\n var F8_salary;\r\n\r\n if (B10_salary < 30000) {\r\n F8_salary = calLandSetting.F8SalaryLessThan30000;\r\n } else if (B10_salary < 70001) {\r\n F8_salary = calLandSetting.F8Salary30000To70000;\r\n } else if (B10_salary >= 70001) {\r\n F8_salary = calLandSetting.F8SalaryGreaterThan70000\r\n } else {\r\n F8_salary = \"\";\r\n\r\n errors.push({\r\n errorCode: 'CalculateF8SalaryFailed',\r\n errorMessage: null,\r\n });\r\n }\r\n\r\n F8_salary = F8_salary / 100;\r\n\r\n var F9_entre;\r\n\r\n if (B10_salary < 30000) {\r\n F9_entre = calLandSetting.F9SalaryLessThan30000;\r\n } else if (B10_salary < 70001) {\r\n F9_entre = calLandSetting.F9Salary30000To70000;\r\n } else if (B10_salary >= 70001) {\r\n F9_entre = calLandSetting.F9SalaryGreaterThan70000\r\n } else {\r\n F9_entre = \"\";\r\n\r\n errors.push({\r\n errorCode: 'CalculateF9EntreFailed',\r\n errorMessage: null,\r\n });\r\n }\r\n\r\n F9_entre = F9_entre / 100;\r\n\r\n var F10;\r\n\r\n if (B6_career === 'employee') {\r\n F10 = F8_salary;\r\n } else if (B6_career === 'business_owner') {\r\n F10 = F9_entre;\r\n } else {\r\n F10 = \"\";\r\n\r\n errors.push({\r\n errorCode: 'CalculateF10Failed',\r\n errorMessage: null,\r\n });\r\n }\r\n\r\n var F11_Inst1 = ROUNDUP(B10_salary * F10, -2);\r\n var F12_Inst2 = F11_Inst1 - B11_deptBurdenPerMonth;\r\n var F19_rate = (F15_MRR + (F18_baseRate / 100)) + 0.01;\r\n var B15_loanableYear;\r\n\r\n if (F12_Inst2 < 1000) {\r\n B15_loanableYear = \"ไม่ผ่านความสามารถการชำระหนี้\";\r\n\r\n errors.push({\r\n errorCode: 'LackOfPayDeptAbility',\r\n errorMessage: 'ไม่ผ่านความสามารถการชำระหนี้',\r\n });\r\n } else {\r\n B15_loanableYear = Math.min(B8_maxLoanYear, B9_propertyLoanYear);\r\n }\r\n\r\n var F13_Limt = ROUNDDOWN(PV(F19_rate / 12, B15_loanableYear * 12, -F12_Inst2), -3);\r\n var B14_primaryMaxLimit;\r\n var maxPropertyLimit;\r\n\r\n if (F12_Inst2 < 1000) {\r\n B14_primaryMaxLimit = \"ไม่ผ่านความสามารถการชำระหนี้\";\r\n maxPropertyLimit = null;\r\n\r\n errors.push({\r\n errorCode: 'LackOfPayDeptAbility',\r\n errorMessage: 'ไม่ผ่านความสามารถการชำระหนี้',\r\n });\r\n } else {\r\n B14_primaryMaxLimit = Math.min(B4_maxLimitFromPrice, B5_propertyLoanAmount, F13_Limt, B12_appraisalPrice);\r\n maxPropertyLimit = Math.min(B4_maxLimitFromPrice, F13_Limt, B12_appraisalPrice);\r\n }\r\n\r\n var B16_installmentPerMonth;\r\n\r\n if (F12_Inst2 < 1000) {\r\n B16_installmentPerMonth = \"ไม่ผ่านความสามารถการชำระหนี้\";\r\n\r\n errors.push({\r\n errorCode: 'LackOfPayDeptAbility',\r\n errorMessage: 'ไม่ผ่านความสามารถการชำระหนี้',\r\n });\r\n } else {\r\n B16_installmentPerMonth = ROUNDUP(PMT(F19_rate / 12, B15_loanableYear * 12, -B14_primaryMaxLimit), -2);\r\n }\r\n\r\n var B18_HLLimit = Math.min(B4_maxLimitFromPrice, B12_appraisalPrice);\r\n var B19_HLInstallmentPerMonth = ROUNDUP(PMT(F19_rate / 12, B8_maxLoanYear * 12, -B18_HLLimit), -2);\r\n\r\n return {\r\n errors: errors,\r\n\r\n B4_maxLimitFromPrice: B4_maxLimitFromPrice,\r\n B8_maxLoanYear: B8_maxLoanYear,\r\n B14_primaryMaxLimit: B14_primaryMaxLimit,\r\n B15_loanableYear: B15_loanableYear,\r\n B16_installmentPerMonth: B16_installmentPerMonth,\r\n maxPropertyLimit: maxPropertyLimit,\r\n B18_HLLimit: B18_HLLimit,\r\n B19_HLInstallmentPerMonth: B19_HLInstallmentPerMonth,\r\n \r\n inputs: options,\r\n };\r\n } catch (e) {\r\n console.error(e);\r\n\r\n return {\r\n errors: [\r\n {\r\n errorCode: null,\r\n errorMessage: '' + e,\r\n },\r\n ],\r\n };\r\n }\r\n}\r\n\r\nfunction calPartnerSME(options) {\r\n try {\r\n var ROUND = formulajs.ROUND;\r\n var ROUNDUP = formulajs.ROUNDUP;\r\n\r\n var D10_propertyPrice = options.D10_propertyPrice;\r\n var D12_propertyLoanAmount = options.D12_propertyLoanAmount;\r\n var D20_appraisalPrice = options.D20_appraisalPrice;\r\n var D28_propertyLoanYear = options.D28_propertyLoanYear;\r\n var D30_profitPerMonth = options.D30_profitPerMonth;\r\n var D32_deptBurdenPerMonth = options.D32_deptBurdenPerMonth;\r\n var calSMESetting = options.calSMESetting;\r\n var I25_MRR = calSMESetting.Partner_C1_MRR / 100;\r\n var I26_LNRateForInstallmentSecured = calSMESetting.Partner_C2_LNRateForInstallmentSecured / 100;\r\n var I27_MinimumDSCR = +calSMESetting.Partner_C3_MinimumDSCR;\r\n var I28_NetProfitDeptRatioConfig = +calSMESetting.Partner_C4_NetProfitDeptRatioConfig;\r\n var I30_maxLoanYear = +calSMESetting.Partner_C6_MaxLoanYear;\r\n var I32_LTV = calSMESetting.Partner_C8_LTV / 100;\r\n var S15 = 0;\r\n\r\n var O14_finalTerm = Math.min(I30_maxLoanYear, D28_propertyLoanYear);\r\n var I17_profitPerMonth;\r\n\r\n if (D32_deptBurdenPerMonth === \"\" && D30_profitPerMonth === \"\") {\r\n I17_profitPerMonth = D12_propertyLoanAmount * ((I25_MRR + I26_LNRateForInstallmentSecured) / 12) / (1 - (Math.pow(1 + ((I25_MRR + I26_LNRateForInstallmentSecured) / 12), -(12 * O14_finalTerm)))) * I27_MinimumDSCR;\r\n } else {\r\n I17_profitPerMonth = D30_profitPerMonth;\r\n }\r\n\r\n var I18_deptBurdenPerMonth = +D32_deptBurdenPerMonth;\r\n var O17_debtRatio;\r\n\r\n try {\r\n if (I18_deptBurdenPerMonth === 0) {\r\n throw new Error('divide by zero');\r\n }\r\n\r\n if ((I17_profitPerMonth / I18_deptBurdenPerMonth - 1) <= I28_NetProfitDeptRatioConfig) {\r\n O17_debtRatio = \"No\";\r\n } else {\r\n O17_debtRatio = \"Yes\";\r\n }\r\n } catch (e) {\r\n O17_debtRatio = 0;\r\n }\r\n\r\n var I12_loanAmount = D12_propertyLoanAmount;\r\n var I11_finalPrice;\r\n\r\n if (D20_appraisalPrice < D10_propertyPrice) {\r\n I11_finalPrice = D20_appraisalPrice;\r\n } else {\r\n I11_finalPrice = D10_propertyPrice;\r\n }\r\n\r\n var O11_interestForIncomingDebt;\r\n\r\n if (I11_finalPrice > 0) {\r\n O11_interestForIncomingDebt = I25_MRR + I26_LNRateForInstallmentSecured;\r\n } else {\r\n O11_interestForIncomingDebt = \"\";\r\n }\r\n\r\n var S17_incomingDebt = (I12_loanAmount * (O11_interestForIncomingDebt / 12)) / (1 - (Math.pow(1 + (O11_interestForIncomingDebt / 12), -(O14_finalTerm * 12))));\r\n var V11_DSCR;\r\n\r\n try {\r\n if (O17_debtRatio === \"No\") {\r\n V11_DSCR = \"X\";\r\n } else {\r\n V11_DSCR = I17_profitPerMonth / (I18_deptBurdenPerMonth + S17_incomingDebt);\r\n }\r\n } catch(e) {\r\n V11_DSCR = 0;\r\n }\r\n\r\n var V13_maxRepayPerMonthCapability = I17_profitPerMonth / I27_MinimumDSCR;\r\n var V14_repayPerMonthCapability = V13_maxRepayPerMonthCapability - I18_deptBurdenPerMonth - S15;\r\n var V17_installmentLimit = V14_repayPerMonthCapability * ((1 / (O11_interestForIncomingDebt / 12)) - (1 / (O11_interestForIncomingDebt / 12 * Math.pow(1 + O11_interestForIncomingDebt / 12, O14_finalTerm * 12))));\r\n var Z13_limitOnPrice = I11_finalPrice * I32_LTV;\r\n var Z14_finalOffer;\r\n\r\n try {\r\n Z14_finalOffer = ROUND(Math.min(V17_installmentLimit, Z13_limitOnPrice, I12_loanAmount), -1);\r\n } catch (e) {\r\n Z14_finalOffer = \"\";\r\n }\r\n\r\n var AD11_limitDSCRNotPass;\r\n\r\n if (V11_DSCR < 1.2 && Z14_finalOffer > 0 && V11_DSCR !== \"X\") {\r\n AD11_limitDSCRNotPass = Z14_finalOffer;\r\n } else {\r\n AD11_limitDSCRNotPass = \"\";\r\n }\r\n\r\n var Z20_limitOnLorPorGor = I11_finalPrice * I32_LTV;\r\n var Z21_finalOfferLorPorGor;\r\n\r\n try {\r\n Z21_finalOfferLorPorGor = ROUND(Math.min(Z20_limitOnLorPorGor, I12_loanAmount, V17_installmentLimit), -1);\r\n } catch (e) {\r\n Z21_finalOfferLorPorGor = \"\";\r\n }\r\n\r\n var AD12_limitDSCRPass;\r\n\r\n if (V11_DSCR >= 1.2 && Z21_finalOfferLorPorGor > 0 && V11_DSCR !== \"X\") {\r\n AD12_limitDSCRPass = Z21_finalOfferLorPorGor;\r\n } else {\r\n AD12_limitDSCRPass = \"\";\r\n }\r\n\r\n var AE18_primaryMaxLoanAmount;\r\n\r\n if (Math.max(AD11_limitDSCRNotPass, AD12_limitDSCRPass) === 0) {\r\n AE18_primaryMaxLoanAmount = \"\";\r\n } else {\r\n AE18_primaryMaxLoanAmount = Math.max(AD11_limitDSCRNotPass, AD12_limitDSCRPass);\r\n }\r\n\r\n var D44_propertyPrimaryMaxLoanAmount = AE18_primaryMaxLoanAmount;\r\n\r\n var Z15_installmentPlusIntOffer = ( Z14_finalOffer * ((I25_MRR + I26_LNRateForInstallmentSecured) / 12)) / (1 - (Math.pow(1 + ((I25_MRR + I26_LNRateForInstallmentSecured) / 12), -(12 * O14_finalTerm))));\r\n var AE11_installmentDSCRNotPass;\r\n\r\n if (Z15_installmentPlusIntOffer <= 0 || AD11_limitDSCRNotPass === \"\") {\r\n AE11_installmentDSCRNotPass = \"\";\r\n } else {\r\n AE11_installmentDSCRNotPass = ROUND(Z15_installmentPlusIntOffer, -1);\r\n }\r\n\r\n var Z22_installmentPlusIntOffer = (Z21_finalOfferLorPorGor * ((I25_MRR + I26_LNRateForInstallmentSecured) / 12)) / (1 - (Math.pow(1 + ((I25_MRR + I26_LNRateForInstallmentSecured) / 12), -(12 * O14_finalTerm)))); \r\n var AE12_installmentDSCRPass;\r\n\r\n if (Z22_installmentPlusIntOffer <= 0 || AD12_limitDSCRPass === \"\") {\r\n AE12_installmentDSCRPass = \"\";\r\n } else {\r\n AE12_installmentDSCRPass = ROUNDUP(Z22_installmentPlusIntOffer, -2);\r\n }\r\n\r\n var AE22_installmentPerMonth;\r\n\r\n if (AE18_primaryMaxLoanAmount > 0) {\r\n //AE22_installmentPerMonth = VLOOKUP(AE18_primaryMaxLoanAmount, AD11_limitDSCRNotPass:AE12_installmentDSCRPass, 2, 0);\r\n if (AE18_primaryMaxLoanAmount === AD11_limitDSCRNotPass) {\r\n AE22_installmentPerMonth = AE11_installmentDSCRNotPass;\r\n } else if (AE18_primaryMaxLoanAmount === AD12_limitDSCRPass) {\r\n AE22_installmentPerMonth = AE12_installmentDSCRPass;\r\n } else {\r\n AE22_installmentPerMonth = \"\";\r\n }\r\n } else {\r\n AE22_installmentPerMonth = \"\";\r\n }\r\n\r\n var D46_propertyInstallmentPerMonth = AE22_installmentPerMonth;\r\n var AE20_loanableYear;\r\n\r\n if (V11_DSCR === \"X\" || O14_finalTerm === 0 || O14_finalTerm <= 0) {\r\n AE20_loanableYear = \"\";\r\n } else {\r\n AE20_loanableYear = O14_finalTerm;\r\n }\r\n\r\n var D56_loanableYear = AE20_loanableYear;\r\n var AD47;\r\n\r\n if (V11_DSCR === \"X\") {\r\n AD47 = \"รายได้ไม่เพียงพอต่อการชำระหนี้\";\r\n } else {\r\n AD47 = \"\";\r\n }\r\n\r\n var D53_errorMessage = AD47;\r\n var AD48;\r\n\r\n if (V11_DSCR === \"X\") {\r\n AD48 = \"ท่านสามารถก่อหนี้ได้สูงสุด\";\r\n } else {\r\n AD48 = \"\";\r\n }\r\n\r\n var C54_debtRecommendMessage = AD48;\r\n var AD49;\r\n\r\n if (V11_DSCR === \"X\") {\r\n AD49 = I17_profitPerMonth * 0.8;\r\n } else {\r\n AD49 = \"\";\r\n }\r\n\r\n var D54_debtRecommendAmount = AD49;\r\n\r\n return {\r\n errors: [],\r\n\r\n D44_propertyPrimaryMaxLoanAmount: D44_propertyPrimaryMaxLoanAmount,\r\n D46_propertyInstallmentPerMonth: D46_propertyInstallmentPerMonth,\r\n D56_loanableYear: D56_loanableYear,\r\n D53_errorMessage: D53_errorMessage,\r\n C54_debtRecommendMessage: C54_debtRecommendMessage,\r\n D54_debtRecommendAmount: D54_debtRecommendAmount,\r\n I30_maxLoanYear: I30_maxLoanYear,\r\n\r\n inputs: options,\r\n };\r\n } catch (e) {\r\n console.error(e);\r\n\r\n return {\r\n errors: [\r\n {\r\n errorCode: null,\r\n errorMessage: '' + e,\r\n },\r\n ],\r\n };\r\n }\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { PartnerHomeCalculatorTab } from \"./PartnerHomeCalculatorTab\";\r\nimport { PartnerSMECalculatorTab } from \"./PartnerSMECalculatorTab\";\r\nimport './partnerCalc.css';\r\n\r\nexport function PartnerCalculator(props) {\r\n const [calTab, setCalTab] = useState('stay');\r\n\r\n function smeTabClick(tab){\r\n console.log(\"smeTabClick: \" + tab);\r\n\r\n if(tab === 'stay'){\r\n setCalTab('stay');\r\n }\r\n }\r\n\r\n function homeTabClick(tab){\r\n console.log(\"homeTabClick: \" + tab);\r\n\r\n if(tab === 'business'){\r\n setCalTab('business');\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n //
\r\n คำนวณวงเงินกู้สินเชื่อทรัพย์มือสองเบื้องต้น
\r\n\r\n
\r\n\r\n วัตถุประสงค์การกู้ :
\r\n - \r\n
- \r\n \r\n \r\n
- \r\n \r\n \r\n
\r\n
\r\n\r\n {\r\n isEditMode && \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n ยอดผ่อนชำระต่อเดือน
\r\n \r\n
\r\n {props.stayTotalInstallmentPerMonth.value}
\r\n บาท
\r\n \r\n
\r\n \r\n
\r\n ยอดรวมวงเงินกู้
\r\n {props.stayTotalLimitAmount.value} บาท
\r\n \r\n
\r\n ระยะเวลาผ่อนชำระ (สูงสุดไม่เกิน {props.stayInstallmentYear.maxValue} ปี)
\r\n \r\n \r\n ปี\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n วงเงินทรัพย์
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n\r\n ยอดผ่อนต่อเดือน (วงเงินทรัพย์)
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n รายได้ต่อเดือน
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n วงเงินตกแต่ง
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n \r\n ยอดผ่อนต่อเดือน (วงเงินตกแต่ง)
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n ภาระหนี้
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n ยอดผ่อนชำระต่อเดือน
\r\n \r\n
\r\n {props.businessTotalInstallmentPerMonth.value}
\r\n บาท
\r\n \r\n
\r\n \r\n
\r\n ยอดรวมวงเงินกู้
\r\n {props.businessTotalLimitAmount.value} บาท
\r\n \r\n
\r\n ระยะเวลาผ่อนชำระ (สูงสุดไม่เกิน {props.businessInstallmentYear.maxValue} ปี)
\r\n \r\n \r\n ปี\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n วงเงินทรัพย์
\r\n \r\n \r\n บาท{isEditMode && *}\r\n
\r\n \r\n
\r\n\r\n ยอดผ่อนต่อเดือน (วงเงินทรัพย์)
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n กำไรสุทธิต่อเดือน
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n วงเงินตกแต่ง
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n \r\n ยอดผ่อนต่อเดือน (วงเงินตกแต่ง)
\r\n \r\n \r\n บาท\r\n
\r\n \r\n
\r\n ภาระหนี้
\r\n \r\n \r\n บาท\r\n
\r\n กรุณาระบุ “กำไรสุทธิต่อเดือน” และ “ภาระหนี้”
(ถ้ามี) ให้เรียบร้อยก่อนระบุ “วงเงินทรัพย์”
*กรุณาระบุ \"กำไรสุทธิต่อเดือน\" และ \"ภาระหนี้\" (ถ้ามี) ให้เรียบร้อยก่อน ระบุ \"วงเงินทรัพย์\"
\r\n }\r\n \r\n ผลการคำนวณดังกล่าวเป็นเพียงการประมาณการเบื้องต้นเท่านั้น การพิจารณาสินเชื่อเป็นไปตามข้อกำหนดและเงื่อนไขของธนาคาร
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n ผลการคำนวณวงเงินกู้เบื้องต้น
\r\n\r\n
\r\n \r\n
\r\n วงเงินที่ต้องการ (บาท)
\r\n \r\n \r\n\r\n
\r\n ระยะเวลากู้ที่ต้องการ (ปี)
\r\n \r\n \r\n\r\n
\r\n \r\n
\r\n วงเงินกู้สูงสุด (บาท)
\r\n2,268,000
\r\n\r\n
\r\n ยอดผ่อนต่อเดือน (บาท)
\r\n12,000
\r\nผลการคำนวณดังกล่าวเป็นเพียงการประมาณการเบื้องต้นเท่านั้น การพิจารณาสินเชื่อเป็นไปตามข้อกำหนดและเงื่อนไขของธนาคาร
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n currentTarget.onerror = null; // prevents looping\r\n currentTarget.src = defaultThumbnailURL;\r\n currentTarget.setAttribute(\"test\", \"test\");\r\n onLoad();\r\n }}\r\n alt={`${props.propertyName} ${index + 1}`}\r\n loading=\"lazy\"\r\n data-kbct=\"open_popup\"\r\n data-kblb=\"gallery\"\r\n data-kbgp=\"gallery\"\r\n data-kbsc=\"photo\"\r\n data-kbid={propertyDetail.PropertyID}\r\n />\r\n \r\n
\r\n \r\n );\r\n });\r\n } else {\r\n list = list.map((property, index) => {\r\n return (\r\n */}\r\n {\r\n currentTarget.onerror = null; // prevents looping\r\n currentTarget.src = defaultThumbnailURL;\r\n currentTarget.setAttribute(\"test\", \"test\");\r\n onLoad();\r\n }}\r\n alt={`${props.propertyName} ${index + 1}`}\r\n loading=\"lazy\"\r\n data-kbct=\"open_popup\"\r\n data-kblb=\"gallery\"\r\n data-kbgp=\"gallery\"\r\n data-kbsc=\"photo\"\r\n data-kbid={propertyDetail.PropertyID}\r\n />\r\n \r\n {/*
*/}\r\n \r\n );\r\n });\r\n }\r\n return list;\r\n };\r\n\r\n useEffect(() => {\r\n if (props.list && props.list.length > 0) {\r\n var imageTypes;\r\n\r\n if (isMobile()) {\r\n imageTypes = [\"IMAGE-MOBILE\", \"MAP-MOBILE\"];\r\n } else {\r\n imageTypes = [\"IMAGE-PC\", \"MAP-PC\"];\r\n }\r\n\r\n setslideImages(\r\n props.list\r\n .filter(function (media) {\r\n return imageTypes.indexOf(media.MediaType) !== -1;\r\n })\r\n .sort(function (a, b) {\r\n if (a.MediaType < b.MediaType || a.MediaPath < b.MediaPath) {\r\n return -1;\r\n } else if (a.MediaType > b.MediaType || a.MediaPath > b.MediaPath) {\r\n return 1;\r\n } else {\r\n return 0;\r\n }\r\n })\r\n );\r\n }\r\n }, [props.list]);\r\n console.log(\"GallerySlide Render length:\", slideImages.length);\r\n\r\n var {\r\n propertyDetailURL,\r\n thumbnailURL,\r\n location,\r\n propertyName,\r\n tag,\r\n PromotionPrice,\r\n Price,\r\n areaHtml,\r\n bedRoomHtml,\r\n propertyTypeHtml,\r\n PropertyIDFormat,\r\n IsPartner,\r\n } = prepareDataForProopertyBox(propertyDetail);\r\n\r\n if (slideImages.length > 0) {\r\n return (\r\n <>\r\n \r\n
\r\n {ReaderChild(slideImages, \"\")}
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n 1\r\n /\r\n {slideImages.length}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n } else {\r\n return <>;\r\n }\r\n}, areSlideImagesEqual);\r\n\r\nfunction areSlideImagesEqual(prevProps, nextProps) {\r\n if (prevProps.list?.length !== nextProps.list?.length) {\r\n return false;\r\n }\r\n return true;\r\n}\r\n","import React, { useState } from \"react\";\r\nimport classnames from \"classnames/bind\";\r\nimport {\r\n addCommas,\r\n // addToFavoriteProperty, // from global\r\n // removeFromFavoriteProperty, // from global\r\n getCookie,\r\n} from \"../common/Common\";\r\nimport { CompareButtonWithText, CompareButton } from \"../Compare/Common\";\r\nimport Config from \"config\";\r\n\r\nconst pagesLink = Config.pagesLink;\r\n\r\nexport const HeadingWrapper = React.memo((propertyDetail) => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n รายละเอียดทรัพย์
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n {ReaderChild(slideImages, \"swiper-zoom-container\")}\r\n
\r\n \r\n {propertyDetail.TitlePageName}\r\n
\r\n \r\n {/* {1\r\n /\r\n {slideImages.length}} */}\r\n
\r\n \r\n
} */}\r\n \r\n
\r\n รายละเอียดทรัพย์
\r\n \r\n\r\n
\r\n \r\n 1\r\n /\r\n {slideImages.length}\r\n
\r\n \r\n \r\n แชร์\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {propertyName}
\r\n \r\n\r\n \r\n
\r\n {location}
\r\n\r\n
\r\n {propertyTypeHtml}
\r\nรหัส {propertyDetail.PropertyIDFormat}
\r\n\r\n
\r\n {bedRoomHtml}
\r\n {areaHtml}
\r\n \r\n {tag}\r\n
\r\n \r\n {PromotionPrice}\r\n {Price}\r\n
\r\n \r\n \r\n ติดต่อเจ้าหน้าที่/นัดหมายชมทรัพย์จริง\r\n \r\n \r\n ติดต่อเจ้าหน้าที่/นัดหมายเข้าชมทรัพย์\r\n \r\n \r\n เสนอราคาซื้อ\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n}, areEqual);\r\n\r\nconst PrintBtn = (propertyDetail) => {\r\n return (\r\n \r\n
\r\n {propertyDetail.TitlePageName}
\r\n\r\n \r\n \r\n
\r\n \r\n รหัส {propertyDetail.PropertyIDFormat}{\" \"}\r\n {propertyDetail.PropertyIDPN && (\r\n {` (ref: ${propertyDetail.PropertyIDPN})`}\r\n )}\r\n
\r\n \r\nเข้าชม {addCommas(propertyDetail.GaCountView, 0)} ครั้ง
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst ShareBtn = (propertyDetail) => {\r\n return (\r\n พิมพ์
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst FavoriteToggleButton = ({ propId }) => {\r\n const propertyId = propId ? propId : \"\";\r\n const [isFavorite, setIsFavorite] = useState(false);\r\n\r\n const handleToggle = () => {\r\n if (isFavorite) {\r\n removeFromFavoriteProperty(propertyId);\r\n } else {\r\n addToFavoriteProperty(propertyId);\r\n }\r\n setIsFavorite(!isFavorite);\r\n };\r\n\r\n // Check if the property is already in the 'favoriteProperty' list\r\n const isPropertyInFavorites = () => {\r\n if (propertyId) {\r\n const favoriteProperty = getCookie(\"favoriteProperty\") || \"\";\r\n const favoriteList = favoriteProperty.split(\",\");\r\n return favoriteList.includes(propertyId.toString());\r\n }\r\n };\r\n\r\n // Set the initial state based on whether the property is in the 'favoriteProperty' list\r\n useState(() => {\r\n setIsFavorite(isPropertyInFavorites());\r\n }, [propertyId]);\r\n\r\n return (\r\n <>\r\n แชร์
\r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nfunction areEqual(prevProps, nextProps) {\r\n return prevProps.TitlePageName === nextProps.TitlePageName;\r\n}\r\n","import {\r\n GoogleMap,\r\n InfoWindow,\r\n Marker,\r\n useJsApiLoader,\r\n} from \"@react-google-maps/api\";\r\nimport Config from \"config\";\r\nimport React, { useState } from \"react\";\r\nimport { prepareDataForProopertyBox } from \"../common/PropertyBox\";\r\n\r\nconst pagesLink = Config.pagesLink;\r\nconst mediaURLPrefix = Config.mediaURLPrefix;\r\nconst defaultThumbnailURL = Config.defaultThumbnailURL;\r\nconst $ = window.$;\r\n\r\nconst containerStyle = {\r\n width: \"100%\",\r\n height: \"100%\",\r\n};\r\n\r\nconst GMap = (props) => {\r\n if (!props.PropertiesInfoRelated) {\r\n console.log(\"No PropertiesInfoRelated\");\r\n return <>;\r\n }\r\n // if (!props.Latitude || props.Longtitude) {\r\n // return <>;\r\n // }\r\n const { isLoaded } = useJsApiLoader({\r\n googleMapsApiKey: Config.googleMapsApiKey, //\"AIzaSyA0uJQ7h2b5odArgx9eK08v7pyx6gEqWsk\",//\"AIzaSyCuSBXCxCZDt6h33hXun8k5j9Dgadj47kE\",\r\n });\r\n\r\n const [center, setCenter] = useState({\r\n lat: parseFloat(props.Latitude),\r\n lng: parseFloat(props.Longtitude),\r\n });\r\n\r\n const [map, setMap] = React.useState(null);\r\n\r\n const [mainPin, setMainPin] = React.useState({\r\n url: \"/SiteCollectionDocuments/assets/PFS2022/pages/detail/img/marker.png\",\r\n size: { height: 34.15, width: 45.68 },\r\n scaledSize: { height: 34.15, width: 45.68 },\r\n anchor: { x: 0, y: 45.68 },\r\n });\r\n\r\n const [pin, setPin] = React.useState({\r\n url: \"/SiteCollectionDocuments/assets/PFS2022/pages/detail/img/marker-2.png\",\r\n size: { height: 17.45, width: 26 },\r\n scaledSize: { height: 17.45, width: 26 },\r\n anchor: { x: 0, y: 26 },\r\n });\r\n\r\n const [activeMarker, setActiveMarker] = useState(null);\r\n\r\n const handleActiveMarker = (marker) => {\r\n console.log(\"handleMarker\", marker);\r\n if (marker === activeMarker) {\r\n return;\r\n }\r\n setActiveMarker(marker);\r\n };\r\n\r\n // useEffect(()=>{\r\n // handleActiveMarker(props.PropertyID)\r\n // },[props.PropertyID])\r\n\r\n const renderMarker = (props) => {\r\n if (props.PropertiesInfoRelated) {\r\n return props.PropertiesInfoRelated.map((item, index) => {\r\n return (\r\n ถูกใจ
\r\n\r\n \r\n กรุณากดยอมรับ Cookie สำหรับ การเพิ่มทรัพย์ถูกใจ\r\n
\r\n \r\n
`);\r\n map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(controlDiv[0]);\r\n handleActiveMarker(props.PropertyID);\r\n setMap(map);\r\n },\r\n [props.PropertiesInfoRelated]\r\n );\r\n\r\n function makeid(length) {\r\n var result = \"\";\r\n\r\n var characters =\r\n \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\r\n\r\n var charactersLength = characters.length;\r\n\r\n for (var i = 0; i < length; i++) {\r\n result += characters.charAt(Math.floor(Math.random() * charactersLength));\r\n }\r\n\r\n return result;\r\n }\r\n\r\n console.log(\"Google map render\");\r\n if (!isLoaded) return <>;\r\n\r\n return (\r\n \r\n ![\"ทรัพย์สินปัจจุบันที่เลือก\"](\"${mainPin.url}\")
\r\n : ทรัพย์สินปัจจุบันที่เลือก\r\n
\r\n \r\n ![\"ทรัพย์สินปัจจุบันที่เลือก\"](\"${pin.url}\")
\r\n : ทรัพย์สินใกล้เคียง\r\n
\r\n \r\n \r\n ![](\"/SiteCollectionDocuments/assets/PFS2022/theme/img/icon/close-filter.svg\")
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nfunction mapNavButtonClicked(Latitude, Longtitude) {\r\n if (!navigator.geolocation) {\r\n window.openErrorPopup(\"เว็บเบราว์เซอร์ของท่านไม่สามารถใช้งานฟีเจอร์นี้ได้\");\r\n }\r\n\r\n navigator.geolocation.getCurrentPosition(\r\n function (position) {\r\n var latitude = position.coords.latitude;\r\n var longitude = position.coords.longitude;\r\n var url =\r\n \"https://www.google.com/maps/dir/?api=1&origin=\" +\r\n latitude +\r\n \",\" +\r\n longitude +\r\n \"&destination=\" +\r\n Latitude +\r\n \",\" +\r\n Longtitude +\r\n \"&travelmode=driving\";\r\n\r\n //var a = $('').attr('href', url).attr('target', '_blank').css('display', 'none');\r\n //$('body').append(a);\r\n //a[0].click();\r\n\r\n window.open(url, \"_blank\");\r\n\r\n // $('#mapLink').attr('href', url)[0].click();\r\n },\r\n function (err) {\r\n var alertMessage;\r\n\r\n if (err.code === 1) {\r\n alertMessage =\r\n \"โปรดตั้งค่าเพื่ออนุญาตให้หน้าเว็บดึงตำแหน่งของท่าน แล้วลองใหม่อีกครั้ง\";\r\n } else {\r\n alertMessage = \"ไม่สามารถดึงตำแหน่งปัจจุบันของท่านได้\";\r\n }\r\n\r\n window.openErrorPopup(alertMessage);\r\n }\r\n );\r\n}\r\n","import classnames from \"classnames/bind\";\r\nimport Config from \"config\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { CookiesProvider, useCookies } from \"react-cookie\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { Provider, useDispatch, useSelector } from \"react-redux\";\r\nimport {\r\n after,\r\n copyObject,\r\n getApiDataAsync,\r\n getArea,\r\n getPathFromUrl,\r\n getPropertyType,\r\n getPropertyTypeEn,\r\n isMobile,\r\n kloader,\r\n postApiDataAsync,\r\n scrollToValue,\r\n showAreaValue,\r\n showBedAndBath,\r\n showUseableAreaValue,\r\n addQueryString,\r\n getQueryStringParameter,\r\n} from \"../common/Common\";\r\nimport { DropLeadInputField, DropLeadSelectList } from \"../common/Component\";\r\nimport { HeaderWithSearch } from \"../common/Header\";\r\nimport { PropertyList, checkIsPartner } from \"../common/PropertyBox\";\r\nimport configureStore from \"../store\";\r\nimport {\r\n DropleadListChange,\r\n DropleadValidateChange,\r\n formsCalcDataChange,\r\n formsDropleadDataChange,\r\n searchResultDataChange,\r\n updatePropertyDetail,\r\n updateSearchResultList,\r\n} from \"../stores/propertySlice\";\r\nimport { CalculatorsV2 } from \"./calculatorsV2\";\r\nimport { PartnerCalculator } from \"./PartnerCalculator\";\r\nimport { VaridateDropleadDataField, getAmount } from \"./ValidateHelper\";\r\n\r\nimport ReCAPTCHA from \"react-google-recaptcha\";\r\n\r\nimport moment from \"moment\";\r\nimport { LoginFooter } from \"../common/LoginFooter\";\r\nimport { auctionDetailLink } from \"./auctionConstants\";\r\nimport { Breadcrumbs } from \"./Breadcrumbs\";\r\nimport {\r\n AnnouncementText,\r\n DetailWrapper,\r\n PartnerDetail,\r\n PriceWrapper,\r\n PrivacyText,\r\n PropertyDetailsCondition,\r\n PropertyInfoTable,\r\n PropertyNearByTabList2024,\r\n PropertyRemark,\r\n ShareConent,\r\n TableDetail,\r\n TagBadgeWrapper,\r\n TagPropertiesWrapper,\r\n getLocation,\r\n} from \"./common\";\r\nimport { GallerySlide } from \"./GallerySlide\";\r\nimport { HeadingWrapper } from \"./HeadingWrapper\";\r\nimport { IdeaDecoration } from \"./IdeaDecoration\";\r\nimport \"./index.css\";\r\nimport { MyGoogleMap } from \"./NewGoogleMap\";\r\n\r\nconst store = configureStore();\r\n\r\nconst mediaURLPrefix = Config.mediaURLPrefix;\r\nconst defaultThumbnailURL = Config.defaultThumbnailURL;\r\nconst $ = window.$;\r\n\r\nconst pagesLink = Config.pagesLink;\r\nconst placeTypes = Config.placeTypes;\r\nconst backendNPAURL = Config.backendNPAURL;\r\nconst ReCAPTCHASiteKey = Config.ReCAPTCHASiteKey;\r\n\r\nconst regexForReplace = Object.freeze({\r\n thaiEngWithSpace: /[^A-Za-z\\u0E01-\\u0E3A\\u0E40-\\u0E4D\\s]/g,\r\n numberOnly: /[^0-9]/g,\r\n emojiRegEx:\r\n /([\\uE000-\\uF8FF]|\\uD83C[\\uDC00-\\uDFFF]|\\uD83D[\\uDC00-\\uDFFF]|[\\u2694-\\u2697]|\\uD83E[\\uDD10-\\uDD5D])/g,\r\n});\r\n\r\nfunction dmyHmsToDateObj(str) {\r\n var dateTimeParts = str.split(\"T\");\r\n var dateParts = dateTimeParts[0].split(\"-\");\r\n var timeParts = dateTimeParts[1].split(\":\");\r\n\r\n return new Date(\r\n +dateParts[0],\r\n +dateParts[1] - 1,\r\n +dateParts[2],\r\n +timeParts[0],\r\n +timeParts[1],\r\n +timeParts[2]\r\n );\r\n}\r\n\r\nconst propertyForAuction = [\r\n \"028807181\",\r\n \"028808438\",\r\n \"028811133\",\r\n \"028810424\",\r\n \"028811240\",\r\n \"038804499\",\r\n \"038805142\",\r\n \"038805197\",\r\n \"038804742\",\r\n \"038804259\",\r\n \"058801656\",\r\n \"058802203\",\r\n \"058802285\",\r\n \"058802295\",\r\n \"058802296\",\r\n \"038805536\",\r\n];\r\nconst auctionTime = [\r\n [\r\n dmyHmsToDateObj(\"2024-05-02T00:00:00\"),\r\n dmyHmsToDateObj(\"2024-05-18T16:00:00\"),\r\n ],\r\n [\r\n dmyHmsToDateObj(\"2024-04-28T00:00:00\"),\r\n dmyHmsToDateObj(\"2024-04-30T23:00:00\"),\r\n ], // for test\r\n];\r\n\r\nconst currentlyInAuction = (propertyId) => {\r\n if (propertyForAuction.indexOf(propertyId) != -1) {\r\n var time = new Date();\r\n var result = null;\r\n auctionTime.some((range) => {\r\n return time >= range[0] && time < range[1]\r\n ? ((result = range), true)\r\n : false;\r\n });\r\n if (result) {\r\n return result;\r\n }\r\n }\r\n return false;\r\n};\r\n\r\n// axios.defaults.headers.common['Authorization'] = store.getState().Token;\r\n//process.env.API_ROOT_URL\r\n\r\n// distance = 10000\r\n\r\nconst PropertyGallery = React.memo((props) => {\r\n const [slideImages, setslideImages] = useState([]);\r\n\r\n const onLoad = after(slideImages.length * 3, () => {\r\n initPageJs();\r\n });\r\n\r\n const ReaderChild = (list, componentClassName) => {\r\n list = list.map((property, index) => {\r\n return (\r\n \r\n
\r\n \r\n {\r\n currentTarget.onerror = null; // prevents looping\r\n currentTarget.src = defaultThumbnailURL;\r\n }}\r\n alt=\"Asset\"\r\n loading=\"lazy\"\r\n />\r\n
\r\n \r\n \r\n
\r\n {propertyName}
\r\n \r\n {location && (\r\n\r\n \r\n
\r\n )}\r\n {location}
\r\n\r\n {tag}\r\n
\r\n {/* \r\n {PromotionPrice}\r\n {Price}\r\n
\r\n รหัส {PropertyIDFormat}
\r\n\r\n {tag}\r\n
*/}\r\n \r\n {PromotionPrice}\r\n {Price}\r\n
\r\n\r\n \r\n \r\n mapNavButtonClicked(property.Latitude, property.Longtitude)\r\n }\r\n data-kbct=\"link_click\"\r\n data-kblb=\"see_route\"\r\n data-kbgp=\"detail\"\r\n data-kbsc=\"detail\"\r\n >\r\n กดดูเส้นทาง\r\n \r\n
\r\n \r\n {\r\n currentTarget.onerror = null; // prevents looping\r\n currentTarget.src = defaultThumbnailURL;\r\n currentTarget.setAttribute(\"test\", \"test\");\r\n onLoad();\r\n }}\r\n alt={`${props.propertyName} ${index + 1}`}\r\n loading=\"lazy\"\r\n />\r\n
\r\n \r\n );\r\n });\r\n return list;\r\n };\r\n\r\n useEffect(() => {\r\n if (props.list && props.list.length > 0) {\r\n var imageTypes;\r\n\r\n if (isMobile()) {\r\n imageTypes = [\"IMAGE-MOBILE\", \"MAP-MOBILE\"];\r\n } else {\r\n imageTypes = [\"IMAGE-PC\", \"MAP-PC\"];\r\n }\r\n\r\n setslideImages(\r\n props.list\r\n .filter(function (media) {\r\n return imageTypes.indexOf(media.MediaType) !== -1;\r\n })\r\n .sort(function (a, b) {\r\n if (a.MediaType < b.MediaType || a.MediaPath < b.MediaPath) {\r\n return -1;\r\n } else if (a.MediaType > b.MediaType || a.MediaPath > b.MediaPath) {\r\n return 1;\r\n } else {\r\n return 0;\r\n }\r\n })\r\n );\r\n }\r\n }, [props.list]);\r\n console.log(\"PropertyGallery Render len:\", slideImages.length);\r\n if (slideImages.length > 0) {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {ReaderChild(slideImages, \"gallery-img\")}\r\n
\r\n\r\n \r\n
\r\n \r\n {ReaderChild(slideImages, \"gallery-sm-img\")}\r\n
\r\n \r\n \r\n \r\n scrollToValue($(\"#property-gallery\").height())}\r\n className=\"pxtm-click-navMenu gallery-sm-more show-lg mousePointer\"\r\n >\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n\r\n \r\n นัดหมาย\r\n
\r\n เข้าชมทรัพย์\r\n
\r\n นัดหมาย\r\n
\r\n เข้าชมทรัพย์\r\n
\r\n \r\n
\r\n \r\n {ReaderChild(slideImages, \"swiper-zoom-container\")}\r\n
\r\n เนื่องจากธนาคารกสิกรไทยอยู่ในระหว่างปรับปรุงระบบ มีผลทำให้ไม่สามารถใช้งานได้ ท่านสามารถใช้งานได้อีกครั้งวันที่ ${m.format(\r\n \"LLL\"\r\n )}น. ขออภัยในความไม่สะดวก`;\r\n openErrorPopup(closePopUpText);\r\n }\r\n\r\n function makeAnOffer() {\r\n if (propertyDetail.PropertyID) {\r\n const leadby = getQueryStringParameter(\"leadby\");\r\n\r\n const queryParams = {\r\n propID: propertyDetail.PropertyID,\r\n PropertyIDFormat: propertyDetail.PropertyIDFormat,\r\n PropertyTypeName: propertyDetail.PropertyTypeName,\r\n ...(leadby && { leadby: leadby }),\r\n };\r\n\r\n const queryString = addQueryString(queryParams);\r\n\r\n const urlWithQuery = `${pagesLink.offer}${queryString}`;\r\n\r\n window.open(urlWithQuery, \"_self\");\r\n\r\n // window.open(\r\n // pagesLink.offer +\r\n // `?propID=${propertyDetail.PropertyID}&PropertyIDFormat=${propertyDetail.PropertyIDFormat}&PropertyTypeName=${propertyDetail.PropertyTypeName}`,\r\n // \"_self\"\r\n // );\r\n } else {\r\n console.log(\"Not found PropertyID (makeAnOffer)\");\r\n }\r\n }\r\n\r\n function cancelMakeAnOffer() {\r\n $(\"#confirm-data-modal\").css({\r\n display: \"\",\r\n });\r\n }\r\n\r\n function likeThisProperty() {\r\n var temp = JSON.parse(JSON.stringify(propertyDetail));\r\n temp.Like = !temp.Like;\r\n dispatch(updatePropertyDetail({ value: temp }));\r\n }\r\n\r\n function getNearByPlaceByGroupCode(TypeCode, placeList) {\r\n return placeList.filter((x) => x.PlaceType === TypeCode);\r\n }\r\n\r\n function genNearByPlaces(NearbyPlaces) {\r\n let placeTypesList = copyObject(placeTypes);\r\n\r\n placeTypesList.map((group) => {\r\n if (typeof group.TypeCode !== \"string\") {\r\n group.places = [];\r\n group.TypeCode.forEach((TypeCode) => {\r\n group.places = group.places.concat(\r\n getNearByPlaceByGroupCode(TypeCode, NearbyPlaces)\r\n );\r\n });\r\n } else {\r\n group.places = getNearByPlaceByGroupCode(group.TypeCode, NearbyPlaces);\r\n }\r\n });\r\n\r\n // get only 4\r\n placeTypesList = placeTypesList.filter((x) => x.places.length).slice(0, 4);\r\n\r\n // Sort Distance Asc\r\n placeTypesList.forEach((x) => {\r\n x.places = x.places.sort((a, b) => a.Distance - b.Distance);\r\n });\r\n return placeTypesList;\r\n }\r\n\r\n function dropleadDataChange(field, value) {\r\n let errorMessage = \"\";\r\n switch (field) {\r\n case \"naSalary\":\r\n const limit = 1000000000;\r\n let tempValue = parseFloat(value.replace(/,/g, \"\"));\r\n tempValue = tempValue > limit ? limit : tempValue;\r\n if (tempValue || tempValue === 0) {\r\n value = tempValue.toLocaleString();\r\n } else {\r\n value = \"\";\r\n }\r\n break;\r\n case \"juJuristicId\":\r\n value = value.replace(regexForReplace.numberOnly, \"\");\r\n value = value.slice(0, 13);\r\n break;\r\n case \"phone\":\r\n case \"confirmphone\":\r\n value = value.replace(regexForReplace.numberOnly, \"\");\r\n value = value.slice(0, 10);\r\n break;\r\n // case 'select':\r\n case \"availableTime\":\r\n case \"naCareer\":\r\n errorMessage = VaridateDropleadDataField(dropleadDetail, field, value);\r\n break;\r\n default:\r\n break;\r\n }\r\n console.log(\"on change\", field, value, errorMessage);\r\n dispatch(formsDropleadDataChange({ field, value, errorMessage }));\r\n }\r\n\r\n function dropleadBlur(field, value) {\r\n console.log(field, value);\r\n\r\n const errorMessage = VaridateDropleadDataField(\r\n dropleadDetail,\r\n field,\r\n value\r\n );\r\n\r\n dispatch(formsDropleadDataChange({ field, value, errorMessage }));\r\n if (!errorMessage && value && dropleadDetail.usertype.value !== \"ju\") {\r\n let validateField = [\"phone\", \"confirmphone\", \"email\"];\r\n validateField = validateField.filter((x) => x !== field);\r\n const validates = validateField.map((field) => {\r\n const result =\r\n dropleadDetail[field].value && !dropleadDetail[field].errorMessage;\r\n return result;\r\n });\r\n const valid = validates.every((c) => c);\r\n\r\n setShowNaCitizenId(valid);\r\n }\r\n }\r\n\r\n function dropLeadDraft() {\r\n if (!enableDropleadLink) {\r\n enablePageLink();\r\n return;\r\n }\r\n if (!validateDropleadPart1()) {\r\n return;\r\n }\r\n\r\n window.dataLayer.push({\r\n event: \"facebook_event\",\r\n trigger_type: \"page view\",\r\n position: \"click next droplead npa details\",\r\n fb_npa_list: fbNpaList,\r\n });\r\n \r\n kloader();\r\n sendDraft().then(() => {\r\n // recaptchaRef.current.reset();\r\n kloader();\r\n recaptchaRef.current?.reset();\r\n });\r\n }\r\n\r\n function goToFormPart2() {\r\n if (isMobile()) {\r\n $(\"#field-step-1\").removeClass(\"current\");\r\n $(\"#field-step-1\").removeClass(\"current-reverse\");\r\n $(\"#field-step-2\").addClass(\"current\");\r\n } else {\r\n $(\"#field-step-3\").removeClass(\"current\");\r\n $(\"#field-step-3\").removeClass(\"current-reverse\");\r\n $(\"#field-step-4\").addClass(\"current\");\r\n $([document.documentElement, document.body]).animate(\r\n {\r\n scrollTop: $(\"#contact-desktop\").offset().top - 65,\r\n },\r\n 0\r\n );\r\n }\r\n }\r\n\r\n async function sendDraft() {\r\n var objRequest = {};\r\n\r\n try {\r\n recaptchaRef.current?.reset();\r\n const token = await recaptchaRef.current.executeAsync();\r\n objRequest.recapchaResult = token;\r\n } catch (error) {}\r\n\r\n console.log(recaptchaRef.current);\r\n\r\n console.log(objRequest);\r\n\r\n var userType = dropleadDetail.usertype.value;\r\n var interest = dropleadDetail.consentCheck.value;\r\n var utm_campaign = $(\"#utm_campaign\").val() || \"Organic\";\r\n var utm_source = $(\"#utm_source\").val() || \"Organic\";\r\n var utm_medium = $(\"#utm_medium\").val() || \"Organic\";\r\n var utm_content = $(\"#utm_content\").val() || \"Organic\";\r\n var utm_term = $(\"#utm_term\").val() || \"Organic\";\r\n var e2e_bannerid = $(\"#e2e_bannerid\").val() || \"Organic\";\r\n var pfsURL =\r\n getPathFromUrl(window.location.href) +\r\n (propertyDetail.PropertyID ? \"?\" + propertyDetail.PropertyID : \"\");\r\n\r\n var postPromise;\r\n\r\n if (userType === \"normal\") {\r\n var naCitizenIdVal = dropleadDetail.naCitizenId.value;\r\n\r\n postPromise = postApiDataAsync({\r\n urlPath: \"/SubmitFormPart1_Personal\",\r\n apiUrl: backendNPAURL,\r\n objRequest: {\r\n token: objRequest.recapchaResult,\r\n jwtData: window[\"generateToken\"]({\r\n value01: dropleadDetail.phone.value,\r\n value02: dropleadDetail.email.value,\r\n value03: naCitizenIdVal,\r\n value04: dropleadDetail.consentCheck.value,\r\n value05: utm_campaign,\r\n value06: utm_source,\r\n value07: utm_medium,\r\n value08: utm_content,\r\n value09: utm_term,\r\n value10: e2e_bannerid,\r\n value11: propertyDetail.PropertyID,\r\n value12: pfsURL,\r\n value13: propertyDetail.SourceCode,\r\n value14: propertyDetail.PropertySourceName,\r\n }),\r\n },\r\n });\r\n } else {\r\n postPromise = postApiDataAsync({\r\n urlPath: \"/SubmitFormPart1_Juristic\",\r\n apiUrl: backendNPAURL,\r\n objRequest: {\r\n token: objRequest.recapchaResult,\r\n jwtData: window[\"generateToken\"]({\r\n value01: dropleadDetail.juJuristicId.value,\r\n value02: dropleadDetail.juFirstName.value,\r\n value03: dropleadDetail.juLastName.value,\r\n value04: dropleadDetail.phone.value,\r\n value05: dropleadDetail.email.value,\r\n value06: dropleadDetail.consentCheck.value,\r\n value07: utm_campaign,\r\n value08: utm_source,\r\n value09: utm_medium,\r\n value10: utm_content,\r\n value11: utm_term,\r\n value12: e2e_bannerid,\r\n value13: propertyDetail.PropertyID,\r\n value14: pfsURL,\r\n value15: propertyDetail.SourceCode,\r\n value16: propertyDetail.PropertySourceName,\r\n }),\r\n },\r\n });\r\n }\r\n\r\n return postPromise.then(\r\n function (data) {\r\n if (data.HasCustomerInfo) {\r\n setHasCustomerInfo(data.HasCustomerInfo);\r\n }\r\n\r\n // if (hasCustomerInfo) {\r\n // // $('.na-first-name-field, .na-last-name-field, .ju-company-name-field').hide();\r\n // } else {\r\n // // $('.na-first-name-field, .na-last-name-field, .ju-company-name-field').show();\r\n // }\r\n\r\n goToFormPart2();\r\n\r\n dataLayer.push({\r\n event: \"registrationComplete\",\r\n eventCategory: \"form_submit\",\r\n eventAction: \"success\",\r\n eventLabel: \"NPA2020_register_prefill\",\r\n dimension40: userType === \"ordinary\" ? \"บุคคลธรรมดา\" : \"นิติบุคคล\", //นิติบุคคล,บุคคลธรรมดา\r\n dimension41: interest ? \"Y\" : \"N\", //สนใจทรัพย์สินรอการขาย\r\n });\r\n },\r\n function (err) {\r\n console.error(err);\r\n console.log(err.code);\r\n console.log(err.message);\r\n\r\n if (err.code === \"DuplicateSubmitToday\") {\r\n // $.alert({\r\n // title: 'ขออภัย',\r\n // content: 'หมายเลขบัตรประชาชนหรือ หมายเลขโทรศัพท์มือถือนี้ได้มีการลงทะเบียนไว้แล้ว กรุณารอเจ้าหน้าที่ติดต่อกลับภายใน 3 วันทำการ',\r\n // });\r\n openErrorPopup(\r\n \"ขออภัย
หมายเลขบัตรประชาชนหรือ หมายเลขโทรศัพท์มือถือนี้ได้มีการลงทะเบียนไว้แล้ว กรุณารอเจ้าหน้าที่ติดต่อกลับภายใน 3 วันทำการ\"\r\n );\r\n } else if (err.code === \"NetworkError\") {\r\n // $.alert({\r\n // title: 'ขออภัย',\r\n // content: 'ไม่สามารถส่งข้อมูลได้ โปรดลองใหม่ในภายหลัง',\r\n // });\r\n openErrorPopup(\r\n \"ขออภัย
ไม่สามารถส่งข้อมูลได้ โปรดลองใหม่ในภายหลัง\"\r\n );\r\n } else if (err.code === \"InvalidCitizenID\") {\r\n dispatch(\r\n DropleadValidateChange({\r\n field: \"naCitizenId\",\r\n errorMessage: \"กรอกข้อมูลเลขบัตรประชาชนให้ถูกต้อง\",\r\n })\r\n );\r\n } else if (err.code === \"InvalidMobileNo\") {\r\n dispatch(\r\n DropleadValidateChange({\r\n field: \"phone\",\r\n errorMessage: \"กรอกข้อมูลเบอร์มือถือให้ถูกต้อง\",\r\n })\r\n );\r\n } else if (err.code === \"InvalidEmailAddress\") {\r\n dispatch(\r\n DropleadValidateChange({\r\n field: \"email\",\r\n errorMessage: \"กรอกข้อมูลอีเมลให้ถูกต้อง\",\r\n })\r\n );\r\n } else if (err.code === \"InvalidJuristicID\") {\r\n dispatch(\r\n DropleadValidateChange({\r\n field: \"juJuristicId\",\r\n errorMessage: \"กรอกข้อมูลเลขนิติบุคคลให้ถูกต้อง\",\r\n })\r\n );\r\n } else if (err.code === \"InvalidFirstName\") {\r\n dispatch(\r\n DropleadValidateChange({\r\n field: \"juFirstName\",\r\n errorMessage: \"กรอกข้อมูลชื่อให้ถูกต้อง\",\r\n })\r\n );\r\n } else if (err.code === \"InvalidLastName\") {\r\n dispatch(\r\n DropleadValidateChange({\r\n field: \"juLastName\",\r\n errorMessage: \"กรอกข้อมูลนามสกุลให้ถูกต้อง\",\r\n })\r\n );\r\n } else {\r\n openErrorPopup(\r\n \"ขออภัย
ไม่สามารถดำเนินการได้ในขณะนี้ โปรดลองใหม่ในภายหลัง\"\r\n );\r\n }\r\n }\r\n );\r\n }\r\n\r\n function dropLeadSubmit() {\r\n //applyFinishButtonHandler\r\n console.log(\"submit form part 2\");\r\n\r\n if (!validateDropleadPart2()) {\r\n return;\r\n }\r\n\r\n kloader();\r\n\r\n var userType = dropleadDetail.usertype.value;\r\n var interest = dropleadDetail.consentCheck.value;\r\n var utm_campaign = $(\"#utm_campaign\").val() || \"Organic\";\r\n var utm_source = $(\"#utm_source\").val() || \"Organic\";\r\n var utm_medium = $(\"#utm_medium\").val() || \"Organic\";\r\n var utm_content = $(\"#utm_content\").val() || \"Organic\";\r\n var utm_term = $(\"#utm_term\").val() || \"Organic\";\r\n var e2e_bannerid = $(\"#e2e_bannerid\").val() || \"Organic\";\r\n var postPromise;\r\n\r\n if (userType === \"normal\") {\r\n var firstName;\r\n var lastName;\r\n var naSalary = +getAmount(dropleadDetail.naSalary.value);\r\n\r\n if (!hasCustomerInfo) {\r\n firstName = dropleadDetail.naFirstName.value;\r\n lastName = dropleadDetail.naLastName.value;\r\n } else {\r\n firstName = null;\r\n lastName = null;\r\n }\r\n\r\n postPromise = postApiDataAsync({\r\n urlPath: \"/SubmitFormPart2_Personal\",\r\n apiUrl: backendNPAURL,\r\n objRequest: {\r\n jwtData: window[\"generateToken\"]({\r\n value01: dropleadDetail.phone.value,\r\n value02: dropleadDetail.email.value,\r\n value03: dropleadDetail.naCitizenId.value,\r\n value04: interest,\r\n value05: firstName,\r\n value06: lastName,\r\n value07: dropleadDetail.naCareer.value,\r\n value08: naSalary,\r\n value09: \"\", //form.find('#naProvince').val(),\r\n value10: \"\", //form.find('#naAmphoe').val(),\r\n value11: \"\", //form.find('#naBranch').val(),\r\n value12: dropleadDetail.availableTime.value,\r\n value13: utm_campaign,\r\n value14: utm_source,\r\n value15: utm_medium,\r\n value16: utm_content,\r\n value17: utm_term,\r\n value18: e2e_bannerid,\r\n }),\r\n },\r\n });\r\n } else {\r\n var companyName;\r\n\r\n if (!hasCustomerInfo) {\r\n companyName = dropleadDetail.juCompanyName.value;\r\n } else {\r\n companyName = null;\r\n }\r\n\r\n postPromise = postApiDataAsync({\r\n urlPath: \"/SubmitFormPart2_Juristic\",\r\n apiUrl: backendNPAURL,\r\n objRequest: {\r\n jwtData: window[\"generateToken\"]({\r\n value01: dropleadDetail.juJuristicId.value,\r\n value02: dropleadDetail.juFirstName.value,\r\n value03: dropleadDetail.juLastName.value,\r\n value04: dropleadDetail.phone.value,\r\n value05: dropleadDetail.email.value,\r\n value06: interest,\r\n value07: companyName,\r\n value08: \"\", //form.find('#juProvince').val(),\r\n value09: \"\", //form.find('#juAmphoe').val(),\r\n value10: \"\", //form.find('#juBranch').val(),\r\n value11: dropleadDetail.availableTime.value,\r\n value12: utm_campaign,\r\n value13: utm_source,\r\n value14: utm_medium,\r\n value15: utm_content,\r\n value16: utm_term,\r\n value17: e2e_bannerid,\r\n }),\r\n },\r\n });\r\n }\r\n\r\n postPromise\r\n .then(\r\n function (data) {\r\n //stopLoader();\r\n\r\n //gotoThankyou();\r\n\r\n window.dataLayer.push({\r\n event: \"facebook_event\",\r\n trigger_type: \"page view\",\r\n position: \"page load npa thank you\",\r\n fb_npa_list: fbNpaList,\r\n });\r\n\r\n if (userType === \"normal\") {\r\n var naSalary = +getAmount(dropleadDetail.naSalary.value);\r\n dataLayer.push({\r\n event: \"registrationComplete\",\r\n eventCategory: \"form_submit\",\r\n eventAction: \"success\",\r\n eventLabel: \"NPA2020_register_complete\",\r\n dimension15: dropleadDetail.naCareer.value, //อาชีพ\r\n dimension5: naSalary, //รายได้ต่อเดือน\r\n dimension18: \"\", //จังหวัด\r\n dimension19: \"\", //เขต\r\n dimension20: \"\", //สาขา\r\n dimension21: dropleadDetail.availableTime.value, //เวลาที่สะดวกให้ติดต่อ\r\n eventCallback: function () {\r\n window.location.href =\r\n \"/th/PropertyForSale/property/droplead/Pages/thankyou.aspx\";\r\n },\r\n eventTimeout: 1200,\r\n });\r\n } else {\r\n window.location.href =\r\n \"/th/PropertyForSale/property/droplead/Pages/thankyou.aspx\";\r\n }\r\n\r\n console.log(\"submit complete!\");\r\n },\r\n function (err) {\r\n console.error(err);\r\n console.log(err.code);\r\n console.log(err.message);\r\n\r\n if (err.code === \"DuplicateSubmitToday\") {\r\n openErrorPopup(\r\n \"หมายเลขบัตรประชาชนหรือ หมายเลขโทรศัพท์มือถือนี้ได้มีการลงทะเบียนไว้แล้ว กรุณารอเจ้าหน้าที่ติดต่อกลับภายใน 3 วันทำการ\"\r\n );\r\n } else if (err.code === \"NetworkError\") {\r\n openErrorPopup(\"ไม่สามารถส่งข้อมูลได้ โปรดลองใหม่ในภายหลัง\");\r\n } else if (err.code === \"RowNotFound\") {\r\n openErrorPopup(\r\n \"ไม่สามารถบันทึกข้อมูลได้ โปรดเข้าหน้านี้ใหม่หรือกดปุ่ม refresh\"\r\n );\r\n } else if (err.code === \"UpdateNotAllowed\") {\r\n openErrorPopup(\r\n \"ไม่สามารถบันทึกข้อมูลได้ โปรดเข้าหน้านี้ใหม่หรือกดปุ่ม refresh\"\r\n );\r\n } else {\r\n openErrorPopup(\r\n \"ไม่สามารถดำเนินการได้ในขณะนี้ โปรดลองใหม่ในภายหลัง\"\r\n );\r\n }\r\n }\r\n )\r\n .then(() => {\r\n kloader();\r\n });\r\n }\r\n\r\n function validateDropleadPart1() {\r\n let validateField = [\"phone\", \"confirmphone\", \"email\"];\r\n\r\n let juValidateField = [\"juJuristicId\", \"juFirstName\", \"juLastName\"];\r\n\r\n if (dropleadDetail.usertype.value === \"ju\") {\r\n validateField = validateField.concat(juValidateField);\r\n } else {\r\n validateField = validateField.concat([\"naCitizenId\"]);\r\n }\r\n\r\n const validates = validateField.map((field) => {\r\n const errorMessage = VaridateDropleadDataField(\r\n dropleadDetail,\r\n field,\r\n dropleadDetail[field].value\r\n );\r\n dispatch(DropleadValidateChange({ field, errorMessage })); //async (paraelle)\r\n const result = errorMessage === \"\";\r\n return result;\r\n });\r\n\r\n const valid = validates.every((c) => c);\r\n\r\n if (valid) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n function validateDropleadPart2() {\r\n let validateField = [\"availableTime\"];\r\n\r\n let juValidateField = [\"juCompanyName\"];\r\n\r\n let normalValidateField = [\"naCareer\", \"naSalary\"];\r\n\r\n let normalValidateFieldNotHasCustomerInfo = [\"naFirstName\", \"naLastName\"];\r\n\r\n if (dropleadDetail.usertype.value === \"ju\" && !hasCustomerInfo) {\r\n validateField = validateField.concat(juValidateField);\r\n } else if (dropleadDetail.usertype.value === \"normal\") {\r\n validateField = validateField.concat(normalValidateField);\r\n if (!hasCustomerInfo) {\r\n validateField = validateField.concat(\r\n normalValidateFieldNotHasCustomerInfo\r\n );\r\n }\r\n }\r\n\r\n const validates = validateField.map((field) => {\r\n const errorMessage = VaridateDropleadDataField(\r\n dropleadDetail,\r\n field,\r\n dropleadDetail[field].value\r\n );\r\n dispatch(DropleadValidateChange({ field, errorMessage })); //async (paraelle)\r\n const result = errorMessage === \"\";\r\n return result;\r\n });\r\n\r\n const valid = validates.every((c) => c);\r\n\r\n if (valid) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n useEffect(() => {\r\n if (!$(\"#HiddenPreload\").val()) {\r\n return;\r\n }\r\n const params = new URLSearchParams(window.location.search);\r\n console.log(params);\r\n kloader(true);\r\n var data = JSON.parse($(\"#HiddenPreload\").val());\r\n // var data = Config.detailMockData;\r\n\r\n if (data) {\r\n initDetail(data);\r\n\r\n setFbNpaList([\r\n {\r\n content_id: data.PropertyID,\r\n content_type: \"home_listing\",\r\n property_type: getPropertyTypeEn(data),\r\n price: data.PromotionPrice || data.AdjustPrice || data.SellPrice,\r\n },\r\n ]);\r\n\r\n window.dataLayer.push({\r\n event: \"facebook_event\",\r\n trigger_type: \"page view\",\r\n position: \"page load npa details\",\r\n fb_npa_list: [\r\n {\r\n content_id: data.PropertyID,\r\n content_type: \"home_listing\",\r\n property_type: getPropertyTypeEn(data),\r\n price: data.PromotionPrice || data.AdjustPrice || data.SellPrice,\r\n },\r\n ],\r\n });\r\n\r\n $(\".ft-phone a\").on(\"click\", function () {\r\n window.dataLayer.push({\r\n event: \"facebook_event\",\r\n trigger_type: \"page view\",\r\n position: \"click call npa details\",\r\n fb_npa_list: [\r\n {\r\n content_id: data.PropertyID,\r\n content_type: \"home_listing\",\r\n property_type: getPropertyTypeEn(data),\r\n price: data.PromotionPrice || data.AdjustPrice || data.SellPrice,\r\n },\r\n ],\r\n });\r\n });\r\n\r\n getApiDataAsync({\r\n urlPath: \"/GetData\",\r\n apiUrl: backendNPAURL,\r\n })\r\n .then(\r\n function (data) {\r\n console.log(data);\r\n\r\n var careerList = data.OccupationList.map(function (row) {\r\n return { text: row.Description, value: row.Description };\r\n });\r\n\r\n dispatch(\r\n DropleadListChange({ field: \"naCareer\", value: careerList })\r\n );\r\n\r\n var callbackPeriodList = data.ConvenientTimeList.map(function (\r\n row\r\n ) {\r\n return { text: row.Description, value: row.Description };\r\n });\r\n\r\n dispatch(\r\n DropleadListChange({\r\n field: \"availableTime\",\r\n value: callbackPeriodList,\r\n })\r\n );\r\n },\r\n function (err) {\r\n console.error(err);\r\n openErrorPopup(\"ไม่สามารถดึงข้อมูลได้ โปรดเข้าหน้านี้ใหม่\");\r\n }\r\n )\r\n .then(() => {\r\n // setTimeout(function(){ initPageJs(); }, 1000);\r\n })\r\n .finally(() => {\r\n kloader(false);\r\n });\r\n } else {\r\n console.log(\"No Preload\");\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n $(document).ready(function () {\r\n // Disable CSS\r\n $(\r\n 'link[href*=\"/_catalogs/masterpage/KWeb2016/assets/css/style-en.css\"]'\r\n ).attr(\"disabled\", \"disabled\");\r\n $(\"#close-error-popup\").on(\"click\", function () {\r\n $(\"#error-popup\").css({\r\n display: \"\",\r\n });\r\n });\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n let likeProperty = cookies[\"favoriteProperty\"];\r\n\r\n if (!likeProperty || likeProperty == \"undefined\") {\r\n likeProperty = [];\r\n } else {\r\n likeProperty = likeProperty.split(\",\");\r\n }\r\n if (isLike && !likeProperty.includes(propertyDetail.PropertyID)) {\r\n whenSetCookie(\r\n \"favoriteProperty\",\r\n [...likeProperty, propertyDetail.PropertyID].filter((x) => x).join(\",\")\r\n );\r\n } else if (!isLike && likeProperty.includes(propertyDetail.PropertyID)) {\r\n whenSetCookie(\r\n \"favoriteProperty\",\r\n likeProperty.filter((x) => x !== propertyDetail.PropertyID).join(\",\")\r\n );\r\n }\r\n // console.log(\"favoriteProperty\", propertyDetail.PropertyID)\r\n // whenSetCookie(\"favoriteProperty\", propertyDetail.PropertyID)\r\n }, [isLike]);\r\n\r\n function initDetail(data) {\r\n console.log(\"data\", data);\r\n tempDataDetail.PropertyMediaes = data.PropertyMediaes;\r\n\r\n tempDataDetail.PromotionPrice = data.PromotionPrice;\r\n tempDataDetail.hasSellPrice = data.hasSellPrice;\r\n\r\n tempDataDetail.PropertyTypeName = data.PropertyTypeName;\r\n //getPropertyType(data.PropertyTypeName)\r\n tempDataDetail.VillageTH = getValue(data.VillageTH);\r\n\r\n tempDataDetail.AssetInfoTH = getValue(data.AssetInfoTH);\r\n tempDataDetail.AddressNoTH = getValue(data.AddressNoTH);\r\n tempDataDetail.BuildingTH = getValue(data.BuildingTH);\r\n tempDataDetail.FloorTH = getValue(data.FloorTH);\r\n tempDataDetail.SoiTH = getValue(data.SoiTH);\r\n tempDataDetail.RoadTH = getValue(data.RoadTH);\r\n\r\n tempDataDetail.TambonName = getValue(data.TambonName);\r\n tempDataDetail.AmphurName = getValue(data.AmphurName);\r\n tempDataDetail.ProvinceName = getValue(data.ProvinceName);\r\n tempDataDetail.BuildingAge = getValue(data.BuildingAge);\r\n\r\n tempDataDetail.location = getLocation(tempDataDetail);\r\n\r\n tempDataDetail.Bedroom =\r\n showBedAndBath(data) && data.Bedroom > 0 ? data.Bedroom : \"\";\r\n tempDataDetail.Bathroom =\r\n showBedAndBath(data) && data.Bathroom > 0 ? data.Bathroom : \"\";\r\n\r\n tempDataDetail.TitlePageName = tempDataDetail.VillageTH\r\n ? tempDataDetail.VillageTH\r\n : `${getPropertyType(tempDataDetail)} ${tempDataDetail.ProvinceName}`;\r\n\r\n tempDataDetail.SellPrice = data.SellPrice;\r\n tempDataDetail.PromotionPrice = data.PromotionPrice;\r\n tempDataDetail.AdjustPrice = data.AdjustPrice;\r\n\r\n tempDataDetail.PromotionName = data.PromotionName;\r\n tempDataDetail.PromotionRemark = data.PromotionRemark;\r\n tempDataDetail.PropertyIDFormat = data.PropertyIDFormat;\r\n tempDataDetail.PropertyID = data.PropertyID;\r\n\r\n tempDataDetail.Area = data.Area;\r\n tempDataDetail.AreaValue = data.AreaValue;\r\n tempDataDetail.UseableArea = data.UseableArea;\r\n\r\n tempDataDetail.LinkLineChat = data.DataLineChat;\r\n\r\n var area = showAreaValue(data) ? getArea(data) : \"\";\r\n\r\n tempDataDetail.ShowAreaValue = area ? area.value + \" \" + area.unit : \"\";\r\n tempDataDetail.ShowUseableArea =\r\n showUseableAreaValue(data) && data.UseableArea\r\n ? data.UseableArea.toFixed(2) + \" ตร.ม.\"\r\n : \"\";\r\n //showUseableAreaValue\r\n //showAreaValue\r\n\r\n tempDataDetail.PropertyMediaes = data.PropertyMediaes;\r\n tempDataDetail.GAScore = data.GAScore;\r\n tempDataDetail.IsHot = data.IsHot;\r\n tempDataDetail.GaCountView = data.GaCountView;\r\n tempDataDetail.IsNew = data.IsNew;\r\n tempDataDetail.SourceSaleType = data.SourceSaleType; // for check partner\r\n tempDataDetail.IsPartner = checkIsPartner(data);\r\n tempDataDetail.SourceImageLogo = data.SourceImageLogo;\r\n // tempDataDetail.Like = at cookie below\r\n\r\n tempDataDetail.PromotionRemark = data.PromotionRemark;\r\n tempDataDetail.PMMaintenanceStatus = data.PMMaintenanceStatus;\r\n tempDataDetail.PropertySourceID = data.PropertySourceID;\r\n tempDataDetail.InOutProblemTH = data.InOutProblemTH;\r\n tempDataDetail.PropertySourceName = data.PropertySourceName;\r\n tempDataDetail.SourceCode = data.SourceCode;\r\n tempDataDetail.PropertyDocumentName = data.PropertyDocumentName;\r\n tempDataDetail.DocumentNo = data.DocumentNo;\r\n tempDataDetail.Latitude = data.Latitude;\r\n tempDataDetail.Longtitude = data.Longtitude;\r\n tempDataDetail.RemarkDetail = data.RemarkDetail;\r\n // PropertyMediaes //video\r\n // NearbyPlaces\r\n // PropertiesInfoRelated\r\n\r\n tempDataDetail.NearbyPlaces = genNearByPlaces(data.NearbyPlaces);\r\n tempDataDetail.PropertiesInfoRelated = data.PropertiesInfoRelated;\r\n var tempDataDetailPropertiesInfoRelated =\r\n tempDataDetail.PropertiesInfoRelated?.sort((a, b) => {\r\n if (a.Distance < b.Distance) {\r\n return -1;\r\n }\r\n if (a.Distance > b.Distance) {\r\n return 1;\r\n }\r\n return 0;\r\n })\r\n ?.filter((x) => x.PropertyID.slice(2, 4) === \"88\")\r\n .slice(0, 15); // limit 15\r\n\r\n tempDataDetail.PropertiesInfoRelated = tempDataDetailPropertiesInfoRelated;\r\n\r\n tempDataDetail.PromotionStartDate = data.PromotionStartDate;\r\n tempDataDetail.PromotionEndDate = data.PromotionEndDate;\r\n tempDataDetail.PropertyIDPN = data.PropertyIDPN;\r\n\r\n // for AI\r\n tempDataDetail.CategoryGroup = data.CategoryGroup;\r\n tempDataDetail.CategoryDetail = data.CategoryDetail;\r\n tempDataDetail.AIImg = data.AIImg;\r\n tempDataDetail.isAuction = currentlyInAuction(data.PropertyID);\r\n\r\n dispatch(\r\n updateSearchResultList({\r\n fieldName: \"suggestProperty\",\r\n list: tempDataDetailPropertiesInfoRelated,\r\n hasMore: false,\r\n })\r\n );\r\n\r\n const likeProperty = cookies[\"favoriteProperty\"];\r\n let recentlyviewedProperty = cookies[\"recentlyviewedProperty\"];\r\n const PropertyID = data.PropertyID;\r\n if (!recentlyviewedProperty || recentlyviewedProperty == \"undefined\") {\r\n recentlyviewedProperty = [];\r\n } else {\r\n recentlyviewedProperty = recentlyviewedProperty.split(\",\");\r\n }\r\n if (cookies.Allow_Cookies === \"N\" && false) {\r\n dispatch(\r\n searchResultDataChange({ field: \"Allow_Cookies\", value: false })\r\n );\r\n } else {\r\n if (\r\n likeProperty &&\r\n likeProperty !== \"undefined\" &&\r\n likeProperty.includes(PropertyID)\r\n ) {\r\n tempDataDetail.Like = true;\r\n }\r\n if (!recentlyviewedProperty.includes(PropertyID)) {\r\n whenSetCookie(\r\n \"recentlyviewedProperty\",\r\n [...recentlyviewedProperty, PropertyID].filter((x) => x).join(\",\")\r\n );\r\n }\r\n }\r\n\r\n //For Calc\r\n $(function () {\r\n $(\"#calculate-result\").hide();\r\n $(\"#calculate\").on(\"click\", function () {\r\n $(\".container-calculate\").removeClass(\"view-mode\");\r\n });\r\n });\r\n\r\n const definePrice = data.PromotionPrice\r\n ? data.PromotionPrice\r\n : data.AdjustPrice\r\n ? data.AdjustPrice\r\n : data.SellPrice;\r\n dispatch(\r\n formsCalcDataChange({ field: \"definedPropertyPrice\", value: definePrice })\r\n );\r\n\r\n let appraisalPrice = data.KKApprovePrice;\r\n\r\n if (tempDataDetail.IsPartner && appraisalPrice === null) {\r\n appraisalPrice = definePrice;\r\n console.log(\"set appraisalPrice = definePrice\");\r\n }\r\n\r\n console.log(\"appraisalPrice: \" + appraisalPrice);\r\n\r\n dispatch(\r\n formsCalcDataChange({ field: \"appraisalPrice\", value: appraisalPrice })\r\n );\r\n dispatch(\r\n formsCalcDataChange({\r\n field: \"calculatorHomeLoanSetting\",\r\n value: getCalculatorSetting(data.CalculatorHomeLoanSetting),\r\n })\r\n );\r\n dispatch(\r\n formsCalcDataChange({\r\n field: \"calculatorLandSetting\",\r\n value: getCalculatorSetting(data.CalculatorLandSetting),\r\n })\r\n );\r\n dispatch(\r\n formsCalcDataChange({\r\n field: \"calculatorSMESetting\",\r\n value: getCalculatorSetting(data.CalculatorSMESetting),\r\n })\r\n );\r\n if (data.PropertyTypeName) {\r\n var propertyTypeID = data.PropertyTypeName.trim().split(\" \")[0];\r\n\r\n dispatch(\r\n formsCalcDataChange({\r\n field: \"propertyTypeID\",\r\n value: propertyTypeID,\r\n })\r\n );\r\n\r\n // dispatch(\r\n // formsCalcDataChange({\r\n // field: \"noDecoration\",\r\n // value: propertyTypeID.value === '01',\r\n // })\r\n // );\r\n\r\n var appliedCalcTypes = getAppliedCalcTypes(\r\n propertyTypeID,\r\n data.AreaValue,\r\n calcDetail.calcTypes\r\n );\r\n\r\n console.log(\"appliedCalcTypes -->\", appliedCalcTypes);\r\n\r\n dispatch(\r\n formsCalcDataChange({\r\n field: \"appliedCalcTypes\",\r\n value: appliedCalcTypes,\r\n })\r\n );\r\n }\r\n\r\n console.log(\"tempDataDetail -->\", tempDataDetail);\r\n\r\n dispatch(updatePropertyDetail({ value: tempDataDetail }));\r\n }\r\n\r\n function getAppliedCalcTypes(propertyTypeID, areaValue, calcTypes) {\r\n var forStay = null;\r\n\r\n if ([\"02\", \"03\", \"04\", \"05\"].indexOf(propertyTypeID) !== -1) {\r\n forStay = calcTypes.Home;\r\n } else if (\r\n propertyTypeID === \"01\" &&\r\n areaValue &&\r\n areaValue > 0 &&\r\n areaValue <= 4000\r\n ) {\r\n //empty land with size of 10 Rai or less\r\n forStay = calcTypes.Land;\r\n }\r\n\r\n var forBusiness = calcTypes.SME;\r\n\r\n return {\r\n forStay,\r\n forBusiness,\r\n };\r\n }\r\n\r\n function getCalculatorSetting(data) {\r\n var setting = {};\r\n var settingRow;\r\n\r\n for (var i = 0; i < data.length; i++) {\r\n settingRow = data[i];\r\n\r\n setting[settingRow.Code] = settingRow.Value;\r\n }\r\n\r\n return setting;\r\n }\r\n\r\n function whenSetCookie(name, value) {\r\n // console.log(\"when set cookie\", cookies.Allow_Cookies)\r\n if (cookies.Allow_Cookies === \"N\" && false) {\r\n dispatch(\r\n searchResultDataChange({ field: \"Allow_Cookies\", value: false })\r\n );\r\n } else {\r\n setCookie(name, value, { path: \"/\" });\r\n }\r\n }\r\n\r\n window.openErrorPopup = openErrorPopup;\r\n\r\n function openErrorPopup(message) {\r\n $(\"#error-popup div div p\").html(message);\r\n $(\"#error-popup\").css({\r\n display: \"flex\",\r\n });\r\n }\r\n\r\n function closeErrorPopup() {\r\n $(\"#error-popup\").css({\r\n display: \"\",\r\n });\r\n }\r\n\r\n function liveChatClick() {\r\n window.dataLayer.push({\r\n event: \"facebook_event\",\r\n trigger_type: \"page view\",\r\n position: \"click live chat npa details\",\r\n fb_npa_list: fbNpaList,\r\n });\r\n }\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n {propertyDetail.isAuction ? (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n {propertyDetail.location}
\r\n\r\n
\r\n \r\n \r\n )}\r\n \r\n\r\n \r\n
\r\n ไอเดียแต่งห้องด้วย AI
\r\n {/*ด้วย AI room generator
*/}\r\n\r\n {/* //contact-mobile-wrapper */}\r\n {propertyDetail.isAuction ? (\r\n \r\n ลงทะเบียนเข้าร่วมประมูล\r\n \r\n ) : (\r\n \r\n เสนอราคาซื้อ\r\n \r\n )}\r\n \r\n ติดต่อเจ้าหน้าที่/นัดหมายเข้าชมทรัพย์\r\n \r\n
\r\n\r\n \r\n {/*
\r\n\r\n \r\n
*/}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n ข้อมูลทรัพย์สิน
\r\n\r\n liveChatClick()}\r\n className=\"btn-chat px-getUTMXParams\"\r\n >\r\n \r\n Live Chat\r\n \r\n
\r\n \r\n
\r\n\r\n {/* */}\r\n \r\n
\r\n\r\n {/* */}\r\n \r\n dropleadDataChange(\"usertype\", \"ju\")}\r\n >\r\n \r\n \r\n
\r\n ติดต่อเจ้าหน้าที่/นัดหมายเข้าชมทรัพย์
\r\n\r\n กรุณากรอกข้อมูลเพื่อให้เจ้าหน้าที่ติดต่อกลับ\r\n
\r\n\r\n dropleadDataChange(\"usertype\", \"normal\")}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {dropleadDetail.usertype.value === \"ju\" && (\r\n
\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n )}\r\n \r\n {\r\n e.preventDefault();\r\n dropleadDataChange(\r\n \"consentCheck\",\r\n !dropleadDetail.consentCheck.value\r\n );\r\n }}\r\n >\r\n \r\n \r\n สนใจสินเชื่อทรัพย์มือสอง\r\n \r\n
\r\n \r\n \r\n ถัดไป\r\n \r\n
\r\n \r\n \r\n This site is protected by reCAPTCHA
\r\n and the Google \r\n Privacy Policy\r\n and Terms of Service apply.\r\n \r\n
\r\n \r\n and the Google \r\n Privacy Policy\r\n and Terms of Service apply.\r\n \r\n
\r\n {dropleadDetail.usertype.value === \"ju\" &&\r\n !hasCustomerInfo && (\r\n
\r\n \r\n
\r\n )}\r\n\r\n {dropleadDetail.usertype.value === \"normal\" && (\r\n \r\n {!hasCustomerInfo && (\r\n <>\r\n
\r\n )}\r\n \r\n \r\n ส่งข้อมูล\r\n \r\n
\r\n \r\n \r\n \r\n ย้อนกลับ\r\n \r\n
\r\n \r\n \r\n ลงทะเบียนเข้าร่วมประมูล\r\n \r\n
\r\n ) : (\r\n สนใจประมูลทรัพย์สิน
\r\n\r\n ดูรายละเอียดเพิ่มเติม\r\n
\r\n \r\n {enableOfferLink ? (\r\n <>\r\n \r\n เสนอราคาซื้อ\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n การเสนอซื้อราคาซื้อทรัพย์สิน\r\n
\r\n อยู่ระหว่างการปรับปรุงระบบ\r\n \r\n
\r\n \r\n และจะเปิดให้ทำรายการอีกครั้ง\r\n
\r\n วันที่{\" \"}\r\n {moment(closePageEndTime).locale(\"th\").format(\"LLL\")} น.\r\n \r\n \r\n )}\r\n
\r\n )}\r\n \r\n \r\n เสนอราคาซื้อทรัพย์สิน
\r\n\r\n อยู่ระหว่างการปรับปรุงระบบ\r\n \r\n
\r\n \r\n และจะเปิดให้ทำรายการอีกครั้ง\r\n
\r\n วันที่{\" \"}\r\n {moment(closePageEndTime).locale(\"th\").format(\"LLL\")} น.\r\n \r\n \r\n )}\r\n
\r\n {/* */}\r\n \r\n ติดต่อเจ้าหน้าที่/นัดหมายเข้าชมทรัพย์\r\n \r\n liveChatClick()}\r\n className=\"btn-main btn-other chat px-getUTMXParams\"\r\n data-kbct=\"chatbox\"\r\n data-kblb=\"line_chat\"\r\n data-kbgp=\"contact\"\r\n data-kbid={propertyDetail.PropertyID}\r\n >\r\n \r\n \r\n \r\n
\r\n )}\r\n\r\n {/* \r\n \r\n
*/}\r\n\r\n {/* */}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n ![\"Gallery\"](\"/SiteCollectionDocuments/assets/PFS2022/pages/detail/img/gallery-1.jpg\")
\r\n
\r\n \r\n \r\n ![\"Gallery\"](\"/SiteCollectionDocuments/assets/PFS2022/pages/detail/img/gallery-2.jpg\")
\r\n
\r\n \r\n \r\n ![\"Gallery\"](\"/SiteCollectionDocuments/assets/PFS2022/pages/detail/img/gallery-3.jpg\")
\r\n
\r\n \r\n \r\n \r\n ติดต่อเจ้าหน้าที่ /
\r\n \r\n
\r\n \r\n ติดต่อเจ้าหน้าที่ /
นัดหมายเข้าชมทรัพย์\r\n
\r\n \r\n
\r\n {/* */}\r\n กรุณากรอกข้อมูลเพื่อให้เจ้าหน้าที่ติดต่อกลับ
\r\n\r\n dropleadDataChange(\"usertype\", \"ju\")}\r\n >\r\n \r\n \r\n
\r\n \r\n dropleadDataChange(\"usertype\", \"normal\")}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {dropleadDetail.usertype.value === \"ju\" && (\r\n
\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n )}\r\n \r\n {\r\n e.preventDefault();\r\n dropleadDataChange(\r\n \"consentCheck\",\r\n !dropleadDetail.consentCheck.value\r\n );\r\n }}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n ถัดไป\r\n \r\n
\r\n \r\n \r\n This site is protected by reCAPTCHA
\r\n and the Google Privacy Policy and{\" \"}\r\n Terms of Service apply.\r\n \r\n
\r\n \r\n\r\n {/* */}\r\n \r\n and the Google Privacy Policy and{\" \"}\r\n Terms of Service apply.\r\n \r\n
\r\n {dropleadDetail.usertype.value === \"ju\" && !hasCustomerInfo && (\r\n
\r\n \r\n \r\n \r\n\r\n {/* */}\r\n \r\n
\r\n )}\r\n\r\n {dropleadDetail.usertype.value === \"normal\" && (\r\n \r\n {!hasCustomerInfo && (\r\n <>\r\n
\r\n )}\r\n \r\n \r\n ส่งข้อมูล\r\n \r\n
\r\n \r\n \r\n \r\n ย้อนกลับ\r\n \r\n
\r\n \r\n
\r\n\r\n {/* */}\r\n \r\n
\r\n \r\n \r\n
\r\n ต้องการยืนยันการเสนอซื้อ
\r\n\r\n \r\n ยกเลิก\r\n \r\n \r\n ยืนยัน\r\n \r\n
\r\n \r\n \r\n
\r\n ตัวเลือกเพิ่มเติม
\r\n\r\n \r\n
\r\n \r\n \r\n\r\n {/* */}\r\n \r\n \r\n
\r\n สินเชื่อ\r\n \r\n\r\n \r\n \r\n \r\n
\r\n ทรัพย์ถูกใจ\r\n \r\n \r\n \r\n
\r\n คำนวณ\r\n \r\n สินเชื่อ\r\n \r\n
\r\n \r\n
\r\n ส่งต่อให้เพื่อน\r\n \r\n \r\n \r\n
\r\n พิมพ์\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst SuggestPart = () => {\r\n const [suggestProperty] = useSelector((state) => [\r\n state.property.searchResult.suggestProperty,\r\n ]);\r\n\r\n function htmlEntities(s) {\r\n return s.replace(/[\\u00A0-\\u9999<>\\&]/gim, function (i) {\r\n return \"&#\" + i.charCodeAt(0) + \";\";\r\n });\r\n }\r\n\r\n if (!suggestProperty.list || suggestProperty.list.length === 0) {\r\n return <>;\r\n }\r\n\r\n return (\r\n <>\r\n \r\n closeErrorPopup()}\r\n className=\"more-filter-btn error\"\r\n >\r\n
\r\n \r\n
\r\n \r\n ภาระหนี้ที่ระบุต้องไม่เกิน 108,100 บาท หรือเพิ่มรายได้ต่อเดือน\r\n
\r\nทรัพย์ใกล้เคียง
\r\n\r\n
\r\n ธนาคาร\", fieldName: \"propertybank\", group: \"assetTypes\" },\r\n propertywaitsale: { value: false, code: \"npl\", name: \"ทรัพย์
ฝากขาย\", fieldName: \"propertywaitsale\", group: \"assetTypes\" },\r\n partnership: { value: false, code: \"partner\", name: \"ทรัพย์
ผู้ขาย\", fieldName: \"partnership\", group: \"assetTypes\", spanText: \"(บุคคลภายนอก)\" },\r\n },\r\n expand: { value: \"\", fieldName: \"expand\" },\r\n },\r\n searchResult: {\r\n keyword: { value: \"\", fieldName: \"keyword\" },\r\n resultLength: { value: 0, fieldName: \"resultLength\" },\r\n Allow_Cookies: { value: true, fieldName: \"Allow_Cookies\" },\r\n showTab: { value: \"newProperty\", fieldName: \"showTab\" },\r\n newProperty: { value: \"\", fieldName: \"newProperty\", list: [], pageIndex: 1, hasMore: true, isLoading: false, TotalRows: 0 },\r\n promoProperty: { value: \"\", fieldName: \"promoProperty\", list: [], pageIndex: 1, hasMore: true, isLoading: false, TotalRows: 0 },\r\n popularProperty: { value: \"\", fieldName: \"popularProperty\", list: [], pageIndex: 1, hasMore: true, isLoading: false, TotalRows: 0 },\r\n favoriteProperty: { value: \"\", fieldName: \"favoriteProperty\", list: [], pageIndex: 1, hasMore: true, isLoading: false, favoritePropertyList: [], TotalRows: 0 },\r\n recentlyviewedProperty: { value: \"\", fieldName: \"recentlyviewedProperty\", list: [], pageIndex: 1, hasMore: true, isLoading: false, TotalRows: 0 },\r\n suggestProperty: { value: \"\", fieldName: \"suggestProperty\", list: [], pageIndex: 1, hasMore: true, isLoading: false },\r\n },\r\n propertyDetail: {\r\n AssetInfoTH: \"\",\r\n AddressNoTH: \"\",\r\n BuildingTH: \"\",\r\n FloorTH: \"\",\r\n VillageTH: \"\",\r\n SoiTH: \"\",\r\n RoadTH: \"\",\r\n TambonName: \"\",\r\n AmphurName: \"\",\r\n ProvinceName: \"\",\r\n location: \"\",\r\n PropertyTypeName: \"\",\r\n Bedroom: \"\",\r\n Bathroom: \"\",\r\n CarParking: \"\",\r\n SellPrice: \"\",\r\n PromotionPrice: \"\",\r\n AdjustPrice: \"\",\r\n PromotionName: \"\",\r\n PromotionRemark: \"\",\r\n PropertyIDFormat: \"\",\r\n PropertyID: \"\",\r\n Area: \"\",\r\n AreaValue: \"\",\r\n UseableArea: \"\",\r\n ShowAreaValue: \"\",\r\n ShowUseableArea: \"\",\r\n PropertyMediaes: [],\r\n GAScore: \"\",\r\n Like: \"\",\r\n IsNew: \"\",\r\n CategoryGroup:\"\",\r\n CategoryDetail: \"\",\r\n AIImg: [],\r\n \r\n // AssetInfoTH: { value: \"\", fieldName: \"AssetInfoTH\" },\r\n // AddressNoTH: { value: \"\", fieldName: \"AddressNoTH\" },\r\n // BuildingTH: { value: \"\", fieldName: \"BuildingTH\" },\r\n // FloorTH: { value: \"\", fieldName: \"FloorTH\" },\r\n // VillageTH: { value: \"\", fieldName: \"VillageTH\" },\r\n // SoiTH: { value: \"\", fieldName: \"SoiTH\" },\r\n // RoadTH: { value: \"\", fieldName: \"RoadTH\" },\r\n // TambonName: { value: \"\", fieldName: \"TambonName\" },\r\n // AmphurName: { value: \"\", fieldName: \"AmphurName\" },\r\n // ProvinceName: { value: \"\", fieldName: \"ProvinceName\" },\r\n // location: { value: \"\", fieldName: \"location\" },\r\n // PropertyTypeName: { value: \"\", fieldName: \"PropertyTypeName\" },\r\n // Bedroom: { value: \"\", fieldName: \"Bedroom\" },\r\n // Bathroom: { value: \"\", fieldName: \"Bathroom\" },\r\n // SellPrice: { value: \"\", fieldName: \"SellPrice\" },\r\n // PromotionPrice: { value: \"\", fieldName: \"PromotionPrice\" },\r\n // AdjustPrice: { value: \"\", fieldName: \"AdjustPrice\" },\r\n // PromotionName: { value: \"\", fieldName: \"PromotionName\" },\r\n // PromotionRemark: { value: \"\", fieldName: \"PromotionRemark\" },\r\n // PropertyIDFormat: { value: \"\", fieldName: \"PropertyIDFormat\" },\r\n // PropertyID: { value: \"\", fieldName: \"PropertyID\" },\r\n // Area: { value: \"\", fieldName: \"Area\" },\r\n // AreaValue: { value: \"\", fieldName: \"AreaValue\" },\r\n // UseableArea: { value: \"\", fieldName: \"UseableArea\" },\r\n // PropertyMediaes: { value: \"\", fieldName: \"PropertyMediaes\" },\r\n // GAScore: { value: \"\", fieldName: \"GAScore\" },\r\n // Like: { value: false, fieldName: \"Like\" },\r\n },\r\n dropleadDetail: {\r\n usertype: { value: 'normal' },\r\n juJuristicId: { value: '', required: true, errorMessage: '', fieldName: 'juJuristicId', label: 'เลขที่นิติบุคคล', placeholder: \"กรุณากรอกเลขที่นิติบุคคล*\", maxLength: 250, inputmode: \"numeric\" },\r\n juFirstName: { value: '', required: true, errorMessage: '', fieldName: 'juFirstName', label: 'ชื่อ', placeholder: \"กรุณากรอกชื่อ*\", maxLength: 250 },\r\n juLastName: { value: '', required: true, errorMessage: '', fieldName: 'juLastName', label: 'นามสกุล', placeholder: \"กรุณากรอกนามสกุล*\", maxLength: 250 },\r\n\r\n phone: { value: '', required: true, errorMessage: '', fieldName: 'phone', label: 'เบอร์มือถือ', placeholder: \"กรุณากรอกเบอร์มือถือ*\", maxLength: 10, inputmode: \"numeric\" },\r\n confirmphone: { value: '', required: true, errorMessage: '', fieldName: 'confirmphone', label: 'ยืนยันเบอร์มือถือ', placeholder: \"กรุณายืนยันเบอร์มือถือ*\", maxLength: 10, inputmode: \"numeric\" },\r\n\r\n naCitizenId: { value: '', required: true, errorMessage: '', fieldName: 'naCitizenId', label: 'เลขบัตรประชาชน', placeholder: \"กรุณากรอกเลขบัตรประชาชน*\", maxLength: 13, inputmode: \"numeric\" },\r\n\r\n email: { value: '', required: true, errorMessage: '', fieldName: 'email', label: 'อีเมล', placeholder: \"กรุณากรอกอีเมล*\", maxLength: 250 },\r\n consentCheck: { value: true, required: true, errorMessage: '', fieldName: 'consentCheck', label: 'สนใจสินเชื่อทรัพย์มือสอง', placeholder: \"0\" },\r\n\r\n juCompanyName: { value: '', required: true, errorMessage: '', fieldName: 'juCompanyName', label: 'ชื่อบริษัท', placeholder: \"ชื่อบริษัท*\", maxLength: 500 },\r\n naFirstName: { value: '', required: true, errorMessage: '', fieldName: 'naFirstName', label: 'ชื่อ', placeholder: \"ชื่อ*\", maxLength: 250 },\r\n naLastName: { value: '', required: true, errorMessage: '', fieldName: 'naLastName', label: 'นามสกุล', placeholder: \"นามสกุล*\", maxLength: 250 },\r\n naCareer: {\r\n value: '', required: true, errorMessage: '', fieldName: 'naCareer', label: 'อาชีพ', placeholder: \"อาชีพ*\",\r\n option: [\r\n ]\r\n },\r\n naSalary: { value: '', required: true, errorMessage: '', fieldName: 'naSalary', label: 'รายได้ต่อเดือน', placeholder: \"รายได้ต่อเดือน*\", maxLength: 250, inputmode: \"numeric\" },\r\n\r\n availableTime: {\r\n value: '', required: true, errorMessage: '', fieldName: 'availableTime', label: 'ช่วงเวลาที่สะดวกให้ติดต่อกลับ', placeholder: \"ช่วงเวลาที่สะดวกให้ติดต่อกลับ*\",\r\n option: [\r\n ]\r\n },\r\n },\r\n calcDetail: {\r\n propertyTypeID: { value: null },\r\n decoration: { value: null },\r\n definedPropertyPrice: { value: 0 },\r\n appraisalPrice: { value: 0 },\r\n calcTypes: {\r\n Home: 'Home Loan',\r\n Land: 'Land',\r\n SME: 'SME'\r\n },\r\n appliedCalcTypes: {\r\n value: {\r\n forStay: null,\r\n forBusiness: null,\r\n },\r\n },\r\n smePropertyType: { value: null },\r\n calculatorHomeLoanSetting: { value: 0, fieldName: \"calculatorHomeLoanSetting\" },\r\n calculatorLandSetting: { value: 0, fieldName: \"calculatorLandSetting\" },\r\n calculatorSMESetting: { value: 0, fieldName: \"calculatorSMESetting\" },\r\n\r\n stayTotalInstallmentPerMonth: { value: 0 },\r\n stayTotalLimitAmount: { value: 0 },\r\n stayInstallmentYear: { value: 0, maxLength: 2, maxDigit: 2, maxValue: 0, errorMessage: '', note: '' },\r\n stayPropertyLimitAmount: { value: 0, maxLength: 11, maxDigit: 9, maxValue: 0, errorMessage: '' },\r\n stayPropertyInstallmentPerMonth: { value: 0 },\r\n stayDecorationLimitAmount: { value: 0, maxLength: 11, maxDigit: 9, maxValue: 0, errorMessage: '' },\r\n stayDecorationInstallmentPerMonth: { value: 0 },\r\n stayIncomePerMonth: { value: 0, maxLength: 11, maxDigit: 9, minValue: 7500, errorMessage: '' },\r\n stayDebtBurdenPerMonth: { value: 0, maxLength: 11, maxDigit: 9, errorMessage: '' },\r\n stayCanTakeDecoration: { value: true },\r\n\r\n businessTotalInstallmentPerMonth: { value: 0 },\r\n businessTotalLimitAmount: { value: 0 },\r\n businessInstallmentYear: { value: 0, maxLength: 2, maxValue: 0, errorMessage: '', note: '' },\r\n businessPropertyLimitAmount: { value: 0, maxLength: 11, maxDigit: 9, maxValue: 0, errorMessage: '' },\r\n businessPropertyInstallmentPerMonth: { value: 0 },\r\n businessDecorationLimitAmount: { value: 0, maxLength: 11, maxDigit: 9, maxValue: 0, errorMessage: '' },\r\n businessDecorationInstallmentPerMonth: { value: 0 },\r\n businessIncomePerMonth: { value: 0, maxLength: 11, maxDigit: 9, errorMessage: '' },\r\n businessDebtBurdenPerMonth: { value: 0, maxLength: 11, maxDigit: 9, errorMessage: '' },\r\n\r\n stayValidateFields: { value: [] },\r\n businessValidateFields: { value: [] },\r\n\r\n // calcType: { value: '' },\r\n // price: { value: '', required: true, errorMessage: '', fieldName: 'price', label: 'ราคาทรัพย์/ราคาเสนอซื้อ (บาท)', placeholder: \"0\" },\r\n // income: { value: '', required: true, errorMessage: '', fieldName: 'income', label: 'รายได้ต่อเดือน (บาท) ตั้งแต่ 7,500 บาท ขึ้นไป', placeholder: \"0\" },\r\n // dept: { value: '', required: false, errorMessage: '', fieldName: 'dept', label: 'ภาระหนี้ต่อเดือน (บาท)', placeholder: \"0\" },\r\n // age: { value: '', required: true, errorMessage: '', fieldName: 'age', label: 'อายุผู้กู้ (ปี)', placeholder: \"0\", maxLength: 2 },\r\n // profit: { value: '', required: true, errorMessage: '', fieldName: 'profit', label: 'กำไรสุทธิต่อเดือน (บาท)', placeholder: \"0\" },\r\n // career: {\r\n // value: '', required: true, errorMessage: '', fieldName: 'career', label: 'อาชีพ', placeholder: \"เลือกอาชีพ\",\r\n // option: [\r\n // { text: 'พนักงานประจำ', value: 'employee' },\r\n // { text: 'เจ้าของกิจการ', value: 'business_owner' }\r\n // ]\r\n\r\n // },\r\n // home: {\r\n // value: '', required: true, errorMessage: '', fieldName: 'home', label: 'เลือกการกู้บ้านหลังที่', placeholder: \"เลือกการกู้บ้านหลังที่\",\r\n // option: [\r\n // { text: 'บ้านหลังที่ 1', value: 'home1' },\r\n // { text: 'บ้านหลังที่ 2 (ผ่อนหลังที่ 1 มาแล้วไม่ถึง 2 ปี)', value: 'home2_with_home1_lessthan_2years' },\r\n // { text: 'บ้านหลังที่ 2 (ผ่อนหลังที่ 1 มาแล้วตั้งแต่ 2 ปี ขึ้นไป)', value: 'home2_with_home1_2years_or_more' },\r\n // { text: 'บ้านหลังที่ 3 เป็นต้นไป', value: 'home3_or_else' },\r\n // ]\r\n\r\n // },\r\n // land: {\r\n // value: '', required: true, errorMessage: '', fieldName: 'land', label: 'เป็นการกู้ซื้อทรัพย์ชิ้นที่', placeholder: \"เลือกการกู้ซื้อทรัพย์ชิ้นที่\",\r\n // option: [\r\n // { text: 'ทรัพย์ชิ้นที่ 1 (ไม่มีภาระสินเชื่อบ้านขณะนี้)', value: 'home1' },\r\n // { text: 'ทรัพย์ชิ้นที่ 2 (ผ่อนหลังที่ 1 มาแล้วไม่ถึง 2 ปี)', value: 'home2_with_home1_lessthan_2years' },\r\n // { text: 'ทรัพย์ชิ้นที่ 2 (ผ่อนหลังที่ 1 มาแล้วตั้งแต่ 2 ปีขึ้นไป)', value: 'home2_with_home1_2years_or_more' },\r\n // { text: 'ทรัพย์ชิ้นที่ 3 เป็นต้นไป', value: 'home3_or_else' },\r\n // ]\r\n\r\n // },\r\n // personType: {\r\n // value: '', required: true, errorMessage: '', fieldName: 'personType', label: 'กู้ในนาม', placeholder: \"เลือกกู้ในนาม\",\r\n // option: [\r\n // { text: 'บุคคลธรรมดา', value: 'natural' },\r\n // { text: 'นิติบุคคล', value: 'juristic' },\r\n // ]\r\n\r\n // },\r\n // businessAge: {\r\n // value: '', required: true, errorMessage: '', fieldName: 'businessAge', label: 'ระยะเวลาดำเนินธุรกิจ(ปี)', placeholder: \"เลือกระยะเวลาดำเนินธุรกิจ\",\r\n // option: [\r\n // { text: 'น้อยกว่า 6 เดือน', value: 'less_than_6m' },\r\n // { text: '6 เดือน แต่ไม่ถึง 1 ปี', value: '6m_to_1y' },\r\n // { text: '1-3 ปี', value: '1y_to_3y' },\r\n // { text: 'มากกว่า 3 ปี', value: 'greater_than_3y' },\r\n // ]\r\n\r\n // },\r\n // loanAmount: { value: \"\", fieldName: \"loanAmount\", min: 0, max: 11, from: 0, step: 1, count: 0 },\r\n // loanPeriod: { value: \"\", fieldName: \"loanPeriod\", min: 0, max: 11, from: 0, step: 1, count: 0 },\r\n // maxLimitResult: { value: 0, fieldName: \"maxLimitResult\" },\r\n // installmentResult: { value: 0, fieldName: \"installmentResult\" },\r\n },\r\n loading: null,\r\n },\r\n reducers: {\r\n searchDataChange: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n\r\n state.searchFilter[field].value = value;\r\n },\r\n searchListChange: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n\r\n state.searchFilter[field].value = \"\";\r\n state.searchFilter[field].option = value;\r\n },\r\n searchIonRangeChange: (state, action) => {\r\n const field = action.payload.fieldName;\r\n const value = action.payload.value;\r\n const from = action.payload.from;\r\n const to = action.payload.to;\r\n\r\n state.searchFilter[field].value = value;\r\n state.searchFilter[field].from = state.searchFilter[field].values.indexOf(from);\r\n if (to === \"MAX\") {\r\n state.searchFilter[field].to = state.searchFilter[field].max;\r\n }\r\n else {\r\n state.searchFilter[field].to = state.searchFilter[field].values.indexOf(to);\r\n }\r\n },\r\n searchIonRangeListChange: (state, action) => {\r\n const field = action.payload.fieldName;\r\n const value = action.payload.value;\r\n\r\n state.searchFilter[field].values = value;\r\n },\r\n updateIonRange: (state, action) => {\r\n const field = action.payload.fieldName;\r\n\r\n state.searchFilter[field].count += 1;\r\n },\r\n CheckBoxChange: (state, action) => {\r\n const field = action.payload.fieldName;\r\n const value = action.payload.value;\r\n const group = action.payload.group;\r\n\r\n const groupLength = Object.keys(state.searchFilter[group]).length - 2\r\n\r\n state.searchFilter[group][field].value = value;\r\n\r\n const temp = Object.entries(state.searchFilter[group]).map((item) => {\r\n if (item[0] !== \"fieldName\" && item[0] !== \"value\" && item[1].value) {\r\n return item[1].code\r\n }\r\n }).filter(x => x);\r\n\r\n state.searchFilter[group].value = temp.length === groupLength ? \"\" : temp.join(',');\r\n\r\n },\r\n ClearSearch: (state, action) => {\r\n console.log(\"clear dis\")\r\n Object.keys(state.searchFilter).forEach(function (key) {\r\n if (key === \"bathroom\" || key === \"bedroom\") {\r\n state.searchFilter[key].value = 0\r\n } else if (key === \"order\") {\r\n // state.searchFilter[key].value = \"new\"\r\n } else {\r\n state.searchFilter[key].value = \"\"\r\n }\r\n });\r\n\r\n state.searchFilter.propertyType.housetype.value = false\r\n state.searchFilter.propertyType.land.value = false\r\n state.searchFilter.propertyType.townhouse.value = false\r\n state.searchFilter.propertyType.condo.value = false\r\n state.searchFilter.propertyType.commercialbuilding.value = false\r\n state.searchFilter.propertyType.warehouse.value = false\r\n state.searchFilter.propertyType.factory.value = false\r\n state.searchFilter.propertyType.apartment.value = false\r\n state.searchFilter.propertyType.office.value = false\r\n state.searchFilter.propertyType.resort.value = false\r\n state.searchFilter.propertyType.houseother.value = false\r\n\r\n state.searchFilter.assetTypes.propertybank.value = false\r\n state.searchFilter.assetTypes.propertywaitsale.value = false\r\n state.searchFilter.assetTypes.partnership.value = false\r\n\r\n state.searchFilter.rangePrice.from = 0\r\n state.searchFilter.rangePrice.to = 0\r\n state.searchFilter.rangePrice.count += 1\r\n state.searchFilter.areaRange.from = 0\r\n state.searchFilter.areaRange.to = 0\r\n state.searchFilter.areaRange.count += 1\r\n state.searchFilter.useableAreaRange.from = 0\r\n state.searchFilter.useableAreaRange.to = 0\r\n state.searchFilter.useableAreaRange.count += 1\r\n\r\n },\r\n updateSearchResultList: (state, action) => {\r\n const field = action.payload.fieldName;\r\n const list = action.payload.list;\r\n const hasMore = action.payload.hasMore;\r\n const TotalRows = action.payload.TotalRows;\r\n const suggest = action.payload.suggest;\r\n\r\n state.searchResult[field].list = list\r\n state.searchResult[field].hasMore = hasMore\r\n state.searchResult[field].TotalRows = TotalRows\r\n state.searchResult[field].suggest = suggest\r\n },\r\n likePropertyList: (state, action) => {\r\n let PropertyObjTemp = action.payload.PropertyObj;\r\n const PropertyID = PropertyObjTemp.PropertyID\r\n const listName = action.payload.listName;\r\n\r\n const like = PropertyObjTemp.like ? false : true\r\n\r\n let likeList = state.searchResult.favoriteProperty.value.split(',')\r\n\r\n if (like && !likeList.includes(PropertyID)) {\r\n state.searchResult.favoriteProperty.value = [...likeList, PropertyID].filter(x => x).join(',')\r\n\r\n } else if (!like && likeList.includes(PropertyID)) {\r\n state.searchResult.favoriteProperty.value = likeList.filter(x => x !== PropertyID).join(',')\r\n }\r\n\r\n var target = state.searchResult[listName].list.find(x => x.PropertyID === PropertyID)\r\n if (target) target.like = like\r\n\r\n\r\n // const PropertyObj = { ...PropertyObjTemp, like: like }\r\n\r\n // var target = state.searchResult.newProperty.list.find(x => x.PropertyID === PropertyID)\r\n // if (target) target.like = like\r\n // target = state.searchResult.promoProperty.list.find(x => x.PropertyID === PropertyID)\r\n // if (target) target.like = like\r\n // target = state.searchResult.popularProperty.list.find(x => x.PropertyID === PropertyID)\r\n // if (target) target.like = like\r\n // target = state.searchResult.recentlyviewedProperty.list.find(x => x.PropertyID === PropertyID)\r\n // if (target) target.like = like\r\n\r\n // // var target = state.searchResult[listName].list.find(x => x.PropertyID === PropertyID)\r\n // // if(target)target.like = like\r\n\r\n\r\n // if (like && !state.searchResult.favoriteProperty.list.find(x => x.PropertyID === PropertyID)) {\r\n // state.searchResult.favoriteProperty.list.push(PropertyObj)\r\n // } else if (!like) {\r\n // state.searchResult.favoriteProperty.list = state.searchResult.favoriteProperty.list.filter(function (obj) {\r\n // return obj.PropertyID !== PropertyID;\r\n // });\r\n // }\r\n\r\n // state.searchResult.favoriteProperty.value = state.searchResult.favoriteProperty.list.map(x => x.PropertyID).join(',')\r\n },\r\n updateLikeInList: (state, action) => {\r\n const listName = action.payload.listName;\r\n const PropertyLikeList = action.payload.PropertyLikeList\r\n const targetList = state.searchResult[listName].list\r\n\r\n if (PropertyLikeList && targetList.length > 0) {\r\n const list = PropertyLikeList.split(',')\r\n Array.from(targetList, x => {\r\n if (list.includes(x.PropertyID)) {\r\n x.like = true\r\n } else {\r\n x.like = false\r\n }\r\n })\r\n }\r\n\r\n },\r\n updatesearchFilterCheckBox: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n\r\n state.searchFilter[field].value = value\r\n\r\n value.split(',').forEach((valueCode) => {\r\n let toUpdate = Object.keys(state.searchFilter[field]).find(x => state.searchFilter[field][x].code === valueCode)\r\n if (state.searchFilter[field][toUpdate]) {\r\n state.searchFilter[field][toUpdate].value = true\r\n }\r\n })\r\n\r\n Object.keys(state.searchFilter[field]).forEach((key) => {\r\n if (key !== \"fieldName\" && key !== \"value\" && state.searchFilter[field][key].code === value) {\r\n state.searchFilter[field][key].value = true\r\n }\r\n });\r\n },\r\n searchResultDataChange: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n\r\n state.searchResult[field].value = value;\r\n },\r\n OnPropertyListLoading: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n\r\n state.searchResult[field].isLoading = value;\r\n },\r\n searchResultPageIndexChange: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n\r\n state.searchResult[field].pageIndex = value;\r\n },\r\n updatePropertyDetail: (state, action) => {\r\n const value = action.payload.value;\r\n state.propertyDetail = value\r\n\r\n // Object.keys(value).forEach((key)=>{\r\n // if(state.propertyDetail[key]){\r\n // state.propertyDetail[key].value = value[key];\r\n // }\r\n // })\r\n },\r\n formsCalcDataChange: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n const maxValue = action.payload.maxValue;\r\n const minValue = action.payload.minValue;\r\n const errorMessage = action.payload.errorMessage;\r\n const visible = action.payload.visible;\r\n const note = action.payload.note;\r\n\r\n // if (state.calcDetail[field].maxLength) {\r\n // state.calcDetail[field].value = value.slice(0, state.calcDetail[field].maxLength);\r\n // } else {\r\n // state.calcDetail[field].value = value;\r\n // }\r\n\r\n if (value !== undefined) {\r\n state.calcDetail[field].value = value;\r\n }\r\n\r\n if (maxValue !== undefined) {\r\n state.calcDetail[field].maxValue = maxValue;\r\n }\r\n\r\n if (minValue !== undefined) {\r\n state.calcDetail[field].minValue = minValue;\r\n }\r\n\r\n if (errorMessage !== undefined) {\r\n state.calcDetail[field].errorMessage = errorMessage;\r\n }\r\n\r\n if (visible !== undefined) {\r\n state.calcDetail[field].visible = visible;\r\n }\r\n\r\n if (note !== undefined) {\r\n state.calcDetail[field].note = note;\r\n }\r\n },\r\n CalcValidateChange: (state, action) => {\r\n const field = action.payload.field;\r\n const errorMessage = action.payload.errorMessage;\r\n state.calcDetail[field].errorMessage = errorMessage;\r\n },\r\n formsCalcRangeInputChange: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n\r\n if (state.calcDetail[field].maxLength) {\r\n state.calcDetail[field].value = value.slice(0, state.calcDetail[field].maxLength);\r\n } else {\r\n state.calcDetail[field].value = value;\r\n }\r\n state.calcDetail[field].count += 1;\r\n },\r\n formsCalcPropsChange: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n\r\n state.calcDetail[field] = value;\r\n console.log(field, value)\r\n },\r\n formsDropleadDataChange: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n const errorMessage = action.payload.errorMessage;\r\n if (state.dropleadDetail[field].maxLength) {\r\n state.dropleadDetail[field].value = value.slice(0, state.dropleadDetail[field].maxLength);\r\n } else {\r\n state.dropleadDetail[field].value = value;\r\n }\r\n\r\n state.dropleadDetail[field].errorMessage = errorMessage;\r\n },\r\n DropleadValidateChange: (state, action) => {\r\n const field = action.payload.field;\r\n const errorMessage = action.payload.errorMessage;\r\n state.dropleadDetail[field].errorMessage = errorMessage;\r\n },\r\n DropleadListChange: (state, action) => {\r\n const field = action.payload.field;\r\n const value = action.payload.value;\r\n\r\n state.dropleadDetail[field].option = value;\r\n },\r\n },\r\n})\r\n\r\n// Action creators are generated for each case reducer function\r\nexport const { searchDataChange, searchListChange, searchIonRangeChange, searchIonRangeListChange, updateIonRange, CheckBoxChange, ClearSearch,\r\n updateSearchResultList, likePropertyList, updatesearchFilterCheckBox, searchResultDataChange, OnPropertyListLoading,\r\n updateLikeInList, searchResultPageIndexChange, updatePropertyDetail,\r\n formsCalcDataChange, CalcValidateChange, formsCalcRangeInputChange, formsCalcPropsChange,\r\n formsDropleadDataChange, DropleadValidateChange, DropleadListChange } = propertySlice.actions\r\n\r\nexport default propertySlice.reducer","import React, { useEffect } from \"react\";\r\nimport { COMPARE_STORE_CONTEXT } from \"./CompareStore\";\r\nimport classnames from \"classnames/bind\";\r\nimport { useObservableState } from \"./UseObservableState\";\r\n\r\nexport const CompareButton = (prop) => {\r\n const compareStore = React.useContext(COMPARE_STORE_CONTEXT);\r\n const isCompare = useObservableState(\r\n compareStore.isExistCompareProperty(prop)\r\n );\r\n\r\n function onAddCompareProperty() {\r\n compareStore.addCompareProperty(prop);\r\n }\r\n\r\n return (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const CompareButtonWithText = (prop) => {\r\n const compareStore = React.useContext(COMPARE_STORE_CONTEXT);\r\n const isCompare = useObservableState(\r\n compareStore.isExistCompareProperty(prop)\r\n );\r\n\r\n function onAddCompareProperty() {\r\n compareStore.addCompareProperty(prop);\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n // console.log(\"Desktop Search render\")\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n}, areEqual);\r\n\r\nfunction areEqual(prevProps, nextProps) {\r\n return areEqualObjValue(prevProps, nextProps);\r\n}\r\n\r\nexport const MobileSearch = React.memo((props) => {\r\n const searchFilter = props;\r\n const searchDataChange = props.searchDataChange;\r\n const IonRangeDataChange = props.IonRangeDataChange;\r\n const RangeInputDataChange = props.RangeInputDataChange;\r\n const OnRadioCheck = props.OnRadioCheck;\r\n const GoToSearch = props.GoToSearch;\r\n const ClearSearch = props.ClearSearch;\r\n const OnInputChange = props.OnInputChange;\r\n\r\n const renderCheckBox = (item, index) => {\r\n if (item[0] !== \"fieldName\" && item[0] !== \"value\") {\r\n const fieldName = item[0];\r\n const data = item[1];\r\n // console.log('item', fieldName, data,item[1]);\r\n // console.log(\"property-type-m\" + index)\r\n return (\r\n \r\n
\r\n\r\n ทรัพย์มือสองทำเลดี ทั่วไทย
\r\n \r\n\r\n
\r\n \r\n
\r\n ค้นหาอย่างละเอียด
\r\n\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {/*
\r\n \r\n
\r\n \r\n
*/}\r\n {Object.entries(searchFilter.assetTypes).map((item, index) =>\r\n renderAssetTypesCheckBox(item, index)\r\n )}\r\n ประเภททรัพย์
\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ทำเลที่ตั้ง
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n ช่วงราคา (บาท)
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n เนื้อที่ (ตร.ว.)
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n พื้นที่ใช้สอย (ตร.ม.)
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ห้องนอน
\r\n\r\n
\r\n ห้องน้ำ
\r\n\r\n
\r\n สถานีใกล้เคียง BTS/MRT
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n const renderAssetTypesCheckBox = (item, index) => {\r\n if (item[0] !== \"fieldName\" && item[0] !== \"value\") {\r\n const fieldName = item[0];\r\n const data = item[1];\r\n // console.log('item', fieldName, data,item[1]);\r\n // console.log(\"asset-type-m\" + index)\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n // console.log(\"mobileSearch render\")\r\n\r\n return (\r\n \r\n
\r\n );\r\n}, areEqual);\r\n\r\nexport const TabSearch = (props) => {\r\n const hideDesktop = props.hideDesktop;\r\n\r\n const priceTab = (priceFilter) => {\r\n priceFilter = priceFilter.map((x, index) => {\r\n const M = 1000000;\r\n const begin = x.start ? 0 : x.price * M;\r\n const end = x.start ? x.price * M : x.end ? 0 : x.price2 * M;\r\n const range = begin + (end === 0 ? \"\" : \",\" + end);\r\n\r\n return (\r\n \r\n );\r\n });\r\n\r\n return priceFilter;\r\n };\r\n\r\n const provinceTab = (provinceFilter) => {\r\n provinceFilter = provinceFilter.map((x, index) => {\r\n return (\r\n \r\n );\r\n });\r\n\r\n return provinceFilter;\r\n };\r\n\r\n const propertyTypeTab = (propertyTypeFilter) => {\r\n propertyTypeFilter = propertyTypeFilter.map((x, index) => {\r\n if (x.propertyTypeCode != \"19\") {\r\n return (\r\n \r\n \r\n
\r\n \r\n ค้นหาอย่างละเอียด\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n OnInputChange(\"keyword\", e.target.value)}\r\n onKeyPress={(e) => e.key === \"Enter\" && GoToSearch()}\r\n />\r\n
\r\n \r\n {Object.entries(searchFilter.assetTypes).map((item, index) =>\r\n renderAssetTypesCheckBox(item, index)\r\n )}\r\n
\r\n \r\n
\r\n ทำเลที่ตั้ง
\r\n\r\n
\r\n ประเภททรัพย์
\r\n\r\n
\r\n \r\n {Object.entries(searchFilter.propertyType).map((item, index) =>\r\n renderCheckBox(item, index)\r\n )}\r\n
\r\n \r\n \r\n
\r\n ช่วงราคา (บาท)
\r\n\r\n
\r\n เนื้อที่ (ตร.ว.)
\r\n\r\n
\r\n พื้นที่ใช้สอย (ตร.ม.)
\r\n\r\n
\r\n \r\n
\r\n ห้องนอน
\r\n\r\n
\r\n ห้องน้ำ
\r\n\r\n
\r\n สถานีใกล้เคียง BTS/MRT
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n });\r\n\r\n return propertyTypeFilter;\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n - \r\n
- \r\n
- \r\n
- \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {propertyTypeTab(propertyTypeFilter)}
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {provinceTab(provinceFilter)}
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport const PopUpSearch = React.memo((props) => {\r\n //Popup Addanve search\r\n const searchFilter = props;\r\n const OnInputChange = props.OnInputChange;\r\n const searchDataChange = props.searchDataChange;\r\n const IonRangeDataChange = props.IonRangeDataChange;\r\n const RangeInputDataChange = props.RangeInputDataChange;\r\n const OnRadioCheck = props.OnRadioCheck;\r\n const GoToSearch = props.GoToSearch;\r\n const ClearSearch = props.ClearSearch;\r\n\r\n const [rangeMin, setRangeMin] = useState(\"\");\r\n const [rangeMax, setRangeMax] = useState(\"\");\r\n const [areaMin, setAreaMin] = useState(\"\");\r\n const [areaMax, setAreaMax] = useState(\"\");\r\n const [useableAreaMin, setUseableAreaMin] = useState(\"\");\r\n const [useableAreaMax, setUseableAreaMax] = useState(\"\");\r\n\r\n// const [bedroom, setBedroom] = useState(\"\");\r\n// const [bathroom, setBathroom] = useState(\"\");\r\n\r\n const handleRadioChange = (type, value) => {\r\n if (type === \"bedroom\") {\r\n // setBedroom(value);\r\n OnInputChange(\"bedroom\", value)\r\n } else if (type === \"bathroom\") {\r\n // setBathroom(value);\r\n OnInputChange(\"bathroom\", value)\r\n }\r\n // Call any other function or logic you want here\r\n };\r\n\r\n const minMaxString = (min, max) => {\r\n console.log(min, max);\r\n if (!min && !max) {\r\n return \"\";\r\n } else if (!min) {\r\n return `0,${max}`;\r\n } else if (!max) {\r\n return min;\r\n } else {\r\n return `${min},${max}`;\r\n }\r\n };\r\n\r\n const onRangeChange = (field, value) => {\r\n if (field == \"min\") {\r\n setRangeMin(value);\r\n OnInputChange(\"rangeField\", minMaxString(value, rangeMax));\r\n } else {\r\n setRangeMax(value);\r\n OnInputChange(\"rangeField\", minMaxString(rangeMin, value));\r\n }\r\n };\r\n\r\n const onAreaChange = (field, value) => {\r\n if (field == \"min\") {\r\n setAreaMin(value);\r\n OnInputChange(\"areaField\", minMaxString(value, areaMax));\r\n } else {\r\n setAreaMax(value);\r\n OnInputChange(\"areaField\", minMaxString(areaMin, value));\r\n }\r\n };\r\n\r\n const onUseableAreaChange = (field, value) => {\r\n if (field == \"min\") {\r\n setUseableAreaMin(value);\r\n OnInputChange(\"useableAreaField\", minMaxString(value, useableAreaMax));\r\n } else {\r\n setUseableAreaMax(value);\r\n OnInputChange(\"useableAreaField\", minMaxString(useableAreaMin, value));\r\n }\r\n };\r\n\r\n const handleClearSearch = () => {\r\n setRangeMin(\"\");\r\n setRangeMax(\"\");\r\n setAreaMin(\"\");\r\n setAreaMax(\"\");\r\n setUseableAreaMin(\"\");\r\n setUseableAreaMax(\"\");\r\n ClearSearch();\r\n };\r\n\r\n const renderCheckBox = (item, index) => {\r\n if (item[0] !== \"fieldName\" && item[0] !== \"value\") {\r\n const fieldName = item[0];\r\n const data = item[1];\r\n // console.log('item', fieldName, data,item[1]);\r\n // console.log(\"property-type-m\" + index)\r\n return (\r\n \r\n
\r\n \r\n {priceTab(priceFilter)}
\r\n \r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n const renderAssetTypesCheckBox = (item, index) => {\r\n if (item[0] !== \"fieldName\" && item[0] !== \"value\") {\r\n const fieldName = item[0];\r\n const data = item[1];\r\n // console.log('item', fieldName, data,item[1]);\r\n // console.log(\"asset-type-m\" + index)\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n );\r\n}, areEqual);\r\n","import React, { useEffect } from \"react\";\r\nimport Config from \"config\";\r\n\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\n\r\nimport { DeskTopSearch, MobileSearch, TabSearch, PopUpSearch } from \"./SearchHeader\";\r\nimport {\r\n searchDataChange,\r\n searchIonRangeChange,\r\n searchListChange,\r\n updateIonRange,\r\n CheckBoxChange,\r\n ClearSearch,\r\n} from \"../stores/propertySlice\";\r\nimport {\r\n gotoSearchPage,\r\n getApiDataAsync,\r\n areEqualObjValue,\r\n valueRangeMaxMin,\r\n commonSearchDataChange,\r\n} from \"./Common\";\r\nimport province from \"province\";\r\n\r\nconst pagesLink = Config.pagesLink;\r\nconst $ = window.$;\r\n\r\nexport const HeaderNav = (props) => {\r\n const Body = (props) => {\r\n let searchBtn;\r\n if (false && props.searchBtn) {\r\n searchBtn = (\r\n \r\n
\r\n \r\n
\r\n ค้นหาอย่างละเอียด
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n OnInputChange(\"keyword\", e.target.value)}\r\n onKeyPress={(e) => e.key === \"Enter\" && GoToSearch()}\r\n />\r\n \r\n
\r\n \r\n {Object.entries(searchFilter.assetTypes).map((item, index) =>\r\n renderAssetTypesCheckBox(item, index)\r\n )}\r\n
\r\n \r\n
\r\n ทำเลที่ตั้ง
\r\n\r\n
\r\n ประเภททรัพย์
\r\n\r\n
\r\n \r\n {Object.entries(searchFilter.propertyType).map((item, index) =>\r\n renderCheckBox(item, index)\r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n ช่วงราคา
\r\n\r\n onRangeChange(\"min\", e.target.value)}\r\n />\r\n -\r\n onRangeChange(\"max\", e.target.value)}\r\n />\r\n
\r\n \r\n
\r\n เนื้อที่
\r\n\r\n onAreaChange(\"min\", e.target.value)}\r\n />\r\n -\r\n onAreaChange(\"max\", e.target.value)}\r\n />\r\n
\r\n \r\n
\r\n พื้นที่ใช้สอย
\r\n\r\n onUseableAreaChange(\"min\", e.target.value)}\r\n />\r\n -\r\n onUseableAreaChange(\"max\", e.target.value)}\r\n />\r\n
\r\n \r\n
\r\n\r\n ห้องนอน
\r\n\r\n
\r\n \r\n handleRadioChange(\"bedroom\", \"1\")}\r\n checked={searchFilter.bedroom.value === \"1\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bedroom\", \"2\")}\r\n checked={searchFilter.bedroom.value === \"2\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bedroom\", \"3\")}\r\n checked={searchFilter.bedroom.value === \"3\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bedroom\", \"4\")}\r\n checked={searchFilter.bedroom.value === \"4\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bedroom\", \"5\")}\r\n checked={searchFilter.bedroom.value === \"5\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bedroom\", \"\")}\r\n checked={searchFilter.bedroom.value === \"\"}\r\n />\r\n \r\n
\r\n \r\n
\r\n ห้องน้ำ
\r\n\r\n
\r\n \r\n handleRadioChange(\"bathroom\", \"1\")}\r\n checked={searchFilter.bathroom.value === \"1\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bathroom\", \"2\")}\r\n checked={searchFilter.bathroom.value === \"2\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bathroom\", \"3\")}\r\n checked={searchFilter.bathroom.value === \"3\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bathroom\", \"4\")}\r\n checked={searchFilter.bathroom.value === \"4\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bathroom\", \"5\")}\r\n checked={searchFilter.bathroom.value === \"5\"}\r\n />\r\n \r\n
\r\n \r\n handleRadioChange(\"bathroom\", \"\")}\r\n checked={searchFilter.bathroom.value === \"\"}\r\n />\r\n \r\n
\r\n \r\n \r\n ค้นหาทรัพย์\r\n \r\n \r\n \r\n ล้างการค้นหา\r\n \r\n
\r\n \r\n {/*
\r\n );\r\n useEffect(() => {\r\n $(\".open-search\").on(\"click\", function () {\r\n $(\".close-search\").removeClass(\"d-none\");\r\n $(\".open-search\").addClass(\"d-none\");\r\n $(\"#search-wrapper\").removeClass(\"d-none\");\r\n $(\"#property-tab-search\").removeClass(\"d-none\");\r\n // var galleryContainerPos = document.querySelector(\".gallery-container\").getBoundingClientRect().bottom;\r\n // if (galleryContainerPos <= 0) {\r\n // $(\"#header-placeholder\").height($(\"#header\").height());\r\n // }\r\n $(\"#header\").addClass(\"fixed\");\r\n // $(\"#icw\").append(\r\n // ''\r\n // );\r\n $(\"body\").css({\r\n height: \"100%\",\r\n overflow: \"hidden\",\r\n position: \"relative\",\r\n touchAction: \"none\",\r\n \"-ms-touch-action\": \"none\",\r\n });\r\n });\r\n\r\n $(\".close-search\").on(\"click\", function () {\r\n var scrollPos = $(window).scrollTop();\r\n $(\".close-search\").addClass(\"d-none\");\r\n $(\".open-search\").removeClass(\"d-none\");\r\n $(\"#search-wrapper\").addClass(\"d-none\");\r\n $(\"#property-tab-search\").addClass(\"d-none\");\r\n\r\n if (scrollPos <= 0) {\r\n $(\"#header\").removeClass(\"fixed\");\r\n }\r\n $(\"#more-filter-desktop\").height(0);\r\n $(\"#header-placeholder\").height(0);\r\n $(\".more-filter-btn.close\").css({ display: \"\" });\r\n $(\".more-filter-btn.desktop\").css({ display: \"\" });\r\n $(\"#backdrop\").remove();\r\n $(\"body\").css({\r\n height: \"auto\",\r\n overflow: \"auto\",\r\n position: \"initial\",\r\n touchAction: \"auto\",\r\n \"-ms-touch-action\": \"auto\",\r\n });\r\n $(\"#icw #header\").css({\r\n height: \"\",\r\n overflow: \"\",\r\n });\r\n });\r\n }, []);\r\n } else {\r\n searchBtn = (\r\n \r\n \r\n ![\"Search\"/](\"/SiteCollectionDocuments/assets/PFS2022/theme/img/icon/search.svg\")
\r\n \r\n {/* \r\n */}\r\n \r\n
\r\n );\r\n // useEffect(() => {\r\n // $(\".open-search\").on(\"click\", function () {\r\n // $(\".search-section\").removeClass(\"d-none\");\r\n\r\n // // $(\"#header-placeholder\").height($(\"#header\").height());\r\n // $(\"#inner-header-placeholder\").height(0);\r\n // $(\"#inner-header\").removeClass(\"fixed\");\r\n // $(\"#header\").addClass(\"fixed\");\r\n // $(\".open-search\").addClass(\"d-none\");\r\n // $(\".close-search\").removeClass(\"d-none\");\r\n\r\n // // $(\"#icw\").append(\r\n // // ''\r\n // // );\r\n // $(\"body\").css({\r\n // height: \"100%\",\r\n // overflow: \"hidden\",\r\n // position: \"relative\",\r\n // touchAction: \"none\",\r\n // \"-ms-touch-action\": \"none\",\r\n // });\r\n // });\r\n\r\n // $(\".close-search\").on(\"click\", function () {\r\n // $(\".search-section\").addClass(\"d-none\")\r\n\r\n // $(\"#inner-header-placeholder\").height($(\"#inner-header\").height());\r\n // // $(\"#header-placeholder\").height(0);\r\n // $(\"#inner-header\").addClass(\"fixed\");\r\n // $(\"#header\").removeClass(\"fixed\");\r\n // $(\".open-search\").removeClass(\"d-none\");\r\n // $(\".close-search\").addClass(\"d-none\");\r\n\r\n // $(\"#backdrop\").remove();\r\n // $(\"body\").css({\r\n // height: \"auto\",\r\n // overflow: \"auto\",\r\n // position: \"initial\",\r\n // touchAction: \"auto\",\r\n // \"-ms-touch-action\": \"auto\",\r\n // });\r\n\r\n // // Close more filter on desktop\r\n // if (window.innerWidth >= 1025) {\r\n // $(\"#icw #header\").css({\r\n // backgroundImage: \"\",\r\n // // padding: 0,\r\n // height: \"\",\r\n // overflow: \"hidden\",\r\n // });\r\n\r\n // $(\"#more-filter-desktop\").animate({ height: 0 });\r\n // $(\".more-filter-btn.close\").css({ display: \"\" });\r\n // $(\".more-filter-btn.desktop\").css({ display: \"\" });\r\n // }\r\n // });\r\n // }, []);\r\n }\r\n\r\n useEffect(() => {\r\n $('link[href*=\"/_catalogs/masterpage/KWeb2016/assets/css/style-en.css\"]').attr('disabled', 'disabled');\r\n }, []);\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {/* \r\n */}\r\n \r\n \r\n
\r\n - \r\n
- \r\n ค้นหาทรัพย์สิน\r\n \r\n
- \r\n โปรโมชัน\r\n \r\n
- \r\n วิธีเสนอซื้อทรัพย์สิน\r\n \r\n
- \r\n บทความแนะนำ \r\n \r\n
- \r\n \r\n ตัวแทนขาย\r\n \r\n \r\n
- \r\n
- \r\n
- \r\n
\r\n
\r\n \r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const MobileNav = () => {\r\n useEffect(() => {\r\n //ทราบจำนวนคลิกในส่วน header\r\n document.querySelectorAll(\"#mobile-menu > div.offcanvas-body > ul\").forEach(function (item) {\r\n item.addEventListener(\"click\", function (e) {\r\n window.dataLayer.push({\r\n event: \"track_event\",\r\n event_category: \"header\",\r\n event_action: \"click\",\r\n event_label: e.target.innerText,\r\n });\r\n });\r\n });\r\n }, []);\r\n return (\r\n \r\n
\r\n - \r\n
- \r\n ค้นหาทรัพย์สิน\r\n \r\n
- \r\n โปรโมชัน\r\n \r\n
- \r\n วิธีเสนอซื้อทรัพย์สิน\r\n \r\n
- \r\n บทความแนะนำ \r\n \r\n
- \r\n \r\n ตัวแทนขาย\r\n \r\n \r\n
- \r\n
- \r\n
- \r\n
- \r\n
\r\n
\r\n {/* \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n กรุณาเลือกอย่างน้อย 2 รายการ เพื่อทำการเปรียบเทียบ\r\n \r\n เปรียบเทียบทรัพย์
\r\n \r\n ({comparePropertyLength}/5)\r\n \r\n\r\n \r\n \r\n เปรียบเทียบ\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n เปรียบเทียบ\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nconst GenerateCard = (prop) => {\r\n const compareStore = React.useContext(COMPARE_STORE_CONTEXT);\r\n\r\n const propertyName = getPropertyName(prop);\r\n const propertyImage = getPropertyImage(prop);\r\n\r\n function onRemoveCompareProperty() {\r\n compareStore.removeCompareProperty(prop);\r\n }\r\n\r\n return Object.keys(prop).length === 0 ? (\r\n \r\n \r\n {comparePropertyList?.map((item) => (\r\n
\r\n \r\n \r\n
\r\n เพิ่มทรัพย์
\r\n \r\n ) : (\r\n \r\n
\r\n );\r\n};\r\n","import classNames from \"classnames/bind\";\r\nimport React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { COMPARE_STORE_CONTEXT } from \"./CompareStore\";\r\nimport { Comparision } from \"./Comparision\";\r\nimport { useObservableState } from \"./UseObservableState\";\r\nimport \"./FloatingCompareButton.css\";\r\n\r\nexport const FloatingCompareButton = () => {\r\n const compareStore = React.useContext(COMPARE_STORE_CONTEXT);\r\n const comparePropertyLength = useObservableState(\r\n compareStore.comparePropertyLength$\r\n );\r\n\r\n window.setCompareProperty = setCompareGlobal;\r\n\r\n function setCompareGlobal(prop) {\r\n compareStore.addCompareProperty(prop)\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {\r\n currentTarget.onerror = null; // prevents looping\r\n currentTarget.src = defaultThumbnailURL;\r\n }}\r\n alt={propertyName}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n currentTarget.onerror = null; // prevents looping\r\n currentTarget.src = defaultThumbnailURL;\r\n }}\r\n alt={propertyName}\r\n />\r\n
\r\n \r\n
\r\n {propertyName}
\r\n \r\n \r\n
\r\n {`${prop.AmphurName} ${prop.ProvinceName}`}
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n {addCommas(\r\n prop.PromotionPrice ? prop.PromotionPrice : prop.SellPrice\r\n )}\r\n \r\n บาท\r\n
\r\n {prop.PromotionPrice && (\r\n {addCommas(prop.SellPrice)}
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {comparePropertyLength}
\r\n \r\n\r\n
\r\n ) : (\r\n \r\n {/*
\r\n \r\n \r\n {props.favoritePropertyValue.split(\",\").filter((x) => x).length !== 0 && (\r\n \r\n {props.favoritePropertyValue.split(\",\").filter((x) => x).length}\r\n \r\n )}\r\n ทรัพย์ถูกใจ\r\n {props.favoritePropertyValue.split(\",\").filter((x) => x).length !== 0 && (\r\n \r\n {props.favoritePropertyValue.split(\",\").filter((x) => x).length}\r\n \r\n )}\r\n
\r\n \r\n \r\n ตั้งค่าทรัพย์ตรงใจ\r\n
\r\n \r\n \r\n ดูล่าสุด\r\n
*/}\r\n \r\n \r\n \r\n หน้าหลัก\r\n
\r\n \r\n \r\n \r\n \r\n {props.favoritePropertyValue.split(\",\").filter((x) => x).length !== 0 && (\r\n \r\n {props.favoritePropertyValue.split(\",\").filter((x) => x).length}\r\n \r\n )}\r\n ทรัพย์ถูกใจ\r\n {props.favoritePropertyValue.split(\",\").filter((x) => x).length !== 0 && (\r\n \r\n {props.favoritePropertyValue.split(\",\").filter((x) => x).length}\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n โปรโมชัน\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n หน้าหลัก\r\n
\r\n \r\n \r\n \r\n \r\n {likeCount !== 0 && {likeCount}}\r\n ทรัพย์ถูกใจ\r\n {likeCount !== 0 && {likeCount}}\r\n
\r\n \r\n \r\n \r\n \r\n โปรโมชัน\r\n
\r\n \r\n {/* \r\n \r\n ตั้งค่าทรัพย์ตรงใจ\r\n
\r\n \r\n \r\n {likeCount !== 0 && {likeCount}}\r\n ทรัพย์ถูกใจ\r\n {likeCount !== 0 && {likeCount}}\r\n
\r\n \r\n \r\n ดูล่าสุด\r\n
*/}\r\n \r\n
\r\n ค้นหาทรัพย์ขายทอดตลาด บ้านหลุดจำนองราคาพิเศษ
\r\n\r\n ค้นหาทรัพย์ที่ถูกใจได้ง่ายๆ ทรัพย์รอการขายกสิกรไทยที่คัดสรรทรัพย์ขายทอดตลาดจากทั่วประเทศ\r\n คัด คุ้ม ครบ เช่น
\r\n
\r\n โปรโมชันทรัพย์สินรอการขาย ธนาคารกสิกรไทย
\r\n\r\n เลือกหาทรัพย์ที่ถูกใจ ในราคาพิเศษแบบ คัด คุ้ม ครบ กับโปรโมชันทรัพย์สินรอการขายจาก\r\n ธนาคารกสิกรไทย เช่น
*/}\r\n
*/}\r\n ทรัพย์สินรอการขาย ทรัพย์ธนาคารกสิกรไทย
\r\n\r\n รวมทรัพย์รอการขายยอดนิยม ทรัพย์ธนาคารราคาพิเศษ เช่น