[SHEL-1310] Update No Seating Chart Copy and Graphic (#256)

* Got rid of alien mentions * Changeset * Added missing svg react component * Changeset * Fixed tests * Swapped out SVG component * Update packages/seatmaps-client/src/TicketMap/index.tsx Co-authored-by: tevo-nikita-ivashkov <134063908+tevo-nikita-ivashkov@users.noreply.github.com> * Moved icons to respective folder --------- Co-authored-by: tevo-nikita-ivashkov <134063908+tevo-nikita-ivashkov@users.noreply.github.com>
ticketevolution · Jan 16, 2024 · c255500 · c255500
1 parent 5197ab4
commit c255500
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 12 deletions.
diff --git a/.changeset/mean-ants-wash.md b/.changeset/mean-ants-wash.md
@@ -0,0 +1,5 @@
+---
+"@ticketevolution/seatmaps-client": minor
+---
+
+Removed UFO image and alien mentions.
diff --git a/.changeset/nasty-bikes-press.md b/.changeset/nasty-bikes-press.md
@@ -0,0 +1,5 @@
+---
+"@ticketevolution/seatmaps-client": minor
+---
+
+Added SVG react component for missing seatmap.
diff --git a/packages/seatmaps-client/src/TicketMap/index.tsx b/packages/seatmaps-client/src/TicketMap/index.tsx
@@ -5,6 +5,8 @@ import fetchPonyfill from "fetch-ponyfill";
 import Actions from "../Actions";
 import Tooltip from "../Tooltip";
 import ZoomHelper from "../ZoomHelper";
+import MissingSeatMapLogo from "../icons/MissingSeatMapLogo";
+
 import { ZoomControl, initializeZoom } from "../utils/zoom";
 
 import { TicketGroup, NormalizedTicketGroup } from "../types/TicketGroups";
@@ -561,26 +563,31 @@ export class TicketMap extends Component<Props & DefaultProps, State> {
       return (
         <div
           style={{
-            left: 0,
-            position: "relative",
-            textAlign: "left",
+            height: "100vh",
+            width: "100vw",
+            display: "flex",
+            flexWrap: "wrap",
+            fontFamily: "Nunito Sans",
           }}
         >
           <div
             style={{
-              fontFamily: "Nunito Sans",
-              padding: "50px 30px",
-              position: "absolute",
-              textAlign: "left",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              flexDirection: "column",
+              textAlign: "center",
+              flex: "1 0 30%",
             }}
           >
+            {this.props.missingSeatMapLogo || <MissingSeatMapLogo />}
             <div
               style={{
-                fontWeight: 600,
-                fontSize: "1.375em",
+                fontWeight: 400,
+                fontSize: "1.2em",
               }}
             >
-              Seating chart not available.
+              Seating Chart Coming Soon
             </div>
           </div>
         </div>

diff --git a/packages/seatmaps-client/src/__tests__/TicketMap/index.test.tsx b/packages/seatmaps-client/src/__tests__/TicketMap/index.test.tsx
@@ -90,7 +90,7 @@ describe("TicketMap", () => {
       render(<TicketMap {...dataProps} />);
     });
     expect(
-      await screen.findByText("Seating chart not available."),
+      await screen.findByText("Seating Chart Coming Soon"),
     ).toBeInTheDocument();
     expect(consoleError).toHaveBeenCalledTimes(1);
     consoleError.mockRestore();
@@ -108,7 +108,7 @@ describe("TicketMap", () => {
     await waitFor(() => {
       render(<TicketMap {...dataProps} />);
     });
-    expect(screen.queryByText("Seating chart not available.")).toBeNull();
+    expect(screen.queryByText("Seating Chart Coming Soon")).toBeNull();
     expect(consoleError).toHaveBeenCalledTimes(1);
     consoleError.mockRestore();
   });

diff --git a/packages/seatmaps-client/src/icons/MissingSeatMapLogo.tsx b/packages/seatmaps-client/src/icons/MissingSeatMapLogo.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function MissingSeatMapLogo() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      data-name="Layer 2"
+      viewBox="0 0 551.25 356.37"
+      width="145"
+      height="145"
+    >
+      <path
+        d="M551.25 199.17c-2.23 4.39-4.41 9.15-9.58 10.46-4.67 1.18-9.61 1.29-15.05 1.95 0 9.76-.04 19.67.08 29.59.01.81 1.08 1.75 1.86 2.38 2.87 2.33 4.24 5.22 3.05 8.8-1.2 3.61-3.73 5.82-7.77 5.82-12.04 0-24.07.03-36.11-.02-3.75-.02-6.89-1.98-7.34-5.5-.35-2.73 1.25-5.75 2.18-8.57.54-1.65 2.08-3.15 2.12-4.75.22-8.07-.05-16.16.17-24.23.09-3.5-1.35-4.23-4.49-4.2-11.4.14-22.81.15-34.21 0-3.33-.05-4.4 1.08-4.36 4.38.15 12.2.15 24.4 0 36.59-.04 3.33 1.11 4.22 4.36 4.4 10.32.59 15.74 6.55 15.82 16.88.05 6.34.05 12.67 0 19.01-.09 10.67-5.99 16.66-16.74 17.07q-7.93.3-7.93 8.22c0 5.07-.03 10.14.01 15.21.03 3.98-.77 7.96 3.59 10.95 1.48 1.01 2.09 5.37 1.17 7.25-1.12 2.28-4.14 4.75-6.58 5.04-6.41.75-12.95.38-19.45.41-5.54.03-11.09 0-16.63-.02-3.83 0-6.89-1.48-8.29-5.17-1.37-3.65-.26-6.72 2.66-9.38 1.01-.92 1.79-2.62 1.82-3.98.17-8.23.21-16.48-.05-24.71-.04-1.29-1.81-3.61-2.79-3.62-19.46-.22-38.92-.16-59.16-.16v6.8c0 6.81-.17 13.63.11 20.43.08 1.87 1.61 3.65 2.29 5.54 1.01 2.79 2.8 5.73 2.55 8.45-.33 3.55-3.48 5.64-7.2 5.67-12.35.09-24.71.28-37.04-.21-2.36-.09-5.85-2.71-6.56-4.9-.79-2.42.89-5.73 1.73-8.57.58-1.95 2.21-3.77 2.26-5.67.25-8.98.11-17.98.11-26.85-10.43-2.03-20.39-1.77-30.33-.54-.92.11-2.3 2-2.32 3.09-.19 8.55-.2 17.11-.01 25.66.03 1.31 1.11 2.83 2.12 3.82 2.64 2.59 3.78 5.49 2.46 9.01-1.3 3.49-3.98 5.24-7.7 5.25-11.88.03-23.76.06-35.63 0-3.84-.02-6.73-1.85-7.98-5.59-1.2-3.58.19-6.36 2.91-8.86 1.09-1 1.94-2.83 1.97-4.3.19-8.07-.04-16.16.15-24.23.08-3.18-1.08-4.07-4.12-4.05-18.06.1-36.11.1-54.17 0-3.02-.02-4.25.86-4.14 4.05.2 6.33.03 12.67.07 19.01.03 4.13-.38 7.86 3.63 11.37 4.69 4.1 1.08 11.87-5.48 12.45-5.19.45-10.44.22-15.67.23-6.97.01-13.94 0-20.91-.07-3.68-.03-6.47-1.7-7.8-5.16-1.33-3.47-.21-6.41 2.37-9.06 1.08-1.1 2.07-2.84 2.1-4.31.2-8.23 0-16.47.15-24.71.05-2.91-.99-3.97-3.87-3.81-2.36.13-4.76.01-7.1-.33-7.82-1.16-13.1-7-13.3-14.89-.18-7.12-.14-14.26-.06-21.38.11-9.71 5.69-15.83 15.43-16.27 3.88-.18 4.77-1.49 4.71-5.06-.18-11.72-.19-23.45 0-35.16.06-3.78-.84-5.33-4.97-5.23-11.24.27-22.49.2-33.73.03-3.52-.06-4.76 1.09-4.64 4.62.22 6.33.05 12.67.06 19.01 0 4.02-.28 7.6 3.61 10.96 4.47 3.86 1.05 12.23-5.01 12.44-12.81.46-25.66.4-38.46-.1-2.25-.09-5.51-3.04-6.25-5.33-.74-2.28.3-6.15 2.01-7.96 2-2.12 2.55-3.99 2.53-6.59-.07-8.7-.03-17.4-.03-26.64-2.78-.13-5.24-.27-7.7-.34-10.7-.36-16.63-6.31-16.72-17.01-.05-6.49-.07-12.99 0-19.48.11-9.69 5.75-15.97 15.38-16.38 4.09-.17 4.95-1.61 4.89-5.36-.2-12.83-.15-25.66-.03-38.49.06-6.33 3.4-9.67 8.8-9.28 4.66.34 7.24 3.69 7.28 9.9.08 12.2.02 24.4.03 36.59q0 6.45 6.37 6.46c20.43 0 40.86-.11 61.29.09 4.15.04 5.57-1.06 5.35-5.31-.52-10.36.23-20.59 5.37-29.99 8.18-14.95 20.93-22.81 37.78-24.27 1.42-.12 2.84-.22 4.26-.34.14-.01.28-.13.94-.44.12-1.04.4-2.38.4-3.72.03-15.68.16-31.37-.02-47.05-.2-17.59-11.42-29.92-28.62-30.32-22-.51-44.03-.42-66.03.15-14.28.37-25.71 11.81-26.71 26.1-.67 9.62-.25 19.31-.41 28.97-.03 2.03.24 4.65-.86 5.96-1.85 2.21-4.5 4.56-7.16 5.07-3.39.66-7.26-1.57-7.38-5.22-.58-17.45-3.94-35.41 4.15-51.92C32.78 10.06 45.93 1.01 63.62.56c22-.56 44.05-.89 66.02-.07 26.79 1 44.35 20 44.66 46.88.17 15.05.03 30.1.04 45.15v5.76c7.58 0 14.65.17 21.69-.21.9-.05 2.36-2.88 2.38-4.44.18-14.89.04-29.78.14-44.67.05-8.3 1.14-16.5 5.14-23.9C212.22 9.26 225.61.64 243.57.39c22.64-.32 45.3-.43 67.92.35 20.65.71 39.1 18.73 40.31 39.3 1.03 17.52.75 35.13.77 52.7 0 4.18.9 5.98 5.5 5.67 5.98-.42 12.01-.1 18.59-.1.1-2.11.26-3.94.26-5.77.02-15.05-.11-30.1.05-45.15.23-22.86 12.92-39.73 34.32-45.65 3.47-.96 7.19-1.39 10.79-1.4 22.49-.03 44.99-.38 67.45.38 20.74.7 38.92 18.24 40.78 38.97 1.03 11.48.66 23.1.6 34.65-.03 5.22-3.26 8.16-7.95 8.17-4.66.02-7.81-2.89-7.97-8.18-.26-8.7-.07-17.42-.13-26.13-.13-19.71-11.99-31.73-31.67-31.79-20.9-.07-41.82-.26-62.71.3-13.96.37-25.85 10.66-26.65 24.4-1.09 18.76-.27 37.63-.27 56.79 1.15.15 2.35.39 3.57.47 26.63 1.82 44.28 20.42 44.72 47.15.05 3.01.1 6.02 0 9.03-.09 2.4.83 3.43 3.3 3.42 22.17-.04 44.35-.06 66.52.02 3.5.01 3.21-2.16 3.21-4.43 0-12.99-.06-25.98.03-38.97.04-6.1 2.78-9.43 7.53-9.65 5.26-.24 8.48 2.96 8.55 9.06.14 11.88.05 23.76.05 35.64v8.18c9.64-.56 16.65 2.96 20.21 11.9v29.47Zm-364.89 56.98c18.68 0 37.36-.07 56.03.06 3.54.03 5.02-.72 5-4.7-.15-35.3.02-70.61-.13-105.91-.08-18.95-12.42-31.05-31.37-31.12-19.63-.08-39.25-.08-58.88 0-18.94.07-31.39 12.19-31.48 31.04-.16 35.3 0 70.61-.13 105.91-.01 3.85 1.26 4.82 4.92 4.79 18.68-.15 37.35-.07 56.03-.07Zm178.5 0c18.52 0 37.04-.12 55.55.09 4.13.05 5.41-1.04 5.39-5.29-.16-34.82-.04-69.65-.11-104.48-.04-19.79-12.24-31.94-31.96-31.99-19.31-.05-38.62-.05-57.93 0-19.56.05-31.79 12.08-31.85 31.6-.1 34.98.05 69.97-.13 104.95-.02 4.37 1.48 5.24 5.48 5.2 18.52-.19 37.04-.08 55.55-.08ZM275.63 16.63v-.26c-9.66 0-19.32-.05-28.98.01-19.83.12-31.91 12.18-32 32-.07 14.57.2 29.14-.14 43.7-.12 4.98 1.42 6.29 6.28 6.53 18.87.94 35.04 13.36 40.12 31.61 2.08 7.47 2.02 15.6 2.46 23.45.19 3.3 1.1 4.45 4.4 4.32 5.53-.22 11.08-.13 16.62-.04 2.39.04 3.49-.79 3.4-3.3-.12-3.16-.09-6.34 0-9.5.39-14.26 4.96-26.62 16.26-35.97 8.21-6.79 17.58-10.46 28.24-10.83 2.01-.07 4.3.32 4.27-2.93-.17-18.05.37-36.13-.65-54.13-.75-13.27-12.75-23.98-26.09-24.58-11.37-.51-22.79-.1-34.18-.1Zm170.03 255.56h-63.1c-31.35 0-62.7.05-94.04-.06-3.64-.01-5.23.96-4.92 4.8.28 3.46.35 6.99-.01 10.44-.49 4.63 1.24 5.82 5.8 5.8 50.35-.16 100.69-.1 151.04-.1h5.23v-20.88Zm-340.04 20.63c1.51.1 2.59.24 3.67.24 51.28.01 102.56-.03 153.84.09 3.72 0 4.65-1.35 4.42-4.72-.23-3.47-.33-6.99.02-10.44.45-4.51-1.06-5.91-5.73-5.89-50.33.17-100.66.1-150.99.11-1.68 0-3.36.17-5.23.26v20.35Zm-89.23-98.05c30.22 0 59.97-.02 89.72.03 2.53 0 3.31-1.1 3.25-3.45-.1-3.8-.28-7.62.05-11.39.4-4.45-.96-6-5.7-5.96-27.38.22-54.76.1-82.14.12-1.67 0-3.34.16-5.18.26v20.4Zm518.45-.21v-19.78c-.52-.26-.79-.5-1.06-.5-29.61-.06-59.23-.14-88.84-.02-1.02 0-2.81 1.91-2.91 3.05-.36 4.09.14 8.25-.24 12.34-.4 4.36 1.38 5.25 5.41 5.22 27.72-.16 55.43-.08 83.15-.09 1.4 0 2.79-.13 4.48-.21Zm-247.07 38.82c0-6.32-.04-12.64.02-18.96.02-2.28-.63-3.54-3.21-3.49-6 .1-12.01-.12-18 .17-1.07.05-2.93 1.91-2.95 2.96-.2 12.95-.1 25.91-.16 38.87-.01 2.51 1.16 2.99 3.44 3.31 5.57.78 10.97 1.15 16.64.16 3.61-.63 4.38-1.76 4.28-5-.19-6-.05-12.01-.06-18.01Zm-12.13-38.6c2.84 0 5.68-.11 8.51.03 2.57.12 3.75-.74 3.66-3.48-.15-4.57-.14-9.15 0-13.72.08-2.71-1.07-3.61-3.66-3.53-3.94.12-7.88-.02-11.82.04-10.14.13-8.76-1.39-8.82 8.71-.08 11.96-.02 11.96 12.14 11.96Zm234.53 47.01v-30.81c-2.41 0-4.61-.22-6.73.1-.89.13-2.3 1.39-2.31 2.16-.16 9.43-.1 18.87-.1 28.55h9.15ZM40.98 211.23v30.5h8.57v-30.5h-8.57Zm267.39 98.26v30.34h8.68v-30.34h-8.68Zm-65.41 30.41v-24.26q0-6.73-6.92-6.35c-.6.03-1.2.2-2.06.35v30.26h8.97Zm177.82-.13v-30.23h-8.89v24.29q0 6.62 6.44 6.3c.76-.04 1.5-.22 2.45-.36Zm-290.32-30.25c-.28.67-.6 1.1-.61 1.53-.07 7.58-.12 15.16-.14 22.74-.02 6.6 0 6.61 6.44 6.34.76-.03 1.51-.17 2.49-.29v-30.33h-8.18Z"
+        data-name="Layer 1"
+      />
+    </svg>
+  );
+}
diff --git a/packages/seatmaps-client/src/types/TicketMap.ts b/packages/seatmaps-client/src/types/TicketMap.ts
@@ -38,6 +38,7 @@ export interface DefaultProps {
   onSelection(sections: string[]): void;
   showControls: boolean;
   mouseControlEnabled: boolean;
+  missingSeatMapLogo?: React.ReactNode;
 }
 
 export interface RequiredProps {