randmarcomps 1.219.0 → 1.222.0

package/dist/randmarcomps.d.ts

@@ -469,6 +469,16 @@ declare interface PartnerCardProps {
     withVoice?: boolean;
 }
 
+export declare function PartnerRelationshipPage({ applicationId, partnerId, userEmail, shopifyHostName, isSuperAdmin, }: PartnerRelationshipPageProps): JSX.Element;
+
+declare interface PartnerRelationshipPageProps {
+    applicationId: string;
+    partnerId: string;
+    userEmail: string;
+    shopifyHostName: string | undefined;
+    isSuperAdmin: boolean;
+}
+
 export declare const Popover: React_2.FC<PopoverPrimitive.PopoverProps>;
 
 export declare const PopoverAnchor: React_2.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React_2.RefAttributes<HTMLDivElement>>;

package/dist/randmarcomps.js

@@ -1,10 +1,10 @@
 var Bn = Object.defineProperty;
-var hn = (e) => {
+var pn = (e) => {
   throw TypeError(e);
 };
 var jn = (e, t, n) => t in e ? Bn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var Kt = (e, t, n) => jn(e, typeof t != "symbol" ? t + "" : t, n), Ln = (e, t, n) => t.has(e) || hn("Cannot " + n);
-var Xt = (e, t, n) => (Ln(e, t, "read from private field"), n ? n.call(e) : t.get(e)), dr = (e, t, n) => t.has(e) ? hn("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n);
+var Kt = (e, t, n) => jn(e, typeof t != "symbol" ? t + "" : t, n), Ln = (e, t, n) => t.has(e) || pn("Cannot " + n);
+var Xt = (e, t, n) => (Ln(e, t, "read from private field"), n ? n.call(e) : t.get(e)), dr = (e, t, n) => t.has(e) ? pn("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { forwardRef, createElement, useState, useLayoutEffect, useEffect, createContext, useRef, useContext, useCallback, useDebugValue, useMemo, isValidElement, Children, PureComponent, useImperativeHandle, cloneElement, Component, Fragment as Fragment$1 } from "react";
@@ -18115,7 +18115,7 @@ const emptySplitApi = createApi2({
     })
   }),
   overrideExisting: !1
-}), { useGetV4PartnerByApplicationIdAccountQuery, useLazyGetV4PartnerByApplicationIdAccountQuery, useGetV4PartnerByApplicationIdAccountLogoQuery, useGetV4PartnerByApplicationIdAccountLogoExistsQuery, useGetV4PartnerByApplicationIdAccountResellerQuery, usePostV4PartnerByApplicationIdAccountDebugFeedbackMutation, usePostV4PartnerByApplicationIdAccountResellerAndFieldNameMutation, usePostV4PartnerByApplicationIdBusinessDevelopmentConversationPartnerAndPartnerIdMutation, useGetV4PartnerByApplicationIdBusinessDevelopmentConversationsQuery, useLazyGetV4PartnerByApplicationIdBusinessDevelopmentConversationAndConversationIdMessagesQuery, usePutV4ResellerByRouteResellerIdCommunicationMutation, usePostV4ResellerByRouteResellerIdDocumentStatementEmailMutation, useGetV4PartnerByApplicationIdManufacturersQuery, usePostV4ResellerByRouteResellerIdOpportunityAndManufacturerIdBidNumberEmailMutation, usePutV4ResellerByRouteResellerIdOpportunityAndManufacturerIdDefaultMutation, usePutV4ResellerByRouteResellerIdProductAndRandmarSkuRequisitionMutation, usePostV4ResellerByRouteResellerIdReportProductsEmailMutation, usePostV4ResellerByRouteResellerIdReportInvoicesEmailMutation, usePostV4ResellerByRouteResellerIdReportOpenOrdersEmailMutation, usePostV4ResellerByRouteResellerIdReportAmazonTrackingFileEmailMutation, usePostV4ResellerByRouteResellerIdReportWalmartTrackingFileEmailMutation } = injectedRtkApi;
+}), { useGetV4PartnerByApplicationIdAccountQuery, useLazyGetV4PartnerByApplicationIdAccountQuery, useGetV4PartnerByApplicationIdAccountLogoQuery, useGetV4PartnerByApplicationIdAccountLogoExistsQuery, useGetV4PartnerByApplicationIdAccountResellerQuery, usePostV4PartnerByApplicationIdAccountDebugFeedbackMutation, usePostV4PartnerByApplicationIdAccountResellerAndFieldNameMutation, usePostV4PartnerByApplicationIdBusinessDevelopmentConversationPartnerAndPartnerIdMutation, useGetV4PartnerByApplicationIdBusinessDevelopmentConversationsQuery, useLazyGetV4PartnerByApplicationIdBusinessDevelopmentConversationAndConversationIdMessagesQuery, usePutV4ResellerByRouteResellerIdCommunicationMutation, usePostV4ResellerByRouteResellerIdDocumentStatementEmailMutation, usePostV4ResellerByRouteResellerIdManufacturerAndManufacturerIdShopifyMutation, useGetV4ResellerByRouteResellerIdManufacturerAndManufacturerIdCategoryCodeQuery, usePostV4ResellerByRouteResellerIdManufacturerAndManufacturerIdCategoryCodeShopifyMutation, useGetV4PartnerByApplicationIdManufacturersQuery, usePostV4ResellerByRouteResellerIdOpportunityAndManufacturerIdBidNumberEmailMutation, usePutV4ResellerByRouteResellerIdOpportunityAndManufacturerIdDefaultMutation, useGetV4PartnerByApplicationIdPartnerAndPartnerIdQuery, usePostV4ResellerByRouteResellerIdProductAndRandmarSkuShopifyMutation, usePutV4ResellerByRouteResellerIdProductAndRandmarSkuRequisitionMutation, usePostV4ResellerByRouteResellerIdReportProductsEmailMutation, usePostV4ResellerByRouteResellerIdReportInvoicesEmailMutation, usePostV4ResellerByRouteResellerIdReportOpenOrdersEmailMutation, usePostV4ResellerByRouteResellerIdReportAmazonTrackingFileEmailMutation, usePostV4ResellerByRouteResellerIdReportWalmartTrackingFileEmailMutation } = injectedRtkApi;
 injectedRtkApi.enhanceEndpoints({
   addTagTypes: ["Conversations"],
   endpoints: {
@@ -58106,10 +58106,10 @@ Defaulting to 2020, but this will stop working in the future.`)), ne.ecmaVersion
       var O = this.readWord1(), ne = j.name;
       return this.keywords.test(O) && (ne = Q[O]), this.finishToken(ne, O);
     };
-    var pn = "8.12.1";
+    var hn = "8.12.1";
     rt.acorn = {
       Parser: rt,
-      version: pn,
+      version: hn,
       defaultOptions: Xe,
       Position: He,
       SourceLocation: Ye,
@@ -58137,7 +58137,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ne.ecmaVersion
     function Dn(O, ne) {
       return rt.tokenizer(O, ne);
     }
-    n.Node = _r, n.Parser = rt, n.Position = He, n.SourceLocation = Ye, n.TokContext = rr, n.Token = Mr, n.TokenType = A, n.defaultOptions = Xe, n.getLineInfo = Ze, n.isIdentifierChar = I, n.isIdentifierStart = M, n.isNewLine = ie, n.keywordTypes = Q, n.lineBreak = te, n.lineBreakG = ae, n.nonASCIIwhitespace = oe, n.parse = On, n.parseExpressionAt = Vn, n.tokContexts = Jt, n.tokTypes = j, n.tokenizer = Dn, n.version = pn;
+    n.Node = _r, n.Parser = rt, n.Position = He, n.SourceLocation = Ye, n.TokContext = rr, n.Token = Mr, n.TokenType = A, n.defaultOptions = Xe, n.getLineInfo = Ze, n.isIdentifierChar = I, n.isIdentifierStart = M, n.isNewLine = ie, n.keywordTypes = Q, n.lineBreak = te, n.lineBreakG = ae, n.nonASCIIwhitespace = oe, n.parse = On, n.parseExpressionAt = Vn, n.tokContexts = Jt, n.tokTypes = j, n.tokenizer = Dn, n.version = hn;
   });
 }), require_acorn_jsx = __commonJS((e, t) => {
   var n = require_xhtml(), o = /^[\da-fA-F]+$/, l = /^\d+$/, d = /* @__PURE__ */ new WeakMap();
@@ -69500,6 +69500,300 @@ function DataTable({ columns: e, data: t, uniqueValues: n }) {
     ] })
   ] });
 }
+function ManufacturerCategories({ categories: e, activeCategory: t, onSelectCategory: n }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid", children: /* @__PURE__ */ jsx("div", { className: "flex overflow-x-auto small-scrollbar pb-4", children: /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: e.map((o) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: () => n(o.CategoryCode ?? ""),
+      variant: t === o.CategoryCode ? "default" : "secondary",
+      size: "sm",
+      className: "px-3 py-1.5 text-xs whitespace-nowrap rounded-full",
+      children: o.CategoryName
+    },
+    o.CategoryCode
+  )) }) }) });
+}
+function ManufacturerProducts({
+  applicationId: e,
+  manufacturer: t,
+  shopifyHostName: n
+}) {
+  var Q, F, j, te;
+  const [o] = usePostV4ResellerByRouteResellerIdProductAndRandmarSkuShopifyMutation(), [l] = usePostV4ResellerByRouteResellerIdManufacturerAndManufacturerIdCategoryCodeShopifyMutation(), [d, f] = useState(((F = (Q = t.Categories) == null ? void 0 : Q[0]) == null ? void 0 : F.CategoryCode) || ""), [g, b] = useState(null), [_, S] = useState(!1), [C, E] = useState(!1), { toast: R } = useToast(), {
+    data: M,
+    isLoading: I,
+    isFetching: A
+  } = useGetV4ResellerByRouteResellerIdManufacturerAndManufacturerIdCategoryCodeQuery(
+    {
+      routeResellerId: e,
+      manufacturerId: t.ManufacturerId,
+      categoryCode: d ?? ""
+    },
+    {
+      skip: !t.ManufacturerId || !d
+    }
+  ), V = async (ae) => {
+    try {
+      b(ae), await o({
+        routeResellerId: e,
+        randmarSku: ae,
+        shopifyHostName: n
+      }).unwrap() && R({
+        title: "Success",
+        description: "Product synced to Shopify successfully",
+        variant: "success"
+      });
+    } catch (ie) {
+      console.error("Error syncing to Shopify:", ie), R({
+        title: "Error",
+        description: "Error syncing product to Shopify.",
+        variant: "destructive"
+      });
+    } finally {
+      b(null);
+    }
+  }, q = async () => {
+    try {
+      S(!0), E(!1), await l({
+        routeResellerId: e,
+        manufacturerId: t.ManufacturerId ?? "",
+        categoryCode: d,
+        shopifyHostName: n
+      }).unwrap() && R({
+        title: "Success",
+        description: "Category synced to Shopify successfully",
+        variant: "success"
+      });
+    } catch (ae) {
+      console.error("Error syncing to Shopify:", ae), R({
+        title: "Error",
+        description: "Error syncing category to Shopify.",
+        variant: "destructive"
+      });
+    } finally {
+      S(!1);
+    }
+  }, z = () => {
+    var ae, ie;
+    return ((ie = (ae = t.Categories) == null ? void 0 : ae.find((se) => se.CategoryCode === d)) == null ? void 0 : ie.CategoryName) || d;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        ManufacturerCategories,
+        {
+          categories: t.Categories || [],
+          activeCategory: d,
+          onSelectCategory: f
+        }
+      ),
+      n && ((j = t.Categories) == null ? void 0 : j.findIndex((ae) => ae.AvailableToBuy)) !== -1 && /* @__PURE__ */ jsxs(Dialog, { open: C, onOpenChange: E, children: [
+        /* @__PURE__ */ jsx(DialogTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "bg-green-600 hover:bg-green-700", disabled: _, children: _ ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
+          "Syncing..."
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ShoppingCart, { className: "mr-2 h-4 w-4" }),
+          "Sync Category to Shopify"
+        ] }) }) }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: "Confirm Sync to Shopify" }),
+            /* @__PURE__ */ jsxs(DialogDescription, { children: [
+              'Are you sure you want to sync the category "',
+              z(),
+              '" to Shopify? This will add all products in this category to your Shopify store.'
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => E(!1), children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "bg-green-600 hover:bg-green-700",
+                onClick: q,
+                disabled: _,
+                children: _ ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
+                  "Syncing..."
+                ] }) : "Confirm Sync"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mb-4", children: I || A ? Array.from({ length: 4 }).map((ae, ie) => /* @__PURE__ */ jsx(ProductCard, {}, ie)) : M != null && M.Products && (M == null ? void 0 : M.Products.length) > 0 ? (te = M == null ? void 0 : M.Products) == null ? void 0 : te.map((ae) => /* @__PURE__ */ jsx(
+      ProductCard,
+      {
+        applicationId: e,
+        item: ae,
+        viewProductLink: `/${e}/Product/${ae.RandmarSKU}`,
+        syncToShopify: !!n,
+        isSyncToShopifyActionLoading: g === ae.RandmarSKU,
+        syncToShopifyAction: () => ae.RandmarSKU && V(ae.RandmarSKU)
+      },
+      ae.RandmarSKU
+    )) : /* @__PURE__ */ jsxs(Alert, { variant: "warning", children: [
+      /* @__PURE__ */ jsx(CircleAlert, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(AlertTitle, { children: "Warning" }),
+      /* @__PURE__ */ jsx(AlertDescription, { children: "No products found for this manufacturer category." })
+    ] }) })
+  ] });
+}
+function PartnerRelationshipPage({
+  applicationId: e,
+  partnerId: t,
+  userEmail: n,
+  shopifyHostName: o,
+  isSuperAdmin: l
+}) {
+  var I, A, V;
+  const { data: d, isLoading: f } = useGetV4PartnerByApplicationIdPartnerAndPartnerIdQuery({
+    applicationId: e,
+    partnerId: t,
+    withSpecification: !0
+  }), { toast: g } = useToast(), [b] = usePostV4ResellerByRouteResellerIdManufacturerAndManufacturerIdShopifyMutation(), [_, S] = useState(!1), [C, E] = useState(!1), R = async () => {
+    try {
+      S(!0), E(!1), await b({
+        routeResellerId: e ?? "",
+        manufacturerId: t ?? "",
+        shopifyHostName: o
+      }).unwrap() && g({
+        title: "Success",
+        description: "Manufacturer synced to Shopify successfully",
+        variant: "success"
+      });
+    } catch (q) {
+      console.error("Error syncing to Shopify:", q), g({
+        title: "Error",
+        description: "Error syncing manufacturer to Shopify.",
+        variant: "destructive"
+      });
+    } finally {
+      S(!1);
+    }
+  }, M = () => d != null && d.Reseller ? "reseller-overview" : d != null && d.Manufacturer ? "manufacturer-overview" : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 grid-cols-1 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(
+        PartnerCard,
+        {
+          account: d,
+          loading: f,
+          withAbout: !0,
+          withVoice: !1,
+          action: " "
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+        ((d == null ? void 0 : d.Manufacturer) || f) && /* @__PURE__ */ jsx(
+          ManufacturerCard,
+          {
+            manufacturer: d == null ? void 0 : d.Manufacturer,
+            loading: f,
+            mainAction: /* @__PURE__ */ jsxs(Fragment, { children: [
+              (d == null ? void 0 : d.Manufacturer) && /* @__PURE__ */ jsx(
+                ManufacturerGetStartedButton,
+                {
+                  applicationId: e,
+                  manufacturer: d == null ? void 0 : d.Manufacturer
+                }
+              ),
+              o && ((A = (I = d == null ? void 0 : d.Manufacturer) == null ? void 0 : I.Categories) == null ? void 0 : A.findIndex((q) => q.AvailableToBuy)) !== -1 && /* @__PURE__ */ jsxs(Dialog, { open: C, onOpenChange: E, children: [
+                /* @__PURE__ */ jsx(DialogTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { className: "bg-green-600 hover:bg-green-700 ml-2", disabled: _, children: _ ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
+                  "Syncing..."
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(ShoppingCart, { className: "mr-2 h-4 w-4" }),
+                  "Sync Manufacturer to Shopify"
+                ] }) }) }),
+                /* @__PURE__ */ jsxs(DialogContent, { children: [
+                  /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                    /* @__PURE__ */ jsx(DialogTitle, { children: "Confirm Sync to Shopify" }),
+                    /* @__PURE__ */ jsxs(DialogDescription, { children: [
+                      'Are you sure you want to sync the manufacturer "',
+                      (V = d == null ? void 0 : d.Manufacturer) == null ? void 0 : V.PublicName,
+                      '" to Shopify? This will add all products from this manufacturer to your Shopify store.'
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(DialogFooter, { children: [
+                    /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => E(!1), children: "Cancel" }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        className: "bg-green-600 hover:bg-green-700",
+                        onClick: R,
+                        disabled: _,
+                        children: _ ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
+                          "Syncing..."
+                        ] }) : "Confirm Sync"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ] })
+          }
+        ),
+        (d == null ? void 0 : d.Reseller) && /* @__PURE__ */ jsx(ResellerCard, { reseller: d == null ? void 0 : d.Reseller, loading: f })
+      ] })
+    ] }),
+    ((d == null ? void 0 : d.Reseller) || (d == null ? void 0 : d.Manufacturer)) && !f && /* @__PURE__ */ jsx("div", { className: "max-w-6xl mx-auto p-4", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: M(), className: "w-full", children: [
+      /* @__PURE__ */ jsxs(TabsList, { className: "inline-flex h-auto items-center justify-center rounded-none border-b bg-transparent p-0", children: [
+        (d == null ? void 0 : d.Reseller) && /* @__PURE__ */ jsx(
+          TabsTrigger,
+          {
+            value: "reseller-overview",
+            className: "reseller-theme relative h-12 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 text-sm font-medium text-muted-foreground shadow-none transition-none hover:text-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none cursor-pointer",
+            children: "Reseller Overview"
+          }
+        ),
+        (d == null ? void 0 : d.Manufacturer) && /* @__PURE__ */ jsx(
+          TabsTrigger,
+          {
+            value: "manufacturer-overview",
+            className: "manufacturer-theme relative h-12 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 text-sm font-medium text-muted-foreground shadow-none transition-none hover:text-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none cursor-pointer",
+            children: "Manufacturer Overview"
+          }
+        ),
+        (d == null ? void 0 : d.Manufacturer) && /* @__PURE__ */ jsx(
+          TabsTrigger,
+          {
+            value: "products",
+            className: "relative h-12 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 text-sm font-medium text-muted-foreground shadow-none transition-none hover:text-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none cursor-pointer",
+            children: "Products"
+          }
+        )
+      ] }),
+      (d == null ? void 0 : d.Reseller) && /* @__PURE__ */ jsx(TabsContent, { value: "reseller-overview", children: /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
+        ResellerOverview,
+        {
+          readonly: !0,
+          appID: d.ApplicationId || "",
+          reseller: d == null ? void 0 : d.Reseller,
+          userEmail: n,
+          isSuperAdmin: l,
+          withoutReports: !0
+        }
+      ) }) }),
+      (d == null ? void 0 : d.Manufacturer) && /* @__PURE__ */ jsx(TabsContent, { value: "manufacturer-overview", children: /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxs(Alert, { variant: "info", children: [
+        /* @__PURE__ */ jsx(CircleAlert, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(AlertTitle, { children: "Information" }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: "This feature is coming soon. Please try again later." })
+      ] }) }) }),
+      (d == null ? void 0 : d.Manufacturer) && /* @__PURE__ */ jsx(TabsContent, { value: "products", children: /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
+        ManufacturerProducts,
+        {
+          applicationId: e,
+          manufacturer: d.Manufacturer,
+          shopifyHostName: o
+        }
+      ) }) })
+    ] }) }),
+    f && /* @__PURE__ */ jsx("div", { className: "max-w-6xl mx-auto p-4 mt-4 flex justify-center items-center h-32", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-primary" }) })
+  ] });
+}
 export {
   ActiveOrdersCard,
   AiGeneratedContent,
@@ -69574,6 +69868,7 @@ export {
   MultiSelect,
   Navbar,
   PartnerCard,
+  PartnerRelationshipPage,
   Popover,
   PopoverAnchor,
   PopoverContent,