「読みました」のチェックボックスを埋めたら「休会する」ボタンを押せるようにした

app/assets/stylesheets/application/blocks/form/_block-checks.sass

@@ -8,6 +8,8 @@
   max-width: 20rem
   .block-checks.is-1-item &
     max-width: 100%
+  .block-checks.is-1-item.is-centered &
+    width: 20rem
   .block-checks.is-2-items &
     flex: 0 0 calc((100% - .5rem) / 2)
     max-width: calc((100% - .5rem) / 2)

app/javascript/hibernation_agreements.js

@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const checkbox = document.querySelector('.js-hibernation-agreements-checkbox')
+  const submit = document.querySelector('.js-hibernation-agreements-submit')
+
+  checkbox.addEventListener('change', () => {
+    if (checkbox.checked) {
+      submit.classList.remove('is-disabled')
+      submit.classList.add('is-danger')
+    } else {
+      submit.classList.add('is-disabled')
+      submit.classList.remove('is-danger')
+    }
+  })
+})

app/javascript/packs/application.js

@@ -61,6 +61,7 @@ import '../training-info-toggler.js'
 import '../company-products.js'
 import '../welcome_message_for_adviser.js'
 import '../regular-events.js'
+import '../hibernation_agreements.js'
 
 import VueMounter from '../VueMounter.js'
 import Hello from '../components/hello.vue'

app/views/hibernation/new.html.slim

@@ -21,17 +21,6 @@ header.page-header
         html: { name: 'hibernation' },
         class: 'form' do |f|
         .form__items
-          //
-            休会についての注意を実装したら表示する
-            .form-item
-              label.a-form-label.is-required
-                | 休会についての注意を読みましたか？
-              .block-checks.is-2-items
-                .block-checks__item
-                  .a-block-check.is-checkbox
-                    input.a-toggle-checkbox#aaa(type='checkbox')
-                    label.a-block-check__label(for='aaa')
-                      | 読みました
           .form-item
             = f.label :scheduled_return_on,
               class: 'a-form-label is-required'
@@ -79,12 +68,22 @@ header.page-header
                         | こちら
                       | のページの「分報 URL」欄に分報チャンネルの URL を登録してください。
 
+          .form-item
+            label.a-form-label.is-required
+              | 休会についての注意を読みましたか？
+            .block-checks.is-1-item.is-centered
+              .block-checks__item
+                .a-block-check.is-checkbox.check-box-to-read
+                  input.a-toggle-checkbox.js-hibernation-agreements-checkbox#check-to-read(type='checkbox')
+                  label.a-block-check__label(for='check-to-read')
+                    | 読みました
+
         .form-actions
           ul.form-actions__items
             li.form-actions__item.is-main
               = link_to 'キャンセル', :back,
                 class: 'a-button is-md is-secondary is-block'
             li.form-actions__item.is-main
               = f.submit '休会する',
-                class: 'a-button is-md is-danger is-block',
+                class: 'a-button is-md is-block js-hibernation-agreements-submit is-disabled',
                 data: { confirm: '本当によろしいですか？' }

test/system/hibernation_test.rb

@@ -19,6 +19,7 @@ class HibernationTest < ApplicationSystemTestCase
     end
 
     VCR.use_cassette 'subscription/update', vcr_options do
+      find('.check-box-to-read').click
       click_on '休会する'
       page.driver.browser.switch_to.alert.accept
       assert_text '休会処理が完了しました'
@@ -31,6 +32,7 @@ class HibernationTest < ApplicationSystemTestCase
       fill_in('hibernation[reason]', with: 'test')
     end
 
+    find('.check-box-to-read').click
     click_on '休会する'
     page.driver.browser.switch_to.alert.accept
     assert_text '復帰予定日を入力してください'

test/system/notification/hibernation_test.rb

@@ -22,6 +22,7 @@ class Notification::HibernationTest < ApplicationSystemTestCase
     visit_with_auth new_hibernation_path, 'kimura'
     fill_in 'hibernation[scheduled_return_on]', with: Time.current.next_month
     fill_in 'hibernation[reason]', with: 'テストのため'
+    find('.check-box-to-read').click
     accept_confirm do
       click_button '休会する'
     end
@@ -44,6 +45,7 @@ class Notification::HibernationTest < ApplicationSystemTestCase
     visit_with_auth new_hibernation_path, 'kensyu'
     fill_in 'hibernation[scheduled_return_on]', with: Time.current.next_month
     fill_in 'hibernation[reason]', with: 'テストのため'
+    find('.check-box-to-read').click
     accept_confirm do
       click_button '休会する'
     end
@@ -66,6 +68,7 @@ class Notification::HibernationTest < ApplicationSystemTestCase
     visit_with_auth new_hibernation_path, 'senpai'
     fill_in 'hibernation[scheduled_return_on]', with: Time.current.next_month
     fill_in 'hibernation[reason]', with: 'テストのため'
+    find('.check-box-to-read').click
     accept_confirm do
       click_button '休会する'
     end