give / src / Promotions / WelcomeBanner / resources / js / app / components / Sections / RightContentSection.tsx

RightContentSection.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.18.0, at src/Promotions/WelcomeBanner/resources/js/app/components/Sections/RightContentSection.tsx

48 lines 1.8 KB

Raw Download Zip

1	import {__} from '@wordpress/i18n';
2	import SpotLight from '../SpotLight';
3	import VideoPlayer from '../VideoPlayer';
4	import './styles.scss';
5
6	type RightContentSectionProps = {
7	assets: string;
8	};
9
10	/**
11	* @since 3.6.0 Replace custom fields spotlight with event tickets
12	* @since 3.0.0
13	*/
14	export default function RightContentSection({assets}: RightContentSectionProps) {
15	return (
16	<section className={'givewp-welcome-banner-right-content'}>
17	<h2>{__('Spotlight on awesome features', 'give')}</h2>
18	<div className={'givewp-welcome-banner-right-content__media-container'}>
19	<SpotLight
20	title={
21	<>
22	{__('Event tickets', 'give')} <span className={'givewp-beta-icon'}>BETA</span>
23	</>
24	}
25	description={__(
26	'Easily connect your events to your donation form. To enable this go to Settings > General > Beta Features and enable event tickets',
27	'give'
28	)}
29	>
30	<VideoPlayer
31	src={`${assets}/event-tickets.mp4`}
32	fallbackImage={`${assets}/event-tickets.min.png`}
33	/>
34	</SpotLight>
35	<SpotLight
36	title={__('Design mode', 'give')}
37	description={__(
38	'See exactly what your form looks like for potential donors using the “Design” tab of the builder. Changes are visible immediately.',
39	'give'
40	)}
41	>
42	<VideoPlayer src={`${assets}/design-mode.mp4`} fallbackImage={`${assets}/design-mode.min.png`} />
43	</SpotLight>
44	</div>
45	</section>
46	);
47	}
48