From de17d686e3f73234c81915dabab88961e4f37a55 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Wed, 28 Feb 2024 15:30:23 -0700
Subject: [PATCH] Add basic on hold modal

---
 src/registrar/assets/js/get-gov-admin.js      |  2 +-
 .../django/admin/domain_change_form.html      | 84 +++++++++++++++++--
 2 files changed, 77 insertions(+), 9 deletions(-)

diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js
index ff73acb65..096f7a626 100644
--- a/src/registrar/assets/js/get-gov-admin.js
+++ b/src/registrar/assets/js/get-gov-admin.js
@@ -29,7 +29,7 @@ function openInNewTab(el, removeAttribute = false){
 */
 (function (){
     function createPhantomModalFormButtons(){
-        let submitButtons = document.querySelectorAll('.usa-modal button[type="submit"]');
+        let submitButtons = document.querySelectorAll('.usa-modal button[type="submit"].dja-form-placeholder');
         form = document.querySelector("form")
         submitButtons.forEach((button) => {
 
diff --git a/src/registrar/templates/django/admin/domain_change_form.html b/src/registrar/templates/django/admin/domain_change_form.html
index 67c5ac291..e38583eb8 100644
--- a/src/registrar/templates/django/admin/domain_change_form.html
+++ b/src/registrar/templates/django/admin/domain_change_form.html
@@ -11,18 +11,15 @@
         </div>
         <div class="desktop:flex-align-self-end">
             {% if original.state != original.State.DELETED %}
-            <a
-            class="text-middle"
-            href="#toggle-extend-expiration-alert"
-            aria-controls="toggle-extend-expiration-alert"
-            data-open-modal
-            >
+            <a class="text-middle" href="#toggle-extend-expiration-alert" aria-controls="toggle-extend-expiration-alert" data-open-modal>
                 Extend expiration date
             </a>
             <span class="margin-left-05 margin-right-05 text-middle"> | </span>
             {% endif %}
             {% if original.state == original.State.READY %}
-            <input type="submit" value="Place hold" name="_place_client_hold" class="custom-link-button">
+            <a class="text-middle" href="#toggle-place-on-hold" aria-controls="toggle-place-on-hold" data-open-modal>
+                Place hold
+            </a>
             {% elif original.state == original.State.ON_HOLD %}
             <input type="submit" value="Remove hold" name="_remove_client_hold" class="custom-link-button">
             {% endif %}
@@ -52,6 +49,8 @@
     In addition, the modal element MUST be placed low in the DOM. The script loads slower on DJA than on other portions
     of the application, so this means that it will briefly "populate", causing unintended visual effects.
     {% endcomment %}
+
+    {# Create a modal for the _extend_expiration_date button #}
     <div
     class="usa-modal"
     id="toggle-extend-expiration-alert"
@@ -78,7 +77,7 @@
                         {{test}}
                     </p>
                 </div>
-        
+
                 <div class="usa-modal__footer">
                     <ul class="usa-button-group">
                         <li class="usa-button-group__item">
@@ -114,5 +113,74 @@
             </button>
         </div>
     </div>
+
+    {# Create a modal for the _on_hold button #}
+    <div
+    class="usa-modal"
+    id="toggle-place-on-hold"
+    aria-labelledby="Are you sure you want to extend the expiration date?"
+    aria-describedby="This expiration date will be extended."
+    >
+        <div class="usa-modal__content">
+            <div class="usa-modal__main">
+                <h2 class="usa-modal__heading" id="modal-1-heading">
+                    Are you sure you want to place this domain on hold?
+                </h2>
+                <div class="usa-prose">
+                    <p>
+                        When a domain is on hold:
+                    </p>
+                    <ul>
+                        <li>The domain (and any subdomains) won’t resolve in DNS. Any infrastructure (like websites) will go offline.</li>
+                        <li>The domain will still appear in the registrar / admin.</li>
+                        <li>Domain managers won’t be able to edit the domain.</li>
+                    </ul>
+                    <p>
+                        This action can be reversed, if needed.
+                    </p>
+                    <p>
+                        {# Acts as a <br> #}
+                        <div class="display-inline"></div>
+                        Domain: <b>{{ original.name }}</b>
+                        New status: <b>{{ original.State.ON_HOLD }}</b>
+                    </p>
+                </div>
+
+                <div class="usa-modal__footer">
+                    <ul class="usa-button-group">
+                        <li class="usa-button-group__item">
+                            <button
+                            type="submit" 
+                            class="usa-button dja-form-placeholder" 
+                            name="_place_client_hold"
+                            >
+                                Yes, place hold
+                            </button>
+                        </li>
+                        <li class="usa-button-group__item">
+                            <button
+                            type="button"
+                            class="usa-button usa-button--unstyled padding-105 text-center"
+                            data-close-modal
+                            >
+                                Cancel
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <button
+            type="button"
+            class="usa-button usa-modal__close"
+            aria-label="Close this window"
+            data-close-modal
+            >
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                    <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
+                </svg>
+            </button>
+        </div>
+    </div>
+    {# Create a modal for when a domain is marked as ineligible #}
 {{ block.super }}
 {% endblock %}
\ No newline at end of file