Cleanup PremiumPromoModal component. Add locale strings.

_locales/en/messages.json

@@ -2345,5 +2345,40 @@
 	},
 	"settings": {
 		"message": "Settings"
+	},
+  	"try_ghostery_midnight": {
+	  "message": "Try Ghostery Midnight"
+	},
+  	"seven_day_free_trial": {
+	  "message": "7 Day Free Trial ($$14/mo)",
+	  "description": "Do not localize currency. Use the $14 USD amount. The second $ is needed to escape the special meaning of $"
+	},
+  	"full_coverage_protection_promise": {
+	  "message": "Get full-coverage protection across all browsers & apps on your device"
+	},
+  	"system_wide_tracker_and_ad_blocking": {
+	  "message": "System-wide tracker & ad-blocking"
+	},
+  	"built_in_vpn": {
+	  "message": "Built-in VPN"
+	},
+  	"custom_whitelist_options": {
+	  "message": "Custom whitelist options"
+	},
+  	"historical_tracking_insights": {
+	  "message": "Historical tracking insights"
+	},
+  	"download_for_free": {
+	  "message": "Download for free"
+	},
+  	"support_ghostery_for_2_instead": {
+	  "message": "Support Ghostery for $$2/mo instead",
+	  "description": "Do not localize currency. Use the $2 USD amount. The second $ is needed to escape the special meaning of $"
+	},
+  	"no_thanks_continue_with_basic": {
+	  "message": "No thanks, continue with basic"
+	},
+  	"no_thanks_turn_promos_off": {
+	  "message": "No thanks, turn promos off"
 	}
 }

app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx

@@ -42,22 +42,6 @@ const PremiumPromoModal = (props) => {
 		'flex-dir-column',
 		'align-middle',
 	);
-	const optionsContainerClassNames = ClassNames(
-		'PremiumPromoModal__options-container',
-		'full-width',
-	);
-	const optionsDecriptionClassNames = ClassNames(
-		'PremiumPromoModal__option-description-item',
-	);
-	const chooseYourPlanClassNames = ClassNames(
-		'PremiumPromoModal__choose-your-plan',
-	);
-	const recommendedBannerClassNames = ClassNames(
-		'PremiumPromoModal__recommended-banner',
-	);
-	const optionDescriptionBoxClassNames = ClassNames(
-		'PremiumPromoModal__option-description-box',
-	);
 
 	return (
 		<Modal show={show}>
@@ -68,62 +52,62 @@ const PremiumPromoModal = (props) => {
 				<div className="PremiumPromoModal__midnight-logo" />
 				<div className="PremiumPromoModal__header">
 					<div className="PremiumPromoModal__header-text">
-						<span>Try Ghostery Midnight</span>
+						<span>{t('try_ghostery_midnight')}</span>
 						<div className="PremiumPromoModal__header-beta-icon" />
 					</div>
-					<div className="PremiumPromoModal__header-text">7 Day Free Trial ($14/mo)</div>
+					<div className="PremiumPromoModal__header-text">{t('seven_day_free_trial')}</div>
 				</div>
 				<div className="PremiumPromoModal__sub-header">
-					Get full-coverage protection across all browsers & apps on your device
+					{t('full_coverage_protection_promise')}
 				</div>
 				<div className="PremiumPromoModal__features-container">
 					<div className="PremiumPromoModal__feature-column">
 						<div className="PremiumPromoModal__feature">
 							<span className="PremiumPromoModal__checked-circle-icon" />
 							<div className="PremiumPromoModal__feature-text">
-								System-wide tracker & ad-blocking
+								{t('system_wide_tracker_and_ad_blocking')}
 							</div>
 						</div>
 						<div className="PremiumPromoModal__feature">
 							<span className="PremiumPromoModal__checked-circle-icon" />
 							<div className="PremiumPromoModal__feature-text">
-								Built-in VPN
+								{t('built_in_vpn')}
 							</div>
 						</div>
 					</div>
 					<div className="PremiumPromoModal__feature-column">
 						<div className="PremiumPromoModal__feature">
 							<span className="PremiumPromoModal__checked-circle-icon" />
 							<div className="PremiumPromoModal__feature-text">
-								Custom whitelist options
+								{t('custom_whitelist_options')}
 							</div>
 						</div>
 						<div className="PremiumPromoModal__feature">
 							<span className="PremiumPromoModal__checked-circle-icon" />
 							<div className="PremiumPromoModal__feature-text">
-								Historical tracking insights
+								{t('historical_tracking_insights')}
 							</div>
 						</div>
 					</div>
 				</div>
 				<div className="PremiumPromoModal__buttons-background">
 					<div className="PremiumPromoModal__button-container">
 						<div className="PremiumPromoModal__download-button" onClick={handleTryMidnightClick}>
-							<span>Download For Free</span>
+							<span>{t('download_for_free')}</span>
 						</div>
 					</div>
 					<div className="PremiumPromoModal__text-link-container">
 						<div onClick={handleGetPlusClick} className="PremiumPromoModal__text-link">
-							Support Ghostery for $2/mo instead
+							{t('support_ghostery_for_2_instead')}
 						</div>
 						{isInHub && (
 							<div onClick={handleKeepBasicClick} className="PremiumPromoModal__text-link">
-								No thanks, continue with basic
+								{t('no_thanks_continue_with_basic')}
 							</div>
 						)}
 						{isInPanel && (
 							<div onClick={handleGoAwayClick} className="PremiumPromoModal__text-link">
-								No thanks, turn promos off
+								{t('no_thanks_turn_promos_off')}
 							</div>
 						)}
 					</div>