fixes as per PR + banner modal/confirm modal merged

Author: Oleksii Petrov

functions/venue.js

@@ -829,7 +829,6 @@ exports.adminHideVenue = functions.https.onCall(async (data, context) => {
   admin.firestore().collection("venues").doc(venueId).update(updated);
 });
 
-//This will be change
 exports.adminUpdateBannerMessage = functions.https.onCall(
   async (data, context) => {
     await checkUserIsOwner(data.venueId, context.auth.token.user_id);

src/api/bannerAdmin.ts

@@ -1,21 +1,29 @@
+import Bugsnag from "@bugsnag/js";
 import firebase from "firebase/app";
 import { Banner } from "types/banner";
 
-export interface makeUpdateBannerProps {
+export interface MakeUpdateBannerProps {
   venueId: string;
   banner?: Banner;
 }
 
 export const makeUpdateBanner = async ({
   venueId,
   banner,
-}: makeUpdateBannerProps): Promise<void> => {
+}: MakeUpdateBannerProps): Promise<void> => {
   const params = {
     venueId,
     banner: banner ?? firebase.firestore.FieldValue.delete(),
   };
 
-  await firebase.functions().httpsCallable("venue-adminUpdateBannerMessage")(
-    params
-  );
+  await firebase
+    .functions()
+    .httpsCallable("venue-adminUpdateBannerMessage")(params)
+    .catch((err) =>
+      Bugsnag.notify(err, (event) => {
+        event.addMetadata("Venue::Admin::UpdateBannerMessage::onSubmit", {
+          venueId,
+        });
+      })
+    );
 };

src/components/atoms/ConfirmationModal/ConfirmationModal.scss

@@ -22,3 +22,32 @@
     }
   }
 }
+
+.ConfirmationBannerModal {
+  text-align: center;
+
+  &__header {
+    font-size: $font-size--xl;
+    margin: 0;
+  }
+
+  &__message {
+    padding: $spacing--md 0 $spacing--xl;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+}
+
+// Override global styles button
+button.ConfirmationBannerModal__button {
+  width: $button-width;
+  font-weight: $font-weight--500;
+  background-color: $primary--live;
+
+  &--cancel {
+    background-color: opaque-white(0.2);
+  }
+}

src/components/atoms/ConfirmationModal/ConfirmationModal.tsx

@@ -8,8 +8,17 @@ interface ConfirmationModalProps {
   show?: boolean;
   header?: string;
   message: string;
+  cancelBtnLabel?: string;
+  saveBtnLabel?: string;
   onConfirm: () => void;
   onCancel?: () => void;
+  containerClassName?: string;
+  headerClassName?: string;
+  messageClassName?: string;
+  buttonsContainerClassName?: string;
+  buttonClassName?: string;
+  cancelButtonClassName?: string;
+  isCentered?: boolean;
 }
 
 export const ConfirmationModal: FC<ConfirmationModalProps> = ({
@@ -18,6 +27,15 @@ export const ConfirmationModal: FC<ConfirmationModalProps> = ({
   message,
   onConfirm,
   onCancel,
+  cancelBtnLabel = "No",
+  saveBtnLabel = "Yes",
+  containerClassName = "confirmation-modal",
+  headerClassName = "confirm-header",
+  messageClassName = "confirm-message",
+  buttonsContainerClassName = "confirmation-buttons",
+  buttonClassName = "cancel-button",
+  cancelButtonClassName = "confirm-button",
+  isCentered = false,
 }) => {
   const [isVisible, setIsVisible] = useState(true);
 
@@ -40,17 +58,17 @@ export const ConfirmationModal: FC<ConfirmationModalProps> = ({
   const isShown = show !== undefined ? show : isVisible;
 
   return (
-    <Modal show={isShown} onHide={hide}>
+    <Modal show={isShown} onHide={hide} centered={isCentered}>
       <Modal.Body>
-        <div className="confirmation-modal">
-          {hasHeader && <h2 className="confirm-header">{header}</h2>}
-          <div className="confirm-message">{message}</div>
-          <div className="confirmation-buttons">
-            <Button className="cancel-button" onClick={cancel}>
-              No
+        <div className={containerClassName}>
+          {hasHeader && <h2 className={headerClassName}>{header}</h2>}
+          <div className={messageClassName}>{message}</div>
+          <div className={buttonsContainerClassName}>
+            <Button className={cancelButtonClassName} onClick={cancel}>
+              {cancelBtnLabel}
             </Button>
-            <Button className="confirm-button" onClick={confirm}>
-              Yes
+            <Button className={buttonClassName} onClick={confirm}>
+              {saveBtnLabel}
             </Button>
           </div>
         </div>

src/components/atoms/LinkButton/LinkButton.tsx

@@ -9,7 +9,7 @@ export interface LinkButtonProps
     AnchorHTMLAttributes<HTMLAnchorElement>,
     HTMLAnchorElement
   > {
-  href?: string;
+  href: string;
 }
 
 export const LinkButton: React.FC<LinkButtonProps> = ({

src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss

@@ -52,7 +52,6 @@ $action-button-padding: 6px;
   }
 
   &__container {
-    position: fixed;
     top: 66px;
     left: 0;
     right: 0;
@@ -64,11 +63,16 @@ $action-button-padding: 6px;
 
     &--centered {
       bottom: 0;
+      position: fixed;
       display: flex;
       align-items: center;
       background-color: opaque-black(0.6);
     }
 
+    &--admin {
+      position: initial;
+    }
+
     &--canceled {
       position: relative;
       top: 0;

src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx

@@ -3,30 +3,25 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import classNames from "classnames";
 
-
-import { RenderMarkdown } from "components/organisms/RenderMarkdown";
+import { Banner } from "types/banner";
 import { isDefined } from "utils/types";
-
+import { RenderMarkdown } from "components/organisms/RenderMarkdown";
 import { useShowHide } from "hooks/useShowHide";
-
-import { Banner } from "types/banner";
-
 import { LinkButton } from "components/atoms/LinkButton";
 
 import "./AnnouncementMessage.scss";
 
 export interface AnnouncementMessageProps {
-  banner?: Banner;
+  banner: Banner;
   announcementForUser?: boolean;
 }
 
 export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   banner,
-  announcementForUser = false,
+  announcementForUser: isAnnouncementForUser = false,
 }) => {
-
   const {
-    isShown: isShownAnnouncementMessage,
+    isShown: isAnnouncementMessageVisible,
     show: showAnnouncementMessage,
     hide: hideAnnouncementMessage,
   } = useShowHide();
@@ -44,12 +39,16 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   const isActiveButton =
     banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
 
+  const isButtonShown = isActiveButton && banner.buttonUrl;
+  const isAnnouncementCloseable =
+    isAnnouncementForUser && banner?.hasCloseButton;
+
   const containerClasses = classNames("AnnouncementMessage__container", {
     "AnnouncementMessage__container--centered": banner?.isFullScreen,
-    "AnnouncementContainer--canceled": !announcementForUser,
+    "AnnouncementMessage__container--admin": !isAnnouncementForUser,
   });
 
-  if (!announcementForUser && !banner?.content)
+  if (!isAnnouncementForUser && !banner?.content)
     return (
       <div className="AnnouncementMessage">
         <span className="AnnouncementMessage__default-text">
@@ -58,34 +57,36 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       </div>
     );
 
-  if (!isShownAnnouncementMessage) return null;
+  if (!isAnnouncementMessageVisible) return null;
 
   return (
     <div className={containerClasses} onClick={hideAnnouncementMessage}>
       <div className="AnnouncementMessage" onClick={noop}>
         {banner?.title && (
           <h2 className="AnnouncementMessage__title">{banner.title}</h2>
         )}
+
         <div className="AnnouncementMessage__content">
-          <RenderMarkdown text={banner.content} />
-          {/* {getLinkFromText(banner.content)} */}
+          <RenderMarkdown text={banner?.content} />
         </div>
-        {isActiveButton && banner.buttonUrl && (
+
+        {isButtonShown && (
           <LinkButton
-            href={banner.buttonUrl}
+            href={banner.buttonUrl || ""}
             className="AnnouncementMessage__action-button"
           >
-            {banner.buttonDisplayText}
+            {banner?.buttonDisplayText}
           </LinkButton>
         )}
-        {announcementForUser && banner.hasCloseButton ? (
+
+        {isAnnouncementCloseable && (
           <span
             className="AnnouncementMessage__close-button"
             onClick={hideAnnouncementMessage}
           >
             <FontAwesomeIcon icon={faTimesCircle} />
           </span>
-        ) : null}
+        )}
       </div>
     </div>
   );

src/components/organisms/BannerAdmin/BannerAdmin.scss

@@ -38,9 +38,13 @@
     }
   }
 
-  &__checkbox-label {
+  &__checkbox__label {
     font-size: $font-size--lg;
   }
+  &__checkbox__label__disabled {
+    color: --white;
+    opacity: 20%;
+  }
 }
 
 // Override global styles button