@postnord/pn-marketweb-components 2.0.23-beta4 → 2.0.24

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.js

@@ -6,12 +6,15 @@ export class PnMarketwebSiteheaderLogin {
     this.endpoint = "";
     /** Access token passed from backend */
     this.token = "";
+    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
     this.emitEvents = true;
     // Login dialog
     this.loginDialog = null;
     /** User Fullname */
     this.fullname = "";
     this.loggedin = false;
+    /** If this is selected we will show the new profile selection dropdown instead of the login version */
+    this.showProfileSelection = false;
     this.loginManager = null;
     this.toggleButtonText = "";
     this.username = this.fullname;
@@ -35,6 +38,47 @@ export class PnMarketwebSiteheaderLogin {
     this.toggleButtonText = this.loginDialog.loginMenuLinkText;
     this.loginManager.init(this.emitEvents);
     this.setToggleButtonText();
+    this.adjustLoginLinks();
+  }
+  adjustLoginLinks() {
+    var _a, _b, _c;
+    if (!((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinks)) {
+      return;
+    }
+    const adjustLink = (link, i) => {
+      link.isLogoutLink = (link.href.indexOf('logout') !== -1);
+      if (link.isLogoutLink) {
+        link.href = this.loginManager.getLogoutUrl(link.href.replace('logout', '').replace('http://window.location.href/?', '').replace('https://window.location.href/?', ''));
+      }
+      if (i === 0 && !link.href) {
+        link.href = this.loginManager.getLoginUrl();
+        link.linkType = 'primary';
+      }
+      if (link.primaryLinkApperance && !link.linkType) {
+        link.linkType = 'primary';
+      }
+    };
+    (_b = this.loginDialog) === null || _b === void 0 ? void 0 : _b.loginMenuLinks.forEach(adjustLink);
+    (_c = this.loginDialog) === null || _c === void 0 ? void 0 : _c.loggedInLinks.forEach(adjustLink);
+    this.loginDialog.legacyLoginLinks = [
+      {
+        href: this.loginManager.getLoginUrl(this.loginDialog.loginUrl),
+        linkText: this.loginDialog.loginLinkText,
+        openInNewWindow: false,
+        isLogoutLink: false,
+        pageLink: null,
+        linkType: 'primary',
+        primaryLinkApperance: true
+      },
+      {
+        href: this.loginManager.getLoginUrl(this.loginDialog.registerUrl),
+        linkText: this.loginDialog.createLoginLinkText,
+        openInNewWindow: false,
+        isLogoutLink: false,
+        pageLink: null,
+        primaryLinkApperance: false
+      }
+    ];
   }
   setUserName() {
     const userInfo = this.loginManager.getUserInfo();
@@ -72,83 +116,23 @@ export class PnMarketwebSiteheaderLogin {
       this.setToggleButtonText();
     }
   }
-  uniqueId(text) {
-    return "loginlink-" + text.replace(/[^A-Za-z0-9.\\\/]/igm, "") + "-" + (this.emitEvents ? "1" : "2");
-  }
-  linkAppearanceAttributes(link) {
-    let attributes = {};
-    if (link.linkType) {
-      switch (link.linkType) {
-        case 'primary':
-          attributes = {
-            appearance: '',
-            variant: ''
-          };
-          break;
-        case 'secondary':
-          attributes = {
-            appearance: 'light',
-            variant: 'outlined'
-          };
-          break;
-        case 'regularlink':
-        default:
-          attributes = {
-            appearance: 'light',
-            variant: 'borderless',
-            icon: 'arrow-right'
-          };
-          break;
-      }
-      return attributes;
-    }
-    if (!link.linkType) {
-      attributes = {
-        appearance: link.primaryLinkApperance ? "dark" : "light"
-      };
-    }
-    return attributes;
-  }
   render() {
-    var _a, _b, _c;
     if (!this.loginDialog) {
       return;
     }
     let hostElementAttribute = {
-      username: null
+      username: null,
+      loggedin: 'false',
     };
     if (this.username) {
       hostElementAttribute.username = this.username;
+      hostElementAttribute.loggedin = this.loggedin + '';
     }
     return (h(Host, Object.assign({}, hostElementAttribute),
-      h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" }, (!this.loginDialog.overrideLoginMenu) ?
-        h("div", { "data-loggedin": this.loggedin + '' }, (!this.loggedin) ?
-          h("div", null, (_a = this.loginDialog.loginTitle) !== null && _a !== void 0 ? _a : h("strong", null, this.loginDialog.loginTitle),
-            ((_b = this.loginDialog.loginMenuLinks) === null || _b === void 0 ? void 0 : _b.length) > 0 ?
-              h("ul", null, this.loginDialog.loginMenuLinks.map((link, i) => {
-                const href = (i === 0 && !link.href) ? this.loginManager.getLoginUrl() : link.href;
-                return (h("li", null,
-                  h("pn-button", Object.assign({ href: href, id: this.uniqueId(link.linkText) }, this.linkAppearanceAttributes(link), (link.openInNewWindow && { target: '_blank' })), link.linkText)));
-              }))
-              : (h("ul", null,
-                h("li", null,
-                  h("pn-button", { href: this.loginManager.getLoginUrl(this.loginDialog.loginUrl), target: "_top" }, this.loginDialog.loginLinkText)),
-                h("li", null,
-                  h("pn-button", { href: this.loginDialog.registerUrl, target: "_top", appearance: "light", variant: "outlined" }, this.loginDialog.createLoginLinkText)))))
-          :
-            h("div", null,
-              h("ul", null, this.loginDialog.loggedInLinks.map((link) => {
-                const isLogoutLink = link.href.indexOf('logout') !== -1;
-                const href = (isLogoutLink) ? this.loginManager.getLogoutUrl(link.href.replace('logout', '').replace('http://window.location.href/?', '').replace('https://window.location.href/?', '')) : link.href;
-                return (h("li", null,
-                  h("pn-button", Object.assign({ href: href, id: this.uniqueId(link.linkText) }, (link.openInNewWindow && { target: '_blank' }), this.linkAppearanceAttributes(link), { onClick: () => { if (isLogoutLink) {
-                      this.loginManager.clearUserData();
-                    } } }), link.linkText)));
-              }))))
+      h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" }, this.loggedin && this.showProfileSelection ?
+        h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loginManager: this.loginManager, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })
         :
-          h("div", null,
-            h("ul", null, (_c = this.loginDialog.loginMenuLinks) === null || _c === void 0 ? void 0 : _c.map(link => h("li", null,
-              h("a", { href: link.href, target: link.openInNewWindow ? "_blank" : "_self", class: "btn btn-link" }, link.linkText))))))));
+          h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loginManager: this.loginManager, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username }))));
   }
   static get is() { return "pn-marketweb-siteheader-login"; }
   static get originalStyleUrls() { return {
@@ -195,12 +179,17 @@ export class PnMarketwebSiteheaderLogin {
       "defaultValue": "\"\""
     },
     "i18n": {
-      "type": "any",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "SiteHeaderI18N",
+        "resolved": "SiteHeaderI18N",
+        "references": {
+          "SiteHeaderI18N": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -208,8 +197,7 @@ export class PnMarketwebSiteheaderLogin {
         "tags": [],
         "text": ""
       },
-      "attribute": "i-1-8n",
-      "reflect": false
+      "defaultValue": "{ \"searchlabel\":\"\", \"searchplaceholder\":\"\", \"searchbuttontext\":\"\", \"menuHomeButton\": \"\", \"menuGoBackButton\": \"\", \"mainMenuButton\": \"\", \"menuStartButton\": \"\", \"profileSelectionFlyoutHeading\": \"\" } as SiteHeaderI18N"
     },
     "emitEvents": {
       "type": "boolean",
@@ -285,10 +273,29 @@ export class PnMarketwebSiteheaderLogin {
       "attribute": "loggedin",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "showProfileSelection": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this is selected we will show the new profile selection dropdown instead of the login version"
+      },
+      "attribute": "show-profile-selection",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
     "loginManager": {},
+    "loginLinks": {},
     "toggleButtonText": {},
     "username": {}
   }; }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.js

@@ -30,6 +30,8 @@ export class PnMarketwebSiteheader {
     this.hideSearch = false;
     /** Hides the login if set to true*/
     this.hideLogin = false;
+    /** If this is selected we will show the new profile selection dropdown instead of the login version */
+    this.showProfileSelection = false;
     /** Autocomplete endpoint */
     this.AutocompleteEndpoint = "";
     /** Forward session to backend */
@@ -38,6 +40,7 @@ export class PnMarketwebSiteheader {
     this.cache = false;
     /** Event based only language switch */
     this.spaMode = false;
+    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
     this.gotData = false;
     this.fetchingData = false;
     this.homePageLink = "/";
@@ -200,6 +203,7 @@ export class PnMarketwebSiteheader {
   }
   onLoginStateChange(e) {
     var _a, _b, _c;
+    console.log('onLoginStateChange(e', e);
     if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.loggedIn) && ((_b = e.detail) === null || _b === void 0 ? void 0 : _b.token)) {
       this.loggedIn = ((_c = e.detail) === null || _c === void 0 ? void 0 : _c.loggedIn) === true;
       if (this.sessionForward) {
@@ -268,7 +272,7 @@ export class PnMarketwebSiteheader {
                   h("path", { d: "M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z", fill: "#00A0D6", transform: "translate(0 0)" }))))),
           h("div", { class: "siteheader-topright" },
             h("slot", { name: "toprightstart" }),
-            (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { token: this.userToken, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
+            (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { token: this.userToken, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
             (this.gotData && this.languageOptions && this.languageOptions.length) && !this.hideLanguageSelector &&
               h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
             h("slot", { name: "toprightend" }))),
@@ -290,7 +294,7 @@ export class PnMarketwebSiteheader {
                       h("pn-mainnav-list", { heading: item.promotedMenuItemsHeader }, item.promotedMenuItems.map((childitem) => (h("pn-mainnav-link", { href: childitem.href, name: childitem.linkText, target: childitem.openInNewWindow ? "_blank" : "_self", linkid: this.promotedItemId(childitem) + item.id })))))));
               })),
               h("div", { slot: "footer", class: "siteheader-menu-footer" },
-                (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { emitEvents: false, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n })),
+                (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { emitEvents: false, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
                 (this.gotData && this.languageOptions && this.languageOptions.length) && !this.hideLanguageSelector &&
                   h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
                 !this.hideSiteSelector &&
@@ -508,6 +512,24 @@ export class PnMarketwebSiteheader {
       "reflect": true,
       "defaultValue": "false"
     },
+    "showProfileSelection": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this is selected we will show the new profile selection dropdown instead of the login version"
+      },
+      "attribute": "show-profile-selection",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "AutocompleteEndpoint": {
       "type": "string",
       "mutable": false,

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js

@@ -1,5 +1,7 @@
 import readme from "./readme.md";
 
+const usertoken = '5e5357915ea021150aa24fe6bd889bdacee14da41632a6c305e13ee';
+
 export default {
   title: "Web Components/Market web site Header",
   parameters: {
@@ -51,6 +53,7 @@ const PrimaryTemplate = ({ ...args }) => {
   hide-search="false"
   hide-login="false"
   cache="false"
+  show-profile-selection="true"
   autocomplete-endpoint="http://localhost:51444/find_v2/_autocomplete"
   session-forward="true">
   <a href="" class="header-cart" slot="toprightend" style="align-self:center;position:relative;text-decoration:none;">
@@ -77,6 +80,45 @@ Primary.args = {
   endpoint: 'http://localhost:51444'
 }
 
+const OldLoginDropdownTemplate = ({ ...args }) => {
+  return `
+  <div style="background:#ddd;min-height:100vh;">
+  <pn-marketweb-siteheader 
+  market="${ args.market }"
+  language="${ args.language }"
+  endpoint="${ args.endpoint }"
+  hide-site-selector="false"
+  hide-language-selector="false"
+  hide-search="false"
+  hide-login="false"
+  show-profile-selection="false"
+  cache="false"
+  autocomplete-endpoint="http://localhost:51444/find_v2/_autocomplete"
+  session-forward="true">
+  <a href="" class="header-cart" slot="toprightend" style="align-self:center;position:relative;text-decoration:none;">
+    <span>Varukorg</span>
+    <pn-icon symbol="shop" color="blue700" class="pn-icon"></pn-icon>
+</a>
+</pn-marketweb-siteheader>
+<div style="height:120vh; margin:2em; max-width:calc(100vw - 1em);background:#ccc;border:1px solid #333;">
+Content that is higher than 100% viewport height
+</div>
+</div>
+
+<!--
+<link rel="alternate" href="https://www.postnord.se/en/business-solutions" hreflang="en" />
+<link rel="alternate" href="https://www.postnord.se/foretagslosningar" hreflang="sv" />
+-->
+`;
+};
+//   
+export const OldLoginDropdown = OldLoginDropdownTemplate.bind({});
+OldLoginDropdown.args = {
+  market : "se",
+  language: 'sv',
+  endpoint: 'http://localhost:51444'
+}
+
 
 const MinimalOptionsTemplate = ({ ...args }) => {
   return `
@@ -191,8 +233,33 @@ export const LoggedIn = LoggedInTemplate.bind({});
 LoggedIn.args = {
   market : "se",
   language: 'sv',
-  endpoint: 'https://com-integration.postnord.com',
-  token: '26be29f67598bb2ee0530ac63c938727d703262646e521b67fe9751',
+  // endpoint: 'https://com-integration.postnord.com',
+  endpoint: 'http://localhost:51444/',
+  token: usertoken,
+};
+
+const LoggedInProfileSelectionTemplate = ({ ...args }) => {
+  return `
+  <div style="background:#ddd;min-height:100vh;">
+  <pn-marketweb-siteheader
+    market="${ args.market }"
+    language="${ args.language }"
+    endpoint="${ args.endpoint }"
+    user-token="${ args.token }"
+    show-profile-selection="true"
+  >
+  </pn-marketweb-siteheader>
+</div>
+`;
+};
+
+export const LoggedInProfileSelection = LoggedInProfileSelectionTemplate.bind({});
+LoggedInProfileSelection.args = {
+  market : "se",
+  language: 'sv',
+  // endpoint: 'https://com-integration.postnord.com',
+  endpoint: 'http://localhost:51444/',
+  token: usertoken,
 };
 
 const BusinessUserLoggedInTemplate = ({ ...args }) => {

package/collection/components/layout-components/pn-marketweb-siteheader/translations.js

@@ -6,7 +6,8 @@ export const translations = {
     "menuHomeButton": "Hem",
     "menuGoBackButton": "Gå tillbaka",
     "mainMenuButton": "Meny",
-    "menuStartButton": "Start"
+    "menuStartButton": "Start",
+    "profileSelectionFlyoutHeading": "Inloggad som",
   },
   'en': {
     "searchlabel": "Search",
@@ -15,7 +16,8 @@ export const translations = {
     "menuHomeButton": "Home",
     "menuGoBackButton": "Go back",
     "mainMenuButton": "Menu",
-    "menuStartButton": "Start"
+    "menuStartButton": "Start",
+    "profileSelectionFlyoutHeading": "Logged in as",
   },
   'da': {
     "searchlabel": "Søg",
@@ -24,7 +26,8 @@ export const translations = {
     "menuHomeButton": "Hjem",
     "menuGoBackButton": "Gå tilbage",
     "mainMenuButton": "Menu",
-    "menuStartButton": "Start"
+    "menuStartButton": "Start",
+    "profileSelectionFlyoutHeading": "Logget ind som",
   },
   'no': {
     "searchlabel": "Søk",
@@ -33,7 +36,8 @@ export const translations = {
     "menuHomeButton": "Hjem",
     "menuGoBackButton": "Gå tilbake",
     "mainMenuButton": "Meny",
-    "menuStartButton": "Start"
+    "menuStartButton": "Start",
+    "profileSelectionFlyoutHeading": "Logget på som",
   },
   'fi': {
     "searchlabel": "Hae",
@@ -42,6 +46,17 @@ export const translations = {
     "menuHomeButton": "Koti",
     "menuGoBackButton": "Mene takaisin",
     "mainMenuButton": "Valikko",
-    "menuStartButton": "Alkaa"
+    "menuStartButton": "Alkaa",
+    "profileSelectionFlyoutHeading": "Kirjautunut sisään nimellä",
+  },
+  'de': {
+    "searchlabel": "Suche",
+    "searchplaceholder": "Wonach suchen Sie?",
+    "searchbuttontext": "Suche",
+    "menuHomeButton": "Heim",
+    "menuGoBackButton": "Geh zurück",
+    "mainMenuButton": "Menü",
+    "menuStartButton": "Start",
+    "profileSelectionFlyoutHeading": "Eingeloggt als",
   }
 };

package/collection/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.js

@@ -1,7 +1,7 @@
 import { Component, Prop, h, Element, Host } from "@stencil/core";
 export class PnProfileSelectorOption {
   constructor() {
-    this.title = "";
+    this.heading = "";
     this.description = "";
     this.url = "";
   }
@@ -9,7 +9,7 @@ export class PnProfileSelectorOption {
     return (h(Host, null,
       h("a", { class: "customernumberoption", href: this.url },
         h("span", { class: "customernumberoption-text" },
-          h("span", { class: "customernumberoption-title" }, this.title),
+          h("span", { class: "customernumberoption-title" }, this.heading),
           h("span", { class: "customernumberoption-description" }, this.description),
           h("slot", null)))));
   }
@@ -21,7 +21,7 @@ export class PnProfileSelectorOption {
     "$": ["pn-customernumber-selector-option.css"]
   }; }
   static get properties() { return {
-    "title": {
+    "heading": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -35,7 +35,7 @@ export class PnProfileSelectorOption {
         "tags": [],
         "text": ""
       },
-      "attribute": "title",
+      "attribute": "heading",
       "reflect": false,
       "defaultValue": "\"\""
     },

package/collection/components/profile/pn-customernumber-selector/pn-customernumber-selector.js

@@ -4,8 +4,8 @@ export class PnCustomernumberSelector {
   constructor() {
     this.language = "sv";
     this.open = false;
-    this.title = "Lorem ipsum";
-    this.description = "123 654 123";
+    this.heading = "";
+    this.description = "";
     this.i18n = translations["en"];
   }
   componentWillLoad() {
@@ -24,7 +24,7 @@ export class PnCustomernumberSelector {
       h("div", { class: "customernumber-container" },
         h("button", { class: "customernumber-toggle", "aria-label": this.i18n.toggleLinkTitleText, onClick: () => this.open = !this.open },
           h("div", { class: "customernumber-selected" },
-            h("strong", { class: "customernumber-selected-title" }, this.title),
+            h("strong", { class: "customernumber-selected-title" }, this.heading),
             h("div", { class: "customernumber-selected-description" }, this.description)),
           h("pn-icon", { symbol: this.open ? 'angle-up' : 'angle-down', small: "false", color: "blue700" })),
         h("div", { class: "customernumber-options" },
@@ -74,7 +74,7 @@ export class PnCustomernumberSelector {
       "reflect": true,
       "defaultValue": "false"
     },
-    "title": {
+    "heading": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -88,9 +88,9 @@ export class PnCustomernumberSelector {
         "tags": [],
         "text": ""
       },
-      "attribute": "title",
+      "attribute": "heading",
       "reflect": false,
-      "defaultValue": "\"Lorem ipsum\""
+      "defaultValue": "\"\""
     },
     "description": {
       "type": "string",
@@ -108,7 +108,7 @@ export class PnCustomernumberSelector {
       },
       "attribute": "description",
       "reflect": false,
-      "defaultValue": "\"123 654 123\""
+      "defaultValue": "\"\""
     }
   }; }
   static get states() { return {

package/collection/components/profile/pn-customernumber-selector/pn-customernumber-selector.stories.js

@@ -13,10 +13,10 @@ const PrimaryTemplate = ({ ...args }) => {
   <div style="min-width:100%;min-height:100vh;background:#eee;padding:1em;">
     <div style="max-width:15em; background:#fff;">
 
-  <pn-customernumber-selector selected="abc1">
-    <pn-customernumber-selector-option id="abc1" title="John Doe Karlsson (Privat)" description="john.doe.karlsson@hotmail.com" url="?id=123"></pn-customernumber-selector-option>
+  <pn-customernumber-selector selected="abc1" heading="Lorem Ipsum" description="123 546 789">
+    <pn-customernumber-selector-option id="abc1" heading="John Doe Karlsson (Privat)" description="john.doe.karlsson@hotmail.com" url="?id=123"></pn-customernumber-selector-option>
     <pn-customernumber-selector-option id="12345678" url="?id=12345678">12345678</pn-customernumber-selector-option>
-    <pn-customernumber-selector-option id="abc3" title="Long name company incorporated business practice" description="Kundnr: 1234321" url="?id=123"></pn-customernumber-selector-option>
+    <pn-customernumber-selector-option id="abc3" heading="Long name company incorporated business practice" description="Kundnr: 1234321" url="?id=123"></pn-customernumber-selector-option>
   </pn-customernumber-selector>
 
   <pn-sidenav language="${args.language}">

package/collection/components/profile/pn-profile-selector/pn-profile-selector-option.js

@@ -1,7 +1,7 @@
 import { Component, Prop, h, Element, Host } from "@stencil/core";
 export class PnProfileSelectorOption {
   constructor() {
-    this.title = "";
+    this.heading = "";
     this.description = "";
     this.url = "";
   }
@@ -9,7 +9,7 @@ export class PnProfileSelectorOption {
     return (h(Host, null,
       h("a", { class: "profileselectoroption", href: this.url },
         h("span", { class: "profileselectoroption-text" },
-          h("span", { class: "profileselectoroption-title" }, this.title),
+          h("span", { class: "profileselectoroption-title" }, this.heading),
           h("span", { class: "profileselectoroption-description" }, this.description)),
         h("pn-icon", { symbol: "arrow-right", small: "false", color: "blue700" }))));
   }
@@ -21,7 +21,7 @@ export class PnProfileSelectorOption {
     "$": ["pn-profile-selector-option.css"]
   }; }
   static get properties() { return {
-    "title": {
+    "heading": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -35,7 +35,7 @@ export class PnProfileSelectorOption {
         "tags": [],
         "text": ""
       },
-      "attribute": "title",
+      "attribute": "heading",
       "reflect": false,
       "defaultValue": "\"\""
     },

package/collection/components/widgets/pn-find-price/pn-find-price-result.js

@@ -28,10 +28,10 @@ export class PnfindPriceResult {
     }
     this.showMeasurement = (this.item.maxmått !== null) || (this.item.rulle !== null);
     this.linkId = `${this.item.id}-${this.item.name.toLocaleLowerCase().replace(/[^a-zA-Z0-9]/g, '')}`;
-    var availableOnline = (this.item.availableonline !== "No");
-    this.shopLabel = availableOnline ? state.i18n.stampshopcta : state.i18n.ombudHeader;
-    this.shopUrl = availableOnline ? stampShopUrl : state.market.servicePoint;
-    this.shopId = availableOnline ? '-stampshop' : '-servicepoint';
+    var showServicepointLink = (this.item.ombudpurchase === "Yes");
+    this.shopLabel = showServicepointLink ? state.i18n.ombudHeader : state.i18n.stampshopcta;
+    this.shopUrl = showServicepointLink ? state.market.servicePoint : stampShopUrl;
+    this.shopId = showServicepointLink ? '-servicepoint' : '-stampshop';
   }
   render() {
     return (h(Host, null, h("pn-product-card", { "data-productid": this.item.id },

package/collection/components/widgets/pn-find-price/pn-find-price-store.js

@@ -5,6 +5,8 @@ const { state, onChange } = createStore({
     componentheading: '',
     deliveryscopeheading: '',
     resultlistheading: '',
+    sizeheading: '',
+    weightheading: '',
     weightlabel: '',
     maxweightlabel: '',
     maxmeasurementlabel: '',

package/collection/components/widgets/pn-find-price/pn-find-price-translations.js

@@ -3,6 +3,8 @@ export const translations = {
     'componentheading': 'Våra priser och villkor för inrikesförsändelser för dig som direktbetalande kund?',
     'deliveryscopeheading': 'Endast leveranser inom Sverige',
     'resultlistheading': 'Några bra alternativ för dig',
+    'sizeheading': 'Uppskatta storleken på din försändelse',
+    'weightheading': 'Uppskatta vikten på din försändelse',
     'weightlabel': 'Vikt',
     'maxweightlabel': 'Maxvikt',
     'maxmeasurementlabel': 'Maxvolym',
@@ -19,6 +21,8 @@ export const translations = {
     'componentheading': 'Our prices and terms and conditions for domestic shipments for you as a direct paying customer',
     'deliveryscopeheading': 'Deliveries within Sweden only',
     'resultlistheading': 'Some suitable options for you',
+    'sizeheading': 'Estimate the size of your shipment',
+    'weightheading': 'Estimate the weight of your shipment',
     'weightlabel': 'Weight',
     'maxweightlabel': 'Max weight',
     'maxmeasurementlabel': 'Maximum measurement',
@@ -35,6 +39,8 @@ export const translations = {
     'componentheading': 'Vad vill du skicka?',
     'deliveryscopeheading': 'Kun leveringer indenfor Sverige',
     'resultlistheading': 'Nogle passende muligheder for dig',
+    'sizeheading': 'Anslå størrelsen på din forsendelse',
+    'weightheading': 'Anslå vægten af din forsendelse',
     'weightlabel': 'Vægt',
     'maxweightlabel': 'Max vægt',
     'maxmeasurementlabel': 'Maks. Volumen',

package/collection/components/widgets/pn-find-price/pn-find-price.css

@@ -23,15 +23,18 @@ pn-find-price .firstCell {
 }
 pn-find-price .findprice-form {
   max-width: 60em;
-  margin: 0 auto 3em auto;
+  margin: 2em auto 3em auto;
+}
+pn-find-price h2 {
+  text-align: center;
+  margin-bottom: 1rem;
 }
-pn-find-price h2,
 pn-find-price .heading {
   text-align: center;
-  font-size: 1.5em;
   line-height: 1.1;
   font-weight: bold;
   margin-bottom: 1rem;
+  color: #005D92;
 }
 pn-find-price .resultHeading {
   text-align: center;