removed stopPropagation + noop from modal

Author: Oleksii Petrov

src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss

@@ -18,6 +18,10 @@ $action-button-padding: 6px;
   text-align: center;
 
   &--fullscreen {
+    top: 35%;
+    left: 35%;
+    position: fixed;
+    z-index: 123;
     width: $announcement-container-width-fullscreen;
   }
 
@@ -64,6 +68,7 @@ $action-button-padding: 6px;
     display: flex;
     justify-content: center;
     align-items: flex-start;
+    position: absolute;
 
     &--centered {
       bottom: 0;

src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx

@@ -34,16 +34,16 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
     }
   }, [banner, showAnnouncementMessage]);
 
-  const noop = (e: React.MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-  };
+  // const noop = (e: React.MouseEvent<HTMLElement>) => {
+  //   e.stopPropagation();
+  // };
 
   const isActiveButton =
     banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
 
   const isButtonShown = isActiveButton && banner.buttonUrl;
   const isAnnouncementCloseable =
-    isAnnouncementForUser && banner?.hasCloseButton;
+    isAnnouncementForUser && !banner?.isForceFunnel;
 
   const containerClasses = classNames("AnnouncementMessage__container", {
     "AnnouncementMessage__container--centered": banner?.isFullScreen,
@@ -55,6 +55,12 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       banner?.isFullScreen && isAnnouncementForUser,
   });
 
+  const handleBannerModalClose = () => {
+    if (banner?.isForceFunnel) return;
+
+    hideAnnouncementMessage();
+  };
+
   if (!isAnnouncementForUser && !banner?.content)
     return (
       <div className="AnnouncementMessage">
@@ -67,8 +73,10 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   if (!isAnnouncementMessageVisible) return null;
 
   return (
-    <div className={containerClasses} onClick={hideAnnouncementMessage}>
-      <div className={announcementMessageClasses} onClick={noop}>
+    <>
+      <div className={containerClasses} onClick={handleBannerModalClose} />
+
+      <div className={announcementMessageClasses}>
         {banner?.title && (
           <h2 className="AnnouncementMessage__title">{banner.title}</h2>
         )}
@@ -95,6 +103,6 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
           </span>
         )}
       </div>
-    </div>
+    </>
   );
 };

src/components/organisms/BannerAdmin/BannerAdmin.tsx

@@ -145,10 +145,10 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
           forwardedRef={register}
           containerClassName="BannerAdmin__checkbox"
           labelClassName={forceFunnelLabelClasses}
-          name="hasCloseButton"
+          name="isForceFunnel"
           label="Force funnel (users will have to click your button)"
           toggler
-          defaultChecked={venue?.banner?.hasCloseButton}
+          defaultChecked={venue?.banner?.isForceFunnel}
           disabled={!isUrlButtonActive}
         />
 

src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx

@@ -20,10 +20,10 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
   banner,
 }) => {
   const fullscreenImg = banner?.isFullScreen ? faCheck : faTimes;
-  const closeImg = banner?.hasCloseButton ? faCheck : faTimes;
+  const closeImg = banner?.isForceFunnel ? faCheck : faTimes;
 
   const fullscreenText = banner?.isFullScreen ? ENABLED__TEXT : DISABLED__TEXT;
-  const forceText = banner?.hasCloseButton ? ENABLED__TEXT : DISABLED__TEXT;
+  const forceText = banner?.isForceFunnel ? ENABLED__TEXT : DISABLED__TEXT;
 
   const urlText = banner?.isActionButton ? banner?.buttonUrl : "blank";
 

src/types/banner.ts

@@ -5,5 +5,5 @@ export interface Banner {
   buttonUrl?: string;
   buttonDisplayText?: string;
   isFullScreen?: boolean;
-  hasCloseButton?: boolean;
+  isForceFunnel?: boolean;
 }