Resolving merge conflicts

client/a8c-for-agencies/components/a4a-migration-offer-v2/migration-contact-support-form/index.tsx

@@ -124,6 +124,7 @@ export default function MigrationContactSupportForm( { show, onClose }: Props )
 			name,
 			email,
 			product,
+			agency_id: agency?.id,
 			no_of_sites: site,
 			...( pressableContactType && { contact_type: pressableContactType } ),
 			...( pressable_id && { pressable_id } ),

client/a8c-for-agencies/components/agency-site-tag/index.tsx

@@ -5,17 +5,20 @@ import './style.scss';
 interface Props {
 	tag: string;
 	onRemoveTag: ( tag: string ) => void;
+	isRemovable?: boolean;
 }
 
-export default function AgencySiteTag( { tag, onRemoveTag }: Props ) {
+export default function AgencySiteTag( { tag, onRemoveTag, isRemovable = true }: Props ) {
 	return (
 		<Badge className="agency-site-tag" type="info">
 			<span className="agency-site-tag__text">{ tag }</span>
-			<Icon
-				className="agency-site-tag__close"
-				onClick={ () => onRemoveTag( tag ) }
-				icon={ closeSmall }
-			/>
+			{ isRemovable && (
+				<Icon
+					className="agency-site-tag__close"
+					onClick={ () => onRemoveTag( tag ) }
+					icon={ closeSmall }
+				/>
+			) }
 		</Badge>
 	);
 }

client/a8c-for-agencies/components/agency-site-tags/index.tsx

@@ -63,8 +63,13 @@ export default function AgencySiteTags( { tags, isLoading, onAddTags, onRemoveTa
 			{ tags.length ? (
 				<Card tagName="ul" className="agency-site-tags__list">
 					{ tags.map( ( tag ) => (
-						<li>
-							<AgencySiteTag key={ tag } tag={ tag } onRemoveTag={ onRemoveTag } />
+						<li key={ tag }>
+							<AgencySiteTag
+								key={ tag }
+								tag={ tag }
+								onRemoveTag={ onRemoveTag }
+								isRemovable={ tag !== 'a4a_self_migrated_site' }
+							/>
 						</li>
 					) ) }
 				</Card>

client/a8c-for-agencies/components/user-contact-support-modal-form/index.tsx

@@ -130,6 +130,7 @@ export default function UserContactSupportModalForm( {
 			name,
 			email,
 			product,
+			agency_id: agency?.id,
 			...( site && { site } ),
 			...( pressableContactType && { contact_type: pressableContactType } ),
 			...( pressable_id && { pressable_id } ),

client/a8c-for-agencies/data/support/types.ts

@@ -10,6 +10,7 @@ export interface SubmitContactSupportParams {
 	email: string;
 	message: string;
 	product: string;
+	agency_id: number | undefined;
 	site?: string;
 	no_of_sites?: number;
 	contact_type?: string;

client/a8c-for-agencies/data/support/use-submit-support-form-mutation.ts

@@ -9,7 +9,7 @@ interface APIResponse {
 function mutationSubmitSupportForm( params: SubmitContactSupportParams ): Promise< APIResponse > {
 	let path = '/agency/help/zendesk/create-ticket';
 
-	if ( params.product === 'pressable' ) {
+	if ( params.product === 'pressable' && params.contact_type === 'support' ) {
 		path = '/agency/help/pressable/support';
 	}
 

client/a8c-for-agencies/data/team/use-transfer-ownership.ts

@@ -0,0 +1,44 @@
+import { useMutation, UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import wpcom from 'calypso/lib/wp';
+import { useSelector } from 'calypso/state';
+import { getActiveAgencyId } from 'calypso/state/a8c-for-agencies/agency/selectors';
+
+interface APIError {
+	status: number;
+	code: string | null;
+	message: string;
+}
+
+export interface Params {
+	id: number;
+}
+
+interface APIResponse {
+	success: boolean;
+}
+
+function transferOwnershipMutation( params: Params, agencyId?: number ): Promise< APIResponse > {
+	if ( ! agencyId ) {
+		throw new Error( 'Agency ID is required to transfer ownership' );
+	}
+
+	return wpcom.req.post( {
+		apiNamespace: 'wpcom/v2',
+		path: `/agency/${ agencyId }/transfer-ownership`,
+		method: 'PUT',
+		body: {
+			new_owner_id: params.id,
+		},
+	} );
+}
+
+export default function useTransferOwnershipMutation< TContext = unknown >(
+	options?: UseMutationOptions< APIResponse, APIError, Params, TContext >
+): UseMutationResult< APIResponse, APIError, Params, TContext > {
+	const agencyId = useSelector( getActiveAgencyId );
+
+	return useMutation< APIResponse, APIError, Params, TContext >( {
+		...options,
+		mutationFn: ( args ) => transferOwnershipMutation( args, agencyId ),
+	} );
+}

client/a8c-for-agencies/hooks/use-update-tags-for-sites.ts

@@ -0,0 +1,42 @@
+import { useMutation, UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import SiteTag from 'calypso/a8c-for-agencies/types/site-tag';
+import wpcom from 'calypso/lib/wp';
+import { useSelector } from 'calypso/state';
+import { getActiveAgencyId } from 'calypso/state/a8c-for-agencies/agency/selectors';
+import { APIError } from 'calypso/state/partner-portal/types';
+
+interface UpdateTagsForSitesMutationOptions {
+	siteIds: number[];
+	tags: string[];
+}
+
+function mutationUpdateSiteTags( {
+	agencyId,
+	siteIds,
+	tags,
+}: UpdateTagsForSitesMutationOptions & { agencyId: number | undefined } ): Promise< SiteTag[] > {
+	if ( ! agencyId ) {
+		throw new Error( 'Agency ID is required to update the tags' );
+	}
+
+	return wpcom.req.put( {
+		method: 'PUT',
+		apiNamespace: 'wpcom/v2',
+		path: `/agency/${ agencyId }/sites/tags`,
+		body: {
+			tags,
+			site_ids: siteIds,
+		},
+	} );
+}
+
+export default function useUpdateTagsForSitesMutation< TContext = unknown >(
+	options?: UseMutationOptions< SiteTag[], APIError, UpdateTagsForSitesMutationOptions, TContext >
+): UseMutationResult< SiteTag[], APIError, UpdateTagsForSitesMutationOptions, TContext > {
+	const agencyId = useSelector( getActiveAgencyId );
+
+	return useMutation< SiteTag[], APIError, UpdateTagsForSitesMutationOptions, TContext >( {
+		...options,
+		mutationFn: ( args ) => mutationUpdateSiteTags( { ...args, agencyId } ),
+	} );
+}

client/a8c-for-agencies/sections/migrations/commissions-list/commission-columns.tsx

@@ -2,22 +2,20 @@ import { BadgeType } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import StatusBadge from 'calypso/a8c-for-agencies/components/step-section-item/status-badge';
 import FormattedDate from 'calypso/components/formatted-date';
+import { urlToSlug } from 'calypso/lib/url/http-utils';
 
 const DETAILS_DATE_FORMAT_SHORT = 'DD MMM YYYY';
 
 export const SiteColumn = ( { site }: { site: string } ) => {
-	return site;
+	return urlToSlug( site );
 };
 
-export const MigratedOnColumn = ( { migratedOn }: { migratedOn: Date } ) => {
-	return <FormattedDate date={ migratedOn } format={ DETAILS_DATE_FORMAT_SHORT } />;
+export const MigratedOnColumn = ( { migratedOn }: { migratedOn: number } ) => {
+	const date = new Date( migratedOn * 1000 );
+	return <FormattedDate date={ date } format={ DETAILS_DATE_FORMAT_SHORT } />;
 };
 
-export const ReviewStatusColumn = ( {
-	reviewStatus,
-}: {
-	reviewStatus: 'confirmed' | 'pending' | 'rejected';
-} ) => {
+export const ReviewStatusColumn = ( { reviewStatus }: { reviewStatus: string } ) => {
 	const translate = useTranslate();
 
 	const getStatusProps = () => {
@@ -27,16 +25,16 @@ export const ReviewStatusColumn = ( {
 					statusText: translate( 'Confirmed' ),
 					statusType: 'success',
 				};
-			case 'pending':
-				return {
-					statusText: translate( 'Pending' ),
-					statusType: 'warning',
-				};
 			case 'rejected':
 				return {
 					statusText: translate( 'Rejected' ),
 					statusType: 'error',
 				};
+			default:
+				return {
+					statusText: translate( 'Pending' ),
+					statusType: 'warning',
+				};
 		}
 	};
 

client/a8c-for-agencies/sections/migrations/commissions-list/index.tsx

@@ -6,14 +6,10 @@ import ItemsDataViews from 'calypso/a8c-for-agencies/components/items-dashboard/
 import { DataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces';
 import { MigratedOnColumn, ReviewStatusColumn, SiteColumn } from './commission-columns';
 import MigrationsCommissionsListMobileView from './mobile-view';
-import type { MigrationCommissionItem } from '../types';
+import type { TaggedSite } from '../types';
 import type { Field } from '@wordpress/dataviews';
 
-export default function MigrationsCommissionsList( {
-	items,
-}: {
-	items: MigrationCommissionItem[];
-} ) {
+export default function MigrationsCommissionsList( { items }: { items: TaggedSite[] } ) {
 	const translate = useTranslate();
 
 	const isDesktop = useDesktopBreakpoint();
@@ -33,25 +29,25 @@ export default function MigrationsCommissionsList( {
 				id: 'site',
 				label: translate( 'Site' ).toUpperCase(),
 				getValue: () => '-',
-				render: ( { item } ): ReactNode => <SiteColumn site={ item.siteUrl } />,
+				render: ( { item }: { item: TaggedSite } ): ReactNode => <SiteColumn site={ item.url } />,
 				enableHiding: false,
 				enableSorting: false,
 			},
 			{
 				id: 'migratedOn',
-				label: translate( 'Migrated on' ).toUpperCase(),
+				// FIXME: This should be "Migrated on" instead of "Date Added"
+				// We will change this when the MC tool is implemented and we have the migration date
+				label: translate( 'Date Added' ).toUpperCase(),
 				getValue: () => '-',
-				render: ( { item } ): ReactNode => <MigratedOnColumn migratedOn={ item.migratedOn } />,
+				render: ( { item } ): ReactNode => <MigratedOnColumn migratedOn={ item.created_at } />,
 				enableHiding: false,
 				enableSorting: false,
 			},
 			{
 				id: 'reviewStatus',
 				label: translate( 'Review status' ).toUpperCase(),
 				getValue: () => '-',
-				render: ( { item } ): ReactNode => (
-					<ReviewStatusColumn reviewStatus={ item.reviewStatus } />
-				),
+				render: ( { item } ): ReactNode => <ReviewStatusColumn reviewStatus={ item.state } />,
 				enableHiding: false,
 				enableSorting: false,
 			},

client/a8c-for-agencies/sections/migrations/commissions-list/mobile-view.tsx

@@ -5,14 +5,14 @@ import {
 	ListItemCardContent,
 } from 'calypso/a8c-for-agencies/components/list-item-cards';
 import { MigratedOnColumn, ReviewStatusColumn, SiteColumn } from './commission-columns';
-import type { MigrationCommissionItem } from '../types';
+import type { TaggedSite } from '../types';
 
 import './style.scss';
 
 export default function MigrationsCommissionsListMobileView( {
 	commissions,
 }: {
-	commissions: MigrationCommissionItem[];
+	commissions: TaggedSite[];
 } ) {
 	const translate = useTranslate();
 
@@ -23,16 +23,16 @@ export default function MigrationsCommissionsListMobileView( {
 					<ListItemCard key={ commission.id }>
 						<ListItemCardContent title={ translate( 'Site' ) }>
 							<div className="migrations-commissions-list-mobile-view__column">
-								<SiteColumn site={ commission.siteUrl } />
+								<SiteColumn site={ commission.url } />
 							</div>
 						</ListItemCardContent>
 						<ListItemCardContent title={ translate( 'Migrated on' ) }>
 							<div className="migrations-commissions-list-mobile-view__column">
-								<MigratedOnColumn migratedOn={ commission.migratedOn } />
+								<MigratedOnColumn migratedOn={ commission.created_at } />
 							</div>
 						</ListItemCardContent>
 						<ListItemCardContent title={ translate( 'Review status' ) }>
-							<ReviewStatusColumn reviewStatus={ commission.reviewStatus } />
+							<ReviewStatusColumn reviewStatus={ commission.state } />
 						</ListItemCardContent>
 					</ListItemCard>
 				) ) }

client/a8c-for-agencies/sections/migrations/consolidated-commissions/index.tsx

@@ -1,6 +1,6 @@
 import { Card } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
-import type { MigrationCommissionItem } from '../types';
+import type { TaggedSite } from '../types';
 
 import './style.scss';
 
@@ -9,21 +9,17 @@ const getQuarter = ( date = new Date() ) => {
 	return Math.ceil( ( currentMonth + 1 ) / 3 );
 };
 
-export default function MigrationsConsolidatedCommissions( {
-	items,
-}: {
-	items: MigrationCommissionItem[];
-} ) {
+export default function MigrationsConsolidatedCommissions( { items }: { items: TaggedSite[] } ) {
 	const translate = useTranslate();
 
 	const migrationCommissions =
 		items.filter(
 			( item ) =>
 				// Consider only confirmed migrations for the current quarter
-				item.reviewStatus === 'confirmed' && getQuarter( item.migratedOn ) === getQuarter()
-		).length * 100; // FIXME: Consider the maximum commission value
+				item.state === 'confirmed' && getQuarter( new Date( item.created_at ) ) === getQuarter()
+		).length * 100; // FIXME: Consider the maximum commission value when the MC tool is implemented
 
-	const sitesPendingReview = items.filter( ( item ) => item.reviewStatus === 'pending' ).length;
+	const sitesPendingReview = items.filter( ( item ) => item.state !== 'confirmed' ).length;
 
 	const currentQuarter = getQuarter();
 

client/a8c-for-agencies/sections/migrations/hooks/use-fetch-all-managed-sites.ts

@@ -46,7 +46,7 @@ export const useFetchAllManagedSites = () => {
 			const foundSite = sites.find( ( s ) => s?.ID === site.blog_id );
 			return foundSite
 				? {
-						id: site.blog_id,
+						id: site.a4a_site_id,
 						site: urlToSlug( site.url ),
 						date: foundSite.options?.created_at || '',
 				  }