Project Overview widget

 

Objective

ProjectOverview enables user to have an overview of project, it brings together a lot of informations like, name, description, price, medias, products list etc. This widget has two versions, the embed version is the one integrated in HomeByMe For Home Retailers planner, the fullpage version is the one integrated in Bryo Home Website. According to different integration context, the widget has different manners of inteactions with the integration context.

Widget Overview

Access

User can have access to ProjectOverview from Home Retailer Application and Bryo Home Website.

From Home Retailer Application

1. Access from project overview hyperlink

2. Access from "i" information icon

From Bryo Home Website

1. Access from widget ProjectsList

❗ PriceDetailsProjectOvervalue default value is true, if set to false it will hide the price details section in the project overview widget.

Context

Like other default widget, ProjectOverview should be embeded in the application as an iframe, the communication between the application and default widget should be established on iframe messages. To have an overview of the subjet, please refer to window.postMessage(). Every Message published or subscribed by the ProjectOverview default widget should respect the following format:

Key	Type	Description
event	String	Name of the event, which is used as unique identifier
content	Object	Content of the event, which brings arguments helps to event handling

Example

{
  "event": "event name",
  "content": {
    "key1": "value for key1",
    "key2": "value for key2"
  }
}

Overview of the Synchronization Process

The following sequence diagram explains possible data synchronization between Application and ProjectOverview default widget.

Published Events (Output events)

Published events are those events go from default widget to application.

"Listening"

Context

When the document and all sub-resources have finished loading, send "Listening" event to inform the application(parent window) that it is ready to listen to parent window messages. This event must ben sent once and only once.

Message Format

Key	Type	Value/Template	Description
event	String	"Listening"	-

Message Example

{
    event: "Listening",
}

"AddToBasket"

"Context"

When user click on "Add to basket" button on the ProjectOverview default widget, he should be able to select some or all of the products presented in the item list, when the selection has been done, send "AddToBasket" event to inform the application of the user selection.

Message Format

Key	Type	Value/Template	Description
event	String	"AddToBasket"
content	Object	products: Array	- products: list of products that user want to buy, each element in the array must be an object containing the following properties, illustrated as below

Each elements of products should have following properties:

Key	Type	Description
dbID	String	ID of the product
index	Integer	Index of the product
reference	String	Reference of the product
name	String	Name of the product
thumbnail	String	Thumbnail URL date of the product
count	Integer	Count of the product
price	Object	Price of the product, it must be an object containing the following properties, illustrated as below

Each elements of price should have following properties:

Key	Type	Description
regular	Object	Regular price of the product
current	Object	Current price of the product
discountType	String	discount type of the product
category	Integer	Category ID of the product

Message Example

{
  "event":"AddToBasket",
  "content":
    {
      "products":
      [
        {
          "dbID":"GENERIC_FURNITURE_0158",
          "reference":"lit_double_06",
          "name":"Skrooll double bed",
          "thumbnail":"https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/286A8CED-9ADD-4345-A7FF-FF9462024168/Thumbnails/256.jpg","count":1,
          "category":0,
          "index":0
          }
      ]
    }
}

"FormattedPricesRequested"

Context

When user is selecting the products to be added to his basket, we need to update the total price based on the selected products, at this time, the calculated total price does not have the local format, so we need to send the prices information to the application to have the correcting formatting.

Message Format

Key	Type	Value/Template	Description
event	String	"FormattedPricesRequested"
content	Object	prices: Object from: String	- prices: an object containing the unformatted prices - from: indicates where does the request comes from

Message Example

{
  "event": "FormattedPricesRequested",
  "content": {
    "prices": {
      "regular": 0,
      "current": 0,
      "discountType": null,
      "vatInformation": null
    },
    "from": "ItemList"
  }
}

"DeleteMedia"

Context

When user want to remove one of his generated media, he click on "delete" media button, Widget will send iframe message "DeleteMedia" with related media information to ask for deletion.

Message Format

Key	Type	Value/Template	Description
event	String	"DeleteMedia"
content	Object	imageID: Integer	- imageID: ID of the media to remove

Message Example

{
  "event": "DeleteMedia",
  "content": {
    "imageID": 49540
  }
}

"ShareMedia"

Context

When user cant to share one of his generated media, he click on "share" media button, Widget will send iframe message "ShareMedia" with related media information to ask for share.

Message Format

Key	Type	Value/Template	Description
event	String	"ShareMedia"
content	Object	shareTarget: String media: String	- shareTarget: the name of the social media platform to share the media - media: url of the media to share

Message Example

{
  "event": "ShareMedia",
  "content": {
    "shareTarget": "twitter",
    "media": "https://byme-enterprise-preprod.s3.eu-west-1.amazonaws.com/data/homebymeProjects/9FD743DB-D854-46A5-B968-D3B33F3854E1/images/renderHQ/CE1737A6-8929-4A2A-B9C7-455DE5B7BCDA_468_351.jpg"
  }
}

"DeleteProject"

Context

When user want to delete the project, he click on "delete" icon on the ProjectOverview default widget, Widget will send iframe message "DeleteProject" to inform the Website that the current project should be removed, and user should be redirected to the Website home page.

Message Format

Key	Type	Value/Template	Description
event	String	"DeleteProject"
content	Object	uuid: String	- uuid: UUID of the project to remove

Message Example

{
  "event": "DeleteProject",
  "content": {
    "uuid": "97AB8B1A-9D53-4306-AE2C-8E3A0025EB13"
  }
}

"DuplicateProjectFromProjectOverview"

Context

When user want to duplicate the project, he click on "duplicate" icon on the ProjectOverview default widget, Widget will send iframe message "DuplicateProjectFromProjectOverview" to inform the Website that the current project should be duplicated, and user should be redirected to the page of the copy of the project.

Message Format

Key	Type	Value/Template	Description
event	String	"DuplicateProjectFromProjectOverview"
content	Object	id: String name: String uuid: String	- id: id of the project to duplicate - name: name of the project to set on the newly created project copy - uuid: UUID of the project to duplicate

Message Example

{
  "event": "DuplicateProjectFromProjectOverview",
  "content": {
    "id": "14311",
    "name": "My living room",
    "uuid": "97AB8B1A-9D53-4306-AE2C-8E3A0025EB13"
  }
}

"OpenProject"

Context

When user want to open the project in the planner, he click on "open project" button on the first tab of the ProjectOverview default widget, Widget will send iframe message "OpenProject" to inform the Website that the current project should be loaded in the planner.

Message Format

Key	Type	Value/Template	Description
event	String	"OpenProject"
content	Object	id: String	- id: id of the project to open

Message Example

{
  "event": "OpenProject",
  "content": {
    "id": "14311",
  }
}

"OpenPrint"

Context

When user want to print the project item list and medias, he click on "print" icon on the ProjectOverview default widget, Widget will send iframe message "OpenPrint" to inform the Website/planner the print request.

Key	Type	Value/Template	Description
event	String	"OpenPrint"

Message Format

Message Example

{
  "event": "OpenPrint"
}

"ChangeName"

Context

When user want to change the name of the project on bryo home Website, he click project name input on the ProjectOverview default widget, he edit and validate the input, then Widget will send iframe message "ChangeName" to inform the Website to update the related information.

Message Format

Key	Type	Value/Template	Description
event	String	"ChangeName"
content	Object	value: String	- value: new name for the project

Message Example

{
  "event": "ChangeName",
  "content": {
    "value": "Demo Project for Iframe"
  }
}

"ChangeDescription"

Context

When user want to change the description of the project on bryo home Website, he click project description input on the ProjectOverview default widget, he edit and validate the input, then Widget will send iframe message "ChangeDescription" to inform the Website to update the related information.

Message Format

Key	Type	Value/Template	Description
event	String	"ChangeDescription"
content	Object	value: String	- value: new name for the project

Message Example

{
  "event": "ChangeDescription",
  "content": {
    "value": "Demo Project for Iframe"
  }
}

"CloseProjectOverview"

Context

When the user click on "close" icon on the ProjectOverview default widget, send "CloseProjectOverview" event to inform the application that the default widget has been destroyed.

Message Format

Key	Type	Value/Template	Description
event	String	"CloseProjectOverview"	-

Message Example

{
  "event": "CloseProjectOverview"
}

"GetAllMedias"

Context

When the event "OpenProjectOverview" retrieve the rawMedias in the ProjectOverview default widget, if the initial limit of 30 (from Application) or 36 (from Website) is not enough to retrieve all available medias in the project, the "GetAllMedias" event is sent with a limit equal to the total number of available medias. Once the webservice call is done, the "SendAllMedias" event will be sent to ProjectOverview default widget.

Message Format

Key	Type	Value/Template	Description
event	String	"GetAllMedias"	-
content	Object	value: Integer	- limit: total number of medias to retrieve

Message Example

{
  "event": "GetAllMedias",
  content: {
    limit  : 65
  }
}

"GetUpdatedMedias"

Context

When a media has been deleted from the ProjectOverview default widget, once the webservice call is done and the media is removed from the database, the "GetUpdatedMedias" iframe message will be sent to the application. In turn, the application will return the iframe message "SendUpdatedMedias" event to ProjectOverview default widget with the updated array of available medias.

Message Format

Key	Type	Value/Template	Description
event	String	"GetUpdatedMedias"	-
content	Object	value: Integer	- limit: total number of medias to retrieve

Message Example

{
  "event": "GetUpdatedMedias",
  content: {
    limit  : 65
  }
}

"RequestProjectPageURL"

Context

When user clicks "Share project" button on the ProjectOverview default widget, we need to retrieve the project page unique URL from the website in order to open the share overlay, providing said URL.

Message Format

Key	Type	Value/Template	Description
event	String	"RequestProjectPageURL"	-

Message Example

{
  "event": "RequestProjectPageURL"
}

Subscribed Events (Input events)

Subscribed events are those events go from application to default widget.

"OpenProjectOverview"

Context

When the default widget has finished being loaded, application will send this event to ProjectOverview default widget ask for visulization of projects informations.

Message Format

Key	Type	Value/Template	Description
event	String	"OpenProjectOverview"
content	Object	name: String description: String price: Object tab: Integer sharingOptions: Array properties: Object surface: Array rawMedias: Array translation: Object language: String namespace: String roomsBOM: Array outsideBOM: Object projectBOM: Array totalMediasCount: Integer owner: Boolean currentUser: Integer
- name: Name of the project - description: Description of the project - price: Price of the project, composed of regular, current, discountType and vatInformation - tab: Index of tab when opening the widget, Possible values are: 1,2,3 - sharingOptions: Possible options to share the media - properties: Properties of the project, like size, floors, rooms - surface: For every room, show surface detailes like floor area, wall area - rawMedias: For the first 30 medias (36 when widget is called from Bryo Home website): show media url, type, etc. - translation: Mapping of translations, with which to override the default one in widget - language: locale code - namespace: namespace - roomsBOM: Array of furnitures in the project for each room - outsideBOM: An object with a "furnitures" entry, an array of all the furnitures outside the building - projectBOM: Array of decorations applied in the project - totalMediasCount: number of all available medias in the project - owner: True if the project belongs to the logged in user - currentUser: User ID if a user is logged in, null if no user is logged in

Message Example

{
  "event": "OpenProjectOverview",
  "content": {
    "currentUser": 7,
    "name": "Square dark grey tiling",
    "owner": true,
    "description": "",
    "price": {
      "regular": "£1,209.00",
      "current": "£1,209.00",
      "discountType": "regular",
      "vatInformation": ""
    },
    "tab": 1,
    "totalMediasCount": 4,
    "sharingOptions": [
      {
        "name": "facebook",
        "enabled": true
      },
      {
        "name": "twitter",
        "enabled": true
      },
      {
        "name": "pinterest",
        "enabled": true
      },
      {
        "name": "mail",
        "enabled": true
      },
      {
        "name": "embed",
        "enabled": true
      }
    ],
    "properties": {
      "size": "36.1 m²",
      "floors": 1,
      "rooms": []
    },
    "surface": [
      {
        "name": "My living room",
        "floor_area": "16.1 m²",
        "wall_area": "35.9 m²"
      },
      {
        "name": "Room",
        "floor_area": "10.0 m²",
        "wall_area": "31.6 m²"
      },
      {
        "name": "Room 2",
        "floor_area": "10.0 m²",
        "wall_area": "29.7 m²"
      }
    ],
    "rawMedias": [
      {
        "id": 16857,
        "creationDate": "2020-04-14T10:26:03.000Z",
        "url": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/homebymeProjects/1E9B9654-DA5C-4731-B406-C573F19F7A22/images/thumbnails/thumbnail960x540.jpg",
        "name": "thumbnail960x540.jpg",
        "typeMediaID": 5,
        "metadata": null
      }
    ],
    "translation": {
      "common": {
        "back": "Back",
        "cancel": "Cancel",
        "close": "Close",
        "copy_clipboard": "Copy to clipboard",
        "delete": "Delete",
        "delete_overlay_title": "Delete this media?",
        "download": "Download",
        "no": "No",
        "ok": "Ok",
        "save": "Save",
        "share": "Share",
        "yes": "Yes"
      },
      "project_overview": {
        "print": "Print my project",
        "share": "Share",
        "overview_title": "Project overview",
        "itemlist_title": "Price detail",
        "medias_title": "My pictures & 2D plans",
        "close": "Close",
        "load_project": "Open Project",
        "description": "Description",
        "global": "Global",
        "by_room": "Room by Room",
        "products_section": "My Products",
        "view_all_products": "View all",
        "medias_section": "My Pictures",
        "property_feature": "Property features",
        "surface_details": "Surface details",
        "view_more": "View more",
        "feature_size": "Size",
        "feature_floors": "Floors",
        "room_type": {
          "attic": "Attic",
          "basement": "Basement",
          "bathroom": "Bathroom",
          "bedroom": "Bedroom",
          "boiler_room": "Boiler room",
          "breakfast_room": "Breakfast room",
          "dining_room": "Dining room",
          "entertainment_room": "Entertainment room",
          "garage": "Garage",
          "guest_room": "Guest room",
          "hallway": "Hallway",
          "kitchen": "Kitchen",
          "laundry_room": "Laundry room",
          "library": "Library",
          "living_room": "Living room",
          "mud_room": "Mud room",
          "nursery": "Kid’s room",
          "office": "Office",
          "pantry": "Pantry",
          "wine_cellar": "Wine cellar",
          "none": "Undefined Room Type"
        },
        "view_less": "View less",
        "medias_layer": {
          "title": "My medias",
          "filters": {
            "all": "All",
            "realistic": "Realistic images",
            "three_sixty": "360 images",
            "snapshot": "Snapshots"
          },
          "share_media": "Share this media",
          "print": "Print"
        },
        "item_list": {
          "select_all": "Select all",
          "total": "Total :",
          "cancel": "Cancel",
          "add_to_cart": "Add to cart",
          "all": "All",
          "col_name": "Name",
          "col_amount": "Amount",
          "col_total": "Total",
          "add_cart_title": "Would you like to choose which products to add to your cart?",
          "add_cart_description": "You have the possibility to choose the products you want to add to your cart or to add them all.",
          "add_cart_some": "Choose my products",
          "add_cart_all": "Add all products",
          "print": "Print",
          "empty_title": "You have not yet added a product to your project",
          "col_unit_price": "Item price"
        }
      }
    },
    "language": "en-GB",
    "namespace": "translation",
    "roomsBOM": [
      {
        "name":"living room",
        "furnitures":[]
      }
    ],
    "outsideBOM": {
      "furnitures":[]
    },
    "projectBOM": [
      {
        "dbID": "74450",
        "reference": "oak_parquet",
        "name": "Oak parquet",
        "thumbnail": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/materials/7E78AE9B-EE11-4692-A298-19F981E23ED9/Thumbnails/256.jpg",
        "count": 4,
        "tagName": "Hardwoods",
        "unitPrice": {
          "current": {
            "value": 82,
            "formattedValue": "£82.00",
            "priceMethodLabel": " / 5m²"
          },
          "regular": {
            "value": 82,
            "formattedValue": "£82.00",
            "priceMethodLabel": " / 5m²"
          },
          "discountType": "regular"
        },
        "price": {
          "current": {
            "value": 328,
            "formattedValue": "£328.00",
            "priceMethodLabel": " / 5m²"
          },
          "regular": {
            "value": 328,
            "formattedValue": "£328.00",
            "priceMethodLabel": " / 5m²"
          },
          "discountType": "regular"
        }
      }
    ]
  }
}

"FormattedPrices"

Context

When the application has finished adding local format to prices, it will send this event to ProjectOverview default widget to ask for visulization of correct formatted prices

Message Format

Key	Type	Value/Template	Description
event	String	"FormattedPrices"
content	Object	prices: Object from: String	- prices: an object containing the unformatted prices - from: indicates where does the request comes from

Message Example

{
  "event": "FormattedPrices",
  "content": {
    "prices": {
      "regular": "£0.00",
      "current": "£0.00",
      "discountType": null,
      "vatInformation": null
    },
    "from": "ItemList"
  }
}

"MediaDeleted"

Context

When user delete media from bryo home Website, it will send this event to ProjectOverview default widget to ask for refresh of view of media lists.

Message Format

Key	Type	Value/Template	Description
event	String	"MediaDeleted"
content	Object	id: Integer	- id: ID of the media which has just been removed

Message Example

{
  "event": "MediaDeleted",
  "content": {
    "id": 57101
  }
}

"SendAllMedias"

Context

When the application (or the website) has retrieved all medias from Webservice, it will send the "SendAllMedias" event to ProjectOverview default widget, with all available medias, so that the view can be refresh.

Message Format

Key	Type	Value/Template	Description
event	String	"SendAllMedias"
content	Object	[]: Array	- []: Array of all available medias

Message Example

{
  "event": "SendAllMedias",
  "content": [
    {
      "creationDate": "2020-08-03T09:59:53.000Z",
      "id": 74502,
      "metadata": {media: "images/render360/3DCE4252-EA9B-4DF3-8F25-C6F74C299…/3DCE4252-EA9B-4DF3-8F25-C6F74C29934C_468_351.jpg", gallery: "images/render360/3DCE4252-EA9B-4DF3-8F25-C6F74C299…/3DCE4252-EA9B-4DF3-8F25-C6F74C29934C_960_540.jpg", quality: "High", krpanoTour: "images/render360/3DCE4252-EA9B-4DF3-8F25-C6F74C29934C/vtour/tour.xml", compensated: false, …},
      "name": null,
      "typeMediaID": 1,
      "url": "https://byme-enterprise-preprod.s3.eu-west-1.amazonaws.com/data/homebymeProjects/22FEF3D1-F6C1-4656-8578-B68A29D426C6/images/render360/3DCE4252-EA9B-4DF3-8F25-C6F74C29934C"
    },
    {
      "creationDate": "2020-03-05T11:16:29.000Z",
      "id": 50414,
      "metadata": {media: "images/5-3-2020_12-16-28_468_351.jpg", gallery: "images/5-3-2020_12-16-28_960_540.jpg"},
      "name": "Snapshot",
      "type": 2,
      "typeMediaID": 3,
      "url": "https://byme-enterprise-preprod.s3.eu-west-1.amazonaws.com/data/homebymeProjects/22FEF3D1-F6C1-4656-8578-B68A29D426C6/images/5-3-2020_12-16-28_960_540.jpg"
    }
    ...
  ]
}

"SendUpdatedMedias"

Context

When the application has retrieved all medias from Webservice after a media deletion, it will send the "SendUpdatedMedias" event to ProjectOverview default widget, with all available medias, so that the view can be refresh.

Message Format

Key	Type	Value/Template	Description
event	String	"SendUpdatedMedias"
content	Object	[]: Array	- []: Array of all available medias

Message Example

{
  "event": "SendUpdatedMedias",
  "content": [
    {
      "creationDate": "2020-08-03T09:59:53.000Z",
      "id": 74502,
      "metadata": {media: "images/render360/3DCE4252-EA9B-4DF3-8F25-C6F74C299…/3DCE4252-EA9B-4DF3-8F25-C6F74C29934C_468_351.jpg", gallery: "images/render360/3DCE4252-EA9B-4DF3-8F25-C6F74C299…/3DCE4252-EA9B-4DF3-8F25-C6F74C29934C_960_540.jpg", quality: "High", krpanoTour: "images/render360/3DCE4252-EA9B-4DF3-8F25-C6F74C29934C/vtour/tour.xml", compensated: false, …},
      "name": null,
      "typeMediaID": 1,
      "url": "https://byme-enterprise-preprod.s3.eu-west-1.amazonaws.com/data/homebymeProjects/22FEF3D1-F6C1-4656-8578-B68A29D426C6/images/render360/3DCE4252-EA9B-4DF3-8F25-C6F74C29934C"
    },
    {
      "creationDate": "2020-03-05T11:16:29.000Z",
      "id": 50414,
      "metadata": {media: "images/5-3-2020_12-16-28_468_351.jpg", gallery: "images/5-3-2020_12-16-28_960_540.jpg"},
      "name": "Snapshot",
      "type": 2,
      "typeMediaID": 3,
      "url": "https://byme-enterprise-preprod.s3.eu-west-1.amazonaws.com/data/homebymeProjects/22FEF3D1-F6C1-4656-8578-B68A29D426C6/images/5-3-2020_12-16-28_960_540.jpg"
    }
    ...
  ]
}

"WsMediaDeleted"

Context

When application received the event "DeleteMedia", it sends back to the ProjectOverview default widget the "WsMediaDeleted" iframe message once the WS call is done.

Message Format

Key	Type	Value/Template	Description
event	String	"WsMediaDeleted"
content	Object	imageID: Integer remainingSum: Integer	- imageID: The ID of the image which has been deleted - remainingSum: number of remaining medias

Message Example

{
  "event": "WsMediaDeleted",
  "content": {
    "imageID": 49540,
    "remainingSum": 37
  }
}

"SendProjectPageURL"

Context

When website received the event "RequestProjectPageURL", it sends back the project page unique URL to the ProjectOverview default widget.

Message Format

Key	Type	Value/Template	Description
event	String	"SendProjectPageURL"
content	Object	url: String	- url: website's project page unique URL

Message Example

{
  "event": "SendProjectPageURL",
  "content": {
    "url": "https://bryohome.enterprise.by.me/en-GB/project-page.html?uuid=97AB8B1A-9D53-4306-AE2C-8E3A0025EB13"
  }
}

Branding

This widget, like all other widgets, will benefit from branding styles when opened from the planner or the website. To learn more on how to customize the look of the widgets, please refer the Integrate Branding section 🔗.