@postnord/pn-marketweb-components 2.0.78 → 2.0.80

package/collection/components/input/pn-bonus-progressbar/pn-bonus-progressbar.stories.js

@@ -13,39 +13,84 @@ const Template = ({ ...args }) => {
   <div style="width:500px;padding-bottom:100px;">
     
 
-<pn-bonus-progressbar value="970132"
-icon="stamp"
-theme="red"
-bonuspercentage="17%"
-heading="Din rabatt p&#229; Varor"
-sumtext="Nuvarande summa: 970132 SEK">
-<pn-bonus-progressbar-level value="0" bonuspercentage="14%"></pn-bonus-progressbar-level>
-<pn-bonus-progressbar-level value="15001" bonuspercentage="15%"></pn-bonus-progressbar-level>
-<pn-bonus-progressbar-level value="35001" bonuspercentage="15.5%"></pn-bonus-progressbar-level>
-<pn-bonus-progressbar-level value="70001" bonuspercentage="16%"></pn-bonus-progressbar-level>
-<pn-bonus-progressbar-level value="105001" bonuspercentage="17%"></pn-bonus-progressbar-level>
+  <pn-bonus-progressbar value="0"
+  icon="box"
+  theme="blue"
+  bonuspercentage="7%"
+  heading="Din rabatt p&#229; frim&#228;rken"
+  sumtext="Nuvarande ink&#246;pssumma: 0 SEK">
+<pn-bonus-progressbar-level value="0" bonuspercentage="7%"></pn-bonus-progressbar-level>
+<pn-bonus-progressbar-level value="250001" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
+<pn-bonus-progressbar-level value="450001" bonuspercentage="8%"></pn-bonus-progressbar-level>
+<pn-bonus-progressbar-level value="900001" bonuspercentage="9%"></pn-bonus-progressbar-level>
+<pn-bonus-progressbar-level value="1500001" bonuspercentage="11%"></pn-bonus-progressbar-level>
 
 </pn-bonus-progressbar>
+
 </div>
+
   <div style="width:380px;margin-bottom:3em;">
-  <pn-bonus-progressbar value="268905"
-                          icon="stamp"
-                          theme="blue"
-                          bonuspercentage="7.5%"
-                          heading="Din rabatt p&#229; frim&#228;rken"
-                          sumtext="268905 SEK">
-            <pn-bonus-progressbar-level value="0" bonuspercentage="7%"></pn-bonus-progressbar-level>
-            <pn-bonus-progressbar-level value="250001" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
-            <pn-bonus-progressbar-level value="450001" bonuspercentage="8%"></pn-bonus-progressbar-level>
-            <pn-bonus-progressbar-level value="900001" bonuspercentage="9%"></pn-bonus-progressbar-level>
-            <pn-bonus-progressbar-level value="1500001" bonuspercentage="11%"></pn-bonus-progressbar-level>
-
-    </pn-bonus-progressbar>
+
+
+
+  <pn-bonus-progressbar value="477483"
+  icon="box"
+  theme="blue"
+  bonuspercentage="8%"
+  heading="Din rabatt p&#229; frim&#228;rken"
+  sumtext="Nuvarande ink&#246;pssumma: 477483 SEK">
+<pn-bonus-progressbar-level value="0" bonuspercentage="7%"></pn-bonus-progressbar-level>
+<pn-bonus-progressbar-level value="250001" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
+<pn-bonus-progressbar-level value="450001" bonuspercentage="8%"></pn-bonus-progressbar-level>
+<pn-bonus-progressbar-level value="900001" bonuspercentage="9%"></pn-bonus-progressbar-level>
+<pn-bonus-progressbar-level value="1500001" bonuspercentage="11%"></pn-bonus-progressbar-level>
+
+</pn-bonus-progressbar>
+
+
 </div>
 
   `;
 };
 
+// const Template = ({ ...args }) => {
+//   return `
+//   <div style="width:500px;padding-bottom:100px;">
+    
+
+// <pn-bonus-progressbar value="970132"
+// icon="stamp"
+// theme="red"
+// bonuspercentage="17%"
+// heading="Din rabatt p&#229; Varor"
+// sumtext="Nuvarande summa: 970132 SEK">
+// <pn-bonus-progressbar-level value="0" bonuspercentage="14%"></pn-bonus-progressbar-level>
+// <pn-bonus-progressbar-level value="15001" bonuspercentage="15%"></pn-bonus-progressbar-level>
+// <pn-bonus-progressbar-level value="35001" bonuspercentage="15.5%"></pn-bonus-progressbar-level>
+// <pn-bonus-progressbar-level value="70001" bonuspercentage="16%"></pn-bonus-progressbar-level>
+// <pn-bonus-progressbar-level value="105001" bonuspercentage="17%"></pn-bonus-progressbar-level>
+
+// </pn-bonus-progressbar>
+// </div>
+//   <div style="width:380px;margin-bottom:3em;">
+//   <pn-bonus-progressbar value="268905"
+//                           icon="stamp"
+//                           theme="blue"
+//                           bonuspercentage="7.5%"
+//                           heading="Din rabatt p&#229; frim&#228;rken"
+//                           sumtext="268905 SEK">
+//             <pn-bonus-progressbar-level value="0" bonuspercentage="7%"></pn-bonus-progressbar-level>
+//             <pn-bonus-progressbar-level value="250001" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
+//             <pn-bonus-progressbar-level value="450001" bonuspercentage="8%"></pn-bonus-progressbar-level>
+//             <pn-bonus-progressbar-level value="900001" bonuspercentage="9%"></pn-bonus-progressbar-level>
+//             <pn-bonus-progressbar-level value="1500001" bonuspercentage="11%"></pn-bonus-progressbar-level>
+
+//     </pn-bonus-progressbar>
+// </div>
+
+//   `;
+// };
+
 export const Primary = Template.bind({});
 Primary.args = {
 

package/collection/components/minor/pn-titletag/pn-titletag.css

@@ -24,4 +24,8 @@ pn-titletag[color=coral700], pn-titletag[color=coral] {
 pn-titletag[color=gray900], pn-titletag[color=gray], pn-titletag[color=grey] {
   background: #D3CECB;
   color: #2D2013;
+}
+pn-titletag[color=gray50], pn-titletag[color=lightgray], pn-titletag[color=lightgrey] {
+  background: #F3F2F2;
+  color: #2D2013;
 }

package/collection/components/minor/pn-titletag/title-tag.stories.js

@@ -16,6 +16,7 @@ export default {
     <pn-titletag color="blue700">No icon</pn-titletag>
     <pn-titletag color="coral">Coral</pn-titletag>
     <pn-titletag color="grey">Grey</pn-titletag>
+    <pn-titletag color="gray25">Light grey</pn-titletag>
   </fieldset>
   `;
 };

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

@@ -0,0 +1,71 @@
+pn-proxio-pricegroup div.weightcontainer {
+  margin: 3rem 0;
+}
+pn-proxio-pricegroup div.weightvaluecontainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+pn-proxio-pricegroup div.weightdata {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-content: center;
+  flex-wrap: wrap;
+  height: 5rem;
+  justify-content: space-between;
+}
+pn-proxio-pricegroup input[type=radio] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 1.3rem;
+  height: 1.3rem;
+  background-color: #005D92;
+  border-radius: 50%;
+}
+pn-proxio-pricegroup input[type=radio]:checked {
+  z-index: 1;
+  transform: translateY(-0.1rem);
+  height: 1.5rem;
+  width: 1.5rem;
+  box-shadow: 0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92;
+}
+pn-proxio-pricegroup pn-button[disabled=disabled] {
+  opacity: 0.2;
+}
+pn-proxio-pricegroup pn-button button div.button-tooltip {
+  visibility: hidden;
+  display: none;
+}
+pn-proxio-pricegroup pn-button button:focus .pn-button-bg {
+  box-shadow: none;
+}
+pn-proxio-pricegroup div.weightradios {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  color: #005D92;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+}
+pn-proxio-pricegroup div.weightline {
+  width: 100%;
+  background-color: #F3F2F2;
+  z-index: -1;
+  height: 0.7rem;
+  -webkit-transform: translateX(2.1rem) translateY(1.32rem);
+  transform: translateX(2.1rem) translateY(1.32rem);
+  border-radius: 3rem;
+  margin-right: 3.5rem;
+}
+pn-proxio-pricegroup .activeweight {
+  font-size: large;
+  font-weight: bold;
+}

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

@@ -0,0 +1,204 @@
+import { Component, h, Host, Listen, Prop, State } from "@stencil/core";
+import { FetchHelper } from "../../../globals/FetchHelper";
+import { MarketWebContextService } from "../../../globals/MarketWebContextService";
+import { translations } from "./translations";
+export class PnProxioPricegroup {
+  constructor() {
+    /** Specifies which endpoint domain we should load from */
+    this.endpoint = null;
+    this.culture = "sv-se";
+    this.tariffid = "";
+    this.cache = true;
+    this.activeWeightIndex = 0;
+    this.data = null;
+    this.i18n = translations["sv-se"];
+    this.fetchHelper = new FetchHelper("proxiopricegroup");
+  }
+  componentWillLoad() {
+    this.setInitialValues().then(() => {
+      this.init();
+    });
+  }
+  async setInitialValues(href = window.location.href) {
+    const marketWebContextService = new MarketWebContextService(href);
+    const environment = await marketWebContextService.getEnvironmentName();
+    if ((!this.endpoint && (environment === null || environment === void 0 ? void 0 : environment.indexOf('local')) === -1)) {
+      const market = await marketWebContextService.getMarket();
+      this.endpoint = await marketWebContextService.getEndpoint(environment, market);
+    }
+    if (!this.endpoint) {
+      this.endpoint = "";
+    }
+  }
+  init() {
+    this.setCulture();
+    this.fetchData();
+  }
+  async fetchData() {
+    if (!this.culture || !this.tariffid) {
+      return;
+    }
+    const endpoint = (this.endpoint.lastIndexOf("/") === this.endpoint.length - 1) ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
+    const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&culture=${this.culture}&cached=${this.cache}`;
+    const data = await this.fetchHelper.fetchJson(fetchUrl, {
+      'mode': 'cors'
+    }, this.cache, this.onFetchData.bind(this));
+    if (data === null || data === void 0 ? void 0 : data.proxioProduct) {
+      this.data = data;
+    }
+  }
+  onFetchData(data) {
+    this.data = data;
+  }
+  setActiveWeightIndex(weightIndex) {
+    var _a, _b, _c;
+    let minIndex = 0;
+    let maxIndex = (_c = ((_b = (_a = this.data.proxioProduct) === null || _a === void 0 ? void 0 : _a.weightAndPriceList) === null || _b === void 0 ? void 0 : _b.length) - 1) !== null && _c !== void 0 ? _c : minIndex;
+    weightIndex = weightIndex > maxIndex ? maxIndex : weightIndex;
+    weightIndex = weightIndex < minIndex ? minIndex : weightIndex;
+    this.activeWeightIndex = weightIndex;
+  }
+  setCulture() {
+    if (translations[this.culture]) {
+      this.i18n = translations[this.culture];
+    }
+  }
+  getPrice(product) {
+    var _a;
+    return (_a = product === null || product === void 0 ? void 0 : product.weightAndPriceList[this.activeWeightIndex]) === null || _a === void 0 ? void 0 : _a.item2;
+  }
+  isActive(index) {
+    return index === this.activeWeightIndex;
+  }
+  render() {
+    var _a, _b, _c;
+    return (h(Host, null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.proxioProduct) ? (h("div", null,
+      h("div", { class: "weightcontainer" }, this.data.proxioProduct.weightAndPriceList ?
+        (h("div", { class: "weightvaluecontainer" },
+          h("pn-button", { disabled: this.activeWeightIndex === 0 ? ("disabled") : (null), "icon-only": "true", icon: "arrow-left", appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex - 1) }),
+          h("div", { class: "weightradios" },
+            h("div", { class: "weightline" }),
+            this.data.proxioProduct.weightAndPriceList.map((weightItem, index) => h("div", { class: "weightdata" + (this.isActive(index) ? (" activeweight") : ("")) },
+              h("input", { type: "radio", id: "weightradio" + index, name: "weightradio", value: index, checked: this.isActive(index), onClick: () => this.setActiveWeightIndex(index) }),
+              h("label", { htmlFor: "weightradio" + index }, weightItem.item1)))),
+          h("pn-button", { disabled: this.activeWeightIndex === ((_c = (_b = this.data.proxioProduct) === null || _b === void 0 ? void 0 : _b.weightAndPriceList) === null || _c === void 0 ? void 0 : _c.length) - 1 ? ("disabled") : (null), icon: "arrow-right", appearance: "light", "icon-only": "true", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex + 1) }))) : (null)),
+      h("pn-proxio-productcard", null,
+        h("h2", { slot: "title" }, this.data.proxioProduct.productTitle),
+        h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }),
+        h("div", { slot: "information" },
+          h("pn-proxio-productcard-information", { label: this.i18n.labelPackage, information: this.data.proxioProduct.productPackageDimensionsList }),
+          h("pn-proxio-productcard-information", { label: this.i18n.labelRoll, information: this.data.proxioProduct.productRollDimensionsList })),
+        h("div", { slot: "bottomtags" },
+          this.data.proxioProduct.tracable ?
+            (h("pn-titletag", { color: "gray50" }, this.i18n.notTraceable)) : (null),
+          this.data.proxioProduct.usp1 ?
+            (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp1)) : (null),
+          this.data.proxioProduct.usp2 ?
+            (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp2)) : (null),
+          this.data.proxioProduct.usp3 ?
+            (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp3)) : (null)),
+        h("pn-illustration", { slot: "illustration", illustration: this.data.proxioProduct.productIcon }),
+        h("div", { slot: "pricelink" },
+          h("pn-proxio-productcard-pricelink", { price: this.i18n.from + this.getPrice(this.data.proxioProduct), link: this.data.proxioProduct.productLink, linktext: this.data.proxioProduct.productLinkText }),
+          this.data.relatedProxioProducts ? (this.data.relatedProxioProducts.map((product) => (h("pn-proxio-productcard-pricelink", { price: this.i18n.from + this.getPrice(product), link: product.productLink, linktext: product.productLinkText })))) : (null))))) : (null)));
+  }
+  static get is() { return "pn-proxio-pricegroup"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-proxio-pricegroup.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-proxio-pricegroup.css"]
+  }; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies which endpoint domain we should load from"
+      },
+      "attribute": "endpoint",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "culture": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "culture",
+      "reflect": false,
+      "defaultValue": "\"sv-se\""
+    },
+    "tariffid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tariffid",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "cache": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cache",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "activeWeightIndex": {},
+    "data": {},
+    "i18n": {}
+  }; }
+  static get listeners() { return [{
+      "name": "activeWeightIndex",
+      "method": "setActiveWeightIndex",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "culture",
+      "method": "setCulture",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/collection/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.stories.js

@@ -0,0 +1,27 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Proxio/Price group list",
+  parameters: {
+    notes: readme
+  }
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <div style="max-width: 67em; margin:1em auto 0;">
+      <pn-proxio-pricegroup
+        culture="${args.culture}"
+        tariffid="${args.tariffId}"
+        cache="${args.cache}" >
+      </pn-proxio-pricegroup>
+    </div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  culture: "sv-se",
+  tariffId: "7c702ee4-d20c-4b01-aad8-6e5309d59bd0",
+  cache: true
+};

package/collection/components/widgets/pn-proxio-pricegroup/translations.js

@@ -0,0 +1,16 @@
+export const translations = {
+  'sv-se': {
+    "from": "Från ",
+    "labelRoll": "Rulle",
+    "labelPackage": "Paket",
+    "notTraceable": "Inte spårbart",
+    "Creapest": "Billigast"
+  },
+  'en-gb': {
+    "from": "From ",
+    "labelRoll": "Roll",
+    "labelPackage": "Package",
+    "notTraceable": "Not traceable",
+    "Creapest": "Cheapest"
+  }
+};

package/collection/components/widgets/pn-proxio-pricegroup/types.js

@@ -0,0 +1 @@
+export {};

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-description.css

@@ -0,0 +1,6 @@
+pn-proxio-productcard-description h3 {
+  font-size: 2rem;
+}
+pn-proxio-productcard-description .highlight {
+  color: #0fa85c;
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-description.js

@@ -0,0 +1,93 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProxioProductcardDescription {
+  constructor() {
+    this.list = [];
+  }
+  render() {
+    return (h(Host, null,
+      this.heading ? (h("h3", null, this.heading)) : (null),
+      this.highlight ? (h("h3", { class: "highlight" }, this.highlight)) : (null),
+      this.description ? (h("span", null, this.description)) : (null),
+      this.list ?
+        (h("ul", null, this.list.map((text) => {
+          return (h("li", null, text));
+        })))
+        : (null)));
+  }
+  static get is() { return "pn-proxio-productcard-description"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-proxio-productcard-description.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-proxio-productcard-description.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "highlight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "highlight",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "list": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-information.css

@@ -0,0 +1,6 @@
+pn-proxio-productcard-information {
+  align-self: center;
+}
+pn-proxio-productcard-information p strong.label {
+  font-weight: 500;
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-information.js

@@ -0,0 +1,67 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProxioProductcardInformation {
+  constructor() {
+    this.information = [];
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "cardinfocontent" }, this.information && this.label ? (h("div", { class: "cardinfocontent-item" },
+        h("p", null,
+          h("strong", null, this.label)),
+        this.information.map((item) => (item ?
+          (h("p", null,
+            h("strong", { class: "label" },
+              item.item1,
+              ":"),
+            " ",
+            item.item2))
+          : (null))))) : null)));
+  }
+  static get is() { return "pn-proxio-productcard-information"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-proxio-productcard-information.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-proxio-productcard-information.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "information": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ProductGenericItem[]",
+        "resolved": "ProductGenericItem[]",
+        "references": {
+          "ProductGenericItem": {
+            "location": "import",
+            "path": "../pn-proxio-pricegroup/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-pricelink.css

@@ -0,0 +1,13 @@
+pn-proxio-productcard-pricelink {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 2rem 1rem;
+  gap: 1rem;
+  align-content: center;
+  flex-wrap: wrap;
+}
+pn-proxio-productcard-pricelink pn-button {
+  min-width: 17rem;
+}