Dodaj widok Pomoc i kontakt w panelu uzytkownika

frontend/src/App.tsx

@@ -9,7 +9,7 @@ const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
 const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
 const SMS_VERIFICATION_CODE = '123456';
 
-type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'map' | 'login' | 'account' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
+type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'map' | 'login' | 'account' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
 
 type MessageThreadListing = {
   listingId: number;
@@ -110,7 +110,7 @@ const LIVE_LISTINGS_REFRESH_MS = 15000;
 
 const PROTECTED_VIEWS = new Set<View>([
   'add', 'admin', 'account', 'accountPriceAlerts', 'accountMeetings', 'accountListings', 'accountSettings',
-  'accountSecurity', 'accountProfileEdit', 'accountPublicProfile', 'notifications', 'favorites', 'messages', 'comparison',
+  'accountSecurity', 'accountProfileEdit', 'accountPublicProfile', 'accountHelpContact', 'notifications', 'favorites', 'messages', 'comparison',
 ]);
 
 type NotificationCategory = 'listing' | 'messages' | 'system';
@@ -2914,6 +2914,7 @@ function App() {
         {view === 'accountSecurity' && <AccountSecurityPage onNavigate={navigate} activeView={view} />}
         {view === 'accountProfileEdit' && <AccountProfileEditPage onNavigate={navigate} activeView={view} />}
         {view === 'accountPublicProfile' && <AccountPublicProfilePage onNavigate={navigate} activeView={view} />}
+        {view === 'accountHelpContact' && <AccountHelpContactPage onNavigate={navigate} activeView={view} />}
         {view === 'notifications' && <NotificationsPage />}
         {view === 'messages' && (
           <MessagesPage
@@ -4412,6 +4413,7 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
   const { user } = useAuth();
   const isSettingsView = activeView === 'accountSettings' || activeView === 'accountProfileEdit' || activeView === 'accountPublicProfile';
   const isSecurityView = activeView === 'accountSecurity';
+  const isHelpContactView = activeView === 'accountHelpContact';
   const isDashboardView = activeView === 'account';
   const isPriceAlertsView = activeView === 'accountPriceAlerts';
   const isMeetingsView = activeView === 'accountMeetings';
@@ -4483,7 +4485,7 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
         <button className={isSettingsView ? 'active' : ''} onClick={() => onNavigate('accountSettings')}><Icon name="gear" /> Dane i ustawienia</button>
         <button className={activeView === 'notifications' ? 'active' : ''} onClick={() => onNavigate('notifications')}><Icon name="bell" /> Powiadomienia</button>
         <button className={isSecurityView ? 'active' : ''} onClick={() => onNavigate('accountSecurity')}><Icon name="shield" /> Bezpieczeństwo</button>
-        <button><Icon name="phone" /> Pomoc i kontakt</button>
+        <button className={isHelpContactView ? 'active' : ''} onClick={() => onNavigate('accountHelpContact')}><Icon name="phone" /> Pomoc i kontakt</button>
       </div>
 
       <div className="account-premium-card">
@@ -4942,6 +4944,189 @@ function AccountDashboardPage({ onNavigate, activeView }: { onNavigate: (view: V
   );
 }
 
+function AccountHelpContactPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+  const supportChannels = [
+    {
+      id: 'live-chat',
+      icon: 'message',
+      iconTone: 'green',
+      title: 'Czat na żywo',
+      badge: 'Najszybsza pomoc',
+      description: 'Porozmawiaj z naszym konsultantem w czasie rzeczywistym.',
+      action: 'Dostępny 8:00 - 20:00',
+    },
+    {
+      id: 'email',
+      icon: 'mail',
+      iconTone: 'blue',
+      title: 'E-mail',
+      description: 'Napisz do nas, odpowiemy najszybciej jak to możliwe.',
+      action: 'bok@mieszko.pl',
+    },
+    {
+      id: 'phone',
+      icon: 'phone',
+      iconTone: 'violet',
+      title: 'Telefon',
+      description: 'Zadzwoń do nas, chętnie odpowiemy na Twoje pytania.',
+      action: '+48 22 123 45 67',
+    },
+    {
+      id: 'form',
+      icon: 'document',
+      iconTone: 'orange',
+      title: 'Formularz kontaktowy',
+      description: 'Wyślij nam wiadomość, a my skontaktujemy się z Tobą.',
+      action: 'Przejdź do formularza',
+    },
+  ] as const;
+
+  const faqItems = [
+    'Jak dodać ogłoszenie?',
+    'Ile kosztuje dodanie ogłoszenia?',
+    'Jak wyróżnić moje ogłoszenie?',
+    'Jak edytować lub usunąć ogłoszenie?',
+    'Jak działa porównywarka mieszkań?',
+    'Jak ustawić alerty cenowe?',
+  ] as const;
+
+  const moreHelpCards = [
+    {
+      id: 'guides',
+      icon: 'document',
+      iconTone: 'green',
+      title: 'Poradniki',
+      description: 'Praktyczne artykuły i wskazówki dotyczące kupna, sprzedaży i wynajmu nieruchomości.',
+      action: 'Zobacz poradniki',
+    },
+    {
+      id: 'security',
+      icon: 'shield',
+      iconTone: 'gold',
+      title: 'Bezpieczeństwo',
+      description: 'Dowiedz się jak bezpiecznie korzystać z serwisu i unikać oszustw.',
+      action: 'Zasady bezpieczeństwa',
+    },
+    {
+      id: 'rules',
+      icon: 'list',
+      iconTone: 'blue',
+      title: 'Regulamin i zasady',
+      description: 'Zapoznaj się z regulaminem serwisu oraz zasadami korzystania.',
+      action: 'Przeczytaj regulamin',
+    },
+    {
+      id: 'report',
+      icon: 'warning',
+      iconTone: 'red',
+      title: 'Zgłoś problem',
+      description: 'Zgłoś nieodpowiednie treści lub problemy techniczne.',
+      action: 'Zgłoś',
+    },
+  ] as const;
+
+  return (
+    <section className="account-page account-help-contact-page" aria-label="Pomoc i kontakt">
+      <div className="account-layout">
+        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+
+        <div className="account-main">
+          <section className="help-contact-panel">
+            <header className="help-contact-header">
+              <div>
+                <h1>Pomoc i kontakt</h1>
+                <p>Jesteśmy tutaj, aby Ci pomóc. Skontaktuj się z nami lub znajdź odpowiedzi na najczęściej zadawane pytania.</p>
+              </div>
+              <div className="help-contact-visual" aria-hidden="true">
+                <span><Icon name="mail" /></span>
+                <strong><Icon name="phone" /></strong>
+                <span><Icon name="message" /></span>
+              </div>
+            </header>
+
+            <section className="help-contact-section">
+              <h2>Jak możemy Ci pomóc?</h2>
+              <div className="help-contact-channel-grid">
+                {supportChannels.map((channel) => (
+                  <article key={channel.id} className="help-contact-channel-card">
+                    <div className="help-contact-channel-head">
+                      <span className={`help-contact-channel-icon ${channel.iconTone}`}><Icon name={channel.icon} /></span>
+                      <div>
+                        <h3>{channel.title}</h3>
+                        {'badge' in channel && channel.badge ? <em>{channel.badge}</em> : null}
+                      </div>
+                    </div>
+                    <p>{channel.description}</p>
+                    <button type="button" className="help-contact-channel-action">
+                      {channel.action}
+                      <Icon name="chevron" />
+                    </button>
+                  </article>
+                ))}
+              </div>
+            </section>
+
+            <section className="help-contact-section help-contact-middle-grid">
+              <article className="help-contact-faq-card">
+                <header>
+                  <h2>Najczęściej zadawane pytania</h2>
+                  <button type="button">Zobacz wszystkie <Icon name="arrow" /></button>
+                </header>
+                <div className="help-contact-faq-list">
+                  {faqItems.map((question) => (
+                    <details key={question}>
+                      <summary>
+                        <span>{question}</span>
+                        <Icon name="chevron" />
+                      </summary>
+                      <p>Znajdziesz odpowiedź w naszym centrum pomocy. W razie potrzeby skorzystaj z formularza kontaktowego obok.</p>
+                    </details>
+                  ))}
+                </div>
+              </article>
+
+              <article className="help-contact-form-card">
+                <h2>Napisz do nas</h2>
+                <form>
+                  <div className="help-contact-form-row">
+                    <input type="text" placeholder="Imię i nazwisko" />
+                    <input type="email" placeholder="Adres e-mail" />
+                  </div>
+                  <select defaultValue="">
+                    <option value="" disabled>Temat</option>
+                    <option value="ogloszenie">Pytanie o ogłoszenie</option>
+                    <option value="konto">Problemy z kontem</option>
+                    <option value="platnosci">Płatności i faktury</option>
+                    <option value="techniczne">Problem techniczny</option>
+                  </select>
+                  <textarea rows={5} placeholder="Wiadomość&#10;Opisz swój problem lub pytanie..." />
+                  <button type="button">Wyślij wiadomość</button>
+                </form>
+              </article>
+            </section>
+
+            <section className="help-contact-section">
+              <h2>Więcej sposobów na pomoc</h2>
+              <div className="help-contact-more-grid">
+                {moreHelpCards.map((card) => (
+                  <article key={card.id} className="help-contact-more-card">
+                    <span className={`help-contact-more-icon ${card.iconTone}`}><Icon name={card.icon} /></span>
+                    <div>
+                      <h3>{card.title}</h3>
+                      <p>{card.description}</p>
+                      <button type="button">{card.action} <Icon name="arrow" /></button>
+                    </div>
+                  </article>
+                ))}
+              </div>
+            </section>
+          </section>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function AccountPriceAlertsPage({
   onNavigate,
   activeView,

frontend/src/styles.css

@@ -13948,6 +13948,412 @@ svg {
   align-content: start;
 }
 
+.account-help-contact-page {
+  background: linear-gradient(180deg, #f6f8fb 0%, #eef3f7 100%);
+}
+
+.help-contact-panel {
+  background: #f6f8fb;
+  border: 1px solid #dee7f0;
+  border-radius: 16px;
+  display: grid;
+  gap: 18px;
+  padding: 18px;
+}
+
+.help-contact-header {
+  align-items: start;
+  display: grid;
+  gap: 18px;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.help-contact-header h1 {
+  color: #192b45;
+  font-size: 38px;
+  line-height: 1.02;
+  margin: 0;
+}
+
+.help-contact-header p {
+  color: #5f7187;
+  font-size: 14px;
+  font-weight: 750;
+  line-height: 1.45;
+  margin: 10px 0 0;
+  max-width: 640px;
+}
+
+.help-contact-visual {
+  align-items: center;
+  background: radial-gradient(circle at 20% 20%, rgba(12, 165, 95, 0.13), rgba(12, 165, 95, 0));
+  border-radius: 999px;
+  display: inline-flex;
+  gap: 14px;
+  padding: 10px 16px;
+}
+
+.help-contact-visual span,
+.help-contact-visual strong {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.help-contact-visual span {
+  background: #f4fbf7;
+  border: 1px solid #d9ece2;
+  color: #44aa75;
+  font-size: 18px;
+  height: 34px;
+  width: 34px;
+}
+
+.help-contact-visual strong {
+  background: #ddf6e8;
+  border: 1px solid #c9ead9;
+  color: #109a5a;
+  font-size: 22px;
+  font-weight: 700;
+  height: 48px;
+  width: 48px;
+}
+
+.help-contact-section {
+  background: #ffffff;
+  border: 1px solid #dfe7f0;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.help-contact-section > h2 {
+  color: #1d2f49;
+  font-size: 30px;
+  margin: 0 0 14px;
+}
+
+.help-contact-channel-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.help-contact-channel-card {
+  background: #ffffff;
+  border: 1px solid #e3e9f1;
+  border-radius: 10px;
+  display: grid;
+  gap: 10px;
+  min-height: 190px;
+  padding: 14px;
+}
+
+.help-contact-channel-head {
+  align-items: start;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 40px minmax(0, 1fr);
+}
+
+.help-contact-channel-icon,
+.help-contact-more-icon {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  font-size: 19px;
+  height: 40px;
+  justify-content: center;
+  width: 40px;
+}
+
+.help-contact-channel-icon.green,
+.help-contact-more-icon.green {
+  background: #e6f8ef;
+  color: #109a5a;
+}
+
+.help-contact-channel-icon.blue,
+.help-contact-more-icon.blue {
+  background: #e8f0ff;
+  color: #2f6de3;
+}
+
+.help-contact-channel-icon.violet {
+  background: #f0ecff;
+  color: #7454d8;
+}
+
+.help-contact-channel-icon.orange {
+  background: #fff0df;
+  color: #ef9123;
+}
+
+.help-contact-more-icon.gold {
+  background: #fff4d8;
+  color: #c78907;
+}
+
+.help-contact-more-icon.red {
+  background: #ffe7eb;
+  color: #d63c5f;
+}
+
+.help-contact-channel-head h3 {
+  color: #1f3049;
+  font-size: 16px;
+  margin: 0;
+}
+
+.help-contact-channel-head em {
+  background: #ddf5e8;
+  border-radius: 999px;
+  color: #109253;
+  display: inline-block;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 900;
+  margin-top: 5px;
+  padding: 3px 7px;
+}
+
+.help-contact-channel-card p {
+  color: #5f7187;
+  font-size: 13px;
+  font-weight: 750;
+  line-height: 1.42;
+  margin: 0;
+}
+
+.help-contact-channel-action {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #e5ecf4;
+  color: #3e546f;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 850;
+  justify-content: space-between;
+  margin-top: auto;
+  min-height: 40px;
+  padding: 9px 0 0;
+  width: 100%;
+}
+
+.help-contact-channel-action svg {
+  font-size: 15px;
+  transform: rotate(-90deg);
+}
+
+.help-contact-middle-grid {
+  background: transparent;
+  border: 0;
+  display: grid;
+  gap: 14px;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+  padding: 0;
+}
+
+.help-contact-faq-card,
+.help-contact-form-card {
+  background: #ffffff;
+  border: 1px solid #dfe7f0;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.help-contact-faq-card header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.help-contact-faq-card h2,
+.help-contact-form-card h2 {
+  color: #1d2f49;
+  font-size: 24px;
+  margin: 0;
+}
+
+.help-contact-faq-card header button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: #0f9c5b;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 900;
+  gap: 6px;
+  padding: 0;
+}
+
+.help-contact-faq-card header button svg,
+.help-contact-more-card button svg {
+  font-size: 14px;
+}
+
+.help-contact-faq-list {
+  display: grid;
+  gap: 8px;
+}
+
+.help-contact-faq-list details {
+  border: 1px solid #e3eaf2;
+  border-radius: 8px;
+  padding: 0 12px;
+}
+
+.help-contact-faq-list summary {
+  align-items: center;
+  color: #2a3d57;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-weight: 800;
+  justify-content: space-between;
+  list-style: none;
+  min-height: 44px;
+}
+
+.help-contact-faq-list summary::-webkit-details-marker {
+  display: none;
+}
+
+.help-contact-faq-list summary svg {
+  color: #7a8ca2;
+  font-size: 14px;
+  transform: rotate(0deg);
+  transition: transform 0.16s ease;
+}
+
+.help-contact-faq-list details[open] summary svg {
+  transform: rotate(180deg);
+}
+
+.help-contact-faq-list details p {
+  color: #60748c;
+  font-size: 12px;
+  font-weight: 740;
+  line-height: 1.42;
+  margin: 0 0 12px;
+}
+
+.help-contact-form-card form {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.help-contact-form-row {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.help-contact-form-card input,
+.help-contact-form-card select,
+.help-contact-form-card textarea {
+  background: #fbfdff;
+  border: 1px solid #dde5ef;
+  border-radius: 8px;
+  color: #2a3d57;
+  font-size: 13px;
+  font-weight: 760;
+  min-height: 44px;
+  padding: 0 12px;
+}
+
+.help-contact-form-card textarea {
+  min-height: 128px;
+  padding: 11px 12px;
+  resize: vertical;
+}
+
+.help-contact-form-card button {
+  background: linear-gradient(90deg, #10a15e 0%, #0fbf6b 100%);
+  border: 0;
+  border-radius: 8px;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 900;
+  min-height: 44px;
+}
+
+.help-contact-more-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.help-contact-more-card {
+  background: #ffffff;
+  border: 1px solid #e3eaf2;
+  border-radius: 10px;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: auto minmax(0, 1fr);
+  min-height: 180px;
+  padding: 14px;
+}
+
+.help-contact-more-card h3 {
+  color: #1f3049;
+  font-size: 15px;
+  margin: 0;
+}
+
+.help-contact-more-card p {
+  color: #5f7187;
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1.42;
+  margin: 8px 0 14px;
+}
+
+.help-contact-more-card button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: #109253;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 900;
+  gap: 6px;
+  padding: 0;
+}
+
+@media (max-width: 1280px) {
+  .help-contact-channel-grid,
+  .help-contact-more-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .help-contact-middle-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .help-contact-header {
+    grid-template-columns: 1fr;
+  }
+
+  .help-contact-header h1,
+  .help-contact-section > h2,
+  .help-contact-faq-card h2,
+  .help-contact-form-card h2 {
+    font-size: 24px;
+  }
+
+  .help-contact-form-row,
+  .help-contact-channel-grid,
+  .help-contact-more-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .account-listings-page {
   background: linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%);
 }