@drawbridge/components 0.0.4 → 0.0.7

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 +44 -23
  2. package/dist/card-advertisement.mjs +44 -23
  3. package/package.json +1 -1
package/dist/card-advertisement.js CHANGED
@@ -55,32 +55,43 @@ var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ (0, impo
55
55
  }
56
56
  );
57
57
  var CardAdvertisement = ({
58
+ advertisement,
59
+ affiliate,
58
60
  asset,
59
61
  brand = {},
60
62
  button,
61
63
  campaign,
62
64
  fonts,
63
65
  ImageComponent = DefaultImage,
66
+ lead,
64
67
  onClick = () => {
65
68
  },
66
69
  organization,
70
+ page,
67
71
  preview = false,
68
72
  product,
69
73
  title,
70
74
  url,
71
75
  VideoComponent = DefaultVideo
72
76
  }) => {
73
- 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;
77
+ 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;
74
78
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
75
79
  const hasVariants = variants.length > 1;
76
80
  const [variantsOpen, setVariantsOpen] = (0, import_react.useState)(false);
77
81
  const variantUrl = (variant) => {
82
+ var _a2;
78
83
  const variantShopifyId = (variant.shopifyId || "").split("/").pop();
79
84
  const domain = (product == null ? void 0 : product.url) ? new URL(product.url).hostname : null;
80
85
  if (!domain || !variantShopifyId) return null;
81
86
  const params = [
82
- ...campaign ? ["attributes[drwbrdg_c]=" + campaign] : [],
83
- ...organization ? ["attributes[drwbrdg_o]=" + organization] : []
87
+ ...campaign ? ["attributes[drwbrdg_ca]=" + campaign] : [],
88
+ ...organization ? ["attributes[drwbrdg_or]=" + organization] : [],
89
+ ...advertisement ? ["attributes[drwbrdg_ad]=" + advertisement] : [],
90
+ ...affiliate ? ["attributes[drwbrdg_af]=" + affiliate] : [],
91
+ ...page ? ["attributes[drwbrdg_pg]=" + page] : [],
92
+ ...(lead == null ? void 0 : lead.email) ? ["checkout[email]=" + encodeURIComponent(lead.email)] : [],
93
+ ...(lead == null ? void 0 : lead.name) ? ["checkout[shipping_address][first_name]=" + encodeURIComponent(lead.name)] : [],
94
+ ...((_a2 = lead == null ? void 0 : lead.phone) == null ? void 0 : _a2.number) ? ["checkout[shipping_address][phone]=" + encodeURIComponent(lead.phone.number)] : []
84
95
  ].join("&");
85
96
  return "https://" + domain + "/cart/" + variantShopifyId + ":1" + (params ? "?" + params : "");
86
97
  };
@@ -192,7 +203,7 @@ var CardAdvertisement = ({
192
203
  ...{
193
204
  className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
194
205
  style: {
195
- backgroundColor: "rgba(0,0,0,0.92)",
206
+ backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.rgb.replace(")", ", 0.92)"),
196
207
  transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
197
208
  }
198
209
  },
@@ -201,7 +212,10 @@ var CardAdvertisement = ({
201
212
  "p",
202
213
  {
203
214
  ...{
204
- className: "text-xs text-white/60"
215
+ className: "text-xs",
216
+ style: {
217
+ color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.rgb.replace(")", ", 0.6)")
218
+ }
205
219
  },
206
220
  children: "Select an option"
207
221
  }
@@ -212,22 +226,29 @@ var CardAdvertisement = ({
212
226
  ...{
213
227
  className: "flex flex-wrap gap-2"
214
228
  },
215
- children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
216
- "button",
217
- {
218
- ...{
219
- className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
220
- onClick: () => {
221
- if (preview) return;
222
- const href = variantUrl(variant);
223
- if (href) window.open(href, "_blank");
229
+ children: variants.map((variant) => {
230
+ var _a2, _b2, _c2, _d2;
231
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
232
+ "button",
233
+ {
234
+ ...{
235
+ className: "text-xs px-3 py-1.5 rounded border transition-colors",
236
+ onClick: () => {
237
+ if (preview) return;
238
+ const href = variantUrl(variant);
239
+ if (href) window.open(href, "_blank");
240
+ },
241
+ style: {
242
+ borderColor: (_b2 = (_a2 = style == null ? void 0 : style.background) == null ? void 0 : _a2.color) == null ? void 0 : _b2.rgb.replace(")", ", 0.3)"),
243
+ color: (_d2 = (_c2 = style == null ? void 0 : style.background) == null ? void 0 : _c2.color) == null ? void 0 : _d2.hex
244
+ },
245
+ type: "button"
224
246
  },
225
- type: "button"
247
+ children: variant.title
226
248
  },
227
- children: variant.title
228
- },
229
- variant.shopifyId
230
- ))
249
+ variant.shopifyId
250
+ );
251
+ })
231
252
  }
232
253
  )
233
254
  ]
@@ -243,8 +264,8 @@ var CardAdvertisement = ({
243
264
  className: classes.content.join(" "),
244
265
  style: {
245
266
  ...fonts == null ? void 0 : fonts.body,
246
- backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
247
- color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
267
+ backgroundColor: (_w = (_v = style == null ? void 0 : style.text) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
268
+ color: (_y = (_x = style == null ? void 0 : style.background) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
248
269
  }
249
270
  },
250
271
  children: [
@@ -258,8 +279,8 @@ var CardAdvertisement = ({
258
279
  onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
259
280
  } : onClick,
260
281
  style: {
261
- backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
262
- color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
282
+ backgroundColor: (_A = (_z = style == null ? void 0 : style.background) == null ? void 0 : _z.color) == null ? void 0 : _A.hex,
283
+ color: (_C = (_B = style == null ? void 0 : style.text) == null ? void 0 : _B.color) == null ? void 0 : _C.hex
263
284
  },
264
285
  type: "button"
265
286
  },
package/dist/card-advertisement.mjs CHANGED
@@ -22,32 +22,43 @@ var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ jsx(
22
22
  }
23
23
  );
24
24
  var CardAdvertisement = ({
25
+ advertisement,
26
+ affiliate,
25
27
  asset,
26
28
  brand = {},
27
29
  button,
28
30
  campaign,
29
31
  fonts,
30
32
  ImageComponent = DefaultImage,
33
+ lead,
31
34
  onClick = () => {
32
35
  },
33
36
  organization,
37
+ page,
34
38
  preview = false,
35
39
  product,
36
40
  title,
37
41
  url,
38
42
  VideoComponent = DefaultVideo
39
43
  }) => {
40
- 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;
44
+ 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;
41
45
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
42
46
  const hasVariants = variants.length > 1;
43
47
  const [variantsOpen, setVariantsOpen] = useState(false);
44
48
  const variantUrl = (variant) => {
49
+ var _a2;
45
50
  const variantShopifyId = (variant.shopifyId || "").split("/").pop();
46
51
  const domain = (product == null ? void 0 : product.url) ? new URL(product.url).hostname : null;
47
52
  if (!domain || !variantShopifyId) return null;
48
53
  const params = [
49
- ...campaign ? ["attributes[drwbrdg_c]=" + campaign] : [],
50
- ...organization ? ["attributes[drwbrdg_o]=" + organization] : []
54
+ ...campaign ? ["attributes[drwbrdg_ca]=" + campaign] : [],
55
+ ...organization ? ["attributes[drwbrdg_or]=" + organization] : [],
56
+ ...advertisement ? ["attributes[drwbrdg_ad]=" + advertisement] : [],
57
+ ...affiliate ? ["attributes[drwbrdg_af]=" + affiliate] : [],
58
+ ...page ? ["attributes[drwbrdg_pg]=" + page] : [],
59
+ ...(lead == null ? void 0 : lead.email) ? ["checkout[email]=" + encodeURIComponent(lead.email)] : [],
60
+ ...(lead == null ? void 0 : lead.name) ? ["checkout[shipping_address][first_name]=" + encodeURIComponent(lead.name)] : [],
61
+ ...((_a2 = lead == null ? void 0 : lead.phone) == null ? void 0 : _a2.number) ? ["checkout[shipping_address][phone]=" + encodeURIComponent(lead.phone.number)] : []
51
62
  ].join("&");
52
63
  return "https://" + domain + "/cart/" + variantShopifyId + ":1" + (params ? "?" + params : "");
53
64
  };
@@ -159,7 +170,7 @@ var CardAdvertisement = ({
159
170
  ...{
160
171
  className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
161
172
  style: {
162
- backgroundColor: "rgba(0,0,0,0.92)",
173
+ backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.rgb.replace(")", ", 0.92)"),
163
174
  transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
164
175
  }
165
176
  },
@@ -168,7 +179,10 @@ var CardAdvertisement = ({
168
179
  "p",
169
180
  {
170
181
  ...{
171
- className: "text-xs text-white/60"
182
+ className: "text-xs",
183
+ style: {
184
+ color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.rgb.replace(")", ", 0.6)")
185
+ }
172
186
  },
173
187
  children: "Select an option"
174
188
  }
@@ -179,22 +193,29 @@ var CardAdvertisement = ({
179
193
  ...{
180
194
  className: "flex flex-wrap gap-2"
181
195
  },
182
- children: variants.map((variant) => /* @__PURE__ */ jsx(
183
- "button",
184
- {
185
- ...{
186
- className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
187
- onClick: () => {
188
- if (preview) return;
189
- const href = variantUrl(variant);
190
- if (href) window.open(href, "_blank");
196
+ children: variants.map((variant) => {
197
+ var _a2, _b2, _c2, _d2;
198
+ return /* @__PURE__ */ jsx(
199
+ "button",
200
+ {
201
+ ...{
202
+ className: "text-xs px-3 py-1.5 rounded border transition-colors",
203
+ onClick: () => {
204
+ if (preview) return;
205
+ const href = variantUrl(variant);
206
+ if (href) window.open(href, "_blank");
207
+ },
208
+ style: {
209
+ borderColor: (_b2 = (_a2 = style == null ? void 0 : style.background) == null ? void 0 : _a2.color) == null ? void 0 : _b2.rgb.replace(")", ", 0.3)"),
210
+ color: (_d2 = (_c2 = style == null ? void 0 : style.background) == null ? void 0 : _c2.color) == null ? void 0 : _d2.hex
211
+ },
212
+ type: "button"
191
213
  },
192
- type: "button"
214
+ children: variant.title
193
215
  },
194
- children: variant.title
195
- },
196
- variant.shopifyId
197
- ))
216
+ variant.shopifyId
217
+ );
218
+ })
198
219
  }
199
220
  )
200
221
  ]
@@ -210,8 +231,8 @@ var CardAdvertisement = ({
210
231
  className: classes.content.join(" "),
211
232
  style: {
212
233
  ...fonts == null ? void 0 : fonts.body,
213
- backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
214
- color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
234
+ backgroundColor: (_w = (_v = style == null ? void 0 : style.text) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
235
+ color: (_y = (_x = style == null ? void 0 : style.background) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
215
236
  }
216
237
  },
217
238
  children: [
@@ -225,8 +246,8 @@ var CardAdvertisement = ({
225
246
  onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
226
247
  } : onClick,
227
248
  style: {
228
- backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
229
- color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
249
+ backgroundColor: (_A = (_z = style == null ? void 0 : style.background) == null ? void 0 : _z.color) == null ? void 0 : _A.hex,
250
+ color: (_C = (_B = style == null ? void 0 : style.text) == null ? void 0 : _B.color) == null ? void 0 : _C.hex
230
251
  },
231
252
  type: "button"
232
253
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drawbridge/components",
3
- "version": "0.0.4",
3
+ "version": "0.0.7",
4
4
  "exports": {
5
5
  "./card-advertisement": {
6
6
  "types": "./types/card-advertisement.d.ts",