Feature: Add event tickets block, field template (#7217)

src/EventTickets/Actions/EnqueueDonationFormScripts.php

@@ -2,13 +2,30 @@
 
 namespace Give\EventTickets\Actions;
 
+use Give\Framework\EnqueueScript;
+
 /**
  * @unreleased
  */
 class EnqueueDonationFormScripts
 {
     public function __invoke()
     {
-        //
+        $scriptAsset = require GIVE_PLUGIN_DIR . 'build/eventTicketsTemplate.asset.php';
+
+        (new EnqueueScript(
+            'givewp-event-tickets-template',
+            'build/eventTicketsTemplate.js',
+            GIVE_PLUGIN_DIR,
+            GIVE_PLUGIN_URL,
+            'give'
+        ))->enqueue();
+
+        wp_enqueue_style(
+            'givewp-event-tickets-template',
+            GIVE_PLUGIN_URL . 'build/eventTicketsTemplate.css',
+            [],
+            $scriptAsset['version']
+        );
     }
 }

src/EventTickets/Actions/EnqueueFormBuilderScripts.php

@@ -2,13 +2,77 @@
 
 namespace Give\EventTickets\Actions;
 
+use Give\Framework\EnqueueScript;
+
 /**
  * @unreleased
  */
 class EnqueueFormBuilderScripts
 {
     public function __invoke()
     {
-        //
+        $scriptAsset = require GIVE_PLUGIN_DIR . 'build/eventTicketsBlock.asset.php';
+
+        (new EnqueueScript(
+            'givewp-event-tickets-block',
+            'build/eventTicketsBlock.js',
+            GIVE_PLUGIN_DIR,
+            GIVE_PLUGIN_URL,
+            'give'
+        ))->enqueue();
+
+        wp_localize_script(
+            'givewp-event-tickets-block',
+            'eventTicketsBlockSettings',
+            [
+                'events' => [
+                    [
+                        'id' => 1,
+                        'title' => 'Event 1',
+                        'date' => '2024-01-10 10:00',
+                        'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+                        'tickets' => [
+                            [
+                                'id' => 1,
+                                'name' => 'Standard',
+                                'price' => 50,
+                                'quantity' => 5,
+                                'description' => 'Standard ticket description goes here',
+                            ],
+                            [
+                                'id' => 2,
+                                'name' => 'VIP',
+                                'price' => 100,
+                                'quantity' => 5,
+                                'description' => 'VIP ticket description goes here',
+                            ],
+                        ],
+                    ],
+                ],
+                // TODO: Update this to fetch events from the database
+                'createEventUrl' => admin_url('edit.php?post_type=give_forms&page=give-event-tickets&action=new'),
+                //TODO: Update this with the correct URL
+                'listEventsUrl' => admin_url('edit.php?post_type=give_forms&page=give-event-tickets'),
+                //TODO: Update this with the correct URL
+                'ticketsLabel' => apply_filters(
+                    'givewp_event_tickets_block/tickets_label',
+                    __('Select Tickets', 'give')
+                ),
+                'soldOutMessage' => apply_filters(
+                    'givewp_event_tickets_block/sold_out_message',
+                    __(
+                        'Thank you for supporting our cause. Our fundraising event tickets are officially sold out. You can still contribute by making a donation.',
+                        'give'
+                    )
+                ),
+            ]
+        );
+
+        wp_enqueue_style(
+            'givewp-event-tickets-block',
+            GIVE_PLUGIN_URL . 'build/eventTicketsBlock.css',
+            [],
+            $scriptAsset['version']
+        );
     }
 }

src/EventTickets/resources/blocks/EventTicketsBlock/Edit/BlockInspectorControls.tsx

@@ -0,0 +1,43 @@
+import {InspectorControls} from '@wordpress/block-editor';
+import {PanelBody, PanelRow, SelectControl} from '@wordpress/components';
+import {createInterpolateElement} from '@wordpress/element';
+import {__} from '@wordpress/i18n';
+import CreateEventNotice from './components/CreateEventNotice';
+
+/**
+ * @unreleased
+ */
+export default function BlockInspectorControls({attributes, setAttributes}) {
+    const {events} = window.eventTicketsBlockSettings;
+    const {eventId} = attributes;
+
+    const eventOptions =
+        events.map((event) => {
+            return {label: event.title, value: `${event.id}`};
+        }) ?? [];
+
+    return (
+        <InspectorControls>
+            <PanelBody title={__('Event', 'give')} initialOpen={true}>
+                {events.length === 0 ? (
+                    <CreateEventNotice />
+                ) : (
+                    <PanelRow>
+                        <SelectControl
+                            label={__('Event Name', 'give')}
+                            help={createInterpolateElement(
+                                __('Add or edit an event in the <a>events page</a>.', 'give'),
+                                {
+                                    a: <a href={window.eventTicketsBlockSettings.listEventsUrl} target="_blank" />,
+                                }
+                            )}
+                            value={`${eventId}`}
+                            options={[{label: 'Select', value: ''}, ...eventOptions]}
+                            onChange={(value: string) => setAttributes({eventId: Number(value)})}
+                        />
+                    </PanelRow>
+                )}
+            </PanelBody>
+        </InspectorControls>
+    );
+}

src/EventTickets/resources/blocks/EventTicketsBlock/Edit/BlockPlaceholder.tsx

@@ -0,0 +1,34 @@
+import EventTicketsHeader from '../../../components/EventTicketsHeader';
+import EventTicketsDescription from '../../../components/EventTicketsDescription';
+import EventTicketsList from '../../../components/EventTicketsList';
+import {getWindowData} from '@givewp/form-builder/common';
+
+/**
+ * @unreleased
+ */
+export default function BlockPlaceholder({attributes}) {
+    const {events, ticketsLabel, soldOutMessage} = window.eventTicketsBlockSettings;
+    const event = events.find((event) => event.id === attributes.eventId);
+    const {currency} = getWindowData();
+
+    if (!event || !event.tickets.length) {
+        return null;
+    }
+
+    return (
+        <div className={'givewp-event-tickets-block__placeholder'}>
+            <div className={'givewp-event-tickets'}>
+                <EventTicketsHeader title={event.title} date={event.date} />
+
+                {event.description && <EventTicketsDescription description={event.description} />}
+
+                <EventTicketsList
+                    tickets={event.tickets}
+                    ticketsLabel={ticketsLabel}
+                    soldOutMessage={soldOutMessage}
+                    currency={currency}
+                />
+            </div>
+        </div>
+    );
+}

src/EventTickets/resources/blocks/EventTicketsBlock/Edit/BlockPlaceholderNoEvents.tsx

@@ -0,0 +1,23 @@
+import {__} from '@wordpress/i18n';
+import {createInterpolateElement} from '@wordpress/element';
+
+/**
+ * @unreleased
+ */
+export default function BlockPlaceholderNoEvents() {
+    return (
+        <div className={'givewp-event-tickets-block__placeholder--no-events'}>
+            <p>
+                {createInterpolateElement(
+                    __(
+                        'No events created yet. Go to the <a>events page</a> to create and manage your own event.',
+                        'give'
+                    ),
+                    {
+                        a: <a href={window.eventTicketsBlockSettings.listEventsUrl} target="_blank" />,
+                    }
+                )}
+            </p>
+        </div>
+    );
+}

src/EventTickets/resources/blocks/EventTicketsBlock/Edit/BlockPlaceholderSelectEvent.tsx

@@ -0,0 +1,27 @@
+import {__} from '@wordpress/i18n';
+import {SelectControl} from '@wordpress/components';
+
+/**
+ * @unreleased
+ */
+export default function BlockPlaceholderSelectEvent({attributes, setAttributes}) {
+    const {events} = window.eventTicketsBlockSettings;
+    const eventOptions =
+        events.map((event) => {
+            return {label: event.title, value: `${event.id}`};
+        }) ?? [];
+
+    return (
+        <div className={'givewp-event-tickets-block__placeholder--select-event'}>
+            <p>
+                <strong>{__('No event selected yet', 'give')}</strong>
+            </p>
+            <SelectControl
+                label={__('Select your preferred event for this donation form', 'give')}
+                value={`${attributes.eventId}`}
+                options={[{label: 'Select', value: ''}, ...eventOptions]}
+                onChange={(value: string) => setAttributes({eventId: Number(value)})}
+            />
+        </div>
+    );
+}

src/EventTickets/resources/blocks/EventTicketsBlock/Edit/components/CreateEventNotice/index.tsx

@@ -0,0 +1,25 @@
+import {__} from '@wordpress/i18n';
+import {Notice} from '@wordpress/components';
+import {createInterpolateElement} from '@wordpress/element';
+
+import './styles.scss';
+
+/**
+ * @unreleased
+ */
+export default function CreateEventNotice() {
+    return (
+        <div className={`givewp-event-tickets-block__create-event-notice`}>
+            <Notice isDismissible={false} status="warning">
+                <h4>{__('No event created yet', 'give')}</h4>
+                <p>{__('Donors will not be able to see any event on this form', 'give')}</p>
+                <p>{createInterpolateElement(
+                    __('<a>Create an event</a>', 'give'),
+                    {
+                        a: <a href={window.eventTicketsBlockSettings.createEventUrl} target="_blank" />,
+                    }
+                )}</p>
+            </Notice>
+        </div>
+    );
+}

src/EventTickets/resources/blocks/EventTicketsBlock/Edit/components/CreateEventNotice/styles.scss

@@ -0,0 +1,31 @@
+.givewp-event-tickets-block__create-event-notice {
+    margin-bottom: var(--givewp-spacing-4);
+
+    .components-notice {
+        margin: 0;
+        padding: var(--givewp-spacing-3) var(--givewp-spacing-4);
+
+        &__content {
+            margin: 0;
+
+            h4, p {
+                font-size: 0.75rem;
+                line-height: 1.5;
+                margin: 0;
+            }
+
+            p {
+                color: var(--givewp-grey-700);
+                margin-top: var(--givewp-spacing-2);
+
+                a {
+                    color: var(--givewp-grey-900);
+
+                    &:hover {
+                        text-decoration: none;
+                    }
+                }
+            }
+        }
+    }
+}

src/EventTickets/resources/blocks/EventTicketsBlock/Edit/index.tsx

@@ -0,0 +1,32 @@
+import BlockInspectorControls from './BlockInspectorControls';
+import BlockPlaceholderNoEvents from './BlockPlaceholderNoEvents';
+import BlockPlaceholder from './BlockPlaceholder';
+import BlockPlaceholderSelectEvent from './BlockPlaceholderSelectEvent';
+
+import './styles.scss';
+
+/**
+ * @unreleased
+ */
+export default function Edit(props) {
+    const {events} = window.eventTicketsBlockSettings;
+    const {
+        attributes: {eventId},
+    } = props;
+
+    const eventIds = events.map((event) => event.id);
+
+    return (
+        <>
+            {events.length === 0 ? (
+                <BlockPlaceholderNoEvents />
+            ) : !eventId || !eventIds.includes(eventId) ? (
+                <BlockPlaceholderSelectEvent {...props} />
+            ) : (
+                <BlockPlaceholder {...props} />
+            )}
+
+            <BlockInspectorControls {...props} />
+        </>
+    );
+}