cutomize ok

v3/package-lock.json

@@ -29,7 +29,7 @@
         "lucide-react": "^0.451.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-img-placeholder": "^0.1.5",
+        "sweetalert2": "^11.14.2",
         "swiper": "^11.1.14",
         "tailwindcss-animate": "^1.0.7",
         "unpic": "^3.18.0",
@@ -8839,18 +8839,6 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-img-placeholder": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/react-img-placeholder/-/react-img-placeholder-0.1.5.tgz",
-      "integrity": "sha512-peXMI1ScTAw09Xm1ck42NeaZbQP97M0NqSoTBlVFKgdNh1x85y0ps0sjEb2RsOwUYzG0FL7x1+/6HOUx9JexiQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -9706,6 +9694,16 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
     },
+    "node_modules/sweetalert2": {
+      "version": "11.14.2",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.2.tgz",
+      "integrity": "sha512-ZJcnp+akKLFDdwTJkayZCMWfdEOxxchInuJ8gz/Xlx/nrdTfAM3Sb+NBbBNdqcfXn0h1CamN+VKDxjP8xbWqrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/swiper": {
       "version": "11.1.14",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",

v3/package.json

@@ -43,6 +43,7 @@
     "lucide-react": "^0.451.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "sweetalert2": "^11.14.2",
     "swiper": "^11.1.14",
     "tailwindcss-animate": "^1.0.7",
     "unpic": "^3.18.0",

v3/src/components/widgets/Pricing.astro

@@ -34,6 +34,7 @@ const {
               callToAction,
               callToAction2,
               hasRibbon = false,
+              content,
               ribbonTitle,
             }) => (
               <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">
@@ -80,13 +81,14 @@ const {
                         </ul>
                       )}
                     </div>
+                    {content && <Fragment set:html={content} />}
                     {callToAction && (
                       <div class={`flex justify-center`}>
                         {typeof callToAction === 'string' ? (
                           <Fragment set:html={callToAction} />
                         ) : (
                           callToAction &&
-                          callToAction.href && (
+                          (callToAction.href || callToAction.onclick) && (
                             <Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction} />
                           )
                         )}
@@ -98,7 +100,7 @@ const {
                           <Fragment set:html={callToAction2} />
                         ) : (
                           callToAction2 &&
-                          callToAction2.href && (
+                          (callToAction2.href || callToAction2.onclick) && (
                             <Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction2} />
                           )
                         )}

v3/src/pages/pricing.astro

@@ -12,10 +12,38 @@ const metadata = {
 };
 ---
 
+<script>
+  import Swal from 'sweetalert2';
+  window['gotoBuy'] = function (redirectUrl) {
+    Swal.fire({
+      title: 'Please Confirm',
+      html: '<p style="text-align:left">Do you want to proceed to the purchase page? <br><br>Please note that what you are purchasing is <b style="font-size: 2em">NOT</b> a <span style="text-decoration:line-through">SaaS(Software as a Service)</span> subscription. <br><br>Instead, it is a license for a <b style="font-size: 2em">self-hosting</b> solution, which requires you to deploy it on your own server (cloud server, e.g. AWS EC2, Azure VM, Vultr VPS etc, or your on-premise server). <br><br>Please <b style="font-size: 2em">don\'t</b> buy if you don\'t know what is self-hosting',
+      icon: 'question',
+      showCancelButton: true,
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No',
+    }).then((result) => {
+      if (result.isConfirmed) {
+        Swal.fire({
+          title: 'Please Confirm',
+          html: 'Please note that we <span class="text-3xl font-bold">don\'t</span> offer <span class="text-3xl font-bold">refunds</span>. We strongly recommend <span class="underline font-bold">testing our free self-hosting plan</span> before considering the purchase of our Pro plan. Are you still interested in proceeding?',
+          showCancelButton: true,
+          confirmButtonText: 'Yes',
+          cancelButtonText: 'No',
+        }).then((result) => {
+          if (result.isConfirmed) {
+            window.open(redirectUrl, '_blank');
+          }
+        });
+      }
+    });
+  };
+</script>
+
 <Layout metadata={metadata}>
   <Note
     title="Note"
-    subtitle='This pricing is for <span class="text-xl text-blue-500">self-hosting</span>solution, it is not a <span class="line-through text-xl text-blue-500">SaaS</span> subscription.'
+    subtitle='This pricing is for <span class="text-xl text-blue-500">self-hosting</span>solution, it is <span class="text-3xl font-extrabold">NOT</span> a <span class="line-through text-xl text-blue-500">SaaS</span> subscription.'
   />
 
   <!-- Pricing Widget ******************* -->
@@ -92,9 +120,9 @@ const metadata = {
           },
         ],
         callToAction: {
-          target: '_blank',
+          text: 'Buy now',
-          text: 'Get started',
+          onclick: 'gotoBuy("https://rustdesk.com/api/lic/stripe/checkout?type=Individual")',
-          href: '#',
+          variant: 'primary',
         },
       },
       {
@@ -133,9 +161,8 @@ const metadata = {
           },
         ],
         callToAction: {
-          target: '_blank',
+          text: 'Buy now',
-          text: 'Get started',
+          onclick: 'gotoBuy("https://rustdesk.com/api/lic/stripe/checkout?type=Basic")',
-          href: '#',
         },
         hasRibbon: true,
         ribbonTitle: 'popular',
@@ -143,7 +170,7 @@ const metadata = {
       {
         title: 'Customized',
         subtitle: 'Customized Pro Plan',
-        price: '0 <span class="text-sm">/month</span>',
+        price: '<span id="cprice">19.90</span> <span class="text-sm">/month</span>',
         period: 'billed annually',
         items: [
           {
@@ -157,10 +184,56 @@ const metadata = {
             description: '$0.1 for each additional device',
           },
         ],
+        content: `
+<form class="flex flex-col space-y-4 mx-3">
+  <label for="users" class="text-left font-bold">Number of Licensed Users:</label>
+  <input class="bg-white text-black rounded-md border border-gray-300 py-1 px-2 w-24 h-10" type="number" id="users" name="users" value="10" min="10" max="500" step="10">
+  <input type="range" id="usersSlider" class="slider" name="usersRange" value="10" min="10" max="500" step="10">
+  <label for="devices" class="text-left font-bold">Number of Managed Devices:</label>
+  <input class="bg-white text-black rounded-md border border-gray-300 py-1 px-2 w-24 h-10" type="number" id="devices" name="devices" value="100" min="100" max="5000" step="100">
+  <input type="range" id="devicesSlider" class="slider" name="devicesRange" value="100" min="100" max="5000" step="100">
+</form>
+<script>
+  var users = 10;
+  var devices = 100;
+  function submit() {
+    redirectUrl = "https://rustdesk.com/api/lic/stripe/checkout?type=Customized&users=" + users + "&devices=" + devices;
+    gotoBuy(redirectUrl);
+  }
+  function calculatePrice() {
+    users = parseInt(document.getElementById("users").value);
+    devices = parseInt(document.getElementById("devices").value);
+    if (!users || users < 10) users = 10;
+    if (devices < 100) devices = 100;
+    var price =  19.9 + (users - 10) + (devices - 100) * 0.1;
+    document.getElementById("cprice").innerText = price.toFixed(price >= 100 ? 1 : 2);
+  }
+
+  document.getElementById("users").oninput = function() {
+    document.getElementById("usersSlider").value = this.value;
+    calculatePrice();
+  }
+
+  document.getElementById("devices").oninput = function() {
+    document.getElementById("devicesSlider").value = this.value;
+    calculatePrice();
+  }
+
+  document.getElementById("usersSlider").oninput = function() {
+    document.getElementById("users").value = this.value;
+    calculatePrice();
+  }
+
+  document.getElementById("devicesSlider").oninput = function() {
+    document.getElementById("devices").value = this.value;
+    calculatePrice();
+  }
+</script>
+`,
         callToAction: {
-          target: '_blank',
+          text: 'Buy now',
-          text: 'Get started',
+          onclick: 'submit()',
-          href: 'https://rustdesk.com/docs/en/self-host/rustdesk-server-oss/',
+          variant: 'primary',
         },
       },
     ]}

v3/src/types.d.ts

@@ -152,6 +152,7 @@ export interface Price {
   callToAction2?: CallToAction;
   hasRibbon?: boolean;
   ribbonTitle?: string;
+  content?: string;
 }
 
 export interface Testimonial {