Merge pull request #209 from vtex-apps/B2BTEAM-3131

add a way to show that the current organization is on hold

Author: nicholas-maestrello

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Persistent status indicator and warning banner in UserWidget when organization is "on-hold" or "inactive"
+- Organization status tag now visible in the main widget even when modal is closed
+
 ## [3.1.4] - 2026-01-15
 
 ### Fixed

react/components/UserWidget.tsx

@@ -586,6 +586,18 @@ const UserWidget: VtexFunctionComponent<UserWidgetProps> = ({
       </Modal>
       {userWidgetData?.getB2BSettings?.uiSettings?.showModal && (
         <Fragment>
+          {isOrgOnHoldOrInactive && (
+            <div className={`${handles.userWidgetRow} flex pr4 pl4 pt4`}>
+              <div className="bg-warning--faded pa4 br2 w-100">
+                <p className="f6 fw6 c-warning ma0">
+                  {userWidgetData?.getOrganizationByIdStorefront?.status ===
+                  'on-hold'
+                    ? formatMessage(messages.organizationOnHoldWarning)
+                    : formatMessage(messages.organizationInactiveWarning)}
+                </p>
+              </div>
+            </div>
+          )}
           <div className={`${handles.userWidgetRow} flex pr4 pl4 items-center`}>
             <div
               className={`${handles.userWidgetItem} pa3 br2 bg-base--inverted hover-bg-base--inverted active-bg-base--inverted c-on-base--inverted hover-c-on-base--inverted active-c-on-base--inverted dib mr3 flex items-center w-100`}
@@ -602,11 +614,18 @@ const UserWidget: VtexFunctionComponent<UserWidgetProps> = ({
                   }`}
                 </div>
               )}
-              <div className={`${handles.userWidgetRole}`}>
+              <div className={`${handles.userWidgetRole} mr4`}>
                 {`${formatMessage(messages.role)} ${
                   organizationsState.currentRoleName ?? ''
                 }`}
               </div>
+              {userWidgetData?.getOrganizationByIdStorefront?.status && (
+                <div className="mr4">
+                  {handleStatusMessage(
+                    userWidgetData.getOrganizationByIdStorefront.status
+                  )}
+                </div>
+              )}
               <div className="ml-auto">
                 {(hasMultipleOrganizations || isOrgOnHoldOrInactive) && (
                   <Button variant="primary" onClick={() => setShowModal(true)}>