diff --git a/packages/atlas/src/providers/ypp/ypp.store.ts b/packages/atlas/src/providers/ypp/ypp.store.ts index 8e47ecb7ef..ff67c185b3 100644 --- a/packages/atlas/src/providers/ypp/ypp.store.ts +++ b/packages/atlas/src/providers/ypp/ypp.store.ts @@ -9,6 +9,7 @@ type YppStoreState = { * 'state' param passed to Google auth URL */ ytStateParam: string | null + utmSource: string | null yppModalOpenName: YppModalStep shouldContinueYppFlowAfterLogin: boolean shouldContinueYppFlowAfterCreatingChannel: boolean @@ -22,6 +23,7 @@ type YppStoreActions = { * sets 'state' param passed to Google auth URL */ setYtStateParam: (authState: string | null) => void + setUtmSource: (utmSource: string | null) => void setYppModalOpenName: (modal: YppModalStep) => void setShouldContinueYppFlowAfterLogin: (shouldContinueYppFlow: boolean) => void setShouldContinueYppFlowAfterCreatingChannel: (shouldContinueYppFlow: boolean) => void @@ -34,6 +36,7 @@ export const useYppStore = createStore( referrerId: null, selectedChannelId: null, ytStateParam: null, + utmSource: null, yppModalOpenName: null, shouldContinueYppFlowAfterLogin: false, shouldContinueYppFlowAfterCreatingChannel: false, @@ -55,6 +58,11 @@ export const useYppStore = createStore( state.ytStateParam = authState }) }, + setUtmSource: (utmSource) => { + set((state) => { + state.utmSource = utmSource + }) + }, setYppModalOpenName: (modal) => { set((state) => { state.yppModalOpenName = modal @@ -80,7 +88,7 @@ export const useYppStore = createStore( { persist: { key: 'ypp', - whitelist: ['referrerId', 'ytStateParam'], + whitelist: ['referrerId', 'ytStateParam', 'utmSource'], version: 0, migrate: (oldState) => oldState, }, diff --git a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx index baaf6cd9dd..3d7b5f4590 100644 --- a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx +++ b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx @@ -76,7 +76,6 @@ const DEFAULT_LANGUAGE = atlasConfig.derived.popularLanguagesSelectValues[0].val export const YppAuthorizationModal: FC = ({ unSyncedChannels }) => { const { memberId, refetchUserMemberships, setActiveChannel, channelId, isLoggedIn } = useUser() const [searchParams] = useSearchParams() - const [utmSource, setUtmSource] = useState(null) const navigate = useNavigate() const [isSubmitting, setIsSubmitting] = useState(false) const createdChannelId = useRef(null) @@ -98,7 +97,8 @@ export const YppAuthorizationModal: FC = ({ unSynced const { referrerId, ytResponseData, - actions: { setYtResponseData }, + utmSource, + actions: { setYtResponseData, setUtmSource }, } = useYppStore((store) => store, shallow) const setReferrerId = useYppStore((store) => store.actions.setReferrerId) const setShouldContinueYppFlowAfterLogin = useYppStore((store) => store.actions.setShouldContinueYppFlowAfterLogin) @@ -155,7 +155,7 @@ export const YppAuthorizationModal: FC = ({ unSynced if (searchParams.get('utm_source')) { setUtmSource(searchParams.get('utm_source')) } - }, [searchParams]) + }, [searchParams, setUtmSource]) useEffect(() => { contentRef.current?.scrollTo({ top: 0 })