tickets

1import wixEventsFrontend from 'wix-events-frontend';
2import wixData from 'wix-data';
3import wixPayFrontend from 'wix-pay-frontend';
4
5let eventId;
6let reservationId;
7let orderNumber;
8let tickets;
9
10$w.onReady(function () {
11  // Retrieve data and set up page
12  await getData();
13  $w("#ticketRepeater").onItemReady(displayTickets);
14  $w("#ticketRepeater").data = tickets;
15
16  // Define button click actions
17  $w("#reservationButton").onClick(reserveTickets);
18  $w("#checkoutButton").onClick(checkoutTickets);
19  $w("#updateButton").onClick(updateTickets);
20
21  // Verify coupon code when it is entered
22  $w("#couponCode").onCustomValidation(verifyCouponCode);
23});
24
25async function getData() {
26  // Run a query that returns only one event. Add
27  // additional filtering to the query if necessary.
28  const eventResults = await wixData.query("Events/Events")
29    .eq("title", "My Event")
30    .find();
31
32  if (eventResults.items.length > 0) {
33    eventId = eventResults.items[0]._id;
34
35    // Get tickets for the event
36    const ticketResults = await wixData.query("Events/Tickets")
37      .eq("event", eventId)
38      .find();
39
40      if (ticketResults.items.length > 0) {
41        tickets = ticketResults.items;
42      } else {
43        $w("#ticketRepeater").hide();
44        console.log("Could not find tickets");
45      }
46  } else {
47    console.log("Could not find event");
48  }
49}
50
51function displayTickets($item, itemData, index) {
52  $item("#ticketName").text = itemData.name;
53  $item("#ticketPrice").text = itemData.price.toString();
54  $item("#ticketQuantity").value = 0;
55}
56
57function reserveTickets() {
58  const selectedTickets = getSelectedTickets();
59
60  wixEventsFrontend.tickets.reserve(eventId, selectedTickets)
61    .then((reservation) => {
62      reservationId = reservation.id;
63    })
64    .catch((error) => {
65      console.log("Error", error.message)
66    });
67}
68
69function getSelectedTickets() {
70  let selectedTickets = [];
71
72  $w("#ticketRepeater").forEachItem(($item, itemData, index) => {
73    if ($item("#ticketQuantity").value > 0) {
74      selectedTickets.push( {
75        "ticketId": itemData._id,
76        "quantity": $item("#ticketQuantity").value
77      });
78    }
79  });
80
81  return selectedTickets;
82}
83
84function checkoutTickets() {
85  wixEventsFrontend.tickets.checkout(eventId, reservationId, {
86    "formValues": getFormValues(),
87    "coupon": $w("#couponCode").value
88  })
89    .then(({order}) => {
90      orderNumber = order.orderNumber
91      wixPayFrontend.startPayment(order.paymentId);
92      // Note that PDF tickets are available before payment is complete
93      $w("#ticketsPdfLink").value = order.ticketsPdf;
94    })
95    .catch((error) => {
96      console.log("Error", error.message)
97    });
98}
99
100function updateTickets() {
101  wixEventsFrontend.tickets.updateOrder(eventId, orderNumber, {
102    "formValues": getFormValues()
103  })
104    .catch((error) => {
105      console.log("Error", error.message)
106    });
107}
108
109function verifyCouponCode(value, reject) {
110  const coupon = $w("#couponCode").value;
111  wixEventsFrontend.tickets.verifyCoupon(eventId, reservationId, coupon) 
112    .then((result) => {
113      if (result.discountErrors) {
114        // handle verification failure
115        $w("#couponCode").updateValidityIndication();
116        $w("#couponErrorMsg").show();
117        $w("#couponSuccessMsg").hide();
118        reject("Coupon is invalid");
119      } else {
120        // handle coupon verified
121        $w("#couponErrorMsg").hide()
122        $w("#couponSuccessMsg").show()
123      }
124    });
125}
126
127function getFormValues() {
128  return [
129    {"name": "firstName", "value": $w("#firstName").value},
130    {"name": "lastName", "value": $w("#lastName").value},
131    {"name": "email", "value": $w("#email").value},
132    {"name": "custom", "value": $w("#foodAllergies").value},
133
134    // When a form contains an address, the way you format the
135    // address information for submission depends on what type
136    // of input elements you use to gather that information.
137
138    // Wix address input element.
139    {"name": "address", "value": $w("#address").value},
140
141    // Single element which is not an address
142    // input element, such as a text input.
143    {"name": "address", "value": [$w("#address").value]},
144
145    // Multiple elements for the
146    // various parts of an address.
147    {
148      "name": "address", 
149      "value": [
150        $w("#street").value,
151        $w("#city").value,
152        $w("#state").value,
153        $w("#country").value,
154        $w("#postalCode").value
155      ]
156    },
157
158    // When a form contains an input for adding more guests to an
159    // RSVP, format the guest names for submission in an array
160    // where each element is the full name of a guest.
161    {"name": "additionalGuests", "value": $w("#additionalGuests").value},
162    {
163      "name": "guestNames",
164      "value": [
165        `${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`,
166        `${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`,
167      ]
168    }
169  ];
170}