@zeniai/web-components 3.17.10 → 3.17.12

package/dist/NewGlobalMerchantPage-Bd8K9rro.js

@@ -0,0 +1,543 @@
+import { d as H, m as Q, j as n, n as X, g as Y, h as Z, F as ee } from "./vendor-.pnpm-B2klaOGU.js";
+import { useMemo as I, useEffect as U } from "react";
+import r from "@emotion/styled";
+import { u as G, aB as ne, R as a, fM as te, A as oe, gx as le, a as z, C as T, D as o, S as t, aw as O, jC as re, fj as k, aS as ie, w as ae, eF as se, aD as de, ao as ce, b as me, J as he, iM as ue, o as ge } from "./index-HuMzFv1o.js";
+import { css as be } from "@emotion/react";
+const x = {
+  width: new a(343, 580, 726),
+  height: new a(o[6], o[6]),
+  controlHeight: new a(o[6], o[6]),
+  paddingTopBottom: new a(o[2], o[2]),
+  marginRight: new a(o[2], o[2]),
+  labelMarginLeft: new a(o[3], o[4]),
+  labelMarginRight: new a(o[3], o[4]),
+  labelMarginTop: new a(o[2], o[2])
+}, pe = {
+  infoLabel: new O("smallRegular", "standardRegular")
+}, fe = z.getLocalizedStrings();
+function xe({
+  label: e,
+  textField: l,
+  additionalInfo: m,
+  checkBoxFields: h,
+  fetchState: b,
+  style: y,
+  toolTip: $,
+  isOptionalLabel: M
+}) {
+  const d = G(), {
+    formState: { errors: s }
+  } = H(), S = Q(s, l.name);
+  return /* @__PURE__ */ n.jsxs(
+    we,
+    {
+      windowSize: d,
+      style: y,
+      isDisabled: l.isDisabled != null,
+      isError: S,
+      children: [
+        /* @__PURE__ */ n.jsx(
+          ne,
+          {
+            isDisabled: l.isDisabled,
+            label: e.label,
+            style: {
+              marginLeft: x.labelMarginLeft.value(d),
+              marginRight: x.labelMarginRight.value(d),
+              marginTop: x.labelMarginTop.value(d),
+              width: e.width ?? "auto"
+            },
+            showTooltip: $ != null,
+            tooltipTitle: $?.title,
+            toolTipWidth: $?.width,
+            isOptional: M
+          }
+        ),
+        /* @__PURE__ */ n.jsxs($e, { labelWidth: e.width, children: [
+          /* @__PURE__ */ n.jsx(
+            te,
+            {
+              ...l,
+              style: {
+                ...l.style,
+                display: "flex",
+                flexGrow: 1,
+                width: "-webkit-fill-available",
+                height: x.controlHeight.value(d),
+                cursor: "inherit"
+              }
+            }
+          ),
+          b?.fetchState === "In-Progress" ? /* @__PURE__ */ n.jsx(ve, { children: /* @__PURE__ */ n.jsx(oe, { size: "Standard", start: !0 }) }) : /* @__PURE__ */ n.jsxs(ye, { children: [
+            /* @__PURE__ */ n.jsxs(
+              Se,
+              {
+                windowSize: d,
+                isRecommendationVisible: h.length > 0,
+                isError: S,
+                children: [
+                  m.icon,
+                  m.label
+                ]
+              }
+            ),
+            h.length > 0 ? h.map((p, f) => /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+              /* @__PURE__ */ n.jsx(
+                le,
+                {
+                  isHighlighted: !0,
+                  label: { label: p.label },
+                  checkBoxField: p.field,
+                  defaultChecked: p.field.defaultChecked,
+                  isDisabled: p.field.isDisabled != null
+                },
+                X()
+              ),
+              f < h.length - 1 ? /* @__PURE__ */ n.jsx(Me, { children: fe.common.texts.or }) : null
+            ] })) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const we = r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => x.width.valuePx(e.windowSize)};
+  min-height: ${(e) => x.height.valuePx(e.windowSize)};
+  padding-right: ${(e) => x.marginRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => x.paddingTopBottom.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => x.paddingTopBottom.valuePx(e.windowSize)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+
+    input {
+      background-color: ${(e) => e.isError ? T.importantLight : e.theme.colors.background};
+    }
+  }
+  input {
+    background-color: ${(e) => e.isError ? T.importantLight : e.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+    input {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? T.importantLight : e.theme.colors.background};
+    }
+  }
+`, $e = r.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  align-items: flex-end;
+  flex-grow: 1;
+`, Se = r.label`
+  display: flex;
+  color: ${(e) => e.isError ? T.important : e.theme.colors.primary};
+  ${(e) => `${pe.infoLabel.style(e.windowSize)}`};
+  text-align: right;
+`, ve = r.div`
+  height: 100%;
+  width: 100%;
+  margin-top: ${t.sp2};
+  display: flex;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, ye = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: ${t.sp2};
+  padding-right: ${t.sp3};
+  gap: ${t.sp3};
+`, Me = r.div`
+  color: ${(e) => e.theme.colors.hero};
+`, Ne = {
+  labelWidth: new a(120, 145, 160)
+}, Re = z.getLocalizedStrings(), {
+  common: Te,
+  vendorReview: { globalReview: E }
+} = Re, { sectionTitles: je, labels: R } = Te, Pe = ({
+  recommendationFetchState: e,
+  newGlobalMerchantData: l,
+  recommendedGlobalMerchants: m,
+  sectionId: h,
+  isDisabled: b,
+  style: y,
+  fetchRecommendation: $
+}) => {
+  const M = G(), d = Ne.labelWidth.value(M), { formState: s } = H(), S = () => {
+    l?.globalMerchantName != null && l.globalMerchantName.trim().length > 2 && s.dirtyFields[h]?.globalMerchantName === !0 && $();
+  }, p = [];
+  return m.length > 0 && m.forEach((f, j) => {
+    const u = `recommended${re(j)}`;
+    p.push({
+      field: {
+        name: C(h, u),
+        defaultChecked: l?.currentSelection === u,
+        isDisabled: b
+      },
+      label: f.globalMerchantName
+    });
+  }), /* @__PURE__ */ n.jsxs(Ce, { style: y, children: [
+    /* @__PURE__ */ n.jsx(Ge, { children: je.vendorDetails }),
+    /* @__PURE__ */ n.jsxs(ze, { children: [
+      /* @__PURE__ */ n.jsx(
+        xe,
+        {
+          label: {
+            label: R.name,
+            width: d
+          },
+          textField: {
+            type: "text",
+            name: C(h, "globalMerchantName"),
+            placeholder: k(R.name),
+            defaultValue: l?.globalMerchantName,
+            autoComplete: "off",
+            isDisabled: e.fetchState === "In-Progress" ? "readonly" : b,
+            registerOptions: {
+              required: !0
+            },
+            onBlur: S,
+            onKeyDown: (f) => {
+              f.key === "Enter" && (f.preventDefault(), S());
+            }
+          },
+          checkBoxFields: p,
+          fetchState: e,
+          additionalInfo: {
+            label: m.length > 0 ? E.newGlobalMerchant.recommendationText : E.newGlobalMerchant.recommendationInfoText,
+            icon: /* @__PURE__ */ n.jsx(De, { children: /* @__PURE__ */ n.jsx(We, {}) })
+          },
+          style: { width: "auto" }
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        ie,
+        {
+          isDisabled: e.fetchState === "In-Progress" ? "readonly" : b,
+          label: {
+            label: R.websiteURL,
+            width: d
+          },
+          text: {
+            type: "url",
+            name: C(h, "globalMerchantWebsiteUrl"),
+            placeholder: k(R.websiteURL),
+            defaultValue: l?.globalMerchantWebsiteUrl?.toString(),
+            autoComplete: "off",
+            options: { required: !0 }
+          },
+          style: { width: "auto" }
+        }
+      )
+    ] })
+  ] });
+}, C = (e, l) => `${e}.${l}`, Ce = r.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${t.sp3};
+  padding-bottom: ${t.sp3};
+`, Ge = r(ae)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${t.sp3};
+  margin-right: ${t.sp6};
+`, ze = r.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  ${(e) => be`
+    box-shadow: ${t.sp0} 2px ${t.sp1}
+      ${e.theme.colors.dropShadowNormal};
+  `};
+  border-radius: ${t.sp2};
+`, De = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${t.sp2};
+`, We = r(se)`
+  color: ${(e) => e.theme.colors.brandColorJade};
+  width: ${t.sp3};
+  height: ${t.sp3};
+`, v = {
+  containerPaddingLeft: new a(o[3], o[3], o[6]),
+  containerPaddingRight: new a(o[3], o[3], o[8]),
+  navbarContainerPaddingTop: new a(o[2], o[3]),
+  navbarContainerPaddingBottom: new a(o[4], o[5]),
+  sectionTitleMarginTop: new a(0, o[3]),
+  sectionTitleMarginLeft: new a(o[3], 0)
+}, Fe = {
+  sectionTitle: new O("h6Regular", "h5Regular")
+}, q = "newGlobalMerchantPage", w = "newGlobalMerchant", Le = z.getLocalizedStrings(), {
+  common: { footer: B, sectionTitles: Ie },
+  vendorReview: { globalReview: Ue }
+} = Le, nn = ({
+  globalMerchantView: e,
+  analytics: l,
+  tenantMerchant: m,
+  isDisabled: h,
+  updateCreateGlobalMerchantLocalData: b,
+  fetchRecommendation: y,
+  onBackClick: $,
+  onSaveClick: M
+}) => {
+  const d = G(), s = Y({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: I(
+      () => A(e),
+      [e]
+    ),
+    values: I(
+      () => A(e),
+      [e]
+    ),
+    resetOptions: {
+      keepDefaultValues: !0,
+      keepDirtyValues: !0
+    }
+  }), S = () => {
+    if (e.newGlobalMerchantData != null) {
+      const i = m?.tenantName ?? null, g = e.newGlobalMerchantData.globalMerchantName, c = e.recommendedGlobalMerchants[0]?.globalMerchantName ?? null;
+      l.trackVendorReviewNewVendorRequested({
+        reviewSource: "global_review",
+        newRequestedVendorName: g,
+        tenantName: i,
+        newRequestedVendorNameSource: i != null ? "text_edit" : "new_vendor_button",
+        isVendorNameRecommendationSelected: c === g,
+        recommendedVendorName: c,
+        recommendedVendorReason: e.recommendedGlobalMerchants[0]?.reason ?? null
+      });
+    }
+    y();
+  }, p = () => {
+    if (e.newGlobalMerchantData != null) {
+      const i = m?.tenantName ?? null, g = e.newGlobalMerchantData.globalMerchantName, c = e.recommendedGlobalMerchants[0]?.globalMerchantName ?? null;
+      l.trackVendorReviewNewVendorSaved({
+        reviewSource: "global_review",
+        saveRequestedVendorName: g,
+        tenantName: i,
+        recommendedVendorName: c,
+        saveRequestedVendorSource: i != null ? "text_edit" : "new_vendor_button",
+        recommendedVendorReason: e.recommendedGlobalMerchants[0]?.reason ?? null,
+        isVendorNameRecommendationSelected: c === g
+      });
+    }
+    M();
+  }, f = () => {
+    e.newGlobalMerchantData != null && l.trackVendorReviewNewVendorCanceled({
+      reviewSource: "global_review",
+      newRequestedVendorName: e.newGlobalMerchantData.globalMerchantName,
+      tenantName: m?.tenantName ?? null,
+      recommendedVendorName: e.recommendedGlobalMerchants[0]?.globalMerchantName ?? null,
+      recommendedVendorReason: e.recommendedGlobalMerchants[0]?.reason ?? null
+    }), $();
+  }, j = () => {
+    p();
+  }, D = async (i, g) => {
+    const {
+      newGlobalMerchant: {
+        globalMerchantName: c,
+        recommendedFirst: F,
+        recommendedSecond: L,
+        globalMerchantWebsiteUrl: K
+      }
+    } = g;
+    if (i.includes("globalMerchantName") || i.includes("globalMerchantWebsiteUrl")) {
+      let P = null;
+      c === e.recommendedGlobalMerchants[0]?.globalMerchantName ? P = "recommendedFirst" : c === e.recommendedGlobalMerchants[1]?.globalMerchantName && (P = "recommendedSecond"), b(
+        c,
+        P,
+        K
+      );
+    } else (i.includes("recommendedFirst") || i.includes("recommendedSecond")) && (i.includes("recommendedFirst") && F && e.recommendedGlobalMerchants[0]?.globalMerchantName ? (b(
+      e.recommendedGlobalMerchants[0]?.globalMerchantName,
+      "recommendedFirst",
+      e.recommendedGlobalMerchants[0]?.websiteUrl?.toString()
+    ), e.recommendedGlobalMerchants[0]?.websiteUrl != null && s.setValue(
+      `${w}.globalMerchantWebsiteUrl`,
+      e.recommendedGlobalMerchants[0].websiteUrl.toString()
+    )) : i.includes("recommendedSecond") && L && e.recommendedGlobalMerchants[1]?.globalMerchantName ? (b(
+      e.recommendedGlobalMerchants[1].globalMerchantName,
+      "recommendedSecond",
+      e.recommendedGlobalMerchants[1].websiteUrl?.toString()
+    ), e.recommendedGlobalMerchants[1]?.websiteUrl != null && s.setValue(
+      `${w}.globalMerchantWebsiteUrl`,
+      e.recommendedGlobalMerchants[1].websiteUrl.toString()
+    )) : !F && !L && (s.resetField(
+      `${w}.globalMerchantName`
+    ), s.resetField(
+      `${w}.globalMerchantWebsiteUrl`
+    )));
+  };
+  U(() => {
+    const i = s.watch((g, { name: c }) => {
+      c != null && g != null && Z(() => D(c, g));
+    });
+    return () => {
+      i.unsubscribe();
+    };
+  });
+  const { newGlobalMerchantData: u, fetchState: N, error: V, recommendedGlobalMerchants: J } = e, W = de(N);
+  return U(() => {
+    W === "In-Progress" && N === "Completed" && u?.globalMerchantName != null && (s.resetField(
+      `${w}.globalMerchantName`,
+      { defaultValue: u.globalMerchantName }
+    ), e.recommendedGlobalMerchants.forEach(
+      (i) => {
+        i.globalMerchantName === u.globalMerchantName && i.websiteUrl != null && s.setValue(
+          `${w}.globalMerchantWebsiteUrl`,
+          i.websiteUrl.toString()
+        );
+      }
+    ));
+  }, [
+    W,
+    N,
+    s,
+    u?.globalMerchantName,
+    u?.globalMerchantWebsiteUrl,
+    e.recommendedGlobalMerchants
+  ]), /* @__PURE__ */ n.jsxs(ke, { windowSize: d, children: [
+    /* @__PURE__ */ n.jsxs(Ee, { windowSize: d, children: [
+      /* @__PURE__ */ n.jsx(Be, { children: /* @__PURE__ */ n.jsx(_e, { onClick: f }) }),
+      /* @__PURE__ */ n.jsx(Ae, { windowSize: d, children: Ie.newVendor }),
+      /* @__PURE__ */ n.jsx(He, { children: /* @__PURE__ */ n.jsxs(Oe, { children: [
+        /* @__PURE__ */ n.jsx(Je, { children: /* @__PURE__ */ n.jsx(Ke, {}) }),
+        /* @__PURE__ */ n.jsx(Ve, { children: Ue.newGlobalMerchant.tip })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ n.jsx(qe, { children: /* @__PURE__ */ n.jsx(ee, { ...s, children: /* @__PURE__ */ n.jsx(
+      "form",
+      {
+        id: _(q),
+        onSubmit: s.handleSubmit(j),
+        children: /* @__PURE__ */ n.jsx(
+          Pe,
+          {
+            sectionId: w,
+            isDisabled: u?.status.fetchState === "In-Progress" ? "readonly" : h,
+            newGlobalMerchantData: u,
+            recommendationFetchState: { fetchState: N, error: V },
+            recommendedGlobalMerchants: J,
+            fetchRecommendation: S
+          }
+        )
+      }
+    ) }) }),
+    /* @__PURE__ */ n.jsx(
+      ce,
+      {
+        formId: _(q),
+        primaryBtn: {
+          label: B.save,
+          isLoading: u?.status.fetchState === "In-Progress",
+          isDisabled: N === "In-Progress"
+        },
+        cancelBtn: {
+          label: B.cancel,
+          shouldResetOnCancel: !0,
+          onClick: f
+        }
+      }
+    )
+  ] });
+}, _ = (e) => `${e}_form`, A = (e) => {
+  const { newGlobalMerchantData: l } = e;
+  return {
+    [w]: {
+      globalMerchantName: l?.globalMerchantName ?? "",
+      globalMerchantWebsiteUrl: l?.globalMerchantWebsiteUrl?.toString(),
+      recommendedFirst: l?.currentSelection === "recommendedFirst",
+      recommendedSecond: l?.currentSelection === "recommendedSecond",
+      newGlobalMerchantId: l?.newGlobalMerchantId
+    }
+  };
+}, ke = r.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  width: 100%;
+  padding-left: ${(e) => v.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => v.containerPaddingRight.valuePx(e.windowSize)};
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, Ee = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: ${t.sp0};
+  z-index: 2;
+  padding-top: ${(e) => v.navbarContainerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => v.navbarContainerPaddingBottom.valuePx(e.windowSize)};
+`, qe = r.div`
+  flex: 1;
+`, Be = r.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  align-items: center;
+  padding: ${t.sp3} ${t.sp0};
+`, _e = r(me)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${t.sp4};
+  height: ${t.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ae = r(he)`
+  display: flex;
+  width: 100%;
+  color: ${(e) => e.theme.colors.primary};
+  margin-left: ${(e) => v.sectionTitleMarginLeft.valuePx(e.windowSize)};
+  margin-top: ${(e) => v.sectionTitleMarginTop.valuePx(e.windowSize)};
+  ${(e) => `${Fe.sectionTitle.style(e.windowSize)}`};
+`, He = r.div`
+  display: flex;
+  width: 100%;
+  background-color: transparent;
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${t.sp2};
+  margin-top: ${t.sp3};
+`, Oe = r.div`
+  display: flex;
+  padding: ${t.sp3} ${t.sp4} ${t.sp3} ${t.sp4};
+`, Ve = r(ge)`
+  display: flex;
+  flex-grow: 1;
+  color: ${(e) => e.theme.colors.hero};
+`, Je = r.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${t.sp2};
+`, Ke = r(ue)`
+  color: ${(e) => e.theme.colors.primary};
+  width: ${t.sp4};
+  height: ${t.sp4};
+`;
+export {
+  nn as default,
+  _ as uniqueFormName
+};