fix(FEC-13595): IVQ popup changes (FEC-13593)

cypress/e2e/env.ts

@@ -8,6 +8,10 @@ export const MANIFEST_SAFARI = `#EXTM3U
 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=504265,RESOLUTION=480x272,AUDIO="audio",SUBTITLES="subs"
 ${location.origin}/media/index.m3u8`;
 
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false;
+});
+
 export const getPlayer = () => {
   // @ts-ignore
   return cy.window().then($win => $win.KalturaPlayer.getPlayers()['player-placeholder']);

cypress/e2e/ivq-question-changed-event.cy.ts

@@ -8,7 +8,7 @@ describe('IVQ plugin', () => {
     cy.intercept('GET', '**/width/164/vid_slices/100', {fixture: '100.jpeg'});
     cy.intercept('GET', '**/height/360/width/640', {fixture: '640.jpeg'});
     // kava
-    cy.intercept('GET', '**/index.php?service=analytics*', {});
+    cy.intercept('POST', '**/index.php?service=analytics*', {});
   });
 
   describe('QuizQuestionChanged event', () => {

cypress/e2e/ivq-review.cy.ts

@@ -8,7 +8,7 @@ describe('IVQ review', () => {
     cy.intercept('GET', '**/width/164/vid_slices/100', {fixture: '100.jpeg'});
     cy.intercept('GET', '**/height/360/width/640', {fixture: '640.jpeg'});
     // kava
-    cy.intercept('GET', '**/index.php?service=analytics*', {});
+    cy.intercept('POST', '**/index.php?service=analytics*', {});
   });
 
   describe('quiz review', () => {

cypress/e2e/ivq.cy.ts

@@ -1,9 +1,5 @@
 import {mockKalturaBe, loadPlayer, MANIFEST, MANIFEST_SAFARI} from './env';
 
-Cypress.on('uncaught:exception', (err, runnable) => {
-  return false;
-});
-
 describe('IVQ plugin', () => {
   beforeEach(() => {
     // manifest
@@ -12,7 +8,7 @@ describe('IVQ plugin', () => {
     cy.intercept('GET', '**/width/164/vid_slices/100', {fixture: '100.jpeg'});
     cy.intercept('GET', '**/height/360/width/640', {fixture: '640.jpeg'});
     // kava
-    cy.intercept('GET', '**/index.php?service=analytics*', {});
+    cy.intercept('POST', '**/index.php?service=analytics*', {});
   });
 
   describe('welcome screen', () => {
@@ -154,7 +150,7 @@ describe('IVQ plugin', () => {
       mockKalturaBe('quiz_welcome_page_disabled_with_attempt.json', 'cues_4_question.json');
       loadPlayer({}, {autoplay: true}).then(() => {
         cy.get('[data-testid="ivqPopupSubmitButton"]').click({force: true});
-        cy.get('[data-testid="ivqPopupSubmitButton"] [data-testid="ivqSpinner"]').should('exist');
+        cy.get('[data-testid="ivqPopupSubmitButton"][aria-busy="true"]').should('exist');
         cy.wait('@submit');
       });
     });

package.json

@@ -68,7 +68,7 @@
     }
   },
   "dependencies": {
-    "@playkit-js/common": "^1.2.9",
+    "@playkit-js/common": "^1.5.3",
     "@playkit-js/playkit-js-ui": "^0.77.2"
   }
 }

src/components/ivq-popup/ivq-popup.tsx

@@ -1,9 +1,9 @@
 import {A11yWrapper, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
+import {Button, ButtonSize, ButtonType} from '@playkit-js/common/dist/components/button';
 import {useState, useCallback} from 'preact/hooks';
 import {h} from 'preact';
 import {icons} from '../icons';
 import {QuizTranslates} from '../../types';
-import {Spinner} from '../spinner';
 import * as styles from './ivq-pupup.scss';
 
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
@@ -38,7 +38,7 @@ const translates = ({type, score}: IvqPopupProps): QuizTranslates => {
       ...ivqTranslates,
       title: <Text id="ivq.quiz_almost_done_title">You’re almost done</Text>,
       description: (
-        <Text id="ivq.quiz_almost_done_description">It appears that some questions remained unanswered. Please complete the quiz to submit.</Text>
+        <Text id="ivq.quiz_almost_done_description">It appears that some questions remained unanswered You must answer all questions before you can submit</Text>
       )
     };
   } else if (type === IvqPopupTypes.submit) {
@@ -111,21 +111,25 @@ export const IvqPopup = withText(translates)(({type, onClose, onSubmit, onReview
       </div>
       {type === IvqPopupTypes.submit && (
         <div className={styles.buttonsWrapper}>
-          <A11yWrapper onClick={onReview}>
-            <div tabIndex={0} className={styles.secondaryButton} aria-label={otherProps.reviewButtonAriaLabel} data-testid="ivqPopupReviewButton">
-              {otherProps.reviewButton}
-            </div>
-          </A11yWrapper>
-          <A11yWrapper onClick={handleSubmitClick}>
-            <div
-              tabIndex={0}
-              className={styles.primaryButton}
-              aria-label={otherProps.submitButtonAriaLabel}
-              disabled={isLoading}
-              data-testid="ivqPopupSubmitButton">
-              {isLoading ? <Spinner /> : otherProps.submitButton}
-            </div>
-          </A11yWrapper>
+          <Button
+            onClick={onReview}
+            type={ButtonType.secondary}
+            size={ButtonSize.medium}
+            ariaLabel={otherProps.reviewButtonAriaLabel as string}
+            testId="ivqPopupReviewButton"
+            className={styles.ivqPopupButtons}>
+            {otherProps.reviewButton}
+          </Button>
+          <Button
+            onClick={handleSubmitClick}
+            type={ButtonType.primary}
+            size={ButtonSize.medium}
+            testId="ivqPopupSubmitButton"
+            ariaLabel={otherProps.submitButtonAriaLabel as string}
+            loading={isLoading}
+            className={[styles.ivqPopupButtons, styles.primaryButton].join(' ')}>
+            {otherProps.submitButton}
+          </Button>
         </div>
       )}
     </div>

src/components/ivq-popup/ivq-pupup.scss

@@ -54,13 +54,11 @@
     margin-top: 16px;
     display: flex;
     justify-content: flex-start;
-    .primaryButton {
-      @include ivq-primary-button;
-      min-width: 66px;
-      margin-left: 8px;
-    }
-    .secondaryButton {
-      @include ivq-secondary-button;
+    .ivqPopupButtons {
+      width: 100%;
+      &.primaryButton {
+        margin-left: 8px;
+      }
     }
   }
 }

src/components/quiz-submit/quiz-submit.scss

@@ -22,6 +22,7 @@
   .description {
     margin-top: 16px;
     font-size: 16px;
+    max-width: 600px;
   }
   .buttonWrapper {
     display: flex;

src/components/quiz-submit/quiz-submit.tsx

@@ -27,7 +27,7 @@ const translates = ({onSubmit}: QuizSubmitProps): QuizTranslates => {
     description: onSubmit ? (
       <Text id="ivq.submit_description">Take a moment to review your answers or go ahead to submit your answers.</Text>
     ) : (
-      <Text id="ivq.review_description">It appears that some questions remained unanswered. Please complete the quiz to submit.</Text>
+      <Text id="ivq.review_description">It appears that some questions remained unanswered You must answer all questions before you can submit</Text>
     )
   };
 };

translations/en.i18n.json

@@ -19,7 +19,7 @@
       "review_button": "Review",
       "review_button_area_label": "Click to review quiz",
       "review_title": "You are almost done",
-      "review_description": "It appears that some questions remained unanswered. Please complete the quiz to submit.",
+      "review_description": "It appears that some questions remained unanswered You must answer all questions before you can submit",
       "submit_title": "Quiz completed",
       "submit_description": "Take a moment to review your answers or go ahead to submit your answers.",
       "quiz_score": "Your score is {{quizScore}}",
@@ -46,7 +46,7 @@
       "tip": "All questions must be answered. The quiz will be submitted at the end.",
       "available_attempts_message": "Total attempts available for this quiz: {{availableAttempts}}",
       "quiz_almost_done_title": "You’re almost done",
-      "quiz_almost_done_description": "It appears that some questions remained unanswered. Please complete the quiz to submit.",
+      "quiz_almost_done_description": "It appears that some questions remained unanswered You must answer all questions before you can submit",
       "quiz_submit_description": "Take a moment to review your answers or go ahead to submit your answers.",
       "quiz_completed_description": "Watch the video until the end to submit.",
       "quiz_submitted_title": "Quiz submitted"

yarn.lock

@@ -94,12 +94,12 @@
     classnames "^2.3.2"
     linkify-it "^4.0.1"
 
-"@playkit-js/common@^1.2.9":
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.2.9.tgz#5b20a6c2e521490ca1e518c42a9167ab2d490859"
-  integrity sha512-wj3GJy2bBgECk/lG9FHDu9mdYmoLQatC1etbqfFPnUkJMwMOtQrXcc5W85jvDJXL7Bv4Z71KIDCbHZAPOPfbWw==
+"@playkit-js/common@^1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.5.3.tgz#1494e6d61787cd1adfdc43648784a01e4a0c0789"
+  integrity sha512-wW2Ud6hDsfJuhnmRzn+nBFqD1g5TRDy7RIClPo2uh8D/XV4YEVYcUvdSJMCYLFEDjqeq71KtdOp64Lo0DklPBw==
   dependencies:
-    "@playkit-js/playkit-js-ui" "^0.77.1"
+    "@playkit-js/playkit-js-ui" "^0.77.10"
     classnames "^2.3.2"
     linkify-it "^4.0.1"
 
@@ -135,16 +135,6 @@
   resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-providers/-/playkit-js-providers-2.39.3-canary.0-e04b57d.tgz#055ba43c3f2f3b4c2fa0c72e8263ae8262226db3"
   integrity sha512-d6EOT3YUyTP7V1u2roQNoPTY+kToHEkW8jo5+9cfOPLi0Cl7TtJ/loZls9KL4iVse4wIJK1WicpLf2xorYwLUw==
 
-"@playkit-js/playkit-js-ui@^0.77.1":
-  version "0.77.1"
-  resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-ui/-/playkit-js-ui-0.77.1.tgz#1bb76f5ca8dd1ed3fd389cce818e2f454d3897a0"
-  integrity sha512-4ReI5oAmzUGkAKwRoRO+oy0fzpG+cgXOvGkWgZ/rjObjL2bpBIkHdmgTlAHsvrdKbBUfJThqdQwPsu8FkoQyVA==
-  dependencies:
-    preact "^10.3.4"
-    preact-i18n "^2.0.0-preactx.2"
-    react-redux "^7.2.0"
-    redux "^4.0.5"
-
 "@playkit-js/playkit-js-ui@^0.77.10":
   version "0.77.11"
   resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-ui/-/playkit-js-ui-0.77.11.tgz#36a3ba1e02eb7abd68df132db3bb91c13400455d"