@rtsee/ngx 0.0.99 → 0.0.100

package/dist/ngx/index.d.ts

@@ -130,10 +130,11 @@ declare class MessengerComponent {
 
 declare class PaymentProductSnippetComponent {
     product: IRTSeePaymentProduct;
+    theme: 'dark' | 'light';
     priceSelected: EventEmitter<IRTSeePaymentPriceItem>;
     selectPrice(price: IRTSeePaymentPriceItem): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PaymentProductSnippetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PaymentProductSnippetComponent, "rtsee-payment-product-snippet", never, { "product": { "alias": "product"; "required": false; }; }, { "priceSelected": "priceSelected"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaymentProductSnippetComponent, "rtsee-payment-product-snippet", never, { "product": { "alias": "product"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; }, { "priceSelected": "priceSelected"; }, never, never, true, never>;
 }
 
 declare class RtseeEventsDashboardComponent {
@@ -743,12 +744,13 @@ declare class SearchComponent implements OnInit, OnDestroy {
 declare class StoryPlayerComponent implements OnInit, AfterViewInit {
     story: RTSeeStory;
     settings: RTSeePresentationSettings;
+    presentation: RTSeePresentation;
     swiperEl: ElementRef<HTMLElement>;
     constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<StoryPlayerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StoryPlayerComponent, "rtsee-story-player", never, { "story": { "alias": "story"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StoryPlayerComponent, "rtsee-story-player", never, { "story": { "alias": "story"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "presentation": { "alias": "presentation"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class SlideComponent implements AfterViewInit {
@@ -756,6 +758,7 @@ declare class SlideComponent implements AfterViewInit {
     hideRewindControls: boolean;
     lastScrollPosition: number;
     scrollingDown: boolean;
+    presentation: RTSeePresentation;
     story: RTSeeStory;
     slide: RTSeeStorySlide;
     settings: RTSeePresentationSettings;
@@ -764,8 +767,9 @@ declare class SlideComponent implements AfterViewInit {
     ngAfterViewInit(): void;
     onScroll(target: EventTarget | null): void;
     private handleScroll;
+    protected readonly RTSeeTextLabelKeys: typeof RTSeeTextLabelKeys;
     static ɵfac: i0.ɵɵFactoryDeclaration<SlideComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SlideComponent, "rtsee-slide", never, { "story": { "alias": "story"; "required": false; }; "slide": { "alias": "slide"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SlideComponent, "rtsee-slide", never, { "presentation": { "alias": "presentation"; "required": false; }; "story": { "alias": "story"; "required": false; }; "slide": { "alias": "slide"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class StoryThumbnailComponent implements OnInit {
@@ -774,6 +778,7 @@ declare class StoryThumbnailComponent implements OnInit {
     story: RTSeeStory;
     presentation: RTSeePresentation;
     ngOnInit(): void;
+    protected readonly RTSeeTextLabelKeys: typeof RTSeeTextLabelKeys;
     static ɵfac: i0.ɵɵFactoryDeclaration<StoryThumbnailComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<StoryThumbnailComponent, "rtsee-story-thumbnail", never, { "story": { "alias": "story"; "required": false; }; "presentation": { "alias": "presentation"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/ngx/src/lib/theme/common-variables.scss

@@ -117,6 +117,9 @@ $ai-background-gradient: linear-gradient(135deg, #1b0533 0%, #0e0e10 60%, #0a162
 $ai-text-color-primary: #e5e5e7;
 $ai-text-color-secondary: #8e8e93;
 
+// story player
+$rts-story-player-background: #f0f0f4;
+
 $ai-large-screen-side-padding: $rts-offset-md * 3;
 $ai-panel-background-color: #1a1a1e;
 $ai-default-border-radius: 12px;

package/dist/ngx/src/lib/theme/containers/shell.scss

@@ -159,7 +159,7 @@
   }
 
   @media screen and (min-width: $rts-break-md) {
-    $rts-divider-style: 2px solid rgba(0, 0, 0, 0.2);
+    $rts-divider-style: 2px solid rgba(0, 0, 0, 0.9);
 
     .rtsee-nav-block {
       position: fixed;

package/dist/ngx/src/lib/theme/messenger/messenger-header.scss

@@ -24,6 +24,8 @@
   &.rtsee-messenger-header-expanded {
     padding: 0;
     height: auto;
+    background-color: $ai-background-color;
+    margin-bottom: $rts-bottom-nav-height + $rts-offset-md;
 
     .rtsee-messenger-header-center {
       .rtsee-messenger-header-opened-chat-info {
@@ -42,6 +44,8 @@
   }
 
   &.rtsee-messenger-header-my-profile-mode {
+    background-color: $ai-background-color;
+    border-bottom-color: rgba(255, 255, 255, 0.05);
 
     .rtsee-messenger-header-center {
       .rtsee-messenger-header-opened-chat-info {
@@ -134,7 +138,7 @@
 
   .rtsee-messenger-header-collapse-button {
     display: none;
-    position: absolute;
+    position: fixed;
     left: $rts-offset-sm;
     top: $rts-offset-sm;
     color: #fff;
@@ -225,4 +229,10 @@
     position: relative;
     transition: opacity 0.2s;
   }
+
+  @media screen and (min-width: $rts-break-md) {
+    .rtsee-messenger-header-collapse-button {
+      position: absolute;
+    }
+  }
 }

package/dist/ngx/src/lib/theme/messenger/messenger.scss

@@ -1,4 +1,5 @@
 @import "./variables";
+@import "../common-variables";
 
 $control-icon-size: 18px;
 
@@ -40,6 +41,7 @@ $control-icon-size: 18px;
 
   &.rtsee-messenger-header-expanded {
     padding-top: 0;
+    background-color: $ai-background-color;
 
     .rtsee-messenger-header-container {
       position: static;
@@ -53,6 +55,7 @@ $control-icon-size: 18px;
   }
 
   .rtsee-messenger-header-container {
+    background-color: $ai-background-color;
     position: absolute;
     top: 0;
     left: 0;

package/dist/ngx/src/lib/theme/messenger/payment-product-snippet.scss

@@ -1,36 +1,157 @@
 @import "./variables";
+@import "../common-variables";
+
+/* ═══════════════════════════════════════════════════════════════
+   PAYMENT PRODUCT SNIPPET — Glass Card Design
+   Uses CSS custom properties set by parent .rtsee-payment-page
+   ═══════════════════════════════════════════════════════════════ */
 
 .rtsee-payment-product-snippet {
-  .rtsee-payment-product-snippet-info {
-    .rtsee-payment-product-snippet-description {
-      margin: 0;
+
+  /* ── PRODUCT CARD ─────────────────────────────────────────── */
+
+  .rtsee-payment-product-card {
+    background: linear-gradient(
+      135deg,
+      var(--pay-card-bg-start) 0%,
+      var(--pay-card-bg-end) 100%
+    );
+    border: 1px solid var(--pay-border-dim);
+    border-radius: 16px;
+    backdrop-filter: blur(12px);
+    padding: $rts-offset-md + $rts-offset-sm;
+    transition:
+      transform 0.3s ease,
+      border-color 0.3s ease,
+      box-shadow 0.3s ease;
+
+    &:hover {
+      border-color: rgba($rts-rates-accent-purple, 0.2);
+      box-shadow: 0 6px 24px var(--pay-shadow-accent);
     }
   }
 
+  /* ── PRODUCT INFO ─────────────────────────────────────────── */
+
+  .rtsee-payment-product-header {
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: var(--pay-text-primary);
+    margin: 0 0 $rts-offset-sm;
+    letter-spacing: -0.01em;
+  }
+
+  .rtsee-payment-product-description {
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--pay-text-secondary);
+    margin: 0 0 $rts-offset-md;
+  }
+
+  /* ── PRICES GRID ──────────────────────────────────────────── */
+
   .rtsee-payment-product-prices {
-    padding-top: $rts-offset-md;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: $rts-offset-sm;
+  }
 
-    &:after {
-      content: '';
-      display: block;
-      clear: both;
+  /* ── PRICE CARD ───────────────────────────────────────────── */
+
+  .rtsee-payment-price-card {
+    background: linear-gradient(
+      145deg,
+      var(--pay-card-bg-start) 0%,
+      var(--pay-card-bg-end) 100%
+    );
+    border: 1px solid var(--pay-border-med);
+    border-radius: 12px;
+    padding: $rts-offset-sm + $rts-offset-xsm;
+    display: flex;
+    flex-direction: column;
+    gap: $rts-offset-sm;
+    transition:
+      transform 0.25s ease,
+      border-color 0.25s ease,
+      box-shadow 0.25s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      border-color: rgba($rts-rates-accent-purple, 0.35);
+      box-shadow: 0 4px 16px var(--pay-shadow-accent);
     }
 
-    .rtsee-payment-product-price {
-      float: left;
-      width: 50%;
+    .rtsee-payment-price-label {
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: var(--pay-text-primary);
+      margin: 0;
+    }
+
+    .rtsee-payment-price-description {
+      font-size: 0.8rem;
+      line-height: 1.5;
+      color: var(--pay-text-muted);
+      margin: 0;
+      flex: 1;
+    }
+  }
+
+  /* ── SELECT PLAN BUTTON ───────────────────────────────────── */
 
-      &:nth-child(odd) {
-        padding-right: $rts-offset-sm / 2;
-      }
+  .rtsee-payment-select-plan-btn {
+    width: 100%;
+    padding: 10px 16px;
+    border: none;
+    border-radius: 10px;
+    font-family: "Work Sans", "Inter", sans-serif;
+    font-size: 0.82rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    color: #fff;
+    background: linear-gradient(
+      135deg,
+      $rts-rates-accent-purple 0%,
+      $rts-rates-accent-purple-light 100%
+    );
+    box-shadow: 0 3px 14px var(--pay-shadow-accent);
+    transition:
+      transform 0.25s ease,
+      box-shadow 0.25s ease;
+    position: relative;
+    overflow: hidden;
 
-      &:nth-child(even) {
-        padding-left: $rts-offset-sm / 2;
-      }
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        105deg,
+        transparent 40%,
+        rgba(255, 255, 255, 0.15) 50%,
+        transparent 60%
+      );
+      animation: rtseePayBtnShimmer 3s ease-in-out infinite;
+    }
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px var(--pay-shadow-hover);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 3px 12px var(--pay-shadow-accent);
     }
   }
 
-  .p-card-body {
-    padding: 0 $rts-offset-sm $rts-offset-sm $rts-offset-sm;
+  @keyframes rtseePayBtnShimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
   }
 }

package/dist/ngx/src/lib/theme/messenger/payments.scss

@@ -1,32 +1,152 @@
 @import "./variables";
+@import "../common-variables";
+
+/* ═══════════════════════════════════════════════════════════════
+   PAYMENT PAGE — Dual-Theme Design System
+   ═══════════════════════════════════════════════════════════════ */
 
 .rtsee-payment-page {
+  padding: $rts-offset-md;
+  font-family: "Work Sans", "Inter", sans-serif;
+  min-height: 100%;
+
+  /* ── THEME: DARK ──────────────────────────────────────────── */
+
+  &.rtsee-payment-theme-dark {
+    --pay-bg: #{$rts-rates-bg-main};
+    --pay-text-primary: #{$rts-rates-text-primary};
+    --pay-text-secondary: #{$rts-rates-text-secondary};
+    --pay-text-muted: #{$rts-rates-text-muted};
+    --pay-card-bg-start: #{$rts-rates-bg-card-start};
+    --pay-card-bg-end: #{$rts-rates-bg-card-end};
+    --pay-border-dim: #{$rts-rates-border-dim};
+    --pay-border-med: #{$rts-rates-border-med};
+    --pay-border-bright: #{$rts-rates-border-bright};
+    --pay-accent: #{$rts-rates-accent-purple};
+    --pay-accent-light: #{$rts-rates-accent-purple-light};
+    --pay-hover-bg: rgba(255, 255, 255, 0.05);
+    --pay-shadow-accent: #{rgba($rts-rates-accent-purple, 0.3)};
+    --pay-shadow-hover: #{rgba($rts-rates-accent-purple, 0.45)};
+    --pay-cancel-bg: #{$rts-rates-danger-bg};
+    --pay-cancel-border: #{$rts-rates-danger-border};
+    --pay-cancel-color: #{$rts-rates-danger};
+    --pay-cancel-hover-bg: #{$rts-rates-danger-hover-bg};
+    --pay-cancel-hover-border: #{$rts-rates-danger-hover-border};
+    --pay-spinner-track: rgba(255, 255, 255, 0.08);
+
+    background-color: var(--pay-bg);
+    color: var(--pay-text-primary);
+  }
+
+  /* ── THEME: LIGHT ─────────────────────────────────────────── */
+
+  &.rtsee-payment-theme-light {
+    --pay-bg: #f8f9fa;
+    --pay-text-primary: #1a1a2e;
+    --pay-text-secondary: #555570;
+    --pay-text-muted: #8888a0;
+    --pay-card-bg-start: rgba(255, 255, 255, 0.95);
+    --pay-card-bg-end: rgba(248, 248, 255, 0.98);
+    --pay-border-dim: rgba(0, 0, 0, 0.06);
+    --pay-border-med: rgba(0, 0, 0, 0.1);
+    --pay-border-bright: rgba(0, 0, 0, 0.15);
+    --pay-accent: #{$rts-rates-accent-purple};
+    --pay-accent-light: #{$rts-rates-accent-purple-light};
+    --pay-hover-bg: rgba(0, 0, 0, 0.03);
+    --pay-shadow-accent: #{rgba($rts-rates-accent-purple, 0.2)};
+    --pay-shadow-hover: #{rgba($rts-rates-accent-purple, 0.3)};
+    --pay-cancel-bg: rgba(0, 0, 0, 0.04);
+    --pay-cancel-border: rgba(0, 0, 0, 0.12);
+    --pay-cancel-color: #666;
+    --pay-cancel-hover-bg: rgba(0, 0, 0, 0.08);
+    --pay-cancel-hover-border: rgba(0, 0, 0, 0.2);
+    --pay-spinner-track: rgba(0, 0, 0, 0.06);
+
+    background-color: var(--pay-bg);
+    color: var(--pay-text-primary);
+  }
+
+  /* ── PRODUCTS GRID ────────────────────────────────────────── */
+
   .rtsee-payment-page-products {
-    &:after {
-      content: '';
-      display: block;
-      clear: both;
+    display: flex;
+    flex-direction: column;
+    gap: $rts-offset-md;
+    animation: rtseePayFadeUp 0.6s ease-out both;
+  }
+
+  @keyframes rtseePayFadeUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
     }
+  }
 
-    .rtsee-payment-page-product {
-      float: left;
-      width: 50%;
+  /* ── CUSTOM SPINNER ───────────────────────────────────────── */
 
-      .p-card-body {
-        padding: $rts-offset-sm;
-      }
+  .rtsee-payment-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $rts-offset-xl 0;
 
-      &:nth-child(odd) {
-        padding-right: $rts-offset-sm / 2;
-      }
+    .rtsee-payment-spinner-ring {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: 3px solid var(--pay-spinner-track);
+      border-top-color: var(--pay-accent);
+      animation: rtseePaySpin 0.8s linear infinite;
+    }
+  }
 
-      &:nth-child(even) {
-        padding-left: $rts-offset-sm / 2;
-      }
+  @keyframes rtseePaySpin {
+    to {
+      transform: rotate(360deg);
     }
   }
 
+  /* ── STRIPE CHECKOUT CONTAINER ────────────────────────────── */
+
+  .stripe-checkout-container {
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  /* ── FOOTER ───────────────────────────────────────────────── */
+
   .rtsee-payment-page-footer {
-    padding: $rts-offset-sm 0;
+    padding: $rts-offset-md 0 $rts-offset-sm;
+
+    .rtsee-payment-cancel-btn {
+      width: 100%;
+      padding: 10px 20px;
+      border-radius: 10px;
+      font-family: inherit;
+      font-size: 0.88rem;
+      font-weight: 600;
+      cursor: pointer;
+      background: var(--pay-cancel-bg);
+      border: 1px solid var(--pay-cancel-border);
+      color: var(--pay-cancel-color);
+      transition:
+        background 0.2s ease,
+        border-color 0.2s ease,
+        transform 0.2s ease;
+
+      &:hover {
+        background: var(--pay-cancel-hover-bg);
+        border-color: var(--pay-cancel-hover-border);
+        transform: translateY(-1px);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+    }
   }
 }