https://mockuuups.studio/js/pricing-page.js

1(function (session, frontendData) {
2  const cycles = ["monthly", "annually"];
3  const plans = ["premium", "team"];
4  const isImmediateSubscription = true;
5  const paddle = frontendData.pricing.paddle;
6  const pricing = frontendData.pricing.options[0].paddle;
7  const coupon = paddle?.coupon;
8  window.addEventListener(
9    "click",
10    function (e) {
11      if (e.target.hasAttribute("data-paddle")) {
12        e.preventDefault();
13        const action = e.target.getAttribute("data-paddle").split("-");
14        const plan = action[0];
15        const cycle = action[1];
16        const quantity = plan === "team" ? 0 : 1;
17        const checkoutUrl = new URL(window.location.href);
18        checkoutUrl.pathname = "/manage/subscription/";
19        checkoutUrl.searchParams.set("cycle", cycle);
20        if (plan === "team") {
21          checkoutUrl.searchParams.set("team", 1);
22          checkoutUrl.searchParams.set("seats", quantity);
23        }
24        if (coupon) {
25          checkoutUrl.searchParams.set("coupon", coupon);
26        }
27        window.location = checkoutUrl;
28      }
29    },
30    false,
31  );
32  if (isImmediateSubscription) {
33    const buttons = document.querySelectorAll("input[data-paddle]");
34    for (let button of buttons) {
35      button.value = "Start Subscription";
36    }
37    const headerHighlight = document.getElementById("header-highlight");
38    if (headerHighlight) {
39      headerHighlight.innerText = "without limits.";
40    }
41  }
42  let bestLocale = navigator.language;
43  try {
44    bestLocale = new Intl.Locale("und", { region: paddle.country }).maximize().language;
45  } catch (e) {}
46  const insertPrice = function (el, currency, amount) {
47    el.classList.remove("loading");
48    try {
49      const isWhole = amount % 1 === 0;
50      el.innerText = new Intl.NumberFormat(bestLocale, {
51        style: "currency",
52        currency: currency,

53        minimumFractionDigits: isWhole ? 0 : 2,
54        maximumFractionDigits: isWhole ? 0 : 2,
55      }).format(amount);
56    } catch (error) {
57      console.log(error);
58      el.innerText = currency + " " + amount.toFixed(2).replace(".00", "");
59    }
60  };
61
62  let lastCurrency;
63  const cycleLenghts = {
64    annually: 12,
65    quarterly: 3,
66    monthly: 1,
67  };
68  plans.forEach(function (plan) {
69    cycles.forEach(function (cycle) {
70      const tag = document.querySelector('[data-price="' + plan + "-" + cycle + '"]');
71      const id = pricing[plan][cycle];
72      const price = paddle.products[id];
73      const displayPrice = price && Math.round(price / cycleLenghts[cycle]);
74      const currency = paddle.currency;
75      if (!tag || typeof displayPrice !== "number" || !currency) {
76        return;
77      }
78      lastCurrency = currency;
79      insertPrice(tag, currency, displayPrice);
80      const totalTag = document.querySelector('[data-price-total="' + plan + "-" + cycle + '"]');
81      if (totalTag) {
82        insertPrice(totalTag, currency, price);
83      }
84    });
85  });
86  const frees = document.querySelectorAll("[data-free-price]");
87  for (let free of frees) {
88    insertPrice(free, lastCurrency, 0);
89  }
90  function getFlagEmoji(countryCode) {
91    const codePoints = countryCode
92      .toUpperCase()
93      .split("")
94      .map((char) => 127397 + char.charCodeAt());
95    return String.fromCodePoint(...codePoints);
96  }
97  if (coupon) {
98    const isPPP = coupon.startsWith("PPP");
99
100    const infoElements = document.querySelectorAll("p.billed-info");
101
102    for (const infoElement of infoElements) {
103      const message = document.createElement("div");
104      message.classList.add("ppp-message");
105      let text = "";
106      let icon = "";
107      const flagEmoji = getFlagEmoji(coupon.substring(3, 5));
108      if (isPPP) {
109        icon = `<span style="font-size: 20px;">${flagEmoji}</span>`;
110        text = `<strong class="highlighted">Regional discount applied!</strong> `;
111        if (paddle.couponAmount > 0) {
112          text += `You're saving <strong class="highlighted">${paddle.couponAmount}%</strong> on all plans.`;
113        } else {
114          text += "All plans are cheaper in your country.";
115        }
116      } else {
117        const amount = paddle.couponAmount > 0 ? paddle.couponAmount + "%" : "your";
118        text = `Coupon <strong class="highlighted">${coupon}</strong> applied! Enjoy ${amount} discount!`;
119        icon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f">
120                        <path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"></path>
121                    </svg>`;
122      }
123      message.innerHTML = `<div>${icon}</div><div class="ppp-message-text"><div>${text}</div></div>`;
124      infoElement.parentNode.insertBefore(message, infoElement.nextSibling);
125    }
126  }
127})(window.mockuuupsSession, window.mockuuupsFrontendData);