diff --git a/src/components/LeadForm/PhoneInput/index.js b/src/components/LeadForm/PhoneInput/index.js index 4924ea65b..727ec1c64 100644 --- a/src/components/LeadForm/PhoneInput/index.js +++ b/src/components/LeadForm/PhoneInput/index.js @@ -131,15 +131,17 @@ const PhoneInput = ({ }, [selectedCountry]); React.useEffect(() => { - if ( - setShowPhoneWarning && - campusDial && - campusDial !== "" && - campusDial.dialCode !== selectedCountry.dialCode - ) + if (!setShowPhoneWarning) return; + if (!campusDial || !campusDial.dialCode) { + setShowPhoneWarning(false); + return; + } + if (campusDial.dialCode !== selectedCountry.dialCode) { setShowPhoneWarning(true); - else if (setShowPhoneWarning) setShowPhoneWarning(false); - }, [campusDial, selectedCountry]); + } else { + setShowPhoneWarning(false); + } + }, [campusDial, selectedCountry, setShowPhoneWarning]); const handleSearchChange = (e) => { const { diff --git a/src/templates/apply.js b/src/templates/apply.js index f2d74d020..8c1d73a75 100644 --- a/src/templates/apply.js +++ b/src/templates/apply.js @@ -112,28 +112,34 @@ const Apply = (props) => { }, []); React.useEffect(() => { const urlParams = new URLSearchParams(window.location.search); + + // Pre-fill the region + let _region = urlParams.get("region"); + if (!_region && session.location?.meta_info?.region) { + _region = session.location.meta_info.region; // e.g. 'latam' + } + // Pre-fill the location let _location = urlParams.get("location"); - if (!_location && session.location) + if (!_location && session.location) _location = session.location.active_campaign_location_slug; - + if (typeof _location === "string" && session.locations) _location = session.locations.find( (l) => l.active_campaign_location_slug === _location || l.breathecode_location_slug === _location ); - else _location = null; + else _location = null; if (_location) _location = _location.active_campaign_location_slug; - + // Pre-fill the course let _course = urlParams.get("course"); if (!_course && props.location.state) _course = props.location.state.course; - if (typeof _course === "string") _course = programs.find((p) => p.value === _course); - + // Pre-fill the utm_url let _utm_url = undefined; if (props.location.state) @@ -144,13 +150,16 @@ const Apply = (props) => { utm_url: _utm_url, // this is the line that automatically sets the location, we don't want that anymore // its better if leads choose the location themselves - // location: {value: _location || "", valid: typeof (_location) === "string" && _location !== ""}, + location: {value: _location || "", valid: typeof (_location) === "string" && _location !== "" + }, course: { value: _course || null, valid: _course && _course.value ? true : false, }, referral_key: { value: session?.utm?.referral_code || null, valid: true }, })); + + setRegionVal(_region || null); }, [session]); let privacy = data.privacy.edges.find( @@ -540,9 +549,11 @@ const Apply = (props) => { tabindex="1" bgColor={Colors.black} options={regions} - // value={locations?.find( - // (el) => el.value === formData.location.value - // )} + value={ + regionVal + ? regions.find((r) => r.value === regionVal) + : null + } placeholder={yml.left.regions_title} inputId="dropdown_region_selector" onChange={(value) => { @@ -581,29 +592,20 @@ const Apply = (props) => { margin_tablet="11px 0 23px 0" > academy.region === regionVal - ) + ? [{ dialCode: null, label: "Online", region: "online", value: "online" }] + : locations?.filter((academy) => academy.region === regionVal) } - value={formData.location.value} + value={locations?.find( + (el) => el.value === formData.location.value + )} placeholder={yml.left.locations_title} inputId={"dropdown_academy_selector"} - onChange={(value, valid) => { - setVal({ ...formData, location: { value, valid } }); - }} - /> + onChange={(value, valid) => + setVal({ ...formData, location: { value, valid } })} + /> )} {formData.referral_key.value &&