From 7ce6df35229a4a633c70bea4c55bbbfe6dd9a232 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Thu, 23 Sep 2021 23:37:06 +0600 Subject: [PATCH 01/14] adding setup intents --- packages/files-ui/package.json | 4 +- .../Settings/SubscriptionTab/CurrentCard.tsx | 16 +- .../SubscriptionTab/NewAddCardModal.tsx | 232 ++++++++++++++++++ yarn.lock | 163 ++++++++---- 4 files changed, 364 insertions(+), 51 deletions(-) create mode 100644 packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/NewAddCardModal.tsx diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index 96fbb82068..9e8508921e 100644 --- a/packages/files-ui/package.json +++ b/packages/files-ui/package.json @@ -6,12 +6,14 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "^1.18.5", + "@chainsafe/files-api-client": "^1.18.9", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", "@material-ui/core": "^4.12.3", "@sentry/react": "^5.28.0", + "@stripe/react-stripe-js": "^1.4.1", + "@stripe/stripe-js": "^1.18.0", "@tkey/default": "3.12.0", "@tkey/security-questions": "3.12.0", "@tkey/web-storage": "3.12.0", diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx index 0311d2de78..be49f7586f 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx @@ -3,7 +3,9 @@ import { Typography, CreditCardIcon, Button } from "@chainsafe/common-components import { makeStyles, ITheme, createStyles } from "@chainsafe/common-theme" import { Trans } from "@lingui/macro" import { useBilling } from "../../../../Contexts/BillingContext" -import AddCardModal from "./AddCardModal" +import AddCardModal from "./NewAddCardModal" +import { loadStripe } from "@stripe/stripe-js" +import { Elements } from "@stripe/react-stripe-js" const useStyles = makeStyles(({ constants, palette }: ITheme) => createStyles({ @@ -24,6 +26,8 @@ const useStyles = makeStyles(({ constants, palette }: ITheme) => }) ) +const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PK || "") + const CurrentCard: React.FC = () => { const classes = useStyles() const [isAddCardModalOpen, setIsAddCardModalOpen ] = useState(false) @@ -62,10 +66,12 @@ const CurrentCard: React.FC = () => { } - setIsAddCardModalOpen(false)} - /> + + setIsAddCardModalOpen(false)} + /> + ) } diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/NewAddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/NewAddCardModal.tsx new file mode 100644 index 0000000000..222b413043 --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/NewAddCardModal.tsx @@ -0,0 +1,232 @@ +import React, { useCallback } from "react" +import { Button, Grid, Typography } from "@chainsafe/common-components" +import { createStyles, makeStyles } from "@chainsafe/common-theme" +import { CSFTheme } from "../../../../Themes/types" +import CustomModal from "../../../Elements/CustomModal" +import CustomButton from "../../../Elements/CustomButton" +import { Trans } from "@lingui/macro" +import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js" +import { useFilesApi } from "../../../../Contexts/FilesApiContext" + +const useStyles = makeStyles( + ({ breakpoints, constants, typography, zIndex }: CSFTheme) => { + return createStyles({ + root: { + padding: constants.generalUnit * 4, + flexDirection: "column" + }, + modalRoot: { + zIndex: zIndex?.blocker, + [breakpoints.down("md")]: {} + }, + modalInner: { + backgroundColor: constants.createFolder.backgroundColor, + color: constants.createFolder.color, + [breakpoints.down("md")]: { + bottom: + Number(constants?.mobileButtonHeight) + constants.generalUnit, + borderTopLeftRadius: `${constants.generalUnit * 1.5}px`, + borderTopRightRadius: `${constants.generalUnit * 1.5}px`, + maxWidth: `${breakpoints.width("md")}px !important` + } + }, + okButton: { + marginLeft: constants.generalUnit + }, + cancelButton: { + [breakpoints.down("md")]: { + position: "fixed", + bottom: 0, + left: 0, + width: "100%", + height: constants?.mobileButtonHeight + } + }, + label: { + fontSize: 14, + lineHeight: "22px" + }, + heading: { + color: constants.createFolder.color, + fontWeight: typography.fontWeight.semibold, + textAlign: "left", + marginBottom: constants.generalUnit * 2 + }, + footer: { + marginTop: constants.generalUnit * 4 + } + }) + } +) + +interface ICreateFolderModalProps { + isModalOpen: boolean + onClose: () => void +} + +const CreateFolderModal = ({ isModalOpen, onClose }: ICreateFolderModalProps) => { + const classes = useStyles() + // const [cardInputs, setCardInputs] = useState({ + // cardNumber: "", + // cardExpiry: "", + // cardCvc: "" + // }) + // const [cardName, setCardName] = useState("") + // const [error, setError] = useState("") + // const [loading, setLoading] = useState(false) + // const { addCard, getCardTokenFromStripe } = useBilling() + // const { addToast } = useToasts() + + const { filesApiClient } = useFilesApi() + + const onCloseModal = useCallback(() => { + // setCardInputs({ cardNumber: "", cardExpiry: "", cardCvc: "" }) + // setCardName("") + // setError("") + onClose() + }, [onClose]) + + // const onSubmitCard = useCallback((e: React.FormEvent) => { + // e.preventDefault() + // const error = !cardName + // ? t`Name on card is required` + // : getCardNumberError(cardInputs.cardNumber) || + // getExpiryDateError(cardInputs.cardExpiry) || + // getCVCError(cardInputs.cardCvc, cardInputs.cardNumber) + + // if (error) { + // setError(error) + // return + // } + // setError("") + + // setLoading(true) + // // get token from stripe + // getCardTokenFromStripe(cardInputs).then((resp) => { + // // send stripe token to API + // addCard(resp.data.id) + // .then(() => { + // onCloseModal() + // addToast({ + // title: t`Card added successfully`, + // type: "success" + // }) + // }).catch((e) => { + // setError(t`Something went wrong, please try again`) + // console.error(e) + // }).finally(() => setLoading(false)) + // }).catch((err) => { + // console.error(err) + // setError(t`Card details could not be validated`) + // setLoading(false) + // }) + // }, [cardName, cardInputs, getCardTokenFromStripe, addCard, onCloseModal, addToast]) + + const stripe = useStripe() + const elements = useElements() + + const handleSubmit = async (event: any) => { + // Block native form submission. + event.preventDefault() + + if (!stripe || !elements) { + // Stripe.js has not loaded yet. Make sure to disable + // form submission until Stripe.js has loaded. + return + } + + // Get a reference to a mounted CardElement. Elements knows how + // to find your CardElement because there can only ever be one of + // each type of element. + const cardElement = elements.getElement(CardElement) + + if (cardElement) { + // Use your card Element with other Stripe.js APIs + const { error, paymentMethod } = await stripe.createPaymentMethod({ + type: "card", + card: cardElement + }) + if (error) { + console.log("[error]", error) + return + } else { + console.log("[PaymentMethod]", paymentMethod) + } + if (paymentMethod) { + + const setupIntent = await filesApiClient.createSetupIntent() + console.log(setupIntent.secret) + + await stripe.confirmCardSetup(setupIntent.secret, { + payment_method: paymentMethod.id + }) + } + } + + } + + return ( + +
+
+ + + Add a credit card + + + + + + Cancel + + + +
+
+ + ) +} + +export default CreateFolderModal diff --git a/yarn.lock b/yarn.lock index 1eb4fc2e86..18db2b0f8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -587,15 +587,6 @@ chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/highlight@^7.14.5": - version "7.14.5" - resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9" - integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg== - dependencies: - "@babel/helper-validator-identifier" "^7.14.5" - chalk "^2.0.0" - js-tokens "^4.0.0" - "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.10", "@babel/parser@^7.12.7", "@babel/parser@^7.4.3", "@babel/parser@^7.7.0", "@babel/parser@^7.9.0": version "7.12.10" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.10.tgz#824600d59e96aea26a5a2af5a9d812af05c3ae81" @@ -1946,6 +1937,15 @@ dependencies: redoc-cli "^0.12.3" +"@chainsafe/files-api-client@^1.18.9": + version "1.18.9" + resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.9.tgz#3199bade6d77ccf21c2b0023a5a9ed6bb0f944e9" + integrity sha512-DUTaNClwAhPavpIcJslGuUNjIcWM5jfjvllByiCuQpevf7IJfv6FwOub7zZLElXOErpVjKrP8JQHK+1rye3yJA== + dependencies: + "@redocly/openapi-cli" "^1.0.0-beta.58" + "@redocly/openapi-core" "^1.0.0-beta.58" + redoc-cli "^0.12.3" + "@chainsafe/web3-context@1.1.4": version "1.1.4" resolved "https://registry.yarnpkg.com/@chainsafe/web3-context/-/web3-context-1.1.4.tgz#ce0f140af8ccf93af1a189fbdbd6f018b9bf5fb7" @@ -4494,6 +4494,24 @@ require-from-string "^2.0.2" uri-js "^4.2.2" +"@redocly/openapi-cli@^1.0.0-beta.58": + version "1.0.0-beta.61" + resolved "https://registry.yarnpkg.com/@redocly/openapi-cli/-/openapi-cli-1.0.0-beta.61.tgz#03dfbf058b2bf85922a0e19adaa2856f111d1b14" + integrity sha512-x3s2wdFHTpuO/Wd8y6lrdRzDFVRGxFLdv+0iXR06b1vHWOx/SUzK+7Qslq3Pk6bpge4FFhaJai80pEv/9B05Fw== + dependencies: + "@redocly/openapi-core" "^1.0.0-beta.61" + "@types/node" "^14.11.8" + assert-node-version "^1.0.3" + chokidar "^3.5.1" + colorette "^1.2.0" + glob "^7.1.6" + glob-promise "^3.4.0" + handlebars "^4.7.6" + js-yaml "^3.14.1" + portfinder "^1.0.26" + simple-websocket "^9.0.0" + yargs "17.0.1" + "@redocly/openapi-core@^1.0.0-beta.50": version "1.0.0-beta.58" resolved "https://registry.yarnpkg.com/@redocly/openapi-core/-/openapi-core-1.0.0-beta.58.tgz#d7c9dfe580bd3f115f4e667ba49bc18be3c65ed2" @@ -4509,6 +4527,21 @@ node-fetch "^2.6.1" yaml-ast-parser "0.0.43" +"@redocly/openapi-core@^1.0.0-beta.58", "@redocly/openapi-core@^1.0.0-beta.61": + version "1.0.0-beta.61" + resolved "https://registry.yarnpkg.com/@redocly/openapi-core/-/openapi-core-1.0.0-beta.61.tgz#d5fa05a4f625c234d5d83d65986f6d3dba68336a" + integrity sha512-/OgtozUxy7SvHVBZ3Iygu6brDTOFTOlkzpDQyykpa0lK2cPBeYjkJP5foBlHKeHl+TvxfPuzh1CSGSShSc+IBg== + dependencies: + "@redocly/ajv" "^8.6.2" + "@types/node" "^14.11.8" + colorette "^1.2.0" + js-levenshtein "^1.1.6" + js-yaml "^3.14.1" + lodash.isequal "^4.5.0" + minimatch "^3.0.4" + node-fetch "^2.6.1" + yaml-ast-parser "0.0.43" + "@redocly/react-dropdown-aria@^2.0.11": version "2.0.12" resolved "https://registry.yarnpkg.com/@redocly/react-dropdown-aria/-/react-dropdown-aria-2.0.12.tgz#2e3af2b1b8e9123487109400d6117f0d4a8445a6" @@ -5241,6 +5274,18 @@ telejson "^3.2.0" util-deprecate "^1.0.2" +"@stripe/react-stripe-js@^1.4.1": + version "1.4.1" + resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.4.1.tgz#884d59286fff00ba77389b32c045516f65d7a340" + integrity sha512-FjcVrhf72+9fUL3Lz3xi02ni9tzH1A1x6elXlr6tvBDgSD55oPJuodoP8eC7xTnBIKq0olF5uJvgtkJyDCdzjA== + dependencies: + prop-types "^15.7.2" + +"@stripe/stripe-js@^1.18.0": + version "1.18.0" + resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.18.0.tgz#687268d7cd68b44b92b86300d7c7f2a6e4df0b98" + integrity sha512-yBRHAMKHnF3kbzv0tpKB82kSow43wW5qXLK8ofg3V9NaaCyObSTO7wJfktWAtG/NBgkJOdUL+pV8dHBj0qvDkQ== + "@svgr/babel-plugin-add-jsx-attribute@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1" @@ -5845,6 +5890,14 @@ dependencies: "@types/node" "*" +"@types/glob@*": + version "7.1.4" + resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.4.tgz#ea59e21d2ee5c517914cb4bc8e4153b99e566672" + integrity sha512-w+LsMxKyYQm347Otw+IfBXOv9UWVjpHpCDdbBMt8Kz/xbvCYNjP+0qPh91Km3iKfSRLBB0P7fAMf0KHrPu+MyA== + dependencies: + "@types/minimatch" "*" + "@types/node" "*" + "@types/glob@^7.1.1": version "7.1.3" resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183" @@ -7193,14 +7246,6 @@ anymatch@~3.1.1: normalize-path "^3.0.0" picomatch "^2.0.4" -anymatch@~3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" - integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== - dependencies: - normalize-path "^3.0.0" - picomatch "^2.0.4" - app-root-dir@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/app-root-dir/-/app-root-dir-1.0.2.tgz#38187ec2dea7577fff033ffcb12172692ff6e118" @@ -7393,6 +7438,14 @@ asn1@~0.2.3: dependencies: safer-buffer "~2.1.0" +assert-node-version@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/assert-node-version/-/assert-node-version-1.0.3.tgz#caea5d1b6a58dbce59661208df1e1b9e4c580f91" + integrity sha1-yupdG2pY285ZZhII3x4bnkxYD5E= + dependencies: + expected-node-version "^1.0.0" + semver "^5.0.3" + assert-plus@1.0.0, assert-plus@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525" @@ -8013,16 +8066,6 @@ babel-plugin-react-docgen@^4.0.0: babel-plugin-syntax-jsx "^6.18.0" lodash "^4.17.11" -"babel-plugin-styled-components@>= 1.12.0": - version "1.13.2" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz#ebe0e6deff51d7f93fceda1819e9b96aeb88278d" - integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA== - dependencies: - "@babel/helper-annotate-as-pure" "^7.0.0" - "@babel/helper-module-imports" "^7.0.0" - babel-plugin-syntax-jsx "^6.18.0" - lodash "^4.17.11" - babel-plugin-syntax-async-functions@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" @@ -12871,6 +12914,11 @@ expect@^24.9.0: jest-message-util "^24.9.0" jest-regex-util "^24.9.0" +expected-node-version@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/expected-node-version/-/expected-node-version-1.0.2.tgz#b8d225b9bf676a9e87e06dbd615b52fc9d1e386b" + integrity sha1-uNIlub9nap6H4G29YVtS/J0eOGs= + express@^4.17.0, express@^4.17.1: version "4.17.1" resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134" @@ -13805,6 +13853,13 @@ glob-parent@~5.1.2: dependencies: is-glob "^4.0.1" +glob-promise@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-3.4.0.tgz#b6b8f084504216f702dc2ce8c9bc9ac8866fdb20" + integrity sha512-q08RJ6O+eJn+dVanerAndJwIcumgbDdYiUT7zFQl3Wm1xD6fBKtah7H8ZJChj4wP+8C+QfeVy8xautR7rdmKEw== + dependencies: + "@types/glob" "*" + glob-to-regexp@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab" @@ -14011,7 +14066,7 @@ handle-thing@^2.0.0: resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e" integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg== -handlebars@^4.7.7: +handlebars@^4.7.6, handlebars@^4.7.7: version "4.7.7" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1" integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA== @@ -20186,6 +20241,11 @@ querystringify@^2.1.1: resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6" integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ== +queue-microtask@^1.2.2: + version "1.2.3" + resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" + integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== + quick-lru@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8" @@ -21951,7 +22011,7 @@ semaphore@>=1.0.1, semaphore@^1.0.3: resolved "https://registry.yarnpkg.com/semaphore/-/semaphore-1.1.0.tgz#aaad8b86b20fe8e9b32b16dc2ee682a8cd26a8aa" integrity sha512-O4OZEaNtkMd/K0i6js9SL+gqy0ZCBMgUvlSqHKi4IBdjhe7wB8pwztUk1BbZ1fmrvpwFrPbHzqd2w5pTcJH6LA== -"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: +"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== @@ -22262,6 +22322,17 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" +simple-websocket@^9.0.0: + version "9.1.0" + resolved "https://registry.yarnpkg.com/simple-websocket/-/simple-websocket-9.1.0.tgz#91cbb39eafefbe7e66979da6c639109352786a7f" + integrity sha512-8MJPnjRN6A8UCp1I+H/dSFyjwJhp6wta4hsVRhjf8w9qBHRzxYt14RaOcjvQnhD1N4yKOddEjflwMnQM4VtXjQ== + dependencies: + debug "^4.3.1" + queue-microtask "^1.2.2" + randombytes "^2.1.0" + readable-stream "^3.6.0" + ws "^7.4.2" + simplebar-react@^1.0.0-alpha.6: version "1.2.3" resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.2.3.tgz#bd81fa9827628470e9470d06caef6ece15e1c882" @@ -22985,22 +23056,6 @@ styled-components@^5.3.0: shallowequal "^1.1.0" supports-color "^5.5.0" -styled-components@^5.3.0: - version "5.3.1" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.1.tgz#8a86dcd31bff7049c2ed408bae36fa23f03f071a" - integrity sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.4.5" - "@emotion/is-prop-valid" "^0.8.8" - "@emotion/stylis" "^0.8.4" - "@emotion/unitless" "^0.7.4" - babel-plugin-styled-components ">= 1.12.0" - css-to-react-native "^3.0.0" - hoist-non-react-statics "^3.0.0" - shallowequal "^1.1.0" - supports-color "^5.5.0" - stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" @@ -25483,6 +25538,11 @@ ws@^6.1.2, ws@^6.2.1: dependencies: async-limiter "~1.0.0" +ws@^7.4.2: + version "7.5.5" + resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881" + integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w== + wsrun@^5.2.4: version "5.2.4" resolved "https://registry.yarnpkg.com/wsrun/-/wsrun-5.2.4.tgz#6eb6c3ccd3327721a8df073a5e3578fb0dea494e" @@ -25666,6 +25726,19 @@ yargs@13.2.4: y18n "^4.0.0" yargs-parser "^13.1.0" +yargs@17.0.1: + version "17.0.1" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.0.1.tgz#6a1ced4ed5ee0b388010ba9fd67af83b9362e0bb" + integrity sha512-xBBulfCc8Y6gLFcrPvtqKz9hz8SO0l1Ni8GgDekvBX2ro0HRQImDGnikfc33cgzcYUSncapnNcZDjVFIH3f6KQ== + dependencies: + cliui "^7.0.2" + escalade "^3.1.1" + get-caller-file "^2.0.5" + require-directory "^2.1.1" + string-width "^4.2.0" + y18n "^5.0.5" + yargs-parser "^20.2.2" + yargs@^13.0.0, yargs@^13.2.4, yargs@^13.3.0, yargs@^13.3.2: version "13.3.2" resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd" From b3bdbe510e300b93d5abe09b8806b3947256944f Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 24 Sep 2021 14:40:03 +0600 Subject: [PATCH 02/14] cards add and setup intent --- .../Settings/SubscriptionTab/AddCardModal.tsx | 143 +++++------ .../Settings/SubscriptionTab/CurrentCard.tsx | 2 +- .../SubscriptionTab/NewAddCardModal.tsx | 232 ------------------ .../files-ui/src/Contexts/BillingContext.tsx | 47 +--- 4 files changed, 66 insertions(+), 358 deletions(-) delete mode 100644 packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/NewAddCardModal.tsx diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index 48eebb700e..6deecda0c3 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -1,12 +1,12 @@ -import { Button, Grid, TextInput, Typography, useToasts } from "@chainsafe/common-components" +import React, { useState } from "react" +import { Button, Grid, Typography, useToasts } from "@chainsafe/common-components" import { createStyles, makeStyles } from "@chainsafe/common-theme" -import React, { useState, useCallback } from "react" import { CSFTheme } from "../../../../Themes/types" import CustomModal from "../../../Elements/CustomModal" import CustomButton from "../../../Elements/CustomButton" -import { t, Trans } from "@lingui/macro" -import CardInputs from "../../../Elements/CardInputs" -import { getCardNumberError, getCVCError, getExpiryDateError } from "../../../Elements/CardInputs/utils/validator" +import { Trans } from "@lingui/macro" +import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js" +import { useFilesApi } from "../../../../Contexts/FilesApiContext" import { useBilling } from "../../../../Contexts/BillingContext" const useStyles = makeStyles( @@ -60,66 +60,64 @@ const useStyles = makeStyles( } ) -interface ICreateFolderModalProps { +interface IAddCardModalProps { isModalOpen: boolean onClose: () => void } -const CreateFolderModal = ({ isModalOpen, onClose }: ICreateFolderModalProps) => { +const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { const classes = useStyles() - const [cardInputs, setCardInputs] = useState({ - cardNumber: "", - cardExpiry: "", - cardCvc: "" - }) - const [cardName, setCardName] = useState("") - const [error, setError] = useState("") - const [loading, setLoading] = useState(false) - const { addCard, getCardTokenFromStripe } = useBilling() + const stripe = useStripe() + const elements = useElements() const { addToast } = useToasts() + const { filesApiClient } = useFilesApi() + const { refreshDefaultCard } = useBilling() - const onCloseModal = useCallback(() => { - setCardInputs({ cardNumber: "", cardExpiry: "", cardCvc: "" }) - setCardName("") - setError("") + const [loadingPaymentMethodAdd, setLoadingPaymentMethodAdd] = useState(false) + + const handlePaymentError = (error: any) => { + console.error(error) onClose() - }, [onClose]) + setLoadingPaymentMethodAdd(false) + addToast({ title: "Failed to add payment method", type: "error" }) + } - const onSubmitCard = useCallback((e: React.FormEvent) => { - e.preventDefault() - const error = !cardName - ? t`Name on card is required` - : getCardNumberError(cardInputs.cardNumber) || - getExpiryDateError(cardInputs.cardExpiry) || - getCVCError(cardInputs.cardCvc, cardInputs.cardNumber) + const handleSubmitPaymentMethod = async (event: any) => { + event.preventDefault() + if (!stripe || !elements) return - if (error) { - setError(error) - return - } - setError("") + try { + const cardElement = elements.getElement(CardElement) + setLoadingPaymentMethodAdd(true) - setLoading(true) - // get token from stripe - getCardTokenFromStripe(cardInputs).then((resp) => { - // send stripe token to API - addCard(resp.data.id) - .then(() => { - onCloseModal() - addToast({ - title: t`Card added successfully`, - type: "success" - }) - }).catch((e) => { - setError(t`Something went wrong, please try again`) - console.error(e) - }).finally(() => setLoading(false)) - }).catch((err) => { - console.error(err) - setError(t`Card details could not be validated`) - setLoading(false) - }) - }, [cardName, cardInputs, getCardTokenFromStripe, addCard, onCloseModal, addToast]) + if (!cardElement) return + const { error, paymentMethod } = await stripe.createPaymentMethod({ + type: "card", + card: cardElement + }) + + if (error || !paymentMethod) { + handlePaymentError(error) + return + } + + const setupIntent = await filesApiClient.createSetupIntent() + const setupIntentResult = await stripe.confirmCardSetup(setupIntent.secret, { + payment_method: paymentMethod.id + }) + + if (setupIntentResult.error || !setupIntentResult.setupIntent) { + handlePaymentError(setupIntentResult.error) + return + } + refreshDefaultCard() + onClose() + setLoadingPaymentMethodAdd(false) + addToast({ title: "Payment method added", type: "success" }) + } catch (error) { + handlePaymentError(error) + } + } return ( closePosition="none" maxWidth="sm" > -
+
Add a credit card - - - setCardName(val?.toString() || "") - } - size="large" - placeholder={t`Name on card`} - label={t`Name on card`} - /> - setCardInputs({ ...cardInputs, cardNumber: value })} - handleChangeCardExpiry={(value) => setCardInputs({ ...cardInputs, cardExpiry: value })} - handleChangeCardCvc={(value) => setCardInputs({ ...cardInputs, cardCvc: value })} - error={error} - /> - + > Cancel @@ -196,8 +171,8 @@ const CreateFolderModal = ({ isModalOpen, onClose }: ICreateFolderModalProps) => variant="primary" type="submit" className={classes.okButton} - loading={loading} - disabled={loading} + loading={loadingPaymentMethodAdd} + disabled={loadingPaymentMethodAdd} > Add card @@ -208,4 +183,4 @@ const CreateFolderModal = ({ isModalOpen, onClose }: ICreateFolderModalProps) => ) } -export default CreateFolderModal +export default AddCardModal diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx index be49f7586f..df7193310f 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx @@ -3,7 +3,7 @@ import { Typography, CreditCardIcon, Button } from "@chainsafe/common-components import { makeStyles, ITheme, createStyles } from "@chainsafe/common-theme" import { Trans } from "@lingui/macro" import { useBilling } from "../../../../Contexts/BillingContext" -import AddCardModal from "./NewAddCardModal" +import AddCardModal from "./AddCardModal" import { loadStripe } from "@stripe/stripe-js" import { Elements } from "@stripe/react-stripe-js" diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/NewAddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/NewAddCardModal.tsx deleted file mode 100644 index 222b413043..0000000000 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/NewAddCardModal.tsx +++ /dev/null @@ -1,232 +0,0 @@ -import React, { useCallback } from "react" -import { Button, Grid, Typography } from "@chainsafe/common-components" -import { createStyles, makeStyles } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../../Themes/types" -import CustomModal from "../../../Elements/CustomModal" -import CustomButton from "../../../Elements/CustomButton" -import { Trans } from "@lingui/macro" -import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js" -import { useFilesApi } from "../../../../Contexts/FilesApiContext" - -const useStyles = makeStyles( - ({ breakpoints, constants, typography, zIndex }: CSFTheme) => { - return createStyles({ - root: { - padding: constants.generalUnit * 4, - flexDirection: "column" - }, - modalRoot: { - zIndex: zIndex?.blocker, - [breakpoints.down("md")]: {} - }, - modalInner: { - backgroundColor: constants.createFolder.backgroundColor, - color: constants.createFolder.color, - [breakpoints.down("md")]: { - bottom: - Number(constants?.mobileButtonHeight) + constants.generalUnit, - borderTopLeftRadius: `${constants.generalUnit * 1.5}px`, - borderTopRightRadius: `${constants.generalUnit * 1.5}px`, - maxWidth: `${breakpoints.width("md")}px !important` - } - }, - okButton: { - marginLeft: constants.generalUnit - }, - cancelButton: { - [breakpoints.down("md")]: { - position: "fixed", - bottom: 0, - left: 0, - width: "100%", - height: constants?.mobileButtonHeight - } - }, - label: { - fontSize: 14, - lineHeight: "22px" - }, - heading: { - color: constants.createFolder.color, - fontWeight: typography.fontWeight.semibold, - textAlign: "left", - marginBottom: constants.generalUnit * 2 - }, - footer: { - marginTop: constants.generalUnit * 4 - } - }) - } -) - -interface ICreateFolderModalProps { - isModalOpen: boolean - onClose: () => void -} - -const CreateFolderModal = ({ isModalOpen, onClose }: ICreateFolderModalProps) => { - const classes = useStyles() - // const [cardInputs, setCardInputs] = useState({ - // cardNumber: "", - // cardExpiry: "", - // cardCvc: "" - // }) - // const [cardName, setCardName] = useState("") - // const [error, setError] = useState("") - // const [loading, setLoading] = useState(false) - // const { addCard, getCardTokenFromStripe } = useBilling() - // const { addToast } = useToasts() - - const { filesApiClient } = useFilesApi() - - const onCloseModal = useCallback(() => { - // setCardInputs({ cardNumber: "", cardExpiry: "", cardCvc: "" }) - // setCardName("") - // setError("") - onClose() - }, [onClose]) - - // const onSubmitCard = useCallback((e: React.FormEvent) => { - // e.preventDefault() - // const error = !cardName - // ? t`Name on card is required` - // : getCardNumberError(cardInputs.cardNumber) || - // getExpiryDateError(cardInputs.cardExpiry) || - // getCVCError(cardInputs.cardCvc, cardInputs.cardNumber) - - // if (error) { - // setError(error) - // return - // } - // setError("") - - // setLoading(true) - // // get token from stripe - // getCardTokenFromStripe(cardInputs).then((resp) => { - // // send stripe token to API - // addCard(resp.data.id) - // .then(() => { - // onCloseModal() - // addToast({ - // title: t`Card added successfully`, - // type: "success" - // }) - // }).catch((e) => { - // setError(t`Something went wrong, please try again`) - // console.error(e) - // }).finally(() => setLoading(false)) - // }).catch((err) => { - // console.error(err) - // setError(t`Card details could not be validated`) - // setLoading(false) - // }) - // }, [cardName, cardInputs, getCardTokenFromStripe, addCard, onCloseModal, addToast]) - - const stripe = useStripe() - const elements = useElements() - - const handleSubmit = async (event: any) => { - // Block native form submission. - event.preventDefault() - - if (!stripe || !elements) { - // Stripe.js has not loaded yet. Make sure to disable - // form submission until Stripe.js has loaded. - return - } - - // Get a reference to a mounted CardElement. Elements knows how - // to find your CardElement because there can only ever be one of - // each type of element. - const cardElement = elements.getElement(CardElement) - - if (cardElement) { - // Use your card Element with other Stripe.js APIs - const { error, paymentMethod } = await stripe.createPaymentMethod({ - type: "card", - card: cardElement - }) - if (error) { - console.log("[error]", error) - return - } else { - console.log("[PaymentMethod]", paymentMethod) - } - if (paymentMethod) { - - const setupIntent = await filesApiClient.createSetupIntent() - console.log(setupIntent.secret) - - await stripe.confirmCardSetup(setupIntent.secret, { - payment_method: paymentMethod.id - }) - } - } - - } - - return ( - - -
- - - Add a credit card - - - - - - Cancel - - - -
- - - ) -} - -export default CreateFolderModal diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx index e7cef54f69..8009d0a248 100644 --- a/packages/files-ui/src/Contexts/BillingContext.tsx +++ b/packages/files-ui/src/Contexts/BillingContext.tsx @@ -1,10 +1,8 @@ import * as React from "react" import { useFilesApi } from "./FilesApiContext" -import axios, { AxiosResponse } from "axios" import { useEffect, useState } from "react" import { Card } from "@chainsafe/files-api-client" import { useCallback } from "react" -import qs from "qs" type BillingContextProps = { children: React.ReactNode | React.ReactNode[] @@ -12,22 +10,13 @@ type BillingContextProps = { interface IBillingContext { defaultCard: Card | undefined - addCard(cardToken: string): Promise - getCardTokenFromStripe( - cardInputs: { - cardNumber: string - cardExpiry: string - cardCvc: string - } - ): Promise> + refreshDefaultCard(): void } const BillingContext = React.createContext( undefined ) -const STRIPE_API = "https://api.stripe.com/v1/tokens" - const BillingProvider = ({ children }: BillingContextProps) => { const { filesApiClient, isLoggedIn } = useFilesApi() const [defaultCard, setDefaultCard] = useState(undefined) @@ -44,42 +33,18 @@ const BillingProvider = ({ children }: BillingContextProps) => { useEffect(() => { if (isLoggedIn) { refreshDefaultCard() - } - }, [refreshDefaultCard, isLoggedIn]) - const getCardTokenFromStripe = useCallback(( - cardInputs: { - cardNumber: string - cardExpiry: string - cardCvc: string - } - ): Promise> => { - return axios({ - method: "post", - url: STRIPE_API, - headers: { - "Authorization": `Bearer ${process.env.REACT_APP_STRIPE_PK}`, - "Content-Type": "application/x-www-form-urlencoded" - }, - data : qs.stringify({ - "card[number]": cardInputs.cardNumber, - "card[exp_month]": cardInputs.cardExpiry.split("/")[0].trim(), - "card[exp_year]": cardInputs.cardExpiry.split("/")[1].trim(), - "card[cvc]": cardInputs.cardCvc + filesApiClient.getCards().then((cards) => { + console.log("cards", cards) }) - }) - }, []) - - const addCard = useCallback((cardToken: string) => { - return filesApiClient.addCard({ token: cardToken }).then(refreshDefaultCard) - }, [filesApiClient, refreshDefaultCard]) + } + }, [refreshDefaultCard, isLoggedIn, filesApiClient]) return ( {children} From 9b7023a5ae6e478163074cf2299691e764a61e06 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Fri, 24 Sep 2021 22:58:27 +0600 Subject: [PATCH 03/14] styling add card --- .../Settings/SubscriptionTab/AddCardModal.tsx | 43 ++++++++++++++++--- 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index 6deecda0c3..96305407dc 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -5,7 +5,7 @@ import { CSFTheme } from "../../../../Themes/types" import CustomModal from "../../../Elements/CustomModal" import CustomButton from "../../../Elements/CustomButton" import { Trans } from "@lingui/macro" -import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js" +import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement } from "@stripe/react-stripe-js" import { useFilesApi } from "../../../../Contexts/FilesApiContext" import { useBilling } from "../../../../Contexts/BillingContext" @@ -55,6 +55,23 @@ const useStyles = makeStyles( }, footer: { marginTop: constants.generalUnit * 4 + }, + cardInputsContainer: { + + }, + cardInputs: { + border: "1px solid black", + padding: constants.generalUnit + }, + expiryCvcContainer: { + display: "grid", + gridTemplateColumns: "1fr 1fr", + marginTop: constants.generalUnit, + gridColumnGap: constants.generalUnit, + [breakpoints.down("md")]: { + gridTemplateColumns: "1fr", + gridRowGap: constants.generalUnit + } } }) } @@ -86,14 +103,21 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { event.preventDefault() if (!stripe || !elements) return + console.log(elements) + try { - const cardElement = elements.getElement(CardElement) - setLoadingPaymentMethodAdd(true) - if (!cardElement) return + const cardNumberElement = elements.getElement(CardNumberElement) + // const cardElement = elements.getElement(CardElement) + + if (!cardNumberElement) return + // if (!cardElement) return + + setLoadingPaymentMethodAdd(true) const { error, paymentMethod } = await stripe.createPaymentMethod({ type: "card", - card: cardElement + // card: cardElement + card: cardNumberElement }) if (error || !paymentMethod) { @@ -147,7 +171,14 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { Add a credit card - + +
+ + +
Date: Mon, 27 Sep 2021 01:07:45 +0600 Subject: [PATCH 04/14] recreating coloors --- .../Settings/SubscriptionTab/AddCardModal.tsx | 32 +++++++++++++++---- .../Settings/SubscriptionTab/CurrentCard.tsx | 15 +++------ .../Settings/SubscriptionTab/index.tsx | 30 ++++++++++------- 3 files changed, 48 insertions(+), 29 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index 96305407dc..af412ca995 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -8,9 +8,10 @@ import { Trans } from "@lingui/macro" import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement } from "@stripe/react-stripe-js" import { useFilesApi } from "../../../../Contexts/FilesApiContext" import { useBilling } from "../../../../Contexts/BillingContext" +import clsx from "clsx" const useStyles = makeStyles( - ({ breakpoints, constants, typography, zIndex }: CSFTheme) => { + ({ breakpoints, constants, typography, zIndex, palette, animation }: CSFTheme) => { return createStyles({ root: { padding: constants.generalUnit * 4, @@ -56,12 +57,29 @@ const useStyles = makeStyles( footer: { marginTop: constants.generalUnit * 4 }, - cardInputsContainer: { - + cardNumberInputs: { + marginBottom: constants.generalUnit * 2, + [breakpoints.down("md")]: { + marginBottom: constants.generalUnit * 2 + } }, cardInputs: { - border: "1px solid black", - padding: constants.generalUnit + border: `1px solid ${palette.additional["gray"][6]}`, + borderRadius: 2, + padding: constants.generalUnit, + transitionDuration: `${animation.transform}ms`, + color: palette.additional["gray"][8], + "&:hover": { + borderColor: palette.primary.border + }, + "&:focus": { + borderColor: palette.primary.border, + boxShadow: "0px 0px 4px rgba(24, 144, 255, 0.5)" + }, + "&:active": { + borderColor: palette.primary.border, + boxShadow: "0px 0px 4px rgba(24, 144, 255, 0.5)" + } }, expiryCvcContainer: { display: "grid", @@ -70,7 +88,7 @@ const useStyles = makeStyles( gridColumnGap: constants.generalUnit, [breakpoints.down("md")]: { gridTemplateColumns: "1fr", - gridRowGap: constants.generalUnit + gridRowGap: constants.generalUnit * 2 } } }) @@ -172,7 +190,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => {
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx index df7193310f..8e7435d42f 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx @@ -4,8 +4,6 @@ import { makeStyles, ITheme, createStyles } from "@chainsafe/common-theme" import { Trans } from "@lingui/macro" import { useBilling } from "../../../../Contexts/BillingContext" import AddCardModal from "./AddCardModal" -import { loadStripe } from "@stripe/stripe-js" -import { Elements } from "@stripe/react-stripe-js" const useStyles = makeStyles(({ constants, palette }: ITheme) => createStyles({ @@ -26,8 +24,6 @@ const useStyles = makeStyles(({ constants, palette }: ITheme) => }) ) -const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PK || "") - const CurrentCard: React.FC = () => { const classes = useStyles() const [isAddCardModalOpen, setIsAddCardModalOpen ] = useState(false) @@ -66,12 +62,11 @@ const CurrentCard: React.FC = () => { }
- - setIsAddCardModalOpen(false)} - /> - + + setIsAddCardModalOpen(false)} + /> ) } diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/index.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/index.tsx index 5dfb1a70a4..4a818a1bec 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/index.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/index.tsx @@ -4,6 +4,8 @@ import CurrentCard from "./CurrentCard" import { Divider, Typography } from "@chainsafe/common-components" import { makeStyles, createStyles, ITheme } from "@chainsafe/common-theme" import { Trans } from "@lingui/macro" +import { Elements } from "@stripe/react-stripe-js" +import { loadStripe } from "@stripe/stripe-js" const useStyles = makeStyles(({ constants }: ITheme) => createStyles({ @@ -13,22 +15,26 @@ const useStyles = makeStyles(({ constants }: ITheme) => }) ) +const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PK || "") + const PlanView: React.FC = () => { const classes = useStyles() return ( -
- - Payment and Subscriptions - - - - -
+ +
+ + Payment and Subscriptions + + + + +
+ ) } From 0879c0df59d2d8ddc60839a3afa4a54c6416fa2f Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Mon, 27 Sep 2021 21:25:16 +0600 Subject: [PATCH 05/14] styling ready --- .../Modules/Settings/ProfileTab/index.tsx | 2 +- .../Settings/SubscriptionTab/AddCardModal.tsx | 87 +++++++++++++------ packages/files-ui/src/Themes/Constants.ts | 4 + packages/files-ui/src/Themes/DarkTheme.ts | 4 + packages/files-ui/src/Themes/LightTheme.ts | 4 + 5 files changed, 75 insertions(+), 26 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/ProfileTab/index.tsx b/packages/files-ui/src/Components/Modules/Settings/ProfileTab/index.tsx index 560fb26332..171cc81e66 100644 --- a/packages/files-ui/src/Components/Modules/Settings/ProfileTab/index.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/ProfileTab/index.tsx @@ -216,7 +216,7 @@ const ProfileView = () => { await updateProfile(firstName, lastName) addToast({ title: t`Profile updated`, type: "success" }) setUpdatingProfile(false) - } catch (error) { + } catch (error: any) { addToast({ title: error, type: "error" }) setUpdatingProfile(false) } diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index af412ca995..f2fef3323d 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react" import { Button, Grid, Typography, useToasts } from "@chainsafe/common-components" -import { createStyles, makeStyles } from "@chainsafe/common-theme" +import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../Themes/types" import CustomModal from "../../../Elements/CustomModal" import CustomButton from "../../../Elements/CustomButton" @@ -66,21 +66,16 @@ const useStyles = makeStyles( cardInputs: { border: `1px solid ${palette.additional["gray"][6]}`, borderRadius: 2, - padding: constants.generalUnit, + padding: constants.generalUnit * 1.5, transitionDuration: `${animation.transform}ms`, - color: palette.additional["gray"][8], "&:hover": { borderColor: palette.primary.border - }, - "&:focus": { - borderColor: palette.primary.border, - boxShadow: "0px 0px 4px rgba(24, 144, 255, 0.5)" - }, - "&:active": { - borderColor: palette.primary.border, - boxShadow: "0px 0px 4px rgba(24, 144, 255, 0.5)" } }, + cardInputsFocus: { + borderColor: palette.primary.border, + boxShadow: constants.addCard.shadow + }, expiryCvcContainer: { display: "grid", gridTemplateColumns: "1fr 1fr", @@ -90,6 +85,10 @@ const useStyles = makeStyles( gridTemplateColumns: "1fr", gridRowGap: constants.generalUnit * 2 } + }, + error: { + marginTop: constants.generalUnit * 2, + color: palette.error.main } }) } @@ -107,6 +106,9 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { const { addToast } = useToasts() const { filesApiClient } = useFilesApi() const { refreshDefaultCard } = useBilling() + const [focusElement, setFocusElement] = useState<"number" | "expiry" | "cvc" | undefined>(undefined) + const [isInputError, setInputError] = useState(false) + const theme: CSFTheme = useTheme() const [loadingPaymentMethodAdd, setLoadingPaymentMethodAdd] = useState(false) @@ -120,26 +122,18 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { const handleSubmitPaymentMethod = async (event: any) => { event.preventDefault() if (!stripe || !elements) return - - console.log(elements) - try { - const cardNumberElement = elements.getElement(CardNumberElement) - // const cardElement = elements.getElement(CardElement) - if (!cardNumberElement) return - // if (!cardElement) return setLoadingPaymentMethodAdd(true) const { error, paymentMethod } = await stripe.createPaymentMethod({ type: "card", - // card: cardElement card: cardNumberElement }) if (error || !paymentMethod) { - handlePaymentError(error) + setInputError(true) return } @@ -190,13 +184,56 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { setFocusElement("number")} + onBlur={() => setFocusElement(undefined)} />
- - + setFocusElement("expiry")} + onBlur={() => setFocusElement(undefined)} + options={{ style: { + base: { + color: theme.constants.addCard.color + } + } }} + /> + setFocusElement("cvc")} + onBlur={() => setFocusElement(undefined)} + options={{ style: { + base: { + color: theme.constants.addCard.color + } + } }} + />
+ {isInputError && + + Card inputs could not be validated + + } { type="submit" className={classes.okButton} loading={loadingPaymentMethodAdd} - disabled={loadingPaymentMethodAdd} + disabled={loadingPaymentMethodAdd || isInputError} > Add card diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts index 4ac1dd7752..637fbe6c39 100644 --- a/packages/files-ui/src/Themes/Constants.ts +++ b/packages/files-ui/src/Themes/Constants.ts @@ -167,4 +167,8 @@ export interface CsfColors extends IConstants { color: string backgroundOptionHover: string } + addCard: { + color: string + shadow: string + } } \ No newline at end of file diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts index 00a80eba21..f8e74eb7a5 100644 --- a/packages/files-ui/src/Themes/DarkTheme.ts +++ b/packages/files-ui/src/Themes/DarkTheme.ts @@ -480,6 +480,10 @@ export const darkTheme = createTheme({ }, surveyBanner: { color: "var(--gray9)" + }, + addCard: { + color: "#DBDBDB", + shadow: "0px 0px 4px rgba(24, 144, 255, 0.5)" } } as CsfColors) }, diff --git a/packages/files-ui/src/Themes/LightTheme.ts b/packages/files-ui/src/Themes/LightTheme.ts index bd40c2a9b0..4f5f2c9153 100644 --- a/packages/files-ui/src/Themes/LightTheme.ts +++ b/packages/files-ui/src/Themes/LightTheme.ts @@ -167,6 +167,10 @@ export const lightTheme = createTheme({ }, surveyBanner: { color: "var(--gray1)" + }, + addCard: { + color: "#595959", + shadow: "0px 0px 4px rgba(24, 144, 255, 0.5)" } } as CsfColors) }, From 5804b3d67003d80b9bc84fb5a27eea1dd3e0f4d7 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Mon, 27 Sep 2021 21:31:46 +0600 Subject: [PATCH 06/14] lint --- .../Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx index 8e7435d42f..0311d2de78 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/CurrentCard.tsx @@ -62,7 +62,6 @@ const CurrentCard: React.FC = () => { }
- setIsAddCardModalOpen(false)} From d38806fbf2c51c1da350bf4a1d15ebec0854751a Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Tue, 28 Sep 2021 21:54:33 +0600 Subject: [PATCH 07/14] Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../Modules/Settings/SubscriptionTab/AddCardModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index f2fef3323d..f490623c9c 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -231,7 +231,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { variant="body1" className={classes.error} > - Card inputs could not be validated + Card inputs invalid } Date: Tue, 28 Sep 2021 21:55:20 +0600 Subject: [PATCH 08/14] Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../Modules/Settings/SubscriptionTab/AddCardModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index f490623c9c..690380f80a 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -116,7 +116,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { console.error(error) onClose() setLoadingPaymentMethodAdd(false) - addToast({ title: "Failed to add payment method", type: "error" }) + addToast({ title: t`Failed to add payment method`, type: "error" }) } const handleSubmitPaymentMethod = async (event: any) => { From 9157009db53b01a54f99348b399f1c3d55899b64 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Tue, 28 Sep 2021 21:57:35 +0600 Subject: [PATCH 09/14] Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> --- .../Modules/Settings/SubscriptionTab/AddCardModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index 690380f80a..dcbc826214 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -168,7 +168,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => {
Date: Tue, 28 Sep 2021 21:57:54 +0600 Subject: [PATCH 10/14] Update packages/files-ui/src/Contexts/BillingContext.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- packages/files-ui/src/Contexts/BillingContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx index 8009d0a248..78854a09e8 100644 --- a/packages/files-ui/src/Contexts/BillingContext.tsx +++ b/packages/files-ui/src/Contexts/BillingContext.tsx @@ -10,7 +10,7 @@ type BillingContextProps = { interface IBillingContext { defaultCard: Card | undefined - refreshDefaultCard(): void + refreshDefaultCard: () => void } const BillingContext = React.createContext( From b27fe027462e92f8c6cd3035d2025c4cae60b422 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Tue, 28 Sep 2021 22:11:41 +0600 Subject: [PATCH 11/14] fixed imports, event types and extra code --- .../Modules/Settings/SubscriptionTab/AddCardModal.tsx | 7 ++++--- packages/files-ui/src/Contexts/BillingContext.tsx | 4 ---- yarn.lock | 9 --------- 3 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index dcbc826214..aaa8658814 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -1,10 +1,10 @@ -import React, { useState } from "react" +import React, { FormEvent, useState } from "react" import { Button, Grid, Typography, useToasts } from "@chainsafe/common-components" import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" import { CSFTheme } from "../../../../Themes/types" import CustomModal from "../../../Elements/CustomModal" import CustomButton from "../../../Elements/CustomButton" -import { Trans } from "@lingui/macro" +import { t, Trans } from "@lingui/macro" import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement } from "@stripe/react-stripe-js" import { useFilesApi } from "../../../../Contexts/FilesApiContext" import { useBilling } from "../../../../Contexts/BillingContext" @@ -119,7 +119,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { addToast({ title: t`Failed to add payment method`, type: "error" }) } - const handleSubmitPaymentMethod = async (event: any) => { + const handleSubmitPaymentMethod = async (event: FormEvent) => { event.preventDefault() if (!stripe || !elements) return try { @@ -134,6 +134,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { if (error || !paymentMethod) { setInputError(true) + setLoadingPaymentMethodAdd(false) return } diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx index 78854a09e8..8059e1357a 100644 --- a/packages/files-ui/src/Contexts/BillingContext.tsx +++ b/packages/files-ui/src/Contexts/BillingContext.tsx @@ -33,10 +33,6 @@ const BillingProvider = ({ children }: BillingContextProps) => { useEffect(() => { if (isLoggedIn) { refreshDefaultCard() - - filesApiClient.getCards().then((cards) => { - console.log("cards", cards) - }) } }, [refreshDefaultCard, isLoggedIn, filesApiClient]) diff --git a/yarn.lock b/yarn.lock index 400662beb5..4bb186147f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1934,15 +1934,6 @@ "@redocly/openapi-core" "^1.0.0-beta.58" redoc-cli "^0.12.3" -"@chainsafe/files-api-client@^1.18.9": - version "1.18.9" - resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.9.tgz#3199bade6d77ccf21c2b0023a5a9ed6bb0f944e9" - integrity sha512-DUTaNClwAhPavpIcJslGuUNjIcWM5jfjvllByiCuQpevf7IJfv6FwOub7zZLElXOErpVjKrP8JQHK+1rye3yJA== - dependencies: - "@redocly/openapi-cli" "^1.0.0-beta.58" - "@redocly/openapi-core" "^1.0.0-beta.58" - redoc-cli "^0.12.3" - "@chainsafe/web3-context@1.1.4": version "1.1.4" resolved "https://registry.yarnpkg.com/@chainsafe/web3-context/-/web3-context-1.1.4.tgz#ce0f140af8ccf93af1a189fbdbd6f018b9bf5fb7" From 967f64eaae6f9706c1aa7a9ba7273381a7ce5394 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Tue, 28 Sep 2021 22:40:54 +0600 Subject: [PATCH 12/14] error and loading states --- .../Settings/SubscriptionTab/AddCardModal.tsx | 6 ++- packages/files-ui/src/locales/de/messages.po | 33 ++++++++++++----- packages/files-ui/src/locales/en/messages.po | 35 +++++++++++++----- packages/files-ui/src/locales/es/messages.po | 33 ++++++++++++----- packages/files-ui/src/locales/fr/messages.po | 37 +++++++++++++------ packages/files-ui/src/locales/no/messages.po | 33 ++++++++++++----- 6 files changed, 128 insertions(+), 49 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index aaa8658814..9bb51c88ca 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -121,6 +121,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { const handleSubmitPaymentMethod = async (event: FormEvent) => { event.preventDefault() + setInputError(false) if (!stripe || !elements) return try { const cardNumberElement = elements.getElement(CardNumberElement) @@ -197,6 +198,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { } }} onFocus={() => setFocusElement("number")} onBlur={() => setFocusElement(undefined)} + onChange={() => setInputError(false)} />
{ )} onFocus={() => setFocusElement("expiry")} onBlur={() => setFocusElement(undefined)} + onChange={() => setInputError(false)} options={{ style: { base: { color: theme.constants.addCard.color @@ -219,6 +222,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { )} onFocus={() => setFocusElement("cvc")} onBlur={() => setFocusElement(undefined)} + onChange={() => setInputError(false)} options={{ style: { base: { color: theme.constants.addCard.color @@ -259,7 +263,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { type="submit" className={classes.okButton} loading={loadingPaymentMethodAdd} - disabled={loadingPaymentMethodAdd || isInputError} + disabled={loadingPaymentMethodAdd} > Add card diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index 2553156418..7cd1cec835 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -58,6 +58,9 @@ msgstr "Es ist ein Fehler aufgetreten:" msgid "Approve" msgstr "Genehmigen" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "Sicherungsgeheimsatz" @@ -94,10 +97,13 @@ msgstr "IID (Inhaltsidentifikator)" msgid "Cancel" msgstr "Abbrechen" -msgid "Card added successfully" -msgstr "" +#~ msgid "Card added successfully" +#~ msgstr "" + +#~ msgid "Card details could not be validated" +#~ msgstr "" -msgid "Card details could not be validated" +msgid "Card inputs invalid" msgstr "" msgid "Change Password" @@ -184,6 +190,9 @@ msgstr "Ordner erstellen" msgid "Create your public username in <0>Settings!" msgstr "" +msgid "Credit card on file" +msgstr "" + msgid "Dark Theme" msgstr "Dunkles Farbschema" @@ -259,6 +268,9 @@ msgstr "Geben Sie das Passwort ein:" msgid "Enter the verification code:" msgstr "Geben Sie den Verifizierungscode ein:" +msgid "Failed to add payment method" +msgstr "" + msgid "Failed to get signature" msgstr "Signatur kann nicht abgerufen werden" @@ -424,11 +436,11 @@ msgstr "Meine Dateien" msgid "Name" msgstr "Name" -msgid "Name on card" -msgstr "" +#~ msgid "Name on card" +#~ msgstr "" -msgid "Name on card is required" -msgstr "" +#~ msgid "Name on card is required" +#~ msgstr "" msgid "Name too long" msgstr "Name zu lang" @@ -691,8 +703,8 @@ msgstr "" msgid "Something went wrong!" msgstr "Etwas ist schief gelaufen!" -msgid "Something went wrong, please try again" -msgstr "" +#~ msgid "Something went wrong, please try again" +#~ msgstr "" msgid "Something went wrong. We couldn't upload your file" msgstr "Es ist etwas schief gelaufen. Wir konnten Ihre Datei nicht hochladen" @@ -912,3 +924,6 @@ msgstr "{0, plural, one {{1} Datei wird verschlüsselt und hochgeladen} other {{ msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "{0, plural, one {Sie sind dabei, {1} Artikel zu löschen.} other {Sie sind dabei, {2} Artikel zu löschen.}}" + +msgid "{0} of {1} used ({2}%)" +msgstr "" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index 982b845b94..7cb28bcbe9 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -58,6 +58,9 @@ msgstr "An error occurred:" msgid "Approve" msgstr "Approve" +msgid "Back to plan settings" +msgstr "Back to plan settings" + msgid "Backup secret phrase" msgstr "Backup secret phrase" @@ -94,11 +97,14 @@ msgstr "CID (Content Identifier)" msgid "Cancel" msgstr "Cancel" -msgid "Card added successfully" -msgstr "Card added successfully" +#~ msgid "Card added successfully" +#~ msgstr "Card added successfully" + +#~ msgid "Card details could not be validated" +#~ msgstr "Card details could not be validated" -msgid "Card details could not be validated" -msgstr "Card details could not be validated" +msgid "Card inputs invalid" +msgstr "Card inputs invalid" msgid "Change Password" msgstr "Change Password" @@ -184,6 +190,9 @@ msgstr "Create folder" msgid "Create your public username in <0>Settings!" msgstr "Create your public username in <0>Settings!" +msgid "Credit card on file" +msgstr "Credit card on file" + msgid "Dark Theme" msgstr "Dark Theme" @@ -259,6 +268,9 @@ msgstr "Enter password:" msgid "Enter the verification code:" msgstr "Enter the verification code:" +msgid "Failed to add payment method" +msgstr "Failed to add payment method" + msgid "Failed to get signature" msgstr "Failed to get signature" @@ -427,11 +439,11 @@ msgstr "My Files" msgid "Name" msgstr "Name" -msgid "Name on card" -msgstr "Name on card" +#~ msgid "Name on card" +#~ msgstr "Name on card" -msgid "Name on card is required" -msgstr "Name on card is required" +#~ msgid "Name on card is required" +#~ msgstr "Name on card is required" msgid "Name too long" msgstr "Name too long" @@ -694,8 +706,8 @@ msgstr "Something went wrong with email login! Please try again." msgid "Something went wrong!" msgstr "Something went wrong!" -msgid "Something went wrong, please try again" -msgstr "Something went wrong, please try again" +#~ msgid "Something went wrong, please try again" +#~ msgstr "Something went wrong, please try again" msgid "Something went wrong. We couldn't upload your file" msgstr "Something went wrong. We couldn't upload your file" @@ -915,3 +927,6 @@ msgstr "{0, plural, one {Encrypting and uploading {1} file} other {Encrypting an msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" + +msgid "{0} of {1} used ({2}%)" +msgstr "{0} of {1} used ({2}%)" diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index e0741762b6..14118ec4d0 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -59,6 +59,9 @@ msgstr "" msgid "Approve" msgstr "Aprobar" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "" @@ -95,10 +98,13 @@ msgstr "CID (Identificador de contenido)" msgid "Cancel" msgstr "Cancelar" -msgid "Card added successfully" -msgstr "" +#~ msgid "Card added successfully" +#~ msgstr "" + +#~ msgid "Card details could not be validated" +#~ msgstr "" -msgid "Card details could not be validated" +msgid "Card inputs invalid" msgstr "" msgid "Change Password" @@ -185,6 +191,9 @@ msgstr "Crear Carpeta" msgid "Create your public username in <0>Settings!" msgstr "" +msgid "Credit card on file" +msgstr "" + msgid "Dark Theme" msgstr "Tema oscuro" @@ -260,6 +269,9 @@ msgstr "Introducir la contraseña:" msgid "Enter the verification code:" msgstr "" +msgid "Failed to add payment method" +msgstr "" + msgid "Failed to get signature" msgstr "No se pudo obtener la firma" @@ -428,11 +440,11 @@ msgstr "Mis Archivos" msgid "Name" msgstr "Nombre" -msgid "Name on card" -msgstr "" +#~ msgid "Name on card" +#~ msgstr "" -msgid "Name on card is required" -msgstr "" +#~ msgid "Name on card is required" +#~ msgstr "" msgid "Name too long" msgstr "" @@ -695,8 +707,8 @@ msgstr "" msgid "Something went wrong!" msgstr "" -msgid "Something went wrong, please try again" -msgstr "" +#~ msgid "Something went wrong, please try again" +#~ msgstr "" msgid "Something went wrong. We couldn't upload your file" msgstr "Algo salió mal. No pudimos subir tu archivo" @@ -916,3 +928,6 @@ msgstr "" msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "" + +msgid "{0} of {1} used ({2}%)" +msgstr "" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index f65049a258..429edbd4a1 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -59,6 +59,9 @@ msgstr "Une erreur s'est produite :" msgid "Approve" msgstr "Accepter" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "Phrase secrète de sauvegarde" @@ -95,10 +98,13 @@ msgstr "CID (Identifiant de contenu)" msgid "Cancel" msgstr "Annuler" -msgid "Card added successfully" -msgstr "" +#~ msgid "Card added successfully" +#~ msgstr "" + +#~ msgid "Card details could not be validated" +#~ msgstr "" -msgid "Card details could not be validated" +msgid "Card inputs invalid" msgstr "" msgid "Change Password" @@ -185,6 +191,9 @@ msgstr "Créer un dossier" msgid "Create your public username in <0>Settings!" msgstr "Créez votre nom d'utilisateur public dans <0>Paramètres !" +msgid "Credit card on file" +msgstr "" + msgid "Dark Theme" msgstr "Thème sombre" @@ -260,6 +269,9 @@ msgstr "Entrez le mot de passe :" msgid "Enter the verification code:" msgstr "Entrez le code de vérification :" +msgid "Failed to add payment method" +msgstr "" + msgid "Failed to get signature" msgstr "Échec de l’obtention de la signature" @@ -428,11 +440,11 @@ msgstr "Mes Fichiers" msgid "Name" msgstr "Nom" -msgid "Name on card" -msgstr "" +#~ msgid "Name on card" +#~ msgstr "" -msgid "Name on card is required" -msgstr "" +#~ msgid "Name on card is required" +#~ msgstr "" msgid "Name too long" msgstr "Le nom est trop long" @@ -446,8 +458,8 @@ msgstr "Suivant" msgid "Nice to see you again!" msgstr "Ravi de te revoir !" -msgid "No file to download." -msgstr "Aucun fichier à télécharger." +msgid "No Card" +msgstr "" msgid "No file to download." msgstr "Aucun fichier à télécharger." @@ -695,8 +707,8 @@ msgstr "Un problème est survenu lors de la connexion avec courriel ! Veuillez msgid "Something went wrong!" msgstr "Quelque chose a mal tourné !" -msgid "Something went wrong, please try again" -msgstr "" +#~ msgid "Something went wrong, please try again" +#~ msgstr "" msgid "Something went wrong. We couldn't upload your file" msgstr "Un problème est survenu. Nous n’avons pas pu téléverser votre fichier" @@ -916,3 +928,6 @@ msgstr "{0, plural, one {Chiffrement et téléversement de {1} fichier} other {C msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "{0, plural, one {Vous êtes sur le point de supprimer {1} élément.} other {Vous êtes sur le point de supprimer {2} éléments.}}" + +msgid "{0} of {1} used ({2}%)" +msgstr "" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index 5274a443d6..e1ce220c25 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -58,6 +58,9 @@ msgstr "" msgid "Approve" msgstr "Godkjenn" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "" @@ -94,10 +97,13 @@ msgstr "" msgid "Cancel" msgstr "Avbryt" -msgid "Card added successfully" -msgstr "" +#~ msgid "Card added successfully" +#~ msgstr "" + +#~ msgid "Card details could not be validated" +#~ msgstr "" -msgid "Card details could not be validated" +msgid "Card inputs invalid" msgstr "" msgid "Change Password" @@ -184,6 +190,9 @@ msgstr "Opprett mappe" msgid "Create your public username in <0>Settings!" msgstr "" +msgid "Credit card on file" +msgstr "" + msgid "Dark Theme" msgstr "Mørk drakt" @@ -259,6 +268,9 @@ msgstr "Skriv inn passord:" msgid "Enter the verification code:" msgstr "Skriv inn bekreftelseskoden:" +msgid "Failed to add payment method" +msgstr "" + msgid "Failed to get signature" msgstr "" @@ -424,11 +436,11 @@ msgstr "Mine filer" msgid "Name" msgstr "Navn" -msgid "Name on card" -msgstr "" +#~ msgid "Name on card" +#~ msgstr "" -msgid "Name on card is required" -msgstr "" +#~ msgid "Name on card is required" +#~ msgstr "" msgid "Name too long" msgstr "Navnet er for langt" @@ -691,8 +703,8 @@ msgstr "" msgid "Something went wrong!" msgstr "Noe gikk galt." -msgid "Something went wrong, please try again" -msgstr "" +#~ msgid "Something went wrong, please try again" +#~ msgstr "" msgid "Something went wrong. We couldn't upload your file" msgstr "" @@ -912,3 +924,6 @@ msgstr "" msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "" + +msgid "{0} of {1} used ({2}%)" +msgstr "" From 5d20d09497b4722b261babd4227aed31ef77d82f Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Thu, 30 Sep 2021 20:04:04 +0600 Subject: [PATCH 13/14] updated eerror handling system --- .../Settings/SubscriptionTab/AddCardModal.tsx | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index 9bb51c88ca..dd7dc49db9 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -107,21 +107,14 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { const { filesApiClient } = useFilesApi() const { refreshDefaultCard } = useBilling() const [focusElement, setFocusElement] = useState<"number" | "expiry" | "cvc" | undefined>(undefined) - const [isInputError, setInputError] = useState(false) + const [cardAddError, setCardAddError] = useState(undefined) const theme: CSFTheme = useTheme() const [loadingPaymentMethodAdd, setLoadingPaymentMethodAdd] = useState(false) - const handlePaymentError = (error: any) => { - console.error(error) - onClose() - setLoadingPaymentMethodAdd(false) - addToast({ title: t`Failed to add payment method`, type: "error" }) - } - const handleSubmitPaymentMethod = async (event: FormEvent) => { event.preventDefault() - setInputError(false) + setCardAddError(undefined) if (!stripe || !elements) return try { const cardNumberElement = elements.getElement(CardNumberElement) @@ -134,8 +127,9 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { }) if (error || !paymentMethod) { - setInputError(true) + console.error(error) setLoadingPaymentMethodAdd(false) + setCardAddError(t`Card inputs invalid`) return } @@ -145,7 +139,9 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { }) if (setupIntentResult.error || !setupIntentResult.setupIntent) { - handlePaymentError(setupIntentResult.error) + console.error(error) + setLoadingPaymentMethodAdd(false) + setCardAddError(t`Failed to add payment method`) return } refreshDefaultCard() @@ -153,7 +149,9 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { setLoadingPaymentMethodAdd(false) addToast({ title: "Payment method added", type: "success" }) } catch (error) { - handlePaymentError(error) + console.error(error) + setLoadingPaymentMethodAdd(false) + setCardAddError(t`Failed to add payment method`) } } @@ -198,7 +196,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { } }} onFocus={() => setFocusElement("number")} onBlur={() => setFocusElement(undefined)} - onChange={() => setInputError(false)} + onChange={() => setCardAddError(undefined)} />
{ )} onFocus={() => setFocusElement("expiry")} onBlur={() => setFocusElement(undefined)} - onChange={() => setInputError(false)} + onChange={() => setCardAddError(undefined)} options={{ style: { base: { color: theme.constants.addCard.color @@ -222,7 +220,7 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { )} onFocus={() => setFocusElement("cvc")} onBlur={() => setFocusElement(undefined)} - onChange={() => setInputError(false)} + onChange={() => setCardAddError(undefined)} options={{ style: { base: { color: theme.constants.addCard.color @@ -230,13 +228,13 @@ const AddCardModal = ({ isModalOpen, onClose }: IAddCardModalProps) => { } }} />
- {isInputError && + {cardAddError && - Card inputs invalid + {cardAddError} } Date: Thu, 30 Sep 2021 20:10:29 +0600 Subject: [PATCH 14/14] handling addition --- .../Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx index dd7dc49db9..267eb6b694 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -60,6 +60,7 @@ const useStyles = makeStyles( cardNumberInputs: { marginBottom: constants.generalUnit * 2, [breakpoints.down("md")]: { + marginTop: constants.generalUnit * 2, marginBottom: constants.generalUnit * 2 } },