OCT-1499: Update both onboarding flows to have automatic dates & epoc…

…h numbers (#117)

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);
       }
     });

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;
+  }
+}

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;

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)),
   ];
 };
 

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: (
       <Trans
         components={[<span className={styles.bold} />]}
         i18nKey="views.onboarding.stepsDecisionWindowOpen.welcomeToOctant.text"
+        values={{ date: changeAWDate }}
       />
     ),
   },
@@ -36,6 +39,7 @@ export const stepsDecisionWindowOpen: Step[] = [
       <Trans
         components={[<span className={styles.bold} />]}
         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: (
       <Trans
@@ -76,9 +82,19 @@ export const stepsDecisionWindowClosed: Step[] = [
     ),
   },
   {
-    header: i18n.t('views.onboarding.stepsDecisionWindowClosed.getInvolved.header'),
-    image: 'images/onboarding/get-involved.webp',
+    header: i18n.t('views.onboarding.stepsDecisionWindowClosed.getReady.header'),
+    image: 'images/rewards.webp',
     imageClassName: styles.slideIt,
-    text: <Trans i18nKey="views.onboarding.stepsDecisionWindowClosed.getInvolved.text" />,
+    text: (
+      <Trans
+        components={[
+          <Button className={styles.link} href={OCTANT_BUILD_LINK} variant="link3" />,
+          <Button className={styles.link} href={DISCORD_LINK} variant="link3" />,
+          <Button className={styles.link} href={TWITTER_LINK} variant="link3" />,
+        ]}
+        i18nKey="views.onboarding.stepsDecisionWindowClosed.getReady.text"
+        values={{ date: changeAWDate }}
+      />
+    ),
   },
 ];

client/src/hooks/queries/donors/useProjectDonors.ts

@@ -39,7 +39,11 @@ export default function useProjectDonors(
   });
 
   return useQuery({
-    enabled: !!projectAddress && (!!currentEpoch && currentEpoch > 1) && (isDecisionWindowOpen === true || epoch !== undefined),
+    enabled:
+      !!projectAddress &&
+      !!currentEpoch &&
+      currentEpoch > 1 &&
+      (isDecisionWindowOpen === true || epoch !== undefined),
     queryFn: () => apiGetProjectDonors(projectAddress, epoch || currentEpoch! - 1),
     queryKey: QUERY_KEYS.projectDonors(projectAddress, epoch || currentEpoch! - 1),
     select: response => mapDataToProjectDonors(response),

client/src/locales/en/translation.json

@@ -409,34 +409,34 @@
       },
       "stepsDecisionWindowOpen": {
         "welcomeToOctant": {
-          "header": "Welcome to Octant",
-          "text": "To get started, lock some GLM in the <0>Earn</0> view, and take a look at the projects you can donate to in the <0>Projects</0> view.<br/><br/>If you already have GLM locked, you’ll have some rewards to use during E2 Allocation window, which runs from 17 to 31 Jan."
+          "header": "Welcome to Epoch {{epoch}} Allocation",
+          "text": "If you locked GLM last epoch, you'll have rewards available during this allocation window, which runs until {{date}}.<br/><br/>If not, lock some GLM in the Earn view, and explore the projects for this epoch to get an idea of what Octant is all about."
         },
         "earnRewards": {
           "header": "Earn ETH rewards",
-          "text": "ETH rewards are earned based on a weighted average, so the more GLM you lock and the longer you lock it for, the more you earn.<br/><br/>You can unlock at any time. Use the calculator in the <0>Earn</0> view to work out the return per epoch on a given amount of GLM."
+          "text": "ETH rewards are earned based on a weighted average, so the more GLM you lock and the longer you lock it for, the more you earn.<br/><br/>You can unlock at any time but doing so will reduce your rewards. Use the calculator in the Earn view to estimate potential rewards."
         },
         "donateToProjects": {
           "header": "Donate to projects",
-          "text": "Check out the lineup for Epoch 3 in the <0>Projects</0> view. Tap a project tile to read its details. Help your favourite projects out by donating to them.<br/><br/>Your donation will be fund-matched by Golem Foundation. Just tap the heart to add a project to the <0>Allocate</0> view where you can donate."
+          "text": "Check out the lineup for Epoch {{epoch}} in the Projects view. Tap a project tile to read its details and donate to your favourites.<br/><br/>Your donation will be fund matched by Golem Foundation. Just tap the heart to add a project to the Allocate view where you can donate."
         },
         "slideIt": {
           "header": "Just slide it",
-          "text": "Once you have rewards, use the slider in the <0>Allocate</0> view to easily divide rewards between projects or yourself.<br/><br/>To change your choices at any time during allocation, just click Edit, make some changes and reconfirm in your wallet."
+          "text": "If you have rewards, use the slider in the Allocate view to easily divide them between projects or yourself.<br/><br/>To change your choices at any time during allocation, just click Edit, make some changes and reconfirm in your wallet."
         }
       },
       "stepsDecisionWindowClosed": {
         "welcomeToOctant": {
-          "header": "Welcome to Octant Epoch 3",
-          "text": "To get started, lock some GLM in the <0>Earn</0> view, and see how the previous Epochs projects performed in the archive.<br /><br />If you made personal allocations in the previous epoch, your ETH will be available to withdraw in the <0>Earn</0> view."
+          "header": "Welcome to Octant Epoch {{epoch}}",
+          "text": "Octant is a Golem Foundation experiment in decentralised governance and funding public good projects.<br/><br/>To get started, lock some GLM in the Earn view, and explore the projects for this epoch to get an idea of what Octant is all"
         },
         "earnRewards": {
           "header": "Earn ETH rewards",
-          "text": "Use the <0>Earn</0> view calculator to work out your return per epoch for any amount of GLM. You can unlock your tokens at any time.<br /><br/>If you already have GLM locked, you will have some rewards to use during Epoch 3 allocation which will begin in mid April 2024."
+          "text": "ETH rewards are earned based on a weighted average, so the more GLM you lock and the longer you lock it for, the more you earn.<br/><br/>You can unlock at any time but doing so will reduce your rewards. Use the calculator in the Earn view to estimate potential rewards."
         },
-        "getInvolved": {
-          "header": "Get involved",
-          "text": "Epoch 3 projects will start appearing in the app after a 2-3 week cooling off period. Get involved and suggest a project in our Discord.<br /><br />Once projects are shortlisted, a community vote on Snapshot decides which projects enter this epoch. All participating voters get a POAP."
+        "getReady": {
+          "header": "Get ready for allocation",
+          "text": "Lock your GLM, check out the projects to support and get ready for the next allocation window which opens on {{date}}.<br/><br/>Visit <0>Octant.build</0>, join the <1>Discord</1> or get project updates on <2>Twitter</2>."
         }
       }
     },