@fluid-topics/ft-reader-feedback 1.0.50 → 1.0.52

package/build/ft-reader-feedback.d.ts

@@ -3,16 +3,23 @@ import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtReaderFeedbackProperties } from "./ft-reader-feedback.properties";
 import { FtTopicRatingSummary } from "@fluid-topics/ft-reader-context/build/store/model";
 import type { FtPublicationRatingSummary, FtUserProfile } from "@fluid-topics/public-api";
+import { FtReaderFeedbackConfiguration } from "@fluid-topics/public-api";
 import { FtTextArea } from "@fluid-topics/ft-text-area";
 import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
-import { FtLitElementWithI18n, I18nProperty } from "@fluid-topics/ft-i18n";
+import { I18nProperty } from "@fluid-topics/ft-i18n";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
 export interface FeedbackI18nProperties {
     feedbackMainTitle: I18nProperty;
     ratingSectionTitle: I18nProperty;
     feedbackSectionTitle: I18nProperty;
     dichotomousRatingSectionTitle: I18nProperty;
 }
-export declare class FtReaderFeedback extends FtLitElementWithI18n implements FtReaderFeedbackProperties {
+export interface FtFeedbackEventDetail {
+    message: string;
+    from?: string;
+}
+declare const FtReaderFeedback_base: typeof FtReaderComponent & (new (...args: any[]) => import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface);
+export declare class FtReaderFeedback extends FtReaderFeedback_base implements FtReaderFeedbackProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
     editorMode: boolean;
@@ -22,6 +29,7 @@ export declare class FtReaderFeedback extends FtLitElementWithI18n implements Ft
     ratingSummary?: FtPublicationRatingSummary | FtTopicRatingSummary;
     user?: FtUserProfile;
     feedbackInput: FtTextArea;
+    from: string;
     feedbackMessage: string;
     iconVariant?: FtIconVariants;
     emptyStarIcon?: string;
@@ -30,6 +38,7 @@ export declare class FtReaderFeedback extends FtLitElementWithI18n implements Ft
     filledLikeIcon?: string;
     emptyDislikeIcon?: string;
     filledDislikeIcon?: string;
+    configuration?: FtReaderFeedbackConfiguration;
     feedbackMailLinkBuilder: (feedbackMessage: string) => string | undefined;
     constructor();
     get canAccessFeedback(): boolean | undefined;
@@ -45,8 +54,10 @@ export declare class FtReaderFeedback extends FtLitElementWithI18n implements Ft
     private renderRating;
     private rate;
     private renderFeedbackSection;
+    private validFromEmail;
     private sendFeedback;
     private placeholderInEditor;
     private onMailerFeedbackSent;
     clearFeedbackInput(): void;
 }
+export {};

package/build/ft-reader-feedback.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
-import { parseDate, } from "@fluid-topics/ft-wc-utils";
+import { parseDate, redux, } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-reader-feedback.css";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { FtIcon } from "@fluid-topics/ft-icon";
@@ -16,14 +16,17 @@ import { FtTextArea } from "@fluid-topics/ft-text-area";
 import { repeat } from "lit/directives/repeat.js";
 import { FtButton } from "@fluid-topics/ft-button";
 import { defaultMessages, feedback } from "./utils/IntegratedFeedbackComponentMessages";
-import { FtLitElementWithI18n } from "@fluid-topics/ft-i18n";
+import { withI18n } from "@fluid-topics/ft-i18n";
 import { defaultDesignerMessages, designer } from "./utils/InDesignerFeedbackComponentMessages";
-class FtReaderFeedback extends FtLitElementWithI18n {
+import { FtTextField } from "@fluid-topics/ft-text-field";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+class FtReaderFeedback extends withI18n(FtReaderComponent) {
     constructor() {
         super();
         this.editorMode = false;
         this.hideTitle = false;
         this.ratingAllowed = false;
+        this.from = "";
         this.feedbackMessage = "";
         this.emptyStarIcon = "STAR";
         this.filledStarIcon = "STAR_PLAIN";
@@ -181,12 +184,13 @@ class FtReaderFeedback extends FtLitElementWithI18n {
         }
     }
     renderFeedbackSection() {
+        var _a, _b;
         if (this.canAccessFeedback) {
             const mailLink = this.feedbackMailLinkBuilder(this.feedbackMessage);
             let button = html `
                 <ft-button primary
                            class="ft-reader-feedback--send-feedback"
-                           ?disabled=${!this.feedbackMessage}
+                           ?disabled=${!this.feedbackMessage || !this.validFromEmail()}
                            @click=${() => mailLink ? this.onMailerFeedbackSent() : this.sendFeedback()}
                            part="send-feedback">
                     ${feedback.messages.okButton()}
@@ -204,6 +208,15 @@ class FtReaderFeedback extends FtLitElementWithI18n {
                     <ft-typography variant="title-dense" part="section-title" class="ft-reader-feedback--section-title">
                         ${this.i18n(this.i18nProperties.feedbackSectionTitle)}
                     </ft-typography>
+                    ${((_a = this.user) === null || _a === void 0 ? void 0 : _a.userId) == null && ((_b = this.configuration) === null || _b === void 0 ? void 0 : _b.mailsSentByFluidTopicsForUnauthenticatedUsers) ? html `
+                        <ft-text-field
+                                class="ft-reader-feedback--from-input"
+                                label=${feedback.messages.feedbackfromEmail()}
+                                @live-change=${(e) => this.from = e.detail.trim()}
+                                ?error=${this.from && !this.validFromEmail()}
+                                helper=${this.from && !this.validFromEmail() ? feedback.messages.feedbackfromEmailInvalid() : ""}
+                        />
+                    ` : nothing}
                     <ft-text-area outlined
                                   class="ft-reader-feedback--feedback-input" part="feedback-input"
                                   label="${feedback.messages.feedbackInputLabel()}"
@@ -215,8 +228,20 @@ class FtReaderFeedback extends FtLitElementWithI18n {
         }
         return this.placeholderInEditor(designer.messages.missingFeedbackRole());
     }
+    validFromEmail() {
+        var _a, _b;
+        const expression = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/;
+        return !(((_a = this.user) === null || _a === void 0 ? void 0 : _a.userId) == null && ((_b = this.configuration) === null || _b === void 0 ? void 0 : _b.mailsSentByFluidTopicsForUnauthenticatedUsers))
+            || expression.test(this.from);
+    }
     sendFeedback() {
-        this.dispatchEvent(new CustomEvent("send-feedback", { detail: this.feedbackInput.value }));
+        var _a;
+        this.dispatchEvent(new CustomEvent("send-feedback", {
+            detail: {
+                message: this.feedbackInput.value,
+                ...(((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.mailsSentByFluidTopicsForUnauthenticatedUsers) && { from: this.from }),
+            }
+        }));
     }
     placeholderInEditor(message) {
         return this.editorMode ? html `
@@ -244,6 +269,7 @@ FtReaderFeedback.elementDefinitions = {
     "ft-switch": FtSwitch,
     "ft-switch-option": FtSwitchOption,
     "ft-text-area": FtTextArea,
+    "ft-text-field": FtTextField,
 };
 FtReaderFeedback.styles = styles;
 __decorate([
@@ -267,6 +293,9 @@ __decorate([
 __decorate([
     query(".ft-reader-feedback--feedback-input")
 ], FtReaderFeedback.prototype, "feedbackInput", void 0);
+__decorate([
+    state()
+], FtReaderFeedback.prototype, "from", void 0);
 __decorate([
     state()
 ], FtReaderFeedback.prototype, "feedbackMessage", void 0);
@@ -291,6 +320,12 @@ __decorate([
 __decorate([
     property()
 ], FtReaderFeedback.prototype, "filledDislikeIcon", void 0);
+__decorate([
+    redux({
+        store: "reader",
+        selector: (state) => { var _a; return (_a = state.configuration) === null || _a === void 0 ? void 0 : _a.feedback; }
+    })
+], FtReaderFeedback.prototype, "configuration", void 0);
 __decorate([
     property()
 ], FtReaderFeedback.prototype, "feedbackMailLinkBuilder", void 0);