Use ProductIcon from @automattic/components instead of internal compo…

…nents (#38474)

* Use ProductIcon from @automattic/components instead of internal component

* Remove unused component

* Use ProductIcon instead of PlanIcon in PlanFeaturesHeader

* Replace PlanIcon with ProductIcon in Banner component

* Replace PlanIcon with ProductIcon in PurchaseItem

* Replace PlanIcon with ProductIcon in ManagePurchase

* Replace PlanIcon with ProductIcon in PlanThankYouCard

* Replace PlanIcon with ProductIcon in UpgradeNudgeExpanded

* Remove unused PlanIcon component

* Remove `getProductIconSlug` facade thanks to the new `ProductIcon` API

* Purchases: Restore original plan class on purchase item icons

Co-authored-by: Marin Atanasov <tyxla@abv.bg>

client/blocks/plan-thank-you-card/index.jsx

@@ -11,13 +11,13 @@ import formatCurrency from '@automattic/format-currency';
 /**
  * Internal dependencies
  */
+import { ProductIcon } from '@automattic/components';
 import getRawSite from 'state/selectors/get-raw-site';
 import { getCurrentPlan } from 'state/sites/plans/selectors';
 import QuerySites from 'components/data/query-sites';
 import QuerySitePlans from 'components/data/query-site-plans';
 import { getPlan, getPlanClass } from 'lib/plans';
 import ThankYouCard from 'components/thank-you-card';
-import PlanIcon from 'components/plans/plan-icon';
 
 /**
  * Style dependencies
@@ -60,7 +60,7 @@ class PlanThankYouCard extends Component {
 			return null;
 		}
 
-		return <PlanIcon plan={ plan.productSlug } />;
+		return <ProductIcon slug={ plan.productSlug } />;
 	}
 
 	renderAction() {

client/blocks/upgrade-nudge-expanded/index.jsx

@@ -13,7 +13,7 @@ import formatCurrency from '@automattic/format-currency';
 /**
  * Internal dependencies
  */
-import { Card } from '@automattic/components';
+import { Card, ProductIcon } from '@automattic/components';
 import QueryPlans from 'components/data/query-plans';
 import PlanCompareCard from 'my-sites/plan-compare-card';
 import PlanCompareCardItem from 'my-sites/plan-compare-card/item';
@@ -26,7 +26,6 @@ import { PLAN_PERSONAL } from 'lib/plans/constants';
 import { getSitePlan, getSiteSlug } from 'state/sites/selectors';
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { recordTracksEvent } from 'state/analytics/actions';
-import PlanIcon from 'components/plans/plan-icon';
 
 /**
  * Style dependencies
@@ -98,10 +97,12 @@ class UpgradeNudgeExpanded extends Component {
 					{ this.props.title && (
 						<div className="upgrade-nudge-expanded__title">
 							<div className="upgrade-nudge-expanded__title-plan">
-								<PlanIcon
-									plan={ this.props.plan.product_slug }
-									className="upgrade-nudge-expanded__title-plan-icon"
-								/>
+								{ this.props.plan.product_slug && (
+									<ProductIcon
+										slug={ this.props.plan.product_slug }
+										className="upgrade-nudge-expanded__title-plan-icon"
+									/>
+								) }
 							</div>
 							<p className="upgrade-nudge-expanded__title-message">{ this.props.title }</p>
 						</div>

client/components/banner/index.jsx

@@ -26,9 +26,8 @@ import { addQueryArgs } from 'lib/url';
 import { recordTracksEvent } from 'state/analytics/actions';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
 import canCurrentUser from 'state/selectors/can-current-user';
-import { Button, Card } from '@automattic/components';
+import { Button, Card, ProductIcon } from '@automattic/components';
 import DismissibleCard from 'blocks/dismissible-card';
-import PlanIcon from 'components/plans/plan-icon';
 import PlanPrice from 'my-sites/plan-price';
 import TrackComponentView from 'lib/analytics/track-component-view';
 
@@ -143,7 +142,7 @@ export class Banner extends Component {
 		if ( plan && ! icon ) {
 			return (
 				<div className="banner__icon-plan">
-					<PlanIcon plan={ plan } />
+					<ProductIcon slug={ plan } />
 				</div>
 			);
 		}

client/components/banner/style.scss

@@ -143,7 +143,7 @@
 	margin-right: 16px;
 	flex-shrink: 0;
 
-	.plan-icon {
+	.product-icon {
 		height: 32px;
 		width: 32px;
 	}