\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n )}\n\n \n
\n \n
\n {errors.petType && (\n Choose your pet type
\n\n {[\"Dog (Canids)\", \"Cat (Feline)\", \"Others\"].map((type) => (\n handlePetTypeSelect(type)}\n >\n
\n ))}\n \n
\n {errors.petType}\n
\n )}\n\n {[\n ...(petType === \"Others\"\n ? [\n {\n name: \"customPetType\",\n placeholder: \"Enter pet type\",\n type: \"text\",\n },\n ]\n : []),\n\n { name: \"petName\", placeholder: \"Pet's Name\", type: \"text\" },\n {\n name: \"petBreed\",\n placeholder: \"Pet's Breed\",\n type: petType === \"Others\" ? \"text\" : \"select\",\n options: filteredBreeds,\n },\n {\n name: \"petBirthday\",\n placeholder: \"Date Of Birth\",\n type: \"date\",\n },\n {\n name: \"petGender\",\n placeholder: \"Gender\",\n type: \"select\",\n options: [\n { id: \"Male\", BreedName: \"Male\" },\n { id: \"Female\", BreedName: \"Female\" },\n ],\n },\n\n ...(petType === \"Dog (Canids)\"\n ? [\n {\n name: \"petKernelNumber\",\n placeholder: \"Kennel Club Number\",\n type: \"text\",\n },\n ]\n : []),\n ].map((field) => (\n
\n {petType && (\n \n {field.type === \"select\" ? (\n \n eval(\n `set${\n field.name.charAt(0).toUpperCase() +\n field.name.slice(1)\n }`\n )(e.target.value)\n }\n aria-label={field.placeholder}\n className={`${\n errors[field.name]\n ? \"border border-red-500 placeholder\"\n : \"placeholder\"\n }`}\n style={{\n width:\n petType === \"Others\" && field.name === \"petGender\"\n ? \"100%\"\n : \"14.5vw\",\n }}\n >\n \n {field.options.map((option) => (\n \n {option.BreedName || option}\n \n ))}\n \n ) : (\n \n eval(\n `set${\n field.name.charAt(0).toUpperCase() +\n field.name.slice(1)\n }`\n )(e.target.value)\n }\n onFocus={\n field.type === \"date\"\n ? (e) => (e.target.type = \"date\")\n : undefined\n }\n onBlur={\n field.type === \"date\"\n ? (e) =>\n (e.target.type = e.target.value\n ? \"date\"\n : \"text\")\n : undefined\n }\n aria-label={field.placeholder}\n />\n )}\n {errors[field.name] && (\n
\n ))}\n \n {errors[field.name]}\n
\n )}\n \n
\n \n \n {petType === \"Dog (Canids)\"\n ? \"Is your dog rabies vaccinated?\"\n : petType === \"Others\"\n ? \"Vaccination Details\"\n : \"Is your pet vaccinated?\"}\n \n
\n \n {petType === \"Others\" ? (\n // Show input box with a button to add vaccination details when petType is 'others'\n setIsRabiesVaccinationOpen(true)}\n >\n \n Add Past Vaccination Details\n \n
\n ) : (\n // Only show Yes/No options for other pet types\n <>\n \n \n \n )}\n \n
\n {vaccinationData && (\n setVaccinationData(null)}\n petType={petType}\n />\n )}\n
\n\n \n {[\n {\n name: \"petWeight\",\n placeholder: \"Weight\",\n type: \"text\",\n },\n {\n name: \"petDoctorName\",\n placeholder: \"Vet's Name\",\n type: \"text\",\n },\n {\n name: \"doctorContactNumber\",\n placeholder: \"Vet's Number\",\n type: \"text\",\n },\n {\n name: \"doctorAddress\",\n placeholder: \"Vet's Address\",\n type: \"text\",\n },\n ].map((field) => (\n \n \n eval(\n `set${\n field.name.charAt(0).toUpperCase() +\n field.name.slice(1)\n }`\n )(e.target.value)\n }\n onFocus={\n field.type === \"date\"\n ? (e) => (e.target.type = \"date\")\n : undefined\n }\n onBlur={\n field.type === \"date\"\n ? (e) =>\n (e.target.type = e.target.value ? \"date\" : \"text\")\n : undefined\n }\n aria-label={field.placeholder}\n />\n\n {field.name === \"petWeight\" && (\n \n \n kg\n \n \n lbs\n \n \n )}\n {errors[field.name] && (\n // add the\n
\n ))}\n \n {errors[field.name]}\n
\n )}\n \n \n
\n \n \n \n {isRabiesVaccinationOpen && (\n \n
\n );\n};\n\nexport default PreviewVaccinationDetails;\n","import React, { useState, useRef, useEffect } from \"react\";\nimport { ChevronDown, ChevronUp } from \"lucide-react\";\nimport \"./CustomDropdown.css\";\n\nconst CustomDropdown = ({ options, onChange, errorMessage }) => {\n const [isOpen, setIsOpen] = useState(false);\n const [checkedOption, setCheckedOption] = useState(null);\n const dropdownRef = useRef(null);\n\n const toggleDropdown = () => setIsOpen(!isOpen);\n\n const handleOptionClick = (option) => {\n setCheckedOption(option);\n onChange(option);\n setIsOpen(false);\n };\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, []);\n\n return (\n <>\n \n \n
\n \n \n {vaccinationDetails.value}\n \n
\n \n \n {checkedOption ? (\n
\n \n {checkedOption.name}\n Rs. {checkedOption.price}\n
\n ) : (\n Choose Vaccine\n )}\n {isOpen ? \n {options.map((option, index) => (\n handleOptionClick(option)}\n >\n
\n ))}\n \n \n {errorMessage && (\n \n {option.name}\n Rs. {option.price}\n
\n \n
\n \n {errorMessage}\n
\n )}\n \n );\n};\n\nexport default CustomDropdown;\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"../../../../axios\";\nimport DogPettingIcon from \"../../../Homepage/DogPettingIcon\";\nimport \"./Settingsmodal.css\";\nimport Cookies from \"js-cookie\";\nimport CustomDropdown from \"../../../../Components/CustomDropdown/CustomDropdown\";\nimport Checkout from \"../../../../shop/components/CartWishlist/Checkout/Checkout\";\nimport ModalBack from \"../../../../shop/components/Modal/ModalBack\";\n\nexport const RabiesVaccination = ({\n petId,\n isOpen,\n isClose,\n vaccinated,\n petType,\n onVaccinationDataChange,\n isFromMedicalRecord = false,\n hanldeVaccinationRecord,\n}) => {\n // console.log(petType, \"pet type\");\n // console.log(onVaccinationDataChange, \"vaccinated\");\n const loginToken = Cookies.get(\"loginToken\");\n const signupToken = Cookies.get(\"signupToken\");\n\n const [isClosing, setIsClosing] = useState(false);\n const [vaccinationName, setVaccinationName] = useState({\n Name: \"Anti Rabies\",\n });\n // console.log(petId.id, \"petid\", petId, \"onemore\");\n\n const [vaccinationDate, setVaccinationDate] = useState(\"\");\n const [vaccinationDose, setVaccinationDose] = useState(\"\");\n const [nextVacciDate, setNextVacciDate] = useState(null);\n const [uploadedFile, setUploadedFile] = useState(null);\n const [selectedVaccine, setSelectedVaccine] = useState(null);\n const [vaccineOptions, setVaccineOptions] = useState([]);\n const [vaccinationList, setVaccinationList] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [nextdoseType, setNextDoseType] = useState(\"\");\n const [nextVaccinationName, setNextVaccinationName] = useState(\"\");\n const [openCheckOut, setOpenCheckOut] = useState(false);\n const [bookingData, setBookingData] = useState({});\n const [isOpenDropdown, setIsOpenDropdown] = useState(false);\n const [selected, setSelected] = useState(\"\");\n // console.log(selected, \"vaccinationname\");\n\n const [uploadError, setUploadError] = useState({\n vaccinationName: \"\",\n vaccinationDate: \"\",\n vaccinationDose: \"\",\n nextVacciDate: \"\",\n uploadedFile: \"\",\n selectedVaccine: \"\",\n vaccinationList: \"\",\n });\n\n const [errors, setErrors] = useState({\n selected: \"\",\n vaccinationName: \"\",\n vaccinationDate: \"\",\n vaccinationDose: \"\",\n selectedVaccine: \"\",\n });\n const getPetTypeForAPI = (type) => {\n if (type === \"Dog (Canids)\") return \"Dog\";\n if (type === \"Cat (Feline)\") return \"Cat\";\n return \"Other\";\n };\n // console.log(vaccinated, \"petid for vaccine \");\n\n // Validation function\n const validateForm = () => {\n const newErrors = {};\n\n if (petType !== \"Dog (Canids)\" && petType !== \"Cat (Feline)\") {\n // Validate vaccination name (when vaccinated)\n if (!vaccinationName) {\n newErrors.vaccinationName = \"Vaccination name is required\";\n }\n\n // Validate vaccination date\n if (!vaccinationDate) {\n newErrors.vaccinationDate = \"Vaccination date is required\";\n }\n\n // Validate vaccination dose\n if (!vaccinationDose) {\n newErrors.vaccinationDose = \"Vaccination dose is required\";\n }\n }\n\n // Validate vaccination name for medical record\n if (isFromMedicalRecord && !selected) {\n newErrors.selected = \"Please select a vaccination name\";\n }\n\n // Validate vaccination date\n // if (!vaccinationDate) {\n // newErrors.vaccinationDate = \"Vaccination date is required\";\n // }\n\n // Validate vaccination dose\n if (!vaccinationDose) {\n newErrors.vaccinationDose = \"Vaccination dose is required\";\n }\n\n // Validate selected vaccine for non-vaccinated dogs/cats\n if (\n !vaccinated &&\n (petType === \"Dog (Canids)\" || petType === \"Cat (Feline)\") &&\n !selectedVaccine\n ) {\n newErrors.selectedVaccine = \"Please select a vaccine\";\n }\n\n // Validate vaccination name for non-dog/cat pets\n if (\n petType !== \"Dog (Canids)\" &&\n petType !== \"Cat (Feline)\" &&\n vaccinated &&\n !vaccinationName\n ) {\n newErrors.vaccinationName = \"Vaccination name is required\";\n }\n\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n useEffect(() => {\n if (\n (petType === \"Dog (Canids)\" || petType === \"Cat (Feline)\") &&\n !vaccinated\n ) {\n fetchVaccineOptions();\n } else if (petType !== \"Dog (Canids)\" || petType !== \"Cat (Feline)\") {\n fetchVaccinationList();\n }\n }, [petType, vaccinated, vaccinationDose, selected]);\n\n useEffect(() => {\n if (vaccinationName && vaccinationDose) {\n fetchNextVaccination();\n }\n }, [vaccinationName, vaccinationDose]);\n\n useEffect(() => {\n fetchVaccinationName();\n fetchVaccineOptions();\n }, [petType, selected]);\n\n const fetchVaccineOptions = async () => {\n // Only fetch vaccine options for dogs and cats\n if (petType === \"Dog (Canids)\" || petType === \"Cat (Feline)\") {\n const vaccineName = isFromMedicalRecord ? selected : \"Anti-Rabies\";\n if (vaccineName) {\n setIsLoading(true);\n setError(null);\n // console.log(vaccineName, \"vaccinationname\");\n try {\n const response = await axios.get(\n `/auth/rabiesvaccinelist?Subcategory=${vaccineName}&Pettype=${getPetTypeForAPI(\n petType\n )}`,\n {\n headers: {\n Authorization: signupToken || loginToken,\n },\n }\n );\n // console.log(\"Vaccine options:\", response.data.message);\n if (response.data.status === 200) {\n const message = response?.data?.message;\n if (Array.isArray(message) && message.length === 0) {\n throw new Error(\"No vaccine options available\");\n }\n const formattedOptions = message.map((vaccine) => ({\n name: vaccine.ProductName,\n price: vaccine.price,\n productId: vaccine.id,\n variantId: vaccine.variantId,\n }));\n setVaccineOptions(formattedOptions);\n }\n } catch (err) {\n console.error(\"Error fetching vaccine options:\", err);\n setError(\n err.message === \"No vaccine options available\"\n ? \"No vaccine available.\"\n : \"Failed to fetch vaccine options. Please try again.\"\n );\n } finally {\n setIsLoading(false);\n }\n }\n }\n };\n const fetchVaccinationList = async () => {\n setIsLoading(true);\n setError(null);\n try {\n const selectedPet = getPetTypeForAPI(petType);\n const response = await axios.get(\n `/petinfo/vaccinationname/${selectedPet}`,\n {\n headers: {\n Authorization: signupToken || loginToken,\n },\n }\n );\n setVaccinationList(response.data.message);\n } catch (err) {\n console.error(\"Error fetching vaccination list:\", err);\n setError(\"Failed to fetch vaccination list. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const fetchNextVaccination = async () => {\n if (vaccinationName) {\n const val = {\n currentvaccination: vaccinationName.Name,\n petType: getPetTypeForAPI(petType),\n currentdoseType: vaccinationDose,\n };\n try {\n const response = await axios.post(\"/admin/getmobilevaccination\", val, {\n headers: {\n Authorization: signupToken || loginToken,\n },\n });\n if (response.data.message) {\n setNextVaccinationName(response.data.message.nextvaccination);\n setNextDoseType(response.data.message.nextdoseType);\n const nextDate = new Date(vaccinationDate);\n nextDate.setDate(\n nextDate.getDate() + parseInt(response.data.message.timeDuration)\n );\n setNextVacciDate(nextDate);\n }\n } catch (error) {\n console.error(\"Error fetching next vaccination:\", error);\n }\n }\n };\n\n const handleClose = () => {\n setIsClosing(true);\n setTimeout(() => {\n setIsClosing(false);\n isClose();\n }, 1000);\n };\n\n const handleCheckoutOpen = () => {\n setOpenCheckOut((prev) => !prev);\n };\n\n const handleVaccinationDate = (e) => {\n setVaccinationDate(e.target.value);\n setErrors((prev) => ({ ...prev, vaccinationDate: \"\" }));\n };\n\n const handleVaccinationDose = (e) => {\n setVaccinationDose(e.target.value);\n setSelectedVaccine(null);\n setErrors((prev) => ({ ...prev, vaccinationDose: \"\" }));\n };\n\n const handleFileUpload = async (e) => {\n const file = e.target.files[0];\n\n if (file) {\n try {\n const formData = new FormData();\n formData.append(\"file\", file);\n\n const response = await axios.post(\"/file/uploadFile\", formData, {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n Authorization: signupToken || loginToken,\n },\n });\n\n if (!response.data.Message) {\n return setUploadError({\n ...errors,\n uploadedFile: \"Failed to upload file. Please try again.\",\n });\n }\n\n setUploadedFile({\n url: response?.data?.Message?.getPeteye,\n fileType: file.type,\n docType: \"Vaccination\",\n docName: file.name,\n });\n } catch (error) {\n console.error(\"Error uploading file:\", error);\n setError(\"Failed to upload file. Please try again.\");\n }\n }\n };\n\n const handleVaccineChange = (option) => {\n setSelectedVaccine(option);\n };\n\n const handleSave = () => {\n const apiPetType = getPetTypeForAPI(petType);\n let vaccinationData = {};\n\n const formatDate = (date) => {\n if (date instanceof Date && !isNaN(date)) {\n return date.toISOString().split(\"T\")[0];\n }\n console.warn(\"Invalid date:\", date);\n return \"\";\n };\n\n try {\n if (apiPetType === \"Dog\" || apiPetType === \"Cat\") {\n if (vaccinated) {\n vaccinationData = {\n Vaccination: [\n {\n currentvaccination: \"Anti-Rabies\",\n LastVaccinationDate: vaccinationDate,\n nextvaccinationname: nextVaccinationName,\n nextvaccinationDate: formatDate(nextVacciDate),\n lastdoseType: vaccinationDose,\n nextdoseType: nextdoseType,\n documentList: uploadedFile ? [uploadedFile] : [],\n },\n ],\n nonvaccination: \"\",\n };\n } else {\n vaccinationData = {\n Vaccination: [],\n nonvaccination: {\n selectedVaccination: \"Anti-Rabies\",\n selectedDoseType: vaccinationDose,\n selectedDate: vaccinationDate,\n selectedVaccineId: selectedVaccine.productId,\n productVariantId: selectedVaccine.variantId,\n },\n };\n }\n } else {\n if (vaccinated) {\n vaccinationData = {\n Vaccination: [\n {\n currentvaccination: vaccinationName.Name,\n LastVaccinationDate: vaccinationDate,\n nextvaccinationname: nextVaccinationName,\n nextvaccinationDate: formatDate(nextVacciDate),\n lastdoseType: vaccinationDose,\n nextdoseType: nextdoseType,\n documentList: uploadedFile ? [uploadedFile] : [],\n },\n ],\n nonvaccination: \"\",\n };\n } else {\n vaccinationData = {\n Vaccination: [],\n nonvaccination: vaccinationDate,\n };\n }\n }\n\n // console.log(\"vaccinationData from rabies vaccination\", vaccinationData);\n onVaccinationDataChange(vaccinationData);\n handleClose();\n } catch (error) {\n console.error(\"Error in handleSave:\", error);\n // You might want to show an error message to the user here\n }\n };\n\n const fetchVaccinationName = async () => {\n try {\n const response = await axios.get(\n `/petinfo/availablevaccines/${getPetTypeForAPI(petType)}`,\n {\n headers: {\n Authorization: loginToken,\n },\n }\n );\n // console.log(\"Vaccination Name:\", response.data.message);\n if (response.data.message) {\n setVaccinationName(response.data.message);\n }\n } catch (error) {\n console.error(\"Error fetching vaccination name:\", error);\n }\n };\n // console.log(selectedVaccine, \"selected vaccine\");\n\n const handleMedicalRecordSave = async () => {\n const apiPetType = getPetTypeForAPI(petType);\n let vaccinationData = {};\n let bookingData = {};\n\n const formatDate = (date) => {\n if (date instanceof Date && !isNaN(date)) {\n return date.toISOString().split(\"T\")[0];\n }\n console.warn(\"Invalid date:\", date);\n return \"\";\n };\n\n const formatDocuments = (documents) => {\n if (!documents) return [];\n if (Array.isArray(documents)) {\n return documents.map((doc) => ({\n petId: petId.id,\n docType: doc.docType || \"Vaccination Certificate\",\n fileType: doc.fileType || \"PDF\",\n url: doc.url,\n }));\n }\n // If single document, wrap in array\n return [\n {\n petId: petId.id,\n docType: documents.docType || \"Vaccination Certificate\",\n fileType: documents.fileType || \"PDF\",\n url: documents.url,\n },\n ];\n };\n\n try {\n if (vaccinated) {\n // Prepare vaccination data\n vaccinationData = {\n Vaccination: [\n {\n petId: petId.id,\n currentvaccination: selected,\n LastVaccinationDate: vaccinationDate,\n NoOfDoses:\n vaccinationDose === \"Initial Dose\"\n ? 1\n : vaccinationDose === \"Booster Dose\"\n ? 2\n : 3,\n nextvaccinationname: nextVaccinationName,\n nextvaccinationDate: formatDate(nextVacciDate),\n lastdoseType: vaccinationDose,\n nextdoseType: nextdoseType,\n documentList: formatDocuments(uploadedFile),\n },\n ],\n nonvaccination: \"\",\n };\n\n // Call vaccination API\n const response = await axios.post(\n \"/petinfo/vaccination/add\",\n vaccinationData,\n {\n headers: {\n Authorization: signupToken || loginToken,\n },\n }\n );\n\n console.log(response.data);\n if (response.data.status === 200) {\n onVaccinationDataChange(vaccinationData);\n console.log(\"Medical record saved successfully\", response.data);\n await hanldeVaccinationRecord();\n handleClose();\n } else {\n throw new Error(\"Failed to save medical record\");\n }\n } else {\n // Prepare vaccination booking data\n bookingData = {\n petId: petId.id,\n nextDoseType: vaccinationDose,\n nextvaccinationname: selected,\n productId: selectedVaccine.productId, // Ensure `productId` is defined\n variantId: selectedVaccine.variantId, // Ensure `variantId` is defined\n selectedDate: \"\",\n };\n // console.log(\"bookingData\", bookingData);\n\n // Call vaccination booking API\n const response = await axios.post(\n \"/petinfo/vaccinationbooking\",\n bookingData,\n {\n headers: {\n Authorization: signupToken || loginToken,\n },\n }\n );\n\n // console.log(response.data);\n\n if (response.data.status === 200) {\n const bookingId = response.data.data;\n // console.log(\"Booking ID:\", bookingId.id);\n console.log(\"Vaccination booking saved successfully\", response.data);\n setBookingData(bookingId);\n setOpenCheckOut(true);\n // handleClose();\n }\n // console.log(\n // \"Vaccination booking saved successfully\",\n // response.data.message\n // );\n }\n } catch (error) {\n console.error(\"Error in handleMedicalRecordSave:\", error);\n setError(\"Failed to save data. Please try again.\");\n }\n };\n\n const handleSaveWrapper = () => {\n // if (isFromMedicalRecord) {\n // handleMedicalRecordSave();\n // console.log(\"isFromMedicalRecord\", isFromMedicalRecord);\n // } else {\n // handleSave();\n // }\n\n if (validateForm()) {\n if (isFromMedicalRecord) {\n handleMedicalRecordSave();\n } else {\n handleSave();\n }\n }\n };\n\n // Error message rendering helper\n const renderErrorMessage = (errorKey) => {\n return errors[errorKey] ? (\n\n {errors[errorKey]}\n
\n ) : null;\n };\n\n if (!isOpen) return null;\n\n // console.log(isFromMedicalRecord, \"isFromMedicalRecord\");\n\n // Render the \"Other\" pet type form\n if (petType !== \"Dog (Canids)\" && petType !== \"Cat (Feline)\") {\n return (\n\n
\n \n );\n }\n\n return (\n \n
\n \n {isFromMedicalRecord &&
\n Vaccination
}\n\n {!isFromMedicalRecord &&Rabies Vaccination Details
}\n\n
\n \n
\n \n
\n \n
\n \n setVaccinationName(e.target.value)}\n placeholder=\"Vaccination Name\"\n className={`form-group-select ${\n errors.vaccinationName ? \"border-red-500 border\" : \"\"\n }`}\n />\n {renderErrorMessage(\"vaccinationName\")}\n
\n\n \n (e.target.type = \"date\")}\n onBlur={(e) =>\n (e.target.type = e.target.value ? \"date\" : \"text\")\n }\n value={vaccinationDate}\n onChange={handleVaccinationDate}\n aria-label=\"Vaccination Date\"\n className={`form-group-select ${\n errors.vaccinationDate ? \"border-red-500 border\" : \"\"\n }`}\n />\n {renderErrorMessage(\"vaccinationDate\")}\n
\n\n \n setVaccinationDose(e.target.value)}\n placeholder=\"Vaccination Dose\"\n className={`form-group-select ${\n errors.vaccinationDose ? \"border-red-500 border\" : \"\"\n }`}\n />\n {renderErrorMessage(\"vaccinationDose\")}\n
\n\n \n {uploadedFile ? (\n <>\n
\n\n {/* {error && {uploadedFile.docType}
\n \n \n ) : (\n <>\nAdd Document
\n{error}
} */}\n\n \n \n
\n \n
\n {openCheckOut && (\n \n
\n \n
\n \n {isFromMedicalRecord &&
Vaccination
}\n\n {!isFromMedicalRecord &&Rabies Vaccination Details
}\n \n\n
\n \n
\n \n
\n \n {isFromMedicalRecord ||\n petType === \"Dog (Canids)\" ||\n petType === \"Cat (Feline)\"\n ? petId?.petName && (\n
\n \n
\n ) : (\n \n setIsOpenDropdown(!isOpenDropdown)}\n className={`w-full h-[9vh] px-[1vw] py-[.5vw] text-left bg-[#F5F5F5] ${\n errors.selected ? \"border-red-500 border\" : \"\"\n } rounded-[1vw] focus:outline-none transition-all duration-300 `}\n disabled={isLoading}\n >\n
\n \n \n {selected || \"Select vaccination\"}\n \n \n
\n \n {renderErrorMessage(\"selected\")}\n {isOpenDropdown && vaccinationName.length > 0 && (\n \n {vaccinationName.map((vaccination) => (\n \n \n {vaccination.Name}\n \n {\n setSelected(vaccination.Name);\n setIsOpenDropdown(false);\n }}\n disabled={isLoading}\n className=\"w-[1vw] h-[1vw] text-blue-600 border-gray-300 focus:ring-blue-500\"\n // className={`form-group-select ${\n // errors.vaccinationName\n // ? \"border-red-500 border\"\n // : \"\"\n // }`}\n />\n {renderErrorMessage(\"vaccinationName\")}\n \n ))}\n
\n )}\n \n \n setVaccinationName({ Name: e.target.value })\n }\n aria-label=\"Anti Rabies Vaccination\"\n placeholder=\"Anti Rabies Vaccination\"\n className={`form-group-select ${\n errors.vaccinationName ? \"border-red-500 border\" : \"\"\n }`}\n readOnly\n />\n {renderErrorMessage(\"vaccinationName\")}\n
\n )}\n {vaccinated ? (\n <>\n \n (e.target.type = \"date\")}\n onBlur={(e) =>\n (e.target.type = e.target.value ? \"date\" : \"text\")\n }\n value={vaccinationDate}\n onChange={handleVaccinationDate}\n aria-label=\"Vaccination Date\"\n className={`form-group-select ${\n errors.vaccinationDate ? \"border-red-500 border\" : \"\"\n }`}\n />\n {renderErrorMessage(\"vaccinationDate\")}\n
\n\n \n \n \n \n \n \n \n {renderErrorMessage(\"vaccinationDose\")}\n
\n \n ) : (\n <>\n \n \n \n \n \n \n \n {renderErrorMessage(\"vaccinationDose\")}\n
\n\n {/* \n (e.target.type = \"date\")}\n onBlur={(e) =>\n (e.target.type = e.target.value ? \"date\" : \"text\")\n }\n value={vaccinationDate}\n onChange={handleVaccinationDate}\n className={`form-group-select ${\n errors.vaccinationDate ? \"border-red-500 border\" : \"\"\n }`}\n aria-label=\"Select Date for Vaccination\"\n />\n {renderErrorMessage(\"vaccinationDate\")}\n
*/}\n\n {isLoading ? (\n \n \n Fetching vaccine options\n \n
\n ) : error ? (\n \n
\n ) : (\n <>\n {error}
\n\n setVaccinationName(e.target.value)}\n aria-label=\"Vaccination Name\"\n className=\"form-group-select\"\n >\n \n {vaccinationList.map((vaccine) => (\n \n ))}\n \n
\n\n \n (e.target.type = \"date\")}\n onBlur={(e) =>\n (e.target.type = e.target.value ? \"date\" : \"text\")\n }\n value={vaccinationDate}\n onChange={handleVaccinationDate}\n aria-label=\"Last Vaccination Date\"\n />\n
\n\n \n \n \n \n \n \n \n
\n \n ) : (\n \n (e.target.type = \"date\")}\n onBlur={(e) =>\n (e.target.type = e.target.value ? \"date\" : \"text\")\n }\n value={vaccinationDate}\n onChange={handleVaccinationDate}\n aria-label=\"Select Date for Vaccination\"\n />\n
\n )}\n \n )}\n {(petType === \"Dog (Canids)\" || petType === \"Cat (Feline)\") &&\n vaccinated && (\n \n {uploadedFile ? (\n <>\n
\n )}\n {uploadedFile.docType}
\n {/*{uploadedFile.docName}
*/}\n\n \n \n ) : (\n <>\nAdd Document
\n\n \n
\n \n
\n );\n}\n","import axios from \"axios\";\n\nconst instance = axios.create({\n // baseURL:'http://localhost:2020/',\n // baseURL: \"http://192.168.1.17:2020/\",\n baseURL: \"https://backendproduction.peteye.pet/\",\n\n // baseURL: \" https://devbackendapi.peteye.pet/\",\n withCredentials: true,\n});\n\nexport default instance;\n","import React from \"react\";\n\nexport default function Icons({ name, active }) {\n switch (name) {\n case \"header-search\":\n return (\n \n {header && 
\n
\n {header}
}\n{message}
\n\n
\n \n\n {prescriptionOpen && (\n \n \n
*/}\n \n {categories.map((category) => (\n
\n\n {/* \n
\n ))}\n {category}
\n {cartData[category].map((item) => (\n\n
\n ))}\n \n
\n \n
\n \n
\n {item.Products.ProductName}
\n{item.Products.Description}
\n\n
\n \n {item.productvariant.unit}\n
\n\n
\n \n handleQuantityCartChange(item.id, -1)}\n >\n -\n \n \n {item.quantity}\n \n handleQuantityCartChange(item.id, 1)}\n >\n +\n \n
\n \n
\n ₹
\n\n {(\n (item.productvariant.price /\n (1 -\n (item.productvariant.OfferPercentage || 0) /\n 100)) *\n item.quantity\n ).toFixed(0)}\n
\n\n {parseFloat(\n item.productvariant.price * item.quantity\n ).toFixed(2)}\n
\n\n Apply Coupon\n
\n\n
\n
\n );\n};\n\nexport default Address;\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport DogPettingIcon from \"../../../../Pages/Homepage/DogPettingIcon\";\nimport \"./Checkout.css\";\nimport axios from \"../../../../axios\";\nimport Cookies from \"js-cookie\";\nimport { useShop } from \"../../ShopContext\";\nimport CartItems from \"../CartItems\";\nimport PharmacyItems from \"../PharmacyItems\";\nimport Address from \"./Address\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport ShopGif from \"../../ShopGif/ShopGifs\";\nimport { useNavigate } from \"react-router-dom\";\nimport Icons from \"../../../../context/Icons\";\n\nexport default function Checkout({\n isOpen,\n isClose,\n isVetOpen,\n bookingData,\n bookingVaccine = false,\n petId,\n selectedPetType,\n}) {\n const navigate = useNavigate();\n const [isClosing, setIsClosing] = useState(false);\n const [isClosing1, setIsClosing1] = useState(false);\n const [addNewAddress, setAddNewAddress] = useState(false);\n const [isEditing, setIsEditing] = useState(null);\n const {\n ActiveTab,\n calculateCartTotal,\n calculatePharmacyCartTotal,\n totalDiscount,\n cartTotal,\n pharmacyCartTotal,\n pharmacyCartData,\n paraVetChecked,\n cartData,\n cartCount,\n pharmacyCount,\n } = useShop();\n // console.log(ActiveTab, \"active tab\");\n // console.log(isVetOpen, \"is vet open\");\n // console.log(bookingData, selectedPetType, \"booking id\");\n // console.log(cartCount.totalCount, \"cart count\", pharmacyCount.totalCount);\n // console.log(bookingVaccine, \"booking vaccine\");\n const [isCheckedDeworm, setIsCheckedDeworm] = useState(false);\n const [selectedDewormProduct, setSelectedDewormProduct] = useState([]);\n const [dewormProducts, setDewormProducts] = useState([]);\n const [dewormTotal, setDewormTotal] = useState(0);\n\n const loginToken = Cookies.get(\"loginToken\");\n const [errMessage, setErrMessage] = useState(\"\");\n const [addresses, setAddresses] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [addressId, setAddressId] = useState(\"\");\n const [openAlert, setopenAlert] = useState(false);\n const [showSuccessGif, setShowSuccessGif] = useState(false);\n const [gifDetails, setGifDetails] = useState({\n gif: \"\",\n message: \"\",\n });\n const [openOrderSuccess, setopenOrderSuccess] = useState(false);\n\n const [selectedAddressId, setSelectedAddressId] = useState(null);\n const [error, setError] = useState(\"\");\n\n //scroll for deworm \n\n const scrollContainerRef = useRef(null);\n const dividerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n useEffect(() => {\n const scrollContainer = scrollContainerRef.current;\n const divider = dividerRef.current;\n\n const handleScroll = () => {\n if (!divider || !scrollContainer) return;\n const scrollLeft = scrollContainer.scrollLeft;\n const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;\n const scrollPercentage = (scrollLeft / maxScrollLeft) * 100;\n divider.style.width = `${scrollPercentage}%`;\n };\n\n const handleMouseDown = (event) => {\n setIsDragging(true);\n scrollContainer.isDown = true;\n scrollContainer.startX = event.pageX - scrollContainer.offsetLeft;\n scrollContainer.scrollLeft = scrollContainer.scrollLeft;\n };\n\n const handleMouseLeave = () => {\n setIsDragging(false);\n scrollContainer.isDown = false;\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n scrollContainer.isDown = false;\n };\n\n const handleMouseMove = (event) => {\n if (!scrollContainer.isDown || !isDragging) return;\n event.preventDefault();\n const x = event.pageX - scrollContainer.offsetLeft;\n const walk = (x - scrollContainer.startX) * 3;\n scrollContainer.scrollLeft -= walk;\n };\n\n if (scrollContainer) {\n scrollContainer.addEventListener(\"scroll\", handleScroll);\n scrollContainer.addEventListener(\"mousedown\", handleMouseDown);\n scrollContainer.addEventListener(\"mouseleave\", handleMouseLeave);\n scrollContainer.addEventListener(\"mouseup\", handleMouseUp);\n scrollContainer.addEventListener(\"mousemove\", handleMouseMove);\n }\n\n return () => {\n if (scrollContainer) {\n scrollContainer.removeEventListener(\"scroll\", handleScroll);\n scrollContainer.removeEventListener(\"mousedown\", handleMouseDown);\n scrollContainer.removeEventListener(\"mouseleave\", handleMouseLeave);\n scrollContainer.removeEventListener(\"mouseup\", handleMouseUp);\n scrollContainer.removeEventListener(\"mousemove\", handleMouseMove);\n }\n };\n }, [isDragging]);\n\n const scrollLeft = () => {\n if (scrollContainerRef.current) {\n scrollContainerRef.current.scrollBy({ left: -300, behavior: \"smooth\" });\n }\n };\n\n const scrollRight = () => {\n if (scrollContainerRef.current) {\n scrollContainerRef.current.scrollBy({ left: 300, behavior: \"smooth\" });\n }\n };\n //end of scroll\n\n const [newError, setNewError] = useState({\n addressError: \"\",\n timeSlotError: \"\",\n dewormError: \"\",\n });\n\n const { login } = useSelector((state) => state);\n\n const userInfo = login?.details?.userInfo;\n // console.log(userInfo, \"user info\");\n const dispatch = useDispatch();\n const [vaccinationBooking, setVaccinationBooking] = useState([]);\n const isPharmacyTab = ActiveTab === \"pharmacy\" && paraVetChecked;\n const isBookingVaccine = bookingVaccine && paraVetChecked;\n const showParaVet = isPharmacyTab || isBookingVaccine;\n const [vaccinationBookingDiscount, setVaccinationBookingDiscount] =\n useState(0);\n\n // console.log(userInfo, \"user info\");\n\n const categories = bookingVaccine\n ? vaccinationBooking?.map((item) => item)\n : Object.keys(pharmacyCartData).filter((category) =>\n pharmacyCartData[category]?.map((item) => item)\n );\n // console.log(categories, \"pharmacy category\");\n\n const [paraVetAmount, setParaVetAmount] = useState(0);\n const petSelectionDetails = JSON.parse(\n localStorage.getItem(\"petSelectionDetails\") || \"[]\"\n );\n const selectedPetIds = Array.isArray(petSelectionDetails)\n ? petSelectionDetails.map((item) => item)\n : [];\n // console.log(selectedPetIds, \"petSelectionDetails\");\n\n // console.log(vaccinationBookingDiscount, \"vaccineBookingDiscount\");\n\n // console.log(vaccinationBooking, \"vaccineBookingAmount\");\n\n useEffect(() => {\n fetchAddresses();\n }, []);\n\n useEffect(() => {\n if (bookingVaccine && bookingData) {\n fetchVaccinationCart();\n }\n }, [bookingVaccine, bookingData]);\n\n useEffect(() => {\n fetchDewormProducts();\n }, []);\n\n useEffect(() => {\n loadRazorpayScript();\n }, []);\n useEffect(() => {\n fetchParavetPricing(\n categories,\n petSelectionDetails,\n bookingVaccine,\n bookingData,\n selectedPetType\n );\n }, []);\n\n useEffect(() => {\n // console.log(\"Selected Deworm Product:\", selectedDewormProduct);\n }, [selectedDewormProduct]);\n\n const handleGifClose = () => {\n setShowSuccessGif(false);\n };\n\n const fetchDewormProducts = async () => {\n try {\n const response = await axios.get(`/shop/searchproduct?category=Deworm`, {\n headers: {\n Authorization: loginToken,\n },\n });\n if (response.data.status === 200) {\n // console.log(\"Response dewoming products:\", response.data.message);\n setDewormProducts(response.data.message);\n }\n } catch (error) {\n console.error(\"Error fetching products:\", error);\n setNewError({ ...newError, dewormError: error?.message });\n }\n };\n const handleProductSelection = (product) => {\n setSelectedDewormProduct((currentSelected) =>\n currentSelected?.id === product.id ? null : product\n );\n setDewormTotal(product.productvariants[0]?.price);\n };\n\n const getPrescriptionFileData = () => {\n const storedData = localStorage.getItem(\"PrescriptionFile\");\n if (!storedData) return null;\n try {\n return JSON.parse(storedData);\n } catch (error) {\n console.error(\"Error parsing stored file data:\", error);\n return null;\n }\n };\n\n const fetchVaccinationCart = async () => {\n try {\n setIsLoading(true);\n if (!bookingData) {\n throw new Error(\"No booking data available\");\n }\n const response = await axios.get(\n `/petinfo/vaccination/booking/${bookingData}`,\n {\n headers: {\n Authorization: loginToken,\n },\n }\n );\n const vaccinationCartData = Array.isArray(response.data.data)\n ? response.data.data\n : [response.data.data];\n // console.log(vaccinationCartData, \"vaccinationCartData\");\n setVaccinationBooking(vaccinationCartData);\n calculateTotalDiscount(vaccinationCartData);\n dispatch({ type: \"refresh\" });\n setIsLoading(false);\n } catch (err) {\n console.error(\"Error fetching vaccination cart:\", err);\n setError(err);\n setIsLoading(false);\n }\n };\n const vaccineTotal = vaccinationBooking.map(\n (item) => item?.Product?.productvariants[0]?.price\n );\n const vaccineTotalNumbers = vaccineTotal.map((price) => Number(price));\n\n // Sum the numbers in the array\n const vaccineTotalSum = vaccineTotalNumbers.reduce(\n (acc, curr) => acc + curr,\n 0\n );\n\n // console.log(vaccineTotalSum, \"deworm total\");\n\n const calculateTotalDiscount = (cartData) => {\n if (\n !cartData ||\n !cartData[0].Product ||\n !cartData[0].Product.productvariants?.[0]\n ) {\n return 0;\n }\n\n const variant = cartData[0].Product.productvariants[0];\n const offerPercentage = variant.OfferPercentage || 0;\n\n // Calculate original price before discount\n const originalPrice = variant.price / (1 - offerPercentage / 100);\n\n // Calculate total discount\n const discount = originalPrice - variant.price;\n\n setVaccinationBookingDiscount(discount);\n return discount;\n };\n // console.log(vaccinationBooking, bookingData, \"vaccinationBooking113\");\n // Example usage:\n const prescriptionFileData = getPrescriptionFileData();\n // console.log(prescriptionFileData, \"prescriptionFileData\");\n\n const fetchParavetPricing = async (\n categories = [],\n petSelectionDetails = [],\n bookingVaccine = false,\n bookingData = null,\n selectedPetType = null\n ) => {\n // console.log(\"fetchParavetPricing called\");\n try {\n // console.log(\"Input data:\", {\n // categories,\n // petSelectionDetails,\n // bookingVaccine,\n // bookingData,\n // selectedPetType,\n // });\n\n // Early return if we don't have the minimum required data\n if (!categories.length && !bookingVaccine) {\n console.log(\"No categories or booking data available\");\n return;\n }\n\n // Get service type safely\n let serviceType;\n if (bookingVaccine) {\n serviceType = \"Vaccination\";\n } else {\n // Safely access the first category if it exists\n const firstCategory = Array.isArray(categories)\n ? categories[0]\n : categories;\n serviceType = firstCategory;\n }\n\n // Transform service type if needed\n if (serviceType === \"Vaccine\") {\n serviceType = \"Vaccination\";\n } else if (serviceType === \"Deworm\") {\n serviceType = \"Deworming\";\n }\n console.log(serviceType, \"service type\");\n\n // Get pet type safely\n let petType;\n if ((bookingVaccine && petId && petId.petType) || selectedPetType) {\n petType = petId.petType || selectedPetType;\n } else if (petSelectionDetails && petSelectionDetails[0]) {\n petType = petSelectionDetails[0].petType;\n } else {\n console.log(\"No pet type available\");\n return;\n }\n // console.log(petType, \"pet type\");\n\n // Only proceed if we have both required values\n if (!serviceType || !petType) {\n console.warn(\"Missing required data:\", { serviceType, petType });\n return;\n }\n\n const response = await axios.get(\n `/shop/paravetpricing?petType=${petType}&serviceType=${serviceType}`,\n {\n headers: {\n Authorization: loginToken,\n },\n }\n );\n\n setParaVetAmount(response.data);\n // console.log(response.data, paraVetAmount?.data?.price, \"paravet amount\");\n } catch (err) {\n console.error(\"Error in fetchParavetPricing:\", err);\n setError(err?.message || \"Error fetching paravet pricing\");\n }\n };\n\n const loadRazorpayScript = () => {\n const script = document.createElement(\"script\");\n script.src = \"https://checkout.razorpay.com/v1/checkout.js\";\n script.async = true;\n script.onload = handleRazorpayScriptLoad;\n document.body.appendChild(script);\n };\n\n const fetchAddresses = async () => {\n try {\n const response = await axios.get(\"/shop/getaddress\", {\n headers: {\n Authorization: loginToken,\n },\n });\n setAddresses(response.data.message);\n dispatch({ type: \"refresh\" });\n // console.log(\"Addresses:\", response.data.message);\n } catch (error) {\n console.error(\"Error fetching addresses:\", error);\n setAddresses([]);\n } finally {\n setIsLoading(false);\n }\n };\n const handleRazorpayScriptLoad = () => {};\n\n const finalCartTotal = (cartTotal - totalDiscount).toFixed(2);\n\n const finalPharmacyCartTotal = (\n pharmacyCartTotal -\n totalDiscount +\n (paraVetChecked && paraVetAmount?.data?.price\n ? paraVetAmount.data.price\n : 0)\n ).toFixed(2);\n // console.log(\"paraVetAmount.data.price:\", paraVetAmount?.data?.price);\n // console.log(\"paraVetChecked:\", paraVetChecked);\n\n const finalVaccineBookingAmount =\n Number(\n vaccinationBooking\n .map((item) => item.Product.productvariants[0].price)\n .reduce((acc, curr) => acc + curr, 0)\n ) +\n (paraVetChecked && paraVetAmount?.data?.price\n ? Number(paraVetAmount.data.price)\n : 0) +\n (selectedDewormProduct ? Number(dewormTotal) : 0);\n\n // console.log(finalVaccineBookingAmount, \"Final Vaccine Booking Amount\");\n\n // console.log(finalVaccineBookingAmount, \"finalVaccineBookingAmount\");\n\n // ORDER CREATION FOR PAYMENT\n const amount = bookingVaccine\n ? finalVaccineBookingAmount\n : ActiveTab === \"cart\"\n ? finalCartTotal\n : finalPharmacyCartTotal;\n\n const uploadImageToS3 = async (file) => {\n const allowedTypes = [\n \"application/pdf\",\n \"image/jpeg\",\n \"image/png\",\n \"image/jpg\",\n ];\n\n // console.log(\"File object:\", {\n // type: file.type,\n // name: file.name,\n // size: file.size,\n // lastModified: file.lastModified,\n // });\n\n if (!allowedTypes.includes(file.type)) {\n console.error(\"Invalid file type:\", file.type);\n throw new Error(\n `File type ${\n file.type\n } is not allowed. Allowed types: ${allowedTypes.join(\", \")}`\n );\n }\n\n const formData = new FormData();\n\n // Log FormData content for debugging\n // console.log(\"Before append - File details:\", {\n // type: file.type,\n // name: file.name,\n // });\n\n formData.append(\"file\", file);\n\n // Verify FormData content\n // console.log(\"FormData entries:\");\n for (let pair of formData.entries()) {\n // console.log(pair[0], pair[1]);\n }\n try {\n const response = await axios.post(\"/file/uploadFile\", formData, {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n Authorization: loginToken,\n },\n });\n // console.log(\"File uploaded to S3:\", response.data);\n\n return response.data.Message ? response.data.Message.getPeteye : \"\";\n } catch (error) {\n console.error(\"Error uploading image to S3:\", error);\n return null;\n }\n };\n\n const handlePayment = async () => {\n // console.log(addressId, \"addressId\");\n dispatch({ type: \"refresh\" });\n if (!addressId) {\n setError(\"Add address for shipment\");\n setNewError({ ...newError, addressError: \"Add address for shipment\" });\n setTimeout(() => setError(\"\"), 3000);\n return;\n }\n if (bookingVaccine) {\n // First check paraVetChecked\n if (!paraVetChecked) {\n setError(\"Please select paraVet option\");\n setNewError({\n ...newError,\n timeSlotError: \"Please select paraVet option\",\n });\n setTimeout(() => setError(\"\"), 3000);\n return;\n }\n\n // Then check vaccination date and time regardless of paraVetChecked\n if (!localStorage.getItem(\"selectedVaccineDate\")?.trim()) {\n setError(\"Please select a date for vaccination\");\n setNewError({\n ...newError,\n timeSlotError: \"Please select a date for vaccination\",\n });\n setTimeout(() => setError(\"\"), 3000);\n return;\n }\n\n if (!localStorage.getItem(\"selectedVaccineTimeSlot\")?.trim()) {\n setError(\"Please select a time slot for vaccination\");\n setNewError({\n ...newError,\n timeSlotError: \"Please select a time slot for vaccination\",\n });\n setTimeout(() => setError(\"\"), 3000);\n return;\n }\n }\n\n // Check for prescription file\n const prescriptionFileData = getPrescriptionFileData();\n\n if (prescriptionFileData) {\n // Handle case with prescription file\n try {\n // Log the stored prescription data\n // console.log(\"Stored prescription data:\", prescriptionFileData);\n\n // Ensure correct MIME type\n const fileType = prescriptionFileData[0].type.toLowerCase();\n const file = new File(\n [prescriptionFileData],\n prescriptionFileData[0].name,\n {\n type: fileType,\n lastModified: prescriptionFileData.lastModified,\n }\n );\n\n // Log the created File object\n // console.log(\"Created File object:\", {\n // name: file.name,\n // type: file.type,\n // size: file.size,\n // });\n\n // Upload to S3\n const prescriptionUrl = await uploadImageToS3(file);\n\n try {\n const prescriptionResponse = await axios.post(\n \"/shop/addprescription\",\n {\n prescription: prescriptionUrl,\n fileType: fileType.split(\"/\")[1],\n selectedPetIds: selectedPetIds,\n },\n {\n headers: {\n Authorization: loginToken,\n \"Content-Type\": \"application/json\",\n },\n }\n );\n // console.log(\"Prescription added:\", prescriptionResponse.data);\n } catch (prescriptionError) {\n console.error(\"Prescription API error:\", {\n message: prescriptionError.message,\n response: prescriptionError.response?.data,\n });\n throw prescriptionError;\n }\n } catch (error) {\n console.error(\"Error handling prescription:\", error);\n // Continue with payment even if prescription handling fails\n }\n }\n\n // Proceed with normal payment flow\n axios\n .post(\n \"/razerpay/ordercreate\",\n {\n amount: Math.round(amount),\n },\n {\n headers: {\n Authorization: loginToken,\n },\n }\n )\n .then((response) => {\n if (response?.data?.status == \"200\") {\n const orderId = response.data?.message?.getresponse.id;\n // const key = response.data?.message?.rzp_key;\\\n const key = process.env.REACT_APP_RZP_LIVE_KEY;\n initiateRazorpayPayment(orderId, key);\n }\n // console.log(response, \"payment response\");\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n // INITIALIZATION OF RAZORPAY\n\n const initiateRazorpayPayment = (orderId, key) => {\n const shippingAddress = getShippingAddress(selectedAddressId, addresses); // Get address\n const options = {\n key: key,\n amount: Math.round(amount),\n currency: \"INR\",\n name: \"petEYE\",\n description: \"Online Transaction\",\n image:\n \"https://peteye-drive.s3.ap-south-1.amazonaws.com/Header-Footer/image+16407.png\",\n order_id: orderId,\n handler: async (response) => {\n try {\n // console.log(\n // response,\n // \"response from initiateRazorpayPayment\",\n // orderId,\n // \"orderId\"\n // );\n\n await verifyPayment(response);\n } catch (error) {\n console.error(error);\n setopenAlert(!openAlert);\n setErrMessage(\"Payment verification failed\");\n }\n },\n prefill: {\n name: shippingAddress?.name || \"\",\n email: userInfo?.email || \"\",\n contact: shippingAddress?.mobile || \"\",\n },\n notes: {\n address: \"Razorpay Corporate Office\",\n },\n theme: {\n color: \"#262427\",\n },\n };\n\n // console.log(options, \"options werwrw\");\n\n if (window.Razorpay) {\n const rzp = new window.Razorpay(options);\n rzp.open();\n } else {\n console.error(\"Razorpay script is not loaded\");\n }\n };\n\n // PAYMENT VERIFICATION\n\n const verifyPayment = async (payment) => {\n // console.log(payment, \"payment\");\n try {\n const response = await axios.post(\n \"/razerpay/verifyorder\",\n {\n razorpay_order_id: payment?.razorpay_order_id,\n razorpay_payment_id: payment?.razorpay_payment_id,\n },\n {\n headers: {\n Authorization: loginToken,\n razorpaysignature: payment?.razorpay_signature,\n },\n }\n );\n // console.log(response);\n if (response.data.success == \"200\") {\n purchaseAdd(payment);\n } else {\n setopenAlert(!openAlert);\n setErrMessage(\"Payment failed\");\n }\n } catch (error) {\n console.error(error);\n setopenAlert(!openAlert);\n setErrMessage(\"Payment verification failed\");\n }\n };\n const getShippingAddress = (selectedAddressId, addresses) => {\n const address = addresses.find(\n (address) => address.id === selectedAddressId\n );\n return address\n ? {\n name: address.firstname + \" \" + address.lastname,\n mobile: address.mobilenumber,\n houseNo: address.HouseFloorNo,\n area: address.area,\n district: address.district,\n city: address.city,\n state: address.state,\n pincode: address.pincode,\n }\n : null;\n };\n\n const getCartData = (\n ActiveTab,\n cartData,\n pharmacyCartData,\n vaccinationBooking,\n bookingVaccine,\n selectedDewormProduct\n ) => {\n const sourceData = bookingVaccine\n ? vaccinationBooking\n : ActiveTab === \"cart\"\n ? cartData\n : pharmacyCartData;\n\n if (!sourceData || typeof sourceData !== \"object\") {\n console.error(\"Invalid source data:\", sourceData);\n return {\n taxAmount: [],\n productAmount: [],\n quantity: [],\n variantId: [],\n productId: [],\n productOverallAmount: [],\n productName: [],\n };\n }\n\n const getPrice = (item) => {\n if (bookingVaccine) {\n return item?.Product?.productvariants[0]?.price;\n }\n return item?.productvariant?.price;\n };\n\n const getTax = (item) => {\n if (bookingVaccine) {\n return item?.Product?.productvariants[0]?.Tax;\n }\n return item?.productvariant?.Tax;\n };\n\n const getId = (item) => {\n if (bookingVaccine) {\n return item?.Product?.id;\n }\n return item?.Products?.id;\n };\n\n const getProductName = (item) => {\n if (bookingVaccine) {\n return item?.Product?.ProductName;\n }\n return item?.Products?.ProductName;\n };\n\n // Custom getter for selectedDewormProduct\n const getDewormPrice = () => {\n if (selectedDewormProduct) {\n return selectedDewormProduct?.productvariants?.[0]?.price;\n }\n return null;\n };\n\n const getDewormTax = () => {\n if (selectedDewormProduct) {\n return selectedDewormProduct?.productvariants?.[0]?.Tax;\n }\n return null;\n };\n\n const getDewormProductName = () => {\n if (selectedDewormProduct) {\n return selectedDewormProduct?.ProductName;\n }\n return null;\n };\n\n const getDewormProductId = () => {\n if (selectedDewormProduct) {\n return selectedDewormProduct?.id;\n }\n return null;\n };\n\n const getDewormVariantId = () => {\n if (selectedDewormProduct) {\n return selectedDewormProduct?.productvariants?.[0]?.id;\n }\n return null;\n };\n\n const safeMap = (array, accessor) => {\n if (!Array.isArray(array)) {\n console.warn(\"Expected array but got:\", array);\n return [];\n }\n return array\n .map((item) => {\n try {\n return accessor(item);\n } catch (error) {\n console.error(\"Error accessing item property:\", error);\n return null;\n }\n })\n .filter((item) => item !== null);\n };\n\n const arrays = Object.values(sourceData)\n .map((value) => (Array.isArray(value) ? value : [value]))\n .filter(Array.isArray);\n\n const result = {\n taxAmount: [\n ...arrays.flatMap((array) => safeMap(array, (item) => getTax(item))),\n ...(bookingVaccine && selectedDewormProduct && getDewormTax()\n ? [getDewormTax()]\n : []),\n ],\n productAmount: [\n ...arrays.flatMap((array) => safeMap(array, (item) => getPrice(item))),\n ...(bookingVaccine && selectedDewormProduct && getDewormPrice()\n ? [getDewormPrice()]\n : []),\n ],\n quantity: [\n ...arrays.flatMap((array) =>\n safeMap(array, (item) => (bookingVaccine ? 1 : item?.quantity))\n ),\n ...(bookingVaccine && selectedDewormProduct ? [1] : []),\n ],\n variantId: [\n ...arrays.flatMap((array) =>\n safeMap(array, (item) =>\n bookingVaccine\n ? item?.Product?.productvariants[0]?.id\n : item?.variantId\n )\n ),\n ...(bookingVaccine && selectedDewormProduct && getDewormVariantId()\n ? [getDewormVariantId()]\n : []),\n ],\n productId: [\n ...arrays.flatMap((array) => safeMap(array, (item) => getId(item))),\n ...(bookingVaccine && selectedDewormProduct && getDewormProductId()\n ? [getDewormProductId()]\n : []),\n ],\n productOverallAmount: [\n ...arrays.flatMap((array) => safeMap(array, (item) => getPrice(item))),\n ...(bookingVaccine && selectedDewormProduct && getDewormPrice()\n ? [getDewormPrice()]\n : []),\n ],\n productName: [\n ...arrays.flatMap((array) =>\n safeMap(array, (item) => getProductName(item))\n ),\n ...(bookingVaccine && selectedDewormProduct && getDewormProductName()\n ? [getDewormProductName()]\n : []),\n ],\n };\n\n return result;\n };\n\n const purchaseAdd = async (payment) => {\n // console.log(\"Payment Details:\", payment);\n // console.log(\n // \"Address Details:\",\n // addresses.map((item) => item)\n // );\n\n const {\n taxAmount,\n productAmount,\n quantity,\n variantId,\n productId,\n productName,\n productOverallAmount,\n } = getCartData(\n ActiveTab,\n cartData,\n pharmacyCartData,\n vaccinationBooking,\n bookingVaccine,\n selectedDewormProduct\n );\n\n // Log extracted data - now showing all items\n // console.log(\"Extracted Cart Data:\", {\n // taxAmount,\n // productAmount,\n // quantity,\n // variantId,\n // productId,\n // productOverallAmount,\n // });\n\n // Create productinfo array with all items\n const productinfo = productId.map((id, index) => ({\n ProductName: String(productName[index]),\n productid: Number(productId[index]),\n variantId: Number(variantId[index]),\n Productamount: Math.round(String(productAmount[index])),\n quantity: String(quantity[index]),\n Tax: Number(taxAmount[index]),\n overAllAmount: Math.round(Number(productOverallAmount[index])),\n }));\n\n // Validate address details\n const requiredAddressFields = [\n \"firstname\",\n \"mobilenumber\",\n \"area\",\n \"city\",\n \"state\",\n \"pincode\",\n \"HouseFloorNo\",\n \"district\",\n ];\n const missingFields = addresses.flatMap((address) =>\n requiredAddressFields.filter((field) => !address[field])\n );\n\n if (missingFields.length > 0) {\n console.error(\"Missing address fields:\", missingFields);\n throw new Error(\"Complete address information is required\");\n }\n\n // Format shipping address\n const shippingAddress = getShippingAddress(selectedAddressId, addresses);\n\n // Validate payment details\n if (\n !payment.razorpay_order_id ||\n !payment.razorpay_signature ||\n !payment.razorpay_payment_id\n ) {\n console.error(\"Missing payment details:\", payment);\n throw new Error(\"Complete payment information is required\");\n }\n\n const formData = {\n Productamount: Math.round(\n productAmount.reduce((sum, amount) => sum + Number(amount), 0)\n ),\n Tax: taxAmount.reduce((sum, tax) => sum + Number(tax), 0),\n quantity: quantity.reduce((sum, qty) => sum + Number(qty), 0),\n productinfo: productinfo.map((item) => ({\n ...item,\n Productamount: Math.round(Number(item.Productamount)),\n quantity: Number(item.quantity),\n overAllAmount: Math.round(Number(item.overAllAmount)),\n })),\n overAllAmount: Math.round(amount),\n razorpay_order_id: payment.razorpay_order_id,\n Signature: payment.razorpay_signature,\n razorpay_id: payment.razorpay_payment_id,\n ShippingAddress: shippingAddress,\n orderType: bookingVaccine\n ? \"Medical\"\n : ActiveTab === \"cart\"\n ? \"General\"\n : \"Medical\",\n paravetSelected: bookingVaccine\n ? \"Yes\"\n : ActiveTab === \"cart\"\n ? \"\"\n : paraVetChecked\n ? \"Yes\"\n : \"No\",\n selectedDate: bookingVaccine\n ? localStorage.getItem(\"selectedVaccineDate\")\n : ActiveTab === \"cart\"\n ? \"\"\n : localStorage.getItem(\"selectedVaccineDate\") ?? \"\",\n timeslot: bookingVaccine\n ? localStorage.getItem(\"selectedVaccineTimeSlot\")\n : ActiveTab === \"cart\"\n ? \"\"\n : localStorage.getItem(\"selectedVaccineTimeSlot\") ?? \"\",\n vaccineBookingId: bookingVaccine ? bookingData : \"\",\n PrescriptionId: ActiveTab === \"cart\" ? \"\" : \"\",\n selectedPetIds:\n ActiveTab === \"cart\"\n ? \"\"\n : petSelectionDetails.map((item) => ({\n petId: Number(item.petId),\n productId: Number(item.productId),\n })),\n };\n\n // console.log(\"Final Request Payload:\", JSON.stringify(formData, null, 2));\n\n try {\n const purchaseResponse = await axios.post(\"/shop/purchaseadd\", formData, {\n headers: {\n Authorization: loginToken,\n \"Content-Type\": \"application/json\",\n },\n });\n\n if (purchaseResponse.data.status === 200) {\n // console.log(\"Purchase successful:\", purchaseResponse.data);\n setGifDetails({\n gif: \"https://peteye-drive.s3.ap-south-1.amazonaws.com/Web-App+Images/store/remove-wishlist.png\",\n message: \"Removed from wishlist Successfully!\",\n });\n setShowSuccessGif(true);\n setopenOrderSuccess(true);\n localStorage.clear();\n handleClose();\n navigate(\"/\");\n } else {\n console.error(\"Purchase response not OK:\", purchaseResponse.data);\n }\n } catch (error) {\n console.error(\"Purchase Error:\", {\n message: error.message,\n response: error.response?.data,\n status: error.response?.status,\n requestData: formData,\n });\n throw error;\n }\n };\n\n const handleSelectAddress = (addressId) => {\n dispatch({ type: \"refresh\" });\n setSelectedAddressId(addressId);\n setAddressId(addressId);\n dispatch({ type: \"refresh\" });\n\n // console.log(\"Selected Address ID:\", addressId); // Save the selected address ID\n };\n\n const handleOverlayClick = (e) => {\n if (e.target === e.currentTarget) {\n isClose();\n }\n };\n\n const handleClose = () => {\n setIsClosing(true);\n setTimeout(() => {\n setIsClosing(false);\n isClose();\n }, 1000);\n };\n\n const handleClose1 = () => {\n setIsClosing1(true);\n setTimeout(() => {\n setIsClosing1(false);\n setAddNewAddress((prev) => !prev);\n setIsEditing(null);\n }, 1000);\n };\n\n // Handle the edit button click\n const handleEditAddress = (index) => {\n if (!addNewAddress) {\n // Only set editing if address form isn't already open\n const selectedAddress = addresses[index];\n setIsEditing(selectedAddress.id);\n setAddNewAddress(true); // This will open the address form\n }\n };\n // console.log(addresses, \"addresses\");\n\n return (\n \n \n
\n \n handleSelectAddress(address.id)}\n style={{\n border:\n selectedAddressId === address.id\n ? \"2px solid black\"\n : \"\",\n position: \"relative\",\n }}\n >\n {selectedAddressId === address.id && (\n \n \n
\n )}\n \n
\n <>\n \n
\n \n
\n Proceed to Check - Out
\n\n
\n ));\n })()\n ) : (\n addresses.map((address, index) => (\n \n {\n e.stopPropagation();\n handleEditAddress(index);\n }}\n >\n
\n \n \n {isLoading ? (\n \n \n \n
\n Delivery to
\nLoading addresses...
\n ) : addresses.length > 0 ? (\n addresses[0] && !selectedAddressId ? (\n (() => {\n handleSelectAddress(addresses[0].id);\n dispatch({ type: \"refresh\" });\n\n // console.log(\n // handleSelectAddress(addresses[0].id),\n // \"addresses[0].id\"\n // );\n return addresses.map((address, index) => (\n{`${address.firstname} `}
\n{`${\n address?.HouseFloorNo ? address.HouseFloorNo : \"\"\n }, ${address.area}, ${address.city}, ${\n address.state\n }, ${address.pincode}`}
\nPhone No. {address.mobilenumber}
\nEdit
\n{`${address.firstname} `}
\n{`${\n address?.HouseFloorNo ? address.HouseFloorNo : \"\"\n }, ${address.area}, ${address.city}, ${\n address.state\n }, ${address.pincode}`}
\nPhone No. {address.mobilenumber}
\nEdit
\n \n \n ))\n )\n ) : (\nAdd Address
\n \n \n {newError[\"addressError\"] && (\n\n {newError[\"addressError\"]}\n
\n )}\n \n \n\n {!bookingVaccine && (\n <>\n {ActiveTab === \"cart\" && \n {/* Progress Bar */}\n \n
\n\n \n setIsCheckedDeworm(!isCheckedDeworm)}\n >\n setIsCheckedDeworm(!isCheckedDeworm)}\n checked={isCheckedDeworm}\n />\n
\n\n \n Deworm Your Dog For Health\n
\n\n \n
\n\n {/* Navigation Buttons */}\n \n
\n \n {selectedDewormProduct?.id === product.id && (\n \n )}\n
\n \n
\n \n
\n \n {product.ProductName}\n
\n\n {product.ProductDetails[0].Description}\n
\n\n \n ₹{product.productvariants[0].price}\n \n \n ₹{product.productvariants[0].MRP}\n \n
\n \n ))}\n \n \n \n )}\n\n \n
\n \n \n \n
\n Order Summary
\n\n
\n \n
\n Subtotal
\n\n ₹\n {!bookingVaccine\n ? (ActiveTab === \"cart\"\n ? calculateCartTotal()\n : calculatePharmacyCartTotal()\n ).toFixed(2)\n : vaccineTotalSum +\n (selectedDewormProduct && Number(dewormTotal))}\n
\n\n
\n {showParaVet && (\n Discount on MRP
\n\n - ₹\n {!bookingVaccine\n ? totalDiscount.toFixed(2)\n : vaccinationBookingDiscount.toFixed(2)}\n
\n\n
\n )}\n {/* ParaVet
\n₹{paraVetAmount?.data?.price || 0}
\n\n
*/}\n {/* GST
\n\n - ₹{\" \"}\n {(\n (ActiveTab === \"cart\"\n ? calculateCartTotal()\n : calculatePharmacyCartTotal()) * 0.18\n ).toFixed(2)}\n
\n\n
*/}\n \n Shipping
\nFREE
\n\n
\n Total
\n\n
\n \n ₹\n {Number(\n !bookingVaccine\n ? ActiveTab === \"cart\"\n ? finalCartTotal\n : finalPharmacyCartTotal\n : finalVaccineBookingAmount\n ) +\n Number(\n !bookingVaccine\n ? totalDiscount.toFixed(2)\n : vaccinationBookingDiscount.toFixed(2)\n )}\n
\n\n ₹\n {!bookingVaccine\n ? ActiveTab === \"cart\"\n ? finalCartTotal\n : finalPharmacyCartTotal\n : finalVaccineBookingAmount}\n
\n\n
\n Your total savings
\n\n ₹\n {!bookingVaccine\n ? totalDiscount.toFixed(2)\n : vaccinationBookingDiscount.toFixed(2)}\n
\n\n \n
\n \n\n {(addNewAddress || isEditing !== null) && (\n \n
\n \n
\n\n \n
\n
\n \n
\n \n
\n \n {coupons.map((coupon) => (\n
\n \n ))}\n \n \n \n );\n}\n","import React, { useEffect, useState } from \"react\";\nimport axios from \"../../../../axios\";\nimport Cookies from \"js-cookie\";\nimport { useDispatch } from \"react-redux\";\n\nconst VaccinationBookingCart = ({ bookingData }) => {\n const loginToken = Cookies.get(\"loginToken\");\n const [vaccinationCart, setVaccinationCart] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n const [vaccinationBookingDiscount, setVaccinationBookingDiscount] = useState(0);\n const dispatch = useDispatch();\n\n const calculateTotalDiscount = (cartData) => {\n if (!cartData || !cartData.Product || !cartData.Product.productvariants?.[0]) {\n return 0;\n }\n const variant = cartData.Product.productvariants[0];\n const offerPercentage = variant.OfferPercentage || 0;\n // Calculate original price before discount\n const originalPrice = variant.price / (1 - offerPercentage / 100);\n // Calculate total discount\n const discount = originalPrice - variant.price;\n setVaccinationBookingDiscount(discount);\n return discount;\n };\n\n const fetchVaccinationCart = async () => {\n try {\n setIsLoading(true);\n const response = await axios.get(`/petinfo/vaccination/booking/${bookingData}`, {\n headers: {\n Authorization: loginToken,\n },\n });\n const vaccinationCartData = response.data.data;\n setVaccinationCart(vaccinationCartData);\n // Calculate discount as soon as we get the data\n calculateTotalDiscount(vaccinationCartData);\n dispatch({ type: \"refresh\" });\n setIsLoading(false);\n } catch (err) {\n console.error(\"Error fetching vaccination cart:\", err);\n setError(err);\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n fetchVaccinationCart();\n }, [bookingData]);\n\n if (isLoading) {\n return \n toggleDescription(coupon.id)}\n className=\"text-[clamp(1rem,1.2vw,3.5rem)] font-[Open Sans] font-[550]\"\n >\n {expandedCoupons[coupon.id] ? \"Show less -\" : \"Show more +\"}\n
\n \n
\n \n FLAT OFF\n
\n\n \n
\n \n
\n \n {coupon.couponCode}\n
\n \n\n {coupon.couponName}\n
\n\n Use code {coupon.couponCode} & get {coupon.discountValue}% off\n on orders above Rs.{coupon.minPurchaseAmount}\n
\n\n {coupon.description}\n
\nLoading...
;\n }\n\n if (error) {\n return Error loading vaccination data
;\n }\n\n if (!vaccinationCart || !vaccinationCart.Product) {\n return No vaccination data available
;\n }\n\n // Define offerPercentage here\n const offerPercentage = vaccinationCart.Product.productvariants?.[0]?.OfferPercentage || 0;\n\n return (\n \n
\n );\n};\n\nexport default VaccinationBookingCart;","import React, { useEffect, useState } from \"react\";\nimport DogPettingIcon from \"../../../Pages/Homepage/DogPettingIcon\"; // Assuming this is how you import the icon\nimport \"./ProductActions.css\";\nimport axios from \"../../../axios\";\nimport { LuUpload } from \"react-icons/lu\";\nimport { IoDocumentText } from \"react-icons/io5\";\nimport { MdDeleteOutline } from \"react-icons/md\";\nimport Success from \"../../../Pages/Profile/Success/Success\";\nimport { AiFillFilePdf } from \"react-icons/ai\";\nimport Prescription from \"./Prescription\";\nimport Checkout from \"./Checkout/Checkout\";\nimport { useShop } from \"../ShopContext\";\nimport Coupons from \"./Coupons\";\nimport { MdOutlineKeyboardArrowRight } from \"react-icons/md\";\n// import { ChevronUp, ChevronDown } from \"lucide-react\";\nimport Cookies from \"js-cookie\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport Failedgif from \"../../../Pages/Failed/Failedgif\";\nimport {\n ChevronUp,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n} from \"lucide-react\";\nimport VaccinationBookingCart from \"./Checkout/VaccinationBookingCart\";\nimport { CheckSquare } from \"lucide-react\";\nimport Icons from \"../../../context/Icons\";\n\nexport default function PharmacyItems({\n bookingVaccine = false,\n bookingData,\n errorState,\n}) {\n const {\n pharmacyCartData,\n handleQuantityPharmacyCartChange,\n groupItemsByCategory,\n calculatePharmacyCartTotal,\n calculateTotalDiscount,\n calculateDiscountedPrice,\n fetchPharmacyCartItems,\n handleQuantityChange,\n totalDiscount,\n handlePrescriptionFile,\n selectedVaccineDate,\n setSelectedVaccineDate,\n selectedVaccineTimeSlot,\n setSelectedVaccineTimeSlot,\n handleParaVetChecked,\n setParaVetChecked,\n paraVetChecked,\n } = useShop();\n // console.log(bookingVaccine, bookingData, \"2312booking vaccine\");\n\n const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);\n const [uploadStatus, setUploadStatus] = useState(\"\");\n const [selectedFiles, setSelectedFiles] = useState([]);\n const [isClosing1, setIsClosing1] = useState(false);\n const [openCoupons, setOpenCoupons] = useState(false);\n const [prescriptionOpen, setPrescriptionOpen] = useState(false);\n const [checkoutOpen, setCheckoutOpen] = useState(false);\n const [isClosing, setIsClosing] = useState(false);\n const [expandedCoupons, setExpandedCoupons] = useState({});\n const [isSlotOpen, setIsSlotOpen] = useState(false);\n const [uploadedFile, setUploadedFile] = useState([]);\n const [isOpen, setIsOpen] = useState(false);\n const dispatch = useDispatch();\n const loginToken = Cookies.get(\"loginToken\");\n const [isVetOpen, setIsVetOpen] = useState(true);\n\n const [isVaccineOpen, setIsVaccineOpen] = useState(() => {\n const saved = localStorage.getItem(\"isVaccineOpen\");\n console.log(saved, \"isVaccineOpen\");\n return saved === \"true\"; // Convert string to boolean\n });\n const [selectedDate, setSelectedDate] = useState(() => {\n return localStorage.getItem(\"selectedVaccineDate\") || \"\";\n });\n\n const [selectedSlot, setSelectedSlot] = useState(() => {\n return localStorage.getItem(\"selectedVaccineTimeSlot\") || \"\";\n });\n\n const [currentMonth, setCurrentMonth] = useState(new Date());\n const [isDateOpen, setIsDateOpen] = useState(false);\n const [isSlotExpanded, setIsSlotExpanded] = useState(false);\n const [apiError, setApiError] = useState(null);\n\n console.log(pharmacyCartData, \"pharmacyCartDataasss\");\n\n const categories = Object.keys(pharmacyCartData).filter(\n (category) => pharmacyCartData[category]?.length > 0\n );\n\n console.log(\n categories.map((category) => category === \"Vaccine\"),\n \"categories\"\n );\n const isCartEmpty = categories.length === 0 && !bookingVaccine;\n\n useEffect(() => {\n fetchPharmacyCartItems();\n }, []);\n\n if (isCartEmpty) {\n return \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {vaccinationCart.Product.ProductName}
\n{vaccinationCart.Product.Description}
\n\n
\n \n {vaccinationCart.Product.productvariants?.[0]?.unit}\n
\n\n \n {offerPercentage > 0 && (\n
\n {vaccinationCart.Product.productvariants?.[0]?.MRP}
\n )}\n₹{vaccinationCart.Product.productvariants?.[0]?.price}
\n\n {file.fileName || file.name}\n
\n\n \n setIsOpen(!isOpen)}\n >\n
\n\n \n {!bookingVaccine ? (\n <>\n {categories.map((category) => (\n
\n {!bookingVaccine && (\n \n
\n ))}\n \n ) : (\n {category}
\n {pharmacyCartData[category].map((item) => (\n\n
\n ))}\n \n
\n \n
\n \n
\n {item.Products.ProductName}
\n{item.Products.Description}
\n\n
\n \n {item.productvariant.unit}\n
\n\n
\n \n \n handleQuantityPharmacyCartChange(item.id, -1)\n }\n >\n -\n \n \n {item.quantity}\n \n \n handleQuantityPharmacyCartChange(item.id, 1)\n }\n >\n +\n \n
\n \n
\n ₹
\n\n {(\n (item.productvariant.price /\n (1 -\n (item.productvariant.OfferPercentage || 0) /\n 100)) *\n item.quantity\n ).toFixed(0)}\n
\n\n {parseFloat(\n item.productvariant.price * item.quantity\n ).toFixed(2)}\n
\n\n {combinedFiles.length > 0 ? (\n
\n\n \n Prescription Uploaded\n
\n ) : (\n\n Prescription\n
\n )}\n\n {isOpen ? (\n
\n \n
\n
\n {combinedFiles.length > 0 && (\n \n Add Prescription\n
\n setIsUploadModalOpen(true)}>\n\n {combinedFiles.map((file, index) =>\n renderFilePreview(file, index)\n )}\n
\n )}\n \n \n )}\n {/* \n Apply Coupon\n
\n\n
\n
\n\n {isVetOpen && (\n \n A professional vet will visit and vaccinate your pet\n
\n\n
\n\n {selectedDate && (\n \n setIsDateOpen(!isDateOpen)}\n >\n \n {selectedDate || \"Select Date for Vaccination\"}\n \n {isDateOpen ? (\n
\n\n {isDateOpen && (\n \n
\n )}\n \n
\n \n \n setCurrentMonth(\n new Date(\n currentMonth.getFullYear(),\n currentMonth.getMonth() - 1\n )\n )\n }\n />\n \n {currentMonth.toLocaleDateString(\"en-US\", {\n month: \"long\",\n year: \"numeric\",\n })}\n \n \n setCurrentMonth(\n new Date(\n currentMonth.getFullYear(),\n currentMonth.getMonth() + 1\n )\n )\n }\n />\n
\n \n {renderCalendar()}\n
\n \n setIsSlotExpanded(!isSlotExpanded)}\n >\n {selectedSlot || \"Select Time Slot\"}\n {isSlotExpanded ? (\n
\n\n \n {timeSlots.map((slot) => (\n \n {slot}\n handleTimeSlotSelect(slot)}\n className=\"h-[2.5vh] w-[2vw]\"\n />\n \n ))}\n
\n \n \n )}\n \n )}\n \n {errorState && (\n \n {errorState}\n
\n )}\n \n )}\n {apiError && (\n\n {apiError}\n
\n )}\n \n \n \n\n {isUploadModalOpen && (\n \n
\n \n )}\n {prescriptionOpen && (\n \n
\n \n
\n\n {uploadStatus === \"success\" ? (\n \n
\n )}\n \n
\n\n \n
Upload Documents
\n\n \n
\n \n \n
\n {checkoutOpen && (\n \n
\n \n
\n \n
\n\n \n
\n
\n \n
\n \n
\n \n Prescription\n
\n\n
\n \n For prescription medications, we kindly request that you upload\n a veterinarian-approved prescription at checkout. However,\n please note that uploading the prescription is not mandatory. By\n providing this information, our team can ensure the proper care\n and service for your pet, and your data will be securely\n protected in accordance with our privacy policy\n
\n\n \n Go Back to Cart\n \n \n Continue without Prescription\n \n
\n \n
\n )\n}\n","import { createContext, useContext, useState, useEffect } from \"react\";\nimport axios from \"../../axios\";\nimport Cookies from \"js-cookie\";\n\nconst initialState = {\n cartData: [],\n pharmacyCartData: [],\n cartItemIds: [],\n pharmacycartItemIds: [],\n totalDiscount: 0,\n ActiveTab: \"cart\",\n PrescriptionFile: [],\n cartTotal: null,\n pharmacyCartTotal: null,\n selectedPetIds: [],\n cartCount: 0,\n pharmacyCount: 0,\n paraVetChecked: [],\n selectedVaccineDate: null,\n setSelectedVaccineDate: null,\n selectedVaccineTimeSlot: null,\n setSelectedVaccineTimeSlot: null,\n handleSelectedPetIds: () => {},\n handleQuantityCartChange: () => {},\n fetchCartItems: () => {},\n calculateTotalDiscount: () => {},\n groupItemsByCategory: () => {},\n fetchPharmacyCartItems: () => {},\n calculateCartTotal: () => {},\n calculatePharmacyCartTotal: () => {},\n getItemsByCategory: () => {},\n getCategories: () => {},\n refreshCart: () => {},\n handleActiveTab: () => {},\n handlePrescriptionFile: () => {},\n handleParaVetChecked: () => {},\n};\nconst ShopContext = createContext(initialState);\n\nexport default function ShopContextProvider({ children }) {\n const loginToken = Cookies.get(\"loginToken\");\n const [cartData, setCartData] = useState([]);\n const [pharmacyCartData, setPharmacyCartData] = useState([]);\n const [cartItemIds, setCartItemIds] = useState([]);\n const [pharmacycartItemIds, setpharmacycartItemIds] = useState([]);\n const [totalDiscount, setTotalDiscount] = useState(0);\n const [ActiveTab, setActiveTab] = useState(\"cart\");\n const [PrescriptionFile, setPrescriptionFile] = useState([]);\n const [cartTotal, setCartTotal] = useState(null);\n const [pharmacyCartTotal, setPharmacyCartTotal] = useState(null);\n const [selectedPetIds, setSelectedPetIds] = useState([]);\n const [cartCount, setCartCount] = useState(0);\n const [pharmacyCount, setPharmacyCount] = useState(0);\n const [selectedVaccineDate, setSelectedVaccineDate] = useState(\"\");\n const [selectedVaccineTimeSlot, setSelectedVaccineTimeSlot] = useState(\"\");\n const [paraVetChecked, setParaVetChecked] = useState(true);\n\n \n const handleParaVetChecked = (checked) => {\n setParaVetChecked(checked);\n // console.log(checked, \"para vet checked\");\n };\n\n const handleSelectedPetIds = (petIds) => {\n setSelectedPetIds(petIds);\n // console.log(petIds, \"petid for vaccine \");\n };\n const handleActiveTab = (tab) => {\n setActiveTab(tab);\n };\n const handlePrescriptionFile = (file) => {\n setPrescriptionFile(file);\n // console.log(file, \"file\");\n };\n const fetchCartCount = async () => {\n try {\n const response = await axios.get(\"/shop/generalproductscartcount\", {\n headers: {\n Authorization: loginToken,\n },\n });\n setCartCount(response.data);\n // console.log(\"Cart count:\", response.data);\n } catch (err) {\n // console.log(\"Error fetching cart count:\", err);\n }\n };\n const fetchPharmacyCount = async () => {\n try {\n const response = await axios.get(\"/shop/pharmacyproductscartcount\", {\n headers: {\n Authorization: loginToken,\n },\n });\n setPharmacyCount(response.data);\n // console.log(\"Pharmacy cart count:\", response.data);\n } catch (err) {\n // console.log(\"Error fetching cart count:\", err);\n }\n };\n const fetchCartItems = async () => {\n try {\n const response = await axios.get(\"/shop/listgeneralcartitems\", {\n headers: {\n Authorization: loginToken,\n },\n });\n // console.log(\"Cart data:\", response.data.message);\n const groupedData = groupItemsByCategory(response.data.message);\n setCartData(groupedData);\n // console.log(\"Cart data:\", groupedData);\n const ids = response.data.message.map((item) => item.id);\n setCartItemIds(ids);\n // console.log(\"Cart item IDs:\", ids);\n calculateTotalDiscount(response.data.message);\n } catch (err) {\n // console.log(\"Error fetching cart data:\", err);\n }\n };\n const fetchPharmacyCartItems = async () => {\n try {\n const response = await axios.get(\"/shop/listpharmacycartitems\", {\n headers: {\n Authorization: loginToken,\n },\n });\n // console.log(response.data.message, \"pharmacy cart data\");\n const groupedData = groupItemsByCategory(response.data.message);\n setPharmacyCartData(groupedData);\n\n // console.log(\"pharmacy group cart data:\", groupedData);\n const ids = response.data.message.map((item) => item.id);\n setpharmacycartItemIds(ids);\n // console.log(\"pharmacy Cart item IDs:\", ids);\n calculateTotalDiscount(response.data.message);\n } catch (err) {\n // console.log(\"Error fetching cart data:\", err);\n }\n };\n\n useEffect(() => {\n fetchCartItems();\n fetchPharmacyCartItems();\n fetchCartCount();\n fetchPharmacyCount();\n }, [loginToken]);\n\n const groupItemsByCategory = (items) => {\n try {\n // Input validation\n if (!Array.isArray(items)) {\n console.warn(\"Invalid input: items must be an array\");\n return {};\n }\n\n return items.reduce((acc, item) => {\n // Safely access category, handling potential undefined values\n const category = item?.Products?.Category || \"Uncategorized\";\n\n // Initialize category array if it doesn't exist\n if (!acc[category]) {\n acc[category] = [];\n }\n\n // Add the full item to the appropriate category array\n acc[category].push({\n ...item,\n category: category, // Adding category for easier reference\n });\n\n return acc;\n }, {});\n } catch (error) {\n console.error(\"Error grouping items by category:\", error);\n return {};\n }\n };\n const getItemsByCategory = (groupedData, category) => {\n return groupedData[category] || [];\n };\n\n // Helper function to get all available categories\n const getCategories = (groupedData) => {\n return Object.keys(groupedData);\n };\n\n const calculateTotalDiscount = (items) => {\n const discount = items.reduce((total, item) => {\n const originalPrice =\n (item.productvariant.price / item.quantity) *\n (1 / (1 - (item.productvariant.OfferPercentage || 0) / 100));\n return (\n total + (originalPrice * item.quantity - item.productvariant.price)\n );\n }, 0);\n setTotalDiscount(discount);\n // console.log(\"Total Discount:\", discount);\n return discount;\n };\n\n \n\n const calculateDiscountedPrice = (item) => {\n // console.log(item.quantity, \"item for discount\");\n return item.productvariant.price * item.quantity;\n };\n\n const calculateCartTotal = () => {\n const Total = Object.values(cartData)\n .flat()\n .reduce(\n (total, item) => total + parseFloat(calculateDiscountedPrice(item)),\n 0\n );\n setCartTotal(Total);\n // console.log(\"Total:\", Total);\n return Total;\n };\n\n const calculatePharmacyCartTotal = () => {\n const pharmacyTotal = Object.values(pharmacyCartData)\n .flat()\n .reduce(\n (total, item) => total + parseFloat(calculateDiscountedPrice(item)),\n 0\n );\n setPharmacyCartTotal(pharmacyTotal);\n return pharmacyTotal;\n };\n\n const handleQuantityCartChange = async (id, delta) => {\n const category = Object.keys(cartData).find((cat) =>\n cartData[cat].some((item) => item.id === id)\n );\n if (!category) return;\n\n const item = cartData[category].find((item) => item.id === id);\n if (!item) return;\n\n const newQuantity = Math.max(0, parseInt(item.quantity) + parseInt(delta));\n\n if (newQuantity === 0) {\n try {\n // API call to delete the item from the cart\n await axios.put(\n `/shop/deletecart/${id}`,\n {},\n {\n headers: {\n Authorization: loginToken,\n },\n }\n );\n // console.log(\"Item removed from cart:\", id);\n\n // Update the local state after successful deletion\n const newCartData = { ...cartData };\n newCartData[category] = newCartData[category].filter(\n (item) => item.id !== id\n );\n if (newCartData[category].length === 0) {\n delete newCartData[category];\n }\n setCartData(newCartData);\n setCartItemIds(cartItemIds.filter((itemId) => itemId !== id));\n setpharmacycartItemIds(\n pharmacycartItemIds.filter((itemId) => itemId !== id)\n );\n calculateTotalDiscount(Object.values(newCartData).flat());\n } catch (error) {\n console.error(\"Error removing item from cart:\", error);\n }\n } else {\n try {\n // Update the quantity in the backend via API call\n\n // Update local state\n const newCartData = { ...cartData };\n const updatedCartItems = newCartData[category].map((cartItem) => {\n if (cartItem.id === id) {\n const basePrice = cartItem.productvariant.price / cartItem.quantity;\n const newPrice = basePrice * newQuantity;\n const discount = cartItem.productvariant.OfferPercentage || 0;\n // const discountedPrice = newPrice * (1 - discount / 100);\n\n return {\n ...cartItem,\n quantity: newQuantity,\n productvariant: {\n ...cartItem.productvariant,\n price: newPrice,\n },\n };\n }\n return cartItem;\n });\n newCartData[category] = updatedCartItems;\n setCartData(newCartData);\n calculateTotalDiscount(Object.values(newCartData).flat());\n\n const response = await axios.post(\n \"/shop/updatetocart\",\n {\n ProductId: item.Products.id,\n quantity: newQuantity,\n variantId: item.productvariant.id,\n },\n {\n headers: {\n Authorization: loginToken,\n },\n }\n );\n\n // Log updated item details\n // const updatedItem = newCartData[category].find(\n // (item) => item.id === id\n // );\n if (response.data.status === 200) {\n // console.log(\n // \"Item quantity updated in cart:\",\n // item.Products.id,\n // newQuantity,\n // item\n // );\n }\n } catch (error) {\n console.error(\"Error updating cart quantity:\", error);\n // Optionally add error handling UI feedback here\n }\n }\n };\n\n const handleQuantityPharmacyCartChange = async (id, delta) => {\n const category = Object.keys(pharmacyCartData).find((cat) =>\n pharmacyCartData[cat].some((item) => item.id === id)\n );\n if (!category) return;\n\n const item = pharmacyCartData[category].find((item) => item.id === id);\n if (!item) return;\n\n const newQuantity = Math.max(0, parseInt(item.quantity) + parseInt(delta));\n\n if (newQuantity === 0) {\n try {\n // Update UI first\n const newPharmacyCartData = { ...pharmacyCartData };\n newPharmacyCartData[category] = newPharmacyCartData[category].filter(\n (item) => item.id !== id\n );\n if (newPharmacyCartData[category].length === 0) {\n delete newPharmacyCartData[category];\n }\n setPharmacyCartData(newPharmacyCartData);\n setCartItemIds(cartItemIds.filter((itemId) => itemId !== id));\n setpharmacycartItemIds(\n pharmacycartItemIds.filter((itemId) => itemId !== id)\n );\n calculateTotalDiscount(Object.values(newPharmacyCartData).flat());\n\n // Then make API call\n await axios.put(\n `/shop/deletecart/${id}`,\n {},\n {\n headers: {\n Authorization: loginToken,\n },\n }\n );\n } catch (error) {\n console.error(\"Error removing item from cart:\", error);\n // Optionally revert the UI changes if API call fails\n }\n } else {\n try {\n // Update UI immediately\n const newPharmacyCartData = { ...pharmacyCartData };\n const updatedCartItems = newPharmacyCartData[category].map(\n (cartItem) => {\n if (cartItem.id === id) {\n const basePrice = cartItem.productvariant.price;\n const productTotalPrice = basePrice * newQuantity;\n return {\n ...cartItem,\n quantity: newQuantity,\n productTotalPrice: productTotalPrice,\n productvariant: {\n ...cartItem.productvariant,\n },\n };\n }\n return cartItem;\n }\n );\n\n newPharmacyCartData[category] = updatedCartItems;\n setPharmacyCartData(newPharmacyCartData);\n calculateTotalDiscount(Object.values(newPharmacyCartData).flat());\n\n // Then make API call\n const response = await axios.post(\n \"/shop/updatetocart\",\n {\n ProductId: item.Products.id,\n quantity: newQuantity,\n variantId: item.productvariant.id,\n },\n {\n headers: {\n Authorization: loginToken,\n },\n }\n );\n\n if (response.data.status === 200) {\n // Update any additional data from API response if needed\n // console.log(\n // \"Item quantity updated in cart:\",\n // item.Products.id,\n // newQuantity,\n // item\n // );\n }\n } catch (error) {\n console.error(\"Error updating cart quantity:\", error);\n // Optionally revert the UI changes if API call fails\n }\n }\n };\n\n const value = {\n cartData,\n pharmacyCartData,\n cartItemIds,\n pharmacycartItemIds,\n totalDiscount,\n ActiveTab,\n PrescriptionFile,\n cartTotal,\n pharmacyCartTotal,\n selectedPetIds,\n cartCount,\n pharmacyCount,\n selectedVaccineDate,\n selectedVaccineTimeSlot,\n paraVetChecked,\n handleParaVetChecked,\n setSelectedVaccineDate,\n setSelectedVaccineTimeSlot,\n handleSelectedPetIds,\n handleQuantityCartChange,\n handleQuantityPharmacyCartChange,\n fetchCartItems,\n calculateTotalDiscount,\n groupItemsByCategory,\n fetchPharmacyCartItems,\n calculateCartTotal,\n calculatePharmacyCartTotal,\n handleActiveTab,\n handlePrescriptionFile,\n };\n\n return \n
\n );\n}\n","/*\n\nBased off glamor's StyleSheet, thanks Sunil ❤️\n\nhigh performance StyleSheet for css-in-js systems\n\n- uses multiple style tags behind the scenes for millions of rules\n- uses `insertRule` for appending in production for *much* faster performance\n\n// usage\n\nimport { StyleSheet } from '@emotion/sheet'\n\nlet styleSheet = new StyleSheet({ key: '', container: document.head })\n\nstyleSheet.insert('#box { border: 1px solid red; }')\n- appends a css rule into the stylesheet\n\nstyleSheet.flush()\n- empties the stylesheet of all its contents\n\n*/\n// $FlowFixMe\nfunction sheetForTag(tag) {\n if (tag.sheet) {\n // $FlowFixMe\n return tag.sheet;\n } // this weirdness brought to you by firefox\n\n /* istanbul ignore next */\n\n\n for (var i = 0; i < document.styleSheets.length; i++) {\n if (document.styleSheets[i].ownerNode === tag) {\n // $FlowFixMe\n return document.styleSheets[i];\n }\n }\n}\n\nfunction createStyleElement(options) {\n var tag = document.createElement('style');\n tag.setAttribute('data-emotion', options.key);\n\n if (options.nonce !== undefined) {\n tag.setAttribute('nonce', options.nonce);\n }\n\n tag.appendChild(document.createTextNode(''));\n tag.setAttribute('data-s', '');\n return tag;\n}\n\nvar StyleSheet = /*#__PURE__*/function () {\n // Using Node instead of HTMLElement since container may be a ShadowRoot\n function StyleSheet(options) {\n var _this = this;\n\n this._insertTag = function (tag) {\n var before;\n\n if (_this.tags.length === 0) {\n if (_this.insertionPoint) {\n before = _this.insertionPoint.nextSibling;\n } else if (_this.prepend) {\n before = _this.container.firstChild;\n } else {\n before = _this.before;\n }\n } else {\n before = _this.tags[_this.tags.length - 1].nextSibling;\n }\n\n _this.container.insertBefore(tag, before);\n\n _this.tags.push(tag);\n };\n\n this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;\n this.tags = [];\n this.ctr = 0;\n this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets\n\n this.key = options.key;\n this.container = options.container;\n this.prepend = options.prepend;\n this.insertionPoint = options.insertionPoint;\n this.before = null;\n }\n\n var _proto = StyleSheet.prototype;\n\n _proto.hydrate = function hydrate(nodes) {\n nodes.forEach(this._insertTag);\n };\n\n _proto.insert = function insert(rule) {\n // the max length is how many rules we have per style tag, it's 65000 in speedy mode\n // it's 1 in dev because we insert source maps that map a single rule to a location\n // and you can only have one source map per style tag\n if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {\n this._insertTag(createStyleElement(this));\n }\n\n var tag = this.tags[this.tags.length - 1];\n\n if (process.env.NODE_ENV !== 'production') {\n var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;\n\n if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {\n // this would only cause problem in speedy mode\n // but we don't want enabling speedy to affect the observable behavior\n // so we report this error at all times\n console.error(\"You're attempting to insert the following rule:\\n\" + rule + '\\n\\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');\n }\n this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;\n }\n\n if (this.isSpeedy) {\n var sheet = sheetForTag(tag);\n\n try {\n // this is the ultrafast version, works across browsers\n // the big drawback is that the css won't be editable in devtools\n sheet.insertRule(rule, sheet.cssRules.length);\n } catch (e) {\n if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(rule)) {\n console.error(\"There was a problem inserting the following rule: \\\"\" + rule + \"\\\"\", e);\n }\n }\n } else {\n tag.appendChild(document.createTextNode(rule));\n }\n\n this.ctr++;\n };\n\n _proto.flush = function flush() {\n // $FlowFixMe\n this.tags.forEach(function (tag) {\n return tag.parentNode && tag.parentNode.removeChild(tag);\n });\n this.tags = [];\n this.ctr = 0;\n\n if (process.env.NODE_ENV !== 'production') {\n this._alreadyInsertedOrderInsensitiveRule = false;\n }\n };\n\n return StyleSheet;\n}();\n\nexport { StyleSheet };\n","/**\n * @param {number}\n * @return {number}\n */\nexport var abs = Math.abs\n\n/**\n * @param {number}\n * @return {string}\n */\nexport var from = String.fromCharCode\n\n/**\n * @param {object}\n * @return {object}\n */\nexport var assign = Object.assign\n\n/**\n * @param {string} value\n * @param {number} length\n * @return {number}\n */\nexport function hash (value, length) {\n\treturn charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0\n}\n\n/**\n * @param {string} value\n * @return {string}\n */\nexport function trim (value) {\n\treturn value.trim()\n}\n\n/**\n * @param {string} value\n * @param {RegExp} pattern\n * @return {string?}\n */\nexport function match (value, pattern) {\n\treturn (value = pattern.exec(value)) ? value[0] : value\n}\n\n/**\n * @param {string} value\n * @param {(string|RegExp)} pattern\n * @param {string} replacement\n * @return {string}\n */\nexport function replace (value, pattern, replacement) {\n\treturn value.replace(pattern, replacement)\n}\n\n/**\n * @param {string} value\n * @param {string} search\n * @return {number}\n */\nexport function indexof (value, search) {\n\treturn value.indexOf(search)\n}\n\n/**\n * @param {string} value\n * @param {number} index\n * @return {number}\n */\nexport function charat (value, index) {\n\treturn value.charCodeAt(index) | 0\n}\n\n/**\n * @param {string} value\n * @param {number} begin\n * @param {number} end\n * @return {string}\n */\nexport function substr (value, begin, end) {\n\treturn value.slice(begin, end)\n}\n\n/**\n * @param {string} value\n * @return {number}\n */\nexport function strlen (value) {\n\treturn value.length\n}\n\n/**\n * @param {any[]} value\n * @return {number}\n */\nexport function sizeof (value) {\n\treturn value.length\n}\n\n/**\n * @param {any} value\n * @param {any[]} array\n * @return {any}\n */\nexport function append (value, array) {\n\treturn array.push(value), value\n}\n\n/**\n * @param {string[]} array\n * @param {function} callback\n * @return {string}\n */\nexport function combine (array, callback) {\n\treturn array.map(callback).join('')\n}\n","import {from, trim, charat, strlen, substr, append, assign} from './Utility.js'\n\nexport var line = 1\nexport var column = 1\nexport var length = 0\nexport var position = 0\nexport var character = 0\nexport var characters = ''\n\n/**\n * @param {string} value\n * @param {object | null} root\n * @param {object | null} parent\n * @param {string} type\n * @param {string[] | string} props\n * @param {object[] | string} children\n * @param {number} length\n */\nexport function node (value, root, parent, type, props, children, length) {\n\treturn {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}\n}\n\n/**\n * @param {object} root\n * @param {object} props\n * @return {object}\n */\nexport function copy (root, props) {\n\treturn assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)\n}\n\n/**\n * @return {number}\n */\nexport function char () {\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function prev () {\n\tcharacter = position > 0 ? charat(characters, --position) : 0\n\n\tif (column--, character === 10)\n\t\tcolumn = 1, line--\n\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function next () {\n\tcharacter = position < length ? charat(characters, position++) : 0\n\n\tif (column++, character === 10)\n\t\tcolumn = 1, line++\n\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function peek () {\n\treturn charat(characters, position)\n}\n\n/**\n * @return {number}\n */\nexport function caret () {\n\treturn position\n}\n\n/**\n * @param {number} begin\n * @param {number} end\n * @return {string}\n */\nexport function slice (begin, end) {\n\treturn substr(characters, begin, end)\n}\n\n/**\n * @param {number} type\n * @return {number}\n */\nexport function token (type) {\n\tswitch (type) {\n\t\t// \\0 \\t \\n \\r \\s whitespace token\n\t\tcase 0: case 9: case 10: case 13: case 32:\n\t\t\treturn 5\n\t\t// ! + , / > @ ~ isolate token\n\t\tcase 33: case 43: case 44: case 47: case 62: case 64: case 126:\n\t\t// ; { } breakpoint token\n\t\tcase 59: case 123: case 125:\n\t\t\treturn 4\n\t\t// : accompanied token\n\t\tcase 58:\n\t\t\treturn 3\n\t\t// \" ' ( [ opening delimit token\n\t\tcase 34: case 39: case 40: case 91:\n\t\t\treturn 2\n\t\t// ) ] closing delimit token\n\t\tcase 41: case 93:\n\t\t\treturn 1\n\t}\n\n\treturn 0\n}\n\n/**\n * @param {string} value\n * @return {any[]}\n */\nexport function alloc (value) {\n\treturn line = column = 1, length = strlen(characters = value), position = 0, []\n}\n\n/**\n * @param {any} value\n * @return {any}\n */\nexport function dealloc (value) {\n\treturn characters = '', value\n}\n\n/**\n * @param {number} type\n * @return {string}\n */\nexport function delimit (type) {\n\treturn trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))\n}\n\n/**\n * @param {string} value\n * @return {string[]}\n */\nexport function tokenize (value) {\n\treturn dealloc(tokenizer(alloc(value)))\n}\n\n/**\n * @param {number} type\n * @return {string}\n */\nexport function whitespace (type) {\n\twhile (character = peek())\n\t\tif (character < 33)\n\t\t\tnext()\n\t\telse\n\t\t\tbreak\n\n\treturn token(type) > 2 || token(character) > 3 ? '' : ' '\n}\n\n/**\n * @param {string[]} children\n * @return {string[]}\n */\nexport function tokenizer (children) {\n\twhile (next())\n\t\tswitch (token(character)) {\n\t\t\tcase 0: append(identifier(position - 1), children)\n\t\t\t\tbreak\n\t\t\tcase 2: append(delimit(character), children)\n\t\t\t\tbreak\n\t\t\tdefault: append(from(character), children)\n\t\t}\n\n\treturn children\n}\n\n/**\n * @param {number} index\n * @param {number} count\n * @return {string}\n */\nexport function escaping (index, count) {\n\twhile (--count && next())\n\t\t// not 0-9 A-F a-f\n\t\tif (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))\n\t\t\tbreak\n\n\treturn slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))\n}\n\n/**\n * @param {number} type\n * @return {number}\n */\nexport function delimiter (type) {\n\twhile (next())\n\t\tswitch (character) {\n\t\t\t// ] ) \" '\n\t\t\tcase type:\n\t\t\t\treturn position\n\t\t\t// \" '\n\t\t\tcase 34: case 39:\n\t\t\t\tif (type !== 34 && type !== 39)\n\t\t\t\t\tdelimiter(character)\n\t\t\t\tbreak\n\t\t\t// (\n\t\t\tcase 40:\n\t\t\t\tif (type === 41)\n\t\t\t\t\tdelimiter(type)\n\t\t\t\tbreak\n\t\t\t// \\\n\t\t\tcase 92:\n\t\t\t\tnext()\n\t\t\t\tbreak\n\t\t}\n\n\treturn position\n}\n\n/**\n * @param {number} type\n * @param {number} index\n * @return {number}\n */\nexport function commenter (type, index) {\n\twhile (next())\n\t\t// //\n\t\tif (type + character === 47 + 10)\n\t\t\tbreak\n\t\t// /*\n\t\telse if (type + character === 42 + 42 && peek() === 47)\n\t\t\tbreak\n\n\treturn '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next())\n}\n\n/**\n * @param {number} index\n * @return {string}\n */\nexport function identifier (index) {\n\twhile (!token(peek()))\n\t\tnext()\n\n\treturn slice(index, position)\n}\n","export var MS = '-ms-'\nexport var MOZ = '-moz-'\nexport var WEBKIT = '-webkit-'\n\nexport var COMMENT = 'comm'\nexport var RULESET = 'rule'\nexport var DECLARATION = 'decl'\n\nexport var PAGE = '@page'\nexport var MEDIA = '@media'\nexport var IMPORT = '@import'\nexport var CHARSET = '@charset'\nexport var VIEWPORT = '@viewport'\nexport var SUPPORTS = '@supports'\nexport var DOCUMENT = '@document'\nexport var NAMESPACE = '@namespace'\nexport var KEYFRAMES = '@keyframes'\nexport var FONT_FACE = '@font-face'\nexport var COUNTER_STYLE = '@counter-style'\nexport var FONT_FEATURE_VALUES = '@font-feature-values'\nexport var LAYER = '@layer'\n","import {IMPORT, LAYER, COMMENT, RULESET, DECLARATION, KEYFRAMES} from './Enum.js'\nimport {strlen, sizeof} from './Utility.js'\n\n/**\n * @param {object[]} children\n * @param {function} callback\n * @return {string}\n */\nexport function serialize (children, callback) {\n\tvar output = ''\n\tvar length = sizeof(children)\n\n\tfor (var i = 0; i < length; i++)\n\t\toutput += callback(children[i], i, children, callback) || ''\n\n\treturn output\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n * @param {function} callback\n * @return {string}\n */\nexport function stringify (element, index, children, callback) {\n\tswitch (element.type) {\n\t\tcase LAYER: if (element.children.length) break\n\t\tcase IMPORT: case DECLARATION: return element.return = element.return || element.value\n\t\tcase COMMENT: return ''\n\t\tcase KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'\n\t\tcase RULESET: element.value = element.props.join(',')\n\t}\n\n\treturn strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''\n}\n","import {COMMENT, RULESET, DECLARATION} from './Enum.js'\nimport {abs, charat, trim, from, sizeof, strlen, substr, append, replace, indexof} from './Utility.js'\nimport {node, char, prev, next, peek, caret, alloc, dealloc, delimit, whitespace, escaping, identifier, commenter} from './Tokenizer.js'\n\n/**\n * @param {string} value\n * @return {object[]}\n */\nexport function compile (value) {\n\treturn dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value))\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {string[]} rule\n * @param {string[]} rules\n * @param {string[]} rulesets\n * @param {number[]} pseudo\n * @param {number[]} points\n * @param {string[]} declarations\n * @return {object}\n */\nexport function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {\n\tvar index = 0\n\tvar offset = 0\n\tvar length = pseudo\n\tvar atrule = 0\n\tvar property = 0\n\tvar previous = 0\n\tvar variable = 1\n\tvar scanning = 1\n\tvar ampersand = 1\n\tvar character = 0\n\tvar type = ''\n\tvar props = rules\n\tvar children = rulesets\n\tvar reference = rule\n\tvar characters = type\n\n\twhile (scanning)\n\t\tswitch (previous = character, character = next()) {\n\t\t\t// (\n\t\t\tcase 40:\n\t\t\t\tif (previous != 108 && charat(characters, length - 1) == 58) {\n\t\t\t\t\tif (indexof(characters += replace(delimit(character), '&', '&\\f'), '&\\f') != -1)\n\t\t\t\t\t\tampersand = -1\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t// \" ' [\n\t\t\tcase 34: case 39: case 91:\n\t\t\t\tcharacters += delimit(character)\n\t\t\t\tbreak\n\t\t\t// \\t \\n \\r \\s\n\t\t\tcase 9: case 10: case 13: case 32:\n\t\t\t\tcharacters += whitespace(previous)\n\t\t\t\tbreak\n\t\t\t// \\\n\t\t\tcase 92:\n\t\t\t\tcharacters += escaping(caret() - 1, 7)\n\t\t\t\tcontinue\n\t\t\t// /\n\t\t\tcase 47:\n\t\t\t\tswitch (peek()) {\n\t\t\t\t\tcase 42: case 47:\n\t\t\t\t\t\tappend(comment(commenter(next(), caret()), root, parent), declarations)\n\t\t\t\t\t\tbreak\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tcharacters += '/'\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t// {\n\t\t\tcase 123 * variable:\n\t\t\t\tpoints[index++] = strlen(characters) * ampersand\n\t\t\t// } ; \\0\n\t\t\tcase 125 * variable: case 59: case 0:\n\t\t\t\tswitch (character) {\n\t\t\t\t\t// \\0 }\n\t\t\t\t\tcase 0: case 125: scanning = 0\n\t\t\t\t\t// ;\n\t\t\t\t\tcase 59 + offset: if (ampersand == -1) characters = replace(characters, /\\f/g, '')\n\t\t\t\t\t\tif (property > 0 && (strlen(characters) - length))\n\t\t\t\t\t\t\tappend(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// @ ;\n\t\t\t\t\tcase 59: characters += ';'\n\t\t\t\t\t// { rule/at-rule\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tappend(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets)\n\n\t\t\t\t\t\tif (character === 123)\n\t\t\t\t\t\t\tif (offset === 0)\n\t\t\t\t\t\t\t\tparse(characters, root, reference, reference, props, rulesets, length, points, children)\n\t\t\t\t\t\t\telse\n\t\t\t\t\t\t\t\tswitch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {\n\t\t\t\t\t\t\t\t\t// d l m s\n\t\t\t\t\t\t\t\t\tcase 100: case 108: case 109: case 115:\n\t\t\t\t\t\t\t\t\t\tparse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children)\n\t\t\t\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\tparse(characters, reference, reference, reference, [''], children, 0, points, children)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tindex = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo\n\t\t\t\tbreak\n\t\t\t// :\n\t\t\tcase 58:\n\t\t\t\tlength = 1 + strlen(characters), property = previous\n\t\t\tdefault:\n\t\t\t\tif (variable < 1)\n\t\t\t\t\tif (character == 123)\n\t\t\t\t\t\t--variable\n\t\t\t\t\telse if (character == 125 && variable++ == 0 && prev() == 125)\n\t\t\t\t\t\tcontinue\n\n\t\t\t\tswitch (characters += from(character), character * variable) {\n\t\t\t\t\t// &\n\t\t\t\t\tcase 38:\n\t\t\t\t\t\tampersand = offset > 0 ? 1 : (characters += '\\f', -1)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// ,\n\t\t\t\t\tcase 44:\n\t\t\t\t\t\tpoints[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// @\n\t\t\t\t\tcase 64:\n\t\t\t\t\t\t// -\n\t\t\t\t\t\tif (peek() === 45)\n\t\t\t\t\t\t\tcharacters += delimit(next())\n\n\t\t\t\t\t\tatrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// -\n\t\t\t\t\tcase 45:\n\t\t\t\t\t\tif (previous === 45 && strlen(characters) == 2)\n\t\t\t\t\t\t\tvariable = 0\n\t\t\t\t}\n\t\t}\n\n\treturn rulesets\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {number} index\n * @param {number} offset\n * @param {string[]} rules\n * @param {number[]} points\n * @param {string} type\n * @param {string[]} props\n * @param {string[]} children\n * @param {number} length\n * @return {object}\n */\nexport function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {\n\tvar post = offset - 1\n\tvar rule = offset === 0 ? rules : ['']\n\tvar size = sizeof(rule)\n\n\tfor (var i = 0, j = 0, k = 0; i < index; ++i)\n\t\tfor (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)\n\t\t\tif (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\\f/g, rule[x])))\n\t\t\t\tprops[k++] = z\n\n\treturn node(value, root, parent, offset === 0 ? RULESET : type, props, children, length)\n}\n\n/**\n * @param {number} value\n * @param {object} root\n * @param {object?} parent\n * @return {object}\n */\nexport function comment (value, root, parent) {\n\treturn node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0)\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {number} length\n * @return {object}\n */\nexport function declaration (value, root, parent, length) {\n\treturn node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length)\n}\n","import { StyleSheet } from '@emotion/sheet';\nimport { dealloc, alloc, next, token, from, peek, delimit, slice, position, RULESET, combine, match, serialize, copy, replace, WEBKIT, MOZ, MS, KEYFRAMES, DECLARATION, hash, charat, strlen, indexof, stringify, COMMENT, rulesheet, middleware, compile } from 'stylis';\nimport '@emotion/weak-memoize';\nimport '@emotion/memoize';\n\nvar identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {\n var previous = 0;\n var character = 0;\n\n while (true) {\n previous = character;\n character = peek(); // &\\f\n\n if (previous === 38 && character === 12) {\n points[index] = 1;\n }\n\n if (token(character)) {\n break;\n }\n\n next();\n }\n\n return slice(begin, position);\n};\n\nvar toRules = function toRules(parsed, points) {\n // pretend we've started with a comma\n var index = -1;\n var character = 44;\n\n do {\n switch (token(character)) {\n case 0:\n // &\\f\n if (character === 38 && peek() === 12) {\n // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings\n // stylis inserts \\f after & to know when & where it should replace this sequence with the context selector\n // and when it should just concatenate the outer and inner selectors\n // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here\n points[index] = 1;\n }\n\n parsed[index] += identifierWithPointTracking(position - 1, points, index);\n break;\n\n case 2:\n parsed[index] += delimit(character);\n break;\n\n case 4:\n // comma\n if (character === 44) {\n // colon\n parsed[++index] = peek() === 58 ? '&\\f' : '';\n points[index] = parsed[index].length;\n break;\n }\n\n // fallthrough\n\n default:\n parsed[index] += from(character);\n }\n } while (character = next());\n\n return parsed;\n};\n\nvar getRules = function getRules(value, points) {\n return dealloc(toRules(alloc(value), points));\n}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11\n\n\nvar fixedElements = /* #__PURE__ */new WeakMap();\nvar compat = function compat(element) {\n if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo\n // negative .length indicates that this rule has been already prefixed\n element.length < 1) {\n return;\n }\n\n var value = element.value,\n parent = element.parent;\n var isImplicitRule = element.column === parent.column && element.line === parent.line;\n\n while (parent.type !== 'rule') {\n parent = parent.parent;\n if (!parent) return;\n } // short-circuit for the simplest case\n\n\n if (element.props.length === 1 && value.charCodeAt(0) !== 58\n /* colon */\n && !fixedElements.get(parent)) {\n return;\n } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)\n // then the props has already been manipulated beforehand as they that array is shared between it and its \"rule parent\"\n\n\n if (isImplicitRule) {\n return;\n }\n\n fixedElements.set(element, true);\n var points = [];\n var rules = getRules(value, points);\n var parentRules = parent.props;\n\n for (var i = 0, k = 0; i < rules.length; i++) {\n for (var j = 0; j < parentRules.length; j++, k++) {\n element.props[k] = points[i] ? rules[i].replace(/&\\f/g, parentRules[j]) : parentRules[j] + \" \" + rules[i];\n }\n }\n};\nvar removeLabel = function removeLabel(element) {\n if (element.type === 'decl') {\n var value = element.value;\n\n if ( // charcode for l\n value.charCodeAt(0) === 108 && // charcode for b\n value.charCodeAt(2) === 98) {\n // this ignores label\n element[\"return\"] = '';\n element.value = '';\n }\n }\n};\nvar ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';\n\nvar isIgnoringComment = function isIgnoringComment(element) {\n return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;\n};\n\nvar createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {\n return function (element, index, children) {\n if (element.type !== 'rule' || cache.compat) return;\n var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);\n\n if (unsafePseudoClasses) {\n var isNested = !!element.parent; // in nested rules comments become children of the \"auto-inserted\" rule and that's always the `element.parent`\n //\n // considering this input:\n // .a {\n // .b /* comm */ {}\n // color: hotpink;\n // }\n // we get output corresponding to this:\n // .a {\n // & {\n // /* comm */\n // color: hotpink;\n // }\n // .b {}\n // }\n\n var commentContainer = isNested ? element.parent.children : // global rule at the root level\n children;\n\n for (var i = commentContainer.length - 1; i >= 0; i--) {\n var node = commentContainer[i];\n\n if (node.line < element.line) {\n break;\n } // it is quite weird but comments are *usually* put at `column: element.column - 1`\n // so we seek *from the end* for the node that is earlier than the rule's `element` and check that\n // this will also match inputs like this:\n // .a {\n // /* comm */\n // .b {}\n // }\n //\n // but that is fine\n //\n // it would be the easiest to change the placement of the comment to be the first child of the rule:\n // .a {\n // .b { /* comm */ }\n // }\n // with such inputs we wouldn't have to search for the comment at all\n // TODO: consider changing this comment placement in the next major version\n\n\n if (node.column < element.column) {\n if (isIgnoringComment(node)) {\n return;\n }\n\n break;\n }\n }\n\n unsafePseudoClasses.forEach(function (unsafePseudoClass) {\n console.error(\"The pseudo class \\\"\" + unsafePseudoClass + \"\\\" is potentially unsafe when doing server-side rendering. Try changing it to \\\"\" + unsafePseudoClass.split('-child')[0] + \"-of-type\\\".\");\n });\n }\n };\n};\n\nvar isImportRule = function isImportRule(element) {\n return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;\n};\n\nvar isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {\n for (var i = index - 1; i >= 0; i--) {\n if (!isImportRule(children[i])) {\n return true;\n }\n }\n\n return false;\n}; // use this to remove incorrect elements from further processing\n// so they don't get handed to the `sheet` (or anything else)\n// as that could potentially lead to additional logs which in turn could be overhelming to the user\n\n\nvar nullifyElement = function nullifyElement(element) {\n element.type = '';\n element.value = '';\n element[\"return\"] = '';\n element.children = '';\n element.props = '';\n};\n\nvar incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {\n if (!isImportRule(element)) {\n return;\n }\n\n if (element.parent) {\n console.error(\"`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.\");\n nullifyElement(element);\n } else if (isPrependedWithRegularRules(index, children)) {\n console.error(\"`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.\");\n nullifyElement(element);\n }\n};\n\n/* eslint-disable no-fallthrough */\n\nfunction prefix(value, length) {\n switch (hash(value, length)) {\n // color-adjust\n case 5103:\n return WEBKIT + 'print-' + value + value;\n // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)\n\n case 5737:\n case 4201:\n case 3177:\n case 3433:\n case 1641:\n case 4457:\n case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break\n\n case 5572:\n case 6356:\n case 5844:\n case 3191:\n case 6645:\n case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,\n\n case 6391:\n case 5879:\n case 5623:\n case 6135:\n case 4599:\n case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)\n\n case 4215:\n case 6389:\n case 5109:\n case 5365:\n case 5621:\n case 3829:\n return WEBKIT + value + value;\n // appearance, user-select, transform, hyphens, text-size-adjust\n\n case 5349:\n case 4246:\n case 4810:\n case 6968:\n case 2756:\n return WEBKIT + value + MOZ + value + MS + value + value;\n // flex, flex-direction\n\n case 6828:\n case 4268:\n return WEBKIT + value + MS + value + value;\n // order\n\n case 6165:\n return WEBKIT + value + MS + 'flex-' + value + value;\n // align-items\n\n case 5187:\n return WEBKIT + value + replace(value, /(\\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;\n // align-self\n\n case 5443:\n return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value;\n // align-content\n\n case 4675:\n return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value;\n // flex-shrink\n\n case 5548:\n return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;\n // flex-basis\n\n case 5292:\n return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;\n // flex-grow\n\n case 6060:\n return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;\n // transition\n\n case 4554:\n return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;\n // cursor\n\n case 6187:\n return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;\n // background, background-image\n\n case 5495:\n case 3959:\n return replace(value, /(image-set\\([^]*)/, WEBKIT + '$1' + '$`$1');\n // justify-content\n\n case 4968:\n return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;\n // (margin|padding)-inline-(start|end)\n\n case 4095:\n case 3583:\n case 4068:\n case 2532:\n return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;\n // (min|max)?(width|height|inline-size|block-size)\n\n case 8116:\n case 7059:\n case 5753:\n case 5535:\n case 5445:\n case 5701:\n case 4933:\n case 4677:\n case 5533:\n case 5789:\n case 5021:\n case 4765:\n // stretch, max-content, min-content, fill-available\n if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {\n // (m)ax-content, (m)in-content\n case 109:\n // -\n if (charat(value, length + 4) !== 45) break;\n // (f)ill-available, (f)it-content\n\n case 102:\n return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;\n // (s)tretch\n\n case 115:\n return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value;\n }\n break;\n // position: sticky\n\n case 4949:\n // (s)ticky?\n if (charat(value, length + 1) !== 115) break;\n // display: (flex|inline-flex)\n\n case 6444:\n switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {\n // stic(k)y\n case 107:\n return replace(value, ':', ':' + WEBKIT) + value;\n // (inline-)?fl(e)x\n\n case 101:\n return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;\n }\n\n break;\n // writing-mode\n\n case 5936:\n switch (charat(value, length + 11)) {\n // vertical-l(r)\n case 114:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'tb') + value;\n // vertical-r(l)\n\n case 108:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'tb-rl') + value;\n // horizontal(-)tb\n\n case 45:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'lr') + value;\n }\n\n return WEBKIT + value + MS + value + value;\n }\n\n return value;\n}\n\nvar prefixer = function prefixer(element, index, children, callback) {\n if (element.length > -1) if (!element[\"return\"]) switch (element.type) {\n case DECLARATION:\n element[\"return\"] = prefix(element.value, element.length);\n break;\n\n case KEYFRAMES:\n return serialize([copy(element, {\n value: replace(element.value, '@', '@' + WEBKIT)\n })], callback);\n\n case RULESET:\n if (element.length) return combine(element.props, function (value) {\n switch (match(value, /(::plac\\w+|:read-\\w+)/)) {\n // :read-(only|write)\n case ':read-only':\n case ':read-write':\n return serialize([copy(element, {\n props: [replace(value, /:(read-\\w+)/, ':' + MOZ + '$1')]\n })], callback);\n // :placeholder\n\n case '::placeholder':\n return serialize([copy(element, {\n props: [replace(value, /:(plac\\w+)/, ':' + WEBKIT + 'input-$1')]\n }), copy(element, {\n props: [replace(value, /:(plac\\w+)/, ':' + MOZ + '$1')]\n }), copy(element, {\n props: [replace(value, /:(plac\\w+)/, MS + 'input-$1')]\n })], callback);\n }\n\n return '';\n });\n }\n};\n\nvar defaultStylisPlugins = [prefixer];\n\nvar createCache = function createCache(options) {\n var key = options.key;\n\n if (process.env.NODE_ENV !== 'production' && !key) {\n throw new Error(\"You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\\n\" + \"If multiple caches share the same key they might \\\"fight\\\" for each other's style elements.\");\n }\n\n if (key === 'css') {\n var ssrStyles = document.querySelectorAll(\"style[data-emotion]:not([data-s])\"); // get SSRed styles out of the way of React's hydration\n // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)\n // note this very very intentionally targets all style elements regardless of the key to ensure\n // that creating a cache works inside of render of a React component\n\n Array.prototype.forEach.call(ssrStyles, function (node) {\n // we want to only move elements which have a space in the data-emotion attribute value\n // because that indicates that it is an Emotion 11 server-side rendered style elements\n // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector\n // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)\n // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles\n // will not result in the Emotion 10 styles being destroyed\n var dataEmotionAttribute = node.getAttribute('data-emotion');\n\n if (dataEmotionAttribute.indexOf(' ') === -1) {\n return;\n }\n document.head.appendChild(node);\n node.setAttribute('data-s', '');\n });\n }\n\n var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe\n if (/[^a-z-]/.test(key)) {\n throw new Error(\"Emotion key must only contain lower case alphabetical characters and - but \\\"\" + key + \"\\\" was passed\");\n }\n }\n\n var inserted = {};\n var container;\n var nodesToHydrate = [];\n\n {\n container = options.container || document.head;\n Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which\n // means that the style elements we're looking at are only Emotion 11 server-rendered style elements\n document.querySelectorAll(\"style[data-emotion^=\\\"\" + key + \" \\\"]\"), function (node) {\n var attrib = node.getAttribute(\"data-emotion\").split(' '); // $FlowFixMe\n\n for (var i = 1; i < attrib.length; i++) {\n inserted[attrib[i]] = true;\n }\n\n nodesToHydrate.push(node);\n });\n }\n\n var _insert;\n\n var omnipresentPlugins = [compat, removeLabel];\n\n if (process.env.NODE_ENV !== 'production') {\n omnipresentPlugins.push(createUnsafeSelectorsAlarm({\n get compat() {\n return cache.compat;\n }\n\n }), incorrectImportAlarm);\n }\n\n {\n var currentSheet;\n var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {\n if (!element.root) {\n if (element[\"return\"]) {\n currentSheet.insert(element[\"return\"]);\n } else if (element.value && element.type !== COMMENT) {\n // insert empty rule in non-production environments\n // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet\n currentSheet.insert(element.value + \"{}\");\n }\n }\n } : rulesheet(function (rule) {\n currentSheet.insert(rule);\n })];\n var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));\n\n var stylis = function stylis(styles) {\n return serialize(compile(styles), serializer);\n };\n\n _insert = function insert(selector, serialized, sheet, shouldCache) {\n currentSheet = sheet;\n\n if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {\n currentSheet = {\n insert: function insert(rule) {\n sheet.insert(rule + serialized.map);\n }\n };\n }\n\n stylis(selector ? selector + \"{\" + serialized.styles + \"}\" : serialized.styles);\n\n if (shouldCache) {\n cache.inserted[serialized.name] = true;\n }\n };\n }\n\n var cache = {\n key: key,\n sheet: new StyleSheet({\n key: key,\n container: container,\n nonce: options.nonce,\n speedy: options.speedy,\n prepend: options.prepend,\n insertionPoint: options.insertionPoint\n }),\n nonce: options.nonce,\n inserted: inserted,\n registered: {},\n insert: _insert\n };\n cache.sheet.hydrate(nodesToHydrate);\n return cache;\n};\n\nexport { createCache as default };\n","import {MS, MOZ, WEBKIT, RULESET, KEYFRAMES, DECLARATION} from './Enum.js'\nimport {match, charat, substr, strlen, sizeof, replace, combine} from './Utility.js'\nimport {copy, tokenize} from './Tokenizer.js'\nimport {serialize} from './Serializer.js'\nimport {prefix} from './Prefixer.js'\n\n/**\n * @param {function[]} collection\n * @return {function}\n */\nexport function middleware (collection) {\n\tvar length = sizeof(collection)\n\n\treturn function (element, index, children, callback) {\n\t\tvar output = ''\n\n\t\tfor (var i = 0; i < length; i++)\n\t\t\toutput += collection[i](element, index, children, callback) || ''\n\n\t\treturn output\n\t}\n}\n\n/**\n * @param {function} callback\n * @return {function}\n */\nexport function rulesheet (callback) {\n\treturn function (element) {\n\t\tif (!element.root)\n\t\t\tif (element = element.return)\n\t\t\t\tcallback(element)\n\t}\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n * @param {function} callback\n */\nexport function prefixer (element, index, children, callback) {\n\tif (element.length > -1)\n\t\tif (!element.return)\n\t\t\tswitch (element.type) {\n\t\t\t\tcase DECLARATION: element.return = prefix(element.value, element.length, children)\n\t\t\t\t\treturn\n\t\t\t\tcase KEYFRAMES:\n\t\t\t\t\treturn serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback)\n\t\t\t\tcase RULESET:\n\t\t\t\t\tif (element.length)\n\t\t\t\t\t\treturn combine(element.props, function (value) {\n\t\t\t\t\t\t\tswitch (match(value, /(::plac\\w+|:read-\\w+)/)) {\n\t\t\t\t\t\t\t\t// :read-(only|write)\n\t\t\t\t\t\t\t\tcase ':read-only': case ':read-write':\n\t\t\t\t\t\t\t\t\treturn serialize([copy(element, {props: [replace(value, /:(read-\\w+)/, ':' + MOZ + '$1')]})], callback)\n\t\t\t\t\t\t\t\t// :placeholder\n\t\t\t\t\t\t\t\tcase '::placeholder':\n\t\t\t\t\t\t\t\t\treturn serialize([\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, ':' + WEBKIT + 'input-$1')]}),\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, ':' + MOZ + '$1')]}),\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, MS + 'input-$1')]})\n\t\t\t\t\t\t\t\t\t], callback)\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn ''\n\t\t\t\t\t\t})\n\t\t\t}\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n */\nexport function namespace (element) {\n\tswitch (element.type) {\n\t\tcase RULESET:\n\t\t\telement.props = element.props.map(function (value) {\n\t\t\t\treturn combine(tokenize(value), function (value, index, children) {\n\t\t\t\t\tswitch (charat(value, 0)) {\n\t\t\t\t\t\t// \\f\n\t\t\t\t\t\tcase 12:\n\t\t\t\t\t\t\treturn substr(value, 1, strlen(value))\n\t\t\t\t\t\t// \\0 ( + > ~\n\t\t\t\t\t\tcase 0: case 40: case 43: case 62: case 126:\n\t\t\t\t\t\t\treturn value\n\t\t\t\t\t\t// :\n\t\t\t\t\t\tcase 58:\n\t\t\t\t\t\t\tif (children[++index] === 'global')\n\t\t\t\t\t\t\t\tchildren[index] = '', children[++index] = '\\f' + substr(children[index], index = 1, -1)\n\t\t\t\t\t\t// \\s\n\t\t\t\t\t\tcase 32:\n\t\t\t\t\t\t\treturn index === 1 ? '' : value\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tswitch (index) {\n\t\t\t\t\t\t\t\tcase 0: element = value\n\t\t\t\t\t\t\t\t\treturn sizeof(children) > 1 ? '' : value\n\t\t\t\t\t\t\t\tcase index = sizeof(children) - 1: case 2:\n\t\t\t\t\t\t\t\t\treturn index === 2 ? value + element + element : value + element\n\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\treturn value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t}\n}\n","import * as React from 'react';\nimport { useContext, forwardRef } from 'react';\nimport createCache from '@emotion/cache';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport weakMemoize from '@emotion/weak-memoize';\nimport hoistNonReactStatics from '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar isBrowser = \"object\" !== 'undefined';\nvar hasOwn = {}.hasOwnProperty;\n\nvar EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case\n// because this module is primarily intended for the browser and node\n// but it's also required in react native and similar environments sometimes\n// and we could have a special build just for that\n// but this is much easier and the native packages\n// might use a different theme context in the future anyway\ntypeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({\n key: 'css'\n}) : null);\n\nif (process.env.NODE_ENV !== 'production') {\n EmotionCacheContext.displayName = 'EmotionCacheContext';\n}\n\nvar CacheProvider = EmotionCacheContext.Provider;\nvar __unsafe_useEmotionCache = function useEmotionCache() {\n return useContext(EmotionCacheContext);\n};\n\nvar withEmotionCache = function withEmotionCache(func) {\n // $FlowFixMe\n return /*#__PURE__*/forwardRef(function (props, ref) {\n // the cache will never be null in the browser\n var cache = useContext(EmotionCacheContext);\n return func(props, cache, ref);\n });\n};\n\nif (!isBrowser) {\n withEmotionCache = function withEmotionCache(func) {\n return function (props) {\n var cache = useContext(EmotionCacheContext);\n\n if (cache === null) {\n // yes, we're potentially creating this on every render\n // it doesn't actually matter though since it's only on the server\n // so there will only every be a single render\n // that could change in the future because of suspense and etc. but for now,\n // this works and i don't want to optimise for a future thing that we aren't sure about\n cache = createCache({\n key: 'css'\n });\n return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {\n value: cache\n }, func(props, cache));\n } else {\n return func(props, cache);\n }\n };\n };\n}\n\nvar ThemeContext = /* #__PURE__ */React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n ThemeContext.displayName = 'EmotionThemeContext';\n}\n\nvar useTheme = function useTheme() {\n return React.useContext(ThemeContext);\n};\n\nvar getTheme = function getTheme(outerTheme, theme) {\n if (typeof theme === 'function') {\n var mergedTheme = theme(outerTheme);\n\n if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {\n throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');\n }\n\n return mergedTheme;\n }\n\n if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {\n throw new Error('[ThemeProvider] Please make your theme prop a plain object');\n }\n\n return _extends({}, outerTheme, theme);\n};\n\nvar createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {\n return weakMemoize(function (theme) {\n return getTheme(outerTheme, theme);\n });\n});\nvar ThemeProvider = function ThemeProvider(props) {\n var theme = React.useContext(ThemeContext);\n\n if (props.theme !== theme) {\n theme = createCacheWithTheme(theme)(props.theme);\n }\n\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, props.children);\n};\nfunction withTheme(Component) {\n var componentName = Component.displayName || Component.name || 'Component';\n\n var render = function render(props, ref) {\n var theme = React.useContext(ThemeContext);\n return /*#__PURE__*/React.createElement(Component, _extends({\n theme: theme,\n ref: ref\n }, props));\n }; // $FlowFixMe\n\n\n var WithTheme = /*#__PURE__*/React.forwardRef(render);\n WithTheme.displayName = \"WithTheme(\" + componentName + \")\";\n return hoistNonReactStatics(WithTheme, Component);\n}\n\nvar getLastPart = function getLastPart(functionName) {\n // The match may be something like 'Object.createEmotionProps' or\n // 'Loader.prototype.render'\n var parts = functionName.split('.');\n return parts[parts.length - 1];\n};\n\nvar getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {\n // V8\n var match = /^\\s+at\\s+([A-Za-z0-9$.]+)\\s/.exec(line);\n if (match) return getLastPart(match[1]); // Safari / Firefox\n\n match = /^([A-Za-z0-9$.]+)@/.exec(line);\n if (match) return getLastPart(match[1]);\n return undefined;\n};\n\nvar internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS\n// identifiers, thus we only need to replace what is a valid character for JS,\n// but not for CSS.\n\nvar sanitizeIdentifier = function sanitizeIdentifier(identifier) {\n return identifier.replace(/\\$/g, '-');\n};\n\nvar getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {\n if (!stackTrace) return undefined;\n var lines = stackTrace.split('\\n');\n\n for (var i = 0; i < lines.length; i++) {\n var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just \"Error\"\n\n if (!functionName) continue; // If we reach one of these, we have gone too far and should quit\n\n if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an\n // uppercase letter\n\n if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);\n }\n\n return undefined;\n};\n\nvar typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';\nvar labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';\nvar createEmotionProps = function createEmotionProps(type, props) {\n if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration\n props.css.indexOf(':') !== -1) {\n throw new Error(\"Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`\" + props.css + \"`\");\n }\n\n var newProps = {};\n\n for (var key in props) {\n if (hasOwn.call(props, key)) {\n newProps[key] = props[key];\n }\n }\n\n newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when\n // the label hasn't already been computed\n\n if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {\n var label = getLabelFromStackTrace(new Error().stack);\n if (label) newProps[labelPropName] = label;\n }\n\n return newProps;\n};\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {\n var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works\n // not passing the registered cache to serializeStyles because it would\n // make certain babel optimisations not possible\n\n if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {\n cssProp = cache.registered[cssProp];\n }\n\n var WrappedComponent = props[typePropName];\n var registeredStyles = [cssProp];\n var className = '';\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, registeredStyles, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));\n\n if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {\n var labelFromStack = props[labelPropName];\n\n if (labelFromStack) {\n serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);\n }\n }\n\n className += cache.key + \"-\" + serialized.name;\n var newProps = {};\n\n for (var key in props) {\n if (hasOwn.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {\n newProps[key] = props[key];\n }\n }\n\n newProps.ref = ref;\n newProps.className = className;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof WrappedComponent === 'string'\n }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Emotion.displayName = 'EmotionCssPropInternal';\n}\n\nvar Emotion$1 = Emotion;\n\nexport { CacheProvider as C, Emotion$1 as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwn as h, isBrowser as i, useTheme as u, withEmotionCache as w };\n","import { h as hasOwn, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isBrowser$1 } from './emotion-element-43c6fea0.browser.esm.js';\nexport { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-43c6fea0.browser.esm.js';\nimport * as React from 'react';\nimport { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils';\nimport { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\nimport { serializeStyles } from '@emotion/serialize';\nimport '@emotion/cache';\nimport '@babel/runtime/helpers/extends';\nimport '@emotion/weak-memoize';\nimport '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport 'hoist-non-react-statics';\n\nvar pkg = {\n\tname: \"@emotion/react\",\n\tversion: \"11.11.4\",\n\tmain: \"dist/emotion-react.cjs.js\",\n\tmodule: \"dist/emotion-react.esm.js\",\n\tbrowser: {\n\t\t\"./dist/emotion-react.esm.js\": \"./dist/emotion-react.browser.esm.js\"\n\t},\n\texports: {\n\t\t\".\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./dist/emotion-react.worker.esm.js\",\n\t\t\t\tbrowser: \"./dist/emotion-react.browser.esm.js\",\n\t\t\t\t\"default\": \"./dist/emotion-react.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./dist/emotion-react.cjs.mjs\",\n\t\t\t\"default\": \"./dist/emotion-react.cjs.js\"\n\t\t},\n\t\t\"./jsx-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js\"\n\t\t},\n\t\t\"./_isolated-hnrs\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js\",\n\t\t\t\tbrowser: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js\",\n\t\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs\",\n\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js\"\n\t\t},\n\t\t\"./jsx-dev-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js\"\n\t\t},\n\t\t\"./package.json\": \"./package.json\",\n\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\"./macro\": {\n\t\t\ttypes: {\n\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t},\n\t\t\t\"default\": \"./macro.js\"\n\t\t}\n\t},\n\ttypes: \"types/index.d.ts\",\n\tfiles: [\n\t\t\"src\",\n\t\t\"dist\",\n\t\t\"jsx-runtime\",\n\t\t\"jsx-dev-runtime\",\n\t\t\"_isolated-hnrs\",\n\t\t\"types/*.d.ts\",\n\t\t\"macro.*\"\n\t],\n\tsideEffects: false,\n\tauthor: \"Emotion Contributors\",\n\tlicense: \"MIT\",\n\tscripts: {\n\t\t\"test:typescript\": \"dtslint types\"\n\t},\n\tdependencies: {\n\t\t\"@babel/runtime\": \"^7.18.3\",\n\t\t\"@emotion/babel-plugin\": \"^11.11.0\",\n\t\t\"@emotion/cache\": \"^11.11.0\",\n\t\t\"@emotion/serialize\": \"^1.1.3\",\n\t\t\"@emotion/use-insertion-effect-with-fallbacks\": \"^1.0.1\",\n\t\t\"@emotion/utils\": \"^1.2.1\",\n\t\t\"@emotion/weak-memoize\": \"^0.3.1\",\n\t\t\"hoist-non-react-statics\": \"^3.3.1\"\n\t},\n\tpeerDependencies: {\n\t\treact: \">=16.8.0\"\n\t},\n\tpeerDependenciesMeta: {\n\t\t\"@types/react\": {\n\t\t\toptional: true\n\t\t}\n\t},\n\tdevDependencies: {\n\t\t\"@definitelytyped/dtslint\": \"0.0.112\",\n\t\t\"@emotion/css\": \"11.11.2\",\n\t\t\"@emotion/css-prettifier\": \"1.1.3\",\n\t\t\"@emotion/server\": \"11.11.0\",\n\t\t\"@emotion/styled\": \"11.11.0\",\n\t\t\"html-tag-names\": \"^1.1.2\",\n\t\treact: \"16.14.0\",\n\t\t\"svg-tag-names\": \"^1.1.1\",\n\t\ttypescript: \"^4.5.5\"\n\t},\n\trepository: \"https://github.com/emotion-js/emotion/tree/main/packages/react\",\n\tpublishConfig: {\n\t\taccess: \"public\"\n\t},\n\t\"umd:main\": \"dist/emotion-react.umd.min.js\",\n\tpreconstruct: {\n\t\tentrypoints: [\n\t\t\t\"./index.js\",\n\t\t\t\"./jsx-runtime.js\",\n\t\t\t\"./jsx-dev-runtime.js\",\n\t\t\t\"./_isolated-hnrs.js\"\n\t\t],\n\t\tumdName: \"emotionReact\",\n\t\texports: {\n\t\t\tenvConditions: [\n\t\t\t\t\"browser\",\n\t\t\t\t\"worker\"\n\t\t\t],\n\t\t\textra: {\n\t\t\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\t\t\"./macro\": {\n\t\t\t\t\ttypes: {\n\t\t\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t\t\t},\n\t\t\t\t\t\"default\": \"./macro.js\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar jsx = function jsx(type, props) {\n var args = arguments;\n\n if (props == null || !hasOwn.call(props, 'css')) {\n // $FlowFixMe\n return React.createElement.apply(undefined, args);\n }\n\n var argsLength = args.length;\n var createElementArgArray = new Array(argsLength);\n createElementArgArray[0] = Emotion;\n createElementArgArray[1] = createEmotionProps(type, props);\n\n for (var i = 2; i < argsLength; i++) {\n createElementArgArray[i] = args[i];\n } // $FlowFixMe\n\n\n return React.createElement.apply(null, createElementArgArray);\n};\n\nvar warnedAboutCssPropForGlobal = false; // maintain place over rerenders.\n// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild\n// initial client-side render from SSR, use place of hydrating tag\n\nvar Global = /* #__PURE__ */withEmotionCache(function (props, cache) {\n if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is\n // probably using the custom createElement which\n // means it will be turned into a className prop\n // $FlowFixMe I don't really want to add it to the type since it shouldn't be used\n props.className || props.css)) {\n console.error(\"It looks like you're using the css prop on Global, did you mean to use the styles prop instead?\");\n warnedAboutCssPropForGlobal = true;\n }\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));\n\n if (!isBrowser$1) {\n var _ref;\n\n var serializedNames = serialized.name;\n var serializedStyles = serialized.styles;\n var next = serialized.next;\n\n while (next !== undefined) {\n serializedNames += ' ' + next.name;\n serializedStyles += next.styles;\n next = next.next;\n }\n\n var shouldCache = cache.compat === true;\n var rules = cache.insert(\"\", {\n name: serializedNames,\n styles: serializedStyles\n }, cache.sheet, shouldCache);\n\n if (shouldCache) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(\"style\", (_ref = {}, _ref[\"data-emotion\"] = cache.key + \"-global \" + serializedNames, _ref.dangerouslySetInnerHTML = {\n __html: rules\n }, _ref.nonce = cache.sheet.nonce, _ref));\n } // yes, i know these hooks are used conditionally\n // but it is based on a constant that will never change at runtime\n // it's effectively like having two implementations and switching them out\n // so it's not actually breaking anything\n\n\n var sheetRef = React.useRef();\n useInsertionEffectWithLayoutFallback(function () {\n var key = cache.key + \"-global\"; // use case of https://github.com/emotion-js/emotion/issues/2675\n\n var sheet = new cache.sheet.constructor({\n key: key,\n nonce: cache.sheet.nonce,\n container: cache.sheet.container,\n speedy: cache.sheet.isSpeedy\n });\n var rehydrating = false; // $FlowFixMe\n\n var node = document.querySelector(\"style[data-emotion=\\\"\" + key + \" \" + serialized.name + \"\\\"]\");\n\n if (cache.sheet.tags.length) {\n sheet.before = cache.sheet.tags[0];\n }\n\n if (node !== null) {\n rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other \n \n
\n {message}
\n