From e4591af619bb2f2aac06078d5ea193365b34455d Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Mon, 4 Oct 2021 20:48:56 +0600 Subject: [PATCH] Payments add card update with setup intent (#1584) * adding setup intents * cards add and setup intent * styling add card * recreating coloors * styling ready * lint * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> * Update packages/files-ui/src/Contexts/BillingContext.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * fixed imports, event types and extra code * error and loading states * updated eerror handling system * handling addition Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> --- packages/files-ui/package.json | 2 + .../Settings/SubscriptionTab/AddCardModal.tsx | 233 +++++++++++------- .../Settings/SubscriptionTab/index.tsx | 30 ++- .../files-ui/src/Contexts/BillingContext.tsx | 45 +--- packages/files-ui/src/Themes/Constants.ts | 4 + packages/files-ui/src/Themes/DarkTheme.ts | 4 + packages/files-ui/src/Themes/LightTheme.ts | 4 + packages/files-ui/src/locales/de/messages.po | 24 +- packages/files-ui/src/locales/en/messages.po | 26 +- packages/files-ui/src/locales/es/messages.po | 24 +- packages/files-ui/src/locales/fr/messages.po | 24 +- packages/files-ui/src/locales/no/messages.po | 24 +- yarn.lock | 29 +-- 13 files changed, 272 insertions(+), 201 deletions(-) diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index 1d9af5079a..0f9359921e 100644 --- a/packages/files-ui/package.json +++ b/packages/files-ui/package.json @@ -12,6 +12,8 @@ "@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.14.2", "@tkey/security-questions": "3.14.2", "@tkey/web-storage": "3.14.2", 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..267eb6b694 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/AddCardModal.tsx @@ -1,16 +1,17 @@ -import { Button, Grid, TextInput, Typography, useToasts } from "@chainsafe/common-components" -import { createStyles, makeStyles } from "@chainsafe/common-theme" -import React, { useState, useCallback } 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 { t, Trans } from "@lingui/macro" -import CardInputs from "../../../Elements/CardInputs" -import { getCardNumberError, getCVCError, getExpiryDateError } from "../../../Elements/CardInputs/utils/validator" +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, @@ -55,71 +56,105 @@ const useStyles = makeStyles( }, footer: { marginTop: constants.generalUnit * 4 + }, + cardNumberInputs: { + marginBottom: constants.generalUnit * 2, + [breakpoints.down("md")]: { + marginTop: constants.generalUnit * 2, + marginBottom: constants.generalUnit * 2 + } + }, + cardInputs: { + border: `1px solid ${palette.additional["gray"][6]}`, + borderRadius: 2, + padding: constants.generalUnit * 1.5, + transitionDuration: `${animation.transform}ms`, + "&:hover": { + borderColor: palette.primary.border + } + }, + cardInputsFocus: { + borderColor: palette.primary.border, + boxShadow: constants.addCard.shadow + }, + expiryCvcContainer: { + display: "grid", + gridTemplateColumns: "1fr 1fr", + marginTop: constants.generalUnit, + gridColumnGap: constants.generalUnit, + [breakpoints.down("md")]: { + gridTemplateColumns: "1fr", + gridRowGap: constants.generalUnit * 2 + } + }, + error: { + marginTop: constants.generalUnit * 2, + color: palette.error.main } }) } ) -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 [focusElement, setFocusElement] = useState<"number" | "expiry" | "cvc" | undefined>(undefined) + const [cardAddError, setCardAddError] = useState(undefined) + const theme: CSFTheme = useTheme() - const onCloseModal = useCallback(() => { - setCardInputs({ cardNumber: "", cardExpiry: "", cardCvc: "" }) - setCardName("") - setError("") - onClose() - }, [onClose]) + const [loadingPaymentMethodAdd, setLoadingPaymentMethodAdd] = useState(false) - 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: FormEvent) => { + event.preventDefault() + setCardAddError(undefined) + if (!stripe || !elements) return + try { + const cardNumberElement = elements.getElement(CardNumberElement) + if (!cardNumberElement) return - if (error) { - setError(error) - return - } - setError("") + setLoadingPaymentMethodAdd(true) + const { error, paymentMethod } = await stripe.createPaymentMethod({ + type: "card", + card: cardNumberElement + }) - 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 (error || !paymentMethod) { + console.error(error) + setLoadingPaymentMethodAdd(false) + setCardAddError(t`Card inputs invalid`) + return + } + + const setupIntent = await filesApiClient.createSetupIntent() + const setupIntentResult = await stripe.confirmCardSetup(setupIntent.secret, { + payment_method: paymentMethod.id + }) + + if (setupIntentResult.error || !setupIntentResult.setupIntent) { + console.error(error) + setLoadingPaymentMethodAdd(false) + setCardAddError(t`Failed to add payment method`) + return + } + refreshDefaultCard() + onClose() + setLoadingPaymentMethodAdd(false) + addToast({ title: "Payment method added", type: "success" }) + } catch (error) { + console.error(error) + setLoadingPaymentMethodAdd(false) + setCardAddError(t`Failed to add payment method`) + } + } return ( closePosition="none" maxWidth="sm" > -
+
Add a credit card - - - setCardName(val?.toString() || "") + setFocusElement("number")} + onBlur={() => setFocusElement(undefined)} + onChange={() => setCardAddError(undefined)} + /> +
+ setFocusElement("expiry")} + onBlur={() => setFocusElement(undefined)} + onChange={() => setCardAddError(undefined)} + options={{ style: { + base: { + color: theme.constants.addCard.color + } + } }} /> - setCardInputs({ ...cardInputs, cardNumber: value })} - handleChangeCardExpiry={(value) => setCardInputs({ ...cardInputs, cardExpiry: value })} - handleChangeCardCvc={(value) => setCardInputs({ ...cardInputs, cardCvc: value })} - error={error} + setFocusElement("cvc")} + onBlur={() => setFocusElement(undefined)} + onChange={() => setCardAddError(undefined)} + options={{ style: { + base: { + color: theme.constants.addCard.color + } + } }} /> - +
+ {cardAddError && + + {cardAddError} + + } > Cancel @@ -196,8 +261,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 +273,4 @@ const CreateFolderModal = ({ isModalOpen, onClose }: ICreateFolderModalProps) => ) } -export default CreateFolderModal +export default AddCardModal 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 + + + + +
+ ) } diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx index e7cef54f69..8059e1357a 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) @@ -45,41 +34,13 @@ const BillingProvider = ({ children }: BillingContextProps) => { 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 - }) - }) - }, []) - - const addCard = useCallback((cardToken: string) => { - return filesApiClient.addCard({ token: cardToken }).then(refreshDefaultCard) - }, [filesApiClient, refreshDefaultCard]) + }, [refreshDefaultCard, isLoggedIn, filesApiClient]) return ( {children} diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts index 2868d1b13a..4e4de08dc4 100644 --- a/packages/files-ui/src/Themes/Constants.ts +++ b/packages/files-ui/src/Themes/Constants.ts @@ -169,6 +169,10 @@ export interface CsfColors extends IConstants { color: string backgroundOptionHover: string } + addCard: { + color: string + shadow: string + } cookieBanner: { backgroundColor: string } diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts index c78c07646b..d6a099d458 100644 --- a/packages/files-ui/src/Themes/DarkTheme.ts +++ b/packages/files-ui/src/Themes/DarkTheme.ts @@ -481,6 +481,10 @@ export const darkTheme = createTheme({ surveyBanner: { color: "var(--gray9)" }, + addCard: { + color: "#DBDBDB", + shadow: "0px 0px 4px rgba(24, 144, 255, 0.5)" + }, cookieBanner: { backgroundColor: "var(--gray9)" } diff --git a/packages/files-ui/src/Themes/LightTheme.ts b/packages/files-ui/src/Themes/LightTheme.ts index 90f72c5dfa..d410224daf 100644 --- a/packages/files-ui/src/Themes/LightTheme.ts +++ b/packages/files-ui/src/Themes/LightTheme.ts @@ -168,6 +168,10 @@ export const lightTheme = createTheme({ surveyBanner: { color: "var(--gray1)" }, + addCard: { + color: "#595959", + shadow: "0px 0px 4px rgba(24, 144, 255, 0.5)" + }, cookieBanner: { backgroundColor: "var(--csf-primary)" } diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index 8aa4259967..762d2c5117 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -97,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" @@ -265,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" @@ -433,11 +439,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" @@ -700,8 +706,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" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index 7d92f8fe89..359d9b2d6a 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -97,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" @@ -265,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" @@ -436,11 +442,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" @@ -703,8 +709,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" diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index 8f55976b51..e2d5164c01 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -98,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" @@ -266,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" @@ -437,11 +443,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 "" @@ -704,8 +710,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" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index 3ada4e31b7..09d59bfaf1 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -98,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" @@ -266,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" @@ -437,11 +443,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" @@ -704,8 +710,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" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index a8f9690da8..18dddd9af5 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -97,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" @@ -265,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 "" @@ -433,11 +439,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" @@ -700,8 +706,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 "" diff --git a/yarn.lock b/yarn.lock index cea79a9528..4bb186147f 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" @@ -5276,6 +5267,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" @@ -7254,14 +7257,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"