Add countdown to Java course products

StreetOfCode · Nov 3, 2023 · 09abff6 · 09abff6
1 parent cfcb89c
commit 09abff6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git 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
@@ -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) => {
         <Heading variant="h3" align="center" uppercase>
           predpredaj
         </Heading>
+        {isBuyable && !isLoading && (
+          <CountdownWrapper direction="column" gap="16px" alignItems="center">
+            <StyledCountdown date={new Date(buyableUntil)} />
+            <Flex gap="8px">
+              <Text size="small">Dni</Text>
+              <Text size="small">Hodiny</Text>
+              <Text size="small">Minúty</Text>
+              <Text size="small">Sekundy</Text>
+            </Flex>
+          </CountdownWrapper>
+        )}
         {isBuyable && showEmailInput && (
           <Text align="center">
             Nemáš zľavový kód? Napíš svoj email a pošleme ti ho
@@ -146,11 +158,17 @@ const JavaKurzCourseProducts = ({className, course, innerRef}: Props) => {
           </form>
         )}
         {isBuyable && !showEmailInput && hasUserReceivedPromoCode && (
-          <Text>
+          <Text align="center">
             Zľavový kód bol odoslaný na email. Ak ho nevidíš, skontroluj si
             spam.
           </Text>
         )}
+        {!isBuyable && (
+          <Text align="center">
+            Predpredaj skončil. Kurz bude otvorený najskôr na začiatku roka
+            2024. Pre viac info sa prihlás na náš newsletter
+          </Text>
+        )}
       </Flex>
       <CardsFlex justifyContent="center" gap="32px" alignItems="flex-start">
         <CardWrapper direction="column" gap="16px" alignItems="flex-start">
@@ -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
@@ -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"
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"