123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
{
  "surface_id": "restaurant-reservation-card-surface",
  "surface_version": 1,
  "payload": {
    "objects": [
      {
        "beginRendering": {
          "surfaceId": "restaurant-reservation-card-surface",
          "root": "root-card"
        }
      },
      {
        "surfaceUpdate": {
          "surfaceId": "restaurant-reservation-card-surface",
          "components": [
            {
              "id": "root-card",
              "component": {
                "Card": {
                  "child": "reservation-column"
                }
              }
            },
            {
              "id": "reservation-column",
              "component": {
                "Column": {
                  "alignment": "stretch",
                  "children": {
                    "explicitList": [
                      "restaurant-title",
                      "restaurant-location",
                      "restaurant-tags",
                      "party-size-label",
                      "party-size-dropdown",
                      "time-label",
                      "reservation-time-row",
                      "confirm-button"
                    ]
                  }
                }
              }
            },
            {
              "id": "restaurant-title",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Juniper & Stone Dining Room"
                  },
                  "variant": "title"
                }
              }
            },
            {
              "id": "restaurant-location",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "48 Mercer Street, New York"
                  },
                  "variant": "subheadline",
                  "color": "secondary"
                }
              }
            },
            {
              "id": "restaurant-tags",
              "component": {
                "TagText": {
                  "segments": {
                    "literalArray": [
                      {
                        "text": "Modern European"
                      },
                      {
                        "text": "Chef's counter",
                        "style": "secondary"
                      },
                      {
                        "text": "Window seating",
                        "style": "highlight"
                      }
                    ]
                  }
                }
              }
            },
            {
              "id": "party-size-label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Party size"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "party-size-dropdown",
              "component": {
                "DropdownSelection": {
                  "selection": {
                    "path": "/partySize",
                    "literalArray": []
                  },
                  "placeholder": {
                    "literalString": "Select party size"
                  },
                  "items": [
                    "1",
                    "2",
                    "3",
                    "4",
                    "5",
                    "6"
                  ]
                }
              }
            },
            {
              "id": "time-label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Time"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            },
            {
              "id": "reservation-time-row",
              "component": {
                "Row": {
                  "alignment": "center",
                  "children": {
                    "explicitList": [
                      "reservation-date-input",
                      "reservation-time-input"
                    ]
                  }
                }
              }
            },
            {
              "id": "reservation-date-input",
              "weight": 1,
              "component": {
                "DateTimeInput": {
                  "value": {
                    "path": "/reservationDate"
                  },
                  "enableDate": true,
                  "enableTime": false
                }
              }
            },
            {
              "id": "reservation-time-input",
              "weight": 1,
              "component": {
                "DateTimeInput": {
                  "value": {
                    "path": "/reservationTime"
                  },
                  "enableDate": false,
                  "enableTime": true
                }
              }
            },
            {
              "id": "confirm-button",
              "component": {
                "Button": {
                  "child": "confirm-button-label",
                  "style": "primary",
                  "action": {
                    "name": "confirmRestaurantReservation",
                    "context": [
                      {
                        "key": "restaurantName",
                        "value": {
                          "literalString": "Juniper & Stone Dining Room"
                        }
                      },
                      {
                        "key": "partySize",
                        "value": {
                          "path": "/partySize"
                        }
                      },
                      {
                        "key": "reservationDate",
                        "value": {
                          "path": "/reservationDate"
                        }
                      },
                      {
                        "key": "reservationTime",
                        "value": {
                          "path": "/reservationTime"
                        }
                      }
                    ]
                  }
                }
              }
            },
            {
              "id": "confirm-button-label",
              "component": {
                "Label": {
                  "text": {
                    "literalString": "Confirm reservation"
                  },
                  "variant": "bodySansSemibold"
                }
              }
            }
          ]
        }
      },
      {
        "dataModelUpdate": {
          "surfaceId": "restaurant-reservation-card-surface",
          "path": "/",
          "contents": [
            {
              "key": "partySize",
              "valueString": "4"
            },
            {
              "key": "reservationDate",
              "valueString": "2026-04-18"
            },
            {
              "key": "reservationTime",
              "valueString": "19:30:00"
            }
          ]
        }
      }
    ]
  }
}
0 tokens
Juniper & Stone Dining Room
48 Mercer Street, New York
Modern EuropeanChef's counterWindow seating
Party size
Time