\r\n \r\n {t(\"Select your city and district\")}:\r\n \r\n\r\n \r\n \r\n \r\n {\r\n let result = i18n.language === \"ar\" ? city.LocalizedName : city.Name;\r\n return result === undefined ? \"\" : result;\r\n }}\r\n id=\"city-select\"\r\n value={fields.city}\r\n onChange={handleCityChange}\r\n renderInput={(params) => (\r\n \r\n )}\r\n />\r\n {loadingCities && }\r\n {!!errors[\"city\"] && {errors[\"city\"]}}\r\n {showNoServicesError && (\r\n {t(\"Sorry, selected service is not available for your city.\")}\r\n )}\r\n \r\n \r\n\r\n {isMeasurement(fields.service) && (\r\n \r\n \r\n {\r\n let result = i18n.language === \"ar\" ? district.LocalizedName : district.Name;\r\n return result === undefined ? \"\" : result;\r\n }}\r\n id=\"district-select\"\r\n value={fields.district}\r\n onChange={handleDistrictChange}\r\n renderInput={(params) => (\r\n \r\n )}\r\n />\r\n {loadingDistricts && }\r\n {errors[\"district\"]}\r\n \r\n \r\n )}\r\n\r\n {isMeasurement(fields.service) ? ( // measurement only\r\n stores.length > 1 && ( // don't show store dropdown only one store provided\r\n \r\n \r\n {t(\"Store\")}\r\n \r\n {stores &&\r\n stores.map((store) => (\r\n \r\n ))}\r\n \r\n {loadingStores && }\r\n {errors[\"store\"]}\r\n \r\n \r\n )\r\n ) : (\r\n // for planning, always show store dropdown\r\n \r\n \r\n {t(\"Store\")}\r\n \r\n {stores &&\r\n stores.map((store) => (\r\n \r\n ))}\r\n \r\n {loadingStores && }\r\n {errors[\"store\"]}\r\n \r\n \r\n )}\r\n \r\n
\r\n );\r\n}\r\n","import { env, apimKey } from \"../../../config\";\r\nimport log from \"../../../utils/log\";\r\n\r\nexport default async function fetchServicesAsync() {\r\n const baseUrl = `https://apim-ikeasa.azure-api.net/GetServices/${env}/v2/`;\r\n const response = await fetch(baseUrl, {\r\n headers: {\r\n \"Ocp-Apim-Subscription-Key\": apimKey,\r\n },\r\n });\r\n\r\n if (response.status === 200) {\r\n // QueueId will be empty for measurement\r\n const json = await response.json();\r\n log(\"fetchServicesAsync\", \"response\", json);\r\n\r\n return json.Services;\r\n }\r\n\r\n throw new Error(response.status);\r\n}\r\n\r\n/*\r\n[\r\n {\r\n \"AgentCode\": \"PL-KIT-O\",\r\n \"NAVItemNo\": \"999999991\",\r\n \"ServiceId\": \"1000001\",\r\n \"ServiceName_En\": \"Kitchen planning\\r\\n\",\r\n \"ServiceName_Ar\": \"تخطيط المطبخ\\r\\n\",\r\n \"Service_Desc_En\": \"Plan your dream kitchen online with the help of our team of professionals. Our team will connect remotely with you for the planning. The service fee is refundable after your kitchen purchase.\\r\\n\",\r\n \"Service_Desc_Ar\": \"خطط مطبخ أحلامك على موقعنا بالانترنت بمساعدة من فريقنا المختص. سيقوم فريقنا بالاتصال بك عن بعد للتخطيط. رسوم الخدمة قابلة للاسترداد في حالة شراء المطبخ.\\r\\n\",\r\n \"Service_Fee\": \"150\",\r\n \"Service_Type\": \"Online\",\r\n \"Order_Type\": \"POS\",\r\n \"QueueId\": \"64aa8a7f-a616-44e8-806a-165e08d91192\"\r\n },\r\n {\r\n \"AgentCode\": \"PL-KIT-S\",\r\n \"NAVItemNo\": \"999999992\\r\\n\",\r\n \"ServiceId\": \"1000002\",\r\n \"ServiceName_En\": \"Kitchen planning\\r\\n\",\r\n \"ServiceName_Ar\": \"تخطيط المطبخ\\r\\n\",\r\n \"Service_Desc_En\": \"Plan your dream kitchen in-store with the help of our team of professionals. Our team will help you at IKEA store or Planning Studio. The service fee is refundable after your kitchen purchase.\\r\\n\",\r\n \"Service_Desc_Ar\": \"خطط مطبخ أحلامك في المعرض بمساعدة من فريقنا المختص. سيساعدك فريقنا في معرض ايكيا أو استوديو التخطيط. رسوم الخدمة قابلة للاسترداد في حالة شراء المطبخ.\\r\\n\",\r\n \"Service_Fee\": \"150\",\r\n \"Service_Type\": \"Store\",\r\n \"Order_Type\": \"POS\"\r\n },\r\n {\r\n \"AgentCode\": \"CO-MEA\",\r\n \"NAVItemNo\": \"99999999\",\r\n \"ServiceId\": \"1000003\",\r\n \"ServiceName_En\": \"Kitchen Measurement\",\r\n \"ServiceName_Ar\": \"قياس المطبخ\",\r\n \"Service_Desc_En\": \"Those small details matter. So, we’ll pay you a visit at home or in your office to measure your space before the real planning begins. The service fee is refundable after your kitchen purchase.\\r\\n\",\r\n \"Service_Desc_Ar\": \"هناك بعض التفاصيل الصغيرة التي تعتبر مهمة بالنسبة لنا. لذلك، سنقوم بزيارة منزلك أو مكتبك لقياس مساحتك قبل بدء عملية التخطيط الفعلية. رسوم الخدمة قابلة للاسترداد في حالة شراء المطبخ.\\r\\n\",\r\n \"Service_Fee\": \"150\",\r\n \"Service_Type\": \"Home\",\r\n \"Order_Type\": \"CO\"\r\n },\r\n {\r\n \"AgentCode\": \"PL-BED-O\",\r\n \"NAVItemNo\": \"999999993\",\r\n \"ServiceId\": \"1000004\",\r\n \"ServiceName_En\": \"Wardrobe planning (PAX & PLATSA)\\r\\n\",\r\n \"ServiceName_Ar\": \"تخطيط دولاب الملابس (PAX & PLATSA)\\r\\n\",\r\n \"Service_Desc_En\": \"Plan the best storage solutions for your bedroom online with the help of our team of professionals. Our team will connect remotely with you for the planning.\\r\\n\",\r\n \"Service_Desc_Ar\": \"خطط أفضل حلول التخزين لغرفة نومك على موقعنا بالانترنت بمساعدة من فريقنا المختص. سيقوم فريقنا بالاتصال بك عن بعد للتخطيط.\\r\\n\",\r\n \"Service_Fee\": \"0\",\r\n \"Service_Type\": \"Online\",\r\n \"Order_Type\": \"POS\"\r\n },\r\n {\r\n \"AgentCode\": \"PL-BED-S\",\r\n \"NAVItemNo\": \"999999994\",\r\n \"ServiceId\": \"1000005\",\r\n \"ServiceName_En\": \"Wardrobe planning (PAX & PLATSA)\\r\\n\",\r\n \"ServiceName_Ar\": \"تخطيط دولاب الملابس (PAX & PLATSA)\\r\\n\",\r\n \"Service_Desc_En\": \"Plan the best storage solutions for your bedroom in-store with the help of our team of professionals. Our team will help you at IKEA store or Planning Studio.\\r\\n\",\r\n \"Service_Desc_Ar\": \"خطط أفضل حلول التخزين لغرفة نومك في المعرض بمساعدة من فريقنا المختص. سيساعدك فريقنا في معرض ايكيا أو استوديو التخطيط.\\r\\n\",\r\n \"Service_Fee\": \"0\",\r\n \"Service_Type\": \"Store\",\r\n \"Order_Type\": \"POS\"\r\n },\r\n {\r\n \"AgentCode\": \"PL-BATH-O\",\r\n \"NAVItemNo\": \"999999995\",\r\n \"ServiceId\": \"1000006\",\r\n \"ServiceName_En\": \"Bathroom planning\\r\\n\",\r\n \"ServiceName_Ar\": \"تخطيط الحمام\",\r\n \"Service_Desc_En\": \"Plan your dream Bathroom online with the help of our team of professionals. Our team will connect remotely with you for the planning.\\r\\n\",\r\n \"Service_Desc_Ar\": \"خطط حمام أحلامك على موقعنا بالانترنت بمساعدة من فريقنا المختص. سيقوم فريقنا بالاتصال بك عن بعد للتخطيط.\\r\\n\",\r\n \"Service_Fee\": \"0\",\r\n \"Service_Type\": \"Online\",\r\n \"Order_Type\": \"POS\"\r\n },\r\n {\r\n \"AgentCode\": \"PL-BATH-S\",\r\n \"NAVItemNo\": \"999999996\\r\\n\",\r\n \"ServiceId\": \"1000007\",\r\n \"ServiceName_En\": \"Bathroom planning\\r\\n\",\r\n \"ServiceName_Ar\": \"تخطيط الحمام\",\r\n \"Service_Desc_En\": \"Plan your dream Bathroom in-store with the help of our team of professionals. Our team will help you at IKEA store or Planning Studio.\\r\\n\",\r\n \"Service_Desc_Ar\": \"خطط حمام أحلامك في المعرض بمساعدة من فريقنا المختص. سيساعدك فريقنا في معرض ايكيا أو استوديو التخطيط.\\r\\n\",\r\n \"Service_Fee\": \"0\",\r\n \"Service_Type\": \"Store\",\r\n \"Order_Type\": \"POS\"\r\n },\r\n {\r\n \"AgentCode\": \"PL-LIV-O\",\r\n \"NAVItemNo\": \"999999997\",\r\n \"ServiceId\": \"1000008\",\r\n \"ServiceName_En\": \"Living room storage planning\\r\\n\",\r\n \"ServiceName_Ar\": \"تخطيط تخزين غرفة الجلوس\\r\\n\",\r\n \"Service_Desc_En\": \"Plan the best storage solutions for your living room online with the help of our team of professionals.\\r\\n\",\r\n \"Service_Desc_Ar\": \"خطط أفضل حلول التخزين لغرفة جلوسك على موقعنا بالانترنت بمساعدة من فريقنا المختص.\\r\\n\",\r\n \"Service_Fee\": \"0\",\r\n \"Service_Type\": \"Online\",\r\n \"Order_Type\": \"POS\"\r\n },\r\n {\r\n \"AgentCode\": \"PL-LIV-S\",\r\n \"NAVItemNo\": \"999999998\",\r\n \"ServiceId\": \"1000009\",\r\n \"ServiceName_En\": \"Living room storage planning\\r\\n\",\r\n \"ServiceName_Ar\": \"تخطيط تخزين غرفة الجلوس\\r\\n\",\r\n \"Service_Desc_En\": \"Plan the best storage solutions for your living room in-store with the help of our team of professionals. Our team will help you at IKEA store or Planning Studio.\\r\\n\",\r\n \"Service_Desc_Ar\": \"خطط أفضل حلول التخزين لغرفة جلوسك في المعرض بمساعدة من فريقنا المختص. سيساعدك فريقنا في معرض ايكيا أو استوديو التخطيط. \\r\\n\",\r\n \"Service_Fee\": \"0\",\r\n \"Service_Type\": \"Store\",\r\n \"Order_Type\": \"POS\"\r\n }\r\n]\r\n\r\n*/\r\n","import React, { useState, useEffect } from \"react\";\r\n//import { trackPromise } from \"react-promise-tracker\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport Select from \"@material-ui/core/Select\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport Box from \"@material-ui/core/Box\";\r\n\r\n// API\r\nimport fetchServicesAsync from \"./api/fetchServicesAsync\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n spinnerProgress: {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"90%\",\r\n marginTop: -5,\r\n marginLeft: -5,\r\n },\r\n}));\r\n\r\nexport default function ServicePage({ fields, servicesWithDisclaimer, errors, handleChange }) {\r\n const classes = useStyles();\r\n const [loadingServices, setLoadingServices] = React.useState(false);\r\n\r\n const [services, setServices] = useState([]);\r\n const { t, i18n } = useTranslation();\r\n\r\n // componentDidMount\r\n useEffect(() => {\r\n fetchServices();\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const fetchServices = () => {\r\n if (!loadingServices) {\r\n setLoadingServices(true);\r\n\r\n fetchServicesAsync().then((services) => {\r\n setServices(services);\r\n setLoadingServices(false);\r\n });\r\n }\r\n };\r\n\r\n const handleServiceChange = (e) => {\r\n // get object and store it in state\r\n const service = services.find((service) => service.ServiceId === e.target.value);\r\n\r\n handleChange(\"service\")(service);\r\n };\r\n\r\n return (\r\n
\r\n {!!fields.timeslot ? (\r\n showDateRange(fields.timeslot.actual_date)\r\n ) : (\r\n \r\n {t(\"Please select a date from the above calendar.\")}\r\n \r\n )}\r\n
\r\n ) : (\r\n
\r\n \r\n {t(\"Please be available 10 minutes before the selected time.\")}\r\n \r\n\r\n \r\n {t(\"Timeslot\")}\r\n \r\n {filtered &&\r\n filtered.map((timeslot) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n {reservingTimeslot && }\r\n {errors[\"timeslot\"]}\r\n \r\n
\r\n )}\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"No time slot available\")}\r\n \r\n \r\n {t(\"Sorry, No time slot available for the selected service. Please check again later.\")}\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React, { useEffect } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\n\r\nexport default function ContactPage({ fields, errors, handleChange }) {\r\n const { t } = useTranslation();\r\n\r\n // componentDidMount\r\n useEffect(() => {\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n return (\r\n