| 1 |
import {useMemo, useState} from 'react'; |
| 2 |
import {Tab, TabList, TabPanel, Tabs} from 'react-aria-components'; |
| 3 |
import {__, sprintf} from '@wordpress/i18n'; |
| 4 |
|
| 5 |
import {MustHaveAddons} from './MustHaveAddons'; |
| 6 |
import {AdditionalAddons} from './AdditionalAddons'; |
| 7 |
import {PricingPlans} from './PricingPlans'; |
| 8 |
import {FreeAddOnTab} from './FreeAddOnTab'; |
| 9 |
import {assetUrl} from '../utils'; |
| 10 |
import styles from './AddonsAdminPage.module.css'; |
| 11 |
|
| 12 |
export function AddonsAdminPage({startingTab = 0}) { |
| 13 |
// We control the tabs only so we can use `tabIndex` to change the decor. |
| 14 |
const [tabIndex, setTabIndex] = useState(startingTab); |
| 15 |
const addonDecorAssets = useMemo( |
| 16 |
() => |
| 17 |
[ |
| 18 |
'images/addons-admin-page-decor-1.png', |
| 19 |
'images/addons-admin-page-decor-2.png', |
| 20 |
'images/addons-admin-page-decor-3.png', |
| 21 |
'images/addons-admin-page-decor-4.png', |
| 22 |
].map(assetUrl), |
| 23 |
[] |
| 24 |
); |
| 25 |
|
| 26 |
return ( |
| 27 |
<Tabs |
| 28 |
as="article" |
| 29 |
style={{'--decor': `url("${addonDecorAssets[tabIndex]}")`}} |
| 30 |
className={styles.root} |
| 31 |
index={tabIndex} |
| 32 |
onChange={setTabIndex} |
| 33 |
> |
| 34 |
<div className={styles.header}> |
| 35 |
<div className={styles.container}> |
| 36 |
<h1> |
| 37 |
<a href="https://givewp.com" target="_blank" rel="noopener"> |
| 38 |
<img |
| 39 |
className={styles.logo} |
| 40 |
src={assetUrl('images/givewp-logo.png')} |
| 41 |
alt={__('GiveWP', 'give')} |
| 42 |
/> |
| 43 |
</a> |
| 44 |
</h1> |
| 45 |
<aside |
| 46 |
className={styles.sourceNotice} |
| 47 |
dangerouslySetInnerHTML={{ |
| 48 |
__html: sprintf( |
| 49 |
/* translators: 1: Text before anchor html tag 2: Open anchor html tag 3: Website name 4: Close anchor tag*/ |
| 50 |
'%1$s %2$s%3$s%4$s', |
| 51 |
__('This page is loaded from', 'give'), |
| 52 |
'<a href="https://givewp.com" rel="noopener" target="_blank">', |
| 53 |
__('GiveWP.com', 'give'), |
| 54 |
'</a>' |
| 55 |
), |
| 56 |
}} |
| 57 |
/> |
| 58 |
<TabList className={styles.tabs}> |
| 59 |
<Tab id="tab-1">{__('View Pricing Plans', 'give')}</Tab> |
| 60 |
<Tab id="tab-2">{__('Must Have Add-ons', 'give')}</Tab> |
| 61 |
<Tab id="tab-3">{__('Additional Add-ons', 'give')}</Tab> |
| 62 |
<Tab id="tab-4">{__('Get a Free Add-on!', 'give')}</Tab> |
| 63 |
</TabList> |
| 64 |
</div> |
| 65 |
</div> |
| 66 |
<div className={styles.container}> |
| 67 |
<TabPanel id="tab-1"> |
| 68 |
<PricingPlans /> |
| 69 |
</TabPanel> |
| 70 |
<TabPanel id="tab-2"> |
| 71 |
<MustHaveAddons /> |
| 72 |
</TabPanel> |
| 73 |
<TabPanel id="tab-3"> |
| 74 |
<AdditionalAddons /> |
| 75 |
</TabPanel> |
| 76 |
<TabPanel id="tab-4"> |
| 77 |
<FreeAddOnTab /> |
| 78 |
</TabPanel> |
| 79 |
</div> |
| 80 |
</Tabs> |
| 81 |
); |
| 82 |
} |
| 83 |
|
