add survey for pipe publishing

Author: m0nggh

package-lock.json

@@ -41,6 +41,16 @@ const updateFlowStatus: MutationResolvers['updateFlowStatus'] = async (
   await flow.$query().patch({
     active: params.input.active,
     publishedAt: params.input.active ? new Date().toISOString() : null,
+    config: {
+      ...flow.config,
+      // When publishing: set to true if undefined else false
+      // When unpublishing: keep existing value
+      showSurvey: params.input.active
+        ? flow.config?.showSurvey === undefined
+          ? true
+          : false
+        : flow.config?.showSurvey,
+    },
   })
 
   const triggerStep = await flow.getTriggerStep()

packages/backend/src/graphql/mutations/update-flow-status.ts

@@ -359,6 +359,7 @@ type FlowConfig {
   duplicateCount: Int
   demoConfig: FlowDemoConfig
   templateConfig: FlowTemplateConfig
+  showSurvey: Boolean
 }
 
 type FlowErrorConfig {

packages/backend/src/graphql/schema.graphql

@@ -17,6 +17,8 @@ const helmetOptions: HelmetOptions = {
         'https://*.launchdarkly.com',
         // For proxying datadog rum
         'https://rum-proxy.plumber.gov.sg',
+        // For Lens Survey
+        'https://lens.hack2025.com.sg',
         appConfig.baseUrl,
       ],
       // for google fonts

packages/backend/src/helpers/csp.ts

@@ -16,8 +16,8 @@
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
-    "@emotion/react": "11.10.5",
-    "@emotion/styled": "11.10.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@fontsource/space-grotesk": "4.5.13",
     "@hookform/resolvers": "^2.8.8",
     "@mui/icons-material": "5.11.0",
@@ -41,6 +41,7 @@
     "dedent": "1.5.1",
     "escape-html": "1.0.3",
     "file-saver": "2.0.5",
+    "lens-widget": "1.35.0",
     "lodash": "^4.17.21",
     "lodash.get": "4.4.2",
     "lottie-web": "5.12.2",
@@ -49,7 +50,7 @@
     "notistack": "2.0.8",
     "papaparse": "5.4.1",
     "react-hook-form": "^7.17.2",
-    "react-icons": "4.10.1",
+    "react-icons": "^4.12.0",
     "react-intl": "6.2.7",
     "react-json-tree": "^0.18.0",
     "react-markdown": "8.0.7",

packages/frontend/package.json

@@ -12,9 +12,11 @@ import {
   Flex,
 } from '@chakra-ui/react'
 import { IconButton } from '@opengovsg/design-system-react'
+import { Rating } from 'lens-widget'
 
 import FlowStep from '@/components/FlowStep'
 import FlowStepGroup from '@/components/FlowStepGroup'
+import appConfig from '@/config/app'
 import { EditorContext } from '@/contexts/Editor'
 import {
   StepExecutionsToIncludeContext,
@@ -24,6 +26,7 @@ import { CREATE_STEP } from '@/graphql/mutations/create-step'
 import { UPDATE_STEP } from '@/graphql/mutations/update-step'
 import { GET_APPS } from '@/graphql/queries/get-apps'
 import { GET_FLOW } from '@/graphql/queries/get-flow'
+import useAuthentication from '@/hooks/useAuthentication'
 
 interface AddStepButtonProps {
   onClick: () => void
@@ -97,6 +100,9 @@ export default function Editor(props: EditorProps): React.ReactElement {
   )
 
   const { flow, steps: rawSteps } = props
+  const showSurvey = flow.active && flow.config?.showSurvey
+  const { currentUser } = useAuthentication()
+
   const steps = useMemo(
     // Populate each step's flowId so that IStep isn't LYING about flowId being
     // non-undefined. We do it here instead of fetching in GraphQL since all
@@ -294,6 +300,18 @@ export default function Editor(props: EditorProps): React.ReactElement {
           )}
         </StepExecutionsToIncludeProvider>
       </Flex>
+
+      {showSurvey && (
+        <Rating
+          clientKey={appConfig.lensSurveyClientKey}
+          brandColour="#cf1a68"
+          attributes={[
+            `FlowId: ${flow.id}`,
+            `UserEmail: ${currentUser?.email}`,
+            ...(appConfig.env !== 'prod' ? [`Env: ${appConfig.env}`] : []),
+          ]}
+        />
+      )}
     </Flex>
   )
 }

packages/frontend/src/components/Editor/index.tsx

@@ -37,7 +37,9 @@ export default function EditorLayout() {
   const { flowId } = useParams()
   const [searchParams, setSearchParams] = useSearchParams()
   const [updateFlow] = useMutation(UPDATE_FLOW)
-  const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS)
+  const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS, {
+    refetchQueries: [GET_FLOW],
+  })
   const { data, loading, error } = useQuery(GET_FLOW, {
     variables: { id: flowId },
   })

packages/frontend/src/components/EditorLayout/index.tsx

@@ -4,6 +4,7 @@ interface AppConfig {
   isDev: boolean
   env: string
   version: string
+  lensSurveyClientKey: string
 }
 
 function getAppConfig(): AppConfig {
@@ -22,6 +23,7 @@ function getAppConfig(): AppConfig {
         launchDarklyClientId: '64bf4b539077f112ef24e4ae',
         sgidClientId: 'PLUMBER-c24255a5',
         isDev: false,
+        lensSurveyClientKey: 'cm85ca2f300053ooz4vydrmyw',
         ...commonEnv,
       }
     case 'uat':
@@ -30,13 +32,15 @@ function getAppConfig(): AppConfig {
         launchDarklyClientId: '65016ca0b45b7712e6c95703',
         sgidClientId: 'PLUMBERSTAGING-776896b1',
         isDev: false,
+        lensSurveyClientKey: 'cm86psst900052orfqetz3gz5',
         ...commonEnv,
       }
     default:
       return {
         launchDarklyClientId: '64bf4b539077f112ef24e4ad',
         sgidClientId: 'PLUMBERLOCALDEV-dc1a72f7',
         isDev: true,
+        lensSurveyClientKey: 'cm86psst900052orfqetz3gz5', // same as staging
         ...commonEnv,
       }
   }

packages/frontend/src/config/app.ts

@@ -40,6 +40,7 @@ export const GET_FLOW = gql`
           formId
           tileId
         }
+        showSurvey
       }
       pendingTransfer {
         id

packages/frontend/src/graphql/queries/get-flow.ts

@@ -174,6 +174,7 @@ export interface IFlowConfig {
   duplicateCount?: number
   demoConfig?: IFlowDemoConfig
   templateConfig?: IFlowTemplateConfig
+  showSurvey?: boolean
 }
 
 export interface IFlowErrorConfig {