@repobit/dex-system-design 0.2.0

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

@@ -0,0 +1,764 @@
+import { LitElement, html, css } from "lit";
+import pricingCardsCSS from "../pricing-cards/pricing-card.css.js";
+
+import "/src/components/button/button.js";
+
+class PricingContainer extends LitElement {
+  static properties = {
+    planType: { type: String },
+    locale: { type: String },
+    currency: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.planType = "individual";
+    this.locale = "en-US";
+    this.currency = "EUR";
+  }
+
+  handleSwitch(event) {
+    console.log("Plan switched to:", event.detail.planType);
+    this.planType = event.detail.planType;
+  }
+
+  formatCurrency(value) {
+    const numericValue =
+      typeof value === "number"
+        ? value
+        : parseFloat(value.replace(/[^\d.-]/g, ""));
+
+    if (isNaN(numericValue)) return "";
+
+    // Foloseste Intl fara separator de mii
+    const formattedValue = new Intl.NumberFormat(this.locale, {
+      style: "currency",
+      currency: this.currency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(numericValue);
+
+    return formattedValue;
+  }
+
+  render() {
+    return html`
+      <div class="pricing-container">
+        <pricing-switch
+          .planType=${this.planType}
+          @plan-switch=${this.handleSwitch}
+        ></pricing-switch>
+
+        <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>
+              `
+            : 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>`}
+        </div>
+      </div>
+    `;
+  }
+}
+
+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 },
+    identity: { type: Boolean },
+    identityExtended: { type: Boolean },
+    parentalControl: { type: Boolean },
+    planType: { type: String },
+    locale: { type: String },
+    currency: { type: String },
+  };
+
+  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;
+    this.identity = false;
+    this.identityExtended = false;
+    this.parentalControl = false;
+    this.planType = "individual";
+    this.locale = "en-US";
+    this.currency = "EUR";
+  }
+
+  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);
+  }
+  render() {
+    return html`
+      ${this.planType === "individual"
+        ? html`
+            <div class="card ${this.highlight ? "highlight" : ""}">
+              ${this.highlight
+                ? html`<div class="highlight-banner">Best value</div>`
+                : ""}
+              <div class="card-header">
+                <p class="card-title">${this.title}</p>
+                <span class="badge">
+                  <img
+                    src="src/assets/icons/badge-icon-individual.png"
+                    alt="icon"
+                    class="badge-icon"
+                  />
+                  Individual</span
+                >
+                <p class="badge-subtitle">1 account & 5 devices</p>
+                <hr class="hr-line" />
+              </div>
+              <div class="pricing">
+                <div class="pricing-info">
+                  <p class="original-price">
+                    ${this.formatCurrency(this.originalPrice)}
+                  </p>
+                  <p class="discount">${this.discount}</p>
+                </div>
+                <p class="price">${this.formatCurrency(this.price)}</p>
+                <p class="terms">
+                  First year price. Plus applicable sales tax. See
+                  <a href="#">terms of use</a> below.
+                </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>
+          `
+        : ""}
+    `;
+  }
+}
+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 },
+    identity: { type: Boolean },
+    identityExtended: { type: Boolean },
+    parentalControl: { type: Boolean },
+    planType: { type: String },
+    locale: { type: String },
+    currency: { type: String },
+  };
+
+  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;
+    this.identity = false;
+    this.identityExtended = false;
+    this.parentalControl = false;
+    this.planType = "family";
+    this.locale = "en-US";
+    this.currency = "EUR";
+  }
+
+  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);
+  }
+  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">
+                <p class="card-title">${this.title}</p>
+                <span class="badge">
+                  <img
+                    src="src/assets/icons/bd-icon-family-white.png"
+                    alt="icon"
+                    class="badge-icon-family-subtitle"
+                  />
+                  <span class="family-text"> Family</span></span
+                >
+                <p class="badge-subtitle">5 accounts & 25 devices</p>
+                <hr class="hr-line" />
+              </div>
+              <div class="pricing">
+                <div class="pricing-info">
+                  <p class="original-price">
+                    ${this.formatCurrency(this.originalPrice)}
+                  </p>
+                  <p class="discount">${this.discount}</p>
+                </div>
+                <p class="price">${this.formatCurrency(this.price)}</p>
+                <p class="terms">
+                  First year price. Plus applicable sales tax. See
+                  <a href="#">terms of use</a> below.
+                </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>
+          `
+        : ""}
+    `;
+  }
+}
+
+class PricingSwitch extends LitElement {
+  static properties = {
+    planType: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.planType = "individual";
+  }
+
+  handleSwitch(event) {
+    const newPlanType = event.target.checked ? "family" : "individual";
+    console.log("Switch to:", newPlanType);
+    this.planType = newPlanType;
+
+    this.dispatchEvent(
+      new CustomEvent("plan-switch", {
+        detail: { planType: this.planType },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    return html`
+      <div class="switchBox">
+        <label class="switch">
+          <input
+            type="checkbox"
+            id="switchCheckbox"
+            @input=${this.handleSwitch}
+            ?checked=${this.planType === "family"}
+          />
+          <span class="slider round"></span>
+          <span class="label right">
+            <span class="icon icon-user-sharp-regular">
+              <img
+                src="src/assets/icons/bd-icon-user.png"
+                alt="icon"
+                class="badge-icon-user"
+                height="22"
+                width="22"
+              />
+            </span>
+            Individual
+          </span>
+          <span class="label left">
+            <span class="icon icon-family-pants-sharp-regular">
+              <img
+                src="src/assets/icons/bd-icon-family.png"
+                alt="icon"
+                class="badge-icon-family"
+                height="24"
+                width="24"
+              />
+            </span>
+            Family
+          </span>
+        </label>
+      </div>
+    `;
+  }
+}
+
+class PricingCardFeatures extends LitElement {
+  static properties = {
+    features: { type: Array },
+  };
+
+  constructor() {
+    super();
+    this.features = [
+      {
+        name: "Multiplatform Windows®, macOS®, Android™, iOS®",
+      },
+      {
+        name: "Multi-Awarded Antivirus, Malware, Ransomware Protection",
+        description: "Consistent results in independent tests for 10+ years",
+      },
+      {
+        name: "Scam Prevention & Detection",
+        description:
+          "Outsmart scammers and keep your money, your credentials, identity, and digital assets",
+      },
+      {
+        name: "Cryptomining Protection",
+        description:
+          "Bad actors can make money using your hardware and power connection without your consent. Protect yourself against “leech” software!",
+      },
+      {
+        name: "Innovative Email Protection",
+        description:
+          "Scans all incoming email and marks them as “safe” or “unsafe”",
+      },
+      {
+        name: "Scam Copilot",
+        description:
+          "Scam Copilot: Get protection against online scams with AI-powered anti-scam features.",
+      },
+    ];
+  }
+
+  render() {
+    const features = this.features || [];
+    return html`
+      <div class="features">
+        <h4>Device Security</h4>
+        <ul class="additional-info">
+          ${features.map(
+            (feature) => html` <li class="feature-item">
+              <img
+                src="src/assets/icons/verified_arrow.png"
+                alt="icon"
+                class="badge-icon"
+              />
+              ${feature.name}
+              ${feature.description
+                ? html`<div class="tooltip">${feature.description}</div>`
+                : ""}
+            </li>`
+          )}
+        </ul>
+      </div>
+    `;
+  }
+}
+
+class PricingCardPrivacy extends LitElement {
+  static properties = {
+    privacy: { type: Array },
+  };
+
+  constructor() {
+    super();
+    this.privacy = [
+      {
+        name: "Password Manager 1x",
+        description:
+          "Ultra-secure, feature-rich password manager. The last password you will ever need for hundreds of online accounts",
+        badge: "1x",
+      },
+      {
+        name: "Unlimited VPN traffic 1x",
+        description:
+          "Keep your internet connections private & secure with VPN. Enjoy total anonymity on public & shared WI-FIs",
+        badge: "1x",
+      },
+      {
+        name: "Choose from 4000+ VPN servers in 50+ countries",
+        description:
+          "Our entire fleet of servers uses the latest available hardware, high-speed 10Gbps connections, and dedicated DNS servers.",
+      },
+      {
+        name: "System-wide Ad blocker & Anti-tracker",
+        description:
+          "Blocks ads, hinders ad targeting, and prevents online behavior profiling.",
+      },
+    ];
+  }
+
+  render() {
+    const privacy = this.privacy || [];
+    return html`
+      <div class="features">
+        <h4>Privacy</h4>
+        <ul class="additional-info">
+          ${privacy.map(
+            (priv) => html` <li class="feature-item">
+              <img
+                src="src/assets/icons/verified_arrow.png"
+                alt="icon"
+                class="badge-icon"
+              />
+              ${priv.name.replace(" 1x", "")}
+              ${priv.badge
+                ? html`<span class="badge-feature"
+                    >${priv.badge}
+                    <img
+                      src="src/assets/icons/badge-icon-individual.png"
+                      alt="icon"
+                      class="badge-feature-icon"
+                  /></span>`
+                : ""}
+              ${priv.description
+                ? html`<div class="tooltip">${priv.description}</div>`
+                : ""}
+            </li>`
+          )}
+        </ul>
+      </div>
+    `;
+  }
+}
+
+class PricingCardIdentify extends LitElement {
+  static properties = {
+    identity: { type: Array },
+  };
+
+  constructor() {
+    super();
+    this.identity = [
+      {
+        name: "Data Breach Detection",
+        description:
+          "Ultra-secure, feature-rich password manager. The last password you will ever need for hundreds of online accounts",
+        badge: "1x",
+      },
+    ];
+  }
+
+  render() {
+    const identity = this.identity || [];
+    return html`
+      <div class="features">
+        <h4>Identity Protection</h4>
+        <ul class="additional-info">
+          ${identity.map(
+            (ident) => html` <li class="feature-item">
+              <img
+                src="src/assets/icons/verified_arrow.png"
+                alt="icon"
+                class="badge-icon"
+              />
+              ${ident.name}
+              ${ident.badge
+                ? html`<span class="badge-feature"
+                    >${ident.badge}
+                    <img
+                      src="src/assets/icons/badge-icon-individual.png"
+                      alt="icon"
+                      class="badge-feature-icon"
+                  /></span>`
+                : ""}
+              ${ident.description
+                ? html`<div class="tooltip">${ident.description}</div>`
+                : ""}
+            </li>`
+          )}
+        </ul>
+      </div>
+    `;
+  }
+}
+
+class PricingCardIdentityExtend extends LitElement {
+  static properties = {
+    identity: { type: Array },
+  };
+
+  constructor() {
+    super();
+    this.identity = [
+      {
+        name: "Digital Identity Protection",
+        description:
+          "Don't get caught off guard by future data leaks. Every time your personal information ends up in a breach, Bitdefender Digital Identity Protection notifies you so you can act quickly and minimize the impact.",
+        badge: "1x",
+      },
+      {
+        name: "Data Breach Detection",
+        description:
+          "Access a comprehensive list detailing organizations that exposed your personal information and get actionable tips to address each breach and fortify your online security.",
+      },
+      {
+        name: "Dark Web Monitoring",
+        description:
+          "We constantly scan the web (including dark web) for unauthorized leaks of personal data and give real-time alerts so you can act quickly by changing passwords, deleting accounts, or freezing credit cards before a serious incident occurs.",
+      },
+      {
+        name: "Digital Footprint Visualization",
+        description:
+          "Identify precisely which websites or services have compromised your sensitive information, and see how you can undo the damage.",
+      },
+      {
+        name: "Real Time Breach Notifications",
+        description:
+          "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.",
+      },
+    ];
+  }
+
+  render() {
+    const identity = this.identity || [];
+    return html`
+      <div class="features">
+        <h4>Identity Protection</h4>
+        <ul class="additional-info">
+          ${identity.map(
+            (ident) => html` <li class="feature-item">
+              <img
+                src="src/assets/icons/verified_arrow.png"
+                alt="icon"
+                class="badge-icon"
+              />
+              ${ident.name}
+              ${ident.badge
+                ? html`<span class="badge-feature"
+                    >${ident.badge}
+                    <img
+                      src="src/assets/icons/badge-icon-individual.png"
+                      alt="icon"
+                      class="badge-feature-icon"
+                  /></span>`
+                : ""}
+              ${ident.description
+                ? html`<div class="tooltip">${ident.description}</div>`
+                : ""}
+            </li>`
+          )}
+        </ul>
+      </div>
+    `;
+  }
+}
+
+class PricingCardParentalControl extends LitElement {
+  static properties = {
+    parentalControl: { type: Array },
+  };
+
+  constructor() {
+    super();
+    this.parentalControl = [
+      {
+        name: "Internet time limit",
+        description:
+          "Set healthy limits on the time your child can spend online on a certain device.",
+      },
+      {
+        name: "Content filtering",
+        description:
+          "Select the content categories you want to keep away from your child.",
+      },
+      {
+        name: "Routines/Schedules",
+        description:
+          "Manage your child's internet time with customizable daily limits, structured routines like Focus time, Family time and Bedtime",
+      },
+      {
+        name: "Location",
+        description: "Track child location.",
+      },
+      {
+        name: "Rewards",
+        description:
+          "Interact with children by responding to their requests for extending daily internet time.",
+      },
+      {
+        name: "Activity reports",
+        description:
+          "Unified reporting and easier management across all devices, providing you with a better overview of your child’s online activities.",
+      },
+    ];
+  }
+
+  render() {
+    const parentalControl = this.parentalControl || [];
+    return html`
+      <div class="features">
+        <h4>Parental Control</h4>
+        <ul class="additional-info">
+          ${parentalControl.map(
+            (parental) => html` <li class="feature-item">
+              <img
+                src="src/assets/icons/verified_arrow.png"
+                alt="icon"
+                class="badge-icon"
+              />
+              ${parental.name}
+              ${parental.badge
+                ? html`<span class="badge-feature"
+                    >${parental.badge}
+                    <img
+                      src="src/assets/icons/badge-icon-individual.png"
+                      alt="icon"
+                      class="badge-feature-icon"
+                  /></span>`
+                : ""}
+              ${parental.description
+                ? html`<div class="tooltip">${parental.description}</div>`
+                : ""}
+            </li>`
+          )}
+        </ul>
+      </div>
+    `;
+  }
+}
+
+PricingCardIdentify.styles = [pricingCardsCSS];
+PricingCardIdentityExtend.styles = [pricingCardsCSS];
+PricingCardParentalControl.styles = [pricingCardsCSS];
+
+PricingCardPrivacy.styles = [pricingCardsCSS];
+PricingCardFeatures.styles = [pricingCardsCSS];
+PricingCard.styles = [pricingCardsCSS];
+PricingCardFamily.styles = [pricingCardsCSS];
+PricingContainer.styles = [pricingCardsCSS];
+PricingSwitch.styles = [pricingCardsCSS];
+
+customElements.define("pricing-card-identity", PricingCardIdentify);
+customElements.define(
+  "pricing-card-identity-extended",
+  PricingCardIdentityExtend
+);
+customElements.define(
+  "pricing-card-parental-control",
+  PricingCardParentalControl
+);
+
+customElements.define("pricing-card-privacy", PricingCardPrivacy);
+customElements.define("pricing-card-features", PricingCardFeatures);
+customElements.define("pricing-card", PricingCard);
+customElements.define("pricing-card-family", PricingCardFamily);
+customElements.define("bd-pricing-container", PricingContainer);
+customElements.define("pricing-switch", PricingSwitch);