diff --git a/client/cypress/e2e/onboarding.cy.ts b/client/cypress/e2e/onboarding.cy.ts index e528f9e87f..3dec91c7b6 100644 --- a/client/cypress/e2e/onboarding.cy.ts +++ b/client/cypress/e2e/onboarding.cy.ts @@ -1,6 +1,6 @@ import { visitWithLoader, navigateWithCheck, mockCoinPricesServer } from 'cypress/utils/e2e'; import viewports from 'cypress/utils/viewports'; -import { stepsDecisionWindowClosed } from 'src/hooks/helpers/useOnboardingSteps/steps'; +import { getStepsDecisionWindowClosed } from 'src/hooks/helpers/useOnboardingSteps/steps'; import { ROOT, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; import Chainable = Cypress.Chainable; @@ -230,12 +230,12 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => }); it('user is able to click through entire onboarding flow', () => { - for (let i = 1; i < stepsDecisionWindowClosed.length - 1; i++) { + for (let i = 1; i < getStepsDecisionWindowClosed('2', '16 Jan').length - 1; i++) { checkProgressStepperSlimIsCurrentAndClickNext(i); } cy.get('[data-test=ModalOnboarding__ProgressStepperSlim__element]') - .eq(stepsDecisionWindowClosed.length - 1) + .eq(getStepsDecisionWindowClosed('2', '16 Jan').length - 1) .click(); cy.get('[data-test=ModalOnboarding__Button]').click(); cy.get('[data-test=ModalOnboarding]').should('not.exist'); @@ -322,7 +322,7 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => }); it('user is not able to click through entire onboarding flow', () => { - for (let i = 1; i < stepsDecisionWindowClosed.length; i++) { + for (let i = 1; i < getStepsDecisionWindowClosed('2', '16 Jan').length; i++) { checkProgressStepperSlimIsCurrentAndClickNext(i, i === 1); } }); diff --git a/client/public/images/onboarding/earn-rewards.webp b/client/public/images/onboarding/earn-rewards.webp deleted file mode 100644 index 867ce8d64a..0000000000 Binary files a/client/public/images/onboarding/earn-rewards.webp and /dev/null differ diff --git a/client/public/images/onboarding/get-involved.webp b/client/public/images/onboarding/get-involved.webp deleted file mode 100644 index 6327a3d855..0000000000 Binary files a/client/public/images/onboarding/get-involved.webp and /dev/null differ diff --git a/client/src/components/shared/ModalOnboarding/ModalOnboarding.module.scss b/client/src/components/shared/ModalOnboarding/ModalOnboarding.module.scss index 6a9f58c72f..57aa6d05e2 100644 --- a/client/src/components/shared/ModalOnboarding/ModalOnboarding.module.scss +++ b/client/src/components/shared/ModalOnboarding/ModalOnboarding.module.scss @@ -116,3 +116,11 @@ align-items: center; justify-content: center; } + +.link { + text-decoration: underline; + + @media #{$desktop-up} { + text-decoration: none; + } +} diff --git a/client/src/components/shared/ModalOnboardingTOS/ModalOnboardingTOS.module.scss b/client/src/components/shared/ModalOnboardingTOS/ModalOnboardingTOS.module.scss index 3cfef52667..03a99eebc2 100644 --- a/client/src/components/shared/ModalOnboardingTOS/ModalOnboardingTOS.module.scss +++ b/client/src/components/shared/ModalOnboardingTOS/ModalOnboardingTOS.module.scss @@ -13,6 +13,15 @@ .link { font-weight: $font-weight-semibold; + text-decoration: underline; + + @media #{$desktop-up} { + &:hover { + text-decoration: underline; + } + + text-decoration: none; + } &:hover { transform: none; diff --git a/client/src/hooks/helpers/useOnboardingSteps/index.tsx b/client/src/hooks/helpers/useOnboardingSteps/index.tsx index cb1cf7357f..9610ac3855 100644 --- a/client/src/hooks/helpers/useOnboardingSteps/index.tsx +++ b/client/src/hooks/helpers/useOnboardingSteps/index.tsx @@ -1,17 +1,35 @@ -import React, { Fragment } from 'react'; +import { format } from 'date-fns'; +import React, { Fragment, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { Step } from 'components/shared/ModalOnboarding/types'; import ModalOnboardingTOS from 'components/shared/ModalOnboardingTOS'; +import useCurrentEpoch from 'hooks/queries/useCurrentEpoch'; import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen'; -import { stepsDecisionWindowOpen, stepsDecisionWindowClosed } from './steps'; +import { getStepsDecisionWindowOpen, getStepsDecisionWindowClosed } from './steps'; + +import useEpochAndAllocationTimestamps from '../useEpochAndAllocationTimestamps'; const useOnboardingSteps = (isUserTOSAcceptedInitial: boolean | undefined): Step[] => { const { i18n } = useTranslation(); - + const { data: currentEpoch } = useCurrentEpoch(); const { data: isDecisionWindowOpen } = useIsDecisionWindowOpen(); + const epoch = isDecisionWindowOpen ? currentEpoch! - 1 : currentEpoch; + + const { timeCurrentAllocationEnd, timeCurrentEpochEnd } = useEpochAndAllocationTimestamps(); + + const changeAWDate = useMemo(() => { + if (isDecisionWindowOpen && timeCurrentAllocationEnd) { + return format(new Date(timeCurrentAllocationEnd).getTime(), 'dd MMM'); + } + if (!isDecisionWindowOpen && timeCurrentEpochEnd) { + return format(new Date(timeCurrentEpochEnd).getTime(), 'dd MMM'); + } + return ''; + }, [isDecisionWindowOpen, timeCurrentAllocationEnd, timeCurrentEpochEnd]); + return [ ...(isUserTOSAcceptedInitial === false ? [ @@ -27,7 +45,9 @@ const useOnboardingSteps = (isUserTOSAcceptedInitial: boolean | undefined): Step }, ] : []), - ...(isDecisionWindowOpen ? stepsDecisionWindowOpen : stepsDecisionWindowClosed), + ...(isDecisionWindowOpen + ? getStepsDecisionWindowOpen(epoch?.toString() ?? '', changeAWDate) + : getStepsDecisionWindowClosed(epoch?.toString() ?? '', changeAWDate)), ]; }; diff --git a/client/src/hooks/helpers/useOnboardingSteps/steps.tsx b/client/src/hooks/helpers/useOnboardingSteps/steps.tsx index b3f73e179e..493f9c5726 100644 --- a/client/src/hooks/helpers/useOnboardingSteps/steps.tsx +++ b/client/src/hooks/helpers/useOnboardingSteps/steps.tsx @@ -3,17 +3,20 @@ import { Trans } from 'react-i18next'; import styles from 'components/shared/ModalOnboarding/ModalOnboarding.module.scss'; import { Step } from 'components/shared/ModalOnboarding/types'; +import Button from 'components/ui/Button'; +import { DISCORD_LINK, OCTANT_BUILD_LINK, TWITTER_LINK } from 'constants/urls'; import i18n from 'i18n'; -export const stepsDecisionWindowOpen: Step[] = [ +export const getStepsDecisionWindowOpen = (epoch: string, changeAWDate: string): Step[] => [ { - header: i18n.t('views.onboarding.stepsDecisionWindowOpen.welcomeToOctant.header'), + header: i18n.t('views.onboarding.stepsDecisionWindowOpen.welcomeToOctant.header', { epoch }), image: 'images/onboarding/1.webp', imageClassName: styles.welcomeToOctant, text: ( ]} i18nKey="views.onboarding.stepsDecisionWindowOpen.welcomeToOctant.text" + values={{ date: changeAWDate }} /> ), }, @@ -36,6 +39,7 @@ export const stepsDecisionWindowOpen: Step[] = [ ]} i18nKey="views.onboarding.stepsDecisionWindowOpen.donateToProjects.text" + values={{ epoch }} /> ), }, @@ -52,9 +56,11 @@ export const stepsDecisionWindowOpen: Step[] = [ }, ]; -export const stepsDecisionWindowClosed: Step[] = [ +export const getStepsDecisionWindowClosed = (epoch: string, changeAWDate: string): Step[] => [ { - header: i18n.t('views.onboarding.stepsDecisionWindowClosed.welcomeToOctant.header'), + header: i18n.t('views.onboarding.stepsDecisionWindowClosed.welcomeToOctant.header', { + epoch, + }), image: 'images/onboarding/1.webp', imageClassName: styles.welcomeToOctant, text: ( @@ -66,7 +72,7 @@ export const stepsDecisionWindowClosed: Step[] = [ }, { header: i18n.t('views.onboarding.stepsDecisionWindowClosed.earnRewards.header'), - image: 'images/onboarding/earn-rewards.webp', + image: 'images/cycle.webp', imageClassName: styles.earnRewards, text: ( , + text: ( + , +