Merge pull request #3656 from olindost/feature/3535-add-sentiment-feedback-option

Added Sentiment Feedback Option to Feedback Modal

Author: MSzalowski

govtool/frontend/src/context/usersnapContext.tsx

@@ -6,6 +6,7 @@ import React, {
   useMemo,
 } from "react";
 import { InitOptions, WidgetApi, loadSpace } from "@usersnap/browser";
+import { useTranslation } from "react-i18next";
 
 type WidgetValues = {
   assignee?: string;
@@ -65,6 +66,7 @@ export const UsersnapProvider = ({
   children,
 }: UsersnapProviderProps) => {
   const [usersnapApi, setUsersnapApi] = useState<UsersnapAPI | null>(null);
+  const { t } = useTranslation();
 
   const openFeedbackWindow = useCallback(() => {
     if (usersnapApi) {
@@ -77,15 +79,47 @@ export const UsersnapProvider = ({
       if (API_KEY) {
         try {
           const api = await loadSpace(API_KEY);
-          api.init(initParams);
+          api.init({
+            ...initParams,
+            customFields: {
+              sentiment_score: {
+                type: 'rating',
+                label: t("feedback.sentimentScore"),
+                required: true,
+                options: [1, 2, 3, 4, 5]
+              },
+              additional_notes: {
+                type: 'textarea',
+                label: t("feedback.additionalNotes"),
+                required: false
+              }
+            },
+            feedbackTypes: [
+              {
+                id: 'bug',
+                label: t("feedback.reportBug"),
+                description: t("feedback.reportBugDescription")
+              },
+              {
+                id: 'idea',
+                label: t("feedback.suggestIdea"),
+                description: t("feedback.suggestIdeaDescription")
+              },
+              {
+                id: 'sentiment',
+                label: t("feedback.sentimentFeedback"),
+                description: t("feedback.sentimentFeedbackDescription")
+              }
+            ]
+          });
           setUsersnapApi(api);
         } catch (error) {
           console.error(error);
         }
       }
     };
     initUsersnapSpace();
-  }, [initParams, API_KEY]);
+  }, [initParams, API_KEY, t]);
 
   const value = useMemo(() => ({ openFeedbackWindow }), [openFeedbackWindow]);
 
@@ -98,4 +132,4 @@ export const UsersnapProvider = ({
 
 export function useUsersnapApi() {
   return useContext(UsersnapContext);
-}
+}

govtool/frontend/src/i18n/locales/en.json

@@ -109,8 +109,8 @@
         "noDelegationDescription": "Find a DRep to vote on your behalf.",
         "noDelegationActionButton": "View DRep Directory",
         "dRepDelegationTitle": "Your Voting Power of <strong>₳{{ada}}</strong>\nis Delegated to:",
-        "noConfidenceDelegationTitle": "You have delegated your Voting Power <strong>₳{{ada}}</strong>\nto “No Confidence”",
-        "abstainDelegationTitle": "You have delegated your Voting Power <strong>₳{{ada}}</strong>\nto “Abstain”",
+        "noConfidenceDelegationTitle": "You have delegated your Voting Power <strong>₳{{ada}}</strong>\nto \"No Confidence\"",
+        "abstainDelegationTitle": "You have delegated your Voting Power <strong>₳{{ada}}</strong>\nto \"Abstain\"",
         "abstainDescription": "You have selected to apply your Voting Power to Abstain on every vote.",
         "noDescription": "You have selected to apply your Voting Power to No Confidence on every vote.",
         "inProgress": {
@@ -283,8 +283,8 @@
     "abstainCardDefaultTitle": "Abstain from Every Vote",
     "automatedVotingOptions": "Automated Voting Options",
     "editBtn": "Edit DRep data",
-    "delegatedToAbstainTitle": "You have delegated ₳{{ada}} to “Abstain”",
-    "delegatedToNoConfidenceTitle": "You have delegated ₳{{ada}} to “No Confidence”",
+    "delegatedToAbstainTitle": "You have delegated ₳{{ada}} to \"Abstain\"",
+    "delegatedToNoConfidenceTitle": "You have delegated ₳{{ada}} to \"No Confidence\"",
     "delegatedToAbstainDescription": "You have selected to apply your Voting Power to Abstain on every vote.",
     "delegatedToNoConfidenceDescription": "You have selected to apply your Voting Power to No Confidence on every vote.",
     "delegationOptions": "Delegation Options",
@@ -429,7 +429,7 @@
     "chooseHowToVote": "Choose how you want to vote:",
     "contextAboutYourVote": "Context about your vote",
     "dataMissing": "Data Missing",
-    "dataMissingTooltipExplanation": "Please click “View Details” for more information.",
+    "dataMissingTooltipExplanation": "Please click \"View Details\" for more information.",
     "details": "Governance Details:",
     "expiresDateWithEpoch": "Expires: <0>{{date}}</0> <1>(Epoch {{epoch}})</1>",
     "expiryDate": "Expiry date:",
@@ -656,7 +656,7 @@
     },
     "pendingValidation": {
       "title": "GovTool Is Checking Your Data",
-      "message": "GovTool will read the URL that you supplied and make a check to see if it’s identical with the information that you entered on the form."
+      "message": "GovTool will read the URL that you supplied and make a check to see if it's identical with the information that you entered on the form."
     }
   },
   "dRepData": {
@@ -694,7 +694,7 @@
       "description": "Looks like you have already successfully completed your registration and you currently are a DRep.\n\nYou can view your details in the DRep Directory.",
       "viewDetails": "View your DRep details"
     },
-    "becomeADRep": "Become a DRep",
+    "becomeADrep": "Become a DRep",
     "descriptionStepTwo": "By clicking register you create your DRep ID within your wallet and become a DRep.\n\nOnce the registration has completed your DRep ID will be shown on your dashboard. You will be able to share your DRep ID so that other ada holders can delegate their voting power to you.",
     "headingStepTwo": "Confirm DRep registration",
     "register": "Register",
@@ -721,7 +721,7 @@
     }
   },
   "retirement": {
-    "notADRep": {
+    "notADrep": {
       "title": "You are not a DRep",
       "description": "Looks like you cannot retire, because currently you are not a DRep."
     },
@@ -769,7 +769,7 @@
       },
       "noConfidence": {
         "heading": "No confidence",
-        "paragraphOne": "If you don’t have trust in the current constitutional committee you signal ‘No-confidence’. By voting ‘No’ means you don’t want governance actions to be ratified."
+        "paragraphOne": "If you don't have trust in the current constitutional committee you signal 'No-confidence'. By voting 'No' means you don't want governance actions to be ratified."
       },
       "todRep": {
         "heading": "Delegation to DRep",
@@ -782,7 +782,7 @@
     },
     "expiryDate": {
       "heading": "Expiry Date",
-      "paragraphOne": "The date when the governance action will expiry if it doesn’t reach ratification thresholds.",
+      "paragraphOne": "The date when the governance action will expiry if it doesn't reach ratification thresholds.",
       "paragraphTwo": "IMPORTANT: If the governance action is ratified before the expiry date it will be considered ratified and it will not be available to vote on afterwards."
     },
     "submissionDate": {
@@ -796,7 +796,7 @@
     }
   },
   "wallet": {
-    "cantSeeWalletQuestion": "Can’t see your wallet? Check what wallets are currently compatible with GovTool ",
+    "cantSeeWalletQuestion": "Can't see your wallet? Check what wallets are currently compatible with GovTool ",
     "chooseWallet": "Choose the wallet you want to connect with:",
     "connect": "Connect",
     "connectWallet": "Connect Wallet",
@@ -833,7 +833,7 @@
     },
     "intersectWebsite": {
       "title": "Intersect website",
-      "description": "Intersect is a member-based organization for the Cardano ecosystem — putting the community at the center of Cardano’s development",
+      "description": "Intersect is a member-based organization for the Cardano ecosystem — putting the community at the center of Cardano's development",
       "link": "Intersect website"
     }
   },
@@ -855,7 +855,18 @@
   "cip129DrepId": "(CIP-129) DRep ID",
   "cip105DRepId": "Legacy DRep ID (CIP-105)",
   "email": "Email",
-  "feedback": "Feedback",
+  "feedback": {
+    "title": "Feedback",
+    "reportBug": "Report a Bug",
+    "suggestIdea": "Suggest a New Idea",
+    "sentimentFeedback": "Sentiment Feedback",
+    "sentimentScore": "How would you rate your experience?",
+    "additionalNotes": "Additional Notes",
+    "submit": "Submit Feedback",
+    "reportBugDescription": "Something is not working as expected",
+    "suggestIdeaDescription": "Share your ideas for improvement",
+    "sentimentFeedbackDescription": "Rate your experience and provide feedback"
+  },
   "filter": "Filter",
   "goBack": "Go back",
   "goToMainnet": "Go to Mainnet",
@@ -887,4 +898,4 @@
   "viewDetails": "View details",
   "votingPower": "Voting power",
   "yourself": "Yourself"
-}
+}

tests/govtool-frontend/playwright/tests/10-user-snap/userSnap.spec.ts

@@ -187,4 +187,27 @@ test.describe("Submit Usersnap", () => {
 
     await expect(page.getByText("Thank you!")).toBeVisible();
   });
-});
+
+  test("10F. Should submit sentiment feedback", async ({ page }) => {
+    // Intercept Usersnap submit API
+    await interceptUsersnap(page);
+    await interceptBucket(page);
+
+    await page
+      .getByRole("button", { name: "Share Your Experience" })
+      .click();
+
+    // Select a rating
+    await page.getByLabel("How would you rate your experience?").click();
+    await page.getByRole("button", { name: "4" }).click();
+
+    // Add additional notes
+    await page
+      .getByPlaceholder("Additional Notes")
+      .fill(faker.lorem.paragraph(2));
+
+    await page.getByRole("button", { name: "Submit Feedback" }).click();
+
+    await expect(page.getByText("Thank you!")).toBeVisible();
+  });
+});