fix: remove announcement on cta click

apps/web/src/common/dialog-controller.tsx

@@ -593,6 +593,7 @@ export function showAnnouncementDialog(
   return showDialog("AnnouncementDialog", (Dialog, perform) => (
     <Dialog
       announcement={announcement}
+      removeAnnouncement={() => remove(announcement.id)}
       onClose={(res: boolean) => {
         remove(announcement.id);
         perform(res);

apps/web/src/components/announcements/body.js

@@ -27,7 +27,11 @@ const features = [
   { icon: Icon.Edit, title: "Rich text editor" },
 ];
 
-export default function AnnouncementBody({ id, components, type }) {
+export default function AnnouncementBody({
+  removeAnnouncement,
+  components,
+  type,
+}) {
   return components
     .filter((item) =>
       item.platforms.some((platform) => allowedPlatforms.indexOf(platform) > -1)
@@ -87,13 +91,18 @@ export default function AnnouncementBody({ id, components, type }) {
           case "description":
             return <Description item={item} fontSize="subtitle" />;
           case "callToActions":
-            return <CalltoActions item={item} />;
+            return (
+              <CalltoActions
+                item={item}
+                removeAnnouncement={removeAnnouncement}
+              />
+            );
           case "features":
             return <Features item={item} />;
           case "text":
             return (
               <Text
-                value={item.text}
+                value={item.value}
                 sx={mapStyle(item.style)}
                 mx={HORIZONTAL_MARGIN}
               />
@@ -177,7 +186,7 @@ function Text({ value, ...restProps }) {
   );
 }
 
-function CalltoActions({ item }) {
+function CalltoActions({ item, removeAnnouncement }) {
   const { actions, style } = item;
   return (
     <Flex
@@ -212,6 +221,7 @@ function CalltoActions({ item }) {
                 mr: 1,
               },
             }}
+            removeAnnouncement={removeAnnouncement}
           />
         ))}
     </Flex>
@@ -250,14 +260,16 @@ function InlineCalltoActions({ item }) {
   );
 }
 
-function CalltoAction({ action, variant, sx }) {
+function CalltoAction({ action, variant, sx, removeAnnouncement }) {
   return (
     <Button
       as={action.type === "link" ? "a" : "button"}
       href={action.type === "link" ? action.data : ""}
+      target="_blank"
       variant={variant}
       sx={sx}
       onClick={async () => {
+        removeAnnouncement();
         closeOpenedDialog();
         trackEvent(ANALYTICS_EVENTS.announcementCta, action.data);
         switch (action.type) {
@@ -265,7 +277,6 @@ function CalltoAction({ action, variant, sx }) {
             const url = new URL(action.data);
             if (url.origin === window.location.origin)
               window.open(action.data, "_self");
-            else window.open(action.data, "_blank");
             break;
           case "promo":
             const [coupon, plan] = action.data.split(":");

apps/web/src/components/dialogs/announcement-dialog.js

@@ -4,7 +4,7 @@ import { Flex } from "rebass";
 import AnnouncementBody from "../announcements/body";
 
 function AnnouncementDialog(props) {
-  const { announcement } = props;
+  const { announcement, removeAnnouncement } = props;
   const theme = useTheme();
 
   return (
@@ -65,7 +65,11 @@ function AnnouncementDialog(props) {
           borderRadius: "dialog",
         }}
       >
-        <AnnouncementBody components={announcement.body} type="dialog" />
+        <AnnouncementBody
+          components={announcement.body}
+          removeAnnouncement={removeAnnouncement}
+          type="dialog"
+        />
       </Flex>
     </Modal>
   );