AAA I can set an announcement with funnels and CTA button

functions/venue.js

@@ -372,11 +372,6 @@ const createBaseUpdateVenueData = (data, doc) => {
     updated.mapBackgroundImageUrl = data.mapBackgroundImageUrl;
   }
 
-  // @debt do we need to be able to set this here anymore? I think we have a dedicated function for it?
-  if (data.bannerMessage) {
-    updated.bannerMessage = data.bannerMessage;
-  }
-
   if (data.parentId) {
     updated.parentId = data.parentId;
   }
@@ -904,7 +899,7 @@ exports.adminUpdateBannerMessage = functions.https.onCall(
       .firestore()
       .collection("venues")
       .doc(data.venueId)
-      .update({ bannerMessage: data.bannerMessage || null });
+      .update({ banner: data.banner || null });
   }
 );
 

src/api/admin.ts

@@ -92,7 +92,6 @@ export type VenueInput = AdvancedVenueInput &
     columns?: number;
     width?: number;
     height?: number;
-    bannerMessage?: string;
     parentId?: string;
     owners?: string[];
     chatTitle?: string;

src/api/bannerAdmin.ts

@@ -1,13 +1,22 @@
 import Bugsnag from "@bugsnag/js";
 import firebase from "firebase/app";
 
-export const makeUpdateBanner = (
-  venueId: string,
-  onError?: (errorMsg: string) => void
-) => async (message?: string): Promise<void> => {
+import { Banner } from "types/banner";
+
+export interface UpdateBannerProps {
+  venueId: string;
+  banner?: Banner;
+  onError?: (errorMsg: string) => void;
+}
+
+export const updateBanner = async ({
+  venueId,
+  banner,
+  onError = () => {},
+}: UpdateBannerProps): Promise<void> => {
   const params = {
     venueId,
-    bannerMessage: message ?? "",
+    banner: banner ?? firebase.firestore.FieldValue.delete(),
   };
 
   await firebase
@@ -16,9 +25,9 @@ export const makeUpdateBanner = (
     .catch((e) => {
       Bugsnag.notify(e, (event) => {
         event.addMetadata("context", {
-          location: "api/bannerAdmin::makeUpdateBanner",
+          location: "api/bannerAdmin::updateBanner",
           venueId,
-          message,
+          banner,
         });
       });
       onError?.(e.toString());

src/components/atoms/ConfirmationModal/ConfirmationModal.scss

@@ -1,15 +1,15 @@
 @import "scss/constants.scss";
 
 .ConfirmationModal {
-  .modal-content {
-    background: $modal-background--confirm;
-  }
+  text-align: center;
 
   &__message {
     padding: 10px 0 30px 0;
   }
 
   &__buttons {
     display: flex;
+    width: 70%;
+    margin: 0 auto;
   }
 }

src/components/atoms/ConfirmationModal/ConfirmationModal.tsx

@@ -11,22 +11,23 @@ interface ConfirmationModalProps {
   show?: boolean;
   header?: string;
   message: string;
-  no?: string;
-  yes?: string;
+  cancelBtnLabel?: string;
+  saveBtnLabel?: string;
   centered?: boolean;
   onConfirm: () => void;
   onCancel?: () => void;
+  isCentered?: boolean;
 }
 
 export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   show,
   header,
   message,
-  no = "No",
-  yes = "Yes",
-  centered = true,
   onConfirm,
   onCancel,
+  cancelBtnLabel = "No",
+  saveBtnLabel = "Yes",
+  isCentered = false,
 }) => {
   const [isVisible, setIsVisible] = useState(true);
 
@@ -49,20 +50,15 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   const isShown = show !== undefined ? show : isVisible;
 
   return (
-    <Modal
-      className="ConfirmationModal"
-      show={isShown}
-      onHide={hide}
-      centered={centered}
-    >
+    <Modal show={isShown} onHide={hide} centered={isCentered}>
       <Modal.Body>
-        <div>
-          {hasHeader && <Modal.Title>{header}</Modal.Title>}
+        <div className="ConfirmationModal">
+          {hasHeader && <h4>{header}</h4>}
           <div className="ConfirmationModal__message">{message}</div>
           <div className="ConfirmationModal__buttons">
-            <ButtonNG onClick={cancel}>{no}</ButtonNG>
-            <ButtonNG variant="primary" onClick={confirm}>
-              {yes}
+            <ButtonNG onClick={cancel}>{cancelBtnLabel}</ButtonNG>
+            <ButtonNG variant="danger" onClick={confirm}>
+              {saveBtnLabel}
             </ButtonNG>
           </div>
         </div>

src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss

@@ -3,42 +3,123 @@
 $spacing: 15px;
 $close-icon-width: 20px;
 $message-margin: $spacing + $close-icon-width + 5px;
+$action-button-height: 30px;
+$action-button-padding: 6px;
+$announce-box-shadow: 0px 2px 20px 5px;
 
-.announcement-container {
+.AnnouncementMessage {
   display: block;
-  z-index: z(announcement);
-  position: absolute;
-  background: $primary;
-  top: 66px;
-  left: 50%;
-  width: 500px;
-  margin: 0 auto 0 -250px;
+  position: relative;
+  background: $announcement-background;
+  width: $announcement-container-width;
+  height: auto;
+  min-height: 70px;
   transition: left 0.1s linear;
+  padding: $spacing 0;
+  backdrop-filter: blur(50px);
+  text-align: center;
+  position: absolute;
+  border-radius: 0px 0px $border-radius--xl $border-radius--xl;
+  border: 1px solid opaque-white(0.4);
+  border-top: none;
+  box-sizing: border-box;
+  box-shadow: $announce-box-shadow opaque-white(0.35);
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: z(announcement-banner);
 
-  &.centered {
-    left: 50%;
+  &--withButton {
+    min-height: $announcement-container-height;
   }
 
-  padding: $spacing 0;
-  border-radius: 0 0 20px 20px;
-  text-align: center;
+  &__fullscreen {
+    position: fixed;
+    border: 1px solid opaque-white(0.4);
+    z-index: z(announcement-banner);
+    border-radius: $border-radius--xl;
+    top: 40%;
+    border-radius: 16px;
+
+    &--admin {
+      top: 35%;
+      position: absolute;
+    }
+  }
+
+  &__default-text {
+    opacity: 0.6;
+  }
+
+  &__content {
+    font-size: $font-size--md;
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+
+    p {
+      margin-bottom: 0px;
+    }
+  }
+
+  &__action-button {
+    display: inline-block;
+    background-color: $primary--live;
+    min-width: $announce-button-width;
+    min-height: $action-button-height;
+    font-size: $font-size--md;
+    font-weight: $font-weight--500;
+    padding: $action-button-padding $spacing--lg;
 
-  .close-button {
-    background: transparent;
-    border: none;
-    color: $white;
+    &-admin {
+      background-color: $primary--darker;
+    }
+  }
+
+  &__close-button {
     cursor: pointer;
     position: absolute;
     top: $spacing;
     right: $spacing;
+    background: url("/assets/icons/close-icon.svg");
+    height: 20px;
+    width: 20px;
     &:focus,
     &:hover {
       color: var(--primary-color);
       text-decoration: underline;
     }
   }
-}
 
-.announcement-message {
-  margin: 0 $message-margin;
+  &__container {
+    top: $navbar-height;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: z(announcement-banner);
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    position: absolute;
+
+    &--centered {
+      bottom: 0;
+      position: fixed;
+      display: flex;
+      align-items: center;
+      background-color: opaque-black(0.6);
+    }
+
+    &--admin {
+      position: relative;
+      position: absolute;
+      height: 210px;
+      top: 130px;
+    }
+
+    &--canceled {
+      position: relative;
+      top: 0;
+    }
+  }
 }