{"version":3,"sources":["components/WorkshopCard/style.tsx","assets/img/placeholder/workshop_card.png","components/WorkshopCard/index.tsx","pages/HomePage/style.tsx","pages/HomePage/index.tsx"],"names":["CardStyle","Styled","div","WorkshopCard","name_id","distance","id","image","name","address","phoneNo","operatingHours","listView","todayDay","moment","format","toLowerCase","todayOperatingHour","find","operatingHour","day","includes","className","to","style","width","padding","src","WorkshopPlaceholder","pathname","textDecoration","locate","phone","clock","time","HomeContainer","HomePage","useGeolocated","positionOptions","enableHighAccuracy","userDecisionTimeout","coords","isGeolocationEnabled","clickRef","useRef","scrollY","useScrollPosition","search","useLocation","useState","workshops","setWorkshops","currentPage","setCurrentPage","lastPage","setLastPage","hasTimeout","setHasTimeout","doneFirstLoad","setDoneFirstLoad","reqHeaders","setReqHeaders","activeSort","setActiveSort","showModal","setShowModal","isChecked","setIsChecked","setListView","isLoading","setIsLoading","loadingWidth","setLoadingWidth","loadingHeight","setLoadingHeight","loadMore","setLoadMore","handleSpinnerSize","window","innerWidth","useEffect","addEventListener","Workshop","telephone","getWorkshops","queryParams","URLSearchParams","location","typeId","get","distanceId","productName","params","sort_by","latitude","longitude","headers","APIV2Service","API","workshop","then","res","data","meta","current_page","last_page","catch","error","console","log","finally","Object","keys","length","cachedLocation","sessionStorage","getItem","fetchLocation","getLocationByCoords","country","state","city","timeout","setTimeout","clearTimeout","JSON","parse","handleModalOutsideClick","e","current","contains","target","closeModal","document","removeEventListener","currentWorkshops","bottom","Math","ceil","innerHeight","documentElement","scrollHeight","page","map","item","push","handleScroll","PageLayout","onClick","ArrowDown","alt","preventDefault","ref","CheckboxChecked","Checkbox","GridViewIconNormal","GridViewIconRed","ListViewIconRed","ListViewIconNormal","color","height","index","distance_radius","image_url","phone_number","operating_hours"],"mappings":"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","file":"static/js/8.e5dd0c48.chunk.js","sourcesContent":["import Styled from 'styled-components';\r\n\r\nconst CardStyle = Styled.div`\r\n    width: 100%;\r\n    position: relative;\r\n\r\n    .recent-distance {\r\n        width: fit-content;\r\n        padding: 2px 8px;\r\n        margin-bottom: 7.5px;\r\n        border-radius: 15px;\r\n        height: fit-content;\r\n        background-color: red;\r\n\r\n        h2 {\r\n            font-family: 'Montserrat';\r\n            font-style: normal;\r\n            font-weight: 500;\r\n            font-size: 10px;\r\n            line-height: 12px;\r\n            text-align: center;\r\n            color: #FFFFFF;\r\n            margin: 0;\r\n        }\r\n    }\r\n\r\n    h3 {\r\n        font-family: 'Montserrat';\r\n        font-style: normal;\r\n        font-weight: 700;\r\n        font-size: 14px;\r\n        line-height: 17px;\r\n        color: #00529B;\r\n        white-space: pre-wrap;      /* Webkit */    \r\n        white-space: -moz-pre-wrap; /* Firefox */     \r\n        white-space: -pre-wrap;     /* Opera <7 */    \r\n        white-space: -o-pre-wrap;   /* Opera 7 */     \r\n        word-wrap: break-word; \r\n    }\r\n\r\n    .recent-text {\r\n        max-width: 300px;\r\n        \r\n        img {\r\n            width: 12px;\r\n            height: 12px;\r\n        }\r\n\r\n        p {\r\n            font-family: 'Montserrat';\r\n            font-style: normal;\r\n            font-weight: 500;\r\n            font-size: 10px;\r\n            line-height: 12px;\r\n            margin-left: 5px;\r\n            padding: 0;\r\n            color: #343434;\r\n            margin-bottom: 0.5rem;\r\n            white-space: pre-wrap;      /* Webkit */    \r\n            white-space: -moz-pre-wrap; /* Firefox */     \r\n            white-space: -pre-wrap;     /* Opera <7 */    \r\n            white-space: -o-pre-wrap;   /* Opera 7 */     \r\n            word-wrap: break-word; \r\n            width: 100%\r\n        }\r\n    }\r\n    \r\n    .recent-image {\r\n        width: 100%;\r\n        height: 91px;\r\n\r\n        img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            border-radius: 15px;\r\n        }\r\n    }\r\n\r\n    .list-view {\r\n        justify-content: center;\r\n        padding-left: auto; \r\n\r\n    }\r\n\r\n    .has-distance, .grid-margin {\r\n        margin-top: 10px;\r\n    }\r\n\r\n    @media screen and (min-width: 576px) {\r\n        .recent-image {\r\n            height: 142px;\r\n        }\r\n    }\r\n\r\n    @media screen and (min-width: 768px) {\r\n        .recent-distance {\r\n            border-radius: 20px;\r\n            h2 {\r\n                font-size: 14px;\r\n                line-height: 17px;\r\n            }\r\n        }\r\n\r\n        h3 {\r\n            font-size: 18px;\r\n            line-height: 22px;\r\n        }\r\n\r\n        .recent-text {\r\n            max-width: 400px;\r\n\r\n            img {\r\n                margin-top: 2px;\r\n                width: 15px;\r\n                height: 15px;\r\n            }\r\n\r\n            p {\r\n                font-size: 16px;\r\n                line-height: 20px;  \r\n                margin-bottom: 0.7rem;\r\n            }\r\n        }\r\n        \r\n        .recent-image {\r\n            height: 192px;\r\n\r\n            img {\r\n                border-radius: 20px;\r\n            }\r\n        }\r\n\r\n        .list-view {\r\n            padding-left: 30px; \r\n        }\r\n    }\r\n\r\n    @media screen and (min-width: 992px) {\r\n        .has-distance, .grid-margin {\r\n            margin-top: 25px;\r\n        }\r\n\r\n        .recent-image {\r\n            height: 243px;\r\n        }\r\n\r\n        .list-view {\r\n            justify-content: flex-start;\r\n            padding-left: 50px; \r\n        }\r\n    }\r\n\r\n    media screen and (min-width: 1400px) {\r\n    }\r\n          \r\n`\r\n\r\nexport {CardStyle};","export default __webpack_public_path__ + \"static/media/workshop_card.fff51eeb.png\";","import React from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { CardStyle } from './style';\r\n\r\n// Assets\r\nimport WorkshopPlaceholder from 'assets/img/placeholder/workshop_card.png';\r\nimport locate from 'assets/img/locate.svg';\r\nimport phone from 'assets/img/phone.svg';\r\nimport clock from 'assets/img/clock.svg';\r\nimport moment from 'moment';\r\n\r\ninterface WorkshopCardType {\r\n    name_id: string;\r\n    id: number;\r\n    distance: string;\r\n    image: string;\r\n    name: string;\r\n    address: string;\r\n    phoneNo: string;\r\n    operatingHours: [];\r\n    listView?: boolean;\r\n}\r\n\r\nconst WorkshopCard = ({\r\n    name_id,\r\n    id,\r\n    distance,\r\n    image,\r\n    name,\r\n    address,\r\n    phoneNo,\r\n    operatingHours,\r\n    listView,\r\n}: WorkshopCardType): JSX.Element => {\r\n    const todayDay = moment().format('ddd').toLowerCase();\r\n\r\n    const todayOperatingHour: any = operatingHours.find((operatingHour: any) => {\r\n        if (operatingHour && operatingHour.day.toLowerCase().includes(todayDay)) {\r\n            return operatingHour;\r\n        }\r\n\r\n        return null;\r\n    });\r\n\r\n    return (\r\n        <CardStyle>\r\n            <div className=\"row\">\r\n                {distance && (\r\n                    <div className=\"col-12\">\r\n                        <div className=\"recent-distance\">\r\n                            <h2>{distance} KM away</h2>\r\n                        </div>\r\n                    </div>\r\n                )}\r\n                <div className={'p-0 ' + (listView ? 'col-5 col-lg-4' : 'col-12')}>\r\n                    <div\r\n                        className={\r\n                            'd-flex flex-column align-items-start ' +\r\n                            (listView ? 'justify-content-center' : 'justify-content-start')\r\n                        }\r\n                    >\r\n                        <Link to={'/workshop/' + name_id} style={{ width: '100%', padding: '0 12px' }}>\r\n                            <div className=\"recent-image\">\r\n                                <img src={image ? image : WorkshopPlaceholder}></img>\r\n                            </div>\r\n                        </Link>\r\n                    </div>\r\n                </div>\r\n                <div\r\n                    className={(listView ? 'col-7 col-lg-8' : 'col-12 grid-margin') + (distance ? ' has-distance' : '')}\r\n                >\r\n                    <div\r\n                        className={\r\n                            'h-100 d-flex flex-column justify-content-center justify-content-lg-start ' +\r\n                            (listView ? 'list-view' : '')\r\n                        }\r\n                    >\r\n                        <Link to={{ pathname: '/workshop/' + name_id }} style={{ textDecoration: 'none' }} >\r\n                            <h3>{name}</h3>\r\n                        </Link>\r\n\r\n                        {address && (\r\n                            <div className=\"recent-text d-flex align-items-start\">\r\n                                <img src={locate} />\r\n                                <p>{address}</p>\r\n                            </div>\r\n                        )}\r\n                        {phoneNo && (\r\n                            <div className=\"recent-text d-flex align-items-start\">\r\n                                <img src={phone} />\r\n                                <p>{phoneNo}</p>\r\n                            </div>\r\n                        )}\r\n                        {todayOperatingHour && (\r\n                            <div className=\"recent-text d-flex align-items-start\">\r\n                                <img src={clock} />\r\n                                <div className=\"d-flex flex-column flex-md-row flex-wrap justify-content-between justify-content-md-start w-100\">\r\n                                    {todayOperatingHour.day && <p className=\"mb-0 me-md-4\">{todayOperatingHour.day}</p>}\r\n                                    {todayOperatingHour.time && <p className=\"mb-0\">{todayOperatingHour.time}</p>}\r\n                                </div>\r\n                            </div>\r\n                        )}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </CardStyle >\r\n    );\r\n};\r\n\r\nexport default WorkshopCard;\r\n","import Styled from 'styled-components';\r\n\r\nconst HomeContainer = Styled.div`\r\n    background-color: #FFFFFF;\r\n    padding: 30px 20px 80px;\r\n    min-height: 100vh;\r\n    \r\n    hr {\r\n        height: 1px;\r\n    }\r\n\r\n    .title-container {\r\n        margin-bottom: 15px;\r\n\r\n        h2 {\r\n            font-family: 'Montserrat';\r\n            font-style: normal;\r\n            font-weight: 700;   \r\n            font-size: 25px;\r\n            line-height: 30px;\r\n            color: #343434;\r\n        }\r\n    }\r\n\r\n    .filter-section {\r\n        margin-top: 15px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n\r\n        .sorting-container {\r\n            display: flex;\r\n            align-items: center;\r\n            flex-wrap: wrap;\r\n\r\n            .sorting-title {\r\n                font-family: 'Montserrat';\r\n                font-style: normal;\r\n                font-weight: 400;\r\n                font-size: 14px;\r\n                line-height: 17px;\r\n                color: #343434;\r\n                width: 100%;\r\n                margin-bottom: 17px;\r\n            }\r\n\r\n            .button-list {\r\n                display: flex;\r\n                align-items: center;\r\n\r\n                .sorting-option {\r\n                    background-color: #FFFFFF;\r\n                    border: 0.5px solid #343434;\r\n                    border-radius: 30px;\r\n                    padding: 2px 6px;\r\n                    margin-right: 8px;\r\n    \r\n                    font-family: 'Montserrat';\r\n                    font-style: normal;\r\n                    font-weight: 500;\r\n                    font-size: 12px;\r\n                    line-height: 14px;\r\n                    text-align: center;\r\n                    cursor: pointer;\r\n                    color: #343434;\r\n\r\n                }\r\n\r\n                .sorting-option.active {\r\n                    background-color: #E30613 !important;\r\n                    color: #FFFFFF !important;\r\n                    border: none !important;\r\n                }\r\n            }\r\n\r\n            .vertical-line {\r\n                display: none;\r\n            }\r\n\r\n            .open-now-button {\r\n                position: relative;\r\n                display: flex;\r\n                justify-content: center;\r\n                border: 0.5px solid #343434;\r\n                border-radius: 30px;\r\n                padding: 2px 8px;\r\n                cursor: pointer;   \r\n                margin: 10px 30px 0 0; \r\n\r\n                span {\r\n                    font-family: 'Montserrat';\r\n                    font-style: normal;\r\n                    font-weight: 500;\r\n                    font-size: 12px;\r\n                    line-height: 14px;\r\n                    text-align: center;\r\n                    \r\n                    color: #343434; \r\n                    margin-right: 3px;\r\n                }\r\n\r\n                .arrow-down-icon {\r\n                    width: 11px;\r\n                    display: flex;\r\n                    justify-content: center;\r\n                    align-items: center;\r\n\r\n                    img {\r\n                        width: 100%;\r\n                    }\r\n                }\r\n\r\n                .operating-modal {\r\n                    position: absolute;\r\n                    bottom: -45px;\r\n                    right: -80px;\r\n                    width: 141px;\r\n                    height: 36px;\r\n                    background: #FFFFFF;\r\n                    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);\r\n                    border-radius: 15px;\r\n                    z-index: 99;\r\n\r\n                    align-items: center;\r\n                    padding: 0 12px;\r\n                    cursor: auto;\r\n\r\n                    font-family: 'Montserrat';\r\n                    font-style: normal;\r\n                    font-weight: 500;\r\n                    font-size: 14px;\r\n                    line-height: 17px;\r\n                    color: #343434;\r\n\r\n                    .checkbox-icon {\r\n                        width: 21px;\r\n                        background: #FFFFFF;\r\n                        cursor: pointer;\r\n                        margin-right: 12px;\r\n\r\n                        img {\r\n                            width: 100%;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }   \r\n    }\r\n\r\n    .view-container {\r\n        margin-right: 0;\r\n\r\n        .icon-container {\r\n            width: 17px;\r\n            margin-left: 15px;\r\n            cursor: pointer;\r\n\r\n            img {\r\n                width: 100%;\r\n            }\r\n        }\r\n    }\r\n\r\n    .content-section {\r\n        margin-top: 30px;\r\n\r\n        .content-title {\r\n            font-family: 'Montserrat';\r\n            font-style: normal;\r\n            font-weight: 700;\r\n            font-size: 20px;\r\n            line-height: 24px;\r\n            color: #000000;\r\n            opacity: 0.9;\r\n        }\r\n\r\n        .title-line {\r\n            width: 190px;\r\n            margin: 15px 0;\r\n            border-top: 4px solid #000000;\r\n            opacity: 0.9;\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .content-list {\r\n            flex-wrap: wrap;\r\n            margin-top: 15px;\r\n\r\n            .workshop-item {\r\n                margin-bottom: 30px;\r\n            }\r\n        }\r\n    }\r\n\r\n    .empty-container {\r\n        height: 700px;\r\n        width: 100%;\r\n        display: flex;\r\n        justify-content: center;\r\n        padding-top: 80px;\r\n\r\n        .nofound-text {\r\n            font-family: 'Montserrat';\r\n            font-style: normal;\r\n            font-weight: 700;\r\n            font-size: 18px;\r\n            line-height: 22px;\r\n            color: #343434;\r\n        }\r\n    }\r\n\r\n    .loading-container {\r\n        width: 100%;\r\n        justify-content: center;\r\n    }\r\n\r\n    @media only screen and (min-width: 305px) {\r\n        .filter-section {\r\n            .sorting-container {\r\n                .vertical-line {\r\n                    display: inline;\r\n                    margin: 0 auto;\r\n                    height: 23px;\r\n                    border-left: 1px solid #A9A9A9;\r\n                }\r\n\r\n                .open-now-button {  \r\n                    margin: 0; \r\n\r\n                    .operating-modal {\r\n                        right: 0;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @media only screen and (min-width: 400px) {\r\n        .filter-section {\r\n            .sorting-container {\r\n                .button-list {\r\n                    .sorting-option {\r\n                        padding: 3px 8px;\r\n        \r\n                        font-size: 14px;\r\n                        line-height: 17px;\r\n                    }\r\n                }\r\n\r\n                .vertical-line {\r\n                    margin: 0 1rem;\r\n                    height: 23px;\r\n                }\r\n\r\n                .open-now-button {\r\n                    padding: 3px 10px; \r\n\r\n                    span {\r\n                        font-size: 14px;\r\n                        line-height: 17px;\r\n                        margin-right: 5px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    @media only screen and (min-width: 768px) {\r\n        padding: 70px 30px 100px;\r\n\r\n        .title-container {\r\n            margin-bottom: 30px;\r\n    \r\n            h2 {   \r\n                font-size: 40px;\r\n                line-height: 49px;\r\n            }\r\n        }\r\n\r\n        .filter-section {\r\n            margin-top: 40px;\r\n\r\n            .sorting-container {\r\n                .sorting-title {\r\n                    font-size: 18px;\r\n                    line-height: 22px;\r\n                    width: auto;\r\n                    margin-bottom: 0;\r\n                }\r\n\r\n                .button-list {\r\n                    margin-left: 10px; \r\n\r\n                    .sorting-option {\r\n                        padding: 5px 10px;\r\n                        margin-right: 10px;\r\n        \r\n                        font-size: 18px;\r\n                        line-height: 22px;\r\n                    }\r\n                }\r\n\r\n                .vertical-line {\r\n                    margin: 0 2rem;\r\n                    height: 30px;\r\n                }\r\n\r\n                .open-now-button {\r\n                    padding: 5px 25px;\r\n\r\n                    span {\r\n                        font-size: 18px;\r\n                        line-height: 22px;\r\n                        margin-right: 10px;\r\n                    }\r\n\r\n                    .arrow-down-icon {\r\n                        width: 14px;\r\n                    }\r\n                    \r\n                    .operating-modal {\r\n                        bottom: -55px;\r\n                        right: -30px;\r\n                        width: 161px;\r\n                        height: 47px;\r\n                        padding: 0 15px;\r\n                        font-size: 18px;\r\n                        line-height: 22px;\r\n\r\n                        .checkbox-icon {\r\n                            margin-right: 10px;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .view-container {\r\n            margin-right: 0;\r\n\r\n            .icon-container {\r\n                width: 23px;\r\n                margin-left: 30px;\r\n            }\r\n        }\r\n\r\n        .content-section {\r\n            margin-top: 60px;\r\n\r\n            .content-title {\r\n                font-size: 30px;\r\n                line-height: 37px;\r\n            }\r\n\r\n            .title-line {\r\n                width: 250px;\r\n                margin: 20px 0;\r\n                border-radius: 5px;\r\n            }\r\n\r\n            .content-list {\r\n                margin-top: 40px;\r\n\r\n                .workshop-item {\r\n                    padding: 0 25px;\r\n                    margin-bottom: 50px;\r\n                }\r\n            }\r\n        }\r\n\r\n        .empty-container {\r\n            height: 500px;\r\n            padding-top: 100px;\r\n\r\n            .nofound-text {\r\n                font-size: 30px;\r\n                line-height: 37px;\r\n            }\r\n        }\r\n\r\n        .pagination {\r\n            .page-link {\r\n                font-size: 18px;\r\n            }\r\n\r\n            img {\r\n                width: 20px;\r\n                height: 20px;\r\n            }\r\n\r\n            .page-link.number {\r\n                margin-left: 25px;\r\n                margin-right: 25px;\r\n            }\r\n        }\r\n    }\r\n\r\n    @media only screen and (min-width: 1200px) {\r\n        padding: 50px 50px 100px;\r\n\r\n        .view-container {\r\n            margin-right: 30px;\r\n        }\r\n\r\n        .filter-section {\r\n            .sorting-container {\r\n                .open-now-button {\r\n                    .operating-modal {\r\n                        bottom: -70px;\r\n                        right: -130px;\r\n                        width: 239px;\r\n                        height: 61px;\r\n\r\n                        padding: 0 30px;\r\n\r\n                        .checkbox-icon {\r\n                            margin-right: 30px;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        \r\n        .content-section {\r\n            .content-list {\r\n                .workshop-item {\r\n                    padding: 0 50px;\r\n                }\r\n            }\r\n        }\r\n    }\r\n`;\r\n\r\nexport { HomeContainer };\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport PageLayout from 'containers/PageLayout';\r\nimport { HomeContainer } from './style';\r\nimport APIService from 'api/apiService';\r\nimport APIV2Service from 'api/apiV2Service';\r\nimport { API } from 'api';\r\nimport { useLocation } from 'react-router-dom';\r\nimport useScrollPosition from '@react-hook/window-scroll';\r\nimport { TailSpin } from 'react-loader-spinner';\r\nimport { useGeolocated } from 'react-geolocated';\r\nimport { getLocationByCoords } from 'utility/geocode';\r\n\r\n// Assets\r\nimport ArrowDown from 'assets/img/home/arrow_down.svg';\r\nimport GridViewIconNormal from 'assets/img/home/grid_view_icon.svg';\r\nimport GridViewIconRed from 'assets/img/home/grid_view_icon_red.svg';\r\nimport ListViewIconNormal from 'assets/img/home/list_view_icon.svg';\r\nimport ListViewIconRed from 'assets/img/home/list_view_icon_red.svg';\r\nimport Checkbox from 'assets/img/home/checkbox.svg';\r\nimport CheckboxChecked from 'assets/img/home/checkbox_checked.svg';\r\n\r\n// Components\r\nimport WorkshopCard from 'components/WorkshopCard';\r\n\r\n// Interface\r\ninterface WorkshopType {\r\n    name_id: string;\r\n    id: number;\r\n    distance: string;\r\n    image: string;\r\n    name: string;\r\n    address: string;\r\n    telephone: string;\r\n    operatingHours: [];\r\n}\r\n\r\nconst HomePage = (): JSX.Element => {\r\n    const { coords, isGeolocationEnabled } = useGeolocated({\r\n        positionOptions: {\r\n            enableHighAccuracy: false,\r\n        },\r\n        userDecisionTimeout: 5000,\r\n    });\r\n\r\n    const clickRef = useRef<HTMLDivElement>(null);\r\n    const scrollY = useScrollPosition();\r\n\r\n    const { search } = useLocation();\r\n\r\n    const [workshops, setWorkshops] = useState<any[]>([]);\r\n    const [currentPage, setCurrentPage] = useState(1);\r\n    const [lastPage, setLastPage] = useState(999);\r\n    const [hasTimeout, setHasTimeout] = useState(false);\r\n    const [doneFirstLoad, setDoneFirstLoad] = useState(false);\r\n    const [reqHeaders, setReqHeaders] = useState({});\r\n\r\n    // Handle active sort button\r\n    const [activeSort, setActiveSort] = useState('distance');\r\n\r\n    // Handle operating modal display\r\n    const [showModal, setShowModal] = useState(false);\r\n\r\n    // Handle is checked operating display\r\n    const [isChecked, setIsChecked] = useState(false);\r\n\r\n    // Handle list view format\r\n    const [listView, setListView] = useState(false);\r\n\r\n    // Handle loading spinner\r\n    const [isLoading, setIsLoading] = useState(true);\r\n    const [loadingWidth, setLoadingWidth] = useState(100);\r\n    const [loadingHeight, setLoadingHeight] = useState(100);\r\n    const [loadMore, setLoadMore] = useState(false);\r\n\r\n    const handleSpinnerSize = () => {\r\n        if (window.innerWidth >= 768) {\r\n            setLoadingWidth(100);\r\n            setLoadingHeight(100);\r\n        } else {\r\n            setLoadingWidth(25);\r\n            setLoadingHeight(25);\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        handleSpinnerSize();\r\n        window.addEventListener('resize', handleSpinnerSize);\r\n    }, []);\r\n\r\n    const Workshop = ({name_id, id, distance, image, name, address, telephone, operatingHours }: WorkshopType): JSX.Element => {\r\n        return (\r\n            <div className={'workshop-item ' + (listView ? 'col-12 pe-0' : 'col-6 col-xl-4')}>\r\n                <div className={'item-container d-flex ' + (listView ? 'flex-row' : 'flex-column')}>\r\n                    <WorkshopCard\r\n                        name_id={name_id}\r\n                        id={id}\r\n                        distance={distance}\r\n                        image={image}\r\n                        name={name}\r\n                        address={address}\r\n                        phoneNo={telephone}\r\n                        operatingHours={operatingHours}\r\n                        listView={listView}\r\n                    />\r\n                </div>\r\n            </div>\r\n        );\r\n    };\r\n\r\n    const getWorkshops = () => {\r\n        setIsLoading(true);\r\n\r\n        const queryParams = new URLSearchParams(window.location.search);\r\n        const typeId = queryParams.get('type');\r\n        const distanceId = queryParams.get('distance');\r\n        const productName = queryParams.get('product_name');\r\n        const name = queryParams.get('name');\r\n        const address = queryParams.get('address');\r\n\r\n        const params: any = { sort_by: activeSort == 'distance' ? 'distance' : 'name' };\r\n        if (typeId) {\r\n            params['workshop_type_id'] = typeId;\r\n        }\r\n        if (distanceId) {\r\n            params['distance_id'] = distanceId;\r\n        }\r\n        if (productName) {\r\n            params['product_name'] = productName;\r\n        }\r\n        if (name) {\r\n            params['name'] = name;\r\n        }\r\n        if (isChecked) {\r\n            params['open_now'] = true;\r\n        }\r\n        if (coords) {\r\n            params['latitude'] = coords.latitude;\r\n            params['longitude'] = coords.longitude;\r\n        }\r\n        if (address) {\r\n            params['address'] = address;\r\n        }\r\n\r\n        const headers = { ...reqHeaders };\r\n\r\n        APIV2Service.get(API.workshop.getWorkshops, params, headers)\r\n            .then((res) => {\r\n                setDoneFirstLoad(true);\r\n                setCurrentPage(res.data.data.meta.current_page);\r\n                setLastPage(res.data.data.meta.last_page);\r\n                setWorkshops(res.data.data.data);\r\n            })\r\n            .catch((error) => {\r\n                console.log(error);\r\n            })\r\n            .finally(() => {\r\n                setIsLoading(false);\r\n            });\r\n    };\r\n\r\n    // If has request headers set, get workshops with request headers\r\n    useEffect(() => {\r\n        if (Object.keys(reqHeaders).length > 0 && coords) {\r\n            getWorkshops();\r\n        }\r\n    }, [reqHeaders, coords, search]);\r\n\r\n    // After done first load, get workshops data based on filter param changes\r\n    useEffect(() => {\r\n        if (doneFirstLoad) {\r\n            getWorkshops();\r\n        }\r\n    }, [isChecked, activeSort]);\r\n\r\n    // On first load, check if geolocation enabled to get workshops data\r\n    useEffect(() => {\r\n        const cachedLocation = sessionStorage.getItem('location');\r\n        if (cachedLocation && Object.keys(reqHeaders).length === 0) {\r\n            setReqHeaders(JSON.parse(cachedLocation));\r\n            return;\r\n        }\r\n\r\n        if (isGeolocationEnabled && coords && !cachedLocation) {\r\n            const fetchLocation = async () => {\r\n                const location = await getLocationByCoords(coords.latitude, coords.longitude);\r\n\r\n                const headers: any = {};\r\n                if (location) {\r\n                    headers['country'] = location.country;\r\n                    headers['state'] = location.state;\r\n                    headers['province'] = location.city;\r\n                }\r\n\r\n                setReqHeaders(headers);\r\n            };\r\n\r\n            fetchLocation();\r\n        }\r\n\r\n        const timeout = setTimeout(() => {\r\n            setHasTimeout(true);\r\n        }, 5000);\r\n\r\n        return () => {\r\n            clearTimeout(timeout);\r\n        };\r\n    }, [isGeolocationEnabled, coords]);\r\n\r\n    // If user does not enable location permission and has reached timeout\r\n    // Get the workshops data without coords information\r\n    useEffect(() => {\r\n        if (hasTimeout && !isGeolocationEnabled && !coords) {\r\n            getWorkshops();\r\n        }\r\n    }, [hasTimeout]);\r\n\r\n    const handleModalOutsideClick = (e: any) => {\r\n        if (clickRef && clickRef.current) {\r\n            if (!clickRef.current.contains(e.target)) {\r\n                try {\r\n                    closeModal();\r\n                } catch (e) {\r\n                    console.log(e);\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    const openModal = () => {\r\n        document.addEventListener('click', handleModalOutsideClick, true);\r\n        setShowModal(true);\r\n    };\r\n\r\n    const closeModal = () => {\r\n        document.removeEventListener('click', handleModalOutsideClick, true);\r\n        setShowModal(false);\r\n    };\r\n\r\n    const handleScroll = () => {\r\n        const currentWorkshops: any = [];\r\n        const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight;\r\n\r\n        if (currentPage === lastPage) {\r\n            return;\r\n        }\r\n\r\n        if (bottom && !isLoading && !loadMore) {\r\n            setLoadMore(true);\r\n            const queryParams = new URLSearchParams(window.location.search);\r\n            const typeId = queryParams.get('type');\r\n            const distanceId = queryParams.get('distance');\r\n            const productName = queryParams.get('product_name');\r\n            const name = queryParams.get('name');\r\n            const address = queryParams.get('address');\r\n\r\n            const params: any = { sort_by: activeSort == 'distance' ? 'distance' : 'name', page: currentPage + 1 };\r\n            if (typeId) {\r\n                params['workshop_type_id'] = typeId;\r\n            }\r\n            if (distanceId) {\r\n                params['distance_id'] = distanceId;\r\n            }\r\n            if (productName) {\r\n                params['product_name'] = productName;\r\n            }\r\n            if (name) {\r\n                params['name'] = name;\r\n            }\r\n            if (isChecked) {\r\n                params['open_now'] = true;\r\n            }\r\n            if (coords) {\r\n                params['latitude'] = coords.latitude;\r\n                params['longitude'] = coords.longitude;\r\n            }\r\n            if (address) {\r\n                params['address'] = address;\r\n            }\r\n            \r\n            APIV2Service.get(API.workshop.getWorkshops, params, reqHeaders)\r\n                .then((res) => {\r\n                    res.data.data.data.map((item: any) => {\r\n                        currentWorkshops.push(item);\r\n                    });\r\n\r\n                    setCurrentPage(res.data.data.meta.current_page);\r\n                    setWorkshops((workshops) => {\r\n                        return [...workshops, ...currentWorkshops];\r\n                    });\r\n                })\r\n                .catch((error) => {\r\n                    console.log(error);\r\n                })\r\n                .finally(() => {\r\n                    setLoadMore(false);\r\n                });\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        handleScroll();\r\n    }, [scrollY]);\r\n\r\n    return (\r\n        <PageLayout>\r\n            <HomeContainer>\r\n                <div className=\"title-container\">\r\n                    <h2>Nearby Workshop</h2>\r\n                </div>\r\n                <hr />\r\n                <div className=\"filter-section\">\r\n                    <div className=\"sorting-container\">\r\n                        <div className=\"sorting-title\">Sort by :</div>\r\n                        <div className=\"button-list\">\r\n                            <button\r\n                                className={'sorting-option ' + (activeSort == 'distance' ? 'active' : '')}\r\n                                onClick={() => setActiveSort('distance')}\r\n                            >\r\n                                Distance\r\n                            </button>\r\n                            <button\r\n                                className={'sorting-option ' + (activeSort == 'name' ? 'active' : '')}\r\n                                onClick={() => setActiveSort('name')}\r\n                            >\r\n                                Workshop Name\r\n                            </button>\r\n                        </div>\r\n                        <div className=\"vertical-line\" />\r\n                        <div className=\"open-now-button\" onClick={() => openModal()}>\r\n                            <span>Hours</span>\r\n                            <div className=\"arrow-down-icon\">\r\n                                <img src={ArrowDown} alt=\"arrow-down\" />\r\n                            </div>\r\n                            <div\r\n                                className={'operating-modal ' + (showModal ? 'd-flex' : 'd-none')}\r\n                                onClick={(e) => e.preventDefault()}\r\n                                ref={clickRef}\r\n                            >\r\n                                <div className=\"checkbox-icon\" onClick={() => setIsChecked(isChecked ? false : true)}>\r\n                                    <img src={isChecked ? CheckboxChecked : Checkbox} alt=\"checkbox\" />\r\n                                </div>\r\n                                Open Now\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div className=\"view-container d-none d-md-flex align-items-center\">\r\n                        <div className=\"icon-container\" onClick={() => setListView(false)}>\r\n                            <img src={listView ? GridViewIconNormal : GridViewIconRed} alt=\"grid-view\" />\r\n                        </div>\r\n                        <div className=\"icon-container\" onClick={() => setListView(true)}>\r\n                            <img src={listView ? ListViewIconRed : ListViewIconNormal} alt=\"list-view\" />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div className=\"content-section\">\r\n                    <div className=\"d-flex justify-content-between w-100\">\r\n                        <div>\r\n                            <div className=\"content-title\">Nearby Workshop</div>\r\n                            <div className=\"title-line\" />\r\n                        </div>\r\n                        <div className=\"view-container d-flex d-md-none align-items-start\">\r\n                            <div className=\"icon-container\" onClick={() => setListView(false)}>\r\n                                <img src={listView ? GridViewIconNormal : GridViewIconRed} alt=\"grid-view\" />\r\n                            </div>\r\n                            <div className=\"icon-container\" onClick={() => setListView(true)}>\r\n                                <img src={listView ? ListViewIconRed : ListViewIconNormal} alt=\"list-view\" />\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div className={'content-list row'}>\r\n                        {isLoading && (\r\n                            <div className=\"w-100 h-100 d-flex justify-content-center\">\r\n                                <TailSpin color=\"#E40613\" height={loadingHeight} width={loadingWidth} />\r\n                            </div>\r\n                        )}\r\n\r\n                        {!isLoading &&\r\n                            workshops.length > 0 &&\r\n                            workshops.map(\r\n                                (\r\n                                    { id, distance_radius, name_id, image_url, name, address, phone_number, operating_hours },\r\n                                    index,\r\n                                ) => {\r\n                                    return (\r\n                                        <Workshop\r\n                                            key={index}\r\n                                            id={id}\r\n                                            name_id={name_id}\r\n                                            distance={distance_radius}\r\n                                            image={image_url}\r\n                                            name={name}\r\n                                            address={address}\r\n                                            telephone={phone_number}\r\n                                            operatingHours={operating_hours}\r\n                                        />\r\n                                    );\r\n                                },\r\n                            )}\r\n                        {!isLoading && workshops.length == 0 && (\r\n                            <div className=\"empty-container\">\r\n                                <div className=\"nofound-text\">Workshop not found</div>\r\n                            </div>\r\n                        )}\r\n                    </div>\r\n\r\n                    {loadMore && (\r\n                        <div className={'loading-container d-flex'}>\r\n                            <TailSpin color=\"#E40613\" height={loadingHeight} width={loadingWidth} />\r\n                        </div>\r\n                    )}\r\n                </div>\r\n            </HomeContainer>\r\n        </PageLayout>\r\n    );\r\n};\r\n\r\nexport default HomePage;\r\n"],"sourceRoot":""}