| 1 |
/** |
| 2 |
* Dashboard layout. |
| 3 |
* |
| 4 |
* Figures across the top, then the store's shape on the left with everything |
| 5 |
* that wants doing on the right, then where to go next. |
| 6 |
*/ |
| 7 |
|
| 8 |
import { __ } from "@wordpress/i18n"; |
| 9 |
// TODO(refactor): replace @wordpress/components with our `wpsubs-*` admin |
| 10 |
// components (wpsubs-table-card, wpsubs-btn, …) — see src/dashboard/index.js. |
| 11 |
import { Card, CardHeader, CardBody, Button } from "@wordpress/components"; |
| 12 |
import StatTiles from "./StatTiles"; |
| 13 |
import SalesChart from "./SalesChart"; |
| 14 |
import HealthBanner from "./HealthBanner"; |
| 15 |
import SetupChecklist from "./SetupChecklist"; |
| 16 |
import BuildCards from "./BuildCards"; |
| 17 |
import FooterLinks from "./FooterLinks"; |
| 18 |
import ProBadge from "./ProBadge"; |
| 19 |
|
| 20 |
export default function App({ data }) { |
| 21 |
const { pulse = [], chart, health, setup, build = [], footer = [] } = data; |
| 22 |
|
| 23 |
return ( |
| 24 |
<div className="subscrpt-dash"> |
| 25 |
<Card className="subscrpt-dash__pulse"> |
| 26 |
<CardHeader> |
| 27 |
<div> |
| 28 |
<h2 className="subscrpt-heading">{__("Subscription pulse", "subscription")}</h2> |
| 29 |
<p className="subscrpt-sub"> |
| 30 |
{__("Live counts of subscriptions and renewal activity in your store.", "subscription")} |
| 31 |
</p> |
| 32 |
</div> |
| 33 |
</CardHeader> |
| 34 |
<CardBody> |
| 35 |
<StatTiles items={pulse} /> |
| 36 |
</CardBody> |
| 37 |
</Card> |
| 38 |
|
| 39 |
<div className="subscrpt-dash__split"> |
| 40 |
<div className="subscrpt-dash__main"> |
| 41 |
{chart && ( |
| 42 |
<Card> |
| 43 |
<CardHeader> |
| 44 |
<div> |
| 45 |
<h2 className="subscrpt-heading">{__("Monthly sales", "subscription")}</h2> |
| 46 |
<p className="subscrpt-sub">{__("Revenue from subscription orders.", "subscription")}</p> |
| 47 |
</div> |
| 48 |
<Button variant="tertiary" href={chart.url}> |
| 49 |
{__("Open reports", "subscription")} |
| 50 |
{chart.pro && " "} |
| 51 |
{chart.pro && <ProBadge />} |
| 52 |
</Button> |
| 53 |
</CardHeader> |
| 54 |
<CardBody> |
| 55 |
<SalesChart chart={chart} /> |
| 56 |
</CardBody> |
| 57 |
</Card> |
| 58 |
)} |
| 59 |
</div> |
| 60 |
|
| 61 |
<aside className="subscrpt-dash__aside"> |
| 62 |
{health && <HealthBanner health={health} />} |
| 63 |
{setup && <SetupChecklist setup={setup} />} |
| 64 |
</aside> |
| 65 |
</div> |
| 66 |
|
| 67 |
<BuildCards cards={build} /> |
| 68 |
<FooterLinks links={footer} /> |
| 69 |
</div> |
| 70 |
); |
| 71 |
} |
| 72 |
|
