| 1 |
/** |
| 2 |
* Onboarding checklist. |
| 3 |
* |
| 4 |
* The wizard's three steps, each with a button to where it gets done, then a |
| 5 |
* warning when no payment gateway is on — onboarding can be finished without |
| 6 |
* one, but no customer can pay. Once the steps are done the card shrinks to a |
| 7 |
* single line that still opens the wizard, so it can be run again for another |
| 8 |
* plan; the gateway warning stays until a gateway is on. |
| 9 |
*/ |
| 10 |
|
| 11 |
import { __, sprintf } from "@wordpress/i18n"; |
| 12 |
// TODO(refactor): replace @wordpress/components with our `wpsubs-*` admin |
| 13 |
// components (wpsubs-table-card, wpsubs-btn, …) — see src/dashboard/index.js. |
| 14 |
import { Card, CardHeader, CardBody, Button } from "@wordpress/components"; |
| 15 |
import Icon from "./Icon"; |
| 16 |
|
| 17 |
function Count({ setup }) { |
| 18 |
return ( |
| 19 |
<span className="subscrpt-setup__count"> |
| 20 |
{sprintf( |
| 21 |
/* translators: 1: steps done, 2: steps total. */ |
| 22 |
__("%1$d of %2$d done", "subscription"), |
| 23 |
setup.done, |
| 24 |
setup.total, |
| 25 |
)} |
| 26 |
</span> |
| 27 |
); |
| 28 |
} |
| 29 |
|
| 30 |
function WizardLink({ wizard }) { |
| 31 |
return ( |
| 32 |
<a className="subscrpt-setup__wizard" href={wizard.url}> |
| 33 |
{wizard.label} |
| 34 |
<span aria-hidden="true">→</span> |
| 35 |
</a> |
| 36 |
); |
| 37 |
} |
| 38 |
|
| 39 |
function GatewayWarning({ gateway }) { |
| 40 |
return ( |
| 41 |
<div className="subscrpt-setup__warning"> |
| 42 |
<span className="subscrpt-setup__warning-icon"> |
| 43 |
<Icon name="alert" size={16} /> |
| 44 |
</span> |
| 45 |
<div className="subscrpt-setup__warning-body"> |
| 46 |
<p className="subscrpt-setup__warning-title">{gateway.title}</p> |
| 47 |
<p className="subscrpt-setup__warning-text">{gateway.text}</p> |
| 48 |
<Button variant="secondary" size="small" href={gateway.action.url}> |
| 49 |
{gateway.action.label} |
| 50 |
</Button> |
| 51 |
</div> |
| 52 |
</div> |
| 53 |
); |
| 54 |
} |
| 55 |
|
| 56 |
export default function SetupChecklist({ setup }) { |
| 57 |
if (setup.complete) { |
| 58 |
return ( |
| 59 |
<Card className="subscrpt-setup is-complete"> |
| 60 |
<CardBody> |
| 61 |
<div className="subscrpt-setup__summary"> |
| 62 |
<div> |
| 63 |
<h2 className="subscrpt-heading">{__("Onboarding", "subscription")}</h2> |
| 64 |
<Count setup={setup} /> |
| 65 |
</div> |
| 66 |
<WizardLink wizard={setup.wizard} /> |
| 67 |
</div> |
| 68 |
{setup.gateway && <GatewayWarning gateway={setup.gateway} />} |
| 69 |
</CardBody> |
| 70 |
</Card> |
| 71 |
); |
| 72 |
} |
| 73 |
|
| 74 |
const percent = Math.round((setup.done / setup.total) * 100); |
| 75 |
|
| 76 |
return ( |
| 77 |
<Card className="subscrpt-setup"> |
| 78 |
<CardHeader> |
| 79 |
<div> |
| 80 |
<h2 className="subscrpt-heading">{__("Onboarding", "subscription")}</h2> |
| 81 |
<p className="subscrpt-sub">{__("Your first plan, step by step.", "subscription")}</p> |
| 82 |
</div> |
| 83 |
<Count setup={setup} /> |
| 84 |
</CardHeader> |
| 85 |
|
| 86 |
<CardBody> |
| 87 |
<div |
| 88 |
className="subscrpt-progress" |
| 89 |
role="progressbar" |
| 90 |
aria-valuenow={setup.done} |
| 91 |
aria-valuemin={0} |
| 92 |
aria-valuemax={setup.total} |
| 93 |
> |
| 94 |
<span className="subscrpt-progress__bar" style={{ width: `${percent}%` }} /> |
| 95 |
</div> |
| 96 |
|
| 97 |
<ul className="subscrpt-steps"> |
| 98 |
{setup.items.map((item) => ( |
| 99 |
<li key={item.id} className={`subscrpt-step${item.done ? " is-done" : ""}`}> |
| 100 |
<span className="subscrpt-step__mark">{item.done ? <Icon name="check" size={13} /> : null}</span> |
| 101 |
<span className="subscrpt-step__label">{item.label}</span> |
| 102 |
{item.done ? ( |
| 103 |
<span className="subscrpt-step__state">{__("Done", "subscription")}</span> |
| 104 |
) : ( |
| 105 |
<Button variant="secondary" size="small" href={item.action.url}> |
| 106 |
{item.action.label} |
| 107 |
</Button> |
| 108 |
)} |
| 109 |
</li> |
| 110 |
))} |
| 111 |
</ul> |
| 112 |
|
| 113 |
{setup.gateway && <GatewayWarning gateway={setup.gateway} />} |
| 114 |
|
| 115 |
<div className="subscrpt-setup__footer"> |
| 116 |
<WizardLink wizard={setup.wizard} /> |
| 117 |
</div> |
| 118 |
</CardBody> |
| 119 |
</Card> |
| 120 |
); |
| 121 |
} |
| 122 |
|
