9981698366

Committed 17 Jul 2024 09:24PM UTC coverage: 31.915% (+0.004%) from 31.911%

Build # 9981698366

Build Type

Pull #9517

github

Committed by

Will-Howard

Commit Message

comment

Pull Request Pull Request #9517: [Draft] Cleanup email verification logic so EAF never sends verification emails

Run Details

4907 of 40335 branches covered (12.17%)

Branch coverage included in aggregate %.

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

27 existing lines in 4 files now uncovered.

28711 of 65001 relevant lines covered (44.17%)

180.28 hits per line

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

10.76

/packages/lesswrong/components/recentDiscussion/RecentDiscussionSubscribeReminder.tsx

import React, {useState, useEffect, useRef} from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useCurrentUser } from '../common/withUser';
import { useUpdateCurrentUser } from '../hooks/useUpdateCurrentUser';
import { getUserEmail, userEmailAddressIsVerified, userHasEmailAddress} from '../../lib/collections/users/helpers';
import { useMessages } from '../common/withMessages';
import { getGraphQLErrorID, getGraphQLErrorMessage } from '../../lib/utils/errorUtil';
import { randInt } from '../../lib/random';
import SimpleSchema from 'simpl-schema';
import Button from '@material-ui/core/Button';
import Input from '@material-ui/core/Input';
import MailOutline from '@material-ui/icons/MailOutline'
import CheckRounded from '@material-ui/icons/CheckRounded'
import withErrorBoundary from '../common/withErrorBoundary'
import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";
import { forumTitleSetting, forumTypeSetting, isAF, isEAForum, isLW, isLWorAF } from '../../lib/instanceSettings';
import TextField from '@material-ui/core/TextField';
import { isFriendlyUI } from '../../themes/forumTheme';

// mailchimp link to sign up for the EA Forum's digest
export const eaForumDigestSubscribeURL = "https://effectivealtruism.us8.list-manage.com/subscribe/post?u=52b028e7f799cca137ef74763&amp;id=7457c7ff3e&amp;f_id=0086c5e1f0"

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    marginBottom: theme.spacing.unit*4,
    position: "relative",
    backgroundColor: isFriendlyUI
      ? theme.palette.grey[0]
      : theme.palette.panelBackground.recentDiscussionThread,
    border: isFriendlyUI ? `1px solid ${theme.palette.grey[200]}` : undefined,

    padding: 16,
    ...theme.typography.body2,
    boxShadow: theme.palette.boxShadow.default,
    borderRadius: theme.borderRadius.default,

    marginLeft: "auto",
    marginRight: "auto",
    maxWidth: 500,
  },
  adminNotice: {
    textAlign: "left",
    marginTop: 22,
    fontSize: 12,
    lineHeight: 1.3,
    fontStyle: "italic",
  },
  loginForm: {
    margin: "0 auto -4px",
    maxWidth: 252,
  },
  digestForm: {
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'baseline',
    columnGap: 30,
    rowGap: '14px',
    padding: '20px 50px 20px 20px',
    [theme.breakpoints.down('xs')]: {
      padding: 10
    }
  },
  digestFormInput: {
    flexGrow: 1
  },
  digestFormSubmitBtn: {
    minHeight: 0,
    boxShadow: 'none'
  },
  message: {
    display: "flex",
    alignItems: "flex-start",
    fontSize: 18,
    lineHeight: 1.75,
  },
  messageDescription: {
    fontSize: 12,
    marginTop: 8
  },
  mailIcon: {
    color: theme.palette.primary.main,
    marginTop: 4,
    marginRight: 12
  },
  checkIcon: {
    color: theme.palette.icon.greenCheckmark,
    marginTop: 4,
    marginRight: 12
  },
  emailInput: {
    marginTop: 18
  },
  subscribeButton: {
    margin: "18px auto 0",
    display: "block",
    background: theme.palette.primary.main,
    color: theme.palette.buttons.recentDiscussionSubscribeButtonText,
    fontSize: 15
  },
  buttons: {
    marginTop: 16,
    textAlign: "right",
  },
  maybeLaterButton: {
  },
  dontAskAgainButton: {
  },
});

/**
 * This is the ad that appears in "Recent discussion".
 * For LW it's for the Curated email, and for EA Forum it's for the Forum Digest.
 *
 * It has some overlap with the Forum Digest ad that appears on the EA Forum home rhs.
 * In particular, both components use currentUser.hideSubscribePoke,
 * so for logged in users, hiding one ad hides the other.
 *
 * See EAHomeRightHandSide.tsx for the other component.
 */
const RecentDiscussionSubscribeReminder = ({classes}: {
  classes: ClassesType,
}) => {
  const currentUser = useCurrentUser();
  const updateCurrentUser = useUpdateCurrentUser();
  const [hide, setHide] = useState(false);
  const [subscribeChecked, setSubscribeChecked] = useState(true);
  const [verificationEmailSent, setVerificationEmailSent] = useState(false);
  const [subscriptionConfirmed, setSubscriptionConfirmed] = useState(false);
  const emailAddressInput = useRef<HTMLInputElement|null>(null);
  const [loading, setLoading] = useState(false);
  const { flash } = useMessages();
  const {LoginForm, SignupSubscribeToCurated, Loading, AnalyticsInViewTracker } = Components;
  const subscriptionDescription = '(2-3 posts per week, selected by the LessWrong moderation team.)';
  const { captureEvent } = useTracking({eventProps: {pageElementContext: "subscribeReminder"}});
  
  // Show admins a random version of the widget. Makes sure we notice if it's intrusive/bad.
  const [adminBranch, setAdminBranch] = useState(-1);
  const adminUiMessage = currentUser?.isAdmin ? <div className={classes.adminNotice}>
    You are seeing this UI element because you're an admin. Admins are shown a random version of the
    subscribe-reminder even if they're already subscribed, to make sure it still works and isn't
    annoying.
  </div>: null
  
  useEffect(() => {
    if (adminBranch === -1 && currentUser?.isAdmin) {
      // EA Forum only has 4 branches, LW has 5. Fortunately LW's extra branch
      // is the last one, so we can exclude it easily.
      setAdminBranch(randInt(!isLWorAF ? 4 : 5));
    }
  }, [adminBranch, currentUser?.isAdmin]);

  // disable on AlignmentForum
  if (isAF) {
    return null;
  }

  // Placeholder to prevent SSR mismatch, changed on load.
  if (adminBranch === -1 && currentUser?.isAdmin)
    return <div/>

  // adjust functionality based on forum type
  let currentUserSubscribed
  if (isLW) {
    currentUserSubscribed = currentUser?.emailSubscribedToCurated;
  } else {
    currentUserSubscribed = currentUser?.subscribedToDigest;
  }

  const maybeLaterButton = <Button
    className={classes.maybeLaterButton}
    onClick={() => {
      setHide(true)
      captureEvent("subscribeReminderButtonClicked",{buttonType: "maybeLaterButton"})
    }}
  >
    Maybe Later
  </Button>
  
  const dontAskAgainButton = <span>
    {currentUser && <Button
      className={classes.dontAskAgainButton}
      onClick={() => {
        void updateCurrentUser({hideSubscribePoke: true});
        setHide(true)
        captureEvent("subscribeReminderButtonClicked",{buttonType: "dontAskAgainButton"})
      }}
    >
      Don't Ask Again
    </Button>}
  </span>
  
  if (hide || currentUser?.hideSubscribePoke) {
    return null;
  }
  
  const updateAndMaybeVerifyEmail = async () => {
    setLoading(true);
    // subscribe to different emails based on forum type
    const userSubscriptionData: Partial<MakeFieldsNullable<DbUser>> = isLW ?
    {emailSubscribedToCurated: true} : {subscribedToDigest: true};
    // since they chose to subscribe to an email, make sure this is false
    userSubscriptionData.unsubscribeFromAll = false;

    // TODO update comment
    // EA Forum does not care about email verification
    if (!userEmailAddressIsVerified(currentUser)) {
      userSubscriptionData.whenConfirmationEmailSent = new Date();
    }

    try {
      await updateCurrentUser(userSubscriptionData);
      setSubscriptionConfirmed(true);
    } catch(e) {
      flash(getGraphQLErrorMessage(e));
    }

    setLoading(false);
  }
  
  const AnalyticsWrapper = ({children, branch}: {children: React.ReactNode, branch: string}) => {
    return <AnalyticsContext pageElementContext="subscribeReminder" branch={branch}>
      <AnalyticsInViewTracker eventProps={{inViewType: "subscribeReminder"}}>
        <div className={classes.root}>
          {children}
        </div>
      </AnalyticsInViewTracker>
    </AnalyticsContext>
  }
  
  // the EA Forum uses this prompt in most cases
  const eaForumSubscribePrompt = (
    <>
      <div className={classes.message}>
        <MailOutline className={classes.mailIcon} />
        Sign up for the Forum's email digest
      </div>
      <div className={classes.messageDescription}>
        You'll get a weekly email with the best posts from the past week.
        The Forum team selects the posts to feature based on personal preference
        and Forum popularity, and also adds some announcements and a classic post.
      </div>
    </>
  );
  
  if (loading) {
    return <div className={classes.root}>
      <Loading/>
    </div>
  } else if (subscriptionConfirmed) {
    // Show the confirmation after the user subscribes
    let confirmText;
    if (isLW) {
      confirmText = "You are subscribed to the best posts of LessWrong!";
    } else {
      confirmText = `You are subscribed to the ${forumTitleSetting} Digest`;
    }
    return <AnalyticsWrapper branch="already-subscribed">
      <div className={classes.message}>
        <CheckRounded className={classes.checkIcon} />
        {confirmText}
      </div>
    </AnalyticsWrapper>
  } else if (verificationEmailSent) {
    // Clicked Subscribe in one of the other branches, and a confirmation email
    // was sent. You need to verify your email address to complete the subscription.
    const yourEmail = currentUser && getUserEmail(currentUser)
    return <AnalyticsWrapper branch="needs-email-verification-subscribed-in-other-branch">
      <div className={classes.message}>
        We sent an email to {yourEmail}. Follow the link in the email to complete your subscription.
      </div>
    </AnalyticsWrapper>
  } else if (!currentUser || adminBranch===0) {
    // Not logged in. Show a create-account form and a brief pitch.
    const subscribeTextNode = isEAForum ? eaForumSubscribePrompt : (
      <div className={classes.message}>
        To get the best posts emailed to you, create an account! {subscriptionDescription}
      </div>
    );
    return <AnalyticsWrapper branch="logged-out">
      {subscribeTextNode}
      {isEAForum ? <form action={eaForumDigestSubscribeURL} method="post" className={classes.digestForm}>
        <TextField label="Email address" name="EMAIL" required className={classes.digestFormInput} />
        <Button variant="contained" type="submit" color="primary" className={classes.digestFormSubmitBtn}>
          Sign up
        </Button>
      </form> : <div className={classes.loginForm}>
        <LoginForm startingState="signup" />
      </div>}
      {adminUiMessage}
    </AnalyticsWrapper>
  } else if (!userHasEmailAddress(currentUser) || adminBranch===1) {
    const emailType = isEAForum ? 'our weekly digest email' : 'curated posts';
    // Logged in, but no email address associated. Probably a legacy account.
    // Show a text box for an email address, with a submit button and a subscribe
    // checkbox.
    return <AnalyticsWrapper branch="missing-email">
      <div className={classes.message}>
        Your account does not have an email address associated. Add an email address to subscribe to {emailType} and enable notifications.
      </div>
      
      <Input placeholder="Email address" inputRef={emailAddressInput} className={classes.emailInput} />
      <SignupSubscribeToCurated defaultValue={true} onChange={(checked: boolean) => setSubscribeChecked(true)}/>
      
      <div className={classes.buttons}>
        <Button className={classes.subscribeButton} onClick={async (ev) => {
          const emailAddress = emailAddressInput.current;
          if (emailAddress && SimpleSchema.RegEx.Email.test(emailAddress?.value)) {
            setLoading(true);
            try {
              // subscribe to different emails based on forum type
              const userSubscriptionData: Partial<MakeFieldsNullable<DbUser>> = isEAForum ?
                {subscribedToDigest: subscribeChecked} : {emailSubscribedToCurated: subscribeChecked};
              userSubscriptionData.email = emailAddress?.value;
              userSubscriptionData.unsubscribeFromAll = false;
              await updateCurrentUser(userSubscriptionData);

              // FIXME I think this should use !userEmailAddressIsVerified(currentUser) (and therefore always bypass on EAF)
              if (isEAForum) {
                // Confirmation-email mutation is separate from the send-verification-email
                // mutation because otherwise it goes to the old email address (aka null)
                await updateCurrentUser({
                  whenConfirmationEmailSent: new Date(),
                });
              }
              setSubscriptionConfirmed(true);
            } catch(e) {
              if (getGraphQLErrorID(e) === "users.email_already_taken") {
                flash("That email address is already taken by a different account.");
              } else {
                flash(e.message || e.id);
              }
            }
            setLoading(false);
          } else {
            flash("Please enter a valid email address.");
          }
          captureEvent("subscribeReminderButtonClicked", {buttonType: "subscribeButton"});
        }}>Submit</Button>
        {adminUiMessage}
        <div className={classes.buttons}>
          {maybeLaterButton}
          {dontAskAgainButton}
        </div>
      </div>
    </AnalyticsWrapper>
  } else if (currentUser.unsubscribeFromAll || adminBranch===2) {
    // User has clicked unsubscribe-from-all at some point in the past. Pitch
    // on re-subscribing. A big Subscribe button, which clears the
    // unsubscribe-from-all option, activates curation emails (if not already
    // activated), and sends a confirmation email (if needed).
    const subscribeTextNode = forumTypeSetting.get() === 'EAForum' ? eaForumSubscribePrompt : (
      <div className={classes.message}>
        You previously unsubscribed from all emails from LessWrong.
        Re-subscribe to get the best posts emailed to you! {subscriptionDescription}
      </div>
    );
    return <AnalyticsWrapper branch="previously-unsubscribed">
      {subscribeTextNode}
      <Button className={classes.subscribeButton} onClick={async (ev) => {
        await updateAndMaybeVerifyEmail();
        captureEvent("subscribeReminderButtonClicked", {buttonType: "subscribeButton"});
      }}>Subscribe</Button>
      {adminUiMessage}
      <div className={classes.buttons}>
        {maybeLaterButton}
        {dontAskAgainButton}
      </div>
    </AnalyticsWrapper>
  } else if (!currentUserSubscribed || adminBranch===3) {
    // User is logged in, and has an email address associated with their
    // account, but is not subscribed to curated posts. A Subscribe button which
    // sets the subscribe-to-curated option, and (if their email address isn't
    // verified) resends the verification email.
    const subscribeTextNode = forumTypeSetting.get() === 'EAForum' ? eaForumSubscribePrompt : (
      <div className={classes.message}>
        Subscribe to get the best of LessWrong emailed to you. {subscriptionDescription}
      </div>
    );
    return <AnalyticsWrapper branch="logged-in-not-subscribed">
      {subscribeTextNode}
      <Button className={classes.subscribeButton} onClick={async (ev) => {
        await updateAndMaybeVerifyEmail();
        captureEvent("subscribeReminderButtonClicked", {buttonType: "subscribeButton"});
      }}>Subscribe</Button>
      {adminUiMessage}
      <div className={classes.buttons}>
        {maybeLaterButton}
        {dontAskAgainButton}
      </div>
    </AnalyticsWrapper>

  } else if (!userEmailAddressIsVerified(currentUser) || adminBranch===4) {
    // User is subscribed, but they haven't verified their email address. Show
    // a resend-verification-email button.
    return <AnalyticsWrapper branch="needs-email-verification">
      <div>
        <div className={classes.message}>
          Please verify your email address to activate your subscription to curated posts.
        </div>
        <div className={classes.buttons}>
          <Button className={classes.subscribeButton} onClick={async (ev) => {
            setLoading(true);
            try {
              await updateCurrentUser({
                whenConfirmationEmailSent: new Date()
              });
            } catch(e) {
              flash(getGraphQLErrorMessage(e));
            }
            setLoading(false);
            setVerificationEmailSent(true);
            captureEvent("subscribeReminderButtonClicked", {buttonType: "resendVerificationEmailButton"});
          }}>Resend Verification Email</Button>
          {adminUiMessage}
          <div className={classes.buttons}>
            {maybeLaterButton}
            {dontAskAgainButton}
          </div>
        </div>
      </div>
    </AnalyticsWrapper>
  } else {
    // Everything looks good-already subscribed to curated. No need to show anything.
    return null;
  }
}

const RecentDiscussionSubscribeReminderComponent = registerComponent(
  'RecentDiscussionSubscribeReminder', RecentDiscussionSubscribeReminder, {
    styles,
    hocs: [withErrorBoundary],
  }
);

declare global {
  interface ComponentTypes {
    RecentDiscussionSubscribeReminder: typeof RecentDiscussionSubscribeReminderComponent,
  }
}

1	import React, {useState, useEffect, useRef} from 'react';	3✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { useCurrentUser } from '../common/withUser';	1✔
4	import { useUpdateCurrentUser } from '../hooks/useUpdateCurrentUser';	1✔
5	import { getUserEmail, userEmailAddressIsVerified, userHasEmailAddress} from '../../lib/collections/users/helpers';	1✔
6	import { useMessages } from '../common/withMessages';	1✔
7	import { getGraphQLErrorID, getGraphQLErrorMessage } from '../../lib/utils/errorUtil';	1✔
8	import { randInt } from '../../lib/random';	1✔
9	import SimpleSchema from 'simpl-schema';	1✔
10	import Button from '@material-ui/core/Button';	1✔
11	import Input from '@material-ui/core/Input';	1✔
12	import MailOutline from '@material-ui/icons/MailOutline'	1✔
13	import CheckRounded from '@material-ui/icons/CheckRounded'	1✔
14	import withErrorBoundary from '../common/withErrorBoundary'	1✔
15	import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";	1✔
16	import { forumTitleSetting, forumTypeSetting, isAF, isEAForum, isLW, isLWorAF } from '../../lib/instanceSettings';	1✔
17	import TextField from '@material-ui/core/TextField';	1✔
18	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
19
20	// mailchimp link to sign up for the EA Forum's digest
21	export const eaForumDigestSubscribeURL = "https://effectivealtruism.us8.list-manage.com/subscribe/post?u=52b028e7f799cca137ef74763&id=7457c7ff3e&f_id=0086c5e1f0"	1✔
22
23	const styles = (theme: ThemeType): JssStyles => ({	1✔
24	root: {
25	marginBottom: theme.spacing.unit*4,
26	position: "relative",
27	backgroundColor: isFriendlyUI
28	? theme.palette.grey[0]	1!
29	: theme.palette.panelBackground.recentDiscussionThread,
30	border: isFriendlyUI ? `1px solid ${theme.palette.grey[200]}` : undefined,	1!
31
32	padding: 16,
33	...theme.typography.body2,
34	boxShadow: theme.palette.boxShadow.default,
35	borderRadius: theme.borderRadius.default,
36
37	marginLeft: "auto",
38	marginRight: "auto",
39	maxWidth: 500,
40	},
41	adminNotice: {
42	textAlign: "left",
43	marginTop: 22,
44	fontSize: 12,
45	lineHeight: 1.3,
46	fontStyle: "italic",
47	},
48	loginForm: {
49	margin: "0 auto -4px",
50	maxWidth: 252,
51	},
52	digestForm: {
53	display: 'flex',
54	flexWrap: 'wrap',
55	alignItems: 'baseline',
56	columnGap: 30,
57	rowGap: '14px',
58	padding: '20px 50px 20px 20px',
59	[theme.breakpoints.down('xs')]: {
60	padding: 10
61	}
62	},
63	digestFormInput: {
64	flexGrow: 1
65	},
66	digestFormSubmitBtn: {
67	minHeight: 0,
68	boxShadow: 'none'
69	},
70	message: {
71	display: "flex",
72	alignItems: "flex-start",
73	fontSize: 18,
74	lineHeight: 1.75,
75	},
76	messageDescription: {
77	fontSize: 12,
78	marginTop: 8
79	},
80	mailIcon: {
81	color: theme.palette.primary.main,
82	marginTop: 4,
83	marginRight: 12
84	},
85	checkIcon: {
86	color: theme.palette.icon.greenCheckmark,
87	marginTop: 4,
88	marginRight: 12
89	},
90	emailInput: {
91	marginTop: 18
92	},
93	subscribeButton: {
94	margin: "18px auto 0",
95	display: "block",
96	background: theme.palette.primary.main,
97	color: theme.palette.buttons.recentDiscussionSubscribeButtonText,
98	fontSize: 15
99	},
100	buttons: {
101	marginTop: 16,
102	textAlign: "right",
103	},
104	maybeLaterButton: {
105	},
106	dontAskAgainButton: {
107	},
108	});
109
110	/**
111	* This is the ad that appears in "Recent discussion".
112	* For LW it's for the Curated email, and for EA Forum it's for the Forum Digest.
113	*
114	* It has some overlap with the Forum Digest ad that appears on the EA Forum home rhs.
115	* In particular, both components use currentUser.hideSubscribePoke,
116	* so for logged in users, hiding one ad hides the other.
117	*
118	* See EAHomeRightHandSide.tsx for the other component.
119	*/
120	const RecentDiscussionSubscribeReminder = ({classes}: {	1✔
121	classes: ClassesType,
122	}) => {
123	const currentUser = useCurrentUser();	×
124	const updateCurrentUser = useUpdateCurrentUser();	×
125	const [hide, setHide] = useState(false);	×
126	const [subscribeChecked, setSubscribeChecked] = useState(true);	×
127	const [verificationEmailSent, setVerificationEmailSent] = useState(false);	×
128	const [subscriptionConfirmed, setSubscriptionConfirmed] = useState(false);	×
129	const emailAddressInput = useRef<HTMLInputElement\|null>(null);	×
130	const [loading, setLoading] = useState(false);	×
131	const { flash } = useMessages();	×
132	const {LoginForm, SignupSubscribeToCurated, Loading, AnalyticsInViewTracker } = Components;	×
133	const subscriptionDescription = '(2-3 posts per week, selected by the LessWrong moderation team.)';	×
134	const { captureEvent } = useTracking({eventProps: {pageElementContext: "subscribeReminder"}});	×
135
136	// Show admins a random version of the widget. Makes sure we notice if it's intrusive/bad.
137	const [adminBranch, setAdminBranch] = useState(-1);	×
138	const adminUiMessage = currentUser?.isAdmin ? <div className={classes.adminNotice}>	×
139	You are seeing this UI element because you're an admin. Admins are shown a random version of the
140	subscribe-reminder even if they're already subscribed, to make sure it still works and isn't
141	annoying.
142	</div>: null
143
144	useEffect(() => {	×
145	if (adminBranch === -1 && currentUser?.isAdmin) {	×
146	// EA Forum only has 4 branches, LW has 5. Fortunately LW's extra branch
147	// is the last one, so we can exclude it easily.
148	setAdminBranch(randInt(!isLWorAF ? 4 : 5));	×
149	}
150	}, [adminBranch, currentUser?.isAdmin]);	×
151
152	// disable on AlignmentForum
153	if (isAF) {	×
154	return null;	×
155	}
156
157	// Placeholder to prevent SSR mismatch, changed on load.
158	if (adminBranch === -1 && currentUser?.isAdmin)	×
159	return <div/>	×
160
161	// adjust functionality based on forum type
162	let currentUserSubscribed
163	if (isLW) {	×
164	currentUserSubscribed = currentUser?.emailSubscribedToCurated;	×
165	} else {
166	currentUserSubscribed = currentUser?.subscribedToDigest;	×
167	}
168
169	const maybeLaterButton = <Button	×
170	className={classes.maybeLaterButton}
171	onClick={() => {
172	setHide(true)	×
173	captureEvent("subscribeReminderButtonClicked",{buttonType: "maybeLaterButton"})	×
174	}}
175	>
176	Maybe Later
177	</Button>
178
179	const dontAskAgainButton = <span>	×
180	{currentUser && <Button	×
181	className={classes.dontAskAgainButton}
182	onClick={() => {
183	void updateCurrentUser({hideSubscribePoke: true});	×
184	setHide(true)	×
185	captureEvent("subscribeReminderButtonClicked",{buttonType: "dontAskAgainButton"})	×
186	}}
187	>
188	Don't Ask Again
189	</Button>}
190	</span>
191
192	if (hide \|\| currentUser?.hideSubscribePoke) {	×
193	return null;	×
194	}
195
196	const updateAndMaybeVerifyEmail = async () => {	×
197	setLoading(true);	×
198	// subscribe to different emails based on forum type
199	const userSubscriptionData: Partial<MakeFieldsNullable<DbUser>> = isLW ?	×
200	{emailSubscribedToCurated: true} : {subscribedToDigest: true};	×
201	// since they chose to subscribe to an email, make sure this is false
202	userSubscriptionData.unsubscribeFromAll = false;	×
203
204	// TODO update comment
205	// EA Forum does not care about email verification
NEW 206	if (!userEmailAddressIsVerified(currentUser)) {	×
207	userSubscriptionData.whenConfirmationEmailSent = new Date();	×
208	}
209
210	try {	×
211	await updateCurrentUser(userSubscriptionData);	×
212	setSubscriptionConfirmed(true);	×
213	} catch(e) {
214	flash(getGraphQLErrorMessage(e));	×
215	}
216
217	setLoading(false);	×
218	}
219
220	const AnalyticsWrapper = ({children, branch}: {children: React.ReactNode, branch: string}) => {	×
221	return <AnalyticsContext pageElementContext="subscribeReminder" branch={branch}>	×
222	<AnalyticsInViewTracker eventProps={{inViewType: "subscribeReminder"}}>
223	<div className={classes.root}>
224	{children}
225	</div>
226	</AnalyticsInViewTracker>
227	</AnalyticsContext>
228	}
229
230	// the EA Forum uses this prompt in most cases
231	const eaForumSubscribePrompt = (
232	<>	×
233	<div className={classes.message}>
234	<MailOutline className={classes.mailIcon} />
235	Sign up for the Forum's email digest
236	</div>
237	<div className={classes.messageDescription}>
238	You'll get a weekly email with the best posts from the past week.
239	The Forum team selects the posts to feature based on personal preference
240	and Forum popularity, and also adds some announcements and a classic post.
241	</div>
242	</>
243	);
244
245	if (loading) {	×
246	return <div className={classes.root}>	×
247	<Loading/>
248	</div>
249	} else if (subscriptionConfirmed) {	×
250	// Show the confirmation after the user subscribes
251	let confirmText;
252	if (isLW) {	×
253	confirmText = "You are subscribed to the best posts of LessWrong!";	×
254	} else {
255	confirmText = `You are subscribed to the ${forumTitleSetting} Digest`;	×
256	}
257	return <AnalyticsWrapper branch="already-subscribed">	×
258	<div className={classes.message}>
259	<CheckRounded className={classes.checkIcon} />
260	{confirmText}
261	</div>
262	</AnalyticsWrapper>
263	} else if (verificationEmailSent) {	×
264	// Clicked Subscribe in one of the other branches, and a confirmation email
265	// was sent. You need to verify your email address to complete the subscription.
266	const yourEmail = currentUser && getUserEmail(currentUser)	×
267	return <AnalyticsWrapper branch="needs-email-verification-subscribed-in-other-branch">	×
268	<div className={classes.message}>
269	We sent an email to {yourEmail}. Follow the link in the email to complete your subscription.
270	</div>
271	</AnalyticsWrapper>
272	} else if (!currentUser \|\| adminBranch===0) {	×
273	// Not logged in. Show a create-account form and a brief pitch.
274	const subscribeTextNode = isEAForum ? eaForumSubscribePrompt : (	×
275	<div className={classes.message}>
276	To get the best posts emailed to you, create an account! {subscriptionDescription}
277	</div>
278	);
279	return <AnalyticsWrapper branch="logged-out">	×
280	{subscribeTextNode}
281	{isEAForum ? <form action={eaForumDigestSubscribeURL} method="post" className={classes.digestForm}>	×
282	<TextField label="Email address" name="EMAIL" required className={classes.digestFormInput} />
283	<Button variant="contained" type="submit" color="primary" className={classes.digestFormSubmitBtn}>
284	Sign up
285	</Button>
286	</form> : <div className={classes.loginForm}>
287	<LoginForm startingState="signup" />
288	</div>}
289	{adminUiMessage}
290	</AnalyticsWrapper>
291	} else if (!userHasEmailAddress(currentUser) \|\| adminBranch===1) {	×
292	const emailType = isEAForum ? 'our weekly digest email' : 'curated posts';	×
293	// Logged in, but no email address associated. Probably a legacy account.
294	// Show a text box for an email address, with a submit button and a subscribe
295	// checkbox.
296	return <AnalyticsWrapper branch="missing-email">	×
297	<div className={classes.message}>
298	Your account does not have an email address associated. Add an email address to subscribe to {emailType} and enable notifications.
299	</div>
300
301	<Input placeholder="Email address" inputRef={emailAddressInput} className={classes.emailInput} />
302	<SignupSubscribeToCurated defaultValue={true} onChange={(checked: boolean) => setSubscribeChecked(true)}/>	×
303
304	<div className={classes.buttons}>
305	<Button className={classes.subscribeButton} onClick={async (ev) => {
306	const emailAddress = emailAddressInput.current;	×
307	if (emailAddress && SimpleSchema.RegEx.Email.test(emailAddress?.value)) {	×
308	setLoading(true);	×
309	try {	×
310	// subscribe to different emails based on forum type
311	const userSubscriptionData: Partial<MakeFieldsNullable<DbUser>> = isEAForum ?	×
312	{subscribedToDigest: subscribeChecked} : {emailSubscribedToCurated: subscribeChecked};	×
313	userSubscriptionData.email = emailAddress?.value;	×
314	userSubscriptionData.unsubscribeFromAll = false;	×
315	await updateCurrentUser(userSubscriptionData);	×
316
317	// FIXME I think this should use !userEmailAddressIsVerified(currentUser) (and therefore always bypass on EAF)
UNCOV 318	if (isEAForum) {	×
319	// Confirmation-email mutation is separate from the send-verification-email
320	// mutation because otherwise it goes to the old email address (aka null)
321	await updateCurrentUser({	×
322	whenConfirmationEmailSent: new Date(),
323	});
324	}
325	setSubscriptionConfirmed(true);	×
326	} catch(e) {
327	if (getGraphQLErrorID(e) === "users.email_already_taken") {	×
328	flash("That email address is already taken by a different account.");	×
329	} else {
330	flash(e.message \|\| e.id);	×
331	}
332	}
333	setLoading(false);	×
334	} else {
335	flash("Please enter a valid email address.");	×
336	}
337	captureEvent("subscribeReminderButtonClicked", {buttonType: "subscribeButton"});	×
338	}}>Submit</Button>
339	{adminUiMessage}
340	<div className={classes.buttons}>
341	{maybeLaterButton}
342	{dontAskAgainButton}
343	</div>
344	</div>
345	</AnalyticsWrapper>
346	} else if (currentUser.unsubscribeFromAll \|\| adminBranch===2) {	×
347	// User has clicked unsubscribe-from-all at some point in the past. Pitch
348	// on re-subscribing. A big Subscribe button, which clears the
349	// unsubscribe-from-all option, activates curation emails (if not already
350	// activated), and sends a confirmation email (if needed).
351	const subscribeTextNode = forumTypeSetting.get() === 'EAForum' ? eaForumSubscribePrompt : (	×
352	<div className={classes.message}>
353	You previously unsubscribed from all emails from LessWrong.
354	Re-subscribe to get the best posts emailed to you! {subscriptionDescription}
355	</div>
356	);
357	return <AnalyticsWrapper branch="previously-unsubscribed">	×
358	{subscribeTextNode}
359	<Button className={classes.subscribeButton} onClick={async (ev) => {
360	await updateAndMaybeVerifyEmail();	×
361	captureEvent("subscribeReminderButtonClicked", {buttonType: "subscribeButton"});	×
362	}}>Subscribe</Button>
363	{adminUiMessage}
364	<div className={classes.buttons}>
365	{maybeLaterButton}
366	{dontAskAgainButton}
367	</div>
368	</AnalyticsWrapper>
369	} else if (!currentUserSubscribed \|\| adminBranch===3) {	×
370	// User is logged in, and has an email address associated with their
371	// account, but is not subscribed to curated posts. A Subscribe button which
372	// sets the subscribe-to-curated option, and (if their email address isn't
373	// verified) resends the verification email.
374	const subscribeTextNode = forumTypeSetting.get() === 'EAForum' ? eaForumSubscribePrompt : (	×
375	<div className={classes.message}>
376	Subscribe to get the best of LessWrong emailed to you. {subscriptionDescription}
377	</div>
378	);
379	return <AnalyticsWrapper branch="logged-in-not-subscribed">	×
380	{subscribeTextNode}
381	<Button className={classes.subscribeButton} onClick={async (ev) => {
382	await updateAndMaybeVerifyEmail();	×
383	captureEvent("subscribeReminderButtonClicked", {buttonType: "subscribeButton"});	×
384	}}>Subscribe</Button>
385	{adminUiMessage}
386	<div className={classes.buttons}>
387	{maybeLaterButton}
388	{dontAskAgainButton}
389	</div>
390	</AnalyticsWrapper>
391
NEW 392	} else if (!userEmailAddressIsVerified(currentUser) \|\| adminBranch===4) {	×
393	// User is subscribed, but they haven't verified their email address. Show
394	// a resend-verification-email button.
395	return <AnalyticsWrapper branch="needs-email-verification">	×
396	<div>
397	<div className={classes.message}>
398	Please verify your email address to activate your subscription to curated posts.
399	</div>
400	<div className={classes.buttons}>
401	<Button className={classes.subscribeButton} onClick={async (ev) => {
402	setLoading(true);	×
403	try {	×
404	await updateCurrentUser({	×
405	whenConfirmationEmailSent: new Date()
406	});
407	} catch(e) {
408	flash(getGraphQLErrorMessage(e));	×
409	}
410	setLoading(false);	×
411	setVerificationEmailSent(true);	×
412	captureEvent("subscribeReminderButtonClicked", {buttonType: "resendVerificationEmailButton"});	×
413	}}>Resend Verification Email</Button>
414	{adminUiMessage}
415	<div className={classes.buttons}>
416	{maybeLaterButton}
417	{dontAskAgainButton}
418	</div>
419	</div>
420	</div>
421	</AnalyticsWrapper>
422	} else {
423	// Everything looks good-already subscribed to curated. No need to show anything.
424	return null;	×
425	}
426	}
427
428	const RecentDiscussionSubscribeReminderComponent = registerComponent(	1✔
429	'RecentDiscussionSubscribeReminder', RecentDiscussionSubscribeReminder, {
430	styles,
431	hocs: [withErrorBoundary],
432	}
433	);
434
435	declare global {
436	interface ComponentTypes {
437	RecentDiscussionSubscribeReminder: typeof RecentDiscussionSubscribeReminderComponent,
438	}
439	}

ForumMagnum / ForumMagnum / 9981698366

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