diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx index 15967b4e1..f4a70019b 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -101,6 +101,18 @@ const basicCard = () => ( ); +const plusAlreadyProtectedButton = () => ( + + {t('hub_upgrade_already_protected')} + +); + +const premiumAlreadyProtectedButton = () => ( + + {t('hub_upgrade_already_protected')} + +); + /** * A React class component for rendering the Upgrade Plan View * @return {JSX} JSX for rendering the Upgrade Plan View of the Hub app @@ -163,34 +175,37 @@ const UpgradePlanView = (props) => { }; // Interval is the query Param to show monthly/yearly pricing in checkout web, also used as a ping parameter const interval = show_yearly_prices ? 'year' : 'month'; - const utmParams = `utm_source=gbe&utm_campaign=intro_hub_c_1&signedIn=${signedIn}&st=${subscriptionType()}&subscription_interval=${interval}`; + const utmParams = `utm_source=gbe&signedIn=${signedIn}&st=${subscriptionType()}&subscription_interval=${interval}`; - const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/plus?interval=${interval}&${utmParams}`; - const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/premium?interval=${interval}&${utmParams}`; + const plusCTAButton = (position) => { + const utm_campaign = position === 'top' ? 'c_1' : 'c_2'; + const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/plus?${utmParams}&utm_campaign=intro_hub_${utm_campaign}`; - const plusCTAButton = () => ( - isPlus ? ( - - {t('hub_upgrade_already_protected')} - - ) : ( + return ( {`${t('hub_upgrade_to')} Plus`} - ) - ); + ); + }; - const premiumCTAButton = () => ( - isPremium ? ( - - {t('hub_upgrade_already_protected')} - - ) : ( + const premiumCTAButton = (position) => { + const utm_campaign = position === 'top' ? 'c_3' : 'c_4'; + const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/premium?${utmParams}&utm_campaign=intro_hub_${utm_campaign}`; + + return ( {`${t('hub_upgrade_to')} Premium`} - ) - ); + ); + }; + + const plusButtonTop = () => (isPlus ? plusAlreadyProtectedButton() : plusCTAButton('top')); + + const plusButtonBottom = () => (isPlus ? plusAlreadyProtectedButton() : plusCTAButton('bottom')); + + const premiumButtonTop = () => (isPremium ? premiumAlreadyProtectedButton() : premiumCTAButton('top')); + + const premiumButtonBottom = () => (isPremium ? premiumAlreadyProtectedButton() : premiumCTAButton('bottom')); const toggleSwitch = (mobileView, secondToggle) => { const toggleSwitchClassNames = ClassNames('small-12 text-center columns', { @@ -235,7 +250,7 @@ const UpgradePlanView = (props) => { )} {mobileView && toggleSwitch(true)} - {plusCTAButton()} + {plusButtonTop()}

{t('hub_upgrade_additional_protection')}

@@ -274,7 +289,7 @@ const UpgradePlanView = (props) => { )} {mobileView && toggleSwitch(true)} - {premiumCTAButton()} + {premiumButtonTop()}

{t('hub_upgrade_maximum_browser_protection')}

@@ -396,10 +411,10 @@ const UpgradePlanView = (props) => { - {plusCTAButton()} + {plusButtonBottom()} - {premiumCTAButton()} + {premiumButtonBottom()} @@ -480,12 +495,12 @@ const UpgradePlanView = (props) => {
- {plusCTAButton()} + {plusButtonBottom()}
- {premiumCTAButton()} + {premiumButtonBottom()}