[DDW-566] Implement "Voting registration is over" screen (#2428)

* [DDW-566] Implement voting registration end screen

* [DDW-566] Update changelog

* [DDW-566] Update date time formatting

* [DDW-566] Update learn more link for ended registration

* [DDW-566] Update voting registration end date config value

CHANGELOG.md

@@ -5,7 +5,7 @@ Changelog
 
 ### Features
 
-- TBD
+- Implemented "Voting registration is over" screen ([PR 2428](https://github.com/input-output-hk/daedalus/pull/2428))
 
 ## 3.3.1
 

source/renderer/app/components/voting/VotingInfo.js

@@ -8,6 +8,14 @@ import { Link } from 'react-polymorph/lib/components/Link';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import SVGInline from 'react-svg-inline';
 import BorderedBox from '../widgets/BorderedBox';
+import {
+  VOTING_REGISTRATION_END_DATE,
+  VOTING_REGISTRATION_CAST_START_DATE,
+  VOTING_REGISTRATION_CAST_END_DATE,
+  VOTING_REGISTRATION_NEW_START_DATE,
+} from '../../config/votingConfig';
+import { formattedDateTime } from '../../utils/formatters';
+import type { Locale } from '../../../../common/types/locales.types';
 import styles from './VotingInfo.scss';
 import downloadAppStoreIcon from '../../assets/images/voting/download-app-store-icon-ic.inline.svg';
 import downloadPlayStoreIcon from '../../assets/images/voting/download-play-store-icon-ic.inline.svg';
@@ -18,6 +26,17 @@ const messages = defineMessages({
     defaultMessage: '!!!Register to vote on Fund3',
     description: 'Headline for voting registration steps',
   },
+  headingForEndedRegistration: {
+    id: 'voting.info.headingForEndedRegistration',
+    defaultMessage: '!!!Fund3 Voting Registration Ended',
+    description: 'Headline for ended voting registration',
+  },
+  descriptionForEndedRegistration: {
+    id: 'voting.info.descriptionForEndedRegistration',
+    defaultMessage:
+      '!!!<p>Voting registration for Project Catalyst Fund3 has been completed. The voting snapshot took place on <b>{snapshotDate}</b>.</p><p>If you have registered to vote on Fund3, you can cast your vote using the Catalyst Voting mobile app between <b>{castStartDate}</b> and <b>{castEndDate}</b>.</p><p>Fund4 registration will start on <b>{newRegistrationStartDate}</b>.</p>',
+    description: 'Description for ended voting registration',
+  },
   stepTitle1: {
     id: 'voting.info.stepTitle1',
     defaultMessage:
@@ -30,15 +49,36 @@ const messages = defineMessages({
       '!!!$70.000 worth of ada rewards will be distributed between ada holders who register their vote.',
     description: 'Info step title 2 for voting registration steps',
   },
+  learnMorePreviousLabel: {
+    id: 'voting.info.learnMorePreviousLabel',
+    defaultMessage: '!!!Please read the',
+    description: 'Learn more link previous label',
+  },
+  learnMoreNextLabel: {
+    id: 'voting.info.learnMoreNextLabel',
+    defaultMessage: '!!!for more information.',
+    description: 'Learn more link next label',
+  },
   learnMoreLinkLabel: {
     id: 'voting.info.learnMoreLinkLabel',
     defaultMessage: '!!!Learn more',
-    description: 'learnMoreLinkLabel for voting registration steps',
+    description: 'Learn more link label for registration steps',
+  },
+  learnMoreLinkLabelForEndedRegistration: {
+    id: 'voting.info.learnMoreLinkLabelForEndedRegistration',
+    defaultMessage: '!!!Fund3 FAQs',
+    description: 'Learn more link label for ended registration',
   },
   learnMoreLinkUrl: {
     id: 'voting.info.learnMoreLinkUrl',
     defaultMessage: '!!!https://cardano.ideascale.com/a/index',
-    description: 'learnMoreLinkUrl for voting registration steps',
+    description: 'Learn more link url for registration steps',
+  },
+  learnMoreLinkUrlForEndedRegistration: {
+    id: 'voting.info.learnMoreLinkUrlForEndedRegistration',
+    defaultMessage:
+      '!!!https://iohk.zendesk.com/hc/en-us/articles/900004448046',
+    description: 'Learn more link url for ended registration',
   },
   bottomContentTitle: {
     id: 'voting.info.bottomContentTitle',
@@ -51,6 +91,12 @@ const messages = defineMessages({
       '!!!To register to vote for Catalyst Fund3 you first need to download the <b>Catalyst Voting</b> app on your Android or iOS smartphone.',
     description: 'bottomContentDescription for voting registration steps',
   },
+  bottomContentDescriptionForEndedRegistration: {
+    id: 'voting.info.bottomContentDescriptionForEndedRegistration',
+    defaultMessage:
+      '!!!To cast your vote on Project Catalyst Fund3 proposals, you need to download the <b>Catalyst Voting</b> app on your Android or iOS smartphone.',
+    description: 'bottomContentDescription for ended registration',
+  },
   checkboxLabel: {
     id: 'voting.info.checkboxLabel',
     defaultMessage: '!!!I have installed the Catalyst Voting app',
@@ -76,6 +122,10 @@ const messages = defineMessages({
 });
 
 type Props = {
+  currentLocale: Locale,
+  currentDateFormat: string,
+  currentTimeFormat: string,
+  isRegistrationEnded: boolean,
   onRegisterToVoteClick: Function,
   onExternalLinkClick: Function,
 };
@@ -102,53 +152,128 @@ export default class VotingInfo extends Component<Props, State> {
 
   render() {
     const { intl } = this.context;
-    const { onRegisterToVoteClick, onExternalLinkClick } = this.props;
+    const {
+      currentLocale,
+      currentDateFormat,
+      currentTimeFormat,
+      isRegistrationEnded,
+      onRegisterToVoteClick,
+      onExternalLinkClick,
+    } = this.props;
     const { isAppInstalled } = this.state;
-    const heading = intl.formatMessage(messages.heading);
-    const learnMoreLinkLabel = intl.formatMessage(messages.learnMoreLinkLabel);
-    const learnMoreLinkUrl = intl.formatMessage(messages.learnMoreLinkUrl);
+    const headingMessage = isRegistrationEnded
+      ? messages.headingForEndedRegistration
+      : messages.heading;
+    const heading = intl.formatMessage(headingMessage);
+    const learnMoreLinkLabelMessage = isRegistrationEnded
+      ? messages.learnMoreLinkLabelForEndedRegistration
+      : messages.learnMoreLinkLabel;
+    const learnMoreLinkLabel = intl.formatMessage(learnMoreLinkLabelMessage);
+    const learnMoreLinkUrlMessage = isRegistrationEnded
+      ? messages.learnMoreLinkUrlForEndedRegistration
+      : messages.learnMoreLinkUrl;
+    const learnMoreLinkUrl = intl.formatMessage(learnMoreLinkUrlMessage);
     const stepTitle1 = intl.formatMessage(messages.stepTitle1);
     const stepTitle2 = intl.formatMessage(messages.stepTitle2);
     const bottomContentTitle = intl.formatMessage(messages.bottomContentTitle);
+    const bottomContentDescription = isRegistrationEnded
+      ? messages.bottomContentDescriptionForEndedRegistration
+      : messages.bottomContentDescription;
     const buttonLabel = intl.formatMessage(messages.buttonLabel);
     const appleAppButtonUrl = intl.formatMessage(messages.appleAppButtonUrl);
     const androidAppButtonUrl = intl.formatMessage(
       messages.androidAppButtonUrl
     );
     const checkboxLabel = intl.formatMessage(messages.checkboxLabel);
+    const snapshotDate = formattedDateTime(VOTING_REGISTRATION_END_DATE, {
+      currentLocale,
+      currentDateFormat,
+      currentTimeFormat,
+    });
+    const castStartDate = formattedDateTime(
+      VOTING_REGISTRATION_CAST_START_DATE,
+      {
+        currentLocale,
+        currentDateFormat,
+        currentTimeFormat,
+      }
+    );
+    const castEndDate = formattedDateTime(VOTING_REGISTRATION_CAST_END_DATE, {
+      currentLocale,
+      currentDateFormat,
+      currentTimeFormat,
+    });
+    const newRegistrationStartDate = formattedDateTime(
+      VOTING_REGISTRATION_NEW_START_DATE,
+      {
+        currentLocale,
+        currentDateFormat,
+        currentTimeFormat,
+      }
+    );
 
     return (
       <div className={styles.component}>
         <BorderedBox>
           <div className={styles.heading}>{heading}</div>
-          <div className={styles.stepsContainer}>
-            <div className={styles.step}>
-              <span className={styles.number}>1</span>
-              <p>{stepTitle1}</p>
-            </div>
-            <div className={styles.step}>
-              <span className={styles.number}>2</span>
-              <p>{stepTitle2}</p>
+          {isRegistrationEnded ? (
+            <div className={styles.descriptionForEndedRegistration}>
+              <FormattedHTMLMessage
+                {...messages.descriptionForEndedRegistration}
+                values={{
+                  snapshotDate,
+                  castStartDate,
+                  castEndDate,
+                  newRegistrationStartDate,
+                }}
+              />
+              <div className={styles.learnMoreContainer}>
+                <span className={styles.learnMorePreviousLabel}>
+                  {intl.formatMessage(messages.learnMorePreviousLabel)}
+                </span>
+                <Link
+                  label={learnMoreLinkLabel}
+                  onClick={() => onExternalLinkClick(learnMoreLinkUrl)}
+                  className={styles.learnMoreLink}
+                />
+                <span className={styles.learnMoreNextLabel}>
+                  {intl.formatMessage(messages.learnMoreNextLabel)}
+                </span>
+              </div>
             </div>
-          </div>
-          <Link
-            label={learnMoreLinkLabel}
-            onClick={() => onExternalLinkClick(learnMoreLinkUrl)}
-            className={styles.learnMoreLink}
-          />
+          ) : (
+            <>
+              <div className={styles.stepsContainer}>
+                <div className={styles.step}>
+                  <span className={styles.number}>1</span>
+                  <p>{stepTitle1}</p>
+                </div>
+                <div className={styles.step}>
+                  <span className={styles.number}>2</span>
+                  <p>{stepTitle2}</p>
+                </div>
+              </div>
+              <Link
+                label={learnMoreLinkLabel}
+                onClick={() => onExternalLinkClick(learnMoreLinkUrl)}
+              />
+            </>
+          )}
           <hr className={styles.separator} />
           <div className={styles.bottomContent}>
             <div className={styles.leftContent}>
               <p>
                 <b>{bottomContentTitle}</b>
               </p>
-              <FormattedHTMLMessage {...messages.bottomContentDescription} />
-              <Checkbox
-                label={checkboxLabel}
-                onChange={this.handleIsAppInstalled}
-                className={styles.checkbox}
-                checked={isAppInstalled}
-              />
+              <FormattedHTMLMessage {...bottomContentDescription} />
+              {!isRegistrationEnded && (
+                <Checkbox
+                  label={checkboxLabel}
+                  onChange={this.handleIsAppInstalled}
+                  className={styles.checkbox}
+                  checked={isAppInstalled}
+                />
+              )}
             </div>
             <div className={styles.rightContent}>
               <div className={styles.appStore}>
@@ -189,11 +314,13 @@ export default class VotingInfo extends Component<Props, State> {
               </div>
             </div>
           </div>
-          <Button
-            onClick={onRegisterToVoteClick}
-            label={buttonLabel}
-            disabled={!isAppInstalled}
-          />
+          {!isRegistrationEnded && (
+            <Button
+              onClick={onRegisterToVoteClick}
+              label={buttonLabel}
+              disabled={!isAppInstalled}
+            />
+          )}
         </BorderedBox>
       </div>
     );

source/renderer/app/components/voting/VotingInfo.scss

@@ -17,6 +17,55 @@
   text-transform: uppercase;
 }
 
+.descriptionForEndedRegistration {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  p {
+    @extend %regularText;
+    color: var(--theme-voting-font-color-regular);
+    font-family: var(--font-light);
+    margin-bottom: 11px;
+    text-align: left;
+  }
+
+  b {
+    font-family: var(--font-medium);
+  }
+
+  .learnMoreContainer {
+    align-items: center;
+    display: flex;
+
+    .learnMorePreviousLabel,
+    .learnMoreNextLabel {
+      @extend %regularText;
+      color: var(--theme-voting-font-color-regular);
+      font-family: var(--font-light);
+    }
+
+    .learnMorePreviousLabel {
+      margin-right: 5px;
+    }
+
+    .learnMoreNextLabel {
+      margin-left: 5px;
+    }
+
+    .learnMoreLink {
+      border-bottom: 0;
+      font-family: var(--font-regular);
+      font-size: 16px;
+
+      &::after {
+        height: 0;
+        width: 0;
+      }
+    }
+  }
+}
+
 .stepsContainer {
   display: flex;
   justify-content: space-around;

source/renderer/app/config/votingConfig.js

@@ -7,3 +7,14 @@ export const VOTING_REGISTRATION_FEE_CALCULATION_AMOUNT = 1; // 1 ADA | unit: AD
 export const VOTING_REGISTRATION_PIN_CODE_LENGTH = 4;
 export const VOTING_REGISTRATION_MIN_TRANSACTION_CONFIRMATIONS = isDev ? 2 : 10;
 export const VOTING_REGISTRATION_TRANSACTION_POLLING_INTERVAL = 5000; // 5 seconds | unit: milliseconds
+export const VOTING_REGISTRATION_END_DATE = new Date('Mar 3, 2021, 19:00 UTC');
+export const VOTING_REGISTRATION_END_CHECK_INTERVAL = 3000; // 3 seconds | unit: milliseconds
+export const VOTING_REGISTRATION_CAST_START_DATE = new Date(
+  'Mar 5, 2021, 19:00 UTC'
+);
+export const VOTING_REGISTRATION_CAST_END_DATE = new Date(
+  'Mar 24, 2021, 19:00 UTC'
+);
+export const VOTING_REGISTRATION_NEW_START_DATE = new Date(
+  'Apr 7, 2021, 19:00 UTC'
+);

source/renderer/app/containers/voting/VotingRegistrationPage.js

@@ -25,9 +25,11 @@ export default class VotingRegistrationPage extends Component<Props> {
 
   render() {
     const { actions, stores } = this.props;
-    const { app, networkStatus, uiDialogs, wallets } = stores;
+    const { app, networkStatus, uiDialogs, wallets, voting, profile } = stores;
     const { openExternalLink } = app;
     const { isSynced, syncPercentage } = networkStatus;
+    const { isRegistrationEnded } = voting;
+    const { currentTimeFormat, currentDateFormat, currentLocale } = profile;
 
     const isVotingRegistrationDialogOpen = uiDialogs.isOpen(
       VotingRegistrationDialog
@@ -58,6 +60,10 @@ export default class VotingRegistrationPage extends Component<Props> {
       <Layout>
         <VerticalFlexContainer>
           <VotingInfo
+            currentLocale={currentLocale}
+            currentDateFormat={currentDateFormat}
+            currentTimeFormat={currentTimeFormat}
+            isRegistrationEnded={isRegistrationEnded}
             onRegisterToVoteClick={() =>
               actions.dialogs.open.trigger({
                 dialog: VotingRegistrationDialog,