Handle summary and banner step for announce candidacy

Joystream · Oct 7, 2021 · 608c9c3 · 608c9c3
1 parent ef2b0dd
commit 608c9c3
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 7 deletions.
diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/AnnounceCandidacyModal.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/AnnounceCandidacyModal.tsx
@@ -19,6 +19,7 @@ import { useCouncilConstants } from '@/council/hooks/useCouncilConstants'
 import { AnnounceCandidacyConstantsWrapper } from '@/council/modals/AnnounceCandidacy/components/AnnounceCandidacyConstantsWrapper'
 import { RewardAccountStep } from '@/council/modals/AnnounceCandidacy/components/RewardAccountStep'
 import { StakingStep } from '@/council/modals/AnnounceCandidacy/components/StakingStep'
+import { SummaryAndBannerStep } from '@/council/modals/AnnounceCandidacy/components/SummaryAndBannerStep'
 import { TitleAndBulletPointsStep } from '@/council/modals/AnnounceCandidacy/components/TitleAndBulletPointsStep'
 import { announceCandidacyMachine } from '@/council/modals/AnnounceCandidacy/machine'
 import { useMyMemberships } from '@/memberships/hooks/useMyMemberships'
@@ -81,6 +82,8 @@ export const AnnounceCandidacyModal = () => {
       state.context.bulletPoints.length
     ) {
       setValidNext(true)
+    } else if (state.matches('candidateProfile.summaryAndBanner') && state.context.summary) {
+      setValidNext(true)
     } else {
       setValidNext(false)
     }
@@ -147,6 +150,14 @@ export const AnnounceCandidacyModal = () => {
                 setBulletPoints={(bulletPoints) => send('SET_BULLET_POINTS', { bulletPoints })}
               />
             )}
+            {state.matches('candidateProfile.summaryAndBanner') && (
+              <SummaryAndBannerStep
+                summary={state.context.summary}
+                setSummary={(summary) => send('SET_SUMMARY', { summary })}
+                banner={state.context.banner}
+                setBanner={(banner) => send('SET_BANNER', { banner })}
+              />
+            )}
           </StepperBody>
         </StepperProposalWrapper>
       </StepperModalBody>

diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/components/SummaryAndBannerStep.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/components/SummaryAndBannerStep.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { CKEditor } from '@/common/components/CKEditor'
+import { InputComponent, InputText } from '@/common/components/forms'
+import { Row } from '@/common/components/Modal'
+import { RowGapBlock } from '@/common/components/page/PageContent'
+
+interface SummaryAndBannerStepProps {
+  summary?: string
+  banner?: string
+  setSummary: (summary?: string) => void
+  setBanner: (banner?: string) => void
+}
+
+export const SummaryAndBannerStep = ({ summary, banner, setSummary, setBanner }: SummaryAndBannerStepProps) => {
+  return (
+    <RowGapBlock gap={24}>
+      <Row>
+        <RowGapBlock gap={8}>
+          <h4>Candidate profile</h4>
+        </RowGapBlock>
+      </Row>
+      <Row>
+        <RowGapBlock gap={20}>
+          <InputComponent label="Summary" required inputSize="auto" id="field-summary">
+            <CKEditor
+              id="field-summary"
+              onChange={(event, editor) => setSummary(editor.getData())}
+              onReady={(editor) => editor.setData(summary || '')}
+            />
+          </InputComponent>
+          <InputComponent label="Banner" disabled inputSize="s">
+            <InputText
+              disabled
+              placeholder="Image URL"
+              value={banner}
+              onChange={(event) => setBanner(event.target.value)}
+            />
+          </InputComponent>
+        </RowGapBlock>
+      </Row>
+    </RowGapBlock>
+  )
+}
diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/components/TitleAndBulletPointsStep.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/components/TitleAndBulletPointsStep.tsx
@@ -41,7 +41,7 @@ export const TitleAndBulletPointsStep = ({
   setBulletPoints,
 }: TitleAndBulletPointsStepProps) => {
   const formInitializer: FormFields = {
-    title,
+    title: title || '',
     bulletPoint1: bulletPoints[0] || '',
     bulletPoint2: bulletPoints[1] || '',
     bulletPoint3: bulletPoints[2] || '',

diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/machine.ts b/packages/ui/src/council/modals/AnnounceCandidacy/machine.ts
@@ -18,7 +18,14 @@ interface TitleAndBulletPointsContext extends Required<RewardAccountContext> {
   bulletPoints: string[]
 }
 
-export type AnnounceCandidacyContext = Partial<StakingContext & RewardAccountContext & TitleAndBulletPointsContext>
+interface SummaryAndBannerContext extends Required<TitleAndBulletPointsContext> {
+  summary?: string
+  banner?: string
+}
+
+export type AnnounceCandidacyContext = Partial<
+  StakingContext & RewardAccountContext & TitleAndBulletPointsContext & SummaryAndBannerContext
+>
 
 export type AnnounceCandidacyState =
   | { value: 'requirementsVerification'; context: EmptyObject }
@@ -29,15 +36,17 @@ export type AnnounceCandidacyState =
   | { value: 'rewardAccount'; context: Required<RewardAccountContext> }
   | { value: 'candidateProfile'; context: Required<RewardAccountContext> }
   | { value: 'candidateProfile.titleAndBulletPoints'; context: Required<TitleAndBulletPointsContext> }
-  | { value: 'candidateProfile.summaryAndBanner'; context: Required<TitleAndBulletPointsContext> }
-  | { value: 'candidateProfile.finishCandidateProfile'; context: Required<TitleAndBulletPointsContext> }
-  | { value: 'success'; context: Required<TitleAndBulletPointsContext> }
+  | { value: 'candidateProfile.summaryAndBanner'; context: Required<SummaryAndBannerContext> }
+  | { value: 'candidateProfile.finishCandidateProfile'; context: Required<SummaryAndBannerContext> }
+  | { value: 'success'; context: Required<SummaryAndBannerContext> }
   | { value: 'error'; context: AnnounceCandidacyContext }
 
 type SetAccountEvent = { type: 'SET_ACCOUNT'; account: Account }
 type SetAmountEvent = { type: 'SET_AMOUNT'; amount: BN }
 type SetTitleEvent = { type: 'SET_TITLE'; title: string }
 type SetBulletPointsEvent = { type: 'SET_BULLET_POINTS'; bulletPoints: string[] }
+type SetSummaryEvent = { type: 'SET_SUMMARY'; summary: string }
+type SetBannerEvent = { type: 'SET_BANNER'; banner: string }
 
 type AnnounceCandidacyEvent =
   | { type: 'FAIL' }
@@ -47,6 +56,8 @@ type AnnounceCandidacyEvent =
   | SetAmountEvent
   | SetTitleEvent
   | SetBulletPointsEvent
+  | SetSummaryEvent
+  | SetBannerEvent
 
 export const announceCandidacyMachine = createMachine<
   AnnounceCandidacyContext,
@@ -55,7 +66,6 @@ export const announceCandidacyMachine = createMachine<
 >({
   initial: 'requirementsVerification',
   context: {
-    title: '',
     bulletPoints: [],
   },
   states: {
@@ -139,6 +149,16 @@ export const announceCandidacyMachine = createMachine<
             NEXT: {
               target: 'finishCandidateProfile',
             },
+            SET_SUMMARY: {
+              actions: assign({
+                summary: (context, event) => event.summary,
+              }),
+            },
+            SET_BANNER: {
+              actions: assign({
+                banner: (context, event) => event.banner,
+              }),
+            },
           },
         },
         finishCandidateProfile: {

diff --git a/packages/ui/test/council/modals/AnnounceCandidacyModal.test.tsx b/packages/ui/test/council/modals/AnnounceCandidacyModal.test.tsx
@@ -7,6 +7,7 @@ import { interpret } from 'xstate'
 
 import { AccountsContext } from '@/accounts/providers/accounts/context'
 import { UseAccounts } from '@/accounts/providers/accounts/provider'
+import { CKEditorProps } from '@/common/components/CKEditor'
 import { BalancesContextProvider } from '@/accounts/providers/balances/provider'
 import { getSteps } from '@/common/model/machines/getSteps'
 import { ApiContext } from '@/common/providers/api/context'
@@ -21,6 +22,7 @@ import { seedMembers } from '@/mocks/data'
 import { getButton } from '../../_helpers/getButton'
 import { includesTextWithMarkup } from '../../_helpers/includesTextWithMarkup'
 import { selectFromDropdown } from '../../_helpers/selectFromDropdown'
+import { mockCKEditor } from '../../_mocks/components/CKEditor'
 import { alice, bob } from '../../_mocks/keyring'
 import { getMember } from '../../_mocks/members'
 import { MockKeyringProvider, MockQueryNodeProviders } from '../../_mocks/providers'
@@ -35,6 +37,10 @@ import {
 
 configure({ testIdAttribute: 'id' })
 
+jest.mock('@/common/components/CKEditor', () => ({
+  CKEditor: (props: CKEditorProps) => mockCKEditor(props),
+}))
+
 describe('UI: Announce Candidacy Modal', () => {
   const api = stubApi()
   const useModal: UseModal<any> = {
@@ -233,6 +239,25 @@ describe('UI: Announce Candidacy Modal', () => {
     })
   })
 
+  describe('Summary and Banner', () => {
+    beforeEach(async () => {
+      renderModal()
+      await fillStakingStep('alice', 15, true)
+      await fillRewardAccountStep('alice', true)
+      await fillTitleAndBulletPointsStep('Some title', 'Some bullet point', true)
+    })
+
+    it('Default', async () => {
+      expect(await getNextStepButton()).toBeDisabled()
+    })
+
+    it('Summary filled', async () => {
+      await fillSummary()
+
+      expect(await getNextStepButton()).not.toBeDisabled()
+    })
+  })
+
   async function fillStakingAmount(value: number) {
     const amountInput = await screen.getByTestId('stakingAmount')
 
@@ -286,8 +311,20 @@ describe('UI: Announce Candidacy Modal', () => {
     }
   }
 
+  async function fillSummary(goNext?: boolean) {
+    const summaryInput = await screen.findByLabelText(/Summary/i)
+
+    act(() => {
+      fireEvent.change(summaryInput, { target: { value: 'Some summary' } })
+    })
+
+    if (goNext) {
+      await clickNextButton()
+    }
+  }
+
   async function getNextStepButton() {
-    return getButton(/Next step/i)
+    return getButton(/(Next step|Announce candidacy)/i)
   }
 
   async function clickNextButton() {