update
This commit is contained in:
Your Name
+401
-228
@@ -1,269 +1,442 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<title>Check and Upgrade Your Plan</title>
|
<title>Your Plan</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: "Inter", "Segoe UI", Arial, sans-serif;
|
font-family: "Inter", "Segoe UI", Arial, sans-serif;
|
||||||
background-color: #f4f5f7;
|
background-color: #f4f5f7;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 40px;
|
padding: 32px 16px;
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-container {
|
.page-title {
|
||||||
background: #fff;
|
text-align: center;
|
||||||
border-radius: 12px;
|
color: #262626;
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
|
font-size: 1.45em;
|
||||||
padding: 40px;
|
font-weight: 700;
|
||||||
max-width: 720px;
|
margin-bottom: 6px;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
.page-subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #262626;
|
font-size: 0.82em;
|
||||||
margin-bottom: 4px;
|
color: #999;
|
||||||
font-weight: 600;
|
margin-bottom: 32px;
|
||||||
}
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
/* New small centered contract name */
|
.plans-row {
|
||||||
.contract-name {
|
display: flex;
|
||||||
text-align: center;
|
flex-wrap: wrap;
|
||||||
font-size: 0.85em;
|
gap: 18px;
|
||||||
color: #666;
|
justify-content: center;
|
||||||
margin-bottom: 25px;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.plan-card {
|
||||||
text-align: center;
|
background: #fff;
|
||||||
font-size: 0.9em;
|
border: 1px solid #e0e0e0;
|
||||||
color: #777;
|
border-radius: 14px;
|
||||||
margin-bottom: 30px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
line-height: 1.5;
|
padding: 26px 22px 20px;
|
||||||
}
|
width: 200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
transition:
|
||||||
|
box-shadow 0.2s,
|
||||||
|
border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
.grid {
|
.plan-card:hover {
|
||||||
display: grid;
|
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.11);
|
||||||
grid-template-columns: 1fr 1fr;
|
}
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item {
|
.plan-card.current {
|
||||||
background: #fafafa;
|
border-color: #875a7b;
|
||||||
border: 1px solid #e2e2e2;
|
box-shadow:
|
||||||
border-radius: 8px;
|
0 0 0 3px rgba(135, 90, 123, 0.18),
|
||||||
padding: 15px 20px;
|
0 4px 16px rgba(135, 90, 123, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-item.full {
|
.plan-name {
|
||||||
grid-column: 1 / -1;
|
font-size: 1.05em;
|
||||||
}
|
font-weight: 700;
|
||||||
|
color: #262626;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.plan-price {
|
||||||
font-weight: 600;
|
font-size: 1.55em;
|
||||||
font-size: 0.9em;
|
font-weight: 800;
|
||||||
color: #555;
|
color: #875a7b;
|
||||||
margin-bottom: 6px;
|
line-height: 1.1;
|
||||||
}
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.value {
|
.plan-price-period {
|
||||||
font-size: 1.1em;
|
font-size: 0.75em;
|
||||||
color: #222;
|
color: #aaa;
|
||||||
}
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
.plan-tagline {
|
||||||
text-align: center;
|
font-size: 0.8em;
|
||||||
font-size: 0.9em;
|
color: #666;
|
||||||
color: #888;
|
font-style: italic;
|
||||||
margin-top: 30px;
|
margin-bottom: 16px;
|
||||||
}
|
line-height: 1.5;
|
||||||
|
min-height: 52px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* Button styling */
|
.plan-btn {
|
||||||
.actions {
|
background-color: #875a7b;
|
||||||
display: flex;
|
color: #fff;
|
||||||
flex-direction: column;
|
border: none;
|
||||||
align-items: center;
|
border-radius: 7px;
|
||||||
margin-top: 40px;
|
padding: 9px 0;
|
||||||
gap: 15px;
|
font-size: 0.88em;
|
||||||
}
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
transition:
|
||||||
|
background-color 0.2s,
|
||||||
|
transform 0.1s;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
.action-row {
|
.plan-btn:hover:not(:disabled) {
|
||||||
display: flex;
|
background-color: #744e6a;
|
||||||
justify-content: center;
|
transform: translateY(-1px);
|
||||||
gap: 20px;
|
}
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
.plan-btn:disabled {
|
||||||
background-color: #875A7B; /* Odoo purple */
|
background-color: #bdbdbd;
|
||||||
color: white;
|
color: #fff;
|
||||||
border: none;
|
cursor: not-allowed;
|
||||||
border-radius: 8px;
|
transform: none;
|
||||||
padding: 10px 22px;
|
}
|
||||||
font-size: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
|
||||||
min-width: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
.plan-btn.is-current-plan:disabled {
|
||||||
background-color: #744e6a;
|
background-color: #6d9f71;
|
||||||
transform: translateY(-1px);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.secondary {
|
.plan-features {
|
||||||
background-color: #6c757d;
|
list-style: none;
|
||||||
}
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.action-btn.secondary:hover {
|
.plan-features li {
|
||||||
background-color: #5a636a;
|
font-size: 0.78em;
|
||||||
}
|
color: #555;
|
||||||
|
padding: 5px 0 5px 18px;
|
||||||
|
border-top: 1px solid #f2f2f2;
|
||||||
|
position: relative;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
.action-btn:disabled {
|
.plan-features li:first-child {
|
||||||
background-color: #ccc;
|
border-top: none;
|
||||||
cursor: not-allowed;
|
}
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="summary-container">
|
|
||||||
<h2>Check and Upgrade Your Plan</h2>
|
|
||||||
<div class="contract-name" id="contractName">Loading...</div>
|
|
||||||
<div class="subtitle">
|
|
||||||
Choose an upgrade. With this upgade you only pay for the <b>remaining days</b> of your current contract. Due to technical reasons, the <b>total price</b> will be included in the payment link sent to your email. If you don’t want to upgrade, simply don’t complete the payment. Current yearly prices are listed on our homepage, and new features will apply when you extend your contract next time.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid">
|
.plan-features li::before {
|
||||||
<div class="grid-item">
|
content: "–";
|
||||||
<div class="label">GIT</div>
|
position: absolute;
|
||||||
<div class="value" id="gitValue">Loading...</div>
|
left: 0;
|
||||||
</div>
|
color: #875a7b;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
<div class="grid-item">
|
.plan-guarantee {
|
||||||
<div class="label">Domains</div>
|
font-size: 0.68em;
|
||||||
<div class="value" id="domainsValue">Loading...</div>
|
color: #bbb;
|
||||||
</div>
|
margin-top: 14px;
|
||||||
|
font-style: italic;
|
||||||
|
min-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
<div class="grid-item">
|
.footer-uuid {
|
||||||
<div class="label">Backup Slots</div>
|
text-align: center;
|
||||||
<div class="value" id="backupValue">Loading...</div>
|
font-size: 0.75em;
|
||||||
</div>
|
color: #ccc;
|
||||||
|
margin-top: 40px;
|
||||||
|
user-select: all;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-title">Your Plan, Your Timing: Upgrade Anytime</div>
|
||||||
|
<div class="page-subtitle">Instant setup · satisfied or reimbursed</div>
|
||||||
|
|
||||||
<div class="grid-item">
|
<div class="plans-row" id="plansRow">
|
||||||
<div class="label">Workers</div>
|
<!-- ── Trial ─────────────────────────────────────────────────── -->
|
||||||
<div class="value" id="workersValue">Loading...</div>
|
<div class="plan-card" id="card-trial">
|
||||||
</div>
|
<div class="plan-name">Trial</div>
|
||||||
|
<div class="plan-price">4 weeks free</div>
|
||||||
|
<div class="plan-price-period"> </div>
|
||||||
|
<div class="plan-tagline">
|
||||||
|
"I want to see what ODOO can do for my company."
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="plan-btn is-current-plan"
|
||||||
|
id="btn-trial"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
Your Plan
|
||||||
|
</button>
|
||||||
|
<ul class="plan-features">
|
||||||
|
<li>ODOO CE hosting</li>
|
||||||
|
<li>0 Backup Slots</li>
|
||||||
|
<li>No Domain Mapping</li>
|
||||||
|
<li>No module installation</li>
|
||||||
|
</ul>
|
||||||
|
<div class="plan-guarantee"> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grid-item full">
|
<!-- ── Side Hustle ───────────────────────────────────────────── -->
|
||||||
<div class="label">HDD (MB)</div>
|
<div class="plan-card" id="card-sidehustle">
|
||||||
<div class="value" id="hddValue">Loading...</div>
|
<div class="plan-name">Side Hustle</div>
|
||||||
</div>
|
<div class="plan-price">$214.00</div>
|
||||||
|
<div class="plan-price-period">/ year</div>
|
||||||
|
<div class="plan-tagline">
|
||||||
|
"ODOO Standard .. that is all my business needs"
|
||||||
|
</div>
|
||||||
|
<button class="plan-btn" id="btn-sidehustle">Buy Now</button>
|
||||||
|
<ul class="plan-features">
|
||||||
|
<li>ODOO CE hosting</li>
|
||||||
|
<li>1 Backup Slot</li>
|
||||||
|
<li>1 Domain Mapping, SSL Cert</li>
|
||||||
|
<li>No module installation</li>
|
||||||
|
</ul>
|
||||||
|
<div class="plan-guarantee">
|
||||||
|
Instant setup, satisfied or reimbursed.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grid-item full">
|
<!-- ── On the Rise ───────────────────────────────────────────── -->
|
||||||
<div class="label">Expires</div>
|
<div class="plan-card" id="card-ontherise">
|
||||||
<div class="value" id="expiresValue">Loading...</div>
|
<div class="plan-name">On the Rise</div>
|
||||||
</div>
|
<div class="plan-price">$395.00</div>
|
||||||
</div>
|
<div class="plan-price-period">/ year</div>
|
||||||
|
<div class="plan-tagline">
|
||||||
|
"I need some modules and professional reports"
|
||||||
|
</div>
|
||||||
|
<button class="plan-btn" id="btn-ontherise">Buy Now</button>
|
||||||
|
<ul class="plan-features">
|
||||||
|
<li>ODOO CE hosting</li>
|
||||||
|
<li>4 Backup Slots</li>
|
||||||
|
<li>3 Domain Mappings, SSL Cert</li>
|
||||||
|
<li>Module installation via git</li>
|
||||||
|
</ul>
|
||||||
|
<div class="plan-guarantee">
|
||||||
|
Instant setup, satisfied or reimbursed.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Buttons -->
|
<!-- ── Powerhouse ────────────────────────────────────────────── -->
|
||||||
<div class="actions">
|
<div class="plan-card" id="card-powerhouse">
|
||||||
<div class="action-row">
|
<div class="plan-name">Powerhouse</div>
|
||||||
<button class="action-btn" id="upgradeRiseBtn">Upgrade to "On the Rise"</button>
|
<div class="plan-price">$595.00</div>
|
||||||
<button class="action-btn" id="upgradePowerhouseBtn">Upgrade to "Powerhouse"</button>
|
<div class="plan-price-period">/ year</div>
|
||||||
</div>
|
<div class="plan-tagline">
|
||||||
<div class="action-row">
|
"ODOO Enterprise is a must have!"
|
||||||
<button class="action-btn secondary" id="addDomainBtn">Add a Domain</button>
|
</div>
|
||||||
<button class="action-btn secondary" id="addBackupsBtn">Add 5 Backup Slots</button>
|
<button class="plan-btn" id="btn-powerhouse">Buy Now</button>
|
||||||
</div>
|
<ul class="plan-features">
|
||||||
</div>
|
<li>All of On the Rise</li>
|
||||||
|
<li>ODOO Enterprise Ready</li>
|
||||||
|
<li>2 Workers</li>
|
||||||
|
</ul>
|
||||||
|
<div class="plan-guarantee">
|
||||||
|
Instant setup, satisfied or reimbursed.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="footer" id="uuidDisplay">
|
<!-- ── Empire ────────────────────────────────────────────────── -->
|
||||||
UUID: <span id="uuidText">Loading...</span>
|
<div class="plan-card" id="card-empire">
|
||||||
</div>
|
<div class="plan-name">Empire</div>
|
||||||
</div>
|
<div class="plan-price">>$950.00</div>
|
||||||
|
<div class="plan-price-period">/ year</div>
|
||||||
|
<div class="plan-tagline">"My house! My Horse! My Server!"</div>
|
||||||
|
<button class="plan-btn" id="btn-empire">Contact Us</button>
|
||||||
|
<ul class="plan-features">
|
||||||
|
<li>Our service on your server</li>
|
||||||
|
<li>All modules & features</li>
|
||||||
|
<li>Unlimited customization</li>
|
||||||
|
</ul>
|
||||||
|
<div class="plan-guarantee">
|
||||||
|
Instant setup, satisfied or reimbursed.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<div class="footer-uuid">UUID: <span id="uuidText">–</span></div>
|
||||||
const webhookUrl = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/0c8536be-d175-4740-8e78-123159193b23";
|
|
||||||
const webhook_buy = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/2366cc41-bfd9-41c0-b9b4-bea1e60726f1";
|
|
||||||
|
|
||||||
const params = new URLSearchParams(window.location.search);
|
<script>
|
||||||
const uuid = params.get("uuid");
|
// ── Webhooks ─────────────────────────────────────────────────────────────
|
||||||
|
const getContract_Webhook =
|
||||||
|
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/0c8536be-d175-4740-8e78-123159193b23";
|
||||||
|
const buy_webhook =
|
||||||
|
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/2366cc41-bfd9-41c0-b9b4-bea1e60726f1";
|
||||||
|
|
||||||
async function loadData() {
|
// ── Plan hierarchy (index = tier, lower = cheaper) ────────────────────────
|
||||||
if (!uuid) {
|
const PLAN_ORDER = [
|
||||||
alert("Missing uuid parameter in URL");
|
"Trial",
|
||||||
return;
|
"Side Hustle",
|
||||||
}
|
"On the Rise",
|
||||||
|
"Powerhouse",
|
||||||
|
"Empire",
|
||||||
|
];
|
||||||
|
|
||||||
document.getElementById("uuidText").textContent = uuid;
|
const PLAN_META = {
|
||||||
|
Trial: {
|
||||||
|
cardId: "card-trial",
|
||||||
|
btnId: "btn-trial",
|
||||||
|
productId: null,
|
||||||
|
},
|
||||||
|
"Side Hustle": {
|
||||||
|
cardId: "card-sidehustle",
|
||||||
|
btnId: "btn-sidehustle",
|
||||||
|
productId: "sidehustle",
|
||||||
|
},
|
||||||
|
"On the Rise": {
|
||||||
|
cardId: "card-ontherise",
|
||||||
|
btnId: "btn-ontherise",
|
||||||
|
productId: "ontherise",
|
||||||
|
},
|
||||||
|
Powerhouse: {
|
||||||
|
cardId: "card-powerhouse",
|
||||||
|
btnId: "btn-powerhouse",
|
||||||
|
productId: "powerhouse",
|
||||||
|
},
|
||||||
|
Empire: {
|
||||||
|
cardId: "card-empire",
|
||||||
|
btnId: "btn-empire",
|
||||||
|
productId: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
try {
|
// ── UUID from URL ─────────────────────────────────────────────────────────
|
||||||
const res = await fetch(webhookUrl, {
|
const params = new URLSearchParams(window.location.search);
|
||||||
method: "POST",
|
const uuid = params.get("uuid") || "";
|
||||||
headers: { "Content-Type": "application/json" },
|
document.getElementById("uuidText").textContent = uuid || "–";
|
||||||
body: JSON.stringify({ uuid })
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) throw new Error("Failed to fetch data");
|
// ── Buy handler ───────────────────────────────────────────────────────────
|
||||||
const data = await res.json();
|
async function buyProduct(productId) {
|
||||||
|
if (!uuid) {
|
||||||
|
alert("Missing uuid parameter in URL.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await fetch(buy_webhook, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ uuid, product_id: productId }),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error("HTTP " + res.status);
|
||||||
|
|
||||||
document.getElementById("gitValue").textContent = data.git ? "Enabled" : "Disabled";
|
document.body.innerHTML = `
|
||||||
document.getElementById("domainsValue").textContent = data.domains || "-";
|
<div style="text-align:center;padding:80px 20px;background:#fff;border-radius:14px;
|
||||||
document.getElementById("backupValue").textContent = data.backupSlots || "-";
|
max-width:560px;margin:60px auto;box-shadow:0 4px 20px rgba(0,0,0,0.1);
|
||||||
document.getElementById("workersValue").textContent = data.workers || "-";
|
font-family:'Inter','Segoe UI',Arial,sans-serif;">
|
||||||
document.getElementById("hddValue").textContent = data.hdd ? `${data.hdd} MB` : "-";
|
<div style="font-size:3em;margin-bottom:16px;">✅</div>
|
||||||
document.getElementById("expiresValue").textContent = data.expires || "-";
|
<h2 style="color:#262626;font-weight:700;margin-bottom:10px;">Request sent!</h2>
|
||||||
document.getElementById("contractName").textContent = data.contract_name || "-";
|
<p style="color:#777;line-height:1.6;">
|
||||||
|
Please check your email for the payment link and confirmation.<br>
|
||||||
|
New features will be active as soon as the payment is complete.
|
||||||
|
</p>
|
||||||
|
</div>`;
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
alert(
|
||||||
|
"Something went wrong. Please try again or contact support.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Disable buttons based on contract_name
|
// ── Wire buy buttons ──────────────────────────────────────────────────────
|
||||||
if (data.contract_name === "On the Rise") {
|
document
|
||||||
document.getElementById("upgradeRiseBtn").disabled = true;
|
.getElementById("btn-sidehustle")
|
||||||
} else if (data.contract_name === "Powerhouse") {
|
.addEventListener("click", () => buyProduct("sidehustle"));
|
||||||
document.getElementById("upgradeRiseBtn").disabled = true;
|
document
|
||||||
document.getElementById("upgradePowerhouseBtn").disabled = true;
|
.getElementById("btn-ontherise")
|
||||||
}
|
.addEventListener("click", () => buyProduct("ontherise"));
|
||||||
|
document
|
||||||
|
.getElementById("btn-powerhouse")
|
||||||
|
.addEventListener("click", () => buyProduct("powerhouse"));
|
||||||
|
document
|
||||||
|
.getElementById("btn-empire")
|
||||||
|
.addEventListener("click", () => {
|
||||||
|
window.open("https://odoo4projects.com", "_blank");
|
||||||
|
});
|
||||||
|
|
||||||
} catch (err) {
|
// ── Apply current-plan state ──────────────────────────────────────────────
|
||||||
console.error(err);
|
function applyPlanState(contractName) {
|
||||||
alert("Error loading data.");
|
const currentIdx = PLAN_ORDER.indexOf(contractName);
|
||||||
}
|
if (currentIdx === -1) return; // unknown plan – leave defaults
|
||||||
}
|
|
||||||
|
|
||||||
async function buyProduct(product_id) {
|
PLAN_ORDER.forEach(function (plan, idx) {
|
||||||
if (!uuid) return;
|
var meta = PLAN_META[plan];
|
||||||
try {
|
if (!meta) return;
|
||||||
const res = await fetch(webhook_buy, {
|
var btn = document.getElementById(meta.btnId);
|
||||||
method: "POST",
|
var card = document.getElementById(meta.cardId);
|
||||||
headers: { "Content-Type": "application/json" },
|
if (!btn || !card) return;
|
||||||
body: JSON.stringify({ uuid, product_id })
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) throw new Error("Failed to send purchase request");
|
if (idx === currentIdx) {
|
||||||
|
// Current plan
|
||||||
|
card.classList.add("current");
|
||||||
|
btn.textContent = "Your Plan";
|
||||||
|
btn.disabled = true;
|
||||||
|
btn.classList.add("is-current-plan");
|
||||||
|
} else if (idx < currentIdx) {
|
||||||
|
// Lower tier – no downgrade
|
||||||
|
btn.textContent = "Your Plan";
|
||||||
|
btn.disabled = true;
|
||||||
|
btn.classList.remove("is-current-plan");
|
||||||
|
}
|
||||||
|
// Higher tiers: leave as "Buy Now" / "Contact Us" (enabled)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
document.body.innerHTML = `
|
// ── Load contract from webhook ────────────────────────────────────────────
|
||||||
<div style="text-align:center;padding:80px;background:#fff;border-radius:12px;max-width:700px;margin:auto;box-shadow:0 4px 12px rgba(0,0,0,0.1);">
|
async function loadContract() {
|
||||||
<h2>✅ Your request has been sent</h2>
|
if (!uuid) return;
|
||||||
<p>Please check your email for confirmation.</p>
|
try {
|
||||||
</div>
|
const res = await fetch(getContract_Webhook, {
|
||||||
`;
|
method: "POST",
|
||||||
} catch (err) {
|
headers: { "Content-Type": "application/json" },
|
||||||
console.error(err);
|
body: JSON.stringify({ uuid }),
|
||||||
alert("Error sending request.");
|
});
|
||||||
}
|
if (!res.ok) throw new Error("HTTP " + res.status);
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("upgradeRiseBtn").addEventListener("click", () => buyProduct("ontherise"));
|
const payload = await res.json();
|
||||||
document.getElementById("upgradePowerhouseBtn").addEventListener("click", () => buyProduct("powerhouse"));
|
// Webhook returns: [{ "expires": "YYYY-MM-DD", "contractName": "Trial" }]
|
||||||
document.getElementById("addDomainBtn").addEventListener("click", () => buyProduct("1-domain"));
|
const record = Array.isArray(payload)
|
||||||
document.getElementById("addBackupsBtn").addEventListener("click", () => buyProduct("5-backup"));
|
? payload[0]
|
||||||
|
: payload;
|
||||||
|
if (record && record.contractName) {
|
||||||
|
applyPlanState(record.contractName);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Could not load contract data:", err);
|
||||||
|
// Graceful degradation: page remains usable with default button states
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
loadData();
|
loadContract();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user