mirror of
https://github.com/rustdesk/doc.rustdesk.com.git
synced 2026-05-19 08:00:13 +00:00
rustdesk
428 lines
20 KiB
Plaintext
428 lines
20 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
import Button from '~/components/ui/Button.astro';
|
|
import Headline from '~/components/ui/Headline.astro';
|
|
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
|
import type { Pricing as Props } from '~/types';
|
|
|
|
const defaultCurrencyCopy = {
|
|
title: 'Select payment currency',
|
|
label: 'Payment currency',
|
|
tip: 'The currency you choose will also be used on your invoice.',
|
|
emailTip: 'After successful payment, you will receive your invoice and license by email. Please enter the correct email address on the next payment page.',
|
|
businessTip: 'If you need a business invoice with your business name and tax number, please check the "I\'m purchasing as a business" checkbox on the next payment page.',
|
|
sepaTip: 'Heads up: SEPA bank debit typically takes about <strong><u>6 business days</u></strong> to clear, and in some cases can take <strong><u>up to 10 days</u></strong>. Your license will only be emailed after the bank confirms the payment. If you need it sooner, please choose a real-time payment method instead.',
|
|
confirm: 'Continue to checkout',
|
|
cancel: 'Cancel',
|
|
} as const;
|
|
|
|
const {
|
|
title = '',
|
|
subtitle = '',
|
|
tagline = '',
|
|
prices = [],
|
|
currencyCopy: rawCurrencyCopy,
|
|
|
|
id,
|
|
isDark = false,
|
|
classes = {},
|
|
bg = await Astro.slots.render('bg'),
|
|
} = Astro.props;
|
|
const currencyCopy = { ...defaultCurrencyCopy, ...(rawCurrencyCopy || {}) };
|
|
const defaultCurrency = 'USD';
|
|
---
|
|
|
|
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
|
|
<Headline title={title} subtitle={subtitle} tagline={tagline} />
|
|
<div class="flex items-stretch justify-center">
|
|
<div
|
|
class={`grid grid-cols-1 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-` +
|
|
prices.length +
|
|
` xl:grid-cols-` +
|
|
prices.length}
|
|
>
|
|
{
|
|
prices &&
|
|
prices.map((priceItem, index) => {
|
|
const {
|
|
title,
|
|
subtitle,
|
|
price,
|
|
period,
|
|
items,
|
|
callToAction,
|
|
callToAction2,
|
|
hasRibbon = false,
|
|
content,
|
|
id,
|
|
ribbonTitle,
|
|
} = priceItem;
|
|
|
|
return (
|
|
<div
|
|
class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1"
|
|
id={id || ''}
|
|
>
|
|
{id && <a name={id} />}
|
|
{price && period && (
|
|
<div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-3 py-6 flex w-full flex-col justify-between text-center">
|
|
{hasRibbon && ribbonTitle && (
|
|
<div class="absolute right-[-5px] 2xl:right-[-8px] rtl:right-auto rtl:left-[-8px] rtl:2xl:left-[-10px] top-[-5px] 2xl:top-[-10px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
|
|
<span class="absolute top-[19px] right-[-21px] rtl:right-auto rtl:left-[-21px] block w-full rotate-45 rtl:-rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
|
|
{ribbonTitle}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div class="px-2 py-0">
|
|
{title && (
|
|
<h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">
|
|
{title}
|
|
</h3>
|
|
)}
|
|
{subtitle && (
|
|
<p class="font-light sm:text-lg text-gray-600 dark:text-slate-400">
|
|
<Fragment set:html={subtitle} />
|
|
</p>
|
|
)}
|
|
<div class="my-6">
|
|
<div class="mb-1 flex justify-center text-center">
|
|
<div class="relative inline-flex items-end justify-center gap-1.5">
|
|
<span class="text-5xl">$</span>
|
|
<span class="text-5xl font-extrabold">
|
|
<Fragment set:html={price} />
|
|
</span>
|
|
<span class="pointer-events-none absolute -right-7 top-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400 dark:text-slate-500">
|
|
USD
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span class="text-base leading-6 lowercase text-gray-600 dark:text-slate-400">{period}</span>
|
|
</div>
|
|
{items && (
|
|
<ul class="my-4 space-y-2 text-left">
|
|
{items.map(
|
|
({ description, icon }) =>
|
|
description && (
|
|
<li class="flex items-start space-x-3 text-sm">
|
|
<div class="">
|
|
<Icon name={icon ? icon : 'tabler:check'} class="size-4 text-secondary" />
|
|
</div>
|
|
<span>
|
|
<Fragment set:html={description} />
|
|
</span>
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
{content && <Fragment set:html={content} />}
|
|
{(callToAction || callToAction2) && (
|
|
<div class="mt-4 space-y-3">
|
|
{callToAction && (
|
|
<div class={`flex justify-center`}>
|
|
{typeof callToAction === 'string' ? (
|
|
<Fragment set:html={callToAction} />
|
|
) : (
|
|
callToAction &&
|
|
(callToAction.href || callToAction.onclick) && (
|
|
<Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction} />
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
{callToAction2 && (
|
|
<div class={`flex justify-center`}>
|
|
{typeof callToAction2 === 'string' ? (
|
|
<Fragment set:html={callToAction2} />
|
|
) : (
|
|
callToAction2 &&
|
|
(callToAction2.href || callToAction2.onclick) && (
|
|
<Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction2} />
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</WidgetWrapper>
|
|
|
|
<style is:global>
|
|
.pricing-purchase-dialog-icon.swal2-icon {
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
margin: 1rem auto 0.4rem;
|
|
border-width: 0.18rem;
|
|
}
|
|
|
|
.pricing-purchase-dialog-icon.swal2-icon .swal2-icon-content {
|
|
font-size: 1.75rem;
|
|
}
|
|
</style>
|
|
|
|
<script is:inline define:vars={{ defaultCurrency, currencyCopy }}>
|
|
(() => {
|
|
const ns = (window.__pricing = window.__pricing || {});
|
|
ns.defaultCurrency = defaultCurrency;
|
|
ns.currencyCopy = currencyCopy;
|
|
|
|
if (ns.initialized) {
|
|
ns.loadCurrencies?.();
|
|
return;
|
|
}
|
|
ns.initialized = true;
|
|
|
|
const CHECKOUT_PATH = '/api/lic/stripe/checkout';
|
|
const CURRENCIES_URL = '/currencies.json';
|
|
const CURRENCY_RE = /^[A-Z]{3}$/;
|
|
const TRIAL_PAID_EQUIVALENT = { trial: 'Individual', Trial: 'Individual', BasicTrial: 'Basic' };
|
|
|
|
const normalize = (v) => {
|
|
const s = String(v || '').trim().toUpperCase();
|
|
return CURRENCY_RE.test(s) ? s : '';
|
|
};
|
|
|
|
const getPageCurrency = () => normalize(new URLSearchParams(location.search).get('currency'));
|
|
|
|
const getPageCheckoutType = () => {
|
|
const value = String(new URLSearchParams(location.search).get('type') || '').trim();
|
|
return Object.prototype.hasOwnProperty.call(TRIAL_PAID_EQUIVALENT, value) ? value : '';
|
|
};
|
|
|
|
const getLoadedCurrencies = () => (Array.isArray(ns.currencies) ? ns.currencies : []);
|
|
|
|
const currencyByRegion = {
|
|
AT: 'EUR', AU: 'AUD', BE: 'EUR', BR: 'BRL', CA: 'CAD', CH: 'CHF',
|
|
CN: 'CNY', CY: 'EUR', CZ: 'CZK', DE: 'EUR', DK: 'DKK', EE: 'EUR',
|
|
ES: 'EUR', FI: 'EUR', FR: 'EUR', GB: 'GBP', GR: 'EUR', HK: 'HKD',
|
|
HR: 'EUR', HU: 'HUF', ID: 'IDR', IE: 'EUR', IL: 'ILS', IN: 'INR',
|
|
IS: 'ISK', IT: 'EUR', JP: 'JPY', KR: 'KRW', LT: 'EUR', LU: 'EUR',
|
|
LV: 'EUR', MT: 'EUR', MX: 'MXN', MY: 'MYR', NL: 'EUR', NO: 'NOK',
|
|
NZ: 'NZD', PH: 'PHP', PL: 'PLN', PT: 'EUR', RO: 'RON', SE: 'SEK',
|
|
SG: 'SGD', SI: 'EUR', SK: 'EUR', TH: 'THB', TR: 'TRY', US: 'USD',
|
|
ZA: 'ZAR',
|
|
};
|
|
|
|
const getRegionFromLocale = (v) => {
|
|
const s = String(v || '').trim();
|
|
if (!s) return '';
|
|
try {
|
|
if (typeof Intl?.Locale === 'function') {
|
|
const loc = new Intl.Locale(s);
|
|
return loc.region || loc.maximize().region || '';
|
|
}
|
|
} catch { /* ignore */ }
|
|
const m = s.match(/-([a-z]{2}|\d{3})(?:-|$)/i);
|
|
return m?.[1]?.toUpperCase() ?? '';
|
|
};
|
|
|
|
const getBrowserLocaleCurrency = () => {
|
|
const currencies = getLoadedCurrencies();
|
|
if (!currencies.length) return '';
|
|
const locales = Array.isArray(navigator.languages) && navigator.languages.length
|
|
? navigator.languages : [navigator.language];
|
|
for (const locale of locales) {
|
|
const region = getRegionFromLocale(locale);
|
|
const inferred = normalize(currencyByRegion[region]);
|
|
if (inferred && currencies.includes(inferred)) return inferred;
|
|
}
|
|
return '';
|
|
};
|
|
|
|
const getFallbackCurrency = (requested) => {
|
|
const direct = normalize(requested);
|
|
const currencies = getLoadedCurrencies();
|
|
if (direct && (!currencies.length || currencies.includes(direct))) return direct;
|
|
const page = getPageCurrency();
|
|
if (page && (!currencies.length || currencies.includes(page))) return page;
|
|
const browser = getBrowserLocaleCurrency();
|
|
if (browser) return browser;
|
|
return normalize(ns.defaultCurrency) || 'USD';
|
|
};
|
|
|
|
const maybeAutoOpenTrialCheckout = () => {
|
|
const pageType = getPageCheckoutType();
|
|
if (!pageType) return;
|
|
|
|
const pageKey = location.pathname + location.search;
|
|
if (ns.autoOpenedTrialKey === pageKey || ns.pendingAutoOpenedTrialKey === pageKey) return;
|
|
ns.pendingAutoOpenedTrialKey = pageKey;
|
|
const url = 'https://rustdesk.com' + CHECKOUT_PATH + '?type=' + encodeURIComponent(pageType);
|
|
|
|
const tryOpen = (attempt = 0) => {
|
|
if (location.pathname + location.search !== pageKey) {
|
|
if (ns.pendingAutoOpenedTrialKey === pageKey) ns.pendingAutoOpenedTrialKey = undefined;
|
|
return;
|
|
}
|
|
if (typeof window.gotoBuy === 'function') {
|
|
ns.pendingAutoOpenedTrialKey = undefined;
|
|
ns.autoOpenedTrialKey = pageKey;
|
|
return window.gotoBuy(url);
|
|
}
|
|
if (attempt < 120) return setTimeout(() => tryOpen(attempt + 1), 250);
|
|
if (ns.pendingAutoOpenedTrialKey === pageKey) ns.pendingAutoOpenedTrialKey = undefined;
|
|
console.warn('pricing: gotoBuy not available, skipping auto-open');
|
|
};
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => tryOpen(), { once: true });
|
|
} else {
|
|
tryOpen();
|
|
}
|
|
};
|
|
|
|
window.getSelectedCurrency = () => normalize(ns.selectedCurrency) || getFallbackCurrency();
|
|
|
|
ns.loadCurrencies = () => {
|
|
if (getLoadedCurrencies().length) return ns.currenciesPromise ?? Promise.resolve(ns.currencies);
|
|
if (!ns.currenciesPromise) {
|
|
ns.currenciesPromise = fetch(CURRENCIES_URL, { cache: 'no-store' })
|
|
.then((r) => { if (!r.ok) throw new Error(r.status); return r.json(); })
|
|
.then((data) => {
|
|
ns.currencies = Array.isArray(data)
|
|
? data.map((c) => normalize(c)).filter(Boolean).sort()
|
|
: [];
|
|
return ns.currencies;
|
|
})
|
|
.catch(() => { ns.currencies = undefined; return undefined; })
|
|
.finally(() => { ns.currenciesPromise = undefined; });
|
|
}
|
|
return ns.currenciesPromise;
|
|
};
|
|
|
|
const buildCheckoutUrl = (rawUrl, currency) => {
|
|
const url = new URL(String(rawUrl), location.origin);
|
|
new URLSearchParams(location.search).forEach((v, k) => {
|
|
if (k !== 'currency' && !url.searchParams.has(k)) url.searchParams.append(k, v);
|
|
});
|
|
const pageType = getPageCheckoutType();
|
|
if (pageType && url.searchParams.get('type') === TRIAL_PAID_EQUIVALENT[pageType]) {
|
|
url.searchParams.set('type', pageType);
|
|
}
|
|
if (currency === 'USD') url.searchParams.delete('currency');
|
|
else url.searchParams.set('currency', currency.toLowerCase());
|
|
return url.toString();
|
|
};
|
|
|
|
const openCurrencyDialog = async (pending) => {
|
|
const Swal = ns.swal;
|
|
const currencies = getLoadedCurrencies();
|
|
if (!Swal?.fire || !currencies.length) {
|
|
return ns.nativeOpen?.(
|
|
buildCheckoutUrl(pending.url, getFallbackCurrency(pending.preferredCurrency)),
|
|
pending.target, pending.features
|
|
);
|
|
}
|
|
|
|
const copy = ns.currencyCopy || currencyCopy;
|
|
const fallback = currencies.find((c) => c === getFallbackCurrency(pending.preferredCurrency)) || currencies[0];
|
|
const selectId = 'pricing-currency-swal-select';
|
|
const sepaTipId = 'pricing-currency-swal-sepa-tip';
|
|
const options = currencies
|
|
.map((c) => `<option value="${c}"${c === fallback ? ' selected' : ''}>${c}</option>`)
|
|
.join('');
|
|
const infoIcon = '<svg style="margin-top:0.1rem;width:0.85rem;height:0.85rem;flex-shrink:0;color:#94a3b8;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" /></svg>';
|
|
const sepaIcon = '<svg style="margin-top:0.2rem;width:1.2rem;height:1.2rem;flex-shrink:0;color:#d97706;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" clip-rule="evenodd" /></svg>';
|
|
const updateSepaTipVisibility = () => {
|
|
const select = document.getElementById(selectId);
|
|
const sepaTip = document.getElementById(sepaTipId);
|
|
if (!(select instanceof HTMLSelectElement) || !(sepaTip instanceof HTMLElement)) return;
|
|
const isEur = select.value === 'EUR';
|
|
sepaTip.style.display = isEur ? 'flex' : 'none';
|
|
sepaTip.setAttribute('aria-hidden', isEur ? 'false' : 'true');
|
|
};
|
|
|
|
const result = await Swal.fire({
|
|
title: copy.title,
|
|
html:
|
|
'<div style="margin-top:0.25rem;text-align:left;">' +
|
|
'<div style="position:relative;">' +
|
|
'<select id="' + selectId + '" aria-label="' + copy.label + '"' +
|
|
' style="width:100%;appearance:none;-webkit-appearance:none;border:1px solid rgba(148,163,184,0.4);border-radius:0.75rem;background:#fff;padding:0.75rem 2.5rem 0.75rem 0.95rem;font-size:0.95rem;line-height:1.4;color:#0f172a;box-shadow:0 1px 3px rgba(15,23,42,0.06);outline:none;transition:border-color 0.15s,box-shadow 0.15s;cursor:pointer;"' +
|
|
" onfocus=\"this.style.borderColor='#6366f1';this.style.boxShadow='0 0 0 3px rgba(99,102,241,0.12)'\"" +
|
|
" onblur=\"this.style.borderColor='rgba(148,163,184,0.4)';this.style.boxShadow='0 1px 3px rgba(15,23,42,0.06)'\"" +
|
|
'>' + options + '</select>' +
|
|
'<svg style="pointer-events:none;position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#94a3b8;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>' +
|
|
'</div>' +
|
|
'<p style="margin:0.75rem 0 0;display:flex;align-items:flex-start;gap:0.35rem;font-size:0.78rem;line-height:1.55;color:#64748b;">' + infoIcon + '<span>' + copy.emailTip + '</span></p>' +
|
|
'<p style="margin:0.45rem 0 0;display:flex;align-items:flex-start;gap:0.35rem;font-size:0.78rem;line-height:1.55;color:#64748b;">' + infoIcon + '<span>' + copy.tip + '</span></p>' +
|
|
'<p style="margin:0.45rem 0 0;display:flex;align-items:flex-start;gap:0.35rem;font-size:0.78rem;line-height:1.55;color:#64748b;">' + infoIcon + '<span>' + copy.businessTip + '</span></p>' +
|
|
(copy.sepaTip
|
|
? '<p id="' + sepaTipId + '" aria-hidden="true" style="margin:0.9rem 0 0;display:none;align-items:flex-start;gap:0.55rem;font-size:0.95rem;line-height:1.6;color:#92400e;background:#fffbeb;border:1px solid #fcd34d;border-radius:0.75rem;padding:0.9rem 1rem;font-weight:500;">' + sepaIcon + '<span>' + copy.sepaTip + '</span></p>'
|
|
: '') +
|
|
'</div>',
|
|
showCancelButton: true,
|
|
reverseButtons: true,
|
|
confirmButtonText: copy.confirm,
|
|
cancelButtonText: copy.cancel,
|
|
focusConfirm: true,
|
|
didOpen: () => {
|
|
const select = document.getElementById(selectId);
|
|
if (select instanceof HTMLSelectElement) {
|
|
select.addEventListener('change', updateSepaTipVisibility);
|
|
}
|
|
updateSepaTipVisibility();
|
|
},
|
|
preConfirm: () => {
|
|
const select = document.getElementById(selectId);
|
|
if (!(select instanceof HTMLSelectElement)) return fallback;
|
|
return normalize(select.value) || fallback;
|
|
},
|
|
});
|
|
|
|
if (!result.isConfirmed) return null;
|
|
const selected = normalize(result.value) || fallback;
|
|
ns.selectedCurrency = selected;
|
|
return ns.nativeOpen?.(buildCheckoutUrl(pending.url, selected), pending.target, pending.features);
|
|
};
|
|
|
|
if (!ns.openPatched) {
|
|
ns.openPatched = true;
|
|
var nativeOpen = window.open.bind(window);
|
|
ns.nativeOpen = nativeOpen;
|
|
|
|
window.open = function (url, target, features) {
|
|
try {
|
|
var parsed = new URL(String(url), location.origin);
|
|
if (parsed.pathname.startsWith(CHECKOUT_PATH)) {
|
|
var pending = {
|
|
url: parsed.toString(),
|
|
target: target,
|
|
features: features,
|
|
preferredCurrency: normalize(parsed.searchParams.get('currency')),
|
|
};
|
|
var load = ns.loadCurrencies?.();
|
|
if (load?.finally) {
|
|
load.finally(function () { openCurrencyDialog(pending); });
|
|
return null;
|
|
}
|
|
openCurrencyDialog(pending);
|
|
return null;
|
|
}
|
|
} catch (e) {
|
|
console.warn('pricing: failed to intercept checkout URL', e);
|
|
}
|
|
return nativeOpen(url, target, features);
|
|
};
|
|
}
|
|
|
|
ns.selectedCurrency = getPageCurrency() || undefined;
|
|
ns.loadCurrencies();
|
|
maybeAutoOpenTrialCheckout();
|
|
|
|
document.addEventListener('astro:after-swap', () => {
|
|
ns.defaultCurrency = defaultCurrency;
|
|
ns.currencyCopy = currencyCopy;
|
|
ns.loadCurrencies?.();
|
|
maybeAutoOpenTrialCheckout();
|
|
});
|
|
})();
|
|
</script>
|