diff --git a/client/components/jetpack/intro-pricing-banner/index.tsx b/client/components/jetpack/intro-pricing-banner/index.tsx index 0356272f4cc62..237cf6634716f 100644 --- a/client/components/jetpack/intro-pricing-banner/index.tsx +++ b/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 = () => {