Rooms Plug in Technical Guide

Modified on Wed, 30 Jul at 12:41 PM

Rooms Plugin

A React-based plugin for displaying property room information fetched from the iPro API.

Features

Fetches room data from /apis/propertypage endpoint
Displays room information including name, description, type, and amenities
Shows only bedrooms on initial screen with flexible grid layout
"Show All Rooms" button to display all rooms in a modal
Rooms sorted by priority: Bedrooms → Bathrooms → Others
Responsive design for mobile and desktop
Configurable styling options
Neutral color scheme for amenities

Installation

Install dependencies:

npm install

Start development server:

npm run dev

Build for production:

npm run build

Configuration

The plugin accepts the following configuration options:

apiUrl (string): Base URL for the API
propertyId (string): Property ID to fetch rooms for
showTitle (boolean): Whether to show the "Rooms" title
brand.primary (string): Primary brand color for styling

Usage

Basic Usage

<div id="rooms-container"></div>
<script src="dist/0.0.1/rooms.iife.js"></script>
<script>
  window.RoomsPlugin.init({
    containerId: 'rooms-container',
    propertyId: '8464',
    apiUrl: 'https://rental-retreatscouk.iprostage.com/',
    showTitle: true,
    brand: {
      primary: '#1976d2'
    }
  });
</script>

Advanced Configuration

<div id="rooms-container" 
     data-property-id="8464"
     data-api-url="https://rental-retreatscouk.iprostage.com/"
     data-show-title="true"
     data-tenant-config='{"brand":{"primary":"#2e7dcc"}}'>
</div>
<script src="dist/0.0.1/rooms.iife.js"></script>

Development

Use the generator file RoomsGen.html to configure and preview the plugin with different settings. The generator provides:

Live preview of the plugin
Configuration options for all parameters
Generated HTML and JavaScript code
Copy-to-clipboard functionality
localStorage persistence of settings

Layout Behavior

Single Bedroom: Takes full width
Multiple Bedrooms: Displayed in a single line (up to 3 per line)
Many Bedrooms: Automatically wrap to multiple lines
Other Rooms: Accessible via "Show All Rooms" button in a modal

Room Display Logic

Initial Screen: Shows only bedrooms with RoomType and Sleeps (if available)
Modal: Shows all rooms sorted by priority (Bedrooms → Bathrooms → Others)
Amenities: Displayed with neutral gray styling
Sleeps Info: Only shown for rooms that have sleep capacity

API Response Structure

The plugin expects room data in the following format:

{
  "Property": {
    "Details": {
      "Rooms": {
        "Rooms": [
          {
            "Id": 30872,
            "RoomName": "Master bedroom",
            "Description": "Bedroom with double bed and air conditioning.",
            "RoomType": "BEDROOM",
            "Sleeps": "2",
            "Amenities": ["WARDROBE", "BED LINEN & TOWELS", ...]
          }
        ]
      }
    }
  }
}