add payment disputes and disputes list to ga react sdk

Author: kaiying-stripe

src/Components.tsx

@@ -82,6 +82,52 @@ export const ConnectPaymentDetails = ({
   return wrapper;
 };
 
+export const ConnectPaymentDisputes = ({
+  payment,
+  onDisputesLoaded,
+  onLoadError,
+  onLoaderStart,
+}: {
+  /**
+   * @param payment the ID of `payment`, `charge`, or `paymentIntent` to be displayed.
+   */
+  payment: string;
+  onDisputesLoaded?: ({total}: {total: number}) => void;
+} & CommonComponentProps): JSX.Element | null => {
+  const {wrapper, component} =
+    useCreateComponent('payment-disputes');
+
+  useUpdateWithSetter(component, payment, (comp, val) =>
+    comp.setPayment(val)
+  );
+  useUpdateWithSetter(component, onDisputesLoaded, (comp, val) =>
+    comp.setOnDisputesLoaded(val)
+  );
+  useUpdateWithSetter(component, onLoaderStart, (comp, val) => {
+    comp.setOnLoaderStart(val);
+  });
+  useUpdateWithSetter(component, onLoadError, (comp, val) => {
+    comp.setOnLoadError(val);
+  });
+  return wrapper;
+};
+
+export const ConnectDisputesList = ({
+  onLoadError,
+  onLoaderStart,
+}: CommonComponentProps): JSX.Element | null => {
+  const {wrapper, component} =
+    useCreateComponent('disputes-list');
+
+  useUpdateWithSetter(component, onLoaderStart, (comp, val) => {
+    comp.setOnLoaderStart(val);
+  });
+  useUpdateWithSetter(component, onLoadError, (comp, val) => {
+    comp.setOnLoadError(val);
+  });
+  return wrapper;
+};
+
 export type CollectionOptions = {
   fields: 'currently_due' | 'eventually_due';
   futureRequirements?: 'omit' | 'include';