| 1 |
# Settings App |
| 2 |
|
| 3 |
The Settings App is a React 18 application powering the CartFlows admin dashboard, analytics views, flows list, and global settings. It is compiled to `admin-core/assets/build/settings-app.js`. |
| 4 |
|
| 5 |
## Entry Point |
| 6 |
|
| 7 |
**File:** `admin-core/assets/src/SettingsApp.js` |
| 8 |
|
| 9 |
The settings app mounts on a dedicated DOM element rendered by the CartFlows admin menu page. It uses `SettingsRoute.js` for in-app navigation. |
| 10 |
|
| 11 |
## Directory Structure |
| 12 |
|
| 13 |
``` |
| 14 |
admin-core/assets/src/settings-app/ |
| 15 |
├── pages/ |
| 16 |
│ ├── HomePage.js ← Analytics dashboard with charts |
| 17 |
│ ├── FlowsPage.js ← Flows list and management |
| 18 |
│ └── Analytics.js ← Detailed analytics view |
| 19 |
├── hooks/ |
| 20 |
│ └── usePublishedFlows.js ← Custom hook for published flows data |
| 21 |
├── data/ |
| 22 |
│ └── reducer.js ← Redux reducer for settings state |
| 23 |
└── utils/ |
| 24 |
├── analytics-helpers.js ← Analytics calculation utilities |
| 25 |
└── InputEvents.js ← Input event handlers |
| 26 |
``` |
| 27 |
|
| 28 |
## Pages |
| 29 |
|
| 30 |
### Home Page (Analytics Dashboard) |
| 31 |
|
| 32 |
**File:** `settings-app/pages/HomePage.js` |
| 33 |
|
| 34 |
The home page is an analytics dashboard displaying key funnel metrics. It renders the following chart components: |
| 35 |
|
| 36 |
**Conversion Metrics** |
| 37 |
| Chart | Metric | |
| 38 |
|-------|--------| |
| 39 |
| `TotalConversions` | Total completed purchases | |
| 40 |
| `TotalPageViews` | Total funnel page views | |
| 41 |
| `MobileConversions` | Conversions from mobile devices | |
| 42 |
| `LaptopConversions` | Conversions from desktop | |
| 43 |
| `AverageOrderValue` | Average order value across funnels | |
| 44 |
|
| 45 |
**Revenue Metrics** |
| 46 |
| Chart | Metric | |
| 47 |
|-------|--------| |
| 48 |
| `RevenuePerUniqueVisitor` | Revenue generated per unique visitor | |
| 49 |
| `RevenuePerVisit` | Revenue generated per visit | |
| 50 |
| `OfferRevenue` | Revenue from upsell/downsell offers | |
| 51 |
| `BumpOfferRevenue` | Revenue from order bumps | |
| 52 |
|
| 53 |
**Offer Metrics** |
| 54 |
| Chart | Metric | |
| 55 |
|-------|--------| |
| 56 |
| `OfferConversions` | Upsell/downsell acceptance rate | |
| 57 |
| `BumpConversions` | Order bump acceptance rate | |
| 58 |
|
| 59 |
**Optin Metrics** |
| 60 |
| Chart | Metric | |
| 61 |
|-------|--------| |
| 62 |
| `OptinListGrowth` | Growth of opt-in subscribers over time | |
| 63 |
| `OptinTotalSubmissions` | Total opt-in form submissions | |
| 64 |
| `OptinConversionRate` | Opt-in form conversion rate | |
| 65 |
|
| 66 |
**Summary Widgets** |
| 67 |
| Widget | Purpose | |
| 68 |
|--------|---------| |
| 69 |
| `TopPerformingFunnels` | List of highest-converting funnels | |
| 70 |
| `QuickActions` | Shortcuts to common tasks | |
| 71 |
| `RecentOrders` | Latest WooCommerce orders | |
| 72 |
| `ExtendYourStore` | Upsell / feature discovery widget | |
| 73 |
|
| 74 |
### Flows Page |
| 75 |
|
| 76 |
**File:** `settings-app/pages/FlowsPage.js` |
| 77 |
|
| 78 |
Lists all CartFlows funnels with: |
| 79 |
- Funnel name, status, and step count |
| 80 |
- Quick edit and delete actions |
| 81 |
- Create new flow button |
| 82 |
- Filter by status (published, draft, trash) |
| 83 |
- Pagination |
| 84 |
|
| 85 |
### Analytics Page |
| 86 |
|
| 87 |
**File:** `settings-app/pages/Analytics.js` |
| 88 |
|
| 89 |
Detailed analytics broken down by funnel type: |
| 90 |
|
| 91 |
**Analytics Tables** |
| 92 |
| Table | Purpose | |
| 93 |
|-------|---------| |
| 94 |
| `FunnelsTable` | Per-funnel conversion metrics | |
| 95 |
| `OptinOverviewTable` | Opt-in funnel performance overview | |
| 96 |
| `StepsConversionTable` | Step-by-step conversion drop-off | |
| 97 |
| `ProductConversionTable` | Per-product performance | |
| 98 |
|
| 99 |
Sub-views: Flows analytics, Optin analytics, Conversions analytics. |
| 100 |
|
| 101 |
## Global Settings |
| 102 |
|
| 103 |
The settings app also hosts the global settings form: |
| 104 |
|
| 105 |
**Directory:** `admin-core/assets/src/common/global-settings/` |
| 106 |
|
| 107 |
| Component | Purpose | |
| 108 |
|-----------|---------| |
| 109 |
| `SettingsPage` | Settings page wrapper | |
| 110 |
| `SettingsContent` | Settings field groups renderer | |
| 111 |
|
| 112 |
Settings are saved via REST API to the `cartflows_global_settings` WordPress option. |
| 113 |
|
| 114 |
## Navigation |
| 115 |
|
| 116 |
**File:** `admin-core/assets/src/SettingsRoute.js` |
| 117 |
|
| 118 |
React Router v5 handles navigation between settings app views: |
| 119 |
|
| 120 |
| Route | Component | |
| 121 |
|-------|-----------| |
| 122 |
| `/` | Home / Dashboard | |
| 123 |
| `/flows` | Flows list | |
| 124 |
| `/analytics` | Analytics | |
| 125 |
| `/settings` | Global settings | |
| 126 |
|
| 127 |
## State Management |
| 128 |
|
| 129 |
The settings app uses a Redux reducer (`data/reducer.js`) for managing: |
| 130 |
- List of flows and their metadata |
| 131 |
- Analytics data from the REST API |
| 132 |
- UI state (active tab, loading states, filters) |
| 133 |
|
| 134 |
Data is fetched via `@wordpress/api-fetch` calling `cartflows/v1` REST endpoints. |
| 135 |
|
| 136 |
## Charts Library |
| 137 |
|
| 138 |
Analytics charts use **ApexCharts** (v4.x) via the `react-apexcharts` wrapper. Charts are configured with: |
| 139 |
- Area/line charts for time-series data |
| 140 |
- Bar charts for comparison metrics |
| 141 |
- Responsive configuration for different screen sizes |
| 142 |
|
| 143 |
## Related Pages |
| 144 |
|
| 145 |
- [](Frontend-ArchitectureFrontend-Architecture](Frontend-Architecture](Frontend-Architecture) |
| 146 |
- [](Editor-AppEditor-App](Editor-App](Editor-App) |
| 147 |
- [](State-ManagementState-Management](State-Management](State-Management) |
| 148 |
- [](REST-API-ReferenceREST-API-Reference](REST-API-Reference](REST-API-Reference) |
| 149 |
- [](Build-SystemBuild-System](Build-System](Build-System) |
| 150 |
|
