[NEW] Add Feedback form

package.json

@@ -70,6 +70,7 @@
 		"@rocket.chat/sdk": "^1.0.0-alpha.29",
 		"date-fns": "^2.4.1",
 		"desvg": "^1.0.2",
+		"emoji-mart": "^3.0.0",
 		"fast-async": "^6.3.8",
 		"history": "^4.7.2",
 		"i18n": "^0.8.3",

src/components/App/index.js

@@ -9,6 +9,7 @@ import ChatFinished from '../../routes/ChatFinished';
 import SwitchDepartment from '../../routes/SwitchDepartment';
 import GDPRAgreement from '../../routes/GDPRAgreement';
 import Register from '../../routes/Register';
+import SurveyFeedback from '../../routes/SurveyFeedback';
 import { Provider as StoreProvider, Consumer as StoreConsumer } from '../../store';
 import { visibility } from '../helpers';
 import { setWidgetLanguage } from '../../lib/locale';
@@ -211,6 +212,7 @@ export class App extends Component {
 				<GDPRAgreement path="/gdpr" {...screenProps} />
 				<ChatFinished path="/chat-finished" {...screenProps} />
 				<SwitchDepartment path="/switch-department" {...screenProps} />
+				<SurveyFeedback path="/survey-feedback" {...screenProps} />
 			</Router>
 		);
 	}

src/components/Form/ExperienceRating/index.js

@@ -0,0 +1,67 @@
+import { Component } from 'preact';
+import styles from './style';
+import { createClassName } from '../../helpers';
+import { Emoji } from 'emoji-mart';
+
+const ExperienceRatingItem = ({ value, label, description, checked, onChange }) => (
+	<div className={createClassName(styles, 'form__input-experience-rating__item')}>
+		<div className={createClassName(styles, 'form__input-experience-rating__input-container', { checked })}>
+			<input
+				type="radio"
+				name="experience-rating"
+				id={value}
+				value={value}
+				className={createClassName(styles, 'form__input-experience-rating__input')}
+				checked={checked}
+				onChange={onChange}
+			/>
+			<label className={createClassName(styles, 'form__input-experience-rating__label')} for={value}>
+				{label}
+			</label>
+		</div>
+		{checked && <span className={createClassName(styles, 'form__input-experience-rating__description')}>{description}</span>}
+	</div>
+);
+
+export class ExperienceRating extends Component {
+	state = {
+		value: this.props.value,
+	}
+
+	handleChange = (event) => {
+		const { onChange } = this.props;
+		onChange && onChange(event);
+		this.setState({ value: event.target.value });
+	}
+
+	isChecked = (itemValue) => {
+		const { value } = this.state;
+		return value === itemValue;
+	}
+
+	renderEmoji = (emojiShortName) => {
+		return Emoji({
+			set: 'apple',
+			emoji: emojiShortName,
+			size: 32,
+			sheetSize: 64,
+		  })
+	}
+
+	render() {
+		return (
+			<div
+				className={[
+					createClassName(styles, 'form__input'),
+					createClassName(styles, 'form__input-experience-rating'),
+				].join(' ')}
+			>
+				<ExperienceRatingItem value="1" label={this.renderEmoji('white_frowning_face')} description="Very bad" onChange={this.handleChange} checked={this.isChecked('1')} />
+				<ExperienceRatingItem value="2" label={this.renderEmoji('slightly_frowning_face')} description="Bad" onChange={this.handleChange} checked={this.isChecked('2')} />
+				<ExperienceRatingItem value="3" label={this.renderEmoji('neutral_face')} description="Ok" onChange={this.handleChange} checked={this.isChecked('3')} />
+				<ExperienceRatingItem value="4" label={this.renderEmoji('slightly_smiling_face')} description="Good" onChange={this.handleChange} checked={this.isChecked('4')} />
+				<ExperienceRatingItem value="5" label={this.renderEmoji('smile')} description="Awesome" onChange={this.handleChange} checked={this.isChecked('5')} />
+			</div>
+		);
+	}
+}

src/components/Form/ExperienceRating/style.scss

@@ -0,0 +1,294 @@
+@import '~styles/colors';
+@import '~styles/variables';
+
+
+$form-item-margin-bottom: $default-gap;
+$form-item-inline-margin-left: $default-gap;
+
+$form-label-margin: ($default-gap / 3) 0;
+
+$form-label-color: $color-text-dark;
+$form-label-error-color: $color-red;
+
+$form-label-font-size: 0.75rem;
+$form-label-font-weight: 600;
+$form-label-line-height: 1rem;
+
+$form-description-margin: ($default-gap / 2) 0 0;
+
+$form-description-color: $color-text-grey;
+$form-description-error-color: $color-red;
+
+$form-description-font-size: 0.75rem;
+$form-description-font-weight: 500;
+$form-description-line-height: 1rem;
+
+$form-input-border-width: $default-border;
+$form-input-border-radius: $default-border-radius;
+$form-input-padding: (0.75 * $default-gap - $default-border);
+$form-input-small-padding: (0.25 * $default-gap - $default-border / 2) (0.75 * $default-gap - $default-border);
+
+$form-input-color: $color-text-dark;
+$form-input-placeholder-color: $color-text-light;
+$form-input-background-color: $bg-color-white;
+$form-input-border-color: $bg-color-grey;
+$form-input-focus-border-color: $color-text-dark;
+$form-input-hover-border-color: $color-text-light;
+$form-input-disabled-background-color: $bg-color-grey;
+$form-input-disabled-color: $color-text-light;
+$form-input-error-color: $color-red;
+$form-input-error-border-color: $color-red;
+
+$form-input-font-family: $font-family;
+$form-input-font-size: 0.875rem;
+$form-input-font-weight: 500;
+$form-input-line-height: 1.25rem;
+
+$form-input-disabled-opacity: $disabled-opacity;
+
+$form-input-select-arrow-size: $form-input-padding;
+$form-input-select-arrow-padding: $form-input-padding;
+
+$form-input-select-arrow-color: $color-text-light;
+
+.form__item {
+	display: flex;
+	flex-direction: column;
+
+	width: 100%;
+	margin-bottom: $form-item-margin-bottom;
+
+	&--inline {
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		align-items: center;
+
+		.form__label {
+			flex: 1 25%;
+		}
+
+		.form__label + .form__input {
+			flex: 3 75%;
+		}
+
+		.form__description {
+			flex: 0 75%;
+		}
+	}
+}
+
+.form__label {
+	margin: $form-label-margin;
+
+	color: $form-label-color;
+
+	font-size: $form-label-font-size;
+	font-weight: $form-label-font-weight;
+	text-align: left;
+	letter-spacing: 0;
+	line-height: $form-label-line-height;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+
+	transition: color $default-time-animation;
+
+	&--error {
+		color: $form-label-error-color;
+	}
+}
+
+.form__description {
+	margin: $form-description-margin;
+
+	color: $form-description-color;
+
+	font-size: $form-description-font-size;
+	font-weight: $form-description-font-weight;
+	line-height: $form-description-line-height;
+
+	transition: color $default-time-animation;
+
+	&--error {
+		color: $form-description-error-color;
+	}
+}
+
+@mixin form__input-box {
+	border: $form-input-border-width solid $form-input-border-color;
+	border-radius: $form-input-border-radius;
+	padding: $form-input-padding;
+
+	color: $form-input-color;
+	background-color: $form-input-background-color;
+	outline: none;
+
+	font-family: $form-input-font-family;
+	font-size: $form-input-font-size;
+	font-weight: $form-input-font-weight;
+	line-height: $form-input-line-height;
+
+	transition: border-color $default-time-animation,
+		color $default-time-animation,
+		background-color $default-time-animation,
+		trasform $default-time-animation;
+
+	&:focus {
+		border-color: $form-input-focus-border-color;
+	}
+
+	&:hover {
+		border-color: $form-input-hover-border-color;
+	}
+
+	&--small {
+		padding: $form-input-small-padding;
+	}
+
+	&--disabled {
+		color: $form-input-disabled-color;
+		background-color: $form-input-disabled-background-color;
+		border-color: $form-input-border-color;
+
+		opacity: $form-input-disabled-opacity;
+		cursor: not-allowed;
+	}
+
+	&--error,
+	&--error:focus,
+	&--error:hover {
+		border-color: $form-input-error-border-color;
+		color: $form-input-error-color;
+	}
+}
+
+.form__input {
+	&-text,
+	&-password,
+	&-file {
+		@include form__input-box;
+
+		&::placeholder {
+			color: $form-input-placeholder-color;
+		}
+	}
+}
+
+.form__input-file {
+	&--hidden {
+		display: none;
+	}
+}
+
+textarea.form__input-text {
+	resize: none;
+}
+
+.form__input-select {
+	position: relative;
+	display: flex;
+	flex: 1;
+
+	&__select {
+		@include form__input-box;
+
+		flex: 1;
+
+		padding-right: (3 * $form-input-select-arrow-padding + $form-input-select-arrow-size);
+
+		color: $form-input-color;
+
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+
+		&::-ms-expand {
+			display: none;
+		}
+
+		&--placeholder {
+			color: $form-input-placeholder-color;
+		}
+
+		&--small {
+			padding-right: (3 * $form-input-select-arrow-padding + $form-input-select-arrow-size);
+		}
+	}
+
+	&__option {
+		color: $form-input-color;
+	}
+
+	&__arrow {
+		position: absolute;
+		right: $form-input-select-arrow-padding;
+		top: 50%;
+
+		width: $form-input-select-arrow-size;
+		height: $form-input-select-arrow-size;
+
+		color: $form-input-select-arrow-color;
+
+		transform: translateY(-50%) translateY(2px);
+		pointer-events: none;
+	}
+}
+
+.form__input-experience-rating {
+	display: flex;
+	flex: 1;
+	flex-direction: row;
+	align-items: flex-start;
+	margin-bottom: $form-item-margin-bottom;
+
+	&__item {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+	}
+
+	&__input-container {
+		width: 48px;
+		height: 48px;
+		text-align: center;
+		line-height: 66px;
+		border-radius: 50%;
+		margin-bottom: 4px;
+		transition: background $default-time-animation;
+
+		&--checked {
+			background: #E1E5E8;
+		}
+	}
+
+	&__input {
+		display: none;
+	}
+
+	&__label {
+		width: 36px;
+		height: 36px;
+		color: #2F343D;
+		font-size: 36px;
+		text-align: center;
+		letter-spacing: 0;
+		line-height: 36px;
+		cursor: pointer;
+		user-select: none;
+
+		&:hover {
+			opacity: 0.9;
+		}
+	}
+
+	&__description {
+		color: #9EA2A8;
+		font-size: 10px;
+		font-weight: bold;
+		letter-spacing: 0.2px;
+		line-height: 16px;
+	}
+}