fix: deposit requirement modal copy (#1231)

* fix: deposit requirement modal copy

* use radios

* fix tests

* add a test that shows you must agree or disagree

app/components/workflow-review/index.css

@@ -35,5 +35,9 @@ table td {
 
 .comment-text-area {
   resize: none;
-  min-height: 38px!important;
+  min-height: 38px !important;
+}
+
+.swal2-radio {
+  flex-direction: column !important;
 }

app/components/workflow-review/index.js

@@ -126,16 +126,25 @@ export default class WorkflowReview extends Component {
 
     const result = yield swal
       .mixin({
-        input: 'checkbox',
-        inputPlaceholder: "I agree to the above statement on today's date ",
         confirmButtonText: 'Next →',
+        input: 'radio',
+        inputOptions: {
+          agree: `I agree to the above statement on today's date.`,
+          noAgree:
+            'I do not agree to the above statement and I understand that if I proceed and do not check this box, my submission will not be deposited to above repository.',
+        },
+        inputValidator: (value) => {
+          if (!value) {
+            return 'You need to choose something!';
+          }
+        },
         progressSteps: reposWithAgreementText.map((repo, index) => index + 1),
       })
       .queue(reposWithAgreementText);
     if (result.value) {
       let reposThatUserAgreedToDeposit = reposWithAgreementText.filter((repo, index) => {
         // if the user agreed to depost to this repo === 1
-        if (result.value[index] === 1) {
+        if (result.value[index] === 'agree') {
           return repo;
         }
       });

app/styles/app.css

@@ -328,6 +328,18 @@ input[type='date']::-webkit-outer-spin-button {
   z-index: 99999 !important;
 }
 
+.swal2-radio {
+  display: block !important;
+}
+
+.swal2-radio label .swal2-label {
+  font-size: 1rem !important;
+}
+
+.swal2-radio label:not(:last-child) {
+  margin-bottom: 4px !important;
+}
+
 /*
 * End Alpaca
 */

tests/acceptance/nih-submission-test.js

@@ -153,7 +153,8 @@ module('Acceptance | submission', function (hooks) {
 
     await waitFor(document.querySelector('#swal2-title'));
     assert.dom(document.querySelector('#swal2-title')).includesText('Deposit requirements for JScholarship');
-    await click(document.querySelector('#swal2-checkbox'));
+    await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
+    await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
     await click(document.querySelector('.swal2-confirm'));
 
     await waitFor(document.querySelector('#swal2-title'));
@@ -350,7 +351,8 @@ module('Acceptance | submission', function (hooks) {
 
     await waitFor(document.querySelector('#swal2-title'));
     assert.dom(document.querySelector('#swal2-title')).includesText('Deposit requirements for JScholarship');
-    await click(document.querySelector('#swal2-checkbox'));
+    await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
+    await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
     await click(document.querySelector('.swal2-confirm'));
 
     await waitFor(document.querySelector('#swal2-title'));
@@ -517,7 +519,8 @@ module('Acceptance | submission', function (hooks) {
 
     await waitFor(document.querySelector('#swal2-title'));
     assert.dom(document.querySelector('#swal2-title')).includesText('Deposit requirements for JScholarship');
-    await click(document.querySelector('#swal2-checkbox'));
+    await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
+    await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
     await click(document.querySelector('.swal2-confirm'));
 
     await waitFor(document.querySelector('#swal2-title'));
@@ -662,7 +665,8 @@ module('Acceptance | submission', function (hooks) {
 
     await waitFor(document.querySelector('#swal2-title'));
     assert.dom(document.querySelector('#swal2-title')).includesText('Deposit requirements for JScholarship');
-    await click(document.querySelector('#swal2-checkbox'));
+    await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
+    await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
     await click(document.querySelector('.swal2-confirm'));
 
     await waitFor(document.querySelector('#swal2-title'));

tests/integration/components/workflow-review-test.js

@@ -113,6 +113,73 @@ module('Integration | Component | workflow review', (hooks) => {
     assert.strictEqual(submission.get('repositories.length'), 2);
   });
 
+  test('cannot proceed without agreeing or disagreeing to repo agreement', async function (assert) {
+    let controller = this.owner.lookup('controller:submissions/new/review');
+    assert.ok(controller);
+
+    let repo1 = EmberObject.create({
+      id: 'test:repo1',
+      integrationType: 'full',
+      agreementText: 'Cows are the best',
+      name: 'repo1',
+      _isWebLink: false,
+    });
+
+    let submitted = false;
+
+    this.owner.register(
+      'service:current-user',
+      EmberObject.extend({
+        user: { id: 'pi' },
+      })
+    );
+
+    let submission = EmberObject.create({
+      submitter: {
+        id: 'pi',
+      },
+      preparers: A([get(this, 'currentUser.user')]),
+      repositories: A([repo1]),
+      metadata: '[]',
+    });
+
+    let publication = EmberObject.create({});
+    let files = [EmberObject.create({})];
+
+    this.set('submission', submission);
+    this.set('publication', publication);
+    this.set('submit', (actual) => {
+      submitted = true;
+    });
+    this.set('files', files);
+    this.set('comment', '');
+    this.set('uploading', '');
+    this.set('waitingMessage', '');
+
+    await render(hbs`
+      <WorkflowReview
+        @submission={{this.submission}}
+        @publication={{this.publication}}
+        @previouslyUploadedFiles={{this.files}}
+        @comment={{this.comment}}
+        @submit={{action this.submit}}
+        @uploading={{this.uploading}}
+        @waitingMessage={{this.waitingMessage}}
+      />
+    `);
+
+    // Click on submit
+    await click('.submit');
+
+    await click(document.querySelector('.swal2-confirm'));
+
+    await waitFor(document.querySelector('.swal2-validationerror'));
+    assert.dom(document.querySelector('.swal2-validationerror')).containsText('You need to choose something!');
+
+    await waitFor(document.querySelector('.swal2-container'));
+    await click(document.querySelector('.swal2-container'));
+  });
+
   test('submission success: web-link and agreement', async function (assert) {
     let controller = this.owner.lookup('controller:submissions/new/review');
     assert.ok(controller);
@@ -182,7 +249,8 @@ module('Integration | Component | workflow review', (hooks) => {
     await click('.submit');
 
     // Click on deposit agreement checkbox and then next
-    await click(document.querySelector('.swal2-checkbox'));
+    await waitFor(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
+    await click(document.querySelector('.swal2-radio label:nth-child(1) input[type="radio"]'));
     await click(document.querySelector('.swal2-confirm'));
 
     // Click on confirm submission
@@ -320,6 +388,10 @@ module('Integration | Component | workflow review', (hooks) => {
 
     await click('.submit');
 
+    // Click the second radio indicating submit without agreeing to deposit agreement
+    await waitFor(document.querySelector('.swal2-radio label:nth-child(2) input[type="radio"]'));
+    await click(document.querySelector('.swal2-radio label:nth-child(2) input[type="radio"]'));
+
     // Click Next without agreeing
     await click(document.querySelector('.swal2-confirm'));