Region pages: read the custom-price billing period off the API

src/api.ts

@@ -269,6 +269,8 @@ export interface VmCustomTemplateRequest {
 export interface VmCustomPrice {
   currency: string;
   amount: number;
+  interval_amount: number;
+  interval_type: CostPlanIntervalType;
 }
 
 export interface VmTemplateResponse {

src/components/cost.tsx

@@ -1,14 +1,14 @@
-import { FormattedMessage, FormattedNumber } from "react-intl";
+import { FormattedNumber, useIntl } from "react-intl";
 import useLogin from "../hooks/login";
 import { taxRateFor, useTaxRates } from "../hooks/tax";
 import useExchangeRates from "../hooks/useExchangeRates";
-import { convertAmount } from "../utils/currency";
+import { convertAmount, formatIntervalText } from "../utils/currency";
 
 interface Price {
   currency: string;
   amount: number;
 }
-type Cost = Price & { interval_type?: string };
+type Cost = Price & { interval_type?: string; interval_amount?: number };
 
 function grossPrice<T extends Price>(p: T, rate: number): T {
   return { ...p, amount: Math.round(p.amount * (1 + rate / 100)) };
@@ -51,6 +51,7 @@ export default function CostLabel({
           currency: target,
           amount: Math.round(converted),
           interval_type: base.interval_type,
+          interval_amount: base.interval_amount,
         }}
         converted={true}
       />{" "}
@@ -68,32 +69,8 @@ export function IntervalSuffix({
   interval: string;
   n?: number;
 }) {
-  const count = n ?? 1;
-  switch (interval) {
-    case "day":
-      return (
-        <FormattedMessage
-          defaultMessage="{n, plural, one {day} other {days}}"
-          values={{ n: count }}
-        />
-      );
-    case "month":
-      return (
-        <FormattedMessage
-          defaultMessage="{n, plural, one {month} other {months}}"
-          values={{ n: count }}
-        />
-      );
-    case "year":
-      return (
-        <FormattedMessage
-          defaultMessage="{n, plural, one {year} other {years}}"
-          values={{ n: count }}
-        />
-      );
-    default:
-      return <>{interval}</>;
-  }
+  const intl = useIntl();
+  return <>{formatIntervalText(intl, interval, n ?? 1)}</>;
 }
 
 export function CostAmount({
@@ -137,7 +114,8 @@ export function CostAmount({
       {cost.currency === "BTC" && " sats"}
       {cost.interval_type && (
         <>
-          /<IntervalSuffix interval={cost.interval_type} />
+          /{(cost.interval_amount ?? 1) > 1 && <>{cost.interval_amount} </>}
+          <IntervalSuffix interval={cost.interval_type} n={cost.interval_amount} />
         </>
       )}
     </span>

src/components/region-landing.tsx

@@ -97,7 +97,7 @@ export function RegionLanding({
             {from && (
               <p className="m-0 max-w-prose text-cyber-text">
                 <FormattedMessage
-                  defaultMessage="From {price} per month, excluding VAT."
+                  defaultMessage="From {price}, excluding VAT."
                   values={{
                     price: <CostAmount cost={from} converted={false} />,
                   }}

src/components/vps-custom.tsx

@@ -241,8 +241,8 @@ export function VpsCustomOrder({
     name: "custom",
     amount: price?.amount ?? 0,
     currency: (price?.currency as "BTC" | "EUR" | "USD") ?? "USD",
-    interval_amount: 1,
-    interval_type: CostPlanIntervalType.MONTH,
+    interval_amount: price?.interval_amount ?? 1,
+    interval_type: price?.interval_type ?? CostPlanIntervalType.MONTH,
   };
 
   // Reset selected template when region changes

src/locales/ar.json

@@ -18,7 +18,10 @@
     "defaultMessage": "قم بتشغيل خادم الوسائط الخاص بك من نوع Blossom وNIP-96 لـ {price}‏/شهر. يمكن إعداد Route96 في دقائق معدودة على اسم النطاق الخاص به، مع توفير مساحة تخزين دائمة وبروتوكول أمان طبقة النقل (TLS)."
   },
   "+JVG/q": {
-    "defaultMessage": "{n,plural,one{عام} other{سنوات}}"
+    "defaultMessage": "{n,plural,one{سنة} other{سنوات}}"
+  },
+  "+Mo6Oy": {
+    "defaultMessage": "قم بتشغيل عقدة بيتكوين كاملة على خادم افتراضي خاص في {regions}يمكنك الدفع بعملة البيتكوين عبر شبكة لايتنينج أو مباشرةً على البلوك تشين. ابتداءً من: {price} باستثناء ضريبة القيمة المضافة."
   },
   "+Qebzr": {
     "defaultMessage": "عنوان على السلسلة."
@@ -80,9 +83,6 @@
   "0RxidJ": {
     "defaultMessage": "LNURL"
   },
-  "0eyb8X": {
-    "defaultMessage": "قم بتشغيل عقدة بيتكوين كاملة على خادم افتراضي خاص في {regions}. ادفع بالبيتكوين عبر شبكة \"لايتنينغ\" أو مباشرةً على سلسلة الكتل. من {price}شهريًا، باستثناء ضريبة القيمة المضافة."
-  },
   "0gAiqM": {
     "defaultMessage": "استضافة خوادم افتراضية خاصة في أيرلندا."
   },
@@ -1316,6 +1316,9 @@
   "Uvhzx4": {
     "defaultMessage": "تم إيقاف التجديد التلقائي. يرجى تجديد الاشتراك يدويًا قبل انتهاء صلاحيته لتجنب أي انقطاع في الخدمة."
   },
+  "V/V4bz": {
+    "defaultMessage": "خدمة استضافة VPS في دبلن، أيرلندا، تبدأ من {price} باستثناء ضريبة القيمة المضافة. صمم المواصفات التي تريدها بنفسك حتى {maxCpu} وحدة معالجة مركزية افتراضية. الدفع بعملة البيتكوين عبر شبكة لايتنينغ أو مباشرة على البلوك تشين."
+  },
   "V7fgpY": {
     "defaultMessage": "جارٍ إكمال تسجيل الدخول…"
   },
@@ -1541,9 +1544,6 @@
   "c0b5XV": {
     "defaultMessage": "معدل/تقييم"
   },
-  "c3o/3B": {
-    "defaultMessage": "من {price} شهريًا، باستثناء ضريبة القيمة المضافة."
-  },
   "c5aQL+": {
     "defaultMessage": "اختر تطبيقًا، وأعطه اسمًا، وادفع. سيظهر التطبيق على نطاقه الخاص مع تفعيل بروتوكول TLS تلقائيًا — لا حاجة لتحديث نظام التشغيل، ولا حاجة لتكوين Docker، ولا حاجة لتجديد الشهادة."
   },
@@ -1613,9 +1613,6 @@
   "dSDJft": {
     "defaultMessage": "موقعنا في دبلن. صمم الآلة التي تريدها في الفترة ما بين {minCpu}–{maxCpu} وحدة معالجة مركزية افتراضية {minMemory}–{maxMemory}وادفع ثمنه بالبيتكوين."
   },
-  "dTTuZ+": {
-    "defaultMessage": "خدمة استضافة VPS في دبلن، أيرلندا، ابتداءً من {price}/شهريًا، بدون ضريبة القيمة المضافة. صمم المواصفات التي تناسبك. {maxCpu} وحدة معالجة مركزية افتراضية. الدفع بعملة البيتكوين عبر شبكة لايتنينج أو مباشرة."
-  },
   "dUQeuG": {
     "defaultMessage": "إنشاء حساب بمفتاح مرور"
   },
@@ -1649,6 +1646,9 @@
   "e4ehrh": {
     "defaultMessage": "قم بتكوين جهازك"
   },
+  "e55cj/": {
+    "defaultMessage": "من {price}، باستثناء ضريبة القيمة المضافة."
+  },
   "eKEL/g": {
     "defaultMessage": "قيد الانتظار."
   },
@@ -1694,6 +1694,9 @@
   "fNSGnl": {
     "defaultMessage": "سجّل الدخول لتقديم طلبك"
   },
+  "fNZGof": {
+    "defaultMessage": "خدمة استضافة VPS في لندن ابتداءً من {price} باستثناء ضريبة القيمة المضافة. {minCpu}-{maxCpu} وحدة معالجة مركزية افتراضية، بحد أقصى {maxDisk} {diskType}يمكنك الدفع بعملة البيتكوين عبر شبكة لايتنينغ أو مباشرة على البلوك تشين."
+  },
   "fblXmJ": {
     "defaultMessage": "اسم المثيل"
   },
@@ -1778,9 +1781,6 @@
   "huqKGl": {
     "defaultMessage": "إنشاء حساب"
   },
-  "i/LmLC": {
-    "defaultMessage": "خدمة استضافة VPS في لندن تبدأ من {price}شهريًا، باستثناء ضريبة القيمة المضافة. {minCpu}–{maxCpu} وحدة معالجة مركزية افتراضية، بحد أقصى {maxDisk} {diskType}. ادفع بالبيتكوين عبر شبكة لايتنينغ أو مباشرةً."
-  },
   "i2/SmH": {
     "defaultMessage": "تعمل عملية الفوترة مثل اشتراك الخادم الافتراضي الخاص (VPS)، ولا توجد رسوم إعداد لأي تطبيق."
   },
@@ -2105,6 +2105,9 @@
   "pgl1gp": {
     "defaultMessage": "Resize to {size}× base"
   },
+  "phIEA8": {
+    "defaultMessage": "خدمات استضافة VPS في كيبيك، كندا، تبدأ من {price} باستثناء ضريبة القيمة المضافة. {minCpu}–{maxCpu} وحدة معالجة مركزية افتراضية، بحد أقصى {maxDisk} {diskType}ادفع بالبيتكوين عبر شبكة لايتنينغ أو مباشرةً على البلوك تشين."
+  },
   "ps4K9r": {
     "defaultMessage": "What is Blossom?"
   },
@@ -2312,9 +2315,6 @@
   "v4Sg0C": {
     "defaultMessage": "استخدم مفتاح المستلم المخصص."
   },
-  "vIv3vC": {
-    "defaultMessage": "خدمة استضافة VPS في كيبيك، كندا، تبدأ من {price}شهريًا، باستثناء ضريبة القيمة المضافة. {minCpu}–{maxCpu} وحدة معالجة مركزية افتراضية، بحد أقصى {maxDisk} {diskType}. ادفع بالبيتكوين عبر شبكة \"لايتنينغ\" أو مباشرةً على البلوك تشين."
-  },
   "vONi+O": {
     "defaultMessage": "دولة"
   },

src/locales/de.json

@@ -20,6 +20,9 @@
   "+JVG/q": {
     "defaultMessage": "{n,plural,one{Jahr} other{Jahre}}"
   },
+  "+Mo6Oy": {
+    "defaultMessage": "Betreiben Sie einen vollständigen Bitcoin-Knoten auf einem VPS in {regions}Bezahlen Sie mit Bitcoin über das Lightning-Netzwerk oder direkt in der Blockchain. Ab {price} zzgl. Mehrwertsteuer."
+  },
   "+Qebzr": {
     "defaultMessage": "On-Chain-Adresse"
   },
@@ -80,9 +83,6 @@
   "0RxidJ": {
     "defaultMessage": "LNURL"
   },
-  "0eyb8X": {
-    "defaultMessage": "Betreiben Sie einen vollständigen Bitcoin-Knoten auf einem VPS in {regions}. Bezahlen Sie mit Bitcoin über das Lightning-Netzwerk oder direkt in der Bitcoin-Blockchain. Ab {price}pro Monat, zuzüglich Mehrwertsteuer."
-  },
   "0gAiqM": {
     "defaultMessage": "VPS-Hosting in Irland"
   },
@@ -1316,6 +1316,9 @@
   "Uvhzx4": {
     "defaultMessage": "Die automatische Verlängerung ist deaktiviert. Bitte verlängern Sie die Mitgliedschaft manuell, bevor sie ausläuft, um eine Unterbrechung zu vermeiden."
   },
+  "V/V4bz": {
+    "defaultMessage": "VPS-Hosting in Dublin, Irland, ab {price} zzgl. Mehrwertsteuer. Stellen Sie Ihre eigene Konfiguration zusammen, bis zu {maxCpu} vCPU. Zahlung in Bitcoin per Lightning Network oder direkt auf der Blockchain möglich."
+  },
   "V7fgpY": {
     "defaultMessage": "Anmeldung wird abgeschlossen…"
   },
@@ -1541,9 +1544,6 @@
   "c0b5XV": {
     "defaultMessage": "Bewertung"
   },
-  "c3o/3B": {
-    "defaultMessage": "Von {price} pro Monat, zuzüglich Mehrwertsteuer."
-  },
   "c5aQL+": {
     "defaultMessage": "Wählen Sie eine App aus, geben Sie ihr einen Namen und bezahlen Sie. Sie wird auf ihrem eigenen Hostnamen bereitgestellt, wobei TLS bereits aktiviert ist – es sind keine Betriebssystem-Updates erforderlich, keine Docker-Konfigurationen notwendig und keine Zertifikate müssen erneuert werden."
   },
@@ -1613,9 +1613,6 @@
   "dSDJft": {
     "defaultMessage": "Unser Standort in Dublin. Hier können Sie die Maschine Ihrer Wahl zusammenstellen. {minCpu}–{maxCpu} vCPU und {minMemory}–{maxMemory}und bezahlen Sie es mit Bitcoin."
   },
-  "dTTuZ+": {
-    "defaultMessage": "VPS-Hosting in Dublin, Irland, ab {price}pro Monat, zuzüglich Mehrwertsteuer. Stellen Sie Ihre eigene Konfiguration zusammen, bis zu {maxCpu} vCPU. Zahlung in Bitcoin über das Lightning-Netzwerk oder direkt auf der Blockchain möglich."
-  },
   "dUQeuG": {
     "defaultMessage": "Passkey-Konto erstellen"
   },
@@ -1649,6 +1646,9 @@
   "e4ehrh": {
     "defaultMessage": "Stelle deine Maschine zusammen"
   },
+  "e55cj/": {
+    "defaultMessage": "Von {price}zzgl. Mehrwertsteuer."
+  },
   "eKEL/g": {
     "defaultMessage": "Ausstehend"
   },
@@ -1694,6 +1694,9 @@
   "fNSGnl": {
     "defaultMessage": "Anmelden, um eine Bestellung aufzugeben"
   },
+  "fNZGof": {
+    "defaultMessage": "VPS-Hosting in London ab {price} zzgl. Mehrwertsteuer. {minCpu}–{maxCpu} virtuelle CPU, bis zu {maxDisk} {diskType}Bezahlen Sie mit Bitcoin über das Lightning-Netzwerk oder direkt auf der Blockchain."
+  },
   "fblXmJ": {
     "defaultMessage": "Instanzname"
   },
@@ -1778,9 +1781,6 @@
   "huqKGl": {
     "defaultMessage": "Konto erstellen"
   },
-  "i/LmLC": {
-    "defaultMessage": "VPS-Hosting in London ab {price}pro Monat, zuzüglich Mehrwertsteuer. {minCpu}–{maxCpu} vCPU, bis zu {maxDisk} {diskType}Bezahlen Sie in Bitcoin über das Lightning-Netzwerk oder direkt in der Bitcoin-Blockchain."
-  },
   "i2/SmH": {
     "defaultMessage": "Die Abrechnung funktioniert wie ein VPS-Abonnement, wobei für keine der Apps eine Einrichtungsgebühr anfällt."
   },
@@ -2105,6 +2105,9 @@
   "pgl1gp": {
     "defaultMessage": "Resize to {size}× base"
   },
+  "phIEA8": {
+    "defaultMessage": "VPS-Hosting in Québec, Kanada, ab {price} zzgl. Mehrwertsteuer. {minCpu}–{maxCpu} virtuelle CPU, bis zu {maxDisk} {diskType}Sie können mit Bitcoin über das Lightning-Netzwerk oder direkt (on-chain) bezahlen."
+  },
   "ps4K9r": {
     "defaultMessage": "What is Blossom?"
   },
@@ -2312,9 +2315,6 @@
   "v4Sg0C": {
     "defaultMessage": "Benutzen Sie einen benutzerdefinierten Empfängerschlüssel."
   },
-  "vIv3vC": {
-    "defaultMessage": "VPS-Hosting in Québec, Kanada, ab {price}pro Monat, zuzüglich Mehrwertsteuer. {minCpu}–{maxCpu} vCPU, bis zu {maxDisk} {diskType}Bezahlen Sie mit Bitcoin über das Lightning-Netzwerk oder direkt in der Bitcoin-Blockchain."
-  },
   "vONi+O": {
     "defaultMessage": "Land"
   },