@zeniai/web-components 3.16.40 → 3.16.41

package/dist/IntegrationsSettingsPage-DHAdlHrq.js

@@ -0,0 +1,137 @@
+import { j as t, u as S } from "./vendor-.pnpm-BZbZ6JJC.js";
+import n from "@emotion/styled";
+import { a as d, S as o, b2 as y, P as C, u as w, aE as R, R as a, E as b, p as j, D as i } from "./index-BtH6xclG.js";
+import { H as v } from "./HelpButton-B0ZBXPeh.js";
+import { Q as $ } from "./QBOSetupSection-CTMSCXwv.js";
+import { css as I, keyframes as k } from "@emotion/react";
+const {
+  common: { texts: E }
+} = d.getLocalizedStrings();
+function B(e) {
+  return /* @__PURE__ */ t.jsxs(
+    O,
+    {
+      isEnabled: e.isEnabled,
+      onClick: e.onClick,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          P,
+          {
+            spinRefreshIcon: e.spinRefreshIcon,
+            children: /* @__PURE__ */ t.jsx(Q, {})
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, { children: E.refresh })
+      ]
+    }
+  );
+}
+const O = n.div`
+  position: relative;
+  display: flex;
+  width: fit-content;
+  height: ${o.sp4};
+  background: transparent;
+  cursor: ${(e) => e.isEnabled ? "pointer" : "default"};
+  color: ${(e) => e.isEnabled ? e.theme.colors.hero : e.theme.colors.grey2};
+  &:hover {
+    color: ${(e) => e.isEnabled ? e.theme.colors.primary : void 0};
+  }
+`, z = n(C)`
+  margin-left: ${o.sp2};
+  display: flex;
+  align-items: center;
+`, P = n.div`
+  animation: ${(e) => e.spinRefreshIcon ?? !1 ? I`
+          ${L} 3s
+        ` : "none"};
+`, Q = n(y)`
+  height: ${o.sp4};
+  width: ${o.sp4};
+`, L = k`
+  0% {
+    rotate: 0
+  }
+  100% {
+    rotate: 720deg;
+  }
+`, W = {
+  sectionRowGap: new a(i[5], i[9], i[9]),
+  iconWidthHeight: new a(20, i[4]),
+  subtitleSectionWidth: new a(343, 580, 1200)
+}, J = ({
+  isAdmin: e,
+  integrationsView: h,
+  meetingUrl: m,
+  ...f
+}) => {
+  const s = w(), { onClickMenuIcon: g, onRefreshClick: p } = f, u = S(), { companyView: x, externalConnections: r, integrations: c } = h, l = d.getLocalizedStrings().common.settings;
+  return /* @__PURE__ */ t.jsxs(H, { children: [
+    /* @__PURE__ */ t.jsx(
+      R,
+      {
+        source: "IntegrationsSettingsPage",
+        title: l.title.integrations,
+        backgroundColor: u.colors.grey4,
+        showBackButton: !1,
+        showMenuIcon: s === "medium-compact" || s === "small",
+        rightSideComponent: /* @__PURE__ */ t.jsx(
+          B,
+          {
+            isEnabled: c.refreshQBO.fetchState !== "In-Progress",
+            onClick: () => p(),
+            spinRefreshIcon: c.refreshQBO.fetchState === "In-Progress"
+          }
+        ),
+        onClickMenuIcon: g
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(N, { windowSize: s, children: [
+      /* @__PURE__ */ t.jsx(T, { windowSize: s, children: /* @__PURE__ */ t.jsx(V, { windowSize: s, children: l.infoText.integrations }) }),
+      /* @__PURE__ */ t.jsx(
+        $,
+        {
+          isAdmin: e,
+          isValid: r?.accounting[0]?.isValid ?? !1,
+          hasError: !1,
+          companyName: x?.companyInfo.companyLegalName,
+          saveConnectionState: r?.saveConnectionState,
+          isQBOPopupOpen: !1,
+          handleOnConnectClick: () => null,
+          updateQBOPopupState: () => null
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsx(v, { meetingUrl: m, isFooterRendered: !1 })
+  ] });
+}, H = n.div`
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  row-gap: ${o.sp3};
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, N = n.div`
+  width: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`, T = n(b)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${(e) => W.subtitleSectionWidth.valuePx(e.windowSize)};
+  margin-bottom: ${o.sp5};
+`, V = n(j)`
+  display: flex;
+  align-items: center;
+
+  color: ${(e) => e.theme.colors.hero};
+`;
+export {
+  J as default
+};