Added sales / use tax for Idaho review page (#4935)

Added review card for sales tax
codeforamerica · Nov 6, 2024 · 182cd4b · 182cd4b
1 parent 2d639e4
commit 182cd4b
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 58 deletions.
diff --git a/app/assets/stylesheets/_state-file.scss b/app/assets/stylesheets/_state-file.scss
@@ -1,50 +1,66 @@
 // vietnamese
 @font-face {
-  font-family: 'Public Sans';
+  font-family: "Public Sans";
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7QwOk1Fig.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7QwOk1Fig.woff2)
+    format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1EA0-1EF9, U+20AB;
 }
 // latin-ext
 @font-face {
-  font-family: 'Public Sans';
+  font-family: "Public Sans";
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7QwOk1Fig.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7QwOk1Fig.woff2)
+    format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 // latin
 @font-face {
-  font-family: 'Public Sans';
+  font-family: "Public Sans";
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ7QwOk1.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ7QwOk1.woff2)
+    format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 // vietnamese
 @font-face {
-  font-family: 'Public Sans';
+  font-family: "Public Sans";
   font-style: normal;
   font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymu8Z6JywcofVotfzbj9m4.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymu8Z6JywcofVotfzbj9m4.woff2)
+    format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1EA0-1EF9, U+20AB;
 }
 // latin-ext
 @font-face {
-  font-family: 'Public Sans';
+  font-family: "Public Sans";
   font-style: normal;
   font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymu8Z6JygcofVotfzbj9m4.woff2) format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymu8Z6JygcofVotfzbj9m4.woff2)
+    format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 // latin
 @font-face {
-  font-family: 'Public Sans';
+  font-family: "Public Sans";
   font-style: normal;
   font-weight: 700;
-  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymu8Z6JxAcofVotfzbj.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymu8Z6JxAcofVotfzbj.woff2)
+    format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 // when no us_state in the params, class will be "state-file-html-bg--"
@@ -159,15 +175,15 @@
   }
 
   .warning {
-    border: 2px solid #FFAE00;
-    background: #FFF2D1;
+    border: 2px solid #ffae00;
+    background: #fff2d1;
     padding: 1rem;
   }
 
   .white-group {
     .select {
       select.input-warning {
-        border: 2px solid #FFAE00;
+        border: 2px solid #ffae00;
       }
     }
   }
@@ -210,7 +226,7 @@
       width: auto;
       padding-left: 3.5rem;
 
-      input[type='checkbox'] {
+      input[type="checkbox"] {
         left: 0;
       }
     }
@@ -224,7 +240,7 @@
       min-height: auto;
       padding: 1rem 0 1rem 3.5rem;
 
-      input[type='radio'] {
+      input[type="radio"] {
         left: 0.5rem;
         top: 1.3rem;
       }
@@ -239,7 +255,6 @@
         font-weight: 400;
         border: 1px solid $color-state-file-input-border;
         padding: 0 4rem 0 1rem;
-
       }
     }
 
@@ -274,7 +289,6 @@
     }
 
     .money-input-form-group {
-
       .money-input-group {
         margin-bottom: 2rem;
         border: 1px solid $color-state-file-input-border;
@@ -298,7 +312,7 @@
     }
   }
 
-  .checkbox.is-selected{
+  .checkbox.is-selected {
     background: white;
   }
 
@@ -357,10 +371,10 @@
     box-sizing: border-box;
     border: 2px solid #dc6565;
     box-shadow: 0 2px 0px rgba(0, 0, 0, 0.5);
-    background-color: #FFFFFF;
+    background-color: #ffffff;
     padding: 1.75rem 2.5rem;
     border-radius: 1rem;
-    color: #DC6565;
+    color: #dc6565;
     text-decoration: none;
   }
 
@@ -410,11 +424,13 @@
       margin-top: 0.5rem;
     }
 
-    .form-group, .input-group--inline {
+    .form-group,
+    .input-group--inline {
       margin-bottom: 0;
     }
 
-    .select, .text-input {
+    .select,
+    .text-input {
       margin-bottom: 2rem;
     }
 
@@ -427,7 +443,7 @@
         line-height: 1.9rem;
         padding: 1rem 0 1rem 3.5rem;
 
-        input[type='radio'] {
+        input[type="radio"] {
           left: 0.5rem;
           top: 1rem;
         }
@@ -474,9 +490,22 @@
     }
   }
 
+  .review-section {
+    .section-header {
+      font-size: 1.2em;
+      font-weight: bold;
+      margin: 2em 0;
+    }
+  }
+
   .return-status {
-    p { text-align: center; }
-    img { height: 80px; width: 80px;}
+    p {
+      text-align: center;
+    }
+    img {
+      height: 80px;
+      width: 80px;
+    }
   }
 
   .info-link {
@@ -548,10 +577,10 @@
   a,
   .button,
   .radio-button,
-  .radio-button input[type='radio'],
+  .radio-button input[type="radio"],
   .select__element,
   .checkbox,
-  .checkbox input[type='checkbox'] {
+  .checkbox input[type="checkbox"] {
     box-shadow: 0 0 0 5px rgba($color-state-file-primary, 0);
     transition: box-shadow 0.2s ease;
   }
@@ -560,33 +589,33 @@
   a:focus,
   .button:focus,
   .button:hover,
-  .radio-button input[type='radio']:focus,
+  .radio-button input[type="radio"]:focus,
   .select__element:focus,
-  .checkbox input[type='checkbox']:focus {
+  .checkbox input[type="checkbox"]:focus {
     box-shadow: $focus-box-shadow;
   }
 
-  input[type='radio'] {
+  input[type="radio"] {
     accent-color: #000;
   }
 
   // Hack to make radio buttons black instead of green
-  input[type='radio']:checked:after {
+  input[type="radio"]:checked:after {
     width: 16px;
     height: 16px;
     border-radius: 15px;
     top: -2px;
     left: 0px;
     position: relative;
     background-color: #000;
-    content: '';
+    content: "";
     display: inline-block;
     visibility: visible;
     border: 2px solid white;
   }
 
   // Hack to make checkboxes black instead of green
-  input[type='checkbox']:checked:after {
+  input[type="checkbox"]:checked:after {
     content: " ";
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+);
     background-repeat: no-repeat;
@@ -706,14 +735,14 @@
   }
   @media screen and (max-width: $tablet-up) {
     .landing-page-container .fyst-home-image {
-      display: none
+      display: none;
     }
   }
 }
 
 .us-state-- {
   .button--intercom {
-    background: #FFF;
+    background: #fff;
     border: 2px solid $color-az-grey;
     color: $color-az-grey;
   }
@@ -725,7 +754,7 @@ $state-colors: (
   id: $color-id-green,
   nc: $color-nc-blue,
   nj: $color-nj-blue-darker,
-  md: $color-md-primary
+  md: $color-md-primary,
 );
 
 @each $state_key, $state-color in $state-colors {
@@ -749,7 +778,7 @@ $state-colors: (
     }
 
     .button--intercom {
-      background: #FFF;
+      background: #fff;
       border: 2px solid $state-color;
       // icon: state primary color
       color: $state-color;
@@ -775,9 +804,9 @@ $state-colors: (
   }
 
   .loading-container {
-    width:100%;
-    display:flex;
-    justify-content:center;
+    width: 100%;
+    display: flex;
+    justify-content: center;
   }
 
   .state-file-html-bg--#{$state_key} {
@@ -811,7 +840,8 @@ $state-colors: (
   }
 }
 
-.federal-info-controller-subform, .federal-info-controller-subform-section {
+.federal-info-controller-subform,
+.federal-info-controller-subform-section {
   table {
     td:first-child {
       vertical-align: middle;
@@ -820,14 +850,16 @@ $state-colors: (
     }
   }
 
-  .federal-info-controller-subform-title, .federal-info-controller-subform-section-title {
+  .federal-info-controller-subform-title,
+  .federal-info-controller-subform-section-title {
     padding: 5px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     background-color: #c7c7c7;
   }
 
-  .federal-info-controller-subform-content, .federal-info-controller-subform-section-content {
+  .federal-info-controller-subform-content,
+  .federal-info-controller-subform-section-content {
     padding: 18px;
     border-width: 0 1px 1px 1px;
     border-style: dotted;
@@ -850,7 +882,7 @@ $state-colors: (
   }
   .search-container {
     padding-bottom: 2rem;
-    .hub-searchbar__input{
+    .hub-searchbar__input {
     }
   }
 }
diff --git a/app/views/state_file/questions/id_review/edit.html.erb b/app/views/state_file/questions/id_review/edit.html.erb
@@ -2,13 +2,27 @@
 <% content_for :card do %>
   <%= render "state_file/questions/shared/review_header" %>
 
-  <div id="health-insurance-premium" class="white-group">
-    <div class="spacing-below-5">
-      <p class="text--bold spacing-below-5"><%=t(".health_insurance_premium_title") %></p>
-      <p><%=number_to_currency(current_intake.health_insurance_paid_amount || 0, precision: 2)%></p>
-      <%= link_to t("general.edit"), StateFile::Questions::IdHealthInsurancePremiumController.to_path_helper(return_to_review: "y"), class: "button--small" %>
+  <section class="review-section">
+    <p class="section-header"><%= t(".state_details_title") %></p>
+    <% if current_intake.total_purchase_amount.present? %>
+      <div id="sales-use-tax" class="white-group">
+        <div class="spacing-below-5">
+          <p class="text--bold spacing-below-5"><%= t(".purchases_without_sales_tax") %></p>
+          <p><%= number_to_currency(current_intake.total_purchase_amount) %></p>
+          <%= link_to t("general.edit"), StateFile::Questions::IdSalesUseTaxController.to_path_helper(return_to_review: 'y'), class: "button--small" %>
+        </div>
+      </div>
+    <% end %>
+
+    <div id="health-insurance-premium" class="white-group">
+      <div class="spacing-below-5">
+        <p class="text--bold spacing-below-5"><%=t(".health_insurance_premium_title") %></p>
+        <p><%=number_to_currency(current_intake.health_insurance_paid_amount || 0, precision: 2)%></p>
+        <%= link_to t("general.edit"), StateFile::Questions::IdHealthInsurancePremiumController.to_path_helper(return_to_review: "y"), class: "button--small" %>
+      </div>
     </div>
-  </div>
+  </section>
+
 
   <%= render "state_file/questions/shared/review_footer" %>
 <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -2565,6 +2565,8 @@ en:
       id_review:
         edit:
           health_insurance_premium_title: Idaho Health Insurance Premium Subtraction
+          purchases_without_sales_tax: Purchases without paying sales or use tax
+          state_details_title: State Details
       id_sales_use_tax:
         edit:
           sales_tax_content: This is a tax collected at the point of sale when you buy goods within your state.