@plurix/ecom-components 1.16.0-commerce.0 → 1.16.1-commerce

package/dist/packages/Coupons/Coupons.js

@@ -1,120 +1,82 @@
-import { jsx as e, jsxs as P } from "react/jsx-runtime";
-import { useState as t, useEffect as h } from "react";
-import { LoadingView as Q } from "./views/LoadingView.js";
-import { CouponsView as U } from "./views/CouponsView.js";
-import { RulesView as W } from "./views/RulesView.js";
-import { OverwriteView as X } from "./views/OverwriteView.js";
-import { EmptyCartView as Y } from "./views/EmptyCartView.js";
-import { getCoupons as Z } from "./api/getCoupons.js";
-/* empty css                    */const to = ({
-  orderFormId: j,
-  hasItemsInCart: f,
-  builder: l,
-  account: A,
-  isIO: o = !1,
-  closeIOModal: r,
-  activeOrderFormCoupon: n,
-  genericTaggingEvent: s,
-  disableFirstEmptyModal: J,
-  couponsList: p,
-  qtdCouponsView: w,
-  getCouponsMutation: q,
-  addCouponMutation: D,
-  removeCouponMutation: L
-}) => {
-  const [k, C] = t(!0), [z, a] = t([]), [u, c] = t("coupons-view"), [B, N] = t(!1), [d, y] = t(!1), [v, R] = t(""), [m, V] = t(""), [E, S] = t(
-    !J
-  ), [G, H] = t();
-  return h(() => {
-    n && R(n);
-  }, [n]), h(() => {
-    (async () => {
-      C(!0);
-      try {
-        const i = o ? await Z(l, p) : await q({
-          input: {
-            builder: l,
-            couponsList: p
-          }
-        }), x = o ? i : JSON.parse(i.getCoupons.data).coupons;
-        if (w) {
-          const K = x.slice(0, w);
-          a(K);
-          return;
-        }
-        a(x);
-        return;
-      } catch (i) {
-        a([]);
-      } finally {
-        C(!1);
-      }
-    })();
-  }, [JSON.stringify(p)]), k ? /* @__PURE__ */ e("div", { className: "coupons-container", children: /* @__PURE__ */ e(
-    Q,
+import { jsx as o, jsxs as e, Fragment as p } from "react/jsx-runtime";
+import { Skeleton as C } from "../Skeleton/index.js";
+import { ErrorIcon as f } from "../../assets/svgs/ErrorIcon.js";
+import { CouponCard as N } from "./components/CouponCard.js";
+import { Alert as v } from "./components/Alert.js";
+import { NoCoupons as b } from "./components/NoCoupons.js";
+import { useCoupons as S } from "./hooks/useCoupons.js";
+/* empty css                    */const k = (r) => {
+  const { isIO: l } = r, {
+    isLoadingCouponList: m,
+    coupons: i,
+    currentCoupon: a,
+    inputCoupon: u,
+    isLoadingButton: c,
+    isInputError: s,
+    showAlert: n,
+    handleSubmit: d,
+    handleChangeInput: h,
+    changeCoupon: g
+  } = S(r);
+  return m ? /* @__PURE__ */ o("div", { className: "coupons-container", children: /* @__PURE__ */ o(
+    C,
     {
-      isIO: o,
-      closeIOModal: r,
-      genericTaggingEvent: s
+      width: "100%",
+      height: 600,
+      backgroundColor: "var(--color-grayScale-faded)",
+      margin: "auto",
+      animation: !0
     }
-  ) }) : /* @__PURE__ */ P("div", { className: "coupons-container", children: [
-    (!o || o && u === "coupons-view") && /* @__PURE__ */ e(
-      U,
-      {
-        removeCouponMutation: L,
-        addCouponMutation: D,
-        orderFormId: j,
-        hasItemsInCart: f,
-        account: A,
-        isIO: o,
-        closeIOModal: r,
-        coupons: z,
-        firstCouponName: v,
-        secondCouponName: m,
-        replaceCoupon: d,
-        setView: c,
-        setFirstCouponName: R,
-        setSecondCouponName: V,
-        setActiveRule: N,
-        setDataItem: H,
-        setReplaceCoupon: y,
-        setIsCloseModalEmpty: S,
-        genericTaggingEvent: s
-      }
-    ),
-    (!o || o && u === "rules-view") && B && /* @__PURE__ */ e(
-      W,
-      {
-        dataItem: G,
-        setActiveRule: N,
-        setView: c,
-        isIO: o,
-        closeIOModal: r,
-        genericTaggingEvent: s
-      }
-    ),
-    (!o || o && u === "overwrite-view") && m && !d && /* @__PURE__ */ e(
-      X,
-      {
-        firstCouponName: v,
-        secondCouponName: m,
-        setView: c,
-        setReplaceCoupon: y,
-        setSecondCouponName: V,
-        isIO: o,
-        closeIOModal: r,
-        genericTaggingEvent: s
-      }
-    ),
-    !f && E && /* @__PURE__ */ e(
-      Y,
-      {
-        setIsCloseModalEmpty: S,
-        genericTaggingEvent: s
-      }
-    )
+  ) }) : /* @__PURE__ */ e("div", { className: "coupons-container", children: [
+    /* @__PURE__ */ e("div", { className: "form-coupons", children: [
+      /* @__PURE__ */ o("p", { children: "Digite o código do seu cupom ou selecione o que deseja resgatar:" }),
+      /* @__PURE__ */ e("form", { onSubmit: d, children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            type: "text",
+            placeholder: "Digite o código",
+            value: u,
+            onChange: h,
+            className: s ? "error" : ""
+          }
+        ),
+        /* @__PURE__ */ o("button", { type: "submit", name: "Aplicar", disabled: c, children: "Aplicar" }),
+        s && /* @__PURE__ */ e("p", { className: "error-message", children: [
+          /* @__PURE__ */ o(f, {}),
+          " Não foi possível aplicar o Cupom"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "container-title-coupons", children: i.length > 0 ? /* @__PURE__ */ e(p, { children: [
+      !l && /* @__PURE__ */ e(p, { children: [
+        /* @__PURE__ */ o("h2", { className: "container-main-title", children: "Seus Cupons de Descontos" }),
+        /* @__PURE__ */ o("p", { className: "container-main-subtitle", children: "Você precisa ter um cupom e pelo menos 1 item no carrinho para aplicar o desconto." })
+      ] }),
+      /* @__PURE__ */ o("div", { className: "container-coupons", children: i.map((t) => /* @__PURE__ */ o(
+        N,
+        {
+          item: t,
+          currentCoupon: a,
+          changeCoupon: g,
+          isLoading: c
+        },
+        t.couponName
+      )) }),
+      n && /* @__PURE__ */ e(v, { type: n, children: [
+        n === "applied" && /* @__PURE__ */ e("p", { children: [
+          "Cupom ",
+          /* @__PURE__ */ o("strong", { children: a }),
+          " aplicado com sucesso!"
+        ] }),
+        n === "warning" && /* @__PURE__ */ e("p", { children: [
+          "Para adicionar o cupom, é necessário que você tenha pelo menos ",
+          /* @__PURE__ */ o("strong", { children: "1 produto no carrinho." })
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ o(b, {}) })
   ] });
 };
 export {
-  to as Coupons
+  k as Coupons
 };

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

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 interface AlertProps {
     type: AlertType;
+    children: React.ReactNode;
 }
-export type AlertType = '' | 'success' | 'removed' | 'error';
-export declare const Alert: ({ type }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export type AlertType = '' | 'applied' | 'warning';
+export declare const Alert: ({ type, children }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,13 +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."
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { CheckMarkBoxIcon as t } from "../../../assets/svgs/CheckMarkBoxIcon.js";
+import { WarningIcon as a } from "../../../assets/svgs/WarningIcon.js";
+const c = {
+  applied: /* @__PURE__ */ n(t, {}),
+  warning: /* @__PURE__ */ n(a, {})
+}, s = ({ type: r, children: o }) => r === "" ? null : /* @__PURE__ */ i("div", { className: `alert ${r}`, children: [
+  c[r],
+  o
 ] });
 export {
-  m as Alert
+  s as Alert
 };

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

@@ -1,27 +1,10 @@
 import { CouponType } from '../types/CouponType';
-import { View } from '../types/Views';
-import { AlertType } from './Alert';
+import { ChangeCouponParams } from '../hooks/useCoupons';
 
 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;
-    addCouponMutation?: any;
-    removeCouponMutation?: any;
+    currentCoupon: string;
+    changeCoupon: (params: ChangeCouponParams) => Promise<void>;
+    isLoading: boolean;
 }
-export declare const CouponCard: ({ orderFormId, hasItemsInCart, isIO, item, firstCouponName, secondCouponName, replaceCoupon, setView, setActiveRule, setDataItem, setFirstCouponName, setSecondCouponName, setReplaceCoupon, setAlert, setType, setIsCloseModalEmpty, genericTaggingEvent, addCouponMutation, removeCouponMutation }: CouponCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CouponCard: ({ item, currentCoupon, changeCoupon, isLoading }: CouponCardProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,142 +1,88 @@
-import { jsxs as p, jsx as c } from "react/jsx-runtime";
-import { useState as V, useEffect as q } from "react";
-import { addCoupon as B } from "../api/addCoupon.js";
-import { CouponIcon as G } from "../../../assets/svgs/CouponIcon.js";
-import { SuccessIcon as H } from "../../../assets/svgs/SuccessIcon.js";
-import { removeCoupon as K } from "../api/removeCoupon.js";
-const Z = ({
-  orderFormId: t,
-  hasItemsInCart: D,
-  isIO: r = !1,
-  item: a,
-  firstCouponName: s,
-  secondCouponName: d,
-  replaceCoupon: b,
-  setView: R,
-  setActiveRule: z,
-  setDataItem: J,
-  setFirstCouponName: L,
-  setSecondCouponName: _,
-  setReplaceCoupon: j,
-  setAlert: f,
-  setType: m,
-  setIsCloseModalEmpty: y,
-  genericTaggingEvent: o,
-  addCouponMutation: S,
-  removeCouponMutation: i
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useState as w, useRef as h, useEffect as m } from "react";
+import { CouponIcon as g } from "../../../assets/svgs/CouponIcon.js";
+import { CheckMarkIcon as x } from "../../../assets/svgs/CheckMarkIcon.js";
+import { CloseIcon as b } from "../../../assets/svgs/CloseIcon.js";
+const T = ({
+  item: o,
+  currentCoupon: t,
+  changeCoupon: f,
+  isLoading: N
 }) => {
-  const [x, u] = V(!1), [k, w] = V(!1);
-  q(() => {
-    d.toLowerCase() !== a.couponName.toLowerCase() && u(!1), s && !d && s.toLowerCase() === a.couponName.toLowerCase() && u(!0), s && d && b && d.toLowerCase() === a.couponName.toLowerCase() && A(d);
-  }, [s, d, b]);
-  const A = async (l) => {
-    if (D)
-      try {
-        if (!s || s && b) {
-          w(!0);
-          const h = r ? await B(t, l) : await S({
-            input: {
-              orderFormId: t,
-              couponId: l
-            }
-          }), N = r ? h : JSON.parse(h.addCoupon.data);
-          j(!1), L(l), _(""), N.error.length <= 0 ? (o == null || o("discount_coupon", {
-            name: "cupom aplicado",
-            cupomName: l
-          }), m("success"), u(!0), r && window.location.reload()) : (o == null || o("discount_coupon", {
-            name: "cupom aplicando - cupom incorreto ou expirado",
-            cupomName: l,
-            objectError: N.error
-          }), m("error"), u(!1), L("")), f(!0);
-        } else
-          _(l), R("overwrite-view");
-      } catch (h) {
-        o == null || o("discount_coupon", {
-          name: "problema na api",
-          cupomName: l
-        }), u(!1), m("error"), f(!0);
-      } finally {
-        w(!1);
-      }
-    else
-      o == null || o("discount_coupon", {
-        name: "Modal de cart vazio acionado"
-      }), y(!0);
-  }, M = async () => {
-    if (D)
-      try {
-        w(!0), j(!1);
-        const l = r ? await K(t) : await i({
-          input: {
-            orderFormId: t
+  const [i, d] = w(!1), a = h(null), r = h(null), s = !!(t && t.toLowerCase() === o.couponName.toLowerCase());
+  async function C() {
+    await f({
+      couponName: o.couponName,
+      isAdding: !s,
+      isFromForm: !1
+    });
+  }
+  function p() {
+    d(!i);
+  }
+  return m(() => {
+    var c;
+    if (i && r.current && a.current) {
+      const l = (c = a.current.clientWidth) != null ? c : 328;
+      r.current.style.width = `${l}px`;
+    }
+  }, [i]), m(() => {
+    const c = (l) => {
+      var u;
+      r.current && (l == null ? void 0 : l.target) instanceof Node && !((u = r.current) != null && u.contains(l == null ? void 0 : l.target)) && d(!1);
+    };
+    return i ? document.addEventListener("mousedown", c) : document.removeEventListener("mousedown", c), () => {
+      document.removeEventListener("mousedown", c);
+    };
+  }, [i]), /* @__PURE__ */ e("div", { className: "coupon-wrapper", ref: a, children: /* @__PURE__ */ n("div", { className: `container-card-coupon ${s ? "active" : ""}`, children: [
+    /* @__PURE__ */ n("div", { className: "card-coupon-content", children: [
+      /* @__PURE__ */ n("div", { className: "text-container", children: [
+        /* @__PURE__ */ n("div", { children: [
+          /* @__PURE__ */ n("div", { className: "container-title", children: [
+            /* @__PURE__ */ e(g, {}),
+            /* @__PURE__ */ e("h3", { className: "title", children: o.couponName }),
+            o.couponValue && /* @__PURE__ */ e("p", { className: "price-badge", children: o.couponValue })
+          ] }),
+          o.couponDescription && /* @__PURE__ */ e("h4", { className: "subtitle", children: o.couponDescription }),
+          o.couponExpirationDate && /* @__PURE__ */ n("h4", { className: "subtitle", children: [
+            "Válido até ",
+            o.couponExpirationDate
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: `select-coupon ${s ? "applied" : ""}`,
+            onClick: C,
+            disabled: N,
+            children: s && /* @__PURE__ */ e(x, {})
           }
-        }), h = r ? l : JSON.parse(l.removeCoupon.data);
-        h.error.length <= 0 ? (o == null || o("discount_coupon", {
-          name: "cupom removido com sucesso",
-          cupomName: s
-        }), m("removed"), u(!1), L(""), _(""), r && window.location.reload()) : (o == null || o("discount_coupon", {
-          name: "algum problema na remoção do cupom",
-          cupomName: s,
-          objectError: h.error
-        }), m("error"), u(!0)), f(!0);
-      } catch (l) {
-        o == null || o("discount_coupon", {
-          name: "problema na api - na remoção do cupom",
-          cupomName: s
-        }), m("error"), u(!0), f(!0);
-      } finally {
-        w(!1);
-      }
-    else
-      o == null || o("discount_coupon", {
-        name: "Modal de cart vazio acionado"
-      }), y(!0);
-  }, $ = () => {
-    z(!0), J(a), R("rules-view");
-  };
-  return /* @__PURE__ */ p("div", { className: `container-card-coupon ${x ? "active" : ""}`, children: [
-    /* @__PURE__ */ p("div", { className: "text-container", children: [
-      /* @__PURE__ */ p("div", { className: "container-title", children: [
-        /* @__PURE__ */ c(G, { width: 20, height: 16 }),
-        /* @__PURE__ */ c("h3", { className: "title", children: a.couponName })
+        )
       ] }),
-      a.couponValue && /* @__PURE__ */ p("p", { className: "price-badge", children: [
-        "- ",
-        a.couponValue
-      ] }),
-      a.couponDescription && /* @__PURE__ */ c("h4", { className: "subtitle", children: a.couponDescription }),
-      a.couponExpirationDate && /* @__PURE__ */ p("h4", { className: "subtitle", children: [
-        "Válido até ",
-        a.couponExpirationDate
-      ] })
+      /* @__PURE__ */ e("div", { className: `ellipse left ${s ? "applied" : ""}` }),
+      /* @__PURE__ */ e("div", { className: `ellipse right ${s ? "applied" : ""}` })
     ] }),
-    /* @__PURE__ */ c("div", { className: "vertical-line" }),
-    /* @__PURE__ */ p("div", { className: "buttons-container", children: [
-      x && /* @__PURE__ */ p("button", { className: "applied-coupon", children: [
-        /* @__PURE__ */ c("span", { className: "applied-coupon-span", children: /* @__PURE__ */ c(H, {}) }),
-        "Aplicado"
+    o.couponRules && o.couponRules.length > 0 && /* @__PURE__ */ e("button", { className: "see-rules", onClick: p, children: "*Termos & condições" }),
+    i && /* @__PURE__ */ n("div", { className: "tooltip-rules", ref: r, children: [
+      /* @__PURE__ */ n("div", { className: "tooltip-rules-header", children: [
+        /* @__PURE__ */ e("h4", { children: "Termos e Condições" }),
+        /* @__PURE__ */ e("button", { onClick: p, children: /* @__PURE__ */ e(b, {}) })
       ] }),
-      x ? /* @__PURE__ */ c(
-        "button",
-        {
-          onClick: M,
-          className: "remove-coupon",
-          disabled: k,
-          children: "Remover"
-        }
-      ) : /* @__PURE__ */ c(
-        "button",
-        {
-          onClick: () => A(a.couponName),
-          className: "apply-coupon",
-          disabled: k,
-          children: "Aplicar"
-        }
-      ),
-      a.couponDescription && /* @__PURE__ */ c("a", { onClick: $, children: "Ver Regras" })
+      /* @__PURE__ */ e("p", { children: o.couponDescription }),
+      /* @__PURE__ */ n("ul", { children: [
+        o.couponRules.map((c) => /* @__PURE__ */ n("li", { children: [
+          "• ",
+          c
+        ] }, c)),
+        /* @__PURE__ */ n("li", { children: [
+          "• Válido até ",
+          o.couponExpirationDate,
+          "."
+        ] })
+      ] })
     ] })
-  ] });
+  ] }) });
 };
 export {
-  Z as CouponCard
+  T as CouponCard
 };

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

@@ -1,10 +1,10 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { NoCouponsIcon as s } from "../../../assets/svgs/NoCouponIcon.js";
-const i = () => /* @__PURE__ */ n("div", { className: "noCoupons", children: [
-  /* @__PURE__ */ o("h1", { className: "noCoupons-h3", children: "Não há cupons disponíveis no momento" }),
-  /* @__PURE__ */ o(s, {}),
-  /* @__PURE__ */ o("p", { className: "noCoupons-p", children: "Caso você tenha algum código de cupom em mãos, insira o código acima, ou entre no seu carrinho de compras e insira o código no campo ‘Cupom de Desconto’." })
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { NoCouponsIcon as n } from "../../../assets/svgs/NoCouponIcon.js";
+const a = () => /* @__PURE__ */ s("div", { className: "noCoupons", children: [
+  /* @__PURE__ */ o("h3", { className: "noCoupons-h3", children: "Não há cupons disponíveis no momento" }),
+  /* @__PURE__ */ o(n, {}),
+  /* @__PURE__ */ o("p", { className: "noCoupons-p", children: "Caso você tenha algum código de cupom em mãos, insira o código acima, ou entre no seu carrinho de compras e insira o código no campo ‘Meus Cupons e Vale-compras’." })
 ] });
 export {
-  i as NoCoupons
+  a as NoCoupons
 };

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

@@ -0,0 +1,33 @@
+import { AlertType } from '../components/Alert';
+import { CouponType } from '../types/CouponType';
+
+export interface UseCouponsParams {
+    orderFormId: string;
+    hasItemsInCart: boolean;
+    builder: 'faststore' | 'app';
+    isIO?: boolean;
+    activeOrderFormCoupon?: string;
+    genericTaggingEvent?: (name: string, params: object) => void;
+    couponsList?: CouponType[];
+    qtdCouponsView?: number;
+    getCouponsMutation?: any;
+    addCouponMutation?: any;
+    removeCouponMutation?: any;
+}
+export interface ChangeCouponParams {
+    couponName: string;
+    isAdding: boolean;
+    isFromForm: boolean;
+}
+export declare function useCoupons({ orderFormId, hasItemsInCart, builder, isIO, activeOrderFormCoupon, genericTaggingEvent, couponsList, qtdCouponsView, getCouponsMutation, addCouponMutation, removeCouponMutation }: UseCouponsParams): {
+    isLoadingCouponList: boolean;
+    coupons: CouponType[];
+    currentCoupon: string;
+    isLoadingButton: boolean;
+    inputCoupon: string;
+    isInputError: boolean;
+    showAlert: AlertType;
+    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    handleChangeInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    changeCoupon: ({ couponName, isAdding, isFromForm }: ChangeCouponParams) => Promise<void>;
+};