From 13474ec4ccb6aeff57fbacbe93e5b838cca8c768 Mon Sep 17 00:00:00 2001 From: Ting Zuge Date: Fri, 26 Jul 2024 12:45:47 -0600 Subject: [PATCH] chore(tenant-management-webapp): updating examples on feedback overview --- .../admin/services/feedback/overview.tsx | 54 ++++++++++++++----- .../services/feedback/styled-components.ts | 10 ++++ 2 files changed, 50 insertions(+), 14 deletions(-) diff --git a/apps/tenant-management-webapp/src/app/pages/admin/services/feedback/overview.tsx b/apps/tenant-management-webapp/src/app/pages/admin/services/feedback/overview.tsx index 9a1cd26582..298ad0c827 100644 --- a/apps/tenant-management-webapp/src/app/pages/admin/services/feedback/overview.tsx +++ b/apps/tenant-management-webapp/src/app/pages/admin/services/feedback/overview.tsx @@ -1,9 +1,11 @@ import React, { FunctionComponent, useEffect } from 'react'; import { GoAButton } from '@abgov/react-components-new'; -import { PRE, FeedbackSubHeading, FeedbackOverviewSection } from '../feedback/styled-components'; +import { CodeSpan, PRE, FeedbackOverviewSection } from '../feedback/styled-components'; import { useNavigate } from 'react-router-dom'; import { NoPaddingH2 } from '@components/AppHeader'; import { ExternalLink } from '@components/icons/ExternalLink'; +import { useSelector } from 'react-redux'; +import { RootState } from '@store/index'; interface OverviewProps { setActiveEdit: (boolean) => void; @@ -12,6 +14,7 @@ interface OverviewProps { export const FeedbackOverview: FunctionComponent = (props) => { const { setActiveEdit, setActiveIndex } = props; + const tenant = useSelector((state: RootState) => state.tenant); useEffect(() => { document.body.style.overflow = 'unset'; }, []); @@ -41,21 +44,44 @@ export const FeedbackOverview: FunctionComponent = (props) => { Include the feedback script in your site, and initialize it from javascript. On initialization, the script will attach a widget element which includes a badge and form that users can use to send feedback.

-
    -
  • Code example of the <script> with src to feedback API in <head>
    • +

    + Reference the feedback widget script in <head> to set the{' '} + adspFeedback global variable. + 

    +            <head>
+            
    
+            ...
+            
    
+            <script
+            src="https://feedback-service.adsp.alberta.ca/feedback/v1/script/adspFeedback.js"></script>
+            
    
+            </head>
+
    +

    +

    + Initialize the widget via the adspFeedback variable in <body>{' '} + to identify your tenant and mount the widget element to DOM. A getAccessToken function + for feedback under the user's context is required for sites that don't allow anonymous feedback. 

    -            <head> 

     ... 

    
-            <script src="https://feedback-service.adsp.alberta.ca/feedback/v1/script/adspFeedback.js">
-            </script>

    </head>
+            <body>
+            
    
+            ...
+            
    
+            <script>
+            
    
+            adspFeedback.initialize({
+            
    
+            {`  tenant: '${tenant.name}',`}
+            
    
+            {`  getAccessToken: () => Promise.resolve(),`}
+            
    
+            });
+            
    
+            </script>
+            
    
+            </body>
    -
  • - Code example of the <script> in body to{' '} - 
    -              <body> 

     ... 

    <script> adspFeedback.initialize({tenant: '<tenant
-              name>'})

    </script>

    </body>
-
    -
    • -
+

For more information on integrating the feedback service with your application please see the{' '}