From 5e5a46ceddc6d563af11158423c09913af03721b Mon Sep 17 00:00:00 2001
From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com>
Date: Fri, 20 Sep 2024 10:04:50 -0600
Subject: [PATCH] Add default jetpack icon on iconless sites in My Purchases

---
 client/assets/images/icons/jetpack-icon.svg |  6 ++++
 client/me/purchases/purchase-item/index.jsx | 33 +++++++++++++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 client/assets/images/icons/jetpack-icon.svg

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 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.42857" y="0.428711" width="80.1429" height="80.1429" rx="9.42857" fill="#2C3338"/>
+<path d="M40.5 65.6431C54.3861 65.6431 65.6429 54.3863 65.6429 40.5003C65.6429 26.6143 54.3861 15.3574 40.5 15.3574C26.614 15.3574 15.3572 26.6143 15.3572 40.5003C15.3572 54.3863 26.614 65.6431 40.5 65.6431Z" fill="#069E08"/>
+<path d="M41.7472 36.2778V60.653L54.3186 36.2778H41.7472Z" fill="white"/>
+<path d="M39.2047 44.6743V20.3472L26.6813 44.6743H39.2047Z" fill="white"/>
+</svg>
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 (
+				<div className="purchase-item__static-icon">
+					<img src={ jetpackIcon } alt="Jetpack icon" />;
+				</div>
+			);
+		}
+
 		return <SiteIcon site={ site } size={ 36 } />;
 	};
 
@@ -654,4 +671,16 @@ PurchaseItem.propTypes = {
 	isBackupMethodAvailable: PropTypes.bool,
 };
 
-export default localize( withLocalizedMoment( PurchaseItem ) );
+export default connect( ( state, { site } ) => {
+	const stateSite = getSite( state, get( site, 'ID' ) );
+
+	if ( ! stateSite ) {
+		return {
+			iconUrl: site?.icon?.img,
+		};
+	}
+
+	return {
+		iconUrl: getSiteIconUrl( state, stateSite.ID ),
+	};
+} )( localize( withLocalizedMoment( PurchaseItem ) ) );