@postnord/pn-marketweb-components 2.0.6-beta9 → 2.0.8-beta2

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

@@ -9,13 +9,16 @@ export class PnMarketwebSiteheaderLogin {
     this.emitEvents = true;
     // Login dialog
     this.loginDialog = null;
+    /** User Fullname */
+    this.fullname = "";
+    this.loggedin = false;
     this.loginManager = null;
-    this.loggedIn = false;
     this.toggleButtonText = "";
-    this.username = "";
+    this.username = this.fullname;
   }
   componentWillLoad() {
-    this.loginManager = new MarketWebLoginManager({ endpoint: this.endpoint, eventTarget: this.hostElement });
+    const userInfo = this.loggedin && this.fullname ? { given_name: this.fullname } : null;
+    this.loginManager = new MarketWebLoginManager({ endpoint: this.endpoint, eventTarget: this.hostElement, userInfo });
     this.hostElement["loginmanager"] = this.loginManager;
     if (this.token) {
       this.loginManager.registerToken(this.token, 'backend');
@@ -25,6 +28,7 @@ export class PnMarketwebSiteheaderLogin {
     }
     this.hostElement.addEventListener(this.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
     this.init();
+    this.setUserName();
   }
   async init() {
     this.toggleButtonText = this.loginDialog.loginMenuLinkText;
@@ -34,19 +38,22 @@ export class PnMarketwebSiteheaderLogin {
   setUserName() {
     const userInfo = this.loginManager.getUserInfo();
     let name = "";
-    if (!this.loggedIn || !userInfo) {
+    if (!this.loggedin || !userInfo) {
       this.username = name;
     }
-    if (userInfo.given_name) {
+    if (userInfo && userInfo.given_name) {
       name = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : "");
     }
-    if (!name && userInfo.email) {
+    if (!name && userInfo && userInfo.email) {
       name = userInfo.email;
     }
+    if (!name && this.fullname) {
+      name = this.fullname;
+    }
     this.username = name;
   }
   setToggleButtonText() {
-    if (this.loggedIn) {
+    if (this.loggedin) {
       this.toggleButtonText = this.username;
       if (!this.toggleButtonText) {
         this.toggleButtonText = this.loginDialog.loggedInButtonText;
@@ -57,9 +64,9 @@ export class PnMarketwebSiteheaderLogin {
     }
   }
   onLoginStateChange(e) {
-    if (this.loggedIn !== e.detail && this.emitEvents) {
-      this.loggedIn = e.detail;
-      this.loginStateChange.emit({ loggedIn: this.loggedIn, token: this.loginManager.getToken() });
+    if (this.loggedin !== e.detail && this.emitEvents) {
+      this.loggedin = e.detail;
+      this.loginStateChange.emit({ loggedIn: this.loggedin, token: this.loginManager.getToken() });
       this.setUserName();
       this.setToggleButtonText();
     }
@@ -114,7 +121,7 @@ export class PnMarketwebSiteheaderLogin {
     }
     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", { "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) => {
@@ -241,11 +248,46 @@ export class PnMarketwebSiteheaderLogin {
         "text": ""
       },
       "defaultValue": "null"
+    },
+    "fullname": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "User Fullname"
+      },
+      "attribute": "fullname",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "loggedin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loggedin",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
     "loginManager": {},
-    "loggedIn": {},
     "toggleButtonText": {},
     "username": {}
   }; }

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

@@ -15,7 +15,11 @@ export class PnMarketwebSiteheader {
     /** Specifies which environment we're fetching data from. (production, preproduction, integration, localhost) */
     this.environment = null; //sv
     /** Access token passed from backend */
-    this.token = "";
+    this.userToken = "";
+    /** User Fullname */
+    this.userFullname = "";
+    /** User Logged in state from the backend */
+    this.userLoggedin = false;
     /** Specifies which endpoint domain we should load from */
     this.endpoint = null;
     /** Hides the site selector if set to true*/
@@ -263,7 +267,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.token, 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 })),
             (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" }))),
@@ -285,7 +289,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, 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 })),
                 (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 &&
@@ -359,7 +363,7 @@ export class PnMarketwebSiteheader {
       "reflect": true,
       "defaultValue": "null"
     },
-    "token": {
+    "userToken": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -373,10 +377,46 @@ export class PnMarketwebSiteheader {
         "tags": [],
         "text": "Access token passed from backend"
       },
-      "attribute": "token",
+      "attribute": "user-token",
       "reflect": false,
       "defaultValue": "\"\""
     },
+    "userFullname": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "User Fullname"
+      },
+      "attribute": "user-fullname",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "userLoggedin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "User Logged in state from the backend"
+      },
+      "attribute": "user-loggedin",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "endpoint": {
       "type": "string",
       "mutable": false,

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

@@ -152,7 +152,7 @@ const LoggedInTemplate = ({ ...args }) => {
     market="${ args.market }"
     language="${ args.language }"
     endpoint="${ args.endpoint }"
-    token="${ args.token }"
+    user-token="${ args.token }"
   >
   </pn-marketweb-siteheader>
 </div>
@@ -165,4 +165,28 @@ LoggedIn.args = {
   language: 'sv',
   endpoint: 'https://com-integration.postnord.com',
   token: '441c4a692237f6baa82459431400cb39ac4c07b70116ebd8f5c9df3',
-};
+};
+
+const BusinessUserLoggedInTemplate = ({ ...args }) => {
+  return `
+  <div style="background:#ddd;min-height:100vh;">
+  <pn-marketweb-siteheader
+    market="${ args.market }"
+    language="${ args.language }"
+    endpoint="${ args.endpoint }"
+    user-fullname="${ args.name }"
+    user-loggedin="${ args.loggedin }"
+  >
+  </pn-marketweb-siteheader>
+</div>
+`;
+};
+
+export const BusinessUserLoggedIn = BusinessUserLoggedInTemplate.bind({});
+BusinessUserLoggedIn.args = {
+  market : "se",
+  language: 'sv',
+  endpoint: 'https://com-integration.postnord.com',
+  name: 'custom user name',
+  loggedin: true
+};

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

@@ -33,10 +33,25 @@ const weights = {
 };
 
 
-const fileLocation = "https://com-integration.postnord.com/globalassets/global/prices/dk-findprice.xlsx";
+
+const RiktigaValues =
+  { 
+    WebUrl:  "https://riktigavykort.postnord.se/sv",   
+    AndroidAppUrl: "https://play.google.com/store/apps/details?id=se.posten.riktigavykort&hl=sv",
+    AndroidImg: "https://com-integration.postnord.com/globalassets/icons/logos-and-badges/google-play-badge_se.svg", 
+    IosAppUrl:  "https://apps.apple.com/se/app/riktiga-vykort/id444458799?l=sv",
+    IosImg: "https://com-integration.postnord.com/globalassets/icons/logos-and-badges/app_store_badge_se_rgb_blk.svg"
+  };
+
+
+
+const fileLocation = "https://com-integration.postnord.com/globalassets/global/prices/sv-findprice-1-PN.xlsx";
 
 const sendDirectUrl = "https://portal.postnord.com/skickadirekt/";
 
 const stampShopUrl = "https://shop.postnord.se/ebutik/default.aspx";
 
-export { weights, sizeCategories, fileLocation, sendDirectUrl, stampShopUrl };
+const productDescriptionUrl = "https://se-integration.postnord.com/skicka-forsandelser/brev-och-vykort/"
+
+
+export { weights, sizeCategories, fileLocation, sendDirectUrl, stampShopUrl, RiktigaValues };

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

@@ -23,6 +23,6 @@ const Template = ({ ...args }) => {
 export const Primary = Template.bind({});
 Primary.args = {
   source: fileLocation,
-  language: 'da',
-  market: 'dk',
+  language: 'sv',
+  market: 'se',
 };

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

@@ -1,6 +1,6 @@
 import { Component, h, Prop, Host, Watch, State } from "@stencil/core";
 import { state } from "./pn-find-price-store";
-import { sendDirectUrl, stampShopUrl } from "./data.js";
+import { sendDirectUrl, stampShopUrl, RiktigaValues } from "./data.js";
 export class PnfindPriceResult {
   constructor() {
     this.item = null;
@@ -9,6 +9,14 @@ export class PnfindPriceResult {
     this.showMeasurement = false;
     this.weightText = "";
     this.linkId = '';
+    this.usp = {
+      Billigast: h("span", { slot: "Billigast" },
+        this.item.highestrankusp,
+        h("pn-icon", { symbol: "box-label", small: "false", color: "green700" })),
+      Snabbast: h("span", { slot: "Snabbast" },
+        this.item.highestrankusp,
+        h("pn-icon", { symbol: "bolt", small: "false", color: "blue700" }))
+    };
   }
   componentWillLoad() {
     this.composeItems();
@@ -30,17 +38,11 @@ export class PnfindPriceResult {
     return (h(Host, null, h("pn-product-card", { "data-productid": this.item.id },
       h("pn-illustration", { slot: "illustration", illustration: this.item.illustration }),
       h("div", { slot: "title" },
-        h("h2", null,
-          this.item.name,
-          " "),
-        (this.item.highestrankusp) ?
-          (this.item.highestrankusp === "Billigast") ?
-            (h("span", { slot: "Billigast" },
-              this.item.highestrankusp,
-              h("pn-icon", { symbol: "box-label", small: "false", color: "green700" })))
-            : (h("span", { slot: "Snabbast" },
-              this.item.highestrankusp,
-              h("pn-icon", { symbol: "bolt", small: "false", color: "blue700" }))) : null),
+        this.item.infopagelink ?
+          (h("h2", null,
+            h("a", { href: this.item.infopagelink, target: "_blank" }, this.item.name))) :
+          (h("h2", null, this.item.name)),
+        this.usp[this.item.highestrankusp]),
       h("div", { slot: "content" },
         h("div", { class: "content" },
           (this.item.description) ? (h("div", { class: "description" }, this.description.map((desc) => (h("li", null, desc))))) : null,
@@ -51,10 +53,24 @@ export class PnfindPriceResult {
         this.Usp1 ? (h("span", null, this.Usp1)) : null,
         this.Usp2 ? (h("span", null, this.Usp2)) : null,
         this.Usp3 ? (h("span", null, this.Usp3)) : null)) : null,
-      this.showMeasurement ? (h("pn-product-card-info", { paket: this.item.maxmått, rulle: this.item.rulle })) : null,
+      this.showMeasurement ?
+        (h("pn-product-card-info", { paket: this.item.maxmått, rulle: this.item.rulle })) : null,
       h("div", { slot: "cardprice" },
         this.item.pricesenddirect ? (h("pn-product-card-price", { slot: "sendDirectPrice", label: state.i18n.senddirectcta, amount: this.item.pricesenddirect + '', currency: state.market.currency, url: sendDirectUrl, linkid: this.linkId + '-portal' })) : null,
-        this.item.pricestamps ? (h("pn-product-card-price", { slot: "stampPrice", label: state.i18n.stampshopcta, amount: this.item.pricestamps + '', currency: state.market.currency, url: stampShopUrl, linkid: this.linkId + '-stampshop' })) : null))));
+        this.item.pricestamps ? ((this.item.name.toLocaleLowerCase() !== "riktiga vykort") ?
+          (h("pn-product-card-price", { slot: "stampPrice", label: state.i18n.stampshopcta, amount: this.item.pricestamps + '', currency: state.market.currency, url: stampShopUrl, linkid: this.linkId + '-stampshop' })) :
+          (h("pn-product-card-price", { slot: "riktiga", label: state.i18n.riktigaVykort, amount: this.item.pricestamps + '', currency: state.market.currency, url: RiktigaValues["WebUrl"], linkid: this.linkId + '-riktiga' }))) : null),
+      h("div", { slot: "servicepoint" }, (this.item.showservicepointlink) ? (h("a", { href: state.market.servicePoint, target: "_blank" },
+        h("pn-icon", { symbol: "map-marker", color: "blue700" }),
+        state.i18n.servicePointLink)) : null),
+      h("div", { slot: "mobiledownload" }, (this.item.name.toLocaleLowerCase() === "riktiga vykort") ?
+        (h("div", { id: "riktiga" },
+          h("h4", null, state.i18n.riktigaVykortMobile),
+          h("div", null,
+            h("a", { href: RiktigaValues["AndroidAppUrl"], target: "_blank" },
+              h("img", { class: "riktigaAndroidImg", src: RiktigaValues["AndroidImg"] })),
+            h("a", { href: RiktigaValues["IosAppUrl"], target: "_blank" },
+              h("img", { class: "riktigaAppleImg", src: RiktigaValues["IosImg"] }))))) : null))));
   }
   static get is() { return "pn-find-price-result"; }
   static get originalStyleUrls() { return {
@@ -190,6 +206,22 @@ export class PnfindPriceResult {
       "attribute": "show-measurement",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "usp": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ Billigast: any; Snabbast: any; }",
+        "resolved": "{ Billigast: any; Snabbast: any; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{\n    Billigast : <span slot=\"Billigast\">{this.item.highestrankusp}<pn-icon symbol=\"box-label\" small=\"false\" color=\"green700\" /></span>,\n    Snabbast :  <span slot=\"Snabbast\">{this.item.highestrankusp}<pn-icon symbol=\"bolt\" small=\"false\" color=\"blue700\" /></span>\n  }"
     }
   }; }
   static get states() { return {

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

@@ -12,7 +12,9 @@ const { state, onChange } = createStore({
     stampshopcta: '',
     message: '',
     servicePointHeader: '',
-    servicePointLink: ''
+    servicePointLink: '',
+    riktigaVykort: '',
+    riktigaVykortMobile: ''
   },
   market: {
     currency: "",

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

@@ -10,7 +10,9 @@ export const translations = {
     'stampshopcta': 'Köp frimärken',
     'message': '*Vid köp hos valfritt ombud',
     'servicePointHeader': 'Eller hitta närmaste serviceställe',
-    'servicePointLink': 'Sök serviceställe eller brevlåda'
+    'servicePointLink': 'Hitta Serviceställe',
+    'riktigaVykort': 'köp Riktiga Vykort',
+    'riktigaVykortMobile': 'Testa Riktiga Vykorts mobilapp'
   },
   'en': {
     'componentheading': 'Our prices and terms and conditions for domestic shipments for you as a direct paying customer',
@@ -22,8 +24,10 @@ export const translations = {
     'senddirectcta': 'Buy Online',
     'stampshopcta': 'Buy Stamps',
     'message': 'When buying from any agent',
-    'servicePointHeader': 'Or find nearest service point',
-    'servicePointLink': 'Search letter-box or service point'
+    'servicePointHeader': 'Find service point',
+    'servicePointLink': 'Find service point',
+    'riktigaVykort': 'Buy Postcards',
+    'riktigaVykortMobile': 'Try the Real Postcards mobile app'
   },
   'da': {
     'componentheading': 'Vad vill du skicka?',
@@ -35,8 +39,9 @@ export const translations = {
     'senddirectcta': 'Køb Online',
     'stampshopcta': 'Køb Frimærker',
     'message': 'When buying from any agent',
-    'servicePointHeader': 'Eller find nærmeste servicested',
-    'servicePointLink': 'Søg i brevkasse eller servicepunkt'
+    'servicePointHeader': 'Find nærmeste servicested',
+    'servicePointLink': 'Find nærmeste servicested',
+    'riktigaVykort': 'Køb Riktiga Vykort',
   },
   'no': {
     'componentheading': 'Vad vill du skicka?',

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

@@ -76,10 +76,11 @@ export class PnfindPrice {
         }
       }
     }
+    //10000 to handle the null values in the rank column, to keep such products at the end of the list
     weightFilteredData.sort((a, b) => {
-      var rankA = a.highestrankusp ? a.highestrankusp.toLowerCase() : "z";
-      var rankB = b.highestrankusp ? b.highestrankusp.toLowerCase() : "z";
-      return (rankA.localeCompare(rankB));
+      var ra = a.rank ? a.rank : 10000;
+      var rb = b.rank ? b.rank : 10000;
+      return (ra - rb);
     });
     this.filteredItems = weightFilteredData;
   }
@@ -113,13 +114,7 @@ export class PnfindPrice {
       (this.filteredItems && this.filteredItems.length > 0) ? (h("div", { class: "resultlist" },
         (state.i18n.resultlistheading) ? (h("div", { class: "resultHeading" }, state.i18n.resultlistheading)) : null,
         this.filteredItems.map((item) => (h("div", null,
-          h("pn-find-price-result", { item: item })))),
-        h("div", { class: "servicePoint" },
-          h("pn-illustration", { illustration: "character-box-letters-house" }),
-          h("h3", null, state.i18n.servicePointHeader),
-          h("a", { href: state.market.servicePoint, target: "_blank" },
-            h("pn-icon", { symbol: "map-marker", color: "blue700" }),
-            state.i18n.servicePointLink)))) : null));
+          h("pn-find-price-result", { item: item })))))) : null));
   }
   static get is() { return "pn-find-price"; }
   static get originalStyleUrls() { return {

package/collection/components/widgets/pn-product-card/pn-product-card-price.css

@@ -1,5 +1,5 @@
 pn-product-card-price {
-  margin-top: 1.6rem;
+  margin-top: 1rem;
   white-space: nowrap;
   text-align: center;
   display: flex;
@@ -23,7 +23,6 @@ pn-product-card-price .price {
 }
 pn-product-card-price pn-button {
   min-width: 12.8em;
-  margin-top: 0.8rem;
   font-size: 1.25;
   order: 2;
 }
@@ -44,11 +43,4 @@ pn-product-card-price p {
   pn-product-card-price p {
     order: 2;
   }
-}
-pn-product-card-price a {
-  text-decoration: none;
-  color: #005D92;
-}
-pn-product-card-price a h3 {
-  text-decoration: underline;
 }

package/collection/components/widgets/pn-product-card/pn-product-card.css

@@ -38,6 +38,12 @@ pn-product-card [slot=title] h2 {
     width: auto;
   }
 }
+pn-product-card [slot=title] h2 > a {
+  color: #000000;
+}
+pn-product-card [slot=title] h2 > a::after {
+  content: "" !important;
+}
 pn-product-card [slot=title] > [slot] {
   border-radius: 0.4rem;
   height: 2.5em;
@@ -124,6 +130,7 @@ pn-product-card [slot=cardprice] {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 0.6em;
   flex-grow: 1;
 }
 @media screen and (min-width: 36em) {
@@ -139,6 +146,55 @@ pn-product-card [slot=cardprice] {
     align-items: flex-end;
   }
 }
+pn-product-card [slot=mobiledownload] {
+  margin-top: 1rem;
+  white-space: nowrap;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+pn-product-card [slot=mobiledownload] #riktiga {
+  order: 4;
+  margin-top: 1em;
+}
+pn-product-card [slot=mobiledownload] #riktiga > div > a::after {
+  content: "" !important;
+}
+pn-product-card [slot=mobiledownload] .riktigaAndroidImg {
+  width: 6em;
+  margin: 0.5em;
+}
+pn-product-card [slot=mobiledownload] .riktigaAppleImg {
+  width: 5.6em;
+  margin: 0.5em;
+}
+pn-product-card [slot=mobiledownload] a {
+  text-decoration: none;
+  color: #005D92;
+}
+pn-product-card [slot=mobiledownload] a h3 {
+  text-decoration: underline;
+}
+pn-product-card [slot=servicepoint] {
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 2;
+  align-items: flex-end;
+  text-align: center;
+}
+@media screen and (min-width: 36em) {
+  pn-product-card [slot=servicepoint] {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+@media screen and (min-width: 48em) {
+  pn-product-card [slot=servicepoint] {
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+  }
+}
 pn-product-card .details {
   display: flex;
   flex-direction: column;
@@ -154,5 +210,5 @@ pn-product-card .info {
 }
 pn-product-card .info > * {
   min-width: 6em;
-  margin: 0.5em 2em 0.5em 0;
+  margin: 0.5em 1em 0.5em 0;
 }

package/collection/components/widgets/pn-product-card/pn-product-card.js

@@ -12,7 +12,9 @@ export class PnProductCard {
           h("slot", { name: "note" }),
           h("slot", { name: "additionalUSP" })),
         h("div", { class: "cardprice" },
-          h("slot", { name: "cardprice" })))));
+          h("slot", { name: "cardprice" }),
+          h("slot", { name: "mobiledownload" }),
+          h("slot", { name: "servicepoint" })))));
   }
   static get is() { return "pn-product-card"; }
   static get originalStyleUrls() { return {

package/collection/globals/MarketWebLoginManager.js

@@ -24,6 +24,7 @@ class MarketWebLoginManager {
       expire: 'expire',
       expireDate: 'expiredate'
     };
+    this.overridetokenValue = 'overridetokenValue';
     this.store = {
       get: (key) => {
         const value = window.sessionStorage.getItem(`${this.storagePrefix}-${key}`);
@@ -59,6 +60,10 @@ class MarketWebLoginManager {
     this.eventTarget = (options.eventTarget) ? options.eventTarget : this.eventTarget;
     this.endpoint = options.endpoint ? options.endpoint : `${window.location.protocol}//${window.location.host}`;
     (_a = this.storagePrefix) !== null && _a !== void 0 ? _a : (this.storagePrefix = options.storagePrefix);
+    if (options.userInfo) {
+      this.store.set(this.keys.user, options.userInfo);
+      this.registerToken(this.overridetokenValue, 'override');
+    }
   }
   init(checkParameters = true) {
     if (checkParameters) {
@@ -70,7 +75,10 @@ class MarketWebLoginManager {
       this.loginStateChange();
     }
   }
-  isLoggedIn() {
+  isLoggedIn(override = false) {
+    if (override) {
+      return override;
+    }
     const isLoggedIn = (this.store.get(this.keys.token) && this.store.get(this.keys.user)) ? true : false;
     return isLoggedIn;
   }
@@ -141,6 +149,10 @@ class MarketWebLoginManager {
   }
   async fetchUserInfo() {
     const token = this.store.get(this.keys.token);
+    if (this.store.get(this.keys.token) === this.overridetokenValue) {
+      console.info('Did not fetch user data since it was set by an override');
+      return;
+    }
     const reqConfig = {
       method: 'GET',
       headers: {