Teemu/enhancement/637 feedbackcard update and interactive tooltips

frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json

@@ -1,10 +1,24 @@
 {
     "title": "Tell your opinion about our websites",
-    "input-placeholder": "Please write here",
+    "success-title": "Thank you for your feedback!",
+    "input-placeholder": "(Optional)",
+    "input-placeholder-1": "What bothered you the most?",
+    "input-placeholder-2": "What fell short of your expectations?",
+    "input-placeholder-3": "What could be improved?",
+    "input-placeholder-4": "Any suggestions for improvement?",
+    "input-placeholder-5": "Wonderful! What did you like the most?",
     "send": "Send",
+    "loading": "Sending...",
     "href-to-fullform": "Go to the full form ->",
     "error": "Select emote and then write feedback",
+    "error-submit-failed": "Submission failed. Please try again.",
+    "feedback-text": "Give specific feedback",
     "success": "Thank you very much! We appreciate your feedback.",
-    "href-to-webform": "Website form",
-    "href-to-gameform": "Game form"
+    "href-to-webform": "Web form",
+    "href-to-gameform": "Game form",
+    "rating-label-1": "Bad",
+    "rating-label-2": "Meh..",
+    "rating-label-3": "OK",
+    "rating-label-4": "Good",
+    "rating-label-5": "Great"
 }

frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json

@@ -1,10 +1,24 @@
 {
     "title": "Kerro mielipiteesi verkkosivuistamme",
-    "input-placeholder": "Kirjoita tähän",
+    "success-title": "Kiitos palautteestasi!",
+    "input-placeholder": "(Valinnainen)",
+    "input-placeholder-1": "Harmi! Mikä mätti eniten?",
+    "input-placeholder-2": "Voi ei - mikä jäi vajaaksi?",
+    "input-placeholder-3": "Mikä oli hyvää ja mitä parantaisit?",
+    "input-placeholder-4": "Kiva kuulla! Parannus ehdotuksia?",
+    "input-placeholder-5": "Ihanaa! Mikä oli parasta?",
     "send": "Lähetä",
+    "loading": "Lähetetään...",
     "href-to-fullform": "Siirry koko lomakkeeseen ->",
     "error": "Valitse mieliala ja sitten kirjoita palaute.",
+    "error-submit-failed": "Lähetys epäonnistui. Yritä uudelleen.",
+    "feedback-text": "Anna tarkempi palaute",
     "success": "Kiitos paljon! Arvostamme palautettasi.",
-    "href-to-webform": "Verkkosivulomake",
-    "href-to-gameform": "Pelilomake"
+    "href-to-webform": "Web lomake",
+    "href-to-gameform": "Peli lomake",
+    "rating-label-1": "Huono",
+    "rating-label-2": "Meh..",
+    "rating-label-3": "Ihan ok",
+    "rating-label-4": "Hyvä",
+    "rating-label-5": "Loistava"
 }

frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json

@@ -1,10 +1,19 @@
 {
     "title": "Поделитесь своим мнением о нашем сайте",
+    "success-title": "Спасибо за ваш отзыв!",
     "input-placeholder": "Напишите сюда",
+    "input-placeholder-1": "Что вам не понравилось больше всего?",
+    "input-placeholder-2": "Что не оправдало ваших ожиданий?",
+    "input-placeholder-3": "Что было хорошо и что можно улучшить?",
+    "input-placeholder-4": "Приятно слышать! Есть предложения по улучшению?",
+    "input-placeholder-5": "Замечательно! Что понравилось больше всего?",
     "send": "Отправить",
+    "loading": "Отправка...",
     "href-to-fullform": "Перейти к полной форме ->",
     "error": "Выберите настроение и затем напишите отзыв.",
+    "error-submit-failed": "Отправка не удалась. Попробуйте снова.",
+    "feedback-text": "Оставьте подробный отзыв",
     "success": "Большое спасибо! Мы ценим ваш отзыв.",
-    "href-to-webform": "Отзыв о сайте",
-    "href-to-gameform": "Отзыв о игре"
+    "href-to-webform": "Форма сайта",
+    "href-to-gameform": "Форма игры"
 }

frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx

@@ -8,6 +8,7 @@ import React, {
     memo,
     DetailedHTMLProps,
     InputHTMLAttributes,
+    TextareaHTMLAttributes,
     useState,
     useEffect,
     useId,
@@ -318,12 +319,52 @@ function MultiSelectionDropdown<T>({
     );
 }
 
+type TextareaFieldProps = {
+    label?: string;
+    error?: any;
+    className?: string;
+    textareaProps?: DetailedHTMLProps<
+        TextareaHTMLAttributes<HTMLTextAreaElement>,
+        HTMLTextAreaElement
+    >;
+};
+
+function TextareaField({ label, error, textareaProps, className = '' }: TextareaFieldProps) {
+    const reactId = useId();
+    const slug = slugifyLabel(label);
+    const normalizedReactId = reactId
+        .toString()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-');
+    const textareaId =
+        textareaProps?.id || (slug ? `textarea-${slug}` : `textarea-${normalizedReactId}`);
+
+    return (
+        <div className={classNames(cls.field, {}, [className])}>
+            {label && <label htmlFor={textareaId}>{label}</label>}
+            <textarea
+                id={textareaId}
+                {...textareaProps}
+            />
+            {error && (
+                <p
+                    role="alert"
+                    className={cls.error}
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+}
+
 interface IFormProps extends HTMLAttributes<HTMLFormElement> {}
 
 interface MemoizedFormCompose {
     Button: typeof Button;
     Header: typeof Header;
     InputField: typeof InputField;
+    TextareaField: typeof TextareaField;
     Checkbox: typeof Checkbox;
     MultiSelectionDropdown: typeof MultiSelectionDropdown;
 }
@@ -359,6 +400,7 @@ const MemoizedForm = memo(BaseForm) as NamedExoticComponent<IFormProps> & Memoiz
 MemoizedForm.Button = Button;
 MemoizedForm.Header = Header;
 MemoizedForm.InputField = InputField;
+MemoizedForm.TextareaField = TextareaField;
 MemoizedForm.Checkbox = Checkbox;
 MemoizedForm.MultiSelectionDropdown = MultiSelectionDropdown;
 

frontend-next-migration/src/shared/ui/v2/Feedback/index.ts

@@ -1,3 +1,4 @@
 export { default as FeedbackSideButton } from './ui/FeedbackSideButton/FeedbackSideButton';
 export { default as FeedbackCard } from './ui/FeedbackCard/FeedbackCard';
 export { default as FeedbackEmoji } from './ui/FeedbackEmoji/FeedbackEmoji';
+export { default as FeedbackCardSuccess } from './ui/FeedbackCardSuccess/FeedbackCardSuccess';

frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss

@@ -2,23 +2,21 @@
     background-color: var(--base-card-background);
     display: flex;
     flex-direction: column;
-    margin: 5px;
-    width: 330px !important;
-    height: fit-content;
-    padding-top: 0;
+    max-width: 300px;
+    height: 400px;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     box-shadow: 8px 8px 1px #000000;
     border-width: 4px;
     border-style: solid;
     border-color: #000000;
 }
 
 .feedbackTitle {
-    line-height: 40px !important;
-    font:var(--font-sw-xl);
-    padding: 5px 1em 0 1em;
-    height: fit-content;
+    font-size: 24px;
+    font-family: 'Marko One';
+    font-weight: 400;
+    line-height: 100%;
     color: var(--primary-color);
     text-align: center;
     width: 100%;
@@ -36,64 +34,66 @@
     align-items: center;
     padding: 9px 12px;
     gap: 10px;
-    width: 300px;
+    width:250px;
     height: 48px;
     background: var(--primary-color) !important;
     border: 2px solid var(--drop-shadows) !important;
     border-radius: 25px !important;
     box-shadow: 2px 4px 0 var(--black) !important;
 }
 
+.inputField {
+    label {
+        font: var(--font-dm-m);
+        font-size: 14px;
+        color: var(--white);
+        display: block;
+    }
+}
+
 .textInput {
     font: var(--font-dm-m);
     color: var(--black);
-    width: 300px !important;
-    height: 45px;
-    padding: 10px 10px;
+    height: 81px;
+    padding: 10px;
+    border-radius: 12px;
     background: #FFFFFF;
     border: 2px solid #000000;
     box-shadow: 2px 4px 0 #121212;
-    border-radius: 25px !important;
     box-sizing: border-box;
+    resize: none;
+    vertical-align: top;
+    outline: none;
 }
-
 .emojiList {
     display: inline-flex !important;
     justify-content: space-between;
-    align-items: center;
+    align-items: start;
     width: 100%;
-    padding-bottom: 5px;
-    box-sizing: border-box;
-}
-
-.linkToForm {
-    display: flex;
-    flex-direction: row;
-    font: var(--font-dm-m);
-    color: var(--white);
+    height: 100px;
 }
-
 .linkToFormContainer {
-    width: 300px;
+    max-width:fit-content;
     display: inline-flex !important;
-    flex-direction: row;
     justify-content: space-between;
-    gap: unset;
+    gap: 10px;
 }
 
-.linkToFormContainer > * {
-    display: inline-block;
-    vertical-align: middle;
-    justify-items: end;
-    padding: 0 10px 0 10px;
+.linkToFormLabel {
+    font: var(--font-dm-m);
+    color: var(--white);
+    padding: 0;
+    margin: 0;
 }
 
-.embedabbleVersion {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
+.linkToForm {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font: var(--font-dm-m);
+    color: var(--white);
 }
+
 .externalLinkIcon {
     display: inline;
     vertical-align: middle !important;

frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx

@@ -12,6 +12,7 @@ import { useClientTranslation } from '@/shared/i18n';
 import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
 import cls from './FeedbackCard.module.scss';
 import FeedbackEmoji from '../FeedbackEmoji/FeedbackEmoji';
+import FeedbackCardSuccess from '../FeedbackCardSuccess/FeedbackCardSuccess';
 
 /**
  * Props for the FeedbackCard component.
@@ -35,8 +36,21 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
     const { t } = useClientTranslation('feedbackCard');
     const [feedback, setFeedback] = useState<string>('');
     const [feedbackEmoji, setFeedbackEmoji] = useState<number>();
+    const [isSubmitted, setIsSubmitted] = useState(false);
     const [addFeedback, { isLoading }] = useAddFeedbackMutation();
 
+    const RATING_PLACEHOLDERS: Record<number, string> = {
+        1: t('input-placeholder-1'),
+        2: t('input-placeholder-2'),
+        3: t('input-placeholder-3'),
+        4: t('input-placeholder-4'),
+        5: t('input-placeholder-5'),
+    };
+
+    const currentPlaceholder = feedbackEmoji
+        ? RATING_PLACEHOLDERS[feedbackEmoji]
+        : t('input-placeholder');
+
     /**
      * Display a toast message to the user.
      * @function
@@ -56,7 +70,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
      * It sends the feedback data to the server if valid.
      */
     const submitFeedback = async () => {
-        if (!feedback || !feedbackEmoji) {
+        if (!feedbackEmoji) {
             showToast(t('error'), 'error');
             return;
         }
@@ -69,13 +83,22 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
             await addFeedback(feedbackData).unwrap();
 
             showToast(t('success'), 'success');
+            setIsSubmitted(true);
             setFeedback('');
-            setFeedbackEmoji(undefined);
         } catch {
             showToast(t('error-submit-failed'), 'error');
         }
     };
 
+    if (isSubmitted) {
+        return (
+            <FeedbackCardSuccess
+                className={variant === 'embedabble' ? cls.embedabbleVersion : ''}
+                rating={feedbackEmoji}
+            />
+        );
+    }
+
     return (
         <CustomForm
             className={`${cls.feedbackForm} ${variant === 'embedabble' ? cls.embedabbleVersion : ''}`}
@@ -90,9 +113,10 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
                 value={feedbackEmoji}
                 onImageClick={setFeedbackEmoji}
             />
-            <CustomForm.InputField
-                label=""
-                inputProps={{
+            <CustomForm.TextareaField
+                className={cls.inputField}
+                label={feedbackEmoji ? currentPlaceholder : '\u00A0'}
+                textareaProps={{
                     className: cls.textInput,
                     placeholder: t('input-placeholder'),
                     value: feedback,
@@ -118,6 +142,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
                     </>
                 )}
             </CustomForm.Button>
+            <span className={cls.linkToFormLabel}>{t('feedback-text')}</span>
             <div className={cls.linkToFormContainer}>
                 <a
                     className={cls.linkToForm}
@@ -132,6 +157,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
                         icon={faExternalLink}
                     />
                 </a>
+
                 <a
                     className={cls.linkToForm}
                     href={AppExternalLinks.googleFeedback}