Discounted Price Style

advanced-computer-lab-2023 · Nov 13, 2023 · 2eac13d · 2eac13d
1 parent a8bf274
commit 2eac13d
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 21 deletions.
diff --git a/frontend/src/components/DiscountedPrice.tsx b/frontend/src/components/DiscountedPrice.tsx
@@ -0,0 +1,27 @@
+import { Typography, Stack } from '@mui/material'
+
+export function DiscountedPrice({
+  originalPrice,
+  discountedPrice,
+}: {
+  originalPrice: number
+  discountedPrice: number
+}) {
+  return (
+    <Typography variant="body1">
+      {discountedPrice != originalPrice ? (
+        <Stack direction="row" spacing={1}>
+          <Typography variant="body1">{discountedPrice.toFixed(2)}$</Typography>
+          <Typography
+            variant="body1"
+            sx={{ textDecoration: 'line-through', color: 'text.disabled' }}
+          >
+            {originalPrice.toFixed(2)}$
+          </Typography>
+        </Stack>
+      ) : (
+        originalPrice.toFixed(2) + '$'
+      )}
+    </Typography>
+  )
+}
diff --git a/frontend/src/features/patient-dashboard/routes/ApprovedDoctors.tsx b/frontend/src/features/patient-dashboard/routes/ApprovedDoctors.tsx
@@ -11,6 +11,7 @@ import {
 import { DateRange, FilteredList } from '@/components/FilteredList'
 import { useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
+import { DiscountedPrice } from '@/components/DiscountedPrice'
 
 export function ApprovedDoctors() {
   const navigate = useNavigate()
@@ -124,10 +125,13 @@ export function ApprovedDoctors() {
                 </Stack>
                 <Stack spacing={-1}>
                   <Typography variant="overline" color="text.secondary">
-                    Session Rate
+                    Session Rate <small>(Markup + Discount If Any)</small>
                   </Typography>
                   <Typography variant="body1">
-                    {doctor.sessionRate.toFixed(2)} E£
+                    <DiscountedPrice
+                      originalPrice={doctor.sessionRate}
+                      discountedPrice={doctor.hourlyRateWithMarkup}
+                    />
                   </Typography>
                 </Stack>
               </Stack>

diff --git a/frontend/src/features/patient-dashboard/routes/DoctorView.tsx b/frontend/src/features/patient-dashboard/routes/DoctorView.tsx
@@ -24,6 +24,7 @@ import { getFamilyMembers } from '@/api/familyMembers'
 import { useState } from 'react'
 import { LoadingButton } from '@mui/lab'
 import Checkout from '@/components/StripeCheckout'
+import { DiscountedPrice } from '@/components/DiscountedPrice'
 
 export function DoctorView() {
   // State to manage the modal visibility
@@ -362,10 +363,13 @@ export function DoctorView() {
               </Stack>
               <Stack spacing={-1}>
                 <Typography variant="overline" color="text.secondary">
-                  Session Rate
+                  Session Rate <small>(Markup + Discount If Any)</small>
                 </Typography>
                 <Typography variant="body1">
-                  {query.data?.sessionRate.toFixed(2)}
+                  <DiscountedPrice
+                    originalPrice={query.data!.sessionRate}
+                    discountedPrice={query.data!.hourlyRateWithMarkup}
+                  />
                 </Typography>
               </Stack>
             </Stack>

diff --git a/frontend/src/features/patient-dashboard/routes/SubscribeToHealthPackages.tsx b/frontend/src/features/patient-dashboard/routes/SubscribeToHealthPackages.tsx
@@ -33,6 +33,7 @@ import { useAlerts } from '@/hooks/alerts'
 import Checkout from '@/components/StripeCheckout'
 import { useAuth } from '@/hooks/auth'
 import { GetAllHealthPackagesForPatientResponse } from 'clinic-common/types/healthPackage.types'
+import { DiscountedPrice } from '@/components/DiscountedPrice'
 
 function HealthPackagePrice({
   healthPackage,
@@ -44,23 +45,10 @@ function HealthPackagePrice({
   }
 
   return (
-    <Typography variant="body1">
-      {healthPackage.discountedPricePerYear != healthPackage.pricePerYear ? (
-        <Stack direction="row" spacing={1}>
-          <Typography variant="body1">
-            {healthPackage.discountedPricePerYear}$
-          </Typography>
-          <Typography
-            variant="body1"
-            sx={{ textDecoration: 'line-through', color: 'text.disabled' }}
-          >
-            {healthPackage.pricePerYear}$
-          </Typography>
-        </Stack>
-      ) : (
-        healthPackage.pricePerYear + '$'
-      )}
-    </Typography>
+    <DiscountedPrice
+      originalPrice={healthPackage.pricePerYear}
+      discountedPrice={healthPackage.discountedPricePerYear}
+    />
   )
 }