Refactor CreateProposalTemplateForm into generic ProposalBuilder

src/components/CreateProposalTemplate/ProposalTemplateDetails.tsx → src/components/ProposalBuilder/ProposalDetails.tsx

@@ -3,7 +3,7 @@ import { FormikProps } from 'formik';
 import { Fragment, PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
-import { CreateProposalTemplateForm } from '../../types/createProposalTemplate';
+import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
 import Markdown from '../ui/proposal/Markdown';
 import '../../assets/css/Markdown.css';
 
@@ -29,10 +29,11 @@ export function TransactionValueContainer({
 }
 
 export default function ProposalTemplateDetails({
-  values: { proposalTemplateMetadata, transactions },
-}: FormikProps<CreateProposalTemplateForm>) {
+  values: { proposalMetadata, transactions },
+  mode,
+}: FormikProps<CreateProposalForm> & { mode: ProposalBuilderMode }) {
   const { t } = useTranslation(['proposalTemplate', 'proposal']);
-  const trimmedTitle = proposalTemplateMetadata.title?.trim();
+  const trimmedTitle = proposalMetadata.title?.trim();
 
   return (
     <Box
@@ -51,23 +52,25 @@ export default function ProposalTemplateDetails({
           <Text color="grayscale.500">{t('previewTitle')}</Text>
           <Text textAlign="right">{trimmedTitle}</Text>
         </HStack>
-        <HStack justifyContent="space-between">
-          <Text color="grayscale.500">{t('previewThumnbail')}</Text>
-          {trimmedTitle && (
-            <Avatar
-              size="sm"
-              w="28px"
-              h="28px"
-              name={trimmedTitle}
-              borderRadius="4px"
-              getInitials={(title: string) => title.slice(0, 2)}
-            />
-          )}
-        </HStack>
+        {mode === ProposalBuilderMode.TEMPLATE && (
+          <HStack justifyContent="space-between">
+            <Text color="grayscale.500">{t('previewThumnbail')}</Text>
+            {trimmedTitle && (
+              <Avatar
+                size="sm"
+                w="28px"
+                h="28px"
+                name={trimmedTitle}
+                borderRadius="4px"
+                getInitials={(title: string) => title.slice(0, 2)}
+              />
+            )}
+          </HStack>
+        )}
         <HStack justifyContent="space-between">
           <Text color="grayscale.500">{t('proposalTemplateDescription')}</Text>
           <Markdown
-            content={proposalTemplateMetadata.description}
+            content={proposalMetadata.description}
             collapsedLines={2}
           />
         </HStack>

src/components/ProposalBuilder/ProposalMetadata.tsx

@@ -0,0 +1,79 @@
+import { Button, Divider, VStack } from '@chakra-ui/react';
+import { FormikProps } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { CreateProposalState } from '../../types';
+import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
+import { InputComponent, TextareaComponent } from '../ui/forms/InputComponent';
+
+export interface ProposalMetadataProps extends FormikProps<CreateProposalForm> {
+  setFormState: (state: CreateProposalState) => void;
+  mode: ProposalBuilderMode;
+}
+
+export default function ProposalMetadata({
+  values: { proposalMetadata },
+  setFieldValue,
+  errors: { proposalMetadata: proposalMetadataError },
+  setFormState,
+  mode,
+}: ProposalMetadataProps) {
+  const { t } = useTranslation(['proposalTemplate', 'proposal', 'common']);
+  const isProposalMode = mode === ProposalBuilderMode.PROPOSAL;
+
+  return (
+    <>
+      <VStack
+        align="left"
+        spacing={4}
+        mt={4}
+      >
+        <InputComponent
+          label={
+            isProposalMode ? t('proposalTitle', { ns: 'proposal' }) : t('proposalTemplateTitle')
+          }
+          helper={
+            isProposalMode
+              ? t('proposalTitleHelper', { ns: 'proposal' })
+              : t('proposalTemplateTitleHelperText')
+          }
+          isRequired
+          value={proposalMetadata.title}
+          onChange={e => setFieldValue('proposalMetadata.title', e.target.value)}
+          disabled={false}
+          testId="metadata.title"
+          maxLength={50}
+        />
+        <TextareaComponent
+          label={
+            isProposalMode
+              ? t('proposalDescription', { ns: 'proposal' })
+              : t('proposalTemplateDescription')
+          }
+          subLabel={t('')}
+          helper={
+            isProposalMode
+              ? t('proposalDescriptionHelper', { ns: 'proposal' })
+              : t('proposalTemplateDescriptionHelperText')
+          }
+          isRequired={false}
+          value={proposalMetadata.description}
+          onChange={e => setFieldValue('proposalMetadata.description', e.target.value)}
+          disabled={false}
+          rows={12}
+        />
+      </VStack>
+      <Divider
+        color="chocolate.700"
+        mt={8}
+        mb={6}
+      />
+      <Button
+        w="100%"
+        onClick={() => setFormState(CreateProposalState.TRANSACTIONS_FORM)}
+        isDisabled={!!proposalMetadataError || !proposalMetadata.title}
+      >
+        {t('next', { ns: 'common' })}
+      </Button>
+    </>
+  );
+}

src/components/CreateProposalTemplate/ProposalTemplateTransaction.tsx → src/components/ProposalBuilder/ProposalTransaction.tsx

@@ -2,29 +2,32 @@ import { VStack, HStack, Text, Box, Flex, IconButton } from '@chakra-ui/react';
 import { AddPlus, Minus } from '@decent-org/fractal-ui';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CreateProposalTemplateTransaction } from '../../types/createProposalTemplate';
+import { CreateProposalTransaction, ProposalBuilderMode } from '../../types/proposalBuilder';
 import ABISelector, { ABIElement } from '../ui/forms/ABISelector';
 import ExampleLabel from '../ui/forms/ExampleLabel';
 import { BigNumberComponent, InputComponent } from '../ui/forms/InputComponent';
-import { DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION } from './constants';
+import { DEFAULT_PROPOSAL_TRANSACTION } from './constants';
 
-interface ProposalTemplateTransactionProps {
-  transaction: CreateProposalTemplateTransaction;
+interface ProposalTransactionProps {
+  transaction: CreateProposalTransaction;
   transactionIndex: number;
   transactionPending: boolean;
   txAddressError?: string;
   txFunctionError?: string;
   setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
+  mode: ProposalBuilderMode;
 }
 
-export default function ProposalTemplateTransaction({
+export default function ProposalTransaction({
   transaction,
   transactionIndex,
   transactionPending,
   txAddressError,
   txFunctionError,
   setFieldValue,
-}: ProposalTemplateTransactionProps) {
+  mode,
+}: ProposalTransactionProps) {
+  const isProposalMode = mode === ProposalBuilderMode.PROPOSAL;
   const { t } = useTranslation(['proposal', 'proposalTemplate', 'common']);
   const handleABISelectorChange = useCallback(
     (value: ABIElement) => {
@@ -123,7 +126,7 @@ export default function ProposalTemplateTransaction({
                 onClick={() =>
                   setFieldValue(`transactions.${transactionIndex}.parameters`, [
                     ...transaction.parameters,
-                    DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION,
+                    DEFAULT_PROPOSAL_TRANSACTION,
                   ])
                 }
               >
@@ -170,34 +173,38 @@ export default function ProposalTemplateTransaction({
                 alignItems="center"
                 mt={4}
               >
-                <InputComponent
-                  label={t('labelParameterLabel', { ns: 'proposalTemplate' })}
-                  helper=""
-                  isRequired={!parameter.value}
-                  value={parameter.label || ''}
-                  onChange={e =>
-                    setFieldValue(
-                      `transactions.${transactionIndex}.parameters.${i}.label`,
-                      e.target.value,
-                    )
-                  }
-                  disabled={transactionPending || !!parameter.value}
-                  testId={`transactions.${transactionIndex}.parameters.${i}.label`}
-                  subLabel={
-                    <HStack>
-                      <Text>{t('helperParameterLabel', { ns: 'proposalTemplate' })}</Text>
-                    </HStack>
-                  }
-                  gridContainerProps={{
-                    display: 'inline-flex',
-                    flexWrap: 'wrap',
-                    width: '30%',
-                  }}
-                  inputContainerProps={{
-                    width: '100%',
-                  }}
-                />
-                <Text>{t('or', { ns: 'common' })}</Text>
+                {!isProposalMode && (
+                  <>
+                    <InputComponent
+                      label={t('labelParameterLabel', { ns: 'proposalTemplate' })}
+                      helper=""
+                      isRequired={!parameter.value}
+                      value={parameter.label || ''}
+                      onChange={e =>
+                        setFieldValue(
+                          `transactions.${transactionIndex}.parameters.${i}.label`,
+                          e.target.value,
+                        )
+                      }
+                      disabled={transactionPending || !!parameter.value}
+                      testId={`transactions.${transactionIndex}.parameters.${i}.label`}
+                      subLabel={
+                        <HStack>
+                          <Text>{t('helperParameterLabel', { ns: 'proposalTemplate' })}</Text>
+                        </HStack>
+                      }
+                      gridContainerProps={{
+                        display: 'inline-flex',
+                        flexWrap: 'wrap',
+                        width: '30%',
+                      }}
+                      inputContainerProps={{
+                        width: '100%',
+                      }}
+                    />
+                    <Text>{t('or', { ns: 'common' })}</Text>
+                  </>
+                )}
                 <InputComponent
                   label={t('labelParameterValue', { ns: 'proposalTemplate' })}
                   helper=""
@@ -214,9 +221,11 @@ export default function ProposalTemplateTransaction({
                     <HStack wordBreak="break-all">
                       <Text>
                         {t('example', { ns: 'common' })}: <ExampleLabel>value</ExampleLabel>
-                        <Text as="span">
-                          {t('proposalTemplateLeaveBlank', { ns: 'proposalTemplate' })}
-                        </Text>
+                        {!isProposalMode && (
+                          <Text as="span">
+                            {t('proposalTemplateLeaveBlank', { ns: 'proposalTemplate' })}
+                          </Text>
+                        )}
                       </Text>
                     </HStack>
                   }
@@ -282,7 +291,9 @@ export default function ProposalTemplateTransaction({
                   <Text>{`${t('example', { ns: 'common' })}:`}</Text>
                   <ExampleLabel>{'1.2'}</ExampleLabel>
                 </HStack>
-                <Text>{t('ethParemeterHelper', { ns: 'proposalTemplate' })}</Text>
+                {!isProposalMode && (
+                  <Text>{t('ethParemeterHelper', { ns: 'proposalTemplate' })}</Text>
+                )}
               </VStack>
             }
             errorMessage={undefined}