@zeniai/web-components 3.17.1 → 3.17.2

package/dist/NewGlobalMerchantPage-Ds5Bv5Rb.js

@@ -1,543 +0,0 @@
-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-DOPIZEh4.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
-};