> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

# Method name: createHeldReservation(reservationDetails: HeldReservationDetails)

# Method package: wixTableReservationsV2

# Method menu location: wixTableReservationsV2 --> reservations --> createHeldReservation

# Method Link: https://dev.wix.com/docs/velo/apis/wix-table-reservations-v2/reservations/create-held-reservation.md

# Method Description:

Creates a new temporary reservation and holds it for the customer for 10 minutes.

Creates a new reservation with the `HELD` status. `HELD` reservations are intended to reserve seats and tables for a party in a selected time slot while they enter further reservation details, such as names and contact information. Reservations with the `HELD` status are only valid for 10 minutes. Trying to change a `HELD` reservation’s status after 10 minutes returns an error.

You cannot call `updateReservation()` to change a reservation’s status from `HELD`. Trying to do so returns an error. Instead, you should use `reserveReservation()`.

If you do not wish to have `HELD` reservations in your flow, you can create a reservation with all required details using `createReservation()`.



# Method Code Examples:

*** Note: do not assume any prop names or enum values other than the ones in the example.

## Create a held reservation (page code) 

```javascript
import { reservations } from 'wix-table-reservations.v2';

/* Sample reservationDetails value:
 * {
 *   "reservationLocationId": "fab8cc1f-31cf-462f-b5bb-392594624bf2", 
 *   "startDate": new Date("2024-12-14T15:30:00Z"),
 *   "partySize": 2
 * }
 */

reservations.createHeldReservation(reservationDetails)
  .then((createdHeldReservation) => {
    const id = createdHeldReservation._id;
    const status = createdHeldReservation.status;

    console.log('Success! Created a held reservation:', createdHeldReservation);
    return createdHeldReservation;
  })
  .catch((error) => {
    console.error(error);
    // Handle the error
  });

/* Promise resolves to:
 * {
 *   "reservation": {
 *     "status": "HELD",
 *     "source": "UNKNOWN",
 *     "details": {
 *       "reservationLocationId": "fab8cc1f-31cf-462f-b5bb-392594624bf2",
 *       "tableIds": [],
 *       "startDate": "2024-12-14T15:30:00.000Z",
 *       "endDate": "2024-12-14T17:00:00.000Z",
 *       "partySize": 2
 *     },
 *     "revision": "1",
 *     "migrationNotes": [],
 *     "tablesWithReservationConflicts": [],
 *     "_id": "26bf7609-8bf4-45ac-aef0-dbb3e54f69ad",
 *     "_createdDate": "2024-01-17T10:07:56.966Z"
 *   }
 * }
 */

```

## Create a held reservation with a given time, location, and party size. 

```javascript
/* This example requires the following elements:
 * A dropdown element named `locationDropdown`.
 * A dropdown element named `partySizeDropdown`.
 * A dropdown element named `timeSlotDropdown`.
 * A button named `confirmButton`.
 * A text element named `heldReservationNotification`.
 */

/**********************************************
 * Backend code - reservationLocations.web.js *
 **********************************************/

import { Permissions, webMethod } from 'wix-web-module';
import { locations } from 'wix-business-tools.v2';
import { elevate } from 'wix-auth';

export const getRestaurantLocation = webMethod(Permissions.Anyone, async (location_id) => {
  const elevatedGetLocation = elevate(locations.getLocation);

  try {
     const result = await elevatedGetLocation(location_id);
     return result;
   } catch (error) {
     console.error(error);
     // Handle the error
   }
});

/*************
 * Page code *
 *************/

import { reservationLocations } from 'wix-table-reservations.v2';
import { reservations } from 'wix-table-reservations.v2';
import { timeSlots } from 'wix-table-reservations.v2';

import { getRestaurantLocation } from 'backend/reservationLocations.web';

$w.onReady(async function () {
  $w('#timeSlotDropdown').hide();
  $w('#partySizeDropdown').hide();
  $w('#confirmButton').hide();
  $w('#heldReservationNotification').hide();

  //Get the list of reservation locations
  const myReservationLocationList = await (async () => {
    try {
      let fullListObject = await reservationLocations.listReservationLocations();
      return fullListObject.reservationLocations;
    } catch (error) {
     console.error(error);
     // Handle the error
   }
  })();

  //Create an array to hold names and values for our locations dropdown list
  let locationDropdownOptions = [];
  for (const object in myReservationLocationList){
    //Use the _id stored in the reservation location's location object to get the location's name from the `locations` service
    const locationObject = await getRestaurantLocation(myReservationLocationList[object].location._id);
    locationDropdownOptions.push({
      "label": locationObject.name, 
      "value": myReservationLocationList[object]._id
    })	
  }
  //Populate our dropdown list with the array
  $w("#locationDropdown").options = locationDropdownOptions;

  //Create an array to hold numbers and values for our party size dropdown list
  let partySizeDropdownOptions = [];
  for (let i = 1; i<10; i++){
    partySizeDropdownOptions.push({
      "label": String(i), 
      "value": String(i)
    })	
  }
  //Populate our dropdown list with the array
  $w("#partySizeDropdown").options = partySizeDropdownOptions;

  $w('#locationDropdown').onChange( (event) => {
    if ($w('#locationDropdown').value) {
      $w('#partySizeDropdown').show();
      $w('#timeSlotDropdown').hide()
      $w('#confirmButton').hide();
    }
  });

  $w('#partySizeDropdown').onChange( async (event) => {
    if ($w('#locationDropdown').value) {
      $w('#timeSlotDropdown').show()
      $w('#confirmButton').hide();

      const timeSlotDetails = {
        "reservationLocationId": $w('#locationDropdown').value, 
        "date": new Date(),
        "partySize": parseInt($w('#partySizeDropdown').value)
      };

      const timeSlotOptions = {
        "duration": 30,
	"slotsAfter": 8,
	"slotsBefore": 0
      };

      //Get the list of time slots according to the details and options above
      const availableTimeSlots = await (async () => {
        try {
          let fullListObject = await timeSlots.getTimeSlots(timeSlotDetails.reservationLocationId, timeSlotDetails.date, timeSlotDetails.partySize, timeSlotOptions);
          return fullListObject.timeSlots;
        } catch (error) {
          console.error(error);
          // Handle the error
        }
      })();

      //Create an array to hold numbers and values for our time slot dropdown list
      let timeSlotDropdownOptions = [];
      for (const timeSlot in availableTimeSlots){
        if(availableTimeSlots[timeSlot].status == "AVAILABLE"){
          timeSlotDropdownOptions.push({
            "label": String(availableTimeSlots[timeSlot].startDate), 
            "value": String(availableTimeSlots[timeSlot].startDate)
          })
        }	
      }
      //Populate our dropdown list with the array
      $w("#timeSlotDropdown").options = timeSlotDropdownOptions;
    }
  });

  $w('#timeSlotDropdown').onChange( async (event) => {
    if ($w('#timeSlotDropdown').value) {
      $w('#confirmButton').show();
    }
  });

  $w('#confirmButton').onClick( async (event) => {
    //Get the list of time slots according to the details and options above
    
    const createdHeldReservation = await (async () => {
      try {
        const reservationDetails = {
          "reservationLocationId": $w('#locationDropdown').value, 
          "startDate": new Date($w("#timeSlotDropdown").value),
          "partySize": parseInt($w('#partySizeDropdown').value)
        };

        return await reservations.createHeldReservation(reservationDetails);
      } catch (error) {
        console.error(error);
        // Handle the error
      }
    })();

    if(createdHeldReservation){
      $w('#heldReservationNotification').text = "Held reservation created successfully."
      $w('#heldReservationNotification').show();
    }
  });
});

```

## Create a held reservation (backend) 

```javascript
import { Permissions, webMethod } from 'wix-web-module';
import { reservations } from 'wix-table-reservations.v2';

/* Sample reservationDetails value:
 * {
 *   "reservationLocationId": "fab8cc1f-31cf-462f-b5bb-392594624bf2", 
 *   "startDate": new Date("2024-12-14T15:30:00Z"),
 *   "partySize": 2
 * }
 */

export const myCreateContactFunction = webMethod(Permissions.Anyone, async (reservationDetails) => {
  try {
    const createdHeldReservation = await reservations.createHeldReservation(reservationDetails);

    const id = createdHeldReservation._id;
    const status = createdHeldReservation.status;

    console.log('Success! Created a held reservation:', createdHeldReservation);
    return createdHeldReservation;
  } catch (error) {
    console.error(error);
    // Handle the error
  }

});
```

---