Remove cart Element (#487)

* remove cart Element code and types
stripe · Apr 2, 2024 · 53bcc21 · 53bcc21
1 parent 86eaf3f
commit 53bcc21
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 570 deletions.
diff --git a/examples/hooks/10-Cart.js b/examples/hooks/10-Cart.js
diff --git a/src/components/Elements.test.tsx b/src/components/Elements.test.tsx
@@ -2,13 +2,7 @@ import React, {StrictMode} from 'react';
 import {render, act} from '@testing-library/react';
 import {renderHook} from '@testing-library/react-hooks';
 
-import {
- Elements,
- useElements,
- ElementsConsumer,
- useCartElement,
- useCartElementState,
-} from './Elements';
+import {Elements, useElements, ElementsConsumer} from './Elements';
 import * as mocks from '../../test/mocks';
 import {useStripe} from './useStripe';
 
@@ -300,22 +294,6 @@ describe('Elements', () => {
  );
  });
 
- test('throws when trying to call useCartElement outside of Elements context', () => {
- const {result} = renderHook(() => useCartElement());
-
- expect(result.error && result.error.message).toBe(
- 'Could not find Elements context; You need to wrap the part of your app that calls useCartElement() in an <Elements> provider.'
- );
- });
-
- test('throws when trying to call useCartElementState outside of Elements context', () => {
- const {result} = renderHook(() => useCartElementState());
-
- expect(result.error && result.error.message).toBe(
- 'Could not find Elements context; You need to wrap the part of your app that calls useCartElementState() in an <Elements> provider.'
- );
- });
-
  describe('React.StrictMode', () => {
  test('creates elements twice in StrictMode', () => {
  const TestComponent = () => {

diff --git a/src/components/Elements.tsx b/src/components/Elements.tsx
@@ -41,33 +41,6 @@ export const parseElementsContext = (
  return ctx;
 };
 
-interface CartElementContextValue {
- cart: stripeJs.StripeCartElement | null;
- cartState: stripeJs.StripeCartElementPayloadEvent | null;
- setCart: (cart: stripeJs.StripeCartElement | null) => void;
- setCartState: (
- cartState: stripeJs.StripeCartElementPayloadEvent | null
- ) => void;
-}
-
-const CartElementContext = React.createContext<CartElementContextValue | null>(
- null
-);
-CartElementContext.displayName = 'CartElementContext';
-
-export const parseCartElementContext = (
- ctx: CartElementContextValue | null,
- useCase: string
-): CartElementContextValue => {
- if (!ctx) {
- throw new Error(
- `Could not find Elements context; You need to wrap the part of your app that ${useCase} in an <Elements> provider.`
- );
- }
-
- return ctx;
-};
-
 interface ElementsProps {
  /**
  * A [Stripe object](https://stripe.com/docs/js/initializing) or a `Promise` resolving to a `Stripe` object.
@@ -110,14 +83,6 @@ export const Elements: FunctionComponent<PropsWithChildren<ElementsProps>> = (({
  rawStripeProp,
  ]);
 
- const [cart, setCart] = React.useState<stripeJs.StripeCartElement | null>(
- null
- );
- const [
- cartState,
- setCartState,
- ] = React.useState<stripeJs.StripeCartElementPayloadEvent | null>(null);
-
  // For a sync stripe instance, initialize into context
  const [ctx, setContext] = React.useState<ElementsContextValue>(() => ({
  stripe: parsed.tag === 'sync' ? parsed.stripe : null,
@@ -191,13 +156,7 @@ export const Elements: FunctionComponent<PropsWithChildren<ElementsProps>> = (({
  }, [ctx.stripe]);
 
  return (
- <ElementsContext.Provider value={ctx}>
- <CartElementContext.Provider
- value={{cart, setCart, cartState, setCartState}}
- >
- {children}
- </CartElementContext.Provider>
- </ElementsContext.Provider>
+ <ElementsContext.Provider value={ctx}>{children}</ElementsContext.Provider>
  );
 }) as FunctionComponent<PropsWithChildren<ElementsProps>>;
 
@@ -213,24 +172,6 @@ export const useElementsContextWithUseCase = (
  return parseElementsContext(ctx, useCaseMessage);
 };
 
-const DUMMY_CART_ELEMENT_CONTEXT: CartElementContextValue = {
- cart: null,
- cartState: null,
- setCart: () => {},
- setCartState: () => {},
-};
-
-export const useCartElementContextWithUseCase = (
- useCaseMessage: string,
- isInCustomCheckout = false
-): CartElementContextValue => {
- const ctx = React.useContext(CartElementContext);
- if (isInCustomCheckout) {
- return DUMMY_CART_ELEMENT_CONTEXT;
- }
- return parseCartElementContext(ctx, useCaseMessage);
-};
-
 /**
  * @docs https://stripe.com/docs/stripe-js/react#useelements-hook
  */
@@ -239,24 +180,6 @@ export const useElements = (): stripeJs.StripeElements | null => {
  return elements;
 };
 
-/**
- * @docs https://stripe.com/docs/payments/checkout/cart-element
- */
-export const useCartElement = (): stripeJs.StripeCartElement | null => {
- const {cart} = useCartElementContextWithUseCase('calls useCartElement()');
- return cart;
-};
-
-/**
- * @docs https://stripe.com/docs/payments/checkout/cart-element
- */
-export const useCartElementState = (): stripeJs.StripeCartElementPayloadEvent | null => {
- const {cartState} = useCartElementContextWithUseCase(
- 'calls useCartElementState()'
- );
- return cartState;
-};
-
 interface ElementsConsumerProps {
  children: (props: ElementsContextValue) => ReactNode;
 }