@learningpool/ui 2.4.0 → 2.4.2

package/components/feedback/FeedbackRating/FeedbackRating.d.ts

@@ -49,11 +49,6 @@ interface FeedbackRatingProps {
      * Example: org-12345
      */
     customerId?: string;
-    /**
-     * If true, show the post-rating "more feedback" link by default. Disable to hide it.
-     * Default: true
-     */
-    enableMoreFeedbackLink?: boolean;
     /**
      * Optional expiry for showing the component.
      * When the current time is beyond this timestamp, the component will render null and not show.
@@ -80,5 +75,5 @@ interface FeedbackRatingProps {
  * - Calls `submitRating` on star click (or a placeholder POST)
  * - After rating, shows a link to provide more feedback (opens in new tab)
  */
-export default function FeedbackRating({ featureId, productId, apiKey, token, submitRating, message, email, feedbackFormUrl, hubBaseUrl, customerId, enableMoreFeedbackLink, expiresAt, pageUrl, testIdPrefix, metadata }: FeedbackRatingProps): JSX.Element | null;
+export default function FeedbackRating({ featureId, productId, apiKey, token, submitRating, message, email, feedbackFormUrl, hubBaseUrl, customerId, expiresAt, pageUrl, testIdPrefix, metadata }: FeedbackRatingProps): JSX.Element | null;
 export {};

package/components/feedback/FeedbackRating/FeedbackRating.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Alert, Box, Button, Collapse, Link, Rating, Typography, useTheme } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { Alert, Box, Button, Collapse, Link, Rating, Stack, Typography, useTheme } from '@mui/material';
 import { Constants } from '../../stream/AppSwitcher/constants';
 import { defaultMessages } from '../../../lang/en-us';
 const LOCAL_STORAGE_PREFIX = 'admin-feedback';
@@ -25,7 +26,7 @@ const defaultMessageNode = (_jsxs(_Fragment, { children: [_jsx("strong", { child
  * - Calls `submitRating` on star click (or a placeholder POST)
  * - After rating, shows a link to provide more feedback (opens in new tab)
  */
-export default function FeedbackRating({ featureId, productId, apiKey, token, submitRating, message, email, feedbackFormUrl, hubBaseUrl, customerId, enableMoreFeedbackLink, expiresAt, pageUrl, testIdPrefix, metadata }) {
+export default function FeedbackRating({ featureId, productId, apiKey, token, submitRating, message, email, feedbackFormUrl, hubBaseUrl, customerId, expiresAt, pageUrl, testIdPrefix, metadata }) {
     const theme = useTheme();
     const localStorageKeys = useMemo(() => ({
         rating: `${LOCAL_STORAGE_PREFIX}-rating-${featureId}`,
@@ -34,24 +35,24 @@ export default function FeedbackRating({ featureId, productId, apiKey, token, su
     const [open, setOpen] = useState(true);
     const [isDismissed, setIsDismissed] = useState(false);
     const [rating, setRating] = useState(null);
-    const [showMoreFeedback, setShowMoreFeedback] = useState(false);
     const hubFeedbackUrl = hubBaseUrl || Constants.BaseUrl;
     const userMessage = message ?? defaultMessageNode;
     const resolvedPageUrl = pageUrl ?? (typeof window !== 'undefined' ? window.location.href : '');
     const testIdPrefixValue = testIdPrefix ?? 'feedback-rating';
-    const enableMoreFeedbackLinkValue = enableMoreFeedbackLink ?? true;
     const buildDefaultFeedbackUrl = useCallback((value) => {
         const baseFormUrl = feedbackFormUrl || DEFAULT_FEEDBACK_FORM_URL;
         // Use Google Form entry IDs for prefill
         const params = new URLSearchParams({
             [GOOGLE_FORM_CONFIG.PARAMS.usp]: 'pp_url',
-            [GOOGLE_FORM_CONFIG.PARAMS.rating]: value.toString(),
             [GOOGLE_FORM_CONFIG.PARAMS.email]: email || '',
             [GOOGLE_FORM_CONFIG.PARAMS.featureId]: featureId,
             [GOOGLE_FORM_CONFIG.PARAMS.orgAlias]: customerId || '',
             [GOOGLE_FORM_CONFIG.PARAMS.productId]: productId,
             [GOOGLE_FORM_CONFIG.PARAMS.pageUrl]: resolvedPageUrl
         });
+        if (value != null && value >= 1 && value <= 5) {
+            params.append(GOOGLE_FORM_CONFIG.PARAMS.rating, value.toString());
+        }
         return `${baseFormUrl}?${params.toString()}`;
     }, [feedbackFormUrl, featureId, customerId, productId, resolvedPageUrl, email]);
     const expiryTimestamp = useMemo(() => {
@@ -78,14 +79,13 @@ export default function FeedbackRating({ featureId, productId, apiKey, token, su
                 const parsed = Number(storedRating);
                 if (!Number.isNaN(parsed) && parsed >= 1 && parsed <= 5) {
                     setRating(parsed);
-                    setShowMoreFeedback(enableMoreFeedbackLinkValue);
                 }
             }
         }
         catch {
             // ignore localStorage errors
         }
-    }, [localStorageKeys.dismissed, localStorageKeys.rating, enableMoreFeedbackLinkValue]);
+    }, [localStorageKeys.dismissed, localStorageKeys.rating]);
     const saveRating = useCallback((value) => {
         try {
             const ls = typeof window !== 'undefined' ? window.localStorage : undefined;
@@ -152,10 +152,7 @@ export default function FeedbackRating({ featureId, productId, apiKey, token, su
         setRating(value);
         saveRating(value);
         await (submitRating ? submitRating(value, featureId) : defaultSubmit(value));
-        if (enableMoreFeedbackLinkValue) {
-            setShowMoreFeedback(true);
-        }
-    }, [saveRating, submitRating, defaultSubmit, enableMoreFeedbackLinkValue, featureId]);
+    }, [saveRating, submitRating, defaultSubmit, featureId]);
     const handleDismiss = useCallback(() => {
         setOpen(false);
         setTimeout(() => {
@@ -165,42 +162,40 @@ export default function FeedbackRating({ featureId, productId, apiKey, token, su
     if (isDismissed || isExpired) {
         return null;
     }
-    const feedbackUrl = rating ? buildDefaultFeedbackUrl(rating) : undefined;
-    return (_jsx(Box, { sx: { marginBottom: theme.spacing(2) }, children: _jsx(Collapse, { in: open, children: _jsx(Alert, { severity: "info", icon: false, sx: {
+    const feedbackUrl = buildDefaultFeedbackUrl(rating);
+    return (_jsx(Box, { sx: { marginBottom: theme.spacing(2) }, children: _jsx(Collapse, { in: open, children: _jsx(Alert, { severity: 'info', icon: false, sx: {
                     display: 'flex',
                     alignItems: 'center',
                     overflowX: 'hidden',
                     '& .MuiAlert-message': {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
                         width: '100%',
                         minWidth: 0,
-                        overflow: 'hidden'
+                        overflow: 'hidden',
+                        display: 'block'
                     }
-                }, "data-testid": `${testIdPrefixValue}-alert-${featureId}`, action: _jsx(Button, { color: "inherit", size: "small", onClick: handleDismiss, "data-testid": `${testIdPrefixValue}-dismiss-${featureId}`, sx: { alignSelf: 'center' }, children: defaultMessages.dismiss }), children: _jsxs(Box, { sx: {
+                }, "data-testid": `${testIdPrefixValue}-alert-${featureId}`, action: _jsx(Button, { color: 'inherit', size: 'small', onClick: handleDismiss, "data-testid": `${testIdPrefixValue}-dismiss-${featureId}`, sx: { alignSelf: 'center', minWidth: 0, padding: 0 }, "aria-label": defaultMessages.dismiss, children: _jsx(CloseIcon, { fontSize: 'small' }) }), children: _jsxs(Box, { sx: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
                         width: '100%',
                         gap: 2,
                         minWidth: 0
-                    }, children: [_jsx(Typography, { variant: "subtitle2", sx: {
-                                flex: 1,
-                                minWidth: 0,
-                                whiteSpace: 'normal',
-                                overflowWrap: 'anywhere',
-                                wordBreak: 'break-word'
-                            }, children: userMessage }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flexShrink: 0 }, children: [_jsx(Rating, { name: `feedback-rating-${featureId}`, value: rating, onChange: (_event, newValue) => {
-                                        if (newValue) {
-                                            handleStarClick(newValue);
-                                        }
-                                    }, sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        '& .MuiRating-iconFilled': { color: theme.palette.info.main },
-                                        '& .MuiRating-iconHover': { color: theme.palette.info.light },
-                                        cursor: 'pointer'
-                                    }, "data-testid": `${testIdPrefixValue}-stars-${featureId}` }), showMoreFeedback && enableMoreFeedbackLinkValue &&
-                                    _jsx(Link, { href: feedbackUrl, target: "_blank", rel: "noopener noreferrer", underline: "hover", variant: "body2", "data-testid": `${testIdPrefixValue}-more-${featureId}`, children: defaultMessages['feedback-message-more-text'] })] })] }) }) }) }));
+                    }, children: [_jsxs(Stack, { children: [_jsx(Typography, { variant: 'subtitle2', sx: {
+                                        flex: 1,
+                                        minWidth: 0,
+                                        whiteSpace: 'normal',
+                                        overflowWrap: 'anywhere',
+                                        wordBreak: 'break-word'
+                                    }, children: userMessage }), _jsx(Link, { href: feedbackUrl, target: '_blank', rel: 'noopener noreferrer', underline: 'hover', variant: 'body2', "data-testid": `${testIdPrefixValue}-more-${featureId}`, children: defaultMessages['feedback-message-more-text'] })] }), _jsx(Rating, { name: `feedback-rating-${featureId}`, value: rating, onChange: (_event, newValue) => {
+                                if (newValue) {
+                                    handleStarClick(newValue);
+                                }
+                            }, sx: {
+                                display: 'flex',
+                                alignSelf: 'center',
+                                alignItems: 'center',
+                                '& .MuiRating-iconFilled': { color: theme.palette.info.main },
+                                '& .MuiRating-iconHover': { color: theme.palette.info.light },
+                                cursor: 'pointer'
+                            }, "data-testid": `${testIdPrefixValue}-stars-${featureId}` })] }) }) }) }));
 }

package/lang/en-us.js

@@ -34,6 +34,6 @@ export const defaultMessages = {
     // Feedback Rating
     'feedback-message-prefix': "We've made some changes.",
     'feedback-message-suffix': 'Share your feedback with a star rating.',
-    'feedback-message-more-text': 'Click here to give more feedback',
+    'feedback-message-more-text': 'Give Further Feedback',
     dismiss: 'Dismiss'
 };

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "2.4.0",
+  "version": "2.4.2",
   "private": false,
   "main": "index.js",
   "module": "index.js",