Skip to content

Commit 0c19e06

Browse files
joanna-pageprojoanna-pagepro
committed
feat: streaming payment form
1 parent 02dc31f commit 0c19e06

File tree

38 files changed

+1053
-99
lines changed

38 files changed

+1053
-99
lines changed

‎src/components/common/ColonyActions/helpers/getActionTitleValues.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,20 @@ export enum ActionTitleMessageKeys {
3636
SafeTransactionTitle = 'safeTransactionTitle',
3737
RecipientsNumber = 'recipientsNumber',
3838
TokensNumber = 'tokensNumber',
39+
Period = 'period',
3940
}
4041

4142
/* Maps actionTypes to message values as found in en-actions.ts */
4243
const getMessageDescriptorKeys = (actionType: AnyActionType) => {
4344
switch (true) {
45+
case actionType.includes(ColonyActionType.CreateStreamingPayment):
46+
return [
47+
ActionTitleMessageKeys.Recipient,
48+
ActionTitleMessageKeys.Amount,
49+
ActionTitleMessageKeys.TokenSymbol,
50+
ActionTitleMessageKeys.Initiator,
51+
ActionTitleMessageKeys.Period,
52+
];
4453
case actionType.includes(ColonyActionType.Payment):
4554
return [
4655
ActionTitleMessageKeys.Recipient,

‎src/components/common/ColonyActions/helpers/mapItemToMessageFormat.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,5 +248,7 @@ export const mapColonyActionToExpectedFormat = ({
248248
(slot) => slot.payouts?.map((payout) => payout.tokenAddress) ?? [],
249249
),
250250
).size,
251+
// @todo: update this to use the actual period value
252+
[ActionTitleMessageKeys.Period]: 'Day',
251253
};
252254
};

‎src/components/common/ColonyActionsTable/partials/ActionDescription/ActionDescription.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const ActionDescription: FC<ActionDescriptionProps> = ({
4949
motionState || null,
5050
);
5151

52+
// @todo: add streaming payment data
5253
const actionMetadataDescription = formatText(
5354
{ id: 'action.title' },
5455
getActionTitleValues({

‎src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ActionTypeFilters/consts.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ export const ACTION_TYPES_FILTERS = [
2323
// label:formatText({ id: 'actions.stagedPayment' }),
2424
// name: Action.StagedPayment,
2525
// },
26-
// {
27-
// label:formatText({ id: 'actions.streamingPayment' }),
28-
// name: Action.StreamingPayment,
29-
// },
26+
{
27+
label: formatText({ id: 'actions.streamingPayment' }),
28+
name: Action.StreamingPayment,
29+
},
3030
{
3131
label: formatText({ id: 'actions.createDecision' }),
3232
name: Action.CreateDecision,

‎src/components/common/Extensions/SpecialInput/SpecialInput.tsx‎

Lines changed: 4 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,15 @@
1-
import clsx from 'clsx';
21
import React, { type FC } from 'react';
32
import { useFormContext } from 'react-hook-form';
43

5-
import { formatText } from '~utils/intl.ts';
6-
4+
import SpecialInputBase from './SpecialInputBase.tsx';
75
import { type SpecialInputProps } from './types.ts';
86

97
const displayName = 'common.Extensions.SpecialInput';
108

11-
const SpecialInput: FC<SpecialInputProps> = ({
12-
defaultValue,
13-
name,
14-
disabled,
15-
id,
16-
placeholder,
17-
isError,
18-
type,
19-
step,
20-
onChange,
21-
}) => {
9+
const SpecialInput: FC<SpecialInputProps> = ({ name, min, max, ...rest }) => {
2210
const { register } = useFormContext();
23-
return (
24-
<div
25-
className={clsx(
26-
'group relative flex justify-end text-md after:absolute after:-left-[0.1875rem] after:-top-[0.1875rem] after:block after:h-[calc(100%+0.1875rem+0.1875rem)] after:w-[calc(100%+0.1875rem+0.1875rem)] after:rounded-lg after:border-[0.1875rem] after:border-transparent after:transition-all after:duration-normal after:content-[""] focus-within:border-blue-100',
27-
{
28-
'hover:after:border-blue-100': !isError,
29-
'border-none': isError,
30-
'pointer-events-none opacity-50': disabled,
31-
},
32-
)}
33-
>
34-
<input
35-
{...register(name)}
36-
defaultValue={defaultValue}
37-
type="number"
38-
className={clsx(
39-
'z-base -mr-px w-[3.75rem] shrink-0 rounded-l rounded-r-none border px-3.5 py-3 transition-colors duration-normal focus:outline-none group-focus-within:border-blue-200 group-hover:border-blue-200',
40-
{
41-
'border-gray-300': !isError,
42-
'!border-negative-400': isError,
43-
},
44-
)}
45-
id={id}
46-
placeholder={placeholder}
47-
aria-disabled={disabled}
48-
disabled={disabled}
49-
step={step}
50-
// Stop value changing on scroll, which is generally an inadvertant side effect of scrolling the page
51-
onWheel={(e) => e.currentTarget.blur()}
52-
onChange={onChange}
53-
/>
54-
<span
55-
className={clsx(
56-
'z-base min-w-[2.375rem] max-w-[4.125rem] rounded-l-none rounded-r border py-3 pl-3.5 pr-3 text-center text-gray-600 transition-all duration-normal',
57-
{
58-
'border-gray-300': !isError,
59-
'!border-negative-400': isError,
60-
},
61-
)}
62-
>
63-
{type === 'hours' ? formatText({ id: 'hours' }) : '%'}
64-
</span>
65-
</div>
66-
);
11+
12+
return <SpecialInputBase {...register(name)} {...rest} min={min} max={max} />;
6713
};
6814
SpecialInput.displayName = displayName;
6915

‎src/components/common/Extensions/SpecialInput/SpecialInputBase.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import clsx from 'clsx';
2+
import React, { type FC } from 'react';
3+
4+
import { formatText } from '~utils/intl.ts';
5+
6+
import { type SpecialInputProps } from './types.ts';
7+
8+
const displayName = 'common.Extensions.SpecialInputBase';
9+
10+
const SpecialInputBase: FC<SpecialInputProps> = ({
11+
defaultValue,
12+
name,
13+
disabled,
14+
id,
15+
placeholder,
16+
isError,
17+
type,
18+
step,
19+
onChange,
20+
value,
21+
min,
22+
...rest
23+
}) => {
24+
return (
25+
<div
26+
className={clsx(
27+
'group relative flex justify-end text-md after:absolute after:-left-[0.1875rem] after:-top-[0.1875rem] after:block after:h-[calc(100%+0.1875rem+0.1875rem)] after:w-[calc(100%+0.1875rem+0.1875rem)] after:rounded-lg after:border-[0.1875rem] after:border-transparent after:transition-all after:duration-normal after:content-[""] focus-within:border-blue-100',
28+
{
29+
'hover:after:border-blue-100': !isError,
30+
'border-none': isError,
31+
'pointer-events-none opacity-50': disabled,
32+
},
33+
)}
34+
>
35+
<input
36+
{...rest}
37+
name={name}
38+
defaultValue={defaultValue}
39+
type="number"
40+
className={clsx(
41+
'z-base -mr-px w-[3.75rem] shrink-0 flex-grow rounded-l rounded-r-none border px-3.5 py-3 transition-colors duration-normal focus:outline-none group-focus-within:border-blue-200 group-hover:border-blue-200',
42+
{
43+
'border-gray-300': !isError,
44+
'!border-negative-400': isError,
45+
},
46+
)}
47+
id={id}
48+
placeholder={placeholder}
49+
aria-disabled={disabled}
50+
disabled={disabled}
51+
step={step}
52+
min={min}
53+
// Stop value changing on scroll, which is generally an inadvertant side effect of scrolling the page
54+
onWheel={(e) => e.currentTarget.blur()}
55+
onChange={onChange}
56+
value={value}
57+
/>
58+
<span
59+
className={clsx(
60+
'z-base min-w-[2.375rem] max-w-[4.125rem] rounded-l-none rounded-r border py-3 pl-3.5 pr-3 text-center text-gray-600 transition-all duration-normal',
61+
{
62+
'border-gray-300': !isError,
63+
'!border-negative-400': isError,
64+
},
65+
)}
66+
>
67+
{type === 'hours' && formatText({ id: 'hours' })}
68+
{type === 'percent' && '%'}
69+
{type === 'days' && formatText({ id: 'days' })}
70+
</span>
71+
</div>
72+
);
73+
};
74+
SpecialInputBase.displayName = displayName;
75+
76+
export default SpecialInputBase;

‎src/components/common/Extensions/SpecialInput/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface SpecialInputProps {
1717
onChange?: (e: SyntheticEvent<HTMLInputElement>) => void;
1818
}
1919

20-
export type ComponentType = 'percent' | 'hours';
20+
export type ComponentType = 'percent' | 'hours' | 'days';
2121

2222
export type FormHourInput = {
2323
hours?: number;

‎src/components/frame/Extensions/layouts/hooks.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -242,15 +242,14 @@ export const useMainMenuItems = (hasTransactionId: boolean) => {
242242
// [ACTION_TYPE_FIELD_NAME]: Action.PaymentBuilder,
243243
// }),
244244
// },
245-
// {
246-
// key: '3',
247-
// label: formatText({ id: 'actions.streamingPayment' }),
248-
// onClick: () =>
249-
// toggleActionSidebarOn({
250-
// [ACTION_TYPE_FIELD_NAME]: Action.StreamingPayment,
251-
// }),
252-
// disabled: true,
253-
// },
245+
{
246+
key: '3',
247+
label: formatText({ id: 'actions.streamingPayment' }),
248+
onClick: () =>
249+
toggleActionSidebarOn({
250+
[ACTION_TYPE_FIELD_NAME]: Action.StreamingPayment,
251+
}),
252+
},
254253
// {
255254
// key: '4',
256255
// label: formatText({ id: 'actions.splitPayment' }),

‎src/components/v5/common/ActionSidebar/hooks/permissions/helpers.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export const getPermissionsNeededForAction = (
5050
case Action.EnterRecoveryMode:
5151
return [ColonyRole.Recovery];
5252
case Action.PaymentBuilder:
53+
case Action.StreamingPayment:
5354
return [ColonyRole.Administration];
5455
default:
5556
return undefined;

‎src/components/v5/common/ActionSidebar/hooks/useActionsList.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@ const useActionsList = () => {
3434
// label: { id: 'actions.stagedPayment' },
3535
// value: Action.StagedPayment,
3636
// },
37-
// {
38-
// label: { id: 'actions.streamingPayment' },
39-
// value: Action.StreamingPayment,
40-
// },
37+
{
38+
label: { id: 'actions.streamingPayment' },
39+
value: Action.StreamingPayment,
40+
},
4141
],
4242
},
4343
{

0 commit comments

Comments
 (0)