@fleetbase/ember-ui 0.3.20 → 0.3.22

package/addon/components/layout/header.hbs

@@ -7,27 +7,22 @@
             <Layout::Header::SidebarToggle class="mr-2" @onToggle={{@onSidebarToggle}} @disabled={{not @sidebarToggleEnabled}} />
         {{/if}}
         {{#unless (media "isMobile")}}
-            <div role="menu" class="next-catalog-menu-items flex mr-4">
-                {{#each this.menuItems as |menuItem|}}
-                    <LinkToExternal
-                        @route={{menuItem.route}}
-                        id={{concat (dasherize menuItem.route) "-header-button"}}
-                        class="next-view-header-item truncate {{menuItem.class}}"
-                        role="menuitem"
-                    >
-                        <div class="w-6">
-                            {{#if menuItem.iconComponent}}
-                                {{component (lazy-engine-component menuItem.iconComponent) options=menuItem.iconComponentOptions}}
-                            {{else}}
-                                <FaIcon @icon={{menuItem.icon}} @prefix={{menuItem.iconPrefix}} @size="sm" />
-                            {{/if}}
-                        </div>
-                        <div>
-                            <span>{{menuItem.title}}</span>
-                        </div>
-                    </LinkToExternal>
-                {{/each}}
-            </div>
+            {{!--
+                SmartNavMenu replaces the static `next-catalog-menu-items` div.
+                It implements the Priority+ overflow pattern: up to `@maxVisible`
+                (default 5) extensions are shown inline; the rest collapse into a
+                "More" dropdown.  A gear icon opens the customiser panel where
+                users can pin and reorder their favourite extensions.
+
+                Pass `@maxVisible={{n}}` to override the default cap of 5.
+                Pass `@mutateMenuItems={{fn}}` to mutate items before rendering
+                (same contract as the previous static implementation).
+            --}}
+            <Layout::Header::SmartNavMenu
+                class="next-catalog-menu-items mr-4"
+                @maxVisible={{or @maxVisibleNavItems 5}}
+                @mutateMenuItems={{@mutateMenuItems}}
+            />
         {{/unless}}
         <div id="view-header-left-content-a"></div>
         {{yield}}

package/addon/components/layout/header.js

@@ -22,41 +22,18 @@ export default class LayoutHeaderComponent extends Component {
     @service abilities;
     @service fetch;
     @tracked company;
-    @tracked menuItems = [];
     @tracked organizationMenuItems = [];
     @tracked userMenuItems = [];
     @tracked extensions = [];
 
-    constructor(owner, { menuItems = [], organizationMenuItems = [], userMenuItems = [] }) {
+    constructor(owner, { organizationMenuItems = [], userMenuItems = [] }) {
         super(...arguments);
         this.extensions = getOwner(this).application.extensions ?? [];
         this.company = this.currentUser.getCompany();
-        this.menuItems = this.mergeMenuItems(menuItems);
         this.organizationMenuItems = this.mergeOrganizationMenuItems(organizationMenuItems);
         this.userMenuItems = this.mergeUserMenuItems(userMenuItems);
     }
 
-    mergeMenuItems(menuItems = []) {
-        const headerMenuItems = this.universe.headerMenuItems;
-        const visibleMenuItems = [];
-        for (let i = 0; i < headerMenuItems.length; i++) {
-            const menuItem = headerMenuItems[i];
-            if (this.abilities.can(`${menuItem.id} see extension`)) {
-                visibleMenuItems.pushObject(menuItem);
-            }
-        }
-
-        // Merge additionals
-        visibleMenuItems.pushObjects(menuItems);
-
-        // Callback to allow mutation of menu items
-        if (typeof this.args.mutateMenuItems === 'function') {
-            this.args.mutateMenuItems(menuItems);
-        }
-
-        return visibleMenuItems;
-    }
-
     mergeOrganizationMenuItems(organizationMenuItems = []) {
         // Prepare menuItems
         const menuItems = [
@@ -275,6 +252,20 @@ export default class LayoutHeaderComponent extends Component {
         // Push support menu items
         menuItems.pushObjects(supportMenuItems);
 
+        // Push items from universe registry
+        const universeUserMenuItems = this.universe.userMenuItems;
+        if (isArray(universeUserMenuItems) && universeUserMenuItems.length) {
+            menuItems.pushObjects([
+                {
+                    seperator: true,
+                },
+                ...universeUserMenuItems,
+                {
+                    seperator: true,
+                },
+            ]);
+        }
+
         // Push provided menu items
         menuItems.pushObjects(userMenuItems);
 

package/addon/components/phone-input.js

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { debug } from '@ember/debug';
 import intlTelInput from 'intl-tel-input';
+import lookupUserIp from '@fleetbase/ember-core/utils/lookup-user-ip';
 
 export default class PhoneInputComponent extends Component {
     @service fetch;
@@ -15,13 +16,20 @@ export default class PhoneInputComponent extends Component {
             initialCountry: 'auto',
             separateDialCode: true,
             formatAsYouType: true,
-            geoIpLookup: async (success, failure) => {
+            geoIpLookup: async (success) => {
                 try {
-                    const { country_code } = await this.fetch.get('lookup/whois');
-                    success(country_code);
+                    const ipData = await lookupUserIp();
+                    if (ipData && ipData.country_code) {
+                        success(ipData.country_code);
+                    } else {
+                        // Fallback to US if no country code in response
+                        debug('No country code in IP lookup response, defaulting to US');
+                        success('us');
+                    }
                 } catch (error) {
-                    debug('Failed to lookup country code with whois API.');
-                    failure(error);
+                    // Always succeed with US fallback on error
+                    debug('Failed to lookup country code, defaulting to US: ' + error.message);
+                    success('us');
                 }
             },
             utilsScript: '/assets/libphonenumber/utils.js',

package/addon/styles/addon.css

@@ -52,6 +52,7 @@
 @import 'components/report-builder.css';
 @import 'components/query-builder.css';
 @import 'components/activity-log.css';
+@import 'components/smart-nav-menu.css';
 
 /** Third party */
 @import "ember-basic-dropdown/vendor/ember-basic-dropdown.css";