Mg design improvements

.gitignore

@@ -54,4 +54,5 @@ terraform.tfstate.backup
 .idea
 
 #IDE Specific (VS Code)
-.vscode
+.vscode
+/config/credentials/development.key

app/assets/stylesheets/application.postcss.css

@@ -2,17 +2,53 @@
 @forward "uswds-settings.scss";
 @forward "uswds-components.scss";
 
-.argyle-loading {
+.lds-ripple,
+.lds-ripple div {
+  box-sizing: border-box;
+}
+.lds-ripple {
+  display: inline-block;
   position: relative;
+  width: 80px;
+  height: 80px;
 }
-
-.argyle-loading::after {
-  background-color: rgba(0, 0, 0, 0.128);
-  content: "";
+.lds-ripple div {
   position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 9999;
+  border: 4px solid currentColor;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+@keyframes lds-ripple {
+  0% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  5% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 1;
+  }
+  100% {
+    top: 0;
+    left: 0;
+    width: 80px;
+    height: 80px;
+    opacity: 0;
+  }
 }

app/assets/stylesheets/uswds-components.scss

@@ -1,10 +1,2 @@
-@forward "uswds-global";
-@forward "uswds-utilities";
-@forward "uswds-typography";
-@forward "usa-header";
-@forward "usa-banner";
-@forward "usa-section";
-@forward "usa-alert";
-@forward "usa-combo-box";
-@forward "usa-accordion";
+@forward "uswds";
 // add additional packages here as you use them

app/controllers/cbv_flows_controller.rb

@@ -16,6 +16,7 @@ def employer_search
   def summary
     @payments = fetch_payroll.map do |payment|
       {
+        employer: payment['employer'],
         amount: payment['net_pay'].to_i,
         start: payment['paystub_period']['start_date'],
         end: payment['paystub_period']['end_date'],

app/helpers/application_helper.rb

@@ -6,4 +6,13 @@ def format_active_locale(locale_string)
     end
     link_to t("shared.languages.#{locale_string}"), root_path(locale: locale_string), class: link_classes
   end
+
+  def format_date(timestamp_string)
+    begin
+      Time.parse(timestamp_string).strftime("%B %d, %Y")
+    rescue => e
+      "Invalid timestamp"
+      timestamp_string
+    end
+  end
 end

app/javascript/controllers/cbv_flows_controller.js

@@ -9,8 +9,7 @@ function toOptionHTML({ value }) {
 }
 
 export default class extends Controller {
-  static targets = ["options", "continue", "userAccountId", "fullySynced", "form"];
-  static classes = ["loading"]
+  static targets = ["options", "continue", "userAccountId", "fullySynced", "form", "modal"];
 
   selection = null;
 
@@ -47,7 +46,8 @@ export default class extends Controller {
 
   onSignInSuccess(event) {
     this.userAccountIdTarget.value = event.accountId;
-    this.element.classList.add(this.loadingClass);
+    this.argyle.close();
+    this.modalTarget.click();
   }
 
   onAccountError(event) {

app/views/cbv_flows/employer_search.html.erb

@@ -5,7 +5,7 @@
 
 <h2>Get payment info from your employer.</h2>
 
-<div data-controller="cbv-flows" data-cbv-flows-loading-class="argyle-loading loader">
+<div data-controller="cbv-flows">
   <%= form_with url: next_path, method: :post, data: { 'cbv-flows-target': "form" } do |f| %>
     <label class="usa-label" for="employer">Search for an employer</label>
     <div class="usa-combo-box margin-bottom-3" data-action="input->cbv-flows#search">
@@ -19,11 +19,42 @@
       </select>
       <input type="hidden" name="user[account_id]" data-cbv-flows-target="userAccountId" />
     </div>
+    <a
+      href="#example-modal-3"
+      class="display-none"
+      aria-controls="example-modal-3"
+      data-open-modal
+      data-cbv-flows-target="modal"
+    ></a>
     <%= f.submit "Continue",
       class: "usa-button usa-button--outline",
       disabled: "disabled",
       type: "submit",
       data: { action: "click->cbv-flows#submit", 'cbv-flows-target': "continue" }
     %>
   <% end %>
+
+  <div class="margin-y-3">
+    <div
+      class="usa-modal"
+      id="example-modal-3"
+      aria-labelledby="modal-3-heading"
+      aria-describedby="modal-3-description"
+      data-force-action
+    >
+      <div class="usa-modal__content">
+        <div class="usa-modal__main">
+          <h2 class="usa-modal__heading" id="modal-3-heading">
+            We are fetching your employer's payment information.
+          </h2>
+          <div class="usa-prose">
+            <p id="modal-3-description">
+              This may take a few minutes. Please do not close this window.
+            </p>
+          </div>
+          <div class="lds-ripple" style="left: 30%;"><div></div><div></div></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

app/views/cbv_flows/entry.html.erb

@@ -1,7 +1,7 @@
 <h1>Hello</h1>
 <h2>Let's verify your payment information.</h2>
 
-<p>We'll connect to your payment records to get proof of payments to your caseworker and get benfits faster.</p>
+<p>We'll connect to your payment records to get proof of payments to your caseworker and get benefits faster.</p>
 
 <p>Case Number: <strong><%= @cbv_flow.case_number %></strong></p>
 

app/views/cbv_flows/summary.html.erb

@@ -2,9 +2,9 @@
 
 <% if @payments.any? %>
   <p>Below is payment information from your employer for the past 90 days.</p>
-  <h3 class="site-preview-heading">Total Payments: $<%= @payments.reduce(0) { |sum, payment| sum + payment[:amount] } %></h3>
+  <h3 class="site-preview-heading">Total Payments: <%= number_to_currency(@payments.reduce(0) { |sum, payment| sum + payment[:amount] }) %></h3>
 
-  <div class="usa-accordion margin-bottom-4">
+  <div class="usa-accordion usa-accordion--multiselectable margin-bottom-4" data-allow-multiple>
     <% @payments.each_with_index do |payment, index| %>
       <div class="usa-accordion__heading">
         <button
@@ -13,12 +13,12 @@
           aria-expanded="false"
           aria-controls="<%= index %>"
         >
-          Payment of $<%= payment[:amount] %>, <%= payment[:start] %> to <%= payment[:end] %>
+          <%= payment[:employer] %>: Payment of <%= number_to_currency(payment[:amount]) %>
         </button>
       </div>
       <div id="<%= index %>" class="usa-accordion__content usa-prose">
         <p>
-          <%= payment[:hours] %> hours at $<%= payment[:rate] %> per hour.
+          <%= payment[:hours] %> hours from <%= format_date(payment[:start]) %> to <%= format_date(payment[:end]) %>
         </p>
       </div>
     <% end %>

app/views/layouts/application.html.erb

@@ -18,12 +18,14 @@
   </head>
 
   <body>
-    <%= render "application/usa_banner" %>
-    <%= render "application/header" %>
-    <main id="main-content">
-      <div class="grid-container usa-section margin-2">
-        <%= yield %>
-      </div>
-    </main>
+    <div id="root">
+      <%= render "application/usa_banner" %>
+      <%= render "application/header" %>
+      <main id="main-content">
+        <section class="grid-container usa-section">
+          <%= yield %>
+        </section>
+      </main>
+    </div>
   </body>
 </html>