From fd27939bc0c0df28b06811bc091fed63a5afcef1 Mon Sep 17 00:00:00 2001
From: Jasper Pajar <jasper.pajar@bigcommerce.com>
Date: Wed, 15 Jul 2026 13:50:10 +1000
Subject: [PATCH] feat(orders): ORDERS-7935 add badge for CANCELLED order
 returns

---
 assets/scss/components/stencil/account/_account.scss         | 5 +++++
 .../components/stencil/returnDetails/_returnDetails.scss     | 5 +++++
 templates/components/account/returns-list-v2.html            | 2 ++
 templates/pages/account/return-details.html                  | 2 ++
 4 files changed, 14 insertions(+)

diff --git a/assets/scss/components/stencil/account/_account.scss b/assets/scss/components/stencil/account/_account.scss
index 1f103fc6d6..145f7855ae 100644
--- a/assets/scss/components/stencil/account/_account.scss
+++ b/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;
diff --git a/assets/scss/components/stencil/returnDetails/_returnDetails.scss b/assets/scss/components/stencil/returnDetails/_returnDetails.scss
index 8fb7e02e5c..f21afab967 100644
--- a/assets/scss/components/stencil/returnDetails/_returnDetails.scss
+++ b/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");
diff --git a/templates/components/account/returns-list-v2.html b/templates/components/account/returns-list-v2.html
index e183801915..ec4271a9fd 100644
--- a/templates/components/account/returns-list-v2.html
+++ b/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>
diff --git a/templates/pages/account/return-details.html b/templates/pages/account/return-details.html
index f2c79ca4f2..ce59567be6 100644
--- a/templates/pages/account/return-details.html
+++ b/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>