show refunded status

src/app/organizations/settings/organization-billing.component.html

@@ -180,7 +180,7 @@
                     <td>{{c.createdDate | date:'mediumDate'}}</td>
                     <td>{{c.paymentSource ? c.paymentSource.description : '-'}}</td>
                     <td class="text-capitalize">{{c.status}}</td>
-                    <td>{{c.amount | currency:'$'}}</td>
+                    <td [ngClass]="{'text-strike':c.refunded}" title="{{(c.refunded ? 'refunded' : '') | i18n}}">{{c.amount | currency:'$'}}</td>
                 </tr>
             </tbody>
         </table>

src/app/settings/user-billing.component.html

@@ -125,7 +125,7 @@
                     <td>{{c.createdDate | date:'mediumDate'}}</td>
                     <td>{{c.paymentSource ? c.paymentSource.description : '-'}}</td>
                     <td class="text-capitalize">{{c.status}}</td>
-                    <td>{{c.amount | currency:'$'}}</td>
+                    <td [ngClass]="{'text-strike':c.refunded}" title="{{(c.refunded ? 'refunded' : '') | i18n}}">{{c.amount | currency:'$'}}</td>
                 </tr>
             </tbody>
         </table>

src/locales/en/messages.json

@@ -2331,5 +2331,8 @@
   },
   "createOrganizationCreatePersonalAccount": {
     "message": "Before creating your organization, you first need to create a free personal account."
+  },
+  "refunded": {
+    "message": "Refunded"
   }
 }

src/scss/styles.scss

@@ -372,6 +372,10 @@ label:not(.form-check-label):not(.btn) {
     font-size: $font-size-lg;
 }
 
+.text-strike {
+    text-decoration: line-through;
+}
+
 app-vault-groupings, app-org-vault-groupings {
     .card {
         #search {