Merge branch 'feat/countdown-in-program-package-plan'

urfit-tech · Jan 14, 2025 · 0584c66 · 0584c66
2 parents 069e0d7 + 997c474
commit 0584c66
Show file tree

Hide file tree

Showing 4 changed files with 857 additions and 1 deletion.
diff --git a/src/components/package/ProgramPackagePlanCard.tsx b/src/components/package/ProgramPackagePlanCard.tsx
@@ -8,6 +8,7 @@ import { ProgramPackagePlanProps } from '../../types/programPackage'
 import PaymentButton from '../common/PaymentButton'
 import PriceLabel from 'lodestar-app-element/src/components/labels/PriceLabel'
 import { BraftContent } from 'lodestar-app-element/src/components/common/StyledBraftEditor'
+import CountDownTimeBlock from '../common/CountDownTimeBlock'
 
 const StyledCard = styled.div`
   padding: 1.5rem;
@@ -33,6 +34,13 @@ const StyledEnrollment = styled.div`
   letter-spacing: 0.18px;
 `
 
+const StyledCountDownBlock = styled.div`
+  margin-top: 20px;
+  span {
+    font-size: 14px;
+  }
+`
+
 const ProgramPackagePlanCard: React.VFC<
   ProgramPackagePlanProps & {
     programPackageId: string
@@ -46,6 +54,7 @@ const ProgramPackagePlanCard: React.VFC<
   description,
   isSubscription,
   isParticipantsVisible,
+  isCountdownTimerVisible,
   periodAmount,
   periodType,
   listPrice,
@@ -71,6 +80,11 @@ const ProgramPackagePlanCard: React.VFC<
         periodType={isSubscription ? periodType : undefined}
         periodAmount={isSubscription ? periodAmount : undefined}
       />
+      {isCountdownTimerVisible && soldAt && isOnSale && (
+        <StyledCountDownBlock>
+          <CountDownTimeBlock expiredAt={soldAt} />
+        </StyledCountDownBlock>
+      )}
       <Divider className="my-3" />
       {!isSubscription && periodAmount && periodType && (
         <StyledHighlight className="mb-3">