@layerfi/components 0.1.18 → 0.1.20

package/dist/index.d.ts

@@ -2759,8 +2759,9 @@ declare module '@layerfi/components/providers/LayerProvider/LayerProvider' {
       businessAccessToken?: string;
       environment?: keyof typeof LayerEnvironment;
       theme?: LayerThemeConfig;
+      usePlaidSandbox?: boolean;
   };
-  export const LayerProvider: ({ appId, appSecret, businessId, children, businessAccessToken, environment, theme, }: PropsWithChildren<Props>) => React.JSX.Element;
+  export const LayerProvider: ({ appId, appSecret, businessId, children, businessAccessToken, environment, theme, usePlaidSandbox, }: PropsWithChildren<Props>) => React.JSX.Element;
   export {};
 
 }
@@ -3071,6 +3072,7 @@ declare module '@layerfi/components/types/layer_context' {
       apiUrl: string;
       theme?: LayerThemeConfig;
       colors: ColorsPalette;
+      usePlaidSandbox?: boolean;
       onboardingStep?: OnboardingStep;
   };
   export type LayerContextHelpers = {

package/dist/index.js

@@ -412,6 +412,7 @@ var LayerContext = (0, import_react.createContext)({
   apiUrl: "",
   theme: void 0,
   colors: {},
+  usePlaidSandbox: true,
   setTheme: () => void 0,
   getColor: (_shade) => void 0,
   setLightColor: () => void 0,
@@ -4492,11 +4493,11 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
 var import_swr4 = __toESM(require("swr"));
 var DEBUG = true;
 var USE_MOCK_RESPONSE_DATA = false;
-var USE_PLAID_SANDBOX = true;
 var useLinkedAccounts = () => {
-  const { auth, businessId, apiUrl } = useLayerContext();
+  const { auth, businessId, apiUrl, usePlaidSandbox } = useLayerContext();
   const [linkToken, setLinkToken] = (0, import_react49.useState)(null);
   const [loadingStatus, setLoadingStatus] = (0, import_react49.useState)("initial");
+  const USE_PLAID_SANDBOX = usePlaidSandbox ?? true;
   const {
     data: responseData,
     isLoading,
@@ -6925,7 +6926,7 @@ var SkeletonLoader = ({
 var import_react68 = __toESM(require("react"));
 var import_recharts3 = require("recharts");
 var MiniChart = ({ data }) => {
-  return /* @__PURE__ */ import_react68.default.createElement(import_recharts3.PieChart, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ import_react68.default.createElement(
+  return /* @__PURE__ */ import_react68.default.createElement(import_recharts3.PieChart, { width: 52, height: 52, className: "mini-chart" }, /* @__PURE__ */ import_react68.default.createElement(
     import_recharts3.Pie,
     {
       data,
@@ -6935,7 +6936,7 @@ var MiniChart = ({ data }) => {
       cy: "50%",
       innerRadius: 10,
       outerRadius: 16,
-      paddingAngle: 0.2,
+      paddingAngle: 0.4,
       fill: "#8884d8",
       width: 24,
       height: 24,
@@ -8581,7 +8582,7 @@ var ChartOfAccountsTable = ({
               !expandAll || expandAll === "collapsed" ? "expanded" : "collapsed"
             )
           },
-          !expandAll || expandAll === "collapsed" ? "Expand all rows" : "Collpase all rows"
+          !expandAll || expandAll === "collapsed" ? "Expand all rows" : "Collapse all rows"
         )) : null,
         /* @__PURE__ */ import_react84.default.createElement("div", { className: "Layer__header__actions-col" }, /* @__PURE__ */ import_react84.default.createElement(
           Button,
@@ -9099,7 +9100,8 @@ var LayerProvider = ({
   children,
   businessAccessToken,
   environment = "production",
-  theme
+  theme,
+  usePlaidSandbox
 }) => {
   const defaultSWRConfig = {
     revalidateInterval: 0,
@@ -9121,6 +9123,7 @@ var LayerProvider = ({
     apiUrl,
     theme,
     colors,
+    usePlaidSandbox,
     onboardingStep: void 0
   });
   const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr8.default)(
@@ -10565,11 +10568,13 @@ var View3 = ({ title, children, headerControls }) => {
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
+var import_classnames44 = __toESM(require("classnames"));
 var AccountingOverview = ({
   title = "Accounting overview",
   enableOnboarding = false,
   onTransactionsToReviewClick
 }) => {
+  const [pnlToggle, setPnlToggle] = (0, import_react112.useState)("revenue");
   return /* @__PURE__ */ import_react112.default.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ import_react112.default.createElement(View3, { title, headerControls: /* @__PURE__ */ import_react112.default.createElement(ProfitAndLoss.DatePicker, null) }, enableOnboarding && /* @__PURE__ */ import_react112.default.createElement(Onboarding, null), /* @__PURE__ */ import_react112.default.createElement("div", { className: "Layer__accounting-overview__summaries-row" }, /* @__PURE__ */ import_react112.default.createElement(ProfitAndLoss.Summaries, { actionable: false }), /* @__PURE__ */ import_react112.default.createElement(TransactionToReviewCard, { onClick: onTransactionsToReviewClick })), /* @__PURE__ */ import_react112.default.createElement(
     Container,
     {
@@ -10579,7 +10584,42 @@ var AccountingOverview = ({
     },
     /* @__PURE__ */ import_react112.default.createElement(Header, null, /* @__PURE__ */ import_react112.default.createElement(Heading, { size: "secondary" /* secondary */ }, "Profit & Loss")),
     /* @__PURE__ */ import_react112.default.createElement(ProfitAndLoss.Chart, null)
-  ), /* @__PURE__ */ import_react112.default.createElement("div", { className: "accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ import_react112.default.createElement(Container, { name: "accounting-overview-profit-and-loss-chart" }, /* @__PURE__ */ import_react112.default.createElement(ProfitAndLoss.DetailedCharts, { scope: "revenue", hideClose: true })), /* @__PURE__ */ import_react112.default.createElement(Container, { name: "accounting-overview-profit-and-loss-chart" }, /* @__PURE__ */ import_react112.default.createElement(ProfitAndLoss.DetailedCharts, { scope: "expenses", hideClose: true })))));
+  ), /* @__PURE__ */ import_react112.default.createElement("div", { className: "accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ import_react112.default.createElement(
+    Toggle,
+    {
+      name: "pnl-detailed-charts",
+      options: [
+        {
+          value: "revenue",
+          label: "Revenue"
+        },
+        {
+          value: "expenses",
+          label: "Expenses"
+        }
+      ],
+      selected: pnlToggle,
+      onChange: (e) => setPnlToggle(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react112.default.createElement(
+    Container,
+    {
+      name: (0, import_classnames44.default)(
+        "accounting-overview-profit-and-loss-chart",
+        pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
+      )
+    },
+    /* @__PURE__ */ import_react112.default.createElement(ProfitAndLoss.DetailedCharts, { scope: "revenue", hideClose: true })
+  ), /* @__PURE__ */ import_react112.default.createElement(
+    Container,
+    {
+      name: (0, import_classnames44.default)(
+        "accounting-overview-profit-and-loss-chart",
+        pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
+      )
+    },
+    /* @__PURE__ */ import_react112.default.createElement(ProfitAndLoss.DetailedCharts, { scope: "expenses", hideClose: true })
+  ))));
 };
 
 // src/views/BankTransactionsWithLinkedAccounts/BankTransactionsWithLinkedAccounts.tsx