refactor: payments providers

frontend/src/lib/components/patterns/webapp/PaymentMethodGrid.svelte

@@ -1,33 +1,24 @@
 <script>
-  import { Bitcoin, CreditCard } from "$components/ui/icons.js";
+  import * as Icons from "$components/ui/icons.js";
 
   export let methods = [];
   export let selectedMethod = "";
   export let t = (key) => key;
   export let onSelect = () => {};
 
-  function methodMeta(method) {
-    const id = String(method?.id || "").toLowerCase();
-    if (id.includes("platega_sbp"))
-      return { title: t("wa_method_platega_sbp_card"), icon: CreditCard };
-    if (id.includes("platega_crypto"))
-      return { title: t("wa_method_platega_crypto"), icon: Bitcoin };
-    if (id.includes("yookassa") || id.includes("card"))
-      return { title: t("pay_with_yookassa_button"), icon: null };
-    if (id.includes("severpay")) return { title: t("pay_with_severpay_button"), icon: null };
-    if (id.includes("wata")) return { title: t("pay_with_wata_button"), icon: null };
-    if (id.includes("freekassa")) return { title: t("pay_with_sbp_button"), icon: null };
-    if (id.includes("cryptopay") || id.includes("crypto"))
-      return { title: t("pay_with_cryptopay_button"), icon: null };
-    if (id.includes("stars")) return { title: t("pay_with_stars_button"), icon: null };
-    if (id.includes("sbp")) return { title: t("pay_with_sbp_button"), icon: null };
-    return { title: t("wa_method_other_title"), icon: null };
+  function methodTitle(method) {
+    return method?.name || t("wa_method_other_title");
+  }
+
+  function methodIcon(method) {
+    const iconName = String(method?.icon || "").trim();
+    return iconName ? Icons[iconName] || null : null;
   }
 </script>
 
 <div class="method-grid">
   {#each methods as method}
-    {@const meta = methodMeta(method)}
+    {@const icon = methodIcon(method)}
     <button
       class:active={selectedMethod === method.id}
       class="method-card"
@@ -35,10 +26,10 @@
       onclick={() => onSelect(method.id)}
     >
       <span class="method-card-main">
-        {#if meta.icon}
-          <svelte:component this={meta.icon} size={19} />
+        {#if icon}
+          <svelte:component this={icon} size={19} />
         {/if}
-        <strong>{meta.title}</strong>
+        <strong>{methodTitle(method)}</strong>
       </span>
     </button>
   {/each}

frontend/src/lib/components/ui/icons.js

@@ -42,6 +42,7 @@ export {
   RefreshCw,
   Repeat2,
   Save,
+  Search,
   Send,
   Server,
   Settings,

frontend/src/lib/webapp/previewMock.js

@@ -162,10 +162,10 @@ export const DEV_MOCK = {
       { months: 12, price: 2690, currency: "RUB", title: "12 месяцев" },
     ],
     payment_methods: [
-      { id: "yookassa", name: "Карта" },
-      { id: "platega_sbp", name: "Telegram Pay" },
-      { id: "cryptopay", name: "Криптовалюта" },
-      { id: "freekassa", name: "Другие способы" },
+      { id: "yookassa", name: "Карта", icon: "CreditCard" },
+      { id: "platega_sbp", name: "Telegram Pay", icon: "CreditCard" },
+      { id: "cryptopay", name: "Криптовалюта", icon: "Bitcoin" },
+      { id: "freekassa", name: "Другие способы", icon: "Smartphone" },
     ],
     referral: {
       code: "ABCD1234",