Skip to content

Mp 392 update preference subscriptions #975

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 5, 2024
Merged

Mp 392 update preference subscriptions #975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d20dbb5
Removes Mailchimp email subscription preferences pending Hubspot inte…
testflyjets Mar 27, 2024
0b8fb1e
Cleans up linter errors
testflyjets Mar 28, 2024
a6bc1e8
MP-392 lint clean up
kkartunov Mar 28, 2024
7468a23
Temporarily turns off no-unused-vars eslint rule
testflyjets Mar 28, 2024
05c5b38
Merge branch 'MP-392-update-preference-subscriptions' of github.com:t…
testflyjets Mar 28, 2024
6feeca0
Turns eslint no-unused-vars rule back on
testflyjets Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,9 @@ You will need to add the following line to your hosts file. The hosts file is no

3. Go to https://local.topcoder-dev.com

>**NOTE**: The site must run on port 443 in order for auth0 to work and for the site to load properly. Mac users will need to run the app with elevated permissions.
>**NOTE**: The site must run on port 443 in order for auth0 to work and for the site to load properly. Mac users will need to run the app with elevated permissions, as in:

>% sudo yarn start

Run following command to allow node to run apps on ports lowert than 500:

Expand Down
118 changes: 9 additions & 109 deletions src/apps/accounts/src/settings/tabs/preferences/PreferencesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,28 @@
/* eslint-disable max-len */
import { FC } from 'react'
import { bind } from 'lodash'
import { toast } from 'react-toastify'

import { MemberEmailPreferenceAPI, updateMemberEmailPreferencesAsync, useMemberEmailPreferences, UserProfile } from '~/libs/core'
import { Button, FormToggleSwitch, LoadingSpinner } from '~/libs/ui'
import { Button } from '~/libs/ui'
import { EnvironmentConfig } from '~/config'

import { EmailIcon, ForumIcon, SettingSection, triggerSurvey } from '../../../lib'
import { ForumIcon, SettingSection } from '../../../lib'

import { newsletters, programs, subscribeLink, unsubscribeLink } from './preferences.config'
import styles from './PreferencesTab.module.scss'

interface PreferencesTabProps {
profile: UserProfile
}

const PreferencesTab: FC<PreferencesTabProps> = (props: PreferencesTabProps) => {
const { data: emailPreferences, mutate: mutateEmailPreferencesData }: MemberEmailPreferenceAPI
= useMemberEmailPreferences(props.profile.email)

const mailChimpFormAction: string = emailPreferences?.status === 'subscribed' ? unsubscribeLink : subscribeLink

const PreferencesTab: FC<any> = () => {
function handleGoToForumPreferences(): void {
window.open(`https://${EnvironmentConfig.ENV === 'prod' ? 'discussions' : 'vanilla'}.${EnvironmentConfig.TC_DOMAIN}/profile/preferences`, '_blank')
}

function handleSubscribtionStatusChange(): void {
if (emailPreferences?.status === 'subscribed') {
window.open(unsubscribeLink, '_self')
} else {
window.open(subscribeLink, '_self')
}
}

function handleUserEmailPreferencesChange(id: string): void {
updateMemberEmailPreferencesAsync(props.profile.email, {
interests: {
[id]: !emailPreferences?.interests[id],
},
})
.then(() => {
toast.success('Your email preferences ware updated.')
mutateEmailPreferencesData()
triggerSurvey()
})
.catch(() => {
toast.error('Something went wrong. Please try again later.')
})
window.open(
`https://${
EnvironmentConfig.ENV === 'prod' ? 'discussions' : 'vanilla'
}.${EnvironmentConfig.TC_DOMAIN}/profile/preferences`,
'_blank',
)
}

return (
<div className={styles.container}>
<h3>PLATFORM PREFERENCES</h3>

<div className={styles.content}>
{
!!emailPreferences ? (
<>
<SettingSection
leftElement={(
<div className={styles.imageWrap}>
<EmailIcon />
</div>
)}
title={
emailPreferences.status === 'subscribed'
? 'You Are Currently Subscribed To Receive Topcoder Emails'
: 'You Are Not Subscribed To Receive Topcoder Emails'
}
// eslint-disable-next-line max-len
infoText={
emailPreferences.status === 'subscribed'
? 'If this was a mistake or if you would like to unsubscribe, please click the “Unsubscribe” button.'
: 'If you would like to subscribe to receive Topcoder emails, please click the “Subscribe” button.'
}
actionElement={(
<div className={styles.subAction}>
<form action={mailChimpFormAction} method='post' id='mc-embedded-subscribe-form' name='mc-embedded-subscribe-form' noValidate>
<input type='email' value={props.profile.email} readOnly name='EMAIL' id='mce-EMAIL' />
<input type='checkbox' id='gdpr_11101' name='gdpr[11101]' value='Y' readOnly />
<input type='text' name='b_65bd5a1857b73643aad556093_28bfd3c062' value='' readOnly />
<Button
label={emailPreferences.status === 'subscribed' ? 'Unsubscribe' : 'Subscribe'}
secondary
size='lg'
onClick={handleSubscribtionStatusChange}
type='submit'
/>
</form>
</div>
)}
/>

{
emailPreferences.status === 'subscribed' && (
<>
{
newsletters.concat(programs)
.map(preference => (
<SettingSection
key={preference.id}
title={preference.name}
infoText={preference.desc}
actionElement={(
<FormToggleSwitch
name={preference.id}
onChange={bind(handleUserEmailPreferencesChange, this, preference.id)}
value={emailPreferences.interests[preference.id]}
/>
)}
/>
))
}
</>
)
}
</>
) : (
<LoadingSpinner hide={!!emailPreferences} overlay />
)
}

<SettingSection
leftElement={(
<div className={styles.imageWrap}>
Expand All @@ -140,7 +41,6 @@ const PreferencesTab: FC<PreferencesTabProps> = (props: PreferencesTabProps) =>
/>
)}
/>

</div>
</div>
)
Expand Down