@zeniai/web-components 3.16.99 → 3.17.2

package/dist/ReimbursementPromoPage-BfeTNrYF.js

@@ -0,0 +1,363 @@
+import { u as y, j as e } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as B, useEffect as ie } from "react";
+import r from "@emotion/styled";
+import { hasReimbursementAdminLevelAccess as le, hasReimbursementAccess as ae } from "@zeniai/client-epic-state";
+import { dB as ce, u as $, aD as me, a as D, e as a, hH as de, aE as pe, B as u, er as c, S as o, V as xe, H as he, P as E, E as ue, R as ge, C as v, ad as je, a7 as be, n as we, D as Se } from "./index-BEMjPEfs.js";
+import { V as fe } from "./VideoPopup-F9BDn61E.js";
+import { S as T } from "./usp-line-BBd1wKwW.js";
+const H = "https://storage.googleapis.com/zeni-apis.appspot.com/images/reimbursement-promo-light.png", O = "https://storage.googleapis.com/zeni-apis.appspot.com/images/reimbursement-promo-dark.png", ye = {
+  midContainerMarginBottom: new ge(Se[5], 44)
+}, $e = r.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  background-color: ${(s) => s.theme.colors.grey4};
+`, ve = r.div`
+  padding: ${(s) => s.windowSize === "small" ? `${o.sp0} ${o.sp3}` : `${o.sp0} ${o.sp8}`};
+  text-align: center;
+`, Te = r(he)`
+  max-width: 648px;
+  margin: auto;
+  padding: ${o.sp7} ${o.sp0};
+  color: ${(s) => s.theme.colors.primary};
+`, ke = r(xe)`
+  max-width: 600px;
+  margin: auto;
+  padding: ${o.sp5} ${o.sp0};
+  color: ${(s) => s.theme.colors.primary};
+`, V = r.div`
+  display: flex;
+  flex-direction: ${(s) => s.windowSize === "small" ? "column" : "row"};
+  align-items: center;
+  justify-content: center;
+  margin-bottom: ${(s) => ye.midContainerMarginBottom.valuePx(s.windowSize)};
+`, Pe = r.div``, I = r.div`
+  display: flex;
+  flex-direction: ${(s) => s.windowSize === "small" ? "column" : "row"};
+  align-items: center;
+  justify-content: center;
+`, g = r.img``, Z = r.div`
+  width: ${(s) => s.windowSize === "small" ? "auto" : "376px"};
+  display: flex;
+  flex-direction: column;
+`, F = r.div`
+  width: ${(s) => s.windowSize === "small" ? "100%" : "calc(100% - 376px)"};
+  overflow: hidden;
+  max-width: 712px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+`, N = r.div`
+  margin-left: ${(s) => s.windowSize === "small" ? o.sp0 : o.sp6};
+  margin-bottom: ${(s) => s.windowSize === "small" ? o.sp4 : o.sp0};
+  background: ${(s) => s.theme.colors.grey3};
+  border-radius: 12px;
+  border: ${(s) => `1px solid ${s.theme.colors.grey3}`};
+  padding: 15px;
+`, m = r.div`
+  border-radius: ${o.sp12};
+  border: ${(s) => `1px solid ${s.theme.colors.grey2}`};
+  padding: ${(s) => s.windowSize === "small" ? `${o.sp2} ${o.sp4} ${o.sp2} ${o.sp0}` : `${o.sp3} ${o.sp5} ${o.sp3} ${o.sp0}`};
+  background: ${(s) => s.theme.colors.grey5};
+  position: relative;
+  margin-bottom: ${o.sp3};
+  display: flex;
+  align-items: center;
+  text-align: start;
+  box-sizing: border-box;
+`, b = r(we)`
+  color: ${(s) => s.theme.colors.champion};
+`, w = r(be)`
+  color: ${(s) => s.theme.colors.champion};
+`, S = r(E)`
+  color: ${(s) => s.theme.colors.champion};
+`, f = r(je)`
+  color: ${(s) => s.theme.colors.champion};
+`, d = r.div``, p = r.div`
+  padding-left: ${o.sp3};
+`, M = r(E)`
+  margin: ${(s) => s.windowSize === "small" ? o.sp1 : `auto ${o.sp5}`};
+  color: ${(s) => s.theme.colors.grey1};
+`, W = r(T)`
+  color: ${v.graphColor16Dark};
+`, G = r(T)`
+  color: ${v.graphColor09Dark};
+`, q = r(T)`
+  color: ${v.success};
+`, L = r(ue)`
+  margin: ${o.sp3} auto;
+  max-width: 772px;
+  color: ${(s) => s.theme.colors.hero};
+`, t = D.getLocalizedStrings().spendManagement.reimbursement.reimbursementPromo, i = D.getLocalizedStrings().commonSetUp.businessVerification.terms, Ce = () => {
+  const s = y(), n = $();
+  return /* @__PURE__ */ e.jsxs(V, { windowSize: n, children: [
+    /* @__PURE__ */ e.jsx(F, { windowSize: n, children: /* @__PURE__ */ e.jsx(N, { windowSize: n, children: s.mode === "dark" ? /* @__PURE__ */ e.jsx(
+      g,
+      {
+        src: O,
+        alt: "forecast-promo",
+        style: { width: "100%", height: "auto" },
+        loading: "lazy"
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      g,
+      {
+        src: H,
+        alt: "forecast-promo",
+        style: { width: "100%", height: "auto" },
+        loading: "lazy"
+      }
+    ) }) }),
+    /* @__PURE__ */ e.jsxs(Z, { windowSize: n, children: [
+      /* @__PURE__ */ e.jsxs(m, { windowSize: n, children: [
+        /* @__PURE__ */ e.jsx(d, { children: /* @__PURE__ */ e.jsx(W, {}) }),
+        /* @__PURE__ */ e.jsxs(p, { children: [
+          /* @__PURE__ */ e.jsx(f, { children: t.simplestText.bold }),
+          /* @__PURE__ */ e.jsx(S, { children: t.simplestText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs(m, { windowSize: n, children: [
+        /* @__PURE__ */ e.jsx(d, { children: /* @__PURE__ */ e.jsx(G, {}) }),
+        /* @__PURE__ */ e.jsxs(p, { children: [
+          /* @__PURE__ */ e.jsx(f, { children: t.aiPoweredText.bold }),
+          /* @__PURE__ */ e.jsx(S, { children: t.aiPoweredText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs(m, { windowSize: n, children: [
+        /* @__PURE__ */ e.jsx(d, { children: /* @__PURE__ */ e.jsx(q, {}) }),
+        /* @__PURE__ */ e.jsxs(p, { children: [
+          /* @__PURE__ */ e.jsx(f, { children: t.multiLevelApprovalText.bold }),
+          /* @__PURE__ */ e.jsx(S, { children: t.multiLevelApprovalText.regular })
+        ] })
+      ] })
+    ] })
+  ] });
+}, Re = () => {
+  const s = y(), n = $();
+  return /* @__PURE__ */ e.jsxs(V, { windowSize: n, children: [
+    /* @__PURE__ */ e.jsxs(Z, { windowSize: n, children: [
+      /* @__PURE__ */ e.jsxs(m, { windowSize: n, style: { width: "376px" }, children: [
+        /* @__PURE__ */ e.jsx(d, { children: /* @__PURE__ */ e.jsx(W, {}) }),
+        /* @__PURE__ */ e.jsxs(p, { children: [
+          /* @__PURE__ */ e.jsx(w, { children: t.simplestText.bold }),
+          /* @__PURE__ */ e.jsx(b, { children: t.simplestText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs(m, { windowSize: n, style: { width: "376px" }, children: [
+        /* @__PURE__ */ e.jsx(d, { children: /* @__PURE__ */ e.jsx(G, {}) }),
+        /* @__PURE__ */ e.jsxs(p, { children: [
+          /* @__PURE__ */ e.jsx(w, { children: t.aiPoweredText.bold }),
+          /* @__PURE__ */ e.jsx(b, { children: t.aiPoweredText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs(m, { windowSize: n, style: { width: "376px" }, children: [
+        /* @__PURE__ */ e.jsx(d, { children: /* @__PURE__ */ e.jsx(q, {}) }),
+        /* @__PURE__ */ e.jsxs(p, { children: [
+          /* @__PURE__ */ e.jsx(w, { children: t.multiLevelApprovalText.bold }),
+          /* @__PURE__ */ e.jsx(b, { children: t.multiLevelApprovalText.regular })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx(F, { windowSize: n, children: /* @__PURE__ */ e.jsx(N, { windowSize: n, children: s.mode === "dark" ? /* @__PURE__ */ e.jsx(
+      g,
+      {
+        src: O,
+        alt: "forecast-promo",
+        style: { width: "615px", height: "402px" },
+        loading: "lazy"
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      g,
+      {
+        src: H,
+        alt: "forecast-promo",
+        style: { width: "615px", height: "402px" },
+        loading: "lazy"
+      }
+    ) }) })
+  ] });
+}, Ee = ({
+  reimbursementSetupView: s,
+  userReimbursementInfo: n,
+  meetingUrl: J,
+  videoUrl: K,
+  analytics: x,
+  onSetupButtonClick: Q,
+  onCreateNewRemiButtonClick: X,
+  onBackClick: Y,
+  onSetupReimbursementSuccess: k,
+  onClickMenuIcon: _
+}) => {
+  const P = ce(), [ee, se] = B(!1), [te, C] = B(!1), oe = y(), l = $(), { remiTermsDetails: h } = s, R = me(h?.fetchStatus.fetchState), re = le(
+    P.loggedInUserRoleMap
+  ), j = ae(
+    P.loggedInUserRoleMap
+  ) && !re, ne = !!n?.isReimbursementTOSAccepted, z = !!s.companyRemiInfo?.isReimbursementEnabled, A = j ? z ? t.employeeAcceptPromoText : t.employeePendingPromoText : t.promoText;
+  ie(() => {
+    R === "In-Progress" && h?.fetchStatus.fetchState === "Completed" && k?.();
+  }, [
+    R,
+    k,
+    h?.fetchStatus
+  ]);
+  const U = () => {
+    x?.trackReimbursementPromoScheduleDemo(), C(!0);
+  };
+  return /* @__PURE__ */ e.jsxs($e, { children: [
+    ee === !0 ? /* @__PURE__ */ e.jsx(
+      fe,
+      {
+        onCancelClick: () => {
+          se(!1);
+        },
+        videoUrl: K,
+        "data-testid": a("remi-promo-page-video-popup")
+      }
+    ) : null,
+    te === !0 ? /* @__PURE__ */ e.jsx(
+      de,
+      {
+        onCancelClick: () => {
+          C(!1);
+        },
+        meetingUrl: J,
+        "data-testid": a("remi-promo-page-meeting-popup")
+      }
+    ) : null,
+    /* @__PURE__ */ e.jsx(
+      pe,
+      {
+        title: t.title,
+        backgroundColor: oe.colors.grey4,
+        onBackClick: Y,
+        showBackButton: !j,
+        showMenuIcon: l === "small" || l === "medium-compact",
+        onClickMenuIcon: _,
+        source: "ReimbursementPromoPage"
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(ve, { windowSize: l, children: [
+      l === "small" ? /* @__PURE__ */ e.jsx(ke, { children: A }) : /* @__PURE__ */ e.jsx(Te, { children: A }),
+      l === "small" ? /* @__PURE__ */ e.jsx(Ce, {}) : /* @__PURE__ */ e.jsx(Re, {}),
+      /* @__PURE__ */ e.jsx(Pe, { children: j ? /* @__PURE__ */ e.jsx(e.Fragment, { children: z && !ne ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxs(I, { windowSize: l, children: [
+          /* @__PURE__ */ e.jsx(
+            u,
+            {
+              variant: "secondary",
+              label: t.scheduleDemoButton,
+              onClick: U,
+              "data-testid": a(
+                "reimbursement-promo-page-schedule-demo-button"
+              )
+            }
+          ),
+          /* @__PURE__ */ e.jsx(M, { windowSize: l, children: t.orText }),
+          /* @__PURE__ */ e.jsx(
+            u,
+            {
+              variant: "primary",
+              label: t.createNewReimbursementButton,
+              loading: h?.fetchStatus.fetchState === "In-Progress",
+              onClick: X,
+              "data-testid": a(
+                "reimbursement-promo-page-create-new-reimbursement-button"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs(L, { children: [
+          t.terms.createTerms1,
+          /* @__PURE__ */ e.jsx(
+            c,
+            {
+              href: t.terms.tosUrl,
+              linkText: t.terms.zeniAgreement,
+              onZeniLinkClick: () => (x?.trackReimbursementAgreement(), !0)
+            }
+          ),
+          t.terms.terms2,
+          /* @__PURE__ */ e.jsx(
+            c,
+            {
+              href: t.terms.privacyPolicyUrl,
+              linkText: t.terms.privacyPolicy,
+              onZeniLinkClick: () => (x?.trackReimbursementPrivacyPolicy(), !0)
+            }
+          ),
+          t.terms.terms3
+        ] })
+      ] }) : null }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxs(I, { windowSize: l, children: [
+          /* @__PURE__ */ e.jsx(
+            u,
+            {
+              variant: "secondary",
+              label: t.scheduleDemoButton,
+              onClick: U,
+              style: {
+                width: 216
+              },
+              "data-testid": a(
+                "reimbursement-promo-page-schedule-demo-button"
+              )
+            }
+          ),
+          /* @__PURE__ */ e.jsx(M, { windowSize: l, children: t.orText }),
+          /* @__PURE__ */ e.jsx(
+            u,
+            {
+              variant: "primary",
+              label: t.setupReimbursementButton,
+              loading: h?.fetchStatus.fetchState === "In-Progress",
+              onClick: Q,
+              style: {
+                width: 216
+              },
+              "data-testid": a(
+                "reimbursement-promo-page-setup-reimbursement-button"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs(L, { children: [
+          t.terms.setupTerms1,
+          /* @__PURE__ */ e.jsx(c, { href: i.consentUrl, linkText: i.consent }),
+          i.term2,
+          /* @__PURE__ */ e.jsx(
+            c,
+            {
+              href: i.depositUrl,
+              linkText: i.depositTerms
+            }
+          ),
+          i.term3,
+          /* @__PURE__ */ e.jsx(
+            c,
+            {
+              href: i.privacyPolicyUrl,
+              linkText: i.privacy,
+              onZeniLinkClick: () => (x?.trackReimbursementPrivacyPolicy(), !0)
+            }
+          ),
+          i.term4,
+          /* @__PURE__ */ e.jsx(
+            c,
+            {
+              href: i.tosUrl,
+              linkText: i.tos,
+              onZeniLinkClick: () => (x?.trackReimbursementAgreement(), !0)
+            }
+          ),
+          i.term5,
+          t.terms.terms3
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+export {
+  Ee as default
+};