Merge pull request #1565 from gustavomm19/fix-docs-redirectioning

Fix docs redirectioning

Author: tommygonzaleza

public/locales/en/course.json

@@ -9,6 +9,11 @@
   "create-account-text": "Create an account and start your coding journey today",
   "live-bootcamp": "Self-paced bootcamp",
   "free-course": "Free Course",
+  "coupon-bar": {
+    "headline": "Prices as low as {{discount}} off!!",
+    "ends-in": "Ends in {{time}}",
+    "see-prices": "See prices"
+  },
   "title-connectors": {
     "learning": "Start learning",
     "start": "Start a career in",

public/locales/en/profile.json

@@ -87,6 +87,7 @@
     "payment-trial": "Payment: Trial",
     "payment-free": "Payment: Free",
     "renewal-date-cancelled": "Renewal date: Cancelled",
+    "discount": "{{discount}} OFF",
     "status": {
       "free_trial": "Free trial",
       "fully_paid": "Fully paid",

public/locales/en/signup.json

@@ -12,6 +12,9 @@
     "read-more" :"Read the science behind it.",
     "read-more-link": "https://4geeks.com/mastering-technical-knowledge"
   },
+  "total": "Total",
+  "total-now": "Total now",
+  "after-all-payments": "After all payments",
   "secure-checkout": "Guaranteed <strong>safe & secure</strong> checkout",
   "discount-value-off": "{{value}} Off",
   "add": "Add",
@@ -87,6 +90,8 @@
   "one_payment": "One payment",
   "many_months_payment": "{{qty}} months payment",
   "our_plans": "Our plans",
+  "discount": "{{discount}} OFF",
+  "try-again": "Try again",
   "join-cohort": {
     "cta": {
       "lesson": "Join cohort to get access to this lesson",

public/locales/es/course.json

@@ -9,6 +9,11 @@
   "create-account-text": "Crea una cuenta y comienza tu viaje en el bootcamp hoy",
   "live-bootcamp": "Bootcamp en vivo",
   "free-course": "Curso Gratis",
+  "coupon-bar": {
+    "headline": "¡¡Precios tan bajos como {{discount}} de descuento!!",
+    "ends-in": "Termina en {{time}}",
+    "see-prices": "Ver precios"
+  },
   "title-connectors": {
     "learning": "Comienza a aprender",
     "start": "Comienza una carrera en",

public/locales/es/profile.json

@@ -87,6 +87,7 @@
     "payment-trial": "Pago: Prueba",
     "payment-free": "Pago: Libre",
     "renewal-date-cancelled": "Fecha de renovación: Cancelada",
+    "discount": "{{discount}} DE DESCUENTO",
     "status": {
       "free_trial": "Prueba gratuita",
       "fully_paid": "Totalmente pagado",

public/locales/es/signup.json

@@ -12,6 +12,9 @@
     "read-more" :"Lee la ciencia detrás de esto.",
     "read-more-link": "https://4geeks.com/es/mastering-technical-knowledge"
   },
+  "total": "Total",
+  "total-now": "Total ahora",
+  "after-all-payments": "Después de todos los pagos",
   "secure-checkout": "Pago <strong>seguro y protegido</strong> garantizado",
   "discount-value-off": "{{value}} dto.",
   "add": "Agregar",
@@ -87,6 +90,8 @@
   "one_payment": "Pago único",
   "many_months_payment": "{{qty}} pagos mensuales",
   "our_plans": "Nuestros planes",
+  "discount": "{{discount}} DE DESCUENTO",
+  "try-again": "Intenta de nuevo",
   "join-cohort": {
     "cta": {
       "lesson": "Únete a la cohorte para poder acceder a esta lección",

src/common/components/MktShowPrices.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import useTranslation from 'next-translate/useTranslation';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
-import { Box, Flex, LinkBox } from '@chakra-ui/react';
+import { Box, Flex, LinkBox, Skeleton } from '@chakra-ui/react';
 import { PrismicRichText } from '@prismicio/react';
 import ShowPrices from './ShowPrices';
 import { parseQuerys } from '../../utils/url';
@@ -180,9 +180,9 @@ function MktShowPrices({ id, externalPlanProps, cohortId, title, gridColumn1, gr
       </Box>
     </GridContainer>
   ) : (
-    <span>
-      loading...
-    </span>
+    <Box display="flex" padding="32px">
+      <Skeleton height="300px" width="100%" />
+    </Box>
   );
 }
 

src/common/components/PricingCard.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import useTranslation from 'next-translate/useTranslation';
 import { useState } from 'react';
 import useStyle from '../hooks/useStyle';
+import useSignup from '../store/actions/signupAction';
 import Text from './Text';
 import Icon from './Icon';
 import { parseQuerys } from '../../utils/url';
@@ -13,12 +14,22 @@ import { usePersistentBySession } from '../hooks/usePersistent';
 
 export default function PricingCard({ item, courseData, isFetching, relatedSubscription, ...rest }) {
   const { t, lang } = useTranslation('signup');
+  const { getPriceWithDiscount, state } = useSignup();
+  const { coupon: selfApliedCoupon } = state;
   const { fontColor, hexColor, featuredCard, featuredColor } = useStyle();
   const [selectedFinancing, setSelectedFinancing] = useState({});
   const [accordionState, setAccordionState] = useState(false);
   const isBootcampType = item?.planType && item?.planType.toLowerCase() === 'bootcamp';
   const queryCoupon = getQueryString('coupon');
   const [coupon] = usePersistentBySession('coupon', []);
+
+  const courseCoupon = selfApliedCoupon?.plan === item.plan_slug && selfApliedCoupon;
+
+  const priceProcessed = getPriceWithDiscount(selectedFinancing?.price || item?.optionList?.[0]?.price, courseCoupon);
+  const discountApplied = priceProcessed?.originalPrice && priceProcessed.price !== priceProcessed.originalPrice;
+
+  const premiumColor = () => (courseCoupon ? hexColor.green : hexColor.blueDefault);
+
   const utilProps = {
     already_have_it: t('pricing.already-have-plan'),
     bootcamp: {
@@ -69,8 +80,8 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
       service_items: t('pricing.premium-plan.service_items', {}, { returnObjects: true }),
       featured_info: t('pricing.premium-plan.featured_info', {}, { returnObjects: true }),
       color: 'white',
-      featured: hexColor.blueDefault,
-      border: hexColor.blueDefault,
+      featured: courseCoupon ? hexColor.green : hexColor.blueDefault,
+      border: isFetching ? hexColor.lightColor : premiumColor(),
       featuredFontColor: hexColor.yellowDefault,
       button: {
         variant: 'default',
@@ -125,9 +136,45 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
       background={featuredCard.background}
       height="fit-content"
       color={fontColor}
+      position="relative"
       {...rest}
     >
-      <Flex height="auto" position="relative" padding="8px" flexDirection="column" gridGap="16px" background={featured} borderRadius="8px 8px 0 0">
+      {discountApplied && (
+        <Box position="absolute" right="20px" top="-20px">
+          <Box
+            borderRadius="55px"
+            background={hexColor.green}
+            padding="2px 8px"
+            position="relative"
+            zIndex="10"
+          >
+            <Box
+              top="-9px"
+              left="-37px"
+              display="flex"
+              justifyContent="center"
+              flexDirection="column"
+              alignItems="center"
+              textAlign="center"
+              width="44px"
+              height="44px"
+              fontSize="24px"
+              position="absolute"
+              borderRadius="41px"
+              padding="10px"
+              border="2px solid"
+              borderColor="#03823E"
+              background={hexColor.green}
+            >
+              🔥
+            </Box>
+            <Text fontSize="15px" color="#FFF">
+              {t('discount', { discount: priceProcessed.discount })}
+            </Text>
+          </Box>
+        </Box>
+      )}
+      <Flex height="auto" position="relative" padding="8px" paddingTop={discountApplied && '14px'} flexDirection="column" gridGap="16px" background={isFetching ? hexColor.lightColor : featured} borderRadius="8px 8px 0 0">
         <Text fontSize="18px" lineHeight="21px" height="auto" fontWeight={700} color={color} textAlign="center">
           {viewProps.hookMessage}
         </Text>
@@ -140,10 +187,25 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
                     <Skeleton height="48px" width="10rem" borderRadius="4px" />
                   ) : (
                     <Flex gridGap="8px" alignItems="center">
-                      <Box color={color} fontFamily="Space Grotesk Variable" fontSize="64px" fontWeight={700} textAlign="center">
+                      <Box color={color} textAlign="center">
                         {existsOptionList
-                          ? `$${selectedFinancing?.price || item?.optionList?.[0]?.price}`
-                          : (item?.price_text || item?.priceText)}
+                          ? (
+                            <>
+                              {priceProcessed.originalPrice && (
+                                <s style={{ fontSize: '16px' }}>
+                                  {`$${priceProcessed.originalPrice}`}
+                                </s>
+                              )}
+                              <Text fontSize="64px" fontFamily="Space Grotesk Variable" fontWeight={700} lineHeight="70px">
+                                {`$${priceProcessed.price}`}
+                              </Text>
+                            </>
+                          )
+                          : (
+                            <Text fontSize="64px" fontFamily="Space Grotesk Variable" fontWeight={700} lineHeight="70px">
+                              {item?.price_text || item?.priceText}
+                            </Text>
+                          )}
                       </Box>
                       {existsOptionList && manyMonths > 1 && (
                         <Text size="36px" fontFamily="Space Grotesk Variable" color={color} letterSpacing="normal" fontWeight="700">