Add question answers word cloud feature

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
   },
   rules: {
     'qunit/require-expect': [1, 'except-simple'],
+    'no-self-assign': ['warn'],
   },
   overrides: [
     // node files

app/components/answer-reply-modal.hbs

@@ -0,0 +1,46 @@
+<BaseModal
+  @closeModal={{@closeModal}}
+  @openModal={{@openModal}}
+  @isOpen={{@isOpen}}
+>
+  <div class="answer-reply-modal">
+    <h4 class="answer-reply-modal__heading">Host asked you a question😀</h4>
+    <form>
+      <Reusables::InputBox
+        @field={{@questionAsked.question}}
+        @name="answer"
+        @type="text"
+        @placeHolder="Enter your answer"
+        @required={{true}}
+        @isError={{@validationDetails.isError}}
+        @helperText={{@validationDetails.helperText}}
+        @variant="input--full-width"
+        @value={{@answerValue}}
+        @shouldShowHelperText={{@validationDetails.isHelperTextVisible}}
+        @onInput={{@inputHandler}}
+      />
+      <p class="answer-reply-modal__info-text">
+        <span class="answer-reply-modal__info-icon">&iexcl;</span>
+        Do not use abusive words, this event is moderated!</p>
+      <div class="answer-reply-modal__actions">
+        <Reusables::Button
+          @text="Cancel"
+          @type="button"
+          @variant="dark btn--sm btn-light answer-reply-modal__cancel-button"
+          @test="question-modal-cancel"
+          @onClick={{@closeModal}}
+        />
+        <Reusables::Button
+          @type="button"
+          @text="Submit"
+          @variant="dark btn--sm btn-pink answer-reply-modal__submit-button"
+          @test="question-modal-cancel"
+          @disabled={{@submitButtonState.isDisabled}}
+          @isLoading={{@submitButtonState.isLoading}}
+          @onClick={{@onSubmit}}
+        />
+      </div>
+    </form>
+  </div>
+
+</BaseModal>

app/components/answer-view-card.hbs

@@ -0,0 +1,36 @@
+<div
+  class="answer-view-card
+    {{if this.isApproved 'answer-view-card--approved' ''}}
+    {{if this.isPending 'answer-view-card--pending' ''}}
+    {{if this.isRejected 'answer-view-card--rejected' ''}}
+    "
+>
+  <p class="answer-view-card__text">
+    {{this.answerText}}
+
+    {{#if this.isTextMoreThanMaxCharacters}}
+      <button
+        class="answer-view-card__read-more-button"
+        {{on "click" this.toggleReadMore}}
+        type="button"
+      >{{this.readMoreOrLessText}}</button>
+    {{/if}}
+  </p>
+
+  <div class="answer-view-card__buttons">
+    <Reusables::IconButton
+      @id="reject-button-{{@id}}"
+      @class="icon-button--sm icon-button--red-outlined"
+      @title="Reject Answer"
+      @onClick={{@onReject}}
+      @icon="material-symbols:close-small-outline-rounded"
+    />
+    <Reusables::IconButton
+      @id="approve-button-{{@id}}"
+      @class="icon-button--sm icon-button--green"
+      @title="Approve Answer"
+      @onClick={{@onApprove}}
+      @icon="material-symbols:done-rounded"
+    />
+  </div>
+</div>

app/components/answer-view-card.js

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { readMoreFormatter } from '../utils/common-utils';
+import { action } from '@ember/object';
+import { ANSWER_STATUS } from '../constants/live';
+
+const maxCharactersToShow = 70;
+export default class AnswerViewCardComponent extends Component {
+  @tracked answerText = readMoreFormatter(
+    this.args.answerObject.answer,
+    maxCharactersToShow,
+  );
+
+  @tracked isTextMoreThanMaxCharacters =
+    this.args.answerObject.answer?.length > maxCharactersToShow;
+  @tracked isReadMoreEnabled = false;
+  @tracked readMoreOrLessText = this.isReadMoreEnabled ? 'Less' : 'More';
+  @tracked isApproved =
+    this.args.answerObject.status === ANSWER_STATUS.APPROVED;
+  @tracked isPending = this.args.answerObject.status === ANSWER_STATUS.PENDING;
+  @tracked isRejected =
+    this.args.answerObject.status === ANSWER_STATUS.REJECTED;
+
+  @action toggleReadMore() {
+    this.isReadMoreEnabled = !this.isReadMoreEnabled;
+    this.readMoreOrLessText = this.isReadMoreEnabled ? 'Less' : 'More';
+    if (this.isReadMoreEnabled) {
+      this.answerText = this.args.answerObject.answer;
+    } else {
+      this.answerText = readMoreFormatter(
+        this.args.answerObject.answer,
+        maxCharactersToShow,
+      );
+    }
+  }
+}

app/components/ask-question-modal.hbs

@@ -0,0 +1,62 @@
+<BaseModal
+  @closeModal={{@closeModal}}
+  @openModal={{@openModal}}
+  @isOpen={{@isOpen}}
+>
+  <div class="ask-question-modal">
+    <h4 class="ask-question-modal__heading">Ask Question</h4>
+    <textarea
+      class="ask-question-modal__textarea"
+      name="question"
+      id="question"
+      placeholder="Enter your question here"
+      {{on "input" @onInput}}
+      value={{@question}}
+    ></textarea>
+    <div class="ask-question-modal__checkbox-container">
+      <input
+        {{on "change" @toggleMaxCharacterChecked}}
+        class="ask-question-modal__checkbox"
+        type="checkbox"
+        name="is-max-characters-checked"
+        id="is-max-characters-checked"
+        checked={{@isMaxCharactersChecked}}
+      />
+      <label
+        class="ask-question-modal__checkbox-label"
+        for="is-max-characters-checked"
+      >Do you want answer to be of limited characters?</label>
+    </div>
+    <input
+      type="number"
+      name="max-characters"
+      id="max-characters"
+      min="1"
+      class="ask-question-modal__max-characters-input
+        {{if
+          @isMaxCharactersChecked
+          'visibility--visible'
+          'visibility--hidden'
+        }}"
+      value={{@maxCharacters}}
+      placeholder="Enter your characters limit"
+      {{on "input" @onCharacterLimitInput}}
+    />
+    <div class="ask-question-modal__actions">
+      <Reusables::Button
+        @text="Cancel"
+        @variant="dark btn--sm btn-light ask-question-modal__cancel-button"
+        @test="question-modal-cancel"
+        @onClick={{@closeModal}}
+      />
+      <Reusables::Button
+        @text="Submit"
+        @variant="dark btn--sm btn-pink ask-question-modal__submit-button"
+        @test="question-modal-cancel"
+        @onClick={{@onSubmit}}
+        @disabled={{(or @isSubmitButtonDisabled @isQuestionApiLoading)}}
+        @isLoading={{@isQuestionApiLoading}}
+      />
+    </div>
+  </div>
+</BaseModal>

app/components/events/survey-page.hbs

@@ -0,0 +1,68 @@
+<div class="survey-page">
+  <AskQuestionModal
+    @isOpen={{this.isAskQuestionModalOpen}}
+    @closeModal={{this.closeAskQuestionModal}}
+    @openModal={{this.openAskQuestionModal}}
+    @onSubmit={{this.onQuestionSubmit}}
+    @toggleMaxCharacterChecked={{this.toggleMaxCharacterChecked}}
+    @isMaxCharactersChecked={{this.isMaxCharactersChecked}}
+    @maxCharacters={{this.maxCharacters}}
+    @onCharacterLimitInput={{this.onCharacterLimitInput}}
+    @onInput={{this.onQuestionInput}}
+    @isSubmitButtonDisabled={{this.isQuestionSubmitButtonDisabled}}
+    @question={{this.question}}
+    @isQuestionApiLoading={{this.isQuestionApiLoading}}
+  />
+  <div class="survey-page__question-container">
+    <Reusables::Button
+      @text="Ask Question"
+      @variant="dark btn--sm btn-pink"
+      @test="ask-question"
+      @onClick={{this.openAskQuestionModal}}
+      @disabled={{this.isAskQuestionButtonDisabled}}
+      @title={{if
+        this.isAskQuestionButtonDisabled
+        "This is a host only feature"
+        ""
+      }}
+    />
+    <div class="survey-page__recent-question">
+      <h3 class="survey-page__recent-question-heading">Recent Question</h3>
+      <p class="survey-page__recent-question-text">{{(or
+          @questionAsked.question "No recent question"
+        )}}</p>
+    </div>
+  </div>
+  <div class="survey-page__answers-container">
+    <h2 class="survey-page__answers-heading">
+      Answers
+    </h2>
+    <div class="survey-page__filter">
+      <label for="answer-status">Filter: </label>
+      <select
+        name="answer-status"
+        id="answer-status"
+        {{on "change" this.onAnswerFilterChange}}
+      >
+        {{#each this.ANSWER_STATUS_FILTERS as |status|}}
+          <option value={{status}}>{{status}}</option>
+        {{/each}}
+      </select>
+    </div>
+    <div class="survey-page__answers">
+      {{#if this.isAnswersPresent}}
+        {{#each this.answers as |answer|}}
+          <AnswerViewCard
+            @id={{answer.id}}
+            @answerObject={{answer}}
+            @onReject={{@onAnswerReject}}
+            @onApprove={{@onAnswerApprove}}
+          />
+        {{/each}}
+      {{else}}
+        <div>No answers present currently!</div>
+      {{/if}}
+
+    </div>
+  </div>
+</div>