Social: Replace ConnectionIcon component with the implementation of ConnectionImage component (#45972)

* Social: Replace ConnectionIcon component with the implementation of ConnectionImage component.

* Fix story import

Author: manzoorwanijk

projects/js-packages/publicize-components/changelog/update-social-replace-connection-icon-component

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Replace ConnectionIcon component with the implementation of ConnectionImage component.

projects/js-packages/publicize-components/src/components/connection-icon/index.jsx

@@ -0,0 +1,47 @@
+import { SocialServiceIcon } from '@automattic/jetpack-components';
+import { useCallback, useState } from '@wordpress/element';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+
+export type ConnectionIconProps = {
+	serviceName: string;
+	label: string;
+	profilePicture: string;
+	disabled?: boolean;
+};
+
+/**
+ * The component to render a social media connection icon.
+ * @param {ConnectionIconProps} props - Component props.
+ * @return React element
+ */
+export function ConnectionIcon( {
+	label,
+	serviceName,
+	profilePicture,
+	disabled,
+}: ConnectionIconProps ) {
+	const [ imageErrorFor, setImageErrorFor ] = useState( null );
+
+	const onError = useCallback( () => setImageErrorFor( profilePicture ), [ profilePicture ] );
+
+	const hasDisplayPicture = !! profilePicture && imageErrorFor !== profilePicture;
+
+	const service_name = (
+		'instagram-business' === serviceName ? 'instagram' : serviceName
+	) as React.ComponentProps< typeof SocialServiceIcon >[ 'serviceName' ];
+
+	return (
+		<div
+			className={ clsx( styles.wrapper, {
+				[ styles[ 'has-picture' ] ]: hasDisplayPicture,
+				[ styles.disabled ]: disabled,
+			} ) }
+		>
+			{ hasDisplayPicture && <img src={ profilePicture } alt={ label } onError={ onError } /> }
+			<SocialServiceIcon serviceName={ service_name } className={ styles[ 'social-icon' ] } />
+		</div>
+	);
+}
+
+export default ConnectionIcon;

projects/js-packages/publicize-components/src/components/connection-icon/index.tsx

@@ -1,4 +1,4 @@
-import ConnectionIcon from '../index.jsx';
+import ConnectionIcon from '../index.tsx';
 import '../../../../../social-logos/src/social-logo-colors.css';
 
 export default {
@@ -12,7 +12,7 @@ export default {
 			options: [
 				'facebook',
 				'x',
-				'instagram',
+				'instagram-business',
 				'linkedin',
 				'nextdoor',
 				'tumblr',
@@ -29,7 +29,6 @@ export const _default = Template.bind( {} );
 _default.args = {
 	serviceName: 'tumblr',
 	label: 'Jetpack Social',
-	checked: true,
 	profilePicture:
 		'https://gravatar.com/avatar/5a5f21e099ba62ae525e62cd1ad859985c8170b8811431e7fa6ccbc9da22405b',
 };

projects/js-packages/publicize-components/src/components/connection-icon/stories/index.stories.jsx

@@ -3,7 +3,7 @@ import { FormToggle, MenuGroup, MenuItem } from '@wordpress/components';
 import { useCallback } from 'react';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { Connection } from '../../social-store/types';
-import { ConnectionImage } from '../connection-image';
+import { ConnectionIcon } from '../connection-icon';
 import { useConnectionState } from '../form/use-connection-state';
 import styles from './styles.module.scss';
 
@@ -55,10 +55,10 @@ export function ConnectionsToggleList() {
 						className={ styles.item }
 					>
 						<div className={ styles[ 'item-content' ] }>
-							<ConnectionImage
-								service_name={ connection.service_name }
-								display_name={ connection.display_name }
-								profile_picture={ connection.profile_picture }
+							<ConnectionIcon
+								serviceName={ connection.service_name }
+								label={ connection.display_name }
+								profilePicture={ connection.profile_picture }
 								disabled={ isDisabled }
 							/>
 							<div className={ styles[ 'display-name' ] } title={ connection.display_name }>