From 902dfdb06f4f9496e8add9c86888155a32aff790 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Fri, 30 Dec 2022 16:15:35 +0100 Subject: [PATCH 01/11] added Stages section --- .../Stages/StageItem/StageItem.css | 51 ++++++ .../Stages/StageItem/StageItem.css.d.ts | 8 + .../Stages/StageItem/StageItem.tsx | 42 +++++ .../Stages/StageItem/index.ts | 1 + .../DAOIncorporation/Stages/Stages.css | 104 ++++++++++++ .../DAOIncorporation/Stages/Stages.css.d.ts | 10 ++ .../DAOIncorporation/Stages/Stages.tsx | 152 ++++++++++++++++++ .../Stages/StagesButton/StagesButton.css | 14 ++ .../Stages/StagesButton/StagesButton.css.d.ts | 3 + .../Stages/StagesButton/StagesButton.tsx | 85 ++++++++++ .../Stages/StagesButton/index.ts | 1 + .../DAOIncorporation/Stages/index.ts | 1 + .../components/IncorporationPage/constants.ts | 1 + 13 files changed, 473 insertions(+) create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts create mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/index.ts diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css new file mode 100644 index 0000000000..3bbfbd6273 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css @@ -0,0 +1,51 @@ +.container { + display: flex; + align-items: baseline; + padding: 9px 0; + position: relative; +} + +.dot { + margin-right: 14px; + height: 7px; + width: 7px; + min-width: 7px; + border: 1px solid var(--temp-grey-blue-7); + border-radius: 50%; +} + +.verticalLine { + height: 60%; + position: absolute; + bottom: -7px; + left: 3px; + border-left: 1px solid var(--temp-grey-6); +} + +.activeDot { + border: 1px solid var(--primary); + background-color: var(--primary); +} + +.label { + margin-bottom: 8px; + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + color: var(--dark); + letter-spacing: var(--spacing-medium); +} + +.activeLabel { + color: var(--temp-grey-blue-7); +} + +.description { + font-size: var(--size-tiny); + font-weight: var(--weight-bold); + color: var(--temp-grey-blue-7); + letter-spacing: var(--spacing-medium); +} + +.completedLabel { + color: var(--temp-grey-blue-7); +} diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts new file mode 100644 index 0000000000..76c5a5b024 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts @@ -0,0 +1,8 @@ +export const container: string; +export const dot: string; +export const verticalLine: string; +export const activeDot: string; +export const label: string; +export const activeLabel: string; +export const description: string; +export const completedLabel: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx new file mode 100644 index 0000000000..cf9ad5e928 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { FormattedMessage, MessageDescriptor } from 'react-intl'; +import classNames from 'classnames'; + +import styles from './StageItem.css'; + +interface Props { + title?: MessageDescriptor; + description?: MessageDescriptor; + isActive: boolean; + isLast?: boolean; +} +const displayName = 'dashboard.ExpenditurePage.Stages.StageItem'; + +const StageItem = ({ title, description, isActive, isLast }: Props) => { + return ( +
+
+ {!isLast &&
} +
+
+ +
+
+ +
+
+
+ ); +}; + +StageItem.displayName = displayName; + +export default StageItem; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts new file mode 100644 index 0000000000..234df6a6cb --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts @@ -0,0 +1 @@ +export { default } from './StageItem'; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css new file mode 100644 index 0000000000..cb87d68bb6 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css @@ -0,0 +1,104 @@ +@value iconColor: var(--temp-grey-blue-7); + +.mainContainer { + padding-top: 20px; + max-width: 340px; +} + +.stagesText { + display: flex; + align-items: center; + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + line-height: 18px; + color: var(--temp-grey-blue-7); +} + +.statusContainer { + display: flex; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid var(--temp-grey-6); +} + +.statusContainer:first-child { + padding-top: 0; +} + +.icon svg { + height: 18px; + width: 18px; + fill: var(--temp-grey-blue-7); +} + +.buttonsContainer { + display: flex; + align-items: center; +} + +.buttonsContainer button:not(:last-of-type) { + margin-right: 30px; +} + +.buttonsContainer button { + &:disabled { + height: 20px; + border: none; + border-radius: 5px; + background-color: var(--colony-light-blue); + font-weight: var(--weight-bold); + color: var(--temp-grey-blue-7); + } + + &:disabled:hover { + background-color: var(--colony-light-blue); + color: var(--temp-grey-blue-7); + cursor: default; + } +} + +.iconButton { + margin-left: 0; + padding: 0; + border: none; + background-color: transparent; +} + +.iconButton i { + display: flex; +} + +.iconButton:hover { + cursor: pointer; +} + +.iconButtonDisabled { + opacity: 0.5; +} + +.iconWrapper { + position: relative; +} + +.iconWrapper:hover { + &::after { + height: 30px; + width: 30px; + position: absolute; + top: 0; + left: 0; + border-radius: 50%; + background-color: var(--action-secondary); + transform: translate(-6px, -6px); + content: ''; + opacity: 0.1; + } +} + +.iconButtonDisabled:hover { + cursor: not-allowed; +} + +.buttonTooltip { + max-width: 192px; +} diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts new file mode 100644 index 0000000000..1c668b5f59 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts @@ -0,0 +1,10 @@ +export const iconColor: string; +export const mainContainer: string; +export const stagesText: string; +export const statusContainer: string; +export const icon: string; +export const buttonsContainer: string; +export const iconButton: string; +export const iconButtonDisabled: string; +export const iconWrapper: string; +export const buttonTooltip: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx new file mode 100644 index 0000000000..d07cff6cf7 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx @@ -0,0 +1,152 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; +import copyToClipboard from 'copy-to-clipboard'; +import classNames from 'classnames'; + +import Button from '~core/Button'; +import Icon from '~core/Icon'; +import { Tooltip } from '~core/Popover'; + +import StageItem from './StageItem'; +import StagesButton from './StagesButton'; +import styles from './Stages.css'; +import { StageObject } from '~pages/IncorporationPage/types'; +import { Stages as StagesEnum } from '~pages/IncorporationPage/constants'; + +const MSG = defineMessages({ + stages: { + id: 'dashboard.DAOIncorporation.Stages.stages', + defaultMessage: 'Stages', + }, + deleteDraft: { + id: 'dashboard.DAOIncorporation.Stages.deleteDraft', + defaultMessage: 'Delete draft', + }, + tooltipDeleteText: { + id: 'dashboard.DAOIncorporation.Stages.tooltipDeleteText', + defaultMessage: 'Delete', + }, + tooltipShareText: { + id: 'dashboard.DAOIncorporation.Stages.tooltipShareText', + defaultMessage: 'Share URL', + }, +}); + +const displayName = 'dashboard.DAOIncorporation.Stages'; + +export interface Props { + stages: StageObject[]; + activeStageId: StagesEnum; + buttonDisabled?: boolean; + buttonAction?: VoidFunction; +} + +const Stages = ({ + stages, + activeStageId, + buttonDisabled, + buttonAction, +}: Props) => { + const [valueIsCopied, setValueIsCopied] = useState(false); + const userFeedbackTimer = useRef(null); + + const handleClipboardCopy = () => { + copyToClipboard(window.location.href); + setValueIsCopied(true); + userFeedbackTimer.current = setTimeout(() => setValueIsCopied(false), 2000); + }; + + useEffect(() => () => clearTimeout(userFeedbackTimer.current), [ + userFeedbackTimer, + ]); + + const activeIndex = stages.findIndex((stage) => stage.id === activeStageId); + const activeStage = stages.find((stage) => stage.id === activeStageId); + + return ( +
+
+
+ +
+
+ <> + + + + +
+
+ {stages.map(({ id, title, description }, index) => ( + + ))} +
+ ); +}; + +Stages.displayName = displayName; + +export default Stages; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css new file mode 100644 index 0000000000..5f73f896d7 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css @@ -0,0 +1,14 @@ +.button { + composes: themePrimary main from '~core/Button/Button.css'; + padding: 0; + height: 29px; + width: 100px; +} + +.buttonTooltip { + max-width: 192px; +} + +.buttonWithTooltip { + margin-left: 20px; +} diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts new file mode 100644 index 0000000000..5941522346 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts @@ -0,0 +1,3 @@ +export const button: string; +export const buttonTooltip: string; +export const buttonWithTooltip: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx new file mode 100644 index 0000000000..0cc9e5c55e --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { useIntl } from 'react-intl'; + +import Button from '~core/Button'; +import { Tooltip } from '~core/Popover'; +import { Stages } from '~pages/IncorporationPage/constants'; +import { StageObject } from '~pages/IncorporationPage/types'; + +import styles from './StagesButton.css'; + +const displayName = 'dashboard.ExpenditurePage.Stages.StagesButton'; + +interface Props { + activeStage?: StageObject; + buttonDisabled?: boolean; + buttonAction?: VoidFunction; +} + +const StagesButton = ({ activeStage, buttonDisabled, buttonAction }: Props) => { + const { formatMessage } = useIntl(); + const buttonText = + typeof activeStage?.buttonText === 'string' + ? activeStage.buttonText + : activeStage?.buttonText && formatMessage(activeStage.buttonText); + + if (!activeStage) return null; + + if ( + activeStage.id === Stages.Processing || + activeStage.id === Stages.Complete + ) { + return null; + } + + if (activeStage?.buttonTooltip) { + return ( + + + {typeof activeStage.buttonTooltip === 'string' + ? activeStage.buttonTooltip + : formatMessage(activeStage.buttonTooltip)} +
+ } + popperOptions={{ + modifiers: [ + { + name: 'offset', + options: { + offset: [0, 8], + }, + }, + ], + }} + > + + + + ); + } + + return ( + + ); +}; + +StagesButton.displayName = displayName; + +export default StagesButton; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts new file mode 100644 index 0000000000..4085c13edd --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts @@ -0,0 +1 @@ +export { default } from './StagesButton'; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts new file mode 100644 index 0000000000..11bb6dccd3 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts @@ -0,0 +1 @@ +export { default } from './Stages'; diff --git a/src/modules/pages/components/IncorporationPage/constants.ts b/src/modules/pages/components/IncorporationPage/constants.ts index 311d840016..ddaae0e2e3 100644 --- a/src/modules/pages/components/IncorporationPage/constants.ts +++ b/src/modules/pages/components/IncorporationPage/constants.ts @@ -144,6 +144,7 @@ export const stages: StageObject[] = [ title: MSG.create, description: MSG.createDesc, buttonText: MSG.createButtonText, + buttonTooltip: MSG.createTooltip, }, { id: Stages.Created, From 00ce1fb345203c515dff39eca3e5467d0b5ca4a4 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Mon, 2 Jan 2023 14:15:19 +0100 Subject: [PATCH 02/11] added validation --- .../Stages/StageItem/StageItem.css | 51 ------ .../Stages/StageItem/StageItem.css.d.ts | 8 - .../Stages/StageItem/StageItem.tsx | 42 ----- .../Stages/StageItem/index.ts | 1 - .../DAOIncorporation/Stages/Stages.css | 104 ------------ .../DAOIncorporation/Stages/Stages.css.d.ts | 10 -- .../DAOIncorporation/Stages/Stages.tsx | 152 ------------------ .../Stages/StagesButton/StagesButton.css | 14 -- .../Stages/StagesButton/StagesButton.css.d.ts | 3 - .../Stages/StagesButton/StagesButton.tsx | 85 ---------- .../Stages/StagesButton/index.ts | 1 - .../DAOIncorporation/Stages/index.ts | 1 - .../Incorporation/Stages/FormStages.tsx | 108 +++++++++++++ .../components/IncorporationPage/constants.ts | 1 - 14 files changed, 108 insertions(+), 473 deletions(-) delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts delete mode 100644 src/modules/dashboard/components/DAOIncorporation/Stages/index.ts create mode 100644 src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css deleted file mode 100644 index 3bbfbd6273..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css +++ /dev/null @@ -1,51 +0,0 @@ -.container { - display: flex; - align-items: baseline; - padding: 9px 0; - position: relative; -} - -.dot { - margin-right: 14px; - height: 7px; - width: 7px; - min-width: 7px; - border: 1px solid var(--temp-grey-blue-7); - border-radius: 50%; -} - -.verticalLine { - height: 60%; - position: absolute; - bottom: -7px; - left: 3px; - border-left: 1px solid var(--temp-grey-6); -} - -.activeDot { - border: 1px solid var(--primary); - background-color: var(--primary); -} - -.label { - margin-bottom: 8px; - font-size: var(--size-smallish); - font-weight: var(--weight-bold); - color: var(--dark); - letter-spacing: var(--spacing-medium); -} - -.activeLabel { - color: var(--temp-grey-blue-7); -} - -.description { - font-size: var(--size-tiny); - font-weight: var(--weight-bold); - color: var(--temp-grey-blue-7); - letter-spacing: var(--spacing-medium); -} - -.completedLabel { - color: var(--temp-grey-blue-7); -} diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts deleted file mode 100644 index 76c5a5b024..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.css.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const container: string; -export const dot: string; -export const verticalLine: string; -export const activeDot: string; -export const label: string; -export const activeLabel: string; -export const description: string; -export const completedLabel: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx deleted file mode 100644 index cf9ad5e928..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/StageItem.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { FormattedMessage, MessageDescriptor } from 'react-intl'; -import classNames from 'classnames'; - -import styles from './StageItem.css'; - -interface Props { - title?: MessageDescriptor; - description?: MessageDescriptor; - isActive: boolean; - isLast?: boolean; -} -const displayName = 'dashboard.ExpenditurePage.Stages.StageItem'; - -const StageItem = ({ title, description, isActive, isLast }: Props) => { - return ( -
-
- {!isLast &&
} -
-
- -
-
- -
-
-
- ); -}; - -StageItem.displayName = displayName; - -export default StageItem; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts deleted file mode 100644 index 234df6a6cb..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/StageItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './StageItem'; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css deleted file mode 100644 index cb87d68bb6..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css +++ /dev/null @@ -1,104 +0,0 @@ -@value iconColor: var(--temp-grey-blue-7); - -.mainContainer { - padding-top: 20px; - max-width: 340px; -} - -.stagesText { - display: flex; - align-items: center; - font-size: var(--size-smallish); - font-weight: var(--weight-bold); - line-height: 18px; - color: var(--temp-grey-blue-7); -} - -.statusContainer { - display: flex; - justify-content: space-between; - padding: 10px 0; - border-bottom: 1px solid var(--temp-grey-6); -} - -.statusContainer:first-child { - padding-top: 0; -} - -.icon svg { - height: 18px; - width: 18px; - fill: var(--temp-grey-blue-7); -} - -.buttonsContainer { - display: flex; - align-items: center; -} - -.buttonsContainer button:not(:last-of-type) { - margin-right: 30px; -} - -.buttonsContainer button { - &:disabled { - height: 20px; - border: none; - border-radius: 5px; - background-color: var(--colony-light-blue); - font-weight: var(--weight-bold); - color: var(--temp-grey-blue-7); - } - - &:disabled:hover { - background-color: var(--colony-light-blue); - color: var(--temp-grey-blue-7); - cursor: default; - } -} - -.iconButton { - margin-left: 0; - padding: 0; - border: none; - background-color: transparent; -} - -.iconButton i { - display: flex; -} - -.iconButton:hover { - cursor: pointer; -} - -.iconButtonDisabled { - opacity: 0.5; -} - -.iconWrapper { - position: relative; -} - -.iconWrapper:hover { - &::after { - height: 30px; - width: 30px; - position: absolute; - top: 0; - left: 0; - border-radius: 50%; - background-color: var(--action-secondary); - transform: translate(-6px, -6px); - content: ''; - opacity: 0.1; - } -} - -.iconButtonDisabled:hover { - cursor: not-allowed; -} - -.buttonTooltip { - max-width: 192px; -} diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts deleted file mode 100644 index 1c668b5f59..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.css.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const iconColor: string; -export const mainContainer: string; -export const stagesText: string; -export const statusContainer: string; -export const icon: string; -export const buttonsContainer: string; -export const iconButton: string; -export const iconButtonDisabled: string; -export const iconWrapper: string; -export const buttonTooltip: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx deleted file mode 100644 index d07cff6cf7..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/Stages.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { defineMessages, FormattedMessage } from 'react-intl'; -import copyToClipboard from 'copy-to-clipboard'; -import classNames from 'classnames'; - -import Button from '~core/Button'; -import Icon from '~core/Icon'; -import { Tooltip } from '~core/Popover'; - -import StageItem from './StageItem'; -import StagesButton from './StagesButton'; -import styles from './Stages.css'; -import { StageObject } from '~pages/IncorporationPage/types'; -import { Stages as StagesEnum } from '~pages/IncorporationPage/constants'; - -const MSG = defineMessages({ - stages: { - id: 'dashboard.DAOIncorporation.Stages.stages', - defaultMessage: 'Stages', - }, - deleteDraft: { - id: 'dashboard.DAOIncorporation.Stages.deleteDraft', - defaultMessage: 'Delete draft', - }, - tooltipDeleteText: { - id: 'dashboard.DAOIncorporation.Stages.tooltipDeleteText', - defaultMessage: 'Delete', - }, - tooltipShareText: { - id: 'dashboard.DAOIncorporation.Stages.tooltipShareText', - defaultMessage: 'Share URL', - }, -}); - -const displayName = 'dashboard.DAOIncorporation.Stages'; - -export interface Props { - stages: StageObject[]; - activeStageId: StagesEnum; - buttonDisabled?: boolean; - buttonAction?: VoidFunction; -} - -const Stages = ({ - stages, - activeStageId, - buttonDisabled, - buttonAction, -}: Props) => { - const [valueIsCopied, setValueIsCopied] = useState(false); - const userFeedbackTimer = useRef(null); - - const handleClipboardCopy = () => { - copyToClipboard(window.location.href); - setValueIsCopied(true); - userFeedbackTimer.current = setTimeout(() => setValueIsCopied(false), 2000); - }; - - useEffect(() => () => clearTimeout(userFeedbackTimer.current), [ - userFeedbackTimer, - ]); - - const activeIndex = stages.findIndex((stage) => stage.id === activeStageId); - const activeStage = stages.find((stage) => stage.id === activeStageId); - - return ( -
-
-
- -
-
- <> - - - - -
-
- {stages.map(({ id, title, description }, index) => ( - - ))} -
- ); -}; - -Stages.displayName = displayName; - -export default Stages; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css deleted file mode 100644 index 5f73f896d7..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css +++ /dev/null @@ -1,14 +0,0 @@ -.button { - composes: themePrimary main from '~core/Button/Button.css'; - padding: 0; - height: 29px; - width: 100px; -} - -.buttonTooltip { - max-width: 192px; -} - -.buttonWithTooltip { - margin-left: 20px; -} diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts deleted file mode 100644 index 5941522346..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.css.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const button: string; -export const buttonTooltip: string; -export const buttonWithTooltip: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx deleted file mode 100644 index 0cc9e5c55e..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/StagesButton.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import { useIntl } from 'react-intl'; - -import Button from '~core/Button'; -import { Tooltip } from '~core/Popover'; -import { Stages } from '~pages/IncorporationPage/constants'; -import { StageObject } from '~pages/IncorporationPage/types'; - -import styles from './StagesButton.css'; - -const displayName = 'dashboard.ExpenditurePage.Stages.StagesButton'; - -interface Props { - activeStage?: StageObject; - buttonDisabled?: boolean; - buttonAction?: VoidFunction; -} - -const StagesButton = ({ activeStage, buttonDisabled, buttonAction }: Props) => { - const { formatMessage } = useIntl(); - const buttonText = - typeof activeStage?.buttonText === 'string' - ? activeStage.buttonText - : activeStage?.buttonText && formatMessage(activeStage.buttonText); - - if (!activeStage) return null; - - if ( - activeStage.id === Stages.Processing || - activeStage.id === Stages.Complete - ) { - return null; - } - - if (activeStage?.buttonTooltip) { - return ( - - - {typeof activeStage.buttonTooltip === 'string' - ? activeStage.buttonTooltip - : formatMessage(activeStage.buttonTooltip)} -
- } - popperOptions={{ - modifiers: [ - { - name: 'offset', - options: { - offset: [0, 8], - }, - }, - ], - }} - > - - - - ); - } - - return ( - - ); -}; - -StagesButton.displayName = displayName; - -export default StagesButton; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts deleted file mode 100644 index 4085c13edd..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/StagesButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './StagesButton'; diff --git a/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts b/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts deleted file mode 100644 index 11bb6dccd3..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/Stages/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Stages'; diff --git a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx new file mode 100644 index 0000000000..7abb9c16fd --- /dev/null +++ b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx @@ -0,0 +1,108 @@ +import { useFormikContext, setNestedObjectValues, FormikTouched } from 'formik'; +import React, { useCallback, useMemo } from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import { flattenObject } from '~dashboard/ExpenditurePage/Stages/utils'; +import { FIX_TRIGGER_EVENT_NAME } from '~pages/ExpenditurePage/constants'; +import { StageObject, ValuesType } from '~pages/IncorporationPage/types'; +import { Stages as StagesEnum } from '~pages/IncorporationPage/constants'; + +import Stages from './Stages'; +import styles from './Stages.css'; + +const displayName = 'dashboard.Incorporation.Stages.FormStages'; + +const MSG = defineMessages({ + singleErrorMessage: { + id: 'dashboard.Incorporation.Stages.FormStages.singleErrorMessage', + defaultMessage: '{number} required field has an error.', + }, + mulitpleErrorMessage: { + id: 'dashboard.Incorporation.Stages.FormStages.mulitpleErrorMessage', + defaultMessage: '{number} required fields have an error.', + }, + errorMessageAction: { + id: 'dashboard.Incorporation.Stages.FormStages.errorMessageAction', + defaultMessage: 'Fix it!', + }, +}); + +export interface Props { + stages: StageObject[]; + activeStageId: StagesEnum; +} + +const FormStages = ({ stages, activeStageId }: Props) => { + const { values, handleSubmit, validateForm, setTouched, errors: formikErr } = + useFormikContext() || {}; + + const formikErrors = useMemo(() => { + const errorsFlat = flattenObject(formikErr); + return Object.keys(errorsFlat); + }, [formikErr]); + + const handleSaveDraft = useCallback(async () => { + const errors = await validateForm(values); + const errorsLength = Object.keys(errors)?.length; + setTouched(setNestedObjectValues>(errors, true)); + + return !errorsLength && handleSubmit(values as any); + }, [handleSubmit, setTouched, validateForm, values]); + + const handleFixButtonClick = useCallback(() => { + setTouched( + setNestedObjectValues>(formikErr, true), + ); + if (!formikErrors.length) return; + + const firstError = document.getElementsByName(formikErrors[0])?.[0]; + + if (firstError?.tagName.toLowerCase() === 'input') { + (firstError as HTMLElement).focus(); + } else if (firstError?.tagName.toLowerCase() === 'textarea') { + (firstError as HTMLElement).focus(); + } else { + const customEvent = new CustomEvent(FIX_TRIGGER_EVENT_NAME, { + detail: { + name: formikErrors[0], + }, + }); + + window.dispatchEvent(customEvent); + } + }, [setTouched, formikErr, formikErrors]); + + return ( +
+ {!!formikErrors.length && ( +
+

+ 1 + ? { ...MSG.mulitpleErrorMessage } + : { ...MSG.singleErrorMessage })} + values={{ number: formikErrors.length }} + /> +

+ +
+ )} + + +
+ ); +}; + +FormStages.displayName = displayName; + +export default FormStages; diff --git a/src/modules/pages/components/IncorporationPage/constants.ts b/src/modules/pages/components/IncorporationPage/constants.ts index ddaae0e2e3..311d840016 100644 --- a/src/modules/pages/components/IncorporationPage/constants.ts +++ b/src/modules/pages/components/IncorporationPage/constants.ts @@ -144,7 +144,6 @@ export const stages: StageObject[] = [ title: MSG.create, description: MSG.createDesc, buttonText: MSG.createButtonText, - buttonTooltip: MSG.createTooltip, }, { id: Stages.Created, From a9a39aee1ca713ae673db0e6cc44c8bf5da7bc11 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Mon, 23 Jan 2023 11:05:36 +0100 Subject: [PATCH 03/11] fixed condition, removed unnecessary type --- .../dashboard/components/Incorporation/Stages/FormStages.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx index 7abb9c16fd..606ef0e586 100644 --- a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx +++ b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx @@ -57,9 +57,7 @@ const FormStages = ({ stages, activeStageId }: Props) => { const firstError = document.getElementsByName(formikErrors[0])?.[0]; - if (firstError?.tagName.toLowerCase() === 'input') { - (firstError as HTMLElement).focus(); - } else if (firstError?.tagName.toLowerCase() === 'textarea') { + if (['textarea', 'input'].includes(firstError?.tagName.toLowerCase())) { (firstError as HTMLElement).focus(); } else { const customEvent = new CustomEvent(FIX_TRIGGER_EVENT_NAME, { From 146661fe4d019d9966a2741fabf4e67e6247d551 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Tue, 3 Jan 2023 12:47:51 +0100 Subject: [PATCH 04/11] [wip]locked sidebar form --- .../LockedIncorporationForm.css | 113 +++++++++++++++ .../LockedIncorporationForm.css.d.ts | 13 ++ .../LockedIncorporationForm.tsx | 131 ++++++++++++++++++ .../LockedIncorporationForm/index.ts | 1 + .../LockedProtectors/LockedProtectors.css | 47 +++++++ .../LockedProtectors.css.d.ts | 10 ++ .../LockedProtectors/LockedProtectors.tsx | 101 ++++++++++++++ .../LockedProtectors/index.ts | 1 + .../IncorporationPage/IncorporationPage.tsx | 39 ++++++ 9 files changed, 456 insertions(+) create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx create mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css new file mode 100644 index 0000000000..825f2e246a --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css @@ -0,0 +1,113 @@ +@value paddingTop: 46px; +@value lockedPaddingTop: 75px; +@value paddingRightLeftBottom: 54px; + +.container { + padding: paddingTop paddingRightLeftBottom paddingRightLeftBottom; +} + +.costRow { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; +} + +.cost { + display: flex; + align-items: center; + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + color: color-mod(var(--dark) alpha(85%)); + letter-spacing: var(--spacing-medium); +} + +.cost i { + margin-right: 8px; +} + +.labelWrapper { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.labelWrapper label { + margin-right: 8px; + width: auto; +} + +.labelWrapper > div { + max-width: 250px; +} + +.nameInputs { + padding: 12px 0 0 0; +} + +.nameInputs input { + height: 44px; + font-size: var(--size-normal); + font-weight: var(--weight-bold); + color: var(--dark); + letter-spacing: var(--spacing-normal); +} + +.nameInputs > div:not(:first-child) { + margin-bottom: 12px; +} + +.nameInputs label { + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + color: color-mod(var(--dark) alpha(85%)); +} + +.namesWrapper { + /* border: 1px solid red */ +} + +.namesWrapper label { + flex: 1; + color: color-mod(var(--temp-grey-blue-7) alpha(85%)); + letter-spacing: var(--spacing-medium); +} + +.description { + /* border: 1px solid red */ +} + +.descriptionWrapper { + display: flex; + align-items: baseline; +} + +.descriptionWrapper label { + flex: 1; + color: color-mod(var(--temp-grey-blue-7) alpha(85%)); + letter-spacing: var(--spacing-medium); +} + +.descriptionWrapper > div { + flex: 2.5; + font-size: var(--size-normal); + font-weight: var(--weight-bold); + text-align: right; + color: color-mod(var(--dark) alpha(85%)); + letter-spacing: 0.1px; +} + +.title { + margin-bottom: 16px; + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + color: color-mod(var(--dark) alpha(85%)); + letter-spacing: var(--spacing-medium); +} + +.label { + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + color: color-mod(var(--temp-grey-blue-7) alpha(85%)); + letter-spacing: var(--spacing-medium); +} diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts new file mode 100644 index 0000000000..ac2d41545d --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts @@ -0,0 +1,13 @@ +export const paddingTop: string; +export const lockedPaddingTop: string; +export const paddingRightLeftBottom: string; +export const container: string; +export const costRow: string; +export const cost: string; +export const labelWrapper: string; +export const nameInputs: string; +export const namesWrapper: string; +export const description: string; +export const descriptionWrapper: string; +export const title: string; +export const label: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx new file mode 100644 index 0000000000..f5c6001ebe --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx @@ -0,0 +1,131 @@ +import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import { FormSection, InputLabel, SelectHorizontal, Form } from '~core/Fields'; +import { Colony } from '~data/index'; +import Icon from '~core/Icon'; +import { ValuesType } from '~pages/IncorporationPage/types'; + +import LockedProtectors from '../LockedProtectors'; + +import styles from './LockedIncorporationForm.css'; + +export const MSG = defineMessages({ + incorporation: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.incorporation`, + defaultMessage: 'Incorporation', + }, + initialCost: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.initialCost`, + defaultMessage: 'Initial cost', + }, + ongoingCost: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.ongoingCost`, + defaultMessage: 'Ongoing cost', + }, + cost: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.cost`, + defaultMessage: '{icon} {amount} {currency}', + }, + nameLabel: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.nameLabel`, + defaultMessage: 'Corporation name', + }, + descriptionLabel: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.descriptionLabel`, + defaultMessage: 'DAO Purpose', + }, +}); + +const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm`; + +export interface Props { + sidebarRef: HTMLElement | null; + colony: Colony; + formValues: ValuesType; +} + +const LockedIncorporationForm = ({ sidebarRef }: Props) => { + return ( +
+ +
+ +
+ + +
+
+ +
+
+ , + amount: '5,300', + currency: 'USDC', + }} + /> +
+
+ + +
+
+ +
+
+ , + amount: '3,800 / year', + currency: 'USDC', + }} + /> +
+
+ + +
+ {/* */} +
{}}> + + +
+ + +
+ +
+ WallStreetBets is on a mission to deploy decentralized satellites in + our skies. +
+
+ + +
+ ); +}; + +LockedIncorporationForm.displayName = displayName; + +export default LockedIncorporationForm; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts new file mode 100644 index 0000000000..836476fa94 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts @@ -0,0 +1 @@ +export { default } from './LockedIncorporationForm'; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css new file mode 100644 index 0000000000..5c898c4e6a --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css @@ -0,0 +1,47 @@ +.wrapper { + /* border: 1px solid red */ +} + +.protectorsLabelWrapper { + /* border: 1px solid red */ +} + +.label { + /* border: 1px solid red */ +} + +.userAvatarContainer { + /* border: 1px solid red */ +} + +.userName { + /* border: 1px solid red */ +} + +.row { + display: flex; +} + +.row label { + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + color: color-mod(var(--dark) alpha(85%)); +} + +.signing { + /* border: 1px solid red */ +} + +.labelWrapper { + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + color: color-mod(var(--dark) alpha(85%)); +} + +.signOptionWrapper { + /* border: 1px solid red */ +} + +.signOptionLabel { + /* border: 1px solid red */ +} diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts new file mode 100644 index 0000000000..dc35015ce0 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts @@ -0,0 +1,10 @@ +export const wrapper: string; +export const protectorsLabelWrapper: string; +export const label: string; +export const userAvatarContainer: string; +export const userName: string; +export const row: string; +export const signing: string; +export const labelWrapper: string; +export const signOptionWrapper: string; +export const signOptionLabel: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx new file mode 100644 index 0000000000..1f106508bb --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import { FormSection, InputLabel } from '~core/Fields'; +import QuestionMarkTooltip from '~core/QuestionMarkTooltip'; +import { Colony } from '~data/index'; + +import styles from './LockedProtectors.css'; +import { ValuesType } from '~pages/IncorporationPage/types'; + +export const MSG = defineMessages({ + protectors: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.protectors`, + defaultMessage: 'Protectors', + }, + protectorsTooltip: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.protectorsTooltip`, + defaultMessage: `A Protector's role in a DAO legal corporation is to ratify the decisions of the DAO. Their purpose is to act on behalf of the DAO and handle legal the required administration. Learn more`, + }, + unverified: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.unverified`, + defaultMessage: 'Unverified', + }, + verified: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.verified`, + defaultMessage: 'Verified', + }, + mainContact: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.mainContact`, + defaultMessage: 'Main contact', + }, + signing: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signing`, + defaultMessage: 'Signing', + }, + mainContactTooltip: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.mainContactTooltip`, + defaultMessage: `The main contact is required during the incorporation process and is also required to use their delivery address details for the registration.`, + }, + signOptionTooltip: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signOptionTooltip`, + defaultMessage: `Decide the requirements as to how many Protectors are required to sign legal documents to enact the decisions of a DAO.`, + }, +}); + +const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors`; + +export interface Props { + protectors: ValuesType['protectors']; + colony: Colony; +} + +const LockedProtectors = () => { + return ( + <> + +
+
+
+ +
+ +
+
+ + + {/* {protectors?.map((protector) => { + return ( +
+ +
+ +
+
+ )})} */} + + +
+ + {/*
+ +
+ +
+
*/} +
+ +
+
+ + +
+
All need to sign
+
+ + ); +}; + +LockedProtectors.displayName = displayName; + +export default LockedProtectors; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts new file mode 100644 index 0000000000..2c15a2c788 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts @@ -0,0 +1 @@ +export { default } from './LockedProtectors'; diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx index e5475565aa..beaffbd24b 100644 --- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx +++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx @@ -23,6 +23,8 @@ import { } from './constants'; import { ValuesType } from './types'; import styles from './IncorporationPage.css'; +import { ValuesType } from './types'; +import LockedIncorporationForm from '~dashboard/DAOIncorporation/IncorporationForm/LockedIncorporationForm'; const displayName = 'pages.IncorporationPage'; @@ -38,6 +40,8 @@ const IncorporationPage = () => { }); const [isFormEditable, setFormEditable] = useState(false); const [formValues, setFormValues] = useState(formValuesMock); + const [isFormEditable, setFormEditable] = useState(true); + const [formValues, setFormValues] = useState(); const [shouldValidate, setShouldValidate] = useState(false); const [activeStageId, setActiveStageId] = useState(StagesEnum.Payment); const sidebarRef = useRef(null); @@ -46,6 +50,9 @@ const IncorporationPage = () => { const openPayDialog = useDialog(IncorporationPaymentDialog); + const handleSubmit = useCallback((values) => { + setFormValues(values); + setFormEditable(false); const handleSubmit = useCallback((values) => { setFormValues(values); setFormEditable(false); @@ -92,6 +99,10 @@ const IncorporationPage = () => { } }, [shouldValidate]); + const { data: colonyData, loading } = useColonyFromNameQuery({ + variables: { name: colonyName, address: '' }, + }); + return isFormEditable ? ( {
)} + ) : ( +
+ +
+
+
+ +
+
+
) : (
); }; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css index 5c898c4e6a..508476d5b6 100644 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css @@ -1,47 +1,91 @@ .wrapper { - /* border: 1px solid red */ + margin-top: 32px; } .protectorsLabelWrapper { - /* border: 1px solid red */ + display: flex; + align-items: center; +} + +.protectorsLabelWrapper span { + display: inline-block; + height: 16px; } .label { - /* border: 1px solid red */ + margin-right: 8px; + font-size: var(--size-smallish); + font-weight: var(--weight-bold); + color: color-mod(var(--temp-grey-blue-7) alpha(85%)); } .userAvatarContainer { - /* border: 1px solid red */ + display: flex; + align-items: center; } .userName { - /* border: 1px solid red */ + margin-left: 8px; } .row { display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 0; } .row label { font-size: var(--size-smallish); font-weight: var(--weight-bold); - color: color-mod(var(--dark) alpha(85%)); + color: color-mod(var(--temp-grey-blue-7) alpha(85%)); } -.signing { - /* border: 1px solid red */ +.row > span { + display: flex; + justify-content: center; + align-items: center; + height: 20px; + width: 94px; + border-radius: 5px; +} + +.mainContactRow { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; } .labelWrapper { + display: flex; font-size: var(--size-smallish); font-weight: var(--weight-bold); - color: color-mod(var(--dark) alpha(85%)); + color: color-mod(var(--temp-grey-blue-7) alpha(85%)); +} + +.labelWrapper > span { + margin-left: 8px; +} + +.labelWrapper > div { + max-width: 250px; +} + +.protectorsLabelWrapper > div { + max-width: 250px; } .signOptionWrapper { - /* border: 1px solid red */ + display: flex; + align-items: baseline; + justify-content: space-between; + padding: 9px 0; } -.signOptionLabel { - /* border: 1px solid red */ +.signing { + font-size: var(--size-normal); + font-weight: var(--weight-bold); + color: color-mod(var(--dark) alpha(85%)); + letter-spacing: var(--spacing-medium); } diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts index dc35015ce0..e3c52d6de2 100644 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts @@ -4,7 +4,7 @@ export const label: string; export const userAvatarContainer: string; export const userName: string; export const row: string; -export const signing: string; +export const mainContactRow: string; export const labelWrapper: string; export const signOptionWrapper: string; -export const signOptionLabel: string; +export const signing: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx index 1f106508bb..34275d4f53 100644 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx @@ -1,12 +1,16 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { defineMessages, FormattedMessage } from 'react-intl'; import { FormSection, InputLabel } from '~core/Fields'; import QuestionMarkTooltip from '~core/QuestionMarkTooltip'; -import { Colony } from '~data/index'; +import { ValuesType } from '~pages/IncorporationPage/types'; +import UserAvatar from '~core/UserAvatar'; +import UserMention from '~core/UserMention'; +import Tag from '~core/Tag'; + +import { SignOption, VerificationStatus } from '../constants'; import styles from './LockedProtectors.css'; -import { ValuesType } from '~pages/IncorporationPage/types'; export const MSG = defineMessages({ protectors: { @@ -41,19 +45,32 @@ export const MSG = defineMessages({ id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signOptionTooltip`, defaultMessage: `Decide the requirements as to how many Protectors are required to sign legal documents to enact the decisions of a DAO.`, }, + individual: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.individual`, + defaultMessage: 'Individual signing', + }, + multiple: { + id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.multiple`, + defaultMessage: 'All need to sign', + }, }); const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors`; export interface Props { - protectors: ValuesType['protectors']; - colony: Colony; + formValues: ValuesType; } -const LockedProtectors = () => { +const LockedProtectors = ({ formValues }: Props) => { + const signLabel = useMemo(() => { + return formValues.signOption === SignOption.Individual + ? MSG.individual + : MSG.multiple; + }, [formValues]); + return ( <> - +
@@ -64,34 +81,64 @@ const LockedProtectors = () => {
- {/* {protectors?.map((protector) => { + {formValues.protectors?.map((protector) => { + const { profile } = protector || {}; + const { walletAddress, username, displayName: userDispalyName } = + profile || {}; + return ( -
- -
- +
+ + {protector.verified + ? VerificationStatus.Verified + : VerificationStatus.Unverified} + +
+ +
+ +
+
-
- )})} */} + ); + })} -
- - {/*
- +
+
+ + +
+
+
- +
-
*/} +
-
-
- - + +
+
+ + +
+
+ +
-
All need to sign
-
+ ); }; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts new file mode 100644 index 0000000000..8d8f7ec174 --- /dev/null +++ b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts @@ -0,0 +1,9 @@ +export enum SignOption { + Individual = 'Individual', + Multiple = 'Multiple', +} + +export enum VerificationStatus { + Verified = 'Verified', + Unverified = 'Unverified', +} From a8539121689ee3985efe9c3c15e4f9e8165f0ed8 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Fri, 13 Jan 2023 13:14:21 +0100 Subject: [PATCH 06/11] renamed to Incorporation --- .../LockedIncorporationForm.css | 131 ---------------- .../LockedIncorporationForm.css.d.ts | 14 -- .../LockedIncorporationForm.tsx | 128 --------------- .../LockedIncorporationForm/index.ts | 1 - .../LockedProtectors/LockedProtectors.css | 91 ----------- .../LockedProtectors.css.d.ts | 10 -- .../LockedProtectors/LockedProtectors.tsx | 148 ------------------ .../LockedProtectors/index.ts | 1 - .../IncorporationForm/constants.ts | 9 -- .../IncorporationPage/IncorporationPage.tsx | 2 +- 10 files changed, 1 insertion(+), 534 deletions(-) delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts delete mode 100644 src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css deleted file mode 100644 index 85f0a651fc..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css +++ /dev/null @@ -1,131 +0,0 @@ -@value paddingTop: 46px; -@value lockedPaddingTop: 75px; -@value paddingRightLeftBottom: 54px; - -@keyframes slideDown { - 0% { - max-height: 0; - } - - 100% { - max-height: 180px; - } -} - -.container { - padding: paddingTop paddingRightLeftBottom paddingRightLeftBottom; -} - -.costRow { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0; -} - -.cost { - display: flex; - align-items: center; - font-size: var(--size-smallish); - font-weight: var(--weight-bold); - color: color-mod(var(--dark) alpha(85%)); - letter-spacing: var(--spacing-medium); -} - -.cost i { - margin-right: 8px; -} - -.labelWrapper { - display: flex; - align-items: center; - justify-content: flex-start; -} - -.labelWrapper label { - margin-right: 8px; - width: auto; -} - -.labelWrapper > div { - max-width: 250px; -} - -.nameInputs { - padding: 12px 0 0 0; -} - -.nameInputs input { - height: 44px; - font-size: var(--size-normal); - font-weight: var(--weight-bold); - color: var(--dark); - letter-spacing: var(--spacing-normal); -} - -.nameInputs > div:not(:first-child) { - margin-bottom: 12px; -} - -.nameInputs label { - font-size: var(--size-smallish); - font-weight: var(--weight-bold); - color: color-mod(var(--dark) alpha(85%)); -} - -.descriptionWrapper { - display: flex; - align-items: baseline; - padding: 12px 0; -} - -.descriptionWrapper label { - flex: 1; - color: color-mod(var(--temp-grey-blue-7) alpha(85%)); - letter-spacing: var(--spacing-medium); -} - -.description { - flex: 2.5; - font-size: var(--size-normal); - font-weight: var(--weight-bold); - text-align: right; - color: color-mod(var(--dark) alpha(85%)); - letter-spacing: 0.1px; -} - -.title { - margin-bottom: 16px; - font-size: var(--size-smallish); - font-weight: var(--weight-bold); - color: color-mod(var(--dark) alpha(85%)); - letter-spacing: var(--spacing-medium); -} - -.label { - font-size: var(--size-smallish); - font-weight: var(--weight-bold); - color: color-mod(var(--temp-grey-blue-7) alpha(85%)); - letter-spacing: var(--spacing-medium); -} - -.namesWrapper label { - flex: 1; - color: color-mod(var(--temp-grey-blue-7) alpha(85%)); - letter-spacing: var(--spacing-medium); -} - -.namesWrapper ul { - position: static; - overflow: hidden; - animation-name: slideDown; - animation-duration: 250ms; -} - -.namesWrapper span { - font-size: var(--size-smallish); -} - -.namesWrapper li:hover { - background-color: transparent; -} diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts deleted file mode 100644 index ef5111b4ae..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -export const paddingTop: string; -export const lockedPaddingTop: string; -export const paddingRightLeftBottom: string; -export const container: string; -export const costRow: string; -export const cost: string; -export const labelWrapper: string; -export const nameInputs: string; -export const descriptionWrapper: string; -export const description: string; -export const title: string; -export const label: string; -export const namesWrapper: string; -export const slideDown: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx deleted file mode 100644 index 7c965323a8..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React, { useMemo } from 'react'; -import { defineMessages, FormattedMessage } from 'react-intl'; - -import { FormSection, InputLabel, SelectHorizontal, Form } from '~core/Fields'; -import Icon from '~core/Icon'; -import { ValuesType } from '~pages/IncorporationPage/types'; - -import LockedProtectors from '../LockedProtectors'; - -import styles from './LockedIncorporationForm.css'; - -export const MSG = defineMessages({ - incorporation: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.incorporation`, - defaultMessage: 'Incorporation', - }, - initialCost: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.initialCost`, - defaultMessage: 'Initial cost', - }, - ongoingCost: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.ongoingCost`, - defaultMessage: 'Ongoing cost', - }, - cost: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.cost`, - defaultMessage: '{icon} {amount} {currency}', - }, - nameLabel: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.nameLabel`, - defaultMessage: 'Corporation name', - }, - descriptionLabel: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.descriptionLabel`, - defaultMessage: 'DAO Purpose', - }, -}); - -const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm`; - -export interface Props { - formValues: ValuesType; -} - -const LockedIncorporationForm = ({ formValues }: Props) => { - const alternativeNames = useMemo( - () => - formValues.alternativeNames.map((name) => ({ - label: name, - value: name, - })), - [formValues.alternativeNames], - ); - - return ( -
- -
- -
- - -
-
- -
-
- , - amount: '5,300', - currency: 'USDC', - }} - /> -
-
- - -
-
- -
-
- , - amount: '3,800 / year', - currency: 'USDC', - }} - /> -
-
- - - {/* A form is used here because the SelectHorizontal component must be wrapped in a Formik form. It doesn't send data anywhere. */} -
{}}> -
- <>{formValues.name}} - options={alternativeNames} - autoHeight - unselectable - /> -
-
- - -
- -
{formValues.purpose}
-
- - -
- ); -}; - -LockedIncorporationForm.displayName = displayName; - -export default LockedIncorporationForm; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts deleted file mode 100644 index 836476fa94..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LockedIncorporationForm'; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css deleted file mode 100644 index 508476d5b6..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css +++ /dev/null @@ -1,91 +0,0 @@ -.wrapper { - margin-top: 32px; -} - -.protectorsLabelWrapper { - display: flex; - align-items: center; -} - -.protectorsLabelWrapper span { - display: inline-block; - height: 16px; -} - -.label { - margin-right: 8px; - font-size: var(--size-smallish); - font-weight: var(--weight-bold); - color: color-mod(var(--temp-grey-blue-7) alpha(85%)); -} - -.userAvatarContainer { - display: flex; - align-items: center; -} - -.userName { - margin-left: 8px; -} - -.row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 0; -} - -.row label { - font-size: var(--size-smallish); - font-weight: var(--weight-bold); - color: color-mod(var(--temp-grey-blue-7) alpha(85%)); -} - -.row > span { - display: flex; - justify-content: center; - align-items: center; - height: 20px; - width: 94px; - border-radius: 5px; -} - -.mainContactRow { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0; -} - -.labelWrapper { - display: flex; - font-size: var(--size-smallish); - font-weight: var(--weight-bold); - color: color-mod(var(--temp-grey-blue-7) alpha(85%)); -} - -.labelWrapper > span { - margin-left: 8px; -} - -.labelWrapper > div { - max-width: 250px; -} - -.protectorsLabelWrapper > div { - max-width: 250px; -} - -.signOptionWrapper { - display: flex; - align-items: baseline; - justify-content: space-between; - padding: 9px 0; -} - -.signing { - font-size: var(--size-normal); - font-weight: var(--weight-bold); - color: color-mod(var(--dark) alpha(85%)); - letter-spacing: var(--spacing-medium); -} diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts deleted file mode 100644 index e3c52d6de2..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const wrapper: string; -export const protectorsLabelWrapper: string; -export const label: string; -export const userAvatarContainer: string; -export const userName: string; -export const row: string; -export const mainContactRow: string; -export const labelWrapper: string; -export const signOptionWrapper: string; -export const signing: string; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx deleted file mode 100644 index 34275d4f53..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import React, { useMemo } from 'react'; -import { defineMessages, FormattedMessage } from 'react-intl'; - -import { FormSection, InputLabel } from '~core/Fields'; -import QuestionMarkTooltip from '~core/QuestionMarkTooltip'; -import { ValuesType } from '~pages/IncorporationPage/types'; -import UserAvatar from '~core/UserAvatar'; -import UserMention from '~core/UserMention'; -import Tag from '~core/Tag'; - -import { SignOption, VerificationStatus } from '../constants'; - -import styles from './LockedProtectors.css'; - -export const MSG = defineMessages({ - protectors: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.protectors`, - defaultMessage: 'Protectors', - }, - protectorsTooltip: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.protectorsTooltip`, - defaultMessage: `A Protector's role in a DAO legal corporation is to ratify the decisions of the DAO. Their purpose is to act on behalf of the DAO and handle legal the required administration. Learn more`, - }, - unverified: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.unverified`, - defaultMessage: 'Unverified', - }, - verified: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.verified`, - defaultMessage: 'Verified', - }, - mainContact: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.mainContact`, - defaultMessage: 'Main contact', - }, - signing: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signing`, - defaultMessage: 'Signing', - }, - mainContactTooltip: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.mainContactTooltip`, - defaultMessage: `The main contact is required during the incorporation process and is also required to use their delivery address details for the registration.`, - }, - signOptionTooltip: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.signOptionTooltip`, - defaultMessage: `Decide the requirements as to how many Protectors are required to sign legal documents to enact the decisions of a DAO.`, - }, - individual: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.individual`, - defaultMessage: 'Individual signing', - }, - multiple: { - id: `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors.multiple`, - defaultMessage: 'All need to sign', - }, -}); - -const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedProtectors`; - -export interface Props { - formValues: ValuesType; -} - -const LockedProtectors = ({ formValues }: Props) => { - const signLabel = useMemo(() => { - return formValues.signOption === SignOption.Individual - ? MSG.individual - : MSG.multiple; - }, [formValues]); - - return ( - <> - -
-
-
- -
- -
-
- - - {formValues.protectors?.map((protector) => { - const { profile } = protector || {}; - const { walletAddress, username, displayName: userDispalyName } = - profile || {}; - - return ( -
- - {protector.verified - ? VerificationStatus.Verified - : VerificationStatus.Unverified} - -
- -
- -
-
-
- ); - })} - - -
-
- - -
-
- -
- -
-
-
- - -
-
- - -
-
- -
-
- - - ); -}; - -LockedProtectors.displayName = displayName; - -export default LockedProtectors; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts deleted file mode 100644 index 2c15a2c788..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LockedProtectors'; diff --git a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts b/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts deleted file mode 100644 index 8d8f7ec174..0000000000 --- a/src/modules/dashboard/components/DAOIncorporation/IncorporationForm/constants.ts +++ /dev/null @@ -1,9 +0,0 @@ -export enum SignOption { - Individual = 'Individual', - Multiple = 'Multiple', -} - -export enum VerificationStatus { - Verified = 'Verified', - Unverified = 'Unverified', -} diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx index beaffbd24b..5f7927b3bc 100644 --- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx +++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx @@ -24,7 +24,7 @@ import { import { ValuesType } from './types'; import styles from './IncorporationPage.css'; import { ValuesType } from './types'; -import LockedIncorporationForm from '~dashboard/DAOIncorporation/IncorporationForm/LockedIncorporationForm'; +import LockedIncorporationForm from '~dashboard/Incorporation/IncorporationForm/LockedIncorporationForm'; const displayName = 'pages.IncorporationPage'; From 8f4dc4dc8caf8b04a5f3ba1db7644a3006f964b6 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Mon, 23 Jan 2023 09:39:25 +0100 Subject: [PATCH 07/11] fixed type errors --- .../Incorporation/IncorporationForm/Protectors/Protectors.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx index 4fa7617d57..2f5e47a80b 100644 --- a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx +++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx @@ -17,7 +17,6 @@ import Button from '~core/Button'; import Link from '~core/Link'; import SingleUserPicker from '../SingleUserPicker'; -import { SignOption } from '../constants'; import styles from './Protectors.css'; From e590953eeb19e8c1c61f4a5eb3bfaa8e2e90dd59 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Wed, 1 Feb 2023 14:52:16 +0100 Subject: [PATCH 08/11] added info banner --- .../Incorporation/InfoBanner/InfoBanner.css | 53 +++++++++++++++ .../InfoBanner/InfoBanner.css.d.ts | 6 ++ .../Incorporation/InfoBanner/InfoBanner.tsx | 68 +++++++++++++++++++ .../Incorporation/InfoBanner/index.ts | 1 + .../IncorporationPage/IncorporationPage.css | 1 + .../IncorporationPage/IncorporationPage.tsx | 14 ++-- .../components/IncorporationPage/constants.ts | 2 +- 7 files changed, 139 insertions(+), 6 deletions(-) create mode 100644 src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css create mode 100644 src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css.d.ts create mode 100644 src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.tsx create mode 100644 src/modules/dashboard/components/Incorporation/InfoBanner/index.ts diff --git a/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css new file mode 100644 index 0000000000..4b461c99de --- /dev/null +++ b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css @@ -0,0 +1,53 @@ +.wrapper { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 22px; + padding: 14px 28px; + min-height: 94px; + width: 100%; + border-radius: 5px; + background-color: var(--grey-blue-2); + gap: 100px; +} + +.buttonsWrapper { + display: flex; + align-items: center; +} + +.title { + display: flex; + align-items: center; + margin-bottom: 6px; + font-size: var(--size-normal); + font-weight: var(--weight-bold); + color: var(--dark); + letter-spacing: var(--spacing-medium); +} + +.title > span { + margin-right: 8px; +} + +.description { + font-size: var(--size-normal); + color: var(--dark); + letter-spacing: var(0.1px); +} + +.removeButton { + composes: main from '~core/Button/Button.css'; + height: 44px; + font-size: var(--size-normal); + font-weight: var(--weight-bold); + color: var(--pink); +} + +.verifyButton { + composes: themePrimary main from '~core/Button/Button.css'; + height: 44px; + width: 160px; + font-size: var(--size-normal); + font-weight: var(--weight-bold); +} diff --git a/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css.d.ts b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css.d.ts new file mode 100644 index 0000000000..5a8d38313f --- /dev/null +++ b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css.d.ts @@ -0,0 +1,6 @@ +export const wrapper: string; +export const buttonsWrapper: string; +export const title: string; +export const description: string; +export const removeButton: string; +export const verifyButton: string; diff --git a/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.tsx b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.tsx new file mode 100644 index 0000000000..ee0f9a7b18 --- /dev/null +++ b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import Button from '~core/Button'; +import { Stages } from '~pages/IncorporationPage/constants'; + +import styles from './InfoBanner.css'; + +const MSG = defineMessages({ + titleProcessing: { + id: 'dashboard.Incorporation.InfoBanner.titleProcessing', + defaultMessage: 'Check email and spam folder', + }, + titleCompleted: { + id: 'dashboard.Incorporation.InfoBanner.titleCompleted', + defaultMessage: 'Application Complete', + }, + descriptionProcessing: { + id: 'dashboard.Incorporation.InfoBanner.descriptionProcessing', + defaultMessage: `Your Incorporation has been approved, each protector needs to sign and return the Indemnity form that they should have received from Korporatio.`, + }, + descriptionCompleted: { + id: 'dashboard.Incorporation.InfoBanner.descriptionCompleted', + defaultMessage: `Your DAO incorporation has been completed. Your DAO is now able to interact with traditional organisations and your contributors are now protected.`, + }, + buttonText: { + id: 'dashboard.Incorporation.InfoBanner.buttonText', + defaultMessage: 'View details', + }, +}); + +const displayName = 'dashboard.Incorporation.InfoBanner'; + +export interface Props { + activeStageId: Stages; +} + +const InfoBanner = ({ activeStageId }: Props) => { + return ( +
+
+
+ +
+
+ +
+
+ {activeStageId === Stages.Complete && ( +
+
+ )} +
+ ); +}; + +InfoBanner.displayName = displayName; + +export default InfoBanner; diff --git a/src/modules/dashboard/components/Incorporation/InfoBanner/index.ts b/src/modules/dashboard/components/Incorporation/InfoBanner/index.ts new file mode 100644 index 0000000000..7bb7a3a619 --- /dev/null +++ b/src/modules/dashboard/components/Incorporation/InfoBanner/index.ts @@ -0,0 +1 @@ +export { default } from './InfoBanner'; diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.css b/src/modules/pages/components/IncorporationPage/IncorporationPage.css index 7984904f8f..7cbcac48ce 100644 --- a/src/modules/pages/components/IncorporationPage/IncorporationPage.css +++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.css @@ -36,6 +36,7 @@ } .mainContainer { + padding: 76px 100px 70px 25px; padding-bottom: 50px; height: 600px; min-height: 100%; diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx index 5f7927b3bc..6290090c70 100644 --- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx +++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx @@ -23,13 +23,9 @@ import { } from './constants'; import { ValuesType } from './types'; import styles from './IncorporationPage.css'; -import { ValuesType } from './types'; -import LockedIncorporationForm from '~dashboard/Incorporation/IncorporationForm/LockedIncorporationForm'; const displayName = 'pages.IncorporationPage'; -export type InitialValuesType = typeof initialValues; - const IncorporationPage = () => { const { colonyName } = useParams<{ colonyName: string; @@ -168,7 +164,15 @@ const IncorporationPage = () => { ) )} -
+
+ {(activeStageId === StagesEnum.Processing || + activeStageId === StagesEnum.Complete) && ( + + )}
Date: Wed, 8 Feb 2023 09:43:59 +0100 Subject: [PATCH 09/11] removed unnecessary enum, fixed padding --- .../Incorporation/IncorporationForm/Protectors/Protectors.tsx | 1 + .../pages/components/IncorporationPage/IncorporationPage.tsx | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx index 2f5e47a80b..4fa7617d57 100644 --- a/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx +++ b/src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx @@ -17,6 +17,7 @@ import Button from '~core/Button'; import Link from '~core/Link'; import SingleUserPicker from '../SingleUserPicker'; +import { SignOption } from '../constants'; import styles from './Protectors.css'; diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx index 6290090c70..7160560051 100644 --- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx +++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx @@ -166,7 +166,9 @@ const IncorporationPage = () => {
{(activeStageId === StagesEnum.Processing || From 1f0db88c71ae8f47af0fc7d9fd5ec09df93988dc Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Wed, 8 Feb 2023 09:51:07 +0100 Subject: [PATCH 10/11] added link instead of button --- .../components/Incorporation/InfoBanner/InfoBanner.css | 4 ++++ .../components/Incorporation/InfoBanner/InfoBanner.tsx | 9 +++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css index 4b461c99de..1f4dc525fd 100644 --- a/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css +++ b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.css @@ -46,6 +46,10 @@ .verifyButton { composes: themePrimary main from '~core/Button/Button.css'; + display: flex; + justify-content: center; + align-items: center; + padding: 0; height: 44px; width: 160px; font-size: var(--size-normal); diff --git a/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.tsx b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.tsx index ee0f9a7b18..29026fa8b2 100644 --- a/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.tsx +++ b/src/modules/dashboard/components/Incorporation/InfoBanner/InfoBanner.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { defineMessages, FormattedMessage } from 'react-intl'; -import Button from '~core/Button'; +import Link from '~core/Link'; import { Stages } from '~pages/IncorporationPage/constants'; +import { LANDING_PAGE_ROUTE } from '~routes/routeConstants'; import styles from './InfoBanner.css'; @@ -56,7 +57,11 @@ const InfoBanner = ({ activeStageId }: Props) => {
{activeStageId === Stages.Complete && (
-
)}
From e66f40b705fac78876444682a093b341b9913912 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Mon, 20 Mar 2023 23:59:21 +0100 Subject: [PATCH 11/11] fixed types --- .../Incorporation/Stages/FormStages.tsx | 106 ------------------ .../IncorporationPage/IncorporationPage.tsx | 65 +++-------- 2 files changed, 15 insertions(+), 156 deletions(-) delete mode 100644 src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx diff --git a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx b/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx deleted file mode 100644 index 606ef0e586..0000000000 --- a/src/modules/dashboard/components/Incorporation/Stages/FormStages.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { useFormikContext, setNestedObjectValues, FormikTouched } from 'formik'; -import React, { useCallback, useMemo } from 'react'; -import { defineMessages, FormattedMessage } from 'react-intl'; - -import { flattenObject } from '~dashboard/ExpenditurePage/Stages/utils'; -import { FIX_TRIGGER_EVENT_NAME } from '~pages/ExpenditurePage/constants'; -import { StageObject, ValuesType } from '~pages/IncorporationPage/types'; -import { Stages as StagesEnum } from '~pages/IncorporationPage/constants'; - -import Stages from './Stages'; -import styles from './Stages.css'; - -const displayName = 'dashboard.Incorporation.Stages.FormStages'; - -const MSG = defineMessages({ - singleErrorMessage: { - id: 'dashboard.Incorporation.Stages.FormStages.singleErrorMessage', - defaultMessage: '{number} required field has an error.', - }, - mulitpleErrorMessage: { - id: 'dashboard.Incorporation.Stages.FormStages.mulitpleErrorMessage', - defaultMessage: '{number} required fields have an error.', - }, - errorMessageAction: { - id: 'dashboard.Incorporation.Stages.FormStages.errorMessageAction', - defaultMessage: 'Fix it!', - }, -}); - -export interface Props { - stages: StageObject[]; - activeStageId: StagesEnum; -} - -const FormStages = ({ stages, activeStageId }: Props) => { - const { values, handleSubmit, validateForm, setTouched, errors: formikErr } = - useFormikContext() || {}; - - const formikErrors = useMemo(() => { - const errorsFlat = flattenObject(formikErr); - return Object.keys(errorsFlat); - }, [formikErr]); - - const handleSaveDraft = useCallback(async () => { - const errors = await validateForm(values); - const errorsLength = Object.keys(errors)?.length; - setTouched(setNestedObjectValues>(errors, true)); - - return !errorsLength && handleSubmit(values as any); - }, [handleSubmit, setTouched, validateForm, values]); - - const handleFixButtonClick = useCallback(() => { - setTouched( - setNestedObjectValues>(formikErr, true), - ); - if (!formikErrors.length) return; - - const firstError = document.getElementsByName(formikErrors[0])?.[0]; - - if (['textarea', 'input'].includes(firstError?.tagName.toLowerCase())) { - (firstError as HTMLElement).focus(); - } else { - const customEvent = new CustomEvent(FIX_TRIGGER_EVENT_NAME, { - detail: { - name: formikErrors[0], - }, - }); - - window.dispatchEvent(customEvent); - } - }, [setTouched, formikErr, formikErrors]); - - return ( -
- {!!formikErrors.length && ( -
-

- 1 - ? { ...MSG.mulitpleErrorMessage } - : { ...MSG.singleErrorMessage })} - values={{ number: formikErrors.length }} - /> -

- -
- )} - - -
- ); -}; - -FormStages.displayName = displayName; - -export default FormStages; diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx index 7160560051..bafecedf5f 100644 --- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx +++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx @@ -12,6 +12,7 @@ import LockedIncorporationForm from '~dashboard/Incorporation/IncorporationForm/ import VerificationBanner from '~dashboard/Incorporation/VerificationBanner'; import IncorporationPaymentDialog from '~dashboard/Dialogs/IncorporationPaymentDialog'; import { useDialog } from '~core/Dialog'; +import InfoBanner from '~dashboard/Incorporation/InfoBanner'; import { initialValues, @@ -34,10 +35,8 @@ const IncorporationPage = () => { const { data: colonyData, loading } = useColonyFromNameQuery({ variables: { name: colonyName, address: '' }, }); - const [isFormEditable, setFormEditable] = useState(false); const [formValues, setFormValues] = useState(formValuesMock); - const [isFormEditable, setFormEditable] = useState(true); - const [formValues, setFormValues] = useState(); + const [isFormEditable, setFormEditable] = useState(false); const [shouldValidate, setShouldValidate] = useState(false); const [activeStageId, setActiveStageId] = useState(StagesEnum.Payment); const sidebarRef = useRef(null); @@ -46,9 +45,6 @@ const IncorporationPage = () => { const openPayDialog = useDialog(IncorporationPaymentDialog); - const handleSubmit = useCallback((values) => { - setFormValues(values); - setFormEditable(false); const handleSubmit = useCallback((values) => { setFormValues(values); setFormEditable(false); @@ -95,13 +91,9 @@ const IncorporationPage = () => { } }, [shouldValidate]); - const { data: colonyData, loading } = useColonyFromNameQuery({ - variables: { name: colonyName, address: '' }, - }); - return isFormEditable ? ( { )} ) : ( -
+
-
- ) : ( -
- -
- {/* user passed to VerifiactionBanner is a mock */} - {notVerified && }
{colonyData && (