fix: preserve Weeztix saved company/coupon after reload (Alpine sync)

Stop clearing DB-backed labels when API omits names; inject select options
for saved GUIDs when lists fail or omit rows; parse usage_count from JSON;
show OAuth fields hint when credentials already stored.

Made-with: Cursor

resources/js/app.js

@@ -788,8 +788,15 @@ document.addEventListener('alpine:init', () => {
         async init() {
             if (cfg.existing) {
                 this.codePrefix = cfg.existing.code_prefix || 'PREREG';
-                this.usageCount =
-                    typeof cfg.existing.usage_count === 'number' ? cfg.existing.usage_count : 1;
+                const uc = cfg.existing.usage_count;
+                if (typeof uc === 'number' && !Number.isNaN(uc)) {
+                    this.usageCount = uc;
+                } else if (uc !== null && uc !== undefined && String(uc).trim() !== '') {
+                    const parsed = parseInt(String(uc), 10);
+                    this.usageCount = Number.isNaN(parsed) ? 1 : parsed;
+                } else {
+                    this.usageCount = 1;
+                }
                 this.companyGuid = cfg.existing.company_guid || '';
                 this.companyName = cfg.existing.company_name || '';
                 this.couponGuid = cfg.existing.coupon_guid || '';
@@ -800,6 +807,10 @@ document.addEventListener('alpine:init', () => {
                 if (this.companyGuid) {
                     await this.loadCouponsForGuid(this.companyGuid);
                 }
+            } else if (cfg.existing && (cfg.existing.company_guid || cfg.existing.coupon_guid)) {
+                // Show saved choices even when not connected (e.g. expired refresh); lists are from DB only.
+                this.ensureSelectedCompanyInList();
+                this.ensureSelectedCouponInList();
             }
         },
 
@@ -819,13 +830,50 @@ document.addEventListener('alpine:init', () => {
         },
 
         syncCompanyNameFromSelection() {
+            if (!this.companyGuid) {
+                this.companyName = '';
+                return;
+            }
             const c = this.companies.find((x) => x.guid === this.companyGuid);
-            this.companyName = c && c.name ? c.name : '';
+            if (c && typeof c.name === 'string' && c.name.trim() !== '') {
+                this.companyName = c.name.trim();
+            }
+            // If API row has no name or list is still loading, keep companyName from server (DB).
         },
 
         syncCouponName() {
+            if (!this.couponGuid) {
+                this.couponName = '';
+                return;
+            }
             const c = this.coupons.find((x) => x.guid === this.couponGuid);
-            this.couponName = c ? c.name : '';
+            if (c && typeof c.name === 'string' && c.name.trim() !== '') {
+                this.couponName = c.name.trim();
+            }
+        },
+
+        ensureSelectedCompanyInList() {
+            const guid = this.companyGuid;
+            if (!guid || this.companies.some((x) => x.guid === guid)) {
+                return;
+            }
+            const label =
+                typeof this.companyName === 'string' && this.companyName.trim() !== ''
+                    ? this.companyName.trim()
+                    : guid;
+            this.companies = [{ guid, name: label }, ...this.companies];
+        },
+
+        ensureSelectedCouponInList() {
+            const guid = this.couponGuid;
+            if (!guid || this.coupons.some((x) => x.guid === guid)) {
+                return;
+            }
+            const label =
+                typeof this.couponName === 'string' && this.couponName.trim() !== ''
+                    ? this.couponName.trim()
+                    : guid;
+            this.coupons = [{ guid, name: label }, ...this.coupons];
         },
 
         async loadCompanies() {
@@ -833,9 +881,11 @@ document.addEventListener('alpine:init', () => {
             const { res, data } = await this.postJson(this.companiesUrl, { page_id: this.pageId });
             if (!res.ok) {
                 this.errorMessage = data.message || this.strings.genericError;
+                this.ensureSelectedCompanyInList();
                 return;
             }
             this.companies = Array.isArray(data.companies) ? data.companies : [];
+            this.ensureSelectedCompanyInList();
             this.syncCompanyNameFromSelection();
         },
 
@@ -858,11 +908,26 @@ document.addEventListener('alpine:init', () => {
             });
             if (!res.ok) {
                 this.errorMessage = data.message || this.strings.loadCouponsError;
+                this.ensureSelectedCouponInList();
                 return;
             }
             this.coupons = Array.isArray(data.coupons) ? data.coupons : [];
+            this.ensureSelectedCouponInList();
             this.syncCouponName();
         },
+
+        /** Prefer API/display name; avoid showing raw GUID when a label exists. */
+        companyLabel(c) {
+            if (!c || typeof c.guid !== 'string') {
+                return '';
+            }
+            const n = c.name;
+            if (typeof n === 'string' && n.trim() !== '') {
+                return n.trim();
+            }
+
+            return c.guid;
+        },
     }));
 });