10168262856

Committed 30 Jul 2024 07:05PM UTC coverage: 32.075% (-0.007%) from 32.082%

Build # 10168262856

Build Type

Pull #9560

github

Committed by

web-flow

Commit Message

Merge 8a85223b5 into 2ef058cbd

Pull Request Pull Request #9560: [EA Forum only] update EA Forum survey banner

Run Details

4936 of 40048 branches covered (12.33%)

Branch coverage included in aggregate %.

3 of 6 new or added lines in 2 files covered. (50.0%)

9 existing lines in 2 files now uncovered.

28718 of 64875 relevant lines covered (44.27%)

180.87 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

41.38

/packages/lesswrong/components/ea-forum/EASurveyBanner.tsx

import React, { useCallback } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { useCurrentUser } from "../common/withUser";
import { useTracking } from "../../lib/analyticsEvents";
import { useCookiesWithConsent } from "../hooks/useCookiesWithConsent";
import moment from "moment";
import DeferRender from "../common/DeferRender";
import { Link } from "@/lib/reactRouterWrapper";
import { HIDE_EA_FORUM_SURVEY_BANNER_COOKIE } from "@/lib/cookies/cookies";

const styles = (theme: ThemeType) => ({
  root: {
    position: "sticky",
    top: 0,
    zIndex: 10, // The typeform popup has z-index 10001
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    gap: "25px",
    padding: 12,
    background: theme.palette.buttons.alwaysPrimary,
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 15,
    lineHeight: '21px',
    fontWeight: 450,
    color: theme.palette.text.alwaysWhite,
    [theme.breakpoints.down("sm")]: {
      flexDirection: "column",
      gap: "12px",
      paddingRight: 60,
    },
  },
  button: {
    background: theme.palette.text.alwaysWhite,
    color: theme.palette.text.alwaysBlack,
    borderRadius: theme.borderRadius.default,
    fontSize: 15,
    fontWeight: 500,
    padding: "8px 12px",
    cursor: "pointer",
    "&:hover": {
      opacity: 0.9,
    },
  },
  close: {
    position: "absolute",
    right: 20,
    cursor: "pointer",
    "&:hover": {
      opacity: 0.75,
    },
  },
});

/**
 * This banner is now disabled but the code is left here in case we want to
 * do something similar again in the future. If so, there are a couple of bugs
 * to fix:
 *   1) We had some users complaining that the banner didn't get hidden properly
 *      or that it would open again when revisiting the page. The most important
 *      thing is that the cookie must be marked as "necessary" to ensure it works
 *      for users who don't accept cookies. We still had some users who reported
 *      it wasn't working properly though - maybe we should just disable the
 *      banner entirely or users who don't accept cookies?
 *   2) The banner currently obscures the autocomplete window that popups up
 *      when typing in the search box. We probably just need to add some kind
 *      of top margin or offset.
 *   3) We also removed the old cookie, so a new cookie name needs to be added
 *      below. We previously used:
 *      export const HIDE_EA_FORUM_SURVEY_BANNER_COOKIE = registerCookie({
 *        name: "hide_ea_forum_survey_banner",
 *        type: "necessary",
 *        description: "Don't show the EA Forum survey banner",
 *      });
 */
const EASurveyBanner = ({classes}: {classes: ClassesType}) => {
  const [cookies, setCookie] = useCookiesWithConsent([HIDE_EA_FORUM_SURVEY_BANNER_COOKIE]);
  const {captureEvent} = useTracking();
  const currentUser = useCurrentUser();

  const hideBanner = useCallback(() => {
    setCookie(HIDE_EA_FORUM_SURVEY_BANNER_COOKIE, "true", {
      expires: moment().add(3, "months").toDate(),
    });
  }, [HIDE_EA_FORUM_SURVEY_BANNER_COOKIE, setCookie]);

  const onDismissBanner = useCallback(() => {
    hideBanner();
    captureEvent("ea_forum_survey_banner_dismissed");
  }, [hideBanner, captureEvent]);

  const onSubmitSurvey = useCallback(() => {
    hideBanner();
    captureEvent("ea_forum_survey_closed");
  }, [hideBanner, captureEvent]);

  if (cookies[HIDE_EA_FORUM_SURVEY_BANNER_COOKIE] === "true") {
    return null;
  }

  const {ForumIcon} = Components;
  return (
    <DeferRender ssr={!!currentUser}>
      <div className={classes.root}>
        Take the 2024 EA Forum Survey to help inform our strategy and priorities
        <Link
          to="https://forms.cea.community/test?utm_source=ea_forum&utm_medium=banner"
          target="_blank"
          rel="noopener noreferrer"
          onClick={onSubmitSurvey}
          className={classes.button}
        >
          Take the survey
        </Link>
        <ForumIcon
          icon="Close"
          onClick={onDismissBanner}
          className={classes.close}
        />
      </div>
    </DeferRender>
  );
}

const EASurveyBannerComponent = registerComponent(
  "EASurveyBanner",
  EASurveyBanner,
  {styles},
);

declare global {
  interface ComponentTypes {
    EASurveyBanner: typeof EASurveyBannerComponent
  }
}

1	import React, { useCallback } from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { useCurrentUser } from "../common/withUser";	1✔
4	import { useTracking } from "../../lib/analyticsEvents";	1✔
5	import { useCookiesWithConsent } from "../hooks/useCookiesWithConsent";	1✔
6	import moment from "moment";	1✔
7	import DeferRender from "../common/DeferRender";	1✔
8	import { Link } from "@/lib/reactRouterWrapper";	1✔
9	import { HIDE_EA_FORUM_SURVEY_BANNER_COOKIE } from "@/lib/cookies/cookies";	1✔
10
11	const styles = (theme: ThemeType) => ({	1✔
12	root: {
13	position: "sticky",
14	top: 0,
15	zIndex: 10, // The typeform popup has z-index 10001
16	display: "flex",
17	alignItems: "center",
18	justifyContent: "center",
19	textAlign: "center",
20	gap: "25px",
21	padding: 12,
22	background: theme.palette.buttons.alwaysPrimary,
23	fontFamily: theme.palette.fonts.sansSerifStack,
24	fontSize: 15,
25	lineHeight: '21px',
26	fontWeight: 450,
27	color: theme.palette.text.alwaysWhite,
28	[theme.breakpoints.down("sm")]: {
29	flexDirection: "column",
30	gap: "12px",
31	paddingRight: 60,
32	},
33	},
34	button: {
35	background: theme.palette.text.alwaysWhite,
36	color: theme.palette.text.alwaysBlack,
37	borderRadius: theme.borderRadius.default,
38	fontSize: 15,
39	fontWeight: 500,
40	padding: "8px 12px",
41	cursor: "pointer",
42	"&:hover": {
43	opacity: 0.9,
44	},
45	},
46	close: {
47	position: "absolute",
48	right: 20,
49	cursor: "pointer",
50	"&:hover": {
51	opacity: 0.75,
52	},
53	},
54	});
55
56	/**
57	* This banner is now disabled but the code is left here in case we want to
58	* do something similar again in the future. If so, there are a couple of bugs
59	* to fix:
60	* 1) We had some users complaining that the banner didn't get hidden properly
61	* or that it would open again when revisiting the page. The most important
62	* thing is that the cookie must be marked as "necessary" to ensure it works
63	* for users who don't accept cookies. We still had some users who reported
64	* it wasn't working properly though - maybe we should just disable the
65	* banner entirely or users who don't accept cookies?
66	* 2) The banner currently obscures the autocomplete window that popups up
67	* when typing in the search box. We probably just need to add some kind
68	* of top margin or offset.
69	* 3) We also removed the old cookie, so a new cookie name needs to be added
70	* below. We previously used:
71	* export const HIDE_EA_FORUM_SURVEY_BANNER_COOKIE = registerCookie({
72	* name: "hide_ea_forum_survey_banner",
73	* type: "necessary",
74	* description: "Don't show the EA Forum survey banner",
75	* });
76	*/
77	const EASurveyBanner = ({classes}: {classes: ClassesType}) => {	1✔
NEW 78	const [cookies, setCookie] = useCookiesWithConsent([HIDE_EA_FORUM_SURVEY_BANNER_COOKIE]);	×
79	const {captureEvent} = useTracking();	×
80	const currentUser = useCurrentUser();	×
81
82	const hideBanner = useCallback(() => {	×
NEW 83	setCookie(HIDE_EA_FORUM_SURVEY_BANNER_COOKIE, "true", {	×
84	expires: moment().add(3, "months").toDate(),
85	});
86	}, [HIDE_EA_FORUM_SURVEY_BANNER_COOKIE, setCookie]);
87
88	const onDismissBanner = useCallback(() => {	×
89	hideBanner();	×
90	captureEvent("ea_forum_survey_banner_dismissed");	×
91	}, [hideBanner, captureEvent]);
92
93	const onSubmitSurvey = useCallback(() => {	×
94	hideBanner();	×
95	captureEvent("ea_forum_survey_closed");	×
96	}, [hideBanner, captureEvent]);
97
NEW 98	if (cookies[HIDE_EA_FORUM_SURVEY_BANNER_COOKIE] === "true") {	×
99	return null;	×
100	}
101
102	const {ForumIcon} = Components;	×
103	return (	×
104	<DeferRender ssr={!!currentUser}>
105	<div className={classes.root}>
106	Take the 2024 EA Forum Survey to help inform our strategy and priorities
107	<Link
108	to="https://forms.cea.community/test?utm_source=ea_forum&utm_medium=banner"
109	target="_blank"
110	rel="noopener noreferrer"
111	onClick={onSubmitSurvey}
112	className={classes.button}
113	>
114	Take the survey
115	</Link>
116	<ForumIcon
117	icon="Close"
118	onClick={onDismissBanner}
119	className={classes.close}
120	/>
121	</div>
122	</DeferRender>
123	);
124	}
125
126	const EASurveyBannerComponent = registerComponent(	1✔
127	"EASurveyBanner",
128	EASurveyBanner,
129	{styles},
130	);
131
132	declare global {
133	interface ComponentTypes {
134	EASurveyBanner: typeof EASurveyBannerComponent
135	}
136	}

ForumMagnum / ForumMagnum / 10168262856

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous