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()}