\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","import { createSlice } from '@reduxjs/toolkit'\r\n\r\nexport const propertySlice = createSlice({\r\n name: \"counter\",\r\n initialState: {\r\n searchFilter: {\r\n keyword: { value: \"\", fieldName: \"keyword\" },\r\n\r\n province: {\r\n value: \"\", fieldName: \"province\", placeholderSearch: \"ชื่อจังหวัด\", placeholder: \"จังหวัด\", clearOption: true,\r\n option: []\r\n },\r\n district: {\r\n value: \"\", fieldName: \"district\", placeholderSearch: \"ชื่อเขต/อำเภอ\", placeholder: \"เขต/อำเภอ\", clearOption: true,\r\n option: []\r\n },\r\n subDistrict: {\r\n value: \"\", fieldName: \"subDistrict\", placeholderSearch: \"ชื่อแขวง/ตำบล\", placeholder: \"แขวง/ตำบล\", clearOption: true,\r\n option: []\r\n },\r\n station: {\r\n value: \"\", fieldName: \"station\", placeholderSearch: \"ชื่อสถานี\", placeholder: \"เลือกสถานีใกล้เคียง\", clearOption: true,\r\n option: []\r\n },\r\n\r\n order: {\r\n value: \"hot\", fieldName: \"order\", minimumResultsForSearch: -1, notShowEmptyOption: true, option: [\r\n { text: \"ทรัพย์ยอดนิยม\", value: \"hot\" },\r\n { text: \"ทรัพย์มาใหม่\", value: \"new\" },\r\n { text: \"ราคา (น้อย-มาก)\", value: \"min-max\" },\r\n { text: \"ราคา (มาก-น้อย)\", value: \"max-min\" },\r\n { text: \"พื้นที่ (น้อย-มาก)\", value: \"min-max-area\" },\r\n { text: \"พื้นที่ (มาก-น้อย)\", value: \"max-min-area\" },\r\n ]\r\n },\r\n\r\n propertyType: {\r\n value: \"\", fieldName: \"propertyType\",\r\n housetype: { value: false, code: \"02\", name: \"บ้านเดี่ยว\", fieldName: \"housetype\", group: \"propertyType\" },\r\n land: { value: false, code: \"01\", name: \"ที่ดิน\", fieldName: \"land\", group: \"propertyType\" },\r\n townhouse: { value: false, code: \"03\", name: \"ทาวน์เฮ้าส์\", fieldName: \"townhouse\", group: \"propertyType\" },\r\n condo: { value: false, code: \"05\", name: \"คอนโดมิเนียม\", fieldName: \"condo\", group: \"propertyType\" },\r\n commercialbuilding: { value: false, code: \"04\", name: \"อาคารพาณิชย์\", fieldName: \"commercialbuilding\", group: \"propertyType\" },\r\n warehouse: { value: false, code: \"12\", name: \"โกดัง\", fieldName: \"warehouse\", group: \"propertyType\" },\r\n factory: { value: false, code: \"09\", name: \"โรงงาน\", fieldName: \"factory\", group: \"propertyType\" },\r\n apartment: { value: false, code: \"15\", name: \"อพาร์ทเม้นท์\", fieldName: \"apartment\", group: \"propertyType\" },\r\n office: { value: false, code: \"10\", name: \"อาคารสำนักงาน\", fieldName: \"office\", group: \"propertyType\" },\r\n resort: { value: false, code: \"20\", name: \"รีสอร์ท\", fieldName: \"resort\", group: \"propertyType\" },\r\n houseother: { value: false, code: \"19\", name: \"อื่น ๆ\", fieldName: \"houseother\", group: \"propertyType\" },\r\n },\r\n rangePrice: {\r\n value: \"\", fieldName: \"rangePrice\", min: 0, max: 11, from: 0, from_value: 0, to: 0, to_value: 0, step: 1, count: 0, placeholder: \"ราคาเริ่มต้น - สิ้นสุด\",\r\n values: [\r\n \"ไม่ระบุ\", \"1 ล้านบาท\", \"3 ล้านบาท\", \"5 ล้านบาท\", \"10 ล้านบาท\", \"20 ล้านบาท\", \"50 ล้านบาท\"\r\n ]\r\n },\r\n areaRange: {\r\n value: \"\", fieldName: \"areaRange\", min: 0, max: 8, from: 0, to: 0, step: 50, count: 0, placeholder: \"เนื้อที่เริ่มต้น - สิ้นสุด\",\r\n values: [\r\n \"ไม่ระบุ\", \"50 ตร.ว.\", \"100 ตร.ว.\", \"200 ตร.ว.\", \"300 ตร.ว.\", \"1 ไร่\", \"5 ไร่\", \"10 ไร่\", \"50 ไร่\"\r\n ]\r\n },\r\n useableAreaRange: {\r\n value: \"\", fieldName: \"useableAreaRange\", min: 0, max: 150, from: 0, to: 0, step: 50, count: 0, placeholder: \"พื้นที่เริ่มต้น - สิ้นสุด\",\r\n values: [\r\n \"ไม่ระบุ\", \"30 ตร.ม.\", \"50 ตร.ม.\", \"100 ตร.ม.\", \"200 ตร.ม.\", \"500 ตร.ม.\",\r\n ]\r\n },\r\n rangeField: {value: \"\", fieldName: \"rangePrice\"},\r\n areaField: {value: \"\", fieldName: \"areaRange\"},\r\n useableAreaField: {value: \"\", fieldName: \"useableAreaRange\"},\r\n bedroom: { value: 0, min: 0, max: 99, fieldName: \"bedroom\" },\r\n bathroom: { value: 0, min: 0, max: 99, fieldName: \"bathroom\" },\r\n assetTypes: {\r\n value: \"\", fieldName: \"assetTypes\",\r\n // PromotionProperties: { value: false, code: \"PromotionProperties\", name: \"บ้านเดี่ยว\", fieldName: \"PromotionProperties\" }, // fieldName is icon classname\r\n propertybank: { value: false, code: \"kbank\", name: \"ทรัพย์
ธนาคาร\", 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
\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 รวมทรัพย์รอการขายยอดนิยม ทรัพย์ธนาคารราคาพิเศษ เช่น