SOV-3237: Proposal creation - Proposal Overview (#637)

* SOV-3237: Proposal creation - Proposal Overview * Create violet-dogs-kick.md * rebuild * chore: updates from comments --------- Co-authored-by: Victor Creed <[email protected]>
DistributedCollective · Oct 11, 2023 · ac60e47 · ac60e47
1 parent f04e64b
commit ac60e47
Show file tree

Hide file tree

Showing 12 changed files with 340 additions and 70 deletions.
diff --git a/.changeset/violet-dogs-kick.md b/.changeset/violet-dogs-kick.md
@@ -0,0 +1,6 @@
+---
+"frontend": patch
+---
+
+SOV-3237: Proposal creation - Proposal Overview
+
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.tsx
@@ -12,11 +12,12 @@ import {
 } from '@sovryn/ui';
 
 import { useAccount } from '../../../hooks/useAccount';
+import { translations } from '../../../locales/i18n';
 import { sharedState } from '../../../store/rxjs/shared-state';
 import { NewProposalButton } from './components/NewProposalButton/NewProposalButton';
 import { Proposals } from './components/Proposals/Proposals';
+import { ProposalContextProvider } from './contexts/NewProposalContext';
 import { useGetProposals } from './hooks/useGetProposals';
-import { translations } from '../../../locales/i18n';
 
 const pageTranslations = translations.bitocracyPage;
 
@@ -30,7 +31,7 @@ const BitocracyPage: FC = () => {
   );
 
   return (
-    <>
+    <ProposalContextProvider>
       <Helmet>
         <title>{t(pageTranslations.meta.title)}</title>
       </Helmet>
@@ -58,7 +59,7 @@ const BitocracyPage: FC = () => {
         )}
         <Proposals proposals={proposals} loading={loading} />
       </div>
-    </>
+    </ProposalContextProvider>
   );
 };
 

diff --git a/...frontend/src/app/5_pages/BitocracyPage/components/NewProposalButton/NewProposalButton.tsx b/...frontend/src/app/5_pages/BitocracyPage/components/NewProposalButton/NewProposalButton.tsx
@@ -12,7 +12,6 @@ import {
 
 import { translations } from '../../../../../locales/i18n';
 import { useGetPersonalStakingStatistics } from '../../../StakePage/components/PersonalStakingStatistics/hooks/useGetPersonalStakingStatistics';
-import { ProposalContextProvider } from '../../contexts/NewProposalContext';
 import { NewProposalForm } from '../NewProposalForm/NewProposalForm';
 
 const pageTranslations = translations.bitocracyPage;
@@ -31,11 +30,11 @@ export const NewProposalButton: FC = () => {
   );
 
   return (
-    <ProposalContextProvider>
+    <>
       {isNewProposalButtonVisible && (
         <div className="bg-gray-90 sm:bg-transparent p-4 pb-8 sm:p-0 border-t sm:border-none border-gray-60 flex items-center justify-center sm:ml-3 sm:relative fixed bottom-0 left-0 right-0 z-10 sm:z-0">
           <Button
-            text={t(pageTranslations.actions.newProposal)}
+            text={t(pageTranslations.actions.createProposal)}
             className="w-full sm:w-auto"
             onClick={toggleNewProposalDialog}
           />
@@ -45,15 +44,15 @@ export const NewProposalButton: FC = () => {
       <Dialog
         isOpen={openNewProposalDialog}
         dataAttribute="new-proposal-dialog"
-        width={DialogSize.sm}
+        width={DialogSize.lg}
         disableFocusTrap
       >
         <DialogHeader
-          title={t(pageTranslations.actions.newProposal)}
+          title={t(pageTranslations.actions.createProposal)}
           onClose={toggleNewProposalDialog}
         />
         <DialogBody children={<NewProposalForm />} />
       </Dialog>
-    </ProposalContextProvider>
+    </>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/BitocracyPage/components/NewProposalForm/NewProposalForm.tsx b/apps/frontend/src/app/5_pages/BitocracyPage/components/NewProposalForm/NewProposalForm.tsx
@@ -9,7 +9,7 @@ import {
   ProposalCreationStep,
   ProposalCreationType,
 } from '../../contexts/ProposalContext.types';
-
+import { PreviewProposalDialog } from './components/PreviewProposalDialog/PreviewProposalDialog';
 import { ProposalDataForm } from './components/ProposalDataForm/ProposalDataForm';
 import { ProposalInitialStep } from './components/ProposalInitialStep/ProposalInitialStep';
 
@@ -75,6 +75,8 @@ export const NewProposalForm: FC = () => {
         onSubmit={handleSubmit}
       />
     );
+  } else if (step === ProposalCreationStep.Overview) {
+    return <PreviewProposalDialog />;
   } else {
     return null;
   }

diff --git a/...s/BitocracyPage/components/NewProposalForm/components/PreviewProposal/PreviewProposal.tsx b/...s/BitocracyPage/components/NewProposalForm/components/PreviewProposal/PreviewProposal.tsx
@@ -0,0 +1,89 @@
+import React, { FC, useCallback } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ButtonStyle,
+  Heading,
+  Paragraph,
+  ParagraphSize,
+} from '@sovryn/ui';
+
+import { TxIdWithNotification } from '../../../../../../2_molecules/TxIdWithNotification/TransactionIdWithNotification';
+import { useAccount } from '../../../../../../../hooks/useAccount';
+import { translations } from '../../../../../../../locales/i18n';
+import { ProposalInfo } from '../../../../../ProposalPage/components/ProposalInfo/ProposalInfo';
+import { useProposalContext } from '../../../../contexts/NewProposalContext';
+import { ProposalCreationStep } from '../../../../contexts/ProposalContext.types';
+
+const pageTranslations = translations.proposalPage;
+
+export const PreviewProposal: FC = () => {
+  const { details, submit, type, setStep } = useProposalContext();
+
+  const { account } = useAccount();
+
+  const handleSubmit = useCallback(() => {
+    submit();
+  }, [submit]);
+
+  const handleClose = useCallback(() => {
+    setStep(ProposalCreationStep.Details);
+  }, [setStep]);
+
+  return (
+    <>
+      <div className="w-full flex flex-col md:flex-row gap-20 text-left text-gray-10 mb-5 mt-2 pb-14">
+        <div className="w-full flex flex-col gap-6 sm:max-h-[35rem] overflow-auto">
+          <div className="md:px-6 md:pb-6">
+            <Heading className="text-base sm:text-2xl font-medium break-all">
+              {details.title}
+            </Heading>
+            <div className="mt-2.5 sm:mt-3 font-medium text-gray-30 break-words">
+              {details.summary}
+            </div>
+            <div className="mt-2.5 sm:mt-6 text-xs font-medium text-gray-30 flex justify-between md:justify-start">
+              <span className="inline-block min-w-20">
+                {t(pageTranslations.proposedBy)}
+              </span>
+
+              {account && (
+                <TxIdWithNotification
+                  href=""
+                  value={account}
+                  dataAttribute="proposal-proposer-address-id"
+                />
+              )}
+            </div>
+            <Paragraph
+              size={ParagraphSize.base}
+              className="mt-1 text-xs font-medium text-gray-30 flex justify-between md:justify-start"
+            >
+              <span className="inline-block min-w-20">
+                {t(pageTranslations.proposalID)}
+              </span>
+              <span className="text-gray-10">{`${type}-001`}</span>
+            </Paragraph>
+          </div>
+
+          <ProposalInfo link={details.link} description={details.text} />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4 bg-sovryn-black p-6 pb-10 border-t sm:border-none border-gray-60 justify-center sm:absolute fixed bottom-0 left-0 right-0 z-10">
+        <Button
+          text={t(translations.common.buttons.back)}
+          onClick={handleClose}
+          style={ButtonStyle.secondary}
+          className="flex-1 max-w-44"
+        />
+        <Button
+          text={t(translations.common.buttons.confirm)}
+          onClick={handleSubmit}
+          className="flex-1 max-w-44"
+        />
+      </div>
+    </>
+  );
+};
diff --git a/...age/components/NewProposalForm/components/PreviewProposalDialog/PreviewProposalDialog.tsx b/...age/components/NewProposalForm/components/PreviewProposalDialog/PreviewProposalDialog.tsx
@@ -0,0 +1,34 @@
+import React, { FC, useCallback } from 'react';
+
+import { t } from 'i18next';
+
+import { Dialog, DialogBody, DialogHeader, DialogSize } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { useProposalContext } from '../../../../contexts/NewProposalContext';
+import { ProposalCreationStep } from '../../../../contexts/ProposalContext.types';
+import { PreviewProposal } from '../PreviewProposal/PreviewProposal';
+
+const pageTranslations = translations.bitocracyPage;
+
+export const PreviewProposalDialog: FC = () => {
+  const { setStep } = useProposalContext();
+  const onClose = useCallback(() => {
+    setStep(ProposalCreationStep.Details);
+  }, [setStep]);
+
+  return (
+    <Dialog
+      isOpen={true}
+      dataAttribute="preview-proposal-dialog"
+      width={DialogSize.xl3}
+      disableFocusTrap
+    >
+      <DialogHeader
+        title={t(pageTranslations.proposalPreview.title)}
+        onClose={onClose}
+      />
+      <DialogBody children={<PreviewProposal />} />
+    </Dialog>
+  );
+};
diff --git a/...Page/components/NewProposalForm/components/ProposalDataForm/ProposalDataForm.constants.ts b/...Page/components/NewProposalForm/components/ProposalDataForm/ProposalDataForm.constants.ts
@@ -0,0 +1,4 @@
+export const MAXIMUM_TITLE_LENGTH = 140;
+export const MAXIMUM_SUMMARY_LENGTH = 140;
+export const MAXIMUM_DISCUSSION_URL_LENGTH = 500;
+export const MAXIMUM_PROPOSAL_TEXT_LENGTH = 30000;