11/* eslint-disable max-len */
22import { FC } from 'react'
3- import { bind } from 'lodash'
4- import { toast } from 'react-toastify'
53
6- import { MemberEmailPreferenceAPI , updateMemberEmailPreferencesAsync , useMemberEmailPreferences , UserProfile } from '~/libs/core'
7- import { Button , FormToggleSwitch , LoadingSpinner } from '~/libs/ui'
4+ import { Button } from '~/libs/ui'
85import { EnvironmentConfig } from '~/config'
96
10- import { EmailIcon , ForumIcon , SettingSection , triggerSurvey } from '../../../lib'
7+ import { ForumIcon , SettingSection } from '../../../lib'
118
12- import { newsletters , programs , subscribeLink , unsubscribeLink } from './preferences.config'
139import styles from './PreferencesTab.module.scss'
1410
15- interface PreferencesTabProps {
16- profile : UserProfile
17- }
18-
19- const PreferencesTab : FC < PreferencesTabProps > = ( props : PreferencesTabProps ) => {
20- const { data : emailPreferences , mutate : mutateEmailPreferencesData } : MemberEmailPreferenceAPI
21- = useMemberEmailPreferences ( props . profile . email )
22-
23- const mailChimpFormAction : string = emailPreferences ?. status === 'subscribed' ? unsubscribeLink : subscribeLink
24-
11+ const PreferencesTab : FC < any > = ( ) => {
2512 function handleGoToForumPreferences ( ) : void {
26- window . open ( `https://${ EnvironmentConfig . ENV === 'prod' ? 'discussions' : 'vanilla' } .${ EnvironmentConfig . TC_DOMAIN } /profile/preferences` , '_blank' )
27- }
28-
29- function handleSubscribtionStatusChange ( ) : void {
30- if ( emailPreferences ?. status === 'subscribed' ) {
31- window . open ( unsubscribeLink , '_self' )
32- } else {
33- window . open ( subscribeLink , '_self' )
34- }
35- }
36-
37- function handleUserEmailPreferencesChange ( id : string ) : void {
38- updateMemberEmailPreferencesAsync ( props . profile . email , {
39- interests : {
40- [ id ] : ! emailPreferences ?. interests [ id ] ,
41- } ,
42- } )
43- . then ( ( ) => {
44- toast . success ( 'Your email preferences ware updated.' )
45- mutateEmailPreferencesData ( )
46- triggerSurvey ( )
47- } )
48- . catch ( ( ) => {
49- toast . error ( 'Something went wrong. Please try again later.' )
50- } )
13+ window . open (
14+ `https://${
15+ EnvironmentConfig . ENV === 'prod' ? 'discussions' : 'vanilla'
16+ } .${ EnvironmentConfig . TC_DOMAIN } /profile/preferences`,
17+ '_blank' ,
18+ )
5119 }
5220
5321 return (
5422 < div className = { styles . container } >
5523 < h3 > PLATFORM PREFERENCES</ h3 >
5624
5725 < div className = { styles . content } >
58- {
59- ! ! emailPreferences ? (
60- < >
61- < SettingSection
62- leftElement = { (
63- < div className = { styles . imageWrap } >
64- < EmailIcon />
65- </ div >
66- ) }
67- title = {
68- emailPreferences . status === 'subscribed'
69- ? 'You Are Currently Subscribed To Receive Topcoder Emails'
70- : 'You Are Not Subscribed To Receive Topcoder Emails'
71- }
72- // eslint-disable-next-line max-len
73- infoText = {
74- emailPreferences . status === 'subscribed'
75- ? 'If this was a mistake or if you would like to unsubscribe, please click the “Unsubscribe” button.'
76- : 'If you would like to subscribe to receive Topcoder emails, please click the “Subscribe” button.'
77- }
78- actionElement = { (
79- < div className = { styles . subAction } >
80- < form action = { mailChimpFormAction } method = 'post' id = 'mc-embedded-subscribe-form' name = 'mc-embedded-subscribe-form' noValidate >
81- < input type = 'email' value = { props . profile . email } readOnly name = 'EMAIL' id = 'mce-EMAIL' />
82- < input type = 'checkbox' id = 'gdpr_11101' name = 'gdpr[11101]' value = 'Y' readOnly />
83- < input type = 'text' name = 'b_65bd5a1857b73643aad556093_28bfd3c062' value = '' readOnly />
84- < Button
85- label = { emailPreferences . status === 'subscribed' ? 'Unsubscribe' : 'Subscribe' }
86- secondary
87- size = 'lg'
88- onClick = { handleSubscribtionStatusChange }
89- type = 'submit'
90- />
91- </ form >
92- </ div >
93- ) }
94- />
95-
96- {
97- emailPreferences . status === 'subscribed' && (
98- < >
99- {
100- newsletters . concat ( programs )
101- . map ( preference => (
102- < SettingSection
103- key = { preference . id }
104- title = { preference . name }
105- infoText = { preference . desc }
106- actionElement = { (
107- < FormToggleSwitch
108- name = { preference . id }
109- onChange = { bind ( handleUserEmailPreferencesChange , this , preference . id ) }
110- value = { emailPreferences . interests [ preference . id ] }
111- />
112- ) }
113- />
114- ) )
115- }
116- </ >
117- )
118- }
119- </ >
120- ) : (
121- < LoadingSpinner hide = { ! ! emailPreferences } overlay />
122- )
123- }
124-
12526 < SettingSection
12627 leftElement = { (
12728 < div className = { styles . imageWrap } >
@@ -140,7 +41,6 @@ const PreferencesTab: FC<PreferencesTabProps> = (props: PreferencesTabProps) =>
14041 />
14142 ) }
14243 />
143-
14444 </ div >
14545 </ div >
14646 )
0 commit comments