diff --git a/src/app/ui-kit/form-components/Checkbox/Checkbox.tsx b/src/app/ui-kit/form-components/Checkbox/Checkbox.tsx index eba81044..30a28e8d 100644 --- a/src/app/ui-kit/form-components/Checkbox/Checkbox.tsx +++ b/src/app/ui-kit/form-components/Checkbox/Checkbox.tsx @@ -10,7 +10,7 @@ import { uniqueId } from "lodash" const Container = styled.div` height: 24px; - font-size: 14px; + font-size: 13px; display: flex; -webkit-app-region: no-drag; ` diff --git a/src/app/views/consumer/Topup/coingate/CoingatePaymentOptions.tsx b/src/app/views/consumer/Topup/coingate/CoingatePaymentOptions.tsx index cab30210..8e5a6a57 100644 --- a/src/app/views/consumer/Topup/coingate/CoingatePaymentOptions.tsx +++ b/src/app/views/consumer/Topup/coingate/CoingatePaymentOptions.tsx @@ -22,8 +22,7 @@ import { ViewSidebar } from "../../../../navigation/components/ViewSidebar/ViewS import { ViewContent } from "../../../../navigation/components/ViewContent/ViewContent" import { IconWallet } from "../../../../ui-kit/icons/IconWallet" import { Heading2, Paragraph, Small } from "../../../../ui-kit/typography" -import { brandLight, lightBlue } from "../../../../ui-kit/colors" -import { Toggle } from "../../../../ui-kit/components/Toggle/Toggle" +import { brandLight } from "../../../../ui-kit/colors" import { isLightningAvailable } from "../../../../payment/currency" import { Checkbox } from "../../../../ui-kit/form-components/Checkbox/Checkbox" import { StepProgressBar } from "../../../../ui-kit/components/StepProgressBar/StepProgressBar" @@ -32,6 +31,11 @@ import { CryptoAnimation } from "../../../../ui-kit/components/CryptoAnimation/C import { parseError } from "../../../../../shared/errors/parseError" import { logErrorMessage } from "../../../../../shared/log/log" import { dismissibleToast } from "../../../../ui-kit/components/dismissibleToast" +import { Select } from "../../../../ui-kit/form-components/Select" +import { SelectTaxCountry } from "../../../../payment/components/SelectTaxCountry/SelectTaxCountry" +import { SelectTaxState } from "../../../../payment/components/SelectTaxState/SelectTaxState" +import { OptionValue } from "../common/OptionValue" +import { OptionLabel } from "../common/OptionLabel" const SideTop = styled.div` box-sizing: border-box; @@ -59,20 +63,6 @@ const Title = styled(Heading2)` const TitleDescription = styled(Small)`` -const OptionToggleGrid = styled.div` - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 10px; - margin-bottom: 20px; -` - -const OptionToggle = styled(Toggle)` - width: 85px; - height: 36px; -` - -const OptionValue = styled(Heading2)`` - const LightningCheckbox = styled(Checkbox)`` export const CoingatePaymentOptions: React.FC = observer(() => { @@ -80,12 +70,6 @@ export const CoingatePaymentOptions: React.FC = observer(() => { const navigate = useNavigate() const [loading, setLoading] = useState(false) - const isOptionActive = (cur: string) => { - return payment.paymentCurrency == cur - } - const selectOption = (cur: string) => () => { - payment.setPaymentCurrency(cur) - } const setUseLightning = (): void => { const val = !payment.lightningNetwork payment.setLightningNetwork(val) @@ -105,7 +89,8 @@ export const CoingatePaymentOptions: React.FC = observer(() => { } } const options = payment.paymentMethod?.gatewayData.currencies.filter((it) => it !== Currency.MYST) || [] - const paymentOptionsOK = !loading && payment.paymentCurrency + const usPaymentOptionsOK = payment.taxCountry === "US" ? payment.taxState : true + const paymentOptionsOK = !loading && payment.paymentCurrency && payment.taxCountry && usPaymentOptionsOK return ( navigate(-1)}> @@ -118,29 +103,45 @@ export const CoingatePaymentOptions: React.FC = observer(() => { Top up your account - Select the cryptocurrency in which the top-up will be done + Select the payment options - - {options.map((opt) => ( - -
- {opt} -
-
- ))} -
+ {payment.paymentCurrency !== Currency.MYST && ( + <> + Payment currency + + + + + )} {isLightningAvailable(payment.paymentCurrency) && ( - - Use lightning network - + + + Use lightning network + + + )} + Tax residence: Country + + + + {payment.taxCountry === "US" && ( + <> + Tax residence: State + + + + )} {payment.paymentCurrency == Currency.MYST && ( diff --git a/src/app/views/consumer/Topup/common/OptionLabel.tsx b/src/app/views/consumer/Topup/common/OptionLabel.tsx new file mode 100644 index 00000000..068690d3 --- /dev/null +++ b/src/app/views/consumer/Topup/common/OptionLabel.tsx @@ -0,0 +1,18 @@ +/** + * Copyright (c) 2022 BlockDev AG + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import styled from "styled-components" +import React, { PropsWithChildren } from "react" + +import { Paragraph } from "../../../../ui-kit/typography" + +const Container = styled(Paragraph)` + margin-bottom: 5px; + text-align: left; + font-size: 13px; +` + +export const OptionLabel: React.FC = ({ children }) => {children} diff --git a/src/app/views/consumer/Topup/common/OptionValue.tsx b/src/app/views/consumer/Topup/common/OptionValue.tsx new file mode 100644 index 00000000..d1d81f63 --- /dev/null +++ b/src/app/views/consumer/Topup/common/OptionValue.tsx @@ -0,0 +1,13 @@ +/** + * Copyright (c) 2022 BlockDev AG + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import styled from "styled-components" +import React, { PropsWithChildren } from "react" + +const Container = styled.div` + margin-bottom: 15px; +` +export const OptionValue: React.FC = ({ children }) => {children} diff --git a/src/app/views/consumer/Topup/myst/MystSelectAmount.tsx b/src/app/views/consumer/Topup/myst/MystSelectAmount.tsx index c73600f2..2fbfb010 100644 --- a/src/app/views/consumer/Topup/myst/MystSelectAmount.tsx +++ b/src/app/views/consumer/Topup/myst/MystSelectAmount.tsx @@ -8,7 +8,6 @@ import React, { useEffect, useState } from "react" import { observer } from "mobx-react-lite" import styled from "styled-components" import { EntertainmentEstimateResponse } from "mysterium-vpn-js" -import { toast } from "react-hot-toast" import { useNavigate } from "react-router-dom" import { useStores } from "../../../../store" @@ -28,9 +27,6 @@ import { IconMusic } from "../../../../ui-kit/icons/IconMusic" import { IconCloudDownload } from "../../../../ui-kit/icons/IconCloudDownload" import { IconDocument } from "../../../../ui-kit/icons/IconDocument" import { topupSteps } from "../../../../navigation/locations" -import { parseError } from "../../../../../shared/errors/parseError" -import { logErrorMessage } from "../../../../../shared/log/log" -import { dismissibleToast } from "../../../../ui-kit/components/dismissibleToast" const SideTop = styled.div` box-sizing: border-box; @@ -115,7 +111,6 @@ const EntertainmentExplanation = styled(Paragraph)` export const MystSelectAmount: React.FC = observer(() => { const { payment } = useStores() const navigate = useNavigate() - const [loading, setLoading] = useState(false) const isOptionActive = (amt: number) => { return payment.topUpAmountUSD == amt } @@ -129,17 +124,7 @@ export const MystSelectAmount: React.FC = observer(() => { } }, [payment.topUpAmountUSD]) const handleNextClick = async () => { - setLoading(() => true) - try { - await payment.createOrder() - setLoading(() => false) - navigate("../" + topupSteps.coingateOrderSummary) - } catch (err) { - setLoading(() => false) - const msg = parseError(err) - logErrorMessage("Could not create a payment order", msg) - toast.error(dismissibleToast({msg.humanReadable})) - } + navigate("../" + topupSteps.coingatePaymentOptions) } return ( @@ -176,8 +161,7 @@ export const MystSelectAmount: React.FC = observer(() => { Next diff --git a/src/app/views/consumer/Topup/paypal/PaypalPaymentOptions.tsx b/src/app/views/consumer/Topup/paypal/PaypalPaymentOptions.tsx index 7e818ea0..ba4f8e0a 100644 --- a/src/app/views/consumer/Topup/paypal/PaypalPaymentOptions.tsx +++ b/src/app/views/consumer/Topup/paypal/PaypalPaymentOptions.tsx @@ -30,6 +30,8 @@ import { logErrorMessage } from "../../../../../shared/log/log" import { dismissibleToast } from "../../../../ui-kit/components/dismissibleToast" import { SelectTaxCountry } from "../../../../payment/components/SelectTaxCountry/SelectTaxCountry" import { SelectTaxState } from "../../../../payment/components/SelectTaxState/SelectTaxState" +import { OptionLabel } from "../common/OptionLabel" +import { OptionValue } from "../common/OptionValue" const SideTop = styled.div` box-sizing: border-box; @@ -69,15 +71,6 @@ const OptionToggle = styled(Toggle)` height: 36px; ` -const OptionValue = styled.div` - margin-bottom: 10px; -` - -const OptionLabel = styled(Small)` - margin-bottom: 5px; - text-align: left; -` - export const PaypalPaymentOptions: React.FC = observer(() => { const { payment } = useStores() const navigate = useNavigate() diff --git a/src/app/views/consumer/Topup/stripe/StripePaymentOptions.tsx b/src/app/views/consumer/Topup/stripe/StripePaymentOptions.tsx index 5bb70900..3cb7293b 100644 --- a/src/app/views/consumer/Topup/stripe/StripePaymentOptions.tsx +++ b/src/app/views/consumer/Topup/stripe/StripePaymentOptions.tsx @@ -30,6 +30,8 @@ import { logErrorMessage } from "../../../../../shared/log/log" import { dismissibleToast } from "../../../../ui-kit/components/dismissibleToast" import { SelectTaxCountry } from "../../../../payment/components/SelectTaxCountry/SelectTaxCountry" import { SelectTaxState } from "../../../../payment/components/SelectTaxState/SelectTaxState" +import { OptionLabel } from "../common/OptionLabel" +import { OptionValue } from "../common/OptionValue" const SideTop = styled.div` box-sizing: border-box; @@ -69,15 +71,6 @@ const OptionToggle = styled(Toggle)` height: 36px; ` -const OptionValue = styled.div` - margin-bottom: 10px; -` - -const OptionLabel = styled(Small)` - margin-bottom: 5px; - text-align: left; -` - export const StripePaymentOptions: React.FC = observer(() => { const { payment } = useStores() const navigate = useNavigate()