Merge pull request #50 from AAISS/feat/add-discount

Feat/add discount
AAISS · Nov 30, 2023 · 4fea9d9 · 4fea9d9
2 parents ae34983 + 5745ccc
commit 4fea9d9
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git a/frontend/src/components/item-card/item-card.jsx b/frontend/src/components/item-card/item-card.jsx
@@ -26,11 +26,11 @@ export const Cost = ({ cost }) => (
   </Stack>
 );
 
-const CapacityChip = ({ capacity, isFull, remainingCapacity }) => (
+const FullCapacityChip = () => (
   <Chip
-    color={isFull ? 'error' : 'success'}
+    color="error"
     size="small"
-    label={isFull ? 'Capacity Full' : `Capacity ${remainingCapacity}/${capacity}`}
+    label="Capacity Full!"
     sx={{
       mt: 1,
     }}
@@ -74,6 +74,7 @@ const ItemCard = ({
 }) => {
   const [moreInfoModalVisibility, setMoreInfoModalVisibility] = useState(false);
   const hasBought = purchaseState === 2;
+  const shouldShowFullCapacity = isFull || remainingCapacity === 0;
 
   const handleClickOnMoreInfo = () => {
     setMoreInfoModalVisibility(true);
@@ -167,7 +168,7 @@ const ItemCard = ({
           <Presenter presenterName={presenterName} />
           {levelComponentMapping[level]}
           {!hasBought && <Cost cost={cost} />}
-          {!hasBought && <CapacityChip isFull={isFull} remainingCapacity={remainingCapacity} capacity={capacity} />}
+          {!hasBought && shouldShowFullCapacity && <FullCapacityChip />}
         </CardContent>
         <CardActions
           sx={{

diff --git a/frontend/src/pages/my-account/MyAccount.jsx b/frontend/src/pages/my-account/MyAccount.jsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
-import { Box, Button, CircularProgress, Divider, Stack, Tab, Tabs, Typography } from '@mui/material';
+import { Box, Button, Chip, CircularProgress, Divider, Stack, Tab, Tabs, Typography } from '@mui/material';
 import ItemCard from '../../components/item-card/item-card.jsx';
 import Toast from '../../components/toast/Toast.jsx';
 import useMyAccount from './useMyAccount.js';
 
 const TAB_ITEMS = ['Workshops', 'Presentations', 'Cart'];
+const DISCOUNT = 0.25;
+const MIN_TOTAL_PRICE_TO_GET_DISCOUNT = 200000;
 
 const MyAccount = () => {
   const {
@@ -101,7 +103,47 @@ const MyAccount = () => {
     cart.forEach(({ cost }) => {
       total += cost;
     });
-    return total;
+
+    if (total >= MIN_TOTAL_PRICE_TO_GET_DISCOUNT) {
+      const orgPrice = total;
+      total -= DISCOUNT * total;
+
+      return {
+        total: orgPrice,
+        discountedPrice: total,
+      };
+    }
+
+    return {
+      total,
+      discountedPrice: null,
+    };
+  };
+
+  const renderTotalPrice = () => {
+    const { total, discountedPrice } = calculateTotalCost();
+    if (discountedPrice) {
+      return (
+        <Stack flexDirection="row" alignItems="center" gap={1}>
+          <Typography variant="overline" sx={{ fontSize: 14 }} color="text.secondary">
+            Total:{' '}
+          </Typography>
+          <Typography variant="overline" sx={{ fontSize: 14, textDecoration: 'line-through' }} color="text.secondary">
+            {total} T
+          </Typography>
+          <Chip label="-25%" size="small" color="error" />
+          <Typography variant="overline" sx={{ fontSize: 15, fontWeight: 'bolder', color: 'var(--error-color)' }}>
+            {discountedPrice} T
+          </Typography>
+        </Stack>
+      );
+    }
+
+    return (
+      <Typography variant="overline" sx={{ fontSize: 14 }} color="text.secondary">
+        Total: {total} T
+      </Typography>
+    );
   };
 
   return (
@@ -129,7 +171,7 @@ const MyAccount = () => {
           <>
             <Divider sx={{ my: 2 }} />
             <Stack alignItems="center" gap={1}>
-              <Typography>Total: {calculateTotalCost()} T</Typography>
+              {renderTotalPrice()}
               <Button
                 onClick={handleBuyCart}
                 variant="contained"