@drawbridge/components 0.0.34 → 0.0.36

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.
Files changed (3) hide show
  1. package/dist/card-advertisement.js +62 -14
  2. package/dist/card-advertisement.mjs +62 -14
  3. package/package.json +1 -1
package/dist/card-advertisement.js CHANGED
@@ -25,6 +25,7 @@ module.exports = __toCommonJS(card_advertisement_exports);
25
25
  var import_react = require("react");
26
26
  var import_cdn = require("@drawbridge/shopify/cdn");
27
27
  var import_cdn2 = require("@drawbridge/drawbridge-utils/cdn");
28
+ var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
28
29
  var import_jsx_runtime = require("react/jsx-runtime");
29
30
  var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
30
31
  "img",
@@ -68,7 +69,7 @@ var CardAdvertisement = ({
68
69
  url,
69
70
  VideoComponent = DefaultVideo
70
71
  }) => {
71
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
72
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
72
73
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
73
74
  const hasVariants = variants.length > 0;
74
75
  const [selectedVariant, setSelectedVariant] = (0, import_react.useState)(variants[0] || null);
@@ -92,14 +93,14 @@ var CardAdvertisement = ({
92
93
  ],
93
94
  button: [
94
95
  "card-advertisement-button",
95
- "flex items-center justify-center py-2 px-3 rounded shrink-0"
96
+ "flex items-center justify-center py-3 px-4 w-full border"
96
97
  ],
97
98
  container: [
98
99
  "card-advertisement",
99
100
  "block w-full space-y-2 border border-gray rounded p-6"
100
101
  ],
101
102
  content: [
102
- "flex items-center justify-between space-x-4 text-left text-sm p-4 rounded"
103
+ "flex flex-col items-center justify-between space-x-4 text-left text-sm rounded"
103
104
  ]
104
105
  };
105
106
  const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
@@ -133,12 +134,12 @@ var CardAdvertisement = ({
133
134
  alt: asset == null ? void 0 : asset.filename,
134
135
  className: "w-full h-full object-cover",
135
136
  fill: true,
136
- key: asset == null ? void 0 : asset.id,
137
137
  priority: false,
138
138
  sizes: "100%",
139
139
  src: (0, import_cdn2.cdnSrc)(asset, "400x400", asset == null ? void 0 : asset.updatedAt)
140
140
  }
141
- }
141
+ },
142
+ asset == null ? void 0 : asset.id
142
143
  ),
143
144
  !(asset == null ? void 0 : asset.sizes) && productImageSrc && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
144
145
  ImageComponent,
@@ -147,13 +148,13 @@ var CardAdvertisement = ({
147
148
  alt: (product == null ? void 0 : product.title) || "Product",
148
149
  className: "w-full h-full object-cover",
149
150
  fill: true,
150
- key: productImageSrc,
151
151
  priority: false,
152
152
  sizes: "100%",
153
153
  src: productImageSrc,
154
154
  unoptimized: true
155
155
  }
156
- }
156
+ },
157
+ productImageSrc
157
158
  ),
158
159
  (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
159
160
  "div",
@@ -184,8 +185,8 @@ var CardAdvertisement = ({
184
185
  className: classes.content.join(" "),
185
186
  style: {
186
187
  ...fonts == null ? void 0 : fonts.body,
187
- backgroundColor: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
188
- color: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.hex
188
+ color: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
189
+ gap: "10px"
189
190
  }
190
191
  },
191
192
  children: [
@@ -196,18 +197,63 @@ var CardAdvertisement = ({
196
197
  className: "flex-1 min-w-0 space-y-2"
197
198
  },
198
199
  children: [
199
- title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
200
+ title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
201
+ "p",
202
+ {
203
+ ...{
204
+ style: {
205
+ fontSize: "18px"
206
+ }
207
+ },
208
+ children: title
209
+ }
210
+ ),
211
+ (selectedVariant == null ? void 0 : selectedVariant.price) && (selectedVariant == null ? void 0 : selectedVariant.currency) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
212
+ "p",
213
+ {
214
+ ...{
215
+ style: {
216
+ fontSize: "14px"
217
+ }
218
+ },
219
+ children: [
220
+ (selectedVariant == null ? void 0 : selectedVariant.sale) && selectedVariant.sale > selectedVariant.price && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
221
+ "span",
222
+ {
223
+ ...{
224
+ style: {
225
+ marginRight: "6px",
226
+ opacity: 0.5,
227
+ textDecoration: "line-through"
228
+ }
229
+ },
230
+ children: (0, import_drawbridge_utils.formatCurrency)({
231
+ code: selectedVariant.currency,
232
+ display: "parts",
233
+ value: selectedVariant.sale
234
+ })
235
+ }
236
+ ),
237
+ (0, import_drawbridge_utils.formatCurrency)({
238
+ code: selectedVariant.currency,
239
+ display: "parts",
240
+ value: selectedVariant.price
241
+ })
242
+ ]
243
+ }
244
+ ),
200
245
  variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
201
246
  "select",
202
247
  {
203
248
  ...{
204
- className: "w-full text-xs rounded border px-2 py-1 bg-transparent",
249
+ className: "w-full text-xs border px-2 py-1 bg-transparent",
205
250
  onChange: (e) => {
206
251
  const variant = variants.find((v) => v.id === e.target.value);
207
252
  if (variant) setSelectedVariant(variant);
208
253
  },
209
254
  style: {
210
- borderColor: (_p = (_o = style == null ? void 0 : style.background) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb.replace(")", ", 0.3)"),
255
+ borderColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb.replace(")", ", 0.3)"),
256
+ borderRadius: ((_p = (_o = brand == null ? void 0 : brand.style) == null ? void 0 : _o.button) == null ? void 0 : _p.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
211
257
  color: (_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.hex
212
258
  },
213
259
  value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
@@ -238,8 +284,10 @@ var CardAdvertisement = ({
238
284
  } : preview ? () => {
239
285
  } : onClick,
240
286
  style: {
241
- backgroundColor: (_t = (_s = style == null ? void 0 : style.background) == null ? void 0 : _s.color) == null ? void 0 : _t.hex,
242
- color: (_v = (_u = style == null ? void 0 : style.text) == null ? void 0 : _u.color) == null ? void 0 : _v.hex
287
+ backgroundColor: ((_v = (_u = (_t = (_s = brand == null ? void 0 : brand.style) == null ? void 0 : _s.button) == null ? void 0 : _t.background) == null ? void 0 : _u.color) == null ? void 0 : _v.hex) || ((_x = (_w = style == null ? void 0 : style.text) == null ? void 0 : _w.color) == null ? void 0 : _x.hex),
288
+ borderColor: ((_B = (_A = (_z = (_y = brand == null ? void 0 : brand.style) == null ? void 0 : _y.button) == null ? void 0 : _z.background) == null ? void 0 : _A.color) == null ? void 0 : _B.hex) || ((_D = (_C = style == null ? void 0 : style.text) == null ? void 0 : _C.color) == null ? void 0 : _D.hex),
289
+ borderRadius: ((_F = (_E = brand == null ? void 0 : brand.style) == null ? void 0 : _E.button) == null ? void 0 : _F.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
290
+ color: ((_J = (_I = (_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.text) == null ? void 0 : _I.color) == null ? void 0 : _J.hex) || ((_L = (_K = style == null ? void 0 : style.background) == null ? void 0 : _K.color) == null ? void 0 : _L.hex)
243
291
  },
244
292
  type: "button"
245
293
  },
package/dist/card-advertisement.mjs CHANGED
@@ -2,6 +2,7 @@
2
2
  import { useState } from "react";
3
3
  import { cdnShopify } from "@drawbridge/shopify/cdn";
4
4
  import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
5
+ import { formatCurrency } from "@drawbridge/drawbridge-utils";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
6
7
  var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ jsx(
7
8
  "img",
@@ -45,7 +46,7 @@ var CardAdvertisement = ({
45
46
  url,
46
47
  VideoComponent = DefaultVideo
47
48
  }) => {
48
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
49
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
49
50
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
50
51
  const hasVariants = variants.length > 0;
51
52
  const [selectedVariant, setSelectedVariant] = useState(variants[0] || null);
@@ -69,14 +70,14 @@ var CardAdvertisement = ({
69
70
  ],
70
71
  button: [
71
72
  "card-advertisement-button",
72
- "flex items-center justify-center py-2 px-3 rounded shrink-0"
73
+ "flex items-center justify-center py-3 px-4 w-full border"
73
74
  ],
74
75
  container: [
75
76
  "card-advertisement",
76
77
  "block w-full space-y-2 border border-gray rounded p-6"
77
78
  ],
78
79
  content: [
79
- "flex items-center justify-between space-x-4 text-left text-sm p-4 rounded"
80
+ "flex flex-col items-center justify-between space-x-4 text-left text-sm rounded"
80
81
  ]
81
82
  };
82
83
  const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
@@ -110,12 +111,12 @@ var CardAdvertisement = ({
110
111
  alt: asset == null ? void 0 : asset.filename,
111
112
  className: "w-full h-full object-cover",
112
113
  fill: true,
113
- key: asset == null ? void 0 : asset.id,
114
114
  priority: false,
115
115
  sizes: "100%",
116
116
  src: cdnSrc(asset, "400x400", asset == null ? void 0 : asset.updatedAt)
117
117
  }
118
- }
118
+ },
119
+ asset == null ? void 0 : asset.id
119
120
  ),
120
121
  !(asset == null ? void 0 : asset.sizes) && productImageSrc && /* @__PURE__ */ jsx(
121
122
  ImageComponent,
@@ -124,13 +125,13 @@ var CardAdvertisement = ({
124
125
  alt: (product == null ? void 0 : product.title) || "Product",
125
126
  className: "w-full h-full object-cover",
126
127
  fill: true,
127
- key: productImageSrc,
128
128
  priority: false,
129
129
  sizes: "100%",
130
130
  src: productImageSrc,
131
131
  unoptimized: true
132
132
  }
133
- }
133
+ },
134
+ productImageSrc
134
135
  ),
135
136
  (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ jsx(
136
137
  "div",
@@ -161,8 +162,8 @@ var CardAdvertisement = ({
161
162
  className: classes.content.join(" "),
162
163
  style: {
163
164
  ...fonts == null ? void 0 : fonts.body,
164
- backgroundColor: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
165
- color: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.hex
165
+ color: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
166
+ gap: "10px"
166
167
  }
167
168
  },
168
169
  children: [
@@ -173,18 +174,63 @@ var CardAdvertisement = ({
173
174
  className: "flex-1 min-w-0 space-y-2"
174
175
  },
175
176
  children: [
176
- title && /* @__PURE__ */ jsx("p", { children: title }),
177
+ title && /* @__PURE__ */ jsx(
178
+ "p",
179
+ {
180
+ ...{
181
+ style: {
182
+ fontSize: "18px"
183
+ }
184
+ },
185
+ children: title
186
+ }
187
+ ),
188
+ (selectedVariant == null ? void 0 : selectedVariant.price) && (selectedVariant == null ? void 0 : selectedVariant.currency) && /* @__PURE__ */ jsxs(
189
+ "p",
190
+ {
191
+ ...{
192
+ style: {
193
+ fontSize: "14px"
194
+ }
195
+ },
196
+ children: [
197
+ (selectedVariant == null ? void 0 : selectedVariant.sale) && selectedVariant.sale > selectedVariant.price && /* @__PURE__ */ jsx(
198
+ "span",
199
+ {
200
+ ...{
201
+ style: {
202
+ marginRight: "6px",
203
+ opacity: 0.5,
204
+ textDecoration: "line-through"
205
+ }
206
+ },
207
+ children: formatCurrency({
208
+ code: selectedVariant.currency,
209
+ display: "parts",
210
+ value: selectedVariant.sale
211
+ })
212
+ }
213
+ ),
214
+ formatCurrency({
215
+ code: selectedVariant.currency,
216
+ display: "parts",
217
+ value: selectedVariant.price
218
+ })
219
+ ]
220
+ }
221
+ ),
177
222
  variants.length > 1 && /* @__PURE__ */ jsx(
178
223
  "select",
179
224
  {
180
225
  ...{
181
- className: "w-full text-xs rounded border px-2 py-1 bg-transparent",
226
+ className: "w-full text-xs border px-2 py-1 bg-transparent",
182
227
  onChange: (e) => {
183
228
  const variant = variants.find((v) => v.id === e.target.value);
184
229
  if (variant) setSelectedVariant(variant);
185
230
  },
186
231
  style: {
187
- borderColor: (_p = (_o = style == null ? void 0 : style.background) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb.replace(")", ", 0.3)"),
232
+ borderColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb.replace(")", ", 0.3)"),
233
+ borderRadius: ((_p = (_o = brand == null ? void 0 : brand.style) == null ? void 0 : _o.button) == null ? void 0 : _p.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
188
234
  color: (_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.hex
189
235
  },
190
236
  value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
@@ -215,8 +261,10 @@ var CardAdvertisement = ({
215
261
  } : preview ? () => {
216
262
  } : onClick,
217
263
  style: {
218
- backgroundColor: (_t = (_s = style == null ? void 0 : style.background) == null ? void 0 : _s.color) == null ? void 0 : _t.hex,
219
- color: (_v = (_u = style == null ? void 0 : style.text) == null ? void 0 : _u.color) == null ? void 0 : _v.hex
264
+ backgroundColor: ((_v = (_u = (_t = (_s = brand == null ? void 0 : brand.style) == null ? void 0 : _s.button) == null ? void 0 : _t.background) == null ? void 0 : _u.color) == null ? void 0 : _v.hex) || ((_x = (_w = style == null ? void 0 : style.text) == null ? void 0 : _w.color) == null ? void 0 : _x.hex),
265
+ borderColor: ((_B = (_A = (_z = (_y = brand == null ? void 0 : brand.style) == null ? void 0 : _y.button) == null ? void 0 : _z.background) == null ? void 0 : _A.color) == null ? void 0 : _B.hex) || ((_D = (_C = style == null ? void 0 : style.text) == null ? void 0 : _C.color) == null ? void 0 : _D.hex),
266
+ borderRadius: ((_F = (_E = brand == null ? void 0 : brand.style) == null ? void 0 : _E.button) == null ? void 0 : _F.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
267
+ color: ((_J = (_I = (_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.text) == null ? void 0 : _I.color) == null ? void 0 : _J.hex) || ((_L = (_K = style == null ? void 0 : style.background) == null ? void 0 : _K.color) == null ? void 0 : _L.hex)
220
268
  },
221
269
  type: "button"
222
270
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drawbridge/components",
3
- "version": "0.0.34",
3
+ "version": "0.0.36",
4
4
  "exports": {
5
5
  "./card-advertisement": {
6
6
  "types": "./types/card-advertisement.d.ts",