From cc0fca850edc927df328831fac22d92883b28b49 Mon Sep 17 00:00:00 2001
From: VitaliiShpital <takur12345@gmail.com>
Date: Fri, 22 May 2020 16:37:25 +0300
Subject: [PATCH] web/satellite: charges container on billing page reworked

WHAT:
charges container view was reworked to be more user-friendly

WHY:
billing UI/UX enhancements

Change-Id: Ice663544a1e69742a5c5fcc7123eeaa38bfbf255
---
 .../EstimatedCostsAndCredits.vue              | 120 ++++--------------
 .../UsageAndChargesItem.vue                   |  81 +++++++-----
 web/satellite/src/utils/constants/date.ts     |   7 +
 .../src/utils/constants/emptyStatesImages.ts  |  50 --------
 .../images/account/billing/chargesExpand.svg  |   3 +
 .../images/account/billing/chargesHide.svg    |   3 +
 .../EstimatedCostsAndCredits.spec.ts          |  34 ++++-
 .../UsageAndChargesItem.spec.ts               |   6 +-
 .../EstimatedCostsAndCredits.spec.ts.snap     |  58 ++++++---
 .../UsageAndChargesItem.spec.ts.snap          |  33 ++---
 10 files changed, 177 insertions(+), 218 deletions(-)
 create mode 100644 web/satellite/src/utils/constants/date.ts
 delete mode 100644 web/satellite/src/utils/constants/emptyStatesImages.ts
 create mode 100644 web/satellite/static/images/account/billing/chargesExpand.svg
 create mode 100644 web/satellite/static/images/account/billing/chargesHide.svg

diff --git a/web/satellite/src/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue b/web/satellite/src/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue
index a2ca5c299..1d0388ce8 100644
--- a/web/satellite/src/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue
+++ b/web/satellite/src/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue
@@ -3,32 +3,16 @@
 
 <template>
     <div class="current-month-area">
-        <div class="current-month-area__title-area">
-            <h1 class="current-month-area__title-area__title">Estimated Costs for This Billing Period</h1>
-            <span class="current-month-area__title-area__costs">{{ priceSummary | centsToDollars }}</span>
-        </div>
+        <h1 class="current-month-area__costs">{{ priceSummary | centsToDollars }}</h1>
+        <span class="current-month-area__title">Estimated Charges for {{ chosenPeriod }}</span>
         <div class="current-month-area__content">
-            <h2 class="current-month-area__content__title">DETAILS</h2>
-            <div class="current-month-area__content__usage-charges" @click="toggleUsageChargesPopup">
-                <div class="current-month-area__content__usage-charges__head">
-                    <div class="current-month-area__content__usage-charges__head__name-area">
-                        <div class="current-month-area__content__usage-charges__head__name-area__image-container" v-if="projectUsageAndCharges.length > 0">
-                            <ArrowRightIcon v-if="!areProjectUsageAndChargesShown"/>
-                            <ArrowDownIcon v-else/>
-                        </div>
-                        <span class="current-month-area__content__usage-charges__head__name-area__title">Usage Charges</span>
-                    </div>
-                    <span>Estimated total <span class="summary">{{ priceSummary | centsToDollars }}</span></span>
-                </div>
-                <div class="current-month-area__content__usage-charges__content" v-if="areProjectUsageAndChargesShown" @click.stop>
-                    <UsageAndChargesItem
-                        v-for="usageAndCharges in projectUsageAndCharges"
-                        :item="usageAndCharges"
-                        :key="usageAndCharges.projectId"
-                        class="item"
-                    />
-                </div>
-            </div>
+            <p class="current-month-area__content__title">DETAILS</p>
+            <UsageAndChargesItem
+                v-for="usageAndCharges in projectUsageAndCharges"
+                :item="usageAndCharges"
+                :key="usageAndCharges.projectId"
+                class="item"
+            />
         </div>
     </div>
 </template>
@@ -39,18 +23,14 @@ import { Component, Vue } from 'vue-property-decorator';
 import UsageAndChargesItem from '@/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue';
 import VButton from '@/components/common/VButton.vue';
 
-import ArrowRightIcon from '@/../static/images/common/BlueArrowRight.svg';
-import ArrowDownIcon from '@/../static/images/common/BlueExpand.svg';
-
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { ProjectUsageAndCharges } from '@/types/payments';
+import { MONTHS_NAMES } from '@/utils/constants/date';
 
 @Component({
     components: {
         VButton,
         UsageAndChargesItem,
-        ArrowRightIcon,
-        ArrowDownIcon,
     },
 })
 export default class EstimatedCostsAndCredits extends Vue {
@@ -67,11 +47,6 @@ export default class EstimatedCostsAndCredits extends Vue {
         }
     }
 
-    /**
-     * areProjectUsageAndChargesShown indicates if area with all projects is expanded.
-     */
-    public areProjectUsageAndChargesShown: boolean = false;
-
     /**
      * projectUsageAndCharges is an array of all stored ProjectUsageAndCharges.
      */
@@ -87,14 +62,12 @@ export default class EstimatedCostsAndCredits extends Vue {
     }
 
     /**
-     * toggleUsageChargesPopup is used to open/close area with list of project charges.
+     * chosenPeriod returns billing period chosen by user.
      */
-    public toggleUsageChargesPopup(): void {
-        if (this.projectUsageAndCharges.length === 0) {
-            return;
-        }
+    public get chosenPeriod(): string {
+        const dateFromStore = this.$store.state.paymentsModule.startDate;
 
-        this.areProjectUsageAndChargesShown = !this.areProjectUsageAndChargesShown;
+        return `${MONTHS_NAMES[dateFromStore.getUTCMonth()]} ${dateFromStore.getUTCFullYear()}`;
     }
 }
 </script>
@@ -110,29 +83,26 @@ export default class EstimatedCostsAndCredits extends Vue {
 
     .current-month-area {
         margin-bottom: 32px;
-        padding: 40px;
+        padding: 40px 40px 0 40px;
         background-color: #fff;
         border-radius: 8px;
         font-family: 'font_regular', sans-serif;
 
-        &__title-area {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding-bottom: 40px;
-            border-bottom: 1px solid rgba(169, 181, 193, 0.3);
+        &__costs {
+            font-size: 36px;
+            line-height: 53px;
+            color: #384b65;
+            font-family: 'font_medium', sans-serif;
+        }
 
-            &__title,
-            &__costs {
-                font-size: 28px;
-                line-height: 42px;
-                font-family: 'font_bold', sans-serif;
-                color: #354049;
-            }
+        &__title {
+            font-size: 16px;
+            line-height: 24px;
+            color: #909090;
         }
 
         &__content {
-            margin-top: 20px;
+            margin-top: 35px;
 
             &__title {
                 font-size: 16px;
@@ -140,53 +110,19 @@ export default class EstimatedCostsAndCredits extends Vue {
                 letter-spacing: 0.04em;
                 text-transform: uppercase;
                 color: #919191;
+                margin-bottom: 25px;
             }
 
             &__usage-charges {
-                position: relative;
                 margin: 18px 0 0 0;
                 background-color: #f5f6fa;
                 border-radius: 12px;
                 cursor: pointer;
-
-                &__head {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 20px;
-
-                    &__name-area {
-                        display: flex;
-                        align-items: center;
-
-                        &__image-container {
-                            max-width: 14px;
-                            max-height: 14px;
-                            width: 14px;
-                            height: 14px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            margin-right: 12px;
-                        }
-                    }
-                }
-
-                &__content {
-                    cursor: default;
-                    max-height: 228px;
-                    overflow-y: auto;
-                    padding: 0 20px;
-                }
             }
         }
     }
 
     .item {
-        border-top: 1px solid rgba(169, 181, 193, 0.3);
-    }
-
-    .summary {
-        user-select: text;
+        border-top: 1px solid #c7cdd2;
     }
 </style>
diff --git a/web/satellite/src/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue b/web/satellite/src/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue
index 5e2fcac99..a612d4c95 100644
--- a/web/satellite/src/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue
+++ b/web/satellite/src/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue
@@ -3,17 +3,15 @@
 
 <template>
     <div class="usage-charges-item-container">
-        <div class="usage-charges-item-container__summary" @click.self="toggleDetailedInfo">
-            <div class="usage-charges-item-container__summary__name-container" @click="toggleDetailedInfo">
-                <svg class="usage-charges-item-container__summary__name-container__expand-image" v-if="!isDetailedInfoShown" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"/>
-                </svg>
-                <svg class="usage-charges-item-container__summary__name-container__expand-image" v-if="isDetailedInfoShown" width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.372773 0.338888C0.869804 -0.112963 1.67565 -0.112963 2.17268 0.338888L7 4.72741L11.8273 0.338888C12.3243 -0.112963 13.1302 -0.112963 13.6272 0.338888C14.1243 0.790739 14.1243 1.52333 13.6272 1.97519L7 8L0.372773 1.97519C-0.124258 1.52333 -0.124258 0.790739 0.372773 0.338888Z" fill="#2683FF"/>
-                </svg>
+        <div class="usage-charges-item-container__summary" @click="toggleDetailedInfo">
+            <div class="usage-charges-item-container__summary__name-container" >
+                <ChargesExpandIcon v-if="isDetailedInfoShown"/>
+                <ChargesHideIcon v-else/>
                 <span>{{ projectName }}</span>
             </div>
-            <div class="usage-charges-item-container__summary__report-link" @click="onReportClick">Advanced Report -></div>
+            <span class="usage-charges-item-container__summary__amount">
+                Estimated Total {{ item.summary() | centsToDollars }}
+            </span>
         </div>
         <div class="usage-charges-item-container__detailed-info-container" v-if="isDetailedInfoShown">
             <div class="usage-charges-item-container__detailed-info-container__info-header">
@@ -44,7 +42,11 @@
                     <p class="price">{{ item.objectPrice | centsToDollars }}</p>
                 </div>
             </div>
-            <span class="usage-charges-item-container__detailed-info-container__summary">{{ item.summary() | centsToDollars }}</span>
+            <div class="usage-charges-item-container__detailed-info-container__link-container">
+                <span class="usage-charges-item-container__detailed-info-container__link-container__link" @click="onReportClick">
+                    Advanced Report ->
+                </span>
+            </div>
         </div>
     </div>
 </template>
@@ -52,13 +54,22 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+import ChargesExpandIcon from '@/../static/images/account/billing/chargesExpand.svg';
+import ChargesHideIcon from '@/../static/images/account/billing/chargesHide.svg';
+
 import { ProjectUsageAndCharges } from '@/types/payments';
 import { Project } from '@/types/projects';
 import { Size } from '@/utils/bytesSize';
 import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
+import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
 import { toUnixTimestamp } from '@/utils/time';
 
-@Component
+@Component({
+    components: {
+        ChargesHideIcon,
+        ChargesExpandIcon,
+    },
+})
 export default class UsageAndChargesItem extends Vue {
     /**
      * item represents usage and charges of current project by period.
@@ -85,9 +96,8 @@ export default class UsageAndChargesItem extends Vue {
      * Returns string of date range.
      */
     public get period(): string {
-        const months: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-        const since: string = `${months[this.item.since.getUTCMonth()]} ${this.item.since.getUTCDate()}`;
-        const before: string = `${months[this.item.before.getUTCMonth()]} ${this.item.before.getUTCDate()}`;
+        const since: string = `${SHORT_MONTHS_NAMES[this.item.since.getUTCMonth()]} ${this.item.since.getUTCDate()}`;
+        const before: string = `${SHORT_MONTHS_NAMES[this.item.before.getUTCMonth()]} ${this.item.before.getUTCDate()}`;
 
         return `${since} - ${before}`;
     }
@@ -168,7 +178,7 @@ export default class UsageAndChargesItem extends Vue {
     .usage-charges-item-container {
         font-size: 16px;
         line-height: 21px;
-        padding: 20px 0;
+        padding: 30px 0;
         font-family: 'font_regular', sans-serif;
 
         &__summary {
@@ -181,20 +191,24 @@ export default class UsageAndChargesItem extends Vue {
                 display: flex;
                 align-items: center;
 
-                &__expand-image {
+                &__expand-image,
+                &__hide-image {
                     width: 14px;
                     height: 14px;
                     margin-right: 12px;
                 }
+
+                &__expand-image {
+                    height: 8px;
+                }
             }
 
-            &__report-link {
-                padding: 3px 5px;
-                font-size: 13px;
-                line-height: 19px;
-                color: #2683ff;
-                background-color: rgba(38, 131, 255, 0.16);
-                border-radius: 6px;
+            &__amount {
+                width: 100%;
+                font-size: 16px;
+                line-height: 21px;
+                text-align: right;
+                color: #354049;
             }
         }
 
@@ -212,15 +226,13 @@ export default class UsageAndChargesItem extends Vue {
                 font-size: 14px;
                 line-height: 19px;
                 color: #adadad;
-                border-bottom: 1px solid #b9b9b9;
                 height: 25px;
                 width: 100%;
             }
 
             &__content-area {
                 width: 100%;
-                padding: 10px 0;
-                border-bottom: 1px solid #b9b9b9;
+                padding: 10px 0 0 0;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
@@ -245,12 +257,19 @@ export default class UsageAndChargesItem extends Vue {
                 }
             }
 
-            &__summary {
+            &__link-container {
                 width: 100%;
-                font-size: 14px;
-                line-height: 18px;
-                text-align: right;
-                margin-top: 13px;
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+                margin-top: 25px;
+
+                &__link {
+                    font-size: 13px;
+                    line-height: 19px;
+                    color: #2683ff;
+                    cursor: pointer;
+                }
             }
         }
     }
diff --git a/web/satellite/src/utils/constants/date.ts b/web/satellite/src/utils/constants/date.ts
new file mode 100644
index 000000000..13fe673d2
--- /dev/null
+++ b/web/satellite/src/utils/constants/date.ts
@@ -0,0 +1,7 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+export const MONTHS_NAMES: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
+    'September', 'October', 'November', 'December'];
+
+export const SHORT_MONTHS_NAMES: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
diff --git a/web/satellite/src/utils/constants/emptyStatesImages.ts b/web/satellite/src/utils/constants/emptyStatesImages.ts
deleted file mode 100644
index c514dff47..000000000
--- a/web/satellite/src/utils/constants/emptyStatesImages.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-// TODO: should remove global variables
-export const EMPTY_STATE_IMAGES = {
-    PROJECT: `<svg width="346" height="345" viewBox="0 0 346 345" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M165.9 284.9C244.4 284.9 308 221.1 308 142.4C308 63.7 244.4 0 165.9 0C87.3998 0 23.7998 63.8 23.7998 142.5C23.7998 221.2 87.3998 284.9 165.9 284.9Z" fill="#E8EAF2"/>
-    <path d="M110.6 64.4004C110.2 64.4004 109.9 64.4004 109.6 64.4004C109 64.4004 108.4 64.1004 108.1 63.6004C100.9 50.4004 86.7 41.4004 70.4 41.4004C55.7 41.4004 42.7 48.8004 35 60.0004C34.6 60.6004 33.9 60.8004 33.3 60.7004C31.4 60.3004 29.4 60.1004 27.3 60.1004C12.2 60.0004 0 72.1004 0 87.1004C0 88.0004 0.7 88.7004 1.6 88.7004H131.8C132.7 88.7004 133.4 88.0004 133.4 87.1004C133.4 74.6004 123.2 64.4004 110.6 64.4004Z" fill="#B0B6C9"/>
-    <path d="M34.9002 281.8C43.2002 279.8 48.3002 271.2 46.3002 262.6C44.3002 254 35.8002 248.7 27.5002 250.6C19.2002 252.5 14.0002 261.3 16.1002 269.8C18.0002 278.5 26.5002 283.8 34.9002 281.8Z" fill="#8F96AD"/>
-    <path d="M32.8004 273C36.5004 272.1 38.9004 268.4 38.0004 264.6C37.1004 260.9 33.4004 258.5 29.6004 259.4C25.9004 260.3 23.5004 264 24.4004 267.8C25.2004 271.7 29.0004 273.9 32.8004 273Z" fill="#F5F6FA"/>
-    <path d="M225.6 256.7C219.5 249.2 202.8 234 202.8 234L197.3 235.8C197.3 235.8 208.6 263.8 213.8 265.7C219 267.6 224.3 263.9 226.1 260.2C226.6 259.1 226.4 257.7 225.6 256.7Z" fill="#363840"/>
-    <path d="M119.7 211.1L134.8 212C134.8 212 184.3 163.8 215 160.5C215 160.5 234.4 188.8 209 237.8C206.9 241.8 201.8 243.3 198.2 240.6C197.1 239.8 196.4 238.8 196 237.6C197.7 221.4 179.1 211.2 166.3 221.2C159.6 226.5 153.8 231 151.6 233C144.2 239.3 109.6 233.1 119.7 211.1Z" fill="#8F96AD"/>
-    <path d="M252.4 334.8C246.3 327.3 229.6 312.1 229.6 312.1L224.1 313.9C224.1 313.9 235.4 341.9 240.6 343.8C245.8 345.7 251.1 342 252.9 338.3C253.5 337.2 253.3 335.8 252.4 334.8Z" fill="#363840"/>
-    <path d="M119.5 222.1L190.1 227.3C190.1 227.3 228.3 263.2 232.4 314.5C232.4 314.5 233.4 318.3 226 318.5C196.8 268.1 158.6 257.1 135 255.8C117.4 254.8 100.9 246.9 89.3999 233.6C88.7999 232.8 88.3999 232.4 88.3999 232.4L119.5 222.1Z" fill="#B0B6C9"/>
-    <path d="M124.8 165.3C124.8 165.3 130 203.9 166.3 221.3L179.6 220.6L182.4 225.8L151.3 224.8C151.3 224.8 125.4 212.6 113.1 183.1C112.7 182.1 106 165.6 124.8 165.3Z" fill="#8F96AD"/>
-    <path d="M125.3 221.8C125.3 221.8 118.1 197.8 117.7 174.8C117.7 174.8 124.4 169.8 128.5 167.7C129.8 167 130.4 165.4 129.8 164.1C127.3 157.9 111.2 133.2 109.9 132.7C102.9 130.5 74.3998 114.7 51.8998 141.6C42.2998 153.2 50.4998 191.2 88.3998 232.4L91.8998 236.6L125.3 221.8Z" fill="#F5F6FA"/>
-    <path d="M94.5997 178.5C94.5997 178.5 116.8 208.4 147.3 214.5C147.3 214.5 155.7 207.8 161.4 210.7C167.1 213.7 174.5 225.6 174.5 225.6L135.1 223.1C135.1 223.1 97.8997 219.4 80.6997 195.7C82.6997 187.9 87.4997 183.5 94.5997 178.5Z" fill="#B0B6C9"/>
-    <path d="M84.7999 111.1L78.3999 128.3C78.0999 129.1 78.3999 130 78.9999 130.5C81.3999 132.4 87.7999 136.3 97.0999 133.5C98.1999 133.2 98.8999 132.3 99.0999 131.2L101.3 116L84.7999 111.1Z" fill="#8F96AD"/>
-    <path d="M116.4 98.7998C116.4 98.7998 112.7 116.8 105.3 122C97.9999 127.1 84.5999 122.1 80.8999 108.1L91.4999 85.2998L116.4 98.7998Z" fill="#B0B6C9"/>
-    <path d="M89.5999 100.3C90.0999 100.5 90.6999 100.2 90.7999 99.6998C91.1999 97.9998 92.8999 90.1998 99.3999 94.1998C105.9 98.1998 115.6 103.6 122 97.5998C142.5 78.1998 110 80.0998 101.3 75.3998C98.8999 74.0998 87.0999 68.4998 81.9999 78.1998C81.6999 78.7998 73.9999 97.2998 80.6999 109.4C80.9999 110 81.8999 109.8 82.1999 109.2L86.6999 100.1C86.8999 99.6998 87.3999 99.4998 87.7999 99.6998L89.5999 100.3Z" fill="#363840"/>
-    <path d="M89.6 102.2C89.6 102.2 87.8 92.2995 84 95.2995C80.2 98.1995 84.3 105.5 88.4 107L89.6 102.2Z" fill="#B0B6C9"/>
-    <path d="M172.4 227.7L193.8 169.8C194.7 167.4 196.9 165.9 199.4 165.8L223.4 165.7C225.8 165.7 227.5 168.2 226.5 170.4L203.2 225.5C202.4 227.3 200.7 228.5 198.8 228.5L175.1 229.6L172.4 227.7Z" fill="#363840"/>
-    <path d="M204.898 198.448C206.387 195.864 206.43 193.098 204.994 192.271C203.559 191.444 201.188 192.869 199.699 195.453C198.21 198.037 198.167 200.802 199.603 201.629C201.039 202.457 203.409 201.032 204.898 198.448Z" fill="#F7F7FF"/>
-    <path d="M175.2 229.799H175.1L125.1 224.099C123.9 223.999 123 222.799 123.1 221.599C123.2 220.399 124.4 219.499 125.6 219.599L175.6 225.299C176.8 225.399 177.7 226.599 177.6 227.799C177.4 228.999 176.4 229.799 175.2 229.799Z" fill="#363840"/>
-    <path d="M117.7 175.4C117.4 175.4 117.2 175.1 117.2 174.8C117.9 164.3 114.7 150.2 114.7 150.1C114.6 149.8 114.8 149.5 115.1 149.5C115.4 149.4 115.7 149.6 115.7 149.9C115.7 150 118.9 164.3 118.2 174.9C118.2 175.2 118 175.4 117.7 175.4Z" fill="#0F002D"/>
-    <path d="M94.5995 179.1C94.3995 179.1 94.2995 179 94.1995 178.9C94.0995 178.8 83.9995 164.1 80.7995 154.3C80.6995 154 80.8995 153.7 81.0995 153.6C81.3995 153.5 81.6995 153.7 81.7995 153.9C84.8995 163.6 94.8995 178.1 94.9995 178.2C95.1995 178.4 95.0995 178.8 94.8995 178.9C94.7995 179.1 94.6995 179.1 94.5995 179.1Z" fill="#0F002D"/>
-    <path d="M77.7996 199.499L77.3996 199.299C61.8996 191.499 53.2996 171.899 53.1996 171.699C53.0996 171.399 53.1996 171.099 53.4996 170.999C53.7996 170.899 54.0996 170.999 54.1996 171.299C54.2996 171.499 62.5996 190.399 77.4996 198.199L79.1996 196.099C79.3996 195.899 79.6996 195.799 79.8996 195.999C80.0996 196.199 80.1996 196.499 79.9996 196.699L77.7996 199.499Z" fill="#0F002D"/>
-    <path d="M255.2 109.2C277.4 100.3 304.5 97.0996 304.5 97.0996C326 133.5 337.7 180.5 337.7 180.5C322.1 191.7 299.8 191.8 299.8 191.8C290.7 176.6 259.8 136 259.8 136C248.3 138.8 238.1 139.1 229.1 137.8C232.3 129.1 231.7 119.7 231 114.3C239.8 113.7 248.3 111.9 255.2 109.2Z" fill="#F5F6FA"/>
-    <path d="M176.5 101.499C177.7 97.9994 180.9 98.1994 180.9 98.1994C189.5 110.899 211.1 115.499 230.9 114.299C231.6 119.699 232.1 128.999 229 137.799C193.3 132.399 176.5 101.499 176.5 101.499Z" fill="#B0B6C9"/>
-    <path d="M177.3 102C177.3 102.8 180.4 102.9 180.9 99.2996C180.4 97.7996 178.9 91.3996 177.6 90.4996C170.7 85.9996 158.8 81.5996 158.8 81.5996C157.9 83.5996 159.7 84.5996 159.7 84.5996L165.7 87.3996C165.4 89.3996 164.9 91.1996 165.1 93.2996C165.3 94.8996 166.1 96.3996 167.4 97.4996C168.7 98.5996 170.4 99.8996 171.9 100.9C174.7 102.9 177.3 102 177.3 102Z" fill="#8F96AD"/>
-    <path d="M168.7 89.6992L173.9 91.4992L176.4 94.2992L174.4 99.4992C174.4 99.4992 170.7 93.3992 169.3 92.2992C167.8 91.1992 168 90.3992 168.7 89.6992Z" fill="#8F96AD"/>
-    <path d="M270.9 82.4004L285.9 100.3C286.1 100.6 286.2 101 285.9 101.3C284.4 103.1 278.6 108.9 268.1 106.8C267 106.6 266.1 105.9 265.5 104.9L256.4 88.0004L270.9 82.4004Z" fill="#8F96AD"/>
-    <path d="M248.1 69.2002C248.1 69.2002 245.9 86.9002 249.2 92.5002C252.5 98.1002 262 93.9002 268.6 85.9002L268.4 67.7002L248.1 69.2002Z" fill="#B0B6C9"/>
-    <path d="M265.3 78.2001C264.9 78.2001 264.6 77.8001 264.7 77.4001C265 76.2001 265.4 73.8001 265.1 72.0001C265.1 72.0001 266.2 70.6001 260.7 71.3001C255.3 72.0001 249.4 72.8001 246.2 69.2001C243.1 65.6001 243.7 57.2001 247.6 54.9001C255.1 50.5001 278.9 61.2001 279 65.2001C279.1 69.3001 276.8 75.8001 276.7 76.0001C276.1 77.6001 273.2 84.3001 268.4 86.9001C268 87.1001 267.5 86.8001 267.4 86.3001L267.2 79.0001C267.2 78.7001 266.9 78.4001 266.6 78.4001L265.3 78.2001Z" fill="#363840"/>
-    <path d="M264.7 79.5005C264.7 79.5005 268.8 73.6005 270.4 76.6005C272 79.7005 267.2 83.2005 264 83.0005L264.7 79.5005Z" fill="#B0B6C9"/>
-    <path d="M304.2 122L293.6 111.1L304.5 97.0996C304.5 97.0996 330.8 103.3 341.1 120C337.3 121.8 330.5 125.6 324.8 131.8C320 123.9 304.2 122 304.2 122Z" fill="#F5F6FA"/>
-    <path d="M293.7 149.4C293.7 149.4 322.2 153.7 325.8 139.3C326.5 136.3 326 133.8 324.8 131.8C330.5 125.6 337.3 121.8 341.1 120C344.2 125 345.9 131 344.9 138.1C340.7 168.8 292.8 156.4 292.8 156.4L293.7 149.4Z" fill="#8F96AD"/>
-    <path d="M295.7 155.5C295.7 155.5 294.7 147.5 293 145.2C291.3 142.9 288.6 140.1 284.2 142.6C279.8 145.1 275.1 149.2 275.1 149.2C275.1 149.2 276.7 152.5 279.8 150L278.3 152.5C278.3 152.5 279.7 155.1 282.1 152.5L280.9 155.5C280.9 155.5 283 157.2 284.7 155C286.3 152.7 289.8 158.7 295.7 155.5Z" fill="#B0B6C9"/>
-    <path d="M157.9 39.8H153C150.5 39.8 148.4 37.8 148.4 35.4C148.4 33 150.5 31 153 31H157.9C160.4 31 162.5 33 162.5 35.4C162.5 37.8 160.4 39.8 157.9 39.8Z" fill="white"/>
-    <path d="M137.1 22.0998H92.2001C89.7001 22.0998 87.6001 20.0998 87.6001 17.6998C87.6001 15.2998 89.7001 13.2998 92.2001 13.2998H137.1C139.6 13.2998 141.7 15.2998 141.7 17.6998C141.7 20.0998 139.6 22.0998 137.1 22.0998Z" fill="#F5F6FA"/>
-    <path d="M184.4 22.0998H177.4C174.8 22.0998 172.7 20.0998 172.7 17.6998C172.7 15.2998 174.8 13.2998 177.4 13.2998H184.4C187 13.2998 189.1 15.2998 189.1 17.6998C189.1 20.0998 187 22.0998 184.4 22.0998Z" fill="#363840"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M259.9 208.7C263.5 208.7 266.5 205.7 266.5 202.1C266.5 198.5 263.5 195.5 259.9 195.5C256.3 195.5 253.3 198.5 253.3 202.1C253.2 205.7 256.2 208.7 259.9 208.7Z" fill="#A5A9B5"/>
-    </svg>`,
-    ARROW_UP: `<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#2683FF"/>
-    </svg>`,
-    ARROW_DOWN: `<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"/>
-    </svg>`,
-};
diff --git a/web/satellite/static/images/account/billing/chargesExpand.svg b/web/satellite/static/images/account/billing/chargesExpand.svg
new file mode 100644
index 000000000..1fbd7ab3c
--- /dev/null
+++ b/web/satellite/static/images/account/billing/chargesExpand.svg
@@ -0,0 +1,3 @@
+<svg class="usage-charges-item-container__summary__name-container__expand-image" width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.372773 0.338888C0.869804 -0.112963 1.67565 -0.112963 2.17268 0.338888L7 4.72741L11.8273 0.338888C12.3243 -0.112963 13.1302 -0.112963 13.6272 0.338888C14.1243 0.790739 14.1243 1.52333 13.6272 1.97519L7 8L0.372773 1.97519C-0.124258 1.52333 -0.124258 0.790739 0.372773 0.338888Z" fill="#2683FF"/>
+</svg>
\ No newline at end of file
diff --git a/web/satellite/static/images/account/billing/chargesHide.svg b/web/satellite/static/images/account/billing/chargesHide.svg
new file mode 100644
index 000000000..f21025ebc
--- /dev/null
+++ b/web/satellite/static/images/account/billing/chargesHide.svg
@@ -0,0 +1,3 @@
+<svg class="usage-charges-item-container__summary__name-container__hide-image" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"/>
+</svg>
\ No newline at end of file
diff --git a/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.spec.ts b/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.spec.ts
index 1ed5008cd..7b1edafe1 100644
--- a/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.spec.ts
+++ b/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.spec.ts
@@ -32,18 +32,25 @@ const paymentsModule = makePaymentsModule(paymentsApi);
 const store = new Vuex.Store({ modules: { usersModule, projectsModule, paymentsModule }});
 
 const project = new Project('id', 'projectName', 'projectDescription', 'test', 'testOwnerId', true);
+const project1 = new Project('id1', 'projectName1', 'projectDescription1', 'test', 'testOwnerId1', false);
 const user = new User('testOwnerId');
 const date = new Date(1970, 1, 1);
 const projectCharge = new ProjectUsageAndCharges(date, date, 100, 100, 100, 'id', 100, 100, 100);
+const projectCharge1 = new ProjectUsageAndCharges(date, date, 100, 100, 100, 'id1', 100, 100, 100);
 const {
     SET_PROJECT_USAGE_AND_CHARGES,
     SET_PRICE_SUMMARY,
 } = PAYMENTS_MUTATIONS;
 
-describe('EstimatedCostsAndCredits', () => {
-    it('renders correctly with project and no project usage and charges', () => {
-        store.commit(USER_MUTATIONS.SET_USER, user);
-        store.commit(PROJECTS_MUTATIONS.ADD, project);
+describe('EstimatedCostsAndCredits', (): void => {
+    beforeEach(() => {
+        spyOn(Date.prototype, 'getUTCMonth').and.returnValue(4);
+        spyOn(Date.prototype, 'getUTCFullYear').and.returnValue(2020);
+    });
+
+    it('renders correctly with project and no project usage and charges', async (): Promise<void> => {
+        await store.commit(USER_MUTATIONS.SET_USER, user);
+        await store.commit(PROJECTS_MUTATIONS.ADD, project);
 
         const wrapper = mount(EstimatedCostsAndCredits, {
             store,
@@ -53,9 +60,22 @@ describe('EstimatedCostsAndCredits', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
-    it('renders correctly with project and project usage and charges', () => {
-        store.commit(SET_PROJECT_USAGE_AND_CHARGES, [projectCharge]);
-        store.commit(SET_PRICE_SUMMARY, [projectCharge]);
+    it('renders correctly with project and project usage and charges', async (): Promise<void> => {
+        await store.commit(SET_PROJECT_USAGE_AND_CHARGES, [projectCharge]);
+        await store.commit(SET_PRICE_SUMMARY, [projectCharge]);
+
+        const wrapper = mount(EstimatedCostsAndCredits, {
+            store,
+            localVue,
+        });
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with 2 projects and project usage and charges', async (): Promise<void> => {
+        await store.commit(PROJECTS_MUTATIONS.ADD, project1);
+        await store.commit(SET_PROJECT_USAGE_AND_CHARGES, [projectCharge, projectCharge1]);
+        await store.commit(SET_PRICE_SUMMARY, [projectCharge, projectCharge1]);
 
         const wrapper = mount(EstimatedCostsAndCredits, {
             store,
diff --git a/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.spec.ts b/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.spec.ts
index 787e274c5..c0a49ff4e 100644
--- a/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.spec.ts
+++ b/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.spec.ts
@@ -26,13 +26,13 @@ const paymentsApi = new PaymentsMock();
 const paymentsModule = makePaymentsModule(paymentsApi);
 const store = new Vuex.Store({ modules: { projectsModule, paymentsModule }});
 
-describe('UsageAndChargesItem', () => {
+describe('UsageAndChargesItem', (): void => {
     const project = new Project('id', 'projectName', 'projectDescription', 'test', 'testOwnerId', true);
     projectsApi.setMockProjects([project]);
     const date = new Date(Date.UTC(1970, 1, 1));
     const projectCharge = new ProjectUsageAndCharges(date, date, 100, 100, 100, 'id', 100, 100, 100);
 
-    it('renders correctly', () => {
+    it('renders correctly', (): void => {
         const wrapper = shallowMount(UsageAndChargesItem, {
             store,
             localVue,
@@ -41,7 +41,7 @@ describe('UsageAndChargesItem', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
-    it('toggling dropdown works correctly', async () => {
+    it('toggling dropdown works correctly', async (): Promise<void> => {
         const wrapper = shallowMount(UsageAndChargesItem, {
             store,
             localVue,
diff --git a/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/__snapshots__/EstimatedCostsAndCredits.spec.ts.snap b/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/__snapshots__/EstimatedCostsAndCredits.spec.ts.snap
index 7f8fe7edf..64fdc94e3 100644
--- a/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/__snapshots__/EstimatedCostsAndCredits.spec.ts.snap
+++ b/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/__snapshots__/EstimatedCostsAndCredits.spec.ts.snap
@@ -1,37 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EstimatedCostsAndCredits renders correctly with project and no project usage and charges 1`] = `
+exports[`EstimatedCostsAndCredits renders correctly with 2 projects and project usage and charges 1`] = `
 <div class="current-month-area">
-  <div class="current-month-area__title-area">
-    <h1 class="current-month-area__title-area__title">Estimated Costs for This Billing Period</h1> <span class="current-month-area__title-area__costs">USD $0.00</span>
-  </div>
+  <h1 class="current-month-area__costs">USD $6.00</h1> <span class="current-month-area__title">Estimated Charges for May 2020</span>
   <div class="current-month-area__content">
-    <h2 class="current-month-area__content__title">DETAILS</h2>
-    <div class="current-month-area__content__usage-charges">
-      <div class="current-month-area__content__usage-charges__head">
-        <div class="current-month-area__content__usage-charges__head__name-area">
-          <!----> <span class="current-month-area__content__usage-charges__head__name-area__title">Usage Charges</span></div> <span>Estimated total <span class="summary">USD $0.00</span></span>
+    <p class="current-month-area__content__title">DETAILS</p>
+    <div class="usage-charges-item-container item">
+      <div class="usage-charges-item-container__summary">
+        <div class="usage-charges-item-container__summary__name-container"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="usage-charges-item-container__summary__name-container__hide-image">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"></path>
+          </svg> <span>projectName</span></div> <span class="usage-charges-item-container__summary__amount">
+            Estimated Total USD $3.00
+        </span>
       </div>
       <!---->
     </div>
+    <div class="usage-charges-item-container item">
+      <div class="usage-charges-item-container__summary">
+        <div class="usage-charges-item-container__summary__name-container"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="usage-charges-item-container__summary__name-container__hide-image">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"></path>
+          </svg> <span>projectName1</span></div> <span class="usage-charges-item-container__summary__amount">
+            Estimated Total USD $3.00
+        </span>
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EstimatedCostsAndCredits renders correctly with project and no project usage and charges 1`] = `
+<div class="current-month-area">
+  <h1 class="current-month-area__costs">USD $0.00</h1> <span class="current-month-area__title">Estimated Charges for May 2020</span>
+  <div class="current-month-area__content">
+    <p class="current-month-area__content__title">DETAILS</p>
   </div>
 </div>
 `;
 
 exports[`EstimatedCostsAndCredits renders correctly with project and project usage and charges 1`] = `
 <div class="current-month-area">
-  <div class="current-month-area__title-area">
-    <h1 class="current-month-area__title-area__title">Estimated Costs for This Billing Period</h1> <span class="current-month-area__title-area__costs">USD $3.00</span>
-  </div>
+  <h1 class="current-month-area__costs">USD $3.00</h1> <span class="current-month-area__title">Estimated Charges for May 2020</span>
   <div class="current-month-area__content">
-    <h2 class="current-month-area__content__title">DETAILS</h2>
-    <div class="current-month-area__content__usage-charges">
-      <div class="current-month-area__content__usage-charges__head">
-        <div class="current-month-area__content__usage-charges__head__name-area">
-          <div class="current-month-area__content__usage-charges__head__name-area__image-container"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.363528 13.6272C-0.121176 13.1302 -0.121176 12.3243 0.363528 11.8273L5.07113 7L0.363528 2.17268C-0.121177 1.67565 -0.121177 0.869804 0.363528 0.372774C0.848232 -0.124258 1.63409 -0.124258 2.1188 0.372774L8.58166 7L2.1188 13.6272C1.63409 14.1243 0.848232 14.1243 0.363528 13.6272Z" fill="#2683FF"></path>
-            </svg></div> <span class="current-month-area__content__usage-charges__head__name-area__title">Usage Charges</span>
-        </div> <span>Estimated total <span class="summary">USD $3.00</span></span>
+    <p class="current-month-area__content__title">DETAILS</p>
+    <div class="usage-charges-item-container item">
+      <div class="usage-charges-item-container__summary">
+        <div class="usage-charges-item-container__summary__name-container"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="usage-charges-item-container__summary__name-container__hide-image">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"></path>
+          </svg> <span>projectName</span></div> <span class="usage-charges-item-container__summary__amount">
+            Estimated Total USD $3.00
+        </span>
       </div>
       <!---->
     </div>
diff --git a/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/__snapshots__/UsageAndChargesItem.spec.ts.snap b/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/__snapshots__/UsageAndChargesItem.spec.ts.snap
index 04831dc73..495e9c067 100644
--- a/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/__snapshots__/UsageAndChargesItem.spec.ts.snap
+++ b/web/satellite/tests/unit/account/billing/estimatedCostsAndCredits/__snapshots__/UsageAndChargesItem.spec.ts.snap
@@ -3,11 +3,11 @@
 exports[`UsageAndChargesItem renders correctly 1`] = `
 <div class="usage-charges-item-container">
   <div class="usage-charges-item-container__summary">
-    <div class="usage-charges-item-container__summary__name-container"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="usage-charges-item-container__summary__name-container__expand-image">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"></path>
-      </svg>
-      <!----> <span></span></div>
-    <div class="usage-charges-item-container__summary__report-link">Advanced Report -&gt;</div>
+    <div class="usage-charges-item-container__summary__name-container">
+      <chargeshideicon-stub></chargeshideicon-stub> <span></span>
+    </div> <span class="usage-charges-item-container__summary__amount">
+            Estimated Total USD $0.00
+        </span>
   </div>
   <!---->
 </div>
@@ -17,10 +17,10 @@ exports[`UsageAndChargesItem toggling dropdown works correctly 1`] = `
 <div class="usage-charges-item-container">
   <div class="usage-charges-item-container__summary">
     <div class="usage-charges-item-container__summary__name-container">
-      <!----> <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg" class="usage-charges-item-container__summary__name-container__expand-image">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.372773 0.338888C0.869804 -0.112963 1.67565 -0.112963 2.17268 0.338888L7 4.72741L11.8273 0.338888C12.3243 -0.112963 13.1302 -0.112963 13.6272 0.338888C14.1243 0.790739 14.1243 1.52333 13.6272 1.97519L7 8L0.372773 1.97519C-0.124258 1.52333 -0.124258 0.790739 0.372773 0.338888Z" fill="#2683FF"></path>
-      </svg> <span></span></div>
-    <div class="usage-charges-item-container__summary__report-link">Advanced Report -&gt;</div>
+      <chargesexpandicon-stub></chargesexpandicon-stub> <span></span>
+    </div> <span class="usage-charges-item-container__summary__amount">
+            Estimated Total USD $3.00
+        </span>
   </div>
   <div class="usage-charges-item-container__detailed-info-container">
     <div class="usage-charges-item-container__detailed-info-container__info-header"><span class="resource-header">RESOURCE</span> <span class="period-header">PERIOD</span> <span class="usage-header">USAGE</span> <span class="cost-header">COST</span></div>
@@ -45,7 +45,10 @@ exports[`UsageAndChargesItem toggling dropdown works correctly 1`] = `
         <p class="price">USD $1.00</p>
         <p class="price">USD $1.00</p>
       </div>
-    </div> <span class="usage-charges-item-container__detailed-info-container__summary">USD $3.00</span>
+    </div>
+    <div class="usage-charges-item-container__detailed-info-container__link-container"><span class="usage-charges-item-container__detailed-info-container__link-container__link">
+                Advanced Report -&gt;
+            </span></div>
   </div>
 </div>
 `;
@@ -53,11 +56,11 @@ exports[`UsageAndChargesItem toggling dropdown works correctly 1`] = `
 exports[`UsageAndChargesItem toggling dropdown works correctly 2`] = `
 <div class="usage-charges-item-container">
   <div class="usage-charges-item-container__summary">
-    <div class="usage-charges-item-container__summary__name-container"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="usage-charges-item-container__summary__name-container__expand-image">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.328889 13.6272C-0.10963 13.1302 -0.10963 12.3243 0.328889 11.8273L4.58792 7L0.328889 2.17268C-0.10963 1.67565 -0.10963 0.869804 0.328889 0.372774C0.767408 -0.124258 1.47839 -0.124258 1.91691 0.372774L7.76396 7L1.91691 13.6272C1.47839 14.1243 0.767409 14.1243 0.328889 13.6272Z" fill="#2683FF"></path>
-      </svg>
-      <!----> <span></span></div>
-    <div class="usage-charges-item-container__summary__report-link">Advanced Report -&gt;</div>
+    <div class="usage-charges-item-container__summary__name-container">
+      <chargeshideicon-stub></chargeshideicon-stub> <span></span>
+    </div> <span class="usage-charges-item-container__summary__amount">
+            Estimated Total USD $3.00
+        </span>
   </div>
   <!---->
 </div>