Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Unsubscription Survey #18231

Merged
merged 10 commits into from
Nov 2, 2023
Next Next commit
Add unsubscription survey
* Ask users why they're unsubscribing before they submit their unsubscription request.
  • Loading branch information
Bianca Yang committed Nov 2, 2023
commit 3047728543e8e678303019456d05559f3d3cd355
33 changes: 32 additions & 1 deletion frontend/src/scenes/billing/BillingProduct.tsx
Original file line number Diff line number Diff line change
@@ -24,6 +24,9 @@ import { capitalizeFirstLetter, compactNumber } from 'lib/utils'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { ProductPricingModal } from './ProductPricingModal'
import { PlanComparisonModal } from './PlanComparison'
import posthog, { Survey } from 'posthog-js'
xrdt marked this conversation as resolved.
Show resolved Hide resolved
import { useCallback, useState } from 'react'
import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'

export const getTierDescription = (
tiers: BillingV2TierType[],
@@ -159,6 +162,19 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
} = useActions(billingProductLogic({ product }))
const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)

const [survey, setSurvey] = useState<Survey | null>()
const submitSurvey = useCallback(
(textAreaValue: string) => {
posthog.capture('survey sent', {
$survey_id: survey.id,
$survey_name: survey.name,
$survey_response: textAreaValue,
})
deactivateProduct(product.type)
},
[survey]
)
xrdt marked this conversation as resolved.
Show resolved Hide resolved

const showUpgradeCTA = !product.subscribed && !product.contact_support && product.plans?.length
const upgradePlan = currentAndUpgradePlans?.upgradePlan
const currentPlan = currentAndUpgradePlans?.currentPlan
@@ -331,7 +347,20 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
<LemonButton
status="stealth"
fullWidth
onClick={() => deactivateProduct(product.type)}
onClick={() => {
posthog.getActiveMatchingSurveys((surveys: Survey[]) => {
const matchingSurvey = surveys.filter(
(survey) => survey.name === 'Open feedback'
xrdt marked this conversation as resolved.
Show resolved Hide resolved
)[0]
if (matchingSurvey) {
xrdt marked this conversation as resolved.
Show resolved Hide resolved
setSurvey(matchingSurvey)
posthog.capture('survey shown', {
xrdt marked this conversation as resolved.
Show resolved Hide resolved
$survey_id: matchingSurvey.id,
$survey_name: matchingSurvey.name,
})
}
}, true)
}}
>
Unsubscribe
</LemonButton>
@@ -344,6 +373,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
Contact support to unsubscribe
</LemonButton>
)}

<LemonButton
fullWidth
status="stealth"
@@ -371,6 +401,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
/>
)
)}
{survey && <UnsubscribeSurveyModal setSurvey={setSurvey} submitSurvey={submitSurvey} />}
</div>
</div>
</div>
38 changes: 38 additions & 0 deletions frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { LemonButton, LemonModal, LemonTextArea } from '@posthog/lemon-ui'
import { useMemo, useState } from 'react'
import { Survey } from 'posthog-js'

export const UnsubscribeSurveyModal = ({
setSurvey,
submitSurvey,
}: {
setSurvey: (survey: Survey) => void
submitSurvey: (textAreaValue: string) => void
}): JSX.Element | null => {
const [textAreaValue, setTextAreaValue] = useState('')
xrdt marked this conversation as resolved.
Show resolved Hide resolved
const textAreaNotEmpty = useMemo(() => textAreaValue.length > 0, [textAreaValue])
return (
<LemonModal
onClose={() => {
setSurvey(null)
}}
title="Let us know why you're unsubscribing"
>
<div className="flex flex-col">
<LemonTextArea placeholder={'Start typing...'} value={textAreaValue} onChange={setTextAreaValue} />
<div className="flex justify-end pt-2">
<LemonButton
type={textAreaNotEmpty ? 'primary' : 'tertiary'}
status={textAreaNotEmpty ? 'primary' : 'muted'}
onClick={() => {
submitSurvey(textAreaValue)
setSurvey(null)
}}
>
Unsubscribe
</LemonButton>
</div>
</div>
</LemonModal>
)
}