PluginProbe
Discount Rules for WooCommerce – Disco | Dynamic Pricing, Conditions, Bulk, Bundle, BOGO / 1.4.19
Discount Rules for WooCommerce – Disco | Dynamic Pricing, Conditions, Bulk, Bundle, BOGO v1.4.19
1.4.19 1.4.18 1.4.17 1.4.16 1.4.15 1.4.14 1.4.13 1.4.12 1.4.11 1.4.10 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.54 1.3.53 1.3.52 1.3.51 1.3.50 All 182 releases
disco / backend / views / components / Main / utilities / cart-banner-design.js

cart-banner-design.js in Discount Rules for WooCommerce – Disco | Dynamic Pricing, Conditions, Bulk, Bundle, BOGO 1.4.19, at backend/views/components/Main/utilities/cart-banner-design.js

646 lines 15.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 // Pre-made Cart Banner Designs
2 // Each design contains banner styling including button configuration
3 // Colors are based on notice1.svg through notice9.svg images
4
5 /**
6 * Get condition value from conditions array
7 */
8 export const getConditionValue = (conditions, filterName) => {
9 for (const group of conditions || []) {
10 const filter = group.base_filters?.find(
11 (f) => f.compare_with === filterName
12 );
13 if (filter) return filter.compare;
14 }
15 return null;
16 };
17
18 /**
19 * Compute dynamic variables based on discount configuration
20 */
21 export const getDynamicVariables = (
22 discount_intent,
23 discount_rules,
24 conditions
25 ) => {
26 const variables = [];
27 const firstRule = discount_rules?.[0];
28 const discountType = firstRule?.discount_type || 'percent';
29 const discountValue = firstRule?.discount_value || '20';
30
31 if (discount_intent !== 'Shipping') {
32 // Always show discount variable based on type
33 if (discountType === 'fixed') {
34 variables.push({
35 label: 'discounted_amount',
36 example: `$${discountValue}`,
37 });
38 } else {
39 variables.push({
40 label: 'discounted_percentage',
41 example: `${discountValue}%`,
42 });
43 }
44
45 // Show remaining_quantity if cart_items_quantity or item_quantity condition is set
46 const quantityValue =
47 getConditionValue(conditions, 'cart_items_quantity') ||
48 getConditionValue(conditions, 'item_quantity');
49 if (quantityValue) {
50 variables.push({
51 label: 'remaining_quantity',
52 example: quantityValue,
53 });
54 }
55 }
56
57 // Show remaining_amount if cart_subtotal or cart_subtotal_with_tax condition is set
58 const subtotalValue =
59 getConditionValue(conditions, 'cart_subtotal') ||
60 getConditionValue(conditions, 'cart_subtotal_with_tax');
61 if (subtotalValue) {
62 variables.push({
63 label: 'remaining_amount',
64 example: `$${subtotalValue}`,
65 });
66 }
67
68 // Show remaining_cart_items if cart_items_count or item_count condition is set
69 const lineItemValue =
70 getConditionValue(conditions, 'cart_items_count') ||
71 getConditionValue(conditions, 'item_count');
72 if (lineItemValue) {
73 variables.push({
74 label: 'remaining_cart_items',
75 example: lineItemValue,
76 });
77 }
78
79 return variables;
80 };
81
82 const baseCartBannerDesign = {
83 // ------------------- BANNER 1 - Gradient Rainbow (notice1.svg) -------------------
84 banner1: {
85 text: 'Add More [remaining_quantity] Item to SAVE [discounted_percentage] OFF',
86 'font-family': '',
87 'font-size': '14px',
88 'font-weight': 700,
89 'font-style': 'normal',
90 'text-decoration': 'none',
91 color: '#ffffff',
92 background:
93 'linear-gradient(90deg, #F39177 0%, #F61F48 35.5%, #A758EE 69%, #86C5FE 100%)',
94 'border-color': 'transparent',
95 icon_color: '#ffffff',
96 border: 0,
97 height: '45px',
98 isChain: false,
99 radius: {
100 'top-left': '8px',
101 'top-right': '8px',
102 'bottom-right': '8px',
103 'bottom-left': '8px',
104 },
105 button: {
106 enable: true,
107 text: 'Shop Now ➤',
108 url: '',
109 'font-family': '',
110 'font-size': '12px',
111 'font-weight': 700,
112 'font-style': 'normal',
113 'text-decoration': 'none',
114 color: '#323232',
115 background: '#facf57',
116 'border-color': '#ffffff',
117 border: 0,
118 height: '35px',
119 width: '100px',
120 isChain: false,
121 radius: {
122 'top-left': '6px',
123 'top-right': '6px',
124 'bottom-right': '6px',
125 'bottom-left': '6px',
126 },
127 },
128 },
129
130 // ------------------- BANNER 2 - Blue Arrow (notice2.svg) -------------------
131 banner2: {
132 text: 'Buy more and save upto [discounted_amount]',
133 'font-family': '',
134 'font-size': '14px',
135 'font-weight': 600,
136 'font-style': 'normal',
137 'text-decoration': 'none',
138 color: '#ffffff',
139 background: '#0081C9',
140 'border-color': '#0081C9',
141 icon_color: '#ffffff',
142 border: 0,
143 height: '45px',
144 isChain: false,
145 radius: {
146 'top-left': '0px',
147 'top-right': '0px',
148 'bottom-right': '0px',
149 'bottom-left': '0px',
150 },
151 button: {
152 enable: false,
153 text: 'Shop Now',
154 url: '',
155 'font-family': '',
156 'font-size': '12px',
157 'font-weight': 600,
158 'font-style': 'normal',
159 'text-decoration': 'none',
160 color: '#0081C9',
161 background: '#ffffff',
162 'border-color': '#ffffff',
163 border: 0,
164 height: '35px',
165 width: '100px',
166 isChain: false,
167 radius: {
168 'top-left': '4px',
169 'top-right': '4px',
170 'bottom-right': '4px',
171 'bottom-left': '4px',
172 },
173 },
174 },
175
176 // ------------------- BANNER 3 - Red Alert (notice3.svg) -------------------
177 banner3: {
178 text: 'Spend [remaining_amount] more to get [discounted_percentage] off your entire order',
179 'font-family': '',
180 'font-size': '14px',
181 'font-weight': 600,
182 'font-style': 'normal',
183 'text-decoration': 'none',
184 color: '#ffffff',
185 background: '#FF4133',
186 'border-color': '#FF4133',
187 icon_color: '#ffffff',
188 border: 0,
189 height: '45px',
190 isChain: false,
191 radius: {
192 'top-left': '0px',
193 'top-right': '0px',
194 'bottom-right': '0px',
195 'bottom-left': '0px',
196 },
197 button: {
198 enable: true,
199 text: 'Order More',
200 url: '',
201 'font-family': '',
202 'font-size': '12px',
203 'font-weight': 600,
204 'font-style': 'normal',
205 'text-decoration': 'none',
206 color: '#FF4133',
207 background: '#ffffff',
208 'border-color': '#ffffff',
209 border: 0,
210 height: '35px',
211 width: '100px',
212 isChain: false,
213 radius: {
214 'top-left': '16px',
215 'top-right': '16px',
216 'bottom-right': '16px',
217 'bottom-left': '16px',
218 },
219 },
220 },
221
222 // ------------------- BANNER 4 - Neon Gradient (notice4.svg) -------------------
223 banner4: {
224 text: 'Add [remaining_amount] more to cart and get an extra [discounted_percentage] discount!',
225 'font-family': '',
226 'font-size': '14px',
227 'font-weight': 400,
228 'font-style': 'normal',
229 'text-decoration': 'none',
230 color: '#ffffff',
231 background:
232 'linear-gradient(90deg, #2AEBEB 0%, #6363FF 25%, #D040FB 50%, #FF46C8 75%, #FF9E9E 100%)',
233 'border-color': 'transparent',
234 icon_color: '#ffffff',
235 border: 0,
236 height: '45px',
237 isChain: false,
238 radius: {
239 'top-left': '12px',
240 'top-right': '12px',
241 'bottom-right': '12px',
242 'bottom-left': '12px',
243 },
244 button: {
245 enable: true,
246 text: 'Claim Now',
247 url: '',
248 'font-family': '',
249 'font-size': '12px',
250 'font-weight': 600,
251 'font-style': 'normal',
252 'text-decoration': 'none',
253 color: '#6363FF',
254 background: '#ffffff',
255 'border-color': '#ffffff',
256 border: 0,
257 height: '35px',
258 width: '100px',
259 isChain: false,
260 radius: {
261 'top-left': '4px',
262 'top-right': '4px',
263 'bottom-right': '4px',
264 'bottom-left': '4px',
265 },
266 },
267 },
268
269 // ------------------- BANNER 5 - Orange Border (notice5.svg) -------------------
270 banner5: {
271 text: 'Add [remaining_amount] more and get an instant [discounted_amount] off your order!',
272 'font-family': '',
273 'font-size': '14px',
274 'font-weight': 600,
275 'font-style': 'normal',
276 'text-decoration': 'none',
277 color: '#FB7F00',
278 background: '#ffffff',
279 'border-color': '#FB7F00',
280 icon_color: '#FB7F00',
281 border: 2,
282 height: '45px',
283 isChain: false,
284 radius: {
285 'top-left': '8px',
286 'top-right': '8px',
287 'bottom-right': '8px',
288 'bottom-left': '8px',
289 },
290 button: {
291 enable: false,
292 text: 'Apply',
293 url: '',
294 'font-family': '',
295 'font-size': '12px',
296 'font-weight': 600,
297 'font-style': 'normal',
298 'text-decoration': 'none',
299 color: '#ffffff',
300 background: '#FB7F00',
301 'border-color': '#FB7F00',
302 border: 0,
303 height: '35px',
304 width: '100px',
305 isChain: false,
306 radius: {
307 'top-left': '4px',
308 'top-right': '4px',
309 'bottom-right': '4px',
310 'bottom-left': '4px',
311 },
312 },
313 },
314
315 // ------------------- BANNER 6 - Teal Premium (notice6.svg) -------------------
316 banner6: {
317 text: '[discounted_percentage] OFF - Members Only',
318 'font-family': '',
319 'font-size': '14px',
320 'font-weight': 600,
321 'font-style': 'normal',
322 'text-decoration': 'none',
323 color: '#ffffff',
324 background: '#186F65',
325 'border-color': '#186F65',
326 icon_color: '#FFB600',
327 border: 0,
328 height: '45px',
329 isChain: false,
330 radius: {
331 'top-left': '4px',
332 'top-right': '4px',
333 'bottom-right': '4px',
334 'bottom-left': '4px',
335 },
336 button: {
337 enable: true,
338 text: 'Keep Shopping',
339 url: '',
340 'font-family': '',
341 'font-size': '12px',
342 'font-weight': 600,
343 'font-style': 'normal',
344 'text-decoration': 'none',
345 color: '#186F65',
346 background: '#FFB600',
347 'border-color': '#FFB600',
348 border: 0,
349 height: '35px',
350 width: '100px',
351 isChain: false,
352 radius: {
353 'top-left': '4px',
354 'top-right': '4px',
355 'bottom-right': '4px',
356 'bottom-left': '4px',
357 },
358 },
359 },
360
361 // ------------------- BANNER 7 - Purple Modern (notice7.svg) -------------------
362 banner7: {
363 text: 'Hurry! [discounted_percentage] OFF ends soon!',
364 'font-family': '',
365 'font-size': '14px',
366 'font-weight': 600,
367 'font-style': 'normal',
368 'text-decoration': 'none',
369 color: '#ffffff',
370 background: '#7C00FE',
371 'border-color': '#7C00FE',
372 icon_color: '#ffffff',
373 border: 0,
374 height: '45px',
375 isChain: false,
376 radius: {
377 'top-left': '8px',
378 'top-right': '8px',
379 'bottom-right': '8px',
380 'bottom-left': '8px',
381 },
382 button: {
383 enable: true,
384 text: 'Buy Now',
385 url: '',
386 'font-family': '',
387 'font-size': '12px',
388 'font-weight': 700,
389 'font-style': 'normal',
390 'text-decoration': 'none',
391 color: '#7C00FE',
392 background: '#ffffff',
393 'border-color': '#ffffff',
394 border: 0,
395 height: '35px',
396 width: '100px',
397 isChain: false,
398 radius: {
399 'top-left': '20px',
400 'top-right': '20px',
401 'bottom-right': '20px',
402 'bottom-left': '20px',
403 },
404 },
405 },
406
407 // ------------------- BANNER 8 - Blue Border (notice8.svg) -------------------
408 banner8: {
409 text: 'Flash Sale: [discounted_percentage] OFF!',
410 'font-family': '',
411 'font-size': '14px',
412 'font-weight': 600,
413 'font-style': 'normal',
414 'text-decoration': 'none',
415 color: '#007CBA',
416 background: '#ffffff',
417 'border-color': '#007CBA',
418 icon_color: '#007CBA',
419 border: 2,
420 height: '45px',
421 isChain: false,
422 radius: {
423 'top-left': '8px',
424 'top-right': '8px',
425 'bottom-right': '8px',
426 'bottom-left': '8px',
427 },
428 button: {
429 enable: true,
430 text: 'Shop',
431 url: '',
432 'font-family': '',
433 'font-size': '12px',
434 'font-weight': 600,
435 'font-style': 'normal',
436 'text-decoration': 'none',
437 color: '#ffffff',
438 background: '#007CBA',
439 'border-color': '#007CBA',
440 border: 0,
441 height: '35px',
442 width: '100px',
443 isChain: false,
444 radius: {
445 'top-left': '4px',
446 'top-right': '4px',
447 'bottom-right': '4px',
448 'bottom-left': '4px',
449 },
450 },
451 },
452
453 // ------------------- BANNER 9 - Minimal Light (notice9.svg) -------------------
454 banner9: {
455 text: 'Save [discounted_amount] today!',
456 'font-family': '',
457 'font-size': '14px',
458 'font-weight': 500,
459 'font-style': 'normal',
460 'text-decoration': 'none',
461 color: '#1A1D1F',
462 background: '#F9FAFB',
463 'border-color': '#E5E7EB',
464 icon_color: '#0079FF',
465 border: 1,
466 height: '45px',
467 isChain: false,
468 radius: {
469 'top-left': '8px',
470 'top-right': '8px',
471 'bottom-right': '8px',
472 'bottom-left': '8px',
473 },
474 button: {
475 enable: true,
476 text: 'View Details',
477 url: '',
478 'font-family': '',
479 'font-size': '12px',
480 'font-weight': 500,
481 'font-style': 'normal',
482 'text-decoration': 'none',
483 color: '#ffffff',
484 background: '#0079FF',
485 'border-color': '#0079FF',
486 border: 0,
487 height: '35px',
488 width: '100px',
489 isChain: false,
490 radius: {
491 'top-left': '6px',
492 'top-right': '6px',
493 'bottom-right': '6px',
494 'bottom-left': '6px',
495 },
496 },
497 },
498 };
499
500 // Default success message, shown once the customer has actually claimed the discount.
501 export const defaultSuccessText =
502 'Congratulations! You claimed [discounted_percentage] discount';
503
504 // Success message shown once the discount is claimed, per design.
505 const successTexts = {
506 banner1: '🎉 Congratulations! You claimed [discounted_percentage] OFF',
507 banner2: 'Nice! You just saved [discounted_amount] on this order',
508 banner3: '🎉 Discount applied! You got [discounted_percentage] OFF',
509 banner4: 'Congratulations! [discounted_percentage] discount is applied',
510 banner5: '🎉 You claimed [discounted_amount] off your order!',
511 banner6: 'Congratulations! Your [discounted_percentage] member discount is applied',
512 banner7: '🎉 Claimed! [discounted_percentage] OFF is in your cart',
513 banner8: 'Congratulations! You saved [discounted_percentage] on this order',
514 banner9: 'You saved [discounted_amount] on this order 🎉',
515 };
516
517 // Shipping success message, per design.
518 const shippingSuccessText =
519 '🎉 Congratulations! You unlocked FREE SHIPPING on this order';
520
521 /**
522 * Attach a success message block to every design, inheriting its typography.
523 */
524 const withSuccess = (designs, texts) =>
525 Object.fromEntries(
526 Object.entries(designs).map(([key, design]) => [
527 key,
528 {
529 ...design,
530 success: {
531 enable: true,
532 text: texts?.[key] || defaultSuccessText,
533 'font-family': design['font-family'],
534 'font-size': design['font-size'],
535 'font-weight': design['font-weight'],
536 'font-style': design['font-style'],
537 'text-decoration': design['text-decoration'],
538 },
539 },
540 ])
541 );
542
543 export const cartBannerDesign = withSuccess(baseCartBannerDesign, successTexts);
544
545 // Shipping-specific banner designs with free shipping text
546 export const shippingBannerDesign = {
547 // ------------------- BANNER 1 - Gradient Rainbow -------------------
548 banner1: {
549 ...cartBannerDesign.banner1,
550 success: {
551 ...cartBannerDesign.banner1.success,
552 text: shippingSuccessText,
553 },
554 text: "You're almost there! Add [remaining_amount] more to unlock FREE SHIPPING",
555 button: {
556 ...cartBannerDesign.banner1.button,
557 enable: true,
558 text: 'Order Now',
559 },
560 },
561
562 // ------------------- BANNER 2 - Blue Arrow -------------------
563 banner2: {
564 ...cartBannerDesign.banner2,
565 success: {
566 ...cartBannerDesign.banner2.success,
567 text: shippingSuccessText,
568 },
569 text: "You're almost there! Spend [remaining_amount] more for FREE SHIPPING.",
570 button: {
571 ...cartBannerDesign.banner2.button,
572 enable: true,
573 text: 'Buy More',
574 },
575 },
576
577 // ------------------- BANNER 3 - Red Alert -------------------
578 // banner3: {
579 // ...cartBannerDesign.banner3,
580 // text: "You're [remaining_amount] away from FREE SHIPPING!",
581 // },
582
583 // ------------------- BANNER 4 - Neon Gradient -------------------
584 // banner4: {
585 // ...cartBannerDesign.banner4,
586 // text: 'Add [remaining_amount] more to unlock FREE SHIPPING!',
587 // },
588
589 // ------------------- BANNER 5 - Orange Border -------------------
590 banner5: {
591 ...cartBannerDesign.banner5,
592 success: {
593 ...cartBannerDesign.banner5.success,
594 text: shippingSuccessText,
595 },
596 text: '🛒 Fill your cart a little more! Add $60 more — FREE SHIPPING awaits!',
597 button: {
598 ...cartBannerDesign.banner5.button,
599 enable: true,
600 text: 'Shop Now',
601 },
602 },
603
604 // ------------------- BANNER 6 - Teal Premium -------------------
605 banner6: {
606 ...cartBannerDesign.banner6,
607 success: {
608 ...cartBannerDesign.banner6.success,
609 text: shippingSuccessText,
610 },
611 text: 'Almost there! Add [remaining_quantity] more items for FREE SHIPPING!',
612 button: {
613 ...cartBannerDesign.banner6.button,
614 enable: true,
615 text: 'Shop Now',
616 },
617 },
618
619 // ------------------- BANNER 7 - Purple Modern -------------------
620 // banner7: {
621 // ...cartBannerDesign.banner7,
622 // text: 'Hurry! FREE SHIPPING when you spend [remaining_amount] more!',
623 // },
624
625 // ------------------- BANNER 8 - Blue Border -------------------
626 // banner8: {
627 // ...cartBannerDesign.banner8,
628 // text: 'FREE SHIPPING: Add [remaining_amount] more!',
629 // },
630
631 // ------------------- BANNER 9 - Minimal Light -------------------
632 banner9: {
633 ...cartBannerDesign.banner9,
634 success: {
635 ...cartBannerDesign.banner9.success,
636 text: shippingSuccessText,
637 },
638 text: '🚀 Free shipping is within reach! Spend [remaining_amount] more for FREE SHIPPING!',
639 button: {
640 ...cartBannerDesign.banner9.button,
641 enable: true,
642 text: 'Buy More',
643 },
644 },
645 };
646