@zeniai/web-components 3.17.10 → 3.17.11

package/dist/GlobalReviewListPage-D6RcLkeA.js

@@ -0,0 +1,1674 @@
+import { j as t, d as De, C as Ye, A as Je, I as Ze, V as Qe, u as Xe, g as et, l as tt, h as nt, F as ot } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as pe, useEffect as ne, useMemo as lt, useRef as je } from "react";
+import r from "@emotion/styled";
+import { u as D, fg as Ne, S as o, B as Se, y as rt, R as k, a as xe, eF as st, e as O, F as be, aa as it, ab as at, aI as ae, D as $, gh as ke, jC as dt, g4 as $e, fq as ge, Z as G, gx as Me, jN as ct, o as ht, jO as Be, _ as gt, a9 as mt, C as ze, z as ut, fh as pt, aL as xt, A as bt, eU as qe, P as wt, aE as ft } from "./index-Dg4HzhKR.js";
+import { stringToUnionStrict as vt, toVendorGlobalReviewColumnSortKeyType as yt } from "@zeniai/client-epic-state";
+import { css as Ce } from "@emotion/react";
+import { S as jt } from "./undo-b_3XZ5CX.js";
+const Ve = "recommendedFirst", Te = "recommendedSecond", z = "currentSelection", ve = "originalVendor", me = "requested", de = (e, l) => `${e}.${l}`, ce = (e, l, d) => d != null ? `${e}.${l}.${d}` : `${e}.${l}`;
+function St(e) {
+  const l = D(), {
+    button: { label: d, onClick: n },
+    search: { isOpen: m, placeHolder: g, searchText: b, onTextChange: y }
+  } = e;
+  return /* @__PURE__ */ t.jsxs($t, { children: [
+    /* @__PURE__ */ t.jsx(
+      Ct,
+      {
+        isSearchOpen: m && l === "small",
+        windowsize: l,
+        children: l !== "small" ? /* @__PURE__ */ t.jsx(
+          Ne,
+          {
+            style: {
+              position: "absolute",
+              left: "unset",
+              right: o.sp0
+            },
+            placeholder: g,
+            searchText: b,
+            onSearchTextChanged: y
+          }
+        ) : null
+      }
+    ),
+    l === "small" ? /* @__PURE__ */ t.jsx(
+      Ne,
+      {
+        style: {
+          position: "absolute",
+          left: "5px",
+          right: "unset",
+          top: "44px",
+          width: "98%"
+        },
+        placeholder: g,
+        searchText: b,
+        onSearchTextChanged: y,
+        keepSearchBoxOpen: !0
+      }
+    ) : null,
+    l === "small" ? /* @__PURE__ */ t.jsx(It, { style: { marginLeft: o.sp5 } }) : /* @__PURE__ */ t.jsx(
+      Se,
+      {
+        variant: "primary",
+        onClick: n,
+        label: d,
+        size: "small",
+        style: {
+          marginLeft: o.sp3
+        }
+      }
+    )
+  ] });
+}
+const $t = r.div`
+  display: flex;
+  flex-direction: row;
+  padding-right: ${o.sp0};
+`, Ct = r.div`
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  align-items: center;
+  width: ${(e) => e.isSearchOpen ? "100%" : "unset"};
+`, It = r(rt)`
+  height: ${o.sp4};
+  width: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, Lt = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, Nt = r(st)`
+  color: ${(e) => e.theme.colors.brandColorJade};
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, { headers: we, strings: kt } = xe.getLocalizedStrings().common, Mt = {
+  key: "tenants",
+  value: we.tenants,
+  sortOrder: "ascending",
+  width: new k(15, 15)
+}, Vt = {
+  key: "requestedVendor",
+  value: we.requestedVendor,
+  sortOrder: "ascending",
+  width: new k(28, 28)
+}, Tt = {
+  key: "originalVendor",
+  value: we.originalVendor,
+  sortOrder: "ascending",
+  width: new k(15, 15)
+}, Rt = {
+  key: "recommended",
+  value: we.recommended,
+  sortOrder: "ascending",
+  width: new k(30, 30),
+  icon: /* @__PURE__ */ t.jsx(Lt, { children: /* @__PURE__ */ t.jsx(Nt, {}) })
+}, At = {
+  key: "action",
+  value: kt.empty,
+  sortOrder: "ascending",
+  width: new k(12, 12)
+}, M = [
+  Mt,
+  Tt,
+  Rt,
+  Vt,
+  At
+], ye = {
+  sortKey: "tenants",
+  sortOrder: "ascending"
+}, Pt = 88, Ee = 53, Ot = 1, Wt = ["action"], Re = (e) => vt(e, Wt), Ue = ({
+  sortConfig: e,
+  isDisabled: l,
+  onColumnSortConfigChanged: d
+}) => {
+  const n = D(), [m, g] = pe(M);
+  ne(() => {
+    const c = [...m];
+    for (const h of c)
+      h.key === e.sortKey ? h.sortOrder = e.sortOrder : h.sortOrder = "ascending";
+    g(c);
+  }, [e.sortKey, e.sortOrder]);
+  const b = (c, h) => {
+    let j = h;
+    e.sortKey === c && (j = h === "ascending" ? "descending" : "ascending"), d?.(c, j);
+  }, y = (c) => {
+    Re(c.key) == null && b(
+      yt(c.key),
+      c.sortOrder
+    );
+  };
+  return /* @__PURE__ */ t.jsx(Ht, { windowSize: n, children: m.map((c) => {
+    const h = l != null || Re(c.key) != null;
+    return /* @__PURE__ */ t.jsxs(
+      Ft,
+      {
+        sortDataValue: e.sortKey,
+        actualDataValue: c.key,
+        wrapperWidth: c.width,
+        isSortDisabled: h,
+        windowSize: n,
+        children: [
+          /* @__PURE__ */ t.jsxs(
+            Ut,
+            {
+              onClick: () => h ? null : y(c),
+              isSortDisabled: h,
+              "data-testid": O(
+                "global-review-list-header-name-wrapper"
+              ),
+              children: [
+                c.icon,
+                /* @__PURE__ */ t.jsx(_t, { children: c.value }),
+                h ? null : /* @__PURE__ */ t.jsx(
+                  zt,
+                  {
+                    sortConfig: e,
+                    headerdata: c,
+                    children: /* @__PURE__ */ t.jsx(Et, {})
+                  }
+                )
+              ]
+            }
+          ),
+          h ? null : /* @__PURE__ */ t.jsx(
+            qt,
+            {
+              isSortDisabled: h,
+              sortDataValue: e.sortKey,
+              isVisible: e.sortKey === c.key && e.sortKey !== ye.sortKey,
+              children: /* @__PURE__ */ t.jsx(
+                Bt,
+                {
+                  onClick: () => {
+                    h || b(
+                      ye.sortKey,
+                      // default sort key
+                      ye.sortOrder
+                      // default sort order
+                    );
+                  },
+                  "data-testid": O(
+                    "global-review-list-header-close-icon"
+                  )
+                }
+              )
+            }
+          )
+        ]
+      },
+      c.key
+    );
+  }) });
+}, Ht = r.div`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  height: ${Ee}px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: ${o.sp0} ${o.sp4};
+  background-color: ${(e) => e.theme.colors.grey4};
+  position: sticky;
+  margin: ${o.sp0} ${o.sp8};
+`, Ft = r.div`
+  color: ${(e) => e.sortDataValue === e.actualDataValue && !e.isSortDisabled ? e.theme.colors.primary : e.theme.colors.grey1};
+
+  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  padding-left: ${o.sp0};
+  left: ${o.sp0};
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-start;
+  position: static;
+  z-index: 0;
+  box-sizing: border-box;
+`, Bt = r(at)`
+  width: 12px;
+  height: 12px;
+`, zt = r.div`
+  display: flex;
+  align-items: center;
+  transform: ${(e) => e.headerdata.sortOrder === "descending" ? "rotate(180deg)" : "rotate(0deg)"};
+  ${(e) => e.headerdata.sortOrder === "ascending" ? "padding-top: 2px" : "padding-bottom: 2px"};
+`, qt = r.div`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  align-items: center;
+  padding-top: 2px;
+  cursor: ${(e) => e.isSortDisabled === !0 ? "not-allowed" : "pointer"};
+  &:hover {
+    color: ${(e) => e.isSortDisabled ? e.theme.colors.grey1 : e.theme.colors.primary};
+  }
+`, Et = r(it)`
+  width: 12px;
+  height: 12px;
+`, Ut = r.div`
+  display: flex;
+  cursor: ${(e) => e.isSortDisabled === !0 ? "not-allowed" : "pointer"};
+  gap: 6px;
+  &:hover {
+    color: ${(e) => e.isSortDisabled ? e.theme.colors.grey1 : e.theme.colors.primary};
+  }
+`, _t = r(be)`
+  display: flex;
+`, {
+  common: v,
+  vendorReview: {
+    globalReview: { globalMerchantList: Gt }
+  }
+} = xe.getLocalizedStrings(), i = {
+  containerPaddingLeftRight: new k($[3], $[4]),
+  containerPaddingTopBottom: new k($[2], $[3]),
+  logoHeightAndWidth: new k($[3], $[4]),
+  vendorNameLogoHeightAndWidth: new k($[4], $[6]),
+  logoToValueGap: new k($[2], $[2]),
+  smallLogoToValueGap: new k($[1], $[1])
+}, Kt = ({
+  vendorGlobalReviewData: e,
+  allGlobalMerchants: l,
+  globalMerchantAutoCompleteView: d,
+  sectionId: n,
+  isDisabled: m,
+  analytics: g,
+  onLoadGlobalMerchants: b,
+  onCreateGlobalMerchant: y,
+  onApproveGlobalReview: c,
+  onRejectGlobalReview: h,
+  onClearGlobalMerchantAutoCompleteResults: j
+}) => {
+  const a = D(), { resetField: q, formState: E } = De(), [V, I] = pe(!1), [T, W] = n.split("."), H = parseInt(W), F = E.dirtyFields[T]?.[H]?.originalVendor === !0 && e.selectedMerchantId !== e.merchant.tenantMerchantId, Y = e.currentSelection != null, { merchant: p, recommendations: U } = e, { fetchState: _ } = d, oe = (x) => {
+    let S = x.websiteUrl?.toString();
+    if (S) {
+      if (S = Be(S) ?? S, e.selectedMerchantId != null) {
+        const s = x.globalMerchantName ?? null;
+        g.trackVendorReviewWebsiteOpened({
+          reviewSource: "global_review",
+          vendorName: e.merchant.tenantMerchantName,
+          wasRecommendationAvailable: !!s,
+          recommendedVendorName: s,
+          recommendedVendorReason: x.reason ?? null,
+          vendorWebsite: S
+        });
+      }
+      window.open(S, "_blank");
+    }
+  }, w = [];
+  U.forEach(
+    (x, S) => {
+      const u = `recommended${dt(S)}`;
+      w.push({
+        label: {
+          label: /* @__PURE__ */ t.jsx(t.Fragment, { children: x.logo != null ? /* @__PURE__ */ t.jsxs(Oe, { children: [
+            /* @__PURE__ */ t.jsx(
+              $e,
+              {
+                photoUrl: x.logo.toString(),
+                styles: {
+                  width: i.logoHeightAndWidth.valuePx(a),
+                  height: i.logoHeightAndWidth.valuePx(a)
+                },
+                placeholder: {
+                  width: i.logoHeightAndWidth.value(a),
+                  height: i.logoHeightAndWidth.value(a)
+                },
+                fallbackAvatar: /* @__PURE__ */ t.jsx(ue, { children: /* @__PURE__ */ t.jsx(
+                  ge,
+                  {
+                    name: x.globalMerchantName,
+                    size: i.logoHeightAndWidth.valuePx(a)
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              C,
+              {
+                className: "global-review-row-item",
+                windowSize: a,
+                isLastItem: !1,
+                children: /* @__PURE__ */ t.jsx(Q, { children: x.globalMerchantName })
+              }
+            )
+          ] }) : /* @__PURE__ */ t.jsx(
+            C,
+            {
+              className: "global-review-row-item",
+              windowSize: a,
+              isLastItem: !1,
+              children: /* @__PURE__ */ t.jsx(Q, { children: x.globalMerchantName })
+            }
+          ) }),
+          style: {
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }
+        },
+        checkBoxField: {
+          name: ce(n, z, u),
+          checkBoxValue: ce(
+            n,
+            z,
+            u
+          ),
+          defaultChecked: e.currentSelection === u
+        },
+        tooltipProps: {
+          text: /* @__PURE__ */ t.jsx(
+            en,
+            {
+              recommendation: x,
+              onRedirectionToRecommendedMerchantWebsiteUrl: () => oe(x)
+            }
+          ),
+          maxWidth: "360px"
+        },
+        fieldName: u
+      });
+    }
+  );
+  const f = p != null ? {
+    label: {
+      label: /* @__PURE__ */ t.jsx(t.Fragment, { children: p.logo != null ? /* @__PURE__ */ t.jsxs(Oe, { children: [
+        /* @__PURE__ */ t.jsx(
+          $e,
+          {
+            photoUrl: p.logo.toString(),
+            styles: {
+              width: i.logoHeightAndWidth.valuePx(a),
+              height: i.logoHeightAndWidth.valuePx(a)
+            },
+            placeholder: {
+              width: i.logoHeightAndWidth.value(a),
+              height: i.logoHeightAndWidth.value(a)
+            },
+            fallbackAvatar: /* @__PURE__ */ t.jsx(ue, { children: /* @__PURE__ */ t.jsx(
+              ge,
+              {
+                name: p.tenantMerchantName,
+                size: i.logoHeightAndWidth.valuePx(a)
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          C,
+          {
+            className: "global-review-row-item",
+            windowSize: a,
+            isLastItem: !1,
+            children: /* @__PURE__ */ t.jsx(Q, { children: p.tenantMerchantName })
+          }
+        )
+      ] }) : /* @__PURE__ */ t.jsx(
+        C,
+        {
+          className: "global-review-row-item",
+          windowSize: a,
+          isLastItem: !1,
+          children: /* @__PURE__ */ t.jsx(Q, { children: p.tenantMerchantName })
+        }
+      ) }),
+      style: {
+        display: "block",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    checkBoxField: {
+      name: ce(n, z, me),
+      checkBoxValue: ce(
+        n,
+        z,
+        me
+      ),
+      defaultChecked: e.currentSelection === "requested"
+    },
+    tooltipProps: {
+      text: /* @__PURE__ */ t.jsx(tn, { merchant: p }),
+      maxWidth: "360px"
+    }
+  } : void 0;
+  let B = p.oldMerchantName;
+  e.currentSelection === "originalVendor" && e.selectedMerchantId != null && (B = e.selectedMerchantId);
+  const L = lt(
+    () => Ke(
+      B,
+      e.merchant,
+      l
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, l]
+  ), se = () => {
+    I(!1), j();
+  }, fe = () => {
+    q(n);
+  };
+  return /* @__PURE__ */ t.jsx(_e, { windowSize: a, isActiveField: F, children: M.map((x, S) => {
+    switch (x.key) {
+      case "originalVendor":
+        return /* @__PURE__ */ t.jsx(
+          P,
+          {
+            windowSize: a,
+            wrapperWidth: x.width,
+            children: V === !0 ? /* @__PURE__ */ t.jsx(Ye, { onClickAway: se, children: /* @__PURE__ */ t.jsx(Zt, { children: /* @__PURE__ */ t.jsx(
+              ct,
+              {
+                name: de(n, "originalVendor"),
+                defaultValue: L,
+                isOptionsLoading: _ === "In-Progress",
+                addIconInCreateLabel: !0,
+                autoFocus: !0,
+                isDisabled: m,
+                style: { marginRight: o.sp4 },
+                menuIsOpen: V,
+                loadOptions: b,
+                customStyleConfig: {
+                  valueContainer: (s, u) => ({
+                    justifyContent: "flex-start",
+                    margin: `${o.sp0} ${u.selectProps.menuIsOpen === !1 ? o.sp0 : o.sp3}`
+                  }),
+                  menu: () => ({
+                    width: "150%"
+                  }),
+                  singleValue: () => ({
+                    display: "flex",
+                    alignItems: "center",
+                    color: "inherit"
+                  })
+                },
+                onCreateOptionClick: (s) => {
+                  y(
+                    p.tenantMerchantId,
+                    s,
+                    p.websiteUrl
+                  );
+                },
+                onMenuClose: se
+              }
+            ) }) }) : L.selectedOption != null ? Xt(
+              L.selectedOption,
+              p,
+              l,
+              a,
+              S,
+              F,
+              I,
+              fe
+            ) : /* @__PURE__ */ t.jsxs(
+              C,
+              {
+                className: "global-review-row-item",
+                windowSize: a,
+                isLastItem: S === M.length - 1,
+                children: [
+                  Gt.selectPlaceholder,
+                  /* @__PURE__ */ t.jsx(
+                    G,
+                    {
+                      display: "block",
+                      placement: "bottom",
+                      title: /* @__PURE__ */ t.jsx(K, { children: v.tooltips.editName }),
+                      enterDelay: 600,
+                      children: /* @__PURE__ */ t.jsx(
+                        Ie,
+                        {
+                          onClick: () => I(!0),
+                          "data-testid": O(
+                            "global-review-list-row-edit-icon"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          de(n, "originalVendor")
+        );
+      case "recommended":
+        return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+          P,
+          {
+            windowSize: a,
+            wrapperWidth: x.width,
+            gap: i.logoToValueGap,
+            children: w.map((s, u) => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+              /* @__PURE__ */ t.jsx(
+                C,
+                {
+                  windowSize: a,
+                  className: "vendor-global-review-row-item",
+                  isLastItem: !1,
+                  children: /* @__PURE__ */ t.jsx(
+                    Me,
+                    {
+                      isHighlighted: !0,
+                      label: s.label,
+                      checkBoxField: s.checkBoxField,
+                      tooltipProps: s.tooltipProps,
+                      defaultChecked: e.currentSelection === s.fieldName
+                    }
+                  )
+                },
+                u
+              ),
+              u < w.length - 1 ? /* @__PURE__ */ t.jsxs(Yt, { children: [
+                " ",
+                v.texts.or
+              ] }) : null
+            ] }))
+          }
+        ) });
+      case "action":
+        return /* @__PURE__ */ t.jsx(
+          P,
+          {
+            windowSize: a,
+            wrapperWidth: x.width,
+            gap: i.smallLogoToValueGap,
+            children: /* @__PURE__ */ t.jsxs(
+              C,
+              {
+                className: "global-review-row-button",
+                windowSize: a,
+                isLastItem: S === M.length - 1,
+                children: [
+                  /* @__PURE__ */ t.jsx(
+                    Se,
+                    {
+                      variant: "light_transparent",
+                      label: v.footer.reject,
+                      onClick: () => h(p.tenantMerchantId),
+                      loading: e.rejectStatus.fetchState === "In-Progress",
+                      size: "small",
+                      style: { height: "100%" }
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(
+                    Qt,
+                    {
+                      space: o.sp0,
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        height: o.sp4,
+                        width: o.sp3
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(
+                    Se,
+                    {
+                      label: v.footer.approve,
+                      onClick: () => c(p.tenantMerchantId),
+                      disabled: !Y,
+                      loading: e.approveStatus.fetchState === "In-Progress",
+                      size: "small",
+                      variant: "primary"
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          `${n}.${x.key}`
+        );
+      case "requestedVendor":
+        return /* @__PURE__ */ t.jsx(
+          P,
+          {
+            windowSize: a,
+            wrapperWidth: x.width,
+            gap: i.smallLogoToValueGap,
+            children: p.tenantMerchantName && f != null ? /* @__PURE__ */ t.jsx(
+              C,
+              {
+                windowSize: a,
+                className: "vendor-global-review-row-item",
+                isLastItem: !1,
+                children: /* @__PURE__ */ t.jsx(
+                  Me,
+                  {
+                    isHighlighted: !0,
+                    label: f.label,
+                    checkBoxField: f.checkBoxField,
+                    tooltipProps: f.tooltipProps,
+                    defaultChecked: e.currentSelection === "requested"
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ t.jsx(
+              C,
+              {
+                className: "vendor-global-review-row-item",
+                windowSize: a,
+                isLastItem: !1,
+                children: v.strings.hyphen
+              }
+            )
+          },
+          de(n, "merchantId")
+        );
+      case "tenants":
+      default:
+        return /* @__PURE__ */ t.jsx(
+          P,
+          {
+            windowSize: a,
+            wrapperWidth: x.width,
+            children: /* @__PURE__ */ t.jsx(
+              Jt,
+              {
+                className: "global-review-row-item",
+                windowSize: a,
+                isLastItem: S === M.length - 1,
+                children: /* @__PURE__ */ t.jsx(
+                  G,
+                  {
+                    display: "block",
+                    placement: "bottom-start",
+                    title: /* @__PURE__ */ t.jsx(K, { children: p.tenantName }),
+                    children: /* @__PURE__ */ t.jsx(Q, { children: p.tenantName })
+                  }
+                )
+              }
+            )
+          },
+          de(n, "tenantId")
+        );
+    }
+  }) });
+}, Dt = () => {
+  const e = D();
+  return /* @__PURE__ */ t.jsx(_e, { windowSize: e, isActiveField: !1, children: M.map((l, d) => {
+    switch (l.key) {
+      case "originalVendor":
+      case "recommended":
+        return /* @__PURE__ */ t.jsxs(
+          P,
+          {
+            windowSize: e,
+            wrapperWidth: l.width,
+            gap: i.smallLogoToValueGap,
+            children: [
+              /* @__PURE__ */ t.jsx(
+                ke,
+                {
+                  width: i.logoHeightAndWidth.value(e),
+                  height: i.logoHeightAndWidth.value(e)
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                C,
+                {
+                  windowSize: e,
+                  isLastItem: d === M.length - 1,
+                  children: /* @__PURE__ */ t.jsx(
+                    ae,
+                    {
+                      width: 120,
+                      height: i.logoHeightAndWidth.value(e),
+                      style: { display: "flex", alignItems: "center" }
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          l.key
+        );
+      case "requestedVendor":
+        return /* @__PURE__ */ t.jsxs(
+          P,
+          {
+            windowSize: e,
+            wrapperWidth: l.width,
+            gap: i.logoToValueGap,
+            children: [
+              /* @__PURE__ */ t.jsx(
+                ke,
+                {
+                  width: i.vendorNameLogoHeightAndWidth.value(e),
+                  height: i.vendorNameLogoHeightAndWidth.value(e)
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                C,
+                {
+                  windowSize: e,
+                  isLastItem: d === M.length - 1,
+                  children: /* @__PURE__ */ t.jsx(
+                    ae,
+                    {
+                      width: 120,
+                      height: i.vendorNameLogoHeightAndWidth.value(e),
+                      style: { display: "flex", alignItems: "center" }
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          l.key
+        );
+      case "tenants":
+        return /* @__PURE__ */ t.jsx(
+          P,
+          {
+            windowSize: e,
+            wrapperWidth: l.width,
+            children: /* @__PURE__ */ t.jsx(
+              C,
+              {
+                windowSize: e,
+                isLastItem: d === M.length - 1,
+                children: /* @__PURE__ */ t.jsx(
+                  ae,
+                  {
+                    width: 100,
+                    height: $[4],
+                    style: { display: "flex", alignItems: "center" }
+                  }
+                )
+              }
+            )
+          },
+          l.key
+        );
+      case "action":
+      default:
+        return /* @__PURE__ */ t.jsx(
+          P,
+          {
+            windowSize: e,
+            wrapperWidth: l.width,
+            children: /* @__PURE__ */ t.jsx(
+              C,
+              {
+                windowSize: e,
+                isLastItem: d === M.length - 1,
+                children: /* @__PURE__ */ t.jsx(
+                  ae,
+                  {
+                    width: $[11],
+                    height: $[5],
+                    style: { display: "flex", alignItems: "center" }
+                  }
+                )
+              }
+            )
+          },
+          l.key
+        );
+    }
+  }) });
+}, _e = r.div`
+  display: flex;
+  margin-bottom: ${o.sp3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => i.containerPaddingLeftRight.valuePx(e.windowSize)};
+  padding-right: ${(e) => i.containerPaddingLeftRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => i.containerPaddingTopBottom.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => i.containerPaddingTopBottom.valuePx(e.windowSize)};
+  margin: ${o.sp0} ${o.sp8} ${o.sp3} ${o.sp8};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+  color: ${(e) => e.theme.colors.hero};
+
+  ${(e) => e.isActiveField ? Ce`
+        border-color: ${e.theme.colors.primary};
+        .global-review-row-item {
+          color: ${e.theme.colors.primary};
+        }
+        .entity-icon {
+          color: ${e.theme.colors.grey5};
+        }
+        .edit-icon {
+          visibility: visible;
+          :hover {
+            color: ${e.theme.colors.primary};
+          }
+        }
+      ` : Ce``};
+
+  &:hover {
+    border-color: ${(e) => e.theme.colors.primary};
+    .entity-icon {
+      color: ${(e) => e.theme.colors.grey5};
+    }
+    .edit-icon {
+      visibility: visible;
+      :hover {
+        color: ${(e) => e.theme.colors.primary};
+      }
+    }
+    .reset-icon {
+      :hover {
+        color: ${(e) => e.theme.colors.primary};
+      }
+    }
+  }
+
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+`, P = r.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  gap: ${(e) => e.gap?.valuePx(e.windowSize)};
+  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  min-width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  :last-of-type {
+    padding-right: ${o.sp0};
+  }
+`, Le = Ce`
+  word-break: break-word;
+  white-space: nowrap;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Yt = r.div``, Q = r.div`
+  ${Le};
+`, C = r(ht)`
+  ${Le};
+  justify-content: ${(e) => e.isLastItem ? "flex-end" : "unset"};
+  display: ${(e) => e.isLastItem ? "flex" : "inline-block"};
+`, Jt = r(gt)`
+  ${Le};
+  justify-content: ${(e) => e.isLastItem ? "flex-end" : "unset"};
+  display: ${(e) => e.isLastItem ? "flex" : "inline-block"};
+`, K = r(be)`
+  padding: 2px ${o.sp2};
+  color: ${(e) => e.theme.colors.hero};
+  background: ${(e) => e.theme.colors.overlayColor};
+  border-radius: ${o.sp1};
+`, ue = r.div`
+  display: flex;
+`, Ie = r(mt)`
+  color: ${(e) => e.theme.colors.hero};
+  align-items: center;
+  height: ${o.sp3};
+  width: ${o.sp4};
+  margin-left: ${o.sp2};
+  display: flex;
+  align-items: center;
+  visibility: hidden;
+  cursor: pointer;
+`, Ae = r(jt)`
+  color: ${(e) => e.theme.colors.hero};
+  align-items: center;
+  height: ${o.sp3};
+  width: ${o.sp4};
+  margin-left: ${o.sp2};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`, Pe = r.div`
+  display: flex;
+  text-align: center;
+  align-items: center;
+  overflow: hidden;
+`, Zt = r.div`
+  display: flex;
+  width: 100%;
+`, Ge = r.div`
+  width: auto;
+  box-sizing: border-box;
+  max-height: ${(e) => e.setMaxHeight === !0 ? o.sp10 : "none"};
+  &:hover {
+    .websiteUrlTooltipText {
+      cursor: pointer;
+    }
+  }
+  margin-bottom: ${o.sp2};
+  padding: ${o.sp2} ${o.sp3} ${o.sp2} ${o.sp3};
+`, X = r.div`
+  display: flex;
+  gap: ${o.sp3};
+  justify-content: space-between;
+`, ee = r(be)`
+  color: ${ze.primaryDark};
+  overflow: hidden;
+  word-wrap: break-word;
+  white-space: initial;
+`, te = r(be)`
+  color: ${ze.heroDark};
+  white-space: nowrap;
+`, Qt = r.div`
+  margin-right: ${(e) => e.space};
+`, Oe = r.div`
+  display: flex;
+  gap: ${o.sp2};
+`, Ke = (e, l, d) => {
+  const n = d.find(
+    (g) => g.globalMerchantId === e
+  ), m = l.tenantMerchantId === e ? { label: l.tenantMerchantName, value: l.tenantMerchantId } : n != null ? {
+    label: n.globalMerchantName,
+    value: n.globalMerchantId
+  } : void 0;
+  return m != null ? {
+    defaultOptions: [m],
+    selectedOption: e
+  } : {
+    defaultOptions: [],
+    selectedOption: e
+  };
+}, Xt = (e, l, d, n, m, g, b, y) => {
+  const c = d.find(
+    (j) => j.globalMerchantId === e
+  ), h = l.tenantMerchantId === e ? { logo: l.logo, name: l.tenantMerchantName } : c != null ? {
+    logo: c.logo,
+    name: c.globalMerchantName
+  } : e.length > 0 ? {
+    logo: void 0,
+    name: e
+  } : void 0;
+  return h == null ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      C,
+      {
+        className: "vendor-global-review-row-item",
+        windowSize: n,
+        isLastItem: !1,
+        children: v.strings.hyphen
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(Pe, { children: [
+      /* @__PURE__ */ t.jsx(
+        G,
+        {
+          display: "block",
+          placement: "bottom",
+          title: /* @__PURE__ */ t.jsx(K, { children: v.tooltips.editName }),
+          enterDelay: 600,
+          children: /* @__PURE__ */ t.jsx(
+            Ie,
+            {
+              className: "edit-icon",
+              onClick: () => b(!0),
+              "data-testid": O(
+                "global-review-list-row-edit-icon"
+              )
+            }
+          )
+        }
+      ),
+      g ? /* @__PURE__ */ t.jsx(
+        G,
+        {
+          display: "block",
+          placement: "bottom",
+          title: /* @__PURE__ */ t.jsx(K, { children: v.tooltips.reset }),
+          enterDelay: 600,
+          children: /* @__PURE__ */ t.jsx(
+            Ae,
+            {
+              className: "reset-icon",
+              onClick: y,
+              "data-testid": O(
+                "global-review-list-row-undo-icon"
+              )
+            }
+          )
+        }
+      ) : null
+    ] })
+  ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    h.logo != null ? /* @__PURE__ */ t.jsx(
+      $e,
+      {
+        photoUrl: h.logo.toString(),
+        styles: {
+          width: i.vendorNameLogoHeightAndWidth.valuePx(n),
+          height: i.vendorNameLogoHeightAndWidth.valuePx(n),
+          marginRight: i.logoToValueGap.valuePx(n)
+        },
+        placeholder: {
+          width: i.vendorNameLogoHeightAndWidth.value(n),
+          height: i.vendorNameLogoHeightAndWidth.value(n),
+          style: {
+            marginRight: i.logoToValueGap.valuePx(n)
+          }
+        },
+        fallbackAvatar: /* @__PURE__ */ t.jsx(
+          ue,
+          {
+            style: {
+              marginRight: i.logoToValueGap.valuePx(n)
+            },
+            children: /* @__PURE__ */ t.jsx(
+              ge,
+              {
+                name: h.name,
+                size: i.vendorNameLogoHeightAndWidth.valuePx(n)
+              }
+            )
+          }
+        )
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      ue,
+      {
+        style: {
+          marginRight: i.logoToValueGap.valuePx(n)
+        },
+        children: /* @__PURE__ */ t.jsx(
+          ge,
+          {
+            name: h.name,
+            size: i.vendorNameLogoHeightAndWidth.valuePx(n)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(Pe, { children: [
+      /* @__PURE__ */ t.jsx(
+        C,
+        {
+          className: "global-review-row-item",
+          windowSize: n,
+          isLastItem: m === M.length - 1,
+          children: /* @__PURE__ */ t.jsx(
+            G,
+            {
+              display: "block",
+              placement: "bottom-start",
+              title: /* @__PURE__ */ t.jsx(K, { children: h.name }),
+              children: /* @__PURE__ */ t.jsx(Q, { children: h.name })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        G,
+        {
+          display: "block",
+          placement: "bottom",
+          title: /* @__PURE__ */ t.jsx(K, { children: v.tooltips.editName }),
+          enterDelay: 600,
+          children: /* @__PURE__ */ t.jsx(
+            Ie,
+            {
+              className: "edit-icon",
+              onClick: () => b(!0),
+              "data-testid": O(
+                "global-review-list-row-edit-icon-tooltip"
+              )
+            }
+          )
+        }
+      ),
+      g ? /* @__PURE__ */ t.jsx(
+        G,
+        {
+          display: "block",
+          placement: "bottom",
+          title: /* @__PURE__ */ t.jsx(K, { children: v.tooltips.reset }),
+          enterDelay: 600,
+          children: /* @__PURE__ */ t.jsx(
+            Ae,
+            {
+              className: "reset-icon",
+              onClick: y
+            }
+          )
+        }
+      ) : null
+    ] })
+  ] });
+}, en = ({
+  recommendation: e,
+  onRedirectionToRecommendedMerchantWebsiteUrl: l
+}) => /* @__PURE__ */ t.jsxs(Ge, { setMaxHeight: !0, children: [
+  /* @__PURE__ */ t.jsxs(X, { children: [
+    /* @__PURE__ */ t.jsx(te, { children: v.labels.vendor }),
+    /* @__PURE__ */ t.jsx(ee, { children: e.globalMerchantName })
+  ] }),
+  e.websiteUrl ? /* @__PURE__ */ t.jsxs(X, { children: [
+    /* @__PURE__ */ t.jsx(te, { children: v.labels.websiteURL }),
+    /* @__PURE__ */ t.jsx(
+      ee,
+      {
+        className: "websiteUrlTooltipText",
+        onClick: () => l(e),
+        "data-testid": O(
+          "global-review-list-row-website-url-tooltip-website-url"
+        ),
+        children: e.websiteUrl?.toString()
+      }
+    )
+  ] }) : null
+] }), tn = ({ merchant: e }) => {
+  let l = e.websiteUrl?.toString() ?? v.strings.empty;
+  return /* @__PURE__ */ t.jsxs(Ge, { children: [
+    /* @__PURE__ */ t.jsxs(X, { children: [
+      /* @__PURE__ */ t.jsx(te, { children: v.labels.name }),
+      /* @__PURE__ */ t.jsx(ee, { children: e.tenantMerchantName })
+    ] }),
+    e.accountName.length ? /* @__PURE__ */ t.jsxs(X, { children: [
+      /* @__PURE__ */ t.jsx(te, { children: v.labels.category }),
+      /* @__PURE__ */ t.jsx(ee, { children: e.accountName })
+    ] }) : null,
+    e.accountName.length ? /* @__PURE__ */ t.jsxs(X, { children: [
+      /* @__PURE__ */ t.jsx(te, { children: v.labels.class }),
+      /* @__PURE__ */ t.jsx(ee, { children: e.className })
+    ] }) : null,
+    l ? /* @__PURE__ */ t.jsxs(X, { children: [
+      /* @__PURE__ */ t.jsx(te, { children: v.labels.websiteURL }),
+      /* @__PURE__ */ t.jsx(
+        ee,
+        {
+          className: "websiteUrlTooltipText",
+          onClick: () => {
+            l && (l = Be(l) ?? l, window.open(l, "_blank"));
+          },
+          "data-testid": O(
+            "global-review-list-row-website-url-tooltip"
+          ),
+          children: l
+        }
+      )
+    ] }) : null
+  ] });
+}, nn = ({
+  sortConfig: e,
+  fetchState: l,
+  isDisabled: d,
+  onColumnSortConfigChanged: n
+}) => {
+  const m = D();
+  return /* @__PURE__ */ t.jsxs(on, { windowSize: m, children: [
+    /* @__PURE__ */ t.jsx(
+      Ue,
+      {
+        sortConfig: e,
+        isDisabled: l === "In-Progress" ? "readonly" : d,
+        onColumnSortConfigChanged: n
+      }
+    ),
+    /* @__PURE__ */ t.jsx(ln, { windowSize: m, children: [...Array(7)].map((g, b) => /* @__PURE__ */ t.jsx(Dt, {}, b)) })
+  ] });
+}, on = r.div`
+  display: block;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`, ln = r.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+`, {
+  common: rn,
+  vendorReview: {
+    globalReview: { globalMerchantList: We }
+  }
+} = xe.getLocalizedStrings(), sn = ({
+  vendorGlobalReviewList: e,
+  allGlobalMerchants: l,
+  sectionId: d,
+  listFetchState: n,
+  globalMerchantAutoCompleteView: m,
+  uiState: g,
+  isDisabled: b,
+  analytics: y,
+  onLoadGlobalMerchants: c,
+  onUpdateGlobalReviewUIState: h,
+  onFetchGlobalReviewList: j,
+  onCreateGlobalMerchant: a,
+  onApproveGlobalMerchantReview: q,
+  onRejectGlobalMerchantReview: E,
+  onClearGlobalMerchantAutoCompleteResults: V
+}) => {
+  const I = D(), T = je(null), [W, H] = pe(!1);
+  ne(() => {
+    T.current?.resetAfterIndex(0);
+  }, [I, T]), ne(() => {
+    n === "Completed" && H(!1);
+  }, [n]);
+  const F = (w) => Pt, Y = (w, f) => {
+    h({ sortOrder: f, sortKey: w }), j(g.searchText, !1, null);
+  }, p = () => {
+    H(!0), j(g.searchText, !0, g.pageToken);
+  }, U = (w) => w < e.length, _ = () => {
+    g.pageToken != null && n === "Completed" && p();
+  }, oe = (w) => {
+    const f = e.find(
+      (L) => L.merchant.tenantMerchantId === w
+    ), B = l.find(
+      (L) => L.globalMerchantId === f?.selectedMerchantId
+    );
+    f?.currentSelection != "requested" || B != null && f?.currentSelection == "requested" ? q(w) : f != null && a(
+      w,
+      f.merchant.tenantMerchantName,
+      f.merchant.websiteUrl
+    );
+  };
+  return /* @__PURE__ */ t.jsxs(cn, { windowSize: I, children: [
+    /* @__PURE__ */ t.jsx(hn, { windowSize: I, children: n === "Error" ? /* @__PURE__ */ t.jsxs(mn, { windowSize: I, children: [
+      /* @__PURE__ */ t.jsx(
+        un,
+        {
+          "data-testid": O(
+            "global-review-list-table-reload-icon"
+          ),
+          onClick: () => j("", !1, null),
+          children: /* @__PURE__ */ t.jsx(ut, {})
+        }
+      ),
+      /* @__PURE__ */ t.jsx(pn, { children: rn.reloadPage.label })
+    ] }) : n === "Completed" && e.length === 0 ? /* @__PURE__ */ t.jsx(
+      pt,
+      {
+        message: g.searchText ? We.noMatchedDataText : We.noDataText,
+        style: { padding: o.sp0 }
+      }
+    ) : n === "Not-Started" || n === "In-Progress" && e.length === 0 ? /* @__PURE__ */ t.jsx(
+      nn,
+      {
+        sortConfig: {
+          sortKey: g.sortKey,
+          sortOrder: g.sortOrder
+        },
+        isDisabled: b,
+        fetchState: n,
+        onColumnSortConfigChanged: Y
+      }
+    ) : /* @__PURE__ */ t.jsx(gn, { windowSize: I, children: /* @__PURE__ */ t.jsx(Je, { children: ({ height: w, width: f }) => /* @__PURE__ */ t.jsx(
+      Ze,
+      {
+        isItemLoaded: U,
+        itemCount: e.length + 1,
+        loadMoreItems: _,
+        children: ({ onItemsRendered: B }) => /* @__PURE__ */ t.jsxs(bn, { style: { height: w, width: f }, children: [
+          /* @__PURE__ */ t.jsx(dn, { children: /* @__PURE__ */ t.jsx(
+            Ue,
+            {
+              sortConfig: {
+                sortKey: g.sortKey,
+                sortOrder: g.sortOrder
+              },
+              isDisabled: n === "In-Progress" ? "readonly" : b,
+              onColumnSortConfigChanged: Y
+            }
+          ) }),
+          /* @__PURE__ */ t.jsx(
+            Qe,
+            {
+              ref: T,
+              height: w - Ee,
+              itemCount: e.length,
+              itemData: {
+                analytics: y,
+                vendorGlobalReviewList: e,
+                sectionId: d,
+                allGlobalMerchants: l,
+                globalMerchantAutoCompleteView: m,
+                isDisabled: b,
+                onLoadGlobalMerchants: c,
+                onApproveGlobalReview: oe,
+                onRejectGlobalMerchantReview: E,
+                onCreateGlobalMerchant: a,
+                onClearGlobalMerchantAutoCompleteResults: V
+              },
+              onItemsRendered: B,
+              itemSize: F,
+              width: f,
+              style: { willChange: "auto" },
+              overscanCount: Ot,
+              onScroll: ({ scrollOffset: L }) => {
+                h({
+                  scrollYOffset: L
+                });
+              },
+              initialScrollOffset: g.scrollYOffset,
+              children: an
+            }
+          )
+        ] })
+      }
+    ) }) }) }),
+    /* @__PURE__ */ t.jsx(xt, { controller: W === !0, children: /* @__PURE__ */ t.jsx(wn, { children: /* @__PURE__ */ t.jsx(bt, { size: "Small", start: !0 }) }) })
+  ] });
+}, an = ({ index: e, style: l, data: d }) => {
+  const {
+    analytics: n,
+    vendorGlobalReviewList: m,
+    allGlobalMerchants: g,
+    globalMerchantAutoCompleteView: b,
+    sectionId: y,
+    isDisabled: c,
+    onLoadGlobalMerchants: h,
+    onCreateGlobalMerchant: j,
+    onApproveGlobalReview: a,
+    onRejectGlobalMerchantReview: q,
+    onClearGlobalMerchantAutoCompleteResults: E
+  } = d, V = m[e];
+  return /* @__PURE__ */ t.jsx(
+    xn,
+    {
+      style: {
+        ...l,
+        width: "100%"
+      },
+      className: "global-review-list-item",
+      children: /* @__PURE__ */ t.jsx(
+        Kt,
+        {
+          sectionId: `${y}.${e}`,
+          isDisabled: V.approveStatus.fetchState === "In-Progress" ? "readonly" : c,
+          globalMerchantAutoCompleteView: b,
+          vendorGlobalReviewData: V,
+          allGlobalMerchants: g,
+          onLoadGlobalMerchants: h,
+          onCreateGlobalMerchant: j,
+          onApproveGlobalReview: a,
+          onRejectGlobalReview: q,
+          onClearGlobalMerchantAutoCompleteResults: E,
+          analytics: n
+        },
+        V.merchant.tenantMerchantId
+      )
+    }
+  );
+}, dn = r.div`
+  width: auto;
+`, cn = r.div`
+  display: block;
+  background-color: ${(e) => e.theme.colors.grey4};
+  height: ${(e) => `calc(100vh - ${qe.valuePx(e.windowSize)} - ${o.sp4})`};
+  width: 100%;
+  margin-top: ${o.sp4};
+`, hn = r.div`
+  height: 100%;
+`, gn = r.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`, mn = r.div`
+  display: flex;
+  width: 100%;
+  height: ${(e) => `calc(100% - ${qe.valuePx(e.windowSize)})`};
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, un = r.div`
+  height: 96px;
+  width: 96px;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${o.sp5};
+    color: ${(e) => e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, pn = r(wt)`
+  margin-top: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, xn = r.div`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  padding-bottom: ${o.sp3};
+  box-sizing: border-box;
+`, bn = r.div`
+  position: relative;
+`, wn = r.div`
+  display: flex;
+  width: 100%;
+  height: ${o.sp3};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: ${o.sp3};
+  margin-bottom: ${o.sp3};
+`, {
+  common: { sectionTitles: fn },
+  vendorReview: {
+    globalReview: { globalMerchantList: He }
+  }
+} = xe.getLocalizedStrings(), vn = "globalReviewListPage", he = "globalReviewListTable", Tn = ({
+  vendorGlobalReviewView: e,
+  globalMerchantAutoCompleteView: l,
+  analytics: d,
+  isDisabled: n,
+  onUpdateSelectedGlobalMerchant: m,
+  onApproveGlobalReview: g,
+  onRejectGlobalReview: b,
+  onCreateGlobalMerchant: y,
+  onFetchGlobalMerchantAutoCompleteResults: c,
+  onUpdateGlobalReviewUIState: h,
+  onFetchGlobalReviewList: j,
+  onClearGlobalMerchantAutoCompleteResults: a,
+  onBackClick: q,
+  onClickMenuIcon: E
+}) => {
+  const V = Xe(), I = D(), { vendorGlobalReviewData: T, allGlobalMerchants: W, uiState: H, fetchState: F } = e, {
+    globalMerchants: Y,
+    fetchState: p
+  } = l, U = et({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: Fe(T, W),
+    values: Fe(T, W),
+    resetOptions: {
+      keepDirtyValues: !0
+    }
+  }), [_, oe] = pe(H.searchText), w = je(), f = (s) => {
+    j(s, !1, null);
+  }, B = (s) => {
+    const u = T.find(
+      (R) => R.merchant.tenantMerchantId === s
+    );
+    if (u != null) {
+      const R = W.find(
+        (Z) => Z.globalMerchantId === u.selectedMerchantId
+      ), J = u.recommendations, { tenantName: ie, oldMerchantName: le, tenantMerchantName: re } = u.merchant, N = R?.globalMerchantName ?? re, A = J[0];
+      d.trackVendorReviewApproveRequested({
+        reviewSource: "global_review",
+        tenantName: ie,
+        requestedVendorName: re,
+        originalVendorName: le,
+        approveVendorName: N,
+        isGlobalVendorRequested: R != null,
+        isNewCreatedVendorRequested: !1,
+        // ToDo AD: this needs to be updated since creation happens through slider
+        isVendorNameRecommendationSelected: u.currentSelection === "recommendedFirst" || u.currentSelection === "recommendedSecond",
+        isVendorNameChangedAndSelected: N !== re,
+        wasRecommendationAvailable: !!A?.globalMerchantName,
+        approveVendorReason: R?.reason ?? null,
+        approveVendorNameSelectionSource: N === A?.globalMerchantName ? "recommendation" : "text_edit",
+        recommendedVendorName: A?.globalMerchantName ?? null,
+        recommendedVendorReason: A?.reason ?? null
+      });
+    }
+    g(s);
+  }, L = je(
+    tt((s) => f(s), 500, {
+      trailing: !0
+    })
+  ).current;
+  ne(() => {
+    F === "Completed" && d.trackVendorReviewPage("global_review", H.totalCount);
+  }, [F]), ne(() => {
+    p === "Completed" && w.current?.(
+      $n(Y)
+    );
+  }, [p]);
+  const se = (s, u) => {
+    c(s), w.current = u;
+  }, fe = () => {
+  }, x = async (s, u, R) => {
+    const { globalReviewListTable: J } = u, ie = parseInt(s.split(".")[1]), le = J[ie].merchantId;
+    if (R == null) {
+      m(
+        le,
+        {
+          recommendedFirst: !1,
+          recommendedSecond: !1,
+          originalVendor: !1,
+          requested: !1
+        },
+        le
+      );
+      return;
+    }
+    if (s.includes(he)) {
+      const re = parseInt(s.split(".")[1]), N = {
+        ...u[he][re]
+      };
+      let A = N[z], Z;
+      N.merchantId != null && (s.includes(Ve) ? (A = {
+        recommendedFirst: N[z].recommendedFirst,
+        recommendedSecond: !1,
+        originalVendor: !1,
+        requested: !1
+      }, Z = N[Ve]?.globalMerchantId) : s.includes(Te) ? (A = {
+        recommendedFirst: !1,
+        recommendedSecond: N[z].recommendedSecond,
+        originalVendor: !1,
+        requested: !1
+      }, Z = N[Te]?.globalMerchantId) : s.includes(me) ? (A = {
+        recommendedFirst: !1,
+        recommendedSecond: !1,
+        originalVendor: !1,
+        requested: N[z].requested
+      }, Z = N[me]) : s.includes(ve) && (A = {
+        recommendedFirst: !1,
+        recommendedSecond: !1,
+        originalVendor: !0,
+        requested: !1
+      })), m(
+        le,
+        A,
+        s.includes(ve) ? J[ie][ve].selectedOption : Z
+      );
+    }
+  };
+  ne(() => {
+    const s = U.watch((u, { name: R, type: J }) => {
+      R != null && u != null && nt(() => x(R, u, J));
+    });
+    return () => {
+      s.unsubscribe();
+    };
+  });
+  const S = /* @__PURE__ */ t.jsx(
+    St,
+    {
+      button: {
+        label: fn.newVendor,
+        onClick: () => y()
+      },
+      search: {
+        searchText: _,
+        hide: !1,
+        isOpen: _.length > 0,
+        placeHolder: He.searchPlaceholder,
+        onTextChange: (s) => {
+          oe(s), s.trim().length >= 2 ? L(s) : s.trim().length == 0 && L("");
+        }
+      }
+    }
+  );
+  return /* @__PURE__ */ t.jsxs(yn, { children: [
+    /* @__PURE__ */ t.jsx(
+      ft,
+      {
+        title: He.navBarTitle,
+        backgroundColor: V.colors.grey4,
+        onBackClick: q,
+        rightSideComponent: S,
+        showMenuIcon: I === "medium-compact" || I === "small",
+        onClickMenuIcon: E,
+        source: "GlobalReviewListPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsx(jn, { children: /* @__PURE__ */ t.jsx(ot, { ...U, children: /* @__PURE__ */ t.jsx(
+      "form",
+      {
+        id: Sn(vn),
+        onSubmit: U.handleSubmit(fe),
+        style: { width: "100%" },
+        children: /* @__PURE__ */ t.jsx(
+          sn,
+          {
+            vendorGlobalReviewList: T,
+            allGlobalMerchants: W,
+            globalMerchantAutoCompleteView: l,
+            uiState: { ...H, searchText: _ },
+            isDisabled: n,
+            listFetchState: F,
+            sectionId: he,
+            onLoadGlobalMerchants: se,
+            onUpdateGlobalReviewUIState: h,
+            onFetchGlobalReviewList: j,
+            onCreateGlobalMerchant: y,
+            onApproveGlobalMerchantReview: B,
+            onRejectGlobalMerchantReview: b,
+            onClearGlobalMerchantAutoCompleteResults: a,
+            analytics: d
+          }
+        )
+      }
+    ) }) })
+  ] });
+}, yn = r.div`
+  display: flex;
+  min-height: 100%;
+  width: 100%;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, jn = r.div`
+  display: flex;
+`, Sn = (e) => `${e}_form`, Fe = (e, l) => ({
+  [he]: e.map(
+    (n) => {
+      const { merchant: m } = n;
+      let g = m.oldMerchantName;
+      return n.currentSelection === "originalVendor" && n.selectedMerchantId != null && (g = n.selectedMerchantId), {
+        tenantId: m.tenantId,
+        merchantId: m.tenantMerchantId,
+        originalVendor: Ke(
+          g,
+          m,
+          l
+        ),
+        recommendedFirst: n.recommendations[0],
+        recommendedSecond: n.recommendations[1],
+        currentSelection: {
+          recommendedFirst: n.currentSelection === "recommendedFirst",
+          recommendedSecond: n.currentSelection === "recommendedSecond",
+          requested: n.currentSelection === "requested",
+          originalVendor: n.currentSelection === "originalVendor"
+        },
+        requested: m.tenantMerchantId
+      };
+    }
+  )
+}), $n = (e) => e.map((d) => ({
+  label: d.globalMerchantName,
+  value: d.globalMerchantId
+})).sort(
+  (d, n) => d.label.localeCompare(n.label)
+);
+export {
+  Tn as default,
+  Sn as uniqueFormName
+};