Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Hybrid Booking Confirmation

Initiation

Same as all previous hybrid integration after client receives the event onMounted we'll trigger do setup data event. Client Event: doSetupData Payload:

{
// member
"reservation_id": "559588",
"access_token": "4OWFM_E8slUUQ4N1f40lPpZuU7oKqM5X98AoaBy8BVI",
// guest
"encrypted_id": "O4BZ6"
}

Back Button

Web Event: onBackClicked

Share Icon

Web Event: onShareClicked Response:

{
"share_url": "https://hhstaging.hungryhub.com/share-to-friends.html?reservation_id=O4BZ6"
}

Map Location

We'll redirect open URL from response hybrid.  Web Event: onOpenMaps Response:

{
"map_location": "http://www.google.com/maps?q=13.7268743,100.5093972"
}

Booking List

We'll redirect to the profile page to show upcoming booking list.  Web Event: onBookingListClicked

Edit this booking

We'll open in app browser for edit this booking page. Web Event: onModifyBookingClicked Response:

{
"modify_url": "https://hhstaging.hungryhub.com/reservations/my-reservation/gbqRB.html"
}

note: Please hide "Edit this booking" for package h@h

Call for Assistance

When showing pop up call for assistance we'll trigger event and client need to showing phone call. Web Event: onCallClicked Response:

{
"phone": "0628274333"
}

If Restaurant clicked return data from restaurants.attributes.phone and if Hungry Hub clicked return data from config data.support_phone

Frontend Technical Documentation

Dine In Header

I'll specify by dine-in or delivery for the booking/confirmation page.

Component:

  • Share Button = data.attributes.share_url
  • Image Cover = included[type=restaurants].attributes.image_cover_url
  • Booking ID = data.id
  • QR code booking = data.attributes.qr_code
  • Restaurant Name = data.attributes.restaurant_name
  • Date = data.attributes.date
  • Time = data.attributes.start_time
  • Adult = data.attributes.adult
  • Kids = data.attributes.kids

Personal Information

We have 2 version of personal information, simple and expanded. Component:

  • Confirmation message: can hardcoded
  • Name and Phone Guest:
  • Name and Phone Member: from API GET {{ base_api  }}/users.json 
  • Occasion: data.attributes.dining_occasion
  • Special Requst: data.attributes.special_request

Summary

We also have 2 charge summaries, simple and expanded. We can use existing component in checkout page for expanded version. Component:

  • Packages: data.attributes.packages (include rules, pricing_groups, kids_price_v2)
  • Applied Voucher: data.attributes.used_vouchers
  • Charge Price: data.attributes.charge_price
  • Total Price: data.attributes.total_price
  • Charge Amount Type: data.attributes.charge_amount_type
  • Charge Percent: data.attributes.charge_percent
  • Charge Type: data.attributes.charge_type

Payment Method

We'll show this section only if users using payment for their transaction. If transaction full pay on site no need to show. Component:

  • Payment Type: data.attributes.payment_type

Restaurant Location

We will show static map using mapbox for this UI. And will open Map URL if clicked.

Component:

  • Latitude: included[type=restaurants].attributes.lat
  • Longitude: included[type=restaurants].attributes.lng
  • Open Map URL: included[type=restaurants].attributes.map_location
  • Address: need to add address in included data restaurants 

Dynamic Banner For Point

We'll have dynamic banner that show point and user loyalty level. I put sample background in here: Component:

  • Point: data.attributes.hungry_points
  • User and Level: from API GET {{ base_api  }}/users.json
  • Edit this booking: data.attributes.modify_url
  • Booking List: when clicked will redirect to profile page show upcoming booking

Delivery/Self Pickup Header

Component:

  • Share Button = data.attributes.share_url
  • Image Cover = included[type=restaurants].attributes.image_cover_url
  • Booking ID = data.id
  • Restaurant Name = data.attributes.restaurant_name
  • Date = data.attributes.date
  • Time = data.attributes.start_time
  • Service Type (pick_up/delivery) = data.attributes.service_type

Delivery Address & Estimate Time

Component:

  • Delivery address: included[type=delivery-address].attributes.detail
  • Note for driver: included[type=delivery-address].attributes.note_for_driver
  • Estimate Time: We show this if users using order now to know how long driver will arrive.  
    • Order Now = data.attributes.is_order_now 
    • If order now, time will get from data.attributes.estimation_delivered_at and compare to current time to get minutes arrive

Self Pickup 

  • Ready to pickup time: We show this if users using order now.  
    • Order Now = data.attributes.is_order_now 
    • If order now, time will get from data.attributes.estimation_delivered_at and compare to current time to get minutes food ready
  • Else can set same as existing: 
  Your delicious food will be ready to pickup at HH:mm

Selected Menu Summary

Can use the same component like in checkout page. Data that we gonna use same as above. 

Component:

  • Packages: data.attributes.packages (include rules, pricing_groups, kids_price_v2)
  • Applied Voucher: data.attributes.used_vouchers
  • Charge Price: data.attributes.charge_price
  • Total Price: data.attributes.total_price
  • Charge Amount Type: data.attributes.charge_amount_type
  • Charge Percent: data.attributes.charge_percent
  • Charge Type: data.attributes.charge_type

Backend Update 

Currently our included restaurants data like this:

"included": [
		{
			"id": "997",
			"type": "restaurants",
			"attributes": {
				"lowest_ayce_price": "฿229",
				"lowest_pp_price": null,
				"lowest_xp_price": "฿5,197",
				"lowest_hs_price": null,
				"lowest_bfp_price": null,
				"lowest_sm_price": null,
				"lowest_hah_price": "฿500",
				"price_per_person": {
					"amount": "229.0",
					"currency": "THB",
					"symbol": "฿",
					"format": "฿229"
				},
				"price_and_pricing_type": {
					"amount": 229,
					"currency": "THB",
					"symbol": "฿",
					"format": "฿229",
					"pricing_type": "per_person"
				},
				"is_deleted": false,
				"lat": "13.73844",
				"lng": "100.5463",
				"largest_table": 8,
				"branch_id": null,
				"min_party_size": 1,
				"name": "คาเฟ่แคลร์",
				"names": {
					"th": "คาเฟ่แคลร์",
					"en": "Cafe Claire by Oriental Residence"
				},
				"slug": "cafe-claire-by-oriental-residence",
				"favorited": false,
				"allow_booking": true,
				"availability": "in stock",
				"reviews_score": 4.7,
				"reviews_count": 302,
				"map_location": "http://www.google.com/maps?q=13.73844,100.5463",
				"promoted_by_hh": true,
				"enable_big_group_feature": true,
				"location": "ปทุมวัน",
				"primary_location": {
					"id": 316,
					"name": "ปทุมวัน"
				},
				"cuisine": "ฝรั่งเศส",
				"primary_cuisine": {
					"id": 9,
					"name": "ฝรั่งเศส"
				},
				"image_cover_url": {
					"thumb": "https://hhstaging.hungryhub.com/uploads/restaurants/997/photos/42828/cover2.jpg",
					"large": "https://hhstaging.hungryhub.com/uploads/restaurants/997/photos/42828/cover2.jpg",
					"square": "https://hhstaging.hungryhub.com/uploads/restaurants/997/photos/42828/cover2.jpg"
				},
				"canonical_link": "https://hungryhub-build-staging.netlify.app/restaurants/cafe-claire-by-oriental-residence?locale=th",
				"last_booking_was_made": "Tue, 28 Mar 2023 02:24:02 +0000",
				"total_covers": 34178,
				"time_slots": {},
				"reservation_system_only": false,
				"phone": "021259000",
				"phone_for_delivery": "021259000"
			},....

Need add 1 more parameter "address" to set restaurant address name in dine in confirmation.