@rtsee/ngx 0.0.78 → 0.0.80

package/dist/ngx/fesm2022/rtsee-ngx.mjs

@@ -8,7 +8,7 @@ import { Select } from 'primeng/select';
 import { FloatLabel } from 'primeng/floatlabel';
 import * as i4 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
-import { interval, tap, filter } from 'rxjs';
+import { interval, tap, map, filter } from 'rxjs';
 import { RTSeeTextLabelKeys, hasPermission, RTSeePeerPermissions } from '@rtsee/core';
 import * as i2$2 from 'primeng/message';
 import { Message, MessageModule } from 'primeng/message';
@@ -27,6 +27,9 @@ import { InputGroup } from 'primeng/inputgroup';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 import { RadioButton } from 'primeng/radiobutton';
 import { InputText } from 'primeng/inputtext';
+import { loadStripe } from '@stripe/stripe-js';
+import { ProgressSpinner } from 'primeng/progressspinner';
+import { Card } from 'primeng/card';
 import { Chip } from 'primeng/chip';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { Toast } from 'primeng/toast';
@@ -51,7 +54,6 @@ import { Image } from 'primeng/image';
 import { Tooltip } from 'primeng/tooltip';
 import { Password } from 'primeng/password';
 import { Checkbox } from 'primeng/checkbox';
-import { ProgressSpinner } from 'primeng/progressspinner';
 import { AutosizeModule } from 'ngx-autosize';
 import { debounceTime } from 'rxjs/operators';
 import shave from 'shave';
@@ -305,7 +307,7 @@ class ProfileComponent {
         }, 200);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, deps: [{ token: RTSeeAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ProfileComponent, isStandalone: true, selector: "rtsee-profile", inputs: { messenger: "messenger", peer: "peer" }, ngImport: i0, template: "<div class=\"rtsee-messenger-profile\">\n  @if (!messenger.ownProfileOpened) {\n    <ul class=\"rtsee-messenger-profile-actions\">\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"call()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-phone\"\n        />\n      </li>\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"videoCall()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-video\"\n        />\n      </li>\n    </ul>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-info\">\n      <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n      <div class=\"rtsee-messenger-profile-info-language\">\n        <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rtsee-messenger-profile-info-language-select\"\n        />\n      </div>\n      <div class=\"rtsee-messenger-profile-edit\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n                  (click)=\"messenger.openManageProfile()\"\n        ></p-button>\n      </div>\n      <p-divider></p-divider>\n    </div>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-auth\">\n      <div class=\"rtsee-messenger-profile-anon-message\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p-message severity=\"warn\">\n            <span>This is an anonymous identity we've generated for you.</span>\n            <span>&nbsp;</span>\n            <span>You can use it to play around.</span>\n            <span>&nbsp;</span>\n            <span>But we are guilty of erasing these time after time.</span>\n            <span>&nbsp;</span>\n            <span>So please Sign Up if you're looking for something more stable :)</span>\n          </p-message>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p-message severity=\"warn\">\n            <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n            <span>&nbsp;</span>\n            <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n          </p-message>\n        }\n      </div>\n\n      <div class=\"rtsee-messenger-profile-auth-buttons\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n                  severity=\"secondary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n      </div>\n    </div>\n  } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n              severity=\"danger\"\n              (click)=\"logOut()\"\n              class=\"rtsee-messenger-profile-auth-button\"\n    ></p-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ProfileComponent, isStandalone: true, selector: "rtsee-profile", inputs: { messenger: "messenger", peer: "peer" }, ngImport: i0, template: "<div class=\"rtsee-messenger-profile\">\n  @if (!messenger.ownProfileOpened) {\n    <ul class=\"rtsee-messenger-profile-actions\">\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"call()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-phone\"\n        />\n      </li>\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"videoCall()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-video\"\n        />\n      </li>\n    </ul>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-info\">\n      <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n      <div class=\"rtsee-messenger-profile-info-language\">\n        <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rtsee-messenger-profile-info-language-select\"\n        />\n      </div>\n      <div class=\"rtsee-messenger-profile-edit\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n                  (click)=\"messenger.openManageProfile()\"\n        ></p-button>\n      </div>\n      <p-divider></p-divider>\n      @if (messenger.myPeer.plan) {\n        <p-message severity=\"success\">\n          <span>{{messenger.myPeer.plan.productName}}</span>\n        </p-message>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n                  (click)=\"messenger.openManagePlanPage()\"\n        ></p-button>\n      } @else {\n        <div class=\"rtsee-subscribe-button\">\n          <p-button [label]=\"'Subscribe'\" (click)=\"messenger.openPaymentPage()\"></p-button>\n        </div>\n      }\n      <p-divider></p-divider>\n    </div>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-auth\">\n      <div class=\"rtsee-messenger-profile-anon-message\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p-message severity=\"warn\">\n            <span>This is an anonymous identity we've generated for you.</span>\n            <span>&nbsp;</span>\n            <span>You can use it to play around.</span>\n            <span>&nbsp;</span>\n            <span>But we are guilty of erasing these time after time.</span>\n            <span>&nbsp;</span>\n            <span>So please Sign Up if you're looking for something more stable :)</span>\n          </p-message>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p-message severity=\"warn\">\n            <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n            <span>&nbsp;</span>\n            <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n          </p-message>\n        }\n      </div>\n\n      <div class=\"rtsee-messenger-profile-auth-buttons\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n                  severity=\"secondary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n      </div>\n    </div>\n  } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n              severity=\"danger\"\n              (click)=\"logOut()\"\n              class=\"rtsee-messenger-profile-auth-button\"\n    ></p-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
@@ -316,7 +318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Select,
                         FormsModule,
                         Divider
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-profile\">\n  @if (!messenger.ownProfileOpened) {\n    <ul class=\"rtsee-messenger-profile-actions\">\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"call()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-phone\"\n        />\n      </li>\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"videoCall()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-video\"\n        />\n      </li>\n    </ul>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-info\">\n      <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n      <div class=\"rtsee-messenger-profile-info-language\">\n        <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rtsee-messenger-profile-info-language-select\"\n        />\n      </div>\n      <div class=\"rtsee-messenger-profile-edit\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n                  (click)=\"messenger.openManageProfile()\"\n        ></p-button>\n      </div>\n      <p-divider></p-divider>\n    </div>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-auth\">\n      <div class=\"rtsee-messenger-profile-anon-message\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p-message severity=\"warn\">\n            <span>This is an anonymous identity we've generated for you.</span>\n            <span>&nbsp;</span>\n            <span>You can use it to play around.</span>\n            <span>&nbsp;</span>\n            <span>But we are guilty of erasing these time after time.</span>\n            <span>&nbsp;</span>\n            <span>So please Sign Up if you're looking for something more stable :)</span>\n          </p-message>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p-message severity=\"warn\">\n            <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n            <span>&nbsp;</span>\n            <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n          </p-message>\n        }\n      </div>\n\n      <div class=\"rtsee-messenger-profile-auth-buttons\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n                  severity=\"secondary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n      </div>\n    </div>\n  } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n              severity=\"danger\"\n              (click)=\"logOut()\"\n              class=\"rtsee-messenger-profile-auth-button\"\n    ></p-button>\n  }\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-messenger-profile\">\n  @if (!messenger.ownProfileOpened) {\n    <ul class=\"rtsee-messenger-profile-actions\">\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"call()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-phone\"\n        />\n      </li>\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"videoCall()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-video\"\n        />\n      </li>\n    </ul>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-info\">\n      <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n      <div class=\"rtsee-messenger-profile-info-language\">\n        <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rtsee-messenger-profile-info-language-select\"\n        />\n      </div>\n      <div class=\"rtsee-messenger-profile-edit\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n                  (click)=\"messenger.openManageProfile()\"\n        ></p-button>\n      </div>\n      <p-divider></p-divider>\n      @if (messenger.myPeer.plan) {\n        <p-message severity=\"success\">\n          <span>{{messenger.myPeer.plan.productName}}</span>\n        </p-message>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n                  (click)=\"messenger.openManagePlanPage()\"\n        ></p-button>\n      } @else {\n        <div class=\"rtsee-subscribe-button\">\n          <p-button [label]=\"'Subscribe'\" (click)=\"messenger.openPaymentPage()\"></p-button>\n        </div>\n      }\n      <p-divider></p-divider>\n    </div>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-auth\">\n      <div class=\"rtsee-messenger-profile-anon-message\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p-message severity=\"warn\">\n            <span>This is an anonymous identity we've generated for you.</span>\n            <span>&nbsp;</span>\n            <span>You can use it to play around.</span>\n            <span>&nbsp;</span>\n            <span>But we are guilty of erasing these time after time.</span>\n            <span>&nbsp;</span>\n            <span>So please Sign Up if you're looking for something more stable :)</span>\n          </p-message>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p-message severity=\"warn\">\n            <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n            <span>&nbsp;</span>\n            <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n          </p-message>\n        }\n      </div>\n\n      <div class=\"rtsee-messenger-profile-auth-buttons\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n                  severity=\"secondary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n      </div>\n    </div>\n  } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n              severity=\"danger\"\n              (click)=\"logOut()\"\n              class=\"rtsee-messenger-profile-auth-button\"\n    ></p-button>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: RTSeeAuthService }, { type: i2.Router }], propDecorators: { messenger: [{
                 type: Input
             }], peer: [{
@@ -1173,13 +1175,242 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class PaymentProductSnippetComponent {
+    constructor() {
+        this.priceSelected = new EventEmitter();
+    }
+    selectPrice(price) {
+        this.priceSelected.emit(price);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentProductSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentProductSnippetComponent, isStandalone: true, selector: "rtsee-payment-product-snippet", inputs: { product: "product" }, outputs: { priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"rtsee-payment-product-snippet\">\n  <p-card [header]=\"product.name\">\n    <p class=\"rtsee-payment-product-snippet-description\">{{product.description}}</p>\n    <div class=\"rtsee-payment-product-prices\">\n      @for (price of product.prices; track price.id) {\n        <div class=\"rtsee-payment-product-price\">\n          <p-card [header]=\"price.label\" >\n            <p>{{price.description}}</p>\n            <p-button label=\"Select Plan\"\n                      (click)=\"selectPrice(price)\"\n            ></p-button>\n          </p-card>\n        </div>\n      }\n    </div>\n  </p-card>\n</div>\n", dependencies: [{ kind: "component", type: Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentProductSnippetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-payment-product-snippet', imports: [
+                        Card,
+                        Button
+                    ], template: "<div class=\"rtsee-payment-product-snippet\">\n  <p-card [header]=\"product.name\">\n    <p class=\"rtsee-payment-product-snippet-description\">{{product.description}}</p>\n    <div class=\"rtsee-payment-product-prices\">\n      @for (price of product.prices; track price.id) {\n        <div class=\"rtsee-payment-product-price\">\n          <p-card [header]=\"price.label\" >\n            <p>{{price.description}}</p>\n            <p-button label=\"Select Plan\"\n                      (click)=\"selectPrice(price)\"\n            ></p-button>\n          </p-card>\n        </div>\n      }\n    </div>\n  </p-card>\n</div>\n" }]
+        }], propDecorators: { product: [{
+                type: Input
+            }], priceSelected: [{
+                type: Output
+            }] } });
+
+class PaymentsService {
+    constructor(http) {
+        this.http = http;
+        this.paymentsConfig = null;
+        this.isInitialized = false;
+    }
+    init(configuration) {
+        this.paymentsConfig = configuration;
+        this.isInitialized = true;
+    }
+    createSession(options) {
+        if (!this.paymentsConfig) {
+            throw new Error("Payments not configured");
+        }
+        return this.http
+            .post(this.paymentsConfig.createSessionEndpoint, options);
+    }
+    getSession() {
+        if (!this.paymentsConfig) {
+            throw new Error("Payments not configured");
+        }
+        if (!this.paymentsConfig.sessionId) {
+            throw new Error("No SessionId provided");
+        }
+        return this.http
+            .get(`${this.paymentsConfig.getSessionEndpoint}/?sessionId=${this.paymentsConfig.sessionId}`)
+            .pipe(tap((res) => {
+            console.log('tap here', res);
+            this.paymentsConfig?.setValidationInProgress(false);
+        }));
+    }
+    getProducts() {
+        if (!this.paymentsConfig || !this.paymentsConfig.appId) {
+            throw new Error("Payments Config not initialized!");
+        }
+        this.paymentsConfig.setProductsLoadInProgress(true);
+        return this.http
+            .get(this.paymentsConfig.productsEndpoint)
+            .pipe(map((res) => res.products), tap((res) => this.paymentsConfig?.setProducts(res)));
+    }
+    unsubscribe(subscriptionId) {
+        if (!this.paymentsConfig || !this.paymentsConfig.appId) {
+            throw new Error("Payments Config not initialized!");
+        }
+        return this.http
+            .post(`${this.paymentsConfig?.unsubscribeEndpoint}`, {
+            subscriptionId
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentsService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
+class PaymentPageComponent {
+    constructor(paymentsService) {
+        this.paymentsService = paymentsService;
+        this.planSelected = false;
+        this.loadInProgress = false;
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
+    async init() {
+        if (!this.paymentsService.paymentsConfig?.publicKey) {
+            return;
+        }
+        this.stripe = await loadStripe(this.paymentsService.paymentsConfig.publicKey) || undefined;
+        this.getProducts();
+    }
+    getProducts() {
+        this.paymentsService.getProducts().subscribe();
+    }
+    selectPlan(price) {
+        const priceId = price.priceId;
+        if (!this.messenger.payments || !this.messenger.payments.createSessionEndpoint) {
+            console.log('No payments config.');
+            return;
+        }
+        if (!this.messenger.myPeer.rtseeAppId) {
+            console.log('No app id on peer.');
+            return;
+        }
+        this.planSelected = true;
+        this.loadInProgress = true;
+        this.paymentsService.createSession({
+            priceId: priceId,
+            userId: this.messenger.myPeer.clientId,
+            route: `/profile/${this.messenger.myPeer.clientId}`,
+            applicationId: this.messenger.myPeer.rtseeAppId
+        }).subscribe((response) => {
+            void this.initCheckout(response.clientSecret);
+        });
+    }
+    async initCheckout(secret) {
+        if (!this.stripe) {
+            console.log('Stripe not yet initialized!');
+            return;
+        }
+        const checkout = await this.stripe.initEmbeddedCheckout({
+            clientSecret: secret
+        });
+        if (!checkout) {
+            return;
+        }
+        this.loadInProgress = false;
+        checkout.mount(this.checkoutContainer.nativeElement);
+    }
+    ngOnInit() {
+        if (!this.paymentsService.isInitialized && this.messenger.payments) {
+            this.paymentsService.init(this.messenger.payments);
+        }
+        void this.init();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentPageComponent, deps: [{ token: PaymentsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentPageComponent, isStandalone: true, selector: "rtsee-payment-page", inputs: { messenger: "messenger" }, viewQueries: [{ propertyName: "checkoutContainer", first: true, predicate: ["checkoutContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n  @if (messenger.payments && !planSelected) {\n    @if (messenger.payments.products) {\n      <div class=\"rtsee-payment-page-products\">\n        @for (product of messenger.payments.products ; track product.id) {\n          <rtsee-payment-product-snippet [product]=\"product\"\n                                         (priceSelected)=\"selectPlan($event)\"\n          ></rtsee-payment-product-snippet>\n        }\n      </div>\n    } @else {\n      <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n    }\n  }\n  @if (loadInProgress) {\n    <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n  }\n  <div #checkoutContainer class=\"stripe-checkout-container\"></div>\n  <div class=\"rtsee-payment-page-footer\">\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n              (click)=\"messenger.closePaymentPage()\"\n              severity=\"warn\"\n    ></p-button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: PaymentProductSnippetComponent, selector: "rtsee-payment-product-snippet", inputs: ["product"], outputs: ["priceSelected"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-payment-page', imports: [
+                        ReactiveFormsModule,
+                        ProgressSpinner,
+                        PaymentProductSnippetComponent,
+                        Button
+                    ], template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n  @if (messenger.payments && !planSelected) {\n    @if (messenger.payments.products) {\n      <div class=\"rtsee-payment-page-products\">\n        @for (product of messenger.payments.products ; track product.id) {\n          <rtsee-payment-product-snippet [product]=\"product\"\n                                         (priceSelected)=\"selectPlan($event)\"\n          ></rtsee-payment-product-snippet>\n        }\n      </div>\n    } @else {\n      <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n    }\n  }\n  @if (loadInProgress) {\n    <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n  }\n  <div #checkoutContainer class=\"stripe-checkout-container\"></div>\n  <div class=\"rtsee-payment-page-footer\">\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n              (click)=\"messenger.closePaymentPage()\"\n              severity=\"warn\"\n    ></p-button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: PaymentsService }], propDecorators: { messenger: [{
+                type: Input
+            }], checkoutContainer: [{
+                type: ViewChild,
+                args: ['checkoutContainer']
+            }] } });
+
+class PaymentValidationPageComponent {
+    constructor(paymentsService) {
+        this.paymentsService = paymentsService;
+        this.loadInProgress = false;
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
+    async init() {
+        if (!this.paymentsService.paymentsConfig?.publicKey) {
+            return;
+        }
+        this.stripe = await loadStripe(this.paymentsService.paymentsConfig.publicKey) || undefined;
+        this.validatePayment();
+    }
+    validatePayment() {
+        this.paymentsService.getSession().subscribe((res) => {
+            this.messenger.closePaymentValidationPage();
+        });
+    }
+    ngOnInit() {
+        if (!this.paymentsService.isInitialized && this.messenger.payments) {
+            this.paymentsService.init(this.messenger.payments);
+        }
+        void this.init();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentValidationPageComponent, deps: [{ token: PaymentsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentValidationPageComponent, isStandalone: true, selector: "rtsee-payment-validation-page", inputs: { messenger: "messenger" }, viewQueries: [{ propertyName: "checkoutContainer", first: true, predicate: ["checkoutContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n  @if (messenger.payments?.validationInProgress) {\n    <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n  }\n  <div class=\"rtsee-payment-page-footer\">\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n              (click)=\"messenger.closePaymentPage()\"\n              severity=\"warn\"\n    ></p-button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentValidationPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-payment-validation-page', imports: [
+                        ReactiveFormsModule,
+                        ProgressSpinner,
+                        Button
+                    ], template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n  @if (messenger.payments?.validationInProgress) {\n    <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n  }\n  <div class=\"rtsee-payment-page-footer\">\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n              (click)=\"messenger.closePaymentPage()\"\n              severity=\"warn\"\n    ></p-button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: PaymentsService }], propDecorators: { messenger: [{
+                type: Input
+            }], checkoutContainer: [{
+                type: ViewChild,
+                args: ['checkoutContainer']
+            }] } });
+
+class ManagePlanComponent {
+    constructor(paymentsService) {
+        this.paymentsService = paymentsService;
+        this.activeFromFormated = '';
+        this.activeToFormated = '';
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
+    onUnsubscribeClicked() {
+        console.log(this.plan);
+    }
+    ngOnInit() {
+        if (!this.messenger.myPeer || !this.messenger.myPeer.plan) {
+            throw new Error('No Plans found.');
+        }
+        this.plan = this.messenger.myPeer.plan;
+        this.activeFromFormated = dayjs(this.messenger.myPeer.plan.activeFrom).format('YYYY-MM-DD');
+        this.activeToFormated = dayjs(this.messenger.myPeer.plan.activeTo).format('YYYY-MM-DD');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManagePlanComponent, deps: [{ token: PaymentsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManagePlanComponent, isStandalone: true, selector: "rtsee-manage-plan", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-manage-plan\">\n  <h2>{{messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]}}</h2>\n  <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.BACK_LABEL]\"\n            severity=\"secondary\"\n            (click)=\"messenger.closeManagePlanPage()\"\n  ></p-button>\n  @if (plan) {\n    <p-card [header]=\"plan.productName\">\n      <p>{{plan.productDescription}}</p>\n      <p-divider></p-divider>\n      <div class=\"rtsee-manage-plan-info\">\n        <p>Active From: {{activeFromFormated}}</p>\n        <p>Active To: {{activeToFormated}}</p>\n      </div>\n      <p-button [label]=\"'Unsubscribe'\"\n                (click)=\"onUnsubscribeClicked()\"\n      ></p-button>\n    </p-card>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManagePlanComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-plan', imports: [
+                        Card,
+                        Divider,
+                        Button
+                    ], template: "<div class=\"rtsee-manage-plan\">\n  <h2>{{messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]}}</h2>\n  <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.BACK_LABEL]\"\n            severity=\"secondary\"\n            (click)=\"messenger.closeManagePlanPage()\"\n  ></p-button>\n  @if (plan) {\n    <p-card [header]=\"plan.productName\">\n      <p>{{plan.productDescription}}</p>\n      <p-divider></p-divider>\n      <div class=\"rtsee-manage-plan-info\">\n        <p>Active From: {{activeFromFormated}}</p>\n        <p>Active To: {{activeToFormated}}</p>\n      </div>\n      <p-button [label]=\"'Unsubscribe'\"\n                (click)=\"onUnsubscribeClicked()\"\n      ></p-button>\n    </p-card>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: PaymentsService }], propDecorators: { messenger: [{
+                type: Input
+            }] } });
+
 class MessengerComponent {
-    constructor() { }
     onScroll() {
         this.messenger.loadChats();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded\n}\">\n  @if (messenger.manageProfile) {\n    <div class=\"rtsee-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\n  }\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }, { kind: "component", type: ManageProfileComponent, selector: "rtsee-manage-profile", inputs: ["messenger", "manageProfile"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded,\n  'rtsee-messenger-overlay-window': messenger.isOverlayPageOpened\n}\">\n  @if (messenger.manageProfile) {\n    <div class=\"rtsee-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\n  }\n\n  @if (messenger.isPaymentPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-page [messenger]=\"messenger\"></rtsee-payment-page>\n    </div>\n  }\n\n  @if (messenger.isPaymentValidationPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-validation-page [messenger]=\"messenger\"></rtsee-payment-validation-page>\n    </div>\n  }\n\n  @if (messenger.isManagePlanPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n    </div>\n  }\n\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }, { kind: "component", type: ManageProfileComponent, selector: "rtsee-manage-profile", inputs: ["messenger", "manageProfile"] }, { kind: "component", type: PaymentPageComponent, selector: "rtsee-payment-page", inputs: ["messenger"] }, { kind: "component", type: PaymentValidationPageComponent, selector: "rtsee-payment-validation-page", inputs: ["messenger"] }, { kind: "component", type: ManagePlanComponent, selector: "rtsee-manage-plan", inputs: ["messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, decorators: [{
             type: Component,
@@ -1191,9 +1422,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         ChatComponent,
                         PreloaderComponent,
                         ProfileComponent,
-                        ManageProfileComponent
-                    ], standalone: true, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded\n}\">\n  @if (messenger.manageProfile) {\n    <div class=\"rtsee-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\n  }\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n" }]
-        }], ctorParameters: () => [], propDecorators: { messenger: [{
+                        ManageProfileComponent,
+                        PaymentPageComponent,
+                        PaymentValidationPageComponent,
+                        ManagePlanComponent
+                    ], standalone: true, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded,\n  'rtsee-messenger-overlay-window': messenger.isOverlayPageOpened\n}\">\n  @if (messenger.manageProfile) {\n    <div class=\"rtsee-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\n  }\n\n  @if (messenger.isPaymentPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-page [messenger]=\"messenger\"></rtsee-payment-page>\n    </div>\n  }\n\n  @if (messenger.isPaymentValidationPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-validation-page [messenger]=\"messenger\"></rtsee-payment-validation-page>\n    </div>\n  }\n\n  @if (messenger.isManagePlanPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n    </div>\n  }\n\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n" }]
+        }], propDecorators: { messenger: [{
                 type: Input
             }] } });
 
@@ -2032,7 +2266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class StoryDetailsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, decorators: [{
             type: Component,
@@ -2041,7 +2275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Tag,
                         Button,
                         ChatComponent
-                    ], template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }], presentation: [{
@@ -2055,7 +2289,7 @@ class PresentationComponent {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <p class=\"rtsee-presentation-category-name\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</span>\n        </p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <p class=\"rtsee-presentation-category-name\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</span>\n        </p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
             type: Component,
@@ -2068,7 +2302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PresentationsDashboardComponent,
                         PresentationSettingsComponent,
                         StoryDetailsComponent
-                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <p class=\"rtsee-presentation-category-name\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</span>\n        </p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <p class=\"rtsee-presentation-category-name\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</span>\n        </p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { presentation: [{
                 type: Input
             }], messenger: [{
@@ -2820,6 +3054,7 @@ class RTSeeModule {
             SlideComponent,
             StoryThumbnailComponent,
             PresentationHeaderComponent,
+            PaymentProductSnippetComponent,
             CommonModule,
             ReactiveFormsModule,
             AutosizeModule,
@@ -2833,7 +3068,8 @@ class RTSeeModule {
             RtseeEventsDashboardComponent,
             RTSeeContainerComponent,
             PresentationComponent,
-            RTSeeAuthComponent] }); }
+            RTSeeAuthComponent,
+            PaymentProductSnippetComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeModule, providers: [
             provideAnimationsAsync(),
             providePrimeNG({
@@ -2861,6 +3097,7 @@ class RTSeeModule {
             StoryPlayerComponent,
             SlideComponent,
             PresentationHeaderComponent,
+            PaymentProductSnippetComponent,
             CommonModule,
             ReactiveFormsModule,
             AutosizeModule,
@@ -2922,6 +3159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         SlideComponent,
                         StoryThumbnailComponent,
                         PresentationHeaderComponent,
+                        PaymentProductSnippetComponent,
                         CommonModule,
                         ReactiveFormsModule,
                         AutosizeModule,
@@ -2938,7 +3176,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RtseeEventsDashboardComponent,
                         RTSeeContainerComponent,
                         PresentationComponent,
-                        RTSeeAuthComponent
+                        RTSeeAuthComponent,
+                        PaymentProductSnippetComponent
                     ],
                     schemas: [
                         CUSTOM_ELEMENTS_SCHEMA,
@@ -2954,5 +3193,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MessengerComponent, NgxService, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent };
+export { MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent };
 //# sourceMappingURL=rtsee-ngx.mjs.map