diff --git a/package.json b/package.json
index cf72529..b80ca25 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
"ra-data-simple-rest": "^4.8.1",
"react": "18.2.0",
"react-admin": "^4.8.1",
+ "react-countdown": "^2.3.5",
"react-countdown-circle-timer": "^3.0.9",
"react-dom": "18.2.0",
"react-google-recaptcha-v3": "^1.10.0",
diff --git a/src/components/domain/course/CourseProducts.tsx b/src/components/domain/course/CourseProducts.tsx
index 42ece14..9204af2 100644
--- a/src/components/domain/course/CourseProducts.tsx
+++ b/src/components/domain/course/CourseProducts.tsx
@@ -18,6 +18,7 @@ import {useGoogleReCaptcha} from 'react-google-recaptcha-v3'
import {useAuth} from '../../../AuthUserContext'
import {authPost, javaCourseCouponUrl} from '../../../api'
import {javaCourseGoldLogo, javaCourseLogo} from '../../../images'
+import Countdown from 'react-countdown'
type Props = {
className?: string
@@ -29,7 +30,7 @@ const GOLD_COLOR = '#F2BD4C'
const JavaKurzCourseProducts = ({className, course, innerRef}: Props) => {
const {executeRecaptcha} = useGoogleReCaptcha()
- const {user} = useAuth()
+ const {user, isLoading} = useAuth()
const [email, setEmail] = React.useState('')
const [emailError, setEmailError] = React.useState('')
const [emailLoading, setEmailLoading] = React.useState(false)
@@ -118,6 +119,17 @@ const JavaKurzCourseProducts = ({className, course, innerRef}: Props) => {
predpredaj
+ {isBuyable && !isLoading && (
+
+
+
+ Dni
+ Hodiny
+ Minúty
+ Sekundy
+
+
+ )}
{isBuyable && showEmailInput && (
Nemáš zľavový kód? Napíš svoj email a pošleme ti ho
@@ -146,11 +158,17 @@ const JavaKurzCourseProducts = ({className, course, innerRef}: Props) => {
)}
{isBuyable && !showEmailInput && hasUserReceivedPromoCode && (
-
+
Zľavový kód bol odoslaný na email. Ak ho nevidíš, skontroluj si
spam.
)}
+ {!isBuyable && (
+
+ Predpredaj skončil. Kurz bude otvorený najskôr na začiatku roka
+ 2024. Pre viac info sa prihlás na náš newsletter
+
+ )}
@@ -407,6 +425,24 @@ const CardWrapper = styled(Flex)<{gold?: boolean}>`
}
`
+const CountdownWrapper = styled(Flex)`
+ margin-bottom: 12px;
+ width: 300px;
+ opacity: 0.7;
+
+ span {
+ color: var(--color-accent);
+ }
+`
+
+const StyledCountdown = styled(Countdown)`
+ /* color: var(--color-secondary); */
+
+ font-size: 30px;
+ font-weight: bold;
+ letter-spacing: 0.13em;
+`
+
const HeaderWrapper = styled(Flex)<{gold?: boolean}>`
align-self: stretch;
padding-top: 64px;
diff --git a/yarn.lock b/yarn.lock
index 37b67fa..1a5be01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5561,6 +5561,13 @@ react-countdown-circle-timer@^3.0.9:
resolved "https://registry.yarnpkg.com/react-countdown-circle-timer/-/react-countdown-circle-timer-3.2.1.tgz#5d3a3560e1b5b501356e733e76d269506611a0ab"
integrity sha512-yBAy/9ILXOiFbLBM+3jS72TW5LeRcH8wkRC9NNqMpUkCXkGjSnaeRbJMsR9lsYF0oVXjSDbJaRbCuVMT+9HnKA==
+react-countdown@^2.3.5:
+ version "2.3.5"
+ resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.3.5.tgz#70c035b5cbc7e8fdb4ad91fe5f44afd7a7933a68"
+ integrity sha512-K26ENYEesMfPxhRRtm1r+Pf70SErrvW3g4CArLi/x6MPFjgfDFYePT4UghEj8p2nI0cqVV7/JjDgjyr//U60Og==
+ dependencies:
+ prop-types "^15.7.2"
+
react-dom@18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"