🧪 A/B test Pazu vs Phoebe voice in TTS try modal

Routes Cantonese sample selection to zh-HK_phoebe for the `test`
variant of the `tts-try-modal-cantonese-voice` experiment, and stamps
`ab_variant` onto open / voice-selected / snoozed / dismissed events
so the full funnel can be sliced by variant.

Author: williamchong

components/TTSTryModal.vue

@@ -70,6 +70,11 @@ const emit = defineEmits<{
 const { t: $t } = useI18n()
 const { setTTSLanguageVoice } = useTTSVoice()
 
+const cantoneseVoiceABTest = useABTest({
+  experimentKey: 'tts-try-modal-cantonese-voice',
+})
+const isPhoebeVariant = computed(() => cantoneseVoiceABTest.isVariant('test'))
+
 function handleRemindMeLater() {
   emit('snooze')
 }
@@ -79,12 +84,16 @@ function handleDismiss() {
 }
 
 function handleVoiceClick(sample: { id: string, languageVoice: string }) {
-  const { id: sampleId, languageVoice } = sample
+  const { id: sampleId, languageVoice: sampleLanguageVoice } = sample
+  const languageVoice = sampleLanguageVoice === 'zh-HK_pazu' && isPhoebeVariant.value
+    ? 'zh-HK_phoebe'
+    : sampleLanguageVoice
 
   setTTSLanguageVoice(languageVoice)
   useLogEvent('tts_try_voice_selected', {
     sample: sampleId,
     languageVoice,
+    ab_variant: cantoneseVoiceABTest.variant.value,
   })
   emit('voiceSelected', languageVoice)
 }
@@ -93,6 +102,7 @@ onMounted(() => {
   emit('open')
   useLogEvent('tts_try_modal_open', {
     nft_class_id: props.nftClassId,
+    ab_variant: cantoneseVoiceABTest.variant.value,
   })
 })
 

composables/use-tts-try-modal.ts

@@ -11,6 +11,9 @@ interface TTSTryModalState {
 export function useTTSTryModal() {
   const { user } = useUserSession()
   const overlay = useOverlay()
+  const cantoneseVoiceABTest = useABTest({
+    experimentKey: 'tts-try-modal-cantonese-voice',
+  })
 
   const state = useStorage<TTSTryModalState>(TTS_TRY_MODAL_KEY, {
     shouldOffer: true,
@@ -57,6 +60,7 @@ export function useTTSTryModal() {
           useLogEvent('tts_try_voice_selected', {
             nft_class_id: options.nftClassId,
             languageVoice,
+            ab_variant: cantoneseVoiceABTest.variant.value,
           })
           modal.close()
           options.onVoiceSelected?.(languageVoice)
@@ -65,6 +69,7 @@ export function useTTSTryModal() {
           snoozeTTSTryModal()
           useLogEvent('tts_try_snoozed', {
             nft_class_id: options.nftClassId,
+            ab_variant: cantoneseVoiceABTest.variant.value,
           })
           modal.close()
           options.onSnooze?.()
@@ -73,6 +78,7 @@ export function useTTSTryModal() {
           dismissTTSTryModal()
           useLogEvent('tts_try_dismissed', {
             nft_class_id: options.nftClassId,
+            ab_variant: cantoneseVoiceABTest.variant.value,
           })
           modal.close()
           options.onDismiss?.()