@agrada_digital/pbm 0.0.81 → 0.0.84

package/dist/index.d.mts

@@ -4,8 +4,10 @@ interface PBMProps {
     originalProductPrice: number | string;
     clientID: string;
     eanProduct: string;
+    isAuthenticatedShopper: boolean;
+    customLoginUrl?: string;
 }
-declare function PBM({ originalProductPrice, clientID, eanProduct, }: PBMProps): react_jsx_runtime.JSX.Element;
+declare function PBM({ originalProductPrice, clientID, eanProduct, isAuthenticatedShopper, customLoginUrl, }: PBMProps): react_jsx_runtime.JSX.Element;
 
 interface discountTypes {
     unit: number;
@@ -22,8 +24,10 @@ interface usePBMTypes {
     };
     campaign: "pbm_campaign";
     targetProduct: IProduct | null;
+    isAuthenticatedShopper: boolean;
     urlAcceptTerms?: string;
     urlRegisterIndustry?: string;
+    customLoginUrl?: string;
 }
 interface IProduct {
     ean: string;
@@ -51,6 +55,8 @@ interface PBMStore extends usePBMTypes {
     setTargetProduct: (targetProduct: usePBMTypes["targetProduct"]) => void;
     setUrlAcceptTerms: (urlAcceptTerms: usePBMTypes["urlAcceptTerms"]) => void;
     setUrlRegisterIndustry: (urlRegisterIndustry: usePBMTypes["urlRegisterIndustry"]) => void;
+    setIsAuthenticatedShopper: (isAuthenticatedShopper: usePBMTypes["isAuthenticatedShopper"]) => void;
+    setCustomLoginUrl: (customLoginUrl: usePBMTypes["customLoginUrl"]) => void;
 }
 declare function usePBMStore(): PBMStore;
 declare function usePBMStore<T>(selector: (state: PBMStore) => T): T;

package/dist/index.d.ts

@@ -4,8 +4,10 @@ interface PBMProps {
     originalProductPrice: number | string;
     clientID: string;
     eanProduct: string;
+    isAuthenticatedShopper: boolean;
+    customLoginUrl?: string;
 }
-declare function PBM({ originalProductPrice, clientID, eanProduct, }: PBMProps): react_jsx_runtime.JSX.Element;
+declare function PBM({ originalProductPrice, clientID, eanProduct, isAuthenticatedShopper, customLoginUrl, }: PBMProps): react_jsx_runtime.JSX.Element;
 
 interface discountTypes {
     unit: number;
@@ -22,8 +24,10 @@ interface usePBMTypes {
     };
     campaign: "pbm_campaign";
     targetProduct: IProduct | null;
+    isAuthenticatedShopper: boolean;
     urlAcceptTerms?: string;
     urlRegisterIndustry?: string;
+    customLoginUrl?: string;
 }
 interface IProduct {
     ean: string;
@@ -51,6 +55,8 @@ interface PBMStore extends usePBMTypes {
     setTargetProduct: (targetProduct: usePBMTypes["targetProduct"]) => void;
     setUrlAcceptTerms: (urlAcceptTerms: usePBMTypes["urlAcceptTerms"]) => void;
     setUrlRegisterIndustry: (urlRegisterIndustry: usePBMTypes["urlRegisterIndustry"]) => void;
+    setIsAuthenticatedShopper: (isAuthenticatedShopper: usePBMTypes["isAuthenticatedShopper"]) => void;
+    setCustomLoginUrl: (customLoginUrl: usePBMTypes["customLoginUrl"]) => void;
 }
 declare function usePBMStore(): PBMStore;
 declare function usePBMStore<T>(selector: (state: PBMStore) => T): T;

package/dist/index.js

@@ -51,7 +51,9 @@ var initialPBMState = {
     grossPrice: 0
   },
   targetProduct: null,
-  campaign: "pbm_campaign"
+  campaign: "pbm_campaign",
+  isAuthenticatedShopper: false,
+  customLoginUrl: "/login"
 };
 var createPBMStore = (set) => ({
   ...initialPBMState,
@@ -60,7 +62,9 @@ var createPBMStore = (set) => ({
   setTargetProduct: (targetProduct) => set({ targetProduct }),
   setAvailableDiscountSelected: (availableDiscount) => set({ availableDiscountSelected: availableDiscount }),
   setUrlAcceptTerms: (urlAcceptTerms) => set({ urlAcceptTerms }),
-  setUrlRegisterIndustry: (urlRegisterIndustry) => set({ urlRegisterIndustry })
+  setUrlRegisterIndustry: (urlRegisterIndustry) => set({ urlRegisterIndustry }),
+  setIsAuthenticatedShopper: (isAuthenticatedShopper) => set({ isAuthenticatedShopper }),
+  setCustomLoginUrl: (customLoginUrl) => set({ customLoginUrl })
 });
 var pbmStore = (0, import_zustand.createStore)(createPBMStore);
 function usePBMStore(selector) {
@@ -93,7 +97,7 @@ function Header({ originalProductPrice }) {
                 targetProduct?.discountMax,
                 "% OFF"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "32px", height: "32px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "36px", height: "36px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { id: "SVGRepo_iconCarrier", children: [
@@ -103,12 +107,20 @@ function Header({ originalProductPrice }) {
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.3117 4.07145L15.1708 4.34503L14.5575 3.34485C13.3869 1.43575 10.6131 1.43575 9.44254 3.34485L8.82926 4.34503L7.68836 4.07145C5.51069 3.54925 3.54931 5.51063 4.07151 7.6883L4.34509 8.8292L3.34491 9.44248C1.43581 10.6131 1.43581 13.3869 3.34491 14.5575L4.34509 15.1708L4.07151 16.3117C3.54931 18.4893 5.51069 20.4507 7.68836 19.9285L8.82926 19.6549L9.44254 20.6551C10.6131 22.5642 13.3869 22.5642 14.5575 20.6551L15.1708 19.6549L16.3117 19.9285C18.4894 20.4507 20.4508 18.4893 19.9286 16.3117L19.655 15.1708L20.6552 14.5575C22.5643 13.3869 22.5643 10.6131 20.6552 9.44248L19.655 8.8292L19.9286 7.6883C20.4508 5.51063 18.4894 3.54925 16.3117 4.07145ZM11.1475 4.3903C11.5377 3.75393 12.4623 3.75393 12.8525 4.3903L13.8454 6.00951C14.0717 6.37867 14.51 6.56019 14.9311 6.45922L16.7781 6.01631C17.504 5.84225 18.1578 6.49604 17.9837 7.22193L17.5408 9.06894C17.4398 9.49003 17.6213 9.92827 17.9905 10.1546L19.6097 11.1475C20.2461 11.5377 20.2461 12.4623 19.6097 12.8525L17.9905 13.8453C17.6213 14.0717 17.4398 14.5099 17.5408 14.931L17.9837 16.778C18.1578 17.5039 17.504 18.1577 16.7781 17.9836L14.9311 17.5407C14.51 17.4398 14.0717 17.6213 13.8454 17.9904L12.8525 19.6097C12.4623 20.246 11.5377 20.246 11.1475 19.6097L10.1547 17.9904C9.92833 17.6213 9.49009 17.4398 9.069 17.5407L7.22199 17.9836C6.4961 18.1577 5.84231 17.5039 6.01637 16.778L6.45928 14.931C6.56026 14.5099 6.37873 14.0717 6.00957 13.8453L4.39036 12.8525C3.75399 12.4623 3.75399 11.5377 4.39036 11.1475L6.00957 10.1546C6.37873 9.92827 6.56026 9.49003 6.45928 9.06894L6.01637 7.22193C5.84231 6.49604 6.4961 5.84225 7.22199 6.01631L9.069 6.45922C9.49009 6.56019 9.92833 6.37867 10.1547 6.00951L11.1475 4.3903Z", fill: "#fff" })
                 ] })
               ] }),
-              Number(Price - Discount)?.toLocaleString("pt-BR", {
-                currency: "BRL",
-                currencyDisplay: "symbol",
-                currencySign: "standard",
-                style: "currency"
-              })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "flex flex-col items-start justify-center-safe gap-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "line-through text-sm font-light", children: Number(Price)?.toLocaleString("pt-BR", {
+                  currency: "BRL",
+                  currencyDisplay: "symbol",
+                  currencySign: "standard",
+                  style: "currency"
+                }) }),
+                Number(Price - Discount)?.toLocaleString("pt-BR", {
+                  currency: "BRL",
+                  currencyDisplay: "symbol",
+                  currencySign: "standard",
+                  style: "currency"
+                })
+              ] })
             ]
           }
         ),
@@ -486,7 +498,7 @@ var import_react3 = require("react");
 var import_classnames6 = __toESM(require("classnames"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function Item({ data, onChange, checked }) {
-  const { setAvailableDiscountSelected, securityNumber, state } = usePBMStore();
+  const { setAvailableDiscountSelected, state, isAuthenticatedShopper } = usePBMStore();
   const ID_INPUT = "unity_quantity_" + data.authorizedQuantity;
   const decimalDiscount = data.discountPercentual / 100;
   const unitDiscountValue = data.grossPrice * decimalDiscount;
@@ -522,9 +534,10 @@ function Item({ data, onChange, checked }) {
       htmlFor: ID_INPUT,
       className: (0, import_classnames6.default)(
         "label_benefits w-full flex items-center justify-start bg-zinc-300/60 border border-zinc-400/50 px-4 py-2 hover:bg-zinc-300 transition-colors rounded-lg gap-1",
-        { "cursor-not-allowed": state === "isPreview", "cursor-pointer": state === "isActivated" }
+        { "cursor-not-allowed": state === "isPreview" || !isAuthenticatedShopper, "cursor-pointer": state === "isActivated" && isAuthenticatedShopper }
       ),
       id: "label_benefits_" + ID_INPUT,
+      title: !isAuthenticatedShopper ? "Necess\xE1rio fazer login!" : "",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "input",
@@ -535,7 +548,7 @@ function Item({ data, onChange, checked }) {
             className: "hidden",
             checked,
             onChange,
-            disabled: state === "isPreview"
+            disabled: state === "isPreview" || !isAuthenticatedShopper
           }
         ),
         !checked ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Badge, { color: "#9f9fa9", size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.BadgeCheck, { color: "#32b316", size: 20 }),
@@ -543,8 +556,8 @@ function Item({ data, onChange, checked }) {
           data.authorizedQuantity,
           "un"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: "ml-auto relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "absolute text-white -top-4 py-0.5 font-semibold text-xs bg-[#32b316] px-2 w-auto text-nowrap rounded-2xl -right-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: "ml-auto relative gap-2 flex items-center-safe justify-end-safe", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-white -top-4 py-0.5 font-semibold text-xs bg-[#32b316] px-2 w-auto text-nowrap rounded-2xl -right-3", children: [
             discountValue.toLocaleString("pt-BR", {
               currency: "BRL",
               currencyDisplay: "symbol",
@@ -597,7 +610,7 @@ var CheckBenefistWithoutDocument = async ({ products }) => {
 // src/components/BenefitsTable/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function BenefitsTable() {
-  const { securityNumber, setState, state, targetProduct } = usePBMStore();
+  const { securityNumber, setState, state, targetProduct, customLoginUrl, isAuthenticatedShopper } = usePBMStore();
   const [selectedDiscout, setSelectedDiscount] = (0, import_react4.useState)(null);
   const [loading, setLoading] = (0, import_react4.useState)(true);
   const [benefitsItems, setBenefitsItems] = (0, import_react4.useState)();
@@ -741,21 +754,32 @@ function BenefitsTable() {
             className: "bg-transparent p-0 w-auto h-auto text-zinc-600 cursor-pointer hover:text-zinc-900 hover:bg-transparent text-start",
             id: "unauthorized_benefits_button",
             children: [
-              "Aten\xE7\xE3o: n\xE3o \xE9 poss\xEDvel utilizar os benef\xEDcos sem realizar a consulta do cpf, por favor",
+              "Aten\xE7\xE3o: N\xE3o \xE9 poss\xEDvel utilizar os benef\xEDcos sem realizar a consulta do CPF e o Login, por favor",
               " ",
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "underline", children: "insira seu cpf para utilizar os benef\xEDcios" })
             ]
           }
         ),
-        state === "isActivated" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          Button_default,
-          {
-            onClick: () => setState("isEmpty"),
-            className: "bg-transparent p-0 pl-2 w-auto h-auto text-zinc-600 cursor-pointer hover:text-zinc-900 hover:bg-transparent text-start",
-            id: "change_security_number",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "underline", children: "Deseja editar o cpf digitado?" })
-          }
-        )
+        state === "isActivated" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          !isAuthenticatedShopper && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Button_default,
+            {
+              onClick: () => window.location.href = customLoginUrl || "/login",
+              className: "bg-transparent p-0 pl-2 w-auto h-auto text-zinc-600 cursor-pointer hover:text-zinc-900 hover:bg-transparent text-start",
+              id: "login",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "underline", children: "Por favor, fa\xE7a o Login para aproveitar os benef\xEDcios!" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Button_default,
+            {
+              onClick: () => setState("isEmpty"),
+              className: "bg-transparent p-0 pl-2 w-auto h-auto text-zinc-600 cursor-pointer hover:text-zinc-900 hover:bg-transparent text-start",
+              id: "change_security_number",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "underline", children: "Deseja editar o cpf digitado?" })
+            }
+          )
+        ] })
       ]
     }
   );
@@ -936,13 +960,16 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 function PBM({
   originalProductPrice,
   clientID,
-  eanProduct
+  eanProduct,
+  isAuthenticatedShopper,
+  customLoginUrl
 }) {
   const formatedOriginalProductPrice = Number(
     String(originalProductPrice).replace(",", ".")
   );
+  const [isReady, setIsReady] = (0, import_react5.useState)(false);
   const [loading, setLoading] = (0, import_react5.useState)(false);
-  const { setState, state, setTargetProduct, targetProduct } = usePBMStore();
+  const { setState, state, setTargetProduct, targetProduct, setIsAuthenticatedShopper, setCustomLoginUrl } = usePBMStore();
   const [EanProductExist, setEanProductExist] = (0, import_react5.useState)(true);
   const fetchProductByEan = async () => {
     try {
@@ -964,9 +991,13 @@ function PBM({
           industryLogo: pbm.imageLink ?? void 0,
           ean: eanProduct
         });
+        setIsAuthenticatedShopper(isAuthenticatedShopper);
+        setCustomLoginUrl(customLoginUrl);
       }
     } catch (error) {
       console.error(error);
+    } finally {
+      setIsReady(true);
     }
   };
   const handleAuthorizationRequest = (0, import_react5.useCallback)(async () => {
@@ -984,6 +1015,9 @@ function PBM({
   (0, import_react5.useEffect)(() => {
     handleAuthorizationRequest();
   }, [handleAuthorizationRequest]);
+  if (!isReady) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "rounded-xl w-[250px] h-[250px] bg-zinc-500/20 \n      shadow-[0_0_15px_rgba(0,0,0,0.1)] \n      transition-all duration-500 ease-in-out" });
+  }
   if (!EanProductExist) {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id: "pbm-library-root", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Container_default, { variant: "main", children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Title_default, { children: "Erro ao Aplicar o Benef\xEDcio" }),