From 74f51366f06e87b6ba9cc29c50a4e9213ccb3294 Mon Sep 17 00:00:00 2001
From: Alex Price <alex@jumpsoft.co.uk>
Date: Mon, 22 Jul 2019 20:25:55 +0100
Subject: [PATCH] Updated react-stripe-elements CVC definitions (#36881)

* Updated react-stripe-elements CVC definitions

In version [4.0](https://github.com/stripe/react-stripe-elements/blob/master/CHANGELOG.md#v400---2019-07-05) of react-stripe-elements the CardCVCElement was renamed CardCvcElement. The old name will be aliased until v5.

This PR adds this alias.

* Removed silly semi

* Removed unnecessary semi-colon
---
 types/react-stripe-elements/index.d.ts        |  9 ++-
 .../react-stripe-elements-tests.tsx           | 80 ++++++++++---------
 2 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/types/react-stripe-elements/index.d.ts b/types/react-stripe-elements/index.d.ts
index 7fb4c934db..3c50d9db85 100644
--- a/types/react-stripe-elements/index.d.ts
+++ b/types/react-stripe-elements/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for react-stripe-elements 1.1
+// Type definitions for react-stripe-elements 1.2
 // Project: https://github.com/stripe/react-stripe-elements#readme
 // Definitions by: dan-j <https://github.com/dan-j>
 //                 Santiago Doldan <https://github.com/santiagodoldan>
@@ -7,6 +7,7 @@
 //                 Thomas Chia <https://github.com/thchia>
 //                 Piotr Dabrowski <https://github.com/yhnavein>
 //                 Victor Irzak <https://github.com/virzak>
+//                 Alex Price <https://github.com/remotealex>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -85,8 +86,10 @@ export class CardNumberElement extends React.Component<ReactStripeElements.Eleme
 export class CardExpiryElement extends React.Component<ReactStripeElements.ElementProps> {
 }
 
-export class CardCVCElement extends React.Component<ReactStripeElements.ElementProps> {
-}
+export class CardCvcElement extends React.Component<ReactStripeElements.ElementProps> {}
+
+// Deprecated but aliased until react-stripe-elements v5
+export class CardCVCElement extends CardCvcElement {}
 
 export class PostalCodeElement extends React.Component<ReactStripeElements.ElementProps> {
 }
diff --git a/types/react-stripe-elements/react-stripe-elements-tests.tsx b/types/react-stripe-elements/react-stripe-elements-tests.tsx
index 20bb920723..b6947ad7e1 100644
--- a/types/react-stripe-elements/react-stripe-elements-tests.tsx
+++ b/types/react-stripe-elements/react-stripe-elements-tests.tsx
@@ -6,6 +6,7 @@ import {
     injectStripe,
     CardNumberElement,
     CardExpiryElement,
+    CardCvcElement,
     CardCVCElement,
     PostalCodeElement,
     ReactStripeElements,
@@ -49,25 +50,22 @@ const cardElementProps: ElementsOptions = {
 };
 
 const fontElementsProps: ElementsCreateOptions = {
-  fonts: [
-    {
-      cssSrc: "https://fonts.googleapis.com/css?family=Dosis"
-    },
-    {
-      family: "Dosis, sanz",
-      src: "url(https://somewebsite.com/path/to/font.woff)",
-      style: "normal",
-      weight: "bold",
-      unicodeRange: "U+26"
-    }
-  ],
-  locale: "es"
+    fonts: [
+        {
+            cssSrc: 'https://fonts.googleapis.com/css?family=Dosis',
+        },
+        {
+            family: 'Dosis, sanz',
+            src: 'url(https://somewebsite.com/path/to/font.woff)',
+            style: 'normal',
+            weight: 'bold',
+            unicodeRange: 'U+26',
+        },
+    ],
+    locale: 'es',
 };
 
-<CardElement
-    {...cardElementProps}
-    onReady={(el: HTMLStripeElement) => el.clear()}
-/>;
+<CardElement {...cardElementProps} onReady={(el: HTMLStripeElement) => el.clear()} />;
 
 const ElementsWithPropsTest: React.SFC = () => (
     <div>
@@ -92,6 +90,13 @@ const ElementsWithPropsTest: React.SFC = () => (
             onReady={(el: HTMLStripeElement) => void 0}
             onFocus={(event: ElementChangeResponse) => void 0}
         />
+        <CardCvcElement
+            {...cardElementProps}
+            onChange={(event: ElementChangeResponse) => void 0}
+            onBlur={(event: ElementChangeResponse) => void 0}
+            onReady={(el: HTMLStripeElement) => void 0}
+            onFocus={(event: ElementChangeResponse) => void 0}
+        />
         <CardCVCElement
             {...cardElementProps}
             onChange={(event: ElementChangeResponse) => void 0}
@@ -113,28 +118,29 @@ interface ComponentProps {
     tokenCallback(token: PatchedTokenResponse): void;
 }
 
-class WrappedComponent extends React.Component<
-    ComponentProps & InjectedStripeProps
-> {
+class WrappedComponent extends React.Component<ComponentProps & InjectedStripeProps> {
     constructor(props: ComponentProps & InjectedStripeProps) {
         super(props);
         // Test for paymentRequest
-        const paymentRequest = props.stripe && props.stripe.paymentRequest({
-            country: 'US',
-            currency: 'usd',
-            total: {
-                label: 'Demo total',
-                amount: 1
-            }
-        });
+        const paymentRequest =
+            props.stripe &&
+            props.stripe.paymentRequest({
+                country: 'US',
+                currency: 'usd',
+                total: {
+                    label: 'Demo total',
+                    amount: 1,
+                },
+            });
         if (paymentRequest) {
-            paymentRequest.on('token', ({complete, token, ...data}) => undefined);
+            paymentRequest.on('token', ({ complete, token, ...data }) => undefined);
             paymentRequest.canMakePayment().then(res => undefined);
         }
     }
+
     onSubmit = () => {
-        this.props.stripe!
-            .createToken({
+        this.props
+            .stripe!.createToken({
                 name: '',
                 address_line1: '',
                 address_line2: '',
@@ -144,9 +150,7 @@ class WrappedComponent extends React.Component<
                 address_country: '',
                 currency: '',
             })
-            .then((response: PatchedTokenResponse) =>
-                this.props.tokenCallback(response)
-            );
+            .then((response: PatchedTokenResponse) => this.props.tokenCallback(response));
     }
 
     isFormValid = () => {
@@ -194,6 +198,7 @@ const ElementsDefaultPropsTest: React.SFC = () => (
         <CardElement />
         <CardNumberElement />
         <CardExpiryElement />
+        <CardCvcElement />
         <CardCVCElement />
         <PostalCodeElement />
     </div>
@@ -222,13 +227,14 @@ const TestStripeProviderProps3: React.SFC<{
  * See: https://github.com/stripe/react-stripe-elements#loading-stripejs-asynchronously
  */
 const TestStripeProviderProps4: React.SFC<{
-    stripe: null | stripe.Stripe
-}> = props =>
+    stripe: null | stripe.Stripe;
+}> = props => (
     <StripeProvider stripe={props.stripe}>
         <Elements>
             <div />
         </Elements>
-    </StripeProvider>;
+    </StripeProvider>
+);
 
 /**
  * StripeProvider should be able to accept options.