From 1a18ab0b7ff976a9e61b1e05c98f885a95c34ef1 Mon Sep 17 00:00:00 2001 From: Claudiu Filip Date: Sat, 5 Mar 2022 12:00:53 +0200 Subject: [PATCH 1/9] Apply Global styles overrides to Plans and My Plan pages --- client/my-sites/plans-comparison/index.tsx | 2 +- .../is-eligible-for-managed-plan.ts | 69 ++++++ .../plans-comparison-col-header.tsx | 13 +- .../plans-comparison-row-header.tsx | 35 +-- .../plans-comparison/plans-comparison-row.tsx | 13 +- .../plans-comparison/plans-comparison.tsx | 10 +- client/my-sites/plans/current-plan/index.jsx | 210 +++++++++++------- .../plans/current-plan/purchases-listing.jsx | 12 +- client/my-sites/plans/main.jsx | 23 +- 9 files changed, 264 insertions(+), 123 deletions(-) diff --git a/client/my-sites/plans-comparison/index.tsx b/client/my-sites/plans-comparison/index.tsx index a438793e930cf..4081baca67250 100644 --- a/client/my-sites/plans-comparison/index.tsx +++ b/client/my-sites/plans-comparison/index.tsx @@ -1,2 +1,2 @@ export { PlansComparison as default } from './plans-comparison'; -export { isEligibleForManagedPlan } from './is-eligible-for-managed-plan'; +export { isEligibleForManagedPlan, globalOverrides } from './is-eligible-for-managed-plan'; diff --git a/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts b/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts index 5bfc1ed57004e..8829e619c8dda 100644 --- a/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts +++ b/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts @@ -15,3 +15,72 @@ export function isEligibleForManagedPlan( state: AppState, siteId?: number ): bo return isEnabled( 'plans/managed-plan' ); } + +export const globalOverrides = { + '#content.layout__content': { + overflow: 'unset', + 'min-height': '100vh !important', + background: '#fff', + 'padding-left': 0, + 'padding-right': 0, + 'padding-top': '58px', + }, + '.layout__secondary': { + 'box-shadow': '0 1px 0 1px rgba(0,0,0,0.1)', + }, + '.is-nav-unification .sidebar .sidebar__heading::after, .is-nav-unification .sidebar .sidebar__menu-link::after': { + 'margin-right': '-1px', + }, + '.main.is-wide-layout': { + 'max-width': '100%', + }, + '.formatted-header__title.wp-brand-font': { + 'font-size': '1rem', + 'font-family': 'inherit !important', + 'font-weight': '600', + 'margin-left': 'auto', + 'margin-right': 'auto', + }, + '.formatted-header__subtitle': { + display: 'none', + }, + '.formatted-header': { + 'border-bottom': '1px solid #DCDCDE', + 'padding-bottom': '24px', + padding: '0 24px 24px calc(var(--sidebar-width-min) + 24px + 1px)', + '@media (max-width: 782px)': { + padding: '0 0 24px 16px', + }, + }, + '.plans, .formatted-header__title, .current-plan__content': { + 'max-width': '1040px', + margin: 'auto', + padding: '0 24px 0 calc(var(--sidebar-width-min) + 24px + 1px)', + '@media (max-width: 782px)': { + padding: '0', + }, + }, + '.section-nav': { + 'box-shadow': 'none', + background: 'none', + }, + '.section-nav-tab': { + opacity: 0.7, + }, + '.section-nav-tab.is-selected, .section-nav-tab:hover': { + opacity: 1, + }, + '.section-nav-tab__link, .section-nav-tab__link:hover, .section-nav-tab__link:focus, .section-nav-tab__link:active': { + color: 'inherit !important', + background: 'none !important', + 'font-size': '16px', + }, + '.my-plan-card__icon': { + display: 'none', + }, + '.my-plan-card__title': { + 'font-family': 'Recoleta', + 'font-size': '1.5rem', + 'margin-bottom': '0.5rem', + }, +}; diff --git a/client/my-sites/plans-comparison/plans-comparison-col-header.tsx b/client/my-sites/plans-comparison/plans-comparison-col-header.tsx index f2b431588d7d9..71e39bcb0ee37 100644 --- a/client/my-sites/plans-comparison/plans-comparison-col-header.tsx +++ b/client/my-sites/plans-comparison/plans-comparison-col-header.tsx @@ -13,19 +13,28 @@ interface Props { } const PlanTitle = styled.h2` - font-size: 1.25rem; + font-size: 2rem; + font-family: Recoleta; + font-weight: 500; `; const PlanDescription = styled.p` color: var( --studio-gray-50 ); font-size: 0.875rem; - font-weight: 500; + font-weight: 400; margin: 0 0 1rem; `; const PriceContainer = styled.div` display: flex; flex-direction: row; + font-family: Recoleta; + font-weight: 500; + + .plan-price { + font-size: 2.75rem; + line-height: 1; + } `; const BillingTimeFrame = styled.div` diff --git a/client/my-sites/plans-comparison/plans-comparison-row-header.tsx b/client/my-sites/plans-comparison/plans-comparison-row-header.tsx index 13f97402b7333..fcfc3b5f7a49b 100644 --- a/client/my-sites/plans-comparison/plans-comparison-row-header.tsx +++ b/client/my-sites/plans-comparison/plans-comparison-row-header.tsx @@ -9,24 +9,27 @@ interface Props { scope?: 'row' | 'col'; } +const Details = styled.div` + margin-left: 6px; +`; const Wrapper = styled.div` display: flex; - flex-direction: column; - margin-left: 21px; + flex-direction: row; min-height: 100%; + align-items: center; + + .gridicon { + display: block; + color: var( --studio-gray-30 ); + } `; const Title = styled.div` display: flex; flex-direction: row; gap: 5px; - font-weight: 600; - margin-left: -21px; - - .gridicon { - display: block; - color: var( --studio-gray-30 ); - } + font-weight: 500; + align-items: center; `; const Subtitle = styled.div` @@ -44,13 +47,13 @@ export const PlansComparisonRowHeader: React.FunctionComponent< Props > = ( { return ( - - <InfoPopover position="top" iconSize={ 16 } showOnHover={ true }> - { description } - </InfoPopover> - { title } - - { subtitle && { subtitle } } + + { description } + +
+ { title } + { subtitle && { subtitle } } +
); diff --git a/client/my-sites/plans-comparison/plans-comparison-row.tsx b/client/my-sites/plans-comparison/plans-comparison-row.tsx index d39ab5517db81..4d986a4f179b4 100644 --- a/client/my-sites/plans-comparison/plans-comparison-row.tsx +++ b/client/my-sites/plans-comparison/plans-comparison-row.tsx @@ -23,20 +23,17 @@ const MobileContent = styled.div` display: none; @media screen and ( max-width: ${ SCREEN_BREAKPOINT }px ) { - display: flex; - flex-direction: column; + display: block; } `; const Title = styled.div` - display: flex; - flex-direction: row; - align-items: center; gap: 0.5rem; .gridicon { - width: 1em; - height: 1em; + width: 1.1em; + height: 1.1em; + margin: 0 5px -2px 0; } .gridicons-checkmark { @@ -44,7 +41,7 @@ const Title = styled.div` } .gridicons-cross { - fill: var( --studio-gray-30 ); + fill: #d63638; } `; diff --git a/client/my-sites/plans-comparison/plans-comparison.tsx b/client/my-sites/plans-comparison/plans-comparison.tsx index b2ffd3eb668b8..506a4e1d69e30 100644 --- a/client/my-sites/plans-comparison/plans-comparison.tsx +++ b/client/my-sites/plans-comparison/plans-comparison.tsx @@ -6,7 +6,6 @@ import { TYPE_FLEXIBLE, TYPE_MANAGED, } from '@automattic/calypso-products'; -import { Global } from '@emotion/react'; import styled from '@emotion/styled'; import { useTranslate } from 'i18n-calypso'; import { useSelector } from 'react-redux'; @@ -34,13 +33,13 @@ const ComparisonTable = styled.table< TableProps >` th, td { - background: var( --studio-white ); - border-bottom: 1px solid var( --studio-gray-0 ); + background: #fdfdfd; + border-bottom: 1px solid rgba( 220, 220, 222, 0.2 ); padding: 1rem; min-height: 2rem; width: ${ ( { firstColWidth, planCount } ) => `${ ( 100 - firstColWidth ) / planCount }%` }; font-size: 1rem; - vertical-align: top; + vertical-align: middle; } th:nth-of-type( even ), @@ -115,9 +114,6 @@ export const PlansComparison: React.FunctionComponent< Props > = ( { return ( - { ! isInSignup && ( - - ) } diff --git a/client/my-sites/plans/current-plan/index.jsx b/client/my-sites/plans/current-plan/index.jsx index f0090a1ef7886..3fde815e9d815 100644 --- a/client/my-sites/plans/current-plan/index.jsx +++ b/client/my-sites/plans/current-plan/index.jsx @@ -18,6 +18,7 @@ import { isManaged, } from '@automattic/calypso-products'; import { Dialog } from '@automattic/components'; +import { Global } from '@emotion/react'; import classNames from 'classnames'; import { localize } from 'i18n-calypso'; import PropTypes from 'prop-types'; @@ -39,7 +40,7 @@ import TrackComponentView from 'calypso/lib/analytics/track-component-view'; import { isCloseToExpiration } from 'calypso/lib/purchases'; import { getPurchaseByProductSlug } from 'calypso/lib/purchases/utils'; import DomainWarnings from 'calypso/my-sites/domains/components/domain-warnings'; -import { isEligibleForManagedPlan } from 'calypso/my-sites/plans-comparison'; +import { globalOverrides, isEligibleForManagedPlan } from 'calypso/my-sites/plans-comparison'; import JetpackChecklist from 'calypso/my-sites/plans/current-plan/jetpack-checklist'; import PlanRenewalMessage from 'calypso/my-sites/plans/jetpack-plans/plan-renewal-message'; import PlansNavigation from 'calypso/my-sites/plans/navigation'; @@ -200,6 +201,7 @@ class CurrentPlan extends Component { return (
+ { eligibleForManagedPlan && } - { selectedSiteId && ( - // key={ selectedSiteId } ensures data is refetched for changing selectedSiteId - - ) } - - - - { shouldQuerySiteDomains && } - - { showThankYou && ! this.state.hideThankYouModal && ( - + { selectedSiteId && ( + // key={ selectedSiteId } ensures data is refetched for changing selectedSiteId + + ) } + + + + { shouldQuerySiteDomains && } + + { showThankYou && ! this.state.hideThankYouModal && ( + + { this.renderThankYou() } + + ) } + + + + { showDomainWarnings && ( + + ) } + + { showExpiryNotice && ( + } showDismiss={ false }> + + { translate( 'View plans' ) } + + + ) } + + { showLegacyPlanNotice && ( + + ) } + + + + { showJetpackChecklist && ( + + + + + ) } + +
- { this.renderThankYou() } -
- ) } - - - - { showDomainWarnings && ( - - ) } - - { showExpiryNotice && ( - } showDismiss={ false }> - - { translate( 'View plans' ) } - - - ) } - - { showLegacyPlanNotice && ( - - ) } - - - - { showJetpackChecklist && ( - - - - - ) } - -
-

{ planFeaturesHeader }

-
+

{ planFeaturesHeader }

+ + + + + { showDomainWarnings && ( + + ) } - + { showExpiryNotice && ( + } showDismiss={ false }> + + { translate( 'View plans' ) } + + + ) } + + - + { showJetpackChecklist && ( + + + + + ) } + + { ! eligibleForManagedPlan && ( + <> +
+

{ planFeaturesHeader }

+
+ + + + ) } + + +
); } diff --git a/client/my-sites/plans/current-plan/purchases-listing.jsx b/client/my-sites/plans/current-plan/purchases-listing.jsx index b942b791cf143..5523c95ec47a0 100644 --- a/client/my-sites/plans/current-plan/purchases-listing.jsx +++ b/client/my-sites/plans/current-plan/purchases-listing.jsx @@ -34,6 +34,7 @@ import { } from 'calypso/lib/purchases'; import { managePurchase } from 'calypso/me/purchases/paths'; import OwnerInfo from 'calypso/me/purchases/purchase-item/owner-info'; +import { isEligibleForManagedPlan } from 'calypso/my-sites/plans-comparison'; import { getManagePurchaseUrlFor } from 'calypso/my-sites/purchases/paths'; import { getCurrentUserId } from 'calypso/state/current-user/selectors'; import { getSitePurchases } from 'calypso/state/purchases/selectors'; @@ -333,13 +334,15 @@ class PurchasesListing extends Component { } renderPlan() { - const { currentPlan, isPlanExpiring, translate } = this.props; + const { currentPlan, isPlanExpiring, translate, eligibleForManagedPlan } = this.props; return ( - - { translate( 'My Plan' ) } - + { ! eligibleForManagedPlan && ( + + { translate( 'My Plan' ) } + + ) } { this.isLoading() ? ( ) : ( @@ -423,5 +426,6 @@ export default connect( ( state ) => { selectedSiteSlug: getSelectedSiteSlug( state ), isCloudEligible: isJetpackCloudEligible( state, selectedSiteId ), currentUserId: getCurrentUserId( state ), + eligibleForManagedPlan: isEligibleForManagedPlan( state, selectedSiteId ), }; } )( localize( withLocalizedMoment( PurchasesListing ) ) ); diff --git a/client/my-sites/plans/main.jsx b/client/my-sites/plans/main.jsx index 489b180d415be..6cf8cf0b7ea74 100644 --- a/client/my-sites/plans/main.jsx +++ b/client/my-sites/plans/main.jsx @@ -6,6 +6,7 @@ import { PLAN_WPCOM_MANAGED, PLAN_WPCOM_FLEXIBLE, } from '@automattic/calypso-products'; +import { Global } from '@emotion/react'; import styled from '@emotion/styled'; import { localize } from 'i18n-calypso'; import page from 'page'; @@ -24,7 +25,10 @@ import TrackComponentView from 'calypso/lib/analytics/track-component-view'; import withTrackingTool from 'calypso/lib/analytics/with-tracking-tool'; import { useExperiment } from 'calypso/lib/explat'; import { PerformanceTrackerStop } from 'calypso/lib/performance-tracking'; -import PlansComparison, { isEligibleForManagedPlan } from 'calypso/my-sites/plans-comparison'; +import PlansComparison, { + globalOverrides, + isEligibleForManagedPlan, +} from 'calypso/my-sites/plans-comparison'; import PlansFeaturesMain from 'calypso/my-sites/plans-features-main'; import PlansNavigation from 'calypso/my-sites/plans/navigation'; import P2PlansMain from 'calypso/my-sites/plans/p2-plans-main'; @@ -139,7 +143,7 @@ class Plans extends Component { }; renderPlansMain() { - const { currentPlan, selectedSite, isWPForTeamsSite } = this.props; + const { currentPlan, selectedSite, isWPForTeamsSite, eligibleForManagedPlan } = this.props; if ( ! this.props.plansLoaded || ! currentPlan ) { // Maybe we should show a loading indicator here? @@ -159,7 +163,7 @@ class Plans extends Component { } if ( - this.props.isEligibleForManagedPlan && + eligibleForManagedPlan && [ PLAN_FREE, PLAN_WPCOM_FLEXIBLE, PLAN_WPCOM_MANAGED ].includes( currentPlan?.productSlug ) ) { return ( @@ -192,9 +196,15 @@ class Plans extends Component { } render() { - const { selectedSite, translate, canAccessPlans } = this.props; + const { + selectedSite, + translate, + canAccessPlans, + currentPlan, + eligibleForManagedPlan, + } = this.props; - if ( ! selectedSite || this.isInvalidPlanInterval() ) { + if ( ! selectedSite || this.isInvalidPlanInterval() || ! currentPlan ) { return this.renderPlaceholder(); } @@ -203,6 +213,7 @@ class Plans extends Component { { selectedSite.ID && } + { eligibleForManagedPlan && } @@ -255,6 +266,6 @@ export default connect( ( state ) => { isSiteEligibleForMonthlyPlan: isEligibleForWpComMonthlyPlan( state, selectedSiteId ), showTreatmentPlansReorderTest: isTreatmentPlansReorderTest( state ), plansLoaded: Boolean( getPlanSlug( state, getPlan( PLAN_FREE )?.getProductId() || 0 ) ), - isEligibleForManagedPlan: isEligibleForManagedPlan( state, selectedSiteId ), + eligibleForManagedPlan: isEligibleForManagedPlan( state, selectedSiteId ), }; } )( localize( withTrackingTool( 'HotJar' )( Plans ) ) ); From 52c13678ae2e35e3ecdc92ddd4082e657a26107d Mon Sep 17 00:00:00 2001 From: Claudiu Filip Date: Mon, 7 Mar 2022 16:41:04 +0200 Subject: [PATCH 2/9] Adds more style improvements to better match the design --- client/my-sites/plans-comparison/constant.ts | 3 +- .../is-eligible-for-managed-plan.ts | 240 +++++++++++++----- .../plans-comparison-col-header.tsx | 31 ++- .../plans-comparison-row-header.tsx | 9 +- .../plans-comparison/plans-comparison-row.tsx | 40 ++- .../plans-comparison/plans-comparison.tsx | 102 +++++++- client/my-sites/plans/current-plan/index.jsx | 47 +--- .../plans/current-plan/purchases-listing.jsx | 4 +- 8 files changed, 333 insertions(+), 143 deletions(-) diff --git a/client/my-sites/plans-comparison/constant.ts b/client/my-sites/plans-comparison/constant.ts index 8b4ae5dcc8402..291aa04905c15 100644 --- a/client/my-sites/plans-comparison/constant.ts +++ b/client/my-sites/plans-comparison/constant.ts @@ -1 +1,2 @@ -export const SCREEN_BREAKPOINT = 768; // in pixels +export const SCREEN_BREAKPOINT_SIGNUP = 768; // in pixels +export const SCREEN_BREAKPOINT_PLANS = 990; diff --git a/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts b/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts index 8829e619c8dda..a9a06c4703a7d 100644 --- a/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts +++ b/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts @@ -1,4 +1,5 @@ import { isEnabled } from '@automattic/calypso-config'; +import { css } from '@emotion/react'; import { isE2ETest } from 'calypso/lib/e2e'; import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams'; import { isJetpackSite } from 'calypso/state/sites/selectors'; @@ -16,71 +17,174 @@ export function isEligibleForManagedPlan( state: AppState, siteId?: number ): bo return isEnabled( 'plans/managed-plan' ); } -export const globalOverrides = { - '#content.layout__content': { - overflow: 'unset', - 'min-height': '100vh !important', - background: '#fff', - 'padding-left': 0, - 'padding-right': 0, - 'padding-top': '58px', - }, - '.layout__secondary': { - 'box-shadow': '0 1px 0 1px rgba(0,0,0,0.1)', - }, - '.is-nav-unification .sidebar .sidebar__heading::after, .is-nav-unification .sidebar .sidebar__menu-link::after': { - 'margin-right': '-1px', - }, - '.main.is-wide-layout': { - 'max-width': '100%', - }, - '.formatted-header__title.wp-brand-font': { - 'font-size': '1rem', - 'font-family': 'inherit !important', - 'font-weight': '600', - 'margin-left': 'auto', - 'margin-right': 'auto', - }, - '.formatted-header__subtitle': { - display: 'none', - }, - '.formatted-header': { - 'border-bottom': '1px solid #DCDCDE', - 'padding-bottom': '24px', - padding: '0 24px 24px calc(var(--sidebar-width-min) + 24px + 1px)', - '@media (max-width: 782px)': { - padding: '0 0 24px 16px', - }, - }, - '.plans, .formatted-header__title, .current-plan__content': { - 'max-width': '1040px', - margin: 'auto', - padding: '0 24px 0 calc(var(--sidebar-width-min) + 24px + 1px)', - '@media (max-width: 782px)': { - padding: '0', - }, - }, - '.section-nav': { - 'box-shadow': 'none', - background: 'none', - }, - '.section-nav-tab': { - opacity: 0.7, - }, - '.section-nav-tab.is-selected, .section-nav-tab:hover': { - opacity: 1, - }, - '.section-nav-tab__link, .section-nav-tab__link:hover, .section-nav-tab__link:focus, .section-nav-tab__link:active': { - color: 'inherit !important', - background: 'none !important', - 'font-size': '16px', - }, - '.my-plan-card__icon': { - display: 'none', - }, - '.my-plan-card__title': { - 'font-family': 'Recoleta', - 'font-size': '1.5rem', - 'margin-bottom': '0.5rem', - }, -}; +export const globalOverrides = css` + #content.layout__content { + overflow: unset; + min-height: 100vh !important; + background: #fdfdfd; + padding-left: 0; + padding-right: 0; + padding-top: 47px; + } + + .layout__secondary { + box-shadow: 0 1px 0 1px rgba( 0, 0, 0, 0.1 ); + } + + .is-nav-unification .sidebar .sidebar__heading::after, + .is-nav-unification .sidebar .sidebar__menu-link::after { + html[dir='ltr'] & { + margin-right: -1px; + border-right-color: #fdfdfd; + } + html[dir='rtl'] & { + margin-left: -1px; + border-left-color: #fdfdfd; + } + } + + .main.is-wide-layout.is-wide-layout { + max-width: 100%; + } + + .formatted-header__title.formatted-header__title { + font-size: 1rem; + font-family: inherit !important; + font-weight: 600; + margin: 0 auto; + max-width: 1040px; + } + + .formatted-header__subtitle { + display: none; + } + + .formatted-header.formatted-header { + border-bottom: 1px solid #dcdcde; + padding-bottom: 24px; + margin: 0; + + html[dir='ltr'] & { + padding: 12px 24px 24px calc( var( --sidebar-width-min ) + 24px + 1px ); + } + html[dir='rtl'] & { + padding: 12px calc( var( --sidebar-width-min ) + 24px + 1px ) 24px 24px; + } + + @media ( max-width: 782px ) { + padding: 24px 16px; + } + } + + .plans, + .current-plan__content { + max-width: 1040px; + margin: auto; + + html[dir='ltr'] & { + padding: 0 24px 0 calc( var( --sidebar-width-min ) + 24px + 1px ); + } + html[dir='rtl'] & { + padding: 0 calc( var( --sidebar-width-min ) + 24px + 1px ) 0 24px; + } + + @media ( max-width: 782px ) { + html[dir='ltr'] &, + html[dir='rtl'] & { + padding: 0; + } + } + } + + .section-nav.section-nav { + box-shadow: none; + background: none; + margin: 16px 0 32px; + } + + .section-nav-tab { + opacity: 0.7; + } + + .section-nav-tab.is-selected, + .section-nav-tab:hover { + opacity: 1; + } + + .section-nav-tab__link { + font-size: 16px; + } + + .section-nav-tab__link, + .section-nav-tab__link:hover, + .section-nav-tab__link:focus, + .section-nav-tab__link:active { + color: inherit !important; + background: none !important; + } + + .section-nav-tab:hover:not( .is-selected ) { + border-bottom-color: transparent; + } + + .my-plan-card__icon { + display: none; + } + + .my-plan-card__title { + font-family: Recoleta; + font-size: 1.5rem; + margin-bottom: 0.5rem; + } + + .notice.notice { + color: inherit; + } + + .notice.is-info { + background: #f6f7f7; + } + + .notice__content.notice__content { + html[dir='ltr'] & { + padding: 10px 10px 10px 0; + } + html[dir='rtl'] & { + padding: 10px 0 10px 10px; + } + } + + .notice.is-info .notice__icon-wrapper.notice__icon-wrapper { + background: none; + width: 40px; + } + + .notice .gridicons-info-outline { + fill: #008a20; + } + + .my-plan-card.card { + flex-direction: column; + justify-content: stretch; + } + + .my-plan-card__primary { + min-width: 60%; + } + + .my-plan-card__details { + display: none; + } + + .popover__arrow { + display: none; + } + .popover.info-popover__tooltip .popover__inner { + background: var( --studio-gray-100 ); + color: #fff; + border: none; + padding: 8px 10px; + border-radius: 4px; + font-size: 0.75rem; + } +`; diff --git a/client/my-sites/plans-comparison/plans-comparison-col-header.tsx b/client/my-sites/plans-comparison/plans-comparison-col-header.tsx index 71e39bcb0ee37..df045b786b977 100644 --- a/client/my-sites/plans-comparison/plans-comparison-col-header.tsx +++ b/client/my-sites/plans-comparison/plans-comparison-col-header.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import PlanPrice from 'calypso/my-sites/plan-price'; +import { SCREEN_BREAKPOINT_SIGNUP, SCREEN_BREAKPOINT_PLANS } from './constant'; import type { Plan } from '@automattic/calypso-products'; import type { translate } from 'i18n-calypso'; @@ -13,9 +14,23 @@ interface Props { } const PlanTitle = styled.h2` - font-size: 2rem; - font-family: Recoleta; + font-size: 1.125rem; + margin-bottom: 10px; font-weight: 500; + + @media screen and ( min-width: ${ SCREEN_BREAKPOINT_SIGNUP + 1 }px ) { + .is-section-signup & { + font-size: 2rem; + font-family: Recoleta; + } + } + + @media screen and ( min-width: ${ SCREEN_BREAKPOINT_PLANS + 1 }px ) { + .is-section-plans & { + font-size: 2rem; + font-family: Recoleta; + } + } `; const PlanDescription = styled.p` @@ -23,6 +38,18 @@ const PlanDescription = styled.p` font-size: 0.875rem; font-weight: 400; margin: 0 0 1rem; + + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_SIGNUP }px ) { + .is-section-signup & { + display: none; + } + } + + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_PLANS }px ) { + .is-section-plans & { + display: none; + } + } `; const PriceContainer = styled.div` diff --git a/client/my-sites/plans-comparison/plans-comparison-row-header.tsx b/client/my-sites/plans-comparison/plans-comparison-row-header.tsx index fcfc3b5f7a49b..7239a7ae79933 100644 --- a/client/my-sites/plans-comparison/plans-comparison-row-header.tsx +++ b/client/my-sites/plans-comparison/plans-comparison-row-header.tsx @@ -10,7 +10,12 @@ interface Props { } const Details = styled.div` - margin-left: 6px; + html[dir='ltr'] & { + margin-left: 6px; + } + html[dir='rtl'] & { + margin-right: 6px; + } `; const Wrapper = styled.div` display: flex; @@ -33,7 +38,7 @@ const Title = styled.div` `; const Subtitle = styled.div` - color: var( --studio-gray-30 ); + color: var( --studio-gray-40 ); font-size: 0.75rem; font-weight: 300; `; diff --git a/client/my-sites/plans-comparison/plans-comparison-row.tsx b/client/my-sites/plans-comparison/plans-comparison-row.tsx index 4d986a4f179b4..49372150369d3 100644 --- a/client/my-sites/plans-comparison/plans-comparison-row.tsx +++ b/client/my-sites/plans-comparison/plans-comparison-row.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { intersection } from 'lodash'; -import { SCREEN_BREAKPOINT } from './constant'; +import { SCREEN_BREAKPOINT_SIGNUP, SCREEN_BREAKPOINT_PLANS } from './constant'; import { PlansComparisonRowHeader } from './plans-comparison-row-header'; import type { PlanComparisonFeature } from './plans-comparison-features'; import type { WPComPlan } from '@automattic/calypso-products'; @@ -14,26 +14,49 @@ const DesktopContent = styled.div` display: flex; flex-direction: column; - @media screen and ( max-width: ${ SCREEN_BREAKPOINT }px ) { - display: none; + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_SIGNUP }px ) { + .is-section-signup & { + display: none; + } + } + + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_PLANS }px ) { + .is-section-plans & { + display: none; + } } `; const MobileContent = styled.div` display: none; + font-weight: 500; - @media screen and ( max-width: ${ SCREEN_BREAKPOINT }px ) { - display: block; + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_SIGNUP }px ) { + .is-section-signup & { + display: block; + } + } + + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_PLANS }px ) { + .is-section-plans & { + display: block; + } } `; const Title = styled.div` gap: 0.5rem; - .gridicon { + .gridicon.gridicon { width: 1.1em; height: 1.1em; - margin: 0 5px -2px 0; + + html[dir='ltr'] & { + margin: 0 5px -2px 0; + } + html[dir='rtl'] & { + margin: 0 0 -2px 5px; + } } .gridicons-checkmark { @@ -47,8 +70,9 @@ const Title = styled.div` const Description = styled.p` font-size: 0.75rem; - color: var( --studio-gray-30 ); + color: var( --studio-gray-40 ); margin: 0; + font-weight: 400; `; function renderContent( content: ReturnType< PlanComparisonFeature[ 'getCellText' ] > ) { diff --git a/client/my-sites/plans-comparison/plans-comparison.tsx b/client/my-sites/plans-comparison/plans-comparison.tsx index 506a4e1d69e30..e16624212d7fc 100644 --- a/client/my-sites/plans-comparison/plans-comparison.tsx +++ b/client/my-sites/plans-comparison/plans-comparison.tsx @@ -12,7 +12,7 @@ import { useSelector } from 'react-redux'; import { getManagePurchaseUrlFor } from 'calypso/my-sites/purchases/paths'; import { getCurrentUserCurrencyCode } from 'calypso/state/currency-code/selectors'; import { getSitePlan } from 'calypso/state/sites/selectors'; -import { SCREEN_BREAKPOINT } from './constant'; +import { SCREEN_BREAKPOINT_SIGNUP, SCREEN_BREAKPOINT_PLANS } from './constant'; import { PlansComparisonAction } from './plans-comparison-action'; import { PlansComparisonColHeader } from './plans-comparison-col-header'; import { planComparisonFeatures } from './plans-comparison-features'; @@ -26,10 +26,28 @@ interface TableProps { planCount: number; } +const getMobileLayout = ( breakpoint: number, pageClass: string ) => ` + @media screen and ( max-width: ${ breakpoint }px ) { + ${ pageClass } & { + th.is-first, + td.is-first { + display: none; + } + + th, + td { + width: ${ ( { planCount }: { planCount: number } ) => `${ 100 / planCount }%` }; + } + } + } +`; const ComparisonTable = styled.table< TableProps >` - max-width: 100%; border-collapse: collapse; - margin: 0 auto; + + .is-section-plans & { + max-width: 950px; + margin-left: auto; + } th, td { @@ -40,11 +58,28 @@ const ComparisonTable = styled.table< TableProps >` width: ${ ( { firstColWidth, planCount } ) => `${ ( 100 - firstColWidth ) / planCount }%` }; font-size: 1rem; vertical-align: middle; + + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_SIGNUP }px ) { + .is-section-signup & { + font-size: 0.75rem; + } + } + + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_PLANS }px ) { + .is-section-plans & { + font-size: 0.75rem; + } + } + } + + thead th, + thead td { + vertical-align: top; } th:nth-of-type( even ), td:nth-of-type( even ) { - background: var( --studio-blue-0 ); + background: #f0f7fc; } th.is-first, @@ -52,22 +87,28 @@ const ComparisonTable = styled.table< TableProps >` width: ${ ( { firstColWidth } ) => `${ firstColWidth }%` }; } - .button { + tr:last-child td:last-child { + box-shadow: 0 30px #f0f7fc; + } + + th .button { width: 100%; border-radius: 4px; + font-weight: 500; } - @media screen and ( max-width: ${ SCREEN_BREAKPOINT }px ) { - th.is-first, - td.is-first { - display: none; - } + th:last-child .button { + background: #0675c4; + border-color: #0675c4; + } - th, - td { - width: ${ ( { planCount } ) => `${ 100 / planCount }%` }; - } + th:last-child .button .button:hover { + background: #055d9c; + border-color: #055d9c; } + + ${ getMobileLayout( SCREEN_BREAKPOINT_SIGNUP, '.is-section-signup' ) } + ${ getMobileLayout( SCREEN_BREAKPOINT_PLANS, '.is-section-plans' ) } `; const THead = styled.thead< { isInSignup: boolean } >` @@ -75,6 +116,33 @@ const THead = styled.thead< { isInSignup: boolean } >` top: ${ ( { isInSignup } ) => ( isInSignup ? '0' : `var( --masterbar-height )` ) }; `; +const MobileComparePlansHeader = styled.td` + display: none; + + h3 { + font-size: 1.5rem; + font-family: Recoleta; + line-height: 2; + margin-top: 0.5rem; + } + + p { + font-size: 0.875rem; + } + + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_SIGNUP }px ) { + .is-section-signup & { + display: table-cell; + } + } + + @media screen and ( max-width: ${ SCREEN_BREAKPOINT_PLANS }px ) { + .is-section-plans & { + display: table-cell; + } + } +`; + interface Props { isInSignup?: boolean; selectedSiteId?: number; @@ -142,6 +210,12 @@ export const PlansComparison: React.FunctionComponent< Props > = ( { + + +

{ translate( 'Compare plans' ) }

+

{ 'Lorem ipsum dolor sit amet, consectetur dolor sit amet adipiscing elit.' }

+ + { planComparisonFeatures.map( ( feature ) => ( ) ) } diff --git a/client/my-sites/plans/current-plan/index.jsx b/client/my-sites/plans/current-plan/index.jsx index 3fde815e9d815..0553c17de164d 100644 --- a/client/my-sites/plans/current-plan/index.jsx +++ b/client/my-sites/plans/current-plan/index.jsx @@ -265,6 +265,7 @@ class CurrentPlan extends Component { text={ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut felis et orci fringilla pretium. Consectura elit et orci fel.' } + icon="info-outline" showDismiss={ false } > ) } @@ -278,50 +279,6 @@ class CurrentPlan extends Component { ) } -
-

{ planFeaturesHeader }

-
- - - - { showDomainWarnings && ( - - ) } - - { showExpiryNotice && ( - } showDismiss={ false }> - - { translate( 'View plans' ) } - - - ) } - - - - { showJetpackChecklist && ( - - - - - ) } - { ! eligibleForManagedPlan && ( <>

{ planFeaturesHeader }

- ) } - diff --git a/client/my-sites/plans/current-plan/purchases-listing.jsx b/client/my-sites/plans/current-plan/purchases-listing.jsx index 5523c95ec47a0..628f67f2f4e12 100644 --- a/client/my-sites/plans/current-plan/purchases-listing.jsx +++ b/client/my-sites/plans/current-plan/purchases-listing.jsx @@ -174,7 +174,7 @@ class PurchasesListing extends Component { } getActionButton( purchase ) { - const { selectedSiteSlug, translate, currentUserId } = this.props; + const { selectedSiteSlug, translate, currentUserId, eligibleForManagedPlan } = this.props; // No action button if there's no site selected. if ( ! selectedSiteSlug || ! purchase ) { @@ -228,7 +228,7 @@ class PurchasesListing extends Component { : '#' } disabled={ ! userIsPurchaseOwner } - compact + compact={ ! eligibleForManagedPlan } > { label }   From 9088716dc8aa522b4bc234565173c7b8b56aea69 Mon Sep 17 00:00:00 2001 From: Claudiu Filip Date: Tue, 8 Mar 2022 17:06:10 +0200 Subject: [PATCH 3/9] Add Plan comparison toggle --- .../plans-comparison/plans-comparison.tsx | 113 ++++++++++++++++-- 1 file changed, 105 insertions(+), 8 deletions(-) diff --git a/client/my-sites/plans-comparison/plans-comparison.tsx b/client/my-sites/plans-comparison/plans-comparison.tsx index e16624212d7fc..506721101b9ff 100644 --- a/client/my-sites/plans-comparison/plans-comparison.tsx +++ b/client/my-sites/plans-comparison/plans-comparison.tsx @@ -6,8 +6,11 @@ import { TYPE_FLEXIBLE, TYPE_MANAGED, } from '@automattic/calypso-products'; +import { Gridicon } from '@automattic/components'; import styled from '@emotion/styled'; +import classNames from 'classnames'; import { useTranslate } from 'i18n-calypso'; +import { useCallback, useState } from 'react'; import { useSelector } from 'react-redux'; import { getManagePurchaseUrlFor } from 'calypso/my-sites/purchases/paths'; import { getCurrentUserCurrencyCode } from 'calypso/state/currency-code/selectors'; @@ -46,7 +49,12 @@ const ComparisonTable = styled.table< TableProps >` .is-section-plans & { max-width: 950px; - margin-left: auto; + html[dir='ltr'] & { + margin-left: auto; + } + html[dir='rtl'] & { + margin-right: auto; + } } th, @@ -87,10 +95,6 @@ const ComparisonTable = styled.table< TableProps >` width: ${ ( { firstColWidth } ) => `${ firstColWidth }%` }; } - tr:last-child td:last-child { - box-shadow: 0 30px #f0f7fc; - } - th .button { width: 100%; border-radius: 4px; @@ -107,8 +111,34 @@ const ComparisonTable = styled.table< TableProps >` border-color: #055d9c; } + .plans-comparison__rows tr:last-child { + th, + td { + border-bottom: none; + } + } + ${ getMobileLayout( SCREEN_BREAKPOINT_SIGNUP, '.is-section-signup' ) } ${ getMobileLayout( SCREEN_BREAKPOINT_PLANS, '.is-section-plans' ) } + + .plans-comparison__collapsible-rows { + display: none; + border-top: 1px solid rgba( 220, 220, 222, 0.2 ); + } + + .plans-comparison__collapsible-rows.is-active { + display: table-row-group; + animation: fade-in-rows 0.3s ease; + } + + @keyframes fade-in-rows { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } `; const THead = styled.thead< { isInSignup: boolean } >` @@ -116,6 +146,37 @@ const THead = styled.thead< { isInSignup: boolean } >` top: ${ ( { isInSignup } ) => ( isInSignup ? '0' : `var( --masterbar-height )` ) }; `; +const PlanComparisonToggle = styled.tr` + th, + td { + padding: 0; + border-bottom: none; + } + + ${ getMobileLayout( SCREEN_BREAKPOINT_SIGNUP, '.is-section-signup' ) } + ${ getMobileLayout( SCREEN_BREAKPOINT_PLANS, '.is-section-plans' ) } + + button { + background: rgba( 246, 247, 247, 0.5 ); + display: block; + text-align: center; + border-radius: 2px; + padding: 15px; + width: 100%; + margin: 25px 0; + cursor: pointer; + + .gridicon.gridicon { + html[dir='ltr'] & { + margin-right: 4px; + } + html[dir='rtl'] & { + margin-left: 4px; + } + } + } +`; + const MobileComparePlansHeader = styled.td` display: none; @@ -170,15 +231,25 @@ export const PlansComparison: React.FunctionComponent< Props > = ( { onSelectPlan, } ) => { const sitePlan = useSelector( ( state ) => getSitePlan( state, selectedSiteId || null ) ); + const [ showCollapsibleRows, setShowCollapsibleRows ] = useState( false ); const currencyCode = useSelector( getCurrentUserCurrencyCode ) ?? ''; const plans = [ getPlan( PLAN_WPCOM_FLEXIBLE ), getPlan( PLAN_WPCOM_MANAGED ) ] as WPComPlan[]; const prices: PlanPrices[] = [ { price: 0 }, usePlanPrices( plans[ 1 ], selectedSiteId ) ]; const translate = useTranslate(); + const toggleCollapsibleRows = useCallback( () => { + setShowCollapsibleRows( ! showCollapsibleRows ); + }, [ showCollapsibleRows ] ); + const manageHref = selectedSiteSlug && purchaseId ? getManagePurchaseUrlFor( selectedSiteSlug, purchaseId ) : `/plans/${ selectedSiteSlug || '' }`; + const collapsibleRowsclassName = classNames( + 'plans-comparison__rows', + 'plans-comparison__collapsible-rows', + { 'is-active': showCollapsibleRows } + ); return ( @@ -209,17 +280,43 @@ export const PlansComparison: React.FunctionComponent< Props > = ( { ) ) } - + - +

{ translate( 'Compare plans' ) }

{ 'Lorem ipsum dolor sit amet, consectetur dolor sit amet adipiscing elit.' }

 - { planComparisonFeatures.map( ( feature ) => ( + { planComparisonFeatures.slice( 0, 6 ).map( ( feature ) => ( ) ) } + + { planComparisonFeatures.slice( 6 ).map( ( feature ) => ( + + ) ) } + + + + { /* eslint-disable-next-line wpcalypso/jsx-classname-namespace */ } + + + + + + ); }; From 941803a81053a669aea5ece774373c86784bb23e Mon Sep 17 00:00:00 2001 From: Claudiu Filip Date: Tue, 8 Mar 2022 17:36:42 +0200 Subject: [PATCH 4/9] Update the first 6 features with latest copy --- .../plans-comparison-features.tsx | 189 ++++++++++-------- packages/calypso-products/src/plans-list.tsx | 2 + 2 files changed, 105 insertions(+), 86 deletions(-) diff --git a/client/my-sites/plans-comparison/plans-comparison-features.tsx b/client/my-sites/plans-comparison/plans-comparison-features.tsx index 234a12771b1cb..e4b1140289179 100644 --- a/client/my-sites/plans-comparison/plans-comparison-features.tsx +++ b/client/my-sites/plans-comparison/plans-comparison-features.tsx @@ -3,11 +3,9 @@ import { FEATURE_100K_VISITS, FEATURE_500MB_STORAGE, FEATURE_50GB_STORAGE, - FEATURE_ADDITIONAL_SITES, FEATURE_UNLIMITED_POSTS_PAGES, FEATURE_UNLIMITED_ADMINS, FEATURE_INSTALL_PLUGINS, - FEATURE_COMMUNITY_SUPPORT, FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS, FEATURE_PAYMENT_BLOCKS, FEATURE_WOOCOMMERCE, @@ -15,10 +13,11 @@ import { FEATURE_NO_ADS, FEATURE_SFTP_DATABASE, FEATURE_SITE_BACKUPS_AND_RESTORE, + FEATURE_CUSTOM_DOMAIN, + FEATURE_PREMIUM_THEMES, } from '@automattic/calypso-products'; import { Gridicon } from '@automattic/components'; import { translate, numberFormat } from 'i18n-calypso'; -import { getFeatureByKey } from 'calypso/lib/plans/features-list'; import type { TranslateResult, TranslateOptionsPlural } from 'i18n-calypso'; export interface PlanComparisonFeature { @@ -89,25 +88,111 @@ function defaultGetCellText( export const planComparisonFeatures: PlanComparisonFeature[] = [ { - title: translate( 'Sites' ), - description: translate( 'Popup text placeholder' ), - features: [ FEATURE_ADDITIONAL_SITES ], - getCellText: ( feature ) => { - const siteCount = 1; - const title = translate( '%(siteCount)s site', '%(siteCount)s sites', { - count: siteCount, - args: { siteCount }, - } ); - const desc = feature - ? translate( 'You can purchase more sites.' ) - : translate( 'You can’t purchase more sites.' ); + title: translate( 'Custom Domain Name' ), + description: translate( + 'Get a personalized online address that’s easy to remember and easy to share.' + ), + features: [ FEATURE_CUSTOM_DOMAIN ], + getCellText: ( feature, isMobile = false ) => { + if ( ! isMobile ) { + if ( feature ) { + return ( + <> + + { translate( 'Free for one year!' ) } + + ); + } - return [ title, desc ]; + return ( + <> + + { translate( 'Not included' ) } + + ); + } + + return feature + ? translate( 'Custom Domain Name is free for one year!' ) + : translate( 'Custom Domain Name is not included' ); }, }, { - title: translate( 'Visits' ), - description: translate( 'Popup text placeholder' ), + title: translate( 'Premium themes' ), + description: translate( + 'Gain access to advanced, professional & beautiful premium design templates including themes specifically tailored for businesses.' + ), + features: [ FEATURE_PREMIUM_THEMES ], + getCellText: defaultGetCellText( translate( 'Premium themes' ) ), + }, + { + title: translate( 'Unlimited Email and Live Chat Support' ), + description: translate( + 'Customer service isn’t just something we offer. It’s who we are. Over 30% of WordPress.com is dedicated to service. We call it Happiness—real support delivered by real human beings who specialize in launching and fine-tuning WordPress sites. ' + ), + features: [ FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS ], + getCellText: defaultGetCellText( translate( 'Unlimited Email and Live Chat Support' ) ), + }, + { + title: translate( 'WordPress Plugins' ), + subtitle: translate( 'Use any WordPress plugins on your site' ), + description: translate( + 'Install WordPress plugins and extend functionality for your site with access to more than 50,000 WordPress plugins' + ), + features: [ FEATURE_INSTALL_PLUGINS ], + getCellText: ( feature, isMobile = false ) => { + const pluginCount = 0; + + if ( ! isMobile ) { + return feature ? translate( 'Unlimited' ) : String( pluginCount ); + } + + return feature + ? translate( 'Unlimited WordPress Plugins' ) + : translate( '%(pluginCount)s WordPress Plugin', '%(pluginCount)s WordPress Plugins', { + count: pluginCount, + args: { pluginCount: numberFormat( pluginCount, 0 ) }, + } ); + }, + }, + { + title: translate( 'Storage space' ), + description: translate( + 'The free plan allows a maximum storage of 500MB, which equals to approximately 100 high quality images, whilst with Managed WordPress you may go all the way up to 50GB, enough space for 10,000 high quality images of the same size.' + ), + features: [ FEATURE_500MB_STORAGE, FEATURE_50GB_STORAGE ], + getCellText: ( feature, isMobile = false ) => { + let storageSize = '0.5'; + + if ( feature === FEATURE_50GB_STORAGE ) { + storageSize = '50'; + } + + if ( isMobile ) { + return translate( '%sGB of storage', { + args: [ storageSize ], + } ); + } + + return translate( '%sGB', { + args: [ storageSize ], + comment: '%s is a number of gigabytes.', + } ); + }, + }, + { + title: translate( 'Sell products with WooCommerce' ), + description: translate( + 'Includes one-click payments, premium store designs and personalized expert support.' + ), + features: [ FEATURE_WOOCOMMERCE ], + getCellText: defaultGetCellText( translate( 'Sell products with WooCommerce' ) ), + }, + { + title: translate( 'Visits per month' ), + description: translate( + "WordPress Managed bundles up to 100,000 visits a month to help you rest assured traffic won't be a concern." + ), features: [ FEATURE_10K_VISITS, FEATURE_100K_VISITS ], getCellText: ( feature, isMobile = false ) => { let visitCount = 0; @@ -159,80 +244,12 @@ export const planComparisonFeatures: PlanComparisonFeature[] = [ } ); }, }, - { - title: translate( 'WordPress plugins' ), - subtitle: translate( 'Be able to add forms, calendar, etc.' ), - features: [ FEATURE_INSTALL_PLUGINS ], - getCellText: ( feature, isMobile = false ) => { - const pluginCount = 0; - - if ( ! isMobile ) { - return feature ? translate( 'Unlimited' ) : String( pluginCount ); - } - - return feature - ? translate( 'Unlimited WordPress plugins' ) - : translate( '%(pluginCount)s WordPress plugin', '%(pluginCount)s WordPress plugins', { - count: pluginCount, - args: { pluginCount: numberFormat( pluginCount, 0 ) }, - } ); - }, - }, - { - title: translate( 'Storage' ), - description: translate( 'Upload more images, videos, audio, and documents to your website.' ), - features: [ FEATURE_500MB_STORAGE, FEATURE_50GB_STORAGE ], - getCellText: ( feature, isMobile = false ) => { - let storageSize = '0.5'; - - if ( feature === FEATURE_50GB_STORAGE ) { - storageSize = '50'; - } - - if ( isMobile ) { - return translate( '%sGB of storage', { - args: [ storageSize ], - } ); - } - - return translate( '%sGB', { - args: [ storageSize ], - comment: '%s is a number of gigabytes.', - } ); - }, - }, - { - title: translate( 'Support' ), - description: translate( 'Popup text placeholder' ), - features: [ FEATURE_COMMUNITY_SUPPORT, FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS ], - getCellText: ( feature ) => { - if ( feature === FEATURE_COMMUNITY_SUPPORT ) { - return [ - getFeatureByKey( FEATURE_COMMUNITY_SUPPORT ).getTitle(), - getFeatureByKey( FEATURE_COMMUNITY_SUPPORT ).getDescription(), - ]; - } - - return [ - getFeatureByKey( FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS ).getTitle(), - getFeatureByKey( FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS ).getDescription(), - ]; - }, - }, { title: translate( 'Payment blocks' ), description: translate( 'Popup text placeholder' ), features: [ FEATURE_PAYMENT_BLOCKS ], getCellText: defaultGetCellText( translate( 'Payment blocks' ) ), }, - { - title: translate( 'WooCommerce' ), - description: translate( - 'WooCommerce is a customizable, open-source eCommerce platform built on WordPress.' - ), - features: [ FEATURE_WOOCOMMERCE ], - getCellText: defaultGetCellText( translate( 'WooCommerce' ) ), - }, { title: translate( 'Jetpack' ), description: translate( diff --git a/packages/calypso-products/src/plans-list.tsx b/packages/calypso-products/src/plans-list.tsx index 5aea166f8c19b..3bfe4ac9bd15a 100644 --- a/packages/calypso-products/src/plans-list.tsx +++ b/packages/calypso-products/src/plans-list.tsx @@ -1619,5 +1619,7 @@ PLANS_LIST[ PLAN_WPCOM_MANAGED ] = { FEATURE_NO_ADS, FEATURE_SFTP_DATABASE, FEATURE_SITE_BACKUPS_AND_RESTORE, + FEATURE_PREMIUM_THEMES, + FEATURE_CUSTOM_DOMAIN, ], }; From e60b185d8ef5e8b6a6feced7b27ab59b81f87149 Mon Sep 17 00:00:00 2001 From: Claudiu Filip Date: Tue, 8 Mar 2022 18:28:20 +0200 Subject: [PATCH 5/9] Adds more improvements to the layout towards matching the design --- client/components/formatted-header/index.jsx | 21 +- client/my-sites/plans-comparison/index.tsx | 4 +- .../is-eligible-for-managed-plan.ts | 173 --------------- .../plans-comparison-col-header.tsx | 4 +- .../plans-comparison-row-header.tsx | 2 +- .../plans-comparison/plans-comparison.tsx | 210 +++++++++++++++++- client/my-sites/plans/main.jsx | 9 +- client/my-sites/plans/navigation.jsx | 10 +- client/signup/steps/plans/index.jsx | 22 +- 9 files changed, 254 insertions(+), 201 deletions(-) diff --git a/client/components/formatted-header/index.jsx b/client/components/formatted-header/index.jsx index d8d24e9b7d1f0..f7b1196a2130f 100644 --- a/client/components/formatted-header/index.jsx +++ b/client/components/formatted-header/index.jsx @@ -1,5 +1,6 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; +import InfoPopover from 'calypso/components/info-popover'; import { preventWidows } from 'calypso/lib/formatting'; import './style.scss'; @@ -9,6 +10,7 @@ function FormattedHeader( { id, headerText, subHeaderText, + tooltipText, className, compactOnMobile, align, @@ -24,11 +26,24 @@ function FormattedHeader( { } ); const headerClasses = classNames( 'formatted-header__title', { 'wp-brand-font': brandFont } ); + const tooltip = tooltipText && ( + + { tooltipText } + + ); return (
- { ! isSecondary &&

{ preventWidows( headerText, 2 ) }

} - { isSecondary &&

{ preventWidows( headerText, 2 ) }

} + { ! isSecondary && ( +

+ { preventWidows( headerText, 2 ) } { tooltip } +

+ ) } + { isSecondary && ( +

+ { preventWidows( headerText, 2 ) } { tooltip } +

+ ) } { subHeaderText && (

{ preventWidows( subHeaderText, 2 ) }

) } @@ -42,6 +57,7 @@ FormattedHeader.propTypes = { brandFont: PropTypes.bool, headerText: PropTypes.node, subHeaderText: PropTypes.node, + tooltipText: PropTypes.node, compactOnMobile: PropTypes.bool, isSecondary: PropTypes.bool, align: PropTypes.oneOf( [ 'center', 'left', 'right' ] ), @@ -53,6 +69,7 @@ FormattedHeader.defaultProps = { className: '', brandFont: false, subHeaderText: '', + tooltipText: '', compactOnMobile: false, isSecondary: false, align: 'center', diff --git a/client/my-sites/plans-comparison/index.tsx b/client/my-sites/plans-comparison/index.tsx index 4081baca67250..a1c2568710d03 100644 --- a/client/my-sites/plans-comparison/index.tsx +++ b/client/my-sites/plans-comparison/index.tsx @@ -1,2 +1,2 @@ -export { PlansComparison as default } from './plans-comparison'; -export { isEligibleForManagedPlan, globalOverrides } from './is-eligible-for-managed-plan'; +export { PlansComparison as default, globalOverrides } from './plans-comparison'; +export { isEligibleForManagedPlan } from './is-eligible-for-managed-plan'; diff --git a/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts b/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts index a9a06c4703a7d..5bfc1ed57004e 100644 --- a/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts +++ b/client/my-sites/plans-comparison/is-eligible-for-managed-plan.ts @@ -1,5 +1,4 @@ import { isEnabled } from '@automattic/calypso-config'; -import { css } from '@emotion/react'; import { isE2ETest } from 'calypso/lib/e2e'; import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams'; import { isJetpackSite } from 'calypso/state/sites/selectors'; @@ -16,175 +15,3 @@ export function isEligibleForManagedPlan( state: AppState, siteId?: number ): bo return isEnabled( 'plans/managed-plan' ); } - -export const globalOverrides = css` - #content.layout__content { - overflow: unset; - min-height: 100vh !important; - background: #fdfdfd; - padding-left: 0; - padding-right: 0; - padding-top: 47px; - } - - .layout__secondary { - box-shadow: 0 1px 0 1px rgba( 0, 0, 0, 0.1 ); - } - - .is-nav-unification .sidebar .sidebar__heading::after, - .is-nav-unification .sidebar .sidebar__menu-link::after { - html[dir='ltr'] & { - margin-right: -1px; - border-right-color: #fdfdfd; - } - html[dir='rtl'] & { - margin-left: -1px; - border-left-color: #fdfdfd; - } - } - - .main.is-wide-layout.is-wide-layout { - max-width: 100%; - } - - .formatted-header__title.formatted-header__title { - font-size: 1rem; - font-family: inherit !important; - font-weight: 600; - margin: 0 auto; - max-width: 1040px; - } - - .formatted-header__subtitle { - display: none; - } - - .formatted-header.formatted-header { - border-bottom: 1px solid #dcdcde; - padding-bottom: 24px; - margin: 0; - - html[dir='ltr'] & { - padding: 12px 24px 24px calc( var( --sidebar-width-min ) + 24px + 1px ); - } - html[dir='rtl'] & { - padding: 12px calc( var( --sidebar-width-min ) + 24px + 1px ) 24px 24px; - } - - @media ( max-width: 782px ) { - padding: 24px 16px; - } - } - - .plans, - .current-plan__content { - max-width: 1040px; - margin: auto; - - html[dir='ltr'] & { - padding: 0 24px 0 calc( var( --sidebar-width-min ) + 24px + 1px ); - } - html[dir='rtl'] & { - padding: 0 calc( var( --sidebar-width-min ) + 24px + 1px ) 0 24px; - } - - @media ( max-width: 782px ) { - html[dir='ltr'] &, - html[dir='rtl'] & { - padding: 0; - } - } - } - - .section-nav.section-nav { - box-shadow: none; - background: none; - margin: 16px 0 32px; - } - - .section-nav-tab { - opacity: 0.7; - } - - .section-nav-tab.is-selected, - .section-nav-tab:hover { - opacity: 1; - } - - .section-nav-tab__link { - font-size: 16px; - } - - .section-nav-tab__link, - .section-nav-tab__link:hover, - .section-nav-tab__link:focus, - .section-nav-tab__link:active { - color: inherit !important; - background: none !important; - } - - .section-nav-tab:hover:not( .is-selected ) { - border-bottom-color: transparent; - } - - .my-plan-card__icon { - display: none; - } - - .my-plan-card__title { - font-family: Recoleta; - font-size: 1.5rem; - margin-bottom: 0.5rem; - } - - .notice.notice { - color: inherit; - } - - .notice.is-info { - background: #f6f7f7; - } - - .notice__content.notice__content { - html[dir='ltr'] & { - padding: 10px 10px 10px 0; - } - html[dir='rtl'] & { - padding: 10px 0 10px 10px; - } - } - - .notice.is-info .notice__icon-wrapper.notice__icon-wrapper { - background: none; - width: 40px; - } - - .notice .gridicons-info-outline { - fill: #008a20; - } - - .my-plan-card.card { - flex-direction: column; - justify-content: stretch; - } - - .my-plan-card__primary { - min-width: 60%; - } - - .my-plan-card__details { - display: none; - } - - .popover__arrow { - display: none; - } - .popover.info-popover__tooltip .popover__inner { - background: var( --studio-gray-100 ); - color: #fff; - border: none; - padding: 8px 10px; - border-radius: 4px; - font-size: 0.75rem; - } -`; diff --git a/client/my-sites/plans-comparison/plans-comparison-col-header.tsx b/client/my-sites/plans-comparison/plans-comparison-col-header.tsx index df045b786b977..c867cf191ed1c 100644 --- a/client/my-sites/plans-comparison/plans-comparison-col-header.tsx +++ b/client/my-sites/plans-comparison/plans-comparison-col-header.tsx @@ -37,7 +37,7 @@ const PlanDescription = styled.p` color: var( --studio-gray-50 ); font-size: 0.875rem; font-weight: 400; - margin: 0 0 1rem; + margin: 0 0 1.5rem; @media screen and ( max-width: ${ SCREEN_BREAKPOINT_SIGNUP }px ) { .is-section-signup & { @@ -68,7 +68,7 @@ const BillingTimeFrame = styled.div` color: var( --studio-gray-40 ); font-size: 0.75rem; font-weight: 500; - margin: 0.5rem 0; + margin: 0.5rem 0 1rem; `; export const PlansComparisonColHeader: React.FunctionComponent< Props > = ( { diff --git a/client/my-sites/plans-comparison/plans-comparison-row-header.tsx b/client/my-sites/plans-comparison/plans-comparison-row-header.tsx index 7239a7ae79933..a833188a7c9d2 100644 --- a/client/my-sites/plans-comparison/plans-comparison-row-header.tsx +++ b/client/my-sites/plans-comparison/plans-comparison-row-header.tsx @@ -52,7 +52,7 @@ export const PlansComparisonRowHeader: React.FunctionComponent< Props > = ( { return ( - + { description }
diff --git a/client/my-sites/plans-comparison/plans-comparison.tsx b/client/my-sites/plans-comparison/plans-comparison.tsx index 506721101b9ff..6b042349a112f 100644 --- a/client/my-sites/plans-comparison/plans-comparison.tsx +++ b/client/my-sites/plans-comparison/plans-comparison.tsx @@ -7,6 +7,7 @@ import { TYPE_MANAGED, } from '@automattic/calypso-products'; import { Gridicon } from '@automattic/components'; +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import classNames from 'classnames'; import { useTranslate } from 'i18n-calypso'; @@ -29,7 +30,7 @@ interface TableProps { planCount: number; } -const getMobileLayout = ( breakpoint: number, pageClass: string ) => ` +const getRowMobileLayout = ( breakpoint: number, pageClass: string ) => ` @media screen and ( max-width: ${ breakpoint }px ) { ${ pageClass } & { th.is-first, @@ -44,6 +45,187 @@ const getMobileLayout = ( breakpoint: number, pageClass: string ) => ` } } `; + +export const globalOverrides = css` + #content.layout__content { + overflow: unset; + min-height: 100vh !important; + background: #fdfdfd; + padding-left: 0; + padding-right: 0; + padding-top: 47px; + } + + .layout__secondary { + box-shadow: 0 1px 0 1px rgba( 0, 0, 0, 0.1 ); + } + + .is-nav-unification .sidebar .sidebar__heading::after, + .is-nav-unification .sidebar .sidebar__menu-link::after { + html[dir='ltr'] & { + margin-right: -1px; + border-right-color: #fdfdfd; + } + html[dir='rtl'] & { + margin-left: -1px; + border-left-color: #fdfdfd; + } + } + + .main.is-wide-layout.is-wide-layout { + max-width: 100%; + } + + .formatted-header__title.formatted-header__title { + font-size: 1rem; + font-family: inherit !important; + font-weight: 600; + margin: 0 auto; + max-width: 1040px; + + .gridicon { + margin-bottom: -2px; + fill: rgba( 140, 143, 148, 1 ); + } + } + + .formatted-header__subtitle { + display: none; + } + + .formatted-header.formatted-header { + border-bottom: 1px solid #dcdcde; + padding-bottom: 24px; + margin: 0; + + html[dir='ltr'] & { + padding: 12px 24px 24px calc( var( --sidebar-width-min ) + 24px + 1px ); + } + html[dir='rtl'] & { + padding: 12px calc( var( --sidebar-width-min ) + 24px + 1px ) 24px 24px; + } + + @media ( max-width: 782px ) { + html[dir='ltr'] &, + html[dir='rtl'] & { + padding: 24px 16px; + } + } + } + + .plans, + .current-plan__content { + max-width: 1040px; + margin: auto; + + html[dir='ltr'] & { + padding: 0 24px 0 calc( var( --sidebar-width-min ) + 24px + 1px ); + } + html[dir='rtl'] & { + padding: 0 calc( var( --sidebar-width-min ) + 24px + 1px ) 0 24px; + } + + @media ( max-width: 782px ) { + html[dir='ltr'] &, + html[dir='rtl'] & { + padding: 0; + } + } + } + + .section-nav.section-nav { + box-shadow: none; + background: none; + margin: 16px 0 32px; + } + + .section-nav-tab { + opacity: 0.7; + } + + .section-nav-tab.is-selected, + .section-nav-tab:hover { + opacity: 1; + } + + .section-nav-tab__link { + font-size: 16px; + } + + .section-nav-tab__link, + .section-nav-tab__link:hover, + .section-nav-tab__link:focus, + .section-nav-tab__link:active { + color: inherit !important; + background: none !important; + } + + .section-nav-tab:hover:not( .is-selected ) { + border-bottom-color: transparent; + } + + .my-plan-card__icon { + display: none; + } + + .my-plan-card__title { + font-family: Recoleta; + font-size: 1.5rem; + margin-bottom: 0.5rem; + } + + .notice.notice { + color: inherit; + } + + .notice.is-info { + background: #f6f7f7; + } + + .notice__content.notice__content { + html[dir='ltr'] & { + padding: 10px 10px 10px 0; + } + html[dir='rtl'] & { + padding: 10px 0 10px 10px; + } + } + + .notice.is-info .notice__icon-wrapper.notice__icon-wrapper { + background: none; + width: 40px; + } + + .notice .gridicons-info-outline { + fill: #008a20; + } + + .my-plan-card.my-plan-card.card { + flex-direction: column; + justify-content: stretch; + } + + .my-plan-card__primary.my-plan-card__primary { + min-width: 60%; + } + + .my-plan-card__details.my-plan-card__details { + display: none; + } + + .popover__arrow { + display: none; + } + .popover.info-popover__tooltip .popover__inner.popover__inner { + background: var( --studio-gray-100 ); + color: #fff; + border: none; + padding: 8px 10px; + border-radius: 4px; + font-size: 0.75rem; + } +`; + const ComparisonTable = styled.table< TableProps >` border-collapse: collapse; @@ -61,20 +243,22 @@ const ComparisonTable = styled.table< TableProps >` td { background: #fdfdfd; border-bottom: 1px solid rgba( 220, 220, 222, 0.2 ); - padding: 1rem; + padding: 1.25rem; min-height: 2rem; width: ${ ( { firstColWidth, planCount } ) => `${ ( 100 - firstColWidth ) / planCount }%` }; - font-size: 1rem; + font-size: 0.875rem; vertical-align: middle; @media screen and ( max-width: ${ SCREEN_BREAKPOINT_SIGNUP }px ) { .is-section-signup & { + width: 50%; font-size: 0.75rem; } } @media screen and ( max-width: ${ SCREEN_BREAKPOINT_PLANS }px ) { .is-section-plans & { + width: 50%; font-size: 0.75rem; } } @@ -83,6 +267,18 @@ const ComparisonTable = styled.table< TableProps >` thead th, thead td { vertical-align: top; + border-bottom: none; + @media screen and ( min-width: ${ SCREEN_BREAKPOINT_SIGNUP + 1 }px ) { + .is-section-signup & { + padding-bottom: 3.6rem; + } + } + + @media screen and ( min-width: ${ SCREEN_BREAKPOINT_PLANS + 1 }px ) { + .is-section-plans & { + padding-bottom: 3.6rem; + } + } } th:nth-of-type( even ), @@ -118,8 +314,8 @@ const ComparisonTable = styled.table< TableProps >` } } - ${ getMobileLayout( SCREEN_BREAKPOINT_SIGNUP, '.is-section-signup' ) } - ${ getMobileLayout( SCREEN_BREAKPOINT_PLANS, '.is-section-plans' ) } + ${ getRowMobileLayout( SCREEN_BREAKPOINT_SIGNUP, '.is-section-signup' ) } + ${ getRowMobileLayout( SCREEN_BREAKPOINT_PLANS, '.is-section-plans' ) } .plans-comparison__collapsible-rows { display: none; @@ -153,8 +349,8 @@ const PlanComparisonToggle = styled.tr` border-bottom: none; } - ${ getMobileLayout( SCREEN_BREAKPOINT_SIGNUP, '.is-section-signup' ) } - ${ getMobileLayout( SCREEN_BREAKPOINT_PLANS, '.is-section-plans' ) } + ${ getRowMobileLayout( SCREEN_BREAKPOINT_SIGNUP, '.is-section-signup' ) } + ${ getRowMobileLayout( SCREEN_BREAKPOINT_PLANS, '.is-section-plans' ) } button { background: rgba( 246, 247, 247, 0.5 ); diff --git a/client/my-sites/plans/main.jsx b/client/my-sites/plans/main.jsx index 6cf8cf0b7ea74..c2e5343cd3106 100644 --- a/client/my-sites/plans/main.jsx +++ b/client/my-sites/plans/main.jsx @@ -207,7 +207,9 @@ class Plans extends Component { if ( ! selectedSite || this.isInvalidPlanInterval() || ! currentPlan ) { return this.renderPlaceholder(); } - + const description = translate( + 'See and compare the features available on each WordPress.com plan.' + ); return (
{ selectedSite.ID && } @@ -230,9 +232,8 @@ class Plans extends Component {
diff --git a/client/my-sites/plans/navigation.jsx b/client/my-sites/plans/navigation.jsx index 9e541433c0c48..35c4dd3240d38 100644 --- a/client/my-sites/plans/navigation.jsx +++ b/client/my-sites/plans/navigation.jsx @@ -39,7 +39,13 @@ class PlansNavigation extends Component { } render() { - const { site, shouldShowMyPlan, shouldShowPlans, translate } = this.props; + const { + site, + shouldShowMyPlan, + shouldShowPlans, + translate, + eligibleForManagedPlan, + } = this.props; const path = sectionify( this.props.path ); const sectionTitle = this.getSectionTitle( path ); const hasPinnedItems = isMobile() && site; @@ -63,7 +69,7 @@ class PlansNavigation extends Component { path === '/plans' || path === '/plans/monthly' || path === '/plans/yearly' } > - { translate( 'Plans' ) } + { eligibleForManagedPlan ? translate( 'New Plans' ) : translate( 'Plans' ) } ) } diff --git a/client/signup/steps/plans/index.jsx b/client/signup/steps/plans/index.jsx index 6abf64ec61d83..8e8bd3627a30b 100644 --- a/client/signup/steps/plans/index.jsx +++ b/client/signup/steps/plans/index.jsx @@ -136,6 +136,7 @@ export class PlansStep extends Component { showTreatmentPlansReorderTest, isInVerticalScrollingPlansExperiment, isReskinned, + eligibleForManagedPlan, } = this.props; let errorDisplay; @@ -153,7 +154,7 @@ export class PlansStep extends Component { return this.renderLoading(); } - if ( this.props.isEligibleForManagedPlan ) { + if ( eligibleForManagedPlan ) { return (
{ errorDisplay } @@ -278,7 +279,11 @@ export class PlansStep extends Component { } getHeaderText() { - const { headerText, translate } = this.props; + const { headerText, translate, eligibleForManagedPlan } = this.props; + + if ( eligibleForManagedPlan ) { + return translate( 'Managed WordPress made just for you' ); + } if ( this.state.isDesktop ) { return translate( 'Choose a plan' ); @@ -288,9 +293,13 @@ export class PlansStep extends Component { } getSubHeaderText() { - const { hideFreePlan, subHeaderText, translate } = this.props; + const { hideFreePlan, subHeaderText, translate, eligibleForManagedPlan } = this.props; + + if ( eligibleForManagedPlan ) { + return translate( 'Try risk-free with a 14-day money back guarantee' ); + } - if ( ! hideFreePlan && ! this.props.isEligibleForManagedPlan ) { + if ( ! hideFreePlan ) { if ( this.state.isDesktop ) { return translate( "Pick one that's right for you and unlock features that help you grow. Or {{link}}start with a free site{{/link}}.", @@ -447,10 +456,7 @@ export default connect( // treatment for the `vertical_plan_listing_v2` experiment is implemented. isInVerticalScrollingPlansExperiment: true, plansLoaded: Boolean( getPlanSlug( state, getPlan( PLAN_FREE )?.getProductId() || 0 ) ), - isEligibleForManagedPlan: isEligibleForManagedPlan( - state, - getSiteBySlug( state, siteSlug )?.ID - ), + eligibleForManagedPlan: isEligibleForManagedPlan( state, getSiteBySlug( state, siteSlug )?.ID ), } ), { recordTracksEvent, saveSignupStep, submitSignupStep } )( localize( PlansStep ) ); From 6598d975e9b16d358c3b8a3f596ab91bd88c96e4 Mon Sep 17 00:00:00 2001 From: Claudiu Filip Date: Wed, 9 Mar 2022 12:38:08 +0200 Subject: [PATCH 6/9] Update FormattedHeader-related snapshot to include the new, optional, tooltip property --- .../jetpack-connect/test/__snapshots__/auth-form-header.js.snap | 1 + config/development.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/jetpack-connect/test/__snapshots__/auth-form-header.js.snap b/client/jetpack-connect/test/__snapshots__/auth-form-header.js.snap index 968705ce36d98..9b52529c5697a 100644 --- a/client/jetpack-connect/test/__snapshots__/auth-form-header.js.snap +++ b/client/jetpack-connect/test/__snapshots__/auth-form-header.js.snap @@ -11,6 +11,7 @@ exports[`AuthFormHeader renders as expected 1`] = ` id="" isSecondary={false} subHeaderText="You are moments away from a better WordPress." + tooltipText="" /> Date: Wed, 9 Mar 2022 13:00:06 +0200 Subject: [PATCH 7/9] Restore development feature flag --- config/development.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/development.json b/config/development.json index a107e4ec83e64..0734990923d24 100644 --- a/config/development.json +++ b/config/development.json @@ -104,7 +104,7 @@ "p2/preapproved-domains": true, "page/export": true, "plans/personal-plan": true, - "plans/managed-plan": false, + "plans/managed-plan": true, "post-editor/checkout-overlay": true, "press-this": true, "publicize-preview": true, From 4b88d94c483155e3e436d2ee4e3a954554e2cd82 Mon Sep 17 00:00:00 2001 From: Claudiu Filip Date: Wed, 9 Mar 2022 14:05:05 +0200 Subject: [PATCH 8/9] Replace lodash isNumber usage --- client/my-sites/plan-price/index.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/my-sites/plan-price/index.jsx b/client/my-sites/plan-price/index.jsx index 7a494b213ac1c..6b8d89f91fb3a 100644 --- a/client/my-sites/plan-price/index.jsx +++ b/client/my-sites/plan-price/index.jsx @@ -1,7 +1,6 @@ import { getCurrencyObject } from '@automattic/format-currency'; import classNames from 'classnames'; import { localize } from 'i18n-calypso'; -import { isNumber } from 'lodash'; import PropTypes from 'prop-types'; import { Component } from 'react'; import Badge from 'calypso/components/badge'; @@ -23,7 +22,7 @@ export class PlanPrice extends Component { translate, } = this.props; - if ( ! currencyCode || ! isNumber( rawPrice ) ) { + if ( ! currencyCode || ! typeof rawPrice === 'number' ) { return null; } From db5cb33073be601abe0fb7e171bd46c172c0be1b Mon Sep 17 00:00:00 2001 From: Claudiu Filip Date: Wed, 9 Mar 2022 16:50:47 +0200 Subject: [PATCH 9/9] Fix faulty number type check for rawPrice --- client/my-sites/plan-price/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/plan-price/index.jsx b/client/my-sites/plan-price/index.jsx index 6b8d89f91fb3a..5bdc418bf85a7 100644 --- a/client/my-sites/plan-price/index.jsx +++ b/client/my-sites/plan-price/index.jsx @@ -22,7 +22,7 @@ export class PlanPrice extends Component { translate, } = this.props; - if ( ! currencyCode || ! typeof rawPrice === 'number' ) { + if ( ! currencyCode || ! ( typeof rawPrice === 'number' ) ) { return null; }