Create Barcode Scanner App powered by React (via wp packages) (wip)

[nerrad]

Note: This branch now contains force pushed changes from a branch @tn3rb did some work on. So make sure you delete locally the branch for this pull and grab the latest from github.

Problem this Pull Request solves

As a part of doing #2 (converting [ESPRESSO_BARCODE_SCANNER] shortcode to a Gutenberg Block), I decided that it would be prudent to do the first step of creating a React based app for the actual scanner to replace the ajax/js powered existing app rendered via the shortcode. There's a few reasons for this including:

• dogfooding the new js framework and apis in Event Espresso core (which helps expose issues that need fixed - and a lot were).
• Enabling the possibility of having the app being independent of WordPress (powered completely via the REST API).
• Enabling the app to (eventually) have a React Native version. This would allow for potentially releasing versions as mobile apps.
• More consistent parity between what is embedded via a shortcode and the eventual WordPress block replacing the shortcode in the editor and the frontend.
• More flexibility fo how we utilize this with EventSmart.
• Greater potential for improving the ui/ux of how the app works (beyond simply copying what the existing shortcode powered implementation does)

Priority wise, the goal of this pull is to get to the app to a functional state replacing the feature set of the current shortcode powered app. This means that everything should work, but it won't be in a releasable state until the ui/ux receives some polish.

What needs done

This is an itemized list of things needing done for this app and what is complete.

• Update the codebase (where possible) to follow new add-on framework/structure.
• Implement new asset build process for add-on.
• Add js unit tests
• Get all components/logic in place (js) so that Scanner App is functional and works similarly to the existing app.
• Finish all inline documentation for the code.
• Fix scan input so that when continual scanning is happening, the scan input clears and it's ready for the next scan.
• Add logic to control whether the app is available based on WordPress, PHP, and EE version. Currently WP: 5.2; EE: 4.9.80; PHP 5.6 (php version bump will be required regardless for whatever version receives this).
• Improve UI/UX (includes actual styling)
• Tweak the step menu implementation so that certain steps can only be toggled if prior fields are filled (i.e. selected event, or selected datetime)
• Add options for hydrating initial state via the app mount point. In particular this is important for the eventual usage in the block.
• Extract components that were implemented as a part of this build that belong in EE core - then reimplement as imported from core.
• Extract CSS (and implement) as a part of the work for New direction for CSS and styling in EE core event-espresso-core#1041
• Investigate bug @br3nt discovered: I noticed if I used the "Lookup Attendee" option on the "Scan" step and entered a Reg Code from a registration in my system, it would return the registration and attendee details including whether the registration was approved or not and/or required payment or not. That sounds fine but the issue is that the registration did not belong to the event and datetime that had been selected in the previous steps. Since the returned attendee details make no mention of the event or datetime, it simply appears that the information is valid for the current selections. However, the registration could belong to any event, even one that occurred years ago. This could easily allow people to print bogus tickets using barcodes / QR codes from a previously paid for past event to gain fraudulent entrance to a current event they have not paid for.

NOTE: This pull will contain commits including new components that I'm testing as a part of this work that will eventually be extracted and added to event-espresso-core for the global components. Things that are useful for usage by multiple EE products vs just this add-on.

How has this been tested

• js unit tests
• verify new app works as expected.
• verify existing shortcode still works.

Checklist

• I have read the documentation relating to systems affected by this pull request, see https://github.com/eventespresso/event-espresso-core/tree/master/docs
• User input is adequately validated and sanitized
• all publicly displayed strings are internationalized (usually using esc_html__(), see https://codex.wordpress.org/I18n_for_WordPress_Developers)
• My code is tested.
• My code follows the Event Espresso code style.
• My code has proper inline documentation.

Components being extracted to ee core (see zenhub dependencies connections for links to related pulls):

• New css styling system.
• <TextBubble /> (components/ui/enhanced-text/text-bubble)
• <StatusCircle /> (components/ui/indicators/status-circle)
• <StatusSection /> (components/ui/indicators/status-section)
• <CheckInAction /> (registration-view/checkin)
• <CheckInButton /> (registration-view/checkin)
• get-checkin-in-status-configuration (helpers from registration-view/checkin/get-check-in-status-configuration)
• <CheckInStatusIcon /> (registration-view/checkin)
• withLatestCheckin ( 'registration-view/checkin`)

Other important notes:

• PHP version requirement updated to PHP5.6 (confirmed with support team as okay)
• EE4 version requirement will need to be updated to whatever version of EE core includes the Gutenberg framework (so there's a dependency on that being merged in) (also confirmed with support team as okay).

[nerrad]

Components for ScannerView:

Note, this is just the initial draft to get the ball rolling. It's very likely that some of this will be consolidated when I see patterns emerge as I code this.

In tree format:

<ScannerView>
    <AllRegistrationLink />
    <ScanInputView>
        <ScanTypeSelector />
        <ScanInput />
        <Button /> // submit button for scanner
    </ScanInputView>
</ScannerView>
<RegistrationView>
    <RegistrationDetailsView>
        <ContactDetails />
        <AvatarImage />
        <RegistrationActionsView>
            <RegistrationOwing>
                <StatusCircle />
            </RegistrationOwing>
            <RegistrationStatus>
                <StatusCircle />
            </RegistrationStatus>
            <RegistrationAction>
                <CheckinStatusTextBubble />
                <Button /> // Check-in action button for *this* registration
            </RegistrationAction>
            <RegistrationLinks />
        </RegistrationActionsView>
    </RegistrationDetails>
    <RegistrationGroupView>
        <RegistrationGroupTable>
            <RegistrationGroupRow />
                <CheckinStatusIndicator />
                <Button /> // Check-in Action Button for Reg in Row
            <Registration>
        </RegistrationGroupTable>
    </RegistrationGroupView>
    <Button /> // Check-in action button for all Registrations in Group
</RegistrationView>

[nerrad]

I'm also going to experiment with using https://github.com/react-tools/react-table as a table component for this mini-app. If it works well, I may make this a recommended table component for the react stuff we do.

Along with that, I may use this HOC: https://github.com/dumptruckman/accessible-react-table to ensure our tables are accessible out of the gate.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because it has been stale for a significant period of time without any activity.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because it has been stale for a significant period of time without any activity.

[stale]

This issue has been automatically closed because it has been stale for a significant period of time without any activity.