iticket-seatingplan-dev 1.5.6 → 1.5.7

package/dist/components/Map.tsx

@@ -1,756 +0,0 @@
-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>
-          );
-        })}
-    </>
-  );
-}