Merge pull request #158 from Automattic/update/handle-calendly

Show Calendly in Contacts if available

Author: jcheringer

web/packages/hovercards/playground/core.ts

@@ -48,6 +48,13 @@ addEventListener( 'DOMContentLoaded', () => {
 					url: 'https://instagram.com/jc.heringer',
 					isHidden: false,
 				},
+				{
+					type: 'calendly',
+					label: 'Calendly',
+					icon: 'https://gravatar.com/icons/calendly.svg',
+					url: 'https://calendly.com/joao-heringer',
+					isHidden: false,
+				},
 				{
 					type: 'wordpress',
 					label: 'WordPress',

web/packages/hovercards/src/core.ts

@@ -27,6 +27,7 @@ export type ContactInfo = Partial< {
 	email: string;
 	contact_form: string;
 	calendar: string;
+	calendly: string;
 } >;
 
 export interface PaymentLink {
@@ -292,6 +293,11 @@ export default class Hovercards {
 		const hovercard = dc.createElement( 'div' );
 		hovercard.className = `gravatar-hovercard${ additionalClass ? ` ${ additionalClass }` : '' }`;
 
+		const calendly = verifiedAccounts.find( ( account ) => account.type === 'calendly' && ! account.isHidden );
+		if ( contactInfo && calendly ) {
+			contactInfo.calendly = calendly.url;
+		}
+
 		const trackedProfileUrl = escUrl( addQueryArg( profileUrl, 'utm_source', 'hovercard' ) );
 		const username = escHtml( displayName );
 		const isEditProfile = ! description && myHash === hash;
@@ -512,6 +518,7 @@ export default class Hovercards {
 			cell_phone: 'icons/mobile-phone.svg',
 			contact_form: 'icons/envelope.svg',
 			calendar: 'icons/calendar.svg',
+			calendly: 'icons/calendly.svg',
 		};
 
 		const getUrl = ( type: string, value: string ) => {
@@ -520,6 +527,7 @@ export default class Hovercards {
 					return `mailto:${ value }`;
 				case 'contact_form':
 				case 'calendar':
+				case 'calendly':
 					return value.startsWith( 'http' ) ? value : `https://${ value }`;
 				default:
 					return null;