Merge pull request #500 from mysteriumnetwork/features/clickboarding

Make all redirect links feature aware

Author: mdomasevicius

src/Pages/Authenticated/Components/Claim/ClaimButton.tsx

@@ -8,6 +8,9 @@ import { Button } from '../../../../Components/Inputs/Button'
 import { tequila } from '../../../../api/tequila'
 import { useState } from 'react'
 import errors from '../../../../commons/errors'
+import { useAppSelector } from '../../../../commons/hooks'
+import { selectors } from '../../../../redux/selectors'
+import { urls } from '../../../../commons/urls'
 
 const { initClaim } = tequila
 
@@ -16,12 +19,13 @@ type Props = {
 }
 
 export const ClaimButton = ({ label = 'Claim' }: Props) => {
+  const config = useAppSelector(selectors.currentConfig)
   const [loading, setLoading] = useState(false)
 
   const handleClaim = async () => {
     setLoading(true)
     try {
-      const { link } = await initClaim()
+      const { link } = await initClaim(urls.featureAwareCurrentOrigin(config))
       window.location.href = link
     } catch (e) {
       errors.parseToastError(e)

src/Pages/Authenticated/Onboarding/Password/Heading.tsx

@@ -29,7 +29,7 @@ const Title = styled.h1<{ $centered?: boolean }>`
   }
 `
 
-const Comment = styled.p`
+const Comment = styled.div`
   color: ${({ theme }) => theme.text.colorMain};
   font-size: ${({ theme }) => theme.common.fontSizeNormal};
   @media ${devices.tablet} {

src/Pages/Authenticated/Onboarding/PasswordChangePage.tsx

@@ -26,9 +26,10 @@ import complexActions from '../../../redux/complex.actions'
 import { WelcomePage } from './WelcomePage'
 import { Heading } from './Password/Heading'
 import { urls } from '../../../commons/urls'
-import routes from '../../../constants/routes'
 import { media } from '../../../commons/media'
 import { useMediaQuery } from 'react-responsive'
+import { useAppSelector } from '../../../commons/hooks'
+import { selectors } from '../../../redux/selectors'
 
 const { isMobileQuery } = media
 const { api } = tequila
@@ -206,6 +207,7 @@ const INITIAL_STATE: State = {
 }
 
 export const PasswordChangePage = () => {
+  const config = useAppSelector(selectors.currentConfig)
   const query = useQuery()
   const mmnApiKey = query.get('mmnApiKey')
   const isMobile = useMediaQuery(isMobileQuery)
@@ -243,7 +245,7 @@ export const PasswordChangePage = () => {
   const mmnError = state.mmnError.length > 0
 
   const getLinkAndRedirect = async () => {
-    const { link } = await tequila.initClickBoarding(urls.currentOrigin(routes.CLICKBOARDING))
+    const { link } = await tequila.initClickBoarding(urls.featureAwareCurrentOrigin(config))
     window.location.href = link
   }
 

src/Pages/Authenticated/Onboarding/RegistrationModal/RegistrationModal.tsx

@@ -156,7 +156,6 @@ export const RegistrationModal = ({ show }: Props) => {
         }
         if (existingOrders.length !== 0) {
           const order = existingOrders[0]
-          console.log('existingOrders[0]', existingOrders[0])
           setGateway(order.gatewayName)
           setStep(1)
         }

src/Pages/Login/MystnodesSSO.tsx

@@ -10,13 +10,11 @@ import { tequila } from '../../api/tequila'
 import { useMediaQuery } from 'react-responsive'
 import { media } from '../../commons/media'
 import styled from 'styled-components'
-import routes from '../../constants/routes'
 import { urls } from '../../commons/urls'
 import { useAppSelector } from '../../commons/hooks'
 import { selectors } from '../../redux/selectors'
 import { configs } from '../../commons/config'
 import FEATURES from '../../commons/features'
-import { ANDROID_DEEPLINK } from '../../constants/urls'
 
 const { initSSOAuth } = tequila
 
@@ -28,10 +26,9 @@ const Label = styled.div`
 export const MystnodesSSO = () => {
   const config = useAppSelector(selectors.currentConfig)
   const ssoDisabled = configs.isFeatureEnabled(config, FEATURES.SSO_HIDE.name)
-  const deeplinkEnabled = configs.isFeatureEnabled(config, FEATURES.SSO_DEEPLINK.name)
   const isDesktop = useMediaQuery(media.isDesktopQuery)
   const onClick = async () => {
-    const { link } = await initSSOAuth(deeplinkEnabled ? ANDROID_DEEPLINK : urls.currentOrigin(routes.AUTH_SSO))
+    const { link } = await initSSOAuth(urls.featureAwareCurrentOrigin(config))
     window.location.href = link
   }
   return (

src/api/tequila.ts

@@ -10,8 +10,6 @@ import { DEFAULT_PASSWORD, DEFAULT_USERNAME } from '../constants/defaults'
 import qs from 'qs'
 import { AxiosInstance } from 'axios'
 import errorInterceptors from './error.interceptors'
-import { urls } from '../commons/urls'
-import routes from '../constants/routes'
 
 const buildAxios = (): AxiosInstance => {
   const instance = new TequilapiClientFactory(
@@ -99,7 +97,7 @@ const initSSOAuth = async (redirectUrl: string): Promise<LinkResponse> =>
 const initClickBoarding = async (redirectUrl: string): Promise<LinkResponse> =>
   http.get<LinkResponse>(`/mmn/onboarding?redirect_uri=${encodeURIComponent(redirectUrl)}`).then((r) => r.data)
 
-const initClaim = async (redirectUrl: string = urls.currentOrigin(routes.CLAIM)): Promise<LinkResponse> =>
+const initClaim = async (redirectUrl: string): Promise<LinkResponse> =>
   http.get<LinkResponse>(`/mmn/claim-link?redirect_uri=${encodeURIComponent(redirectUrl)}`).then((r) => r.data)
 
 const loginWithAuthorizationGrant = async ({ authorizationGrantToken }: { authorizationGrantToken: string }) =>

src/commons/urls.ts

@@ -4,8 +4,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { Config } from 'mysterium-vpn-js'
+import { configs } from './config'
+import FEATURES from './features'
+import { ANDROID_DEEPLINK } from '../constants/urls'
+import routes from '../constants/routes'
+
 const current = (path?: string): string => `${new URL(window.location.href).origin}${path ? `/#${path}` : ''}`
 
+const featureAwareCurrentOrigin = (config: Config): string => {
+  const deeplinkEnabled = configs.isFeatureEnabled(config, FEATURES.SSO_DEEPLINK.name)
+  return deeplinkEnabled ? ANDROID_DEEPLINK : current(routes.AUTH_SSO)
+}
+
 export const urls = {
   currentOrigin: current,
+  featureAwareCurrentOrigin,
 }