Skip to content

Commit ffbe156

Browse files
Namanv0509Namanv0509
authored
Merge pull request #6860 from Namanv0509/decimal-slider-fix
Decimal Fix for slider
2 parents 41796fa + f65abac commit ffbe156

2 files changed

Lines changed: 72 additions & 61 deletions

File tree

‎src/components/Pricing/PricingAddons/index.js‎

Lines changed: 55 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,9 @@ import {
3939
getToggleButtonStyle,
4040
getSliderStyle
4141
} from "./styles";
42+
import { formatAndConvertPrice, formatSliderPrice } from "../../../utils/currencies";
4243

43-
import { formatAndConvertPrice } from "../../../utils/currencies";
44-
45-
export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterprisePlan }) => {
46-
44+
export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterprisePlan }) => {
4745
const [selectedAddon, setSelectedAddon] = useState(null);
4846
// const [quantity, setQuantity] = useState(1);
4947
const quantity = 1;
@@ -62,22 +60,22 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
6260
// Helper function to render icons based on type
6361
const renderIcon = (iconType) => {
6462
switch (iconType) {
65-
case "academy":
66-
return <AcademyIcon
67-
primaryFill={theme?.palette?.background?.inverse || "#00B39F"}
68-
secondaryFill={theme?.palette?.background?.inverse || "#eee"}
69-
/>;
70-
case "cloud":
71-
return <Cloud />;
72-
case "group":
73-
return <Group />;
74-
default:
75-
return null;
63+
case "academy":
64+
return <AcademyIcon
65+
primaryFill={theme?.palette?.background?.inverse || "#00B39F"}
66+
secondaryFill={theme?.palette?.background?.inverse || "#eee"}
67+
/>;
68+
case "cloud":
69+
return <Cloud />;
70+
case "group":
71+
return <Group />;
72+
default:
73+
return null;
7674
}
7775
};
7876

7977
const formatPrice = (price) => {
80-
return formatAndConvertPrice(price, currency);
78+
return formatAndConvertPrice(price, currency);
8179
};
8280

8381
useEffect(() => {
@@ -256,9 +254,9 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
256254
{addon.id === "academy"
257255
? addon.description
258256
: (() => {
259-
const period = isYearly ? "/year" : "/month";
260-
return `${formatPrice(isYearly ? addon.yearlyPrice : addon.monthlyPrice)} per ${addon.unitLabel.slice(0, -1)}${period}`;
261-
})()
257+
const period = isYearly ? "/year" : "/month";
258+
return `${formatPrice(isYearly ? addon.yearlyPrice : addon.monthlyPrice)} per ${addon.unitLabel.slice(0, -1)}${period}`;
259+
})()
262260
}
263261
</Typography>
264262
</Box>
@@ -401,15 +399,15 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
401399
sm: "0.9rem",
402400
}
403401
}}>
404-
{Number(isYearly ? option.yearlyPerUser : option.monthlyPerUser).toFixed(2)}<br />{targetSubAddon.unitLabelSingular}/{isYearly ? "year" : "month"}
402+
{formatSliderPrice(isYearly ? option.yearlyPerUser : option.monthlyPerUser, currency)}<br />{targetSubAddon.unitLabelSingular}/{isYearly ? "year" : "month"}
405403
</Box>
406404
</Box>
407405
),
408406
})) || [];
409407
})()}
410408
/>
411409
<Box sx={boxStyles.disclaimerSection}>
412-
<Typography variant="body2" sx={typographyStyles.italic }>
410+
<Typography variant="body2" sx={typographyStyles.italic}>
413411
Looking for a plan larger than 2,500 learners? Great! <a href="/company/contact">Let us know</a>.
414412
</Typography>
415413
</Box>
@@ -447,15 +445,15 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
447445
<Box sx={boxStyles.sliderMarks}>
448446
<Box>{option.units}</Box>
449447
<Box sx={boxStyles.sliderPriceText}>
450-
{formatPrice(isYearly ? option.yearlyPerUnit * option.units : option.monthlyPerUnit * option.units)}
448+
{formatSliderPrice(isYearly ? option.yearlyPerUnit : option.monthlyPerUnit, currency)}
451449
</Box>
452450
</Box>
453451
),
454452
})) || []}
455453
/>
456454
</Box>
457455
</>
458-
)}
456+
)}
459457
</Box>
460458
</CardContent>
461459
</Card>
@@ -477,41 +475,41 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
477475

478476
<Box sx={{ ...boxStyles.flexColumn, ...boxStyles.pricingItems }}>
479477
<Box sx={boxStyles.flexBetween}>
480-
<Typography variant="body1" sx={typographyStyles.pricingItemLeft}>
481-
{selectedAddon?.id === "academy" ?
482-
`Theoretical Learning × ${selectedAddon?.subAddOns?.find(sub => sub.id === "academy-theory")?.pricing?.[quantityIndex]?.learners || 0}` :
483-
`${selectedAddon?.name} × ${selectedAddon?.pricing?.[quantityIndex]?.units || 0}`
484-
}
485-
</Typography>
486-
<Typography variant="body1" fontWeight="500" sx={typographyStyles.pricingItemRight}>
487-
{(() => {
488-
if (selectedAddon?.id === "academy") {
489-
const theorySubAddon = selectedAddon?.subAddOns?.find(sub => sub.id === "academy-theory");
490-
if (theorySubAddon?.pricing && theorySubAddon.pricing[quantityIndex]) {
491-
const currentLearnerOption = theorySubAddon.pricing[quantityIndex];
492-
const monthlyPerUserCost = currentLearnerOption.monthlyPerUser;
493-
const yearlyPerUserCost = currentLearnerOption.yearlyPerUser;
494-
const totalCost = isYearly
495-
? yearlyPerUserCost * currentLearnerOption.learners
496-
: monthlyPerUserCost * currentLearnerOption.learners;
497-
return formatPrice(totalCost);
498-
}
499-
return formatPrice(0);
500-
} else {
501-
if (selectedAddon?.pricing && selectedAddon.pricing[quantityIndex]) {
502-
const currentOption = selectedAddon.pricing[quantityIndex];
503-
const monthlyPerUnitCost = currentOption.monthlyPerUnit;
504-
const yearlyPerUnitCost = currentOption.yearlyPerUnit;
505-
const totalCost = isYearly
506-
? yearlyPerUnitCost * currentOption.units
507-
: monthlyPerUnitCost * currentOption.units;
508-
return formatPrice(totalCost);
509-
}
510-
return formatPrice(0);
511-
}
478+
<Typography variant="body1" sx={typographyStyles.pricingItemLeft}>
479+
{selectedAddon?.id === "academy"
480+
? `Theoretical Learning × ${selectedAddon?.subAddOns?.find(sub => sub.id === "academy-theory")?.pricing?.[quantityIndex]?.learners || 0}`
481+
: `${selectedAddon?.name} × ${selectedAddon?.pricing?.[quantityIndex]?.units || 0}`
482+
}
483+
</Typography>
484+
<Typography variant="body1" fontWeight="500" sx={typographyStyles.pricingItemRight}>
485+
{(() => {
486+
if (selectedAddon?.id === "academy") {
487+
const theorySubAddon = selectedAddon?.subAddOns?.find(sub => sub.id === "academy-theory");
488+
if (theorySubAddon?.pricing && theorySubAddon.pricing[quantityIndex]) {
489+
const currentLearnerOption = theorySubAddon.pricing[quantityIndex];
490+
const monthlyPerUserCost = currentLearnerOption.monthlyPerUser;
491+
const yearlyPerUserCost = currentLearnerOption.yearlyPerUser;
492+
const totalCost = isYearly
493+
? yearlyPerUserCost * currentLearnerOption.learners
494+
: monthlyPerUserCost * currentLearnerOption.learners;
495+
return formatPrice(totalCost);
496+
}
497+
return formatPrice(0);
498+
} else {
499+
if (selectedAddon?.pricing && selectedAddon.pricing[quantityIndex]) {
500+
const currentOption = selectedAddon.pricing[quantityIndex];
501+
const monthlyPerUnitCost = currentOption.monthlyPerUnit;
502+
const yearlyPerUnitCost = currentOption.yearlyPerUnit;
503+
const totalCost = isYearly
504+
? yearlyPerUnitCost * currentOption.units
505+
: monthlyPerUnitCost * currentOption.units;
506+
return formatPrice(totalCost);
507+
}
508+
return formatPrice(0);
509+
}
512510
})()} /{isYearly ? "yearly" : "monthly"}
513-
</Typography>
514-
</Box>
511+
</Typography>
512+
</Box>
515513

516514
{selectedAddon?.id === "academy" && selectedAddon.subAddOns?.map((subAddOn) => (
517515
selectedSubAddOns[subAddOn.id] && subAddOn.id !== "academy-theory" && (

‎src/utils/currencies.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
export const Currencies = {
32
USD: {
43
name: "USD",
@@ -38,11 +37,25 @@ export const Currencies = {
3837
},
3938
};
4039

41-
4240
// the price is in USD
4341
export const formatAndConvertPrice = (price, currency) => {
4442
if (Currencies[currency]) {
4543
return Currencies[currency].formatPrice(price);
4644
}
47-
return price;
48-
}
45+
return price.toFixed(2);
46+
};
47+
48+
export const formatSliderPrice = (price, currency) => {
49+
const currencyConfig = Currencies[currency] || { symbol: "$", rate: 1 };
50+
const { symbol, rate } = currencyConfig;
51+
52+
const convertedPrice = price * rate;
53+
54+
const formattedPrice = convertedPrice.toFixed(2);
55+
56+
if (formattedPrice.endsWith(".00")) {
57+
return `${symbol}${Math.floor(convertedPrice)}`;
58+
}
59+
60+
return `${symbol}${formattedPrice}`;
61+
};

0 commit comments

Comments
 (0)