#4232 signer modal component

packages/ui/src/app/GlobalModals.tsx

@@ -54,6 +54,7 @@ import { MemberModalCall, MemberProfile } from '@/memberships/components/MemberP
 import { useMyMemberships } from '@/memberships/hooks/useMyMemberships'
 import { BuyMembershipModal, BuyMembershipModalCall } from '@/memberships/modals/BuyMembershipModal'
 import { DisconnectWalletModal, DisconnectWalletModalCall } from '@/memberships/modals/DisconnectWalletModal'
+import { EmailSubscriptionModal, EmailSubscriptionModalCall } from '@/memberships/modals/EmailSubscriptionModal'
 import { InviteMemberModal } from '@/memberships/modals/InviteMemberModal'
 import { InviteMemberModalCall } from '@/memberships/modals/InviteMemberModal/types'
 import { SignOutModal } from '@/memberships/modals/SignOutModal/SignOutModal'
@@ -122,6 +123,7 @@ export type ModalNames =
   | ModalName<ReportContentModalCall>
   | ModalName<PostReplyModalCall>
   | ModalName<InviteMemberModalCall>
+  | ModalName<EmailSubscriptionModalCall>
 
 const modals: Record<ModalNames, ReactElement> = {
   Member: <MemberProfile />,
@@ -171,6 +173,7 @@ const modals: Record<ModalNames, ReactElement> = {
   UpdateMembershipModal: <UpdateMembershipModal />,
   ReportContentModal: <ReportContentModal />,
   PostReplyModal: <PostReplyModal />,
+  EmailSubscriptionModal: <EmailSubscriptionModal />,
 }
 
 const GUEST_ACCESSIBLE_MODALS: ModalNames[] = [

packages/ui/src/memberships/components/CurrentMember/CurrentMember.tsx

@@ -1,21 +1,35 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
 
 import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
 import { ButtonPrimary } from '@/common/components/buttons'
 import { ArrowDownExpandedIcon, Icon } from '@/common/components/icons'
 import { BorderRad, Colors, Transitions } from '@/common/constants'
+import { useLocalStorage } from '@/common/hooks/useLocalStorage'
 import { useModal } from '@/common/hooks/useModal'
 
 import { MemberDarkHover, MemberInfo, MembershipsCount } from '..'
 import { useMyMemberships } from '../../hooks/useMyMemberships'
+import { EmailSubscriptionModalCall } from '../../modals/EmailSubscriptionModal'
 import { SwitchMemberModalCall } from '../../modals/SwitchMemberModal'
 import { AddMembershipButton } from '../AddMembershipButton'
 
 export const CurrentMember = () => {
   const { wallet } = useMyAccounts()
   const { members, hasMembers, active } = useMyMemberships()
   const { showModal } = useModal()
+  const [memberEmail] = useLocalStorage('memberEmail')
+
+  useEffect(() => {
+    const showSubscriptionModal = typeof memberEmail !== 'string' && active
+    if (showSubscriptionModal) {
+      showModal<EmailSubscriptionModalCall>({
+        modal: 'EmailSubscriptionModal',
+        data: { member: active },
+      })
+    }
+  }, [active])
+
   if (!wallet) {
     return (
       <MembershipButtonsWrapper>

packages/ui/src/memberships/modals/EmailSubscriptionModal/EmaiSubscriptionFormModal.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { useForm, FormProvider } from 'react-hook-form'
+import styled from 'styled-components'
+import * as Yup from 'yup'
+
+import { ButtonGhost } from '@/common/components/buttons'
+import { InputComponent, InputText } from '@/common/components/forms'
+import { Info } from '@/common/components/Info'
+import { ModalHeader, ModalTransactionFooter, Row, Modal, ModalBody } from '@/common/components/Modal'
+import { TextMedium } from '@/common/components/typography'
+import { useLocalStorage } from '@/common/hooks/useLocalStorage'
+import { useYupValidationResolver } from '@/common/utils/validation'
+
+import { Member } from '../../types'
+
+import { EmailSubscriptionForm } from './types'
+
+interface Props {
+  onClose: () => void
+  onSubmit: (params: EmailSubscriptionForm) => void
+  member: Member
+}
+
+const EmailSubscriptionSchema = Yup.object().shape({
+  email: Yup.string().email().required('This field is required.'),
+})
+
+export const EmailSubscriptionFormModal = ({ onClose, onSubmit, member }: Props) => {
+  const [, setEmail] = useLocalStorage('memberEmail')
+
+  const form = useForm({
+    resolver: useYupValidationResolver<EmailSubscriptionForm>(EmailSubscriptionSchema),
+    mode: 'onChange',
+  })
+
+  const onCancelClick = () => {
+    setEmail('')
+    onClose()
+  }
+
+  const onSubmitClick = () => {
+    onSubmit({
+      email: form.getValues('email'),
+      id: member.id,
+      name: member.name,
+    })
+  }
+
+  const isValid = !form.getValues('email') || form.getFieldState('email').invalid
+
+  return (
+    <Modal modalSize="m" modalHeight="m" onClose={onCancelClick}>
+      <ModalHeader onClick={onCancelClick} title="Sign up to email notifications" />
+      <ModalBody>
+        <FormProvider {...form}>
+          <Row>
+            <InputComponent
+              id="email"
+              label="Email"
+              required
+              inputSize="l"
+              tooltipText="Add your email address here to receive notifications. It can be the same or different to the one added to the membership profile."
+            >
+              <InputText id="email" placeholder="Add email for notifications here" required name="email" />
+            </InputComponent>
+          </Row>
+        </FormProvider>
+        <Row>
+          <Info title="Your email will never be shared and does not go on chain">
+            <TextMedium light>
+              We use your email only to send you important notifications. You can change this email, opt out from
+              notifications and customize what kind of notifications you receive anytime in settings.
+            </TextMedium>
+          </Info>
+        </Row>
+      </ModalBody>
+      <StyledFooter
+        next={{
+          disabled: isValid,
+          label: 'Sign and Authorize Email',
+          onClick: onSubmitClick,
+        }}
+      >
+        <ButtonGhost size="medium" onClick={onCancelClick}>
+          cancel
+        </ButtonGhost>
+      </StyledFooter>
+    </Modal>
+  )
+}
+
+const StyledFooter = styled(ModalTransactionFooter)`
+  grid-column-gap: 20px;
+`

packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { useApi } from '@/api/hooks/useApi'
+import { TextMedium } from '@/common/components/typography'
+import { useMachine } from '@/common/hooks/useMachine'
+import { useModal } from '@/common/hooks/useModal'
+import { SignTransactionModal } from '@/common/modals/SignTransactionModal/SignTransactionModal'
+import { EmailSubscriptionModalCall } from '@/memberships/modals/EmailSubscriptionModal/index'
+
+import { EmailSubscriptionFormModal } from './EmaiSubscriptionFormModal'
+import { EmailSubscriptionMachine } from './machine'
+import { EmailSubscriptionForm } from './types'
+import { createBatch } from './utils'
+
+export const EmailSubscriptionModal = () => {
+  const { api } = useApi()
+  const {
+    hideModal,
+    modalData: { member },
+  } = useModal<EmailSubscriptionModalCall>()
+  const [state, send] = useMachine(EmailSubscriptionMachine)
+
+  if (state.matches('prepare')) {
+    return (
+      <EmailSubscriptionFormModal
+        onClose={hideModal}
+        onSubmit={(params: EmailSubscriptionForm) => send('DONE', { form: params })}
+        member={member}
+      />
+    )
+  }
+
+  if (state.matches('transaction')) {
+    return (
+      <SignTransactionModal
+        buttonText="Sign and subscribe"
+        transaction={createBatch(state.context.form, api)}
+        signer={member.controllerAccount}
+        service={state.children.transaction}
+      >
+        <TextMedium>You subscribed to emal.</TextMedium>
+      </SignTransactionModal>
+    )
+  }
+
+  return null
+}

packages/ui/src/memberships/modals/EmailSubscriptionModal/index.tsx

@@ -0,0 +1,11 @@
+import { ModalWithDataCall } from '@/common/providers/modal/types'
+import { Member } from '@/memberships/types'
+
+export * from './EmailSubscriptionModal'
+
+export type EmailSubscriptionModalCall = ModalWithDataCall<
+  'EmailSubscriptionModal',
+  {
+    member: Member
+  }
+>

packages/ui/src/memberships/modals/EmailSubscriptionModal/machine.ts

@@ -0,0 +1,75 @@
+import { EventRecord } from '@polkadot/types/interfaces/system'
+import { assign, createMachine } from 'xstate'
+
+import { transactionModalFinalStatusesFactory } from '@/common/modals/utils'
+import {
+  isTransactionCanceled,
+  isTransactionError,
+  isTransactionSuccess,
+  transactionMachine,
+} from '@/common/model/machines'
+import { EmptyObject } from '@/common/types'
+
+import { EmailSubscriptionForm } from './types'
+
+interface EmailSubscriptionContext {
+  form?: EmailSubscriptionForm
+}
+
+interface TransactionContext {
+  transactionEvents?: EventRecord[]
+}
+
+type Context = EmailSubscriptionContext & TransactionContext
+
+type EmailSubscriptionState =
+  | { value: 'prepare'; context: EmptyObject }
+  | { value: 'transaction'; context: Required<EmailSubscriptionContext> }
+  | { value: 'success'; context: Required<EmailSubscriptionContext> }
+  | { value: 'error'; context: Required<Context> }
+
+export type EmailSubscriptionEvent =
+  | { type: 'PASS' }
+  | { type: 'FAIL' }
+  | { type: 'DONE'; form: EmailSubscriptionForm }
+  | { type: 'SUCCESS' }
+  | { type: 'ERROR' }
+
+export const EmailSubscriptionMachine = createMachine<Context, EmailSubscriptionEvent, EmailSubscriptionState>({
+  initial: 'prepare',
+  states: {
+    prepare: {
+      on: {
+        DONE: {
+          target: 'transaction',
+          actions: assign({ form: (_, event) => event.form }),
+        },
+      },
+    },
+    transaction: {
+      invoke: {
+        id: 'transaction',
+        src: transactionMachine,
+        onDone: [
+          {
+            target: 'success',
+            cond: isTransactionSuccess,
+          },
+          {
+            target: 'error',
+            cond: isTransactionError,
+          },
+          {
+            target: 'canceled',
+            cond: isTransactionCanceled,
+          },
+        ],
+      },
+    },
+    ...transactionModalFinalStatusesFactory({
+      metaMessages: {
+        error: 'There was a problem email subscription.',
+      },
+    }),
+  },
+})

packages/ui/src/memberships/modals/EmailSubscriptionModal/types.ts

@@ -0,0 +1,5 @@
+export interface EmailSubscriptionForm {
+  id: string
+  name?: string
+  email: string
+}

packages/ui/src/memberships/modals/EmailSubscriptionModal/utils.ts

@@ -0,0 +1,20 @@
+import { SubmittableExtrinsic } from '@polkadot/api/types'
+
+import { Api } from '@/api'
+
+import { EmailSubscriptionForm } from './types'
+
+export function createBatch(transactionParams: EmailSubscriptionForm, api: Api | undefined) {
+  const transactions: SubmittableExtrinsic<'rxjs'>[] = []
+
+  if (!api || !transactionParams.email) {
+    return
+  }
+
+  if (transactionParams.email) {
+    // const emailSubscription = api.tx.members.emailSubscription(transactionParams)
+    // transactions.push(emailSubscription)
+  }
+
+  return api.tx.utility.batch(transactions)
+}

packages/ui/src/memberships/types/Member.ts

@@ -30,6 +30,7 @@ export interface Member {
   isCouncilMember: boolean
   createdAt: string
   boundAccountsEvents?: BoundAccountEvent[]
+  email?: string
 }
 
 export type GenesisEntry = {