iticket-seatingplan-dev 1.5.2 → 1.5.4

package/dist/components/Map.tsx

@@ -0,0 +1,756 @@
+import "leaflet-gesture-handling/dist/leaflet-gesture-handling.css";
+import "leaflet-draw/dist/leaflet.draw.css";
+import React, { SetStateAction, useEffect, useRef, useState } from "react";
+import {
+  Circle,
+  ImageOverlay,
+  Popup,
+  Tooltip,
+  useMap,
+  FeatureGroup,
+  useMapEvents,
+} from "react-leaflet";
+import * as L from "leaflet";
+import { EditControl } from "react-leaflet-draw";
+import { GestureHandling } from "leaflet-gesture-handling";
+import Control from "react-leaflet-custom-control";
+import {
+  expandIcon,
+  closeIcon,
+  userIcon,
+  wheelchairIcon,
+  collapseIcon,
+} from "./assets/encodedSvgs";
+import { statuses, getInitialColor, modes } from "../utils";
+import { ChosenSeat, Mode, Price, Seat, SeatData } from "../utils/types";
+import PriceButton from "./PriceButton";
+import Flexi from "./Flexi";
+import CloseIcon from "./icons/CloseIcon";
+import TicketIcon from "./icons/TicketIcon";
+import FlexiIcon from "./icons/FlexiIcon";
+
+interface Props {
+  seats: SeatData;
+  height: number;
+  width: number;
+  bounds: L.LatLngBounds;
+  handleClickSeat: (e: L.LeafletMouseEvent, s: Seat) => void;
+  ticketPopupOpen: boolean;
+  setTicketPopupOpen: React.Dispatch<SetStateAction<boolean>>;
+  chosenSeat?: ChosenSeat;
+  bookedSeats: Seat[];
+  addTicketToCart: (seat: Seat, price: Price, cs?: ChosenSeat) => void;
+  batchRemoveTicketsFromCart: (seats: Seat[]) => void;
+  isReloading: boolean;
+  initialFetch: (isReload?: boolean) => void;
+  isFullScreen: boolean;
+  setIsFullScreen: React.Dispatch<SetStateAction<boolean>>;
+  priceSectionIds?: number[];
+  areaName?: string;
+  price?: number;
+  canMultiSelect?: boolean;
+  mode: Mode;
+  setMode: React.Dispatch<SetStateAction<Mode>>;
+  pricingPopupOpen: boolean;
+  setPricingPopupOpen: React.Dispatch<SetStateAction<boolean>>;
+  selectedSeats: Seat[];
+  setSelectedSeats: React.Dispatch<SetStateAction<Seat[]>>;
+}
+
+export default function Map({
+  seats,
+  height,
+  width,
+  bounds,
+  handleClickSeat,
+  ticketPopupOpen,
+  setTicketPopupOpen,
+  chosenSeat,
+  bookedSeats,
+  addTicketToCart,
+  batchRemoveTicketsFromCart,
+  isReloading,
+  initialFetch,
+  isFullScreen,
+  setIsFullScreen,
+  priceSectionIds,
+  areaName,
+  price,
+  canMultiSelect,
+  mode,
+  setMode,
+  pricingPopupOpen,
+  setPricingPopupOpen,
+  selectedSeats,
+  setSelectedSeats,
+}: Props) {
+  const [isLegendOpen, setIsLegendOpen] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const drawLayersRef = useRef(null);
+  const drawRef = useRef(null);
+  const popupRef = useRef(null);
+
+  const map = useMap();
+
+  L.drawLocal.draw.toolbar.buttons.rectangle = "Box select";
+
+  useMapEvents({
+    mouseover: () => {
+      if (mode === modes.DRAG || mode === modes.DRAW || mode === modes.REMOVE) {
+        map.dragging.disable();
+      }
+    },
+    mousedown: (e) => {
+      if (!canMultiSelect) return;
+      const parent = document.querySelector(".leaflet-pane.leaflet-map-pane");
+      if (
+        e.target !== parent &&
+        !parent.contains(e.originalEvent.target as Node)
+      ) {
+        return;
+      }
+      if (mode === modes.DRAG || mode === modes.REMOVE) {
+        setIsDragging(true);
+      }
+    },
+    mouseup: () => {
+      if (!canMultiSelect) return;
+      if ((mode === modes.DRAG || mode === modes.REMOVE) && isDragging) {
+        setIsDragging(false);
+        if (mode === modes.DRAG) {
+          if (selectedSeats.length > 0) {
+            setPricingPopupOpen(true);
+          }
+        } else if (mode === modes.REMOVE) {
+          const seatsToRemove = [];
+          selectedSeats.forEach((seat) => {
+            if (
+              !seatsToRemove.find((s) => s.ssId === seat.ssId) &&
+              seat.s === statuses.USER_PENDING
+            ) {
+              seatsToRemove.push(seat);
+            }
+          });
+
+          if (seatsToRemove.length > 0) {
+            batchRemoveTicketsFromCart(seatsToRemove);
+          }
+          setSelectedSeats([]);
+        }
+      }
+    },
+  });
+
+  useEffect(() => {
+    const keyboardHandler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        if (ticketPopupOpen) {
+          map.closePopup();
+        } else if (pricingPopupOpen) {
+          setPricingPopupOpen(false);
+          setSelectedSeats([]);
+        } else if (mode !== modes.SINGLE) {
+          if (mode === modes.DRAW) {
+            drawRef.current?._toolbars.draw.disable();
+          }
+          setMode(modes.SINGLE);
+        } else if (isFullScreen) {
+          setIsFullScreen(false);
+        }
+      } else if (e.key === "Control" && canMultiSelect) {
+        if (mode !== modes.DRAG) {
+          if (mode === modes.DRAW) {
+            drawRef.current?._toolbars.draw.disable();
+          }
+          setMode(modes.DRAG);
+        } else {
+          setMode(modes.SINGLE);
+        }
+      } else if (e.key === "Alt" && canMultiSelect) {
+        if (mode !== modes.DRAW) {
+          drawRef.current?._toolbars.draw._modes.rectangle.handler.enable();
+          setMode(modes.DRAW);
+        } else {
+          drawRef.current?._toolbars.draw.disable();
+          setMode(modes.SINGLE);
+        }
+      }
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("keydown", keyboardHandler);
+    }
+
+    return () => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("keydown", keyboardHandler);
+      }
+    };
+  }, [isFullScreen, ticketPopupOpen, mode]);
+
+  const getNorthSeatLat = (seat: Seat) => {
+    return height / 33.33 - (height / 33.33) * seat.y * 0.0105 + 1.4;
+  };
+
+  const getSeatCenterLatLng = (seat: Seat, isIcon: boolean) => {
+    return {
+      lat:
+        height * 0.05 -
+        seat.y /
+          (height > 800 ? (height > 999 ? (isIcon ? 3.5 : 3.45) : 3.3) : 3.35) -
+        (height > 800
+          ? height > 999
+            ? height * 0.0201
+            : height * 0.0198
+          : height > 587
+          ? height * 0.0201
+          : height > 399
+          ? height * 0.02035
+          : height * 0.0207),
+      lng: seat.x * 0.3 + 0.15,
+    };
+  };
+
+  const handleDrawBox = (v: L.DrawEvents.Created) => {
+    if (!canMultiSelect || !(v.layer instanceof L.Rectangle)) return;
+    const seatsToBook: Seat[] = [];
+    const boxBounds = v.layer.getBounds();
+    seats?.seats?.forEach((seat) => {
+      const seatCenter = getSeatCenterLatLng(seat, false);
+      const latlng: L.LatLngExpression = [
+        seat.r.includes("NORTH") ? getNorthSeatLat(seat) : seatCenter.lat,
+        seatCenter.lng,
+      ];
+      if (
+        boxBounds.contains(latlng) &&
+        !seatsToBook.find((s) => s.ssId === seat.ssId) &&
+        seat.s === statuses.UNSOLD
+      ) {
+        seatsToBook.push(seat);
+      }
+    });
+
+    setSelectedSeats(seatsToBook);
+    if (seatsToBook.length > 0) {
+      setPricingPopupOpen(true);
+    }
+    drawLayersRef.current?.clearLayers();
+  };
+
+  // gesture-handling plugin disallows scroll zooming and touch panning,
+  // to allow users to scroll past the map when it's not full screen.
+  useEffect(() => {
+    if (!isFullScreen) {
+      map.addHandler("gestureHandling", GestureHandling);
+      // @ts-ignore
+      map.gestureHandling.enable();
+    }
+  }, [map, isFullScreen]);
+
+  useEffect(() => {
+    if (mode === modes.SINGLE) {
+      map.dragging.enable();
+    } else {
+      map.dragging.disable();
+    }
+  }, [mode, map]);
+
+  return (
+    <>
+      <Control position="bottomright">
+        <div className="legendBox">
+          <div className="legend-header">
+            <button
+              className={`legend-button ${isLegendOpen ? "expanded" : ""}`}
+              onClick={() => setIsLegendOpen(!isLegendOpen)}
+            >
+              <p>{isLegendOpen ? "LEGEND:" : "VIEW LEGEND"}</p>
+            </button>
+            {isLegendOpen && (
+              <button
+                className="close-button"
+                onClick={() => setIsLegendOpen(false)}
+              >
+                <img src={closeIcon} alt="close" />
+              </button>
+            )}
+          </div>
+          <div className={`legend-contents ${isLegendOpen ? "expanded" : ""}`}>
+            <div>
+              <div className="legend-item">
+                <div className="legend-symbol legend-available"></div>
+                <p>available</p>
+              </div>
+            </div>
+            <div>
+              <div className="legend-item">
+                <div className="legend-symbol legend-sold"></div>
+                <p>sold</p>
+              </div>
+            </div>
+            <div>
+              <div className="legend-item">
+                <div className="legend-symbol legend-in-cart"></div>
+                <p>in cart</p>
+              </div>
+            </div>
+            <div>
+              <div className="legend-item">
+                <img src={wheelchairIcon} width={15} height={15} />
+                <p>wheelchair</p>
+              </div>
+            </div>
+            {seats.seats.filter((seat) => seat.m).length > 0 ? (
+              <div>
+                <div className="legend-item">
+                  <img src={userIcon} width={15} height={15} />
+                  <p>membership seats</p>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+      </Control>
+
+      <Control position="topleft">
+        <div className="extra-controls">
+          <button
+            title="Re-centre Seating Plan"
+            onClick={() => map.fitBounds(bounds)}
+            className="leaflet-control-zoom-in"
+          >
+            <img
+              src="https://au-iticket-shop-legacy.azurewebsites.net/assets/images/fit-icon.jpg"
+              style={{
+                height: "17px",
+              }}
+            ></img>
+          </button>
+          <button
+            title="Reload Seating Plan"
+            disabled={isReloading}
+            onClick={() => {
+              initialFetch(true);
+              map.fitBounds(bounds);
+            }}
+            className="leaflet-control-zoom-in reload-seating-plan"
+            style={{
+              background: isReloading ? "rgb(0, 230, 64)" : undefined,
+            }}
+          >
+            <img
+              className={isReloading ? "rotate" : ""}
+              src="https://au-iticket-shop-legacy.azurewebsites.net/assets/images/refresh.png"
+              style={{ height: "17px" }}
+            ></img>
+          </button>
+        </div>
+      </Control>
+      <Control position="topleft">
+        <div className="extra-controls full-screen-control">
+          <button
+            title={
+              isFullScreen ? "Collapse Seating Plan" : "Expand Seating Plan"
+            }
+            onClick={() => {
+              setIsFullScreen((prev) => !prev);
+            }}
+            className="leaflet-control-zoom-in"
+          >
+            <img
+              src={isFullScreen ? collapseIcon : expandIcon}
+              style={{
+                height: "24px",
+              }}
+            ></img>
+          </button>
+        </div>
+      </Control>
+
+      {canMultiSelect && (
+        <>
+          <Control position="bottomleft">
+            <div className="extra-controls multi-select-control">
+              <div className="drag-select">
+                <button
+                  title="Drag select"
+                  onClick={() => {
+                    drawRef.current?._toolbars.draw.disable();
+                    setMode((prev) =>
+                      prev === modes.DRAG ? modes.SINGLE : modes.DRAG
+                    );
+                  }}
+                  className="leaflet-control-zoom-in drag-button"
+                >
+                  <span />
+                </button>
+                <ul
+                  className="leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom cancel-button"
+                  style={{ display: mode === modes.DRAG ? "block" : "none" }}
+                >
+                  <li>
+                    <a
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setMode(modes.SINGLE);
+                      }}
+                    >
+                      Cancel
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              {(bookedSeats.length > 0 || mode === modes.REMOVE) && (
+                <div className="remove-seats">
+                  <button
+                    title="Remove seats"
+                    onClick={() => {
+                      drawRef.current?._toolbars.draw.disable();
+                      setMode(modes.REMOVE);
+                    }}
+                    className="leaflet-control-zoom-in remove-button"
+                  >
+                    <span />
+                  </button>
+                  <ul
+                    className="leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom cancel-button"
+                    style={{
+                      display: mode === modes.REMOVE ? "block" : "none",
+                    }}
+                  >
+                    <li>
+                      <a
+                        href="#"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setMode(modes.SINGLE);
+                        }}
+                      >
+                        Cancel
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              )}
+              <button
+                title="Single select"
+                onClick={() => {
+                  drawRef.current?._toolbars.draw.disable();
+                  setMode(modes.SINGLE);
+                }}
+                className="leaflet-control-zoom-in single-button"
+              >
+                <span />
+              </button>
+            </div>
+          </Control>
+          <FeatureGroup ref={drawLayersRef}>
+            <EditControl
+              position="bottomleft"
+              onCreated={handleDrawBox}
+              onDrawStart={() => {
+                setMode(modes.DRAW);
+              }}
+              onDrawStop={() => {
+                setMode((prev) => (prev === modes.DRAW ? modes.SINGLE : prev));
+              }}
+              draw={{
+                rectangle: true,
+                circle: false,
+                polyline: false,
+                polygon: false,
+                marker: false,
+                circlemarker: false,
+              }}
+              edit={{ edit: false, remove: false }}
+              onMounted={(drawInstance) => {
+                drawRef.current = drawInstance;
+              }}
+            />
+          </FeatureGroup>
+        </>
+      )}
+
+      <Control position="topright">
+        <button
+          title="Close full screen"
+          onClick={() => setIsFullScreen(false)}
+          className={`full-screen-close-button ${isFullScreen ? "show" : ""}`}
+        >
+          <img
+            src={closeIcon}
+            style={{
+              height: "24px",
+            }}
+          ></img>
+        </button>
+      </Control>
+
+      <ImageOverlay
+        url={seats.background}
+        bounds={[
+          [0, 0],
+          [height * 0.03, width * 0.03],
+        ]}
+        zIndex={10}
+      />
+
+      {seats &&
+        seats.seats &&
+        seats.seats.map((s, i) => {
+          const isIcon =
+            (!priceSectionIds || priceSectionIds.includes(s.psId)) &&
+            (s.s === statuses.WHEELCHAIR_ACCESS ||
+              (s.s === statuses.USER_PENDING && s.m));
+          const seatCenter = getSeatCenterLatLng(s, isIcon);
+          const seatPrices = seats.pricing.filter(
+            (price) =>
+              (!priceSectionIds || priceSectionIds.includes(price.psId)) &&
+              price.psId === s.psId
+          );
+          const isSingleFlexi =
+            seatPrices.length === 1 &&
+            !!seatPrices[0].pMax &&
+            !!seatPrices[0].pMin &&
+            seatPrices[0].pMax > seatPrices[0].pMin;
+
+          return (
+            <div key={i}>
+              <ImageOverlay
+                url={`https://iticketseatingplan.blob.core.windows.net/embed/static/media/rippleload.08e6a08dd832819226ef.gif`}
+                bounds={[
+                  [
+                    (s.r.includes("NORTH")
+                      ? getNorthSeatLat(s)
+                      : seatCenter.lat) - 0.11,
+                    seatCenter.lng - 0.11,
+                  ],
+                  [
+                    (s.r.includes("NORTH")
+                      ? getNorthSeatLat(s)
+                      : seatCenter.lat) + 0.11,
+                    seatCenter.lng + 0.11,
+                  ],
+                ]}
+                opacity={
+                  s.loading ||
+                  (ticketPopupOpen && chosenSeat?.seat?.ssId === s.ssId)
+                    ? 100
+                    : 0
+                }
+                zIndex={10}
+              />
+              {!priceSectionIds || priceSectionIds.includes(s.psId) ? (
+                s.s === statuses.WHEELCHAIR_ACCESS ? (
+                  <ImageOverlay
+                    url={wheelchairIcon}
+                    bounds={[
+                      [seatCenter.lat - 0.11, seatCenter.lng - 0.11],
+                      [seatCenter.lat + 0.11, seatCenter.lng + 0.11],
+                    ]}
+                    zIndex={10}
+                  />
+                ) : s.s === statuses.USER_PENDING && s.m ? (
+                  <ImageOverlay
+                    url={userIcon}
+                    bounds={[
+                      [seatCenter.lat - 0.11, seatCenter.lng - 0.15],
+                      [seatCenter.lat + 0.11, seatCenter.lng + 0.15],
+                    ]}
+                    zIndex={10}
+                  />
+                ) : (
+                  <Circle
+                    center={[
+                      s.r.includes("NORTH")
+                        ? getNorthSeatLat(s)
+                        : seatCenter.lat,
+                      seatCenter.lng,
+                    ]}
+                    pathOptions={getInitialColor(
+                      s,
+                      price
+                      // TEST selected state for multiselect
+                      // !!selectedSeats.find(
+                      //   (selectedSeat) => selectedSeat.ssId === s.ssId
+                      // )
+                    )}
+                    radius={12000}
+                    eventHandlers={{
+                      click: (e) => {
+                        if (mode === modes.SINGLE) {
+                          handleClickSeat(e, s);
+                        }
+                      },
+                      popupopen: (popup) => {
+                        setTicketPopupOpen(true);
+                        popupRef.current = popup;
+                      },
+                      popupclose: () => {
+                        setTicketPopupOpen(false);
+                        popupRef.current = null;
+                      },
+                      mousedown: () => {
+                        if (
+                          (mode === modes.DRAG || mode === modes.REMOVE) &&
+                          canMultiSelect
+                        ) {
+                          if (
+                            !selectedSeats.find(
+                              (seat) => seat.ssId === s.ssId
+                            ) &&
+                            s.s ===
+                              (mode === modes.DRAG
+                                ? statuses.UNSOLD
+                                : statuses.USER_PENDING)
+                          ) {
+                            setSelectedSeats((prev) => [...prev, s]);
+                          }
+                        }
+                      },
+                      mouseover: () => {
+                        if (
+                          (mode === modes.DRAG || mode === modes.REMOVE) &&
+                          isDragging &&
+                          canMultiSelect
+                        ) {
+                          if (
+                            !selectedSeats.find(
+                              (seat) => seat.ssId === s.ssId
+                            ) &&
+                            s.s ===
+                              (mode === modes.DRAG
+                                ? statuses.UNSOLD
+                                : statuses.USER_PENDING)
+                          ) {
+                            setSelectedSeats((prev) => [...prev, s]);
+                          }
+                        }
+                      },
+                    }}
+                    // value={s}
+                  >
+                    <Tooltip
+                      className="seatname-tooltip"
+                      direction={"top"}
+                      offset={[0, height * 0.03 + -30]}
+                    >
+                      {s.r + "-" + s.c}
+                    </Tooltip>
+
+                    {s.s === statuses.UNSOLD && (
+                      <Popup className={`ticket-popup popup-${s.sId}`}>
+                        {isSingleFlexi ? (
+                          <div className="single-flexi">
+                            <div className="popup-header">
+                              <div className="flexi-title">
+                                <FlexiIcon
+                                  className="ticket-icon"
+                                  height="56px"
+                                  width="56px"
+                                />
+                                <p className="seatname">{`${
+                                  areaName ? areaName + " | " : ""
+                                }${s.r}-${s.c}`}</p>
+                              </div>
+                              <button
+                                className="close-button"
+                                aria-label="close flexi popup"
+                                onClick={() => map.closePopup()}
+                              >
+                                <CloseIcon />
+                              </button>
+                            </div>
+                            <div className="popup-content">
+                              <p className="heading">FLEXi Price</p>
+                              <Flexi
+                                price={seatPrices[0]}
+                                onClose={() => map.closePopup()}
+                                onConfirm={(amount) =>
+                                  addTicketToCart(s, {
+                                    ...seatPrices[0],
+                                    p: amount,
+                                  })
+                                }
+                                buttonText="Add to cart"
+                                isOpen
+                              />
+                            </div>
+                          </div>
+                        ) : (
+                          <>
+                            <div className="popup-header">
+                              <TicketIcon
+                                className="ticket-icon"
+                                height="56px"
+                                width="56px"
+                              />
+                              <p className="seatname">{`${
+                                areaName ? areaName + " | " : ""
+                              }${s.r}-${s.c}`}</p>
+                              <button
+                                className="close-button"
+                                aria-label="close popup"
+                                onClick={() => map.closePopup()}
+                              >
+                                <CloseIcon />
+                              </button>
+                            </div>
+                            <div className="popup-content">
+                              <p className="heading">Select option:</p>
+                              <div className="priceages">
+                                {seats.pricing
+                                  .filter(
+                                    (price) =>
+                                      (!priceSectionIds ||
+                                        priceSectionIds.includes(price.psId)) &&
+                                      price.psId === s.psId
+                                  )
+                                  .map((price) => (
+                                    <PriceButton
+                                      key={price.paId}
+                                      price={price}
+                                      addToCart={(amount) =>
+                                        addTicketToCart(s, {
+                                          ...price,
+                                          p: amount,
+                                        })
+                                      }
+                                      // When the flexi dropdown opens, pan map to re-fit popup
+                                      panMap={() => {
+                                        const p = document.querySelector(
+                                          `.popup-${s.sId}`
+                                        );
+                                        const h = p?.clientHeight;
+                                        if (h) {
+                                          const offsetTop =
+                                            map.latLngToContainerPoint(
+                                              popupRef.current.popup.getLatLng()
+                                            ).y - h;
+                                          if (offsetTop < 0) {
+                                            map.panBy([0, offsetTop - 20]);
+                                          }
+                                        }
+                                      }}
+                                    />
+                                  ))}
+                              </div>
+                            </div>
+                          </>
+                        )}
+                      </Popup>
+                    )}
+                  </Circle>
+                )
+              ) : (
+                <></>
+              )}
+            </div>
+          );
+        })}
+    </>
+  );
+}