Add configurable Typeforms (#954)

* Add configurable typeforms.

* Fix lint.

* Add surveys to open and manage vault pages.

* Use array to track closed surveys.

features/borrow/open/containers/OpenVaultView.tsx

@@ -11,6 +11,7 @@ import {
   VaultProxyStatusCard,
   VaultProxySubtitle,
 } from 'components/vault/VaultProxy'
+import { Survey } from 'features/survey'
 import { WithLoadingIndicator } from 'helpers/AppSpinner'
 import { WithErrorHandler } from 'helpers/errorHandlers/WithErrorHandler'
 import { useObservable } from 'helpers/observableHook'
@@ -148,6 +149,7 @@ export function OpenVaultView({ ilk }: { ilk: string }) {
         {(openVault) => (
           <Container variant="vaultPageContainer">
             <OpenVaultContainer {...openVault} />
+            <Survey for="borrow" />
           </Container>
         )}
       </WithLoadingIndicator>

features/earn/guni/open/containers/GuniOpenVaultView.tsx

@@ -1,4 +1,5 @@
 import { useAppContext } from 'components/AppContextProvider'
+import { Survey } from 'features/survey'
 import { useTranslation } from 'next-i18next'
 import React from 'react'
 import { Container } from 'theme-ui'
@@ -7,7 +8,6 @@ import { OpenMultiplyVaultContainer } from '../../../../../components/vault/comm
 import { VaultContainerSpinner, WithLoadingIndicator } from '../../../../../helpers/AppSpinner'
 import { WithErrorHandler } from '../../../../../helpers/errorHandlers/WithErrorHandler'
 import { useObservable } from '../../../../../helpers/observableHook'
-import { MultiplySurveyButtons } from '../../../../../pages/multiply'
 import { GuniVaultHeader } from '../../common/GuniVaultHeader'
 import { GuniOpenMultiplyVaultDetails } from './GuniOpenMultiplyVaultDetails'
 import { GuniOpenMultiplyVaultForm } from './GuniOpenMultiplyVaultForm'
@@ -49,7 +49,7 @@ export function GuniOpenVaultView({ ilk }: { ilk: string }) {
               form={<GuniOpenMultiplyVaultForm {...openVault} />}
               clear={openVault.clear}
             />
-            <MultiplySurveyButtons />
+            <Survey for="multiply" />
           </Container>
         )}
       </WithLoadingIndicator>

features/generalManageVault/GeneralManageVaultView.tsx

@@ -1,5 +1,6 @@
 import { BigNumber } from 'bignumber.js'
 import { ManageVaultContainer } from 'features/borrow/manage/containers/ManageVaultContainer'
+import { Survey } from 'features/survey'
 import React from 'react'
 import { Container } from 'theme-ui'
 
@@ -9,7 +10,6 @@ import { DefaultVaultHeader } from '../../components/vault/DefaultVaultHeader'
 import { VaultContainerSpinner, WithLoadingIndicator } from '../../helpers/AppSpinner'
 import { WithErrorHandler } from '../../helpers/errorHandlers/WithErrorHandler'
 import { useObservable } from '../../helpers/observableHook'
-import { MultiplySurveyButtons } from '../../pages/multiply'
 import { GuniVaultHeader } from '../earn/guni/common/GuniVaultHeader'
 import { GuniManageMultiplyVaultDetails } from '../earn/guni/manage/containers/GuniManageMultiplyVaultDetails'
 import { GuniManageMultiplyVaultForm } from '../earn/guni/manage/containers/GuniManageMultiplyVaultForm'
@@ -78,6 +78,7 @@ export function GeneralManageVaultView({ id }: { id: BigNumber }) {
               return (
                 <Container variant="vaultPageContainer">
                   <ManageVaultContainer manageVault={generalManageVault.state} />
+                  <Survey for="borrow" />
                 </Container>
               )
             case VaultType.Insti:
@@ -108,7 +109,7 @@ export function GeneralManageVaultView({ id }: { id: BigNumber }) {
                       history={VaultHistoryView}
                     />
                   )}
-                  <MultiplySurveyButtons />
+                  <Survey for="multiply" />
                 </Container>
               )
           }

features/survey/SurveyButtons.tsx

@@ -0,0 +1,53 @@
+import { Global } from '@emotion/core'
+import { Popover, Sidetab } from '@typeform/embed-react'
+import { useLocalStorage } from 'helpers/useLocalStorage'
+import React from 'react'
+import { useBreakpointIndex } from 'theme/useBreakpointIndex'
+
+const typeformPopoverButton = '.tf-v1-popover .tf-v1-popover-button'
+
+type SurveyConfig = { id: string; title: string; color: string }
+
+export function SurveyButtons({ id, title, color }: SurveyConfig) {
+  const breakpoint = useBreakpointIndex()
+
+  const [closedSurveys, setClosedSurveys] = useLocalStorage('closed-surveys', [])
+  const wasClosed = closedSurveys.includes(id)
+
+  return (
+    <>
+      {breakpoint <= 1 && !wasClosed && (
+        <>
+          {breakpoint === 0 && (
+            <Global
+              styles={() => ({
+                [typeformPopoverButton]: {
+                  bottom: '77px',
+                  right: '14px',
+                },
+              })}
+            />
+          )}
+
+          <Popover
+            id={id}
+            buttonColor={color}
+            shareGaInstance={true}
+            onClose={() => setClosedSurveys([...closedSurveys, id])}
+          />
+        </>
+      )}
+      {breakpoint > 1 && !wasClosed && (
+        <Sidetab
+          id={id}
+          buttonText={title}
+          buttonColor={color}
+          shareGaInstance={true}
+          onClose={() => setClosedSurveys([...closedSurveys, id])}
+        >
+          {title}
+        </Sidetab>
+      )}
+    </>
+  )
+}

features/survey/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import { SurveyButtons } from './SurveyButtons'
+import surveysConfig from './surveysConfig.json'
+
+export function Survey({ for: page }: { for: keyof typeof surveysConfig }) {
+  const config = surveysConfig[page]
+
+  return config.id ? <SurveyButtons {...config} /> : null
+}

features/survey/surveysConfig.json

@@ -0,0 +1,22 @@
+{
+  "multiply": {
+    "id": "H52MeocX",
+    "title": "Help shape the future of Multiply",
+    "color": "#575CFE"
+  },
+  "earn": {
+    "id": "",
+    "title": "Help shape the future of Earn",
+    "color": "#575CFE"
+  },
+  "borrow": {
+    "id": "",
+    "title": "Help shape the future of Borrow",
+    "color": "#575CFE"
+  },
+  "homepage": {
+    "id": "",
+    "title": "Help shape the future of Oasis.app",
+    "color": "#575CFE"
+  }
+}

pages/borrow.tsx

@@ -1,3 +1,4 @@
+import { Survey } from 'features/survey'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import React from 'react'
 
@@ -15,6 +16,7 @@ function BorrowPage() {
   return (
     <WithConnection>
       <BorrowView />
+      <Survey for="borrow" />
     </WithConnection>
   )
 }

pages/earn.tsx

@@ -1,3 +1,4 @@
+import { Survey } from 'features/survey'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useRouter } from 'next/router'
 import React from 'react'
@@ -25,7 +26,12 @@ function EarnPage() {
 
   const view = enabled ? <EarnView /> : null
 
-  return <WithConnection>{view}</WithConnection>
+  return (
+    <WithConnection>
+      {view}
+      <Survey for="earn" />
+    </WithConnection>
+  )
 }
 
 EarnPage.layout = ProductPagesLayout

pages/index.tsx

@@ -1,5 +1,6 @@
 import { WithConnection } from 'components/connectWallet/ConnectWallet'
 import { LandingPageLayout } from 'components/Layouts'
+import { Survey } from 'features/survey'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import React from 'react'
 
@@ -15,6 +16,7 @@ function LandingPage() {
   return (
     <WithConnection>
       <HomepageView />
+      <Survey for="homepage" />
     </WithConnection>
   )
 }

pages/multiply.tsx

@@ -1,77 +1,22 @@
-import { Global } from '@emotion/core'
-import { Popover, Sidetab } from '@typeform/embed-react'
-import { useTranslation } from 'next-i18next'
+import { Survey } from 'features/survey'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import React from 'react'
 
 import { WithConnection } from '../components/connectWallet/ConnectWallet'
 import { ProductPagesLayout } from '../components/Layouts'
 import { MultiplyView } from '../features/multiply/MultiplyView'
-import { useLocalStorage } from '../helpers/useLocalStorage'
-import { useBreakpointIndex } from '../theme/useBreakpointIndex'
-import { useTheme } from '../theme/useThemeUI'
 
 export const getStaticProps = async ({ locale }: { locale: string }) => ({
   props: {
     ...(await serverSideTranslations(locale, ['common'])),
   },
 })
 
-const typeformPopoverButton = '.tf-v1-popover .tf-v1-popover-button'
-
-export function MultiplySurveyButtons() {
-  const breakpoint = useBreakpointIndex()
-  const { theme } = useTheme()
-  const btnColor = theme.colors.link
-  const { t } = useTranslation()
-  const [wasClosed, setWasOpenedAndClosed] = useLocalStorage(
-    'multiply-survey-2022-03-23-was-closed',
-    false,
-  )
-
-  return (
-    <>
-      {breakpoint <= 1 && !wasClosed && (
-        <>
-          {breakpoint === 0 && (
-            <Global
-              styles={() => ({
-                [typeformPopoverButton]: {
-                  bottom: '77px',
-                  right: '14px',
-                },
-              })}
-            />
-          )}
-
-          <Popover
-            id="H52MeocX"
-            buttonColor={btnColor}
-            shareGaInstance={true}
-            onClose={() => setWasOpenedAndClosed(true)}
-          />
-        </>
-      )}
-      {breakpoint > 1 && !wasClosed && (
-        <Sidetab
-          id="H52MeocX"
-          buttonText={t('help-shape-the-future-of-multiply')}
-          buttonColor={btnColor}
-          shareGaInstance={true}
-          onClose={() => setWasOpenedAndClosed(true)}
-        >
-          {t('help-shape-the-future-of-multiply')}
-        </Sidetab>
-      )}
-    </>
-  )
-}
-
 function MultiplyPage() {
   return (
     <WithConnection>
       <MultiplyView />
-      <MultiplySurveyButtons />
+      <Survey for="multiply" />
     </WithConnection>
   )
 }

pages/vaults/open-multiply/[ilk].tsx

@@ -2,14 +2,14 @@ import { WithWalletConnection } from 'components/connectWallet/ConnectWallet'
 import { AppLayout } from 'components/Layouts'
 import { GuniOpenVaultView } from 'features/earn/guni/open/containers/GuniOpenVaultView'
 import { OpenMultiplyVaultView } from 'features/multiply/open/containers/OpenMultiplyVaultView'
+import { Survey } from 'features/survey'
 import { WithTermsOfService } from 'features/termsOfService/TermsOfService'
 import { GetServerSidePropsContext, GetStaticPaths } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import React from 'react'
 import { BackgroundLight } from 'theme/BackgroundLight'
 
 import { supportedMultiplyIlks } from '../../../helpers/productCards'
-import { MultiplySurveyButtons } from '../../multiply'
 
 export const getStaticPaths: GetStaticPaths<{ ilk: string }> = async () => {
   const paths = supportedMultiplyIlks.map((ilk) => ({ params: { ilk } })) // these paths will be generated at built time
@@ -42,7 +42,7 @@ function OpenVault({ ilk }: { ilk: string }) {
         ) : (
           <>
             <OpenMultiplyVaultView ilk={ilk} />
-            <MultiplySurveyButtons />
+            <Survey for="multiply" />
           </>
         )}
       </WithTermsOfService>

public/locales/en/common.json

@@ -1054,6 +1054,5 @@
     }
   },
   "guni-slippage-overridden": "Your custom slippage has been overridden for this vault. GUNI vaults can only be opened with a slippage at 0.1%.",
-  "temporary-guni-message": "The max multiple for your GUNI position has been increased by Maker governance from 20x to 50x. To take advantage of this you will need to close this vault, and open a new GUNI position. Read more in ",
-  "help-shape-the-future-of-multiply": "Help shape the future of Multiply"
+  "temporary-guni-message": "The max multiple for your GUNI position has been increased by Maker governance from 20x to 50x. To take advantage of this you will need to close this vault, and open a new GUNI position. Read more in "
 }