@fluid-topics/ft-reader-feedback 1.0.57 → 1.0.59

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

@@ -2,7 +2,7 @@ import { nothing } from "lit";
 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 type { FtPublicationRatingSummary, FtSession } 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";
@@ -27,7 +27,7 @@ export declare class FtReaderFeedback extends FtReaderFeedback_base implements F
     ratingAllowed: boolean;
     i18nProperties: FeedbackI18nProperties;
     ratingSummary?: FtPublicationRatingSummary | FtTopicRatingSummary;
-    user?: FtUserProfile;
+    session?: FtSession;
     feedbackInput: FtTextArea;
     from: string;
     feedbackMessage: string;
@@ -54,6 +54,7 @@ export declare class FtReaderFeedback extends FtReaderFeedback_base implements F
     private renderRating;
     private rate;
     private renderFeedbackSection;
+    private onFormSubmitEvent;
     private validFromEmail;
     private sendFeedback;
     private placeholderInEditor;

package/build/ft-reader-feedback.js

@@ -21,7 +21,7 @@ import { withI18n } from "@fluid-topics/ft-i18n";
 import { defaultDesignerMessages, designer } from "./utils/InDesignerFeedbackComponentMessages";
 import { FtTextField } from "@fluid-topics/ft-text-field";
 import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
-import { FtReaderFeatures } from "@fluid-topics/ft-reader-context/build/store/utils/FtReaderService";
+import { FtReaderFeatures } from "@fluid-topics/ft-reader-context";
 class FtReaderFeedback extends withI18n(FtReaderComponent) {
     constructor() {
         super();
@@ -41,14 +41,14 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
     }
     get canAccessFeedback() {
         var _a;
-        return this.user && userHasRole(this.user.roles, "FEEDBACK_USER") && ((_a = this.service) === null || _a === void 0 ? void 0 : _a.isFeatureAccessible(FtReaderFeatures.FEEDBACK));
+        return (_a = this.service) === null || _a === void 0 ? void 0 : _a.isFeatureAccessible(FtReaderFeatures.FEEDBACK, { session: this.session });
     }
     get canAccessRating() {
-        var _a;
-        return this.userHasRatingRole && this.configuredRatingType !== "NO_RATING" && ((_a = this.service) === null || _a === void 0 ? void 0 : _a.isFeatureAccessible(FtReaderFeatures.RATING));
+        var _a, _b;
+        return (_a = this.service) === null || _a === void 0 ? void 0 : _a.isFeatureAccessible(FtReaderFeatures.RATING, { session: this.session, ratingType: (_b = this.ratingSummary) === null || _b === void 0 ? void 0 : _b.type });
     }
     get userHasRatingRole() {
-        return this.user && userHasRole(this.user.roles, "RATING_USER");
+        return this.session && userHasRole(this.session, "RATING_USER");
     }
     get configuredRatingType() {
         var _a, _b;
@@ -74,10 +74,10 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
         return html `
             <div class="ft-reader-feedback">
                 ${this.hideTitle ? nothing : html `
-                            <ft-typography variant="title" part="main-title">
-                                ${this.i18n(this.i18nProperties.feedbackMainTitle)}
-                            </ft-typography>
-                        `}
+                        <ft-typography variant="title" part="main-title">
+                            ${this.i18n(this.i18nProperties.feedbackMainTitle)}
+                        </ft-typography>
+                    `}
                 ${this.renderRatingSection()}
                 ${this.renderFeedbackSection()}
             </div>
@@ -127,17 +127,17 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
                     let active = this.ratingType === "STARS" && this.ratingValue > index;
                     const ratingValue = index + 1;
                     return html `
-                                        <ft-button round part="rating-stars-${ratingValue}"
-                                                   label="${feedback.messages.starsRating(ratingValue)}"
-                                                   tooltipPosition="top"
-                                                   .iconVariant=${this.iconVariant}
-                                                   icon="${active ? this.filledStarIcon : this.emptyStarIcon}"
-                                                   class="ft-reader-feedback--${active ? "active" : "inactive"}"
-                                                   @click=${() => this.rate(this.ratingValue === ratingValue
+                                    <ft-button round part="rating-stars-${ratingValue}"
+                                               label="${feedback.messages.starsRating(ratingValue)}"
+                                               tooltipPosition="top"
+                                               .iconVariant=${this.iconVariant}
+                                               icon="${active ? this.filledStarIcon : this.emptyStarIcon}"
+                                               class="ft-reader-feedback--${active ? "active" : "inactive"}"
+                                               @click=${() => this.rate(this.ratingValue === ratingValue
                         ? undefined
                         : ratingValue)}
-                                        ></ft-button>
-                                    `;
+                                    ></ft-button>
+                                `;
                 })}
                     </div>
                 `;
@@ -188,14 +188,14 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
         }
     }
     renderFeedbackSection() {
-        var _a, _b;
+        var _a, _b, _c;
         if (this.canAccessFeedback) {
             const mailLink = this.feedbackMailLinkBuilder(this.feedbackMessage);
             let button = html `
                 <ft-button primary
+                           type="submit" name="submit"
                            class="ft-reader-feedback--send-feedback"
                            ?disabled=${!this.feedbackMessage || !this.validFromEmail()}
-                           @click=${() => mailLink ? this.onMailerFeedbackSent() : this.sendFeedback()}
                            part="send-feedback">
                     ${feedback.messages.okButton()}
                 </ft-button>
@@ -208,17 +208,18 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
                 `;
             }
             return html `
-                <div class="ft-reader-feedback--feedback" part="feedback-container">
+                <form class="ft-reader-feedback--feedback" part="feedback-container" autocomplete="on"
+                      @submit="${(e) => this.onFormSubmitEvent(e, !!mailLink)}">
                     <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 outlined
-                                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() : ""}
+                    ${((_b = (_a = this.session) === null || _a === void 0 ? void 0 : _a.profile) === null || _b === void 0 ? void 0 : _b.userId) == null && ((_c = this.configuration) === null || _c === void 0 ? void 0 : _c.mailsSentByFluidTopicsForUnauthenticatedUsers) ? html `
+                        <ft-text-field outlined name="email" type="email" autocomplete="email"
+                                       class="ft-reader-feedback--from-input"
+                                       label=${feedback.messages.feedbackfromEmail()}
+                                       @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
@@ -227,15 +228,19 @@ class FtReaderFeedback extends withI18n(FtReaderComponent) {
                                   @live-change=${(e) => this.feedbackMessage = e.detail.trim()}
                     ></ft-text-area>
                     ${button}
-                </div>
+                </form>
             `;
         }
         return this.placeholderInEditor(designer.messages.missingFeedbackRole());
     }
+    onFormSubmitEvent(event, isUsingMailLink) {
+        event.preventDefault();
+        isUsingMailLink ? this.onMailerFeedbackSent() : this.sendFeedback();
+    }
     validFromEmail() {
-        var _a, _b;
+        var _a, _b, _c;
         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))
+        return !(((_b = (_a = this.session) === null || _a === void 0 ? void 0 : _a.profile) === null || _b === void 0 ? void 0 : _b.userId) == null && ((_c = this.configuration) === null || _c === void 0 ? void 0 : _c.mailsSentByFluidTopicsForUnauthenticatedUsers))
             || expression.test(this.from);
     }
     sendFeedback() {
@@ -293,7 +298,7 @@ __decorate([
 ], FtReaderFeedback.prototype, "ratingSummary", void 0);
 __decorate([
     property({ attribute: false })
-], FtReaderFeedback.prototype, "user", void 0);
+], FtReaderFeedback.prototype, "session", void 0);
 __decorate([
     query(".ft-reader-feedback--feedback-input")
 ], FtReaderFeedback.prototype, "feedbackInput", void 0);