Skip to content

Commit 2fe955f

Browse files
abhishek97abhishek97
committed
add thanks view
1 parent 0ebaee5 commit 2fe955f

File tree

4 files changed

+127
-40
lines changed

4 files changed

+127
-40
lines changed

‎app/pods/components/content-feedback/component.js

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Component from '@ember/component';
22
import { action } from '@ember/object';
33
import { computed } from '@ember/object';
4+
import { restartableTask } from 'ember-concurrency-decorators';
45

56
const BAD_REASONS = [
67
'Could not understand topic.',
@@ -11,22 +12,28 @@ const BAD_REASONS = [
1112
]
1213

1314
const GOOD_REASONS = [
14-
'Concept was convered is best possible manner'
15+
'Great examples used',
16+
'Simple Explanation for Complex Concept',
17+
'Flawless Audio/Visual experience',
18+
'Useful code snippets shared '
1519
]
1620

1721
export default class ContentFeedbackComponent extends Component {
1822
expanded = false
1923
selectedRating = null
24+
selectedReason = null
25+
sayThankYou = false
2026

2127
didReceiveAttrs () {
2228
this._super(...arguments)
23-
this.selectedRating = this.progress
29+
this.selectedRating = this.progress.get('feedback.rating')
30+
this.selectedReason = this.progress.get('feedback.reason')
2431
}
2532

2633
@computed('selectedRating')
2734
get expansionType () {
2835
const rating = this.selectedRating
29-
if (rating === 4 || rating === null)
36+
if (rating === 4 || !rating)
3037
return 'NONE'
3138
else if (rating <= 3)
3239
return 'BAD'
@@ -51,21 +58,35 @@ export default class ContentFeedbackComponent extends Component {
5158
default: return []
5259
}
5360
}
54-
55-
@action
56-
async updateContentFeedback (reason = '') {
57-
// update everything in progress
61+
62+
@restartableTask updateContentFeedbackTask = function *(reason = '') {
5863
const feedback = {
5964
rating: this.selectedRating,
6065
reason
6166
}
6267
this.progress.set('feedback', feedback)
63-
await this.progress.save()
68+
yield this.progress.save()
69+
this.set('sayThankYou', true)
6470
}
6571

6672
@action
6773
toggleExpandedView() {
6874
// this.expanded && this.set('selectedRating', null)
6975
this.toggleProperty('expanded')
7076
}
77+
78+
@action
79+
setRating (value) {
80+
if (value === 4) {
81+
// short circuit flow -> dont wait for reasons; just submit
82+
return this.updateContentFeedbackTask.perform()
83+
}
84+
85+
this.set('selectedRating', value)
86+
}
87+
88+
@action
89+
close () {
90+
this.set('expanded', false)
91+
}
7192
}

‎app/pods/components/content-feedback/template.hbs

Lines changed: 73 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,73 @@
1-
<div class="content-feedback">
1+
<div class="content-feedback {{if this.updateContentFeedbackTask.isRunning 'busy'}}" {{on-click-outside (fn this.close)}}>
22
<div class="cta font-md bold cursor pl-2 py-4" {{on "click" this.toggleExpandedView}} role="button">
33
Give Feedback
44
</div>
55

66
{{#if this.expanded}}
7-
<div class="expanded p-3 d-flex flex-column justify-content-center">
8-
<div class="row font-sm">
9-
<div class="col-12 bold py-2">
10-
How will you rate the video?
11-
</div>
12-
<div class="col-12 py-2">
13-
<RatingBar @scale={{5}} @rating={{this.selectedRating}} @changeRating={{fn (mut this.selectedRating)}} />
14-
</div>
7+
<div class="expanded py-2 px-4 d-flex flex-column justify-content-center">
8+
9+
10+
{{#if this.sayThankYou}}
11+
{{!-- <div class="row font-sm"> --}}
12+
<div class="bold font-mds">
13+
Feedback Submitted
14+
</div>
15+
<div class="py-4 fade-in">
16+
<RatingStarsStatic @rating={{this.selectedRating}} />
17+
</div>
18+
<div class="fade-in">
19+
<div class="bold py-2">
20+
Thank you for the feedback!!!
21+
</div>
22+
This will help us improve quality of our content.
23+
</div>
1524

16-
{{#unless (eq this.expansionType 'NONE') }}
17-
<div class="col-12 bold py-4 fade-in">
18-
<span class="py-3">
19-
{{this.expansionText}}
20-
</span>
21-
22-
{{#each this.expansionReasons as |reason|}}
23-
<div class="py-2">
24-
<label class="radio-container v-align-ma">
25-
<input class="radio" type="radio" name="reason"
26-
checked={{eq this.selectedReason reason}}
27-
onclick={{fn this.updateContentFeedback reason}} />
28-
<span class="checkmark t-smaller"></span>
29-
<span class="font-xs">{{reason}}</span>
30-
</label>
25+
<div class="divider-h bg-white my-4 px-3"></div>
26+
27+
<div class="fade-in">
28+
<div class="bold py-2">
29+
Have any other issues?
3130
</div>
32-
{{/each}}
31+
Contact our support team
32+
at <a class="white" href="mailto:[email protected]"> [email protected] </a>
33+
</div>
34+
35+
{{!-- </div> --}}
36+
{{else}}
37+
<div class="row font-sm">
38+
<div class="col-12 bold py-2">
39+
How will you rate the video?
40+
</div>
41+
<div class="col-12 py-2">
42+
<RatingBar @scale={{5}} @rating={{this.selectedRating}} @changeRating={{fn this.setRating}} />
3343
</div>
34-
{{/unless}}
35-
</div>
44+
45+
{{#if (eq this.expansionType 'NONE') }}
46+
<div class="col-12 bold py-4 fade-in">
47+
Your feedback helps us.
48+
</div>
49+
{{else}}
50+
<div class="col-12 bold py-4 fade-in">
51+
<span class="py-3">
52+
{{this.expansionText}}
53+
</span>
54+
55+
{{#each this.expansionReasons as |reason|}}
56+
<div class="py-2">
57+
<label class="radio-container v-align-ma">
58+
<input class="radio" type="radio" name="reason"
59+
checked={{eq this.selectedReason reason}}
60+
onclick={{perform this.updateContentFeedbackTask reason}} />
61+
<span class="checkmark t-smaller"></span>
62+
<span class="font-xs">{{reason}}</span>
63+
</label>
64+
</div>
65+
{{/each}}
66+
</div>
67+
{{/if}}
68+
</div>
69+
70+
{{/if}}
3671
</div>
3772
{{/if}}
3873

@@ -62,12 +97,21 @@
6297
width: 300px;
6398
height: 400px;
6499
background-color: #393B41;
65-
100+
}
66101
102+
.content-feedback .expanded.busy::before {
103+
content: '';
104+
position: absolute;
105+
display: block;
106+
height: 100%;
107+
width: 100%;
108+
background-color: rgba(0, 0, 0, 0.4);
109+
left:0;
110+
z-index: 2;
67111
}
68112
69113
.fade-in {
70-
animation: fade-in 0.3s ease-in;
114+
animation: fade-in 0.2s ease-in;
71115
}
72116
73117

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"ember-cli-sri": "^2.1.1",
4848
"ember-cli-template-lint": "^1.0.0-beta.3",
4949
"ember-cli-uglify": "^3.0.0",
50+
"ember-click-outside": "^2.0.0-beta.1",
5051
"ember-composable-helpers": "^2.1.0",
5152
"ember-concurrency": "^0.10.0",
5253
"ember-concurrency-decorators": "^1.0.0",

‎yarn.lock

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6086,7 +6086,16 @@ ember-cli@~3.16.0:
60866086
watch-detector "^1.0.0"
60876087
yam "^1.0.0"
60886088

6089-
ember-compatibility-helpers@^1.1.1, ember-compatibility-helpers@^1.1.2, ember-compatibility-helpers@^1.2.0:
6089+
ember-click-outside@^2.0.0-beta.1:
6090+
version "2.0.0-beta.1"
6091+
resolved "https://registry.yarnpkg.com/ember-click-outside/-/ember-click-outside-2.0.0-beta.1.tgz#fe2b5da67432a14547c75aa4514191e46ca4617a"
6092+
integrity sha512-4aBZN42eEUCJdgfe9XeZCptctlZOPnPZIWwUYUkjtx/lnopU6CuapbrcyqaW8R+4Zi4XLKSmrlv1uhONtRfp1Q==
6093+
dependencies:
6094+
ember-cli-babel "^7.18.0"
6095+
ember-cli-htmlbars "^4.2.3"
6096+
ember-modifier "^1.0.3"
6097+
6098+
ember-compatibility-helpers@^1.1.1, ember-compatibility-helpers@^1.1.2, ember-compatibility-helpers@^1.2.0, ember-compatibility-helpers@^1.2.1:
60906099
version "1.2.1"
60916100
resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.1.tgz#87c92c4303f990ff455c28ca39fb3ee11441aa16"
60926101
integrity sha512-6wzYvnhg1ihQUT5yGqnLtleq3Nv5KNv79WhrEuNU9SwR4uIxCO+KpyC7r3d5VI0EM7/Nmv9Nd0yTkzmTMdVG1A==
@@ -6485,6 +6494,18 @@ ember-modifier-manager-polyfill@^1.1.0, ember-modifier-manager-polyfill@^1.2.0:
64856494
ember-cli-version-checker "^2.1.2"
64866495
ember-compatibility-helpers "^1.2.0"
64876496

6497+
ember-modifier@^1.0.3:
6498+
version "1.0.5"
6499+
resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-1.0.5.tgz#b0152a4b81b72debbff48ff75f0ff0959afa1df2"
6500+
integrity sha512-bOqWyp6bEa8i/2c2Gay6b9CVB7CAROg2UuX+C3eDMOdGUEzrsBZ5ENul5zF4RHey2RuAqZ/qvQpY/85R2fQ94A==
6501+
dependencies:
6502+
ember-cli-babel "^7.11.1"
6503+
ember-cli-is-package-missing "^1.0.0"
6504+
ember-cli-normalize-entity-name "^1.0.0"
6505+
ember-cli-string-utils "^1.1.0"
6506+
ember-compatibility-helpers "^1.2.1"
6507+
ember-modifier-manager-polyfill "^1.2.0"
6508+
64886509
ember-moment@^7.7.0:
64896510
version "7.8.1"
64906511
resolved "https://registry.yarnpkg.com/ember-moment/-/ember-moment-7.8.1.tgz#6f77cf941d1a92e231b2f4b810e113b2fae50c5f"
@@ -6512,9 +6533,9 @@ ember-monaco@^1.1.0:
65126533
rollup-plugin-commonjs "^9.2.0"
65136534
rollup-plugin-node-resolve "^4.0.0"
65146535

6515-
"ember-one-way-controls@git+https://github.com/marxsk/ember-one-way-controls.git":
6536+
"ember-one-way-controls@https://github.com/marxsk/ember-one-way-controls.git":
65166537
version "3.1.0"
6517-
resolved "git+https://github.com/marxsk/ember-one-way-controls.git#09427eeaeb57eeb7c280b821d95b9ae0735677de"
6538+
resolved "https://github.com/marxsk/ember-one-way-controls.git#09427eeaeb57eeb7c280b821d95b9ae0735677de"
65186539
dependencies:
65196540
ember-cli-babel "^6.0.0"
65206541
ember-cli-htmlbars "^2.0.1"

0 commit comments

Comments
 (0)