[frontend] Add public text

kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-info-dialog/email-bot-info-dialog.component.html

@@ -1 +1,56 @@
-<p>email-bot-info-dialog works!</p>
+<mat-dialog-content>
+  <div class="container">
+    <h2>How to communicate with the hood via E-Mail?</h2>
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title
+            >How to subscribe to the hood via E-Mail?</mat-panel-title
+          >
+        </mat-expansion-panel-header>
+        <ol>
+          <li>
+            Enter your E-Mail address in the input field below
+            <strong>Subscribe to E-Mail list</strong>. This will send you a
+            confirmation mail.
+          </li>
+          <li>
+            Check your E-mail inbox for an e-mail with the confirmation link.
+            Click the link to confirm your subscription. Done!
+          </li>
+        </ol>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title
+            >How to send a broadcast message to the hood?</mat-panel-title
+          >
+        </mat-expansion-panel-header>
+        <p>
+          Write an e-mail to one of the addresses below the
+          <strong>Send e-mail to hood</strong> label. Your message should be in
+          the body of the e-mail, the rest (e.g. Subject) is irrelevant and will
+          be stripped.
+        </p>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>How to receive messages?</mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>
+          Subscribe to the hood and you will automatically receive e-mails when
+          someone sends a broadcast message on another platform.
+        </p>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>How to stop receiving messages?</mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>
+          In each e-mail you receive from the hood there is also a link to
+          unsubscribe to the hood. Just click it to unsubscribe.
+        </p>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+</mat-dialog-content>

kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-info-dialog/email-bot-info-dialog.component.scss

@@ -0,0 +1,4 @@
+.container {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}

kibicara-frontend/src/app/platforms/platforms-info-page/platforms-info-dialog/platforms-info-dialog.component.html

@@ -1 +0,0 @@
-<p>platforms-info-dialog works!</p>

kibicara-frontend/src/app/platforms/platforms-info-page/platforms-info-dialog/platforms-info-dialog.component.ts

@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-platforms-info-dialog',
-  templateUrl: './platforms-info-dialog.component.html',
-  styleUrls: ['./platforms-info-dialog.component.scss'],
-})
-export class PlatformsInfoDialogComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}

kibicara-frontend/src/app/platforms/platforms-info-page/platforms-info-page.component.html

@@ -1,15 +1,4 @@
-<h2>
+<h2>Platforms - choose one, get all hood messages</h2>
-  Platforms - choose one, get all hood messages
-  <button mat-icon-button aria-label="How to use">
-    <mat-icon
-      matTooltip="What does this mean?"
-      class="info-button"
-      (click)="onInfoClick()"
-      >info</mat-icon
-    >
-  </button>
-</h2>
-
 <div class="container">
   <app-twitter-bot-card [hoodId]="hoodId"></app-twitter-bot-card>
   <app-telegram-bot-card [hoodId]="hoodId"></app-telegram-bot-card>

kibicara-frontend/src/app/platforms/platforms.module.ts

@@ -15,7 +15,6 @@ import { PlatformsInfoPageComponent } from './platforms-info-page/platforms-info
 import { EmailBotCardComponent } from './email/email-bot-card/email-bot-card.component';
 import { TelegramBotCardComponent } from './telegram/telegram-bot-card/telegram-bot-card.component';
 import { TwitterBotCardComponent } from './twitter/twitter-bot-card/twitter-bot-card.component';
-import { PlatformsInfoDialogComponent } from './platforms-info-page/platforms-info-dialog/platforms-info-dialog.component';
 import { EmailBotInfoDialogComponent } from './email/email-bot-card/email-bot-info-dialog/email-bot-info-dialog.component';
 import { TelegramBotInfoDialogComponent } from './telegram/telegram-bot-card/telegram-bot-info-dialog/telegram-bot-info-dialog.component';
 import { TwitterBotInfoDialogComponent } from './twitter/twitter-bot-card/twitter-bot-info-dialog/twitter-bot-info-dialog.component';
@@ -38,7 +37,6 @@ import { EmailUnsubscribeComponent } from './email/email-unsubscribe/email-unsub
     EmailBotCardComponent,
     TelegramBotCardComponent,
     TwitterBotCardComponent,
-    PlatformsInfoDialogComponent,
     EmailBotInfoDialogComponent,
     TelegramBotInfoDialogComponent,
     TwitterBotInfoDialogComponent,

kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-info-dialog/telegram-bot-info-dialog.component.html

@@ -1 +1,53 @@
-<p>telegram-bot-info-dialog works!</p>
+<mat-dialog-content>
+  <div class="container">
+    <h2>How to communicate with the hood via Telegram?</h2>
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title
+            >How to subscribe to the hood via Telegram?</mat-panel-title
+          >
+        </mat-expansion-panel-header>
+        <ol>
+          <li>
+            Click on the telegram bot name that is shown in the telegram card.
+          </li>
+          <li>
+            Start messaging the telegram bot that the link leads to by writing a
+            message containing only the word <strong>/start</strong>. Done!
+          </li>
+        </ol>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title
+            >How to send a broadcast message to the hood?</mat-panel-title
+          >
+        </mat-expansion-panel-header>
+        <p>
+          Write a direct message to the bot. This message will be broadcasted to
+          the other platforms.
+        </p>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>How to receive messages?</mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>
+          If you subscribed to the bot, you will automatically receive the
+          messages of your hood from the bot.
+        </p>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>How to stop receiving messages?</mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>
+          Write a message with content <strong>/stop</strong> to the bot. You
+          should receive a message from the bot which confirms that the
+          unsubscription was successful.
+        </p>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+</mat-dialog-content>

kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-info-dialog/telegram-bot-info-dialog.component.scss

@@ -0,0 +1,4 @@
+.container {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}

kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html

@@ -6,7 +6,7 @@
         Twitter
         <button mat-icon-button aria-label="How to use">
           <mat-icon
-            matTooltip="How to add an twitter bot to your hood"
+            matTooltip="How to send and receive hood broadcast messages with twitteu"
             class="info-button"
             (click)="onInfoClick()"
             >info</mat-icon

kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-info-dialog/twitter-bot-info-dialog.component.html

@@ -1 +1,51 @@
-<p>twitter-bot-info-dialog works!</p>
+<mat-dialog-content>
+  <div class="container">
+    <h2>How to communicate with the hood via Twitter?</h2>
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title
+            >How to subscribe to the hood via Twitter?</mat-panel-title
+          >
+        </mat-expansion-panel-header>
+        <p>
+          Click on the twitter bot name that is shown in the twitter card. Just
+          follow the twitter account that the link leads to.
+        </p>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title
+            >How to send a broadcast message to the hood?</mat-panel-title
+          >
+        </mat-expansion-panel-header>
+        <p>You have two options:</p>
+        <ul>
+          <li>
+            Mention the bot in your tweet. The message of your tweet will be
+            broadcasted.
+          </li>
+          <li>
+            Write a direct message to the bot. The message will be broadcasted.
+          </li>
+        </ul>
+        <p>Both options have the equal result.</p>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>How to receive messages?</mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>
+          Follow one of the twitter accounts in the twitter card. It will
+          broadcast all messages it receives by tweeting the content.
+        </p>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>How to stop receiving messages?</mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>Just unfollow the twitter accounts that you previously followed.</p>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </div>
+</mat-dialog-content>

kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-info-dialog/twitter-bot-info-dialog.component.scss

@@ -0,0 +1,4 @@
+.container {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}