9982003309

Committed 17 Jul 2024 09:53PM UTC coverage: 31.865% (-0.05%) from 31.911%

Build # 9982003309

Build Type

Pull #9517

github

Committed by

Will-Howard

Commit Message

remove redundant assumeUserEmailVerifiedSetting

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

Run Details

4907 of 40391 branches covered (12.15%)

Branch coverage included in aggregate %.

4 of 9 new or added lines in 6 files covered. (44.44%)

1 existing line in 1 file now uncovered.

28711 of 65109 relevant lines covered (44.1%)

179.97 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;

    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);

              if (!userEmailAddressIsVerified(currentUser)) {
                // 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
NEW 204	if (!userEmailAddressIsVerified(currentUser)) {	×
205	userSubscriptionData.whenConfirmationEmailSent = new Date();	×
206	}
207
208	try {	×
209	await updateCurrentUser(userSubscriptionData);	×
210	setSubscriptionConfirmed(true);	×
211	} catch(e) {
212	flash(getGraphQLErrorMessage(e));	×
213	}
214
215	setLoading(false);	×
216	}
217
218	const AnalyticsWrapper = ({children, branch}: {children: React.ReactNode, branch: string}) => {	×
219	return <AnalyticsContext pageElementContext="subscribeReminder" branch={branch}>	×
220	<AnalyticsInViewTracker eventProps={{inViewType: "subscribeReminder"}}>
221	<div className={classes.root}>
222	{children}
223	</div>
224	</AnalyticsInViewTracker>
225	</AnalyticsContext>
226	}
227
228	// the EA Forum uses this prompt in most cases
229	const eaForumSubscribePrompt = (
230	<>	×
231	<div className={classes.message}>
232	<MailOutline className={classes.mailIcon} />
233	Sign up for the Forum's email digest
234	</div>
235	<div className={classes.messageDescription}>
236	You'll get a weekly email with the best posts from the past week.
237	The Forum team selects the posts to feature based on personal preference
238	and Forum popularity, and also adds some announcements and a classic post.
239	</div>
240	</>
241	);
242
243	if (loading) {	×
244	return <div className={classes.root}>	×
245	<Loading/>
246	</div>
247	} else if (subscriptionConfirmed) {	×
248	// Show the confirmation after the user subscribes
249	let confirmText;
250	if (isLW) {	×
251	confirmText = "You are subscribed to the best posts of LessWrong!";	×
252	} else {
253	confirmText = `You are subscribed to the ${forumTitleSetting} Digest`;	×
254	}
255	return <AnalyticsWrapper branch="already-subscribed">	×
256	<div className={classes.message}>
257	<CheckRounded className={classes.checkIcon} />
258	{confirmText}
259	</div>
260	</AnalyticsWrapper>
261	} else if (verificationEmailSent) {	×
262	// Clicked Subscribe in one of the other branches, and a confirmation email
263	// was sent. You need to verify your email address to complete the subscription.
264	const yourEmail = currentUser && getUserEmail(currentUser)	×
265	return <AnalyticsWrapper branch="needs-email-verification-subscribed-in-other-branch">	×
266	<div className={classes.message}>
267	We sent an email to {yourEmail}. Follow the link in the email to complete your subscription.
268	</div>
269	</AnalyticsWrapper>
270	} else if (!currentUser \|\| adminBranch===0) {	×
271	// Not logged in. Show a create-account form and a brief pitch.
272	const subscribeTextNode = isEAForum ? eaForumSubscribePrompt : (	×
273	<div className={classes.message}>
274	To get the best posts emailed to you, create an account! {subscriptionDescription}
275	</div>
276	);
277	return <AnalyticsWrapper branch="logged-out">	×
278	{subscribeTextNode}
279	{isEAForum ? <form action={eaForumDigestSubscribeURL} method="post" className={classes.digestForm}>	×
280	<TextField label="Email address" name="EMAIL" required className={classes.digestFormInput} />
281	<Button variant="contained" type="submit" color="primary" className={classes.digestFormSubmitBtn}>
282	Sign up
283	</Button>
284	</form> : <div className={classes.loginForm}>
285	<LoginForm startingState="signup" />
286	</div>}
287	{adminUiMessage}
288	</AnalyticsWrapper>
289	} else if (!userHasEmailAddress(currentUser) \|\| adminBranch===1) {	×
290	const emailType = isEAForum ? 'our weekly digest email' : 'curated posts';	×
291	// Logged in, but no email address associated. Probably a legacy account.
292	// Show a text box for an email address, with a submit button and a subscribe
293	// checkbox.
294	return <AnalyticsWrapper branch="missing-email">	×
295	<div className={classes.message}>
296	Your account does not have an email address associated. Add an email address to subscribe to {emailType} and enable notifications.
297	</div>
298
299	<Input placeholder="Email address" inputRef={emailAddressInput} className={classes.emailInput} />
300	<SignupSubscribeToCurated defaultValue={true} onChange={(checked: boolean) => setSubscribeChecked(true)}/>	×
301
302	<div className={classes.buttons}>
303	<Button className={classes.subscribeButton} onClick={async (ev) => {
304	const emailAddress = emailAddressInput.current;	×
305	if (emailAddress && SimpleSchema.RegEx.Email.test(emailAddress?.value)) {	×
306	setLoading(true);	×
307	try {	×
308	// subscribe to different emails based on forum type
309	const userSubscriptionData: Partial<MakeFieldsNullable<DbUser>> = isEAForum ?	×
310	{subscribedToDigest: subscribeChecked} : {emailSubscribedToCurated: subscribeChecked};	×
311	userSubscriptionData.email = emailAddress?.value;	×
312	userSubscriptionData.unsubscribeFromAll = false;	×
313	await updateCurrentUser(userSubscriptionData);	×
314
NEW 315	if (!userEmailAddressIsVerified(currentUser)) {	×
316	// Confirmation-email mutation is separate from the send-verification-email
317	// mutation because otherwise it goes to the old email address (aka null)
318	await updateCurrentUser({	×
319	whenConfirmationEmailSent: new Date(),
320	});
321	}
322	setSubscriptionConfirmed(true);	×
323	} catch(e) {
324	if (getGraphQLErrorID(e) === "users.email_already_taken") {	×
325	flash("That email address is already taken by a different account.");	×
326	} else {
327	flash(e.message \|\| e.id);	×
328	}
329	}
330	setLoading(false);	×
331	} else {
332	flash("Please enter a valid email address.");	×
333	}
334	captureEvent("subscribeReminderButtonClicked", {buttonType: "subscribeButton"});	×
335	}}>Submit</Button>
336	{adminUiMessage}
337	<div className={classes.buttons}>
338	{maybeLaterButton}
339	{dontAskAgainButton}
340	</div>
341	</div>
342	</AnalyticsWrapper>
343	} else if (currentUser.unsubscribeFromAll \|\| adminBranch===2) {	×
344	// User has clicked unsubscribe-from-all at some point in the past. Pitch
345	// on re-subscribing. A big Subscribe button, which clears the
346	// unsubscribe-from-all option, activates curation emails (if not already
347	// activated), and sends a confirmation email (if needed).
348	const subscribeTextNode = forumTypeSetting.get() === 'EAForum' ? eaForumSubscribePrompt : (	×
349	<div className={classes.message}>
350	You previously unsubscribed from all emails from LessWrong.
351	Re-subscribe to get the best posts emailed to you! {subscriptionDescription}
352	</div>
353	);
354	return <AnalyticsWrapper branch="previously-unsubscribed">	×
355	{subscribeTextNode}
356	<Button className={classes.subscribeButton} onClick={async (ev) => {
357	await updateAndMaybeVerifyEmail();	×
358	captureEvent("subscribeReminderButtonClicked", {buttonType: "subscribeButton"});	×
359	}}>Subscribe</Button>
360	{adminUiMessage}
361	<div className={classes.buttons}>
362	{maybeLaterButton}
363	{dontAskAgainButton}
364	</div>
365	</AnalyticsWrapper>
366	} else if (!currentUserSubscribed \|\| adminBranch===3) {	×
367	// User is logged in, and has an email address associated with their
368	// account, but is not subscribed to curated posts. A Subscribe button which
369	// sets the subscribe-to-curated option, and (if their email address isn't
370	// verified) resends the verification email.
371	const subscribeTextNode = forumTypeSetting.get() === 'EAForum' ? eaForumSubscribePrompt : (	×
372	<div className={classes.message}>
373	Subscribe to get the best of LessWrong emailed to you. {subscriptionDescription}
374	</div>
375	);
376	return <AnalyticsWrapper branch="logged-in-not-subscribed">	×
377	{subscribeTextNode}
378	<Button className={classes.subscribeButton} onClick={async (ev) => {
379	await updateAndMaybeVerifyEmail();	×
380	captureEvent("subscribeReminderButtonClicked", {buttonType: "subscribeButton"});	×
381	}}>Subscribe</Button>
382	{adminUiMessage}
383	<div className={classes.buttons}>
384	{maybeLaterButton}
385	{dontAskAgainButton}
386	</div>
387	</AnalyticsWrapper>
388
NEW 389	} else if (!userEmailAddressIsVerified(currentUser) \|\| adminBranch===4) {	×
390	// User is subscribed, but they haven't verified their email address. Show
391	// a resend-verification-email button.
392	return <AnalyticsWrapper branch="needs-email-verification">	×
393	<div>
394	<div className={classes.message}>
395	Please verify your email address to activate your subscription to curated posts.
396	</div>
397	<div className={classes.buttons}>
398	<Button className={classes.subscribeButton} onClick={async (ev) => {
399	setLoading(true);	×
400	try {	×
401	await updateCurrentUser({	×
402	whenConfirmationEmailSent: new Date()
403	});
404	} catch(e) {
405	flash(getGraphQLErrorMessage(e));	×
406	}
407	setLoading(false);	×
408	setVerificationEmailSent(true);	×
409	captureEvent("subscribeReminderButtonClicked", {buttonType: "resendVerificationEmailButton"});	×
410	}}>Resend Verification Email</Button>
411	{adminUiMessage}
412	<div className={classes.buttons}>
413	{maybeLaterButton}
414	{dontAskAgainButton}
415	</div>
416	</div>
417	</div>
418	</AnalyticsWrapper>
419	} else {
420	// Everything looks good-already subscribed to curated. No need to show anything.
421	return null;	×
422	}
423	}
424
425	const RecentDiscussionSubscribeReminderComponent = registerComponent(	1✔
426	'RecentDiscussionSubscribeReminder', RecentDiscussionSubscribeReminder, {
427	styles,
428	hocs: [withErrorBoundary],
429	}
430	);
431
432	declare global {
433	interface ComponentTypes {
434	RecentDiscussionSubscribeReminder: typeof RecentDiscussionSubscribeReminderComponent,
435	}
436	}

ForumMagnum / ForumMagnum / 9982003309

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