};
};
-const agencyDashboardSortToQueryObject = ( sort: DashboardSortInterface ) => {
+const agencyDashboardSortToQueryObject = ( sort?: DashboardSortInterface ) => {
+ if ( ! sort ) {
+ return;
+ }
+
return {
...( sort?.field && { sort_field: sort.field } ),
...( sort?.direction && { sort_direction: sort.direction } ),
@@ -33,10 +37,10 @@ const agencyDashboardSortToQueryObject = ( sort: DashboardSortInterface ) => {
export interface FetchDashboardSitesArgsInterface {
isPartnerOAuthTokenLoaded: boolean;
- searchQuery: string;
+ searchQuery: string | undefined;
currentPage: number;
filter: AgencyDashboardFilter;
- sort: DashboardSortInterface;
+ sort?: DashboardSortInterface;
perPage?: number;
agencyId?: number;
}
diff --git a/client/data/paid-newsletter/use-map-stripe-plan-to-product-mutation.ts b/client/data/paid-newsletter/use-map-stripe-plan-to-product-mutation.ts
index 38c0a939574c87..b847fc6ca96d2f 100644
--- a/client/data/paid-newsletter/use-map-stripe-plan-to-product-mutation.ts
+++ b/client/data/paid-newsletter/use-map-stripe-plan-to-product-mutation.ts
@@ -8,7 +8,7 @@ import { useCallback } from 'react';
import wp from 'calypso/lib/wp';
interface MutationVariables {
- siteId: string;
+ siteId: number;
engine: string;
currentStep: string;
stripePlan: string;
@@ -48,10 +48,8 @@ export const useMapStripePlanToProductMutation = (
},
...options,
onSuccess( ...args ) {
- const [ , { siteId, engine, currentStep } ] = args;
- queryClient.invalidateQueries( {
- queryKey: [ 'paid-newsletter-importer', siteId, engine, currentStep ],
- } );
+ const [ data, { siteId, engine } ] = args;
+ queryClient.setQueryData( [ 'paid-newsletter-importer', siteId, engine ], data );
options.onSuccess?.( ...args );
},
} );
@@ -60,7 +58,7 @@ export const useMapStripePlanToProductMutation = (
const mapStripePlanToProduct = useCallback(
(
- siteId: string,
+ siteId: number,
engine: string,
currentStep: string,
stripePlan: string,
diff --git a/client/data/paid-newsletter/use-paid-newsletter-query.ts b/client/data/paid-newsletter/use-paid-newsletter-query.ts
index 184b9b699c3f2f..91912777789ce1 100644
--- a/client/data/paid-newsletter/use-paid-newsletter-query.ts
+++ b/client/data/paid-newsletter/use-paid-newsletter-query.ts
@@ -1,20 +1,82 @@
import { keepPreviousData, useQuery } from '@tanstack/react-query';
import wp from 'calypso/lib/wp';
-interface PaidNewsletterStep {
- status: string;
- content?: any;
+export type StepId = 'content' | 'subscribers' | 'paid-subscribers' | 'summary';
+export type StepStatus = 'initial' | 'skipped' | 'importing' | 'done';
+
+export interface ContentStepContent {}
+
+export interface SubscribersStepContent {
+ meta?: {
+ email_count: string;
+ id: number;
+ paid_subscribers_count: string;
+ platform: string;
+ scheduled_at: string;
+ status: string;
+ subscribed_count: string | null;
+ timestamp: string;
+ };
+}
+
+export interface Product {
+ currency: string;
+ id: number;
+ interval: string;
+ price: string;
+ title: string;
+}
+
+export interface Plan {
+ active_subscriptions: boolean;
+ is_active: boolean;
+ name: string;
+ plan_amount_decimal: number;
+ plan_currency: string;
+ plan_id: string;
+ plan_interval: string;
+ product_id: string;
+}
+
+export interface PaidSubscribersStepContent {
+ available_tiers: Product[];
+ connect_url?: string;
+ is_connected_stripe: boolean;
+ map_plans: Record< string, string >;
+ plans: Plan[];
+}
+
+export interface SummaryStepContent {}
+
+interface Step< T > {
+ status: StepStatus;
+ content?: T;
+}
+
+interface Steps {
+ content: Step< ContentStepContent >;
+ subscribers: Step< SubscribersStepContent >;
+ 'paid-subscribers': Step< PaidSubscribersStepContent >;
+ summary: Step< SummaryStepContent >;
}
interface PaidNewsletterData {
- current_step: string;
- steps: Record< string, PaidNewsletterStep >;
+ current_step: StepId;
+ steps: Steps;
}
-export const usePaidNewsletterQuery = ( engine: string, currentStep: string, siteId?: number ) => {
+const REFRESH_INTERVAL = 2000; // every 2 seconds.
+
+export const usePaidNewsletterQuery = (
+ engine: string,
+ currentStep: StepId,
+ siteId?: number,
+ autoRefresh?: boolean
+) => {
return useQuery( {
enabled: !! siteId,
- queryKey: [ 'paid-newsletter-importer', siteId, engine, currentStep ],
+ // eslint-disable-next-line @tanstack/query/exhaustive-deps
+ queryKey: [ 'paid-newsletter-importer', siteId, engine ],
queryFn: (): Promise< PaidNewsletterData > => {
return wp.req.get(
{
@@ -30,5 +92,6 @@ export const usePaidNewsletterQuery = ( engine: string, currentStep: string, sit
placeholderData: keepPreviousData,
refetchOnWindowFocus: true,
staleTime: 6000, // 10 minutes
+ refetchInterval: autoRefresh ? REFRESH_INTERVAL : false,
} );
};
diff --git a/client/data/paid-newsletter/use-reset-mutation.ts b/client/data/paid-newsletter/use-reset-mutation.ts
index a23caa753ae686..5f58327ff6b352 100644
--- a/client/data/paid-newsletter/use-reset-mutation.ts
+++ b/client/data/paid-newsletter/use-reset-mutation.ts
@@ -38,10 +38,9 @@ export const useResetMutation = (
},
...options,
onSuccess( ...args ) {
- const [ , { siteId, engine, currentStep } ] = args;
- queryClient.invalidateQueries( {
- queryKey: [ 'paid-newsletter-importer', siteId, engine, currentStep ],
- } );
+ const [ data, { siteId, engine } ] = args;
+
+ queryClient.setQueryData( [ 'paid-newsletter-importer', siteId, engine ], data );
options.onSuccess?.( ...args );
},
} );
diff --git a/client/data/paid-newsletter/use-skip-next-step-mutation.ts b/client/data/paid-newsletter/use-skip-next-step-mutation.ts
index d602be6ef59405..50976016f23812 100644
--- a/client/data/paid-newsletter/use-skip-next-step-mutation.ts
+++ b/client/data/paid-newsletter/use-skip-next-step-mutation.ts
@@ -20,6 +20,16 @@ export const useSkipNextStepMutation = (
const queryClient = useQueryClient();
const mutation = useMutation( {
mutationFn: async ( { siteId, engine, currentStep, skipStep }: MutationVariables ) => {
+ queryClient.setQueryData(
+ [ 'paid-newsletter-importer', siteId, engine ],
+ ( previous: any ) => {
+ const optimisticData = previous; // { steps: [ { [ skipStep ]: { status: 'skipped' } } ] };
+
+ optimisticData.steps[ skipStep ].status = 'skipped';
+ return optimisticData;
+ }
+ );
+
const response = await wp.req.post(
{
path: `/sites/${ siteId }/site-importer/paid-newsletter`,
@@ -40,10 +50,8 @@ export const useSkipNextStepMutation = (
},
...options,
onSuccess( ...args ) {
- const [ , { siteId, engine, currentStep } ] = args;
- queryClient.invalidateQueries( {
- queryKey: [ 'paid-newsletter-importer', siteId, engine, currentStep ],
- } );
+ const [ data, { siteId, engine } ] = args;
+ queryClient.setQueryData( [ 'paid-newsletter-importer', siteId, engine ], data );
options.onSuccess?.( ...args );
},
} );
diff --git a/client/data/paid-newsletter/use-subscriber-import-mutation.ts b/client/data/paid-newsletter/use-subscriber-import-mutation.ts
new file mode 100644
index 00000000000000..210f38e173beaf
--- /dev/null
+++ b/client/data/paid-newsletter/use-subscriber-import-mutation.ts
@@ -0,0 +1,56 @@
+import {
+ DefaultError,
+ useMutation,
+ UseMutationOptions,
+ useQueryClient,
+} from '@tanstack/react-query';
+import { useCallback } from 'react';
+import wp from 'calypso/lib/wp';
+
+interface MutationVariables {
+ siteId: number;
+ engine: string;
+ currentStep: string;
+}
+
+export const useSubscriberImportMutation = (
+ options: UseMutationOptions< unknown, DefaultError, MutationVariables > = {}
+) => {
+ const queryClient = useQueryClient();
+ const mutation = useMutation( {
+ mutationFn: async ( { siteId, engine, currentStep }: MutationVariables ) => {
+ const response = await wp.req.post(
+ {
+ path: `/sites/${ siteId }/site-importer/paid-newsletter/subscriber-import`,
+ apiNamespace: 'wpcom/v2',
+ },
+ {
+ engine: engine,
+ current_step: currentStep,
+ }
+ );
+
+ if ( ! response.current_step ) {
+ throw new Error( 'unsuccsefully skipped step', response );
+ }
+
+ return response;
+ },
+ ...options,
+ onSuccess( ...args ) {
+ const [ data, { siteId, engine } ] = args;
+ queryClient.setQueryData( [ 'paid-newsletter-importer', siteId, engine ], data );
+ options.onSuccess?.( ...args );
+ },
+ } );
+
+ const { mutate } = mutation;
+
+ const enqueueSubscriberImport = useCallback(
+ ( siteId: number, engine: string, currentStep: string ) =>
+ mutate( { siteId, engine, currentStep } ),
+ [ mutate ]
+ );
+
+ return { enqueueSubscriberImport, ...mutation };
+};
diff --git a/client/data/site-profiler/types.ts b/client/data/site-profiler/types.ts
index 5089fef55afaf8..da87237bc95669 100644
--- a/client/data/site-profiler/types.ts
+++ b/client/data/site-profiler/types.ts
@@ -112,6 +112,10 @@ export interface UrlBasicMetricsQueryResponse {
token: string;
}
+export interface LeadMutationResponse {
+ success: boolean;
+}
+
export interface UrlSecurityMetricsQueryResponse {
wpscan: {
report: {
diff --git a/client/data/site-profiler/use-lead-query.ts b/client/data/site-profiler/use-lead-query.ts
new file mode 100644
index 00000000000000..852a8fa07c10da
--- /dev/null
+++ b/client/data/site-profiler/use-lead-query.ts
@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import { LeadMutationResponse } from 'calypso/data/site-profiler/types';
+import wp from 'calypso/lib/wp';
+
+export const useLeadMutation = ( url?: string, hash?: string ) => {
+ return useMutation( {
+ mutationKey: [ 'lead', url, hash ],
+ mutationFn: (): Promise< LeadMutationResponse > =>
+ wp.req.post(
+ {
+ path: '/site-profiler/lead',
+ apiNamespace: 'wpcom/v2',
+ },
+ {
+ url,
+ hash,
+ }
+ ),
+ } );
+};
diff --git a/client/devdocs/design/index.jsx b/client/devdocs/design/index.jsx
index 066c358d7ce8c4..6b0202fa436aeb 100644
--- a/client/devdocs/design/index.jsx
+++ b/client/devdocs/design/index.jsx
@@ -121,7 +121,6 @@ import WpcomColophon from 'calypso/components/wpcom-colophon/docs/example';
import Collection from 'calypso/devdocs/design/search-collection';
import { slugToCamelCase } from 'calypso/devdocs/docs-example/util';
import SitesGridItemExample from 'calypso/sites-dashboard/components/sites-grid-item/docs/example';
-import SitesGridItemSelectExample from 'calypso/sites-dashboard/components/sites-grid-item-select/docs/example';
export default class DesignAssets extends Component {
static displayName = 'DesignAssets';
@@ -267,7 +266,6 @@ export default class DesignAssets extends Component {
-
diff --git a/client/gutenberg/editor/calypsoify-iframe.tsx b/client/gutenberg/editor/calypsoify-iframe.tsx
index d884a73439ed9a..6ecdbfede05b92 100644
--- a/client/gutenberg/editor/calypsoify-iframe.tsx
+++ b/client/gutenberg/editor/calypsoify-iframe.tsx
@@ -95,7 +95,7 @@ enum WindowActions {
enum EditorActions {
GoToAllPosts = 'goToAllPosts', // Unused action in favor of CloseEditor. Maintained here to support cached scripts.
- GoToPatterns = 'goToPatterns',
+ WpAdminRedirect = 'wpAdminRedirect',
CloseEditor = 'closeEditor',
OpenMediaModal = 'openMediaModal',
OpenCheckoutModal = 'openCheckoutModal',
@@ -383,7 +383,7 @@ class CalypsoifyIframe extends Component< ComponentProps, State > {
this.navigate( destinationUrl, unsavedChanges );
}
- if ( EditorActions.GoToPatterns === action ) {
+ if ( EditorActions.WpAdminRedirect === action ) {
const { destinationUrl, unsavedChanges } = payload;
this.navigate( `https://${ this.props.siteSlug }${ destinationUrl }`, unsavedChanges );
diff --git a/client/hosting/hosting-features/components/hosting-features.tsx b/client/hosting/hosting-features/components/hosting-features.tsx
index 39800ead7de6ff..41993442b4aba6 100644
--- a/client/hosting/hosting-features/components/hosting-features.tsx
+++ b/client/hosting/hosting-features/components/hosting-features.tsx
@@ -63,7 +63,8 @@ const HostingFeatures = () => {
// `siteTransferData?.isTransferring` is not a fully reliable indicator by itself, which is why
// we also look at `siteTransferData.status`
const isTransferInProgress =
- siteTransferData?.isTransferring || siteTransferData?.status === transferStates.COMPLETED;
+ ( siteTransferData?.isTransferring || siteTransferData?.status === transferStates.COMPLETED ) &&
+ ! isPlanExpired;
useEffect( () => {
if ( ! siteId ) {
diff --git a/client/hosting/overview/components/plan-card.tsx b/client/hosting/overview/components/plan-card.tsx
index 26be5d7af8c832..520dfbc1fff43e 100644
--- a/client/hosting/overview/components/plan-card.tsx
+++ b/client/hosting/overview/components/plan-card.tsx
@@ -127,8 +127,6 @@ const PricingSection: FC = () => {
{ isFreePlan && (
-
-
-
- { translate( 'WordPress admin username' ) }
-
-
(
+
+
+ { translate( 'WordPress admin username' ) }
+
+ (
+ {
+ const trimmedValue = e.target.value.trim();
+ field.onChange( trimmedValue );
+ } }
+ onBlur={ ( e: any ) => {
+ field.onBlur();
+ e.target.value = e.target.value.trim();
+ } }
+ />
+ ) }
+ />
+
+
+
+
+ { translate( 'Password' ) }
+
+
(
+
{
- const trimmedValue = e.target.value.trim();
- field.onChange( trimmedValue );
- } }
- onBlur={ ( e: any ) => {
- field.onBlur();
- e.target.value = e.target.value.trim();
- } }
/>
- ) }
- />
-
-
-
- { translate( 'Password' ) }
-
-
(
-
-
-
-
- ) }
- />
-
{ ( errors.username || errors.password ) && (
@@ -339,7 +353,7 @@ export const CredentialsForm: FC< CredentialsFormProps > = ( { onSubmit, onSkip
{ errors.backupFileLocation?.message }
) }
-
+
{ translate(
"Upload your file to a service like Dropbox or Google Drive to get a link. Don't forget to make sure that anyone with the link can access it."
) }
@@ -348,28 +362,60 @@ export const CredentialsForm: FC< CredentialsFormProps > = ( { onSubmit, onSkip
) }
-
-
{ translate( 'Notes (optional)' ) }
-
(
-
+ { ( locale === 'en' || hasTranslation( 'Special instructions' ) ) && (
+
+ ) }
+ { showNotes && (
+ <>
+
+ (
+
+ ) }
+ />
+
+ { errors?.notes && (
+
+ { errors.notes.message }
+
+ ) }
+ { ( locale === 'en' ||
+ hasTranslation(
+ "Please don't share any passwords or secure information in this field. We'll reach out to collect that information if you have any additional credentials to access your site."
+ ) ) && (
+
+ { translate(
+ "Please don't share any passwords or secure information in this field. We'll reach out to collect that information if you have any additional credentials to access your site."
+ ) }
+
+ ) }
+
+ ) }
- { errors?.notes && (
-
{ errors.notes.message }
- ) }
+
{ errors?.root && (
{ errors.root.message }
) }
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss
index 57f0bfdda6030f..1703a6a5be7a70 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss
@@ -35,6 +35,9 @@
margin-top: 1em;
flex: 1;
}
+ .site-migration-credentials__form-field--notes {
+ margin-top: 5px;
+ }
.site-migration-credentials__radio-group {
display: flex;
flex-direction: column;
@@ -61,8 +64,9 @@
}
}
.site-migration-credentials__form-note {
- margin-top: 1em;
color: var(--color-text-subtle);
+ font-size: 0.875rem;
+ font-style: italic;
}
.site-migration-credentials__form-error {
color: var(--color-error);
@@ -97,4 +101,21 @@
margin-top: 1em;
text-align: center;
}
+ .site-migration-credentials__special-instructions {
+ .components-button {
+ padding: 0;
+ height: auto;
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: var(--color-text);
+ margin-top: 1rem;
+ }
+
+ .site-migration-credentials__special-instructions-icon {
+ fill: var(--color-text) !important;
+ }
+ }
+ .site-migration-credentials__backup-note {
+ margin-top: 0.25rem;
+ }
}
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/test/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/test/index.tsx
index 8e107ebca2ffb3..1e82af6c899c40 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/test/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/test/index.tsx
@@ -41,7 +41,7 @@ describe( 'SiteMigrationCredentials', () => {
expect( screen.queryByText( 'Site address' ) ).toBeInTheDocument();
expect( screen.queryByText( 'WordPress admin username' ) ).toBeInTheDocument();
expect( screen.queryByText( 'Password' ) ).toBeInTheDocument();
- expect( screen.queryByText( 'Notes (optional)' ) ).toBeInTheDocument();
+ expect( screen.queryByText( 'Special instructions' ) ).toBeInTheDocument();
} );
it( 'does not show any error message by default', async () => {
@@ -110,10 +110,13 @@ describe( 'SiteMigrationCredentials', () => {
const submit = jest.fn();
render( { navigation: { submit } } );
+ const expandNotesButton = screen.getByTestId( 'special-instructions' );
+ await userEvent.click( expandNotesButton );
+
const addressInput = screen.getByLabelText( /Site address/ );
const usernameInput = screen.getByLabelText( /WordPress admin username/ );
const passwordInput = screen.getByLabelText( /Password/ );
- const notesInput = screen.getByLabelText( /Notes \(optional\)/ );
+ const notesInput = screen.getByTestId( 'special-instructions-textarea' );
siteAddress && ( await userEvent.type( addressInput, siteAddress ) );
username && ( await userEvent.type( usernameInput, username ) );
@@ -175,7 +178,11 @@ describe( 'SiteMigrationCredentials', () => {
const addressInput = screen.getByLabelText(
isBackupRequest ? /Backup file location/ : /Site address/
);
- const notesInput = screen.getByLabelText( /Notes \(optional\)/ );
+
+ const expandNotesButton = screen.getByTestId( 'special-instructions' );
+ await userEvent.click( expandNotesButton );
+
+ const notesInput = screen.getByTestId( 'special-instructions-textarea' );
await userEvent.type( addressInput, siteAddress );
username &&
@@ -281,10 +288,13 @@ describe( 'SiteMigrationCredentials', () => {
const submit = jest.fn();
render( { navigation: { submit } } );
+ const expandNotesButton = screen.getByTestId( 'special-instructions' );
+ await userEvent.click( expandNotesButton );
+
await userEvent.type( screen.getByLabelText( /Site address/ ), 'test.com' );
await userEvent.type( screen.getByLabelText( /WordPress admin username/ ), 'username' );
await userEvent.type( screen.getByLabelText( /Password/ ), 'password' );
- await userEvent.type( screen.getByLabelText( /Notes \(optional\)/ ), 'notes' );
+ await userEvent.type( screen.getByTestId( 'special-instructions-textarea' ), 'notes' );
( wpcomRequest as jest.Mock ).mockRejectedValue( errorResponse );
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-picker/site-picker.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-picker/site-picker.tsx
index 9e28de82c9fa61..66821bc8b1b2f3 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-picker/site-picker.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/site-picker/site-picker.tsx
@@ -86,7 +86,6 @@ const SitePicker = function SitePicker( props: Props ) {
{ ( selectedStatus.hiddenCount > 0 || sites.length > perPage ) && (
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/unified-domains/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/unified-domains/index.tsx
new file mode 100644
index 00000000000000..d06f0aacdb10c3
--- /dev/null
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/unified-domains/index.tsx
@@ -0,0 +1,105 @@
+import { PLAN_PERSONAL } from '@automattic/calypso-products';
+import { usePersistedState } from '@automattic/onboarding';
+import { withShoppingCart } from '@automattic/shopping-cart';
+import { localize } from 'i18n-calypso';
+import { isEmpty } from 'lodash';
+import { connect } from 'react-redux';
+import { recordUseYourDomainButtonClick } from 'calypso/components/domains/register-domain-step/analytics';
+import { planItem } from 'calypso/lib/cart-values/cart-items';
+import CalypsoShoppingCartProvider from 'calypso/my-sites/checkout/calypso-shopping-cart-provider';
+import withCartKey from 'calypso/my-sites/checkout/with-cart-key';
+import { RenderDomainsStep, submitDomainStepSelection } from 'calypso/signup/steps/domains';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import { DOMAINS_WITH_PLANS_ONLY } from 'calypso/state/current-user/constants';
+import {
+ currentUserHasFlag,
+ getCurrentUser,
+ getCurrentUserSiteCount,
+ isUserLoggedIn,
+} from 'calypso/state/current-user/selectors';
+import {
+ recordAddDomainButtonClick,
+ recordAddDomainButtonClickInMapDomain,
+ recordAddDomainButtonClickInTransferDomain,
+ recordAddDomainButtonClickInUseYourDomain,
+} from 'calypso/state/domains/actions';
+import { getAvailableProductsList } from 'calypso/state/products-list/selectors';
+import getSitesItems from 'calypso/state/selectors/get-sites-items';
+import { fetchUsernameSuggestion } from 'calypso/state/signup/optional-dependencies/actions';
+import { removeStep } from 'calypso/state/signup/progress/actions';
+import { setDesignType } from 'calypso/state/signup/steps/design-type/actions';
+import { getDesignType } from 'calypso/state/signup/steps/design-type/selectors';
+import { getSelectedSite } from 'calypso/state/ui/selectors';
+import { ProvidedDependencies, StepProps } from '../../types';
+
+const RenderDomainsStepConnect = connect(
+ ( state, { flow }: StepProps ) => {
+ const productsList = getAvailableProductsList( state );
+ const productsLoaded = ! isEmpty( productsList );
+ const selectedSite = getSelectedSite( state );
+ const multiDomainDefaultPlan = planItem( PLAN_PERSONAL );
+ const userLoggedIn = isUserLoggedIn( state as object );
+ const currentUserSiteCount = getCurrentUserSiteCount( state as object );
+ const stepSectionName = window.location.pathname.includes( 'use-your-domain' )
+ ? 'use-your-domain'
+ : undefined;
+
+ return {
+ designType: getDesignType( state ),
+ currentUser: getCurrentUser( state as object ),
+ productsList,
+ productsLoaded,
+ selectedSite,
+ isDomainOnly: false,
+ sites: getSitesItems( state ),
+ userSiteCount: currentUserSiteCount,
+ previousStepName: 'user',
+ isPlanSelectionAvailableLaterInFlow: true,
+ userLoggedIn,
+ multiDomainDefaultPlan,
+ domainsWithPlansOnly: currentUserHasFlag( state as object, DOMAINS_WITH_PLANS_ONLY ),
+ flowName: flow,
+ path: window.location.pathname,
+ positionInFlow: 1,
+ isReskinned: true,
+ stepSectionName,
+ };
+ },
+ {
+ recordAddDomainButtonClick,
+ recordAddDomainButtonClickInMapDomain,
+ recordAddDomainButtonClickInTransferDomain,
+ recordAddDomainButtonClickInUseYourDomain,
+ recordUseYourDomainButtonClick,
+ removeStep,
+ submitDomainStepSelection,
+ setDesignType,
+ recordTracksEvent,
+ fetchUsernameSuggestion,
+ }
+)( withCartKey( withShoppingCart( localize( RenderDomainsStep ) ) ) );
+
+export default function DomainsStep( props: StepProps ) {
+ const [ stepState, setStepState ] = usePersistedState< ProvidedDependencies >();
+
+ return (
+
+ window.location.assign( url ) }
+ saveSignupStep={ ( state: ProvidedDependencies ) =>
+ setStepState( { ...stepState, ...state } )
+ }
+ submitSignupStep={ ( state: ProvidedDependencies ) => {
+ setStepState( { ...stepState, ...state } );
+ } }
+ goToNextStep={ ( state: ProvidedDependencies ) =>
+ props.navigation.submit?.( { ...stepState, ...state } )
+ }
+ step={ stepState }
+ flowName={ props.flow }
+ useStepperWrapper
+ />
+
+ );
+}
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/use-my-domain/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/use-my-domain/index.tsx
index 76e0ba2f9e3732..d3cb9cf50a5ceb 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/use-my-domain/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/use-my-domain/index.tsx
@@ -2,6 +2,7 @@
import {
DESIGN_FIRST_FLOW,
START_WRITING_FLOW,
+ ONBOARDING_FLOW,
StepContainer,
isStartWritingFlow,
} from '@automattic/onboarding';
@@ -70,6 +71,7 @@ const UseMyDomain: Step = function UseMyDomain( { navigation, flow } ) {
switch ( flow ) {
case START_WRITING_FLOW:
case DESIGN_FIRST_FLOW:
+ case ONBOARDING_FLOW:
return getBlogOnboardingFlowStepContent();
default:
return getDefaultStepContent();
diff --git a/client/landing/stepper/declarative-flow/migration/index.tsx b/client/landing/stepper/declarative-flow/migration/index.tsx
index 1a1b4f8d6222eb..d5efce93ed8876 100644
--- a/client/landing/stepper/declarative-flow/migration/index.tsx
+++ b/client/landing/stepper/declarative-flow/migration/index.tsx
@@ -294,7 +294,7 @@ export default {
useStepNavigation( currentStep, navigate ) {
const stepHandlers = useCreateStepHandlers( navigate, this );
- return stepHandlers[ currentStep ];
+ return stepHandlers[ currentStep ] || {};
},
useSideEffect( currentStep, navigate ) {
diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts
index 52747ea550b596..cea94c1ab5cb53 100644
--- a/client/landing/stepper/declarative-flow/onboarding.ts
+++ b/client/landing/stepper/declarative-flow/onboarding.ts
@@ -19,7 +19,11 @@ const onboarding: Flow = {
return stepsWithRequiredLogin( [
{
slug: 'domains',
- asyncComponent: () => import( './internals/steps-repository/domains' ),
+ asyncComponent: () => import( './internals/steps-repository/unified-domains' ),
+ },
+ {
+ slug: 'use-my-domain',
+ asyncComponent: () => import( './internals/steps-repository/use-my-domain' ),
},
{
slug: 'plans',
@@ -45,6 +49,8 @@ const onboarding: Flow = {
useStepNavigation( currentStepSlug, navigate ) {
const flowName = this.name;
+ const { setDomain, setDomainCartItems } = useDispatch( ONBOARD_STORE );
+
const { domainCartItem, planCartItem } = useSelect(
( select: ( key: string ) => OnboardSelect ) => ( {
domainCartItem: select( ONBOARD_STORE ).getDomainCartItem(),
@@ -58,6 +64,13 @@ const onboarding: Flow = {
const submit = async ( providedDependencies: ProvidedDependencies = {} ) => {
switch ( currentStepSlug ) {
case 'domains':
+ setDomain( providedDependencies.suggestion );
+ setDomainCartItems( providedDependencies.domainCart );
+ if ( providedDependencies.navigateToUseMyDomain ) {
+ return navigate( 'use-my-domain' );
+ }
+ return navigate( 'plans' );
+ case 'use-my-domain':
return navigate( 'plans' );
case 'plans':
return navigate( 'create-site', undefined, true );
@@ -68,9 +81,9 @@ const onboarding: Flow = {
siteSlug: providedDependencies.siteSlug,
} );
persistSignupDestination( destination );
-
if ( providedDependencies.goToCheckout ) {
const siteSlug = providedDependencies.siteSlug as string;
+
if ( planCartItem && siteSlug && flowName ) {
await addPlanToCart( siteSlug, flowName, true, '', planCartItem );
}
@@ -100,6 +113,8 @@ const onboarding: Flow = {
const goBack = () => {
switch ( currentStepSlug ) {
+ case 'use-my-domain':
+ return navigate( 'domains' );
case 'plans':
return navigate( 'domains' );
default:
diff --git a/client/landing/stepper/declarative-flow/site-migration-flow.ts b/client/landing/stepper/declarative-flow/site-migration-flow.ts
index 63bcc14e50a931..d6452e4c23d559 100644
--- a/client/landing/stepper/declarative-flow/site-migration-flow.ts
+++ b/client/landing/stepper/declarative-flow/site-migration-flow.ts
@@ -311,6 +311,19 @@ const siteMigration: Flow = {
// Do it for me option.
if ( providedDependencies?.how === HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME ) {
+ if ( config.isEnabled( 'automated-migration/collect-credentials' ) ) {
+ return navigate(
+ addQueryArgs(
+ {
+ siteSlug,
+ from: fromQueryParam,
+ siteId,
+ },
+ STEPS.SITE_MIGRATION_CREDENTIALS.slug
+ )
+ );
+ }
+
return navigate( STEPS.SITE_MIGRATION_ASSISTED_MIGRATION.slug, {
siteId,
siteSlug,
diff --git a/client/landing/stepper/declarative-flow/test/hosted-site-migration-flow.tsx b/client/landing/stepper/declarative-flow/test/hosted-site-migration-flow.tsx
index 8eab4609657b32..117006ea3b0b4f 100644
--- a/client/landing/stepper/declarative-flow/test/hosted-site-migration-flow.tsx
+++ b/client/landing/stepper/declarative-flow/test/hosted-site-migration-flow.tsx
@@ -1,6 +1,7 @@
/**
* @jest-environment jsdom
*/
+import config from '@automattic/calypso-config';
import { PLAN_MIGRATION_TRIAL_MONTHLY } from '@automattic/calypso-products';
import { isCurrentUserLoggedIn } from '@automattic/data-stores/src/user/selectors';
import { waitFor } from '@testing-library/react';
@@ -180,6 +181,7 @@ describe( 'Hosted site Migration Flow', () => {
} );
it( 'migrate redirects from the how-to-migrate (do it for me) page to assisted migration page', () => {
+ config.disable( 'automated-migration/collect-credentials' );
const { runUseStepNavigationSubmit } = renderFlow( hostedSiteMigrationFlow );
runUseStepNavigationSubmit( {
@@ -196,6 +198,24 @@ describe( 'Hosted site Migration Flow', () => {
siteSlug: 'example.wordpress.com',
},
} );
+ config.enable( 'automated-migration/collect-credentials' );
+ } );
+
+ it( 'migrate redirects from the how-to-migrate (do it for me) page to credential collection step', () => {
+ const { runUseStepNavigationSubmit } = renderFlow( hostedSiteMigrationFlow );
+
+ runUseStepNavigationSubmit( {
+ currentStep: STEPS.SITE_MIGRATION_HOW_TO_MIGRATE.slug,
+ dependencies: {
+ destination: 'migrate',
+ how: HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME,
+ },
+ } );
+
+ expect( getFlowLocation() ).toEqual( {
+ path: `/${ STEPS.SITE_MIGRATION_CREDENTIALS.slug }?siteSlug=example.wordpress.com`,
+ state: null,
+ } );
} );
it( 'migrate redirects from the how-to-migrate (upgrade needed) page to site-migration-upgrade-plan step', () => {
diff --git a/client/landing/stepper/declarative-flow/test/site-migration-flow.tsx b/client/landing/stepper/declarative-flow/test/site-migration-flow.tsx
index 6d7358500421ba..f97eb38ad263f0 100644
--- a/client/landing/stepper/declarative-flow/test/site-migration-flow.tsx
+++ b/client/landing/stepper/declarative-flow/test/site-migration-flow.tsx
@@ -224,6 +224,7 @@ describe( 'Site Migration Flow', () => {
} );
it( 'migrate redirects from the how-to-migrate (do it for me) page to assisted migration page', () => {
+ config.disable( 'automated-migration/collect-credentials' );
const { runUseStepNavigationSubmit } = renderFlow( siteMigrationFlow );
runUseStepNavigationSubmit( {
@@ -240,6 +241,24 @@ describe( 'Site Migration Flow', () => {
siteSlug: 'example.wordpress.com',
},
} );
+ config.enable( 'automated-migration/collect-credentials' );
+ } );
+
+ it( 'migrate redirects from the how-to-migrate (do it for me) page to credential collection step', () => {
+ const { runUseStepNavigationSubmit } = renderFlow( siteMigrationFlow );
+
+ runUseStepNavigationSubmit( {
+ currentStep: STEPS.SITE_MIGRATION_HOW_TO_MIGRATE.slug,
+ dependencies: {
+ destination: 'migrate',
+ how: HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME,
+ },
+ } );
+
+ expect( getFlowLocation() ).toEqual( {
+ path: `/${ STEPS.SITE_MIGRATION_CREDENTIALS.slug }?siteSlug=example.wordpress.com`,
+ state: null,
+ } );
} );
it( 'migrate redirects from the how-to-migrate (upgrade needed) page to site-migration-upgrade-plan step', () => {
diff --git a/client/landing/stepper/index.tsx b/client/landing/stepper/index.tsx
index ea6c04c4986ada..df20ca49f7c953 100644
--- a/client/landing/stepper/index.tsx
+++ b/client/landing/stepper/index.tsx
@@ -4,7 +4,12 @@ import { initializeAnalytics } from '@automattic/calypso-analytics';
import { CurrentUser } from '@automattic/calypso-analytics/dist/types/utils/current-user';
import config from '@automattic/calypso-config';
import { User as UserStore } from '@automattic/data-stores';
-import { IMPORT_HOSTED_SITE_FLOW } from '@automattic/onboarding';
+import {
+ HOSTED_SITE_MIGRATION_FLOW,
+ MIGRATION_FLOW,
+ MIGRATION_SIGNUP_FLOW,
+ SITE_MIGRATION_FLOW,
+} from '@automattic/onboarding';
import { QueryClientProvider } from '@tanstack/react-query';
import { useDispatch } from '@wordpress/data';
import defaultCalypsoI18n from 'i18n-calypso';
@@ -26,6 +31,8 @@ import { getInitialState, getStateFromCache, persistOnChange } from 'calypso/sta
import { createQueryClient } from 'calypso/state/query-client';
import initialReducer from 'calypso/state/reducer';
import { setStore } from 'calypso/state/redux-store';
+import { setCurrentFlowName } from 'calypso/state/signup/flow/actions';
+import { setSelectedSiteId } from 'calypso/state/ui/actions';
import { FlowRenderer } from './declarative-flow/internals';
import { AsyncHelpCenter } from './declarative-flow/internals/components';
import 'calypso/components/environment-badge/style.scss';
@@ -37,6 +44,7 @@ import { enhanceFlowWithAuth } from './utils/enhanceFlowWithAuth';
import { startStepperPerformanceTracking } from './utils/performance-tracking';
import { WindowLocaleEffectManager } from './utils/window-locale-effect-manager';
import type { Flow } from './declarative-flow/internals/types';
+import type { AnyAction } from 'redux';
declare const window: AppWindow;
@@ -76,8 +84,15 @@ const getFlowFromURL = () => {
return fromPath || fromQuery;
};
+const HOTJAR_ENABLED_FLOWS = [
+ MIGRATION_FLOW,
+ SITE_MIGRATION_FLOW,
+ HOSTED_SITE_MIGRATION_FLOW,
+ MIGRATION_SIGNUP_FLOW,
+];
+
const initializeHotJar = ( flowName: string ) => {
- if ( flowName === IMPORT_HOSTED_SITE_FLOW ) {
+ if ( HOTJAR_ENABLED_FLOWS.includes( flowName ) ) {
addHotJarScript();
}
};
@@ -124,6 +139,11 @@ window.AppBoot = async () => {
const { default: rawFlow } = await flowLoader();
const flow = rawFlow.__experimentalUseBuiltinAuth ? enhanceFlowWithAuth( rawFlow ) : rawFlow;
+ // When re-using steps from /start, we need to set the current flow name in the redux store, since some depend on it.
+ reduxStore.dispatch( setCurrentFlowName( flow.name ) );
+ // Reset the selected site ID when the stepper is loaded.
+ reduxStore.dispatch( setSelectedSiteId( null ) as unknown as AnyAction );
+
const root = createRoot( document.getElementById( 'wpcom' ) as HTMLElement );
root.render(
diff --git a/client/layout/color-scheme/index.jsx b/client/layout/color-scheme/index.jsx
new file mode 100644
index 00000000000000..c9338a02ffa00f
--- /dev/null
+++ b/client/layout/color-scheme/index.jsx
@@ -0,0 +1,45 @@
+import { getAdminColor } from 'calypso/state/admin-color/selectors';
+import { getPreference } from 'calypso/state/preferences/selectors';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+
+export function getColorScheme( { state, isGlobalSidebarVisible, sectionName } ) {
+ if ( isGlobalSidebarVisible ) {
+ return 'global';
+ }
+ if ( sectionName === 'checkout' ) {
+ return null;
+ }
+ const calypsoColorScheme = getPreference( state, 'colorScheme' );
+ const siteId = getSelectedSiteId( state );
+ const siteColorScheme = getAdminColor( state, siteId );
+
+ return siteColorScheme ?? calypsoColorScheme;
+}
+
+export function refreshColorScheme( prevColorScheme, nextColorScheme ) {
+ if ( typeof document === 'undefined' ) {
+ return;
+ }
+ if ( prevColorScheme === nextColorScheme ) {
+ return;
+ }
+
+ const classList = document.querySelector( 'body' ).classList;
+
+ if ( prevColorScheme ) {
+ classList.remove( `is-${ prevColorScheme }` );
+ }
+
+ if ( nextColorScheme ) {
+ classList.add( `is-${ nextColorScheme }` );
+
+ const themeColor = getComputedStyle( document.body )
+ .getPropertyValue( '--color-masterbar-background' )
+ .trim();
+ const themeColorMeta = document.querySelector( 'meta[name="theme-color"]' );
+ // We only adjust the `theme-color` meta content value in case we set it in `componentDidMount`
+ if ( themeColorMeta && themeColorMeta.getAttribute( 'data-colorscheme' ) === 'true' ) {
+ themeColorMeta.content = themeColor;
+ }
+ }
+}
diff --git a/client/layout/index.jsx b/client/layout/index.jsx
index 6f6e6c18e375f4..63cf3594372c0f 100644
--- a/client/layout/index.jsx
+++ b/client/layout/index.jsx
@@ -35,7 +35,6 @@ import isReaderTagEmbedPage from 'calypso/lib/reader/is-reader-tag-embed-page';
import { getMessagePathForJITM } from 'calypso/lib/route';
import UserVerificationChecker from 'calypso/lib/user/verification-checker';
import { useSelector } from 'calypso/state';
-import { getAdminColor } from 'calypso/state/admin-color/selectors';
import { isOffline } from 'calypso/state/application/selectors';
import { isUserLoggedIn, getCurrentUser } from 'calypso/state/current-user/selectors';
import {
@@ -45,7 +44,6 @@ import {
} from 'calypso/state/global-sidebar/selectors';
import { isUserNewerThan, WEEK_IN_MILLISECONDS } from 'calypso/state/guided-tours/contexts';
import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
-import { getPreference } from 'calypso/state/preferences/selectors';
import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
import getIsBlazePro from 'calypso/state/selectors/get-is-blaze-pro';
import getPrimarySiteSlug from 'calypso/state/selectors/get-primary-site-slug';
@@ -63,6 +61,7 @@ import {
masterbarIsVisible,
} from 'calypso/state/ui/selectors';
import BodySectionCssClass from './body-section-css-class';
+import { getColorScheme, refreshColorScheme } from './color-scheme';
import GlobalNotifications from './global-notifications';
import LayoutLoader from './loader';
import { shouldLoadInlineHelp, handleScroll } from './utils';
@@ -245,70 +244,11 @@ class Layout extends Component {
this.setState( { isDesktop } );
} );
- this.refreshColorScheme( undefined, this.props.colorScheme );
+ refreshColorScheme( undefined, this.props.colorScheme );
}
- /**
- * Refresh the color scheme if
- * - the color scheme has changed
- * - the global sidebar is visible and the color scheme is not `global`
- * - the global sidebar was visible and is now hidden and the color scheme is not `global`
- * - the section changed to `checkout` or changes from 'checkout' to something else
- * @param prevProps object
- */
componentDidUpdate( prevProps ) {
- const willTransitionFromOrToCheckout =
- ( prevProps.sectionName === 'checkout' && this.props.sectionName !== 'checkout' ) ||
- ( prevProps.sectionName !== 'checkout' && this.props.sectionName === 'checkout' );
-
- if (
- prevProps.colorScheme !== this.props.colorScheme ||
- ( this.props.isGlobalSidebarVisible && this.props.colorScheme !== 'global' ) ||
- ( prevProps.isGlobalSidebarVisible &&
- ! this.props.isGlobalSidebarVisible &&
- this.props.colorScheme !== 'global' ) ||
- willTransitionFromOrToCheckout
- ) {
- this.refreshColorScheme( prevProps.colorScheme, this.props.colorScheme );
- }
- }
-
- refreshColorScheme( prevColorScheme, nextColorScheme ) {
- if ( ! config.isEnabled( 'me/account/color-scheme-picker' ) ) {
- return;
- }
-
- if ( typeof document !== 'undefined' ) {
- const classList = document.querySelector( 'body' ).classList;
- const globalColorScheme = 'global';
-
- if ( this.props.sectionName === 'checkout' ) {
- classList.remove( `is-${ prevColorScheme }` );
- return;
- }
-
- if ( this.props.isGlobalSidebarVisible ) {
- // Force the global color scheme when the global sidebar is visible.
- nextColorScheme = globalColorScheme;
- } else {
- // Revert back to user's color scheme when the global sidebar is gone.
- prevColorScheme = globalColorScheme;
- }
-
- classList.remove( `is-${ prevColorScheme }` );
- classList.add( `is-${ nextColorScheme }` );
-
- const themeColor = getComputedStyle( document.body )
- .getPropertyValue( '--color-masterbar-background' )
- .trim();
- const themeColorMeta = document.querySelector( 'meta[name="theme-color"]' );
- // We only adjust the `theme-color` meta content value in case we set it in `componentDidMount`
- if ( themeColorMeta && themeColorMeta.getAttribute( 'data-colorscheme' ) === 'true' ) {
- themeColorMeta.content = themeColor;
- }
- }
-
- // intentionally don't remove these in unmount
+ refreshColorScheme( prevProps.colorScheme, this.props.colorScheme );
}
renderMasterbar( loadHelpCenterIcon ) {
@@ -564,15 +504,16 @@ export default withCurrentRoute(
'comments',
].includes( sectionName );
const sidebarIsHidden = ! secondary || isWcMobileApp() || isDomainAndPlanPackageFlow;
+ const isGlobalSidebarVisible = shouldShowGlobalSidebar && ! sidebarIsHidden;
+
const userAllowedToHelpCenter =
config.isEnabled( 'calypso/help-center' ) && ! getIsOnboardingAffiliateFlow( state );
- const calypsoColorScheme = getPreference( state, 'colorScheme' );
- const siteColorScheme = getAdminColor( state, siteId ) ?? calypsoColorScheme;
- const colorScheme =
- shouldShowUnifiedSiteSidebar || config.isEnabled( 'layout/site-level-user-profile' )
- ? siteColorScheme
- : calypsoColorScheme;
+ const colorScheme = getColorScheme( {
+ state,
+ sectionName,
+ isGlobalSidebarVisible,
+ } );
return {
masterbarIsHidden,
@@ -606,7 +547,7 @@ export default withCurrentRoute(
sidebarIsCollapsed: sectionName !== 'reader' && getSidebarIsCollapsed( state ),
userAllowedToHelpCenter,
currentRoute,
- isGlobalSidebarVisible: shouldShowGlobalSidebar && ! sidebarIsHidden,
+ isGlobalSidebarVisible,
isGlobalSidebarCollapsed: shouldShowCollapsedGlobalSidebar && ! sidebarIsHidden,
isUnifiedSiteSidebarVisible: shouldShowUnifiedSiteSidebar && ! sidebarIsHidden,
isNewUser: isUserNewerThan( WEEK_IN_MILLISECONDS )( state ),
diff --git a/client/layout/logged-out.jsx b/client/layout/logged-out.jsx
index 2b606f93e8e99b..85112d82e68bec 100644
--- a/client/layout/logged-out.jsx
+++ b/client/layout/logged-out.jsx
@@ -193,19 +193,16 @@ const LayoutLoggedOut = ( {
'subscriptions',
'theme',
'themes',
- 'start-with',
].includes( sectionName ) &&
! isReaderTagPage &&
! isReaderSearchPage &&
! isReaderDiscoverPage
) {
const nonMonochromeSections = [ 'plugins' ];
- const whiteNavbarSections = [ 'start-with' ];
const className = clsx( {
'is-style-monochrome':
isEnabled( 'site-profiler/metrics' ) && ! nonMonochromeSections.includes( sectionName ),
- 'is-style-white': whiteNavbarSections.includes( sectionName ),
} );
masterbar = (
@@ -217,9 +214,6 @@ const LayoutLoggedOut = ( {
! nonMonochromeSections.includes( sectionName ) && {
logoColor: 'white',
} ) }
- { ...( whiteNavbarSections.includes( sectionName ) && {
- logoColor: 'black',
- } ) }
{ ...( sectionName === 'subscriptions' && { variant: 'minimal' } ) }
{ ...( sectionName === 'patterns' && {
startUrl: getPatternLibraryOnboardingUrl( locale, isLoggedIn ),
diff --git a/client/layout/masterbar/crowdsignal.scss b/client/layout/masterbar/crowdsignal.scss
index e75c233b85abf4..bf5f0c5bc19454 100644
--- a/client/layout/masterbar/crowdsignal.scss
+++ b/client/layout/masterbar/crowdsignal.scss
@@ -5,8 +5,8 @@
--color-primary: var(--studio-wordpress-blue-90);
--color-primary-dark: var(--studio-wordpress-blue-100);
- --color-accent: var(--studio-pink-50);
- --color-accent-dark: var(--studio-pink-70);
+ --color-accent: var(--studio-wordpress-blue);
+ --color-accent-dark: var(--studio-wordpress-blue-70);
--color-border: var(--studio-gray-5);
--color-surface: var(--studio-white);
diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx
index 1123f86f884a6f..cdd4e56fb89937 100644
--- a/client/layout/masterbar/logged-in.jsx
+++ b/client/layout/masterbar/logged-in.jsx
@@ -4,6 +4,8 @@ import page from '@automattic/calypso-router';
import { PromptIcon } from '@automattic/command-palette';
import { Button, Popover } from '@automattic/components';
import { isWithinBreakpoint, subscribeIsWithinBreakpoint } from '@automattic/viewport';
+import { Button as WPButton } from '@wordpress/components';
+import { debounce } from '@wordpress/compose';
import { Icon, category } from '@wordpress/icons';
import { localize } from 'i18n-calypso';
import PropTypes from 'prop-types';
@@ -66,6 +68,7 @@ import Notifications from './masterbar-notifications/notifications-button';
const NEW_MASTERBAR_SHIPPING_DATE = new Date( 2022, 3, 14 ).getTime();
const MENU_POPOVER_PREFERENCE_KEY = 'dismissible-card-masterbar-collapsable-menu-popover';
+const READER_POPOVER_PREFERENCE_KEY = 'dismissible-card-masterbar-reader-popover';
const MOBILE_BREAKPOINT = '<480px';
const IS_RESPONSIVE_MENU_BREAKPOINT = '<782px';
@@ -78,6 +81,8 @@ class MasterbarLoggedIn extends Component {
isResponsiveMenu: isWithinBreakpoint( IS_RESPONSIVE_MENU_BREAKPOINT ),
// making the ref a state triggers a re-render when it changes (needed for popover)
menuBtnRef: null,
+ readerBtnRef: null,
+ readerPosition: null,
};
static propTypes = {
@@ -93,6 +98,7 @@ class MasterbarLoggedIn extends Component {
isCheckoutFailed: PropTypes.bool,
isInEditor: PropTypes.bool,
hasDismissedThePopover: PropTypes.bool,
+ hasDismissedReaderPopover: PropTypes.bool,
isUserNewerThanNewNavigation: PropTypes.bool,
loadHelpCenterIcon: PropTypes.bool,
isGlobalSidebarVisible: PropTypes.bool,
@@ -121,6 +127,27 @@ class MasterbarLoggedIn extends Component {
}
};
+ setupReaderPositionObserver() {
+ if ( this.props.sectionName !== 'home' && this.props.sectionGroup !== 'sites-dashboard' ) {
+ return;
+ }
+ const readerItem = document.querySelector( '.masterbar__reader' );
+ this.resizeObserver = new ResizeObserver(
+ debounce( () => {
+ const newRect = readerItem.getBoundingClientRect();
+ const readerPositionChanged =
+ ! this.lastReaderPosition ||
+ newRect.left !== this.lastReaderPosition.left ||
+ newRect.top !== this.lastReaderPosition.top;
+ if ( readerPositionChanged ) {
+ this.setState( { readerPosition: newRect } );
+ this.lastReaderPosition = newRect;
+ }
+ }, 100 )
+ );
+ this.resizeObserver.observe( readerItem );
+ }
+
componentDidMount() {
// Give a chance to direct URLs to open the sidebar on page load ( eg by clicking 'me' in wp-admin ).
const qryString = parse( document.location.search.replace( /^\?/, '' ) );
@@ -134,12 +161,20 @@ class MasterbarLoggedIn extends Component {
};
document.addEventListener( 'keydown', this.actionSearchShortCutListener );
this.subscribeToViewPortChanges();
+
+ // Observe if the position of the reader item has changed.
+ // Re-render to update the reader tooltip position.
+ this.setupReaderPositionObserver();
}
componentWillUnmount() {
document.removeEventListener( 'keydown', this.actionSearchShortCutListener );
this.unsubscribeToViewPortChanges?.();
this.unsubscribeResponsiveMenuViewPortChanges?.();
+
+ if ( this.resizeObserver ) {
+ this.resizeObserver.disconnect();
+ }
}
handleToggleMobileMenu = () => {
@@ -319,6 +354,10 @@ class MasterbarLoggedIn extends Component {
this.props.savePreference( MENU_POPOVER_PREFERENCE_KEY, true );
};
+ dismissReaderPopover = () => {
+ this.props.savePreference( READER_POPOVER_PREFERENCE_KEY, true );
+ };
+
renderCheckout() {
const {
isCheckoutPending,
@@ -520,30 +559,63 @@ class MasterbarLoggedIn extends Component {
}
renderReader() {
- const { translate } = this.props;
+ const { translate, sectionName, sectionGroup, isFetchingPrefs, hasDismissedReaderPopover } =
+ this.props;
+ const { readerBtnRef } = this.state;
return (
-
-
+
-
+
+
+ }
+ onClick={ this.clickReader }
+ isActive={ this.isActive( 'reader', true ) }
+ tooltip={ translate( 'Read the blogs and topics you follow' ) }
+ preloadSection={ this.preloadReader }
+ ref={ ( ref ) => ref !== readerBtnRef && this.setState( { readerBtnRef: ref } ) }
+ hasGlobalBorderStyle
+ />
+ { readerBtnRef && (
+
-
-
- }
- onClick={ this.clickReader }
- isActive={ this.isActive( 'reader', true ) }
- tooltip={ translate( 'Read the blogs and topics you follow' ) }
- preloadSection={ this.preloadReader }
- hasGlobalBorderStyle
- />
+
+ { translate( "We've moved the Reader!", {
+ comment: 'This is a popover title',
+ } ) }
+
+
+ { translate( 'Click the eyeglasses icon to check it out.' ) }
+
+
+
+ { translate( 'Got it', { comment: 'Got it, as in OK' } ) }
+
+
+
+ ) }
+
);
}
@@ -858,6 +930,7 @@ class MasterbarLoggedIn extends Component {
export default connect(
( state ) => {
const sectionGroup = getSectionGroup( state );
+ const sectionName = getSectionName( state );
// Falls back to using the user's primary site if no site has been selected
// by the user yet
@@ -881,6 +954,7 @@ export default connect(
siteAdminUrl: getSiteAdminUrl( state, siteId ),
siteHomeUrl: getSiteHomeUrl( state, siteId ),
sectionGroup,
+ sectionName,
domainOnlySite: isDomainOnlySite( state, siteId ),
hasNoSites: siteCount === 0,
user: getCurrentUser( state ),
@@ -894,6 +968,7 @@ export default connect(
isJetpackNotAtomic: isJetpackSite( state, siteId ) && ! isAtomicSite( state, siteId ),
currentLayoutFocus: getCurrentLayoutFocus( state ),
hasDismissedThePopover: getPreference( state, MENU_POPOVER_PREFERENCE_KEY ),
+ hasDismissedReaderPopover: getPreference( state, READER_POPOVER_PREFERENCE_KEY ),
isFetchingPrefs: isFetchingPreferences( state ),
// If the user is newer than new navigation shipping date, don't tell them this nav is new. Everything is new to them.
isUserNewerThanNewNavigation:
diff --git a/client/layout/masterbar/masterbar-cart/masterbar-cart-count.scss b/client/layout/masterbar/masterbar-cart/masterbar-cart-count.scss
index dfc5826fd7852f..624e8b2bccd353 100644
--- a/client/layout/masterbar/masterbar-cart/masterbar-cart-count.scss
+++ b/client/layout/masterbar/masterbar-cart/masterbar-cart-count.scss
@@ -7,7 +7,7 @@
text-align: center;
min-width: 0.5rem;
border-radius: 50%;
- background-color: #c9356e;
+ background-color: var(--studio-wordpress-blue);
top: 5px;
position: relative;
diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
index bf27a175f37d3a..0612c479b0d86f 100644
--- a/client/layout/masterbar/style.scss
+++ b/client/layout/masterbar/style.scss
@@ -1491,3 +1491,56 @@ a.masterbar__quick-language-switcher {
opacity: 1;
}
}
+
+.popover.masterbar__reader-popover {
+ z-index: 176;
+
+ .popover__arrow::before {
+ --color-border-inverted: var(--color-neutral-100);
+ }
+
+ .popover__arrow {
+ border: 10px dashed var(--color-neutral-70) !important;
+ border-bottom-style: solid !important;
+ border-top: none !important;
+ border-left-color: transparent !important;
+ border-right-color: transparent !important;
+ }
+ .popover__inner {
+ display: flex;
+ gap: 16px;
+ padding: 16px;
+ flex-direction: column;
+ align-items: flex-start;
+ border-radius: 4px !important;
+ background-color: var(--color-neutral-100) !important;
+ border: 1px solid var(--color-neutral-70) !important;
+ left: 0 !important;
+ }
+
+ .masterbar__reader-popover-heading {
+ font-size: rem(16px);
+ color: var(--color-text-inverted);
+ font-weight: 500;
+ }
+
+ .masterbar__reader-popover-description {
+ max-width: 325px;
+ margin-top: -8px;
+ margin-bottom: 0;
+ font-size: rem(13px);
+ color: var(--color-neutral-0);
+ text-align: left;
+ }
+
+ .masterbar__reader-popover-actions {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ width: 100%;
+ button {
+ padding: 4px 8px;
+ font-size: rem(13px);
+ }
+ }
+}
diff --git a/client/lib/checkout/payment-methods.tsx b/client/lib/checkout/payment-methods.tsx
index b781946830a3c2..8b6a4a40611203 100644
--- a/client/lib/checkout/payment-methods.tsx
+++ b/client/lib/checkout/payment-methods.tsx
@@ -65,6 +65,7 @@ export interface StoredPaymentMethodCard extends StoredPaymentMethodBase {
card_iin: string;
card_last_4: string;
card_zip: string;
+ display_brand: string | null;
}
export interface StoredPaymentMethodEbanx extends StoredPaymentMethodBase {
@@ -117,7 +118,7 @@ interface ImagePathsMap {
const CREDIT_CARD_SELECTED_PATHS: ImagePathsMap = {
amex: creditCardAmexImage,
- cb: creditCardCartesBancairesImage,
+ cartes_bancaires: creditCardCartesBancairesImage,
diners: creditCardDinersImage,
discover: creditCardDiscoverImage,
jcb: creditCardJCBImage,
@@ -160,8 +161,7 @@ export const PaymentMethodSummary = ( {
displayType = translate( 'American Express' );
break;
- case 'cartes bancaires':
- case 'cb':
+ case 'cartes_bancaires':
displayType = translate( 'Cartes Bancaires' );
break;
diff --git a/client/lib/purchases/index.ts b/client/lib/purchases/index.ts
index d474f2d578db1b..d9ebae4e99f1fa 100644
--- a/client/lib/purchases/index.ts
+++ b/client/lib/purchases/index.ts
@@ -851,12 +851,15 @@ export function subscribedWithinPastWeek( purchase: Purchase ) {
/**
* Returns the payment logo to display based on the payment method
+ * 'displayBrand' respects the customer's card brand choice if available
* @param {Object} purchase - the purchase with which we are concerned
* @returns {string|null} the payment logo type, or null if no payment type is set.
*/
export function paymentLogoType( purchase: Purchase ): string | null | undefined {
if ( isPaidWithCreditCard( purchase ) ) {
- return purchase.payment.creditCard?.type;
+ return purchase.payment.creditCard?.displayBrand
+ ? purchase.payment.creditCard?.displayBrand
+ : purchase.payment.creditCard?.type;
}
if ( isPaidWithPayPalDirect( purchase ) ) {
diff --git a/client/login/magic-login/index.jsx b/client/login/magic-login/index.jsx
index 2606efdfaf7580..7e69949a6c2ac7 100644
--- a/client/login/magic-login/index.jsx
+++ b/client/login/magic-login/index.jsx
@@ -612,6 +612,9 @@ class MagicLogin extends Component {
const eventOptions = { client_id: oauth2Client.id, client_name: oauth2Client.title };
const isFromGravatar3rdPartyApp =
isGravatarOAuth2Client( oauth2Client ) && query?.gravatar_from === '3rd-party';
+ const isGravatarFlowWithEmail = !! (
+ isGravatarFlowOAuth2Client( oauth2Client ) && query?.email_address
+ );
this.emailToSha256( usernameOrEmail ).then( ( email ) =>
this.setState( { hashedEmail: email } )
@@ -713,7 +716,7 @@ class MagicLogin extends Component {
{ translate( 'Continue' ) }