feat(orders): ORDERS-7935 add badge for CANCELLED order returns

Author: jpajar

assets/scss/components/stencil/account/_account.scss

@@ -398,6 +398,11 @@ $account-backorder-textColor: #757575;
     color: stencilColor("color-textBase");
 }
 
+.account-orderStatus-label--cancelled {
+    background-color: color("greys", "darker");
+    color: color("whites", "bright");
+}
+
 .account-orderStatus-action {
     color: stencilColor("color-textSecondary");
     display: inline-block;

assets/scss/components/stencil/returnDetails/_returnDetails.scss

@@ -50,6 +50,11 @@
     color: stencilColor("color-textBase");
 }
 
+.returnDetails-statusBadge--cancelled {
+    background-color: color("greys", "darker");
+    color: color("whites", "bright");
+}
+
 .returnDetails-divider {
     border: 0;
     border-top: container("border");

templates/components/account/returns-list-v2.html

@@ -12,6 +12,8 @@ <h6 class="account-orderStatus-label account-orderStatus-label--open">{{lang 'ac
                     <h6 class="account-orderStatus-label account-orderStatus-label--inProgress">{{lang 'account.returns.status.in_progress'}}</h6>
                 {{else if status '===' 'CLOSED'}}
                     <h6 class="account-orderStatus-label account-orderStatus-label--closed">{{lang 'account.returns.status.closed'}}</h6>
+                {{else if status '===' 'CANCELLED'}}
+                    <h6 class="account-orderStatus-label account-orderStatus-label--cancelled">{{lang 'account.returns.status.cancelled'}}</h6>
                {{/if}}
             </div>
             <a class="button button--small" href="/account.php?action=view_return&return_id={{id}}">{{lang 'account.returns.list.view_details'}}</a>

templates/pages/account/return-details.html

@@ -33,6 +33,8 @@ <h1 class="returnDetails-title">{{lang 'account.returns.details.return_number' i
                         <span class="returnDetails-statusBadge returnDetails-statusBadge--in_progress">{{lang 'account.returns.status.in_progress'}}</span>
                     {{else if return_detail.status '===' 'CLOSED'}}
                         <span class="returnDetails-statusBadge returnDetails-statusBadge--closed">{{lang 'account.returns.status.closed'}}</span>
+                    {{else if return_detail.status '===' 'CANCELLED'}}
+                        <span class="returnDetails-statusBadge returnDetails-statusBadge--cancelled">{{lang 'account.returns.status.cancelled'}}</span>
                     {{/if}}
                 </div>