Merge branch 'trunk' into add/gravatar-magic-code-auth-flow

Automattic · Jun 25, 2024 · 3b29c51 · 3b29c51
2 parents 5794417 + f5d2c80
commit 3b29c51
Show file tree

Hide file tree

Showing 89 changed files with 1,153 additions and 684 deletions.
diff --git a/client/a8c-for-agencies/components/form/field/index.tsx b/client/a8c-for-agencies/components/form/field/index.tsx
@@ -7,20 +7,27 @@ type Props = {
 	label: string;
 	sub?: string;
 	description?: string;
-	isOptional?: boolean;
+	showOptionalLabel?: boolean;
 	children: ReactNode;
+	isRequired?: boolean;
 };
 
-export default function FormField( { label, sub, children, description, isOptional }: Props ) {
+export default function FormField( {
+	label,
+	sub,
+	children,
+	description,
+	showOptionalLabel,
+	isRequired,
+}: Props ) {
 	const translate = useTranslate();
 
 	return (
 		<div className="a4a-form__section-field">
 			<div className="a4a-form__section-field-heading">
 				<h3 className="a4a-form__section-field-label">
-					{ label }
-
-					{ isOptional && (
+					{ label } { isRequired && <span className="a4a-form__section-field-required">*</span> }
+					{ ! isRequired && showOptionalLabel && (
 						<span className="a4a-form__section-field-optional">({ translate( 'optional' ) })</span>
 					) }
 				</h3>

diff --git a/client/a8c-for-agencies/components/form/field/style.scss b/client/a8c-for-agencies/components/form/field/style.scss
@@ -25,3 +25,7 @@
 .a4a-form__section-field-optional {
 	margin-inline-start: 4px;
 }
+
+.a4a-form__section-field-required {
+	color: var(--color-neutral-50);
+}
diff --git a/...-agencies/components/items-dashboard/item-preview-pane/item-preview-pane-header/index.tsx b/...-agencies/components/items-dashboard/item-preview-pane/item-preview-pane-header/index.tsx
@@ -78,6 +78,14 @@ export default function ItemPreviewPaneHeader( {
 							) : (
 								itemData.subtitle
 							) }
+
+							{ extraProps && extraProps.subtitleExtra ? (
+								<span>
+									<extraProps.subtitleExtra />
+								</span>
+							) : (
+								''
+							) }
 						</div>
 					</div>
 					{ isPreviewLoaded && (

diff --git a/client/a8c-for-agencies/components/items-dashboard/item-preview-pane/types.ts b/client/a8c-for-agencies/components/items-dashboard/item-preview-pane/types.ts
@@ -49,4 +49,5 @@ export interface ItemPreviewPaneHeaderExtraProps {
 		itemData: ItemData;
 		closeSitePreviewPane: () => void;
 	} >;
+	subtitleExtra?: string | React.ComponentType;
 }
diff --git a/client/a8c-for-agencies/sections/partner-directory/agency-details/hooks/use-details-form.ts b/client/a8c-for-agencies/sections/partner-directory/agency-details/hooks/use-details-form.ts
@@ -31,7 +31,6 @@ export default function useDetailsForm( { initialFormData }: Props ) {
 			formData.website.length > 0 &&
 			formData.bioDescription.length > 0 &&
 			formData.logoUrl.length > 0 &&
-			formData.landingPageUrl.length > 0 &&
 			formData.country?.length > 0 &&
 			formData.industry.length > 0 &&
 			formData.services.length > 0 &&

diff --git a/client/a8c-for-agencies/sections/partner-directory/agency-details/index.tsx b/client/a8c-for-agencies/sections/partner-directory/agency-details/index.tsx
@@ -86,7 +86,7 @@ const AgencyDetailsForm = ( { initialFormData }: Props ) => {
 			}
 		>
 			<FormSection title={ translate( 'Agency information' ) }>
-				<FormField label={ translate( 'Company name' ) }>
+				<FormField label={ translate( 'Company name' ) } isRequired>
 					<TextControl
 						value={ formData.name }
 						onChange={ ( value ) => setFormFields( { name: value } ) }
@@ -95,13 +95,14 @@ const AgencyDetailsForm = ( { initialFormData }: Props ) => {
 				<FormField
 					label={ translate( 'Company email' ) }
 					description={ translate( 'Client inquiries and leads will go to this email.' ) }
+					isRequired
 				>
 					<TextControl
 						value={ formData.email }
 						onChange={ ( value ) => setFormFields( { email: value } ) }
 					/>
 				</FormField>
-				<FormField label={ translate( 'Company website' ) }>
+				<FormField label={ translate( 'Company website' ) } isRequired>
 					<TextControl
 						value={ formData.website }
 						onChange={ ( value ) => setFormFields( { website: value } ) }
@@ -112,19 +113,20 @@ const AgencyDetailsForm = ( { initialFormData }: Props ) => {
 					description={ translate(
 						"Optional: Include your custom landing page for leads from Automattic platforms. We'll direct clients to this page."
 					) }
+					showOptionalLabel
 				>
 					<TextControl
 						value={ formData.landingPageUrl }
 						onChange={ ( value ) => setFormFields( { landingPageUrl: value } ) }
 					/>
 				</FormField>
-				<FormField label={ translate( 'Company bio' ) }>
+				<FormField label={ translate( 'Company bio' ) } isRequired>
 					<TextareaControl
 						value={ formData.bioDescription }
 						onChange={ ( value ) => setFormFields( { bioDescription: value } ) }
 					/>
 				</FormField>
-				<FormField label={ translate( 'Company location' ) }>
+				<FormField label={ translate( 'Company location' ) } isRequired>
 					<SearchableDropdown
 						value={ formData.country }
 						onChange={ ( value ) => {
@@ -139,6 +141,7 @@ const AgencyDetailsForm = ( { initialFormData }: Props ) => {
 					description={ translate(
 						'Upload your agency logo sized at 800px by 320px. Format allowed: JPG, PNG'
 					) }
+					isRequired
 				>
 					<TextControl
 						value={ formData.logoUrl }
@@ -162,25 +165,25 @@ const AgencyDetailsForm = ( { initialFormData }: Props ) => {
 						}
 					/>
 				</FormField>
-				<FormField label={ translate( 'Industry' ) }>
+				<FormField label={ translate( 'Industry' ) } isRequired>
 					<IndustrySelector
 						industry={ formData.industry }
 						setIndustry={ ( industry ) => setFormFields( { industry: industry } ) }
 					/>
 				</FormField>
-				<FormField label={ translate( 'Services you offer' ) }>
+				<FormField label={ translate( 'Services you offer' ) } isRequired>
 					<ServicesSelector
 						selectedServices={ formData.services }
 						setServices={ ( services ) => setFormFields( { services } ) }
 					/>
 				</FormField>
-				<FormField label={ translate( 'Products you work with' ) }>
+				<FormField label={ translate( 'Products you work with' ) } isRequired>
 					<ProductsSelector
 						selectedProducts={ formData.products }
 						setProducts={ ( products ) => setFormFields( { products } ) }
 					/>
 				</FormField>
-				<FormField label={ translate( 'Languages spoken' ) }>
+				<FormField label={ translate( 'Languages spoken' ) } isRequired>
 					<LanguageSelector
 						selectedLanguages={ formData.languagesSpoken }
 						setLanguages={ ( languagesSpoken ) => setFormFields( { languagesSpoken } ) }
@@ -194,13 +197,18 @@ const AgencyDetailsForm = ( { initialFormData }: Props ) => {
 					'Optionally set your minimum budget. Clients can filter these details to find the right agency.'
 				) }
 			>
-				<FormField label={ translate( 'Minimum project budget' ) }>
+				<FormField label={ translate( 'Minimum project budget' ) } isRequired>
 					<BudgetSelector
 						budgetLowerRange={ formData.budgetLowerRange }
 						setBudget={ ( budget: string ) => setFormFields( { budgetLowerRange: budget } ) }
 					/>
 				</FormField>
 			</FormSection>
+
+			<div className="partner-directory-agency-cta__required-information">
+				{ translate( '* indicates required information' ) }
+			</div>
+
 			<div className="partner-directory-agency-cta__footer">
 				<Button primary onClick={ onSubmit } disabled={ ! isValidFormData || isSubmitting }>
 					{ translate( 'Save public profile' ) }

diff --git a/.../a8c-for-agencies/sections/partner-directory/agency-expertise/hooks/use-expertise-form.ts b/.../a8c-for-agencies/sections/partner-directory/agency-expertise/hooks/use-expertise-form.ts
@@ -98,6 +98,7 @@ export default function useExpertiseForm( { initialFormData }: Props ) {
 			formData.services.length > 0 &&
 			formData.products.length > 0 &&
 			formData.directories.length > 0 &&
+			formData.feedbackUrl.length > 0 &&
 			// Ensure that each directory request has 5 valid URLs
 			formData.directories.every( ( { urls } ) => {
 				return urls.every( ( url ) => url && validateURL( url ) ) && areURLsUnique( urls );

diff --git a/client/a8c-for-agencies/sections/partner-directory/agency-expertise/index.tsx b/client/a8c-for-agencies/sections/partner-directory/agency-expertise/index.tsx
@@ -117,6 +117,7 @@ const AgencyExpertise = ( { initialFormData }: Props ) => {
 					description={ translate(
 						'We allow each agency to offer up to five services to help you focus on what you do best.'
 					) }
+					isRequired
 				>
 					<ServicesSelector
 						selectedServices={ services }
@@ -129,7 +130,7 @@ const AgencyExpertise = ( { initialFormData }: Props ) => {
 					/>
 				</FormField>
 
-				<FormField label={ translate( 'What products do you work with?' ) }>
+				<FormField label={ translate( 'What products do you work with?' ) } isRequired>
 					<ProductsSelector
 						selectedProducts={ products }
 						setProducts={ ( value ) =>
@@ -146,6 +147,7 @@ const AgencyExpertise = ( { initialFormData }: Props ) => {
 				<FormField
 					label={ translate( 'Automattic Partner Directories' ) }
 					sub={ translate( 'Select the Automattic directories you would like to appear on.' ) }
+					isRequired
 				>
 					<div className="partner-directory-agency-expertise__directory-options">
 						{ directoryOptions.map( ( directory ) => (
@@ -166,6 +168,7 @@ const AgencyExpertise = ( { initialFormData }: Props ) => {
 						sub={ translate(
 							"For each directory you selected, provide URLs of 5 client sites you've worked on. This helps us gauge your expertise."
 						) }
+						isRequired
 					>
 						<div className="partner-directory-agency-expertise__directory-client-sites">
 							{ directories.map( ( { directory } ) => (
@@ -192,7 +195,7 @@ const AgencyExpertise = ( { initialFormData }: Props ) => {
 					description={ translate(
 						'Share a link to your customer feedback from Google, Clutch, Facebook, etc., or testimonials featured on your website. If you don’t have online reviews, provide a link to client references or case studies.'
 					) }
-					isOptional
+					isRequired
 				>
 					<TextControl
 						type="text"
@@ -208,6 +211,10 @@ const AgencyExpertise = ( { initialFormData }: Props ) => {
 				</FormField>
 			</FormSection>
 
+			<div className="partner-directory-agency-cta__required-information">
+				{ translate( '* indicates a required information' ) }
+			</div>
+
 			<div className="partner-directory-agency-cta__footer">
 				<Button
 					href={ `${ A4A_PARTNER_DIRECTORY_LINK }/${ PARTNER_DIRECTORY_DASHBOARD_SLUG }` }

diff --git a/client/a8c-for-agencies/sections/partner-directory/style.scss b/client/a8c-for-agencies/sections/partner-directory/style.scss
@@ -27,3 +27,9 @@
 		font-size: rem(14px);
 	}
 }
+
+.partner-directory-agency-cta__required-information {
+	font-size: rem(14px);
+	color: var(--color-neutral-50);
+	margin-block-start: -32px;
+}
diff --git a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx
@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import { Button, Gridicon } from '@automattic/components';
 import { Icon, starFilled } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
@@ -66,8 +67,14 @@ export const JetpackSitesDataViews = ( {
 		[]
 	);
 
+	const isNotProduction = config( 'env_id' ) !== 'a8c-for-agencies-production';
+
 	const openSitePreviewPane = useCallback(
 		( site: Site ) => {
+			if ( site.sticker?.includes( 'migration-in-progress' ) && ! isNotProduction ) {
+				return;
+			}
+
 			if ( site.is_connection_healthy ) {
 				setDataViewsState( ( prevState: DataViewsState ) => ( {
 					...prevState,
@@ -380,19 +387,24 @@ export const JetpackSitesDataViews = ( {
 								onClick={ ( e: MouseEvent ) => e.stopPropagation() }
 								onKeyDown={ ( e: KeyboardEvent ) => e.stopPropagation() }
 							>
-								<SiteActions
-									isLargeScreen={ isLargeScreen }
-									site={ item.site }
-									siteError={ item.site.error }
-								/>
-								<Button
-									onClick={ () => openSitePreviewPane( item.site.value ) }
-									className="site-preview__open"
-									borderless
-									ref={ ( ref ) => setActionsRef( ( current ) => current || ref ) }
-								>
-									<Gridicon icon="chevron-right" />
-								</Button>
+								{ ( ! item.site.value.sticker?.includes( 'migration-in-progress' ) ||
+									isNotProduction ) && (
+									<>
+										<SiteActions
+											isLargeScreen={ isLargeScreen }
+											site={ item.site }
+											siteError={ item.site.error }
+										/>
+										<Button
+											onClick={ () => openSitePreviewPane( item.site.value ) }
+											className="site-preview__open"
+											borderless
+											ref={ ( ref ) => setActionsRef( ( current ) => current || ref ) }
+										>
+											<Gridicon icon="chevron-right" />
+										</Button>
+									</>
+								) }
 							</div>
 						</>
 					);

diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx
@@ -23,6 +23,7 @@ import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
 import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation';
 import useNoActiveSite from 'calypso/a8c-for-agencies/hooks/use-no-active-site';
 import JetpackSitesDataViews from 'calypso/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews';
+import QueryReaderTeams from 'calypso/components/data/query-reader-teams';
 import useFetchDashboardSites from 'calypso/data/agency-dashboard/use-fetch-dashboard-sites';
 import useFetchMonitorVerifiedContacts from 'calypso/data/agency-dashboard/use-fetch-monitor-verified-contacts';
 import DashboardDataContext from 'calypso/jetpack-cloud/sections/agency-dashboard/sites-overview/dashboard-data-context';
@@ -46,7 +47,6 @@ import { updateSitesDashboardUrl } from './update-sites-dashboard-url';
 
 import './style.scss';
 import './sites-dataviews-style.scss';
-
 export default function SitesDashboard() {
 	const jetpackSiteDisconnected = useSelector( checkIfJetpackSiteGotDisconnected );
 	const dispatch = useDispatch();
@@ -246,7 +246,7 @@ export default function SitesDashboard() {
 
 					<SiteNotifications />
 					{ tourId && <GuidedTour defaultTourId={ tourId } /> }
-
+					<QueryReaderTeams />
 					<DashboardDataContext.Provider
 						value={ {
 							verifiedContacts: {

diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/sites-dataviews-style.scss b/client/a8c-for-agencies/sections/sites/sites-dashboard/sites-dataviews-style.scss
@@ -19,6 +19,10 @@
 	width: 180px;
 	font-weight: 500;
 	font-size: rem(14px);
+
+	.migration-badge {
+		border-radius: 2px;
+	}
 }
 
 .sites-dataviews__site-url {

diff --git a/client/a8c-for-agencies/sections/sites/sites-dataviews/site-data-field.tsx b/client/a8c-for-agencies/sections/sites/sites-dataviews/site-data-field.tsx
@@ -1,4 +1,5 @@
-import { Button } from '@automattic/components';
+import { Badge, Button } from '@automattic/components';
+import { translate } from 'i18n-calypso';
 import SiteFavicon from 'calypso/a8c-for-agencies/components/items-dashboard/site-favicon';
 import TextPlaceholder from 'calypso/jetpack-cloud/sections/partner-portal/text-placeholder';
 import { Site } from '../types';
@@ -14,15 +15,27 @@ const SiteDataField = ( { isLoading, site, onSiteTitleClick }: SiteDataFieldProp
 		return <TextPlaceholder />;
 	}
 
+	const migrationInProgress = site.sticker?.includes( 'migration-in-progress' );
+
 	return (
-		<Button className="sites-dataviews__site" onClick={ () => onSiteTitleClick( site ) } borderless>
+		<Button
+			disabled={ migrationInProgress }
+			className="sites-dataviews__site"
+			onClick={ () => onSiteTitleClick( site ) }
+			borderless
+		>
 			<SiteFavicon
 				blogId={ site.blog_id }
 				fallback={ site.is_atomic ? 'wordpress-logo' : 'color' }
 			/>
 			<div className="sites-dataviews__site-name">
-				{ site.blogname }
-				<div className="sites-dataviews__site-url">{ site.url }</div>
+				<div>{ site.blogname }</div>
+				{ ! migrationInProgress && <div className="sites-dataviews__site-url">{ site.url }</div> }
+				{ migrationInProgress && (
+					<Badge className="migration-badge" type="info-blue">
+						{ translate( 'Migration in progress' ) }
+					</Badge>
+				) }
 			</div>
 		</Button>
 	);

diff --git a/client/assets/images/blaze/wp-blaze-banner@3x.png b/client/assets/images/blaze/wp-blaze-banner@3x.png