@postnord/pn-marketweb-components 2.0.150-test1 → 2.0.150-test3

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

@@ -17,6 +17,8 @@ export class PnMarketwebSiteheaderLogin {
       mainMenuButton: '',
       menuStartButton: '',
       profileSelectionFlyoutHeading: '',
+      loginButtonText: '',
+      loginPreamble: '',
     };
     this.siteUrl = '';
     this.emitEvents = true;
@@ -33,6 +35,7 @@ export class PnMarketwebSiteheaderLogin {
     this.username = this.fullname;
   }
   componentWillLoad() {
+    console.log('env: ', this.environment);
     const userInfo = this.loggedin && this.fullname ? { given_name: this.fullname } : null;
     headerState.loginManager = new MarketWebLoginManager({
       endpoint: this.endpoint,
@@ -154,9 +157,10 @@ export class PnMarketwebSiteheaderLogin {
     }
     return (h(Host, Object.assign({}, hostElementAttribute),
       h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" },
-        !this.loggedin && h("pn-marketweb-siteheader-login-button", { label: 'test console' }),
-        !this.loggedin && h("pn-marketweb-siteheader-login-button", { active: true, label: 'test redirect' }),
-        this.loggedin && this.showProfileSelection ? (h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })) : (h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username })))));
+        this.environment !== 'production' && !this.loggedin && h("pn-marketweb-siteheader-login-button", { label: /* this.i18n?.loginButtonText */ 'login check' }),
+        this.environment !== 'production' && this.loggedin && h("pn-marketweb-siteheader-login-mypage-button", { myPageUrl: "https://account.postnord.com/secure/profile" }),
+        this.loggedin && this.showProfileSelection ? (h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })) : (h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username })),
+        this.environment !== 'production' && h("p", null, "L\u00E4s mer om v\u00E5ra inloggade tj\u00E4nster och hur du anv\u00E4nder dem"))));
   }
   static get is() { return "pn-marketweb-siteheader-login"; }
   static get originalStyleUrls() { return {
@@ -221,7 +225,7 @@ export class PnMarketwebSiteheaderLogin {
         "tags": [],
         "text": ""
       },
-      "defaultValue": "{\n    searchlabel: '',\n    searchplaceholder: '',\n    searchbuttontext: '',\n    menuHomeButton: '',\n    menuGoBackButton: '',\n    mainMenuButton: '',\n    menuStartButton: '',\n    profileSelectionFlyoutHeading: '',\n  } as SiteHeaderI18N"
+      "defaultValue": "{\n    searchlabel: '',\n    searchplaceholder: '',\n    searchbuttontext: '',\n    menuHomeButton: '',\n    menuGoBackButton: '',\n    mainMenuButton: '',\n    menuStartButton: '',\n    profileSelectionFlyoutHeading: '',\n    loginButtonText: '',\n    loginPreamble: '',\n  } as SiteHeaderI18N"
     },
     "siteUrl": {
       "type": "string",
@@ -351,6 +355,23 @@ export class PnMarketwebSiteheaderLogin {
       "attribute": "check-user-logged-in-state-interval",
       "reflect": false,
       "defaultValue": "0"
+    },
+    "environment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "environment",
+      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -87,6 +87,29 @@ pn-marketweb-siteheader .siteheader-row > pn-marketweb-siteheader-search {
 pn-marketweb-siteheader pn-spinner {
   display: none;
 }
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content {
+  max-width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+  padding: 4rem;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content pn-button {
+  width: 100%;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content pn-marketweb-siteheader-login-links::before,
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content p::before {
+  display: block;
+  content: "";
+  height: 2px;
+  background: #F9F8F8;
+  width: 100%;
+  margin-bottom: 2.4rem;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content p {
+  font-size: 1.4rem;
+  color: #005D92;
+}
 pn-marketweb-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-container {
   display: none;
 }
@@ -360,6 +383,9 @@ header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav
   background-color: #00A0D6;
   text-decoration: none;
 }
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-marketweb-siteheader-login-linklist ul li a {
+  color: #005D92;
+}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header [data-level="1"] pn-mainnav-link pn-icon.first-level_arrow svg > path {
   fill: #FFFFFF;
 }

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

@@ -1,7 +1,7 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch, } from '@stencil/core';
+import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
 import { FetchHelper } from '../../../globals/FetchHelper';
 import { MarketWebContextService } from '../../../globals/MarketWebContextService';
-import { state as headerState } from "./pn-marketweb-siteheader-store";
+import { state as headerState } from './pn-marketweb-siteheader-store';
 import { translations } from './translations';
 export class PnMarketwebSiteheader {
   constructor() {
@@ -367,7 +367,7 @@ export class PnMarketwebSiteheader {
               })),
               h("div", { slot: "footer", class: "siteheader-menu-footer" },
                 h("slot", { name: "menu-footer-cta" }),
-                this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { emitEvents: false, siteUrl: this.siteDefinition.url, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
+                this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { emitEvents: false, siteUrl: this.siteDefinition.url, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection, environment: this.environment })),
                 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 && (h("pn-site-selector", { language: this.language },
                   this.gotData && ((_e = this.siteSelector) === null || _e === void 0 ? void 0 : _e.currentSiteTitle) && (h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription })),

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

@@ -380,7 +380,7 @@ const LoggedInTemplate = ({ ...args }) => {
     language="${args.language}"
     endpoint="${args.endpoint}"
     user-token="${args.token}"
-    check-user-logged-in-state-interval="${args.checkUserLoggedInStateInterval+''}"
+    check-user-logged-in-state-interval="${args.checkUserLoggedInStateInterval + ''}"
   >
   </pn-marketweb-siteheader>
 </div>
@@ -477,7 +477,7 @@ DotComSiteHeader.args = {
   language: 'sv',
   endpoint: 'https://com-integration.postnord.com',
   name: 'DotCom User',
-  loggedin: false,
+  loggedin: true,
 };
 
 const TPLSiteHeaderTemplate = ({ ...args }) => {
@@ -510,8 +510,8 @@ TPLSiteHeader.args = {
   hideHomeMenuItem: true,
   hideLanguageSelector: false,
   loggedin: false,
-  buttonText: "Kontrolltornet",
-  placeholder: "placeholder"
+  buttonText: 'Kontrolltornet',
+  placeholder: 'placeholder',
 };
 
 const ATLoginTestTemplate = ({ ...args }) => {
@@ -534,4 +534,3 @@ const ATLoginTestTemplate = ({ ...args }) => {
   </header>`;
 };
 export const ATLoginTest = ATLoginTestTemplate.bind({});
-

package/collection/components/widgets/pn-proxio-findprice/pn-proxio-findprice.css

@@ -1,11 +1,10 @@
 @charset "UTF-8";
 pn-proxio-findprice .findprice-form {
-  /*max-width: 60em;*/
   margin: 0em auto 3em auto;
 }
 pn-proxio-findprice .findprice-form-wrapper {
   background-color: #EFFBFF;
-  padding: 3.2rem 0;
+  padding: 3.2rem;
 }
 pn-proxio-findprice .sizeTable {
   border-style: none !important;
@@ -18,12 +17,13 @@ pn-proxio-findprice .sizeTable > tr td {
   vertical-align: bottom;
   padding-right: 1em;
   padding-top: 1em;
+  position: relative;
+  z-index: 1;
 }
 pn-proxio-findprice .sizeTable #clouds {
   position: absolute;
-  top: 0em;
-  left: 4em;
-  z-index: -1;
+  top: 3rem;
+  width: 100%;
 }
 pn-proxio-findprice .firstCell {
   margin-right: 0;
@@ -35,12 +35,17 @@ pn-proxio-findprice [slot=title] {
 pn-proxio-findprice h2 {
   text-align: center;
 }
-pn-proxio-findprice .heading {
+pn-proxio-findprice .findprice__heading {
   text-align: center;
   line-height: 1.1;
   font-weight: bold;
-  margin-bottom: 1rem;
   color: #000000;
+  font-size: 3.2rem;
+  font-weight: 700;
+}
+pn-proxio-findprice .findprice__subheading {
+  font-size: 2.4rem;
+  margin-bottom: 2.4rem;
 }
 pn-proxio-findprice .resultHeading {
   text-align: center;
@@ -61,22 +66,31 @@ pn-proxio-findprice .weightoption {
   font-size: 0.9em;
   margin: 0 auto;
 }
-pn-proxio-findprice .weightoption-content {
+pn-proxio-findprice .findprice-form-wrapper .weightoption .weightoption-content {
   text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: row;
 }
-pn-proxio-findprice .weightoption-content pn-choice-button {
+pn-proxio-findprice .findprice-form-wrapper .weightoption .weightoption-content pn-choice-button {
   width: 7em;
   line-height: 3.3em;
   font-size: 0.9em;
   vertical-align: bottom;
+  background: #FFFFFF;
+  border-radius: 1rem;
 }
-pn-proxio-findprice .weightoption-content pn-choice-button > label {
+pn-proxio-findprice .findprice-form-wrapper .weightoption .weightoption-content pn-choice-button > label {
   align-content: center;
   justify-content: center;
+  color: #000000;
+  margin-bottom: 0;
 }
-pn-proxio-findprice .weightoption-content pn-choice-button ::before {
+pn-proxio-findprice .findprice-form-wrapper .weightoption .weightoption-content pn-choice-button ::before {
   content: "Max  ";
   font-weight: lighter;
+  color: #5E554A;
 }
 pn-proxio-findprice .resultlist {
   max-width: 60em;

package/collection/components/widgets/pn-proxio-findprice/pn-proxio-findprice.js

@@ -115,7 +115,7 @@ export class PnProxioFindPrice {
   render() {
     return (h("div", { class: "findprice-form" },
       h("div", { class: "findprice-form-wrapper" },
-        h("h4", { class: "heading" }, state.i18n.sizeheading),
+        h("h4", { class: "findprice__heading" }, state.i18n.sizeheading),
         h("div", { class: "sizecategory" },
           h("table", { class: "sizeTable" },
             h("img", { id: "clouds", src: clouds }),
@@ -136,7 +136,7 @@ export class PnProxioFindPrice {
                     this.weight = { value: 0, name: "" };
                     this.weightvalue = this.weight.value;
                   } }))))))),
-        h("h4", { class: "heading" }, state.i18n.weightheading),
+        h("h4", { class: "findprice__heading findprice__subheading" }, state.i18n.weightheading),
         (this.sizecategory.value && weights[this.sizecategory.unit]) ? (h("div", { class: "weightoption" }, h("div", { class: "weightoption-content" }, weights[this.sizecategory.unit].map((wght) => (h("pn-choice-button", { id: 'findpriceweight-' + wght.value, choiceid: this.sizecategory.value + wght.value, name: "weight", type: "radio", value: (!this.weight.value) ? 0 : weights[this.sizecategory.unit].findIndex((x) => x.value === this.weightvalue), checked: wght.value === this.weight.value, onChange: () => {
             this.weight = weights[this.sizecategory.unit].filter(x => x.value === wght.value)[0];
             this.weightvalue = this.weight.value;

package/collection/globals/MarketWebLoginManager.js

@@ -332,7 +332,7 @@ class MarketWebLoginManager {
   getBaseUrl() {
     const atEnvironments = ["localhost", "integration.", 'local.'];
     let useATEnv = atEnvironments.filter(x => this.endpoint.indexOf(x) !== -1).length > 0;
-    if (window.location.hostname.indexOf('atportal.postnord.com') === 0) {
+    if (['devportal.postnord.com', 'atportal.postnord.com'].indexOf(window.location.hostname) !== -1) {
       useATEnv = true;
     }
     if (useATEnv) {

package/custom-elements/index.d.ts

@@ -170,6 +170,12 @@ export const PnMarketwebSiteheaderLoginLinks: {
   new (): PnMarketwebSiteheaderLoginLinks;
 };
 
+interface PnMarketwebSiteheaderLoginMypageButton extends Components.PnMarketwebSiteheaderLoginMypageButton, HTMLElement {}
+export const PnMarketwebSiteheaderLoginMypageButton: {
+  prototype: PnMarketwebSiteheaderLoginMypageButton;
+  new (): PnMarketwebSiteheaderLoginMypageButton;
+};
+
 interface PnMarketwebSiteheaderLoginProfileselection extends Components.PnMarketwebSiteheaderLoginProfileselection, HTMLElement {}
 export const PnMarketwebSiteheaderLoginProfileselection: {
   prototype: PnMarketwebSiteheaderLoginProfileselection;