@drawbridge/components 0.0.3 → 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 +55 -24
  2. package/dist/card-advertisement.mjs +45 -24
  3. package/package.json +2 -1
package/dist/card-advertisement.js CHANGED
@@ -1,6 +1,8 @@
1
+ var __create = Object.create;
1
2
  var __defProp = Object.defineProperty;
2
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
4
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
5
7
  var __export = (target, all) => {
6
8
  for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
14
16
  }
15
17
  return to;
16
18
  };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
17
27
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
28
 
19
29
  // components/card-advertisement.js
@@ -22,7 +32,7 @@ __export(card_advertisement_exports, {
22
32
  default: () => card_advertisement_default
23
33
  });
24
34
  module.exports = __toCommonJS(card_advertisement_exports);
25
- var import_react = require("react");
35
+ var import_react = __toESM(require("react"));
26
36
  var import_jsx_runtime = require("react/jsx-runtime");
27
37
  var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
28
38
  "img",
@@ -45,32 +55,43 @@ var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ (0, impo
45
55
  }
46
56
  );
47
57
  var CardAdvertisement = ({
58
+ advertisement,
59
+ affiliate,
48
60
  asset,
49
61
  brand = {},
50
62
  button,
51
63
  campaign,
52
64
  fonts,
53
65
  ImageComponent = DefaultImage,
66
+ lead,
54
67
  onClick = () => {
55
68
  },
56
69
  organization,
70
+ page,
57
71
  preview = false,
58
72
  product,
59
73
  title,
60
74
  url,
61
75
  VideoComponent = DefaultVideo
62
76
  }) => {
63
- 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;
64
78
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
65
79
  const hasVariants = variants.length > 1;
66
80
  const [variantsOpen, setVariantsOpen] = (0, import_react.useState)(false);
67
81
  const variantUrl = (variant) => {
82
+ var _a2;
68
83
  const variantShopifyId = (variant.shopifyId || "").split("/").pop();
69
84
  const domain = (product == null ? void 0 : product.url) ? new URL(product.url).hostname : null;
70
85
  if (!domain || !variantShopifyId) return null;
71
86
  const params = [
72
- ...campaign ? ["attributes[drwbrdg_c]=" + campaign] : [],
73
- ...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)] : []
74
95
  ].join("&");
75
96
  return "https://" + domain + "/cart/" + variantShopifyId + ":1" + (params ? "?" + params : "");
76
97
  };
@@ -182,7 +203,7 @@ var CardAdvertisement = ({
182
203
  ...{
183
204
  className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
184
205
  style: {
185
- 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)"),
186
207
  transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
187
208
  }
188
209
  },
@@ -191,7 +212,10 @@ var CardAdvertisement = ({
191
212
  "p",
192
213
  {
193
214
  ...{
194
- 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
+ }
195
219
  },
196
220
  children: "Select an option"
197
221
  }
@@ -202,22 +226,29 @@ var CardAdvertisement = ({
202
226
  ...{
203
227
  className: "flex flex-wrap gap-2"
204
228
  },
205
- children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
206
- "button",
207
- {
208
- ...{
209
- className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
210
- onClick: () => {
211
- if (preview) return;
212
- const href = variantUrl(variant);
213
- 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"
214
246
  },
215
- type: "button"
247
+ children: variant.title
216
248
  },
217
- children: variant.title
218
- },
219
- variant.shopifyId
220
- ))
249
+ variant.shopifyId
250
+ );
251
+ })
221
252
  }
222
253
  )
223
254
  ]
@@ -233,8 +264,8 @@ var CardAdvertisement = ({
233
264
  className: classes.content.join(" "),
234
265
  style: {
235
266
  ...fonts == null ? void 0 : fonts.body,
236
- backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
237
- 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
238
269
  }
239
270
  },
240
271
  children: [
@@ -248,8 +279,8 @@ var CardAdvertisement = ({
248
279
  onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
249
280
  } : onClick,
250
281
  style: {
251
- backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
252
- 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
253
284
  },
254
285
  type: "button"
255
286
  },
package/dist/card-advertisement.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  // components/card-advertisement.js
2
- import { useState } from "react";
2
+ import React, { useState } from "react";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
  var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ jsx(
5
5
  "img",
@@ -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.3",
3
+ "version": "0.0.7",
4
4
  "exports": {
5
5
  "./card-advertisement": {
6
6
  "types": "./types/card-advertisement.d.ts",
@@ -25,6 +25,7 @@
25
25
  "react": ">=18"
26
26
  },
27
27
  "devDependencies": {
28
+ "@types/react": "^18.0.0",
28
29
  "tsup": "^8.5.1"
29
30
  }
30
31
  }