\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Bist du sicher?
\r\n\r\n
\r\n \r\n
\r\n \r\n actionSecond() : null} />\r\n
\r\n \r\n {addrDetail && addrDetail.dashboardState && addrDetail.dashboardState.notifications && addrDetail.dashboardState.notifications.length > 0 ? (\r\n addrDetail.dashboardState.notifications.map((item, index) => (\r\n
\r\n \r\n
\r\n )}\r\n \r\n No New Notification\r\n
\r\n© {getYear()} All Rights Reserved
\r\n\r\n {noSpinner ? null : }\r\n {showCheckmark ? (\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {text}\r\n
\r\n{index ? index : null}
\r\n\r\n
\r\n \r\n {account ? \"Konto\" : \"Adresse\"} {index ? index : null}:\r\n
\r\n{address ? address : null}
\r\n\r\n
\r\n \r\n Willkommen zurück\r\n
\r\n\r\n Bitte wählen Sie Ihr Konto\r\n
\r\n {user && user.accounts && user.accounts.items\r\n ? user.accounts.items.map((item, index) => (\r\n\r\n dispatch(togglePopup(true))} />\r\n
\r\n © {getYear()} All Rights Reserved
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default Dashboard;\r\n\r\nconst BannerBox = styled.div`\r\n background-color: #fff;\r\n border-radius: 0.8rem;\r\n border: 2px solid #eaeeee;\r\n margin-top: 30px;\r\n @media (max-width: 400px) {\r\n margin-top: 10px;\r\n }\r\n img {\r\n \r\n width: 100%;\r\n height: auto;\r\n border-radius: 0.8rem;\r\n background-position: center;\r\n background-size: cover;\r\n }\r\n`;\r\nconst Header = styled.div`\r\n padding-bottom: 10px;\r\n @media (max-width: 859px) {\r\n padding-bottom: 0px;\r\n }\r\n @media (max-width: 630px) {\r\n text-align: center;\r\n flex-direction: column;\r\n }\r\n`;\r\nconst EmptyBox = styled.div`\r\n background-color: #fff;\r\n border-radius: 0.8rem;\r\n border: 2px solid #eaeeee;\r\n padding: 30px 20px;\r\n margin-top: 30px;\r\n @media (max-width: 400px) {\r\n margin-top: 10px;\r\n }\r\n`;\r\nconst EmptyBoxHeader = styled.div`\r\n background-color: #fff;\r\n border-radius: 0.8rem;\r\n border: 2px solid #eaeeee;\r\n margin-top: 30px;\r\n min-height: 320px;\r\n @media (max-width: 400px) {\r\n margin-top: 10px;\r\n }\r\n`;\r\nconst ButtonWrapper = styled.div`\r\n width: 245px; \r\n margin: 0 auto;\r\n margin-top: 20px;\r\n`;\r\nconst HeaderBox = styled.div`\r\n background-color: #fafafa;\r\n width: 100%;\r\n padding: 30px;\r\n border-top-left-radius: 0.8rem;\r\n border-top-right-radius: 0.8rem;\r\n`;\r\nconst AvatarCircle = styled.div`\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n min-width: 50px;\r\n min-height: 50px;\r\n`;\r\nconst BoxRow = styled.div`\r\n padding: 15px 30px;\r\n @media (max-width: 400px) {\r\n flex-direction: column;\r\n text-align: center!important;\r\n }\r\n`;\r\nconst InfoRowWrapper = styled.div`\r\n @media (max-width: 1580px) {\r\n flex-direction: column;\r\n }\r\n`;\r\nconst InfoBoxWrapper = styled.div`\r\n width: 48.5%;\r\n @media (max-width: 1580px) {\r\n width: 100%;\r\n }\r\n`;\r\nconst BoxRowTitle = styled.div`\r\n width: 40%;\r\n padding-left: 20px;\r\n @media (max-width: 400px) {\r\n width: 100%;\r\n padding: 5px 0px;\r\n }\r\n`;\r\nconst BoxRowSubtitle = styled.div`\r\n width: 50%;\r\n @media (max-width: 400px) {\r\n width: 100%;\r\n padding: 5px 0px;\r\n }\r\n`\r\nconst MailToStyle = styled.a`\r\n color: #171727;\r\n :hover {\r\n color: #f9a81a;\r\n }\r\n`;\r\n;","import * as React from \"react\";\r\n\r\nfunction SvgComponent(props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport default SvgComponent;\r\n","import * as React from \"react\";\r\n\r\nfunction SvgComponent(props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport default SvgComponent;\r\n","import React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport {Link} from \"react-router-dom\";\r\n// Assets\r\nimport StromDetail from \"../../assets/svg/stromDetail\";\r\nimport GasDetail from \"../../assets/svg/gasDetail\";\r\n\r\n\r\nconst ProductSelect = ({ title, active, to }) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {user && user.accounts && user.accounts.items && user.accounts.items.length > 1 ? (\r\n \r\n Willkommen\r\n
\r\n\r\n zu deiner Energy Hero Übersicht\r\n
\r\n\r\n selectAccHandler()} />\r\n
\r\n ) : null}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {accDetail && accDetail.addresses && accDetail.addresses.length > 0\r\n ? accDetail.addresses.map((item, index) => (\r\n \r\n
\r\n \r\n Deine angemeldeten Adressen\r\n
\r\nBitte wählen Sie die jeweilige Adresse aus und Sie erhalten weitere Informationen.
\r\n\r\n
\r\n \r\n {accDetail ? accDetail.name : null}\r\n
\r\n{accDetail ? accDetail.email : null}
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Geburtsdatum:
\r\n{accDetail ?
\r\n
\r\n IBAN:
\r\n{accDetail ? maskStr(accDetail.iban) : null}
\r\n\r\n
\r\n Friendscode:
\r\n{accDetail ? accDetail.friendsCode : null}
\r\n\r\n
\r\n Hast du noch Fragen?
\r\n\r\n \r\n \r\n \r\n \r\n \r\n hallo@energyhero.at\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n E-Mail:
\r\n\r\n
\r\n Telefon:
\r\n\r\n +43 (0) 720 2 720 20
Mo-Mi 10:00 � 16:00 Uhr
Do 09:00 � 15:00 Uhr
Fr 09:00 � 12:00 Uhr\r\n
\r\n \r\n 
\r\n \r\n \r\n 
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ProductSelect;\r\n\r\nconst Wrapper = styled(Link)`\r\n background-color: #fafafa;\r\n height: 65px;\r\n width: 100%;\r\n outline: none;\r\n border: 0px;\r\n margin: 0 10px;\r\n border-radius: 0.5rem;\r\n padding: 0 20px;\r\n color: #171727;\r\n :hover {\r\n background-color: #f58600;\r\n }\r\n`;\r\n\r\n","import React from \"react\";\r\nimport styled from \"styled-components\";\r\n// Svg-s\r\nimport CheckmarkIcon from \"../../assets/svg/checkmark\";\r\n\r\nconst Checkbox = ({ action, checked, disabled }) => {\r\n return (\r\n\r\n {title}\r\n
\r\n\r\n
\r\n \r\n Error!\r\n
\r\n \r\n ) : null}\r\n {error ? (\r\nIhre IBAN-Nummer ist ungültig.
\r\n ) : (\r\nDeine Änderungen wurden an uns übermittelt und werden geprüft.
\r\n )}\r\n\r\n
\r\n \r\n action() : null} />\r\n
\r\n \r\n {user?.savedChanges && user?.addrDetail?.dashboardState?.invalidIban === false ? dispatch(closeSuccessModal())} /> : null}\r\n {user?.savedChanges && user?.addrDetail?.dashboardState?.invalidIban ? dispatch(closeSuccessModal())} /> : null}\r\n
\r\n );\r\n};\r\n\r\nexport default Strom;\r\n\r\nconst dropdownOpenAnimation = keyframes`\r\n 0% { top: 0px; }\r\n 100% { top: 40px; }\r\n`;\r\nconst Header = styled.div`\r\n padding-bottom: 10px;\r\n @media (max-width: 859px) {\r\n padding-bottom: 0px;\r\n }\r\n @media (max-width: 660px) {\r\n flex-direction: column;\r\n }\r\n`;\r\nconst HeaderAddressWrapper = styled.div`\r\n @media (max-width: 660px) {\r\n padding-bottom: 20px;\r\n }\r\n`;\r\nconst EmptyBox = styled.div`\r\n background-color: #fff;\r\n border-radius: 0.8rem;\r\n border: 2px solid #eaeeee;\r\n padding: 30px 20px;\r\n margin-top: 30px;\r\n @media (max-width: 400px) {\r\n margin-top: 10px;\r\n }\r\n`;\r\nconst EmptyBoxHeader = styled.div`\r\n background-color: #fff;\r\n border-radius: 0.8rem;\r\n border: 2px solid #eaeeee;\r\n margin-top: 30px;\r\n padding-bottom: 10px;\r\n @media (max-width: 400px) {\r\n margin-top: 10px;\r\n }\r\n`;\r\nconst HeaderBox = styled.div`\r\n background-color: #fafafa;\r\n width: 100%;\r\n padding: 20px 30px;\r\n border-top-left-radius: 0.8rem;\r\n border-top-right-radius: 0.8rem;\r\n`;\r\nconst AvatarCircle = styled.div`\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n min-width: 50px;\r\n min-height: 50px;\r\n`;\r\nconst BoxRow = styled.div`\r\n padding: 10px 30px;\r\n @media (max-width: 400px) {\r\n flex-direction: column;\r\n text-align: center !important;\r\n }\r\n`;\r\nconst BoxRowTitle = styled.div`\r\n width: 90%;\r\n padding-left: 20px;\r\n @media (max-width: 660px) {\r\n padding: 10px 0 0 0px;\r\n }\r\n`;\r\nconst ExpectedSavings = styled.div`\r\n margin: 10px 0;\r\n padding: 15px 60px 15px 30px;\r\n border-radius: 0.7rem;\r\n float: left;\r\n position: relative;\r\n @media (max-width: 400px) {\r\n float: none;\r\n }\r\n`;\r\nconst InfoBtn = styled.button`\r\n background-color: transparent;\r\n border: 0px;\r\n outline: none;\r\n padding: 10px;\r\n position: absolute;\r\n top: 20px;\r\n right: 10px;\r\n`;\r\nconst InfoBtn2 = styled.button`\r\n background-color: transparent;\r\n border: 0px;\r\n outline: none;\r\n padding: 10px;\r\n right: 10px;\r\n margin-top: 3px;\r\n`;\r\nconst DropdownBox = styled.div`\r\n background-color: #fff;\r\n position: absolute;\r\n min-width: 230px;\r\n right: 0;\r\n padding: 15px;\r\n border-radius: 0.6rem;\r\n border: 2px solid #eaeeee;\r\n -webkit-box-shadow: 0px 3px 12px 0px rgba(139, 139, 131, 0.16);\r\n -moz-box-shadow: 0px 3px 12px 0px rgba(139, 139, 131, 0.16);\r\n box-shadow: 0px 3px 12px 0px rgba(139, 139, 131, 0.16);\r\n z-index: 9999;\r\n animation-name: ${dropdownOpenAnimation};\r\n animation-duration: 0.3s;\r\n -webkit-animation: ${dropdownOpenAnimation} 0.3s forwards;\r\n animation: ${dropdownOpenAnimation} 0.3s forwards;\r\n`;\r\nconst ArrowUpWrapper = styled.div`\r\n position: absolute;\r\n top: -10px;\r\n right: 0px;\r\n`;\r\nconst DropdownP = styled.p`\r\n line-height: 1rem;\r\n color: #5C5C67;\r\n`;\r\nconst ProgressWrapper = styled.div`\r\n width: 70%;\r\n @media (max-width: 660px) {\r\n width: 100%;\r\n }\r\n`;\r\nconst ProgressContainer = styled.div`\r\n @media (max-width: 660px) {\r\n flex-direction: column;\r\n }\r\n`;\r\nconst ProgressIcon = styled.div`\r\n width: 100%;\r\n margin-bottom: 20px;\r\n margin-left: 10px;\r\n`;\r\nconst BigInputWrapper = styled.div`\r\n max-width: 50%;\r\n @media (max-width: 990px) {\r\n max-width: 100%;\r\n }\r\n`;\r\nconst MeterWrapper = styled.div`\r\n margin-top: 20px;\r\n @media (max-width: 660px) {\r\n flex-direction: column;\r\n }\r\n`;\r\nconst AddressHeaderWrapper = styled.div`\r\n margin-bottom: 20px;\r\n @media (max-width: 660px) {\r\n margin-bottom: 20px;\r\n }\r\n`;\r\nconst AddressWrapper = styled.div`\r\n margin-top: 5px;\r\n @media (max-width: 660px) {\r\n flex-direction: column;\r\n }\r\n`;\r\nconst WrapperDiv = styled.div`\r\n width: 100%;\r\n position: relative;\r\n`;\r\nconst InputStyle = styled.input`\r\n width: 100%;\r\n height: 52px;\r\n background-color: #fff;\r\n border: ${(props) => (props.error ? \"2px solid #FF1500\" : \"2px solid #eaeeee\")};\r\n outline: none;\r\n padding: 0 130px 0 20px;\r\n font-size: 1.1rem;\r\n border-radius: 0.7rem;\r\n position: relative;\r\n`;\r\nconst UnitStyle = styled.div`\r\n width: 120px;\r\n height: calc(100% - 4px);\r\n padding: 0 30px;\r\n margin: 2px;\r\n background-color: #ced4da;\r\n border-radius: 0.5rem;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n`;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport styled, { keyframes } from \"styled-components\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { postSaveChanges, closeSuccessModal } from \"../redux/userSlice\";\r\nimport { maskStr } from \"../helpers/utils\";\r\n// Components\r\nimport ProductSelect from \"../components/Buttons/ProductSelect\";\r\nimport CheckBox from \"../components/Inputs/Checkbox\";\r\nimport ProgressPoint from \"../components/Elements/ProgressPoint\";\r\nimport FullButton from \"../components/Buttons/FullButton\";\r\nimport InputLabel from \"../components/Inputs/InputLabel\";\r\nimport ModalSuccess from \"../components/Elements/ModalSuccess\";\r\n// Assets\r\nimport EmptyState from \"../assets/svg/EmptyState\";\r\nimport DocumentIcon from \"../assets/svg/document\";\r\nimport BuildingIcon from \"../assets/svg/building\";\r\nimport TagIcon from \"../assets/svg/tag\";\r\nimport SavingsIcon from \"../assets/svg/savings\";\r\nimport InfoIcon from \"../assets/svg/info\";\r\nimport ArrowUpFull from \"../assets/svg/arrows/arrowUpFull\";\r\nimport ArrowsIntersect from \"../assets/svg/arowsIntersect\";\r\nimport ElectricSymbol from \"../assets/svg/electricSymbol\";\r\nimport MeterIcon from \"../assets/svg/meter\";\r\n\r\nconst Strom = () => {\r\n const dispatch = useDispatch();\r\n const sidebarOpen = useSelector((state) => state.preference.sidebarOpen);\r\n const user = useSelector((state) => state.user);\r\n const [showDropdownInfo, setShowDropdownInfo] = useState(false);\r\n const [showStatusDropdownInfo, setShowStatusDropdownInfo] = useState(false);\r\n const addressDetail = useSelector((state) => state.user.addrDetail);\r\n const [energyData, setEnergyData] = useState(null);\r\n // PREFERENCES\r\n const [nkDiscount, setNkDiscount] = useState(false);\r\n const [greenElectricity, setGreenElectricity] = useState(false);\r\n const [electricityAustria, setElectricityAustria] = useState(false);\r\n const [totalBill, setTotalBill] = useState(false);\r\n // CONSUMPTION\r\n const [consumptionValue, setConsumptionValue] = useState(\"\");\r\n const [billingAddress, setBillingAddress] = useState(\"\");\r\n const [iban, setIban] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (addressDetail && addressDetail.energyProviderDetails && addressDetail.energyProviderDetails !== \"undefined\") {\r\n const energyMatch = addressDetail.energyProviderDetails.find((obj) =>\r\n obj.energyType && obj.energyType !== \"undefined\" ? obj.energyType.toLowerCase() === \"gas\" : null\r\n );\r\n setEnergyData(energyMatch);\r\n }\r\n }, [addressDetail]);\r\n\r\n useEffect(() => {\r\n setNkDiscount(energyData && energyData.tariffDiscount ? energyData.tariffDiscount : false);\r\n setTotalBill(energyData && energyData.totalInvoice ? energyData.totalInvoice : false);\r\n setConsumptionValue(energyData && energyData.annualConsumption ? energyData.annualConsumption : \"\");\r\n }, [energyData]);\r\n\r\n const saveHandler = () => {\r\n let userMadeChanges = false;\r\n let data = {\r\n AccountId: user.selectedAccount,\r\n AddressId: user.selectedAddress.id,\r\n AddressName: user.selectedAddress.name,\r\n ContractId: energyData.contractId,\r\n EnergyProvider: energyData.energyProvider,\r\n EnergyProviderId: energyData.energyProviderId,\r\n EnergyType: energyData.energyType,\r\n ExpectedSavings: energyData.expectedSavings,\r\n MeterNumber: energyData.meterNumber,\r\n ProductId: energyData.productId,\r\n ProgressBarStatus: energyData.progressBarStatus,\r\n ShippingAddress: energyData.shippingAddress,\r\n Status: energyData.status,\r\n Tariff: energyData.tariff,\r\n };\r\n if (nkDiscount !== energyData.tariffDiscount) {\r\n data.NkDiscountNew = nkDiscount;\r\n data.NkDiscountOld = energyData.tariffDiscount;\r\n userMadeChanges = true;\r\n } else {\r\n data.NkDiscountNew = energyData.tariffDiscount;\r\n data.NkDiscountOld = energyData.tariffDiscount;\r\n }\r\n if (greenElectricity !== energyData.ecoElectricity) {\r\n data.GreenElectricityNew = energyData.ecoElectricity;\r\n data.GreenElectricityOld = energyData.ecoElectricity;\r\n }\r\n if (electricityAustria !== energyData.electricityFromAUS) {\r\n data.ElectricityFromAustriaNew = energyData.electricityFromAUS;\r\n data.ElectricityFromAustriaOld = energyData.electricityFromAUS;\r\n }\r\n if (totalBill !== energyData.totalInvoice) {\r\n data.TotalBillNew = totalBill;\r\n data.TotalBillOld = energyData.totalInvoice;\r\n userMadeChanges = true;\r\n } else {\r\n data.TotalBillNew = energyData.totalInvoice;\r\n data.TotalBillOld = energyData.totalInvoice;\r\n }\r\n if (consumptionValue !== energyData.annualConsumption && consumptionValue.length > 0) {\r\n data.ConsumptionNew = parseInt(consumptionValue);\r\n data.ConsumptionOld = energyData.annualConsumption;\r\n userMadeChanges = true;\r\n } else {\r\n data.ConsumptionNew = energyData.annualConsumption;\r\n data.ConsumptionOld = energyData.annualConsumption;\r\n }\r\n if (billingAddress !== addressDetail.billingAddress && billingAddress.replace(/ /g, \"\") !== \"\") {\r\n data.BillingAddressNew = billingAddress;\r\n data.BillingAddressOld = addressDetail.billingAddress;\r\n userMadeChanges = true;\r\n } else {\r\n data.BillingAddressNew = addressDetail.billingAddress;\r\n data.BillingAddressOld = addressDetail.billingAddress;\r\n }\r\n if (iban !== addressDetail.iban && iban.replace(/ /g, \"\") !== \"\") {\r\n data.IbanNew = iban;\r\n data.IbanOld = addressDetail.iban;\r\n userMadeChanges = true;\r\n } else {\r\n data.IbanNew = addressDetail.iban;\r\n data.IbanOld = addressDetail.iban;\r\n }\r\n if (userMadeChanges) {\r\n dispatch(postSaveChanges(data));\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {energyData ? (\r\n <>\r\n \r\n Lieferadresse:\r\n
\r\n\r\n {user && user.accDetail && user.accDetail.name ? user.accDetail.name : null} -{\" \"}\r\n {user && user.selectedAddress && user.selectedAddress.name ? user.selectedAddress.name : null}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Derzeitiger Vertrag
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setShowDropdownInfo(true)} onMouseLeave={() => setShowDropdownInfo(false)}>\r\n \r\n \r\n \r\n \r\n Berechnung auf Basis aktueller Tarifinformationen. Energy Hero übernimmt keine Gewähr für Tarifanpassungen seitens der Anbieter im Zeitraum zwischen Vorabberechnung und dem tatsächlichen Anbieterwechsel. Die genannte Ersparnis bezieht sich auf deinen letzten Energy Hero Anbieterwechsel.\r\n \r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Anbieter:
\r\n{energyData.energyProvider ? energyData.energyProvider : \"No Data\"}
\r\n\r\n
\r\n Tarif:
\r\n{energyData.tariff ? energyData.tariff : \"No Data\"}
\r\n\r\n
\r\n Voraussichtliche Ersparnis:
\r\n{energyData.expectedSavings ? energyData.expectedSavings + \" €\" : \"No Data\"}
\r\n\r\n (exkl. Servicegebühr)\r\n
\r\n\r\n
\r\n Deine Präferenzen
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n setNkDiscount(!nkDiscount)}\r\n />\r\n
\r\n Tarife ohne Neukundenrabatte
\r\n\r\n setGreenElectricity(!greenElectricity)}\r\n />\r\n
\r\n Ökostrom
\r\n\r\n setElectricityAustria(!electricityAustria)}\r\n />\r\n
\r\n Strom aus AT
\r\n\r\n setTotalBill(!totalBill)}\r\n />\r\n
\r\n Gesamtrechnung
\r\n\r\n \r\n \r\n \r\n \r\n \r\n {energyData.progressBarStatuses\r\n ? energyData.progressBarStatuses.map((item, index) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n setConsumptionValue(e.target.value)}\r\n value={consumptionValue}\r\n placeholder={energyData.annualConsumption ? energyData.annualConsumption : \"No Data\"}\r\n style={\r\n addressDetail && addressDetail.dashboardState && addressDetail.dashboardState.isElectricityConsumptionDisabled\r\n ? { cursor: \"not-allowed\" }\r\n : null\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Aktueller Wechselstatus
\r\n\r\n setShowStatusDropdownInfo(true)}\r\n onMouseLeave={() => setShowStatusDropdownInfo(false)}\r\n >\r\n \r\n \r\n \r\n \r\n {energyData.extendedStatus && energyData.extendedStatus.info ? energyData.extendedStatus.info : null}\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n \r\n {energyData.extendedStatus && energyData.extendedStatus.description ? energyData.extendedStatus.description : null}\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Verbrauch ändern\r\n
\r\n\r\n Bitte gib uns Bescheid, wenn sich dein Verbrauch ändert, damit wir immer den besten Tarif für deine Bedürfnisse finden können. Bitte beachte, dass deine Verbrauchsdaten erst beim nächsten Wechsel berücksichtigt werden können.\r\n
\r\nkWh
\r\n\r\n
\r\n \r\n Zählpunktbezeichnung:\r\n
\r\n{energyData.meterNumber ? energyData.meterNumber : \"No Data\"}
\r\n\r\n
\r\n \r\n Zahlungsinformationen\r\n
\r\n\r\n Bitte beachte, dass du deine Zahlungsinformationen auch deinem Energieanbieter und Netzbetreiber bekannt geben musst.{\" \"}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Rechnungsadresse:
\r\n{addressDetail && addressDetail.billingAddress ? addressDetail.billingAddress : \"No Data\"}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n IBAN
\r\n\r\n
\r\n IBAN:
\r\n{addressDetail && addressDetail.iban ? maskStr(addressDetail.iban) : \"No Data\"}
\r\n\r\n
\r\n \r\n
\r\n \r\n ) : (\r\n \r\n
\r\n \r\n
\r\n )}\r\n Kein Strom-Wechsel gefunden
\r\n\r\n {user?.savedChanges && user?.addrDetail?.dashboardState?.invalidIban === false ? dispatch(closeSuccessModal())} /> : null}\r\n {user?.savedChanges && user?.addrDetail?.dashboardState?.invalidIban ? dispatch(closeSuccessModal())} /> : null}\r\n
\r\n );\r\n};\r\n\r\nexport default Strom;\r\n\r\nconst dropdownOpenAnimation = keyframes`\r\n 0% { top: 0px; }\r\n 100% { top: 40px; }\r\n`;\r\nconst Header = styled.div`\r\n padding-bottom: 10px;\r\n @media (max-width: 859px) {\r\n padding-bottom: 0px;\r\n }\r\n @media (max-width: 660px) {\r\n flex-direction: column;\r\n }\r\n`;\r\nconst HeaderAddressWrapper = styled.div`\r\n @media (max-width: 660px) {\r\n padding-bottom: 20px;\r\n }\r\n`;\r\nconst EmptyBox = styled.div`\r\n background-color: #fff;\r\n border-radius: 0.8rem;\r\n border: 2px solid #eaeeee;\r\n padding: 30px 20px;\r\n margin-top: 30px;\r\n @media (max-width: 400px) {\r\n margin-top: 10px;\r\n }\r\n`;\r\nconst EmptyBoxHeader = styled.div`\r\n background-color: #fff;\r\n border-radius: 0.8rem;\r\n border: 2px solid #eaeeee;\r\n margin-top: 30px;\r\n padding-bottom: 10px;\r\n @media (max-width: 400px) {\r\n margin-top: 10px;\r\n }\r\n`;\r\nconst HeaderBox = styled.div`\r\n background-color: #fafafa;\r\n width: 100%;\r\n padding: 20px 30px;\r\n border-top-left-radius: 0.8rem;\r\n border-top-right-radius: 0.8rem;\r\n`;\r\nconst AvatarCircle = styled.div`\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n min-width: 50px;\r\n min-height: 50px;\r\n`;\r\nconst BoxRow = styled.div`\r\n padding: 10px 30px;\r\n @media (max-width: 400px) {\r\n flex-direction: column;\r\n text-align: center !important;\r\n }\r\n`;\r\nconst BoxRowTitle = styled.div`\r\n width: 90%;\r\n padding-left: 20px;\r\n @media (max-width: 660px) {\r\n padding: 10px 0 0 0px;\r\n }\r\n`;\r\nconst ExpectedSavings = styled.div`\r\n margin: 10px 0;\r\n padding: 15px 60px 15px 30px;\r\n border-radius: 0.7rem;\r\n float: left;\r\n position: relative;\r\n @media (max-width: 400px) {\r\n float: none;\r\n }\r\n`;\r\nconst InfoBtn = styled.button`\r\n background-color: transparent;\r\n border: 0px;\r\n outline: none;\r\n padding: 10px;\r\n position: absolute;\r\n top: 20px;\r\n right: 10px;\r\n`;\r\nconst InfoBtn2 = styled.button`\r\n background-color: transparent;\r\n border: 0px;\r\n outline: none;\r\n padding: 10px;\r\n right: 10px;\r\n margin-top: 3px;\r\n`;\r\nconst DropdownBox = styled.div`\r\n background-color: #fff;\r\n position: absolute;\r\n min-width: 230px;\r\n right: 0;\r\n padding: 15px;\r\n border-radius: 0.6rem;\r\n border: 2px solid #eaeeee;\r\n -webkit-box-shadow: 0px 3px 12px 0px rgba(139, 139, 131, 0.16);\r\n -moz-box-shadow: 0px 3px 12px 0px rgba(139, 139, 131, 0.16);\r\n box-shadow: 0px 3px 12px 0px rgba(139, 139, 131, 0.16);\r\n z-index: 9999;\r\n animation-name: ${dropdownOpenAnimation};\r\n animation-duration: 0.3s;\r\n -webkit-animation: ${dropdownOpenAnimation} 0.3s forwards;\r\n animation: ${dropdownOpenAnimation} 0.3s forwards;\r\n`;\r\nconst ArrowUpWrapper = styled.div`\r\n position: absolute;\r\n top: -10px;\r\n right: 0px;\r\n`;\r\nconst DropdownP = styled.p`\r\n line-height: 1rem;\r\n color: #5c5c67;\r\n`;\r\nconst ProgressWrapper = styled.div`\r\n width: 70%;\r\n @media (max-width: 660px) {\r\n width: 100%;\r\n }\r\n`;\r\nconst ProgressContainer = styled.div`\r\n @media (max-width: 660px) {\r\n flex-direction: column;\r\n }\r\n`;\r\nconst ProgressIcon = styled.div`\r\n width: 100%;\r\n margin-bottom: 20px;\r\n margin-left: 10px;\r\n`;\r\nconst BigInputWrapper = styled.div`\r\n max-width: 50%;\r\n @media (max-width: 990px) {\r\n max-width: 100%;\r\n }\r\n`;\r\nconst MeterWrapper = styled.div`\r\n margin-top: 20px;\r\n @media (max-width: 660px) {\r\n flex-direction: column;\r\n }\r\n`;\r\nconst AddressHeaderWrapper = styled.div`\r\n margin-bottom: 20px;\r\n @media (max-width: 660px) {\r\n margin-bottom: 20px;\r\n }\r\n`;\r\nconst AddressWrapper = styled.div`\r\n margin-top: 5px;\r\n @media (max-width: 660px) {\r\n flex-direction: column;\r\n }\r\n`;\r\nconst WrapperDiv = styled.div`\r\n width: 100%;\r\n position: relative;\r\n`;\r\nconst InputStyle = styled.input`\r\n width: 100%;\r\n height: 52px;\r\n background-color: #fff;\r\n border: ${(props) => (props.error ? \"2px solid #FF1500\" : \"2px solid #eaeeee\")};\r\n outline: none;\r\n padding: 0 130px 0 20px;\r\n font-size: 1.1rem;\r\n border-radius: 0.7rem;\r\n position: relative;\r\n`;\r\nconst UnitStyle = styled.div`\r\n width: 120px;\r\n height: calc(100% - 4px);\r\n padding: 0 30px;\r\n margin: 2px;\r\n background-color: #ced4da;\r\n border-radius: 0.5rem;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n`;\r\n","import * as React from \"react\";\r\n\r\nfunction SvgComponent(props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport default SvgComponent;\r\n","import React from \"react\";\r\nimport styled from \"styled-components\";\r\n// Components\r\nimport FullButton from \"../components/Buttons/FullButton\";\r\n// Assets\r\nimport LogoBigDark from \"../assets/svg/logoBigDark\";\r\nimport Sign404 from \"../assets/svg/404\";\r\n\r\nconst Error404 = () => {\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {energyData ? (\r\n <>\r\n \r\n Lieferadresse:\r\n
\r\n\r\n {user && user.accDetail && user.accDetail.name ? user.accDetail.name : null} -{\" \"}\r\n {user && user.selectedAddress && user.selectedAddress.name ? user.selectedAddress.name : null}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Derzeitiger Vertrag
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setShowDropdownInfo(true)} onMouseLeave={() => setShowDropdownInfo(false)}>\r\n \r\n \r\n \r\n \r\n Berechnung auf Basis aktueller Tarifinformationen. Energy Hero übernimmt keine Gewähr für Tarifanpassungen seitens der Anbieter im Zeitraum zwischen Vorabberechnung und dem tatsächlichen Anbieterwechsel. Die genannte Ersparnis bezieht sich auf deinen letzten Energy Hero Anbieterwechsel.\r\n \r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Anbieter:
\r\n{energyData.energyProvider ? energyData.energyProvider : \"No Data\"}
\r\n\r\n
\r\n Tarif:
\r\n{energyData.tariff ? energyData.tariff : \"No Data\"}
\r\n\r\n
\r\n Voraussichtliche Ersparnis:
\r\n{energyData.expectedSavings ? energyData.expectedSavings + \" €\" : \"No Data\"}
\r\n\r\n (exkl. Servicegebühr)\r\n
\r\n\r\n
\r\n Deine Präferenzen
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n setNkDiscount(!nkDiscount)}\r\n />\r\n
\r\n Tarife ohne Neukundenrabatte
\r\n\r\n setTotalBill(!totalBill)}\r\n />\r\n
\r\n Gesamtrechnung
\r\n\r\n \r\n \r\n \r\n \r\n \r\n {energyData.progressBarStatuses\r\n ? energyData.progressBarStatuses.map((item, index) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n setConsumptionValue(e.target.value)}\r\n value={consumptionValue}\r\n placeholder={energyData.annualConsumption ? energyData.annualConsumption : \"No Data\"}\r\n style={\r\n addressDetail && addressDetail.dashboardState && addressDetail.dashboardState.isGasConsumptionDisabled\r\n ? { cursor: \"not-allowed\" }\r\n : null\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Aktueller Wechselstatus
\r\n\r\n setShowStatusDropdownInfo(true)}\r\n onMouseLeave={() => setShowStatusDropdownInfo(false)}\r\n >\r\n \r\n \r\n \r\n \r\n {energyData.extendedStatus && energyData.extendedStatus.info ? energyData.extendedStatus.info : null}\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n \r\n {energyData.extendedStatus && energyData.extendedStatus.description ? energyData.extendedStatus.description : null}\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Verbrauch ändern\r\n
\r\n\r\n Bitte gib uns Bescheid, wenn sich dein Verbrauch ändert, damit wir immer den besten Tarif für deine Bedürfnisse finden können. Bitte beachte, dass deine Verbrauchsdaten erst beim nächsten Wechsel berücksichtigt werden können.\r\n
\r\nkWh
\r\n\r\n
\r\n \r\n Zählpunktbezeichnung:\r\n
\r\n{energyData.meterNumber ? energyData.meterNumber : \"No Data\"}
\r\n\r\n
\r\n \r\n Zahlungsinformationen\r\n
\r\n\r\n Bitte beachte, dass du deine Zahlungsinformationen auch deinem Energieanbieter und Netzbetreiber bekannt geben musst.{\" \"}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Rechnungsadresse:
\r\n{addressDetail && addressDetail.billingAddress ? addressDetail.billingAddress : \"No Data\"}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n IBAN
\r\n\r\n
\r\n IBAN:
\r\n{addressDetail && addressDetail.iban ? maskStr(addressDetail.iban) : \"No Data\"}
\r\n\r\n
\r\n \r\n
\r\n \r\n ) : (\r\n \r\n
\r\n \r\n
\r\n )}\r\n Kein Gas-Wechsel gefunden
\r\n\r\n
\r\n \r\n
\r\n whoops... this page is not available
\r\n\r\n
\r\n