Add VAT notice in pricing banner (#88464)

* Add VAT notice in pricing banner

* Hide VAT notice if IP is recognized from US

* Add Canada to exclusion list and update comment

* Fix responsiveness

client/components/jetpack/intro-pricing-banner/index.tsx

@@ -3,6 +3,7 @@ import { localizeUrl, useLocale } from '@automattic/i18n-utils';
 import { useBreakpoint } from '@automattic/viewport-react';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect, useMemo } from 'react';
+import { useGeoLocationQuery } from 'calypso/data/geo/use-geolocation-query';
 import CloudCart from 'calypso/jetpack-cloud/sections/pricing/jpcom-masterbar/cloud-cart';
 import useDetectWindowBoundary from 'calypso/lib/detect-window-boundary';
 import { preventWidows } from 'calypso/lib/formatting';
@@ -25,12 +26,24 @@ const CALYPSO_MASTERBAR_HEIGHT = 47;
 const CLOUD_MASTERBAR_HEIGHT = 47;
 const CONNECT_STORE_HEIGHT = 0;
 
+const useShowNoticeVAT = () => {
+	const excludedCountries = [ 'US', 'CA' ];
+	const query = useGeoLocationQuery();
+	// It's better to pop-in more information rather than hide it. So we don't show notice if we don't have geodata yet.
+	if ( query.isLoading ) {
+		return false;
+	}
+	// If there is an error, we fail safe and show the notice. If we have a country - we show notice if the country is not exceptions list.
+	return query.isError || ! excludedCountries.includes( query.data?.country_short ?? '' );
+};
+
 const IntroPricingBanner: React.FC = () => {
 	const translate = useTranslate();
 	const locale = useLocale();
 	const shouldShowCart = useSelector( isJetpackCloudCartEnabled );
 	const clientRect = useBoundingClientRect( '.header__content .header__jetpack-masterbar-cart' );
 	const isSmallScreen = useBreakpoint( '<660px' );
+	const shouldShowNoticeVAT = useShowNoticeVAT();
 
 	const windowBoundaryOffset = useMemo( () => {
 		if ( isJetpackCloud() ) {
@@ -68,6 +81,13 @@ const IntroPricingBanner: React.FC = () => {
 			<div className="intro-pricing-banner__viewport-sentinel" { ...outerDivProps }></div>
 			<div className="intro-pricing-banner">
 				<div className="intro-pricing-banner__content">
+					{ shouldShowNoticeVAT && (
+						<div className="intro-pricing-banner__item is-centered-mobile">
+							<span className="intro-pricing-banner__item-label">
+								{ preventWidows( translate( 'Prices do not include VAT' ) ) }
+							</span>
+						</div>
+					) }
 					<div className="intro-pricing-banner__item">
 						<img className="intro-pricing-banner__item-icon" src={ rocket } alt="" />
 						<span className="intro-pricing-banner__item-label">

client/components/jetpack/intro-pricing-banner/style.scss

@@ -21,7 +21,7 @@
 .intro-pricing-banner:not(.is-sticky) .intro-pricing-banner__content {
 	height: 120px;
 	margin-bottom: 2rem;
-	gap: 1.25rem;
+	column-gap: 1.25rem;
 
 	@include break-large {
 		height: 54px;
@@ -34,6 +34,8 @@
 	align-items: flex-start;
 
 	@include break-large {
+		flex-wrap: wrap;
+		justify-content: center;
 		flex-direction: row;
 		align-items: center;
 	}
@@ -48,6 +50,12 @@
 	&:not(:last-child) {
 		margin-right: 16px;
 	}
+
+	&.is-centered-mobile {
+		@media ( max-width: $break-large ) {
+			align-self: center;
+		}
+	}
 }
 
 .intro-pricing-banner__item-icon {

client/my-sites/plans/jetpack-plans/product-store/pricing-banner/style.scss

@@ -12,11 +12,12 @@
 
 .jetpack-product-store__pricing-banner .intro-pricing-banner:not(.is-sticky) .intro-pricing-banner__content {
 	height: auto;
-	gap: 12px;
+	gap: 0.75rem;
 
 	@include break-large {
-		gap: 32px;
-		max-height: 32px;
+		row-gap: 1rem;
+		column-gap: 2rem;
+		max-height: 2rem;
 	}
 }