Shows Warning to Seller if they haven't enabled tracking offers

src/lib/components/trade_offer/auto_fill.ts

@@ -9,13 +9,17 @@ import {Observe} from '../../utils/observers';
 
 import '../common/ui/steam-button';
 import {AppId, ContextId} from '../../types/steam_constants';
+import {HasPermissions} from '../../bridge/handlers/has_permissions';
 
 @CustomElement()
 @InjectBefore('div.trade_area')
 export class AutoFill extends FloatElement {
     @state()
     private pendingTradesResponse: FetchPendingTradesResponse | undefined;
 
+    @state()
+    private hasPermissions = false;
+
     static styles = [
         ...FloatElement.styles,
         css`
@@ -55,6 +59,16 @@ export class AutoFill extends FloatElement {
     async connectedCallback() {
         super.connectedCallback();
 
+        try {
+            const hasPermissions = await ClientSend(HasPermissions, {
+                permissions: [],
+                origins: ['*://*.steampowered.com/*'],
+            });
+            this.hasPermissions = hasPermissions.granted;
+        } catch (e) {
+            console.error('failed to check permissions', e);
+        }
+
         try {
             this.pendingTradesResponse = await ClientSend(FetchPendingTrades, {});
         } catch (e: any) {
@@ -190,14 +204,38 @@ export class AutoFill extends FloatElement {
         `;
     }
 
+    showPermissionWarningDialog(tradesToBuyer: Trade[]): HTMLTemplateResult {
+        if (this.hasPermissions || tradesToBuyer.length === 0) {
+            return html``;
+        }
+
+        return html`
+            <div class="container warning">
+                <div>
+                    <div class="float-icon">
+                        <img
+                            src="https://avatars.cloudflare.steamstatic.com/6ab5219d0bbcce1300a2c6d7cbc638da52edda48_full.jpg"
+                            style="height: 32px;"
+                        />
+                    </div>
+                    <span class="item-name"> Warning! </span>
+                    <div class="sale-info">
+                        You have not setup trade verification for CSFloat, you must enable it on your
+                        <a href="https://steamcommunity.com/id/me/tradeoffers/" target="_blank">Trade Offers page</a>!
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
     protected render(): HTMLTemplateResult {
         if (!this.pendingTradesResponse) return html``;
 
         const tradesToBuyer = this.pendingTradesResponse.trades.filter((e) => e.buyer_id === UserThem?.strSteamId);
 
         return html`
-            ${this.renderBulkAutoFillDialog(tradesToBuyer)} ${tradesToBuyer.map((e) => this.renderAutoFillDialog(e))}
-            ${this.showWarningDialog()}
+            ${this.showPermissionWarningDialog(tradesToBuyer)} ${this.renderBulkAutoFillDialog(tradesToBuyer)}
+            ${tradesToBuyer.map((e) => this.renderAutoFillDialog(e))} ${this.showWarningDialog()}
         `;
     }