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"