@plurix/ecom-components 1.10.0-release240425.21 → 1.10.0-release240425.22
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/packages/ProductCardUi/ProductCardUi.d.ts +1 -1
- package/dist/packages/ProductCardUi/ProductCardUiHorizontal/ProductCardUiHorizontal.d.ts +1 -1
- package/dist/packages/ProductCardUi/ProductCardUiHorizontal/ProductCardUiHorizontal.js +102 -60
- package/dist/packages/ProductCardUi/ProductCardUiImage/ProductCardUiImage.d.ts +1 -1
- package/dist/packages/ProductCardUi/ProductCardUiImage/ProductCardUiImage.js +10 -10
- package/dist/packages/ProductCardUi/ProductCardUiPromotionFlag/ProductCardUiPromotionFlag.d.ts +3 -3
- package/dist/packages/ProductCardUi/ProductCardUiVertical/ProductCardUiVertical.d.ts +1 -1
- package/dist/packages/ProductCardUi/ProductCardUiVertical/ProductCardUiVertical.js +8 -1
- package/dist/styles/styles.css +1 -1
- package/dist/styles/styles3.css +1 -1
- package/dist/styles/styles5.css +1 -1
- package/dist/styles/styles6.css +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { NewProductCardUIProps } from '../../types/ProductCardUi';
|
|
2
2
|
|
|
3
|
-
export declare const ProductCardUi: ({ product, variant, hasPlusFriendBadge, hasPromotionalPrice, clubPrice, defaultScListPrice, hasClub, isClubClient, openModal, promotion, addToCartButton
|
|
3
|
+
export declare const ProductCardUi: ({ product, variant, hasPlusFriendBadge, hasPromotionalPrice, clubPrice, defaultScListPrice, hasClub, isClubClient, openModal, promotion, addToCartButton }: NewProductCardUIProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { NewProductCardUIProps } from '../../../types/ProductCardUi';
|
|
2
2
|
|
|
3
|
-
export declare const ProductCardUiHorizontal: ({ isMobile, hasPlusFriendBadge, promotion, product, hasPromotionalPrice, clubPrice, outOfStock, variant, defaultScListPrice, isClubClient, addToCartButton, openModal
|
|
3
|
+
export declare const ProductCardUiHorizontal: ({ isMobile, hasPlusFriendBadge, promotion, product, hasPromotionalPrice, clubPrice, outOfStock, variant, defaultScListPrice, isClubClient, addToCartButton, openModal }: NewProductCardUIProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,104 +1,146 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as t, jsx as r, Fragment as n } from "react/jsx-runtime";
|
|
2
2
|
import { ProductCardUiBadgeKg as P } from "../ProductCardUiBadge/ProductCardUiBadgeKg.js";
|
|
3
|
-
import { ProductCardDiscountBadge as
|
|
4
|
-
import { ProductCardButton as
|
|
3
|
+
import { ProductCardDiscountBadge as h } from "../ProductCardUiBadge/ProductCardUiDiscountBadge.js";
|
|
4
|
+
import { ProductCardButton as k } from "../ProductCardUiButton/ProductCardUiButton.js";
|
|
5
5
|
import { ProductCardImage as v } from "../ProductCardUiImage/ProductCardUiImage.js";
|
|
6
|
-
import { ProductCardName as
|
|
7
|
-
import { ProductCardPrice as
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
import { ProductCardName as x } from "../ProductCardUiName/ProductCardUiName.js";
|
|
7
|
+
import { ProductCardPrice as S } from "../ProductCardUiPrice/ProductCardUiPrice.js";
|
|
8
|
+
import { ProductCardUiPromotionFlag as U } from "../ProductCardUiPromotionFlag/ProductCardUiPromotionFlag.js";
|
|
9
|
+
const D = ({
|
|
10
|
+
isMobile: d,
|
|
11
|
+
hasPlusFriendBadge: a,
|
|
12
|
+
promotion: e,
|
|
12
13
|
product: i,
|
|
13
|
-
hasPromotionalPrice:
|
|
14
|
-
clubPrice:
|
|
15
|
-
outOfStock:
|
|
16
|
-
variant:
|
|
17
|
-
defaultScListPrice:
|
|
18
|
-
isClubClient:
|
|
14
|
+
hasPromotionalPrice: l,
|
|
15
|
+
clubPrice: m,
|
|
16
|
+
outOfStock: s,
|
|
17
|
+
variant: c,
|
|
18
|
+
defaultScListPrice: u,
|
|
19
|
+
isClubClient: f,
|
|
19
20
|
addToCartButton: C,
|
|
20
|
-
openModal:
|
|
21
|
+
openModal: g
|
|
21
22
|
}) => {
|
|
22
|
-
var
|
|
23
|
-
return /* @__PURE__ */
|
|
23
|
+
var o;
|
|
24
|
+
return /* @__PURE__ */ t(
|
|
24
25
|
"div",
|
|
25
26
|
{
|
|
26
27
|
className: "product-card-ui-horizontal",
|
|
27
28
|
style: {
|
|
28
|
-
backgroundColor:
|
|
29
|
+
backgroundColor: s ? "var(--color-grayScale-faded" : "#fff"
|
|
29
30
|
},
|
|
30
31
|
children: [
|
|
31
|
-
/* @__PURE__ */
|
|
32
|
+
/* @__PURE__ */ t(
|
|
32
33
|
"div",
|
|
33
34
|
{
|
|
34
|
-
onClick:
|
|
35
|
+
onClick: g,
|
|
35
36
|
className: "product-card-ui-section-product-horizontal",
|
|
36
37
|
children: [
|
|
37
38
|
/* @__PURE__ */ r(
|
|
38
39
|
v,
|
|
39
40
|
{
|
|
40
41
|
isClubClient: !0,
|
|
41
|
-
variant:
|
|
42
|
-
hasPlusFriendBadge:
|
|
43
|
-
promotion:
|
|
44
|
-
image: (
|
|
42
|
+
variant: c,
|
|
43
|
+
hasPlusFriendBadge: a,
|
|
44
|
+
promotion: e,
|
|
45
|
+
image: (o = i.image) == null ? void 0 : o[0]
|
|
45
46
|
}
|
|
46
47
|
),
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
+
/* @__PURE__ */ t(
|
|
48
49
|
"div",
|
|
49
50
|
{
|
|
50
51
|
className: "product-card-ui-horizontal-description",
|
|
51
52
|
style: {
|
|
52
|
-
backgroundColor:
|
|
53
|
+
backgroundColor: f && !s ? "var(--color-secondary-faded)" : "var(--color-grayScale-lightest)"
|
|
53
54
|
},
|
|
54
55
|
children: [
|
|
55
|
-
/* @__PURE__ */ r(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
/* @__PURE__ */ r(x, { name: i.name }),
|
|
57
|
+
s ? /* @__PURE__ */ r(n, {}) : (
|
|
58
|
+
// <>
|
|
59
|
+
// <ProductCardUiPromotionFlag
|
|
60
|
+
// variant={variant}
|
|
61
|
+
// productSectionBadge={productSectionBadge}
|
|
62
|
+
// />
|
|
63
|
+
// <div className="product-card-ui-section-badge-horizontal">
|
|
64
|
+
// <ProductCardUiBadgeKg unitMultiplier={ } skuSpecifications={undefined} measurementUnit={undefined} />{' '}
|
|
65
|
+
// <ProductCardDiscountBadge skuSpecifications={undefined} unitMultiplier={0} hasPromotionalPrice={undefined} />
|
|
66
|
+
// </div>
|
|
67
|
+
// <ProductCardPrice
|
|
68
|
+
// clubPrice={undefined}
|
|
69
|
+
// oldPrice={undefined}
|
|
70
|
+
// newPrice={undefined} skuSpecifications={undefined} customOffers={{
|
|
71
|
+
// hasDiscount: false,
|
|
72
|
+
// listPriceCustom: undefined,
|
|
73
|
+
// spotPriceCustom: undefined,
|
|
74
|
+
// spotPriceKg: undefined
|
|
75
|
+
// }} measurementUnit={''} hasPromotionalPrice={undefined} unitMultiplier={0} />
|
|
76
|
+
// </>
|
|
77
|
+
/* @__PURE__ */ t(n, { children: [
|
|
78
|
+
c === "horizontal" && /* @__PURE__ */ r(
|
|
79
|
+
U,
|
|
80
|
+
{
|
|
81
|
+
variant: c,
|
|
82
|
+
productSectionBadge: {
|
|
83
|
+
text: e == null ? void 0 : e.flagText,
|
|
84
|
+
color: {
|
|
85
|
+
textColor: e == null ? void 0 : e.textColor,
|
|
86
|
+
backGroundColor: e == null ? void 0 : e.colorCode
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
),
|
|
91
|
+
/* @__PURE__ */ t("div", { className: "product-card-ui-section-badge-horizontal", children: [
|
|
92
|
+
/* @__PURE__ */ r(
|
|
93
|
+
P,
|
|
94
|
+
{
|
|
95
|
+
unitMultiplier: i.unitMultiplier,
|
|
96
|
+
skuSpecifications: i.skuSpecifications,
|
|
97
|
+
measurementUnit: i.measurementUnit
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
/* @__PURE__ */ r(
|
|
101
|
+
h,
|
|
102
|
+
{
|
|
103
|
+
defaultScListPrice: u,
|
|
104
|
+
nativeListPrice: i.customOffers.listPriceCustom,
|
|
105
|
+
nativeSpotPrice: i.customOffers.spotPriceCustom,
|
|
106
|
+
skuSpecifications: i.skuSpecifications,
|
|
107
|
+
unitMultiplier: i.unitMultiplier,
|
|
108
|
+
hasPromotionalPrice: l
|
|
109
|
+
}
|
|
110
|
+
)
|
|
111
|
+
] }),
|
|
59
112
|
/* @__PURE__ */ r(
|
|
60
|
-
|
|
113
|
+
S,
|
|
61
114
|
{
|
|
62
|
-
defaultScListPrice: a,
|
|
63
|
-
nativeListPrice: i.customOffers.listPriceCustom,
|
|
64
|
-
nativeSpotPrice: i.customOffers.spotPriceCustom,
|
|
65
|
-
skuSpecifications: i.skuSpecifications,
|
|
66
115
|
unitMultiplier: i.unitMultiplier,
|
|
67
|
-
hasPromotionalPrice:
|
|
116
|
+
hasPromotionalPrice: l,
|
|
117
|
+
isMobile: d,
|
|
118
|
+
measurementUnit: i.measurementUnit,
|
|
119
|
+
skuSpecifications: i.skuSpecifications,
|
|
120
|
+
customOffers: {
|
|
121
|
+
listPriceCustom: i.customOffers.listPriceCustom,
|
|
122
|
+
hasDiscount: i.customOffers.hasDiscount,
|
|
123
|
+
spotPriceCustom: i.customOffers.spotPriceCustom,
|
|
124
|
+
spotPriceKg: i.customOffers.spotPriceCustom
|
|
125
|
+
},
|
|
126
|
+
defaultScListPrice: u,
|
|
127
|
+
clubPrice: m,
|
|
128
|
+
hasPlusFriendBadge: a
|
|
68
129
|
}
|
|
69
130
|
)
|
|
70
|
-
] })
|
|
71
|
-
|
|
72
|
-
M,
|
|
73
|
-
{
|
|
74
|
-
unitMultiplier: i.unitMultiplier,
|
|
75
|
-
hasPromotionalPrice: o,
|
|
76
|
-
isMobile: m,
|
|
77
|
-
measurementUnit: i.measurementUnit,
|
|
78
|
-
skuSpecifications: i.skuSpecifications,
|
|
79
|
-
customOffers: {
|
|
80
|
-
listPriceCustom: i.customOffers.listPriceCustom,
|
|
81
|
-
hasDiscount: i.customOffers.hasDiscount,
|
|
82
|
-
spotPriceCustom: i.customOffers.spotPriceCustom,
|
|
83
|
-
spotPriceKg: i.customOffers.spotPriceCustom
|
|
84
|
-
},
|
|
85
|
-
defaultScListPrice: a,
|
|
86
|
-
clubPrice: l,
|
|
87
|
-
hasPlusFriendBadge: s
|
|
88
|
-
}
|
|
89
|
-
)
|
|
90
|
-
] })
|
|
131
|
+
] })
|
|
132
|
+
)
|
|
91
133
|
]
|
|
92
134
|
}
|
|
93
135
|
)
|
|
94
136
|
]
|
|
95
137
|
}
|
|
96
138
|
),
|
|
97
|
-
/* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
|
|
139
|
+
/* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(k, { children: C }) })
|
|
98
140
|
]
|
|
99
141
|
}
|
|
100
142
|
);
|
|
101
143
|
};
|
|
102
144
|
export {
|
|
103
|
-
|
|
145
|
+
D as ProductCardUiHorizontal
|
|
104
146
|
};
|
|
@@ -10,5 +10,5 @@ interface ProductCardImageProps {
|
|
|
10
10
|
alternateName: string;
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
-
export declare const ProductCardImage: ({ isClubClient, variant, hasPlusFriendBadge, image, promotion
|
|
13
|
+
export declare const ProductCardImage: ({ isClubClient, variant, hasPlusFriendBadge, image, promotion }: ProductCardImageProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export {};
|
|
@@ -2,29 +2,29 @@ import { jsxs as l, jsx as o } from "react/jsx-runtime";
|
|
|
2
2
|
import { ProductCardUiPromotionFlag as d } from "../ProductCardUiPromotionFlag/ProductCardUiPromotionFlag.js";
|
|
3
3
|
/* empty css */import { ClubBadge as i } from "../../../assets/svgs/ClubBadge.js";
|
|
4
4
|
const n = ({
|
|
5
|
-
isClubClient:
|
|
6
|
-
variant:
|
|
5
|
+
isClubClient: a,
|
|
6
|
+
variant: e,
|
|
7
7
|
hasPlusFriendBadge: c,
|
|
8
|
-
image:
|
|
8
|
+
image: t,
|
|
9
9
|
promotion: r
|
|
10
10
|
}) => /* @__PURE__ */ l("div", { className: "product-card-image-container", children: [
|
|
11
|
-
!
|
|
11
|
+
!a && c && /* @__PURE__ */ o(
|
|
12
12
|
"div",
|
|
13
13
|
{
|
|
14
|
-
className: `product-club-badge ${
|
|
14
|
+
className: `product-club-badge ${e === "horizontal" && "horizontal"}`,
|
|
15
15
|
children: /* @__PURE__ */ o(i, {})
|
|
16
16
|
}
|
|
17
17
|
),
|
|
18
|
-
/* @__PURE__ */ o("img", { className: "image", src:
|
|
19
|
-
r && /* @__PURE__ */ o(
|
|
18
|
+
/* @__PURE__ */ o("img", { className: "image", src: t.url, alt: t.alternateName }),
|
|
19
|
+
r && e === "vertical" && /* @__PURE__ */ o(
|
|
20
20
|
d,
|
|
21
21
|
{
|
|
22
|
-
variant:
|
|
22
|
+
variant: e,
|
|
23
23
|
productSectionBadge: {
|
|
24
24
|
text: r.flagText,
|
|
25
25
|
color: {
|
|
26
|
-
textColor: r.
|
|
27
|
-
backGroundColor: r.
|
|
26
|
+
textColor: r.textColor,
|
|
27
|
+
backGroundColor: r.colorCode
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { NewProductCardUIProps } from '../../../types/ProductCardUi';
|
|
2
2
|
|
|
3
|
-
export declare const ProductCardUiVertical: ({ isMobile, hasPlusFriendBadge, promotion, product, hasPromotionalPrice, clubPrice, outOfStock, variant, defaultScListPrice, isClubClient, addToCartButton, openModal
|
|
3
|
+
export declare const ProductCardUiVertical: ({ isMobile, hasPlusFriendBadge, promotion, product, hasPromotionalPrice, clubPrice, outOfStock, variant, defaultScListPrice, isClubClient, addToCartButton, openModal }: NewProductCardUIProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -54,7 +54,14 @@ const D = ({
|
|
|
54
54
|
children: [
|
|
55
55
|
/* @__PURE__ */ e(U, { name: i.name }),
|
|
56
56
|
/* @__PURE__ */ s("div", { className: "product-card-ui-section-badge", children: [
|
|
57
|
-
/* @__PURE__ */ e(
|
|
57
|
+
/* @__PURE__ */ e(
|
|
58
|
+
P,
|
|
59
|
+
{
|
|
60
|
+
unitMultiplier: i.unitMultiplier,
|
|
61
|
+
skuSpecifications: i.skuSpecifications,
|
|
62
|
+
measurementUnit: i.measurementUnit
|
|
63
|
+
}
|
|
64
|
+
),
|
|
58
65
|
/* @__PURE__ */ e(
|
|
59
66
|
p,
|
|
60
67
|
{
|
package/dist/styles/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.product-card-
|
|
1
|
+
.product-card-badge{display:flex;gap:4px}.product-card-badge-kg{width:fit-content;height:16px;padding:2px 4px;border-radius:2px;background-color:var(--color-main);color:var(--color-grayScale-white);font-family:DM Sans;font-weight:700;font-size:10px;line-height:13px;text-align:center;vertical-align:middle}.product-card-ui-discount-badge{width:42px;height:16px;border-radius:2px;background-color:var(--color-badge-main);display:flex;align-items:center;justify-content:center}.product-card-ui-discount-badge-value{font-family:DM Sans;font-weight:700;font-size:12px;line-height:16px;color:var(--color-badge-secondary)}
|
package/dist/styles/styles3.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.product-card-
|
|
1
|
+
.product-card-button{font-family:DM Sans;width:100%;padding:14px 0;display:flex;justify-content:center;align-items:center;background-color:var(--color-main);color:var(--color-grayScale-white);font-weight:700;font-size:12px;line-height:20px;border:none;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.product-card-button.unavailable{background-color:var(--color-grayScale-lightest);color:#545454;cursor:not-allowed}.product-card-ui-button{width:100%;border:none;padding:0;height:48px;justify-content:space-between}.product-card-ui-button .button{border-bottom-left-radius:8px;border-bottom-right-radius:8px;padding:12px;max-height:unset;font-size:20px;line-height:24px}@media (min-width: 769px){.product-card-button{font-size:20px;line-height:24px}}
|
package/dist/styles/styles5.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.product-card-
|
|
1
|
+
.product-card-name{min-height:36px;font-family:DM Sans;font-weight:400;font-size:14px;line-height:18px;vertical-align:middle;color:#545454;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media screen{.product-card-name{height:40px;font-size:16px;line-height:20px}}
|
package/dist/styles/styles6.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.product-card-
|
|
1
|
+
.product-card-see-more{width:162px;height:100%;border-radius:8px;display:flex;justify-content:center;align-items:center;flex-direction:column;justify-content:space-between;border:1px solid var(--color-grayScale-lightest)}.product-card-see-more-text{margin-top:74px;padding:0 16px;font-family:DM Sans;font-weight:400;font-size:16px;line-height:20px;color:#1c1c1c}.product-card-see-more-text span{display:block;width:100%;font-weight:700;font-size:24px;line-height:28px}.product-card-see-more-link{width:100%;background-color:var(--color-main);padding:14px 0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;font-family:DM Sans;font-weight:700;font-size:16px;line-height:20px;letter-spacing:0%;text-align:center;vertical-align:middle;color:var(--color-grayScale-white);text-decoration:none}@media (min-width: 769px){.product-card-see-more{width:226px}.product-card-see-more-link{font-size:20px;line-height:24px}.product-card-see-more-text span{font-size:32px;line-height:36px}}
|