Merge pull request #1664 from gustavomm19/location-bootcamps

Remove courses advertising when the user is from spain

src/common/components/Footer.jsx

@@ -21,13 +21,15 @@ import Icon from './Icon';
 import AlertMessage from './AlertMessage';
 import useStyle from '../hooks/useStyle';
 import useAuth from '../hooks/useAuth';
+import useSession from '../hooks/useSession';
 import bc from '../services/breathecode';
 import { GithubIcon, LogoIcon, YoutubeIcon } from './Icon/components';
 import { log } from '../../utils/logging';
 import FooterTC from './FooterTC';
 
 function Footer({ pageProps }) {
   const captcha = useRef(null);
+  const { location } = useSession();
   const { t } = useTranslation('footer');
   const { hexColor } = useStyle();
   const [email, setEmail] = useState('');
@@ -39,7 +41,7 @@ function Footer({ pageProps }) {
   const hideDivider = pageProps?.hideDivider === true;
   if (pageProps?.previewMode) return null;
 
-  if (isAuthenticated) return <FooterTC pageProps={pageProps} />;
+  if (isAuthenticated || location?.countryShort === 'ES') return <FooterTC pageProps={pageProps} />;
 
   return (
     <Container background={hexColor.backgroundColor} as="footer" maxW="none" padding="20px" position="absolute" top="100%">

src/common/components/Forms/Signup.jsx

@@ -32,7 +32,7 @@ function SignupForm({
   onHandleSubmit, containerGap, extraFields, columnLayout, conversionTechnologies, showLoginLink,
   invertHandlerPosition, formContainerStyle, ...rest
 }) {
-  const { userSession } = useSession();
+  const { userSession, location } = useSession();
   const { t, lang } = useTranslation('signup');
   const extraFieldsNames = extraFields.reduce((extra, field) => {
     const name = typeof field === 'string' ? field : field.name;
@@ -62,7 +62,7 @@ function SignupForm({
   const {
     state,
   } = useSignup();
-  const { dateProps, location } = state;
+  const { dateProps } = state;
   const toast = useToast();
   const router = useRouter();
 

src/common/components/MktRecommendedCourses.jsx

@@ -8,6 +8,7 @@ import Heading from './Heading';
 import Text from './Text';
 import PublicCourseCard from './PublicCourseCard';
 import useStyle from '../hooks/useStyle';
+import useSession from '../hooks/useSession';
 // import modifyEnv from '../../../modifyEnv';
 import { parseQuerys } from '../../utils/url';
 import { WHITE_LABEL_ACADEMY, BREATHECODE_HOST } from '../../utils/variables';
@@ -21,6 +22,7 @@ function MktRecommendedCourses({ id, technologies, background, gridColumn, endpo
   const { t, lang } = useTranslation('common');
   const [courses, setCourses] = useState([]);
   const { hexColor, fontColor, featuredLight } = useStyle();
+  const { location } = useSession();
 
   const defaultHostAndEndpoint = `${BREATHECODE_HOST}/v1/marketing/course`;
 
@@ -67,6 +69,8 @@ function MktRecommendedCourses({ id, technologies, background, gridColumn, endpo
     getCourses();
   }, []);
 
+  if (location?.countryShort === 'ES') return null;
+
   return courses.length > 0 && (
     <Box width="100%" maxWidth="1280px" margin="2rem auto">
       <Box

src/common/components/MktSideRecommendations.jsx

@@ -14,6 +14,7 @@ import TagCapsule from './TagCapsule';
 import { getBrowserSize, setStorageItem } from '../../utils';
 import { ORIGIN_HOST, WHITE_LABEL_ACADEMY, BREATHECODE_HOST } from '../../utils/variables';
 import useStyle from '../hooks/useStyle';
+import useSession from '../hooks/useSession';
 import { parseQuerys } from '../../utils/url';
 import { error } from '../../utils/logging';
 import { reportDatalayer } from '../../utils/requests';
@@ -47,6 +48,7 @@ function Container({ recommendation, recommendations, borderRadius, children, ..
 function MktSideRecommendations({ title, endpoint, technologies, containerPadding, ...rest }) {
   const { t, lang } = useTranslation('common');
   const { hexColor } = useStyle();
+  const { location } = useSession();
   const [isLoading, setIsLoading] = useState(true);
   const [recommendations, setRecommendations] = useState([]);
   const router = useRouter();
@@ -142,6 +144,8 @@ function MktSideRecommendations({ title, endpoint, technologies, containerPaddin
     fetchContent();
   }, []);
 
+  if (location?.countryShort === 'ES') return null;
+
   return recommendations?.length > 0 && (
     <>
       <Box color="white" zIndex="10" borderRadius="11px 11px 0 0" background={hexColor.greenLight} padding="10px 20px" bottom="0" position="sticky" marginBottom="20px" display={{ base: 'block', md: 'none' }} textAlign="left">

src/common/components/Navbar/index.jsx

@@ -40,7 +40,7 @@ function NavbarWithSubNavigation({ translations, pageProps }) {
   const HAVE_SESSION = typeof window !== 'undefined' ? localStorage.getItem('accessToken') !== null : false;
 
   const [haveSession, setHaveSession] = useState(HAVE_SESSION);
-  const { userSession } = useSession();
+  const { userSession, location } = useSession();
   const isUtmMediumAcademy = userSession?.utm_medium === 'academy';
   const { isAuthenticated, isLoading, user, logout } = useAuth();
   const [ITEMS, setITEMS] = useState([]);
@@ -156,20 +156,22 @@ function NavbarWithSubNavigation({ translations, pageProps }) {
   useEffect(() => {
     if (pageProps?.existsWhiteLabel) {
       setITEMS(whiteLabelitems);
-    }
-    if (!pageProps?.existsWhiteLabel) {
-      const preFilteredItems = items.filter((item) => (isUtmMediumAcademy ? item.id !== 'bootcamps' : true));
+    } else {
+      const preFilteredItems = items.filter(
+        (item) => (isUtmMediumAcademy ? item.id !== 'bootcamps' : true) && (item.id === 'bootcamps' ? location?.countryShort !== 'ES' : true),
+      );
       if (!isLoading && user?.id) {
         const isBootcampStudent = userCohorts.some(({ cohort }) => !cohort.available_as_saas);
         setITEMS(
-          preFilteredItems.filter((item) => item.disabled !== true && item?.hide_on_auth !== true)
-            .filter((item) => item.id !== 'bootcamps' || !isBootcampStudent),
+          preFilteredItems
+            .filter((item) => (item.disabled !== true && item.hide_on_auth !== true)
+            && (item.id !== 'bootcamps' || !isBootcampStudent)),
         );
       } else {
         setITEMS(preFilteredItems.filter((item) => item.disabled !== true));
       }
     }
-  }, [user, userCohorts, isLoading, selectedProgramSlug, mktCourses, router.locale]);
+  }, [user, userCohorts, isLoading, selectedProgramSlug, mktCourses, router.locale, location]);
 
   const closeSettings = () => {
     setSettingsOpen(false);
@@ -308,9 +310,6 @@ function NavbarWithSubNavigation({ translations, pageProps }) {
           <Box display={{ base: 'none', lg: 'inherit' }} height="35px" style={{ margin: 0 }}>
             <Divider orientation="vertical" borderColor={hexColor.fontColor3} opacity={0.5} />
           </Box>
-          {/* {isAuthenticated && !hasPaidSubscription && (
-            <UpgradeExperience display={{ base: 'none', sm: 'flex' }} />
-          )} */}
           {hasPaidSubscription && (
             <Box display="flex" alignItems="center" height="100%" zIndex={10}>
               <Icon icon="crown" width="20px" height="26px" color="" />

src/common/components/ShowOnSignup.jsx

@@ -5,28 +5,19 @@ import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import Text from './Text';
 import Signup from './Forms/Signup';
-import useGoogleMaps from '../hooks/useGoogleMaps';
-import useSignup from '../store/actions/signupAction';
 import useAuth from '../hooks/useAuth';
 import useStyle from '../hooks/useStyle';
 import { setStorageItem } from '../../utils';
 import { BREATHECODE_HOST } from '../../utils/variables';
 import ModalInfo from '../../js_modules/moduleMap/modalInfo';
 import useSubscribeToPlan from '../hooks/useSubscribeToPlan';
-import { error } from '../../utils/logging';
 
 function ShowOnSignUp({
   headContent, title, description, childrenDescription, subContent, footerContent, submitText, padding, isLive,
   subscribeValues, readOnly, children, hideForm, hideSwitchUser, refetchAfterSuccess, existsConsumables,
   conversionTechnologies, setNoConsumablesFound, invertHandlerPosition, formContainerStyle, buttonStyles,
   onLastAttempt, maxAttemptsToRefetch, showVerifyEmail, onSubmit, ...rest
 }) {
-  const GOOGLE_KEY = process.env.GOOGLE_GEO_KEY;
-  const { gmapStatus, getUserLocation } = useGoogleMaps(
-    GOOGLE_KEY,
-    'places',
-  );
-  const { setLocation } = useSignup();
   const { isAuthenticated, user, logout } = useAuth();
   const { handleSubscribeToPlan } = useSubscribeToPlan();
   const { backgroundColor, featuredColor, hexColor } = useStyle();
@@ -40,12 +31,6 @@ function ShowOnSignUp({
   const commonBorderColor = useColorModeValue('gray.250', 'gray.700');
   const defaultPlan = process.env.BASE_PLAN || 'basic';
 
-  useEffect(() => {
-    getUserLocation()
-      .then((loc) => setLocation(loc))
-      .catch((e) => error('function getUserLocation()', e));
-  }, [gmapStatus]);
-
   useEffect(() => {
     let intervalId;
     if (isLogged && !existsConsumables && !isReadyToRefetch) {

src/common/context/SessionContext.jsx

@@ -3,8 +3,10 @@ import React, { createContext, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import { isWindow, getQueryString } from '../../utils';
+import useGoogleMaps from '../hooks/useGoogleMaps';
+import { error } from '../../utils/logging';
 
-const initialState = {
+const initialUserSession = {
   utm_placement: '', // the ad placement
   utm_medium: '', // facebook, tiktok, Instagram, google
   utm_source: '', // cpc, organic, etc.
@@ -20,12 +22,32 @@ const initialState = {
 };
 
 export const SessionContext = createContext({
-  ...initialState,
+  userSession: initialUserSession,
+  location: null,
 });
 
 function SessionProvider({ children }) {
-  const [userSession, setUserSession] = useState(initialState);
+  const [userSession, setUserSession] = useState(initialUserSession);
   const router = useRouter();
+  const [location, setLocation] = useState(null);
+  const GOOGLE_KEY = process.env.GOOGLE_GEO_KEY;
+  const { gmapStatus, getUserLocation } = useGoogleMaps(
+    GOOGLE_KEY,
+    'places',
+  );
+
+  const initLocation = async () => {
+    try {
+      const loc = await getUserLocation();
+      setLocation(loc);
+    } catch (e) {
+      error('function getUserLocation()', e);
+    }
+  };
+
+  useEffect(() => {
+    initLocation();
+  }, [gmapStatus]);
 
   const setConversionUrl = () => {
     if (isWindow) {
@@ -102,6 +124,7 @@ function SessionProvider({ children }) {
             ...session,
           });
         },
+        location,
         setConversionUrl,
       }}
     >

src/common/hooks/useGoogleMaps.js

@@ -53,31 +53,35 @@ const useGoogleMaps = (apiKey, libraries = 'places') => {
     return null;
   };
 
-  const getNearestLocation = (key) => {
+  const geolocate = async (key) => {
     if (gmapStatus.loaded && key) {
-      // Get nearest user location
-      return new Promise((resolve, reject) => {
-        axios.post(`https://www.googleapis.com/geolocation/v1/geolocate?key=${key}`)
-          .then((result) => resolve(result))
-          .catch((err) => reject(err));
-      });
+      try {
+        const result = await axios.post(`https://www.googleapis.com/geolocation/v1/geolocate?key=${key}`);
+        return result;
+      } catch (error) {
+        console.error(error);
+      }
     }
     return null;
   };
 
   const getUserLocation = async (setCoords = () => {}) => {
     const userLocation = localStorage.getItem('user-location');
     if (gmapStatus.loaded && apiKey && !userLocation) {
-      const { data } = await getNearestLocation(apiKey);
+      const { data } = await geolocate(apiKey);
+      const loc = {};
       if (data) {
         setCoords({
           latitude: data.location.lat,
           longitude: data.location.lng,
         });
+        loc.coordinates = {
+          latitude: data.location.lat,
+          longitude: data.location.lng,
+        };
       }
 
       const results = await geocode({ location: data.location });
-      const loc = {};
 
       results[0].address_components.forEach((comp) => {
         if (comp.types.includes('locality')) loc.city = comp.long_name;
@@ -95,7 +99,7 @@ const useGoogleMaps = (apiKey, libraries = 'places') => {
     return null;
   };
 
-  return { gmapStatus, geocode, getNearestLocation, getUserLocation };
+  return { gmapStatus, geocode, geolocate, getUserLocation };
 };
 
 export default useGoogleMaps;

src/common/store/actions/signupAction.js

@@ -5,7 +5,7 @@ import { useToast } from '@chakra-ui/react';
 import useTranslation from 'next-translate/useTranslation';
 import { useRouter } from 'next/router';
 import {
-  NEXT_STEP, PREV_STEP, HANDLE_STEP, SET_DATE_PROPS, SET_CHECKOUT_DATA, SET_LOCATION, SET_PAYMENT_INFO,
+  NEXT_STEP, PREV_STEP, HANDLE_STEP, SET_DATE_PROPS, SET_CHECKOUT_DATA, SET_PAYMENT_INFO,
   SET_PLAN_DATA, SET_LOADER, SET_PLAN_CHECKOUT_DATA, SET_PLAN_PROPS, SET_COHORT_PLANS, TOGGLE_IF_ENROLLED,
   PREPARING_FOR_COHORT, SET_SERVICE_PROPS, SET_SELECTED_SERVICE, SET_PAYMENT_METHODS, SET_PAYMENT_STATUS,
   SET_SUBMITTING_CARD, SET_SUBMITTING_PAYMENT, SET_SELF_APPLIED_COUPON,
@@ -72,11 +72,6 @@ const useSignup = () => {
     payload,
   });
 
-  const setLocation = (payload) => dispatch({
-    type: SET_LOCATION,
-    payload,
-  });
-
   const setPaymentInfo = (payload, value) => dispatch({
     type: SET_PAYMENT_INFO,
     payload,
@@ -482,7 +477,6 @@ const useSignup = () => {
     handleStep,
     setDateProps,
     setCheckoutData,
-    setLocation,
     setPaymentMethods,
     setPaymentStatus,
     setIsSubmittingCard,

src/common/store/reducers/signupReducer.js

@@ -1,5 +1,5 @@
 import {
-  NEXT_STEP, PREV_STEP, HANDLE_STEP, SET_DATE_PROPS, SET_CHECKOUT_DATA, SET_LOCATION,
+  NEXT_STEP, PREV_STEP, HANDLE_STEP, SET_DATE_PROPS, SET_CHECKOUT_DATA,
   SET_PAYMENT_INFO, SET_PLAN_DATA, SET_LOADER, SET_PLAN_CHECKOUT_DATA, SET_PLAN_PROPS, SET_COHORT_PLANS,
   TOGGLE_IF_ENROLLED, SET_SERVICE_PROPS, SET_SELECTED_SERVICE, SET_PAYMENT_METHODS, SET_PAYMENT_STATUS,
   SET_SUBMITTING_CARD, SET_SUBMITTING_PAYMENT, SET_SELF_APPLIED_COUPON,
@@ -9,7 +9,6 @@ const initialState = {
   stepIndex: 0,
   dateProps: null,
   checkoutData: null,
-  location: null,
   paymentInfo: {
     card_number: '',
     exp: '',
@@ -83,14 +82,6 @@ const signupReducer = (state = initialState, action) => {
       };
     }
 
-    // location
-    case SET_LOCATION: {
-      return {
-        ...state,
-        location: action.payload,
-      };
-    }
-
     // planData
     case SET_COHORT_PLANS: {
       return {

src/common/store/types/index.js

@@ -3,7 +3,6 @@ const PREV_STEP = 'PREV_STEP';
 const HANDLE_STEP = 'HANDLE_STEP';
 const SET_DATE_PROPS = 'SET_DATE_PROPS';
 const SET_CHECKOUT_DATA = 'SET_CHECKOUT_DATA';
-const SET_LOCATION = 'SET_LOCATION';
 const SET_PAYMENT_INFO = 'SET_PAYMENT_INFO';
 const HANDLE_PAYMENT = 'HANDLE_PAYMENT';
 const SET_PLAN_DATA = 'SET_PLAN_DATA';
@@ -37,7 +36,6 @@ export {
   HANDLE_STEP,
   SET_DATE_PROPS,
   SET_CHECKOUT_DATA,
-  SET_LOCATION,
   SET_PAYMENT_INFO,
   SET_PAYMENT_STATUS,
   SET_SUBMITTING_CARD,