@plurix/ecom-components 0.0.2-beta.2 → 0.0.2-beta.4

package/dist/packages/Carousel/Carousel.js

@@ -0,0 +1,128 @@
+import { jsx as s, Fragment as V, jsxs as y } from "react/jsx-runtime";
+import { Children as j, useState as a, useRef as N, useEffect as w } from "react";
+import _ from "./components/Bullets.js";
+import B from "./components/Arrows.js";
+import { DefaultProps as L } from "./utils/defaultProps.js";
+/* empty css                     */const O = ({
+  children: x,
+  id: m,
+  bullet: c,
+  arrow: r,
+  qtyItems: l,
+  gapItems: $ = 4
+}) => {
+  const v = j.toArray(x), [k, p] = a(0), [M, S] = a(0), [u, D] = a(0), [E, I] = a(null), n = N(null), i = N(null), f = {
+    bullets: {
+      ...L.styles.bullets,
+      ...c == null ? void 0 : c.style
+    },
+    arrows: {
+      ...L.styles.arrows,
+      ...r == null ? void 0 : r.style
+    }
+  }, h = () => {
+    if (n.current) {
+      const t = n.current.scrollWidth, e = n.current.scrollLeft, o = n.current.offsetWidth, d = Math.ceil(t / o), R = Math.round(e / (t / d) - 0.3) + 1;
+      I(`${R}/${d}`);
+    }
+  }, A = () => {
+    if (n.current && i.current) {
+      const t = i.current.clientWidth, e = n.current.scrollLeft, o = Math.round(e / t);
+      S(o);
+    }
+  }, W = (t) => {
+    if (n.current && i.current) {
+      const e = i.current.clientWidth;
+      t === "prev" && (n.current.scrollLeft -= e), t === "next" && (n.current.scrollLeft += e);
+    }
+  }, C = () => {
+    if (n.current && i.current) {
+      const t = i.current.clientWidth, e = n.current.offsetWidth, o = n.current.scrollWidth, d = Math.round((o - e) / t);
+      p(l ? Math.ceil(v.length - l) : d);
+    }
+  }, F = (t) => {
+    if (n.current && i.current) {
+      const e = i.current.clientWidth;
+      n.current.scrollLeft = e * t;
+    }
+  }, g = (t) => {
+    if (n.current) {
+      const o = n.current.offsetWidth / t;
+      D(o);
+    }
+  }, Q = {
+    width: `${u < 150 ? 150 : u >= 226 ? 226 : u}px`
+  };
+  return typeof window < "u" && window.addEventListener("resize", () => {
+    h(), C(), l && g(l);
+  }), w(() => {
+    var t;
+    l && g(l), C(), h(), (t = n.current) == null || t.addEventListener("scroll", () => {
+      h(), A();
+    });
+  }, [n]), /* @__PURE__ */ s(V, { children: /* @__PURE__ */ y("div", { id: "carousel", "data-testid": "Carousel", children: [
+    /* @__PURE__ */ y("div", { className: "carousel-content", children: [
+      /* @__PURE__ */ s("div", { className: "carousel-arrow-button-prev", children: (r == null ? void 0 : r.isVisible) && /* @__PURE__ */ s(
+        B,
+        {
+          position: "prev",
+          style: f.arrows,
+          iconColor: r.iconColor ?? "#ccc",
+          onClick: () => W("prev")
+        }
+      ) }),
+      /* @__PURE__ */ s(
+        "div",
+        {
+          ref: n,
+          className: "carousel-container",
+          id: `carousel-container-tracking${m ? "-" + m : ""}`,
+          children: v.map((t, e) => /* @__PURE__ */ s(
+            "div",
+            {
+              className: "container-item",
+              style: {
+                ...Q,
+                transition: "all 0.5s  ease-out",
+                marginRight: `${$}px`
+              },
+              ref: i,
+              children: t
+            },
+            e
+          ))
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "carousel-arrow-button-next", children: r != null && r.isVisible ? /* @__PURE__ */ s(
+        B,
+        {
+          position: "next",
+          style: f.arrows,
+          iconColor: r.iconColor ?? "#ccc",
+          onClick: () => W("next")
+        }
+      ) : "" })
+    ] }),
+    (c == null ? void 0 : c.numeric) && /* @__PURE__ */ s("div", { className: "numeric-bullets", children: E }),
+    c != null && c.isVisible ? /* @__PURE__ */ s("div", { className: "bullets-container", children: Array.from({ length: k + 1 }, (t, e) => e + 1).map(
+      (t, e) => /* @__PURE__ */ s(
+        _,
+        {
+          onClick: () => {
+            F(e);
+          },
+          index: e,
+          style: {
+            ...f.bullets,
+            transition: "all 0.8s  ease-out",
+            backgroundColor: `${M === e ? (c == null ? void 0 : c.bulletEnableColor) ?? "#ff0000" : (c == null ? void 0 : c.bulletDisableColor) ?? "#ccc"}`
+          }
+        },
+        e
+      )
+    ) }) : ""
+  ] }) });
+};
+export {
+  O as Carousel
+};

package/dist/packages/Carousel/components/Arrows.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    onClick: () => void;
+    style: object;
+    position: string;
+    iconColor: string;
+}
+declare const Arrows: ({ onClick, style, position, iconColor }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Arrows;

package/dist/packages/Carousel/components/Arrows.js

@@ -0,0 +1,43 @@
+import { jsx as t } from "react/jsx-runtime";
+const s = ({ onClick: r, style: o, position: n, iconColor: e }) => /* @__PURE__ */ t("button", { style: o, onClick: r, children: n === "prev" ? /* @__PURE__ */ t(
+  "svg",
+  {
+    width: "7",
+    height: "10",
+    viewBox: "0 0 7 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M5.5 1L1.5 5L5.5 9",
+        stroke: e,
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+) : /* @__PURE__ */ t(
+  "svg",
+  {
+    width: "7",
+    height: "10",
+    viewBox: "0 0 7 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M1.5 1L5.5 5L1.5 9",
+        stroke: e,
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+) });
+export {
+  s as default
+};

package/dist/packages/Carousel/components/Bullets.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    index: number;
+    onClick: () => void;
+    style: object;
+}
+declare const Bullets: ({ index, onClick, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Bullets;

package/dist/packages/Carousel/components/Bullets.js

@@ -0,0 +1,5 @@
+import { jsx as e } from "react/jsx-runtime";
+const u = ({ index: t, onClick: o, style: r }) => /* @__PURE__ */ e("button", { style: r, onClick: o }, t);
+export {
+  u as default
+};

package/dist/packages/Carousel/test/Carrousel.test.js

@@ -0,0 +1,80 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { render as i } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Carousel as t } from "../Carousel.js";
+const d = {
+  width: "226px",
+  height: "400px"
+};
+describe("Carousel", () => {
+  it("Should render Component", () => {
+    const { queryByTestId: r } = i(
+      /* @__PURE__ */ l(t, { qtyItems: 5, children: [
+        /* @__PURE__ */ e("div", { style: d, children: /* @__PURE__ */ e("p", { children: "Carousel 1" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, children: /* @__PURE__ */ e("p", { children: "Carousel 2" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, children: /* @__PURE__ */ e("p", { children: "Carousel 3" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, children: /* @__PURE__ */ e("p", { children: "Carousel 4" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, children: /* @__PURE__ */ e("p", { children: "Carousel 5" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, children: /* @__PURE__ */ e("p", { children: "Carousel 6" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, children: /* @__PURE__ */ e("p", { children: "Carousel 7" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, children: /* @__PURE__ */ e("p", { children: "Carousel 8" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, children: /* @__PURE__ */ e("p", { children: "Carousel 9" }) })
+      ] })
+    );
+    expect(r("Carousel")).toBeInTheDocument();
+  }), it("Should render elements in carousel ", () => {
+    const { queryByTestId: r } = i(
+      /* @__PURE__ */ l(t, { qtyItems: 5, children: [
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 1", children: /* @__PURE__ */ e("p", { children: "Carousel 1" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 2", children: /* @__PURE__ */ e("p", { children: "Carousel 2" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 3", children: /* @__PURE__ */ e("p", { children: "Carousel 3" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 4", children: /* @__PURE__ */ e("p", { children: "Carousel 4" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 5", children: /* @__PURE__ */ e("p", { children: "Carousel 5" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 6", children: /* @__PURE__ */ e("p", { children: "Carousel 6" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 7", children: /* @__PURE__ */ e("p", { children: "Carousel 7" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 8", children: /* @__PURE__ */ e("p", { children: "Carousel 8" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 9", children: /* @__PURE__ */ e("p", { children: "Carousel 9" }) })
+      ] })
+    );
+    expect(r("Carousel 5")).toBeInTheDocument(), expect(r("Carousel 10")).not.toBeInTheDocument();
+  }), it("Should render elements in carousel with label ", () => {
+    const { getAllByText: r } = i(
+      /* @__PURE__ */ l(t, { qtyItems: 5, children: [
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 1", children: /* @__PURE__ */ e("p", { children: "Carousel 1" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 2", children: /* @__PURE__ */ e("p", { children: "Carousel 2" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 3", children: /* @__PURE__ */ e("p", { children: "Carousel 3" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 4", children: /* @__PURE__ */ e("p", { children: "Carousel 4" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 5", children: /* @__PURE__ */ e("p", { children: "Carousel 5" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 6", children: /* @__PURE__ */ e("p", { children: "Carousel 6" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 7", children: /* @__PURE__ */ e("p", { children: "Carousel 7" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 8", children: /* @__PURE__ */ e("p", { children: "Carousel 8" }) }),
+        ",",
+        /* @__PURE__ */ e("div", { style: d, "data-testid": "Carousel 9", children: /* @__PURE__ */ e("p", { children: "Carousel 9" }) })
+      ] })
+    );
+    expect(r("Carousel 9").length).toBe(1);
+  });
+});

package/dist/packages/Carousel/utils/defaultProps.d.ts

@@ -0,0 +1,19 @@
+export declare const DefaultProps: {
+    styles: {
+        bullets: {
+            width: string;
+            height: string;
+            borderStyle: string;
+            borderRadius: string;
+            margin: string;
+        };
+        arrows: {
+            width: string;
+            height: string;
+            color: string;
+            borderStyle: string;
+            borderRadius: string;
+            margin: string;
+        };
+    };
+};

package/dist/packages/Carousel/utils/defaultProps.js

@@ -0,0 +1,22 @@
+const e = {
+  styles: {
+    bullets: {
+      width: "15px",
+      height: "15px",
+      borderStyle: "none",
+      borderRadius: "30px",
+      margin: "7px"
+    },
+    arrows: {
+      width: "40px",
+      height: " 40px",
+      color: "white",
+      borderStyle: "none",
+      borderRadius: "30px",
+      margin: "10px"
+    }
+  }
+};
+export {
+  e as DefaultProps
+};

package/dist/packages/Coupons/Coupons.d.ts

@@ -0,0 +1,14 @@
+
+interface CouponsProps {
+    orderFormId: string;
+    hasItemsInCart: boolean;
+    builder: 'faststore' | 'app';
+    account: string;
+    isIO?: boolean;
+    closeIOModal?: () => void;
+    activeOrderFormCoupon?: string;
+    genericTaggingEvent?: (name: string, params: object) => void;
+    disableFirstEmptyModal?: boolean;
+}
+export declare const Coupons: ({ orderFormId, hasItemsInCart, builder, account, isIO, closeIOModal, activeOrderFormCoupon, genericTaggingEvent, disableFirstEmptyModal }: CouponsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/Coupons/Coupons.js

@@ -0,0 +1,100 @@
+import { jsx as t, jsxs as k } from "react/jsx-runtime";
+import { useState as e, useEffect as V } from "react";
+import { getCoupons as z } from "./api/getCoupons.js";
+import { LoadingView as B } from "./views/LoadingView.js";
+import { CouponsView as E } from "./views/CouponsView.js";
+import { RulesView as G } from "./views/RulesView.js";
+import { OverwriteView as H } from "./views/OverwriteView.js";
+import { EmptyCartView as J } from "./views/EmptyCartView.js";
+/* empty css                    */const F = ({
+  orderFormId: v,
+  hasItemsInCart: i,
+  builder: R,
+  account: a,
+  isIO: o = !1,
+  closeIOModal: p,
+  activeOrderFormCoupon: r,
+  genericTaggingEvent: s,
+  disableFirstEmptyModal: x
+}) => {
+  const [L, c] = e(!0), [j, q] = e([]), [n, u] = e("coupons-view"), [S, f] = e(!1), [l, w] = e(!1), [C, d] = e(""), [m, y] = e(""), [h, N] = e(
+    !x
+  ), [A, D] = e();
+  return V(() => {
+    r && d(r);
+  }, [r]), V(() => {
+    (async () => {
+      c(!0);
+      try {
+        const b = await z(a, R);
+        q(b);
+      } finally {
+        c(!1);
+      }
+    })();
+  }, []), L ? /* @__PURE__ */ t("div", { className: "coupons-container", children: /* @__PURE__ */ t(
+    B,
+    {
+      isIO: o,
+      closeIOModal: p,
+      genericTaggingEvent: s
+    }
+  ) }) : /* @__PURE__ */ k("div", { className: "coupons-container", children: [
+    (!o || o && n === "coupons-view") && /* @__PURE__ */ t(
+      E,
+      {
+        orderFormId: v,
+        hasItemsInCart: i,
+        account: a,
+        isIO: o,
+        closeIOModal: p,
+        coupons: j,
+        firstCouponName: C,
+        secondCouponName: m,
+        replaceCoupon: l,
+        setView: u,
+        setFirstCouponName: d,
+        setSecondCouponName: y,
+        setActiveRule: f,
+        setDataItem: D,
+        setReplaceCoupon: w,
+        setIsCloseModalEmpty: N,
+        genericTaggingEvent: s
+      }
+    ),
+    (!o || o && n === "rules-view") && S && /* @__PURE__ */ t(
+      G,
+      {
+        dataItem: A,
+        setActiveRule: f,
+        setView: u,
+        isIO: o,
+        closeIOModal: p,
+        genericTaggingEvent: s
+      }
+    ),
+    (!o || o && n === "overwrite-view") && m && !l && /* @__PURE__ */ t(
+      H,
+      {
+        firstCouponName: C,
+        secondCouponName: m,
+        setView: u,
+        setReplaceCoupon: w,
+        setSecondCouponName: y,
+        isIO: o,
+        closeIOModal: p,
+        genericTaggingEvent: s
+      }
+    ),
+    !i && h && /* @__PURE__ */ t(
+      J,
+      {
+        setIsCloseModalEmpty: N,
+        genericTaggingEvent: s
+      }
+    )
+  ] });
+};
+export {
+  F as Coupons
+};

package/dist/packages/Coupons/api/addCoupon.d.ts

@@ -0,0 +1,3 @@
+import { SetOrderFormCouponResponse } from '../types/SetOrderFormCouponResponse';
+
+export declare const addCoupon: (account: string, orderFormId: string, couponId: string) => Promise<SetOrderFormCouponResponse>;

package/dist/packages/Coupons/api/addCoupon.js

@@ -0,0 +1,14 @@
+import r from "axios";
+const s = async (o, t, a) => {
+  const { data: p } = await r.post(
+    `https://${o}.vtex.app/api/coupon/order`,
+    {
+      orderFormId: t,
+      couponId: a
+    }
+  );
+  return p;
+};
+export {
+  s as addCoupon
+};

package/dist/packages/Coupons/api/getCoupons.d.ts

@@ -0,0 +1,3 @@
+import { CouponType } from '../types/CouponType';
+
+export declare const getCoupons: (account: string, builder: 'app' | 'faststore') => Promise<CouponType[]>;

package/dist/packages/Coupons/api/getCoupons.js

@@ -0,0 +1,15 @@
+import p from "axios";
+const s = async (o, t) => {
+  const {
+    data: { coupons: a }
+  } = await p.get(
+    `https://${o}.vtex.app/api/coupon/list`,
+    {
+      params: { builder: t, random: Math.random() }
+    }
+  );
+  return a;
+};
+export {
+  s as getCoupons
+};

package/dist/packages/Coupons/api/removeCoupon.d.ts

@@ -0,0 +1,3 @@
+import { SetOrderFormCouponResponse } from '../types/SetOrderFormCouponResponse';
+
+export declare const removeCoupon: (account: string, orderFormId: string) => Promise<SetOrderFormCouponResponse>;

package/dist/packages/Coupons/api/removeCoupon.js

@@ -0,0 +1,13 @@
+import e from "axios";
+const r = async (o, t) => {
+  const { data: a } = await e.delete(
+    `https://${o}.vtex.app/api/coupon/order`,
+    {
+      data: { orderFormId: t }
+    }
+  );
+  return a;
+};
+export {
+  r as removeCoupon
+};

package/dist/packages/Coupons/components/Alert.d.ts

@@ -0,0 +1,6 @@
+interface AlertProps {
+    type: AlertType;
+}
+export type AlertType = '' | 'success' | 'removed' | 'error';
+export declare const Alert: ({ type }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/Coupons/components/Alert.js

@@ -0,0 +1,13 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { SuccessIcon as r } from "../../../assets/svgs/SuccessIcon.js";
+import { ErrorIcon as e } from "../../../assets/svgs/ErrorIcon.js";
+const m = ({ type: s }) => s === "success" || s === "removed" ? /* @__PURE__ */ c("div", { className: "applied-coupon-badge success-coupon", children: [
+  /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(r, {}) }),
+  s === "success" ? "Cupom aplicado com sucesso" : "Cupom removido com sucesso"
+] }) : /* @__PURE__ */ c("div", { className: "applied-coupon-badge error-coupon", children: [
+  /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(e, {}) }),
+  "Não foi possível aplicar o cupom. Tente aplicar mais tarde."
+] });
+export {
+  m as Alert
+};

package/dist/packages/Coupons/components/Breadcrumb.d.ts

@@ -0,0 +1,6 @@
+interface BreadcrumbProps {
+    title: string;
+    cancelButtonAction: () => void;
+}
+export declare const Breadcrumb: ({ title, cancelButtonAction }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/packages/Coupons/components/Breadcrumb.js

@@ -0,0 +1,33 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { ArrowIcon as a } from "../../../assets/svgs/ArrowIcon.js";
+const s = ({ title: c, cancelButtonAction: o }) => /* @__PURE__ */ t("div", { className: "breadcrumb-container", children: [
+  /* @__PURE__ */ t("div", { className: "breadcrumb-content-container", children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        onClick: o,
+        "data-testid": "back-to-coupons-button",
+        children: "Meus Cupons"
+      }
+    ),
+    " ",
+    /* @__PURE__ */ r(a, {}),
+    " ",
+    /* @__PURE__ */ r("span", { children: c })
+  ] }),
+  /* @__PURE__ */ t(
+    "button",
+    {
+      className: "breadcrumb-back-button",
+      onClick: o,
+      "data-testid": "back-button",
+      children: [
+        /* @__PURE__ */ r(a, { color: "var(--color-support-links)", rotate: "Left" }),
+        " Voltar"
+      ]
+    }
+  )
+] });
+export {
+  s as Breadcrumb
+};

package/dist/packages/Coupons/components/CouponCard.d.ts

@@ -0,0 +1,25 @@
+import { CouponType } from '../types/CouponType';
+import { View } from '../types/Views';
+import { AlertType } from './Alert';
+
+export interface CouponCardProps {
+    account: string;
+    orderFormId: string;
+    hasItemsInCart: boolean;
+    isIO?: boolean;
+    item: CouponType;
+    firstCouponName: string;
+    secondCouponName: string;
+    replaceCoupon: boolean;
+    setView: (view: View) => void;
+    setFirstCouponName: (firstCouponName: string) => void;
+    setSecondCouponName: (secondCouponName: string) => void;
+    setActiveRule: (activeRule: boolean) => void;
+    setDataItem: (dataItem: CouponType) => void;
+    setReplaceCoupon: (replaceCoupon: boolean) => void;
+    setAlert: (errorMessage: boolean) => void;
+    setType: (type: AlertType) => void;
+    setIsCloseModalEmpty: (isCloseModalEmpty: boolean) => void;
+    genericTaggingEvent?: (name: string, params: object) => void;
+}
+export declare const CouponCard: ({ account, orderFormId, hasItemsInCart, isIO, item, firstCouponName, secondCouponName, replaceCoupon, setView, setActiveRule, setDataItem, setFirstCouponName, setSecondCouponName, setReplaceCoupon, setAlert, setType, setIsCloseModalEmpty, genericTaggingEvent }: CouponCardProps) => import("react/jsx-runtime").JSX.Element;