Merge pull request #645 from urfit-tech/feat/add-programPackagePlanCa…

…rd-CountDownTimeBlock feat: add programPackagePlanCard CountDownTimeBlock
urfit-tech · Jan 7, 2025 · a9e3fc4 · a9e3fc4
2 parents ef62af0 + 7d32363
commit a9e3fc4
Show file tree

Hide file tree

Showing 4 changed files with 857 additions and 32 deletions.
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">