update survey to show more information about how users might control …

…their costs

frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx

@@ -1,4 +1,4 @@
-import { LemonButton, LemonModal, LemonTextArea } from '@posthog/lemon-ui'
+import { LemonBanner, LemonButton, LemonModal, LemonTextArea, Link } from '@posthog/lemon-ui'
 import { billingProductLogic } from './billingProductLogic'
 import { useActions, useValues } from 'kea'
 import { BillingProductV2Type } from '~/types'
@@ -15,23 +15,53 @@ export const UnsubscribeSurveyModal = ({ product }: { product: BillingProductV2T
             onClose={() => {
                 setSurveyID('')
             }}
-            title="Let us know why you're unsubscribing"
+            title={`Let us know why you're unsubscribing from ${product.name}`}
+            width={'max(40vw)'}
         >
-            <div className="flex flex-col">
+            <div className="flex flex-col gap-2">
                 <LemonTextArea
                     placeholder={'Start typing...'}
                     value={surveyResponse['$survey_response']}
                     onChange={(value) => {
                         setSurveyResponse(value, '$survey_response')
                     }}
                 />
-                <div className="flex justify-between pt-2 gap-8">
+                <LemonBanner type="info">
+                    <p>
+                        {'Need to control your costs? '}
+                        <Link
+                            to="https://posthog.com/docs/billing/estimating-usage-costs#how-to-reduce-your-posthog-costs"
+                            target="_blank"
+                        >
+                            Learn about ways to reduce your bill
+                        </Link>
+                        {`${product.type !== 'session_replay' ? ' or ' : ', '}`}
+                        <Link to="mailto:[email protected]?subject=Help%20reducing%20PostHog%20bill" target="_blank">
+                            chat with support
+                        </Link>
+
+                        {product.type === 'session_replay' && (
+                            <>
+                                {', or '}
+                                <Link
+                                    to="mailto:[email protected]?subject=Joining%session%replay%controls%20beta"
+                                    target="_blank"
+                                >
+                                    join our beta for tuning recording volume with sampling and minimum duration
+                                </Link>
+                            </>
+                        )}
+                    </p>
+                </LemonBanner>
+                <div className="flex justify-end gap-8">
                     <LemonButton
-                        type={'tertiary'}
-                        status={'muted'}
-                        to="mailto:[email protected]?subject=Issues%20With%20Bill"
+                        type="tertiary"
+                        status="muted"
+                        onClick={() => {
+                            setSurveyID('')
+                        }}
                     >
-                        Big bills got you down? Chat with support
+                        Cancel
                     </LemonButton>
                     <LemonButton
                         type={textAreaNotEmpty ? 'primary' : 'tertiary'}