@transferwise/components 0.0.0-experimental-a213c0c → 0.0.0-experimental-ac06ea4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.js +1614 -1754
- package/build/index.js.map +1 -1
- package/build/index.mjs +1617 -1756
- package/build/index.mjs.map +1 -1
- package/build/main.css +0 -15
- package/build/styles/main.css +0 -15
- package/build/types/index.d.ts +0 -2
- package/build/types/index.d.ts.map +1 -1
- package/package.json +16 -16
- package/src/index.ts +0 -2
- package/src/main.css +0 -15
- package/src/main.less +0 -1
- package/build/styles/selectOption/SelectOption.css +0 -15
- package/build/types/selectOption/SelectOption.d.ts +0 -14
- package/build/types/selectOption/SelectOption.d.ts.map +0 -1
- package/build/types/selectOption/index.d.ts +0 -3
- package/build/types/selectOption/index.d.ts.map +0 -1
- package/src/selectOption/SelectOption.css +0 -15
- package/src/selectOption/SelectOption.less +0 -14
- package/src/selectOption/SelectOption.story.tsx +0 -29
- package/src/selectOption/SelectOption.tsx +0 -165
- package/src/selectOption/index.ts +0 -2
package/build/main.css
CHANGED
|
@@ -1349,21 +1349,6 @@ button.np-option {
|
|
|
1349
1349
|
border-radius: var(--radius-small);
|
|
1350
1350
|
}
|
|
1351
1351
|
}
|
|
1352
|
-
.np-select-option {
|
|
1353
|
-
background-color: rgba(134,167,189,0.10196);
|
|
1354
|
-
background-color: var(--color-background-neutral);
|
|
1355
|
-
}
|
|
1356
|
-
.np-select-option-selected {
|
|
1357
|
-
background-color: #ffffff;
|
|
1358
|
-
background-color: var(--color-background-screen);
|
|
1359
|
-
border-color: 1px solid #c9cbce;
|
|
1360
|
-
border-color: 1px solid var(--color-interactive-secondary);
|
|
1361
|
-
}
|
|
1362
|
-
.np-select-option-list {
|
|
1363
|
-
width: 500px;
|
|
1364
|
-
height: 500px;
|
|
1365
|
-
overflow-y: scroll;
|
|
1366
|
-
}
|
|
1367
1352
|
.np-panel__content {
|
|
1368
1353
|
opacity: 0;
|
|
1369
1354
|
visibility: hidden;
|
package/build/styles/main.css
CHANGED
|
@@ -1349,21 +1349,6 @@ button.np-option {
|
|
|
1349
1349
|
border-radius: var(--radius-small);
|
|
1350
1350
|
}
|
|
1351
1351
|
}
|
|
1352
|
-
.np-select-option {
|
|
1353
|
-
background-color: rgba(134,167,189,0.10196);
|
|
1354
|
-
background-color: var(--color-background-neutral);
|
|
1355
|
-
}
|
|
1356
|
-
.np-select-option-selected {
|
|
1357
|
-
background-color: #ffffff;
|
|
1358
|
-
background-color: var(--color-background-screen);
|
|
1359
|
-
border-color: 1px solid #c9cbce;
|
|
1360
|
-
border-color: 1px solid var(--color-interactive-secondary);
|
|
1361
|
-
}
|
|
1362
|
-
.np-select-option-list {
|
|
1363
|
-
width: 500px;
|
|
1364
|
-
height: 500px;
|
|
1365
|
-
overflow-y: scroll;
|
|
1366
|
-
}
|
|
1367
1352
|
.np-panel__content {
|
|
1368
1353
|
opacity: 0;
|
|
1369
1354
|
visibility: hidden;
|
package/build/types/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export type { AccordionItem, AccordionProps } from './accordion';
|
|
5
5
|
export type { ActionOptionProps } from './actionOption';
|
|
6
|
-
export type { SelectOptionProps } from './selectOption';
|
|
7
6
|
export type { AlertAction, AlertProps, AlertType } from './alert';
|
|
8
7
|
export type { AvatarProps } from './avatar';
|
|
9
8
|
export type { BadgeProps } from './badge';
|
|
@@ -58,7 +57,6 @@ export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/ty
|
|
|
58
57
|
export { default as Accordion } from './accordion';
|
|
59
58
|
export { default as ActionButton } from './actionButton';
|
|
60
59
|
export { default as ActionOption } from './actionOption';
|
|
61
|
-
export { default as SelectOption } from './selectOption';
|
|
62
60
|
export { default as Alert } from './alert';
|
|
63
61
|
export { default as Avatar } from './avatar';
|
|
64
62
|
export { default as AvatarWrapper } from './avatarWrapper';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-ac06ea4",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
"!**/*.tsbuildinfo"
|
|
39
39
|
],
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@babel/core": "^7.24.
|
|
42
|
-
"@babel/plugin-transform-runtime": "^7.24.
|
|
43
|
-
"@babel/preset-env": "^7.24.
|
|
44
|
-
"@babel/preset-react": "^7.24.
|
|
45
|
-
"@babel/preset-typescript": "^7.24.
|
|
46
|
-
"@formatjs/cli": "^6.2.
|
|
41
|
+
"@babel/core": "^7.24.6",
|
|
42
|
+
"@babel/plugin-transform-runtime": "^7.24.6",
|
|
43
|
+
"@babel/preset-env": "^7.24.6",
|
|
44
|
+
"@babel/preset-react": "^7.24.6",
|
|
45
|
+
"@babel/preset-typescript": "^7.24.6",
|
|
46
|
+
"@formatjs/cli": "^6.2.12",
|
|
47
47
|
"@rollup/plugin-babel": "^6.0.4",
|
|
48
48
|
"@rollup/plugin-json": "^6.1.0",
|
|
49
49
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@storybook/addon-actions": "^7.6.19",
|
|
54
54
|
"@storybook/addon-essentials": "^7.6.19",
|
|
55
55
|
"@storybook/addon-interactions": "^7.6.19",
|
|
56
|
-
"@storybook/addon-knobs": "^7.
|
|
56
|
+
"@storybook/addon-knobs": "^7.1.1",
|
|
57
57
|
"@storybook/addon-viewport": "^7.6.19",
|
|
58
58
|
"@storybook/addons": "^7.6.17",
|
|
59
59
|
"@storybook/api": "^7.6.17",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"@types/babel__core": "^7.20.5",
|
|
77
77
|
"@types/commonmark": "^0.27.9",
|
|
78
78
|
"@types/jest": "^29.5.12",
|
|
79
|
-
"@types/lodash": "4.17.
|
|
79
|
+
"@types/lodash": "4.17.4",
|
|
80
80
|
"@types/lodash.clamp": "^4.0.9",
|
|
81
81
|
"@types/lodash.debounce": "^4.0.9",
|
|
82
82
|
"@types/react": "^17.0.80",
|
|
@@ -86,15 +86,15 @@
|
|
|
86
86
|
"@types/use-sync-external-store": "^0.0.6",
|
|
87
87
|
"@wise/art": "^2.7.0",
|
|
88
88
|
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
|
|
89
|
-
"babel-plugin-formatjs": "^10.5.
|
|
89
|
+
"babel-plugin-formatjs": "^10.5.16",
|
|
90
90
|
"babel-plugin-inline-react-svg": "^2.0.2",
|
|
91
91
|
"enzyme": "^3.11.0",
|
|
92
92
|
"jest": "^29.7.0",
|
|
93
93
|
"jest-environment-jsdom": "^29.7.0",
|
|
94
94
|
"jest-fetch-mock": "^3.0.3",
|
|
95
95
|
"lodash.times": "^4.3.2",
|
|
96
|
-
"react-intl": "^6.6.
|
|
97
|
-
"rollup": "^4.
|
|
96
|
+
"react-intl": "^6.6.8",
|
|
97
|
+
"rollup": "^4.18.0",
|
|
98
98
|
"storybook": "^7.6.19",
|
|
99
99
|
"@transferwise/less-config": "3.1.0",
|
|
100
100
|
"@transferwise/neptune-css": "14.10.0",
|
|
@@ -110,14 +110,14 @@
|
|
|
110
110
|
"react-intl": "^5.10.0 || ^6"
|
|
111
111
|
},
|
|
112
112
|
"dependencies": {
|
|
113
|
-
"@babel/runtime": "^7.24.
|
|
113
|
+
"@babel/runtime": "^7.24.6",
|
|
114
114
|
"@floating-ui/react": "^0.25.4",
|
|
115
|
-
"@formatjs/intl-locale": "^3.4.
|
|
115
|
+
"@formatjs/intl-locale": "^3.4.6",
|
|
116
116
|
"@headlessui/react": "^1.7.19",
|
|
117
117
|
"@popperjs/core": "^2.11.8",
|
|
118
118
|
"@radix-ui/react-id": "^1.0.1",
|
|
119
|
-
"@react-aria/focus": "^3.17.
|
|
120
|
-
"@react-aria/overlays": "^3.22.
|
|
119
|
+
"@react-aria/focus": "^3.17.1",
|
|
120
|
+
"@react-aria/overlays": "^3.22.1",
|
|
121
121
|
"@react-spring/web": "~9.7.3",
|
|
122
122
|
"@transferwise/formatting": "^2.13.0",
|
|
123
123
|
"@transferwise/neptune-validation": "^3.3.0",
|
package/src/index.ts
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export type { AccordionItem, AccordionProps } from './accordion';
|
|
5
5
|
export type { ActionOptionProps } from './actionOption';
|
|
6
|
-
export type { SelectOptionProps } from './selectOption';
|
|
7
6
|
export type { AlertAction, AlertProps, AlertType } from './alert';
|
|
8
7
|
export type { AvatarProps } from './avatar';
|
|
9
8
|
export type { BadgeProps } from './badge';
|
|
@@ -79,7 +78,6 @@ export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/ty
|
|
|
79
78
|
export { default as Accordion } from './accordion';
|
|
80
79
|
export { default as ActionButton } from './actionButton';
|
|
81
80
|
export { default as ActionOption } from './actionOption';
|
|
82
|
-
export { default as SelectOption } from './selectOption';
|
|
83
81
|
export { default as Alert } from './alert';
|
|
84
82
|
export { default as Avatar } from './avatar';
|
|
85
83
|
export { default as AvatarWrapper } from './avatarWrapper';
|
package/src/main.css
CHANGED
|
@@ -1349,21 +1349,6 @@ button.np-option {
|
|
|
1349
1349
|
border-radius: var(--radius-small);
|
|
1350
1350
|
}
|
|
1351
1351
|
}
|
|
1352
|
-
.np-select-option {
|
|
1353
|
-
background-color: rgba(134,167,189,0.10196);
|
|
1354
|
-
background-color: var(--color-background-neutral);
|
|
1355
|
-
}
|
|
1356
|
-
.np-select-option-selected {
|
|
1357
|
-
background-color: #ffffff;
|
|
1358
|
-
background-color: var(--color-background-screen);
|
|
1359
|
-
border-color: 1px solid #c9cbce;
|
|
1360
|
-
border-color: 1px solid var(--color-interactive-secondary);
|
|
1361
|
-
}
|
|
1362
|
-
.np-select-option-list {
|
|
1363
|
-
width: 500px;
|
|
1364
|
-
height: 500px;
|
|
1365
|
-
overflow-y: scroll;
|
|
1366
|
-
}
|
|
1367
1352
|
.np-panel__content {
|
|
1368
1353
|
opacity: 0;
|
|
1369
1354
|
visibility: hidden;
|
package/src/main.less
CHANGED
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
@import "./common/card/Card.less";
|
|
13
13
|
@import "./common/closeButton/CloseButton.less";
|
|
14
14
|
@import "./common/Option/Option.less";
|
|
15
|
-
@import "./selectOption/SelectOption.less";
|
|
16
15
|
@import "./common/panel/Panel.less";
|
|
17
16
|
@import "./common/RadioButton/RadioButton.less";
|
|
18
17
|
@import "./dateInput/DateInput.less";
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
.np-select-option {
|
|
2
|
-
background-color: rgba(134,167,189,0.10196);
|
|
3
|
-
background-color: var(--color-background-neutral);
|
|
4
|
-
}
|
|
5
|
-
.np-select-option-selected {
|
|
6
|
-
background-color: #ffffff;
|
|
7
|
-
background-color: var(--color-background-screen);
|
|
8
|
-
border-color: 1px solid #c9cbce;
|
|
9
|
-
border-color: 1px solid var(--color-interactive-secondary);
|
|
10
|
-
}
|
|
11
|
-
.np-select-option-list {
|
|
12
|
-
width: 500px;
|
|
13
|
-
height: 500px;
|
|
14
|
-
overflow-y: scroll;
|
|
15
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import type { OptionProps } from '../common/Option/Option';
|
|
3
|
-
export type SelectOptionValue = {
|
|
4
|
-
media: ReactNode;
|
|
5
|
-
title: ReactNode;
|
|
6
|
-
content?: ReactNode;
|
|
7
|
-
};
|
|
8
|
-
export type SelectOptionProps = {
|
|
9
|
-
onClick?: () => void;
|
|
10
|
-
selected?: SelectOptionValue;
|
|
11
|
-
options: SelectOptionValue[];
|
|
12
|
-
} & Omit<OptionProps, 'as'>;
|
|
13
|
-
export default function SelectOption({ selected: selectedValueProp, ...props }: SelectOptionProps): import("react").JSX.Element;
|
|
14
|
-
//# sourceMappingURL=SelectOption.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAU3D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAC9B,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EAAE,iBAA6B,EACvC,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAsInB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/selectOption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
.np-select-option {
|
|
2
|
-
background-color: rgba(134,167,189,0.10196);
|
|
3
|
-
background-color: var(--color-background-neutral);
|
|
4
|
-
}
|
|
5
|
-
.np-select-option-selected {
|
|
6
|
-
background-color: #ffffff;
|
|
7
|
-
background-color: var(--color-background-screen);
|
|
8
|
-
border-color: 1px solid #c9cbce;
|
|
9
|
-
border-color: 1px solid var(--color-interactive-secondary);
|
|
10
|
-
}
|
|
11
|
-
.np-select-option-list {
|
|
12
|
-
width: 500px;
|
|
13
|
-
height: 500px;
|
|
14
|
-
overflow-y: scroll;
|
|
15
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
.np-select-option {
|
|
2
|
-
background-color: var(--color-background-neutral);
|
|
3
|
-
|
|
4
|
-
&-selected {
|
|
5
|
-
background-color: var(--color-background-screen);
|
|
6
|
-
border-color: 1px solid var(--color-interactive-secondary);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
&-list {
|
|
10
|
-
width: 500px;
|
|
11
|
-
height: 500px;
|
|
12
|
-
overflow-y: scroll;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from '@storybook/react';
|
|
2
|
-
import SelectOption from './SelectOption';
|
|
3
|
-
import { lorem10 } from '../test-utils';
|
|
4
|
-
import AvatarWrapper from '../avatarWrapper';
|
|
5
|
-
import { Plus } from '@transferwise/icons';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Option/SelectOption',
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
type Story = StoryObj<typeof SelectOption>;
|
|
12
|
-
|
|
13
|
-
const imgUrl =
|
|
14
|
-
'https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/9f/28/f2/9f28f299-8b30-18cb-1099-3e927f401f64/AppIcon-0-0-1x_U007emarketing-0-5-0-85-220.png/460x0w.webp';
|
|
15
|
-
|
|
16
|
-
export const Basic: Story = {
|
|
17
|
-
render: (args) => (
|
|
18
|
-
<div className="row">
|
|
19
|
-
<div className="col-md-6 col-md-offset-3">
|
|
20
|
-
<SelectOption
|
|
21
|
-
// media={<AvatarWrapper url={imgUrl} />}
|
|
22
|
-
media={<Plus size={24} />}
|
|
23
|
-
options={[]}
|
|
24
|
-
title="No method selected"
|
|
25
|
-
/>
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
),
|
|
29
|
-
};
|
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
import { useRef, useState, ReactNode } from 'react';
|
|
2
|
-
import ActionButton from '../actionButton';
|
|
3
|
-
import Chevron from '../chevron';
|
|
4
|
-
import classNames from 'classnames';
|
|
5
|
-
import Option from '../common/Option';
|
|
6
|
-
import type { OptionProps } from '../common/Option/Option';
|
|
7
|
-
import Panel from '../common/panel/Panel';
|
|
8
|
-
import { Position } from '../common';
|
|
9
|
-
import Section from '../section';
|
|
10
|
-
import Header from '../header';
|
|
11
|
-
import { Bank, BankTransfer, Card } from '@transferwise/icons';
|
|
12
|
-
import { Flag } from '@wise/art';
|
|
13
|
-
import { useLayout } from '../common/hooks';
|
|
14
|
-
import BottomSheet from '../common/bottomSheet';
|
|
15
|
-
|
|
16
|
-
export type SelectOptionValue = {
|
|
17
|
-
media: ReactNode;
|
|
18
|
-
title: ReactNode;
|
|
19
|
-
content?: ReactNode;
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export type SelectOptionProps = {
|
|
23
|
-
onClick?: () => void;
|
|
24
|
-
selected?: SelectOptionValue;
|
|
25
|
-
options: SelectOptionValue[];
|
|
26
|
-
} & Omit<OptionProps, 'as'>;
|
|
27
|
-
|
|
28
|
-
export default function SelectOption({
|
|
29
|
-
selected: selectedValueProp = undefined,
|
|
30
|
-
...props
|
|
31
|
-
}: SelectOptionProps) {
|
|
32
|
-
const rootRef = useRef(null);
|
|
33
|
-
const [selected, setSelected] = useState(selectedValueProp);
|
|
34
|
-
const [showMenu, setShowMenu] = useState(false);
|
|
35
|
-
function handleOnClick(status: boolean) {
|
|
36
|
-
return () => {
|
|
37
|
-
console.log('handleOnClick', status);
|
|
38
|
-
setShowMenu(status);
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
function handleOnSelect(data: SelectOptionValue) {
|
|
42
|
-
return () => {
|
|
43
|
-
setShowMenu(false);
|
|
44
|
-
setSelected(data);
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
const isSelected = selected !== undefined;
|
|
48
|
-
const { isMobile } = useLayout();
|
|
49
|
-
const options = (
|
|
50
|
-
<Section>
|
|
51
|
-
<Header title="Payment Methods" />
|
|
52
|
-
<Option
|
|
53
|
-
showMediaAtAllSizes
|
|
54
|
-
media={<Flag code="gbp" />}
|
|
55
|
-
title="Wise GBP balance"
|
|
56
|
-
content={
|
|
57
|
-
<>
|
|
58
|
-
<span>300 GBP available</span>
|
|
59
|
-
<span>0 GBP in fees, should arrive in seconds</span>
|
|
60
|
-
</>
|
|
61
|
-
}
|
|
62
|
-
onClick={handleOnSelect({
|
|
63
|
-
media: <Flag code="gbp" />,
|
|
64
|
-
title: 'Wise GBP balance',
|
|
65
|
-
})}
|
|
66
|
-
/>
|
|
67
|
-
<Option
|
|
68
|
-
media={<Card />}
|
|
69
|
-
title="Credit card"
|
|
70
|
-
content={
|
|
71
|
-
<>
|
|
72
|
-
<div>Transfer the money to Wise using your bank account.</div>
|
|
73
|
-
<div>0.32 GBP in fees, should arrive in seconds</div>
|
|
74
|
-
</>
|
|
75
|
-
}
|
|
76
|
-
onClick={handleOnSelect({
|
|
77
|
-
media: <Card />,
|
|
78
|
-
title: 'Credit card',
|
|
79
|
-
content: 'Pay with your credit card',
|
|
80
|
-
})}
|
|
81
|
-
/>
|
|
82
|
-
<Option
|
|
83
|
-
media={<Card />}
|
|
84
|
-
title="Debit card"
|
|
85
|
-
content={
|
|
86
|
-
<>
|
|
87
|
-
<span>Send from your Visa or Mastercard.</span>
|
|
88
|
-
<span>0.74 GBP in fees, should arrive in seconds</span>
|
|
89
|
-
</>
|
|
90
|
-
}
|
|
91
|
-
onClick={handleOnSelect({
|
|
92
|
-
media: <Card />,
|
|
93
|
-
title: 'Debit card',
|
|
94
|
-
content: 'Pay with your debit card',
|
|
95
|
-
})}
|
|
96
|
-
/>
|
|
97
|
-
<Option
|
|
98
|
-
media={<Bank />}
|
|
99
|
-
title="Swift Transfer"
|
|
100
|
-
content={
|
|
101
|
-
<>
|
|
102
|
-
<span>Send money internationally. Your bank will charge you extra fees.</span>
|
|
103
|
-
<span>0.32 GBP in fees, should arrive by Thursday</span>
|
|
104
|
-
</>
|
|
105
|
-
}
|
|
106
|
-
/>
|
|
107
|
-
<Option
|
|
108
|
-
media={<BankTransfer />}
|
|
109
|
-
title="Bank Transfer"
|
|
110
|
-
content={
|
|
111
|
-
<>
|
|
112
|
-
<span>Transfer the money to Wise using your bank account.</span>
|
|
113
|
-
<span>0.32 GBP in fees, should arrive in seconds</span>
|
|
114
|
-
</>
|
|
115
|
-
}
|
|
116
|
-
/>
|
|
117
|
-
<Option media={<Card />} title="Debit card" />
|
|
118
|
-
<Option media={<Bank />} title="Swift" />
|
|
119
|
-
<Option media={<BankTransfer />} title="Bank Transfer" />
|
|
120
|
-
</Section>
|
|
121
|
-
);
|
|
122
|
-
return (
|
|
123
|
-
<>
|
|
124
|
-
<Option
|
|
125
|
-
ref={rootRef}
|
|
126
|
-
media={isSelected ? selected.media : props.media}
|
|
127
|
-
title={isSelected ? selected.title : props.title}
|
|
128
|
-
content={isSelected ? selected.content : props.content}
|
|
129
|
-
className={classNames(
|
|
130
|
-
'np-select-option',
|
|
131
|
-
{ 'np-select-option-selected': isSelected },
|
|
132
|
-
props.className,
|
|
133
|
-
)}
|
|
134
|
-
button={
|
|
135
|
-
isSelected ? (
|
|
136
|
-
<Chevron />
|
|
137
|
-
) : (
|
|
138
|
-
<ActionButton onClick={handleOnClick(true)}>Choose</ActionButton>
|
|
139
|
-
)
|
|
140
|
-
}
|
|
141
|
-
onClick={isSelected ? handleOnClick(true) : undefined}
|
|
142
|
-
/>
|
|
143
|
-
{isMobile ? (
|
|
144
|
-
<BottomSheet open={showMenu} onClose={handleOnClick(false)}>
|
|
145
|
-
{options}
|
|
146
|
-
</BottomSheet>
|
|
147
|
-
) : (
|
|
148
|
-
<Panel
|
|
149
|
-
open={showMenu}
|
|
150
|
-
flip={false}
|
|
151
|
-
altAxis
|
|
152
|
-
anchorRef={rootRef}
|
|
153
|
-
anchorWidth={false}
|
|
154
|
-
position={Position.BOTTOM}
|
|
155
|
-
onClose={handleOnClick(false)}
|
|
156
|
-
>
|
|
157
|
-
<div className="np-select-option-list p-a-2">
|
|
158
|
-
{/* <Title type={Typography.TITLE_SUBSECTION}>How would you like to pay?</Title> */}
|
|
159
|
-
{options}
|
|
160
|
-
</div>
|
|
161
|
-
</Panel>
|
|
162
|
-
)}
|
|
163
|
-
</>
|
|
164
|
-
);
|
|
165
|
-
}
|