diff --git a/src/components/molecules/FormFields/Price/Advanced.module.css b/src/components/molecules/FormFields/Price/Advanced.module.css
new file mode 100644
index 000000000..30d90102e
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Advanced.module.css
@@ -0,0 +1,9 @@
+.advancedInput {
+ display: flex;
+ gap: calc(var(--spacer) / 2);
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.advancedInput label {
+}
diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx
new file mode 100644
index 000000000..0120df47d
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Advanced.tsx
@@ -0,0 +1,27 @@
+import React, { ReactElement } from 'react'
+import { InputProps } from '../../../atoms/Input'
+import InputElement from '../../../atoms/Input/InputElement'
+import stylesIndex from './index.module.css'
+import styles from './Advanced.module.css'
+import Label from '../../../atoms/Input/Label'
+import { MetadataPublishForm } from '../../../../@types/MetaData'
+import Cost from './Cost'
+
+export default function Advanced(props: InputProps): ReactElement {
+ const { price } = props.form.values as MetadataPublishForm
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/molecules/FormFields/Price/Cost.module.css b/src/components/molecules/FormFields/Price/Cost.module.css
new file mode 100644
index 000000000..3d0131835
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Cost.module.css
@@ -0,0 +1,28 @@
+.cost {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.cost label {
+ width: 100%;
+}
+
+.cost input {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.prefix {
+ border: 1px solid var(--brand-grey-lighter);
+ min-height: 43px;
+ display: flex;
+ align-items: center;
+ padding-left: calc(var(--spacer) / 2);
+ padding-right: calc(var(--spacer) / 2);
+ color: var(--color-secondary);
+ font-size: var(--font-size-small);
+ margin-right: -2px;
+ border-top-left-radius: var(--border-radius);
+ border-bottom-left-radius: var(--border-radius);
+}
diff --git a/src/components/molecules/FormFields/Price/Cost.tsx b/src/components/molecules/FormFields/Price/Cost.tsx
new file mode 100644
index 000000000..c23b82785
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Cost.tsx
@@ -0,0 +1,26 @@
+import React, { ReactElement } from 'react'
+import InputElement from '../../../atoms/Input/InputElement'
+import styles from './Cost.module.css'
+import { MetadataPublishForm } from '../../../../@types/MetaData'
+import Conversion from '../../../atoms/Price/Conversion'
+import { InputProps } from '../../../atoms/Input'
+import Label from '../../../atoms/Input/Label'
+
+export default function Cost(props: InputProps): ReactElement {
+ const { price } = props.form.values as MetadataPublishForm
+
+ return (
+
+ )
+}
diff --git a/src/components/molecules/FormFields/Price/Simple.module.css b/src/components/molecules/FormFields/Price/Simple.module.css
new file mode 100644
index 000000000..200a835cf
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Simple.module.css
@@ -0,0 +1,12 @@
+.simple {
+ margin-bottom: calc(var(--spacer) / 2);
+ text-align: center;
+}
+
+.simple > div {
+ justify-content: center;
+}
+
+.simple label {
+ display: none;
+}
diff --git a/src/components/molecules/FormFields/Price/Simple.tsx b/src/components/molecules/FormFields/Price/Simple.tsx
new file mode 100644
index 000000000..8be0f36f4
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Simple.tsx
@@ -0,0 +1,17 @@
+import React, { ReactElement } from 'react'
+import stylesIndex from './index.module.css'
+import styles from './Simple.module.css'
+import FormHelp from '../../../atoms/Input/Help'
+import { InputProps } from '../../../atoms/Input'
+import Cost from './Cost'
+
+export default function Simple(props: InputProps): ReactElement {
+ return (
+
+
+
+
+ {props.help &&
{props.help}}
+
+ )
+}
diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css
index 7ad682b21..90024ce6a 100644
--- a/src/components/molecules/FormFields/Price/index.module.css
+++ b/src/components/molecules/FormFields/Price/index.module.css
@@ -6,7 +6,6 @@
.content {
padding: 0 calc(var(--spacer) / 2);
- text-align: center;
}
.content label {
@@ -21,35 +20,3 @@
.content p {
margin-bottom: 0;
}
-
-.simpleInput {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-bottom: calc(var(--spacer) / 2);
-}
-
-.simpleInput input {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
-}
-
-.prefix {
- border: 1px solid var(--brand-grey-lighter);
- min-height: 43px;
- display: flex;
- align-items: center;
- padding-left: calc(var(--spacer) / 2);
- padding-right: calc(var(--spacer) / 2);
- color: var(--color-secondary);
- font-size: var(--font-size-small);
- margin-right: -2px;
- border-top-left-radius: var(--border-radius);
- border-bottom-left-radius: var(--border-radius);
-}
-
-.advancedInput {
- display: flex;
- gap: calc(var(--spacer) / 2);
- justify-content: center;
-}
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index f5dc9fbf3..747a3da8f 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -1,78 +1,14 @@
import React, { ReactElement } from 'react'
import { InputProps } from '../../../atoms/Input'
-import InputElement from '../../../atoms/Input/InputElement'
import styles from './index.module.css'
-import Label from '../../../atoms/Input/Label'
-import { useFormikContext } from 'formik'
-import { MetadataPublishForm } from '../../../../@types/MetaData'
import Tabs from '../../../atoms/Tabs'
-import FormHelp from '../../../atoms/Input/Help'
-import Conversion from '../../../atoms/Price/Conversion'
+import Simple from './Simple'
+import Advanced from './Advanced'
export default function Price(props: InputProps): ReactElement {
- const { values } = useFormikContext()
-
- const Simple = (
-
-
- {/*
*/}
-
OCEAN
-
-
-
-
{props.help}
-
- )
-
- const Advanced = (
-
-
-
-
-
-
-
-
-
-
- )
-
const tabs = [
- {
- title: 'Simple',
- content: Simple
- },
- {
- title: 'Advanced',
- content: Advanced
- }
+ { title: 'Simple', content: },
+ { title: 'Advanced', content: }
]
return (