fix: bind HWID top-ups to subscription periods

frontend/src/webapp/PaymentDialogs.svelte

@@ -197,6 +197,16 @@
             <p>{subscriptionPurchaseDescription}</p>
           </div>
         {/if}
+        {#if subscription?.active && Number(subscription?.extra_hwid_devices || 0) > 0}
+          <div class="subscription-purchase-description">
+            <p>
+              {t("wa_hwid_devices_renewal_notice", {
+                count: Number(subscription.extra_hwid_devices || 0),
+                date: subscription.extra_hwid_devices_valid_until_text || "",
+              })}
+            </p>
+          </div>
+        {/if}
         <div class="period-grid period-grid-two-columns">
           {#each selectedTariffPlans as plan}
             <button
@@ -251,6 +261,16 @@
           <p>{subscriptionPurchaseDescription}</p>
         </div>
       {/if}
+      {#if subscription?.active && Number(subscription?.extra_hwid_devices || 0) > 0}
+        <div class="subscription-purchase-description">
+          <p>
+            {t("wa_hwid_devices_renewal_notice", {
+              count: Number(subscription.extra_hwid_devices || 0),
+              date: subscription.extra_hwid_devices_valid_until_text || "",
+            })}
+          </p>
+        </div>
+      {/if}
       <div class="period-grid period-grid-two-columns">
         {#each plans as plan}
           <button

frontend/src/webapp/TariffDialogs.svelte

@@ -369,6 +369,25 @@
     {#if !deviceTopupOptions}
       <DialogOptionsSkeleton label={t("wa_tariff_options_loading")} rows={3} />
     {:else if deviceTopupOptions?.plans?.length}
+      {#if deviceTopupOptions?.renewal_available}
+        <div class="topup-carryover-note">
+          <p>
+            {t("wa_hwid_devices_renewal_offer", {
+              count: Number(deviceTopupOptions.renewal_recommended_count || 0),
+              date: deviceTopupOptions.extra_hwid_devices_valid_until_text || "",
+            })}
+          </p>
+        </div>
+      {:else if Number(deviceTopupOptions?.extra_hwid_devices || 0) > 0 && deviceTopupOptions?.extra_hwid_devices_valid_until_text}
+        <div class="topup-carryover-note">
+          <p>
+            {t("wa_hwid_devices_valid_until", {
+              count: Number(deviceTopupOptions.extra_hwid_devices || 0),
+              date: deviceTopupOptions.extra_hwid_devices_valid_until_text,
+            })}
+          </p>
+        </div>
+      {/if}
       <div class="option-list">
         {#each deviceTopupOptions.plans as plan}
           <button

frontend/src/webapp/screens/DevicesScreen.svelte

@@ -46,6 +46,14 @@
       value={devicesPercent(devicesData)}
       label={t("wa_devices_title")}
     />
+    {#if Number(subscription?.extra_hwid_devices || 0) > 0 && subscription?.extra_hwid_devices_valid_until_text}
+      <p class="devices-topup-validity">
+        {t("wa_hwid_devices_valid_until", {
+          count: Number(subscription.extra_hwid_devices || 0),
+          date: subscription.extra_hwid_devices_valid_until_text,
+        })}
+      </p>
+    {/if}
     {#if subscription?.active && subscription?.max_devices !== 0 && subscription?.can_topup_devices}
       <Button variant="secondary" class="wide" onclick={openDeviceTopupModal}>
         <Plus size={17} />