TT#44967 Customer wants to see cost of an item

Change-Id: If5df7a00564856e6ce482d4513c9032af5e870cb

TESTDATA.md

@@ -84,6 +84,15 @@ Can be created by calling from one subscriber to another using the ngcp-csc-ui c
 
 Another option is to use a soft phone client such as linphone for desktop and mobile. Simply enter the subscriber username and password, and in the domain field enter the ip of the vagrant box you're using.
 
+### CALL COST
+
+To be able to see anything else than "Cost 0" in the "Conversations" view, you first need to add some fees and currency symbol/ISO code:
+
+1. In ngcp-panel, go to Settings > Billing, find "Default Billing Profile", and click "Edit"
+1. Scroll down to "Currency" field, and enter either currency symbol or ISO code (e.g. € or EUR), and click "Save"
+1. In ngcp-panel, go to Settings > Billing, find "Default Billing Profile" again, click "Fees", and click "Edit" on the existing entry
+1. The simplest way to set fees for testing, is to simply enter "1" as value for the following fields: Onpeak init rate, Onpeak init interval, Onpeak follow rate, Onpeak follow interval, Offpeak init rate, Offpeak init interval, Offpeak follow rate, Offpeak follow interval. Then click "Save"
+
 ## XMPP CHAT
 
 Should be created using an xmpp client authenticating as subscribers, but have not been able to verify this.

src/components/pages/Conversations/CscCallItem.vue

@@ -6,13 +6,43 @@
         />
         <q-item-main>
             <q-item-tile label>
-                <span class="gt-sm csc-entity-title">{{ typeTerm }}</span>
+                <span
-                <span class="gt-sm csc-entity-title">{{ direction }}</span>
+                    class="gt-sm csc-entity-title"
-                <span class="csc-entity-title">{{ number | destinationFormat }}</span>
+                >
+                    {{ typeTerm }}
+                </span>
+                <span
+                    class="gt-sm csc-entity-title"
+                >
+                    {{ direction }}
+                </span>
+                <span
+                    class="csc-entity-title"
+                >
+                    {{ number | destinationFormat }}
+                </span>
             </q-item-tile>
             <q-item-tile sublabel>
                 {{ call.start_time | smartTime }}
             </q-item-tile>
+            <q-item-tile sublabel>
+                <span
+                    class="csc-entity-subtitle"
+                >
+                    {{ $t('pages.conversations.cost') }}
+                </span>
+                <span
+                    class="csc-entity-subtitle"
+                >
+                    {{ call.customer_cost | wholeCurrency }}
+                </span>
+                <span
+                    v-if="call.currency.length > 0"
+                    class="csc-entity-subtitle"
+                >
+                    ({{ call.currency }})
+                </span>
+            </q-item-tile>
         </q-item-main>
         <q-item-side
             right

src/filters/currency.js

@@ -0,0 +1,4 @@
+
+export default function(cost) {
+    return cost / 100;
+}

src/filters/index.js

@@ -6,6 +6,7 @@ import { normalizeDestination } from './number-format'
 import DateFilter from './date'
 import { smartTime } from './date'
 import { startCase } from './string'
+import WholeCurrency from './currency'
 
 Vue.filter('number', NumberFilter);
 Vue.filter('readableDate', DateFilter);
@@ -13,3 +14,4 @@ Vue.filter('numberFormat', NumberFormatFilter);
 Vue.filter('destinationFormat', normalizeDestination);
 Vue.filter('smartTime', smartTime);
 Vue.filter('startCase', startCase);
+Vue.filter('wholeCurrency', WholeCurrency);

src/locales/en.json

@@ -117,12 +117,6 @@
         },
         "conversations": {
             "title": "Conversations",
-            "labels": {
-                "successful": "Successful",
-                "unsuccessful": "Unsuccessful",
-                "from": "from",
-                "to": "to"
-            },
             "buttons": {
                 "call": "CALL",
                 "audioCall": "Audio Call",
@@ -130,14 +124,6 @@
                 "play": "Play",
                 "download": "Download"
             },
-            "card": {
-                "date": "Date",
-                "duration": "Duration",
-                "folder": "Folder",
-                "pages": "Pages",
-                "cost": "Cost",
-                "message": "Message"
-            },
             "downloadVoiceMailSuccessMessage": "Voicemail downloaded successfully",
             "downloadVoiceMailErrorMessage": "Downloading of voicemail failed",
             "downloadFaxSuccessMessage": "Fax downloaded successfully",
@@ -156,7 +142,8 @@
             "pages": "pages",
             "voicemail": "Voicemail",
             "duration": "Duration",
-            "seconds": "seconds"
+            "seconds": "seconds",
+            "cost": "Cost"
         },
         "reminder": {
             "toggleEnabled": "Reminder is enabled",

src/themes/app.common.styl

@@ -85,21 +85,22 @@
 .csc-entity
     position relative
 
-    .csc-entity-title {
+    .csc-entity-title
         color $tertiary
         font-size 18px
         font-weight 400
         letter-spacing normal
         line-height 1.8rem
-    }
+
+    .csc-entity-subtitle
+        font-weight 400
 
     .q-btn
         .on-left
             margin-right 0
 
-    .csc-entity-title .q-chip-main {
+    .csc-entity-title .q-chip-main
         color white
-    }
 
     .csc-entity-title-text
         padding-left 6px