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 = () => {
+ { shouldShowNoticeVAT && ( +
+ + { preventWidows( translate( 'Prices do not include VAT' ) ) } + +
+ ) }
diff --git a/client/components/jetpack/intro-pricing-banner/style.scss b/client/components/jetpack/intro-pricing-banner/style.scss index 9e2fa5395f900..ae50f7d8e3787 100644 --- a/client/components/jetpack/intro-pricing-banner/style.scss +++ b/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 { diff --git a/client/my-sites/plans/jetpack-plans/product-store/pricing-banner/style.scss b/client/my-sites/plans/jetpack-plans/product-store/pricing-banner/style.scss index 09eb822dd5725..f77144450cbaf 100644 --- a/client/my-sites/plans/jetpack-plans/product-store/pricing-banner/style.scss +++ b/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; } }