@repobit/dex-system-design 0.21.2 → 0.22.1

package/src/components/pricing-cards/pricing-card.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../badge/badge.js";
 import "../Button/Button.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
@@ -9,7 +10,8 @@ class PricingContainer extends LitElement {
   static properties = {
     planType: { type: String },
     locale  : { type: String },
-    currency: { type: String }
+    currency: { type: String },
+    shadow  : { type: Boolean, reflect: true }
   };
 
   constructor() {
@@ -17,6 +19,7 @@ class PricingContainer extends LitElement {
     this.planType = "individual";
     this.locale = "en-US";
     this.currency = "EUR";
+    this.shadow = true;
   }
 
   handleSwitch(event) {
@@ -24,26 +27,13 @@ class PricingContainer extends LitElement {
     this.planType = event.detail.planType;
   }
 
-  formatCurrency(value) {
-    const numericValue =
-      typeof value === "number"
-        ? value
-        : parseFloat(value.replace(/[^\d.-]/g, ""));
-
-    if (isNaN(numericValue)) return "";
-
-    const formattedValue = new Intl.NumberFormat(this.locale, {
-      style                : "currency",
-      currency             : this.currency,
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    }).format(numericValue);
-
-    return formattedValue;
-  }
-
   render() {
     return html`
+      <style>
+        ${tokens}
+        ${pricingCardsCSS}
+      </style>
+      
       <div class="pricing-container">
         <pricing-switch
           .planType=${this.planType}
@@ -53,57 +43,105 @@ class PricingContainer extends LitElement {
         <div class="pricing-cards">
           ${this.planType === "individual"
             ? html`
-                <pricing-card
-                  title="Bitdefender Ultimate Security"
-                  price=${this.formatCurrency(79.99)}
-                  discount="Save 50%"
-                  originalPrice=${this.formatCurrency(159.99)}
-                  features
-                  .planType=${this.planType}
-                ></pricing-card>
-
-                <pricing-card
-                  highlight
-                  features
-                  identity
-                  .planType=${this.planType}
-                ></pricing-card>
-
-                <pricing-card
-                  title="Bitdefender Total Security"
-                  price=${this.formatCurrency(49.99)}
-                  discount="Save 55%"
-                  originalPrice=${this.formatCurrency(159.99)}
-                  features
-                  privacy
-                  identity
-                  .planType=${this.planType}
-                ></pricing-card>
+                <!-- Card 1: VSB - Ultimate Security -->
+                <bd-context ignore-events-parent>
+                  <bd-product product-id="vsb">
+                    <bd-option devices="5" subscription="1" data-layer-event="info">
+                      <pricing-card
+                        title="Bitdefender Ultimate Security"
+                        planType="individual"
+                        productId="vsb"
+                        .shadow=${this.shadow}
+                      ></pricing-card>
+                    </bd-option>
+                  </bd-product>
+                </bd-context>
+
+                <!-- Card 2: TSI - Premium Security (highlighted) -->
+                <bd-context ignore-events-parent>
+                  <bd-product product-id="ts_i">
+                    <bd-option devices="5" subscription="1" data-layer-event="info">
+                      <pricing-card
+                        highlight
+                        features
+                        identity
+                        planType="individual"
+                        productId="ts_i"
+                        .shadow=${this.shadow}
+                      ></pricing-card>
+                    </bd-option>
+                  </bd-product>
+                </bd-context>
+
+                <!-- Card 3: PSI - Total Security -->
+                <bd-context ignore-events-parent>
+                  <bd-product product-id="ps_i">
+                    <bd-option devices="5" subscription="1" data-layer-event="info">
+                      <pricing-card
+                        title="Bitdefender Total Security"
+                        features
+                        privacy
+                        identity
+                        planType="individual"
+                        productId="ps_i"
+                        .shadow=${this.shadow}
+                      ></pricing-card>
+                    </bd-option>
+                  </bd-product>
+                </bd-context>
               `
-            : html`<pricing-card-family
-                  title="Bitdefender Ultimate Security"
-                  price=${this.formatCurrency(119.99)}
-                  discount="Save 40%"
-                  originalPrice=${this.formatCurrency(199.99)}
-                  features
-                  privacy
-                  identityExtended
-                  parentalControl
-                ></pricing-card-family>
-                <pricing-card-family
-                  highlight
-                  features
-                  identity
-                ></pricing-card-family>
-                <pricing-card-family
-                  title="Bitdefender Total Security"
-                  price=${this.formatCurrency(79.99)}
-                  discount="Save 43%"
-                  originalPrice=${this.formatCurrency(139.99)}
-                  features
-                  privacy
-                  identity
-                ></pricing-card-family>`}
+            : html`
+                <!-- Family Card 1: VSB -->
+                <bd-context ignore-events-parent>
+                  <bd-product product-id="vsb">
+                    <bd-option devices="5" subscription="1" data-layer-event="info">
+                      <pricing-card-family
+                        title="Bitdefender Ultimate Security"
+                        features
+                        privacy
+                        identityExtended
+                        parentalControl
+                        planType="family"
+                        productId="vsb"
+                        .shadow=${this.shadow}
+                      ></pricing-card-family>
+                    </bd-option>
+                  </bd-product>
+                </bd-context>
+
+                <!-- Family Card 2: TSI (highlighted) -->
+                <bd-context ignore-events-parent>
+                  <bd-product product-id="ts_i">
+                    <bd-option devices="5" subscription="1" data-layer-event="info">
+                      <pricing-card-family
+                        highlight
+                        features
+                        identity
+                        planType="family"
+                        productId="ts_i"
+                        .shadow=${this.shadow}
+                      ></pricing-card-family>
+                    </bd-option>
+                  </bd-product>
+                </bd-context>
+
+                <!-- Family Card 3: PSI -->
+                <bd-context ignore-events-parent>
+                  <bd-product product-id="ps_i">
+                    <bd-option devices="5" subscription="1" data-layer-event="info">
+                      <pricing-card-family
+                        title="Bitdefender Total Security"
+                        features
+                        privacy
+                        identity
+                        planType="family"
+                        productId="ps_i"
+                        .shadow=${this.shadow}
+                      ></pricing-card-family>
+                    </bd-option>
+                  </bd-product>
+                </bd-context>
+              `}
         </div>
       </div>
     `;
@@ -113,9 +151,6 @@ class PricingContainer extends LitElement {
 class PricingCard extends LitElement {
   static properties = {
     title           : { type: String },
-    price           : { type: String },
-    discount        : { type: String },
-    originalPrice   : { type: String },
     features        : { type: Boolean },
     privacy         : { type: Boolean },
     highlight       : { type: Boolean },
@@ -123,16 +158,15 @@ class PricingCard extends LitElement {
     identityExtended: { type: Boolean },
     parentalControl : { type: Boolean },
     planType        : { type: String },
+    productId       : { type: String, attribute: "product-id" },
     locale          : { type: String },
-    currency        : { type: String }
+    currency        : { type: String },
+    shadow          : { type: Boolean, reflect: true }
   };
 
   constructor() {
     super();
     this.title = "Bitdefender Premium Security";
-    this.price = "69.99";
-    this.discount = "Save 46%";
-    this.originalPrice = "$129.99";
     this.features = false;
     this.privacy = false;
     this.highlight = false;
@@ -140,78 +174,98 @@ class PricingCard extends LitElement {
     this.identityExtended = false;
     this.parentalControl = false;
     this.planType = "individual";
+    this.productId = "vsb";
     this.locale = "en-US";
     this.currency = "EUR";
+    this.shadow = true;
   }
 
-  formatCurrency(value) {
-    const numberValue = parseFloat(value.replace(/[^\d.-]/g, ""));
-
-    if (isNaN(numberValue)) return value;
-
-    return new Intl.NumberFormat(this.locale, {
-      style   : "currency",
-      currency: this.currency
-    }).format(numberValue);
+  createRenderRoot() {
+    return this; // Light DOM pentru BrightData
   }
+
   render() {
     return html`
+      <style>
+        ${tokens}
+        ${pricingCardsCSS}
+      </style>
+      
       <div class="card ${this.highlight ? "highlight" : ""}">
         ${this.highlight
           ? html`<div class="highlight-banner">Best value</div>`
           : ""}
         <div class="card-header">
           <bd-h as="h4" class="card-title">${this.title}</bd-h>
-          <span class="badge">
-            <img
-              src="/assets/badge-icon-individual.png"
-              alt="icon"
-              class="badge-icon"
-            />
+          
+          <bd-badge>
             Individual
-          </span>
+          </bd-badge>
+          
           <bd-p kind="small" class="badge-subtitle">1 account & 5 devices</bd-p>
           <hr class="hr-line" />
         </div>
+        
+        <!-- Pricing section with store integration -->
         <div class="pricing">
-          <div class="pricing-info">
+          <div class="pricing-info" data-store-hide="!it.option.price.discounted">
             <bd-p kind="small" class="original-price">
-              ${this.formatCurrency(this.originalPrice)}
+              <s data-store-render data-store-price="full"></s>
             </bd-p>
-            <bd-p kind="small" class="discount">${this.discount}</bd-p>
+            <bd-p kind="small" class="discount">
+  <bd-badge variant="bd-light-green">
+    Save <span data-store-render data-store-discount="percentage"></span>
+  </bd-badge>            </bd-p>
           </div>
-          <bd-h as="h3" class="price">${this.formatCurrency(this.price)}</bd-h>
+          <bd-h as="h3" class="price">
+            <span data-store-render data-store-price="discounted||full"></span>/year
+          </bd-h>
           <bd-p kind="small" class="terms">
             First year price. Plus applicable sales tax. See
             <a href="#">terms of use</a> below.
           </bd-p>
         </div>
+        
+        <!-- Actions with store integration -->
         <div class="actions">
-          <bd-button label="Buy Now" kind="danger" size="md" fullWidth strong>
+          <bd-button-link
+            label="Buy Now"
+            kind="danger"
+            size="md"
+            fullWidth
+            strong
+            buyLink
+          >
             Buy Now
-          </bd-button>
-  
-          <bd-button label="Learn More" kind="outline" size="md" fullWidth strong>
+          </bd-button-link>
+
+          <bd-button
+            label="Learn More"
+            kind="outline"
+            size="md"
+            fullWidth
+            strong
+          >
             Learn More
           </bd-button>
         </div>
+        
         <hr class="hr-line" />
-        ${this.features ? html`<pricing-card-features></pricing-card-features>` : ""}
-        ${this.privacy ? html`<pricing-card-privacy></pricing-card-privacy>` : ""}
-        ${this.identity ? html`<pricing-card-identity></pricing-card-identity>` : ""}
-        ${this.identityExtended ? html`<pricing-card-identity-extended></pricing-card-identity-extended>` : ""}
-        ${this.parentalControl ? html`<pricing-card-parental-control></pricing-card-parental-control>` : ""}
+        
+        <!-- Features sections -->
+        ${this.features ? html`<pricing-card-features .shadow=${this.shadow}></pricing-card-features>` : ""}
+        ${this.privacy ? html`<pricing-card-privacy .shadow=${this.shadow}></pricing-card-privacy>` : ""}
+        ${this.identity ? html`<pricing-card-identity .shadow=${this.shadow}></pricing-card-identity>` : ""}
+        ${this.identityExtended ? html`<pricing-card-identity-extended .shadow=${this.shadow}></pricing-card-identity-extended>` : ""}
+        ${this.parentalControl ? html`<pricing-card-parental-control .shadow=${this.shadow}></pricing-card-parental-control>` : ""}
       </div>
     `;
   }
-
 }
+
 class PricingCardFamily extends LitElement {
   static properties = {
     title           : { type: String },
-    price           : { type: String },
-    discount        : { type: String },
-    originalPrice   : { type: String },
     features        : { type: Boolean },
     privacy         : { type: Boolean },
     highlight       : { type: Boolean },
@@ -219,16 +273,15 @@ class PricingCardFamily extends LitElement {
     identityExtended: { type: Boolean },
     parentalControl : { type: Boolean },
     planType        : { type: String },
+    productId       : { type: String, attribute: "product-id" },
     locale          : { type: String },
-    currency        : { type: String }
+    currency        : { type: String },
+    shadow          : { type: Boolean, reflect: true }
   };
 
   constructor() {
     super();
     this.title = "Bitdefender Premium Security";
-    this.price = "$99.99";
-    this.discount = "Save 41%";
-    this.originalPrice = "$169.99";
     this.features = false;
     this.privacy = false;
     this.highlight = false;
@@ -236,102 +289,115 @@ class PricingCardFamily extends LitElement {
     this.identityExtended = false;
     this.parentalControl = false;
     this.planType = "family";
+    this.productId = "vsb";
     this.locale = "en-US";
     this.currency = "EUR";
+    this.shadow = true;
   }
 
-  formatCurrency(value) {
-    const numberValue = parseFloat(value.replace(/[^\d.-]/g, ""));
-
-    if (isNaN(numberValue)) return value;
-
-    return new Intl.NumberFormat(this.locale, {
-      style   : "currency",
-      currency: this.currency
-    }).format(numberValue);
+  createRenderRoot() {
+    return this; // Light DOM pentru BrightData
   }
+
   render() {
     return html`
-      ${this.planType === "family"
-        ? html`
-            <div class="card ${this.highlight ? "highlight" : ""}">
-              ${this.highlight
-                ? html`<div class="highlight-banner">Best value</div>`
-                : ""}
-              <div class="card-header">
-                <bd-h as="h4" class="card-title">${this.title}</bd-h>
-                <span class="badge">
-                  <img
-                    src="/assets/bd-icon-family-white.png"
-                    alt="icon"
-                    class="badge-icon-family-subtitle"
-                  />
-                  <span class="family-text"> Family</span></span
-                >
-                <bd-p kind="small" class="badge-subtitle">5 accounts & 25 devices</bd-p>
-                <hr class="hr-line" />
-              </div>
-              <div class="pricing">
-                <div class="pricing-info">
-                  <bd-p kind="small" class="original-price">
-                    ${this.formatCurrency(this.originalPrice)}
-                  </bd-p>
-                  <bd-p kind="small" class="discount">${this.discount}</bd-p>
-                </div>
-                <bd-h as="h3" class="price">${this.formatCurrency(this.price)}</bd-h>
-                <bd-p kind="small" class="terms">
-                  First year price. Plus applicable sales tax. See
-                  <a href="#">terms of use</a> below.
-                </bd-p>
-              </div>
-              <div class="actions">
-                <bd-button
-                  label="Buy Now"
-                  kind="danger"
-                  size="md"
-                  fullWidth
-                  strong
-                >Buy Now</bd-button>
-
-                <bd-button
-                  label="Learn More"
-                  kind="outline"
-                  size="md"
-                  fullWidth
-                  strong
-                >Learn More</bd-button>
-              </div>
-              <hr class="hr-line" />
-              ${this.features
-                ? html`<pricing-card-features></pricing-card-features>`
-                : ""}
-              ${this.privacy
-                ? html`<pricing-card-privacy></pricing-card-privacy>`
-                : ""}
-              ${this.identity
-                ? html`<pricing-card-identity></pricing-card-identity>`
-                : ""}
-              ${this.identityExtended
-                ? html`<pricing-card-identity-extended></pricing-card-identity-extended>`
-                : ""}
-              ${this.parentalControl
-                ? html`<pricing-card-parental-control></pricing-card-parental-control>`
-                : ""}
-            </div>
-          `
-        : ""}
+      <style>
+        ${tokens}
+        ${pricingCardsCSS}
+      </style>
+      
+      <div class="card ${this.highlight ? "highlight" : ""}">
+        ${this.highlight
+          ? html`<div class="highlight-banner">Best value</div>`
+          : ""}
+        <div class="card-header">
+          <bd-h as="h4" class="card-title">${this.title}</bd-h>
+          
+          <bd-badge>
+            Family
+          </bd-badge>
+          
+          <bd-p kind="small" class="badge-subtitle">5 accounts & 25 devices</bd-p>
+          <hr class="hr-line" />
+        </div>
+        
+        <!-- Pricing section with store integration -->
+        <div class="pricing">
+          <div class="pricing-info" data-store-hide="!it.option.price.discounted">
+            <bd-p kind="small" class="original-price">
+              <s data-store-render data-store-price="full"></s>
+            </bd-p>
+            <bd-p kind="small" class="discount">
+  <bd-badge variant="bd-light-green">
+    Save <span data-store-render data-store-discount="percentage"></span>
+  </bd-badge>            </bd-p>
+          </div>
+          <bd-h as="h3" class="price">
+            <span data-store-render data-store-price="discounted||full"></span>/year
+          </bd-h>
+          <bd-p kind="small" class="terms">
+            First year price. Plus applicable sales tax. See
+            <a href="#">terms of use</a> below.
+          </bd-p>
+        </div>
+        
+        <!-- Actions with store integration -->
+        <div class="actions">
+          <bd-button-link
+            label="Buy Now"
+            kind="danger"
+            size="md"
+            fullWidth
+            strong
+            buyLink
+          >
+            Buy Now
+          </bd-button-link>
+
+          <bd-button
+            label="Learn More"
+            kind="outline"
+            size="md"
+            fullWidth
+            strong
+          >
+            Learn More
+          </bd-button>
+        </div>
+        
+        <hr class="hr-line" />
+        
+        <!-- Features sections -->
+        ${this.features
+          ? html`<pricing-card-features .shadow=${this.shadow}></pricing-card-features>`
+          : ""}
+        ${this.privacy
+          ? html`<pricing-card-privacy .shadow=${this.shadow}></pricing-card-privacy>`
+          : ""}
+        ${this.identity
+          ? html`<pricing-card-identity .shadow=${this.shadow}></pricing-card-identity>`
+          : ""}
+        ${this.identityExtended
+          ? html`<pricing-card-identity-extended .shadow=${this.shadow}></pricing-card-identity-extended>`
+          : ""}
+        ${this.parentalControl
+          ? html`<pricing-card-parental-control .shadow=${this.shadow}></pricing-card-parental-control>`
+          : ""}
+      </div>
     `;
   }
 }
 
 class PricingSwitch extends LitElement {
   static properties = {
-    planType: { type: String }
+    planType: { type: String },
+    shadow  : { type: Boolean, reflect: true }
   };
 
   constructor() {
     super();
     this.planType = "individual";
+    this.shadow = true;
   }
 
   handleSwitch(event) {
@@ -350,6 +416,11 @@ class PricingSwitch extends LitElement {
 
   render() {
     return html`
+      <style>
+        ${tokens}
+        ${pricingCardsCSS}
+      </style>
+      
       <div class="switchBox">
         <label class="switch">
           <input
@@ -360,14 +431,11 @@ class PricingSwitch extends LitElement {
           />
           <span class="slider round"></span>
           <span class="label right">
-            <span class="icon icon-user-sharp-regular">
-            </span>
+            <span class="icon icon-user-sharp-regular"></span>
             Individual
           </span>
           <span class="label left">
-            <span class="icon icon-family-pants-sharp-regular">
-           
-            </span>
+            <span class="icon icon-family-pants-sharp-regular"></span>
             Family
           </span>
         </label>
@@ -378,7 +446,8 @@ class PricingSwitch extends LitElement {
 
 class PricingCardFeatures extends LitElement {
   static properties = {
-    features: { type: Array }
+    features: { type: Array },
+    shadow  : { type: Boolean, reflect: true }
   };
 
   constructor() {
@@ -412,21 +481,27 @@ class PricingCardFeatures extends LitElement {
           "Scam Copilot: Get protection against online scams with AI-powered anti-scam features."
       }
     ];
+    this.shadow = true;
   }
 
   render() {
     const features = this.features || [];
     return html`
+      <style>
+        ${tokens}
+        ${pricingCardsCSS}
+      </style>
+      
       <div class="features">
-        <bd-h as="h4">Device Security</bd-h>
+        <bd-h as="h4" class="text-left">Device Security</bd-h>
         <ul class="additional-info">
           ${features.map(
             (feature) => html` <li class="feature-item">
-              <img
-                src="/assets/verified_arrow.png"
-                alt="icon"
-                class="badge-icon"
-              />
+                <img
+                  src="/assets/verified_arrow.png"
+                  alt="icon"
+                  class="badge-icon"
+                />
               <bd-p kind="regular">${feature.name}</bd-p>
               ${feature.description
                 ? html`<div class="tooltip"><bd-p kind="small">${feature.description}</bd-p></div>`
@@ -441,7 +516,8 @@ class PricingCardFeatures extends LitElement {
 
 class PricingCardPrivacy extends LitElement {
   static properties = {
-    privacy: { type: Array }
+    privacy: { type: Array },
+    shadow : { type: Boolean, reflect: true }
   };
 
   constructor() {
@@ -470,30 +546,33 @@ class PricingCardPrivacy extends LitElement {
           "Blocks ads, hinders ad targeting, and prevents online behavior profiling."
       }
     ];
+    this.shadow = true;
   }
 
   render() {
     const privacy = this.privacy || [];
     return html`
+      <style>
+        ${tokens}
+        ${pricingCardsCSS}
+      </style>
+      
       <div class="features">
         <bd-h as="h4">Privacy</bd-h>
         <ul class="additional-info">
           ${privacy.map(
             (priv) => html` <li class="feature-item">
-              <img
-                src="/assets/verified_arrow.png"
-                alt="icon"
-                class="badge-icon"
-              />
+                <img
+                  src="/assets/verified_arrow.png"
+                  alt="icon"
+                  class="badge-icon"
+                />
               <bd-p kind="regular">${priv.name.replace(" 1x", "")}</bd-p>
               ${priv.badge
-                ? html`<span class="badge-feature"
-                    >${priv.badge}
-                    <img
-                      src="/assets/badge-icon-individual.png"
-                      alt="icon"
-                      class="badge-feature-icon"
-                  /></span>`
+                ? html`
+                    <bd-badge>
+                      ${priv.badge}
+                  `
                 : ""}
               ${priv.description
                 ? html`<div class="tooltip"><bd-p kind="small">${priv.description}</bd-p></div>`
@@ -508,7 +587,8 @@ class PricingCardPrivacy extends LitElement {
 
 class PricingCardIdentify extends LitElement {
   static properties = {
-    identity: { type: Array }
+    identity: { type: Array },
+    shadow  : { type: Boolean, reflect: true }
   };
 
   constructor() {
@@ -521,30 +601,34 @@ class PricingCardIdentify extends LitElement {
         badge: "1x"
       }
     ];
+    this.shadow = true;
   }
 
   render() {
     const identity = this.identity || [];
     return html`
+      <style>
+        ${tokens}
+        ${pricingCardsCSS}
+      </style>
+      
       <div class="features">
-        <bd-h as="h4">Identity Protection</bd-h>
+        <bd-h as="h4" class="text-left">Identity Protection</bd-h>
         <ul class="additional-info">
           ${identity.map(
             (ident) => html` <li class="feature-item">
-              <img
-                src="/assets/verified_arrow.png"
-                alt="icon"
-                class="badge-icon"
-              />
+                <img
+                  src="/assets/verified_arrow.png"
+                  alt="icon"
+                  class="badge-icon"
+                />
               <bd-p kind="regular">${ident.name}</bd-p>
               ${ident.badge
-                ? html`<span class="badge-feature"
-                    >${ident.badge}
-                    <img
-                      src="/assets/badge-icon-individual.png"
-                      alt="icon"
-                      class="badge-feature-icon"
-                  /></span>`
+                ? html`
+                    <bd-badge>
+                      ${ident.badge}
+                    </bd-badge>
+                  `
                 : ""}
               ${ident.description
                 ? html`<div class="tooltip"><bd-p kind="small">${ident.description}</bd-p></div>`
@@ -559,7 +643,8 @@ class PricingCardIdentify extends LitElement {
 
 class PricingCardIdentityExtend extends LitElement {
   static properties = {
-    identity: { type: Array }
+    identity: { type: Array },
+    shadow  : { type: Boolean, reflect: true }
   };
 
   constructor() {
@@ -592,30 +677,34 @@ class PricingCardIdentityExtend extends LitElement {
           "Stay one step ahead with our real-time breach notification feature. Instant alerts empower you to take immediate action, protecting your sensitive information and maintaining peace of mind effortlessly."
       }
     ];
+    this.shadow = true;
   }
 
   render() {
     const identity = this.identity || [];
     return html`
+      <style>
+        ${tokens}
+        ${pricingCardsCSS}
+      </style>
+      
       <div class="features">
-        <bd-h as="h4">Identity Protection</bd-h>
+        <bd-h as="h4" class="text-left">Identity Protection</bd-h>
         <ul class="additional-info">
           ${identity.map(
             (ident) => html` <li class="feature-item">
-              <img
-                src="/assets/verified_arrow.png"
-                alt="icon"
-                class="badge-icon"
-              />
+                <img
+                  src="/assets/verified_arrow.png"
+                  alt="icon"
+                  class="badge-icon"
+                />
               <bd-p kind="regular">${ident.name}</bd-p>
               ${ident.badge
-                ? html`<span class="badge-feature"
-                    >${ident.badge}
-                    <img
-                      src="/assets/badge-icon-individual.png"
-                      alt="icon"
-                      class="badge-feature-icon"
-                  /></span>`
+                ? html`
+                    <bd-badge>
+                      ${ident.badge}
+                    </bd-badge>
+                  `
                 : ""}
               ${ident.description
                 ? html`<div class="tooltip"><bd-p kind="small">${ident.description}</bd-p></div>`
@@ -630,7 +719,8 @@ class PricingCardIdentityExtend extends LitElement {
 
 class PricingCardParentalControl extends LitElement {
   static properties = {
-    parentalControl: { type: Array }
+    parentalControl: { type: Array },
+    shadow         : { type: Boolean, reflect: true }
   };
 
   constructor() {
@@ -666,30 +756,34 @@ class PricingCardParentalControl extends LitElement {
           "Unified reporting and easier management across all devices, providing you with a better overview of your child's online activities."
       }
     ];
+    this.shadow = true;
   }
 
   render() {
     const parentalControl = this.parentalControl || [];
     return html`
+      <style>
+        ${tokens}
+        ${pricingCardsCSS}
+      </style>
+      
       <div class="features">
-        <bd-h as="h4">Parental Control</bd-h>
+        <bd-h as="h4" class="text-left">Parental Control</bd-h>
         <ul class="additional-info">
           ${parentalControl.map(
             (parental) => html` <li class="feature-item">
-              <img
-                src="/assets/verified_arrow.png"
-                alt="icon"
-                class="badge-icon"
-              />
+                <img
+                  src="/assets/verified_arrow.png"
+                  alt="icon"
+                  class="badge-icon"
+                />
               <bd-p kind="regular">${parental.name}</bd-p>
               ${parental.badge
-                ? html`<span class="badge-feature"
-                    >${parental.badge}
-                    <img
-                      src="/assets/badge-icon-individual.png"
-                      alt="icon"
-                      class="badge-feature-icon"
-                  /></span>`
+                ? html`
+                    <bd-badge>
+                      ${parental.badge}
+                    </bd-badge>
+                  `
                 : ""}
               ${parental.description
                 ? html`<div class="tooltip"><bd-p kind="small">${parental.description}</bd-p></div>`
@@ -702,17 +796,7 @@ class PricingCardParentalControl extends LitElement {
   }
 }
 
-PricingCardIdentify.styles = [tokens, pricingCardsCSS];
-PricingCardIdentityExtend.styles = [tokens, pricingCardsCSS];
-PricingCardParentalControl.styles = [tokens, pricingCardsCSS];
-
-PricingCardPrivacy.styles = [tokens, pricingCardsCSS];
-PricingCardFeatures.styles = [tokens, pricingCardsCSS];
-PricingCard.styles = [tokens, pricingCardsCSS];
-PricingCardFamily.styles = [tokens, pricingCardsCSS];
-PricingContainer.styles = [tokens, pricingCardsCSS];
-PricingSwitch.styles = [tokens, pricingCardsCSS];
-
+// Define custom elements
 customElements.define("pricing-card-identity", PricingCardIdentify);
 customElements.define(
   "pricing-card-identity-extended",
@@ -722,7 +806,6 @@ customElements.define(
   "pricing-card-parental-control",
   PricingCardParentalControl
 );
-
 customElements.define("pricing-card-privacy", PricingCardPrivacy);
 customElements.define("pricing-card-features", PricingCardFeatures);
 customElements.define("pricing-card", PricingCard);