Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 4b145c7

Browse files
author
vikasrohit
committed
AS#118090147171050, Email settings tab UI
-- Added settings tab with required functionality
1 parent 3771459 commit 4b145c7

File tree

8 files changed

+259
-6
lines changed

8 files changed

+259
-6
lines changed

‎app/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ require('../assets/css/sitemap/sitemap.scss')
6363
require('../assets/css/settings/update-password.scss')
6464
require('../assets/css/settings/settings.scss')
6565
require('../assets/css/settings/preferences.scss')
66+
require('../assets/css/settings/email.scss')
6667
require('../assets/css/settings/edit-profile.scss')
6768
require('../assets/css/settings/account-info.scss')
6869
require('../assets/css/profile/subtrack.scss')

‎app/services/mailchimp.service.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,22 @@ import angular from 'angular'
4040
}
4141

4242

43-
function addSubscription(user) {
43+
function addSubscription(user, preferences) {
4444
var subscription = {
4545
userId: user.userId,
4646
firstName: user.firstName,
4747
lastName: user.lastName,
4848
interests: {}
4949
}
50-
subscription.interests[CONSTANTS.MAILCHIMP_NL_TCO] = true
51-
subscription.interests[CONSTANTS.MAILCHIMP_NL_IOS] = true
52-
subscription.interests[CONSTANTS.MAILCHIMP_NL_DEV] = true
53-
subscription.interests[CONSTANTS.MAILCHIMP_NL_DESIGN] = true
54-
subscription.interests[CONSTANTS.MAILCHIMP_NL_DATA] = true
50+
if (!preferences) {
51+
subscription.interests[CONSTANTS.MAILCHIMP_NL_TCO] = true
52+
subscription.interests[CONSTANTS.MAILCHIMP_NL_IOS] = true
53+
subscription.interests[CONSTANTS.MAILCHIMP_NL_DEV] = true
54+
subscription.interests[CONSTANTS.MAILCHIMP_NL_DESIGN] = true
55+
subscription.interests[CONSTANTS.MAILCHIMP_NL_DATA] = true
56+
} else {
57+
subscription.interests = preferences
58+
}
5559
return $q(function(resolve, reject) {
5660
mailchimpApi.one('mailchimp/lists', CONSTANTS.MAILCHIMP_LIST_ID)
5761
.customPUT(subscription, 'members')

‎app/settings/email/email.controller.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import angular from 'angular'
2+
import _ from 'lodash'
3+
4+
(function () {
5+
'use strict'
6+
7+
angular.module('tc.settings').controller('EmailSettingsController', EmailSettingsController)
8+
9+
EmailSettingsController.$inject = ['$rootScope', 'userProfile', 'ProfileService', 'MailchimpService', 'logger', 'CONSTANTS', 'toaster', '$q', '$scope']
10+
11+
function EmailSettingsController($rootScope, userProfile, ProfileService, MailchimpService, logger, CONSTANTS, toaster, $q, $scope) {
12+
var vm = this
13+
vm.loading = false
14+
vm.saving = false
15+
vm.isDirty = isDirty
16+
vm.save = save
17+
18+
activate()
19+
20+
function activate() {
21+
vm.newsletters = [
22+
{
23+
id: CONSTANTS.MAILCHIMP_NL_DEV,
24+
name: 'Developer Newsletter',
25+
desc: 'Software architecture, component assembly, application development and bug hunting',
26+
enabled: false,
27+
dirty: false
28+
},
29+
{
30+
id: CONSTANTS.MAILCHIMP_NL_DESIGN,
31+
name: 'Design Newsletter',
32+
desc: 'Website, mobile, and product design; UI and UX',
33+
enabled: false,
34+
dirty: false
35+
},
36+
{
37+
id: CONSTANTS.MAILCHIMP_NL_DATA,
38+
name: 'Data Science Newsletter',
39+
desc: 'Algorithm and data structures, statistical analysis',
40+
enabled: false,
41+
dirty: false
42+
},
43+
{
44+
id: CONSTANTS.MAILCHIMP_NL_TCO,
45+
name: 'TCO Newsletter',
46+
desc: 'Software architecture, component assembly, application development and bug hunting',
47+
enabled: false,
48+
dirty: false
49+
},
50+
{
51+
id: CONSTANTS.MAILCHIMP_NL_IOS,
52+
name: 'iOS Community Newsletter',
53+
desc: 'Software architecture, component assembly, application development and bug hunting',
54+
enabled: false,
55+
dirty: false
56+
}
57+
]
58+
59+
vm.loading = true
60+
MailchimpService.getMemberSubscription(userProfile).then(function(resp) {
61+
vm.loading = false
62+
if (resp.interests) {
63+
vm.newsletters.forEach(function(newsletter) {
64+
if (resp.interests[newsletter.id]) {
65+
newsletter.enabled = true
66+
}
67+
})
68+
}
69+
})
70+
}
71+
72+
function isDirty() {
73+
var dirty = false
74+
vm.newsletters.forEach(function(newsletter) {
75+
if (newsletter.dirty){
76+
dirty = true
77+
}
78+
})
79+
return dirty
80+
}
81+
82+
function save() {
83+
vm.saving = true
84+
var preferences = {}
85+
vm.newsletters.forEach(function(newsletter) {
86+
preferences[newsletter.id] = newsletter.enabled
87+
})
88+
MailchimpService.addSubscription(userProfile, preferences).then(function(resp) {
89+
vm.loading = false
90+
vm.saving = false
91+
// reset dirty state for all newsletter options
92+
vm.newsletters.forEach(function(newsletter) {
93+
newsletter.dirty = false
94+
})
95+
toaster.pop('success', 'Success!', 'Preferences updated.')
96+
}).catch(function(err) {
97+
logger.error('Could not update email preferences', err)
98+
vm.loading = false
99+
vm.saving = false
100+
101+
toaster.pop('error', 'Whoops!', 'Something went wrong. Please try again later.')
102+
})
103+
}
104+
}
105+
})()

‎app/settings/email/email.jade

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.email-preferences-container
2+
.settings-section.newsletters
3+
.section-info
4+
h2 Always be up to date
5+
.description Select the email notifications that you'd like to receive. We send them once every week, so you can be up to date with latest news, events and callenges.
6+
7+
.section-fields
8+
.processing(ng-show="vm.loading")
9+
i.fa.fa-spinner.fa-spin
10+
.newsletters(ng-hide="vm.loading")
11+
.newsletter(ng-repeat="newsletter in vm.newsletters")
12+
13+
.content(ng-class="{ disabled: !newsletter.enabled }")
14+
.newsletter-details
15+
.text
16+
span.title {{newsletter.name}}
17+
.description
18+
span(ng-bind="newsletter.desc")
19+
20+
.onoffswitch
21+
input.onoffswitch-checkbox(type='checkbox', name='onoffswitch', checked='', ng-model="newsletter.enabled", id="{{newsletter.name}}-onoffswitch", ng-change="newsletter.dirty = !newsletter.dirty")
22+
label.onoffswitch-label(for='{{newsletter.name}}-onoffswitch')
23+
span.onoffswitch-inner
24+
span.onoffswitch-switch
25+
.save-section
26+
button.tc-btn.tc-btn-l.done-button(
27+
type="button",
28+
tc-busy-button, tc-busy-when="vm.saving",
29+
ng-click="vm.save()",
30+
ng-disabled="!vm.isDirty()") Save

‎app/settings/settings.jade

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
li
1111
a(ui-sref="settings.account", ui-sref-active="active-tab") Account
1212

13+
li
14+
a(ui-sref="settings.email", ui-sref-active="active-tab") Email
15+
1316
li
1417
a(ui-sref="settings.preferences", ui-sref-active="active-tab") Preferences
1518

‎app/settings/settings.routes.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,23 @@ import angular from 'angular'
4747
title: 'Account Info'
4848
}
4949
},
50+
'settings.email': {
51+
url: 'email/',
52+
template: require('./email/email')(),
53+
controller: 'EmailSettingsController',
54+
controllerAs: 'vm',
55+
data: {
56+
title: 'Email Preferences'
57+
},
58+
resolve: {
59+
userIdentity: ['UserService', function(UserService) {
60+
return UserService.getUserIdentity()
61+
}],
62+
userProfile: ['userIdentity', 'ProfileService', function(userIdentity, ProfileService) {
63+
return ProfileService.getUserProfile(userIdentity.handle.toLowerCase())
64+
}]
65+
}
66+
},
5067
'settings.preferences': {
5168
url: 'preferences/',
5269
template: require('./preferences/preferences')(),

‎app/topcoder.constants.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ angular.module('CONSTANTS', []).constant('CONSTANTS', {
2121
'SWIFT_PROGRAM_URL' : process.env.SWIFT_PROGRAM_URL,
2222
'TCO16_URL' : process.env.TCO16_URL,
2323
'MAILCHIMP_LIST_ID' : process.env.MAILCHIMP_LIST_ID,
24+
'MAILCHIMP_NL_CATEGORY_ID': process.env.MAILCHIMP_NL_CATEGORY_ID,
2425
'MAILCHIMP_NL_TCO' : process.env.MAILCHIMP_NL_TCO,
2526
'MAILCHIMP_NL_IOS' : process.env.MAILCHIMP_NL_IOS,
2627
'MAILCHIMP_NL_DEV' : process.env.MAILCHIMP_NL_DEV,

‎assets/css/settings/email.scss

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@import 'topcoder/tc-includes';
2+
3+
.email-preferences-container {
4+
width: 100%;
5+
padding: 0 60px 30px;
6+
7+
.processing {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
}
12+
13+
.newsletters {
14+
.newsletter {
15+
width: 100%;
16+
display: flex;
17+
flex-direction: column;
18+
align-items: left;
19+
20+
.content {
21+
display: flex;
22+
flex-direction: row;
23+
justify-content: space-between;
24+
padding: 15px 0;
25+
border-bottom: 1px solid $gray-light;
26+
width: 100%;
27+
transition: background-color .15s;
28+
29+
&.disabled {
30+
background-color: $gray-lightest;
31+
}
32+
33+
.newsletter-details {
34+
display: flex;
35+
flex-direction: row;
36+
align-items: center;
37+
padding-left: 10px;
38+
39+
.icon {
40+
&.disabled {
41+
color: #b7b7b7;
42+
}
43+
img {
44+
height: 32px;
45+
width: 32px;
46+
}
47+
span {
48+
@include font-with-weight('Sofia Pro', 500);
49+
font-size: 16px;
50+
}
51+
}
52+
}
53+
}
54+
.text {
55+
margin-left: 15px;
56+
.title {
57+
font-size: 16px;
58+
line-height: 28px;
59+
@include sofia-pro-medium;
60+
text-transform: uppercase;
61+
transition: .1s color;
62+
&.disabled {
63+
color: #b7b7b7;
64+
}
65+
}
66+
.description {
67+
@include merriweather-sans-regular;
68+
font-size: 13px;
69+
margin-top: 4px;
70+
color: $accent-gray;
71+
}
72+
}
73+
}
74+
}
75+
76+
.save-section {
77+
width: 100%;
78+
margin: 0 auto;
79+
background-color: #fcfcfc;
80+
border-top: 1px solid #f0f0f0;
81+
display: flex;
82+
flex-direction: column;
83+
justify-content: center;
84+
align-items: center;
85+
86+
button.save {
87+
margin-bottom: 15px;
88+
margin-top: 15px;
89+
width: 100px;
90+
}
91+
}
92+
}

0 commit comments

Comments
 (0)