JSX.Element;
+ /** number between 0 - 100 */
+ progress: number;
+};
+
+export type ComponentProps = {
+ navigationProgress: number | undefined;
+ sendEvent: unknown;
+ context: CoreProfilerStateMachineContext;
+};
+
+/**
+ * Does a depth-first search of a meta object to find the first instance of a component.
+ */
+export function findComponentMeta(
+ obj: Record< string, unknown >
+): ComponentMeta | undefined {
+ for ( const key in obj ) {
+ if ( key === 'component' ) {
+ return obj as ComponentMeta;
+ } else if ( typeof obj[ key ] === 'object' && obj[ key ] !== null ) {
+ const found = findComponentMeta(
+ obj[ key ] as Record< string, unknown >
+ );
+ if ( found !== undefined ) {
+ return found;
+ }
+ }
+ }
+
+ return undefined;
+}
diff --git a/plugins/woocommerce-admin/client/core-profiler/get-loader-stage-meta.tsx b/plugins/woocommerce-admin/client/core-profiler/utils/get-loader-stage-meta.tsx
similarity index 86%
rename from plugins/woocommerce-admin/client/core-profiler/get-loader-stage-meta.tsx
rename to plugins/woocommerce-admin/client/core-profiler/utils/get-loader-stage-meta.tsx
index ea76e4b0a99..f9115e742e7 100644
--- a/plugins/woocommerce-admin/client/core-profiler/get-loader-stage-meta.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/utils/get-loader-stage-meta.tsx
@@ -6,11 +6,11 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import LightBulbImage from './assets/images/loader-lightbulb.svg';
-import DevelopingImage from './assets/images/loader-developing.svg';
-import LayoutImage from './assets/images/loader-layout.svg';
+import LightBulbImage from '../assets/images/loader-lightbulb.svg';
+import DevelopingImage from '../assets/images/loader-developing.svg';
+import LayoutImage from '../assets/images/loader-layout.svg';
-import { Stages } from './pages/Loader';
+import { Stages } from '../pages/Loader';
const LightbulbStage = {
title: __( 'Turning on the lights', 'woocommerce' ),
diff --git a/plugins/woocommerce-admin/client/core-profiler/utils/test/find-component.test.tsx b/plugins/woocommerce-admin/client/core-profiler/utils/test/find-component.test.tsx
new file mode 100644
index 00000000000..49facb15e36
--- /dev/null
+++ b/plugins/woocommerce-admin/client/core-profiler/utils/test/find-component.test.tsx
@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import { findComponentMeta, ComponentProps } from '../find-component';
+
+describe( 'findComponentMeta', () => {
+ it( 'should return the whole object once "component" key is found in a nested object', () => {
+ const obj: Record< string, unknown > = {
+ 'coreProfiler.skipGuidedSetup.skipFlowBusinessLocation': {
+ component: ( props: ComponentProps ) => (
+
{ props.context }
+ ),
+ progress: 50,
+ },
+ };
+
+ const result = findComponentMeta( obj );
+ expect( result ).toEqual( {
+ component: expect.any( Function ),
+ progress: 50,
+ } );
+ } );
+
+ it( 'should return undefined if no "component" key is present', () => {
+ const obj: Record< string, unknown > = {
+ a: 1,
+ b: {
+ key: 'value',
+ },
+ c: 2,
+ };
+
+ const result = findComponentMeta( obj );
+ expect( result ).toBeUndefined();
+ } );
+
+ it( 'should handle deeply nested objects', () => {
+ const obj: Record< string, unknown > = {
+ a: 1,
+ b: {
+ key: 'value',
+ nested: {
+ anotherKey: 'anotherValue',
+ component: ( props: ComponentProps ) => (
+
{ props.context }
+ ),
+ progress: 100,
+ },
+ },
+ c: 2,
+ };
+
+ const result = findComponentMeta( obj );
+ expect( result ).toEqual( {
+ anotherKey: 'anotherValue',
+ component: expect.any( Function ),
+ progress: 100,
+ } );
+ } );
+} );
diff --git a/plugins/woocommerce/changelog/dev-refactor-core-profiler-pages b/plugins/woocommerce/changelog/dev-refactor-core-profiler-pages
new file mode 100644
index 00000000000..da6d4ca877e
--- /dev/null
+++ b/plugins/woocommerce/changelog/dev-refactor-core-profiler-pages
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Refactored core profiler state machine by modularising each page