rebelcode/rcmod-wp-bookings-ui

This package is abandoned and no longer maintained. No replacement package was suggested.

A RebelCode module that provides the WordPress admin interface for bookings.


README

Build Status Code Climate Test Coverage Latest Stable Version Latest Unstable Version

WP Bookings plugin's UI Module

Run Front Assembling

To run front assembling just run:

$ npm install # it will install JS dependencies and build `booking-js`
$ npm run build:css # build UI css

Run Application

This module's front-end logic expects to retrieve initial application state to initialize application. By default it is window.EDDBK_APP_STATE which should be generated on server using wp_localize_script(...).

We have two separate pages that require different states to work. Bookings page and one service page. So for this 2 pages we need two different application states.

Service Page

State

Expected structure of state on service page (when user open some service for editing):

{
  // List of all availabilities for this service.
  "availabilities": [
    {
      "id": 1,
      "fromDate": "2017-01-03",
      
      "repeats": "week",
      "repeatsEvery": 2,
      "repeatsOn": ["mon", "tue", "thu"],
      
      "repeatsEnds": "afterPeriod",
      "repeatsEndsPeriod": 12,
      
      "fromTime": "09:30:00",
      "toTime": "12:30:00"
    }
    // ... other availabilities
  ],
  // List of all available session lengths. 
  "sessions": [
    {
      "id": 1,
      "length": 120, // session length in seconds
      "price": 10.00 
    }
    // ... other sessions
  ],
  // Current service's bookings display options.
  "displayOptions": {
    "allowCustomerChangeTimezone": true
    // ... other options
  }
}

Bookings Page

State

Expected structure of state on bookings page:

{
  // Statuses that should be displayed on screen options
  "screenStatuses": [
    "draft", "approved", "scheduled", "pending", "completed"
  ],
  
  // List of all services. It will be used to filter bookings and for bookings editing.
  "services": [
    {
      "id": 1,
      "title": "Service Name",
      "color": "#ff7f50" // Service color needed to render it in the calendar
    }
  ]
}

Endpoints

Here is endpoints required for bookings page. Paths are not real, this is just demonstration of concept which functionality is required from backend to make everything works.

Bookings

GET /booking - Retrieve list of bookings, screen statuses list with items count for each status, filtered items count. It should accept next parameters to filter result:

Both views:

  • search - Search string to filter bookings by it. Allows to filter bookings via client name or client email address. If empty - no searching happens. For example: client@rebelcode.com,
  • service - Service to filter by it. If empty - no service filtering happens. For example: 1,
  • statuses - Enabled screen statues to filter bookings by them. For example: draft,scheduled,
  • status - Current status to filter. For example: all or draft.

Calendar filtering:

  • start - Start date to get bookings. For example: "2017-07-11",
  • end - End date to get bookings. For example: "2017-07-18".

List view filtering:

  • page - Page number for pagination. For exmple: 1,
  • month - Month number to filter bookings by it. If empty - no month filtering happens. For example: 1.

POST /booking - Create one booking.

UPDATE /booking/{id} - Update booking by it's ID.

DELETE /booking/{id} - Delete booking by it's ID.

Clients

This API endpoint is required for booking editing functionality. When user creates/edits booking he can search across all clients or create new one.

GET /client?search={queryString} - Search for client.

POST /client - Create new client. Should accept this two fields:

  • name - Client's name,
  • email - Clien's email.