10623051955

Committed 29 Aug 2024 09:41PM UTC coverage: 31.97% (+0.06%) from 31.915%

Build # 10623051955

Build Type

Pull #9677

github

Committed by

darkruby501

Commit Message

word counts on viewing page

Pull Request Pull Request #9677: word counts on viewing page

Run Details

5023 of 40967 branches covered (12.26%)

Branch coverage included in aggregate %.

0 of 4 new or added lines in 1 file covered. (0.0%)

488 existing lines in 21 files now uncovered.

29310 of 66425 relevant lines covered (44.12%)

188.61 hits per line

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

27.59

/packages/lesswrong/components/ea-forum/onboarding/EAOnboardingThankYouStage.tsx

import React, { useCallback, useEffect, useState } from "react";
import { Components, registerComponent } from "../../../lib/vulcan-lib";
import { getPodcastDataByName } from "../../../lib/eaPodcasts";
import { useEAOnboarding } from "./useEAOnboarding";
import classNames from "classnames";

const styles = (theme: ThemeType) => ({
  root: {
    padding: 40,
    display: "flex",
    flexDirection: "column",
  },
  content: {
    [theme.breakpoints.down("xs")]: {
      flexGrow: 1,
    },
  },
  thanks: {
    fontSize: 40,
    fontWeight: 600,
    letterSpacing: "-0.8px",
    marginBottom: 32,
    lineHeight: "initial",
  },
  title: {
    fontSize: 12,
  },
  section: {
    background: theme.palette.panelBackground.onboardingSection,
    borderRadius: theme.borderRadius.default,
    padding: "12px 16px",
    marginBottom: 12,
    display: "flex",
    gap: '20px',
    alignItems: "center",
    textAlign: "left",
    "& > *:first-child": {
      flexGrow: 1,
    },
  },
  interviewSection: {
    background: 'none',
    borderTop: theme.palette.border.normal,
    borderRadius: 0,
    padding: '24px 0 0',
    marginTop: 24,
  },
  heading: {
    color: theme.palette.grey[1000],
    fontSize: 14,
    fontWeight: 600,
  },
  subheading: {
    color: theme.palette.grey[600],
    fontSize: 14,
    fontWeight: 500,
  },
  interviewDescription: {
    color: theme.palette.grey[600],
    fontSize: 13,
    lineHeight: '140%',
    fontWeight: 500,
    textWrap: 'pretty',
    marginTop: 4,
  },
  toggle: {
    [theme.breakpoints.down("xs")]: {
      marginLeft: 20,
    },
  },
  podcasts: {
    display: "flex",
    gap: "4px",
    [theme.breakpoints.down("xs")]: {
      width: "100%",
      "& > *": {
        flexBasis: "50%",
      },
    },
  },
  interviewButtonWrapper: {
    flex: 'none',
    [theme.breakpoints.down("xs")]: {
      alignSelf: 'center',
      marginTop: 8,
    },
  },
  interviewButton: {
    fontWeight: 600,
    textDecoration: 'none !important',
    padding: '12px 16px',
  },
  footer: {
    textAlign: 'center',
  },
  footerButton: {
    width: "100%",
    maxWidth: 500,
    padding: "12px 20px",
    fontSize: 14,
    fontWeight: 600,
  },
  mobileColumn: {
    [theme.breakpoints.down("xs")]: {
      flexDirection: "column",
      alignItems: "flex-start",
      gap: "12px",
    },
  },
});

export const EAOnboardingThankYouStage = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const {currentStage, goToNextStage, currentUser, updateCurrentUser, captureOnboardingEvent, viewAsAdmin} = useEAOnboarding();
  const [subscribed, setSubscribed] = useState(true);

  useEffect(() => {
    // Default to subscribing to the digest (unless this is an admin testing)
    if (!currentUser.subscribedToDigest && currentStage === 'thankyou' && !viewAsAdmin) {
      void updateCurrentUser({
        subscribedToDigest: true,
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentStage]);

  const setSubscribedToDigest = useCallback((value: boolean) => {
    setSubscribed(value);
    // If this is an admin testing, don't make any changes
    !viewAsAdmin && void updateCurrentUser({
      subscribedToDigest: value,
    });
    captureOnboardingEvent("toggleDigest", {subscribed: value});
  }, [updateCurrentUser, captureOnboardingEvent, viewAsAdmin]);

  const onComplete = useCallback(() => {
    void goToNextStage();
    captureOnboardingEvent("onboardingComplete");
  }, [goToNextStage, captureOnboardingEvent]);

  const {
    EAOnboardingStage, EAOnboardingPodcast, SectionTitle, EAButton, ToggleSwitch,
  } = Components;
  return (
    <EAOnboardingStage
      stageName="thankyou"
      title="Thanks for joining the discussion"
      className={classes.root}
      hideHeader
      footer={
        <div className={classes.footer}>
          <EAButton onClick={onComplete} className={classes.footerButton}>
            Go to the Forum -&gt;
          </EAButton>
        </div>
      }
      hideFooterButton
    >
      <div className={classes.content}>
        <div className={classes.thanks}>
          Thanks for joining the discussion!
        </div>
        <SectionTitle title="Other ways to read posts" titleClassName={classes.title} />
        <div className={classes.section}>
          <div>
            <div className={classes.heading}>
              Get the best posts in your email with the Forum Digest
            </div>
            <div className={classes.subheading}>
              A weekly email curated by the Forum team
            </div>
          </div>
          <ToggleSwitch
            value={subscribed}
            setValue={setSubscribedToDigest}
            className={classes.toggle}
          />
        </div>
        <div className={classNames(classes.section, classes.mobileColumn)}>
          <div>
            <div className={classes.heading}>
              Listen to posts anywhere
            </div>
            <div className={classes.subheading}>
              Subscribe to the Forum podcast
            </div>
          </div>
          <div className={classes.podcasts}>
            <EAOnboardingPodcast podcast={getPodcastDataByName("Spotify")} />
            <EAOnboardingPodcast podcast={getPodcastDataByName("Apple Podcasts")} />
          </div>
        </div>
        <div className={classNames(classes.section, classes.interviewSection, classes.mobileColumn)}>
          <div>
            <div className={classes.heading}>
              Sign up for a user interview
            </div>
            <div className={classes.interviewDescription}>
              We’d love to learn why you joined and how you got involved with EA. We’ll also answer any questions you have.
            </div>
          </div>
          <div className={classes.interviewButtonWrapper}>
            <EAButton href="https://savvycal.com/cea/forum-team" target="_blank" rel="noreferrer" style="grey" className={classes.interviewButton}>
              Book a call
            </EAButton>
          </div>
        </div>
      </div>
    </EAOnboardingStage>
  );
}

const EAOnboardingThankYouStageComponent = registerComponent(
  "EAOnboardingThankYouStage",
  EAOnboardingThankYouStage,
  {styles},
);

declare global {
  interface ComponentTypes {
    EAOnboardingThankYouStage: typeof EAOnboardingThankYouStageComponent
  }
}

1	import React, { useCallback, useEffect, useState } from "react";	3✔
2	import { Components, registerComponent } from "../../../lib/vulcan-lib";	1✔
3	import { getPodcastDataByName } from "../../../lib/eaPodcasts";	1✔
4	import { useEAOnboarding } from "./useEAOnboarding";	1✔
5	import classNames from "classnames";	1✔
6
7	const styles = (theme: ThemeType) => ({	1✔
8	root: {
9	padding: 40,
10	display: "flex",
11	flexDirection: "column",
12	},
13	content: {
14	[theme.breakpoints.down("xs")]: {
15	flexGrow: 1,
16	},
17	},
18	thanks: {
19	fontSize: 40,
20	fontWeight: 600,
21	letterSpacing: "-0.8px",
22	marginBottom: 32,
23	lineHeight: "initial",
24	},
25	title: {
26	fontSize: 12,
27	},
28	section: {
29	background: theme.palette.panelBackground.onboardingSection,
30	borderRadius: theme.borderRadius.default,
31	padding: "12px 16px",
32	marginBottom: 12,
33	display: "flex",
34	gap: '20px',
35	alignItems: "center",
36	textAlign: "left",
37	"& > *:first-child": {
38	flexGrow: 1,
39	},
40	},
41	interviewSection: {
42	background: 'none',
43	borderTop: theme.palette.border.normal,
44	borderRadius: 0,
45	padding: '24px 0 0',
46	marginTop: 24,
47	},
48	heading: {
49	color: theme.palette.grey[1000],
50	fontSize: 14,
51	fontWeight: 600,
52	},
53	subheading: {
54	color: theme.palette.grey[600],
55	fontSize: 14,
56	fontWeight: 500,
57	},
58	interviewDescription: {
59	color: theme.palette.grey[600],
60	fontSize: 13,
61	lineHeight: '140%',
62	fontWeight: 500,
63	textWrap: 'pretty',
64	marginTop: 4,
65	},
66	toggle: {
67	[theme.breakpoints.down("xs")]: {
68	marginLeft: 20,
69	},
70	},
71	podcasts: {
72	display: "flex",
73	gap: "4px",
74	[theme.breakpoints.down("xs")]: {
75	width: "100%",
76	"& > *": {
77	flexBasis: "50%",
78	},
79	},
80	},
81	interviewButtonWrapper: {
82	flex: 'none',
83	[theme.breakpoints.down("xs")]: {
84	alignSelf: 'center',
85	marginTop: 8,
86	},
87	},
88	interviewButton: {
89	fontWeight: 600,
90	textDecoration: 'none !important',
91	padding: '12px 16px',
92	},
93	footer: {
94	textAlign: 'center',
95	},
96	footerButton: {
97	width: "100%",
98	maxWidth: 500,
99	padding: "12px 20px",
100	fontSize: 14,
101	fontWeight: 600,
102	},
103	mobileColumn: {
104	[theme.breakpoints.down("xs")]: {
105	flexDirection: "column",
106	alignItems: "flex-start",
107	gap: "12px",
108	},
109	},
110	});
111
112	export const EAOnboardingThankYouStage = ({classes}: {	1✔
113	classes: ClassesType<typeof styles>,
114	}) => {
UNCOV 115	const {currentStage, goToNextStage, currentUser, updateCurrentUser, captureOnboardingEvent, viewAsAdmin} = useEAOnboarding();	×
UNCOV 116	const [subscribed, setSubscribed] = useState(true);	×
117
118	useEffect(() => {	×
119	// Default to subscribing to the digest (unless this is an admin testing)
UNCOV 120	if (!currentUser.subscribedToDigest && currentStage === 'thankyou' && !viewAsAdmin) {	×
UNCOV 121	void updateCurrentUser({	×
122	subscribedToDigest: true,
123	});
124	}
125	// eslint-disable-next-line react-hooks/exhaustive-deps
126	}, [currentStage]);
127
UNCOV 128	const setSubscribedToDigest = useCallback((value: boolean) => {	×
UNCOV 129	setSubscribed(value);	×
130	// If this is an admin testing, don't make any changes
UNCOV 131	!viewAsAdmin && void updateCurrentUser({	×
132	subscribedToDigest: value,
133	});
UNCOV 134	captureOnboardingEvent("toggleDigest", {subscribed: value});	×
135	}, [updateCurrentUser, captureOnboardingEvent, viewAsAdmin]);
136
UNCOV 137	const onComplete = useCallback(() => {	×
UNCOV 138	void goToNextStage();	×
UNCOV 139	captureOnboardingEvent("onboardingComplete");	×
140	}, [goToNextStage, captureOnboardingEvent]);
141
142	const {
143	EAOnboardingStage, EAOnboardingPodcast, SectionTitle, EAButton, ToggleSwitch,
UNCOV 144	} = Components;	×
UNCOV 145	return (	×
146	<EAOnboardingStage
147	stageName="thankyou"
148	title="Thanks for joining the discussion"
149	className={classes.root}
150	hideHeader
151	footer={
152	<div className={classes.footer}>
153	<EAButton onClick={onComplete} className={classes.footerButton}>
154	Go to the Forum ->
155	</EAButton>
156	</div>
157	}
158	hideFooterButton
159	>
160	<div className={classes.content}>
161	<div className={classes.thanks}>
162	Thanks for joining the discussion!
163	</div>
164	<SectionTitle title="Other ways to read posts" titleClassName={classes.title} />
165	<div className={classes.section}>
166	<div>
167	<div className={classes.heading}>
168	Get the best posts in your email with the Forum Digest
169	</div>
170	<div className={classes.subheading}>
171	A weekly email curated by the Forum team
172	</div>
173	</div>
174	<ToggleSwitch
175	value={subscribed}
176	setValue={setSubscribedToDigest}
177	className={classes.toggle}
178	/>
179	</div>
180	<div className={classNames(classes.section, classes.mobileColumn)}>
181	<div>
182	<div className={classes.heading}>
183	Listen to posts anywhere
184	</div>
185	<div className={classes.subheading}>
186	Subscribe to the Forum podcast
187	</div>
188	</div>
189	<div className={classes.podcasts}>
190	<EAOnboardingPodcast podcast={getPodcastDataByName("Spotify")} />
191	<EAOnboardingPodcast podcast={getPodcastDataByName("Apple Podcasts")} />
192	</div>
193	</div>
194	<div className={classNames(classes.section, classes.interviewSection, classes.mobileColumn)}>
195	<div>
196	<div className={classes.heading}>
197	Sign up for a user interview
198	</div>
199	<div className={classes.interviewDescription}>
200	We’d love to learn why you joined and how you got involved with EA. We’ll also answer any questions you have.
201	</div>
202	</div>
203	<div className={classes.interviewButtonWrapper}>
204	<EAButton href="https://savvycal.com/cea/forum-team" target="_blank" rel="noreferrer" style="grey" className={classes.interviewButton}>
205	Book a call
206	</EAButton>
207	</div>
208	</div>
209	</div>
210	</EAOnboardingStage>
211	);
212	}
213
214	const EAOnboardingThankYouStageComponent = registerComponent(	1✔
215	"EAOnboardingThankYouStage",
216	EAOnboardingThankYouStage,
217	{styles},
218	);
219
220	declare global {
221	interface ComponentTypes {
222	EAOnboardingThankYouStage: typeof EAOnboardingThankYouStageComponent
223	}
224	}

ForumMagnum / ForumMagnum / 10623051955

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