iticket-seatingplan-dev 1.5.6 → 1.5.7

package/dist/components/SeatingPlan.tsx

@@ -1,786 +0,0 @@
-import "./styles/index.css";
-import "./styles/pos.css";
-import "./styles/flexi.css";
-
-import React, { useLayoutEffect, useRef } from "react";
-import { useEffect, useState } from "react";
-import Map from "./Map";
-import * as L from "leaflet";
-import { MapContainer } from "react-leaflet";
-import {
-  statuses,
-  statusColors,
-  calculateCenterOfMap,
-  bookingModes,
-  modes,
-} from "../utils";
-import { createPortal } from "react-dom";
-import {
-  BookingMode,
-  ChosenSeat,
-  CallbackEvent,
-  Price,
-  Seat,
-  SeatData,
-} from "../utils/types";
-import PricingPopup from "./PricingPopup";
-
-interface Props {
-  eventId: number;
-  eventVenueId: number;
-  sessionId: string;
-  showingId: number;
-  areaId: number;
-  priceSectionIds?: number[] | null;
-  price?: number;
-  quantity?: number;
-  callbackFunction?: (event: CallbackEvent) => void;
-  apiKey: string;
-  baseUrl: string;
-  countryCode: string;
-  connectedShowings?: number[] | null;
-  areaName: string;
-  promoCode?: string;
-  bookingMode?: BookingMode;
-}
-
-const SeatingPlan = ({
-  eventId,
-  eventVenueId,
-  sessionId,
-  showingId,
-  areaId,
-  priceSectionIds,
-  price,
-  quantity,
-  callbackFunction,
-  apiKey,
-  baseUrl,
-  countryCode,
-  connectedShowings,
-  areaName,
-  promoCode,
-  bookingMode = bookingModes.SHOPSITE,
-}: Props) => {
-  const [initialiseMessage, setInitialiseMessage] = useState(
-    "Initialising seating plan..."
-  );
-  const [isReloading, setIsReloading] = useState(false);
-  const [position, setPosition] = useState(null);
-  const [height, setHeight] = useState(0);
-  const [width, setWidth] = useState(0);
-  const [seats, setSeats] = useState<SeatData | undefined>();
-  const [error, setError] = useState(null);
-  const [bookedSeats, setBookedSeats] = useState([]);
-  const [chosenSeat, setChosenSeat] = useState(null);
-  const [area, setArea] = useState(null);
-  const [ticketPopupOpen, setTicketPopupOpen] = useState(false);
-  const [bounds, setBounds] = useState(null);
-  const [isFullScreen, setIsFullScreen] = useState(false);
-  const [mounted, setMounted] = React.useState(false);
-  const [mode, setMode] = useState(modes.SINGLE);
-  const [pricingPopupOpen, setPricingPopupOpen] = useState(false);
-  const [selectedSeats, setSelectedSeats] = useState([]);
-  const mapRef = useRef(null);
-  const canMultiSelect = bookingMode === bookingModes.POS;
-  const apiUrl = `${baseUrl}/legacy/${countryCode}/shop/events/${eventId}/${eventVenueId}/showings/${showingId}/tickets/allocated/${areaId}`;
-
-  const setMap = (map: L.Map) => {
-    mapRef.current = map;
-  };
-
-  useLayoutEffect(() => setMounted(true), []);
-
-  const addTicketToCart = (s: Seat, priceage: Price, cs?: ChosenSeat) => {
-    const updatedSeats = { ...seats };
-    const seatIndex = updatedSeats.seats.findIndex(
-      (seat) => seat.ssId === s.ssId
-    );
-
-    if (seatIndex !== -1) {
-      updatedSeats.seats[seatIndex].loading = true;
-      setSeats(updatedSeats);
-    }
-
-    if (
-      (s.s !== statuses.UNSOLD && s.s !== statuses.USER_PENDING) ||
-      (bookedSeats.length >= quantity && s.s === statuses.UNSOLD)
-    ) {
-      if (bookedSeats.length >= quantity) {
-        const event = {
-          type: "error",
-          details: {
-            message: "Maximum ticket booking quantity specified reached.",
-          },
-        };
-        callbackFunction?.(event);
-      }
-      if (seatIndex !== -1) {
-        updatedSeats.seats[seatIndex].loading = false;
-        setSeats(updatedSeats);
-      }
-      return;
-    }
-
-    if (priceage.is_available === false) {
-      const event = {
-        type: "error",
-        details: {
-          message: "Allocation exhausted, please try another area or price.",
-        },
-      };
-      callbackFunction?.(event);
-      if (seatIndex !== -1) {
-        updatedSeats.seats[seatIndex].loading = false;
-        setSeats(updatedSeats);
-      }
-      return;
-    }
-
-    mapRef.current?.target?.closePopup();
-
-    fetch(apiUrl, {
-      method: "POST",
-      body: JSON.stringify({
-        priceAgeId: priceage.paId,
-        seatId: s.ssId,
-        price: priceage.p,
-        connectedShowings: connectedShowings,
-      }),
-      headers: {
-        "content-type": "application/json",
-        "basket-key": sessionId,
-      },
-    })
-      .then((response) => {
-        if (response?.status === 403) {
-          if (seatIndex !== -1) {
-            updatedSeats.seats[seatIndex] = {
-              ...s,
-              loading: false,
-              s: statuses.SOLD,
-            };
-            setSeats(updatedSeats);
-          }
-
-          const event = {
-            type: "error",
-            details: {
-              error: {
-                code: 403,
-                message: `The seat you're trying to book is no longer available.`,
-              },
-            },
-          };
-          callbackFunction?.(event);
-        } else if (response?.status === 400) {
-          if (seatIndex !== -1) {
-            updatedSeats.seats[seatIndex] = {
-              ...s,
-              loading: false,
-              s: statuses.SOLD,
-            };
-            setSeats(updatedSeats);
-          }
-
-          const event = {
-            type: "error",
-            details: {
-              error: {
-                code: 403,
-                message: `Oops, seems like you're trying to book tickets that are incompatible with other tickets in your cart.`,
-              },
-            },
-          };
-          callbackFunction?.(event);
-        } else if (response?.status === 429) {
-          if (seatIndex !== -1) {
-            updatedSeats.seats[seatIndex].loading = false;
-            setSeats(updatedSeats);
-          }
-
-          const event = {
-            type: "error",
-            details: {
-              error: {
-                code: 429,
-                message: `Someone else selected this first. Please try again`,
-              },
-            },
-          };
-          callbackFunction?.(event);
-        } else {
-          if (seatIndex !== -1) {
-            updatedSeats.seats[seatIndex] = {
-              ...s,
-              s: statuses.USER_PENDING,
-              bookedPrice: price,
-              loading: false,
-            };
-            setSeats(updatedSeats);
-          }
-
-          setBookedSeats((prev) => [
-            ...prev,
-            {
-              ssId: s.ssId,
-              r: s.r,
-              c: s.c,
-              showingId: showingId,
-              pId: priceage.paId,
-              p: priceage.p,
-              paName: priceage.paName,
-            },
-          ]);
-
-          const event = {
-            type: "cart-change-add",
-            details: [
-              ...bookedSeats,
-              {
-                ssId: s.ssId,
-                r: s.r,
-                c: s.c,
-                showingId: showingId,
-                pId: priceage.paId,
-                p: priceage.p,
-                paName: priceage.paName,
-              },
-            ],
-          };
-          callbackFunction?.(event);
-        }
-      })
-      .catch(() => {
-        if (seatIndex !== -1) {
-          updatedSeats.seats[seatIndex].loading = false;
-          setSeats(updatedSeats);
-        }
-        const event = {
-          type: "error",
-          details: {
-            error: {
-              code: 500,
-              message: "Oops! Something went wrong. Please try again.",
-            },
-          },
-        };
-        callbackFunction?.(event);
-      })
-      .finally(() => {
-        initialFetch(true);
-      });
-  };
-
-  const removeTicketFromCart = (s: Seat, e: L.LeafletMouseEvent) => {
-    const updatedSeats = { ...seats };
-    const seatIndex = updatedSeats.seats.findIndex(
-      (seat) => seat.ssId === s.ssId
-    );
-
-    if (seatIndex !== -1) {
-      updatedSeats.seats[seatIndex].loading = true;
-      setSeats(updatedSeats);
-    }
-
-    fetch(`${apiUrl}/seat/${s.ssId}`, {
-      method: "DELETE",
-      headers: {
-        "basket-key": sessionId,
-      },
-    })
-      .then(() => {
-        if (seatIndex !== -1) {
-          updatedSeats.seats[seatIndex] = {
-            ...s,
-            loading: false,
-            s: statuses.UNSOLD,
-            bookedPrice: null,
-          };
-          setSeats(updatedSeats);
-        }
-
-        setBookedSeats((prev) => prev.filter((bs) => bs.ssId !== s.ssId));
-
-        const event = {
-          type: "cart-change-remove",
-          details: bookedSeats.filter((bs) => bs.ssId === s.ssId),
-        };
-        callbackFunction?.(event);
-      })
-      .catch(() => {
-        if (seatIndex !== -1) {
-          updatedSeats.seats[seatIndex].loading = false;
-          setSeats(updatedSeats);
-        }
-        e.target.setStyle({ fillColor: statusColors.booked });
-
-        const event = {
-          type: "error",
-          details: {
-            error: {
-              code: 500,
-              message: "Oops! Something went wrong. Please try again.",
-            },
-          },
-        };
-        callbackFunction?.(event);
-      })
-      .finally(() => {
-        initialFetch(true);
-      });
-  };
-
-  const batchAddTicketsToCart = async (
-    seatsToBook: { seat: Seat; priceage: Price }[]
-  ) => {
-    if (!canMultiSelect || seatsToBook.length === 0) {
-      return;
-    }
-
-    const updatedSeats = { ...seats };
-    const seatIds = seatsToBook.map((s) => s.seat.ssId);
-
-    updatedSeats.seats.forEach((s) => {
-      if (seatIds.includes(s.ssId)) {
-        s.loading = true;
-      }
-    });
-    setSeats(updatedSeats);
-
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    setBookedSeats((prev) => [
-      ...prev,
-      ...seatsToBook.map(({ seat, priceage }) => ({
-        ssId: seat.ssId,
-        r: seat.r,
-        c: seat.c,
-        showingId: showingId,
-        pId: priceage.paId,
-        p: priceage.p,
-        paName: priceage.paName,
-      })),
-    ]);
-
-    updatedSeats.seats.forEach((s) => {
-      if (seatIds.includes(s.ssId)) {
-        s.s = statuses.USER_PENDING;
-        s.bookedPrice = price;
-        s.loading = false;
-      }
-    });
-    setSeats(updatedSeats);
-  };
-
-  const batchRemoveTicketsFromCart = async (seatsToRemove: Seat[]) => {
-    if (!canMultiSelect || seatsToRemove.length === 0) {
-      return;
-    }
-
-    const updatedSeats = { ...seats };
-    const seatIds = seatsToRemove.map((s) => s.ssId);
-
-    updatedSeats.seats.forEach((s) => {
-      if (seatIds.includes(s.ssId)) {
-        s.loading = true;
-      }
-    });
-    setSeats(updatedSeats);
-
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    setBookedSeats((prev) => [
-      ...prev.filter((v) => !seatIds.includes(v.ssId)),
-    ]);
-
-    updatedSeats.seats.forEach((s) => {
-      if (seatIds.includes(s.ssId)) {
-        s.loading = false;
-        s.s = statuses.UNSOLD;
-        s.bookedPrice = null;
-      }
-    });
-    setSeats(updatedSeats);
-  };
-
-  const handleClickSeat = (e: L.LeafletMouseEvent, s: Seat) => {
-    setChosenSeat({ circle: e, seat: s });
-
-    if (
-      (s.s !== statuses.UNSOLD && s.s !== statuses.USER_PENDING) ||
-      (bookedSeats.length >= quantity && s.s === statuses.UNSOLD)
-    ) {
-      if (bookedSeats.length >= quantity) {
-        const event = {
-          type: "error",
-          details: {
-            message: "Maximum ticket booking quantity specified reached.",
-          },
-        };
-        callbackFunction?.(event);
-      }
-      return;
-    }
-
-    if (s.s === statuses.UNSOLD) {
-      const availablePrices = seats.pricing.filter(
-        (price) =>
-          (!priceSectionIds || priceSectionIds.includes(price.psId)) &&
-          s.psId === price.psId
-      );
-
-      const isSingleFlexi =
-        availablePrices.length === 1 &&
-        !!availablePrices[0].pMax &&
-        !!availablePrices[0].pMin &&
-        availablePrices[0].pMax > availablePrices[0].pMin;
-
-      if (availablePrices.length === 1 && !isSingleFlexi) {
-        addTicketToCart(s, availablePrices[0], { circle: e, seat: s });
-      }
-    } else {
-      removeTicketFromCart(s, e);
-    }
-  };
-
-  const initialFetch = (isReload = false) => {
-    if (isReload) {
-      setIsReloading(true);
-    }
-    setInitialiseMessage("Initialising seating plan...");
-    fetch(
-      // `http://localhost:3155/api/legacy/shop/events/${eventId}/${eventVenueId}/showings/${showingId}/tickets/allocated/${areaId}`,
-      `${apiUrl}${promoCode ? `?promo=${promoCode}` : ""}`,
-      {
-        headers: {
-          "basket-key": sessionId,
-          Authorization: `Bearer ${apiKey}`,
-        },
-      }
-    )
-      .then(async (response) => {
-        const data = await response.json();
-        data.retryAfter = response.headers.get("Retry-After");
-        return data;
-      })
-      .then((data) => {
-        if (data.statusCode === 429) {
-          setInitialiseMessage(
-            `Looks like it's busy. Stand by. Trying again in ${
-              data.retryAfter
-            } second${data.retryAfter > 1 ? "s" : ""}.`
-          );
-          return setTimeout(initialFetch, data.retryAfter * 1000);
-        }
-
-        if (data.statusCode === 403) {
-          if (!sessionId || data.message === "Invalid Session id.") {
-            throw new Error(
-              "Looks like your cart has expired. Please refresh the page to try again."
-            );
-          } else {
-            throw new Error("Invalid API Key or unauthorized URL");
-          }
-        }
-
-        const img = new Image();
-        img.src = data.background;
-
-        setBookedSeats(
-          data.seats
-            .filter(
-              (s) => s.s === statuses.USER_PENDING && s.bookedPrice === price
-            )
-            .map((s) => ({
-              ssId: s.ssId,
-              r: s.r,
-              c: s.c,
-              showingId: showingId,
-              p: s.p, //price || s.defaultPrice,
-              pId: s.pId,
-              paName: s.paName,
-            }))
-        );
-
-        img.onload = () => {
-          const imgSouthwest = [0, 0];
-          const imgNortheast = [img.height * 0.015, img.width * 0.015];
-
-          setBounds([imgSouthwest, imgNortheast]);
-          setPosition([img.height * 0.005, img.width * 0.005]);
-          setHeight(img.height * 0.5);
-          setWidth(img.width * 0.5);
-          setSeats(data);
-        };
-
-        setIsReloading(false);
-      })
-      .catch((error) => {
-        // console.log(error);
-        setError({
-          response: {
-            data: {
-              message:
-                error?.message ?? "Something went wrong. Please try again.",
-            },
-          },
-        });
-
-        setIsReloading(false);
-      });
-  };
-
-  useEffect(() => {
-    if (!error && areaId !== area) {
-      setArea(areaId);
-      initialFetch();
-      setPosition(null);
-    }
-  }, [areaId]);
-
-  useEffect(() => {
-    if (ticketPopupOpen) {
-      chosenSeat?.circle.target.setStyle({ fillOpacity: 0 });
-    }
-  }, [ticketPopupOpen, chosenSeat]);
-
-  // TEST
-  // useEffect(() => console.log("Booked: ", bookedSeats), [bookedSeats]);
-
-  // render the map using ReactDOM.createPortal to avoid z-index issues
-  // in full screen mode, render the map in the body, otherwise render in the seating-plan-root div
-  const mapContainer =
-    mounted &&
-    (isFullScreen
-      ? document?.body
-      : document?.getElementById("seating-plan-root"));
-
-  const backdropContainer = mounted && document?.body;
-
-  const groupedSelectedSeats: {
-    [key: number]: { seats: Seat[]; priceage?: Price };
-  } = selectedSeats.reduce((acc, curr) => {
-    if (curr.psId) {
-      const priceages = seats.pricing.filter(
-        (price) =>
-          (!priceSectionIds || priceSectionIds.includes(price.psId)) &&
-          price.psId === curr.psId
-      );
-      const availablePriceages = priceages.filter(
-        (p) => p.is_available !== false
-      );
-      if (!acc[curr.psId]) {
-        acc[curr.psId] = {
-          seats: [],
-          priceage:
-            availablePriceages.length > 0 ? availablePriceages[0] : undefined,
-        };
-      }
-      acc[curr.psId].seats.push(curr);
-    }
-    return acc;
-  }, {} as { [key: number]: { seats: Seat[]; priceage?: Price } });
-
-  const cancelPriceSelect = () => {
-    setPricingPopupOpen(false);
-    setSelectedSeats([]);
-  };
-
-  // return seating plan
-  return (
-    <>
-      <div className="seating-plan-root" id="seating-plan-root">
-        {error ? (
-          <div className="loading">
-            <h1>OOPS!</h1>
-            <div>{error.response.data.message}</div>
-          </div>
-        ) : position && area === areaId ? (
-          <>
-            {backdropContainer &&
-              createPortal(
-                <div
-                  className={`seating-plan-backdrop ${
-                    isFullScreen ? "full-screen" : ""
-                  }`}
-                  onClick={() => setIsFullScreen(false)}
-                />,
-                backdropContainer
-              )}
-            {mapContainer &&
-              createPortal(
-                <div
-                  className={`seating-plan-container ${
-                    isFullScreen ? "full-screen" : ""
-                  }`}
-                  data-mode={mode}
-                >
-                  {pricingPopupOpen && canMultiSelect && (
-                    <PricingPopup
-                      cancelPriceSelect={cancelPriceSelect}
-                      groupedSelectedSeats={groupedSelectedSeats}
-                      priceSectionIds={priceSectionIds}
-                      pricing={seats.pricing}
-                      batchAddTicketsToCart={batchAddTicketsToCart}
-                    />
-                  )}
-                  <MapContainer
-                    zoomSnap={0}
-                    zoomDelta={1}
-                    center={calculateCenterOfMap(height, seats.seats)}
-                    zoom={undefined}
-                    zoomControl={true}
-                    scrollWheelZoom={true}
-                    bounds={bounds}
-                    // @ts-ignore
-                    whenReady={setMap}
-                  >
-                    <Map
-                      seats={seats}
-                      height={height}
-                      width={width}
-                      bounds={bounds}
-                      handleClickSeat={handleClickSeat}
-                      ticketPopupOpen={ticketPopupOpen}
-                      setTicketPopupOpen={setTicketPopupOpen}
-                      chosenSeat={chosenSeat}
-                      bookedSeats={bookedSeats}
-                      addTicketToCart={addTicketToCart}
-                      batchRemoveTicketsFromCart={batchRemoveTicketsFromCart}
-                      isReloading={isReloading}
-                      initialFetch={initialFetch}
-                      isFullScreen={isFullScreen}
-                      setIsFullScreen={setIsFullScreen}
-                      priceSectionIds={priceSectionIds}
-                      areaName={areaName}
-                      price={price}
-                      canMultiSelect={canMultiSelect}
-                      mode={mode}
-                      setMode={setMode}
-                      pricingPopupOpen={pricingPopupOpen}
-                      setPricingPopupOpen={setPricingPopupOpen}
-                      selectedSeats={selectedSeats}
-                      setSelectedSeats={setSelectedSeats}
-                    />
-                    {/* <GeoJSON attribution="powered by &copy; iTICKET" data={}/> */}
-                  </MapContainer>
-                </div>,
-                mapContainer
-              )}
-          </>
-        ) : (
-          <div className="loading">
-            <div>
-              {/* <img
-              src="https://iticketseatingplan.blob.core.windows.net/embed/static/media/spinner.gif"
-              alt="loading"
-            /> */}
-              <svg
-                width="105"
-                height="105"
-                viewBox="0 0 105 105"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="#2ecc71"
-              >
-                <circle cx="12.5" cy="12.5" r="12.5">
-                  <animate
-                    attributeName="fill-opacity"
-                    begin="0s"
-                    dur="1s"
-                    values="1;.2;1"
-                    calcMode="linear"
-                    repeatCount="indefinite"
-                  />
-                </circle>
-                <circle cx="12.5" cy="52.5" r="12.5" fillOpacity=".5">
-                  <animate
-                    attributeName="fill-opacity"
-                    begin="100ms"
-                    dur="1s"
-                    values="1;.2;1"
-                    calcMode="linear"
-                    repeatCount="indefinite"
-                  />
-                </circle>
-                <circle cx="52.5" cy="12.5" r="12.5">
-                  <animate
-                    attributeName="fill-opacity"
-                    begin="300ms"
-                    dur="1s"
-                    values="1;.2;1"
-                    calcMode="linear"
-                    repeatCount="indefinite"
-                  />
-                </circle>
-                <circle cx="52.5" cy="52.5" r="12.5">
-                  <animate
-                    attributeName="fill-opacity"
-                    begin="600ms"
-                    dur="1s"
-                    values="1;.2;1"
-                    calcMode="linear"
-                    repeatCount="indefinite"
-                  />
-                </circle>
-                <circle cx="92.5" cy="12.5" r="12.5">
-                  <animate
-                    attributeName="fill-opacity"
-                    begin="800ms"
-                    dur="1s"
-                    values="1;.2;1"
-                    calcMode="linear"
-                    repeatCount="indefinite"
-                  />
-                </circle>
-                <circle cx="92.5" cy="52.5" r="12.5">
-                  <animate
-                    attributeName="fill-opacity"
-                    begin="400ms"
-                    dur="1s"
-                    values="1;.2;1"
-                    calcMode="linear"
-                    repeatCount="indefinite"
-                  />
-                </circle>
-                <circle cx="12.5" cy="92.5" r="12.5">
-                  <animate
-                    attributeName="fill-opacity"
-                    begin="700ms"
-                    dur="1s"
-                    values="1;.2;1"
-                    calcMode="linear"
-                    repeatCount="indefinite"
-                  />
-                </circle>
-                <circle cx="52.5" cy="92.5" r="12.5">
-                  <animate
-                    attributeName="fill-opacity"
-                    begin="500ms"
-                    dur="1s"
-                    values="1;.2;1"
-                    calcMode="linear"
-                    repeatCount="indefinite"
-                  />
-                </circle>
-                <circle cx="92.5" cy="92.5" r="12.5">
-                  <animate
-                    attributeName="fill-opacity"
-                    begin="200ms"
-                    dur="1s"
-                    values="1;.2;1"
-                    calcMode="linear"
-                    repeatCount="indefinite"
-                  />
-                </circle>
-              </svg>
-            </div>
-            <div className="initialise-message">{initialiseMessage}</div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default SeatingPlan;