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
Prev Previous commit
Next Next commit
adding in product type as a response to our multi-question survey
Bianca Yang committed Nov 2, 2023
commit 3680fc1f5da2fa7cf930e30792fca7eeacad6188
2 changes: 2 additions & 0 deletions frontend/src/scenes/billing/BillingProduct.tsx
Original file line number Diff line number Diff line change
@@ -160,6 +160,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
toggleIsPricingModalOpen,
toggleIsPlanComparisonModalOpen,
reportSurveyShown,
setSurveyResponse,
} = useActions(billingProductLogic({ product }))
const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)

@@ -337,6 +338,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
fullWidth
onClick={() => {
reportSurveyShown(UNSUBSCRIBE_SURVEY_ID, product.type)
setSurveyResponse(product.type, '$survey_response_1')
}}
>
Unsubscribe
14 changes: 8 additions & 6 deletions frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
Original file line number Diff line number Diff line change
@@ -5,11 +5,11 @@ import { BillingProductV2Type } from '~/types'
import { billingLogic } from './billingLogic'

export const UnsubscribeSurveyModal = ({ product }: { product: BillingProductV2Type }): JSX.Element | null => {
const { surveyID, surveyResponseValue } = useValues(billingProductLogic({ product }))
const { setSurveyResponseValue, setSurveyID, reportSurveySent } = useActions(billingProductLogic({ product }))
const { surveyID, surveyResponse } = useValues(billingProductLogic({ product }))
const { setSurveyResponse, setSurveyID, reportSurveySent } = useActions(billingProductLogic({ product }))
const { deactivateProduct } = useActions(billingLogic)

const textAreaNotEmpty = surveyResponseValue.length > 0
const textAreaNotEmpty = surveyResponse['$survey_repsonse']?.length > 0
return (
<LemonModal
onClose={() => {
@@ -20,8 +20,10 @@ export const UnsubscribeSurveyModal = ({ product }: { product: BillingProductV2T
<div className="flex flex-col">
<LemonTextArea
placeholder={'Start typing...'}
value={surveyResponseValue}
onChange={setSurveyResponseValue}
value={surveyResponse['$survey_response']}
onChange={(value) => {
setSurveyResponse(value, '$survey_response')
}}
/>
<div className="flex justify-between pt-2 gap-8">
<LemonButton
@@ -35,7 +37,7 @@ export const UnsubscribeSurveyModal = ({ product }: { product: BillingProductV2T
type={textAreaNotEmpty ? 'primary' : 'tertiary'}
status={textAreaNotEmpty ? 'primary' : 'muted'}
onClick={() => {
reportSurveySent(surveyID, surveyResponseValue)
reportSurveySent(surveyID, surveyResponse)
deactivateProduct(product.type)
}}
>
18 changes: 10 additions & 8 deletions frontend/src/scenes/billing/billingProductLogic.ts
Original file line number Diff line number Diff line change
@@ -24,11 +24,11 @@ export const billingProductLogic = kea<billingProductLogicType>([
setShowTierBreakdown: (showTierBreakdown: boolean) => ({ showTierBreakdown }),
toggleIsPricingModalOpen: true,
toggleIsPlanComparisonModalOpen: true,
setSurveyResponseValue: (surveyResponseValue: string) => ({ surveyResponseValue }),
setSurveyResponse: (surveyResponse: string, key: string) => ({ surveyResponse, key }),
reportSurveyShown: (surveyID: string, productType: string) => ({ surveyID, productType }),
reportSurveySent: (surveyID: string, surveyResponseValue: string) => ({
reportSurveySent: (surveyID: string, surveyResponse: Record<string, string>) => ({
surveyID,
surveyResponseValue,
surveyResponse,
}),
setSurveyID: (surveyID: string) => ({ surveyID }),
}),
@@ -63,10 +63,12 @@ export const billingProductLogic = kea<billingProductLogicType>([
toggleIsPlanComparisonModalOpen: (state) => !state,
},
],
surveyResponseValue: [
'',
surveyResponse: [
{},
{
setSurveyResponseValue: (_, { surveyResponseValue }) => surveyResponseValue,
setSurveyResponse: (state, { surveyResponse, key }) => {
return { ...state, [key]: surveyResponse }
},
},
],
unsubscribeReasonSurvey: [
@@ -199,10 +201,10 @@ export const billingProductLogic = kea<billingProductLogicType>([
})
actions.setSurveyID(surveyID)
},
reportSurveySent: ({ surveyID, surveyResponseValue }) => {
reportSurveySent: ({ surveyID, surveyResponse }) => {
posthog.capture('survey sent', {
$survey_id: surveyID,
$survey_response: surveyResponseValue,
...surveyResponse,
})
actions.setSurveyID('')
},