Add reporting chart beta component (#116)

* Add ReportingChart beta component

* Import types from connect-js

* Undo change to src/types

Author: neerajsamtani-stripe

src/Components.tsx

@@ -12,6 +12,8 @@ import {
   NotificationCount,
   InstallState,
   StepChange,
+  IntervalType,
+  ReportName,
 } from '@stripe/connect-js';
 
 export type CommonComponentProps = {
@@ -649,3 +651,51 @@ export const ConnectTaxSettings = ({
 
   return wrapper;
 };
+
+export const ConnectReportingChart = ({
+  reportName,
+  intervalStart,
+  intervalEnd,
+  intervalType,
+  onLoadError,
+  onLoaderStart,
+}: {
+  /**
+   * @param reportName The name of the report to render as a chart.
+   * @param intervalStart The start date of the report interval.
+   * @param intervalEnd The end date of the report interval.
+   * @param intervalType The type of the report interval.
+   */
+  reportName: ReportName;
+  intervalStart?: Date;
+  intervalEnd?: Date;
+  intervalType?: IntervalType;
+} & CommonComponentProps): JSX.Element | null => {
+  const {wrapper, component: reportingChart} =
+    useCreateComponent('reporting-chart');
+
+  useUpdateWithSetter(reportingChart, reportName, (comp, val) =>
+    comp.setReportName(val)
+  );
+
+  useUpdateWithSetter(reportingChart, intervalStart, (comp, val) =>
+    comp.setIntervalStart(val)
+  );
+
+  useUpdateWithSetter(reportingChart, intervalEnd, (comp, val) =>
+    comp.setIntervalEnd(val)
+  );
+
+  useUpdateWithSetter(reportingChart, intervalType, (comp, val) =>
+    comp.setIntervalType(val)
+  );
+
+  useUpdateWithSetter(reportingChart, onLoaderStart, (comp, val) => {
+    comp.setOnLoaderStart(val);
+  });
+  useUpdateWithSetter(reportingChart, onLoadError, (comp, val) => {
+    comp.setOnLoadError(val);
+  });
+
+  return wrapper;
+};

src/utils/useUpdateWithSetter.ts

@@ -27,6 +27,7 @@ export const useUpdateWithSetter = <
     | ((installState: InstallState) => void)
     | ((productType: FinancingProductType) => void)
     | ((StepChange: StepChange) => void)
+    | Date
     | undefined
 >(
   component: T | null,