@plurix/ecom-components 1.11.4 → 1.11.6

package/dist/main.d.ts

@@ -6,7 +6,8 @@ export { Tour } from './packages/Tour/Tour';
 export { Regionalization } from './packages/Regionalization/Regionalization';
 export * from './packages/Regionalization/types';
 export { Modal } from './packages/Modal/Modal';
-export { ContactCard } from './packages/ContactCard/ContactCard';
-export * from './packages/ContactCard/ContactCard';
 export * from './types/ChangeOrderModal';
 export { ChangeOrderModal } from './packages/ChangeOrderModal/ChangeOrderModal';
+export { SearchSuggestions } from './packages/SearchSugestions/components/SearchSuggestions';
+export type { SearchSuggestionsProps } from './packages/SearchSugestions/types/SearchSuggestionsProps';
+export type { SearchSuggestionsApiResponse, Searches } from './packages/SearchSugestions/types/ResponseApi';

package/dist/main.js

@@ -1,20 +1,20 @@
 import { CartClubAlert as e } from "./packages/CartClubAlert/CartClubAlert.js";
-import { Carousel as a } from "./packages/Carousel/Carousel.js";
+import { Carousel as p } from "./packages/Carousel/Carousel.js";
 import { Coupons as f } from "./packages/Coupons/Coupons.js";
 import { Onboarding as x } from "./packages/Onboarding/Onboarding.js";
-import { Tour as C } from "./packages/Tour/Tour.js";
-import { Regionalization as d } from "./packages/Regionalization/Regionalization.js";
-import { Modal as u } from "./packages/Modal/Modal.js";
-import { ContactCard as b } from "./packages/ContactCard/ContactCard.js";
-import { ChangeOrderModal as M } from "./packages/ChangeOrderModal/ChangeOrderModal.js";
+import { Tour as l } from "./packages/Tour/Tour.js";
+import { Regionalization as i } from "./packages/Regionalization/Regionalization.js";
+import { Modal as C } from "./packages/Modal/Modal.js";
+import { ChangeOrderModal as s } from "./packages/ChangeOrderModal/ChangeOrderModal.js";
+import { SearchSuggestions as h } from "./packages/SearchSugestions/components/SearchSuggestions/index.js";
 export {
-  a as Carousel,
+  p as Carousel,
   e as CartClubAlert,
-  M as ChangeOrderModal,
-  b as ContactCard,
+  s as ChangeOrderModal,
   f as Coupons,
-  u as Modal,
+  C as Modal,
   x as Onboarding,
-  d as Regionalization,
-  C as Tour
+  i as Regionalization,
+  h as SearchSuggestions,
+  l as Tour
 };

package/dist/packages/SearchSugestions/components/Button/index.d.ts

@@ -0,0 +1,13 @@
+import { default as React, CSSProperties } from 'react';
+
+interface ButtonProps {
+    itemsToShowQuantity: number;
+    itemsToShow: number;
+    setItemsToShowQuantity: (itemsToShowQuantity: number) => void;
+    showMoreSuggestionsText?: string;
+    showLessSuggestionsText?: string;
+    buttonStyle?: CSSProperties;
+    buttonHoveredStyle?: CSSProperties;
+}
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/packages/SearchSugestions/components/Button/index.js

@@ -0,0 +1,48 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { showMoreOrLess as f } from "./showMoreOrLess.js";
+import { baseButtonStyle as m } from "../../styles/baseButtonStyle.js";
+import { baseButtonHoveredStyle as p } from "../../styles/baseButtonHoveredStyle.js";
+const x = ({
+  itemsToShowQuantity: t,
+  itemsToShow: e,
+  setItemsToShowQuantity: r,
+  showMoreSuggestionsText: a,
+  showLessSuggestionsText: l,
+  buttonStyle: u,
+  buttonHoveredStyle: i
+}) => {
+  const [c, s] = d(!1), o = {
+    ...m,
+    ...u
+  }, g = {
+    ...p,
+    ...i
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: "suggestion-button-container",
+      style: { textAlign: "center" },
+      children: /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: () => f(
+            e,
+            t,
+            r
+          ),
+          onMouseEnter: () => s(!0),
+          onMouseLeave: () => s(!1),
+          className: "suggestion-button",
+          style: c ? { ...o, ...g } : { ...o },
+          "data-testid": t === e ? "show" : "hide",
+          children: t === e ? a || "Ver todas as sugestões" : l || "Ocultar algumas sugestões"
+        }
+      )
+    }
+  );
+};
+export {
+  x as Button
+};

package/dist/packages/SearchSugestions/components/Button/showMoreOrLess.d.ts

@@ -0,0 +1 @@
+export declare const showMoreOrLess: (itemsToShow: number, itemsToShowQuantity: number, setItemsToShowQuantity: (itemsToShow: number) => void) => void;

package/dist/packages/SearchSugestions/components/Button/showMoreOrLess.js

@@ -0,0 +1,6 @@
+const f = (r, c, n) => {
+  n(c === r ? 1 / 0 : r);
+};
+export {
+  f as showMoreOrLess
+};

package/dist/packages/SearchSugestions/components/Link/index.d.ts

@@ -0,0 +1,10 @@
+import { default as React, CSSProperties } from 'react';
+
+interface LinkProps {
+    href: string;
+    children: React.ReactNode;
+    suggestionLinkStyle?: CSSProperties;
+    suggestionLinkHoveredStyle?: CSSProperties;
+}
+export declare const Link: React.FC<LinkProps>;
+export {};

package/dist/packages/SearchSugestions/components/Link/index.js

@@ -0,0 +1,34 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { navigation as u } from "./navigation.js";
+import { baseSuggestionLinkStyle as S } from "../../styles/baseSuggestionLinkStyle.js";
+import { baseSuggestionLinkHoveredStyle as f } from "../../styles/baseSuggestionLinkHoveredStyle.js";
+const y = ({
+  href: e,
+  children: n,
+  suggestionLinkStyle: i,
+  suggestionLinkHoveredStyle: s
+}) => {
+  const [r, o] = m(!1), t = {
+    ...S,
+    ...i
+  }, a = {
+    ...f,
+    ...s
+  };
+  return /* @__PURE__ */ l(
+    "a",
+    {
+      href: e,
+      onClick: (g) => u(g, e),
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
+      className: "suggestion-link",
+      style: r ? { ...t, ...a } : { ...t },
+      children: n
+    }
+  );
+};
+export {
+  y as Link
+};

package/dist/packages/SearchSugestions/components/Link/navigation.d.ts

@@ -0,0 +1 @@
+export declare const navigation: (event: React.MouseEvent<HTMLElement>, href: string) => void;

package/dist/packages/SearchSugestions/components/Link/navigation.js

@@ -0,0 +1,8 @@
+const o = (t, n) => {
+  t.preventDefault(), window.history.pushState({}, "", n);
+  const e = new PopStateEvent("popstate");
+  window.dispatchEvent(e);
+};
+export {
+  o as navigation
+};

package/dist/packages/SearchSugestions/components/SearchSuggestions/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SearchSuggestionsProps } from '../../types/SearchSuggestionsProps';
+
+export declare const SearchSuggestions: React.FC<SearchSuggestionsProps>;

package/dist/packages/SearchSugestions/components/SearchSuggestions/index.js

@@ -0,0 +1,83 @@
+import { jsxs as Q, jsx as s } from "react/jsx-runtime";
+import { useState as S, useEffect as _ } from "react";
+import { Link as k } from "../Link/index.js";
+import { Button as q } from "../Button/index.js";
+import { SearchText as A } from "../SearchText/Index.js";
+import { baseTitleStyle as E } from "../../styles/baseTitleStyle.js";
+import { baseAllSuggestionsContainerStyle as L } from "../../styles/baseAllSuggestionsContainerStyle.js";
+const K = ({
+  searchSuggestions: n,
+  loading: l,
+  itemsToShow: t = 1 / 0,
+  searchFor: r,
+  loadingText: c,
+  searchForText: g,
+  titleText: u,
+  showMoreSuggestionsText: f,
+  showLessSuggestionsText: m,
+  searchForStyle: p,
+  searchForTermStyle: d,
+  titleStyle: y,
+  allSuggestionsContainerStyle: h,
+  suggestionLinkStyle: x,
+  suggestionLinkHoveredStyle: N,
+  buttonStyle: v,
+  buttonHoveredStyle: b,
+  urlSearch: i
+}) => {
+  const [o, a] = S(t);
+  _(() => {
+    a(t);
+  }, [t]);
+  const j = t > 0 && n.length > t, B = (e) => i ? i.replace("{{term}}", e) : `/s/?q=${e}&sort=score_desc&page=0`;
+  return /* @__PURE__ */ Q("div", { className: "suggestions-main-container", children: [
+    r && /* @__PURE__ */ s(
+      A,
+      {
+        searchFor: r,
+        searchForText: g,
+        searchForStyle: p,
+        searchForTermStyle: d
+      }
+    ),
+    /* @__PURE__ */ s("h2", { style: { ...E, ...y }, children: u ?? "Ver por interesse:" }),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: "suggestions-all_suggestions-container",
+        style: {
+          ...L,
+          ...h
+        },
+        children: l ? /* @__PURE__ */ s("span", { className: "suggestions-loading", children: c ?? "Carregando sugestões..." }) : n.map(({ term: e }, C) => {
+          const I = /* @__PURE__ */ s(
+            k,
+            {
+              href: B(e),
+              suggestionLinkStyle: x,
+              suggestionLinkHoveredStyle: N,
+              children: e
+            },
+            e
+          );
+          return t >= 0 && C + 1 <= o ? I : null;
+        })
+      }
+    ),
+    j && /* @__PURE__ */ s(
+      q,
+      {
+        itemsToShowQuantity: o,
+        setItemsToShowQuantity: a,
+        itemsToShow: t,
+        showMoreSuggestionsText: f,
+        showLessSuggestionsText: m,
+        buttonStyle: v,
+        buttonHoveredStyle: b
+      }
+    )
+  ] });
+};
+export {
+  K as SearchSuggestions
+};

package/dist/packages/SearchSugestions/components/SearchText/Index.d.ts

@@ -0,0 +1,10 @@
+import { default as React, CSSProperties } from 'react';
+
+interface SearchForProps {
+    searchFor: string;
+    searchForText?: string;
+    searchForStyle?: CSSProperties;
+    searchForTermStyle?: CSSProperties;
+}
+export declare const SearchText: React.FC<SearchForProps>;
+export {};

package/dist/packages/SearchSugestions/components/SearchText/Index.js

@@ -0,0 +1,37 @@
+import { jsxs as r } from "react/jsx-runtime";
+import { baseSearchForStyle as o } from "../../styles/baseSearchForStyle.js";
+import { baseSearchForTermStyle as c } from "../../styles/baseSearchForTermStyle.js";
+const l = ({
+  searchFor: e,
+  searchForText: s,
+  searchForStyle: t,
+  searchForTermStyle: a
+}) => /* @__PURE__ */ r(
+  "p",
+  {
+    className: "suggestion-search_for",
+    style: { ...o, ...t },
+    "data-testid": "search-for",
+    children: [
+      s ?? "Você pesquisou por ",
+      /* @__PURE__ */ r(
+        "span",
+        {
+          className: "suggestion-search_for-term",
+          style: { ...c, ...a },
+          children: [
+            "“",
+            e.replace(
+              e.charAt(0),
+              e.charAt(0).toUpperCase()
+            ),
+            "”"
+          ]
+        }
+      )
+    ]
+  }
+);
+export {
+  l as SearchText
+};

package/dist/packages/SearchSugestions/index.d.ts

@@ -0,0 +1,3 @@
+export { SearchSuggestions } from './components/SearchSuggestions';
+export type { SearchSuggestionsProps } from './types/SearchSuggestionsProps';
+export type { SearchSuggestionsApiResponse, Searches } from './types/ResponseApi';

package/dist/packages/SearchSugestions/index.js

@@ -0,0 +1,4 @@
+import { SearchSuggestions as r } from "./components/SearchSuggestions/index.js";
+export {
+  r as SearchSuggestions
+};

package/dist/packages/SearchSugestions/mocks.d.ts

@@ -0,0 +1,4 @@
+export declare const mockSearchSuggestions: {
+    term: string;
+}[];
+export declare const mockSearchFor = "user search";

package/dist/packages/SearchSugestions/mocks.js

@@ -0,0 +1,16 @@
+const t = [
+  { term: "test-term-1" },
+  { term: "test-term-2" },
+  { term: "test-term-3" },
+  { term: "test-term-4" },
+  { term: "test-term-5" },
+  { term: "test-term-6" },
+  { term: "test-term-7" },
+  { term: "test-term-8" },
+  { term: "test-term-9" },
+  { term: "test-term-10" }
+], e = "user search";
+export {
+  e as mockSearchFor,
+  t as mockSearchSuggestions
+};

package/dist/packages/SearchSugestions/styles/baseAllSuggestionsContainerStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseAllSuggestionsContainerStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseAllSuggestionsContainerStyle.js

@@ -0,0 +1,10 @@
+const e = {
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: "8px 4px",
+  margin: "8px 0"
+};
+export {
+  e as baseAllSuggestionsContainerStyle
+};

package/dist/packages/SearchSugestions/styles/baseButtonHoveredStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseButtonHoveredStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseButtonHoveredStyle.js

@@ -0,0 +1,7 @@
+const o = {
+  background: "transparent",
+  color: "var(--color-support-links, #00289C)"
+};
+export {
+  o as baseButtonHoveredStyle
+};

package/dist/packages/SearchSugestions/styles/baseButtonStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseButtonStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseButtonStyle.js

@@ -0,0 +1,13 @@
+const o = {
+  display: "inline-block",
+  border: "none",
+  background: "transparent",
+  color: "var(--color-support-links, #00289C)",
+  fontSize: "14px",
+  lineHeight: "18px",
+  textDecoration: "underline",
+  cursor: "pointer"
+};
+export {
+  o as baseButtonStyle
+};

package/dist/packages/SearchSugestions/styles/baseSearchForStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseSearchForStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseSearchForStyle.js

@@ -0,0 +1,9 @@
+const c = {
+  margin: "0 0 24px 0",
+  color: "var(--color-grayScale, #1c1c1c)",
+  fontSize: "16px",
+  lineHeight: "20px"
+};
+export {
+  c as baseSearchForStyle
+};

package/dist/packages/SearchSugestions/styles/baseSearchForTermStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseSearchForTermStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseSearchForTermStyle.js

@@ -0,0 +1,8 @@
+const e = {
+  fontSize: "20px",
+  fontWeight: 700,
+  lineHeight: "24px"
+};
+export {
+  e as baseSearchForTermStyle
+};

package/dist/packages/SearchSugestions/styles/baseSuggestionLinkHoveredStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseSuggestionLinkHoveredStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseSuggestionLinkHoveredStyle.js

@@ -0,0 +1,7 @@
+const o = {
+  background: "var(--color-main, #004A93)",
+  color: "var(--color-grayScale-white, #fff)"
+};
+export {
+  o as baseSuggestionLinkHoveredStyle
+};

package/dist/packages/SearchSugestions/styles/baseSuggestionLinkStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseSuggestionLinkStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseSuggestionLinkStyle.js

@@ -0,0 +1,14 @@
+const o = {
+  display: "inline-block",
+  padding: "8.5px 8px",
+  border: "1px solid var(--color-main, #004A93)",
+  borderRadius: "16px",
+  color: "var(--color-main, #004A93)",
+  fontSize: "11px",
+  lineHeight: "15px",
+  textTransform: "capitalize",
+  textDecoration: "none"
+};
+export {
+  o as baseSuggestionLinkStyle
+};

package/dist/packages/SearchSugestions/styles/baseTitleStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+
+export declare const baseTitleStyle: CSSProperties;

package/dist/packages/SearchSugestions/styles/baseTitleStyle.js

@@ -0,0 +1,9 @@
+const e = {
+  margin: 0,
+  fontSize: 20,
+  lineHeight: "24px",
+  color: "var(--color-grayScale, #1c1c1c)"
+};
+export {
+  e as baseTitleStyle
+};

package/dist/packages/SearchSugestions/types/ResponseApi.d.ts

@@ -0,0 +1,10 @@
+export interface SearchSuggestionsApiResponse {
+    data: {
+        searchSuggestions: {
+            searches: Searches[];
+        };
+    };
+}
+export interface Searches {
+    term: string;
+}

package/dist/packages/SearchSugestions/types/ResponseApi.js

@@ -0,0 +1 @@
+

package/dist/packages/SearchSugestions/types/SearchSuggestionsProps.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react';
+
+export interface SearchSuggestionsProps {
+    searchSuggestions: Array<{
+        term: string;
+    }>;
+    loading: boolean;
+    itemsToShow?: number;
+    searchFor?: string;
+    loadingText?: string;
+    searchForText?: string;
+    titleText?: string;
+    showMoreSuggestionsText?: string;
+    showLessSuggestionsText?: string;
+    searchForStyle?: CSSProperties;
+    searchForTermStyle?: CSSProperties;
+    titleStyle?: CSSProperties;
+    allSuggestionsContainerStyle?: CSSProperties;
+    suggestionLinkStyle?: CSSProperties;
+    suggestionLinkHoveredStyle?: CSSProperties;
+    buttonStyle?: CSSProperties;
+    buttonHoveredStyle?: CSSProperties;
+    urlSearch?: string;
+}

package/dist/packages/SearchSugestions/types/SearchSuggestionsProps.js

@@ -0,0 +1 @@
+

package/package.json

@@ -2,7 +2,7 @@
   "name": "@plurix/ecom-components",
   "author": "Plurix",
   "private": false,
-  "version": "1.11.4",
+  "version": "1.11.6",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/packages/ContactCard/ContactCard.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-export interface ContactCardProps {
-    title: string;
-    subtitle?: string;
-    image?: string;
-    alt?: string;
-    imgWidth?: number;
-    linkItem?: {
-        link: string;
-        linkText: string;
-    };
-    backgroundColor?: string;
-    color?: string;
-    widthContainer?: number;
-    heightContainer?: number;
-    padding?: number | string;
-    alignItems?: string;
-    justifyContent?: string;
-    marginRightLogo?: number;
-    lineHeightContainer?: number | string;
-}
-export declare const ContactCard: ({ title, subtitle, image, alt, imgWidth, linkItem, backgroundColor, color, widthContainer, heightContainer, padding, alignItems, justifyContent, marginRightLogo, lineHeightContainer }: ContactCardProps) => JSX.Element;

package/dist/packages/ContactCard/ContactCard.js

@@ -1,40 +0,0 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-const j = ({
-  title: o,
-  subtitle: n,
-  image: r,
-  alt: l,
-  imgWidth: s,
-  linkItem: t,
-  backgroundColor: c,
-  color: a,
-  widthContainer: d,
-  heightContainer: h,
-  padding: g,
-  alignItems: x,
-  justifyContent: p,
-  marginRightLogo: y,
-  lineHeightContainer: C
-}) => /* @__PURE__ */ i("div", { className: "container-card", style: {
-  backgroundColor: c || "#25D366",
-  color: a || "#FFFFFF",
-  height: h,
-  width: d,
-  display: "flex",
-  justifyContent: p || "center",
-  padding: g || "16px 24px",
-  alignItems: x || "center",
-  lineHeight: C || "10px"
-}, children: [
-  /* @__PURE__ */ e("div", { className: "logo", style: {
-    marginRight: y || 10
-  }, children: r && /* @__PURE__ */ e("img", { src: r, alt: l || "", width: s || 50 }) }),
-  /* @__PURE__ */ i("div", { className: "text-box", children: [
-    /* @__PURE__ */ e("p", { children: o }),
-    n && /* @__PURE__ */ e("p", { children: n }),
-    t && /* @__PURE__ */ e("a", { href: t.link, children: t.linkText })
-  ] })
-] });
-export {
-  j as ContactCard
-};