diff --git a/src/pages/signup-affiliates/components/_signup-form.tsx b/src/pages/signup-affiliates/components/_signup-form.tsx index 8b765c08f96..465475f8083 100644 --- a/src/pages/signup-affiliates/components/_signup-form.tsx +++ b/src/pages/signup-affiliates/components/_signup-form.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components' import affiliate_validation from '../validations/_affilaite_validation' import AffiliateInput from '../utils/_affiliate-input' import { SignUpFormProps } from '../_types' +import { trackEvent } from '../utils/_utils' import { localize, Localize } from 'components/localization' import { Container } from 'components/containers' import { Button } from 'components/form' @@ -88,6 +89,7 @@ export const SignUpWrapper = styled(Container)` padding: 0; } ` +const email = localize('_t_Email_t_') let language = getLanguage() language = language !== 'en' ? '/' + language : '' @@ -97,7 +99,6 @@ const AffiliateSignupForm = ({ setShowWizard, }: SignUpFormProps) => { const [email_error_msg, setEmailErrorMsg] = useState('') - const email = localize('_t_Email_t_') const handleStateChange = useCallback( ({ e, field }: { e?: React.ChangeEvent; field: string }) => { @@ -172,6 +173,8 @@ const AffiliateSignupForm = ({ secondary onClick={() => { window.scrollTo(0, 0) + console.log(affiliate_account.email) + trackEvent({ action: 'open_wizard', email: affiliate_account.email }) setShowWizard(true) }} disabled={!(affiliate_account.email && !email_error_msg)} diff --git a/src/pages/signup-affiliates/components/_signup-status.tsx b/src/pages/signup-affiliates/components/_signup-status.tsx index 39a0f8c5e4e..9f193ad23fb 100644 --- a/src/pages/signup-affiliates/components/_signup-status.tsx +++ b/src/pages/signup-affiliates/components/_signup-status.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import affiliate_validation from '../validations/_affilaite_validation' import AffiliateInput from '../utils/_affiliate-input' import { SignUpStatusProps } from '../_types' -import trackEvent from '../utils/_tracking' +import { trackEvent } from '../utils/_utils' import Image from 'features/components/atoms/image' import { localize, Localize } from 'components/localization' import { useIsRtl } from 'components/hooks/use-isrtl' @@ -140,7 +140,6 @@ const AffiliateSignupStatus = ({ }, []) const handleTryAgain = useCallback(() => { - trackEvent({ action: 'try_submit' }) setSignupStatus('loading') onSubmit() }, [signup_status]) diff --git a/src/pages/signup-affiliates/components/_wizard.tsx b/src/pages/signup-affiliates/components/_wizard.tsx index 6a011792660..0b5f7cbdb63 100644 --- a/src/pages/signup-affiliates/components/_wizard.tsx +++ b/src/pages/signup-affiliates/components/_wizard.tsx @@ -7,7 +7,6 @@ import { AccountType, } from '../_lazy-loading' import { AffiliateAccountTypes, WizardProps } from '../_types' -import trackEvent from '../utils/_tracking' import WizardComponent from './wizard-component' import { useResidenceList } from 'features/hooks/use-residence-list' @@ -26,11 +25,6 @@ const Wizard = ({ const is_individual = affiliate_account?.account_type == 1 - useEffect(() => { - show_wizard && trackEvent({ action: 'open_wizard', email: affiliate_account.email }) - return () => trackEvent({ action: 'close_wizard' }) - }, [show_wizard]) - useEffect(() => { if (is_individual) { setAffiliateAccount((prev) => ({ diff --git a/src/pages/signup-affiliates/components/wizard-component/wizard-footer.tsx b/src/pages/signup-affiliates/components/wizard-component/wizard-footer.tsx index 6cba45d8f71..f732d441afe 100644 --- a/src/pages/signup-affiliates/components/wizard-component/wizard-footer.tsx +++ b/src/pages/signup-affiliates/components/wizard-component/wizard-footer.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import Button from 'components/form/button' import { Localize } from 'components/localization' import { WizardComponentTypes } from 'pages/signup-affiliates/_types' -import trackEvent from 'pages/signup-affiliates/utils/_tracking' +import { trackEvent } from 'pages/signup-affiliates/utils/_utils' import device from 'themes/device' const StyledFooter = styled.div` @@ -58,23 +58,21 @@ const WizardFooter = ({ }: WizardComponentTypes) => { const buttonHandler = React.useCallback( (button_type: ButtonType): void => { - const prev_step = step - 1 if (button_type === ButtonType.Previous) { trackEvent({ action: 'step_back', - step_num: prev_step, - step_codename: getCodeName(prev_step), + step_num: step, + step_codename: getCodeName(step), }) - step > 1 && setStep(prev_step) + step > 1 && setStep(step) } if (button_type === ButtonType.Next) { - const next_step = step + 1 trackEvent({ action: 'step_passed', - step_num: next_step, - step_codename: getCodeName(next_step), + step_num: step, + step_codename: getCodeName(step), }) - step < max_step && setStep(next_step) + step < max_step && setStep(step + 1) } }, [max_step, setStep, step], diff --git a/src/pages/signup-affiliates/index.tsx b/src/pages/signup-affiliates/index.tsx index ad528ce8d92..8c9280a0ea2 100644 --- a/src/pages/signup-affiliates/index.tsx +++ b/src/pages/signup-affiliates/index.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' -import trackEvent from './utils/_tracking' -import { Submit } from './utils/_utils' +import { Submit, trackEvent } from './utils/_utils' import { AffiliateAccountTypes, SignUpStatusTypes } from './_types' import { AffiliateSignupForm, AffiliateSignupStatus, Wizard } from './_lazy-loading' import { isBrowser } from 'common/utility' @@ -93,6 +92,7 @@ const AffiliateSignup = () => { const handleBeforeUnload = (event) => { event.preventDefault() trackEvent({ action: 'close' }) + trackEvent({ action: 'close_wizard' }) } window.addEventListener('beforeunload', handleBeforeUnload) return () => window.removeEventListener('beforeunload', handleBeforeUnload) @@ -113,8 +113,15 @@ const AffiliateSignup = () => { useEffect(() => { const partner_signup_error_message = affiliate_api_error?.error.message - - if (partner_signup_error_message == 'Username not available') { + if (affiliate_api_data) { + trackEvent({ + action: 'success_popup_opened', + user_choice: + JSON.stringify(affiliate_api_error?.echo_req) || + 'success, but without echo_req', + }) + setSignupStatus('success') + } else if (partner_signup_error_message == 'Username not available') { trackEvent({ action: 'partners_signup_error', partner_signup_error_message }) setSignupStatus(partner_signup_error_message) } else if ( @@ -126,15 +133,7 @@ const AffiliateSignup = () => { setSignupStatus('Your website is not a valid entry') } else if (partner_signup_error_message) trackEvent({ action: 'other_error', partner_signup_error_message }) - - if (affiliate_api_data) { - trackEvent({ - action: 'success_popup_opened', - user_choice: JSON.stringify(affiliate_api_error?.echo_req) || 'default or null', - }) - setSignupStatus('success') - } - }, [affiliate_api_data, affiliate_api_error, affiliateSend]) + }, [affiliate_api_data, affiliate_api_error]) useEffect(() => { setAffiliateAccount({ diff --git a/src/pages/signup-affiliates/utils/_tracking.ts b/src/pages/signup-affiliates/utils/_tracking.ts deleted file mode 100644 index 60b209a30fa..00000000000 --- a/src/pages/signup-affiliates/utils/_tracking.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Analytics, TEvents } from '@deriv/analytics' - -const trackEvent = ({ - action, - partner_signup_error_message, - user_choice, - step_num, - step_codename, -}: TEvents['ce_partner_account_signup_form']) => { - Analytics?.trackEvent('ce_partner_account_signup_form', { - action, - form_name: 'ce_partner_account_signup_form', - ...(user_choice && { user_choice }), - ...(step_num && { step_num }), - ...(step_codename && { step_codename }), - ...(partner_signup_error_message && { partner_signup_error_message }), - }) -} -export default trackEvent diff --git a/src/pages/signup-affiliates/utils/_utils.tsx b/src/pages/signup-affiliates/utils/_utils.tsx index dc6d497cabd..227f0553287 100644 --- a/src/pages/signup-affiliates/utils/_utils.tsx +++ b/src/pages/signup-affiliates/utils/_utils.tsx @@ -1,4 +1,4 @@ -import { Analytics } from '@deriv/analytics' +import { Analytics, TEvents } from '@deriv/analytics' import { SubmitTypes } from '../_types' export const customSlugify = (text: string): string => { @@ -69,3 +69,22 @@ export const Submit = ({ }), }) } + +export const trackEvent = ({ + action, + email, + partner_signup_error_message, + user_choice, + step_num, + step_codename, +}: TEvents['ce_partner_account_signup_form']) => { + Analytics?.trackEvent('ce_partner_account_signup_form', { + action, + form_name: 'ce_partner_account_signup_form', + ...(email && { email }), + ...(user_choice && { user_choice }), + ...(step_num && { step_num }), + ...(step_codename && { step_codename }), + ...(partner_signup_error_message && { partner_signup_error_message }), + }) +}