iticket-seatingplan-dev 1.5.2 → 1.5.4

package/dist/components/PriceButton.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from "react";
+import { NZDollar } from "../utils";
+import { Price } from "../utils/types";
+import Flexi from "./Flexi";
+
+export default function PriceButton({
+  price,
+  addToCart,
+  panMap,
+}: {
+  price: Price;
+  addToCart: (amount: number) => void;
+  panMap: () => void;
+}) {
+  const [flexiOpen, setFlexiOpen] = useState(false);
+  const flexiRef = useRef<HTMLDivElement | null>(null);
+  const focusRef = useRef<Element | null>(null);
+
+  const isFlexi = !!price.pMax && !!price.pMin && price.pMax > price.pMin;
+
+  useEffect(() => {
+    if (flexiOpen) {
+      focusRef.current = flexiRef.current?.querySelectorAll(
+        `button, [href], input, select, textarea, 
+          [tabindex]:not([tabindex="-1"]),video`
+      )[0];
+
+      (focusRef.current as HTMLElement)?.focus();
+    }
+  }, [flexiOpen]);
+
+  return (
+    <div className="priceage-container">
+      <button
+        className={isFlexi ? "priceage flexi" : "priceage"}
+        onClick={() => {
+          if (isFlexi) {
+            setFlexiOpen((prev) => !prev);
+          } else {
+            addToCart(price.p);
+          }
+        }}
+        disabled={price.is_available === false}
+      >
+        <span className="price">
+          <span className="price-name">
+            <span>{price.paName}</span>
+            {isFlexi && <span className="flexi-badge">FLEXi</span>}
+          </span>
+          <span className="amount">
+            {isFlexi
+              ? `${NZDollar.format(price.pMin)} - ${NZDollar.format(
+                  price.pMax
+                )}`
+              : NZDollar.format(price.p)}
+          </span>
+        </span>
+        {price.is_available === false && (
+          <span className="unavailable">Allocation exhausted</span>
+        )}
+      </button>
+      {isFlexi && (
+        <Flexi
+          price={price}
+          onClose={() => setFlexiOpen(false)}
+          onConfirm={addToCart}
+          buttonText="Add to cart"
+          isOpen={flexiOpen}
+          panMap={panMap}
+        />
+      )}
+    </div>
+  );
+}

package/dist/components/PricingPopup.tsx

@@ -0,0 +1,178 @@
+import { useState } from "react";
+import { NZDollar } from "../utils";
+import { Price, Seat } from "../utils/types";
+import { closeIcon, flexiIcon } from "./assets/encodedSvgs";
+import Flexi from "./Flexi";
+
+interface SeatGroup {
+  seats: Seat[];
+  priceage?: Price;
+}
+
+const PriceSelect = ({
+  seatGroup,
+  seatPriceages,
+  updateSeatGroupPriceage,
+}: {
+  seatGroup: SeatGroup;
+  seatPriceages: Price[];
+  updateSeatGroupPriceage: (price: Price) => void;
+}) => {
+  const [flexiOpen, setFlexiOpen] = useState(false);
+
+  const isSelectedPriceFlexi =
+    !!seatGroup.priceage.pMax &&
+    !!seatGroup.priceage.pMin &&
+    seatGroup.priceage.pMax > seatGroup.priceage.pMin;
+
+  return (
+    <div className="price-select">
+      <select
+        onChange={(e) => {
+          const newPriceage = seatPriceages.find(
+            (p) => p.paId.toString() === e.target.value
+          );
+          updateSeatGroupPriceage(newPriceage);
+        }}
+        value={seatGroup.priceage.paId}
+      >
+        {seatPriceages.map((price) => (
+          <option
+            key={price.paId}
+            disabled={price.is_available === false}
+            value={price.paId}
+          >
+            {`${price.paName} ${NZDollar.format(
+              price.paId === seatGroup.priceage.paId
+                ? seatGroup.priceage.p
+                : price.p
+            )}${price.is_available === false ? " - Allocation exhausted" : ""}`}
+          </option>
+        ))}
+      </select>
+      {isSelectedPriceFlexi && (
+        <>
+          <button className="flexi-button" onClick={() => setFlexiOpen(true)}>
+            <img src={flexiIcon} height="18px" width="18px" />
+            <span>Edit FLEXi price</span>
+          </button>
+          {flexiOpen && (
+            <div className="flexi-popup" role="dialog" aria-modal="true">
+              <Flexi
+                price={seatGroup.priceage}
+                onClose={() => setFlexiOpen(false)}
+                onConfirm={(value) => {
+                  const newPriceage = { ...seatGroup.priceage, p: value };
+                  updateSeatGroupPriceage(newPriceage);
+                }}
+                buttonText="Confirm"
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+interface Props {
+  cancelPriceSelect: () => void;
+  groupedSelectedSeats: {
+    [key: number]: SeatGroup;
+  };
+  pricing: Price[];
+  priceSectionIds?: number[];
+  batchAddTicketsToCart: (seats: { seat: Seat; priceage: Price }[]) => void;
+}
+
+export default function PricingPopup({
+  cancelPriceSelect,
+  groupedSelectedSeats,
+  pricing,
+  priceSectionIds,
+  batchAddTicketsToCart,
+}: Props) {
+  const [seatsToBook, setSeatsToBook] = useState(groupedSelectedSeats);
+
+  return (
+    <>
+      <div className="pricing-popup-backdrop" onClick={cancelPriceSelect} />
+      <div className="pricing-popup" role="dialog" aria-modal="true">
+        <div className="popup-header">
+          <h3>Choose prices</h3>
+          <button
+            className="close-button"
+            aria-label="close popup"
+            onClick={cancelPriceSelect}
+          >
+            <img src={closeIcon} alt="close" height="20px" width="20px" />
+          </button>
+        </div>
+        <div className="seat-list">
+          {Object.entries(seatsToBook).map(([id, seatGroup]) => {
+            const seatPriceages = pricing.filter(
+              (price) =>
+                (!priceSectionIds || priceSectionIds.includes(price.psId)) &&
+                price.psId === parseInt(id)
+            );
+
+            return (
+              <div key={id} className="seat-group">
+                <div className="seat-group-header">
+                  <h4>{seatGroup.seats[0].psName}</h4>
+                  <p>{`${seatGroup.seats.length} seat${
+                    seatGroup.seats.length !== 1 ? "s" : ""
+                  }`}</p>
+                </div>
+                <p className="seat-names">
+                  {seatGroup.seats
+                    .map((s) => `${s.r}-${s.c}`)
+                    .sort()
+                    .join(", ")}
+                </p>
+                {seatPriceages.filter((price) => price.is_available !== false)
+                  .length > 0 ? (
+                  <PriceSelect
+                    seatGroup={seatGroup}
+                    seatPriceages={seatPriceages}
+                    updateSeatGroupPriceage={(newPriceage) => {
+                      const newSeats = { ...seatsToBook };
+                      newSeats[id].priceage = newPriceage;
+                      setSeatsToBook(newSeats);
+                    }}
+                  />
+                ) : (
+                  <p className="no-prices-available">
+                    Oops, looks like there are no prices available for this
+                    section.
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className="buttons">
+          <button className="cancel" onClick={cancelPriceSelect}>
+            Cancel
+          </button>
+          <button
+            className="add-cart"
+            onClick={() => {
+              batchAddTicketsToCart(
+                Object.values(seatsToBook)
+                  .filter((v) => !!v.priceage)
+                  .flatMap((s) =>
+                    s.seats.map((seat) => ({ seat, priceage: s.priceage }))
+                  )
+              );
+              cancelPriceSelect();
+            }}
+            disabled={Object.values(seatsToBook).every((v) => !v.priceage)}
+          >
+            Add to cart
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}