Mobile app for booking press?

Following up here. The Super Progressive Web App plugin is working beautifully. I have been able to make a very nice "app" for the website. I went so far as to create a separate stripped down page template and then create new pages with the same shortcodes used for the booking page and the my bookings pages. The stripped down template was all built in wordpress customizer and came out nicely.

Visiting the website I added this popover which can be dismissed (Easy Notification Bar plugin). Clicking on the button in the popover expands it to show instructions for installing the PWA (which I modeled after how Setmore does theirs):

After that I installed and enabled the Super PWA plugin, it allows quite a bit of configuration for free. The page that is set to open in the PWA is a stripped down version as I explained, it offers no way to navigate outside of the pages in the stripped down version of the pages.

When you follow the instructions in the above screenshot you walk though like this and end up with an app on your homescreen:

Once you open the app you see the nice splash screen followed by our stripped down booking page:

I only have a couple links available in the navigation for the page template so there isn't much available to mess with other than what I want to have in the app.

No need to get approval from the app stores or wait on yet another enormous feature to be added to a plugin. Aside from installing and configuring the plugins/template I did only a little bit of css and js to accomplish this

I additionally made a section for the staff member. It took some custom coding to make it look great but it wasn't crazy.

I created a new plugin with the following structure:

abc-staff-extras/
├── custom
│   ├── admin.css
│   └── admin.js
└── abc-staff-extras.php

<?php
wp_enqueue_style( 'admin-css', plugins_url( '/custom/admin.css', __FILE__ ) );
wp_enqueue_script( 'abc-admin-js', plugins_url( '/custom/admin.js', __FILE__ ), array( 'jquery' ), null, TRUE );

/* Hide the wordpress toolbar for staff members specifically and any other roles I don't have whitelisted */
function abc_disable_admin_bar() {
   $user = wp_get_current_user();
   $allowed_roles = ['administrator', 'contributor', 'editor', 'author'];

   if (empty(array_intersect($allowed_roles, $user->roles))) {
     show_admin_bar(false);
   }
}
add_action('after_setup_theme', 'abc_disable_admin_bar');

/** Add a body class so we can identify when to apply our css **/
function abc_customizations_body_class($classes) {
  $user = wp_get_current_user();
  $allowed_roles = ['administrator', 'bookingpress-staffmember'];

  $post = get_post();
  $slug = get_post_field('post_name', $post);

  if ($post->post_parent) {
    $parent_id = $post->post_parent;
    $parent_post = get_post($parent_id);
    $slug = $parent_post->post_name;
  }

  if (strpos($_GET['page'], 'bookingpress') === 0 && !empty(array_intersect($allowed_roles, $user->roles))) {
    $classes .= ' abc-staffmember';
  }

  return $classes;
}
add_filter('admin_body_class', 'abc_customizations_body_class');

jQuery(document).ready(function($){
  if ($('body').hasClass('abc-staffmember')) {
    $('.bpa-ssn-logo--sm, .bpa-staff-header-navbar__mob > div > div > a').each(function() {
      $('> svg', this).replaceWith('<img src="/path-to-a-square-logo.jpg" style="margin: 0 auto; display: table;width: 64px; border-radius: 10%; overflow: hidden;" />');
    });

    $('.bpa-ssn-logo--lg').each(function() {
      $('> svg', this).replaceWith('<img src="/path-to-a-wide-logo.png" style="width: 124px; padding: 0 8px; margin: 0 auto; display: table;" />');
    });
  }
});

.abc-staffmember .bpa-fab-component {
  display: none;
}
/* lots more custom CSS simply added to make the backend area look more like my frontend form/site, which is pretty easy to do for most anyone I would hope */

/** One example rule, all the CSS rules are prefixed with body.abc-staffmember to make sure they don't cause havoc elsewhere on the site **/
body.abc-staffmember .bpa-staff-sidebar-navigation {
  background-color: #1A1A1A;
  border-right-color: #000000;
}