diff --git a/client/assets/images/icons/jetpack-icon.svg b/client/assets/images/icons/jetpack-icon.svg new file mode 100644 index 00000000000000..92e7ca642e5065 --- /dev/null +++ b/client/assets/images/icons/jetpack-icon.svg @@ -0,0 +1,6 @@ + diff --git a/client/me/purchases/purchase-item/index.jsx b/client/me/purchases/purchase-item/index.jsx index 1848d77929e356..7862b584b0f8c1 100644 --- a/client/me/purchases/purchase-item/index.jsx +++ b/client/me/purchases/purchase-item/index.jsx @@ -6,6 +6,8 @@ import { PLAN_ANNUAL_PERIOD, PLAN_BIENNIAL_PERIOD, PLAN_TRIENNIAL_PERIOD, + isJetpackPlan, + isJetpackProduct, } from '@automattic/calypso-products'; import page from '@automattic/calypso-router'; import { CompactCard, Gridicon } from '@automattic/components'; @@ -15,9 +17,12 @@ import { ExternalLink } from '@wordpress/components'; import { Icon, warning as warningIcon } from '@wordpress/icons'; import clsx from 'clsx'; import { localize, useTranslate } from 'i18n-calypso'; +import { get } from 'lodash'; import PropTypes from 'prop-types'; import { Component } from 'react'; +import { connect } from 'react-redux'; import akismetIcon from 'calypso/assets/images/icons/akismet-icon.svg'; +import jetpackIcon from 'calypso/assets/images/icons/jetpack-icon.svg'; import payPalImage from 'calypso/assets/images/upgrades/paypal-full.svg'; import upiImage from 'calypso/assets/images/upgrades/upi.svg'; import SiteIcon from 'calypso/blocks/site-icon'; @@ -44,6 +49,8 @@ import { hasPaymentMethod, } from 'calypso/lib/purchases'; import { getPurchaseListUrlFor } from 'calypso/my-sites/purchases/paths'; +import getSiteIconUrl from 'calypso/state/selectors/get-site-icon-url'; +import { getSite } from 'calypso/state/sites/selectors'; import { isTemporarySitePurchase, isJetpackTemporarySitePurchase, @@ -519,7 +526,7 @@ class PurchaseItem extends Component { } getSiteIcon = () => { - const { site, isDisconnectedSite, purchase } = this.props; + const { site, isDisconnectedSite, purchase, iconUrl } = this.props; if ( isAkismetTemporarySitePurchase( purchase ) ) { return ( @@ -541,6 +548,16 @@ class PurchaseItem extends Component { ); } + const isJetpackPurchase = isJetpackProduct( purchase ) || isJetpackPlan( purchase ); + + if ( ! iconUrl && isJetpackPurchase ) { + return ( +