feat: referal support

src/pages/AccountPage.tsx

@@ -24,6 +24,7 @@ export function AccountPage() {
   const [loadingMeta, setLoadingMeta] = useState(true);
   const [pending, setPending] = useState<Device | null>(null);
   const [isQrOpen, setIsQrOpen] = useState(false);
+  const [isReferralQrOpen, setIsReferralQrOpen] = useState(false);
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -53,8 +54,11 @@ export function AccountPage() {
 
   const handleDelete = (device: Device) => setPending(device);
 
-  const copySubscriptionLink = async () => {
-    const link = subscription?.subscription_link;
+  const referralLink = userInfo?.referal_code
+    ? `${window.location.origin}/?ref=${encodeURIComponent(userInfo.referal_code)}`
+    : null;
+
+  const copyLink = async (link: string | null, label: string) => {
     if (!link) return;
     try {
       if (navigator.clipboard?.writeText) {
@@ -69,7 +73,7 @@ export function AccountPage() {
         document.execCommand('copy');
         input.remove();
       }
-      showToast('Ссылка подписки скопирована');
+      showToast(`${label} скопирована`);
     } catch {
       showToast('Не удалось скопировать ссылку');
     }
@@ -148,7 +152,49 @@ export function AccountPage() {
               >
                 QR
               </button>
-              <button type="button" className="copy-link" onClick={() => void copySubscriptionLink()}>
+              <button
+                type="button"
+                className="copy-link"
+                aria-label="Копировать ссылку подписки"
+                onClick={() => void copyLink(subscription.subscription_link, 'Ссылка подписки')}
+              >
+                Копировать
+              </button>
+            </div>
+          </section>
+        </Reveal>
+      ) : null}
+
+      {!loadingMeta && referralLink ? (
+        <Reveal>
+          <section className="subscription-link" aria-label="Реферальная ссылка">
+            <div className="subscription-emblem" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="8" r="3" />
+                <path d="M6 20c.7-3.1 2.7-5 6-5s5.3 1.9 6 5M19 8h3M20.5 6.5v3" />
+              </svg>
+            </div>
+            <div className="subscription-copy">
+              <div className="subscription-label">Реферальная ссылка</div>
+              <span className="subscription-url" title={referralLink}>
+                {referralLink}
+              </span>
+            </div>
+            <div className="subscription-actions">
+              <button
+                type="button"
+                className="subscription-qr-button"
+                aria-label="Показать QR-код реферальной ссылки"
+                onClick={() => setIsReferralQrOpen(true)}
+              >
+                QR
+              </button>
+              <button
+                type="button"
+                className="copy-link"
+                aria-label="Копировать реферальную ссылку"
+                onClick={() => void copyLink(referralLink, 'Реферальная ссылка')}
+              >
                 Копировать
               </button>
             </div>
@@ -226,6 +272,12 @@ export function AccountPage() {
         link={isQrOpen ? subscription?.subscription_link ?? null : null}
         onClose={() => setIsQrOpen(false)}
       />
+      <SubscriptionQrModal
+        link={isReferralQrOpen ? referralLink : null}
+        label="Реферальная ссылка"
+        imageAlt="QR-код реферальной ссылки"
+        onClose={() => setIsReferralQrOpen(false)}
+      />
     </Shell>
   );
 }