Merge pull request #381 from mysteriumnetwork/tax-country-all-payment…

…-methods

Ask for tax country/state in all payment methods

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;
 `

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,33 +63,13 @@ 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(() => {
     const { payment } = useStores()
     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 (
         <ViewContainer>
             <ViewNavBar onBack={() => navigate(-1)}>
@@ -118,29 +103,45 @@ export const CoingatePaymentOptions: React.FC = observer(() => {
                     <SideTop>
                         <IconWallet color={brandLight} />
                         <Title>Top up your account</Title>
-                        <TitleDescription>Select the cryptocurrency in which the top-up will be done</TitleDescription>
+                        <TitleDescription>Select the payment options</TitleDescription>
                     </SideTop>
                     <SideBot>
-                        <OptionToggleGrid>
-                            {options.map((opt) => (
-                                <OptionToggle
-                                    key={opt}
-                                    active={isOptionActive(opt)}
-                                    onClick={selectOption(opt)}
-                                    inactiveColor={lightBlue}
-                                    height="36px"
-                                    justify="center"
-                                >
-                                    <div style={{ textAlign: "center" }}>
-                                        <OptionValue>{opt}</OptionValue>
-                                    </div>
-                                </OptionToggle>
-                            ))}
-                        </OptionToggleGrid>
+                        {payment.paymentCurrency !== Currency.MYST && (
+                            <>
+                                <OptionLabel>Payment currency</OptionLabel>
+                                <OptionValue>
+                                    <Select
+                                        value={payment.paymentCurrency}
+                                        onChange={(event) => payment.setPaymentCurrency(event.target.value)}
+                                    >
+                                        <option key="" value=""></option>
+                                        {options.map((opt) => (
+                                            <option key={opt} value={opt}>
+                                                {opt}
+                                            </option>
+                                        ))}
+                                    </Select>
+                                </OptionValue>
+                            </>
+                        )}
                         {isLightningAvailable(payment.paymentCurrency) && (
-                            <LightningCheckbox checked={payment.lightningNetwork} onChange={setUseLightning}>
-                                Use lightning network
-                            </LightningCheckbox>
+                            <OptionValue>
+                                <LightningCheckbox checked={payment.lightningNetwork} onChange={setUseLightning}>
+                                    Use lightning network
+                                </LightningCheckbox>
+                            </OptionValue>
+                        )}
+                        <OptionLabel>Tax residence: Country</OptionLabel>
+                        <OptionValue>
+                            <SelectTaxCountry />
+                        </OptionValue>
+                        {payment.taxCountry === "US" && (
+                            <>
+                                <OptionLabel>Tax residence: State</OptionLabel>
+                                <OptionValue>
+                                    <SelectTaxState />
+                                </OptionValue>
+                            </>
                         )}
                         {payment.paymentCurrency == Currency.MYST && (
                             <Paragraph style={{ color: "red" }}>

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<PropsWithChildren> = ({ children }) => <Container>{children}</Container>

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<PropsWithChildren> = ({ children }) => <Container>{children}</Container>

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(<span>{msg.humanReadable}</span>))
-        }
+        navigate("../" + topupSteps.coingatePaymentOptions)
     }
     return (
         <ViewContainer>
@@ -176,8 +161,7 @@ export const MystSelectAmount: React.FC = observer(() => {
                         <BrandButton
                             style={{ marginTop: "auto" }}
                             onClick={handleNextClick}
-                            disabled={!payment.topUpAmountUSD || loading}
-                            loading={loading}
+                            disabled={!payment.topUpAmountUSD}
                         >
                             Next
                         </BrandButton>

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()

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()