RebelCode - WP Bookings UI Module

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.