breatheco-de · lumi-tip · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025
diff --git a/public/locales/en/signup.json b/public/locales/en/signup.json
@@ -12,10 +12,10 @@
     "read-more" :"Read the science behind it.",
     "read-more-link": "https://4geeks.com/mastering-technical-knowledge"
   },
-  "free_trial_one_payment": "{{description}} and then ${{price}} one time",
-  "free_trial_multiple_payments": "{{description}} and then {{numPayments}} payments of ${{firstPrice}} or ${{oneTimePrice}} one time",
-  "free_trial_monthly_payment": "{{description}} and then ${{monthlyPrice}}/mo",
-  "free_trial_yearly_payment": "{{description}} and then ${{yearlyPrice}}/year",
+  "free_trial_one_payment": "{{description}} and then {{currency}}{{price}} one time",
+  "free_trial_multiple_payments": "{{description}} and then {{numPayments}} payments of {{currency}}{{firstPrice}} or {{currency}}{{oneTimePrice}} one time",
+  "free_trial_monthly_payment": "{{description}} and then {{currency}}{{monthlyPrice}}/mo",
+  "free_trial_yearly_payment": "{{description}} and then {{currency}}{{yearlyPrice}}/year",
   "free_plan": "Free plan",
   "limited_time_offer": "(limited time offer)",
   "added-features-title": "+ You can also add",
@@ -39,7 +39,7 @@
   "quarterly_payment_description": "Full access to all features for the duration of the course.",
   "half_yearly_payment_description": "Full access to all features for the duration of the course.",
   "yearly_payment_description": "Full access to all features for the duration of the course.",
-  "financing_many_months_description": "You will pay ${{monthly_price}} for {{many_months}} months and get full access to all features for the duration of the course.",
+  "financing_many_months_description": "You will pay {{currency}}{{monthly_price}} for {{many_months}} months and get full access to all features for the duration of the course.",
   "connector_duration_trial": "trial",
   "what-includes": "What includes?",
   "continue-learning": "Continue learning",

diff --git a/public/locales/es/signup.json b/public/locales/es/signup.json
@@ -12,10 +12,10 @@
     "read-more" :"Lee la ciencia detrás de esto.",
     "read-more-link": "https://4geeks.com/es/mastering-technical-knowledge"
   },
-  "free_trial_one_payment": "{{description}} y luego ${{price}} único pago",
-  "free_trial_multiple_payments": "{{description}} y luego {{numPayments}} pagos de ${{firstPrice}} o un único pago de ${{oneTimePrice}}",
-  "free_trial_monthly_payment": "{{description}} y luego ${{monthlyPrice}}/mes",
-  "free_trial_yearly_payment": "{{description}} y luego ${{yearlyPrice}}/año",
+  "free_trial_one_payment": "{{description}} y luego {{currency}}{{price}} único pago",
+  "free_trial_multiple_payments": "{{description}} y luego {{numPayments}} pagos de {{currency}}{{firstPrice}} o un único pago de {{currency}}{{oneTimePrice}}",
+  "free_trial_monthly_payment": "{{description}} y luego {{currency}}{{monthlyPrice}}/mes",
+  "free_trial_yearly_payment": "{{description}} y luego {{currency}}{{yearlyPrice}}/año",
   "free_plan": "Plan gratis",
   "limited_time_offer": "(oferta por tiempo limitado)",
   "added-features-title": "+ También puedes agregar",
@@ -39,7 +39,7 @@
   "quarterly_payment_description": "Acceso completo a todas las funciones durante la duración del curso.",
   "half_yearly_payment_description": "Acceso completo a todas las funciones durante la duración del curso.",
   "yearly_payment_description": "Acceso completo a todas las funciones durante la duración del curso.",
-  "financing_many_months_description": "Pagarás ${{monthly_price}} durante {{many_months}} meses y obtendrás acceso completo a todas las funciones durante la duración del curso.",
+  "financing_many_months_description": "Pagarás {{currency}}{{monthly_price}} durante {{many_months}} meses y obtendrás acceso completo a todas las funciones durante la duración del curso.",
   "what-includes": "¿Qué incluye?",
   "continue-learning": "Continuar aprendiendo",
   "switch-user-connector": "¿No eres {{name}}?",

diff --git a/src/common/components/PricingCard.jsx b/src/common/components/PricingCard.jsx
@@ -11,6 +11,7 @@ import Icon from './Icon';
 import { parseQuerys } from '../../utils/url';
 import { getQueryString, isWindow, slugToTitle } from '../../utils';
 import { usePersistentBySession } from '../hooks/usePersistent';
+import { currenciesSymbols } from '../../utils/variables';
 
 export default function PricingCard({ item, courseData, isFetching, relatedSubscription, moneyBack, ...rest }) {
   const { t, lang } = useTranslation('signup');
@@ -24,6 +25,7 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
   const [coupon] = usePersistentBySession('coupon', []);
 
   const courseCoupon = selfAppliedCoupon?.plan === item?.plan_slug && selfAppliedCoupon;
+  const currencySymbol = currenciesSymbols[item?.currency?.code] || '$';
 
   const priceProcessed = getPriceWithDiscount(selectedFinancing?.price || item?.optionList?.[0]?.price || item.price, courseCoupon);
   const discountApplied = priceProcessed?.originalPrice && priceProcessed.price !== priceProcessed.originalPrice;
@@ -224,11 +226,11 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
                             <>
                               {priceProcessed.originalPrice && (
                                 <s style={{ fontSize: '16px' }}>
-                                  {`$${priceProcessed.originalPrice}`}
+                                  {`${currencySymbol}${priceProcessed.originalPrice}`}
                                 </s>
                               )}
                               <Text fontSize="64px" fontFamily="Space Grotesk Variable" fontWeight={700} lineHeight="70px">
-                                {`$${priceProcessed.price || item.price}`}
+                                {`${currencySymbol}${priceProcessed.price || item.price}`}
                               </Text>
                             </>
                           )
@@ -257,7 +259,7 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
                     <Skeleton height="48px" margin="0.85rem auto 1.4rem auto" width="10rem" borderRadius="4px" />
                   ) : (
                     <Box color={color} width={(isPayable || !isTotallyFree) ? 'auto' : '80%'} fontFamily="Space Grotesk Variable" margin={(!isPayable && !isTotallyFree) ? '0' : '2rem auto 2.5rem auto'} fontSize={isPayable ? 'var(--heading-xl)' : '38px'} fontWeight={700} textAlign="center">
-                      {isPayable && `$${item?.price}`}
+                      {isPayable && `${currencySymbol}${item?.price}`}
                       {isTotallyFree && item?.period_label}
                       {!isPayable && !isTotallyFree && item?.priceText}
                     </Box>
@@ -351,7 +353,7 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
                           toggleAccordion();
                         }}
                       >
-                        {`$${calculateCouponOnFinancing(financing?.price, courseCoupon?.discount_value, courseCoupon?.discount_type)} / ${financing?.title}`}
+                        {`${currencySymbol}${calculateCouponOnFinancing(financing?.price, courseCoupon?.discount_value, courseCoupon?.discount_type)} / ${financing?.title}`}
                       </Button>
                     ),
                   )}

diff --git a/src/common/handlers/subscriptions.js b/src/common/handlers/subscriptions.js
@@ -1,5 +1,5 @@
 import { slugToTitle, unSlugifyCapitalize } from '../../utils';
-import { BASE_PLAN } from '../../utils/variables';
+import { BASE_PLAN, currenciesSymbols } from '../../utils/variables';
 import bc from '../services/breathecode';
 
 export const SUBS_STATUS = {
@@ -104,7 +104,7 @@ export const processPlans = (data, {
         ...relevantInfo,
         title: textInfo.one_payment,
         price: item?.monthly_price,
-        priceText: `$${item?.monthly_price}`,
+        priceText: `${currenciesSymbols[item?.currency?.code] || '$'}${item?.monthly_price}`,
         period: 'ONE_TIME',
         period_label: textInfo.one_payment,
         plan_id: `f-${item?.monthly_price}-${item?.how_many_months}`,
@@ -130,7 +130,7 @@ export const processPlans = (data, {
         ...relevantInfo,
         title: singlePlan?.title ? singlePlan?.title : textInfo.monthly_payment,
         price: data?.price_per_month,
-        priceText: `$${data?.price_per_month}`,
+        priceText: `${currenciesSymbols[singlePlan?.currency?.code] || '$'}${data?.price_per_month}`,
         plan_id: `p-${data?.price_per_month}`,
         description: translations?.yearly_payment_description || '',
         period: 'MONTH',
@@ -142,7 +142,7 @@ export const processPlans = (data, {
         ...relevantInfo,
         title: singlePlan?.title ? singlePlan?.title : textInfo.quarterly_payment,
         price: data?.price_per_quarter,
-        priceText: `$${data?.price_per_quarter}`,
+        priceText: `${currenciesSymbols[data?.currency?.code] || '$'}${data?.price_per_quarter}`,
         plan_id: `p-${data?.price_per_quarter}`,
         description: translations?.quarterly_payment_description || '',
         period: 'QUARTER',
@@ -155,7 +155,7 @@ export const processPlans = (data, {
         ...relevantInfo,
         title: singlePlan?.title ? singlePlan?.title : textInfo.half_yearly_payment,
         price: data?.price_per_half,
-        priceText: `$${data?.price_per_half}`,
+        priceText: `${currenciesSymbols[data?.currency?.code] || '$'}${data?.price_per_half}`,
         plan_id: `p-${data?.price_per_half}`,
         description: translations?.half_yearly_payment_description || '',
         period: 'HALF',
@@ -168,7 +168,7 @@ export const processPlans = (data, {
         ...relevantInfo,
         title: singlePlan?.title ? singlePlan?.title : textInfo.yearly_payment,
         price: data?.price_per_year,
-        priceText: `$${data?.price_per_year}`,
+        priceText: `${currenciesSymbols[data?.currency?.code] || '$'}${data?.price_per_year}`,
         plan_id: `p-${data?.price_per_year}`,
         description: translations?.yearly_payment_description || '',
         period: 'YEAR',
@@ -178,13 +178,13 @@ export const processPlans = (data, {
 
       const financingOption = financingOptionsExists ? financingOptions.map((item, index) => {
         const financingTitle = translations.many_months_payment(item?.how_many_months);
-        const financingOptionsDescription = translations?.financing_description(item?.monthly_price, item?.how_many_months);
+        const financingOptionsDescription = translations?.financing_description(item?.monthly_price, item?.how_many_months, currenciesSymbols[item?.currency?.code] || '$');
         return ({
           ...relevantInfo,
           financingId: index + 1,
           title: singlePlan?.title ? singlePlan?.title : financingTitle,
           price: item?.monthly_price,
-          priceText: `$${item?.monthly_price} x ${item?.how_many_months}`,
+          priceText: `${currenciesSymbols[item?.currency?.code] || '$'}${item?.monthly_price} x ${item?.how_many_months}`,
           plan_id: `f-${item?.monthly_price}-${item?.how_many_months}`,
           description: financingOptionsDescription || '',
           period: 'FINANCING',
@@ -239,7 +239,7 @@ export const generatePlan = async (planSlug, translationsObj) => {
  * @param {Function} t - The translation function
  * @returns {object} - The translations object
  */
-export const getTranslations = (t = () => {}) => {
+export const getTranslations = (t = () => { }) => {
   const translations = {
     one_payment: t('signup:one_payment'),
     free_trial: t('signup:free_trial'),
@@ -271,7 +271,7 @@ export const getTranslations = (t = () => {}) => {
     quarterly_payment_description: t('signup:quarterly_payment_description'),
     half_yearly_payment_description: t('signup:half_yearly_payment_description'),
     yearly_payment_description: t('signup:yearly_payment_description'),
-    financing_description: (price, months) => t('signup:financing_many_months_description', { monthly_price: price, many_months: months }),
+    financing_description: (price, months, currency) => t('signup:financing_many_months_description', { monthly_price: price, many_months: months, currency }),
     monthly: t('signup:info.monthly'),
     quarterly: t('signup:info.quarterly'),
     half_yearly: t('signup:info.half-yearly'),

diff --git a/src/pages/checkout/index.jsx b/src/pages/checkout/index.jsx
@@ -40,7 +40,7 @@ import Stepper from '../../js_modules/checkout/Stepper';
 import ServiceSummary from '../../js_modules/checkout/ServiceSummary';
 import Text from '../../common/components/Text';
 import SelectServicePlan from '../../js_modules/checkout/SelectServicePlan';
-import { BASE_PLAN, ORIGIN_HOST, BREATHECODE_HOST } from '../../utils/variables';
+import { BASE_PLAN, ORIGIN_HOST, BREATHECODE_HOST, currenciesSymbols } from '../../utils/variables';
 import { reportDatalayer } from '../../utils/requests';
 import { getTranslations, processPlans } from '../../common/handlers/subscriptions';
 import Icon from '../../common/components/Icon';
@@ -107,6 +107,7 @@ function Checkout() {
   const [checkInfoLoader, setCheckInfoLoader] = useState(false);
   const [userSelectedPlan, setUserSelectedPlan] = useState(undefined);
   const { backgroundColor3, hexColor, backgroundColor } = useStyle();
+  const currencySymbol = currenciesSymbols[originalPlan?.currency?.code] || '$';
 
   const cohorts = cohortsData?.cohorts;
 
@@ -620,7 +621,11 @@ function Checkout() {
 
         if (financingOptions.length === 1) {
           const finalPrice = applyDiscounts(financingOptions[0].monthly_price, discountValues);
-          financingText = t('free_trial_one_payment', { price: finalPrice.toFixed(2), description: originalPlan.selectedPlan.description });
+          financingText = t('free_trial_one_payment', {
+            price: finalPrice.toFixed(2),
+            description: originalPlan.selectedPlan.description,
+            currency: currencySymbol,
+          });
         }
 
         if (financingOptions.length > 1) {
@@ -632,19 +637,28 @@ function Checkout() {
             numPayments: financingOptions[financingOptions.length - 1].how_many_months,
             firstPrice: firstPrice.toFixed(2),
             oneTimePrice: lastPrice.toFixed(2),
+            currency: currencySymbol,
           });
         }
       }
 
       if (financingOptions.length === 0) {
         if (monthlyPayment) {
           const finalMonthlyPrice = applyDiscounts(monthlyPayment, discountValues);
-          financingText = t('free_trial_monthly_payment', { description: originalPlan.selectedPlan.description, monthlyPrice: finalMonthlyPrice.toFixed(2) });
+          financingText = t('free_trial_monthly_payment', {
+            description: originalPlan.selectedPlan.description,
+            monthlyPrice: finalMonthlyPrice.toFixed(2),
+            currency: currencySymbol,
+          });
         }
 
         if (yearlyPayment && !monthlyPayment) {
           const finalYearlyPrice = applyDiscounts(yearlyPayment, discountValues);
-          financingText = t('free_trial_yearly_payment', { description: originalPlan.selectedPlan.description, yearlyPrice: finalYearlyPrice.toFixed(2) });
+          financingText = t('free_trial_yearly_payment', {
+            description: originalPlan.selectedPlan.description,
+            yearlyPrice: finalYearlyPrice.toFixed(2),
+            currency: currencySymbol,
+          });
         }
       }
 
@@ -665,7 +679,7 @@ function Checkout() {
 
       return (
         <Text size="16px" color="green.400">
-          {`$${discountedPrice.toFixed(2)} / ${originalPlan?.selectedPlan?.title || selectedPlanCheckoutData?.title}`}
+          {`${currencySymbol}${discountedPrice.toFixed(2)} / ${originalPlan?.selectedPlan?.title || selectedPlanCheckoutData?.title}`}
         </Text>
       );
     }
@@ -675,7 +689,7 @@ function Checkout() {
 
       return (
         <Text size="16px" color="green.400">
-          {`$${discountedPrice.toFixed(2)} / ${userSelectedPlan?.title}`}
+          {`${currencySymbol}${discountedPrice.toFixed(2)} / ${userSelectedPlan?.title}`}
         </Text>
       );
     }
@@ -938,7 +952,7 @@ function Checkout() {
                           <Text size="18px" color="currentColor" lineHeight="normal">
                             {selectedPlanCheckoutData?.price <= 0
                               ? selectedPlanCheckoutData?.priceText
-                              : `$${selectedPlanCheckoutData?.price?.toFixed(2)} ${selectedPlanCheckoutData?.currency?.code}`}
+                              : `${currencySymbol}${selectedPlanCheckoutData?.price?.toFixed(2)} ${selectedPlanCheckoutData?.currency?.code}`}
                           </Text>
                         </Flex>
                         <Divider margin="6px 0" />
@@ -1034,13 +1048,13 @@ function Checkout() {
                           <Flex gridGap="1rem">
                             {allCoupons?.length > 0 && (
                               <Text size="18px" color="currentColor" textDecoration="line-through" opacity="0.5" lineHeight="normal">
-                                {`$${selectedPlanCheckoutData?.price?.toFixed(2)}`}
+                                {`${currencySymbol}${selectedPlanCheckoutData?.price?.toFixed(2)}`}
                               </Text>
                             )}
                             <Text size="18px" color="currentColor" lineHeight="normal">
                               {selectedPlanCheckoutData?.price <= 0
                                 ? selectedPlanCheckoutData?.priceText
-                                : `$${processedPrice?.price?.toFixed(2)} ${selectedPlanCheckoutData?.currency?.code}`}
+                                : `${currencySymbol}${processedPrice?.price?.toFixed(2)} ${selectedPlanCheckoutData?.currency?.code}`}
                             </Text>
                           </Flex>
                         </Flex>
@@ -1052,7 +1066,7 @@ function Checkout() {
                             <Text size="18px" color="currentColor" lineHeight="normal">
                               {selectedPlanCheckoutData.price <= 0
                                 ? selectedPlanCheckoutData.priceText
-                                : `$${calculateTotalPrice()} ${selectedPlanCheckoutData.currency?.code}`}
+                                : `${currencySymbol}${calculateTotalPrice()} ${selectedPlanCheckoutData.currency?.code}`}
                             </Text>
                           </Flex>
                         )}

diff --git a/src/pages/pricing.jsx b/src/pages/pricing.jsx
@@ -274,8 +274,6 @@ function PricingView() {
   const existentOptions = switcherInfo.filter((l) => l.exists);
   const existsSubscriptionMehtod = paymentTypePlans.hasSubscriptionMethod;
 
-  console.log(paymentOptions);
-
   return (
     <Container maxWidth="100%" background={hexColor.featuredColor3} paddingY="4rem">
       {isFetching.courses && (

diff --git a/src/utils/variables.js b/src/utils/variables.js
@@ -16,4 +16,5 @@ export const categoriesFor = {
 
 export const currenciesSymbols = {
   USD: '$',
+  EUR: '€',
 };