From e72b181f36cc4e82e363412fe44530ef49cd3ed7 Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Fri, 9 Dec 2022 11:34:01 -0700
Subject: [PATCH 1/2] Adds basic survey modal and connects the staking flow to
 open on bounce

---
 .../Modal/DappSurveyModal/index.tsx           | 57 +++++++++++++++++++
 src/components/Modal/ModalCloseButton.tsx     | 17 +++++-
 .../Modal/StakingBounceSurveyModal/index.tsx  | 17 ++++++
 src/components/Modal/SubmitStake/index.tsx    | 13 +++--
 src/enums/modal.ts                            |  1 +
 src/types/modal.ts                            |  3 +-
 src/types/posthog.ts                          |  1 +
 7 files changed, 103 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Modal/DappSurveyModal/index.tsx
 create mode 100644 src/components/Modal/StakingBounceSurveyModal/index.tsx

diff --git a/src/components/Modal/DappSurveyModal/index.tsx b/src/components/Modal/DappSurveyModal/index.tsx
new file mode 100644
index 000000000..95cf2246e
--- /dev/null
+++ b/src/components/Modal/DappSurveyModal/index.tsx
@@ -0,0 +1,57 @@
+import { FC } from "react"
+import {
+  Button,
+  Divider,
+  H5,
+  ModalBody,
+  ModalCloseButton,
+  ModalFooter,
+  ModalHeader,
+} from "@threshold-network/components"
+import { BaseModalProps } from "../../../types"
+import withBaseModal from "../withBaseModal"
+import InfoBox from "../../InfoBox"
+import { PosthogEvent } from "../../../types/posthog"
+
+interface SurveyQuestion {
+  text: string
+  value: string
+}
+
+interface DappSurveyModalProps extends BaseModalProps {
+  title: string
+  captureEvent: PosthogEvent
+  surveyQuestions: SurveyQuestion[]
+}
+
+const DappSurveyModal: FC<DappSurveyModalProps> = ({
+  closeModal,
+  title,
+  captureEvent,
+  surveyQuestions,
+}) => {
+  const handleSubmit = () => {
+    console.log("post hog capture ", captureEvent)
+  }
+
+  return (
+    <>
+      <ModalHeader>dApp Survey</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>
+        <InfoBox>
+          <H5 mb={2}>{title}</H5>
+        </InfoBox>
+        <Divider />
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={closeModal} variant="outline" mr={2}>
+          Dismiss
+        </Button>
+        <Button onClick={handleSubmit}>Submit</Button>
+      </ModalFooter>
+    </>
+  )
+}
+
+export default withBaseModal(DappSurveyModal)
diff --git a/src/components/Modal/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton.tsx
index 3073cfa06..7a7f5f79f 100644
--- a/src/components/Modal/ModalCloseButton.tsx
+++ b/src/components/Modal/ModalCloseButton.tsx
@@ -1,7 +1,22 @@
 import { FC } from "react"
 import { ModalCloseButton as _ModalCloseButton } from "@threshold-network/components"
+import { useStyles } from "@chakra-ui/system"
+import { CloseButton } from "@chakra-ui/close-button"
+
+const ModalCloseButton: FC<{ onClick?: VoidFunction }> = ({ onClick }) => {
+  const styles = useStyles()
+
+  if (onClick) {
+    // avoids the auto-close functionality of the ModalCloseButton if a custom click handler is passed
+    return (
+      <CloseButton
+        __css={styles.closeButton}
+        className="chakra-modal__close-btn ph-no-capture"
+        onClick={onClick}
+      />
+    )
+  }
 
-const ModalCloseButton: FC = () => {
   return <_ModalCloseButton className="ph-no-capture" />
 }
 
diff --git a/src/components/Modal/StakingBounceSurveyModal/index.tsx b/src/components/Modal/StakingBounceSurveyModal/index.tsx
new file mode 100644
index 000000000..566b12bdf
--- /dev/null
+++ b/src/components/Modal/StakingBounceSurveyModal/index.tsx
@@ -0,0 +1,17 @@
+import { FC } from "react"
+import DappSurveyModal from "../DappSurveyModal"
+import { PosthogEvent } from "../../../types/posthog"
+import { BaseModalProps } from "../../../types"
+
+const StakingBounceSurveyModal: FC<BaseModalProps> = (props) => {
+  return (
+    <DappSurveyModal
+      title="We've noticed you did not complete your staking. What happened?"
+      captureEvent={PosthogEvent.StakingFlowBounce}
+      surveyQuestions={[{ text: "I mis clicked", value: "MISCLICK" }]}
+      {...props}
+    />
+  )
+}
+
+export default StakingBounceSurveyModal
diff --git a/src/components/Modal/SubmitStake/index.tsx b/src/components/Modal/SubmitStake/index.tsx
index 98647a50b..e47875748 100644
--- a/src/components/Modal/SubmitStake/index.tsx
+++ b/src/components/Modal/SubmitStake/index.tsx
@@ -1,10 +1,10 @@
 import { FC } from "react"
 import {
   Button,
+  Divider,
   ModalBody,
   ModalFooter,
   ModalHeader,
-  Divider,
 } from "@chakra-ui/react"
 import { BodyLg, BodySm, H5 } from "@threshold-network/components"
 import withBaseModal from "../withBaseModal"
@@ -19,7 +19,12 @@ import StakingStats from "../../StakingStats"
 import ModalCloseButton from "../ModalCloseButton"
 
 const SubmitStakeModal: FC<BaseModalProps> = () => {
-  const { closeModal, openModal } = useModal()
+  const { openModal } = useModal()
+
+  const openStakingBounceSurveyModal = () => {
+    console.log("opening the modal....?")
+    openModal(ModalType.StakingBounceSurvey)
+  }
 
   // stake transaction, opens success modal on success callback
   const { stake } = useStakeTransaction((tx) =>
@@ -41,7 +46,7 @@ const SubmitStakeModal: FC<BaseModalProps> = () => {
         <H5 mr={2}>Stake Tokens</H5>
         <BodySm>(Step 1)</BodySm>
       </ModalHeader>
-      <ModalCloseButton />
+      <ModalCloseButton onClick={openStakingBounceSurveyModal} />
       <ModalBody>
         <InfoBox variant="modal" spacing={6} mb={6}>
           <H5>You are about to make a deposit into the T Staking Contract.</H5>
@@ -59,7 +64,7 @@ const SubmitStakeModal: FC<BaseModalProps> = () => {
         <Divider mt="4" />
       </ModalBody>
       <ModalFooter>
-        <Button onClick={closeModal} variant="outline" mr={2}>
+        <Button onClick={openStakingBounceSurveyModal} variant="outline" mr={2}>
           Cancel
         </Button>
         <Button onClick={submitStake}>Stake</Button>
diff --git a/src/enums/modal.ts b/src/enums/modal.ts
index b5a962cd7..dd4d707af 100644
--- a/src/enums/modal.ts
+++ b/src/enums/modal.ts
@@ -36,4 +36,5 @@ export enum ModalType {
   DeauthorizationInitiated = "DEAUTHORIZATION_INITIATED",
   Analytics = "ANALYTICS",
   FeedbackSubmission = "FEEDBACK_SUBMIT",
+  StakingBounceSurvey = "STAKING_BOUNCE_SURVEY",
 }
diff --git a/src/types/modal.ts b/src/types/modal.ts
index 919396c9d..b073d6567 100644
--- a/src/types/modal.ts
+++ b/src/types/modal.ts
@@ -46,6 +46,7 @@ import MapOperatorToStakingProviderConfirmationModal from "../components/Modal/M
 import { MapOperatorToStakingProviderSuccess } from "../components/Modal/MapOperatorToStakingProviderSuccessModal"
 import AnalyticsModal from "../components/Modal/AnalyticsModal"
 import FeedbackSubmissionModal from "../components/Modal/FeedbackSubmissionModal"
+import StakingBounceSurveyModal from "../components/Modal/StakingBounceSurveyModal"
 
 export const MODAL_TYPES: Record<ModalType, ElementType> = {
   [ModalType.SelectWallet]: SelectWalletModal,
@@ -82,7 +83,6 @@ export const MODAL_TYPES: Record<ModalType, ElementType> = {
   [ModalType.StakingApplicationsAuthorized]: StakingApplicationsAuthorized,
   [ModalType.IncreaseAuthorization]: IncreaseAuthorization,
   [ModalType.IncreaseAuthorizationSuccess]: IncreaseAuthorizationSuccess,
-  [ModalType.SubmitStake]: SubmitStakeModal,
   [ModalType.NewStakerAuthorizeStakingApplication]:
     NewStakerAuthorizeStakingApplicationModal,
   [ModalType.ConfirmDeauthorization]: ConfirmDeauthorization,
@@ -90,6 +90,7 @@ export const MODAL_TYPES: Record<ModalType, ElementType> = {
   [ModalType.DeauthorizationInitiated]: DeauthorizationInitiated,
   [ModalType.Analytics]: AnalyticsModal,
   [ModalType.FeedbackSubmission]: FeedbackSubmissionModal,
+  [ModalType.StakingBounceSurvey]: StakingBounceSurveyModal,
 }
 
 export interface BaseModalProps {
diff --git a/src/types/posthog.ts b/src/types/posthog.ts
index dbb309ee6..24c8d9655 100644
--- a/src/types/posthog.ts
+++ b/src/types/posthog.ts
@@ -1,3 +1,4 @@
 export enum PosthogEvent {
   ClosedModal = "Closed Modal",
+  StakingFlowBounce = "Staking Flow Bounce",
 }

From 6ac67efda4d0b96c4d19038fcdc0340eeabf4778 Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Wed, 14 Dec 2022 11:04:53 -0700
Subject: [PATCH 2/2] Adds the staking bounce survey modal

---
 .../Modal/DappSurveyModal/RadioCard.tsx       | 37 ++++++++++++++++
 .../Modal/DappSurveyModal/index.tsx           | 44 ++++++++++++++++++-
 .../Modal/StakingBounceSurveyModal/index.tsx  | 20 ++++++++-
 3 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Modal/DappSurveyModal/RadioCard.tsx

diff --git a/src/components/Modal/DappSurveyModal/RadioCard.tsx b/src/components/Modal/DappSurveyModal/RadioCard.tsx
new file mode 100644
index 000000000..afdff57c0
--- /dev/null
+++ b/src/components/Modal/DappSurveyModal/RadioCard.tsx
@@ -0,0 +1,37 @@
+import {
+  Box,
+  Card,
+  Radio,
+  useRadio,
+  RadioProps,
+} from "@threshold-network/components"
+import theme from "../../../theme"
+
+const RadioCard = (props: RadioProps) => {
+  const { getInputProps, getCheckboxProps } = useRadio(props)
+
+  const input = getInputProps()
+  const checkbox = getCheckboxProps()
+
+  return (
+    <Box as="label">
+      <input {...input} />
+      <Card
+        {...checkbox}
+        boxShadow="none"
+        cursor="pointer"
+        display="flex"
+        _checked={{
+          border: `2px solid ${theme.colors.brand[400]}`,
+        }}
+        p={4}
+      >
+        {/*  @ts-ignore*/}
+        <Radio isChecked={input.checked} />
+        <Box>{props.children}</Box>
+      </Card>
+    </Box>
+  )
+}
+
+export default RadioCard
diff --git a/src/components/Modal/DappSurveyModal/index.tsx b/src/components/Modal/DappSurveyModal/index.tsx
index 95cf2246e..d95cc7817 100644
--- a/src/components/Modal/DappSurveyModal/index.tsx
+++ b/src/components/Modal/DappSurveyModal/index.tsx
@@ -1,5 +1,6 @@
-import { FC } from "react"
+import { FC, useState } from "react"
 import {
+  Box,
   Button,
   Divider,
   H5,
@@ -7,11 +8,16 @@ import {
   ModalCloseButton,
   ModalFooter,
   ModalHeader,
+  RadioGroup,
+  Stack,
+  Textarea,
+  useRadioGroup,
 } from "@threshold-network/components"
 import { BaseModalProps } from "../../../types"
 import withBaseModal from "../withBaseModal"
 import InfoBox from "../../InfoBox"
 import { PosthogEvent } from "../../../types/posthog"
+import RadioCard from "./RadioCard"
 
 interface SurveyQuestion {
   text: string
@@ -30,10 +36,20 @@ const DappSurveyModal: FC<DappSurveyModalProps> = ({
   captureEvent,
   surveyQuestions,
 }) => {
+  const [value, setValue] = useState("")
+  const [extraInfo, setExtraInfo] = useState("")
+
   const handleSubmit = () => {
     console.log("post hog capture ", captureEvent)
   }
 
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    defaultValue: "",
+    onChange: setValue,
+  })
+
+  const group = getRootProps()
+
   return (
     <>
       <ModalHeader>dApp Survey</ModalHeader>
@@ -42,13 +58,37 @@ const DappSurveyModal: FC<DappSurveyModalProps> = ({
         <InfoBox>
           <H5 mb={2}>{title}</H5>
         </InfoBox>
+        <Box px={4} my={4}>
+          <RadioGroup onChange={setValue} value={value}>
+            <Stack spacing={2} {...group}>
+              {surveyQuestions.map(({ value, text }) => {
+                const radio = getRadioProps({ value })
+                return (
+                  <RadioCard key={value} {...radio}>
+                    {text}
+                  </RadioCard>
+                )
+              })}
+            </Stack>
+          </RadioGroup>
+          {value === "OTHER" && (
+            <Textarea
+              mt={2}
+              placeholder="Type your reasons here"
+              value={extraInfo}
+              onChange={(e) => setExtraInfo(e.target.value)}
+            />
+          )}
+        </Box>
         <Divider />
       </ModalBody>
       <ModalFooter>
         <Button onClick={closeModal} variant="outline" mr={2}>
           Dismiss
         </Button>
-        <Button onClick={handleSubmit}>Submit</Button>
+        <Button disabled={value === ""} onClick={handleSubmit}>
+          Submit
+        </Button>
       </ModalFooter>
     </>
   )
diff --git a/src/components/Modal/StakingBounceSurveyModal/index.tsx b/src/components/Modal/StakingBounceSurveyModal/index.tsx
index 566b12bdf..67f288850 100644
--- a/src/components/Modal/StakingBounceSurveyModal/index.tsx
+++ b/src/components/Modal/StakingBounceSurveyModal/index.tsx
@@ -8,7 +8,25 @@ const StakingBounceSurveyModal: FC<BaseModalProps> = (props) => {
     <DappSurveyModal
       title="We've noticed you did not complete your staking. What happened?"
       captureEvent={PosthogEvent.StakingFlowBounce}
-      surveyQuestions={[{ text: "I mis clicked", value: "MISCLICK" }]}
+      surveyQuestions={[
+        { text: "I misclicked", value: "MISCLICK" },
+        {
+          text: "I have trouble with my hardware wallet",
+          value: "HARDWARE_ISSUE",
+        },
+        {
+          text: "I added one wrong address",
+          value: "ADDED_WRONG_ADDRESS",
+        },
+        {
+          text: "I just wanted to test the dApp",
+          value: "TEST",
+        },
+        {
+          text: "Other",
+          value: "OTHER",
+        },
+      ]}
       {...props}
     />
   )