@agrada_digital/pbm 0.0.99 → 0.0.100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +8 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +244 -183
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +220 -159
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/vanilla/index.js +76 -76
package/dist/index.js
CHANGED
|
@@ -83,17 +83,19 @@ function Header({ originalProductPrice }) {
|
|
|
83
83
|
const Price = targetProduct?.listPrice || originalProductPrice;
|
|
84
84
|
const Discount = Price * ((targetProduct?.discountMax || 0) / 100);
|
|
85
85
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
86
|
-
targetProduct?.informativeMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute w-11/12 -top-6 bg-emerald-500 px-4 py-1 rounded-lg text-sm text-center font-medium text-white", children: targetProduct?.informativeMessage }),
|
|
86
|
+
targetProduct?.informativeMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute w-11/12 -top-6 bg-emerald-500 px-4 py-1 rounded-lg text-sm text-center font-medium text-white", style: { backgroundColor: "var(--pbm-primary)" }, children: targetProduct?.informativeMessage }),
|
|
87
87
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
88
88
|
"header",
|
|
89
89
|
{
|
|
90
|
-
className: "flex items-center justify-between w-full p-0.5 rounded-xl
|
|
90
|
+
className: "flex items-center justify-between w-full p-0.5 rounded-xl mt-5",
|
|
91
|
+
style: { backgroundColor: "color-mix(in srgb, var(--pbm-primary), transparent 70%)" },
|
|
91
92
|
id: "header_pbm",
|
|
92
93
|
children: [
|
|
93
94
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
95
|
"span",
|
|
95
96
|
{
|
|
96
|
-
className: "py-1 px-6 rounded-xl
|
|
97
|
+
className: "py-1 px-6 rounded-xl shrink-0 text-white text-xl font-bold flex items-center justify-start gap-2 relative",
|
|
98
|
+
style: { backgroundColor: "var(--pbm-primary)" },
|
|
97
99
|
"data-testid": "test_id_header_price",
|
|
98
100
|
id: "header_price",
|
|
99
101
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "flex items-center gap-2 justify-center-safe", children: [
|
|
@@ -112,7 +114,7 @@ function Header({ originalProductPrice }) {
|
|
|
112
114
|
] })
|
|
113
115
|
}
|
|
114
116
|
),
|
|
115
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { id: "header_title", className: "text-center w-full
|
|
117
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { id: "header_title", className: "text-center w-full font-bold text-xs px-4 md:text-sm", style: { color: "var(--pbm-secondary)" }, children: "Desconto de Laborat\xF3rio" })
|
|
116
118
|
]
|
|
117
119
|
}
|
|
118
120
|
)
|
|
@@ -131,7 +133,7 @@ function Container({
|
|
|
131
133
|
"main",
|
|
132
134
|
{
|
|
133
135
|
className: (0, import_classnames.default)({
|
|
134
|
-
"border-3 border-
|
|
136
|
+
"border-3 border-(--pbm-border) flex flex-col items-center justify-center min-w-(--min-container) max-w-(--max-container) w-full h-auto rounded-xl p-4 bg-white gap-4 relative": variant === "main",
|
|
135
137
|
"w-full h-auto relative": variant === "simple"
|
|
136
138
|
}),
|
|
137
139
|
"data-testid": "test_id_container",
|
|
@@ -144,16 +146,59 @@ function Container({
|
|
|
144
146
|
var Container_default = Container;
|
|
145
147
|
|
|
146
148
|
// src/components/Footer/index.tsx
|
|
149
|
+
var import_classnames4 = __toESM(require("classnames"));
|
|
150
|
+
|
|
151
|
+
// src/components/UI/Title/index.tsx
|
|
147
152
|
var import_classnames2 = __toESM(require("classnames"));
|
|
148
153
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
154
|
+
function Title(props) {
|
|
155
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
156
|
+
"h2",
|
|
157
|
+
{
|
|
158
|
+
className: (0, import_classnames2.default)(
|
|
159
|
+
"text-start font-semibold text-sm",
|
|
160
|
+
props.className
|
|
161
|
+
),
|
|
162
|
+
style: { color: props.textColor || "var(--pbm-text)", fontSize: props.textSize, textAlign: props.textAlign },
|
|
163
|
+
"data-testid": "test_id_title",
|
|
164
|
+
id: "title_pbm",
|
|
165
|
+
children: props.children
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
var Title_default = Title;
|
|
170
|
+
|
|
171
|
+
// src/components/UI/Text/index.tsx
|
|
172
|
+
var import_classnames3 = __toESM(require("classnames"));
|
|
173
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
174
|
+
function Text(props) {
|
|
175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
176
|
+
"p",
|
|
177
|
+
{
|
|
178
|
+
className: (0, import_classnames3.default)(
|
|
179
|
+
"font-normal text-sm",
|
|
180
|
+
props.textAlign && `text-${props.textAlign}`,
|
|
181
|
+
props.className
|
|
182
|
+
),
|
|
183
|
+
style: { color: props.textColor || "var(--pbm-text)", fontSize: props.textSize, textAlign: props.textAlign },
|
|
184
|
+
"data-testid": "test_id_text",
|
|
185
|
+
id: "text_pbm",
|
|
186
|
+
children: props.children
|
|
187
|
+
}
|
|
188
|
+
);
|
|
189
|
+
}
|
|
190
|
+
var Text_default = Text;
|
|
191
|
+
|
|
192
|
+
// src/components/Footer/index.tsx
|
|
193
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
149
194
|
function Footer() {
|
|
150
195
|
const { targetProduct } = usePBMStore();
|
|
151
|
-
return /* @__PURE__ */ (0,
|
|
152
|
-
/* @__PURE__ */ (0,
|
|
153
|
-
/* @__PURE__ */ (0,
|
|
154
|
-
/* @__PURE__ */ (0,
|
|
196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("footer", { className: "w-full h-auto relative", id: "footer_pbm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: (0, import_classnames4.default)("flex items-center w-full h-auto gap-4", { "justify-center": targetProduct?.industryLogo, "justify-start": !targetProduct?.industryLogo }), children: [
|
|
197
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "w-4/5 h-auto", children: [
|
|
198
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Title_default, { children: "Economize com o benef\xEDcio do laborat\xF3rio." }),
|
|
199
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text_default, { children: "Este produto tem pre\xE7o exclusivo para clientes cadastrados no programa." })
|
|
155
200
|
] }),
|
|
156
|
-
targetProduct?.industryLogo && /* @__PURE__ */ (0,
|
|
201
|
+
targetProduct?.industryLogo && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
157
202
|
"img",
|
|
158
203
|
{
|
|
159
204
|
src: targetProduct.industryLogo,
|
|
@@ -229,17 +274,18 @@ var BenefitsWithDocument = async ({ document, products }) => {
|
|
|
229
274
|
};
|
|
230
275
|
|
|
231
276
|
// src/components/UI/Button/index.tsx
|
|
232
|
-
var
|
|
233
|
-
var
|
|
277
|
+
var import_classnames5 = __toESM(require("classnames"));
|
|
278
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
234
279
|
function Button(props) {
|
|
235
|
-
return /* @__PURE__ */ (0,
|
|
280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
236
281
|
"button",
|
|
237
282
|
{
|
|
238
283
|
...props,
|
|
239
|
-
className: (0,
|
|
240
|
-
"w-3xs cursor-pointer h-10 rounded-lg
|
|
284
|
+
className: (0, import_classnames5.default)(
|
|
285
|
+
"w-3xs cursor-pointer h-10 rounded-lg text-white text-sm font-semibold transition-colors",
|
|
241
286
|
props.className
|
|
242
287
|
),
|
|
288
|
+
style: { ...props.style },
|
|
243
289
|
children: props.children
|
|
244
290
|
}
|
|
245
291
|
);
|
|
@@ -250,7 +296,7 @@ var Button_default = Button;
|
|
|
250
296
|
var import_zod2 = require("@hookform/resolvers/zod");
|
|
251
297
|
var import_react_hook_form = require("react-hook-form");
|
|
252
298
|
var import_lucide_react = require("lucide-react");
|
|
253
|
-
var
|
|
299
|
+
var import_classnames6 = __toESM(require("classnames"));
|
|
254
300
|
var import_react2 = require("react");
|
|
255
301
|
|
|
256
302
|
// src/libs/zustand/useError.tsx
|
|
@@ -266,7 +312,7 @@ var createErrorStore = (set) => ({
|
|
|
266
312
|
var useError = (0, import_zustand2.create)(createErrorStore);
|
|
267
313
|
|
|
268
314
|
// src/components/Form/index.tsx
|
|
269
|
-
var
|
|
315
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
270
316
|
function Form({ startTransition }) {
|
|
271
317
|
const store = usePBMStore();
|
|
272
318
|
const [showCardIDField, setShowCardIDField] = (0, import_react2.useState)(false);
|
|
@@ -344,32 +390,35 @@ function Form({ startTransition }) {
|
|
|
344
390
|
await checkSecurityNumberBenefits(values);
|
|
345
391
|
});
|
|
346
392
|
};
|
|
347
|
-
return /* @__PURE__ */ (0,
|
|
348
|
-
/* @__PURE__ */ (0,
|
|
393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
394
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
349
395
|
"form",
|
|
350
396
|
{
|
|
351
397
|
onSubmit: handleSubmit(onSubmitDefault),
|
|
352
|
-
className: (0,
|
|
398
|
+
className: (0, import_classnames6.default)(
|
|
353
399
|
"w-full h-auto flex items-center justify-center mb-0 transition-all duration-150",
|
|
354
400
|
{ "mb-4": errors.securityNumber || errors.coupon && showCardIDField, "gap-2": showCardIDField }
|
|
355
401
|
),
|
|
356
402
|
id: "form_security_number_pbm",
|
|
357
403
|
children: [
|
|
358
|
-
/* @__PURE__ */ (0,
|
|
404
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
359
405
|
"label",
|
|
360
406
|
{
|
|
361
407
|
htmlFor: "cpf",
|
|
362
408
|
className: "w-4/5 h-auto flex items-start flex-col justify-center relative py-2",
|
|
363
409
|
id: "label_security_number_pbm",
|
|
364
410
|
children: [
|
|
365
|
-
/* @__PURE__ */ (0,
|
|
411
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
366
412
|
"input",
|
|
367
413
|
{
|
|
368
414
|
type: "text",
|
|
369
|
-
className: (0,
|
|
370
|
-
"w-full h-10 bg-gray-100 rounded-s-lg text-sm font-semibold focus:outline focus:
|
|
415
|
+
className: (0, import_classnames6.default)(
|
|
416
|
+
"w-full h-10 bg-gray-100 rounded-s-lg text-sm font-semibold focus:outline focus:bg-white text-zinc-600 placeholder:text-zinc-600 px-4 placeholder:text-sm placeholder:font-semibold",
|
|
371
417
|
{ "outline outline-red-600": errors.securityNumber, "rounded-lg": showCardIDField }
|
|
372
418
|
),
|
|
419
|
+
style: {
|
|
420
|
+
"--tw-outline-color": !errors.securityNumber ? "var(--pbm-secondary)" : void 0
|
|
421
|
+
},
|
|
373
422
|
placeholder: "Digite seu CPF aqui...",
|
|
374
423
|
required: true,
|
|
375
424
|
maxLength: 14,
|
|
@@ -385,25 +434,28 @@ function Form({ startTransition }) {
|
|
|
385
434
|
id: "input_security_number_pbm"
|
|
386
435
|
}
|
|
387
436
|
),
|
|
388
|
-
errors.securityNumber && /* @__PURE__ */ (0,
|
|
437
|
+
errors.securityNumber && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-red-400 text-xs font-semibold absolute -bottom-3 left-2 text-nowrap", id: "security_number_form_error", children: errors.securityNumber.message })
|
|
389
438
|
]
|
|
390
439
|
}
|
|
391
440
|
),
|
|
392
|
-
/* @__PURE__ */ (0,
|
|
441
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.Activity, { mode: showCardIDField ? "visible" : "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
393
442
|
"label",
|
|
394
443
|
{
|
|
395
444
|
htmlFor: "coupon",
|
|
396
445
|
className: "w-4/5 h-auto flex items-start flex-col justify-center relative py-2",
|
|
397
446
|
id: "label_coupon_pbm",
|
|
398
447
|
children: [
|
|
399
|
-
/* @__PURE__ */ (0,
|
|
448
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
400
449
|
"input",
|
|
401
450
|
{
|
|
402
451
|
type: "text",
|
|
403
|
-
className: (0,
|
|
404
|
-
"w-full h-10 bg-gray-100 rounded-s-lg text-sm font-semibold focus:outline focus:
|
|
452
|
+
className: (0, import_classnames6.default)(
|
|
453
|
+
"w-full h-10 bg-gray-100 rounded-s-lg text-sm font-semibold focus:outline focus:bg-white text-zinc-600 placeholder:text-zinc-600 px-4 placeholder:text-sm placeholder:font-semibold",
|
|
405
454
|
{ "outline outline-red-600": errors.coupon, "rounded-lg": showCardIDField }
|
|
406
455
|
),
|
|
456
|
+
style: {
|
|
457
|
+
"--tw-outline-color": !errors.coupon ? "var(--pbm-secondary)" : void 0
|
|
458
|
+
},
|
|
407
459
|
placeholder: "Cupom / ID do Cart\xE3o",
|
|
408
460
|
...register("coupon", {
|
|
409
461
|
required: showCardIDField ? "Cupom / ID do Cart\xE3o obrigat\xF3rio." : false,
|
|
@@ -417,30 +469,34 @@ function Form({ startTransition }) {
|
|
|
417
469
|
id: "input_coupon_pbm"
|
|
418
470
|
}
|
|
419
471
|
),
|
|
420
|
-
errors.coupon && /* @__PURE__ */ (0,
|
|
472
|
+
errors.coupon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-red-400 text-xs font-semibold absolute -bottom-3 left-2 text-nowrap", id: "coupon_form_error", children: errors.coupon.message })
|
|
421
473
|
]
|
|
422
474
|
}
|
|
423
475
|
) }),
|
|
424
|
-
/* @__PURE__ */ (0,
|
|
476
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
425
477
|
"button",
|
|
426
478
|
{
|
|
427
479
|
type: "submit",
|
|
428
|
-
className: (0,
|
|
429
|
-
"
|
|
480
|
+
className: (0, import_classnames6.default)(
|
|
481
|
+
"w-1/5 h-10 rounded-e-lg flex items-center justify-center cursor-pointer",
|
|
430
482
|
{ "rounded-lg": showCardIDField }
|
|
431
483
|
),
|
|
484
|
+
style: { backgroundColor: "var(--pbm-primary)" },
|
|
432
485
|
id: "button_submit_security_number_pbm",
|
|
433
|
-
children: /* @__PURE__ */ (0,
|
|
486
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ArrowRight, { size: 24, color: "white", strokeWidth: 2 })
|
|
434
487
|
}
|
|
435
488
|
)
|
|
436
489
|
]
|
|
437
490
|
}
|
|
438
491
|
),
|
|
439
|
-
/* @__PURE__ */ (0,
|
|
440
|
-
/* @__PURE__ */ (0,
|
|
492
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "flex items-center-safe justify-between", children: [
|
|
493
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
441
494
|
Button_default,
|
|
442
495
|
{
|
|
443
|
-
className: "bg-transparent p-0 pl-2 w-auto h-auto
|
|
496
|
+
className: "bg-transparent p-0 pl-2 w-auto h-auto underline cursor-pointer hover:bg-transparent flex items-center justify-start gap-1",
|
|
497
|
+
style: { color: "var(--pbm-text)" },
|
|
498
|
+
onMouseOver: (e) => e.currentTarget.style.filter = "brightness(0.8)",
|
|
499
|
+
onMouseOut: (e) => e.currentTarget.style.filter = "none",
|
|
444
500
|
onClick: () => {
|
|
445
501
|
const newValue = !showCardIDField;
|
|
446
502
|
setShowCardIDField(newValue);
|
|
@@ -451,20 +507,23 @@ function Form({ startTransition }) {
|
|
|
451
507
|
},
|
|
452
508
|
id: "check_benefits_button",
|
|
453
509
|
children: [
|
|
454
|
-
/* @__PURE__ */ (0,
|
|
455
|
-
/* @__PURE__ */ (0,
|
|
510
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: !showCardIDField ? "Possui Cupom / ID do Cart\xE3o?" : "N\xE3o possui Cupom / ID do Cart\xE3o??" }),
|
|
511
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ArrowRight, { size: 16, className: (0, import_classnames6.default)({ "rotate-0": !showCardIDField, "rotate-180": showCardIDField }) })
|
|
456
512
|
]
|
|
457
513
|
}
|
|
458
514
|
),
|
|
459
|
-
/* @__PURE__ */ (0,
|
|
515
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
460
516
|
Button_default,
|
|
461
517
|
{
|
|
462
|
-
className: "bg-transparent p-0 pl-2 w-auto h-auto
|
|
518
|
+
className: "bg-transparent p-0 pl-2 w-auto h-auto underline cursor-pointer hover:bg-transparent flex items-center justify-start gap-1",
|
|
519
|
+
style: { color: "var(--pbm-text)" },
|
|
520
|
+
onMouseOver: (e) => e.currentTarget.style.filter = "brightness(0.8)",
|
|
521
|
+
onMouseOut: (e) => e.currentTarget.style.filter = "none",
|
|
463
522
|
onClick: () => store.setState("isPreview"),
|
|
464
523
|
id: "check_benefits_button",
|
|
465
524
|
children: [
|
|
466
|
-
/* @__PURE__ */ (0,
|
|
467
|
-
/* @__PURE__ */ (0,
|
|
525
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Consultar Benef\xEDcios" }),
|
|
526
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ArrowRight, { size: 16 })
|
|
468
527
|
]
|
|
469
528
|
}
|
|
470
529
|
)
|
|
@@ -474,22 +533,23 @@ function Form({ startTransition }) {
|
|
|
474
533
|
var Form_default = Form;
|
|
475
534
|
|
|
476
535
|
// src/components/UI/Loading/index.tsx
|
|
477
|
-
var
|
|
536
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
478
537
|
function Loading({ textColor }) {
|
|
479
|
-
return /* @__PURE__ */ (0,
|
|
480
|
-
/* @__PURE__ */ (0,
|
|
538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("main", { className: "flex items-center justify-center gap-4", id: "loading_pbm", children: [
|
|
539
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
481
540
|
"div",
|
|
482
541
|
{
|
|
483
542
|
"data-testid": "test_id_spin",
|
|
484
|
-
className: "w-8 h-8 border-4 border-
|
|
543
|
+
className: "w-8 h-8 border-4 border-gray-300 rounded-full animate-spin",
|
|
544
|
+
style: { borderTopColor: "var(--pbm-secondary)" },
|
|
485
545
|
id: "loading_spin"
|
|
486
546
|
}
|
|
487
547
|
),
|
|
488
|
-
/* @__PURE__ */ (0,
|
|
548
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
489
549
|
"p",
|
|
490
550
|
{
|
|
491
|
-
className: "text-sm font-semibold text-start
|
|
492
|
-
style: { color: textColor },
|
|
551
|
+
className: "text-sm font-semibold text-start",
|
|
552
|
+
style: { color: textColor || "var(--pbm-text)" },
|
|
493
553
|
id: "loading_label",
|
|
494
554
|
children: "Um momento... estamos verificando seus dados."
|
|
495
555
|
}
|
|
@@ -498,26 +558,6 @@ function Loading({ textColor }) {
|
|
|
498
558
|
}
|
|
499
559
|
var Loading_default = Loading;
|
|
500
560
|
|
|
501
|
-
// src/components/UI/Title/index.tsx
|
|
502
|
-
var import_classnames5 = __toESM(require("classnames"));
|
|
503
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
504
|
-
function Title(props) {
|
|
505
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
506
|
-
"h2",
|
|
507
|
-
{
|
|
508
|
-
className: (0, import_classnames5.default)(
|
|
509
|
-
"text-start font-semibold text-sm text-zinc-900",
|
|
510
|
-
props.className
|
|
511
|
-
),
|
|
512
|
-
style: { color: props.textColor, fontSize: props.textSize, textAlign: props.textAlign },
|
|
513
|
-
"data-testid": "test_id_title",
|
|
514
|
-
id: "title_pbm",
|
|
515
|
-
children: props.children
|
|
516
|
-
}
|
|
517
|
-
);
|
|
518
|
-
}
|
|
519
|
-
var Title_default = Title;
|
|
520
|
-
|
|
521
561
|
// src/services/benefits-without-document.ts
|
|
522
562
|
var import_js_cookie2 = __toESM(require("js-cookie"));
|
|
523
563
|
var import_meta2 = {};
|
|
@@ -567,12 +607,12 @@ var useModal = (0, import_zustand3.create)(createModalStore);
|
|
|
567
607
|
|
|
568
608
|
// src/components/BenefitsTable/Item.tsx
|
|
569
609
|
var import_react3 = require("react");
|
|
570
|
-
var
|
|
610
|
+
var import_classnames7 = __toESM(require("classnames"));
|
|
571
611
|
|
|
572
612
|
// src/components/UI/Icons/index.tsx
|
|
573
|
-
var
|
|
613
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
574
614
|
function CheckON({ size }) {
|
|
575
|
-
return /* @__PURE__ */ (0,
|
|
615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
576
616
|
"svg",
|
|
577
617
|
{
|
|
578
618
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -580,7 +620,7 @@ function CheckON({ size }) {
|
|
|
580
620
|
viewBox: "0 0 500 500",
|
|
581
621
|
width: size,
|
|
582
622
|
height: size,
|
|
583
|
-
children: /* @__PURE__ */ (0,
|
|
623
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
584
624
|
"path",
|
|
585
625
|
{
|
|
586
626
|
d: "M421.44 78.56C375.64 32.77 314.76 7.55 250 7.55S124.36 32.77 78.56 78.56C32.77 124.36 7.55 185.24 7.55 250s25.22 125.64 71.01 171.44c45.8 45.79 106.68 71.01 171.44 71.01s125.64-25.22 171.44-71.01c45.79-45.8 71.01-106.68 71.01-171.44s-25.22-125.64-71.01-171.44zm-49.17 121.7L242.88 334.63c-8.98 9.29-23.57 10.17-33.59 2.02l-79.63-64.7c-10.69-8.67-12.33-24.38-3.66-35.07 8.67-10.69 24.38-12.33 35.07-3.65l61.9 50.39L336.5 165.74c4.4-4.75 10.48-7.59 16.95-7.93a24.88 24.88 0 0118.83 7.26c9.72 9.72 9.71 25.48 0 35.19z",
|
|
@@ -591,7 +631,7 @@ function CheckON({ size }) {
|
|
|
591
631
|
);
|
|
592
632
|
}
|
|
593
633
|
function CheckOFF({ size }) {
|
|
594
|
-
return /* @__PURE__ */ (0,
|
|
634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
595
635
|
"svg",
|
|
596
636
|
{
|
|
597
637
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -600,8 +640,8 @@ function CheckOFF({ size }) {
|
|
|
600
640
|
width: size,
|
|
601
641
|
height: size,
|
|
602
642
|
children: [
|
|
603
|
-
/* @__PURE__ */ (0,
|
|
604
|
-
/* @__PURE__ */ (0,
|
|
643
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: 250, cy: 250, r: 237.45, fill: "#fff" }),
|
|
644
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
605
645
|
"path",
|
|
606
646
|
{
|
|
607
647
|
d: "M250 492.45c-64.76 0-125.64-25.22-171.44-71.01C32.77 375.64 7.55 314.76 7.55 250S32.77 124.36 78.56 78.56C124.36 32.77 185.24 7.55 250 7.55s125.64 25.22 171.44 71.01c45.79 45.79 71.01 106.68 71.01 171.44s-25.22 125.64-71.01 171.44c-45.79 45.79-106.68 71.01-171.44 71.01zm0-474.9C121.83 17.55 17.55 121.83 17.55 250S121.83 482.45 250 482.45 482.45 378.17 482.45 250 378.17 17.55 250 17.55z",
|
|
@@ -618,7 +658,7 @@ var Icons = {
|
|
|
618
658
|
};
|
|
619
659
|
|
|
620
660
|
// src/components/BenefitsTable/Item.tsx
|
|
621
|
-
var
|
|
661
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
622
662
|
function Item({ data, onChange, checked }) {
|
|
623
663
|
const { setAvailableDiscountSelected, state, isAuthenticatedShopper } = usePBMStore();
|
|
624
664
|
const { setModal } = useModal();
|
|
@@ -661,17 +701,21 @@ function Item({ data, onChange, checked }) {
|
|
|
661
701
|
}
|
|
662
702
|
onChange();
|
|
663
703
|
};
|
|
664
|
-
return /* @__PURE__ */ (0,
|
|
704
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
665
705
|
"label",
|
|
666
706
|
{
|
|
667
707
|
htmlFor: ID_INPUT,
|
|
668
|
-
className: (0,
|
|
669
|
-
"label_benefits w-full flex items-center justify-start bg-zinc-300/60 border border-zinc-400/50 px-4 py-2
|
|
670
|
-
{ "cursor-not-allowed": state === "isPreview", "cursor-pointer": state === "isActivated" }
|
|
708
|
+
className: (0, import_classnames7.default)(
|
|
709
|
+
"label_benefits w-full flex items-center justify-start bg-zinc-300/60 border border-zinc-400/50 px-4 py-2 transition-colors rounded-lg gap-1",
|
|
710
|
+
{ "cursor-not-allowed": state === "isPreview", "cursor-pointer": state === "isActivated", "opacity-80": !checked && state === "isActivated" }
|
|
671
711
|
),
|
|
712
|
+
style: {
|
|
713
|
+
borderColor: checked ? "var(--pbm-primary)" : void 0,
|
|
714
|
+
backgroundColor: checked ? "color-mix(in srgb, var(--pbm-primary), transparent 90%)" : void 0
|
|
715
|
+
},
|
|
672
716
|
id: "label_benefits_" + ID_INPUT,
|
|
673
717
|
children: [
|
|
674
|
-
/* @__PURE__ */ (0,
|
|
718
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
675
719
|
"input",
|
|
676
720
|
{
|
|
677
721
|
type: "radio",
|
|
@@ -683,23 +727,30 @@ function Item({ data, onChange, checked }) {
|
|
|
683
727
|
disabled: state === "isPreview"
|
|
684
728
|
}
|
|
685
729
|
),
|
|
686
|
-
!checked ? /* @__PURE__ */ (0,
|
|
687
|
-
/* @__PURE__ */ (0,
|
|
730
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "var(--pbm-primary)" }, children: !checked ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icons.CheckOFF, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icons.CheckON, { size: 20 }) }),
|
|
731
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-semibold text-sm", style: { color: "var(--pbm-text)" }, children: [
|
|
688
732
|
data.authorizedQuantity,
|
|
689
733
|
"un"
|
|
690
734
|
] }),
|
|
691
|
-
/* @__PURE__ */ (0,
|
|
692
|
-
/* @__PURE__ */ (0,
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
735
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: "ml-auto relative gap-2 flex items-center-safe justify-end-safe", children: [
|
|
736
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
737
|
+
"span",
|
|
738
|
+
{
|
|
739
|
+
className: "text-white -top-4 py-0.5 font-semibold text-xs px-2 w-auto text-nowrap rounded-2xl -right-3",
|
|
740
|
+
style: { backgroundColor: "var(--pbm-primary)" },
|
|
741
|
+
children: [
|
|
742
|
+
discountValue.toLocaleString("pt-BR", {
|
|
743
|
+
currency: "BRL",
|
|
744
|
+
currencyDisplay: "symbol",
|
|
745
|
+
currencySign: "standard",
|
|
746
|
+
style: "currency"
|
|
747
|
+
}),
|
|
748
|
+
" ",
|
|
749
|
+
"OFF"
|
|
750
|
+
]
|
|
751
|
+
}
|
|
752
|
+
),
|
|
753
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { className: "font-semibold text-sm text-center", style: { color: "var(--pbm-text)" }, children: totalPriceProductWithDiscountBenefit.toLocaleString("pt-BR", {
|
|
703
754
|
currency: "BRL",
|
|
704
755
|
currencyDisplay: "symbol",
|
|
705
756
|
currencySign: "standard",
|
|
@@ -713,7 +764,7 @@ function Item({ data, onChange, checked }) {
|
|
|
713
764
|
var Item_default = Item;
|
|
714
765
|
|
|
715
766
|
// src/components/BenefitsTable/index.tsx
|
|
716
|
-
var
|
|
767
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
717
768
|
function BenefitsTable() {
|
|
718
769
|
const [isPending, startTransition] = (0, import_react4.useTransition)();
|
|
719
770
|
const { securityNumber, setState, state, targetProduct, customLoginUrl, isAuthenticatedShopper } = usePBMStore();
|
|
@@ -785,47 +836,29 @@ function BenefitsTable() {
|
|
|
785
836
|
});
|
|
786
837
|
}, []);
|
|
787
838
|
if (isPending) {
|
|
788
|
-
return /* @__PURE__ */ (0,
|
|
789
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
790
|
-
"div",
|
|
791
|
-
{
|
|
792
|
-
"data-testid": "test_id_spin",
|
|
793
|
-
className: "w-8 h-8 border-4 border-t-gray-700 border-gray-300 rounded-full animate-spin",
|
|
794
|
-
id: "loading_spin"
|
|
795
|
-
}
|
|
796
|
-
),
|
|
797
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
798
|
-
"p",
|
|
799
|
-
{
|
|
800
|
-
className: "text-sm font-semibold text-start text-zinc-900",
|
|
801
|
-
id: "loading_label",
|
|
802
|
-
children: "Buscando beneficios dispon\xEDveis..."
|
|
803
|
-
}
|
|
804
|
-
)
|
|
805
|
-
] });
|
|
839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading_default, { textColor: "var(--pbm-text)" });
|
|
806
840
|
}
|
|
807
|
-
if (benefitsItems?.length && benefitsItems[0]
|
|
808
|
-
|
|
809
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("main", { className: "flex items-center justify-center gap-4", id: "loading_pbm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm font-semibold text-start text-zinc-900", id: "benefits_error_handle", children: benefitsItems[0].informativeText }) });
|
|
841
|
+
if (benefitsItems?.length && benefitsItems[0]?.statusCode == null && state === "isActivated") {
|
|
842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("main", { className: "flex items-center justify-center gap-4", id: "loading_pbm", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm font-semibold text-start", style: { color: "var(--pbm-text)" }, id: "benefits_error_handle", children: benefitsItems[0].informativeText }) });
|
|
810
843
|
}
|
|
811
|
-
return /* @__PURE__ */ (0,
|
|
844
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
812
845
|
"section",
|
|
813
846
|
{
|
|
814
847
|
className: "flex items-start justify-center gap-4 w-full h-auto flex-col",
|
|
815
848
|
id: "benefits_table_pbm",
|
|
816
849
|
children: [
|
|
817
|
-
/* @__PURE__ */ (0,
|
|
818
|
-
/* @__PURE__ */ (0,
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Title_default, { children: "Descontos dispon\xEDveis:" }),
|
|
851
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
819
852
|
"form",
|
|
820
853
|
{
|
|
821
854
|
className: "flex flex-col items-center justify-start w-full gap-4.5",
|
|
822
855
|
id: "form_benefits_table_pbm",
|
|
823
856
|
onSubmit: (e) => e.preventDefault(),
|
|
824
857
|
children: [
|
|
825
|
-
!benefitsItems && /* @__PURE__ */ (0,
|
|
858
|
+
!benefitsItems && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm font-semibold text-start text-zinc-900", id: "benefits_empty_pbm", children: "N\xE3o foi poss\xEDvel encontrar benef\xEDcios para esse produto." }),
|
|
826
859
|
benefitsItems && benefitsItems.map((item, index) => {
|
|
827
860
|
const ID_INPUT = "unity_quantity_" + item.authorizedQuantity;
|
|
828
|
-
return /* @__PURE__ */ (0,
|
|
861
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
829
862
|
Item_default,
|
|
830
863
|
{
|
|
831
864
|
data: item,
|
|
@@ -838,7 +871,7 @@ function BenefitsTable() {
|
|
|
838
871
|
]
|
|
839
872
|
}
|
|
840
873
|
),
|
|
841
|
-
state === "isPreview" && /* @__PURE__ */ (0,
|
|
874
|
+
state === "isPreview" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
842
875
|
Button_default,
|
|
843
876
|
{
|
|
844
877
|
onClick: () => setState("isEmpty"),
|
|
@@ -847,28 +880,28 @@ function BenefitsTable() {
|
|
|
847
880
|
children: [
|
|
848
881
|
"Aten\xE7\xE3o: N\xE3o \xE9 poss\xEDvel utilizar os benef\xEDcos sem realizar a consulta do CPF e o Login, por favor",
|
|
849
882
|
" ",
|
|
850
|
-
/* @__PURE__ */ (0,
|
|
883
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "underline", children: "insira seu cpf para utilizar os benef\xEDcios" })
|
|
851
884
|
]
|
|
852
885
|
}
|
|
853
886
|
),
|
|
854
|
-
state === "isActivated" && /* @__PURE__ */ (0,
|
|
855
|
-
!isAuthenticatedShopper && /* @__PURE__ */ (0,
|
|
887
|
+
state === "isActivated" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
888
|
+
!isAuthenticatedShopper && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
856
889
|
Button_default,
|
|
857
890
|
{
|
|
858
891
|
type: "button",
|
|
859
892
|
onClick: () => window.location.assign(customLoginUrl || "/login"),
|
|
860
893
|
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",
|
|
861
894
|
id: "login",
|
|
862
|
-
children: /* @__PURE__ */ (0,
|
|
895
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "underline", children: "Por favor, fa\xE7a o Login para aproveitar os benef\xEDcios!" })
|
|
863
896
|
}
|
|
864
897
|
),
|
|
865
|
-
/* @__PURE__ */ (0,
|
|
898
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
866
899
|
Button_default,
|
|
867
900
|
{
|
|
868
901
|
onClick: () => setState("isEmpty"),
|
|
869
902
|
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",
|
|
870
903
|
id: "change_security_number",
|
|
871
|
-
children: /* @__PURE__ */ (0,
|
|
904
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "underline", children: "Deseja editar o cpf digitado?" })
|
|
872
905
|
}
|
|
873
906
|
)
|
|
874
907
|
] })
|
|
@@ -878,27 +911,6 @@ function BenefitsTable() {
|
|
|
878
911
|
}
|
|
879
912
|
var BenefitsTable_default = BenefitsTable;
|
|
880
913
|
|
|
881
|
-
// src/components/UI/Text/index.tsx
|
|
882
|
-
var import_classnames7 = __toESM(require("classnames"));
|
|
883
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
884
|
-
function Text(props) {
|
|
885
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
886
|
-
"p",
|
|
887
|
-
{
|
|
888
|
-
className: (0, import_classnames7.default)(
|
|
889
|
-
"font-normal text-sm text-zinc-900",
|
|
890
|
-
props.textAlign && `text-${props.textAlign}`,
|
|
891
|
-
props.className
|
|
892
|
-
),
|
|
893
|
-
style: { color: props.textColor, fontSize: props.textSize, textAlign: props.textAlign },
|
|
894
|
-
"data-testid": "test_id_text",
|
|
895
|
-
id: "text_pbm",
|
|
896
|
-
children: props.children
|
|
897
|
-
}
|
|
898
|
-
);
|
|
899
|
-
}
|
|
900
|
-
var Text_default = Text;
|
|
901
|
-
|
|
902
914
|
// src/components/SecurityNumberInvalid/index.tsx
|
|
903
915
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
904
916
|
function SecurityNumberInvalid({ textColor }) {
|
|
@@ -912,7 +924,8 @@ function SecurityNumberInvalid({ textColor }) {
|
|
|
912
924
|
"section",
|
|
913
925
|
{
|
|
914
926
|
"data-testid": "test_id_invalid",
|
|
915
|
-
className: "flex items-end justify-center gap-2 w-full h-auto flex-col border-y
|
|
927
|
+
className: "flex items-end justify-center gap-2 w-full h-auto flex-col border-y py-6",
|
|
928
|
+
style: { borderColor: "color-mix(in srgb, var(--pbm-text), transparent 80%)" },
|
|
916
929
|
id: "security_number_invalid_container_pbm",
|
|
917
930
|
children: [
|
|
918
931
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Title_default, { className: "w-full", textColor, children: "CPF n\xE3o cadastrado." }),
|
|
@@ -921,7 +934,7 @@ function SecurityNumberInvalid({ textColor }) {
|
|
|
921
934
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("br", {}),
|
|
922
935
|
"Ao clicar em \u201CAceitar os termos\u201D, voc\xEA ir\xE1 para uma p\xE1gina externa. Aceite os termos e volte para continuar."
|
|
923
936
|
] }),
|
|
924
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default, { onClick: () => handleOpenModal(), children: "Aceitar os termos" })
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default, { onClick: () => handleOpenModal(), style: { backgroundColor: "var(--pbm-primary)" }, children: "Aceitar os termos" })
|
|
925
938
|
]
|
|
926
939
|
}
|
|
927
940
|
);
|
|
@@ -941,12 +954,13 @@ function SecurityNumberRegitered({ textColor }) {
|
|
|
941
954
|
"section",
|
|
942
955
|
{
|
|
943
956
|
"data-testid": "test_id_registered",
|
|
944
|
-
className: "flex items-end justify-center gap-2 w-full h-auto flex-col border-y
|
|
957
|
+
className: "flex items-end justify-center gap-2 w-full h-auto flex-col border-y py-6",
|
|
958
|
+
style: { borderColor: "color-mix(in srgb, var(--pbm-text), transparent 80%)" },
|
|
945
959
|
id: "security_number_registered_container_pbm",
|
|
946
960
|
children: [
|
|
947
961
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Title_default, { className: "w-full", textColor, children: "Ops, seu CPF ainda n\xE3o est\xE1 habilitado para este produto." }),
|
|
948
962
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { className: "w-full", textColor, children: "Para ativar o benef\xEDcio, clique em \u201CAtivar CPF\u201D e conclua a etapa na p\xE1gina externa. Depois, \xE9 s\xF3 voltar para continuar \u2014 vamos aguardar voc\xEA aqui." }),
|
|
949
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button_default, { onClick: () => handleOpenModal(), children: "Ativar CPF" })
|
|
963
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button_default, { onClick: () => handleOpenModal(), style: { backgroundColor: "var(--pbm-primary)" }, children: "Ativar CPF" })
|
|
950
964
|
]
|
|
951
965
|
}
|
|
952
966
|
);
|
|
@@ -965,7 +979,10 @@ var ErrorToApplyBenefits = () => {
|
|
|
965
979
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
966
980
|
Button_default,
|
|
967
981
|
{
|
|
968
|
-
className: "bg-transparent p-0 pl-2 w-auto h-auto
|
|
982
|
+
className: "bg-transparent p-0 pl-2 w-auto h-auto underline cursor-pointer hover:bg-transparent flex items-center justify-start gap-1",
|
|
983
|
+
style: { color: "var(--pbm-text)" },
|
|
984
|
+
onMouseOver: (e) => e.currentTarget.style.filter = "brightness(0.8)",
|
|
985
|
+
onMouseOut: (e) => e.currentTarget.style.filter = "none",
|
|
969
986
|
onClick: () => setState("isEmpty"),
|
|
970
987
|
id: "check_benefits_button",
|
|
971
988
|
children: [
|
|
@@ -998,9 +1015,12 @@ function Link(props) {
|
|
|
998
1015
|
target: props.target || "_self",
|
|
999
1016
|
href: typeof props.href === "string" ? props.href : props.href.pathname + getParams(props.href.param),
|
|
1000
1017
|
className: (0, import_classnames8.default)(
|
|
1001
|
-
"w-3xs cursor-pointer h-10 rounded-lg
|
|
1018
|
+
"w-3xs cursor-pointer h-10 rounded-lg text-white text-sm font-semibold transition-colors flex items-center justify-center",
|
|
1002
1019
|
props.className
|
|
1003
1020
|
),
|
|
1021
|
+
style: { backgroundColor: "var(--pbm-primary)" },
|
|
1022
|
+
onMouseOver: (e) => e.currentTarget.style.backgroundColor = "var(--pbm-secondary)",
|
|
1023
|
+
onMouseOut: (e) => e.currentTarget.style.backgroundColor = "var(--pbm-primary)",
|
|
1004
1024
|
"data-testid": "test_id_link",
|
|
1005
1025
|
id: "link_pbm",
|
|
1006
1026
|
onClick: () => setState("isEmpty"),
|
|
@@ -1052,10 +1072,10 @@ var formatedPrice = (price) => {
|
|
|
1052
1072
|
};
|
|
1053
1073
|
|
|
1054
1074
|
// src/PBM.tsx
|
|
1055
|
-
var
|
|
1075
|
+
var import_react8 = require("react");
|
|
1056
1076
|
|
|
1057
1077
|
// src/hooks/useAppStartup.tsx
|
|
1058
|
-
var
|
|
1078
|
+
var import_react6 = require("react");
|
|
1059
1079
|
|
|
1060
1080
|
// src/services/authorization.ts
|
|
1061
1081
|
var import_js_cookie3 = __toESM(require("js-cookie"));
|
|
@@ -1134,12 +1154,36 @@ var GetProductsWithBenefits = async (eanProduct) => {
|
|
|
1134
1154
|
return dataResponse;
|
|
1135
1155
|
};
|
|
1136
1156
|
|
|
1157
|
+
// src/libs/zustand/useTheme.tsx
|
|
1158
|
+
var import_zustand4 = require("zustand");
|
|
1159
|
+
var import_react5 = require("zustand/react");
|
|
1160
|
+
var initialThemeState = {
|
|
1161
|
+
primaryColor: "#44c2c0",
|
|
1162
|
+
secondaryColor: "#339c9b",
|
|
1163
|
+
backgroundColor: "#ffffff",
|
|
1164
|
+
textColor: "#52525b",
|
|
1165
|
+
// zinc-600
|
|
1166
|
+
borderColor: "#44c2c0"
|
|
1167
|
+
// zinc-600
|
|
1168
|
+
};
|
|
1169
|
+
var themeStore = (0, import_zustand4.createStore)((set) => ({
|
|
1170
|
+
...initialThemeState,
|
|
1171
|
+
setTheme: (theme) => set((state) => ({ ...state, ...theme }))
|
|
1172
|
+
}));
|
|
1173
|
+
function useTheme(selector) {
|
|
1174
|
+
if (selector) {
|
|
1175
|
+
return (0, import_react5.useStore)(themeStore, selector);
|
|
1176
|
+
}
|
|
1177
|
+
return (0, import_react5.useStore)(themeStore, (state) => state);
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1137
1180
|
// src/hooks/useAppStartup.tsx
|
|
1138
1181
|
var useAppStartup = (props) => {
|
|
1139
1182
|
const { setTargetProduct, targetProduct, setIsAuthenticatedShopper, setCustomLoginUrl } = usePBMStore();
|
|
1140
|
-
const
|
|
1141
|
-
const [
|
|
1142
|
-
const [
|
|
1183
|
+
const { setTheme } = useTheme();
|
|
1184
|
+
const [IsReady, setIsReady] = (0, import_react6.useState)(false);
|
|
1185
|
+
const [IsValid, setIsValid] = (0, import_react6.useState)(false);
|
|
1186
|
+
const [EanProductExist, setEanProductExist] = (0, import_react6.useState)(true);
|
|
1143
1187
|
const fetchAuthorizationRequest = async () => {
|
|
1144
1188
|
try {
|
|
1145
1189
|
const response = await GetAuthorization({ clientID: props.clientID });
|
|
@@ -1201,9 +1245,12 @@ var useAppStartup = (props) => {
|
|
|
1201
1245
|
setEanProductExist(false);
|
|
1202
1246
|
}
|
|
1203
1247
|
};
|
|
1204
|
-
(0,
|
|
1248
|
+
(0, import_react6.useEffect)(() => {
|
|
1205
1249
|
let isMounted = true;
|
|
1206
1250
|
const startup = async () => {
|
|
1251
|
+
if (props.theme) {
|
|
1252
|
+
setTheme(props.theme);
|
|
1253
|
+
}
|
|
1207
1254
|
const isAuthorized = await fetchAuthorizationRequest();
|
|
1208
1255
|
if (!isAuthorized || !isMounted) return;
|
|
1209
1256
|
const isValidProduct = await fetchValidateProduct();
|
|
@@ -1225,14 +1272,14 @@ var useAppStartup_default = useAppStartup;
|
|
|
1225
1272
|
// src/components/Iframe/index.tsx
|
|
1226
1273
|
var import_classnames10 = __toESM(require("classnames"));
|
|
1227
1274
|
var import_lucide_react3 = require("lucide-react");
|
|
1228
|
-
var
|
|
1275
|
+
var import_react7 = require("react");
|
|
1229
1276
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1230
1277
|
function Iframe() {
|
|
1231
|
-
const [showFallback, setShowFallback] = (0,
|
|
1278
|
+
const [showFallback, setShowFallback] = (0, import_react7.useState)(false);
|
|
1232
1279
|
const { setState } = usePBMStore();
|
|
1233
1280
|
const { resetModal, modal } = useModal();
|
|
1234
1281
|
const isOpen = modal.open && modal.id === "iframe_pbm";
|
|
1235
|
-
(0,
|
|
1282
|
+
(0, import_react7.useEffect)(() => {
|
|
1236
1283
|
if (isOpen) {
|
|
1237
1284
|
setShowFallback(false);
|
|
1238
1285
|
}
|
|
@@ -1338,7 +1385,8 @@ function PBM(props) {
|
|
|
1338
1385
|
const { state } = usePBMStore();
|
|
1339
1386
|
const { IsReady, EanProductExist, IsValid } = useAppStartup_default(props);
|
|
1340
1387
|
const { setErrorMessage } = useError();
|
|
1341
|
-
const
|
|
1388
|
+
const theme = useTheme();
|
|
1389
|
+
const [isPending, startTransition] = (0, import_react8.useTransition)();
|
|
1342
1390
|
const formatedProductPrice = formatedPrice(props.originalProductPrice);
|
|
1343
1391
|
if (!IsValid) return;
|
|
1344
1392
|
if (!IsReady) {
|
|
@@ -1348,21 +1396,34 @@ function PBM(props) {
|
|
|
1348
1396
|
setErrorMessage("O produto n\xE3o foi encontrado no sistema. Por favor, tente novamente mais tarde ou contate o suporte.");
|
|
1349
1397
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id: "pbm-library-root", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorToApplyBenefits_default, {}) });
|
|
1350
1398
|
}
|
|
1351
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1400
|
+
"div",
|
|
1401
|
+
{
|
|
1402
|
+
id: "pbm-library-root",
|
|
1403
|
+
style: {
|
|
1404
|
+
"--pbm-primary": theme.primaryColor,
|
|
1405
|
+
"--pbm-secondary": theme.secondaryColor,
|
|
1406
|
+
"--pbm-bg": theme.backgroundColor,
|
|
1407
|
+
"--pbm-text": theme.textColor,
|
|
1408
|
+
"--pbm-border": theme.borderColor
|
|
1409
|
+
},
|
|
1410
|
+
children: [
|
|
1411
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Container_default, { variant: "main", children: [
|
|
1412
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Header_default, { originalProductPrice: formatedProductPrice || 0 }),
|
|
1413
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Container_default, { variant: "simple", children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Loading_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
1414
|
+
state === "isEmpty" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Form_default, { startTransition }),
|
|
1415
|
+
state === "isInvalid" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SecurityNumberInvalid_default, {}),
|
|
1416
|
+
state === "isRegistered" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SecurityNumberRegitered_default, {}),
|
|
1417
|
+
(state === "isActivated" || state === "isPreview") && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BenefitsTable_default, {}),
|
|
1418
|
+
state === "isError" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorToApplyBenefits_default, {})
|
|
1419
|
+
] }) }),
|
|
1420
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Footer_default, {})
|
|
1421
|
+
] }),
|
|
1422
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Modal_default, { ID: "ShopperIsNotAuthenticated" }),
|
|
1423
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Iframe_default, {})
|
|
1424
|
+
]
|
|
1425
|
+
}
|
|
1426
|
+
);
|
|
1366
1427
|
}
|
|
1367
1428
|
var PBM_default = PBM;
|
|
1368
1429
|
// Annotate the CommonJS export names for ESM import in node:
|