From 7b167607d1601ab1f024d4fe5aacb93913c47fc2 Mon Sep 17 00:00:00 2001
From: Amy Chen <achen2401@gmail.com>
Date: Thu, 21 Mar 2024 09:00:53 -0700
Subject: [PATCH] EMPRO opt out UI (#4335)

https://movember.atlassian.net/browse/TN-3252
- Frontend calls the trigger api, i.e. `/api/patient/[userId]/trigger`
to retrieve the latest triggers and check if there is any that has
`_sequential_hard_trigger_count` > 1 (meaning then that it has been
asked previously) (see example triggers JSON):
```
{
 ...
  "timestamp": "2023-07-31T23:17:03+00:00",
  "triggers": {
    "domains": {
           "anxious": {
              "ironman_ss.11": "hard",
              "ironman_ss.12": "hard",
              "ironman_ss.13": "hard",
              "_sequential_hard_trigger_count": 3
            },
           "fatigue": {
              "ironman_ss.10": "hard",
              "ironman_ss.9": "hard",
              "_sequential_hard_trigger_count": 2
            },
          "general_pain": {
                "ironman_ss.1": "hard",
                "ironman_ss.2": "hard",
                "ironman_ss.3": "hard",
                "_sequential_hard_trigger_count": 3
              },
           "joint_pain": {
              "ironman_ss.4": "hard",
              "ironman_ss.5": "hard",
              "ironman_ss.6": "hard",
              "_sequential_hard_trigger_count": 2
            },
          "sad": {
            "ironman_ss.17": "hard",
            "ironman_ss.18": "hard",
            "ironman_ss.19": "hard",
            "_sequential_hard_trigger_count": 3
          },
    }
   }
...
}
```
- If it finds any qualifying domains, it will present the OPT-OUT UI
modal to the user, with the checkbox(es) that allow user to select which
domain(s) to opt out:

![OptoutInputs](https://github.com/uwcirg/truenth-portal/assets/12942714/e4679692-1f3a-4e75-bed0-27a22376d55f)

- frontend submits the domain(s) that user has chosen to opt out to the
backend API, `/api/patient/<user_id>/triggers/opt_out`, to be saved on
the database for later use (e.g. use in clinician email, adherence
report)

- One user submits the request, the EMPRO thank you modal that follows
will display which(s) domains the user has chosen to opt out:

![OptoutChosen](https://github.com/uwcirg/truenth-portal/assets/12942714/5752b438-eb89-4e4c-a113-98d9a8497a40)

---------

Co-authored-by: Amy Chen <clone@cesium.cirg.washington.edu>
Co-authored-by: Paul Bugni <pbugni@u.washington.edu>
---
 .../templates/eproms/assessment_engine.html   |   4 +
 .../eproms/assessment_engine/ae_base.html     |   1 +
 .../eproms/assessment_engine/ae_due.html      |   2 +-
 .../eproms/assessment_engine/ae_macros.html   |  78 +-
 .../test/SubStudyQuestionnaireTestData.json   | 371 ++++++++++
 .../data/common/test/TestTriggersData.json    | 111 +++
 portal/static/js/src/empro.js                 | 693 +++++++++++++-----
 portal/static/js/src/modules/TnthAjax.js      |  16 +
 portal/static/less/eproms.less                | 130 +++-
 9 files changed, 1220 insertions(+), 186 deletions(-)
 create mode 100644 portal/static/js/src/data/common/test/SubStudyQuestionnaireTestData.json
 create mode 100644 portal/static/js/src/data/common/test/TestTriggersData.json

diff --git a/portal/eproms/templates/eproms/assessment_engine.html b/portal/eproms/templates/eproms/assessment_engine.html
index aa86fd8526..43aec99d35 100644
--- a/portal/eproms/templates/eproms/assessment_engine.html
+++ b/portal/eproms/templates/eproms/assessment_engine.html
@@ -31,3 +31,7 @@
             <div class="error error-message"></div>
         </div>
 {% endif %}
+{%- from "eproms/assessment_engine/ae_macros.html" import empro_thankyou_modal, empro_optout_modal -%}
+{{empro_optout_modal(user)}}
+{{empro_thankyou_modal(user)}}
+
diff --git a/portal/eproms/templates/eproms/assessment_engine/ae_base.html b/portal/eproms/templates/eproms/assessment_engine/ae_base.html
index 58c9df09c4..4c2f8f1ac1 100644
--- a/portal/eproms/templates/eproms/assessment_engine/ae_base.html
+++ b/portal/eproms/templates/eproms/assessment_engine/ae_base.html
@@ -4,3 +4,4 @@
 <section class="portal-main portal-flex-container">
     {%- block body -%}{%- endblock -%}
 </section>
+<div class="loading-container hide"><div class="content"><i class="fa fa-spinner fa-spin fa-2x"></i> Loading ...</div></div>
diff --git a/portal/eproms/templates/eproms/assessment_engine/ae_due.html b/portal/eproms/templates/eproms/assessment_engine/ae_due.html
index 1352b93c85..7cf88f4ea6 100644
--- a/portal/eproms/templates/eproms/assessment_engine/ae_due.html
+++ b/portal/eproms/templates/eproms/assessment_engine/ae_due.html
@@ -1,4 +1,4 @@
-{%- from "eproms/assessment_engine/ae_macros.html" import render_header, render_greeting, render_card_content, render_call_to_button, due_card, completed_card, empro_due, empro_completed,  empro_expired, completed_cards -%}
+{%- from "eproms/assessment_engine/ae_macros.html" import render_header, render_greeting, render_card_content, render_call_to_button, due_card, completed_card, empro_due, empro_completed, empro_expired, completed_cards -%}
 {% extends "eproms/assessment_engine/ae_base.html" %}
 <!-- baseline due -->
 {% block head %}
diff --git a/portal/eproms/templates/eproms/assessment_engine/ae_macros.html b/portal/eproms/templates/eproms/assessment_engine/ae_macros.html
index 48ebd29e45..43e4f678bf 100644
--- a/portal/eproms/templates/eproms/assessment_engine/ae_macros.html
+++ b/portal/eproms/templates/eproms/assessment_engine/ae_macros.html
@@ -210,9 +210,6 @@ <h2 class="section-title">{{_("Completed Questionnaires")}}</h2>
                 {% endif %}
             </div>
         {%- endcall -%}
-        {% if substudy_assessment_status.overall_status == OverallStatus.completed %}
-            {{empro_thankyou_modal(user)}}
-        {% endif %}
     {%- endif -%}
 {%- endmacro -%}
 {%- macro empro_thankyou_card(full_name="") -%}
@@ -227,6 +224,11 @@ <h4>{{_("Your Support Team")}}</h4>
 
     </div>
 {%- endmacro -%}
+{%- macro empro_no_contact_notice() -%}
+    <div class="no-contact-list-wrapper hide">
+        <b>Note:</b> You have chosen not to be contacted about <span id="noContactTriggerList"></span>. Your care team will not discuss these issues this month.
+    </div>
+{%- endmacro -%}
 {%- macro empro_modal_hardTrigger_supportTeam_block(organization="") -%}
     <div class="item">
         <h4>{{_("Your Support Team")}}</h4>
@@ -234,6 +236,7 @@ <h4>{{_("Your Support Team")}}</h4>
         <ul class="hardTriggersDisplayList">
            <!-- dynamically populated based on user trigger domain(s) -->
         </ul>
+        {{empro_no_contact_notice()}}
         <p><b>{{_("To help address any issues, we've informed your care team and they'll be in contact with you soon.")}}</b></p>
         {% if organization  %}
             <p>{{_("In the meantime, if you have any questions or need assistance, please contact your team at %(organization)s directly. They're happy to help.", organization=organization)}}</p>
@@ -270,8 +273,8 @@ <h4>{{_("Your Health Tips")}}</h4>
 <!--sub-study macro -->
 {%- macro empro_thankyou_modal(user) -%}
     <!-- sub-study modal for display domain topic(s), resources link and summary report link to the user -->
-    <div class="modal fade" tabindex="-1" role="dialog" id="emproModal" {% if user and user.current_encounter().auth_method == 'url_authenticated'%}data-url-authenticated="true"{% endif %}>
-        <div class="modal-dialog">
+    <div class="modal fade" role="dialog" id="emproModal" tabindex="-1" aria-hidden="true" {% if user and user.current_encounter().auth_method == 'url_authenticated'%}data-url-authenticated="true"{% endif %}>
+        <div class="modal-dialog modal-xl">
             <div class="modal-content">
                 <button type="button" class="close" data-dismiss="modal" aria-label="{{_('Close')}}">
                     <span aria-hidden="true">&times;</span>
@@ -311,6 +314,71 @@ <h2 class="title">
     </div>
     {{empro_script()}}
 {%- endmacro -%}
+<!--sub-study optout modal macro -->
+{%- macro empro_optout_modal(user) -%}
+    <!-- sub-study modal for display domain topic(s), resources link and summary report link to the user -->
+    <div class="modal fade" role="dialog" id="emproOptOutModal" data-backdrop="static" tabindex="-1" aria-hidden="true" {% if user and user.current_encounter().auth_method == 'url_authenticated'%}data-url-authenticated="true"{% endif %}>
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <button type="button" class="close btn-dismiss" data-dismiss="modal" aria-label="{{_('Close')}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <div class="modal-body">
+                    <div class="header-section">
+                        <h2 class="title">{{_("We want to check with you ...")}}</h2>
+                        <div class="subtitle" style="margin-bottom: 8px">
+                            {{_("About your preference to be contacted by your care team for these ongoing issues.")}}
+                        </div>
+                    </div>
+                    <!-- <div class="items-section">
+                        <div class="item wrap">
+                            <ul>
+                                <li>anxious</li>
+                                <li>discouraged</li>
+                                <li>fatigue</li>
+                            </ul>
+                        </div>
+                    </div> -->
+                    <p>{{_("We’ve noticed you’re continuing to experience challenges with the issues listed below.")}}</p>
+                    <p class="text-warning">
+                        <b>{{_("If you prefer not to be contacted by your care team for any (or all) of these issues, please check the box(es) below.")}}</b>
+                    </p>
+                    <p>
+                        {{_("Your care team will continue to contact you as usual for other identified issues.")}}<br/>
+                        {{_("If you have any questions or need assistance, please contact your team directly at  %(organization)s. They'll be happy to help.", organization=user.organizations[0].name if user else "")}}
+                    </p>
+                    <div class="items-wrapper">
+                        <p><b>{{_("Please do not contact me about:")}}</b></p>
+                        <div class="items optout-domains-checkbox-list">
+                            <!-- 
+                            <div class="item">
+                                <input type="checkbox">
+                                <span>anxious</span>
+                            </div>
+                            <div class="item">
+                                <input type="checkbox">
+                                <span>discouraged</span>
+                            </div>
+                            -->
+                        </div>
+                    </div>
+                    <div class="error-message"></div>
+                    <div class="continue-container hide">
+                        <button class="btn btn-default continue-button">Continue</button>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <div>
+                        <button class="btn btn-empro-primary btn-submit">Submit</button>
+                        <button class="btn btn-default btn-dismiss">Dismiss</button>
+                    </div>
+                    <div class="saving-indicator-container hide"><i class="fa fa-spinner fa-spin"></i> {{_("Saving your choices...")}}</div>
+                    <div class="save-success-indicator-container text-success hide"><i class="fa fa-check"></i> {{_("Your choices are saved successfully.")}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+{%- endmacro -%}
 {%- macro empro_script() -%}
     <script src="{{ url_for('static', filename='js/dist/empro.bundle.js') }}" defer></script>
 {%- endmacro -%}
diff --git a/portal/static/js/src/data/common/test/SubStudyQuestionnaireTestData.json b/portal/static/js/src/data/common/test/SubStudyQuestionnaireTestData.json
new file mode 100644
index 0000000000..2b2ff3b0f2
--- /dev/null
+++ b/portal/static/js/src/data/common/test/SubStudyQuestionnaireTestData.json
@@ -0,0 +1,371 @@
+{
+  "entry": [
+    {
+      "author": {
+        "display": "patient demographics",
+        "reference": "https://eproms-test.cirg.washington.edu/api/demographics/4118"
+      },
+      "authored": "2024-03-15T23:16:54Z",
+      "extension": [
+        {
+          "url": "http://us.truenth.org/identity-codes/visit-name",
+          "visit_name": "Month 1"
+        }
+      ],
+      "group": {
+        "question": [
+          {
+            "answer": [
+              {
+                "valueString": "Frequently"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.1.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Frequently"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.1",
+            "text": "In the last 7 days, how OFTEN did you have pain?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Severe"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.2.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Severe"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.2",
+            "text": "In the last 7 days, what was the SEVERITY of your PAIN at its WORST?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Quite a bit"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.3.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Quite a bit"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.3",
+            "text": "In the last 7 days, how much did PAIN INTERFERE with your usual or daily activities?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Frequently"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.4.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Frequently"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.4",
+            "text": "In the last 7 days, how OFTEN did you have ACHING JOINTS (SUCH AS ELBOWS, KNEES, SHOULDERS)?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Severe"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.5.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Severe"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.5",
+            "text": "In the last 7 days, what was the SEVERITY of your ACHING JOINTS (SUCH AS ELBOWS, KNEES, SHOULDERS) at their WORST?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Quite a bit"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.6.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Quite a bit"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.6",
+            "text": "In the last 7 days, how much did ACHING JOINTS (SUCH AS ELBOWS, KNEES, SHOULDERS) INTERFERE with your usual or daily activities?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Severe"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.7.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Severe"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.7",
+            "text": "In the last 7 days, what was the SEVERITY of your INSOMNIA (INCLUDING DIFFICULTY FALLING ASLEEP, STAYING ASLEEP, OR WAKING UP EARLY) at its worst?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Quite a bit"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.8.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Quite a bit"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.8",
+            "text": "In the last 7 days, how much did INSOMNIA (INCLUDING DIFFICULTY FALLING ASLEEP, STAYING ASLEEP, OR WAKING UP EARLY) INTERFERE with your usual or daily activities?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Severe"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.9.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Severe"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.9",
+            "text": "In the last 7 days, what was the SEVERITY of your FATIGUE, TIREDNESS, OR LACK OF ENERGY at its WORST?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Quite a bit"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.10.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Quite a bit"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.10",
+            "text": "In the last 7 days, how much did FATIGUE, TIREDNESS, OR LACK OF ENERGY INTERFERE with your usual or daily activities?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Frequently"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.11.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Frequently"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.11",
+            "text": "In the last 7 days, how OFTEN did you feel ANXIETY?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Severe"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.12.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Severe"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.12",
+            "text": "In the last 7 days, what was the SEVERITY of your ANXIETY at its WORST?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Quite a bit"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.13.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Quite a bit"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.13",
+            "text": "In the last 7 days, how much did ANXIETY INTERFERE with your usual or daily activities?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Frequently"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.14.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Frequently"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.14",
+            "text": "In the last 7 days, how OFTEN did you FEEL THAT NOTHING COULD CHEER YOU UP?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Severe"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.15.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Severe"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.15",
+            "text": "In the last 7 days, what was the SEVERITY of your FEELINGS THAT NOTHING COULD CHEER YOU UP at THEIR WORST?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Quite a bit"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.16.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Quite a bit"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.16",
+            "text": "In the last 7 days, how much did THE FEELING THAT NOTHING COULD CHEER YOU UP INTERFERE with your usual or daily activities?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Frequently"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.17.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Frequently"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.17",
+            "text": "In the last 7 days, how OFTEN did you have SAD OR UNHAPPY FEELINGS?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Severe"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.18.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Severe"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.18",
+            "text": "In the last 7 days, what was the SEVERITY of your SAD OR UNHAPPY FEELINGS at their WORST?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Quite a bit"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.19.4",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Quite a bit"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.19",
+            "text": "In the last 7 days, how much did SAD OR UNHAPPY FEELINGS INTERFERE with your usual or daily activities?"
+          },
+          {
+            "answer": [
+              {
+                "valueString": "Quite a bit"
+              },
+              {
+                "valueCoding": {
+                  "code": "ironman_ss.20.3",
+                  "system": "https://eproms-test.cirg.washington.edu/api/codings/assessment",
+                  "text": "Quite a bit"
+                }
+              }
+            ],
+            "linkId": "ironman_ss.20",
+            "text": "During the past week: Has your physical condition or medical treatment interfered with your social activities?"
+          }
+        ]
+      },
+      "identifier": {
+        "label": "cPRO survey session ID",
+        "system": "https://ae-eproms-test.cirg.washington.edu",
+        "use": "official",
+        "value": "3706.0"
+      },
+      "questionnaire": {
+        "display": "Treatment symptoms and side effects",
+        "reference": "https://eproms-test.cirg.washington.edu/api/questionnaires/ironman_ss"
+      },
+      "resourceType": "QuestionnaireResponse",
+      "source": {
+        "display": "patient demographics",
+        "reference": "https://eproms-test.cirg.washington.edu/api/demographics/4118"
+      },
+      "status": "completed",
+      "subject": {
+        "display": "patient demographics",
+        "reference": "https://eproms-test.cirg.washington.edu/api/demographics/4118"
+      }
+    }
+  ],
+  "link": [
+    {
+      "href": "https://eproms-test.cirg.washington.edu/api/patient/4118/assessment/ironman_ss",
+      "rel": "self"
+    }
+  ],
+  "resourceType": "Bundle",
+  "total": 1,
+  "type": "searchset",
+  "updated": "2023-07-12T22:20:17.897095Z"
+}
diff --git a/portal/static/js/src/data/common/test/TestTriggersData.json b/portal/static/js/src/data/common/test/TestTriggersData.json
new file mode 100644
index 0000000000..e504b860f7
--- /dev/null
+++ b/portal/static/js/src/data/common/test/TestTriggersData.json
@@ -0,0 +1,111 @@
+{
+  "state": "resolved",
+  "timestamp": "2023-07-31T23:17:03+00:00",
+  "triggers": {
+    "action_state": "completed",
+    "actions": {
+      "email": [
+        {
+          "context": "patient thank you",
+          "email_message_id": 147757,
+          "timestamp": "2023-07-10T23:17:04.336385Z"
+        },
+        {
+          "context": "initial staff alert",
+          "email_message_id": 147758,
+          "timestamp": "2023-07-10T23:17:04.767591Z"
+        },
+        {
+          "context": "initial staff alert",
+          "email_message_id": 147759,
+          "timestamp": "2023-07-10T23:17:04.981972Z"
+        },
+        {
+          "context": "initial staff alert",
+          "email_message_id": 147760,
+          "timestamp": "2023-07-10T23:17:05.197306Z"
+        },
+        {
+          "context": "initial staff alert",
+          "email_message_id": 147761,
+          "timestamp": "2023-07-10T23:17:05.413215Z"
+        },
+        {
+          "context": "initial staff alert",
+          "email_message_id": 147762,
+          "timestamp": "2023-07-10T23:17:05.657467Z"
+        },
+        {
+          "context": "initial staff alert",
+          "email_message_id": 147763,
+          "timestamp": "2023-07-10T23:17:05.879160Z"
+        },
+        {
+          "context": "initial staff alert",
+          "email_message_id": 147764,
+          "timestamp": "2023-07-10T23:17:06.088223Z"
+        },
+        {
+          "context": "initial staff alert",
+          "email_message_id": 147765,
+          "timestamp": "2023-07-10T23:17:06.284333Z"
+        }
+      ]
+    },
+    "domain": {
+      "anxious": {
+        "ironman_ss.11": "hard",
+        "ironman_ss.12": "hard",
+        "ironman_ss.13": "hard",
+        "_sequential_hard_trigger_count": 2
+      },
+      "discouraged": {
+        "ironman_ss.14": "hard",
+        "ironman_ss.15": "hard",
+        "ironman_ss.16": "hard",
+        "_sequential_hard_trigger_count": 2
+      },
+      "fatigue": {
+        "ironman_ss.10": "hard",
+        "ironman_ss.9": "hard",
+        "_sequential_hard_trigger_count": 0
+      },
+      "general_pain": {
+        "ironman_ss.1": "hard",
+        "ironman_ss.2": "hard",
+        "ironman_ss.3": "hard",
+        "_sequential_hard_trigger_count": 2
+      },
+      "insomnia": { "ironman_ss.7": "hard", "ironman_ss.8": "hard" },
+      "joint_pain": {
+        "ironman_ss.4": "hard",
+        "ironman_ss.5": "hard",
+        "ironman_ss.6": "hard",
+        "_sequential_hard_trigger_count": 0
+      },
+      "sad": {
+        "ironman_ss.17": "hard",
+        "ironman_ss.18": "hard",
+        "ironman_ss.19": "hard",
+        "_sequential_hard_trigger_count": 2
+      },
+      "social_isolation": {
+        "ironman_ss.20": "hard",
+        "_sequential_hard_trigger_count": 2
+      }
+    },
+    "resolution": {
+      "authored": "2023-07-25T16:21:24Z",
+      "qb_iteration": null,
+      "qnr_id": 4162
+    },
+    "source": {
+      "authored": "2023-07-25T23:16:54Z",
+      "qb_id": 114,
+      "qb_iteration": null,
+      "qnr_id": 4161
+    }
+  },
+  "user_id": 4118,
+  "visit_month": 1
+}
diff --git a/portal/static/js/src/empro.js b/portal/static/js/src/empro.js
index b2122845cf..57c061adc0 100644
--- a/portal/static/js/src/empro.js
+++ b/portal/static/js/src/empro.js
@@ -1,204 +1,551 @@
 import EMPRO_DOMAIN_MAPPINGS from "./data/common/empro_domain_mappings.json";
-import {EPROMS_SUBSTUDY_ID, EPROMS_SUBSTUDY_QUESTIONNAIRE_IDENTIFIER} from "./data/common/consts.js";
+import {
+  EPROMS_SUBSTUDY_ID,
+  EPROMS_SUBSTUDY_QUESTIONNAIRE_IDENTIFIER,
+} from "./data/common/consts.js";
 import tnthAjax from "./modules/TnthAjax.js";
 import tnthDate from "./modules/TnthDate.js";
+import TestResponsesJson from "./data/common/test/SubStudyQuestionnaireTestData.json";
+import TestTriggersJson from "./data/common/test/TestTriggersData.json";
+import { getUrlParameter } from "./modules/Utility";
 
-var emproObj = function() {
-    this.domains = [];
-    this.mappedDomains = [];
-    this.hardTriggerDomains = [];
-    this.softTriggerDomains = [];
-    this.hasHardTrigger = false;
-    this.hasSoftTrigger = false;
-    this.userId = 0;
-};
-emproObj.prototype.populateDomainDisplay = function() {
-    this.mappedDomains.forEach(domain => {
-        $("#emproModal .triggersButtonsContainer").append(
-            `<a class="btn btn-empro-primary" href="/substudy-tailored-content#/${domain}" target="_blank">
-            ${i18next.t("{domain} Tips").replace("{domain}", domain.replace(/\_/g, " "))}
-            </a>`
-        );
+var emproObj = function () {
+  this.domains = [];
+  this.mappedDomains = [];
+  this.hardTriggerDomains = [];
+  this.softTriggerDomains = [];
+  this.optOutDomains = [];
+  this.selectedOptOutDomains = [];
+  this.submittedOptOutDomains = [];
+  this.optOutSubmitData = null;
+  this.hasHardTrigger = false;
+  this.hasSoftTrigger = false;
+  this.userId = 0;
+  this.visitMonth = 0;
+  this.authorDate = null;
+  this.cachedAccessKey = null;
+};
+emproObj.prototype.getDomainDisplay = function (domain) {
+  if (!domain) return "";
+  return domain.replace(/_/g, " ");
+};
+emproObj.prototype.populateDomainDisplay = function () {
+  var triggerButtonsContainerElement = $(
+    "#emproModal .triggersButtonsContainer"
+  );
+  if (!triggerButtonsContainerElement.hasClass("added")) {
+    this.mappedDomains.forEach((domain) => {
+      triggerButtonsContainerElement.append(
+        `<a class="btn btn-empro-primary" 
+            href="/substudy-tailored-content#/${domain}"
+            target="_blank">
+            ${i18next
+              .t("{domain} Tips")
+              .replace("{domain}", this.getDomainDisplay(domain))}
+        </a>`
+      );
     });
-    this.hardTriggerDomains.forEach(domain => {
-        $("#emproModal .hardTriggersDisplayList").append(`<li>${domain.replace(/\_/g, " ")}</li>`);
+    triggerButtonsContainerElement.addClass("added");
+  }
+  var hardTriggersDisplayListElement = $(
+    "#emproModal .hardTriggersDisplayList"
+  );
+  if (!hardTriggersDisplayListElement.hasClass("added")) {
+    this.hardTriggerDomains.forEach((domain) => {
+      hardTriggersDisplayListElement.append(
+        `<li>${this.getDomainDisplay(domain)}</li>`
+      );
     });
+    hardTriggersDisplayListElement.addClass("added");
+  }
 };
-emproObj.prototype.initThankyouModal = function(autoShow) {
-    if (!$("#emproModal").length) {
-        return;
-    }
-    $("#emproModal").modal({
-        show: autoShow
-    });
+emproObj.prototype.hasThankyouModal = function () {
+  return $("#emproModal").length > 0;
 };
-emproObj.prototype.initReportLink = function() {
-    if (!$("#emproModal").length) {
-        return;
+emproObj.prototype.initThankyouModal = function (autoShow) {
+  if (!this.hasThankyouModal()) {
+    return;
+  }
+  $("#emproModal").modal(autoShow ? "show" : "hide");
+};
+emproObj.prototype.populateSelectedOptoutUI = function () {
+  if (
+    !this.submittedOptOutDomains ||
+    this.submittedOptOutDomains.length === 0
+  ) {
+    return;
+  }
+  console.log("Submitted opt out domains: ", this.submittedOptOutDomains);
+  var contentHTML = this.submittedOptOutDomains
+    .map((domain) => this.getDomainDisplay(domain))
+    .join(", ");
+  $("#emproModal #noContactTriggerList").html("<b>" + contentHTML + "</b>");
+  $("#emproModal .no-contact-list-wrapper").removeClass("hide");
+};
+emproObj.prototype.populateOptoutInputItems = function () {
+  var optOutDomainsListElement = $(
+    "#emproOptOutModal .optout-domains-checkbox-list"
+  );
+  if (!optOutDomainsListElement.length) return;
+  if (!this.optOutDomains || !this.optOutDomains.length) return;
+  if (optOutDomainsListElement.find(".ck-input").length) return;
+  // render checkbox input element for each domain
+  this.optOutDomains.forEach((domain) => {
+    optOutDomainsListElement.append(`
+            <div class="item">
+              <input type="checkbox" class="ck-input ck-input-${domain}" value="${domain}">
+              <span class="ck-display" data-domain="${domain}">
+                ${this.getDomainDisplay(domain)}
+              </span>
+            </div>
+        `);
+  });
+};
+emproObj.prototype.hasSelectedOptOutDomains = function () {
+  return (
+    EmproObj.selectedOptOutDomains && EmproObj.selectedOptOutDomains.length
+  );
+};
+emproObj.prototype.setOptoutSubmitData = function () {
+  if (!EmproObj.hasSelectedOptOutDomains()) {
+    return;
+  }
+  var triggerObject = {};
+  EmproObj.selectedOptOutDomains.forEach((item) => {
+    triggerObject[item] = {
+      _opt_out_next_visit: true,
+    };
+  });
+  var submitData = {
+    user_id: EmproObj.userId,
+    visit_month: EmproObj.visitMonth,
+    triggers: {
+      domains: triggerObject,
+    },
+  };
+  console.log("Data to be submitted for optout: ", submitData);
+  EmproObj.optOutSubmitData = submitData;
+};
+emproObj.prototype.setError = function (strSeletor, text) {
+  if (!document.querySelector(strSeletor)) return;
+  document.querySelector(strSeletor).innerText = text;
+};
+emproObj.prototype.setButtonsDisableState = function (
+  strSelector,
+  boolDisable
+) {
+  $(strSelector).attr("disabled", boolDisable);
+};
+emproObj.prototype.toggleSavingIndicator = function (strSelector, boolShow) {
+  if (boolShow) {
+    $(strSelector).removeClass("hide");
+    return;
+  }
+  $(strSelector).addClass("hide");
+};
+emproObj.prototype.setOptoutError = function (text) {
+  EmproObj.setError("#emproOptOutModal .error-message", text);
+};
+emproObj.prototype.setOptoutButtonsState = function (boolDisable) {
+  EmproObj.setButtonsDisableState(
+    "#emproOptOutModal .btn-submit, #emproOptOutModal .btn-dismiss",
+    boolDisable
+  );
+};
+emproObj.prototype.toggleOptoutSavingIndicator = function (boolShow) {
+  EmproObj.toggleSavingIndicator(
+    "#emproOptOutModal .saving-indicator-container",
+    boolShow
+  );
+};
+emproObj.prototype.hasErrorText = function () {
+  return !!$("#emproOptOutModal .error-message").text().trim();
+};
+emproObj.prototype.onBeforeSubmitOptoutData = function () {
+  // reset error
+  EmproObj.setOptoutError("");
+  // set data in the correct format for submission to API
+  EmproObj.setOptoutSubmitData();
+  // disable buttons
+  EmproObj.setOptoutButtonsState(true);
+  // display saving in progress indicator icon
+  EmproObj.toggleOptoutSavingIndicator(true);
+};
+emproObj.prototype.onAfterSubmitOptoutData = function (data) {
+  // hide saving in progress indicator icon
+  EmproObj.toggleOptoutSavingIndicator(false);
+  // show error if any
+  if (data && data.error) {
+    // enable buttons
+    EmproObj.setOptoutButtonsState(false);
+    EmproObj.setOptoutError(
+      i18next.t(
+        "System error: Unable to save your choices.\r\nPlease click 'Submit' to try again. \r\nOtherwise click 'Dismiss' to continue."
+      )
+    );
+    return false;
+  }
+  // show successful save feedback
+  $("#emproOptOutModal .save-success-indicator-container").removeClass("hide");
+
+  setTimeout(() => {
+    // enable buttons
+    EmproObj.setOptoutButtonsState(false);
+    EmproObj.submittedOptOutDomains = EmproObj.selectedOptOutDomains;
+    EmproObj.populateSelectedOptoutUI();
+    EmproObj.initOptOutModal(false);
+    EmproObj.initThankyouModal(true);
+  }, 1000);
+  return true;
+};
+emproObj.prototype.handleSubmitOptoutData = function () {
+  if (!EmproObj.hasErrorText() && !EmproObj.hasSelectedOptOutDomains()) {
+    EmproObj.setOptoutError(
+      i18next.t(
+        "You didn't select anything. Are you sure?\r\nIf so, click 'Dismiss' to continue."
+      )
+    );
+    return;
+  }
+  if (!EmproObj.hasSelectedOptOutDomains()) {
+    return;
+  }
+  EmproObj.onBeforeSubmitOptoutData();
+  tnthAjax.setOptoutTriggers(
+    EmproObj.userId,
+    {
+      data: JSON.stringify(EmproObj.optOutSubmitData),
+      max_attempts: 2,
+    },
+    (data) => {
+      return EmproObj.onAfterSubmitOptoutData(data);
     }
-    let reportURL = `/patients/${this.userId}/longitudinal-report/${EPROMS_SUBSTUDY_QUESTIONNAIRE_IDENTIFIER}`;
-    /*
-     * link to longitudinal report
-     */
-    $(".longitudinal-report-link").attr("href", reportURL);
+  );
 };
-emproObj.prototype.initTriggerItemsVis = function() {
-    if (!$("#emproModal").length) {
+emproObj.prototype.initOptOutElementEvents = function () {
+  if (!this.hasOptOutModal()) {
+    return;
+  }
+  // submit buttons
+  $("#emproOptOutModal .btn-submit").on("click", function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    EmproObj.handleSubmitOptoutData();
+  });
+
+  // close and dismiss buttons
+  $("#emproOptOutModal .btn-dismiss").on("click", function (e) {
+    e.stopPropagation();
+    if (!EmproObj.hasErrorText()) {
+      if (!EmproObj.hasSelectedOptOutDomains()) {
+        EmproObj.setOptoutError(
+          i18next.t(
+            "You didn't select anything. Are you sure?\r\nIf so, click 'Dismiss' again to continue."
+          )
+        );
         return;
-    }
-    if (this.hasHardTrigger) {
-        $("#emproModal .hard-trigger").addClass("active");
-        $("#emproModal .no-trigger").hide();
-         //present thank you modal if hard trigger present
-        $("#emproModal").modal("show");
+      } else {
+        EmproObj.setOptoutError(
+          i18next.t(
+            "You have made selection(s). Click 'Submit' to save your selection(s).\r\nOtherwise, click 'Dismiss' again to continue."
+          )
+        );
         return;
+      }
     }
-    if (this.hasSoftTrigger) {
-        $("#emproModal .soft-trigger").addClass("active");
-        $("#emproModal .no-trigger").hide();
-        return;
+    EmproObj.initOptOutModal(false);
+    EmproObj.initThankyouModal(true);
+  });
+
+  // checkboxes
+  $("#emproOptOutModal .ck-input").on("click", function () {
+    EmproObj.setOptoutError("");
+    if ($(this).is(":checked")) {
+      if (
+        !EmproObj.selectedOptOutDomains.find((val) => val === $(this).val())
+      ) {
+        EmproObj.selectedOptOutDomains.push($(this).val());
+      }
+    } else {
+      EmproObj.selectedOptOutDomains = EmproObj.selectedOptOutDomains.filter(
+        (val) => val !== $(this).val()
+      );
     }
+  });
+
+  // checkbox display text, clicking on which should check or uncheck the associated checkbox
+  $("#emproOptOutModal .ck-display").on("click", function () {
+    EmproObj.setOptoutError("");
+    var domain = $(this).attr("data-domain");
+    var associatedCkInput = $("#emproOptOutModal .ck-input-" + domain);
+    if (associatedCkInput.is(":checked"))
+      associatedCkInput.prop("checked", false);
+    else associatedCkInput.prop("checked", true);
+  });
+
+  // continue button that displays when error
+  $("#emproOptOutModal .continue-button").on("click", function () {
+    EmproObj.initOptOutModal(false);
+    EmproObj.initThankyouModal(true);
+  });
 };
-emproObj.prototype.init = function() {
-    tnthAjax.getCurrentUser((data) => {
-        if (!data || !data.id) return;
-        this.userId = data.id;
-        /*
-        * construct user report URL
-        */
-        this.initReportLink();
-        tnthAjax.getUserResearchStudies(this.userId, "patient", false, (data) => {
-            if (data[EPROMS_SUBSTUDY_ID] &&
-                data[EPROMS_SUBSTUDY_ID].errors &&
-                data[EPROMS_SUBSTUDY_ID].errors.length) {
-                //don't present popup if errors e.g. base study questionnaire due
-                return false;
-            }
-            tnthAjax.assessmentReport(this.userId, EPROMS_SUBSTUDY_QUESTIONNAIRE_IDENTIFIER, (data) => {
-                if (!data || !data.entry || !data.entry.length) {
-                   this.initThankyouModal(false);
-                   return;
-                }
-                /*
-                 * make sure data item with the latest authored date is first
-                 */
-                let assessmentData = (data.entry).sort(function(a, b) {
-                    return new Date(b.authored) - new Date(a.authored);
-                });
-                let assessmentDate = assessmentData[0]["authored"];
-                let [today, authoredDate, status] = [
-                    tnthDate.getDateWithTimeZone(new Date(), "yyyy-mm-dd"),
-                    tnthDate.getDateWithTimeZone(new Date(assessmentDate), "yyyy-mm-dd"),
-                    assessmentData[0].status];
-                let assessmentCompleted = String(status).toLowerCase() === "completed";
-
-                /*
-                 * associating each thank you modal popup accessed by assessment date
-                 */
-                let cachedAccessKey = `EMPRO_MODAL_ACCESSED_${this.userId}_${today}_${assessmentDate}`;
-                /*
-                 * automatically pops up thank you modal IF sub-study assessment is completed,
-                 * and sub-study assessment is completed today and the thank you modal has not already popped up today
-                 */
-                let autoShowModal = !localStorage.getItem(cachedAccessKey) &&
-                                    assessmentCompleted &&
-                                    today === authoredDate;
-                this.initThankyouModal(autoShowModal);
-                if (autoShowModal) {
-                    /*
-                     * set thank you modal accessed flag here
-                     */
-                    localStorage.setItem(cachedAccessKey, `true`);
-                }
-                /*
-                 * don't continue on to invoke trigger API if sub-study assessment is not completed
-                 */
-                if (!assessmentCompleted) {
-                    this.initThankyouModal(false);
-                    return;
-                }
-                this.initTriggerDomains();
-            });
-        })
-    });
+emproObj.prototype.hasOptOutModal = function () {
+  return $("#emproOptOutModal").length > 0;
 };
-emproObj.prototype.setLoadingVis = function(done) {
-    if (done) {
-        $("#emproModal .items-section").removeClass("loading");
-        return;
-    }
-    $("#emproModal .items-section").addClass("loading");
-}
-emproObj.prototype.initTriggerDomains = function() {
-    if (!$("#emproModal").length) {
-        return;
-    }
-    var self = this;
-    this.setLoadingVis();
-    tnthAjax.getSubStudyTriggers(this.userId, {maxTryAttempts: 3}, (data) => {
-        if (!data || data.error || !data.triggers || !data.triggers.domain) {
-            this.initThankyouModal(false);
-            this.setLoadingVis(true);
-            return false;
-        }
+emproObj.prototype.initOptOutModal = function (autoShow) {
+  if (!this.hasOptOutModal()) {
+    return;
+  }
+  $("#emproOptOutModal").modal(autoShow ? "show" : "hide");
+};
+emproObj.prototype.initReportLink = function () {
+  if (!this.hasThankyouModal()) return;
 
-        for (let key in data.triggers.domain) {
-            if (!Object.keys(data.triggers.domain[key]).length) {
-                continue;
+  let reportURL = `/patients/${this.userId}/longitudinal-report/${EPROMS_SUBSTUDY_QUESTIONNAIRE_IDENTIFIER}`;
+  /*
+   * link to longitudinal report
+   */
+  $(".longitudinal-report-link").attr("href", reportURL);
+};
+emproObj.prototype.initTriggerItemsVis = function () {
+  if (!this.hasThankyouModal()) return;
+  if (this.hasHardTrigger) {
+    $("#emproModal .hard-trigger").addClass("active");
+    $("#emproModal .no-trigger").hide();
+    return;
+  }
+  if (this.hasSoftTrigger) {
+    $("#emproModal .soft-trigger").addClass("active");
+    $("#emproModal .no-trigger").hide();
+    return;
+  }
+};
+emproObj.prototype.init = function () {
+  tnthAjax.getCurrentUser((data) => {
+    if (!data || !data.id) return;
+    this.userId = data.id;
+
+    const isDebugging = getUrlParameter("debug");
+
+    this.setLoadingVis(true);
+
+    tnthAjax.getUserResearchStudies(this.userId, "patient", false, (data) => {
+      if (
+        !isDebugging &&
+        (!data[EPROMS_SUBSTUDY_ID] ||
+          (data[EPROMS_SUBSTUDY_ID] &&
+            data[EPROMS_SUBSTUDY_ID].errors &&
+            data[EPROMS_SUBSTUDY_ID].errors.length))
+      ) {
+        //don't present popup if errors e.g. base study questionnaire due
+        this.setLoadingVis();
+        return false;
+      }
+      /*
+       * construct user report URL
+       */
+      this.initReportLink();
+
+      tnthAjax.assessmentReport(
+        this.userId,
+        EPROMS_SUBSTUDY_QUESTIONNAIRE_IDENTIFIER,
+        (data) => {
+          if (isDebugging) {
+            data = TestResponsesJson;
+            data.entry[0].authored = new Date().toISOString();
+          }
+          console.log("Questionnaire response data: ", data);
+          // no questionnaire data, just return here
+          if (!data || !data.entry || !data.entry.length) {
+            this.setLoadingVis(); // hide loading indicator
+            return;
+          }
+          /*
+           * make sure data item with the latest authored date is first
+           */
+          let assessmentData = data.entry.sort(function (a, b) {
+            return new Date(b.authored) - new Date(a.authored);
+          });
+          let assessmentDate = assessmentData[0]["authored"];
+          let [today, authoredDate, status] = [
+            tnthDate.getDateWithTimeZone(new Date(), "yyyy-mm-dd"),
+            tnthDate.getDateWithTimeZone(
+              new Date(assessmentDate),
+              "yyyy-mm-dd"
+            ),
+            assessmentData[0].status,
+          ];
+          let assessmentCompleted =
+            String(status).toLowerCase() === "completed";
+          console.log(
+            "today ",
+            today,
+            "author date ",
+            authoredDate,
+            " assessment completed ",
+            assessmentCompleted
+          );
+
+          this.authorDate = authoredDate;
+
+          /*
+           * associating each thank you modal popup accessed by assessment date
+           */
+          let cachedAccessKey = `EMPRO_MODAL_ACCESSED_${this.userId}_${today}_${authoredDate}`;
+          this.cachedAccessKey = cachedAccessKey;
+
+          const clearCacheData = getUrlParameter("clearCache");
+          if (clearCacheData) {
+            localStorage.removeItem(this.cachedAccessKey);
+          }
+          /*
+           * automatically pops up thank you modal IF sub-study assessment is completed,
+           * and sub-study assessment is completed today and the thank you modal has not already popped up today
+           */
+          let autoShowModal =
+            !localStorage.getItem(cachedAccessKey) &&
+            assessmentCompleted &&
+            today === authoredDate;
+
+          if (!autoShowModal) {
+            this.setLoadingVis(); // hide loading indicator when done
+            return;
+          }
+
+          this.initTriggerDomains((result) => {
+            this.setLoadingVis(); // hide loading indicator when done
+            if (result && result.error) {
+              console.log("Error retrieving trigger data");
+              if (result.reason) {
+                console.log("Error retrieving trigger data: ", result.reason);
+              }
             }
-            let mappedDomain = EMPRO_DOMAIN_MAPPINGS[key];
             /*
-             * get all user domains that have related triggers
+             * set thank you modal accessed flag here
              */
-            if (self.domains.indexOf(key) === -1) {
-                self.domains.push(key);
-            }
-             /*
-             * get all mapped domains for tailored content
-             */
-            if (self.mappedDomains.indexOf(mappedDomain) === -1) {
-                self.mappedDomains.push(mappedDomain);
-            }
-            for (let q in data.triggers.domain[key]) {
-                if (data.triggers.domain[key][q] === "hard") {
-                    self.hasHardTrigger = true;
-                    /*
-                     * get all domain topics that have hard trigger
-                     */
-                    if (self.hardTriggerDomains.indexOf(key) === -1) {
-                        self.hardTriggerDomains.push(key);
-                    }
-                }
-                if (data.triggers.domain[key][q] === "soft") {
-                    self.hasSoftTrigger = true;
-                     /*
-                     * get all domain topics that have soft trigger
-                     */
-                    if (self.softTriggerDomains.indexOf(key) === -1) {
-                        self.softTriggerDomains.push(key);
-                    }
-                }
+            localStorage.setItem(cachedAccessKey, `true`);
+
+            // console.log("Opt out domain? ", this.optOutDomains);
+            if (this.optOutDomains.length > 0) {
+              this.populateOptoutInputItems();
+              this.initOptOutElementEvents();
+              this.initOptOutModal(true);
+              this.initThankyouModal(false);
+              return;
             }
+
+            this.initThankyouModal(true);
+          });
         }
+      );
+    });
+  });
+};
+emproObj.prototype.setLoadingVis = function (loading) {
+  var LOADING_INDICATOR_ID = ".portal-body .loading-container";
+  if (!loading) {
+    $(LOADING_INDICATOR_ID).addClass("hide");
+    return;
+  }
+  $(LOADING_INDICATOR_ID).removeClass("hide");
+};
+emproObj.prototype.processTriggerData = function (data) {
+  if (!data || data.error || !data.triggers || !data.triggers.domain) {
+    //this.initThankyouModal(false);
+    console.log("No trigger data");
+    return false;
+  }
+  var self = this;
+  console.log("trigger data ", data);
 
+  // set visit month related to trigger data
+  this.visitMonth = data.visit_month;
+
+  for (let key in data.triggers.domain) {
+    if (!Object.keys(data.triggers.domain[key]).length) {
+      continue;
+    }
+    let mappedDomain = EMPRO_DOMAIN_MAPPINGS[key];
+    /*
+     * get all user domains that have related triggers
+     */
+    if (self.domains.indexOf(key) === -1) {
+      self.domains.push(key);
+    }
+    /*
+     * get all mapped domains for tailored content
+     */
+    if (self.mappedDomains.indexOf(mappedDomain) === -1) {
+      self.mappedDomains.push(mappedDomain);
+    }
+    for (let q in data.triggers.domain[key]) {
+      // if sequence count > 1, that means it has been asked before
+      if (
+        q === "_sequential_hard_trigger_count" &&
+        parseInt(data.triggers.domain[key][q]) > 1
+      ) {
+        // console.log("domain? ", key, " sequence ", parseInt(data.triggers.domain[key][q]));
+        if (self.optOutDomains.indexOf(key) === -1) {
+          self.optOutDomains.push(key);
+        }
+      }
+      if (data.triggers.domain[key][q] === "hard") {
+        self.hasHardTrigger = true;
         /*
-         * display user domain topic(s)
+         * get all domain topics that have hard trigger
          */
-        this.populateDomainDisplay();
+        if (self.hardTriggerDomains.indexOf(key) === -1) {
+          self.hardTriggerDomains.push(key);
+        }
+      }
+      if (data.triggers.domain[key][q] === "soft") {
+        self.hasSoftTrigger = true;
         /*
-         * show/hide sections based on triggers
+         * get all domain topics that have soft trigger
          */
-        this.initTriggerItemsVis();
+        if (self.softTriggerDomains.indexOf(key) === -1) {
+          self.softTriggerDomains.push(key);
+        }
+      }
+    }
+  }
+};
+emproObj.prototype.initTriggerDomains = function (callbackFunc) {
+  var callback = callbackFunc || function () {};
+  if (!this.hasThankyouModal()) {
+    callback({ error: true });
+    return;
+  }
+  //var self = this;
+  const isDebugging = getUrlParameter("debug");
+  tnthAjax.getSubStudyTriggers(this.userId, { maxTryAttempts: isDebugging ? 1 : 3 }, (data) => {
+    if (isDebugging) {
+      data = TestTriggersJson;
+    }
+    if (!data || data.error || !data.triggers || !data.triggers.domain) {
+      callback({ error: true, reason: "no trigger data" });
+      return false;
+    }
 
-        //finish loading
-        this.setLoadingVis(true);
+    this.processTriggerData(data);
 
-       //console.log("self.domains? ", self.domains);
-       //console.log("has hard triggers ", self.hasHardTrigger);
-       //console.log("has soft triggers ", self.hasSoftTrigger);
-    });
+    /*
+     * display user domain topic(s)
+     */
+    this.populateDomainDisplay();
+    /*
+     * show/hide sections based on triggers
+     */
+    this.initTriggerItemsVis();
+
+    callback(data);
+
+    //console.log("self.domains? ", self.domains);
+    //console.log("has hard triggers ", self.hasHardTrigger);
+    //console.log("has soft triggers ", self.hasSoftTrigger);
+  });
 };
-$(document).ready(function() {
-    let EmproObj = new emproObj();
-    EmproObj.init();
+let EmproObj = new emproObj();
+$(document).ready(function () {
+  EmproObj.init();
 });
diff --git a/portal/static/js/src/modules/TnthAjax.js b/portal/static/js/src/modules/TnthAjax.js
index 7e14c3949d..1c07b8df82 100644
--- a/portal/static/js/src/modules/TnthAjax.js
+++ b/portal/static/js/src/modules/TnthAjax.js
@@ -378,6 +378,22 @@ export default { /*global $ */
             return true;
         });
     },
+    "setOptoutTriggers": function(userId, params, callback) {
+        callback = callback || function() {};
+        params = params || {};
+        if (!userId) {
+            callback({error: true});
+            return false;
+        }
+        this.sendRequest(`/api/patient/${userId}/triggers/opt_out`, "PUT", userId, params, (data) => {
+            if (!data || data.error) {
+                callback({"error": true});
+                return false;
+            }
+            callback(data);
+            return true;
+        });
+    },
     "getCliniciansList": function(orgIds, callback) {
         callback = callback || function() {};
         orgIds = orgIds || [];
diff --git a/portal/static/less/eproms.less b/portal/static/less/eproms.less
index baf19b4510..649facead7 100644
--- a/portal/static/less/eproms.less
+++ b/portal/static/less/eproms.less
@@ -3314,6 +3314,25 @@ body.portal .copyright-container  {
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
+  .loading-container {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    background: rgba(75, 83, 91, 0.3);
+    width: 100%;
+    height: 100%;
+    .content {
+      color: #FFF;
+      position: fixed;
+      left: calc(~"50% - 50px");
+      top: calc(~"50% - 50px");
+      font-size: 1.5em;
+      letter-spacing: 0.1rem;
+      z-index: 5;
+    }
+
+  }
 }
 .portal-item {
   width: 100%;
@@ -4020,11 +4039,13 @@ section.header {
   }
 }
 
-#emproModal {
+#emproModal,
+#emproOptOutModal {
+  overflow-y: auto;
   .modal-dialog {
     width: 100%;
     padding: 8px;
-    margin: 0 auto;
+    margin: 16px auto;
   }
   .modal-body {
     padding: 16px 32px 0;
@@ -4046,6 +4067,33 @@ section.header {
     p {
       margin: 0 0 12px;
     }
+    .item {
+      .ck-input {
+        margin: 4px 2px 8px 0;
+      }
+    }
+    .continue-container {
+      margin-top: 8px;
+    }
+    .saving-indicator-container {
+      margin-top: 16px;
+    }
+    .no-contact-list-wrapper {
+      margin-top: 16px;
+      margin-bottom: 16px;
+      &:empty {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+      color: @warningColor;
+    }
+    .error-message {
+      white-space: pre;
+      line-height: 1.55;
+    }
+    .save-success-indicator-container {
+      margin-top: 16px;
+    }
   }
   .modal-footer {
     background: @bodyBgColor;
@@ -4065,12 +4113,13 @@ section.header {
   }
   .title {
     margin-bottom: 16px;
+    margin-top: 8px;
     width: 100%;
     line-height: 1.4;
     padding-right: 32px;
   }
   .header-section {
-    padding-bottom: 16px;
+    padding-bottom: 0;
     border-bottom: 1px solid @HRColor;
   }
   .items-section {
@@ -4124,7 +4173,7 @@ section.header {
       }
     }
     .item {
-      padding: 16px 8px 24px;
+      padding: 8px 8px 24px;
       width: 100%;
       border-bottom: 1px solid @HRColor;
       &:last-of-type {
@@ -4132,11 +4181,14 @@ section.header {
       }
       ul {
         padding-left: 20px;
-        margin-bottom: 20px;
+        //margin-bottom: 20px;
       }
       li:not(:last-of-type) {
         margin-bottom: 8px;
       }
+      li:last-of-type {
+        margin-bottom: 16px;
+      }
     }
     .buttons-container {
       margin-top: 24px;
@@ -4157,7 +4209,7 @@ section.header {
   #emproModal {
     .items-section {
       .item {
-        padding: 16px 24px 0;
+        padding: 8px 24px 0;
         width: 33.33333333%;
         min-height: 360px;
         flex-wrap: nowrap;
@@ -4178,13 +4230,77 @@ section.header {
   }
 }
 @media (min-width: 992px) {
+  #emproOptOutModal {
+    .modal-dialog {
+      max-width: 960px;
+      margin: auto;
+    }
+  }
   #emproModal {
     .modal-dialog {
-      width: 960px;
+      max-width: 1160px;
       margin: auto;
     }
   }
 }
+
+#emproOptOutModal {
+  .header-section {
+    padding-bottom: 8px;
+    margin-bottom: 24px;
+    .subtitle {
+      font-size: 1.3em;
+      margin-bottom: 0;
+    }
+  }
+  .title {
+    margin-top: 8px;
+    padding-bottom: 0;
+    margin-bottom: 4px;
+    font-size: 1.7em;
+  }
+  .items-section {
+    .item {
+      padding: 0 24px;
+      &.wrap {
+        display: flex;
+        gap: 24px;
+      }
+    }
+  }
+  .items-wrapper {
+    border: 1px solid @HRColor;
+    padding: 16px 24px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+  .items {
+    margin-left: 16px;
+    .item {
+      display: flex;
+      gap: 8px;
+      &:not(:last-of-type) {
+        margin-bottom:8px;
+      }
+      .ck-display:hover {
+        cursor: pointer;
+        color: @emproBtnPrimaryColor;
+      }
+    }
+  }
+  .modal-footer {
+    text-align: center;
+    .btn-empro-primary {
+      background-color: @emproBtnPrimaryColor;
+      color: #FFF;
+    }
+    .btn-default {
+      border: 1px solid @emproBtnPrimaryColor;
+    }
+  }
+  
+}
+
 .loading-message-indicator {
   z-index: 10;
   display: none;